@logicflow/extension 2.0.11 → 2.0.13

package/src/components/mini-map/index.ts

@@ -195,6 +195,14 @@ export class MiniMap {
     this.elementAreaBounds = boundsInit
     this.viewPortBounds = boundsInit
     this.initMiniMap()
+    lf.on('graph:resize', this.onGraphResize)
+  }
+
+  onGraphResize = () => {
+    this.updateViewPortBounds()
+    if (this.isShow) {
+      this.updateViewPort()
+    }
   }
 
   render = (_: LogicFlow, container: HTMLElement) => {
@@ -661,6 +669,9 @@ export class MiniMap {
       },
     })
   }
+  destroy() {
+    this.lf.off('graph:resize', this.onGraphResize)
+  }
 }
 
 export default MiniMap

package/src/dynamic-group/index.ts

@@ -86,7 +86,9 @@ export class DynamicGroup {
     } else {
       let topZIndexGroup = groups[count - 1]
       for (let i = count - 2; i >= 0; i--) {
-        topZIndexGroup = groups[i]
+        if (groups[i].zIndex > topZIndexGroup.zIndex) {
+          topZIndexGroup = groups[i]
+        }
       }
       return topZIndexGroup as DynamicGroupNodeModel
     }
@@ -240,8 +242,11 @@ export class DynamicGroup {
     }
   }
 
