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

package/cjs/group-shrink/index.js

@@ -0,0 +1,213 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupShrink = void 0;
+var lodash_es_1 = require("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) {
+                lodash_es_1.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;
+}());
+exports.GroupShrink = GroupShrink;

package/cjs/index.js

@@ -29,3 +29,4 @@ __exportStar(require("./tools/flow-path"), exports);
 __exportStar(require("./tools/auto-layout"), exports);
 __exportStar(require("./bpmn-adapter/xml2json"), exports);
 __exportStar(require("./bpmn-adapter/json2xml"), exports);
+__exportStar(require("./group-shrink"), exports);

package/cjs/materials/group/GroupNode.js

@@ -46,11 +46,18 @@ var __spread = (this && this.__spread) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@logicflow/core");
 var NodeResize_1 = require("../../NodeResize");
+var defaultWidth = 500;
+var defaultHeight = 300;
 var GroupNodeModel = /** @class */ (function (_super) {
     __extends(GroupNodeModel, _super);
     function GroupNodeModel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.isGroup = true;
+        // isFolded: boolean;
+        _this.foldedWidth = 100;
+        _this.foldedHeight = 40;
+        _this.unfoldedWidth = defaultWidth;
+        _this.unfoldedHight = defaultHeight;
         return _this;
     }
     GroupNodeModel.prototype.initNodeData = function (data) {
@@ -61,8 +68,8 @@ var GroupNodeModel = /** @class */ (function (_super) {
         }
         // 初始化组的子节点
         this.children = new Set(children);
-        this.width = 500;
-        this.height = 200;
+        this.width = defaultWidth;
+        this.height = defaultHeight;
         // todo: 参考bpmn.js, 分组和未加入分组的节点重合时，未加入分组的节点在分组之下。方便标识。
         this.zIndex = -1;
         this.radius = 0;
@@ -70,6 +77,86 @@ var GroupNodeModel = /** @class */ (function (_super) {
         this.text.draggable = false;
         this.isRestrict = false;
         this.resizable = false;
+        this.autoToFront = false;
+        this.isFolded = false;
+        this.properties.isFolded = false;
+    };
+    GroupNodeModel.prototype.foldGroup = function (isFolded) {
+        var _this = this;
+        this.setProperty('isFolded', isFolded);
+        if (isFolded) {
+            this.x = this.x - this.width / 2 + this.foldedWidth / 2;
+            this.y = this.y - this.height / 2 + this.foldedHeight / 2;
+            this.unfoldedWidth = this.width;
+            this.unfoldedHight = this.height;
+            this.width = this.foldedWidth;
+            this.height = this.foldedHeight;
+        }
+        else {
+            this.width = this.unfoldedWidth;
+            this.height = this.unfoldedHight;
+            this.x = this.x + this.width / 2 - this.foldedWidth / 2;
+            this.y = this.y + this.height / 2 - this.foldedHeight / 2;
+        }
+        // 移动分组上的连线
+        var inCommingEdges = this.graphModel.getNodeIncomingEdge(this.id);
+        var outgoingEdges = this.graphModel.getNodeOutgoingEdge(this.id);
+        inCommingEdges.concat(outgoingEdges).forEach(function (edgeModel) {
+            _this.graphModel.deleteEdgeById(edgeModel.id);
+            if (!edgeModel.isFoldedEdge) {
+                var isCommingEdge = edgeModel.targetNodeId === _this.id;
+                var data = edgeModel.getData();
+                if (isCommingEdge) {
+                    data.endPoint = undefined;
+                }
+                else {
+                    data.startPoint = undefined;
+                }
+                data.pointsList = undefined;
+                _this.graphModel.addEdge(data);
+            }
+        });
+        this.children.forEach(function (elementId) {
+            var nodeModel = _this.graphModel.getElement(elementId);
+            nodeModel.visible = !isFolded;
+            _this.foldEdge(elementId, isFolded);
+        });
+    };
+    /**
+     * 折叠分组的时候，处理分组内部子节点上的连线
+     * 1. 为了保证校验规则不被打乱，所以只隐藏子节点上面的连线。
+     * 2. 重新创建一个属性一样的边。
+     * 3. 这个边拥有virtual=true的属性，表示不支持直接修改此边内容。
+     */
+    GroupNodeModel.prototype.foldEdge = function (nodeId, isFolded) {
+        var _this = this;
+        var inCommingEdges = this.graphModel.getNodeIncomingEdge(nodeId);
+        var outgoingEdges = this.graphModel.getNodeOutgoingEdge(nodeId);
+        inCommingEdges.concat(outgoingEdges).forEach(function (edgeModel, index) {
+            var _a;
+            edgeModel.visible = !isFolded;
+            var isCommingEdge = edgeModel.targetNodeId === nodeId;
+            if (isFolded) {
+                var data = edgeModel.getData();
+                data.id = data.id + "__" + index;
+                if (isCommingEdge) {
+                    data.endPoint = undefined;
+                    data.targetNodeId = _this.id;
+                }
+                else {
+                    data.startPoint = undefined;
+                    data.sourceNodeId = _this.id;
+                }
+                data.text = (_a = data.text) === null || _a === void 0 ? void 0 : _a.value;
+                data.pointsList = undefined;
+                var model = _this.graphModel.addEdge(data);
+                model.virtual = true;
+                // 强制不保存group连线数据
+                model.getData = function () { return null; };
+                model.text.editable = false;
+                model.isFoldedEdge = true;
+            }
+        });
     };
     GroupNodeModel.prototype.isInRange = function (_a) {
         var x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
@@ -108,6 +195,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
         data.children = __spread(this.children);
         var properties = data.properties;
         delete properties.groupAddable;
+        delete properties.isFolded;
         return data;
     };
     return GroupNodeModel;
@@ -117,10 +205,6 @@ var GroupNode = /** @class */ (function (_super) {
     function GroupNode() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    /**
-     * 重新toFront，阻止其置顶
-     */
-    GroupNode.prototype.toFront = function () { };
     GroupNode.prototype.getControlGroup = function () {
         return this.props.model.resizable ? _super.prototype.getControlGroup.call(this) : null;
     };
@@ -134,10 +218,43 @@ var GroupNode = /** @class */ (function (_super) {
         var newHeight = height + strokeWidth + 8;
         return core_1.h('rect', __assign(__assign({}, style), { width: newWidth, height: newHeight, x: x - newWidth / 2, y: y - newHeight / 2, rx: radius, ry: radius }));
     };
+    GroupNode.prototype.getFoldIcon = function () {
+        var model = this.props.model;
+        var foldX = model.x - model.width / 2 + 5;
+        var foldY = model.y - model.height / 2 + 5;
+        var iconIcon = core_1.h('path', {
+            fill: 'none',
+            stroke: '#818281',
+            strokeWidth: 2,
+            'pointer-events': 'none',
+            d: model.properties.isFolded
+                ? "M " + (foldX + 3) + "," + (foldY + 6) + " " + (foldX + 11) + "," + (foldY + 6) + " M" + (foldX + 7) + "," + (foldY + 2) + " " + (foldX + 7) + "," + (foldY + 10)
+                : "M " + (foldX + 3) + "," + (foldY + 6) + " " + (foldX + 11) + "," + (foldY + 6) + " ",
+        });
+        return core_1.h('g', {}, [
+            core_1.h('rect', {
+                height: 12,
+                width: 14,
+                rx: 2,
+                ry: 2,
+                strokeWidth: 1,
+                fill: '#F4F5F6',
+                stroke: '#CECECE',
+                cursor: 'pointer',
+                x: model.x - model.width / 2 + 5,
+                y: model.y - model.height / 2 + 5,
+                onClick: function () {
+                    model.foldGroup(!model.properties.isFolded);
+                },
+            }),
+            iconIcon,
+        ]);
+    };
     GroupNode.prototype.getResizeShape = function () {
         return core_1.h('g', {}, [
             this.getAddedableShape(),
             _super.prototype.getResizeShape.call(this),
+            this.getFoldIcon(),
         ]);
     };
     return GroupNode;

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/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';