MiniMap插件

v0.2.11+

用于帮助快速开发小地图功能，小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。

注册

import MindMap from 'simple-mind-map'
import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
// import MiniMap from 'simple-mind-map/src/MiniMap.js' v0.6.0以下版本使用该路径

MindMap.usePlugin(MiniMap)

注册完且实例化MindMap后可通过mindMap.miniMap获取到该实例。

方法

calculationMiniMap(boxWidth, boxHeight)

计算小地图的渲染数据，该函数内会调用getMiniMap()方法，所以一般使用该函数即可。

boxWidth：小地图容器的宽度

boxHeight：小地图容器的高度

函数返回内容：

{
      getImgUrl,// v0.8.0+，一个异步函数，你可以调用该函数，传递一个回调函数，回调函数可以接收一个参数，代表图片类型的小地图，你可以通过img标签进行渲染
      svgHTML, // 小地图html，推荐使用getImgUrl方式获取图片类型的小地图，减少页面DOM数量，优化性能
      viewBoxStyle, // 视图框的位置信息
      miniMapBoxScale, // 视图框的缩放值
      miniMapBoxLeft, // 视图框的left值
      miniMapBoxTop, // 视图框的top值
}

小地图思路：

1.准备一个容器元素container，定位不为static

如果使用的是富文本编辑模式，那么最好给container内部的元素去除一下默认样式，否则可能会出现节点内文本偏移的问题：

.container * {
  margin: 0;
  padding: 0;
}

2.在container内创建一个小地图容器元素miniMapContainer，绝对定位

3.在container内创建一个视口框元素viewBoxContainer，绝对定位，设置边框样式，过渡属性（可选）

4.监听data_change和view_data_change事件，在该事件内调用calculationMiniMap方法获取计算数据，然后将svgHTML渲染到miniMapContainer元素内，并且设置miniMapContainer元素的样式：

:style="{
    transform: `scale(${miniMapBoxScale})`,
    left: miniMapBoxLeft + 'px',
    top: miniMapBoxTop + 'px',
}"

5.将viewBoxStyle对象设置为viewBoxContainer元素的样式

到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置

6.监听container元素的mousedown、mousemove事件，并且监听window的mouseup事件（如果将mouseup绑定到container元素上，那么鼠标移出container元素整个拖拽行为无法停止），分别调用下面即将介绍的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果

7.在v0.10.2+版本，支持拖拽小地图内的视口框来实现同步拖拽画布，实现该特性可以监听viewBoxContainer元素的mousedown（需要阻止冒泡，否则会触发container元素的mousedown事件）、mousemove事件，分别调用小地图插件实例的onViewBoxMousedown和onViewBoxMousemove方法，同时需要监听mini_map_view_box_position_change事件来实时更新viewBoxContainer元素。

详细教程请参考如何渲染一个小地图。

onMousedown(e)

小地图鼠标按下事件执行该函数。

e：事件对象

onMousemove(e, sensitivityNum = 5)

小地图鼠标移动事件执行该函数。

e：事件对象

sensitivityNum：拖动灵敏度，灵敏度越大，在小地图上拖动相同距离时实际上的画布拖动距离就越大

onMouseup()

小地图鼠标松开事件执行该函数。

onViewBoxMousedown(e)

v0.10.2+

视口框元素鼠标按下事件调用该方法。

onViewBoxMousemove(e)

v0.10.2+

视口框元素鼠标移动事件调用该方法。