@logicflow/extension 1.0.7 → 1.1.0-alpha.3

package/cjs/materials/group/index.js

@@ -20,13 +20,26 @@ var __spread = (this && this.__spread) || function () {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Group = void 0;
+exports.GroupNode = exports.Group = void 0;
 var GroupNode_1 = require("./GroupNode");
+exports.GroupNode = GroupNode_1.default;
 var Group = /** @class */ (function () {
     function Group(_a) {
         var _this = this;
         var lf = _a.lf;
         this.nodeGroupMap = new Map();
+        this.graphRendered = function (data) {
+            // 如果节点
+            if (data && data.nodes) {
+                data.nodes.forEach(function (node) {
+                    if (node.children) {
+                        node.children.forEach(function (nodeId) {
+                            _this.nodeGroupMap.set(nodeId, node.id);
+                        });
+                    }
+                });
+            }
+        };
         this.appendNodeToGrop = function (_a) {
             var data = _a.data;
             // 如果这个节点之前已经在group中了，则将其从之前的group中移除
@@ -48,14 +61,19 @@ var Group = /** @class */ (function () {
         };
         this.setActiveGroup = function (_a) {
             var data = _a.data;
-            if (_this.activeGroup) {
-                _this.activeGroup.setAllowAppendChild(false);
-                _this.activeGroup = undefined;
-            }
-            var bounds = _this.lf.getNodeModelById(data.id).getBounds();
-            _this.activeGroup = _this.getGroup(bounds);
-            if (_this.activeGroup && _this.activeGroup.id !== data.id) {
-                _this.activeGroup.setAllowAppendChild(true);
+            var nodeModel = _this.lf.getNodeModelById(data.id);
+            if (nodeModel.isGroup)
+                return;
+            var bounds = nodeModel.getBounds();
+            var newGroup = _this.getGroup(bounds);
+            if (newGroup || newGroup !== _this.activeGroup) {
+                if (_this.activeGroup) {
+                    _this.activeGroup.setAllowAppendChild(false);
+                }
+                if (newGroup) {
+                    _this.activeGroup = newGroup;
+                    _this.activeGroup.setAllowAppendChild(true);
+                }
             }
         };
         lf.register(GroupNode_1.default);
@@ -82,6 +100,7 @@ var Group = /** @class */ (function () {
         lf.on('node:drop', this.appendNodeToGrop);
         lf.on('node:dnd-move', this.setActiveGroup);
         lf.on('node:drag', this.setActiveGroup);
+        lf.on('graph:rendered', this.graphRendered);
     }
     Group.prototype.getGroups = function () {
         var groups = [];

package/cjs/style/index.css

@@ -22,8 +22,9 @@
   background: #efefef;
 }
 .lf-control-item.disabled {
-  filter: opacity(0.6);
-  cursor: not-allowed;
+  filter: opacity(0.5);
+  /* cursor: not-allowed; */
+  pointer-events: none;
 }
 .lf-control-item.disabled:hover {
   background: #fff;

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

@@ -209,7 +209,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;
 }());
 exports.FlowPath = FlowPath;

package/cjs/turbo-adapter/index.js

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

package/es/NodeResize/Control/Control.js

@@ -268,7 +268,8 @@ var Control = /** @class */ (function (_super) {
         _this.onDraging = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
             var modelType = _this.nodeModel.modelType;
-            if (modelType === ModelType.RECT_NODE) {
+            // html和矩形的计算方式是一样的，共用一个方法
+            if (modelType === ModelType.RECT_NODE || modelType === ModelType.HTML_NODE) {
                 _this.updateRect({ deltaX: deltaX, deltaY: deltaY });
             }
             else if (modelType === ModelType.ELLIPSE_NODE) {

package/es/NodeResize/Control/Util.d.ts

@@ -3,6 +3,7 @@ export declare enum ModelType {
     CIRCLE_NODE = "circle-node",
     POLYGON_NODE = "polygon-node",
     RECT_NODE = "rect-node",
+    HTML_NODE = "html-node",
     TEXT_NODE = "text-node",
     ELLIPSE_NODE = "ellipse-node",
     DIAMOND_NODE = "diamond-node",

package/es/NodeResize/Control/Util.js

@@ -4,6 +4,7 @@ export var ModelType;
     ModelType["CIRCLE_NODE"] = "circle-node";
     ModelType["POLYGON_NODE"] = "polygon-node";
     ModelType["RECT_NODE"] = "rect-node";
+    ModelType["HTML_NODE"] = "html-node";
     ModelType["TEXT_NODE"] = "text-node";
     ModelType["ELLIPSE_NODE"] = "ellipse-node";
     ModelType["DIAMOND_NODE"] = "diamond-node";

package/es/NodeResize/Node/EllipseResize.js

@@ -11,20 +11,8 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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);
-};
 import { h, EllipseNode, EllipseNodeModel } from '@logicflow/core';
 import ControlGroup from '../Control/ControlGroup';
-import Ellipse from '../BasicShape/Ellipse';
 var EllipseResizeModel = /** @class */ (function (_super) {
     __extends(EllipseResizeModel, _super);
     function EllipseResizeModel(data, graphModel) {
@@ -66,11 +54,7 @@ var EllipseResizeView = /** @class */ (function (_super) {
     };
     // getResizeShape绘制图形，功能等同于基础椭圆的getShape功能，可以通过复写此方法，进行节点自定义
     EllipseResizeView.prototype.getResizeShape = function () {
-        var model = this.props.model;
-        var rx = model.rx, ry = model.ry, x = model.x, y = model.y;
-        var style = model.getNodeStyle();
-        return (h("g", null,
-            h(Ellipse, __assign({}, style, { rx: rx, ry: ry, x: x, y: y }))));
+        return _super.prototype.getShape.call(this);
     };
     EllipseResizeView.prototype.getShape = function () {
         var model = this.props.model;

package/es/NodeResize/Node/HtmlResize.d.ts

@@ -0,0 +1,20 @@
+import { h, HtmlNode, HtmlNodeModel } from '@logicflow/core';
+declare class HtmlResizeModel extends HtmlNodeModel {
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
+    setAttributes(): void;
+}
+declare class HtmlResizeView extends HtmlNode {
+    getControlGroup(): h.JSX.Element;
+    getResizeShape(): h.JSX.Element;
+    getShape(): h.JSX.Element;
+}
+declare const HtmlResize: {
+    type: string;
+    view: typeof HtmlResizeView;
+    model: typeof HtmlResizeModel;
+};
+export default HtmlResize;

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 };