From 9664d9ae81341f4c20f9df21faffbbdb9c16281f Mon Sep 17 00:00:00 2001
From: Mingfei Ding <xiesansi@gmail.com>
Date: Wed, 11 Oct 2023 15:54:29 +0800
Subject: [PATCH] feat(panning): add a new eventType 'mouseWheelDown'

---
 packages/x6/src/graph/panning.ts | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/x6/src/graph/panning.ts b/packages/x6/src/graph/panning.ts
index f26a1dee575..d1556b560d5 100644
--- 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