fix: 修复update逻辑下 mapping 的问题 && 手势交互的bug (#1278)

antvis · Nov 25, 2021 · 5ae3168 · 5ae3168
1 parent be97e61
commit 5ae3168
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git a/packages/f2/src/components/axis/types.ts b/packages/f2/src/components/axis/types.ts
@@ -105,5 +105,9 @@ export interface AxisProps {
    * note: 作为 `<Chart />` 子元素时将自动注入
    */
   coord?: Coord;
+  /**
+   * note: 作为 `<Chart />` 子元素时将自动注入
+   */
+  zoomRange?: [number, number];
   [key: string]: any; // TODO
 }
diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx
@@ -4,9 +4,15 @@ import equal from '../../base/equal';
 import Component from '../../base/component';
 import { Style, Tick, AxisProps } from './types';
 
+type BBox = {
+  height: number;
+  width: number;
+};
+
 export default (View) => {
   return class Axis extends Component<AxisProps> {
     style: Style = {};
+    maxBBox: BBox;
 
     constructor(props: AxisProps) {
       super(props);
@@ -60,8 +66,8 @@ export default (View) => {
       return scales.length > 0 ? 'x' : 'y';
     }
     // 获取ticks最大的宽高
-    getMaxBBox(ticks, style: Style) {
-      const { context } = this;
+    getMaxBBox(ticks, style: Style): BBox {
+      const { context, maxBBox } = this;
       const { measureText } = context;
       const { labelOffset } = style;
 
@@ -73,10 +79,22 @@ export default (View) => {
         width = Math.max(width, bbox.width);
         height = Math.max(height, bbox.height);
       });
-      return {
+
+      let 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;
     }
 
     _getPosition() {

diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx
@@ -53,8 +53,8 @@ class Geometry<T extends GeometryProps = GeometryProps> extends Component<T> {
 
   willReceiveProps(nextProps) {
     const { props: lastProps, attrController } = this;
-    const { data: nextData, adjust: nextAdjust } = nextProps;
-    const { data: lastData, adjust: lastAdjust } = lastProps;
+    const { data: nextData, adjust: nextAdjust, zoomRange: nextZoomRange } = nextProps;
+    const { data: lastData, adjust: lastAdjust, zoomRange: lastZoomRange } = lastProps;
 
     const nextAttrOptions = attrController.getAttrOptions(nextProps);
     const lastAttrOptions = attrController.getAttrOptions(lastProps);
@@ -72,6 +72,11 @@ class Geometry<T extends GeometryProps = GeometryProps> extends Component<T> {
     if (nextAdjust !== lastAdjust) {
       this.records = null;
     }
+
+    // zoomRange发生变化,records也需要重新计算
+    if(!equal(nextZoomRange, lastZoomRange)) {
+      this.records = null;
+    }
   }
 
   willMount() {

diff --git a/packages/f2/test/components/interaction/pan.test.tsx b/packages/f2/test/components/interaction/pan.test.tsx
@@ -22,13 +22,6 @@ class InjectTestComponent extends Component {
         interactionContext.doMove(-0.001 * i);
       }, i * 100);
     }
-
-    setTimeout(() => {
-      // expect: 这里播放动画
-      this.props.chart.setState({
-        zoomRange: [0, 0],
-      });
-    }, 1000);
   }
 }