@logicflow/extension 2.0.9 → 2.0.11

package/src/dynamic-group/index.ts

@@ -339,6 +339,72 @@ export class DynamicGroup {
     }
   }
 
+  onNodeMove = ({
+    deltaX,
+    deltaY,
+    data,
+  }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => {
+    const { id, x, y, properties } = data
+    if (!properties) {
+      return
+    }
+    const { width, height } = properties
+    const groupId = this.nodeGroupMap.get(id)
+    if (!groupId) {
+      return
+    }
+    const groupModel = this.lf.getNodeModelById(
+      groupId,
+    ) as DynamicGroupNodeModel
+
+    if (!groupModel || !groupModel.isRestrict || !groupModel.autoResize) {
+      return
+    }
+    // 当父节点isRestrict=true & autoResize=true
+    // 子节点在父节点中移动时，父节点会自动调整大小
+
+    // step1: 计算出当前child的bounds
+    const newX = x + deltaX / 2
+    const newY = y + deltaY / 2
+    const minX = newX - width! / 2
+    const minY = newY - height! / 2
+    const maxX = newX + width! / 2
+    const maxY = newY + height! / 2
+    // step2：比较当前child.bounds与parent.bounds的差异，比如child.minX<parent.minX，那么parent.minX=child.minX
+    let hasChange = false
+    const groupBounds = groupModel.getBounds()
+    const newGroupBounds = Object.assign({}, groupBounds)
+    if (minX < newGroupBounds.minX) {
+      newGroupBounds.minX = minX
+      hasChange = true
+    }
+    if (minY < newGroupBounds.minY) {
+      newGroupBounds.minY = minY
+      hasChange = true
+    }
+    if (maxX > newGroupBounds.maxX) {
+      newGroupBounds.maxX = maxX
+      hasChange = true
+    }
+    if (maxY > newGroupBounds.maxY) {
+      newGroupBounds.maxY = maxY
+      hasChange = true
+    }
+    if (!hasChange) {
+      return
+    }
+    // step3: 根据当前parent.bounds去计算出最新的x、y、width、height
+    const newGroupX =
+      newGroupBounds.minX + (newGroupBounds.maxX - newGroupBounds.minX) / 2
+    const newGroupY =
+      newGroupBounds.minY + (newGroupBounds.maxY - newGroupBounds.minY) / 2
+    const newGroupWidth = newGroupBounds.maxX - newGroupBounds.minX
+    const newGroupHeight = newGroupBounds.maxY - newGroupBounds.minY
+    groupModel.moveTo(newGroupX, newGroupY)
+    groupModel.width = newGroupWidth
+    groupModel.height = newGroupHeight
+  }
+
   onGraphRendered = ({ data }: CallbackArgs<'graph:rendered'>) => {
     console.log('data', data)
     forEach(data.nodes, (node) => {
@@ -451,6 +517,56 @@ export class DynamicGroup {
     })
   }
 
+  /**
+   * 检测group:resize后的bounds是否会小于children的bounds
+   * 限制group进行resize时不能小于内部的占地面积
+   * @param groupModel
+   * @param deltaX
+   * @param deltaY
+   * @param newWidth
+   * @param newHeight
+   */
+  checkGroupBoundsWithChildren(
+    groupModel: DynamicGroupNodeModel,
+    deltaX: number,
+    deltaY: number,
+    newWidth: number,
+    newHeight: number,
+  ) {
+    if (groupModel.children) {
+      const { children, x, y } = groupModel
+      // 根据deltaX和deltaY计算出当前model的bounds
+      const newX = x + deltaX / 2
+      const newY = y + deltaY / 2
+      const groupMinX = newX - newWidth / 2
+      const groupMinY = newY - newHeight / 2
+      const groupMaxX = newX + newWidth / 2
+      const groupMaxY = newY + newHeight / 2
+
+      const childrenArray = Array.from(children)
+      for (let i = 0; i < childrenArray.length; i++) {
+        const childId = childrenArray[i]
+        const child = this.lf.getNodeModelById(childId)
+        if (!child) {
+          continue
+        }
+        const childBounds = child.getBounds()
+        const { minX, minY, maxX, maxY } = childBounds
+        // parent:resize后的bounds不能小于child:bounds，否则阻止其resize
+        const canResize =
+          groupMinX <= minX &&
+          groupMinY <= minY &&
+          groupMaxX >= maxX &&
+          groupMaxY >= maxY
+        if (!canResize) {
+          return false
+        }
+      }
+    }
+
+    return true
+  }
+
   /**
    * Group 插件的初始化方法
    * TODO：1. 待讨论，可能之前插件分类是有意义的 components, material, tools
@@ -487,19 +603,45 @@ export class DynamicGroup {
       ) as DynamicGroupNodeModel
 
       if (groupModel && groupModel.isRestrict) {
-        // 如果移动的节点存在于某个分组中，且这个分组禁止子节点移出去
-        const groupBounds = groupModel.getBounds()
-        return isAllowMoveTo(groupBounds, model, deltaX, deltaY)
+        if (groupModel.autoResize) {
+          // 子节点在父节点中移动时，父节点会自动调整大小
+          // 在node:mousemove中进行父节点的调整
+          return true
+        } else {
+          // 如果移动的节点存在于某个分组中，且这个分组禁止子节点移出去
+          const groupBounds = groupModel.getBounds()
+          return isAllowMoveTo(groupBounds, model, deltaX, deltaY)
+        }
       }
 
       return true
     })
+
+    // https://github.com/didi/LogicFlow/issues/1442
+    // https://github.com/didi/LogicFlow/issues/937
+    // 添加分组节点resize规则
+    // isRestrict限制模式下，当前model resize时不能小于children的占地面积
+    // 并且在isRestrict限制模式下，transformWidthContainer即使设置为true，也无效
+    graphModel.addNodeResizeRules((model, deltaX, deltaY, width, height) => {
+      if (model.isGroup && model.isRestrict) {
+        return this.checkGroupBoundsWithChildren(
+          model as DynamicGroupNodeModel,
+          deltaX,
+          deltaY,
+          width,
+          height,
+        )
+      }
+      return true
+    })
+
     graphModel.dynamicGroup = this
 
     lf.on('node:add,node:drop,node:dnd-add', this.addNodeToGroup)
     lf.on('node:delete', this.removeNodeFromGroup)
     lf.on('node:drag,node:dnd-drag', this.setActiveGroup)
     lf.on('node:click', this.onNodeSelect)
+    lf.on('node:mousemove', this.onNodeMove)
     lf.on('graph:rendered', this.onGraphRendered)
 
     lf.on('graph:updated', ({ data }) => console.log('data', data))
@@ -568,6 +710,7 @@ export class DynamicGroup {
     this.lf.off('node:delete', this.removeNodeFromGroup)
     this.lf.off('node:drag,node:dnd-drag', this.setActiveGroup)
     this.lf.off('node:click', this.onNodeSelect)
+    this.lf.off('node:mousemove', this.onNodeMove)
     this.lf.off('graph:rendered', this.onGraphRendered)
 
     // 还原 lf.addElements 方法？

package/src/dynamic-group/model.ts

@@ -49,6 +49,11 @@ export type IGroupNodeProperties = {
   // expandWidth?: number
   // expandHeight?: number
 
+  /**
+   * 缩放或旋转容器时，是否缩放或旋转组内节点
+   */
+  transformWithContainer?: boolean
+
   /**
    * 当前分组元素的 zIndex
    */
@@ -79,6 +84,8 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
   children!: Set<string>
   // 是否限制组内节点的移动范围。默认不限制 TODO: 完善该功能
   isRestrict: boolean = false
+  // isRestrict 模式启用时，如果同时设置 autoResize 为 true，那么子节点在父节点中移动时，父节点会自动调整大小
+  autoResize: boolean = false
   // 分组节点是否可以折叠
   collapsible: boolean = true
 
@@ -94,7 +101,7 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
   // 当前分组是否在可添加状态 - 实时状态
   @observable groupAddable: boolean = false
   // 缩放或旋转容器时，是否缩放或旋转组内节点
-  @observable transformWidthContainer: boolean = true
+  @observable transformWithContainer: boolean = false
   childrenLastCollapseStateDict: Map<string, boolean> = new Map()
 
   constructor(data: NodeConfig<IGroupNodeProperties>, graphModel: GraphModel) {
@@ -121,6 +128,7 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
       isRestrict,
       autoResize,
       autoToFront,
+      transformWithContainer,
     } = data.properties ?? {}
 
     this.children = children ? new Set(children) : new Set()
@@ -139,6 +147,7 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
     this.collapsedHeight = collapsedHeight ?? DEFAULT_GROUP_COLLAPSE_HEIGHT
 
     this.isRestrict = isRestrict ?? false
+    this.transformWithContainer = transformWithContainer ?? false
     this.autoResize = autoResize ?? false
     this.collapsible = collapsible ?? true
     this.autoToFront = autoToFront ?? false
@@ -150,11 +159,6 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
 
   setAttributes() {
     super.setAttributes()
-
-    // 初始化时，如果 this.isCollapsed 为 true，则主动触发一次折叠操作
-    if (this.isCollapsed) {
-      this.toggleCollapse(true)
-    }
   }
 
   getData(): NodeData {
@@ -195,8 +199,15 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
       isCollapsed,
     } = this
     if (isCollapsed) {
+      // 如果当前是折叠模式
+      // 存入history的时候，将坐标恢复到未折叠前的坐标数据
+      // 因为拿出history数据的时候，会触发collapse()进行坐标的折叠计算
       data.x = x + expandWidth / 2 - collapsedWidth / 2
       data.y = y + expandHeight / 2 - collapsedHeight / 2
+      if (data.text) {
+        data.text.x = data.text.x + expandWidth / 2 - collapsedWidth / 2
+        data.text.y = data.text.y + expandHeight / 2 - collapsedHeight / 2
+      }
     }
     return data
   }
@@ -429,8 +440,8 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
    * TODO: 如何重写该方法呢？
    * @param _nodeData
    */
+  // eslint-disable-next-line
   isAllowAppendIn(_nodeData: NodeData) {
-    console.info('_nodeData', _nodeData)
     // TODO: 此处使用 this.properties.groupAddable 还是 this.groupAddable
     // this.groupAddable 是否存在更新不及时的问题
     return true

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,83 +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 }) => {
-      // 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 }) => {
-        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: () => {},
-              })
-            }
+          // 弧度转角度
+          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
+        }
+      })
+    }
+  }
+
+  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)
   }
 
   /**