From e7fb595bb57e9706904a3e120117e3f189e105bc Mon Sep 17 00:00:00 2001
From: Aaron <yangtao.yangtao@antgroup.com>
Date: Thu, 30 May 2024 18:56:39 +0800
Subject: [PATCH] fix: fix issue that arrow cannot update (#5790)

---
 .../bugs/element-edge-update-arrow.spec.ts    | 38 +++++++++++++++++++
 .../element-edge-update-arrow/default.svg     | 37 ++++++++++++++++++
 .../update-arrow.svg                          | 37 ++++++++++++++++++
 packages/g6/src/elements/edges/base-edge.ts   |  2 +-
 4 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 packages/g6/__tests__/bugs/element-edge-update-arrow.spec.ts
 create mode 100644 packages/g6/__tests__/snapshots/__tests__/bugs/element-edge-update-arrow/default.svg
 create mode 100644 packages/g6/__tests__/snapshots/__tests__/bugs/element-edge-update-arrow/update-arrow.svg

diff --git a/packages/g6/__tests__/bugs/element-edge-update-arrow.spec.ts b/packages/g6/__tests__/bugs/element-edge-update-arrow.spec.ts
new file mode 100644
index 00000000000..bc3389ffa06
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/packages/g6/__tests__/snapshots/__tests__/bugs/element-edge-update-arrow/default.svg b/packages/g6/__tests__/snapshots/__tests__/bugs/element-edge-update-arrow/default.svg
new file mode 100644
index 00000000000..b02855b16bb
--- /dev/null
+++ b/packages/g6/__tests__/snapshots/__tests__/bugs/element-edge-update-arrow/default.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
+  <defs/>
+  <g >
+    <g fill="none">
+      <g fill="none"/>
+      <g fill="none">
+        <g fill="none" marker-start="true" marker-end="true">
+          <g fill="none" marker-start="true" marker-end="true" stroke="transparent" stroke-width="3"/>
+          <g>
+            <path fill="none" d="M 117,100 L 112,100 L 183,100" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 117,100 L 112,100 L 183,100" stroke-width="3" stroke="transparent"/>
+            <g transform="matrix(1,0,0,1,117,100)">
+              <path fill="rgba(255,0,0,1)" d="M -4,0 L 4,-4 L 4,4 Z" stroke-width="1" stroke="rgba(153,173,209,1)" width="8" height="8" stroke-dasharray="0,0"/>
+              <path fill="transparent" d="M -4,0 L 4,-4 L 4,4 Z" stroke-width="3" stroke="transparent" width="8" height="8" stroke-dasharray="0,0"/>
+            </g>
+            <g transform="matrix(-1,0,-0,-1,183,100)">
+              <path fill="rgba(0,128,0,1)" d="M -4,0 L 4,-4 L 4,4 Z" stroke-width="1" stroke="rgba(153,173,209,1)" width="8" height="8" stroke-dasharray="0,0"/>
+              <path fill="transparent" d="M -4,0 L 4,-4 L 4,4 Z" stroke-width="3" stroke="transparent" width="8" height="8" stroke-dasharray="0,0"/>
+            </g>
+          </g>
+        </g>
+      </g>
+      <g fill="none">
+        <g fill="none" x="100" y="100" transform="matrix(1,0,0,1,100,100)">
+          <g>
+            <circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
+          </g>
+        </g>
+        <g fill="none" x="200" y="100" transform="matrix(1,0,0,1,200,100)">
+          <g>
+            <circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/__tests__/snapshots/__tests__/bugs/element-edge-update-arrow/update-arrow.svg b/packages/g6/__tests__/snapshots/__tests__/bugs/element-edge-update-arrow/update-arrow.svg
new file mode 100644
index 00000000000..ada7824d1e0
--- /dev/null
+++ b/packages/g6/__tests__/snapshots/__tests__/bugs/element-edge-update-arrow/update-arrow.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
+  <defs/>
+  <g >
+    <g fill="none">
+      <g fill="none"/>
+      <g fill="none">
+        <g fill="none" marker-start="true" marker-end="true">
+          <g fill="none" marker-start="true" marker-end="true" stroke="transparent" stroke-width="3"/>
+          <g>
+            <path fill="none" d="M 117,100 L 112,100 L 183,100" stroke-width="1" stroke="rgba(153,173,209,1)"/>
+            <path fill="none" d="M 117,100 L 112,100 L 183,100" stroke-width="3" stroke="transparent"/>
+            <g transform="matrix(1,0,0,1,117,100)">
+              <path fill="rgba(128,0,128,1)" d="M -4,0 L 4,-4 L 4,4 Z" stroke-width="1" stroke="rgba(0,0,255,1)" width="8" height="8" stroke-dasharray="0,0"/>
+              <path fill="transparent" d="M -4,0 L 4,-4 L 4,4 Z" stroke-width="3" stroke="transparent" width="8" height="8" stroke-dasharray="0,0"/>
+            </g>
+            <g transform="matrix(-1,0,-0,-1,183,100)">
+              <path fill="rgba(255,192,203,1)" d="M -4,0 L 4,-4 L 4,4 Z" stroke-width="1" stroke="rgba(255,255,0,1)" width="8" height="8" stroke-dasharray="0,0"/>
+              <path fill="transparent" d="M -4,0 L 4,-4 L 4,4 Z" stroke-width="3" stroke="transparent" width="8" height="8" stroke-dasharray="0,0"/>
+            </g>
+          </g>
+        </g>
+      </g>
+      <g fill="none">
+        <g fill="none" x="100" y="100" transform="matrix(1,0,0,1,100,100)">
+          <g>
+            <circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
+          </g>
+        </g>
+        <g fill="none" x="200" y="100" transform="matrix(1,0,0,1,200,100)">
+          <g>
+            <circle fill="rgba(23,131,255,1)" stroke-width="0" stroke="rgba(0,0,0,1)" r="12"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/g6/src/elements/edges/base-edge.ts b/packages/g6/src/elements/edges/base-edge.ts
index e16db954817..3a5469bf3c7 100644
--- a/packages/g6/src/elements/edges/base-edge.ts
+++ b/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