@logicflow/extension 2.0.10 → 2.0.12

package/src/dynamic-group/node.ts

@@ -3,6 +3,7 @@ import LogicFlow, {
   h,
   RectNode,
   handleResize,
+  CallbackArgs,
 } from '@logicflow/core'
 import { forEach } from 'lodash-es'
 import { DynamicGroupNodeModel } from './model'
@@ -18,101 +19,151 @@ export interface IDynamicGroupNodeProps {
 export class DynamicGroupNode<
   P extends IDynamicGroupNodeProps = IDynamicGroupNodeProps,
 > extends RectNode<P> {
-  componentDidMount() {
-    super.componentDidMount()
+  childrenPositionMap: Map<string, Position> = new Map()
 
+  onNodeRotate = ({
+    model,
+  }: Omit<CallbackArgs<'node:rotate'>, 'e' | 'position'>) => {
     const { model: curGroup, graphModel } = this.props
-    const { eventCenter } = graphModel
-
-    const childrenPositionMap: Map<string, Position> = new Map()
+    const { transformWithContainer, isRestrict } = curGroup
+    const childrenPositionMap = this.childrenPositionMap
+    if (!transformWithContainer || isRestrict) {
+      // isRestrict限制模式下，当前model resize时不能小于占地面积
+      // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
+      // 不符合目前 parent:resize成功后emit事件 -> 触发child:resize 的代码交互模式
+      // 因此isRestrict限制模式下不支持联动(parent:resize=>child:resize)
+      // 由于transformWidthContainer是控制rotate+resize，为保持transformWidthContainer本来的含义
+      // parent:resize=>child:resize不支持，那么parent:rotate=>child:rotate也不支持
+      return
+    }
+    // DONE: 目前操作是对分组内节点以节点中心旋转节点本身，而按照正常逻辑，应该是以分组中心，旋转节点（跟 Label 旋转操作逻辑一致）
+    if (model.id === curGroup.id) {
+      const center = { x: curGroup.x, y: curGroup.y }
+      forEach(Array.from(curGroup.children), (childId) => {
+        const child = graphModel.getNodeModelById(childId)
 
-    // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
-    eventCenter.on('node:rotate', ({ model }) => {
-      const { transformWithContainer, isRestrict } = this.props.model
-      if (!transformWithContainer || isRestrict) {
-        // isRestrict限制模式下，当前model resize时不能小于占地面积
-        // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
-        // 不符合目前 parent:resize成功后emit事件 -> 触发child:resize 的代码交互模式
-        // 因此isRestrict限制模式下不支持联动(parent:resize=>child:resize)
-        // 由于transformWidthContainer是控制rotate+resize，为保持transformWidthContainer本来的含义
-        // parent:resize=>child:resize不支持，那么parent:rotate=>child:rotate也不支持
-        return
-      }
-      // DONE: 目前操作是对分组内节点以节点中心旋转节点本身，而按照正常逻辑，应该是以分组中心，旋转节点（跟 Label 旋转操作逻辑一致）
-      if (model.id === curGroup.id) {
-        const center = { x: curGroup.x, y: curGroup.y }
-        forEach(Array.from(curGroup.children), (childId) => {
-          const child = graphModel.getNodeModelById(childId)
-
-          if (child) {
-            let point: Position = { x: child.x, y: child.y }
-            if (childrenPositionMap.has(child.id)) {
-              point = childrenPositionMap.get(child.id)!
-            } else {
-              childrenPositionMap.set(child.id, point)
-            }
-
-            // 弧度转角度
-            let theta = model.rotate * (180 / Math.PI)
-            if (theta < 0) theta += 360
-            const radian = theta * (Math.PI / 180)
-
-            const newPoint = rotatePointAroundCenter(point, center, radian)
-
-            child.moveTo(newPoint.x, newPoint.y)
-            child.rotate = model.rotate
+        if (child) {
+          let point: Position = { x: child.x, y: child.y }
+          if (childrenPositionMap.has(child.id)) {
+            point = childrenPositionMap.get(child.id)!
+          } else {
+            childrenPositionMap.set(child.id, point)
           }
-        })
-      }
-    })
 
-    // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
-    eventCenter.on(
-      'node:resize',
-      ({ deltaX, deltaY, index, model, preData }) => {
-        const { transformWithContainer, isRestrict } = this.props.model
-        if (!transformWithContainer || isRestrict) {
-          // isRestrict限制模式下，当前model resize时不能小于占地面积
-          // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
-          // 不符合目前 parent:resize成功后emit事件 -> 触发child:resize 的代码交互模式
-          // 因此isRestrict限制模式下不支持联动(parent:resize=>child:resize)
-          return
+          // 弧度转角度
+          let theta = model.rotate * (180 / Math.PI)
+          if (theta < 0) theta += 360
+          const radian = theta * (Math.PI / 180)
+
+          const newPoint = rotatePointAroundCenter(point, center, radian)
+
+          child.moveTo(newPoint.x, newPoint.y)
+          child.rotate = model.rotate
         }
-        if (model.id === curGroup.id) {
-          // node:resize是group已经改变width和height后的回调
-          // 因此这里一定得用preData（没resize改变width之前的值），而不是data/model
-          const { properties } = preData
-          const { width: groupWidth, height: groupHeight } = properties || {}
-          forEach(Array.from(curGroup.children), (childId) => {
-            const child = graphModel.getNodeModelById(childId)
-            if (child) {
-              // 根据比例去控制缩放dx和dy
-              const childDx = (child.width / groupWidth!) * deltaX
-              const childDy = (child.height / groupHeight!) * deltaY
-
-              // child.rotate = model.rotate
-              handleResize({
-                deltaX: childDx,
-                deltaY: childDy,
-                index,
-                nodeModel: child,
-                graphModel,
-                cancelCallback: () => {},
-              })
-            }
+      })
+    }
+  }
+
+  onNodeResize = ({
+    deltaX,
+    deltaY,
+    index,
+    model,
+    preData,
+  }: Omit<CallbackArgs<'node:resize'>, 'e' | 'position'>) => {
+    const { model: curGroup, graphModel } = this.props
+    const { transformWithContainer, isRestrict } = curGroup
+    if (!transformWithContainer || isRestrict) {
+      // isRestrict限制模式下，当前model resize时不能小于占地面积
+      // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
+      // 不符合目前 parent:resize成功后emit事件 -> 触发child:resize 的代码交互模式
+      // 因此isRestrict限制模式下不支持联动(parent:resize=>child:resize)
+      return
+    }
+    if (model.id === curGroup.id) {
+      // node:resize是group已经改变width和height后的回调
+      // 因此这里一定得用preData（没resize改变width之前的值），而不是data/model
+      const { properties } = preData
+      const { width: groupWidth, height: groupHeight } = properties || {}
+      forEach(Array.from(curGroup.children), (childId) => {
+        const child = graphModel.getNodeModelById(childId)
+        if (child) {
+          // 根据比例去控制缩放dx和dy
+          const childDx = (child.width / groupWidth!) * deltaX
+          const childDy = (child.height / groupHeight!) * deltaY
+
+          // child.rotate = model.rotate
+          handleResize({
+            deltaX: childDx,
+            deltaY: childDy,
+            index,
+            nodeModel: child,
+            graphModel,
+            cancelCallback: () => {},
           })
         }
-      },
-    )
+      })
+    }
+  }
 
+  onNodeMouseMove = ({
+    deltaX,
+    deltaY,
+    data,
+  }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => {
+    const { model: curGroup, graphModel } = this.props
+    const { transformModel } = graphModel
+    const { SCALE_X, SCALE_Y } = transformModel
+    if (data.id === curGroup.id) {
+      const nodeIds = this.getNodesInGroup(curGroup, graphModel)
+      // https://github.com/didi/LogicFlow/issues/1914
+      // 当调用lf.fitView()时，会改变整体的SCALE_X和SCALE_Y
+      // 由于group的mousemove是在drag.ts的this.onDragging()处理的，在onDragging()里面进行SCALE的处理
+      // 而"node:mousemove"emit出来跟onDragging()是同时的，也就是emit出来的数据是没有经过SCALE处理的坐标
+      // 因此这里需要增加SCALE的处理
+      graphModel.moveNodes(nodeIds, deltaX / SCALE_X, deltaY / SCALE_Y, true)
+    }
+  }
+
+  graphRendered = () => {
+    const { model } = this.props
+    // 初始化时，如果 this.isCollapsed 为 true，则主动触发一次折叠操作
+    if (model.isCollapsed) {
+      // https://github.com/didi/LogicFlow/issues/1918
+      // 当lf.render({nodes:[{分组节点}, {普通节点}]})时，由于是顺序遍历
+      // 会先触发分组Group节点的new Model => toggleCollapse()
+      // => 此时在graphModel.elementsModelMap找不到它的children，因为还没初始化，因此无法正确折叠子元素
+      // --------------------
+      // 当lf.render({nodes:[{普通节点}, {分组节点}]})时，
+      // 会先触发普通节点的new Model => graphModel.elementsModelMap.set(id, new Model())
+      // 然后再触发分组Group节点的new Model => toggleCollapse() =>
+      // 此时在graphModel.elementsModelMap能找到它的children了，因此可以正确折叠子元素
+      // --------------------
+      // 因此将整个初始化判断是否【主动触发一次折叠操作】放在"graph:rendered"全部渲染完成后再执行
+      model.toggleCollapse(true)
+    }
+  }
+
+  componentDidMount() {
+    super.componentDidMount()
+    const { eventCenter } = this.props.graphModel
+    // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
+    eventCenter.on('node:rotate', this.onNodeRotate)
+    // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
+    eventCenter.on('node:resize', this.onNodeResize)
     // 在 group 移动时，对组内的所有子节点也进行对应的移动计算
-    eventCenter.on('node:mousemove', ({ deltaX, deltaY, data }) => {
-      if (data.id === curGroup.id) {
-        const { model: curGroup, graphModel } = this.props
-        const nodeIds = this.getNodesInGroup(curGroup, graphModel)
-        graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
-      }
-    })
+    eventCenter.on('node:mousemove', this.onNodeMouseMove)
+    // 全部渲染完成后，判断是否【主动触发一次折叠操作】
+    eventCenter.on('graph:rendered', this.graphRendered)
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount()
+    const { eventCenter } = this.props.graphModel
+    eventCenter.off('node:rotate', this.onNodeRotate)
+    eventCenter.off('node:resize', this.onNodeResize)
+    eventCenter.off('node:mousemove', this.onNodeMouseMove)
+    eventCenter.off('graph:rendered', this.graphRendered)
   }
 
   /**

package/src/index.ts

@@ -19,6 +19,7 @@ export * from './tools/label'
 export * from './tools/snapshot'
 export * from './tools/flow-path'
 export * from './tools/auto-layout'
+export * from './tools/proximity-connect'
 
 // Component -> 流程图中交互组件
 export * from './components/control'

package/src/materials/group/GroupNode.ts

@@ -278,10 +278,10 @@ export class GroupNodeModel extends RectResizeModel {
     )
   }
 
-  isAllowMoveTo({ x1, y1, x2, y2 }) {
+  isAllowMoveTo({ minX, minY, maxX, maxY }) {
     return {
-      x: x1 >= this.x - this.width / 2 && x2 <= this.x + this.width / 2,
-      y: y1 >= this.y - this.height / 2 && y2 <= this.y + this.height / 2,
+      x: minX >= this.x - this.width / 2 && maxX <= this.x + this.width / 2,
+      y: minY >= this.y - this.height / 2 && maxY <= this.y + this.height / 2,
     }
   }
 

package/src/materials/group/index.ts

@@ -45,12 +45,12 @@ export class Group {
       ) as GroupNodeModel
       if (groupModel && groupModel.isRestrict) {
         // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
-        const { minX: x1, minY: y1, maxX: x2, maxY: y2 } = model.getBounds()
+        const { minX, minY, maxX, maxY } = model.getBounds()
         return groupModel.isAllowMoveTo({
-          x1: x1 + deltaX,
-          y1: y1 + deltaY,
-          x2: x2 + deltaX,
-          y2: y2 + deltaY,
+          minX: minX + deltaX,
+          minY: minY + deltaY,
+          maxX: maxX + deltaX,
+          maxY: maxY + deltaY,
         })
       }
 

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

@@ -1,5 +1,11 @@
 import { get } from 'lodash-es'
-import { h, PolygonNode, PolygonNodeModel } from '@logicflow/core'
+import LogicFlow, {
+  BaseNodeModel,
+  h,
+  PolygonNode,
+  PolygonNodeModel,
+} from '@logicflow/core'
+import { ResizeControl } from '@logicflow/core/lib/view/Control'
 
 export type INodeSelectionProperties = {
   strokeColor?: string | 'none'
@@ -124,7 +130,7 @@ class NodeSelectionModel extends PolygonNodeModel<INodeSelectionProperties> {
    * 更新points - 多边形顶点坐标集合
    * @param points
    */
-  updatePoints(points) {
+  updatePoints(points: [number, number][]) {
     this.points = points
   }
 
@@ -139,7 +145,7 @@ class NodeSelectionModel extends PolygonNodeModel<INodeSelectionProperties> {
   /**
    * 计算新的 points 和 x y
    */
-  updatePointsByNodes(nodesIds) {
+  updatePointsByNodes(nodesIds: string[]) {
     const points: [number, number][] = []
     let minX = Infinity
     let minY = Infinity
@@ -165,18 +171,74 @@ class NodeSelectionModel extends PolygonNodeModel<INodeSelectionProperties> {
       y: (maxY + minY) / 2,
     })
   }
+
+  isResize = false
+  override resize(
+    resizeInfo: ResizeControl.ResizeInfo,
+  ): ResizeControl.ResizeNodeData {
+    this.isResize = true
+    const { width, height } = resizeInfo
+    const scale = {
+      x: width / this.width,
+      y: height / this.height,
+    }
+    const childIds = (this.properties.node_selection_ids || []).slice()
+    const childModels: BaseNodeModel[] = []
+    const usedGroupId = new Set<string>()
+    while (childIds.length) {
+      const id = childIds.shift()!
+      const node = this.graphModel.nodesMap[id]?.model
+      if (!node) {
+        continue
+      }
+      if (!isNodeSelectionModel(node)) {
+        childModels.push(node)
+        continue
+      }
+      // 跳出循环引用
+      if (usedGroupId.has(node.id)) {
+        continue
+      }
+      usedGroupId.add(node.id)
+      childIds.push(...(node.properties.node_selection_ids || []))
+    }
+
+    const begin = {
+      x: this.x - this.width / 2,
+      y: this.y - this.height / 2,
+    }
+
+    const res = super.resize(resizeInfo)
+
+    const end = {
+      x: this.x - this.width / 2,
+      y: this.y - this.height / 2,
+    }
+
+    childModels.forEach((node) => {
+      node.width = node.width * scale.x
+      node.height = node.height * scale.y
+      const deltaX = (node.x - begin.x) * scale.x + end.x - node.x
+      const deltaY = (node.y - begin.y) * scale.y + end.y - node.y
+      node.move(deltaX, deltaY, true)
+    })
+    this.isResize = false
+    return res
+  }
 }
 
+const NODE_SELECTION_TYPE = 'node-selection'
 class NodeSelection {
   static pluginName = 'node-selection'
-  lf // lf 实例
+  lf: LogicFlow // lf 实例
   selectNodes: any[] = [] // 选择的nodes
   currentClickNode // 当前点击的节点，选中的节点是无序的
   d = 10
 
-  constructor({ lf }) {
+  constructor({ lf }: LogicFlow.IExtensionProps) {
+    this.lf = lf
     lf.register({
-      type: 'node-selection',
+      type: NODE_SELECTION_TYPE,
       view: NodeSelectionView,
       model: NodeSelectionModel,
     })
@@ -199,6 +261,8 @@ class NodeSelection {
       properties: {
         node_selection_ids: this.selectNodesIds,
       },
+      x: 0,
+      y: 0,
     })
     node.updatePointsByNodes(this.selectNodesIds)
   }
@@ -215,7 +279,7 @@ class NodeSelection {
 
     this.lf
       .getNodeModelById(nodeSelection.id)
-      .updatePointsByNodes(this.selectNodesIds)
+      ?.updatePointsByNodes(this.selectNodesIds)
   }
 
   /**
@@ -228,24 +292,44 @@ class NodeSelection {
     const oldIds = ids.filter((id) => id !== this.currentClickNode.id)
     return rawData.nodes.find((node) => {
       if (node.type === 'node-selection') {
-        const nodeSelectionIds = get(node, 'properties.node_selection_ids', [])
+        const nodeSelectionIds = get(
+          node,
+          'properties.node_selection_ids',
+          [],
+        ) as string[]
         return oldIds.every((id) => nodeSelectionIds.includes(id))
       }
       return false
     })
   }
 
-  render(lf) {
+  protected onNodeChange(lf: LogicFlow, model: BaseNodeModel) {
+    const connectedSelections = lf.graphModel.nodes.filter((node) => {
+      if (!isNodeSelectionModel(node)) {
+        return false
+      }
+      const childIds: string[] = node.properties.node_selection_ids || []
+      return childIds.includes(model.id)
+    })
+
+    Promise.resolve().then(() => {
+      connectedSelections.forEach((node) => {
+        node.updatePointsByNodes(node.properties.node_selection_ids || [])
+      })
+    })
+  }
+
+  render(lf: LogicFlow) {
     this.lf = lf
 
     lf.on('node:click', (val) => {
-      if (!val.e.shiftKey || val.data.type === 'node-selection') return
+      if (!val.e.shiftKey || val.data.type === NODE_SELECTION_TYPE) return
       this.currentClickNode = val.data
 
       // 如果selectNodesIds中已存在此节点，则取消选中此节点
       let hasExists = false
       if (this.selectNodesIds.includes(val.data.id)) {
-        this.lf.getNodeModelById(val.data.id).setSelected(false)
+        this.lf.getNodeModelById(val.data.id)?.setSelected(false)
         hasExists = true
       }
 
@@ -263,17 +347,34 @@ class NodeSelection {
       }
     })
     lf.graphModel.addNodeMoveRules((model, deltaX, deltaY) => {
-      if (model.type === 'node-selection') {
-        // 如果移动的是分组，那么分组的子节点也跟着移动。
-        const nodeIds = model.properties.node_selection_ids
+      this.onNodeChange(lf, model)
+      /**
+       * 如果移动的是分组，那么分组的子节点也跟着移动。
+       * 忽略来自分组resize导致的move
+       */
+      if (isNodeSelectionModel(model) && !model.isResize) {
+        const nodeIds = model.properties.node_selection_ids || []
         lf.graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
         return true
       }
       return true
     })
+
+    lf.graphModel.addNodeResizeRules((model) => {
+      if (!isNodeSelectionModel(model)) {
+        this.onNodeChange(lf, model)
+      }
+      return true
+    })
   }
 }
 
+const isNodeSelectionModel = (
+  node: BaseNodeModel,
+): node is NodeSelectionModel => {
+  return !!(node && (node.type as string) === NODE_SELECTION_TYPE)
+}
+
 export default NodeSelection
 
 export { NodeSelection }

package/src/style/index.less

@@ -32,13 +32,12 @@
     }
 
     &-editing {
-      border: 2px solid #275dc5;
-      outline: none;
+      outline: 2px solid #275dc5;
       cursor: text;
     }
 
     &-hover {
-      border: 2px dashed #acacac;
+      outline: 2px dashed #acacac;
     }
 
     // textOverflowMode
@@ -57,13 +56,11 @@
     }
 
     &-wrap {
-      width: 100px; /* 根据需要调整宽度 */
       white-space: normal;
       overflow-wrap: break-word; /* 允许单词内换行 */
     }
 
     &-nowrap {
-      width: 100px; /* 根据需要调整宽度 */
       overflow: visible;
       white-space: nowrap;
     }
@@ -179,6 +176,7 @@
 /* dndpanel */
 .lf-dndpanel {
   position: absolute;
+  z-index: 999;
   margin: 5px;
   padding: 15px 5px;
   background: rgb(255 255 255 / 80%);

package/src/style/raw.ts

@@ -33,12 +33,11 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs
   cursor: move;
 }
 .lf-label-overlay .lf-label-editor-editing {
-  border: 2px solid #275dc5;
-  outline: none;
+  outline: 2px solid #275dc5;
   cursor: text;
 }
 .lf-label-overlay .lf-label-editor-hover {
-  border: 2px dashed #acacac;
+  outline: 2px dashed #acacac;
 }
 .lf-label-overlay .lf-label-editor-clip {
   width: 100px;
@@ -55,15 +54,11 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs
   text-overflow: ellipsis;
 }
 .lf-label-overlay .lf-label-editor-wrap {
-  width: 100px;
-  /* 根据需要调整宽度 */
   white-space: normal;
   overflow-wrap: break-word;
   /* 允许单词内换行 */
 }
 .lf-label-overlay .lf-label-editor-nowrap {
-  width: 100px;
-  /* 根据需要调整宽度 */
   overflow: visible;
   white-space: nowrap;
 }
@@ -159,6 +154,7 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs
 /* dndpanel */
 .lf-dndpanel {
   position: absolute;
+  z-index: 999;
   margin: 5px;
   padding: 15px 5px;
   background: rgba(255, 255, 255, 0.8);