feat: panning modifiers add space (#4166)

* feat: panning.options.modifiers add space * docs: update panning modifiers type
antvis · Jan 24, 2024 · fe3b7ac · fe3b7ac
1 parent 018eafa
commit fe3b7ac
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/packages/x6/src/graph/panning.ts b/packages/x6/src/graph/panning.ts
@@ -6,6 +6,7 @@ export class PanningManager extends Base {
   private clientX: number
   private clientY: number
   private mousewheelHandle: Dom.MouseWheelHandle
+  private isSpaceKeyPressed: boolean
 
   protected get widgetOptions() {
     return this.options.panning
@@ -17,6 +18,8 @@ export class PanningManager extends Base {
 
   protected init() {
     this.onRightMouseDown = this.onRightMouseDown.bind(this)
+    this.onSpaceKeyDown = this.onSpaceKeyDown.bind(this)
+    this.onSpaceKeyUp = this.onSpaceKeyUp.bind(this)
     this.startListening()
     this.updateClassName()
   }
@@ -26,6 +29,10 @@ export class PanningManager extends Base {
     this.graph.on('node:unhandled:mousedown', this.onMouseDown, this)
     this.graph.on('edge:unhandled:mousedown', this.onMouseDown, this)
     Dom.Event.on(this.graph.container, 'mousedown', this.onRightMouseDown)
+    Dom.Event.on(document.body, {
+      keydown: this.onSpaceKeyDown,
+      keyup: this.onSpaceKeyUp,
+    })
     this.mousewheelHandle = new Dom.MouseWheelHandle(
       this.graph.container,
       this.onMouseWheel.bind(this),
@@ -39,15 +46,24 @@ export class PanningManager extends Base {
     this.graph.off('node:unhandled:mousedown', this.onMouseDown, this)
     this.graph.off('edge:unhandled:mousedown', this.onMouseDown, this)
     Dom.Event.off(this.graph.container, 'mousedown', this.onRightMouseDown)
+    Dom.Event.off(document.body, {
+      keydown: this.onSpaceKeyDown,
+      keyup: this.onSpaceKeyUp,
+    })
     if (this.mousewheelHandle) {
       this.mousewheelHandle.disable()
     }
   }
 
   allowPanning(e: Dom.MouseDownEvent, strict?: boolean) {
+    ;(e as any).spaceKey = this.isSpaceKeyPressed
     return (
       this.pannable &&
-      ModifierKey.isMatch(e, this.widgetOptions.modifiers, strict)
+      ModifierKey.isMatch(
+        e,
+        this.widgetOptions.modifiers as ModifierKey,
+        strict,
+      )
     )
   }
 
@@ -129,6 +145,16 @@ export class PanningManager extends Base {
     this.graph.translateBy(-deltaX, -deltaY)
   }
 
+  protected onSpaceKeyDown(e: Dom.KeyDownEvent) {
+    if (e.which === 32) {
+      this.isSpaceKeyPressed = true
+    }
+  }
+  protected onSpaceKeyUp(e: Dom.KeyUpEvent) {
+    if (e.which === 32) {
+      this.isSpaceKeyPressed = false
+    }
+  }
   protected allowBlankMouseDown(e: Dom.MouseDownEvent) {
     const eventTypes = this.widgetOptions.eventTypes
     return (
@@ -200,7 +226,7 @@ export namespace PanningManager {
     | 'mouseWheelDown'
   export interface Options {
     enabled?: boolean
-    modifiers?: string | ModifierKey[] | null
+    modifiers?: string | Array<ModifierKey | 'space'> | null
     eventTypes?: EventType[]
   }
 }
diff --git a/sites/x6-sites/docs/api/graph/panning.zh.md b/sites/x6-sites/docs/api/graph/panning.zh.md
@@ -53,7 +53,7 @@ interface Options {
 `ModifierKey` 的类型定义如下：
 
 ```ts
-type ModifierKey = string | ('alt' | 'ctrl' | 'meta' | 'shift')[] | null
+type ModifierKey = string | ('alt' | 'ctrl' | 'meta' | 'shift' | 'space')[] | null
 ```
 
 支持以下几种形式：