2.5 KiB
简介
思维导图是一种常见的表达发散性思维的有效工具，市面上有非常多的工具可以用来画思维导图，百度一下，整页都是广告可供选择，此外也有一些可以用来帮助快速实现的JavaScript类库，如：jsMind、KityMinder。
本文会介绍如何从头实现一个简易的思维导图。
技术选型
这种图形类的绘制一般有两种选择，svg与canvas，因为思维导图主要是节点与线的连接，使用与html比较接近的svg比较好操作，svg类库也有挺多，在试用了svgjs和snap后，有些需求在snap里没有找到对应的方法，所以最终选择了svgjs，视图库使用的是vue2.x全家桶。
数据结构
这里主要指每个节点的数据结构，大概需要包含是否是根节点、节点层级、节点内容（包括文本、图片、图标等固定格式）、节点展开状态、子节点、父节点等等，此外还包括该节点的特定样式，用来覆盖主题的默认样式：
每次操作都会修改这份配置数据，然后整体刷新，有点数据驱动的意思，好处很明显，只用维护数据就行了，不用陷入对视图的操作。
逻辑结构图
思维导图常见的有几种变种，我们先看最基础的【逻辑结构图】如何布局，其他的可以在末尾小节查看。
节点定位
节点连线
支持图片、图标
展开收缩
文字编辑
拖动、放大缩小
主题
节点样式编辑
快捷键
快捷键就是监听了到特定的按键来执行特定的操作，包含单个按键和组合键，我们可以使用一个对象来保存快捷键和对应的命令，key代表按键，value代表要执行的命令，比如：
const shortcutKeys = {
'enter': 'addSiblingNode',
'ctrl+b': 'bold'
}
包含两种类型，单个按键、以+拼接的组合键，接下来只要监听keydown事件来检查即可，首先要说明的是组合键一般指的是ctrl、alt、shift
实现过渡效果
回退
导入导出、其他格式
https://github.com/canvg/canvg
https://github.com/fex-team/kityminder/tree/dev/src/protocol
https://github.com/fex-team/kityminder/tree/dev/native-support
json、freemind、xmind
png、svg
其他几种变种结构
逻辑结构图、鱼骨图、思维导图、组织结构图、目录组织图