From 6003f7569be919685db1cdfd2150e12e56b1801c Mon Sep 17 00:00:00 2001
From: "ian.lxl" <ian.lxl@antgroup.com>
Date: Thu, 24 Jul 2025 20:22:48 +0800
Subject: [PATCH] fix: basic shapes update

---
 packages/f-engine/src/canvas/render/index.ts  |   6 ++-
 ...75\242\346\233\264\346\226\260-1-snap.png" | Bin 0 -> 3473 bytes
 .../test/canvas/render/vnodeUpdate.test.tsx   |  37 ++++++++++++++++++
 3 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 "packages/f-engine/test/canvas/render/__image_snapshots__/vnode-update-test-tsx-vnode-\346\233\264\346\226\260-\345\237\272\347\241\200\345\233\276\345\275\242\346\233\264\346\226\260-1-snap.png"

diff --git a/packages/f-engine/src/canvas/render/index.ts b/packages/f-engine/src/canvas/render/index.ts
index 35a8fbc7..f1381c6a 100644
--- a/packages/f-engine/src/canvas/render/index.ts
+++ b/packages/f-engine/src/canvas/render/index.ts
@@ -188,14 +188,16 @@ function createElement(parent: VNode, element: JSX.Element): VNode | VNode[] | n
 function destroyElement(vNode: VNode | VNode[] | null) {
   Children.map(vNode, (node: VNode | null) => {
     if (!node) return;
-    const { component, children } = node;
+    const { component, children, shape, tag } = node;
     if (component) {
       component.willUnmount();
       destroyElement(children);
       component.didUnmount();
       component.destroy();
-    } else {
+    } else if (children) {
       destroyElement(children);
+    } else if (tag === Shape && shape)  {
+      shape.destroy();
     }
   });
 }
diff --git "a/packages/f-engine/test/canvas/render/__image_snapshots__/vnode-update-test-tsx-vnode-\346\233\264\346\226\260-\345\237\272\347\241\200\345\233\276\345\275\242\346\233\264\346\226\260-1-snap.png" "b/packages/f-engine/test/canvas/render/__image_snapshots__/vnode-update-test-tsx-vnode-\346\233\264\346\226\260-\345\237\272\347\241\200\345\233\276\345\275\242\346\233\264\346\226\260-1-snap.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c64c72b415e5c189913208864f4ece439d28d8c6
GIT binary patch
literal 3473
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

literal 0
HcmV?d00001

diff --git a/packages/f-engine/test/canvas/render/vnodeUpdate.test.tsx b/packages/f-engine/test/canvas/render/vnodeUpdate.test.tsx
index 09137be0..6e444c7e 100644
--- a/packages/f-engine/test/canvas/render/vnodeUpdate.test.tsx
+++ b/packages/f-engine/test/canvas/render/vnodeUpdate.test.tsx
@@ -42,4 +42,41 @@ describe('vnode 更新', () => {
 
     expect(ref.current._vNode.props.update).toBe(true);
   });
+  it('基础图形更新', async () => {
+    const context = createContext();
+    const { props } = (
+      <Canvas context={context}>
+        <rect
+          style={{
+            width: 36,
+            height: 36,
+            fill: 'red',
+          }}
+        />
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    const { props: nextProps } = (
+      <Canvas context={context}>
+        <circle
+          style={{
+            cx: 80,
+            cy: 30,
+            r: 20,
+            lineWidth: 2,
+            stroke: '#e45649',
+            fill: 'blue',
+          }}
+        />
+      </Canvas>
+    );
+    await delay(500);
+    await canvas.update(nextProps);
+
+    await delay(200);
+    expect(context).toMatchImageSnapshot();
+  });
 });