fix: basic shapes update (#336)

Co-authored-by: ian.lxl <ian.lxl@antgroup.com>

Author: huaxiabuluo

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();
     }
   });
 }

packages/f-engine/test/canvas/render/__image_snapshots__/vnode-update-test-tsx-vnode-更新-基础图形更新-1-snap.png

@@ -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();
+  });
 });