@logicflow/extension 1.1.28 → 1.1.30

package/es/NodeResize/Control/Control.d.ts

@@ -22,16 +22,19 @@ declare class Control extends Component<IProps> {
         deltaX: any;
         deltaY: any;
     }) => void;
-    getResize: ({ index, deltaX, deltaY, width, height, pct }: {
+    getResize: ({ index, deltaX, deltaY, width, height, PCTResizeInfo, pct }: {
         index: any;
         deltaX: any;
         deltaY: any;
         width: any;
         height: any;
+        PCTResizeInfo: any;
         pct?: number;
     }) => {
         width: any;
         height: any;
+        deltaX: any;
+        deltaY: any;
     };
     updateRect: ({ deltaX, deltaY }: {
         deltaX: any;

package/es/NodeResize/Control/Control.js

@@ -57,8 +57,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;
@@ -69,7 +125,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:
@@ -84,7 +140,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({
@@ -93,6 +149,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1,
             });
             // 限制放大缩小的最大最小范围
@@ -105,7 +162,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;
@@ -152,7 +209,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;
@@ -162,6 +219,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
             });
             // 限制放大缩小的最大最小范围
@@ -174,12 +232,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,
@@ -216,7 +274,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;
@@ -226,6 +284,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
             });
             // 限制放大缩小的最大最小范围
@@ -238,12 +297,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/es/NodeResize/Node/DiamondResize.d.ts

