feat(panning): add a new eventType 'mouseWheelDown'

antvis · Oct 11, 2023 · 9664d9a · 9664d9a
1 parent 443210c
commit 9664d9a
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/packages/x6/src/graph/panning.ts b/packages/x6/src/graph/panning.ts
@@ -34,6 +34,12 @@ export class PanningManager extends Base {
       this.onRightMouseDown = this.onRightMouseDown.bind(this)
       Dom.Event.on(this.graph.container, 'mousedown', this.onRightMouseDown)
     }
+
+    if (eventTypes.includes('mouseWheelDown')) {
+      this.onMouseWheelDown = this.onMouseWheelDown.bind(this)
+      Dom.Event.on(this.graph.container, 'mousedown', this.onMouseWheelDown)
+    }
+
     if (eventTypes.includes('mouseWheel')) {
       this.mousewheelHandle = new Dom.MouseWheelHandle(
         this.graph.container,
@@ -57,6 +63,9 @@ export class PanningManager extends Base {
     if (eventTypes.includes('rightMouseDown')) {
       Dom.Event.off(this.graph.container, 'mousedown', this.onRightMouseDown)
     }
+    if (eventTypes.includes('mouseWheelDown')) {
+      Dom.Event.off(this.graph.container, 'mousedown', this.onMouseWheelDown)
+    }
     if (eventTypes.includes('mouseWheel')) {
       if (this.mousewheelHandle) {
         this.mousewheelHandle.disable()
@@ -137,6 +146,12 @@ export class PanningManager extends Base {
     }
   }
 
+  protected onMouseWheelDown(e: Dom.MouseDownEvent) {
+    if (e.button === 1 && this.allowPanning(e, true)) {
+      this.startPanning(e)
+    }
+  }
+
   protected allowMouseWheel(e: WheelEvent) {
     return this.pannable && !e.ctrlKey
   }
@@ -195,7 +210,11 @@ export class PanningManager extends Base {
 }
 
 export namespace PanningManager {
-  type EventType = 'leftMouseDown' | 'rightMouseDown' | 'mouseWheel'
+  type EventType =
+    | 'leftMouseDown'
+    | 'rightMouseDown'
+    | 'mouseWheel'
+    | 'mouseWheelDown'
   export interface Options {
     enabled?: boolean
     modifiers?: string | ModifierKey[] | null