@logicflow/extension 1.2.19 → 1.2.20

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

@@ -1,215 +0,0 @@
-"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;

package/cjs/tools/snapshot/index.js

@@ -1,252 +0,0 @@
-"use strict";
-/* eslint-disable operator-linebreak */
-/* eslint-disable implicit-arrow-linebreak */
-/**
- * 快照插件，生成视图
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Snapshot = void 0;
-var Snapshot = /** @class */ (function () {
-    function Snapshot(_a) {
-        var _this = this;
-        var lf = _a.lf;
-        this.lf = lf;
-        this.customCssRules = '';
-        this.useGlobalRules = true;
-        /* 下载快照 */
-        lf.getSnapshot = function (fileName, backgroundColor) {
-            _this.getSnapshot(fileName, backgroundColor);
-        };
-        /* 获取Blob对象，用户图片上传 */
-        lf.getSnapshotBlob = function (backgroundColor) {
-            return _this.getSnapshotBlob(backgroundColor);
-        };
-        /* 获取Base64对象，用户图片上传 */
-        lf.getSnapshotBase64 = function (backgroundColor) {
-            return _this.getSnapshotBase64(backgroundColor);
-        };
-    }
-    /* 获取svgRoot对象 */
-    Snapshot.prototype.getSvgRootElement = function (lf) {
-        var svgRootElement = lf.container.querySelector('.lf-canvas-overlay');
-        return svgRootElement;
-    };
-    Snapshot.prototype.triggerDownload = function (imgURI) {
-        var evt = new MouseEvent('click', {
-            view: window,
-            bubbles: false,
-            cancelable: true,
-        });
-        var a = document.createElement('a');
-        a.setAttribute('download', this.fileName);
-        a.setAttribute('href', imgURI);
-        a.setAttribute('target', '_blank');
-        a.dispatchEvent(evt);
-    };
-    Snapshot.prototype.removeAnchor = function (element) {
-        var childNodes = element.childNodes;
-        var childLength = element.childNodes && element.childNodes.length;
-        for (var i = 0; i < childLength; i++) {
-            var child = childNodes[i];
-            var classList = (child.classList && Array.from(child.classList)) || [];
-            if (classList.indexOf('lf-anchor') > -1) {
-                element.removeChild(element.childNodes[i]);
-                childLength--;
-                i--;
-            }
-        }
-    };
-    Snapshot.prototype.removeRotateControl = function (element) {
-        var childNodes = element.childNodes;
-        var childLength = element.childNodes && element.childNodes.length;
-        for (var i = 0; i < childLength; i++) {
-            var child = childNodes[i];
-            var classList = (child.classList && Array.from(child.classList)) || [];
-            if (classList.indexOf('lf-rotate-control') > -1) {
-                element.removeChild(element.childNodes[i]);
-                childLength--;
-                i--;
-            }
-        }
-    };
-    /* 下载图片 */
-    Snapshot.prototype.getSnapshot = function (fileName, backgroundColor) {
-        var _this = this;
-        this.fileName = fileName || "logic-flow." + Date.now() + ".png";
-        var svg = this.getSvgRootElement(this.lf);
-        this.getCanvasData(svg, backgroundColor).then(function (canvas) {
-            var imgURI = canvas
-                .toDataURL('image/png')
-                .replace('image/png', 'image/octet-stream');
-            _this.triggerDownload(imgURI);
-        });
-    };
-    /* 获取base64对象 */
-    Snapshot.prototype.getSnapshotBase64 = function (backgroundColor) {
-        var _this = this;
-        var svg = this.getSvgRootElement(this.lf);
-        return new Promise(function (resolve) {
-            _this.getCanvasData(svg, backgroundColor).then(function (canvas) {
-                var base64 = canvas.toDataURL('image/png');
-                // 输出图片数据以及图片宽高
-                resolve({ data: base64, width: canvas.width, height: canvas.height });
-            });
-        });
-    };
-    /* 获取Blob对象 */
-    Snapshot.prototype.getSnapshotBlob = function (backgroundColor) {
-        var _this = this;
-        var svg = this.getSvgRootElement(this.lf);
-        return new Promise(function (resolve) {
-            _this.getCanvasData(svg, backgroundColor).then(function (canvas) {
-                canvas.toBlob(function (blob) {
-                    // 输出图片数据以及图片宽高
-                    resolve({ data: blob, width: canvas.width, height: canvas.height });
-                }, 'image/png');
-            });
-        });
-    };
-    Snapshot.prototype.getClassRules = function () {
-        var rules = '';
-        if (this.useGlobalRules) {
-            var styleSheets = document.styleSheets;
-            for (var i = 0; i < styleSheets.length; i++) {
-                var sheet = styleSheets[i];
-                for (var j = 0; j < sheet.cssRules.length; j++) {
-                    rules += sheet.cssRules[j].cssText;
-                }
-            }
-        }
-        if (this.customCssRules) {
-            rules += this.customCssRules;
-        }
-        return rules;
-    };
-    // 获取图片生成中中间产物canvas对象，用户转换为其他需要的格式
-    Snapshot.prototype.getCanvasData = function (svg, backgroundColor) {
-        var _this = this;
-        var copy = svg.cloneNode(true);
-        var graph = copy.lastChild;
-        var childLength = graph.childNodes && graph.childNodes.length;
-        if (childLength) {
-            for (var i = 0; i < childLength; i++) {
-                var lfLayer = graph.childNodes[i];
-                // 只保留包含节点和边的基础图层进行下载，其他图层删除
-                var layerClassList = lfLayer.classList && Array.from(lfLayer.classList);
-                if (layerClassList && layerClassList.indexOf('lf-base') < 0) {
-                    graph.removeChild(graph.childNodes[i]);
-                    childLength--;
-                    i--;
-                }
-                else {
-                    // 删除锚点
-                    var lfBase = graph.childNodes[i];
-                    lfBase &&
-                        lfBase.childNodes.forEach(function (item) {
-                            var element = item;
-                            _this.removeAnchor(element.firstChild);
-                            _this.removeRotateControl(element.firstChild);
-                        });
-                }
-            }
-        }
-        var dpr = window.devicePixelRatio || 1;
-        if (dpr < 1) {
-            // https://github.com/didi/LogicFlow/issues/1222
-            // canvas.width = bboxWidth * dpr配合ctx.scale(dpr, dpr)是为了解决绘制模糊
-            // 比如dpr=2，先让canvas.width放大到等同于屏幕的物理像素宽高，然后自适应缩放适配canvas.style.width
-            // 由于所有元素都缩放了一半，因此需要ctx.scale(dpr, dpr)放大2倍整体绘制的内容
-            // 当用户缩放浏览器时，window.devicePixelRatio会随着变小
-            // 当window.devicePixelRatio变小到一定程度，会导致canvas.width<canvas.style.width
-            // 由于导出图片的svg的大小是canvas.style.width+canvas.style.height
-            // 因此会导致导出的svg图片无法完整绘制到canvas（因为canvas.width小于svg的宽）
-            // 从而导致canvas导出图片是缺失的svg
-            // 而dpr>=1就能保证canvas.width>=canvas.style.width
-            // 当dpr小于1的时候，我们强制转化为1，并不会产生绘制模糊等问题
-            dpr = 1;
-        }
-        var canvas = document.createElement('canvas');
-        /*
-        为了计算真实宽高需要取图的真实dom
-        真实dom存在缩放影响其宽高数值
-        在得到真实宽高后除以缩放比例即可得到正常宽高
-        */
-        var base = this.lf.graphModel.rootEl.querySelector('.lf-base');
-        var bbox = base.getBoundingClientRect();
-        var layout = document
-            .querySelector('.lf-canvas-overlay')
-            .getBoundingClientRect();
-        var offsetX = bbox.x - layout.x;
-        var offsetY = bbox.y - layout.y;
-        var graphModel = this.lf.graphModel;
-        var transformModel = graphModel.transformModel;
-        var SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
-        // offset值加10，保证图形不会紧贴着下载图片的左边和上边
-        copy.lastChild.style.transform = "matrix(1, 0, 0, 1, " + ((-offsetX + TRANSLATE_X) * (1 / SCALE_X) + 10) + ", " + ((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) + 10) + ")";
-        var bboxWidth = Math.ceil(bbox.width / SCALE_X);
-        var bboxHeight = Math.ceil(bbox.height / SCALE_Y);
-        // width,height 值加40，保证图形不会紧贴着下载图片的右边和下边
-        canvas.style.width = bboxWidth + "px";
-        canvas.style.height = bboxHeight + "px";
-        canvas.width = bboxWidth * dpr + 80;
-        canvas.height = bboxHeight * dpr + 80;
-        var ctx = canvas.getContext('2d');
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.scale(dpr, dpr);
-        // 如果有背景色，设置流程图导出的背景色
-        if (backgroundColor) {
-            ctx.fillStyle = backgroundColor;
-            ctx.fillRect(0, 0, bboxWidth * dpr + 80, bboxHeight * dpr + 80);
-        }
-        else {
-            ctx.clearRect(0, 0, bboxWidth, bboxHeight);
-        }
-        var img = new Image();
-        var style = document.createElement('style');
-        style.innerHTML = this.getClassRules();
-        var foreignObject = document.createElement('foreignObject');
-        foreignObject.appendChild(style);
-        copy.appendChild(foreignObject);
-        return new Promise(function (resolve) {
-            img.onload = function () {
-                var isFirefox = navigator.userAgent.indexOf('Firefox') > -1;
-                try {
-                    if (isFirefox) {
-                        createImageBitmap(img, {
-                            resizeWidth: canvas.width,
-                            resizeHeight: canvas.height,
-                        }).then(function (imageBitmap) {
-                            // 在回调函数中使用 drawImage() 方法绘制图像
-                            ctx.drawImage(imageBitmap, 0, 0);
-                            resolve(canvas);
-                        });
-                    }
-                    else {
-                        ctx.drawImage(img, 0, 0);
-                        resolve(canvas);
-                    }
-                }
-                catch (e) {
-                    ctx.drawImage(img, 0, 0);
-                    resolve(canvas);
-                }
-            };
-            /*
-            因为svg中存在dom存放在foreignObject元素中
-            SVG图形转成img对象
-            todo: 会导致一些清晰度问题这个需要再解决
-            fixme: XMLSerializer的中的css background url不会下载图片
-            */
-            var svg2Img = "data:image/svg+xml;charset=utf-8," + new XMLSerializer().serializeToString(copy);
-            var imgSrc = svg2Img
-                .replace(/\n/g, '')
-                .replace(/\t/g, '')
-                .replace(/#/g, '%23');
-            img.src = imgSrc;
-        });
-    };
-    Snapshot.pluginName = 'snapshot';
-    return Snapshot;
-}());
-exports.Snapshot = Snapshot;
-exports.default = Snapshot;

package/es/tools/auto-layout/index.d.ts

@@ -1,40 +0,0 @@
-/**
- * 自动布局插件
- * 依赖flowPath插件
- * 未完善
- */
-import LogicFlow from '@logicflow/core';
-declare class AutoLayout {
-    lf: LogicFlow;
-    levelHeight: any[];
-    newNodeMap: Map<string, any>;
-    trunk: any[];
-    static pluginName: string;
-    constructor({ lf }: {
-        lf: any;
-    });
-    layout(data: any, path: any): void;
-    private setNodePosition;
-    /**
-     * 1. 处理边上的文本
-     * 2. 主干节点之间直接的边
-     * 3. 一个节点被多个连接作为目标节点，合理分配锚点位置。
-     */
-    private getEdgeDataPoints;
-    /**
-     * 获取边的连接节点相对位置。
-     * source一定在target左边。
-     * 1. 如果source和target在同一x, y坐标内容。
-     * 2. 如果source在target左上方。
-     * 3. 如果source在target左下方。
-     */
-    private getRelativePosition;
-    /**
-     * 获取边节点图形的宽高。
-     */
-    private getShape;
-    private formatData;
-    addLevelHeight(level: any, height?: number, isNegative?: boolean): void;
-    getLevelHeight(level: any, isNegative?: boolean): any;
-}
-export { AutoLayout };