Merge branch 'feature' into main

打包0.5.0
更新文档
2026-02-17 22:08:25 +08:00 · 2023-04-02 21:27:24 +08:00 · 2023-04-02 21:12:44 +08:00 · 2023-04-02 21:08:55 +08:00 · 2023-04-02 11:21:35 +08:00 · 2023-04-01 17:30:29 +08:00
155 changed files with 8796 additions and 6041 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-.DS_Store
+.DS_Store
+dist_electron
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@ Demo：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-ma

 # 特性

+- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积
 - [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构
 - [x] 内置多种主题，允许高度自定义样式，支持注册新主题
 - [x] 支持快捷键
@@ -24,8 +25,9 @@ Demo：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-ma
 - [x] 支持右键和Ctrl+左键两种多选方式
 - [x] 支持节点自由拖拽、拖拽调整
 - [x] 支持多种节点形状
- [x] 支持导出为`json`、`png`、`svg`、`pdf`，支持从`json`、`xmind`导入
- [x] 支持小地图
+- [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`，支持从`json`、`xmind`、`markdown`导入
+- [x] 支持小地图、支持水印
+- [x] 支持关联线

 # 安装

@@ -55,4 +57,8 @@ const mindMap = new MindMap({

 # License

-MIT
+MIT
+
+# 微信交流群
+
+![](./qrcode.jpg)
--- 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
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d0a3179.f79d6590.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.d901cc5e.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.ae72a285.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.0a72e8ef.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.f7178a38.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.abfe0d6c.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.de98db92.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.a48a667e.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.e56450f0.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.1531a230.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.d2768274.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.a89a80b4.js" rel="prefetch"><link href="dist/js/chunk-2d0c18d8.4dad4846.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.93eb5568.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.49c23f9e.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.e5848281.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.2e0766e2.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.9e9d10ae.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.19efc7d4.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.6a579f6f.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.d162efb9.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.f98f06e7.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.f3a9c7fc.js" rel="prefetch"><link href="dist/js/chunk-2d0e268c.2255a1cb.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.2b202405.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.a2d22497.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.9cd8732d.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.fe227afb.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.48cb1221.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.acd7e356.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.5a4025ce.js" rel="prefetch"><link href="dist/js/chunk-2d216004.905379d5.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-2d217907.cc6917a4.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.3703455b.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.ffd15e65.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.cace3b1b.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.fb49d06b.js" rel="prefetch"><link href="dist/js/chunk-2d238428.266d8f0c.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.8a532989.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.1790fe42.css" rel="preload" as="style"><link href="dist/js/app.0642ce46.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.7f3b8358.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.1790fe42.css" rel="stylesheet"><link href="dist/css/app.8a532989.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.7f3b8358.js"></script><script src="dist/js/app.0642ce46.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d0a3179.3b27bed0.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.64cc7822.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.61afd8c1.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.84fc06da.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.4d405645.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.a9abff6a.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.b8417307.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.d657e190.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.433fdc5c.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.9d7f8382.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.a3915823.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.906e86ec.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.0cf53d60.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.1d1fb5b5.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.7163274e.js" rel="prefetch"><link href="dist/js/chunk-2d0c18d8.108e4f7d.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.cd5e6df3.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.2e73bf0a.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.dab092ff.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.2e73ab77.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.2d79582e.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.80759043.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.5fb896ad.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.b5ce4946.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.c4647d07.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.3eea98de.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.d960b122.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.a2a047cf.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.f519efd9.js" rel="prefetch"><link href="dist/js/chunk-2d0e268c.7bac07f7.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.10135360.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.9abceada.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.d3d121fa.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.f52387a2.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.a944214a.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.e7133ec1.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.6a4911c4.js" rel="prefetch"><link href="dist/js/chunk-2d216004.75465efa.js" rel="prefetch"><link href="dist/js/chunk-2d217907.32a00939.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.6b1238d2.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.8f3151dd.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.9f7bbd4c.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.2797f6b4.js" rel="prefetch"><link href="dist/js/chunk-2d238428.7c9ae7c7.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.b091d972.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.88eeb1b9.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.b091d972.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.88eeb1b9.js"></script></body></html>
--- a/qrcode.jpg
+++ b/qrcode.jpg
--- a/simple-mind-map/example/exampleData.js
+++ b/simple-mind-map/example/exampleData.js
@@ -900,6 +900,17 @@ const data5 = {
    }
 }

+// 富文本数据v0.4.0+，需要使用RichText插件才支持富文本编辑
+const richTextData = {
+    "root": {
+        "data": {
+            "text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
+            "richText": true
+        },
+        "children": []
+    }
+}
+
 const rootData = {
    "root": {
        "data": {
--- a/simple-mind-map/example/exportFullData.json
+++ b/simple-mind-map/example/exportFullData.json
@@ -31,6 +31,12 @@
                    "isActive": false
                },
                "children": []
+            }, {
+                "data": {
+                    "text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
+                    "richText": true
+                },
+                "children": []
            }]
        }]
    },
--- a/simple-mind-map/full.js
+++ b/simple-mind-map/full.js
@@ -5,9 +5,13 @@ import KeyboardNavigation from './src/KeyboardNavigation.js'
 import Export from './src/Export.js'
 import Drag from './src/Drag.js'
 import Select from './src/Select.js'
+import AssociativeLine from './src/AssociativeLine'
+import RichText from './src/RichText'
 import xmind from './src/parse/xmind.js'
+import markdown from './src/parse/markdown.js'

 MindMap.xmind = xmind
+MindMap.markdown = markdown

 MindMap
  .usePlugin(MiniMap)
@@ -16,5 +20,7 @@ MindMap
  .usePlugin(KeyboardNavigation)
  .usePlugin(Export)
  .usePlugin(Select)
+  .usePlugin(AssociativeLine)
+  .usePlugin(RichText)

 export default MindMap
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -7,7 +7,7 @@ import Style from './src/Style'
 import KeyCommand from './src/KeyCommand'
 import Command from './src/Command'
 import BatchExecution from './src/BatchExecution'
-import { layoutValueList } from './src/utils/constant'
+import { layoutValueList, CONSTANTS } from './src/utils/constant'
 import { SVG } from '@svgdotjs/svg.js'
 import { simpleDeepClone } from './src/utils'
 import defaultTheme from './src/themes/default'
@@ -17,7 +17,7 @@ const defaultOpt = {
  // 是否只读
  readonly: false,
  // 布局
-  layout: 'logicalStructure',
+  layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
  // 主题
  theme: 'default', // 内置主题：default（默认主题）
  // 主题配置，会和所选择的主题进行合并
@@ -59,6 +59,29 @@ const defaultOpt = {
      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: ''
  }
 }

@@ -82,7 +105,7 @@ class MindMap {
    this.draw = this.svg.group()

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

    // 初始化主题
    this.initTheme()
@@ -118,13 +141,11 @@ class MindMap {

    // 注册插件
    MindMap.pluginList.forEach((plugin) => {
-      this[plugin.instanceName] = new plugin({
-        mindMap: this
-      })
+      this.initPlugin(plugin)
    })

    // 初始渲染
-    this.reRender()
+    this.render()
    setTimeout(() => {
      this.command.addHistory()
    }, 0)
@@ -134,7 +155,7 @@ class MindMap {
  handleOpt(opt) {
    // 检查布局配置
    if (!layoutValueList.includes(opt.layout)) {
-      opt.layout = 'logicalStructure'
+      opt.layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
    }
    // 检查主题配置
    opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default'
@@ -142,21 +163,21 @@ class MindMap {
  }

  //  渲染，部分渲染
-  render() {
+  render(callback, source = '') {
    this.batchExecution.push('render', () => {
      this.initTheme()
      this.renderer.reRender = false
-      this.renderer.render()
+      this.renderer.render(callback, source)
    })
  }

  //  重新渲染
-  reRender() {
+  reRender(callback) {
    this.batchExecution.push('render', () => {
      this.draw.clear()
      this.initTheme()
      this.renderer.reRender = true
-      this.renderer.render()
+      this.renderer.render(callback)
    })
  }

@@ -195,7 +216,7 @@ class MindMap {
  setTheme(theme) {
    this.renderer.clearAllActive()
    this.opt.theme = theme
-    this.reRender()
+    this.render(null, CONSTANTS.CHANGE_THEME)
  }

  //  获取当前主题
@@ -206,7 +227,7 @@ class MindMap {
  //  设置主题配置
  setThemeConfig(config) {
    this.opt.themeConfig = config
-    this.reRender()
+    this.render(null, CONSTANTS.CHANGE_THEME)
  }

  //  获取自定义主题配置
@@ -238,7 +259,7 @@ class MindMap {
  setLayout(layout) {
    // 检查布局配置
    if (!layoutValueList.includes(layout)) {
-      layout = 'logicalStructure'
+      layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
    }
    this.opt.layout = layout
    this.renderer.setLayout()
@@ -254,6 +275,7 @@ class MindMap {
  setData(data) {
    this.execCommand('CLEAR_ACTIVE_NODE')
    this.command.clearHistory()
+    this.command.addHistory()
    this.renderer.renderTree = data
    this.reRender()
  }
@@ -315,10 +337,10 @@ class MindMap {

  //  设置只读模式、编辑模式
  setMode(mode) {
-    if (!['readonly', 'edit'].includes(mode)) {
+    if (![CONSTANTS.MODE.READONLY, CONSTANTS.MODE.EDIT].includes(mode)) {
      return
    }
-    this.opt.readonly = mode === 'readonly'
+    this.opt.readonly = mode === CONSTANTS.MODE.READONLY
    if (this.opt.readonly) {
      // 取消当前激活的元素
      this.renderer.clearAllActive()
@@ -344,7 +366,17 @@ class MindMap {
    // 把实际内容变换
    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
    // 克隆一份数据
-    const clone = svg.clone()
+    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)
@@ -362,14 +394,51 @@ class MindMap {
      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()
+        }
+        delete this[plugin.instanceName]
+      }
+    }
+  }
+
+  // 实例化插件
+  initPlugin(plugin) {
+    this[plugin.instanceName] = new plugin({
+      mindMap: this,
+      pluginOpt: plugin.pluginOpt
+    })
+  }
 }

 // 插件列表
 MindMap.pluginList = []
-MindMap.usePlugin = (plugin) => {
+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 = {}) => {
--- 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.3.1",
+  "version": "0.5.0",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
@@ -28,8 +28,12 @@
    "canvg": "^3.0.7",
    "deepmerge": "^1.5.2",
    "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": [
--- a/simple-mind-map/src/AssociativeLine.js
+++ b/simple-mind-map/src/AssociativeLine.js
@@ -0,0 +1,627 @@
+import { walk, bfsWalk, throttle } from './utils/'
+import { v4 as uuid } from 'uuid'
+import {
+  getAssociativeLineTargetIndex,
+  computeCubicBezierPathPoints,
+  joinCubicBezierPath,
+  cubicBezierPath,
+  getNodePoint,
+  computeNodePoints,
+  getNodeLinePath,
+  getDefaultControlPointOffsets
+} from './utils/associativeLineUtils'
+
+// 关联线类
+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)
+    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))
+    // 拖拽控制点
+    window.addEventListener('mousemove', e => {
+      this.onControlPointMousemove(e)
+    })
+    window.addEventListener('mouseup', e => {
+      this.onControlPointMouseup(e)
+    })
+  }
+
+  // 创建箭头
+  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)
+    // 点击事件
+    clickPath.click(e => {
+      e.stopPropagation()
+      // 如果当前存在激活节点，那么取消激活节点
+      if (this.mindMap.renderer.activeNodeList.length > 0) {
+        this.clearActiveNodes()
+      } else {
+        // 否则清除当前的关联线的激活状态，如果有的话
+        this.clearActiveLine()
+        // 保存当前激活的关联线信息
+        this.activeLine = [path, clickPath, node, toNode]
+        // 让不可见的点击线显示
+        clickPath.stroke({ color: associativeLineActiveColor })
+        // 渲染控制点和连线
+        this.renderControls(
+          startPoint,
+          endPoint,
+          controlPoints[0],
+          controlPoints[1]
+        )
+        this.mindMap.emit(
+          'associative_line_click',
+          path,
+          clickPath,
+          node,
+          toNode
+        )
+      }
+    })
+    this.lineList.push([path, clickPath, node, toNode])
+  }
+
+  // 移除所有连接线
+  removeAllLines() {
+    this.lineList.forEach(line => {
+      line[0].remove()
+      line[1].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) {
+    if (!this.isCreatingLine) return
+    this.updateCreatingLine(e)
+  }
+
+  // 更新创建过程中的连接线
+  updateCreatingLine(e) {
+    let { x, y } = this.getTransformedEventPos(e)
+    let startPoint = getNodePoint(this.creatingStartNode)
+    let pathStr = cubicBezierPath(startPoint.x, startPoint.y, x, 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 } =
+      node.nodeData.data
+    let targetIndex = getAssociativeLineTargetIndex(node, toNode)
+    this.mindMap.execCommand('SET_NODE_DATA', node, {
+      associativeLineTargets: associativeLineTargets.filter((_, index) => {
+        return index !== targetIndex
+      }),
+      associativeLineTargetControlOffsets: associativeLineTargetControlOffsets
+        ? associativeLineTargetControlOffsets.filter((_, index) => {
+            return index !== targetIndex
+          })
+        : []
+    })
+  }
+
+  // 清除当前激活的节点
+  clearActiveNodes() {
+    if (this.mindMap.renderer.activeNodeList.length > 0) {
+      this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+    }
+  }
+
+  // 清除激活的线
+  clearActiveLine() {
+    if (this.activeLine) {
+      this.activeLine[1].stroke({
+        color: 'transparent'
+      })
+      this.activeLine = null
+      this.removeControls()
+    }
+  }
+
+  // 处理节点正在拖拽事件
+  onNodeDragging() {
+    if (this.isNodeDragging) return
+    this.isNodeDragging = true
+    this.lineList.forEach(line => {
+      line[0].hide()
+      line[1].hide()
+    })
+    this.hideControls()
+  }
+
+  // 处理节点拖拽完成事件
+  onNodeDragend() {
+    if (!this.isNodeDragging) return
+    this.lineList.forEach(line => {
+      line[0].show()
+      line[1].show()
+    })
+    this.showControls()
+    this.isNodeDragging = false
+  }
+
+  // 创建控制点、连线节点
+  createControlNodes() {
+    let { associativeLineActiveColor } = this.mindMap.themeConfig
+    // 连线
+    this.controlLine1 = this.draw
+      .line()
+      .stroke({ color: associativeLineActiveColor, width: 2 })
+    this.controlLine2 = this.draw
+      .line()
+      .stroke({ color: associativeLineActiveColor, width: 2 })
+    // 控制点
+    this.controlPoint1 = this.createOneControlNode('controlPoint1')
+    this.controlPoint2 = this.createOneControlNode('controlPoint2')
+  }
+
+  // 创建控制点
+  createOneControlNode(pointKey) {
+    let { associativeLineActiveColor } = this.mindMap.themeConfig
+    return this.draw
+      .circle(this.controlPointDiameter)
+      .stroke({ color: associativeLineActiveColor })
+      .fill({ color: '#fff' })
+      .click(e => {
+        e.stopPropagation()
+      })
+      .mousedown(e => {
+        this.onControlPointMousedown(e, pointKey)
+      })
+  }
+
+  // 控制点的鼠标按下事件
+  onControlPointMousedown(e, pointKey) {
+    e.stopPropagation()
+    this.isControlPointMousedown = true
+    this.mousedownControlPointKey = pointKey
+  }
+
+  // 控制点的鼠标移动事件
+  onControlPointMousemove(e) {
+    if (
+      !this.isControlPointMousedown ||
+      !this.mousedownControlPointKey ||
+      !this[this.mousedownControlPointKey]
+    )
+      return
+    e.stopPropagation()
+    e.preventDefault()
+    let radius = this.controlPointDiameter / 2
+    // 转换鼠标当前的位置
+    let { x, y } = this.getTransformedEventPos(e)
+    this.controlPointMousemoveState.pos = {
+      x,
+      y
+    }
+    // 更新当前拖拽的控制点的位置
+    this[this.mousedownControlPointKey].x(x - radius).y(y - radius)
+    let [path, clickPath, node, toNode] = this.activeLine
+    let [startPoint, endPoint] = computeNodePoints(node, toNode)
+    this.controlPointMousemoveState.startPoint = startPoint
+    this.controlPointMousemoveState.endPoint = endPoint
+    let targetIndex = getAssociativeLineTargetIndex(node, toNode)
+    this.controlPointMousemoveState.targetIndex = targetIndex
+    let offsets = []
+    let associativeLineTargetControlOffsets = node.nodeData.data.associativeLineTargetControlOffsets
+    if (!associativeLineTargetControlOffsets) {
+      // 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
+      offsets = getDefaultControlPointOffsets(startPoint, endPoint)
+    } else {
+      offsets = associativeLineTargetControlOffsets[targetIndex]
+    }
+    let point1 = null
+    let point2 = null
+    // 拖拽的是控制点1
+    if (this.mousedownControlPointKey === 'controlPoint1') {
+      point1 = {
+        x,
+        y
+      }
+      point2 = {
+        x: endPoint.x + offsets[1].x,
+        y: endPoint.y + offsets[1].y
+      }
+      // 更新控制点1的连线
+      this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
+    } else {
+      // 拖拽的是控制点2
+      point1 = {
+        x: startPoint.x + offsets[0].x,
+        y: startPoint.y + offsets[0].y
+      }
+      point2 = {
+        x,
+        y
+      }
+      // 更新控制点2的连线
+      this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
+    }
+    // 更新关联线
+    let pathStr = joinCubicBezierPath(startPoint, endPoint, point1, point2)
+    path.plot(pathStr)
+    clickPath.plot(pathStr)
+  }
+
+  // 控制点的鼠标移动事件
+  onControlPointMouseup(e) {
+    if (!this.isControlPointMousedown) return
+    e.stopPropagation()
+    e.preventDefault()
+    let { pos, startPoint, endPoint, targetIndex } =
+      this.controlPointMousemoveState
+    let [, , node] = this.activeLine
+    let offsetList = []
+    let associativeLineTargetControlOffsets = node.nodeData.data.associativeLineTargetControlOffsets
+    if (!associativeLineTargetControlOffsets) {
+      // 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
+      offsetList[targetIndex] = getDefaultControlPointOffsets(startPoint, endPoint)
+    } else {  
+      offsetList = associativeLineTargetControlOffsets
+    }
+    let offset1 = null
+    let offset2 = null
+    if (this.mousedownControlPointKey === 'controlPoint1') {
+      // 更新控制点1数据
+      offset1 = {
+        x: pos.x - startPoint.x,
+        y: pos.y - startPoint.y
+      }
+      offset2 = offsetList[targetIndex][1]
+    } else {
+      // 更新控制点2数据
+      offset1 = offsetList[targetIndex][0]
+      offset2 = {
+        x: pos.x - endPoint.x,
+        y: pos.y - endPoint.y
+      }
+    }
+    offsetList[targetIndex] = [offset1, offset2]
+    this.mindMap.execCommand('SET_NODE_DATA', node, {
+      associativeLineTargetControlOffsets: offsetList
+    })
+    // 这里要加个setTimeout0是因为draw_click事件比mouseup事件触发的晚，所以重置isControlPointMousedown需要等draw_click事件触发完以后
+    setTimeout(() => {
+      this.resetControlPoint()
+    }, 0)
+  }
+
+  // 复位控制点移动
+  resetControlPoint() {
+    this.isControlPointMousedown = false
+    this.mousedownControlPointKey = ''
+    this.controlPointMousemoveState = {
+      pos: null,
+      startPoint: null,
+      endPoint: null,
+      targetIndex: ''
+    }
+  }
+
+  // 渲染控制点
+  renderControls(startPoint, endPoint, point1, point2) {
+    if (!this.controlLine1) {
+      this.createControlNodes()
+    }
+    let radius = this.controlPointDiameter / 2
+    // 控制点和起终点的连线
+    this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
+    this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
+    // 控制点
+    this.controlPoint1.x(point1.x - radius).y(point1.y - radius)
+    this.controlPoint2.x(point2.x - radius).y(point2.y - radius)
+  }
+
+  // 删除控制点
+  removeControls() {
+    if (!this.controlLine1) return
+    ;[
+      this.controlLine1,
+      this.controlLine2,
+      this.controlPoint1,
+      this.controlPoint2
+    ].forEach(item => {
+      item.remove()
+    })
+    this.controlLine1 = null
+    this.controlLine2 = null
+    this.controlPoint1 = null
+    this.controlPoint2 = null
+  }
+
+  // 隐藏控制点
+  hideControls() {
+    if (!this.controlLine1) return
+    ;[
+      this.controlLine1,
+      this.controlLine2,
+      this.controlPoint1,
+      this.controlPoint2
+    ].forEach(item => {
+      item.hide()
+    })
+  }
+
+  // 显示控制点
+  showControls() {
+    if (!this.controlLine1) return
+    ;[
+      this.controlLine1,
+      this.controlLine2,
+      this.controlPoint1,
+      this.controlPoint2
+    ].forEach(item => {
+      item.show()
+    })
+  }
+}
+
+AssociativeLine.instanceName = 'associativeLine'
+
+export default AssociativeLine
--- a/simple-mind-map/src/BatchExecution.js
+++ b/simple-mind-map/src/BatchExecution.js
@@ -1,33 +1,4 @@
-//  在下一个事件循环里执行任务
-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 () {
-    if (pending) return
-    pending = true
-    timerFunc(handle, 0)
-  }
-}
+import { nextTick } from './utils'

 //  批量执行
 class BatchExecution {
--- a/simple-mind-map/src/Command.js
+++ b/simple-mind-map/src/Command.js
@@ -1,4 +1,4 @@
-import { copyRenderTree, simpleDeepClone } from './utils'
+import { copyRenderTree, simpleDeepClone, nextTick } from './utils'

 //  命令类
 class Command {
@@ -11,6 +11,7 @@ class Command {
    this.activeHistoryIndex = 0
    // 注册快捷键
    this.registerShortcutKeys()
+    this.addHistory = nextTick(this.addHistory, this)
  }

  //  清空历史数据
@@ -36,7 +37,7 @@ class Command {
      this.commands[name].forEach(fn => {
        fn(...args)
      })
-      if (name === 'BACK' || name === 'FORWARD') {
+      if (['BACK', 'FORWARD', 'SET_NODE_ACTIVE', 'CLEAR_ACTIVE_NODE'].includes(name)) {
        return
      }
      this.addHistory()
@@ -76,9 +77,15 @@ class Command {
      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))
    this.activeHistoryIndex = this.history.length - 1
-    this.mindMap.emit('data_change', data)
+    this.mindMap.emit('data_change', this.removeDataUid(data))
    this.mindMap.emit(
      'back_forward',
      this.activeHistoryIndex,
@@ -98,7 +105,9 @@ class Command {
        this.activeHistoryIndex,
        this.history.length
      )
-      return simpleDeepClone(this.history[this.activeHistoryIndex])
+      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
+      this.mindMap.emit('data_change', this.removeDataUid(data))
+      return data
    }
  }

@@ -110,14 +119,31 @@ class Command {
    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])
+      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)
+    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
  }
 }

--- a/simple-mind-map/src/Drag.js
+++ b/simple-mind-map/src/Drag.js
@@ -5,7 +5,6 @@ import Base from './layouts/Base'

 class Drag extends Base {
  //  构造函数
-
  constructor({ mindMap }) {
    super(mindMap.renderer)
    this.mindMap = mindMap
@@ -14,7 +13,6 @@ class Drag extends Base {
  }

  //  复位
-
  reset() {
    // 当前拖拽节点
    this.node = null
@@ -45,10 +43,11 @@ class Drag extends Base {
    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) => {
@@ -77,13 +76,14 @@ class Drag extends Base {
      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) <= 10 &&
-        Math.abs(y - this.mouseDownY) <= 10 &&
+        Math.abs(x - this.mouseDownX) <= this.checkDragOffset &&
+        Math.abs(y - this.mouseDownY) <= this.checkDragOffset &&
        !this.node.isDrag
      ) {
        return
@@ -97,7 +97,6 @@ class Drag extends Base {
  }

  //  鼠标松开事件
-
  onMouseup(e) {
    if (!this.isMousedown) {
      return
@@ -136,10 +135,10 @@ class Drag extends Base {
      this.mindMap.render()
    }
    this.reset()
+    this.mindMap.emit('node_dragend')
  }

  //  创建克隆节点
-
  createCloneNode() {
    if (!this.clone) {
      // 节点
@@ -161,7 +160,6 @@ class Drag extends Base {
  }

  //  移除克隆节点
-
  removeCloneNode() {
    if (!this.clone) {
      return
@@ -172,7 +170,6 @@ class Drag extends Base {
  }

  //  拖动中
-
  onMove(x, y) {
    if (!this.isMousedown) {
      return
@@ -199,14 +196,12 @@ class Drag extends Base {
  }

  //  检测重叠节点
-
  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
+    let x = this.mouseMoveX
+    let y = this.mouseMoveY
    this.overlapNode = null
    this.prevNode = null
    this.nextNode = null
@@ -221,35 +216,71 @@ class Drag extends Base {
      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
+      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]
        }
      }
-      // 检测兄弟节点位置
-      if (!this.prevNode && !this.nextNode && !node.isRoot) {
-        // && this.node.isBrother(node)
-        if (left <= checkRight && right >= this.cloneNodeLeft) {
-          if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
+      // 和前一个兄弟节点的距离
+      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
-            this.placeholder.size(node.width, 10).move(_left, _bottom)
-          } else if (checkBottom < top && checkBottom >= top - 10) {
+            let size = nextBrotherOffset > 0 ? nextBrotherOffset : 5
+            this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originBottom)
+          } else if (checkIsNextNode) {
            this.nextNode = node
-            this.placeholder.size(node.width, 10).move(_left, _top - 10)
+            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
          }
        }
      }
@@ -258,6 +289,30 @@ class Drag extends Base {
      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'
--- a/simple-mind-map/src/Event.js
+++ b/simple-mind-map/src/Event.js
@@ -1,4 +1,5 @@
 import EventEmitter from 'eventemitter3'
+import { CONSTANTS } from './utils/constant'

 //  事件类
 class Event extends EventEmitter {
@@ -43,12 +44,7 @@ class Event extends EventEmitter {
    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.el.addEventListener('wheel', this.onMousewheel)
    this.mindMap.svg.on('contextmenu', this.onContextmenu)
    window.addEventListener('keyup', this.onKeyup)
  }
@@ -59,7 +55,7 @@ class Event extends EventEmitter {
    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.el.removeEventListener('wheel', this.onMousewheel)
    this.mindMap.svg.off('contextmenu', this.onContextmenu)
    window.removeEventListener('keyup', this.onKeyup)
  }
@@ -76,7 +72,6 @@ class Event extends EventEmitter {

  //  鼠标按下事件
  onMousedown(e) {
-    // e.preventDefault()
    // 鼠标左键
    if (e.which === 1) {
      this.isLeftMousedown = true
@@ -88,13 +83,13 @@ class Event extends EventEmitter {

  //  鼠标移动事件
  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) {
+      e.preventDefault()
      this.emit('drag', e, this)
    }
  }
@@ -110,10 +105,17 @@ class Event extends EventEmitter {
    e.stopPropagation()
    e.preventDefault()
    let dir
-    if ((e.wheelDeltaY || e.detail) > 0) {
-      dir = 'up'
+    // 解决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 {
-      dir = 'down'
+      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
    }
    this.emit('mousewheel', e, dir, this)
  }
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -2,6 +2,7 @@ import { imgToDataUrl, downloadFile } from './utils'
 import JsPDF from 'jspdf'
 import { SVG } from '@svgdotjs/svg.js'
 import drawBackgroundImageToCanvas from './utils/simulateCSSBackgroundInCanvas'
+import { transformToMarkdown } from './parse/toMarkdown'
 const URL = window.URL || window.webkitURL || window

 //  导出类
@@ -26,7 +27,7 @@ class Export {
  }

  //  获取svg数据
-  async getSvgData() {
+  async getSvgData(domToImage) {
    let { svg, svgHTML } = this.mindMap.getSvgData()
    // 把图片的url转换成data:url类型，否则导出会丢失图片
    let imageList = svg.find('image')
@@ -36,9 +37,19 @@ class Export {
      item.attr('href', imgData)
    })
    await Promise.all(task)
+    // 如果开启了富文本编辑，需要把svg中的dom元素转换成图片
+    let nodeWithDomToImg = null
+    if (domToImage && this.mindMap.richText) {
+      let res = await this.mindMap.richText.handleSvgDomElements(svg)
+      if (res) {
+        nodeWithDomToImg = res.svg
+        svgHTML = res.svgHTML
+      }
+    }
    return {
      node: svg,
-      str: svgHTML
+      str: svgHTML,
+      nodeWithDomToImg
    }
  }

@@ -123,7 +134,7 @@ class Export {
   * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
   */
  async png() {
-    let { str } = await this.getSvgData()
+    let { str } = await this.getSvgData(true)
    // 转换成blob数据
    let blob = new Blob([str], {
      type: 'image/svg+xml'
@@ -191,8 +202,21 @@ class Export {
  }

  //  导出为svg
-  async svg(name) {
-    let { node } = await this.getSvgData()
+  // domToImage：是否将svg中的dom节点转换成图片的形式
+  // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入
+  async svg(name, domToImage = false, plusCssText) {
+    let { node, nodeWithDomToImg } = await this.getSvgData(domToImage)
+    // 开启了节点富文本编辑
+    if (this.mindMap.richText) {
+      if (domToImage) {
+        node = nodeWithDomToImg
+      } else 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()
@@ -215,6 +239,14 @@ class Export {
  smm(name, withConfig) {
    return this.json(name, withConfig)
  }
+
+  // markdown文件
+  md() {
+    let data = this.mindMap.getData()
+    let content = transformToMarkdown(data)
+    let blob = new Blob([content])
+    return URL.createObjectURL(blob)
+  }
 }

 Export.instanceName = 'doExport'
--- a/simple-mind-map/src/KeyboardNavigation.js
+++ b/simple-mind-map/src/KeyboardNavigation.js
@@ -1,5 +1,5 @@
-import { isKey } from './utils/keyMap'
 import { bfsWalk } from './utils'
+import { CONSTANTS } from './utils/constant'

 //  键盘导航类
 class KeyboardNavigation {
@@ -8,22 +8,29 @@ class KeyboardNavigation {
    this.opt = opt
    this.mindMap = opt.mindMap
    this.onKeyup = this.onKeyup.bind(this)
-    this.mindMap.on('keyup', this.onKeyup)
+    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(e) {
-    ;['Left', 'Up', 'Right', 'Down'].forEach(dir => {
-      if (isKey(e, 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()
-        }
-      }
-    })
+  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()
+    }
  }

  //  聚焦到下一个节点
@@ -95,19 +102,19 @@ class KeyboardNavigation {
      let { left, top, right, bottom } = rect
      let match = false
      // 按下了左方向键
-      if (dir === 'Left') {
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
        // 判断节点是否在当前节点的左侧
        match = right <= currentActiveNodeRect.left
        // 按下了右方向键
-      } else if (dir === 'Right') {
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
        // 判断节点是否在当前节点的右侧
        match = left >= currentActiveNodeRect.right
        // 按下了上方向键
-      } else if (dir === 'Up') {
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
        // 判断节点是否在当前节点的上面
        match = bottom <= currentActiveNodeRect.top
        // 按下了下方向键
-      } else if (dir === 'Down') {
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
        // 判断节点是否在当前节点的下面
        match = top >= currentActiveNodeRect.bottom
      }
@@ -130,22 +137,22 @@ class KeyboardNavigation {
      let rect = this.getNodeRect(node)
      let { left, top, right, bottom } = rect
      let match = false
-      if (dir === 'Left') {
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
        match =
          left < currentActiveNodeRect.left &&
          top < currentActiveNodeRect.bottom &&
          bottom > currentActiveNodeRect.top
-      } else if (dir === 'Right') {
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
        match =
          right > currentActiveNodeRect.right &&
          top < currentActiveNodeRect.bottom &&
          bottom > currentActiveNodeRect.top
-      } else if (dir === 'Up') {
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
        match =
          top < currentActiveNodeRect.top &&
          left < currentActiveNodeRect.right &&
          right > currentActiveNodeRect.left
-      } else if (dir === 'Down') {
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
        match =
          bottom > currentActiveNodeRect.bottom &&
          left < currentActiveNodeRect.right &&
@@ -179,13 +186,13 @@ class KeyboardNavigation {
      let offsetY = ccY - cY
      if (offsetX === 0 && offsetY === 0) return
      let match = false
-      if (dir === 'Left') {
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
        match = offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY
-      } else if (dir === 'Right') {
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
        match = offsetX > 0 && offsetX >= -offsetY && offsetX >= offsetY
-      } else if (dir === 'Up') {
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
        match = offsetY <= 0 && offsetY < offsetX && offsetY < -offsetX
-      } else if (dir === 'Down') {
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
        match = offsetY > 0 && -offsetY < offsetX && offsetY > offsetX
      }
      if (match) {
--- 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
@@ -7,24 +7,24 @@ import TextEdit from './TextEdit'
 import { copyNodeTree, simpleDeepClone, walk } from './utils'
 import { shapeList } from './Shape'
 import { lineStyleProps } from './themes/default'
+import { CONSTANTS } from './utils/constant'

 // 布局列表
 const layouts = {
  // 逻辑结构图
-  logicalStructure: LogicalStructure,
+  [CONSTANTS.LAYOUT.LOGICAL_STRUCTURE]: LogicalStructure,
  // 思维导图
-  mindMap: MindMap,
+  [CONSTANTS.LAYOUT.MIND_MAP]: MindMap,
  // 目录组织图
-  catalogOrganization: CatalogOrganization,
+  [CONSTANTS.LAYOUT.CATALOG_ORGANIZATION]: CatalogOrganization,
  // 组织结构图
-  organizationStructure: OrganizationStructure
+  [CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE]: OrganizationStructure
 }

 //  渲染

 class Render {
  //  构造函数
-
  constructor(opt = {}) {
    this.opt = opt
    this.mindMap = opt.mindMap
@@ -34,6 +34,15 @@ class Render {
    this.renderTree = merge({}, this.mindMap.opt.data || {})
    // 是否重新渲染
    this.reRender = false
+    // 是否正在渲染中
+    this.isRendering = false
+    // 是否存在等待渲染
+    this.hasWaitRendering = false
+    // 用于缓存节点
+    this.nodeCache = {}
+    this.lastNodeCache = {}
+    // 触发render的来源
+    this.renderSource = ''
    // 当前激活的节点列表
    this.activeNodeList = []
    // 根节点
@@ -51,17 +60,15 @@ class Render {
  }

  //  设置布局结构
-
  setLayout() {
    this.layout = new (
      layouts[this.mindMap.opt.layout]
        ? layouts[this.mindMap.opt.layout]
-        : layouts.logicalStructure
+        : layouts[CONSTANTS.LAYOUT.LOGICAL_STRUCTURE]
    )(this)
  }

  //   绑定事件
-
  bindEvent() {
    // 点击事件
    this.mindMap.on('draw_click', () => {
@@ -73,7 +80,6 @@ class Render {
  }

  //  注册命令
-
  registerCommands() {
    // 全选
    this.selectAll = this.selectAll.bind(this)
@@ -175,7 +181,6 @@ class Render {
  }

  //  注册快捷键
-
  registerShortcutKeys() {
    // 插入下级节点
    this.mindMap.keyCommand.addShortcut('Tab', () => {
@@ -220,7 +225,6 @@ class Render {
  }

  //  开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突
-
  startTextEdit() {
    this.mindMap.keyCommand.save()
    // this.mindMap.keyCommand.removeShortcut('Del|Backspace')
@@ -229,7 +233,6 @@ class Render {
  }

  //  结束文字编辑，会恢复回车键和删除键相关快捷键
-
  endTextEdit() {
    this.mindMap.keyCommand.restore()
    // this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
@@ -238,22 +241,51 @@ class Render {
  }

  //   渲染
-
-  render() {
+  render(callback = () => {}, source) {
+    // 如果当前还没有渲染完毕，不再触发渲染
+    if (this.isRendering) {
+      // 等待当前渲染完毕后再进行一次渲染
+      this.hasWaitRendering = true
+      return
+    }
+    this.isRendering = true
+    // 触发当前重新渲染的来源
+    this.renderSource = source
+    // 节点缓存
+    this.lastNodeCache = this.nodeCache
+    this.nodeCache = {}
+    // 重新渲染需要清除激活状态
    if (this.reRender) {
      this.clearActive()
    }
+    // 计算布局
    this.layout.doLayout(root => {
+      // 删除本次渲染时不再需要的节点
+      Object.keys(this.lastNodeCache).forEach((uid) => {
+        if (!this.nodeCache[uid]) {
+          this.lastNodeCache[uid].destroy()
+          if (this.lastNodeCache[uid].parent) {
+            this.lastNodeCache[uid].parent.removeLine()
+          }
+        }
+      })
+      // 更新根节点
      this.root = root
+      // 渲染节点
      this.root.render(() => {
+        this.isRendering = false
        this.mindMap.emit('node_tree_render_end')
+        callback && callback()
+        if (this.hasWaitRendering) {
+          this.hasWaitRendering = false
+          this.render(callback, source)
+        }
      })
    })
    this.mindMap.emit('node_active', null, this.activeNodeList)
  }

  //  清除当前激活的节点
-
  clearActive() {
    this.activeNodeList.forEach(item => {
      this.setNodeActive(item, false)
@@ -262,7 +294,6 @@ class Render {
  }

  //  清除当前所有激活节点，并会触发事件
-
  clearAllActive() {
    if (this.activeNodeList.length <= 0) {
      return
@@ -272,7 +303,6 @@ class Render {
  }

  //   添加节点到激活列表里
-
  addActiveNode(node) {
    let index = this.findActiveNodeIndex(node)
    if (index === -1) {
@@ -281,7 +311,6 @@ class Render {
  }

  //  在激活列表里移除某个节点
-
  removeActiveNode(node) {
    let index = this.findActiveNodeIndex(node)
    if (index === -1) {
@@ -291,7 +320,6 @@ class Render {
  }

  //  检索某个节点在激活列表里的索引
-
  findActiveNodeIndex(node) {
    return this.activeNodeList.findIndex(item => {
      return item === node
@@ -299,7 +327,6 @@ class Render {
  }

  //  获取节点在同级里的索引位置
-
  getNodeIndex(node) {
    return node.parent
      ? node.parent.children.findIndex(item => {
@@ -309,7 +336,6 @@ class Render {
  }

  //  全选
-
  selectAll() {
    walk(
      this.root,
@@ -319,7 +345,7 @@ class Render {
          node.nodeData.data.isActive = true
          this.addActiveNode(node)
          setTimeout(() => {
-            node.renderNode()
+            node.updateNodeShape()
          }, 0)
        }
      },
@@ -331,47 +357,54 @@ class Render {
  }

  //  回退
-
  back(step) {
    this.clearAllActive()
    let data = this.mindMap.command.back(step)
    if (data) {
      this.renderTree = data
-      this.mindMap.reRender()
+      this.mindMap.render()
    }
  }

  //  前进
-
  forward(step) {
    this.clearAllActive()
    let data = this.mindMap.command.forward(step)
    if (data) {
      this.renderTree = data
-      this.mindMap.reRender()
+      this.mindMap.render()
    }
  }

-  //  插入同级节点，多个节点只会操作第一个节点
+  // 规范指定节点数据
+  formatAppointNodes(appointNodes) {
+    if (!appointNodes) return []
+    return Array.isArray(appointNodes) ? appointNodes: [appointNodes]
+  }

-  insertNode() {
-    if (this.activeNodeList.length <= 0) {
+  //  插入同级节点，多个节点只会操作第一个节点
+  insertNode(openEdit = true, appointNodes = [], appointData = null) {
+    appointNodes = this.formatAppointNodes(appointNodes)
+    if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
      return
    }
-    let first = this.activeNodeList[0]
+    let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
+    let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
+    let first = list[0]
    if (first.isRoot) {
-      this.insertChildNode()
+      this.insertChildNode(openEdit, appointNodes, appointData)
    } else {
-      let text = first.layerIndex === 1 ? '二级节点' : '分支主题'
+      let text = first.layerIndex === 1 ? defaultInsertSecondLevelNodeText : defaultInsertBelowSecondLevelNodeText
      if (first.layerIndex === 1) {
-        first.parent.initRender = true
+        first.parent.destroy()
      }
      let index = this.getNodeIndex(first)
      first.parent.nodeData.children.splice(index + 1, 0, {
-        inserting: true,
+        inserting: openEdit,
        data: {
          text: text,
-          expand: true
+          expand: true,
+          ...(appointData || {})
        },
        children: []
      })
@@ -380,38 +413,37 @@ class Render {
  }

  //  插入子节点
-
-  insertChildNode() {
-    if (this.activeNodeList.length <= 0) {
+  insertChildNode(openEdit = true, appointNodes = [], appointData = null) {
+    appointNodes = this.formatAppointNodes(appointNodes)
+    if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
      return
    }
-    this.activeNodeList.forEach(node => {
+    let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
+    let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
+    list.forEach(node => {
      if (!node.nodeData.children) {
        node.nodeData.children = []
      }
-      let text = node.isRoot ? '二级节点' : '分支主题'
+      let text = node.isRoot ? defaultInsertSecondLevelNodeText : defaultInsertBelowSecondLevelNodeText
      node.nodeData.children.push({
-        inserting: true,
+        inserting: openEdit,
        data: {
          text: text,
-          expand: true
+          expand: true,
+          ...(appointData || {})
        },
        children: []
      })
      // 插入子节点时自动展开子节点
      node.nodeData.data.expand = true
      if (node.isRoot) {
-        node.initRender = true
-        // this.mindMap.batchExecution.push('renderNode' + index, () => {
-        //     node.renderNode()
-        // })
+        node.destroy()
      }
    })
    this.mindMap.render()
  }

  //  上移节点，多个节点只会操作第一个节点
-
  upNode() {
    if (this.activeNodeList.length <= 0) {
      return
@@ -439,7 +471,6 @@ class Render {
  }

  //  下移节点，多个节点只会操作第一个节点
-
  downNode() {
    if (this.activeNodeList.length <= 0) {
      return
@@ -467,11 +498,12 @@ class Render {
  }

  //  将节点移动到另一个节点的前面
-
  insertBefore(node, exist) {
    if (node.isRoot) {
      return
    }
+    // 如果是二级节点变成了下级节点，或是下级节点变成了二级节点，节点样式需要更新
+    let nodeLayerChanged = (node.layerIndex === 1 && exist.layerIndex !== 1) || (node.layerIndex !== 1 && exist.layerIndex === 1)
    // 移动节点
    let nodeParent = node.parent
    let nodeBorthers = nodeParent.children
@@ -495,15 +527,20 @@ class Render {
    }
    existBorthers.splice(existIndex, 0, node)
    existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
-    this.mindMap.render()
+    this.mindMap.render(() => {
+      if (nodeLayerChanged) {
+        node.reRender()
+      }
+    })
  }

  //  将节点移动到另一个节点的后面
-
  insertAfter(node, exist) {
    if (node.isRoot) {
      return
    }
+    // 如果是二级节点变成了下级节点，或是下级节点变成了二级节点，节点样式需要更新
+    let nodeLayerChanged = (node.layerIndex === 1 && exist.layerIndex !== 1) || (node.layerIndex !== 1 && exist.layerIndex === 1)
    // 移动节点
    let nodeParent = node.parent
    let nodeBorthers = nodeParent.children
@@ -528,44 +565,55 @@ class Render {
    existIndex++
    existBorthers.splice(existIndex, 0, node)
    existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
-    this.mindMap.render()
+    this.mindMap.render(() => {
+      if (nodeLayerChanged) {
+        node.reRender()
+      }
+    })
  }

  //  移除节点
-
-  removeNode() {
-    if (this.activeNodeList.length <= 0) {
+  removeNode(appointNodes = []) {
+    appointNodes = this.formatAppointNodes(appointNodes)
+    if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
      return
    }
-    for (let i = 0; i < this.activeNodeList.length; i++) {
-      let node = this.activeNodeList[i]
-      if (node.isGeneralization) {
-        // 删除概要节点
-        this.setNodeData(node.generalizationBelongNode, {
-          generalization: null
-        })
-        node.generalizationBelongNode.update()
-        this.removeActiveNode(node)
-        i--
-      } else if (node.isRoot) {
-        node.children.forEach(child => {
-          child.remove()
-        })
-        node.children = []
-        node.nodeData.children = []
-        break
-      } else {
-        this.removeActiveNode(node)
-        this.removeOneNode(node)
-        i--
+    let isAppointNodes = appointNodes.length > 0
+    let list = isAppointNodes ? appointNodes : this.activeNodeList
+    let root = list.find((node) => {
+      return node.isRoot
+    })
+    if (root) {
+      this.clearActive()
+      root.children.forEach(child => {
+        child.remove()
+      })
+      root.children = []
+      root.nodeData.children = []
+    } else {
+      for (let i = 0; i < list.length; i++) {
+        let node = list[i]
+        if (isAppointNodes) list.splice(i, 1)
+        if (node.isGeneralization) {
+          // 删除概要节点
+          this.setNodeData(node.generalizationBelongNode, {
+            generalization: null
+          })
+          node.generalizationBelongNode.update()
+          this.removeActiveNode(node)
+          i--
+        } else {
+          this.removeActiveNode(node)
+          this.removeOneNode(node)
+          i--
+        }
      }
    }
-    this.mindMap.emit('node_active', null, [])
+    this.mindMap.emit('node_active', null, this.activeNodeList)
    this.mindMap.render()
  }

  //  移除某个指定节点
-
  removeOneNode(node) {
    let index = this.getNodeIndex(node)
    node.remove()
@@ -574,7 +622,6 @@ class Render {
  }

  //  复制节点，多个节点只会操作第一个节点
-
  copyNode() {
    if (this.activeNodeList.length <= 0) {
      return
@@ -583,7 +630,6 @@ class Render {
  }

  //  剪切节点，多个节点只会操作第一个节点
-
  cutNode(callback) {
    if (this.activeNodeList.length <= 0) {
      return
@@ -603,24 +649,22 @@ class Render {
  }

  //  移动一个节点作为另一个节点的子节点
-
  moveNodeTo(node, toNode) {
    if (node.isRoot) {
      return
    }
-    let copyData = copyNodeTree({}, node)
+    let copyData = copyNodeTree({}, node, false, true)
    this.removeActiveNode(node)
    this.removeOneNode(node)
    this.mindMap.emit('node_active', null, this.activeNodeList)
    toNode.nodeData.children.push(copyData)
    this.mindMap.render()
    if (toNode.isRoot) {
-      toNode.renderNode()
+      toNode.destroy()
    }
  }

  //   粘贴节点到节点
-
  pasteNode(data) {
    if (this.activeNodeList.length <= 0) {
      return
@@ -632,7 +676,6 @@ class Render {
  }

  //  设置节点样式
-
  setNodeStyle(node, prop, value, isActive) {
    let data = {}
    if (isActive) {
@@ -647,6 +690,17 @@ class Render {
        [prop]: value
      }
    }
+    // 如果开启了富文本，则需要应用到富文本上
+    if (this.mindMap.richText) {
+      let config = this.mindMap.richText.normalStyleToRichTextStyle({
+        [prop]: value
+      })
+      if (Object.keys(config).length > 0) {
+        this.mindMap.richText.showEditText(node)
+        this.mindMap.richText.formatAllText(config)
+        this.mindMap.richText.hideEditText()
+      }
+    }
    this.setNodeDataRender(node, data)
    // 更新了连线的样式
    if (lineStyleProps.includes(prop)) {
@@ -655,16 +709,14 @@ class Render {
  }

  //  设置节点是否激活
-
  setNodeActive(node, active) {
    this.setNodeData(node, {
      isActive: active
    })
-    node.renderNode()
+    node.updateNodeShape()
  }

  //  设置节点是否展开
-
  setNodeExpand(node, expand) {
    this.setNodeData(node, {
      expand
@@ -688,7 +740,6 @@ class Render {
  }

  //  展开所有
-
  expandAllNode() {
    walk(
      this.renderTree,
@@ -703,11 +754,10 @@ class Render {
      0,
      0
    )
-    this.mindMap.reRender()
+    this.mindMap.render()
  }

  //  收起所有
-
  unexpandAllNode() {
    walk(
      this.renderTree,
@@ -723,11 +773,12 @@ class Render {
      0,
      0
    )
-    this.mindMap.reRender()
+    this.mindMap.render(() => {
+      this.mindMap.view.reset()
+    })
  }

  //  展开到指定层级
-
  expandToLevel(level) {
    walk(
      this.renderTree,
@@ -741,11 +792,10 @@ class Render {
      0,
      0
    )
-    this.mindMap.reRender()
+    this.mindMap.render()
  }

  //  切换激活节点的展开状态
-
  toggleActiveExpand() {
    this.activeNodeList.forEach(node => {
      if (node.nodeData.children.length <= 0) {
@@ -756,7 +806,6 @@ class Render {
  }

  //  切换节点展开状态
-
  toggleNodeExpand(node) {
    this.mindMap.execCommand(
      'SET_NODE_EXPAND',
@@ -766,15 +815,14 @@ class Render {
  }

  //  设置节点文本
-
-  setNodeText(node, text) {
+  setNodeText(node, text, richText) {
    this.setNodeDataRender(node, {
-      text
+      text,
+      richText
    })
  }

  //  设置节点图片
-
  setNodeImage(node, { url, title, width, height }) {
    this.setNodeDataRender(node, {
      image: url,
@@ -787,7 +835,6 @@ class Render {
  }

  //  设置节点图标
-
  setNodeIcon(node, icons) {
    this.setNodeDataRender(node, {
      icon: icons
@@ -795,7 +842,6 @@ class Render {
  }

  //  设置节点超链接
-
  setNodeHyperlink(node, link, title = '') {
    this.setNodeDataRender(node, {
      hyperlink: link,
@@ -804,7 +850,6 @@ class Render {
  }

  //  设置节点备注
-
  setNodeNote(node, note) {
    this.setNodeDataRender(node, {
      note
@@ -812,7 +857,6 @@ class Render {
  }

  //  设置节点标签
-
  setNodeTag(node, tag) {
    this.setNodeDataRender(node, {
      tag
@@ -820,7 +864,6 @@ class Render {
  }

  //  添加节点概要
-
  addGeneralization(data) {
    if (this.activeNodeList.length <= 0) {
      return
@@ -840,7 +883,6 @@ class Render {
  }

  //  删除节点概要
-
  removeGeneralization() {
    if (this.activeNodeList.length <= 0) {
      return
@@ -858,7 +900,6 @@ class Render {
  }

  //  设置节点自定义位置
-
  setNodeCustomPosition(node, left = undefined, top = undefined) {
    let nodeList = [node] || this.activeNodeList
    nodeList.forEach(item => {
@@ -870,7 +911,6 @@ class Render {
  }

  //  一键整理布局，即去除自定义位置
-
  resetLayout() {
    walk(
      this.root,
@@ -892,7 +932,6 @@ class Render {
  }

  //  设置节点形状
-
  setNodeShape(node, shape) {
    if (!shape || !shapeList.includes(shape)) {
      return
@@ -904,7 +943,6 @@ class Render {
  }

  //  更新节点数据
-
  setNodeData(node, data) {
    Object.keys(data).forEach(key => {
      node.nodeData.data[key] = data[key]
@@ -912,11 +950,9 @@ class Render {
  }

  //  设置节点数据，并判断是否渲染
-
  setNodeDataRender(node, data) {
    this.setNodeData(node, data)
-    let changed = node.getSize()
-    node.renderNode()
+    let changed = node.reRender()
    if (changed) {
      if (node.isGeneralization) {
        // 概要节点
@@ -927,7 +963,6 @@ class Render {
  }

  //  移动节点到画布中心
-
  moveNodeToCenter(node) {
    let halfWidth = this.mindMap.width / 2
    let halfHeight = this.mindMap.height / 2
--- a/simple-mind-map/src/RichText.js
+++ b/simple-mind-map/src/RichText.js
@@ -0,0 +1,461 @@
+import Quill from 'quill'
+import 'quill/dist/quill.snow.css'
+import './css/quill.css'
+import html2canvas from 'html2canvas'
+import { Image as SvgImage } from '@svgdotjs/svg.js'
+import { walk } from './utils'
+import { CONSTANTS } from './utils/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.initOpt()
+    this.extendQuill()
+  }
+
+  // 处理选项参数
+  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()
+    if (!this.textEditNode) {
+      this.textEditNode = document.createElement('div')
+      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: 3px 5px;margin-left: -5px;margin-top: -3px;`
+      document.body.appendChild(this.textEditNode)
+    }
+    // 原始宽高
+    let g = node._textData.node
+    let originWidth = g.attr('data-width')
+    let originHeight = g.attr('data-height')
+    // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
+    let bgColor = node.style.merge('fillColor')
+    this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? '#fff' : bgColor
+    this.textEditNode.style.minWidth = originWidth + 'px'
+    this.textEditNode.style.minHeight = originHeight + 'px'
+    this.textEditNode.style.left =
+      rect.left + (rect.width - originWidth) / 2 + 'px'
+    this.textEditNode.style.top =
+      rect.top + (rect.height - originHeight) / 2 + 'px'
+    this.textEditNode.style.display = 'block'
+    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
+    this.textEditNode.style.transform = `scale(${rect.width / originWidth}, ${
+      rect.height / originHeight
+    })`
+    if (!node.nodeData.data.richText) {
+      // 还不是富文本的情况
+      let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
+      let html = `<p>${text}</p>`
+      this.textEditNode.innerHTML = html
+    } else {
+      this.textEditNode.innerHTML = 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)
+    }
+  }
+
+  // 如果是非富文本的情况，需要手动应用文本样式
+  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.formatAllText(style)
+  }
+
+  // 隐藏文本编辑控件，即完成编辑
+  hideEditText() {
+    if (!this.showTextEdit) {
+      return
+    }
+    let html = this.quill.container.firstChild.innerHTML
+    // 去除最后的空行
+    html = html.replace(/<p><br><\/p>$/, '')
+    this.mindMap.renderer.activeNodeList.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,
+      this.mindMap.renderer.activeNodeList
+    )
+    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
+        )
+      }
+    })
+  }
+
+  // 选中全部
+  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.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
+  }
+
+  // 将svg中嵌入的dom元素转换成图片
+  async _handleSvgDomElements(svg) {
+    svg = svg.clone()
+    let foreignObjectList = svg.find('foreignObject')
+    let task = foreignObjectList.map(async item => {
+      let clone = item.first().node.cloneNode(true)
+      let div = document.createElement('div')
+      div.style.cssText = `position: fixed; left: -999999px;`
+      div.appendChild(clone)
+      this.mindMap.el.appendChild(div)
+      let canvas = await html2canvas(clone, {
+        backgroundColor: null
+      })
+      this.mindMap.el.removeChild(div)
+      let imgNode = new SvgImage()
+        .load(canvas.toDataURL())
+        .size(canvas.width, canvas.height)
+      item.replace(imgNode)
+    })
+    await Promise.all(task)
+    return {
+      svg: svg,
+      svgHTML: svg.svg()
+    }
+  }
+
+  // 将svg中嵌入的dom元素转换成图片
+  handleSvgDomElements(svg) {
+    return new Promise((resolve, reject) => {
+      svg = svg.clone()
+      let foreignObjectList = svg.find('foreignObject')
+      let index = 0
+      let len = foreignObjectList.length
+      let transform = async () => {
+        this.mindMap.emit('transforming-dom-to-images', index, len)
+        try {
+          let item = foreignObjectList[index++]
+          let parent = item.parent()
+          let clone = item.first().node.cloneNode(true)
+          let div = document.createElement('div')
+          div.style.cssText = `position: fixed; left: -999999px;`
+          div.appendChild(clone)
+          this.mindMap.el.appendChild(div)
+          let canvas = await html2canvas(clone, {
+            backgroundColor: null
+          })
+          // 优先使用原始宽高，因为当设备的window.devicePixelRatio不为1时，html2canvas输出的图片会更大
+          let imgNodeWidth = parent.attr('data-width') || canvas.width
+          let imgNodeHeight = parent.attr('data-height') || canvas.height
+          this.mindMap.el.removeChild(div)
+          let imgNode = new SvgImage()
+            .load(canvas.toDataURL())
+            .size(imgNodeWidth, imgNodeHeight)
+            .x((parent ? parent.attr('data-offsetx') : 0) || 0)
+          item.replace(imgNode)
+          if (index <= len - 1) {
+            setTimeout(() => {
+              transform()
+            }, 0)
+          } else {
+            resolve({
+              svg: svg,
+              svgHTML: svg.svg()
+            })
+          }
+        } catch (error) {
+          reject(error)
+        }
+      }
+      if (len > 0) {
+        transform()
+      } else {
+        resolve(null)
+      }
+    })
+  }
+
+  // 将所有节点转换成非富文本节点
+  transformAllNodesToNormalNode() {
+    let div = document.createElement('div')
+    walk(
+      this.mindMap.renderer.renderTree,
+      null,
+      node => {
+        if (node.data.richText) {
+          node.data.richText = false
+          div.innerHTML = node.data.text
+          node.data.text = div.textContent
+          // 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)
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.transformAllNodesToNormalNode()
+  }
+}
+
+RichText.instanceName = 'richText'
+
+export default RichText
--- a/simple-mind-map/src/Shape.js
+++ b/simple-mind-map/src/Shape.js
@@ -1,3 +1,6 @@
+import { Rect, Polygon, Path } from '@svgdotjs/svg.js'
+import { CONSTANTS } from './utils/constant'
+
 //  节点形状类
 export default class Shape {
  constructor(node) {
@@ -13,37 +16,37 @@ export default class Shape {
    const actHeight = height + paddingY * 2
    const actOffset = Math.abs(actWidth - actHeight)
    switch (shape) {
-      case 'roundedRectangle':
+      case CONSTANTS.SHAPE.ROUNDED_RECTANGLE:
        return {
          paddingX: height > width ? (height - width) / 2 : 0,
          paddingY: 0
        }
-      case 'diamond':
+      case CONSTANTS.SHAPE.DIAMOND:
        return {
          paddingX: width / 2,
          paddingY: height / 2
        }
-      case 'parallelogram':
+      case CONSTANTS.SHAPE.PARALLELOGRAM:
        return {
          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
          paddingY: 0
        }
-      case 'outerTriangularRectangle':
+      case CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE:
        return {
          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
          paddingY: 0
        }
-      case 'innerTriangularRectangle':
+      case CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE:
        return {
          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
          paddingY: 0
        }
-      case 'ellipse':
+      case CONSTANTS.SHAPE.ELLIPSE:
        return {
          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
          paddingY: paddingY <= 0 ? defaultPaddingY : 0
        }
-      case 'circle':
+      case CONSTANTS.SHAPE.CIRCLE:
        return {
          paddingX: actHeight > actWidth ? actOffset / 2 : 0,
          paddingY: actHeight < actWidth ? actOffset / 2 : 0
@@ -62,30 +65,30 @@ export default class Shape {
    let { width, height } = this.node
    let node = null
    // 矩形
-    if (shape === 'rectangle') {
-      node = this.node.group.rect(width, height)
-    } else if (shape === 'diamond') {
+    if (shape === CONSTANTS.SHAPE.RECTANGLE) {
+      node = new Rect().size(width, height)
+    } else if (shape === CONSTANTS.SHAPE.DIAMOND) {
      // 菱形
      node = this.createDiamond()
-    } else if (shape === 'parallelogram') {
+    } else if (shape === CONSTANTS.SHAPE.PARALLELOGRAM) {
      // 平行四边形
      node = this.createParallelogram()
-    } else if (shape === 'roundedRectangle') {
+    } else if (shape === CONSTANTS.SHAPE.ROUNDED_RECTANGLE) {
      // 圆角矩形
      node = this.createRoundedRectangle()
-    } else if (shape === 'octagonalRectangle') {
+    } else if (shape === CONSTANTS.SHAPE.OCTAGONAL_RECTANGLE) {
      // 八角矩形
      node = this.createOctagonalRectangle()
-    } else if (shape === 'outerTriangularRectangle') {
+    } else if (shape === CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE) {
      // 外三角矩形
      node = this.createOuterTriangularRectangle()
-    } else if (shape === 'innerTriangularRectangle') {
+    } else if (shape === CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE) {
      // 内三角矩形
      node = this.createInnerTriangularRectangle()
-    } else if (shape === 'ellipse') {
+    } else if (shape === CONSTANTS.SHAPE.ELLIPSE) {
      // 椭圆
      node = this.createEllipse()
-    } else if (shape === 'circle') {
+    } else if (shape === CONSTANTS.SHAPE.CIRCLE) {
      // 圆
      node = this.createCircle()
    }
@@ -105,12 +108,12 @@ export default class Shape {
    let bottomY = height
    let leftX = 0
    let leftY = halfHeight
-    return this.node.group.polygon(`
-            ${topX}, ${topY}
-            ${rightX}, ${rightY}
-            ${bottomX}, ${bottomY}
-            ${leftX}, ${leftY}
-        `)
+    return new Polygon().plot([
+      [topX, topY],
+      [rightX, rightY],
+      [bottomX, bottomY],
+      [leftX, leftY]
+    ])
  }

  //  创建平行四边形
@@ -118,41 +121,41 @@ export default class Shape {
    let { paddingX } = this.node.getPaddingVale()
    paddingX = paddingX || this.node.shapePadding.paddingX
    let { width, height } = this.node
-    return this.node.group.polygon(`
-            ${paddingX}, ${0}
-            ${width}, ${0}
-            ${width - paddingX}, ${height}
-            ${0}, ${height}
-        `)
+    return new Polygon().plot([
+      [paddingX, 0],
+      [width, 0],
+      [width - paddingX, height],
+      [0, height]
+    ])
  }

  //  创建圆角矩形
  createRoundedRectangle() {
    let { width, height } = this.node
    let halfHeight = height / 2
-    return this.node.group.path(`
-            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}
-        `)
+    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 this.node.group.polygon(`
-            ${0}, ${w}
-            ${w}, ${0}
-            ${width - w}, ${0}
-            ${width}, ${w}
-            ${width}, ${height - w}
-            ${width - w}, ${height}
-            ${w}, ${height}
-            ${0}, ${height - w}
-        `)
+    return new Polygon().plot([
+      [0, w],
+      [w, 0],
+      [width - w, 0],
+      [width, w],
+      [width, height - w],
+      [width - w, height],
+      [w, height],
+      [0, height - w]
+    ])
  }

  //  创建外三角矩形
@@ -160,14 +163,14 @@ export default class Shape {
    let { paddingX } = this.node.getPaddingVale()
    paddingX = paddingX || this.node.shapePadding.paddingX
    let { width, height } = this.node
-    return this.node.group.polygon(`
-            ${paddingX}, ${0}
-            ${width - paddingX}, ${0}
-            ${width}, ${height / 2}
-            ${width - paddingX}, ${height}
-            ${paddingX}, ${height}
-            ${0}, ${height / 2}
-        `)
+    return new Polygon().plot([
+      [paddingX, 0],
+      [width - paddingX, 0],
+      [width, height / 2],
+      [width - paddingX, height],
+      [paddingX, height],
+      [0, height / 2]
+    ])
  }

  //  创建内三角矩形
@@ -175,14 +178,14 @@ export default class Shape {
    let { paddingX } = this.node.getPaddingVale()
    paddingX = paddingX || this.node.shapePadding.paddingX
    let { width, height } = this.node
-    return this.node.group.polygon(`
-            ${0}, ${0}
-            ${width}, ${0}
-            ${width - paddingX / 2}, ${height / 2}
-            ${width}, ${height}
-            ${0}, ${height}
-            ${paddingX / 2}, ${height / 2}
-        `)
+    return new Polygon().plot([
+      [0, 0],
+      [width, 0],
+      [width - paddingX / 2, height / 2],
+      [width, height],
+      [0, height],
+      [paddingX / 2, height / 2]
+    ])
  }

  //  创建椭圆
@@ -190,12 +193,12 @@ export default class Shape {
    let { width, height } = this.node
    let halfWidth = width / 2
    let halfHeight = height / 2
-    return this.node.group.path(`
-            M${halfWidth},0
-            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
-            M${halfWidth},${height} 
-            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
-        `)
+    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} 
+    `)
  }

  //  创建圆
@@ -203,24 +206,24 @@ export default class Shape {
    let { width, height } = this.node
    let halfWidth = width / 2
    let halfHeight = height / 2
-    return this.node.group.path(`
-            M${halfWidth},0
-            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
-            M${halfWidth},${height} 
-            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
-        `)
+    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 = [
-  'rectangle',
-  'diamond',
-  'parallelogram',
-  'roundedRectangle',
-  'octagonalRectangle',
-  'outerTriangularRectangle',
-  'innerTriangularRectangle',
-  'ellipse',
-  'circle'
+  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/Style.js
+++ b/simple-mind-map/src/Style.js
@@ -2,10 +2,8 @@ import { tagColorList } from './utils/constant'
 const rootProp = ['paddingX', 'paddingY']

 //  样式类
-
 class Style {
  //   设置背景样式
-
  static setBackgroundStyle(el, themeConfig) {
    let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig
    el.style.backgroundColor = backgroundColor
@@ -20,35 +18,27 @@ class Style {
  }

  //  构造函数
-
-  constructor(ctx, themeConfig) {
+  constructor(ctx) {
    this.ctx = ctx
-    this.themeConfig = themeConfig
-  }
-
-  //  更新主题配置
-
-  updateThemeConfig(themeConfig) {
-    this.themeConfig = themeConfig
  }

  //  合并样式
-
  merge(prop, root, isActive) {
+    let themeConfig = this.ctx.mindMap.themeConfig
    // 三级及以下节点
-    let defaultConfig = this.themeConfig.node
+    let defaultConfig = themeConfig.node
    if (root || rootProp.includes(prop)) {
      // 直接使用最外层样式
-      defaultConfig = this.themeConfig
+      defaultConfig = themeConfig
    } else if (this.ctx.isGeneralization) {
      // 概要节点
-      defaultConfig = this.themeConfig.generalization
+      defaultConfig = themeConfig.generalization
    } else if (this.ctx.layerIndex === 0) {
      // 根节点
-      defaultConfig = this.themeConfig.root
+      defaultConfig = themeConfig.root
    } else if (this.ctx.layerIndex === 1) {
      // 二级节点
-      defaultConfig = this.themeConfig.second
+      defaultConfig = themeConfig.second
    }
    // 激活状态
    if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
@@ -68,39 +58,35 @@ class Style {
  }

  //  获取某个样式值
-
  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.themeConfig.nodeUseLineStyle &&
-      !this.ctx.nodeData.data.isActive
-    ) {
-      return
-    }
+    // 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'),
@@ -109,7 +95,6 @@ class Style {
  }

  //  文字
-
  text(node) {
    node
      .fill({
@@ -124,16 +109,26 @@ class Style {
      })
  }

-  //  html文字节点
+  // 获取文本样式
+  getTextFontStyle() {
+    return { 
+      italic: this.merge('fontStyle') === 'italic', 
+      bold: this.merge('fontWeight'), 
+      fontSize: this.merge('fontSize'), 
+      fontFamily: this.merge('fontFamily')
+    }
+  }

-  domText(node, fontSizeScale = 1) {
+  //  html文字节点
+  domText(node, fontSizeScale = 1, textLines) {
    node.style.fontFamily = this.merge('fontFamily')
    node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
    node.style.fontWeight = this.merge('fontWeight') || 'normal'
+    node.style.lineHeight = textLines === 1 ? 'normal' : this.merge('lineHeight')
+    node.style.fontStyle = this.merge('fontStyle')
  }

  //  标签文字
-
  tagText(node, index) {
    node
      .fill({
@@ -145,7 +140,6 @@ class Style {
  }

  //  标签矩形
-
  tagRect(node, index) {
    node.fill({
      color: tagColorList[index].background
@@ -153,7 +147,6 @@ class Style {
  }

  //  内置图标
-
  iconNode(node) {
    node.attr({
      fill: this.merge('color')
@@ -161,13 +154,11 @@ class Style {
  }

  //  连线
-
  line(node, { width, color, dasharray } = {}) {
    node.stroke({ width, color, dasharray }).fill({ color: 'none' })
  }

  //  概要连线
-
  generalizationLine(node) {
    node
      .stroke({
@@ -177,11 +168,15 @@ class Style {
      .fill({ color: 'none' })
  }

-  //  按钮
-
-  iconBtn(node, fillNode) {
-    node.fill({ color: '#808080' })
-    fillNode.fill({ color: '#fff' })
+  //  展开收起按钮
+  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 })
  }
 }

--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -23,6 +23,10 @@ export default class TextEdit {
      // 隐藏文本编辑框
      this.hideEditTextBox()
    })
+    this.mindMap.on('svg_mousedown', () => {
+      // 隐藏文本编辑框
+      this.hideEditTextBox()
+    })
    // 展开收缩按钮点击事件
    this.mindMap.on('expand_btn_click', () => {
      this.hideEditTextBox()
@@ -50,7 +54,12 @@ export default class TextEdit {

  //  显示文本编辑框
  show(node) {
-    this.showEditTextBox(node, node._textData.node.node.getBoundingClientRect())
+    let rect = node._textData.node.node.getBoundingClientRect()
+    if (this.mindMap.richText) {
+      this.mindMap.richText.showEditText(node, rect)
+      return
+    }
+    this.showEditTextBox(node, rect)
  }

  //  显示文本编辑框
@@ -59,22 +68,28 @@ export default class TextEdit {
    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;`
+      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()
      })
      document.body.appendChild(this.textEditNode)
    }
-    node.style.domText(this.textEditNode, this.mindMap.view.scale)
-    this.textEditNode.innerHTML = node.nodeData.data.text
-      .split(/\n/gim)
-      .join('<br>')
+    let scale = this.mindMap.view.scale
+    let lineHeight = node.style.merge('lineHeight')
+    let fontSize = node.style.merge('fontSize')
+    let textLines = node.nodeData.data.text.split(/\n/gim)
+    node.style.domText(this.textEditNode, scale, textLines.length)
+    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 (textLines.length > 1 && lineHeight !== 1) {
+      this.textEditNode.style.transform = `translateY(${-((lineHeight * fontSize - fontSize) / 2 - 2) * scale}px)`
+    }
    this.showTextEdit = true
    // 选中文本
    this.selectNodeText()
@@ -91,6 +106,9 @@ export default class TextEdit {

  //  隐藏文本编辑框
  hideEditTextBox() {
+    if (this.mindMap.richText) {
+      return this.mindMap.richText.hideEditText()
+    }
    if (!this.showTextEdit) {
      return
    }
@@ -113,6 +131,7 @@ export default class TextEdit {
    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/View.js
+++ b/simple-mind-map/src/View.js
@@ -1,3 +1,5 @@
+import { CONSTANTS } from './utils/constant'
+
 //  视图操作类
 class View {
  //  构造函数
@@ -55,12 +57,41 @@ class View {
    })
    // 放大缩小视图
    this.mindMap.event.on('mousewheel', (e, dir) => {
-      // // 放大
-      if (dir === 'down') {
-        this.enlarge()
+      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 {
-        // 缩小
-        this.narrow()
+        switch (dir){
+          // 上移
+          case CONSTANTS.DIR.DOWN:
+            this.translateY(-this.mindMap.opt.mousewheelMoveStep)
+            break
+          // 下移
+          case CONSTANTS.DIR.UP:
+            this.translateY(this.mindMap.opt.mousewheelMoveStep)
+            break
+          // 右移
+          case CONSTANTS.DIR.LEFT:
+            this.translateX(-this.mindMap.opt.mousewheelMoveStep)
+            break
+          // 左移
+          case CONSTANTS.DIR.RIGHT:
+            this.translateX(this.mindMap.opt.mousewheelMoveStep)
+            break
+        }
      }
    })
  }
--- a/simple-mind-map/src/Watermark.js
+++ b/simple-mind-map/src/Watermark.js
@@ -20,6 +20,11 @@ class Watermark {
    this.updateWatermark(this.mindMap.opt.watermarkConfig || {})
  }

+  // 获取是否存在水印
+  hasWatermark() {
+    return !!this.text.trim()
+  }
+
  // 处理水印配置
  handleConfig({ text, lineSpacing, textSpacing, angle, textStyle }) {
    this.text = text === undefined ? '' : String(text).trim()
@@ -36,7 +41,7 @@ class Watermark {
  // 非精确绘制，会绘制一些超出可视区域的水印
  draw() {
    this.watermarkDraw.clear()
-    if (!this.text.trim()) {
+    if (!this.hasWatermark()) {
      return
    }
    let x = 0
--- a/simple-mind-map/src/css/quill.css
+++ b/simple-mind-map/src/css/quill.css
@@ -0,0 +1,11 @@
+.ql-editor {
+    overflow: hidden;
+    padding: 0;
+    height: auto;
+    line-height: normal;
+}
+
+.ql-container {
+    height: auto;
+    font-size: inherit;
+}
--- a/simple-mind-map/src/layouts/Base.js
+++ b/simple-mind-map/src/layouts/Base.js
@@ -1,4 +1,5 @@
 import Node from '../Node'
+import { CONSTANTS } from '../utils/constant'

 //  布局基类
 class Base {
@@ -12,6 +13,8 @@ class Base {
    this.draw = this.mindMap.draw
    // 根节点
    this.root = null
+    // 保存所有uid和节点，用于复用
+    this.nodePool = {}
  }

  //  计算节点位置
@@ -32,26 +35,70 @@ class Base {
  //  概要节点
  renderGeneralization() {}

+  // 通过uid缓存节点
+  cacheNode(uid, node) {
+    // 记录本次渲染时的节点
+    this.renderer.nodeCache[uid] = node
+    // 记录所有渲染时的节点
+    this.nodePool[uid] = node
+    // 如果总缓存数量达到1000，直接清空
+    if (Object.keys(this.nodePool).length > 1000) {
+      this.nodePool = {}
+    }
+  }
+
+  // 检查当前来源是否需要重新计算节点大小
+  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.nodePool[data.data.uid]) {
+      // 数据上没有保存节点引用，但是通过uid找到了缓存的节点，也可以复用
+      newNode = this.nodePool[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: this.mindMap.uid++,
+        uid,
        renderer: this.renderer,
        mindMap: this.mindMap,
        draw: this.draw,
        layerIndex
      })
-      newNode.getSize()
+      // uid保存到数据上，为了节点复用
+      data.data.uid = uid
+      this.cacheNode(uid, newNode)
      // 数据关联实际节点
      data._node = newNode
      if (data.data.isActive) {
--- a/simple-mind-map/src/layouts/CatalogOrganization.js
+++ b/simple-mind-map/src/layouts/CatalogOrganization.js
@@ -1,386 +1,386 @@
-import Base from './Base'
-import { walk, asyncRun } from '../utils'
-
-//  目录组织图
-
-class CatalogOrganization extends Base {
-  //  构造函数
-
-  constructor(opt = {}) {
-    super(opt)
-  }
-
-  //  布局
-
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedLeftTopValue()
-      },
-      () => {
-        this.adjustLeftTopValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
-
-  //  遍历数据计算节点的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
-    )
-  }
-
-  //  遍历节点树计算节点的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
-    )
-  }
-
-  //  调整节点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
-    )
-  }
-
-  //  递归计算节点的宽度
-
-  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)
-  }
-
-  //  调整兄弟节点的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) &&
-        childrenList.length > 1
-      ) {
-        let _offset = index === 0 ? -addWidth : addWidth
-        node.left += _offset
-        if (
-          node.children &&
-          node.children.length &&
-          !node.hasCustomPosition()
-        ) {
-          this.updateChildren(node.children, 'left', _offset)
-        }
-      }
-      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.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
-    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
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
+
+//  目录组织图
+class CatalogOrganization extends Base {
+  //  构造函数
+  constructor(opt = {}) {
+    super(opt)
+  }
+
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedLeftTopValue()
+      },
+      () => {
+        this.adjustLeftTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据计算节点的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
+    )
+  }
+
+  //  遍历节点树计算节点的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
+    )
+  }
+
+  //  调整节点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
+    )
+  }
+
+  //  递归计算节点的宽度
+  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)
+  }
+
+  //  调整兄弟节点的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) &&
+        childrenList.length > 1
+      ) {
+        let _offset = index === 0 ? -addWidth : addWidth
+        node.left += _offset
+        if (
+          node.children &&
+          node.children.length &&
+          !node.hasCustomPosition()
+        ) {
+          this.updateChildren(node.children, 'left', _offset)
+        }
+      }
+      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.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
+    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
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -1,267 +1,276 @@
-import Base from './Base'
-import { walk, asyncRun } from '../utils'
-
-//  逻辑结构图
-
-class LogicalStructure extends Base {
-  //  构造函数
-
-  constructor(opt = {}) {
-    super(opt)
-  }
-
-  //  布局
-
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedTopValue()
-      },
-      () => {
-        this.adjustTopValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
-
-  //  遍历数据计算节点的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
-    )
-  }
-
-  //  遍历节点树计算节点的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
-    let marginX = this.getMarginX(node.layerIndex + 1)
-    let s1 = (marginX - expandBtnSize) * 0.6
-    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 = this.mindMap.themeConfig.nodeUseLineStyle
-        ? item.width
-        : 0
-      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
-    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 nodeUseLineStylePath = this.mindMap.themeConfig.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
-    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 = ''
-      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStylePath = this.mindMap.themeConfig.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
-    btn.translate(
-      width - translateX,
-      height / 2 - translateY + nodeUseLineStyleOffset
-    )
-  }
-
-  //  创建概要节点
-
-  renderGeneralization(node, gLine, gNode) {
-    let {
-      top,
-      bottom,
-      right,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    } = this.getNodeBoundaries(node, 'h')
-    let x1 = right + generalizationLineMargin
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
+
+//  逻辑结构图
+class LogicalStructure extends Base {
+  //  构造函数
+  constructor(opt = {}) {
+    super(opt)
+  }
+
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedTopValue()
+      },
+      () => {
+        this.adjustTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据计算节点的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
+    )
+  }
+
+  //  遍历节点树计算节点的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
+    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
+    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
+    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
+    btn.translate(
+      width - translateX,
+      height / 2 - translateY + nodeUseLineStyleOffset
+    )
+  }
+
+  //  创建概要节点
+  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
--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -2,7 +2,6 @@ import Base from './Base'
 import { walk, asyncRun } from '../utils'

 //  思维导图
