打包0.4.6

兼容0.4.5版本的关联线
修改文档
2026-02-18 06:18:27 +08:00 · 2023-03-22 15:14:50 +08:00 · 2023-03-22 14:40:07 +08:00 · 2023-03-22 13:49:47 +08:00 · 2023-03-22 13:49:34 +08:00 · 2023-03-22 13:42:31 +08:00
192 changed files with 16270 additions and 9048 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-.DS_Store
+.DS_Store
+dist_electron
--- a/README.md
+++ b/README.md
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
--- 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"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.3d234c87.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.94891485.css" rel="preload" as="style"><link href="dist/js/app.54d858bc.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.6cac1a4d.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.94891485.css" rel="stylesheet"><link href="dist/css/app.3d234c87.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.6cac1a4d.js"></script><script src="dist/js/app.54d858bc.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.05d77cdf.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.0b1c8d8d.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.040c6f5c.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.4d871bf6.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.ae972b36.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.7fcfc285.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.b094b87c.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.34207f33.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.ade5a7e0.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.c9a9ab22.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.db6065c6.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.1ffa155d.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.e44018ef.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.17d4f60a.js" rel="prefetch"><link href="dist/js/chunk-2d0c18d8.0921c70f.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.52b68dc1.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.7cb4182f.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.57f5b62e.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.c67e6ecf.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.cd8db1ee.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.6c0d2c1e.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.2fd89008.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.32d1bf7e.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.836132f8.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.7b4a470a.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.00dad103.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.3c894463.js" rel="prefetch"><link href="dist/js/chunk-2d0e268c.95aec9d1.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.a4640577.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.bd5197f5.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.c3ec62ff.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.c7c6517f.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.af7fe897.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.7639ecc2.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.e60ccf9b.js" rel="prefetch"><link href="dist/js/chunk-2d216004.fde7548f.js" rel="prefetch"><link href="dist/js/chunk-2d217907.3772894a.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.5947204c.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.0bdd83ab.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.1447b6d2.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.4fa18681.js" rel="prefetch"><link href="dist/js/chunk-2d238428.61fffbf5.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.2f2d473c.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.e8192153.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.f9723ab8.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.2f2d473c.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.f9723ab8.js"></script><script src="dist/js/app.e8192153.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": {
@@ -925,5 +936,6 @@ export default {
    "layout": "logicalStructure",
    // "layout": "mindMap",
    // "layout": "catalogOrganization"
-    // "layout": "organizationStructure"
+    // "layout": "organizationStructure",
+    "config": {}
 }
--- a/simple-mind-map/example/exportFullData.json
+++ b/simple-mind-map/example/exportFullData.json
@@ -31,6 +31,12 @@
                    "isActive": false
                },
                "children": []
+            }, {
+                "data": {
+                    "text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
+                    "richText": true
+                },
+                "children": []
            }]
        }]
    },
@@ -62,5 +68,6 @@
            "sx": 0,
            "sy": 0
        }
-    }
+    },
+    "config": {}
 }
--- a/simple-mind-map/full.js
+++ b/simple-mind-map/full.js
@@ -0,0 +1,20 @@
+import MindMap from './index'
+import MiniMap from './src/MiniMap.js'
+import Watermark from './src/Watermark.js'
+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 xmind from './src/parse/xmind.js'
+
+MindMap.xmind = xmind
+
+MindMap
+  .usePlugin(MiniMap)
+  .usePlugin(Watermark)
+  .usePlugin(Drag)
+  .usePlugin(KeyboardNavigation)
+  .usePlugin(Export)
+  .usePlugin(Select)
+
+export default MindMap
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -7,15 +7,9 @@ import Style from './src/Style'
 import KeyCommand from './src/KeyCommand'
 import Command from './src/Command'
 import BatchExecution from './src/BatchExecution'
-import Export from './src/Export'
-import Select from './src/Select'
-import Drag from './src/Drag'
-import MiniMap from './src/MiniMap'
 import { layoutValueList } from './src/utils/constant'
 import { SVG } from '@svgdotjs/svg.js'
-import xmind from './src/parse/xmind'
 import { simpleDeepClone } from './src/utils'
-import KeyboardNavigation from './src/KeyboardNavigation'
 import defaultTheme from './src/themes/default'

 // 默认选项配置
@@ -45,13 +39,36 @@ const defaultOpt = {
  // 多选节点时鼠标移动距边缘多少距离时开始偏移
  selectTranslateLimit: 20,
  // 自定义节点备注内容显示
-  customNoteContentShow: null
+  customNoteContentShow: null,
  /*
        {
            show(){},
            hide(){}
        }
    */
+  // 是否开启节点自由拖拽
+  enableFreeDrag: false,
+  // 水印配置
+  watermarkConfig: {
+    text: '',
+    lineSpacing: 100,
+    textSpacing: 100,
+    angle: 30,
+    textStyle: {
+      color: '#999',
+      opacity: 0.5,
+      fontSize: 14
+    }
+  },
+  // 达到该宽度文本自动换行
+  textAutoWrapWidth: 500,
+  // 自定义鼠标滚轮事件处理
+  // 可以传一个函数，回调参数为事件对象
+  customHandleMousewheel: null,
+  // 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
+  mousewheelAction: 'zoom',// zoom（放大缩小）、move（上下移动）
+  // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
+  mousewheelMoveStep: 100
 }

 //  思维导图
@@ -105,34 +122,14 @@ class MindMap {
      draw: this.draw
    })

-    // 小地图类
-    this.miniMap = new MiniMap({
-      mindMap: this
-    })
-
-    // 导出类
-    this.doExport = new Export({
-      mindMap: this
-    })
-
-    // 选择类
-    this.select = new Select({
-      mindMap: this
-    })
-
-    // 拖动类
-    this.drag = new Drag({
-      mindMap: this
-    })
-
-    // 键盘导航类
-    this.keyboardNavigation = new KeyboardNavigation({
-      mindMap: this
-    })
-
    // 批量执行类
    this.batchExecution = new BatchExecution()

+    // 注册插件
+    MindMap.pluginList.forEach((plugin) => {
+      this.initPlugin(plugin)
+    })
+
    // 初始渲染
    this.reRender()
    setTimeout(() => {
@@ -152,21 +149,21 @@ class MindMap {
  }

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

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

@@ -229,6 +226,16 @@ class MindMap {
    return prop === undefined ? this.themeConfig : this.themeConfig[prop]
  }

+  // 获取配置
+  getConfig(prop) {
+    return prop === undefined ? this.opt : this.opt[prop]
+  }
+
+  // 更新配置
+  updateConfig(opt = {}) {
+    this.opt = this.handleOpt(merge.all([defaultOpt, this.opt, opt]))
+  }
+
  //  获取当前布局结构
  getLayout() {
    return this.opt.layout
@@ -325,9 +332,98 @@ class MindMap {
    }
    this.emit('mode_change', mode)
  }
+
+  // 获取svg数据
+  getSvgData() {
+    const svg = this.svg
+    const draw = this.draw
+    // 保存原始信息
+    const origWidth = svg.width()
+    const origHeight = svg.height()
+    const origTransform = draw.transform()
+    const elRect = this.el.getBoundingClientRect()
+    // 去除放大缩小的变换效果
+    draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
+    // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
+    const rect = draw.rbox()
+    // 将svg设置为实际内容的宽高
+    svg.size(rect.width, rect.height)
+    // 把实际内容变换
+    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
+    // 克隆一份数据
+    let clone = svg.clone()
+    // 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题
+    if ((rect.width > origWidth || rect.height >  origHeight) && this.watermark && this.watermark.hasWatermark()) {
+      this.width = rect.width
+      this.height = rect.height
+      this.watermark.draw()
+      clone = svg.clone()
+      this.width = origWidth
+      this.height = origHeight
+      this.watermark.draw()
+    }
+    // 恢复原先的大小和变换信息
+    svg.size(origWidth, origHeight)
+    draw.transform(origTransform)
+
+    return {
+      svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
+      svgHTML: clone.svg(), // svg字符串
+      rect: {
+        ...rect, // 思维导图图形未缩放时的位置尺寸等信息
+        ratio: rect.width / rect.height // 思维导图图形的宽高比
+      },
+      origWidth, // 画布宽度
+      origHeight, // 画布高度
+      scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
+      scaleY: origTransform.scaleY // 思维导图图形的垂直缩放值
+    }
+  }
+
+  // 添加插件
+  addPlugin(plugin, opt) {
+    let index = MindMap.hasPlugin(plugin)
+    if (index === -1) {
+      MindMap.usePlugin(plugin, opt)
+      this.initPlugin(plugin)
+    }
+  }
+
+  // 移除插件
+  removePlugin(plugin) {
+    let index = MindMap.hasPlugin(plugin)
+    if (index !== -1) {
+      MindMap.pluginList.splice(index, 1)
+      if (this[plugin.instanceName]) {
+        if (this[plugin.instanceName].beforePluginRemove) {
+          this[plugin.instanceName].beforePluginRemove()
+        }
+        delete this[plugin.instanceName]
+      }
+    }
+  }
+
+  // 实例化插件
+  initPlugin(plugin) {
+    this[plugin.instanceName] = new plugin({
+      mindMap: this,
+      pluginOpt: plugin.pluginOpt
+    })
+  }
 }

-MindMap.xmind = xmind
+// 插件列表
+MindMap.pluginList = []
+MindMap.usePlugin = (plugin, opt = {}) => {
+  plugin.pluginOpt = opt
+  MindMap.pluginList.push(plugin)
+  return MindMap
+}
+MindMap.hasPlugin = (plugin) => {
+  return MindMap.pluginList.findIndex((item) => {
+    return item === plugin
+  })
+}

 // 定义新主题
 MindMap.defineTheme = (name, config = {}) => {
--- a/simple-mind-map/package-lock.json
+++ b/simple-mind-map/package-lock.json
@@ -1,19 +1,22 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.21",
+  "version": "0.4.5",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
-      "version": "0.2.21",
+      "version": "0.4.5",
      "license": "MIT",
      "dependencies": {
        "@svgdotjs/svg.js": "^3.0.16",
        "canvg": "^3.0.7",
        "deepmerge": "^1.5.2",
        "eventemitter3": "^4.0.7",
+        "html2canvas": "^1.4.1",
        "jspdf": "^2.5.1",
        "jszip": "^3.10.1",
+        "quill": "^1.3.6",
+        "uuid": "^9.0.0",
        "xml-js": "^1.6.11"
      },
      "devDependencies": {
@@ -225,7 +228,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
-      "optional": true,
      "engines": {
        "node": ">= 0.6.0"
      }
@@ -251,6 +253,18 @@
        "node": ">= 0.4.0"
      }
    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -294,6 +308,14 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -351,7 +373,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
-      "optional": true,
      "dependencies": {
        "utrie": "^1.0.2"
      }
@@ -373,6 +394,22 @@
        }
      }
    },
+    "node_modules/deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "dependencies": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -387,6 +424,21 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/define-properties": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "dependencies": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/doctrine": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -586,12 +638,22 @@
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "dev": true
    },
+    "node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
    "node_modules/fast-json-stable-stringify": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -671,6 +733,32 @@
      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
      "dev": true
    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -724,6 +812,17 @@
      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
      "dev": true
    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
    "node_modules/has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -733,11 +832,46 @@
        "node": ">=8"
      }
    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/html2canvas": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
-      "optional": true,
      "dependencies": {
        "css-line-break": "^2.1.0",
        "text-segmentation": "^1.0.3"
@@ -800,6 +934,35 @@
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -830,6 +993,21 @@
        "node": ">=8"
      }
    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -969,6 +1147,29 @@
      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
      "dev": true
    },
+    "node_modules/object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1030,6 +1231,11 @@
      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
    },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -1132,6 +1338,37 @@
        }
      ]
    },
+    "node_modules/quill": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.6.tgz",
+      "integrity": "sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug==",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.1",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/quill/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+    },
    "node_modules/raf": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -1159,6 +1396,22 @@
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/regexpp": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -1336,7 +1589,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
-      "optional": true,
      "dependencies": {
        "utrie": "^1.0.2"
      }
@@ -1389,11 +1641,18 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
-      "optional": true,
      "dependencies": {
        "base64-arraybuffer": "^1.0.2"
      }
    },
+    "node_modules/uuid": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -1593,8 +1852,7 @@
    "base64-arraybuffer": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
-      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
-      "optional": true
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
    },
    "brace-expansion": {
      "version": "1.1.11",
@@ -1611,6 +1869,15 @@
      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
    "callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1642,6 +1909,11 @@
        "supports-color": "^7.1.0"
      }
    },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+    },
    "color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1688,7 +1960,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
-      "optional": true,
      "requires": {
        "utrie": "^1.0.2"
      }
@@ -1702,6 +1973,19 @@
        "ms": "2.1.2"
      }
    },
+    "deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "requires": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      }
+    },
    "deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1713,6 +1997,15 @@
      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
    },
+    "define-properties": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "requires": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      }
+    },
    "doctrine": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1860,12 +2153,22 @@
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
    },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
    "fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "dev": true
    },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
    "fast-json-stable-stringify": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -1933,6 +2236,26 @@
      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
      "dev": true
    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
+    },
+    "get-intrinsic": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3"
+      }
+    },
    "glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -1971,17 +2294,45 @@
      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
      "dev": true
    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
    "has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
      "dev": true
    },
+    "has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "requires": {
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
    "html2canvas": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
-      "optional": true,
      "requires": {
        "css-line-break": "^2.1.0",
        "text-segmentation": "^1.0.3"
@@ -2029,6 +2380,23 @@
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
+    "is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
    "is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2050,6 +2418,15 @@
      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
      "dev": true
    },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
    "isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -2168,6 +2545,20 @@
      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
      "dev": true
    },
+    "object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+    },
    "once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2214,6 +2605,11 @@
      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
    },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
    "parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2275,6 +2671,36 @@
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
      "dev": true
    },
+    "quill": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.6.tgz",
+      "integrity": "sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug==",
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.1",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
    "raf": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -2302,6 +2728,16 @@
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
    },
+    "regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      }
+    },
    "regexpp": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -2419,7 +2855,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
-      "optional": true,
      "requires": {
        "utrie": "^1.0.2"
      }
@@ -2463,11 +2898,15 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
-      "optional": true,
      "requires": {
        "base64-arraybuffer": "^1.0.2"
      }
    },
+    "uuid": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
+    },
    "which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.23",
+  "version": "0.4.6",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
@@ -22,14 +22,17 @@
    "format": "prettier --write ."
  },
  "module": "index.js",
