@logicflow/extension 2.0.15 → 2.0.17

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

@@ -1,4 +1,7 @@
 import LogicFlow from '@logicflow/core';
+export interface SelectionConfig {
+    exclusiveMode?: boolean;
+}
 export declare class SelectionSelect {
     static pluginName: string;
     private container?;
@@ -7,11 +10,32 @@ export declare class SelectionSelect {
     private startPoint?;
     private endPoint?;
     private disabled;
-    private isDefaultStopMoveGraph;
     private isWholeNode;
     private isWholeEdge;
-    constructor({ lf }: LogicFlow.IExtensionProps);
-    render(lf: LogicFlow, domContainer: HTMLElement): void;
+    exclusiveMode: boolean;
+    private mouseDownInfo;
+    private originalStopMoveGraph;
+    constructor({ lf, options }: LogicFlow.IExtensionProps);
+    render(_: LogicFlow, domContainer: HTMLElement): void;
+    /**
+     * 清理选区状态
+     */
+    private cleanupSelectionState;
+    /**
+     * 切换框选模式
+     * @param exclusive 是否为独占模式。true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
+     */
+    setExclusiveMode(exclusive?: boolean): void;
+    private addEventListeners;
+    private removeEventListeners;
+    /**
+     * 处理画布空白处鼠标按下事件（非独占模式）
+     */
+    private handleBlankMouseDown;
+    /**
+     * 处理鼠标按下事件
+     */
+    private handleMouseDown;
     /**
      * 设置选中的灵敏度
      * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true

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

@@ -1,11 +1,49 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { cloneDeep } from 'lodash-es';
 var SelectionSelect = /** @class */ (function () {
     function SelectionSelect(_a) {
-        var lf = _a.lf;
+        var lf = _a.lf, options = _a.options;
         var _this = this;
+        var _b;
         this.disabled = true;
-        this.isDefaultStopMoveGraph = false;
         this.isWholeNode = true;
         this.isWholeEdge = true;
+        this.exclusiveMode = false; // 框选独占模式：true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
+        // 用于区分选区和点击事件
+        this.mouseDownInfo = null;
+        // 记录原始的 stopMoveGraph 设置
+        this.originalStopMoveGraph = false;
+        /**
+         * 处理画布空白处鼠标按下事件（非独占模式）
+         */
+        this.handleBlankMouseDown = function (_a) {
+            var e = _a.e;
+            _this.handleMouseDown(e);
+        };
         this.draw = function (ev) {
             var _a = _this.lf.getPointByClient(ev.clientX, ev.clientY).domOverlayPosition, x1 = _a.x, y1 = _a.y;
             _this.endPoint = {
@@ -34,17 +72,33 @@ var SelectionSelect = /** @class */ (function () {
                 }
             }
         };
-        this.drawOff = function () {
-            var _a;
+        this.drawOff = function (e) {
+            // 处理鼠标抬起事件
+            // 首先判断是否是点击，如果是，则清空框选
+            if (_this.mouseDownInfo) {
+                var _a = _this.mouseDownInfo, x = _a.x, y = _a.y, time = _a.time;
+                var isClick = Math.abs(e.clientX - x) < 5 &&
+                    Math.abs(e.clientY - y) < 5 &&
+                    Date.now() - time < 200;
+                if (isClick) {
+                    _this.lf.clearSelectElements();
+                    _this.cleanupSelectionState();
+                    return;
+                }
+            }
+            var curStartPoint = cloneDeep(_this.startPoint);
+            var curEndPoint = cloneDeep(_this.endPoint);
             document.removeEventListener('mousemove', _this.draw);
-            document.removeEventListener('mouseup', _this.drawOff);
-            if (_this.wrapper) {
-                _this.wrapper.oncontextmenu = null;
-                (_a = _this.container) === null || _a === void 0 ? void 0 : _a.removeChild(_this.wrapper);
+            if (!_this.exclusiveMode) {
+                document.removeEventListener('mouseup', _this.drawOff);
             }
-            if (_this.startPoint && _this.endPoint) {
-                var _b = _this.startPoint, x = _b.x, y = _b.y;
-                var _c = _this.endPoint, x1 = _c.x, y1 = _c.y;
+            // 恢复原始的 stopMoveGraph 设置
+            _this.lf.updateEditConfig({
+                stopMoveGraph: _this.originalStopMoveGraph,
+            });
+            if (curStartPoint && curEndPoint) {
+                var x = curStartPoint.x, y = curStartPoint.y;
+                var x1 = curEndPoint.x, y1 = curEndPoint.y;
                 // 返回框选范围，左上角和右下角的坐标
                 var lt = [Math.min(x, x1), Math.min(y, y1)];
                 var rb = [Math.max(x, x1), Math.max(y, y1)];
@@ -54,33 +108,71 @@ var SelectionSelect = /** @class */ (function () {
                 });
                 // 选区太小的情况就忽略
                 if (Math.abs(x1 - x) < 10 && Math.abs(y1 - y) < 10) {
+                    if (_this.wrapper) {
+                        _this.wrapper.oncontextmenu = null;
+                        if (_this.container && _this.wrapper.parentNode === _this.container) {
+                            _this.container.removeChild(_this.wrapper);
+                        }
+                        _this.wrapper = undefined;
+                    }
                     return;
                 }
-                var elements = _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 elements_1 = _this.lf.graphModel.getAreaElement(lt, rb, _this.isWholeEdge, _this.isWholeNode, true);
+                var _b = _this.lf.graphModel, dynamicGroup_1 = _b.dynamicGroup, group_1 = _b.group;
                 var nonGroupedElements_1 = [];
-                elements.forEach(function (element) {
+                var selectedElements = _this.lf.getSelectElements();
+                // 同时记录节点和边的ID
+                var selectedIds_1 = new Set(__spreadArray(__spreadArray([], __read(selectedElements.nodes.map(function (node) { return node.id; })), false), __read(selectedElements.edges.map(function (edge) { return edge.id; })), false));
+                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) {
+                        var elementGroup = dynamicGroup_1.getGroupByNodeId(element.id);
+                        if (elements_1.includes(elementGroup)) {
+                            // 当被选中的元素的父分组被选中时，不选中该元素
+                            return;
+                        }
                     }
-                    if (dynamicGroup_1 && dynamicGroup_1.getGroupByNodeId(element.id)) {
+                    // 在独占模式下，如果元素已经被选中，则取消选中
+                    if (_this.exclusiveMode && selectedIds_1.has(element.id)) {
+                        _this.lf.deselectElementById(element.id);
                         return;
                     }
+                    // 非独占模式下，或者元素未被选中时，选中元素
                     _this.lf.selectElementById(element.id, true);
                     nonGroupedElements_1.push(element);
                 });
+                // 重置起始点和终点
+                // 注意：这两个值必须在触发closeSelectionSelect方法前充值，否则会导致独占模式下元素无法选中的问题
+                _this.startPoint = undefined;
+                _this.endPoint = undefined;
+                // 如果有选中的元素，触发 selection:drop 事件
+                if (nonGroupedElements_1.length > 0) {
+                    _this.lf.emit('selection:drop', { e: e });
+                }
+                // 触发 selection:selected 事件
                 _this.lf.emit('selection:selected', {
                     elements: nonGroupedElements_1,
                     leftTopPoint: lt,
                     rightBottomPoint: rb,
                 });
             }
+            if (_this.wrapper) {
+                _this.wrapper.oncontextmenu = null;
+                if (_this.container && _this.wrapper.parentNode === _this.container) {
+                    _this.container.removeChild(_this.wrapper);
+                }
+                _this.wrapper = undefined;
+            }
         };
         this.lf = lf;
-        // 初始化isDefaultStopMoveGraph取值
-        var stopMoveGraph = lf.getEditConfig().stopMoveGraph;
-        this.isDefaultStopMoveGraph = stopMoveGraph;
+        this.exclusiveMode = (_b = options === null || options === void 0 ? void 0 : options.exclusiveMode) !== null && _b !== void 0 ? _b : false;
         // TODO: 有没有既能将方法挂载到lf上，又能提供类型提示的方法？
         lf.openSelectionSelect = function () {
             _this.openSelectionSelect();
@@ -88,43 +180,114 @@ var SelectionSelect = /** @class */ (function () {
         lf.closeSelectionSelect = function () {
             _this.closeSelectionSelect();
         };
+        // 新增切换独占模式的方法
+        lf.setSelectionSelectMode = function (exclusive) {
+            _this.setExclusiveMode(exclusive);
+        };
+        // 绑定方法的 this 上下文
+        this.handleMouseDown = this.handleMouseDown.bind(this);
+        this.draw = this.draw.bind(this);
+        this.drawOff = this.drawOff.bind(this);
     }
-    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;
+    };
+    /**
+     * 清理选区状态
+     */
+    SelectionSelect.prototype.cleanupSelectionState = function () {
+        // 清理当前的选区状态
+        if (this.wrapper) {
+            this.wrapper.oncontextmenu = null;
+            if (this.container && this.wrapper.parentNode === this.container) {
+                this.container.removeChild(this.wrapper);
             }
-            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);
+            this.wrapper = undefined;
+        }
+        this.startPoint = undefined;
+        this.endPoint = undefined;
+        this.mouseDownInfo = null;
+        // 移除事件监听
+        document.removeEventListener('mousemove', this.draw);
+        document.removeEventListener('mouseup', this.drawOff);
+    };
+    /**
+     * 切换框选模式
+     * @param exclusive 是否为独占模式。true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
+     */
+    SelectionSelect.prototype.setExclusiveMode = function (exclusive) {
+        if (exclusive === void 0) { exclusive = false; }
+        if (this.exclusiveMode === exclusive)
+            return;
+        this.cleanupSelectionState();
+        this.exclusiveMode = exclusive;
+        if (this.container && !this.disabled) {
+            // 切换事件监听方式
+            this.removeEventListeners();
+            this.addEventListeners();
+        }
+    };
+    SelectionSelect.prototype.addEventListeners = function () {
+        if (!this.container)
+            return;
+        if (this.exclusiveMode) {
+            // 独占模式：监听 container 的 mousedown 事件
+            this.container.style.pointerEvents = 'auto';
+            this.container.addEventListener('mousedown', this.handleMouseDown);
+        }
+        else {
+            // 非独占模式：监听画布的 blank:mousedown 事件
+            this.container.style.pointerEvents = 'none';
+            // 使用实例方法而不是箭头函数，这样可以正确移除事件监听
+            this.lf.on('blank:mousedown', this.handleBlankMouseDown);
+        }
+    };
+    SelectionSelect.prototype.removeEventListeners = function () {
+        if (this.container) {
+            this.container.style.pointerEvents = 'none';
+            this.container.removeEventListener('mousedown', this.handleMouseDown);
+        }
+        // 移除 blank:mousedown 事件监听
+        this.lf.off('blank:mousedown', this.handleBlankMouseDown);
+    };
+    /**
+     * 处理鼠标按下事件
+     */
+    SelectionSelect.prototype.handleMouseDown = function (e) {
+        var _a;
+        if (!this.container || this.disabled)
+            return;
+        // 禁用右键框选
+        var isRightClick = e.button === 2;
+        if (isRightClick)
+            return;
+        // 清理之前可能存在的选区状态
+        this.cleanupSelectionState();
+        // 记录鼠标按下时的位置和时间
+        this.mouseDownInfo = {
+            x: e.clientX,
+            y: e.clientY,
+            time: Date.now(),
+        };
+        // 记录原始设置并临时禁止画布移动
+        this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
+        this.lf.updateEditConfig({
+            stopMoveGraph: true,
         });
+        var _b = this.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");
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.appendChild(wrapper);
+        this.wrapper = wrapper;
+        document.addEventListener('mousemove', this.draw);
+        document.addEventListener('mouseup', this.drawOff);
     };
     /**
      * 设置选中的灵敏度
@@ -141,24 +304,35 @@ 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.cleanupSelectionState();
+        this.addEventListeners();
         this.open();
     };
     /**
      * 关闭选区
      */
     SelectionSelect.prototype.closeSelectionSelect = function () {
-        if (!this.isDefaultStopMoveGraph) {
-            this.lf.updateEditConfig({
-                stopMoveGraph: false,
+        if (!this.container) {
+            return;
+        }
+        // 如果还有未完成的框选，先触发 drawOff 完成框选
+        if (this.wrapper && this.startPoint && this.endPoint) {
+            // 记录上一次的结束点，用于触发 mouseup 事件
+            var lastEndPoint = cloneDeep(this.endPoint);
+            var lastEvent = new MouseEvent('mouseup', {
+                clientX: lastEndPoint.x,
+                clientY: lastEndPoint.y,
             });
+            this.drawOff(lastEvent);
         }
+        this.cleanupSelectionState();
+        this.removeEventListeners();
         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) {
@@ -97,12 +105,10 @@ var DynamicGroup = /** @class */ (function () {
                 var group = _this.getGroupByBounds(bounds, node);
                 if (group) {
                     var isAllowAppendIn = group.isAllowAppendIn(node);
-                    console.log('isAllowAppendIn', isAllowAppendIn);
                     if (isAllowAppendIn) {
                         group.addChild(node.id);
                         // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
-                        // TODO 下面这个是干什么的，是否需要一起移动到事件的逻辑中？
-                        group.setAllowAppendChild(true);
+                        group.setAllowAppendChild(false);
                     }
                     else {
                         // 抛出不允许插入的事件
@@ -116,7 +122,6 @@ var DynamicGroup = /** @class */ (function () {
         };
         this.onGroupAddNode = function (_a) {
             var groupData = _a.data, childId = _a.childId;
-            console.log('group:add-node', groupData);
             _this.nodeGroupMap.set(childId, groupData.id);
         };
         this.removeNodeFromGroup = function (_a) {
@@ -134,8 +139,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) {
@@ -150,7 +164,6 @@ var DynamicGroup = /** @class */ (function () {
                 if (!isAllowAppendIn)
                     return;
                 _this.activeGroup = targetGroup;
-                console.log('this.activeGroup', _this.activeGroup);
                 _this.activeGroup.setAllowAppendChild(true);
             }
         };
@@ -260,7 +273,6 @@ var DynamicGroup = /** @class */ (function () {
         };
         this.onGraphRendered = function (_a) {
             var data = _a.data;
-            console.log('data', data);
             forEach(data.nodes, function (node) {
                 if (node.children) {
                     forEach(node.children, function (childId) {
@@ -567,16 +579,14 @@ 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);
-        lf.on('graph:updated', function (_a) {
-            var data = _a.data;
-            return console.log('data', data);
-        });
         lf.on('group:add-node', this.onGroupAddNode);
         // https://github.com/didi/LogicFlow/issues/1346
         // 重写 addElements() 方法，在 addElements() 原有基础上增加对 group 内部所有 nodes 和 edges 的复制功能
@@ -610,7 +620,6 @@ var DynamicGroup = /** @class */ (function () {
             forEach(edgesInnerGroup, function (edge) {
                 _this.createEdge(edge, nodeIdMap, distance);
             });
-            console.log('selectedEdges --->>>', selectedEdges);
             forEach(selectedEdges, function (edge) {
                 elements.edges.push(_this.createEdge(edge, nodeIdMap, distance));
             });
@@ -623,9 +632,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/es/materials/group/GroupNode.js

@@ -326,7 +326,6 @@ var GroupNodeModel = /** @class */ (function (_super) {
         var _this = this;
         var data = _super.prototype.getData.call(this);
         data.children = [];
-        console.log('this.children', this.children);
         this.children.forEach(function (childId) {
             var model = _this.graphModel.getNodeModelById(childId);
             if (model && !model.virtual) {

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

@@ -1,4 +1,7 @@
 import LogicFlow from '@logicflow/core';
+export interface SelectionConfig {
+    exclusiveMode?: boolean;
+}
 export declare class SelectionSelect {
     static pluginName: string;
     private container?;
@@ -7,11 +10,32 @@ export declare class SelectionSelect {
     private startPoint?;
     private endPoint?;
     private disabled;
-    private isDefaultStopMoveGraph;
     private isWholeNode;
     private isWholeEdge;
-    constructor({ lf }: LogicFlow.IExtensionProps);
-    render(lf: LogicFlow, domContainer: HTMLElement): void;
+    exclusiveMode: boolean;
+    private mouseDownInfo;
+    private originalStopMoveGraph;
+    constructor({ lf, options }: LogicFlow.IExtensionProps);
+    render(_: LogicFlow, domContainer: HTMLElement): void;
+    /**
+     * 清理选区状态
+     */
+    private cleanupSelectionState;
+    /**
+     * 切换框选模式
+     * @param exclusive 是否为独占模式。true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
+     */
+    setExclusiveMode(exclusive?: boolean): void;
+    private addEventListeners;
+    private removeEventListeners;
+    /**
+     * 处理画布空白处鼠标按下事件（非独占模式）
+     */
+    private handleBlankMouseDown;
+    /**
+     * 处理鼠标按下事件
+     */
+    private handleMouseDown;
     /**
      * 设置选中的灵敏度
      * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true