@logicflow/extension 1.1.28 → 1.1.30

package/cjs/NodeResize/Control/Control.js

@@ -59,8 +59,64 @@ var Control = /** @class */ (function (_super) {
         };
         // 计算control拖动后，节点的宽高
         _this.getResize = function (_a) {
-            var index = _a.index, deltaX = _a.deltaX, deltaY = _a.deltaY, width = _a.width, height = _a.height, _b = _a.pct, pct = _b === void 0 ? 1 : _b;
-            var resize = { width: width, height: height };
+            var index = _a.index, deltaX = _a.deltaX, deltaY = _a.deltaY, width = _a.width, height = _a.height, PCTResizeInfo = _a.PCTResizeInfo, _b = _a.pct, pct = _b === void 0 ? 1 : _b;
+            var resize = { width: width, height: height, deltaX: deltaX, deltaY: deltaY };
+            if (PCTResizeInfo) {
+                var sensitivity = 4; // 越低越灵敏
+                var deltaScale = 0;
+                var combineDleta = 0;
+                switch (index) {
+                    case 0:
+                        combineDleta = (deltaX * -1 - deltaY) / sensitivity;
+                        break;
+                    case 1:
+                        combineDleta = (deltaX - deltaY) / sensitivity;
+                        break;
+                    case 2:
+                        combineDleta = (deltaX + deltaY) / sensitivity;
+                        break;
+                    case 3:
+                        combineDleta = (deltaX * -1 + deltaY) / sensitivity;
+                        break;
+                    default:
+                        break;
+                }
+                if (combineDleta !== 0) {
+                    deltaScale = Math.round((combineDleta / PCTResizeInfo.ResizeBasis.basisHeight)
+                        * 100000) / 1000;
+                }
+                PCTResizeInfo.ResizePCT.widthPCT = Math.max(Math.min(PCTResizeInfo.ResizePCT.widthPCT + deltaScale, PCTResizeInfo.ScaleLimit.maxScaleLimit), PCTResizeInfo.ScaleLimit.minScaleLimit);
+                PCTResizeInfo.ResizePCT.hightPCT = Math.max(Math.min(PCTResizeInfo.ResizePCT.hightPCT + deltaScale, PCTResizeInfo.ScaleLimit.maxScaleLimit), PCTResizeInfo.ScaleLimit.minScaleLimit);
+                var spcWidth = Math.round((PCTResizeInfo.ResizePCT.widthPCT
+                    * PCTResizeInfo.ResizeBasis.basisWidth) / 100);
+                var spcHeight = Math.round((PCTResizeInfo.ResizePCT.hightPCT
+                    * PCTResizeInfo.ResizeBasis.basisHeight) / 100);
+                switch (index) {
+                    case 0:
+                        deltaX = width - spcWidth;
+                        deltaY = height - spcHeight;
+                        break;
+                    case 1:
+                        deltaX = spcWidth - width;
+                        deltaY = height - spcHeight;
+                        break;
+                    case 2:
+                        deltaX = spcWidth - width;
+                        deltaY = spcHeight - height;
+                        break;
+                    case 3:
+                        deltaX = width - spcWidth;
+                        deltaY = spcHeight - height;
+                        break;
+                    default:
+                        break;
+                }
+                resize.width = spcWidth;
+                resize.height = spcHeight;
+                resize.deltaX = deltaX / pct;
+                resize.deltaY = deltaY / pct;
+                return resize;
+            }
             switch (index) {
                 case 0:
                     resize.width = width - deltaX * pct;
@@ -71,7 +127,7 @@ var Control = /** @class */ (function (_super) {
                     resize.height = height - deltaY * pct;
                     break;
                 case 2:
-                    resize.width = width + deltaX;
+                    resize.width = width + deltaX * pct;
                     resize.height = height + deltaY * pct;
                     break;
                 case 3:
@@ -86,7 +142,7 @@ var Control = /** @class */ (function (_super) {
         // 矩形更新
         _this.updateRect = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
-            var _b = _this.nodeModel, id = _b.id, x = _b.x, y = _b.y, width = _b.width, height = _b.height, radius = _b.radius;
+            var _b = _this.nodeModel, id = _b.id, x = _b.x, y = _b.y, width = _b.width, height = _b.height, radius = _b.radius, PCTResizeInfo = _b.PCTResizeInfo;
             // 更新中心点位置，更新文案位置
             var index = _this.index;
             var size = _this.getResize({
@@ -95,6 +151,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1,
             });
             // 限制放大缩小的最大最小范围
@@ -107,7 +164,7 @@ var Control = /** @class */ (function (_super) {
                 _this.dragHandler.cancelDrag();
                 return;
             }
-            _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
+            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
             // 更新宽高
             _this.nodeModel.width = size.width;
             _this.nodeModel.height = size.height;
@@ -154,7 +211,7 @@ var Control = /** @class */ (function (_super) {
         // 椭圆更新
         _this.updateEllipse = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
-            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y;
+            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y, PCTResizeInfo = _b.PCTResizeInfo;
             var index = _this.index;
             var width = rx;
             var height = ry;
@@ -164,6 +221,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
             });
             // 限制放大缩小的最大最小范围
@@ -176,12 +234,12 @@ var Control = /** @class */ (function (_super) {
                 return;
             }
             // 更新中心点位置，更新文案位置
-            _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
+            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
+            _this.nodeModel.rx = size.width;
             // @ts-ignore
-            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
+            _this.nodeModel.ry = size.height;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,
@@ -218,7 +276,7 @@ var Control = /** @class */ (function (_super) {
         // 菱形更新
         _this.updateDiamond = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
-            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y;
+            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y, PCTResizeInfo = _b.PCTResizeInfo;
             var index = _this.index;
             var width = rx;
             var height = ry;
@@ -228,6 +286,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
             });
             // 限制放大缩小的最大最小范围
@@ -240,12 +299,12 @@ var Control = /** @class */ (function (_super) {
                 return;
             }
             // 更新中心点位置，更新文案位置
-            _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
+            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
+            _this.nodeModel.rx = size.width;
             // @ts-ignore
-            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
+            _this.nodeModel.ry = size.height;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,

package/cjs/NodeResize/Node/DiamondResize.js

@@ -72,6 +72,22 @@ var DiamondResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
+    // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+    DiamondResizeModel.prototype.enableProportionResize = function (turnOn) {
+        if (turnOn === void 0) { turnOn = true; }
+        if (turnOn) {
+            var ResizePCT = { widthPCT: 100, hightPCT: 100 };
+            var ResizeBasis = { basisWidth: this.rx, basisHeight: this.ry };
+            var ScaleLimit = {
+                maxScaleLimit: Math.min((this.maxWidth / (this.rx * 2)) * 100, (this.maxHeight / (this.ry * 2)) * 100),
+                minScaleLimit: Math.max((this.minWidth / (this.rx * 2)) * 100, (this.minHeight / (this.ry * 2)) * 100),
+            };
+            this.PCTResizeInfo = { ResizePCT: ResizePCT, ResizeBasis: ResizeBasis, ScaleLimit: ScaleLimit };
+        }
+        else {
+            delete this.PCTResizeInfo;
+        }
+    };
     return DiamondResizeModel;
 }(core_1.DiamondNodeModel));
 var DiamondResizeView = /** @class */ (function (_super) {

package/cjs/NodeResize/Node/EllipseResize.js

@@ -59,6 +59,22 @@ var EllipseResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
+    // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+    EllipseResizeModel.prototype.enableProportionResize = function (turnOn) {
+        if (turnOn === void 0) { turnOn = true; }
+        if (turnOn) {
+            var ResizePCT = { widthPCT: 100, hightPCT: 100 };
+            var ResizeBasis = { basisWidth: this.rx, basisHeight: this.ry };
+            var ScaleLimit = {
+                maxScaleLimit: Math.min((this.maxWidth / (this.rx * 2)) * 100, (this.maxHeight / (this.ry * 2)) * 100),
+                minScaleLimit: Math.max((this.minWidth / (this.rx * 2)) * 100, (this.minHeight / (this.ry * 2)) * 100),
+            };
+            this.PCTResizeInfo = { ResizePCT: ResizePCT, ResizeBasis: ResizeBasis, ScaleLimit: ScaleLimit };
+        }
+        else {
+            delete this.PCTResizeInfo;
+        }
+    };
     return EllipseResizeModel;
 }(core_1.EllipseNodeModel));
 var EllipseResizeView = /** @class */ (function (_super) {

package/cjs/NodeResize/Node/HtmlResize.js

@@ -59,6 +59,22 @@ var HtmlResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
+    // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+    HtmlResizeModel.prototype.enableProportionResize = function (turnOn) {
+        if (turnOn === void 0) { turnOn = true; }
+        if (turnOn) {
+            var ResizePCT = { widthPCT: 100, hightPCT: 100 };
+            var ResizeBasis = { basisWidth: this.width, basisHeight: this.height };
+            var ScaleLimit = {
+                maxScaleLimit: Math.min((this.maxWidth / this.width) * 100, (this.maxHeight / this.height) * 100),
+                minScaleLimit: Math.max((this.minWidth / this.width) * 100, (this.minHeight / this.height) * 100),
+            };
+            this.PCTResizeInfo = { ResizePCT: ResizePCT, ResizeBasis: ResizeBasis, ScaleLimit: ScaleLimit };
+        }
+        else {
+            delete this.PCTResizeInfo;
+        }
+    };
     return HtmlResizeModel;
 }(core_1.HtmlNodeModel));
 var HtmlResizeView = /** @class */ (function (_super) {

package/cjs/NodeResize/Node/RectResize.js

@@ -63,6 +63,22 @@ var RectResizeModel = /** @class */ (function (_super) {
     RectResizeModel.prototype.resize = function (deltaX, deltaY) {
         console.log(deltaX, deltaY);
     };
+    // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+    RectResizeModel.prototype.enableProportionResize = function (turnOn) {
+        if (turnOn === void 0) { turnOn = true; }
+        if (turnOn) {
+            var ResizePCT = { widthPCT: 100, hightPCT: 100 };
+            var ResizeBasis = { basisWidth: this.width, basisHeight: this.height };
+            var ScaleLimit = {
+                maxScaleLimit: Math.min((this.maxWidth / this.width) * 100, (this.maxHeight / this.height) * 100),
+                minScaleLimit: Math.max((this.minWidth / this.width) * 100, (this.minHeight / this.height) * 100),
+            };
+            this.PCTResizeInfo = { ResizePCT: ResizePCT, ResizeBasis: ResizeBasis, ScaleLimit: ScaleLimit };
+        }
+        else {
+            delete this.PCTResizeInfo;
+        }
+    };
     return RectResizeModel;
 }(core_1.RectNodeModel));
 var RectResizeView = /** @class */ (function (_super) {

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

@@ -48,6 +48,7 @@ var core_1 = require("@logicflow/core");
 var NodeResize_1 = require("../../NodeResize");
 var defaultWidth = 500;
 var defaultHeight = 300;
+var DEFAULT_BOTTOM_Z_INDEX = -10000;
 var GroupNodeModel = /** @class */ (function (_super) {
     __extends(GroupNodeModel, _super);
     function GroupNodeModel() {
@@ -70,8 +71,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
         this.height = defaultHeight;
         this.foldedWidth = 80;
         this.foldedHeight = 60;
-        // todo: 参考bpmn.js, 分组和未加入分组的节点重合时，未加入分组的节点在分组之下。方便标识。
-        this.zIndex = -1;
+        this.zIndex = DEFAULT_BOTTOM_Z_INDEX;
         this.radius = 0;
         this.text.editable = false;
         this.text.draggable = false;
@@ -276,6 +276,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
     GroupNodeModel.prototype.getHistoryData = function () {
         var data = _super.prototype.getData.call(this);
         data.children = __spread(this.children);
+        data.isGroup = true;
         var properties = data.properties;
         delete properties.groupAddable;
         if (properties.isFolded) { // 如果分组被折叠
@@ -290,6 +291,12 @@ var GroupNodeModel = /** @class */ (function (_super) {
     GroupNodeModel.prototype.isAllowAppendIn = function (nodeData) {
         return true;
     };
+    /**
+     * 当groupA被添加到groupB中时，将groupB及groupB所属的group的zIndex减1
+     */
+    GroupNodeModel.prototype.toBack = function () {
+        this.zIndex--;
+    };
     return GroupNodeModel;
 }(NodeResize_1.RectResize.model));
 var GroupNode = /** @class */ (function (_super) {
@@ -301,7 +308,7 @@ var GroupNode = /** @class */ (function (_super) {
         var _a = this.props.model, resizable = _a.resizable, properties = _a.properties;
         return resizable && !properties.isFolded ? _super.prototype.getControlGroup.call(this) : null;
     };
-    GroupNode.prototype.getAddedableShape = function () {
+    GroupNode.prototype.getAddableShape = function () {
         var _a = this.props.model, width = _a.width, height = _a.height, x = _a.x, y = _a.y, radius = _a.radius, properties = _a.properties;
         if (!properties.groupAddable)
             return null;
@@ -347,7 +354,7 @@ var GroupNode = /** @class */ (function (_super) {
     };
     GroupNode.prototype.getResizeShape = function () {
         return core_1.h('g', {}, [
-            this.getAddedableShape(),
+            this.getAddableShape(),
             _super.prototype.getResizeShape.call(this),
             this.getFoldIcon(),
         ]);

package/cjs/materials/group/index.js

@@ -3,10 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupNode = exports.Group = void 0;
 var GroupNode_1 = require("./GroupNode");
 exports.GroupNode = GroupNode_1.default;
+var DEFAULT_TOP_Z_INDEX = -1000;
+var DEFAULT_BOTTOM_Z_INDEX = -10000;
 var Group = /** @class */ (function () {
     function Group(_a) {
         var _this = this;
         var lf = _a.lf;
+        this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
         this.nodeGroupMap = new Map();
         this.graphRendered = function (data) {
             // 如果节点
@@ -31,8 +34,9 @@ var Group = /** @class */ (function () {
                 preGroup.setAllowAppendChild(false);
             }
             // 然后再判断这个节点是否在某个group中，如果在，则将其添加到对应的group中
-            var bounds = _this.lf.getNodeModelById(data.id).getBounds();
-            var group = _this.getGroup(bounds);
+            var nodeModel = _this.lf.getNodeModelById(data.id);
+            var bounds = nodeModel.getBounds();
+            var group = _this.getGroup(bounds, data);
             if (!group)
                 return;
             var isAllowAppendIn = group.isAllowAppendIn(data);
@@ -43,20 +47,26 @@ var Group = /** @class */ (function () {
                 });
                 return;
             }
-            if (data.id !== group.id) {
-                group.addChild(data.id);
-                _this.nodeGroupMap.set(data.id, group.id);
-                group.setAllowAppendChild(false);
-            }
-            else if (data.children && data.children.length > 0) {
-                // 表示当前添加的节点是一个新增的group
+            group.addChild(data.id);
+            _this.nodeGroupMap.set(data.id, group.id);
+            group.setAllowAppendChild(false);
+            // 如果这个节点是分组，那么将其子节点也记录下来
+            if (nodeModel.isGroup) {
                 data.children.forEach(function (nodeId) {
                     _this.nodeGroupMap.set(nodeId, data.id);
                 });
+                _this.nodeSelected({ data: data });
             }
         };
         this.deleteGroupChild = function (_a) {
             var data = _a.data;
+            // 如果删除的是分组节点，则同时删除分组的子节点
+            if (data.children) {
+                data.children.forEach(function (nodeId) {
+                    _this.nodeGroupMap.delete(nodeId);
+                    _this.lf.deleteNode(nodeId);
+                });
+            }
             var groupId = _this.nodeGroupMap.get(data.id);
             if (groupId) {
                 var group = _this.lf.getNodeModelById(groupId);
@@ -68,7 +78,7 @@ var Group = /** @class */ (function () {
             var data = _a.data;
             var nodeModel = _this.lf.getNodeModelById(data.id);
             var bounds = nodeModel.getBounds();
-            var newGroup = _this.getGroup(bounds);
+            var newGroup = _this.getGroup(bounds, data);
             if (_this.activeGroup) {
                 _this.activeGroup.setAllowAppendChild(false);
             }
@@ -81,6 +91,46 @@ var Group = /** @class */ (function () {
             _this.activeGroup = newGroup;
             _this.activeGroup.setAllowAppendChild(true);
         };
+        /**
+         * 1. 分组节点默认在普通节点下面。
+         * 2. 分组节点被选中后，会将分组节点以及其内部的其他分组节点放到其余分组节点的上面。
+         * 3. 分组节点取消选中后，不会将分组节点重置为原来的高度。
+         * 4. 由于LogicFlow核心目标是支持用户手动绘制流程图，所以不考虑一张流程图超过1000个分组节点的情况。
+         */
+        this.nodeSelected = function (_a) {
+            var data = _a.data;
+            var nodeModel = _this.lf.getNodeModelById(data.id);
+            _this.toFrontGroup(nodeModel);
+            // 重置所有的group zIndex,防止group节点zIndex增长为正。
+            if (_this.topGroupZIndex > DEFAULT_TOP_Z_INDEX) {
+                _this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
+                var allGroups = _this.lf.graphModel.nodes
+                    .filter(function (node) { return node.isGroup; })
+                    .sort(function (a, b) { return a.zIndex - b.zIndex; });
+                var preZIndex = 0;
+                for (var i = 0; i < allGroups.length; i++) {
+                    var group = allGroups[i];
+                    if (group.zIndex !== preZIndex) {
+                        _this.topGroupZIndex++;
+                        preZIndex = group.zIndex;
+                    }
+                    group.setZIndex(_this.topGroupZIndex);
+                }
+            }
+        };
+        this.toFrontGroup = function (model) {
+            if (!model || !model.isGroup) {
+                return;
+            }
+            _this.topGroupZIndex++;
+            model.setZIndex(_this.topGroupZIndex);
+            if (model.children) {
+                model.children.forEach(function (nodeId) {
+                    var node = _this.lf.getNodeModelById(nodeId);
+                    _this.toFrontGroup(node);
+                });
+            }
+        };
         lf.register(GroupNode_1.default);
         this.lf = lf;
         lf.graphModel.addNodeMoveRules(function (model, deltaX, deltaY) {
@@ -103,11 +153,10 @@ var Group = /** @class */ (function () {
             return true;
         });
         lf.graphModel.group = this;
-        lf.on('node:add', this.appendNodeToGroup);
+        lf.on('node:add,node:drop', this.appendNodeToGroup);
         lf.on('node:delete', this.deleteGroupChild);
-        lf.on('node:drop', this.appendNodeToGroup);
-        lf.on('node:dnd-drag', this.setActiveGroup);
-        lf.on('node:drag', this.setActiveGroup);
+        lf.on('node:dnd-drag,node:drag', this.setActiveGroup);
+        lf.on('node:click', this.nodeSelected);
         lf.on('graph:rendered', this.graphRendered);
     }
     /**
@@ -129,15 +178,22 @@ var Group = /** @class */ (function () {
     };
     /**
      * 获取自定位置其所属分组
+     * 当分组重合时，优先返回最上层的分组
      */
-    Group.prototype.getGroup = function (bounds) {
+    Group.prototype.getGroup = function (bounds, nodeData) {
         var nodes = this.lf.graphModel.nodes;
-        for (var i = 0; i < nodes.length; i++) {
-            var model = nodes[i];
-            if (model.isGroup && model.isInRange(bounds)) {
-                return model;
+        var groups = nodes.filter(function (node) { return node.isGroup && node.isInRange(bounds) && node.id !== nodeData.id; });
+        if (groups.length === 0)
+            return;
+        if (groups.length === 1)
+            return groups[0];
+        var topGroup = groups[groups.length - 1];
+        for (var i = groups.length - 2; i >= 0; i--) {
+            if (groups[i].zIndex > topGroup.zIndex) {
+                topGroup = groups[i];
             }
         }
+        return topGroup;
     };
     /**
      * 获取某个节点所属的groupModel

package/cjs/turbo-adapter/index.js

@@ -84,7 +84,7 @@ function convertEdgeToTurboElement(edge) {
         outgoing: [targetNodeId],
         type: getTurboType(type),
         dockers: [],
-        properties: __assign(__assign({}, properties), { name: (text && text.value) || '', text: text, startPoint: JSON.stringify(startPoint), endPoint: JSON.stringify(endPoint), pointsList: JSON.stringify(text) }),
+        properties: __assign(__assign({}, properties), { name: (text && text.value) || '', text: text, startPoint: JSON.stringify(startPoint), endPoint: JSON.stringify(endPoint), pointsList: JSON.stringify(pointsList) }),
         key: id,
     };
 }
@@ -123,16 +123,13 @@ function convertFlowElementToEdge(element) {
         properties: {},
     };
     if (startPoint) {
-        // @ts-ignore
         edge.startPoint = JSON.parse(startPoint);
     }
     if (endPoint) {
-        // @ts-ignore
         edge.endPoint = JSON.parse(endPoint);
     }
     if (pointsList) {
-        // @ts-ignore
-        edge.endPoint = JSON.parse(pointsList);
+        edge.pointsList = JSON.parse(pointsList);
     }
     // 这种转换方式，在自定义属性中不能与excludeProperties中的属性重名，否则将在转换过程中丢失
     var excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text'];
@@ -147,6 +144,7 @@ function convertFlowElementToEdge(element) {
 function convertFlowElementToNode(element) {
     var properties = element.properties, key = element.key, type = element.type, bounds = element.bounds;
     var x = properties.x, y = properties.y;
+    var text = properties.text;
     if (x === undefined) {
         var _a = __read(bounds, 2), _b = _a[0], x1 = _b.x, y1 = _b.y, _c = _a[1], x2 = _c.x, y2 = _c.y;
         x = (x1 + x2) / 2;
@@ -157,7 +155,7 @@ function convertFlowElementToNode(element) {
         type: TurboTypeMap[type],
         x: x,
         y: y,
-        text: properties.text,
+        text: text,
         properties: {},
     };
     // 这种转换方式，在自定义属性中不能与excludeProperties中的属性重名，否则将在转换过程中丢失