@logicflow/extension 2.2.0 → 2.2.1

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

@@ -41,6 +41,9 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 import { PolylineEdge, PolylineEdgeModel, h } from '@logicflow/core';
+// 方向组合到圆弧象限的映射。
+// key 由进入方向(dir1)和离开方向(dir2)拼接，例如 'tr' 表示从上(t)到右(r)的拐角。
+// 通过该映射确定在拐点处应该绘制的圆弧象限，用于计算中间控制点。
 var directionMap = {
     tr: 'tl',
     lb: 'tl',
@@ -51,13 +54,17 @@ var directionMap = {
     bl: 'br',
     rt: 'br',
 };
+// 过滤折线中的共线中间点，减少不必要的顶点
 function pointFilter(points) {
+    // 原地修改传入的数组
     var all = points;
+    // 从第二个点开始，检查三点是否共线
     var i = 1;
     while (i < all.length - 1) {
         var _a = __read(all[i - 1], 2), x = _a[0], y = _a[1];
         var _b = __read(all[i], 2), x1 = _b[0], y1 = _b[1];
         var _c = __read(all[i + 1], 2), x2 = _c[0], y2 = _c[1];
+        // 如果三点在同一条水平或垂直直线上，删除中间点
         if ((x === x1 && x1 === x2) || (y === y1 && y1 === y2)) {
             all.splice(i, 1);
         }
@@ -65,6 +72,7 @@ function pointFilter(points) {
             i++;
         }
     }
+    // 返回精简后的点集
     return all;
 }
 function getMidPoints(cur, key, orientation, radius) {
@@ -119,34 +127,54 @@ function getMidPoints(cur, key, orientation, radius) {
             return [];
     }
 }
-function getPartialPath(prev, cur, next, radius) {
+/**
+ * 生成局部路径片段（包含圆角）
+ * - 输入为上一个顶点、当前拐点、下一个顶点，计算方向组合并选择圆弧象限
+ * - 将圆角半径限制在相邻两段长度的一半以内，避免过度弯曲
+ * @param prevPoint 上一个顶点
+ * @param cornerPoint 当前拐点（圆角所在拐点）
+ * @param nextPoint 下一个顶点
+ * @param cornerRadius 圆角半径上限
+ * @returns 局部 path 字符串（包含 L/Q 操作）
+ */
+function getPartialPath(prevPoint, cornerPoint, nextPoint, cornerRadius) {
     var _a;
-    var dir1 = '';
-    var dir2 = '';
-    if (prev[0] === cur[0]) {
-        dir1 = prev[1] > cur[1] ? 't' : 'b';
-    }
-    else if (prev[1] === cur[1]) {
-        dir1 = prev[0] > cur[0] ? 'l' : 'r';
-    }
-    if (cur[0] === next[0]) {
-        dir2 = cur[1] > next[1] ? 't' : 'b';
-    }
-    else if (cur[1] === next[1]) {
-        dir2 = cur[0] > next[0] ? 'l' : 'r';
-    }
-    var r = Math.min(Math.hypot(cur[0] - prev[0], cur[1] - prev[1]) / 2, Math.hypot(next[0] - cur[0], next[1] - cur[1]) / 2, radius) || (1 / 5) * radius;
+    // 轴对齐容差（像素），用于消除微小误差
+    var epsilon = 1;
+    var resolveDir = function (a, b) {
+        var dx = b[0] - a[0];
+        var dy = b[1] - a[1];
+        var adx = Math.abs(dx);
+        var ady = Math.abs(dy);
+        if (ady <= epsilon && adx > epsilon) {
+            return dx < 0 ? 'l' : 'r';
+        }
+        if (adx <= epsilon && ady > epsilon) {
+            return dy < 0 ? 't' : 'b';
+        }
+        if (adx <= epsilon && ady <= epsilon) {
+            return '';
+        }
+        // 非严格对齐时，选择更接近的轴
+        return adx < ady ? (dx < 0 ? 'l' : 'r') : dy < 0 ? 't' : 'b';
+    };
+    var dir1 = resolveDir(prevPoint, cornerPoint);
+    var dir2 = resolveDir(cornerPoint, nextPoint);
+    var r = Math.min(Math.hypot(cornerPoint[0] - prevPoint[0], cornerPoint[1] - prevPoint[1]) /
+        2, Math.hypot(nextPoint[0] - cornerPoint[0], nextPoint[1] - cornerPoint[1]) /
+        2, cornerRadius) || (1 / 5) * cornerRadius;
     var key = "".concat(dir1).concat(dir2);
     var orientation = directionMap[key] || '-';
-    var path = "L ".concat(prev[0], " ").concat(prev[1]);
+    var path = '';
     if (orientation === '-') {
-        path += "L ".concat(cur[0], " ").concat(cur[1], " L ").concat(next[0], " ").concat(next[1]);
+        // 仅移动到当前拐点，由下一次迭代决定如何从拐点继续（直线或圆角）
+        path += "L ".concat(cornerPoint[0], " ").concat(cornerPoint[1]);
     }
     else {
-        var _b = __read(getMidPoints(cur, key, orientation, r), 2), mid1 = _b[0], mid2 = _b[1];
+        var _b = __read(getMidPoints(cornerPoint, key, orientation, r), 2), mid1 = _b[0], mid2 = _b[1];
         if (mid1 && mid2) {
-            path += "L ".concat(mid1[0], " ").concat(mid1[1], " Q ").concat(cur[0], " ").concat(cur[1], " ").concat(mid2[0], " ").concat(mid2[1]);
-            _a = __read(mid2, 2), cur[0] = _a[0], cur[1] = _a[1];
+            path += "L ".concat(mid1[0], " ").concat(mid1[1], " Q ").concat(cornerPoint[0], " ").concat(cornerPoint[1], " ").concat(mid2[0], " ").concat(mid2[1]);
+            _a = __read(mid2, 2), cornerPoint[0] = _a[0], cornerPoint[1] = _a[1];
         }
     }
     return path;

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

@@ -35,12 +35,6 @@ export declare class GroupNodeModel extends RectResizeModel {
      */
     childrenLastFoldStatus: Record<string, boolean>;
     initNodeData(data: any): void;
-    getResizeOutlineStyle(): {
-        fill: string;
-        stroke: string;
-        strokeWidth: number;
-        strokeDasharray: string;
-    };
     /**
      * 折叠分组
      * 1. 折叠分组的宽高

package/es/materials/group/GroupNode.js

@@ -104,11 +104,6 @@ var GroupNodeModel = /** @class */ (function (_super) {
         });
         // this.foldGroup(this.isFolded);
     };
-    GroupNodeModel.prototype.getResizeOutlineStyle = function () {
-        var style = _super.prototype.getResizeOutlineStyle.call(this);
-        style.stroke = 'none';
-        return style;
-    };
     /**
      * 折叠分组
      * 1. 折叠分组的宽高
@@ -414,7 +409,7 @@ var GroupNode = /** @class */ (function (_super) {
                 x: model.x - model.width / 2 + 5,
                 y: model.y - model.height / 2 + 5,
                 onClick: function () {
-                    ;
+                    console.log('fold click');
                     model.foldGroup(!model.properties.isFolded);
                 },
             }),

package/es/pool/LaneModel.d.ts

@@ -0,0 +1,90 @@
+/**
+ * 基于DynamicGroup重新实现的泳道节点组件
+ * 继承DynamicGroupNodeModel和DynamicGroupNode，提供泳道特定功能
+ */
+import LogicFlow from '@logicflow/core';
+import { DynamicGroupNodeModel } from '../dynamic-group';
+export declare class LaneModel extends DynamicGroupNodeModel {
+    readonly isLane: boolean;
+    defaultZIndex: number;
+    initNodeData(data: LogicFlow.NodeConfig): void;
+    setAttributes(): void;
+    setZIndex(zIndex: number): void;
+    /**
+     * 重写折叠方法 - 泳道不支持折叠
+     */
+    toggleCollapse(): void;
+    /**
+     * 获取所属泳池ID
+     */
+    getPoolId(): string | null;
+    /**
+     * 获取所属泳池模型
+     */
+    getPoolModel(): any;
+    /**
+     * 动态修改泳道属性
+     */
+    changeAttribute({ width, height, x, y }: any): void;
+    /**
+     * 重写获取数据方法，添加泳道特定属性
+     */
+    getData(): LogicFlow.NodeData;
+    /**
+     * 重写 isAllowAppendIn，禁止 Lane 嵌套
+     */
+    isAllowAppendIn(nodeData: LogicFlow.NodeData): boolean;
+    /**
+     * 获取需要移动的节点
+     * @param groupModel
+     */
+    getNodesInGroup(groupModel: DynamicGroupNodeModel): string[];
+    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;
+    };
+    /**
+     * 获取子泳道
+     */
+    getSubNodes(): any[];
+    /**
+     * 初始化文本位置 - 根据布局方向设置文本位置
+     */
+    updateTextPosition(): void;
+}
+declare const _default: null;
+export default _default;

package/es/pool/LaneModel.js

@@ -0,0 +1,252 @@
+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));
+};
+import { DynamicGroupNodeModel } from '../dynamic-group';
+import { forEach } from 'lodash-es';
+import { laneConfig } from './constant';
+var LaneModel = /** @class */ (function (_super) {
+    __extends(LaneModel, _super);
+    function LaneModel() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.isLane = true;
+        _this.defaultZIndex = -1;
+        return _this;
+    }
+    LaneModel.prototype.initNodeData = function (data) {
+        var _a;
+        _super.prototype.initNodeData.call(this, data);
+        // 泳道特定配置
+        this.width = data.width || laneConfig.defaultWidth;
+        this.height = data.height || laneConfig.defaultHeight;
+        this.draggable = true; // 允许拖拽（实际拖拽逻辑由泳池控制）
+        this.resizable = true; // 允许调整大小
+        this.rotatable = false; // 禁止旋转
+        // 设置泳道层级
+        // 如果传入了zIndex，使用传入的值，否则默认为2
+        // 泳道层级应该比所属泳池高，确保显示在泳池上方
+        this.defaultZIndex = data.zIndex || -1;
+        this.setZIndex(this.defaultZIndex);
+        this.autoToFront = true;
+        this.text.editable = true;
+        this.style.stroke = '#000';
+        this.style.strokeWidth = 1;
+        // 泳道属性配置
+        this.properties = __assign(__assign({}, this.properties), { processRef: '', panels: ['processRef'], direction: ((_a = data.properties) === null || _a === void 0 ? void 0 : _a.direction) || 'vertical' });
+        // 设置折叠尺寸（泳道不支持折叠，设置为与正常尺寸相同）
+        this.collapsedWidth = this.width;
+        this.collapsedHeight = this.height;
+        this.expandWidth = this.width;
+        this.expandHeight = this.height;
+    };
+    LaneModel.prototype.setAttributes = function () {
+        _super.prototype.setAttributes.call(this);
+        this.updateTextPosition();
+    };
+    LaneModel.prototype.setZIndex = function (zIndex) {
+        this.zIndex = Math.min(zIndex, this.defaultZIndex) || this.defaultZIndex;
+    };
+    /**
+     * 重写折叠方法 - 泳道不支持折叠
+     */
+    LaneModel.prototype.toggleCollapse = function () {
+        // 泳道不支持折叠功能，保持展开状态
+        this.isCollapsed = false;
+        this.setProperties({ isCollapsed: false });
+    };
+    /**
+     * 获取所属泳池ID
+     */
+    LaneModel.prototype.getPoolId = function () {
+        var _this = this;
+        try {
+            // 检查graphModel是否存在
+            if (!this.graphModel) {
+                console.warn('GraphModel is not available');
+                return null;
+            }
+            // 安全地获取泳池ID
+            var poolModel = this.graphModel.nodes.find(function (node) {
+                return node.children && node.children.has(_this.id);
+            });
+            return (poolModel === null || poolModel === void 0 ? void 0 : poolModel.id) || null;
+        }
+        catch (error) {
+            console.error('Error getting pool ID:', error);
+            return null;
+        }
+    };
+    /**
+     * 获取所属泳池模型
+     */
+    LaneModel.prototype.getPoolModel = function () {
+        try {
+            var poolId = this.getPoolId();
+            if (!poolId) {
+                return null;
+            }
+            // 检查graphModel是否存在
+            if (!this.graphModel) {
+                console.warn('GraphModel is not available for getting pool model');
+                return null;
+            }
+            var poolModel = this.graphModel.getNodeModelById(poolId);
+            return poolModel || null;
+        }
+        catch (error) {
+            console.error('Error getting pool model:', error);
+            return null;
+        }
+    };
+    /**
+     * 动态修改泳道属性
+     */
+    LaneModel.prototype.changeAttribute = function (_a) {
+        var width = _a.width, height = _a.height, x = _a.x, y = _a.y;
+        if (width)
+            this.width = width; // 更新宽度
+        if (height)
+            this.height = height; // 更新高度
+        if (x)
+            this.x = x; // 更新X坐标
+        if (y)
+            this.y = y; // 更新Y坐标
+    };
+    /**
+     * 重写获取数据方法，添加泳道特定属性
+     */
+    LaneModel.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, processRef: this.properties.processRef, direction: this.properties.direction }) });
+    };
+    /**
+     * 重写 isAllowAppendIn，禁止 Lane 嵌套
+     */
+    LaneModel.prototype.isAllowAppendIn = function (nodeData) {
+        // 禁止 Lane 节点被添加到 Lane 中
+        return String(nodeData.type) !== 'lane';
+    };
+    /**
+     * 获取需要移动的节点
+     * @param groupModel
+     */
+    LaneModel.prototype.getNodesInGroup = function (groupModel) {
+        var _this = this;
+        var nodeIds = [];
+        var parent = groupModel.properties.parent, isDragging = groupModel.isDragging;
+        if (isDragging && parent) {
+            nodeIds.push(parent);
+        }
+        forEach(Array.from(groupModel.children), function (nodeId) {
+            var nodeModel = _this.graphModel.getNodeModelById(nodeId);
+            // 只有非 Lane 类型的节点才会被带动
+            if (nodeModel &&
+                !nodeModel.isDragging &&
+                String(nodeModel.type) !== 'lane') {
+                nodeIds.push(nodeId);
+            }
+        });
+        return nodeIds;
+    };
+    LaneModel.prototype.getNodeStyle = function () {
+        var style = _super.prototype.getNodeStyle.call(this);
+        style.strokeWidth = 2;
+        return style;
+    };
+    /**
+     * 获取文本样式
+     */
+    LaneModel.prototype.getTextStyle = function () {
+        var _a = this.properties.isHorizontal, isHorizontal = _a === void 0 ? false : _a;
+        var style = _super.prototype.getTextStyle.call(this);
+        style.overflowMode = 'ellipsis';
+        style.strokeWidth = 2;
+        style.textWidth = isHorizontal ? this.height : this.width;
+        style.textHeight = isHorizontal ? this.width : this.height;
+        if (isHorizontal) {
+            style.transform = 'rotate(-90deg)';
+            style.textAlign = 'center';
+        }
+        return style;
+    };
+    /**
+     * 获取子泳道
+     */
+    LaneModel.prototype.getSubNodes = function () {
+        var _this = this;
+        var children = [];
+        Array.from(this.children).forEach(function (childId) {
+            var childModel = _this.graphModel.getNodeModelById(childId);
+            if (childModel) {
+                children.push(childModel);
+            }
+        });
+        return children;
+    };
+    /**
+     * 初始化文本位置 - 根据布局方向设置文本位置
+     */
+    LaneModel.prototype.updateTextPosition = function () {
+        if (this.properties.isHorizontal) {
+            // 横向泳池：文本显示在左侧标题区域
+            this.text.x = this.x - this.width / 2 + laneConfig.titleSize / 2;
+            this.text.y = this.y;
+        }
+        else {
+            // 纵向泳池：文本显示在顶部标题区域
+            this.text.x = this.x;
+            this.text.y = this.y - this.height / 2 + laneConfig.titleSize / 2;
+        }
+    };
+    return LaneModel;
+}(DynamicGroupNodeModel));
+export { LaneModel };
+export default null;

