fix: prevent mark level pointerup when drag end

common/changes/@visactor/vchart/fix-prevent-handler_2024-08-01-09-23.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix:  prevent trigger original event in panEnd composite event #2931",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

packages/vchart/src/event/bubble.ts

@@ -37,10 +37,28 @@ export class Bubble {
     return this;
   }
 
+  preventHandler(handler: EventHandler<EventParams>): this {
+    if (handler) {
+      handler.prevented = true;
+    }
+    return this;
+  }
+
+  allowHandler(handler: EventHandler<EventParams>): this {
+    if (handler) {
+      handler.prevented = false;
+    }
+    return this;
+  }
+
   getHandlers(level: EventBubbleLevel): EventHandler<EventParams>[] {
     return this._levelNodes.get(level)?.map(node => node.handler) || [];
   }
 
+  getAllHandlers(): EventHandler<EventParams>[] {
+    return Array.from(this._map.values()).map(node => node.handler) || [];
+  }
+
   getCount() {
     return this._map.size;
   }

packages/vchart/src/event/event-dispatcher.ts

@@ -12,7 +12,8 @@ import type {
   EventParams,
   EventFilter,
   EventSourceType,
-  InteractionEventParam
+  InteractionEventParam,
+  EventCallback
 } from './interface';
 import type { VChart } from '../core/vchart';
 import type { CompilerListenerParameters } from '../compile/interface';
@@ -170,6 +171,32 @@ export class EventDispatcher implements IEventDispatcher {
     return this;
   }
 
+  prevent<Evt extends EventType>(eType: Evt, except?: EventCallback<EventParams>): this {
+    const eventTypes = ['canvas', 'chart', 'window'] as EventSourceType[];
+    eventTypes.forEach(type => {
+      const bubble = this.getEventBubble(type).get(eType);
+      if (bubble) {
+        bubble.getAllHandlers().forEach(handler => {
+          if (!except || handler.callback !== except) {
+            bubble.preventHandler(handler);
+          }
+        });
+      }
+    });
+    return this;
+  }
+
+  allow<Evt extends EventType>(eType: Evt): this {
+    const eventTypes = ['canvas', 'chart', 'window'] as EventSourceType[];
+    eventTypes.forEach(type => {
+      const bubble = this.getEventBubble(type).get(eType);
+      if (bubble) {
+        bubble.getAllHandlers().forEach(handler => bubble.allowHandler(handler));
+      }
+    });
+    return this;
+  }
+
   clear(): void {
     for (const entry of this._viewListeners.entries()) {
       this._compiler.removeEventListener(Event_Source_Type.chart, entry[0], entry[1]);
@@ -333,7 +360,7 @@ export class EventDispatcher implements IEventDispatcher {
   ): boolean {
     const result = handlers.map(handler => {
       const filter = handler.filter as EventFilter;
-      if (!handler.query || this._filter(filter, type, params)) {
+      if (!handler.prevented && (!handler.query || this._filter(filter, type, params))) {
         const callback = handler.wrappedCallback || handler.callback;
         const stopBubble = callback.call(null, this._prepareParams(filter, params));
         const doStopBubble = stopBubble ?? handler.query?.consume;

packages/vchart/src/event/event.ts

@@ -111,6 +111,16 @@ export class Event implements IEvent {
     return this;
   }
 
+  prevent<Evt extends EventType>(eType: Evt, except?: EventCallback<EventParamsDefinition[Evt]>) {
+    this._eventDispatcher.prevent(eType, except);
+    return this;
+  }
+
+  allow<Evt extends EventType>(eType: Evt) {
+    this._eventDispatcher.allow(eType);
+    return this;
+  }
+
   release(): void {
     this._eventDispatcher.clear();
     this._composedEventMap.clear();

packages/vchart/src/event/interface.ts

@@ -209,6 +209,8 @@ export type EventHandler<Params extends EventParams> = {
   wrappedCallback?: EventCallback<Params>;
   // 转换后的事件筛选配置
   filter?: EventFilter;
+  // handler 是否被禁止触发
+  prevented?: boolean;
 };
 
 export type ExtendEventParam = EventParams & {
@@ -316,6 +318,8 @@ export interface IEventDispatcher {
   dispatch: <Evt extends EventType>(eType: Evt, params?: EventParamsDefinition[Evt], level?: EventBubbleLevel) => this;
   clear: () => void;
   release: () => void;
+  prevent: <Evt extends EventType>(eType: Evt, except: EventCallback<EventParamsDefinition[Evt]>) => void;
+  allow: <Evt extends EventType>(eType: Evt) => void;
 }
 
 export interface IEvent {
@@ -335,6 +339,8 @@ export interface IEvent {
   release: () => void;
 
   getComposedEventMap: () => Map<EventCallback<EventParams>, { eventType: EventType; event: IComposedEvent }>;
+  prevent: <Evt extends EventType>(eType: Evt, except: EventCallback<EventParamsDefinition[Evt]>) => void;
+  allow: <Evt extends EventType>(eType: Evt) => void;
 }
 
 export interface IComposedEvent {

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

@@ -164,7 +164,6 @@ export class Zoomable implements IZoomable {
     const zoomEndParams: [string] | [string, EventQuery] = this._isGestureListener
       ? [this._getZoomTriggerEvent('zoomEnd')]
       : [this._getZoomTriggerEvent('zoomEnd'), { level: Event_Bubble_Level.chart, consume: false }];
-
     // pc端没有scrollEnd事件，所以漫游模式下scroll仅支持realTime
     (event as any).on(
       ...zoomEndParams,
@@ -469,12 +468,16 @@ export class Zoomable implements IZoomable {
       this._zoomableTrigger.pointerId = null;
       this._eventObj.off(move, { level: Event_Bubble_Level.chart, source: Event_Source_Type.chart }, mousemove as any);
       this._eventObj.off(end, { level: Event_Bubble_Level.chart, source: Event_Source_Type.window }, mouseup as any);
+      this._eventObj.allow(end);
     }, delayTime);
+
     const mousemove = delayMap[delayType]((params: BaseEventParams) => {
       if (!this._zoomableTrigger.parserDragEvent(params.event)) {
         return;
       }
       this._clickEnable = false;
+      this._eventObj.prevent(end, mouseup as any);
+
       const event = params.event;
       const dx = event.canvasX - moveX;
       const dy = event.canvasY - moveY;