@logicflow/extension 1.0.7 → 1.1.0-alpha.3

package/cjs/components/mini-map/index.js

@@ -12,48 +12,92 @@ var __values = (this && this.__values) || function(o) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MiniMap = void 0;
-// interface MiniMapPlugin extends Extension {
-//   init: (option) => void;
-//   show: (leftPosition?: number, topPosition?: number) => void;
-//   hide: () => void;
-//   [x: string]: any;
-// }
-var MiniMap = {
-    pluginName: 'minimap',
-    __lf: null,
-    __container: null,
-    __miniMapWrap: null,
-    __miniMapContainer: null,
-    __lfMap: null,
-    __viewport: null,
-    __width: 150,
-    __height: 220,
-    __miniMapWidth: 450,
-    __miniMapHeight: 660,
-    __viewPortTop: 0,
-    __viewPortLeft: 0,
-    __startPosition: null,
-    __viewPortScale: 1,
-    __viewPortWidth: 150,
-    __viewPortHeight: 75,
-    __resetDataX: 0,
-    __resetDataY: 0,
-    __LogicFlow: null,
-    __disabledPlugins: ['minimap', 'control', 'selection-select'],
-    install: function (lf, LogicFlow) {
-        MiniMap.__lf = lf;
-        MiniMap.__miniMapWidth = lf.graphModel.width;
-        MiniMap.__miniMapHeight = (lf.graphModel.width * 220) / 150;
-        MiniMap.__LogicFlow = LogicFlow;
+var MiniMap = /** @class */ (function () {
+    function MiniMap(_a) {
+        var _this = this;
+        var lf = _a.lf, LogicFlow = _a.LogicFlow;
+        this.__lf = null;
+        this.__container = null;
+        this.__miniMapWrap = null;
+        this.__miniMapContainer = null;
+        this.__lfMap = null;
+        this.__viewport = null;
+        this.__width = 150;
+        this.__height = 220;
+        this.__miniMapWidth = 450;
+        this.__miniMapHeight = 660;
+        this.__viewPortTop = 0;
+        this.__viewPortLeft = 0;
+        this.__startPosition = null;
+        this.__viewPortScale = 1;
+        this.__viewPortWidth = 150;
+        this.__viewPortHeight = 75;
+        this.__resetDataX = 0;
+        this.__resetDataY = 0;
+        this.__LogicFlow = null;
+        this.__isShow = false;
+        this.__disabledPlugins = ['miniMap', 'control', 'selectionSelect'];
+        /**
+         * 显示mini map
+         */
+        this.show = function (leftPosition, topPosition) {
+            _this.__setView();
+            if (!_this.__isShow) {
+                _this.__createMiniMap(leftPosition, topPosition);
+            }
+            _this.__isShow = true;
+        };
+        /**
+         * 隐藏mini map
+         */
+        this.hide = function () {
+            if (_this.__isShow) {
+                _this.__removeMiniMap();
+            }
+            _this.__isShow = false;
+        };
+        this.__startDrag = function (e) {
+            document.addEventListener('mousemove', _this.__drag);
+            document.addEventListener('mouseup', _this.__drop);
+            _this.__startPosition = {
+                x: e.x,
+                y: e.y,
+            };
+        };
+        this.__drag = function (e) {
+            var viewStyle = _this.__viewport.style;
+            _this.__viewPortTop += e.y - _this.__startPosition.y;
+            _this.__viewPortLeft += e.x - _this.__startPosition.x;
+            viewStyle.top = _this.__viewPortTop + "px";
+            viewStyle.left = _this.__viewPortLeft + "px";
+            _this.__startPosition = {
+                x: e.x,
+                y: e.y,
+            };
+            var centerX = (_this.__viewPortLeft + _this.__viewPortWidth / 2)
+                / _this.__viewPortScale;
+            var centerY = (_this.__viewPortTop + _this.__viewPortHeight / 2)
+                / _this.__viewPortScale;
+            _this.__lf.focusOn({
+                coordinate: {
+                    x: centerX + _this.__resetDataX,
+                    y: centerY + _this.__resetDataY,
+                },
+            });
+        };
+        this.__drop = function () {
+            document.removeEventListener('mousemove', _this.__drag);
+            document.removeEventListener('mouseup', _this.__drop);
+        };
+        this.__lf = lf;
+        this.__miniMapWidth = lf.graphModel.width;
+        this.__miniMapHeight = (lf.graphModel.width * 220) / 150;
+        this.__LogicFlow = LogicFlow;
         this.__init();
-        // 避免多次install的时候, _isShow状态被修改了
-        MiniMap.__isShow = false;
-    },
-    init: function (option) {
-        this.__disabledPlugins = this.__disabledPlugins.concat(option.disabledPlugins || []);
-    },
-    render: function (lf, container) {
-        MiniMap.__container = container;
+    }
+    MiniMap.prototype.render = function (lf, container) {
+        var _this = this;
+        this.__container = container;
         var events = [
             'node:add',
             'node:delete',
@@ -63,34 +107,24 @@ var MiniMap = {
             'blank:drop',
         ];
         events.forEach(function (eventName) {
-            MiniMap.__lf.on(eventName, function () {
-                if (MiniMap.__isShow) {
-                    MiniMap.__setView();
+            _this.__lf.on(eventName, function () {
+                if (_this.__isShow) {
+                    _this.__setView();
                 }
             });
         });
-    },
-    show: function (leftPosition, topPosition) {
-        MiniMap.__setView();
-        if (!MiniMap.__isShow) {
-            MiniMap.__createMiniMap(leftPosition, topPosition);
-        }
-        MiniMap.__isShow = true;
-    },
-    hide: function () {
-        if (MiniMap.__isShow) {
-            MiniMap.__removeMiniMap();
-        }
-        MiniMap.__isShow = false;
-    },
-    __init: function () {
+    };
+    MiniMap.prototype.init = function (option) {
+        this.__disabledPlugins = this.__disabledPlugins.concat(option.disabledPlugins || []);
+    };
+    MiniMap.prototype.__init = function () {
         var miniMapWrap = document.createElement('div');
         miniMapWrap.className = 'lf-mini-map-graph';
-        miniMapWrap.style.width = MiniMap.__width + "px";
-        miniMapWrap.style.height = MiniMap.__height + "px";
-        MiniMap.__lfMap = new MiniMap.__LogicFlow({
-            width: MiniMap.__lf.graphModel.width,
-            height: (MiniMap.__lf.graphModel.width * 220) / 150,
+        miniMapWrap.style.width = this.__width + "px";
+        miniMapWrap.style.height = this.__height + "px";
+        this.__lfMap = new this.__LogicFlow({
+            width: this.__lf.graphModel.width,
+            height: (this.__lf.graphModel.width * 220) / 150,
             container: miniMapWrap,
             isSilentMode: true,
             stopZoomGraph: true,
@@ -98,17 +132,17 @@ var MiniMap = {
             stopMoveGraph: true,
             hideAnchors: true,
             hoverOutline: false,
-            disabledPlugins: MiniMap.__disabledPlugins,
+            disabledPlugins: this.__disabledPlugins,
         });
         // minimap中禁用adapter。
-        MiniMap.__lfMap.adapterIn = function (a) { return a; };
-        MiniMap.__lfMap.adapterOut = function (a) { return a; };
-        MiniMap.__miniMapWrap = miniMapWrap;
-        MiniMap.__createViewPort();
-    },
-    __createMiniMap: function (left, top) {
+        this.__lfMap.adapterIn = function (a) { return a; };
+        this.__lfMap.adapterOut = function (a) { return a; };
+        this.__miniMapWrap = miniMapWrap;
+        this.__createViewPort();
+    };
+    MiniMap.prototype.__createMiniMap = function (left, top) {
         var miniMapContainer = document.createElement('div');
-        var miniMapWrap = MiniMap.__miniMapWrap;
+        var miniMapWrap = this.__miniMapWrap;
         miniMapContainer.appendChild(miniMapWrap);
         if (typeof left !== 'undefined' && typeof top !== 'undefined') {
             miniMapContainer.style.left = left + "px";
@@ -116,30 +150,30 @@ var MiniMap = {
         }
         miniMapContainer.style.position = 'absolute';
         miniMapContainer.className = 'lf-mini-map';
-        MiniMap.__container.appendChild(miniMapContainer);
-        MiniMap.__miniMapWrap.appendChild(MiniMap.__viewport);
+        this.__container.appendChild(miniMapContainer);
+        this.__miniMapWrap.appendChild(this.__viewport);
         var header = document.createElement('div');
         header.className = 'lf-mini-map-header';
         header.innerText = '导航';
         miniMapContainer.appendChild(header);
         var close = document.createElement('span');
         close.className = 'lf-mini-map-close';
-        close.addEventListener('click', MiniMap.hide);
+        close.addEventListener('click', this.hide);
         miniMapContainer.appendChild(close);
-        MiniMap.__miniMapContainer = miniMapContainer;
-    },
-    __removeMiniMap: function () {
-        MiniMap.__container.removeChild(MiniMap.__miniMapContainer);
-    },
+        this.__miniMapContainer = miniMapContainer;
+    };
+    MiniMap.prototype.__removeMiniMap = function () {
+        this.__container.removeChild(this.__miniMapContainer);
+    };
     /**
      * 计算所有图形一起，占领的区域范围。
      * @param data
      */
-    __getBounds: function (data) {
+    MiniMap.prototype.__getBounds = function (data) {
         var left = 0;
-        var right = MiniMap.__miniMapWidth;
+        var right = this.__miniMapWidth;
         var top = 0;
-        var bottom = MiniMap.__miniMapHeight;
+        var bottom = this.__miniMapHeight;
         var nodes = data.nodes;
         if (nodes && nodes.length > 0) {
             // 因为获取的节点不知道真实的宽高，这里需要补充一点数值
@@ -161,13 +195,13 @@ var MiniMap = {
             bottom: bottom,
             right: right,
         };
-    },
+    };
     /**
      * 将负值的平移转换为正值。
      * 保证渲染的时候，minimap能完全展示。
      * 获取将画布所有元素平移到0，0开始时，所有节点数据
      */
-    __resetData: function (data) {
+    MiniMap.prototype.__resetData = function (data) {
         var nodes = data.nodes, edges = data.edges;
         var left = 0;
         var top = 0;
@@ -181,8 +215,8 @@ var MiniMap = {
                 top = nodeTop < top ? nodeTop : top;
             });
             if (left < 0 || top < 0) {
-                MiniMap.__resetDataX = left;
-                MiniMap.__resetDataY = top;
+                this.__resetDataX = left;
+                this.__resetDataY = top;
                 nodes.forEach(function (node) {
                     node.x = node.x - left;
                     node.y = node.y - top;
@@ -214,27 +248,27 @@ var MiniMap = {
             }
         }
         return data;
-    },
+    };
     /**
      * 显示导航
      * 显示视口范围
      * 1. 基于画布的范围比例，设置视口范围比例。宽度默认为导航宽度。
      */
-    __setView: function () {
+    MiniMap.prototype.__setView = function () {
         var e_1, _a;
         // 1. 获取到图中所有的节点中的位置，将其偏移到原点开始（避免节点位置为负的时候无法展示问题）。
-        var data = MiniMap.__resetData(MiniMap.__lf.getGraphRawData());
+        var data = this.__resetData(this.__lf.getGraphRawData());
         // 由于随时都会有新节点注册进来，需要同步将注册的
-        var viewMap = MiniMap.__lf.viewMap;
-        var modelMap = MiniMap.__lf.graphModel.modelMap;
-        var minimapViewMap = MiniMap.__lfMap.viewMap;
+        var viewMap = this.__lf.viewMap;
+        var modelMap = this.__lf.graphModel.modelMap;
+        var minimapViewMap = this.__lfMap.viewMap;
         try {
             // todo: no-restricted-syntax
             for (var _b = __values(viewMap.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var key = _c.value;
                 if (!minimapViewMap.has(key)) {
-                    MiniMap.__lfMap.setView(key, viewMap.get(key));
-                    MiniMap.__lfMap.graphModel.modelMap.set(key, modelMap.get(key));
+                    this.__lfMap.setView(key, viewMap.get(key));
+                    this.__lfMap.graphModel.modelMap.set(key, modelMap.get(key));
                 }
             }
         }
@@ -245,91 +279,60 @@ var MiniMap = {
             }
             finally { if (e_1) throw e_1.error; }
         }
-        MiniMap.__lfMap.render(data);
+        this.__lfMap.render(data);
         // 2. 将偏移后的数据渲染到minimap画布上
         // 3. 计算出所有节点在一起的边界。
-        var _d = MiniMap.__getBounds(data), left = _d.left, top = _d.top, right = _d.right, bottom = _d.bottom;
+        var _d = this.__getBounds(data), left = _d.left, top = _d.top, right = _d.right, bottom = _d.bottom;
         // 4. 计算所有节点的边界与minimap看板的边界的比例.
-        var realWidthScale = MiniMap.__width / (right - left);
-        var realHeightScale = MiniMap.__height / (bottom - top);
+        var realWidthScale = this.__width / (right - left);
+        var realHeightScale = this.__height / (bottom - top);
         // 5. 取比例最小的值，将渲染的画布缩小对应比例。
-        var innerStyle = MiniMap.__miniMapWrap.firstChild.style;
+        var innerStyle = this.__miniMapWrap.firstChild.style;
         var scale = Math.min(realWidthScale, realHeightScale);
         innerStyle.transform = "matrix(" + scale + ", 0, 0, " + scale + ", 0, 0)";
         innerStyle.transformOrigin = 'left top';
         innerStyle.height = bottom - Math.min(top, 0) + "px";
         innerStyle.width = right - Math.min(left, 0) + "px";
-        MiniMap.__viewPortScale = scale;
-        MiniMap.__setViewPort(scale, {
+        this.__viewPortScale = scale;
+        this.__setViewPort(scale, {
             left: left,
             top: top,
             right: right,
             bottom: bottom,
         });
-    },
+    };
     // 设置视口
-    __setViewPort: function (scale, _a) {
-        var left = _a.left, right = _a.right;
-        var viewStyle = MiniMap.__viewport.style;
-        viewStyle.width = MiniMap.__width - 4 + "px";
-        viewStyle.height = (MiniMap.__width - 4) / (MiniMap.__lf.graphModel.width / MiniMap.__lf.graphModel.height) + "px";
+    MiniMap.prototype.__setViewPort = function (scale, _a) {
+        var left = _a.left, right = _a.right, top = _a.top, bottom = _a.bottom;
+        var viewStyle = this.__viewport.style;
+        viewStyle.width = this.__width - 4 + "px";
+        viewStyle.height = (this.__width - 4) / (this.__lf.graphModel.width / this.__lf.graphModel.height) + "px";
         // top
-        var _b = MiniMap.__lf.getTransform(), TRANSLATE_X = _b.TRANSLATE_X, TRANSLATE_Y = _b.TRANSLATE_Y;
+        var _b = this.__lf.getTransform(), TRANSLATE_X = _b.TRANSLATE_X, TRANSLATE_Y = _b.TRANSLATE_Y;
         var realWidth = right - left;
         // 视口实际宽 = 视口默认宽 / (所有元素一起占据的真实宽 / 绘布宽)
-        var realViewPortWidth = (MiniMap.__width - 4) / (realWidth / MiniMap.__lf.graphModel.width);
+        var realViewPortWidth = (this.__width - 4) / (realWidth / this.__lf.graphModel.width);
         // 视口实际高 = 视口实际宽 / (绘布宽 / 绘布高)
-        var graphRatio = (MiniMap.__lf.graphModel.width / MiniMap.__lf.graphModel.height);
+        var graphRatio = (this.__lf.graphModel.width / this.__lf.graphModel.height);
         var realViewPortHeight = realViewPortWidth / graphRatio;
-        MiniMap.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
-        MiniMap.__viewPortLeft = -TRANSLATE_X * scale;
-        MiniMap.__viewPortWidth = realViewPortWidth;
-        MiniMap.__viewPortHeight = realViewPortHeight;
-        viewStyle.top = MiniMap.__viewPortTop + "px";
-        viewStyle.left = MiniMap.__viewPortLeft + "px";
+        this.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
+        this.__viewPortLeft = -TRANSLATE_X * scale;
+        this.__viewPortWidth = realViewPortWidth;
+        this.__viewPortHeight = realViewPortHeight;
+        viewStyle.top = this.__viewPortTop + "px";
+        viewStyle.left = this.__viewPortLeft + "px";
         viewStyle.width = realViewPortWidth + "px";
         viewStyle.height = realViewPortHeight + "px";
-    },
+    };
     // 预览视窗
-    __createViewPort: function () {
+    MiniMap.prototype.__createViewPort = function () {
         var div = document.createElement('div');
         div.className = 'lf-minimap-viewport';
-        div.addEventListener('mousedown', MiniMap.__startDrag);
-        MiniMap.__viewport = div;
-    },
-    __startDrag: function (e) {
-        document.addEventListener('mousemove', MiniMap.__drag);
-        document.addEventListener('mouseup', MiniMap.__drop);
-        MiniMap.__startPosition = {
-            x: e.x,
-            y: e.y,
-        };
-    },
-    __drag: function (e) {
-        var viewStyle = MiniMap.__viewport.style;
-        MiniMap.__viewPortTop += e.y - MiniMap.__startPosition.y;
-        MiniMap.__viewPortLeft += e.x - MiniMap.__startPosition.x;
-        viewStyle.top = MiniMap.__viewPortTop + "px";
-        viewStyle.left = MiniMap.__viewPortLeft + "px";
-        MiniMap.__startPosition = {
-            x: e.x,
-            y: e.y,
-        };
-        var centerX = (MiniMap.__viewPortLeft + MiniMap.__viewPortWidth / 2)
-            / MiniMap.__viewPortScale;
-        var centerY = (MiniMap.__viewPortTop + MiniMap.__viewPortHeight / 2)
-            / MiniMap.__viewPortScale;
-        MiniMap.__lf.focusOn({
-            coordinate: {
-                x: centerX + MiniMap.__resetDataX,
-                y: centerY + MiniMap.__resetDataY,
-            },
-        });
-    },
-    __drop: function () {
-        document.removeEventListener('mousemove', MiniMap.__drag);
-        document.removeEventListener('mouseup', MiniMap.__drop);
-    },
-};
+        div.addEventListener('mousedown', this.__startDrag);
+        this.__viewport = div;
+    };
+    MiniMap.pluginName = 'miniMap';
+    return MiniMap;
+}());
 exports.MiniMap = MiniMap;
 exports.default = MiniMap;

package/cjs/components/selection-select/index.js

@@ -48,21 +48,10 @@ var SelectionSelect = /** @class */ (function () {
         var stopMoveGraph = lf.getEditConfig().stopMoveGraph;
         this.isDefalutStopMoveGraph = stopMoveGraph;
         lf.openSelectionSelect = function () {
-            if (!stopMoveGraph) {
-                _this.isDefalutStopMoveGraph = false;
-                lf.updateEditConfig({
-                    stopMoveGraph: true,
-                });
-            }
-            _this.open();
+            _this.openSelectionSelect();
         };
         lf.closeSelectionSelect = function () {
-            if (!_this.isDefalutStopMoveGraph) {
-                lf.updateEditConfig({
-                    stopMoveGraph: false,
-                });
-            }
-            _this.close();
+            _this.closeSelectionSelect();
         };
     }
     SelectionSelect.prototype.render = function (lf, domContainer) {
@@ -88,13 +77,37 @@ var SelectionSelect = /** @class */ (function () {
             document.addEventListener('mouseup', _this.__drawOff);
         });
     };
+    /**
+     * 开启选区
+     */
+    SelectionSelect.prototype.openSelectionSelect = function () {
+        var stopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
+        if (!stopMoveGraph) {
+            this.isDefalutStopMoveGraph = false;
+            this.lf.updateEditConfig({
+                stopMoveGraph: true,
+            });
+        }
+        this.open();
+    };
+    /**
+     * 关闭选区
+     */
+    SelectionSelect.prototype.closeSelectionSelect = function () {
+        if (!this.isDefalutStopMoveGraph) {
+            this.lf.updateEditConfig({
+                stopMoveGraph: false,
+            });
+        }
+        this.close();
+    };
     SelectionSelect.prototype.open = function () {
         this.__disabled = false;
     };
     SelectionSelect.prototype.close = function () {
         this.__disabled = true;
     };
-    SelectionSelect.pluginName = 'selection-select';
+    SelectionSelect.pluginName = 'selectionSelect';
     return SelectionSelect;
 }());
 exports.SelectionSelect = SelectionSelect;

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

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InsertNodeInPolyline = void 0;
 var edge_1 = require("./edge");
 var InsertNodeInPolyline = {
-    pluginName: 'insert-node-in-polyline',
+    pluginName: 'insertNodeInPolyline',
     _lf: null,
     dndAdd: true,
     dropAdd: true,

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

@@ -81,7 +81,7 @@ var CurvedEdgeView = /** @class */ (function (_super) {
             strokeDashArray: strokeDashArray,
         });
     };
-    CurvedEdgeView.extendKey = 'CurvedEdge';
+    CurvedEdgeView.extendKey = 'curvedEdge';
     return CurvedEdgeView;
 }(core_1.PolylineEdge));
 var CurvedEdgeModel = /** @class */ (function (_super) {

package/cjs/materials/group/GroupNode.js

@@ -12,6 +12,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;
@@ -34,27 +45,31 @@ var __spread = (this && this.__spread) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@logicflow/core");
+var NodeResize_1 = require("../../NodeResize");
 var GroupNodeModel = /** @class */ (function (_super) {
     __extends(GroupNodeModel, _super);
     function GroupNodeModel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.isGroup = true;
-        _this.children = new Set();
-        _this.isRestrict = true; // 其子节点是否被禁止通过拖拽移出分组。 默认false，允许拖拽移除分组。
         return _this;
     }
-    GroupNodeModel.prototype.setAttributes = function () {
+    GroupNodeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        var children = [];
+        if (Array.isArray(data.children)) {
+            children = data.children;
+        }
+        // 初始化组的子节点
+        this.children = new Set(children);
         this.width = 500;
         this.height = 200;
-        this.strokeWidth = 1;
-        this.zIndex = 0;
+        // todo: 参考bpmn.js, 分组和未加入分组的节点重合时，未加入分组的节点在分组之下。方便标识。
+        this.zIndex = -1;
         this.radius = 0;
-    };
-    /**
-     * 设置是否允许子节点被拖动移除分组
-     */
-    GroupNodeModel.prototype.setIsRestrict = function (isRestrict) {
-        this.isRestrict = isRestrict;
+        this.text.editable = false;
+        this.text.draggable = false;
+        this.isRestrict = false;
+        this.resizable = false;
     };
     GroupNodeModel.prototype.isInRange = function (_a) {
         var x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
@@ -63,28 +78,40 @@ var GroupNodeModel = /** @class */ (function (_super) {
             && y1 >= (this.y - this.height / 2)
             && y2 <= (this.y + this.height / 2);
     };
-    // todo: 更好的方式定义分组的样式
     GroupNodeModel.prototype.setAllowAppendChild = function (isAllow) {
-        if (isAllow) {
-            this.stroke = 'red';
-        }
-        else {
-            this.stroke = 'rgb(24, 125, 255)';
-        }
+        this.setProperty('groupAddable', isAllow);
     };
+    /**
+     * 添加分组子节点
+     * @param id 节点id
+     */
     GroupNodeModel.prototype.addChild = function (id) {
         this.children.add(id);
     };
+    /**
+     * 删除分组子节点
+     * @param id 节点id
+     */
     GroupNodeModel.prototype.removeChild = function (id) {
         this.children.delete(id);
     };
+    GroupNodeModel.prototype.getAddableOutlineStyle = function () {
+        return {
+            stroke: '#FEB663',
+            strokeWidth: 2,
+            strokeDasharray: '4 4',
+            fill: 'transparent',
+        };
+    };
     GroupNodeModel.prototype.getData = function () {
         var data = _super.prototype.getData.call(this);
         data.children = __spread(this.children);
+        var properties = data.properties;
+        delete properties.groupAddable;
         return data;
     };
     return GroupNodeModel;
-}(core_1.RectNodeModel));
+}(NodeResize_1.RectResize.model));
 var GroupNode = /** @class */ (function (_super) {
     __extends(GroupNode, _super);
     function GroupNode() {
@@ -94,8 +121,27 @@ var GroupNode = /** @class */ (function (_super) {
      * 重新toFront，阻止其置顶
      */
     GroupNode.prototype.toFront = function () { };
+    GroupNode.prototype.getControlGroup = function () {
+        return this.props.model.resizable ? _super.prototype.getControlGroup.call(this) : null;
+    };
+    GroupNode.prototype.getAddedableShape = function () {
+        var _a = this.props.model, width = _a.width, height = _a.height, x = _a.x, y = _a.y, radius = _a.radius, properties = _a.properties;
+        if (!properties.groupAddable)
+            return null;
+        var strokeWidth = this.props.model.getNodeStyle().strokeWidth;
+        var style = this.props.model.getAddableOutlineStyle();
+        var newWidth = width + strokeWidth + 8;
+        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.getResizeShape = function () {
+        return core_1.h('g', {}, [
+            this.getAddedableShape(),
+            _super.prototype.getResizeShape.call(this),
+        ]);
+    };
     return GroupNode;
-}(core_1.RectNode));
+}(NodeResize_1.RectResize.view));
 exports.default = {
     type: 'group',
     view: GroupNode,