@logicflow/extension 2.0.17 → 2.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.17",
+  "version": "2.0.19",
   "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.13"
+    "@logicflow/core": "2.0.14"
   },
   "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.13"
+    "@logicflow/core": "2.0.14"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/bpmn-elements/index.d.ts

@@ -1,26 +1,26 @@
 type DefinitionConfigType = {
-  nodes: string[];
-  definition: EventDefinitionType[] | TaskDefinitionType[];
-};
+  nodes: string[]
+  definition: EventDefinitionType[] | TaskDefinitionType[]
+}
 
 type DefinitionPropertiesType = {
-  definitionType: string;
-  timerType?: TimerType;
-  timerValue?: string;
-  [key: string]: any;
-};
+  definitionType: string
+  timerType?: TimerType
+  timerValue?: string
+  [key: string]: any
+}
 
 type EventDefinitionType = {
-  type: string;
-  icon: string | Object;
-  toJSON: Function;
-  properties: DefinitionPropertiesType;
-  [key: string]: any;
-};
+  type: string
+  icon: string | Object
+  toJSON: Function
+  properties: DefinitionPropertiesType
+  [key: string]: any
+}
 
 type TaskDefinitionType = {
-  type: string;
-  [key: string]: any;
-};
+  type: string
+  [key: string]: any
+}
 
-type TimerType = 'timerCycle' | 'timerDate' | 'timerDuration';
+type TimerType = 'timerCycle' | 'timerDate' | 'timerDuration'

package/src/bpmn-elements/presets/Flow/flow.d.ts

@@ -1,6 +1,6 @@
 export type BBoxType = {
-    minX: number;
-    minY: number;
-    maxX: number;
-    maxY: number;
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
 }

package/src/bpmn-elements-adapter/__tests__/adapter_in.test.js

@@ -3,7 +3,7 @@
 /* eslint-disable no-new */
 /* eslint-disable no-undef */
 /* eslint-disable no-tabs */
-import { BPMNAdapter } from '..';
+import { BPMNAdapter } from '..'
 
 describe('Test BPMNAdapter: import xml', () => {
   const graphData = {
@@ -349,7 +349,7 @@ describe('Test BPMNAdapter: import xml', () => {
         ],
       },
     ],
-  };
+  }
   const xml = `    <bpmn:definitions id="Definitions" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" targetNamespace="http://logic-flow.org" exporter="logicflow" exporterVersion="1.2.10">	
   <bpmn:process isExecutable="true" id="Process">	
       <bpmn:startEvent id="Event_0rqndvp" name="开始" />	
@@ -511,16 +511,18 @@ describe('Test BPMNAdapter: import xml', () => {
         </bpmndi:BPMNShape>	
     </bpmndi:BPMNPlane>	
   </bpmndi:BPMNDiagram>	
-</bpmn:definitions>`;
-  const lf = {};
-  const adapter = new BPMNAdapter({ lf });
+</bpmn:definitions>`
+  const lf = {}
+  const adapter = new BPMNAdapter({ lf })
 
   // 导入时会处理内部会出boundaryEvents（配合Bpmn节点插件中的task、subProcess使用）但是在这里不需要，所以需要extraProps来过滤掉它
   it('should convert bpmn to graph data', () => {
-    expect(adapter.adapterXmlIn(xml, {
-      excludeFields: {
-        in: ['properties.boundaryEvents'],
-      },
-    })).toEqual(graphData);
-  });
-});
+    expect(
+      adapter.adapterXmlIn(xml, {
+        excludeFields: {
+          in: ['properties.boundaryEvents'],
+        },
+      }),
+    ).toEqual(graphData)
+  })
+})

package/src/bpmn-elements-adapter/__tests__/adapter_out.test.js

@@ -3,7 +3,7 @@
 /* eslint-disable no-new */
 /* eslint-disable no-undef */
 /* eslint-disable no-tabs */
-import { BPMNAdapter } from '..';
+import { BPMNAdapter } from '..'
 
 describe('Test BPMNAdapter: export xml', () => {
   const graphData = {
@@ -397,7 +397,7 @@ describe('Test BPMNAdapter: export xml', () => {
         ],
       },
     ],
-  };
+  }
   const xml = `    <bpmn:definitions id="Definitions" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" targetNamespace="http://logic-flow.org" exporter="logicflow" exporterVersion="1.2.10">	
   <bpmn:process isExecutable="true" id="Process">	
       <bpmn:startEvent id="Event_0rqndvp" name="开始" />	