-  "main": "./dist/simpleMindMap.umd.min.js",
+  "__main": "./dist/simpleMindMap.umd.min.js",
  "dependencies": {
    "@svgdotjs/svg.js": "^3.0.16",
    "canvg": "^3.0.7",
    "deepmerge": "^1.5.2",
    "eventemitter3": "^4.0.7",
+    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.1",
    "jszip": "^3.10.1",
+    "quill": "^1.3.6",
+    "uuid": "^9.0.0",
    "xml-js": "^1.6.11"
  },
  "keywords": [
--- a/simple-mind-map/scripts/changeComments.js
+++ b/simple-mind-map/scripts/changeComments.js
@@ -1,4 +1,4 @@
-// 将/** */类型的注释转换为//类型
+// 遍历所有js文件
 const path = require('path')
 const fs = require('fs')

@@ -11,13 +11,26 @@ const transform = dir => {
    if (fs.statSync(file).isDirectory()) {
      transform(file)
    } else if (/\.js$/.test(file)) {
-      rewriteComments(file)
+      transformFile(file)
    }
  })
 }

-const rewriteComments = file => {
+const transformFile = file => {
+  console.log(file);
  let content = fs.readFileSync(file, 'utf-8')
+  countCodeLines(content)
+  // transformComments(file, content)
+}
+
+// 统计代码行数
+let totalLines = 0
+const countCodeLines = (content) => {
+  totalLines += content.split(/\n/).length
+}
+
+// 转换注释类型
+const transformComments = (file, content) => {
  console.log('当前转换文件：', file)
  content = content.replace(/\/\*\*[^/]+\*\//g, str => {
    let res = /@Desc:([^\n]+)\n/g.exec(str)
@@ -29,4 +42,5 @@ const rewriteComments = file => {
 }

 transform(entryPath)
-rewriteComments(path.join(__dirname, '../index.js'))
+transformFile(path.join(__dirname, '../index.js'))
+console.log(totalLines);
--- 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/Command.js
+++ b/simple-mind-map/src/Command.js
@@ -72,7 +72,14 @@ class Command {

  //  添加回退数据
  addHistory() {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
    let data = this.getCopyData()
+    // 此次数据和上次一样则不重复添加
+    if (this.history.length > 0 && JSON.stringify(this.history[this.history.length - 1]) === JSON.stringify(data)) {
+      return
+    }
    this.history.push(simpleDeepClone(data))
    this.activeHistoryIndex = this.history.length - 1
    this.mindMap.emit('data_change', data)
@@ -85,6 +92,9 @@ class Command {

  //  回退
  back(step = 1) {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
    if (this.activeHistoryIndex - step >= 0) {
      this.activeHistoryIndex -= step
      this.mindMap.emit(
@@ -92,17 +102,24 @@ 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', data)
+      return data
    }
  }

  //  前进
  forward(step = 1) {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
    let len = this.history.length
    if (this.activeHistoryIndex + step <= len - 1) {
      this.activeHistoryIndex += step
      this.mindMap.emit('back_forward', this.activeHistoryIndex)
-      return simpleDeepClone(this.history[this.activeHistoryIndex])
+      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
+      this.mindMap.emit('data_change', data)
+      return data
    }
  }

--- a/simple-mind-map/src/Drag.js
+++ b/simple-mind-map/src/Drag.js
@@ -1,254 +1,267 @@
-import { bfsWalk, throttle } from './utils'
-import Base from './layouts/Base'
-
-//  节点拖动类
-
-class Drag extends Base {
-  //  构造函数
-
-  constructor({ mindMap }) {
-    super(mindMap.renderer)
-    this.mindMap = mindMap
-    this.reset()
-    this.bindEvent()
-  }
-
-  //  复位
-
-  reset() {
-    // 当前拖拽节点
-    this.node = null
-    // 当前重叠节点
-    this.overlapNode = null
-    // 当前上一个同级节点
-    this.prevNode = null
-    // 当前下一个同级节点
-    this.nextNode = null
-    // 画布的变换数据
-    this.drawTransform = null
-    // 克隆节点
-    this.clone = null
-    // 连接线
-    this.line = null
-    // 同级位置占位符
-    this.placeholder = null
-    // 鼠标按下位置和节点左上角的偏移量
-    this.offsetX = 0
-    this.offsetY = 0
-    // 克隆节点左上角的坐标
-    this.cloneNodeLeft = 0
-    this.cloneNodeTop = 0
-    // 当前鼠标是否按下
-    this.isMousedown = false
-    // 拖拽的鼠标位置变量
-    this.mouseDownX = 0
-    this.mouseDownY = 0
-    this.mouseMoveX = 0
-    this.mouseMoveY = 0
-  }
-
-  //  绑定事件
-
-  bindEvent() {
-    this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
-    this.mindMap.on('node_mousedown', (node, e) => {
-      if (this.mindMap.opt.readonly || node.isGeneralization) {
-        return
-      }
-      if (e.which !== 1 || node.isRoot) {
-        return
-      }
-      e.preventDefault()
-      // 计算鼠标按下的位置距离节点左上角的距离
-      this.drawTransform = this.mindMap.draw.transform()
-      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
-      this.offsetX = x - (node.left * scaleX + translateX)
-      this.offsetY = y - (node.top * scaleY + translateY)
-      this.node = node
-      this.isMousedown = true
-      this.mouseDownX = x
-      this.mouseDownY = y
-    })
-    this.mindMap.on('mousemove', e => {
-      if (this.mindMap.opt.readonly) {
-        return
-      }
-      if (!this.isMousedown) {
-        return
-      }
-      e.preventDefault()
-      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
-      this.mouseMoveX = x
-      this.mouseMoveY = y
-      if (
-        Math.abs(x - this.mouseDownX) <= 10 &&
-        Math.abs(y - this.mouseDownY) <= 10 &&
-        !this.node.isDrag
-      ) {
-        return
-      }
-      this.mindMap.renderer.clearAllActive()
-      this.onMove(x, y)
-    })
-    this.onMouseup = this.onMouseup.bind(this)
-    this.mindMap.on('node_mouseup', this.onMouseup)
-    this.mindMap.on('mouseup', this.onMouseup)
-  }
-
-  //  鼠标松开事件
-
-  onMouseup(e) {
-    if (!this.isMousedown) {
-      return
-    }
-    this.isMousedown = false
-    let _nodeIsDrag = this.node.isDrag
-    this.node.isDrag = false
-    this.node.show()
-    this.removeCloneNode()
-    // 存在重叠子节点，则移动作为其子节点
-    if (this.overlapNode) {
-      this.mindMap.renderer.setNodeActive(this.overlapNode, false)
-      this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode)
-    } else if (this.prevNode) {
-      // 存在前一个相邻节点，作为其下一个兄弟节点
-      this.mindMap.renderer.setNodeActive(this.prevNode, false)
-      this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode)
-    } else if (this.nextNode) {
-      // 存在下一个相邻节点，作为其前一个兄弟节点
-      this.mindMap.renderer.setNodeActive(this.nextNode, false)
-      this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
-    } else if (_nodeIsDrag) {
-      // 自定义位置
-      let { x, y } = this.mindMap.toPos(
-        e.clientX - this.offsetX,
-        e.clientY - this.offsetY
-      )
-      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-      x = (x - translateX) / scaleX
-      y = (y - translateY) / scaleY
-      this.node.left = x
-      this.node.top = y
-      this.node.customLeft = x
-      this.node.customTop = y
-      this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y)
-      this.mindMap.render()
-    }
-    this.reset()
-  }
-
-  //  创建克隆节点
-
-  createCloneNode() {
-    if (!this.clone) {
-      // 节点
-      this.clone = this.node.group.clone()
-      this.clone.opacity(0.5)
-      this.clone.css('z-index', 99999)
-      this.node.isDrag = true
-      this.node.hide()
-      // 连接线
-      this.line = this.draw.path()
-      this.line.opacity(0.5)
-      this.node.styleLine(this.line, this.node)
-      // 同级位置占位符
-      this.placeholder = this.draw.rect().fill({
-        color: this.node.style.merge('lineColor', true)
-      })
-      this.mindMap.draw.add(this.clone)
-    }
-  }
-
-  //  移除克隆节点
-
-  removeCloneNode() {
-    if (!this.clone) {
-      return
-    }
-    this.clone.remove()
-    this.line.remove()
-    this.placeholder.remove()
-  }
-
-  //  拖动中
-
-  onMove(x, y) {
-    if (!this.isMousedown) {
-      return
-    }
-    this.createCloneNode()
-    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-    this.cloneNodeLeft = x - this.offsetX
-    this.cloneNodeTop = y - this.offsetY
-    x = (this.cloneNodeLeft - translateX) / scaleX
-    y = (this.cloneNodeTop - translateY) / scaleY
-    let t = this.clone.transform()
-    this.clone.translate(x - t.translateX, y - t.translateY)
-    // 连接线
-    let parent = this.node.parent
-    this.line.plot(
-      this.quadraticCurvePath(
-        parent.left + parent.width / 2,
-        parent.top + parent.height / 2,
-        x + this.node.width / 2,
-        y + this.node.height / 2
-      )
-    )
-    this.checkOverlapNode()
-  }
-
-  //  检测重叠节点
-
-  checkOverlapNode() {
-    if (!this.drawTransform) {
-      return
-    }
-    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-    let checkRight = this.cloneNodeLeft + this.node.width * scaleX
-    let checkBottom = this.cloneNodeTop + this.node.height * scaleX
-    this.overlapNode = null
-    this.prevNode = null
-    this.nextNode = null
-    this.placeholder.size(0, 0)
-    bfsWalk(this.mindMap.renderer.root, node => {
-      if (node.nodeData.data.isActive) {
-        this.mindMap.renderer.setNodeActive(node, false)
-      }
-      if (node === this.node || this.node.isParent(node)) {
-        return
-      }
-      if (this.overlapNode || (this.prevNode && this.nextNode)) {
-        return
-      }
-      let { left, top, width, height } = node
-      let _left = left
-      let _top = top
-      let _bottom = top + height
-      let right = (left + width) * scaleX + translateX
-      let bottom = (top + height) * scaleY + translateY
-      left = left * scaleX + translateX
-      top = top * scaleY + translateY
-      // 检测是否重叠
-      if (!this.overlapNode) {
-        if (
-          left <= checkRight &&
-          right >= this.cloneNodeLeft &&
-          top <= checkBottom &&
-          bottom >= this.cloneNodeTop
-        ) {
-          this.overlapNode = node
-        }
-      }
-      // 检测兄弟节点位置
-      if (!this.prevNode && !this.nextNode && !node.isRoot) {
-        // && this.node.isBrother(node)
-        if (left <= checkRight && right >= this.cloneNodeLeft) {
-          if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
-            this.prevNode = node
-            this.placeholder.size(node.width, 10).move(_left, _bottom)
-          } else if (checkBottom < top && checkBottom >= top - 10) {
-            this.nextNode = node
-            this.placeholder.size(node.width, 10).move(_left, _top - 10)
-          }
-        }
+import { bfsWalk, throttle } from './utils'
+import Base from './layouts/Base'
+
+//  节点拖动类
+
+class Drag extends Base {
+  //  构造函数
+
+  constructor({ mindMap }) {
+    super(mindMap.renderer)
+    this.mindMap = mindMap
+    this.reset()
+    this.bindEvent()
+  }
+
+  //  复位
+
+  reset() {
+    // 当前拖拽节点
+    this.node = null
+    // 当前重叠节点
+    this.overlapNode = null
+    // 当前上一个同级节点
+    this.prevNode = null
+    // 当前下一个同级节点
+    this.nextNode = null
+    // 画布的变换数据
+    this.drawTransform = null
+    // 克隆节点
+    this.clone = null
+    // 连接线
+    this.line = null
+    // 同级位置占位符
+    this.placeholder = null
+    // 鼠标按下位置和节点左上角的偏移量
+    this.offsetX = 0
+    this.offsetY = 0
+    // 克隆节点左上角的坐标
+    this.cloneNodeLeft = 0
+    this.cloneNodeTop = 0
+    // 当前鼠标是否按下
+    this.isMousedown = false
+    // 拖拽的鼠标位置变量
+    this.mouseDownX = 0
+    this.mouseDownY = 0
+    this.mouseMoveX = 0
+    this.mouseMoveY = 0
+  }
+
+  //  绑定事件
+
+  bindEvent() {
+    this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
+    this.mindMap.on('node_mousedown', (node, e) => {
+      if (this.mindMap.opt.readonly || node.isGeneralization) {
+        return
+      }
+      if (e.which !== 1 || node.isRoot) {
+        return
+      }
+      e.preventDefault()
+      // 计算鼠标按下的位置距离节点左上角的距离
+      this.drawTransform = this.mindMap.draw.transform()
+      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+      this.offsetX = x - (node.left * scaleX + translateX)
+      this.offsetY = y - (node.top * scaleY + translateY)
+      this.node = node
+      this.isMousedown = true
+      this.mouseDownX = x
+      this.mouseDownY = y
+    })
+    this.mindMap.on('mousemove', e => {
+      if (this.mindMap.opt.readonly) {
+        return
+      }
+      if (!this.isMousedown) {
+        return
+      }
+      this.mindMap.emit('node_dragging', this.node)
+      e.preventDefault()
+      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+      this.mouseMoveX = x
+      this.mouseMoveY = y
+      if (
+        Math.abs(x - this.mouseDownX) <= 10 &&
+        Math.abs(y - this.mouseDownY) <= 10 &&
+        !this.node.isDrag
+      ) {
+        return
+      }
+      this.mindMap.renderer.clearAllActive()
+      this.onMove(x, y)
+    })
+    this.onMouseup = this.onMouseup.bind(this)
+    this.mindMap.on('node_mouseup', this.onMouseup)
+    this.mindMap.on('mouseup', this.onMouseup)
+  }
+
+  //  鼠标松开事件
+
+  onMouseup(e) {
+    if (!this.isMousedown) {
+      return
+    }
+    this.isMousedown = false
+    let _nodeIsDrag = this.node.isDrag
+    this.node.isDrag = false
+    this.node.show()
+    this.removeCloneNode()
+    // 存在重叠子节点，则移动作为其子节点
+    if (this.overlapNode) {
+      this.mindMap.renderer.setNodeActive(this.overlapNode, false)
+      this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode)
+    } else if (this.prevNode) {
+      // 存在前一个相邻节点，作为其下一个兄弟节点
+      this.mindMap.renderer.setNodeActive(this.prevNode, false)
+      this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode)
+    } else if (this.nextNode) {
+      // 存在下一个相邻节点，作为其前一个兄弟节点
+      this.mindMap.renderer.setNodeActive(this.nextNode, false)
+      this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
+    } else if (_nodeIsDrag && this.mindMap.opt.enableFreeDrag) {
+      // 自定义位置
+      let { x, y } = this.mindMap.toPos(
+        e.clientX - this.offsetX,
+        e.clientY - this.offsetY
+      )
+      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+      x = (x - translateX) / scaleX
+      y = (y - translateY) / scaleY
+      this.node.left = x
+      this.node.top = y
+      this.node.customLeft = x
+      this.node.customTop = y
+      this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y)
+      this.mindMap.render()
+    }
+    this.reset()
+    this.mindMap.emit('node_dragend')
+  }
+
+  //  创建克隆节点
+
+  createCloneNode() {
+    if (!this.clone) {
+      // 节点
+      this.clone = this.node.group.clone()
+      this.clone.opacity(0.5)
+      this.clone.css('z-index', 99999)
+      this.node.isDrag = true
+      this.node.hide()
+      // 连接线
+      this.line = this.draw.path()
+      this.line.opacity(0.5)
+      this.node.styleLine(this.line, this.node)
+      // 同级位置占位符
+      this.placeholder = this.draw.rect().fill({
+        color: this.node.style.merge('lineColor', true)
+      })
+      this.mindMap.draw.add(this.clone)
+    }
+  }
+
+  //  移除克隆节点
+
+  removeCloneNode() {
+    if (!this.clone) {
+      return
+    }
+    this.clone.remove()
+    this.line.remove()
+    this.placeholder.remove()
+  }
+
+  //  拖动中
+
+  onMove(x, y) {
+    if (!this.isMousedown) {
+      return
+    }
+    this.createCloneNode()
+    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+    this.cloneNodeLeft = x - this.offsetX
+    this.cloneNodeTop = y - this.offsetY
+    x = (this.cloneNodeLeft - translateX) / scaleX
+    y = (this.cloneNodeTop - translateY) / scaleY
+    let t = this.clone.transform()
+    this.clone.translate(x - t.translateX, y - t.translateY)
+    // 连接线
+    let parent = this.node.parent
+    this.line.plot(
+      this.quadraticCurvePath(
+        parent.left + parent.width / 2,
+        parent.top + parent.height / 2,
+        x + this.node.width / 2,
+        y + this.node.height / 2
+      )
+    )
+    this.checkOverlapNode()
+  }
+
+  //  检测重叠节点
+
+  checkOverlapNode() {
+    if (!this.drawTransform) {
+      return
+    }
+    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+    let checkRight = this.cloneNodeLeft + this.node.width * scaleX
+    let checkBottom = this.cloneNodeTop + this.node.height * scaleX
+    this.overlapNode = null
+    this.prevNode = null
+    this.nextNode = null
+    this.placeholder.size(0, 0)
+    bfsWalk(this.mindMap.renderer.root, node => {
+      if (node.nodeData.data.isActive) {
+        this.mindMap.renderer.setNodeActive(node, false)
+      }
+      if (node === this.node || this.node.isParent(node)) {
+        return
+      }
+      if (this.overlapNode || (this.prevNode && this.nextNode)) {
+        return
+      }
+      let { left, top, width, height } = node
+      let _left = left
+      let _top = top
+      let _bottom = top + height
+      let right = (left + width) * scaleX + translateX
+      let bottom = (top + height) * scaleY + translateY
+      left = left * scaleX + translateX
+      top = top * scaleY + translateY
+      // 检测是否重叠
+      if (!this.overlapNode) {
+        if (
+          left <= checkRight &&
+          right >= this.cloneNodeLeft &&
+          top <= checkBottom &&
+          bottom >= this.cloneNodeTop
+        ) {
+          this.overlapNode = node
+        }
+      }
+      // 检测兄弟节点位置
+      if (!this.prevNode && !this.nextNode && !node.isRoot) {
+        // && this.node.isBrother(node)
+        if (left <= checkRight && right >= this.cloneNodeLeft) {
+          if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
+            this.prevNode = node
+            this.placeholder.size(node.width, 10).move(_left, _bottom)
+          } else if (checkBottom < top && checkBottom >= top - 10) {
+            this.nextNode = node
+            this.placeholder.size(node.width, 10).move(_left, _top - 10)
+          }
+        }
+      }
+    })
+    if (this.overlapNode) {
+      this.mindMap.renderer.setNodeActive(this.overlapNode, true)
+    }
+  }
+}
+
+Drag.instanceName = 'drag'
+
+export default Drag
--- a/simple-mind-map/src/Event.js
+++ b/simple-mind-map/src/Event.js
@@ -43,12 +43,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 +54,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)
  }
@@ -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 = 'up'
+      if (e.deltaY < 0) dir = 'down'
+      if (e.deltaX > 0) dir = 'left'
+      if (e.deltaX < 0) dir = 'right'
    } else {
-      dir = 'down'
+      if ((e.wheelDeltaY || e.detail) > 0) dir = 'up'
+      if ((e.wheelDeltaY || e.detail) < 0) dir = 'down'
+      if ((e.wheelDeltaX || e.detail) > 0) dir = 'left'
+      if ((e.wheelDeltaX || e.detail) < 0) dir = 'right'
    }
    this.emit('mousewheel', e, dir, this)
  }
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -1,6 +1,7 @@
 import { imgToDataUrl, downloadFile } from './utils'
 import JsPDF from 'jspdf'
 import { SVG } from '@svgdotjs/svg.js'
