fix: drag of zoomable should not be triggered when has multiple pointers

Author: xile611

packages/vchart/src/component/common/trigger/desktop.ts

@@ -1,8 +1,6 @@
 import type { IZoomTrigger } from './interface';
 
 export class DeskTopTrigger implements IZoomTrigger {
-  pointerId: number;
-
   parserScrollEvent(e: any) {
     if (!e) {
       return e;
@@ -40,7 +38,4 @@ export class DeskTopTrigger implements IZoomTrigger {
   clearDrag(): void {
     // do nothing
   }
-  parserDragEvent(): boolean {
-    return true;
-  }
 }

packages/vchart/src/component/common/trigger/interface.ts

@@ -1,7 +1,5 @@
 export interface IZoomTrigger {
-  pointerId: number;
   parserZoomEvent: (e: any) => any;
-  parserDragEvent: (event: any) => boolean;
   parserScrollEvent: (event: any) => any;
   clearZoom: () => void;
   clearScroll: () => void;

packages/vchart/src/component/common/trigger/mobile.ts

@@ -1,23 +1,21 @@
 import type { IZoomTrigger } from './interface';
 export class MobileTrigger implements IZoomTrigger {
   private _lastScale = 0;
-  pointerId: number;
 
   clearZoom(): void {
     this._lastScale = 0;
-    this.pointerId = null;
   }
 
-  parserDragEvent(event: any): boolean {
-    // 下面的代码逻辑本意是：单指(pointerId===0) -> 多指(pointerId === 1) 切换后, 终止touch事件
-    // 问题：ios系统/部分MIUI系统，单指/多指滑动过程中, pointerId每次都不一样，所以无法做到上述识别
-    // 解决方法: 暂时不做流程判断, 如果后续有需求, 单指 -> 多指可以考虑用event.isPrimary判断
-    // if (this.pointerId) {
-    //   return this.pointerId === event.pointerId;
-    // }
-    // this.pointerId = event.pointerId;
-    return true;
-  }
+  // parserDragEvent(event: any): boolean {
+  //   // 下面的代码逻辑本意是：单指(pointerId===0) -> 多指(pointerId === 1) 切换后, 终止touch事件
+  //   // 问题：ios系统/部分MIUI系统，单指/多指滑动过程中, pointerId每次都不一样，所以无法做到上述识别
+  //   // 解决方法: 暂时不做流程判断, 如果后续有需求, 单指 -> 多指可以考虑用event.isPrimary判断
+  //   // if (this.pointerId) {
+  //   //   return this.pointerId === event.pointerId;
+  //   // }
+  //   // this.pointerId = event.pointerId;
+  //   return true;
+  // }
 
   parserZoomEvent(event: any) {
     const scale = event.scale;

packages/vchart/src/component/data-zoom/data-filter-base-component.ts

@@ -880,7 +880,6 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
     if (this._dragAttr.reverse) {
       value = -value;
     }
-
     this._handleChartMove(value, this._dragAttr.rate ?? 1);
   };
 

packages/vchart/src/interaction/zoom/zoomable.ts

@@ -475,6 +475,16 @@ export class Zoomable implements IZoomable {
     }
   }
 
+  private isDragEnable(event: any) {
+    if (this._isGestureListener && this._gestureController) {
+      const events = (this._gestureController as any).cachedEvents;
+
+      return !events || events.length < 2;
+    }
+
+    return true;
+  }
+
   protected _handleDrag(
     params: ExtendEventParam,
     callback?: (delta: [number, number], e: BaseEventParams['event']) => void,
@@ -485,7 +495,8 @@ export class Zoomable implements IZoomable {
       return;
     }
     this._clickEnable = false;
-    if (!this._zoomableTrigger.parserDragEvent(params.event)) {
+
+    if (!this.isDragEnable(params.event)) {
       return;
     }
     this._zoomableTrigger.clearZoom(); // 防止zoom 事件被同时触发, 状态混乱
@@ -519,12 +530,11 @@ export class Zoomable implements IZoomable {
         delta,
         model: this
       } as unknown as BaseEventParams);
-      this._zoomableTrigger.pointerId = null;
       this._clearDragEvent();
     }, delayTime);
 
     this._handleDragMouseMove = delayMap[delayType]((params: ExtendEventParam) => {
-      if (!this._zoomableTrigger.parserDragEvent(params.event)) {
+      if (!this.isDragEnable(params.event)) {
         return;
       }
       this._clickEnable = false;