fix: 修复 axis rerender 不更新布局和 labelOffset 报错 (#1293)

* fix: 修复 rerender 坐标轴不更新 * fix: 修复 pan 平移后，图表缩小的问题
antvis · Dec 1, 2021 · f08bea2 · f08bea2
1 parent e0d4bab
commit f08bea2
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 86 deletions.
diff --git a/packages/f2/src/chart/index.ts b/packages/f2/src/chart/index.ts
@@ -100,7 +100,6 @@ class Chart extends Component implements IChart, InteractionMixin {
     const {
       style: nextStyle,
       data: nextData,
-      coord: nextCoord,
       scale: nextScale,
       interactions: nextInteractions,
     } = nextProps;
@@ -118,11 +117,6 @@ class Chart extends Component implements IChart, InteractionMixin {
       coordController.updateLayout(this.layout);
     }
 
-    // willReceiveProps 一定会触发render，
-    // render 时要重置 coord 范围，重置后需要让所有子组件都重新render
-    // 所以这里不比较是否有差异，每次都新建，让所有子组件重新render
-    this.coord = coordController.create(nextCoord, this.layout);
-
     if (nextData !== lastData) {
       scaleController.changeData(nextData);
     }
@@ -133,6 +127,13 @@ class Chart extends Component implements IChart, InteractionMixin {
     }
   }
 
+  willUpdate() {
+    const { coordController, props } = this;
+    // render 时要重置 coord 范围，重置后需要让所有子组件都重新render
+    // 所以这里不比较是否有差异，每次都新建，让所有子组件重新render
+    this.coord = coordController.create(props.coord, this.layout);
+  }
+
   private getStyle(props, context) {
     const { theme, px2hd, left, top, width, height } = context;
     const { style } = props;

diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx
@@ -12,7 +12,6 @@ type BBox = {
 export default (View) => {
   return class Axis extends Component<AxisProps> {
     style: Style = {};
-    maxBBox: BBox;
 
     constructor(props: AxisProps) {
       super(props);
@@ -67,7 +66,7 @@ export default (View) => {
     }
     // 获取ticks最大的宽高
     getMaxBBox(ticks, style: Style): BBox {
-      const { context, maxBBox } = this;
+      const { context } = this;
       const { measureText } = context;
       const { labelOffset } = style;
 
@@ -80,20 +79,10 @@ export default (View) => {
         height = Math.max(height, bbox.height);
       });
 
-      let bbox = {
+      const bbox = {
         width: width + labelOffset,
         height: height + labelOffset,
       };
-
-      // 增量更新，以最大的宽高作为限制
-      if (maxBBox) {
-        bbox = {
-          height: Math.max(0, maxBBox.height - bbox.height),
-          width: Math.max(0, maxBBox.width - bbox.width),
-        };
-      }
-
-      this.maxBBox = bbox;
       return bbox;
     }
 
@@ -132,14 +121,12 @@ export default (View) => {
         if (style[key] === null) {
           return;
         }
-        const styleValue = isFunction(style[key]) ? undefined : style[key]
+        const styleValue = isFunction(style[key]) ? undefined : style[key];
 
         if (isString(value) || isNumber(value)) {
           this.style[key] = px2hd(styleValue) || value;
         } else {
-          this.style[key] = px2hd(
-            deepMix(clone(value), styleValue)
-          );
+          this.style[key] = px2hd(deepMix(clone(value), styleValue));
         }
       });
 
@@ -182,8 +169,8 @@ export default (View) => {
 
     // 主要是计算coord的布局
     updateCoord() {
-      const { props, context } = this;
-      const { visible, style, chart, coord } = props;
+      const { props } = this;
+      const { visible, chart, coord } = props;
       if (visible === false) {
         return;
       }

diff --git a/packages/f2/test/components/axis/axis.test.tsx b/packages/f2/test/components/axis/axis.test.tsx
@@ -209,6 +209,7 @@ describe('Axis 轴', () => {
                 }
                 return cfg;
               },
+              labelOffset: '8px',
             }}
           />
           <Line x="index" y="value" color="#2FC25B" />

diff --git a/packages/f2/test/components/interaction/pan.test.tsx b/packages/f2/test/components/interaction/pan.test.tsx
@@ -1,61 +1,22 @@
-// @ts-nocheck
 import { jsx } from '../../../src';
-import { Polar, Rect } from '../../../src/coord';
-import { Canvas, Chart, Component } from '../../../src';
-import { Interval, Axis, Legend, Tooltip, Line } from '../../../src/components';
-import { createContext } from '../../util';
-
-class Interaction {}
-
-class CustomInteraction extends Interaction {}
-
-class InjectTestComponent extends Component {
-  didMount() {
-    const interactionContext = this.props.chart.interaction.context;
-    window.interactionContext = interactionContext;
-    interactionContext.doZoom(0.5, 0.5, 1.5);
-
-    for (let i = 0; i <= 9; i++) {
-      setTimeout(() => {
-        // interactionContext.doZoom(0.5, 0.5, 1.5)
-        interactionContext.start();
-        interactionContext.doMove(-0.001 * i);
-      }, i * 100);
-    }
-  }
-}
+import { Canvas, Chart } from '../../../src';
+import { Axis, Line } from '../../../src/components';
+import { createContext, delay } from '../../util';
 
 describe('Interaction 交互', () => {
-  it.only('平移和缩放', async () => {
+  it('平移和缩放', async () => {
     const context = createContext('基础柱状图', {
-      width: '500px',
+      width: '350px',
       height: '300px',
     });
     const chartRef = { current: null };
     const res = await fetch('https://gw.alipayobjects.com/os/antfincdn/KbnoL5QgL0/index.json');
     const data = await res.json();
-    const { type, props } = (
-      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
         <Chart
           ref={chartRef}
           data={data}
-          coord={
-            {
-              // type: Polar,
-              // transposed: true,
-              // left: 100,
-              // top: 100,
-              // right: 100,
-              // bottom: 100,
-            }
-          }
-          scale={{
-            // genre: {},
-            reportDateTimestamp: {
-              range: [0, 1],
-              mask: 'MM-DD',
-            },
-          }}
           interactions={[
             {
               type: 'pan', // 平移
@@ -75,25 +36,28 @@ describe('Interaction 交互', () => {
             // }
           ]}
         >
-          {/* <Legend /> */}
-          <Axis field="reportDateTimestamp" type="timeCat" />
+          <Axis field="reportDateTimestamp" type="timeCat" mask="MM-DD" />
           <Axis field="rate" />
-          {/* <Axis field="genre" position="top"/> */}
-          {/* <Axis field="sold" position="right" /> */}
-          <Line
-            x="reportDateTimestamp"
-            y="rate"
-            color="codeType"
-            // adjust="stack"
-          />
-          <InjectTestComponent />
-          {/* <Tooltip /> */}
+          <Line x="reportDateTimestamp" y="rate" color="codeType" />
         </Chart>
       </Canvas>
     );
 
-    // @ts-ignore
-    const canvas = new type(props);
+    const canvas = new Canvas(props);
     canvas.render();
+
+    const chart = chartRef.current;
+
+    const interactionContext = chart.interaction.context;
+    interactionContext.doZoom(0.5, 0.5, 1.5);
+
+    await delay(100);
+    interactionContext.start();
+    interactionContext.doMove(-0.008);
+
+    await delay(100);
+    expect(chart.coord.top).toBe(15);
+    expect(chart.coord.left).toBeCloseTo(41.96);
+    expect(chart.coord.bottom).toBeCloseTo(267.5);
   });
 });
diff --git a/packages/f2/test/util.ts b/packages/f2/test/util.ts
@@ -1,3 +1,11 @@
+function delay(time) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+}
+
 const createContext = (title = '', { height = '225px', width = '300px' }: any = {}) => {
   const canvasEl = document.createElement('canvas');
   const titleEl = document.createElement('p');
@@ -11,4 +19,4 @@ const createContext = (title = '', { height = '225px', width = '300px' }: any =
   return context;
 };
 
-export { createContext };
+export { createContext, delay };