@logicflow/extension 2.0.10 → 2.0.11

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)
   }
 
   /**