@logicflow/extension 1.0.7-alpha.1 → 1.1.0-alpha.2

package/es/NodeResize/Node/HtmlResize.js

@@ -0,0 +1,70 @@
+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 { h, HtmlNode, HtmlNodeModel } from '@logicflow/core';
+import ControlGroup from '../Control/ControlGroup';
+var HtmlResizeModel = /** @class */ (function (_super) {
+    __extends(HtmlResizeModel, _super);
+    function HtmlResizeModel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.minWidth = 30;
+        _this.minHeight = 30;
+        _this.maxWidth = 2000;
+        _this.maxHeight = 2000;
+        return _this;
+    }
+    HtmlResizeModel.prototype.getOutlineStyle = function () {
+        var style = _super.prototype.getOutlineStyle.call(this);
+        style.stroke = 'none';
+        if (style.hover) {
+            style.hover.stroke = 'none';
+        }
+        return style;
+    };
+    HtmlResizeModel.prototype.setAttributes = function () {
+        // @ts-ignore
+        var nodeSize = this.properties.nodeSize;
+        if (nodeSize) {
+            this.width = nodeSize.width;
+            this.height = nodeSize.height;
+        }
+    };
+    return HtmlResizeModel;
+}(HtmlNodeModel));
+var HtmlResizeView = /** @class */ (function (_super) {
+    __extends(HtmlResizeView, _super);
+    function HtmlResizeView() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HtmlResizeView.prototype.getControlGroup = function () {
+        var _a = this.props, model = _a.model, graphModel = _a.graphModel;
+        return (h(ControlGroup, { model: model, graphModel: graphModel }));
+    };
+    // getResizeShape绘制图形，功能等同于基础矩形的getShape功能，可以通过复写此方法，进行节点自定义
+    HtmlResizeView.prototype.getResizeShape = function () {
+        return _super.prototype.getShape.call(this);
+    };
+    HtmlResizeView.prototype.getShape = function () {
+        var isSelected = this.props.model.isSelected;
+        return (h("g", null,
+            this.getResizeShape(),
+            isSelected ? this.getControlGroup() : ''));
+    };
+    return HtmlResizeView;
+}(HtmlNode));
+var HtmlResize = {
+    type: 'html',
+    view: HtmlResizeView,
+    model: HtmlResizeModel,
+};
+export default HtmlResize;

package/es/NodeResize/index.js

@@ -1,8 +1,9 @@
 import RectResize from './Node/RectResize';
 import EllipseResize from './Node/EllipseResize';
 import DiamondResize from './Node/DiamondResize';
+import HtmlResize from './Node/HtmlResize';
 var NodeResize = {
-    pluginName: 'node-resize',
+    pluginName: 'nodeResize',
     // 拖动step
     step: 0,
     // 边框和contol拖动点样式的设置
@@ -56,6 +57,11 @@ var NodeResize = {
             view: DiamondResize.view,
             model: DiamondResize.model,
         });
+        lf.register({
+            type: HtmlResize.type,
+            view: HtmlResize.view,
+            model: HtmlResize.model,
+        });
     },
 };
 export default NodeResize;

package/es/bpmn/index.js

@@ -22,7 +22,7 @@ var BpmnElement = /** @class */ (function () {
             lf.setDefaultEdgeType('bpmn:sequenceFlow');
         }
     }
-    BpmnElement.pluginName = 'BpmnElement';
+    BpmnElement.pluginName = 'bpmnElement';
     return BpmnElement;
 }());
 export { BpmnElement, StartEventModel, StartEventView, EndEventView, EndEventModel, ExclusiveGatewayView, ExclusiveGatewayModel, UserTaskView, UserTaskModel, ServiceTaskView, ServiceTaskModel, SequenceFlowView, SequenceFlowModel, };

package/es/bpmn-adapter/index.js

@@ -467,7 +467,7 @@ BpmnAdapter.shapeConfigMap.set(BpmnElements.USER, {
     height: UserTaskConfig.height,
 });
 var BpmnXmlAdapter = {
-    pluginName: 'bpmn-xml-adapter',
+    pluginName: 'bpmnXmlAdapter',
     install: function (lf) {
         lf.adapterIn = this.adapterXmlIn;
         lf.adapterOut = this.adapterXmlOut;

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

@@ -10,6 +10,17 @@ declare class ContextMenu {
         lf: any;
     });
     render(lf: any, container: any): void;
+    setContextMenuByType(type: any, menus: any): void;
+    /**
+     * 隐藏菜单
+     */
+    hideContextMenu(): void;
+    /**
+     * 显示指定元素菜单
+     * @param data 节点id、节点类型、菜单位置
+     */
+    showContextMenu(data: any): void;
+    setContextMenuItems(menus: any): void;
     /**
      * 获取新菜单位置
      */
@@ -18,7 +29,6 @@ declare class ContextMenu {
     private addNode;
     private showMenu;
     listenDelete: () => void;
-    private hideMenu;
 }
 export default ContextMenu;
 export { ContextMenu, };

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.setContextMenuByType(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,39 @@ var ContextMenu = /** @class */ (function () {
             _this.createContextMenu();
         });
         lf.on('blank:click', function () {
-            _this.hideMenu();
+            _this.hideContextMenu();
         });
     };
+    ContextMenu.prototype.setContextMenuByType = function (type, menus) {
+        this.menuTypeMap.set(type, menus);
+    };
+    /**
+     * 隐藏菜单
+     */
+    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 +143,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 +215,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 from '@logicflow/core';
 declare type ControlItem = {
     key: string;
     iconClass: string;
@@ -9,11 +8,11 @@ declare type ControlItem = {
     onMouseLeave?: Function;
 };
 declare class Control {
-    lf: LogicFlow;
+    private lf;
     static pluginName: string;
-    controlItems: ControlItem[];
-    domContainer: HTMLElement;
-    toolEl: HTMLElement;
+    private controlItems;
+    private domContainer;
+    private toolEl;
     constructor({ lf }: {
         lf: any;
     });

package/es/components/control/index.js

@@ -1,14 +1,3 @@
-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;
@@ -31,10 +20,8 @@ var __spread = (this && this.__spread) || function () {
 };
 var Control = /** @class */ (function () {
     function Control(_a) {
-        var _b;
         var _this = this;
         var lf = _a.lf;
-        var _c;
         this.controlItems = [
             {
                 key: 'zoom-out',
@@ -83,7 +70,6 @@ var Control = /** @class */ (function () {
             },
         ];
         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();

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

@@ -19,6 +19,7 @@ declare class DndPanel {
     });
     render(lf: any, domContainer: any): void;
     destroy(): void;
+    setPatternItems(shapeList: any): void;
     private createDndItem;
 }
 export { DndPanel, };

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

@@ -4,11 +4,7 @@ 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) {
@@ -32,6 +28,13 @@ var DndPanel = /** @class */ (function () {
             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');
@@ -62,7 +65,7 @@ var DndPanel = /** @class */ (function () {
         };
         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

@@ -31,10 +31,10 @@ var Menu = /** @class */ (function () {
         this.menuTypeMap = new Map();
         this.init();
         this.lf.setMenuConfig = function (config) {
-            _this.resetMenuItem(config);
+            _this.setMenuConfig(config);
         };
         this.lf.addMenuConfig = function (config) {
-            _this.addMenuItem(config);
+            _this.addMenuConfig(config);
         };
         this.lf.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 };