fix(extension): 【dynamic-group】DynamicGroup 使用 moveNode 进行移动时子节点没有跟随移动

examples/engine-browser-examples/src/pages/extension/dynamic-group/index.tsx

@@ -87,6 +87,24 @@ export default function DynamicGroupDemo() {
         ...config,
         container: containerRef.current as HTMLElement,
       })
+      ;(lf.extension.control as Control).addItem({
+        key: 'move-group',
+        iconClass: 'custom-minimap',
+        title: '',
+        text: '右移分组',
+        onClick: (lf) => {
+          const { nodes } = lf.getSelectElements()
+          const selectedNode = nodes[0]
+          if (!selectedNode) {
+            return
+          }
+          const isGroup = lf.getModelById(selectedNode.id)?.isGroup
+          if (!isGroup) {
+            return
+          }
+          lf.graphModel.moveNode(selectedNode.id, 10, 0)
+        },
+      })
 
       const dndPanelConfig = getDndPanelConfig(lf)
       lf.setPatternItems(dndPanelConfig)
@@ -161,12 +179,13 @@ export default function DynamicGroupDemo() {
             text: 'dynamic-group_2',
             resizable: true,
             properties: {
+              transformWithContainer: false,
               width: 420,
               height: 250,
               radius: 5,
               collapsible: false,
               isCollapsed: false,
-              isRestrict: true,
+              isRestrict: false,
               children: ['rect_1'],
             },
           },

packages/extension/src/components/selection-select/index.ts

@@ -166,18 +166,20 @@ export class SelectionSelect {
         true,
       )
       const { dynamicGroup, group } = this.lf.graphModel
+      const nonGroupedElements: typeof elements = []
       elements.forEach((element) => {
         // 如果节点属于分组，则不选中节点，此处兼容旧版 Group 插件
-        if (!group || !group.getNodeGroup(element.id)) {
-          this.lf.selectElementById(element.id, true)
+        if (group && group.getNodeGroup(element.id)) {
+          return
         }
-        // 如果节点属于动态分组，则不不选中节点
-        if (!dynamicGroup || !dynamicGroup.getGroupByNodeId(element.id)) {
-          this.lf.selectElementById(element.id, true)
+        if (dynamicGroup && dynamicGroup.getGroupByNodeId(element.id)) {
+          return
         }
+        this.lf.selectElementById(element.id, true)
+        nonGroupedElements.push(element)
       })
       this.lf.emit('selection:selected', {
-        elements,
+        elements: nonGroupedElements,
         leftTopPoint: lt,
         rightBottomPoint: rb,
       })

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

@@ -181,6 +181,34 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
     return data
   }
 
+  /**
+   * 获取分组内的节点
+   * @param groupModel
+   */
+  getNodesInGroup(groupModel: DynamicGroupNodeModel): string[] {
+    const nodeIds: string[] = []
+    if (groupModel.isGroup) {
+      forEach(Array.from(groupModel.children), (nodeId: string) => {
+        nodeIds.push(nodeId)
+      })
+    }
+    return nodeIds
+  }
+  getMoveDistance(
+    deltaX: number,
+    deltaY: number,
+    isIgnoreRule = false,
+  ): [number, number] {
+    const [moveDeltaX, moveDeltaY] = super.getMoveDistance(
+      deltaX,
+      deltaY,
+      isIgnoreRule,
+    )
+    const nodeIds = this.getNodesInGroup(this)
+    this.graphModel.moveNodes(nodeIds, deltaX, deltaY, isIgnoreRule)
+    return [moveDeltaX, moveDeltaY]
+  }
+
   /**
    * 重写 getHistoryData 方法
    */

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

@@ -106,24 +106,27 @@ export class DynamicGroupNode<
     }
   }
 
-  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)
+  onNodeMouseMove = () =>
+    // {
+    // deltaX,
+    // deltaY,
+    // data,
+    // }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>
+    {
+      // console.log(data,deltaX,deltaY,'111')
+      // 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