@logicflow/extension 2.0.16 → 2.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "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.12"
+    "@logicflow/core": "2.0.13"
   },
   "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.12"
+    "@logicflow/core": "2.0.13"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/components/highlight/index.ts

@@ -1,5 +1,5 @@
-import LogicFlow, { BaseNodeModel } from '@logicflow/core'
-import { concat } from 'lodash-es'
+import LogicFlow, { BaseEdgeModel, BaseNodeModel } from '@logicflow/core'
+import { uniqBy, concat } from 'lodash-es'
 
 // 后续并入FlowPath
 const getPath = (id: string, lf: LogicFlow) => {
@@ -99,7 +99,7 @@ export class Highlight {
     this.enable = enable
   }
 
-  setMode(mode: IMode) {
+  public setMode(mode: IMode) {
     this.mode = mode
   }
 
@@ -119,11 +119,14 @@ export class Highlight {
       model.sourceNode.updateStyles(this.tempStyles[model.sourceNode.id])
       model.targetNode.updateStyles(this.tempStyles[model.targetNode.id])
     }
+    this.lf.emit('highlight:single', {
+      data: model,
+    })
   }
 
   private highlightNeighbours(id: string) {
     const model = this.lf.getModelById(id)
-
+    let relateElements: (BaseNodeModel | BaseEdgeModel)[] = []
     if (model?.BaseType === 'node') {
       // 高亮节点
       model.updateStyles(this.tempStyles[id])
@@ -135,19 +138,41 @@ export class Highlight {
       concat(incomingEdges, outgoingEdges).forEach((edge) => {
         edge.updateStyles(this.tempStyles[edge.id])
       })
+      relateElements = uniqBy(
+        concat(
+          relateElements,
+          incomingNodes,
+          outgoingNodes,
+          incomingEdges,
+          outgoingEdges,
+        ),
+        'id',
+      )
     } else if (model?.BaseType === 'edge') {
       // 高亮边及对应的节点
       model.updateStyles(this.tempStyles[id])
       model.sourceNode.updateStyles(this.tempStyles[model.sourceNode.id])
       model.targetNode.updateStyles(this.tempStyles[model.targetNode.id])
+      relateElements = [model.sourceNode, model.targetNode]
     }
+    this.lf.emit('highlight:neighbours', {
+      data: model,
+      relateElements,
+    })
   }
 
   private highlightPath(id: string) {
     const path = getPath(id, this.lf)
+    const relateElements: any[] = []
     path.forEach((_id) => {
+      const elementModel = this.lf.getModelById(_id)
       // 高亮路径上所有的边和节点
-      this.lf.getModelById(_id)?.updateStyles(this.tempStyles[_id])
+      elementModel?.updateStyles(this.tempStyles[_id])
+      relateElements.push(elementModel)
+    })
+    this.lf.emit('highlight:path', {
+      data: this.lf.getModelById(id),
+      relateElements,
     })
   }
 

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

@@ -1,8 +1,13 @@
 import LogicFlow from '@logicflow/core'
+import { cloneDeep } from 'lodash-es'
 
 import Position = LogicFlow.Position
 import PointTuple = LogicFlow.PointTuple
 
+export interface SelectionConfig {
+  exclusiveMode?: boolean
+}
+
 export class SelectionSelect {
   static pluginName = 'selectionSelect'
   private container?: HTMLElement
@@ -13,15 +18,25 @@ export class SelectionSelect {
   private disabled = true
   private isWholeNode = true
   private isWholeEdge = true
+  exclusiveMode = false // 框选独占模式：true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
   // 用于区分选区和点击事件
   private mouseDownInfo: {
     x: number
     y: number
     time: number
   } | null = null
+  // 记录原始的 stopMoveGraph 设置
+  private originalStopMoveGraph:
+    | boolean
+    | 'horizontal'
+    | 'vertical'
+    | [number, number, number, number] = false
 
-  constructor({ lf }: LogicFlow.IExtensionProps) {
+  constructor({ lf, options }: LogicFlow.IExtensionProps) {
     this.lf = lf
+
+    this.exclusiveMode = (options?.exclusiveMode as boolean) ?? false
+
     // TODO: 有没有既能将方法挂载到lf上，又能提供类型提示的方法？
     lf.openSelectionSelect = () => {
       this.openSelectionSelect()
@@ -29,46 +44,119 @@ export class SelectionSelect {
     lf.closeSelectionSelect = () => {
       this.closeSelectionSelect()
     }
+    // 新增切换独占模式的方法
+    lf.setSelectionSelectMode = (exclusive: boolean) => {
+      this.setExclusiveMode(exclusive)
+    }
+    // 绑定方法的 this 上下文
+    this.handleMouseDown = this.handleMouseDown.bind(this)
+    this.draw = this.draw.bind(this)
+    this.drawOff = this.drawOff.bind(this)
   }
 
   render(_: LogicFlow, domContainer: HTMLElement) {
     this.container = domContainer
   }
 
-  onToolContainerMouseDown = (e: MouseEvent) => {
-    // 避免在其他插件元素上点击时开启选区
-    if (e.target !== this.container) {
-      return
+  /**
+   * 清理选区状态
+   */
+  private cleanupSelectionState() {
+    // 清理当前的选区状态
+    if (this.wrapper) {
+      this.wrapper.oncontextmenu = null
+      if (this.container && this.wrapper.parentNode === this.container) {
+        this.container.removeChild(this.wrapper)
+      }
+      this.wrapper = undefined
     }
-    this.mouseDownInfo = {
-      x: e.clientX,
-      y: e.clientY,
-      time: Date.now(),
+    this.startPoint = undefined
+    this.endPoint = undefined
+    this.mouseDownInfo = null
+
+    // 移除事件监听
+    document.removeEventListener('mousemove', this.draw)
+    document.removeEventListener('mouseup', this.drawOff)
+  }
+
+  /**
+   * 切换框选模式
+   * @param exclusive 是否为独占模式。true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
+   */
+  setExclusiveMode(exclusive: boolean = false) {
+    if (this.exclusiveMode === exclusive) return
+
+    this.cleanupSelectionState()
+    this.exclusiveMode = exclusive
+    if (this.container && !this.disabled) {
+      // 切换事件监听方式
+      this.removeEventListeners()
+      this.addEventListeners()
     }
-    const lf = this.lf
-    const domContainer = this.container
-    if (!domContainer) {
-      return
+  }
+
+  private addEventListeners() {
+    if (!this.container) return
+
+    if (this.exclusiveMode) {
+      // 独占模式：监听 container 的 mousedown 事件
+      this.container.style.pointerEvents = 'auto'
+      this.container.addEventListener('mousedown', this.handleMouseDown)
+    } else {
+      // 非独占模式：监听画布的 blank:mousedown 事件
+      this.container.style.pointerEvents = 'none'
+      // 使用实例方法而不是箭头函数，这样可以正确移除事件监听
+      this.lf.on('blank:mousedown', this.handleBlankMouseDown)
     }
-    if (this.disabled) {
-      return
+  }
+
+  private removeEventListeners() {
+    if (this.container) {
+      this.container.style.pointerEvents = 'none'
+      this.container.removeEventListener('mousedown', this.handleMouseDown)
     }
-    // 禁用右键框选，修复可能导致画布出现多个框选框不消失的问题，见https://github.com/didi/LogicFlow/issues/985
+    // 移除 blank:mousedown 事件监听
+    this.lf.off('blank:mousedown', this.handleBlankMouseDown)
+  }
+
+  /**
+   * 处理画布空白处鼠标按下事件（非独占模式）
+   */
+  private handleBlankMouseDown = ({ e }: { e: MouseEvent }) => {
+    this.handleMouseDown(e)
+  }
+
+  /**
+   * 处理鼠标按下事件
+   */
+  private handleMouseDown(e: MouseEvent) {
+    if (!this.container || this.disabled) return
+
+    // 禁用右键框选
     const isRightClick = e.button === 2
-    if (isRightClick) {
-      return
+    if (isRightClick) return
+    // 清理之前可能存在的选区状态
+    this.cleanupSelectionState()
+    // 记录鼠标按下时的位置和时间
+    this.mouseDownInfo = {
+      x: e.clientX,
+      y: e.clientY,
+      time: Date.now(),
     }
+
+    // 记录原始设置并临时禁止画布移动
+    this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph!
+    this.lf.updateEditConfig({
+      stopMoveGraph: true,
+    })
+
     const {
       domOverlayPosition: { x, y },
-    } = lf.getPointByClient(e.clientX, e.clientY)
-    this.startPoint = {
-      x,
-      y,
-    }
-    this.endPoint = {
-      x,
-      y,
-    }
+    } = this.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) {
@@ -76,28 +164,13 @@ export class SelectionSelect {
     }
     wrapper.style.top = `${this.startPoint.y}px`
     wrapper.style.left = `${this.startPoint.x}px`
-    domContainer.appendChild(wrapper)
+    this.container?.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()
-      }
-      this.mouseDownInfo = null
-    }
-  }
-
   /**
    * 设置选中的灵敏度
    * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true
@@ -118,11 +191,8 @@ export class SelectionSelect {
     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.cleanupSelectionState()
+    this.addEventListeners()
     this.open()
   }
 
@@ -133,13 +203,18 @@ export class SelectionSelect {
     if (!this.container) {
       return
     }
-    this.container.style.pointerEvents = 'none'
-    this.mouseDownInfo = null
-    this.container.removeEventListener(
-      'mousedown',
-      this.onToolContainerMouseDown,
-    )
-    this.container.removeEventListener('mouseup', this.onToolContainerMouseUp)
+    // 如果还有未完成的框选，先触发 drawOff 完成框选
+    if (this.wrapper && this.startPoint && this.endPoint) {
+      // 记录上一次的结束点，用于触发 mouseup 事件
+      const lastEndPoint = cloneDeep(this.endPoint)
+      const lastEvent = new MouseEvent('mouseup', {
+        clientX: lastEndPoint.x,
+        clientY: lastEndPoint.y,
+      })
+      this.drawOff(lastEvent)
+    }
+    this.cleanupSelectionState()
+    this.removeEventListeners()
     this.close()
   }
 
@@ -173,16 +248,37 @@ export class SelectionSelect {
       }
     }
   }
-  private drawOff = () => {
+  private drawOff = (e: MouseEvent) => {
+    // 处理鼠标抬起事件
+    // 首先判断是否是点击，如果是，则清空框选
+    if (this.mouseDownInfo) {
+      const { x, y, time } = this.mouseDownInfo
+      const isClick =
+        Math.abs(e.clientX - x) < 5 &&
+        Math.abs(e.clientY - y) < 5 &&
+        Date.now() - time < 200
+      if (isClick) {
+        this.lf.clearSelectElements()
+        this.cleanupSelectionState()
+        return
+      }
+    }
+
+    const curStartPoint = cloneDeep(this.startPoint)
+    const curEndPoint = cloneDeep(this.endPoint)
     document.removeEventListener('mousemove', this.draw)
-    document.removeEventListener('mouseup', this.drawOff)
-    if (this.wrapper) {
-      this.wrapper.oncontextmenu = null
-      this.container?.removeChild(this.wrapper)
+    if (!this.exclusiveMode) {
+      document.removeEventListener('mouseup', this.drawOff)
     }
-    if (this.startPoint && this.endPoint) {
-      const { x, y } = this.startPoint
-      const { x: x1, y: y1 } = this.endPoint
+
+    // 恢复原始的 stopMoveGraph 设置
+    this.lf.updateEditConfig({
+      stopMoveGraph: this.originalStopMoveGraph,
+    })
+
+    if (curStartPoint && curEndPoint) {
+      const { x, y } = curStartPoint
+      const { x: x1, y: y1 } = curEndPoint
       // 返回框选范围，左上角和右下角的坐标
       const lt: PointTuple = [Math.min(x, x1), Math.min(y, y1)]
       const rb: PointTuple = [Math.max(x, x1), Math.max(y, y1)]
@@ -192,6 +288,13 @@ export class SelectionSelect {
       })
       // 选区太小的情况就忽略
       if (Math.abs(x1 - x) < 10 && Math.abs(y1 - y) < 10) {
+        if (this.wrapper) {
+          this.wrapper.oncontextmenu = null
+          if (this.container && this.wrapper.parentNode === this.container) {
+            this.container.removeChild(this.wrapper)
+          }
+          this.wrapper = undefined
+        }
         return
       }
       const elements = this.lf.graphModel.getAreaElement(
@@ -203,6 +306,13 @@ export class SelectionSelect {
       )
       const { dynamicGroup, group } = this.lf.graphModel
       const nonGroupedElements: typeof elements = []
+      const selectedElements = this.lf.getSelectElements()
+      // 同时记录节点和边的ID
+      const selectedIds = new Set([
+        ...selectedElements.nodes.map((node) => node.id),
+        ...selectedElements.edges.map((edge) => edge.id),
+      ])
+
       elements.forEach((element) => {
         // 如果节点属于分组，则不选中节点，此处兼容旧版 Group 插件
         if (group) {
@@ -219,15 +329,39 @@ export class SelectionSelect {
             return
           }
         }
+        // 在独占模式下，如果元素已经被选中，则取消选中
+        if (this.exclusiveMode && selectedIds.has(element.id)) {
+          this.lf.deselectElementById(element.id)
+          return
+        }
+
+        // 非独占模式下，或者元素未被选中时，选中元素
         this.lf.selectElementById(element.id, true)
         nonGroupedElements.push(element)
       })
+      // 重置起始点和终点
+      // 注意：这两个值必须在触发closeSelectionSelect方法前充值，否则会导致独占模式下元素无法选中的问题
+      this.startPoint = undefined
+      this.endPoint = undefined
+      // 如果有选中的元素，触发 selection:drop 事件
+      if (nonGroupedElements.length > 0) {
+        this.lf.emit('selection:drop', { e })
+      }
+      // 触发 selection:selected 事件
       this.lf.emit('selection:selected', {
         elements: nonGroupedElements,
         leftTopPoint: lt,
         rightBottomPoint: rb,
       })
     }
+
+    if (this.wrapper) {
+      this.wrapper.oncontextmenu = null
+      if (this.container && this.wrapper.parentNode === this.container) {
+        this.container.removeChild(this.wrapper)
+      }
+      this.wrapper = undefined
+    }
   }
 
   private open() {

package/src/dynamic-group/index.ts

@@ -236,7 +236,6 @@ export class DynamicGroup {
       const group = this.getGroupByBounds(bounds, node)
       if (group) {
         const isAllowAppendIn = group.isAllowAppendIn(node)
-        console.log('isAllowAppendIn', isAllowAppendIn)
         if (isAllowAppendIn) {
           group.addChild(node.id)
           // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
@@ -256,7 +255,6 @@ export class DynamicGroup {
     data: groupData,
     childId,
   }: CallbackArgs<'group:add-node'>) => {
-    console.log('group:add-node', groupData)
     this.nodeGroupMap.set(childId, groupData.id)
   }
 
@@ -310,7 +308,6 @@ export class DynamicGroup {
       if (!isAllowAppendIn) return
 
       this.activeGroup = targetGroup
-      console.log('this.activeGroup', this.activeGroup)
       this.activeGroup.setAllowAppendChild(true)
     }
   }
@@ -439,7 +436,6 @@ export class DynamicGroup {
   }
 
   onGraphRendered = ({ data }: CallbackArgs<'graph:rendered'>) => {
-    console.log('data', data)
     forEach(data.nodes, (node) => {
       if (node.children) {
         forEach(node.children, (childId) => {
@@ -517,9 +513,6 @@ export class DynamicGroup {
       }
     })
 
-    // TODO: 确认，递归的方式，是否将所有嵌套的边数据都有返回
-    console.log('allRelatedEdges -->>', allRelatedEdges)
-
     // 1. 判断每一条边的开始节点、目标节点是否在 Group 中
     const edgesInnerGroup = filter(allRelatedEdges, (edge) => {
       return (
@@ -684,7 +677,6 @@ export class DynamicGroup {
     })
 
     graphModel.dynamicGroup = this
-
     lf.on('node:add,node:drop,node:dnd-add', this.onNodeAddOrDrop)
     lf.on('selection:drop', this.onSelectionDrop)
     lf.on('node:delete', this.removeNodeFromGroup)
@@ -694,8 +686,6 @@ export class DynamicGroup {
     lf.on('node:mousemove', this.onNodeMove)
     lf.on('graph:rendered', this.onGraphRendered)
 
-    lf.on('graph:updated', ({ data }) => console.log('data', data))
-
     lf.on('group:add-node', this.onGroupAddNode)
 
     // https://github.com/didi/LogicFlow/issues/1346
@@ -739,8 +729,6 @@ export class DynamicGroup {
       forEach(edgesInnerGroup, (edge) => {
         this.createEdge(edge, nodeIdMap, distance)
       })
-
-      console.log('selectedEdges --->>>', selectedEdges)
       forEach(selectedEdges, (edge) => {
         elements.edges.push(this.createEdge(edge, nodeIdMap, distance))
       })

package/src/materials/group/GroupNode.ts

@@ -321,7 +321,6 @@ export class GroupNodeModel extends RectResizeModel {
   getData() {
     const data = super.getData()
     data.children = []
-    console.log('this.children', this.children)
     this.children.forEach((childId) => {
       const model = this.graphModel.getNodeModelById(childId)
       if (model && !model.virtual) {

package/src/style/raw.ts

@@ -193,6 +193,10 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs
   background: #eaedf2;
   border: 1px solid #93a3b4;
 }
+.lf-mini-map .lf-graph {
+  width: 100% !important;
+  height: 100% !important;
+}
 .lf-mini-map-graph {
   position: relative;
   overflow: hidden;

package/src/tools/proximity-connect/index.ts

@@ -3,6 +3,7 @@ import LogicFlow, {
   twoPointDistance,
   BaseNodeModel,
   BaseEdgeModel,
+  isInNode,
 } from '@logicflow/core'
 import { assign, isEmpty, isEqual, isNil, isFinite, reduce } from 'lodash-es'
 
@@ -78,10 +79,37 @@ export class ProximityConnect {
       },
     )
     // 节点、锚点拖拽结束事件
-    this.lf.graphModel.eventCenter.on('node:drop,anchor:dragend', () => {
+    this.lf.graphModel.eventCenter.on('node:drop', () => {
       if (!this.enable) return
       this.handleDrop()
     })
+    // 锚点拖拽需要单独判断一下当前拖拽终点是否在某个锚点上，如果是，就不触发插件的连线，以免出现创建了两条连线的问题，表现见 issue 2140
+    this.lf.graphModel.eventCenter.on('anchor:dragend', ({ e, edgeModel }) => {
+      if (!this.enable) return
+      const {
+        canvasOverlayPosition: { x: eventX, y: eventY },
+      } = this.lf.graphModel.getPointByClient({
+        x: e.clientX,
+        y: e.clientY,
+      })
+
+      if (edgeModel && this.virtualEdge) {
+        const { id: virtualEdgeId } = this.virtualEdge as BaseEdgeModel
+        const { targetNodeId } = edgeModel as BaseEdgeModel
+        const targetNodeModel =
+          this.lf.graphModel.getNodeModelById(targetNodeId)
+        if (
+          targetNodeModel &&
+          isInNode({ x: eventX, y: eventY }, targetNodeModel)
+        ) {
+          // 如果当前拖拽点在锚点上，就不触发插件的连线
+          this.lf.deleteEdge(virtualEdgeId)
+          return
+        }
+      }
+
+      this.handleDrop()
+    })
   }
 
   // 节点拖拽动作
@@ -346,6 +374,7 @@ export class ProximityConnect {
       endPoint,
       pointsList,
     } = this.virtualEdge
+    this.lf.deleteEdge(this.virtualEdge.id)
     this.lf.addEdge({
       type,
       sourceNodeId,
@@ -356,7 +385,6 @@ export class ProximityConnect {
       endPoint,
       pointsList,
     })
-    this.lf.deleteEdge(this.virtualEdge.id)
   }
 
   // 设置虚拟边样式
@@ -369,7 +397,6 @@ export class ProximityConnect {
 
   // 设置连线阈值
   public setThresholdDistance(distance: number) {
-    console.log('distance', distance)
     if (!isFinite(distance)) return
     this.thresholdDistance = distance
   }