diff --git a/packages/x6/src/graph/graph.ts b/packages/x6/src/graph/graph.ts index 5b7dd972837..8e2dc5bb390 100644 --- a/packages/x6/src/graph/graph.ts +++ b/packages/x6/src/graph/graph.ts @@ -1309,6 +1309,7 @@ export namespace Graph { export import TransformManager = Transform export import HighlightManager = Highlight export import BackgroundManager = Background + export import PanningManager = Panning } export namespace Graph { diff --git a/packages/x6/src/graph/index.ts b/packages/x6/src/graph/index.ts index f47fc44af6b..20a13f02218 100644 --- a/packages/x6/src/graph/index.ts +++ b/packages/x6/src/graph/index.ts @@ -3,3 +3,4 @@ export * from './view' export * from './events' export * from './transform' export * from './background' +export * from './options' diff --git a/packages/x6/src/graph/panning.ts b/packages/x6/src/graph/panning.ts index f26a1dee575..6e3f30de2ea 100644 --- a/packages/x6/src/graph/panning.ts +++ b/packages/x6/src/graph/panning.ts @@ -16,62 +16,31 @@ export class PanningManager extends Base { } protected init() { + this.onRightMouseDown = this.onRightMouseDown.bind(this) this.startListening() this.updateClassName() } protected startListening() { - const eventTypes = this.widgetOptions.eventTypes - if (!eventTypes) { - return - } - if (eventTypes.includes('leftMouseDown')) { - this.graph.on('blank:mousedown', this.preparePanning, this) - this.graph.on('node:unhandled:mousedown', this.preparePanning, this) - this.graph.on('edge:unhandled:mousedown', this.preparePanning, this) - } - if (eventTypes.includes('rightMouseDown')) { - this.onRightMouseDown = this.onRightMouseDown.bind(this) - Dom.Event.on(this.graph.container, 'mousedown', this.onRightMouseDown) - } - if (eventTypes.includes('mouseWheel')) { - this.mousewheelHandle = new Dom.MouseWheelHandle( - this.graph.container, - this.onMouseWheel.bind(this), - this.allowMouseWheel.bind(this), - ) - this.mousewheelHandle.enable() - } + this.graph.on('blank:mousedown', this.onMouseDown, this) + 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) + this.mousewheelHandle = new Dom.MouseWheelHandle( + this.graph.container, + this.onMouseWheel.bind(this), + this.allowMouseWheel.bind(this), + ) + this.mousewheelHandle.enable() } protected stopListening() { - const eventTypes = this.widgetOptions.eventTypes - if (!eventTypes) { - return - } - if (eventTypes.includes('leftMouseDown')) { - this.graph.off('blank:mousedown', this.preparePanning, this) - this.graph.off('node:unhandled:mousedown', this.preparePanning, this) - this.graph.off('edge:unhandled:mousedown', this.preparePanning, this) - } - if (eventTypes.includes('rightMouseDown')) { - Dom.Event.off(this.graph.container, 'mousedown', this.onRightMouseDown) - } - if (eventTypes.includes('mouseWheel')) { - if (this.mousewheelHandle) { - this.mousewheelHandle.disable() - } - } - } - - protected preparePanning({ e }: { e: Dom.MouseDownEvent }) { - const selection = this.graph.getPlugin('selection') - const allowRubberband = selection && selection.allowRubberband(e, true) - if ( - this.allowPanning(e, true) || - (this.allowPanning(e) && !allowRubberband) - ) { - this.startPanning(e) + this.graph.off('blank:mousedown', this.onMouseDown, this) + 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) + if (this.mousewheelHandle) { + this.mousewheelHandle.disable() } } @@ -131,22 +100,45 @@ export class PanningManager extends Base { } } - protected onRightMouseDown(e: Dom.MouseDownEvent) { - if (e.button === 2 && this.allowPanning(e, true)) { + protected onMouseDown({ e }: { e: Dom.MouseDownEvent }) { + const eventTypes = this.widgetOptions.eventTypes + if (!(eventTypes && eventTypes.includes('leftMouseDown'))) { + return + } + const selection = this.graph.getPlugin('selection') + const allowRubberband = selection && selection.allowRubberband(e, true) + if ( + this.allowPanning(e, true) || + (this.allowPanning(e) && !allowRubberband) + ) { this.startPanning(e) } } - protected allowMouseWheel(e: WheelEvent) { - return this.pannable && !e.ctrlKey + protected onRightMouseDown(e: Dom.MouseDownEvent) { + const eventTypes = this.widgetOptions.eventTypes + if (!(eventTypes && eventTypes.includes('rightMouseDown'))) { + return + } + if (e.button === 2 && this.allowPanning(e, true)) { + this.startPanning(e) + } } protected onMouseWheel(e: WheelEvent, deltaX: number, deltaY: number) { + const eventTypes = this.widgetOptions.eventTypes + if (!(eventTypes && eventTypes.includes('mouseWheel'))) { + return + } if (!e.ctrlKey) { this.graph.translateBy(-deltaX, -deltaY) } } + protected allowMouseWheel(e: WheelEvent) { + return this.pannable && !e.ctrlKey + } + autoPanning(x: number, y: number) { const buffer = 10 const graphArea = this.graph.getGraphArea() diff --git a/packages/x6/src/view/node.ts b/packages/x6/src/view/node.ts index 12de9c4a7b7..07ddcc5760f 100644 --- a/packages/x6/src/view/node.ts +++ b/packages/x6/src/view/node.ts @@ -751,6 +751,7 @@ export class NodeView< } else { const view = candidate.findView(graph) as NodeView if ( + validateEmbeding && FunctionExt.call(validateEmbeding, graph, { child: this.cell, parent: view.cell,