@logicflow/extension 1.1.7 → 1.1.9-alpha.0

package/es/NodeResize/Node/DiamondResize.js

@@ -29,10 +29,6 @@ var DiamondResizeModel = /** @class */ (function (_super) {
     __extends(DiamondResizeModel, _super);
     function DiamondResizeModel(data, graphModel) {
         var _this = _super.call(this, data, graphModel) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
         var nodeSize = _this.properties.nodeSize;
         if (nodeSize) {
             _this.rx = nodeSize.rx;
@@ -40,6 +36,14 @@ var DiamondResizeModel = /** @class */ (function (_super) {
         }
         return _this;
     }
+    DiamondResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+        this.gridSize = 1;
+    };
     DiamondResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';

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

@@ -1,10 +1,7 @@
 import { h, EllipseNode, EllipseNodeModel } from '@logicflow/core';
 declare class EllipseResizeModel extends EllipseNodeModel {
-    minWidth: number;
-    minHeight: number;
-    maxWidth: number;
-    maxHeight: number;
     constructor(data: any, graphModel: any);
+    initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         stroke: string;

package/es/NodeResize/Node/EllipseResize.js

@@ -17,10 +17,6 @@ var EllipseResizeModel = /** @class */ (function (_super) {
     __extends(EllipseResizeModel, _super);
     function EllipseResizeModel(data, graphModel) {
         var _this = _super.call(this, data, graphModel) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
         var nodeSize = _this.properties.nodeSize;
         if (nodeSize) {
             _this.rx = nodeSize.rx;
@@ -28,6 +24,13 @@ var EllipseResizeModel = /** @class */ (function (_super) {
         }
         return _this;
     }
+    EllipseResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+    };
     EllipseResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';

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

@@ -1,10 +1,7 @@
 import { h, HtmlNode, HtmlNodeModel } from '@logicflow/core';
 declare class HtmlResizeModel extends HtmlNodeModel {
-    minWidth: number;
-    minHeight: number;
-    maxWidth: number;
-    maxHeight: number;
     constructor(data: any, graphModel: any);
+    initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         stroke: string;

package/es/NodeResize/Node/HtmlResize.js

@@ -17,10 +17,6 @@ var HtmlResizeModel = /** @class */ (function (_super) {
     __extends(HtmlResizeModel, _super);
     function HtmlResizeModel(data, graphModel) {
         var _this = _super.call(this, data, graphModel) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
         var nodeSize = _this.properties.nodeSize;
         if (nodeSize) {
             _this.width = nodeSize.width;
@@ -28,6 +24,13 @@ var HtmlResizeModel = /** @class */ (function (_super) {
         }
         return _this;
     }
+    HtmlResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+    };
     HtmlResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';

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

@@ -1,10 +1,7 @@
 import { h, RectNode, RectNodeModel } from '@logicflow/core';
 declare class RectResizeModel extends RectNodeModel {
-    minWidth: number;
-    minHeight: number;
-    maxWidth: number;
-    maxHeight: number;
     constructor(data: any, graphModel: any);
+    initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         fill: string;

package/es/NodeResize/Node/RectResize.js

@@ -17,10 +17,6 @@ var RectResizeModel = /** @class */ (function (_super) {
     __extends(RectResizeModel, _super);
     function RectResizeModel(data, graphModel) {
         var _this = _super.call(this, data, graphModel) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
         var nodeSize = _this.properties.nodeSize;
         if (nodeSize) {
             _this.width = nodeSize.width;
@@ -28,6 +24,13 @@ var RectResizeModel = /** @class */ (function (_super) {
         }
         return _this;
     }
+    RectResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+    };
     RectResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';
@@ -39,7 +42,7 @@ var RectResizeModel = /** @class */ (function (_super) {
     RectResizeModel.prototype.getResizeOutlineStyle = function () {
         return {
             fill: 'none',
-            stroke: '#000000',
+            stroke: 'transparent',
             strokeWidth: 1,
             strokeDasharray: '3,3',
         };

package/es/insert-node-in-polyline/index.d.ts

@@ -1,11 +1,14 @@
-declare const InsertNodeInPolyline: {
-    pluginName: string;
-    _lf: any;
+import LogicFlow from '@logicflow/core';
+declare class InsertNodeInPolyline {
+    static pluginName: string;
+    _lf: LogicFlow;
     dndAdd: boolean;
     dropAdd: boolean;
-    install(lf: any): void;
+    constructor({ lf }: {
+        lf: any;
+    });
     eventHandler(): void;
     insetNode(nodeData: any): void;
-};
+}
 export { InsertNodeInPolyline };
 export default InsertNodeInPolyline;

package/es/insert-node-in-polyline/index.js

@@ -19,26 +19,25 @@ var __spread = (this && this.__spread) || function () {
     return ar;
 };
 import { isNodeInSegement } from './edge';
-var InsertNodeInPolyline = {
-    pluginName: 'insertNodeInPolyline',
-    _lf: null,
-    dndAdd: true,
-    dropAdd: true,
-    install: function (lf) {
-        InsertNodeInPolyline._lf = lf;
+var InsertNodeInPolyline = /** @class */ (function () {
+    function InsertNodeInPolyline(_a) {
+        var lf = _a.lf;
+        this._lf = lf;
+        this.dndAdd = true;
+        this.dropAdd = true;
         this.eventHandler();
-    },
-    eventHandler: function () {
+    }
+    InsertNodeInPolyline.prototype.eventHandler = function () {
         var _this = this;
         // 监听事件
-        if (InsertNodeInPolyline.dndAdd) {
-            InsertNodeInPolyline._lf.on('node:dnd-add', function (_a) {
+        if (this.dndAdd) {
+            this._lf.on('node:dnd-add', function (_a) {
                 var data = _a.data;
-                InsertNodeInPolyline.insetNode(data);
+                _this.insetNode(data);
             });
         }
-        if (InsertNodeInPolyline.dropAdd) {
-            InsertNodeInPolyline._lf.on('node:drop', function (_a) {
+        if (this.dropAdd) {
+            this._lf.on('node:drop', function (_a) {
                 var data = _a.data;
                 var edges = _this._lf.graphModel.edges;
                 var id = data.id;
@@ -50,12 +49,12 @@ var InsertNodeInPolyline = {
                     }
                 }
                 if (pureNode) {
-                    InsertNodeInPolyline.insetNode(data);
+                    _this.insetNode(data);
                 }
             });
         }
-    },
-    insetNode: function (nodeData) {
+    };
+    InsertNodeInPolyline.prototype.insetNode = function (nodeData) {
         var edges = this._lf.graphModel.edges;
         var nodeModel = this._lf.getNodeModelById(nodeData.id);
         for (var i = 0; i < edges.length; i++) {
@@ -79,7 +78,9 @@ var InsertNodeInPolyline = {
                 break;
             }
         }
-    },
-};
+    };
+    InsertNodeInPolyline.pluginName = 'insertNodeInPolyline';
+    return InsertNodeInPolyline;
+}());
 export { InsertNodeInPolyline };
 export default InsertNodeInPolyline;

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

@@ -2,12 +2,33 @@ import { h } from '@logicflow/core';
 import { RectResize } from '../../NodeResize';
 declare class GroupNodeModel extends RectResize.model {
     readonly isGroup = true;
+    /**
+     * 此分组的子节点Id
+     */
     children: Set<string>;
+    /**
+     * 其子节点是否被禁止通过拖拽移出分组。 默认false，允许拖拽移除分组。
+     */
     isRestrict: boolean;
+    /**
+     * 分组节点是否允许调整大小。
+     */
     resizable: boolean;
+    /**
+     * 分组节点是否允许折叠
+     */
     foldable: boolean;
+    /**
+     * 折叠后的宽度
+     */
     foldedWidth: number;
+    /**
+     * 折叠后的高度
+     */
     foldedHeight: number;
+    /**
+     * 分组折叠状态
+     */
     isFolded: boolean;
     unfoldedWidth: number;
     unfoldedHight: number;
@@ -18,14 +39,31 @@ declare class GroupNodeModel extends RectResize.model {
         strokeWidth: number;
         strokeDasharray: string;
     };
+    /**
+     * 折叠分组
+     * 1. 折叠分组的宽高
+     * 2. 处理分组子节点
+     * 3. 处理连线
+     */
     foldGroup(isFolded: any): void;
+    getAnchorStyle(anchorInfo: any): Record<string, any>;
     /**
-     * 折叠分组的时候，处理分组内部子节点上的连线
-     * 1. 为了保证校验规则不被打乱，所以只隐藏子节点上面的连线。
-     * 2. 重新创建一个属性一样的边。
-     * 3. 这个边拥有virtual=true的属性，表示不支持直接修改此边内容。
+     * 折叠分组的时候，处理分组自身的连线和分组内部子节点上的连线
+     * 边的分类：
+     *   - 虚拟边：分组被收起时，表示分组本身与外部节点关系的边。
+     *   - 真实边：分组本身或者分组内部节点与外部节点节点（非收起分组）关系的边。
+     * 如果一个分组，本身与外部节点有M条连线，且内部N个子节点与外部节点有连线，那么这个分组收起时会生成M+N条连线。
+     * 折叠分组时：
+     *   - 原有的虚拟边删除；
+     *   - 创建一个虚拟边；
+     *   - 真实边则隐藏；
+     * 展开分组是：
+     *   - 原有的虚拟边删除；
+     *   - 如果目外部点是收起的分组，则创建虚拟边；
+     *   - 如果外部节点是普通节点，则显示真实边；
      */
     private foldEdge;
+    createVirtualEdge(edgeData: any): void;
     isInRange({ x1, y1, x2, y2 }: {
         x1: any;
         y1: any;
@@ -50,6 +88,7 @@ declare class GroupNodeModel extends RectResize.model {
         fill: string;
     };
     getData(): import("@logicflow/core").NodeData;
+    getHistoryData(): import("@logicflow/core").NodeData;
 }
 declare class GroupNode extends RectResize.view {
     getControlGroup(): h.JSX.Element;

package/es/materials/group/GroupNode.js

@@ -56,6 +56,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
         return _this;
     }
     GroupNodeModel.prototype.initNodeData = function (data) {
+        var _this = this;
         _super.prototype.initNodeData.call(this, data);
         var children = [];
         if (Array.isArray(data.children)) {
@@ -76,18 +77,34 @@ var GroupNodeModel = /** @class */ (function (_super) {
         this.resizable = false;
         this.autoToFront = false;
         this.foldable = false;
-        this.properties.isFolded = false;
+        if (this.properties.isFolded === undefined) {
+            this.properties.isFolded = false;
+        }
         this.isFolded = this.properties.isFolded;
+        // fixme: 虽然默认保存的分组不会收起，但是如果重写保存数据分组了，
+        // 此处代码会导致多一个history记录
+        setTimeout(function () {
+            _this.isFolded && _this.foldGroup(_this.isFolded);
+        });
+        // this.foldGroup(this.isFolded);
     };
     GroupNodeModel.prototype.getResizeOutlineStyle = function () {
         var style = _super.prototype.getResizeOutlineStyle.call(this);
         style.stroke = 'none';
         return style;
     };
+    /**
+     * 折叠分组
+     * 1. 折叠分组的宽高
+     * 2. 处理分组子节点
+     * 3. 处理连线
+     */
     GroupNodeModel.prototype.foldGroup = function (isFolded) {
         var _this = this;
         this.setProperty('isFolded', isFolded);
         this.isFolded = isFolded;
+        console.log(44);
+        // step 1
         if (isFolded) {
             this.x = this.x - this.width / 2 + this.foldedWidth / 2;
             this.y = this.y - this.height / 2 + this.foldedHeight / 2;
@@ -102,70 +119,112 @@ var GroupNodeModel = /** @class */ (function (_super) {
             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);
-            }
-        });
+        // step 2
+        var allEdges = this.incoming.edges.concat(this.outgoing.edges);
         this.children.forEach(function (elementId) {
             var nodeModel = _this.graphModel.getElement(elementId);
             nodeModel.visible = !isFolded;
-            _this.foldEdge(elementId, 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;
     };
     /**
-     * 折叠分组的时候，处理分组内部子节点上的连线
-     * 1. 为了保证校验规则不被打乱，所以只隐藏子节点上面的连线。
-     * 2. 重新创建一个属性一样的边。
-     * 3. 这个边拥有virtual=true的属性，表示不支持直接修改此边内容。
+     * 折叠分组的时候，处理分组自身的连线和分组内部子节点上的连线
+     * 边的分类：
+     *   - 虚拟边：分组被收起时，表示分组本身与外部节点关系的边。
+     *   - 真实边：分组本身或者分组内部节点与外部节点节点（非收起分组）关系的边。
+     * 如果一个分组，本身与外部节点有M条连线，且内部N个子节点与外部节点有连线，那么这个分组收起时会生成M+N条连线。
+     * 折叠分组时：
+     *   - 原有的虚拟边删除；
+     *   - 创建一个虚拟边；
+     *   - 真实边则隐藏；
+     * 展开分组是：
+     *   - 原有的虚拟边删除；
+     *   - 如果目外部点是收起的分组，则创建虚拟边；
+     *   - 如果外部节点是普通节点，则显示真实边；
      */
-    GroupNodeModel.prototype.foldEdge = function (nodeId, isFolded) {
+    GroupNodeModel.prototype.foldEdge = function (isFolded, allEdges) {
         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;
-            if (isFolded
-                && (!_this.children.has(edgeModel.targetNodeId)
-                    || !_this.children.has(edgeModel.sourceNodeId))) {
-                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;
+        allEdges.forEach(function (edgeModel, index) {
+            var id = edgeModel.id, sourceNodeId = edgeModel.sourceNodeId, targetNodeId = edgeModel.targetNodeId, startPoint = edgeModel.startPoint, endPoint = edgeModel.endPoint, type = edgeModel.type, properties = edgeModel.properties, text = edgeModel.text;
+            var data = {
+                id: id + "__" + index,
+                sourceNodeId: sourceNodeId,
+                targetNodeId: targetNodeId,
+                startPoint: startPoint,
+                endPoint: endPoint,
+                type: type,
+                properties: properties,
+                text: text === null || text === void 0 ? void 0 : text.value,
+            };
+            if (edgeModel.virtual) {
+                _this.graphModel.deleteEdgeById(edgeModel.id);
+            }
+            var targetNodeIdGroup = _this.graphModel.group.getNodeGroup(targetNodeId);
+            // 考虑目标节点本来就是分组的情况
+            if (!targetNodeIdGroup) {
+                targetNodeIdGroup = _this.graphModel.getNodeModelById(targetNodeId);
+            }
+            var sourceNodeIdGroup = _this.graphModel.group.getNodeGroup(sourceNodeId);
+            if (!sourceNodeIdGroup) {
+                sourceNodeIdGroup = _this.graphModel.getNodeModelById(sourceNodeId);
+            }
+            // 折叠时，处理未被隐藏的边的逻辑
+            if (isFolded && edgeModel.visible !== false) {
+                // 需要确认此分组节点是新连线的起点还是终点
+                // 创建一个虚拟边，虚拟边相对真实边，起点或者终点从一起分组内部的节点成为了分组，
+                // 如果需要被隐藏的边的起点在需要折叠的分组中，那么设置虚拟边的开始节点为此分组
+                if (_this.children.has(sourceNodeId) || _this.id === sourceNodeId) {
+                    data.startPoint = undefined;
+                    data.sourceNodeId = _this.id;
+                }
+                else {
+                    data.endPoint = undefined;
+                    data.targetNodeId = _this.id;
+                }
+                // 如果边的起点和终点都在分组内部，则不创建新的虚拟边
+                if (targetNodeIdGroup.id !== _this.id || sourceNodeIdGroup.id !== _this.id) {
+                    _this.createVirtualEdge(data);
+                }
+                edgeModel.visible = false;
+            }
+            // 展开时，处理被隐藏的边的逻辑
+            if (!isFolded && edgeModel.visible === false) {
+                // 展开分组时：判断真实边的起点和终点是否有任一节点在已折叠分组中，如果不是，则显示真实边。如果是，这修改这个边的对应目标节点id来创建虚拟边。
+                if (targetNodeIdGroup && targetNodeIdGroup.isGroup && targetNodeIdGroup.isFolded) {
+                    data.targetNodeId = targetNodeIdGroup.id;
+                    data.endPoint = undefined;
+                    _this.createVirtualEdge(data);
+                }
+                else if (sourceNodeIdGroup && sourceNodeIdGroup.isGroup && sourceNodeIdGroup.isFolded) {
+                    data.sourceNodeId = sourceNodeIdGroup.id;
+                    data.startPoint = undefined;
+                    _this.createVirtualEdge(data);
+                }
+                else {
+                    edgeModel.visible = true;
                 }
             }
         });
     };
+    GroupNodeModel.prototype.createVirtualEdge = function (edgeData) {
+        edgeData.pointsList = undefined;
+        var model = this.graphModel.addEdge(edgeData);
+        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;
         return x1 >= (this.x - this.width / 2)
@@ -206,6 +265,17 @@ var GroupNodeModel = /** @class */ (function (_super) {
         delete properties.isFolded;
         return data;
     };
+    GroupNodeModel.prototype.getHistoryData = function () {
+        var data = _super.prototype.getData.call(this);
+        data.children = __spread(this.children);
+        var properties = data.properties;
+        delete properties.groupAddable;
+        if (properties.isFolded) { // 如果分组被折叠
+            data.x = data.x + this.unfoldedWidth / 2 - this.foldedWidth / 2;
+            data.y = data.y + this.unfoldedHight / 2 - this.foldedHeight / 2;
+        }
+        return data;
+    };
     return GroupNodeModel;
 }(RectResize.model));
 var GroupNode = /** @class */ (function (_super) {

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

@@ -20,13 +20,19 @@ declare class Group {
     appendNodeToGrop: ({ data }: {
         data: any;
     }) => void;
+    deleteGroupChild: ({ data }: {
+        data: any;
+    }) => void;
     setActiveGroup: ({ data }: {
         data: any;
     }) => void;
-    getGroups(): void;
     /**
      * 获取自定位置其所属分组
      */
     getGroup(bounds: Bounds): BaseNodeModel | undefined;
+    /**
+     * 获取某个节点所属的groupModel
+     */
+    getNodeGroup(nodeId: any): BaseNodeModel;
 }
 export { Group, GroupNode, };

package/es/materials/group/index.js

@@ -49,11 +49,28 @@ var Group = /** @class */ (function () {
             // 然后再判断这个节点是否在某个group中，如果在，则将其添加到对应的group中
             var bounds = _this.lf.getNodeModelById(data.id).getBounds();
             var group = _this.getGroup(bounds);
-            if (group && data.id !== group.id) {
+            if (!group)
+                return;
+            if (data.id !== group.id) {
                 group.addChild(data.id);
                 _this.nodeGroupMap.set(data.id, group.id);
                 group.setAllowAppendChild(false);
             }
+            else if (data.children && data.children.length > 0) {
+                // 表示当前添加的节点是一个新增的group
+                data.children.forEach(function (nodeId) {
+                    _this.nodeGroupMap.set(nodeId, data.id);
+                });
+            }
+        };
+        this.deleteGroupChild = function (_a) {
+            var data = _a.data;
+            var groupId = _this.nodeGroupMap.get(data.id);
+            if (groupId) {
+                var group = _this.lf.getNodeModelById(groupId);
+                group.removeChild(data.id);
+                _this.nodeGroupMap.delete(data.id);
+            }
         };
         this.setActiveGroup = function (_a) {
             var data = _a.data;
@@ -92,20 +109,14 @@ var Group = /** @class */ (function () {
             }
             return true;
         });
+        lf.graphModel.group = this;
         lf.on('node:add', this.appendNodeToGrop);
+        lf.on('node:delete', this.deleteGroupChild);
         lf.on('node:drop', this.appendNodeToGrop);
         lf.on('node:dnd-drag', this.setActiveGroup);
         lf.on('node:drag', this.setActiveGroup);
         lf.on('graph:rendered', this.graphRendered);
     }
-    Group.prototype.getGroups = function () {
-        var groups = [];
-        this.lf.graphModel.nodes.forEach(function (nodeModel) {
-            if (nodeModel.isGroup) {
-                groups.push(nodeModel);
-            }
-        });
-    };
     /**
      * 获取自定位置其所属分组
      */
@@ -118,6 +129,15 @@ var Group = /** @class */ (function () {
             }
         }
     };
+    /**
+     * 获取某个节点所属的groupModel
+     */
+    Group.prototype.getNodeGroup = function (nodeId) {
+        var groupId = this.nodeGroupMap.get(nodeId);
+        if (groupId) {
+            return this.lf.getNodeModelById(groupId);
+        }
+    };
     Group.pluginName = 'group';
     return Group;
 }());