@logicflow/extension 1.2.18 → 1.2.20

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 };

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

@@ -1,266 +0,0 @@
-/**
- * 自动布局插件
- * 依赖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);
-};
-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;
-}());
-export { AutoLayout };

package/es/tools/flow-path/index.d.ts

@@ -1,47 +0,0 @@
-/**
- * 路径插件，此插件支持获取绘制的图中所有的路径。
- * 需要指定开始节点类型。
- */
-import LogicFlow from '@logicflow/core';
-declare type Path = {
-    routeId: string;
-    name: string;
-    elements: string[];
-    type: number;
-};
-declare type RawPath = Path & {
-    similarElement: RawPath;
-    weight: number;
-};
-declare class FlowPath {
-    lf: LogicFlow;
-    pathes: RawPath[];
-    startNodeType: string;
-    static pluginName: string;
-    constructor({ lf }: {
-        lf: any;
-    });
-    setPathes(pathes: any): void;
-    getPathes(): any[];
-    private findPathElements;
-    /**
-     * 设置路径id
-     * 如果存在原始路径Id, 则需要比较新路径是否在原始路径中存在相似路径
-     * 如果有，则尽量使用原始路径。
-     * 相似路径
-     * 1. 如果所有的节点都相同，则必定为同一路径。(包括顺序不同)
-     * 2. 如果新路径比原来路径少了或者多了部分节点，则记录为相似路径。基于不同的差异，标记不同的权重。
-     * 3. 基于新路径在旧路径占用权限，设置新路径Id.
-     * 4. 如果某一条旧路径被多条新路径标记为相同的权重，则这两条新路径都使用新Id.
-     */
-    private getNewPathes;
-    private similar2Path;
-    private getNewId;
-    /**
-     * 判断是否为循环路径
-     * 由于前面进行了特殊处理，将循环部分单独提出来作为路径
-     * 所有循环路径必定开始节点等于结束节点。
-     */
-    private isLoopPath;
-}
-export { FlowPath, };