@logicflow/extension 1.2.0-alpha.9 → 1.2.0-next.0

package/cjs/NodeResize/Control/Control.js

@@ -23,6 +23,22 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
+    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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var preact_1 = require("preact");
 var core_1 = require("@logicflow/core");
@@ -275,8 +291,11 @@ var Control = /** @class */ (function (_super) {
             _this.graphModel.eventCenter.emit('node:resize', { oldNodeSize: oldNodeSize, newNodeSize: newNodeSize });
         };
         _this.onDragging = function (_a) {
+            var _b;
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
+            var transformModel = _this.graphModel.transformModel;
             var modelType = _this.nodeModel.modelType;
+            _b = __read(transformModel.fixDeltaXY(deltaX, deltaY), 2), deltaX = _b[0], deltaY = _b[1];
             // html和矩形的计算方式是一样的，共用一个方法
             if (modelType === Util_1.ModelType.RECT_NODE || modelType === Util_1.ModelType.HTML_NODE) {
                 _this.updateRect({ deltaX: deltaX, deltaY: deltaY });
@@ -289,23 +308,32 @@ var Control = /** @class */ (function (_super) {
                 _this.updateDiamond({ deltaX: deltaX, deltaY: deltaY });
             }
         };
+        /**
+         * 由于将拖拽放大缩小改成丝滑模式，这个时候需要在拖拽结束的时候，将节点的位置更新到grid上.
+         */
+        _this.onDragEnd = function () {
+            var _a = _this.graphModel.gridSize, gridSize = _a === void 0 ? 1 : _a;
+            var x = gridSize * Math.round(_this.nodeModel.x / gridSize);
+            var y = gridSize * Math.round(_this.nodeModel.y / gridSize);
+            _this.nodeModel.moveTo(x, y);
+        };
         _this.index = props.index;
         _this.nodeModel = props.model;
         _this.graphModel = props.graphModel;
-        var gridSize = _this.graphModel.gridSize;
         // 为保证对齐线功能正常使用，step默认是网格grid的两倍，
         // 没有网格设置，默认为2，保证坐标是整数
-        var step = 2;
-        if (gridSize > 1) {
-            step = 2 * gridSize;
-        }
-        if (_this.nodeModel.gridSize) {
-            step = 2 * _this.nodeModel.gridSize;
-        }
+        // let step = 2;
+        // if (gridSize > 1) {
+        //   step = 2 * gridSize;
+        // }
+        // if (this.nodeModel.gridSize) {
+        //   step = 2 * this.nodeModel.gridSize;
+        // }
         _this.state = {};
         _this.dragHandler = new StepDrag({
             onDragging: _this.onDragging,
-            step: step,
+            onDragEnd: _this.onDragEnd,
+            step: 1,
         });
         return _this;
     }

package/cjs/NodeResize/Node/DiamondResize.js

@@ -50,6 +50,9 @@ var DiamondResizeModel = /** @class */ (function (_super) {
     };
     DiamondResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
+        var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
+        if (isSilentMode)
+            return style;
         style.stroke = 'none';
         if (style.hover) {
             style.hover.stroke = 'none';
@@ -91,10 +94,10 @@ var DiamondResizeView = /** @class */ (function (_super) {
             core_1.h(Polygon_1.default, __assign({}, style, { points: points }))));
     };
     DiamondResizeView.prototype.getShape = function () {
-        var isSelected = this.props.model.isSelected;
+        var _a = this.props, isSelected = _a.model.isSelected, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
         return (core_1.h("g", null,
             this.getResizeShape(),
-            isSelected ? this.getControlGroup() : ''));
+            isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return DiamondResizeView;
 }(core_1.DiamondNode));

package/cjs/NodeResize/Node/EllipseResize.js

@@ -37,6 +37,9 @@ var EllipseResizeModel = /** @class */ (function (_super) {
     };
     EllipseResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
+        var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
+        if (isSilentMode)
+            return style;
         style.stroke = 'none';
         if (style.hover) {
             style.hover.stroke = 'none';
@@ -74,10 +77,10 @@ var EllipseResizeView = /** @class */ (function (_super) {
         return _super.prototype.getShape.call(this);
     };
     EllipseResizeView.prototype.getShape = function () {
-        var model = this.props.model;
+        var _a = this.props, model = _a.model, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
         return (core_1.h("g", null,
             this.getResizeShape(),
-            model.isSelected ? this.getControlGroup() : ''));
+            model.isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return EllipseResizeView;
 }(core_1.EllipseNode));

package/cjs/NodeResize/Node/HtmlResize.js

@@ -37,6 +37,9 @@ var HtmlResizeModel = /** @class */ (function (_super) {
     };
     HtmlResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
+        var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
+        if (isSilentMode)
+            return style;
         style.stroke = 'none';
         if (style.hover) {
             style.hover.stroke = 'none';
@@ -74,10 +77,10 @@ var HtmlResizeView = /** @class */ (function (_super) {
         return _super.prototype.getShape.call(this);
     };
     HtmlResizeView.prototype.getShape = function () {
-        var isSelected = this.props.model.isSelected;
+        var _a = this.props, isSelected = _a.model.isSelected, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
         return (core_1.h("g", null,
             this.getResizeShape(),
-            isSelected ? this.getControlGroup() : ''));
+            isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return HtmlResizeView;
 }(core_1.HtmlNode));

package/cjs/NodeResize/Node/RectResize.js

@@ -37,6 +37,9 @@ var RectResizeModel = /** @class */ (function (_super) {
     };
     RectResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
+        var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
+        if (isSilentMode)
+            return style;
         style.stroke = 'none';
         if (style.hover) {
             style.hover.stroke = 'none';
@@ -78,10 +81,10 @@ var RectResizeView = /** @class */ (function (_super) {
         return _super.prototype.getShape.call(this);
     };
     RectResizeView.prototype.getShape = function () {
-        var isSelected = this.props.model.isSelected;
+        var _a = this.props, isSelected = _a.model.isSelected, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
         return (core_1.h("g", null,
             this.getResizeShape(),
-            isSelected ? this.getControlGroup() : ''));
+            isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return RectResizeView;
 }(core_1.RectNode));

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;
@@ -43,8 +44,10 @@ var SelectionSelect = /** @class */ (function () {
             }
             var lt = [Math.min(x, x1), Math.min(y, y1)];
             var rt = [Math.max(x, x1), Math.max(y, y1)];
-            var elements = _this.lf.graphModel.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode);
+            var elements = _this.lf.graphModel.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode, true);
+            var group = _this.lf.graphModel.group;
             elements.forEach(function (element) {
+                // 如果节点属于分组，则不不选中节点
                 if (_this.isSelectElement(element)) {
                     _this.lf.selectElementById(element.id, true);
                 }
@@ -77,6 +80,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/curved-edge/index.js

@@ -12,6 +12,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+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;
@@ -29,17 +40,36 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurvedEdge = void 0;
+exports.CurvedEdgeModel = exports.CurvedEdge = void 0;
 var core_1 = require("@logicflow/core");
-var CurvedEdgeView = /** @class */ (function (_super) {
-    __extends(CurvedEdgeView, _super);
-    function CurvedEdgeView() {
+var CurvedEdge = /** @class */ (function (_super) {
+    __extends(CurvedEdge, _super);
+    function CurvedEdge() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    CurvedEdgeView.prototype.getEdge = function () {
-        var _a = this.props.model.getEdgeStyle(), strokeWidth = _a.strokeWidth, stroke = _a.stroke, strokeDashArray = _a.strokeDashArray;
-        var points = this.props.model.points;
-        var points2 = points.split(' ').map(function (p) { return p.split(',').map(function (a) { return Number(a); }); });
+    CurvedEdge.prototype.pointFilter = function (points) {
+        var allPoints = points;
+        var i = 1;
+        while (i < allPoints.length - 1) {
+            var _a = __read(allPoints[i - 1], 2), x = _a[0], y = _a[1];
+            var _b = __read(allPoints[i], 2), x1 = _b[0], y1 = _b[1];
+            var _c = __read(allPoints[i + 1], 2), x2 = _c[0], y2 = _c[1];
+            if ((x === x1 && x1 === x2)
+                || (y === y1 && y1 === y2)) {
+                allPoints.splice(i, 1);
+            }
+            else {
+                i++;
+            }
+        }
+        return allPoints;
+    };
+    CurvedEdge.prototype.getEdge = function () {
+        var model = this.props.model;
+        var points = model.points, isAnimation = model.isAnimation, arrowConfig = model.arrowConfig, _a = model.radius, radius = _a === void 0 ? 5 : _a;
+        var style = model.getEdgeStyle();
+        var animationStyle = model.getEdgeAnimationStyle();
+        var points2 = this.pointFilter(points.split(' ').map(function (p) { return p.split(',').map(function (a) { return Number(a); }); }));
         var _b = __read(points2[0], 2), startX = _b[0], startY = _b[1];
         var d = "M" + startX + " " + startY;
         // 1) 如果一个点不为开始和结束，则在这个点的前后增加弧度开始和结束点。
@@ -47,43 +77,36 @@ var CurvedEdgeView = /** @class */ (function (_super) {
         //    如果x相同则前一个点的x也不变，
         //    y为（这个点的y 大于前一个点的y, 则 为 这个点的y - 5；小于前一个点的y, 则为这个点的y+5）
         //    同理，判断这个点与后一个点的x,y是否相同，如果x相同，则y进行加减，如果y相同，则x进行加减
-        // todo: 好丑，看看怎么优化下
-        var space = 5;
         for (var i = 1; i < points2.length - 1; i++) {
             var _c = __read(points2[i - 1], 2), preX = _c[0], preY = _c[1];
             var _d = __read(points2[i], 2), currentX = _d[0], currentY = _d[1];
             var _e = __read(points2[i + 1], 2), nextX = _e[0], nextY = _e[1];
             if (currentX === preX && currentY !== preY) {
-                var y = currentY > preY ? currentY - space : currentY + space;
+                var y = currentY > preY ? currentY - radius : currentY + radius;
                 d = d + " L " + currentX + " " + y;
             }
             if (currentY === preY && currentX !== preX) {
-                var x = currentX > preX ? currentX - space : currentX + space;
+                var x = currentX > preX ? currentX - radius : currentX + radius;
                 d = d + " L " + x + " " + currentY;
             }
             d = d + " Q " + currentX + " " + currentY;
             if (currentX === nextX && currentY !== nextY) {
-                var y = currentY > nextY ? currentY - space : currentY + space;
+                var y = currentY > nextY ? currentY - radius : currentY + radius;
                 d = d + " " + currentX + " " + y;
             }
             if (currentY === nextY && currentX !== nextX) {
-                var x = currentX > nextX ? currentX - space : currentX + space;
+                var x = currentX > nextX ? currentX - radius : currentX + radius;
                 d = d + " " + x + " " + currentY;
             }
         }
         var _f = __read(points2[points2.length - 1], 2), endX = _f[0], endY = _f[1];
         d = d + " L " + endX + " " + endY;
-        return core_1.h('path', {
-            d: d,
-            strokeWidth: strokeWidth,
-            stroke: stroke,
-            fill: 'none',
-            strokeDashArray: strokeDashArray,
-        });
+        var attrs = __assign(__assign(__assign({ d: d, style: isAnimation ? animationStyle : {} }, style), arrowConfig), { fill: 'none' });
+        return core_1.h('path', __assign({ d: d }, attrs));
     };
-    CurvedEdgeView.extendKey = 'curvedEdge';
-    return CurvedEdgeView;
+    return CurvedEdge;
 }(core_1.PolylineEdge));
+exports.CurvedEdge = CurvedEdge;
 var CurvedEdgeModel = /** @class */ (function (_super) {
     __extends(CurvedEdgeModel, _super);
     function CurvedEdgeModel() {
@@ -91,20 +114,4 @@ var CurvedEdgeModel = /** @class */ (function (_super) {
     }
     return CurvedEdgeModel;
 }(core_1.PolylineEdgeModel));
-var CurvedEdge = {
-    pluginName: 'curved-edge',
-    curvedSpace: 5,
-    init: function (_a) {
-        var curvedSpace = _a.curvedSpace;
-        CurvedEdge.curvedSpace = curvedSpace;
-    },
-    install: function (lf) {
-        lf.register({
-            type: 'curved-edge',
-            view: CurvedEdgeView,
-            model: CurvedEdgeModel,
-        });
-    },
-};
-exports.CurvedEdge = CurvedEdge;
-exports.default = CurvedEdge;
+exports.CurvedEdgeModel = CurvedEdgeModel;

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',
@@ -294,6 +322,12 @@ var GroupNodeModel = /** @class */ (function (_super) {
         }
         return data;
     };
+    /**
+     * 是否允许此节点添加到此分组中
+     */
+    GroupNodeModel.prototype.isAllowAppendIn = function (nodeData) {
+        return true;
+    };
     return GroupNodeModel;
 }(NodeResize_1.RectResize.model));
 var GroupNode = /** @class */ (function (_super) {

package/cjs/materials/group/index.js

@@ -51,10 +51,17 @@ 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;
+            var isAllowAppendIn = group.isAllowAppendIn(data);
+            if (!isAllowAppendIn) {
+                _this.lf.emit('group:not-allowed', {
+                    group: group.getData(),
+                    node: data,
+                });
+                return;
+            }
             if (data.id !== group.id) {
                 group.addChild(data.id);
                 _this.nodeGroupMap.set(data.id, group.id);
@@ -79,39 +86,49 @@ var Group = /** @class */ (function () {
         this.setActiveGroup = function (_a) {
             var data = _a.data;
             var nodeModel = _this.lf.getNodeModelById(data.id);
-            if (nodeModel.isGroup)
+            var newGroup = _this.getGroup(nodeModel);
+            if (_this.activeGroup) {
+                _this.activeGroup.setAllowAppendChild(false);
+            }
+            if (!newGroup || (nodeModel.isGroup && newGroup.id === data.id))
+                return;
+            var isAllowAppendIn = newGroup.isAllowAppendIn(data);
+            if (!isAllowAppendIn) {
                 return;
-            var bounds = nodeModel.getBounds();
-            var newGroup = _this.getGroup(bounds);
-            if (newGroup || newGroup !== _this.activeGroup) {
-                if (_this.activeGroup) {
-                    _this.activeGroup.setAllowAppendChild(false);
-                }
-                if (newGroup) {
-                    _this.activeGroup = newGroup;
-                    _this.activeGroup.setAllowAppendChild(true);
-                }
             }
+            _this.activeGroup = newGroup;
+            _this.activeGroup.setAllowAppendChild(true);
         };
         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);
+                var nodeIds = _this.getNodeAllChild(model);
+                lf.graphModel.moveNodes(nodeIds, 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);
@@ -121,17 +138,52 @@ var Group = /** @class */ (function () {
         lf.on('node:drag', this.setActiveGroup);
         lf.on('graph:rendered', this.graphRendered);
     }
+    /**
+     * 获取一个节点内部所有的子节点，包裹分组的子节点
+     */
+    Group.prototype.getNodeAllChild = function (model) {
+        var _this = this;
+        var nodeIds = [];
+        if (model.children) {
+            model.children.forEach(function (nodeId) {
+                nodeIds.push(nodeId);
+                var nodeModel = _this.lf.getNodeModelById(nodeId);
+                if (nodeModel.isGroup) {
+                    nodeIds = nodeIds.concat(_this.getNodeAllChild(nodeModel));
+                }
+            });
+        }
+        return nodeIds;
+    };
     /**
      * 获取自定位置其所属分组
      */
-    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;