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

package/lib/pool/PoolModel.js

@@ -0,0 +1,589 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoolModel = void 0;
+var mobx_1 = require("mobx");
+var lodash_es_1 = require("lodash-es");
+var model_1 = require("../dynamic-group/model");
+var constant_1 = require("./constant");
+var PoolModel = /** @class */ (function (_super) {
+    __extends(PoolModel, _super);
+    function PoolModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
+        // 泳池特定属性
+        // 标题区域大小：如果是垂直方向，指代的就是标题区的宽度，如果是水平方向，指代的就是标题区的高度
+        _this.titleSize = constant_1.poolConfig.titleSize;
+        _this.poolConfig = constant_1.poolConfig;
+        _this.isPool = true;
+        // 标记是否已创建默认泳道
+        _this._defaultLaneCreated = false;
+        return _this;
+    }
+    Object.defineProperty(PoolModel.prototype, "isHorizontal", {
+        get: function () {
+            var _a;
+            return ((_a = this.properties) === null || _a === void 0 ? void 0 : _a.direction) === 'horizontal';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PoolModel.prototype.initNodeData = function (data) {
+        var _a, _b;
+        _super.prototype.initNodeData.call(this, data);
+        if (data.properties) {
+            // 泳池基础配置
+            this.width = ((_a = data.properties) === null || _a === void 0 ? void 0 : _a.width) || constant_1.poolConfig.defaultWidth;
+            this.height = ((_b = data.properties) === null || _b === void 0 ? void 0 : _b.height) || constant_1.poolConfig.defaultHeight;
+        }
+        // 动态分组配置
+        this.autoResize = false;
+        this.isRestrict = true;
+        this.transformWithContainer = true;
+        this.resizable = false;
+        this.rotatable = false;
+        this.autoToFront = false;
+        // 允许文本编辑
+        this.text.editable = true;
+        // 初始化文本位置
+        this.updateTextPosition();
+        this.addEventListeners();
+        this.resizePool();
+    };
+    // 增加监听事件
+    PoolModel.prototype.addEventListeners = function () {
+        var _this = this;
+        this.graphModel.eventCenter.on('node:resize', function (_a) {
+            var data = _a.data, index = _a.index;
+            // 如果resize的是子泳道
+            if (_this.children.has(data.id)) {
+                // 检查是否为泳道节点的尺寸变化
+                var resizedNode = _this.graphModel.getNodeModelById(data.id);
+                if (!resizedNode || !resizedNode.type || resizedNode.type !== 'lane') {
+                    return;
+                }
+                // 获取所有子泳道
+                var lanes = _this.getLanes();
+                // 更新泳池宽高
+                var newWidth = void 0;
+                var newHeight = void 0;
+                var deltaX = 0;
+                var deltaY = 0;
+                if (_this.isHorizontal) {
+                    // 横向布局：
+                    // 泳池宽度 = 最大泳道宽度 + 标题区域
+                    var totalLaneHeight = lanes.reduce(function (sum, lane) { return sum + lane.height; }, 0);
+                    newWidth = resizedNode.width + constant_1.poolConfig.titleSize;
+                    // 泳池高度 = 所有泳道高度之和
+                    newHeight = totalLaneHeight;
+                }
+                else {
+                    // 竖向布局：
+                    // 泳池高度 = 最大泳道高度 + 标题区域
+                    var totalLaneWidth = lanes.reduce(function (sum, lane) { return sum + lane.width; }, 0);
+                    newHeight = resizedNode.height + constant_1.poolConfig.titleSize;
+                    // 泳池宽度 = 所有泳道宽度之和
+                    newWidth = totalLaneWidth;
+                }
+                // 根据拖拽控制点方向计算位移方向
+                // ResizeControlIndex: 0-左上, 1-右上, 2-右下, 3-左下
+                var resizeIndex = typeof index === 'number' ? index : 2;
+                var isLeft = resizeIndex === 0 || resizeIndex === 3;
+                var isTop = resizeIndex === 0 || resizeIndex === 1;
+                var signX = isLeft ? -1 : 1;
+                var signY = isTop ? -1 : 1;
+                deltaX = signX * (newWidth - _this.width);
+                deltaY = signY * (newHeight - _this.height);
+                _this.width = newWidth;
+                _this.height = newHeight;
+                _this.move(deltaX / 2, deltaY / 2);
+            }
+            // 重新布局泳道以适应新的泳池尺寸
+            _this.resizeChildren();
+            // 更新泳池文本位置
+            _this.updateTextPosition();
+        });
+    };
+    /**
+     * 获取需要移动的节点
+     * @param groupModel
+     */
+    PoolModel.prototype.getNodesInGroup = function (groupModel) {
+        var _this = this;
+        var nodeIds = [];
+        if (groupModel.isGroup) {
+            (0, lodash_es_1.forEach)(Array.from(groupModel.children), function (nodeId) {
+                var nodeModel = _this.graphModel.getNodeModelById(nodeId);
+                // 拖拽泳道时会触发泳池的getNodesInGroup，这时泳池再触发移动的子泳道里就需要剔除当前正在拖拽的泳道
+                if (nodeModel && !nodeModel.isDragging) {
+                    nodeIds.push(nodeId);
+                }
+            });
+        }
+        return nodeIds;
+    };
+    /**
+     * 初始化文本位置 - 根据布局方向设置文本位置
+     */
+    PoolModel.prototype.updateTextPosition = function () {
+        if (this.isHorizontal) {
+            // 横向泳池：文本显示在左侧标题区域
+            this.text.x = this.x - this.width / 2 + constant_1.poolConfig.titleSize / 2;
+            this.text.y = this.y;
+        }
+        else {
+            // 纵向泳池：文本显示在顶部标题区域
+            this.text.x = this.x;
+            this.text.y = this.y - this.height / 2 + constant_1.poolConfig.titleSize / 2;
+        }
+    };
+    /**
+     * 根据子泳道自动调整泳池尺寸
+     */
+    PoolModel.prototype.resizePool = function () {
+        var lanes = this.getLanes();
+        if (lanes.length === 0)
+            return;
+        var contentWidth = 0;
+        var contentHeight = 0;
+        if (this.isHorizontal) {
+            // 横向布局：计算所有泳道的边界
+            (0, lodash_es_1.forEach)(lanes, function (lane) {
+                var laneWidth = lane.width;
+                var laneHeight = lane.height;
+                contentWidth = Math.max(contentWidth, laneWidth);
+                contentHeight += laneHeight;
+            });
+            // 计算新尺寸（横向布局：宽度包含标题区域）
+            this.width = contentWidth + constant_1.poolConfig.titleSize;
+            this.height = contentHeight;
+        }
+        else {
+            // 竖向布局：计算所有泳道的边界
+            (0, lodash_es_1.forEach)(lanes, function (lane) {
+                var laneWidth = lane.width;
+                var laneHeight = lane.height;
+                contentWidth += laneWidth;
+                contentHeight = Math.max(contentHeight, laneHeight);
+            });
+            // 计算新尺寸（竖向布局：高度包含标题区域）
+            this.width = contentWidth;
+            this.height = contentHeight + constant_1.poolConfig.titleSize;
+        }
+        // 更新文本位置
+        this.updateTextPosition();
+    };
+    /**
+     * 重新调整所有泳道布局
+     * @param newLanePosition 添加位置（可选）：'above'|'below'|'left'|'right'
+     * @param newLaneId 新添加的泳道ID（可选）
+     */
+    PoolModel.prototype.resizeChildrenWithNewLane = function (newLanePosition, newLaneId) {
+        var _this = this;
+        var _a;
+        var lanes = this.getLanes();
+        var isAddingNewLane = newLanePosition && newLaneId;
+        if (!isAddingNewLane || (0, lodash_es_1.isEmpty)(lanes))
+            return;
+        var orderedLanes = [];
+        // 找到新创建的泳道
+        var newLane = lanes.find(function (lane) { return lane.id === newLaneId; });
+        // 先找到触发新增泳道的泳道的index
+        orderedLanes = lanes
+            .filter(function (lane) { return lane.id !== newLaneId; })
+            .slice()
+            .sort(function (a, b) { return (_this.isHorizontal ? a.y - b.y : a.x - b.x); });
+        if (newLane) {
+            var refId_1 = (_a = newLane.properties) === null || _a === void 0 ? void 0 : _a.referenceLaneId;
+            var refIndex = refId_1
+                ? orderedLanes.findIndex(function (l) { return l.id === refId_1; })
+                : 0;
+            var insertIndex = ['above', 'left'].includes(newLanePosition)
+                ? Math.max(refIndex, 0)
+                : Math.min(refIndex + 1, orderedLanes.length);
+            // 按顺序插入新泳道
+            orderedLanes.splice(insertIndex, 0, newLane);
+        }
+        if (this.isHorizontal) {
+            // 统一泳道宽度
+            var laneWidth_1 = this.width - constant_1.poolConfig.titleSize;
+            // 计算泳道在内容区域内的分布
+            var newHeight = orderedLanes.reduce(function (sum, lane) {
+                return sum + lane.height;
+            }, 0);
+            var laneTopDistance_1 = this.y - newHeight / 2;
+            orderedLanes.forEach(function (lane, index) {
+                var newLaneY = laneTopDistance_1 + lane.height / 2;
+                // 统一泳道文本位置
+                lane.text = __assign(__assign({}, lane.text), { x: lane.x - laneWidth_1 / 2 + constant_1.laneConfig.titleSize / 2, y: lane.y });
+                _this.moveLane(lane, lane.x, newLaneY);
+                // 为下一个泳道计算Y坐标
+                if (index < orderedLanes.length - 1) {
+                    laneTopDistance_1 += lane.height;
+                }
+            });
+            this.height = newHeight;
+        }
+        else {
+            // 统一泳道高度
+            var laneHeight_1 = this.height - constant_1.poolConfig.titleSize;
+            var newWidth = orderedLanes.reduce(function (sum, lane) {
+                return sum + lane.width;
+            }, 0);
+            var laneLeftDistance_1 = this.x - newWidth / 2;
+            // 遍历所有泳道，设置它们的位置
+            orderedLanes.forEach(function (lane, index) {
+                var newLaneX = laneLeftDistance_1 + lane.width / 2;
+                // 统一泳道文本位置
+                lane.text = __assign(__assign({}, lane.text), { x: lane.x, y: lane.y - laneHeight_1 / 2 + constant_1.laneConfig.titleSize / 2 });
+                _this.moveLane(lane, newLaneX, lane.y);
+                // 为下一个泳道计算X坐标
+                if (index < orderedLanes.length - 1) {
+                    laneLeftDistance_1 += lane.width;
+                }
+            });
+            this.width = newWidth;
+        }
+        // 更新文本位置
+        this.updateTextPosition();
+    };
+    PoolModel.prototype.moveLane = function (lane, newX, newY) {
+        var _this = this;
+        // 更新泳子节点位置
+        var childrenRelPos = [];
+        if (lane.children && lane.children.size > 0) {
+            lane.children.forEach(function (childId) {
+                var childNode = _this.graphModel.getNodeModelById(childId);
+                // 过滤掉拖拽中的节点和 Lane 类型（避免递归）
+                if (childNode &&
+                    !childNode.isDragging &&
+                    String(childNode.type) !== 'lane') {
+                    childrenRelPos.push({
+                        id: childId,
+                        dx: childNode.x - lane.x,
+                        dy: childNode.y - lane.y,
+                    });
+                }
+            });
+        }
+        // 设置泳道位置和尺寸
+        lane.moveTo(newX, newY, true);
+        childrenRelPos.forEach(function (_a) {
+            var id = _a.id, dx = _a.dx, dy = _a.dy;
+            var childNode = _this.graphModel.getNodeModelById(id);
+            if (childNode) {
+                var x_1 = childNode.x, y_1 = childNode.y;
+                var newChildX_1 = lane.x + dx;
+                var newChildY_1 = lane.y + dy;
+                childNode.moveTo(newChildX_1, newChildY_1);
+                var incomingEdges = childNode.incoming.edges;
+                var outgoingEdges = childNode.outgoing.edges;
+                incomingEdges.forEach(function (edge) {
+                    edge.moveEndPoint(newChildX_1 - x_1, newChildY_1 - y_1);
+                });
+                outgoingEdges.forEach(function (edge) {
+                    edge.moveStartPoint(newChildX_1 - x_1, newChildY_1 - y_1);
+                });
+            }
+        });
+    };
+    /**
+     * 重新调整所有泳道布局
+     * @param newLanePosition 添加位置（可选）：'above'|'below'|'left'|'right'
+     * @param newLaneId 新添加的泳道ID（可选）
+     */
+    PoolModel.prototype.resizeChildren = function () {
+        var _this = this;
+        // 遍历所有泳道，horizontal泳道按Y轴排序，vertical泳道按X轴排序并调整位置
+        var lanes = this.getLanes();
+        if (lanes.length === 0)
+            return;
+        if (this.isHorizontal) {
+            this.height = lanes.reduce(function (sum, lane) {
+                return sum + lane.height;
+            }, 0);
+            // 遍历所有泳道，产出它们在y轴从上到下的顺序
+            var orderedLanes_1 = lanes.slice().sort(function (a, b) { return a.y - b.y; });
+            lanes.forEach(function (lane) {
+                lane.width = _this.width - constant_1.poolConfig.titleSize;
+                var laneIndex = orderedLanes_1.findIndex(function (orderedLane) { return orderedLane.id === lane.id; });
+                // 遍历orderedLanes，计算出lane相比泳池顶部的距离
+                var laneTopDistance = orderedLanes_1.reduce(function (sum, orderedLane, index) {
+                    if (index < laneIndex && orderedLane.id !== lane.id) {
+                        return sum + orderedLane.height;
+                    }
+                    return sum;
+                }, _this.y - _this.height / 2);
+                lane.moveTo(_this.x - _this.width / 2 + constant_1.poolConfig.titleSize + lane.width / 2, laneTopDistance + lane.height / 2, true);
+            });
+        }
+        else {
+            this.width = lanes.reduce(function (sum, lane) {
+                return sum + lane.width;
+            }, 0);
+            // 垂直泳道按X轴排序
+            var orderedLanes_2 = (0, lodash_es_1.cloneDeep)(lanes).sort(function (a, b) { return a.x - b.x; });
+            lanes.forEach(function (lane) {
+                lane.height = _this.height - constant_1.poolConfig.titleSize;
+                var laneIndex = orderedLanes_2.findIndex(function (orderedLane) { return orderedLane.id === lane.id; });
+                // 遍历orderedLanes，计算出lane相比泳池顶部的距离
+                var laneLeftDistance = orderedLanes_2.reduce(function (sum, orderedLane, index) {
+                    if (index < laneIndex && orderedLane.id !== lane.id) {
+                        return sum + orderedLane.width;
+                    }
+                    return sum;
+                }, _this.x - _this.width / 2);
+                lane.moveTo(laneLeftDistance + lane.width / 2, _this.y - _this.height / 2 + constant_1.poolConfig.titleSize + lane.height / 2, true);
+            });
+        }
+    };
+    /**
+     * 获取子泳道
+     */
+    PoolModel.prototype.getLanes = function () {
+        var _this = this;
+        var children = [];
+        Array.from(this.children).forEach(function (childId) {
+            var childModel = _this.graphModel.getNodeModelById(childId);
+            if (childModel && String(childModel.type) === 'lane') {
+                children.push(childModel);
+            }
+        });
+        return children;
+    };
+    /**
+     * 添加泳道的公共方法
+     * @param position 添加位置：'above'|'below'|'left'|'right'
+     * @param laneData 泳道数据
+     */
+    PoolModel.prototype.addLane = function (position, laneData) {
+        var _a, _b, _c, _d;
+        var lanes = this.getLanes();
+        if (lanes.length === 0) {
+            return this.createDefaultLane(laneData);
+        }
+        // 计算初始位置
+        var initialX = this.x;
+        var initialY = this.y;
+        // 参考泳道（用于定位）
+        var referenceLane = lanes.find(function (lane) { return lane.id === (laneData === null || laneData === void 0 ? void 0 : laneData.id); });
+        // 用于确定新泳道尺寸的参考泳道，优先使用referenceLane，其次使用现有第一个泳道，最后回退到泳池尺寸
+        var sizeLane = referenceLane || lanes[0];
+        var laneWidth = (_a = sizeLane === null || sizeLane === void 0 ? void 0 : sizeLane.width) !== null && _a !== void 0 ? _a : this.width;
+        var laneHeight = (_b = sizeLane === null || sizeLane === void 0 ? void 0 : sizeLane.height) !== null && _b !== void 0 ? _b : this.height;
+        if (this.isHorizontal && ['above', 'below'].includes(position)) {
+            if (referenceLane) {
+                initialY =
+                    position === 'above'
+                        ? referenceLane.y - referenceLane.height / 2 - laneHeight / 2
+                        : referenceLane.y + referenceLane.height / 2 + laneHeight / 2;
+                initialX = referenceLane.x;
+            }
+        }
+        if (!this.isHorizontal && ['left', 'right'].includes(position)) {
+            if (referenceLane) {
+                initialX =
+                    position === 'left'
+                        ? referenceLane.x - referenceLane.width / 2 - laneWidth / 2
+                        : referenceLane.x + referenceLane.width / 2 + laneWidth / 2;
+                initialY = referenceLane.y;
+            }
+        }
+        // 确保不将referenceLaneId作为parent或者其他可能引起递归引用的属性传入
+        // laneData可能包含一些运行时属性，需要清理
+        var cleanLaneData = (0, lodash_es_1.cloneDeep)(laneData);
+        if (cleanLaneData) {
+            delete cleanLaneData.id;
+            delete cleanLaneData.children;
+            (_c = cleanLaneData.properties) === null || _c === void 0 ? true : delete _c.parent;
+            (_d = cleanLaneData.properties) === null || _d === void 0 ? true : delete _d.children;
+        }
+        var nodeConfig = (0, lodash_es_1.merge)(cleanLaneData, {
+            type: 'lane',
+            x: initialX,
+            y: initialY,
+            width: laneWidth,
+            height: laneHeight,
+            text: '新泳道',
+            properties: {
+                parent: this.id, // 确保父节点始终指向泳池
+                position: position, // 记录添加位置，供resizeChildren使用
+                referenceLaneId: referenceLane === null || referenceLane === void 0 ? void 0 : referenceLane.id, // 记录参考泳道ID
+            },
+            zIndex: this.zIndex,
+        }, this.properties.laneConfig);
+        var newLane = this.graphModel.addNode(nodeConfig);
+        this.setZIndex(this.zIndex - 1);
+        this.addChild(newLane.id);
+        // 调用优化后的resizeChildren，它会处理所有位置计算和泳池尺寸调整
+        this.resizeChildrenWithNewLane(position, newLane.id);
+        return newLane;
+    };
+    PoolModel.prototype.setZIndex = function (zIndex) {
+        // this.zIndex = zIndex
+        this.zIndex = Math.min(zIndex, -100);
+    };
+    /**
+     * 在上方添加泳道
+     */
+    PoolModel.prototype.addChildAbove = function (laneData) {
+        return this.addLane('above', laneData);
+    };
+    /**
+     * 在下方添加泳道
+     */
+    PoolModel.prototype.addChildBelow = function (laneData) {
+        return this.addLane('below', laneData);
+    };
+    /**
+     * 在左侧添加泳道
+     */
+    PoolModel.prototype.addChildLeft = function (laneData) {
+        return this.addLane('left', laneData);
+    };
+    /**
+     * 在右侧添加泳道（纵向布局专用）
+     */
+    PoolModel.prototype.addChildRight = function (laneData) {
+        return this.addLane('right', laneData);
+    };
+    /**
+     * 创建默认泳道
+     */
+    PoolModel.prototype.createDefaultLane = function (laneConfig) {
+        var newLane = null;
+        // 只在没有子节点时创建默认泳道
+        if (this.isHorizontal) {
+            // 横向泳池：泳道垂直排列
+            var laneWidth = this.width - constant_1.poolConfig.titleSize;
+            var laneHeight = this.height;
+            newLane = this.graphModel.addNode((0, lodash_es_1.merge)({
+                type: 'lane',
+                x: this.x - this.width / 2 + constant_1.poolConfig.titleSize + laneWidth / 2,
+                y: this.y,
+                width: laneWidth,
+                height: laneHeight,
+                text: {
+                    x: this.x - this.width / 2 + constant_1.poolConfig.titleSize / 2,
+                    y: this.y,
+                    value: '泳道1',
+                },
+                properties: {
+                    parent: this.id,
+                    isHorizontal: this.isHorizontal,
+                },
+                zIndex: this.zIndex,
+            }, laneConfig));
+        }
+        else {
+            // 纵向泳池：泳道水平排列
+            // 修复：初始泳道在泳池中心位置，与resizeChildren逻辑保持一致
+            var laneWidth = this.width;
+            var laneHeight = this.height - constant_1.poolConfig.titleSize;
+            newLane = this.graphModel.addNode((0, lodash_es_1.merge)({
+                type: 'lane',
+                x: this.x,
+                y: this.y -
+                    this.height / 2 +
+                    constant_1.poolConfig.titleSize +
+                    (this.height - constant_1.poolConfig.titleSize) / 2,
+                width: laneWidth,
+                height: laneHeight,
+                text: {
+                    x: this.x,
+                    y: this.y - this.height / 2 + constant_1.poolConfig.titleSize / 2,
+                    value: '泳道1',
+                },
+                properties: {
+                    parent: this.id,
+                },
+                zIndex: this.zIndex,
+            }, laneConfig));
+        }
+        this.setZIndex(this.zIndex - 1);
+        this.addChild(newLane.id);
+        this.resizeChildren();
+        this.updateTextPosition();
+        return newLane;
+    };
+    /**
+     * 删除泳道
+     */
+    PoolModel.prototype.deleteChild = function (childId) {
+        var lanes = this.getLanes();
+        if (lanes.length <= 1)
+            return;
+        var laneToDelete = lanes.find(function (lane) { return lane.id === childId; });
+        if (!laneToDelete)
+            return;
+        // 移除子节点
+        this.removeChild(childId);
+        this.graphModel.deleteNode(childId);
+        // 重新调整泳池
+        this.resizePool();
+        this.resizeChildren();
+    };
+    PoolModel.prototype.getNodeStyle = function () {
+        var style = _super.prototype.getNodeStyle.call(this);
+        style.strokeWidth = 2;
+        return style;
+    };
+    /**
+     * 获取文本样式
+     */
+    PoolModel.prototype.getTextStyle = function () {
+        var style = _super.prototype.getTextStyle.call(this);
+        style.overflowMode = 'ellipsis';
+        style.strokeWidth = 2;
+        style.textWidth = this.isHorizontal ? this.height : this.width;
+        style.textHeight = this.isHorizontal ? this.width : this.height;
+        if (this.isHorizontal) {
+            style.transform = 'rotate(-90deg)';
+            style.textAlign = 'center';
+        }
+        return style;
+    };
+    PoolModel.prototype.getData = function () {
+        var data = _super.prototype.getData.call(this);
+        // const poolModel = this.getPoolModel()
+        return __assign(__assign({}, data), { properties: __assign(__assign({}, data.properties), { width: this.width, height: this.height }) });
+    };
+    __decorate([
+        mobx_1.computed
+    ], PoolModel.prototype, "isHorizontal", null);
+    return PoolModel;
+}(model_1.DynamicGroupNodeModel));
+exports.PoolModel = PoolModel;
+exports.default = {
+    PoolModel: PoolModel,
+};

package/lib/pool/PoolView.d.ts

@@ -0,0 +1,17 @@
+import { h } from '@logicflow/core';
+import { DynamicGroupNode } from '../dynamic-group/node';
+export declare class PoolView extends DynamicGroupNode {
+    componentDidMount(): void;
+    /**
+     * 渲染泳池形状 - 根据布局方向分为标题区域和内容区域
+     */
+    getShape(): import("preact").VNode<import("preact").ClassAttributes<HTMLElement>>;
+    /**
+     * 获取调整控制点 - 只在展开状态下显示
+     */
+    getResizeControl(): h.JSX.Element | null;
+}
+declare const _default: {
+    PoolView: typeof PoolView;
+};
+export default _default;

package/lib/pool/PoolView.js

@@ -0,0 +1,79 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoolView = void 0;
+var core_1 = require("@logicflow/core");
+var node_1 = require("../dynamic-group/node");
+var constant_1 = require("./constant");
+var PoolView = /** @class */ (function (_super) {
+    __extends(PoolView, _super);
+    function PoolView() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PoolView.prototype.componentDidMount = function () {
+        var _a, _b, _c;
+        var _d = this.props, graphModel = _d.graphModel, model = _d.model;
+        var index = graphModel.nodes.findIndex(function (node) { return node.id === model.id; });
+        var poolCount = graphModel.nodes.filter(function (node) { return String(node.type) === 'pool'; }).length;
+        // 设置一个足够低的z-index，确保泳池在所有节点的最底层
+        model.setZIndex(-((poolCount - index) * 100));
+        if (!((_b = (_a = model.properties) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) &&
+            !model._defaultLaneCreated &&
+            !model.virtual) {
+            model.createDefaultLane((_c = model.properties) === null || _c === void 0 ? void 0 : _c.laneConfig);
+            model._defaultLaneCreated = true;
+        }
+    };
+    /**
+     * 渲染泳池形状 - 根据布局方向分为标题区域和内容区域
+     */
+    PoolView.prototype.getShape = function () {
+        var model = this.props.model;
+        var x = model.x, y = model.y, width = model.width, height = model.height, _a = model.properties, _b = _a.textStyle, customTextStyle = _b === void 0 ? {} : _b, _c = _a.style, customStyle = _c === void 0 ? {} : _c, isHorizontal = model.isHorizontal;
+        var style = model.getNodeStyle();
+        var base = { fill: '#ffffff', stroke: '#000000', strokeWidth: 1 };
+        var left = x - width / 2;
+        var top = y - height / 2;
+        var titleRect = __assign(__assign(__assign(__assign({}, base), style), { x: left, y: top, width: isHorizontal ? constant_1.poolConfig.titleSize : width, height: isHorizontal ? height : constant_1.poolConfig.titleSize }), (isHorizontal && customTextStyle));
+        var contentRect = __assign(__assign(__assign(__assign({}, base), style), { x: isHorizontal ? left + constant_1.poolConfig.titleSize : left, y: isHorizontal ? top : top + constant_1.poolConfig.titleSize, width: isHorizontal ? width - constant_1.poolConfig.titleSize : width, height: isHorizontal ? height : height - constant_1.poolConfig.titleSize }), (isHorizontal && customStyle));
+        return (0, core_1.h)('g', {}, [(0, core_1.h)('rect', titleRect), (0, core_1.h)('rect', contentRect)]);
+    };
+    /**
+     * 获取调整控制点 - 只在展开状态下显示
+     */
+    PoolView.prototype.getResizeControl = function () {
+        var _a = this.props.model, resizable = _a.resizable, isCollapsed = _a.isCollapsed;
+        var showResizeControl = resizable && !isCollapsed;
+        return showResizeControl ? _super.prototype.getResizeControl.call(this) : null;
+    };
+    return PoolView;
+}(node_1.DynamicGroupNode));
+exports.PoolView = PoolView;
+exports.default = {
+    PoolView: PoolView,
+};