@logicflow/extension 1.1.0-alpha.0 → 1.1.0-alpha.4

package/cjs/materials/group/index.js

@@ -20,13 +20,26 @@ var __spread = (this && this.__spread) || function () {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Group = void 0;
+exports.GroupNode = exports.Group = void 0;
 var GroupNode_1 = require("./GroupNode");
+exports.GroupNode = GroupNode_1.default;
 var Group = /** @class */ (function () {
     function Group(_a) {
         var _this = this;
         var lf = _a.lf;
         this.nodeGroupMap = new Map();
+        this.graphRendered = function (data) {
+            // 如果节点
+            if (data && data.nodes) {
+                data.nodes.forEach(function (node) {
+                    if (node.children) {
+                        node.children.forEach(function (nodeId) {
+                            _this.nodeGroupMap.set(nodeId, node.id);
+                        });
+                    }
+                });
+            }
+        };
         this.appendNodeToGrop = function (_a) {
             var data = _a.data;
             // 如果这个节点之前已经在group中了，则将其从之前的group中移除
@@ -48,14 +61,19 @@ var Group = /** @class */ (function () {
         };
         this.setActiveGroup = function (_a) {
             var data = _a.data;
-            if (_this.activeGroup) {
-                _this.activeGroup.setAllowAppendChild(false);
-                _this.activeGroup = undefined;
-            }
-            var bounds = _this.lf.getNodeModelById(data.id).getBounds();
-            _this.activeGroup = _this.getGroup(bounds);
-            if (_this.activeGroup && _this.activeGroup.id !== data.id) {
-                _this.activeGroup.setAllowAppendChild(true);
+            var nodeModel = _this.lf.getNodeModelById(data.id);
+            if (nodeModel.isGroup)
+                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);
+                }
             }
         };
         lf.register(GroupNode_1.default);
@@ -82,6 +100,7 @@ var Group = /** @class */ (function () {
         lf.on('node:drop', this.appendNodeToGrop);
         lf.on('node:dnd-move', this.setActiveGroup);
         lf.on('node:drag', this.setActiveGroup);
+        lf.on('graph:rendered', this.graphRendered);
     }
     Group.prototype.getGroups = function () {
         var groups = [];

package/cjs/style/index.css

@@ -22,8 +22,9 @@
   background: #efefef;
 }
 .lf-control-item.disabled {
-  filter: opacity(0.6);
-  cursor: not-allowed;
+  filter: opacity(0.5);
+  /* cursor: not-allowed; */
+  pointer-events: none;
 }
 .lf-control-item.disabled:hover {
   background: #fff;

package/cjs/tools/snapshot/index.js

@@ -9,21 +9,25 @@ var Snapshot = {
     install: function (lf) {
         var _this = this;
         this.lf = lf;
-        this.offsetX = Number.MAX_SAFE_INTEGER;
-        this.offsetY = Number.MAX_SAFE_INTEGER;
         /* 下载快照 */
         lf.getSnapshot = function (fileName, backgroundColor) {
+            _this.offsetX = Number.MAX_SAFE_INTEGER;
+            _this.offsetY = Number.MAX_SAFE_INTEGER;
             _this.fileName = fileName || "logic-flow." + Date.now() + ".png";
             var svgRootElement = _this.getSvgRootElement(lf);
             _this.downloadSvg(svgRootElement, _this.fileName, backgroundColor);
         };
         /* 获取Blob对象，用户图片上传 */
         lf.getSnapshotBlob = function (backgroundColor) {
+            _this.offsetX = Number.MAX_SAFE_INTEGER;
+            _this.offsetY = Number.MAX_SAFE_INTEGER;
             var svgRootElement = _this.getSvgRootElement(lf);
             return _this.getBlob(svgRootElement, backgroundColor);
         };
         /* 获取Base64对象，用户图片上传 */
         lf.getSnapshotBase64 = function (backgroundColor) {
+            _this.offsetX = Number.MAX_SAFE_INTEGER;
+            _this.offsetY = Number.MAX_SAFE_INTEGER;
             var svgRootElement = _this.getSvgRootElement(lf);
             return _this.getBase64(svgRootElement, backgroundColor);
         };
@@ -175,6 +179,7 @@ var Snapshot = {
         canvas.width = bboxWidth * dpr + 80;
         canvas.height = bboxHeight * dpr + 80;
         var ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.scale(dpr, dpr);
         // 如果有背景色，设置流程图导出的背景色
         if (backgroundColor) {

package/es/NodeResize/Control/Control.js

@@ -268,7 +268,8 @@ var Control = /** @class */ (function (_super) {
         _this.onDraging = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
             var modelType = _this.nodeModel.modelType;
-            if (modelType === ModelType.RECT_NODE) {
+            // html和矩形的计算方式是一样的，共用一个方法
+            if (modelType === ModelType.RECT_NODE || modelType === ModelType.HTML_NODE) {
                 _this.updateRect({ deltaX: deltaX, deltaY: deltaY });
             }
             else if (modelType === ModelType.ELLIPSE_NODE) {

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

@@ -3,6 +3,7 @@ export declare enum ModelType {
     CIRCLE_NODE = "circle-node",
     POLYGON_NODE = "polygon-node",
     RECT_NODE = "rect-node",
+    HTML_NODE = "html-node",
     TEXT_NODE = "text-node",
     ELLIPSE_NODE = "ellipse-node",
     DIAMOND_NODE = "diamond-node",

package/es/NodeResize/Control/Util.js

@@ -4,6 +4,7 @@ export var ModelType;
     ModelType["CIRCLE_NODE"] = "circle-node";
     ModelType["POLYGON_NODE"] = "polygon-node";
     ModelType["RECT_NODE"] = "rect-node";
+    ModelType["HTML_NODE"] = "html-node";
     ModelType["TEXT_NODE"] = "text-node";
     ModelType["ELLIPSE_NODE"] = "ellipse-node";
     ModelType["DIAMOND_NODE"] = "diamond-node";

package/es/NodeResize/Node/EllipseResize.js

@@ -11,20 +11,8 @@ 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);
-};
 import { h, EllipseNode, EllipseNodeModel } from '@logicflow/core';
 import ControlGroup from '../Control/ControlGroup';
-import Ellipse from '../BasicShape/Ellipse';
 var EllipseResizeModel = /** @class */ (function (_super) {
     __extends(EllipseResizeModel, _super);
     function EllipseResizeModel(data, graphModel) {
@@ -66,11 +54,7 @@ var EllipseResizeView = /** @class */ (function (_super) {
     };
     // getResizeShape绘制图形，功能等同于基础椭圆的getShape功能，可以通过复写此方法，进行节点自定义
     EllipseResizeView.prototype.getResizeShape = function () {
-        var model = this.props.model;
-        var rx = model.rx, ry = model.ry, x = model.x, y = model.y;
-        var style = model.getNodeStyle();
-        return (h("g", null,
-            h(Ellipse, __assign({}, style, { rx: rx, ry: ry, x: x, y: y }))));
+        return _super.prototype.getShape.call(this);
     };
     EllipseResizeView.prototype.getShape = function () {
         var model = this.props.model;

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

@@ -0,0 +1,20 @@
+import { h, HtmlNode, HtmlNodeModel } from '@logicflow/core';
+declare class HtmlResizeModel extends HtmlNodeModel {
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
+    setAttributes(): void;
+}
+declare class HtmlResizeView extends HtmlNode {
+    getControlGroup(): h.JSX.Element;
+    getResizeShape(): h.JSX.Element;
+    getShape(): h.JSX.Element;
+}
+declare const HtmlResize: {
+    type: string;
+    view: typeof HtmlResizeView;
+    model: typeof HtmlResizeModel;
+};
+export default HtmlResize;

package/es/NodeResize/Node/HtmlResize.js

@@ -0,0 +1,70 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { h, HtmlNode, HtmlNodeModel } from '@logicflow/core';
+import ControlGroup from '../Control/ControlGroup';
+var HtmlResizeModel = /** @class */ (function (_super) {
+    __extends(HtmlResizeModel, _super);
+    function HtmlResizeModel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.minWidth = 30;
+        _this.minHeight = 30;
+        _this.maxWidth = 2000;
+        _this.maxHeight = 2000;
+        return _this;
+    }
+    HtmlResizeModel.prototype.getOutlineStyle = function () {
+        var style = _super.prototype.getOutlineStyle.call(this);
+        style.stroke = 'none';
+        if (style.hover) {
+            style.hover.stroke = 'none';
+        }
+        return style;
+    };
+    HtmlResizeModel.prototype.setAttributes = function () {
+        // @ts-ignore
+        var nodeSize = this.properties.nodeSize;
+        if (nodeSize) {
+            this.width = nodeSize.width;
+            this.height = nodeSize.height;
+        }
+    };
+    return HtmlResizeModel;
+}(HtmlNodeModel));
+var HtmlResizeView = /** @class */ (function (_super) {
+    __extends(HtmlResizeView, _super);
+    function HtmlResizeView() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HtmlResizeView.prototype.getControlGroup = function () {
+        var _a = this.props, model = _a.model, graphModel = _a.graphModel;
+        return (h(ControlGroup, { model: model, graphModel: graphModel }));
+    };
+    // getResizeShape绘制图形，功能等同于基础矩形的getShape功能，可以通过复写此方法，进行节点自定义
+    HtmlResizeView.prototype.getResizeShape = function () {
+        return _super.prototype.getShape.call(this);
+    };
+    HtmlResizeView.prototype.getShape = function () {
+        var isSelected = this.props.model.isSelected;
+        return (h("g", null,
+            this.getResizeShape(),
+            isSelected ? this.getControlGroup() : ''));
+    };
+    return HtmlResizeView;
+}(HtmlNode));
+var HtmlResize = {
+    type: 'html',
+    view: HtmlResizeView,
+    model: HtmlResizeModel,
+};
+export default HtmlResize;

package/es/NodeResize/index.js

@@ -1,6 +1,7 @@
 import RectResize from './Node/RectResize';
 import EllipseResize from './Node/EllipseResize';
 import DiamondResize from './Node/DiamondResize';
+import HtmlResize from './Node/HtmlResize';
 var NodeResize = {
     pluginName: 'nodeResize',
     // 拖动step
@@ -56,6 +57,11 @@ var NodeResize = {
             view: DiamondResize.view,
             model: DiamondResize.model,
         });
+        lf.register({
+            type: HtmlResize.type,
+            view: HtmlResize.view,
+            model: HtmlResize.model,
+        });
     },
 };
 export default NodeResize;

package/es/components/context-menu/index.d.ts

@@ -10,6 +10,7 @@ declare class ContextMenu {
         lf: any;
     });
     render(lf: any, container: any): void;
+    setContextMenuByType(type: any, menus: any): void;
     /**
      * 隐藏菜单
      */

package/es/components/context-menu/index.js

@@ -30,7 +30,7 @@ var ContextMenu = /** @class */ (function () {
         this.__menuDOM.className = 'lf-inner-context';
         this.menuTypeMap.set(COMMON_TYPE_KEY, []);
         this.lf.setContextMenuByType = function (type, menus) {
-            _this.menuTypeMap.set(type, menus);
+            _this.setContextMenuByType(type, menus);
         };
         this.lf.setContextMenuItems = function (menus) {
             _this.setContextMenuItems(menus);
@@ -60,6 +60,9 @@ var ContextMenu = /** @class */ (function () {
             _this.hideContextMenu();
         });
     };
+    ContextMenu.prototype.setContextMenuByType = function (type, menus) {
+        this.menuTypeMap.set(type, menus);
+    };
     /**
      * 隐藏菜单
      */

package/es/components/menu/index.js

@@ -30,13 +30,13 @@ var Menu = /** @class */ (function () {
         this.lf = lf;
         this.menuTypeMap = new Map();
         this.init();
-        this.lf.extension.menu.setMenuConfig = function (config) {
+        this.lf.setMenuConfig = function (config) {
             _this.setMenuConfig(config);
         };
-        this.lf.extension.menu.addMenuConfig = function (config) {
+        this.lf.addMenuConfig = function (config) {
             _this.addMenuConfig(config);
         };
-        this.lf.extension.menu.setMenuByType = function (config) {
+        this.lf.setMenuByType = function (config) {
             _this.setMenuByType(config);
         };
     }

package/es/group-shrink/index.d.ts

@@ -0,0 +1,28 @@
+declare class GroupShrink {
+    static pluginName: string;
+    group: any;
+    lf: any;
+    shrinkWidth: number;
+    shrinkHeight: number;
+    constructor({ lf }: {
+        lf: any;
+    });
+    /**
+     * 收缩
+     */
+    startShrink(group: any): void;
+    /**
+     * 展开
+     */
+    startExpand(group: any): void;
+    /**
+     * 获取分组内的节点上的所有边,以及计算新的分组节点需要连接的边，之后删除原来的边
+     */
+    private getGroupEdges;
+    /**
+     * 获取分组内的节点和左上角节点,获取到有效信息后，删除节点
+     */
+    private getGroupNodes;
+    private getGraphDataWithGroup;
+}
+export { GroupShrink, };

package/es/group-shrink/index.js

@@ -0,0 +1,210 @@
+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;
+    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;
+};
+var __spread = (this && this.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+import { remove } from 'lodash-es';
+var GroupShrink = /** @class */ (function () {
+    function GroupShrink(_a) {
+        var _this = this;
+        var lf = _a.lf;
+        var _b;
+        this.group = null; // group节点
+        this.lf = null; // lf 实例
+        this.shrinkWidth = 100; // 收缩后节点宽度
+        this.shrinkHeight = 60; // 收缩后节点高度
+        this.getGraphDataWithGroup = function () {
+            var _a = _this.lf.graphModel.modelToGraphData(), nodes = _a.nodes, edges = _a.edges;
+            var groupNodes = [];
+            var groupEdges = [];
+            var shrinkedGroupIds = [];
+            nodes.forEach(function (node) {
+                if (node.type === 'group' && node.properties.shrinkProperty && node.properties.shrinkProperty) {
+                    var _a = node.properties.shrinkProperty, shrinked = _a.shrinked, groupNode = _a.groupNode, innerNodes = _a.innerNodes, innerEdges = _a.innerEdges;
+                    if (shrinked) {
+                        // 是收缩状态下的分组节点，需要恢复原来的节点和边
+                        node = groupNode;
+                        groupNodes = __spread(groupNodes, innerNodes);
+                        groupEdges = __spread(groupEdges, innerEdges);
+                        shrinkedGroupIds.push(groupNode.id);
+                    }
+                }
+            });
+            // 移除与收缩分组节点相连的边
+            if (shrinkedGroupIds.length) {
+                remove(edges, function (edge) {
+                    var sourceNodeId = edge.sourceNodeId, targetNodeId = edge.targetNodeId;
+                    return shrinkedGroupIds.indexOf(sourceNodeId) > -1
+                        || shrinkedGroupIds.indexOf(targetNodeId) > -1;
+                });
+            }
+            return {
+                nodes: __spread(nodes, groupNodes),
+                edges: __spread(edges, groupEdges),
+            };
+        };
+        this.lf = lf;
+        this.lf.extension = __assign(__assign({}, ((_b = this.lf.extension) !== null && _b !== void 0 ? _b : {})), { groupShrink: this });
+        this.lf.getGraphData = this.getGraphDataWithGroup;
+    }
+    /**
+     * 收缩
+     */
+    GroupShrink.prototype.startShrink = function (group) {
+        var _this = this;
+        if (group.type !== 'group') {
+            throw new Error('Only groupNode can be shrinked!');
+        }
+        this.group = group;
+        var nodeModel = this.lf.getNodeModelById(group.id);
+        var shrinkConfig = nodeModel.getProperties().shrinkProperty;
+        if (shrinkConfig && shrinkConfig.shrinked) {
+            throw new Error('GroupNode which is shrinked cannot be shrinked again!');
+        }
+        var shrinkProperty = {
+            shrinked: true,
+            groupNode: __assign({}, this.group),
+            innerNodes: [],
+            innerEdges: [],
+        };
+        var newEdges = []; // 需要重新生成的边
+        var innerNodes = []; // 分组内节点
+        var innerEdges = []; // 分组内部边
+        var minX = null;
+        var minY = null;
+        // 处理分组内的节点和边
+        if (this.group && this.group.children && this.group.children.length) {
+            var edgesInfo = this.getGroupEdges();
+            newEdges = edgesInfo.newEdges;
+            innerEdges = edgesInfo.innerEdges;
+            var nodesInfo = this.getGroupNodes();
+            innerNodes = nodesInfo.innerNodes; // 分组内节点信息
+            minX = nodesInfo.minX; // 左上角节点的x
+            minY = nodesInfo.minY; // 左上角节点的y
+        }
+        shrinkProperty.innerNodes = innerNodes;
+        shrinkProperty.innerEdges = innerEdges;
+        this.lf.setProperties(this.group.id, { shrinkProperty: shrinkProperty }); // 分组节点收缩前状态、分组内节点、分组内边存入properties
+        // 收缩后的分组节点移动到分组内左上角的节点位置
+        nodeModel.x = minX || this.group.x;
+        nodeModel.y = minY || this.group.y;
+        // 收缩，调整节点大小
+        nodeModel.width = this.shrinkWidth;
+        nodeModel.height = this.shrinkHeight;
+        // 生成与分组节点相连的边
+        newEdges.forEach(function (edgeConfig) {
+            _this.lf.addEdge(edgeConfig);
+        });
+    };
+    /**
+     * 展开
+     */
+    GroupShrink.prototype.startExpand = function (group) {
+        var _this = this;
+        this.group = group;
+        var nodeModel = this.lf.getNodeModelById(group.id);
+        var _a = nodeModel.getProperties().shrinkProperty, shrinkProperty = _a === void 0 ? {} : _a;
+        var shrinked = shrinkProperty.shrinked, groupNode = shrinkProperty.groupNode, innerNodes = shrinkProperty.innerNodes, innerEdges = shrinkProperty.innerEdges;
+        if (!shrinked) {
+            throw new Error('GroupNode which is not shrinked cannot be expanded');
+        }
+        // 重新渲染分组节点
+        this.lf.deleteNode(group.id);
+        this.lf.addNode(groupNode);
+        // 恢复分组内的节点
+        innerNodes.forEach(function (item) {
+            _this.lf.addNode(item);
+        });
+        // 恢复分组内的节点上所有边
+        innerEdges.forEach(function (item) {
+            _this.lf.addEdge(item);
+        });
+        // 修改properties
+        this.lf.setProperties(group.id, { shrinkProperty: { shrinked: false } });
+    };
+    /**
+     * 获取分组内的节点上的所有边,以及计算新的分组节点需要连接的边，之后删除原来的边
+     */
+    GroupShrink.prototype.getGroupEdges = function () {
+        var _this = this;
+        var edges = this.lf.graphModel.modelToGraphData().edges;
+        var children = this.group.children;
+        var innerEdges = [];
+        var newEdges = [];
+        edges.forEach(function (item) {
+            var startInGroup = children.indexOf(item.sourceNodeId) > -1;
+            var endInGroup = children.indexOf(item.targetNodeId) > -1;
+            if (startInGroup || endInGroup) {
+                innerEdges.push(item);
+                if (startInGroup && !endInGroup) {
+                    // 从分组内向外的边
+                    newEdges.push({
+                        sourceNodeId: _this.group.id,
+                        targetNodeId: item.targetNodeId,
+                    });
+                }
+                if (!startInGroup && endInGroup) {
+                    // 从外部指向分组内的
+                    newEdges.push({
+                        sourceNodeId: item.sourceNodeId,
+                        targetNodeId: _this.group.id,
+                    });
+                }
+                _this.lf.deleteEdge(item.id);
+            }
+        });
+        return { innerEdges: innerEdges, newEdges: newEdges };
+    };
+    /**
+     * 获取分组内的节点和左上角节点,获取到有效信息后，删除节点
+     */
+    GroupShrink.prototype.getGroupNodes = function () {
+        var _this = this;
+        var innerNodes = [];
+        var nodes = this.lf.graphModel.modelToGraphData().nodes;
+        var children = this.group.children;
+        var minX = null;
+        var minY = null;
+        // 遍历所有节点，在分组内的， 暂存&删除
+        nodes.forEach(function (item) {
+            if (children.indexOf(item.id) > -1) {
+                innerNodes.push(item);
+                if ((!minX || item.x < minX) && (!minY || item.y < minY)) {
+                    minX = item.x;
+                    minY = item.y;
+                }
+                _this.lf.deleteNode(item.id);
+            }
+        });
+        return { innerNodes: innerNodes, minX: minX, minY: minY };
+    };
+    GroupShrink.pluginName = 'group-shrink';
+    return GroupShrink;
+}());
+export { GroupShrink, };

package/es/index.d.ts

@@ -16,3 +16,4 @@ export * from './tools/flow-path';
 export * from './tools/auto-layout';
 export * from './bpmn-adapter/xml2json';
 export * from './bpmn-adapter/json2xml';
+export * from './group-shrink';

package/es/index.js

@@ -17,3 +17,4 @@ export * from './tools/flow-path';
 export * from './tools/auto-layout';
 export * from './bpmn-adapter/xml2json';
 export * from './bpmn-adapter/json2xml';
+export * from './group-shrink';

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

@@ -1,13 +1,23 @@
-import { RectNode, RectNodeModel } from '@logicflow/core';
-declare class GroupNodeModel extends RectNodeModel {
+import { h } from '@logicflow/core';
+import { RectResize } from '../../NodeResize';
+declare class GroupNodeModel extends RectResize.model {
     readonly isGroup = true;
-    children: Set<unknown>;
+    children: Set<string>;
     isRestrict: boolean;
-    setAttributes(): void;
+    resizable: boolean;
+    foldedWidth: number;
+    foldedHeight: number;
+    unfoldedWidth: number;
+    unfoldedHight: number;
+    initNodeData(data: any): void;
+    foldGroup(isFolded: any): void;
     /**
-     * 设置是否允许子节点被拖动移除分组
+     * 折叠分组的时候，处理分组内部子节点上的连线
+     * 1. 为了保证校验规则不被打乱，所以只隐藏子节点上面的连线。
+     * 2. 重新创建一个属性一样的边。
+     * 3. 这个边拥有virtual=true的属性，表示不支持直接修改此边内容。
      */
-    setIsRestrict(isRestrict: any): void;
+    private foldEdge;
     isInRange({ x1, y1, x2, y2 }: {
         x1: any;
         y1: any;
@@ -15,15 +25,29 @@ declare class GroupNodeModel extends RectNodeModel {
         y2: any;
     }): boolean;
     setAllowAppendChild(isAllow: any): void;
+    /**
+     * 添加分组子节点
+     * @param id 节点id
+     */
     addChild(id: any): void;
+    /**
+     * 删除分组子节点
+     * @param id 节点id
+     */
     removeChild(id: any): void;
+    getAddableOutlineStyle(): {
+        stroke: string;
+        strokeWidth: number;
+        strokeDasharray: string;
+        fill: string;
+    };
     getData(): import("@logicflow/core").NodeData;
 }
-declare class GroupNode extends RectNode {
-    /**
-     * 重新toFront，阻止其置顶
-     */
-    toFront(): void;
+declare class GroupNode extends RectResize.view {
+    getControlGroup(): h.JSX.Element;
+    getAddedableShape(): import("preact").VNode<any>;
+    getFoldIcon(): import("preact").VNode<any>;
+    getResizeShape(): import("preact").VNode<any>;
 }
 declare const _default: {
     type: string;