@logicflow/extension 1.2.0-alpha.12 → 1.2.0-alpha.15

package/cjs/bpmn-adapter/json2xml.js

@@ -26,7 +26,6 @@ function toXml(v, name, ind, deep) {
         xml += addIndSpace(ind, deep) + "<" + name;
         for (var m in v) {
             if (m.charAt(0) == "-") {
-                console.log(m, v[m]);
                 xml += " " + m.substr(1) + "=\"" + v[m].toString() + "\"";
             }
             else {

package/cjs/components/mini-map/index.js

@@ -64,12 +64,17 @@ var MiniMap = /** @class */ (function () {
                 y: e.y,
             };
         };
-        this.__drag = function (e) {
+        this.moveViewport = function (top, left) {
             var viewStyle = _this.__viewport.style;
-            _this.__viewPortTop += e.y - _this.__startPosition.y;
-            _this.__viewPortLeft += e.x - _this.__startPosition.x;
+            _this.__viewPortTop = top;
+            _this.__viewPortLeft = left;
             viewStyle.top = _this.__viewPortTop + "px";
             viewStyle.left = _this.__viewPortLeft + "px";
+        };
+        this.__drag = function (e) {
+            var top = _this.__viewPortTop + e.y - _this.__startPosition.y;
+            var left = _this.__viewPortLeft + e.x - _this.__startPosition.x;
+            _this.moveViewport(top, left);
             _this.__startPosition = {
                 x: e.x,
                 y: e.y,
@@ -88,6 +93,21 @@ var MiniMap = /** @class */ (function () {
         this.__drop = function () {
             document.removeEventListener('mousemove', _this.__drag);
             document.removeEventListener('mouseup', _this.__drop);
+            var top = _this.__viewPortTop;
+            var left = _this.__viewPortLeft;
+            if (_this.__viewPortLeft > _this.__width) {
+                left = _this.__width - _this.__viewPortWidth;
+            }
+            if (_this.__viewPortTop > _this.__height) {
+                top = _this.__height - _this.__viewPortHeight;
+            }
+            if (_this.__viewPortLeft < -_this.__width) {
+                left = 0;
+            }
+            if (_this.__viewPortTop < -_this.__height) {
+                top = 0;
+            }
+            _this.moveViewport(top, left);
         };
         this.__lf = lf;
         this.__miniMapWidth = lf.graphModel.width;
@@ -311,7 +331,7 @@ var MiniMap = /** @class */ (function () {
         var graphRatio = (this.__lf.graphModel.width / this.__lf.graphModel.height);
         var realViewPortHeight = realViewPortWidth / graphRatio;
         this.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
-        this.__viewPortLeft = -TRANSLATE_X * scale;
+        this.__viewPortLeft = TRANSLATE_X > 0 ? 0 : -TRANSLATE_X * scale;
         this.__viewPortWidth = realViewPortWidth;
         this.__viewPortHeight = realViewPortHeight;
         viewStyle.top = this.__viewPortTop + "px";

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

@@ -34,6 +34,7 @@ var SelectionSelect = /** @class */ (function () {
         this.__drawOff = function () {
             document.removeEventListener('mousemove', _this.__draw);
             document.removeEventListener('mouseup', _this.__drawOff);
+            _this.wrapper.oncontextmenu = null;
             _this.__domContainer.removeChild(_this.wrapper);
             var _a = _this.startPoint, x = _a.x, y = _a.y;
             var _b = _this.endPoint, x1 = _b.x, y1 = _b.y;
@@ -77,6 +78,9 @@ var SelectionSelect = /** @class */ (function () {
             _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 = _this.startPoint.y + "px";
             wrapper.style.left = _this.startPoint.x + "px";
             domContainer.appendChild(wrapper);

package/cjs/materials/group/GroupNode.js

@@ -79,6 +79,8 @@ var GroupNodeModel = /** @class */ (function (_super) {
         this.resizable = false;
         this.autoToFront = false;
         this.foldable = false;
+        // 是否可以被嵌套
+        this.nestable = false;
         if (this.properties.isFolded === undefined) {
             this.properties.isFolded = false;
         }
@@ -102,10 +104,25 @@ var GroupNodeModel = /** @class */ (function (_super) {
      * 3. 处理连线
      */
     GroupNodeModel.prototype.foldGroup = function (isFolded) {
-        var _this = this;
         this.setProperty('isFolded', isFolded);
         this.isFolded = isFolded;
         // step 1
+        this.foldRect(isFolded);
+        // step 2
+        var allEdges = this.foldChildren(isFolded);
+        // step 3
+        console.log({ allEdges: allEdges });
+        this.foldEdge(isFolded, allEdges);
+    };
+    GroupNodeModel.prototype.getAnchorStyle = function (anchorInfo) {
+        var style = _super.prototype.getAnchorStyle.call(this, anchorInfo);
+        style.stroke = 'transparent';
+        style.fill = 'transparent';
+        style.hover.fill = 'transparent';
+        style.hover.stroke = 'transparent';
+        return style;
+    };
+    GroupNodeModel.prototype.foldRect = function (isFolded) {
         if (isFolded) {
             this.unfoldedWidth = this.width;
             this.unfoldedHight = this.height;
@@ -124,25 +141,23 @@ var GroupNodeModel = /** @class */ (function (_super) {
                 y: this.y + this.unfoldedHight / 2 - this.foldedHeight / 2,
             });
         }
-        // step 2
+    };
+    GroupNodeModel.prototype.foldChildren = function (isFolded) {
+        var _this = this;
         var allEdges = this.incoming.edges.concat(this.outgoing.edges);
         this.children.forEach(function (elementId) {
             var nodeModel = _this.graphModel.getElement(elementId);
+            if (nodeModel.isGroup) {
+                var childEdges = nodeModel.foldChildren(isFolded || nodeModel.isFolded);
+                allEdges = allEdges.concat(childEdges);
+                nodeModel.foldEdge(isFolded, childEdges);
+            }
+            allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
             nodeModel.updateAttributes({
                 visible: !isFolded,
             });
-            allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
         });
-        // step 3
-        this.foldEdge(isFolded, allEdges);
-    };
-    GroupNodeModel.prototype.getAnchorStyle = function (anchorInfo) {
-        var style = _super.prototype.getAnchorStyle.call(this, anchorInfo);
-        style.stroke = 'transparent';
-        style.fill = 'transparent';
-        style.hover.fill = 'transparent';
-        style.hover.stroke = 'transparent';
-        return style;
+        return allEdges;
     };
     /**
      * 折叠分组的时候，处理分组自身的连线和分组内部子节点上的连线
@@ -267,6 +282,19 @@ var GroupNodeModel = /** @class */ (function (_super) {
     GroupNodeModel.prototype.removeChild = function (id) {
         this.children.delete(id);
     };
+    /**
+     * 获得包含嵌套组的所有子节点
+     */
+    GroupNodeModel.prototype.getChildren = function () {
+        var _this = this;
+        return __spread(this.children).flatMap(function (child) {
+            var model = _this.graphModel.getElement(child);
+            if (model.isGroup) {
+                return __spread([child], model.getChildren());
+            }
+            return child;
+        });
+    };
     GroupNodeModel.prototype.getAddableOutlineStyle = function () {
         return {
             stroke: '#FEB663',

package/cjs/materials/group/index.js

@@ -51,8 +51,7 @@ var Group = /** @class */ (function () {
                 preGroup.setAllowAppendChild(false);
             }
             // 然后再判断这个节点是否在某个group中，如果在，则将其添加到对应的group中
-            var bounds = _this.lf.getNodeModelById(data.id).getBounds();
-            var group = _this.getGroup(bounds);
+            var group = _this.getGroup(_this.lf.getNodeModelById(data.id));
             if (!group)
                 return;
             if (data.id !== group.id) {
@@ -81,8 +80,7 @@ var Group = /** @class */ (function () {
             var nodeModel = _this.lf.getNodeModelById(data.id);
             if (nodeModel.isGroup)
                 return;
-            var bounds = nodeModel.getBounds();
-            var newGroup = _this.getGroup(bounds);
+            var newGroup = _this.getGroup(nodeModel);
             if (newGroup || newGroup !== _this.activeGroup) {
                 if (_this.activeGroup) {
                     _this.activeGroup.setAllowAppendChild(false);
@@ -96,22 +94,28 @@ var Group = /** @class */ (function () {
         lf.register(GroupNode_1.default);
         this.lf = lf;
         lf.graphModel.addNodeMoveRules(function (model, deltaX, deltaY) {
-            if (model.isGroup) { // 如果移动的是分组，那么分组的子节点也跟着移动。
-                lf.graphModel.moveNodes(__spread(model.children), deltaX, deltaY, true);
-                return true;
-            }
             var groupModel = lf.getNodeModelById(_this.nodeGroupMap.get(model.id));
-            if (groupModel && groupModel.isRestrict) { // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
+            var allowMove = true;
+            if (groupModel && groupModel.isRestrict) {
+                // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
                 var _a = model.getBounds(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
-                var r = groupModel.isAllowMoveTo({
+                allowMove = groupModel.isAllowMoveTo({
                     x1: x1 + deltaX,
                     y1: y1 + deltaY,
                     x2: x2 + deltaX,
                     y2: y2 + deltaY,
                 });
-                return r;
             }
-            return true;
+            if (model.isGroup) {
+                // 如果移动的是分组，那么分组的子节点也跟着移动。
+                if (allowMove === true) {
+                    lf.graphModel.moveNodes(__spread(model.getChildren()), deltaX, deltaY, true);
+                }
+                else if (typeof allowMove !== 'boolean') {
+                    lf.graphModel.moveNodes(__spread(model.getChildren()), allowMove.x ? deltaX : 0, allowMove.y ? deltaY : 0, true);
+                }
+            }
+            return allowMove;
         });
         lf.graphModel.group = this;
         lf.on('node:add', this.appendNodeToGroup);
@@ -124,14 +128,32 @@ var Group = /** @class */ (function () {
     /**
      * 获取自定位置其所属分组
      */
-    Group.prototype.getGroup = function (bounds) {
+    Group.prototype.getGroup = function (nodeModel) {
+        if (nodeModel.nestable === false) {
+            return null;
+        }
+        var bounds = nodeModel.getBounds();
         var nodes = this.lf.graphModel.nodes;
+        var selectedModel = null;
         for (var i = 0; i < nodes.length; i++) {
             var model = nodes[i];
-            if (model.isGroup && model.isInRange(bounds)) {
-                return model;
+            if (model !== nodeModel && model.isGroup && model.isInRange(bounds)) {
+                if (selectedModel) {
+                    if (selectedModel.zIndex > model.zIndex) {
+                        selectedModel = model;
+                    }
+                    else if (selectedModel.zIndex === model.zIndex) {
+                        if (!model.isInRange(selectedModel.getBounds())) {
+                            selectedModel = model;
+                        }
+                    }
+                }
+                else {
+                    selectedModel = model;
+                }
             }
         }
+        return selectedModel;
     };
     /**
      * 获取某个节点所属的groupModel

package/cjs/tools/snapshot/index.js

@@ -164,7 +164,7 @@ var Snapshot = /** @class */ (function () {
         真实dom存在缩放影响其宽高数值
         在得到真实宽高后除以缩放比例即可得到正常宽高
         */
-        var base = document.getElementsByClassName('lf-base')[0];
+        var base = this.lf.graphModel.rootEl.querySelector('.lf-base');
         var bbox = base.getBoundingClientRect();
         var graphModel = this.lf.graphModel;
         var transformModel = graphModel.transformModel;

package/es/bpmn-adapter/json2xml.js

@@ -23,7 +23,6 @@ function toXml(v, name, ind, deep) {
         xml += addIndSpace(ind, deep) + "<" + name;
         for (var m in v) {
             if (m.charAt(0) == "-") {
-                console.log(m, v[m]);
                 xml += " " + m.substr(1) + "=\"" + v[m].toString() + "\"";
             }
             else {

package/es/components/mini-map/index.d.ts

@@ -68,6 +68,7 @@ declare class MiniMap {
     }): void;
     __createViewPort(): void;
     __startDrag: (e: any) => void;
+    moveViewport: (top: any, left: any) => void;
     __drag: (e: any) => void;
     __drop: () => void;
 }

package/es/components/mini-map/index.js

@@ -61,12 +61,17 @@ var MiniMap = /** @class */ (function () {
                 y: e.y,
             };
         };
-        this.__drag = function (e) {
+        this.moveViewport = function (top, left) {
             var viewStyle = _this.__viewport.style;
-            _this.__viewPortTop += e.y - _this.__startPosition.y;
-            _this.__viewPortLeft += e.x - _this.__startPosition.x;
+            _this.__viewPortTop = top;
+            _this.__viewPortLeft = left;
             viewStyle.top = _this.__viewPortTop + "px";
             viewStyle.left = _this.__viewPortLeft + "px";
+        };
+        this.__drag = function (e) {
+            var top = _this.__viewPortTop + e.y - _this.__startPosition.y;
+            var left = _this.__viewPortLeft + e.x - _this.__startPosition.x;
+            _this.moveViewport(top, left);
             _this.__startPosition = {
                 x: e.x,
                 y: e.y,
@@ -85,6 +90,21 @@ var MiniMap = /** @class */ (function () {
         this.__drop = function () {
             document.removeEventListener('mousemove', _this.__drag);
             document.removeEventListener('mouseup', _this.__drop);
+            var top = _this.__viewPortTop;
+            var left = _this.__viewPortLeft;
+            if (_this.__viewPortLeft > _this.__width) {
+                left = _this.__width - _this.__viewPortWidth;
+            }
+            if (_this.__viewPortTop > _this.__height) {
+                top = _this.__height - _this.__viewPortHeight;
+            }
+            if (_this.__viewPortLeft < -_this.__width) {
+                left = 0;
+            }
+            if (_this.__viewPortTop < -_this.__height) {
+                top = 0;
+            }
+            _this.moveViewport(top, left);
         };
         this.__lf = lf;
         this.__miniMapWidth = lf.graphModel.width;
@@ -308,7 +328,7 @@ var MiniMap = /** @class */ (function () {
         var graphRatio = (this.__lf.graphModel.width / this.__lf.graphModel.height);
         var realViewPortHeight = realViewPortWidth / graphRatio;
         this.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
-        this.__viewPortLeft = -TRANSLATE_X * scale;
+        this.__viewPortLeft = TRANSLATE_X > 0 ? 0 : -TRANSLATE_X * scale;
         this.__viewPortWidth = realViewPortWidth;
         this.__viewPortHeight = realViewPortHeight;
         viewStyle.top = this.__viewPortTop + "px";

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

@@ -31,6 +31,7 @@ var SelectionSelect = /** @class */ (function () {
         this.__drawOff = function () {
             document.removeEventListener('mousemove', _this.__draw);
             document.removeEventListener('mouseup', _this.__drawOff);
+            _this.wrapper.oncontextmenu = null;
             _this.__domContainer.removeChild(_this.wrapper);
             var _a = _this.startPoint, x = _a.x, y = _a.y;
             var _b = _this.endPoint, x1 = _b.x, y1 = _b.y;
@@ -74,6 +75,9 @@ var SelectionSelect = /** @class */ (function () {
             _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 = _this.startPoint.y + "px";
             wrapper.style.left = _this.startPoint.x + "px";
             domContainer.appendChild(wrapper);

package/es/materials/group/GroupNode.d.ts

@@ -47,6 +47,8 @@ declare class GroupNodeModel extends RectResize.model {
      */
     foldGroup(isFolded: any): void;
     getAnchorStyle(anchorInfo: any): Record<string, any>;
+    foldRect(isFolded: any): void;
+    foldChildren(isFolded: any): import("@logicflow/core/types/model/edge/BaseEdgeModel").BaseEdgeModel[];
     /**
      * 折叠分组的时候，处理分组自身的连线和分组内部子节点上的连线
      * 边的分类：
@@ -90,6 +92,10 @@ declare class GroupNodeModel extends RectResize.model {
      * @param id 节点id
      */
     removeChild(id: any): void;
+    /**
+     * 获得包含嵌套组的所有子节点
+     */
+    getChildren(): any[];
     getAddableOutlineStyle(): {
         stroke: string;
         strokeWidth: number;

package/es/materials/group/GroupNode.js

@@ -77,6 +77,8 @@ var GroupNodeModel = /** @class */ (function (_super) {
         this.resizable = false;
         this.autoToFront = false;
         this.foldable = false;
+        // 是否可以被嵌套
+        this.nestable = false;
         if (this.properties.isFolded === undefined) {
             this.properties.isFolded = false;
         }
@@ -100,10 +102,25 @@ var GroupNodeModel = /** @class */ (function (_super) {
      * 3. 处理连线
      */
     GroupNodeModel.prototype.foldGroup = function (isFolded) {
-        var _this = this;
         this.setProperty('isFolded', isFolded);
         this.isFolded = isFolded;
         // step 1
+        this.foldRect(isFolded);
+        // step 2
+        var allEdges = this.foldChildren(isFolded);
+        // step 3
+        console.log({ allEdges: allEdges });
+        this.foldEdge(isFolded, allEdges);
+    };
+    GroupNodeModel.prototype.getAnchorStyle = function (anchorInfo) {
+        var style = _super.prototype.getAnchorStyle.call(this, anchorInfo);
+        style.stroke = 'transparent';
+        style.fill = 'transparent';
+        style.hover.fill = 'transparent';
+        style.hover.stroke = 'transparent';
+        return style;
+    };
+    GroupNodeModel.prototype.foldRect = function (isFolded) {
         if (isFolded) {
             this.unfoldedWidth = this.width;
             this.unfoldedHight = this.height;
@@ -122,25 +139,23 @@ var GroupNodeModel = /** @class */ (function (_super) {
                 y: this.y + this.unfoldedHight / 2 - this.foldedHeight / 2,
             });
         }
-        // step 2
+    };
+    GroupNodeModel.prototype.foldChildren = function (isFolded) {
+        var _this = this;
         var allEdges = this.incoming.edges.concat(this.outgoing.edges);
         this.children.forEach(function (elementId) {
             var nodeModel = _this.graphModel.getElement(elementId);
+            if (nodeModel.isGroup) {
+                var childEdges = nodeModel.foldChildren(isFolded || nodeModel.isFolded);
+                allEdges = allEdges.concat(childEdges);
+                nodeModel.foldEdge(isFolded, childEdges);
+            }
+            allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
             nodeModel.updateAttributes({
                 visible: !isFolded,
             });
-            allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
         });
-        // step 3
-        this.foldEdge(isFolded, allEdges);
-    };
-    GroupNodeModel.prototype.getAnchorStyle = function (anchorInfo) {
-        var style = _super.prototype.getAnchorStyle.call(this, anchorInfo);
-        style.stroke = 'transparent';
-        style.fill = 'transparent';
-        style.hover.fill = 'transparent';
-        style.hover.stroke = 'transparent';
-        return style;
+        return allEdges;
     };
     /**
      * 折叠分组的时候，处理分组自身的连线和分组内部子节点上的连线
@@ -265,6 +280,19 @@ var GroupNodeModel = /** @class */ (function (_super) {
     GroupNodeModel.prototype.removeChild = function (id) {
         this.children.delete(id);
     };
+    /**
+     * 获得包含嵌套组的所有子节点
+     */
+    GroupNodeModel.prototype.getChildren = function () {
+        var _this = this;
+        return __spread(this.children).flatMap(function (child) {
+            var model = _this.graphModel.getElement(child);
+            if (model.isGroup) {
+                return __spread([child], model.getChildren());
+            }
+            return child;
+        });
+    };
     GroupNodeModel.prototype.getAddableOutlineStyle = function () {
         return {
             stroke: '#FEB663',

package/es/materials/group/index.d.ts

@@ -2,12 +2,6 @@ import LogicFlow, { BaseNodeModel } from '@logicflow/core';
 import GroupNode from './GroupNode';
 declare type BaseNodeId = string;
 declare type GroupId = string;
-declare type Bounds = {
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-};
 declare class Group {
     static pluginName: string;
     lf: LogicFlow;
@@ -29,7 +23,7 @@ declare class Group {
     /**
      * 获取自定位置其所属分组
      */
-    getGroup(bounds: Bounds): BaseNodeModel | undefined;
+    getGroup(nodeModel: BaseNodeModel): BaseNodeModel | undefined;
     /**
      * 获取某个节点所属的groupModel
      */

package/es/materials/group/index.js

@@ -47,8 +47,7 @@ var Group = /** @class */ (function () {
                 preGroup.setAllowAppendChild(false);
             }
             // 然后再判断这个节点是否在某个group中，如果在，则将其添加到对应的group中
-            var bounds = _this.lf.getNodeModelById(data.id).getBounds();
-            var group = _this.getGroup(bounds);
+            var group = _this.getGroup(_this.lf.getNodeModelById(data.id));
             if (!group)
                 return;
             if (data.id !== group.id) {
@@ -77,8 +76,7 @@ var Group = /** @class */ (function () {
             var nodeModel = _this.lf.getNodeModelById(data.id);
             if (nodeModel.isGroup)
                 return;
-            var bounds = nodeModel.getBounds();
-            var newGroup = _this.getGroup(bounds);
+            var newGroup = _this.getGroup(nodeModel);
             if (newGroup || newGroup !== _this.activeGroup) {
                 if (_this.activeGroup) {
                     _this.activeGroup.setAllowAppendChild(false);
@@ -92,22 +90,28 @@ var Group = /** @class */ (function () {
         lf.register(GroupNode);
         this.lf = lf;
         lf.graphModel.addNodeMoveRules(function (model, deltaX, deltaY) {
-            if (model.isGroup) { // 如果移动的是分组，那么分组的子节点也跟着移动。
-                lf.graphModel.moveNodes(__spread(model.children), deltaX, deltaY, true);
-                return true;
-            }
             var groupModel = lf.getNodeModelById(_this.nodeGroupMap.get(model.id));
-            if (groupModel && groupModel.isRestrict) { // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
+            var allowMove = true;
+            if (groupModel && groupModel.isRestrict) {
+                // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
                 var _a = model.getBounds(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
-                var r = groupModel.isAllowMoveTo({
+                allowMove = groupModel.isAllowMoveTo({
                     x1: x1 + deltaX,
                     y1: y1 + deltaY,
                     x2: x2 + deltaX,
                     y2: y2 + deltaY,
                 });
-                return r;
             }
-            return true;
+            if (model.isGroup) {
+                // 如果移动的是分组，那么分组的子节点也跟着移动。
+                if (allowMove === true) {
+                    lf.graphModel.moveNodes(__spread(model.getChildren()), deltaX, deltaY, true);
+                }
+                else if (typeof allowMove !== 'boolean') {
+                    lf.graphModel.moveNodes(__spread(model.getChildren()), allowMove.x ? deltaX : 0, allowMove.y ? deltaY : 0, true);
+                }
+            }
+            return allowMove;
         });
         lf.graphModel.group = this;
         lf.on('node:add', this.appendNodeToGroup);
@@ -120,14 +124,32 @@ var Group = /** @class */ (function () {
     /**
      * 获取自定位置其所属分组
      */
-    Group.prototype.getGroup = function (bounds) {
+    Group.prototype.getGroup = function (nodeModel) {
+        if (nodeModel.nestable === false) {
+            return null;
+        }
+        var bounds = nodeModel.getBounds();
         var nodes = this.lf.graphModel.nodes;
+        var selectedModel = null;
         for (var i = 0; i < nodes.length; i++) {
             var model = nodes[i];
-            if (model.isGroup && model.isInRange(bounds)) {
-                return model;
+            if (model !== nodeModel && model.isGroup && model.isInRange(bounds)) {
+                if (selectedModel) {
+                    if (selectedModel.zIndex > model.zIndex) {
+                        selectedModel = model;
+                    }
+                    else if (selectedModel.zIndex === model.zIndex) {
+                        if (!model.isInRange(selectedModel.getBounds())) {
+                            selectedModel = model;
+                        }
+                    }
+                }
+                else {
+                    selectedModel = model;
+                }
             }
         }
+        return selectedModel;
     };
     /**
      * 获取某个节点所属的groupModel

package/es/tools/snapshot/index.js

@@ -161,7 +161,7 @@ var Snapshot = /** @class */ (function () {
         真实dom存在缩放影响其宽高数值
         在得到真实宽高后除以缩放比例即可得到正常宽高
         */
-        var base = document.getElementsByClassName('lf-base')[0];
+        var base = this.lf.graphModel.rootEl.querySelector('.lf-base');
         var bbox = base.getBoundingClientRect();
         var graphModel = this.lf.graphModel;
         var transformModel = graphModel.transformModel;