fix(extension): dynamic-group 的 addChild 没有处理 nodeGroupMap

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

@@ -105,6 +105,17 @@ export default function DynamicGroupDemo() {
           lf.graphModel.moveNode(selectedNode.id, 10, 0)
         },
       })
+      ;(lf.extension.control as Control).addItem({
+        key: 'move-group',
+        iconClass: 'custom-minimap',
+        title: '',
+        text: 'addChild',
+        onClick: (lf) => {
+          const groupModel = lf.getNodeModelById('#2041_dynamic-group_1')
+          groupModel?.addChild('#2041_circle_1')
+          groupModel?.addChild('#2041_circle_2')
+        },
+      })
 
       const dndPanelConfig = getDndPanelConfig(lf)
       lf.setPatternItems(dndPanelConfig)
@@ -222,6 +233,44 @@ export default function DynamicGroupDemo() {
               value: 'Rect',
             },
           },
+          // #2041
+          {
+            id: '#2041_circle_1',
+            type: 'circle',
+            x: 1022,
+            y: 170,
+            text: {
+              value: 'circle_1',
+              x: 1022,
+              y: 170,
+              draggable: true,
+            },
+          },
+          {
+            id: '#2041_circle_2',
+            type: 'circle',
+            x: 1180,
+            y: 170,
+            text: {
+              value: 'circle_2',
+              x: 1180,
+              y: 170,
+              draggable: true,
+            },
+          },
+          {
+            id: '#2041_dynamic-group_1',
+            type: 'dynamic-group',
+            x: 1042,
+            y: 189,
+            text: 'dynamic-group_fix_#2041',
+            resizable: true,
+            properties: {
+              width: 420,
+              height: 250,
+              radius: 5,
+            },
+          },
         ],
         edges: [],
         // 'nodes': [

packages/core/src/LogicFlow.tsx

@@ -1391,6 +1391,12 @@ export class LogicFlow {
     this.graphModel.destroy()
     this.tool.destroy()
     this.history.destroy()
+    for (const extensionName in this.extension) {
+      const extensionInstance = this.extension[extensionName]
+      if ('destroy' in extensionInstance) {
+        extensionInstance.destroy?.()
+      }
+    }
   }
 }
 

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

@@ -229,7 +229,8 @@ export class DynamicGroup {
         console.log('isAllowAppendIn', isAllowAppendIn)
         if (isAllowAppendIn) {
           group.addChild(node.id)
-          this.nodeGroupMap.set(node.id, group.id)
+          // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
+          // TODO 下面这个是干什么的，是否需要一起移动到事件的逻辑中？
           group.setAllowAppendChild(true)
         } else {
           // 抛出不允许插入的事件
@@ -242,6 +243,14 @@ export class DynamicGroup {
     }
   }
 
+  onGroupAddNode = ({
+    data: groupData,
+    childId,
+  }: CallbackArgs<'group:add-node'>) => {
+    console.log('group:add-node', groupData)
+    this.nodeGroupMap.set(childId, groupData.id)
+  }
+
   removeNodeFromGroup = ({
     data: node,
     model,
@@ -666,7 +675,7 @@ export class DynamicGroup {
 
     lf.on('graph:updated', ({ data }) => console.log('data', data))
 
-    lf.on('group:add-node', ({ data }) => console.log('group:add-node', data))
+    lf.on('group:add-node', this.onGroupAddNode)
 
     // https://github.com/didi/LogicFlow/issues/1346
     // 重写 addElements() 方法，在 addElements() 原有基础上增加对 group 内部所有 nodes 和 edges 的复制功能
@@ -733,6 +742,7 @@ export class DynamicGroup {
     this.lf.off('node:click', this.onNodeSelect)
     this.lf.off('node:mousemove', this.onNodeMove)
     this.lf.off('graph:rendered', this.onGraphRendered)
+    this.lf.off('group:add-node', this.onGroupAddNode)
 
     // 还原 lf.addElements 方法？
     // 移除 graphModel 上重写的 addNodeMoveRules 方法？

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

@@ -492,7 +492,10 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
   addChild(id: string) {
     this.children.add(id)
     const groupData = this.getData()
-    this.graphModel.eventCenter.emit('group:add-node', { data: groupData })
+    this.graphModel.eventCenter.emit('group:add-node', {
+      data: groupData,
+      childId: id,
+    })
   }
 
   /**