package/es/pool/LaneView.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 基于DynamicGroup重新实现的泳道节点组件
+ * 继承DynamicGroupNodeModel和DynamicGroupNode，提供泳道特定功能
+ */
+import { h } from '@logicflow/core';
+import { DynamicGroupNode } from '../dynamic-group';
+export declare class LaneView extends DynamicGroupNode {
+    getAppendAreaShape(): h.JSX.Element | null;
+    getShape(): import("preact").VNode<import("preact").ClassAttributes<HTMLElement>>;
+    /**
+     * 获取操作图标
+     */
+    getOperateIcons(): (import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        cursor: string;
+        onClick: () => void;
+    }> | import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        cursor: string;
+        onClick: () => void;
+        width: number;
+        height: number;
+        transform: string;
+    }>)[];
+    addBeforeLaneIcon(isHorizontal: boolean, callback: () => void): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        cursor: string;
+        onClick: () => void;
+    }>;
+    addAfterLaneIcon(isHorizontal: boolean, callback: () => void): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        cursor: string;
+        onClick: () => void;
+    }>;
+    deleteLaneIcon(callback: () => void): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+        cursor: string;
+        onClick: () => void;
+        width: number;
+        height: number;
+        transform: string;
+    }>;
+}
+declare const _default: null;
+export default _default;