@logicflow/extension 1.2.20 → 1.2.23

package/cjs/tools/auto-layout/index.js

@@ -0,0 +1,269 @@
+"use strict";
+/**
+ * 自动布局插件
+ * 依赖flowPath插件
+ * 未完善
+ */
+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.AutoLayout = void 0;
+var POSITION_TYPE = {
+    LEFT_TOP: -1,
+    LEFT: 0,
+    LEFT_BOTTOM: 1,
+};
+var AutoLayout = /** @class */ (function () {
+    function AutoLayout(_a) {
+        var _this = this;
+        var lf = _a.lf;
+        this.lf = lf;
+        /**
+         * 用于记录上一次调用layout时计算出的trunk
+         * 当旧trunk和新trunk长度一致时，用于选择旧trunk,
+         * a->b->c->d
+         *    |->e
+         * e后面新增f节点时候，旧逻辑会返回新trunk[a,b,e,f]
+         * 界面布局变成
+         * a->b->e->f
+         *    |->c->d
+         * 其实只想要这样 尽量少变化
+         * a->b->c->d
+         *    |->e->f
+         * */
+        this.trunk = [];
+        // 给lf添加方法
+        lf.layout = function (startNodeType) {
+            var data = _this.lf.getGraphRawData();
+            _this.lf.setStartNodeType(startNodeType);
+            var path = _this.lf.getPathes();
+            _this.levelHeight = [];
+            _this.newNodeMap = new Map();
+            return _this.layout(data, path);
+        };
+    }
+    // 1) 将所有节点和边的坐标删除。节点上的文本改成偏移量。
+    // 2) 找到长度最长的路径，作为基准路径。
+    // 3) 依次计算
+    // 拿到最长的路径。
+    // nodes: [], edges: [],
+    AutoLayout.prototype.layout = function (data, path) {
+        var _this = this;
+        var trunk = [];
+        path.forEach(function (p) {
+            var elements = p.elements;
+            if (elements.length > trunk.length) {
+                trunk = elements;
+            }
+            else if (elements.length === trunk.length) {
+                // 考虑是否替换为旧的trunk
+                if (JSON.stringify(elements) === JSON.stringify(_this.trunk)) {
+                    trunk = _this.trunk;
+                }
+            }
+        });
+        // 记录上一次trunk
+        this.trunk = trunk;
+        var nodeMap = this.formatData(data);
+        var newGraphData = {
+            nodes: [],
+            edges: [],
+        };
+        // 从后向前布局
+        for (var i = trunk.length - 1; i >= 0; i--) {
+            this.setNodePosition(trunk[i], nodeMap, newGraphData, i, 1);
+        }
+        this.lf.graphModel.graphDataToModel(newGraphData);
+    };
+    // 1) 需要知道下一层级已占高度。
+    // 2) 基于自己的高度，判断下一个层级的高度
+    AutoLayout.prototype.setNodePosition = function (nodeId, nodeMap, newGraphData, xLevel, yLevel) {
+        var _this = this;
+        var n = nodeMap[nodeId];
+        var text = n.text, type = n.type, next = n.next, properties = n.properties;
+        var x = xLevel * 160 + 40;
+        var y = yLevel * 120;
+        var nodeData = {
+            id: nodeId,
+            x: x,
+            text: text,
+            y: y,
+            type: type,
+            properties: properties,
+        };
+        if (text && typeof text === 'object') {
+            nodeData.text = __assign(__assign({}, text), { x: x + text.x, y: y + text.y });
+        }
+        this.newNodeMap.set(nodeData.id, {
+            x: nodeData.x,
+            y: nodeData.y,
+            type: type,
+        });
+        newGraphData.nodes.push(nodeData);
+        n.isFixed = true;
+        this.addLevelHeight(xLevel, 1);
+        if (next && next.length > 0) {
+            next.forEach(function (nextInfo) {
+                // 如果下一个节点还没有被定位，那么设置其定位
+                var n1 = nodeMap[nextInfo.nodeId];
+                if (!n1.isFixed) {
+                    var nextYLevel = _this.getLevelHeight(xLevel + 1);
+                    _this.addLevelHeight(xLevel, 1);
+                    _this.setNodePosition(nextInfo.nodeId, nodeMap, newGraphData, xLevel + 1, nextYLevel + 1);
+                }
+                else {
+                    // todo: 如果下一个节点是已经定位的，则需要考虑边的规避
+                }
+                // 设置连接到下一个节点的边
+                // 1) 起始位置为source节点的下方，结束位置为target节点左边。
+                // 2) 计算折线
+                newGraphData.edges.push(__assign({ id: nextInfo.edgeId, type: nextInfo.edgeType, sourceNodeId: nodeId, targetNodeId: nextInfo.nodeId, properties: nextInfo.properties, text: nextInfo.text }, _this.getEdgeDataPoints(nodeId, nextInfo.nodeId)));
+            });
+        }
+        return nodeData;
+    };
+    /**
+     * 1. 处理边上的文本
+     * 2. 主干节点之间直接的边
+     * 3. 一个节点被多个连接作为目标节点，合理分配锚点位置。
+     */
+    AutoLayout.prototype.getEdgeDataPoints = function (sourceNodeId, targetNodeId) {
+        var source = this.newNodeMap.get(sourceNodeId);
+        var target = this.newNodeMap.get(targetNodeId);
+        var _a = this.getShape(sourceNodeId), width = _a.width, height = _a.height;
+        var _b = this.getShape(targetNodeId), targetWidth = _b.width, targetHeight = _b.height;
+        var positionType = this.getRelativePosition(source, target);
+        var startPoint = {
+            x: source.x,
+            y: source.y,
+        };
+        var endPoint = {
+            x: target.x,
+            y: target.y,
+        };
+        switch (positionType) {
+            case POSITION_TYPE.LEFT:
+                startPoint.x = source.x + width / 2;
+                endPoint.x = target.x - targetWidth / 2;
+                break;
+            case POSITION_TYPE.LEFT_TOP:
+                startPoint.y = source.y + height / 2;
+                endPoint.x = target.x - targetWidth / 2;
+                break;
+            case POSITION_TYPE.LEFT_BOTTOM:
+                startPoint.x = source.x + width / 2;
+                endPoint.y = target.y + targetHeight / 2;
+                break;
+            default:
+                break;
+        }
+        return {
+            startPoint: startPoint,
+            endPoint: endPoint,
+        };
+    };
+    /**
+     * 获取边的连接节点相对位置。
+     * source一定在target左边。
+     * 1. 如果source和target在同一x, y坐标内容。
+     * 2. 如果source在target左上方。
+     * 3. 如果source在target左下方。
+     */
+    AutoLayout.prototype.getRelativePosition = function (source, target) {
+        var y = source.y;
+        var y1 = target.y;
+        var positionType;
+        if (y < y1) {
+            positionType = -1;
+        }
+        else if (y === y1) {
+            positionType = 0;
+        }
+        else {
+            positionType = 1;
+        }
+        return positionType;
+    };
+    /**
+     * 获取边节点图形的宽高。
+     */
+    AutoLayout.prototype.getShape = function (nodeId) {
+        var nodeModel = this.lf.getNodeModelById(nodeId);
+        return {
+            height: nodeModel.height,
+            width: nodeModel.width,
+        };
+    };
+    AutoLayout.prototype.formatData = function (data) {
+        var nodeMap = data.nodes.reduce(function (nMap, node) {
+            var type = node.type, properties = node.properties, text = node.text, x = node.x, y = node.y;
+            if (text && typeof text === 'object') {
+                // 坐标转换为偏移量
+                text.x = text.x - x;
+                text.y = text.y - y;
+            }
+            nMap[node.id] = {
+                type: type,
+                properties: properties,
+                text: text,
+                prev: [],
+                next: [],
+            };
+            return nMap;
+        }, {});
+        data.edges.forEach(function (edge) {
+            var sourceNodeId = edge.sourceNodeId, targetNodeId = edge.targetNodeId, id = edge.id, properties = edge.properties, text = edge.text;
+            var newText = text;
+            if (typeof text === 'object') {
+                newText = text.value;
+            }
+            nodeMap[sourceNodeId].next.push({
+                edgeId: id,
+                nodeId: targetNodeId,
+                edgeType: edge.type,
+                properties: properties,
+                text: newText,
+            });
+            nodeMap[targetNodeId].prev.push({
+                edgeId: id,
+                nodeId: sourceNodeId,
+                properties: properties,
+                text: newText,
+            });
+        });
+        return nodeMap;
+    };
+    AutoLayout.prototype.addLevelHeight = function (level, height, isNegative) {
+        if (height === void 0) { height = 1; }
+        if (isNegative === void 0) { isNegative = false; }
+        var l = this.levelHeight[level];
+        if (!l) {
+            l = {
+                positiveHeight: 0,
+                negativeHeight: 0,
+            };
+            this.levelHeight[level] = l;
+        }
+        isNegative ? (l.negativeHeight -= height) : (l.positiveHeight += height);
+    };
+    AutoLayout.prototype.getLevelHeight = function (level, isNegative) {
+        if (isNegative === void 0) { isNegative = false; }
+        var val = this.levelHeight[level];
+        if (!val) {
+            return 0;
+        }
+        return isNegative ? val.negativeHeight : val.positiveHeight;
+    };
+    AutoLayout.pluginName = 'AutoLayout';
+    return AutoLayout;
+}());
+exports.AutoLayout = AutoLayout;

