fix: 数据对象中存在 x,y 等关键字段 (#1688)

antvis · Dec 22, 2022 · b6414ad · b6414ad
1 parent 52769c9
commit b6414ad
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 14 deletions.
diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx
@@ -74,6 +74,8 @@ class Geometry<
 
   // 预处理后的数据
   dataArray: any;
+  // data 预处理后，records mapping 前的数据
+  dataRecords: any[];
   records: any[];
   mappedArray: any;
   // x 轴居中
@@ -120,17 +122,17 @@ class Geometry<
 
     if (!isEqual(nextAttrOptions, lastAttrOptions)) {
       attrController.update(nextAttrOptions);
-      this.records = null;
+      this.dataRecords = null;
     }
 
     // 重新处理数据
     if (nextData !== lastData) {
-      this.records = null;
+      this.dataRecords = null;
     }
 
     // 重新处理数据
     if (nextAdjust !== lastAdjust) {
-      this.records = null;
+      this.dataRecords = null;
     }
 
     // selection 发生变化
@@ -141,13 +143,13 @@ class Geometry<
 
   willMount() {
     this._createAttrs();
-    if (!this.records) {
+    if (!this.dataRecords) {
       this._processData();
     }
   }
   willUpdate() {
     this._createAttrs();
-    if (!this.records) {
+    if (!this.dataRecords) {
       this._processData();
     }
   }
@@ -355,7 +357,7 @@ class Geometry<
       this._sortData(records);
     }
 
-    this.records = records;
+    this.dataRecords = records;
   }
 
   _sortData(records) {
@@ -443,6 +445,7 @@ class Geometry<
     const { linearAttrs, nonlinearAttrs } = attrController.getAttrsByLinear();
     const defaultAttrValues = attrController.getDefaultAttrValues();
 
+    const mappedRecords = [];
     for (let i = 0, len = records.length; i < len; i++) {
       const record = records[i];
       const { children } = record;
@@ -451,6 +454,7 @@ class Geometry<
       };
       const firstChild = children[0];
       if (children.length === 0) {
+        mappedRecords.push({ ...record });
         continue;
       }
       // 非线性映射
@@ -462,6 +466,7 @@ class Geometry<
       }
 
       // 线性属性映射
+      const mappedChildren = [];
       for (let j = 0, childrenLen = children.length; j < childrenLen; j++) {
         const child = children[j];
         const normalized: any = {};
@@ -482,11 +487,14 @@ class Geometry<
         });
 
         // 获取 shape 的 style
+        const { origin } = child;
         const shapeName = attrValues.shape;
-        const shape = this._getShapeStyle(shapeName, child.origin);
+        const shape = this._getShapeStyle(shapeName, origin);
         const selected = this.isSelected(child);
 
-        mix(child, attrValues, {
+        mappedChildren.push({
+          ...child,
+          ...attrValues,
           normalized,
           x,
           y,
@@ -495,17 +503,21 @@ class Geometry<
           selected,
         });
       }
+      mappedRecords.push({
+        ...record,
+        children: mappedChildren,
+      });
     }
-    return records;
+    return mappedRecords;
   }
 
   // 数据映射
   mapping() {
-    const { records } = this;
+    const { dataRecords } = this;
     // 数据映射
-    this._mapping(records);
+    this.records = this._mapping(dataRecords);
 
-    return records;
+    return this.records;
   }
 
   getClip() {

diff --git a/packages/f2/test/canvas/lifecycle.test.tsx b/packages/f2/test/canvas/lifecycle.test.tsx
@@ -121,7 +121,7 @@ class TestContainer extends Component {
 }
 
 describe('Canvas', () => {
-  it.skip('生命周期', async () => {
+  it('生命周期', async () => {
     const ref = { current: null };
     const { props } = (
       <Canvas context={context} pixelRatio={1}>
@@ -292,6 +292,7 @@ describe('Canvas', () => {
       ['componentRender'],
       ['componentDidUpdate'],
       ['containerDidUpdate'],
+      ['componentShouldUpdate'],
       ['componentWillUpdate'],
       ['componentRender'],
       ['componentDidUpdate'],

diff --git a/...ents/geometry/__image_snapshots__/index-test-tsx-geometry-原始数据中有绘图属性-1-snap.png b/...ents/geometry/__image_snapshots__/index-test-tsx-geometry-原始数据中有绘图属性-1-snap.png
diff --git a/packages/f2/test/components/geometry/index.test.tsx b/packages/f2/test/components/geometry/index.test.tsx
@@ -1,4 +1,4 @@
-import { jsx } from '../../../src';
+import { jsx, Line } from '../../../src';
 import Geometry from '../../../src/components/geometry';
 import { createContext, delay } from '../../util';
 import { Canvas, Chart, Interval, Axis } from '../../../src';
@@ -87,4 +87,44 @@ describe('geometry', () => {
     await delay(50);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('原始数据中有绘图属性', async () => {
+    const data = [
+      { type: 'FULFILLMENT', y: 171, x: '守约记录' },
+      { type: 'BEHAVIOR', y: 180, x: '行为积累' },
+      { type: 'CHARACTERISTICS', y: 179, x: '身份证明' },
+      { type: 'CAPITAL', y: 160, x: '资产证明' },
+      { type: 'RELATIONSHIP', y: 146, x: '人脉关系' },
+    ];
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={data}>
+          <Line x="x" y="y" />
+        </Chart>
+      </Canvas>
+    );
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    const newChart = (
+      <Chart data={data}>
+        <Line x="x" y="y" />
+        <circle
+          style={{
+            cx: 100,
+            cy: 100,
+            r: 20,
+            fill: 'red',
+          }}
+        />
+      </Chart>
+    );
+
+    await canvas.update({
+      children: newChart,
+    });
+
+    await delay(50);
+    expect(context).toMatchImageSnapshot();
+  });
 });