@logicflow/extension 2.0.0-beta.1 → 2.0.0-beta.10

package/src/index.ts

@@ -1,22 +1,44 @@
+// BPMN 相关
 export * from './bpmn'
 export * from './bpmn-adapter'
 export * from './bpmn-elements'
 export * from './bpmn-elements-adapter'
+export * from './bpmn-adapter/xml2json'
+export * from './bpmn-adapter/json2xml'
 
-export * from './tools/snapshot'
+// Adapter
 export * from './turbo-adapter'
+
+// 新版 Group
+export * from './dynamic-group'
+// 折线上动态插入节点
 export * from './insert-node-in-polyline'
+
+// Tools -> 流程图辅助工具
+export * from './tools/label'
+export * from './tools/snapshot'
+export * from './tools/flow-path'
+export * from './tools/auto-layout'
+
+// Component -> 流程图中交互组件
 export * from './components/control'
 export * from './components/menu'
 export * from './components/context-menu'
 export * from './components/dnd-panel'
-export * from './components/selection-select'
 export * from './components/mini-map'
+export * from './components/selection-select'
+export * from './components/highlight'
+
+// materials -> 拓展物料
 export * from './materials/curved-edge'
-export * from './materials/group'
+export * from './materials/node-selection'
+
+/**
+ * @deprecated
+ * 2.0 版本废弃该插件
+ */
 export * from './NodeResize'
-export * from './tools/flow-path'
-export * from './tools/auto-layout'
-export * from './bpmn-adapter/xml2json'
-export * from './bpmn-adapter/json2xml'
-export * from './components/highlight'
+export * from './materials/group'
+
+// 迷之插件
+export * from './rect-label-node'

package/src/insert-node-in-polyline/index.ts

@@ -2,7 +2,7 @@ import LogicFlow, {
   BaseNodeModel,
   PolylineEdgeModel,
   EventType,
-  formateAnchorConnectValidateData,
+  formatAnchorConnectValidateData,
 } from '@logicflow/core'
 import { cloneDeep } from 'lodash-es'
 import { isNodeInSegment } from './edge'
@@ -85,9 +85,9 @@ export class InsertNodeInPolyline {
     )
 
     const { isAllPass: isSourcePass, msg: sourceMsg } =
-      formateAnchorConnectValidateData(sourceRuleResultData)
+      formatAnchorConnectValidateData(sourceRuleResultData)
     const { isAllPass: isTargetPass, msg: targetMsg } =
