fix: 修复chart未清除缓存的组件的问题 (#1856)

* fix: 修复chart未清除缓存的组件的问题

* feat: 增加单测

* fix: 需要在每次更新 coord 前清理已销毁的组件

---------

Co-authored-by: 兵人 <xuezhiqiang.xzq@antgroup.com>
Co-authored-by: zengyue <yezengyue@gmail.com>

packages/f2/src/chart/index.tsx

@@ -103,8 +103,7 @@ class Chart<
 
     const { scale: scaleOptions, coord: coordOption } = props;
 
-    const style = this.getStyle(props);
-    coord.updateLayout(style);
+    this.resetCoordLayout();
 
     // 初始化 scale
     scale.create(scaleOptions);
@@ -177,6 +176,7 @@ class Chart<
     if (!layout) return;
     const { componentsPosition } = this;
     const componentPosition = { component, layout };
+
     const existIndex = findIndex(componentsPosition, (item) => {
       return item.component === component;
     });
@@ -187,6 +187,8 @@ class Chart<
 
       // 先重置，然后整体重新算一次
       this.resetCoordLayout();
+      // 再整体计算前，需要去掉已经销毁的组件
+      this.removeComponentsPositionCache();
       componentsPosition.forEach((componentPosition) => {
         const { layout } = componentPosition;
         this.updateCoordLayout(layout);
@@ -199,6 +201,17 @@ class Chart<
     this.updateCoordLayout(layout);
   }
 
+  removeComponentsPositionCache() {
+    if (!this.componentsPosition?.length) return;
+
+    for (let i = this.componentsPosition.length; i > -1; i--) {
+      const item = this.componentsPosition[i];
+      if (item && item.component && item.component.destroyed) {
+        this.componentsPosition.splice(i, 1);
+      }
+    }
+  }
+
   getGeometrys() {
     // @ts-ignore
     const { children } = this.children;

packages/f2/test/chart/changeDataWithUndefined.test.tsx

@@ -0,0 +1,78 @@
+import { jsx, Canvas, Chart, Axis, Interval, Line, Point, Geometry, Area } from '../../src';
+import { createContext, delay } from '../util';
+const context = createContext();
+
+const data = [
+  { type: 'a', genre: 'Sports', sold: 5 },
+  { type: 'a', genre: 'Strategy', sold: 10 },
+  { type: 'a', genre: 'Action', sold: 20 },
+  { type: 'a', genre: 'Shooter', sold: 20 },
+  { type: 'a', genre: 'Other', sold: 40 },
+  { type: 'b', genre: 'Sports', sold: 5 },
+  { type: 'b', genre: 'Strategy', sold: 10 },
+  { type: 'b', genre: 'Action', sold: 20 },
+  { type: 'b', genre: 'Shooter', sold: 20 },
+  { type: 'b', genre: 'Other', sold: 40 },
+];
+
+type TRecord = typeof data[0];
+// 切换data时，切换为undefined，再切数据时图表缩小问题
+describe('Chart', () => {
+  it('Chart 切换data为undefined', async () => {
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart<TRecord> data={data}>
+          <Axis field="genre" />
+          <Axis<TRecord> field="sold" />
+          <Interval<TRecord> x="genre" y="sold" color="genre" />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    canvas.update(
+      (
+        <Canvas context={context} pixelRatio={1} animate={false}>
+          <Chart data={undefined}>
+            <Axis field="genre" />
+            <Axis field="sold" />
+            <Interval x="genre" y="sold" color="genre" />
+          </Chart>
+        </Canvas>
+      ).props
+    );
+
+    await delay(100);
+
+    canvas.update(
+      (
+        <Canvas context={context} pixelRatio={1} animate={false}>
+          <Chart data={data}>
+            <Axis field="genre" />
+            <Axis field="sold" />
+            <Interval x="genre" y="sold" color="genre" />
+          </Chart>
+        </Canvas>
+      ).props
+    );
+
+    await delay(100);
+
+    canvas.update(
+      (
+        <Canvas context={context} pixelRatio={1} animate={false}>
+          <Chart data={data.slice(0, 5)}>
+            <Axis field="genre" />
+            <Axis field="sold" />
+            <Interval x="genre" y="sold" color="genre" />
+          </Chart>
+        </Canvas>
+      ).props
+    );
+    await delay(100);
+
+    expect(context).toMatchImageSnapshot();
+  });
+});