4.Listen for data_change and view_data_change events, and in this event call
the calculationMiniMap method to get calculation data, then render svgHTML
-to the miniMapContainer element and set its style:
miniMapContainer element and set miniMapContainer element style:
:style="{
- transform: `scale(${svgBoxScale})`,
- left: svgBoxLeft + 'px',
- top: svgBoxTop + 'px',
+ transform: `scale(${miniMapBoxScale})`,
+ left: miniMapBoxLeft + 'px',
+ top: miniMapBoxTop + 'px',
}"
5.Set the viewBoxStyle object as the style of the viewBoxContainer element
编写中。。。
- +simple-mind-map目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）。
可以在实例化simple-mind-map时通过选项指定使用的结构：
new MindMap({
+ // ...
+ layout: 'logicalStructure'
+})
+也可以动态切换结构：
+mindMap.setLayout('organizationStructure')
+获取当前使用的结构可以使用getLayout方法：
const layout = mindMap.getLayout()
+编写中。。。
+思维导图本质就是一颗树，所以你可以使用树组件来完成大纲的显示。
+可以监听data_change事件来获取当前最新的思维导图数据：
mindMap.on('data_change', (data) => {
+ // data数据是不带节点对象的纯数据
+ // 如果你需要操作节点对象，可以使用mindMap.renderer.renderTree
+ console.log(data, mindMap.renderer.renderTree)
+})
+通常点击了大纲的某个节点，会将画布定位到该节点并激活该节点，这可以这么做：
+const node = data._node
+mindMap.renderer.moveNodeToCenter(node)
+node.active()
+当在大纲树上编辑了某个节点的内容，需要同步到思维导图树上：
+data._node.setText('xxx')
+要插入兄弟节点或子节点可以这么操作：
+mindMap.execCommand('INSERT_NODE', false)
+mindMap.execCommand('INSERT_CHILD_NODE', false)
+编写中。。。
+simple-mind-map常用操作都支持快捷键方式使用，目前所有的快捷键列表如下：
[
+ {
+ type: '节点操作',
+ list: [
+ {
+ name: '插入下级节点',
+ value: 'Tab'
+ },
+ {
+ name: '插入同级节点',
+ value: 'Enter'
+ },
+ {
+ name: '上移节点',
+ value: 'Ctrl + ↑'
+ },
+ {
+ name: '下移节点',
+ value: 'Ctrl + ↓'
+ },
+ {
+ name: '插入概要',
+ value: 'Ctrl + S'
+ },
+ {
+ name: '展开/收起节点',
+ value: '/'
+ },
+ {
+ name: '删除节点',
+ value: 'Delete | Backspace'
+ },
+ {
+ name: '复制节点',
+ value: 'Ctrl + C'
+ },
+ {
+ name: '剪切节点',
+ value: 'Ctrl + X'
+ },
+ {
+ name: '粘贴节点',
+ value: 'Ctrl + V'
+ },
+ {
+ name: '编辑节点',
+ value: 'F2'
+ },
+ {
+ name: '文本换行',
+ value: 'Shift + Enter'
+ },
+ {
+ name: '回退',
+ value: 'Ctrl + Z'
+ },
+ {
+ name: '前进',
+ value: 'Ctrl + Y'
+ },
+ {
+ name: '全选',
+ value: 'Ctrl + A'
+ },
+ {
+ name: '多选',
+ value: '右键 / Ctrl + 左键'
+ },
+ {
+ name: '一键整理布局',
+ value: 'Ctrl + L'
+ }
+ ]
+ },
+ {
+ type: '画布操作',
+ list: [
+ {
+ name: '放大',
+ value: 'Ctrl + +'
+ },
+ {
+ name: '缩小',
+ value: 'Ctrl + -'
+ },
+ {
+ name: '恢复默认',
+ value: 'Ctrl + Enter'
+ }
+ ]
+ }
+]
+默认当鼠标滑入画布范围内才会响应快捷键操作，如果你想去掉这个限制可以在实例化simple-mind-map时通过选项指定：
new MindMap({
+ // ...
+ enableShortcutOnlyWhenMouseInSvg: false
+})
+你也可以添加新的快捷键：
+mindMap.keyCommand.addShortcut('key', () => {
+ // 执行一些操作
+})
+key支持三种方式：
Enter // 单个按键
+Tab | Insert // 或
+Shift + a // 与
+要获取所有的按键值对应的名称，可以：
+import { keyMap } from 'simple-mind-map/src/utils/keyMap'
+可以添加当然也可以移除，详细文档可以参考keyCommand。
编写中。。。
- +++要使用小地图需要注册小地图插件
+
小地图可以方便看到当前画布可视区域在思维导图树的哪个部分。
+虽然小地图需要你自行开发，不过simple-mind-map提供了一些方法来帮你快速的完成这一工作。
小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。
+当注册了小地图插件后可以通过mindMap.miniMap获取到插件实例，然后通过mindMap.miniMap.calculationMiniMap方法即可获取小地图渲染需要的数据，返回的数据结构如下：
{
+ svgHTML, // 小地图html
+ viewBoxStyle, // 视图框的位置信息
+ miniMapBoxScale, // 视图框的缩放值
+ miniMapBoxLeft, // 视图框的left值
+ miniMapBoxTop, // 视图框的top值
+}
+完整实现思路如下：
+1.准备一个宽高不为0的容器元素container，定位不为static
+2.在container内创建一个小地图容器元素miniMapContainer，绝对定位，设置变换中心点为left top：
transform-origin: left top;
+3.在container内创建一个视口框元素viewBoxContainer，绝对定位，设置边框样式，过渡属性（可选）
+4.监听data_change和view_data_change事件，最好也监听一下node_tree_render_end事件，防止初次渲染完毕后小地图没有刷新，在该事件内调用calculationMiniMap方法获取计算数据，然后将返回数据中的svgHTML渲染到miniMapContainer元素内，并且给miniMapContainer元素设置或更新如下样式：
+{
+ transform: `scale(${miniMapBoxScale})`,
+ left: miniMapBoxLeft + 'px',
+ top: miniMapBoxTop + 'px',
+}
+5.将viewBoxStyle对象设置为viewBoxContainer元素的样式
+到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置
+6.监听container元素的mousedown、mousemove、mouseup事件，分别调用小地图插件实例的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果
+插件的完整信息可以参考miniMap。
+1.准备一个容器元素container，定位不为static
2.在container内创建一个小地图容器元素miniMapContainer，绝对定位
3.在container内创建一个视口框元素viewBoxContainer，绝对定位，设置边框样式，过渡属性（可选）
4.监听data_change和view_data_change事件，在该事件内调用calculationMiniMap方法获取计算数据，然后将svgHTML渲染到miniMapContainer元素内，并且设置它的样式：
4.监听data_change和view_data_change事件，在该事件内调用calculationMiniMap方法获取计算数据，然后将svgHTML渲染到miniMapContainer元素内，并且设置miniMapContainer元素的样式：
:style="{
- transform: `scale(${svgBoxScale})`,
- left: svgBoxLeft + 'px',
- top: svgBoxTop + 'px',
+ transform: `scale(${miniMapBoxScale})`,
+ left: miniMapBoxLeft + 'px',
+ top: miniMapBoxTop + 'px',
}"
5.将viewBoxStyle对象设置为viewBoxContainer元素的样式