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

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中的属性重名，否则将在转换过程中丢失

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

@@ -53,6 +53,10 @@ declare class Control extends Component<IProps> {
         deltaX: any;
         deltaY: any;
     }) => void;
+    /**
+     * 由于将拖拽放大缩小改成丝滑模式，这个时候需要在拖拽结束的时候，将节点的位置更新到grid上.
+     */
+    onDragEnd: () => void;
     render(): h.JSX.Element;
 }
 export default Control;

package/es/NodeResize/Control/Control.js

@@ -22,6 +22,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;
+};
 import { h, Component } from 'preact';
 import { LogicFlowUtil } from '@logicflow/core';
 import Rect from '../BasicShape/Rect';
@@ -273,8 +289,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 === ModelType.RECT_NODE || modelType === ModelType.HTML_NODE) {
                 _this.updateRect({ deltaX: deltaX, deltaY: deltaY });
@@ -287,23 +306,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/es/NodeResize/Node/DiamondResize.js

@@ -48,6 +48,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';
@@ -89,10 +92,10 @@ var DiamondResizeView = /** @class */ (function (_super) {
             h(Polygon, __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 (h("g", null,
             this.getResizeShape(),
-            isSelected ? this.getControlGroup() : ''));
+            isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return DiamondResizeView;
 }(DiamondNode));

package/es/NodeResize/Node/EllipseResize.js

@@ -35,6 +35,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';
@@ -72,10 +75,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 (h("g", null,
             this.getResizeShape(),
-            model.isSelected ? this.getControlGroup() : ''));
+            model.isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return EllipseResizeView;
 }(EllipseNode));

package/es/NodeResize/Node/HtmlResize.js

@@ -35,6 +35,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';
@@ -72,10 +75,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 (h("g", null,
             this.getResizeShape(),
-            isSelected ? this.getControlGroup() : ''));
+            isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return HtmlResizeView;
 }(HtmlNode));

package/es/NodeResize/Node/RectResize.js

@@ -35,6 +35,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';
@@ -76,10 +79,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 (h("g", null,
             this.getResizeShape(),
-            isSelected ? this.getControlGroup() : ''));
+            isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return RectResizeView;
 }(RectNode));

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;
@@ -40,8 +41,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);
                 }
@@ -74,6 +77,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/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

@@ -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;
@@ -98,6 +104,10 @@ declare class GroupNodeModel extends RectResize.model {
     };
     getData(): import("@logicflow/core").NodeData;
     getHistoryData(): import("@logicflow/core").NodeData;
+    /**
+     * 是否允许此节点添加到此分组中
+     */
+    isAllowAppendIn(nodeData: any): boolean;
 }
 declare class GroupNode extends RectResize.view {
     getControlGroup(): h.JSX.Element;

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

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;
@@ -16,6 +10,10 @@ declare class Group {
     constructor({ lf }: {
         lf: any;
     });
+    /**
+     * 获取一个节点内部所有的子节点，包裹分组的子节点
+     */
+    getNodeAllChild(model: any): any[];
     graphRendered: (data: any) => void;
     appendNodeToGroup: ({ data }: {
         data: any;
@@ -29,7 +27,7 @@ declare class Group {
     /**
      * 获取自定位置其所属分组
      */
-    getGroup(bounds: Bounds): BaseNodeModel | undefined;
+    getGroup(nodeModel: BaseNodeModel): BaseNodeModel | undefined;
     /**
      * 获取某个节点所属的groupModel
      */