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

package/es/pool/LaneView.js

@@ -0,0 +1,202 @@
+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 __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));
+};
+/**
+ * 基于DynamicGroup重新实现的泳道节点组件
+ * 继承DynamicGroupNodeModel和DynamicGroupNode，提供泳道特定功能
+ */
+import { h } from '@logicflow/core';
+import { DynamicGroupNode } from '../dynamic-group';
+import { laneConfig } from './constant';
+var LaneView = /** @class */ (function (_super) {
+    __extends(LaneView, _super);
+    function LaneView() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LaneView.prototype.getAppendAreaShape = function () {
+        // DONE: 此区域用于初始化 group container, 即元素拖拽进入感应区域
+        var model = this.props.model;
+        var width = model.width, height = model.height, x = model.x, y = model.y, radius = model.radius, groupAddable = model.groupAddable;
+        if (!groupAddable)
+            return null;
+        var _a = model.getNodeStyle().strokeWidth, strokeWidth = _a === void 0 ? 0 : _a;
+        var style = model.getAddableOutlineStyle();
+        var newWidth = width + strokeWidth + 8;
+        var newHeight = height + strokeWidth + 8;
+        return h('rect', __assign(__assign({}, style), { width: newWidth, height: newHeight, x: x - newWidth / 2, y: y - newHeight / 2, rx: radius, ry: radius }));
+    };
+    LaneView.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, isHorizontal = _a.isHorizontal;
+        var style = model.getNodeStyle();
+        var base = { fill: '#ffffff', stroke: '#000000', strokeWidth: 1 };
+        var left = x - width / 2;
+        var top = y - height / 2;
+        // 泳道主体
+        var rectAttrs = __assign({ x: x - width / 2, y: y - height / 2, width: width, height: height, stroke: '#000000', strokeWidth: 2, fill: 'transparent' }, style);
+        // 操作图标区域
+        var icons = this.getOperateIcons();
+        var titleRect = __assign(__assign(__assign(__assign({}, base), style), { x: isHorizontal ? left + laneConfig.titleSize : left, y: isHorizontal ? top : top + laneConfig.titleSize, width: isHorizontal ? width - laneConfig.titleSize : width, height: isHorizontal ? height : laneConfig.titleSize }), (isHorizontal ? customTextStyle : {}));
+        return h('g', {}, __spreadArray([
+            this.getAppendAreaShape(),
+            h('rect', titleRect),
+            h('rect', __assign({}, rectAttrs))
+        ], __read(icons), false));
+    };
+    /**
+     * 获取操作图标
+     */
+    LaneView.prototype.getOperateIcons = function () {
+        var model = this.props.model;
+        var isSelected = model.isSelected;
+        if (!isSelected) {
+            return [];
+        }
+        var poolModel = model.getPoolModel();
+        if (!poolModel) {
+            return [];
+        }
+        var isHorizontal = poolModel.isHorizontal;
+        var laneData = model.getData();
+        return [
+            this.addBeforeLaneIcon(isHorizontal, function () {
+                var _a, _b;
+                return isHorizontal
+                    ? (_a = poolModel.addChildAbove) === null || _a === void 0 ? void 0 : _a.call(poolModel, laneData)
+                    : (_b = poolModel.addChildRight) === null || _b === void 0 ? void 0 : _b.call(poolModel, laneData);
+            }),
+            this.addAfterLaneIcon(isHorizontal, function () {
+                var _a, _b;
+                return isHorizontal
+                    ? (_a = poolModel.addChildBelow) === null || _a === void 0 ? void 0 : _a.call(poolModel, laneData)
+                    : (_b = poolModel.addChildLeft) === null || _b === void 0 ? void 0 : _b.call(poolModel, laneData);
+            }),
+            this.deleteLaneIcon(function () { var _a; return (_a = poolModel.deleteChild) === null || _a === void 0 ? void 0 : _a.call(poolModel, laneData.id); }),
+        ];
+    };
+    LaneView.prototype.addBeforeLaneIcon = function (isHorizontal, callback) {
+        var _a = this.props.model, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+        // 图标与泳道之间加固定的间距
+        var positionX = x + width / 2 + laneConfig.iconSpacing;
+        var positionY = y - height / 2;
+        var baseAttr = {
+            width: laneConfig.iconSize / 2,
+            height: laneConfig.iconSize,
+            strokeWidth: 1,
+            fill: '#fff',
+            stroke: '#000',
+            x: positionX,
+            y: positionY,
+        };
+        var iconView = [
+            h('rect', __assign(__assign({}, baseAttr), { x: positionX + laneConfig.iconSize / 2, strokeDasharray: '2 2' })),
+            h('rect', baseAttr),
+        ];
+        if (isHorizontal) {
+            iconView = [
+                h('rect', __assign(__assign({}, baseAttr), { width: laneConfig.iconSize, height: laneConfig.iconSize / 2, strokeDasharray: '2 2' })),
+                h('rect', __assign(__assign({}, baseAttr), { width: laneConfig.iconSize, height: laneConfig.iconSize / 2, y: positionY + laneConfig.iconSize / 2 })),
+            ];
+        }
+        return h('g', { cursor: 'pointer', onClick: callback }, iconView);
+    };
+    LaneView.prototype.addAfterLaneIcon = function (isHorizontal, callback) {
+        var _a = this.props.model, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+        var positionX = x + width / 2 + laneConfig.iconSpacing;
+        var positionY = y - height / 2 + laneConfig.iconSize + laneConfig.iconSpacing;
+        var baseAttr = {
+            width: laneConfig.iconSize / 2,
+            height: laneConfig.iconSize,
+            strokeWidth: 1,
+            fill: '#fff',
+            stroke: '#000',
+            x: positionX,
+            y: positionY,
+        };
+        var iconView = [
+            h('rect', __assign(__assign({}, baseAttr), { x: positionX + laneConfig.iconSize / 2 })),
+            h('rect', __assign(__assign({}, baseAttr), { strokeDasharray: '2 2' })),
+        ];
+        if (isHorizontal) {
+            iconView = [
+                h('rect', __assign(__assign({}, baseAttr), { width: laneConfig.iconSize, height: laneConfig.iconSize / 2 })),
+                h('rect', __assign(__assign({}, baseAttr), { width: laneConfig.iconSize, height: laneConfig.iconSize / 2, y: positionY + laneConfig.iconSize / 2, strokeDasharray: '2 2' })),
+            ];
+        }
+        return h('g', { cursor: 'pointer', onClick: callback }, iconView);
+    };
+    LaneView.prototype.deleteLaneIcon = function (callback) {
+        var _a = this.props.model, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+        var positionX = x + width / 2 + laneConfig.iconSpacing;
+        var positionY = y - height / 2 + (laneConfig.iconSize + laneConfig.iconSpacing) * 3;
+        return h('g', {
+            cursor: 'pointer',
+            onClick: callback,
+            width: laneConfig.iconSize,
+            height: laneConfig.iconSize,
+            transform: "translate(".concat(positionX, ", ").concat(positionY, ")"),
+        }, [
+            h('rect', {
+                width: laneConfig.iconSize,
+                height: laneConfig.iconSize,
+                fill: 'transparent',
+            }),
+            h('path', {
+                transform: "translate(2, 1) scale(".concat(laneConfig.iconSize / 18, ")"),
+                fill: '#000',
+                d: 'M1.6361705,0.07275847000000002L1.6362224,0.07267305000000002L5.1435161,2.2034403L6.3516493,1.28341734Q7.2009554,0.63665058,8.0902505,1.22722644L10.1215935,2.5762291Q11.006711,3.1640306,10.745867,4.1940317L10.4062386,5.5351257L13.625054,7.5778356L13.625001,7.5779204Q13.678322,7.6117587,13.721552,7.6577945Q13.764784,7.7038307,13.795207,7.7591715Q13.82563,7.8145118,13.841336,7.87568Q13.857041,7.9368477,13.857041,8Q13.85704,8.0492353,13.847435,8.0975251Q13.83783,8.145814900000001,13.818987,8.191302799999999Q13.800144,8.2367907,13.772791,8.2777286Q13.745438,8.318666499999999,13.710623,8.3534818Q13.675808,8.3882966,13.63487,8.4156504Q13.593931,8.4430046,13.548444,8.461846399999999Q13.502956,8.4806881,13.454666,8.4902935Q13.406377,8.4998994,13.357141,8.499899899999999Q13.211908,8.499899899999999,13.089283,8.4220805L13.08923,8.4221654L4.9074116,3.229857L1.1170242400000001,0.92732695L1.1170761599999999,0.92724147Q1.06204063,0.8938076500000001,1.0172748,0.84751782Q0.97250897,0.80122799,0.9409355500000001,0.74510445Q0.9093622,0.68898091,0.89304277,0.626688Q0.87672335,0.564395107,0.87672332,0.5Q0.8767232899999999,0.450764146,0.88632876,0.402474351Q0.8959341599999999,0.35418455,0.91477591,0.30869657Q0.93361765,0.26320857,0.9609716500000001,0.22227046Q0.9883256,0.18133234999999998,1.02314061,0.14651734Q1.05795562,0.11170232000000002,1.0988937,0.08434838Q1.13983184,0.056994409999999995,1.18531984,0.038152660000000005Q1.2308077800000001,0.019310890000000025,1.27909762,0.009705450000000004Q1.32738745,0.00010001999999997846,1.3766233300000001,0.00009998999999999425Q1.516567,0.00009998999999999425,1.6361705,0.07275847000000002ZM9.5175018,4.9711194L9.7764683,3.9485345Q9.8634167,3.6052005,9.5683784,3.4092672L7.537035,2.0602646Q7.240603,1.8634058,6.9575009,2.0789949L6.0496349,2.7703574L9.5175018,4.9711194ZM11.227273,14.5L11.227273,9.7307692L11.227173,9.7307692Q11.227173,9.6815329,11.217567,9.6332426Q11.207962,9.5849533,11.189119,9.539465Q11.170278,9.4939766,11.142924,9.4530392Q11.11557,9.4121017,11.080755,9.3772869Q11.04594,9.3424721,11.005002,9.3151178Q10.964064,9.2877636,10.918575,9.2689209Q10.873087,9.2500801,10.824797,9.2404747Q10.776508,9.2308693,10.727273,9.2308693Q10.678036,9.2308693,10.629745,9.2404747Q10.581455,9.2500801,10.535968,9.2689209Q10.4904804,9.2877636,10.449542,9.3151178Q10.4086046,9.3424721,10.3737898,9.377286Q10.338975,9.4121008,10.3116207,9.4530382Q10.2842674,9.4939766,10.2654257,9.539465Q10.2465839,9.5849533,10.2369785,9.6332426Q10.2273731,9.6815329,10.2273731,9.7307692L10.2272739,9.7307692L10.2272739,14.5Q10.2272739,15,9.727273,15L7.7207794,15L7.7207789,8.2500091L7.7206788,8.2500091Q7.7206783,8.2007728,7.7110729,8.152483Q7.7014675,8.104193200000001,7.6826253,8.0587053Q7.6637836,8.013217000000001,7.6364298,7.9722791Q7.6090755,7.9313412,7.5742612,7.8965263Q7.5394459,7.861711,7.4985075,7.8343568Q7.4575696,7.807003,7.4120817,7.7881613Q7.3665934,7.7693195,7.3183041,7.7597141Q7.2700143,7.7501092,7.2207789,7.7501092Q7.1715426,7.7501092,7.1232524,7.7597141Q7.0749626,7.7693195,7.0294747,7.7881613Q6.9839869,7.807003,6.943049,7.8343573Q6.9021111,7.861711,6.8672962,7.8965263Q6.8324809,7.9313412,6.8051271,7.9722791Q6.7777729,8.013217000000001,6.7589312,8.0587053Q6.7400894,8.1041937,6.7304845,8.1524839Q6.7208786,8.2007732,6.7208791,8.2500095L6.7207789,8.2500091L6.7207794,15L4.2142854,15L4.2142854,6.2692308L4.2141855,6.2692308Q4.2141852,6.2199945,4.204579799999999,6.1717048Q4.1949743999999995,6.123415,4.1761324,6.0779266Q4.1572905,6.0324383,4.1299367,5.9915004Q4.1025827,5.9505625,4.0677679,5.9157476Q4.0329528,5.8809328,3.9920146,5.8535786Q3.9510765,5.8262248,3.9055884,5.8073831Q3.8601003,5.7885418,3.811811,5.7789364Q3.7635212,5.769331,3.7142854,5.769331Q3.6650493,5.769331,3.6167595,5.7789364Q3.5684695,5.7885418,3.5229816,5.8073831Q3.4774938,5.8262248,3.4365554,5.8535786Q3.3956175,5.8809328,3.3608027,5.9157476Q3.3259873,5.9505625,3.2986333,5.9915004Q3.2712793,6.0324383,3.2524376,6.0779266Q3.2335958,6.123415,3.2239904,6.1717048Q3.214385,6.2199945,3.2143853,6.2692308L3.2142854,6.2692308L3.2142854,15L1.5000002,15Q1.0000001200000002,15,1.0000001200000002,14.5L1,5.4150848Q1,5.0384622,1.3766233300000001,5.0384622L1.3766233300000001,5.0383615Q1.42585915,5.0383615,1.47414887,5.0287557Q1.5224386,5.0191503,1.5679266,5.0003085Q1.6134146,4.9814663,1.6543528,4.954113Q1.695291,4.9267588,1.730106,4.8919439Q1.7649209,4.8571291,1.792275,4.8161907Q1.8196288,4.7752523,1.8384706,4.7297645Q1.8573124,4.6842766,1.8669178,4.6359868Q1.8765233,4.587697,1.8765234,4.5384617Q1.8765233,4.4892254000000005,1.8669178,4.4409355999999995Q1.8573124,4.3926458,1.8384707,4.3471577Q1.819629,4.3016696,1.792275,4.2607315Q1.7649209,4.2197936,1.730106,4.1849787Q1.695291,4.1501637,1.6543529,4.1228096Q1.6134148,4.0954556,1.5679268,4.0766139Q1.5224388,4.0577724,1.4741489300000001,4.048166999999999Q1.42585915,4.0385615999999995,1.3766233300000001,4.0385615999999995L1.3766233300000001,4.0384617Q0.8064074800000001,4.0384617,0.403203636,4.4416654Q0,4.8448691,0,5.4150848L9.000000000813912e-8,14.5Q2.9999999984209325e-8,15.121321,0.439339694,15.56066Q0.8786805,16.000002000000002,1.5000002,16.000002000000002L9.727273,16.000002000000002Q10.3485928,16.000002000000002,10.787933,15.56066Q11.227273,15.121321,11.227273,14.5Z',
+            }),
+        ]);
+    };
+    return LaneView;
+}(DynamicGroupNode));
+export { LaneView };
+export default null;