@@ -559,11 +559,11 @@ describe('Test BPMNAdapter: export xml', () => {
         </bpmndi:BPMNShape>	
     </bpmndi:BPMNPlane>	
   </bpmndi:BPMNDiagram>	
-</bpmn:definitions>`;
-  const lf = {};
-  const adapter = new BPMNAdapter({ lf });
+</bpmn:definitions>`
+  const lf = {}
+  const adapter = new BPMNAdapter({ lf })
 
   it('should transform logic-flow graph data to bpmn xml', () => {
-    expect(adapter.adapterXmlOut(graphData)).toEqual(xml);
-  });
-});
+    expect(adapter.adapterXmlOut(graphData)).toEqual(xml)
+  })
+})

package/src/bpmn-elements-adapter/constant.ts

@@ -1,52 +1,52 @@
 export const StartEventConfig = {
   width: 40,
   height: 40,
-};
+}
 
 export const EndEventConfig = {
   width: 40,
   height: 40,
-};
+}
 
 export const BoundaryEventConfig = {
   width: 100,
   height: 80,
-};
+}
 
 export const IntermediateEventConfig = {
   width: 100,
   height: 80,
-};
+}
 
 export const ParallelGatewayConfig = {
   width: 100,
   height: 80,
-};
+}
 
 export const InclusiveGatewayConfig = {
   width: 100,
   height: 80,
-};
+}
 
 export const ExclusiveGatewayConfig = {
   width: 100,
   height: 80,
-};
+}
 
 export const ServiceTaskConfig = {
   width: 100,
   height: 80,
-};
+}
 
 export const UserTaskConfig = {
   width: 100,
   height: 80,
-};
+}
 
 export const SubProcessConfig = {
   width: 100,
   height: 80,
-};
+}
 
 export const theme = {
   rect: {
@@ -73,4 +73,4 @@ export const theme = {
       radius: 3,
     },
   },
-};
+}

package/src/bpmn-elements-adapter/json2xml.ts

@@ -1,91 +1,91 @@
 /* eslint-disable guard-for-in */
 function type(obj: any) {
-  return Object.prototype.toString.call(obj);
+  return Object.prototype.toString.call(obj)
 }
 
 function addSpace(depth: number) {
-  return '  '.repeat(depth);
+  return '  '.repeat(depth)
 }
 
 function handleAttributes(obj: any): any {
   if (type(obj) === '[object Object]') {
     return Object.keys(obj).reduce((tmp: any, key: string) => {
-      let tmpKey = key;
+      let tmpKey = key
       if (key.charAt(0) === '-') {
-        tmpKey = key.substring(1);
+        tmpKey = key.substring(1)
       }
-      tmp[tmpKey] = handleAttributes(obj[key]);
-      return tmp;
-    }, {});
-  } if (Array.isArray(obj)) {
-    return obj.map((item) => handleAttributes(item));
+      tmp[tmpKey] = handleAttributes(obj[key])
+      return tmp
+    }, {})
   }