package/cjs/tools/flow-path/index.js

@@ -0,0 +1,215 @@
+"use strict";
+/**
+ * 路径插件，此插件支持获取绘制的图中所有的路径。
+ * 需要指定开始节点类型。
+ */
+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 __spread = (this && this.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowPath = void 0;
+var getBpmnId_1 = require("../../bpmn/getBpmnId");
+var FlowPath = /** @class */ (function () {
+    function FlowPath(_a) {
+        var _this = this;
+        var lf = _a.lf;
+        this.lf = lf;
+        this.pathes = [];
+        // 给lf添加方法
+        lf.getPathes = function () {
+            if (!_this.startNodeType) {
+                throw new Error('需要预先指定开始节点类型');
+            }
+            return _this.getPathes();
+        };
+        lf.setRawPathes = function (pathes) {
+            _this.setPathes(pathes);
+        };
+        lf.getRawPathes = function () { return _this.pathes; };
+        lf.setStartNodeType = function (type) {
+            _this.startNodeType = type;
+        };
+    }
+    FlowPath.prototype.setPathes = function (pathes) {
+        this.pathes = pathes.map(function (_a) {
+            var routeId = _a.routeId, name = _a.name, elements = _a.elements, type = _a.type;
+            return ({
+                routeId: routeId,
+                name: name,
+                elements: elements,
+                type: type,
+                similarElement: null,
+                weight: 0,
+            });
+        });
+    };
+    FlowPath.prototype.getPathes = function () {
+        var _this = this;
+        var graphData = this.lf.getGraphRawData();
+        var nodesMap = new Map();
+        var startNodeIds = [];
+        graphData.nodes.forEach(function (node) {
+            nodesMap.set(node.id, {
+                id: node.id,
+                data: node,
+                nextNodes: [],
+            });
+            if (node.type === _this.startNodeType) {
+                startNodeIds.push(node.id);
+            }
+        });
+        graphData.edges.forEach(function (edge) {
+            var node = nodesMap.get(edge.sourceNodeId);
+            node.nextNodes.push(edge.targetNodeId);
+        });
+        var pathElements = [];
+        startNodeIds.forEach(function (id) {
+            pathElements = pathElements.concat(_this.findPathElements(nodesMap.get(id), nodesMap, []));
+        });
+        return this.getNewPathes(pathElements);
+    };
+    FlowPath.prototype.findPathElements = function (node, nodesMap, elements) {
+        if (elements === void 0) { elements = []; }
+        var newPathes = __spread(elements);
+        newPathes.push(node.id);
+        if (node.nextNodes.length === 0) {
+            return [newPathes];
+        }
+        var subPath = [];
+        for (var i = 0; i < node.nextNodes.length; i++) {
+            var n = nodesMap.get(node.nextNodes[i]);
+            var p = void 0;
+            // 循环路径
+            var idx = newPathes.indexOf(n.id);
+            if (idx !== -1) {
+                p = [__spread(newPathes.slice(idx), [n.id])];
+            }
+            else {
+                p = this.findPathElements(n, nodesMap, __spread(newPathes));
+            }
+            subPath = subPath.concat(p);
+        }
+        return subPath;
+    };
+    /**
+     * 设置路径id
+     * 如果存在原始路径Id, 则需要比较新路径是否在原始路径中存在相似路径
+     * 如果有，则尽量使用原始路径。
+     * 相似路径
+     * 1. 如果所有的节点都相同，则必定为同一路径。(包括顺序不同)
+     * 2. 如果新路径比原来路径少了或者多了部分节点，则记录为相似路径。基于不同的差异，标记不同的权重。
+     * 3. 基于新路径在旧路径占用权限，设置新路径Id.
+     * 4. 如果某一条旧路径被多条新路径标记为相同的权重，则这两条新路径都使用新Id.
+     */
+    FlowPath.prototype.getNewPathes = function (pathElements) {
+        var _this = this;
+        var pathes = [];
+        // 由于循环路径不包括开始，所以存在重复的情况，此处去重。
+        var LoopSet = new Set();
+        pathElements.forEach(function (elements) {
+            var routeId = _this.getNewId('path');
+            var name = _this.getNewId('路径');
+            var isLoop = _this.isLoopPath(elements);
+            var elementStr = elements.join(',');
+            if (!LoopSet.has(elementStr)) {
+                LoopSet.add(elementStr);
+                pathes.push({
+                    routeId: routeId,
+                    name: name,
+                    elements: elements,
+                    type: isLoop,
+                    weight: 0,
+                    similarElement: '',
+                });
+            }
+        });
+        var oldPathes = JSON.parse(JSON.stringify(this.pathes));
+        // 1) 找到所有路径最相似的路径, 给旧路径标记其最接近的路径
+        pathes.forEach(function (newPath) {
+            for (var i = 0; i < oldPathes.length; i++) {
+                var oldPath = oldPathes[i];
+                var weight = _this.similar2Path(__spread(newPath.elements), __spread(oldPath.elements));
+                if (weight > newPath.weight && oldPath.weight <= weight) {
+                    newPath.weight = weight;
+                    newPath.similarElement = oldPath;
+                    if (weight === oldPath.weight && oldPath.similarElement) {
+                        // 特殊处理，如果两个路径都与同一条旧路径有相似的权重，则这两个路径的相似路径都置空
+                        oldPath.similarElement.similarElement = null;
+                        oldPath.similarElement.weight = 0;
+                        oldPath.similarElement = null;
+                        oldPath.weight = 0;
+                    }
+                    else {
+                        oldPath.similarElement = newPath;
+                        oldPath.weight = weight;
+                    }
+                }
+            }
+        });
+        // 2) 再次遍历所有路径，如果该路径的相似路径对应的相似路径是自己，那么就设置该路径id和name为其相似路径。
+        pathes.forEach(function (newPath) {
+            if (newPath.similarElement && newPath.similarElement.similarElement === newPath) {
+                newPath.routeId = newPath.similarElement.routeId;
+                newPath.name = newPath.similarElement.name;
+            }
+            delete newPath.similarElement;
+            delete newPath.weight;
+        });
+        this.setPathes(pathes);
+        return pathes;
+    };
+    FlowPath.prototype.similar2Path = function (x, y) {
+        var z = 0;
+        var s = x.length + y.length;
+        x.sort();
+        y.sort();
+        var a = x.shift();
+        var b = y.shift();
+        while (a !== undefined && b !== undefined) {
+            if (a === b) {
+                z++;
+                a = x.shift();
+                b = y.shift();
+            }
+            else if (a < b) {
+                a = x.shift();
+            }
+            else if (a > b) {
+                b = y.shift();
+            }
+        }
+        return (z / s) * 200;
+    };
+    FlowPath.prototype.getNewId = function (prefix) {
+        return prefix + "_" + getBpmnId_1.getBpmnId();
+    };
+    /**
+     * 判断是否为循环路径
+     * 由于前面进行了特殊处理，将循环部分单独提出来作为路径
+     * 所有循环路径必定开始节点等于结束节点。
+     */
+    FlowPath.prototype.isLoopPath = function (elements) {
+        var length = elements.length;
+        return elements.indexOf(elements[length - 1]) !== length - 1 ? 1 : 0;
+    };
+    FlowPath.pluginName = 'flowPath';
+    return FlowPath;
+}());
+exports.FlowPath = FlowPath;