@logicflow/extension 1.1.19 → 1.1.22

package/cjs/components/highlight/index.js

@@ -0,0 +1,187 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Highlight = void 0;
+// 后续并入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;
+}());
+exports.Highlight = Highlight;

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

@@ -64,12 +64,17 @@ var MiniMap = /** @class */ (function () {
                 y: e.y,
             };
         };
-        this.__drag = function (e) {
+        this.moveViewport = function (top, left) {
             var viewStyle = _this.__viewport.style;
-            _this.__viewPortTop += e.y - _this.__startPosition.y;
-            _this.__viewPortLeft += e.x - _this.__startPosition.x;
+            _this.__viewPortTop = top;
+            _this.__viewPortLeft = left;
             viewStyle.top = _this.__viewPortTop + "px";
             viewStyle.left = _this.__viewPortLeft + "px";
+        };
+        this.__drag = function (e) {
+            var top = _this.__viewPortTop + e.y - _this.__startPosition.y;
+            var left = _this.__viewPortLeft + e.x - _this.__startPosition.x;
+            _this.moveViewport(top, left);
             _this.__startPosition = {
                 x: e.x,
                 y: e.y,
@@ -88,6 +93,21 @@ var MiniMap = /** @class */ (function () {
         this.__drop = function () {
             document.removeEventListener('mousemove', _this.__drag);
             document.removeEventListener('mouseup', _this.__drop);
+            var top = _this.__viewPortTop;
+            var left = _this.__viewPortLeft;
+            if (_this.__viewPortLeft > _this.__width) {
+                left = _this.__width - _this.__viewPortWidth;
+            }
+            if (_this.__viewPortTop > _this.__height) {
+                top = _this.__height - _this.__viewPortHeight;
+            }
+            if (_this.__viewPortLeft < -_this.__width) {
+                left = 0;
+            }
+            if (_this.__viewPortTop < -_this.__height) {
+                top = 0;
+            }
+            _this.moveViewport(top, left);
         };
         this.__lf = lf;
         this.__miniMapWidth = lf.graphModel.width;
@@ -311,7 +331,7 @@ var MiniMap = /** @class */ (function () {
         var graphRatio = (this.__lf.graphModel.width / this.__lf.graphModel.height);
         var realViewPortHeight = realViewPortWidth / graphRatio;
         this.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
-        this.__viewPortLeft = -TRANSLATE_X * scale;
+        this.__viewPortLeft = TRANSLATE_X > 0 ? 0 : -TRANSLATE_X * scale;
         this.__viewPortWidth = realViewPortWidth;
         this.__viewPortHeight = realViewPortHeight;
         viewStyle.top = this.__viewPortTop + "px";

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

@@ -34,6 +34,7 @@ var SelectionSelect = /** @class */ (function () {
         this.__drawOff = function () {
             document.removeEventListener('mousemove', _this.__draw);
             document.removeEventListener('mouseup', _this.__drawOff);
+            _this.wrapper.oncontextmenu = null;
             _this.__domContainer.removeChild(_this.wrapper);
             var _a = _this.startPoint, x = _a.x, y = _a.y;
             var _b = _this.endPoint, x1 = _b.x, y1 = _b.y;
@@ -75,6 +76,9 @@ var SelectionSelect = /** @class */ (function () {
             _this.endPoint = { x: x, y: y };
             var wrapper = document.createElement('div');
             wrapper.className = 'lf-selection-select';
+            wrapper.oncontextmenu = function prevent(ev) {
+                ev.preventDefault();
+            };
             wrapper.style.top = _this.startPoint.y + "px";
             wrapper.style.left = _this.startPoint.x + "px";
             domContainer.appendChild(wrapper);

package/cjs/index.js

@@ -29,3 +29,4 @@ __exportStar(require("./tools/flow-path"), exports);
 __exportStar(require("./tools/auto-layout"), exports);
 __exportStar(require("./bpmn-adapter/xml2json"), exports);
 __exportStar(require("./bpmn-adapter/json2xml"), exports);
+__exportStar(require("./components/highlight"), exports);

package/cjs/tools/snapshot/index.js

@@ -164,7 +164,7 @@ var Snapshot = /** @class */ (function () {
         真实dom存在缩放影响其宽高数值
         在得到真实宽高后除以缩放比例即可得到正常宽高
         */
-        var base = document.getElementsByClassName('lf-base')[0];
+        var base = this.lf.graphModel.rootEl.querySelector('.lf-base');
         var bbox = base.getBoundingClientRect();
         var graphModel = this.lf.graphModel;
         var transformModel = graphModel.transformModel;

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/mini-map/index.d.ts

@@ -68,6 +68,7 @@ declare class MiniMap {
     }): void;
     __createViewPort(): void;
     __startDrag: (e: any) => void;
+    moveViewport: (top: any, left: any) => void;
     __drag: (e: any) => void;
     __drop: () => void;
 }

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

@@ -61,12 +61,17 @@ var MiniMap = /** @class */ (function () {
                 y: e.y,
             };
         };
-        this.__drag = function (e) {
+        this.moveViewport = function (top, left) {
             var viewStyle = _this.__viewport.style;
-            _this.__viewPortTop += e.y - _this.__startPosition.y;
-            _this.__viewPortLeft += e.x - _this.__startPosition.x;
+            _this.__viewPortTop = top;
+            _this.__viewPortLeft = left;
             viewStyle.top = _this.__viewPortTop + "px";
             viewStyle.left = _this.__viewPortLeft + "px";
+        };
+        this.__drag = function (e) {
+            var top = _this.__viewPortTop + e.y - _this.__startPosition.y;
+            var left = _this.__viewPortLeft + e.x - _this.__startPosition.x;
+            _this.moveViewport(top, left);
             _this.__startPosition = {
                 x: e.x,
                 y: e.y,
@@ -85,6 +90,21 @@ var MiniMap = /** @class */ (function () {
         this.__drop = function () {
             document.removeEventListener('mousemove', _this.__drag);
             document.removeEventListener('mouseup', _this.__drop);
+            var top = _this.__viewPortTop;
+            var left = _this.__viewPortLeft;
+            if (_this.__viewPortLeft > _this.__width) {
+                left = _this.__width - _this.__viewPortWidth;
+            }
+            if (_this.__viewPortTop > _this.__height) {
+                top = _this.__height - _this.__viewPortHeight;
+            }
+            if (_this.__viewPortLeft < -_this.__width) {
+                left = 0;
+            }
+            if (_this.__viewPortTop < -_this.__height) {
+                top = 0;
+            }
+            _this.moveViewport(top, left);
         };
         this.__lf = lf;
         this.__miniMapWidth = lf.graphModel.width;
@@ -308,7 +328,7 @@ var MiniMap = /** @class */ (function () {
         var graphRatio = (this.__lf.graphModel.width / this.__lf.graphModel.height);
         var realViewPortHeight = realViewPortWidth / graphRatio;
         this.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
-        this.__viewPortLeft = -TRANSLATE_X * scale;
+        this.__viewPortLeft = TRANSLATE_X > 0 ? 0 : -TRANSLATE_X * scale;
         this.__viewPortWidth = realViewPortWidth;
         this.__viewPortHeight = realViewPortHeight;
         viewStyle.top = this.__viewPortTop + "px";

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

@@ -31,6 +31,7 @@ var SelectionSelect = /** @class */ (function () {
         this.__drawOff = function () {
             document.removeEventListener('mousemove', _this.__draw);
             document.removeEventListener('mouseup', _this.__drawOff);
+            _this.wrapper.oncontextmenu = null;
             _this.__domContainer.removeChild(_this.wrapper);
             var _a = _this.startPoint, x = _a.x, y = _a.y;
             var _b = _this.endPoint, x1 = _b.x, y1 = _b.y;
@@ -72,6 +73,9 @@ var SelectionSelect = /** @class */ (function () {
             _this.endPoint = { x: x, y: y };
             var wrapper = document.createElement('div');
             wrapper.className = 'lf-selection-select';
+            wrapper.oncontextmenu = function prevent(ev) {
+                ev.preventDefault();
+            };
             wrapper.style.top = _this.startPoint.y + "px";
             wrapper.style.left = _this.startPoint.x + "px";
             domContainer.appendChild(wrapper);

package/es/index.d.ts

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

package/es/index.js

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

package/es/tools/snapshot/index.js

@@ -161,7 +161,7 @@ var Snapshot = /** @class */ (function () {
         真实dom存在缩放影响其宽高数值
         在得到真实宽高后除以缩放比例即可得到正常宽高
         */
-        var base = document.getElementsByClassName('lf-base')[0];
+        var base = this.lf.graphModel.rootEl.querySelector('.lf-base');
         var bbox = base.getBoundingClientRect();
         var graphModel = this.lf.graphModel;
         var transformModel = graphModel.transformModel;