fix: 修复 pan pinch 事件交互的 case (#1667)

antvis · Dec 2, 2022 · 963595e · 963595e
1 parent 2897e76
commit 963595e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 16 deletions.
diff --git a/packages/f2/src/chart/index.ts b/packages/f2/src/chart/index.ts
@@ -18,8 +18,6 @@ export interface ChartProps<TRecord extends DataRecord = DataRecord> {
   data: Data<TRecord>;
   scale?: DataRecordScale<TRecord>;
   coord?: CoordType | CoordProps;
-  start?: Point;
-  end?: Point;
   style?: GroupStyleProps;
   theme?: Record<string, any>;
   children?: any;
@@ -295,19 +293,22 @@ class Chart<TRecord extends DataRecord = DataRecord> extends Component<
   }
 
   render() {
-    const { props } = this;
+    const { props, scale } = this;
     const { children, data: originData } = props;
     if (!originData) return null;
     const data = this._getRenderData();
     const layout = this.getLayout();
     const coord = this.getCoord();
+    const scaleOptions = scale.getOptions();
 
     return Children.map(children, (child) => {
       return Children.cloneElement(child, {
+        data,
         chart: this,
         layout,
         coord,
-        data,
+        // 传 scaleOptions 是为了让 child 感知到 props 的的变化，合理的做法的应该是传递 scale，但是现在无法感知到 scale 的变化, 所以暂时只能先这么处理，scaleOptions 子组件目前是使用不到的。
+        scaleOptions,
       });
     });
   }

diff --git a/packages/f2/src/components/zoom/index.tsx b/packages/f2/src/components/zoom/index.tsx
@@ -2,7 +2,7 @@ import { Component, isEqual } from '@antv/f-engine';
 import { ChartChildProps } from '../../chart';
 import { updateRange, updateFollow } from './zoomUtil';
 import { Scale, ScaleConfig } from '../../deps/f2-scale/src';
-import { each, isNumberEqual } from '@antv/util';
+import { each, isNumberEqual, isArray } from '@antv/util';
 
 export type ZoomRange = [number, number];
 export type ScaleValues = number[] | string[];
@@ -98,7 +98,7 @@ class Zoom<P extends ZoomProps = ZoomProps, S extends ZoomState = ZoomState> ext
     endY: 0,
   };
 
-  loop;
+  loop: number;
 
   constructor(props: P) {
     const defaultProps = {
@@ -112,9 +112,9 @@ class Zoom<P extends ZoomProps = ZoomProps, S extends ZoomState = ZoomState> ext
       minCount: 10,
     };
     super({ ...defaultProps, ...props });
-    const { range = [0, 1], mode } = props;
+    const { mode } = props;
 
-    this.dims = mode instanceof Array ? mode : [mode];
+    this.dims = isArray(mode) ? mode : [mode];
   }
 
   didMount(): void {
@@ -138,9 +138,8 @@ class Zoom<P extends ZoomProps = ZoomProps, S extends ZoomState = ZoomState> ext
   }
 
   willMount(): void {
-    const { props, dims, state } = this;
+    const { props, dims } = this;
     const { minCount, range } = props;
-    // const { range } = state;
     let valueLength = Number.MIN_VALUE;
     const cacheRange = {};
 

diff --git a/packages/f2/src/controller/scale.ts b/packages/f2/src/controller/scale.ts
@@ -134,7 +134,8 @@ class ScaleController {
     options[field] = mix({}, options[field], option);
     // 如果scale有更新，scale 也需要重新创建
     if (scales[field]) {
-      delete scales[field];
+      scales[field].change(options[field]);
+      // delete scales[field];
     }
   }
 
@@ -147,10 +148,6 @@ class ScaleController {
     each(options, (option: ScaleOption, field: string) => {
       this.setScale(field, option);
     });
-    // 为了让外部感知到scale有变化
-    this.scales = {
-      ...this.scales,
-    };
   }
 
   changeData(data) {
@@ -192,6 +189,17 @@ class ScaleController {
     return scales;
   }
 
+  getOptions() {
+    const { scales } = this;
+
+    const options = {};
+    each(scales, (scale, field: string) => {
+      options[field] = { ...scale.__cfg__ };
+    });
+
+    return options;
+  }
+
   adjustStartZero(scale: Scale) {
     const { options } = this;
     const { field, min, max } = scale;

diff --git a/packages/f2/test/components/interaction/pan.test.tsx b/packages/f2/test/components/interaction/pan.test.tsx
@@ -4,7 +4,7 @@ import { Canvas, Chart } from '../../../src';
 import { Axis, Line, ScrollBar } from '../../../src';
 import { createContext, delay, gestureSimulator } from '../../util';
 
-describe.skip('平移和缩放', () => {
+describe('平移和缩放', () => {
   describe('平移和缩放-linear 类型', () => {
     const context = createContext('折线', {
       width: '350px',