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

package/es/pool/utils.js

@@ -0,0 +1,33 @@
+/**
+ *
+ * @param bounds
+ * @param group
+ */
+export function isBoundsInLane(bounds, group) {
+    var minX = bounds.minX, minY = bounds.minY, maxX = bounds.maxX, maxY = bounds.maxY;
+    var x = group.x, y = group.y, width = group.width, height = group.height;
+    return (minX >= x - width / 2 &&
+        maxX <= x + width / 2 &&
+        minY >= y - height / 2 &&
+        maxY <= y + height / 2);
+}
+/**
+ * 判断 bounds 是否可以移动到下一个范围
+ * @param groupBounds
+ * @param node
+ * @param deltaX
+ * @param deltaY
+ */
+export function isAllowMoveTo(groupBounds, node, deltaX, deltaY) {
+    var minX = groupBounds.minX, minY = groupBounds.minY, maxX = groupBounds.maxX, maxY = groupBounds.maxY;
+    var x = node.x, y = node.y, width = node.width, height = node.height;
+    // DONE: 计算节点坐标 (x, y) 可移动的范围，并判断 x + deltaX, y + deltaY 是否在范围内
+    var allowMoveMinX = minX + width / 2;
+    var allowMoveMinY = minY + height / 2;
+    var allowMoveMaxX = maxX - width / 2;
+    var allowMoveMaxY = maxY - height / 2;
+    return {
+        x: x + deltaX >= allowMoveMinX && x + deltaX <= allowMoveMaxX,
+        y: y + deltaY >= allowMoveMinY && y + deltaY <= allowMoveMaxY,
+    };
+}

package/lib/bpmn-elements-adapter/json2xml.d.ts

@@ -1,3 +1,4 @@
 declare function handleAttributes(obj: any): any;
+declare function escapeXml(text: string): string;
 declare function lfJson2Xml(obj: any): string;
-export { lfJson2Xml, handleAttributes };
+export { lfJson2Xml, handleAttributes, escapeXml };

package/lib/bpmn-elements-adapter/json2xml.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleAttributes = exports.lfJson2Xml = void 0;
+exports.escapeXml = exports.handleAttributes = exports.lfJson2Xml = void 0;
 /* eslint-disable guard-for-in */
 function type(obj) {
     return Object.prototype.toString.call(obj);
@@ -25,6 +25,18 @@ function handleAttributes(obj) {
     return obj;
 }
 exports.handleAttributes = handleAttributes;
+function escapeXml(text) {
+    if (text == null)
+        return '';
+    return text
+        .toString()
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}
+exports.escapeXml = escapeXml;
 function getAttributes(obj) {
     var tmp = obj;
     try {
@@ -35,7 +47,7 @@ function getAttributes(obj) {
     catch (error) {
         tmp = JSON.stringify(handleAttributes(obj)).replace(/"/g, "'");
     }
-    return tmp;
+    return escapeXml(String(tmp));
 }
 var tn = '\t\n';
 // @see issue https://github.com/didi/LogicFlow/issues/718, refactoring of function toXml
@@ -45,8 +57,11 @@ function toXml(obj, name, depth) {
     var prefix = tn + frontSpace;
     if (name === '-json')
         return '';
+    if (obj !== 0 && obj !== false && !obj) {
+        return "".concat(prefix, "<").concat(name, " />");
+    }
     if (name === '#text') {
-        return prefix + obj;
+        return prefix + escapeXml(String(obj));
     }
     if (name === '#cdata-section') {
         return "".concat(prefix, "<![CDATA[").concat(obj, "]]>");
@@ -74,7 +89,7 @@ function toXml(obj, name, depth) {
             attributes_1 + (children_1 !== '' ? ">".concat(children_1).concat(prefix, "</").concat(name, ">") : ' />');
     }
     else {
-        str += "".concat(prefix, "<").concat(name, ">").concat(obj.toString(), "</").concat(name, ">");
+        str += "".concat(prefix, "<").concat(name, ">").concat(escapeXml(String(obj)), "</").concat(name, ">");
     }
     return str;
 }

package/lib/bpmn-elements-adapter/xml2json.js

@@ -8,6 +8,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.lfXml2Json = void 0;
 var lodash_es_1 = require("lodash-es");
+var json2xml_1 = require("./json2xml");
 // ========================================================================
 //  XML.ObjTree -- XML source code from/to JavaScript object like E4X
 // ========================================================================
@@ -298,13 +299,7 @@ XML.ObjTree.prototype.scalar_to_xml = function (name, text) {
     return "<".concat(name, ">").concat(this.xml_escape(text), "</").concat(name, ">\n");
 };
 //  method: xml_escape( text )
-XML.ObjTree.prototype.xml_escape = function (text) {
-    return text
-        .replace(/&/g, '&')
-        .replace(/</g, '<')
-        .replace(/>/g, '>')
-        .replace(/"/g, '"');
-};
+XML.ObjTree.prototype.xml_escape = json2xml_1.escapeXml;
 /*
 // ========================================================================
 

package/lib/index.d.ts

@@ -5,6 +5,7 @@ export * from './bpmn-elements-adapter';
 export * from './bpmn-adapter/xml2json';
 export * from './bpmn-adapter/json2xml';
 export * from './turbo-adapter';
+export * from './pool';
 export * from './dynamic-group';
 export * from './insert-node-in-polyline';
 export * from './tools/label';

package/lib/index.js

@@ -23,6 +23,8 @@ __exportStar(require("./bpmn-adapter/xml2json"), exports);
 __exportStar(require("./bpmn-adapter/json2xml"), exports);
 // Adapter
 __exportStar(require("./turbo-adapter"), exports);
+// 泳道相关
+__exportStar(require("./pool"), exports);
 // 新版 Group
 __exportStar(require("./dynamic-group"), exports);
 // 折线上动态插入节点

package/lib/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/lib/pool/LaneModel.js

@@ -0,0 +1,255 @@
+"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 __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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LaneModel = void 0;
+var dynamic_group_1 = require("../dynamic-group");
+var lodash_es_1 = require("lodash-es");
+var constant_1 = require("./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 || constant_1.laneConfig.defaultWidth;
+        this.height = data.height || constant_1.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);
+        }
+        (0, lodash_es_1.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 + constant_1.laneConfig.titleSize / 2;
+            this.text.y = this.y;
+        }
+        else {
+            // 纵向泳池：文本显示在顶部标题区域
+            this.text.x = this.x;
+            this.text.y = this.y - this.height / 2 + constant_1.laneConfig.titleSize / 2;
+        }
+    };
+    return LaneModel;
+}(dynamic_group_1.DynamicGroupNodeModel));
+exports.LaneModel = LaneModel;
+exports.default = null;

package/lib/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;