-
 class MindMap extends Base {
  //  构造函数
  // 在逻辑结构图的基础上增加一个变量来记录生长方向，向左还是向右，同时在计算left的时候根据方向来计算、调整top时只考虑同方向的节点即可
@@ -11,7 +10,6 @@ class MindMap extends Base {
  }

  //  布局
-
  doLayout(callback) {
    let task = [
      () => {
@@ -31,7 +29,6 @@ class MindMap extends Base {
  }

  //  遍历数据计算节点的left、width、height
-
  computedBaseValue() {
    walk(
      this.renderer.renderTree,
@@ -96,7 +93,6 @@ class MindMap extends Base {
  }

  //  遍历节点树计算节点的top
-
  computedTopValue() {
    walk(
      this.root,
@@ -129,7 +125,6 @@ class MindMap extends Base {
  }

  //  调整节点top
-
  adjustTopValue() {
    walk(
      this.root,
@@ -152,7 +147,6 @@ class MindMap extends Base {
  }

  //  更新兄弟节点的top
-
  updateBrothers(node, leftAddHeight, rightAddHeight) {
    if (node.parent) {
      // 过滤出和自己同方向的节点
@@ -188,7 +182,6 @@ class MindMap extends Base {
  }

  //  绘制连线，连接该节点到其子节点
-
  renderLine(node, lines, style, lineStyle) {
    if (lineStyle === 'curve') {
      this.renderLineCurve(node, lines, style)
@@ -200,7 +193,6 @@ class MindMap extends Base {
  }

  //  直线风格连线
-
  renderLineStraight(node, lines, style) {
    if (node.children.length <= 0) {
      return []
@@ -208,11 +200,12 @@ class MindMap extends Base {
    let { left, top, width, height, expandBtnSize } = node
    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 = this.mindMap.themeConfig.nodeUseLineStyle
+      let nodeUseLineStyleOffset = nodeUseLineStyle
        ? item.width
        : 0
      if (item.dir === 'left') {
@@ -226,6 +219,8 @@ class MindMap extends Base {
      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}`
@@ -235,12 +230,12 @@ class MindMap extends Base {
  }

  //  直连风格
-
  renderLineDirect(node, lines, style) {
    if (node.children.length <= 0) {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
        node.layerIndex === 0
@@ -251,9 +246,11 @@ class MindMap extends Base {
      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 (this.mindMap.themeConfig.nodeUseLineStyle) {
+      if (nodeUseLineStyle) {
        if (item.dir === 'left') {
          nodeUseLineStylePath = ` L ${item.left},${y2}`
        } else {
@@ -267,12 +264,12 @@ class MindMap extends Base {
  }

  //  曲线风格连线
-
  renderLineCurve(node, lines, style) {
    if (node.children.length <= 0) {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
        node.layerIndex === 0
@@ -284,6 +281,8 @@ class MindMap extends Base {
      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) {
@@ -304,7 +303,6 @@ class MindMap extends Base {
  }

  //  渲染按钮
-
  renderExpandBtn(node, btn) {
    let { width, height, expandBtnSize } = node
    let { translateX, translateY } = btn.transform()
@@ -318,7 +316,6 @@ class MindMap extends Base {
  }

  //  创建概要节点
-
  renderGeneralization(node, gLine, gNode) {
    let isLeft = node.dir === 'left'
    let {
--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/simple-mind-map/src/layouts/OrganizationStructure.js
@@ -5,13 +5,11 @@ import { walk, asyncRun } from '../utils'
 // 和逻辑结构图基本一样，只是方向变成向下生长，所以先计算节点的top，后计算节点的left、最后调整节点的left即可
 class OrganizationStructure extends Base {
  //  构造函数
-
  constructor(opt = {}) {
    super(opt)
  }

  //  布局
-
  doLayout(callback) {
    let task = [
      () => {
@@ -31,7 +29,6 @@ class OrganizationStructure extends Base {
  }

  //  遍历数据计算节点的left、width、height
-
  computedBaseValue() {
    walk(
      this.renderer.renderTree,
@@ -67,7 +64,6 @@ class OrganizationStructure extends Base {
  }

  //  遍历节点树计算节点的left
-
  computedLeftValue() {
    walk(
      this.root,
@@ -94,7 +90,6 @@ class OrganizationStructure extends Base {
  }

  //  调整节点left
-
  adjustLeftValue() {
    walk(
      this.root,
@@ -118,7 +113,6 @@ class OrganizationStructure extends Base {
  }

  //  更新兄弟节点的left
-
  updateBrothers(node, addWidth) {
    if (node.parent) {
      let childrenList = node.parent.children
@@ -150,7 +144,6 @@ class OrganizationStructure extends Base {
  }

  //  绘制连线，连接该节点到其子节点
-
  renderLine(node, lines, style, lineStyle) {
    if (lineStyle === 'direct') {
      this.renderLineDirect(node, lines, style)
@@ -160,7 +153,6 @@ class OrganizationStructure extends Base {
  }

  //  直连风格
-
  renderLineDirect(node, lines, style) {
    if (node.children.length <= 0) {
      return []
@@ -182,7 +174,6 @@ class OrganizationStructure extends Base {
  }

  //  直线风格连线
-
  renderLineStraight(node, lines, style) {
    if (node.children.length <= 0) {
      return []
@@ -232,7 +223,6 @@ class OrganizationStructure extends Base {
  }

  //  渲染按钮
-
  renderExpandBtn(node, btn) {
    let { width, height, expandBtnSize } = node
    let { translateX, translateY } = btn.transform()
@@ -243,7 +233,6 @@ class OrganizationStructure extends Base {
  }

  //  创建概要节点
-
  renderGeneralization(node, gLine, gNode) {
    let {
      bottom,
--- 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/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@@ -26,6 +26,14 @@ export default {
  generalizationLineMargin: 0,
  // 概要节点距节点的距离
  generalizationNodeMargin: 20,
+  // 关联线默认状态的粗细
+  associativeLineWidth: 2,
+  // 关联线默认状态的颜色
+  associativeLineColor: 'rgb(51, 51, 51)',
+  // 关联线激活状态的粗细
+  associativeLineActiveWidth: 8,
+  // 关联线激活状态的颜色
+  associativeLineActiveColor: 'rgba(2, 167, 240, 1)',
  // 背景颜色
  backgroundColor: '#fafafa',
  // 背景图片
@@ -134,14 +142,10 @@ export default {
 // 简单来说，会改变节点大小的都不支持在激活时设置，为了性能考虑，节点切换激活态时不会重新计算节点大小
 export const supportActiveStyle = [
  'fillColor',
-  'color',
-  'fontWeight',
-  'fontStyle',
  'borderColor',
  'borderWidth',
  'borderDasharray',
-  'borderRadius',
-  'textDecoration'
+  'borderRadius'
 ]

 export const lineStyleProps = ['lineColor', 'lineDasharray', 'lineWidth']
--- a/simple-mind-map/src/utils/associativeLineUtils.js
+++ b/simple-mind-map/src/utils/associativeLineUtils.js
@@ -0,0 +1,182 @@
+// 获取目标节点在起始节点的目标数组中的索引
+export const getAssociativeLineTargetIndex = (node, toNode) => {
+  return node.nodeData.data.associativeLineTargets.findIndex(item => {
+    return item === toNode.nodeData.data.id
+  })
+}
+
+// 计算贝塞尔曲线的控制点
+export const computeCubicBezierPathPoints = (x1, y1, x2, y2) => {
+  let cx1 = x1 + (x2 - x1) / 2
+  let cy1 = y1
+  let cx2 = cx1
+  let cy2 = y2
+  if (Math.abs(x1 - x2) <= 5) {
+    cx1 = x1 + (y2 - y1) / 2
+    cx2 = cx1
+  }
+  return [
+    {
+      x: cx1,
+      y: cy1
+    },
+    {
+      x: cx2,
+      y: cy2
+    }
+  ]
+}
+
+// 拼接贝塞尔曲线路径
+export const joinCubicBezierPath = (startPoint, endPoint, point1, point2) => {
+  return `M ${startPoint.x},${startPoint.y} C ${point1.x},${point1.y} ${point2.x},${point2.y} ${endPoint.x},${endPoint.y}`
+}
+
+//  获取节点的位置信息
+const getNodeRect = node => {
+  let { left, top, width, height } = node
+  return {
+    right: left + width,
+    bottom: top + height,
+    left,
+    top
+  }
+}
+
+// 三次贝塞尔曲线
+export const cubicBezierPath = (x1, y1, x2, y2) => {
+  let points = computeCubicBezierPathPoints(x1, y1, x2, y2)
+  return joinCubicBezierPath(
+    { x: x1, y: y1 },
+    { x: x2, y: y2 },
+    points[0],
+    points[1]
+  )
+}
+
+// 获取节点的连接点
+export const getNodePoint = (node, dir = 'right') => {
+  let { left, top, width, height } = node
+  switch (dir) {
+    case 'left':
+      return {
+        x: left,
+        y: top + height / 2
+      }
+    case 'right':
+      return {
+        x: left + width,
+        y: top + height / 2
+      }
+    case 'top':
+      return {
+        x: left + width / 2,
+        y: top
+      }
+    case 'bottom':
+      return {
+        x: left + width / 2,
+        y: top + height
+      }
+    default:
+      break
+  }
+}
+
+// 根据两个节点的位置计算节点的连接点
+export const computeNodePoints = (fromNode, toNode) => {
+  let fromRect = getNodeRect(fromNode)
+  let fromCx = (fromRect.right + fromRect.left) / 2
+  let fromCy = (fromRect.bottom + fromRect.top) / 2
+  let toRect = getNodeRect(toNode)
+  let toCx = (toRect.right + toRect.left) / 2
+  let toCy = (toRect.bottom + toRect.top) / 2
+  // 中心点坐标的差值
+  let offsetX = toCx - fromCx
+  let offsetY = toCy - fromCy
+  if (offsetX === 0 && offsetY === 0) return
+  let fromDir = ''
+  let toDir = ''
+  if (offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY) {
+    // left
+    fromDir = 'left'
+    toDir = 'right'
+  } else if (offsetX > 0 && offsetX >= -offsetY && offsetX >= offsetY) {
+    // right
+    fromDir = 'right'
+    toDir = 'left'
+  } else if (offsetY <= 0 && offsetY < offsetX && offsetY < -offsetX) {
+    // up
+    fromDir = 'top'
+    toDir = 'bottom'
+  } else if (offsetY > 0 && -offsetY < offsetX && offsetY > offsetX) {
+    // down
+    fromDir = 'bottom'
+    toDir = 'top'
+  }
+  return [getNodePoint(fromNode, fromDir), getNodePoint(toNode, toDir)]
+}
+
+// 获取节点的关联线路径
+export const getNodeLinePath = (startPoint, endPoint, node, toNode) => {
+  let targetIndex = getAssociativeLineTargetIndex(node, toNode)
+  // 控制点
+  let controlPoints = []
+  let associativeLineTargetControlOffsets =
+    node.nodeData.data.associativeLineTargetControlOffsets
+  if (
+    associativeLineTargetControlOffsets &&
+    associativeLineTargetControlOffsets[targetIndex]
+  ) {
+    // 节点保存了控制点差值
+    let offsets = associativeLineTargetControlOffsets[targetIndex]
+    controlPoints = [
+      {
+        x: startPoint.x + offsets[0].x,
+        y: startPoint.y + offsets[0].y
+      },
+      {
+        x: endPoint.x + offsets[1].x,
+        y: endPoint.y + offsets[1].y
+      }
+    ]
+  } else {
+    // 没有保存控制点则生成默认的
+    controlPoints = computeCubicBezierPathPoints(
+      startPoint.x,
+      startPoint.y,
+      endPoint.x,
+      endPoint.y
+    )
+  }
+  // 根据控制点拼接贝塞尔曲线路径
+  return {
+    path: joinCubicBezierPath(
+      startPoint,
+      endPoint,
+      controlPoints[0],
+      controlPoints[1]
+    ),
+    controlPoints
+  }
+}
+
+// 获取默认的控制点差值
+export const getDefaultControlPointOffsets = (startPoint, endPoint) => {
+  let controlPoints = computeCubicBezierPathPoints(
+    startPoint.x,
+    startPoint.y,
+    endPoint.x,
+    endPoint.y
+  )
+  return [
+    {
+      x: controlPoints[0].x - startPoint.x,
+      y: controlPoints[0].y - startPoint.y
+    },
+    {
+      x: controlPoints[1].x - endPoint.x,
+      y: controlPoints[1].y - endPoint.y
+    }
+  ]
+}
--- a/simple-mind-map/src/utils/constant.js
+++ b/simple-mind-map/src/utils/constant.js
@@ -22,32 +22,6 @@ export const tagColorList = [
  }
 ]

-//  布局结构列表
-export const layoutList = [
-  {
-    name: '逻辑结构图',
-    value: 'logicalStructure',
-  },
-  {
-    name: '思维导图',
-    value: 'mindMap',
-  },
-  {
-    name: '组织结构图',
-    value: 'organizationStructure',
-  },
-  {
-    name: '目录组织图',
-    value: 'catalogOrganization',
-  }
-]
-export const layoutValueList = [
-  'logicalStructure',
-  'mindMap',
-  'catalogOrganization',
-  'organizationStructure'
-]
-
 //  主题列表
 export const themeList = [
  {
@@ -139,3 +113,72 @@ export const themeList = [
    value: 'romanticPurple',
  }
 ]
+
+// 常量
+export const CONSTANTS = {
+  CHANGE_THEME: 'changeTheme',
+  TRANSFORM_TO_NORMAL_NODE: 'transformAllNodesToNormalNode',
+  MODE: {
+    READONLY: 'readonly',
+    EDIT: 'edit'
+  },
+  LAYOUT: {
+    LOGICAL_STRUCTURE: 'logicalStructure',
+    MIND_MAP: 'mindMap',
+    ORGANIZATION_STRUCTURE: 'organizationStructure',
+    CATALOG_ORGANIZATION: 'catalogOrganization'
+  },
+  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'
+  }
+}
+
+//  布局结构列表
+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,
+  }
+]
+export const layoutValueList = [
+  CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
+  CONSTANTS.LAYOUT.MIND_MAP,
+  CONSTANTS.LAYOUT.CATALOG_ORGANIZATION,
+  CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE
+]
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -122,27 +122,33 @@ export const simpleDeepClone = data => {
 }

 //  复制渲染树数据
-export const copyRenderTree = (tree, root) => {
+export const copyRenderTree = (tree, root, removeActiveState = false) => {
  tree.data = simpleDeepClone(root.data)
-  tree.children = []
-  if (root.children && root.children.length > 0) {
-    root.children.forEach((item, index) => {
-      tree.children[index] = copyRenderTree({}, item)
-    })
-  }
-  return tree
-}
-
-//  复制节点树数据
-export const copyNodeTree = (tree, root, removeActiveState = false) => {
-  tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data)
  if (removeActiveState) {
    tree.data.isActive = false
  }
  tree.children = []
  if (root.children && root.children.length > 0) {
    root.children.forEach((item, index) => {
-      tree.children[index] = copyNodeTree({}, item, removeActiveState)
+      tree.children[index] = copyRenderTree({}, item, removeActiveState)
+    })
+  }
+  return tree
+}
+
+//  复制节点树数据
+export const copyNodeTree = (tree, root, removeActiveState = false, keepId = false) => {
+  tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data)
+  // 去除节点id，因为节点id不能重复
+  if (tree.data.id && !keepId) delete tree.data.id
+  if (tree.data.uid) delete tree.data.uid
+  if (removeActiveState) {
+    tree.data.isActive = false
+  }
+  tree.children = []
+  if (root.children && root.children.length > 0) {
+    root.children.forEach((item, index) => {
+      tree.children[index] = copyNodeTree({}, item, removeActiveState, keepId)
    })
  } else if (
    root.nodeData &&
@@ -150,7 +156,7 @@ export const copyNodeTree = (tree, root, removeActiveState = false) => {
    root.nodeData.children.length > 0
  ) {
    root.nodeData.children.forEach((item, index) => {
-      tree.children[index] = copyNodeTree({}, item, removeActiveState)
+      tree.children[index] = copyNodeTree({}, item, removeActiveState, keepId)
    })
  }
  return tree
@@ -193,12 +199,12 @@ export const downloadFile = (file, fileName) => {
 //  节流函数
 export const throttle = (fn, time = 300, ctx) => {
  let timer = null
-  return () => {
+  return (...args) => {
    if (timer) {
      return
    }
    timer = setTimeout(() => {
-      fn.call(ctx)
+      fn.call(ctx, ...args)
      timer = null
    }, time)
  }
@@ -235,4 +241,65 @@ export const camelCaseToHyphen = (str) => {
  return str.replace(/([a-z])([A-Z])/g, (...args) => {
    return args[1] + '-' + args[2].toLowerCase()
  })
+}
+
+//计算节点的文本长宽
+let measureTextContext = null
+export const measureText = (text, { italic, bold, fontSize, fontFamily }) => {
+  const font = joinFontStr({
+    italic,
+    bold,
+    fontSize,
+    fontFamily
+  })
+  if (!measureTextContext) {
+    const canvas = document.createElement('canvas')
+    measureTextContext = canvas.getContext('2d')
+  }
+  measureTextContext.save()
+  measureTextContext.font = font
+  const {
+    width,
+    actualBoundingBoxAscent,
+    actualBoundingBoxDescent
+  } = measureTextContext.measureText(text)
+  measureTextContext.restore()
+  const height = actualBoundingBoxAscent + actualBoundingBoxDescent
+  return { width, height }
+}
+
+// 拼接font字符串
+export const joinFontStr = ({ italic, bold, fontSize, fontFamily }) => {
+  return `${italic ? 'italic ' : ''} ${bold ? 'bold ' : ''} ${fontSize}px ${fontFamily} `
+}
+
+//  在下一个事件循环里执行任务
+export 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 () {
+    if (pending) return
+    pending = true
+    timerFunc(handle, 0)
+  }
 }
--- a/simple-mind-map/src/utils/nodeCommandWraps.js
+++ b/simple-mind-map/src/utils/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/utils/nodeCreateContents.js
+++ b/simple-mind-map/src/utils/nodeCreateContents.js
@@ -0,0 +1,256 @@
+import { measureText, resizeImgSize } from '../utils'
+import { Image, SVG, A, G, Rect, Text, ForeignObject } from '@svgdotjs/svg.js'
+import iconsSvg from '../svg/icons'
+
+//  创建图片节点
+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 => {
+    return {
+      node: SVG(iconsSvg.getNodeIconListIcon(item)).size(iconSize, iconSize),
+      width: iconSize,
+      height: iconSize
+    }
+  })
+}
+
+// 创建富文本节点
+function createRichTextNode() {
+  let g = new G()
+  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.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
+  textArr.forEach((item, index) => {
+    let arr = item.split('')
+    let lines = []
+    let line = []
+    while (arr.length) {
+      line.push(arr.shift())
+      let text = line.join('')
+      if (measureText(text, textStyle).width >= maxWidth) {
+        lines.push(text)
+        line = []
+      }
+    }
+    if (line.length > 0) {
+      lines.push(line.join(''))
+    }
+    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)
+  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;
+                `
+      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/utils/nodeExpandBtn.js
+++ b/simple-mind-map/src/utils/nodeExpandBtn.js
@@ -0,0 +1,113 @@
+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() {
+  if (this._expandBtn) {
+    this._expandBtn.clear()
+  }
+  this.createExpandNodeContent()
+  let node
+  if (this.nodeData.data.expand === false) {
+    node = this._openExpandNode
+  } else {
+    node = this._closeExpandNode
+  }
+  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.updateExpandBtnNode()
+  this.updateExpandBtnPos()
+}
+
+//  移除展开收缩按钮
+function removeExpandBtn() {
+  if (this._expandBtn) {
+    this._expandBtn.remove()
+  }
+}
+
+export default {
+  createExpandNodeContent,
+  updateExpandBtnNode,
+  updateExpandBtnPos,
+  renderExpandBtn,
+  removeExpandBtn
+}
--- a/simple-mind-map/src/utils/nodeGeneralization.js
+++ b/simple-mind-map/src/utils/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/web/package-lock.json
+++ b/web/package-lock.json
@@ -17906,6 +17906,7 @@
      "integrity": "sha512-VCNRiAt2P/bLo09rYt3DLe6xXUMlhJwrvU18Ddd/lYJgC7s8+wvhgYs+MTx4OiAXdu58drGwSBO9SPx7C6J82Q==",
      "dev": true,
      "requires": {
+        "@babel/core": "^7.11.0",
        "@babel/helper-compilation-targets": "^7.9.6",
        "@babel/helper-module-imports": "^7.8.3",
        "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -17918,6 +17919,7 @@
        "@vue/babel-plugin-jsx": "^1.0.3",
        "@vue/babel-preset-jsx": "^1.2.4",
        "babel-plugin-dynamic-import-node": "^2.3.3",
+        "core-js": "^3.6.5",
        "core-js-compat": "^3.6.5",
        "semver": "^6.1.0"
      }
--- a/web/src/assets/icon-font/demo.css
+++ b/web/src/assets/icon-font/demo.css
@@ -1,539 +0,0 @@
-/* Logo 字体 */
-@font-face {
-  font-family: "iconfont logo";
-  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
-  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
-}
-
-.logo {
-  font-family: "iconfont logo";
-  font-size: 160px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* tabs */
-.nav-tabs {
-  position: relative;
-}
-
-.nav-tabs .nav-more {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  height: 42px;
-  line-height: 42px;
-  color: #666;
-}
-
-#tabs {
-  border-bottom: 1px solid #eee;
-}
-
-#tabs li {
-  cursor: pointer;
-  width: 100px;
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  font-size: 16px;
-  border-bottom: 2px solid transparent;
-  position: relative;
-  z-index: 1;
-  margin-bottom: -1px;
-  color: #666;
-}
-
-
-#tabs .active {
-  border-bottom-color: #f00;
-  color: #222;
-}
-
-.tab-container .content {
-  display: none;
-}
-
-/* 页面布局 */
-.main {
-  padding: 30px 100px;
-  width: 960px;
-  margin: 0 auto;
-}
-
-.main .logo {
-  color: #333;
-  text-align: left;
-  margin-bottom: 30px;
-  line-height: 1;
-  height: 110px;
-  margin-top: -50px;
-  overflow: hidden;
-  *zoom: 1;
-}
-
-.main .logo a {
-  font-size: 160px;
-  color: #333;
-}
-
-.helps {
-  margin-top: 40px;
-}
-
-.helps pre {
-  padding: 20px;
-  margin: 10px 0;
-  border: solid 1px #e7e1cd;
-  background-color: #fffdef;
-  overflow: auto;
-}
-
-.icon_lists {
-  width: 100% !important;
-  overflow: hidden;
-  *zoom: 1;
-}
-
-.icon_lists li {
-  width: 100px;
-  margin-bottom: 10px;
-  margin-right: 20px;
-  text-align: center;
-  list-style: none !important;
-  cursor: default;
-}
-
-.icon_lists li .code-name {
-  line-height: 1.2;
-}
-
-.icon_lists .icon {
-  display: block;
-  height: 100px;
-  line-height: 100px;
-  font-size: 42px;
-  margin: 10px auto;
-  color: #333;
-  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
-  -moz-transition: font-size 0.25s linear, width 0.25s linear;
-  transition: font-size 0.25s linear, width 0.25s linear;
-}
-
-.icon_lists .icon:hover {
-  font-size: 100px;
-}
-
-.icon_lists .svg-icon {
-  /* 通过设置 font-size 来改变图标大小 */
-  width: 1em;
-  /* 图标和文字相邻时，垂直对齐 */
-  vertical-align: -0.15em;
-  /* 通过设置 color 来改变 SVG 的颜色/fill */
-  fill: currentColor;
-  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
-      normalize.css 中也包含这行 */
-  overflow: hidden;
-}
-
-.icon_lists li .name,
-.icon_lists li .code-name {
-  color: #666;
-}
-
-/* markdown 样式 */
-.markdown {
-  color: #666;
-  font-size: 14px;
-  line-height: 1.8;
-}
-
-.highlight {
-  line-height: 1.5;
-}
-
-.markdown img {
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-.markdown h1 {
-  color: #404040;
-  font-weight: 500;
-  line-height: 40px;
-  margin-bottom: 24px;
-}
-
-.markdown h2,
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6 {
-  color: #404040;
-  margin: 1.6em 0 0.6em 0;
-  font-weight: 500;
-  clear: both;
-}
-
-.markdown h1 {
-  font-size: 28px;
-}
-
-.markdown h2 {
-  font-size: 22px;
-}
-
-.markdown h3 {
-  font-size: 16px;
-}
-
-.markdown h4 {
-  font-size: 14px;
-}
-
-.markdown h5 {
-  font-size: 12px;
-}
-
-.markdown h6 {
-  font-size: 12px;
-}
-
-.markdown hr {
-  height: 1px;
-  border: 0;
-  background: #e9e9e9;
-  margin: 16px 0;
-  clear: both;
-}
-
-.markdown p {
-  margin: 1em 0;
-}
-
-.markdown>p,
-.markdown>blockquote,
-.markdown>.highlight,
-.markdown>ol,
-.markdown>ul {
-  width: 80%;
-}
-
-.markdown ul>li {
-  list-style: circle;
-}
-
-.markdown>ul li,
-.markdown blockquote ul>li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown>ul li p,
-.markdown>ol li p {
-  margin: 0.6em 0;
-}
-
-.markdown ol>li {
-  list-style: decimal;
-}
-
-.markdown>ol li,
-.markdown blockquote ol>li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown code {
-  margin: 0 3px;
-  padding: 0 5px;
-  background: #eee;
-  border-radius: 3px;
-}
-
-.markdown strong,
-.markdown b {
-  font-weight: 600;
-}
-
-.markdown>table {
-  border-collapse: collapse;
-  border-spacing: 0px;
-  empty-cells: show;
-  border: 1px solid #e9e9e9;
-  width: 95%;
-  margin-bottom: 24px;
-}
-
-.markdown>table th {
-  white-space: nowrap;
-  color: #333;
-  font-weight: 600;
-}
-
-.markdown>table th,
-.markdown>table td {
-  border: 1px solid #e9e9e9;
-  padding: 8px 16px;
-  text-align: left;
-}
-
-.markdown>table th {
-  background: #F7F7F7;
-}
-
-.markdown blockquote {
-  font-size: 90%;
-  color: #999;
-  border-left: 4px solid #e9e9e9;
-  padding-left: 0.8em;
-  margin: 1em 0;
-}
-
-.markdown blockquote p {
-  margin: 0;
-}
-
-.markdown .anchor {
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  margin-left: 8px;
-}
-
-.markdown .waiting {
-  color: #ccc;
-}
-
-.markdown h1:hover .anchor,
-.markdown h2:hover .anchor,
-.markdown h3:hover .anchor,
-.markdown h4:hover .anchor,
-.markdown h5:hover .anchor,
-.markdown h6:hover .anchor {
-  opacity: 1;
-  display: inline-block;
-}
-
-.markdown>br,
-.markdown>p>br {
-  clear: both;
-}
-
-
-.hljs {
-  display: block;
-  background: white;
-  padding: 0.5em;
-  color: #333333;
-  overflow-x: auto;
-}
-
-.hljs-comment,
-.hljs-meta {
-  color: #969896;
-}
-
-.hljs-string,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-strong,
-.hljs-emphasis,
-.hljs-quote {
-  color: #df5000;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-type {
-  color: #a71d5d;
-}
-
-.hljs-literal,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-attribute {
-  color: #0086b3;
-}
-
-.hljs-section,
-.hljs-name {
-  color: #63a35c;
-}
-
-.hljs-tag {
-  color: #333333;
-}
-
-.hljs-title,
-.hljs-attr,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: #795da3;
-}
-
-.hljs-addition {
-  color: #55a532;
-  background-color: #eaffea;
-}
-
-.hljs-deletion {
-  color: #bd2c00;
-  background-color: #ffecec;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}
-
-/* 代码高亮 */
-/* PrismJS 1.15.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-code[class*="language-"],
-pre[class*="language-"] {
-  color: black;
-  background: none;
-  text-shadow: 0 1px white;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre[class*="language-"]::-moz-selection,
-pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection,
-pre[class*="language-"] ::selection,
-code[class*="language-"]::selection,
-code[class*="language-"] ::selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-@media print {
-
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none;
-  }
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: .5em 0;
-  overflow: auto;
-}
-
-:not(pre)>code[class*="language-"],
-pre[class*="language-"] {
-  background: #f5f2f0;
-}
-
-/* Inline code */
-:not(pre)>code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #9a6e3a;
-  background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function,
-.token.class-name {
-  color: #DD4A68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
--- a/web/src/assets/icon-font/demo_index.html
+++ b/web/src/assets/icon-font/demo_index.html
--- a/web/src/assets/icon-font/iconfont.css
+++ b/web/src/assets/icon-font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1673600274529') format('woff2'),
-       url('iconfont.woff?t=1673600274529') format('woff'),
-       url('iconfont.ttf?t=1673600274529') format('truetype');
+  src: url('iconfont.woff2?t=1679621707211') format('woff2'),
+       url('iconfont.woff?t=1679621707211') format('woff'),
+       url('iconfont.ttf?t=1679621707211') format('truetype');
 }

 .iconfont {
@@ -13,6 +13,114 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.iconwenjian:before {
+  content: "\e607";
+}
+
+.iconpdf:before {
+  content: "\e740";
+}
+
+.iconPNG:before {
+  content: "\ec18";
+}
+
+.iconSVG:before {
+  content: "\e621";
+}
+
+.iconmarkdown:before {
+  content: "\ec04";
+}
+
+.iconjson:before {
+  content: "\ea42";
+}
+
+.iconlianjiexian:before {
+  content: "\e75b";
+}
+
+.iconbangzhu:before {
+  content: "\e620";
+}
+
+.iconshezhi:before {
+  content: "\e8b7";
+}
+
+.iconwushuju:before {
+  content: "\e643";
+}
+
+.iconzuijinliulan:before {
+  content: "\e62f";
+}
+
+.icon3zuidahua-3:before {
+  content: "\e692";
+}
+
+.iconzuixiaohua:before {
+  content: "\e650";
+}
+
+.iconzuidahua:before {
+  content: "\e651";
+}
+
+.iconguanbi:before {
+  content: "\e652";
+}
+
+.icondiannao:before {
+  content: "\eac0";
+}
+
+.iconzhuye:before {
+  content: "\e65c";
+}
+
+.iconbendi1x:before {
+  content: "\e606";
+}
+
+.iconbeijingyanse:before {
+  content: "\e6f8";
+}
+
+.iconqingchu:before {
+  content: "\e605";
+}
+
+.iconcase:before {
+  content: "\e6c6";
+}
+
+.iconxingzhuang-wenzi:before {
+  content: "\eb99";
+}
+
+.iconzitijiacu:before {
+  content: "\ec83";
+}
+
+.iconzitixiahuaxian:before {
+  content: "\ec85";
+}
+
+.iconzitixieti:before {
+  content: "\ec86";
+}
+
+.iconshanchuxian:before {
+  content: "\e612";
+}
+
+.iconzitiyanse:before {
+  content: "\e854";
+}
+
 .icongithub:before {
  content: "\e64f";
 }
--- a/web/src/assets/icon-font/iconfont.js
+++ b/web/src/assets/icon-font/iconfont.js
--- a/web/src/assets/icon-font/iconfont.json
+++ b/web/src/assets/icon-font/iconfont.json
@@ -1,331 +0,0 @@
-{
-  "id": "2479351",
-  "name": "思绪",
-  "font_family": "iconfont",
-  "css_prefix_text": "icon",
-  "description": "思维导图",
-  "glyphs": [
-    {
-      "icon_id": "8760187",
-      "name": "github",
-      "font_class": "github",
-      "unicode": "e64f",
-      "unicode_decimal": 58959
-    },
-    {
-      "icon_id": "1009019",
-      "name": "选择",
-      "font_class": "choose1",
-      "unicode": "e6c5",
-      "unicode_decimal": 59077
-    },
-    {
-      "icon_id": "493507",
-      "name": "主题",
-      "font_class": "zhuti",
-      "unicode": "e7aa",
-      "unicode_decimal": 59306
-    },
-    {
-      "icon_id": "1305460",
-      "name": "导出",
-      "font_class": "daochu1",
-      "unicode": "e63e",
-      "unicode_decimal": 58942
-    },
-    {
-      "icon_id": "4784101",
-      "name": "另存为",
-      "font_class": "lingcunwei",
-      "unicode": "e657",
-      "unicode_decimal": 58967
-    },
-    {
-      "icon_id": "9929033",
-      "name": "export",
-      "font_class": "export",
-      "unicode": "e642",
-      "unicode_decimal": 58946
-    },
-    {
-      "icon_id": "4570294",
-      "name": "打开",
-      "font_class": "dakai",
-      "unicode": "ebdf",
-      "unicode_decimal": 60383
-    },
-    {
-      "icon_id": "5086088",
-      "name": "新建",
-      "font_class": "xinjian",
-      "unicode": "e64e",
-      "unicode_decimal": 58958
-    },
-    {
-      "icon_id": "1117",
-      "name": "剪切",
-      "font_class": "jianqie",
-      "unicode": "e601",
-      "unicode_decimal": 58881
-    },
-    {
-      "icon_id": "1415523",
-      "name": "整理",
-      "font_class": "zhengli",
-      "unicode": "e83b",
-      "unicode_decimal": 59451
-    },
-    {
-      "icon_id": "2815710",
-      "name": "复制",
-      "font_class": "fuzhi",
-      "unicode": "e604",
-      "unicode_decimal": 58884
-    },
-    {
-      "icon_id": "11121506",
-      "name": "粘贴",
-      "font_class": "niantie",
-      "unicode": "e63f",
-      "unicode_decimal": 58943
-    },
-    {
-      "icon_id": "11383392",
-      "name": "上移",
-      "font_class": "shangyi",
-      "unicode": "e6be",
-      "unicode_decimal": 59070
-    },
-    {
-      "icon_id": "11383396",
-      "name": "下移",
-      "font_class": "xiayi",
-      "unicode": "e6bf",
-      "unicode_decimal": 59071
-    },
-    {
-      "icon_id": "14843439",
-      "name": "概括总览",
-      "font_class": "gaikuozonglan",
-      "unicode": "e609",
-      "unicode_decimal": 58889
-    },
-    {
-      "icon_id": "19738998",
-      "name": "全选",
-      "font_class": "quanxuan",
-      "unicode": "f199",
-      "unicode_decimal": 61849
-    },
-    {
-      "icon_id": "17606306",
-      "name": "导入",
-      "font_class": "daoru",
-      "unicode": "e6a3",
-      "unicode_decimal": 59043
-    },
-    {
-      "icon_id": "5110748",
-      "name": "后退-实",
-      "font_class": "houtui-shi",
-      "unicode": "e656",
-      "unicode_decimal": 58966
-    },
-    {
-      "icon_id": "14420971",
-      "name": "前进",
-      "font_class": "qianjin1",
-      "unicode": "e654",
-      "unicode_decimal": 58964
-    },
-    {
-      "icon_id": "1368553",
-      "name": "撤回",
-      "font_class": "withdraw",
-      "unicode": "e603",
-      "unicode_decimal": 58883
-    },
-    {
-      "icon_id": "15006636",
-      "name": "前进",
-      "font_class": "qianjin",
-      "unicode": "e600",
-      "unicode_decimal": 58880
-    },
-    {
-      "icon_id": "19980541",
-      "name": "恢复默认",
-      "font_class": "huifumoren",
-      "unicode": "e60e",
-      "unicode_decimal": 58894
-    },
-    {
-      "icon_id": "1616783",
-      "name": "换行",
-      "font_class": "huanhang",
-      "unicode": "e61e",
-      "unicode_decimal": 58910
-    },
-    {
-      "icon_id": "4777227",
-      "name": "缩小",
-      "font_class": "suoxiao",
-      "unicode": "ec13",
-      "unicode_decimal": 60435
-    },
-    {
-      "icon_id": "18811980",
-      "name": "编辑",
-      "font_class": "bianji",
-      "unicode": "e626",
-      "unicode_decimal": 58918
-    },
-    {
-      "icon_id": "21188137",
-      "name": "放大",
-      "font_class": "fangda",
-      "unicode": "e663",
-      "unicode_decimal": 58979
-    },
-    {
-      "icon_id": "21189639",
-      "name": "全屏",
-      "font_class": "quanping1",
-      "unicode": "e664",
-      "unicode_decimal": 58980
-    },
-    {
-      "icon_id": "397753",
-      "name": "定位",
-      "font_class": "dingwei",
-      "unicode": "e616",
-      "unicode_decimal": 58902
-    },
-    {
-      "icon_id": "2605158",
-      "name": "导航",
-      "font_class": "daohang",
-      "unicode": "e611",
-      "unicode_decimal": 58897
-    },
-    {
-      "icon_id": "6528451",
-      "name": "键盘",
-      "font_class": "jianpan",
-      "unicode": "e64d",
-      "unicode_decimal": 58957
-    },
-    {
-      "icon_id": "7556170",
-      "name": "全屏",
-      "font_class": "quanping",
-      "unicode": "e602",
-      "unicode_decimal": 58882
-    },
-    {
-      "icon_id": "788015",
-      "name": "导出",
-      "font_class": "daochu",
-      "unicode": "e63d",
-      "unicode_decimal": 58941
-    },
-    {
-      "icon_id": "2678575",
-      "name": "标签",
-      "font_class": "biaoqian",
-      "unicode": "e63c",
-      "unicode_decimal": 58940
-    },
-    {
-      "icon_id": "6265396",
-      "name": "流程-备注",
-      "font_class": "flow-Mark",
-      "unicode": "e65b",
-      "unicode_decimal": 58971
-    },
-    {
-      "icon_id": "1790486",
-      "name": "超链接",
-      "font_class": "chaolianjie",
-      "unicode": "e6f4",
-      "unicode_decimal": 59124
-    },
-    {
-      "icon_id": "4608986",
-      "name": "主题",
-      "font_class": "jingzi",
-      "unicode": "e610",
-      "unicode_decimal": 58896
-    },
-    {
-      "icon_id": "11903017",
-      "name": "笑脸",
-      "font_class": "xiaolian",
-      "unicode": "e60f",
-      "unicode_decimal": 58895
-    },
-    {
-      "icon_id": "19657962",
-      "name": "图 片",
-      "font_class": "image",
-      "unicode": "e629",
-      "unicode_decimal": 58921
-    },
-    {
-      "icon_id": "20784489",
-      "name": "结构",
-      "font_class": "jiegou",
-      "unicode": "e61d",
-      "unicode_decimal": 58909
-    },
-    {
-      "icon_id": "15969341",
-      "name": "样式",
-      "font_class": "yangshi",
-      "unicode": "e631",
-      "unicode_decimal": 58929
-    },
-    {
-      "icon_id": "2967176",
-      "name": "符号-大纲树",
-      "font_class": "fuhao-dagangshu",
-      "unicode": "e71f",
-      "unicode_decimal": 59167
-    },
-    {
-      "icon_id": "12316668",
-      "name": "添加子节点",
-      "font_class": "tianjiazijiedian",
-      "unicode": "e622",
-      "unicode_decimal": 58914
-    },
-    {
-      "icon_id": "14435368",
-      "name": "节点",
-      "font_class": "jiedian",
-      "unicode": "e655",
-      "unicode_decimal": 58965
-    },
-    {
-      "icon_id": "15765352",
-      "name": "删 除",
-      "font_class": "shanchu",
-      "unicode": "e696",
-      "unicode_decimal": 59030
-    },
-    {
-      "icon_id": "9592600",
-      "name": "HTSCIT_展开",
-      "font_class": "zhankai",
-      "unicode": "e64c",
-      "unicode_decimal": 58956
-    },
-    {
-      "icon_id": "9900009",
-      "name": "HTSCIT_展开2",
-      "font_class": "zhankai1",
-      "unicode": "e673",
-      "unicode_decimal": 58995
-    }
-  ]
-}
--- a/web/src/assets/icon-font/iconfont.ttf
+++ b/web/src/assets/icon-font/iconfont.ttf
--- a/web/src/assets/icon-font/iconfont.woff
+++ b/web/src/assets/icon-font/iconfont.woff
--- a/web/src/assets/icon-font/iconfont.woff2
+++ b/web/src/assets/icon-font/iconfont.woff2
--- a/web/src/config/en.js
+++ b/web/src/config/en.js
@@ -369,3 +369,43 @@ export const sidebarTriggerList = [
    icon: 'iconjianpan'
  }
 ]
+
+// 下载类型列表
+export const downTypeList = [
+  {
+    name: 'Dedicated file',
+    type: 'smm',
+    icon: 'iconwenjian',
+    desc: 'Available for import'
+  },
+  {
+    name: 'JSON',
+    type: 'json',
+    icon: 'iconjson',
+    desc: 'Popular data exchange formats, Available for import'
+  },
+  {
+    name: 'Image',
+    type: 'png',
+    icon: 'iconPNG',
+    desc: 'Suitable for viewing and sharing'
+  },
+  {
+    name: 'SVG',
+    type: 'svg',
+    icon: 'iconSVG',
+    desc: 'Scalable Vector Graphics'
+  },
+  {
+    name: 'PDF',
+    type: 'pdf',
+    icon: 'iconpdf',
+    desc: 'Suitable for printing'
+  },
+  {
+    name: 'Markdown',
+    type: 'md',
+    icon: 'iconmarkdown',
+    desc: 'Easy for other software to open'
+  }
+]
--- a/web/src/config/index.js
+++ b/web/src/config/index.js
@@ -15,7 +15,8 @@ import {
  shortcutKeyList as shortcutKeyListZh,
  shapeList as shapeListZh,
  sidebarTriggerList as sidebarTriggerListZh,
-  backgroundSizeList as backgroundSizeListZh
+  backgroundSizeList as backgroundSizeListZh,
+  downTypeList as downTypeListZh
 } from './zh'
 import {
  fontFamilyList as fontFamilyListEn,
@@ -26,7 +27,8 @@ import {
  shortcutKeyList as shortcutKeyListEn,
  shapeList as shapeListEn,
  sidebarTriggerList as sidebarTriggerListEn,
-  backgroundSizeList as backgroundSizeListEn
+  backgroundSizeList as backgroundSizeListEn,
+  downTypeList as downTypeListEn
 } from './en'

 const fontFamilyList = {
@@ -74,6 +76,11 @@ const sidebarTriggerList = {
  en: sidebarTriggerListEn
 }

+const downTypeList = {
+  zh: downTypeListZh,
+  en: downTypeListEn
+}
+
 export {
  fontSizeList,
  lineHeightList,
@@ -91,5 +98,6 @@ export {
  backgroundSizeList,
  shortcutKeyList,
  shapeList,
-  sidebarTriggerList
+  sidebarTriggerList,
+  downTypeList
 }
--- a/web/src/config/zh.js
+++ b/web/src/config/zh.js
@@ -441,3 +441,43 @@ export const sidebarTriggerList = [
    icon: 'iconjianpan'
  }
 ]
+
+// 下载类型列表
+export const downTypeList = [
+  {
+    name: '专有文件',
+    type: 'smm',
+    icon: 'iconwenjian',
+    desc: '可用于导入'
+  },
+  {
+    name: 'JSON',
+    type: 'json',
+    icon: 'iconjson',
+    desc: '流行的数据交换格式，可用于导入'
+  },
+  {
+    name: '图片',
+    type: 'png',
+    icon: 'iconPNG',
+    desc: '适合查看分享'
+  },
+  {
+    name: 'SVG',
+    type: 'svg',
+    icon: 'iconSVG',
+    desc: '可缩放矢量图形'
+  },
+  {
+    name: 'PDF',
+    type: 'pdf',
+    icon: 'iconpdf',
+    desc: '适合打印'
+  },
+  {
+    name: 'Markdown',
+    type: 'md',
+    icon: 'iconmarkdown',
+    desc: '便于其他软件打开'
+  }
+]
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -34,7 +34,16 @@ export default {
    watermarkTextSpacing: 'Text spacing',
    watermarkAngle: 'Angle',
    watermarkTextOpacity: 'Text opacity',
-    watermarkTextFontSize: 'Font size'
+    watermarkTextFontSize: 'Font size',
+    isEnableNodeRichText: 'Enable node rich text editing',
+    mousewheelAction: 'Mouse wheel behavior',
+    zoomView: 'Zoom view',
+    moveViewUpDown: 'Move view up and down',
+    associativeLine: 'Associative line',
+    associativeLineWidth: 'Width',
+    associativeLineColor: 'Color',
+    associativeLineActiveWidth: 'Active width',
+    associativeLineActiveColor: 'Active color'
  },
  color: {
    moreColor: 'More color'
@@ -79,7 +88,14 @@ export default {
    imageFile: 'Image file',
    svgFile: 'svg file',
    pdfFile: 'pdf file',
-    tips: 'tips：.smm and .json file can be import'
+    markdownFile: 'markdown file',
+    tips: 'tips: .smm and .json file can be import',
+    domToImage: 'Whether to convert rich text nodes in svg into pictures',
+    pngTips: 'tips: Exporting pictures in rich text mode is time-consuming. It is recommended to export to svg format',
+    svgTips: 'tips: Exporting pictures in rich text mode is time-consuming',
+    transformingDomToImages: 'Converting nodes: ',
+    notifyTitle: 'Info',
+    notifyMessage: 'If the download is not triggered, check whether it is blocked by the browser'
  },
  fullscreen: {
    fullscreenShow: 'Full screen show',
@@ -88,7 +104,7 @@ export default {
  import: {
    title: 'Import',
    selectFile: 'Select file',
-    supportFile: 'Support .smm、.json、.xmind、.xlsx file'
+    supportFile: 'Support .smm、.json、.xmind、.xlsx、.md file'
  },
  navigatorToolbar: {
    openMiniMap: 'Open mini map',
@@ -177,6 +193,11 @@ export default {
    saveAs: 'Save as',
    import: 'Import',
    export: 'Export',
-    shortcutKey: 'Shortcut key'
+    shortcutKey: 'Shortcut key',
+    associativeLine: 'Associative line',
+  },
+  edit: {
+    newFeatureNoticeTitle: 'New feature reminder',
+    newFeatureNoticeMessage: 'This update supports node rich text editing, But there are some defects, The most important impact is that the time to export the image is proportional to the number of nodes, Therefore, if you are more dependent on export requirements, you can use【Base style】-【Other config】-【Enable node rich text editing】Set to turn off rich text editing mode.'
  }
 }
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -34,7 +34,16 @@ export default {
    watermarkTextSpacing: '水印文字间距',
    watermarkAngle: '旋转角度',
    watermarkTextOpacity: '文字透明度',
-    watermarkTextFontSize: '文字字号'
+    watermarkTextFontSize: '文字字号',
+    isEnableNodeRichText: '是否开启节点富文本编辑',
+    mousewheelAction: '鼠标滚轮行为',
+    zoomView: '缩放视图',
+    moveViewUpDown: '上下移动视图',
+    associativeLine: '关联线',
+    associativeLineWidth: '粗细',
+    associativeLineColor: '颜色',
+    associativeLineActiveWidth: '激活粗细',
+    associativeLineActiveColor: '激活颜色'
  },
  color: {
    moreColor: '更多颜色'
@@ -79,7 +88,14 @@ export default {
    imageFile: '图片文件',
    svgFile: 'svg文件',
    pdfFile: 'pdf文件',
-    tips: 'tips：.smm和.json文件可用于导入'
+    markdownFile: 'markdown文件',
+    tips: 'tips：.smm和.json文件可用于导入',
+    domToImage: '是否将svg中富文本节点转换成图片',
+    pngTips: 'tips：富文本模式导出图片非常耗时，建议导出为svg格式',
+    svgTips: 'tips：富文本模式导出图片非常耗时',
+    transformingDomToImages: '正在转换节点：',
+    notifyTitle: '消息',
+    notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了'
  },
  fullscreen: {
    fullscreenShow: '全屏查看',
@@ -88,7 +104,7 @@ export default {
  import: {
    title: '导入',
    selectFile: '选取文件',
-    supportFile: '支持.smm、.json、.xmind、.xlsx文件'
+    supportFile: '支持.smm、.json、.xmind、.xlsx、.md文件'
  },
  navigatorToolbar: {
    openMiniMap: '开启小地图',
@@ -177,6 +193,11 @@ export default {
    saveAs: '另存为',
    import: '导入',
    export: '导出',
-    shortcutKey: '快捷键'
+    shortcutKey: '快捷键',
+    associativeLine: '关联线',
+  },
+  edit: {
+    newFeatureNoticeTitle: '新特性提醒',
+    newFeatureNoticeMessage: '本次更新支持了节点富文本编辑，但是存在一定缺陷，最主要的影响是导出为图片的时间和节点数量成正比，所以对导出需求比较依赖的话可以通过【基础样式】-【其他配置】-【是否开启节点富文本编辑】设置关掉富文本编辑模式。'
  }
 }
--- a/web/src/pages/Doc/Index.vue
+++ b/web/src/pages/Doc/Index.vue
@@ -92,6 +92,10 @@ export default {
        margin: 10px 0;
      }

+      h4 {
+        margin-bottom: 10px;
+      }
+
      p {
        margin-bottom: 20px;
      }
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -19,13 +19,16 @@ let APIList = [
  'keyCommand',
  'command',
  'batchExecution',
+  'richText',
  'select',
  'drag',
  'keyboardNavigation',
  'doExport',
  'miniMap',
  'watermark',
+  'associativeLine',
  'xmind',
+  'markdown',
  'utils'
 ]

--- a/web/src/pages/Doc/components/CatalogBar.vue
+++ b/web/src/pages/Doc/components/CatalogBar.vue
@@ -52,7 +52,6 @@ export default {
      this.onScroll()
    },
    lang(newVal, oldVal) {
-      console.log(newVal, oldVal)
      if (!oldVal) {
        return
      }
--- a/web/src/pages/Doc/en/associativeLine/index.md
+++ b/web/src/pages/Doc/en/associativeLine/index.md
@@ -0,0 +1,89 @@
+# AssociativeLine plugin
+
+> v0.4.5+
+
+> The function of adjusting associated line control points is supported from v0.4.6+
+
+This plugin is used to support the addition of associative lines.
+
+The plugin is currently not fully functional, and does not support adding text to association lines.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js'
+
+MindMap.usePlugin(AssociativeLine)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.associativeLine`.
+
+## Config
+
+Support for modifying the thickness and color of associated lines, divided into default and active states. The configuration is as follows:
+
+- `associativeLineWidth`: The thickness of the default state of the associated line. The default value is `2`
+
+- `associativeLineColor`: Color of the default state of associative lines. The default value is `rgb(51, 51, 51)`
+
+- `associativeLineActiveWidth`: The thickness of the active state of the associated line. The default value is `8`
+
+- `associativeLineActiveColor`: The color of the active state of the associated line. The default value is `rgba(2, 167, 240, 1)`
+
+The configuration is provided as a theme, so if you want to modify these four properties, you can modify them using the `mindMap.setThemeConfig(config)` method.
+
+## Props
+
+### mindMap.associativeLine.lineList
+
+Currently, all connection line data, array types, and each item of the array are also an array:
+
+```js
+[
+    path, // Connector node
+    clickPath, // Invisible click line node
+    node, // Start node
+    toNode // Target node
+]
+```
+
+### mindMap.associativeLine.activeLine
+
+The currently active connection line and array type are the same as the structure of each item in the `lineList` array.
+
+## Methods
+
+### renderAllLines()
+
+Re-render all associated lines.
+
+### removeAllLines()
+
+Remove all associated lines.
+
+### createLineFromActiveNode()
+
+Create an associated line from the current active node. If there are multiple active nodes, the default is the first node.
+
+After calling this method, an association line will be rendered from the first active node to the current mouse real-time position. When a target node is clicked, it represents completion of creation. An association line will be rendered between the first active node and the clicked node.
+
+### createLine(fromNode)
+
+Creates an associative line starting at the specified node.
+
+After calling this method, an association line will be rendered from the specified node to the current mouse real-time position. When a target node is clicked, it represents completion of creation, and an association line will be rendered between the specified node and the clicked node.
+
+### addLine(fromNode, toNode)
+
+Add an associative line directly.
+
+Calling this method will directly create an association line from the `fromNode` to the `toNode` node.
+
+### removeLine()
+
+Deletes the currently active associative line. Clicking on an associated line is considered active.
+
+### clearActiveLine()
+
+Clears the active state of the currently active association line.
--- a/web/src/pages/Doc/en/associativeLine/index.vue
+++ b/web/src/pages/Doc/en/associativeLine/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <h1>AssociativeLine plugin</h1>
+<blockquote>
+<p>v0.4.5+</p>
+</blockquote>
+<blockquote>
+<p>The function of adjusting associated line control points is supported from v0.4.6+</p>
+</blockquote>
+<p>This plugin is used to support the addition of associative lines.</p>
+<p>The plugin is currently not fully functional, and does not support adding text to association lines.</p>
+<h2>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> AssociativeLine <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/AssociativeLine.js&#x27;</span>
+
+MindMap.usePlugin(AssociativeLine)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.associativeLine</code>.</p>
+<h2>Config</h2>
+<p>Support for modifying the thickness and color of associated lines, divided into default and active states. The configuration is as follows:</p>
+<ul>
+<li>
+<p><code>associativeLineWidth</code>: The thickness of the default state of the associated line. The default value is <code>2</code></p>
+</li>
+<li>
+<p><code>associativeLineColor</code>: Color of the default state of associative lines. The default value is <code>rgb(51, 51, 51)</code></p>
+</li>
+<li>
+<p><code>associativeLineActiveWidth</code>: The thickness of the active state of the associated line. The default value is <code>8</code></p>
+</li>
+<li>
+<p><code>associativeLineActiveColor</code>: The color of the active state of the associated line. The default value is <code>rgba(2, 167, 240, 1)</code></p>
+</li>
+</ul>
+<p>The configuration is provided as a theme, so if you want to modify these four properties, you can modify them using the <code>mindMap.setThemeConfig(config)</code> method.</p>
+<h2>Props</h2>
+<h3>mindMap.associativeLine.lineList</h3>
+<p>Currently, all connection line data, array types, and each item of the array are also an array:</p>
+<pre class="hljs"><code>[
+    path, <span class="hljs-comment">// Connector node</span>
+    clickPath, <span class="hljs-comment">// Invisible click line node</span>
+    node, <span class="hljs-comment">// Start node</span>
+    toNode <span class="hljs-comment">// Target node</span>
+]
+</code></pre>
+<h3>mindMap.associativeLine.activeLine</h3>
+<p>The currently active connection line and array type are the same as the structure of each item in the <code>lineList</code> array.</p>
+<h2>Methods</h2>
+<h3>renderAllLines()</h3>
+<p>Re-render all associated lines.</p>
+<h3>removeAllLines()</h3>
+<p>Remove all associated lines.</p>
+<h3>createLineFromActiveNode()</h3>
+<p>Create an associated line from the current active node. If there are multiple active nodes, the default is the first node.</p>
+<p>After calling this method, an association line will be rendered from the first active node to the current mouse real-time position. When a target node is clicked, it represents completion of creation. An association line will be rendered between the first active node and the clicked node.</p>
+<h3>createLine(fromNode)</h3>
+<p>Creates an associative line starting at the specified node.</p>
+<p>After calling this method, an association line will be rendered from the specified node to the current mouse real-time position. When a target node is clicked, it represents completion of creation, and an association line will be rendered between the specified node and the clicked node.</p>
+<h3>addLine(fromNode, toNode)</h3>
+<p>Add an associative line directly.</p>
+<p>Calling this method will directly create an association line from the <code>fromNode</code> to the <code>toNode</code> node.</p>
+<h3>removeLine()</h3>
+<p>Deletes the currently active associative line. Clicking on an associated line is considered active.</p>
+<h3>clearActiveLine()</h3>
+<p>Clears the active state of the currently active association line.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,91 @@
 # Changelog

+## 0.5.0
+
+This version is mainly about code level changes and optimization, with the core goal of improving rendering performance and reducing stuck issues.
+
+New: 1.Support custom expansion and collapse node icons and colors;
+
+optimization: 1.Optimize rendering logic, set the theme, move forward and backward, and other operations no longer require full rendering;
+
+     2.Optimize node drag logic, and fix the problem of being unable to drag between two nodes;
+
+     3.Collapse all nodes adds logic to return to the center point;
+
+     4.Fix the problem of nodes flying and scrambling caused by triggering rendering multiple times in a short time;
+
+     5.Optimize the experience of node editing;
+
+Fix: 1.Fix the issue where the setData method does not trigger history;
+
+modify: Starting from version 0.5.0, considering performance issues, the node activation state can only modify shape related styles:
+
+```js
+[
+  'fillColor',
+  'borderColor',
+  'borderWidth',
+  'borderDasharray',
+  'borderRadius'
+]
+```
+
+## 0.4.7
+
+optimization: 1.During rich text editing, when initially focusing, all are no longer selected by default; 2.When editing rich text, use the node fill color as the background color to avoid being invisible when the node color is white.  3.Node activation state switching no longer triggers history. 4.Triggering history multiple times in a short time will only add the last data. 5.Optimize the addition of historical records. When there is a rollback, delete the historical data after the current pointer when adding a new record again.
+
+New: 1.Support for importing and exporting Markdown format files. 2.Support for configuring initial text when inserting nodes. 3.Expand the commands for inserting and deleting nodes to support specifying nodes.
+
+## 0.4.6
+
+New: 1.Associated lines support adjusting control points.
+
+optimization: 1.When adding historical data, filter data that has not changed compared to the previous time.
+
+Fix: 1.Fixed a conflict between the direction keys and the navigation function of the direction keys during node editing. 2.Fixed the issue of node id loss when dragging a mobile node, which can cause associated lines to be lost.
+
+## 0.4.5
+
+New: 1.Supports associative lines. 2.You can also drag the canvas by holding down the root node. 3. Hold down the ctrl key to adjust multiple selected nodes.
+
+## 0.4.4
+
+New: Support horizontal scrolling in response to the mouse.
+
+## 0.4.3
+
+Fix: No trigger after forward and backward `data_ Change` event.
+
+New: Support user-defined mouse wheel events; The mouse wheel is adjusted to support zooming and moving the view up and down.
+
+## 0.4.2
+
+New: The `setText` method of the Node class adds a second parameter to support setting rich text content.
+
+## 0.4.1
+
+New: 1.Add and throw node mouseenter and mouseleave events; 2.Node rich text supports setting background color; 3.Node rich text supports clear style.
+
+Fix: 1.Mac system touchpad scaling is the opposite problem; 2.When the device window.devicePixelRatio is not 1, the size of the rich text node in the exported image will become larger when there are rich text nodes.
+
+## 0.4.0
+
+New: The node supports rich text editing.
+
+## 0.3.4
+
+New: Automatic line wrapping function is added to node text.
+
+Fix: 1.Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes. 2.Fix the problem that high node height will overlap with other nodes in the case of bottom edge style.
+
+## 0.3.3
+
+Fix: The root node text cannot wrap.
+
+## 0.3.2
+
+Fix: 1.Fix the problem that the node style is not updated when the secondary node is dragged to other nodes or other nodes are dragged to the secondary node; 2.Fix the problem that when the actual content of the mind map is larger than the screen width and height, the excess part is not watermarked when exporting.
+
 ## 0.3.1

 Fix: 1.The problem that deleting the background image does not take effect; 2.The problem that the connector runs above the root node when the node is dragged to the root node.
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,56 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.5.0</h2>
+<p>This version is mainly about code level changes and optimization, with the core goal of improving rendering performance and reducing stuck issues.</p>
+<p>New: 1.Support custom expansion and collapse node icons and colors;</p>
+<p>optimization: 1.Optimize rendering logic, set the theme, move forward and backward, and other operations no longer require full rendering;</p>
+<pre><code> 2.Optimize node drag logic, and fix the problem of being unable to drag between two nodes;
+
+ 3.Collapse all nodes adds logic to return to the center point;
+
+ 4.Fix the problem of nodes flying and scrambling caused by triggering rendering multiple times in a short time;
+
+ 5.Optimize the experience of node editing;
+</code></pre>
+<p>Fix: 1.Fix the issue where the setData method does not trigger history;</p>
+<p>modify: Starting from version 0.5.0, considering performance issues, the node activation state can only modify shape related styles:</p>
+<pre class="hljs"><code>[
+  <span class="hljs-string">&#x27;fillColor&#x27;</span>,
+  <span class="hljs-string">&#x27;borderColor&#x27;</span>,
+  <span class="hljs-string">&#x27;borderWidth&#x27;</span>,
+  <span class="hljs-string">&#x27;borderDasharray&#x27;</span>,
+  <span class="hljs-string">&#x27;borderRadius&#x27;</span>
+]
+</code></pre>
+<h2>0.4.7</h2>
+<p>optimization: 1.During rich text editing, when initially focusing, all are no longer selected by default; 2.When editing rich text, use the node fill color as the background color to avoid being invisible when the node color is white.  3.Node activation state switching no longer triggers history. 4.Triggering history multiple times in a short time will only add the last data. 5.Optimize the addition of historical records. When there is a rollback, delete the historical data after the current pointer when adding a new record again.</p>
+<p>New: 1.Support for importing and exporting Markdown format files. 2.Support for configuring initial text when inserting nodes. 3.Expand the commands for inserting and deleting nodes to support specifying nodes.</p>
+<h2>0.4.6</h2>
+<p>New: 1.Associated lines support adjusting control points.</p>
+<p>optimization: 1.When adding historical data, filter data that has not changed compared to the previous time.</p>
+<p>Fix: 1.Fixed a conflict between the direction keys and the navigation function of the direction keys during node editing. 2.Fixed the issue of node id loss when dragging a mobile node, which can cause associated lines to be lost.</p>
+<h2>0.4.5</h2>
+<p>New: 1.Supports associative lines. 2.You can also drag the canvas by holding down the root node. 3. Hold down the ctrl key to adjust multiple selected nodes.</p>
+<h2>0.4.4</h2>
+<p>New: Support horizontal scrolling in response to the mouse.</p>
+<h2>0.4.3</h2>
+<p>Fix: No trigger after forward and backward <code>data_ Change</code> event.</p>
+<p>New: Support user-defined mouse wheel events; The mouse wheel is adjusted to support zooming and moving the view up and down.</p>
+<h2>0.4.2</h2>
+<p>New: The <code>setText</code> method of the Node class adds a second parameter to support setting rich text content.</p>
+<h2>0.4.1</h2>
+<p>New: 1.Add and throw node mouseenter and mouseleave events; 2.Node rich text supports setting background color; 3.Node rich text supports clear style.</p>
+<p>Fix: 1.Mac system touchpad scaling is the opposite problem; 2.When the device window.devicePixelRatio is not 1, the size of the rich text node in the exported image will become larger when there are rich text nodes.</p>
+<h2>0.4.0</h2>
+<p>New: The node supports rich text editing.</p>
+<h2>0.3.4</h2>
+<p>New: Automatic line wrapping function is added to node text.</p>
+<p>Fix: 1.Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes. 2.Fix the problem that high node height will overlap with other nodes in the case of bottom edge style.</p>
+<h2>0.3.3</h2>
+<p>Fix: The root node text cannot wrap.</p>
+<h2>0.3.2</h2>
+<p>Fix: 1.Fix the problem that the node style is not updated when the secondary node is dragged to other nodes or other nodes are dragged to the secondary node; 2.Fix the problem that when the actual content of the mind map is larger than the screen width and height, the excess part is not watermarked when exporting.</p>
 <h2>0.3.1</h2>
 <p>Fix: 1.The problem that deleting the background image does not take effect; 2.The problem that the connector runs above the root node when the node is dragged to the root node.</p>
 <p>New: Add position and size settings for background image display. This setting is also supported for exported pictures.</p>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -40,6 +40,14 @@ const mindMap = new MindMap({
 | readonly（v0.1.7+）              | Boolean | false            | Whether it is read-only mode                                 |          |
 | enableFreeDrag（v0.2.4+）        | Boolean | false            | Enable node free drag                                        |          |
 | watermarkConfig（v0.2.4+）       | Object  |                  | Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration |          |
+| textAutoWrapWidth（v0.3.4+）     | Number  | 500 |   Each line of text in the node will wrap automatically when it reaches the width               |          |
+| customHandleMousewheel（v0.4.3+）     | Function  | null | User-defined mouse wheel event processing can pass a function, and the callback parameter is the event object |          |
+| mousewheelAction（v0.4.3+）     | String  | zoom | The behavior of the mouse wheel, `zoom`(Zoom in and out)、`move`(Move up and down). If `customHandleMousewheel` passes a custom function, this property will not take effect                 |          |
+| mousewheelMoveStep（v0.4.3+）     | Number  | 100 | When the `mousewheelAction` is set to `move`, you can use this attribute to control the step length of the view movement when the mouse scrolls. The unit is `px`  |          |
+| defaultInsertSecondLevelNodeText（v0.4.7+）     | String  | 二级节点 | Text of the default inserted secondary node               |          |
+| defaultInsertBelowSecondLevelNodeText（v0.4.7+）     | String  | 分支主题 | Text for nodes below the second level inserted by default               |          |
+| expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff' } | Expand the color of the stow button  |          |
+| expandBtnIcon（v0.5.0+）     | Object  | { open: '', close: '' } | Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon  |          |

 ### Watermark config

@@ -81,14 +89,23 @@ mindMap.setTheme('Theme name')

 For all configurations of theme, please refer to [Default Topic](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js). The `defineTheme`method will merge the configuration you passed in with the default configuration. Most of the themes  do not need custom many parts. For a typical customized theme configuration, please refer to [blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js).

-### usePlugin(plugin)
+### usePlugin(plugin, opt = {})

 > v0.3.0+

+- `opt`：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter.
+
 If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.

 Note: The plugin needs to be registered before instantiating `MindMap`.

+### hasPlugin(plugin)
+
+> v0.4.0+
+
+Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is `-1`, it means that the plugin is not registered.
+
+
 ## Static props

 ### pluginList
@@ -119,12 +136,16 @@ Get the `svg` data and return an object. The detailed structure is as follows:
 }
 ```

-### render()
+### render(callback)
+
+- `callback`: `v0.3.2+`, `Function`, Called when the re-rendering is complete

 Triggers a full rendering, which will reuse nodes for better performance. If
 only the node positions have changed, this method can be called to `reRender`.

-### reRender()
+### reRender(callback)
+
+- `callback`: `v0.3.2+`, `Function`, Called when the re-rendering is complete

 Performs a full re-render, clearing the canvas and creating new nodes. This has
 poor performance and should be used sparingly.
@@ -164,6 +185,8 @@ Listen to an event. Event list:
 | node_mouseup                     | Node mouseup event                                                       | this (node instance), e (event object)                                                                          |
 | node_dblclick                    | Node double-click event                                                  | this (node instance), e (event object)                                                                          |
 | node_contextmenu                 | Node right-click menu event                                              | e (event object), this (node instance)                                                                          |
+| node_mouseenter（v0.4.1+）       | Node mouseenter event     | this (node instance), e (event object)            |
+| node_mouseleave（v0.4.1+）       | Node mouseleave event     | this (node instance), e (event object)            |
 | before_node_active               | Event before node activation                                             | this (node instance), activeNodeList (current list of active nodes)                                             |
 | node_active                      | Node activation event                                                    | this (node instance), activeNodeList (current list of active nodes)                                             |
 | expand_btn_click                 | Node expand or collapse event                                            | this (node instance)                                                                                            |
@@ -172,6 +195,11 @@ Listen to an event. Event list:
 | scale                            | Zoom event                                                               | scale (zoom ratio)                                                                                              |
 | node_img_dblclick（v0.2.15+）    | Node image double-click event                                            | this (node instance), e (event object)                                                                          |
 | node_tree_render_end（v0.2.16+） | Node tree render end event                                               |                                                                                                                 |
+| rich_text_selection_change（v0.4.0+）         |  Available when the `RichText` plugin is registered. Triggered when the text selection area changes when the node is edited         |  hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area）            |
+| transforming-dom-to-images（v0.4.0+）         |  Available when the `RichText` plugin is registered. When there is a `DOM` node in `svg`, the `DOM` node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting         |  index（Index of the node currently converted to）、len（Total number of nodes to be converted）            |
+| node_dragging（v0.4.5+）    | Triggered when a node is dragged   |  node(The currently dragged node)           |
+| node_dragend（v0.4.5+）    | Triggered when the node is dragged and ends   |             |
+| associative_line_click（v0.4.5+）    |  Triggered when an associated line is clicked  |  path(Connector node)、clickPath(Invisible click line node)、node(Start node)、toNode(Target node)          |

 ### emit(event, ...args)

@@ -240,39 +268,39 @@ in the options table above.
 Executes a command, which will add a record to the history stack for undo or
 redo. All commands are as follows:

-| Command name                       | Description                                                                                                                                                                                                            | Parameters                                                                                                                                                                                                                                                                                                                                               |
-| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| SELECT_ALL                         | Select all                                                                                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                                          |
-| BACK                               | Go back a specified number of steps                                                                                                                                                                                    | step (the number of steps to go back, default is 1)                                                                                                                                                                                                                                                                                                      |
-| FORWARD                            | Go forward a specified number of steps                                                                                                                                                                                 | step (the number of steps to go forward, default is 1)                                                                                                                                                                                                                                                                                                   |
-| INSERT_NODE                        | Insert a sibling node, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective                                                                            |                                                                                                                                                                                                                                                                                                                                                          |
-| INSERT_CHILD_NODE                  | Insert a child node, the active node will be the operation node                                                                                                                                                        |                                                                                                                                                                                                                                                                                                                                                          |
-| UP_NODE                            | Move node up, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the first node in the list will be invalid  |                                                                                                                                                                                                                                                                                                                                                          |
-| DOWN_NODE                          | Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid |                                                                                                                                                                                                                                                                                                                                                          |
-| REMOVE_NODE                        | Remove node, the active node will be the operation node                                                                                                                                                                |                                                                                                                                                                                                                                                                                                                                                          |
-| PASTE_NODE                         | Paste node to a node, the active node will be the operation node                                                                                                                                                       | data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods)                                                                                                                                                                                                                                           |
-| SET_NODE_STYLE                     | Modify node style                                                                                                                                                                                                      | node (the node to set the style of), prop (style property), value (style property value), isActive (boolean, whether the style being set is for the active state)                                                                                                                                                                                        |
-| SET_NODE_ACTIVE                    | Set whether the node is active                                                                                                                                                                                         | node (the node to set), active (boolean, whether to activate)                                                                                                                                                                                                                                                                                            |
-| CLEAR_ACTIVE_NODE                  | Clear the active state of the currently active node(s), the active node will be the operation node                                                                                                                     |                                                                                                                                                                                                                                                                                                                                                          |
-| SET_NODE_EXPAND                    | Set whether the node is expanded                                                                                                                                                                                       | node (the node to set), expand (boolean, whether to expand)                                                                                                                                                                                                                                                                                              |
-| EXPAND_ALL                         | Expand all nodes                                                                                                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                          |
-| UNEXPAND_ALL                       | Collapse all nodes                                                                                                                                                                                                     |                                                                                                                                                                                                                                                                                                                                                          |
-| UNEXPAND_TO_LEVEL (v0.2.8+)        | Expand to a specified level                                                                                                                                                                                            | level (the level to expand to, 1, 2, 3...)                                                                                                                                                                                                                                                                                                               |
-| SET_NODE_DATA                      | Update node data, that is, update the data in the data object of the node data object                                                                                                                                  | node (the node to set), data (object, the data to update, e.g. `{expand: true}`)                                                                                                                                                                                                                                                                         |
-| SET_NODE_TEXT                      | Set node text                                                                                                                                                                                                          | node (the node to set), text (the new text for the node)                                                                                                                                                                                                                                                                                                 |
-| SET_NODE_IMAGE                     | Set Node Image                                                                                                                                                                                                         | node (node to set), imgData (object, image information, structured as: `{url, title, width, height}`, the width and height of the image must be passed)                                                                                                                                                                                                  |
-| SET_NODE_ICON                      | Set Node Icon                                                                                                                                                                                                          | node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the [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) file, icon name is type_name, such as ['priority_1']) |
-| SET_NODE_HYPERLINK                 | Set Node Hyperlink                                                                                                                                                                                                     | node (node to set), link (hyperlink address), title (hyperlink name, optional)                                                                                                                                                                                                                                                                           |
-| SET_NODE_NOTE                      | Set Node Note                                                                                                                                                                                                          | node (node to set), note (note text)                                                                                                                                                                                                                                                                                                                     |
-| SET_NODE_TAG                       | Set Node Tag                                                                                                                                                                                                           | node (node to set), tag (string array, built-in color information can be obtained in [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+)             | Move Node to After Another Node                                                                                                                                                                                        | node (node to move), exist (target node)                                                                                                                                                                                                                                                                                                                 |
-| INSERT_BEFORE (v0.1.5+)            | Move Node to Before Another Node                                                                                                                                                                                       | node (node to move), exist (target node)                                                                                                                                                                                                                                                                                                                 |
-| MOVE_NODE_TO (v0.1.5+)             | Move a node as a child of another node                                                                                                                                                                                 | node (the node to move), toNode (the target node)                                                                                                                                                                                                                                                                                                        |
-| ADD_GENERALIZATION (v0.2.0+)       | Add a node summary                                                                                                                                                                                                     | data (the data for the summary, in object format, all numerical fields of the node are supported, default is `{text: 'summary'}`)                                                                                                                                                                                                                        |
-| REMOVE_GENERALIZATION (v0.2.0+)    | Remove a node summary                                                                                                                                                                                                  |                                                                                                                                                                                                                                                                                                                                                          |
-| SET_NODE_CUSTOM_POSITION (v0.2.0+) | Set a custom position for a node                                                                                                                                                                                       | node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined)                                                                                                                                                                                                                                |
-| RESET_LAYOUT (v0.2.0+)             | Arrange layout with one click                                                                                                                                                                                          |                                                                                                                                                                                                                                                                                                                                                          |
-| SET_NODE_SHAPE (v0.2.4+)           | Set the shape of a node                                                                                                                                                                                                | node (the node to set), shape (the shape, all shapes: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js)                                                                                                                                                                                                                       |
+| Command name                       | Description                                                  | Parameters                                                   |
+| ---------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| SELECT_ALL                         | Select all                                                   |                                                              |
+| BACK                               | Go back a specified number of steps                          | step (the number of steps to go back, default is 1)          |
+| FORWARD                            | Go forward a specified number of steps                       | step (the number of steps to go forward, default is 1)       |
+| INSERT_NODE                        | Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple active nodes, only the first one will be effective | openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is `true`） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to [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) ）                                                           |
+| INSERT_CHILD_NODE                  | Insert a child node, the active node or appoint node will be the operation node |  openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is `true`）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to [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) ）                                                            |
+| UP_NODE                            | Move node up, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the first node in the list will be invalid |                                                              |
+| DOWN_NODE                          | Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid |                                                              |
+| REMOVE_NODE                        | Remove node, the active node or appoint node will be the operation node      |  appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）                                                            |
+| PASTE_NODE                         | Paste node to a node, the active node will be the operation node | data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods) |
+| SET_NODE_STYLE                     | Modify node style                                            | node (the node to set the style of), prop (style property), value (style property value), isActive (boolean, whether the style being set is for the active state) |
+| SET_NODE_ACTIVE                    | Set whether the node is active                               | node (the node to set), active (boolean, whether to activate) |
+| CLEAR_ACTIVE_NODE                  | Clear the active state of the currently active node(s), the active node will be the operation node |                                                              |
+| SET_NODE_EXPAND                    | Set whether the node is expanded                             | node (the node to set), expand (boolean, whether to expand)  |
+| EXPAND_ALL                         | Expand all nodes                                             |                                                              |
+| UNEXPAND_ALL                       | Collapse all nodes                                           |                                                              |
+| UNEXPAND_TO_LEVEL (v0.2.8+)        | Expand to a specified level                                  | level (the level to expand to, 1, 2, 3...)                   |
+| SET_NODE_DATA                      | Update node data, that is, update the data in the data object of the node data object | node (the node to set), data (object, the data to update, e.g. `{expand: true}`) |
+| SET_NODE_TEXT                      | Set node text                                                | node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to `true`） |
+| SET_NODE_IMAGE                     | Set Node Image                                               | node (node to set), imgData (object, image information, structured as: `{url, title, width, height}`, the width and height of the image must be passed) |
+| SET_NODE_ICON                      | Set Node Icon                                                | node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the [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) file, icon name is type_name, such as ['priority_1']) |
+| SET_NODE_HYPERLINK                 | Set Node Hyperlink                                           | node (node to set), link (hyperlink address), title (hyperlink name, optional) |
+| SET_NODE_NOTE                      | Set Node Note                                                | node (node to set), note (note text)                         |
+| SET_NODE_TAG                       | Set Node Tag                                                 | node (node to set), tag (string array, built-in color information can be obtained in [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+)             | Move Node to After Another Node                              | node (node to move), exist (target node)                     |
+| INSERT_BEFORE (v0.1.5+)            | Move Node to Before Another Node                             | node (node to move), exist (target node)                     |
+| MOVE_NODE_TO (v0.1.5+)             | Move a node as a child of another node                       | node (the node to move), toNode (the target node)            |
+| ADD_GENERALIZATION (v0.2.0+)       | Add a node summary                                           | data (the data for the summary, in object format, all numerical fields of the node are supported, default is `{text: 'summary'}`) |
+| REMOVE_GENERALIZATION (v0.2.0+)    | Remove a node summary                                        |                                                              |
+| SET_NODE_CUSTOM_POSITION (v0.2.0+) | Set a custom position for a node                             | node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined) |
+| RESET_LAYOUT (v0.2.0+)             | Arrange layout with one click                                |                                                              |
+| SET_NODE_SHAPE (v0.2.4+)           | Set the shape of a node                                      | node (the node to set), shape (the shape, all shapes: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js) |

 ### setData(data)

@@ -319,4 +347,16 @@ map).
 > v0.1.5+

 Convert the coordinates of the browser's visible window to coordinates relative
-to the canvas.
+to the canvas.
+
+### addPlugin(plugin, opt)
+
+> v0.4.0+
+
+Register plugin, Use `MindMap.usePlugin` to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the `addPlugin` method of the instance.
+
+### removePlugin(plugin)
+
+> v0.4.0+
+
+Remove registered plugin, Plugins registered through the `usePlugin` or `addPlugin` methods can be removed.
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -140,6 +140,62 @@
 <td>Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration</td>
 <td></td>
 </tr>
+<tr>
+<td>textAutoWrapWidth（v0.3.4+）</td>
+<td>Number</td>
+<td>500</td>
+<td>Each line of text in the node will wrap automatically when it reaches the width</td>
+<td></td>
+</tr>
+<tr>
+<td>customHandleMousewheel（v0.4.3+）</td>
+<td>Function</td>
+<td>null</td>
+<td>User-defined mouse wheel event processing can pass a function, and the callback parameter is the event object</td>
+<td></td>
+</tr>
+<tr>
+<td>mousewheelAction（v0.4.3+）</td>
+<td>String</td>
+<td>zoom</td>
+<td>The behavior of the mouse wheel, <code>zoom</code>(Zoom in and out)、<code>move</code>(Move up and down). If <code>customHandleMousewheel</code> passes a custom function, this property will not take effect</td>
+<td></td>
+</tr>
+<tr>
+<td>mousewheelMoveStep（v0.4.3+）</td>
+<td>Number</td>
+<td>100</td>
+<td>When the <code>mousewheelAction</code> is set to <code>move</code>, you can use this attribute to control the step length of the view movement when the mouse scrolls. The unit is <code>px</code></td>
+<td></td>
+</tr>
+<tr>
+<td>defaultInsertSecondLevelNodeText（v0.4.7+）</td>
+<td>String</td>
+<td>二级节点</td>
+<td>Text of the default inserted secondary node</td>
+<td></td>
+</tr>
+<tr>
+<td>defaultInsertBelowSecondLevelNodeText（v0.4.7+）</td>
+<td>String</td>
+<td>分支主题</td>
+<td>Text for nodes below the second level inserted by default</td>
+<td></td>
+</tr>
+<tr>
+<td>expandBtnStyle（v0.5.0+）</td>
+<td>Object</td>
+<td>{ color: '#808080', fill: '#fff' }</td>
+<td>Expand the color of the stow button</td>
+<td></td>
+</tr>
+<tr>
+<td>expandBtnIcon（v0.5.0+）</td>
+<td>Object</td>
+<td>{ open: '', close: '' }</td>
+<td>Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Watermark config</h3>
@@ -207,12 +263,20 @@ MindMap.defineTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>, {})
 mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
 </code></pre>
 <p>For all configurations of theme, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">Default Topic</a>. The <code>defineTheme</code>method will merge the configuration you passed in with the default configuration. Most of the themes  do not need custom many parts. For a typical customized theme configuration, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>.</p>
-<h3>usePlugin(plugin)</h3>
+<h3>usePlugin(plugin, opt = {})</h3>
 <blockquote>
 <p>v0.3.0+</p>
 </blockquote>
+<ul>
+<li><code>opt</code>：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter.</li>
+</ul>
 <p>If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.</p>
 <p>Note: The plugin needs to be registered before instantiating <code>MindMap</code>.</p>
+<h3>hasPlugin(plugin)</h3>
+<blockquote>
+<p>v0.4.0+</p>
+</blockquote>
+<p>Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is <code>-1</code>, it means that the plugin is not registered.</p>
 <h2>Static props</h2>
 <h3>pluginList</h3>
 <blockquote>
@@ -235,10 +299,16 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
  scaleY, <span class="hljs-comment">// Number, vertical zoom value of mind map graphics</span>
 }
 </code></pre>
-<h3>render()</h3>
+<h3>render(callback)</h3>
+<ul>
+<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
+</ul>
 <p>Triggers a full rendering, which will reuse nodes for better performance. If
 only the node positions have changed, this method can be called to <code>reRender</code>.</p>
-<h3>reRender()</h3>
+<h3>reRender(callback)</h3>
+<ul>
+<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
+</ul>
 <p>Performs a full re-render, clearing the canvas and creating new nodes. This has
 poor performance and should be used sparingly.</p>
 <h3>resize()</h3>
@@ -346,6 +416,16 @@ poor performance and should be used sparingly.</p>
 <td>e (event object), this (node instance)</td>
 </tr>
 <tr>
+<td>node_mouseenter（v0.4.1+）</td>
+<td>Node mouseenter event</td>
+<td>this (node instance), e (event object)</td>
+</tr>
+<tr>
+<td>node_mouseleave（v0.4.1+）</td>
+<td>Node mouseleave event</td>
+<td>this (node instance), e (event object)</td>
+</tr>
+<tr>
 <td>before_node_active</td>
 <td>Event before node activation</td>
 <td>this (node instance), activeNodeList (current list of active nodes)</td>
@@ -385,6 +465,31 @@ poor performance and should be used sparingly.</p>
 <td>Node tree render end event</td>
 <td></td>
 </tr>
+<tr>
+<td>rich_text_selection_change（v0.4.0+）</td>
+<td>Available when the <code>RichText</code> plugin is registered. Triggered when the text selection area changes when the node is edited</td>
+<td>hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area）</td>
+</tr>
+<tr>
+<td>transforming-dom-to-images（v0.4.0+）</td>
+<td>Available when the <code>RichText</code> plugin is registered. When there is a <code>DOM</code> node in <code>svg</code>, the <code>DOM</code> node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting</td>
+<td>index（Index of the node currently converted to）、len（Total number of nodes to be converted）</td>
+</tr>
+<tr>
+<td>node_dragging（v0.4.5+）</td>
+<td>Triggered when a node is dragged</td>
+<td>node(The currently dragged node)</td>
+</tr>
+<tr>
+<td>node_dragend（v0.4.5+）</td>
+<td>Triggered when the node is dragged and ends</td>
+<td></td>
+</tr>
+<tr>
+<td>associative_line_click（v0.4.5+）</td>
+<td>Triggered when an associated line is clicked</td>
+<td>path(Connector node)、clickPath(Invisible click line node)、node(Start node)、toNode(Target node)</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
@@ -453,13 +558,13 @@ redo. All commands are as follows:</p>
 </tr>
 <tr>
 <td>INSERT_NODE</td>
-<td>Insert a sibling node, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective</td>
-<td></td>
+<td>Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple active nodes, only the first one will be effective</td>
+<td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is <code>true</code>） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to <a href="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</a> ）</td>
 </tr>
 <tr>
 <td>INSERT_CHILD_NODE</td>
-<td>Insert a child node, the active node will be the operation node</td>
-<td></td>
+<td>Insert a child node, the active node or appoint node will be the operation node</td>
+<td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is <code>true</code>）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to <a href="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</a> ）</td>
 </tr>
 <tr>
 <td>UP_NODE</td>
@@ -473,8 +578,8 @@ redo. All commands are as follows:</p>
 </tr>
 <tr>
 <td>REMOVE_NODE</td>
-<td>Remove node, the active node will be the operation node</td>
-<td></td>
+<td>Remove node, the active node or appoint node will be the operation node</td>
+<td>appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）</td>
 </tr>
 <tr>
 <td>PASTE_NODE</td>
@@ -524,7 +629,7 @@ redo. All commands are as follows:</p>
 <tr>
 <td>SET_NODE_TEXT</td>
 <td>Set node text</td>
-<td>node (the node to set), text (the new text for the node)</td>
+<td>node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to <code>true</code>）</td>
 </tr>
 <tr>
 <td>SET_NODE_IMAGE</td>
@@ -628,6 +733,16 @@ map).</p>
 </blockquote>
 <p>Convert the coordinates of the browser's visible window to coordinates relative
 to the canvas.</p>
+<h3>addPlugin(plugin, opt)</h3>
+<blockquote>
+<p>v0.4.0+</p>
+</blockquote>
+<p>Register plugin, Use <code>MindMap.usePlugin</code> to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the <code>addPlugin</code> method of the instance.</p>
+<h3>removePlugin(plugin)</h3>
+<blockquote>
+<p>v0.4.0+</p>
+</blockquote>
+<p>Remove registered plugin, Plugins registered through the <code>usePlugin</code> or <code>addPlugin</code> methods can be removed.</p>

  </div>
 </template>
--- a/web/src/pages/Doc/en/doExport/index.md
+++ b/web/src/pages/Doc/en/doExport/index.md
@@ -20,19 +20,40 @@ After registration and instantiation of `MindMap`, the instance can be obtained
 Exports as `png`, an async method that returns image data, `data:url` data which
 can be downloaded or displayed.

-### svg()
+### svg(name, domToImage = false, plusCssText)
+
+- `name`：`svg` title
+
+- `domToImage`：v0.4.0+, When node rich text editing is enabled, you can use this parameter to specify whether to convert the `dom` node in the `svg` into a picture
+
+- `plusCssText`：v0.4.0+, When node rich text editing is enabled and `domToImage` passes `false`, additional `css` styles can be added. If there is a `dom` node in `svg`, you can set some styles for the node through this parameter, such as:
+
+```js
+svg(
+  '', 
+  false, 
+  `* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }`
+)
+```

 Exports as `svg`, an async method that returns `svg` data, `data:url` data which
 can be downloaded or displayed.

-### getSvgData()
+### getSvgData(domToImage)
+
+- `domToImage`：v0.4.0+, If node rich text is enabled, you can use this parameter to specify whether to convert the `DOM` node embedded in `svg` into a picture.

 Gets `svg` data, an async method that returns an object:

 ```js
 {
  node; // svg object
-  str; // svg string
+  str; // svg string, if rich text editing is enabled and domToImage is set to true, the dom node in the svg character returned by this value will be converted into the form of an image
+  nodeWithDomToImg// v0.4.0+，The svg object after the DOM node is converted to an image has a value only when rich text editing is enabled and domToImage is set to true, otherwise null
 }
 ```

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
wanglin2	69dab99bf7	Merge branch 'feature' into main	2023-04-02 21:27:24 +08:00
wanglin2	c94f459ff9	打包0.5.0	2023-04-02 21:12:44 +08:00
wanglin2	cd3baf411b	更新文档	2023-04-02 21:08:55 +08:00
wanglin2	042911371c	优化节点拖拽移动逻辑	2023-04-02 11:21:35 +08:00
wanglin2	8e2fb72309	优化:收起所有节点后回到中心位置	2023-04-01 17:30:29 +08:00
wanglin2	77aacccdad	FIX:setData后触发历史数据记录	2023-04-01 09:30:38 +08:00
wanglin2	5413c867e3	FEATURE:支持自定义展开收起按钮的颜色和图标	2023-04-01 09:19:51 +08:00
wanglin2	4fc7eb084e	demo:优化工具栏的位置	2023-04-01 08:26:53 +08:00
wanglin2	a9b04312d8	移除重复的事件绑定	2023-03-31 22:30:06 +08:00
wanglin2	4cd9b66653	阻止短时间多次触发渲染	2023-03-31 22:25:34 +08:00
wanglin2	9b7b41597f	Merge branch 'main' of https://github.com/wanglin2/mind-map into main	2023-03-31 14:39:30 +08:00
wanglin2	e56ff8fdf2	更新群二维码	2023-03-31 14:39:09 +08:00
wanglin2	8d9299aed7	优化和修复节点编辑的一些体验和问题	2023-03-31 14:37:32 +08:00
wanglin2	f8506cb75b	优化设置主题、前进回退等操作的性能问题	2023-03-31 14:36:08 +08:00
wanglin2	c90ee9e892	优化设置主题	2023-03-31 14:34:56 +08:00
wanglin2	4d21b84882	一些小调整	2023-03-31 14:32:43 +08:00
wanglin2	331f0bdf97	优化展开收起按钮的逻辑	2023-03-30 16:12:46 +08:00
wanglin2	0a4898697d	优化：提取代码中的常量	2023-03-30 14:36:30 +08:00
wanglin2	79ae08fc9a	1.修改主题不再完全重新渲染；2.重构Node类核心逻辑；3.Shape类不再直接添加节点，而是返回节点	2023-03-30 14:16:47 +08:00
wanglin2	1795773af9	Break change：节点激活样式只能修改形状相关样式	2023-03-28 20:01:52 +08:00
wanglin2	747a781ad8	删除注释后的空行	2023-03-28 19:35:57 +08:00
wanglin2	fcfcb1c3d1	优化：getSize以后不需要调用renderNode方法，直接layout即可	2023-03-28 19:30:13 +08:00
wanglin2	d412ae8cce	优化：节点实例、样式实例不再保存主题配置，直接从mindMap实例上获取	2023-03-28 19:15:47 +08:00
wanglin2	d834b76d42	FIX：修复创建节点时重复的函数调用，优化性能	2023-03-27 09:11:15 +08:00
wanglin2	3f9da8940f	打包0.4.7	2023-03-24 21:05:12 +08:00
wanglin2	26d5f69af2	Doc：更新文档	2023-03-24 15:26:44 +08:00
wanglin2	6efe4a3fd6	Feature：1.支持配置插入节点时的初始文字；2.优化历史记录添加逻辑；3.节点插入和删除命令支持传入指定节点和初始节点数据	2023-03-24 15:26:24 +08:00
wanglin2	2b4ab4a322	Fix：修复从富文本模式切换到非富文本模式时没有触发数据更新和历史记录的问题	2023-03-24 11:34:09 +08:00
wanglin2	cca42d1f89	Fix：修复从富文本模式切换到非富文本模式时	2023-03-24 11:33:17 +08:00
wanglin2	724fef87b1	Doc：更新文档	2023-03-24 11:22:18 +08:00
wanglin2	d50c0e4cd5	优化：1.节点激活状态切换不再触发历史记录；2.短时间多次触发历史记录只会添加最后一次的数据	2023-03-24 11:22:05 +08:00
wanglin2	c18c037642	Doc：更新文档	2023-03-24 10:31:21 +08:00
wanglin2	cda1da5fd0	Demo：Feature：支持导入和导出为markdown格式，优化导出弹窗视觉	2023-03-24 10:30:53 +08:00
wanglin2	eba1aa3a37	Demo：增加图标	2023-03-24 10:28:35 +08:00
wanglin2	81018bb615	Fix：修复富文本编辑模式下当没有富文本节点时无法导出为图片的问题	2023-03-24 10:27:13 +08:00
wanglin2	5fa0ff7b5c	Feature：支持导入和导出为markdown格式文件	2023-03-24 10:13:24 +08:00
wanglin2	cabe286ebb	优化：富文本编辑时默认不再全选；使用节点填充色作为编辑时的背景色	2023-03-23 09:39:00 +08:00
wanglin2	e337da088b	打包0.4.6	2023-03-22 15:14:50 +08:00
wanglin2	de97ea9e75	兼容0.4.5版本的关联线	2023-03-22 14:40:07 +08:00
wanglin2	cc331065eb	修改文档	2023-03-22 13:49:47 +08:00
wanglin2	9a8e630654	Feature：支持调整关联线的控制点	2023-03-22 13:49:34 +08:00
wanglin2	17ab977efb	优化关联线的点击逻辑	2023-03-22 13:42:31 +08:00
wanglin2	6bd10d9451	1.demo：大纲支持点击后定位节点，支持添加节点；2.完善问题	2023-03-21 09:35:34 +08:00
wanglin2	5313b9b69c	1.优化重复的历史数据；2.修复节点编辑时的方向键冲突；3.修复拖拽节点的id丢失问题	2023-03-21 09:34:47 +08:00
wanglin2	8dcfdcc44a	更新二维码	2023-03-20 09:26:46 +08:00
wanglin2	67422df3ff	打包0.4.5	2023-03-18 21:54:20 +08:00
wanglin2	2ad7536eb7	优化关联线逻辑	2023-03-18 21:51:02 +08:00
wanglin2	6f56e5c4e6	完善文档	2023-03-17 23:06:14 +08:00
wanglin2	5ae8ebe590	Feature:1.优化关联线创建,2.支持按住ctrl键多选和取消多选节点	2023-03-17 23:00:25 +08:00
wanglin2	6ecb97e4e5	Feature：按住根节点也可以拖动画布	2023-03-17 17:03:56 +08:00
wanglin2	c8f938dd3e	Fix：修复创建关联线时节点激活状态未清除的问题	2023-03-17 16:57:30 +08:00
wanglin2	0d29e29162	完善文档	2023-03-17 16:24:22 +08:00
wanglin2	be1b3dffce	demo支持关联线功能	2023-03-17 15:39:07 +08:00
wanglin2	3ba2dbe415	Feature：新增关联线功能	2023-03-17 15:38:38 +08:00
wanglin2	19a96c92a9	新增图标	2023-03-17 14:43:23 +08:00
wanglin2	c265e3e437	打包0.4.4	2023-03-14 09:45:27 +08:00
wanglin2	7434ac2648	Feature：支持响应鼠标的横向滚动	2023-03-08 16:04:26 +08:00
wanglin2	63d73a73aa	打包0.4.3	2023-03-08 09:43:11 +08:00
wanglin2	00f9258a4d	更新文档	2023-03-08 09:39:05 +08:00
wanglin2	7087b43d39	Fix：修复前进后退没有触发data_change事件的问题；Feature：鼠标滚轮事件支持自定义	2023-03-08 09:38:46 +08:00
wanglin2	945a78b7b1	去除docs目录，更新群二维码	2023-03-06 14:26:02 +08:00
wanglin2	55acc19ab8	打包0.4.2	2023-03-01 09:24:51 +08:00
wanglin2	410f0be05e	Fetaure：Node类的setText方法增加第二个参数，以支持设置富文本内容	2023-03-01 09:17:45 +08:00
wanglin2	2d7c091071	打包0.4.1	2023-02-27 15:31:52 +08:00
wanglin2	9bf58a54ce	Feature：节点富文本编辑支持清除文字样式	2023-02-27 15:19:56 +08:00
wanglin2	231adeea44	Feature：富文本支持设置背景颜色	2023-02-27 14:58:01 +08:00
wanglin2	0ea618af39	Fix:1.Mac系统触控板缩放方向相反的问题;2.设备像素比不为1时导出图片中富文本节点尺寸变大的问题.Feater:节点抛出鼠标移入和移出事件	2023-02-26 10:07:03 +08:00
wanglin2	f66297ff99	打包0.4.0	2023-02-25 10:11:16 +08:00
wanglin2	3113bf2e1f	完善文档	2023-02-24 17:14:48 +08:00
wanglin2	8c114dac02	Feature：支持节点富文本编辑	2023-02-24 17:14:24 +08:00
wanglin2	06dba79272	新增图标	2023-02-24 17:13:07 +08:00
wanglin2	8441986ca7	修改文档	2023-02-20 19:25:59 +08:00
wanglin2	c8b50908e1	Fix：修复底边风格的情况下，节点高度过高会和其他节点重叠的问题	2023-02-20 15:10:27 +08:00
wanglin2	7e11fde892	打包0.3.4	2023-02-20 11:30:15 +08:00
wanglin2	3d9f3bd7a8	Fix：修复批量删除的节点中如果存在根节点会出现删除异常的问题	2023-02-20 11:26:26 +08:00
wanglin2	46e11649b0	优化节点文本编辑	2023-02-20 11:02:04 +08:00
wanglin2	161ef7590c	feature：节点文本增加自动换行功能	2023-02-20 10:14:34 +08:00
wanglin2	ca660a3c74	打包0.3.3	2023-02-14 09:38:38 +08:00
wanglin2	7a24872331	Fix：修复根节点无法黄的问题	2023-02-14 09:35:56 +08:00
wanglin2	eb4ea9fb3a	打包0.3.2	2023-02-03 11:13:58 +08:00
wanglin2	64228c02ff	修复当思维导图实际内容大于屏幕宽高时，导出的时候超出的部分没有绘制水印的问题	2023-02-03 11:09:43 +08:00
wanglin2	f184a5d948	修复二级节点拖拽到其他节点或其他节点拖拽到二级节点时节点样式没有更新的问题	2023-02-03 10:40:06 +08:00