@logicflow/extension 2.0.14 → 2.0.16

package/src/dynamic-group/index.ts

@@ -178,8 +178,18 @@ export class DynamicGroup {
     this.topGroupZIndex = max
   }
 
-  // 监听 LogicFlow 的相关事件，做对应的处理
-  addNodeToGroup = ({ data: node }: CallbackArgs<'node:add'>) => {
+  onSelectionDrop = () => {
+    const { nodes: selectedNodes } = this.lf.graphModel.getSelectElements()
+    selectedNodes.forEach((node) => {
+      this.addNodeToGroup(node)
+    })
+  }
+
+  onNodeAddOrDrop = ({ data: node }: CallbackArgs<'node:add'>) => {
+    this.addNodeToGroup(node)
+  }
+
+  addNodeToGroup = (node: LogicFlow.NodeData) => {
     // 1. 如果该节点之前已经在 group 中了，则将其从之前的 group 移除
     const preGroupId = this.nodeGroupMap.get(node.id)
 
@@ -229,8 +239,8 @@ export class DynamicGroup {
         console.log('isAllowAppendIn', isAllowAppendIn)
         if (isAllowAppendIn) {
           group.addChild(node.id)
-          this.nodeGroupMap.set(node.id, group.id)
-          group.setAllowAppendChild(true)
+          // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
+          group.setAllowAppendChild(false)
         } else {
           // 抛出不允许插入的事件
           this.lf.emit('group:not-allowed', {
@@ -242,6 +252,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,
@@ -264,7 +282,17 @@ export class DynamicGroup {
     }
   }
 
-  setActiveGroup = ({ data: node }: CallbackArgs<'node:drag'>) => {
+  onSelectionDrag = () => {
+    const { nodes: selectedNodes } = this.lf.graphModel.getSelectElements()
+    selectedNodes.forEach((node) => {
+      this.setActiveGroup(node)
+    })
+  }
+  onNodeDrag = ({ data: node }: CallbackArgs<'node:drag'>) => {
+    this.setActiveGroup(node)
+  }
+
+  setActiveGroup = (node: LogicFlow.NodeData) => {
     const nodeModel = this.lf.getNodeModelById(node.id)
     const bounds = nodeModel?.getBounds()
 
@@ -657,16 +685,18 @@ export class DynamicGroup {
 
     graphModel.dynamicGroup = this
 
-    lf.on('node:add,node:drop,node:dnd-add', this.addNodeToGroup)
+    lf.on('node:add,node:drop,node:dnd-add', this.onNodeAddOrDrop)
+    lf.on('selection:drop', this.onSelectionDrop)
     lf.on('node:delete', this.removeNodeFromGroup)
-    lf.on('node:drag,node:dnd-drag', this.setActiveGroup)
+    lf.on('node:drag,node:dnd-drag', this.onNodeDrag)
+    lf.on('selection:drag', this.onSelectionDrag)
     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))
 
-    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 的复制功能
@@ -727,12 +757,15 @@ export class DynamicGroup {
 
   destroy() {
     // 销毁监听的事件，并移除渲染的 dom 内容
-    this.lf.off('node:add,node:drop,node:dnd-add', this.addNodeToGroup)
+    this.lf.off('node:add,node:drop,node:dnd-add', this.onNodeAddOrDrop)
+    this.lf.off('selection:drop', this.onSelectionDrop)
     this.lf.off('node:delete', this.removeNodeFromGroup)
-    this.lf.off('node:drag,node:dnd-drag', this.setActiveGroup)
+    this.lf.off('node:drag,node:dnd-drag', this.onNodeDrag)
+    this.lf.off('selection:drag', this.onSelectionDrag)
     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 方法？

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

package/src/style/index.less

@@ -221,6 +221,11 @@
   border: 1px solid #93a3b4;
 }
 
+.lf-mini-map .lf-graph {
+  width: 100% !important;
+  height: 100% !important;
+}
+
 .lf-mini-map-graph {
   position: relative;
   overflow: hidden;