@logicflow/extension 1.2.27 → 2.0.0-beta.0

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

@@ -9,216 +9,282 @@ var __values = (this && this.__values) || function(o) {
     };
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
-import { throttle } from 'lodash-es';
 var MiniMap = /** @class */ (function () {
     function MiniMap(_a) {
-        var _this = this;
         var lf = _a.lf, LogicFlow = _a.LogicFlow, options = _a.options;
-        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.leftPosition = undefined;
-        this.topPosition = undefined;
-        this.rightPosition = undefined;
-        this.bottomPosition = undefined;
-        this.miniMapWidth = 450;
-        this.miniMapHeight = 660;
+        var _this = this;
+        /**
+         * 小地图中画布容器的宽度
+         */
+        this.width = 200;
+        /**
+         * 小地图中画布容器的高度
+         */
+        this.height = 150;
+        /**
+         * 小地图中画布的缩放比例
+         */
+        this.scale = 1;
+        /**
+         * 小地图中画布的水平位移
+         */
+        this.translateX = 0;
+        /**
+         * 小地图中画布的垂直位移
+         */
+        this.translateY = 0;
+        /**
+         * 在小地图的画布中是否渲染边
+         */
+        this.showEdge = false;
+        /**
+         * 预览视窗左上角在主画布的y坐标
+         */
         this.viewPortTop = 0;
+        /**
+         * 预览视窗左上角在主画布的x坐标
+         */
         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.isShowHeader = true;
-        this.isShowCloseIcon = true;
-        this.dragging = false;
+        /**
+         * 是否显示小地图的标题栏
+         */
+        this.isShowHeader = false;
+        /**
+         * 是否显示关闭按钮
+         */
+        this.isShowCloseIcon = false;
+        /**
+         * 小地图标题栏的文本内容
+         */
+        this.headerTitle = '导航';
+        /**
+         * 小地图的logicFlow实例需要禁用的插件
+         */
         this.disabledPlugins = ['miniMap', 'control', 'selectionSelect'];
+        this.render = function (_, container) {
+            _this.container = container;
+            _this.lf.on('history:change', function () {
+                if (_this.isShow) {
+                    _this.setView();
+                }
+            });
+            _this.lf.on('graph:transform', function () {
+                if (_this.isShow) {
+                    _this.setView(false);
+                }
+            });
+        };
         /**
-         * 显示mini map
-        */
-        this.show = function (leftPosition, topPosition) {
-            _this.setView();
+         * 显示小地图
+         * @param left 相对画布的左边距
+         * @param top 相对画布的上边距
+         */
+        this.show = function (left, top) {
             if (!_this.isShow) {
-                _this.createMiniMap(leftPosition, topPosition);
+                _this.createMiniMap(left, top);
+                _this.setView();
             }
             _this.isShow = true;
         };
         /**
-         * 隐藏mini map
+         * 隐藏小地图
          */
         this.hide = function () {
             if (_this.isShow) {
                 _this.removeMiniMap();
+                _this.lf.emit('miniMap:close', {});
             }
             _this.isShow = false;
         };
+        /**
+         * 更新小地图在画布中的位置
+         * @param {MiniMapPosition} position
+         */
+        this.updatePosition = function (position) {
+            if (typeof position === 'object') {
+                if (position.left !== undefined || position.right !== undefined) {
+                    _this.leftPosition = position.left;
+                    _this.rightPosition = position.right;
+                }
+                if (position.top !== undefined || position.bottom !== undefined) {
+                    _this.topPosition = position.top;
+                    _this.bottomPosition = position.bottom;
+                }
+            }
+            else {
+                switch (position) {
+                    case 'left-top':
+                        _this.leftPosition = 0;
+                        _this.rightPosition = undefined;
+                        _this.topPosition = 0;
+                        _this.bottomPosition = undefined;
+                        break;
+                    case 'right-top':
+                        _this.leftPosition = undefined;
+                        _this.rightPosition = 0;
+                        _this.topPosition = 0;
+                        _this.bottomPosition = undefined;
+                        break;
+                    case 'left-bottom':
+                        _this.leftPosition = 0;
+                        _this.rightPosition = undefined;
+                        _this.topPosition = undefined;
+                        _this.bottomPosition = 0;
+                        break;
+                    case 'right-bottom':
+                        _this.leftPosition = undefined;
+                        _this.rightPosition = 0;
+                        _this.topPosition = undefined;
+                        _this.bottomPosition = 0;
+                        break;
+                }
+            }
+            _this.updateMiniMapPosition();
+        };
+        /**
+         * 重置主画布的缩放和平移
+         */
         this.reset = function () {
             _this.lf.resetTranslate();
             _this.lf.resetZoom();
-            _this.hide();
-            _this.show();
+        };
+        /**
+         * 设置小地图的画布中是否绘制边
+         * @param {boolean} showEdge
+         */
+        this.setShowEdge = function (showEdge) {
+            if (_this.showEdge !== showEdge) {
+                _this.showEdge = showEdge;
+                _this.setView();
+            }
         };
         this.startDrag = function (e) {
             document.addEventListener('mousemove', _this.drag);
             document.addEventListener('mouseup', _this.drop);
-            _this.startPosition = {
-                x: e.x,
-                y: e.y,
-            };
-        };
-        this.moveViewport = function (top, left) {
-            var viewStyle = _this.viewport.style;
-            _this.viewPortTop = top;
-            _this.viewPortLeft = left;
-            viewStyle.top = _this.viewPortTop + "px";
-            viewStyle.left = _this.viewPortLeft + "px";
+            var x = e.x, y = e.y;
+            _this.startPosition = { x: x, y: y };
         };
+        /**
+         * 拖拽预览视窗过程中，更新主画布视口
+         */
         this.drag = function (e) {
-            _this.dragging = true;
-            var top = _this.viewPortTop + e.y - _this.startPosition.y;
-            var left = _this.viewPortLeft + e.x - _this.startPosition.x;
-            _this.moveViewport(top, left);
-            _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;
+            var x = e.x, y = e.y;
+            var translateX = (x - _this.startPosition.x) / _this.scale;
+            var translateY = (y - _this.startPosition.y) / _this.scale;
+            var centerX = _this.viewPortLeft + translateX + _this.viewPortWidth / _this.scale / 2;
+            var centerY = _this.viewPortTop + translateY + _this.viewPortHeight / _this.scale / 2;
+            // 每移动一次预览视窗都需要更新拖拽的起始点
+            _this.startPosition = { x: x, y: y };
             _this.lf.focusOn({
                 coordinate: {
-                    x: centerX + _this.resetDataX,
-                    y: centerY + _this.resetDataY,
+                    x: centerX,
+                    y: centerY,
                 },
             });
         };
+        /**
+         * 拖拽预览视窗结束，移除拖拽事件
+         */
         this.drop = function () {
             document.removeEventListener('mousemove', _this.drag);
             document.removeEventListener('mouseup', _this.drop);
-            var top = _this.viewPortTop;
-            var left = _this.viewPortLeft;
-            if (_this.viewPortLeft > _this.width) {
-                left = _this.width - _this.viewPortWidth;
-            }
-            if (_this.viewPortTop > _this.height) {
-                top = _this.height - _this.viewPortHeight;
-            }
-            if (_this.viewPortLeft < -_this.width) {
-                left = 0;
-            }
-            if (_this.viewPortTop < -_this.height) {
-                top = 0;
-            }
-            _this.moveViewport(top, left);
         };
+        /**
+         * 点击小地图中非预览视窗的区域时，移动主画布视口聚焦于点击位置
+         */
         this.mapClick = function (e) {
-            if (_this.dragging) {
-                _this.dragging = false;
-            }
-            else {
-                var layerX = e.layerX, layerY = e.layerY;
-                var ViewPortCenterX = layerX;
-                var ViewPortCenterY = layerY;
-                var graphData = _this.lf.getGraphRawData();
-                var _a = _this.getBounds(graphData), left = _a.left, top_1 = _a.top;
-                var resetGraphX = left + ViewPortCenterX / _this.viewPortScale;
-                var resetGraphY = top_1 + ViewPortCenterY / _this.viewPortScale;
-                _this.lf.focusOn({ coordinate: { x: resetGraphX, y: resetGraphY } });
-            }
+            var offsetX = e.offsetX, offsetY = e.offsetY;
+            var centerX = _this.translateX + offsetX / _this.scale;
+            var centerY = _this.translateY + offsetY / _this.scale;
+            _this.lf.focusOn({
+                coordinate: {
+                    x: centerX,
+                    y: centerY,
+                },
+            });
         };
         this.lf = lf;
+        this.LFCtor = LogicFlow;
         if (options && options.MiniMap) {
-            this.setOption(options);
+            this.setOption(options.MiniMap);
         }
-        this.miniMapWidth = lf.graphModel.width;
-        this.miniMapHeight = (lf.graphModel.width * this.height) / this.width;
-        this.LogicFlow = LogicFlow;
+        this.viewPortWidth = lf.graphModel.width;
+        this.viewPortHeight = lf.graphModel.height;
+        var boundsInit = {
+            left: 0,
+            right: this.viewPortWidth,
+            top: 0,
+            bottom: this.viewPortHeight,
+        };
+        this.bounds = boundsInit;
+        this.elementAreaBounds = boundsInit;
+        this.viewPortBounds = boundsInit;
         this.initMiniMap();
     }
-    MiniMap.prototype.render = function (lf, container) {
-        var _this = this;
-        this.container = container;
-        this.lf.on('history:change', function () {
-            if (_this.isShow) {
-                _this.setView();
-            }
-        });
-        this.lf.on('graph:transform', throttle(function () {
-            // 小地图已展示，并且没有拖拽小地图视口
-            if (_this.isShow && !_this.dragging) {
-                _this.setView();
-            }
-        }, 300));
-    };
-    MiniMap.prototype.init = function (option) {
-        this.disabledPlugins = this.disabledPlugins.concat(option.disabledPlugins || []);
-    };
+    /**
+     * 初始化小地图的配置
+     * @param options
+     */
     MiniMap.prototype.setOption = function (options) {
-        var _a = options.MiniMap, _b = _a.width, width = _b === void 0 ? 150 : _b, _c = _a.height, height = _c === void 0 ? 220 : _c, _d = _a.isShowHeader, isShowHeader = _d === void 0 ? true : _d, _e = _a.isShowCloseIcon, isShowCloseIcon = _e === void 0 ? true : _e, _f = _a.leftPosition, leftPosition = _f === void 0 ? 0 : _f, _g = _a.topPosition, topPosition = _g === void 0 ? 0 : _g, rightPosition = _a.rightPosition, bottomPosition = _a.bottomPosition;
+        var _a = options.width, width = _a === void 0 ? 150 : _a, _b = options.height, height = _b === void 0 ? 220 : _b, _c = options.showEdge, showEdge = _c === void 0 ? false : _c, _d = options.isShowHeader, isShowHeader = _d === void 0 ? false : _d, _e = options.isShowCloseIcon, isShowCloseIcon = _e === void 0 ? false : _e, leftPosition = options.leftPosition, topPosition = options.topPosition, _f = options.rightPosition, rightPosition = _f === void 0 ? 0 : _f, _g = options.bottomPosition, bottomPosition = _g === void 0 ? 0 : _g, _h = options.headerTitle, headerTitle = _h === void 0 ? '导航' : _h;
         this.width = width;
         this.height = height;
+        this.showEdge = showEdge;
         this.isShowHeader = isShowHeader;
         this.isShowCloseIcon = isShowCloseIcon;
-        this.viewPortWidth = width;
         this.leftPosition = leftPosition;
+        this.rightPosition = leftPosition !== undefined ? undefined : rightPosition;
         this.topPosition = topPosition;
-        this.rightPosition = rightPosition;
-        this.bottomPosition = bottomPosition;
+        this.bottomPosition = topPosition !== undefined ? undefined : bottomPosition;
+        this.headerTitle = headerTitle;
     };
+    /**
+     * 初始化小地图的 LogicFlow 实例
+     */
     MiniMap.prototype.initMiniMap = function () {
         var miniMapWrap = document.createElement('div');
         miniMapWrap.className = 'lf-mini-map-graph';
-        miniMapWrap.style.width = this.width + 4 + "px";
-        miniMapWrap.style.height = this.height + "px";
-        this.lfMap = new this.LogicFlow({
+        miniMapWrap.style.width = "".concat(this.width, "px");
+        miniMapWrap.style.height = "".concat(this.height, "px");
+        this.lfMap = new this.LFCtor({
             container: miniMapWrap,
+            grid: false,
             isSilentMode: true,
             stopZoomGraph: true,
             stopScrollGraph: true,
-            stopMoveGraph: true,
-            hideAnchors: true,
-            hoverOutline: false,
+            // 禁用画布移动会导致 transformModel.translate 无效，所以这里不禁用
+            stopMoveGraph: false,
+            history: false,
+            snapline: false,
             disabledPlugins: this.disabledPlugins,
         });
         // minimap中禁用adapter。
-        this.lfMap.adapterIn = function (a) { return a; };
-        this.lfMap.adapterOut = function (a) { return a; };
+        // this.lfMap.adapterIn = (a) => a
+        // this.lfMap.adapterOut = (a) => a
         this.miniMapWrap = miniMapWrap;
         this.createViewPort();
         miniMapWrap.addEventListener('click', this.mapClick);
     };
     MiniMap.prototype.createMiniMap = function (left, top) {
+        var _a;
         var miniMapContainer = document.createElement('div');
+        this.miniMapContainer = miniMapContainer;
         miniMapContainer.appendChild(this.miniMapWrap);
-        if (typeof left !== 'undefined' || typeof top !== 'undefined') {
-            miniMapContainer.style.left = (left || 0) + "px";
-            miniMapContainer.style.top = (top || 0) + "px";
-        }
-        else {
-            if (typeof this.rightPosition !== 'undefined') {
-                miniMapContainer.style.right = this.rightPosition + "px";
-            }
-            else if (typeof this.leftPosition !== 'undefined') {
-                miniMapContainer.style.left = this.leftPosition + "px";
-            }
-            if (typeof this.bottomPosition !== 'undefined') {
-                miniMapContainer.style.bottom = this.bottomPosition + "px";
-            }
-            else if (typeof this.topPosition !== 'undefined') {
-                miniMapContainer.style.top = this.topPosition + "px";
-            }
-        }
         miniMapContainer.style.position = 'absolute';
+        if (left !== undefined || top !== undefined) {
+            this.leftPosition = left || 0;
+            this.topPosition = top || 0;
+            this.rightPosition = undefined;
+            this.bottomPosition = undefined;
+        }
+        this.updateMiniMapPosition();
         miniMapContainer.className = 'lf-mini-map';
         if (!this.isShowCloseIcon) {
             miniMapContainer.classList.add('lf-mini-map-no-close-icon');
@@ -226,209 +292,225 @@ var MiniMap = /** @class */ (function () {
         if (!this.isShowHeader) {
             miniMapContainer.classList.add('lf-mini-map-no-header');
         }
-        this.container.appendChild(miniMapContainer);
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.appendChild(miniMapContainer);
         this.miniMapWrap.appendChild(this.viewport);
         var header = document.createElement('div');
         header.className = 'lf-mini-map-header';
-        header.innerText = MiniMap.headerTitle;
+        header.innerText = this.headerTitle;
         miniMapContainer.appendChild(header);
         var close = document.createElement('span');
         close.className = 'lf-mini-map-close';
         close.addEventListener('click', this.hide);
         miniMapContainer.appendChild(close);
-        this.miniMapContainer = miniMapContainer;
+    };
+    MiniMap.prototype.updateMiniMapPosition = function () {
+        if (this.miniMapContainer) {
+            var style = this.miniMapContainer.style;
+            if (this.rightPosition !== undefined) {
+                style.right = "".concat(this.rightPosition, "px");
+                style.left = '';
+            }
+            else {
+                style.left = "".concat(this.leftPosition, "px");
+                style.right = '';
+            }
+            if (this.bottomPosition !== undefined) {
+                style.bottom = "".concat(this.bottomPosition, "px");
+                style.top = '';
+            }
+            else {
+                style.top = "".concat(this.topPosition, "px");
+                style.bottom = '';
+            }
+        }
     };
     MiniMap.prototype.removeMiniMap = function () {
-        this.container.removeChild(this.miniMapContainer);
+        var _a;
+        if (this.miniMapContainer) {
+            (_a = this.container) === null || _a === void 0 ? void 0 : _a.removeChild(this.miniMapContainer);
+        }
+    };
+    /**
+     * 更新小地图的区域范围
+     * @param data
+     */
+    MiniMap.prototype.updateBounds = function (data) {
+        if (data) {
+            this.updateElementAreaBounds(data);
+        }
+        this.updateViewPortBounds();
+        this.bounds = {
+            left: Math.min(this.elementAreaBounds.left, this.viewPortBounds.left),
+            right: Math.max(this.elementAreaBounds.right, this.viewPortBounds.right),
+            top: Math.min(this.elementAreaBounds.top, this.viewPortBounds.top),
+            bottom: Math.max(this.elementAreaBounds.bottom, this.viewPortBounds.bottom),
+        };
     };
     /**
      * 计算所有图形一起，占领的区域范围。
      * @param data
      */
-    MiniMap.prototype.getBounds = function (data) {
-        var left = 0;
-        var right = this.miniMapWidth;
-        var top = 0;
-        var bottom = this.miniMapHeight;
+    MiniMap.prototype.updateElementAreaBounds = function (data) {
+        var elementAreaBounds = {
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+        };
         var nodes = data.nodes;
         if (nodes && nodes.length > 0) {
-            // 因为获取的节点不知道真实的宽高，这里需要补充一点数值
-            nodes.forEach(function (_a) {
-                var x = _a.x, y = _a.y, _b = _a.width, width = _b === void 0 ? 200 : _b, _c = _a.height, height = _c === void 0 ? 200 : _c;
+            // TODO: 后续能获取节点高宽信息后，需要更新这里的计算方式
+            nodes.forEach(function (node) {
+                var _a, _b;
+                var x = node.x, y = node.y;
+                var width = (_a = node.width) !== null && _a !== void 0 ? _a : 200;
+                var height = (_b = node.height) !== null && _b !== void 0 ? _b : 200;
                 var nodeLeft = x - width / 2;
                 var nodeRight = x + width / 2;
                 var nodeTop = y - height / 2;
                 var nodeBottom = y + height / 2;
-                left = nodeLeft < left ? nodeLeft : left;
-                right = nodeRight > right ? nodeRight : right;
-                top = nodeTop < top ? nodeTop : top;
-                bottom = nodeBottom > bottom ? nodeBottom : bottom;
+                elementAreaBounds.left = Math.min(nodeLeft, elementAreaBounds.left);
+                elementAreaBounds.right = Math.max(nodeRight, elementAreaBounds.right);
+                elementAreaBounds.top = Math.min(nodeTop, elementAreaBounds.top);
+                elementAreaBounds.bottom = Math.max(nodeBottom, elementAreaBounds.bottom);
             });
         }
-        return {
-            left: left,
-            top: top,
-            bottom: bottom,
-            right: right,
+        this.elementAreaBounds = elementAreaBounds;
+    };
+    /**
+     * 获取视口范围
+     */
+    MiniMap.prototype.updateViewPortBounds = function () {
+        var _a = this.lf.getTransform(), TRANSLATE_X = _a.TRANSLATE_X, TRANSLATE_Y = _a.TRANSLATE_Y, SCALE_X = _a.SCALE_X, SCALE_Y = _a.SCALE_Y;
+        var _b = this.lf.graphModel, width = _b.width, height = _b.height;
+        this.viewPortBounds = {
+            left: -TRANSLATE_X / SCALE_X,
+            right: (-TRANSLATE_X + width) / SCALE_X,
+            top: -TRANSLATE_Y / SCALE_Y,
+            bottom: (-TRANSLATE_Y + height) / SCALE_Y,
         };
     };
     /**
-     * 将负值的平移转换为正值。
-     * 保证渲染的时候，minimap能完全展示。
-     * 获取将画布所有元素平移到0，0开始时，所有节点数据
+     * 删除部分内容以简化渲染，包括边与节点文本
      */
     MiniMap.prototype.resetData = function (data) {
         var nodes = data.nodes, edges = data.edges;
-        var left = 0;
-        var top = 0;
-        if (nodes && nodes.length > 0) {
-            // 因为获取的节点不知道真实的宽高，这里需要补充一点数值
-            nodes.forEach(function (_a) {
-                var x = _a.x, y = _a.y, _b = _a.width, width = _b === void 0 ? 200 : _b, _c = _a.height, height = _c === void 0 ? 200 : _c;
-                var nodeLeft = x - width / 2;
-                var nodeTop = y - height / 2;
-                left = nodeLeft < left ? nodeLeft : left;
-                top = nodeTop < top ? nodeTop : top;
+        nodes.forEach(function (node) {
+            // 删除节点文本
+            node.text = undefined;
+        });
+        if (this.showEdge) {
+            edges.forEach(function (edge) {
+                // 删除边上的文本
+                edge.text = undefined;
             });
-            if (left < 0 || top < 0) {
-                this.resetDataX = left;
-                this.resetDataY = top;
-                nodes.forEach(function (node) {
-                    node.x = node.x - left;
-                    node.y = node.y - top;
-                    if (node.text) {
-                        node.text.x = node.text.x - left;
-                        node.text.y = node.text.y - top;
-                    }
-                });
-                edges.forEach(function (edge) {
-                    if (edge.startPoint) {
-                        edge.startPoint.x = edge.startPoint.x - left;
-                        edge.startPoint.y = edge.startPoint.y - top;
-                    }
-                    if (edge.endPoint) {
-                        edge.endPoint.x = edge.endPoint.x - left;
-                        edge.endPoint.y = edge.endPoint.y - top;
-                    }
-                    if (edge.text) {
-                        edge.text.x = edge.text.x - left;
-                        edge.text.y = edge.text.y - top;
-                    }
-                    if (edge.pointsList) {
-                        edge.pointsList.forEach(function (point) {
-                            point.x = point.x - left;
-                            point.y = point.y - top;
-                        });
-                    }
-                });
-            }
         }
-        return data;
+        return {
+            nodes: nodes,
+            // 是否渲染边
+            edges: this.showEdge ? edges : [],
+        };
     };
     /**
-     * 显示导航
-     * 显示视口范围
-     * 1. 基于画布的范围比例，设置视口范围比例。宽度默认为导航宽度。
+     * MiniMap视图重绘
+     * @param reRender 是否重新渲染画布元素
      */
-    MiniMap.prototype.setView = function () {
+    // TODO: 确定 render 函数是否为增量渲染，如果是则不需要 reRender 参数做限制
+    MiniMap.prototype.setView = function (reRender) {
         var e_1, _a;
-        // 1. 获取到图中所有的节点中的位置，将其偏移到原点开始（避免节点位置为负的时候无法展示问题）。
-        var graphData = this.lf.getGraphRawData();
-        var data = this.resetData(graphData);
-        // 由于随时都会有新节点注册进来，需要同步将注册的
-        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)) {
-                    this.lfMap.setView(key, viewMap.get(key));
-                    this.lfMap.graphModel.modelMap.set(key, modelMap.get(key));
+        if (reRender === void 0) { reRender = true; }
+        if (reRender) {
+            // 1. 获取到图中所有的节点中的位置
+            var graphData = this.lf.getGraphRawData();
+            var data = this.resetData(graphData);
+            // 由于随时都会有新节点注册进来，需要同步将注册的
+            var viewMap = this.lf.viewMap;
+            var modelMap = this.lf.graphModel.modelMap;
+            var minimapViewMap = this.lfMap.viewMap;
+            try {
+                for (var _b = __values(viewMap.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var key = _c.value;
+                    if (!minimapViewMap.has(key)) {
+                        this.lfMap.register({
+                            type: key,
+                            view: viewMap.get(key),
+                            model: modelMap.get(key),
+                        });
+                    }
                 }
             }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
-            finally { if (e_1) throw e_1.error; }
+            // 2. 将数据渲染到小地图的画布上
+            this.lfMap.render(data);
+            // 3. 更新所有节点与当前视口构成的区域范围
+            this.updateBounds(data);
         }
-        this.lfMap.render(data);
-        // 2. 将偏移后的数据渲染到minimap画布上
-        // 3. 计算出所有节点在一起的边界。
-        var _d = this.getBounds(data), left = _d.left, top = _d.top, right = _d.right, bottom = _d.bottom;
-        // 4. 计算所有节点的边界与minimap看板的边界的比例.
-        var realWidthScale = this.width / (right - left);
-        var realHeightScale = this.height / (bottom - top);
-        // 5. 取比例最小的值，将渲染的画布缩小对应比例。
-        var innerStyle = this.miniMapWrap.firstChild.style;
+        else {
+            this.updateBounds();
+        }
+        // 4. 计算小地图画布相对小地图容器的缩放比例，并移动小地图的视图保证元素全部可见且整体居中。
+        var _d = this.bounds, left = _d.left, top = _d.top, right = _d.right, bottom = _d.bottom;
+        var realWidth = right - left;
+        var realHeight = bottom - top;
+        var realWidthScale = this.width / realWidth;
+        var realHeightScale = this.height / realHeight;
         var scale = Math.min(realWidthScale, realHeightScale);
-        innerStyle.pointerEvents = 'none';
-        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";
-        this.viewPortScale = scale;
-        this.setViewPort(scale, {
-            left: left,
-            top: top,
-            right: right,
-            bottom: bottom,
-        });
+        this.scale = scale;
+        var translateX = left - (this.width / scale - realWidth) / 2;
+        var translateY = top - (this.height / scale - realHeight) / 2;
+        this.lfMap.graphModel.transformModel.translate(-translateX + this.translateX, -translateY + this.translateY);
+        this.translateX = translateX;
+        this.translateY = translateY;
+        // 5. 将小地图的画布缩放对应的比例。
+        if (this.miniMapWrap.firstChild) {
+            var innerStyle = this.miniMapWrap.firstChild.style;
+            innerStyle.pointerEvents = 'none';
+            innerStyle.transform = "matrix(".concat(scale, ", 0, 0, ").concat(scale, ", 0, 0)");
+            innerStyle.transformOrigin = 'left top';
+            innerStyle.height = "".concat(this.height / scale, "px");
+            innerStyle.width = "".concat(this.width / scale, "px");
+            this.updateViewPort();
+        }
     };
-    // 设置视口
-    MiniMap.prototype.setViewPort = function (scale, _a) {
-        var left = _a.left, right = _a.right, top = _a.top, bottom = _a.bottom;
+    /**
+     * 更新预览视窗的位置
+     */
+    MiniMap.prototype.updateViewPort = function () {
         var viewStyle = this.viewport.style;
-        viewStyle.width = this.viewPortWidth + "px";
-        viewStyle.height = (this.viewPortWidth) / (this.lf.graphModel.width / this.lf.graphModel.height) + "px";
-        var _b = this.lf.getTransform(), TRANSLATE_X = _b.TRANSLATE_X, TRANSLATE_Y = _b.TRANSLATE_Y, SCALE_X = _b.SCALE_X, SCALE_Y = _b.SCALE_Y;
-        var realWidth = right - left;
-        // 视口宽 = 小地图宽 / (所有元素一起占据的真实宽 / 绘布宽)
-        var viewPortWidth = (this.width) / (realWidth / this.lf.graphModel.width);
-        // 实际视口宽 = 小地图宽 * 占宽度比例
-        var realViewPortWidth = this.width * (viewPortWidth / this.width);
-        var graphRatio = (this.lf.graphModel.width / this.lf.graphModel.height);
-        // 视口实际高 = 视口实际宽 / (绘布宽 / 绘布高)
-        var realViewPortHeight = realViewPortWidth / graphRatio;
-        var graphData = this.lf.getGraphRawData();
-        var _c = this.getBounds(graphData), graphLeft = _c.left, graphTop = _c.top;
-        var viewportLeft = graphLeft;
-        var viewportTop = graphTop;
-        viewportLeft += TRANSLATE_X / SCALE_X;
-        viewportTop += TRANSLATE_Y / SCALE_Y;
-        this.viewPortTop = viewportTop > 0 ? 0 : (-viewportTop * scale);
-        this.viewPortLeft = viewportLeft > 0 ? 0 : (-viewportLeft * scale);
-        this.viewPortWidth = realViewPortWidth;
-        this.viewPortHeight = realViewPortHeight;
-        viewStyle.top = this.viewPortTop + "px";
-        viewStyle.left = this.viewPortLeft + "px";
-        viewStyle.width = realViewPortWidth / SCALE_X + "px";
-        viewStyle.height = realViewPortHeight / SCALE_Y + "px";
+        var _a = this.lf.getTransform(), TRANSLATE_X = _a.TRANSLATE_X, TRANSLATE_Y = _a.TRANSLATE_Y, SCALE_X = _a.SCALE_X, SCALE_Y = _a.SCALE_Y;
+        var _b = this.lf.graphModel, width = _b.width, height = _b.height;
+        this.viewPortLeft = -TRANSLATE_X / SCALE_X;
+        this.viewPortTop = -TRANSLATE_Y / SCALE_Y;
+        this.viewPortWidth = (width / SCALE_X) * this.scale;
+        this.viewPortHeight = (height / SCALE_Y) * this.scale;
+        viewStyle.width = "".concat(this.viewPortWidth, "px");
+        viewStyle.height = "".concat(this.viewPortHeight, "px");
+        viewStyle.left = "".concat((this.viewPortLeft - this.translateX) * this.scale, "px");
+        viewStyle.top = "".concat((this.viewPortTop - this.translateY) * this.scale, "px");
     };
-    // 预览视窗
+    /**
+     * 创建预览视窗元素
+     */
     MiniMap.prototype.createViewPort = function () {
         var div = document.createElement('div');
         div.className = 'lf-minimap-viewport';
+        // 拖拽预览视窗，主画布视口跟随移动
         div.addEventListener('mousedown', this.startDrag);
+        // 禁止预览视窗的点击事件冒泡
+        div.addEventListener('click', function (e) {
+            e.stopPropagation();
+        });
         this.viewport = div;
     };
     MiniMap.pluginName = 'miniMap';
-    MiniMap.width = 150;
-    MiniMap.height = 220;
-    MiniMap.viewPortWidth = 150;
-    MiniMap.viewPortHeight = 75;
-    MiniMap.isShowHeader = true;
-    MiniMap.isShowCloseIcon = true;
-    MiniMap.leftPosition = 0;
-    MiniMap.topPosition = 0;
-    MiniMap.rightPosition = null;
-    MiniMap.bottomPosition = null;
-    MiniMap.headerTitle = '导航';
     return MiniMap;
 }());
-export default MiniMap;
 export { MiniMap };
+export default MiniMap;
+//# sourceMappingURL=index.js.map