@logicflow/extension 1.2.27 → 2.0.0-beta.0

package/src/materials/group/index.ts

@@ -0,0 +1,542 @@
+import { forEach } from 'lodash-es'
+import LogicFlow, {
+  BaseEdgeModel,
+  BaseNodeModel,
+  EventType,
+  Model,
+} from '@logicflow/core'
+import GroupNode, { GroupNodeModel } from './GroupNode'
+
+import GraphConfigData = LogicFlow.GraphConfigData
+import EdgeConfig = LogicFlow.EdgeConfig
+import NodeData = LogicFlow.NodeData
+import Point = LogicFlow.Point
+import BoxBoundsPoint = Model.BoxBoundsPoint
+
+const DEFAULT_TOP_Z_INDEX = -1000
+const DEFAULT_BOTTOM_Z_INDEX = -10000
+
+export class Group {
+  static pluginName = 'group'
+
+  private lf: LogicFlow
+  topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX
+  activeGroup: any
+  nodeGroupMap: Map<string, string> = new Map()
+
+  constructor({ lf }: LogicFlow.ExtensionProps) {
+    lf.register(GroupNode)
+    this.lf = lf
+
+    lf.graphModel.addNodeMoveRules((model, deltaX, deltaY) => {
+      if (model.isGroup) {
+        // 如果移动的是分组，那么分组的子节点也跟着移动。
+        const nodeIds = this.getNodeAllChild(model)
+        lf.graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
+        return true
+      }
+      const groupModel = lf.getNodeModelById(
+        this.nodeGroupMap.get(model.id)!,
+      ) as GroupNodeModel
+      if (groupModel && groupModel.isRestrict) {
+        // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
+        const { x1, y1, x2, y2 } = model.getBounds()
+        return groupModel.isAllowMoveTo({
+          x1: x1 + deltaX,
+          y1: y1 + deltaY,
+          x2: x2 + deltaX,
+          y2: y2 + deltaY,
+        })
+      }
+
+      return true
+    })
+
+    lf.graphModel.group = this
+    lf.on('node:add,node:drop,node:dnd-add', this.appendNodeToGroup)
+    lf.on('node:delete', this.deleteGroupChild)
+    lf.on('node:dnd-drag,node:drag', this.setActiveGroup)
+    lf.on('node:click', this.nodeSelected)
+    lf.on('graph:rendered', this.graphRendered)
+
+    // https://github.com/didi/LogicFlow/issues/1346
+    // 重写 addElements() 方法，在 addElements() 原有基础上增加对 group 内部所有 nodes 和 edges 的复制功能
+    lf.addElements = (
+      { nodes: selectedNodes, edges: selectedEdges }: GraphConfigData,
+      distance: number,
+    ): {
+      nodes: BaseNodeModel[]
+      edges: BaseEdgeModel[]
+    } => {
+      // ============== 变量初始化 ==============
+      const nodeIdMap: Record<string, string> = {}
+      const elements: any = {
+        nodes: [],
+        edges: [],
+      }
+      const groupInnerEdges: EdgeConfig[] = []
+      // ============== 变量初始化 ==============
+
+      forEach(selectedNodes, (node) => {
+        const preId = node.id
+        const { children, ...rest } = node
+        const nodeModel = lf.addNode(rest)
+        if (!nodeModel) {
+          return {
+            nodes: [],
+            edges: [],
+          }
+        }
+        if (preId) nodeIdMap[preId] = nodeModel.id
+        elements.nodes.push(nodeModel) // group的nodeModel
+
+        // 递归创建group的nodeModel的children
+        const { edgesArray } = this.createAllChildNodes(
+          nodeIdMap,
+          children as Set<string>,
+          nodeModel,
+          distance,
+        )
+        groupInnerEdges.push(...edgesArray)
+      })
+
+      groupInnerEdges.forEach((edge) => {
+        this.createEdgeModel(edge, nodeIdMap, distance)
+      })
+      // 构建的时候直接偏移，这里不需要再进行再度偏移
+      // groupInnerChildren.nodes.forEach(node => this.translationNodeData(node, distance));
+      // groupInnerChildren.edges.forEach(edge => this.translationEdgeData(edge, distance));
+
+      // 最外层的edges继续执行创建edgeModel的流程
+      // 由于最外层会调用translationEdgeData()，因此这里不用传入distance进行偏移
+      forEach(selectedEdges, (edge) => {
+        const edgeModel = this.createEdgeModel(edge, nodeIdMap, 0)
+        elements.edges.push(edgeModel)
+      })
+
+      // 返回elements进行选中效果，即触发element.selectElementById()
+      // shortcut.ts也会对最外层的nodes和edges进行偏移，即translationNodeData()
+      return elements
+    }
+  }
+
+  /**
+   * 创建一个Group类型节点内部的所有子节点的副本
+   * 并且在遍历所有nodes的过程中顺便拿到所有edges（只在Group范围的edges）
+   */
+  createAllChildNodes(
+    nodeIdMap: Record<string, string>,
+    children: Set<string>,
+    current: BaseNodeModel,
+    distance: number,
+  ) {
+    const { lf } = this
+    const edgesDataArray: EdgeConfig[] = []
+    const edgesNodeModelArray: BaseEdgeModel[] = []
+    const nodesArray: BaseNodeModel[] = []
+    children?.forEach((childId: string) => {
+      const childNodeModel = lf.getNodeModelById(childId)
+      if (childNodeModel) {
+        const {
+          x,
+          y,
+          properties,
+          type,
+          text,
+          rotate,
+          children,
+          // incoming,
+          // outgoing,
+        } = childNodeModel
+
+        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,
+        )
+        ;(current as GroupNodeModel).addChild(newChildModel.id)
+        nodeIdMap[childId] = newChildModel.id
+        nodesArray.push(newChildModel)
+        // 存储children内部节点相关的输入边
+        childNodeModel.incoming.edges.forEach((edge) => {
+          edgesNodeModelArray.push(edge)
+        })
+        // 存储children内部节点相关的输出边
+        childNodeModel.outgoing.edges.forEach((edge) => {
+          edgesNodeModelArray.push(edge)
+        })
+
+        if (children instanceof Set) {
+          const { nodesArray: childNodes, edgesArray: childEdges } =
+            this.createAllChildNodes(
+              nodeIdMap,
+              children,
+              newChildModel,
+              distance,
+            )
+          nodesArray.push(...childNodes)
+          edgesDataArray.push(...childEdges)
+        }
+      }
+    })
+    // 1. 判断每一条边的开始节点和目标节点是否在Group中
+    const filterEdgesArray: BaseEdgeModel[] = edgesNodeModelArray.filter(
+      (edge: BaseEdgeModel) =>
+        nodeIdMap[edge.sourceNodeId] && nodeIdMap[edge.targetNodeId],
+    )
+    // 2. 为每一条group的内部边构建出EdgeData数据
+    // 从GraphModel.ts的getSelectElements()可以知道EdgeConfig就是EdgeData
+    const filterEdgesDataArray: EdgeConfig[] = filterEdgesArray.map((item) =>
+      item.getData(),
+    )
+    return {
+      nodesArray,
+      edgesArray: edgesDataArray.concat(filterEdgesDataArray),
+    }
+  }
+
+  createEdgeModel(
+    edge: EdgeConfig,
+    nodeIdMap: Record<string, string>,
+    distance: number,
+  ) {
+    const { lf } = this
+    let sourceId = edge.sourceNodeId
+    let targetId = edge.targetNodeId
+    if (nodeIdMap[sourceId]) sourceId = nodeIdMap[sourceId]
+    if (nodeIdMap[targetId]) targetId = nodeIdMap[targetId]
+    const { type, startPoint, endPoint, pointsList, text } = edge
+    // ====== 仿造shortcut.ts的translationEdgeData()逻辑 ======
+    const newStartPoint = {
+      x: (startPoint?.x || 0) + distance,
+      y: (startPoint?.y || 0) + distance,
+    }
+    const newEndPoint = {
+      x: (endPoint?.x || 0) + distance,
+      y: (endPoint?.y || 0) + distance,
+    }
+    let newPointsList: Point[] = []
+    if (pointsList && pointsList.length > 0) {
+      newPointsList = pointsList.map((point) => {
+        point.x += distance
+        point.y += distance
+        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({
+      type,
+      startPoint: newStartPoint,
+      endPoint: newEndPoint,
+      sourceNodeId: sourceId,
+      targetNodeId: targetId,
+      pointsList: newPointsList,
+      text: newText,
+    })
+  }
+
+  /**
+   * 获取一个节点内部所有的子节点，包裹分组的子节点
+   */
+  getNodeAllChild(model: GroupNodeModel | BaseNodeModel) {
+    let nodeIds: string[] = []
+    if (model.children) {
+      ;(model as GroupNodeModel).children.forEach((nodeId) => {
+        nodeIds.push(nodeId)
+        const nodeModel = this.lf.getNodeModelById(nodeId)
+        if (nodeModel?.isGroup) {
+          nodeIds = nodeIds.concat(this.getNodeAllChild(nodeModel))
+        }
+      })
+    }
+    return nodeIds
+  }
+
+  graphRendered = ({ data }: { data: LogicFlow.GraphData }) => {
+    // 如果节点
+    if (data && data.nodes) {
+      data.nodes.forEach((node) => {
+        if (node.children) {
+          ;(node.children as string[]).forEach((nodeId) => {
+            this.nodeGroupMap.set(nodeId, node.id)
+          })
+        }
+      })
+
+      // 初始化nodes时进行this.topGroupZIndex的校准更新
+      this.checkAndCorrectTopGroupZIndex(data.nodes)
+    }
+  }
+  appendNodeToGroup = ({ data }: { data: NodeData }) => {
+    // 如果这个节点之前已经在group中了，则将其从之前的group中移除
+    const preGroupId = this.nodeGroupMap.get(data.id)
+    if (preGroupId) {
+      const preGroup = this.lf.getNodeModelById(preGroupId) as GroupNodeModel
+      preGroup.removeChild(data.id)
+      this.nodeGroupMap.delete(data.id)
+      preGroup.setAllowAppendChild(false)
+    }
+
+    // 然后再判断这个节点是否在某个group中，如果在，则将其添加到对应的group中
+    const nodeModel = this.lf.getNodeModelById(data.id)
+    const bounds = nodeModel?.getBounds()
+    if (bounds && nodeModel) {
+      const group = this.getGroup(bounds, data) as GroupNodeModel
+
+      // https://github.com/didi/LogicFlow/issues/1261
+      // 当使用SelectionSelect框选后触发lf.addNode(Group)
+      // 会触发appendNodeToGroup()的执行
+      // 由于this.getGroup()会判断node.id !== nodeData.id
+      // 因此当addNode是Group类型时，this.getGroup()会一直返回空
+      // 导致了下面这段代码无法执行，也就是无法将当前添加的Group添加到this.nodeGroupMap中
+      // 这导致了折叠分组时触发的foldEdge()无法正确通过getNodeGroup()拿到正确的groupId
+      // 从而导致折叠分组时一直都会创建一个虚拟边
+      // 而初始化分组时由于正确设置了nodeGroupMap的数据，因此不会产生虚拟边的错误情况
+      if (nodeModel.isGroup) {
+        // 如果这个节点是分组，那么将其子节点也记录下来
+        ;(data.children as Set<string>).forEach((nodeId) => {
+          this.nodeGroupMap.set(nodeId, data.id)
+        })
+        // 新增node时进行this.topGroupZIndex的校准更新
+        this.checkAndCorrectTopGroupZIndex([data])
+        this.nodeSelected({
+          data,
+          isSelected: false,
+          isMultiple: false,
+        })
+      }
+      if (!group) return
+      const isAllowAppendIn = group.isAllowAppendIn(data)
+      if (!isAllowAppendIn) {
+        this.lf.emit('group:not-allowed', {
+          group: group.getData(),
+          node: data,
+        })
+        return
+      }
+      group.addChild(data.id)
+      this.nodeGroupMap.set(data.id, group.id)
+      group.setAllowAppendChild(false)
+    }
+  }
+  deleteGroupChild = ({ data }: { data: NodeData }) => {
+    // 如果删除的是分组节点，则同时删除分组的子节点
+    if (data.children) {
+      ;(data.children as Set<string>).forEach((nodeId) => {
+        this.nodeGroupMap.delete(nodeId)
+        this.lf.deleteNode(nodeId)
+      })
+    }
+    const groupId = this.nodeGroupMap.get(data.id)
+    if (groupId) {
+      const group = this.lf.getNodeModelById(groupId) as GroupNodeModel
+      group.removeChild(data.id)
+      this.nodeGroupMap.delete(data.id)
+    }
+  }
+  setActiveGroup = ({ data }: { data: NodeData }) => {
+    const nodeModel = this.lf.getNodeModelById(data.id)
+    const bounds = nodeModel?.getBounds()
+    if (nodeModel && bounds) {
+      const newGroup = this.getGroup(bounds, data)
+      if (this.activeGroup) {
+        this.activeGroup.setAllowAppendChild(false)
+      }
+      if (!newGroup || (nodeModel.isGroup && newGroup.id === data.id)) return
+      const isAllowAppendIn = (newGroup as GroupNodeModel).isAllowAppendIn(data)
+      if (!isAllowAppendIn) {
+        return
+      }
+      this.activeGroup = newGroup
+      this.activeGroup.setAllowAppendChild(true)
+    }
+  }
+  findNodeAndChildMaxZIndex = (nodeModel: BaseNodeModel) => {
+    let maxZIndex = DEFAULT_BOTTOM_Z_INDEX
+    if (nodeModel.isGroup) {
+      maxZIndex = Math.max(maxZIndex, nodeModel.zIndex)
+    }
+    if (nodeModel.children) {
+      ;(nodeModel as GroupNodeModel).children.forEach((nodeId) => {
+        if (typeof nodeId === 'object') {
+          // 正常情况下, GroupNodeModel.children是一个id数组，这里只是做个兼容
+          // @ts-ignore
+          nodeId = nodeId.id
+        }
+        const child = this.lf.getNodeModelById(nodeId)
+        if (child?.isGroup) {
+          const childMaxZIndex = this.findNodeAndChildMaxZIndex(child)
+          maxZIndex = Math.max(childMaxZIndex, maxZIndex)
+        }
+      })
+    }
+    return maxZIndex
+  }
+  checkAndCorrectTopGroupZIndex = (nodes: NodeData[]) => {
+    // 初始化时/增加新节点时，找出新增nodes的最大zIndex
+    let maxZIndex = DEFAULT_BOTTOM_Z_INDEX
+    nodes.forEach((node: NodeData) => {
+      const nodeModel = this.lf.getNodeModelById(node.id)
+      if (nodeModel) {
+        const currentNodeMaxZIndex = this.findNodeAndChildMaxZIndex(nodeModel)
+        if (currentNodeMaxZIndex > maxZIndex) {
+          maxZIndex = currentNodeMaxZIndex
+        }
+      }
+    })
+
+    if (this.topGroupZIndex >= maxZIndex) {
+      // 一般是初始化时/增加新节点时发生，因为外部强行设置了一个很大的zIndex
+      // 删除节点不会影响目前最高zIndex的赋值
+      return
+    }
+    // 新增nodes中如果存在zIndex比this.topGroupZIndex大
+    // 说明this.topGroupZIndex已经失去意义，代表不了目前最高zIndex的group，需要重新校准
+
+    // https://github.com/didi/LogicFlow/issues/1535
+    // 当外部直接设置多个BaseNode.zIndex=1时
+    // 当点击某一个node时，由于这个this.topGroupZIndex是从-10000开始计算的，this.topGroupZIndex+1也就是-9999
+    // 这就造成当前点击的node的zIndex远远比其它node的zIndex小，因此造成zIndex错乱问题
+    const allGroupNodes = this.lf.graphModel.nodes.filter(
+      (node: BaseNodeModel) => node.isGroup,
+    )
+    let max = this.topGroupZIndex
+    for (let i = 0; i < allGroupNodes.length; i++) {
+      const groupNode = allGroupNodes[i]
+      if (groupNode.zIndex > max) {
+        max = groupNode.zIndex
+      }
+    }
+    this.topGroupZIndex = max
+  }
+  /**
+   * 1. 分组节点默认在普通节点下面。
+   * 2. 分组节点被选中后，会将分组节点以及其内部的其他分组节点放到其余分组节点的上面。
+   * 3. 分组节点取消选中后，不会将分组节点重置为原来的高度。
+   * 4. 由于LogicFlow核心目标是支持用户手动绘制流程图，所以不考虑一张流程图超过1000个分组节点的情况。
+   */
+  nodeSelected = ({
+    data,
+    isMultiple,
+    isSelected,
+  }: {
+    data: NodeData
+    isMultiple: boolean
+    isSelected: boolean
+  }) => {
+    const nodeModel = this.lf.getNodeModelById(data.id)
+    this.toFrontGroup(nodeModel)
+    // 重置所有的group zIndex,防止group节点zIndex增长为正。
+    if (this.topGroupZIndex > DEFAULT_TOP_Z_INDEX) {
+      this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX
+      const allGroups = this.lf.graphModel.nodes
+        .filter((node) => node.isGroup)
+        .sort((a, b) => a.zIndex - b.zIndex)
+      let preZIndex = 0
+      for (let i = 0; i < allGroups.length; i++) {
+        const group = allGroups[i]
+        if (group.zIndex !== preZIndex) {
+          this.topGroupZIndex++
+          preZIndex = group.zIndex
+        }
+        group.setZIndex(this.topGroupZIndex)
+      }
+    }
+    // FIX #1004
+    // 如果节点被多选，
+    // 这个节点是分组，则将分组的所有子节点取消选中
+    // 这个节点是分组的子节点，且其所属分组节点已选，则取消选中
+    if (isMultiple && isSelected) {
+      if (nodeModel?.isGroup) {
+        ;(nodeModel as GroupNodeModel).children.forEach((child) => {
+          const childModel = this.lf.graphModel.getElement(child)
+          childModel?.setSelected(false)
+        })
+      } else {
+        const groupId = this.nodeGroupMap.get(data.id)
+        if (groupId) {
+          const groupModel = this.lf.getNodeModelById(groupId)
+          groupModel?.isSelected && nodeModel?.setSelected(false)
+        }
+      }
+    }
+  }
+  toFrontGroup = (model?: BaseNodeModel) => {
+    if (!model || !model.isGroup) {
+      return
+    }
+    this.topGroupZIndex++
+    model.setZIndex(this.topGroupZIndex)
+    if (model.children) {
+      ;(model as GroupNodeModel).children.forEach((nodeId) => {
+        const node = this.lf.getNodeModelById(nodeId)
+        this.toFrontGroup(node)
+      })
+    }
+  }
+
+  /**
+   * 获取自定位置其所属分组
+   * 当分组重合时，优先返回最上层的分组
+   */
+  getGroup(
+    bounds: BoxBoundsPoint,
+    nodeData: NodeData,
+  ): BaseNodeModel | undefined {
+    const { nodes } = this.lf.graphModel
+    const groups = nodes.filter(
+      (node) =>
+        node.isGroup &&
+        (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]
+    for (let i = groups.length - 2; i >= 0; i--) {
+      if (groups[i].zIndex > topGroup.zIndex) {
+        topGroup = groups[i]
+      }
+    }
+    return topGroup
+  }
+
+  /**
+   * 获取某个节点所属的groupModel
+   */
+  getNodeGroup(nodeId: string) {
+    const groupId = this.nodeGroupMap.get(nodeId)
+    if (groupId) {
+      return this.lf.getNodeModelById(groupId)
+    }
+  }
+
+  render() {}
+  destroy() {}
+}
+
+export * from './GroupNode'
+export default GroupNode