@logicflow/extension 1.2.0-alpha.0 → 1.2.0-alpha.11

package/es/components/control/index.d.ts

@@ -9,13 +9,12 @@ declare type ControlItem = {
 };
 declare class Control {
     private lf;
+    private LogicFlow;
     static pluginName: string;
     private controlItems;
     private domContainer;
     private toolEl;
-    constructor({ lf }: {
-        lf: any;
-    });
+    constructor(args: any);
     render(lf: any, domContainer: any): void;
     destroy(): void;
     addItem(item: any): void;

package/es/components/control/index.js

@@ -19,15 +19,16 @@ var __spread = (this && this.__spread) || function () {
     return ar;
 };
 var Control = /** @class */ (function () {
-    function Control(_a) {
+    function Control(args) {
         var _this = this;
-        var lf = _a.lf;
+        this.lf = args.lf;
+        this.LogicFlow = args.LogicFlow;
         this.controlItems = [
             {
                 key: 'zoom-out',
                 iconClass: 'lf-control-zoomOut',
-                title: '缩小流程图',
-                text: '缩小',
+                title: this.LogicFlow.t('缩小流程图'),
+                text: this.LogicFlow.t('缩小'),
                 onClick: function () {
                     _this.lf.zoom(false);
                 },
@@ -35,8 +36,8 @@ var Control = /** @class */ (function () {
             {
                 key: 'zoom-in',
                 iconClass: 'lf-control-zoomIn',
-                title: '放大流程图',
-                text: '放大',
+                title: this.LogicFlow.t('放大流程图'),
+                text: this.LogicFlow.t('放大'),
                 onClick: function () {
                     _this.lf.zoom(true);
                 },
@@ -44,8 +45,8 @@ var Control = /** @class */ (function () {
             {
                 key: 'reset',
                 iconClass: 'lf-control-fit',
-                title: '恢复流程原有尺寸',
-                text: '适应',
+                title: this.LogicFlow.t('恢复流程原有尺寸'),
+                text: this.LogicFlow.t('适应'),
                 onClick: function () {
                     _this.lf.resetZoom();
                 },
@@ -53,8 +54,8 @@ var Control = /** @class */ (function () {
             {
                 key: 'undo',
                 iconClass: 'lf-control-undo',
-                title: '回到上一步',
-                text: '上一步',
+                title: this.LogicFlow.t('回到上一步'),
+                text: this.LogicFlow.t('上一步'),
                 onClick: function () {
                     _this.lf.undo();
                 },
@@ -62,14 +63,13 @@ var Control = /** @class */ (function () {
             {
                 key: 'redo',
                 iconClass: 'lf-control-redo',
-                title: '移到下一步',
-                text: '下一步',
+                title: this.LogicFlow.t('移到下一步'),
+                text: this.LogicFlow.t('下一步'),
                 onClick: function () {
                     _this.lf.redo();
                 },
             },
         ];
-        this.lf = lf;
     }
     Control.prototype.render = function (lf, domContainer) {
         this.destroy();
@@ -110,14 +110,14 @@ var Control = /** @class */ (function () {
             text.title = item.title;
             text.innerText = item.text;
             itemContainer.append(icon, text);
-            switch (item.text) {
-                case '上一步':
+            switch (item.key) {
+                case 'undo':
                     _this.lf.on('history:change', function (_a) {
                         var undoAble = _a.data.undoAble;
                         itemContainer.className = undoAble ? NORMAL : DISABLED;
                     });
                     break;
-                case '下一步':
+                case 'redo':
                     _this.lf.on('history:change', function (_a) {
                         var redoAble = _a.data.redoAble;
                         itemContainer.className = redoAble ? NORMAL : DISABLED;

package/es/components/highlight/index.d.ts

@@ -0,0 +1,21 @@
+import LogicFlow from '@logicflow/core';
+declare type IMode = 'single' | 'path';
+declare class Highlight {
+    lf: LogicFlow;
+    static pluginName: string;
+    mode: IMode;
+    manual: boolean;
+    tempStyles: {};
+    constructor({ lf }: {
+        lf: any;
+    });
+    setMode(mode: IMode): void;
+    setManual(manual: boolean): void;
+    private highlightSingle;
+    private highlightPath;
+    highlight(id: string, mode?: IMode): void;
+    restoreHighlight(): void;
+    render(lf: any, domContainer: any): void;
+    destroy(): void;
+}
+export { Highlight };

package/es/components/highlight/index.js

@@ -0,0 +1,184 @@
+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 __spread = (this && this.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+// 后续并入FlowPath
+var getPath = function (id, lf) {
+    var el = lf.getModelById(id);
+    return getNodePath(el.BaseType === 'node' ? el : el.targetNode, lf);
+};
+// dfs + 动态规划
+// todo 算法优化
+var getNodePath = function (node, lf) {
+    var incomingPaths = [];
+    var outgoingPaths = [];
+    var getIncomingPaths = function (curNode, path, prevNode) {
+        if (prevNode === void 0) { prevNode = null; }
+        if (prevNode) {
+            // * 上个节点和当前节点中间边
+            path.unshift.apply(path, __spread(lf
+                .getEdgeModels({
+                sourceNodeId: curNode.id,
+                targetNodeId: prevNode.id,
+            })
+                .map(function (item) { return item.id; })));
+        }
+        // * 路径中存在节点，则不再继续查找，说明出现环情况
+        if (path.includes(curNode.id)) {
+            incomingPaths.push(path);
+            return;
+        }
+        // * 路径中当前加入节点
+        path.unshift(curNode.id);
+        if (!curNode.incoming.nodes.length) {
+            incomingPaths.push(path);
+            return;
+        }
+        // * 往下找
+        curNode.incoming.nodes.forEach(function (nextNode) {
+            getIncomingPaths(nextNode, path.slice(), curNode);
+        });
+    };
+    // * 同上逻辑
+    var getOutgoingPaths = function (curNode, path, prevNode) {
+        if (prevNode === void 0) { prevNode = null; }
+        if (prevNode) {
+            path.push.apply(path, __spread(lf
+                .getEdgeModels({
+                sourceNodeId: prevNode.id,
+                targetNodeId: curNode.id,
+            })
+                .map(function (item) { return item.id; })));
+        }
+        if (path.includes(curNode.id)) {
+            outgoingPaths.push(path);
+            return;
+        }
+        path.push(curNode.id);
+        if (!curNode.outgoing.nodes.length) {
+            outgoingPaths.push(path);
+            return;
+        }
+        curNode.outgoing.nodes.forEach(function (nextNode) {
+            getOutgoingPaths(nextNode, path.slice(), curNode);
+        });
+    };
+    getIncomingPaths(node, []);
+    getOutgoingPaths(node, []);
+    return __spread(new Set(__spread(incomingPaths.flat(), outgoingPaths.flat())));
+};
+var Highlight = /** @class */ (function () {
+    function Highlight(_a) {
+        var lf = _a.lf;
+        this.mode = 'path';
+        this.manual = false;
+        this.tempStyles = {};
+        this.lf = lf;
+    }
+    Highlight.prototype.setMode = function (mode) {
+        this.mode = mode;
+    };
+    Highlight.prototype.setManual = function (manual) {
+        this.manual = manual;
+    };
+    Highlight.prototype.highlightSingle = function (id) {
+        var model = this.lf.getModelById(id);
+        if (model.BaseType === 'node') {
+            // 高亮节点
+            model.updateStyles(this.tempStyles[id]);
+        }
+        else if (model.BaseType === 'edge') {
+            // 高亮边及对应的节点
+            model.updateStyles(this.tempStyles[id]);
+            model.sourceNode.updateStyles(this.tempStyles[model.sourceNode.id]);
+            model.targetNode.updateStyles(this.tempStyles[model.targetNode.id]);
+        }
+    };
+    Highlight.prototype.highlightPath = function (id) {
+        var _this = this;
+        var path = getPath(id, this.lf);
+        path.forEach(function (_id) {
+            // 高亮路径上所有的边和节点
+            _this.lf.getModelById(_id).updateStyles(_this.tempStyles[_id]);
+        });
+    };
+    Highlight.prototype.highlight = function (id, mode) {
+        var _this = this;
+        if (mode === void 0) { mode = this.mode; }
+        if (this.manual)
+            return;
+        if (Object.keys(this.tempStyles).length) {
+            this.restoreHighlight();
+        }
+        Object.values(this.lf.graphModel.modelsMap).forEach(function (item) {
+            //  所有节点样式都进行备份
+            // eslint-disable-next-line operator-linebreak
+            var oStyle = item.BaseType === 'node' ? item.getNodeStyle() : item.getEdgeStyle();
+            _this.tempStyles[item.id] = __assign({}, oStyle);
+            //  所有节点都设置透明度为0.1
+            item.setStyles({ opacity: 0.1 });
+        });
+        var modeTrigger = {
+            single: this.highlightSingle.bind(this),
+            path: this.highlightPath.bind(this),
+        };
+        modeTrigger[mode](id);
+    };
+    Highlight.prototype.restoreHighlight = function () {
+        var _this = this;
+        // 恢复所有节点的样式
+        if (!Object.keys(this.tempStyles).length)
+            return;
+        Object.values(this.lf.graphModel.modelsMap).forEach(function (item) {
+            var _a;
+            var oStyle = (_a = _this.tempStyles[item.id]) !== null && _a !== void 0 ? _a : {};
+            item.updateStyles(__assign({}, oStyle));
+        });
+        this.tempStyles = {};
+    };
+    Highlight.prototype.render = function (lf, domContainer) {
+        var _this = this;
+        this.lf.on('node:mouseenter', function (_a) {
+            var data = _a.data;
+            return _this.highlight(data.id);
+        });
+        this.lf.on('edge:mouseenter', function (_a) {
+            var data = _a.data;
+            return _this.highlight(data.id);
+        });
+        this.lf.on('node:mouseleave', this.restoreHighlight.bind(this));
+        this.lf.on('edge:mouseleave', this.restoreHighlight.bind(this));
+        this.lf.on('history:change', this.restoreHighlight.bind(this));
+    };
+    Highlight.prototype.destroy = function () { };
+    Highlight.pluginName = 'highlight';
+    return Highlight;
+}());
+export { Highlight };

package/es/components/menu/index.d.ts

@@ -13,14 +13,13 @@ export declare type MenuConfig = {
 };
 declare class Menu {
     lf: LogicFlow;
+    LogicFlow: any;
     private __container;
     private __menuDOM;
     private menuTypeMap;
     private __currentData;
     static pluginName: string;
-    constructor({ lf }: {
-        lf: any;
-    });
+    constructor(args: any);
     /**
      * 初始化设置默认内置菜单栏
      */

package/es/components/menu/index.js

@@ -23,11 +23,11 @@ var DefaultEdgeMenuKey = 'lf:defaultEdgeMenu';
 var DefaultGraphMenuKey = 'lf:defaultGraphMenu';
 var DefaultSelectionMenuKey = 'lf:defaultSelectionMenu';
 var Menu = /** @class */ (function () {
-    function Menu(_a) {
+    function Menu(args) {
         var _this = this;
-        var lf = _a.lf;
         this.__menuDOM = document.createElement('ul');
-        this.lf = lf;
+        this.lf = args.lf;
+        this.LogicFlow = args.LogicFlow;
         this.menuTypeMap = new Map();
         this.init();
         this.lf.setMenuConfig = function (config) {
@@ -47,19 +47,19 @@ var Menu = /** @class */ (function () {
         var _this = this;
         var defaultNodeMenu = [
             {
-                text: '删除',
+                text: this.LogicFlow.t('删除'),
                 callback: function (node) {
                     _this.lf.deleteNode(node.id);
                 },
             },
             {
-                text: '编辑文本',
+                text: this.LogicFlow.t('编辑文本'),
                 callback: function (node) {
                     _this.lf.graphModel.editText(node.id);
                 },
             },
             {
-                text: '复制',
+                text: this.LogicFlow.t('复制'),
                 callback: function (node) {
                     _this.lf.cloneNode(node.id);
                 },
@@ -68,13 +68,13 @@ var Menu = /** @class */ (function () {
         this.menuTypeMap.set(DefaultNodeMenuKey, defaultNodeMenu);
         var defaultEdgeMenu = [
             {
-                text: '删除',
+                text: this.LogicFlow.t('删除'),
                 callback: function (edge) {
                     _this.lf.deleteEdge(edge.id);
                 },
             },
             {
-                text: '编辑文本',
+                text: this.LogicFlow.t('编辑文本'),
                 callback: function (edge) {
                     _this.lf.graphModel.editText(edge.id);
                 },
@@ -84,7 +84,7 @@ var Menu = /** @class */ (function () {
         this.menuTypeMap.set(DefaultGraphMenuKey, []);
         var DefaultSelectionMenu = [
             {
-                text: '删除',
+                text: this.LogicFlow.t('删除'),
                 callback: function (elements) {
                     _this.lf.clearSelectElements();
                     elements.edges.forEach(function (edge) { return _this.lf.deleteEdge(edge.id); });

package/es/components/mini-map/index.js

@@ -100,6 +100,11 @@ var MiniMap = /** @class */ (function () {
                 _this.__setView();
             }
         });
+        this.__lf.on('blank:drop', function () {
+            if (_this.__isShow) {
+                _this.__setView();
+            }
+        });
     };
     MiniMap.prototype.init = function (option) {
         this.__disabledPlugins = this.__disabledPlugins.concat(option.disabledPlugins || []);

package/es/components/selection-select/index.d.ts

@@ -36,6 +36,7 @@ declare class SelectionSelect {
     closeSelectionSelect(): void;
     __draw: (ev: any) => void;
     __drawOff: () => void;
+    isSelectElement(elementModel: any): boolean;
     open(): void;
     close(): void;
 }

package/es/components/selection-select/index.js

@@ -40,9 +40,11 @@ var SelectionSelect = /** @class */ (function () {
             }
             var lt = [Math.min(x, x1), Math.min(y, y1)];
             var rt = [Math.max(x, x1), Math.max(y, y1)];
-            var elements = _this.lf.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode);
+            var elements = _this.lf.graphModel.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode);
             elements.forEach(function (element) {
-                _this.lf.selectElementById(element.id, true);
+                if (_this.isSelectElement(element)) {
+                    _this.lf.selectElementById(element.id, true);
+                }
             });
             _this.lf.emit('selection:selected', elements);
         };
@@ -115,6 +117,24 @@ var SelectionSelect = /** @class */ (function () {
         }
         this.close();
     };
+    SelectionSelect.prototype.isSelectElement = function (elementModel) {
+        // 如果不可见，则不被选中
+        if (!elementModel.visible)
+            return false;
+        var group = this.lf.extension.group;
+        // 节点在group中,则不被选中
+        if (group) {
+            if (elementModel.BaseType === 'node' && group.getNodeGroup(elementModel.id))
+                return false;
+            if (elementModel.BaseType === 'edge') {
+                if (group.getNodeGroup(elementModel.sourceNodeId)
+                    || group.getNodeGroup(elementModel.targetNodeId)) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    };
     SelectionSelect.prototype.open = function () {
         this.__disabled = false;
     };

package/es/index.d.ts

@@ -16,3 +16,5 @@ export * from './tools/flow-path';
 export * from './tools/auto-layout';
 export * from './bpmn-adapter/xml2json';
 export * from './bpmn-adapter/json2xml';
+export * from './locale/en-locale';
+export * from './components/highlight';

package/es/index.js

@@ -17,3 +17,5 @@ export * from './tools/flow-path';
 export * from './tools/auto-layout';
 export * from './bpmn-adapter/xml2json';
 export * from './bpmn-adapter/json2xml';
+export * from './locale/en-locale';
+export * from './components/highlight';

package/es/locale/en-locale/en.d.ts

@@ -0,0 +1,19 @@
+declare const en: {
+    文本: string;
+    开始: string;
+    缩小流程图: string;
+    缩小: string;
+    放大流程图: string;
+    放大: string;
+    恢复流程原有尺寸: string;
+    适应: string;
+    回到上一步: string;
+    上一步: string;
+    移到下一步: string;
+    下一步: string;
+    删除: string;
+    编辑文本: string;
+    复制: string;
+};
+export default en;
+export { en };

package/es/locale/en-locale/en.js

@@ -0,0 +1,19 @@
+var en = {
+    文本: 'text',
+    开始: 'start',
+    缩小流程图: 'zoom in',
+    缩小: 'zoom in',
+    放大流程图: 'zoom out',
+    放大: 'zoom out',
+    恢复流程原有尺寸: 'adapt to original size',
+    适应: 'adapt',
+    回到上一步: 'undo',
+    上一步: 'undo',
+    移到下一步: 'redo',
+    下一步: 'redo',
+    删除: 'delete',
+    编辑文本: 'edit text',
+    复制: 'copy',
+};
+export default en;
+export { en };

package/es/locale/en-locale/index.d.ts

@@ -0,0 +1,9 @@
+import { Locale } from '../locale';
+declare class EnLocale extends Locale {
+    static pluginName: string;
+    constructor({ LogicFlow }: {
+        LogicFlow: any;
+    });
+}
+export default EnLocale;
+export { EnLocale };

package/es/locale/en-locale/index.js

@@ -0,0 +1,26 @@
+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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Locale } from '../locale';
+import en from './en';
+var EnLocale = /** @class */ (function (_super) {
+    __extends(EnLocale, _super);
+    function EnLocale(_a) {
+        var LogicFlow = _a.LogicFlow;
+        return _super.call(this, LogicFlow, en) || this;
+    }
+    EnLocale.pluginName = 'enLocale';
+    return EnLocale;
+}(Locale));
+export default EnLocale;
+export { EnLocale };

package/es/locale/locale.d.ts

@@ -0,0 +1,6 @@
+export declare class Locale {
+    constructor(LogicFlow?: any, map?: Object);
+    replaceTranslator(LogicFlow: any, map: Object): void;
+    setDefault(LogicFlow: any): void;
+    static defaultTranslator: (text: string) => string;
+}

package/es/locale/locale.js

@@ -0,0 +1,16 @@
+var Locale = /** @class */ (function () {
+    function Locale(LogicFlow, map) {
+        if (LogicFlow && map) {
+            this.replaceTranslator(LogicFlow, map);
+        }
+    }
+    Locale.prototype.replaceTranslator = function (LogicFlow, map) {
+        LogicFlow.t = function (text) { return (map[text] ? map[text] : text); };
+    };
+    Locale.prototype.setDefault = function (LogicFlow) {
+        LogicFlow.t = Locale.defaultTranslator;
+    };
+    Locale.defaultTranslator = function (text) { return text; };
+    return Locale;
+}());
+export { Locale };

package/es/materials/group/GroupNode.js

@@ -105,24 +105,30 @@ var GroupNodeModel = /** @class */ (function (_super) {
         this.isFolded = isFolded;
         // step 1
         if (isFolded) {
-            this.x = this.x - this.width / 2 + this.foldedWidth / 2;
-            this.y = this.y - this.height / 2 + this.foldedHeight / 2;
             this.unfoldedWidth = this.width;
             this.unfoldedHight = this.height;
-            this.width = this.foldedWidth;
-            this.height = this.foldedHeight;
+            this.updateAttributes({
+                x: this.x - this.width / 2 + this.foldedWidth / 2,
+                y: this.y - this.height / 2 + this.foldedHeight / 2,
+                width: this.foldedWidth,
+                height: this.foldedHeight,
+            });
         }
         else {
-            this.width = this.unfoldedWidth;
-            this.height = this.unfoldedHight;
-            this.x = this.x + this.width / 2 - this.foldedWidth / 2;
-            this.y = this.y + this.height / 2 - this.foldedHeight / 2;
+            this.updateAttributes({
+                width: this.unfoldedWidth,
+                height: this.unfoldedHight,
+                x: this.x + this.unfoldedWidth / 2 - this.foldedWidth / 2,
+                y: this.y + this.unfoldedHight / 2 - this.foldedHeight / 2,
+            });
         }
         // step 2
         var allEdges = this.incoming.edges.concat(this.outgoing.edges);
         this.children.forEach(function (elementId) {
             var nodeModel = _this.graphModel.getElement(elementId);
-            nodeModel.visible = !isFolded;
+            nodeModel.updateAttributes({
+                visible: !isFolded,
+            });
             allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
         });
         // step 3
@@ -194,7 +200,9 @@ var GroupNodeModel = /** @class */ (function (_super) {
                 if (targetNodeIdGroup.id !== _this.id || sourceNodeIdGroup.id !== _this.id) {
                     _this.createVirtualEdge(data);
                 }
-                edgeModel.visible = false;
+                edgeModel.updateAttributes({
+                    visible: false,
+                });
             }
             // 展开时，处理被隐藏的边的逻辑
             if (!isFolded && edgeModel.visible === false) {
@@ -210,7 +218,9 @@ var GroupNodeModel = /** @class */ (function (_super) {
                     _this.createVirtualEdge(data);
                 }
                 else {
-                    edgeModel.visible = true;
+                    edgeModel.updateAttributes({
+                        visible: true,
+                    });
                 }
             }
         });
@@ -220,7 +230,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
         var model = this.graphModel.addEdge(edgeData);
         model.virtual = true;
         // 强制不保存group连线数据
-        model.getData = function () { return null; };
+        // model.getData = () => null;
         model.text.editable = false;
         model.isFoldedEdge = true;
     };

package/es/tools/snapshot/index.d.ts

@@ -1,17 +1,25 @@
 /**
  * 快照插件，生成视图
  */
-declare const Snapshot: {
-    pluginName: string;
-    install(lf: any): void;
+declare class Snapshot {
+    static pluginName: string;
+    lf: any;
+    offsetX: number;
+    offsetY: number;
+    fileName: string;
+    customCssRules: string;
+    useGlobalRules: boolean;
+    constructor({ lf }: {
+        lf: any;
+    });
     getSvgRootElement(lf: any): any;
     triggerDownload(imgURI: string): void;
     removeAnchor(element: any): void;
-    downloadSvg(svg: SVGGraphicsElement, fileName: string, backgroundColor: string): void;
-    getBase64(svg: SVGGraphicsElement, backgroundColor: string): Promise<unknown>;
-    getBlob(svg: SVGGraphicsElement, backgroundColor: string): Promise<unknown>;
+    getSnapshot(fileName: string, backgroundColor: string): void;
+    getSnapshotBase64(backgroundColor: string): Promise<unknown>;
+    getSnapshotBlob(backgroundColor: string): Promise<unknown>;
     getClassRules(): string;
     getCanvasData(svg: SVGGraphicsElement, backgroundColor: string): Promise<unknown>;
-};
+}
 export default Snapshot;
 export { Snapshot, };