@logicflow/extension 1.0.6 → 1.1.0-alpha.0

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

@@ -9,48 +9,92 @@ var __values = (this && this.__values) || function(o) {
     };
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
-// interface MiniMapPlugin extends Extension {
-//   init: (option) => void;
-//   show: (leftPosition?: number, topPosition?: number) => void;
-//   hide: () => void;
-//   [x: string]: any;
-// }
-var MiniMap = {
-    pluginName: 'minimap',
-    __lf: null,
-    __container: null,
-    __miniMapWrap: null,
-    __miniMapContainer: null,
-    __lfMap: null,
-    __viewport: null,
-    __width: 150,
-    __height: 220,
-    __miniMapWidth: 450,
-    __miniMapHeight: 660,
-    __viewPortTop: 0,
-    __viewPortLeft: 0,
-    __startPosition: null,
-    __viewPortScale: 1,
-    __viewPortWidth: 150,
-    __viewPortHeight: 75,
-    __resetDataX: 0,
-    __resetDataY: 0,
-    __LogicFlow: null,
-    __disabledPlugins: ['minimap', 'control', 'selection-select'],
-    install: function (lf, LogicFlow) {
-        MiniMap.__lf = lf;
-        MiniMap.__miniMapWidth = lf.graphModel.width;
-        MiniMap.__miniMapHeight = (lf.graphModel.width * 220) / 150;
-        MiniMap.__LogicFlow = LogicFlow;
+var MiniMap = /** @class */ (function () {
+    function MiniMap(_a) {
+        var _this = this;
+        var lf = _a.lf, LogicFlow = _a.LogicFlow;
+        this.__lf = null;
+        this.__container = null;
+        this.__miniMapWrap = null;
+        this.__miniMapContainer = null;
+        this.__lfMap = null;
+        this.__viewport = null;
+        this.__width = 150;
+        this.__height = 220;
+        this.__miniMapWidth = 450;
+        this.__miniMapHeight = 660;
+        this.__viewPortTop = 0;
+        this.__viewPortLeft = 0;
+        this.__startPosition = null;
+        this.__viewPortScale = 1;
+        this.__viewPortWidth = 150;
+        this.__viewPortHeight = 75;
+        this.__resetDataX = 0;
+        this.__resetDataY = 0;
+        this.__LogicFlow = null;
+        this.__isShow = false;
+        this.__disabledPlugins = ['miniMap', 'control', 'selectionSelect'];
+        /**
+         * 显示mini map
+         */
+        this.show = function (leftPosition, topPosition) {
+            _this.__setView();
+            if (!_this.__isShow) {
+                _this.__createMiniMap(leftPosition, topPosition);
+            }
+            _this.__isShow = true;
+        };
+        /**
+         * 隐藏mini map
+         */
+        this.hide = function () {
+            if (_this.__isShow) {
+                _this.__removeMiniMap();
+            }
+            _this.__isShow = false;
+        };
+        this.__startDrag = function (e) {
+            document.addEventListener('mousemove', _this.__drag);
+            document.addEventListener('mouseup', _this.__drop);
+            _this.__startPosition = {
+                x: e.x,
+                y: e.y,
+            };
+        };
+        this.__drag = function (e) {
+            var viewStyle = _this.__viewport.style;
+            _this.__viewPortTop += e.y - _this.__startPosition.y;
+            _this.__viewPortLeft += e.x - _this.__startPosition.x;
+            viewStyle.top = _this.__viewPortTop + "px";
+            viewStyle.left = _this.__viewPortLeft + "px";
+            _this.__startPosition = {
+                x: e.x,
+                y: e.y,
+            };
+            var centerX = (_this.__viewPortLeft + _this.__viewPortWidth / 2)
+                / _this.__viewPortScale;
+            var centerY = (_this.__viewPortTop + _this.__viewPortHeight / 2)
+                / _this.__viewPortScale;
+            _this.__lf.focusOn({
+                coordinate: {
+                    x: centerX + _this.__resetDataX,
+                    y: centerY + _this.__resetDataY,
+                },
+            });
+        };
+        this.__drop = function () {
+            document.removeEventListener('mousemove', _this.__drag);
+            document.removeEventListener('mouseup', _this.__drop);
+        };
+        this.__lf = lf;
+        this.__miniMapWidth = lf.graphModel.width;
+        this.__miniMapHeight = (lf.graphModel.width * 220) / 150;
+        this.__LogicFlow = LogicFlow;
         this.__init();
-        // 避免多次install的时候, _isShow状态被修改了
-        MiniMap.__isShow = false;
-    },
-    init: function (option) {
-        this.__disabledPlugins = this.__disabledPlugins.concat(option.disabledPlugins || []);
-    },
-    render: function (lf, container) {
-        MiniMap.__container = container;
+    }
+    MiniMap.prototype.render = function (lf, container) {
+        var _this = this;
+        this.__container = container;
         var events = [
             'node:add',
             'node:delete',
@@ -60,34 +104,24 @@ var MiniMap = {
             'blank:drop',
         ];
         events.forEach(function (eventName) {
-            MiniMap.__lf.on(eventName, function () {
-                if (MiniMap.__isShow) {
-                    MiniMap.__setView();
+            _this.__lf.on(eventName, function () {
+                if (_this.__isShow) {
+                    _this.__setView();
                 }
             });
         });
-    },
-    show: function (leftPosition, topPosition) {
-        MiniMap.__setView();
-        if (!MiniMap.__isShow) {
-            MiniMap.__createMiniMap(leftPosition, topPosition);
-        }
-        MiniMap.__isShow = true;
-    },
-    hide: function () {
-        if (MiniMap.__isShow) {
-            MiniMap.__removeMiniMap();
-        }
-        MiniMap.__isShow = false;
-    },
-    __init: function () {
+    };
+    MiniMap.prototype.init = function (option) {
+        this.__disabledPlugins = this.__disabledPlugins.concat(option.disabledPlugins || []);
+    };
+    MiniMap.prototype.__init = function () {
         var miniMapWrap = document.createElement('div');
         miniMapWrap.className = 'lf-mini-map-graph';
-        miniMapWrap.style.width = MiniMap.__width + "px";
-        miniMapWrap.style.height = MiniMap.__height + "px";
-        MiniMap.__lfMap = new MiniMap.__LogicFlow({
-            width: MiniMap.__lf.graphModel.width,
-            height: (MiniMap.__lf.graphModel.width * 220) / 150,
+        miniMapWrap.style.width = this.__width + "px";
+        miniMapWrap.style.height = this.__height + "px";
+        this.__lfMap = new this.__LogicFlow({
+            width: this.__lf.graphModel.width,
+            height: (this.__lf.graphModel.width * 220) / 150,
             container: miniMapWrap,
             isSilentMode: true,
             stopZoomGraph: true,
@@ -95,17 +129,17 @@ var MiniMap = {
             stopMoveGraph: true,
             hideAnchors: true,
             hoverOutline: false,
-            disabledPlugins: MiniMap.__disabledPlugins,
+            disabledPlugins: this.__disabledPlugins,
         });
         // minimap中禁用adapter。
-        MiniMap.__lfMap.adapterIn = function (a) { return a; };
-        MiniMap.__lfMap.adapterOut = function (a) { return a; };
-        MiniMap.__miniMapWrap = miniMapWrap;
-        MiniMap.__createViewPort();
-    },
-    __createMiniMap: function (left, top) {
+        this.__lfMap.adapterIn = function (a) { return a; };
+        this.__lfMap.adapterOut = function (a) { return a; };
+        this.__miniMapWrap = miniMapWrap;
+        this.__createViewPort();
+    };
+    MiniMap.prototype.__createMiniMap = function (left, top) {
         var miniMapContainer = document.createElement('div');
-        var miniMapWrap = MiniMap.__miniMapWrap;
+        var miniMapWrap = this.__miniMapWrap;
         miniMapContainer.appendChild(miniMapWrap);
         if (typeof left !== 'undefined' && typeof top !== 'undefined') {
             miniMapContainer.style.left = left + "px";
@@ -113,30 +147,30 @@ var MiniMap = {
         }
         miniMapContainer.style.position = 'absolute';
         miniMapContainer.className = 'lf-mini-map';
-        MiniMap.__container.appendChild(miniMapContainer);
-        MiniMap.__miniMapWrap.appendChild(MiniMap.__viewport);
+        this.__container.appendChild(miniMapContainer);
+        this.__miniMapWrap.appendChild(this.__viewport);
         var header = document.createElement('div');
         header.className = 'lf-mini-map-header';
         header.innerText = '导航';
         miniMapContainer.appendChild(header);
         var close = document.createElement('span');
         close.className = 'lf-mini-map-close';
-        close.addEventListener('click', MiniMap.hide);
+        close.addEventListener('click', this.hide);
         miniMapContainer.appendChild(close);
-        MiniMap.__miniMapContainer = miniMapContainer;
-    },
-    __removeMiniMap: function () {
-        MiniMap.__container.removeChild(MiniMap.__miniMapContainer);
-    },
+        this.__miniMapContainer = miniMapContainer;
+    };
+    MiniMap.prototype.__removeMiniMap = function () {
+        this.__container.removeChild(this.__miniMapContainer);
+    };
     /**
      * 计算所有图形一起，占领的区域范围。
      * @param data
      */
-    __getBounds: function (data) {
+    MiniMap.prototype.__getBounds = function (data) {
         var left = 0;
-        var right = MiniMap.__miniMapWidth;
+        var right = this.__miniMapWidth;
         var top = 0;
-        var bottom = MiniMap.__miniMapHeight;
+        var bottom = this.__miniMapHeight;
         var nodes = data.nodes;
         if (nodes && nodes.length > 0) {
             // 因为获取的节点不知道真实的宽高，这里需要补充一点数值
@@ -158,13 +192,13 @@ var MiniMap = {
             bottom: bottom,
             right: right,
         };
-    },
+    };
     /**
      * 将负值的平移转换为正值。
      * 保证渲染的时候，minimap能完全展示。
      * 获取将画布所有元素平移到0，0开始时，所有节点数据
      */
-    __resetData: function (data) {
+    MiniMap.prototype.__resetData = function (data) {
         var nodes = data.nodes, edges = data.edges;
         var left = 0;
         var top = 0;
@@ -178,8 +212,8 @@ var MiniMap = {
                 top = nodeTop < top ? nodeTop : top;
             });
             if (left < 0 || top < 0) {
-                MiniMap.__resetDataX = left;
-                MiniMap.__resetDataY = top;
+                this.__resetDataX = left;
+                this.__resetDataY = top;
                 nodes.forEach(function (node) {
                     node.x = node.x - left;
                     node.y = node.y - top;
@@ -211,27 +245,27 @@ var MiniMap = {
             }
         }
         return data;
-    },
+    };
     /**
      * 显示导航
      * 显示视口范围
      * 1. 基于画布的范围比例，设置视口范围比例。宽度默认为导航宽度。
      */
-    __setView: function () {
+    MiniMap.prototype.__setView = function () {
         var e_1, _a;
         // 1. 获取到图中所有的节点中的位置，将其偏移到原点开始（避免节点位置为负的时候无法展示问题）。
-        var data = MiniMap.__resetData(MiniMap.__lf.getGraphRawData());
+        var data = this.__resetData(this.__lf.getGraphRawData());
         // 由于随时都会有新节点注册进来，需要同步将注册的
-        var viewMap = MiniMap.__lf.viewMap;
-        var modelMap = MiniMap.__lf.graphModel.modelMap;
-        var minimapViewMap = MiniMap.__lfMap.viewMap;
+        var viewMap = this.__lf.viewMap;
+        var modelMap = this.__lf.graphModel.modelMap;
+        var minimapViewMap = this.__lfMap.viewMap;
         try {
             // todo: no-restricted-syntax
             for (var _b = __values(viewMap.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var key = _c.value;
                 if (!minimapViewMap.has(key)) {
-                    MiniMap.__lfMap.setView(key, viewMap.get(key));
-                    MiniMap.__lfMap.graphModel.modelMap.set(key, modelMap.get(key));
+                    this.__lfMap.setView(key, viewMap.get(key));
+                    this.__lfMap.graphModel.modelMap.set(key, modelMap.get(key));
                 }
             }
         }
@@ -242,91 +276,60 @@ var MiniMap = {
             }
             finally { if (e_1) throw e_1.error; }
         }
-        MiniMap.__lfMap.render(data);
+        this.__lfMap.render(data);
         // 2. 将偏移后的数据渲染到minimap画布上
         // 3. 计算出所有节点在一起的边界。
-        var _d = MiniMap.__getBounds(data), left = _d.left, top = _d.top, right = _d.right, bottom = _d.bottom;
+        var _d = this.__getBounds(data), left = _d.left, top = _d.top, right = _d.right, bottom = _d.bottom;
         // 4. 计算所有节点的边界与minimap看板的边界的比例.
-        var realWidthScale = MiniMap.__width / (right - left);
-        var realHeightScale = MiniMap.__height / (bottom - top);
+        var realWidthScale = this.__width / (right - left);
+        var realHeightScale = this.__height / (bottom - top);
         // 5. 取比例最小的值，将渲染的画布缩小对应比例。
-        var innerStyle = MiniMap.__miniMapWrap.firstChild.style;
+        var innerStyle = this.__miniMapWrap.firstChild.style;
         var scale = Math.min(realWidthScale, realHeightScale);
         innerStyle.transform = "matrix(" + scale + ", 0, 0, " + scale + ", 0, 0)";
         innerStyle.transformOrigin = 'left top';
         innerStyle.height = bottom - Math.min(top, 0) + "px";
         innerStyle.width = right - Math.min(left, 0) + "px";
-        MiniMap.__viewPortScale = scale;
-        MiniMap.__setViewPort(scale, {
+        this.__viewPortScale = scale;
+        this.__setViewPort(scale, {
             left: left,
             top: top,
             right: right,
             bottom: bottom,
         });
-    },
+    };
     // 设置视口
-    __setViewPort: function (scale, _a) {
-        var left = _a.left, right = _a.right;
-        var viewStyle = MiniMap.__viewport.style;
-        viewStyle.width = MiniMap.__width - 4 + "px";
-        viewStyle.height = (MiniMap.__width - 4) / (MiniMap.__lf.graphModel.width / MiniMap.__lf.graphModel.height) + "px";
+    MiniMap.prototype.__setViewPort = function (scale, _a) {
+        var left = _a.left, right = _a.right, top = _a.top, bottom = _a.bottom;
+        var viewStyle = this.__viewport.style;
+        viewStyle.width = this.__width - 4 + "px";
+        viewStyle.height = (this.__width - 4) / (this.__lf.graphModel.width / this.__lf.graphModel.height) + "px";
         // top
-        var _b = MiniMap.__lf.getTransform(), TRANSLATE_X = _b.TRANSLATE_X, TRANSLATE_Y = _b.TRANSLATE_Y;
+        var _b = this.__lf.getTransform(), TRANSLATE_X = _b.TRANSLATE_X, TRANSLATE_Y = _b.TRANSLATE_Y;
         var realWidth = right - left;
         // 视口实际宽 = 视口默认宽 / (所有元素一起占据的真实宽 / 绘布宽)
-        var realViewPortWidth = (MiniMap.__width - 4) / (realWidth / MiniMap.__lf.graphModel.width);
+        var realViewPortWidth = (this.__width - 4) / (realWidth / this.__lf.graphModel.width);
         // 视口实际高 = 视口实际宽 / (绘布宽 / 绘布高)
-        var graphRatio = (MiniMap.__lf.graphModel.width / MiniMap.__lf.graphModel.height);
+        var graphRatio = (this.__lf.graphModel.width / this.__lf.graphModel.height);
         var realViewPortHeight = realViewPortWidth / graphRatio;
-        MiniMap.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
-        MiniMap.__viewPortLeft = -TRANSLATE_X * scale;
-        MiniMap.__viewPortWidth = realViewPortWidth;
-        MiniMap.__viewPortHeight = realViewPortHeight;
-        viewStyle.top = MiniMap.__viewPortTop + "px";
-        viewStyle.left = MiniMap.__viewPortLeft + "px";
+        this.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
+        this.__viewPortLeft = -TRANSLATE_X * scale;
+        this.__viewPortWidth = realViewPortWidth;
+        this.__viewPortHeight = realViewPortHeight;
+        viewStyle.top = this.__viewPortTop + "px";
+        viewStyle.left = this.__viewPortLeft + "px";
         viewStyle.width = realViewPortWidth + "px";
         viewStyle.height = realViewPortHeight + "px";
-    },
+    };
     // 预览视窗
-    __createViewPort: function () {
+    MiniMap.prototype.__createViewPort = function () {
         var div = document.createElement('div');
         div.className = 'lf-minimap-viewport';
-        div.addEventListener('mousedown', MiniMap.__startDrag);
-        MiniMap.__viewport = div;
-    },
-    __startDrag: function (e) {
-        document.addEventListener('mousemove', MiniMap.__drag);
-        document.addEventListener('mouseup', MiniMap.__drop);
-        MiniMap.__startPosition = {
-            x: e.x,
-            y: e.y,
-        };
-    },
-    __drag: function (e) {
-        var viewStyle = MiniMap.__viewport.style;
-        MiniMap.__viewPortTop += e.y - MiniMap.__startPosition.y;
-        MiniMap.__viewPortLeft += e.x - MiniMap.__startPosition.x;
-        viewStyle.top = MiniMap.__viewPortTop + "px";
-        viewStyle.left = MiniMap.__viewPortLeft + "px";
-        MiniMap.__startPosition = {
-            x: e.x,
-            y: e.y,
-        };
-        var centerX = (MiniMap.__viewPortLeft + MiniMap.__viewPortWidth / 2)
-            / MiniMap.__viewPortScale;
-        var centerY = (MiniMap.__viewPortTop + MiniMap.__viewPortHeight / 2)
-            / MiniMap.__viewPortScale;
-        MiniMap.__lf.focusOn({
-            coordinate: {
-                x: centerX + MiniMap.__resetDataX,
-                y: centerY + MiniMap.__resetDataY,
-            },
-        });
-    },
-    __drop: function () {
-        document.removeEventListener('mousemove', MiniMap.__drag);
-        document.removeEventListener('mouseup', MiniMap.__drop);
-    },
-};
+        div.addEventListener('mousedown', this.__startDrag);
+        this.__viewport = div;
+    };
+    MiniMap.pluginName = 'miniMap';
+    return MiniMap;
+}());
 export default MiniMap;
 export { MiniMap };

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

@@ -18,6 +18,14 @@ declare class SelectionSelect {
         lf: any;
     });
     render(lf: any, domContainer: any): void;
+    /**
+     * 开启选区
+     */
+    openSelectionSelect(): void;
+    /**
+     * 关闭选区
+     */
+    closeSelectionSelect(): void;
     __draw: (ev: any) => void;
     __drawOff: () => void;
     open(): void;

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

@@ -45,21 +45,10 @@ var SelectionSelect = /** @class */ (function () {
         var stopMoveGraph = lf.getEditConfig().stopMoveGraph;
         this.isDefalutStopMoveGraph = stopMoveGraph;
         lf.openSelectionSelect = function () {
-            if (!stopMoveGraph) {
-                _this.isDefalutStopMoveGraph = false;
-                lf.updateEditConfig({
-                    stopMoveGraph: true,
-                });
-            }
-            _this.open();
+            _this.openSelectionSelect();
         };
         lf.closeSelectionSelect = function () {
-            if (!_this.isDefalutStopMoveGraph) {
-                lf.updateEditConfig({
-                    stopMoveGraph: false,
-                });
-            }
-            _this.close();
+            _this.closeSelectionSelect();
         };
     }
     SelectionSelect.prototype.render = function (lf, domContainer) {
@@ -85,13 +74,37 @@ var SelectionSelect = /** @class */ (function () {
             document.addEventListener('mouseup', _this.__drawOff);
         });
     };
+    /**
+     * 开启选区
+     */
+    SelectionSelect.prototype.openSelectionSelect = function () {
+        var stopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
+        if (!stopMoveGraph) {
+            this.isDefalutStopMoveGraph = false;
+            this.lf.updateEditConfig({
+                stopMoveGraph: true,
+            });
+        }
+        this.open();
+    };
+    /**
+     * 关闭选区
+     */
+    SelectionSelect.prototype.closeSelectionSelect = function () {
+        if (!this.isDefalutStopMoveGraph) {
+            this.lf.updateEditConfig({
+                stopMoveGraph: false,
+            });
+        }
+        this.close();
+    };
     SelectionSelect.prototype.open = function () {
         this.__disabled = false;
     };
     SelectionSelect.prototype.close = function () {
         this.__disabled = true;
     };
-    SelectionSelect.pluginName = 'selection-select';
+    SelectionSelect.pluginName = 'selectionSelect';
     return SelectionSelect;
 }());
 export { SelectionSelect };

package/es/index.d.ts

@@ -14,3 +14,5 @@ export * from './materials/group';
 export * from './NodeResize';
 export * from './tools/flow-path';
 export * from './tools/auto-layout';
+export * from './bpmn-adapter/xml2json';
+export * from './bpmn-adapter/json2xml';

package/es/index.js

@@ -15,3 +15,5 @@ export * from './materials/group';
 export * from './NodeResize';
 export * from './tools/flow-path';
 export * from './tools/auto-layout';
+export * from './bpmn-adapter/xml2json';
+export * from './bpmn-adapter/json2xml';

package/es/insert-node-in-polyline/index.js

@@ -20,7 +20,7 @@ var __spread = (this && this.__spread) || function () {
 };
 import { isNodeInSegement } from './edge';
 var InsertNodeInPolyline = {
-    pluginName: 'insert-node-in-polyline',
+    pluginName: 'insertNodeInPolyline',
     _lf: null,
     dndAdd: true,
     dropAdd: true,

package/es/materials/curved-edge/index.js

@@ -78,7 +78,7 @@ var CurvedEdgeView = /** @class */ (function (_super) {
             strokeDashArray: strokeDashArray,
         });
     };
-    CurvedEdgeView.extendKey = 'CurvedEdge';
+    CurvedEdgeView.extendKey = 'curvedEdge';
     return CurvedEdgeView;
 }(PolylineEdge));
 var CurvedEdgeModel = /** @class */ (function (_super) {

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

@@ -206,7 +206,7 @@ var FlowPath = /** @class */ (function () {
         var length = elements.length;
         return elements.indexOf(elements[length - 1]) !== length - 1 ? 1 : 0;
     };
-    FlowPath.pluginName = 'FlowPath';
+    FlowPath.pluginName = 'flowPath';
     return FlowPath;
 }());
 export { FlowPath, };

package/es/turbo-adapter/index.js

@@ -152,7 +152,7 @@ export function toLogicflowData(data) {
     return lfData;
 }
 var TurboAdapter = {
-    pluginName: 'TurboAdapter',
+    pluginName: 'turboAdapter',
     install: function (lf) {
         lf.adapterIn = this.adapterIn;
         lf.adapterOut = this.adapterOut;