package/es/pool/PoolModel.d.ts

@@ -0,0 +1,120 @@
+/**
+ * 基于DynamicGroup重新实现的泳池节点组件
+ * 充分利用DynamicGroup的分组管理能力，实现完整的泳道功能
+ */
+import LogicFlow, { GraphModel } from '@logicflow/core';
+import { DynamicGroupNodeModel, IGroupNodeProperties } from '../dynamic-group/model';
+import { poolConfig } from './constant';
+import NodeConfig = LogicFlow.NodeConfig;
+export declare class PoolModel extends DynamicGroupNodeModel {
+    titleSize: number;
+    poolConfig: typeof poolConfig;
+    readonly isPool: boolean;
+    _defaultLaneCreated: boolean;
+    constructor(data: NodeConfig<IGroupNodeProperties>, graphModel: GraphModel);
+    get isHorizontal(): boolean;
+    initNodeData(data: LogicFlow.NodeConfig<IGroupNodeProperties>): void;
+    addEventListeners(): void;
+    /**
+     * 获取需要移动的节点
+     * @param groupModel
+     */
+    getNodesInGroup(groupModel: DynamicGroupNodeModel): string[];
+    /**
+     * 初始化文本位置 - 根据布局方向设置文本位置
+     */
+    private updateTextPosition;
+    /**
+     * 根据子泳道自动调整泳池尺寸
+     */
+    resizePool(): void;
+    /**
+     * 重新调整所有泳道布局
+     * @param newLanePosition 添加位置（可选）：'above'|'below'|'left'|'right'
+     * @param newLaneId 新添加的泳道ID（可选）
+     */
+    resizeChildrenWithNewLane(newLanePosition?: 'above' | 'below' | 'left' | 'right', newLaneId?: string): void;
+    moveLane(lane: any, newX: any, newY: any): void;
+    /**
+     * 重新调整所有泳道布局
+     * @param newLanePosition 添加位置（可选）：'above'|'below'|'left'|'right'
+     * @param newLaneId 新添加的泳道ID（可选）
+     */
+    resizeChildren(): void;
+    /**
+     * 获取子泳道
+     */
+    getLanes(): any[];
+    /**
+     * 添加泳道的公共方法
+     * @param position 添加位置：'above'|'below'|'left'|'right'
+     * @param laneData 泳道数据
+     */
+    addLane(position: 'above' | 'below' | 'left' | 'right', laneData?: any): any;
+    setZIndex(zIndex: number): void;
+    /**
+     * 在上方添加泳道
+     */
+    addChildAbove(laneData?: any): any;
+    /**
+     * 在下方添加泳道
+     */
+    addChildBelow(laneData?: any): any;
+    /**
+     * 在左侧添加泳道
+     */
+    addChildLeft(laneData?: any): any;
+    /**
+     * 在右侧添加泳道（纵向布局专用）
+     */
+    addChildRight(laneData?: any): any;
+    /**
+     * 创建默认泳道
+     */
+    createDefaultLane(laneConfig?: any): any;
+    /**
+     * 删除泳道
+     */
+    deleteChild(childId: string): void;
+    getNodeStyle(): {
+        [x: string]: unknown;
+        fill?: string | undefined;
+        stroke?: string | undefined;
+        strokeWidth?: number | undefined;
+        radius?: number | undefined;
+        rx?: number | undefined;
+        ry?: number | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        path?: string | undefined;
+    };
+    /**
+     * 获取文本样式
+     */
+    getTextStyle(): {
+        [x: string]: unknown;
+        fill?: string | undefined;
+        stroke?: string | undefined;
+        strokeWidth?: number | undefined;
+        radius?: number | undefined;
+        rx?: number | undefined;
+        ry?: number | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        path?: string | undefined;
+        overflowMode?: "default" | "autoWrap" | "ellipsis" | undefined;
+        textWidth?: number | undefined;
+        background?: LogicFlow.CommonTheme | undefined;
+        wrapPadding?: string | undefined;
+        color?: string | undefined;
+        fontSize: number;
+        lineHeight?: number | undefined;
+        textAnchor?: "middle" | "start" | "end" | undefined;
+        dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
+    };
+    getData(): LogicFlow.NodeData;
+}
+declare const _default: {
+    PoolModel: typeof PoolModel;
+};
+export default _default;