feat: add wheel handler for zoom graph

antvis · Dec 10, 2019 · e835338 · e835338
1 parent 8daefe1
commit e835338
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 5 deletions.
diff --git a/packages/x6/src/graph/base-graph.ts b/packages/x6/src/graph/base-graph.ts
@@ -22,6 +22,7 @@ import {
   ContextMenuHandler,
   RubberbandHandler,
   KeyboardHandler,
+  MouseWheelHandler,
   NodeHandler,
   EdgeHandler,
   EdgeElbowHandler,
@@ -93,6 +94,7 @@ export class BaseGraph extends Disablable
   public contextMenuHandler: ContextMenuHandler
   public rubberbandHandler: RubberbandHandler
   public keyboardHandler: KeyboardHandler
+  public mouseWheelHandler: MouseWheelHandler
 
   /**
    * Get the native value of hooked method.
@@ -142,13 +144,19 @@ export class BaseGraph extends Disablable
     this.contextMenuHandler = this.createContextMenuHandler()
     this.rubberbandHandler = this.createRubberbandHandler()
     this.keyboardHandler = this.createKeyboardHandler()
+    this.mouseWheelHandler = this.creatMouseWheelHandler()
   }
 
   @hook()
   createKeyboardHandler() {
     return new KeyboardHandler(this as any)
   }
 
+  @hook()
+  creatMouseWheelHandler() {
+    return new MouseWheelHandler(this as any)
+  }
+
   @hook()
   createTooltipHandler() {
     return new TooltipHandler(this as any)
@@ -297,6 +305,7 @@ export class BaseGraph extends Disablable
     this.contextMenuHandler.dispose()
     this.rubberbandHandler.dispose()
     this.keyboardHandler.dispose()
+    this.mouseWheelHandler.dispose()
   }
 
   @Disposable.aop()

diff --git a/packages/x6/src/graph/hook.ts b/packages/x6/src/graph/hook.ts
@@ -9,6 +9,7 @@ import { Route } from '../route'
 import { Point, Anchor, Rectangle } from '../struct'
 import {
   KeyboardHandler,
+  MouseWheelHandler,
   TooltipHandler,
   ContextMenuHandler,
   PanningHandler,
@@ -43,6 +44,7 @@ export interface IHooks {
   createCursorHandler: BareHook<CursorHandler>
   createGuideHandler: BareHook<GuideHandler>
   createKeyboardHandler: BareHook<KeyboardHandler>
+  creatMouseWheelHandler: BareHook<MouseWheelHandler>
   createTooltipHandler: BareHook<TooltipHandler>
   createConnectionHandler: BareHook<ConnectionHandler>
   createSelectionHandler: BareHook<SelectionHandler>

diff --git a/packages/x6/src/handler/index.ts b/packages/x6/src/handler/index.ts
@@ -12,6 +12,7 @@ export * from './cursor/handler'
 export * from './tooltip/handler'
 export * from './contextmenu/handler'
 export * from './keyboard/handler'
+export * from './mousewheel/handler'
 export * from './rubberband/handler'
 export * from './guide/handler'
 export * from './panning/handler'

diff --git a/packages/x6/src/handler/mousewheel/handler.ts b/packages/x6/src/handler/mousewheel/handler.ts
@@ -1,13 +1,15 @@
 import * as util from '../../util'
+import { Graph } from '../../graph'
 import { Point } from '../../struct'
-import { DomEvent, detector } from '../../common'
+import { DomEvent, Disposable } from '../../common'
 import { BaseHandler } from '../handler-base'
 
 export class MouseWheelHandler extends BaseHandler {
   private cursorPosition: Point
   private wheelZoomDelay: number = 10
   private wheelZoomTimer: number | null
   private cumulativeZoomFactor: number = 1
+
   private handler = (e: WheelEvent, up: boolean) => {
     if (this.isZoomWheelEvent(e)) {
       let source = DomEvent.getSource(e)
@@ -27,6 +29,11 @@ export class MouseWheelHandler extends BaseHandler {
     }
   }
 
+  constructor(graph: Graph) {
+    super(graph)
+    this.setEnadled(this.graph.options.wheel.enabled)
+  }
+
   enable() {
     DomEvent.addWheelListener(this.handler, this.graph.container)
     super.enable()
@@ -38,10 +45,15 @@ export class MouseWheelHandler extends BaseHandler {
   }
 
   isZoomWheelEvent(e: MouseEvent) {
+    const modifiers = this.graph.options.wheel.modifiers
+    if (modifiers == null) {
+      return true
+    }
+
     return (
-      DomEvent.isAltDown(e) ||
-      (detector.IS_MAC && DomEvent.isMetaDown(e)) ||
-      (!detector.IS_MAC && DomEvent.isControlDown(e))
+      (modifiers.includes('alt') && DomEvent.isAltDown(e)) ||
+      (modifiers.includes('meta') && DomEvent.isMetaDown(e)) ||
+      (modifiers.includes('ctrl') && DomEvent.isControlDown(e))
     )
   }
 
@@ -113,4 +125,9 @@ export class MouseWheelHandler extends BaseHandler {
       this.wheelZoomTimer = null
     }, this.wheelZoomDelay)
   }
+
+  @Disposable.aop()
+  dispose() {
+    this.disable()
+  }
 }
diff --git a/packages/x6/src/handler/mousewheel/option.ts b/packages/x6/src/handler/mousewheel/option.ts
@@ -2,5 +2,5 @@ type Modifiers = 'alt' | 'ctrl' | 'meta'
 
 export interface MouseWheelOptions {
   enabled: boolean
-  modifiers: Modifiers | Modifiers[] | null
+  modifiers: Modifiers[] | null
 }
diff --git a/packages/x6/src/option/preset.ts b/packages/x6/src/option/preset.ts
@@ -183,6 +183,11 @@ export const preset: FullOptions = {
     escape: true,
   },
 
+  wheel: {
+    enabled: false,
+    modifiers: ['alt', 'ctrl', 'meta'],
+  },
+
   rubberband: {
     enabled: false,
     fadeOut: false,

diff --git a/packages/x6/src/option/rollup.ts b/packages/x6/src/option/rollup.ts
@@ -32,6 +32,7 @@ import {
   MovingPreviewOptions,
   DropTargetHighlightOptions,
 } from '../handler/moving/option'
+import { MouseWheelOptions } from '../handler/mousewheel/option'
 import { preset } from './preset'
 import { IHooks } from '../graph/hook'
 import { GlobalConfig } from './global'
@@ -48,6 +49,7 @@ export interface FullOptions
   tooltip: TooltipOptions
   folding: CollapseOptions
   keyboard: KeyboardOptions
+  wheel: MouseWheelOptions
   rubberband: RubberbandOptions
   pageBreak: PageBreakOptions
   contextMenu: ContextMenuOptions
@@ -81,6 +83,7 @@ export interface GraphOptions
   tooltip?: Partial<TooltipOptions> | boolean
   folding?: Partial<CollapseOptions> | boolean
   keyboard?: Partial<KeyboardOptions> | boolean
+  wheel?: Partial<MouseWheelOptions> | boolean
   rubberband?: Partial<RubberbandOptions> | boolean
   pageBreak?: Partial<PageBreakOptions> | boolean
   contextMenu?: Partial<ContextMenuOptions> | boolean