fix(extension): 【dynamic-group】修复resize和move的冲突问题(#1826)

packages/extension/src/dynamic-group/index.ts

@@ -50,27 +50,6 @@ export class DynamicGroup {
     this.init()
   }
 
-  /**
-   * 获取分组内的节点
-   * @param groupModel
-   */
-  getNodesInGroup(groupModel: DynamicGroupNodeModel): string[] {
-    let nodeIds: string[] = []
-    if (groupModel.isGroup) {
-      forEach(Array.from(groupModel.children), (nodeId: string) => {
-        nodeIds.push(nodeId)
-
-        const nodeModel = this.lf.getNodeModelById(nodeId)
-        if (nodeModel?.isGroup) {
-          nodeIds = nodeIds.concat(
-            this.getNodesInGroup(nodeModel as DynamicGroupNodeModel),
-          )
-        }
-      })
-    }
-    return nodeIds
-  }
-
   /**
    * 获取节点所属的分组
    * @param nodeId
@@ -492,8 +471,13 @@ export class DynamicGroup {
     graphModel.addNodeMoveRules((model, deltaX, deltaY) => {
       // 判断如果是 group，移动时需要同时移动组内的所有节点
       if (model.isGroup) {
-        const nodeIds = this.getNodesInGroup(model as DynamicGroupNodeModel)
-        graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
+        // https://github.com/didi/LogicFlow/issues/1826
+        // 这里不应该触发移动子节点的逻辑，这里是判断是否可以移动，而不是触发移动逻辑
+        // 而且这里触发移动，会导致resize操作的this.x变动也会触发子item的this.x变动
+        // resize时的deltaX跟正常移动的deltaX是不同的
+
+        // const nodeIds = this.getNodesInGroup(model as DynamicGroupNodeModel)
+        // graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
         return true
       }
 
@@ -503,7 +487,7 @@ export class DynamicGroup {
       ) as DynamicGroupNodeModel
 
       if (groupModel && groupModel.isRestrict) {
-        // 如果移动的节点存在与分组中，且这个分组禁止子节点移出去
+        // 如果移动的节点存在于某个分组中，且这个分组禁止子节点移出去
         const groupBounds = groupModel.getBounds()
         return isAllowMoveTo(groupBounds, model, deltaX, deltaY)
       }

packages/extension/src/dynamic-group/node.ts

@@ -1,7 +1,11 @@
-import LogicFlow, { GraphModel, h, RectNode } from '@logicflow/core'
+import LogicFlow, {
+  GraphModel,
+  h,
+  RectNode,
+  handleResize,
+} from '@logicflow/core'
 import { forEach } from 'lodash-es'
 import { DynamicGroupNodeModel } from './model'
-import { handleResize } from '@logicflow/core/es/util/resize'
 
 import Position = LogicFlow.Position
 import { rotatePointAroundCenter } from '../tools/label/utils'
@@ -53,27 +57,73 @@ export class DynamicGroupNode<
     })
 
     // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
-    eventCenter.on('node:resize', ({ deltaX, deltaY, index, model }) => {
-      // TODO: 目前 Resize 的比例值有问题，导致缩放时，节点会变形，需要修复
-      if (model.id === curGroup.id) {
-        forEach(Array.from(curGroup.children), (childId) => {
-          const child = graphModel.getNodeModelById(childId)
-          if (child) {
-            // child.rotate = model.rotate
-            handleResize({
-              deltaX,
-              deltaY,
-              index,
-              nodeModel: child,
-              graphModel,
-              cancelCallback: () => {},
-            })
-          }
-        })
+    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: () => {},
+              })
+            }
+          })
+        }
+      },
+    )
+
+    // 在 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)
       }
     })
   }
 
+  /**
+   * 获取分组内的节点
+   * @param groupModel
+   */
+  getNodesInGroup(
+    groupModel: DynamicGroupNodeModel,
+    graphModel: GraphModel,
+  ): string[] {
+    let nodeIds: string[] = []
+    if (groupModel.isGroup) {
+      forEach(Array.from(groupModel.children), (nodeId: string) => {
+        nodeIds.push(nodeId)
+
+        const nodeModel = graphModel.getNodeModelById(nodeId)
+        if (nodeModel?.isGroup) {
+          nodeIds = nodeIds.concat(
+            this.getNodesInGroup(
+              nodeModel as DynamicGroupNodeModel,
+              graphModel,
+            ),
+          )
+        }
+      })
+    }
+    return nodeIds
+  }
+
   getResizeControl(): h.JSX.Element | null {
     const { resizable, isCollapsed } = this.props.model
     const showResizeControl = resizable && !isCollapsed