README: update

Merge branch 'feature' into main
打包0.6.2
2026-02-19 23:08:32 +08:00 · 2023-06-20 16:43:10 +08:00 · 2023-06-20 16:39:55 +08:00 · 2023-06-20 16:38:29 +08:00 · 2023-06-20 16:35:36 +08:00 · 2023-06-20 16:29:54 +08:00
400 changed files with 69118 additions and 12165 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
 node_modules
 .DS_Store
-package-lock.json
+dist_electron
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021-2023 The MindMap Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -1,68 +1,45 @@
-# web思维导图的简单实现
+<h1 align="center">Simple mind map</h1>

-## 特性
+[![npm-version](https://img.shields.io/npm/v/simple-mind-map)](https://www.npmjs.com/package/simple-mind-map)
+![npm download](https://img.shields.io/npm/dm/simple-mind-map)
+[![GitHub stars](https://img.shields.io/github/stars/wanglin2/mind-map)](https://github.com/wanglin2/mind-map/stargazers)
+[![GitHub issues](https://img.shields.io/github/issues/wanglin2/mind-map)](https://github.com/wanglin2/mind-map/issues)
+[![GitHub forks](https://img.shields.io/github/forks/wanglin2/mind-map)](https://github.com/wanglin2/mind-map/network/members)
+![license](https://img.shields.io/npm/l/express.svg)

- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构
+> 一个简单&强大的Web思维导图

- [x] 内置多种主题，允许高度自定义样式
+本项目包含两部分：

+1.一个js思维导图库，不依赖任何框架，你可以使用它来快速完成Web思维导图产品的开发。
+
+开发文档：[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/)
+
+2.一个Web思维导图，基于思维导图库、Vue2.x、ElementUI开发，可以操作电脑本地文件，所以你可以直接把它当做一个在线版思维导图应用使用，如果觉得github的响应速度慢，你也可以部署到你的服务器上。
+
+在线地址：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)
+
+另外也提供了客户端可供下载使用，支持`Windows`、`Mac`及`Linux`，下载地址：
+
+Github：[releases](https://github.com/wanglin2/mind-map/releases)。
+
+百度云盘：[地址](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)。
+
+# 特性
+
+- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积
+- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图六种结构
+- [x] 内置多种主题，允许高度自定义样式，支持注册新主题
 - [x] 支持快捷键
-
- [x] 节点内容支持图片、图标、超链接、备注、标签
-
+- [x] 节点内容支持图片、图标、超链接、备注、标签、概要
 - [x] 支持前进后退
-
 - [x] 支持拖动、缩放
-
- [x] 支持右键多选
-
- [x] 支持节点拖拽
-
-## 目录介绍
-
-1.simple-mind-map
-
-思维导图工具库。
-
-2.web
-
-使用`simple-mind-map`工具库，基于vue2.x、ElementUI搭建的在线思维导图。
-
-3.dist
-
-打包后的资源文件夹。
-
-4.docs
-
-文档等。
-
-## 开发
-
-本地开发
-
-```bash
-git clone https://github.com/wanglin2/mind-map.git
-cd simple-mind-map
-npm i
-npm link
-cd ..
-cd web
-npm i
-npm link simple-mind-map
-npm run serve
-```
-
-打包
-
-```bash
-cd web
-npm run build
-```
-会自动把`index.html`移动到根目录。
-
-## 相关文章
-
-[Web思维导图实现的技术点分析](https://juejin.cn/post/6987711560521089061)
+- [x] 支持右键和Ctrl+左键两种多选方式
+- [x] 支持节点自由拖拽、拖拽调整
+- [x] 支持多种节点形状
+- [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`，支持从`json`、`xmind`、`markdown`导入
+- [x] 支持小地图、支持水印
+- [x] 支持关联线

 # 安装

@@ -70,863 +47,58 @@ npm run build
 npm i simple-mind-map
 ```

-注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
+# 使用

-```js
-module.exports = {
-  transpileDependencies: ['simple-mind-map']
-}
-```
-
-其他项目请自行修改打包配置。
-
-# API
-
-## 实例化
+提供一个宽高不为0的容器元素：

 ```html
 <div id="mindMapContainer"></div>
 ```

+另外再设置一下`css`样式：
+
+```css
+#mindMapContainer * {
+  margin: 0;
+  padding: 0;
+}
+```
+
+然后创建一个实例：
+
 ```js
 import MindMap from "simple-mind-map";

 const mindMap = new MindMap({
  el: document.getElementById('mindMapContainer'),
-  data: data
+  data: {
+    "data": {
+        "text": "根节点"
+    },
+    "children": []
+  }
 });
 ```

+即可得到一个思维导图。

+想要实现更多功能？可以查看[开发文档](https://wanglin2.github.io/mind-map/#/doc/zh/)。

-### 实例化选项：
+# License

-| 字段名称             | 类型    | 默认值           | 描述                                                         | 是否必填 |
-| -------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
-| el                   | Element |                  | 容器元素，必须为DOM元素                                      | 是       |
-| data                 | Object  | {}               | 思维导图数据，可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) |          |
-| layout               | String  | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图） |          |
-| theme                | String  | default          | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫） |          |
-| themeConfig          | Object  | {}               | 主题配置，会和所选择的主题进行合并，可用字段可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) |          |
-| scaleRatio           | Number  | 0.1              | 放大缩小的增量比例                                           |          |
-| maxTag               | Number  | 5                | 节点里最多显示的标签数量，多余的会被丢弃                     |          |
-| exportPadding        | Number  | 20               | 导出图片时的内边距                                           |          |
-| imgTextMargin        | Number  | 5                | 节点里图片和文字的间距                                       |          |
-| textContentMargin    | Number  | 2                | 节点里各种文字信息的间距，如图标和文字的间距                 |          |
-| selectTranslateStep  | Number  | 3                | 多选节点时鼠标移动到边缘时的画布移动偏移量                   |          |
-| selectTranslateLimit | Number  | 20               | 多选节点时鼠标移动距边缘多少距离时开始偏移                   |          |
-| customNoteContentShow（v0.1.6+） | Object  | null               | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }}                   |          |
-| readonly（v0.1.7+） | Boolean  | false               |  是否是只读模式                  |          |
+MIT

+# 微信交流群

-### 实例方法：
+<img src="./qrcode.jpg" style="width: 300px" />

-#### render()
+# 请作者喝杯咖啡

-触发整体渲染，会进行节点复用，性能较`reRender`会更好一点，如果只是节点位置变化了可以调用该方法进行渲染
+> 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds

+> 转账请备注哦~你的头像和名称会出现在[文档页面](https://wanglin2.github.io/mind-map/#/doc/zh/introduction/%E8%AF%B7%E4%BD%9C%E8%80%85%E5%96%9D%E6%9D%AF%E5%92%96%E5%95%A1)

-
-#### reRender()
-
-整体重新渲染，会清空画布，节点也会重新创建，性能不好，慎重使用
-
-
-
-#### resize()
-
-容器尺寸变化后，需要调用该方法进行适应
-
-#### setMode(mode)
-
-v0.1.7+。切换模式为只读或编辑。
-
-`mode`：readonly、edit
-
-#### on(event, fn)
-
-监听事件，事件列表：
-
-| 事件名称                    | 描述                                       | 回调参数                                                     |
-| --------------------------- | ------------------------------------------ | ------------------------------------------------------------ |
-| data_change                 | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据）                                       |
-| view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发       | data（当前视图状态数据）                                     |
-| back_forward                | 前进或回退                                 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） |
-| draw_click                  | *画布的单击事件*                           | e（事件对象）                                                |
-| svg_mousedown               | svg画布的鼠标按下事件                      | e（事件对象）                                                |
-| mousedown                   | el元素的鼠标按下事件                       | e（事件对象）、this（Event事件类实例）                       |
-| mousemove                   | el元素的鼠标移动事件                       | e（事件对象）、this（Event事件类实例）                       |
-| drag                        | 如果是按住左键拖动的话会触发拖动事件       | e（事件对象）、this（Event事件类实例）                       |
-| mouseup                     | el元素的鼠标松开事件                       | e（事件对象）、this（Event事件类实例）                       |
-| mousewheel                  | 鼠标滚动事件                               | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
-| contextmenu                 | svg画布的鼠标右键菜单事件                  | e（事件对象）                                                |
-| node_click                  | 节点的单击事件                             | this（节点实例）、e（事件对象）                              |
-| node_mousedown              | 节点的鼠标按下事件                         | this（节点实例）、e（事件对象）                              |
-| node_mouseup                | 节点的鼠标松开事件                         | this（节点实例）、e（事件对象）                              |
-| node_dblclick               | 节点的双击事件                             | this（节点实例）、e（事件对象）                              |
-| node_contextmenu            | 节点的右键菜单事件                         | e（事件对象）、this（节点实例）                              |
-| before_node_active          | 节点激活前事件                             | this（节点实例）、activeNodeList（当前激活的所有节点列表）   |
-| node_active                 | 节点激活事件                               | this（节点实例）、activeNodeList（当前激活的所有节点列表）   |
-| expand_btn_click            | 节点展开或收缩事件                         | this（节点实例）                                             |
-| before_show_text_edit       | 节点文本编辑框即将打开事件                 |                                                              |
-| hide_text_edit              | 节点文本编辑框关闭事件                     | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
-| scale                       | 放大缩小事件                               | scale（缩放比例）                                            |
-
-
-
-#### emit(event, ...args)
-
-触发事件，可以是上面表格里的事件，也可以是自定义事件
-
-
-
-#### off(event, fn)
-
-解绑事件
-
-
-
-#### setTheme(theme)
-
-切换主题，可选主题见上面的选项表格
-
-
-
-#### getTheme()
-
-获取当前主题
-
-
-
-#### setThemeConfig(config)
-
-设置主题配置，`config`同上面选项表格里的选项`themeConfig`
-
-#### getCustomThemeConfig()
-
-获取自定义主题配置
-
-#### getThemeConfig(prop)
-
-获取某个主题配置属性值
-
-
-
-#### getLayout()
-
-获取当前的布局结构
-
-
-
-#### setLayout(layout)
-
-设置布局结构，可选值见上面选项表格的`layout`字段
-
-
-
-#### execCommand(name, ...args)
-
-执行命令，每执行一个命令就会在历史堆栈里添加一条记录用于回退或前进。所有命令如下：
-
-| 命令名称                 | 描述                                                         | 参数                                                         |
-| ------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| SELECT_ALL               | 全选                                                         |                                                              |
-| BACK                     | 回退指定的步数                                               | step（要回退的步数，默认为1）                                |
-| FORWARD                  | 前进指定的步数                                               | step（要前进的步数，默认为1）                                |
-| INSERT_NODE              | 插入同级节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效 |                                                              |
-| INSERT_CHILD_NODE        | 插入子节点，操作节点为当前激活的节点                         |                                                              |
-| UP_NODE                  | 上移节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的第一个节点使用无效 |                                                              |
-| DOWN_NODE                | 操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的最后一个节点使用无效 |                                                              |
-| REMOVE_NODE              | 删除节点，操作节点为当前激活的节点                           |                                                              |
-| PASTE_NODE               | 粘贴节点到节点，操作节点为当前激活的节点                     | data（要粘贴的节点数据，一般通过`renderer.copyNode()`方法和`renderer.cutNode()`方法获取） |
-| CUT_NODE                 | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效 | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回) |
-| SET_NODE_STYLE           | 修改节点样式                                                 | node（要设置样式的节点）、prop（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式） |
-| SET_NODE_ACTIVE          | 设置节点是否激活                                             | node（要设置的节点）、active（布尔值，是否激活）             |
-| CLEAR_ACTIVE_NODE        | 清除当前已激活节点的激活状态，操作节点为当前激活的节点       |                                                              |
-| SET_NODE_EXPAND          | 设置节点是否展开                                             | node（要设置的节点）、expand（布尔值，是否展开）             |
-| EXPAND_ALL               | 展开所有节点                                                 |                                                              |
-| UNEXPAND_ALL             | 收起所有节点                                                 |                                                              |
-| SET_NODE_DATA            | 更新节点数据，即更新节点数据对象里`data`对象的数据           | node（要设置的节点）、data（对象，要更新的数据，如`{expand: true}`） |
-| SET_NODE_TEXT            | 设置节点文本                                                 | node（要设置的节点）、text（要设置的文本字符串，换行可以使用`\n`） |
-| SET_NODE_IMAGE           | 设置节点图片                                                 | node（要设置的节点）、imgData（对象，图片信息，结构为：`{url, title, width, height}`，图片的宽高必须要传） |
-| SET_NODE_ICON            | 设置节点图标                                                 | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） |
-| SET_NODE_HYPERLINK       | 设置节点超链接                                               | node（要设置的节点）、link（超链接地址）、title（超链接名称，可选） |
-| SET_NODE_NOTE            | 设置节点备注                                                 | node（要设置的节点）、note（备注文字）                       |
-| SET_NODE_TAG             | 设置节点标签                                                 | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js)里获取到） |
-| INSERT_AFTER（v0.1.5+）  | 将节点移动到另一个节点的后面                                 | node（要移动的节点）、 exist（目标节点）                     |
-| INSERT_BEFORE（v0.1.5+） | 将节点移动到另一个节点的前面                                 | node（要移动的节点）、 exist（目标节点）                     |
-| MOVE_NODE_TO（v0.1.5+）  | 移动一个节点作为另一个节点的子节点                           | node（要移动的节点）、 toNode（目标节点）                    |
-
-
-#### setData(data)
-
-动态设置思维导图数据
-
-`data`：思维导图结构数据
-
-
-#### export(type, isDownload, fileName)
-
-导出
-
-`type`：要导出的类型，可选值：png、svg
-
-`isDownload`：是否需要直接触发下载，布尔值，默认为`false`
-
-`fileName`：（v0.1.6+）导出文件的名称，默认为`思维导图`
-
-#### toPos(x, y)
-
-v0.1.5+
-
-将浏览器可视窗口的坐标转换成相对于画布的坐标
-
-## render实例
-
-`render`实例负载整个渲染过程，可通过`mindMap.renderer`获取到
-
-
-
-### 属性
-
-#### activeNodeList
-
-获取当前激活的节点列表
-
-
-
-#### root
-
-获取节点树的根节点
-
-
-
-### 方法
-
-#### clearActive()
-
-清除当前激活的节点
-
-#### clearAllActive()
-
-清除当前所有激活节点，并会触发`node_active`事件 
-
-#### startTextEdit()
-
-（v0.1.6+）若有文字编辑需求可调用该方法，会禁用回车键和删除键相关快捷键防止冲突 
-
-#### endTextEdit()
-
-（v0.1.6+）结束文字编辑，会恢复回车键和删除键相关快捷键
-
-#### addActiveNode(node)
-
-添加节点到激活列表里
-
-
-
-#### removeActiveNode(node)
-
-在激活列表里移除某个节点
-
-
-
-#### findActiveNodeIndex(node)
-
-检索某个节点在激活列表里的索引
-
-
-
-#### getNodeIndex(node)
-
-获取节点在同级里的位置索引
-
-
-
-#### removeOneNode(node)
-
-删除某个指定节点
-
-
-
-#### copyNode()
-
-复制节点，操作节点为当前激活节点，有多个激活节点只会操作第一个节点
-
-
-
-#### setNodeDataRender(node, data)
-
-设置节点数据，即`data`字段的数据，并会根据节点大小是否变化来判断是否需要重新渲染该节点，`data`为对象，如：`{text: '我是新文本'}`
-
-
-
-#### moveNodeTo(node, toNode)
-
-v0.1.5+
-
-移动一个节点作为另一个节点的子节点
-
-
-
-#### insertBefore(node, exist)
-
-v0.1.5+
-
-将节点移动到另一个节点的前面
-
-
-
-#### insertAfter(node, exist)
-
-v0.1.5+
-
-将节点移动到另一个节点的后面
-
-
-
-## keyCommand实例
-
-`keyCommand`实例负责快捷键的添加及触发，内置了一些快捷键，也可以自行添加。可通过`mindMap.keyCommand`获取到该实例。
-
-
-
-### 方法
-
-#### keyCommand(key, fn)
-
-添加快捷键
-
-`key`：快捷键按键，按键值可以通过[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js)查看。示例：
-
-```js
-// 单个按键
-mindMap.keyCommand..addShortcut('Enter', () => {})
-// 或
-mindMap.keyCommand.addShortcut('Del|Backspace', () => {})
-// 组合键
-mindMap.keyCommand.addShortcut('Control+Enter', () => {})
-```
-
-`fn`：要执行的方法
-
-
-
-## command实例
-
-`command`实例负责命令的添加及执行，内置了很多命令，也可以自行添加，命令指需要在历史堆栈数据里添加副本的操作。可通过`mindMap.command`获取到该实例
-
-
-
-### 方法
-
-#### add(name, fn)
-
-添加命令。
-
-`name`：命令名称
-
-`fn`：命令要执行的方法
-
-
-
-#### remove(name, fn)
-
-移除命令。
-
-`name`：要移除的命令名称
-
-`fn`：要移除的方法，不传的话移除该命令所有的方法
-
-
-
-#### getCopyData()
-
-获取渲染树数据副本
-
-#### clearHistory()
-
-清空历史堆栈数据
-
-
-## view实例
-
-`view`实例负责视图操作，可通过`mindMap.view`获取到该实例
-
-
-
-### 方法
-
-#### translateX(step)
-
-`x`方向进行平移，`step`：要平移的像素
-
-
-
-#### translateY(step)
-
-`y`方向进行平移，`step`：要平移的像素
-
-
-
-#### reset()
-
-恢复到默认的变换
-
-
-
-#### narrow()
-
-缩小
-
-
-
-#### enlarge()
-
-放大
-
-
-
-#### getTransformData()
-
-v0.1.1+
-
-获取当前变换数据，可用于回显
-
-
-
-#### setTransformData(data)
-
-v0.1.1+
-
-动态设置变换数据，可以通过getTransformData方法获取变换数据
-
-
-
-## doExport实例
-
-`doExport`实例负责导出，可通过`mindMap.doExport`获取到该实例
-
-
-
-### 方法
-
-#### png()
-
-导出为`png`，异步方法，返回图片数据，`data:url`数据，可以自行下载或显示
-
-
-
-#### svg()
-
-导出为`svg`，异步方法，返回`svg`数据，`data:url`数据，可以自行下载或显示
-
-
-
-#### getSvgData()
-
-获取`svg`数据，异步方法，返回一个对象：
-
-```js
-{
-  node// svg对象
-  str// svg字符串
-}
-```
-
-
-
-## select实例
-
-`select`实例负责鼠标右键多选节点操作，可通过`mindMap.select`获取到该实例
-
-
-
-### 方法
-
-#### toPos(x, y)
-
-转换鼠标位置为相对于容器`el`的位置
-
-
-
-## batchExecution实例
-
-`batchExecution`用来批量异步的执行一些操作，如果某个操作同时多次调用，那么只会在下一个事件循环里执行一次。可以通过`mindMap.batchExecution`获取到该实例
-
-
-
-### 方法
-
-#### push(name, fn)
-
-添加任务。
-
-`name`：任务名称
-
-`fn`：任务
-
-
-
-## node实例
-
-每个节点都会实例化一个`node`实例
-
-
-
-### 属性
-
-#### nodeData
-
-该节点对应的真实数据
-
-
-
-#### uid
-
-该节点唯一的标识
-
-
-
-#### isRoot
-
-是否是根节点
-
-
-
-#### layerIndex
-
-节点层级
-
-
-
-#### width
-
-节点的宽
-
-
-
-#### height
-
-节点的高
-
-
-
-#### left
-
-节点的`left`位置
-
-
-
-#### top
-
-节点的`top`位置
-
-
-
-#### parent
-
-节点的父节点
-
-
-
-#### children
-
-节点的子节点列表
-
-
-
-#### group
-
-节点是内容容器，`svg`对象
-
-
-
-#### isDrag
-
-v0.1.5+
-
-节点是否正在拖拽中
-
-
-
-### 方法
-
-#### addChildren(node)
-
-添加子节点
-
-
-
-#### getSize()
-
-计算节点的宽高，返回一个布尔值，代表是否宽高发生了变化
-
-
-
-#### renderNode()
-
-渲染节点到画布，会移除旧的内容节点，创建新的
-
-
-
-#### render()
-
-递归渲染该节点及其所有子节点，第一次调用会创建节点内容，后续只会更新节点位置，想要重新渲染内容，可以先把`initRender`属性设为`true`
-
-
-
-#### remove()
-
-递归删除该节点及其所有子节点
-
-
-
-#### renderLine()
-
-重新渲染该节点到其子节点之间的连线
-
-
-
-#### removeLine()
-
-移除该节点到其子节点之间的连线
-
-
-
-#### renderExpandBtn()
-
-渲染展开收缩按钮的内容
-
-
-
-#### removeExpandBtn()
-
-移除展开收缩按钮
-
-
-
-#### getStyle(prop, root, isActive)
-
-获取某个最终应用到该节点的样式值
-
-`prop`：要获取的样式属性
-
-`root`：是否是根节点，默认`false`
-
-`isActive`：获取的是否是激活状态的样式值，默认`false`
-
-
-
-#### setStyle(prop, value, isActive)
-
-修改节点的某个样式，`SET_NODE_STYLE`命令的快捷方法
-
-
-
-#### getData(key)
-
-获取该节点真实数据`nodeData`的`data`对象里的指定值，`key`不传返回这个`data`对象
-
-
-
-#### setData(data)
-
-设置节点数据，`SET_NODE_DATA`命令的快捷方法
-
-
-
-#### setText(text)
-
-设置节点文本，`SET_NODE_TEXT`命令的快捷方法
-
-
-
-#### setImage(imgData)
-
-设置节点图片，`SET_NODE_IMAGE`命令的快捷方法
-
-
-
-#### setIcon(icons)
-
-设置节点图标，`SET_NODE_ICON`命令的快捷方法
-
-
-
-#### setHyperlink(link, title)
-
-设置节点超链接，`SET_NODE_HYPERLINK`命令的快捷方法
-
-
-
-#### setNote(note)
-
-设置节点备注，`SET_NODE_NOTE`命令的快捷方法
-
-
-
-#### setTag(tag)
-
-设置节点标签，`SET_NODE_TAG`的快捷方法
-
-
-
-#### hide()
-
-v0.1.5+
-
-隐藏节点及其下级节点
-
-
-
-#### show()
-
-v0.1.5+
-
-显示节点及其下级节点
-
-
-
-#### isParent(node)
-
-v0.1.5+
-
-检测当前节点是否是某个节点的祖先节点
-
-
-
-#### isBrother(node)
-
-v0.1.5+
-
-检测当前节点是否是某个节点的兄弟节点
-
-
-
-## 内置工具方法
-
-引用：
-
-```js
-import {walk, ...} from 'simple-mind-map/src/utils'
-```
-
-
-
-### 方法
-
-#### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
-
-深度优先遍历树
-
-`root`：要遍历的树的根节点
-
-`parent`：父节点
-
-`beforeCallback`：前序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index
-
-`afterCallback`：后序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index
-
-`isRoot`：是否是根节点
-
-`layerIndex`：节点层级
-
-`index`：节点在同级节点里的索引
-
-示例：
-
-```js
-walk(tree, null, () => {}, () => {}, false, 0, 0)
-```
-
-
-
-#### bfsWalk(root, callback)
-
-广度优先遍历树
-
-
-
-#### resizeImgSize(width, height, maxWidth, maxHeight)
-
-缩放图片的尺寸
-
-`width`：图片原本的宽
-
-`height`：图片原本的高
-
-`maxWidth`：要缩放到的宽
-
-`maxHeight`：要缩放到的高
-
-`maxWidth`和`maxHeight`可以同时都传，也可以只传一个
-
-
-
-#### resizeImg(imgUrl, maxWidth, maxHeight)
-
-缩放图片，内部先加载图片，然后调用`resizeImgSize`方法，返回一个`promise`
-
-
-
-#### simpleDeepClone(data)
-
-极简的深拷贝方法，只能针对全是基本数据的对象，否则会报错
-
-
-
-#### copyRenderTree(tree, root)
-
-复制渲染树数据，示例：
-
-```js
-copyRenderTree({}, this.mindMap.renderer.renderTree)
-```
-
-
-
-#### copyNodeTree(tree, root)
-
-复制节点树数据，主要是剔除其中的引用`node`实例的`_node`，然后复制`data`对象的数据，示例：
-
-```js
-copyNodeTree({}, node)
-```
-
-
-
-#### imgToDataUrl(src)
-
-图片转成dataURL
-
-
-
-#### downloadFile(file, fileName)
-
-下载文件
-
-
-
-#### throttle(fn, time = 300, ctx)
-
-节流函数
-
-
-
-#### asyncRun(taskList, callback = () => {})
-
-异步执行任务队列，多个任务是同步执行的，没有先后顺序
-
-
-
-# 特别说明
-
-本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，仅用于学习和参考，请勿用于实际项目。
-
-项目内置的主题和图标来自于：
-
-[百度脑图](https://naotu.baidu.com/)
-
-[知犀思维导图](https://www.zhixi.com/)
-
+<p>
+  <img src="./web/src/assets/img/alipay.jpg" style="width: 300px" />
+  <img src="./web/src/assets/img/wechat.jpg" style="width: 300px" />
+</p>
--- a/docs/assets/1.gif
+++ b/docs/assets/1.gif
--- a/docs/assets/2.gif
+++ b/docs/assets/2.gif
--- a/docs/assets/2021-07-21-19-54-48.gif
+++ b/docs/assets/2021-07-21-19-54-48.gif
--- a/docs/assets/3.gif
+++ b/docs/assets/3.gif
--- a/docs/assets/image-20210717174716810.png
+++ b/docs/assets/image-20210717174716810.png
--- a/docs/assets/image-20210717202607786.png
+++ b/docs/assets/image-20210717202607786.png
--- a/docs/assets/image-20210717210355763.png
+++ b/docs/assets/image-20210717210355763.png
--- a/docs/assets/image-20210717224527681.png
+++ b/docs/assets/image-20210717224527681.png
--- a/docs/assets/image-20210717230604086.png
+++ b/docs/assets/image-20210717230604086.png
--- a/docs/assets/image-20210717230805200.png
+++ b/docs/assets/image-20210717230805200.png
--- a/docs/assets/image-20210717230808662.png
+++ b/docs/assets/image-20210717230808662.png
--- a/docs/assets/image-20210718083006111.png
+++ b/docs/assets/image-20210718083006111.png
--- a/docs/assets/image-20210718083616076.png
+++ b/docs/assets/image-20210718083616076.png
--- a/docs/assets/image-20210718092817830.png
+++ b/docs/assets/image-20210718092817830.png
--- a/docs/assets/image-20210718102434530.png
+++ b/docs/assets/image-20210718102434530.png
--- a/docs/assets/image-20210718110652705.png
+++ b/docs/assets/image-20210718110652705.png
--- a/docs/assets/image-20210718111334085.png
+++ b/docs/assets/image-20210718111334085.png
--- a/docs/assets/image-20210718134525691.png
+++ b/docs/assets/image-20210718134525691.png
--- a/docs/assets/image-20210718184835414.png
+++ b/docs/assets/image-20210718184835414.png
--- a/docs/assets/image-20210718191124627.png
+++ b/docs/assets/image-20210718191124627.png
--- a/docs/assets/image-20210718221814590.png
+++ b/docs/assets/image-20210718221814590.png
--- a/docs/assets/image-20210718222150055.png
+++ b/docs/assets/image-20210718222150055.png
--- a/docs/assets/image-20210718222612078.png
+++ b/docs/assets/image-20210718222612078.png
--- a/docs/assets/image-20210720191943989.png
+++ b/docs/assets/image-20210720191943989.png
--- a/docs/assets/image-20210720192008277.png
+++ b/docs/assets/image-20210720192008277.png
--- a/docs/assets/image-20210720200816281.png
+++ b/docs/assets/image-20210720200816281.png
--- a/docs/assets/image-20210721183307656.png
+++ b/docs/assets/image-20210721183307656.png
--- a/docs/assets/image-20210721183340310.png
+++ b/docs/assets/image-20210721183340310.png
--- a/docs/assets/image-20210721183823754.png
+++ b/docs/assets/image-20210721183823754.png
--- a/docs/assets/image-20210721184140488.png
+++ b/docs/assets/image-20210721184140488.png
--- a/docs/assets/image-20210721185453825.png
+++ b/docs/assets/image-20210721185453825.png
--- a/docs/assets/image-20210721190700979.png
+++ b/docs/assets/image-20210721190700979.png
--- a/docs/assets/swdt.jpg
+++ b/docs/assets/swdt.jpg
--- a/docs/web思维导图实现的技术点分析.md
+++ b/docs/web思维导图实现的技术点分析.md
--- a/index.html
+++ b/index.html
--- a/qrcode.jpg
+++ b/qrcode.jpg
--- a/simple-mind-map/.eslintrc.js
+++ b/simple-mind-map/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "eslint:recommended",
+    "overrides": [
+    ],
+    "parserOptions": {
+        "parser": 'babel-eslint',
+        "ecmaVersion": 12,
+        "sourceType": "module",
+        "allowImportExportEverywhere": true
+    },
+    "rules": {
+    }
+}
--- a/simple-mind-map/.prettierignore
+++ b/simple-mind-map/.prettierignore
@@ -0,0 +1,10 @@
+src/assets
+*/.DS_Store
+dist
+example
+node_modules
+*.json
+*.md
+.eslintrc.js
+.prettierignore
+.prettierrc
--- a/simple-mind-map/.prettierrc
+++ b/simple-mind-map/.prettierrc
@@ -0,0 +1,5 @@
+semi: false
+singleQuote: true
+printWidth: 80
+trailingComma: 'none'
+arrowParens: 'avoid'
--- a/simple-mind-map/example/exampleData.js
+++ b/simple-mind-map/example/exampleData.js
@@ -10,7 +10,10 @@ const createFullData = () => {
        "tag": ["标签1", "标签2"],
        "hyperlink": "http://lxqnsys.com/",
        "hyperlinkTitle": "理想青年实验室",
-        "note": "理想青年实验室\n一个有意思的角落"
+        "note": "理想青年实验室\n一个有意思的角落",
+        // 自定义位置
+        // "customLeft": 1318,
+        // "customTop": 374.5
    };
 }

@@ -32,110 +35,110 @@ const data1 = {
                },
                "children": [{
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                        ...createFullData()
                    },
                    "children": [{
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                        "children": [{
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                                ...createFullData()
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                                "children": [{
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                    "children": [{
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                        "children": [{
                                            "data": {
-                                                "text": "子节点",
+                                                "text": "分支主题",
                                            },
                                        }, {
                                            "data": {
-                                                "text": "子节点",
+                                                "text": "分支主题",
                                            },
                                        }, {
                                            "data": {
-                                                "text": "子节点",
+                                                "text": "分支主题",
                                            },
                                        }, {
                                            "data": {
-                                                "text": "子节点",
+                                                "text": "分支主题",
                                            },
                                        }]
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }]
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }]
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }]
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }]
                }]
@@ -147,36 +150,36 @@ const data1 = {
                },
                "children": [{
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                }, {
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                    "children": [{
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }]
                }, {
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                }, {
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                }]
            },
@@ -187,40 +190,40 @@ const data1 = {
                },
                "children": [{
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                    "children": [{
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                        "children": [{
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }]
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }]
                }]
@@ -232,225 +235,225 @@ const data1 = {
                },
                "children": [{
                    "data": {
-                        "text": "子节点",
+                        "text": "分支主题",
                    },
                    "children": [{
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                        "children": [{
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }]
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                        "children": [{
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                                "children": [{
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }]
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                                "children": [{
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                    "children": [{
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }, {
                                        "data": {
-                                            "text": "子节点",
+                                            "text": "分支主题",
                                        },
                                    }]
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }]
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }]
                    }, {
                        "data": {
-                            "text": "子节点",
+                            "text": "分支主题",
                        },
                        "children": [{
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                                "children": [{
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }, {
                                    "data": {
-                                        "text": "子节点",
+                                        "text": "分支主题",
                                    },
                                }]
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }, {
                            "data": {
-                                "text": "子节点",
+                                "text": "分支主题",
                            },
                            "children": [{
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }, {
                                "data": {
-                                    "text": "子节点",
+                                    "text": "分支主题",
                                },
                            }]
                        }]
@@ -767,13 +770,13 @@ const data3 = {
                "children": [
                    {
                        "data": {
-                            "text": "子节点"
+                            "text": "分支主题"
                        },
                        "children": []
                    },
                    {
                        "data": {
-                            "text": "子节点"
+                            "text": "分支主题"
                        },
                        "children": []
                    }
@@ -864,6 +867,50 @@ const data4 = {
    }
 }

+// 带概要
+const data5 = {
+    "root": {
+        "data": {
+            "text": "根节点"
+        },
+        "children": [
+            {
+                "data": {
+                    "text": "二级节点",
+                    "generalization": {
+                        "text": "概要",
+                    }
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "分支主题"
+                        },
+                        "children": []
+                    },
+                    {
+                        "data": {
+                            "text": "分支主题"
+                        },
+                        "children": []
+                    }
+                ]
+            },
+        ]
+    }
+}
+
+// 富文本数据v0.4.0+，需要使用RichText插件才支持富文本编辑
+const richTextData = {
+    "root": {
+        "data": {
+            "text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
+            "richText": true
+        },
+        "children": []
+    }
+}
+
 const rootData = {
    "root": {
        "data": {
@@ -876,11 +923,12 @@ const rootData = {
 export default {
    // ...data1,
    // ...data2,
-    ...data3,
+    // ...data3,
    // ...data4,
+    ...data5,
    // ...rootData,
    "theme": {
-        "template": "minions",
+        "template": "classic4",
        "config": {
            // 自定义配置...
        }
@@ -888,5 +936,6 @@ export default {
    "layout": "logicalStructure",
    // "layout": "mindMap",
    // "layout": "catalogOrganization"
-    // "layout": "organizationStructure"
+    // "layout": "organizationStructure",
+    "config": {}
 }
--- a/simple-mind-map/example/exportFullData.json
+++ b/simple-mind-map/example/exportFullData.json
@@ -0,0 +1,73 @@
+{
+    "layout": "logicalStructure",
+    "root": {
+        "data": {
+            "text": "根节点",
+            "expand": true,
+            "isActive": false
+        },
+        "children": [{
+            "data": {
+                "text": "二级节点",
+                "generalization": {
+                    "text": "概要",
+                    "expand": true,
+                    "isActive": false
+                },
+                "expand": true,
+                "isActive": false
+            },
+            "children": [{
+                "data": {
+                    "text": "分支主题",
+                    "expand": true,
+                    "isActive": false
+                },
+                "children": []
+            }, {
+                "data": {
+                    "text": "分支主题",
+                    "expand": true,
+                    "isActive": false
+                },
+                "children": []
+            }, {
+                "data": {
+                    "text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
+                    "richText": true
+                },
+                "children": []
+            }]
+        }]
+    },
+    "theme": {
+        "template": "classic4",
+        "config": {}
+    },
+    "view": {
+        "transform": {
+            "scaleX": 1,
+            "scaleY": 1,
+            "shear": 0,
+            "rotate": 0,
+            "translateX": 0,
+            "translateY": 0,
+            "originX": 0,
+            "originY": 0,
+            "a": 1,
+            "b": 0,
+            "c": 0,
+            "d": 1,
+            "e": 0,
+            "f": 0
+        },
+        "state": {
+            "scale": 1,
+            "x": 0,
+            "y": 0,
+            "sx": 0,
+            "sy": 0
+        }
+    },
+    "config": {}
+}
--- a/simple-mind-map/full.js
+++ b/simple-mind-map/full.js
@@ -0,0 +1,30 @@
+import MindMap from './index'
+import MiniMap from './src/plugins/MiniMap.js'
+import Watermark from './src/plugins/Watermark.js'
+import KeyboardNavigation from './src/plugins/KeyboardNavigation.js'
+import ExportPDF from './src/plugins/ExportPDF.js'
+import Export from './src/plugins/Export.js'
+import Drag from './src/plugins/Drag.js'
+import Select from './src/plugins/Select.js'
+import AssociativeLine from './src/plugins/AssociativeLine'
+import RichText from './src/plugins/RichText'
+import xmind from './src/parse/xmind.js'
+import markdown from './src/parse/markdown.js'
+import icons from './src/svg/icons.js'
+
+MindMap.xmind = xmind
+MindMap.markdown = markdown
+MindMap.iconList = icons.nodeIconList
+
+MindMap
+  .usePlugin(MiniMap)
+  .usePlugin(Watermark)
+  .usePlugin(Drag)
+  .usePlugin(KeyboardNavigation)
+  .usePlugin(ExportPDF)
+  .usePlugin(Export)
+  .usePlugin(Select)
+  .usePlugin(AssociativeLine)
+  .usePlugin(RichText)
+
+export default MindMap
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -1,372 +1,525 @@
-import View from './src/View'
-import Event from './src/Event'
-import Render from './src/Render'
+import View from './src/core/view/View'
+import Event from './src/core/event/Event'
+import Render from './src/core/render/Render'
 import merge from 'deepmerge'
 import theme from './src/themes'
-import Style from './src/Style'
-import KeyCommand from './src/KeyCommand'
-import Command from './src/Command'
-import BatchExecution from './src/BatchExecution'
-import Export from './src/Export'
-import Select from './src/Select'
-import Drag from './src/Drag'
-import {
-    layoutValueList
-} from './src/utils/constant'
-import {
-    SVG
-} from '@svgdotjs/svg.js'
+import Style from './src/core/render/node/Style'
+import KeyCommand from './src/core/command/KeyCommand'
+import Command from './src/core/command/Command'
+import BatchExecution from './src/utils/BatchExecution'
+import { layoutValueList, CONSTANTS } from './src/constants/constant'
+import { SVG } from '@svgdotjs/svg.js'
+import { simpleDeepClone } from './src/utils'
+import defaultTheme, { checkIsNodeSizeIndependenceConfig } from './src/themes/default'

 // 默认选项配置
 const defaultOpt = {
-    // 是否只读
-    readonly: false,
-    // 布局
-    layout: 'logicalStructure',
-    // 主题
-    theme: 'default', // 内置主题：default（默认主题）
-    // 主题配置，会和所选择的主题进行合并
-    themeConfig: {},
-    // 放大缩小的增量比例
-    scaleRatio: 0.1,
-    // 最多显示几个标签
-    maxTag: 5,
-    // 导出图片时的内边距
-    exportPadding: 20,
-    // 展开收缩按钮尺寸
-    expandBtnSize: 20,
-    // 节点里图片和文字的间距
-    imgTextMargin: 5,
-    // 节点里各种文字信息的间距，如图标和文字的间距
-    textContentMargin: 2,
-    // 多选节点时鼠标移动到边缘时的画布移动偏移量
-    selectTranslateStep: 3,
-    // 多选节点时鼠标移动距边缘多少距离时开始偏移
-    selectTranslateLimit: 20,
-    // 自定义节点备注内容显示
-    customNoteContentShow: null
-    /*
+  // 是否只读
+  readonly: false,
+  // 布局
+  layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
+  // 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
+  fishboneDeg: 45,
+  // 主题
+  theme: 'default', // 内置主题：default（默认主题）
+  // 主题配置，会和所选择的主题进行合并
+  themeConfig: {},
+  // 放大缩小的增量比例
+  scaleRatio: 0.1,
+  // 最多显示几个标签
+  maxTag: 5,
+  // 导出图片时的内边距
+  exportPadding: 20,
+  // 展开收缩按钮尺寸
+  expandBtnSize: 20,
+  // 节点里图片和文字的间距
+  imgTextMargin: 5,
+  // 节点里各种文字信息的间距，如图标和文字的间距
+  textContentMargin: 2,
+  // 多选节点时鼠标移动到边缘时的画布移动偏移量
+  selectTranslateStep: 3,
+  // 多选节点时鼠标移动距边缘多少距离时开始偏移
+  selectTranslateLimit: 20,
+  // 自定义节点备注内容显示
+  customNoteContentShow: null,
+  /*
        {
            show(){},
            hide(){}
        }
    */
+  // 是否开启节点自由拖拽
+  enableFreeDrag: false,
+  // 水印配置
+  watermarkConfig: {
+    text: '',
+    lineSpacing: 100,
+    textSpacing: 100,
+    angle: 30,
+    textStyle: {
+      color: '#999',
+      opacity: 0.5,
+      fontSize: 14
+    }
+  },
+  // 达到该宽度文本自动换行
+  textAutoWrapWidth: 500,
+  // 自定义鼠标滚轮事件处理
+  // 可以传一个函数，回调参数为事件对象
+  customHandleMousewheel: null,
+  // 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
+  mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM,// zoom（放大缩小）、move（上下移动）
+  // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
+  mousewheelMoveStep: 100,
+  // 默认插入的二级节点的文字
+  defaultInsertSecondLevelNodeText: '二级节点',
+  // 默认插入的二级以下节点的文字
+  defaultInsertBelowSecondLevelNodeText: '分支主题',
+  // 展开收起按钮的颜色
+  expandBtnStyle: {
+    color: '#808080',
+    fill: '#fff'
+  },
+  // 自定义展开收起按钮的图标
+  expandBtnIcon: {
+    open: '',// svg字符串
+    close: ''
+  },
+  // 是否只有当鼠标在画布内才响应快捷键事件
+  enableShortcutOnlyWhenMouseInSvg: true,
+  // 是否开启节点动画过渡
+  enableNodeTransitionMove: true,
+  // 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
+  nodeTransitionMoveDuration: 300,
+  // 初始根节点的位置
+  initRootNodePosition: null,
+  // 导出png、svg、pdf时的图形内边距
+  exportPaddingX: 10,
+  exportPaddingY: 10,
+  // 节点文本编辑框的z-index
+  nodeTextEditZIndex: 3000,
+  // 节点备注浮层的z-index
+  nodeNoteTooltipZIndex: 3000,
+  // 是否在点击了画布外的区域时结束节点文本的编辑状态
+  isEndNodeTextEditOnClickOuter: true,
+  // 最大历史记录数
+  maxHistoryCount: 1000,
+  // 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示
+  alwaysShowExpandBtn: false,
+  // 扩展节点可插入的图标
+  iconList: [
+    // {
+    //   name: '',// 分组名称
+    //   type: '',// 分组的值
+    //   list: [// 分组下的图标列表
+    //     {
+    //       name: '',// 图标名称
+    //       icon:''// 图标，可以传svg或图片
+    //     }
+    //   ]
+    // }
+  ],
+  // 节点最大缓存数量
+  maxNodeCacheCount: 1000,
+  // 关联线默认文字
+  defaultAssociativeLineText: '关联',
+  // 思维导图适应画布大小时的内边距
+  fitPadding: 50,
+  // 是否开启按住ctrl键多选节点功能
+  enableCtrlKeyNodeSelection: true,
+  // 设置为左键多选节点，右键拖动画布
+  useLeftKeySelectionRightKeyDrag: false,
+  // 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例
+  beforeTextEdit: null
 }

-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-06 11:18:47 
- * @Desc: 思维导图 
- */
+//  思维导图
 class MindMap {
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-06 11:19:01 
-     * @Desc: 构造函数 
-     */
-    constructor(opt = {}) {
-        // 合并选项
-        this.opt = this.handleOpt(merge(defaultOpt, opt))
+  //  构造函数
+  constructor(opt = {}) {
+    // 合并选项
+    this.opt = this.handleOpt(merge(defaultOpt, opt))

-        // 容器元素
-        this.el = this.opt.el
-        this.elRect = this.el.getBoundingClientRect()
+    // 容器元素
+    this.el = this.opt.el
+    this.elRect = this.el.getBoundingClientRect()

-        // 画布宽高
-        this.width = this.elRect.width
-        this.height = this.elRect.height
+    // 画布宽高
+    this.width = this.elRect.width
+    this.height = this.elRect.height

-        // 画布
-        this.svg = SVG().addTo(this.el).size(this.width, this.height)
-        this.draw = this.svg.group()
+    // 画布
+    this.svg = SVG().addTo(this.el).size(this.width, this.height)
+    this.draw = this.svg.group()

-        // 节点id
-        this.uid = 0
+    // 节点id
+    this.uid = 1

-        // 初始化主题
-        this.initTheme()
+    // 初始化主题
+    this.initTheme()

-        // 事件类
-        this.event = new Event({
-            mindMap: this
-        })
+    // 事件类
+    this.event = new Event({
+      mindMap: this
+    })

-        // 按键类
-        this.keyCommand = new KeyCommand({
-            mindMap: this
-        })
+    // 按键类
+    this.keyCommand = new KeyCommand({
+      mindMap: this
+    })

-        // 命令类
-        this.command = new Command({
-            mindMap: this
-        })
+    // 命令类
+    this.command = new Command({
+      mindMap: this
+    })

-        // 渲染类
-        this.renderer = new Render({
-            mindMap: this
-        })
+    // 渲染类
+    this.renderer = new Render({
+      mindMap: this
+    })

-        // 视图操作类
-        this.view = new View({
-            mindMap: this,
-            draw: this.draw
-        })
+    // 视图操作类
+    this.view = new View({
+      mindMap: this,
+      draw: this.draw
+    })

-        // 导出类
-        this.doExport = new Export({
-            mindMap: this
-        })
+    // 批量执行类
+    this.batchExecution = new BatchExecution()

-        // 选择类
-        this.select = new Select({
-            mindMap: this
-        })
+    // 注册插件
+    MindMap.pluginList.forEach((plugin) => {
+      this.initPlugin(plugin)
+    })

-        // 拖动类
-        this.drag = new Drag({
-            mindMap: this
-        })
+    // 初始渲染
+    this.render()
+    setTimeout(() => {
+      this.command.addHistory()
+    }, 0)
+  }

-        // 批量执行类
-        this.batchExecution = new BatchExecution()
-
-        // 初始渲染
-        this.reRender()
-        setTimeout(() => {
-            this.command.addHistory()
-        }, 0)
+  //  配置参数处理
+  handleOpt(opt) {
+    // 检查布局配置
+    if (!layoutValueList.includes(opt.layout)) {
+      opt.layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
    }
+    // 检查主题配置
+    opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default'
+    return opt
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-01 22:15:22 
-     * @Desc: 配置参数处理 
-     */
-    handleOpt(opt) {
-        // 检查布局配置
-        if (!layoutValueList.includes(opt.layout)) {
-            opt.layout = 'logicalStructure'
+  //  渲染，部分渲染
+  render(callback, source = '') {
+    this.batchExecution.push('render', () => {
+      this.initTheme()
+      this.renderer.reRender = false
+      this.renderer.render(callback, source)
+    })
+  }
+
+  //  重新渲染
+  reRender(callback, source = '') {
+    this.batchExecution.push('render', () => {
+      this.draw.clear()
+      this.initTheme()
+      this.renderer.reRender = true
+      this.renderer.render(callback, source)
+    })
+  }
+
+  //  容器尺寸变化，调整尺寸
+  resize() {
+    this.elRect = this.el.getBoundingClientRect()
+    this.width = this.elRect.width
+    this.height = this.elRect.height
+    this.svg.size(this.width, this.height)
+  }
+
+  //  监听事件
+  on(event, fn) {
+    this.event.on(event, fn)
+  }
+
+  //  触发事件
+  emit(event, ...args) {
+    this.event.emit(event, ...args)
+  }
+
+  //  解绑事件
+  off(event, fn) {
+    this.event.off(event, fn)
+  }
+
+  //  设置主题
+  initTheme() {
+    // 合并主题配置
+    this.themeConfig = merge(theme[this.opt.theme], this.opt.themeConfig)
+    // 设置背景样式
+    Style.setBackgroundStyle(this.el, this.themeConfig)
+  }
+
+  //  设置主题
+  setTheme(theme) {
+    this.renderer.clearAllActive()
+    this.opt.theme = theme
+    this.render(null, CONSTANTS.CHANGE_THEME)
+  }
+
+  //  获取当前主题
+  getTheme() {
+    return this.opt.theme
+  }
+
+  //  设置主题配置
+  setThemeConfig(config) {
+    this.opt.themeConfig = config
+    // 检查改变的是否是节点大小无关的主题属性
+    let res = checkIsNodeSizeIndependenceConfig(config)
+    this.render(null, res ? '' : CONSTANTS.CHANGE_THEME)
+  }
+
+  //  获取自定义主题配置
+  getCustomThemeConfig() {
+    return this.opt.themeConfig
+  }
+
+  //  获取某个主题配置值
+  getThemeConfig(prop) {
+    return prop === undefined ? this.themeConfig : this.themeConfig[prop]
+  }
+
+  // 获取配置
+  getConfig(prop) {
+    return prop === undefined ? this.opt : this.opt[prop]
+  }
+
+  // 更新配置
+  updateConfig(opt = {}) {
+    this.opt = this.handleOpt(merge.all([defaultOpt, this.opt, opt]))
+  }
+
+  //  获取当前布局结构
+  getLayout() {
+    return this.opt.layout
+  }
+
+  //  设置布局结构
+  setLayout(layout) {
+    // 检查布局配置
+    if (!layoutValueList.includes(layout)) {
+      layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
+    }
+    this.opt.layout = layout
+    this.view.reset()
+    this.renderer.setLayout()
+    this.render()
+  }
+
+  //  执行命令
+  execCommand(...args) {
+    this.command.exec(...args)
+  }
+
+  //  动态设置思维导图数据，纯节点数据
+  setData(data) {
+    this.execCommand('CLEAR_ACTIVE_NODE')
+    this.command.clearHistory()
+    this.command.addHistory()
+    if (this.richText) {
+      this.renderer.renderTree = this.richText.handleSetData(data)
+    } else {
+      this.renderer.renderTree = data
+    }
+    this.reRender(() => {}, CONSTANTS.SET_DATA)
+  }
+
+  //  动态设置思维导图数据，包括节点数据、布局、主题、视图
+  setFullData(data) {
+    if (data.root) {
+      this.setData(data.root)
+    }
+    if (data.layout) {
+      this.setLayout(data.layout)
+    }
+    if (data.theme) {
+      if (data.theme.template) {
+        this.setTheme(data.theme.template)
+      }
+      if (data.theme.config) {
+        this.setThemeConfig(data.theme.config)
+      }
+    }
+    if (data.view) {
+      this.view.setTransformData(data.view)
+    }
+  }
+
+  //  获取思维导图数据，节点树、主题、布局等
+  getData(withConfig) {
+    let nodeData = this.command.removeDataUid(this.command.getCopyData())
+    let data = {}
+    if (withConfig) {
+      data = {
+        layout: this.getLayout(),
+        root: nodeData,
+        theme: {
+          template: this.getTheme(),
+          config: this.getCustomThemeConfig()
+        },
+        view: this.view.getTransformData()
+      }
+    } else {
+      data = nodeData
+    }
+    return simpleDeepClone(data)
+  }
+
+  //  导出
+  async export(...args) {
+    let result = await this.doExport.export(...args)
+    return result
+  }
+
+  //  转换位置
+  toPos(x, y) {
+    return {
+      x: x - this.elRect.left,
+      y: y - this.elRect.top
+    }
+  }
+
+  //  设置只读模式、编辑模式
+  setMode(mode) {
+    if (![CONSTANTS.MODE.READONLY, CONSTANTS.MODE.EDIT].includes(mode)) {
+      return
+    }
+    this.opt.readonly = mode === CONSTANTS.MODE.READONLY
+    if (this.opt.readonly) {
+      // 取消当前激活的元素
+      this.renderer.clearAllActive()
+    }
+    this.emit('mode_change', mode)
+  }
+
+  // 获取svg数据
+  getSvgData({ paddingX = 0, paddingY = 0 } = {}) {
+    const svg = this.svg
+    const draw = this.draw
+    // 保存原始信息
+    const origWidth = svg.width()
+    const origHeight = svg.height()
+    const origTransform = draw.transform()
+    const elRect = this.el.getBoundingClientRect()
+    // 去除放大缩小的变换效果
+    draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
+    // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
+    const rect = draw.rbox()
+    // 内边距
+    rect.width += paddingX
+    rect.height += paddingY
+    draw.translate(paddingX / 2, paddingY / 2)
+    // 将svg设置为实际内容的宽高
+    svg.size(rect.width, rect.height)
+    // 把实际内容变换
+    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
+    // 克隆一份数据
+    let clone = svg.clone()
+    // 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题
+    if ((rect.width > origWidth || rect.height >  origHeight) && this.watermark && this.watermark.hasWatermark()) {
+      this.width = rect.width
+      this.height = rect.height
+      this.watermark.draw()
+      clone = svg.clone()
+      this.width = origWidth
+      this.height = origHeight
+      this.watermark.draw()
+    }
+    // 恢复原先的大小和变换信息
+    svg.size(origWidth, origHeight)
+    draw.transform(origTransform)
+
+    return {
+      svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
+      svgHTML: clone.svg(), // svg字符串
+      rect: {
+        ...rect, // 思维导图图形未缩放时的位置尺寸等信息
+        ratio: rect.width / rect.height // 思维导图图形的宽高比
+      },
+      origWidth, // 画布宽度
+      origHeight, // 画布高度
+      scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
+      scaleY: origTransform.scaleY // 思维导图图形的垂直缩放值
+    }
+  }
+
+  // 添加插件
+  addPlugin(plugin, opt) {
+    let index = MindMap.hasPlugin(plugin)
+    if (index === -1) {
+      MindMap.usePlugin(plugin, opt)
+      this.initPlugin(plugin)
+    }
+  }
+
+  // 移除插件
+  removePlugin(plugin) {
+    let index = MindMap.hasPlugin(plugin)
+    if (index !== -1) {
+      MindMap.pluginList.splice(index, 1)
+      if (this[plugin.instanceName]) {
+        if (this[plugin.instanceName].beforePluginRemove) {
+          this[plugin.instanceName].beforePluginRemove()
        }
-        // 检查主题配置
-        opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default'
-        return opt
+        delete this[plugin.instanceName]
+      }
    }
+  }

-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-06 18:47:29 
-     * @Desc: 渲染，部分渲染
-     */
-    render() {
-        this.batchExecution.push('render', () => {
-            this.initTheme()
-            this.renderer.reRender = false
-            this.renderer.render()
-        })
-    }
+  // 实例化插件
+  initPlugin(plugin) {
+    this[plugin.instanceName] = new plugin({
+      mindMap: this,
+      pluginOpt: plugin.pluginOpt
+    })
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-08 22:05:11 
-     * @Desc: 重新渲染 
-     */
-    reRender() {
-        this.batchExecution.push('render', () => {
-            this.draw.clear()
-            this.initTheme()
-            this.renderer.reRender = true
-            this.renderer.render()
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 21:16:52 
-     * @Desc: 容器尺寸变化，调整尺寸 
-     */
-    resize() {
-        this.elRect = this.el.getBoundingClientRect()
-        this.width = this.elRect.width
-        this.height = this.elRect.height
-        this.svg.size(this.width, this.height)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 13:25:50 
-     * @Desc: 监听事件 
-     */
-    on(event, fn) {
-        this.event.on(event, fn)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 13:51:35 
-     * @Desc: 触发事件 
-     */
-    emit(event, ...args) {
-        this.event.emit(event, ...args)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 13:53:54 
-     * @Desc: 解绑事件 
-     */
-    off(event, fn) {
-        this.event.off(event, fn)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-05 13:32:43 
-     * @Desc: 设置主题
-     */
-    initTheme() {
-        // 合并主题配置
-        this.themeConfig = merge(theme[this.opt.theme], this.opt.themeConfig)
-        // 设置背景样式
-        Style.setBackgroundStyle(this.el, this.themeConfig)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-05 13:52:08 
-     * @Desc: 设置主题 
-     */
-    setTheme(theme) {
-        this.renderer.clearAllActive()
-        this.opt.theme = theme
-        this.reRender()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-06-25 23:52:37 
-     * @Desc: 获取当前主题 
-     */
-    getTheme() {
-        return this.opt.theme
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-05 13:50:17 
-     * @Desc: 设置主题配置 
-     */
-    setThemeConfig(config) {
-        this.opt.themeConfig = config
-        this.reRender()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-08-01 10:38:34 
-     * @Desc: 获取自定义主题配置 
-     */
-    getCustomThemeConfig() {
-        return this.opt.themeConfig
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-05 14:01:29 
-     * @Desc: 获取某个主题配置值 
-     */
-    getThemeConfig(prop) {
-        return prop === undefined ? this.themeConfig : this.themeConfig[prop]
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-07-13 16:17:06 
-     * @Desc: 获取当前布局结构 
-     */
-    getLayout() {
-        return this.opt.layout
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-07-13 16:17:33 
-     * @Desc: 设置布局结构 
-     */
-    setLayout(layout) {
-        // 检查布局配置
-        if (!layoutValueList.includes(layout)) {
-            layout = 'logicalStructure'
-        }
-        this.opt.layout = layout
-        this.renderer.setLayout()
-        this.render()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 13:01:00 
-     * @Desc: 执行命令 
-     */
-    execCommand(...args) {
-        this.command.exec(...args)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-08-03 22:58:12 
-     * @Desc: 动态设置思维导图数据 
-     */
-    setData(data) {
-        this.execCommand('CLEAR_ACTIVE_NODE')
-        this.command.clearHistory()
-        this.renderer.renderTree = data
-        this.reRender()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-01 22:06:38 
-     * @Desc: 导出 
-     */
-    async export(...args) {
-        let result = await this.doExport.export(...args)
-        return result
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 09:20:03 
-     * @Desc: 转换位置 
-     */
-    toPos(x, y) {
-        return {
-            x: x - this.elRect.left,
-            y: y - this.elRect.top
-        }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-06-08 14:12:38 
-     * @Desc: 设置只读模式、编辑模式 
-     */
-    setMode(mode) {
-        if (!['readonly', 'edit'].includes(mode)) {
-            return
-        }
-        this.opt.readonly = mode === 'readonly'
-        if (this.opt.readonly) {
-            // 取消当前激活的元素
-            this.renderer.clearAllActive()
-        }
-        this.emit('mode_change', mode)
-    }
+  // 销毁
+  destroy() {
+    // 移除插件
+    [...MindMap.pluginList].forEach((plugin) => {
+      this[plugin.instanceName] = null
+    })
+    // 解绑事件
+    this.event.unbind()
+    // 移除画布节点
+    this.svg.remove()
+    // 去除给容器元素设置的背景样式
+    Style.removeBackgroundStyle(this.el)
+    this.el = null
+  }
 }

-export default MindMap
+// 插件列表
+MindMap.pluginList = []
+MindMap.usePlugin = (plugin, opt = {}) => {
+  plugin.pluginOpt = opt
+  MindMap.pluginList.push(plugin)
+  return MindMap
+}
+MindMap.hasPlugin = (plugin) => {
+  return MindMap.pluginList.findIndex((item) => {
+    return item === plugin
+  })
+}
+
+// 定义新主题
+MindMap.defineTheme = (name, config = {}) => {
+  if (theme[name]) {
+    return new Error('该主题名称已存在')
+  }
+  theme[name] = merge(defaultTheme, config)
+}
+
+export default MindMap
--- a/simple-mind-map/package-lock.json
+++ b/simple-mind-map/package-lock.json
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.1.8",
+  "version": "0.6.2",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
@@ -17,14 +17,23 @@
    "type": "git",
    "url": "https://github.com/wanglin2/mind-map"
  },
-  "scripts": {},
-  "main": "index.js",
-  "type": "module",
+  "scripts": {
+    "lint": "eslint src/",
+    "format": "prettier --write ."
+  },
+  "module": "index.js",
+  "__main": "./dist/simpleMindMap.umd.min.js",
  "dependencies": {
    "@svgdotjs/svg.js": "^3.0.16",
-    "canvg": "^3.0.7",
    "deepmerge": "^1.5.2",
-    "eventemitter3": "^4.0.7"
+    "eventemitter3": "^4.0.7",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.1",
+    "jszip": "^3.10.1",
+    "mdast-util-from-markdown": "^1.3.0",
+    "quill": "^1.3.6",
+    "uuid": "^9.0.0",
+    "xml-js": "^1.6.11"
  },
  "keywords": [
    "javascript",
@@ -32,5 +41,9 @@
    "mind-map",
    "mindMap",
    "MindMap"
-  ]
+  ],
+  "devDependencies": {
+    "eslint": "^8.25.0",
+    "prettier": "^2.7.1"
+  }
 }
--- a/simple-mind-map/scripts/walkJsFiles.js
+++ b/simple-mind-map/scripts/walkJsFiles.js
@@ -0,0 +1,46 @@
+// 遍历所有js文件
+const path = require('path')
+const fs = require('fs')
+
+const entryPath = path.resolve(__dirname, '../src')
+
+const transform = dir => {
+  let dirs = fs.readdirSync(dir)
+  dirs.forEach(item => {
+    let file = path.join(dir, item)
+    if (fs.statSync(file).isDirectory()) {
+      transform(file)
+    } else if (/\.js$/.test(file)) {
+      transformFile(file)
+    }
+  })
+}
+
+const transformFile = file => {
+  console.log(file);
+  let content = fs.readFileSync(file, 'utf-8')
+  countCodeLines(content)
+  // transformComments(file, content)
+}
+
+// 统计代码行数
+let totalLines = 0
+const countCodeLines = (content) => {
+  totalLines += content.split(/\n/).length
+}
+
+// 转换注释类型
+const transformComments = (file, content) => {
+  console.log('当前转换文件：', file)
+  content = content.replace(/\/\*\*[^/]+\*\//g, str => {
+    let res = /@Desc:([^\n]+)\n/g.exec(str)
+    if (res.length > 0) {
+      return '// ' + res[1]
+    }
+  })
+  fs.writeFileSync(file, content)
+}
+
+transform(entryPath)
+transformFile(path.join(__dirname, '../index.js'))
+console.log(totalLines);
--- a/simple-mind-map/src/BatchExecution.js
+++ b/simple-mind-map/src/BatchExecution.js
@@ -1,85 +0,0 @@
-/** 
- * @Author: 王林 
- * @Date: 2021-06-27 13:16:23 
- * @Desc: 在下一个事件循环里执行任务 
- */
-const nextTick = function (fn, ctx) {
-    let pending = false
-    let timerFunc = null
-    let handle = () => {
-        pending = false
-        ctx ? fn.call(ctx) : fn()
-    }
-    // 支持MutationObserver接口的话使用MutationObserver
-    if (typeof MutationObserver !== 'undefined') {
-        let counter = 1
-        let observer = new MutationObserver(handle)
-        let textNode = document.createTextNode(counter)
-        observer.observe(textNode, {
-            characterData: true// 设为 true 表示监视指定目标节点或子节点树中节点所包含的字符数据的变化
-        })
-        timerFunc = function () {
-            counter = (counter + 1) % 2// counter会在0和1两者循环变化
-            textNode.data = counter// 节点变化会触发回调handle，
-        }
-    } else {// 否则使用定时器
-        timerFunc = setTimeout
-    }
-    return function (cb, ctx) {
-        if (pending) return
-        pending = true
-        timerFunc(handle, 0)
-    }
-}
-
-
-/** 
- * @Author: 王林 
- * @Date: 2021-06-26 22:40:52 
- * @Desc: 批量执行 
- */
-class BatchExecution {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-06-26 22:41:41 
-     * @Desc: 构造函数 
-     */
-    constructor() {
-        this.has = {}
-        this.queue = []
-        this.nextTick = nextTick(this.flush, this)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-06-27 12:54:04 
-     * @Desc: 添加任务 
-     */
-    push(name, fn) {
-        if (this.has[name]) {
-            return;
-        }
-        this.has[name] = true
-        this.queue.push({
-            name,
-            fn
-        })
-        this.nextTick()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-06-27 13:09:24 
-     * @Desc:  执行队列
-     */
-    flush() {
-        let fns = this.queue.slice(0)
-        this.queue = []
-        fns.forEach(({ name, fn }) => {
-            this.has[name] = false
-            fn()
-        })
-    }
-}
-
-export default BatchExecution
--- a/simple-mind-map/src/Command.js
+++ b/simple-mind-map/src/Command.js
@@ -1,152 +0,0 @@
-import { copyRenderTree, simpleDeepClone } from './utils';
-
-/** 
- * @Author: 王林 
- * @Date: 2021-05-04 13:10:06 
- * @Desc: 命令类 
- */
-class Command {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 13:10:24 
-     * @Desc: 构造函数 
-     */
-    constructor(opt = {}) {
-        this.opt = opt
-        this.mindMap = opt.mindMap
-        this.commands = {}
-        this.history = []
-        this.activeHistoryIndex = 0
-        // 注册快捷键
-        this.registerShortcutKeys()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-08-03 23:06:55 
-     * @Desc: 清空历史数据 
-     */
-    clearHistory() {
-        this.history = []
-        this.activeHistoryIndex = 0
-        this.mindMap.emit('back_forward', 0, 0)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-08-02 23:23:19 
-     * @Desc: 注册快捷键 
-     */
-    registerShortcutKeys() {
-        this.mindMap.keyCommand.addShortcut('Control+z', () => {
-            this.mindMap.execCommand('BACK')
-        })
-        this.mindMap.keyCommand.addShortcut('Control+y', () => {
-            this.mindMap.execCommand('FORWARD')
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 13:12:30 
-     * @Desc: 执行命令 
-     */
-    exec(name, ...args) {
-        if (this.commands[name]) {
-            this.commands[name].forEach((fn) => {
-                fn(...args)
-            })
-            if (name === 'BACK' || name === 'FORWARD') {
-                return;
-            }
-            this.addHistory()
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 13:13:01 
-     * @Desc: 添加命令 
-     */
-    add(name, fn) {
-        if (this.commands[name]) {
-            this.commands[name].push(fn)
-        } else {
-            this.commands[name] = [fn]
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-15 23:02:41 
-     * @Desc: 移除命令 
-     */
-    remove(name, fn) {
-        if (!this.commands[name]) {
-            return
-        }
-        if (!fn) {
-            this.commands[name] = []
-            delete this.commands[name]
-        } else {
-            let index = this.commands[name].find((item) => {
-                return item === fn;
-            })
-            if (index !== -1) {
-                this.commands[name].splice(index, 1)
-            }
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 14:35:43 
-     * @Desc: 添加回退数据 
-     */
-    addHistory() {
-        let data = this.getCopyData()
-        this.history.push(simpleDeepClone(data))
-        this.activeHistoryIndex = this.history.length - 1
-        this.mindMap.emit('data_change', data)
-        this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 22:34:53 
-     * @Desc: 回退 
-     */
-    back(step = 1) {
-        if (this.activeHistoryIndex - step >= 0) {
-            this.activeHistoryIndex -= step
-            this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
-            return simpleDeepClone(this.history[this.activeHistoryIndex]);
-        }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-07-12 10:45:31 
-     * @Desc: 前进 
-     */
-    forward(step = 1) {
-        let len = this.history.length
-        if (this.activeHistoryIndex + step <= len - 1) {
-            this.activeHistoryIndex += step
-            this.mindMap.emit('back_forward', this.activeHistoryIndex,)
-            return simpleDeepClone(this.history[this.activeHistoryIndex]);
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 15:02:58 
-     * @Desc: 获取渲染树数据副本 
-     */
-    getCopyData() {
-        return copyRenderTree({}, this.mindMap.renderer.renderTree)
-    }
-}
-
-export default Command
--- a/simple-mind-map/src/Drag.js
+++ b/simple-mind-map/src/Drag.js
@@ -1,296 +0,0 @@
-import {
-    bfsWalk,
-    throttle
-} from './utils'
-import Base from './layouts/Base'
-
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-11-23 17:38:55 
- * @Desc: 节点拖动类 
- */
-class Drag extends Base {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 22:35:16 
-     * @Desc: 构造函数 
-     */
-    constructor({
-        mindMap
-    }) {
-        super(mindMap.renderer)
-        this.mindMap = mindMap
-        this.reset()
-        this.bindEvent()
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-11-23 19:33:56 
-     * @Desc: 复位 
-     */
-    reset() {
-        // 当前拖拽节点
-        this.node = null
-        // 当前重叠节点
-        this.overlapNode = null
-        // 当前上一个同级节点
-        this.prevNode = null
-        // 当前下一个同级节点
-        this.nextNode = null
-        // 画布的变换数据
-        this.drawTransform = null
-        // 克隆节点
-        this.clone = null
-        // 连接线
-        this.line = null
-        // 同级位置占位符
-        this.placeholder = null
-        // 鼠标按下位置和节点左上角的偏移量
-        this.offsetX = 0
-        this.offsetY = 0
-        // 克隆节点左上角的坐标
-        this.cloneNodeLeft = 0
-        this.cloneNodeTop = 0
-        // 当前鼠标是否按下
-        this.isMousedown = false
-        // 拖拽的鼠标位置变量
-        this.mouseDownX = 0
-        this.mouseDownY = 0
-        this.mouseMoveX = 0
-        this.mouseMoveY = 0
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 22:36:36 
-     * @Desc: 绑定事件 
-     */
-    bindEvent() {
-        this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
-        this.mindMap.on('node_mousedown', (node, e) => {
-            if (this.mindMap.opt.readonly) {
-                return
-            }
-            if (e.which !== 1 || node.isRoot) {
-                return
-            }
-            e.preventDefault()
-            // 计算鼠标按下的位置距离节点左上角的距离
-            this.drawTransform = this.mindMap.draw.transform()
-            let {
-                scaleX,
-                scaleY,
-                translateX,
-                translateY
-            } = this.drawTransform
-            this.offsetX = e.clientX - (node.left * scaleX + translateX)
-            this.offsetY = e.clientY - (node.top * scaleY + translateY)
-            // 
-            this.node = node
-            this.isMousedown = true
-            let {
-                x,
-                y
-            } = this.mindMap.toPos(e.clientX, e.clientY)
-            this.mouseDownX = x
-            this.mouseDownY = y
-        })
-        this.mindMap.on('mousemove', (e) => {
-            if (this.mindMap.opt.readonly) {
-                return
-            }
-            if (!this.isMousedown) {
-                return
-            }
-            e.preventDefault()
-            let {
-                x,
-                y
-            } = this.mindMap.toPos(e.clientX, e.clientY)
-            this.mouseMoveX = x
-            this.mouseMoveY = y
-            if ((Math.abs(x - this.mouseDownX) <= 10 && Math.abs(y - this.mouseDownY) <= 10) && !this.node.isDrag) {
-                return
-            }
-            this.mindMap.renderer.clearAllActive()
-            this.onMove(x, y)
-        })
-        this.onMouseup = this.onMouseup.bind(this)
-        this.mindMap.on('node_mouseup', this.onMouseup)
-        this.mindMap.on('mouseup', this.onMouseup)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-11-23 19:38:02 
-     * @Desc: 鼠标松开事件 
-     */
-    onMouseup() {
-        if (!this.isMousedown) {
-            return;
-        }
-        this.isMousedown = false
-        this.node.isDrag = false
-        this.node.show()
-        this.removeCloneNode()
-        // 存在重叠子节点，则移动作为其子节点
-        if (this.overlapNode) {
-            this.mindMap.renderer.setNodeActive(this.overlapNode, false)
-            this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode)
-        } else if (this.prevNode) { // 存在前一个相邻节点，作为其下一个兄弟节点
-            this.mindMap.renderer.setNodeActive(this.prevNode, false)
-            this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode)
-        } else if (this.nextNode) { // 存在下一个相邻节点，作为其前一个兄弟节点
-            this.mindMap.renderer.setNodeActive(this.nextNode, false)
-            this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
-        }
-        this.reset()
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-11-23 19:34:53 
-     * @Desc: 创建克隆节点 
-     */
-    createCloneNode() {
-        if (!this.clone) {
-            // 节点
-            this.clone = this.node.group.clone()
-            this.clone.opacity(0.5)
-            this.clone.css('z-index', 99999)
-            this.node.isDrag = true
-            this.node.hide()
-            // 连接线
-            this.line = this.draw.path()
-            this.line.opacity(0.5)
-            this.node.style.line(this.line)
-            // 同级位置占位符
-            this.placeholder = this.draw.rect().fill({
-                color: this.node.style.merge('lineColor', true)
-            })
-            this.mindMap.draw.add(this.clone)
-        }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-11-23 19:35:16 
-     * @Desc: 移除克隆节点 
-     */
-    removeCloneNode() {
-        if (!this.clone) {
-            return
-        }
-        this.clone.remove()
-        this.line.remove()
-        this.placeholder.remove()
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-11-23 18:53:47 
-     * @Desc: 拖动中 
-     */
-    onMove(x, y) {
-        if (!this.isMousedown) {
-            return;
-        }
-        this.createCloneNode()
-        let {
-            scaleX,
-            scaleY,
-            translateX,
-            translateY
-        } = this.drawTransform
-        this.cloneNodeLeft = x - this.offsetX
-        this.cloneNodeTop = y - this.offsetY
-        x = (this.cloneNodeLeft - translateX) / scaleX
-        y = (this.cloneNodeTop - translateY) / scaleY
-        let t = this.clone.transform()
-        this.clone.translate(x - t.translateX, y - t.translateY)
-        // 连接线
-        let parent = this.node.parent
-        this.line.plot(this.quadraticCurvePath(parent.left + parent.width / 2, parent.top + parent.height / 2, x + this.node.width / 2, y + this.node.height / 2))
-        this.checkOverlapNode()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 10:20:43 
-     * @Desc: 检测重叠节点 
-     */
-    checkOverlapNode() {
-        if (!this.drawTransform) {
-            return
-        }
-        let {
-            scaleX,
-            scaleY,
-            translateX,
-            translateY
-        } = this.drawTransform
-        let checkRight = this.cloneNodeLeft + this.node.width * scaleX
-        let checkBottom = this.cloneNodeTop + this.node.height * scaleX
-        this.overlapNode = null
-        this.prevNode = null
-        this.nextNode = null
-        this.placeholder.size(0, 0)
-        bfsWalk(this.mindMap.renderer.root, (node) => {
-            if (node.nodeData.data.isActive) {
-                this.mindMap.renderer.setNodeActive(node, false)
-            }
-            if (node === this.node || this.node.isParent(node)) {
-                return
-            }
-            if (this.overlapNode || this.prevNode && this.nextNode) {
-                return
-            }
-            let {
-                left,
-                top,
-                width,
-                height
-            } = node
-            let _left = left
-            let _top = top
-            let _bottom = top + height
-            let right = (left + width) * scaleX + translateX
-            let bottom = (top + height) * scaleY + translateY
-            left = left * scaleX + translateX
-            top = top * scaleY + translateY
-            // 检测是否重叠
-            if (!this.overlapNode) {
-                if (
-                    left <= checkRight && right >= this.cloneNodeLeft &&
-                    top <= checkBottom && bottom >= this.cloneNodeTop
-                ) {
-                    this.overlapNode = node
-                }
-            }
-            // 检测兄弟节点位置
-            if (!this.prevNode && !this.nextNode && this.node.isBrother(node)) {
-                if (left <= checkRight && right >= this.cloneNodeLeft) {
-                    if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
-                        this.prevNode = node
-                        this.placeholder.size(node.width, 10).move(_left, _bottom)
-                    } else if (checkBottom < top && checkBottom >= top - 10) {
-                        this.nextNode = node
-                        this.placeholder.size(node.width, 10).move(_left, _top - 10)
-                    }
-                }
-            }
-        })
-        if (this.overlapNode) {
-            this.mindMap.renderer.setNodeActive(this.overlapNode, true)
-        }
-    }
-}
-
-export default Drag
--- a/simple-mind-map/src/Event.js
+++ b/simple-mind-map/src/Event.js
@@ -1,182 +0,0 @@
-import EventEmitter from 'eventemitter3'
-
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-07 14:53:09 
- * @Desc: 事件类 
- */
-class Event extends EventEmitter {
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 14:53:25 
-     * @Desc: 构造函数 
-     */
-    constructor(opt = {}) {
-        super()
-        this.opt = opt
-        this.mindMap = opt.mindMap
-        this.isLeftMousedown = false
-        this.mousedownPos = {
-            x: 0,
-            y: 0
-        }
-        this.mousemovePos = {
-            x: 0,
-            y: 0
-        }
-        this.mousemoveOffset = {
-            x: 0,
-            y: 0
-        }
-        this.bindFn()
-        this.bind()
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:52:24 
-     * @Desc: 绑定函数上下文 
-     */
-    bindFn() {
-        this.onDrawClick = this.onDrawClick.bind(this)
-        this.onMousedown = this.onMousedown.bind(this)
-        this.onMousemove = this.onMousemove.bind(this)
-        this.onMouseup = this.onMouseup.bind(this)
-        this.onMousewheel = this.onMousewheel.bind(this)
-        this.onContextmenu = this.onContextmenu.bind(this)
-        this.onSvgMousedown = this.onSvgMousedown.bind(this)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 14:53:43 
-     * @Desc: 绑定事件 
-     */
-    bind() {
-        this.mindMap.svg.on('click', this.onDrawClick)
-        this.mindMap.el.addEventListener('mousedown', this.onMousedown)
-        this.mindMap.svg.on('mousedown', this.onSvgMousedown)
-        window.addEventListener('mousemove', this.onMousemove)
-        window.addEventListener('mouseup', this.onMouseup)
-        // 兼容火狐浏览器
-        if(window.navigator.userAgent.toLowerCase().indexOf("firefox") != -1){
-            this.mindMap.el.addEventListener('DOMMouseScroll', this.onMousewheel)
-        } else {
-            this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
-        }
-        this.mindMap.svg.on('contextmenu', this.onContextmenu)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:40:51 
-     * @Desc: 解绑事件 
-     */
-    unbind() {
-        this.mindMap.svg.off('click', this.onDrawClick)
-        this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
-        window.removeEventListener('mousemove', this.onMousemove)
-        window.removeEventListener('mouseup', this.onMouseup)
-        this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
-        this.mindMap.svg.off('contextmenu', this.onContextmenu)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 13:19:39 
-     * @Desc:  画布的单击事件
-     */
-    onDrawClick(e) {
-        this.emit('draw_click', e)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-16 13:37:30 
-     * @Desc:  svg画布的鼠标按下事件
-     */
-    onSvgMousedown(e) {
-        this.emit('svg_mousedown', e)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:17:35 
-     * @Desc: 鼠标按下事件 
-     */
-    onMousedown(e) {
-        // e.preventDefault()
-        // 鼠标左键
-        if (e.which === 1) {
-            this.isLeftMousedown = true
-        }
-        this.mousedownPos.x = e.clientX
-        this.mousedownPos.y = e.clientY
-        this.emit('mousedown', e, this)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:18:32 
-     * @Desc: 鼠标移动事件 
-     */
-    onMousemove(e) {
-        // e.preventDefault()
-        this.mousemovePos.x = e.clientX
-        this.mousemovePos.y = e.clientY
-        this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
-        this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
-        this.emit('mousemove', e, this)
-        if (this.isLeftMousedown) {
-            this.emit('drag', e, this)
-        }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:18:57 
-     * @Desc: 鼠标松开事件 
-     */
-    onMouseup(e) {
-        this.isLeftMousedown = false
-        this.emit('mouseup', e, this)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:46:27 
-     * @Desc: 鼠标滚动 
-     */
-    onMousewheel(e) {
-        e.stopPropagation()
-        e.preventDefault()
-        let dir
-        if ((e.wheelDeltaY || e.detail) > 0) {
-            dir = 'up'
-        } else {
-            dir = 'down'
-        }
-        this.emit('mousewheel', e, dir, this)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 22:34:13 
-     * @Desc: 鼠标右键菜单事件 
-     */
-    onContextmenu(e) {
-        e.preventDefault()
-        this.emit('contextmenu', e)
-    }
-}
-
-export default Event
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -1,226 +0,0 @@
-import { imgToDataUrl, downloadFile } from './utils'
-const URL = window.URL || window.webkitURL || window
-
-/** 
- * @Author: 王林 
- * @Date: 2021-07-01 22:05:16 
- * @Desc: 导出类 
- */
-class Export {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-01 22:05:42 
-     * @Desc: 构造函数 
-     */
-    constructor(opt) {
-        this.mindMap = opt.mindMap
-        this.exportPadding = this.mindMap.opt.exportPadding
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-02 07:44:06 
-     * @Desc: 导出 
-     */
-    async export(type, isDownload = true, name = '思维导图') {
-        if (this[type]) {
-            let result = await this[type]()
-            if (isDownload) {
-                downloadFile(result, name + '.' + type)
-            }
-            return result
-        } else {
-            return null
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-04 14:57:40 
-     * @Desc: 获取svg数据 
-     */
-    async getSvgData() {
-        const svg = this.mindMap.svg
-        const draw = this.mindMap.draw
-        // 保存原始信息
-        const origWidth = svg.width()
-        const origHeight = svg.height()
-        const origTransform = draw.transform()
-        const elRect = this.mindMap.el.getBoundingClientRect()
-        // 去除放大缩小的变换效果
-        draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
-        // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
-        const rect = draw.rbox()
-        // 将svg设置为实际内容的宽高
-        svg.size(rect.width, rect.height)
-        // 把实际内容变换
-        draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
-        // 克隆一份数据
-        const clone = svg.clone()
-        // 恢复原先的大小和变换信息
-        svg.size(origWidth, origHeight)
-        draw.transform(origTransform)
-        // 把图片的url转换成data:url类型，否则导出会丢失图片
-        let imageList = clone.find('image')
-        let task = imageList.map(async (item) => {
-            let imgUlr = item.attr('href') || item.attr('xlink:href')
-            let imgData = await imgToDataUrl(imgUlr)
-            item.attr('href', imgData)
-        })
-        await Promise.all(task)
-        return {
-            node: clone,
-            str: clone.svg()
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-04 15:25:19 
-     * @Desc:  svg转png
-     */
-    svgToPng(svgSrc) {
-        return new Promise((resolve, reject) => {
-            const img = new Image()
-            // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
-            img.setAttribute('crossOrigin', 'anonymous')
-            img.onload = async () => {
-                try {
-                    let canvas = document.createElement('canvas')
-                    canvas.width = img.width + this.exportPadding * 2
-                    canvas.height = img.height + this.exportPadding * 2
-                    let ctx = canvas.getContext('2d')
-                    // 绘制背景
-                    await this.drawBackgroundToCanvas(ctx, canvas.width, canvas.height)
-                    // 图片绘制到canvas里
-                    ctx.drawImage(img, 0, 0, img.width, img.height, this.exportPadding, this.exportPadding, img.width, img.height)
-                    resolve(canvas.toDataURL())
-                } catch (error) {
-                    reject(error)
-                }
-            }
-            img.onerror = (e) => {
-                reject(e)
-            }
-            img.src = svgSrc
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-04 15:32:07 
-     * @Desc: 在canvas上绘制思维导图背景
-     */
-    drawBackgroundToCanvas(ctx, width, height) {
-        return new Promise((resolve, rejct) => {
-            let { backgroundColor = '#fff', backgroundImage, backgroundRepeat = "repeat" } = this.mindMap.themeConfig
-            // 背景颜色
-            ctx.save()
-            ctx.rect(0, 0, width, height)
-            ctx.fillStyle = backgroundColor
-            ctx.fill()
-            ctx.restore()
-            // 背景图片
-            if (backgroundImage && backgroundImage !== 'none') {
-                ctx.save()
-                let img = new Image()
-                img.src = backgroundImage
-                img.onload = () => {
-                    let pat = ctx.createPattern(img, backgroundRepeat)
-                    ctx.rect(0, 0, width, height)
-                    ctx.fillStyle = pat
-                    ctx.fill()
-                    ctx.restore()
-                    resolve()
-                }
-                img.onerror = (e) => {
-                    rejct(e)
-                }
-            } else {
-                resolve()
-            }
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-01 22:09:51 
-     * @Desc: 导出为png 
-     * 方法1.把svg的图片都转化成data:url格式，再转换
-     * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
-     */
-    async png() {
-        let { str } = await this.getSvgData()
-        // 转换成blob数据
-        let blob = new Blob([str], {
-            type: 'image/svg+xml'
-        })
-        // 转换成data:url数据
-        let svgUrl = URL.createObjectURL(blob)
-        // 绘制到canvas上
-        let imgDataUrl = await this.svgToPng(svgUrl)
-        URL.revokeObjectURL(svgUrl)
-        return imgDataUrl
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-04 15:32:07 
-     * @Desc: 在svg上绘制思维导图背景
-     */
-    drawBackgroundToSvg(svg) {
-        return new Promise(async (resolve, rejct) => {
-            let { backgroundColor = '#fff', backgroundImage, backgroundRepeat = "repeat" } = this.mindMap.themeConfig
-            // 背景颜色
-            svg.css('background-color', backgroundColor)
-            // 背景图片
-            if (backgroundImage && backgroundImage !== 'none') {
-                let imgDataUrl = await imgToDataUrl(backgroundImage)
-                svg.css('background-image', `url(${imgDataUrl})`)
-                svg.css('background-repeat', backgroundRepeat)
-                resolve()
-            } else {
-                resolve()
-            }
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-04 14:54:07 
-     * @Desc: 导出为svg 
-     */
-    async svg() {
-        let { node } = await this.getSvgData()
-        await this.drawBackgroundToSvg(node)
-        let str = node.svg()
-        // 转换成blob数据
-        let blob = new Blob([str], {
-            type: 'image/svg+xml'
-        })
-        return URL.createObjectURL(blob)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-08-03 22:19:17 
-     * @Desc: 导出为json 
-     */
-    json () {
-        let data = this.mindMap.command.getCopyData()
-        let str = JSON.stringify(data)
-        let blob = new Blob([str])
-        return URL.createObjectURL(blob)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-08-03 22:24:24 
-     * @Desc: 专有文件，其实就是json文件 
-     */
-    smm () {
-        return this.json();
-    }
-}
-
-export default Export
--- a/simple-mind-map/src/KeyCommand.js
+++ b/simple-mind-map/src/KeyCommand.js
@@ -1,142 +0,0 @@
-import { keyMap } from './utils/keyMap';
-/** 
- * @Author: 王林 
- * @Date: 2021-04-24 15:20:46 
- * @Desc: 快捷按键、命令处理类 
- */
-export default class KeyCommand {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 15:21:32 
-     * @Desc: 构造函数 
-     */
-    constructor(opt) {
-        this.opt = opt
-        this.mindMap = opt.mindMap
-        this.shortcutMap = {
-            //Enter: [fn]
-        }
-        this.bindEvent()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 15:23:22 
-     * @Desc: 绑定事件 
-     */
-    bindEvent() {
-        window.addEventListener('keydown', (e) => {
-            Object.keys(this.shortcutMap).forEach((key) => {
-                if (this.checkKey(e, key)) {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    this.shortcutMap[key].forEach((fn) => {
-                        fn()
-                    })
-                }
-            })
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 19:24:53 
-     * @Desc: 检查键值是否符合 
-     */
-    checkKey(e, key) {
-        let o = this.getOriginEventCodeArr(e)
-        let k = this.getKeyCodeArr(key)
-        if (o.length !== k.length) {
-            return false
-        }
-        for (let i = 0; i < o.length; i++) {
-            let index = k.findIndex((item) => {
-                return item === o[i];
-            })
-            if (index === -1) {
-                return false
-            } else {
-                k.splice(index, 1)
-            }
-        }
-        return true
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 19:15:19 
-     * @Desc: 获取事件对象里的键值数组 
-     */
-    getOriginEventCodeArr(e) {
-        let arr = []
-        if (e.ctrlKey || e.metaKey) {
-            arr.push(keyMap['Control'])
-        }
-        if (e.altKey) {
-            arr.push(keyMap['Alt'])
-        }
-        if (e.shiftKey) {
-            arr.push(keyMap['Shift'])
-        }
-        if (!arr.includes(e.keyCode)) {
-            arr.push(e.keyCode)
-        }
-        return arr
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 19:40:11 
-     * @Desc: 获取快捷键对应的键值数组 
-     */
-    getKeyCodeArr(key) {
-        let keyArr = key.split(/\s*\+\s*/)
-        let arr = []
-        keyArr.forEach((item) => {
-            arr.push(keyMap[item])
-        })
-        return arr
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 15:23:00 
-     * @Desc: 添加快捷键命令 
-     * Enter
-     * Tab | Insert
-     * Shift + a
-     */
-    addShortcut(key, fn) {
-        key.split(/\s*\|\s*/).forEach((item) => {
-            if (this.shortcutMap[item]) {
-                this.shortcutMap[item].push(fn)
-            } else {
-                this.shortcutMap[item] = [fn]
-            }
-        })
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-07-27 14:06:16 
-     * @Desc: 移除快捷键命令 
-     */
-    removeShortcut(key, fn) {
-        key.split(/\s*\|\s*/).forEach((item) => {
-            if (this.shortcutMap[item]) {
-                if (fn) {
-                    let index = this.shortcutMap[item].findIndex((f) => {
-                        return f === fn
-                    })
-                    if (index !== -1) {
-                        this.shortcutMap[item].splice(index, 1)
-                    }
-                } else {
-                    this.shortcutMap[item] = []
-                    delete this.shortcutMap[item]
-                }
-            }
-        })
-    }
-}
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -1,884 +0,0 @@
-import merge from 'deepmerge'
-import LogicalStructure from './layouts/LogicalStructure'
-import MindMap from './layouts/MindMap'
-import CatalogOrganization from './layouts/CatalogOrganization'
-import OrganizationStructure from './layouts/OrganizationStructure'
-import TextEdit from './TextEdit'
-import { copyNodeTree, simpleDeepClone, walk } from './utils'
-
-// 布局列表
-const layouts = {
-    // 逻辑结构图
-    logicalStructure: LogicalStructure,
-    // 思维导图
-    mindMap: MindMap,
-    // 目录组织图
-    catalogOrganization: CatalogOrganization,
-    // 组织结构图
-    organizationStructure: OrganizationStructure
-}
-
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-08 16:25:07 
- * @Desc: 渲染
- */
-class Render {
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 16:25:32 
-     * @Desc: 构造函数 
-     */
-    constructor(opt = {}) {
-        this.opt = opt
-        this.mindMap = opt.mindMap
-        this.themeConfig = this.mindMap.themeConfig
-        this.draw = this.mindMap.draw
-        // 渲染树，操作过程中修改的都是这里的数据
-        this.renderTree = merge({}, this.mindMap.opt.data || {})
-        // 是否重新渲染
-        this.reRender = false
-        // 当前激活的节点列表
-        this.activeNodeList = []
-        // 根节点
-        this.root = null
-        // 文本编辑框，需要再bindEvent之前实例化，否则单击事件只能触发隐藏文本编辑框，而无法保存文本修改
-        this.textEdit = new TextEdit(this)
-        // 布局
-        this.setLayout()
-        // 绑定事件
-        this.bindEvent()
-        // 注册命令
-        this.registerCommands()
-        // 注册快捷键
-        this.registerShortcutKeys()
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-07-13 16:20:07 
-     * @Desc: 设置布局结构 
-     */
-    setLayout() {
-        this.layout = new (layouts[this.mindMap.opt.layout] ? layouts[this.mindMap.opt.layout] : layouts.logicalStructure)(this)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-06-20 10:34:06 
-     * @Desc:  绑定事件
-     */
-    bindEvent() {
-        // 点击事件
-        this.mindMap.on('draw_click', () => {
-            // 清除激活状态
-            if (this.activeNodeList.length > 0) {
-                this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
-            }
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 13:19:06 
-     * @Desc: 注册命令 
-     */
-    registerCommands() {
-        // 全选
-        this.selectAll = this.selectAll.bind(this)
-        this.mindMap.command.add('SELECT_ALL', this.selectAll)
-        // 回退
-        this.back = this.back.bind(this)
-        this.mindMap.command.add('BACK', this.back)
-        // 前进
-        this.forward = this.forward.bind(this)
-        this.mindMap.command.add('FORWARD', this.forward)
-        // 插入同级节点
-        this.insertNode = this.insertNode.bind(this)
-        this.mindMap.command.add('INSERT_NODE', this.insertNode)
-        // 插入子节点
-        this.insertChildNode = this.insertChildNode.bind(this)
-        this.mindMap.command.add('INSERT_CHILD_NODE', this.insertChildNode)
-        // 上移节点
-        this.upNode = this.upNode.bind(this)
-        this.mindMap.command.add('UP_NODE', this.upNode)
-        // 下移节点
-        this.downNode = this.downNode.bind(this)
-        this.mindMap.command.add('DOWN_NODE', this.downNode)
-        // 移动节点
-        this.insertAfter = this.insertAfter.bind(this)
-        this.mindMap.command.add('INSERT_AFTER', this.insertAfter)
-        this.insertBefore = this.insertBefore.bind(this)
-        this.mindMap.command.add('INSERT_BEFORE', this.insertBefore)
-        this.moveNodeTo = this.moveNodeTo.bind(this)
-        this.mindMap.command.add('MOVE_NODE_TO', this.moveNodeTo)
-        // 删除节点
-        this.removeNode = this.removeNode.bind(this)
-        this.mindMap.command.add('REMOVE_NODE', this.removeNode)
-        // 粘贴节点
-        this.pasteNode = this.pasteNode.bind(this)
-        this.mindMap.command.add('PASTE_NODE', this.pasteNode)
-        // 剪切节点
-        this.cutNode = this.cutNode.bind(this)
-        this.mindMap.command.add('CUT_NODE', this.cutNode)
-        // 修改节点样式
-        this.setNodeStyle = this.setNodeStyle.bind(this)
-        this.mindMap.command.add('SET_NODE_STYLE', this.setNodeStyle)
-        // 切换节点是否激活
-        this.setNodeActive = this.setNodeActive.bind(this)
-        this.mindMap.command.add('SET_NODE_ACTIVE', this.setNodeActive)
-        // 清除所有激活节点
-        this.clearAllActive = this.clearAllActive.bind(this)
-        this.mindMap.command.add('CLEAR_ACTIVE_NODE', this.clearAllActive)
-        // 切换节点是否展开
-        this.setNodeExpand = this.setNodeExpand.bind(this)
-        this.mindMap.command.add('SET_NODE_EXPAND', this.setNodeExpand)
-        // 展开所有节点
-        this.expandAllNode = this.expandAllNode.bind(this)
-        this.mindMap.command.add('EXPAND_ALL', this.expandAllNode)
-        // 收起所有节点
-        this.unexpandAllNode = this.unexpandAllNode.bind(this)
-        this.mindMap.command.add('UNEXPAND_ALL', this.unexpandAllNode)
-        // 设置节点数据
-        this.setNodeData = this.setNodeData.bind(this)
-        this.mindMap.command.add('SET_NODE_DATA', this.setNodeData)
-        // 设置节点文本
-        this.setNodeText = this.setNodeText.bind(this)
-        this.mindMap.command.add('SET_NODE_TEXT', this.setNodeText)
-        // 设置节点图片
-        this.setNodeImage = this.setNodeImage.bind(this)
-        this.mindMap.command.add('SET_NODE_IMAGE', this.setNodeImage)
-        // 设置节点图标
-        this.setNodeIcon = this.setNodeIcon.bind(this)
-        this.mindMap.command.add('SET_NODE_ICON', this.setNodeIcon)
-        // 设置节点超链接
-        this.setNodeHyperlink = this.setNodeHyperlink.bind(this)
-        this.mindMap.command.add('SET_NODE_HYPERLINK', this.setNodeHyperlink)
-        // 设置节点备注
-        this.setNodeNote = this.setNodeNote.bind(this)
-        this.mindMap.command.add('SET_NODE_NOTE', this.setNodeNote)
-        // 设置节点标签
-        this.setNodeTag = this.setNodeTag.bind(this)
-        this.mindMap.command.add('SET_NODE_TAG', this.setNodeTag)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 16:55:44 
-     * @Desc: 注册快捷键 
-     */
-    registerShortcutKeys() {
-        // 插入下级节点
-        this.mindMap.keyCommand.addShortcut('Tab', () => {
-            this.mindMap.execCommand('INSERT_CHILD_NODE')
-        })
-        // 插入同级节点
-        this.insertNodeWrap = () => {
-            if (this.textEdit.showTextEdit) {
-                return
-            }
-            this.mindMap.execCommand('INSERT_NODE')
-        }
-        this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
-        // 展开/收起节点
-        this.mindMap.keyCommand.addShortcut('/', () => {
-            this.activeNodeList.forEach((node) => {
-                if (node.nodeData.children.length <= 0) {
-                    return
-                }
-                this.toggleNodeExpand(node)
-            })
-        })
-        // 删除节点
-        this.removeNodeWrap = () => {
-            this.mindMap.execCommand('REMOVE_NODE')
-        }
-        this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
-        // 节点编辑时某些快捷键会存在冲突，需要暂时去除
-        this.mindMap.on('before_show_text_edit', () => {
-            this.startTextEdit()
-        })
-        this.mindMap.on('hide_text_edit', () => {
-            this.endTextEdit()
-        })
-        // 全选
-        this.mindMap.keyCommand.addShortcut('Control+a', () => {
-            this.mindMap.execCommand('SELECT_ALL')
-        })
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-05-09 10:43:52 
-     * @Desc: 开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突 
-     */
-    startTextEdit() {
-        this.mindMap.keyCommand.removeShortcut('Del|Backspace')
-        this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-05-09 10:45:11 
-     * @Desc: 结束文字编辑，会恢复回车键和删除键相关快捷键
-     */
-    endTextEdit() {
-        this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
-        this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 16:27:55 
-     * @Desc:  渲染
-     */
-    render() {
-        if (this.reRender) {
-            this.clearActive()
-        }
-        this.layout.doLayout((root) => {
-            this.root = root
-            this.root.render()
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:45:01 
-     * @Desc: 清除当前激活的节点 
-     */
-    clearActive() {
-        this.activeNodeList.forEach((item) => {
-            this.setNodeActive(item, false)
-        })
-        this.activeNodeList = []
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-08-03 23:14:34 
-     * @Desc: 清除当前所有激活节点，并会触发事件 
-     */
-    clearAllActive() {
-        if (this.activeNodeList.length <= 0) {
-            return
-        }
-        this.clearActive()
-        this.mindMap.emit('node_active', null, [])
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 10:54:00 
-     * @Desc:  添加节点到激活列表里
-     */
-    addActiveNode(node) {
-        let index = this.findActiveNodeIndex(node)
-        if (index === -1) {
-            this.activeNodeList.push(node)
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 10:04:04 
-     * @Desc: 在激活列表里移除某个节点 
-     */
-    removeActiveNode(node) {
-        let index = this.findActiveNodeIndex(node)
-        if (index === -1) {
-            return
-        }
-        this.activeNodeList.splice(index, 1)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 10:55:23 
-     * @Desc: 检索某个节点在激活列表里的索引 
-     */
-    findActiveNodeIndex(node) {
-        return this.activeNodeList.findIndex((item) => {
-            return item === node
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 13:46:08 
-     * @Desc: 获取节点在同级里的索引位置 
-     */
-    getNodeIndex(node) {
-        return node.parent ? node.parent.children.findIndex((item) => {
-            return item === node
-        }) : 0
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-08-04 23:54:52 
-     * @Desc: 全选 
-     */
-    selectAll() {
-        walk(this.root, null, (node) => {
-            if (!node.nodeData.data.isActive) {
-                node.nodeData.data.isActive = true
-                this.addActiveNode(node)
-                setTimeout(() => {
-                    node.renderNode()
-                }, 0);
-            }
-        }, null, true, 0, 0)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 22:34:12 
-     * @Desc: 回退 
-     */
-    back(step) {
-        this.clearAllActive()
-        let data = this.mindMap.command.back(step)
-        if (data) {
-            this.renderTree = data
-            this.mindMap.reRender()
-        }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-07-12 10:44:51 
-     * @Desc: 前进 
-     */
-    forward(step) {
-        this.clearAllActive()
-        let data = this.mindMap.command.forward(step)
-        if (data) {
-            this.renderTree = data
-            this.mindMap.reRender()
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 13:19:54 
-     * @Desc: 插入同级节点，多个节点只会操作第一个节点
-     */
-    insertNode() {
-        if (this.activeNodeList.length <= 0) {
-            return
-        }
-        let first = this.activeNodeList[0]
-        if (first.isRoot) {
-            this.insertChildNode()
-        } else {
-            if (first.layerIndex === 1) {
-                first.parent.initRender = true
-            }
-            let index = this.getNodeIndex(first)
-            first.parent.nodeData.children.splice(index + 1, 0, {
-                "data": {
-                    "text": "分支主题",
-                    "expand": true
-                },
-                "children": []
-            })
-            this.mindMap.render()
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 13:31:02 
-     * @Desc: 插入子节点 
-     */
-    insertChildNode() {
-        if (this.activeNodeList.length <= 0) {
-            return
-        }
-        this.activeNodeList.forEach((node, index) => {
-            if (!node.nodeData.children) {
-                node.nodeData.children = []
-            }
-            node.nodeData.children.push({
-                "data": {
-                    "text": "分支主题",
-                    "expand": true
-                },
-                "children": []
-            })
-            if (node.isRoot) {
-                node.initRender = true
-                // this.mindMap.batchExecution.push('renderNode' + index, () => {
-                //     node.renderNode()
-                // })
-            }
-        })
-        this.mindMap.render()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-14 23:34:14 
-     * @Desc: 上移节点，多个节点只会操作第一个节点
-     */
-    upNode() {
-        if (this.activeNodeList.length <= 0) {
-            return
-        }
-        let node = this.activeNodeList[0]
-        if (node.isRoot) {
-            return
-        }
-        let parent = node.parent
-        let childList = parent.children
-        let index = childList.findIndex((item) => {
-            return item === node
-        })
-        if (index === -1 || index === 0) {
-            return
-        }
-        let insertIndex = index - 1
-        // 节点实例
-        childList.splice(index, 1)
-        childList.splice(insertIndex, 0, node)
-        // 节点数据
-        parent.nodeData.children.splice(index, 1)
-        parent.nodeData.children.splice(insertIndex, 0, node.nodeData)
-        this.mindMap.render()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-14 23:34:18 
-     * @Desc: 下移节点，多个节点只会操作第一个节点 
-     */
-    downNode() {
-        if (this.activeNodeList.length <= 0) {
-            return
-        }
-        let node = this.activeNodeList[0]
-        if (node.isRoot) {
-            return
-        }
-        let parent = node.parent
-        let childList = parent.children
-        let index = childList.findIndex((item) => {
-            return item === node
-        })
-        if (index === -1 || index === childList.length - 1) {
-            return
-        }
-        let insertIndex = index + 1
-        // 节点实例
-        childList.splice(index, 1)
-        childList.splice(insertIndex, 0, node)
-        // 节点数据
-        parent.nodeData.children.splice(index, 1)
-        parent.nodeData.children.splice(insertIndex, 0, node.nodeData)
-        this.mindMap.render()
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-11-25 10:51:34 
-     * @Desc: 将节点移动到另一个节点的前面
-     */
-    insertBefore(node, exist) {
-        if (node.isRoot) {
-            return
-        }
-        let parent = node.parent
-        let childList = parent.children
-        // 要移动节点的索引
-        let index = childList.findIndex((item) => {
-            return item === node
-        })
-        if (index === -1) {
-            return
-        }
-        // 目标节点的索引
-        let existIndex = childList.findIndex((item) => {
-            return item === exist
-        })
-        if (existIndex === -1) {
-            return
-        }
-        // 当前节点在目标节点前面
-        if (index < existIndex) {
-            existIndex = existIndex - 1
-        } else {
-            existIndex = existIndex
-        }
-        // 节点实例
-        childList.splice(index, 1)
-        childList.splice(existIndex, 0, node)
-        // 节点数据
-        parent.nodeData.children.splice(index, 1)
-        parent.nodeData.children.splice(existIndex, 0, node.nodeData)
-        this.mindMap.render()
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-11-25 10:51:34 
-     * @Desc: 将节点移动到另一个节点的后面
-     */
-    insertAfter(node, exist) {
-        if (node.isRoot) {
-            return
-        }
-        let parent = node.parent
-        let childList = parent.children
-        // 要移动节点的索引
-        let index = childList.findIndex((item) => {
-            return item === node
-        })
-        if (index === -1) {
-            return
-        }
-        // 目标节点的索引
-        let existIndex = childList.findIndex((item) => {
-            return item === exist
-        })
-        if (existIndex === -1) {
-            return
-        }
-        // 当前节点在目标节点前面
-        if (index < existIndex) {
-            existIndex = existIndex
-        } else {
-            existIndex = existIndex + 1
-        }
-        // 节点实例
-        childList.splice(index, 1)
-        childList.splice(existIndex, 0, node)
-        // 节点数据
-        parent.nodeData.children.splice(index, 1)
-        parent.nodeData.children.splice(existIndex, 0, node.nodeData)
-        this.mindMap.render()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 13:40:39 
-     * @Desc: 移除节点 
-     */
-    removeNode() {
-        if (this.activeNodeList.length <= 0) {
-            return
-        }
-        for (let i = 0; i < this.activeNodeList.length; i++) {
-            let node = this.activeNodeList[i]
-            if (node.isRoot) {
-                node.children.forEach((child) => {
-                    child.remove()
-                })
-                node.children = []
-                node.nodeData.children = []
-                break
-            } else {
-                this.removeActiveNode(node)
-                this.removeOneNode(node)
-                i--
-            }
-        }
-        this.mindMap.emit('node_active', null, [])
-        this.mindMap.render()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-15 22:46:27 
-     * @Desc: 移除某个指定节点 
-     */
-    removeOneNode(node) {
-        let index = this.getNodeIndex(node)
-        node.remove()
-        node.parent.children.splice(index, 1)
-        node.parent.nodeData.children.splice(index, 1)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-07-15 09:53:23 
-     * @Desc: 复制节点，多个节点只会操作第一个节点 
-     */
-    copyNode() {
-        if (this.activeNodeList.length <= 0) {
-            return
-        }
-        return copyNodeTree({}, this.activeNodeList[0])
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-15 22:36:45 
-     * @Desc: 剪切节点，多个节点只会操作第一个节点
-     */
-    cutNode(callback) {
-        if (this.activeNodeList.length <= 0) {
-            return
-        }
-        let node = this.activeNodeList[0]
-        if (node.isRoot) {
-            return null
-        }
-        let copyData = copyNodeTree({}, node)
-        this.removeActiveNode(node)
-        this.removeOneNode(node)
-        this.mindMap.emit('node_active', null, this.activeNodeList)
-        this.mindMap.render()
-        if (callback && typeof callback === 'function') {
-            callback(copyData)
-        }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-11-24 16:54:01 
-     * @Desc: 移动一个节点作为另一个节点的子节点 
-     */
-    moveNodeTo(node, toNode) {
-        if (node.isRoot) {
-            return
-        }
-        let copyData = copyNodeTree({}, node)
-        this.removeActiveNode(node)
-        this.removeOneNode(node)
-        this.mindMap.emit('node_active', null, this.activeNodeList)
-        toNode.nodeData.children.push(copyData)
-        this.mindMap.render()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-15 20:09:39 
-     * @Desc:  粘贴节点到节点
-     */
-    pasteNode(data) {
-        if (this.activeNodeList.length <= 0) {
-            return
-        }
-        this.activeNodeList.forEach((item) => {
-            item.nodeData.children.push(simpleDeepClone(data))
-        })
-        this.mindMap.render()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-08 21:54:30 
-     * @Desc: 设置节点样式 
-     */
-    setNodeStyle(node, prop, value, isActive) {
-        let data = {}
-        if (isActive) {
-            data = {
-                activeStyle: {
-                    ...(node.nodeData.data.activeStyle || {}),
-                    [prop]: value
-                }
-            }
-        } else {
-            data = {
-                [prop]: value
-            }
-        }
-        this.setNodeDataRender(node, data)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-08 22:13:03 
-     * @Desc: 设置节点是否激活 
-     */
-    setNodeActive(node, active) {
-        this.setNodeData(node, {
-            isActive: active
-        })
-        node.renderNode()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 16:52:41 
-     * @Desc: 设置节点是否展开 
-     */
-    setNodeExpand(node, expand) {
-        this.setNodeData(node, {
-            expand
-        })
-        if (expand) { // 展开
-            node.children.forEach((item) => {
-                item.render()
-            })
-            node.renderLine()
-            node.updateExpandBtnNode()
-        } else { // 收缩
-            node.children.forEach((item) => {
-                item.remove()
-            })
-            node.removeLine()
-            node.updateExpandBtnNode()
-        }
-        this.mindMap.render()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-15 23:23:37 
-     * @Desc: 展开所有 
-     */
-    expandAllNode() {
-        walk(this.renderTree, null, (node) => {
-            if (!node.data.expand) {
-                node.data.expand = true
-            }
-        }, null, true, 0, 0)
-        this.mindMap.render()
-        this.root.children.forEach((item) => {
-            item.updateExpandBtnNode()
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-15 23:27:14 
-     * @Desc: 收起所有 
-     */
-    unexpandAllNode() {
-        this.root.children.forEach((item) => {
-            this.setNodeExpand(item, false)
-        })
-        walk(this.renderTree, null, (node, parent, isRoot) => {
-            if (!isRoot) {
-                node.data.expand = false
-            }
-        }, null, true, 0, 0)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 17:15:33 
-     * @Desc: 切换节点展开状态 
-     */
-    toggleNodeExpand(node) {
-        this.mindMap.execCommand('SET_NODE_EXPAND', node, !node.nodeData.data.expand)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-09 22:04:19 
-     * @Desc: 设置节点文本 
-     */
-    setNodeText(node, text) {
-        this.setNodeDataRender(node, {
-            text
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 08:37:40 
-     * @Desc: 设置节点图片 
-     */
-    setNodeImage(node, {
-        url,
-        title,
-        width,
-        height
-    }) {
-        this.setNodeDataRender(node, {
-            image: url,
-            imageTitle: title || '',
-            imageSize: {
-                width,
-                height,
-            },
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 08:44:06 
-     * @Desc: 设置节点图标 
-     */
-    setNodeIcon(node, icons) {
-        this.setNodeDataRender(node, {
-            icon: icons
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 08:49:33 
-     * @Desc: 设置节点超链接 
-     */
-    setNodeHyperlink(node, link, title = '') {
-        this.setNodeDataRender(node, {
-            hyperlink: link,
-            hyperlinkTitle: title,
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 08:52:59 
-     * @Desc: 设置节点备注 
-     */
-    setNodeNote(node, note) {
-        this.setNodeDataRender(node, {
-            note
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 08:54:53 
-     * @Desc: 设置节点标签 
-     */
-    setNodeTag(node, tag) {
-        this.setNodeDataRender(node, {
-            tag
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-05-04 14:19:48 
-     * @Desc: 更新节点数据 
-     */
-    setNodeData(node, data) {
-        Object.keys(data).forEach((key) => {
-            node.nodeData.data[key] = data[key]
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 08:45:48 
-     * @Desc: 设置节点数据，并判断是否渲染 
-     */
-    setNodeDataRender(node, data) {
-        this.setNodeData(node, data)
-        let changed = node.getSize()
-        node.renderNode()
-        if (changed) {
-            this.mindMap.render()
-        }
-    }
-}
-
-export default Render
--- a/simple-mind-map/src/Select.js
+++ b/simple-mind-map/src/Select.js
@@ -1,191 +0,0 @@
-import { bfsWalk, throttle } from './utils'
-
-/** 
- * @Author: 王林 
- * @Date: 2021-07-10 22:34:51 
- * @Desc: 选择节点类 
- */
-
-class Select {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 22:35:16 
-     * @Desc: 构造函数 
-     */
-    constructor({ mindMap }) {
-        this.mindMap = mindMap
-        this.rect = null
-        this.isMousedown = false
-        this.mouseDownX = 0
-        this.mouseDownY = 0
-        this.mouseMoveX = 0
-        this.mouseMoveY = 0
-        this.bindEvent()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 22:36:36 
-     * @Desc: 绑定事件 
-     */
-    bindEvent() {
-        this.checkInNodes = throttle(this.checkInNodes, 500, this)
-        this.mindMap.on('mousedown', (e) => {
-            if (this.mindMap.opt.readonly) {
-                return
-            }
-            if (e.which !== 3) {
-                return
-            }
-            this.isMousedown = true
-            let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
-            this.mouseDownX = x
-            this.mouseDownY = y
-            this.createRect(x, y)
-        })
-        this.mindMap.on('mousemove', (e) => {
-            if (this.mindMap.opt.readonly) {
-                return
-            }
-            if (!this.isMousedown) {
-                return
-            }
-            let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
-            this.mouseMoveX = x
-            this.mouseMoveY = y
-            if (Math.abs(x - this.mouseDownX) <= 10 && Math.abs(y - this.mouseDownY) <= 10) {
-                return
-            }
-            clearTimeout(this.autoMoveTimer)
-            this.onMove(x, y)
-        })
-        this.mindMap.on('mouseup', (e) => {
-            if (this.mindMap.opt.readonly) {
-                return
-            }
-            if (!this.isMousedown) {
-                return;
-            }
-            this.mindMap.emit('node_active', null, this.mindMap.renderer.activeNodeList)
-            clearTimeout(this.autoMoveTimer)
-            this.isMousedown = false
-            if (this.rect) this.rect.remove()
-            this.rect = null
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-13 07:55:49 
-     * @Desc: 鼠标移动事件
-     */
-    onMove (x, y) {
-        // 绘制矩形
-        this.rect.plot([
-            [this.mouseDownX, this.mouseDownY],
-            [this.mouseMoveX, this.mouseDownY],
-            [this.mouseMoveX, this.mouseMoveY],
-            [this.mouseDownX, this.mouseMoveY]
-        ])
-        this.checkInNodes()
-        // 检测边缘移动
-        let step = this.mindMap.opt.selectTranslateStep
-        let limit = this.mindMap.opt.selectTranslateLimit
-        let count = 0
-        // 左边缘
-        if (x <= this.mindMap.elRect.left + limit) {
-            this.mouseDownX += step
-            this.mindMap.view.translateX(step)
-            count++
-        }
-        // 右边缘
-        if (x >= this.mindMap.elRect.right - limit) {
-            this.mouseDownX -= step
-            this.mindMap.view.translateX(-step)
-            count++
-        }
-        // 上边缘
-        if (y <= this.mindMap.elRect.top + limit) {
-            this.mouseDownY += step
-            this.mindMap.view.translateY(step)
-            count++
-        }
-        // 下边缘
-        if (y >= this.mindMap.elRect.bottom - limit) {
-            this.mouseDownY -= step
-            this.mindMap.view.translateY(-step)
-            count++
-        }
-        if (count > 0) {
-            this.startAutoMove(x, y)
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-22 08:02:23 
-     * @Desc: 开启自动移动 
-     */
-    startAutoMove(x, y) {
-        this.autoMoveTimer = setTimeout(() => {
-            this.onMove(x, y)
-        }, 20);
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 10:19:37 
-     * @Desc: 创建矩形 
-     */
-    createRect(x, y) {
-        this.rect = this.mindMap.svg.polygon().stroke({
-            color: '#0984e3'
-        }).fill({
-            color: 'rgba(9,132,227,0.3)'
-        }).plot([[x, y]])
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 10:20:43 
-     * @Desc: 检测在选区里的节点 
-     */
-    checkInNodes() {
-        let { scaleX, scaleY, translateX, translateY } = this.mindMap.draw.transform()
-        let minx = Math.min(this.mouseDownX, this.mouseMoveX)
-        let miny = Math.min(this.mouseDownY, this.mouseMoveY)
-        let maxx = Math.max(this.mouseDownX, this.mouseMoveX)
-        let maxy = Math.max(this.mouseDownY, this.mouseMoveY)
-        bfsWalk(this.mindMap.renderer.root, (node) => {
-            let { left, top, width, height } = node
-            let right = (left + width) * scaleX + translateX
-            let bottom = (top + height) * scaleY + translateY
-            left = left * scaleX + translateX
-            top = top * scaleY + translateY
-            if (
-                left >= minx &&
-                right <= maxx &&
-                top >= miny &&
-                bottom <= maxy
-            ) {
-                this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
-                    if (node.nodeData.data.isActive) {
-                        return ;
-                    }
-                    this.mindMap.renderer.setNodeActive(node, true)
-                    this.mindMap.renderer.addActiveNode(node)
-                })
-            } else if (node.nodeData.data.isActive) {
-                this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
-                    if (!node.nodeData.data.isActive) {
-                        return ;
-                    }
-                    this.mindMap.renderer.setNodeActive(node, false)
-                    this.mindMap.renderer.removeActiveNode(node)
-                })
-            }
-        })
-    }
-}
-
-export default Select
--- a/simple-mind-map/src/Style.js
+++ b/simple-mind-map/src/Style.js
@@ -1,168 +0,0 @@
-import { tagColorList } from './utils/constant';
-const rootProp = ['paddingX', 'paddingY']
-
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 10:09:08 
- * @Desc: 样式类 
- */
-class Style {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 16:01:53 
-     * @Desc:  设置背景样式
-     */
-    static setBackgroundStyle(el, themeConfig) {
-        let { backgroundColor, backgroundImage, backgroundRepeat } = themeConfig
-        el.style.backgroundColor = backgroundColor
-        if (backgroundImage) {
-            el.style.backgroundImage = `url(${backgroundImage})`
-            el.style.backgroundRepeat = backgroundRepeat
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 10:10:11 
-     * @Desc: 构造函数 
-     */
-    constructor(ctx, themeConfig) {
-        this.ctx = ctx
-        this.themeConfig = themeConfig
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-12 07:40:14 
-     * @Desc: 更新主题配置 
-     */
-    updateThemeConfig(themeConfig) {
-        this.themeConfig = themeConfig
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 12:02:55 
-     * @Desc: 合并样式 
-     */
-    merge(prop, root, isActive) {
-        // 三级及以下节点
-        let defaultConfig = this.themeConfig.node
-        if (root || rootProp.includes(prop)) {// 直接使用最外层样式
-            defaultConfig = this.themeConfig
-        } else if (this.ctx.layerIndex === 0) {// 根节点
-            defaultConfig = this.themeConfig.root
-        } else if (this.ctx.layerIndex === 1) {// 二级节点
-            defaultConfig = this.themeConfig.second
-        }
-        // 激活状态
-        if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
-            if (this.ctx.nodeData.data.activeStyle && this.ctx.nodeData.data.activeStyle[prop] !== undefined) {
-                return this.ctx.nodeData.data.activeStyle[prop];
-            } else if (defaultConfig.active && defaultConfig.active[prop]) {
-                return defaultConfig.active[prop]
-            }
-        }
-        // 优先使用节点本身的样式
-        return this.ctx.nodeData.data[prop] !== undefined ? this.ctx.nodeData.data[prop] : defaultConfig[prop]
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 10:12:56 
-     * @Desc: 矩形 
-     */
-    rect(node) {
-        node.fill({
-            color: this.merge('fillColor')
-        }).stroke({
-            color: this.merge('borderColor'),
-            width: this.merge('borderWidth'),
-            dasharray: this.merge('borderDasharray')
-        }).radius(this.merge('borderRadius'))
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 12:07:59 
-     * @Desc: 文字 
-     */
-    text(node) {
-        node.fill({
-            color: this.merge('color')
-        }).css({
-            'font-family': this.merge('fontFamily'),
-            'font-size': this.merge('fontSize'),
-            'font-weight': this.merge('fontWeight'),
-            'font-style': this.merge('fontStyle'),
-            'text-decoration': this.merge('textDecoration')
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-13 08:14:34 
-     * @Desc: html文字节点 
-     */
-    domText(node, fontSizeScale = 1) {
-        node.style.fontFamily = this.merge('fontFamily')
-        node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
-        node.style.fontWeight = this.merge('fontWeight') || 'normal'
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-06-20 20:02:18 
-     * @Desc: 标签文字 
-     */
-    tagText(node, index) {
-        node.fill({
-            color: tagColorList[index].color
-        }).css({
-            'font-size': '12px'
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-06-20 21:04:11 
-     * @Desc: 标签矩形 
-     */
-    tagRect(node, index) {
-        node.fill({
-            color: tagColorList[index].background
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-03 22:37:19 
-     * @Desc: 内置图标 
-     */
-    iconNode(node) {
-        node.attr({
-            fill: this.merge('color')
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 14:50:49 
-     * @Desc: 连线 
-     */
-    line(node) {
-        node.stroke({ width: this.merge('lineWidth', true), color: this.merge('lineColor', true) }).fill({ color: 'none' })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 20:03:59 
-     * @Desc: 按钮 
-     */
-    iconBtn(node, fillNode) {
-        node.fill({ color: '#808080' })
-        fillNode.fill({ color: '#fff' })
-    }
-}
-
-export default Style
--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -1,132 +0,0 @@
-import {
-    getStrWithBrFromHtml
-} from './utils'
-
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-06-19 11:11:28 
- * @Desc: 节点文字编辑类 
- */
-export default class TextEdit {
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-06-19 11:22:57 
-     * @Desc: 构造函数 
-     */
-    constructor(renderer) {
-        this.renderer = renderer
-        this.mindMap = renderer.mindMap
-        // 文本编辑框
-        this.textEditNode = null
-        // 文本编辑框是否显示
-        this.showTextEdit = false
-        this.bindEvent()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 13:27:04 
-     * @Desc: 事件 
-     */
-    bindEvent() {
-        this.show = this.show.bind(this)
-        // 节点双击事件
-        this.mindMap.on('node_dblclick', this.show)
-        // 点击事件
-        this.mindMap.on('draw_click', () => {
-            // 隐藏文本编辑框
-            this.hideEditTextBox()
-        })
-        // 展开收缩按钮点击事件
-        this.mindMap.on('expand_btn_click', () => {
-            this.hideEditTextBox()
-        })
-        // 节点激活前事件
-        this.mindMap.on('before_node_active', () => {
-            this.hideEditTextBox()
-        })
-        // 注册回车快捷键
-        this.mindMap.keyCommand.addShortcut('Enter', () => {
-            this.hideEditTextBox()
-        })
-        // 注册编辑快捷键
-        this.mindMap.keyCommand.addShortcut('F2', () => {
-            if (this.renderer.activeNodeList.length <= 0) {
-                return
-            }
-            this.show(this.renderer.activeNodeList[0])
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-13 22:15:56 
-     * @Desc: 显示文本编辑框 
-     */
-    show(node) {
-        this.showEditTextBox(node, node._textData.node.node.getBoundingClientRect())
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-13 22:13:02 
-     * @Desc: 显示文本编辑框 
-     */
-    showEditTextBox(node, rect) {
-        this.mindMap.emit('before_show_text_edit')
-        if (!this.textEditNode) {
-            this.textEditNode = document.createElement('div')
-            this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;`
-            this.textEditNode.setAttribute('contenteditable', true)
-            document.body.appendChild(this.textEditNode)
-        }
-        node.style.domText(this.textEditNode, this.mindMap.view.scale)
-        this.textEditNode.innerHTML = node.nodeData.data.text.split(/\n/img).join('<br>')
-        this.textEditNode.style.minWidth = rect.width + 10 + 'px'
-        this.textEditNode.style.minHeight = rect.height + 6 + 'px'
-        this.textEditNode.style.left = rect.left + 'px'
-        this.textEditNode.style.top = rect.top + 'px'
-        this.textEditNode.style.display = 'block'
-        this.showTextEdit = true
-        // 选中文本
-        this.selectNodeText()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-08-02 23:13:50 
-     * @Desc: 选中文本 
-     */
-    selectNodeText() {
-        let selection = window.getSelection()
-        let range = document.createRange()
-        range.selectNodeContents(this.textEditNode)
-        selection.removeAllRanges()
-        selection.addRange(range)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 13:48:16 
-     * @Desc: 隐藏文本编辑框 
-     */
-    hideEditTextBox() {
-        if (!this.showTextEdit) {
-            return
-        }
-        this.renderer.activeNodeList.forEach((node) => {
-            let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
-            this.mindMap.execCommand('SET_NODE_TEXT', node, str)
-            this.mindMap.render()
-        })
-        this.mindMap.emit('hide_text_edit', this.textEditNode, this.renderer.activeNodeList)
-        this.textEditNode.style.display = 'none'
-        this.textEditNode.innerHTML = ''
-        this.textEditNode.style.fontFamily = 'inherit'
-        this.textEditNode.style.fontSize = 'inherit'
-        this.textEditNode.style.fontWeight = 'normal'
-        this.showTextEdit = false
-    }
-}
--- a/simple-mind-map/src/View.js
+++ b/simple-mind-map/src/View.js
@@ -1,189 +0,0 @@
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-07 14:45:24 
- * @Desc: 视图操作类 
- */
-class View {
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 14:45:40 
-     * @Desc: 构造函数 
-     */
-    constructor(opt = {}) {
-        this.opt = opt
-        this.mindMap = this.opt.mindMap
-        this.scale = 1
-        this.sx = 0
-        this.sy = 0
-        this.x = 0
-        this.y = 0
-        this.firstDrag = true
-        this.setTransformData(this.mindMap.opt.viewData)
-        this.bind()
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:38:51 
-     * @Desc: 绑定 
-     */
-    bind() {
-        // 快捷键
-        this.mindMap.keyCommand.addShortcut('Control+=', () => {
-            this.enlarge()
-        })
-        this.mindMap.keyCommand.addShortcut('Control+-', () => {
-            this.narrow()
-        })
-        this.mindMap.keyCommand.addShortcut('Control+Enter', () => {
-            this.reset()
-        })
-        this.mindMap.svg.on('dblclick', () => {
-            this.reset()
-        })
-        // 拖动视图
-        this.mindMap.event.on('mousedown', () => {
-            this.sx = this.x
-            this.sy = this.y
-        })
-        this.mindMap.event.on('drag', (e, event) => {
-            if (this.firstDrag) {
-                this.firstDrag = false
-                // 清除激活节点
-                this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
-            }
-            this.x = this.sx + event.mousemoveOffset.x
-            this.y = this.sy + event.mousemoveOffset.y
-            this.transform()
-        })
-        this.mindMap.event.on('mouseup', () => {
-            this.firstDrag = true
-        })
-        // 放大缩小视图
-        this.mindMap.event.on('mousewheel', (e, dir) => {
-            // // 放大
-            if (dir === 'down') {
-                this.enlarge()
-            } else { // 缩小
-                this.narrow()
-            }
-        })
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-11-22 18:30:24 
-     * @Desc: 获取当前变换状态数据 
-     */
-    getTransformData() {
-        return {
-            transform: this.mindMap.draw.transform(),
-            state: {
-                scale: this.scale,
-                x: this.x,
-                y: this.y,
-                sx: this.sx,
-                sy: this.sy
-            }
-        }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-11-22 19:54:17 
-     * @Desc: 动态设置变换状态数据 
-     */
-    setTransformData(viewData) {
-        if (viewData) {
-            Object.keys(viewData.state).forEach((prop) => {
-                this[prop] = viewData.state[prop]
-            })
-            this.mindMap.draw.transform({
-                ...viewData.transform
-            })
-            this.mindMap.emit('view_data_change', this.getTransformData())
-            this.mindMap.emit('scale', this.scale)
-        }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-07-13 15:49:06 
-     * @Desc: 平移x方向 
-     */
-    translateX(step) {
-        this.x += step
-        this.transform()
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-07-13 15:48:52 
-     * @Desc: 平移y方向 
-     */
-    translateY(step) {
-        this.y += step
-        this.transform()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-04 17:13:14 
-     * @Desc:  应用变换
-     */
-    transform() {
-        this.mindMap.draw.transform({
-            scale: this.scale,
-            // origin: 'center center',
-            translate: [this.x, this.y],
-        })
-        this.mindMap.emit('view_data_change', this.getTransformData())
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-11 17:41:35 
-     * @Desc: 恢复
-     */
-    reset() {
-        this.scale = 1
-        this.x = 0
-        this.y = 0
-        this.transform()
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-04 17:10:34 
-     * @Desc: 缩小 
-     */
-    narrow() {
-        if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
-            this.scale -= this.mindMap.opt.scaleRatio
-        } else {
-            this.scale = 0.1
-        }
-        this.transform()
-        this.mindMap.emit('scale', this.scale)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-04 17:10:41 
-     * @Desc: 放大 
-     */
-    enlarge() {
-        this.scale += this.mindMap.opt.scaleRatio
-        this.transform()
-        this.mindMap.emit('scale', this.scale)
-    }
-}
-
-export default View
--- a/simple-mind-map/src/constants/constant.js
+++ b/simple-mind-map/src/constants/constant.js
@@ -0,0 +1,282 @@
+//  标签颜色列表
+export const tagColorList = [
+  {
+    color: 'rgb(77, 65, 0)',
+    background: 'rgb(255, 244, 179)'
+  },
+  {
+    color: 'rgb(0, 50, 77)',
+    background: 'rgb(179, 229, 255)'
+  },
+  {
+    color: 'rgb(77, 0, 73)',
+    background: 'rgb(255, 179, 251)'
+  },
+  {
+    color: 'rgb(57, 77, 0)',
+    background: 'rgb(236, 255, 179)'
+  },
+  {
+    color: 'rgb(0, 77, 47)',
+    background: 'rgb(179, 255, 226)'
+  }
+]
+
+//  主题列表
+export const themeList = [
+  {
+    name: '默认',
+    value: 'default',
+  },
+  {
+    name: '暗色2',
+    value: 'dark2',
+  },
+  {
+    name: '天清绿',
+    value: 'skyGreen',
+  },
+  {
+    name: '脑图经典2',
+    value: 'classic2',
+  },
+  {
+    name: '脑图经典3',
+    value: 'classic3',
+  },
+  {
+    name: '经典绿',
+    value: 'classicGreen',
+  },
+  {
+    name: '经典蓝',
+    value: 'classicBlue',
+  },
+  {
+    name: '天空蓝',
+    value: 'blueSky',
+  },
+  {
+    name: '脑残粉',
+    value: 'brainImpairedPink',
+  },
+  {
+    name: '暗色',
+    value: 'dark',
+  },
+  {
+    name: '泥土黄',
+    value: 'earthYellow',
+  },
+  {
+    name: '清新绿',
+    value: 'freshGreen',
+  },
+  {
+    name: '清新红',
+    value: 'freshRed',
+  },
+  {
+    name: '浪漫紫',
+    value: 'romanticPurple',
+  },
+  {
+    name: '粉红葡萄',
+    value: 'pinkGrape',
+  },
+  {
+    name: '薄荷',
+    value: 'mint',
+  },
+  {
+    name: '金色vip',
+    value: 'gold',
+  },
+  {
+    name: '活力橙',
+    value: 'vitalityOrange',
+  },
+  {
+    name: '绿叶',
+    value: 'greenLeaf',
+  },
+  {
+    name: '脑图经典',
+    value: 'classic',
+  },
+  {
+    name: '脑图经典4',
+    value: 'classic4',
+  },
+  {
+    name: '小黄人',
+    value: 'minions',
+  },
+  {
+    name: '简约黑',
+    value: 'simpleBlack',
+  },
+  {
+    name: '课程绿',
+    value: 'courseGreen',
+  },
+  {
+    name: '咖啡',
+    value: 'coffee',
+  },
+  {
+    name: '红色精神',
+    value: 'redSpirit',
+  },
+  {
+    name: '黑色幽默',
+    value: 'blackHumour',
+  },
+  {
+    name: '深夜办公室',
+    value: 'lateNightOffice',
+  },
+  {
+    name: '黑金',
+    value: 'blackGold',
+  },
+  {
+    name: '牛油果',
+    value: 'avocado',
+  },
+  {
+    name: '秋天',
+    value: 'autumn',
+  },
+  {
+    name: '橙汁',
+    value: 'orangeJuice',
+  }
+]
+
+// 常量
+export const CONSTANTS = {
+  CHANGE_THEME: 'changeTheme',
+  SET_DATA: 'setData',
+  TRANSFORM_TO_NORMAL_NODE: 'transformAllNodesToNormalNode',
+  MODE: {
+    READONLY: 'readonly',
+    EDIT: 'edit'
+  },
+  LAYOUT: {
+    LOGICAL_STRUCTURE: 'logicalStructure',
+    MIND_MAP: 'mindMap',
+    ORGANIZATION_STRUCTURE: 'organizationStructure',
+    CATALOG_ORGANIZATION: 'catalogOrganization',
+    TIMELINE: 'timeline',
+    TIMELINE2: 'timeline2',
+    FISHBONE: 'fishbone'
+  },
+  DIR: {
+    UP: 'up',
+    LEFT: 'left',
+    DOWN: 'down',
+    RIGHT: 'right'
+  },
+  KEY_DIR: {
+    LEFT: 'Left',
+    UP: 'Up',
+    RIGHT: 'Right',
+    DOWN: 'Down'
+  },
+  SHAPE: {
+    RECTANGLE: 'rectangle',
+    DIAMOND: 'diamond',
+    PARALLELOGRAM: 'parallelogram',
+    ROUNDED_RECTANGLE: 'roundedRectangle',
+    OCTAGONAL_RECTANGLE: 'octagonalRectangle',
+    OUTER_TRIANGULAR_RECTANGLE: 'outerTriangularRectangle',
+    INNER_TRIANGULAR_RECTANGLE: 'innerTriangularRectangle',
+    ELLIPSE: 'ellipse',
+    CIRCLE: 'circle'
+  },
+  MOUSE_WHEEL_ACTION: {
+    ZOOM: 'zoom',
+    MOVE: 'move'
+  },
+  INIT_ROOT_NODE_POSITION: {
+    LEFT: 'left',
+    TOP: 'top',
+    RIGHT: 'right',
+    BOTTOM: 'bottom',
+    CENTER: 'center'
+  },
+  TIMELINE_DIR: {
+    TOP: 'top',
+    BOTTOM: 'bottom'
+  }
+}
+
+export const initRootNodePositionMap = {
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.LEFT]: 0,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.TOP]: 0,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.RIGHT]: 1,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.BOTTOM]: 1,
+  [CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER]: 0.5,
+}
+
+//  布局结构列表
+export const layoutList = [
+  {
+    name: '逻辑结构图',
+    value: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
+  },
+  {
+    name: '思维导图',
+    value: CONSTANTS.LAYOUT.MIND_MAP,
+  },
+  {
+    name: '组织结构图',
+    value: CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE,
+  },
+  {
+    name: '目录组织图',
+    value: CONSTANTS.LAYOUT.CATALOG_ORGANIZATION,
+  },
+  {
+    name: '时间轴',
+    value: CONSTANTS.LAYOUT.TIMELINE,
+  },
+  {
+    name: '时间轴2',
+    value: CONSTANTS.LAYOUT.TIMELINE2,
+  },
+  {
+    name: '鱼骨图',
+    value: CONSTANTS.LAYOUT.FISHBONE,
+  }
+]
+export const layoutValueList = [
+  CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
+  CONSTANTS.LAYOUT.MIND_MAP,
+  CONSTANTS.LAYOUT.CATALOG_ORGANIZATION,
+  CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE,
+  CONSTANTS.LAYOUT.TIMELINE,
+  CONSTANTS.LAYOUT.TIMELINE2,
+  CONSTANTS.LAYOUT.FISHBONE
+]
+
+// 节点数据中非样式的字段
+export const nodeDataNoStylePropList = [
+  'text',
+  'image',
+  'imageTitle',
+  'imageSize',
+  'icon',
+  'tag',
+  'hyperlink',
+  'hyperlinkTitle',
+  'note',
+  'expand',
+  'isActive',
+  'generalization',
+  'richText',
+  'resetRichText',
+  'uid',
+  'activeStyle'
+]
--- a/simple-mind-map/src/core/command/Command.js
+++ b/simple-mind-map/src/core/command/Command.js
@@ -0,0 +1,154 @@
+import { copyRenderTree, simpleDeepClone, nextTick } from '../../utils'
+
+//  命令类
+class Command {
+  //  构造函数
+  constructor(opt = {}) {
+    this.opt = opt
+    this.mindMap = opt.mindMap
+    this.commands = {}
+    this.history = []
+    this.activeHistoryIndex = 0
+    // 注册快捷键
+    this.registerShortcutKeys()
+    this.addHistory = nextTick(this.addHistory, this)
+  }
+
+  //  清空历史数据
+  clearHistory() {
+    this.history = []
+    this.activeHistoryIndex = 0
+    this.mindMap.emit('back_forward', 0, 0)
+  }
+
+  //  注册快捷键
+  registerShortcutKeys() {
+    this.mindMap.keyCommand.addShortcut('Control+z', () => {
+      this.mindMap.execCommand('BACK')
+    })
+    this.mindMap.keyCommand.addShortcut('Control+y', () => {
+      this.mindMap.execCommand('FORWARD')
+    })
+  }
+
+  //  执行命令
+  exec(name, ...args) {
+    if (this.commands[name]) {
+      this.commands[name].forEach(fn => {
+        fn(...args)
+      })
+      if (['BACK', 'FORWARD', 'SET_NODE_ACTIVE', 'CLEAR_ACTIVE_NODE'].includes(name)) {
+        return
+      }
+      this.addHistory()
+    }
+  }
+
+  //  添加命令
+  add(name, fn) {
+    if (this.commands[name]) {
+      this.commands[name].push(fn)
+    } else {
+      this.commands[name] = [fn]
+    }
+  }
+
+  //  移除命令
+  remove(name, fn) {
+    if (!this.commands[name]) {
+      return
+    }
+    if (!fn) {
+      this.commands[name] = []
+      delete this.commands[name]
+    } else {
+      let index = this.commands[name].find(item => {
+        return item === fn
+      })
+      if (index !== -1) {
+        this.commands[name].splice(index, 1)
+      }
+    }
+  }
+
+  //  添加回退数据
+  addHistory() {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
+    let data = this.getCopyData()
+    // 此次数据和上次一样则不重复添加
+    if (this.history.length > 0 && JSON.stringify(this.history[this.history.length - 1]) === JSON.stringify(data)) {
+      return
+    }
+    // 删除当前历史指针后面的数据
+    this.history = this.history.slice(0, this.activeHistoryIndex + 1)
+    this.history.push(simpleDeepClone(data))
+    // 历史记录数超过最大数量
+    if (this.history.length > this.mindMap.opt.maxHistoryCount) {
+      this.history.shift()
+    }
+    this.activeHistoryIndex = this.history.length - 1
+    this.mindMap.emit('data_change', this.removeDataUid(data))
+    this.mindMap.emit(
+      'back_forward',
+      this.activeHistoryIndex,
+      this.history.length
+    )
+  }
+
+  //  回退
+  back(step = 1) {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
+    if (this.activeHistoryIndex - step >= 0) {
+      this.activeHistoryIndex -= step
+      this.mindMap.emit(
+        'back_forward',
+        this.activeHistoryIndex,
+        this.history.length
+      )
+      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
+      this.mindMap.emit('data_change', this.removeDataUid(data))
+      return data
+    }
+  }
+
+  //  前进
+  forward(step = 1) {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
+    let len = this.history.length
+    if (this.activeHistoryIndex + step <= len - 1) {
+      this.activeHistoryIndex += step
+      this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
+      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
+      this.mindMap.emit('data_change', this.removeDataUid(data))
+      return data
+    }
+  }
+
+  //  获取渲染树数据副本
+  getCopyData() {
+    return copyRenderTree({}, this.mindMap.renderer.renderTree, true)
+  }
+
+  // 移除节点数据中的uid
+  removeDataUid(data) {
+    data = simpleDeepClone(data)
+    let walk = (root) => {
+      delete root.data.uid
+      if (root.children && root.children.length > 0) {
+        root.children.forEach((item) => {
+          walk(item)
+        })
+      }
+    }
+    walk(data)
+    return data
+  }
+}
+
+export default Command
--- a/simple-mind-map/src/core/command/KeyCommand.js
+++ b/simple-mind-map/src/core/command/KeyCommand.js
@@ -0,0 +1,161 @@
+import { keyMap } from './keyMap'
+//  快捷按键、命令处理类
+export default class KeyCommand {
+  //  构造函数
+  constructor(opt) {
+    this.opt = opt
+    this.mindMap = opt.mindMap
+    this.shortcutMap = {
+      //Enter: [fn]
+    }
+    this.shortcutMapCache = {}
+    this.isPause = false
+    this.isInSvg = false
+    this.bindEvent()
+  }
+
+  //  暂停快捷键响应
+  pause() {
+    this.isPause = true
+  }
+
+  //  恢复快捷键响应
+  recovery() {
+    this.isPause = false
+  }
+
+  //  保存当前注册的快捷键数据，然后清空快捷键数据
+  save() {
+    this.shortcutMapCache = this.shortcutMap
+    this.shortcutMap = {}
+  }
+
+  //  恢复保存的快捷键数据，然后清空缓存数据
+  restore() {
+    this.shortcutMap = this.shortcutMapCache
+    this.shortcutMapCache = {}
+  }
+
+  //  绑定事件
+  bindEvent() {
+    // 只有当鼠标在画布内才响应快捷键
+    this.mindMap.on('svg_mouseenter', () => {
+      this.isInSvg = true
+    })
+    this.mindMap.on('svg_mouseleave', () => {
+      if (this.mindMap.richText && this.mindMap.richText.showTextEdit) {
+        return
+      }
+      if (this.mindMap.renderer.textEdit.showTextEdit || (this.mindMap.associativeLine && this.mindMap.associativeLine.showTextEdit)) {
+        return
+      }
+      this.isInSvg = false
+    })
+    window.addEventListener('keydown', e => {
+      if (this.isPause || (this.mindMap.opt.enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)) {
+        return
+      }
+      Object.keys(this.shortcutMap).forEach(key => {
+        if (this.checkKey(e, key)) {
+          e.stopPropagation()
+          e.preventDefault()
+          this.shortcutMap[key].forEach(fn => {
+            fn()
+          })
+        }
+      })
+    })
+  }
+
+  //  检查键值是否符合
+  checkKey(e, key) {
+    let o = this.getOriginEventCodeArr(e)
+    let k = this.getKeyCodeArr(key)
+    if (o.length !== k.length) {
+      return false
+    }
+    for (let i = 0; i < o.length; i++) {
+      let index = k.findIndex(item => {
+        return item === o[i]
+      })
+      if (index === -1) {
+        return false
+      } else {
+        k.splice(index, 1)
+      }
+    }
+    return true
+  }
+
+  //  获取事件对象里的键值数组
+  getOriginEventCodeArr(e) {
+    let arr = []
+    if (e.ctrlKey || e.metaKey) {
+      arr.push(keyMap['Control'])
+    }
+    if (e.altKey) {
+      arr.push(keyMap['Alt'])
+    }
+    if (e.shiftKey) {
+      arr.push(keyMap['Shift'])
+    }
+    if (!arr.includes(e.keyCode)) {
+      arr.push(e.keyCode)
+    }
+    return arr
+  }
+
+  //  获取快捷键对应的键值数组
+  getKeyCodeArr(key) {
+    let keyArr = key.split(/\s*\+\s*/)
+    let arr = []
+    keyArr.forEach(item => {
+      arr.push(keyMap[item])
+    })
+    return arr
+  }
+
+  //  添加快捷键命令
+  /**
+   * Enter
+   * Tab | Insert
+   * Shift + a
+   */
+  addShortcut(key, fn) {
+    key.split(/\s*\|\s*/).forEach(item => {
+      if (this.shortcutMap[item]) {
+        this.shortcutMap[item].push(fn)
+      } else {
+        this.shortcutMap[item] = [fn]
+      }
+    })
+  }
+
+  //  移除快捷键命令
+  removeShortcut(key, fn) {
+    key.split(/\s*\|\s*/).forEach(item => {
+      if (this.shortcutMap[item]) {
+        if (fn) {
+          let index = this.shortcutMap[item].findIndex(f => {
+            return f === fn
+          })
+          if (index !== -1) {
+            this.shortcutMap[item].splice(index, 1)
+          }
+        } else {
+          this.shortcutMap[item] = []
+          delete this.shortcutMap[item]
+        }
+      }
+    })
+  }
+
+  //  获取指定快捷键的处理函数
+  getShortcutFn(key) {
+    let res = []
+    key.split(/\s*\|\s*/).forEach(item => {
+      res = this.shortcutMap[item] || []
+    })
+    return res
+  }
+}
--- a/simple-mind-map/src/core/command/keyMap.js
+++ b/simple-mind-map/src/core/command/keyMap.js
@@ -0,0 +1,69 @@
+const map = {
+  Backspace: 8,
+  Tab: 9,
+  Enter: 13,
+
+  Shift: 16,
+  Control: 17,
+  Alt: 18,
+  CapsLock: 20,
+
+  Esc: 27,
+
+  Spacebar: 32,
+
+  PageUp: 33,
+  PageDown: 34,
+  End: 35,
+  Home: 36,
+
+  Insert: 45,
+
+  Left: 37,
+  Up: 38,
+  Right: 39,
+  Down: 40,
+
+  Del: 46,
+
+  NumLock: 144,
+
+  Cmd: 91,
+  CmdFF: 224,
+  F1: 112,
+  F2: 113,
+  F3: 114,
+  F4: 115,
+  F5: 116,
+  F6: 117,
+  F7: 118,
+  F8: 119,
+  F9: 120,
+  F10: 121,
+  F11: 122,
+  F12: 123,
+
+  '`': 192,
+  '=': 187,
+  '-': 189,
+
+  '/': 191,
+  '.': 190
+}
+
+// 数字
+for (let i = 0; i <= 9; i++) {
+  map[i] = i + 48
+}
+
+// 字母
+'abcdefghijklmnopqrstuvwxyz'.split('').forEach((n, index) => {
+  map[n] = index + 65
+})
+
+export const keyMap = map
+
+export const isKey = (e, key) => {
+  let code = typeof e === 'object' ? e.keyCode : e
+  return map[key] === code
+}
--- a/simple-mind-map/src/core/event/Event.js
+++ b/simple-mind-map/src/core/event/Event.js
@@ -0,0 +1,174 @@
+import EventEmitter from 'eventemitter3'
+import { CONSTANTS } from '../../constants/constant'
+
+//  事件类
+class Event extends EventEmitter {
+  //  构造函数
+  constructor(opt = {}) {
+    super()
+    this.opt = opt
+    this.mindMap = opt.mindMap
+    this.isLeftMousedown = false
+    this.isRightMousedown = false
+    this.mousedownPos = {
+      x: 0,
+      y: 0
+    }
+    this.mousemovePos = {
+      x: 0,
+      y: 0
+    }
+    this.mousemoveOffset = {
+      x: 0,
+      y: 0
+    }
+    this.bindFn()
+    this.bind()
+  }
+
+  //  绑定函数上下文
+  bindFn() {
+    this.onBodyClick = this.onBodyClick.bind(this)
+    this.onDrawClick = this.onDrawClick.bind(this)
+    this.onMousedown = this.onMousedown.bind(this)
+    this.onMousemove = this.onMousemove.bind(this)
+    this.onMouseup = this.onMouseup.bind(this)
+    this.onMousewheel = this.onMousewheel.bind(this)
+    this.onContextmenu = this.onContextmenu.bind(this)
+    this.onSvgMousedown = this.onSvgMousedown.bind(this)
+    this.onKeyup = this.onKeyup.bind(this)
+    this.onMouseenter = this.onMouseenter.bind(this)
+    this.onMouseleave = this.onMouseleave.bind(this)
+  }
+
+  //  绑定事件
+  bind() {
+    document.body.addEventListener('click', this.onBodyClick)
+    this.mindMap.svg.on('click', this.onDrawClick)
+    this.mindMap.el.addEventListener('mousedown', this.onMousedown)
+    this.mindMap.svg.on('mousedown', this.onSvgMousedown)
+    window.addEventListener('mousemove', this.onMousemove)
+    window.addEventListener('mouseup', this.onMouseup)
+    this.mindMap.el.addEventListener('wheel', this.onMousewheel)
+    this.mindMap.svg.on('contextmenu', this.onContextmenu)
+    this.mindMap.svg.on('mouseenter', this.onMouseenter)
+    this.mindMap.svg.on('mouseleave', this.onMouseleave)
+    window.addEventListener('keyup', this.onKeyup)
+  }
+
+  //  解绑事件
+  unbind() {
+    document.body.removeEventListener('click', this.onBodyClick)
+    this.mindMap.svg.off('click', this.onDrawClick)
+    this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
+    window.removeEventListener('mousemove', this.onMousemove)
+    window.removeEventListener('mouseup', this.onMouseup)
+    this.mindMap.el.removeEventListener('wheel', this.onMousewheel)
+    this.mindMap.svg.off('contextmenu', this.onContextmenu)
+    this.mindMap.svg.off('mouseenter', this.onMouseenter)
+    this.mindMap.svg.off('mouseleave', this.onMouseleave)
+    window.removeEventListener('keyup', this.onKeyup)
+  }
+
+  //   画布的单击事件
+  onDrawClick(e) {
+    this.emit('draw_click', e)
+  }
+
+  // 页面的单击事件
+  onBodyClick(e) {
+    this.emit('body_click', e)
+  }
+
+  //   svg画布的鼠标按下事件
+  onSvgMousedown(e) {
+    this.emit('svg_mousedown', e)
+  }
+
+  //  鼠标按下事件
+  onMousedown(e) {
+    // 鼠标左键
+    if (e.which === 1) {
+      this.isLeftMousedown = true
+    } else if (e.which === 3) {
+      this.isRightMousedown = true
+    }
+    this.mousedownPos.x = e.clientX
+    this.mousedownPos.y = e.clientY
+    this.emit('mousedown', e, this)
+  }
+
+  //  鼠标移动事件
+  onMousemove(e) {
+    let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
+    this.mousemovePos.x = e.clientX
+    this.mousemovePos.y = e.clientY
+    this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
+    this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
+    this.emit('mousemove', e, this)
+    if (
+      useLeftKeySelectionRightKeyDrag
+        ? this.isRightMousedown
+        : this.isLeftMousedown
+    ) {
+      e.preventDefault()
+      this.emit('drag', e, this)
+    }
+  }
+
+  //  鼠标松开事件
+  onMouseup(e) {
+    this.isLeftMousedown = false
+    this.isRightMousedown = false
+    this.emit('mouseup', e, this)
+  }
+
+  //  鼠标滚动
+  onMousewheel(e) {
+    e.stopPropagation()
+    e.preventDefault()
+    let dir
+    // 解决mac触控板双指缩放方向相反的问题
+    if (e.ctrlKey) {
+      if (e.deltaY > 0) dir = CONSTANTS.DIR.UP
+      if (e.deltaY < 0) dir = CONSTANTS.DIR.DOWN
+      if (e.deltaX > 0) dir = CONSTANTS.DIR.LEFT
+      if (e.deltaX < 0) dir = CONSTANTS.DIR.RIGHT
+    } else {
+      if ((e.wheelDeltaY || e.detail) > 0) dir = CONSTANTS.DIR.UP
+      if ((e.wheelDeltaY || e.detail) < 0) dir = CONSTANTS.DIR.DOWN
+      if ((e.wheelDeltaX || e.detail) > 0) dir = CONSTANTS.DIR.LEFT
+      if ((e.wheelDeltaX || e.detail) < 0) dir = CONSTANTS.DIR.RIGHT
+    }
+    // 判断是否是触控板
+    let isTouchPad = false
+    // mac、windows
+    if (e.wheelDeltaY === e.deltaY * -3 || Math.abs(e.wheelDeltaY) <= 10) {
+      isTouchPad = true
+    }
+    this.emit('mousewheel', e, dir, this, isTouchPad)
+  }
+
+  //  鼠标右键菜单事件
+  onContextmenu(e) {
+    e.preventDefault()
+    this.emit('contextmenu', e)
+  }
+
+  //  按键松开事件
+  onKeyup(e) {
+    this.emit('keyup', e)
+  }
+
+  // 进入
+  onMouseenter(e) {
+    this.emit('svg_mouseenter', e)
+  }
+
+  // 离开
+  onMouseleave(e) {
+    this.emit('svg_mouseleave', e)
+  }
+}
+
+export default Event
--- a/simple-mind-map/src/core/render/Render.js
+++ b/simple-mind-map/src/core/render/Render.js
--- a/simple-mind-map/src/core/render/TextEdit.js
+++ b/simple-mind-map/src/core/render/TextEdit.js
@@ -0,0 +1,188 @@
+import { getStrWithBrFromHtml, checkNodeOuter } from '../../utils'
+
+//  节点文字编辑类
+export default class TextEdit {
+  //  构造函数
+  constructor(renderer) {
+    this.renderer = renderer
+    this.mindMap = renderer.mindMap
+    // 当前编辑的节点
+    this.currentNode = null
+    // 文本编辑框
+    this.textEditNode = null
+    // 文本编辑框是否显示
+    this.showTextEdit = false
+    // 如果编辑过程中缩放画布了，那么缓存当前编辑的内容
+    this.cacheEditingText = ''
+    this.bindEvent()
+  }
+
+  //  事件
+  bindEvent() {
+    this.show = this.show.bind(this)
+    this.onScale = this.onScale.bind(this)
+    // 节点双击事件
+    this.mindMap.on('node_dblclick', this.show)
+    // 点击事件
+    this.mindMap.on('draw_click', () => {
+      // 隐藏文本编辑框
+      this.hideEditTextBox()
+    })
+    this.mindMap.on('body_click', () => {
+      // 隐藏文本编辑框
+      if (this.mindMap.opt.isEndNodeTextEditOnClickOuter) {
+        this.hideEditTextBox()
+      }
+    })
+    this.mindMap.on('svg_mousedown', () => {
+      // 隐藏文本编辑框
+      this.hideEditTextBox()
+    })
+    // 展开收缩按钮点击事件
+    this.mindMap.on('expand_btn_click', () => {
+      this.hideEditTextBox()
+    })
+    // 节点激活前事件
+    this.mindMap.on('before_node_active', () => {
+      this.hideEditTextBox()
+    })
+    // 注册编辑快捷键
+    this.mindMap.keyCommand.addShortcut('F2', () => {
+      if (this.renderer.activeNodeList.length <= 0) {
+        return
+      }
+      this.show(this.renderer.activeNodeList[0])
+    })
+    this.mindMap.on('scale', this.onScale)
+  }
+
+  //  注册临时快捷键
+  registerTmpShortcut() {
+    // 注册回车快捷键
+    this.mindMap.keyCommand.addShortcut('Enter', () => {
+      this.hideEditTextBox()
+    })
+  }
+
+  //  显示文本编辑框
+  async show(node) {
+    if (typeof this.mindMap.opt.beforeTextEdit === 'function') {
+      let isShow = false
+      try {
+        isShow = await this.mindMap.opt.beforeTextEdit(node)
+      } catch (error) {
+        isShow = false
+      }
+      if (!isShow) return
+    }
+    this.currentNode = node
+    let { offsetLeft, offsetTop } = checkNodeOuter(this.mindMap, node)
+    this.mindMap.view.translateXY(offsetLeft, offsetTop)
+    let rect = node._textData.node.node.getBoundingClientRect()
+    if (this.mindMap.richText) {
+      this.mindMap.richText.showEditText(node, rect)
+      return
+    }
+    this.showEditTextBox(node, rect)
+  }
+
+  // 处理画布缩放
+  onScale() {
+    if (!this.currentNode) return
+    if (this.mindMap.richText) {
+      this.mindMap.richText.cacheEditingText = this.mindMap.richText.getEditText()
+      this.mindMap.richText.showTextEdit = false
+    } else {
+      this.cacheEditingText = this.getEditText()
+      this.showTextEdit = false
+    }
+    this.show(this.currentNode)
+  }
+
+  //  显示文本编辑框
+  showEditTextBox(node, rect) {
+    this.mindMap.emit('before_show_text_edit')
+    this.registerTmpShortcut()
+    if (!this.textEditNode) {
+      this.textEditNode = document.createElement('div')
+      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none; word-break: break-all;`
+      this.textEditNode.setAttribute('contenteditable', true)
+      this.textEditNode.addEventListener('keyup', e => {
+        e.stopPropagation()
+      })
+      this.textEditNode.addEventListener('click', e => {
+        e.stopPropagation()
+      })
+      document.body.appendChild(this.textEditNode)
+    }
+    let scale = this.mindMap.view.scale
+    let lineHeight = node.style.merge('lineHeight')
+    let fontSize = node.style.merge('fontSize')
+    let textLines = (this.cacheEditingText || node.nodeData.data.text).split(/\n/gim)
+    let isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true'
+    node.style.domText(this.textEditNode, scale, isMultiLine)
+    this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
+    this.textEditNode.innerHTML = textLines.join('<br>')
+    this.textEditNode.style.minWidth = rect.width + 10 + 'px'
+    this.textEditNode.style.minHeight = rect.height + 6 + 'px'
+    this.textEditNode.style.left = rect.left + 'px'
+    this.textEditNode.style.top = rect.top + 'px'
+    this.textEditNode.style.display = 'block'
+    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth * scale + 'px'
+    if (isMultiLine && lineHeight !== 1) {
+      this.textEditNode.style.transform = `translateY(${-((lineHeight * fontSize - fontSize) / 2) * scale}px)`
+    }
+    this.showTextEdit = true
+    // 选中文本
+    if (!this.cacheEditingText) {
+      this.selectNodeText()
+    }
+    this.cacheEditingText = ''
+  }
+
+  //  选中文本
+  selectNodeText() {
+    let selection = window.getSelection()
+    let range = document.createRange()
+    range.selectNodeContents(this.textEditNode)
+    selection.removeAllRanges()
+    selection.addRange(range)
+  }
+
+  // 获取当前正在编辑的内容
+  getEditText() {
+    return getStrWithBrFromHtml(this.textEditNode.innerHTML)
+  }
+
+  //  隐藏文本编辑框
+  hideEditTextBox() {
+    this.currentNode = null
+    if (this.mindMap.richText) {
+      return this.mindMap.richText.hideEditText()
+    }
+    if (!this.showTextEdit) {
+      return
+    }
+    this.renderer.activeNodeList.forEach(node => {
+      let str = this.getEditText()
+      this.mindMap.execCommand('SET_NODE_TEXT', node, str)
+      if (node.isGeneralization) {
+        // 概要节点
+        node.generalizationBelongNode.updateGeneralization()
+      }
+      this.mindMap.render()
+    })
+    this.mindMap.emit(
+      'hide_text_edit',
+      this.textEditNode,
+      this.renderer.activeNodeList
+    )
+    this.textEditNode.style.display = 'none'
+    this.textEditNode.innerHTML = ''
+    this.textEditNode.style.fontFamily = 'inherit'
+    this.textEditNode.style.fontSize = 'inherit'
+    this.textEditNode.style.fontWeight = 'normal'
+    this.textEditNode.style.transform = 'translateY(0)'
+    this.showTextEdit = false
+  }
+}
--- a/simple-mind-map/src/core/render/node/Node.js
+++ b/simple-mind-map/src/core/render/node/Node.js
@@ -0,0 +1,808 @@
+import Style from './Style'
+import Shape from './Shape'
+import { asyncRun } from '../../../utils'
+import { G, Rect } from '@svgdotjs/svg.js'
+import nodeGeneralizationMethods from './nodeGeneralization'
+import nodeExpandBtnMethods from './nodeExpandBtn'
+import nodeCommandWrapsMethods from './nodeCommandWraps'
+import nodeCreateContentsMethods from './nodeCreateContents'
+import { CONSTANTS } from '../../../constants/constant'
+
+//  节点类
+class Node {
+  //  构造函数
+  constructor(opt = {}) {
+    // 节点数据
+    this.nodeData = this.handleData(opt.data || {})
+    // id
+    this.uid = opt.uid
+    // 控制实例
+    this.mindMap = opt.mindMap
+    // 渲染实例
+    this.renderer = opt.renderer
+    // 渲染器
+    this.draw = opt.draw || null
+    // 样式实例
+    this.style = new Style(this)
+    // 形状实例
+    this.shapeInstance = new Shape(this)
+    this.shapePadding = {
+      paddingX: 0,
+      paddingY: 0
+    }
+    // 是否是根节点
+    this.isRoot = opt.isRoot === undefined ? false : opt.isRoot
+    // 是否是概要节点
+    this.isGeneralization =
+      opt.isGeneralization === undefined ? false : opt.isGeneralization
+    this.generalizationBelongNode = null
+    // 节点层级
+    this.layerIndex = opt.layerIndex === undefined ? 0 : opt.layerIndex
+    // 节点宽
+    this.width = opt.width || 0
+    // 节点高
+    this.height = opt.height || 0
+    // left
+    this._left = opt.left || 0
+    // top
+    this._top = opt.top || 0
+    // 自定义位置
+    this.customLeft = opt.data.data.customLeft || undefined
+    this.customTop = opt.data.data.customTop || undefined
+    // 是否正在拖拽中
+    this.isDrag = false
+    // 父节点
+    this.parent = opt.parent || null
+    // 子节点
+    this.children = opt.children || []
+    // 节点内容的容器
+    this.group = null
+    this.shapeNode = null // 节点形状节点
+    // 节点内容对象
+    this._imgData = null
+    this._iconData = null
+    this._textData = null
+    this._hyperlinkData = null
+    this._tagData = null
+    this._noteData = null
+    this.noteEl = null
+    this._expandBtn = null
+    this._lastExpandBtnType = null
+    this._showExpandBtn = false
+    this._openExpandNode = null
+    this._closeExpandNode = null
+    this._fillExpandNode = null
+    this._lines = []
+    this._generalizationLine = null
+    this._generalizationNode = null
+    this._unVisibleRectRegionNode = null
+    this._isMouseenter = false
+    // 尺寸信息
+    this._rectInfo = {
+      imgContentWidth: 0,
+      imgContentHeight: 0,
+      textContentWidth: 0,
+      textContentHeight: 0
+    }
+    // 概要节点的宽高
+    this._generalizationNodeWidth = 0
+    this._generalizationNodeHeight = 0
+    // 各种文字信息的间距
+    this.textContentItemMargin = this.mindMap.opt.textContentMargin
+    // 图片和文字节点的间距
+    this.blockContentMargin = this.mindMap.opt.imgTextMargin
+    // 展开收缩按钮尺寸
+    this.expandBtnSize = this.mindMap.opt.expandBtnSize
+    // 是否是多选节点
+    this.isMultipleChoice = false
+    // 是否需要重新layout
+    this.needLayout = false
+    // 概要相关方法
+    Object.keys(nodeGeneralizationMethods).forEach(item => {
+      this[item] = nodeGeneralizationMethods[item].bind(this)
+    })
+    // 展开收起按钮相关方法
+    Object.keys(nodeExpandBtnMethods).forEach(item => {
+      this[item] = nodeExpandBtnMethods[item].bind(this)
+    })
+    // 命令的相关方法
+    Object.keys(nodeCommandWrapsMethods).forEach(item => {
+      this[item] = nodeCommandWrapsMethods[item].bind(this)
+    })
+    // 创建节点内容的相关方法
+    Object.keys(nodeCreateContentsMethods).forEach(item => {
+      this[item] = nodeCreateContentsMethods[item].bind(this)
+    })
+    // 初始化
+    this.getSize()
+  }
+
+  // 支持自定义位置
+  get left() {
+    return this.customLeft || this._left
+  }
+
+  set left(val) {
+    this._left = val
+  }
+
+  get top() {
+    return this.customTop || this._top
+  }
+
+  set top(val) {
+    this._top = val
+  }
+
+  //  复位部分布局时会重新设置的数据
+  reset() {
+    this.children = []
+    this.parent = null
+    this.isRoot = false
+    this.layerIndex = 0
+    this.left = 0
+    this.top = 0
+  }
+
+  //  处理数据
+  handleData(data) {
+    data.data.expand = data.data.expand === false ? false : true
+    data.data.isActive = data.data.isActive === true ? true : false
+    data.children = data.children || []
+    return data
+  }
+
+  //  创建节点的各个内容对象数据
+  createNodeData() {
+    this._imgData = this.createImgNode()
+    this._iconData = this.createIconNode()
+    this._textData = this.createTextNode()
+    this._hyperlinkData = this.createHyperlinkNode()
+    this._tagData = this.createTagNode()
+    this._noteData = this.createNoteNode()
+  }
+
+  //  计算节点的宽高
+  getSize() {
+    this.updateGeneralization()
+    this.createNodeData()
+    let { width, height } = this.getNodeRect()
+    // 判断节点尺寸是否有变化
+    let changed = this.width !== width || this.height !== height
+    this.width = width
+    this.height = height
+    return changed
+  }
+
+  //  计算节点尺寸信息
+  getNodeRect() {
+    // 宽高
+    let imgContentWidth = 0
+    let imgContentHeight = 0
+    let textContentWidth = 0
+    let textContentHeight = 0
+    // 存在图片
+    if (this._imgData) {
+      this._rectInfo.imgContentWidth = imgContentWidth = this._imgData.width
+      this._rectInfo.imgContentHeight = imgContentHeight = this._imgData.height
+    }
+    // 图标
+    if (this._iconData.length > 0) {
+      textContentWidth += this._iconData.reduce((sum, cur) => {
+        textContentHeight = Math.max(textContentHeight, cur.height)
+        return (sum += cur.width + this.textContentItemMargin)
+      }, 0)
+    }
+    // 文字
+    if (this._textData) {
+      textContentWidth += this._textData.width
+      textContentHeight = Math.max(textContentHeight, this._textData.height)
+    }
+    // 超链接
+    if (this._hyperlinkData) {
+      textContentWidth += this._hyperlinkData.width
+      textContentHeight = Math.max(
+        textContentHeight,
+        this._hyperlinkData.height
+      )
+    }
+    // 标签
+    if (this._tagData.length > 0) {
+      textContentWidth += this._tagData.reduce((sum, cur) => {
+        textContentHeight = Math.max(textContentHeight, cur.height)
+        return (sum += cur.width + this.textContentItemMargin)
+      }, 0)
+    }
+    // 备注
+    if (this._noteData) {
+      textContentWidth += this._noteData.width
+      textContentHeight = Math.max(textContentHeight, this._noteData.height)
+    }
+    // 文字内容部分的尺寸
+    this._rectInfo.textContentWidth = textContentWidth
+    this._rectInfo.textContentHeight = textContentHeight
+    // 间距
+    let margin =
+      imgContentHeight > 0 && textContentHeight > 0
+        ? this.blockContentMargin
+        : 0
+    let { paddingX, paddingY } = this.getPaddingVale()
+    // 纯内容宽高
+    let _width = Math.max(imgContentWidth, textContentWidth)
+    let _height = imgContentHeight + textContentHeight
+    // 计算节点形状需要的附加内边距
+    let { paddingX: shapePaddingX, paddingY: shapePaddingY } =
+      this.shapeInstance.getShapePadding(_width, _height, paddingX, paddingY)
+    this.shapePadding.paddingX = shapePaddingX
+    this.shapePadding.paddingY = shapePaddingY
+    return {
+      width: _width + paddingX * 2 + shapePaddingX * 2,
+      height: _height + paddingY * 2 + margin + shapePaddingY * 2
+    }
+  }
+
+  //  定位节点内容
+  layout() {
+    // 清除之前的内容
+    this.group.clear()
+    let { width, height, textContentItemMargin } = this
+    let { paddingY } = this.getPaddingVale()
+    paddingY += this.shapePadding.paddingY
+    // 节点形状
+    this.shapeNode = this.shapeInstance.createShape()
+    this.group.add(this.shapeNode)
+    this.updateNodeShape()
+    // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      if (!this._unVisibleRectRegionNode) {
+        this._unVisibleRectRegionNode = new Rect()
+      }
+      this._unVisibleRectRegionNode.fill({
+        color: 'transparent'
+      }).size(this.expandBtnSize, height).x(width).y(0)
+      this.group.add(this._unVisibleRectRegionNode)
+    }
+    // 概要节点添加一个带所属节点id的类名
+    if (this.isGeneralization && this.generalizationBelongNode) {
+      this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
+    }
+    // 图片节点
+    let imgHeight = 0
+    if (this._imgData) {
+      imgHeight = this._imgData.height
+      this.group.add(this._imgData.node)
+      this._imgData.node.cx(width / 2).y(paddingY)
+    }
+    // 内容节点
+    let textContentNested = new G()
+    let textContentOffsetX = 0
+    // icon
+    let iconNested = new G()
+    if (this._iconData && this._iconData.length > 0) {
+      let iconLeft = 0
+      this._iconData.forEach(item => {
+        item.node
+          .x(textContentOffsetX + iconLeft)
+          .y((this._rectInfo.textContentHeight - item.height) / 2)
+        iconNested.add(item.node)
+        iconLeft += item.width + textContentItemMargin
+      })
+      textContentNested.add(iconNested)
+      textContentOffsetX += iconLeft
+    }
+    // 文字
+    if (this._textData) {
+      this._textData.node.attr('data-offsetx', textContentOffsetX)
+      this._textData.node.x(textContentOffsetX).y(0)
+      textContentNested.add(this._textData.node)
+      textContentOffsetX += this._textData.width + textContentItemMargin
+    }
+    // 超链接
+    if (this._hyperlinkData) {
+      this._hyperlinkData.node
+        .x(textContentOffsetX)
+        .y((this._rectInfo.textContentHeight - this._hyperlinkData.height) / 2)
+      textContentNested.add(this._hyperlinkData.node)
+      textContentOffsetX += this._hyperlinkData.width + textContentItemMargin
+    }
+    // 标签
+    let tagNested = new G()
+    if (this._tagData && this._tagData.length > 0) {
+      let tagLeft = 0
+      this._tagData.forEach(item => {
+        item.node
+          .x(textContentOffsetX + tagLeft)
+          .y((this._rectInfo.textContentHeight - item.height) / 2)
+        tagNested.add(item.node)
+        tagLeft += item.width + textContentItemMargin
+      })
+      textContentNested.add(tagNested)
+      textContentOffsetX += tagLeft
+    }
+    // 备注
+    if (this._noteData) {
+      this._noteData.node
+        .x(textContentOffsetX)
+        .y((this._rectInfo.textContentHeight - this._noteData.height) / 2)
+      textContentNested.add(this._noteData.node)
+      textContentOffsetX += this._noteData.width
+    }
+    // 文字内容整体
+    textContentNested.translate(
+      width / 2 - textContentNested.bbox().width / 2,
+      imgHeight +
+        paddingY +
+        (imgHeight > 0 && this._rectInfo.textContentHeight > 0
+          ? this.blockContentMargin
+          : 0)
+    )
+    this.group.add(textContentNested)
+  }
+
+  // 给节点绑定事件
+  bindGroupEvent() {
+    // 单击事件，选中节点
+    this.group.on('click', e => {
+      this.mindMap.emit('node_click', this, e)
+      if (this.isMultipleChoice) {
+        e.stopPropagation()
+        this.isMultipleChoice = false
+        return
+      }
+      this.active(e)
+    })
+    this.group.on('mousedown', e => {
+      if (this.isRoot && e.which === 3) {
+        e.stopPropagation()
+      }
+      if (!this.isRoot) {
+        e.stopPropagation()
+      }
+      // 多选和取消多选
+      if (e.ctrlKey && this.mindMap.opt.enableCtrlKeyNodeSelection) {
+        this.isMultipleChoice = true
+        let isActive = this.nodeData.data.isActive
+        if (!isActive)
+          this.mindMap.emit(
+            'before_node_active',
+            this,
+            this.renderer.activeNodeList
+          )
+        this.mindMap.execCommand('SET_NODE_ACTIVE', this, !isActive)
+        this.mindMap.renderer[isActive ? 'removeActiveNode' : 'addActiveNode'](
+          this
+        )
+        this.mindMap.emit(
+          'node_active',
+          isActive ? null : this,
+          this.mindMap.renderer.activeNodeList
+        )
+      }
+      this.mindMap.emit('node_mousedown', this, e)
+    })
+    this.group.on('mouseup', e => {
+      if (!this.isRoot) {
+        e.stopPropagation()
+      }
+      this.mindMap.emit('node_mouseup', this, e)
+    })
+    this.group.on('mouseenter', e => {
+      this._isMouseenter = true
+      // 显示展开收起按钮
+      this.showExpandBtn()
+      this.mindMap.emit('node_mouseenter', this, e)
+    })
+    this.group.on('mouseleave', e => {
+      this._isMouseenter = false
+      this.hideExpandBtn()
+      this.mindMap.emit('node_mouseleave', this, e)
+    })
+    // 双击事件
+    this.group.on('dblclick', e => {
+      if (this.mindMap.opt.readonly) {
+        return
+      }
+      e.stopPropagation()
+      this.mindMap.emit('node_dblclick', this, e)
+    })
+    // 右键菜单事件
+    this.group.on('contextmenu', e => {
+      // 按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
+      if (this.mindMap.opt.readonly || e.ctrlKey) {// || this.isGeneralization
+        return
+      }
+      e.stopPropagation()
+      e.preventDefault()
+      if (this.nodeData.data.isActive) {
+        this.renderer.clearActive()
+      }
+      this.active(e)
+      this.mindMap.emit('node_contextmenu', e, this)
+    })
+  }
+
+  //  激活节点
+  active(e) {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
+    e && e.stopPropagation()
+    if (this.nodeData.data.isActive) {
+      return
+    }
+    this.mindMap.emit('before_node_active', this, this.renderer.activeNodeList)
+    this.renderer.clearActive()
+    this.mindMap.execCommand('SET_NODE_ACTIVE', this, true)
+    this.renderer.addActiveNode(this)
+    this.mindMap.emit('node_active', this, this.renderer.activeNodeList)
+  }
+
+  //  更新节点
+  update(isLayout = false) {
+    if (!this.group) {
+      return
+    }
+    let { enableNodeTransitionMove, nodeTransitionMoveDuration, alwaysShowExpandBtn } =
+      this.mindMap.opt
+    if (alwaysShowExpandBtn) {
+      // 需要移除展开收缩按钮
+      if (this._expandBtn && this.nodeData.children.length <= 0) {
+        this.removeExpandBtn()
+      } else {
+        // 更新展开收起按钮
+        this.renderExpandBtn()
+      }
+    } else {
+      let { isActive, expand } = this.nodeData.data
+      // 展开状态且非激活状态，且当前鼠标不在它上面，才隐藏
+      if (expand && !isActive && !this._isMouseenter) {
+        this.hideExpandBtn()
+      } else {
+        this.showExpandBtn()
+      }
+    }
+    // 更新概要
+    this.renderGeneralization()
+    // 更新节点位置
+    let t = this.group.transform()
+    // 如果节点位置没有变化，则返回
+    if (this.left === t.translateX && this.top === t.translateY) return
+    if (!isLayout && enableNodeTransitionMove) {
+      this.group
+        .animate(nodeTransitionMoveDuration)
+        .translate(this.left - t.translateX, this.top - t.translateY)
+    } else {
+      this.group.translate(this.left - t.translateX, this.top - t.translateY)
+    }
+  }
+
+  // 重新渲染节点，即重新创建节点内容、计算节点大小、计算节点内容布局、更新展开收起按钮，概要及位置
+  reRender() {
+    let sizeChange = this.getSize()
+    this.layout()
+    this.update()
+    return sizeChange
+  }
+
+  // 更新节点形状样式
+  updateNodeShape() {
+    if (!this.shapeNode) return
+    const shape = this.getShape()
+    this.style[shape === CONSTANTS.SHAPE.RECTANGLE ? 'rect' : 'shape'](
+      this.shapeNode
+    )
+  }
+
+  //  递归渲染
+  render(callback = () => {}) {
+    let { enableNodeTransitionMove, nodeTransitionMoveDuration } =
+      this.mindMap.opt
+    // 节点
+    // 重新渲染连线
+    this.renderLine()
+    let isLayout = false
+    if (!this.group) {
+      isLayout = true
+      // 创建组
+      this.group = new G()
+      this.group.css({
+        cursor: 'default'
+      })
+      this.bindGroupEvent()
+      this.draw.add(this.group)
+      this.layout()
+      this.update(isLayout)
+    } else {
+      this.draw.add(this.group)
+      if (this.needLayout) {
+        this.needLayout = false
+        this.layout()
+      }
+      this.update()
+    }
+    // 子节点
+    if (
+      this.children &&
+      this.children.length &&
+      this.nodeData.data.expand !== false
+    ) {
+      let index = 0
+      asyncRun(
+        this.children.map(item => {
+          return () => {
+            item.render(() => {
+              index++
+              if (index >= this.children.length) {
+                callback()
+              }
+            })
+          }
+        })
+      )
+    } else {
+      if (enableNodeTransitionMove && !isLayout) {
+        setTimeout(() => {
+          callback()
+        }, nodeTransitionMoveDuration)
+      } else {
+        callback()
+      }
+    }
+    // 手动插入的节点立即获得焦点并且开启编辑模式
+    if (this.nodeData.inserting) {
+      delete this.nodeData.inserting
+      this.active()
+      setTimeout(() => {
+        this.mindMap.emit('node_dblclick', this)
+      }, 0)
+    }
+  }
+
+  //  递归删除，只是从画布删除，节点容器还在，后续还可以重新插回画布
+  remove() {
+    if (!this.group) return
+    this.group.remove()
+    this.removeGeneralization()
+    this.removeLine()
+    // 子节点
+    if (this.children && this.children.length) {
+      asyncRun(
+        this.children.map(item => {
+          return () => {
+            item.remove()
+          }
+        })
+      )
+    }
+  }
+
+  // 销毁节点，不但会从画布删除，而且原节点直接置空，后续无法再插回画布
+  destroy() {
+    if (!this.group) return
+    this.group.remove()
+    this.removeGeneralization()
+    this.removeLine()
+    this.group = null
+  }
+
+  //  隐藏节点
+  hide() {
+    this.group.hide()
+    this.hideGeneralization()
+    if (this.parent) {
+      let index = this.parent.children.indexOf(this)
+      this.parent._lines[index] && this.parent._lines[index].hide()
+      this._lines.forEach(item => {
+        item.hide()
+      })
+    }
+    // 子节点
+    if (this.children && this.children.length) {
+      asyncRun(
+        this.children.map(item => {
+          return () => {
+            item.hide()
+          }
+        })
+      )
+    }
+  }
+
+  //  显示节点
+  show() {
+    if (!this.group) {
+      return
+    }
+    this.group.show()
+    this.showGeneralization()
+    if (this.parent) {
+      let index = this.parent.children.indexOf(this)
+      this.parent._lines[index] && this.parent._lines[index].show()
+      this._lines.forEach(item => {
+        item.show()
+      })
+    }
+    // 子节点
+    if (this.children && this.children.length) {
+      asyncRun(
+        this.children.map(item => {
+          return () => {
+            item.show()
+          }
+        })
+      )
+    }
+  }
+
+  //  连线
+  renderLine(deep = false) {
+    if (this.nodeData.data.expand === false) {
+      return
+    }
+    let childrenLen = this.nodeData.children.length
+    // 切换为鱼骨结构时，清空根节点和二级节点的连线
+    if (
+      this.mindMap.opt.layout === CONSTANTS.LAYOUT.FISHBONE &&
+      (this.isRoot || this.layerIndex === 1)
+    ) {
+      childrenLen = 0
+    }
+    if (childrenLen > this._lines.length) {
+      // 创建缺少的线
+      new Array(childrenLen - this._lines.length).fill(0).forEach(() => {
+        this._lines.push(this.draw.path())
+      })
+    } else if (childrenLen < this._lines.length) {
+      // 删除多余的线
+      this._lines.slice(childrenLen).forEach(line => {
+        line.remove()
+      })
+      this._lines = this._lines.slice(0, childrenLen)
+    }
+    // 画线
+    this.renderer.layout.renderLine(
+      this,
+      this._lines,
+      (line, node) => {
+        // 添加样式
+        this.styleLine(line, node)
+      },
+      this.style.getStyle('lineStyle', true)
+    )
+    // 子级的连线也需要更新
+    if (deep && this.children && this.children.length > 0) {
+      this.children.forEach(item => {
+        item.renderLine(deep)
+      })
+    }
+  }
+
+  //  获取节点形状
+  getShape() {
+    // 节点使用功能横线风格的话不支持设置形状，直接使用默认的矩形
+    return this.mindMap.themeConfig.nodeUseLineStyle
+      ? CONSTANTS.SHAPE.RECTANGLE
+      : this.style.getStyle('shape', false, false)
+  }
+
+  //  检查节点是否存在自定义数据
+  hasCustomPosition() {
+    return this.customLeft !== undefined && this.customTop !== undefined
+  }
+
+  //  检查节点是否存在自定义位置的祖先节点
+  ancestorHasCustomPosition() {
+    let node = this
+    while (node) {
+      if (node.hasCustomPosition()) {
+        return true
+      }
+      node = node.parent
+    }
+    return false
+  }
+
+  //  添加子节点
+  addChildren(node) {
+    this.children.push(node)
+  }
+
+  //  设置连线样式
+  styleLine(line, node) {
+    let width =
+      node.getSelfInhertStyle('lineWidth') || node.getStyle('lineWidth', true)
+    let color =
+      node.getSelfInhertStyle('lineColor') || node.getStyle('lineColor', true)
+    let dasharray =
+      node.getSelfInhertStyle('lineDasharray') ||
+      node.getStyle('lineDasharray', true)
+    this.style.line(line, {
+      width,
+      color,
+      dasharray
+    })
+  }
+
+  //  移除连线
+  removeLine() {
+    this._lines.forEach(line => {
+      line.remove()
+    })
+    this._lines = []
+  }
+
+  //  检测当前节点是否是某个节点的祖先节点
+  isParent(node) {
+    if (this === node) {
+      return false
+    }
+    let parent = node.parent
+    while (parent) {
+      if (this === parent) {
+        return true
+      }
+      parent = parent.parent
+    }
+    return false
+  }
+
+  //  检测当前节点是否是某个节点的兄弟节点
+  isBrother(node) {
+    if (!this.parent || this === node) {
+      return false
+    }
+    return this.parent.children.find(item => {
+      return item === node
+    })
+  }
+
+  //  获取padding值
+  getPaddingVale() {
+    let { isActive }= this.nodeData.data
+    return {
+      paddingX: this.getStyle('paddingX', true, isActive),
+      paddingY: this.getStyle('paddingY', true, isActive)
+    }
+  }
+
+  //  获取某个样式
+  getStyle(prop, root, isActive) {
+    let v = this.style.merge(prop, root, isActive)
+    return v === undefined ? '' : v
+  }
+
+  //  获取自定义样式
+  getSelfStyle(prop) {
+    return this.style.getSelfStyle(prop)
+  }
+
+  //   获取最近一个存在自身自定义样式的祖先节点的自定义样式
+  getParentSelfStyle(prop) {
+    if (this.parent) {
+      return (
+        this.parent.getSelfStyle(prop) || this.parent.getParentSelfStyle(prop)
+      )
+    }
+    return null
+  }
+
+  //  获取自身可继承的自定义样式
+  getSelfInhertStyle(prop) {
+    return (
+      this.getSelfStyle(prop) || // 自身
+      this.getParentSelfStyle(prop)
+    ) // 父级
+  }
+
+  //  获取数据
+  getData(key) {
+    return key ? this.nodeData.data[key] || '' : this.nodeData.data
+  }
+
+  // 是否存在自定义样式
+  hasCustomStyle() {
+    return this.style.hasCustomStyle()
+  }
+}
+
+export default Node
--- a/simple-mind-map/src/core/render/node/Shape.js
+++ b/simple-mind-map/src/core/render/node/Shape.js
@@ -0,0 +1,229 @@
+import { Rect, Polygon, Path } from '@svgdotjs/svg.js'
+import { CONSTANTS } from '../../../constants/constant'
+
+//  节点形状类
+export default class Shape {
+  constructor(node) {
+    this.node = node
+  }
+
+  //  形状需要的padding
+  getShapePadding(width, height, paddingX, paddingY) {
+    const shape = this.node.getShape()
+    const defaultPaddingX = 15
+    const defaultPaddingY = 5
+    const actWidth = width + paddingX * 2
+    const actHeight = height + paddingY * 2
+    const actOffset = Math.abs(actWidth - actHeight)
+    switch (shape) {
+      case CONSTANTS.SHAPE.ROUNDED_RECTANGLE:
+        return {
+          paddingX: height > width ? (height - width) / 2 : 0,
+          paddingY: 0
+        }
+      case CONSTANTS.SHAPE.DIAMOND:
+        return {
+          paddingX: width / 2,
+          paddingY: height / 2
+        }
+      case CONSTANTS.SHAPE.PARALLELOGRAM:
+        return {
+          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+          paddingY: 0
+        }
+      case CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE:
+        return {
+          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+          paddingY: 0
+        }
+      case CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE:
+        return {
+          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+          paddingY: 0
+        }
+      case CONSTANTS.SHAPE.ELLIPSE:
+        return {
+          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+          paddingY: paddingY <= 0 ? defaultPaddingY : 0
+        }
+      case CONSTANTS.SHAPE.CIRCLE:
+        return {
+          paddingX: actHeight > actWidth ? actOffset / 2 : 0,
+          paddingY: actHeight < actWidth ? actOffset / 2 : 0
+        }
+      default:
+        return {
+          paddingX: 0,
+          paddingY: 0
+        }
+    }
+  }
+
+  //  创建形状节点
+  createShape() {
+    const shape = this.node.getShape()
+    let { width, height } = this.node
+    let node = null
+    // 矩形
+    if (shape === CONSTANTS.SHAPE.RECTANGLE) {
+      node = new Rect().size(width, height)
+    } else if (shape === CONSTANTS.SHAPE.DIAMOND) {
+      // 菱形
+      node = this.createDiamond()
+    } else if (shape === CONSTANTS.SHAPE.PARALLELOGRAM) {
+      // 平行四边形
+      node = this.createParallelogram()
+    } else if (shape === CONSTANTS.SHAPE.ROUNDED_RECTANGLE) {
+      // 圆角矩形
+      node = this.createRoundedRectangle()
+    } else if (shape === CONSTANTS.SHAPE.OCTAGONAL_RECTANGLE) {
+      // 八角矩形
+      node = this.createOctagonalRectangle()
+    } else if (shape === CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE) {
+      // 外三角矩形
+      node = this.createOuterTriangularRectangle()
+    } else if (shape === CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE) {
+      // 内三角矩形
+      node = this.createInnerTriangularRectangle()
+    } else if (shape === CONSTANTS.SHAPE.ELLIPSE) {
+      // 椭圆
+      node = this.createEllipse()
+    } else if (shape === CONSTANTS.SHAPE.CIRCLE) {
+      // 圆
+      node = this.createCircle()
+    }
+    return node
+  }
+
+  //  创建菱形
+  createDiamond() {
+    let { width, height } = this.node
+    let halfWidth = width / 2
+    let halfHeight = height / 2
+    let topX = halfWidth
+    let topY = 0
+    let rightX = width
+    let rightY = halfHeight
+    let bottomX = halfWidth
+    let bottomY = height
+    let leftX = 0
+    let leftY = halfHeight
+    return new Polygon().plot([
+      [topX, topY],
+      [rightX, rightY],
+      [bottomX, bottomY],
+      [leftX, leftY]
+    ])
+  }
+
+  //  创建平行四边形
+  createParallelogram() {
+    let { paddingX } = this.node.getPaddingVale()
+    paddingX = paddingX || this.node.shapePadding.paddingX
+    let { width, height } = this.node
+    return new Polygon().plot([
+      [paddingX, 0],
+      [width, 0],
+      [width - paddingX, height],
+      [0, height]
+    ])
+  }
+
+  //  创建圆角矩形
+  createRoundedRectangle() {
+    let { width, height } = this.node
+    let halfHeight = height / 2
+    return new Path().plot(`
+      M${halfHeight},0
+      L${width - halfHeight},0
+      A${height / 2},${height / 2} 0 0,1 ${width - halfHeight},${height} 
+      L${halfHeight},${height}
+      A${height / 2},${height / 2} 0 0,1 ${halfHeight},${0}
+    `)
+  }
+
+  //  创建八角矩形
+  createOctagonalRectangle() {
+    let w = 5
+    let { width, height } = this.node
+    return new Polygon().plot([
+      [0, w],
+      [w, 0],
+      [width - w, 0],
+      [width, w],
+      [width, height - w],
+      [width - w, height],
+      [w, height],
+      [0, height - w]
+    ])
+  }
+
+  //  创建外三角矩形
+  createOuterTriangularRectangle() {
+    let { paddingX } = this.node.getPaddingVale()
+    paddingX = paddingX || this.node.shapePadding.paddingX
+    let { width, height } = this.node
+    return new Polygon().plot([
+      [paddingX, 0],
+      [width - paddingX, 0],
+      [width, height / 2],
+      [width - paddingX, height],
+      [paddingX, height],
+      [0, height / 2]
+    ])
+  }
+
+  //  创建内三角矩形
+  createInnerTriangularRectangle() {
+    let { paddingX } = this.node.getPaddingVale()
+    paddingX = paddingX || this.node.shapePadding.paddingX
+    let { width, height } = this.node
+    return new Polygon().plot([
+      [0, 0],
+      [width, 0],
+      [width - paddingX / 2, height / 2],
+      [width, height],
+      [0, height],
+      [paddingX / 2, height / 2]
+    ])
+  }
+
+  //  创建椭圆
+  createEllipse() {
+    let { width, height } = this.node
+    let halfWidth = width / 2
+    let halfHeight = height / 2
+    return new Path().plot(`
+      M${halfWidth},0
+      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
+      M${halfWidth},${height} 
+      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
+    `)
+  }
+
+  //  创建圆
+  createCircle() {
+    let { width, height } = this.node
+    let halfWidth = width / 2
+    let halfHeight = height / 2
+    return new Path().plot(`
+      M${halfWidth},0
+      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
+      M${halfWidth},${height} 
+      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
+    `)
+  }
+}
+
+// 形状列表
+export const shapeList = [
+  CONSTANTS.SHAPE.RECTANGLE,
+  CONSTANTS.SHAPE.DIAMOND,
+  CONSTANTS.SHAPE.PARALLELOGRAM,
+  CONSTANTS.SHAPE.ROUNDED_RECTANGLE,
+  CONSTANTS.SHAPE.OCTAGONAL_RECTANGLE,
+  CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE,
+  CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE,
+  CONSTANTS.SHAPE.ELLIPSE,
+  CONSTANTS.SHAPE.CIRCLE
+]
--- a/simple-mind-map/src/core/render/node/Style.js
+++ b/simple-mind-map/src/core/render/node/Style.js
@@ -0,0 +1,227 @@
+import { tagColorList, nodeDataNoStylePropList } from '../../../constants/constant'
+const rootProp = ['paddingX', 'paddingY']
+const backgroundStyleProps = ['backgroundColor', 'backgroundImage', 'backgroundRepeat', 'backgroundPosition', 'backgroundSize']
+
+//  样式类
+class Style {
+  //   设置背景样式
+  static setBackgroundStyle(el, themeConfig) {
+    // 缓存容器元素原本的样式
+    if (!Style.cacheStyle) {
+      Style.cacheStyle = {}
+      let style = window.getComputedStyle(el)
+      backgroundStyleProps.forEach((prop) => {
+        Style.cacheStyle[prop] = style[prop]
+      })
+    }
+    // 设置新样式
+    let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig
+    el.style.backgroundColor = backgroundColor
+    if (backgroundImage) {
+      el.style.backgroundImage = `url(${backgroundImage})`
+      el.style.backgroundRepeat = backgroundRepeat
+      el.style.backgroundPosition = backgroundPosition
+      el.style.backgroundSize = backgroundSize
+    } else {
+      el.style.backgroundImage = 'none'
+    }
+  }
+
+  // 移除背景样式
+  static removeBackgroundStyle(el) {
+    if (!Style.cacheStyle) return
+    backgroundStyleProps.forEach((prop) => {
+      el.style[prop] = Style.cacheStyle[prop]
+    })
+    Style.cacheStyle = null
+  }
+
+  //  构造函数
+  constructor(ctx) {
+    this.ctx = ctx
+  }
+
+  //  合并样式
+  merge(prop, root, isActive) {
+    let themeConfig = this.ctx.mindMap.themeConfig
+    // 三级及以下节点
+    let defaultConfig = themeConfig.node
+    if (root || rootProp.includes(prop)) {
+      // 直接使用最外层样式
+      defaultConfig = themeConfig
+    } else if (this.ctx.isGeneralization) {
+      // 概要节点
+      defaultConfig = themeConfig.generalization
+    } else if (this.ctx.layerIndex === 0) {
+      // 根节点
+      defaultConfig = themeConfig.root
+    } else if (this.ctx.layerIndex === 1) {
+      // 二级节点
+      defaultConfig = themeConfig.second
+    }
+    // 激活状态
+    if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
+      if (
+        this.ctx.nodeData.data.activeStyle &&
+        this.ctx.nodeData.data.activeStyle[prop] !== undefined
+      ) {
+        return this.ctx.nodeData.data.activeStyle[prop]
+      } else if (defaultConfig.active && defaultConfig.active[prop]) {
+        return defaultConfig.active[prop]
+      }
+    }
+    // 优先使用节点本身的样式
+    return this.getSelfStyle(prop) !== undefined
+      ? this.getSelfStyle(prop)
+      : defaultConfig[prop]
+  }
+
+  //  获取某个样式值
+  getStyle(prop, root, isActive) {
+    return this.merge(prop, root, isActive)
+  }
+
+  //  获取自身自定义样式
+  getSelfStyle(prop) {
+    return this.ctx.nodeData.data[prop]
+  }
+
+  //  矩形
+  rect(node) {
+    this.shape(node)
+    node.radius(this.merge('borderRadius'))
+  }
+
+  //   矩形外的其他形状
+  shape(node) {
+    node.fill({
+      color: this.merge('fillColor')
+    })
+    // 节点使用横线样式，不需要渲染非激活状态的边框样式
+    // if (
+    //   !this.ctx.isRoot &&
+    //   !this.ctx.isGeneralization &&
+    //   this.ctx.mindMap.themeConfig.nodeUseLineStyle &&
+    //   !this.ctx.nodeData.data.isActive
+    // ) {
+    //   return
+    // }
+    node.stroke({
+      color: this.merge('borderColor'),
+      width: this.merge('borderWidth'),
+      dasharray: this.merge('borderDasharray')
+    })
+  }
+
+  //  文字
+  text(node) {
+    node
+      .fill({
+        color: this.merge('color')
+      })
+      .css({
+        'font-family': this.merge('fontFamily'),
+        'font-size': this.merge('fontSize'),
+        'font-weight': this.merge('fontWeight'),
+        'font-style': this.merge('fontStyle'),
+        'text-decoration': this.merge('textDecoration')
+      })
+  }
+
+  // 生成内联样式
+  createStyleText() {
+    return `
+      color: ${this.merge('color')};
+      font-family: ${this.merge('fontFamily')};
+      font-size: ${this.merge('fontSize') + 'px'};
+      font-weight: ${this.merge('fontWeight')};
+      font-style: ${this.merge('fontStyle')};
+      text-decoration: ${this.merge('textDecoration')}
+    `
+  }
+
+  // 获取文本样式
+  getTextFontStyle() {
+    return { 
+      italic: this.merge('fontStyle') === 'italic', 
+      bold: this.merge('fontWeight'), 
+      fontSize: this.merge('fontSize'), 
+      fontFamily: this.merge('fontFamily')
+    }
+  }
+
+  //  html文字节点
+  domText(node, fontSizeScale = 1, isMultiLine) {
+    node.style.fontFamily = this.merge('fontFamily')
+    node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
+    node.style.fontWeight = this.merge('fontWeight') || 'normal'
+    node.style.lineHeight = !isMultiLine ? 'normal' : this.merge('lineHeight')
+    node.style.fontStyle = this.merge('fontStyle')
+  }
+
+  //  标签文字
+  tagText(node, index) {
+    node
+      .fill({
+        color: tagColorList[index].color
+      })
+      .css({
+        'font-size': '12px'
+      })
+  }
+
+  //  标签矩形
+  tagRect(node, index) {
+    node.fill({
+      color: tagColorList[index].background
+    })
+  }
+
+  //  内置图标
+  iconNode(node) {
+    node.attr({
+      fill: this.merge('color')
+    })
+  }
+
+  //  连线
+  line(node, { width, color, dasharray } = {}) {
+    node.stroke({ width, color, dasharray }).fill({ color: 'none' })
+  }
+
+  //  概要连线
+  generalizationLine(node) {
+    node
+      .stroke({
+        width: this.merge('generalizationLineWidth', true),
+        color: this.merge('generalizationLineColor', true)
+      })
+      .fill({ color: 'none' })
+  }
+
+  //  展开收起按钮
+  iconBtn(node, node2, fillNode) {
+    let { color, fill } = this.ctx.mindMap.opt.expandBtnStyle || {
+      color: '#808080',
+      fill: '#fff'
+    }
+    node.fill({ color: color })
+    node2.fill({ color: color })
+    fillNode.fill({ color: fill })
+  }
+
+  // 是否设置了自定义的样式
+  hasCustomStyle() {
+    let res = false
+    Object.keys(this.ctx.nodeData.data).forEach((item) => {
+      if (!nodeDataNoStylePropList.includes(item)) {
+        res = true
+      }
+    })
+    return res
+  }
+}
+
+Style.cacheStyle = null
+
+export default Style
--- a/simple-mind-map/src/core/render/node/nodeCommandWraps.js
+++ b/simple-mind-map/src/core/render/node/nodeCommandWraps.js
@@ -0,0 +1,56 @@
+//  设置数据
+function setData(data = {}) {
+  this.mindMap.execCommand('SET_NODE_DATA', this, data)
+}
+
+//  设置文本
+function setText(text, richText) {
+  this.mindMap.execCommand('SET_NODE_TEXT', this, text, richText)
+}
+
+//  设置图片
+function setImage(imgData) {
+  this.mindMap.execCommand('SET_NODE_IMAGE', this, imgData)
+}
+
+//  设置图标
+function setIcon(icons) {
+  this.mindMap.execCommand('SET_NODE_ICON', this, icons)
+}
+
+//  设置超链接
+function setHyperlink(link, title) {
+  this.mindMap.execCommand('SET_NODE_HYPERLINK', this, link, title)
+}
+
+//  设置备注
+function setNote(note) {
+  this.mindMap.execCommand('SET_NODE_NOTE', this, note)
+}
+
+//  设置标签
+function setTag(tag) {
+  this.mindMap.execCommand('SET_NODE_TAG', this, tag)
+}
+
+//  设置形状
+function setShape(shape) {
+  this.mindMap.execCommand('SET_NODE_SHAPE', this, shape)
+}
+
+//  修改某个样式
+function setStyle(prop, value, isActive) {
+  this.mindMap.execCommand('SET_NODE_STYLE', this, prop, value, isActive)
+}
+
+export default {
+  setData,
+  setText,
+  setImage,
+  setIcon,
+  setHyperlink,
+  setNote,
+  setTag,
+  setShape,
+  setStyle
+}
--- a/simple-mind-map/src/core/render/node/nodeCreateContents.js
+++ b/simple-mind-map/src/core/render/node/nodeCreateContents.js
@@ -0,0 +1,292 @@
+import { measureText, resizeImgSize, getTextFromHtml } from '../../../utils'
+import { Image, SVG, A, G, Rect, Text, ForeignObject } from '@svgdotjs/svg.js'
+import iconsSvg from '../../../svg/icons'
+import { CONSTANTS } from '../../../constants/constant'
+
+//  创建图片节点
+function createImgNode() {
+  let img = this.nodeData.data.image
+  if (!img) {
+    return
+  }
+  let imgSize = this.getImgShowSize()
+  let node = new Image().load(img).size(...imgSize)
+  if (this.nodeData.data.imageTitle) {
+    node.attr('title', this.nodeData.data.imageTitle)
+  }
+  node.on('dblclick', e => {
+    this.mindMap.emit('node_img_dblclick', this, e)
+  })
+  return {
+    node,
+    width: imgSize[0],
+    height: imgSize[1]
+  }
+}
+
+//  获取图片显示宽高
+function getImgShowSize() {
+  return resizeImgSize(
+    this.nodeData.data.imageSize.width,
+    this.nodeData.data.imageSize.height,
+    this.mindMap.themeConfig.imgMaxWidth,
+    this.mindMap.themeConfig.imgMaxHeight
+  )
+}
+
+//  创建icon节点
+function createIconNode() {
+  let _data = this.nodeData.data
+  if (!_data.icon || _data.icon.length <= 0) {
+    return []
+  }
+  let iconSize = this.mindMap.themeConfig.iconSize
+  return _data.icon.map(item => {
+    let src = iconsSvg.getNodeIconListIcon(item, this.mindMap.opt.iconList || [])
+    let node = null
+    // svg图标
+    if (/^<svg/.test(src)) {
+      node = SVG(src)
+    } else {
+      // 图片图标
+      node = new Image().load(src)
+    }
+    node.size(iconSize, iconSize)
+    return {
+      node,
+      width: iconSize,
+      height: iconSize
+    }
+  })
+}
+
+// 创建富文本节点
+function createRichTextNode() {
+  let g = new G()
+  // 重新设置富文本节点内容
+  let recoverText = false
+  if (this.nodeData.data.resetRichText) {
+    delete this.nodeData.data.resetRichText
+    recoverText = true
+  }
+  if ([CONSTANTS.CHANGE_THEME].includes(this.mindMap.renderer.renderSource)) {
+    // 如果自定义过样式则不允许覆盖
+    if (!this.hasCustomStyle()) {
+      recoverText = true
+    }
+  }
+  if (recoverText) {
+    let text = getTextFromHtml(this.nodeData.data.text)
+    this.nodeData.data.text = `<p><span style="${this.style.createStyleText()}">${text}</span></p>`
+  }
+  let html = `<div>${this.nodeData.data.text}</div>`
+  let div = document.createElement('div')
+  div.innerHTML = html
+  div.style.cssText = `position: fixed; left: -999999px;`
+  let el = div.children[0]
+  el.classList.add('smm-richtext-node-wrap')
+  el.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
+  el.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
+  this.mindMap.el.appendChild(div)
+  let { width, height } = el.getBoundingClientRect()
+  width = Math.ceil(width)
+  height = Math.ceil(height)
+  g.attr('data-width', width)
+  g.attr('data-height', height)
+  html = div.innerHTML
+  this.mindMap.el.removeChild(div)
+  let foreignObject = new ForeignObject()
+  foreignObject.width(width)
+  foreignObject.height(height)
+  foreignObject.add(SVG(html))
+  g.add(foreignObject)
+  return {
+    node: g,
+    width,
+    height
+  }
+}
+
+//  创建文本节点
+function createTextNode() {
+  if (this.nodeData.data.richText) {
+    return this.createRichTextNode()
+  }
+  let g = new G()
+  let fontSize = this.getStyle('fontSize', false, this.nodeData.data.isActive)
+  let lineHeight = this.getStyle(
+    'lineHeight',
+    false,
+    this.nodeData.data.isActive
+  )
+  // 文本超长自动换行
+  let textStyle = this.style.getTextFontStyle()
+  let textArr = this.nodeData.data.text.split(/\n/gim)
+  let maxWidth = this.mindMap.opt.textAutoWrapWidth
+  let isMultiLine = false
+  textArr.forEach((item, index) => {
+    let arr = item.split('')
+    let lines = []
+    let line = []
+    while (arr.length) {
+      let str = arr.shift()
+      let text = [...line, str].join('')
+      if (measureText(text, textStyle).width <= maxWidth) {
+        line.push(str)
+      } else {
+        lines.push(line.join(''))
+        line = [str]
+      }
+    }
+    if (line.length > 0) {
+      lines.push(line.join(''))
+    }
+    if (lines.length > 1) {
+      isMultiLine = true
+    }
+    textArr[index] = lines.join('\n')
+  })
+  textArr = textArr.join('\n').split(/\n/gim)
+  textArr.forEach((item, index) => {
+    let node = new Text().text(item)
+    this.style.text(node)
+    node.y(fontSize * lineHeight * index)
+    g.add(node)
+  })
+  let { width, height } = g.bbox()
+  width = Math.ceil(width)
+  height = Math.ceil(height)
+  g.attr('data-width', width)
+  g.attr('data-height', height)
+  g.attr('data-ismultiLine', isMultiLine || textArr.length > 1)
+  return {
+    node: g,
+    width,
+    height
+  }
+}
+
+//  创建超链接节点
+function createHyperlinkNode() {
+  let { hyperlink, hyperlinkTitle } = this.nodeData.data
+  if (!hyperlink) {
+    return
+  }
+  let iconSize = this.mindMap.themeConfig.iconSize
+  let node = new SVG()
+  // 超链接节点
+  let a = new A().to(hyperlink).target('_blank')
+  a.node.addEventListener('click', e => {
+    e.stopPropagation()
+  })
+  if (hyperlinkTitle) {
+    a.attr('title', hyperlinkTitle)
+  }
+  // 添加一个透明的层，作为鼠标区域
+  a.rect(iconSize, iconSize).fill({ color: 'transparent' })
+  // 超链接图标
+  let iconNode = SVG(iconsSvg.hyperlink).size(iconSize, iconSize)
+  this.style.iconNode(iconNode)
+  a.add(iconNode)
+  node.add(a)
+  return {
+    node,
+    width: iconSize,
+    height: iconSize
+  }
+}
+
+//  创建标签节点
+function createTagNode() {
+  let tagData = this.nodeData.data.tag
+  if (!tagData || tagData.length <= 0) {
+    return []
+  }
+  let nodes = []
+  tagData.slice(0, this.mindMap.opt.maxTag).forEach((item, index) => {
+    let tag = new G()
+    // 标签文本
+    let text = new Text().text(item).x(8).cy(10)
+    this.style.tagText(text, index)
+    let { width } = text.bbox()
+    // 标签矩形
+    let rect = new Rect().size(width + 16, 20)
+    this.style.tagRect(rect, index)
+    tag.add(rect).add(text)
+    nodes.push({
+      node: tag,
+      width: width + 16,
+      height: 20
+    })
+  })
+  return nodes
+}
+
+//  创建备注节点
+function createNoteNode() {
+  if (!this.nodeData.data.note) {
+    return null
+  }
+  let iconSize = this.mindMap.themeConfig.iconSize
+  let node = new SVG().attr('cursor', 'pointer')
+  // 透明的层，用来作为鼠标区域
+  node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
+  // 备注图标
+  let iconNode = SVG(iconsSvg.note).size(iconSize, iconSize)
+  this.style.iconNode(iconNode)
+  node.add(iconNode)
+  // 备注tooltip
+  if (!this.mindMap.opt.customNoteContentShow) {
+    if (!this.noteEl) {
+      this.noteEl = document.createElement('div')
+      this.noteEl.style.cssText = `
+          position: absolute;
+          padding: 10px;
+          border-radius: 5px;
+          box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
+          display: none;
+          background-color: #fff;
+          z-index: ${ this.mindMap.opt.nodeNoteTooltipZIndex }
+      `
+      document.body.appendChild(this.noteEl)
+    }
+    this.noteEl.innerText = this.nodeData.data.note
+  }
+  node.on('mouseover', () => {
+    let { left, top } = node.node.getBoundingClientRect()
+    if (!this.mindMap.opt.customNoteContentShow) {
+      this.noteEl.style.left = left + 'px'
+      this.noteEl.style.top = top + iconSize + 'px'
+      this.noteEl.style.display = 'block'
+    } else {
+      this.mindMap.opt.customNoteContentShow.show(
+        this.nodeData.data.note,
+        left,
+        top + iconSize
+      )
+    }
+  })
+  node.on('mouseout', () => {
+    if (!this.mindMap.opt.customNoteContentShow) {
+      this.noteEl.style.display = 'none'
+    } else {
+      this.mindMap.opt.customNoteContentShow.hide()
+    }
+  })
+  return {
+    node,
+    width: iconSize,
+    height: iconSize
+  }
+}
+
+export default {
+    createImgNode,
+    getImgShowSize,
+    createIconNode,
+    createRichTextNode,
+    createTextNode,
+    createHyperlinkNode,
+    createTagNode,
+    createNoteNode
+}
--- a/simple-mind-map/src/core/render/node/nodeExpandBtn.js
+++ b/simple-mind-map/src/core/render/node/nodeExpandBtn.js
@@ -0,0 +1,142 @@
+import btnsSvg from '../../../svg/btns'
+import { SVG, Circle, G } from '@svgdotjs/svg.js'
+
+// 创建展开收起按钮的内容节点
+function createExpandNodeContent() {
+  if (this._openExpandNode) {
+    return
+  }
+  let { open, close } = this.mindMap.opt.expandBtnIcon || {}
+  // 展开的节点
+  this._openExpandNode = SVG(open || btnsSvg.open).size(
+    this.expandBtnSize,
+    this.expandBtnSize
+  )
+  this._openExpandNode.x(0).y(-this.expandBtnSize / 2)
+  // 收起的节点
+  this._closeExpandNode = SVG(close || btnsSvg.close).size(
+    this.expandBtnSize,
+    this.expandBtnSize
+  )
+  this._closeExpandNode.x(0).y(-this.expandBtnSize / 2)
+  // 填充节点
+  this._fillExpandNode = new Circle().size(this.expandBtnSize)
+  this._fillExpandNode.x(0).y(-this.expandBtnSize / 2)
+  // 设置样式
+  this.style.iconBtn(
+    this._openExpandNode,
+    this._closeExpandNode,
+    this._fillExpandNode
+  )
+}
+
+//  创建或更新展开收缩按钮内容
+function updateExpandBtnNode() {
+  let { expand } = this.nodeData.data
+  // 如果本次和上次的展开状态一样则返回
+  if (expand === this._lastExpandBtnType) return
+  if (this._expandBtn) {
+    this._expandBtn.clear()
+  }
+  this.createExpandNodeContent()
+  let node
+  if (expand === false) {
+    node = this._openExpandNode
+    this._lastExpandBtnType = false
+  } else {
+    node = this._closeExpandNode
+    this._lastExpandBtnType = true
+  }
+  if (this._expandBtn) this._expandBtn.add(this._fillExpandNode).add(node)
+}
+
+//  更新展开收缩按钮位置
+function updateExpandBtnPos() {
+  if (!this._expandBtn) {
+    return
+  }
+  this.renderer.layout.renderExpandBtn(this, this._expandBtn)
+}
+
+//  创建展开收缩按钮
+function renderExpandBtn() {
+  if (
+    !this.nodeData.children ||
+    this.nodeData.children.length <= 0 ||
+    this.isRoot
+  ) {
+    return
+  }
+  if (this._expandBtn) {
+    this.group.add(this._expandBtn)
+  } else {
+    this._expandBtn = new G()
+    this._expandBtn.on('mouseover', e => {
+      e.stopPropagation()
+      this._expandBtn.css({
+        cursor: 'pointer'
+      })
+    })
+    this._expandBtn.on('mouseout', e => {
+      e.stopPropagation()
+      this._expandBtn.css({
+        cursor: 'auto'
+      })
+    })
+    this._expandBtn.on('click', e => {
+      e.stopPropagation()
+      // 展开收缩
+      this.mindMap.execCommand(
+        'SET_NODE_EXPAND',
+        this,
+        !this.nodeData.data.expand
+      )
+      this.mindMap.emit('expand_btn_click', this)
+    })
+    this._expandBtn.on('dblclick', e => {
+      e.stopPropagation()
+    })
+    this.group.add(this._expandBtn)
+  }
+  this._showExpandBtn = true
+  this.updateExpandBtnNode()
+  this.updateExpandBtnPos()
+}
+
+//  移除展开收缩按钮
+function removeExpandBtn() {
+  if (this._expandBtn && this._showExpandBtn) {
+    this._expandBtn.remove()
+    this._showExpandBtn = false
+  }
+}
+
+// 显示展开收起按钮
+function showExpandBtn() {
+  if (this.mindMap.opt.alwaysShowExpandBtn) return
+  setTimeout(() => {
+    this.renderExpandBtn()
+  }, 0)
+}
+
+// 隐藏展开收起按钮
+function hideExpandBtn() {
+  if (this.mindMap.opt.alwaysShowExpandBtn || this._isMouseenter) return
+  // 非激活状态且展开状态鼠标移出才隐藏按钮
+  let { isActive, expand } = this.nodeData.data
+  if (!isActive && expand) {
+    setTimeout(() => {
+      this.removeExpandBtn()
+    }, 0)
+  }
+}
+
+export default {
+  createExpandNodeContent,
+  updateExpandBtnNode,
+  updateExpandBtnPos,
+  renderExpandBtn,
+  removeExpandBtn,
+  showExpandBtn,
+  hideExpandBtn
+}
--- a/simple-mind-map/src/core/render/node/nodeGeneralization.js
+++ b/simple-mind-map/src/core/render/node/nodeGeneralization.js
@@ -0,0 +1,115 @@
+import Node from './Node'
+
+//  检查是否存在概要
+function checkHasGeneralization () {
+  return !!this.nodeData.data.generalization
+}
+
+//  创建概要节点
+function createGeneralizationNode () {
+  if (this.isGeneralization || !this.checkHasGeneralization()) {
+    return
+  }
+  if (!this._generalizationLine) {
+    this._generalizationLine = this.draw.path()
+  }
+  if (!this._generalizationNode) {
+    this._generalizationNode = new Node({
+      data: {
+        data: this.nodeData.data.generalization
+      },
+      uid: this.mindMap.uid++,
+      renderer: this.renderer,
+      mindMap: this.mindMap,
+      draw: this.draw,
+      isGeneralization: true
+    })
+    this._generalizationNodeWidth = this._generalizationNode.width
+    this._generalizationNodeHeight = this._generalizationNode.height
+    this._generalizationNode.generalizationBelongNode = this
+    if (this.nodeData.data.generalization.isActive) {
+      this.renderer.addActiveNode(this._generalizationNode)
+    }
+  }
+}
+
+//  更新概要节点
+function updateGeneralization () {
+  this.removeGeneralization()
+  this.createGeneralizationNode()
+}
+
+//  渲染概要节点
+function renderGeneralization () {
+  if (this.isGeneralization) {
+    return
+  }
+  if (!this.checkHasGeneralization()) {
+    this.removeGeneralization()
+    this._generalizationNodeWidth = 0
+    this._generalizationNodeHeight = 0
+    return
+  }
+  if (this.nodeData.data.expand === false) {
+    this.removeGeneralization()
+    return
+  }
+  this.createGeneralizationNode()
+  this.renderer.layout.renderGeneralization(
+    this,
+    this._generalizationLine,
+    this._generalizationNode
+  )
+  this.style.generalizationLine(this._generalizationLine)
+  this._generalizationNode.render()
+}
+
+//  删除概要节点
+function removeGeneralization () {
+  if (this._generalizationLine) {
+    this._generalizationLine.remove()
+    this._generalizationLine = null
+  }
+  if (this._generalizationNode) {
+    // 删除概要节点时要同步从激活节点里删除
+    this.renderer.removeActiveNode(this._generalizationNode)
+    this._generalizationNode.remove()
+    this._generalizationNode = null
+  }
+  // hack修复当激活一个节点时创建概要，然后立即激活创建的概要节点后会重复创建概要节点并且无法删除的问题
+  if (this.generalizationBelongNode) {
+    this.draw
+      .find('.generalization_' + this.generalizationBelongNode.uid)
+      .remove()
+  }
+}
+
+//  隐藏概要节点
+function hideGeneralization () {
+  if (this._generalizationLine) {
+    this._generalizationLine.hide()
+  }
+  if (this._generalizationNode) {
+    this._generalizationNode.hide()
+  }
+}
+
+//  显示概要节点
+function showGeneralization () {
+  if (this._generalizationLine) {
+    this._generalizationLine.show()
+  }
+  if (this._generalizationNode) {
+    this._generalizationNode.show()
+  }
+}
+
+export default {
+    checkHasGeneralization,
+    createGeneralizationNode,
+    updateGeneralization,
+    renderGeneralization,
+    removeGeneralization,
+    hideGeneralization,
+    showGeneralization
+}
--- a/simple-mind-map/src/core/view/View.js
+++ b/simple-mind-map/src/core/view/View.js
@@ -0,0 +1,268 @@
+import { CONSTANTS } from '../../constants/constant'
+
+//  视图操作类
+class View {
+  //  构造函数
+  constructor(opt = {}) {
+    this.opt = opt
+    this.mindMap = this.opt.mindMap
+    this.scale = 1
+    this.sx = 0
+    this.sy = 0
+    this.x = 0
+    this.y = 0
+    this.firstDrag = true
+    this.setTransformData(this.mindMap.opt.viewData)
+    this.bind()
+  }
+
+  //  绑定
+  bind() {
+    // 快捷键
+    this.mindMap.keyCommand.addShortcut('Control+=', () => {
+      this.enlarge()
+    })
+    this.mindMap.keyCommand.addShortcut('Control+-', () => {
+      this.narrow()
+    })
+    this.mindMap.keyCommand.addShortcut('Control+Enter', () => {
+      this.reset()
+    })
+    this.mindMap.keyCommand.addShortcut('Control+i', () => {
+      this.fit()
+    })
+    this.mindMap.svg.on('dblclick', () => {
+      this.reset()
+    })
+    // 拖动视图
+    this.mindMap.event.on('mousedown', () => {
+      this.sx = this.x
+      this.sy = this.y
+    })
+    this.mindMap.event.on('drag', (e, event) => {
+      if (e.ctrlKey) {
+        // 按住ctrl键拖动为多选
+        return
+      }
+      if (this.firstDrag) {
+        this.firstDrag = false
+        // 清除激活节点
+        if (this.mindMap.renderer.activeNodeList.length > 0) {
+          this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+        }
+      }
+      this.x = this.sx + event.mousemoveOffset.x
+      this.y = this.sy + event.mousemoveOffset.y
+      this.transform()
+    })
+    this.mindMap.event.on('mouseup', () => {
+      this.firstDrag = true
+    })
+    // 放大缩小视图
+    this.mindMap.event.on('mousewheel', (e, dir, event, isTouchPad) => {
+      if (
+        this.mindMap.opt.customHandleMousewheel &&
+        typeof this.mindMap.opt.customHandleMousewheel === 'function'
+      ) {
+        return this.mindMap.opt.customHandleMousewheel(e)
+      }
+      if (
+        this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM
+      ) {
+        switch (dir) {
+          // 鼠标滚轮，向上和向左，都是缩小
+          case CONSTANTS.DIR.UP:
+          case CONSTANTS.DIR.LEFT:
+            this.narrow()
+            break
+          // 鼠标滚轮，向下和向右，都是放大
+          case CONSTANTS.DIR.DOWN:
+          case CONSTANTS.DIR.RIGHT:
+            this.enlarge()
+            break
+        }
+      } else {
+        let step = this.mindMap.opt.mousewheelMoveStep
+        if (isTouchPad) {
+          step = 5
+        }
+        switch (dir) {
+          // 上移
+          case CONSTANTS.DIR.DOWN:
+            this.translateY(-step)
+            break
+          // 下移
+          case CONSTANTS.DIR.UP:
+            this.translateY(step)
+            break
+          // 右移
+          case CONSTANTS.DIR.LEFT:
+            this.translateX(-step)
+            break
+          // 左移
+          case CONSTANTS.DIR.RIGHT:
+            this.translateX(step)
+            break
+        }
+      }
+    })
+  }
+
+  //  获取当前变换状态数据
+  getTransformData() {
+    return {
+      transform: this.mindMap.draw.transform(),
+      state: {
+        scale: this.scale,
+        x: this.x,
+        y: this.y,
+        sx: this.sx,
+        sy: this.sy
+      }
+    }
+  }
+
+  //  动态设置变换状态数据
+  setTransformData(viewData) {
+    if (viewData) {
+      Object.keys(viewData.state).forEach(prop => {
+        this[prop] = viewData.state[prop]
+      })
+      this.mindMap.draw.transform({
+        ...viewData.transform
+      })
+      this.mindMap.emit('view_data_change', this.getTransformData())
+      this.mindMap.emit('scale', this.scale)
+    }
+  }
+
+  //  平移x,y方向
+  translateXY(x, y) {
+    this.x += x
+    this.y += y
+    this.transform()
+  }
+
+  //  平移x方向
+  translateX(step) {
+    this.x += step
+    this.transform()
+  }
+
+  //  平移x方式到
+  translateXTo(x) {
+    this.x = x
+    this.transform()
+  }
+
+  //  平移y方向
+  translateY(step) {
+    this.y += step
+    this.transform()
+  }
+
+  //  平移y方向到
+  translateYTo(y) {
+    this.y = y
+    this.transform()
+  }
+
+  //   应用变换
+  transform() {
+    this.mindMap.draw.transform({
+      scale: this.scale,
+      // origin: 'center center',
+      translate: [this.x, this.y]
+    })
+    this.mindMap.emit('view_data_change', this.getTransformData())
+  }
+
+  //  恢复
+  reset() {
+    let scaleChange = this.scale !== 1
+    this.scale = 1
+    this.x = 0
+    this.y = 0
+    this.transform()
+    if (scaleChange) {
+      this.mindMap.emit('scale', this.scale)
+    }
+  }
+
+  //  缩小
+  narrow() {
+    if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
+      this.scale -= this.mindMap.opt.scaleRatio
+    } else {
+      this.scale = 0.1
+    }
+    this.transform()
+    this.mindMap.emit('scale', this.scale)
+  }
+
+  //  放大
+  enlarge() {
+    this.scale += this.mindMap.opt.scaleRatio
+    this.transform()
+    this.mindMap.emit('scale', this.scale)
+  }
+
+  //  设置缩放
+  setScale(scale) {
+    this.scale = scale
+    this.transform()
+    this.mindMap.emit('scale', this.scale)
+  }
+
+  // 适应画布大小
+  fit() {
+    let { fitPadding } = this.mindMap.opt
+    let draw = this.mindMap.draw
+    let origTransform = draw.transform()
+    let rect = draw.rbox()
+    let drawWidth = rect.width / origTransform.scaleX
+    let drawHeight = rect.height / origTransform.scaleY
+    let drawRatio = drawWidth / drawHeight
+    let { width: elWidth, height: elHeight } =
+      this.mindMap.el.getBoundingClientRect()
+    elWidth = elWidth - fitPadding * 2
+    elHeight = elHeight - fitPadding * 2
+    let elRatio = elWidth / elHeight
+    let newScale = 0
+    let flag = ''
+    if (drawWidth <= elWidth && drawHeight <= elHeight) {
+      newScale = 1
+      flag = 1
+    } else {
+      let newWidth = 0
+      let newHeight = 0
+      if (drawRatio > elRatio) {
+        newWidth = elWidth
+        newHeight = elWidth / drawRatio
+        flag = 2
+      } else {
+        newHeight = elHeight
+        newWidth = elHeight * drawRatio
+        flag = 3
+      }
+      newScale = newWidth / drawWidth
+    }
+    this.setScale(newScale)
+    let newRect = draw.rbox()
+    let newX = 0
+    let newY = 0
+    if (flag === 1) {
+      newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2
+      newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2
+    } else if (flag === 2) {
+      newX = -newRect.x + fitPadding
+      newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2
+    } else if (flag === 3) {
+      newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2
+      newY = -newRect.y + fitPadding
+    }
+    this.translateXY(newX, newY)
+  }
+}
+
+export default View
--- a/simple-mind-map/src/layouts/Base.js
+++ b/simple-mind-map/src/layouts/Base.js
@@ -1,161 +1,298 @@
-import Node from '../Node'
+import Node from '../core/render/node/Node'
+import { CONSTANTS, initRootNodePositionMap } from '../constants/constant'
+import Lru from '../utils/Lru'

-/** 
- * @Author: 王林 
- * @Date: 2021-04-12 22:24:30 
- * @Desc: 布局基类 
- */
+//  布局基类
 class Base {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:25:16 
-     * @Desc: 构造函数 
-     */
-    constructor(renderer) {
-        // 渲染实例
-        this.renderer = renderer
-        // 控制实例
-        this.mindMap = renderer.mindMap
-        // 绘图对象
-        this.draw = this.mindMap.draw
-        // 根节点
-        this.root = null
-    }
+  //  构造函数
+  constructor(renderer) {
+    // 渲染实例
+    this.renderer = renderer
+    // 控制实例
+    this.mindMap = renderer.mindMap
+    // 绘图对象
+    this.draw = this.mindMap.draw
+    // 根节点
+    this.root = null
+    this.lru = new Lru(this.mindMap.opt.maxNodeCacheCount)
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:39:50 
-     * @Desc: 计算节点位置 
-     */
-    doLayout() {
-        throw new Error('【computed】方法为必要方法，需要子类进行重写！')
-    }
+  //  计算节点位置
+  doLayout() {
+    throw new Error('【computed】方法为必要方法，需要子类进行重写！')
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:41:04 
-     * @Desc: 连线 
-     */
-    renderLine() {
-        throw new Error('【renderLine】方法为必要方法，需要子类进行重写！')
-    }
+  //  连线
+  renderLine() {
+    throw new Error('【renderLine】方法为必要方法，需要子类进行重写！')
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:42:08 
-     * @Desc: 定位展开收缩按钮 
-     */
-    renderExpandBtn() {
-        throw new Error('【renderExpandBtn】方法为必要方法，需要子类进行重写！')
-    }
+  //  定位展开收缩按钮
+  renderExpandBtn() {
+    throw new Error('【renderExpandBtn】方法为必要方法，需要子类进行重写！')
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-10 21:30:54 
-     * @Desc: 创建节点实例 
-     */
-    createNode(data, parent, isRoot, layerIndex) {
-        // 创建节点
-        let newNode = null
-        // 复用节点
-        if (data && data._node && !this.renderer.reRender) {
-            newNode = data._node
-            newNode.reset()
-            newNode.layerIndex = layerIndex
-        } else {// 创建新节点
-            newNode = new Node({
-                data,
-                uid: this.mindMap.uid++,
-                renderer: this.renderer,
-                mindMap: this.mindMap,
-                draw: this.draw,
-                layerIndex
-            })
-            newNode.getSize()
-            // 数据关联实际节点
-            data._node = newNode
-            if (data.data.isActive) {
-                this.renderer.addActiveNode(newNode)
-            }
-        }
-        // 根节点
-        if (isRoot) {
-            newNode.isRoot = true
-            this.root = newNode
-        } else {
-            // 互相收集
-            newNode.parent = parent._node
-            parent._node.addChildren(newNode)
-        }
-        return newNode;
-    }
+  //  概要节点
+  renderGeneralization() {}

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-16 13:48:43 
-     * @Desc: 定位节点到画布中间 
-     */
-    setNodeCenter(node) {
-        node.left = (this.mindMap.width - node.width) / 2
-        node.top = (this.mindMap.height - node.height) / 2
-    }
+  // 通过uid缓存节点
+  cacheNode(uid, node) {
+    // 记录本次渲染时的节点
+    this.renderer.nodeCache[uid] = node
+    // 记录所有渲染时的节点
+    this.lru.add(uid, node)
+  }

-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 11:25:52 
-     * @Desc: 更新子节点属性 
-     */
-    updateChildren(children, prop, offset) {
-        children.forEach((item) => {
-            item[prop] += offset
-            if (item.children && item.children.length) {
-                this.updateChildren(item.children, prop, offset)
-            }
+  // 检查当前来源是否需要重新计算节点大小
+  checkIsNeedResizeSources() {
+    return [CONSTANTS.CHANGE_THEME, CONSTANTS.TRANSFORM_TO_NORMAL_NODE].includes(this.renderer.renderSource)
+  }
+
+  //  创建节点实例
+  createNode(data, parent, isRoot, layerIndex) {
+    // 创建节点
+    let newNode = null
+    // 数据上保存了节点引用，那么直接复用节点
+    if (data && data._node && !this.renderer.reRender) {
+      newNode = data._node
+      newNode.reset()
+      newNode.layerIndex = layerIndex
+      this.cacheNode(data._node.uid, newNode)
+      // 主题或主题配置改变了需要重新计算节点大小和布局
+      if (this.checkIsNeedResizeSources()) {
+        newNode.getSize()
+        newNode.needLayout = true
+      }
+    } else if (this.lru.has(data.data.uid) && !this.renderer.reRender) {
+      // 数据上没有保存节点引用，但是通过uid找到了缓存的节点，也可以复用
+      newNode = this.lru.get(data.data.uid)
+      // 保存该节点上一次的数据
+      let lastData = JSON.stringify(newNode.nodeData.data)
+      newNode.reset()
+      newNode.nodeData = newNode.handleData(data || {})
+      newNode.layerIndex = layerIndex
+      this.cacheNode(data.data.uid, newNode)
+      data._node = newNode
+      // 主题或主题配置改变了需要重新计算节点大小和布局
+      let isResizeSource = this.checkIsNeedResizeSources()
+      // 节点数据改变了需要重新计算节点大小和布局
+      let isNodeDataChange = lastData !== JSON.stringify(data.data)
+      if (isResizeSource || isNodeDataChange) {
+        newNode.getSize()
+        newNode.needLayout = true
+      }
+    } else {
+      // 创建新节点
+      let uid = this.mindMap.uid++
+      newNode = new Node({
+        data,
+        uid,
+        renderer: this.renderer,
+        mindMap: this.mindMap,
+        draw: this.draw,
+        layerIndex
+      })
+      // uid保存到数据上，为了节点复用
+      data.data.uid = uid
+      this.cacheNode(uid, newNode)
+      // 数据关联实际节点
+      data._node = newNode
+      if (data.data.isActive) {
+        this.renderer.addActiveNode(newNode)
+      }
+    }
+    // 根节点
+    if (isRoot) {
+      newNode.isRoot = true
+      this.root = newNode
+    } else {
+      // 互相收集
+      newNode.parent = parent._node
+      parent._node.addChildren(newNode)
+    }
+    return newNode
+  }
+
+  // 格式化节点位置
+  formatPosition(value, size, nodeSize) {
+    if (typeof value === 'number') {
+      return value
+    } else if (initRootNodePositionMap[value] !== undefined) {
+      return size * initRootNodePositionMap[value]
+    } else if (/^\d\d*%$/.test(value)) {
+      return Number.parseFloat(value) / 100 * size
+    } else {
+      return (size - nodeSize) / 2
+    }
+  }
+
+  //  定位节点到画布中间
+  setNodeCenter(node) {
+    let { initRootNodePosition } = this.mindMap.opt
+    let { CENTER }= CONSTANTS.INIT_ROOT_NODE_POSITION
+    if (!initRootNodePosition || !Array.isArray(initRootNodePosition) || initRootNodePosition.length < 2) {
+      initRootNodePosition = [CENTER, CENTER]
+    }
+    node.left = this.formatPosition(initRootNodePosition[0], this.mindMap.width, node.width)
+    node.top = this.formatPosition(initRootNodePosition[1], this.mindMap.height, node.height)
+  }
+
+  //  更新子节点属性
+  updateChildren(children, prop, offset) {
+    children.forEach(item => {
+      item[prop] += offset
+      if (item.children && item.children.length && !item.hasCustomPosition()) {
+        // 适配自定义位置
+        this.updateChildren(item.children, prop, offset)
+      }
+    })
+  }
+
+  //  更新子节点多个属性
+  updateChildrenPro(children, props) {
+    children.forEach(item => {
+      Object.keys(props).forEach((prop) => {
+        item[prop] += props[prop]
+      })
+      if (item.children && item.children.length && !item.hasCustomPosition()) {
+        // 适配自定义位置
+        this.updateChildrenPro(item.children, props)
+      }
+    })
+  }
+
+  //  递归计算节点的宽度
+  getNodeAreaWidth(node) {
+    let widthArr = []
+    let loop = (node, width) => {
+      if (node.children.length) {
+        width += node.width / 2
+        node.children.forEach(item => {
+          loop(item, width)
        })
+      } else {
+        width += node.width
+        widthArr.push(width)
+      }
    }
+    loop(node, 0)
+    return Math.max(...widthArr)
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 15:05:01 
-     * @Desc: 二次贝塞尔曲线 
-     */
-    quadraticCurvePath(x1, y1, x2, y2) {
-        let cx = x1 + (x2 - x1) * 0.2
-        let cy = y1 + (y2 - y1) * 0.8
-        return `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    }
+  //  二次贝塞尔曲线
+  quadraticCurvePath(x1, y1, x2, y2) {
+    let cx = x1 + (x2 - x1) * 0.2
+    let cy = y1 + (y2 - y1) * 0.8
+    return `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 15:05:18 
-     * @Desc: 三次贝塞尔曲线 
-     */
-    cubicBezierPath(x1, y1, x2, y2) {
-        let cx1 = x1 + (x2 - x1) / 2
-        let cy1 = y1
-        let cx2 = cx1
-        let cy2 = y2
-        return `M ${x1},${y1} C ${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`
-    }
+  //  三次贝塞尔曲线
+  cubicBezierPath(x1, y1, x2, y2) {
+    let cx1 = x1 + (x2 - x1) / 2
+    let cy1 = y1
+    let cx2 = cx1
+    let cy2 = y2
+    return `M ${x1},${y1} C ${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-06-27 19:00:07 
-     * @Desc:  获取节点的marginX
-     */
-    getMarginX(layerIndex) {
-        return layerIndex === 1 ? this.mindMap.themeConfig.second.marginX : this.mindMap.themeConfig.node.marginX;
-    }
+  //   获取节点的marginX
+  getMarginX(layerIndex) {
+    return layerIndex === 1
+      ? this.mindMap.themeConfig.second.marginX
+      : this.mindMap.themeConfig.node.marginX
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 15:34:20 
-     * @Desc: 获取节点的marginY
-     */
-    getMarginY(layerIndex) {
-        return layerIndex === 1 ? this.mindMap.themeConfig.second.marginY : this.mindMap.themeConfig.node.marginY;
+  //  获取节点的marginY
+  getMarginY(layerIndex) {
+    return layerIndex === 1
+      ? this.mindMap.themeConfig.second.marginY
+      : this.mindMap.themeConfig.node.marginY
+  }
+
+  //  获取节点包括概要在内的宽度
+  getNodeWidthWithGeneralization(node) {
+    return Math.max(
+      node.width,
+      node.checkHasGeneralization() ? node._generalizationNodeWidth : 0
+    )
+  }
+
+  //  获取节点包括概要在内的高度
+  getNodeHeightWithGeneralization(node) {
+    return Math.max(
+      node.height,
+      node.checkHasGeneralization() ? node._generalizationNodeHeight : 0
+    )
+  }
+
+  //  获取节点的边界值
+  /**
+   * dir：生长方向，h（水平）、v（垂直）
+   * isLeft：是否向左生长
+   */
+  getNodeBoundaries(node, dir) {
+    let { generalizationLineMargin, generalizationNodeMargin } =
+      this.mindMap.themeConfig
+    let walk = root => {
+      let _left = Infinity
+      let _right = -Infinity
+      let _top = Infinity
+      let _bottom = -Infinity
+      if (root.children && root.children.length > 0) {
+        root.children.forEach(child => {
+          let { left, right, top, bottom } = walk(child)
+          // 概要内容的宽度
+          let generalizationWidth =
+            child.checkHasGeneralization() && child.nodeData.data.expand
+              ? child._generalizationNodeWidth + generalizationNodeMargin
+              : 0
+          // 概要内容的高度
+          let generalizationHeight =
+            child.checkHasGeneralization() && child.nodeData.data.expand
+              ? child._generalizationNodeHeight + generalizationNodeMargin
+              : 0
+          if (left - (dir === 'h' ? generalizationWidth : 0) < _left) {
+            _left = left - (dir === 'h' ? generalizationWidth : 0)
+          }
+          if (right + (dir === 'h' ? generalizationWidth : 0) > _right) {
+            _right = right + (dir === 'h' ? generalizationWidth : 0)
+          }
+          if (top < _top) {
+            _top = top
+          }
+          if (bottom + (dir === 'v' ? generalizationHeight : 0) > _bottom) {
+            _bottom = bottom + (dir === 'v' ? generalizationHeight : 0)
+          }
+        })
+      }
+      let cur = {
+        left: root.left,
+        right: root.left + root.width,
+        top: root.top,
+        bottom: root.top + root.height
+      }
+      return {
+        left: cur.left < _left ? cur.left : _left,
+        right: cur.right > _right ? cur.right : _right,
+        top: cur.top < _top ? cur.top : _top,
+        bottom: cur.bottom > _bottom ? cur.bottom : _bottom
+      }
    }
+    let { left, right, top, bottom } = walk(node)
+    return {
+      left,
+      right,
+      top,
+      bottom,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    }
+  }
+
+  // 获取节点实际存在几个子节点
+  getNodeActChildrenLength(node) {
+    return node.nodeData.children && node.nodeData.children.length
+  }
 }

-export default Base
+export default Base
--- a/simple-mind-map/src/layouts/CatalogOrganization.js
+++ b/simple-mind-map/src/layouts/CatalogOrganization.js
@@ -1,315 +1,354 @@
-import Base from './Base';
-import {
-    walk,
-    asyncRun
-} from '../utils'
+import Base from './Base'
+import { walk, asyncRun } from '../utils'

-/** 
- * @Author: 王林 
- * @Date: 2021-04-12 22:25:58 
- * @Desc: 目录组织图 
- */
+//  目录组织图
 class CatalogOrganization extends Base {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:26:31 
-     * @Desc: 构造函数 
-     */
-    constructor(opt = {}) {
-        super(opt)
-    }
+  //  构造函数
+  constructor(opt = {}) {
+    super(opt)
+  }

-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-06 14:04:20 
-     * @Desc: 布局
-     */
-    doLayout(callback) {
-        let task = [() => {
-            this.computedBaseValue()
-        }, () => {
-            this.computedLeftTopValue()
-        }, () => {
-            this.adjustLeftTopValue()
-        }, () => {
-            callback(this.root)
-        }]
-        asyncRun(task)
-    }
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedLeftTopValue()
+      },
+      () => {
+        this.adjustLeftTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }

-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 09:49:32 
-     * @Desc: 遍历数据计算节点的left、width、height
-     */
-    computedBaseValue() {
-        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex) => {
-            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
-            // 根节点定位在画布中心位置
-            if (isRoot) {
-                this.setNodeCenter(newNode)
-            } else {
-                // 非根节点
-                if (parent._node.isRoot) {
-                    newNode.top = parent._node.top + parent._node.height + this.getMarginX(layerIndex)
-                }
-            }
-            if (!cur.data.expand) {
-                return true;
-            }
-        }, (cur, parent, isRoot, layerIndex) => {
-            if (isRoot) {
-                let len = cur.data.expand === false ? 0 : cur._node.children.length
-                cur._node.childrenAreaWidth = len ? cur._node.children.reduce((h, item) => {
-                    return h + item.width
-                }, 0) + (len + 1) * this.getMarginX(layerIndex + 1) : 0
-            }
-        }, true, 0)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 09:59:25 
-     * @Desc: 遍历节点树计算节点的left、top
-     */
-    computedLeftTopValue() {
-        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
-            if (node.nodeData.data.expand && node.children && node.children.length) {
-                let marginX = this.getMarginX(layerIndex + 1)
-                let marginY = this.getMarginY(layerIndex + 1)
-                if (isRoot) {
-                    let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
-                    let totalLeft = left + marginX
-                    node.children.forEach((cur) => {
-                        cur.left = totalLeft
-                        totalLeft += cur.width + marginX
-                    })
-                } else {
-                    let totalTop = node.top + node.height + marginY + node.expandBtnSize
-                    node.children.forEach((cur) => {
-                        cur.left = node.left + node.width * 0.5
-                        cur.top = totalTop
-                        totalTop += cur.height + marginY + node.expandBtnSize
-                    })
-                }
-            }
-        }, null, true)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 10:04:05 
-     * @Desc: 调整节点left、top
-     */
-    adjustLeftTopValue() {
-        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
-            if (!node.nodeData.data.expand) {
-                return;
-            }
-            // 调整left
-            if (parent && parent.isRoot) {
-                let areaWidth = this.getNodeAreaWidth(node)
-                let difference = areaWidth - node.width
-                if (difference > 0) {
-                    this.updateBrothersLeft(node, difference / 2)
-                }
-            }
-            // 调整top
-            let len = node.children.length
-            if (parent && !parent.isRoot && len > 0) {
-                let marginY = this.getMarginY(layerIndex + 1)
-                let totalHeight = node.children.reduce((h, item) => {
-                    return h + item.height
-                }, 0) + (len + 1) * marginY + len * node.expandBtnSize
-                this.updateBrothersTop(node, totalHeight)
-            }
-        }, null, true)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-12 18:55:03 
-     * @Desc: 递归计算节点的宽度
-     */
-    getNodeAreaWidth(node) {
-        let widthArr = []
-        let loop = (node, width) => {
-            if (node.children.length) {
-                width += node.width / 2
-                node.children.forEach((item) => {
-                    loop(item, width)
-                })
-            } else {
-                width += node.width
-                widthArr.push(width)
-            }
-        }
-        loop(node, 0)
-        return Math.max(...widthArr)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-07-13 11:12:51 
-     * @Desc: 调整兄弟节点的left 
-     */
-    updateBrothersLeft(node, addWidth) {
-        if (node.parent) {
-            let childrenList = node.parent.children
-            let index = childrenList.findIndex((item) => {
-                return item === node
-            })
-            // 第一个或最后一个节点自身也需要移动，否则两边不对称
-            if (index === 0 || index === childrenList.length - 1) {
-                let _offset = index === 0 ? -addWidth : addWidth
-                node.left += _offset
-                if (node.children && node.children.length) {
-                    this.updateChildren(node.children, 'left', _offset)
-                }
-            }
-            childrenList.forEach((item, _index) => {
-                let _offset = 0
-                if (_index < index) { // 左边的节点往左移
-                    _offset = -addWidth
-                } else if (_index > index) { // 右边的节点往右移
-                    _offset = addWidth
-                }
-                item.left += _offset
-                // 同步更新子节点的位置
-                if (item.children && item.children.length) {
-                    this.updateChildren(item.children, 'left', _offset)
-                }
-            })
-            // 更新父节点的位置
-            this.updateBrothersLeft(node.parent, addWidth)
-        }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 14:26:03 
-     * @Desc: 调整兄弟节点的top
-     */
-    updateBrothersTop(node, addHeight) {
-        if (node.parent && !node.parent.isRoot) {
-            let childrenList = node.parent.children
-            let index = childrenList.findIndex((item) => {
-                return item === node
-            })
-            childrenList.forEach((item, _index) => {
-                let _offset = 0
-                // 下面的节点往下移
-                if (_index > index) {
-                    _offset = addHeight
-                }
-                item.top += _offset
-                // 同步更新子节点的位置
-                if (item.children && item.children.length) {
-                    this.updateChildren(item.children, 'top', _offset)
-                }
-            })
-            // 更新父节点的位置
-            this.updateBrothersTop(node.parent, addHeight)
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 14:42:48 
-     * @Desc: 绘制连线，连接该节点到其子节点
-     */
-    renderLine(node, lines) {
-        if (node.children.length <= 0) {
-            return [];
-        }
-        let {
-            left,
-            top,
-            width,
-            height,
-            expandBtnSize
-        } = node
-        let len = node.children.length
-        let marginX = this.getMarginX(node.layerIndex + 1)
-        if (node.isRoot) {
-            let x1 = left + width / 2
-            let y1 = top + height
-            let s1 = marginX * 0.7
-            let minx = 0
-            let maxx = 0
-            node.children.forEach((item, index) => {
-                let x2 = item.left +item.width / 2
-                let y2 = item.top
-                if (index === 0) {
-                    minx = x2
-                } else if (index >= len - 1) {
-                    maxx = x2
-                }
-                let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
-                lines[index].plot(path)
-            })
-            // 父节点的竖线
-            let line1 = this.draw.path()
-            node.style.line(line1)
-            line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
-            node._lines.push(line1)
-            // 水平线
-            if (len > 1) {
-                let lin2 = this.draw.path()
-                node.style.line(lin2)
-                lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
-                node._lines.push(lin2)
-            }
+  //  遍历数据计算节点的left、width、height
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (cur, parent, isRoot, layerIndex) => {
+        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
        } else {
-            let y1 = top + height
-            let maxy = 0
-            let x2 = node.left + node.width * 0.3
-            node.children.forEach((item, index) => {
-                let y2 = item.top + item.height / 2
-                if (index >= len - 1) {
-                    maxy = y2
-                }
-                let path = `M ${x2},${y2} L ${x2 + node.width * 0.2},${y2}`
-                lines[index].plot(path)
-            })
-            // 竖线
-            if (len > 0) {
-                let lin2 = this.draw.path()
-                expandBtnSize = len > 0 ? expandBtnSize : 0
-                node.style.line(lin2)
-                lin2.plot(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
-                node._lines.push(lin2)
-            }
+          // 非根节点
+          if (parent._node.isRoot) {
+            newNode.top =
+              parent._node.top +
+              parent._node.height +
+              this.getMarginX(layerIndex)
+          }
        }
-    }
+        if (!cur.data.expand) {
+          return true
+        }
+      },
+      (cur, parent, isRoot, layerIndex) => {
+        if (isRoot) {
+          let len = cur.data.expand === false ? 0 : cur._node.children.length
+          cur._node.childrenAreaWidth = len
+            ? cur._node.children.reduce((h, item) => {
+                return h + item.width
+              }, 0) +
+              (len + 1) * this.getMarginX(layerIndex + 1)
+            : 0
+        }
+      },
+      true,
+      0
+    )
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 19:54:26 
-     * @Desc: 渲染按钮 
-     */
-    renderExpandBtn(node, btn) {
-        let {
-            width,
-            height,
-            expandBtnSize,
-            isRoot
-        } = node
-        if (!isRoot) {
-            let {
-                translateX,
-                translateY
-            } = btn.transform()
-            btn.translate(width * 0.3 - expandBtnSize / 2 - translateX, height + expandBtnSize / 2 - translateY)
+  //  遍历节点树计算节点的left、top
+  computedLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (
+          node.nodeData.data.expand &&
+          node.children &&
+          node.children.length
+        ) {
+          let marginX = this.getMarginX(layerIndex + 1)
+          let marginY = this.getMarginY(layerIndex + 1)
+          if (isRoot) {
+            let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
+            let totalLeft = left + marginX
+            node.children.forEach(cur => {
+              cur.left = totalLeft
+              totalLeft += cur.width + marginX
+            })
+          } else {
+            let totalTop = node.top + node.height + marginY + (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+            node.children.forEach(cur => {
+              cur.left = node.left + node.width * 0.5
+              cur.top = totalTop
+              totalTop += cur.height + marginY + (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
+            })
+          }
        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left、top
+  adjustLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        // 调整left
+        if (parent && parent.isRoot) {
+          let areaWidth = this.getNodeAreaWidth(node)
+          let difference = areaWidth - node.width
+          if (difference > 0) {
+            this.updateBrothersLeft(node, difference)
+          }
+        }
+        // 调整top
+        let len = node.children.length
+        if (parent && !parent.isRoot && len > 0) {
+          let marginY = this.getMarginY(layerIndex + 1)
+          let totalHeight =
+            node.children.reduce((h, item) => {
+              return h + item.height + (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+            }, 0) +
+            len * marginY
+          this.updateBrothersTop(node, totalHeight)
+        }
+      },
+      (node, parent, isRoot) => {
+        if (isRoot) {
+          let { right, left } = this.getNodeBoundaries(node, 'h')
+          let childrenWidth = right - left
+          let offset = (node.left - left) - (childrenWidth - node.width) / 2
+          this.updateChildren(node.children, 'left', offset)
+        }
+      },
+      true
+    )
+  }
+
+  //  调整兄弟节点的left
+  updateBrothersLeft(node, addWidth) {
+    if (node.parent) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition() || _index <= index) {
+          // 适配自定义位置
+          return
+        }
+        item.left += addWidth
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'left', addWidth)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothersLeft(node.parent, addWidth)
    }
+  }
+
+  //  调整兄弟节点的top
+  updateBrothersTop(node, addHeight) {
+    if (node.parent && !node.parent.isRoot) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 下面的节点往下移
+        if (_index > index) {
+          _offset = addHeight
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothersTop(node.parent, addHeight)
+    }
+  }
+
+  //  绘制连线，连接该节点到其子节点
+  renderLine(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    let len = node.children.length
+    let marginX = this.getMarginX(node.layerIndex + 1)
+    if (node.isRoot) {
+      // 根节点
+      let x1 = left + width / 2
+      let y1 = top + height
+      let s1 = marginX * 0.7
+      let minx = Infinity
+      let maxx = -Infinity
+      node.children.forEach((item, index) => {
+        let x2 = item.left + item.width / 2
+        let y2 = item.top
+        if (x2 < minx) {
+          minx = x2
+        }
+        if (x2 > maxx) {
+          maxx = x2
+        }
+        // 节点使用横线风格，需要额外渲染横线
+        let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+          ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
+          : ''
+        let path =
+          `M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}` +
+          nodeUseLineStylePath
+        // 竖线
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      })
+      minx = Math.min(minx, x1)
+      maxx = Math.max(maxx, x1)
+      // 父节点的竖线
+      let line1 = this.draw.path()
+      node.style.line(line1)
+      line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
+      node._lines.push(line1)
+      style && style(line1, node)
+      // 水平线
+      if (len > 0) {
+        let lin2 = this.draw.path()
+        node.style.line(lin2)
+        lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
+        node._lines.push(lin2)
+        style && style(lin2, node)
+      }
+    } else {
+      // 非根节点
+      let y1 = top + height
+      let maxy = -Infinity
+      let x2 = node.left + node.width * 0.3
+      node.children.forEach((item, index) => {
+        // 为了适配自定义位置，下面做了各种位置的兼容
+        let y2 = item.top + item.height / 2
+        if (y2 > maxy) {
+          maxy = y2
+        }
+        // 水平线
+        let path = ''
+        let _left = item.left
+        let _isLeft = item.left + item.width < x2
+        let _isXCenter = false
+        if (_isLeft) {
+          // 水平位置在父节点左边
+          _left = item.left + item.width
+        } else if (item.left < x2 && item.left + item.width > x2) {
+          // 水平位置在父节点之间
+          _isXCenter = true
+          y2 = item.top
+          maxy = y2
+        }
+        if (y2 > top && y2 < y1) {
+          // 自定义位置的情况：垂直位置节点在父节点之间
+          path = `M ${
+            _isLeft ? node.left : node.left + node.width
+          },${y2} L ${_left},${y2}`
+        } else if (y2 < y1) {
+          // 自定义位置的情况：垂直位置节点在父节点上面
+          if (_isXCenter) {
+            y2 = item.top + item.height
+            _left = x2
+          }
+          path = `M ${x2},${top} L ${x2},${y2} L ${_left},${y2}`
+        } else {
+          if (_isXCenter) {
+            _left = x2
+          }
+          path = `M ${x2},${y2} L ${_left},${y2}`
+        }
+        // 节点使用横线风格，需要额外渲染横线
+        let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+          ? ` L ${_left},${y2 - item.height / 2} L ${_left},${
+              y2 + item.height / 2
+            }`
+          : ''
+        path += nodeUseLineStylePath
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      })
+      // 竖线
+      if (len > 0) {
+        let lin2 = this.draw.path()
+        expandBtnSize = len > 0 ? expandBtnSize : 0
+        node.style.line(lin2)
+        if (maxy < y1 + expandBtnSize) {
+          lin2.hide()
+        } else {
+          lin2.plot(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
+          lin2.show()
+        }
+        node._lines.push(lin2)
+        style && style(lin2, node)
+      }
+    }
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height, expandBtnSize, isRoot } = node
+    if (!isRoot) {
+      let { translateX, translateY } = btn.transform()
+      btn.translate(
+        width * 0.3 - expandBtnSize / 2 - translateX,
+        height + expandBtnSize / 2 - translateY
+      )
+    }
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      top,
+      bottom,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h')
+    let x1 = right + generalizationLineMargin
+    let y1 = top
+    let x2 = right + generalizationLineMargin
+    let y2 = bottom
+    let cx = x1 + 20
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left = right + generalizationNodeMargin
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
 }

-export default CatalogOrganization
+export default CatalogOrganization
--- a/simple-mind-map/src/layouts/Fishbone.js
+++ b/simple-mind-map/src/layouts/Fishbone.js
@@ -0,0 +1,378 @@
+import Base from './Base'
+import { walk, asyncRun, degToRad } from '../utils'
+import { CONSTANTS } from '../constants/constant'
+import utils from './fishboneUtils'
+
+//  鱼骨图
+class Fishbone extends Base {
+  //  构造函数
+  constructor(opt = {}) {
+    super(opt)
+    this.indent = 0.3
+    this.childIndent = 0.5
+  }
+
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedLeftTopValue()
+      },
+      () => {
+        this.adjustLeftTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (node, parent, isRoot, layerIndex, index) => {
+        // 创建节点
+        let newNode = this.createNode(node, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
+        } else {
+          // 非根节点
+          // 三级及以下节点以上级方向为准
+          if (parent._node.dir) {
+            newNode.dir = parent._node.dir
+          } else {
+            // 节点生长方向
+            newNode.dir =
+              index % 2 === 0
+                ? CONSTANTS.TIMELINE_DIR.TOP
+                : CONSTANTS.TIMELINE_DIR.BOTTOM
+          }
+          // 计算二级节点的top值
+          if (parent._node.isRoot) {
+            if (this.checkIsTop(newNode)) {
+              newNode.top = parent._node.top - newNode.height
+            } else {
+              newNode.top = parent._node.top + parent._node.height
+            }
+          }
+        }
+        if (!node.data.expand) {
+          return true
+        }
+      },
+      null,
+      true,
+      0
+    )
+  }
+
+  //  遍历节点树计算节点的left、top
+  computedLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (node.isRoot) {
+          let topTotalLeft = node.left + node.width + node.height
+          let bottomTotalLeft = node.left + node.width + node.height
+          node.children.forEach(item => {
+            if (this.checkIsTop(item)) {
+              item.left = topTotalLeft
+              topTotalLeft += item.width
+            } else {
+              item.left = bottomTotalLeft + 20
+              bottomTotalLeft += item.width
+            }
+          })
+        }
+        let params = { layerIndex, node, ctx: this }
+        if (this.checkIsTop(node)) {
+          utils.top.computedLeftTopValue(params)
+        } else {
+          utils.bottom.computedLeftTopValue(params)
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left、top
+  adjustLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        let params = { node, parent, layerIndex, ctx: this }
+        if (this.checkIsTop(node)) {
+          utils.top.adjustLeftTopValueBefore(params)
+        } else {
+          utils.bottom.adjustLeftTopValueBefore(params)
+        }
+      },
+      (node, parent) => {
+        let params = { parent, node, ctx: this }
+        if (this.checkIsTop(node)) {
+          utils.top.adjustLeftTopValueAfter(params)
+        } else {
+          utils.bottom.adjustLeftTopValueAfter(params)
+        }
+        // 调整二级节点的子节点的left值
+        if (node.isRoot) {
+          let topTotalLeft = 0
+          let bottomTotalLeft = 0
+          node.children.forEach(item => {
+            if (this.checkIsTop(item)) {
+              item.left += topTotalLeft
+              this.updateChildren(item.children, 'left', topTotalLeft)
+              let { left, right } = this.getNodeBoundaries(item, 'h')
+              topTotalLeft += right - left
+            } else {
+              item.left += bottomTotalLeft
+              this.updateChildren(item.children, 'left', bottomTotalLeft)
+              let { left, right } = this.getNodeBoundaries(item, 'h')
+              bottomTotalLeft += right - left
+            }
+          })
+        }
+      },
+      true
+    )
+  }
+
+  //  递归计算节点的宽度
+  getNodeAreaHeight(node) {
+    let totalHeight = 0
+    let loop = node => {
+      totalHeight +=
+        node.height +
+        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+      if (node.children.length) {
+        node.children.forEach(item => {
+          loop(item)
+        })
+      }
+    }
+    loop(node)
+    return totalHeight
+  }
+
+  //  调整兄弟节点的left
+  updateBrothersLeft(node) {
+    let childrenList = node.children
+    let totalAddWidth = 0
+    childrenList.forEach(item => {
+      item.left += totalAddWidth
+      if (item.children && item.children.length) {
+        this.updateChildren(item.children, 'left', totalAddWidth)
+      }
+      let { left, right } = this.getNodeBoundaries(item, 'h')
+      let areaWidth = right - left
+      let difference = areaWidth - item.width
+      if (difference > 0) {
+        totalAddWidth += difference
+      }
+    })
+  }
+
+  //  调整兄弟节点的top
+  updateBrothersTop(node, addHeight) {
+    if (node.parent && !node.parent.isRoot) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 下面的节点往下移
+        if (_index > index) {
+          _offset = addHeight
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      if (this.checkIsTop(node)) {
+        this.updateBrothersTop(node.parent, addHeight)
+      } else {
+        this.updateBrothersTop(
+          node.parent,
+          node.layerIndex === 3 ? 0 : addHeight
+        )
+      }
+    }
+  }
+
+  // 检查节点是否是上方节点
+  checkIsTop(node) {
+    return node.dir === CONSTANTS.TIMELINE_DIR.TOP
+  }
+
+  //  绘制连线，连接该节点到其子节点
+  renderLine(node, lines, style) {
+    if (node.layerIndex !== 1 && node.children.length <= 0) {
+      return []
+    }
+    let { top, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    let len = node.children.length
+    if (node.isRoot) {
+      // 当前节点是根节点
+      // 根节点的子节点是和根节点同一水平线排列
+      let maxx = -Infinity
+      node.children.forEach((item) => {
+        if (item.left > maxx) {
+          maxx = item.left
+        }
+        // 水平线段到二级节点的连线
+        let nodeLineX = item.left
+        let offset = node.height / 2
+        let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
+        let line = this.draw.path()
+        if (this.checkIsTop(item)) {
+          line.plot(
+            `M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${item.left},${
+              item.top + item.height
+            }`
+          )
+        } else {
+          line.plot(
+            `M ${nodeLineX - offsetX},${
+              item.top - offset
+            } L ${nodeLineX},${item.top}`
+          )
+        }
+        node.style.line(line)
+        node._lines.push(line)
+        style && style(line, node)
+      })
+      // 从根节点出发的水平线
+      let nodeHalfTop = node.top + node.height / 2
+      let offset = node.height / 2
+      let line = this.draw.path()
+      line.plot(
+        `M ${node.left + node.width},${nodeHalfTop} L ${
+          maxx - offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
+        },${nodeHalfTop}`
+      )
+      node.style.line(line)
+      node._lines.push(line)
+      style && style(line, node)
+    } else {
+      // 当前节点为非根节点
+      let maxy = -Infinity
+      let miny = Infinity
+      let maxx = -Infinity
+      let x = node.left + node.width * this.indent
+      node.children.forEach((item, index) => {
+        if (item.left > maxx) {
+          maxx = item.left
+        }
+        let y = item.top + item.height / 2
+        if (y > maxy) {
+          maxy = y
+        }
+        if (y < miny) {
+          miny = y
+        }
+        // 水平线
+        if (node.layerIndex > 1) {
+          let path = `M ${x},${y} L ${item.left},${y}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+        }
+      })
+      // 斜线
+      if (len >= 0) {
+        let line = this.draw.path()
+        expandBtnSize = len > 0 ? expandBtnSize : 0
+        let lineLength = maxx - node.left - node.width * this.indent
+        lineLength = Math.max(lineLength, 0)
+        let params = {
+          node,
+          line,
+          top,
+          x,
+          lineLength,
+          height,
+          expandBtnSize,
+          maxy,
+          miny,
+          ctx: this
+        }
+        if (this.checkIsTop(node)) {
+          utils.top.renderLine(params)
+        } else {
+          utils.bottom.renderLine(params)
+        }
+        node.style.line(line)
+        node._lines.push(line)
+        style && style(line, node)
+      }
+    }
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height, expandBtnSize, isRoot } = node
+    if (!isRoot) {
+      let { translateX, translateY } = btn.transform()
+      let params = {
+        node,
+        btn,
+        expandBtnSize,
+        translateX,
+        translateY,
+        width,
+        height
+      }
+      if (this.checkIsTop(node)) {
+        utils.top.renderExpandBtn(params)
+      } else {
+        utils.bottom.renderExpandBtn(params)
+      }
+    }
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      top,
+      bottom,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h')
+    let x1 = right + generalizationLineMargin
+    let y1 = top
+    let x2 = right + generalizationLineMargin
+    let y2 = bottom
+    let cx = x1 + 20
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left = right + generalizationNodeMargin
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
+}
+
+export default Fishbone
--- a/simple-mind-map/src/layouts/FishboneBottom.js
+++ b/simple-mind-map/src/layouts/FishboneBottom.js
@@ -0,0 +1,369 @@
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
+import { CONSTANTS } from '../utils/constant'
+
+const degToRad = deg => {
+  return (Math.PI / 180) * deg
+}
+
+//  下方鱼骨图
+class Fishbone extends Base {
+  //  构造函数
+  constructor(opt = {}) {
+    super(opt)
+  }
+
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedLeftTopValue()
+      },
+      () => {
+        this.adjustLeftTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (node, parent, isRoot, layerIndex, index) => {
+        // 创建节点
+        let newNode = this.createNode(node, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
+        } else {
+          // 非根节点
+          // 三级及以下节点以上级方向为准
+          if (parent._node.dir) {
+            newNode.dir = parent._node.dir
+          } else {
+            // 节点生长方向
+            newNode.dir =
+              index % 2 === 0
+                ? CONSTANTS.TIMELINE_DIR.TOP
+                : CONSTANTS.TIMELINE_DIR.BOTTOM
+          }
+          // 计算二级节点的top值
+          if (parent._node.isRoot) {
+            newNode.top = parent._node.top + parent._node.height
+          }
+        }
+        if (!node.data.expand) {
+          return true
+        }
+      },
+      null,
+      true,
+      0
+    )
+  }
+
+  //  遍历节点树计算节点的left、top
+  computedLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex, index) => {
+        if (node.isRoot) {
+          let totalLeft = node.left + node.width
+          node.children.forEach(item => {
+            item.left = totalLeft
+            totalLeft += item.width
+          })
+        }
+        if (layerIndex === 1 && node.children) {
+          // 遍历二级节点的子节点
+          let startLeft = node.left + node.width * 0.5
+          let totalTop =
+            node.top +
+            node.height +
+            (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+
+          node.children.forEach(item => {
+            item.left = startLeft
+            item.top =
+              totalTop +
+              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+            totalTop +=
+              item.height +
+              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+          })
+        }
+        if (layerIndex > 1 && node.children) {
+          // 遍历三级及以下节点的子节点
+          let startLeft = node.left + node.width * 0.5
+          let totalTop =
+            node.top -
+            (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+          node.children.forEach(item => {
+            item.left = startLeft
+            item.top = totalTop - item.height
+            totalTop -=
+              item.height +
+              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+          })
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left、top
+  adjustLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        // 调整top
+        let len = node.children.length
+        // 调整三级节点的top
+        // if (layerIndex === 2 && len > 0) {
+        //   let totalHeight = node.children.reduce((h, item) => {
+        //     return h + item.height
+        //   }, 0)
+        //   this.updateBrothersTop(node, totalHeight)
+        // }
+        if (layerIndex > 2 && len > 0) {
+          let totalHeight = node.children.reduce((h, item) => {
+            return (
+              h +
+              item.height +
+              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+            )
+          }, 0)
+          this.updateBrothersTop(node, -totalHeight)
+        }
+      },
+      (node, parent) => {
+        // 将二级节点的子节点移到上方
+        if (parent && parent.isRoot) {
+          // 遍历二级节点的子节点
+          let totalHeight = 0
+          let totalHeight2 = 0
+          node.children.forEach(item => {
+            // 调整top
+            let hasChildren = this.getNodeActChildrenLength(item) > 0
+            let nodeTotalHeight = this.getNodeAreaHeight(item)
+            let offset =
+              hasChildren > 0
+                ? nodeTotalHeight -
+                  item.height -
+                  (hasChildren ? item.expandBtnSize : 0)
+                : 0
+            let _top = totalHeight + offset
+            item.top += _top
+            // 调整left
+            let offsetLeft =
+              (totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
+            item.left += offsetLeft
+            totalHeight += offset
+            totalHeight2 += nodeTotalHeight
+            // 同步更新后代节点
+            this.updateChildrenPro(item.children, {
+              top: _top,
+              left: offsetLeft
+            })
+          })
+        }
+        // 调整二级节点的子节点的left值
+        if (node.isRoot) {
+          let totalLeft = 0
+          node.children.forEach(item => {
+            item.left += totalLeft
+            this.updateChildren(item.children, 'left', totalLeft)
+            let { left, right } = this.getNodeBoundaries(item, 'h')
+            totalLeft += right - left
+          })
+        }
+      },
+      true
+    )
+  }
+
+  //  递归计算节点的宽度
+  getNodeAreaHeight(node) {
+    let totalHeight = 0
+    let loop = node => {
+      totalHeight +=
+        node.height +
+        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+      if (node.children.length) {
+        node.children.forEach(item => {
+          loop(item)
+        })
+      }
+    }
+    loop(node)
+    return totalHeight
+  }
+
+  //  调整兄弟节点的left
+  updateBrothersLeft(node) {
+    let childrenList = node.children
+    let totalAddWidth = 0
+    childrenList.forEach(item => {
+      item.left += totalAddWidth
+      if (item.children && item.children.length) {
+        this.updateChildren(item.children, 'left', totalAddWidth)
+      }
+      // let areaWidth = this.getNodeAreaWidth(item)
+      let { left, right } = this.getNodeBoundaries(item, 'h')
+      let areaWidth = right - left
+      let difference = areaWidth - item.width
+      if (difference > 0) {
+        totalAddWidth += difference
+      }
+    })
+  }
+
+  //  调整兄弟节点的top
+  updateBrothersTop(node, addHeight) {
+    if (node.parent && !node.parent.isRoot) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 下面的节点往下移
+        if (_index > index) {
+          _offset = addHeight
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothersTop(node.parent, node.layerIndex === 3 ? 0 : addHeight)
+    }
+  }
+
+  //  绘制连线，连接该节点到其子节点
+  renderLine(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    let len = node.children.length
+    if (node.isRoot) {
+      // 当前节点是根节点
+      let prevBother = node
+      // 根节点的子节点是和根节点同一水平线排列
+      node.children.forEach((item, index) => {
+        let x1 = prevBother.left + prevBother.width
+        let x2 = item.left
+        let y = node.top + node.height / 2
+        let path = `M ${x1},${y} L ${x2},${y}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+        prevBother = item
+      })
+    } else {
+      // 当前节点为非根节点
+      let maxy = -Infinity
+      let miny = Infinity
+      let maxx = -Infinity
+      let x = node.left + node.width * 0.3
+      node.children.forEach((item, index) => {
+        if (item.left > maxx) {
+          maxx = item.left
+        }
+        let y = item.top + item.height / 2
+        if (y > maxy) {
+          maxy = y
+        }
+        if (y < miny) {
+          miny = y
+        }
+        // 水平线
+        if (node.layerIndex > 1) {
+          let path = `M ${x},${y} L ${item.left},${y}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+        }
+      })
+      // 竖线
+      if (len > 0) {
+        let line = this.draw.path()
+        expandBtnSize = len > 0 ? expandBtnSize : 0
+        let lineLength = maxx - node.left - node.width * 0.3
+        if (node.parent && node.parent.isRoot) {
+          line.plot(
+            `M ${x},${top + height} L ${x + lineLength},${
+              top + height + Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
+            }`
+          )
+        } else {
+          line.plot(`M ${x},${top} L ${x},${miny}`)
+        }
+        node.style.line(line)
+        node._lines.push(line)
+        style && style(line, node)
+      }
+    }
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height, expandBtnSize, isRoot } = node
+    if (!isRoot) {
+      let { translateX, translateY } = btn.transform()
+      if (node.parent && node.parent.isRoot) {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          height + expandBtnSize / 2 - translateY
+        )
+      } else {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          -expandBtnSize / 2 - translateY
+        )
+      }
+    }
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      top,
+      bottom,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h')
+    let x1 = right + generalizationLineMargin
+    let y1 = top
+    let x2 = right + generalizationLineMargin
+    let y2 = bottom
+    let cx = x1 + 20
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left = right + generalizationNodeMargin
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
+}
+
+export default Fishbone
--- a/simple-mind-map/src/layouts/FishboneTop.js
+++ b/simple-mind-map/src/layouts/FishboneTop.js
@@ -0,0 +1,350 @@
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
+import { CONSTANTS } from '../utils/constant'
+
+const degToRad = deg => {
+  return (Math.PI / 180) * deg
+}
+
+//  上方鱼骨图
+class Fishbone extends Base {
+  //  构造函数
+  constructor(opt = {}) {
+    super(opt)
+  }
+
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedLeftTopValue()
+      },
+      () => {
+        this.adjustLeftTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (node, parent, isRoot, layerIndex, index) => {
+        // 创建节点
+        let newNode = this.createNode(node, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
+        } else {
+          // 非根节点
+          // 三级及以下节点以上级方向为准
+          if (parent._node.dir) {
+            newNode.dir = parent._node.dir
+          } else {
+            // 节点生长方向
+            newNode.dir =
+              index % 2 === 0
+                ? CONSTANTS.TIMELINE_DIR.TOP
+                : CONSTANTS.TIMELINE_DIR.BOTTOM
+          }
+          // 计算二级节点的top值
+          if (parent._node.isRoot) {
+            newNode.top = parent._node.top - newNode.height
+          }
+        }
+        if (!node.data.expand) {
+          return true
+        }
+      },
+      null,
+      true,
+      0
+    )
+  }
+
+  //  遍历节点树计算节点的left、top
+  computedLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex, index) => {
+        if (node.isRoot) {
+          let totalLeft = node.left + node.width
+          node.children.forEach(item => {
+            item.left = totalLeft
+            totalLeft += item.width
+          })
+        }
+        if (layerIndex >= 1 && node.children) {
+          // 遍历三级及以下节点的子节点
+          let startLeft = node.left + node.width * 0.5
+          let totalTop =
+            node.top +
+            node.height +
+            (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+          node.children.forEach(item => {
+            item.left = startLeft
+            item.top += totalTop
+            totalTop +=
+              item.height +
+              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+          })
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left、top
+  adjustLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        // 调整top
+        let len = node.children.length
+        // 调整三级及以下节点的top
+        if (parent && !parent.isRoot && len > 0) {
+          let totalHeight = node.children.reduce((h, item) => {
+            return (
+              h +
+              item.height +
+              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+            )
+          }, 0)
+          this.updateBrothersTop(node, totalHeight)
+        }
+      },
+      (node, parent) => {
+        // 将二级节点的子节点移到上方
+        if (parent && parent.isRoot) {
+          // 遍历二级节点的子节点
+          let totalHeight = 0
+          node.children.forEach(item => {
+            // 调整top
+            let nodeTotalHeight = this.getNodeAreaHeight(item)
+            let _top = item.top
+            item.top =
+              node.top - (item.top - node.top) - nodeTotalHeight + node.height
+            // 调整left
+            let offsetLeft =
+              (nodeTotalHeight + totalHeight) / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
+            item.left += offsetLeft
+            totalHeight += nodeTotalHeight
+            // 同步更新后代节点
+            this.updateChildrenPro(item.children, {
+              top: item.top - _top,
+              left: offsetLeft
+            })
+          })
+        }
+        // 调整二级节点的子节点的left值
+        if (node.isRoot) {
+          let totalLeft = 0
+          node.children.forEach(item => {
+            item.left += totalLeft
+            this.updateChildren(item.children, 'left', totalLeft)
+            let { left, right } = this.getNodeBoundaries(item, 'h')
+            totalLeft += right - left
+          })
+        }
+      },
+      true
+    )
+  }
+
+  //  递归计算节点的宽度
+  getNodeAreaHeight(node) {
+    let totalHeight = 0
+    let loop = node => {
+      totalHeight +=
+        node.height +
+        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+      if (node.children.length) {
+        node.children.forEach(item => {
+          loop(item)
+        })
+      }
+    }
+    loop(node)
+    return totalHeight
+  }
+
+  //  调整兄弟节点的left
+  updateBrothersLeft(node) {
+    let childrenList = node.children
+    let totalAddWidth = 0
+    childrenList.forEach(item => {
+      item.left += totalAddWidth
+      if (item.children && item.children.length) {
+        this.updateChildren(item.children, 'left', totalAddWidth)
+      }
+      // let areaWidth = this.getNodeAreaWidth(item)
+      let { left, right } = this.getNodeBoundaries(item, 'h')
+      let areaWidth = right - left
+      let difference = areaWidth - item.width
+      if (difference > 0) {
+        totalAddWidth += difference
+      }
+    })
+  }
+
+  //  调整兄弟节点的top
+  updateBrothersTop(node, addHeight) {
+    if (node.parent && !node.parent.isRoot) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 下面的节点往下移
+        if (_index > index) {
+          _offset = addHeight
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothersTop(node.parent, addHeight)
+    }
+  }
+
+  //  绘制连线，连接该节点到其子节点
+  renderLine(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    let len = node.children.length
+    if (node.isRoot) {
+      // 当前节点是根节点
+      let prevBother = node
+      // 根节点的子节点是和根节点同一水平线排列
+      node.children.forEach((item, index) => {
+        let x1 = prevBother.left + prevBother.width
+        let x2 = item.left
+        let y = node.top + node.height / 2
+        let path = `M ${x1},${y} L ${x2},${y}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+        prevBother = item
+      })
+    } else {
+      // 当前节点为非根节点
+      let maxy = -Infinity
+      let miny = Infinity
+      let maxx = -Infinity
+      let x = node.left + node.width * 0.3
+      node.children.forEach((item, index) => {
+        if (item.left > maxx) {
+          maxx = item.left
+        }
+        let y = item.top + item.height / 2
+        if (y > maxy) {
+          maxy = y
+        }
+        if (y < miny) {
+          miny = y
+        }
+        // 水平线
+        if (node.layerIndex > 1) {
+          let path = `M ${x},${y} L ${item.left},${y}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+        }
+      })
+      // 竖线
+      if (len > 0) {
+        let line = this.draw.path()
+        expandBtnSize = len > 0 ? expandBtnSize : 0
+        let lineLength = maxx - node.left - node.width * 0.3
+        if (
+          node.parent &&
+          node.parent.isRoot &&
+          node.dir === CONSTANTS.TIMELINE_DIR.TOP
+        ) {
+          line.plot(
+            `M ${x},${top} L ${x + lineLength},${
+              top - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
+            }`
+          )
+        } else {
+          if (node.parent && node.parent.isRoot) {
+            line.plot(
+              `M ${x},${top} L ${x + lineLength},${
+                top - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
+              }`
+            )
+          } else {
+            line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
+          }
+        }
+        node.style.line(line)
+        node._lines.push(line)
+        style && style(line, node)
+      }
+    }
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height, expandBtnSize, isRoot } = node
+    if (!isRoot) {
+      let { translateX, translateY } = btn.transform()
+      if (node.parent && node.parent.isRoot) {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          -expandBtnSize / 2 - translateY
+        )
+      } else {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          height + expandBtnSize / 2 - translateY
+        )
+      }
+    }
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      top,
+      bottom,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h')
+    let x1 = right + generalizationLineMargin
+    let y1 = top
+    let x2 = right + generalizationLineMargin
+    let y2 = bottom
+    let cx = x1 + 20
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left = right + generalizationNodeMargin
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
+}
+
+export default Fishbone
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -1,193 +1,291 @@
-import Base from './Base';
-import {
-    walk,
-    asyncRun
-} from '../utils'
+import Base from './Base'
+import { walk, asyncRun } from '../utils'

-/** 
- * @Author: 王林 
- * @Date: 2021-04-12 22:25:58 
- * @Desc: 逻辑结构图 
- */
+//  逻辑结构图
 class LogicalStructure extends Base {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:26:31 
-     * @Desc: 构造函数 
-     */
-    constructor(opt = {}) {
-        super(opt)
-    }
+  //  构造函数
+  constructor(opt = {}) {
+    super(opt)
+  }

-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-06 14:04:20 
-     * @Desc: 布局
-     */
-    doLayout(callback) {
-        let task = [() => {
-            this.computedBaseValue()
-        }, () => {
-            this.computedTopValue()
-        }, () => {
-            this.adjustTopValue()
-        }, () => {
-            callback(this.root)
-        }]
-        asyncRun(task)
-    }
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedTopValue()
+      },
+      () => {
+        this.adjustTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }

-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 09:49:32 
-     * @Desc: 遍历数据计算节点的left、width、height
-     */
-    computedBaseValue() {
-        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex) => {
-            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
-            // 根节点定位在画布中心位置
-            if (isRoot) {
-                this.setNodeCenter(newNode)
-            } else {
-                // 非根节点
-                // 定位到父节点右侧
-                newNode.left = parent._node.left + parent._node.width + this.getMarginX(layerIndex)
-            }
-            if (!cur.data.expand) {
-                return true;
-            }
-        }, (cur, parent, isRoot, layerIndex) => {
-            // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
-            let len = cur.data.expand === false ? 0 : cur._node.children.length
-            cur._node.childrenAreaHeight = len ? cur._node.children.reduce((h, item) => {
-                return h + item.height
-            }, 0) + (len + 1) * this.getMarginY(layerIndex + 1) : 0
-        }, true, 0)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 09:59:25 
-     * @Desc: 遍历节点树计算节点的top 
-     */
-    computedTopValue() {
-        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
-            if (node.nodeData.data.expand && node.children && node.children.length) {
-                let marginY = this.getMarginY(layerIndex + 1)
-                // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
-                let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
-                let totalTop = top + marginY
-                node.children.forEach((cur) => {
-                    cur.top = totalTop
-                    totalTop += cur.height + marginY
-                })
-            }
-        }, null, true)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 10:04:05 
-     * @Desc: 调整节点top 
-     */
-    adjustTopValue() {
-        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
-            if (!node.nodeData.data.expand) {
-                return;
-            }
-            // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
-            let difference = node.childrenAreaHeight - this.getMarginY(layerIndex + 1) * 2 - node.height
-            if (difference > 0) {
-                this.updateBrothers(node, difference / 2)
-            }
-        }, null, true)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 14:26:03 
-     * @Desc: 更新兄弟节点的top
-     */
-    updateBrothers(node, addHeight) {
-        if (node.parent) {
-            let childrenList = node.parent.children
-            let index = childrenList.findIndex((item) => {
-                return item === node
-            })
-            childrenList.forEach((item, _index) => {
-                if (item === node) {
-                    return
-                }
-                let _offset = 0
-                // 上面的节点往上移
-                if (_index < index) {
-                    _offset = -addHeight
-                } else if (_index > index) { // 下面的节点往下移
-                    _offset = addHeight
-                }
-                item.top += _offset
-                // 同步更新子节点的位置
-                if (item.children && item.children.length) {
-                    this.updateChildren(item.children, 'top', _offset)
-                }
-            })
-            // 更新父节点的位置
-            this.updateBrothers(node.parent, addHeight)
+  //  遍历数据计算节点的left、width、height
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (cur, parent, isRoot, layerIndex) => {
+        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
+        } else {
+          // 非根节点
+          // 定位到父节点右侧
+          newNode.left =
+            parent._node.left + parent._node.width + this.getMarginX(layerIndex)
        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 14:42:48 
-     * @Desc: 绘制连线，连接该节点到其子节点
-     */
-    renderLine(node, lines) {
-        if (node.children.length <= 0) {
-            return [];
+        if (!cur.data.expand) {
+          return true
        }
-        let {
-            left,
-            top,
-            width,
-            height,
-            expandBtnSize
-        } = node
-        node.children.forEach((item, index) => {
-            let x1 = node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
-            let y1 = top + height / 2
-            let x2 = item.left
-            let y2 = item.top + item.height / 2
-            let path = ''
-            if (node.isRoot) {
-                path = this.quadraticCurvePath(x1, y1, x2, y2)
-            } else {
-                path = this.cubicBezierPath(x1, y1, x2, y2)
-            }
-            lines[index].plot(path)
-        })
-    }
+      },
+      (cur, parent, isRoot, layerIndex) => {
+        // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
+        let len = cur.data.expand === false ? 0 : cur._node.children.length
+        cur._node.childrenAreaHeight = len
+          ? cur._node.children.reduce((h, item) => {
+              return h + item.height
+            }, 0) +
+            (len + 1) * this.getMarginY(layerIndex + 1)
+          : 0
+      },
+      true,
+      0
+    )
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 19:54:26 
-     * @Desc: 渲染按钮 
-     */
-    renderExpandBtn(node, btn) {
-        let {
-            width,
-            height
-        } = node
-        let {
-            translateX,
-            translateY
-        } = btn.transform()
-        btn.translate(width - translateX, height / 2 - translateY)
+  //  遍历节点树计算节点的top
+  computedTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (
+          node.nodeData.data.expand &&
+          node.children &&
+          node.children.length
+        ) {
+          let marginY = this.getMarginY(layerIndex + 1)
+          // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
+          let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
+          let totalTop = top + marginY
+          node.children.forEach(cur => {
+            cur.top = totalTop
+            totalTop += cur.height + marginY
+          })
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点top
+  adjustTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+        let difference =
+          node.childrenAreaHeight -
+          this.getMarginY(layerIndex + 1) * 2 -
+          node.height
+        if (difference > 0) {
+          this.updateBrothers(node, difference / 2)
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  更新兄弟节点的top
+  updateBrothers(node, addHeight) {
+    if (node.parent) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item === node || item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 上面的节点往上移
+        if (_index < index) {
+          _offset = -addHeight
+        } else if (_index > index) {
+          // 下面的节点往下移
+          _offset = addHeight
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothers(node.parent, addHeight)
    }
+  }
+
+  //  绘制连线，连接该节点到其子节点
+  renderLine(node, lines, style, lineStyle) {
+    if (lineStyle === 'curve') {
+      this.renderLineCurve(node, lines, style)
+    } else if (lineStyle === 'direct') {
+      this.renderLineDirect(node, lines, style)
+    } else {
+      this.renderLineStraight(node, lines, style)
+    }
+  }
+
+  //  直线风格连线
+  renderLineStraight(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    let marginX = this.getMarginX(node.layerIndex + 1)
+    let s1 = (marginX - expandBtnSize) * 0.6
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    node.children.forEach((item, index) => {
+      let x1 =
+        node.layerIndex === 0 ? left + width : left + width + expandBtnSize
+      let y1 = top + height / 2
+      let x2 = item.left
+      let y2 = item.top + item.height / 2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStyleOffset = nodeUseLineStyle
+        ? item.width
+        : 0
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
+        x2 + nodeUseLineStyleOffset
+      },${y2}`
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  //  直连风格
+  renderLineDirect(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    node.children.forEach((item, index) => {
+      let x1 =
+        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+      let y1 = top + height / 2
+      let x2 = item.left
+      let y2 = item.top + item.height / 2
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = nodeUseLineStyle
+        ? ` L ${item.left + item.width},${y2}`
+        : ''
+      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  //  曲线风格连线
+  renderLineCurve(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    node.children.forEach((item, index) => {
+      let x1 =
+        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+      let y1 = top + height / 2
+      let x2 = item.left
+      let y2 = item.top + item.height / 2
+      let path = ''
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = nodeUseLineStyle
+        ? ` L ${item.left + item.width},${y2}`
+        : ''
+      if (node.isRoot) {
+        path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
+      } else {
+        path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
+      }
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height } = node
+    let { translateX, translateY } = btn.transform()
+    // 节点使用横线风格，需要调整展开收起按钮位置
+    let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
+      ? height / 2
+      : 0
+    // 位置没有变化则返回
+    let _x = width
+    let _y = height / 2 + nodeUseLineStyleOffset
+    if (_x === translateX && _y === translateY) {
+      return
+    }
+    btn.translate(
+      _x - translateX,
+      _y - translateY
+    )
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      top,
+      bottom,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h')
+    let x1 = right + generalizationLineMargin
+    let y1 = top
+    let x2 = right + generalizationLineMargin
+    let y2 = bottom
+    let cx = x1 + 20
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left = right + generalizationNodeMargin
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
 }

-export default LogicalStructure
+export default LogicalStructure
--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -1,229 +1,363 @@
-import Base from './Base';
-import {
-    walk,
-    asyncRun
-} from '../utils'
+import Base from './Base'
+import { walk, asyncRun } from '../utils'

-/** 
- * @Author: 王林 
- * @Date: 2021-04-12 22:25:58 
- * @Desc: 思维导图 
- * 在逻辑结构图的基础上增加一个变量来记录生长方向，向左还是向右，同时在计算left的时候根据方向来计算、调整top时只考虑同方向的节点即可
- */
+//  思维导图
 class MindMap extends Base {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:26:31 
-     * @Desc: 构造函数 
-     */
-    constructor(opt = {}) {
-        super(opt)
-    }
+  //  构造函数
+  // 在逻辑结构图的基础上增加一个变量来记录生长方向，向左还是向右，同时在计算left的时候根据方向来计算、调整top时只考虑同方向的节点即可
+  constructor(opt = {}) {
+    super(opt)
+  }

-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-06 14:04:20 
-     * @Desc: 布局
-     */
-    doLayout(callback) {
-        let task = [() => {
-            this.computedBaseValue()
-        }, () => {
-            this.computedTopValue()
-        }, () => {
-            this.adjustTopValue()
-        }, () => {
-            callback(this.root)
-        }]
-        asyncRun(task)
-    }
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedTopValue()
+      },
+      () => {
+        this.adjustTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }

-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 09:49:32 
-     * @Desc: 遍历数据计算节点的left、width、height
-     */
-    computedBaseValue() {
-        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex, index) => {
-            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
-            // 根节点定位在画布中心位置
-            if (isRoot) {
-                this.setNodeCenter(newNode)
-            } else {
-                // 非根节点
-                // 三级及以下节点以上级为准
-                if (parent._node.dir) {
-                    newNode.dir = parent._node.dir
-                } else { // 节点生长方向
-                    newNode.dir = index % 2 === 0 ? 'right' : 'left'
-                }
-                // 根据生长方向定位到父节点的左侧或右侧
-                newNode.left = newNode.dir === 'right' ? parent._node.left + parent._node.width + this.getMarginX(layerIndex) : parent._node.left - this.getMarginX(layerIndex) - newNode.width
-            }
-            if (!cur.data.expand) {
-                return true;
-            }
-        }, (cur, parent, isRoot, layerIndex) => {
-            // 返回时计算节点的leftChildrenAreaHeight和rightChildrenAreaHeight，也就是左侧和右侧子节点所占的高度之和，包括外边距
-            if (!cur.data.expand) {
-                cur._node.leftChildrenAreaHeight = 0
-                cur._node.rightChildrenAreaHeight = 0
-                return
-            }
-            // 理论上只有根节点是存在两个方向的子节点的，其他节点的子节点一定全都是同方向，但是为了逻辑统一，就不按特殊处理的方式来写了
-            let leftLen = 0
-            let rightLen = 0
-            let leftChildrenAreaHeight = 0
-            let rightChildrenAreaHeight = 0
-            cur._node.children.forEach((item) => {
-                if (item.dir === 'left') {
-                    leftLen++
-                    leftChildrenAreaHeight += item.height
-                } else {
-                    rightLen++
-                    rightChildrenAreaHeight += item.height
-                }
-            })
-            cur._node.leftChildrenAreaHeight = leftChildrenAreaHeight + (leftLen + 1) * this.getMarginY(layerIndex + 1)
-            cur._node.rightChildrenAreaHeight = rightChildrenAreaHeight + (rightLen + 1) * this.getMarginY(layerIndex + 1)
-        }, true, 0)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 09:59:25 
-     * @Desc: 遍历节点树计算节点的top 
-     */
-    computedTopValue() {
-        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
-            if (node.nodeData.data.expand && node.children && node.children.length) {
-                let marginY = this.getMarginY(layerIndex + 1)
-                let baseTop = node.top + node.height / 2 + marginY
-                // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
-                let leftTotalTop = baseTop - node.leftChildrenAreaHeight / 2
-                let rightTotalTop = baseTop - node.rightChildrenAreaHeight / 2
-                node.children.forEach((cur) => {
-                    if (cur.dir === 'left') {
-                        cur.top = leftTotalTop
-                        leftTotalTop += cur.height + marginY
-                    } else {
-                        cur.top = rightTotalTop
-                        rightTotalTop += cur.height + marginY
-                    }
-                })
-            }
-        }, null, true)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 10:04:05 
-     * @Desc: 调整节点top 
-     */
-    adjustTopValue() {
-        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
-            if (!node.nodeData.data.expand) {
-                return;
-            }
-            // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
-            let base = this.getMarginY(layerIndex + 1) * 2 + node.height
-            let leftDifference = node.leftChildrenAreaHeight - base
-            let rightDifference = node.rightChildrenAreaHeight - base
-            if (leftDifference > 0 || rightDifference > 0) {
-                this.updateBrothers(node, leftDifference / 2, rightDifference / 2)
-            }
-        }, null, true)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 14:26:03 
-     * @Desc: 更新兄弟节点的top
-     */
-    updateBrothers(node, leftAddHeight, rightAddHeight) {
-        if (node.parent) {
-            // 过滤出和自己同方向的节点
-            let childrenList = node.parent.children.filter((item) => {
-                return item.dir === node.dir
-            })
-            let index = childrenList.findIndex((item) => {
-                return item === node
-            })
-            childrenList.forEach((item, _index) => {
-                let _offset = 0
-                let addHeight = item.dir === 'left' ? leftAddHeight : rightAddHeight
-                // 上面的节点往上移
-                if (_index < index) {
-                    _offset = -addHeight
-                } else if (_index > index) { // 下面的节点往下移
-                    _offset = addHeight
-                }
-                item.top += _offset
-                // 同步更新子节点的位置
-                if (item.children && item.children.length) {
-                    this.updateChildren(item.children, 'top', _offset)
-                }
-            })
-            // 更新父节点的位置
-            this.updateBrothers(node.parent, leftAddHeight, rightAddHeight)
+  //  遍历数据计算节点的left、width、height
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (cur, parent, isRoot, layerIndex, index) => {
+        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
+        } else {
+          // 非根节点
+          // 三级及以下节点以上级为准
+          if (parent._node.dir) {
+            newNode.dir = parent._node.dir
+          } else {
+            // 节点生长方向
+            newNode.dir = index % 2 === 0 ? 'right' : 'left'
+          }
+          // 根据生长方向定位到父节点的左侧或右侧
+          newNode.left =
+            newNode.dir === 'right'
+              ? parent._node.left +
+                parent._node.width +
+                this.getMarginX(layerIndex)
+              : parent._node.left - this.getMarginX(layerIndex) - newNode.width
        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 14:42:48 
-     * @Desc: 绘制连线，连接该节点到其子节点
-     */
-    renderLine(node, lines) {
-        if (node.children.length <= 0) {
-            return [];
+        if (!cur.data.expand) {
+          return true
        }
-        let {
-            left,
-            top,
-            width,
-            height,
-            expandBtnSize
-        } = node
-        node.children.forEach((item, index) => {
-            let x1 = node.layerIndex === 0 ? left + width / 2 : item.dir === 'left' ? left - expandBtnSize : left + width + 20
-            let y1 = top + height / 2
-            let x2 = item.dir === 'left' ? item.left + item.width : item.left
-            let y2 = item.top + item.height / 2
-            let path = ''
-            if (node.isRoot) {
-                path = this.quadraticCurvePath(x1, y1, x2, y2)
-            } else {
-                path = this.cubicBezierPath(x1, y1, x2, y2)
-            }
-            lines[index].plot(path)
+      },
+      (cur, parent, isRoot, layerIndex) => {
+        // 返回时计算节点的leftChildrenAreaHeight和rightChildrenAreaHeight，也就是左侧和右侧子节点所占的高度之和，包括外边距
+        if (!cur.data.expand) {
+          cur._node.leftChildrenAreaHeight = 0
+          cur._node.rightChildrenAreaHeight = 0
+          return
+        }
+        // 理论上只有根节点是存在两个方向的子节点的，其他节点的子节点一定全都是同方向，但是为了逻辑统一，就不按特殊处理的方式来写了
+        let leftLen = 0
+        let rightLen = 0
+        let leftChildrenAreaHeight = 0
+        let rightChildrenAreaHeight = 0
+        cur._node.children.forEach(item => {
+          if (item.dir === 'left') {
+            leftLen++
+            leftChildrenAreaHeight += item.height
+          } else {
+            rightLen++
+            rightChildrenAreaHeight += item.height
+          }
        })
-    }
+        cur._node.leftChildrenAreaHeight =
+          leftChildrenAreaHeight +
+          (leftLen + 1) * this.getMarginY(layerIndex + 1)
+        cur._node.rightChildrenAreaHeight =
+          rightChildrenAreaHeight +
+          (rightLen + 1) * this.getMarginY(layerIndex + 1)
+      },
+      true,
+      0
+    )
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 19:54:26 
-     * @Desc: 渲染按钮 
-     */
-    renderExpandBtn(node, btn) {
-        let {
-            width,
-            height,
-            expandBtnSize
-        } = node
-        let {
-            translateX,
-            translateY
-        } = btn.transform()
-        let x = (node.dir === 'left' ? 0 - expandBtnSize : width) - translateX
-        let y = height / 2 - translateY
-        btn.translate(x, y)
+  //  遍历节点树计算节点的top
+  computedTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (
+          node.nodeData.data.expand &&
+          node.children &&
+          node.children.length
+        ) {
+          let marginY = this.getMarginY(layerIndex + 1)
+          let baseTop = node.top + node.height / 2 + marginY
+          // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
+          let leftTotalTop = baseTop - node.leftChildrenAreaHeight / 2
+          let rightTotalTop = baseTop - node.rightChildrenAreaHeight / 2
+          node.children.forEach(cur => {
+            if (cur.dir === 'left') {
+              cur.top = leftTotalTop
+              leftTotalTop += cur.height + marginY
+            } else {
+              cur.top = rightTotalTop
+              rightTotalTop += cur.height + marginY
+            }
+          })
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点top
+  adjustTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+        let base = this.getMarginY(layerIndex + 1) * 2 + node.height
+        let leftDifference = node.leftChildrenAreaHeight - base
+        let rightDifference = node.rightChildrenAreaHeight - base
+        if (leftDifference > 0 || rightDifference > 0) {
+          this.updateBrothers(node, leftDifference / 2, rightDifference / 2)
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  更新兄弟节点的top
+  updateBrothers(node, leftAddHeight, rightAddHeight) {
+    if (node.parent) {
+      // 过滤出和自己同方向的节点
+      let childrenList = node.parent.children.filter(item => {
+        return item.dir === node.dir
+      })
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        let addHeight = item.dir === 'left' ? leftAddHeight : rightAddHeight
+        // 上面的节点往上移
+        if (_index < index) {
+          _offset = -addHeight
+        } else if (_index > index) {
+          // 下面的节点往下移
+          _offset = addHeight
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothers(node.parent, leftAddHeight, rightAddHeight)
    }
+  }
+
+  //  绘制连线，连接该节点到其子节点
+  renderLine(node, lines, style, lineStyle) {
+    if (lineStyle === 'curve') {
+      this.renderLineCurve(node, lines, style)
+    } else if (lineStyle === 'direct') {
+      this.renderLineDirect(node, lines, style)
+    } else {
+      this.renderLineStraight(node, lines, style)
+    }
+  }
+
+  //  直线风格连线
+  renderLineStraight(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    let marginX = this.getMarginX(node.layerIndex + 1)
+    let s1 = (marginX - expandBtnSize) * 0.6
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    node.children.forEach((item, index) => {
+      let x1 = 0
+      let _s = 0
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStyleOffset = nodeUseLineStyle
+        ? item.width
+        : 0
+      if (item.dir === 'left') {
+        _s = -s1
+        x1 = node.layerIndex === 0 ? left : left - expandBtnSize
+        nodeUseLineStyleOffset = -nodeUseLineStyleOffset
+      } else {
+        _s = s1
+        x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
+      }
+      let y1 = top + height / 2
+      let x2 = item.dir === 'left' ? item.left + item.width : item.left
+      let y2 = item.top + item.height / 2
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${
+        x2 + nodeUseLineStyleOffset
+      },${y2}`
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  //  直连风格
+  renderLineDirect(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    node.children.forEach((item, index) => {
+      let x1 =
+        node.layerIndex === 0
+          ? left + width / 2
+          : item.dir === 'left'
+          ? left - expandBtnSize
+          : left + width + expandBtnSize
+      let y1 = top + height / 2
+      let x2 = item.dir === 'left' ? item.left + item.width : item.left
+      let y2 = item.top + item.height / 2
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = ''
+      if (nodeUseLineStyle) {
+        if (item.dir === 'left') {
+          nodeUseLineStylePath = ` L ${item.left},${y2}`
+        } else {
+          nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
+        }
+      }
+      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  //  曲线风格连线
+  renderLineCurve(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    node.children.forEach((item, index) => {
+      let x1 =
+        node.layerIndex === 0
+          ? left + width / 2
+          : item.dir === 'left'
+          ? left - expandBtnSize
+          : left + width + expandBtnSize
+      let y1 = top + height / 2
+      let x2 = item.dir === 'left' ? item.left + item.width : item.left
+      let y2 = item.top + item.height / 2
+      let path = ''
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = ''
+      if (this.mindMap.themeConfig.nodeUseLineStyle) {
+        if (item.dir === 'left') {
+          nodeUseLineStylePath = ` L ${item.left},${y2}`
+        } else {
+          nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
+        }
+      }
+      if (node.isRoot) {
+        path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
+      } else {
+        path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
+      }
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height, expandBtnSize } = node
+    let { translateX, translateY } = btn.transform()
+    // 节点使用横线风格，需要调整展开收起按钮位置
+    let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
+      ? height / 2
+      : 0
+    // 位置没有变化则返回
+    let _x = (node.dir === 'left' ? 0 - expandBtnSize : width)
+    let _y = height / 2 + nodeUseLineStyleOffset
+    if (_x === translateX && _y === translateY) {
+      return
+    }
+    let x = _x - translateX
+    let y = _y - translateY
+    btn.translate(x, y)
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let isLeft = node.dir === 'left'
+    let {
+      top,
+      bottom,
+      left,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h', isLeft)
+    let x = isLeft
+      ? left - generalizationLineMargin
+      : right + generalizationLineMargin
+    let x1 = x
+    let y1 = top
+    let x2 = x
+    let y2 = bottom
+    let cx = x1 + (isLeft ? -20 : 20)
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left =
+      x +
+      (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
+      (isLeft ? gNode.width : 0)
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
 }

-export default MindMap
+export default MindMap
--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/simple-mind-map/src/layouts/OrganizationStructure.js
@@ -1,211 +1,260 @@
-import Base from './Base';
-import {
-    walk,
-    asyncRun
-} from '../utils'
+import Base from './Base'
+import { walk, asyncRun } from '../utils'

-/** 
- * @Author: 王林 
- * @Date: 2021-04-12 22:25:58 
- * @Desc: 组织结构图
- * 和逻辑结构图基本一样，只是方向变成向下生长，所以先计算节点的top，后计算节点的left、最后调整节点的left即可
- */
+//  组织结构图
+// 和逻辑结构图基本一样，只是方向变成向下生长，所以先计算节点的top，后计算节点的left、最后调整节点的left即可
 class OrganizationStructure extends Base {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:26:31 
-     * @Desc: 构造函数 
-     */
-    constructor(opt = {}) {
-        super(opt)
-    }
+  //  构造函数
+  constructor(opt = {}) {
+    super(opt)
+  }

-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-06 14:04:20 
-     * @Desc: 布局
-     */
-    doLayout(callback) {
-        let task = [() => {
-            this.computedBaseValue()
-        }, () => {
-            this.computedLeftValue()
-        }, () => {
-            this.adjustLeftValue()
-        }, () => {
-            callback(this.root)
-        }]
-        asyncRun(task)
-    }
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedLeftValue()
+      },
+      () => {
+        this.adjustLeftValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }

-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 09:49:32 
-     * @Desc: 遍历数据计算节点的left、width、height
-     */
-    computedBaseValue() {
-        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex) => {
-            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
-            // 根节点定位在画布中心位置
-            if (isRoot) {
-                this.setNodeCenter(newNode)
-            } else {
-                // 非根节点
-                // 定位到父节点下方
-                newNode.top = parent._node.top + parent._node.height + this.getMarginX(layerIndex)
-            }
-            if (!cur.data.expand) {
-                return true;
-            }
-        }, (cur, parent, isRoot, layerIndex) => {
-            // 返回时计算节点的areaWidth，也就是子节点所占的宽度之和，包括外边距
-            let len = cur.data.expand === false ? 0 : cur._node.children.length
-            cur._node.childrenAreaWidth = len ? cur._node.children.reduce((h, item) => {
-                return h + item.width
-            }, 0) + (len + 1) * this.getMarginY(layerIndex + 1) : 0
-        }, true, 0)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 09:59:25 
-     * @Desc: 遍历节点树计算节点的left
-     */
-    computedLeftValue() {
-        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
-            if (node.nodeData.data.expand && node.children && node.children.length) {
-                let marginX = this.getMarginY(layerIndex + 1)
-                // 第一个子节点的left值 = 该节点中心的left值 - 子节点的宽度之和的一半
-                let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
-                let totalLeft = left + marginX
-                node.children.forEach((cur) => {
-                    cur.left = totalLeft
-                    totalLeft += cur.width + marginX
-                })
-            }
-        }, null, true)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-08 10:04:05 
-     * @Desc: 调整节点left
-     */
-    adjustLeftValue() {
-        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
-            if (!node.nodeData.data.expand) {
-                return;
-            }
-            // 判断子节点所占的宽度之和是否大于该节点自身，大于则需要调整位置
-            let difference = node.childrenAreaWidth - this.getMarginY(layerIndex + 1) * 2 - node.width
-            if (difference > 0) {
-                this.updateBrothers(node, difference / 2)
-            }
-        }, null, true)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 14:26:03 
-     * @Desc: 更新兄弟节点的left
-     */
-    updateBrothers(node, addWidth) {
-        if (node.parent) {
-            let childrenList = node.parent.children
-            let index = childrenList.findIndex((item) => {
-                return item === node
-            })
-            childrenList.forEach((item, _index) => {
-                let _offset = 0
-                // 上面的节点往上移
-                if (_index < index) {
-                    _offset = -addWidth
-                } else if (_index > index) { // 下面的节点往下移
-                    _offset = addWidth
-                }
-                item.left += _offset
-                // 同步更新子节点的位置
-                if (item.children && item.children.length) {
-                    this.updateChildren(item.children, 'left', _offset)
-                }
-            })
-            // 更新父节点的位置
-            this.updateBrothers(node.parent, addWidth)
+  //  遍历数据计算节点的left、width、height
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (cur, parent, isRoot, layerIndex) => {
+        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
+        } else {
+          // 非根节点
+          // 定位到父节点下方
+          newNode.top =
+            parent._node.top + parent._node.height + this.getMarginX(layerIndex)
        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 14:42:48 
-     * @Desc: 绘制连线，连接该节点到其子节点
-     */
-    renderLine(node, lines) {
-        if (node.children.length <= 0) {
-            return [];
+        if (!cur.data.expand) {
+          return true
        }
-        let {
-            left,
-            top,
-            width,
-            height,
-            expandBtnSize,
-            isRoot
-        } = node
-        let x1 = left + width / 2
-        let y1 = top + height
-        let marginX = this.getMarginX(node.layerIndex + 1)
-        let s1 = marginX * 0.7
-        let minx = 0
-        let maxx = 0
-        let len = node.children.length
-        node.children.forEach((item, index) => {
-            let x2 = item.left + item.width / 2
-            let y2 = item.top
-            if (index === 0) {
-                minx = x2
-            } else if (index >= len - 1) {
-                maxx = x2
-            }
-            let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
-            lines[index].plot(path)
-        })
-        // 父节点的竖线
-        let line1 = this.draw.path()
-        node.style.line(line1)
-        expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
-        line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
-        node._lines.push(line1)
-        // 水平线
-        if (len > 1) {
-            let lin2 = this.draw.path()
-            node.style.line(lin2)
-            lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
-            node._lines.push(lin2)
-        }
-    }
+      },
+      (cur, parent, isRoot, layerIndex) => {
+        // 返回时计算节点的areaWidth，也就是子节点所占的宽度之和，包括外边距
+        let len = cur.data.expand === false ? 0 : cur._node.children.length
+        cur._node.childrenAreaWidth = len
+          ? cur._node.children.reduce((h, item) => {
+              return h + item.width
+            }, 0) +
+            (len + 1) * this.getMarginY(layerIndex + 1)
+          : 0
+      },
+      true,
+      0
+    )
+  }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 19:54:26 
-     * @Desc: 渲染按钮 
-     */
-    renderExpandBtn(node, btn) {
-        let {
-            width,
-            height,
-            expandBtnSize
-        } = node
-        let {
-            translateX,
-            translateY
-        } = btn.transform()
-        btn.translate(width / 2 - expandBtnSize / 2 - translateX, height + expandBtnSize / 2 - translateY)
+  //  遍历节点树计算节点的left
+  computedLeftValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (
+          node.nodeData.data.expand &&
+          node.children &&
+          node.children.length
+        ) {
+          let marginX = this.getMarginY(layerIndex + 1)
+          // 第一个子节点的left值 = 该节点中心的left值 - 子节点的宽度之和的一半
+          let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
+          let totalLeft = left + marginX
+          node.children.forEach(cur => {
+            cur.left = totalLeft
+            totalLeft += cur.width + marginX
+          })
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left
+  adjustLeftValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        // 判断子节点所占的宽度之和是否大于该节点自身，大于则需要调整位置
+        let difference =
+          node.childrenAreaWidth -
+          this.getMarginY(layerIndex + 1) * 2 -
+          node.width
+        if (difference > 0) {
+          this.updateBrothers(node, difference / 2)
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  更新兄弟节点的left
+  updateBrothers(node, addWidth) {
+    if (node.parent) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 上面的节点往上移
+        if (_index < index) {
+          _offset = -addWidth
+        } else if (_index > index) {
+          // 下面的节点往下移
+          _offset = addWidth
+        }
+        item.left += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'left', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothers(node.parent, addWidth)
    }
+  }
+
+  //  绘制连线，连接该节点到其子节点
+  renderLine(node, lines, style, lineStyle) {
+    if (lineStyle === 'direct') {
+      this.renderLineDirect(node, lines, style)
+    } else {
+      this.renderLineStraight(node, lines, style)
+    }
+  }
+
+  //  直连风格
+  renderLineDirect(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height } = node
+    let x1 = left + width / 2
+    let y1 = top + height
+    node.children.forEach((item, index) => {
+      let x2 = item.left + item.width / 2
+      let y2 = item.top
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+        ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
+        : ''
+      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  //  直线风格连线
+  renderLineStraight(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize, isRoot } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    let x1 = left + width / 2
+    let y1 = top + height
+    let marginX = this.getMarginX(node.layerIndex + 1)
+    let s1 = marginX * 0.7
+    let minx = Infinity
+    let maxx = -Infinity
+    let len = node.children.length
+    node.children.forEach((item, index) => {
+      let x2 = item.left + item.width / 2
+      let y2 = y1 + s1 > item.top ? item.top + item.height : item.top
+      if (x2 < minx) {
+        minx = x2
+      }
+      if (x2 > maxx) {
+        maxx = x2
+      }
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+        ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
+        : ''
+      let path = `M ${x2},${y1 + s1} L ${x2},${y2}` + nodeUseLineStylePath
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+    minx = Math.min(x1, minx)
+    maxx = Math.max(x1, maxx)
+    // 父节点的竖线
+    let line1 = this.draw.path()
+    node.style.line(line1)
+    expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
+    line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
+    node._lines.push(line1)
+    style && style(line1, node)
+    // 水平线
+    if (len > 0) {
+      let lin2 = this.draw.path()
+      node.style.line(lin2)
+      lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
+      node._lines.push(lin2)
+      style && style(lin2, node)
+    }
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height, expandBtnSize } = node
+    let { translateX, translateY } = btn.transform()
+    btn.translate(
+      width / 2 - expandBtnSize / 2 - translateX,
+      height + expandBtnSize / 2 - translateY
+    )
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      bottom,
+      left,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'v')
+    let x1 = left
+    let y1 = bottom + generalizationLineMargin
+    let x2 = right
+    let y2 = bottom + generalizationLineMargin
+    let cx = x1 + (x2 - x1) / 2
+    let cy = y1 + 20
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.top = bottom + generalizationNodeMargin
+    gNode.left = left + (right - left - gNode.width) / 2
+  }
 }

-export default OrganizationStructure
+export default OrganizationStructure
--- a/simple-mind-map/src/layouts/Timeline.js
+++ b/simple-mind-map/src/layouts/Timeline.js
@@ -0,0 +1,341 @@
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
+import { CONSTANTS } from '../constants/constant'
+
+//  时间轴
+class Timeline extends Base {
+  //  构造函数
+  constructor(opt = {}, layout) {
+    super(opt)
+    this.layout = layout
+  }
+
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedLeftTopValue()
+      },
+      () => {
+        this.adjustLeftTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (cur, parent, isRoot, layerIndex, index) => {
+        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
+        } else {
+          // 非根节点
+          // 时间轴2类型需要交替显示
+          if (this.layout === CONSTANTS.LAYOUT.TIMELINE2) {
+            // 三级及以下节点以上级为准
+            if (parent._node.dir) {
+              newNode.dir = parent._node.dir
+            } else {
+              // 节点生长方向
+              newNode.dir =
+                index % 2 === 0
+                  ? CONSTANTS.TIMELINE_DIR.BOTTOM
+                  : CONSTANTS.TIMELINE_DIR.TOP
+            }
+          } else {
+            newNode.dir = ''
+          }
+          if (parent._node.isRoot) {
+            newNode.top =
+              parent._node.top +
+              (cur._node.height > parent._node.height
+                ? -(cur._node.height - parent._node.height) / 2
+                : (parent._node.height - cur._node.height) / 2)
+          }
+        }
+        if (!cur.data.expand) {
+          return true
+        }
+      },
+      null,
+      true,
+      0
+    )
+  }
+
+  //  遍历节点树计算节点的left、top
+  computedLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex, index) => {
+        if (
+          node.nodeData.data.expand &&
+          node.children &&
+          node.children.length
+        ) {
+          let marginX = this.getMarginX(layerIndex + 1)
+          let marginY = this.getMarginY(layerIndex + 1)
+          if (isRoot) {
+            let left = node.left + node.width
+            let totalLeft = left + marginX
+            node.children.forEach(cur => {
+              cur.left = totalLeft
+              totalLeft += cur.width + marginX
+            })
+          } else {
+            let totalTop =
+              node.top +
+              node.height +
+              marginY +
+              (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+            node.children.forEach(cur => {
+              cur.left = node.left + node.width * 0.5
+              cur.top = totalTop
+              totalTop +=
+                cur.height +
+                marginY +
+                (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
+            })
+          }
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left、top
+  adjustLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        // 调整left
+        if (node.isRoot) {
+          this.updateBrothersLeft(node)
+        }
+        // 调整top
+        let len = node.children.length
+        if (parent && !parent.isRoot && len > 0) {
+          let marginY = this.getMarginY(layerIndex + 1)
+          let totalHeight =
+            node.children.reduce((h, item) => {
+              return (
+                h +
+                item.height +
+                (this.getNodeActChildrenLength(item) > 0
+                  ? item.expandBtnSize
+                  : 0)
+              )
+            }, 0) +
+            len * marginY
+          this.updateBrothersTop(node, totalHeight)
+        }
+      },
+      (node, parent, isRoot, layerIndex) => {
+        if (
+          parent &&
+          parent.isRoot &&
+          node.dir === CONSTANTS.TIMELINE_DIR.TOP
+        ) {
+          // 遍历二级节点的子节点
+          node.children.forEach(item => {
+            let totalHeight = this.getNodeAreaHeight(item)
+            let _top = item.top
+            item.top =
+              node.top - (item.top - node.top) - totalHeight + node.height
+            this.updateChildren(item.children, 'top', item.top - _top)
+          })
+        }
+      },
+      true
+    )
+  }
+
+  //  递归计算节点的宽度
+  getNodeAreaHeight(node) {
+    let totalHeight = 0
+    let loop = node => {
+      totalHeight +=
+        node.height +
+        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
+        this.getMarginY(node.layerIndex)
+      if (node.children.length) {
+        node.children.forEach(item => {
+          loop(item)
+        })
+      }
+    }
+    loop(node)
+    return totalHeight
+  }
+
+  //  调整兄弟节点的left
+  updateBrothersLeft(node) {
+    let childrenList = node.children
+    let totalAddWidth = 0
+    childrenList.forEach(item => {
+      item.left += totalAddWidth
+      if (item.children && item.children.length) {
+        this.updateChildren(item.children, 'left', totalAddWidth)
+      }
+      // let areaWidth = this.getNodeAreaWidth(item)
+      let { left, right } = this.getNodeBoundaries(item, 'h')
+      let areaWidth = right - left
+      let difference = areaWidth - item.width
+      if (difference > 0) {
+        totalAddWidth += difference
+      }
+    })
+  }
+
+  //  调整兄弟节点的top
+  updateBrothersTop(node, addHeight) {
+    if (node.parent && !node.parent.isRoot) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 下面的节点往下移
+        if (_index > index) {
+          _offset = addHeight
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothersTop(node.parent, addHeight)
+    }
+  }
+
+  //  绘制连线，连接该节点到其子节点
+  renderLine(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    let len = node.children.length
+    if (node.isRoot) {
+      // 当前节点是根节点
+      let prevBother = node
+      // 根节点的子节点是和根节点同一水平线排列
+      node.children.forEach((item, index) => {
+        let x1 = prevBother.left + prevBother.width
+        let x2 = item.left
+        let y = node.top + node.height / 2
+        let path = `M ${x1},${y} L ${x2},${y}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+        prevBother = item
+      })
+    } else {
+      // 当前节点为非根节点
+      let maxy = -Infinity
+      let miny = Infinity
+      let x = node.left + node.width * 0.3
+      node.children.forEach((item, index) => {
+        let y = item.top + item.height / 2
+        if (y > maxy) {
+          maxy = y
+        }
+        if (y < miny) {
+          miny = y
+        }
+        // 水平线
+        let path = `M ${x},${y} L ${item.left},${y}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      })
+      // 竖线
+      if (len > 0) {
+        let line = this.draw.path()
+        expandBtnSize = len > 0 ? expandBtnSize : 0
+        if (
+          node.parent &&
+          node.parent.isRoot &&
+          node.dir === CONSTANTS.TIMELINE_DIR.TOP
+        ) {
+          line.plot(`M ${x},${top} L ${x},${miny}`)
+        } else {
+          line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
+        }
+        node.style.line(line)
+        node._lines.push(line)
+        style && style(line, node)
+      }
+    }
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height, expandBtnSize, isRoot } = node
+    if (!isRoot) {
+      let { translateX, translateY } = btn.transform()
+      if (
+        node.parent &&
+        node.parent.isRoot &&
+        node.dir === CONSTANTS.TIMELINE_DIR.TOP
+      ) {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          -expandBtnSize / 2 - translateY
+        )
+      } else {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          height + expandBtnSize / 2 - translateY
+        )
+      }
+    }
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      top,
+      bottom,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h')
+    let x1 = right + generalizationLineMargin
+    let y1 = top
+    let x2 = right + generalizationLineMargin
+    let y2 = bottom
+    let cx = x1 + 20
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left = right + generalizationNodeMargin
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
+}
+
+export default Timeline
--- a/simple-mind-map/src/layouts/fishboneUtils.js
+++ b/simple-mind-map/src/layouts/fishboneUtils.js
@@ -0,0 +1,216 @@
+import { degToRad } from '../utils/'
+
+export default {
+  top: {
+    renderExpandBtn({
+      node,
+      btn,
+      expandBtnSize,
+      translateX,
+      translateY,
+      width,
+      height
+    }) {
+      if (node.parent && node.parent.isRoot) {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          -expandBtnSize / 2 - translateY
+        )
+      } else {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          height + expandBtnSize / 2 - translateY
+        )
+      }
+    },
+    renderLine({
+      node,
+      line,
+      top,
+      x,
+      lineLength,
+      height,
+      expandBtnSize,
+      maxy,
+      ctx
+    }) {
+      if (node.parent && node.parent.isRoot) {
+        line.plot(
+          `M ${x},${top} L ${x + lineLength},${
+            top - Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
+          }`
+        )
+      } else {
+        line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
+      }
+    },
+    computedLeftTopValue({ layerIndex, node, ctx }) {
+      if (layerIndex >= 1 && node.children) {
+        // 遍历三级及以下节点的子节点
+        let startLeft = node.left + node.width * ctx.childIndent
+        let totalTop =
+          node.top +
+          node.height +
+          (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+        node.children.forEach(item => {
+          item.left = startLeft
+          item.top += totalTop
+          totalTop +=
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+        })
+      }
+    },
+    adjustLeftTopValueBefore({ node, parent, ctx }) {
+      // 调整top
+      let len = node.children.length
+      // 调整三级及以下节点的top
+      if (parent && !parent.isRoot && len > 0) {
+        let totalHeight = node.children.reduce((h, item) => {
+          return (
+            h +
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+          )
+        }, 0)
+        ctx.updateBrothersTop(node, totalHeight)
+      }
+    },
+    adjustLeftTopValueAfter({ parent, node, ctx }) {
+      // 将二级节点的子节点移到上方
+      if (parent && parent.isRoot) {
+        // 遍历二级节点的子节点
+        let totalHeight = node.expandBtnSize
+        node.children.forEach(item => {
+          // 调整top
+          let nodeTotalHeight = ctx.getNodeAreaHeight(item)
+          let _top = item.top
+          let _left = item.left
+          item.top =
+            node.top - (item.top - node.top) - nodeTotalHeight + node.height
+          // 调整left
+          item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
+          totalHeight += nodeTotalHeight
+          // 同步更新后代节点
+          ctx.updateChildrenPro(item.children, {
+            top: item.top - _top,
+            left: item.left - _left
+          })
+        })
+      }
+    }
+  },
+  bottom: {
+    renderExpandBtn({
+      node,
+      btn,
+      expandBtnSize,
+      translateX,
+      translateY,
+      width,
+      height
+    }) {
+      if (node.parent && node.parent.isRoot) {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          height + expandBtnSize / 2 - translateY
+        )
+      } else {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          -expandBtnSize / 2 - translateY
+        )
+      }
+    },
+    renderLine({ node, line, top, x, lineLength, height, miny, ctx }) {
+      if (node.parent && node.parent.isRoot) {
+        line.plot(
+          `M ${x},${top + height} L ${x + lineLength},${
+            top + height + Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
+          }`
+        )
+      } else {
+        line.plot(`M ${x},${top} L ${x},${miny}`)
+      }
+    },
+    computedLeftTopValue({ layerIndex, node, ctx }) {
+      if (layerIndex === 1 && node.children) {
+        // 遍历二级节点的子节点
+        let startLeft = node.left + node.width * ctx.childIndent
+        let totalTop =
+          node.top +
+          node.height +
+          (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+
+        node.children.forEach(item => {
+          item.left = startLeft
+          item.top =
+            totalTop +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+          totalTop +=
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+        })
+      }
+      if (layerIndex > 1 && node.children) {
+        // 遍历三级及以下节点的子节点
+        let startLeft = node.left + node.width * ctx.childIndent
+        let totalTop =
+          node.top -
+          (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+        node.children.forEach(item => {
+          item.left = startLeft
+          item.top = totalTop - item.height
+          totalTop -=
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+        })
+      }
+    },
+    adjustLeftTopValueBefore({ node, ctx, layerIndex }) {
+      // 调整top
+      let len = node.children.length
+      if (layerIndex > 2 && len > 0) {
+        let totalHeight = node.children.reduce((h, item) => {
+          return (
+            h +
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+          )
+        }, 0)
+        ctx.updateBrothersTop(node, -totalHeight)
+      }
+    },
+    adjustLeftTopValueAfter({ parent, node, ctx }) {
+      // 将二级节点的子节点移到上方
+      if (parent && parent.isRoot) {
+        // 遍历二级节点的子节点
+        let totalHeight = 0
+        let totalHeight2 = node.expandBtnSize
+        node.children.forEach(item => {
+          // 调整top
+          let hasChildren = ctx.getNodeActChildrenLength(item) > 0
+          let nodeTotalHeight = ctx.getNodeAreaHeight(item)
+          let offset =
+            hasChildren > 0
+              ? nodeTotalHeight -
+                item.height -
+                (hasChildren ? item.expandBtnSize : 0)
+              : 0
+          let _top = totalHeight + offset
+          let _left = item.left
+          item.top += _top
+          // 调整left
+          item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight2) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
+          totalHeight += offset
+          totalHeight2 += nodeTotalHeight
+          // 同步更新后代节点
+          ctx.updateChildrenPro(item.children, {
+            top: _top,
+            left: item.left - _left
+          })
+        })
+      }
+    }
+  }
+}
--- a/simple-mind-map/src/parse/markdown.js
+++ b/simple-mind-map/src/parse/markdown.js
@@ -0,0 +1,7 @@
+import { transformToMarkdown } from './toMarkdown'
+import { transformMarkdownTo } from './markdownTo'
+
+export default {
+  transformToMarkdown,
+  transformMarkdownTo
+}
--- a/simple-mind-map/src/parse/markdownTo.js
+++ b/simple-mind-map/src/parse/markdownTo.js
@@ -0,0 +1,98 @@
+import { fromMarkdown } from 'mdast-util-from-markdown'
+
+// 处理list的情况
+const handleList = node => {
+  let list = []
+  let walk = (arr, newArr) => {
+    for (let i = 0; i < arr.length; i++) {
+      let cur = arr[i]
+      let node = {}
+      node.data = {
+        // 节点内容
+        text: cur.children[0].children[0].value
+      }
+      node.children = []
+      newArr.push(node)
+      if (cur.children.length > 1) {
+        for (let j = 1; j < cur.children.length; j++) {
+          let cur2 = cur.children[j]
+          if (cur2.type === 'list') {
+            walk(cur2.children, node.children)
+          }
+        }
+      }
+    }
+  }
+  walk(node.children, list)
+  return list
+}
+
+// 将markdown转换成节点树
+export const transformMarkdownTo = async md => {
+  const tree = fromMarkdown(md)
+  let root = {
+    children: []
+  }
+  let childrenQueue = [root.children]
+  let currentChildren = root.children
+  let depthQueue = [-1]
+  let currentDepth = -1
+  for (let i = 0; i < tree.children.length; i++) {
+    let cur = tree.children[i]
+    if (cur.type === 'heading') {
+      if (!cur.children[0]) continue
+      // 创建新节点
+      let node = {}
+      node.data = {
+        // 节点内容
+        text: cur.children[0].value
+      }
+      node.children = []
+      // 如果当前的层级大于上一个节点的层级，那么是其子节点
+      if (cur.depth > currentDepth) {
+        // 添加到上一个节点的子节点列表里
+        currentChildren.push(node)
+        // 更新当前栈和数据
+        childrenQueue.push(node.children)
+        currentChildren = node.children
+        depthQueue.push(cur.depth)
+        currentDepth = cur.depth
+      } else if (cur.depth === currentDepth) {
+        // 如果当前层级等于上一个节点的层级，说明它们是同级节点
+        // 将上一个节点出栈
+        childrenQueue.pop()
+        currentChildren = childrenQueue[childrenQueue.length - 1]
+        depthQueue.pop()
+        currentDepth = depthQueue[depthQueue.length - 1]
+        // 追加到上上个节点的子节点列表里
+        currentChildren.push(node)
+        // 更新当前栈和数据
+        childrenQueue.push(node.children)
+        currentChildren = node.children
+        depthQueue.push(cur.depth)
+        currentDepth = cur.depth
+      } else {
+        // 如果当前层级小于上一个节点的层级，那么一直出栈，直到遇到比当前层级小的节点
+        while (depthQueue.length) {
+          childrenQueue.pop()
+          currentChildren = childrenQueue[childrenQueue.length - 1]
+          depthQueue.pop()
+          currentDepth = depthQueue[depthQueue.length - 1]
+          if (currentDepth < cur.depth) {
+            // 追加到该节点的子节点列表里
+            currentChildren.push(node)
+            // 更新当前栈和数据
+            childrenQueue.push(node.children)
+            currentChildren = node.children
+            depthQueue.push(cur.depth)
+            currentDepth = cur.depth
+            break
+          }
+        }
+      }
+    } else if (cur.type === 'list') {
+      currentChildren.push(...handleList(cur))
+    }
+  }
+  return root.children[0]
+}
--- a/simple-mind-map/src/parse/toMarkdown.js
+++ b/simple-mind-map/src/parse/toMarkdown.js
@@ -0,0 +1,53 @@
+import { walk } from '../utils'
+
+let el = null
+const getText = str => {
+  if (!el) {
+    el = document.createElement('div')
+  }
+  el.innerHTML = str
+  return el.textContent
+}
+
+const getTitleMark = level => {
+  return new Array(level).fill('#').join('')
+}
+
+const getIndentMark = level => {
+  return new Array(level - 6).fill('   ').join('') + '*'
+}
+
+// 转换成markdown格式
+export const transformToMarkdown = root => {
+  let content = ''
+  walk(
+    root,
+    null,
+    (node, parent, isRoot, layerIndex) => {
+      let level = layerIndex + 1
+      let text = node.data.richText ? getText(node.data.text) : node.data.text
+      if (level <= 6) {
+        content += getTitleMark(level)
+      } else {
+        content += getIndentMark(level)
+      }
+      content += ' ' + text
+      // 概要
+      let generalization = node.data.generalization
+      if (generalization && generalization.text) {
+        let generalizationText = generalization.richText
+          ? getText(generalization.text)
+          : generalization.text
+        content += `[${generalizationText}]`
+      }
+      content += '\n\n'
+      // 备注
+      if (node.data.note) {
+        content += node.data.note + '\n\n'
+      }
+    },
+    () => {},
+    true
+  )
+  return content
+}
--- a/simple-mind-map/src/parse/xmind.js
+++ b/simple-mind-map/src/parse/xmind.js
@@ -0,0 +1,164 @@
+import JSZip from 'jszip'
+import xmlConvert from 'xml-js'
+
+//  解析.xmind文件
+const parseXmindFile = file => {
+  return new Promise((resolve, reject) => {
+    JSZip.loadAsync(file).then(
+      async zip => {
+        try {
+          let content = ''
+          if (zip.files['content.json']) {
+            let json = await zip.files['content.json'].async('string')
+            content = transformXmind(json)
+          } else if (zip.files['content.xml']) {
+            let xml = await zip.files['content.xml'].async('string')
+            let json = xmlConvert.xml2json(xml)
+            content = transformOldXmind(json)
+          }
+          if (content) {
+            resolve(content)
+          } else {
+            reject(new Error('解析失败'))
+          }
+        } catch (error) {
+          reject(error)
+        }
+      },
+      e => {
+        reject(e)
+      }
+    )
+  })
+}
+
+//  转换xmind数据
+const transformXmind = content => {
+  let data = JSON.parse(content)[0]
+  let nodeTree = data.rootTopic
+  let newTree = {}
+  let walk = (node, newNode) => {
+    newNode.data = {
+      // 节点内容
+      text: node.title
+    }
+    // 节点备注
+    if (node.notes) {
+      newNode.data.note = (node.notes.realHTML || node.notes.plain).content
+    }
+    // 超链接
+    if (node.href && /^https?:\/\//.test(node.href)) {
+      newNode.data.hyperlink = node.href
+    }
+    // 标签
+    if (node.labels && node.labels.length > 0) {
+      newNode.data.tag = node.labels
+    }
+    // 子节点
+    newNode.children = []
+    if (
+      node.children &&
+      node.children.attached &&
+      node.children.attached.length > 0
+    ) {
+      node.children.attached.forEach(item => {
+        let newChild = {}
+        newNode.children.push(newChild)
+        walk(item, newChild)
+      })
+    }
+  }
+  walk(nodeTree, newTree)
+  return newTree
+}
+
+//  转换旧版xmind数据，xmind8
+const transformOldXmind = content => {
+  let data = JSON.parse(content)
+  let elements = data.elements
+  let root = null
+  let getRoot = arr => {
+    for (let i = 0; i < arr.length; i++) {
+      if (!root && arr[i].name === 'topic') {
+        root = arr[i]
+        return
+      }
+    }
+    arr.forEach(item => {
+      getRoot(item.elements)
+    })
+  }
+  getRoot(elements)
+  let newTree = {}
+  let getItemByName = (arr, name) => {
+    return arr.find(item => {
+      return item.name === name
+    })
+  }
+  let walk = (node, newNode) => {
+    let nodeElements = node.elements
+    newNode.data = {
+      // 节点内容
+      text: getItemByName(nodeElements, 'title').elements[0].text
+    }
+    try {
+      // 节点备注
+      let notesElement = getItemByName(nodeElements, 'notes')
+      if (notesElement) {
+        newNode.data.note =
+          notesElement.elements[0].elements[0].elements[0].text
+      }
+    } catch (error) {
+      console.log(error)
+    }
+    try {
+      // 超链接
+      if (
+        node.attributes &&
+        node.attributes['xlink:href'] &&
+        /^https?:\/\//.test(node.attributes['xlink:href'])
+      ) {
+        newNode.data.hyperlink = node.attributes['xlink:href']
+      }
+    } catch (error) {
+      console.log(error)
+    }
+    try {
+      // 标签
+      let labelsElement = getItemByName(nodeElements, 'labels')
+      if (labelsElement) {
+        newNode.data.tag = labelsElement.elements.map(item => {
+          return item.elements[0].text
+        })
+      }
+    } catch (error) {
+      console.log(error)
+    }
+    // 子节点
+    newNode.children = []
+    let _children = getItemByName(nodeElements, 'children')
+    if (_children && _children.elements && _children.elements.length > 0) {
+      _children.elements.forEach(item => {
+        if (item.name === 'topics') {
+          item.elements.forEach(item2 => {
+            let newChild = {}
+            newNode.children.push(newChild)
+            walk(item2, newChild)
+          })
+        } else {
+          let newChild = {}
+          newNode.children.push(newChild)
+          walk(item, newChild)
+        }
+      })
+    }
+  }
+  walk(root, newTree)
+  return newTree
+}
+
+export default {
+  parseXmindFile,
+  transformXmind,
+  transformOldXmind
+}
--- a/simple-mind-map/src/plugins/AssociativeLine.js
+++ b/simple-mind-map/src/plugins/AssociativeLine.js
@@ -0,0 +1,452 @@
+import { walk, bfsWalk, throttle } from '../utils'
+import { v4 as uuid } from 'uuid'
+import {
+  getAssociativeLineTargetIndex,
+  computeCubicBezierPathPoints,
+  cubicBezierPath,
+  getNodePoint,
+  computeNodePoints,
+  getNodeLinePath
+} from './associativeLine/associativeLineUtils'
+import associativeLineControlsMethods from './associativeLine/associativeLineControls'
+import associativeLineTextMethods from './associativeLine/associativeLineText'
+
+// 关联线类
+class AssociativeLine {
+  constructor(opt = {}) {
+    this.mindMap = opt.mindMap
+    this.draw = this.mindMap.draw
+    // 当前所有连接线
+    this.lineList = []
+    // 当前激活的连接线
+    this.activeLine = null
+    // 当前正在创建连接线
+    this.isCreatingLine = false // 是否正在创建连接线中
+    this.creatingStartNode = null // 起始节点
+    this.creatingLine = null // 创建过程中的连接线
+    this.overlapNode = null // 创建过程中的目标节点
+    // 是否有节点正在被拖拽
+    this.isNodeDragging = false
+    // 箭头图标
+    this.markerPath = null
+    this.marker = this.createMarker()
+    // 控制点
+    this.controlLine1 = null
+    this.controlLine2 = null
+    this.controlPoint1 = null
+    this.controlPoint2 = null
+    this.controlPointDiameter = 10
+    this.isControlPointMousedown = false
+    this.mousedownControlPointKey = ''
+    this.controlPointMousemoveState = {
+      pos: null,
+      startPoint: null,
+      endPoint: null,
+      targetIndex: ''
+    }
+    // 节流一下，不然很卡
+    this.checkOverlapNode = throttle(this.checkOverlapNode, 100, this)
+    // 控制点相关方法
+    Object.keys(associativeLineControlsMethods).forEach(item => {
+      this[item] = associativeLineControlsMethods[item].bind(this)
+    })
+    // 关联线文字相关方法
+    Object.keys(associativeLineTextMethods).forEach(item => {
+      this[item] = associativeLineTextMethods[item].bind(this)
+    })
+    this.bindEvent()
+  }
+
+  // 监听事件
+  bindEvent() {
+    // 节点树渲染完毕后渲染连接线
+    this.renderAllLines = this.renderAllLines.bind(this)
+    this.mindMap.on('node_tree_render_end', this.renderAllLines)
+    // 状态改变后重新渲染连接线
+    this.mindMap.on('data_change', this.renderAllLines)
+    // 监听画布和节点点击事件，用于清除当前激活的连接线
+    this.mindMap.on('draw_click', () => {
+      if (this.isControlPointMousedown) {
+        return
+      }
+      this.clearActiveLine()
+    })
+    this.mindMap.on('node_click', node => {
+      if (this.isCreatingLine) {
+        this.completeCreateLine(node)
+      } else {
+        this.clearActiveLine()
+      }
+    })
+    // 注册删除快捷键
+    this.mindMap.keyCommand.addShortcut(
+      'Del|Backspace',
+      this.removeLine.bind(this)
+    )
+    // 注册添加连接线的命令
+    this.mindMap.command.add('ADD_ASSOCIATIVE_LINE', this.addLine.bind(this))
+    // 监听鼠标移动事件
+    this.mindMap.on('mousemove', this.onMousemove.bind(this))
+    // 节点拖拽事件
+    this.mindMap.on('node_dragging', this.onNodeDragging.bind(this))
+    this.mindMap.on('node_dragend', this.onNodeDragend.bind(this))
+    // 拖拽控制点
+    this.mindMap.on('mouseup', this.onControlPointMouseup.bind(this))
+    // 缩放事件
+    this.mindMap.on('scale', this.onScale)
+  }
+
+  // 创建箭头
+  createMarker() {
+    return this.draw.marker(20, 20, add => {
+      add.ref(2, 5)
+      add.size(10, 10)
+      add.attr('orient', 'auto-start-reverse')
+      this.markerPath = add.path('M0,0 L2,5 L0,10 L10,5 Z')
+    })
+  }
+
+  // 渲染所有连线
+  renderAllLines() {
+    // 先移除
+    this.removeAllLines()
+    this.removeControls()
+    this.clearActiveLine()
+    let tree = this.mindMap.renderer.root
+    if (!tree) return
+    let idToNode = new Map()
+    let nodeToIds = new Map()
+    walk(
+      tree,
+      null,
+      cur => {
+        if (!cur) return
+        let data = cur.nodeData.data
+        if (
+          data.associativeLineTargets &&
+          data.associativeLineTargets.length > 0
+        ) {
+          nodeToIds.set(cur, data.associativeLineTargets)
+        }
+        if (data.id) {
+          idToNode.set(data.id, cur)
+        }
+      },
+      () => {},
+      true,
+      0
+    )
+    nodeToIds.forEach((ids, node) => {
+      ids.forEach(id => {
+        let toNode = idToNode.get(id)
+        if (!node || !toNode) return
+        let [startPoint, endPoint] = computeNodePoints(node, toNode)
+        this.drawLine(startPoint, endPoint, node, toNode)
+      })
+    })
+  }
+
+  // 绘制连接线
+  drawLine(startPoint, endPoint, node, toNode) {
+    let {
+      associativeLineWidth,
+      associativeLineColor,
+      associativeLineActiveWidth,
+      associativeLineActiveColor
+    } = this.mindMap.themeConfig
+    // 箭头
+    this.markerPath
+      .stroke({ color: associativeLineColor })
+      .fill({ color: associativeLineColor })
+    // 路径
+    let { path: pathStr, controlPoints } = getNodeLinePath(
+      startPoint,
+      endPoint,
+      node,
+      toNode
+    )
+    // 虚线
+    let path = this.draw.path()
+    path
+      .stroke({
+        width: associativeLineWidth,
+        color: associativeLineColor,
+        dasharray: [6, 4]
+      })
+      .fill({ color: 'none' })
+    path.plot(pathStr)
+    path.marker('end', this.marker)
+    // 不可见的点击线
+    let clickPath = this.draw.path()
+    clickPath
+      .stroke({ width: associativeLineActiveWidth, color: 'transparent' })
+      .fill({ color: 'none' })
+    clickPath.plot(pathStr)
+    // 文字
+    let text = this.createText({ path, clickPath, node, toNode, startPoint, endPoint, controlPoints })
+    // 点击事件
+    clickPath.click(e => {
+      e.stopPropagation()
+      this.setActiveLine({ path, clickPath, text, node, toNode, startPoint, endPoint, controlPoints })
+    })
+    // 渲染关联线文字
+    this.renderText(this.getText(node, toNode), path, text)
+    this.lineList.push([path, clickPath, text, node, toNode])
+  }
+
+  // 激活某根关联线
+  setActiveLine({ path, clickPath, text, node, toNode, startPoint, endPoint, controlPoints }) {
+    let {
+      associativeLineActiveColor
+    } = this.mindMap.themeConfig
+    // 如果当前存在激活节点，那么取消激活节点
+    if (this.mindMap.renderer.activeNodeList.length > 0) {
+      this.clearActiveNodes()
+    } else {
+      // 否则清除当前的关联线的激活状态，如果有的话
+      this.clearActiveLine()
+      // 保存当前激活的关联线信息
+      this.activeLine = [path, clickPath, text, node, toNode]
+      // 让不可见的点击线显示
+      clickPath.stroke({ color: associativeLineActiveColor })
+      // 如果没有输入过关联线文字，那么显示默认文字
+      if (!this.getText(node, toNode)) {
+        this.renderText(this.mindMap.opt.defaultAssociativeLineText, path, text)
+      }
+      // 渲染控制点和连线
+      this.renderControls(
+        startPoint,
+        endPoint,
+        controlPoints[0],
+        controlPoints[1]
+      )
+      this.mindMap.emit('associative_line_click', path, clickPath, node, toNode)
+    }
+  }
+
+  // 移除所有连接线
+  removeAllLines() {
+    this.lineList.forEach(line => {
+      line[0].remove()
+      line[1].remove()
+      line[2].remove()
+    })
+    this.lineList = []
+  }
+
+  // 从当前激活节点开始创建连接线
+  createLineFromActiveNode() {
+    if (this.mindMap.renderer.activeNodeList.length <= 0) return
+    let node = this.mindMap.renderer.activeNodeList[0]
+    this.createLine(node)
+  }
+
+  // 创建连接线
+  createLine(fromNode) {
+    let { associativeLineWidth, associativeLineColor } =
+      this.mindMap.themeConfig
+    if (this.isCreatingLine || !fromNode) return
+    this.isCreatingLine = true
+    this.creatingStartNode = fromNode
+    this.creatingLine = this.draw.path()
+    this.creatingLine
+      .stroke({
+        width: associativeLineWidth,
+        color: associativeLineColor,
+        dasharray: [6, 4]
+      })
+      .fill({ color: 'none' })
+    this.creatingLine.marker('end', this.marker)
+  }
+
+  // 鼠标移动事件
+  onMousemove(e) {
+    this.onControlPointMousemove(e)
+    this.updateCreatingLine(e)
+  }
+
+  // 更新创建过程中的连接线
+  updateCreatingLine(e) {
+    if (!this.isCreatingLine) return
+    let { x, y } = this.getTransformedEventPos(e)
+    let startPoint = getNodePoint(this.creatingStartNode)
+    let offsetX = x > startPoint.x ? -10 : 10
+    let pathStr = cubicBezierPath(startPoint.x, startPoint.y, x + offsetX, y)
+    this.creatingLine.plot(pathStr)
+    this.checkOverlapNode(x, y)
+  }
+
+  // 获取转换后的鼠标事件对象的坐标
+  getTransformedEventPos(e) {
+    let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+    let { scaleX, scaleY, translateX, translateY } =
+      this.mindMap.draw.transform()
+    return {
+      x: (x - translateX) / scaleX,
+      y: (y - translateY) / scaleY
+    }
+  }
+
+  // 检测当前移动到的目标节点
+  checkOverlapNode(x, y) {
+    this.overlapNode = null
+    bfsWalk(this.mindMap.renderer.root, node => {
+      if (node.nodeData.data.isActive) {
+        this.mindMap.renderer.setNodeActive(node, false)
+      }
+      if (node === this.creatingStartNode || this.overlapNode) {
+        return
+      }
+      let { left, top, width, height } = node
+      let right = left + width
+      let bottom = top + height
+      if (x >= left && x <= right && y >= top && y <= bottom) {
+        this.overlapNode = node
+      }
+    })
+    if (this.overlapNode && !this.overlapNode.nodeData.data.isActive) {
+      this.mindMap.renderer.setNodeActive(this.overlapNode, true)
+    }
+  }
+
+  // 完成创建连接线
+  completeCreateLine(node) {
+    if (this.creatingStartNode === node) return
+    this.addLine(this.creatingStartNode, node)
+    if (this.overlapNode && this.overlapNode.nodeData.data.isActive) {
+      this.mindMap.renderer.setNodeActive(this.overlapNode, false)
+    }
+    this.isCreatingLine = false
+    this.creatingStartNode = null
+    this.creatingLine.remove()
+    this.creatingLine = null
+    this.overlapNode = null
+  }
+
+  // 添加连接线
+  addLine(fromNode, toNode) {
+    if (!fromNode || !toNode) return
+    // 目标节点如果没有id，则生成一个id
+    let id = toNode.nodeData.data.id
+    if (!id) {
+      id = uuid()
+      this.mindMap.execCommand('SET_NODE_DATA', toNode, {
+        id
+      })
+    }
+    // 将目标节点id保存起来
+    let list = fromNode.nodeData.data.associativeLineTargets || []
+    list.push(id)
+    // 保存控制点
+    let [startPoint, endPoint] = computeNodePoints(fromNode, toNode)
+    let controlPoints = computeCubicBezierPathPoints(
+      startPoint.x,
+      startPoint.y,
+      endPoint.x,
+      endPoint.y
+    )
+    let offsetList =
+      fromNode.nodeData.data.associativeLineTargetControlOffsets || []
+    // 保存的实际是控制点和端点的差值，否则当节点位置改变了，控制点还是原来的位置，连线就不对了
+    offsetList[list.length - 1] = [
+      {
+        x: controlPoints[0].x - startPoint.x,
+        y: controlPoints[0].y - startPoint.y
+      },
+      {
+        x: controlPoints[1].x - endPoint.x,
+        y: controlPoints[1].y - endPoint.y
+      }
+    ]
+    this.mindMap.execCommand('SET_NODE_DATA', fromNode, {
+      associativeLineTargets: list,
+      associativeLineTargetControlOffsets: offsetList
+    })
+  }
+
+  // 删除连接线
+  removeLine() {
+    if (!this.activeLine) return
+    let [, , , node, toNode] = this.activeLine
+    this.removeControls()
+    let { associativeLineTargets, associativeLineTargetControlOffsets, associativeLineText } =
+      node.nodeData.data
+    let targetIndex = getAssociativeLineTargetIndex(node, toNode)
+    // 更新关联线文本数据
+    let newAssociativeLineText = {}
+    if (associativeLineText) {
+      Object.keys(associativeLineText).forEach((item) => {
+        if (item !== toNode.nodeData.data.id) {
+          newAssociativeLineText[item] = associativeLineText[item]
+        }
+      })
+    }
+    this.mindMap.execCommand('SET_NODE_DATA', node, {
+      // 目标
+      associativeLineTargets: associativeLineTargets.filter((_, index) => {
+        return index !== targetIndex
+      }),
+      // 偏移量
+      associativeLineTargetControlOffsets: associativeLineTargetControlOffsets
+        ? associativeLineTargetControlOffsets.filter((_, index) => {
+            return index !== targetIndex
+          })
+        : [],
+      // 文本
+      associativeLineText: newAssociativeLineText
+    })
+  }
+
+  // 清除当前激活的节点
+  clearActiveNodes() {
+    if (this.mindMap.renderer.activeNodeList.length > 0) {
+      this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+    }
+  }
+
+  // 清除激活的线
+  clearActiveLine() {
+    if (this.activeLine) {
+      let [, clickPath, text, node, toNode] = this.activeLine
+      clickPath.stroke({
+        color: 'transparent'
+      })
+      // 隐藏关联线文本编辑框
+      this.hideEditTextBox()
+      // 如果当前关联线没有文字，则清空文字节点
+      if (!this.getText(node, toNode)) {
+        text.clear()
+      }
+      this.activeLine = null
+      this.removeControls()
+    }
+  }
+
+  // 处理节点正在拖拽事件
+  onNodeDragging() {
+    if (this.isNodeDragging) return
+    this.isNodeDragging = true
+    this.lineList.forEach(line => {
+      line[0].hide()
+      line[1].hide()
+      line[2].hide()
+    })
+    this.hideControls()
+  }
+
+  // 处理节点拖拽完成事件
+  onNodeDragend() {
+    if (!this.isNodeDragging) return
+    this.lineList.forEach(line => {
+      line[0].show()
+      line[1].show()
+      line[2].show()
+    })
+    this.showControls()
+    this.isNodeDragging = false
+  }
+}
+
+AssociativeLine.instanceName = 'associativeLine'
+
+export default AssociativeLine
--- a/simple-mind-map/src/plugins/Drag.js
+++ b/simple-mind-map/src/plugins/Drag.js
@@ -0,0 +1,320 @@
+import { bfsWalk, throttle } from '../utils'
+import Base from '../layouts/Base'
+
+//  节点拖动类
+
+class Drag extends Base {
+  //  构造函数
+  constructor({ mindMap }) {
+    super(mindMap.renderer)
+    this.mindMap = mindMap
+    this.reset()
+    this.bindEvent()
+  }
+
+  //  复位
+  reset() {
+    // 当前拖拽节点
+    this.node = null
+    // 当前重叠节点
+    this.overlapNode = null
+    // 当前上一个同级节点
+    this.prevNode = null
+    // 当前下一个同级节点
+    this.nextNode = null
+    // 画布的变换数据
+    this.drawTransform = null
+    // 克隆节点
+    this.clone = null
+    // 连接线
+    this.line = null
+    // 同级位置占位符
+    this.placeholder = null
+    // 鼠标按下位置和节点左上角的偏移量
+    this.offsetX = 0
+    this.offsetY = 0
+    // 克隆节点左上角的坐标
+    this.cloneNodeLeft = 0
+    this.cloneNodeTop = 0
+    // 当前鼠标是否按下
+    this.isMousedown = false
+    // 拖拽的鼠标位置变量
+    this.mouseDownX = 0
+    this.mouseDownY = 0
+    this.mouseMoveX = 0
+    this.mouseMoveY = 0
+    // 鼠标移动的距离距鼠标按下的位置距离多少以上才认为是拖动事件
+    this.checkDragOffset = 10
+  }
+
+  //  绑定事件
+  bindEvent() {
+    this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
+    this.mindMap.on('node_mousedown', (node, e) => {
+      if (this.mindMap.opt.readonly || node.isGeneralization) {
+        return
+      }
+      if (e.which !== 1 || node.isRoot) {
+        return
+      }
+      e.preventDefault()
+      // 计算鼠标按下的位置距离节点左上角的距离
+      this.drawTransform = this.mindMap.draw.transform()
+      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+      this.offsetX = x - (node.left * scaleX + translateX)
+      this.offsetY = y - (node.top * scaleY + translateY)
+      this.node = node
+      this.isMousedown = true
+      this.mouseDownX = x
+      this.mouseDownY = y
+    })
+    this.mindMap.on('mousemove', e => {
+      if (this.mindMap.opt.readonly) {
+        return
+      }
+      if (!this.isMousedown) {
+        return
+      }
+      this.mindMap.emit('node_dragging', this.node)
+      e.preventDefault()
+      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+      this.mouseMoveX = x
+      this.mouseMoveY = y
+      if (
+        Math.abs(x - this.mouseDownX) <= this.checkDragOffset &&
+        Math.abs(y - this.mouseDownY) <= this.checkDragOffset &&
+        !this.node.isDrag
+      ) {
+        return
+      }
+      this.mindMap.renderer.clearAllActive()
+      this.onMove(x, y)
+    })
+    this.onMouseup = this.onMouseup.bind(this)
+    this.mindMap.on('node_mouseup', this.onMouseup)
+    this.mindMap.on('mouseup', this.onMouseup)
+  }
+
+  //  鼠标松开事件
+  onMouseup(e) {
+    if (!this.isMousedown) {
+      return
+    }
+    this.isMousedown = false
+    let _nodeIsDrag = this.node.isDrag
+    this.node.isDrag = false
+    this.node.show()
+    this.removeCloneNode()
+    // 存在重叠子节点，则移动作为其子节点
+    if (this.overlapNode) {
+      this.mindMap.renderer.setNodeActive(this.overlapNode, false)
+      this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode)
+    } else if (this.prevNode) {
+      // 存在前一个相邻节点，作为其下一个兄弟节点
+      this.mindMap.renderer.setNodeActive(this.prevNode, false)
+      this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode)
+    } else if (this.nextNode) {
+      // 存在下一个相邻节点，作为其前一个兄弟节点
+      this.mindMap.renderer.setNodeActive(this.nextNode, false)
+      this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
+    } else if (_nodeIsDrag && this.mindMap.opt.enableFreeDrag) {
+      // 自定义位置
+      let { x, y } = this.mindMap.toPos(
+        e.clientX - this.offsetX,
+        e.clientY - this.offsetY
+      )
+      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+      x = (x - translateX) / scaleX
+      y = (y - translateY) / scaleY
+      this.node.left = x
+      this.node.top = y
+      this.node.customLeft = x
+      this.node.customTop = y
+      this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y)
+      this.mindMap.render()
+    }
+    this.reset()
+    this.mindMap.emit('node_dragend')
+  }
+
+  //  创建克隆节点
+  createCloneNode() {
+    if (!this.clone) {
+      // 节点
+      this.clone = this.node.group.clone()
+      this.clone.opacity(0.5)
+      this.clone.css('z-index', 99999)
+      this.node.isDrag = true
+      this.node.hide()
+      // 连接线
+      this.line = this.draw.path()
+      this.line.opacity(0.5)
+      this.node.styleLine(this.line, this.node)
+      // 同级位置占位符
+      this.placeholder = this.draw.rect().fill({
+        color: this.node.style.merge('lineColor', true)
+      })
+      this.mindMap.draw.add(this.clone)
+    }
+  }
+
+  //  移除克隆节点
+  removeCloneNode() {
+    if (!this.clone) {
+      return
+    }
+    this.clone.remove()
+    this.line.remove()
+    this.placeholder.remove()
+  }
+
+  //  拖动中
+  onMove(x, y) {
+    if (!this.isMousedown) {
+      return
+    }
+    this.createCloneNode()
+    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+    this.cloneNodeLeft = x - this.offsetX
+    this.cloneNodeTop = y - this.offsetY
+    x = (this.cloneNodeLeft - translateX) / scaleX
+    y = (this.cloneNodeTop - translateY) / scaleY
+    let t = this.clone.transform()
+    this.clone.translate(x - t.translateX, y - t.translateY)
+    // 连接线
+    let parent = this.node.parent
+    this.line.plot(
+      this.quadraticCurvePath(
+        parent.left + parent.width / 2,
+        parent.top + parent.height / 2,
+        x + this.node.width / 2,
+        y + this.node.height / 2
+      )
+    )
+    this.checkOverlapNode()
+  }
+
+  //  检测重叠节点
+  checkOverlapNode() {
+    if (!this.drawTransform) {
+      return
+    }
+    let x = this.mouseMoveX
+    let y = this.mouseMoveY
+    this.overlapNode = null
+    this.prevNode = null
+    this.nextNode = null
+    this.placeholder.size(0, 0)
+    bfsWalk(this.mindMap.renderer.root, node => {
+      if (node.nodeData.data.isActive) {
+        this.mindMap.renderer.setNodeActive(node, false)
+      }
+      if (node === this.node || this.node.isParent(node)) {
+        return
+      }
+      if (this.overlapNode || (this.prevNode && this.nextNode)) {
+        return
+      }
+      let nodeRect = this.getNodeRect(node)
+      let oneFourthHeight = nodeRect.height / 4
+      // 前一个和后一个节点
+      let checkList = node.parent ? node.parent.children.filter((item) => {
+        return item !== this.node
+      }) : []
+      let index = checkList.findIndex((item) => {
+        return item === node
+      })
+      let prevBrother = null
+      let nextBrother = null
+      if (index !== -1) {
+        if (index - 1 >= 0) {
+          prevBrother = checkList[index - 1]
+        }
+        if (index + 1 <= checkList.length - 1) {
+          nextBrother = checkList[index + 1]
+        }
+      }
+      // 和前一个兄弟节点的距离
+      let prevBrotherOffset = 0
+      if (prevBrother) {
+        let prevNodeRect = this.getNodeRect(prevBrother)  
+        prevBrotherOffset = nodeRect.top - prevNodeRect.bottom
+        // 间距小于10就当它不存在
+        prevBrotherOffset = prevBrotherOffset >= 10 ? prevBrotherOffset / 2 : 0
+      } else {
+        // 没有前一个兄弟节点，那么假设和前一个节点的距离为20
+        prevBrotherOffset = 10
+      }
+      // 和后一个兄弟节点的距离
+      let nextBrotherOffset = 0
+      if (nextBrother) {
+        let nextNodeRect = this.getNodeRect(nextBrother)
+        nextBrotherOffset = nextNodeRect.top - nodeRect.bottom
+        nextBrotherOffset = nextBrotherOffset >= 10 ? nextBrotherOffset / 2 : 0
+      } else {
+        nextBrotherOffset = 10
+      }
+      if (nodeRect.left <= x && nodeRect.right >= x) {
+        // 检测兄弟节点位置
+        if (!this.overlapNode && !this.prevNode && !this.nextNode && !node.isRoot) {
+          let checkIsPrevNode = nextBrotherOffset > 0 ? // 距离下一个兄弟节点的距离大于0
+            y > nodeRect.bottom && y <= (nodeRect.bottom + nextBrotherOffset) : // 那么在当前节点外底部判断
+            y >= nodeRect.bottom - oneFourthHeight && y <= nodeRect.bottom // 否则在当前节点内底部1/4区间判断
+          let checkIsNextNode = prevBrotherOffset > 0 ? // 距离上一个兄弟节点的距离大于0
+            y < nodeRect.top && y >= (nodeRect.top - prevBrotherOffset) : // 那么在当前节点外底部判断
+            y >= nodeRect.top && y <= nodeRect.top + oneFourthHeight
+          if (checkIsPrevNode) {
+            this.prevNode = node
+            let size = nextBrotherOffset > 0 ? nextBrotherOffset : 5
+            this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originBottom)
+          } else if (checkIsNextNode) {
+            this.nextNode = node
+            let size = prevBrotherOffset > 0 ? prevBrotherOffset : 5
+            this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originTop - size)
+          }
+        }
+        // 检测是否重叠
+        if (!this.overlapNode && !this.prevNode && !this.nextNode) {
+          if (
+            nodeRect.top + (prevBrotherOffset > 0 ? 0 : oneFourthHeight) <= y &&
+            nodeRect.bottom - (nextBrotherOffset > 0 ? 0 : oneFourthHeight) >= y
+          ) {
+            this.overlapNode = node
+          }
+        }
+      }
+    })
+    if (this.overlapNode) {
+      this.mindMap.renderer.setNodeActive(this.overlapNode, true)
+    }
+  }
+
+  // 计算节点的位置尺寸信息
+  getNodeRect(node) {
+    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+    let { left, top, width, height } = node
+    let originLeft = left
+    let originTop = top
+    let originBottom = top + height
+    let right = (left + width) * scaleX + translateX
+    let bottom = (top + height) * scaleY + translateY
+    left = left * scaleX + translateX
+    top = top * scaleY + translateY
+    return {
+      width,
+      height,
+      left,
+      top,
+      right,
+      bottom,
+      originLeft,
+      originTop,
+      originBottom
+    }
+  }
+}
+
+Drag.instanceName = 'drag'
+
+export default Drag
--- a/simple-mind-map/src/plugins/Export.js
+++ b/simple-mind-map/src/plugins/Export.js
@@ -0,0 +1,234 @@
+import { imgToDataUrl, downloadFile, readBlob } from '../utils'
+import { SVG } from '@svgdotjs/svg.js'
+import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas'
+import { transformToMarkdown } from '../parse/toMarkdown'
+
+//  导出类
+class Export {
+  //  构造函数
+  constructor(opt) {
+    this.mindMap = opt.mindMap
+    this.exportPadding = this.mindMap.opt.exportPadding
+  }
+
+  //  导出
+  async export(type, isDownload = true, name = '思维导图', ...args) {
+    if (this[type]) {
+      let result = await this[type](name, ...args)
+      if (isDownload && type !== 'pdf') {
+        downloadFile(result, name + '.' + type)
+      }
+      return result
+    } else {
+      return null
+    }
+  }
+
+  //  获取svg数据
+  async getSvgData() {
+    let { exportPaddingX, exportPaddingY } = this.mindMap.opt
+    let { svg, svgHTML } = this.mindMap.getSvgData({
+      paddingX: exportPaddingX,
+      paddingY: exportPaddingY
+    })
+    // 把图片的url转换成data:url类型，否则导出会丢失图片
+    let imageList = svg.find('image')
+    let task = imageList.map(async item => {
+      let imgUlr = item.attr('href') || item.attr('xlink:href')
+      let imgData = await imgToDataUrl(imgUlr)
+      item.attr('href', imgData)
+    })
+    await Promise.all(task)
+    if (imageList.length > 0) {
+      svgHTML = svg.svg()
+    }
+    return {
+      node: svg,
+      str: svgHTML
+    }
+  }
+
+  //   svg转png
+  svgToPng(svgSrc, transparent) {
+    return new Promise((resolve, reject) => {
+      const img = new Image()
+      // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
+      img.setAttribute('crossOrigin', 'anonymous')
+      img.onload = async () => {
+        try {
+          let canvas = document.createElement('canvas')
+          canvas.width = img.width + this.exportPadding * 2
+          canvas.height = img.height + this.exportPadding * 2
+          let ctx = canvas.getContext('2d')
+          // 绘制背景
+          if (!transparent) {
+            await this.drawBackgroundToCanvas(ctx, canvas.width, canvas.height)
+          }
+          // 图片绘制到canvas里
+          ctx.drawImage(
+            img,
+            0,
+            0,
+            img.width,
+            img.height,
+            this.exportPadding,
+            this.exportPadding,
+            img.width,
+            img.height
+          )
+          resolve(canvas.toDataURL())
+        } catch (error) {
+          reject(error)
+        }
+      }
+      img.onerror = e => {
+        reject(e)
+      }
+      img.src = svgSrc
+    })
+  }
+
+  //  在canvas上绘制思维导图背景
+  drawBackgroundToCanvas(ctx, width, height) {
+    return new Promise((resolve, reject) => {
+      let {
+        backgroundColor = '#fff',
+        backgroundImage,
+        backgroundRepeat = 'no-repeat',
+        backgroundPosition = 'center center',
+        backgroundSize = 'cover',
+      } = this.mindMap.themeConfig
+      // 背景颜色
+      ctx.save()
+      ctx.rect(0, 0, width, height)
+      ctx.fillStyle = backgroundColor
+      ctx.fill()
+      ctx.restore()
+      // 背景图片
+      if (backgroundImage && backgroundImage !== 'none') {
+        ctx.save()
+        drawBackgroundImageToCanvas(ctx, width, height, backgroundImage, {
+          backgroundRepeat,
+          backgroundPosition,
+          backgroundSize
+        }, (err) => {
+          if (err) {
+            reject(err)
+          } else {
+            resolve()
+          }
+          ctx.restore()
+        })
+      } else {
+        resolve()
+      }
+    })
+  }
+
+  //  在svg上绘制思维导图背景
+  drawBackgroundToSvg(svg) {
+    return new Promise(async resolve => {
+      let {
+        backgroundColor = '#fff',
+        backgroundImage,
+        backgroundRepeat = 'repeat'
+      } = this.mindMap.themeConfig
+      // 背景颜色
+      svg.css('background-color', backgroundColor)
+      // 背景图片
+      if (backgroundImage && backgroundImage !== 'none') {
+        let imgDataUrl = await imgToDataUrl(backgroundImage)
+        svg.css('background-image', `url(${imgDataUrl})`)
+        svg.css('background-repeat', backgroundRepeat)
+        resolve()
+      } else {
+        resolve()
+      }
+    })
+  }
+
+  //  导出为png
+  /**
+   * 方法1.把svg的图片都转化成data:url格式，再转换
+   * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
+   */
+  async png(name, transparent = false) {
+    let { node, str } = await this.getSvgData()
+    // 如果开启了富文本，则使用htmltocanvas转换为图片
+    if (this.mindMap.richText) {
+      let res =  await this.mindMap.richText.handleExportPng(node.node)
+      let imgDataUrl = await this.svgToPng(res, transparent)
+      return imgDataUrl
+    }
+    // 转换成blob数据
+    let blob = new Blob([str], {
+      type: 'image/svg+xml'
+    })
+    // 转换成data:url数据
+    let svgUrl = await readBlob(blob)
+    // 绘制到canvas上
+    let res = await this.svgToPng(svgUrl, transparent)
+    return res
+  }
+
+  //  导出为pdf
+  async pdf(name) {
+    if (!this.mindMap.doExportPDF) {
+      throw new Error('请注册ExportPDF插件')
+    }
+    let img = await this.png()
+    this.mindMap.doExportPDF.pdf(name, img)
+  }
+
+  //  导出为svg
+  // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入
+  async svg(name, plusCssText) {
+    let { node } = await this.getSvgData()
+    // 开启了节点富文本编辑
+    if (this.mindMap.richText) {
+      if (plusCssText) {
+        let foreignObjectList = node.find('foreignObject')
+        if (foreignObjectList.length > 0) {
+          foreignObjectList[0].add(SVG(`<style>${plusCssText}</style>`))
+        }
+      }
+    }
+    node.first().before(SVG(`<title>${name}</title>`))
+    await this.drawBackgroundToSvg(node)
+    let str = node.svg()
+    // 转换成blob数据
+    let blob = new Blob([str], {
+      type: 'image/svg+xml'
+    })
+    let res = await readBlob(blob)
+    return res
+  }
+
+  //  导出为json
+  async json(name, withConfig = true) {
+    let data = this.mindMap.getData(withConfig)
+    let str = JSON.stringify(data)
+    let blob = new Blob([str])
+    let res = await readBlob(blob)
+    return res
+  }
+
+  //  专有文件，其实就是json文件
+  async smm(name, withConfig) {
+    let res = await this.json(name, withConfig)
+    return res
+  }
+
+  // markdown文件
+  async md() {
+    let data = this.mindMap.getData()
+    let content = transformToMarkdown(data)
+    let blob = new Blob([content])
+    let res = await readBlob(blob)
+    return res
+  }
+}
+
+Export.instanceName = 'doExport'
+
+export default Export
--- a/simple-mind-map/src/plugins/ExportPDF.js
+++ b/simple-mind-map/src/plugins/ExportPDF.js
@@ -0,0 +1,44 @@
+import JsPDF from 'jspdf'
+
+//  导出PDF类，需要通过Export插件使用
+class ExportPDF {
+  //  构造函数
+  constructor(opt) {
+    this.mindMap = opt.mindMap
+  }
+
+  //  导出为pdf
+  pdf(name, img) {
+    let pdf = new JsPDF('', 'pt', 'a4')
+    let a4Width = 595
+    let a4Height = 841
+    let a4Ratio = a4Width / a4Height
+    let image = new Image()
+    image.onload = () => {
+      let imageWidth = image.width
+      let imageHeight = image.height
+      let imageRatio = imageWidth / imageHeight
+      let w, h
+      if (imageWidth <= a4Width && imageHeight <= a4Height) {
+        // 使用图片原始宽高
+        w = imageWidth
+        h = imageHeight
+      } else if (a4Ratio > imageRatio) {
+        // 以a4Height为高度，缩放图片宽度
+        w = imageRatio * a4Height
+        h = a4Height
+      } else {
+        // 以a4Width为宽度，缩放图片高度
+        w = a4Width
+        h = a4Width / imageRatio
+      }
+      pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h)
+      pdf.save(name)
+    }
+    image.src = img
+  }
+}
+
+ExportPDF.instanceName = 'doExportPDF'
+
+export default ExportPDF
--- a/simple-mind-map/src/plugins/KeyboardNavigation.js
+++ b/simple-mind-map/src/plugins/KeyboardNavigation.js
@@ -0,0 +1,237 @@
+import { bfsWalk } from '../utils'
+import { CONSTANTS } from '../constants/constant'
+
+//  键盘导航类
+class KeyboardNavigation {
+  //  构造函数
+  constructor(opt) {
+    this.opt = opt
+    this.mindMap = opt.mindMap
+    this.onKeyup = this.onKeyup.bind(this)
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.LEFT, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.LEFT)
+    })
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.UP, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.UP)
+    })
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.RIGHT, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.RIGHT)
+    })
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.DOWN, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.DOWN)
+    })
+  }
+
+  //  处理按键事件
+  onKeyup(dir) {
+    if (this.mindMap.renderer.activeNodeList.length > 0) {
+      this.focus(dir)
+    } else {
+      let root = this.mindMap.renderer.root
+      this.mindMap.renderer.moveNodeToCenter(root)
+      root.active()
+    }
+  }
+
+  //  聚焦到下一个节点
+  focus(dir) {
+    // 当前聚焦的节点
+    let currentActiveNode = this.mindMap.renderer.activeNodeList[0]
+    // 当前聚焦节点的位置信息
+    let currentActiveNodeRect = this.getNodeRect(currentActiveNode)
+    // 寻找的下一个聚焦节点
+    let targetNode = null
+    let targetDis = Infinity
+    // 保存并维护距离最近的节点
+    let checkNodeDis = (rect, node) => {
+      let dis = this.getDistance(currentActiveNodeRect, rect)
+      if (dis < targetDis) {
+        targetNode = node
+        targetDis = dis
+      }
+    }
+
+    // 第一优先级：阴影算法
+    this.getFocusNodeByShadowAlgorithm({
+      currentActiveNode,
+      currentActiveNodeRect,
+      dir,
+      checkNodeDis
+    })
+
+    // 第二优先级：区域算法
+    if (!targetNode) {
+      this.getFocusNodeByAreaAlgorithm({
+        currentActiveNode,
+        currentActiveNodeRect,
+        dir,
+        checkNodeDis
+      })
+    }
+
+    // 第三优先级：简单算法
+    if (!targetNode) {
+      this.getFocusNodeBySimpleAlgorithm({
+        currentActiveNode,
+        currentActiveNodeRect,
+        dir,
+        checkNodeDis
+      })
+    }
+
+    // 找到了则让目标节点聚焦
+    if (targetNode) {
+      this.mindMap.renderer.moveNodeToCenter(targetNode)
+      targetNode.active()
+    }
+  }
+
+  //  1.简单算法
+  getFocusNodeBySimpleAlgorithm({
+    currentActiveNode,
+    currentActiveNodeRect,
+    dir,
+    checkNodeDis
+  }) {
+    // 遍历节点树
+    bfsWalk(this.mindMap.renderer.root, node => {
+      // 跳过当前聚焦的节点
+      if (node === currentActiveNode) return
+      // 当前遍历到的节点的位置信息
+      let rect = this.getNodeRect(node)
+      let { left, top, right, bottom } = rect
+      let match = false
+      // 按下了左方向键
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
+        // 判断节点是否在当前节点的左侧
+        match = right <= currentActiveNodeRect.left
+        // 按下了右方向键
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
+        // 判断节点是否在当前节点的右侧
+        match = left >= currentActiveNodeRect.right
+        // 按下了上方向键
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
+        // 判断节点是否在当前节点的上面
+        match = bottom <= currentActiveNodeRect.top
+        // 按下了下方向键
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
+        // 判断节点是否在当前节点的下面
+        match = top >= currentActiveNodeRect.bottom
+      }
+      // 符合要求，判断是否是最近的节点
+      if (match) {
+        checkNodeDis(rect, node)
+      }
+    })
+  }
+
+  //  2.阴影算法
+  getFocusNodeByShadowAlgorithm({
+    currentActiveNode,
+    currentActiveNodeRect,
+    dir,
+    checkNodeDis
+  }) {
+    bfsWalk(this.mindMap.renderer.root, node => {
+      if (node === currentActiveNode) return
+      let rect = this.getNodeRect(node)
+      let { left, top, right, bottom } = rect
+      let match = false
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
+        match =
+          left < currentActiveNodeRect.left &&
+          top < currentActiveNodeRect.bottom &&
+          bottom > currentActiveNodeRect.top
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
+        match =
+          right > currentActiveNodeRect.right &&
+          top < currentActiveNodeRect.bottom &&
+          bottom > currentActiveNodeRect.top
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
+        match =
+          top < currentActiveNodeRect.top &&
+          left < currentActiveNodeRect.right &&
+          right > currentActiveNodeRect.left
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
+        match =
+          bottom > currentActiveNodeRect.bottom &&
+          left < currentActiveNodeRect.right &&
+          right > currentActiveNodeRect.left
+      }
+      if (match) {
+        checkNodeDis(rect, node)
+      }
+    })
+  }
+
+  //  3.区域算法
+  getFocusNodeByAreaAlgorithm({
+    currentActiveNode,
+    currentActiveNodeRect,
+    dir,
+    checkNodeDis
+  }) {
+    // 当前聚焦节点的中心点
+    let cX = (currentActiveNodeRect.right + currentActiveNodeRect.left) / 2
+    let cY = (currentActiveNodeRect.bottom + currentActiveNodeRect.top) / 2
+    bfsWalk(this.mindMap.renderer.root, node => {
+      if (node === currentActiveNode) return
+      let rect = this.getNodeRect(node)
+      let { left, top, right, bottom } = rect
+      // 遍历到的节点的中心点
+      let ccX = (right + left) / 2
+      let ccY = (bottom + top) / 2
+      // 节点的中心点坐标和当前聚焦节点的中心点坐标的差值
+      let offsetX = ccX - cX
+      let offsetY = ccY - cY
+      if (offsetX === 0 && offsetY === 0) return
+      let match = false
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
+        match = offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
+        match = offsetX > 0 && offsetX >= -offsetY && offsetX >= offsetY
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
+        match = offsetY <= 0 && offsetY < offsetX && offsetY < -offsetX
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
+        match = offsetY > 0 && -offsetY < offsetX && offsetY > offsetX
+      }
+      if (match) {
+        checkNodeDis(rect, node)
+      }
+    })
+  }
+
+  //  获取节点的位置信息
+  getNodeRect(node) {
+    let { scaleX, scaleY, translateX, translateY } =
+      this.mindMap.draw.transform()
+    let { left, top, width, height } = node
+    return {
+      right: (left + width) * scaleX + translateX,
+      bottom: (top + height) * scaleY + translateY,
+      left: left * scaleX + translateX,
+      top: top * scaleY + translateY
+    }
+  }
+
+  //  获取两个节点的距离
+  getDistance(node1Rect, node2Rect) {
+    let center1 = this.getCenter(node1Rect)
+    let center2 = this.getCenter(node2Rect)
+    return Math.sqrt(
+      Math.pow(center1.x - center2.x, 2) + Math.pow(center1.y - center2.y, 2)
+    )
+  }
+
+  //  获取节点的中心点
+  getCenter({ left, right, top, bottom }) {
+    return {
+      x: (left + right) / 2,
+      y: (top + bottom) / 2
+    }
+  }
+}
+
+KeyboardNavigation.instanceName = 'keyboardNavigation'
+
+export default KeyboardNavigation
--- a/simple-mind-map/src/plugins/MiniMap.js
+++ b/simple-mind-map/src/plugins/MiniMap.js
@@ -0,0 +1,112 @@
+// 小地图类
+class MiniMap {
+  //  构造函数
+  constructor(opt) {
+    this.mindMap = opt.mindMap
+    this.isMousedown = false
+    this.mousedownPos = {
+      x: 0,
+      y: 0
+    }
+    this.startViewPos = {
+      x: 0,
+      y: 0
+    }
+  }
+
+  //  计算小地图的渲染数据
+  /**
+   * boxWidth：小地图容器的宽度
+   * boxHeight：小地图容器的高度
+   */
+  calculationMiniMap(boxWidth, boxHeight) {
+    let { svgHTML, rect, origWidth, origHeight, scaleX, scaleY } =
+      this.mindMap.getSvgData()
+    // 计算数据
+    let boxRatio = boxWidth / boxHeight
+    let actWidth = 0
+    let actHeight = 0
+    if (boxRatio > rect.ratio) {
+      // 高度以box为准，缩放宽度
+      actHeight = boxHeight
+      actWidth = rect.ratio * actHeight
+    } else {
+      // 宽度以box为准，缩放高度
+      actWidth = boxWidth
+      actHeight = actWidth / rect.ratio
+    }
+    // svg图形的缩放及位置
+    let miniMapBoxScale = actWidth / rect.width
+    let miniMapBoxLeft = (boxWidth - actWidth) / 2
+    let miniMapBoxTop = (boxHeight - actHeight) / 2
+    // 视口框大小及位置
+    let _rectX = rect.x - (rect.width * scaleX - rect.width) / 2
+    let _rectX2 = rect.x2 + (rect.width * scaleX - rect.width) / 2
+    let _rectY = rect.y - (rect.height * scaleY - rect.height) / 2
+    let _rectY2 = rect.y2 + (rect.height * scaleY - rect.height) / 2
+    let _rectWidth = rect.width * scaleX
+    let _rectHeight = rect.height * scaleY
+    let viewBoxStyle = {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0
+    }
+    viewBoxStyle.left =
+      Math.max(0, (-_rectX / _rectWidth) * actWidth) + miniMapBoxLeft + 'px'
+    viewBoxStyle.right =
+      Math.max(0, ((_rectX2 - origWidth) / _rectWidth) * actWidth) +
+      miniMapBoxLeft +
+      'px'
+
+    viewBoxStyle.top =
+      Math.max(0, (-_rectY / _rectHeight) * actHeight) + miniMapBoxTop + 'px'
+    viewBoxStyle.bottom =
+      Math.max(0, ((_rectY2 - origHeight) / _rectHeight) * actHeight) +
+      miniMapBoxTop +
+      'px'
+    return {
+      svgHTML, // 小地图html
+      viewBoxStyle, // 视图框的位置信息
+      miniMapBoxScale, // 视图框的缩放值
+      miniMapBoxLeft, // 视图框的left值
+      miniMapBoxTop // 视图框的top值
+    }
+  }
+
+  //  小地图鼠标按下事件
+  onMousedown(e) {
+    this.isMousedown = true
+    this.mousedownPos = {
+      x: e.clientX,
+      y: e.clientY
+    }
+    // 保存视图当前的偏移量
+    let transformData = this.mindMap.view.getTransformData()
+    this.startViewPos = {
+      x: transformData.state.x,
+      y: transformData.state.y
+    }
+  }
+
+  //  小地图鼠标移动事件
+  onMousemove(e, sensitivityNum = 5) {
+    if (!this.isMousedown) {
+      return
+    }
+    let ox = e.clientX - this.mousedownPos.x
+    let oy = e.clientY - this.mousedownPos.y
+    // 在视图最初偏移量上累加更新量
+    this.mindMap.view.translateXTo(ox * sensitivityNum + this.startViewPos.x)
+    this.mindMap.view.translateYTo(oy * sensitivityNum + this.startViewPos.y)
+  }
+
+  //  小地图鼠标松开事件
+  onMouseup() {
+    this.isMousedown = false
+  }
+}
+
+MiniMap.instanceName = 'miniMap'
+
+export default MiniMap
--- a/simple-mind-map/src/plugins/RichText.js
+++ b/simple-mind-map/src/plugins/RichText.js
@@ -0,0 +1,544 @@
+import Quill from 'quill'
+import 'quill/dist/quill.snow.css'
+import html2canvas from 'html2canvas'
+import { walk, getTextFromHtml } from '../utils'
+import { CONSTANTS } from '../constants/constant'
+
+let extended = false
+
+// 扩展quill的字体列表
+let fontFamilyList = [
+  '宋体, SimSun, Songti SC',
+  '微软雅黑, Microsoft YaHei',
+  '楷体, 楷体_GB2312, SimKai, STKaiti',
+  '黑体, SimHei, Heiti SC',
+  '隶书, SimLi',
+  'andale mono',
+  'arial, helvetica, sans-serif',
+  'arial black, avant garde',
+  'comic sans ms',
+  'impact, chicago',
+  'times new roman',
+  'sans-serif',
+  'serif'
+]
+
+// 扩展quill的字号列表
+let fontSizeList = new Array(100).fill(0).map((_, index) => {
+  return index + 'px'
+})
+
+// 节点支持富文本编辑功能
+class RichText {
+  constructor({ mindMap, pluginOpt }) {
+    this.mindMap = mindMap
+    this.pluginOpt = pluginOpt
+    this.textEditNode = null
+    this.showTextEdit = false
+    this.quill = null
+    this.range = null
+    this.lastRange = null
+    this.node = null
+    this.styleEl = null
+    this.cacheEditingText = ''
+    this.lostStyle = false
+    this.isCompositing = false
+    this.initOpt()
+    this.extendQuill()
+    this.appendCss()
+    this.bindEvent()
+
+    // 处理数据，转成富文本格式
+    if (this.mindMap.opt.data) {
+      this.mindMap.opt.data = this.handleSetData(this.mindMap.opt.data)
+    }
+  }
+
+  // 绑定事件
+  bindEvent() {
+    this.onCompositionStart = this.onCompositionStart.bind(this)
+    this.onCompositionEnd = this.onCompositionEnd.bind(this)
+    window.addEventListener('compositionstart', this.onCompositionStart)
+    window.addEventListener('compositionend', this.onCompositionEnd)
+  }
+
+  // 解绑事件
+  unbindEvent() {
+    window.removeEventListener('compositionstart', this.onCompositionStart)
+    window.removeEventListener('compositionend', this.onCompositionEnd)
+  }
+
+  // 插入样式
+  appendCss() {
+    let cssText = `
+      .ql-editor {
+        overflow: hidden;
+        padding: 0;
+        height: auto;
+        line-height: normal;
+        -webkit-user-select: text;
+      }
+      
+      .ql-container {
+        height: auto;
+        font-size: inherit;
+      }
+
+      .ql-container.ql-snow {
+        border: none;
+      }
+
+      .smm-richtext-node-wrap p {
+        font-family: auto;
+      }
+
+      .smm-richtext-node-edit-wrap p {
+        font-family: auto;
+      }
+    `
+    this.styleEl = document.createElement('style')
+    this.styleEl.type = 'text/css'
+    this.styleEl.innerHTML = cssText
+    document.head.appendChild(this.styleEl)
+  }
+
+  // 处理选项参数
+  initOpt() {
+    if (
+      this.pluginOpt.fontFamilyList &&
+      Array.isArray(this.pluginOpt.fontFamilyList)
+    ) {
+      fontFamilyList = this.pluginOpt.fontFamilyList
+    }
+    if (
+      this.pluginOpt.fontSizeList &&
+      Array.isArray(this.pluginOpt.fontSizeList)
+    ) {
+      fontSizeList = this.pluginOpt.fontSizeList
+    }
+  }
+
+  // 扩展quill编辑器
+  extendQuill() {
+    if (extended) {
+      return
+    }
+    extended = true
+
+    // 扩展quill的字体列表
+    const FontAttributor = Quill.import('attributors/class/font')
+    FontAttributor.whitelist = fontFamilyList
+    Quill.register(FontAttributor, true)
+
+    const FontStyle = Quill.import('attributors/style/font')
+    FontStyle.whitelist = fontFamilyList
+    Quill.register(FontStyle, true)
+
+    // 扩展quill的字号列表
+    const SizeAttributor = Quill.import('attributors/class/size')
+    SizeAttributor.whitelist = fontSizeList
+    Quill.register(SizeAttributor, true)
+
+    const SizeStyle = Quill.import('attributors/style/size')
+    SizeStyle.whitelist = fontSizeList
+    Quill.register(SizeStyle, true)
+  }
+
+  // 显示文本编辑控件
+  showEditText(node, rect) {
+    if (this.showTextEdit) {
+      return
+    }
+    this.node = node
+    if (!rect) rect = node._textData.node.node.getBoundingClientRect()
+    this.mindMap.emit('before_show_text_edit')
+    this.mindMap.renderer.textEdit.registerTmpShortcut()
+    // 原始宽高
+    let g = node._textData.node
+    let originWidth = g.attr('data-width')
+    let originHeight = g.attr('data-height')
+    // 缩放值
+    let scaleX = rect.width / originWidth
+    let scaleY = rect.height / originHeight
+    // 内边距
+    const paddingX = 6
+    const paddingY = 4
+    if (!this.textEditNode) {
+      this.textEditNode = document.createElement('div')
+      this.textEditNode.classList.add('smm-richtext-node-edit-wrap')
+      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: ${paddingY}px ${paddingX}px;`
+      this.textEditNode.addEventListener('click', e => {
+        e.stopPropagation()
+      })
+      document.body.appendChild(this.textEditNode)
+    }
+    // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
+    let bgColor = node.style.merge('fillColor')
+    this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px`
+    this.textEditNode.style.marginTop = `-${paddingY * scaleY}px`
+    this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
+    this.textEditNode.style.backgroundColor =
+      bgColor === 'transparent' ? '#fff' : bgColor
+    this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px'
+    this.textEditNode.style.minHeight = originHeight + 'px'
+    this.textEditNode.style.left = rect.left + 'px'
+    this.textEditNode.style.top = rect.top + 'px'
+    this.textEditNode.style.display = 'block'
+    this.textEditNode.style.maxWidth =
+      this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px'
+    this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})`
+    this.textEditNode.style.transformOrigin = 'left top'
+    if (!node.nodeData.data.richText) {
+      // 还不是富文本的情况
+      let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
+      let html = `<p>${text}</p>`
+      this.textEditNode.innerHTML = this.cacheEditingText || html
+    } else {
+      this.textEditNode.innerHTML =
+        this.cacheEditingText || node.nodeData.data.text
+    }
+    this.initQuillEditor()
+    document.querySelector('.ql-editor').style.minHeight = originHeight + 'px'
+    this.showTextEdit = true
+    this.focus()
+    if (!node.nodeData.data.richText) {
+      // 如果是非富文本的情况，需要手动应用文本样式
+      this.setTextStyleIfNotRichText(node)
+    }
+    this.cacheEditingText = ''
+  }
+
+  // 如果是非富文本的情况，需要手动应用文本样式
+  setTextStyleIfNotRichText(node) {
+    let style = {
+      font: node.style.merge('fontFamily'),
+      color: node.style.merge('color'),
+      italic: node.style.merge('fontStyle') === 'italic',
+      bold: node.style.merge('fontWeight') === 'bold',
+      size: node.style.merge('fontSize') + 'px',
+      underline: node.style.merge('textDecoration') === 'underline',
+      strike: node.style.merge('textDecoration') === 'line-through'
+    }
+    this.pureFormatAllText(style)
+  }
+
+  // 获取当前正在编辑的内容
+  getEditText() {
+    let html = this.quill.container.firstChild.innerHTML
+    // 去除最后的空行
+    return html.replace(/<p><br><\/p>$/, '')
+  }
+
+  // 隐藏文本编辑控件，即完成编辑
+  hideEditText(nodes) {
+    if (!this.showTextEdit) {
+      return
+    }
+    let html = this.getEditText()
+    let list =
+      nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList
+    list.forEach(node => {
+      this.mindMap.execCommand('SET_NODE_TEXT', node, html, true)
+      if (node.isGeneralization) {
+        // 概要节点
+        node.generalizationBelongNode.updateGeneralization()
+      }
+      this.mindMap.render()
+    })
+    this.mindMap.emit('hide_text_edit', this.textEditNode, list)
+    this.textEditNode.style.display = 'none'
+    this.showTextEdit = false
+    this.mindMap.emit('rich_text_selection_change', false)
+    this.node = null
+  }
+
+  // 初始化Quill富文本编辑器
+  initQuillEditor() {
+    this.quill = new Quill(this.textEditNode, {
+      modules: {
+        toolbar: false,
+        keyboard: {
+          bindings: {
+            enter: {
+              key: 13,
+              handler: function () {
+                // 覆盖默认的回车键换行
+              }
+            }
+          }
+        }
+      },
+      theme: 'snow'
+    })
+    this.quill.on('selection-change', range => {
+      this.lastRange = this.range
+      this.range = null
+      if (range) {
+        let bounds = this.quill.getBounds(range.index, range.length)
+        let rect = this.textEditNode.getBoundingClientRect()
+        let rectInfo = {
+          left: bounds.left + rect.left,
+          top: bounds.top + rect.top,
+          right: bounds.right + rect.left,
+          bottom: bounds.bottom + rect.top,
+          width: bounds.width
+        }
+        let formatInfo = this.quill.getFormat(range.index, range.length)
+        let hasRange = false
+        if (range.length == 0) {
+          hasRange = false
+        } else {
+          this.range = range
+          hasRange = true
+        }
+        this.mindMap.emit(
+          'rich_text_selection_change',
+          hasRange,
+          rectInfo,
+          formatInfo
+        )
+      }
+    })
+    this.quill.on('text-change', () => {
+      let contents = this.quill.getContents()
+      let len = contents.ops.length
+      // 如果编辑过程中删除所有字符，那么会丢失主题的样式
+      if (len <= 0 || (len === 1 && contents.ops[0].insert === '\n')) {
+        this.lostStyle = true
+        // 需要删除节点的样式数据
+        this.syncFormatToNodeConfig(null, true)
+      } else if (this.lostStyle && !this.isCompositing) {
+        // 如果处于样式丢失状态，那么需要进行格式化加回样式
+        this.setTextStyleIfNotRichText(this.node)
+        this.lostStyle = false
+      }
+    })
+  }
+
+  // 正则输入中文
+  onCompositionStart() {
+    if (!this.showTextEdit) {
+      return
+    }
+    this.isCompositing = true
+  }
+
+  // 中文输入结束
+  onCompositionEnd() {
+    if (!this.showTextEdit || !this.lostStyle) {
+      return
+    }
+    this.isCompositing = false
+    this.setTextStyleIfNotRichText(this.node)
+  }
+
+  // 选中全部
+  selectAll() {
+    this.quill.setSelection(0, this.quill.getLength())
+  }
+
+  // 聚焦
+  focus() {
+    let len = this.quill.getLength()
+    this.quill.setSelection(len, len)
+  }
+
+  // 格式化当前选中的文本
+  formatText(config = {}, clear = false) {
+    if (!this.range && !this.lastRange) return
+    this.syncFormatToNodeConfig(config, clear)
+    let rangeLost = !this.range
+    let range = rangeLost ? this.lastRange : this.range
+    clear
+      ? this.quill.removeFormat(range.index, range.length)
+      : this.quill.formatText(range.index, range.length, config)
+    if (rangeLost) {
+      this.quill.setSelection(this.lastRange.index, this.lastRange.length)
+    }
+  }
+
+  // 清除当前选中文本的样式
+  removeFormat() {
+    this.formatText({}, true)
+  }
+
+  // 格式化指定范围的文本
+  formatRangeText(range, config = {}) {
+    if (!range) return
+    this.syncFormatToNodeConfig(config)
+    this.quill.formatText(range.index, range.length, config)
+  }
+
+  // 格式化所有文本
+  formatAllText(config = {}) {
+    this.syncFormatToNodeConfig(config)
+    this.pureFormatAllText(config)
+  }
+
+  // 纯粹的格式化所有文本
+  pureFormatAllText(config = {}) {
+    this.quill.formatText(0, this.quill.getLength(), config)
+  }
+
+  // 同步格式化到节点样式配置
+  syncFormatToNodeConfig(config, clear) {
+    if (!this.node) return
+    if (clear) {
+      // 清除文本样式
+      ;[
+        'fontFamily',
+        'fontSize',
+        'fontWeight',
+        'fontStyle',
+        'textDecoration',
+        'color'
+      ].forEach(prop => {
+        delete this.node.nodeData.data[prop]
+      })
+    } else {
+      let data = this.richTextStyleToNormalStyle(config)
+      this.mindMap.renderer.setNodeData(this.node, data)
+    }
+  }
+
+  // 将普通节点样式对象转换成富文本样式对象
+  normalStyleToRichTextStyle(style) {
+    let config = {}
+    Object.keys(style).forEach(prop => {
+      let value = style[prop]
+      switch (prop) {
+        case 'fontFamily':
+          config.font = value
+          break
+        case 'fontSize':
+          config.size = value + 'px'
+          break
+        case 'fontWeight':
+          config.bold = value === 'bold'
+          break
+        case 'fontStyle':
+          config.italic = value === 'italic'
+          break
+        case 'textDecoration':
+          config.underline = value === 'underline'
+          config.strike = value === 'line-through'
+          break
+        case 'color':
+          config.color = value
+          break
+        default:
+          break
+      }
+    })
+    return config
+  }
+
+  // 将富文本样式对象转换成普通节点样式对象
+  richTextStyleToNormalStyle(config) {
+    let data = {}
+    Object.keys(config).forEach(prop => {
+      let value = config[prop]
+      switch (prop) {
+        case 'font':
+          data.fontFamily = value
+          break
+        case 'size':
+          data.fontSize = parseFloat(value)
+          break
+        case 'bold':
+          data.fontWeight = value ? 'bold' : 'normal'
+          break
+        case 'italic':
+          data.fontStyle = value ? 'italic' : 'normal'
+          break
+        case 'underline':
+          data.textDecoration = value ? 'underline' : 'none'
+          break
+        case 'strike':
+          data.textDecoration = value ? 'line-through' : 'none'
+          break
+        case 'color':
+          data.color = value
+          break
+        default:
+          break
+      }
+    })
+    return data
+  }
+
+  // 处理导出为图片
+  async handleExportPng(node) {
+    let el = document.createElement('div')
+    el.style.position = 'absolute'
+    el.style.left = '-9999999px'
+    el.appendChild(node)
+    this.mindMap.el.appendChild(el)
+    // 遍历所有节点，将它们的margin和padding设为0
+    let walk = root => {
+      root.style.margin = 0
+      root.style.padding = 0
+      if (root.hasChildNodes()) {
+        Array.from(root.children).forEach(item => {
+          walk(item)
+        })
+      }
+    }
+    walk(node)
+    let canvas = await html2canvas(el, {
+      backgroundColor: null
+    })
+    this.mindMap.el.removeChild(el)
+    return canvas.toDataURL()
+  }
+
+  // 将所有节点转换成非富文本节点
+  transformAllNodesToNormalNode() {
+    walk(
+      this.mindMap.renderer.renderTree,
+      null,
+      node => {
+        if (node.data.richText) {
+          node.data.richText = false
+          node.data.text = getTextFromHtml(node.data.text)
+          // delete node.data.uid
+        }
+      },
+      null,
+      true,
+      0,
+      0
+    )
+    // 清空历史数据，并且触发数据变化
+    this.mindMap.command.clearHistory()
+    this.mindMap.command.addHistory()
+    this.mindMap.render(null, CONSTANTS.TRANSFORM_TO_NORMAL_NODE)
+  }
+
+  // 处理导入数据
+  handleSetData(data) {
+    let walk = root => {
+      if (!root.data.richText) {
+        root.data.richText = true
+        root.data.resetRichText = true
+      }
+      if (root.children && root.children.length > 0) {
+        Array.from(root.children).forEach(item => {
+          walk(item)
+        })
+      }
+    }
+    walk(data)
+    return data
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.transformAllNodesToNormalNode()
+    document.head.removeChild(this.styleEl)
+  }
+}
+
+RichText.instanceName = 'richText'
+
+export default RichText
--- a/simple-mind-map/src/plugins/Select.js
+++ b/simple-mind-map/src/plugins/Select.js
@@ -0,0 +1,180 @@
+import { bfsWalk, throttle } from '../utils'
+
+//  选择节点类
+
+class Select {
+  //  构造函数
+  constructor({ mindMap }) {
+    this.mindMap = mindMap
+    this.rect = null
+    this.isMousedown = false
+    this.mouseDownX = 0
+    this.mouseDownY = 0
+    this.mouseMoveX = 0
+    this.mouseMoveY = 0
+    this.bindEvent()
+  }
+
+  //  绑定事件
+  bindEvent() {
+    this.checkInNodes = throttle(this.checkInNodes, 300, this)
+    this.mindMap.on('mousedown', e => {
+      if (this.mindMap.opt.readonly) {
+        return
+      }
+      let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
+      if (
+        !e.ctrlKey &&
+        (useLeftKeySelectionRightKeyDrag ? e.which !== 1 : e.which !== 3)
+      ) {
+        return
+      }
+      e.preventDefault()
+      this.isMousedown = true
+      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+      this.mouseDownX = x
+      this.mouseDownY = y
+      this.createRect(x, y)
+    })
+    this.mindMap.on('mousemove', e => {
+      if (this.mindMap.opt.readonly) {
+        return
+      }
+      if (!this.isMousedown) {
+        return
+      }
+      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+      this.mouseMoveX = x
+      this.mouseMoveY = y
+      if (
+        Math.abs(x - this.mouseDownX) <= 10 &&
+        Math.abs(y - this.mouseDownY) <= 10
+      ) {
+        return
+      }
+      clearTimeout(this.autoMoveTimer)
+      this.onMove(x, y)
+    })
+    this.mindMap.on('mouseup', () => {
+      if (this.mindMap.opt.readonly) {
+        return
+      }
+      if (!this.isMousedown) {
+        return
+      }
+      this.mindMap.emit(
+        'node_active',
+        null,
+        this.mindMap.renderer.activeNodeList
+      )
+      clearTimeout(this.autoMoveTimer)
+      this.isMousedown = false
+      if (this.rect) this.rect.remove()
+      this.rect = null
+    })
+  }
+
+  //  鼠标移动事件
+  onMove(x, y) {
+    // 绘制矩形
+    this.rect.plot([
+      [this.mouseDownX, this.mouseDownY],
+      [this.mouseMoveX, this.mouseDownY],
+      [this.mouseMoveX, this.mouseMoveY],
+      [this.mouseDownX, this.mouseMoveY]
+    ])
+    this.checkInNodes()
+    // 检测边缘移动
+    let step = this.mindMap.opt.selectTranslateStep
+    let limit = this.mindMap.opt.selectTranslateLimit
+    let count = 0
+    // 左边缘
+    if (x <= this.mindMap.elRect.left + limit) {
+      this.mouseDownX += step
+      this.mindMap.view.translateX(step)
+      count++
+    }
+    // 右边缘
+    if (x >= this.mindMap.elRect.right - limit) {
+      this.mouseDownX -= step
+      this.mindMap.view.translateX(-step)
+      count++
+    }
+    // 上边缘
+    if (y <= this.mindMap.elRect.top + limit) {
+      this.mouseDownY += step
+      this.mindMap.view.translateY(step)
+      count++
+    }
+    // 下边缘
+    if (y >= this.mindMap.elRect.bottom - limit) {
+      this.mouseDownY -= step
+      this.mindMap.view.translateY(-step)
+      count++
+    }
+    if (count > 0) {
+      this.startAutoMove(x, y)
+    }
+  }
+
+  //  开启自动移动
+  startAutoMove(x, y) {
+    this.autoMoveTimer = setTimeout(() => {
+      this.onMove(x, y)
+    }, 20)
+  }
+
+  //  创建矩形
+  createRect(x, y) {
+    this.rect = this.mindMap.svg
+      .polygon()
+      .stroke({
+        color: '#0984e3'
+      })
+      .fill({
+        color: 'rgba(9,132,227,0.3)'
+      })
+      .plot([[x, y]])
+  }
+
+  //  检测在选区里的节点
+  checkInNodes() {
+    let { scaleX, scaleY, translateX, translateY } =
+      this.mindMap.draw.transform()
+    let minx = Math.min(this.mouseDownX, this.mouseMoveX)
+    let miny = Math.min(this.mouseDownY, this.mouseMoveY)
+    let maxx = Math.max(this.mouseDownX, this.mouseMoveX)
+    let maxy = Math.max(this.mouseDownY, this.mouseMoveY)
+    bfsWalk(this.mindMap.renderer.root, node => {
+      let { left, top, width, height } = node
+      let right = (left + width) * scaleX + translateX
+      let bottom = (top + height) * scaleY + translateY
+      left = left * scaleX + translateX
+      top = top * scaleY + translateY
+      if (
+        ((left >= minx && left <= maxx) || (right >= minx && right <= maxx)) &&
+        ((top >= miny && top <= maxy) || (bottom >= miny && bottom <= maxy))
+      ) {
+        // this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
+        if (node.nodeData.data.isActive) {
+          return
+        }
+        this.mindMap.renderer.setNodeActive(node, true)
+        this.mindMap.renderer.addActiveNode(node)
+        // })
+      } else if (node.nodeData.data.isActive) {
+        // this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
+        if (!node.nodeData.data.isActive) {
+          return
+        }
+        this.mindMap.renderer.setNodeActive(node, false)
+        this.mindMap.renderer.removeActiveNode(node)
+        // })
+      }
+    })
+  }
+}
+
+Select.instanceName = 'select'
+
+export default Select
--- a/simple-mind-map/src/plugins/TouchEvent.js
+++ b/simple-mind-map/src/plugins/TouchEvent.js
@@ -0,0 +1,122 @@
+// 手势事件支持类
+
+class TouchEvent {
+  //  构造函数
+  constructor({ mindMap }) {
+    this.mindMap = mindMap
+    this.touchesNum = 0
+    this.singleTouchstartEvent = null
+    this.clickNum = 0
+    this.doubleTouchmoveDistance = 0
+    this.bindEvent()
+  }
+
+  // 绑定事件
+  bindEvent() {
+    this.onTouchstart = this.onTouchstart.bind(this)
+    this.onTouchmove = this.onTouchmove.bind(this)
+    this.onTouchcancel = this.onTouchcancel.bind(this)
+    this.onTouchend = this.onTouchend.bind(this)
+    window.addEventListener('touchstart', this.onTouchstart)
+    window.addEventListener('touchmove', this.onTouchmove)
+    window.addEventListener('touchcancel', this.onTouchcancel)
+    window.addEventListener('touchend', this.onTouchend)
+  }
+
+  // 解绑事件
+  unBindEvent() {
+    window.removeEventListener('touchstart', this.onTouchstart)
+    window.removeEventListener('touchmove', this.onTouchmove)
+    window.removeEventListener('touchcancel', this.onTouchcancel)
+    window.removeEventListener('touchend', this.onTouchend)
+  }
+
+  // 手指按下事件
+  onTouchstart(e) {
+    this.touchesNum = e.touches.length
+    if (this.touchesNum === 1) {
+      let touch = e.touches[0]
+      this.singleTouchstartEvent = touch
+      this.dispatchMouseEvent('mousedown', touch.target, touch)
+    }
+  }
+
+  // 手指移动事件
+  onTouchmove(e) {
+    let len = e.touches.length
+    if (len === 1) {
+      let touch = e.touches[0]
+      this.dispatchMouseEvent('mousemove', touch.target, touch)
+    } else if (len === 2) {
+      let touch1 = e.touches[0]
+      let touch2 = e.touches[1]
+      let distance = Math.sqrt(
+        Math.pow(touch1.clientX - touch2.clientX, 2) +
+          Math.pow(touch1.clientY - touch2.clientY, 2)
+      )
+      if (distance > this.doubleTouchmoveDistance) {
+        // 放大
+        this.mindMap.view.enlarge()
+      } else {
+        // 缩小
+        this.mindMap.view.narrow()
+      }
+      this.doubleTouchmoveDistance = distance
+    }
+  }
+
+  // 手指取消事件
+  onTouchcancel(e) {}
+
+  // 手指松开事件
+  onTouchend(e) {
+    this.dispatchMouseEvent('mouseup', e.target)
+    if (this.touchesNum === 1) {
+      // 模拟双击事件
+      this.clickNum++
+      setTimeout(() => {
+        this.clickNum = 0
+      }, 300)
+      let ev = this.singleTouchstartEvent
+      if (this.clickNum > 1) {
+        this.clickNum = 0
+        this.dispatchMouseEvent('dblclick', ev.target, ev)
+      } else {
+        this.dispatchMouseEvent('click', ev.target, ev)
+      }
+    }
+    this.touchesNum = 0
+    this.singleTouchstartEvent = null
+    this.doubleTouchmoveDistance = 0
+  }
+
+  // 发送鼠标事件
+  dispatchMouseEvent(eventName, target, e) {
+    let opt = {}
+    if (e) {
+      opt = {
+        screenX: e.screenX,
+        screenY: e.screenY,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        which: 1
+      }
+    }
+    let event = new MouseEvent(eventName, {
+      view: window,
+      bubbles: true,
+      cancelable: true,
+      ...opt
+    })
+    target.dispatchEvent(event)
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+}
+
+TouchEvent.instanceName = 'touchEvent'
+
+export default TouchEvent
--- a/simple-mind-map/src/plugins/Watermark.js
+++ b/simple-mind-map/src/plugins/Watermark.js
@@ -0,0 +1,120 @@
+import { Text, G } from '@svgdotjs/svg.js'
+import { degToRad, camelCaseToHyphen } from '../utils'
+import merge from 'deepmerge'
+
+// 水印类
+class Watermark {
+  constructor(opt = {}) {
+    this.mindMap = opt.mindMap
+    this.lineSpacing = 0 // 水印行间距
+    this.textSpacing = 0 // 行内水印间距
+    this.angle = 0 // 旋转角度
+    this.text = '' // 水印文字
+    this.textStyle = {} // 水印文字样式
+    this.watermarkDraw = this.mindMap.svg
+      .group()
+      .css({ 'pointer-events': 'none', 'user-select': 'none' })
+    this.maxLong = Math.sqrt(
+      Math.pow(this.mindMap.width, 2) + Math.pow(this.mindMap.height, 2)
+    )
+    this.updateWatermark(this.mindMap.opt.watermarkConfig || {})
+  }
+
+  // 获取是否存在水印
+  hasWatermark() {
+    return !!this.text.trim()
+  }
+
+  // 处理水印配置
+  handleConfig({ text, lineSpacing, textSpacing, angle, textStyle }) {
+    this.text = text === undefined ? '' : String(text).trim()
+    this.lineSpacing =
+      typeof lineSpacing === 'number' && lineSpacing > 0 ? lineSpacing : 100
+    this.textSpacing =
+      typeof textSpacing === 'number' && textSpacing > 0 ? textSpacing : 100
+    this.angle =
+      typeof angle === 'number' && angle >= 0 && angle <= 90 ? angle : 30
+    this.textStyle = Object.assign(this.textStyle, textStyle || {})
+  }
+
+  // 绘制水印
+  // 非精确绘制，会绘制一些超出可视区域的水印
+  draw() {
+    this.watermarkDraw.clear()
+    if (!this.hasWatermark()) {
+      return
+    }
+    let x = 0
+    while (x < this.mindMap.width) {
+      this.drawText(x)
+      x += this.lineSpacing / Math.sin(degToRad(this.angle))
+    }
+
+    let yOffset =
+      this.lineSpacing / Math.cos(degToRad(this.angle)) || this.lineSpacing
+    let y = yOffset
+    while (y < this.mindMap.height) {
+      this.drawText(0, y)
+      y += yOffset
+    }
+  }
+
+  // 绘制文字
+  drawText(x, y) {
+    let long = Math.min(
+      this.maxLong,
+      (this.mindMap.width - x) / Math.cos(degToRad(this.angle))
+    )
+    let g = new G()
+    let bbox = null
+    let bboxWidth = 0
+    let textHeight = -1
+    while (bboxWidth < long) {
+      let text = new Text().text(this.text)
+      g.add(text)
+      text.transform({
+        translateX: bboxWidth
+      })
+      this.setTextStyle(text)
+      bbox = g.bbox()
+      if (textHeight === -1) {
+        textHeight = bbox.height
+      }
+      bboxWidth = bbox.width + this.textSpacing
+    }
+    let params = {
+      rotate: this.angle,
+      origin: 'top left',
+      translateX: x,
+      translateY: textHeight
+    }
+    if (y !== undefined) {
+      params.translateY = y + textHeight
+    }
+    g.transform(params)
+    this.watermarkDraw.add(g)
+  }
+
+  // 给文字设置样式
+  setTextStyle(text) {
+    Object.keys(this.textStyle).forEach(item => {
+      let value = this.textStyle[item]
+      if (item === 'color') {
+        text.fill(value)
+      } else {
+        text.css(camelCaseToHyphen(item), value)
+      }
+    })
+  }
+
+  // 更新水印
+  updateWatermark(config) {
+    this.mindMap.opt.watermarkConfig = merge(this.mindMap.opt.watermarkConfig, config)
+    this.handleConfig(config)
+    this.draw()
+  }
+}
+
+Watermark.instanceName = 'watermark'
+
+export default Watermark
--- a/Show More
+++ b/Show More