-      formateAnchorConnectValidateData(targetRuleResultData)
+      formatAnchorConnectValidateData(targetRuleResultData)
 
     return {
       isPass: isSourcePass && isTargetPass,

package/src/materials/group/GroupNode.ts

@@ -1,10 +1,11 @@
 import LogicFlow, { h, BaseEdgeModel } from '@logicflow/core'
+import { isArray } from 'lodash-es'
 import { RectResizeModel, RectResizeView } from '../../NodeResize'
 
-import GraphElements = LogicFlow.GraphElements
-import NodeData = LogicFlow.NodeData
 import Point = LogicFlow.Point
+import NodeData = LogicFlow.NodeData
 import EdgeConfig = LogicFlow.EdgeConfig
+import GraphElements = LogicFlow.GraphElements
 
 const defaultWidth = 500
 const defaultHeight = 300
@@ -20,10 +21,6 @@ export class GroupNodeModel extends RectResizeModel {
    * 其子节点是否被禁止通过拖拽移出分组。 默认false，允许拖拽移除分组。
    */
   isRestrict?: boolean
-  /**
-   * 分组节点是否允许调整大小。
-   */
-  resizable?: boolean
   /**
    * 分组节点是否允许折叠
    */
@@ -50,7 +47,7 @@ export class GroupNodeModel extends RectResizeModel {
   initNodeData(data: any): void {
     super.initNodeData(data)
     let children: any = []
-    if (Array.isArray(data.children)) {
+    if (isArray(data.children)) {
       children = data.children
     }
     // 初始化组的子节点
@@ -61,8 +58,10 @@ export class GroupNodeModel extends RectResizeModel {
     this.foldedHeight = 60
     this.zIndex = DEFAULT_BOTTOM_Z_INDEX
     this.radius = 0
+
     this.text.editable = false
     this.text.draggable = false
+
     this.isRestrict = false
     this.resizable = false
     this.autoToFront = false
@@ -270,12 +269,12 @@ export class GroupNodeModel extends RectResizeModel {
     model.isFoldedEdge = true
   }
 
-  isInRange({ x1, y1, x2, y2 }) {
+  isInRange({ minX, minY, maxX, maxY }) {
     return (
-      x1 >= this.x - this.width / 2 &&
-      x2 <= this.x + this.width / 2 &&
-      y1 >= this.y - this.height / 2 &&
-      y2 <= this.y + this.height / 2
+      minX >= this.x - this.width / 2 &&
+      maxX <= this.x + this.width / 2 &&
+      minY >= this.y - this.height / 2 &&
+      maxY <= this.y + this.height / 2
     )
   }
 
@@ -322,6 +321,7 @@ 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/materials/group/index.ts

@@ -1,4 +1,8 @@
-import { forEach } from 'lodash-es'
+/**
+ * @deprecated
+ * 待废弃，2.0 版本将 提供 dynamic-group 支持分组功能，当前 Group 插件设计和实现有比较多的问题，后续不再维护，请及时切换
+ */
+import { forEach, isEmpty, isObject } from 'lodash-es'
 import LogicFlow, {
   BaseEdgeModel,
   BaseNodeModel,
@@ -12,6 +16,7 @@ import EdgeConfig = LogicFlow.EdgeConfig
 import NodeData = LogicFlow.NodeData
 import Point = LogicFlow.Point
 import BoxBoundsPoint = Model.BoxBoundsPoint
+import NodeConfig = LogicFlow.NodeConfig
 
 const DEFAULT_TOP_Z_INDEX = -1000
 const DEFAULT_BOTTOM_Z_INDEX = -10000
@@ -24,7 +29,7 @@ export class Group {
   activeGroup: any
   nodeGroupMap: Map<string, string> = new Map()
 
-  constructor({ lf }: LogicFlow.ExtensionProps) {
+  constructor({ lf }: LogicFlow.IExtensionProps) {
     lf.register(GroupNode)
     this.lf = lf
 
@@ -40,7 +45,7 @@ export class Group {
       ) as GroupNodeModel
       if (groupModel && groupModel.isRestrict) {
         // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
-        const { x1, y1, x2, y2 } = model.getBounds()
+        const { minX: x1, minY: y1, maxX: x2, maxY: y2 } = model.getBounds()
         return groupModel.isAllowMoveTo({
           x1: x1 + deltaX,
           y1: y1 + deltaY,
@@ -104,18 +109,18 @@ export class Group {
         this.createEdgeModel(edge, nodeIdMap, distance)
       })
       // 构建的时候直接偏移，这里不需要再进行再度偏移
-      // groupInnerChildren.nodes.forEach(node => this.translationNodeData(node, distance));
-      // groupInnerChildren.edges.forEach(edge => this.translationEdgeData(edge, distance));
+      // groupInnerChildren.nodes.forEach(node => this.translateNodeData(node, distance));
+      // groupInnerChildren.edges.forEach(edge => this. translateEdgeData(edge, distance));
 
       // 最外层的edges继续执行创建edgeModel的流程
-      // 由于最外层会调用translationEdgeData()，因此这里不用传入distance进行偏移
+      // 由于最外层会调用 translateEdgeData()，因此这里不用传入distance进行偏移
       forEach(selectedEdges, (edge) => {
         const edgeModel = this.createEdgeModel(edge, nodeIdMap, 0)
         elements.edges.push(edgeModel)
       })
 
       // 返回elements进行选中效果，即触发element.selectElementById()
-      // shortcut.ts也会对最外层的nodes和edges进行偏移，即translationNodeData()
+      // shortcut.ts也会对最外层的nodes和edges进行偏移，即translateNodeData()
       return elements
     }
   }
@@ -142,32 +147,25 @@ export class Group {
           y,
           properties,
           type,
-          text,
           rotate,
           children,
           // incoming,
           // outgoing,
         } = childNodeModel
+        const nodeConfig: NodeConfig = {
+          x: x + distance,
+          y: y + distance,
+          properties,
+          type,
+          rotate,
+          // 如果不传递type，会自动触发NODE_ADD
+          // 有概率触发appendToGroup
+        }
 
         const eventType =
           EventType.NODE_GROUP_COPY || ('node:group-copy-add' as EventType)
-        const newChildModel = lf.addNode(
-          {
-            x: x + distance,
-            y: y + distance,
-            properties,
-            type,
-            text: {
-              ...text,
-              x: text.x + distance,
-              y: text.y + distance,
-            },
-            rotate,
-            // 如果不传递type，会自动触发NODE_ADD
-            // 有概率触发appendToGroup
-          },
-          eventType,
-        )
+        const newChildModel = lf.addNode(nodeConfig, eventType)
+
         ;(current as GroupNodeModel).addChild(newChildModel.id)
         nodeIdMap[childId] = newChildModel.id
         nodesArray.push(newChildModel)
@@ -205,7 +203,7 @@ export class Group {
     )
     return {
       nodesArray,
-      edgesArray: edgesDataArray.concat(filterEdgesDataArray),
+      edgesArray: edgesDataArray.concat(filterEdgesDataArray), // ??? what's this
     }
   }
 
@@ -220,7 +218,7 @@ export class Group {
     if (nodeIdMap[sourceId]) sourceId = nodeIdMap[sourceId]
     if (nodeIdMap[targetId]) targetId = nodeIdMap[targetId]
     const { type, startPoint, endPoint, pointsList, text } = edge
-    // ====== 仿造shortcut.ts的translationEdgeData()逻辑 ======
+    // ====== 仿造shortcut.ts的 translateEdgeData()逻辑 ======
     const newStartPoint = {
       x: (startPoint?.x || 0) + distance,
       y: (startPoint?.y || 0) + distance,
@@ -237,25 +235,26 @@ export class Group {
         return point
       })
     }
-    const newText = text
-    if (text && typeof text !== 'string') {
-      ;(newText as { x: number; y: number; value: string }).x =
-        text.x + distance
-      ;(newText as { x: number; y: number; value: string }).y =
-        text.y + distance
-    }
-    // ====== 仿造shortcut.ts的translationEdgeData()逻辑 ======
-
-    // 简化复制时的参数传入，防止创建出两个edge属于同个group这种情况
-    return lf.graphModel.addEdge({
+    const edgeConfig: EdgeConfig = {
       type,
       startPoint: newStartPoint,
       endPoint: newEndPoint,
       sourceNodeId: sourceId,
       targetNodeId: targetId,
       pointsList: newPointsList,
-      text: newText,
-    })
+    }
+
+    if (isObject(text) && !isEmpty(text)) {
+      edgeConfig.text = {
+        ...text,
+        x: text?.x + distance,
+        y: text?.y + distance,
+      }
+    }
+    // ====== 仿造shortcut.ts的 translateEdgeData()逻辑 ======
+
+    // 简化复制时的参数传入，防止创建出两个edge属于同个group这种情况
+    return lf.graphModel.addEdge(edgeConfig)
   }
 
   /**
@@ -513,6 +512,7 @@ export class Group {
         (node as GroupNodeModel).isInRange(bounds) &&
         node.id !== nodeData.id,
     )
+
     if (groups.length === 0) return
     if (groups.length === 1) return groups[0]
     let topGroup = groups[groups.length - 1]

package/src/materials/node-selection/index.ts

@@ -1,18 +1,12 @@
 import { get } from 'lodash-es'
 import { h, PolygonNode, PolygonNodeModel } from '@logicflow/core'
 
-class NodeSelectionView extends PolygonNode {
-  d = 10
-
-  getShapeStyle() {
-    // 设置边框为虚线
-    const style = this.props.model.getNodeStyle()
-    // @ts-ignore
-    style.strokeDashArray = '10 5'
-
-    return style
-  }
+export type INodeSelectionProperties = {
+  strokeColor?: string | 'none'
+  node_selection_ids?: string[]
+}
 
+class NodeSelectionView extends PolygonNode {
   getLabelShape(): h.JSX.Element {
     const { id, x, y, width, height, properties } = this.props.model
     const style = this.props.model.getNodeStyle()
@@ -21,38 +15,38 @@ class NodeSelectionView extends PolygonNode {
       {
         x: x - width / 2,
         y: y - height / 2,
+        width: 50,
+        height: 24,
         style: 'z-index: 0; background: none; overflow: auto;',
       },
-      properties.labelText
-        ? h(
-            'text',
-            {
-              x: 0,
-              y: -5,
-              width: 50,
-              height: 24,
-              fontSize: '16px',
-              fill: style.stroke,
-            },
-            '方案',
-          )
-        : '',
-      properties.disabledDelete
-        ? ''
-        : h(
-            'text',
-            {
-              x: properties.labelText ? 50 : 0,
-              y: -5,
-              width: 50,
-              height: 24,
-              fontSize: '24px',
-              cursor: 'pointer',
-              fill: style.stroke,
-              onclick: this.handleCustomDeleteIconClick.bind(this, id),
-            },
-            'x',
-          ),
+      [
+        properties.labelText
+          ? h(
+              'text',
+              {
+                x: 0,
+                y: -5,
+                fontSize: '16px',
+                fill: style.stroke,
+              },
+              properties.labelText,
+            )
+          : '',
+        properties.disabledDelete
+          ? ''
+          : h(
+              'text',
+              {
+                x: properties.labelText ? 50 : 0,
+                y: -5,
+                fontSize: '24px',
+                cursor: 'pointer',
+                fill: style.stroke,
+                onclick: this.handleCustomDeleteIconClick.bind(this, id),
+              },
+              'x',
+            ),
+      ],
     )
   }
 
@@ -72,7 +66,7 @@ class NodeSelectionView extends PolygonNode {
       this.getLabelShape(),
     ])
   }
-
+  // 避免点击时，该节点置于最高层，挡住内部节点
   toFront() {}
 
   /**
@@ -85,39 +79,49 @@ class NodeSelectionView extends PolygonNode {
   }
 }
 
-class NodeSelectionModel extends PolygonNodeModel {
+class NodeSelectionModel extends PolygonNodeModel<INodeSelectionProperties> {
   d = 10
 
-  setAttributes() {
-    // 默认不显示
-    this.points = []
-
-    this.text = {
+  initNodeData(data) {
+    data.text = {
       value: '',
-      x: 0,
-      y: 0,
+      x: data.x,
+      y: data.y,
       draggable: false,
       editable: false,
     }
-    this.stroke = this.properties.active_color || '#008000'
+    super.initNodeData(data)
     this.zIndex = 0
-    this.draggable = false
-    this.anchorsOffset = [[0, 0]]
+    this.draggable = true
+  }
 
-    // TODO: 确认此处为何使用 setTimeout, 是初始化时该设置未生效吗？
-    if ((this.properties.node_selection_ids as string[]).length > 1) {
+  setAttributes() {
+    // 默认不显示
+    this.points = []
+
+    // 图render的时候，会把所有nodes数据实例化，全部实例化完成后，放到nodesMap里。
+    // 节点的setAttributes在实例化的时候执行第一次
+    // updatePointsByNodes中的getNodeModelById方法，是从nodesMap取的数据，第一次就拿不到，所以要加setTimeout
+    if ((this.properties?.node_selection_ids as string[]).length > 1) {
       setTimeout(() => {
-        this.updatePointsByNodes(this.properties.node_selection_ids)
+        this.updatePointsByNodes(this.properties?.node_selection_ids || [])
       })
     }
   }
 
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    style.stroke = this.properties.strokeColor || '#008000'
+    style.strokeDasharray = '10 5'
+    return style
+  }
+
   getDefaultAnchor() {
     return []
   }
 
   /**
-   * 更新points
+   * 更新points - 多边形顶点坐标集合
    * @param points
    */
   updatePoints(points) {
@@ -125,7 +129,7 @@ class NodeSelectionModel extends PolygonNodeModel {
   }
 
   /**
-   * 更新x y
+   * 更新x y - 多边形中点坐标
    */
   updateCoordinate({ x, y }) {
     this.x = x
@@ -133,10 +137,9 @@ class NodeSelectionModel extends PolygonNodeModel {
   }
 
   /**
-   * 更新points
+   * 计算新的 points 和 x y
    */
   updatePointsByNodes(nodesIds) {
-    // TODO: 临时方案矩形
     const points: [number, number][] = []
     let minX = Infinity
     let minY = Infinity
@@ -164,7 +167,7 @@ class NodeSelectionModel extends PolygonNodeModel {
   }
 }
 
-export class NodeSelection {
+class NodeSelection {
   static pluginName = 'node-selection'
   lf // lf 实例
   selectNodes: any[] = [] // 选择的nodes
@@ -237,26 +240,20 @@ export class NodeSelection {
 
     lf.on('node:click', (val) => {
       if (!val.e.shiftKey || val.data.type === 'node-selection') return
-
       this.currentClickNode = val.data
 
       // 如果selectNodesIds中已存在此节点，则取消选中此节点
-      let isUnSelected = false
+      let hasExists = false
       if (this.selectNodesIds.includes(val.data.id)) {
         this.lf.getNodeModelById(val.data.id).setSelected(false)
-        isUnSelected = true
+        hasExists = true
       }
 
       // 获取所有被选中的节点，获取到的数组是无序的
       const { nodes } = lf.getSelectElements(true)
-      // 使用插件时判断是否允许使用node-selection
-      if (lf.disableNodeSelection && lf.disableNodeSelection(nodes)) {
-        return
-      }
       this.selectNodes = nodes
-
       if (this.selectNodes.length === 1) {
-        if (!isUnSelected) {
+        if (!hasExists) {
           this.addNodeSelection()
         } else {
           this.updateNodeSelection()
@@ -265,7 +262,18 @@ export class NodeSelection {
         this.updateNodeSelection()
       }
     })
+    lf.graphModel.addNodeMoveRules((model, deltaX, deltaY) => {
+      if (model.type === 'node-selection') {
+        // 如果移动的是分组，那么分组的子节点也跟着移动。
+        const nodeIds = model.properties.node_selection_ids
+        lf.graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
+        return true
+      }
+      return true
+    })
   }
 }
 
 export default NodeSelection
+
+export { NodeSelection }

package/src/style/index.less

@@ -1,3 +1,8 @@
+@import url('medium-editor/dist/css/medium-editor.min.css');
+//@import url('medium-editor/dist/css/themes/bootstrap.min.css');
+@import url('medium-editor/dist/css/themes/beagle.min.css');
+@import url('vanilla-picker/dist/vanilla-picker.csp.css');
+
 .lf-control {
   position: absolute;
   top: 0;
@@ -253,3 +258,71 @@
 .lf-mindmap_addIcon {
   margin-top: 10px;
 }
+
+/* label */
+.lf-label-overlay {
+  width: 0;
+  height: 0;
+  overflow: visible;
+
+  .lf-label-editor {
+    //box-sizing: content-box;
+    padding: 4px;
+    background: #fff;
+    border-radius: 5px;
+
+    &-container {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: visible;
+      text-align: center;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    &-dragging {
+      cursor: move;
+    }
+
+    &-editing {
+      border: 2px solid #275dc5;
+      outline: none;
+      cursor: text;
+    }
+
+    &-hover {
+      border: 2px dashed #acacac;
+    }
+
+    // textOverflowMode
+    &-clip {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: clip;
+    }
+
+    &-ellipsis {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &-wrap {
+      width: 100px; /* 根据需要调整宽度 */
+      white-space: normal;
+      overflow-wrap: break-word; /* 允许单词内换行 */
+    }
+
+    &-nowrap {
+      width: 100px; /* 根据需要调整宽度 */
+      overflow: visible;
+      white-space: nowrap;
+    }
+  }
+}