-  removeNodeFromGroup = ({ data: node }: CallbackArgs<'node:delete'>) => {
-    if (node.isGroup && node.children) {
+  removeNodeFromGroup = ({
+    data: node,
+    model,
+  }: CallbackArgs<'node:delete'>) => {
+    if (model.isGroup && node.children) {
       forEach(
         Array.from((node as DynamicGroupNodeModel).children),
         (childId) => {
@@ -420,6 +425,17 @@ export class DynamicGroup {
     this.calibrateTopGroupZIndex(data.nodes)
   }
 
+  removeChildrenInGroupNodeData<
+    T extends LogicFlow.NodeData | LogicFlow.NodeConfig,
+  >(nodeData: T) {
+    const newNodeData = cloneDeep(nodeData)
+    delete newNodeData.children
+    if (newNodeData.properties?.children) {
+      delete newNodeData.properties.children
+    }
+    return newNodeData
+  }
+
   /**
    * 创建一个 Group 类型节点内部所有子节点的副本
    * 并且在遍历所有 nodes 的过程中，顺便拿到所有 edges (只在 Group 范围的 edges)
@@ -440,10 +456,14 @@ export class DynamicGroup {
     forEach(Array.from(children), (childId: string) => {
       const childNode = this.lf.getNodeModelById(childId)
       if (childNode) {
+        const childNodeChildren = childNode.children
         const childNodeData = childNode.getData()
         const eventType = EventType.NODE_GROUP_COPY || 'node:group-copy-add'
 
-        const newNodeConfig = transformNodeData(childNodeData, distance)
+        const newNodeConfig = transformNodeData(
+          this.removeChildrenInGroupNodeData(childNodeData),
+          distance,
+        )
         const tempChildNode = this.lf.addNode(newNodeConfig, eventType)
         curGroup.addChild(tempChildNode.id)
 
@@ -455,10 +475,10 @@ export class DynamicGroup {
           ...[...tempChildNode.incoming.edges, ...tempChildNode.outgoing.edges],
         )
 
-        if (children instanceof Set) {
+        if (childNodeChildren instanceof Set) {
           const { childNodes, edgesData } = this.initGroupChildNodes(
             nodeIdMap,
-            children,
+            childNodeChildren,
             tempChildNode as DynamicGroupNodeModel,
             distance,
           )
@@ -667,8 +687,9 @@ export class DynamicGroup {
 
       forEach(selectedNodes, (node) => {
         const originId = node.id
-        const { children, ...rest } = node
-        const model = lf.addNode(rest)
+        const children = node.properties?.children ?? node.children
+
+        const model = lf.addNode(this.removeChildrenInGroupNodeData(node))
 
         if (originId) nodeIdMap[originId] = model.id
         elements.nodes.push(model) // 此时为 group 的 nodeModel

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);

package/src/tools/label/Label.tsx

@@ -25,6 +25,7 @@ export interface ILabelState {
   isEditing: boolean
   isHovered: boolean
   isDragging: boolean
+  isSelected: boolean
 }
 
 @observer
@@ -52,6 +53,7 @@ export class Label extends Component<ILabelProps, ILabelState> {
       isEditing: false,
       isHovered: false,
       isDragging: false,
+      isSelected: false,
     }
   }
 
@@ -75,35 +77,34 @@ export class Label extends Component<ILabelProps, ILabelState> {
     const {
       editConfigModel: { nodeTextDraggable },
     } = graphModel
-
-    // 当 label 允许拖拽 且不处于拖拽状态时， StepDrag 开启拖拽
-    if ((label.draggable ?? nodeTextDraggable) && !this.state.isDragging) {
-      this.setState({ isDragging: true })
+    // 当 label 允许拖拽 且不处于拖拽状态、不处于编辑状态时， StepDrag 开启拖拽
+    if (
+      (label.draggable ?? nodeTextDraggable) &&
+      !this.state.isDragging &&
+      !this.state.isEditing
+    ) {
       this.stepDrag.handleMouseDown(e)
     }
   }
+  handleMouseUp = (e: MouseEvent) => {
+    if (this.state.isDragging) {
+      this.stepDrag.handleMouseUp(e)
+    }
+  }
   handleDragging = ({ deltaX, deltaY }: IDragParams) => {
-    const { label, element, graphModel } = this.props
+    if (!this.state.isDragging) {
+      this.setState({ isDragging: true })
+    }
+    const { label, graphModel } = this.props
 
     // DONE: 添加缩放时拖拽的逻辑，对 deltaX 和 deltaY 进行按比例缩放
     const { transformModel } = graphModel
     const [curDeltaX, curDeltaY] = transformModel.fixDeltaXY(deltaX, deltaY)
 
-    // DONE：更新 label 位置，触发 LABEL:DRAG 事件，并抛出相关的数据
-    const {
-      properties: { _label },
-    } = element
-    const elementLabel = _label as LabelConfig[]
-    const idx = findIndex(elementLabel, (cur) => cur.id === label.id)
-
-    const target = elementLabel[idx]
-    elementLabel[idx] = {
-      ...target,
-      x: target.x + curDeltaX,
-      y: target.y + curDeltaY,
-    }
-    const targetElem = graphModel.getElement(element.id)
-    targetElem?.setProperty('_label', elementLabel)
+    this.setElementModelLabelInfo({
+      x: label.x + curDeltaX,
+      y: label.y + curDeltaY,
+    })
 
     graphModel.eventCenter.emit('label:drag', {
       data: label.getData(),
@@ -114,6 +115,21 @@ export class Label extends Component<ILabelProps, ILabelState> {
     this.setState({ isDragging: false })
   }
 
+  handleClick = (e: MouseEvent) => {
+    const { label, element, graphModel } = this.props
+    // 更新当前Label选中状态
+    element.setSelected(!this.state.isSelected)
+    this.setState({ isSelected: !this.state.isSelected })
+    this.setElementModelLabelInfo({
+      isSelected: true,
+    })
+    graphModel.eventCenter.emit('label:click', {
+      data: label.getData(),
+      e,
+      model: element,
+    })
+  }
+
   handleDbClick = (e: MouseEvent) => {
     const { label, element, graphModel } = this.props
     graphModel.eventCenter.emit('label:dblclick', {
@@ -162,9 +178,28 @@ export class Label extends Component<ILabelProps, ILabelState> {
     this.setState({
       isDragging: false,
       isHovered: false,
+      isSelected: false,
     })
   }
 
+  setElementModelLabelInfo(data) {
+    const { label, element, graphModel } = this.props
+    const {
+      properties: { _label },
+    } = element
+    const elementLabel = _label as LabelConfig[]
+    const idx = findIndex(elementLabel, (cur) => cur.id === label.id)
+
+    const target = elementLabel[idx]
+    elementLabel[idx] = {
+      ...target,
+      ...data,
+    }
+
+    const targetElem = graphModel.getElement(element.id)
+    targetElem?.setProperty('_label', elementLabel)
+  }
+
   // 重新计算 Label 大小
   reCalcLabelSize = () => {}
 
@@ -175,37 +210,49 @@ export class Label extends Component<ILabelProps, ILabelState> {
     const { label, element, graphModel } = this.props
 
     // 在点击元素、边或者画布 时，结束 Label 的编辑态
-    graphModel.eventCenter.on('blank:click,node:click,edge:click', () => {
-      // 如果当前 label 处于编辑态，则结束编辑态
-      if (this.state.isEditing) {
-        this.setState({ isEditing: false })
-
-        const value = this.textRef.current?.innerText ?? ''
-        const content = this.textRef.current?.innerHTML ?? ''
-
-        const {
-          properties: { _label },
-        } = element
-        const elementLabel = _label as LabelConfig[]
-        const idx = findIndex(elementLabel, (cur) => cur.id === label.id)
-
-        const target = elementLabel[idx]
-        elementLabel[idx] = {
-          ...target,
-          value,
-          content,
+    graphModel.eventCenter.on(
+      'blank:click,node:click,edge:click,label:click',
+      ({ data }) => {
+        // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 处于选中态
+        // 则取消选中态
+        if (
+          data?.type !== 'label' ||
+          (data.type === 'label' && data.id !== label.id) ||
+          this.state.isSelected
+        ) {
+          this.setState({ isSelected: false })
         }
-
-        const targetElem = graphModel.getElement(element.id)
-        targetElem?.setProperty('_label', elementLabel)
-
-        element.setElementState(ElementState.DEFAULT)
-      }
-      if (this.textRef.current) {
-        this.textRef.current.contentEditable = 'false'
-      }
-    })
-
+        // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 处于编辑态
+        // 则结束编辑态
+        if (
+          (data?.type !== 'label' ||
+            (data.type == 'label' && data.id !== label.id)) &&
+          this.state.isEditing
+        ) {
+          this.setState({ isEditing: false })
+
+          const value = this.textRef.current?.innerText ?? ''
+          const content = this.textRef.current?.innerHTML ?? ''
+
+          this.setElementModelLabelInfo({
+            value,
+            content,
+            isSelected: false,
+          })
+
+          element.setElementState(ElementState.DEFAULT)
+        }
+        // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 的文本DOM存在
+        // 则结束文本DOM的编辑态
+        if (
+          (data?.type !== 'label' ||
+            (data.type == 'label' && data.id !== label.id)) &&
+          this.textRef.current
+        ) {
+          this.textRef.current.contentEditable = 'false'
+        }
+      },
+    )
     // TODO: 节点拖拽结束后，更新 Label 的位置
     // eventCenter.on('node:drag', () => {})
     // eventCenter.on('node:drop', () => {})
@@ -216,7 +263,7 @@ export class Label extends Component<ILabelProps, ILabelState> {
 
   componentDidUpdate() {
     // snapshot: any, // previousState: Readonly<ILabelState>, // previousProps: Readonly<ILabelProps>,
-    console.log('Label componentDidUpdate')
+    // console.log('Label componentDidUpdate')
     // console.log('previousProps', previousProps)
     // console.log('previousState', previousState)
     // console.log('snapshot', snapshot)
@@ -232,7 +279,7 @@ export class Label extends Component<ILabelProps, ILabelState> {
 
   render() {
     const { label, element, graphModel } = this.props
-    const { isDragging, isHovered, isEditing } = this.state
+    const { isDragging, isHovered, isSelected, isEditing } = this.state
     const { transformModel } = graphModel
     const { transform } = transformModel.getTransformStyle()
     const {
@@ -260,13 +307,14 @@ export class Label extends Component<ILabelProps, ILabelState> {
         ? `${transform} rotate(${rotate}deg)`
         : `${transform} rotate(${vertical ? -0.25 : 0}turn)`,
     }
-
     return (
       <div
         id={`element-container-${id}`}
         className={classNames('lf-label-editor-container')}
         style={containerStyle}
         onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}
+        onClick={this.handleClick}
         onDblClick={this.handleDbClick}
         onBlur={this.handleBlur}
         onMouseEnter={this.setHoverOn}
@@ -279,12 +327,15 @@ export class Label extends Component<ILabelProps, ILabelState> {
           className={classNames('lf-label-editor', {
             'lf-label-editor-dragging': isDragging,
             'lf-label-editor-editing': isEditing,
-            'lf-label-editor-hover': !isEditing && isHovered,
+            'lf-label-editor-hover': !isEditing && (isHovered || isSelected),
             [`lf-label-editor-${textOverflowMode}`]: !isEditing,
           })}
           style={{
             maxWidth: `${maxLabelWidth}px`,
-            width: `${maxLabelWidth}px`,
+            boxSizing: 'border-box',
+            display: 'inline-block',
+            background:
+              isEditing || element.BaseType === 'edge' ? '#fff' : 'transparent',
             ...style,
           }}
           dangerouslySetInnerHTML={{ __html: content }}