@logicflow/extension 1.0.6 → 1.1.0-alpha.0

package/es/components/context-menu/index.js

@@ -23,29 +23,23 @@ var ContextMenu = /** @class */ (function () {
         var lf = _a.lf;
         this.menuTypeMap = new Map();
         this.listenDelete = function () {
-            _this.hideMenu();
+            _this.hideContextMenu();
         };
         this.lf = lf;
         this.__menuDOM = document.createElement('div');
         this.__menuDOM.className = 'lf-inner-context';
-        // const commonMenu = [];
         this.menuTypeMap.set(COMMON_TYPE_KEY, []);
         this.lf.setContextMenuByType = function (type, menus) {
             _this.menuTypeMap.set(type, menus);
         };
         this.lf.setContextMenuItems = function (menus) {
-            _this.menuTypeMap.set(COMMON_TYPE_KEY, menus);
+            _this.setContextMenuItems(menus);
         };
         this.lf.showContextMenu = function (data) {
-            if (!data || !data.id) {
-                console.warn('请检查传入的参数');
-                return;
-            }
-            _this._activeData = data;
-            _this.createContextMenu();
+            _this.showContextMenu(data);
         };
         this.lf.hideContextMenu = function () {
-            _this.hideMenu();
+            _this.hideContextMenu();
         };
     }
     ContextMenu.prototype.render = function (lf, container) {
@@ -63,9 +57,36 @@ var ContextMenu = /** @class */ (function () {
             _this.createContextMenu();
         });
         lf.on('blank:click', function () {
-            _this.hideMenu();
+            _this.hideContextMenu();
         });
     };
+    /**
+     * 隐藏菜单
+     */
+    ContextMenu.prototype.hideContextMenu = function () {
+        this.__menuDOM.innerHTML = '';
+        this.__menuDOM.style.display = 'none';
+        if (this.isShow) {
+            this.container.removeChild(this.__menuDOM);
+        }
+        this.lf.off('node:delete,edge:delete,node:drag,graph:transform', this.listenDelete);
+        this.isShow = false;
+    };
+    /**
+     * 显示指定元素菜单
+     * @param data 节点id、节点类型、菜单位置
+     */
+    ContextMenu.prototype.showContextMenu = function (data) {
+        if (!data || !data.id) {
+            console.warn('请检查传入的参数');
+            return;
+        }
+        this._activeData = data;
+        this.createContextMenu();
+    };
+    ContextMenu.prototype.setContextMenuItems = function (menus) {
+        this.menuTypeMap.set(COMMON_TYPE_KEY, menus);
+    };
     /**
      * 获取新菜单位置
      */
@@ -119,7 +140,7 @@ var ContextMenu = /** @class */ (function () {
                 menuItem.className = menuItem.className + " " + item.className;
             }
             img.addEventListener('click', function () {
-                _this.hideMenu();
+                _this.hideContextMenu();
                 if (item.callback) {
                     item.callback(_this._activeData);
                 }
@@ -191,16 +212,7 @@ var ContextMenu = /** @class */ (function () {
         !this.isShow && this.lf.on('node:delete,edge:delete,node:drag,graph:transform', this.listenDelete);
         this.isShow = true;
     };
-    ContextMenu.prototype.hideMenu = function () {
-        this.__menuDOM.innerHTML = '';
-        this.__menuDOM.style.display = 'none';
-        if (this.isShow) {
-            this.container.removeChild(this.__menuDOM);
-        }
-        this.lf.off('node:delete,edge:delete,node:drag,graph:transform', this.listenDelete);
-        this.isShow = false;
-    };
-    ContextMenu.pluginName = 'ContextMenu';
+    ContextMenu.pluginName = 'contextMenu';
     return ContextMenu;
 }());
 export default ContextMenu;

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

@@ -1,4 +1,3 @@
-import LogicFlow, { Extension } from '@logicflow/core';
 declare type ControlItem = {
     key: string;
     iconClass: string;
@@ -8,16 +7,20 @@ declare type ControlItem = {
     onMouseEnter?: Function;
     onMouseLeave?: Function;
 };
-interface ControlPlugin extends Extension {
-    pluginName: string;
-    __lf?: LogicFlow;
-    __controlItems: ControlItem[];
-    addItem: (item: ControlItem) => void;
-    removeItem: (key: string) => ControlItem;
-    install: (lf: any) => void;
-    render: (lf: any, domContainer: any) => void;
-    __getControlTool: () => HTMLElement;
+declare class Control {
+    private lf;
+    static pluginName: string;
+    private controlItems;
+    private domContainer;
+    private toolEl;
+    constructor({ lf }: {
+        lf: any;
+    });
+    render(lf: any, domContainer: any): void;
+    destroy(): void;
+    addItem(item: any): void;
+    removeItem(key: any): ControlItem;
+    private getControlTool;
 }
-declare const Control: ControlPlugin;
 export default Control;
-export { Control, };
+export { Control };

package/es/components/control/index.js

@@ -18,83 +18,93 @@ var __spread = (this && this.__spread) || function () {
     for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
     return ar;
 };
-var Control = {
-    pluginName: 'control',
-    __lf: null,
-    __controlItems: [
-        {
-            key: 'zoom-out',
-            iconClass: 'lf-control-zoomOut',
-            title: '缩小流程图',
-            text: '缩小',
-            onClick: function () { Control.__lf.zoom(false); },
-        },
-        {
-            key: 'zoom-in',
-            iconClass: 'lf-control-zoomIn',
-            title: '放大流程图',
-            text: '放大',
-            onClick: function () { Control.__lf.zoom(true); },
-        },
-        {
-            key: 'reset',
-            iconClass: 'lf-control-fit',
-            title: '恢复流程原有尺寸',
-            text: '适应',
-            onClick: function () { Control.__lf.resetZoom(); },
-        },
-        {
-            key: 'undo',
-            iconClass: 'lf-control-undo',
-            title: '回到上一步',
-            text: '上一步',
-            onClick: function () { Control.__lf.undo(); },
-        },
-        {
-            key: 'redo',
-            iconClass: 'lf-control-redo',
-            title: '移到下一步',
-            text: '下一步',
-            onClick: function () { Control.__lf.redo(); },
-        },
-    ],
-    addItem: function (item) {
-        Control.__controlItems.push(item);
-    },
-    removeItem: function (key) {
-        var index = Control.__controlItems.findIndex(function (item) { return item.key === key; });
-        return Control.__controlItems.splice(index, 1)[0];
-    },
-    install: function () { },
-    render: function (lf, domContainer) {
-        Control.__lf = lf;
-        Control.__domContainer = domContainer;
-        Control.__tool = this.__getControlTool();
-        domContainer.appendChild(Control.__tool);
-    },
-    destroy: function () {
-        var _a;
-        try {
-            (_a = Control.__domContainer) === null || _a === void 0 ? void 0 : _a.removeChild(Control.__tool);
+var Control = /** @class */ (function () {
+    function Control(_a) {
+        var _this = this;
+        var lf = _a.lf;
+        this.controlItems = [
+            {
+                key: 'zoom-out',
+                iconClass: 'lf-control-zoomOut',
+                title: '缩小流程图',
+                text: '缩小',
+                onClick: function () {
+                    _this.lf.zoom(false);
+                },
+            },
+            {
+                key: 'zoom-in',
+                iconClass: 'lf-control-zoomIn',
+                title: '放大流程图',
+                text: '放大',
+                onClick: function () {
+                    _this.lf.zoom(true);
+                },
+            },
+            {
+                key: 'reset',
+                iconClass: 'lf-control-fit',
+                title: '恢复流程原有尺寸',
+                text: '适应',
+                onClick: function () {
+                    _this.lf.resetZoom();
+                },
+            },
+            {
+                key: 'undo',
+                iconClass: 'lf-control-undo',
+                title: '回到上一步',
+                text: '上一步',
+                onClick: function () {
+                    _this.lf.undo();
+                },
+            },
+            {
+                key: 'redo',
+                iconClass: 'lf-control-redo',
+                title: '移到下一步',
+                text: '下一步',
+                onClick: function () {
+                    _this.lf.redo();
+                },
+            },
+        ];
+        this.lf = lf;
+    }
+    Control.prototype.render = function (lf, domContainer) {
+        this.destroy();
+        var toolEl = this.getControlTool();
+        this.toolEl = toolEl;
+        domContainer.appendChild(toolEl);
+        this.domContainer = domContainer;
+    };
+    Control.prototype.destroy = function () {
+        if (this.domContainer && this.toolEl && this.domContainer.contains(this.toolEl)) {
+            this.domContainer.removeChild(this.toolEl);
         }
-        catch (e) {
-            console.warn('unexpect destory error', e);
-        } // todo: 目前某些情况存在此处报错情况，暂时这样处理。后续改成class写法就没有问题了。
-    },
-    __getControlTool: function () {
+    };
+    Control.prototype.addItem = function (item) {
+        this.controlItems.push(item);
+    };
+    Control.prototype.removeItem = function (key) {
+        var index = this.controlItems.findIndex(function (item) { return item.key === key; });
+        return this.controlItems.splice(index, 1)[0];
+    };
+    Control.prototype.getControlTool = function () {
+        var _this = this;
         var NORMAL = 'lf-control-item';
         var DISABLED = 'lf-control-item disabled';
         var controlTool = document.createElement('div');
         var controlElements = [];
         controlTool.className = 'lf-control';
-        Control.__controlItems.forEach(function (item) {
+        this.controlItems.forEach(function (item) {
             var itemContainer = document.createElement('div');
             var icon = document.createElement('i');
             var text = document.createElement('span');
             itemContainer.className = DISABLED;
-            item.onClick && (itemContainer.onclick = item.onClick.bind(null, Control.__lf));
-            item.onMouseEnter && (itemContainer.onmouseenter = item.onMouseEnter.bind(null, Control.__lf));
-            item.onMouseLeave && (itemContainer.onmouseleave = item.onMouseLeave.bind(null, Control.__lf));
+            item.onClick && (itemContainer.onclick = item.onClick.bind(null, _this.lf));
+            item.onMouseEnter && (itemContainer.onmouseenter = item.onMouseEnter.bind(null, _this.lf));
+            item.onMouseLeave && (itemContainer.onmouseleave = item.onMouseLeave.bind(null, _this.lf));
             icon.className = item.iconClass;
             text.className = 'lf-control-text';
             text.title = item.title;
@@ -102,13 +112,13 @@ var Control = {
             itemContainer.append(icon, text);
             switch (item.text) {
                 case '上一步':
-                    Control.__lf.on('history:change', function (_a) {
+                    _this.lf.on('history:change', function (_a) {
                         var undoAble = _a.data.undoAble;
                         itemContainer.className = undoAble ? NORMAL : DISABLED;
                     });
                     break;
                 case '下一步':
-                    Control.__lf.on('history:change', function (_a) {
+                    _this.lf.on('history:change', function (_a) {
                         var redoAble = _a.data.redoAble;
                         itemContainer.className = redoAble ? NORMAL : DISABLED;
                     });
@@ -121,7 +131,9 @@ var Control = {
         });
         controlTool.append.apply(controlTool, __spread(controlElements));
         return controlTool;
-    },
-};
+    };
+    Control.pluginName = 'control';
+    return Control;
+}());
 export default Control;
-export { Control, };
+export { Control };

package/es/components/dnd-panel/index.d.ts

@@ -3,9 +3,10 @@ declare type ShapeItem = {
     type?: string;
     text?: string;
     icon?: string;
+    label?: string;
     className?: string;
     properties?: Record<string, any>;
-    callback?: () => void;
+    callback?: (lf: LogicFlow, container: HTMLElement) => void;
 };
 declare class DndPanel {
     lf: LogicFlow;
@@ -17,6 +18,8 @@ declare class DndPanel {
         lf: any;
     });
     render(lf: any, domContainer: any): void;
+    destroy(): void;
+    setPatternItems(shapeList: any): void;
     private createDndItem;
 }
 export { DndPanel, };

package/es/components/dnd-panel/index.js

@@ -4,20 +4,17 @@ var DndPanel = /** @class */ (function () {
         var lf = _a.lf;
         this.lf = lf;
         this.lf.setPatternItems = function (shapeList) {
-            _this.shapeList = shapeList;
-            // 支持渲染后重新设置拖拽面板
-            if (_this.domContainer) {
-                _this.render(_this.lf, _this.domContainer);
-            }
+            _this.setPatternItems(shapeList);
         };
     }
     DndPanel.prototype.render = function (lf, domContainer) {
         var _this = this;
-        if (this.panelEl) {
-            domContainer.removeChild(this.panelEl);
-        }
-        if (!this.shapeList || this.shapeList.length === 0)
+        this.destroy();
+        if (!this.shapeList || this.shapeList.length === 0) {
+            // 首次render后失败后，后续调用setPatternItems支持渲染
+            this.domContainer = domContainer;
             return;
+        }
         this.panelEl = document.createElement('div');
         this.panelEl.className = 'lf-dndpanel';
         this.shapeList.forEach(function (shapeItem) {
@@ -26,6 +23,18 @@ var DndPanel = /** @class */ (function () {
         domContainer.appendChild(this.panelEl);
         this.domContainer = domContainer;
     };
+    DndPanel.prototype.destroy = function () {
+        if (this.domContainer && this.panelEl && this.domContainer.contains(this.panelEl)) {
+            this.domContainer.removeChild(this.panelEl);
+        }
+    };
+    DndPanel.prototype.setPatternItems = function (shapeList) {
+        this.shapeList = shapeList;
+        // 支持渲染后重新设置拖拽面板
+        if (this.domContainer) {
+            this.render(this.lf, this.domContainer);
+        }
+    };
     DndPanel.prototype.createDndItem = function (shapeItem) {
         var _this = this;
         var el = document.createElement('div');
@@ -51,12 +60,12 @@ var DndPanel = /** @class */ (function () {
                 });
             }
             if (shapeItem.callback) {
-                shapeItem.callback();
+                shapeItem.callback(_this.lf, _this.domContainer);
             }
         };
         return el;
     };
-    DndPanel.pluginName = 'DndPanel';
+    DndPanel.pluginName = 'dndPanel';
     return DndPanel;
 }());
 export { DndPanel, };

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

@@ -38,8 +38,8 @@ declare class Menu {
      * @return 菜单项 DOM
      */
     private __getMenuDom;
-    private resetMenuItem;
-    private addMenuItem;
+    setMenuConfig(config: MenuConfig): void;
+    addMenuConfig(config: MenuConfig): void;
     /**
      * @deprecated
      * 复写添加

package/es/components/menu/index.js

@@ -30,13 +30,13 @@ var Menu = /** @class */ (function () {
         this.lf = lf;
         this.menuTypeMap = new Map();
         this.init();
-        this.lf.setMenuConfig = function (config) {
-            _this.resetMenuItem(config);
+        this.lf.extension.menu.setMenuConfig = function (config) {
+            _this.setMenuConfig(config);
         };
-        this.lf.addMenuConfig = function (config) {
-            _this.addMenuItem(config);
+        this.lf.extension.menu.addMenuConfig = function (config) {
+            _this.addMenuConfig(config);
         };
-        this.lf.setMenuByType = function (config) {
+        this.lf.extension.menu.setMenuByType = function (config) {
             _this.setMenuByType(config);
         };
     }
@@ -247,7 +247,7 @@ var Menu = /** @class */ (function () {
         return menuList;
     };
     // 复写菜单
-    Menu.prototype.resetMenuItem = function (config) {
+    Menu.prototype.setMenuConfig = function (config) {
         if (!config) {
             return;
         }
@@ -262,7 +262,7 @@ var Menu = /** @class */ (function () {
             && this.menuTypeMap.set(DefalutGraphMenuKey, config.graphMenu ? config.graphMenu : []);
     };
     // 在默认菜单后面追加菜单项
-    Menu.prototype.addMenuItem = function (config) {
+    Menu.prototype.addMenuConfig = function (config) {
         if (!config) {
             return;
         }
@@ -286,14 +286,14 @@ var Menu = /** @class */ (function () {
      */
     Menu.prototype.changeMenuItem = function (type, config) {
         if (type === 'add')
-            this.addMenuItem(config);
+            this.addMenuConfig(config);
         else if (type === 'reset')
-            this.resetMenuItem(config);
+            this.setMenuConfig(config);
         else {
             throw new Error('The first parameter of changeMenuConfig should be \'add\' or \'reset\'');
         }
     };
-    Menu.pluginName = 'Menu';
+    Menu.pluginName = 'menu';
     return Menu;
 }());
 export default Menu;

package/es/components/mini-map/index.d.ts

@@ -1,4 +1,75 @@
-import { Extension } from '@logicflow/core';
-declare const MiniMap: Extension;
+declare class MiniMap {
+    static pluginName: string;
+    __lf: any;
+    __container: any;
+    __miniMapWrap: any;
+    __miniMapContainer: any;
+    __lfMap: any;
+    __viewport: any;
+    __width: number;
+    __height: number;
+    __miniMapWidth: number;
+    __miniMapHeight: number;
+    __viewPortTop: number;
+    __viewPortLeft: number;
+    __startPosition: any;
+    __viewPortScale: number;
+    __viewPortWidth: number;
+    __viewPortHeight: number;
+    __resetDataX: number;
+    __resetDataY: number;
+    __LogicFlow: any;
+    __isShow: boolean;
+    __disabledPlugins: string[];
+    constructor({ lf, LogicFlow }: {
+        lf: any;
+        LogicFlow: any;
+    });
+    render(lf: any, container: any): void;
+    init(option: any): void;
+    /**
+     * 显示mini map
+     */
+    show: (leftPosition: any, topPosition: any) => void;
+    /**
+     * 隐藏mini map
+     */
+    hide: () => void;
+    __init(): void;
+    __createMiniMap(left: any, top: any): void;
+    __removeMiniMap(): void;
+    /**
+     * 计算所有图形一起，占领的区域范围。
+     * @param data
+     */
+    __getBounds(data: any): {
+        left: number;
+        top: number;
+        bottom: number;
+        right: number;
+    };
+    /**
+     * 将负值的平移转换为正值。
+     * 保证渲染的时候，minimap能完全展示。
+     * 获取将画布所有元素平移到0，0开始时，所有节点数据
+     */
+    __resetData(data: any): any;
+    /**
+     * 显示导航
+     * 显示视口范围
+     * 1. 基于画布的范围比例，设置视口范围比例。宽度默认为导航宽度。
+     */
+    __setView(): void;
+    __setViewPort(scale: any, { left, right, top, bottom }: {
+        left: any;
+        right: any;
+        top: any;
+        bottom: any;
+    }): void;
+    __createViewPort(): void;
+    __startDrag: (e: any) => void;
+    __drag: (e: any) => void;
+    __drop: () => void;
+}
 export default MiniMap;
 export { MiniMap };