-  return obj;
+  if (Array.isArray(obj)) {
+    return obj.map((item) => handleAttributes(item))
+  }
+  return obj
 }
 
 function getAttributes(obj: any) {
-  let tmp = obj;
+  let tmp = obj
   try {
     if (typeof tmp !== 'string') {
-      tmp = JSON.parse(obj);
+      tmp = JSON.parse(obj)
     }
   } catch (error) {
-    tmp = JSON.stringify(handleAttributes(obj)).replace(/"/g, '\'');
+    tmp = JSON.stringify(handleAttributes(obj)).replace(/"/g, "'")
   }
-  return tmp;
+  return tmp
 }
 
-const tn = '\t\n';
+const tn = '\t\n'
 
 // @see issue https://github.com/didi/LogicFlow/issues/718, refactoring of function toXml
 function toXml(obj: any, name: string, depth: number) {
-  const frontSpace = addSpace(depth);
-  let str = '';
-  const prefix = tn + frontSpace;
-  if (name === '-json') return '';
+  const frontSpace = addSpace(depth)
+  let str = ''
+  const prefix = tn + frontSpace
+  if (name === '-json') return ''
   if (name === '#text') {
-    return prefix + obj;
-  } if (name === '#cdata-section') {
-    return `${prefix}<![CDATA[${obj}]]>`;
-  } if (name === '#comment') {
-    return `${prefix}<!--${obj}-->`;
+    return prefix + obj
+  }
+  if (name === '#cdata-section') {
+    return `${prefix}<![CDATA[${obj}]]>`
+  }
+  if (name === '#comment') {
+    return `${prefix}<!--${obj}-->`
   }
   if (`${name}`.charAt(0) === '-') {
-    return ` ${name.substring(1)}="${getAttributes(obj)}"`;
+    return ` ${name.substring(1)}="${getAttributes(obj)}"`
   }
   if (Array.isArray(obj)) {
-    str += obj.map((item) => toXml(item, name, depth + 1)).join('');
+    str += obj.map((item) => toXml(item, name, depth + 1)).join('')
   } else if (type(obj) === '[object Object]') {
-    const keys = Object.keys(obj);
-    let attributes = '';
-    let children = obj['-json']
-      ? tn + addSpace(depth + 1) + obj['-json']
-      : '';
+    const keys = Object.keys(obj)
+    let attributes = ''
+    let children = obj['-json'] ? tn + addSpace(depth + 1) + obj['-json'] : ''
 
-    str += `${depth === 0 ? '' : prefix}<${name}`;
+    str += `${depth === 0 ? '' : prefix}<${name}`
 
     keys.forEach((k) => {
       k.charAt(0) === '-'
         ? (attributes += toXml(obj[k], k, depth + 1))
-        : (children += toXml(obj[k], k, depth + 1));
-    });
+        : (children += toXml(obj[k], k, depth + 1))
+    })
 
-    str
-        += attributes
-        + (children !== '' ? `>${children}${prefix}</${name}>` : ' />');
+    str +=
+      attributes + (children !== '' ? `>${children}${prefix}</${name}>` : ' />')
   } else {
-    str += `${prefix}<${name}>${obj.toString()}</${name}>`;
+    str += `${prefix}<${name}>${obj.toString()}</${name}>`
   }
 
-  return str;
+  return str
 }
 
 function lfJson2Xml(obj: any) {
-  let xmlStr = '';
+  let xmlStr = ''
   for (const key in obj) {
-    xmlStr += toXml(obj[key], key, 0);
+    xmlStr += toXml(obj[key], key, 0)
   }
-  return xmlStr;
+  return xmlStr
 }
 
-export { lfJson2Xml, handleAttributes };
+export { lfJson2Xml, handleAttributes }

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

@@ -134,6 +134,7 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
     this.children = children ? new Set(children) : new Set()
     this.zIndex = zIndex ?? DEFAULT_BOTTOM_Z_INDEX
     this.isCollapsed = isCollapsed ?? false
+    this.setProperties({ isCollapsed: isCollapsed ?? false })
 
     const expandWidth = width ?? DEFAULT_GROUP_EXPAND_WIDTH
     const expandHeight = height ?? DEFAULT_GROUP_EXPAND_HEIGHT
@@ -249,8 +250,17 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
    * @param collapse {boolean} true -> 折叠；false -> 展开
    */
   toggleCollapse(collapse?: boolean) {
+    const { graphModel } = this
     const nextCollapseState = !!collapse
+    // DONE: 通过 setProperty 设置 isCollapsed 的值 -> 否则无法触发 node:properties-changed 事件
     this.isCollapsed = nextCollapseState
+    this.setProperties({ isCollapsed: nextCollapseState })
+
+    graphModel.eventCenter.emit('dynamicGroup:collapse', {
+      collapse: nextCollapseState,
+      nodeModel: this,
+    })
+
     // step 1
     if (nextCollapseState) {
       this.collapse()

package/src/dynamic-group/node.ts

@@ -268,6 +268,7 @@ export class DynamicGroupNode<
         x: sx,
         y: sy,
         onClick: () => {
+          // DONE: 抛出折叠或展开事件 -> 在 toggleCollapse 方法中抛出
           model.toggleCollapse(!model.isCollapsed)
         },
       }),

