@logicflow/extension 1.0.6 → 1.0.7-alpha.0

package/cjs/components/control/index.js

@@ -1,4 +1,15 @@
 "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;
@@ -21,83 +32,96 @@ var __spread = (this && this.__spread) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Control = void 0;
-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 _b;
+        var _this = this;
+        var lf = _a.lf;
+        var _c;
+        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;
+        this.lf.extension = __assign(__assign({}, ((_c = this.lf.extension) !== null && _c !== void 0 ? _c : {})), (_b = {}, _b[Control.pluginName] = this, _b));
+    }
+    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;
@@ -105,13 +129,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;
                     });
@@ -124,7 +148,9 @@ var Control = {
         });
         controlTool.append.apply(controlTool, __spread(controlElements));
         return controlTool;
-    },
-};
+    };
+    Control.pluginName = 'control';
+    return Control;
+}());
 exports.Control = Control;
 exports.default = Control;

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

@@ -16,11 +16,12 @@ var DndPanel = /** @class */ (function () {
     }
     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) {
@@ -29,6 +30,11 @@ 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.createDndItem = function (shapeItem) {
         var _this = this;
         var el = document.createElement('div');
@@ -54,7 +60,7 @@ var DndPanel = /** @class */ (function () {
                 });
             }
             if (shapeItem.callback) {
-                shapeItem.callback();
+                shapeItem.callback(_this.lf, _this.domContainer);
             }
         };
         return el;

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

@@ -1,4 +1,4 @@
-import LogicFlow, { Extension } from '@logicflow/core';
+import LogicFlow from '@logicflow/core';
 declare type ControlItem = {
     key: string;
     iconClass: string;
@@ -8,16 +8,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 {
+    lf: LogicFlow;
+    static pluginName: string;
+    controlItems: ControlItem[];
+    domContainer: HTMLElement;
+    toolEl: HTMLElement;
+    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

@@ -1,3 +1,14 @@
+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;
@@ -18,83 +29,96 @@ 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 _b;
+        var _this = this;
+        var lf = _a.lf;
+        var _c;
+        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;
+        this.lf.extension = __assign(__assign({}, ((_c = this.lf.extension) !== null && _c !== void 0 ? _c : {})), (_b = {}, _b[Control.pluginName] = this, _b));
+    }
+    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 +126,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 +145,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,7 @@ declare class DndPanel {
         lf: any;
     });
     render(lf: any, domContainer: any): void;
+    destroy(): void;
     private createDndItem;
 }
 export { DndPanel, };

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

@@ -13,11 +13,12 @@ var DndPanel = /** @class */ (function () {
     }
     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 +27,11 @@ 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.createDndItem = function (shapeItem) {
         var _this = this;
         var el = document.createElement('div');
@@ -51,7 +57,7 @@ var DndPanel = /** @class */ (function () {
                 });
             }
             if (shapeItem.callback) {
-                shapeItem.callback();
+                shapeItem.callback(_this.lf, _this.domContainer);
             }
         };
         return el;