@logicflow/extension 2.0.15 → 2.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.0.11"
+    "@logicflow/core": "2.0.12"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -31,7 +31,7 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.0.11"
+    "@logicflow/core": "2.0.12"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/components/menu/index.ts

@@ -3,6 +3,7 @@ import LogicFlow from '@logicflow/core'
 import GraphData = LogicFlow.GraphData
 import NodeData = LogicFlow.NodeData
 import EdgeData = LogicFlow.EdgeData
+import Position = LogicFlow.Position
 
 type SetType = 'add' | 'reset'
 
@@ -29,7 +30,8 @@ class Menu {
   private __container?: HTMLElement
   private __menuDOM?: HTMLElement
   private menuTypeMap?: Map<string, MenuItem[]>
-  private __currentData: EdgeData | NodeData | GraphData | null = null
+  private __currentData: EdgeData | NodeData | GraphData | Position | null =
+    null
   static pluginName = 'menu'
 
   constructor({ lf }) {
@@ -209,6 +211,7 @@ class Menu {
       const {
         domOverlayPosition: { x, y },
       } = position
+      this.__currentData = { ...position.canvasOverlayPosition }
       this.showMenu(x, y, menuList)
     })
     this.lf.on('selection:contextmenu', ({ data, position }) => {

package/src/components/selection-select/index.ts

@@ -11,19 +11,17 @@ export class SelectionSelect {
   private startPoint?: Position
   private endPoint?: Position
   private disabled = true
-  private isDefaultStopMoveGraph:
-    | boolean
-    | 'horizontal'
-    | 'vertical'
-    | [number, number, number, number] = false
   private isWholeNode = true
   private isWholeEdge = true
+  // 用于区分选区和点击事件
+  private mouseDownInfo: {
+    x: number
+    y: number
+    time: number
+  } | null = null
 
   constructor({ lf }: LogicFlow.IExtensionProps) {
     this.lf = lf
-    // 初始化isDefaultStopMoveGraph取值
-    const { stopMoveGraph } = lf.getEditConfig()
-    this.isDefaultStopMoveGraph = stopMoveGraph!
     // TODO: 有没有既能将方法挂载到lf上，又能提供类型提示的方法？
     lf.openSelectionSelect = () => {
       this.openSelectionSelect()
@@ -33,42 +31,71 @@ export class SelectionSelect {
     }
   }
 
-  render(lf: LogicFlow, domContainer: HTMLElement) {
+  render(_: LogicFlow, domContainer: HTMLElement) {
     this.container = domContainer
-    lf.on('blank:mousedown', ({ e }: { e: MouseEvent }) => {
-      const config = lf.getEditConfig()
-      // 鼠标控制滚动移动画布的时候，不能选区。
-      if (!config.stopMoveGraph || this.disabled) {
-        return
-      }
-      // 禁用右键框选，修复可能导致画布出现多个框选框不消失的问题，见https://github.com/didi/LogicFlow/issues/985
-      const isRightClick = e.button === 2
-      if (isRightClick) {
-        return
-      }
-      const {
-        domOverlayPosition: { x, y },
-      } = lf.getPointByClient(e.clientX, e.clientY)
-      this.startPoint = {
-        x,
-        y,
-      }
-      this.endPoint = {
-        x,
-        y,
-      }
-      const wrapper = document.createElement('div')
-      wrapper.className = 'lf-selection-select'
-      wrapper.oncontextmenu = function prevent(ev: MouseEvent) {
-        ev.preventDefault()
+  }
+
+  onToolContainerMouseDown = (e: MouseEvent) => {
+    // 避免在其他插件元素上点击时开启选区
+    if (e.target !== this.container) {
+      return
+    }
+    this.mouseDownInfo = {
+      x: e.clientX,
+      y: e.clientY,
+      time: Date.now(),
+    }
+    const lf = this.lf
+    const domContainer = this.container
+    if (!domContainer) {
+      return
+    }
+    if (this.disabled) {
+      return
+    }
+    // 禁用右键框选，修复可能导致画布出现多个框选框不消失的问题，见https://github.com/didi/LogicFlow/issues/985
+    const isRightClick = e.button === 2
+    if (isRightClick) {
+      return
+    }
+    const {
+      domOverlayPosition: { x, y },
+    } = lf.getPointByClient(e.clientX, e.clientY)
+    this.startPoint = {
+      x,
+      y,
+    }
+    this.endPoint = {
+      x,
+      y,
+    }
+    const wrapper = document.createElement('div')
+    wrapper.className = 'lf-selection-select'
+    wrapper.oncontextmenu = function prevent(ev: MouseEvent) {
+      ev.preventDefault()
+    }
+    wrapper.style.top = `${this.startPoint.y}px`
+    wrapper.style.left = `${this.startPoint.x}px`
+    domContainer.appendChild(wrapper)
+    this.wrapper = wrapper
+    document.addEventListener('mousemove', this.draw)
+    document.addEventListener('mouseup', this.drawOff)
+  }
+
+  onToolContainerMouseUp = (e: MouseEvent) => {
+    if (this.mouseDownInfo) {
+      const { x, y, time } = this.mouseDownInfo
+      const now = Date.now()
+      // 用 mouseDown 和 mouseUp 的位置偏移及时间间隔来判断是否是点击事件
+      const isClickEvent =
+        Math.abs(e.clientX - x) < 10 &&
+        Math.abs(e.clientY - y) < 10 &&
+        now - time < 100
+      if (isClickEvent) {
+        this.lf.clearSelectElements()
       }
-      wrapper.style.top = `${this.startPoint.y}px`
-      wrapper.style.left = `${this.startPoint.x}px`
-      domContainer.appendChild(wrapper)
-      this.wrapper = wrapper
-      document.addEventListener('mousemove', this.draw)
-      document.addEventListener('mouseup', this.drawOff)
-    })
+      this.mouseDownInfo = null
+    }
   }
 
   /**
@@ -85,13 +112,17 @@ export class SelectionSelect {
    * 开启选区
    */
   openSelectionSelect() {
-    const { stopMoveGraph } = this.lf.getEditConfig()
-    if (!stopMoveGraph) {
-      this.isDefaultStopMoveGraph = false
-      this.lf.updateEditConfig({
-        stopMoveGraph: true,
-      })
+    if (!this.disabled) {
+      this.closeSelectionSelect()
+    }
+    if (!this.container) {
+      return
     }
+    this.mouseDownInfo = null
+    this.container.addEventListener('mousedown', this.onToolContainerMouseDown)
+    this.container.addEventListener('mouseup', this.onToolContainerMouseUp)
+    // 取消点击事件的穿透，只让 ToolOverlay 接收事件，避免与图形元素的事件冲突
+    this.container.style.pointerEvents = 'auto'
     this.open()
   }
 
@@ -99,11 +130,16 @@ export class SelectionSelect {
    * 关闭选区
    */
   closeSelectionSelect() {
-    if (!this.isDefaultStopMoveGraph) {
-      this.lf.updateEditConfig({
-        stopMoveGraph: false,
-      })
+    if (!this.container) {
+      return
     }
+    this.container.style.pointerEvents = 'none'
+    this.mouseDownInfo = null
+    this.container.removeEventListener(
+      'mousedown',
+      this.onToolContainerMouseDown,
+    )
+    this.container.removeEventListener('mouseup', this.onToolContainerMouseUp)
     this.close()
   }
 
@@ -169,11 +205,19 @@ export class SelectionSelect {
       const nonGroupedElements: typeof elements = []
       elements.forEach((element) => {
         // 如果节点属于分组，则不选中节点，此处兼容旧版 Group 插件
-        if (group && group.getNodeGroup(element.id)) {
-          return
+        if (group) {
+          const elementGroup = group.getNodeGroup(element.id)
+          if (elements.includes(elementGroup)) {
+            // 当被选中的元素的父分组被选中时，不选中该元素
+            return
+          }
         }
-        if (dynamicGroup && dynamicGroup.getGroupByNodeId(element.id)) {
-          return
+        if (dynamicGroup) {
+          const elementGroup = dynamicGroup.getGroupByNodeId(element.id)
+          if (elements.includes(elementGroup)) {
+            // 当被选中的元素的父分组被选中时，不选中该元素
+            return
+          }
         }
         this.lf.selectElementById(element.id, true)
         nonGroupedElements.push(element)

package/src/dynamic-group/index.ts

@@ -178,8 +178,18 @@ export class DynamicGroup {
     this.topGroupZIndex = max
   }
 
-  // 监听 LogicFlow 的相关事件，做对应的处理
-  addNodeToGroup = ({ data: node }: CallbackArgs<'node:add'>) => {
+  onSelectionDrop = () => {
+    const { nodes: selectedNodes } = this.lf.graphModel.getSelectElements()
+    selectedNodes.forEach((node) => {
+      this.addNodeToGroup(node)
+    })
+  }
+
+  onNodeAddOrDrop = ({ data: node }: CallbackArgs<'node:add'>) => {
+    this.addNodeToGroup(node)
+  }
+
+  addNodeToGroup = (node: LogicFlow.NodeData) => {
     // 1. 如果该节点之前已经在 group 中了，则将其从之前的 group 移除
     const preGroupId = this.nodeGroupMap.get(node.id)
 
@@ -230,8 +240,7 @@ export class DynamicGroup {
         if (isAllowAppendIn) {
           group.addChild(node.id)
           // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
-          // TODO 下面这个是干什么的，是否需要一起移动到事件的逻辑中？
-          group.setAllowAppendChild(true)
+          group.setAllowAppendChild(false)
         } else {
           // 抛出不允许插入的事件
           this.lf.emit('group:not-allowed', {
@@ -273,7 +282,17 @@ export class DynamicGroup {
     }
   }
 
-  setActiveGroup = ({ data: node }: CallbackArgs<'node:drag'>) => {
+  onSelectionDrag = () => {
+    const { nodes: selectedNodes } = this.lf.graphModel.getSelectElements()
+    selectedNodes.forEach((node) => {
+      this.setActiveGroup(node)
+    })
+  }
+  onNodeDrag = ({ data: node }: CallbackArgs<'node:drag'>) => {
+    this.setActiveGroup(node)
+  }
+
+  setActiveGroup = (node: LogicFlow.NodeData) => {
     const nodeModel = this.lf.getNodeModelById(node.id)
     const bounds = nodeModel?.getBounds()
 
@@ -666,9 +685,11 @@ export class DynamicGroup {
 
     graphModel.dynamicGroup = this
 
-    lf.on('node:add,node:drop,node:dnd-add', this.addNodeToGroup)
+    lf.on('node:add,node:drop,node:dnd-add', this.onNodeAddOrDrop)
+    lf.on('selection:drop', this.onSelectionDrop)
     lf.on('node:delete', this.removeNodeFromGroup)
-    lf.on('node:drag,node:dnd-drag', this.setActiveGroup)
+    lf.on('node:drag,node:dnd-drag', this.onNodeDrag)
+    lf.on('selection:drag', this.onSelectionDrag)
     lf.on('node:click', this.onNodeSelect)
     lf.on('node:mousemove', this.onNodeMove)
     lf.on('graph:rendered', this.onGraphRendered)
@@ -736,9 +757,11 @@ export class DynamicGroup {
 
   destroy() {
     // 销毁监听的事件，并移除渲染的 dom 内容
-    this.lf.off('node:add,node:drop,node:dnd-add', this.addNodeToGroup)
+    this.lf.off('node:add,node:drop,node:dnd-add', this.onNodeAddOrDrop)
+    this.lf.off('selection:drop', this.onSelectionDrop)
     this.lf.off('node:delete', this.removeNodeFromGroup)
-    this.lf.off('node:drag,node:dnd-drag', this.setActiveGroup)
+    this.lf.off('node:drag,node:dnd-drag', this.onNodeDrag)
+    this.lf.off('selection:drag', this.onSelectionDrag)
     this.lf.off('node:click', this.onNodeSelect)
     this.lf.off('node:mousemove', this.onNodeMove)
     this.lf.off('graph:rendered', this.onGraphRendered)