package/src/materials/curved-edge/__test__/curved-edge.test.ts

@@ -1,43 +1,46 @@
-import { getCurvedEdgePath } from '../index';
+import { getCurvedEdgePath } from '../index'
 
 describe('test curved edge ', () => {
   test('path calculation', () => {
-    const radius = 5;
+    const radius = 5
 
-    const points1 = '460,150 670,150';
-    const path1 = 'M460 150 L 670 150';
+    const points1 = '460,150 670,150'
+    const path1 = 'M460 150 L 670 150'
     expect(
       getCurvedEdgePath(
         points1.split(' ').map((p) => p.split(',').map((a) => +a)),
         radius,
       ),
-    ).toBe(path1);
+    ).toBe(path1)
 
-    const points2 = '510,250 540,250 540,175 490,175 490,100 520,100';
-    const path2 = 'M510 250L 510 250L 535 250 Q 540 250 540 245L 540 245L 540 180 Q 540 175 535 175L 535 175L 495 175 Q 490 175 490 170L 490 170L 490 105 Q 490 100 495 100L 520 100';
+    const points2 = '510,250 540,250 540,175 490,175 490,100 520,100'
+    const path2 =
+      'M510 250L 510 250L 535 250 Q 540 250 540 245L 540 245L 540 180 Q 540 175 535 175L 535 175L 495 175 Q 490 175 490 170L 490 170L 490 105 Q 490 100 495 100L 520 100'
     expect(
       getCurvedEdgePath(
         points2.split(' ').map((p) => p.split(',').map((a) => +a)),
         radius,
       ),
-    ).toBe(path2);
+    ).toBe(path2)
 
-    const points3 = '690,120 720,120 720,50 560,50 560,260 690,260';
-    const path3 = 'M690 120L 690 120L 715 120 Q 720 120 720 115L 720 115L 720 55 Q 720 50 715 50L 715 50L 565 50 Q 560 50 560 55L 560 55L 560 255 Q 560 260 565 260L 690 260';
+    const points3 = '690,120 720,120 720,50 560,50 560,260 690,260'
+    const path3 =
+      'M690 120L 690 120L 715 120 Q 720 120 720 115L 720 115L 720 55 Q 720 50 715 50L 715 50L 565 50 Q 560 50 560 55L 560 55L 560 255 Q 560 260 565 260L 690 260'
     expect(
       getCurvedEdgePath(
         points3.split(' ').map((p) => p.split(',').map((a) => +a)),
         radius,
       ),
-    ).toBe(path3);
+    ).toBe(path3)
 
-    const point4 = '690,180 690,210 660,210 660,190 630,190 630,220';
-    const path4 = 'M690 180L 690 180L 690 205 Q 690 210 685 210L 685 210L 665 210 Q 660 210 660 205L 660 205L 660 195 Q 660 190 655 190L 655 190L 635 190 Q 630 190 630 195L 630 220';
+    const point4 = '690,180 690,210 660,210 660,190 630,190 630,220'
+    const path4 =
+      'M690 180L 690 180L 690 205 Q 690 210 685 210L 685 210L 665 210 Q 660 210 660 205L 660 205L 660 195 Q 660 190 655 190L 655 190L 635 190 Q 630 190 630 195L 630 220'
     expect(
       getCurvedEdgePath(
         point4.split(' ').map((p) => p.split(',').map((a) => +a)),
         radius,
       ),
-    ).toBe(path4);
-  });
-});
+    ).toBe(path4)
+  })
+})

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/label/utils.ts

@@ -350,7 +350,7 @@ export const calcLabelPositionOnPolyline = (
       y: minY + (maxY - minY) * yDeltaPercent,
     }
     return isPointOnEdge
-      ? getNewPointAtDistance(points, ratio) ?? point // 函数什么意思
+      ? (getNewPointAtDistance(points, ratio) ?? point) // 函数什么意思
       : positByPercent
   }
   // 如果文本在凸包的上方或者下方

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
   }