@logicflow/extension 2.0.15 → 2.0.16

package/es/components/menu/index.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -205,6 +216,7 @@ var Menu = /** @class */ (function () {
             var position = _a.position;
             var menuList = (_c = (_b = _this.menuTypeMap) === null || _b === void 0 ? void 0 : _b.get(DefaultGraphMenuKey)) !== null && _c !== void 0 ? _c : [];
             var _d = position.domOverlayPosition, x = _d.x, y = _d.y;
+            _this.__currentData = __assign({}, position.canvasOverlayPosition);
             _this.showMenu(x, y, menuList);
         });
         this.lf.on('selection:contextmenu', function (_a) {

package/es/components/selection-select/index.d.ts

@@ -7,11 +7,13 @@ export declare class SelectionSelect {
     private startPoint?;
     private endPoint?;
     private disabled;
-    private isDefaultStopMoveGraph;
     private isWholeNode;
     private isWholeEdge;
+    private mouseDownInfo;
     constructor({ lf }: LogicFlow.IExtensionProps);
-    render(lf: LogicFlow, domContainer: HTMLElement): void;
+    render(_: LogicFlow, domContainer: HTMLElement): void;
+    onToolContainerMouseDown: (e: MouseEvent) => void;
+    onToolContainerMouseUp: (e: MouseEvent) => void;
     /**
      * 设置选中的灵敏度
      * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true

package/es/components/selection-select/index.js

@@ -3,9 +3,68 @@ var SelectionSelect = /** @class */ (function () {
         var lf = _a.lf;
         var _this = this;
         this.disabled = true;
-        this.isDefaultStopMoveGraph = false;
         this.isWholeNode = true;
         this.isWholeEdge = true;
+        // 用于区分选区和点击事件
+        this.mouseDownInfo = null;
+        this.onToolContainerMouseDown = function (e) {
+            // 避免在其他插件元素上点击时开启选区
+            if (e.target !== _this.container) {
+                return;
+            }
+            _this.mouseDownInfo = {
+                x: e.clientX,
+                y: e.clientY,
+                time: Date.now(),
+            };
+            var lf = _this.lf;
+            var domContainer = _this.container;
+            if (!domContainer) {
+                return;
+            }
+            if (_this.disabled) {
+                return;
+            }
+            // 禁用右键框选，修复可能导致画布出现多个框选框不消失的问题，见https://github.com/didi/LogicFlow/issues/985
+            var isRightClick = e.button === 2;
+            if (isRightClick) {
+                return;
+            }
+            var _a = lf.getPointByClient(e.clientX, e.clientY).domOverlayPosition, x = _a.x, y = _a.y;
+            _this.startPoint = {
+                x: x,
+                y: y,
+            };
+            _this.endPoint = {
+                x: x,
+                y: y,
+            };
+            var wrapper = document.createElement('div');
+            wrapper.className = 'lf-selection-select';
+            wrapper.oncontextmenu = function prevent(ev) {
+                ev.preventDefault();
+            };
+            wrapper.style.top = "".concat(_this.startPoint.y, "px");
+            wrapper.style.left = "".concat(_this.startPoint.x, "px");
+            domContainer.appendChild(wrapper);
+            _this.wrapper = wrapper;
+            document.addEventListener('mousemove', _this.draw);
+            document.addEventListener('mouseup', _this.drawOff);
+        };
+        this.onToolContainerMouseUp = function (e) {
+            if (_this.mouseDownInfo) {
+                var _a = _this.mouseDownInfo, x = _a.x, y = _a.y, time = _a.time;
+                var now = Date.now();
+                // 用 mouseDown 和 mouseUp 的位置偏移及时间间隔来判断是否是点击事件
+                var isClickEvent = Math.abs(e.clientX - x) < 10 &&
+                    Math.abs(e.clientY - y) < 10 &&
+                    now - time < 100;
+                if (isClickEvent) {
+                    _this.lf.clearSelectElements();
+                }
+                _this.mouseDownInfo = null;
+            }
+        };
         this.draw = function (ev) {
             var _a = _this.lf.getPointByClient(ev.clientX, ev.clientY).domOverlayPosition, x1 = _a.x, y1 = _a.y;
             _this.endPoint = {
@@ -56,16 +115,24 @@ var SelectionSelect = /** @class */ (function () {
                 if (Math.abs(x1 - x) < 10 && Math.abs(y1 - y) < 10) {
                     return;
                 }
-                var elements = _this.lf.graphModel.getAreaElement(lt, rb, _this.isWholeEdge, _this.isWholeNode, true);
+                var elements_1 = _this.lf.graphModel.getAreaElement(lt, rb, _this.isWholeEdge, _this.isWholeNode, true);
                 var _d = _this.lf.graphModel, dynamicGroup_1 = _d.dynamicGroup, group_1 = _d.group;
                 var nonGroupedElements_1 = [];
-                elements.forEach(function (element) {
+                elements_1.forEach(function (element) {
                     // 如果节点属于分组，则不选中节点，此处兼容旧版 Group 插件
-                    if (group_1 && group_1.getNodeGroup(element.id)) {
-                        return;
+                    if (group_1) {
+                        var elementGroup = group_1.getNodeGroup(element.id);
+                        if (elements_1.includes(elementGroup)) {
+                            // 当被选中的元素的父分组被选中时，不选中该元素
+                            return;
+                        }
                     }
-                    if (dynamicGroup_1 && dynamicGroup_1.getGroupByNodeId(element.id)) {
-                        return;
+                    if (dynamicGroup_1) {
+                        var elementGroup = dynamicGroup_1.getGroupByNodeId(element.id);
+                        if (elements_1.includes(elementGroup)) {
+                            // 当被选中的元素的父分组被选中时，不选中该元素
+                            return;
+                        }
                     }
                     _this.lf.selectElementById(element.id, true);
                     nonGroupedElements_1.push(element);
@@ -78,9 +145,6 @@ var SelectionSelect = /** @class */ (function () {
             }
         };
         this.lf = lf;
-        // 初始化isDefaultStopMoveGraph取值
-        var stopMoveGraph = lf.getEditConfig().stopMoveGraph;
-        this.isDefaultStopMoveGraph = stopMoveGraph;
         // TODO: 有没有既能将方法挂载到lf上，又能提供类型提示的方法？
         lf.openSelectionSelect = function () {
             _this.openSelectionSelect();
@@ -89,42 +153,8 @@ var SelectionSelect = /** @class */ (function () {
             _this.closeSelectionSelect();
         };
     }
-    SelectionSelect.prototype.render = function (lf, domContainer) {
-        var _this = this;
+    SelectionSelect.prototype.render = function (_, domContainer) {
         this.container = domContainer;
-        lf.on('blank:mousedown', function (_a) {
-            var e = _a.e;
-            var config = lf.getEditConfig();
-            // 鼠标控制滚动移动画布的时候，不能选区。
-            if (!config.stopMoveGraph || _this.disabled) {
-                return;
-            }
-            // 禁用右键框选，修复可能导致画布出现多个框选框不消失的问题，见https://github.com/didi/LogicFlow/issues/985
-            var isRightClick = e.button === 2;
-            if (isRightClick) {
-                return;
-            }
-            var _b = lf.getPointByClient(e.clientX, e.clientY).domOverlayPosition, x = _b.x, y = _b.y;
-            _this.startPoint = {
-                x: x,
-                y: y,
-            };
-            _this.endPoint = {
-                x: x,
-                y: y,
-            };
-            var wrapper = document.createElement('div');
-            wrapper.className = 'lf-selection-select';
-            wrapper.oncontextmenu = function prevent(ev) {
-                ev.preventDefault();
-            };
-            wrapper.style.top = "".concat(_this.startPoint.y, "px");
-            wrapper.style.left = "".concat(_this.startPoint.x, "px");
-            domContainer.appendChild(wrapper);
-            _this.wrapper = wrapper;
-            document.addEventListener('mousemove', _this.draw);
-            document.addEventListener('mouseup', _this.drawOff);
-        });
     };
     /**
      * 设置选中的灵敏度
@@ -141,24 +171,30 @@ var SelectionSelect = /** @class */ (function () {
      * 开启选区
      */
     SelectionSelect.prototype.openSelectionSelect = function () {
-        var stopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
-        if (!stopMoveGraph) {
-            this.isDefaultStopMoveGraph = false;
-            this.lf.updateEditConfig({
-                stopMoveGraph: true,
-            });
+        if (!this.disabled) {
+            this.closeSelectionSelect();
+        }
+        if (!this.container) {
+            return;
         }
+        this.mouseDownInfo = null;
+        this.container.addEventListener('mousedown', this.onToolContainerMouseDown);
+        this.container.addEventListener('mouseup', this.onToolContainerMouseUp);
+        // 取消点击事件的穿透，只让 ToolOverlay 接收事件，避免与图形元素的事件冲突
+        this.container.style.pointerEvents = 'auto';
         this.open();
     };
     /**
      * 关闭选区
      */
     SelectionSelect.prototype.closeSelectionSelect = function () {
-        if (!this.isDefaultStopMoveGraph) {
-            this.lf.updateEditConfig({
-                stopMoveGraph: false,
-            });
+        if (!this.container) {
+            return;
         }
+        this.container.style.pointerEvents = 'none';
+        this.mouseDownInfo = null;
+        this.container.removeEventListener('mousedown', this.onToolContainerMouseDown);
+        this.container.removeEventListener('mouseup', this.onToolContainerMouseUp);
         this.close();
     };
     SelectionSelect.prototype.open = function () {

package/es/dynamic-group/index.d.ts

@@ -48,10 +48,14 @@ export declare class DynamicGroup {
      * @param nodes
      */
     calibrateTopGroupZIndex(nodes: NodeData[]): void;
-    addNodeToGroup: ({ data: node }: CallbackArgs<'node:add'>) => void;
+    onSelectionDrop: () => void;
+    onNodeAddOrDrop: ({ data: node }: CallbackArgs<'node:add'>) => void;
+    addNodeToGroup: (node: LogicFlow.NodeData) => void;
     onGroupAddNode: ({ data: groupData, childId, }: CallbackArgs<'group:add-node'>) => void;
     removeNodeFromGroup: ({ data: node, model, }: CallbackArgs<'node:delete'>) => void;
-    setActiveGroup: ({ data: node }: CallbackArgs<'node:drag'>) => void;
+    onSelectionDrag: () => void;
+    onNodeDrag: ({ data: node }: CallbackArgs<'node:drag'>) => void;
+    setActiveGroup: (node: LogicFlow.NodeData) => void;
     /**
      * 1. 分组节点默认在普通节点下面
      * 2. 分组节点被选中后，会将分组节点以及其内部的其它分组节点放到其余分组节点的上面

package/es/dynamic-group/index.js

@@ -55,9 +55,17 @@ var DynamicGroup = /** @class */ (function () {
         this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
         // 存储节点与 group 的映射关系
         this.nodeGroupMap = new Map();
-        // 监听 LogicFlow 的相关事件，做对应的处理
-        this.addNodeToGroup = function (_a) {
+        this.onSelectionDrop = function () {
+            var selectedNodes = _this.lf.graphModel.getSelectElements().nodes;
+            selectedNodes.forEach(function (node) {
+                _this.addNodeToGroup(node);
+            });
+        };
+        this.onNodeAddOrDrop = function (_a) {
             var node = _a.data;
+            _this.addNodeToGroup(node);
+        };
+        this.addNodeToGroup = function (node) {
             // 1. 如果该节点之前已经在 group 中了，则将其从之前的 group 移除
             var preGroupId = _this.nodeGroupMap.get(node.id);
             if (preGroupId) {
@@ -101,8 +109,7 @@ var DynamicGroup = /** @class */ (function () {
                     if (isAllowAppendIn) {
                         group.addChild(node.id);
                         // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
-                        // TODO 下面这个是干什么的，是否需要一起移动到事件的逻辑中？
-                        group.setAllowAppendChild(true);
+                        group.setAllowAppendChild(false);
                     }
                     else {
                         // 抛出不允许插入的事件
@@ -134,8 +141,17 @@ var DynamicGroup = /** @class */ (function () {
                 _this.nodeGroupMap.delete(node.id);
             }
         };
-        this.setActiveGroup = function (_a) {
+        this.onSelectionDrag = function () {
+            var selectedNodes = _this.lf.graphModel.getSelectElements().nodes;
+            selectedNodes.forEach(function (node) {
+                _this.setActiveGroup(node);
+            });
+        };
+        this.onNodeDrag = function (_a) {
             var node = _a.data;
+            _this.setActiveGroup(node);
+        };
+        this.setActiveGroup = function (node) {
             var nodeModel = _this.lf.getNodeModelById(node.id);
             var bounds = nodeModel === null || nodeModel === void 0 ? void 0 : nodeModel.getBounds();
             if (nodeModel && bounds) {
@@ -567,9 +583,11 @@ var DynamicGroup = /** @class */ (function () {
             return true;
         });
         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);
@@ -623,9 +641,11 @@ var DynamicGroup = /** @class */ (function () {
     DynamicGroup.prototype.render = function () { };
     DynamicGroup.prototype.destroy = function () {
         // 销毁监听的事件，并移除渲染的 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);

package/lib/components/menu/index.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -208,6 +219,7 @@ var Menu = /** @class */ (function () {
             var position = _a.position;
             var menuList = (_c = (_b = _this.menuTypeMap) === null || _b === void 0 ? void 0 : _b.get(DefaultGraphMenuKey)) !== null && _c !== void 0 ? _c : [];
             var _d = position.domOverlayPosition, x = _d.x, y = _d.y;
+            _this.__currentData = __assign({}, position.canvasOverlayPosition);
             _this.showMenu(x, y, menuList);
         });
         this.lf.on('selection:contextmenu', function (_a) {

package/lib/components/selection-select/index.d.ts

@@ -7,11 +7,13 @@ export declare class SelectionSelect {
     private startPoint?;
     private endPoint?;
     private disabled;
-    private isDefaultStopMoveGraph;
     private isWholeNode;
     private isWholeEdge;
+    private mouseDownInfo;
     constructor({ lf }: LogicFlow.IExtensionProps);
-    render(lf: LogicFlow, domContainer: HTMLElement): void;
+    render(_: LogicFlow, domContainer: HTMLElement): void;
+    onToolContainerMouseDown: (e: MouseEvent) => void;
+    onToolContainerMouseUp: (e: MouseEvent) => void;
     /**
      * 设置选中的灵敏度
      * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true

package/lib/components/selection-select/index.js

@@ -6,9 +6,68 @@ var SelectionSelect = /** @class */ (function () {
         var lf = _a.lf;
         var _this = this;
         this.disabled = true;
-        this.isDefaultStopMoveGraph = false;
         this.isWholeNode = true;
         this.isWholeEdge = true;
+        // 用于区分选区和点击事件
+        this.mouseDownInfo = null;
+        this.onToolContainerMouseDown = function (e) {
+            // 避免在其他插件元素上点击时开启选区
+            if (e.target !== _this.container) {
+                return;
+            }
+            _this.mouseDownInfo = {
+                x: e.clientX,
+                y: e.clientY,
+                time: Date.now(),
+            };
+            var lf = _this.lf;
+            var domContainer = _this.container;
+            if (!domContainer) {
+                return;
+            }
+            if (_this.disabled) {
+                return;
+            }
+            // 禁用右键框选，修复可能导致画布出现多个框选框不消失的问题，见https://github.com/didi/LogicFlow/issues/985
+            var isRightClick = e.button === 2;
+            if (isRightClick) {
+                return;
+            }
+            var _a = lf.getPointByClient(e.clientX, e.clientY).domOverlayPosition, x = _a.x, y = _a.y;
+            _this.startPoint = {
+                x: x,
+                y: y,
+            };
+            _this.endPoint = {
+                x: x,
+                y: y,
+            };
+            var wrapper = document.createElement('div');
+            wrapper.className = 'lf-selection-select';
+            wrapper.oncontextmenu = function prevent(ev) {
+                ev.preventDefault();
+            };
+            wrapper.style.top = "".concat(_this.startPoint.y, "px");
+            wrapper.style.left = "".concat(_this.startPoint.x, "px");
+            domContainer.appendChild(wrapper);
+            _this.wrapper = wrapper;
+            document.addEventListener('mousemove', _this.draw);
+            document.addEventListener('mouseup', _this.drawOff);
+        };
+        this.onToolContainerMouseUp = function (e) {
+            if (_this.mouseDownInfo) {
+                var _a = _this.mouseDownInfo, x = _a.x, y = _a.y, time = _a.time;
+                var now = Date.now();
+                // 用 mouseDown 和 mouseUp 的位置偏移及时间间隔来判断是否是点击事件
+                var isClickEvent = Math.abs(e.clientX - x) < 10 &&
+                    Math.abs(e.clientY - y) < 10 &&
+                    now - time < 100;
+                if (isClickEvent) {
+                    _this.lf.clearSelectElements();
+                }
+                _this.mouseDownInfo = null;
+            }
+        };
         this.draw = function (ev) {
             var _a = _this.lf.getPointByClient(ev.clientX, ev.clientY).domOverlayPosition, x1 = _a.x, y1 = _a.y;
             _this.endPoint = {
@@ -59,16 +118,24 @@ var SelectionSelect = /** @class */ (function () {
                 if (Math.abs(x1 - x) < 10 && Math.abs(y1 - y) < 10) {
                     return;
                 }
-                var elements = _this.lf.graphModel.getAreaElement(lt, rb, _this.isWholeEdge, _this.isWholeNode, true);
+                var elements_1 = _this.lf.graphModel.getAreaElement(lt, rb, _this.isWholeEdge, _this.isWholeNode, true);
                 var _d = _this.lf.graphModel, dynamicGroup_1 = _d.dynamicGroup, group_1 = _d.group;
                 var nonGroupedElements_1 = [];
-                elements.forEach(function (element) {
+                elements_1.forEach(function (element) {
                     // 如果节点属于分组，则不选中节点，此处兼容旧版 Group 插件
-                    if (group_1 && group_1.getNodeGroup(element.id)) {
-                        return;
+                    if (group_1) {
+                        var elementGroup = group_1.getNodeGroup(element.id);
+                        if (elements_1.includes(elementGroup)) {
+                            // 当被选中的元素的父分组被选中时，不选中该元素
+                            return;
+                        }
                     }
-                    if (dynamicGroup_1 && dynamicGroup_1.getGroupByNodeId(element.id)) {
-                        return;
+                    if (dynamicGroup_1) {
+                        var elementGroup = dynamicGroup_1.getGroupByNodeId(element.id);
+                        if (elements_1.includes(elementGroup)) {
+                            // 当被选中的元素的父分组被选中时，不选中该元素
+                            return;
+                        }
                     }
                     _this.lf.selectElementById(element.id, true);
                     nonGroupedElements_1.push(element);
@@ -81,9 +148,6 @@ var SelectionSelect = /** @class */ (function () {
             }
         };
         this.lf = lf;
-        // 初始化isDefaultStopMoveGraph取值
-        var stopMoveGraph = lf.getEditConfig().stopMoveGraph;
-        this.isDefaultStopMoveGraph = stopMoveGraph;
         // TODO: 有没有既能将方法挂载到lf上，又能提供类型提示的方法？
         lf.openSelectionSelect = function () {
             _this.openSelectionSelect();
@@ -92,42 +156,8 @@ var SelectionSelect = /** @class */ (function () {
             _this.closeSelectionSelect();
         };
     }
-    SelectionSelect.prototype.render = function (lf, domContainer) {
-        var _this = this;
+    SelectionSelect.prototype.render = function (_, domContainer) {
         this.container = domContainer;
-        lf.on('blank:mousedown', function (_a) {
-            var e = _a.e;
-            var config = lf.getEditConfig();
-            // 鼠标控制滚动移动画布的时候，不能选区。
-            if (!config.stopMoveGraph || _this.disabled) {
-                return;
-            }
-            // 禁用右键框选，修复可能导致画布出现多个框选框不消失的问题，见https://github.com/didi/LogicFlow/issues/985
-            var isRightClick = e.button === 2;
-            if (isRightClick) {
-                return;
-            }
-            var _b = lf.getPointByClient(e.clientX, e.clientY).domOverlayPosition, x = _b.x, y = _b.y;
-            _this.startPoint = {
-                x: x,
-                y: y,
-            };
-            _this.endPoint = {
-                x: x,
-                y: y,
-            };
-            var wrapper = document.createElement('div');
-            wrapper.className = 'lf-selection-select';
-            wrapper.oncontextmenu = function prevent(ev) {
-                ev.preventDefault();
-            };
-            wrapper.style.top = "".concat(_this.startPoint.y, "px");
-            wrapper.style.left = "".concat(_this.startPoint.x, "px");
-            domContainer.appendChild(wrapper);
-            _this.wrapper = wrapper;
-            document.addEventListener('mousemove', _this.draw);
-            document.addEventListener('mouseup', _this.drawOff);
-        });
     };
     /**
      * 设置选中的灵敏度
@@ -144,24 +174,30 @@ var SelectionSelect = /** @class */ (function () {
      * 开启选区
      */
     SelectionSelect.prototype.openSelectionSelect = function () {
-        var stopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
-        if (!stopMoveGraph) {
-            this.isDefaultStopMoveGraph = false;
-            this.lf.updateEditConfig({
-                stopMoveGraph: true,
-            });
+        if (!this.disabled) {
+            this.closeSelectionSelect();
+        }
+        if (!this.container) {
+            return;
         }
+        this.mouseDownInfo = null;
+        this.container.addEventListener('mousedown', this.onToolContainerMouseDown);
+        this.container.addEventListener('mouseup', this.onToolContainerMouseUp);
+        // 取消点击事件的穿透，只让 ToolOverlay 接收事件，避免与图形元素的事件冲突
+        this.container.style.pointerEvents = 'auto';
         this.open();
     };
     /**
      * 关闭选区
      */
     SelectionSelect.prototype.closeSelectionSelect = function () {
-        if (!this.isDefaultStopMoveGraph) {
-            this.lf.updateEditConfig({
-                stopMoveGraph: false,
-            });
+        if (!this.container) {
+            return;
         }
+        this.container.style.pointerEvents = 'none';
+        this.mouseDownInfo = null;
+        this.container.removeEventListener('mousedown', this.onToolContainerMouseDown);
+        this.container.removeEventListener('mouseup', this.onToolContainerMouseUp);
         this.close();
     };
     SelectionSelect.prototype.open = function () {

package/lib/dynamic-group/index.d.ts

@@ -48,10 +48,14 @@ export declare class DynamicGroup {
      * @param nodes
      */
     calibrateTopGroupZIndex(nodes: NodeData[]): void;
-    addNodeToGroup: ({ data: node }: CallbackArgs<'node:add'>) => void;
+    onSelectionDrop: () => void;
+    onNodeAddOrDrop: ({ data: node }: CallbackArgs<'node:add'>) => void;
+    addNodeToGroup: (node: LogicFlow.NodeData) => void;
     onGroupAddNode: ({ data: groupData, childId, }: CallbackArgs<'group:add-node'>) => void;
     removeNodeFromGroup: ({ data: node, model, }: CallbackArgs<'node:delete'>) => void;
-    setActiveGroup: ({ data: node }: CallbackArgs<'node:drag'>) => void;
+    onSelectionDrag: () => void;
+    onNodeDrag: ({ data: node }: CallbackArgs<'node:drag'>) => void;
+    setActiveGroup: (node: LogicFlow.NodeData) => void;
     /**
      * 1. 分组节点默认在普通节点下面
      * 2. 分组节点被选中后，会将分组节点以及其内部的其它分组节点放到其余分组节点的上面

package/lib/dynamic-group/index.js

@@ -72,9 +72,17 @@ var DynamicGroup = /** @class */ (function () {
         this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
         // 存储节点与 group 的映射关系
         this.nodeGroupMap = new Map();
-        // 监听 LogicFlow 的相关事件，做对应的处理
-        this.addNodeToGroup = function (_a) {
+        this.onSelectionDrop = function () {
+            var selectedNodes = _this.lf.graphModel.getSelectElements().nodes;
+            selectedNodes.forEach(function (node) {
+                _this.addNodeToGroup(node);
+            });
+        };
+        this.onNodeAddOrDrop = function (_a) {
             var node = _a.data;
+            _this.addNodeToGroup(node);
+        };
+        this.addNodeToGroup = function (node) {
             // 1. 如果该节点之前已经在 group 中了，则将其从之前的 group 移除
             var preGroupId = _this.nodeGroupMap.get(node.id);
             if (preGroupId) {
@@ -118,8 +126,7 @@ var DynamicGroup = /** @class */ (function () {
                     if (isAllowAppendIn) {
                         group.addChild(node.id);
                         // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
-                        // TODO 下面这个是干什么的，是否需要一起移动到事件的逻辑中？
-                        group.setAllowAppendChild(true);
+                        group.setAllowAppendChild(false);
                     }
                     else {
                         // 抛出不允许插入的事件
@@ -151,8 +158,17 @@ var DynamicGroup = /** @class */ (function () {
                 _this.nodeGroupMap.delete(node.id);
             }
         };
-        this.setActiveGroup = function (_a) {
+        this.onSelectionDrag = function () {
+            var selectedNodes = _this.lf.graphModel.getSelectElements().nodes;
+            selectedNodes.forEach(function (node) {
+                _this.setActiveGroup(node);
+            });
+        };
+        this.onNodeDrag = function (_a) {
             var node = _a.data;
+            _this.setActiveGroup(node);
+        };
+        this.setActiveGroup = function (node) {
             var nodeModel = _this.lf.getNodeModelById(node.id);
             var bounds = nodeModel === null || nodeModel === void 0 ? void 0 : nodeModel.getBounds();
             if (nodeModel && bounds) {
@@ -584,9 +600,11 @@ var DynamicGroup = /** @class */ (function () {
             return true;
         });
         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);
@@ -640,9 +658,11 @@ var DynamicGroup = /** @class */ (function () {
     DynamicGroup.prototype.render = function () { };
     DynamicGroup.prototype.destroy = function () {
         // 销毁监听的事件，并移除渲染的 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);