fix: fix issue that arrow cannot update (#5790)

packages/g6/__tests__/bugs/element-edge-update-arrow.spec.ts

@@ -0,0 +1,38 @@
+import { createGraph } from '../utils';
+
+describe('bug: element-edge-update-arrow', () => {
+  it('should update edge arrow', async () => {
+    const graph = createGraph({
+      animation: false,
+      data: {
+        nodes: [
+          { id: 'node-0', style: { x: 100, y: 100 } },
+          { id: 'node-1', style: { x: 200, y: 100 } },
+        ],
+        edges: [
+          {
+            source: 'node-0',
+            target: 'node-1',
+            style: { startArrow: true, startArrowFill: 'red', endArrow: true, endArrowFill: 'green' },
+          },
+        ],
+      },
+    });
+
+    await graph.render();
+
+    await expect(graph).toMatchSnapshot(__filename);
+
+    graph.updateEdgeData([
+      {
+        source: 'node-0',
+        target: 'node-1',
+        style: { startArrowFill: 'purple', startArrowStroke: 'blue', endArrowFill: 'pink', endArrowStroke: 'yellow' },
+      },
+    ]);
+
+    await graph.render();
+
+    await expect(graph).toMatchSnapshot(__filename, 'update-arrow');
+  });
+});

packages/g6/src/elements/edges/base-edge.ts

@@ -303,7 +303,7 @@ export abstract class BaseEdge extends BaseElement<BaseEdgeStyleProps> {
         ? (['markerStart', 'markerStartOffset', 'startArrowOffset'] as const)
         : (['markerEnd', 'markerEndOffset', 'endArrowOffset'] as const);
 
-      const arrow = keyShape.style[marker];
+      const arrow = keyShape.parsedStyle[marker];
       // update
       if (arrow) arrow.attr(arrowStyle);
       // create