@logicflow/extension 2.2.0-alpha.5 → 2.2.0-alpha.7

package/es/pool/constant.d.ts

@@ -0,0 +1,15 @@
+export declare const poolConfig: {
+    defaultWidth: number;
+    defaultHeight: number;
+    titleSize: number;
+    poolMinSize: number;
+};
+export declare const laneConfig: {
+    defaultWidth: number;
+    defaultHeight: number;
+    titleSize: number;
+    iconSize: number;
+    iconSpacing: number;
+};
+declare const _default: null;
+export default _default;

package/es/pool/constant.js

@@ -0,0 +1,17 @@
+// 泳池配置常量
+export var poolConfig = {
+    // 默认尺寸
+    defaultWidth: 120,
+    defaultHeight: 120,
+    // 标题区域
+    titleSize: 60,
+    poolMinSize: 20,
+};
+export var laneConfig = {
+    defaultWidth: 120,
+    defaultHeight: 120,
+    titleSize: 20,
+    iconSize: 20,
+    iconSpacing: 15,
+};
+export default null;

package/es/pool/index.d.ts

@@ -0,0 +1,89 @@
+import LogicFlow, { CallbackArgs, Model, BaseNodeModel, BaseEdgeModel } from '@logicflow/core';
+import { PoolModel } from './PoolModel';
+import { PoolView } from './PoolView';
+import { LaneModel } from './LaneModel';
+import { LaneView } from './LaneView';
+import EdgeConfig = LogicFlow.EdgeConfig;
+import EdgeData = LogicFlow.EdgeData;
+import NodeData = LogicFlow.NodeData;
+import BoxBoundsPoint = Model.BoxBoundsPoint;
+type ElementsInfoInGroup = {
+    childNodes: BaseNodeModel[];
+    edgesData: EdgeData[];
+};
+export declare const PoolNode: {
+    type: string;
+    view: typeof PoolView;
+    model: typeof PoolModel;
+};
+export declare const LaneNode: {
+    type: string;
+    view: typeof LaneView;
+    model: typeof LaneModel;
+};
+export declare class PoolElements {
+    static pluginName: string;
+    private lf;
+    activeGroup?: LaneModel;
+    nodeLaneMap: Map<string, string>;
+    constructor({ lf, options }: LogicFlow.IExtensionProps);
+    /**
+     * 获取节点所属的泳道
+     * @param nodeId
+     */
+    getLaneByNodeId(nodeId: string): BaseNodeModel<LogicFlow.PropertiesType> | undefined;
+    /**
+     * 获取指定范围内的泳道
+     * 当泳道重合时，优先返回最上层的泳道
+     * @param bounds
+     * @param nodeData
+     */
+    getLaneByBounds(bounds: BoxBoundsPoint, nodeData: NodeData): any | undefined;
+    /**
+     * 提高元素的层级，如果是 group，同时提高其子元素的层级
+     * @param model
+     */
+    onSelectionDrop: () => void;
+    onNodeAddOrDrop: ({ data: node }: CallbackArgs<'node:add'>) => void;
+    addNodeToGroup: (node: LogicFlow.NodeData) => void;
+    onGroupAddNode: ({ data: groupData, childId, }: CallbackArgs<'group:add-node'>) => void;
+    removeNodeFromGroup: ({ data: node, model, }: CallbackArgs<'node:delete'>) => void;
+    onSelectionDrag: () => void;
+    onNodeDrag: ({ data: node }: CallbackArgs<'node:drag'>) => void;
+    setActiveGroup: (node: LogicFlow.NodeData) => void;
+    /**
+     * @param node
+     * @param isMultiple
+     * @param isSelected
+     */
+    onNodeSelect: ({ data: node, isMultiple, isSelected, }: Omit<CallbackArgs<'node:click'>, 'e' | 'position'>) => void;
+    onNodeMove: ({ deltaX, deltaY, data, }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => void;
+    onGraphRendered: ({ data }: CallbackArgs<'graph:rendered'>) => void;
+    removeChildrenInGroupNodeData<T extends LogicFlow.NodeData | LogicFlow.NodeConfig>(nodeData: T): T;
+    /**
+     * 创建一个 Group 类型节点内部所有子节点的副本
+     * 并且在遍历所有 nodes 的过程中，顺便拿到所有 edges (只在 Group 范围的 edges)
+     */
+    initGroupChildNodes(nodeIdMap: Record<string, string>, children: Set<string>, curGroup: LaneModel, distance: number): ElementsInfoInGroup;
+    /**
+     * 根据参数 edge 选择是新建边还是基于已有边，复制一条边出来
+     * @param edge
+     * @param nodeIdMap
+     * @param distance
+     */
+    createEdge(edge: EdgeConfig | EdgeData, nodeIdMap: Record<string, string>, distance: number): BaseEdgeModel<LogicFlow.PropertiesType>;
+    /**
+     * 检测group:resize后的bounds是否会小于children的bounds
+     * 限制group进行resize时不能小于内部的占地面积
+     * @param groupModel
+     * @param deltaX
+     * @param deltaY
+     * @param newWidth
+     * @param newHeight
+     */
+    checkGroupBoundsWithChildren(groupModel: LaneModel, deltaX: number, deltaY: number, newWidth: number, newHeight: number): boolean;
+    init(): void;
+    render(): void;
+    destroy(): void;
+}
+export default PoolElements;

package/es/pool/index.js

@@ -0,0 +1,524 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { EventType, transformNodeData, transformEdgeData, } from '@logicflow/core';
+import { assign, filter, forEach, cloneDeep, has, map } from 'lodash-es';
+import { PoolModel } from './PoolModel';
+import { PoolView } from './PoolView';
+import { LaneModel } from './LaneModel';
+import { LaneView } from './LaneView';
+import { isAllowMoveTo, isBoundsInLane } from './utils';
+export var PoolNode = {
+    type: 'pool',
+    view: PoolView,
+    model: PoolModel,
+};
+export var LaneNode = {
+    type: 'lane',
+    view: LaneView,
+    model: LaneModel,
+};
+var PoolElements = /** @class */ (function () {
+    function PoolElements(_a) {
+        var lf = _a.lf, options = _a.options;
+        var _this = this;
+        // 存储节点与 group 的映射关系
+        this.nodeLaneMap = new Map();
+        /**
+         * 提高元素的层级，如果是 group，同时提高其子元素的层级
+         * @param model
+         */
+        this.onSelectionDrop = function () {
+            var selectedNodes = _this.lf.graphModel.getSelectElements().nodes;
+            selectedNodes.forEach(function (node) {
+                _this.addNodeToGroup(node);
+            });
+        };
+        this.onNodeAddOrDrop = function (_a) {
+            var node = _a.data;
+            _this.addNodeToGroup(node);
+        };
+        this.addNodeToGroup = function (node) {
+            // 1. 如果该节点之前已经有泳道了，则将其从之前的泳道移除
+            var preLaneId = _this.nodeLaneMap.get(node.id);
+            if (preLaneId) {
+                var lane = _this.lf.getNodeModelById(preLaneId);
+                lane.removeChild(node.id);
+                _this.nodeLaneMap.delete(node.id);
+                lane.setAllowAppendChild(false);
+            }
+            // 2. 然后再判断这个节点是否在某个泳道范围内，如果是，则将其添加到对应的泳道中
+            var nodeModel = _this.lf.getNodeModelById(node.id);
+            var bounds = nodeModel === null || nodeModel === void 0 ? void 0 : nodeModel.getBounds();
+            if (nodeModel && bounds) {
+                // TODO: 确认下面的注释内容
+                // https://github.com/didi/LogicFlow/issues/1261
+                // 当使用 SelectionSelect 框选后触发 lf.addNode(Group)
+                // 会触发 appendNodeToGroup() 的执行
+                // 由于 this.getGroup() 会判断 node.id !== nodeData.id
+                // 因此当 addNode 是 Group 类型时，this.getGroup() 会一直返回空
+                // 导致了下面这段代码无法执行，也就是无法将当前添加的 Group 添加到 this.nodeLaneMap 中
+                // 这导致了折叠分组时触发的 foldEdge() 无法正确通过 getNodeGroup() 拿到正确的 groupId
+                // 从而导致折叠分组时一直都会创建一个虚拟边
+                // 而初始化分组时由于正确设置了nodeLaneMap的数据，因此不会产生虚拟边的错误情况
+                if (nodeModel.isGroup) {
+                    var lane_1 = nodeModel;
+                    forEach(Array.from(lane_1.children), function (childId) {
+                        _this.nodeLaneMap.set(childId, node.id);
+                    });
+                }
+                var lane = _this.getLaneByBounds(bounds, node);
+                if (lane) {
+                    var isAllowAppendIn = lane.isAllowAppendIn(node);
+                    if (isAllowAppendIn) {
+                        lane.addChild(node.id);
+                        // 建立节点与 lane 的映射关系放在了 lane.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
+                        lane.setAllowAppendChild(false);
+                        var nodeModel_1 = _this.lf.getNodeModelById(node.id);
+                        nodeModel_1 === null || nodeModel_1 === void 0 ? void 0 : nodeModel_1.setProperties(__assign(__assign({}, nodeModel_1.properties), { parent: lane.id }));
+                    }
+                    else {
+                        // 抛出不允许插入的事件
+                        _this.lf.emit('lane:not-allowed', {
+                            lane: lane.getData(),
+                            node: node,
+                        });
+                    }
+                }
+            }
+        };
+        this.onGroupAddNode = function (_a) {
+            var groupData = _a.data, childId = _a.childId;
+            _this.nodeLaneMap.set(childId, groupData.id);
+        };
+        this.removeNodeFromGroup = function (_a) {
+            var node = _a.data, model = _a.model;
+            if (model.isGroup && node.children) {
+                forEach(Array.from(node.children), function (childId) {
+                    _this.nodeLaneMap.delete(childId);
+                    _this.lf.deleteNode(childId);
+                });
+            }
+            var laneId = _this.nodeLaneMap.get(node.id);
+            if (laneId) {
+                var lane = _this.lf.getNodeModelById(laneId);
+                lane && lane.removeChild(node.id);
+                _this.nodeLaneMap.delete(node.id);
+                var nodeModel = _this.lf.getNodeModelById(node.id);
+                // 移除时删除properties中的parent和relativeDistanceX、relativeDistanceY
+                var newProperties = __assign(__assign({}, nodeModel === null || nodeModel === void 0 ? void 0 : nodeModel.properties), { parent: undefined, relativeDistanceX: undefined, relativeDistanceY: undefined });
+                nodeModel === null || nodeModel === void 0 ? void 0 : nodeModel.setProperties(newProperties);
+            }
+        };
+        this.onSelectionDrag = function () {
+            var selectedNodes = _this.lf.graphModel.getSelectElements().nodes;
+            selectedNodes.forEach(function (node) {
+                _this.setActiveGroup(node);
+            });
+        };
+        this.onNodeDrag = function (_a) {
+            var node = _a.data;
+            _this.setActiveGroup(node);
+        };
+        this.setActiveGroup = function (node) {
+            var _a;
+            var nodeModel = _this.lf.getNodeModelById(node.id);
+            var bounds = nodeModel === null || nodeModel === void 0 ? void 0 : nodeModel.getBounds();
+            if (nodeModel && bounds) {
+                var targetGroup = _this.getLaneByBounds(bounds, node);
+                if (_this.activeGroup) {
+                    _this.activeGroup.setAllowAppendChild(false);
+                }
+                if (!targetGroup || (nodeModel.isGroup && targetGroup.id === node.id)) {
+                    return;
+                }
+                var isAllowAppendIn = targetGroup.isAllowAppendIn(node);
+                if (!isAllowAppendIn)
+                    return;
+                _this.activeGroup = targetGroup;
+                (_a = _this.activeGroup) === null || _a === void 0 ? void 0 : _a.setAllowAppendChild(true);
+            }
+        };
+        /**
+         * @param node
+         * @param isMultiple
+         * @param isSelected
+         */
+        this.onNodeSelect = function (_a) {
+            var node = _a.data, isMultiple = _a.isMultiple, isSelected = _a.isSelected;
+            var nodeModel = _this.lf.getNodeModelById(node.id);
+            // FIX #1004
+            // 如果节点被多选，
+            // 这个节点是分组，则将分组的所有子节点取消选中
+            // 这个节点是分组的子节点，且其所属分组节点已选，则取消选中
+            if (isMultiple && isSelected) {
+                if (nodeModel === null || nodeModel === void 0 ? void 0 : nodeModel.isGroup) {
+                    var children = nodeModel.children;
+                    forEach(Array.from(children), function (childId) {
+                        var childModel = _this.lf.getNodeModelById(childId);
+                        childModel === null || childModel === void 0 ? void 0 : childModel.setSelected(false);
+                    });
+                }
+                else {
+                    var laneId = _this.nodeLaneMap.get(node.id);
+                    if (laneId) {
+                        var laneModel = _this.lf.getNodeModelById(laneId);
+                        (laneModel === null || laneModel === void 0 ? void 0 : laneModel.isSelected) && (nodeModel === null || nodeModel === void 0 ? void 0 : nodeModel.setSelected(false));
+                    }
+                }
+            }
+        };
+        this.onNodeMove = function (_a) {
+            var deltaX = _a.deltaX, deltaY = _a.deltaY, data = _a.data;
+            var id = data.id, x = data.x, y = data.y, properties = data.properties;
+            if (!properties) {
+                return;
+            }
+            var width = properties.width, height = properties.height;
+            var groupId = _this.nodeLaneMap.get(id);
+            if (!groupId) {
+                return;
+            }
+            var groupModel = _this.lf.getNodeModelById(groupId);
+            if (!groupModel || !groupModel.isRestrict || !groupModel.autoResize) {
+                return;
+            }
+            // 当父节点isRestrict=true & autoResize=true
+            // 子节点在父节点中移动时，父节点会自动调整大小
+            // step1: 计算出当前child的bounds
+            var newX = x + deltaX / 2;
+            var newY = y + deltaY / 2;
+            var minX = newX - width / 2;
+            var minY = newY - height / 2;
+            var maxX = newX + width / 2;
+            var maxY = newY + height / 2;
+            // step2：比较当前child.bounds与parent.bounds的差异，比如child.minX<parent.minX，那么parent.minX=child.minX
+            var hasChange = false;
+            var groupBounds = groupModel.getBounds();
+            var newGroupBounds = Object.assign({}, groupBounds);
+            if (minX < newGroupBounds.minX) {
+                newGroupBounds.minX = minX;
+                hasChange = true;
+            }
+            if (minY < newGroupBounds.minY) {
+                newGroupBounds.minY = minY;
+                hasChange = true;
+            }
+            if (maxX > newGroupBounds.maxX) {
+                newGroupBounds.maxX = maxX;
+                hasChange = true;
+            }
+            if (maxY > newGroupBounds.maxY) {
+                newGroupBounds.maxY = maxY;
+                hasChange = true;
+            }
+            if (!hasChange) {
+                return;
+            }
+            // step3: 根据当前parent.bounds去计算出最新的x、y、width、height
+            var newGroupX = newGroupBounds.minX + (newGroupBounds.maxX - newGroupBounds.minX) / 2;
+            var newGroupY = newGroupBounds.minY + (newGroupBounds.maxY - newGroupBounds.minY) / 2;
+            var newGroupWidth = newGroupBounds.maxX - newGroupBounds.minX;
+            var newGroupHeight = newGroupBounds.maxY - newGroupBounds.minY;
+            groupModel.moveTo(newGroupX, newGroupY);
+            groupModel.width = newGroupWidth;
+            groupModel.height = newGroupHeight;
+        };
+        this.onGraphRendered = function (_a) {
+            var data = _a.data;
+            forEach(data.nodes, function (node) {
+                if (node.children) {
+                    forEach(node.children, function (childId) {
+                        _this.nodeLaneMap.set(childId, node.id);
+                    });
+                }
+            });
+        };
+        lf.register(PoolNode);
+        lf.register(LaneNode);
+        this.lf = lf;
+        assign(this, options);
+        // 初始化插件，从监听事件开始及设置规则开始
+        this.init();
+    }
+    /**
+     * 获取节点所属的泳道
+     * @param nodeId
+     */
+    PoolElements.prototype.getLaneByNodeId = function (nodeId) {
+        var laneId = this.nodeLaneMap.get(nodeId);
+        if (laneId) {
+            return this.lf.getNodeModelById(laneId);
+        }
+    };
+    /**
+     * 获取指定范围内的泳道
+     * 当泳道重合时，优先返回最上层的泳道
+     * @param bounds
+     * @param nodeData
+     */
+    PoolElements.prototype.getLaneByBounds = function (bounds, nodeData) {
+        var nodes = this.lf.graphModel.nodes;
+        var lanes = filter(nodes, function (node) {
+            return (!!node.isGroup &&
+                isBoundsInLane(bounds, node) &&
+                node.id !== nodeData.id);
+        });
+        var count = lanes.length;
+        if (count <= 1) {
+            return lanes[0];
+        }
+        else {
+            var topZIndexLane = lanes[count - 1];
+            for (var i = count - 2; i >= 0; i--) {
+                if (lanes[i].zIndex > topZIndexLane.zIndex) {
+                    topZIndexLane = lanes[i];
+                }
+            }
+            return topZIndexLane;
+        }
+    };
+    PoolElements.prototype.removeChildrenInGroupNodeData = function (nodeData) {
+        var _a;
+        var newNodeData = cloneDeep(nodeData);
+        delete newNodeData.children;
+        if ((_a = newNodeData.properties) === null || _a === void 0 ? void 0 : _a.children) {
+            delete newNodeData.properties.children;
+        }
+        return newNodeData;
+    };
+    /**
+     * 创建一个 Group 类型节点内部所有子节点的副本
+     * 并且在遍历所有 nodes 的过程中，顺便拿到所有 edges (只在 Group 范围的 edges)
+     */
+    PoolElements.prototype.initGroupChildNodes = function (nodeIdMap, children, curGroup, distance) {
+        var _this = this;
+        // Group 中所有子节点
+        var allChildNodes = [];
+        // 属于 Group 内部边的 EdgeData
+        var edgesDataArr = [];
+        // 所有有关联的连线
+        var allRelatedEdges = [];
+        forEach(Array.from(children), function (childId) {
+            var childNode = _this.lf.getNodeModelById(childId);
+            if (childNode) {
+                var childNodeChildren = childNode.children;
+                var childNodeData = childNode.getData();
+                var eventType = EventType.NODE_GROUP_COPY || 'node:group-copy-add';
+                var newNodeConfig = transformNodeData(_this.removeChildrenInGroupNodeData(childNodeData), distance);
+                var tempChildNode = _this.lf.addNode(newNodeConfig, eventType);
+                curGroup.addChild(tempChildNode.id);
+                nodeIdMap[childId] = tempChildNode.id; // id 同 childId，做映射存储
+                allChildNodes.push(tempChildNode);
+                // 1. 存储 children 内部节点相关的输入边（incoming）
+                allRelatedEdges.push.apply(allRelatedEdges, __spreadArray([], __read(__spreadArray(__spreadArray([], __read(tempChildNode.incoming.edges), false), __read(tempChildNode.outgoing.edges), false)), false));
+                if (childNodeChildren instanceof Set) {
+                    var _a = _this.initGroupChildNodes(nodeIdMap, childNodeChildren, tempChildNode, distance), childNodes = _a.childNodes, edgesData = _a.edgesData;
+                    allChildNodes.push.apply(allChildNodes, __spreadArray([], __read(childNodes), false));
+                    edgesDataArr.push.apply(edgesDataArr, __spreadArray([], __read(edgesData), false));
+                }
+            }
+        });
+        // 1. 判断每一条边的开始节点、目标节点是否在 Group 中
+        var edgesInnerGroup = filter(allRelatedEdges, function (edge) {
+            return (has(nodeIdMap, edge.sourceNodeId) && has(nodeIdMap, edge.targetNodeId));
+        });
+        // 2. 为「每一条 Group 的内部边」构建出 EdgeData 数据，得到 EdgeConfig，生成新的线
+        var edgesDataInnerGroup = map(edgesInnerGroup, function (edge) {
+            return edge.getData();
+        });
+        return {
+            childNodes: allChildNodes,
+            edgesData: edgesDataArr.concat(edgesDataInnerGroup),
+        };
+    };
+    /**
+     * 根据参数 edge 选择是新建边还是基于已有边，复制一条边出来
+     * @param edge
+     * @param nodeIdMap
+     * @param distance
+     */
+    PoolElements.prototype.createEdge = function (edge, nodeIdMap, distance) {
+        var _a, _b;
+        var sourceNodeId = edge.sourceNodeId, targetNodeId = edge.targetNodeId;
+        var sourceId = (_a = nodeIdMap[sourceNodeId]) !== null && _a !== void 0 ? _a : sourceNodeId;
+        var targetId = (_b = nodeIdMap[targetNodeId]) !== null && _b !== void 0 ? _b : targetNodeId;
+        // 如果是有 id 且 text 是对象的边，需要重新计算位置，否则直接用 edgeConfig 生成边
+        var newEdgeConfig = cloneDeep(edge);
+        if (edge.id && typeof edge.text === 'object' && edge.text !== null) {
+            newEdgeConfig = transformEdgeData(edge, distance);
+        }
+        return this.lf.graphModel.addEdge(__assign(__assign({}, newEdgeConfig), { sourceNodeId: sourceId, targetNodeId: targetId }));
+    };
+    /**
+     * 检测group:resize后的bounds是否会小于children的bounds
+     * 限制group进行resize时不能小于内部的占地面积
+     * @param groupModel
+     * @param deltaX
+     * @param deltaY
+     * @param newWidth
+     * @param newHeight
+     */
+    PoolElements.prototype.checkGroupBoundsWithChildren = function (groupModel, deltaX, deltaY, newWidth, newHeight) {
+        if (groupModel.children) {
+            var children = groupModel.children, x = groupModel.x, y = groupModel.y;
+            // 根据deltaX和deltaY计算出当前model的bounds
+            var newX = x + deltaX / 2;
+            var newY = y + deltaY / 2;
+            var groupMinX = newX - newWidth / 2;
+            var groupMinY = newY - newHeight / 2;
+            var groupMaxX = newX + newWidth / 2;
+            var groupMaxY = newY + newHeight / 2;
+            var childrenArray = Array.from(children);
+            for (var i = 0; i < childrenArray.length; i++) {
+                var childId = childrenArray[i];
+                var child = this.lf.getNodeModelById(childId);
+                if (!child) {
+                    continue;
+                }
+                var childBounds = child.getBounds();
+                var minX = childBounds.minX, minY = childBounds.minY, maxX = childBounds.maxX, maxY = childBounds.maxY;
+                // parent:resize后的bounds不能小于child:bounds，否则阻止其resize
+                var canResize = groupMinX <= minX &&
+                    groupMinY <= minY &&
+                    groupMaxX >= maxX &&
+                    groupMaxY >= maxY;
+                if (!canResize) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    };
+    PoolElements.prototype.init = function () {
+        var _this = this;
+        var lf = this.lf;
+        var graphModel = lf.graphModel;
+        // 添加分组节点移动规则
+        // 1. 移动分组节点时，同时移动分组内所有节点
+        // 2. 移动子节点时，判断是否有限制规则（isRestrict）
+        graphModel.addNodeMoveRules(function (model, deltaX, deltaY) {
+            // 判断如果是 group，移动时需要同时移动组内的所有节点
+            if (model.isGroup) {
+                return true;
+            }
+            var groupId = _this.nodeLaneMap.get(model.id);
+            var groupModel = _this.lf.getNodeModelById(groupId);
+            if (groupModel && groupModel.isRestrict) {
+                if (groupModel.autoResize) {
+                    // 子节点在父节点中移动时，父节点会自动调整大小
+                    // 在node:mousemove中进行父节点的调整
+                    return true;
+                }
+                else {
+                    // 如果移动的节点存在于某个分组中，且这个分组禁止子节点移出去
+                    var groupBounds = groupModel.getBounds();
+                    return isAllowMoveTo(groupBounds, model, deltaX, deltaY);
+                }
+            }
+            return true;
+        });
+        graphModel.addNodeResizeRules(function (model, deltaX, deltaY, width, height) {
+            if (model.isGroup && model.isRestrict) {
+                return _this.checkGroupBoundsWithChildren(model, deltaX, deltaY, width, height);
+            }
+            return true;
+        });
+        graphModel.dynamicGroup = this;
+        lf.on('node:add,node:drop,node:dnd-add', this.onNodeAddOrDrop);
+        lf.on('selection:drop', this.onSelectionDrop);
+        lf.on('node:delete', this.removeNodeFromGroup);
+        lf.on('node:drag,node:dnd-drag', this.onNodeDrag);
+        lf.on('selection:drag', this.onSelectionDrag);
+        lf.on('node:click', this.onNodeSelect);
+        lf.on('node:mousemove', this.onNodeMove);
+        lf.on('graph:rendered', this.onGraphRendered);
+        lf.on('group:add-node', this.onGroupAddNode);
+        lf.addElements = function (_a, distance) {
+            var selectedNodes = _a.nodes, selectedEdges = _a.edges;
+            if (distance === void 0) { distance = 40; }
+            // oldNodeId -> newNodeId 映射 Map
+            var nodeIdMap = {};
+            // 本次添加的所有节点和边
+            var elements = {
+                nodes: [],
+                edges: [],
+            };
+            // 所有属于分组内的边 -> sourceNodeId 和 targetNodeId 都在 Group 内
+            var edgesInnerGroup = [];
+            forEach(selectedNodes, function (node) {
+                var _a, _b;
+                var originId = node.id;
+                var children = (_b = (_a = node.properties) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : node.children;
+                var model = lf.addNode(_this.removeChildrenInGroupNodeData(node));
+                if (originId)
+                    nodeIdMap[originId] = model.id;
+                elements.nodes.push(model); // 此时为 group 的 nodeModel
+                if (model.isGroup) {
+                    var edgesData = _this.initGroupChildNodes(nodeIdMap, children, model, distance).edgesData;
+                    edgesInnerGroup.push.apply(edgesInnerGroup, __spreadArray([], __read(edgesData), false));
+                }
+            });
+            forEach(edgesInnerGroup, function (edge) {
+                _this.createEdge(edge, nodeIdMap, distance);
+            });
+            forEach(selectedEdges, function (edge) {
+                elements.edges.push(_this.createEdge(edge, nodeIdMap, distance));
+            });
+            // 返回 elements 进行选中效果，即触发 element.selectElementById()
+            // shortcut.ts 也会对最外层的 nodes 和 edges 进行偏移，即 translationNodeData()
+            return elements;
+        };
+        this.render();
+    };
+    PoolElements.prototype.render = function () { };
+    PoolElements.prototype.destroy = function () {
+        // 销毁监听的事件，并移除渲染的 dom 内容
+        this.lf.off('node:add,node:drop,node:dnd-add', this.onNodeAddOrDrop);
+        this.lf.off('selection:drop', this.onSelectionDrop);
+        this.lf.off('node:delete', this.removeNodeFromGroup);
+        this.lf.off('node:drag,node:dnd-drag', this.onNodeDrag);
+        this.lf.off('selection:drag', this.onSelectionDrag);
+        this.lf.off('node:click', this.onNodeSelect);
+        this.lf.off('node:mousemove', this.onNodeMove);
+        this.lf.off('graph:rendered', this.onGraphRendered);
+        this.lf.off('group:add-node', this.onGroupAddNode);
+    };
+    PoolElements.pluginName = 'PoolElements';
+    return PoolElements;
+}());
+export { PoolElements };
+export default PoolElements;

package/es/pool/utils.d.ts

@@ -0,0 +1,19 @@
+import { BaseNodeModel, Model } from '@logicflow/core';
+import BoxBoundsPoint = Model.BoxBoundsPoint;
+/**
+ *
+ * @param bounds
+ * @param group
+ */
+export declare function isBoundsInLane(bounds: BoxBoundsPoint, group: BaseNodeModel): boolean;
+/**
+ * 判断 bounds 是否可以移动到下一个范围
+ * @param groupBounds
+ * @param node
+ * @param deltaX
+ * @param deltaY
+ */
+export declare function isAllowMoveTo(groupBounds: BoxBoundsPoint, node: BaseNodeModel, deltaX: number, deltaY: number): {
+    x: boolean;
+    y: boolean;
+};