@logicflow/extension 2.0.17 → 2.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",

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/dynamic-group/index.ts

@@ -513,9 +513,6 @@ export class DynamicGroup {
       }
     })
 
-    // TODO: 确认，递归的方式，是否将所有嵌套的边数据都有返回
-    console.log('allRelatedEdges -->>', allRelatedEdges)
-
     // 1. 判断每一条边的开始节点、目标节点是否在 Group 中
     const edgesInnerGroup = filter(allRelatedEdges, (edge) => {
       return (

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
   }