Merge branch 'master' of https://github.com/antvis/X6 into fix/select…

…ion-panning-mouse-event-conflict

packages/x6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6",
-  "version": "2.15.2",
+  "version": "2.15.3",
   "description": "JavaScript diagramming library that uses SVG and HTML for rendering",
   "main": "lib/index.js",
   "module": "es/index.js",

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 {

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'

packages/x6/src/graph/panning.ts

@@ -16,71 +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('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,
-        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('mouseWheelDown')) {
-      Dom.Event.off(this.graph.container, 'mousedown', this.onMouseWheelDown)
-    }
-    if (eventTypes.includes('mouseWheel')) {
-      if (this.mousewheelHandle) {
-        this.mousewheelHandle.disable()
-      }
-    }
-  }
-
-  protected preparePanning({ e }: { e: Dom.MouseDownEvent }) {
-    const selection = this.graph.getPlugin<any>('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()
     }
   }
 
@@ -140,28 +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<any>('selection')
+    const allowRubberband = selection && selection.allowRubberband(e, true)
+    if (
+      this.allowPanning(e, true) ||
+      (this.allowPanning(e) && !allowRubberband)
+    ) {
       this.startPanning(e)
     }
   }
 
-  protected onMouseWheelDown(e: Dom.MouseDownEvent) {
-    if (e.button === 1 && this.allowPanning(e, true)) {
+  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 allowMouseWheel(e: WheelEvent) {
-    return this.pannable && !e.ctrlKey
-  }
-
   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()

packages/x6/src/registry/router/manhattan/obstacle-map.ts

@@ -87,7 +87,7 @@ export class ObstacleMap {
       const excluded =
         excludedShape || excludedTerminal || excludedNode || excludedAncestor
 
-      if (!excluded) {
+      if (node.isVisible() && !excluded) {
         const bbox = node.getBBox().moveAndExpand(options.paddingBox)
         const origin = bbox.getOrigin().snapToGrid(mapGridSize)
         const corner = bbox.getCorner().snapToGrid(mapGridSize)

packages/x6/src/registry/tool/editor.ts

@@ -160,7 +160,7 @@ export class CellEditor extends ToolsView.ToolItem<
     style.transform = `scale(${scale.sx}, ${scale.sy}) translate(-50%, -50%)`
   }
 
-  onDocumentMouseDown(e: Dom.MouseDownEvent) {
+  onDocumentMouseUp(e: Dom.MouseDownEvent) {
     if (this.editor && e.target !== this.editor) {
       const value = this.editor.innerText.replace(/\n$/, '') || ''
       // set value, when value is null, we will remove label in edge
@@ -171,13 +171,15 @@ export class CellEditor extends ToolsView.ToolItem<
   }
 
   onCellDblClick({ e }: { e: Dom.DoubleClickEvent }) {
-    e.stopPropagation()
-    this.removeElement()
-    this.event = e
-    this.createElement()
-    this.updateEditor()
-    this.autoFocus()
-    this.delegateDocumentEvents(this.options.documentEvents!)
+    if (!this.editor) {
+      e.stopPropagation()
+      this.removeElement()
+      this.event = e
+      this.createElement()
+      this.updateEditor()
+      this.autoFocus()
+      this.delegateDocumentEvents(this.options.documentEvents!)
+    }
   }
 
   onMouseDown(e: Dom.MouseDownEvent) {
@@ -316,9 +318,12 @@ export namespace CellEditor {
     isSVGElement: false,
     events: {
       mousedown: 'onMouseDown',
+      touchstart: 'onMouseDown',
     },
     documentEvents: {
-      mousedown: 'onDocumentMouseDown',
+      mouseup: 'onDocumentMouseUp',
+      touchend: 'onDocumentMouseUp',
+      touchcancel: 'onDocumentMouseUp',
     },
   })
 }

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,