+import drawBackgroundImageToCanvas from './utils/simulateCSSBackgroundInCanvas'
 const URL = window.URL || window.webkitURL || window

 //  导出类
@@ -25,8 +26,8 @@ class Export {
  }

  //  获取svg数据
-  async getSvgData() {
-    let { svg, svgHTML } = this.mindMap.miniMap.getMiniMap()
+  async getSvgData(domToImage) {
+    let { svg, svgHTML } = this.mindMap.getSvgData()
    // 把图片的url转换成data:url类型，否则导出会丢失图片
    let imageList = svg.find('image')
    let task = imageList.map(async item => {
@@ -35,9 +36,17 @@ 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)
+      nodeWithDomToImg = res.svg
+      svgHTML = res.svgHTML
+    }
    return {
      node: svg,
-      str: svgHTML
+      str: svgHTML,
+      nodeWithDomToImg
    }
  }

@@ -85,7 +94,9 @@ class Export {
      let {
        backgroundColor = '#fff',
        backgroundImage,
-        backgroundRepeat = 'repeat'
+        backgroundRepeat = 'no-repeat',
+        backgroundPosition = 'center center',
+        backgroundSize = 'cover',
      } = this.mindMap.themeConfig
      // 背景颜色
      ctx.save()
@@ -96,19 +107,18 @@ class Export {
      // 背景图片
      if (backgroundImage && backgroundImage !== 'none') {
        ctx.save()
-        let img = new Image()
-        img.src = backgroundImage
-        img.onload = () => {
-          let pat = ctx.createPattern(img, backgroundRepeat)
-          ctx.rect(0, 0, width, height)
-          ctx.fillStyle = pat
-          ctx.fill()
+        drawBackgroundImageToCanvas(ctx, width, height, backgroundImage, {
+          backgroundRepeat,
+          backgroundPosition,
+          backgroundSize
+        }, (err) => {
+          if (err) {
+            reject(err)
+          } else {
+            resolve()
+          }
          ctx.restore()
-          resolve()
-        }
-        img.onerror = e => {
-          reject(e)
-        }
+        })
      } else {
        resolve()
      }
@@ -121,7 +131,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'
@@ -189,8 +199,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,4 +238,6 @@ class Export {
  }
 }

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

 //  键盘导航类
-export default class KeyboardNavigation {
+class KeyboardNavigation {
  //  构造函数
  constructor(opt) {
    this.opt = opt
    this.mindMap = opt.mindMap
    this.onKeyup = this.onKeyup.bind(this)
-    this.mindMap.on('keyup', this.onKeyup)
+    this.mindMap.keyCommand.addShortcut('Left', () => {
+      this.onKeyup('Left')
+    })
+    this.mindMap.keyCommand.addShortcut('Up', () => {
+      this.onKeyup('Up')
+    })
+    this.mindMap.keyCommand.addShortcut('Right', () => {
+      this.onKeyup('Right')
+    })
+    this.mindMap.keyCommand.addShortcut('Down', () => {
+      this.onKeyup('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()
+    }
  }

  //  聚焦到下一个节点
@@ -224,3 +230,7 @@ export default class KeyboardNavigation {
    }
  }
 }
+
+KeyboardNavigation.instanceName = 'keyboardNavigation'
+
+export default KeyboardNavigation
--- a/simple-mind-map/src/MiniMap.js
+++ b/simple-mind-map/src/MiniMap.js
@@ -14,43 +14,6 @@ class MiniMap {
    }
  }

-  //   获取小地图相关数据
-  getMiniMap() {
-    const svg = this.mindMap.svg
-    const draw = this.mindMap.draw
-    // 保存原始信息
-    const origWidth = svg.width()
-    const origHeight = svg.height()
-    const origTransform = draw.transform()
-    const elRect = this.mindMap.el.getBoundingClientRect()
-    // 去除放大缩小的变换效果
-    draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
-    // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
-    const rect = draw.rbox()
-    // 将svg设置为实际内容的宽高
-    svg.size(rect.width, rect.height)
-    // 把实际内容变换
-    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
-    // 克隆一份数据
-    const clone = svg.clone()
-    // 恢复原先的大小和变换信息
-    svg.size(origWidth, origHeight)
-    draw.transform(origTransform)
-
-    return {
-      svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
-      svgHTML: clone.svg(), // svg字符串
-      rect: {
-        ...rect, // 思维导图图形未缩放时的位置尺寸等信息
-        ratio: rect.width / rect.height // 思维导图图形的宽高比
-      },
-      origWidth, // 画布宽度
-      origHeight, // 画布高度
-      scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
-      scaleY: origTransform.scaleY // 思维导图图形的垂直缩放值
-    }
-  }
-
  //  计算小地图的渲染数据
  /**
   * boxWidth：小地图容器的宽度
@@ -58,7 +21,7 @@ class MiniMap {
   */
  calculationMiniMap(boxWidth, boxHeight) {
    let { svgHTML, rect, origWidth, origHeight, scaleX, scaleY } =
-      this.getMiniMap()
+      this.mindMap.getSvgData()
    // 计算数据
    let boxRatio = boxWidth / boxHeight
    let actWidth = 0
@@ -144,4 +107,6 @@ class MiniMap {
  }
 }

+MiniMap.instanceName = 'miniMap'
+
 export default MiniMap
--- 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
--- a/simple-mind-map/src/RichText.js
+++ b/simple-mind-map/src/RichText.js
@@ -0,0 +1,443 @@
+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'
+
+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;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;`
+      document.body.appendChild(this.textEditNode)
+    }
+    // 原始宽高
+    let g = node._textData.node
+    let originWidth = g.attr('data-width')
+    let originHeight = g.attr('data-height')
+    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.selectAll()
+    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.formatText(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())
+  }
+
+  // 格式化当前选中的文本
+  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()
+    })
+  }
+
+  // 将所有节点转换成非富文本节点
+  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
+        }
+      },
+      null,
+      true,
+      0,
+      0
+    )
+    this.mindMap.reRender()
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.transformAllNodesToNormalNode()
+  }
+}
+
+RichText.instanceName = 'richText'
+
+export default RichText
--- a/simple-mind-map/src/Select.js
+++ b/simple-mind-map/src/Select.js
@@ -167,4 +167,6 @@ class Select {
  }
 }

+Select.instanceName = 'select'
+
 export default Select
--- a/simple-mind-map/src/Style.js
+++ b/simple-mind-map/src/Style.js
@@ -1,167 +1,200 @@
-import { tagColorList } from './utils/constant'
-const rootProp = ['paddingX', 'paddingY']
-
-//  样式类
-
-class Style {
-  //   设置背景样式
-
-  static setBackgroundStyle(el, themeConfig) {
-    let { backgroundColor, backgroundImage, backgroundRepeat } = themeConfig
-    el.style.backgroundColor = backgroundColor
-    if (backgroundImage) {
-      el.style.backgroundImage = `url(${backgroundImage})`
-      el.style.backgroundRepeat = backgroundRepeat
-    }
-  }
-
-  //  构造函数
-
-  constructor(ctx, themeConfig) {
-    this.ctx = ctx
-    this.themeConfig = themeConfig
-  }
-
-  //  更新主题配置
-
-  updateThemeConfig(themeConfig) {
-    this.themeConfig = themeConfig
-  }
-
-  //  合并样式
-
-  merge(prop, root, isActive) {
-    // 三级及以下节点
-    let defaultConfig = this.themeConfig.node
-    if (root || rootProp.includes(prop)) {
-      // 直接使用最外层样式
-      defaultConfig = this.themeConfig
-    } else if (this.ctx.isGeneralization) {
-      // 概要节点
-      defaultConfig = this.themeConfig.generalization
-    } else if (this.ctx.layerIndex === 0) {
-      // 根节点
-      defaultConfig = this.themeConfig.root
-    } else if (this.ctx.layerIndex === 1) {
-      // 二级节点
-      defaultConfig = this.themeConfig.second
-    }
-    // 激活状态
-    if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
-      if (
-        this.ctx.nodeData.data.activeStyle &&
-        this.ctx.nodeData.data.activeStyle[prop] !== undefined
-      ) {
-        return this.ctx.nodeData.data.activeStyle[prop]
-      } else if (defaultConfig.active && defaultConfig.active[prop]) {
-        return defaultConfig.active[prop]
-      }
-    }
-    // 优先使用节点本身的样式
-    return this.getSelfStyle(prop) !== undefined
-      ? this.getSelfStyle(prop)
-      : defaultConfig[prop]
-  }
-
-  //  获取某个样式值
-
-  getStyle(prop, root, isActive) {
-    return this.merge(prop, root, isActive)
-  }
-
-  //  获取自身自定义样式
-
-  getSelfStyle(prop) {
-    return this.ctx.nodeData.data[prop]
-  }
-
-  //  矩形
-
-  rect(node) {
-    this.shape(node)
-    node.radius(this.merge('borderRadius'))
-  }
-
-  //   矩形外的其他形状
-
-  shape(node) {
-    node.fill({
-      color: this.merge('fillColor')
-    })
-    // 节点使用横线样式，不需要渲染非激活状态的边框样式
-    if (
-      !this.ctx.isRoot &&
-      !this.ctx.isGeneralization &&
-      this.themeConfig.nodeUseLineStyle &&
-      !this.ctx.nodeData.data.isActive
-    ) {
-      return
-    }
-    node.stroke({
-      color: this.merge('borderColor'),
-      width: this.merge('borderWidth'),
-      dasharray: this.merge('borderDasharray')
-    })
-  }
-
-  //  文字
-
-  text(node) {
-    node
-      .fill({
-        color: this.merge('color')
-      })
-      .css({
-        'font-family': this.merge('fontFamily'),
-        'font-size': this.merge('fontSize'),
-        'font-weight': this.merge('fontWeight'),
-        'font-style': this.merge('fontStyle'),
-        'text-decoration': this.merge('textDecoration')
-      })
-  }
-
-  //  html文字节点
-
-  domText(node, fontSizeScale = 1) {
-    node.style.fontFamily = this.merge('fontFamily')
-    node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
-    node.style.fontWeight = this.merge('fontWeight') || 'normal'
-  }
-
-  //  标签文字
-
-  tagText(node, index) {
-    node
-      .fill({
-        color: tagColorList[index].color
-      })
-      .css({
-        'font-size': '12px'
-      })
-  }
-
-  //  标签矩形
-
-  tagRect(node, index) {
-    node.fill({
-      color: tagColorList[index].background
-    })
-  }
-
-  //  内置图标
-
-  iconNode(node) {
-    node.attr({
-      fill: this.merge('color')
-    })
-  }
-
-  //  连线
-
-  line(node, { width, color, dasharray } = {}) {
-    node.stroke({ width, color, dasharray }).fill({ color: 'none' })
-  }
-
-  //  概要连线
-
-  generalizationLine(node) {
+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
+    if (backgroundImage) {
+      el.style.backgroundImage = `url(${backgroundImage})`
+      el.style.backgroundRepeat = backgroundRepeat
+      el.style.backgroundPosition = backgroundPosition
+      el.style.backgroundSize = backgroundSize
+    } else {
+      el.style.backgroundImage = 'none'
+    }
+  }
+
+  //  构造函数
+
+  constructor(ctx, themeConfig) {
+    this.ctx = ctx
+    this.themeConfig = themeConfig
+  }
+
+  //  更新主题配置
+
+  updateThemeConfig(themeConfig) {
+    this.themeConfig = themeConfig
+  }
+
+  //  合并样式
+
+  merge(prop, root, isActive) {
+    // 三级及以下节点
+    let defaultConfig = this.themeConfig.node
+    if (root || rootProp.includes(prop)) {
+      // 直接使用最外层样式
+      defaultConfig = this.themeConfig
+    } else if (this.ctx.isGeneralization) {
+      // 概要节点
+      defaultConfig = this.themeConfig.generalization
+    } else if (this.ctx.layerIndex === 0) {
+      // 根节点
+      defaultConfig = this.themeConfig.root
+    } else if (this.ctx.layerIndex === 1) {
+      // 二级节点
+      defaultConfig = this.themeConfig.second
+    }
+    // 激活状态
+    if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
+      if (
+        this.ctx.nodeData.data.activeStyle &&
+        this.ctx.nodeData.data.activeStyle[prop] !== undefined
+      ) {
+        return this.ctx.nodeData.data.activeStyle[prop]
+      } else if (defaultConfig.active && defaultConfig.active[prop]) {
+        return defaultConfig.active[prop]
+      }
+    }
+    // 优先使用节点本身的样式
+    return this.getSelfStyle(prop) !== undefined
+      ? this.getSelfStyle(prop)
+      : defaultConfig[prop]
+  }
+
+  //  获取某个样式值
+
+  getStyle(prop, root, isActive) {
+    return this.merge(prop, root, isActive)
+  }
+
+  //  获取自身自定义样式
+
+  getSelfStyle(prop) {
+    return this.ctx.nodeData.data[prop]
+  }
+
+  //  矩形
+
+  rect(node) {
+    this.shape(node)
+    node.radius(this.merge('borderRadius'))
+  }
+
+  //   矩形外的其他形状
+
+  shape(node) {
+    node.fill({
+      color: this.merge('fillColor')
+    })
+    // 节点使用横线样式，不需要渲染非激活状态的边框样式
+    if (
+      !this.ctx.isRoot &&
+      !this.ctx.isGeneralization &&
+      this.themeConfig.nodeUseLineStyle &&
+      !this.ctx.nodeData.data.isActive
+    ) {
+      return
+    }
+    node.stroke({
+      color: this.merge('borderColor'),
+      width: this.merge('borderWidth'),
+      dasharray: this.merge('borderDasharray')
+    })
+  }
+
+  //  文字
+
+  text(node) {
+    node
+      .fill({
+        color: this.merge('color')
+      })
+      .css({
+        'font-family': this.merge('fontFamily'),
+        'font-size': this.merge('fontSize'),
+        'font-weight': this.merge('fontWeight'),
+        'font-style': this.merge('fontStyle'),
+        'text-decoration': this.merge('textDecoration')
+      })
+  }
+
+  // 获取文本样式
+  getTextFontStyle() {
+    return { 
+      italic: this.merge('fontStyle') === 'italic', 
+      bold: this.merge('fontWeight'), 
+      fontSize: this.merge('fontSize'), 
+      fontFamily: this.merge('fontFamily')
+    }
+  }
+
+  //  html文字节点
+
+  domText(node, fontSizeScale = 1) {
+    node.style.fontFamily = this.merge('fontFamily')
+    node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
+    node.style.fontWeight = this.merge('fontWeight') || 'normal'
+    node.style.lineHeight = this.merge('lineHeight')
+    node.style.fontStyle = this.merge('fontStyle')
+  }
+
+  //  标签文字
+
+  tagText(node, index) {
+    node
+      .fill({
+        color: tagColorList[index].color
+      })
+      .css({
+        'font-size': '12px'
+      })
+  }
+
+  //  标签矩形
+
+  tagRect(node, index) {
+    node.fill({
+      color: tagColorList[index].background
+    })
+  }
+
+  //  内置图标
+
+  iconNode(node) {
+    node.attr({
+      fill: this.merge('color')
+    })
+  }
+
+  //  连线
+
+  line(node, { width, color, dasharray } = {}) {
+    node.stroke({ width, color, dasharray }).fill({ color: 'none' })
+  }
+
+  //  概要连线
+
+  generalizationLine(node) {
+    node
+      .stroke({
+        width: this.merge('generalizationLineWidth', true),
+        color: this.merge('generalizationLineColor', true)
+      })
+      .fill({ color: 'none' })
+  }
+
+  //  按钮
+
+  iconBtn(node, fillNode) {
+    node.fill({ color: '#808080' })
+    fillNode.fill({ color: '#fff' })
+  }
+}
+
+export default Style
--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -50,7 +50,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,14 +64,17 @@ 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)
+    let scale = this.mindMap.view.scale
+    let lineHeight = node.style.merge('lineHeight')
+    let fontSize = node.style.merge('fontSize')
+    node.style.domText(this.textEditNode, scale)
    this.textEditNode.innerHTML = node.nodeData.data.text
      .split(/\n/gim)
      .join('<br>')
@@ -75,6 +83,8 @@ export default class TextEdit {
    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'
+    this.textEditNode.style.transform = `translateY(${-(lineHeight * fontSize - fontSize) / 2 * scale}px)`
    this.showTextEdit = true
    // 选中文本
    this.selectNodeText()
@@ -91,6 +101,9 @@ export default class TextEdit {

  //  隐藏文本编辑框
  hideEditTextBox() {
+    if (this.mindMap.richText) {
+      return this.mindMap.richText.hideEditText()
+    }
    if (!this.showTextEdit) {
      return
    }
--- a/simple-mind-map/src/View.js
+++ b/simple-mind-map/src/View.js
@@ -55,12 +55,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 === 'zoom') {
+        switch (dir) {
+          // 鼠标滚轮，向上和向左，都是缩小
+          case 'up':
+          case 'left':
+            this.narrow()
+            break
+          // 鼠标滚轮，向下和向右，都是放大
+          case 'down':
+          case 'right':
+            this.enlarge()
+            break
+        }
      } else {
-        // 缩小
-        this.narrow()
+        switch (dir){
+          // 上移
+          case 'down':
+            this.translateY(-this.mindMap.opt.mousewheelMoveStep)
+            break
+          // 下移
+          case 'up':
+            this.translateY(this.mindMap.opt.mousewheelMoveStep)
+            break
+          // 右移
+          case 'left':
+            this.translateX(-this.mindMap.opt.mousewheelMoveStep)
+            break
+          // 左移
+          case 'right':
+            this.translateX(this.mindMap.opt.mousewheelMoveStep)
+            break
+        }
      }
    })
  }
--- a/simple-mind-map/src/Watermark.js
+++ b/simple-mind-map/src/Watermark.js
@@ -0,0 +1,120 @@
+import { Text, G } from '@svgdotjs/svg.js'
+import { degToRad, camelCaseToHyphen } from './utils'
+import merge from 'deepmerge'
+
+// 水印类
+class Watermark {
+  constructor(opt = {}) {
+    this.mindMap = opt.mindMap
+    this.lineSpacing = 0 // 水印行间距
+    this.textSpacing = 0 // 行内水印间距
+    this.angle = 0 // 旋转角度
+    this.text = '' // 水印文字
+    this.textStyle = {} // 水印文字样式
+    this.watermarkDraw = this.mindMap.svg
+      .group()
+      .css({ 'pointer-events': 'none', 'user-select': 'none' })
+    this.maxLong = Math.sqrt(
+      Math.pow(this.mindMap.width, 2) + Math.pow(this.mindMap.height, 2)
+    )
+    this.updateWatermark(this.mindMap.opt.watermarkConfig || {})
+  }
+
+  // 获取是否存在水印
+  hasWatermark() {
+    return !!this.text.trim()
+  }
+
+  // 处理水印配置
+  handleConfig({ text, lineSpacing, textSpacing, angle, textStyle }) {
+    this.text = text === undefined ? '' : String(text).trim()
+    this.lineSpacing =
+      typeof lineSpacing === 'number' && lineSpacing > 0 ? lineSpacing : 100
+    this.textSpacing =
+      typeof textSpacing === 'number' && textSpacing > 0 ? textSpacing : 100
+    this.angle =
+      typeof angle === 'number' && angle >= 0 && angle <= 90 ? angle : 30
+    this.textStyle = Object.assign(this.textStyle, textStyle || {})
+  }
+
+  // 绘制水印
+  // 非精确绘制，会绘制一些超出可视区域的水印
+  draw() {
+    this.watermarkDraw.clear()
+    if (!this.hasWatermark()) {
+      return
+    }
+    let x = 0
+    while (x < this.mindMap.width) {
+      this.drawText(x)
+      x += this.lineSpacing / Math.sin(degToRad(this.angle))
+    }
+
+    let yOffset =
+      this.lineSpacing / Math.cos(degToRad(this.angle)) || this.lineSpacing
+    let y = yOffset
+    while (y < this.mindMap.height) {
+      this.drawText(0, y)
+      y += yOffset
+    }
+  }
+
+  // 绘制文字
+  drawText(x, y) {
+    let long = Math.min(
+      this.maxLong,
+      (this.mindMap.width - x) / Math.cos(degToRad(this.angle))
+    )
+    let g = new G()
+    let bbox = null
+    let bboxWidth = 0
+    let textHeight = -1
+    while (bboxWidth < long) {
+      let text = new Text().text(this.text)
+      g.add(text)
+      text.transform({
+        translateX: bboxWidth
+      })
+      this.setTextStyle(text)
+      bbox = g.bbox()
+      if (textHeight === -1) {
+        textHeight = bbox.height
+      }
+      bboxWidth = bbox.width + this.textSpacing
+    }
+    let params = {
+      rotate: this.angle,
+      origin: 'top left',
+      translateX: x,
+      translateY: textHeight
+    }
+    if (y !== undefined) {
+      params.translateY = y + textHeight
+    }
+    g.transform(params)
+    this.watermarkDraw.add(g)
+  }
+
+  // 给文字设置样式
+  setTextStyle(text) {
+    Object.keys(this.textStyle).forEach(item => {
+      let value = this.textStyle[item]
+      if (item === 'color') {
+        text.fill(value)
+      } else {
+        text.css(camelCaseToHyphen(item), value)
+      }
+    })
+  }
+
+  // 更新水印
+  updateWatermark(config) {
+    this.mindMap.opt.watermarkConfig = merge(this.mindMap.opt.watermarkConfig, config)
+    this.handleConfig(config)
+    this.draw()
+  }
+}
+
+Watermark.instanceName = 'watermark'
+
+export default Watermark
--- a/simple-mind-map/src/css/quill.css
+++ b/simple-mind-map/src/css/quill.css
@@ -0,0 +1,10 @@
+.ql-editor {
+    overflow: hidden;
+    padding: 0;
+    height: auto;
+}
+
+.ql-container {
+    height: auto;
+    font-size: inherit;
+}
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -1,267 +1,289 @@
-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
@@ -208,11 +208,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 +227,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}`
@@ -241,6 +244,7 @@ class MindMap extends Base {
      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 +255,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 {
@@ -273,6 +279,7 @@ class MindMap extends Base {
      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 +291,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) {
--- a/simple-mind-map/src/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@@ -1,142 +1,155 @@
-//  默认主题
-
-export default {
-  // 节点内边距
-  paddingX: 15,
-  paddingY: 5,
-  // 图片显示的最大宽度
-  imgMaxWidth: 100,
-  // 图片显示的最大高度
-  imgMaxHeight: 100,
-  // icon的大小
-  iconSize: 20,
-  // 连线的粗细
-  lineWidth: 1,
-  // 连线的颜色
-  lineColor: '#549688',
-  // 连线样式
-  lineDasharray: 'none',
-  // 连线风格
-  lineStyle: 'straight', // 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct）
-  // 概要连线的粗细
-  generalizationLineWidth: 1,
-  // 概要连线的颜色
-  generalizationLineColor: '#549688',
-  // 概要曲线距节点的距离
-  generalizationLineMargin: 0,
-  // 概要节点距节点的距离
-  generalizationNodeMargin: 20,
-  // 背景颜色
-  backgroundColor: '#fafafa',
-  // 背景图片
-  backgroundImage: 'none',
-  // 背景重复
-  backgroundRepeat: 'no-repeat',
-  // 节点使用横线样式
-  nodeUseLineStyle: false,
-  // 根节点样式
-  root: {
-    shape: 'rectangle',
-    fillColor: '#549688',
-    fontFamily: '微软雅黑, Microsoft YaHei',
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: 'bold',
-    fontStyle: 'normal',
-    lineHeight: 1.5,
-    borderColor: 'transparent',
-    borderWidth: 0,
-    borderDasharray: 'none',
-    borderRadius: 5,
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
-  },
-  // 二级节点样式
-  second: {
-    shape: 'rectangle',
-    marginX: 100,
-    marginY: 40,
-    fillColor: '#fff',
-    fontFamily: '微软雅黑, Microsoft YaHei',
-    color: '#565656',
-    fontSize: 16,
-    fontWeight: 'noraml',
-    fontStyle: 'normal',
-    lineHeight: 1.5,
-    borderColor: '#549688',
-    borderWidth: 1,
-    borderDasharray: 'none',
-    borderRadius: 5,
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
-  },
-  // 三级及以下节点样式
-  node: {
-    shape: 'rectangle',
-    marginX: 50,
-    marginY: 0,
-    fillColor: 'transparent',
-    fontFamily: '微软雅黑, Microsoft YaHei',
-    color: '#6a6d6c',
-    fontSize: 14,
-    fontWeight: 'noraml',
-    fontStyle: 'normal',
-    lineHeight: 1.5,
-    borderColor: 'transparent',
-    borderWidth: 0,
-    borderRadius: 5,
-    borderDasharray: 'none',
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
-  },
-  // 概要节点样式
-  generalization: {
-    shape: 'rectangle',
-    marginX: 100,
-    marginY: 40,
-    fillColor: '#fff',
-    fontFamily: '微软雅黑, Microsoft YaHei',
-    color: '#565656',
-    fontSize: 16,
-    fontWeight: 'noraml',
-    fontStyle: 'normal',
-    lineHeight: 1.5,
-    borderColor: '#549688',
-    borderWidth: 1,
-    borderDasharray: 'none',
-    borderRadius: 5,
-    textDecoration: 'none',
-    active: {
-      borderColor: 'rgb(57, 80, 96)',
-      borderWidth: 3,
-      borderDasharray: 'none'
-    }
-  }
-}
-
-// 支持激活样式的属性
-// 简单来说，会改变节点大小的都不支持在激活时设置，为了性能考虑，节点切换激活态时不会重新计算节点大小
-export const supportActiveStyle = [
-  'fillColor',
-  'color',
-  'fontWeight',
-  'fontStyle',
-  'borderColor',
-  'borderWidth',
-  'borderDasharray',
-  'borderRadius',
-  'textDecoration'
-]
-
+//  默认主题
+
+export default {
+  // 节点内边距
+  paddingX: 15,
+  paddingY: 5,
+  // 图片显示的最大宽度
+  imgMaxWidth: 100,
+  // 图片显示的最大高度
+  imgMaxHeight: 100,
+  // icon的大小
+  iconSize: 20,
+  // 连线的粗细
+  lineWidth: 1,
+  // 连线的颜色
+  lineColor: '#549688',
+  // 连线样式
+  lineDasharray: 'none',
+  // 连线风格
+  lineStyle: 'straight', // 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct）
+  // 概要连线的粗细
+  generalizationLineWidth: 1,
+  // 概要连线的颜色
+  generalizationLineColor: '#549688',
+  // 概要曲线距节点的距离
+  generalizationLineMargin: 0,
+  // 概要节点距节点的距离
+  generalizationNodeMargin: 20,
+  // 关联线默认状态的粗细
+  associativeLineWidth: 2,
+  // 关联线默认状态的颜色
+  associativeLineColor: 'rgb(51, 51, 51)',
+  // 关联线激活状态的粗细
+  associativeLineActiveWidth: 8,
+  // 关联线激活状态的颜色
+  associativeLineActiveColor: 'rgba(2, 167, 240, 1)',
+  // 背景颜色
+  backgroundColor: '#fafafa',
+  // 背景图片
+  backgroundImage: 'none',
+  // 背景重复
+  backgroundRepeat: 'no-repeat',
+  // 设置背景图像的起始位置
+  backgroundPosition: 'center center',
+  // 设置背景图片大小
+  backgroundSize: 'cover',
+  // 节点使用横线样式
+  nodeUseLineStyle: false,
+  // 根节点样式
+  root: {
+    shape: 'rectangle',
+    fillColor: '#549688',
+    fontFamily: '微软雅黑, Microsoft YaHei',
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+    fontStyle: 'normal',
+    lineHeight: 1.5,
+    borderColor: 'transparent',
+    borderWidth: 0,
+    borderDasharray: 'none',
+    borderRadius: 5,
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
+    }
+  },
+  // 二级节点样式
+  second: {
+    shape: 'rectangle',
+    marginX: 100,
+    marginY: 40,
+    fillColor: '#fff',
+    fontFamily: '微软雅黑, Microsoft YaHei',
+    color: '#565656',
+    fontSize: 16,
+    fontWeight: 'noraml',
+    fontStyle: 'normal',
+    lineHeight: 1.5,
+    borderColor: '#549688',
+    borderWidth: 1,
+    borderDasharray: 'none',
+    borderRadius: 5,
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    shape: 'rectangle',
+    marginX: 50,
+    marginY: 0,
+    fillColor: 'transparent',
+    fontFamily: '微软雅黑, Microsoft YaHei',
+    color: '#6a6d6c',
+    fontSize: 14,
+    fontWeight: 'noraml',
+    fontStyle: 'normal',
+    lineHeight: 1.5,
+    borderColor: 'transparent',
+    borderWidth: 0,
+    borderRadius: 5,
+    borderDasharray: 'none',
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    shape: 'rectangle',
+    marginX: 100,
+    marginY: 40,
+    fillColor: '#fff',
+    fontFamily: '微软雅黑, Microsoft YaHei',
+    color: '#565656',
+    fontSize: 16,
+    fontWeight: 'noraml',
+    fontStyle: 'normal',
+    lineHeight: 1.5,
+    borderColor: '#549688',
+    borderWidth: 1,
+    borderDasharray: 'none',
+    borderRadius: 5,
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
+    }
+  }
+}
+
+// 支持激活样式的属性
+// 简单来说，会改变节点大小的都不支持在激活时设置，为了性能考虑，节点切换激活态时不会重新计算节点大小
+export const supportActiveStyle = [
+  'fillColor',
+  'color',
+  'fontWeight',
+  'fontStyle',
+  'borderColor',
+  'borderWidth',
+  'borderDasharray',
+  'borderRadius',
+  'textDecoration'
+]
+
+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/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -134,8 +134,10 @@ export const copyRenderTree = (tree, root) => {
 }

 //  复制节点树数据
-export const copyNodeTree = (tree, root, removeActiveState = false) => {
+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 (removeActiveState) {
    tree.data.isActive = false
  }
@@ -193,12 +195,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)
  }
@@ -224,3 +226,45 @@ export const asyncRun = (taskList, callback = () => {}) => {
  }
  loop()
 }
+
+// 角度转弧度
+export const degToRad = deg => {
+  return deg * (Math.PI / 180)
+}
+
+// 驼峰转连字符 
+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} `
+}
--- a/simple-mind-map/src/utils/simulateCSSBackgroundInCanvas.js
+++ b/simple-mind-map/src/utils/simulateCSSBackgroundInCanvas.js
@@ -0,0 +1,354 @@
+// 将以空格分隔的字符串值转换成成数字/单位/值数组
+const getNumberValueFromStr = value => {
+  let arr = String(value).split(/\s+/)
+  return arr.map(item => {
+    if (/^[\d.]+/.test(item)) {
+      // 数字+单位
+      let res = /^([\d.]+)(.*)$/.exec(item)
+      return [Number(res[1]), res[2]]
+    } else {
+      // 单个值
+      return item
+    }
+  })
+}
+
+// 缩放宽度
+const zoomWidth = (ratio, height) => {
+  // w / height = ratio
+  return ratio * height
+}
+
+// 缩放高度
+const zoomHeight = (ratio, width) => {
+  // width / h = ratio
+  return width / ratio
+}
+
+// 关键词到百分比值的映射
+const keyWordToPercentageMap = {
+  left: 0,
+  top: 0,
+  center: 50,
+  bottom: 100,
+  right: 100
+}
+
+// 模拟background-size
+const handleBackgroundSize = ({
+  backgroundSize,
+  drawOpt,
+  imageRatio,
+  canvasWidth,
+  canvasHeight,
+  canvasRatio
+}) => {
+  if (backgroundSize) {
+    // 将值转换成数组
+    let backgroundSizeValueArr = getNumberValueFromStr(backgroundSize)
+    // 两个值都为auto，那就相当于不设置
+    if (
+      backgroundSizeValueArr[0] === 'auto' &&
+      backgroundSizeValueArr[1] === 'auto'
+    ) {
+      return
+    }
+    // 值为cover
+    if (backgroundSizeValueArr[0] === 'cover') {
+      if (imageRatio > canvasRatio) {
+        // 图片的宽高比大于canvas的宽高比，那么图片高度缩放到和canvas的高度一致，宽度自适应
+        drawOpt.height = canvasHeight
+        drawOpt.width = zoomWidth(imageRatio, canvasHeight)
+      } else {
+        // 否则图片宽度缩放到和canvas的宽度一致，高度自适应
+        drawOpt.width = canvasWidth
+        drawOpt.height = zoomHeight(imageRatio, canvasWidth)
+      }
+      return
+    }
+    // 值为contain
+    if (backgroundSizeValueArr[0] === 'contain') {
+      if (imageRatio > canvasRatio) {
+        // 图片的宽高比大于canvas的宽高比，那么图片宽度缩放到和canvas的宽度一致，高度自适应
+        drawOpt.width = canvasWidth
+        drawOpt.height = zoomHeight(imageRatio, canvasWidth)
+      } else {
+        // 否则图片高度缩放到和canvas的高度一致，宽度自适应
+        drawOpt.height = canvasHeight
+        drawOpt.width = zoomWidth(imageRatio, canvasHeight)
+      }
+      return
+    }
+    // 图片宽度
+    let newNumberWidth = -1
+    if (backgroundSizeValueArr[0]) {
+      if (Array.isArray(backgroundSizeValueArr[0])) {
+        // 数字+单位类型
+        if (backgroundSizeValueArr[0][1] === '%') {
+          // %单位
+          drawOpt.width = (backgroundSizeValueArr[0][0] / 100) * canvasWidth
+          newNumberWidth = drawOpt.width
+        } else {
+          // 其他都认为是px单位
+          drawOpt.width = backgroundSizeValueArr[0][0]
+          newNumberWidth = backgroundSizeValueArr[0][0]
+        }
+      } else if (backgroundSizeValueArr[0] === 'auto') {
+        // auto类型，那么根据设置的新高度以图片原宽高比进行自适应
+        if (backgroundSizeValueArr[1]) {
+          if (backgroundSizeValueArr[1][1] === '%') {
+            // 高度为%单位
+            drawOpt.width = zoomWidth(
+              imageRatio,
+              (backgroundSizeValueArr[1][0] / 100) * canvasHeight
+            )
+          } else {
+            // 其他都认为是px单位
+            drawOpt.width = zoomWidth(imageRatio, backgroundSizeValueArr[1][0])
+          }
+        }
+      }
+    }
+    // 设置了图片高度
+    if (backgroundSizeValueArr[1] && Array.isArray(backgroundSizeValueArr[1])) {
+      // 数字+单位类型
+      if (backgroundSizeValueArr[1][1] === '%') {
+        // 高度为%单位
+        drawOpt.height = (backgroundSizeValueArr[1][0] / 100) * canvasHeight
+      } else {
+        // 其他都认为是px单位
+        drawOpt.height = backgroundSizeValueArr[1][0]
+      }
+    } else if (newNumberWidth !== -1) {
+      // 没有设置图片高度或者设置为auto，那么根据设置的新宽度以图片原宽高比进行自适应
+      drawOpt.height = zoomHeight(imageRatio, newNumberWidth)
+    }
+  }
+}
+
+// 模拟background-position
+const handleBackgroundPosition = ({
+  backgroundPosition,
+  drawOpt,
+  imgWidth,
+  imgHeight,
+  canvasWidth,
+  canvasHeight
+}) => {
+  if (backgroundPosition) {
+    // 将值转换成数组
+    let backgroundPositionValueArr = getNumberValueFromStr(backgroundPosition)
+    // 将关键词转为百分比
+    backgroundPositionValueArr = backgroundPositionValueArr.map(item => {
+      if (typeof item === 'string') {
+        return keyWordToPercentageMap[item] !== undefined
+          ? [keyWordToPercentageMap[item], '%']
+          : item
+      }
+      return item
+    })
+    if (Array.isArray(backgroundPositionValueArr[0])) {
+      if (backgroundPositionValueArr.length === 1) {
+        // 如果只设置了一个值，第二个默认为50%
+        backgroundPositionValueArr.push([50, '%'])
+      }
+      // 水平位置
+      if (backgroundPositionValueArr[0][1] === '%') {
+        // 单位为%
+        let canvasX = (backgroundPositionValueArr[0][0] / 100) * canvasWidth
+        let imgX = (backgroundPositionValueArr[0][0] / 100) * imgWidth
+        // 计算差值
+        drawOpt.x = canvasX - imgX
+      } else {
+        // 其他单位默认都为px
+        drawOpt.x = backgroundPositionValueArr[0][0]
+      }
+      // 垂直位置
+      if (backgroundPositionValueArr[1][1] === '%') {
+        // 单位为%
+        let canvasY = (backgroundPositionValueArr[1][0] / 100) * canvasHeight
+        let imgY = (backgroundPositionValueArr[1][0] / 100) * imgHeight
+        // 计算差值
+        drawOpt.y = canvasY - imgY
+      } else {
+        // 其他单位默认都为px
+        drawOpt.y = backgroundPositionValueArr[1][0]
+      }
+    }
+  }
+}
+
+// 模拟background-repeat
+const handleBackgroundRepeat = ({
+  ctx,
+  image,
+  backgroundRepeat,
+  drawOpt,
+  imgWidth,
+  imgHeight,
+  canvasWidth,
+  canvasHeight
+}) => {
+  if (backgroundRepeat) {
+    // 保存在handleBackgroundPosition中计算出来的x、y
+    let ox = drawOpt.x
+    let oy = drawOpt.y
+    // 计算ox和oy能平铺的图片数量
+    let oxRepeatNum = Math.ceil(ox / imgWidth)
+    let oyRepeatNum = Math.ceil(oy / imgHeight)
+    // 计算ox和oy第一张图片的位置
+    let oxRepeatX = ox - oxRepeatNum * imgWidth
+    let oxRepeatY = oy - oyRepeatNum * imgHeight
+    // 将值转换成数组
+    let backgroundRepeatValueArr = getNumberValueFromStr(backgroundRepeat)
+    // 不处理
+    if (
+      backgroundRepeatValueArr[0] === 'no-repeat' ||
+      (imgWidth >= canvasWidth && imgHeight >= canvasHeight)
+    ) {
+      return
+    }
+    // 水平平铺
+    if (backgroundRepeatValueArr[0] === 'repeat-x') {
+      if (canvasWidth > imgWidth) {
+        let x = oxRepeatX
+        while (x < canvasWidth) {
+          drawImage(ctx, image, {
+            ...drawOpt,
+            x
+          })
+          x += imgWidth
+        }
+        return true
+      }
+    }
+    // 垂直平铺
+    if (backgroundRepeatValueArr[0] === 'repeat-y') {
+      if (canvasHeight > imgHeight) {
+        let y = oxRepeatY
+        while (y < canvasHeight) {
+          drawImage(ctx, image, {
+            ...drawOpt,
+            y
+          })
+          y += imgHeight
+        }
+        return true
+      }
+    }
+    // 平铺
+    if (backgroundRepeatValueArr[0] === 'repeat') {
+      let x = oxRepeatX
+      while (x < canvasWidth) {
+        if (canvasHeight > imgHeight) {
+          let y = oxRepeatY
+          while (y < canvasHeight) {
+            drawImage(ctx, image, {
+              ...drawOpt,
+              x,
+              y
+            })
+            y += imgHeight
+          }
+        }
+        x += imgWidth
+      }
+      return true
+    }
+  }
+}
+
+// 根据参数绘制图片
+const drawImage = (ctx, image, drawOpt) => {
+  ctx.drawImage(
+    image,
+    drawOpt.sx,
+    drawOpt.sy,
+    drawOpt.swidth,
+    drawOpt.sheight,
+    drawOpt.x,
+    drawOpt.y,
+    drawOpt.width,
+    drawOpt.height
+  )
+}
+
+const drawBackgroundImageToCanvas = (
+  ctx,
+  width,
+  height,
+  img,
+  { backgroundSize, backgroundPosition, backgroundRepeat },
+  callback = () => {}
+) => {
+  // 画布的长宽比
+  let canvasRatio = width / height
+  // 加载图片
+  let image = new Image()
+  image.src = img
+  image.onload = () => {
+    // 图片的宽度及长宽比
+    let imgWidth = image.width
+    let imgHeight = image.height
+    let imageRatio = imgWidth / imgHeight
+    // 绘制图片
+    // drawImage方法的参数值
+    let drawOpt = {
+      sx: 0,
+      sy: 0,
+      swidth: imgWidth,
+      sheight: imgHeight,
+      x: 0,
+      y: 0,
+      width: imgWidth,
+      height: imgHeight
+    }
+    // 模拟background-size
+    handleBackgroundSize({
+      backgroundSize,
+      drawOpt,
+      imageRatio,
+      canvasWidth: width,
+      canvasHeight: height,
+      canvasRatio
+    })
+
+    // 模拟background-position
+    handleBackgroundPosition({
+      backgroundPosition,
+      drawOpt,
+      imgWidth: drawOpt.width,
+      imgHeight: drawOpt.height,
+      imageRatio,
+      canvasWidth: width,
+      canvasHeight: height,
+      canvasRatio
+    })
+
+    // 模拟background-repeat
+    let notNeedDraw = handleBackgroundRepeat({
+      ctx,
+      image,
+      backgroundRepeat,
+      drawOpt,
+      imgWidth: drawOpt.width,
+      imgHeight: drawOpt.height,
+      imageRatio,
+      canvasWidth: width,
+      canvasHeight: height,
+      canvasRatio
+    })
+
+    //  绘制图片
+    if (!notNeedDraw) {
+      drawImage(ctx, image, drawOpt)
+    }
+
+    callback()
+  }
+  image.onerror = e => {
+    callback(e)
+  }
+}
+
+export default drawBackgroundImageToCanvas
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11,6 +11,7 @@
        "@toast-ui/editor": "^3.1.5",
        "core-js": "^3.6.5",
        "element-ui": "^2.15.1",
+        "highlight.js": "^10.7.3",
        "v-viewer": "^1.6.4",
        "vue": "^2.6.11",
        "vue-i18n": "^8.27.2",
@@ -23,10 +24,13 @@
        "@vue/cli-plugin-eslint": "^4.5.0",
        "@vue/cli-service": "^4.5.0",
        "babel-eslint": "^10.1.0",
+        "chokidar": "^3.5.3",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "less": "^3.12.2",
        "less-loader": "^7.1.0",
+        "markdown-it": "^13.0.1",
+        "markdown-it-checkbox": "^1.1.0",
        "prettier": "^1.19.1",
        "vue-template-compiler": "^2.6.11",
        "webpack": "^4.44.2"
@@ -3521,7 +3525,6 @@
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
      "dev": true,
-      "optional": true,
      "engines": {
        "node": ">=8"
      }
@@ -4135,7 +4138,6 @@
          "url": "https://paulmillr.com/funding/"
        }
      ],
-      "optional": true,
      "dependencies": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
@@ -4157,7 +4159,6 @@
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "fill-range": "^7.0.1"
      },
@@ -4170,7 +4171,6 @@
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@@ -4183,7 +4183,6 @@
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "is-glob": "^4.0.1"
      },
@@ -4196,7 +4195,6 @@
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
      "dev": true,
-      "optional": true,
      "engines": {
        "node": ">=0.12.0"
      }
@@ -4206,7 +4204,6 @@
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "is-number": "^7.0.0"
      },
@@ -7846,7 +7843,6 @@
      "version": "10.7.3",
      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
-      "dev": true,
      "engines": {
        "node": "*"
      }
@@ -8604,7 +8600,6 @@
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "binary-extensions": "^2.0.0"
      },
@@ -9334,6 +9329,15 @@
      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
      "dev": true
    },
+    "node_modules/linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "dev": true,
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
    "node_modules/loader-fs-cache": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
@@ -9554,6 +9558,49 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/markdown-it": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
+      "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/markdown-it-checkbox": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-checkbox/-/markdown-it-checkbox-1.1.0.tgz",
+      "integrity": "sha512-NkZVjnXo5G+cLNdi7DPZxICypBuxFE9F8sx3YGMZn+Cfizr8EZ/1TFUKl7ZnefF6cr1aFHbnQ5iA3rc4cp7EyA==",
+      "dev": true,
+      "dependencies": {
+        "underscore": "^1.8.2"
+      }
+    },
+    "node_modules/markdown-it/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
    "node_modules/md5.js": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -9571,6 +9618,12 @@
      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
      "dev": true
    },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "dev": true
+    },
    "node_modules/media-typer": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -12049,7 +12102,6 @@
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
      "dev": true,
-      "optional": true,
      "dependencies": {
        "picomatch": "^2.2.1"
      },
@@ -14266,6 +14318,12 @@
      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
      "dev": true
    },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
    "node_modules/uglify-js": {
      "version": "3.4.10",
      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -14303,6 +14361,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/underscore": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
+      "dev": true
+    },
    "node_modules/unicode-canonical-property-names-ecmascript": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -17842,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",
@@ -17854,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"
      }
@@ -18871,8 +18937,7 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
-      "optional": true
+      "dev": true
    },
    "bindings": {
      "version": "1.5.0",
@@ -19382,7 +19447,6 @@
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
      "dev": true,
-      "optional": true,
      "requires": {
        "anymatch": "~3.1.2",
        "braces": "~3.0.2",
@@ -19399,7 +19463,6 @@
          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
          "dev": true,
-          "optional": true,
          "requires": {
            "fill-range": "^7.0.1"
          }
@@ -19409,7 +19472,6 @@
          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
          "dev": true,
-          "optional": true,
          "requires": {
            "to-regex-range": "^5.0.1"
          }
@@ -19419,7 +19481,6 @@
          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
          "dev": true,
-          "optional": true,
          "requires": {
            "is-glob": "^4.0.1"
          }
@@ -19428,15 +19489,13 @@
          "version": "7.0.0",
          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "to-regex-range": {
          "version": "5.0.1",
          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
          "dev": true,
-          "optional": true,
          "requires": {
            "is-number": "^7.0.0"
          }
@@ -22289,8 +22348,7 @@
    "highlight.js": {
      "version": "10.7.3",
      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
-      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
-      "dev": true
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
    },
    "hmac-drbg": {
      "version": "1.0.1",
@@ -22870,7 +22928,6 @@
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
      "dev": true,
-      "optional": true,
      "requires": {
        "binary-extensions": "^2.0.0"
      }
@@ -23414,6 +23471,15 @@
      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
      "dev": true
    },
+    "linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "dev": true,
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
    "loader-fs-cache": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
@@ -23593,6 +23659,42 @@
        "object-visit": "^1.0.0"
      }
    },
+    "markdown-it": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
+      "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+          "dev": true
+        },
+        "entities": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+          "dev": true
+        }
+      }
+    },
+    "markdown-it-checkbox": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-checkbox/-/markdown-it-checkbox-1.1.0.tgz",
+      "integrity": "sha512-NkZVjnXo5G+cLNdi7DPZxICypBuxFE9F8sx3YGMZn+Cfizr8EZ/1TFUKl7ZnefF6cr1aFHbnQ5iA3rc4cp7EyA==",
+      "dev": true,
+      "requires": {
+        "underscore": "^1.8.2"
+      }
+    },
    "md5.js": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -23610,6 +23712,12 @@
      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
      "dev": true
    },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "dev": true
+    },
    "media-typer": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -25678,7 +25786,6 @@
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
      "dev": true,
-      "optional": true,
      "requires": {
        "picomatch": "^2.2.1"
      }
@@ -27502,6 +27609,12 @@
      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
      "dev": true
    },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
    "uglify-js": {
      "version": "3.4.10",
      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -27532,6 +27645,12 @@
        "which-boxed-primitive": "^1.0.2"
      }
    },
+    "underscore": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
+      "dev": true
+    },
    "unicode-canonical-property-names-ecmascript": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -6,13 +6,16 @@
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && node ../copy.js",
    "lint": "vue-cli-service lint",
-    "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/index.js --dest ../simple-mind-map/dist",
-    "format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*"
+    "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/full.js --dest ../simple-mind-map/dist",
+    "format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*",
+    "buildDoc": "node ./scripts/buildDoc.js",
+    "autoBuildDoc": "node ./scripts/autoBuildDoc.js"
  },
  "dependencies": {
    "@toast-ui/editor": "^3.1.5",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.1",
+    "highlight.js": "^10.7.3",
    "v-viewer": "^1.6.4",
    "vue": "^2.6.11",
    "vue-i18n": "^8.27.2",
@@ -25,10 +28,13 @@
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "babel-eslint": "^10.1.0",
+    "chokidar": "^3.5.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
+    "markdown-it": "^13.0.1",
+    "markdown-it-checkbox": "^1.1.0",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.44.2"
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -4,6 +4,7 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="./dist/logo.png">
    <title>一个简单的web思维导图实现</title>
  </head>
  <body>
--- a/web/public/logo.png
+++ b/web/public/logo.png
--- a/web/scripts/autoBuildDoc.js
+++ b/web/scripts/autoBuildDoc.js
@@ -0,0 +1,38 @@
+const chokidar = require('chokidar')
+const path = require('path')
+const fs = require('fs')
+const { exec } = require('node:child_process')
+const { transformMdToVue } = require('./transformMdToVue')
+
+const reBuildAll = () => {
+  exec(
+    'node ./buildDoc.js',
+    {
+      cwd: path.resolve(__dirname)
+    },
+    (error, msg) => {
+      console.log(error, msg)
+    }
+  )
+}
+
+const buildOne = file => {
+  let content = fs.readFileSync(file, 'utf-8')
+  let doc = transformMdToVue(content)
+  let destPath = path.join(path.dirname(file), './index.vue')
+  fs.writeFileSync(destPath, doc)
+}
+
+chokidar
+  .watch(path.join(__dirname, '../src/pages/Doc/'), {
+    ignoreInitial: true
+  })
+  .on('all', (event, file) => {
+    if (/\.md$/.test(file)) {
+      if (event === 'change') {
+        buildOne(file)
+      } else {
+        reBuildAll()
+      }
+    }
+  })
--- a/web/scripts/buildDoc.js
+++ b/web/scripts/buildDoc.js
@@ -0,0 +1,85 @@
+// 编译文档
+const path = require('path')
+const fs = require('fs')
+const { transformMdToVue } = require('./transformMdToVue')
+
+// 文档语言种类
+let langList = ['zh', 'en']
+
+// 开始转换
+const transform = (dir, routerList) => {
+  let dirs = fs.readdirSync(dir)
+  dirs.forEach(item => {
+    let cur = path.join(dir, item)
+    if (fs.statSync(cur).isDirectory()) {
+      compilerDir(cur, item, routerList)
+    }
+  })
+}
+
+// 编译某种语言下的文档
+const compilerDir = (dir, dirName, routerList) => {
+  let files = fs.readdirSync(dir)
+  files.forEach(file => {
+    if (file.endsWith('.md')) {
+      compilerFile(dir, file, dirName, routerList)
+    }
+  })
+}
+
+// 编译具体的文档
+const compilerFile = (dir, file, dirName, routerList) => {
+  let filePath = path.join(dir, file)
+  let destPath = path.join(dir, './index.vue')
+  let content = fs.readFileSync(filePath, 'utf-8')
+  let title = /(^|\n\r)\s*#\s+([^\n\r]+)/g.exec(content)
+  if (title && title[2]) {
+    addRouter(dirName, routerList, title[2])
+  }
+  let doc = transformMdToVue(content)
+  fs.writeFileSync(destPath, doc)
+}
+
+// 收集文档路由
+const addRouter = (item, routerList, title) => {
+  routerList.push({
+    path: item,
+    title
+  })
+}
+
+// 创建路由
+const createRouter = () => {
+  let content = `
+        export default ${JSON.stringify(
+          routerTypeList.map(item => {
+            return {
+              lang: item.lang,
+              children: item.routerList
+            }
+          })
+        )}
+    `
+  fs.writeFileSync(
+    path.join(__dirname, '../src/pages/Doc/routerList.js'),
+    content
+  )
+}
+
+// 创建目录列表
+const createCatalogList = () => {}
+
+// 开始编译
+let routerTypeList = []
+langList.forEach(lang => {
+  let dir = path.join(__dirname, '../src/pages/Doc/', `./${lang}/`)
+  let routerList = []
+  transform(dir, routerList)
+  routerTypeList.push({
+    lang,
+    routerList
+  })
+})
+// 创建路由
+createRouter()
+console.log('编译完成')
--- a/web/scripts/transformMdToVue.js
+++ b/web/scripts/transformMdToVue.js
@@ -0,0 +1,31 @@
+const path = require('path')
+const fs = require('fs')
+const hljs = require('highlight.js')
+const md = require('markdown-it')({
+  highlight: function(str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return (
+          '<pre class="hljs"><code>' +
+          hljs.highlight(str, {
+            language: lang, 
+            ignoreIllegals: true
+          }).value +
+          '</code></pre>'
+        )
+      } catch (__) {}
+    }
+
+    return (
+      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'
+    )
+  }
+}).use(require('markdown-it-checkbox'))
+
+const templatePath = path.join(__dirname, '../src/pages/Doc/Template.vue')
+
+exports.transformMdToVue = (content) => {
+    let result = md.render(content)
+    let template = fs.readFileSync(templatePath, 'utf-8')
+    return template.replace('$$$$', result)
+}
--- 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=1668512547595') format('woff2'),
-       url('iconfont.woff?t=1668512547595') format('woff'),
-       url('iconfont.ttf?t=1668512547595') format('truetype');
+  src: url('iconfont.woff2?t=1678955183884') format('woff2'),
+       url('iconfont.woff?t=1678955183884') format('woff'),
+       url('iconfont.ttf?t=1678955183884') format('truetype');
 }

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

+.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";
+}
+
 .iconchoose1:before {
  content: "\e6c5";
 }
--- 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,324 +0,0 @@
-{
-  "id": "2479351",
-  "name": "思绪",
-  "font_family": "iconfont",
-  "css_prefix_text": "icon",
-  "description": "思维导图",
-  "glyphs": [
-    {
-      "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/assets/img/logo.png
+++ b/web/src/assets/img/logo.png
--- a/web/src/config/en.js
+++ b/web/src/config/en.js
@@ -166,6 +166,22 @@ export const backgroundPositionList = [
  }
 ]

+// 背景图片大小
+export const backgroundSizeList = [
+  {
+    name: 'Auto',
+    value: 'auto'
+  },
+  {
+    name: 'Cover',
+    value: 'cover'
+  },
+  {
+    name: 'Contain',
+    value: 'contain'
+  }
+]
+
 // 快捷键列表
 export const shortcutKeyList = [
  {
--- a/web/src/config/index.js
+++ b/web/src/config/index.js
@@ -14,7 +14,8 @@ import {
  backgroundPositionList as backgroundPositionListZh,
  shortcutKeyList as shortcutKeyListZh,
  shapeList as shapeListZh,
-  sidebarTriggerList as sidebarTriggerListZh
+  sidebarTriggerList as sidebarTriggerListZh,
+  backgroundSizeList as backgroundSizeListZh
 } from './zh'
 import {
  fontFamilyList as fontFamilyListEn,
@@ -24,7 +25,8 @@ import {
  backgroundPositionList as backgroundPositionListEn,
  shortcutKeyList as shortcutKeyListEn,
  shapeList as shapeListEn,
-  sidebarTriggerList as sidebarTriggerListEn
+  sidebarTriggerList as sidebarTriggerListEn,
+  backgroundSizeList as backgroundSizeListEn
 } from './en'

 const fontFamilyList = {
@@ -52,6 +54,11 @@ const backgroundPositionList = {
  en: backgroundPositionListEn
 }

+const backgroundSizeList = {
+  zh: backgroundSizeListZh,
+  en: backgroundSizeListEn
+}
+
 const shortcutKeyList = {
  zh: shortcutKeyListZh,
  en: shortcutKeyListEn
@@ -81,6 +88,7 @@ export {
  lineStyleList,
  backgroundRepeatList,
  backgroundPositionList,
+  backgroundSizeList,
  shortcutKeyList,
  shapeList,
  sidebarTriggerList
--- a/web/src/config/zh.js
+++ b/web/src/config/zh.js
@@ -221,6 +221,22 @@ export const backgroundPositionList = [
  }
 ]

+// 背景图片大小
+export const backgroundSizeList = [
+  {
+    name: '自动',
+    value: 'auto'
+  },
+  {
+    name: '覆盖',
+    value: 'cover'
+  },
+  {
+    name: '保持',
+    value: 'contain'
+  }
+]
+
 // 数据存储
 export const store = {
  sidebarZIndex: 1 //侧边栏zIndex
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -5,6 +5,8 @@ export default {
    color: 'Color',
    image: 'Image',
    imageRepeat: 'Image repeat',
+    imagePosition: 'Image position',
+    imageSize: 'Image size',
    line: 'Line',
    width: 'Width',
    style: 'Style',
@@ -20,7 +22,28 @@ export default {
    level2Node: 'Level2 node',
    belowLevel2Node: 'Below level2 node',
    nodeBorderType: 'Node border style',
-    nodeUseLineStyle: 'Use only has bottom border style'
+    nodeUseLineStyle: 'Use only has bottom border style',
+    otherConfig: 'Other config',
+    enableFreeDrag: 'Enable node free drag',
+    watermark: 'Watermark',
+    showWatermark: 'Is show watermark',
+    watermarkDefaultText: 'Watermark text',
+    watermarkText: 'Watermark text',
+    watermarkTextColor: 'Text color',
+    watermarkLineSpacing: 'Line spacing',
+    watermarkTextSpacing: 'Text spacing',
+    watermarkAngle: 'Angle',
+    watermarkTextOpacity: 'Text opacity',
+    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'
@@ -65,7 +88,13 @@ export default {
    imageFile: 'Image file',
    svgFile: 'svg file',
    pdfFile: 'pdf file',
-    tips: 'tips：.smm and .json file can be import'
+    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',
@@ -163,6 +192,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
@@ -5,6 +5,8 @@ export default {
    color: '颜色',
    image: '图片',
    imageRepeat: '图片重复',
+    imagePosition: '图片位置',
+    imageSize: '图片大小',
    line: '连线',
    width: '粗细',
    style: '风格',
@@ -20,7 +22,28 @@ export default {
    level2Node: '二级节点',
    belowLevel2Node: '三级及以下节点',
    nodeBorderType: '节点边框风格',
-    nodeUseLineStyle: '是否使用只有底边框的风格'
+    nodeUseLineStyle: '是否使用只有底边框的风格',
+    otherConfig: '其他配置',
+    enableFreeDrag: '是否开启节点自由拖拽',
+    watermark: '水印',
+    showWatermark: '是否显示水印',
+    watermarkDefaultText: '水印文字',
+    watermarkText: '水印文字',
+    watermarkTextColor: '文字颜色',
+    watermarkLineSpacing: '水印行间距',
+    watermarkTextSpacing: '水印文字间距',
+    watermarkAngle: '旋转角度',
+    watermarkTextOpacity: '文字透明度',
+    watermarkTextFontSize: '文字字号',
+    isEnableNodeRichText: '是否开启节点富文本编辑',
+    mousewheelAction: '鼠标滚轮行为',
+    zoomView: '缩放视图',
+    moveViewUpDown: '上下移动视图',
+    associativeLine: '关联线',
+    associativeLineWidth: '粗细',
+    associativeLineColor: '颜色',
+    associativeLineActiveWidth: '激活粗细',
+    associativeLineActiveColor: '激活颜色'
  },
  color: {
    moreColor: '更多颜色'
@@ -65,7 +88,13 @@ export default {
    imageFile: '图片文件',
    svgFile: 'svg文件',
    pdfFile: 'pdf文件',
-    tips: 'tips：.smm和.json文件可用于导入'
+    tips: 'tips：.smm和.json文件可用于导入',
+    domToImage: '是否将svg中富文本节点转换成图片',
+    pngTips: 'tips：富文本模式导出图片非常耗时，建议导出为svg格式',
+    svgTips: 'tips：富文本模式导出图片非常耗时',
+    transformingDomToImages: '正在转换节点：',
+    notifyTitle: '消息',
+    notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了'
  },
  fullscreen: {
    fullscreenShow: '全屏查看',
@@ -163,6 +192,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
@@ -0,0 +1,195 @@
+<template>
+  <div class="docContainer">
+    <Header></Header>
+    <div class="content">
+      <Sidebar></Sidebar>
+      <div class="doc" ref="doc" id="doc" @scroll="onScroll">
+        <router-view></router-view>
+      </div>
+      <CatalogBar :scrollTop="scrollTop" @scroll="doScroll"></CatalogBar>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from './components/Header.vue'
+import Sidebar from './components/Sidebar.vue'
+import CatalogBar from './components/CatalogBar.vue'
+import 'highlight.js/styles/atom-one-dark.css'
+
+export default {
+  components: {
+    Header,
+    Sidebar,
+    CatalogBar
+  },
+  data () {
+    return {
+      scrollTop: 0,
+    }
+  },
+  methods: {
+    doScroll(top) {
+      this.$nextTick(() => {
+        try {
+          this.$refs.doc.scrollTop = top
+        } catch (error) {
+          console.log(error)
+        }
+      })
+    },
+
+    onScroll() {
+      this.scrollTop = this.$refs.doc.scrollTop
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.docContainer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: Quotes, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+
+  .content {
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+
+    .doc {
+      overflow: auto;
+      flex-grow: 1;
+      font-weight: 400;
+      color: #213547;
+      font-size: 16px;
+      -webkit-font-smoothing: antialiased;
+      line-height: 1.7;
+      padding: 30px;
+
+      h1 {
+        margin: 30px 0;
+        font-size: 38px;
+        line-height: 1.4;
+      }
+
+      h2 {
+        margin: 20px 0;
+        border-top: 1px solid rgba(60, 60, 60, 0.12);
+        font-size: 24px;
+        padding-top: 10px;
+      }
+
+      h3 {
+        font-size: 19px;
+        margin: 10px 0;
+      }
+
+      h4 {
+        margin-bottom: 10px;
+      }
+
+      p {
+        margin-bottom: 20px;
+      }
+
+      a {
+        font-weight: 500;
+        text-decoration: none;
+        color: #42b883;
+        transition: color 0.25s;
+
+        &:hover {
+          color: #33a06f;
+        }
+      }
+
+      pre {
+        margin-bottom: 20px;
+        border-radius: 5px;
+        font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+
+        code {
+          font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+        }
+      }
+
+      :not(pre) > code {
+        background-color: #f1f1f1;
+        padding: 0.15em 0.5em;
+        border-radius: 4px;
+        color: #476582;
+        transition: color 0.5s, background-color 0.5s;
+        font-family: Quotes, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+          Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
+          'Helvetica Neue', sans-serif;
+      }
+
+      input[type='checkbox'] {
+        margin-right: 5px;
+      }
+
+      ul {
+        list-style: none;
+        padding-left: 1.25rem;
+
+        > li {
+          position: relative;
+          margin: 1px 0;
+
+          &:before {
+            content: '';
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            background-color: rgba(60, 60, 60, 0.33);
+            transition: background-color 0.5s;
+            left: -1.25rem;
+            top: 0.75rem;
+          }
+        }
+      }
+
+      table {
+        border-collapse: collapse;
+        border-spacing: 0;
+        margin-top: 0.8rem;
+        margin-bottom: 1.4rem;
+      }
+
+      tr {
+        background-color: #fff;
+        border-top: 1px solid #ccc;
+      }
+
+      th,
+      td {
+        padding: 5px 14px;
+        border: 1px solid #ddd;
+      }
+
+      blockquote {
+        margin: 1rem 0;
+        border-left: 0.2rem solid rgba(60, 60, 60, 0.29);
+        padding-left: 1rem;
+        transition: border-color 0.5s;
+
+        > p {
+          margin: 0;
+          font-size: 16px;
+          color: rgba(60, 60, 60, 0.7);
+          transition: color 0.5s;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/web/src/pages/Doc/Template.vue
+++ b/web/src/pages/Doc/Template.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    $$$$
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -0,0 +1,80 @@
+import routerList from './routerList'
+
+let langList = [
+  {
+    name: '中文',
+    path: 'zh'
+  },
+  {
+    name: 'English',
+    path: 'en'
+  }
+]
+let StartList = ['introduction', 'start', 'translate', 'changelog']
+let APIList = [
+  'constructor',
+  'node',
+  'render',
+  'view',
+  'keyCommand',
+  'command',
+  'batchExecution',
+  'richText',
+  'select',
+  'drag',
+  'keyboardNavigation',
+  'doExport',
+  'miniMap',
+  'watermark',
+  'associativeLine',
+  'xmind',
+  'utils'
+]
+
+const createList = (lang, list) => {
+  let langRouter = routerList.find(item => {
+    return item.lang === lang
+  })
+  let children = langRouter.children
+  return list
+    .filter(item => {
+      return children.find(child => {
+        return child.path === item
+      })
+    })
+    .map(item => {
+      return {
+        path: item,
+        name: children.find(child => {
+          return child.path === item
+        }).title
+      }
+    })
+}
+
+export default {
+  zh: [
+    {
+      groupName: '开始',
+      list: createList('zh', StartList)
+    },
+    {
+      groupName: 'API',
+      list: createList('zh', APIList)
+    }
+  ],
+  en: [
+    {
+      groupName: 'Start',
+      list: createList('en', StartList)
+    },
+    {
+      groupName: 'API',
+      list: createList('en', APIList)
+    }
+  ]
+}
+
+export {
+  langList
+}
--- a/web/src/pages/Doc/components/CatalogBar.vue
+++ b/web/src/pages/Doc/components/CatalogBar.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="catalogBarContainer">
+    <div class="catalogBarTitle">{{ pageCatalogTitle }}</div>
+    <div class="catalogList">
+      <div
+        class="catalogItem"
+        v-for="(item, index) in list"
+        :key="item.title + index"
+        :class="{ active: item.title === activeCatalog }"
+        @click="scrollTo(item, index)"
+      >
+        {{ item.title }}
+      </div>
+      <div
+        v-if="activeCatalogIndex !== -1"
+        class="activeBar"
+        :style="{ top: 4 + activeCatalogIndex * 28 + 'px' }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import t from '../i18n'
+
+export default {
+  props: {
+    scrollTop: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      lang: '',
+      list: [],
+      activeCatalog: '',
+      activeCatalogIndex: -1,
+      appointCatalog: true
+    }
+  },
+  computed: {
+    pageCatalogTitle() {
+      return t('pageCatalog', this.lang)
+    }
+  },
+  watch: {
+    $route(newVal, oldVal) {
+      this.initLang()
+      this.initCatalogList(newVal.path, oldVal.path)
+    },
+    scrollTop() {
+      this.onScroll()
+    },
+    lang(newVal, oldVal) {
+      if (!oldVal) {
+        return
+      }
+      this.initCatalogList()
+    }
+  },
+  mounted() {
+    this.initLang()
+    this.initCatalogList()
+    this.scrollToCatalog()
+  },
+  methods: {
+    // 获取当前语言
+    initLang() {
+      let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
+      if (lang && lang[1]) {
+        this.lang = lang[1]
+      }
+    },
+
+    // 初始化二级标题目录
+    initCatalogList(newPath, oldPath) {
+      let newPathRes = /^\/doc\/[^\/]+\/([^\/]+)/.exec(newPath)
+      let oldPathRes = /^\/doc\/[^\/]+\/([^\/]+)/.exec(oldPath)
+      // 语言变了、章节变了，需要重新获取二级标题目录
+      if ((!newPath && !oldPath) || newPathRes[1] !== oldPathRes[1]) {
+        this.$emit('scroll', 0)
+        this.resetActive()
+        let container = document.getElementById('doc')
+        let els = document.querySelectorAll('#doc h2')
+        this.list = Array.from(els).map(item => {
+          return {
+            title: item.textContent,
+            top: item.offsetTop - container.offsetTop
+          }
+        })
+      }
+    },
+
+    // 如果url中存在二级标题，那么滚动到该标题所在位置
+    scrollToCatalog() {
+      let url = /^\/doc\/[^\/]+\/[^\/]+\/([^\/]+)($|\/)/.exec(this.$route.path)
+      if (url && url[1]) {
+        let h = decodeURIComponent(url[1])
+        let item = this.list.find(item => {
+          return item.title === h
+        })
+        let index = this.list.findIndex(item => {
+          return item.title === h
+        })
+        if (item) {
+          this.activeCatalog = item.title
+          this.activeCatalogIndex = index
+          this.$emit('scroll', item.top)
+        }
+      }
+    },
+
+    // 手动点击切换到指定二级标题
+    scrollTo(item, index) {
+      this.appointCatalog = true
+      this.routeToNewCatalog(item.title)
+      this.$nextTick(() => {
+        this.activeCatalog = item.title
+        this.activeCatalogIndex = index
+        this.scrollToCatalog()
+      })
+    },
+
+    // 路由到指定二级标题
+    routeToNewCatalog(title) {
+      let path = this.$route.path
+      let url = ''
+      if (!title) {
+        url = path.replace(/^(\/doc\/[^\/]+\/[^\/]+)($|\/|.*)$/, '$1')
+      } else if (/^\/doc\/[^\/]+\/[^\/]+($|\/)$/.test(path)) {
+        url = path.replace(
+          /^(\/doc\/[^\/]+\/[^\/]+)($|\/)$/,
+          '$1/' + encodeURIComponent(title)
+        )
+      } else {
+        url = path.replace(
+          /^(\/doc\/[^\/]+\/[^\/]+\/)([^\/]+)($|\/)/,
+          (...args) => {
+            return args[1] + encodeURIComponent(title)
+          }
+        )
+      }
+      if (path === url) {
+        return
+      }
+      this.$router.push(url)
+    },
+
+    // 文档滚动时判断当前滚动到哪个二级标题
+    onScroll() {
+      if (this.appointCatalog) {
+        this.appointCatalog = false
+        return
+      }
+      let find = false
+      for (let i = 0; i < this.list.length; i++) {
+        let cur = this.list[i]
+        let next = this.list[i + 1]
+        if (this.scrollTop >= cur.top && (!next || this.scrollTop < next.top)) {
+          find = true
+          if (cur.title === this.activeCatalog) {
+            break
+          }
+          this.activeCatalog = cur.title
+          this.activeCatalogIndex = i
+          this.routeToNewCatalog(cur.title)
+          break
+        }
+      }
+      if (!find) {
+        this.resetActive()
+        this.routeToNewCatalog('')
+      }
+    },
+
+    resetActive() {
+      this.activeCatalog = ''
+      this.activeCatalogIndex = -1
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.catalogBarContainer {
+  width: 20%;
+  flex-shrink: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-top: 60px;
+  padding-bottom: 30px;
+  padding-left: 20px;
+
+  .catalogBarTitle {
+    font-weight: 700;
+    margin-bottom: 4px;
+    text-transform: uppercase;
+    font-size: 11px;
+    letter-spacing: 0.4px;
+  }
+
+  .catalogList {
+    position: relative;
+
+    .catalogItem {
+      color: rgba(60, 60, 60, 0.7);
+      transition: color 0.5s;
+      line-height: 28px;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+
+      &.active {
+        color: rgba(60, 60, 60, 1);
+        font-weight: bold;
+      }
+    }
+
+    .activeBar {
+      position: absolute;
+      left: -10px;
+      width: 4px;
+      height: 20px;
+      background-color: #42b883;
+      border-radius: 4px;
+      transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), opacity 0.25s,
+        background-color 0.5s;
+    }
+  }
+}
+</style>
--- a/web/src/pages/Doc/components/Header.vue
+++ b/web/src/pages/Doc/components/Header.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="headerContainer">
+    <div class="left">
+      <div class="title">
+        <img src="../../../assets/img/logo.png" alt="">
+        SimpleMindMap
+      </div>
+    </div>
+    <div class="center">
+      <div class="btn" @click="toDemo">{{ demoName }}</div>
+      <el-dropdown
+        trigger="click"
+        placement="bottom-start"
+        @command="handleCommand"
+      >
+        <span class="translateBtn">
+          {{ currentLangName }}<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            v-for="item in otherLangList"
+            :key="item.path"
+            :command="item.path"
+            >{{ item.name }}</el-dropdown-item
+          >
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <a href="https://github.com/wanglin2/mind-map" target="_blank">
+        <span class="iconfont icongithub"></span>
+      </a>
+    </div>
+    <div class="right"></div>
+  </div>
+</template>
+
+<script>
+import { langList } from '../catalogList'
+import t from '../i18n'
+
+export default {
+  data() {
+    return {
+      lang: '',
+      currentLangName: '',
+      otherLangList: []
+    }
+  },
+  computed: {
+    demoName() {
+      return t('demo', this.lang)
+    }
+  },
+  watch: {
+    $route() {
+      this.init()
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
+      if (lang && lang[1]) {
+        this.lang = lang[1]
+        let currentLang = langList.find(item => {
+          return item.path === this.lang
+        })
+        this.currentLangName = currentLang.name
+        this.otherLangList = langList.filter(item => {
+          return item.path !== this.lang
+        })
+      }
+    },
+
+    toDemo() {
+      this.$router.push('/')
+    },
+
+    handleCommand(path) {
+      let url = this.$route.path.replace(/^\/doc\/([^\/]+)\//, (...args) => {
+        return `/doc/${path}/`
+      })
+      this.$router.push(url)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.headerContainer {
+  height: 55px;
+  border-bottom: 1px solid rgba(60, 60, 60, 0.12);
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+
+  .left {
+    width: 30%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .title {
+      width: 200px;
+      font-size: 24px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 30px;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .center {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: flex-end;
+
+    .btn {
+      color: #213547;
+      cursor: pointer;
+      transition: color 0.5s;
+      margin-right: 15px;
+      font-size: 14px;
+
+      &:hover {
+        color: #42b883;
+      }
+    }
+
+    .translateBtn {
+      margin-right: 15px;
+      font-size: 16px;
+      color: #213547;
+      cursor: pointer;
+      margin-top: 1px;
+      display: block;
+      font-size: 14px;
+    }
+
+    a {
+      text-decoration: none;
+      color: rgba(60, 60, 60, 0.7);
+      transition: color 0.5s;
+      margin-right: 15px;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+
+      &:hover {
+        color: rgba(60, 60, 60, 1);
+      }
+
+      .iconfont {
+        font-size: 30px;
+      }
+    }
+  }
+
+  .right {
+    width: 20%;
+  }
+}
+</style>
--- a/web/src/pages/Doc/components/Sidebar.vue
+++ b/web/src/pages/Doc/components/Sidebar.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="sideBarContainer">
+    <div class="catalogGroupList">
+      <div
+        class="catalogGroup"
+        v-for="(group, groupIndex) in groupList"
+        :key="groupIndex"
+      >
+        <div class="catalogGroupName">{{ group.groupName }}</div>
+        <div class="catalogList">
+          <div
+            class="catalogItem"
+            v-for="item in group.list"
+            :key="groupIndex + item.path"
+            :class="{ active: item.path === currentPath }"
+            @click="jump(item)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import catalogList from '../catalogList'
+
+export default {
+  data() {
+    return {
+      groupList: [],
+      lang: '',
+      currentPath: ''
+    }
+  },
+  created() {
+    this.initCatalog()
+  },
+  watch: {
+    $route() {
+      this.initCatalog()
+    }
+  },
+  methods: {
+    jump(item) {
+      if (item.path === this.currentPath) {
+        return
+      }
+      this.$router.push(`/doc/${this.lang}/${item.path}`)
+    },
+
+    initCatalog() {
+      // 目录列表
+      let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
+      if (lang && lang[1]) {
+        this.lang = lang[1]
+        this.groupList = catalogList[this.lang]
+      }
+      // 当前所在路径
+      let path = /^\/doc\/[^\/]+\/([^\/]+)(\/|$)/.exec(this.$route.path)
+      if (path && path[1]) {
+        this.currentPath = path[1]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.sideBarContainer {
+  width: 30%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 60px;
+  padding-bottom: 30px;
+  flex-shrink: 0;
+
+  .catalogGroupList {
+    width: 200px;
+
+    .catalogGroup {
+      padding-bottom: 16px;
+
+      .catalogGroupName {
+        line-height: 20px;
+        font-size: 13px;
+        font-weight: 600;
+        color: #213547;
+        transition: color 0.5s;
+        padding: 4px 0;
+      }
+
+      .catalogList {
+        .catalogItem {
+          line-height: 20px;
+          font-size: 13px;
+          font-weight: 500;
+          color: rgba(60, 60, 60, 0.7);
+          transition: color 0.5s;
+          cursor: pointer;
+          padding: 4px 0;
+
+          &:hover {
+            color: rgba(60, 60, 60, 1);
+          }
+
+          &.active {
+            color: #42b883;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
--- 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/batchExecution/index.md
+++ b/web/src/pages/Doc/en/batchExecution/index.md
@@ -0,0 +1,16 @@
+# batchExecution instance
+
+The `batchExecution` is used to batch asynchronously perform some operations,
+and if a certain operation is called multiple times at the same time, it will
+only be executed once in the next event loop. Can be obtained through
+`mindMap.batchExecution`
+
+## Method
+
+### push(name, fn)
+
+Add task.
+
+`name`: task name
+
+`fn`: task
--- a/web/src/pages/Doc/en/batchExecution/index.vue
+++ b/web/src/pages/Doc/en/batchExecution/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1>batchExecution instance</h1>
+<p>The <code>batchExecution</code> is used to batch asynchronously perform some operations,
+and if a certain operation is called multiple times at the same time, it will
+only be executed once in the next event loop. Can be obtained through
+<code>mindMap.batchExecution</code></p>
+<h2>Method</h2>
+<h3>push(name, fn)</h3>
+<p>Add task.</p>
+<p><code>name</code>: task name</p>
+<p><code>fn</code>: task</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
@@ -0,0 +1,209 @@
+# Changelog
+
+## 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.
+
+New: Add position and size settings for background image display. This setting is also supported for exported pictures.
+
+## 0.3.0
+
+Upgrade to plugin architecture, pull out some non-core functions as plugins, register as needed, and reduce the overall volume.
+
+## 0.2.24
+
+New: Node free drag is changed to configurable, the default is `false`, not open; Support add watermark.
+
+## 0.2.23
+
+New: Support register new theme.
+
+## 0.2.22
+
+optimization：The theme and structure pictures of the built-in `simple-mind-map` package are removed and replaced by user self-maintenance. The original pictures can be found in the `web/assets/img/` directory.
+
+## 0.2.21
+
+New: Support node horizontal line style.
+
+## 0.2.20
+
+fix：When the distance from the canvas to the upper left corner of the window is not 0, the node dragging will have an offset problem.
+
+## 0.2.19
+
+fix：When the node is not activated, pressing any key will trigger the problem of automatic focus.
+
+## 0.2.18
+
+optimization：Keyboard navigation algorithm for finding focus, supporting simple algorithm, region algorithm and shadow algorithm.
+
+## 0.2.17
+
+New：Keyboard navigation, that is, switch the active nodes through the direction keys; The node text content can be edited directly in the outline.
+
+## 0.2.16
+
+optimization：Mini map; drag performance.
+
+## 0.2.15
+
+optimization：Local file editing.
+
+New：Double-click the image in the node to preview the large image.
+
+## 0.2.14
+
+optimization：Automatically expand when inserting child nodes.
+
+fix：The error occurred when the mini map was closed.
+
+## 0.2.13
+
+fix：The child node is missing when collapsing state replication.
+
+## 0.2.11
+
+fix：Fix the problem that is lost when the child node collapses state replication.
+
+New：Support mini map.
+
+## 0.2.10
+
+optimization：Focus immediately when you manually create a node.
+
+fix：Connection style depth update problem.
+
+New：Logical structure diagram and mind map add linear connection style and direct connection style.
+
+## 0.2.9
+
+New：Support the creation, opening and saving of local files on the computer.
+
+## 0.2.8
+
+fix：Xmind8 version file import failed.
+
+New：Expanding to the specified level is supported.
+
+## 0.2.7
+
+fix：The root node adds multiple nodes to burst the stack.
+
+New：Support import .xmind file.
+
+## 0.2.6
+
+New：The title tag is added when exporting svg.
+
+## 0.2.5
+
+fix：Bugs caused by node expansion and collapse.
+
+New：Node supports custom line styles.
+
+## 0.2.4
+
+New：Nodes support multiple shapes.
+
+## 0.2.3
+
+fix：Shortcut key conflicts when editing node text; Right-click menu shortcut prompt error; Right-click menu shortcut prompt.
+
+## 0.2.2
+
+fix：The input string '/' conflicts with the shortcut key '/'.
+
+## 0.2.1
+
+New：Support export as pdf.
+
+## 0.2.0
+
+New：Classic4 theme；Support adding summary; Support free drag; Move Node Up, Move Node Down, Copy Node, Cut Node, Paste Node, One-click Organize Cloth Shortcut; Library packaging; Ctrl+left click to select multiple.
+
+## 0.1.18
+
+fix：The problem that the node icon cannot be deleted; The tool button is grayed out and can still be clicked.
+
+## 0.1.17
+
+New：Add read-only mode.
+
+## 0.1.16
+
+New：Node notes support markdown and rich text.
+
+fix：Can't select text; Node annotations cannot hide problems after node activation; When editing text such as hyperlinks, notes, labels, etc., the return key and return key conflict with the shortcut key of mind map.
+
+## 0.1.15
+
+New：The status data supports saving the active status and view status (drag position, zoom value)；Support node drag.
+
+## 0.1.14
+
+fix：There are problems with setting topics when activating nodes.
+
+## 0.1.13
+
+New：Shortcut key function; Support export as json。
+
+optimization：Some details.
+
+## 0.1.12
+
+New：Local storage；Right-click menu function, etc.
+
+## 0.1.0
+
+Complete basic functions.
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
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
wanglin2	0bf5b2d6f7	打包0.3.1	2023-02-01 16:30:29 +08:00
wanglin2	74a52ea386	导出d的图片支持background-size/position/repeat属性效果	2023-02-01 16:25:57 +08:00
wanglin2	9914eef5b9	修改文档	2023-01-31 15:06:24 +08:00
wanglin2	f547f741f2	1.修复删除背景图片不生效的问题；2.背景图片展示增加位置和大小设置;3.修复节点拖拽到根节点时连接线跑到根节点上方的问题	2023-01-31 15:04:38 +08:00
wanglin2	c26149fa42	修复demo设置了水印页面刷新后生效的问题	2023-01-31 13:35:46 +08:00
wanglin2	b2aa3648eb	支持当修改文档后自动重新编译生成vue组件	2023-01-31 11:15:34 +08:00
wanglin2	b997604ab2	打包0.3.0	2023-01-17 17:39:37 +08:00
wanglin2	c6929b82ad	插件化架构基本升级完成	2023-01-17 16:53:28 +08:00
wanglin2	b40da53aef	只读模式下禁止添加历史记录、禁止响应前进后退操作	2023-01-17 15:49:23 +08:00
wanglin2	1e5dfd97e1	提取多选节点Select类作为插件	2023-01-17 15:26:35 +08:00
wanglin2	97bcc22abd	提取导出类作为插件	2023-01-17 15:21:02 +08:00
wanglin2	bd655839cb	提取出键盘导航类作为插件	2023-01-17 14:39:43 +08:00
wanglin2	a53a4e8e1d	提取拖拽类Drag作为插件	2023-01-17 14:30:13 +08:00
wanglin2	eb01646747	提取水印类作为插件	2023-01-17 14:11:07 +08:00
wanglin2	d27eee0fae	开始进行插件化转换，即提取非核心的类作为插件，不再内置；抽取出校地图类插件	2023-01-17 13:56:57 +08:00
wanglin2	92ee241ed8	将xmind解析方法从MindMap类上移除，改为按需引入方式使用	2023-01-17 11:19:59 +08:00
wanglin2	660906e4c5	【春节快乐】修改文档	2023-01-17 10:55:28 +08:00
wanglin2	971f0d3446	打包0.2.24	2023-01-17 09:24:33 +08:00
wanglin2	63eccede7f	完成水印功能、新增水印文档	2023-01-17 09:20:37 +08:00
wanglin2	5bd6adb488	节点自由拖拽支持配置是否开启	2023-01-14 16:26:51 +08:00
wanglin2	fbdc5e0f39	完善文档	2023-01-14 14:44:53 +08:00
wanglin2	5e994322fe	全新文档	2023-01-14 11:33:05 +08:00