@@ -1,5 +1,6 @@
 import { h, DiamondNode, DiamondNodeModel } from '@logicflow/core';
 declare class DiamondResizeModel extends DiamondNodeModel {
+    private PCTResizeInfo;
     constructor(data: any, graphModel: any);
     initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
@@ -14,6 +15,7 @@ declare class DiamondResizeModel extends DiamondNodeModel {
         fill: string;
         stroke: string;
     };
+    enableProportionResize(turnOn?: boolean): void;
 }
 declare class DiamondResizeView extends DiamondNode {
     getControlGroup(): h.JSX.Element;

package/es/NodeResize/Node/DiamondResize.js

@@ -70,6 +70,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;
 }(DiamondNodeModel));
 var DiamondResizeView = /** @class */ (function (_super) {

package/es/NodeResize/Node/EllipseResize.d.ts

@@ -1,5 +1,6 @@
 import { h, EllipseNode, EllipseNodeModel } from '@logicflow/core';
 declare class EllipseResizeModel extends EllipseNodeModel {
+    private PCTResizeInfo;
     constructor(data: any, graphModel: any);
     initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
@@ -14,6 +15,7 @@ declare class EllipseResizeModel extends EllipseNodeModel {
         fill: string;
         stroke: string;
     };
+    enableProportionResize(turnOn?: boolean): void;
 }
 declare class EllipseResizeView extends EllipseNode {
     getControlGroup(): h.JSX.Element;

package/es/NodeResize/Node/EllipseResize.js

@@ -57,6 +57,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;
 }(EllipseNodeModel));
 var EllipseResizeView = /** @class */ (function (_super) {

package/es/NodeResize/Node/HtmlResize.d.ts

@@ -1,5 +1,6 @@
 import { h, HtmlNode, HtmlNodeModel } from '@logicflow/core';
 declare class HtmlResizeModel extends HtmlNodeModel {
+    private PCTResizeInfo;
     constructor(data: any, graphModel: any);
     initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
@@ -14,6 +15,7 @@ declare class HtmlResizeModel extends HtmlNodeModel {
         fill: string;
         stroke: string;
     };
+    enableProportionResize(turnOn?: boolean): void;
 }
 declare class HtmlResizeView extends HtmlNode {
     getControlGroup(): h.JSX.Element;

package/es/NodeResize/Node/HtmlResize.js

@@ -57,6 +57,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;
 }(HtmlNodeModel));
 var HtmlResizeView = /** @class */ (function (_super) {

package/es/NodeResize/Node/RectResize.d.ts

@@ -1,5 +1,6 @@
 import { h, RectNode, RectNodeModel } from '@logicflow/core';
 declare class RectResizeModel extends RectNodeModel {
+    private PCTResizeInfo;
     constructor(data: any, graphModel: any);
     initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
@@ -16,6 +17,7 @@ declare class RectResizeModel extends RectNodeModel {
         stroke: string;
     };
     resize(deltaX: any, deltaY: any): void;
+    enableProportionResize(turnOn?: boolean): void;
 }
 declare class RectResizeView extends RectNode {
     getControlGroup(): h.JSX.Element;

package/es/NodeResize/Node/RectResize.js

@@ -61,6 +61,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;
 }(RectNodeModel));
 var RectResizeView = /** @class */ (function (_super) {

package/es/materials/curved-edge/index.d.ts

@@ -1,7 +1,8 @@
-import { Extension } from '@logicflow/core';
-interface CurvedEdgePlugin extends Extension {
-    [x: string]: any;
+import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core';
+declare class CurvedEdge extends PolylineEdge {
+    pointFilter(points: any): any;
+    getEdge(): import("preact").VNode<any>;
 }
-declare const CurvedEdge: CurvedEdgePlugin;
-export default CurvedEdge;
-export { CurvedEdge, };
+declare class CurvedEdgeModel extends PolylineEdgeModel {
+}
+export { CurvedEdge, CurvedEdgeModel, };

package/es/materials/curved-edge/index.js

@@ -11,6 +11,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;
@@ -28,15 +39,34 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 import { PolylineEdge, PolylineEdgeModel, h } from '@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) 如果一个点不为开始和结束，则在这个点的前后增加弧度开始和结束点。
@@ -44,42 +74,34 @@ 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 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 h('path', __assign({ d: d }, attrs));
     };
-    CurvedEdgeView.extendKey = 'curvedEdge';
-    return CurvedEdgeView;
+    return CurvedEdge;
 }(PolylineEdge));
 var CurvedEdgeModel = /** @class */ (function (_super) {
     __extends(CurvedEdgeModel, _super);
@@ -88,20 +110,6 @@ var CurvedEdgeModel = /** @class */ (function (_super) {
     }
     return CurvedEdgeModel;
 }(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,
-        });
-    },
-};
-export default CurvedEdge;
-export { CurvedEdge, };
+export { CurvedEdge, 
+// CurvedEdgeView,
+CurvedEdgeModel, };

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

@@ -102,10 +102,14 @@ declare class GroupNodeModel extends RectResize.model {
      * 是否允许此节点添加到此分组中
      */
     isAllowAppendIn(nodeData: any): boolean;
+    /**
+     * 当groupA被添加到groupB中时，将groupB及groupB所属的group的zIndex减1
+     */
+    toBack(): void;
 }
 declare class GroupNode extends RectResize.view {
     getControlGroup(): h.JSX.Element;
-    getAddedableShape(): import("preact").VNode<any>;
+    getAddableShape(): import("preact").VNode<any>;
     getFoldIcon(): import("preact").VNode<any>;
     getResizeShape(): import("preact").VNode<any>;
 }

package/es/materials/group/GroupNode.js

@@ -46,6 +46,7 @@ import { h } from '@logicflow/core';
 import { RectResize } from '../../NodeResize';
 var defaultWidth = 500;
 var defaultHeight = 300;
+var DEFAULT_BOTTOM_Z_INDEX = -10000;
 var GroupNodeModel = /** @class */ (function (_super) {
     __extends(GroupNodeModel, _super);
     function GroupNodeModel() {
@@ -68,8 +69,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;
@@ -274,6 +274,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) { // 如果分组被折叠
@@ -288,6 +289,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;
 }(RectResize.model));
 var GroupNode = /** @class */ (function (_super) {
@@ -299,7 +306,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;
@@ -345,7 +352,7 @@ var GroupNode = /** @class */ (function (_super) {
     };
     GroupNode.prototype.getResizeShape = function () {
         return h('g', {}, [
-            this.getAddedableShape(),
+            this.getAddableShape(),
             _super.prototype.getResizeShape.call(this),
             this.getFoldIcon(),
         ]);

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

@@ -11,6 +11,7 @@ declare type Bounds = {
 declare class Group {
     static pluginName: string;
     lf: LogicFlow;
+    topGroupZIndex: number;
     activeGroup: any;
     nodeGroupMap: Map<BaseNodeId, GroupId>;
     constructor({ lf }: {
@@ -30,10 +31,21 @@ declare class Group {
     setActiveGroup: ({ data }: {
         data: any;
     }) => void;
+    /**
+     * 1. 分组节点默认在普通节点下面。
+     * 2. 分组节点被选中后，会将分组节点以及其内部的其他分组节点放到其余分组节点的上面。
+     * 3. 分组节点取消选中后，不会将分组节点重置为原来的高度。
+     * 4. 由于LogicFlow核心目标是支持用户手动绘制流程图，所以不考虑一张流程图超过1000个分组节点的情况。
+     */
+    nodeSelected: ({ data }: {
+        data: any;
+    }) => void;
+    toFrontGroup: (model: any) => void;
     /**
      * 获取自定位置其所属分组
+     * 当分组重合时，优先返回最上层的分组
      */
-    getGroup(bounds: Bounds): BaseNodeModel | undefined;
+    getGroup(bounds: Bounds, nodeData: BaseNodeModel): BaseNodeModel | undefined;
     /**
      * 获取某个节点所属的groupModel
      */