Merge branch 'feature' into main

打包0.6.7
Doc：update
2026-02-19 23:08:32 +08:00 · 2023-07-18 09:30:32 +08:00 · 2023-07-18 09:29:19 +08:00 · 2023-07-18 09:21:58 +08:00 · 2023-07-18 08:44:44 +08:00 · 2023-07-18 08:35:40 +08:00
239 changed files with 7987 additions and 1419 deletions
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021-2023 The MindMap Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -19,6 +19,12 @@

 在线地址：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)

+另外也提供了客户端可供下载使用，支持`Windows`、`Mac`及`Linux`，下载地址：
+
+Github：[releases](https://github.com/wanglin2/mind-map/releases)。
+
+百度云盘：[地址](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)。
+
 # 特性

 - [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积
@@ -80,8 +86,54 @@ const mindMap = new MindMap({

 # License

-MIT
+[MIT](./LICENSE)

 # 微信交流群

-![](./qrcode.jpg)
+<img src="./qrcode.jpg" style="width: 300px" />
+
+如果已过期，可以微信添加`wanglinguanfang`拉你入群。
+
+# 请作者喝杯咖啡
+
+开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡哟~
+
+> 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds
+
+> 转账请备注【思维导图】。你的头像和名字将会出现在下面和[文档页面](https://wanglin2.github.io/mind-map/#/doc/zh/introduction/%E8%AF%B7%E4%BD%9C%E8%80%85%E5%96%9D%E6%9D%AF%E5%92%96%E5%95%A1)
+
+<p>
+  <img src="./web/src/assets/img/alipay.jpg" style="width: 300px" />
+  <img src="./web/src/assets/img/wechat.jpg" style="width: 300px" />
+</p>
+
+<p>
+    <span>
+        <img src="./web/src/assets/avatar/Think.jpg" style="width: 50px;height: 50px;" />
+        <span>Think</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/志斌.jpg" style="width: 50px;height: 50px;" />
+        <span>志斌</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/小土渣的宇宙.jpeg" style="width: 50px;height: 50px;" />
+        <span>小土渣的宇宙</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/qp.jpg" style="width: 50px;height: 50px;" />
+        <span>qp</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/ZXR.jpg" style="width: 50px;height: 50px;" />
+        <span>ZXR</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/花儿朵朵.jpg" style="width: 50px;height: 50px;" />
+        <span>花儿朵朵</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/suka.jpg" style="width: 50px;height: 50px;" />
+        <span>suka</span>
+    </span>
+</p>
--- a/index.html
+++ b/index.html
--- a/qrcode.jpg
+++ b/qrcode.jpg
--- a/simple-mind-map/full.js
+++ b/simple-mind-map/full.js
@@ -1,26 +1,40 @@
 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 AssociativeLine from './src/AssociativeLine'
-import RichText from './src/RichText'
+import MiniMap from './src/plugins/MiniMap.js'
+import Watermark from './src/plugins/Watermark.js'
+import KeyboardNavigation from './src/plugins/KeyboardNavigation.js'
+import ExportPDF from './src/plugins/ExportPDF.js'
+import Export from './src/plugins/Export.js'
+import Drag from './src/plugins/Drag.js'
+import Select from './src/plugins/Select.js'
+import AssociativeLine from './src/plugins/AssociativeLine'
+import RichText from './src/plugins/RichText'
+import NodeImgAdjust from './src/plugins/NodeImgAdjust.js'
+import TouchEvent from './src/plugins/TouchEvent.js'
 import xmind from './src/parse/xmind.js'
 import markdown from './src/parse/markdown.js'
+import icons from './src/svg/icons.js'
+import * as constants from './src/constants/constant.js'
+import themes from './src/themes/index.js'
+import * as defaultTheme from './src/themes/default.js'

 MindMap.xmind = xmind
 MindMap.markdown = markdown
+MindMap.iconList = icons.nodeIconList
+MindMap.constants = constants
+MindMap.themes = themes
+MindMap.defaultTheme = defaultTheme

 MindMap
  .usePlugin(MiniMap)
  .usePlugin(Watermark)
  .usePlugin(Drag)
  .usePlugin(KeyboardNavigation)
+  .usePlugin(ExportPDF)
  .usePlugin(Export)
  .usePlugin(Select)
  .usePlugin(AssociativeLine)
  .usePlugin(RichText)
+  .usePlugin(TouchEvent)
+  .usePlugin(NodeImgAdjust)

 export default MindMap
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -1,110 +1,17 @@
-import View from './src/View'
-import Event from './src/Event'
-import Render from './src/Render'
+import View from './src/core/view/View'
+import Event from './src/core/event/Event'
+import Render from './src/core/render/Render'
 import merge from 'deepmerge'
 import theme from './src/themes'
-import Style from './src/Style'
-import KeyCommand from './src/KeyCommand'
-import Command from './src/Command'
-import BatchExecution from './src/BatchExecution'
-import { layoutValueList, CONSTANTS } from './src/utils/constant'
+import Style from './src/core/render/node/Style'
+import KeyCommand from './src/core/command/KeyCommand'
+import Command from './src/core/command/Command'
+import BatchExecution from './src/utils/BatchExecution'
+import { layoutValueList, CONSTANTS } from './src/constants/constant'
 import { SVG } from '@svgdotjs/svg.js'
 import { simpleDeepClone } from './src/utils'
-import defaultTheme from './src/themes/default'
-
-// 默认选项配置
-const defaultOpt = {
-  // 是否只读
-  readonly: false,
-  // 布局
-  layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
-  // 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
-  fishboneDeg: 45,
-  // 主题
-  theme: 'default', // 内置主题：default（默认主题）
-  // 主题配置，会和所选择的主题进行合并
-  themeConfig: {},
-  // 放大缩小的增量比例
-  scaleRatio: 0.1,
-  // 最多显示几个标签
-  maxTag: 5,
-  // 导出图片时的内边距
-  exportPadding: 20,
-  // 展开收缩按钮尺寸
-  expandBtnSize: 20,
-  // 节点里图片和文字的间距
-  imgTextMargin: 5,
-  // 节点里各种文字信息的间距，如图标和文字的间距
-  textContentMargin: 2,
-  // 多选节点时鼠标移动到边缘时的画布移动偏移量
-  selectTranslateStep: 3,
-  // 多选节点时鼠标移动距边缘多少距离时开始偏移
-  selectTranslateLimit: 20,
-  // 自定义节点备注内容显示
-  customNoteContentShow: null,
-  /*
-        {
-            show(){},
-            hide(){}
-        }
-    */
-  // 是否开启节点自由拖拽
-  enableFreeDrag: false,
-  // 水印配置
-  watermarkConfig: {
-    text: '',
-    lineSpacing: 100,
-    textSpacing: 100,
-    angle: 30,
-    textStyle: {
-      color: '#999',
-      opacity: 0.5,
-      fontSize: 14
-    }
-  },
-  // 达到该宽度文本自动换行
-  textAutoWrapWidth: 500,
-  // 自定义鼠标滚轮事件处理
-  // 可以传一个函数，回调参数为事件对象
-  customHandleMousewheel: null,
-  // 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
-  mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM,// zoom（放大缩小）、move（上下移动）
-  // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
-  mousewheelMoveStep: 100,
-  // 默认插入的二级节点的文字
-  defaultInsertSecondLevelNodeText: '二级节点',
-  // 默认插入的二级以下节点的文字
-  defaultInsertBelowSecondLevelNodeText: '分支主题',
-  // 展开收起按钮的颜色
-  expandBtnStyle: {
-    color: '#808080',
-    fill: '#fff'
-  },
-  // 自定义展开收起按钮的图标
-  expandBtnIcon: {
-    open: '',// svg字符串
-    close: ''
-  },
-  // 是否只有当鼠标在画布内才响应快捷键事件
-  enableShortcutOnlyWhenMouseInSvg: true,
-  // 是否开启节点动画过渡
-  enableNodeTransitionMove: true,
-  // 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
-  nodeTransitionMoveDuration: 300,
-  // 初始根节点的位置
-  initRootNodePosition: null,
-  // 导出png、svg、pdf时的图形内边距
-  exportPaddingX: 10,
-  exportPaddingY: 10,
-  // 节点文本编辑框的z-index
-  nodeTextEditZIndex: 3000,
-  // 节点备注浮层的z-index
-  nodeNoteTooltipZIndex: 3000,
-  // 是否在点击了画布外的区域时结束节点文本的编辑状态
-  isEndNodeTextEditOnClickOuter: true,
-  // 最大历史记录数
-  maxHistoryCount: 1000
-}
+import defaultTheme, { checkIsNodeSizeIndependenceConfig } from './src/themes/default'
+import { defaultOpt } from './src/constants/defaultOptions'

 //  思维导图
 class MindMap {
@@ -125,9 +32,6 @@ class MindMap {
    this.svg = SVG().addTo(this.el).size(this.width, this.height)
    this.draw = this.svg.group()

-    // 节点id
-    this.uid = 1
-
    // 初始化主题
    this.initTheme()

@@ -193,12 +97,12 @@ class MindMap {
  }

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

@@ -248,7 +152,9 @@ class MindMap {
  //  设置主题配置
  setThemeConfig(config) {
    this.opt.themeConfig = config
-    this.render(null, CONSTANTS.CHANGE_THEME)
+    // 检查改变的是否是节点大小无关的主题属性
+    let res = checkIsNodeSizeIndependenceConfig(config)
+    this.render(null, res ? '' : CONSTANTS.CHANGE_THEME)
  }

  //  获取自定义主题配置
@@ -285,7 +191,7 @@ class MindMap {
    this.opt.layout = layout
    this.view.reset()
    this.renderer.setLayout()
-    this.render()
+    this.render(null, CONSTANTS.CHANGE_LAYOUT)
  }

  //  执行命令
@@ -298,8 +204,12 @@ class MindMap {
    this.execCommand('CLEAR_ACTIVE_NODE')
    this.command.clearHistory()
    this.command.addHistory()
-    this.renderer.renderTree = data
-    this.reRender()
+    if (this.richText) {
+      this.renderer.renderTree = this.richText.handleSetData(data)
+    } else {
+      this.renderer.renderTree = data
+    }
+    this.reRender(() => {}, CONSTANTS.SET_DATA)
  }

  //  动态设置思维导图数据，包括节点数据、布局、主题、视图
@@ -325,7 +235,7 @@ class MindMap {

  //  获取思维导图数据，节点树、主题、布局等
  getData(withConfig) {
-    let nodeData = this.command.removeDataUid(this.command.getCopyData())
+    let nodeData = this.command.getCopyData()
    let data = {}
    if (withConfig) {
      data = {
@@ -451,6 +361,21 @@ class MindMap {
      pluginOpt: plugin.pluginOpt
    })
  }
+
+  // 销毁
+  destroy() {
+    // 移除插件
+    [...MindMap.pluginList].forEach((plugin) => {
+      this[plugin.instanceName] = null
+    })
+    // 解绑事件
+    this.event.unbind()
+    // 移除画布节点
+    this.svg.remove()
+    // 去除给容器元素设置的背景样式
+    Style.removeBackgroundStyle(this.el)
+    this.el = null
+  }
 }

 // 插件列表
--- a/simple-mind-map/package-lock.json
+++ b/simple-mind-map/package-lock.json
@@ -1,15 +1,14 @@
 {
  "name": "simple-mind-map",
-  "version": "0.4.7",
+  "version": "0.6.7",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
-      "version": "0.4.7",
+      "version": "0.6.7",
      "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",
@@ -160,7 +159,8 @@
    "node_modules/@types/raf": {
      "version": "3.4.0",
      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
-      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw=="
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
    },
    "node_modules/@types/unist": {
      "version": "2.0.6",
@@ -305,6 +305,7 @@
      "version": "3.0.10",
      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
      "dependencies": {
        "@babel/runtime": "^7.12.5",
        "@types/raf": "^3.4.0",
@@ -381,6 +382,7 @@
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.1.tgz",
      "integrity": "sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww==",
      "hasInstallScript": true,
+      "optional": true,
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/core-js"
@@ -1813,7 +1815,8 @@
    "node_modules/performance-now": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
    },
    "node_modules/prelude-ls": {
      "version": "1.2.1",
@@ -1908,6 +1911,7 @@
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
      "dependencies": {
        "performance-now": "^2.1.0"
      }
@@ -1982,6 +1986,7 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
      "engines": {
        "node": ">= 0.8.15"
      }
@@ -2075,6 +2080,7 @@
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true,
      "engines": {
        "node": ">=0.1.14"
      }
@@ -2127,6 +2133,7 @@
      "version": "6.0.3",
      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
      "engines": {
        "node": ">=12.0.0"
      }
@@ -2386,7 +2393,8 @@
    "@types/raf": {
      "version": "3.4.0",
      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
-      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw=="
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
    },
    "@types/unist": {
      "version": "2.0.6",
@@ -2489,6 +2497,7 @@
      "version": "3.0.10",
      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
      "requires": {
        "@babel/runtime": "^7.12.5",
        "@types/raf": "^3.4.0",
@@ -2544,7 +2553,8 @@
    "core-js": {
      "version": "3.27.1",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.1.tgz",
-      "integrity": "sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww=="
+      "integrity": "sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww==",
+      "optional": true
    },
    "core-util-is": {
      "version": "1.0.3",
@@ -3511,7 +3521,8 @@
    "performance-now": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
    },
    "prelude-ls": {
      "version": "1.2.1",
@@ -3576,6 +3587,7 @@
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
      "requires": {
        "performance-now": "^2.1.0"
      }
@@ -3630,7 +3642,8 @@
    "rgbcolor": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
-      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw=="
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true
    },
    "rimraf": {
      "version": "3.0.2",
@@ -3691,7 +3704,8 @@
    "stackblur-canvas": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
-      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ=="
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true
    },
    "string_decoder": {
      "version": "1.1.1",
@@ -3728,7 +3742,8 @@
    "svg-pathdata": {
      "version": "6.0.3",
      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
-      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw=="
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true
    },
    "text-segmentation": {
      "version": "1.0.3",
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.5.6",
+  "version": "0.6.7",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
@@ -25,7 +25,6 @@
  "__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",
--- a/simple-mind-map/src/View.js
+++ b/simple-mind-map/src/View.js
@@ -1,206 +0,0 @@
-import { CONSTANTS } from './utils/constant'
-
-//  视图操作类
-class View {
-  //  构造函数
-  constructor(opt = {}) {
-    this.opt = opt
-    this.mindMap = this.opt.mindMap
-    this.scale = 1
-    this.sx = 0
-    this.sy = 0
-    this.x = 0
-    this.y = 0
-    this.firstDrag = true
-    this.setTransformData(this.mindMap.opt.viewData)
-    this.bind()
-  }
-
-  //  绑定
-  bind() {
-    // 快捷键
-    this.mindMap.keyCommand.addShortcut('Control+=', () => {
-      this.enlarge()
-    })
-    this.mindMap.keyCommand.addShortcut('Control+-', () => {
-      this.narrow()
-    })
-    this.mindMap.keyCommand.addShortcut('Control+Enter', () => {
-      this.reset()
-    })
-    this.mindMap.svg.on('dblclick', () => {
-      this.reset()
-    })
-    // 拖动视图
-    this.mindMap.event.on('mousedown', () => {
-      this.sx = this.x
-      this.sy = this.y
-    })
-    this.mindMap.event.on('drag', (e, event) => {
-      if (e.ctrlKey) {
-        // 按住ctrl键拖动为多选
-        return
-      }
-      if (this.firstDrag) {
-        this.firstDrag = false
-        // 清除激活节点
-        if (this.mindMap.renderer.activeNodeList.length > 0) {
-          this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
-        }
-      }
-      this.x = this.sx + event.mousemoveOffset.x
-      this.y = this.sy + event.mousemoveOffset.y
-      this.transform()
-    })
-    this.mindMap.event.on('mouseup', () => {
-      this.firstDrag = true
-    })
-    // 放大缩小视图
-    this.mindMap.event.on('mousewheel', (e, dir) => {
-      if (this.mindMap.opt.customHandleMousewheel && typeof this.mindMap.opt.customHandleMousewheel === 'function') {
-        return this.mindMap.opt.customHandleMousewheel(e)
-      }
-      if (this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM) {
-        switch (dir) {
-          // 鼠标滚轮，向上和向左，都是缩小
-          case CONSTANTS.DIR.UP:
-          case CONSTANTS.DIR.LEFT:
-            this.narrow()
-            break
-          // 鼠标滚轮，向下和向右，都是放大
-          case CONSTANTS.DIR.DOWN:
-          case CONSTANTS.DIR.RIGHT:
-            this.enlarge()
-            break
-        }
-      } else {
-        switch (dir){
-          // 上移
-          case CONSTANTS.DIR.DOWN:
-            this.translateY(-this.mindMap.opt.mousewheelMoveStep)
-            break
-          // 下移
-          case CONSTANTS.DIR.UP:
-            this.translateY(this.mindMap.opt.mousewheelMoveStep)
-            break
-          // 右移
-          case CONSTANTS.DIR.LEFT:
-            this.translateX(-this.mindMap.opt.mousewheelMoveStep)
-            break
-          // 左移
-          case CONSTANTS.DIR.RIGHT:
-            this.translateX(this.mindMap.opt.mousewheelMoveStep)
-            break
-        }
-      }
-    })
-  }
-
-  //  获取当前变换状态数据
-  getTransformData() {
-    return {
-      transform: this.mindMap.draw.transform(),
-      state: {
-        scale: this.scale,
-        x: this.x,
-        y: this.y,
-        sx: this.sx,
-        sy: this.sy
-      }
-    }
-  }
-
-  //  动态设置变换状态数据
-  setTransformData(viewData) {
-    if (viewData) {
-      Object.keys(viewData.state).forEach(prop => {
-        this[prop] = viewData.state[prop]
-      })
-      this.mindMap.draw.transform({
-        ...viewData.transform
-      })
-      this.mindMap.emit('view_data_change', this.getTransformData())
-      this.mindMap.emit('scale', this.scale)
-    }
-  }
-
-  //  平移x,y方向
-  translateXY(x, y) {
-    this.x += x
-    this.y += y
-    this.transform()
-  }
-
-  //  平移x方向
-  translateX(step) {
-    this.x += step
-    this.transform()
-  }
-
-  //  平移x方式到
-  translateXTo(x) {
-    this.x = x
-    this.transform()
-  }
-
-  //  平移y方向
-  translateY(step) {
-    this.y += step
-    this.transform()
-  }
-
-  //  平移y方向到
-  translateYTo(y) {
-    this.y = y
-    this.transform()
-  }
-
-  //   应用变换
-  transform() {
-    this.mindMap.draw.transform({
-      scale: this.scale,
-      // origin: 'center center',
-      translate: [this.x, this.y]
-    })
-    this.mindMap.emit('view_data_change', this.getTransformData())
-  }
-
-  //  恢复
-  reset() {
-    let scaleChange = this.scale !== 1
-    this.scale = 1
-    this.x = 0
-    this.y = 0
-    this.transform()
-    if (scaleChange) {
-      this.mindMap.emit('scale', this.scale)
-    }
-  }
-
-  //  缩小
-  narrow() {
-    if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
-      this.scale -= this.mindMap.opt.scaleRatio
-    } else {
-      this.scale = 0.1
-    }
-    this.transform()
-    this.mindMap.emit('scale', this.scale)
-  }
-
-  //  放大
-  enlarge() {
-    this.scale += this.mindMap.opt.scaleRatio
-    this.transform()
-    this.mindMap.emit('scale', this.scale)
-  }
-
-  //  设置缩放
-  setScale(scale) {
-    this.scale = scale
-    this.transform()
-    this.mindMap.emit('scale', this.scale)
-  }
-}
-
-export default View
--- a/simple-mind-map/src/constants/constant.js
+++ b/simple-mind-map/src/constants/constant.js
@@ -28,34 +28,6 @@ export const themeList = [
    name: '默认',
    value: 'default',
  },
-  {
-    name: '脑图经典',
-    value: 'classic',
-  },
-  {
-    name: '小黄人',
-    value: 'minions',
-  },
-  {
-    name: '粉红葡萄',
-    value: 'pinkGrape',
-  },
-  {
-    name: '薄荷',
-    value: 'mint',
-  },
-  {
-    name: '金色vip',
-    value: 'gold',
-  },
-  {
-    name: '活力橙',
-    value: 'vitalityOrange',
-  },
-  {
-    name: '绿叶',
-    value: 'greenLeaf',
-  },
  {
    name: '暗色2',
    value: 'dark2',
@@ -72,10 +44,6 @@ export const themeList = [
    name: '脑图经典3',
    value: 'classic3',
  },
-  {
-    name: '脑图经典4',
-    value: 'classic4',
-  },
  {
    name: '经典绿',
    value: 'classicGreen',
@@ -112,6 +80,38 @@ export const themeList = [
    name: '浪漫紫',
    value: 'romanticPurple',
  },
+  {
+    name: '粉红葡萄',
+    value: 'pinkGrape',
+  },
+  {
+    name: '薄荷',
+    value: 'mint',
+  },
+  {
+    name: '金色vip',
+    value: 'gold',
+  },
+  {
+    name: '活力橙',
+    value: 'vitalityOrange',
+  },
+  {
+    name: '绿叶',
+    value: 'greenLeaf',
+  },
+  {
+    name: '脑图经典',
+    value: 'classic',
+  },
+  {
+    name: '脑图经典4',
+    value: 'classic4',
+  },
+  {
+    name: '小黄人',
+    value: 'minions',
+  },
  {
    name: '简约黑',
    value: 'simpleBlack',
@@ -139,12 +139,26 @@ export const themeList = [
  {
    name: '黑金',
    value: 'blackGold',
+  },
+  {
+    name: '牛油果',
+    value: 'avocado',
+  },
+  {
+    name: '秋天',
+    value: 'autumn',
+  },
+  {
+    name: '橙汁',
+    value: 'orangeJuice',
  }
 ]

 // 常量
 export const CONSTANTS = {
  CHANGE_THEME: 'changeTheme',
+  CHANGE_LAYOUT: 'changeLayout',
+  SET_DATA: 'setData',
  TRANSFORM_TO_NORMAL_NODE: 'transformAllNodesToNormalNode',
  MODE: {
    READONLY: 'readonly',
@@ -157,7 +171,8 @@ export const CONSTANTS = {
    CATALOG_ORGANIZATION: 'catalogOrganization',
    TIMELINE: 'timeline',
    TIMELINE2: 'timeline2',
-    FISHBONE: 'fishbone'
+    FISHBONE: 'fishbone',
+    VERTICAL_TIMELINE: 'verticalTimeline'
  },
  DIR: {
    UP: 'up',
@@ -193,8 +208,10 @@ export const CONSTANTS = {
    BOTTOM: 'bottom',
    CENTER: 'center'
  },
-  TIMELINE_DIR: {
+  LAYOUT_GROW_DIR: {
+    LEFT: 'left',
    TOP: 'top',
+    RIGHT: 'right',
    BOTTOM: 'bottom'
  }
 }
@@ -233,6 +250,10 @@ export const layoutList = [
    name: '时间轴2',
    value: CONSTANTS.LAYOUT.TIMELINE2,
  },
+  {
+    name: '竖向时间轴',
+    value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
+  },
  {
    name: '鱼骨图',
    value: CONSTANTS.LAYOUT.FISHBONE,
@@ -245,5 +266,26 @@ export const layoutValueList = [
  CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE,
  CONSTANTS.LAYOUT.TIMELINE,
  CONSTANTS.LAYOUT.TIMELINE2,
+  CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
  CONSTANTS.LAYOUT.FISHBONE
+]
+
+// 节点数据中非样式的字段
+export const nodeDataNoStylePropList = [
+  'text',
+  'image',
+  'imageTitle',
+  'imageSize',
+  'icon',
+  'tag',
+  'hyperlink',
+  'hyperlinkTitle',
+  'note',
+  'expand',
+  'isActive',
+  'generalization',
+  'richText',
+  'resetRichText',
+  'uid',
+  'activeStyle'
 ]
--- a/simple-mind-map/src/constants/defaultOptions.js
+++ b/simple-mind-map/src/constants/defaultOptions.js
@@ -0,0 +1,126 @@
+import { CONSTANTS } from './constant'
+
+// 默认选项配置
+export const defaultOpt = {
+  // 是否只读
+  readonly: false,
+  // 布局
+  layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
+  // 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
+  fishboneDeg: 45,
+  // 主题
+  theme: 'default', // 内置主题：default（默认主题）
+  // 主题配置，会和所选择的主题进行合并
+  themeConfig: {},
+  // 放大缩小的增量比例
+  scaleRatio: 0.2,
+  // 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点
+  mouseScaleCenterUseMousePosition: true,
+  // 最多显示几个标签
+  maxTag: 5,
+  // 导出图片时的内边距
+  exportPadding: 20,
+  // 展开收缩按钮尺寸
+  expandBtnSize: 20,
+  // 节点里图片和文字的间距
+  imgTextMargin: 5,
+  // 节点里各种文字信息的间距，如图标和文字的间距
+  textContentMargin: 2,
+  // 多选节点时鼠标移动到边缘时的画布移动偏移量
+  selectTranslateStep: 3,
+  // 多选节点时鼠标移动距边缘多少距离时开始偏移
+  selectTranslateLimit: 20,
+  // 自定义节点备注内容显示
+  customNoteContentShow: null,
+  /*
+          {
+              show(){},
+              hide(){}
+          }
+      */
+  // 是否开启节点自由拖拽
+  enableFreeDrag: false,
+  // 水印配置
+  watermarkConfig: {
+    text: '',
+    lineSpacing: 100,
+    textSpacing: 100,
+    angle: 30,
+    textStyle: {
+      color: '#999',
+      opacity: 0.5,
+      fontSize: 14
+    }
+  },
+  // 达到该宽度文本自动换行
+  textAutoWrapWidth: 500,
+  // 自定义鼠标滚轮事件处理
+  // 可以传一个函数，回调参数为事件对象
+  customHandleMousewheel: null,
+  // 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
+  mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM, // zoom（放大缩小）、move（上下移动）
+  // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
+  mousewheelMoveStep: 100,
+  // 当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来
+  mousewheelZoomActionReverse: false,
+  // 默认插入的二级节点的文字
+  defaultInsertSecondLevelNodeText: '二级节点',
+  // 默认插入的二级以下节点的文字
+  defaultInsertBelowSecondLevelNodeText: '分支主题',
+  // 展开收起按钮的颜色
+  expandBtnStyle: {
+    color: '#808080',
+    fill: '#fff'
+  },
+  // 自定义展开收起按钮的图标
+  expandBtnIcon: {
+    open: '', // svg字符串
+    close: ''
+  },
+  // 是否只有当鼠标在画布内才响应快捷键事件
+  enableShortcutOnlyWhenMouseInSvg: true,
+  // 初始根节点的位置
+  initRootNodePosition: null,
+  // 导出png、svg、pdf时的图形内边距
+  exportPaddingX: 10,
+  exportPaddingY: 10,
+  // 节点文本编辑框的z-index
+  nodeTextEditZIndex: 3000,
+  // 节点备注浮层的z-index
+  nodeNoteTooltipZIndex: 3000,
+  // 是否在点击了画布外的区域时结束节点文本的编辑状态
+  isEndNodeTextEditOnClickOuter: true,
+  // 最大历史记录数
+  maxHistoryCount: 1000,
+  // 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示
+  alwaysShowExpandBtn: false,
+  // 扩展节点可插入的图标
+  iconList: [
+    // {
+    //   name: '',// 分组名称
+    //   type: '',// 分组的值
+    //   list: [// 分组下的图标列表
+    //     {
+    //       name: '',// 图标名称
+    //       icon:''// 图标，可以传svg或图片
+    //     }
+    //   ]
+    // }
+  ],
+  // 节点最大缓存数量
+  maxNodeCacheCount: 1000,
+  // 关联线默认文字
+  defaultAssociativeLineText: '关联',
+  // 思维导图适应画布大小时的内边距
+  fitPadding: 50,
+  // 是否开启按住ctrl键多选节点功能
+  enableCtrlKeyNodeSelection: true,
+  // 设置为左键多选节点，右键拖动画布
+  useLeftKeySelectionRightKeyDrag: false,
+  // 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例
+  beforeTextEdit: null,
+  // 是否开启自定义节点内容
+  isUseCustomNodeContent: false,
+  // 自定义返回节点内容的方法
+  customCreateNodeContent: null
+}
--- a/simple-mind-map/src/core/command/Command.js
+++ b/simple-mind-map/src/core/command/Command.js
@@ -1,4 +1,4 @@
-import { copyRenderTree, simpleDeepClone, nextTick } from './utils'
+import { copyRenderTree, simpleDeepClone, nextTick } from '../../utils'

 //  命令类
 class Command {
@@ -89,7 +89,7 @@ class Command {
      this.history.shift()
    }
    this.activeHistoryIndex = this.history.length - 1
-    this.mindMap.emit('data_change', this.removeDataUid(data))
+    this.mindMap.emit('data_change', data)
    this.mindMap.emit(
      'back_forward',
      this.activeHistoryIndex,
@@ -110,7 +110,7 @@ class Command {
        this.history.length
      )
      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
-      this.mindMap.emit('data_change', this.removeDataUid(data))
+      this.mindMap.emit('data_change', data)
      return data
    }
  }
@@ -125,7 +125,7 @@ class Command {
      this.activeHistoryIndex += step
      this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
-      this.mindMap.emit('data_change', this.removeDataUid(data))
+      this.mindMap.emit('data_change', data)
      return data
    }
  }
--- a/simple-mind-map/src/core/command/KeyCommand.js
+++ b/simple-mind-map/src/core/command/KeyCommand.js
@@ -1,4 +1,4 @@
-import { keyMap } from './utils/keyMap'
+import { keyMap } from './keyMap'
 //  快捷按键、命令处理类
 export default class KeyCommand {
  //  构造函数
@@ -46,7 +46,7 @@ export default class KeyCommand {
      if (this.mindMap.richText && this.mindMap.richText.showTextEdit) {
        return
      }
-      if (this.mindMap.renderer.textEdit.showTextEdit) {
+      if (this.mindMap.renderer.textEdit.showTextEdit || (this.mindMap.associativeLine && this.mindMap.associativeLine.showTextEdit)) {
        return
      }
      this.isInSvg = false
--- a/simple-mind-map/src/core/command/keyMap.js
+++ b/simple-mind-map/src/core/command/keyMap.js
--- a/simple-mind-map/src/core/event/Event.js
+++ b/simple-mind-map/src/core/event/Event.js
@@ -1,5 +1,5 @@
 import EventEmitter from 'eventemitter3'
-import { CONSTANTS } from './utils/constant'
+import { CONSTANTS } from '../../constants/constant'

 //  事件类
 class Event extends EventEmitter {
@@ -9,6 +9,7 @@ class Event extends EventEmitter {
    this.opt = opt
    this.mindMap = opt.mindMap
    this.isLeftMousedown = false
+    this.isRightMousedown = false
    this.mousedownPos = {
      x: 0,
      y: 0
@@ -89,6 +90,8 @@ class Event extends EventEmitter {
    // 鼠标左键
    if (e.which === 1) {
      this.isLeftMousedown = true
+    } else if (e.which === 3) {
+      this.isRightMousedown = true
    }
    this.mousedownPos.x = e.clientX
    this.mousedownPos.y = e.clientY
@@ -97,12 +100,17 @@ class Event extends EventEmitter {

  //  鼠标移动事件
  onMousemove(e) {
+    let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
    this.mousemovePos.x = e.clientX
    this.mousemovePos.y = e.clientY
    this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
    this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
    this.emit('mousemove', e, this)
-    if (this.isLeftMousedown) {
+    if (
+      useLeftKeySelectionRightKeyDrag
+        ? this.isRightMousedown
+        : this.isLeftMousedown
+    ) {
      e.preventDefault()
      this.emit('drag', e, this)
    }
@@ -111,6 +119,7 @@ class Event extends EventEmitter {
  //  鼠标松开事件
  onMouseup(e) {
    this.isLeftMousedown = false
+    this.isRightMousedown = false
    this.emit('mouseup', e, this)
  }

@@ -131,7 +140,13 @@ class Event extends EventEmitter {
      if ((e.wheelDeltaX || e.detail) > 0) dir = CONSTANTS.DIR.LEFT
      if ((e.wheelDeltaX || e.detail) < 0) dir = CONSTANTS.DIR.RIGHT
    }
-    this.emit('mousewheel', e, dir, this)
+    // 判断是否是触控板
+    let isTouchPad = false
+    // mac、windows
+    if (e.wheelDeltaY === e.deltaY * -3 || Math.abs(e.wheelDeltaY) <= 10) {
+      isTouchPad = true
+    }
+    this.emit('mousewheel', e, dir, this, isTouchPad)
  }

  //  鼠标右键菜单事件
--- a/simple-mind-map/src/core/render/Render.js
+++ b/simple-mind-map/src/core/render/Render.js
@@ -1,15 +1,16 @@
 import merge from 'deepmerge'
-import LogicalStructure from './layouts/LogicalStructure'
-import MindMap from './layouts/MindMap'
-import CatalogOrganization from './layouts/CatalogOrganization'
-import OrganizationStructure from './layouts/OrganizationStructure'
-import Timeline from './layouts/Timeline'
-import Fishbone from './layouts/Fishbone'
+import LogicalStructure from '../../layouts/LogicalStructure'
+import MindMap from '../../layouts/MindMap'
+import CatalogOrganization from '../../layouts/CatalogOrganization'
+import OrganizationStructure from '../../layouts/OrganizationStructure'
+import Timeline from '../../layouts/Timeline'
+import VerticalTimeline from '../../layouts/VerticalTimeline'
+import Fishbone from '../../layouts/Fishbone'
 import TextEdit from './TextEdit'
-import { copyNodeTree, simpleDeepClone, walk } from './utils'
-import { shapeList } from './Shape'
-import { lineStyleProps } from './themes/default'
-import { CONSTANTS } from './utils/constant'
+import { copyNodeTree, simpleDeepClone, walk, bfsWalk } from '../../utils'
+import { shapeList } from './node/Shape'
+import { lineStyleProps } from '../../themes/default'
+import { CONSTANTS } from '../../constants/constant'

 // 布局列表
 const layouts = {
@@ -25,6 +26,8 @@ const layouts = {
  [CONSTANTS.LAYOUT.TIMELINE]: Timeline,
  // 时间轴2
  [CONSTANTS.LAYOUT.TIMELINE2]: Timeline,
+  // 竖向时间轴
+  [CONSTANTS.LAYOUT.VERTICAL_TIMELINE]: VerticalTimeline,
  // 鱼骨图
  [CONSTANTS.LAYOUT.FISHBONE]: Fishbone,
 }
@@ -79,9 +82,15 @@ class Render {
  //   绑定事件
  bindEvent() {
    // 点击事件
-    this.mindMap.on('draw_click', () => {
+    this.mindMap.on('draw_click', (e) => {
      // 清除激活状态
-      if (this.activeNodeList.length > 0) {
+      let isTrueClick = true
+      let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
+      if (useLeftKeySelectionRightKeyDrag) {
+        let mousedownPos = this.mindMap.event.mousedownPos
+        isTrueClick = Math.abs(e.clientX - mousedownPos.x) <= 5 && Math.abs(e.clientY - mousedownPos.y) <= 5
+      }
+      if (isTrueClick && this.activeNodeList.length > 0) {
        this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
      }
    })
@@ -186,6 +195,9 @@ class Render {
    // 设置节点形状
    this.setNodeShape = this.setNodeShape.bind(this)
    this.mindMap.command.add('SET_NODE_SHAPE', this.setNodeShape)
+    // 定位节点
+    this.goTargetNode = this.goTargetNode.bind(this)
+    this.mindMap.command.add('GO_TARGET_NODE', this.goTargetNode)
  }

  //  注册快捷键
@@ -250,7 +262,6 @@ class Render {

  //   渲染
  render(callback = () => {}, source) {
-    let t = Date.now()
    // 如果当前还没有渲染完毕，不再触发渲染
    if (this.isRendering) {
      // 等待当前渲染完毕后再进行一次渲染
@@ -266,7 +277,6 @@ class Render {
    // 重新渲染需要清除激活状态
    if (this.reRender) {
      this.clearActive()
-      this.layout.clearNodePool()
    }
    // 计算布局
    this.layout.doLayout(root => {
@@ -282,25 +292,18 @@ class Render {
      // 更新根节点
      this.root = root
      // 渲染节点
-      const onEnd = () => {
+      this.root.render(() => {
        this.isRendering = false
        this.mindMap.emit('node_tree_render_end')
        callback && callback()
        if (this.hasWaitRendering) {
          this.hasWaitRendering = false
          this.render(callback, source)
-        }
-      }
-      let { enableNodeTransitionMove, nodeTransitionMoveDuration } =
-      this.mindMap.opt
-      this.root.render(() => {
-        let dur = Date.now() - t
-        if (enableNodeTransitionMove && dur <= nodeTransitionMoveDuration) {
-          setTimeout(() => {
-            onEnd()
-          }, nodeTransitionMoveDuration - dur);
        } else {
-          onEnd()
+          // 触发一次保存，因为修改了渲染树的数据
+          if (this.mindMap.richText && [CONSTANTS.CHANGE_THEME, CONSTANTS.SET_DATA].includes(source)) {
+            this.mindMap.command.addHistory()
+          }
        }
      })
    })
@@ -366,6 +369,8 @@ class Render {
        if (!node.nodeData.data.isActive) {
          node.nodeData.data.isActive = true
          this.addActiveNode(node)
+          // 激活节点需要显示展开收起按钮
+          node.showExpandBtn()
          setTimeout(() => {
            node.updateNodeShape()
          }, 0)
@@ -413,6 +418,9 @@ class Render {
    let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
    let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
    let first = list[0]
+    if (first.isGeneralization) {
+      return
+    }
    if (first.isRoot) {
      this.insertChildNode(openEdit, appointNodes, appointData)
    } else {
@@ -421,11 +429,14 @@ class Render {
        first.parent.destroy()
      }
      let index = this.getNodeIndex(first)
+      let isRichText = !!this.mindMap.richText
      first.parent.nodeData.children.splice(index + 1, 0, {
        inserting: openEdit,
        data: {
          text: text,
          expand: true,
+          richText: isRichText,
+          resetRichText: isRichText,
          ...(appointData || {})
        },
        children: []
@@ -443,15 +454,21 @@ class Render {
    let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
    let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
    list.forEach(node => {
+      if (node.isGeneralization) {
+        return
+      }
      if (!node.nodeData.children) {
        node.nodeData.children = []
      }
      let text = node.isRoot ? defaultInsertSecondLevelNodeText : defaultInsertBelowSecondLevelNodeText
+      let isRichText = !!this.mindMap.richText
      node.nodeData.children.push({
        inserting: openEdit,
        data: {
          text: text,
          expand: true,
+          richText: isRichText,
+          resetRichText: isRichText,
          ...(appointData || {})
        },
        children: []
@@ -675,11 +692,11 @@ class Render {
    if (node.isRoot) {
      return
    }
-    let copyData = copyNodeTree({}, node, false, true)
+    // let copyData = copyNodeTree({}, node, false, true)
    this.removeActiveNode(node)
    this.removeOneNode(node)
    this.mindMap.emit('node_active', null, this.activeNodeList)
-    toNode.nodeData.children.push(copyData)
+    toNode.nodeData.children.push(node.nodeData)
    this.mindMap.render()
    if (toNode.isRoot) {
      toNode.destroy()
@@ -735,6 +752,12 @@ class Render {
    this.setNodeData(node, {
      isActive: active
    })
+    // 切换激活状态，需要切换展开收起按钮的显隐
+    if (active) {
+      node.showExpandBtn()
+    } else {
+      node.hideExpandBtn()
+    }
    node.updateNodeShape()
  }

@@ -749,14 +772,14 @@ class Render {
        item.render()
      })
      node.renderLine()
-      node.updateExpandBtnNode()
+      // node.updateExpandBtnNode()
    } else {
      // 收缩
      node.children.forEach(item => {
        item.remove()
      })
      node.removeLine()
-      node.updateExpandBtnNode()
+      // node.updateExpandBtnNode()
    }
    this.mindMap.render()
  }
@@ -845,13 +868,14 @@ class Render {
  }

  //  设置节点图片
-  setNodeImage(node, { url, title, width, height }) {
+  setNodeImage(node, { url, title, width, height, custom = false }) {
    this.setNodeDataRender(node, {
      image: url,
      imageTitle: title || '',
      imageSize: {
        width,
-        height
+        height,
+        custom
      }
    })
  }
@@ -964,6 +988,19 @@ class Render {
    })
  }

+  // 定位到指定节点
+  goTargetNode(node) {
+    let uid = typeof node === 'string' ? node : node.nodeData.data.uid
+    if (!uid) return
+    this.expandToNodeUid(uid, () => {
+      let targetNode = this.findNodeByUid(uid)
+      if (targetNode) {
+        targetNode.active()
+        this.moveNodeToCenter(targetNode)
+      } 
+    })
+  }
+
  //  更新节点数据
  setNodeData(node, data) {
    Object.keys(data).forEach(key => {
@@ -1000,6 +1037,44 @@ class Render {
    this.mindMap.view.translateY(offsetY)
    this.mindMap.view.setScale(1)
  }
+
+  // 展开到指定uid的节点 
+  expandToNodeUid(uid, callback = () => {}) {
+    let parentsList = []
+    const cache = {}
+    bfsWalk(this.renderTree, (node, parent) => {
+      if (node.data.uid === uid) {
+        parentsList = parent ? [...cache[parent.data.uid], parent] : []
+        return 'stop'
+      } else {
+        cache[node.data.uid] = parent ? [...cache[parent.data.uid], parent]: []
+      }
+    })
+    let needRender = false
+    parentsList.forEach((node) => {
+      if (!node.data.expand) {
+        needRender = true
+        node.data.expand = true
+      }
+    })
+    if (needRender) {
+      this.mindMap.render(callback)
+    } else {
+      callback()
+    }
+  }
+
+  // 根据uid找到对应的节点实例
+  findNodeByUid(uid) {
+    let res = null
+    walk(this.root, null, (node) => {
+      if (node.nodeData.data.uid === uid) {
+        res = node
+        return true
+      } 
+    })
+    return res
+  }
 }

 export default Render
--- a/simple-mind-map/src/core/render/TextEdit.js
+++ b/simple-mind-map/src/core/render/TextEdit.js
@@ -1,4 +1,4 @@
-import { getStrWithBrFromHtml, checkNodeOuter } from './utils'
+import { getStrWithBrFromHtml, checkNodeOuter } from '../../utils'

 //  节点文字编辑类
 export default class TextEdit {
@@ -65,13 +65,28 @@ export default class TextEdit {
  }

  //  显示文本编辑框
-  show(node) {
+  // isInserting：是否是刚创建的节点
+  async show(node, e, isInserting = false) {
+    // 使用了自定义节点内容那么不响应编辑事件
+    if (node.isUseCustomNodeContent()) {
+      return
+    }
+    let { beforeTextEdit } = this.mindMap.opt
+    if (typeof beforeTextEdit === 'function') {
+      let isShow = false
+      try {
+        isShow = await beforeTextEdit(node, isInserting)
+      } catch (error) {
+        isShow = false
+      }
+      if (!isShow) return
+    }
    this.currentNode = node
    let { offsetLeft, offsetTop } = checkNodeOuter(this.mindMap, node)
    this.mindMap.view.translateXY(offsetLeft, offsetTop)
    let rect = node._textData.node.node.getBoundingClientRect()
    if (this.mindMap.richText) {
-      this.mindMap.richText.showEditText(node, rect)
+      this.mindMap.richText.showEditText(node, rect, isInserting)
      return
    }
    this.showEditTextBox(node, rect)
@@ -110,7 +125,8 @@ export default class TextEdit {
    let lineHeight = node.style.merge('lineHeight')
    let fontSize = node.style.merge('fontSize')
    let textLines = (this.cacheEditingText || node.nodeData.data.text).split(/\n/gim)
-    node.style.domText(this.textEditNode, scale, textLines.length)
+    let isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true'
+    node.style.domText(this.textEditNode, scale, isMultiLine)
    this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
    this.textEditNode.innerHTML = textLines.join('<br>')
    this.textEditNode.style.minWidth = rect.width + 10 + 'px'
@@ -119,8 +135,8 @@ export default class TextEdit {
    this.textEditNode.style.top = rect.top + 'px'
    this.textEditNode.style.display = 'block'
    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth * scale + 'px'
-    if (textLines.length > 1 && lineHeight !== 1) {
-      this.textEditNode.style.transform = `translateY(${-((lineHeight * fontSize - fontSize) / 2 - 2) * scale}px)`
+    if (isMultiLine && lineHeight !== 1) {
+      this.textEditNode.style.transform = `translateY(${-((lineHeight * fontSize - fontSize) / 2) * scale}px)`
    }
    this.showTextEdit = true
    // 选中文本
--- a/simple-mind-map/src/core/render/node/Node.js
+++ b/simple-mind-map/src/core/render/node/Node.js
@@ -1,12 +1,12 @@
 import Style from './Style'
 import Shape from './Shape'
-import { asyncRun } from './utils'
-import { G } from '@svgdotjs/svg.js'
-import nodeGeneralizationMethods from './utils/nodeGeneralization'
-import nodeExpandBtnMethods from './utils/nodeExpandBtn'
-import nodeCommandWrapsMethods from './utils/nodeCommandWraps'
-import nodeCreateContentsMethods from './utils/nodeCreateContents'
-import { CONSTANTS } from './utils/constant'
+import { asyncRun, nodeToHTML } from '../../../utils'
+import { G, Rect, ForeignObject, SVG } from '@svgdotjs/svg.js'
+import nodeGeneralizationMethods from './nodeGeneralization'
+import nodeExpandBtnMethods from './nodeExpandBtn'
+import nodeCommandWrapsMethods from './nodeCommandWraps'
+import nodeCreateContentsMethods from './nodeCreateContents'
+import { CONSTANTS } from '../../../constants/constant'

 //  节点类
 class Node {
@@ -59,6 +59,7 @@ class Node {
    this.group = null
    this.shapeNode = null // 节点形状节点
    // 节点内容对象
+    this._customNodeContent = null
    this._imgData = null
    this._iconData = null
    this._textData = null
@@ -67,12 +68,16 @@ class Node {
    this._noteData = null
    this.noteEl = null
    this._expandBtn = null
+    this._lastExpandBtnType = null
+    this._showExpandBtn = false
    this._openExpandNode = null
    this._closeExpandNode = null
    this._fillExpandNode = null
    this._lines = []
    this._generalizationLine = null
    this._generalizationNode = null
+    this._unVisibleRectRegionNode = null
+    this._isMouseenter = false
    // 尺寸信息
    this._rectInfo = {
      imgContentWidth: 0,
@@ -150,6 +155,13 @@ class Node {

  //  创建节点的各个内容对象数据
  createNodeData() {
+    // 自定义节点内容
+    let { isUseCustomNodeContent, customCreateNodeContent } = this.mindMap.opt
+    if (isUseCustomNodeContent && customCreateNodeContent) {
+      this._customNodeContent = customCreateNodeContent(this)
+    }
+    // 如果没有返回内容，那么还是使用内置的节点内容
+    if (this._customNodeContent) return
    this._imgData = this.createImgNode()
    this._iconData = this.createIconNode()
    this._textData = this.createTextNode()
@@ -172,6 +184,14 @@ class Node {

  //  计算节点尺寸信息
  getNodeRect() {
+    // 自定义节点内容
+    if (this.isUseCustomNodeContent()) {
+      let rect = this.measureCustomNodeContentSize(this._customNodeContent)
+      return {
+        width: rect.width,
+        height: rect.height
+      }
+    }
    // 宽高
    let imgContentWidth = 0
    let imgContentHeight = 0
@@ -241,17 +261,28 @@ class Node {
  layout() {
    // 清除之前的内容
    this.group.clear()
-    let { width, textContentItemMargin } = this
+    let { width, height, textContentItemMargin } = this
    let { paddingY } = this.getPaddingVale()
    paddingY += this.shapePadding.paddingY
    // 节点形状
    this.shapeNode = this.shapeInstance.createShape()
    this.group.add(this.shapeNode)
    this.updateNodeShape()
+    // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
+    this.renderExpandBtnPlaceholderRect()
    // 概要节点添加一个带所属节点id的类名
    if (this.isGeneralization && this.generalizationBelongNode) {
      this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
    }
+    // 如果存在自定义节点内容，那么使用自定义节点内容
+    if (this.isUseCustomNodeContent()) {
+      let foreignObject = new ForeignObject()
+      foreignObject.width(width)
+      foreignObject.height(height)
+      foreignObject.add(SVG(this._customNodeContent))
+      this.group.add(foreignObject)
+      return
+    }
    // 图片节点
    let imgHeight = 0
    if (this._imgData) {
@@ -325,16 +356,31 @@ class Node {
    this.group.add(textContentNested)
  }

+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnPlaceholderRect() {
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      let { width, height } = this
+      if (!this._unVisibleRectRegionNode) {
+        this._unVisibleRectRegionNode = new Rect()
+        this._unVisibleRectRegionNode.fill({
+          color: 'transparent'
+        })
+      }
+      this.group.add(this._unVisibleRectRegionNode)
+      this.renderer.layout.renderExpandBtnRect(this._unVisibleRectRegionNode, this.expandBtnSize, width, height, this)
+    }
+  }
+
  // 给节点绑定事件
  bindGroupEvent() {
    // 单击事件，选中节点
    this.group.on('click', e => {
+      this.mindMap.emit('node_click', this, e)
      if (this.isMultipleChoice) {
        e.stopPropagation()
        this.isMultipleChoice = false
        return
      }
-      this.mindMap.emit('node_click', this, e)
      this.active(e)
    })
    this.group.on('mousedown', e => {
@@ -345,7 +391,7 @@ class Node {
        e.stopPropagation()
      }
      // 多选和取消多选
-      if (e.ctrlKey) {
+      if (e.ctrlKey && this.mindMap.opt.enableCtrlKeyNodeSelection) {
        this.isMultipleChoice = true
        let isActive = this.nodeData.data.isActive
        if (!isActive)
@@ -373,9 +419,14 @@ class Node {
      this.mindMap.emit('node_mouseup', this, e)
    })
    this.group.on('mouseenter', e => {
+      this._isMouseenter = true
+      // 显示展开收起按钮
+      this.showExpandBtn()
      this.mindMap.emit('node_mouseenter', this, e)
    })
    this.group.on('mouseleave', e => {
+      this._isMouseenter = false
+      this.hideExpandBtn()
      this.mindMap.emit('node_mouseleave', this, e)
    })
    // 双击事件
@@ -389,7 +440,8 @@ class Node {
    // 右键菜单事件
    this.group.on('contextmenu', e => {
      // 按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
-      if (this.mindMap.opt.readonly || e.ctrlKey) {// || this.isGeneralization
+      if (this.mindMap.opt.readonly || e.ctrlKey) {
+        // || this.isGeneralization
        return
      }
      e.stopPropagation()
@@ -423,26 +475,33 @@ class Node {
    if (!this.group) {
      return
    }
-    let { enableNodeTransitionMove, nodeTransitionMoveDuration } =
-      this.mindMap.opt
-    // 需要移除展开收缩按钮
-    if (this._expandBtn && this.nodeData.children.length <= 0) {
-      this.removeExpandBtn()
+    let {
+      alwaysShowExpandBtn
+    } = this.mindMap.opt
+    if (alwaysShowExpandBtn) {
+      // 需要移除展开收缩按钮
+      if (this._expandBtn && this.nodeData.children.length <= 0) {
+        this.removeExpandBtn()
+      } else {
+        // 更新展开收起按钮
+        this.renderExpandBtn()
+      }
    } else {
-      // 更新展开收起按钮
-      this.renderExpandBtn()
+      let { isActive, expand } = this.nodeData.data
+      // 展开状态且非激活状态，且当前鼠标不在它上面，才隐藏
+      if (expand && !isActive && !this._isMouseenter) {
+        this.hideExpandBtn()
+      } else {
+        this.showExpandBtn()
+      }
    }
    // 更新概要
    this.renderGeneralization()
    // 更新节点位置
    let t = this.group.transform()
-    if (!isLayout && enableNodeTransitionMove) {
-      this.group
-        .animate(nodeTransitionMoveDuration)
-        .translate(this.left - t.translateX, this.top - t.translateY)
-    } else {
-      this.group.translate(this.left - t.translateX, this.top - t.translateY)
-    }
+    // 如果节点位置没有变化，则返回
+    if (this.left === t.translateX && this.top === t.translateY) return
+    this.group.translate(this.left - t.translateX, this.top - t.translateY)
  }

  // 重新渲染节点，即重新创建节点内容、计算节点大小、计算节点内容布局、更新展开收起按钮，概要及位置
@@ -464,8 +523,6 @@ class Node {

  //  递归渲染
  render(callback = () => {}) {
-    let { enableNodeTransitionMove, nodeTransitionMoveDuration } =
-      this.mindMap.opt
    // 节点
    // 重新渲染连线
    this.renderLine()
@@ -487,6 +544,10 @@ class Node {
        this.needLayout = false
        this.layout()
      }
+      if (this.needRerenderExpandBtnPlaceholderRect) {
+        this.needRerenderExpandBtnPlaceholderRect = false
+        this.renderExpandBtnPlaceholderRect()
+      }
      this.update()
    }
    // 子节点
@@ -509,20 +570,14 @@ class Node {
        })
      )
    } else {
-      if (enableNodeTransitionMove && !isLayout) {
-        setTimeout(() => {
-          callback()
-        }, nodeTransitionMoveDuration)
-      } else {
-        callback()
-      }
+      callback()
    }
    // 手动插入的节点立即获得焦点并且开启编辑模式
    if (this.nodeData.inserting) {
      delete this.nodeData.inserting
      this.active()
      setTimeout(() => {
-        this.mindMap.emit('node_dblclick', this)
+        this.mindMap.emit('node_dblclick', this, null, true)
      }, 0)
    }
  }
@@ -727,9 +782,10 @@ class Node {

  //  获取padding值
  getPaddingVale() {
+    let { isActive } = this.nodeData.data
    return {
-      paddingX: this.getStyle('paddingX', true, this.nodeData.data.isActive),
-      paddingY: this.getStyle('paddingY', true, this.nodeData.data.isActive)
+      paddingX: this.getStyle('paddingX', true, isActive),
+      paddingY: this.getStyle('paddingY', true, isActive)
    }
  }

@@ -766,6 +822,11 @@ class Node {
  getData(key) {
    return key ? this.nodeData.data[key] || '' : this.nodeData.data
  }
+
+  // 是否存在自定义样式
+  hasCustomStyle() {
+    return this.style.hasCustomStyle()
+  }
 }

 export default Node
--- a/simple-mind-map/src/core/render/node/Shape.js
+++ b/simple-mind-map/src/core/render/node/Shape.js
@@ -1,5 +1,5 @@
 import { Rect, Polygon, Path } from '@svgdotjs/svg.js'
-import { CONSTANTS } from './utils/constant'
+import { CONSTANTS } from '../../../constants/constant'

 //  节点形状类
 export default class Shape {
--- a/simple-mind-map/src/core/render/node/Style.js
+++ b/simple-mind-map/src/core/render/node/Style.js
@@ -1,10 +1,20 @@
-import { tagColorList } from './utils/constant'
+import { tagColorList, nodeDataNoStylePropList } from '../../../constants/constant'
 const rootProp = ['paddingX', 'paddingY']
+const backgroundStyleProps = ['backgroundColor', 'backgroundImage', 'backgroundRepeat', 'backgroundPosition', 'backgroundSize']

 //  样式类
 class Style {
  //   设置背景样式
  static setBackgroundStyle(el, themeConfig) {
+    // 缓存容器元素原本的样式
+    if (!Style.cacheStyle) {
+      Style.cacheStyle = {}
+      let style = window.getComputedStyle(el)
+      backgroundStyleProps.forEach((prop) => {
+        Style.cacheStyle[prop] = style[prop]
+      })
+    }
+    // 设置新样式
    let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig
    el.style.backgroundColor = backgroundColor
    if (backgroundImage) {
@@ -17,6 +27,15 @@ class Style {
    }
  }

+  // 移除背景样式
+  static removeBackgroundStyle(el) {
+    if (!Style.cacheStyle) return
+    backgroundStyleProps.forEach((prop) => {
+      el.style[prop] = Style.cacheStyle[prop]
+    })
+    Style.cacheStyle = null
+  }
+
  //  构造函数
  constructor(ctx) {
    this.ctx = ctx
@@ -109,6 +128,18 @@ class Style {
      })
  }

+  // 生成内联样式
+  createStyleText() {
+    return `
+      color: ${this.merge('color')};
+      font-family: ${this.merge('fontFamily')};
+      font-size: ${this.merge('fontSize') + 'px'};
+      font-weight: ${this.merge('fontWeight')};
+      font-style: ${this.merge('fontStyle')};
+      text-decoration: ${this.merge('textDecoration')}
+    `
+  }
+
  // 获取文本样式
  getTextFontStyle() {
    return { 
@@ -120,11 +151,11 @@ class Style {
  }

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

@@ -178,6 +209,19 @@ class Style {
    node2.fill({ color: color })
    fillNode.fill({ color: fill })
  }
+
+  // 是否设置了自定义的样式
+  hasCustomStyle() {
+    let res = false
+    Object.keys(this.ctx.nodeData.data).forEach((item) => {
+      if (!nodeDataNoStylePropList.includes(item)) {
+        res = true
+      }
+    })
+    return res
+  }
 }

+Style.cacheStyle = null
+
 export default Style
--- a/simple-mind-map/src/core/render/node/nodeCommandWraps.js
+++ b/simple-mind-map/src/core/render/node/nodeCommandWraps.js
--- a/simple-mind-map/src/core/render/node/nodeCreateContents.js
+++ b/simple-mind-map/src/core/render/node/nodeCreateContents.js
@@ -1,6 +1,7 @@
-import { measureText, resizeImgSize } from '../utils'
+import { measureText, resizeImgSize, getTextFromHtml } from '../../../utils'
 import { Image, SVG, A, G, Rect, Text, ForeignObject } from '@svgdotjs/svg.js'
-import iconsSvg from '../svg/icons'
+import iconsSvg from '../../../svg/icons'
+import { CONSTANTS } from '../../../constants/constant'

 //  创建图片节点
 function createImgNode() {
@@ -16,6 +17,15 @@ function createImgNode() {
  node.on('dblclick', e => {
    this.mindMap.emit('node_img_dblclick', this, e)
  })
+  node.on('mouseenter', e => {
+    this.mindMap.emit('node_img_mouseenter', this, node, e)
+  })
+  node.on('mouseleave', e => {
+    this.mindMap.emit('node_img_mouseleave', this, node, e)
+  })
+  node.on('mousemove', e => {
+    this.mindMap.emit('node_img_mousemove', this, node, e)
+  })
  return {
    node,
    width: imgSize[0],
@@ -25,9 +35,12 @@ function createImgNode() {

 //  获取图片显示宽高
 function getImgShowSize() {
+  const { custom, width, height } = this.nodeData.data.imageSize
+  // 如果是自定义了图片的宽高，那么不受最大宽高限制
+  if (custom) return [width, height]
  return resizeImgSize(
-    this.nodeData.data.imageSize.width,
-    this.nodeData.data.imageSize.height,
+    width,
+    height,
    this.mindMap.themeConfig.imgMaxWidth,
    this.mindMap.themeConfig.imgMaxHeight
  )
@@ -41,8 +54,18 @@ function createIconNode() {
  }
  let iconSize = this.mindMap.themeConfig.iconSize
  return _data.icon.map(item => {
+    let src = iconsSvg.getNodeIconListIcon(item, this.mindMap.opt.iconList || [])
+    let node = null
+    // svg图标
+    if (/^<svg/.test(src)) {
+      node = SVG(src)
+    } else {
+      // 图片图标
+      node = new Image().load(src)
+    }
+    node.size(iconSize, iconSize)
    return {
-      node: SVG(iconsSvg.getNodeIconListIcon(item)).size(iconSize, iconSize),
+      node,
      width: iconSize,
      height: iconSize
    }
@@ -52,6 +75,22 @@ function createIconNode() {
 // 创建富文本节点
 function createRichTextNode() {
  let g = new G()
+  // 重新设置富文本节点内容
+  let recoverText = false
+  if (this.nodeData.data.resetRichText) {
+    delete this.nodeData.data.resetRichText
+    recoverText = true
+  }
+  if ([CONSTANTS.CHANGE_THEME].includes(this.mindMap.renderer.renderSource)) {
+    // 如果自定义过样式则不允许覆盖
+    if (!this.hasCustomStyle()) {
+      recoverText = true
+    }
+  }
+  if (recoverText) {
+    let text = getTextFromHtml(this.nodeData.data.text)
+    this.nodeData.data.text = `<p><span style="${this.style.createStyleText()}">${text}</span></p>`
+  }
  let html = `<div>${this.nodeData.data.text}</div>`
  let div = document.createElement('div')
  div.innerHTML = html
@@ -62,7 +101,7 @@ function createRichTextNode() {
  el.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
  this.mindMap.el.appendChild(div)
  let { width, height } = el.getBoundingClientRect()
-  width = Math.ceil(width)
+  width = Math.ceil(width) + 1// 修复getBoundingClientRect方法对实际宽度是小数的元素获取到的值是整数，导致宽度不够文本发生换行的问题
  height = Math.ceil(height)
  g.attr('data-width', width)
  g.attr('data-height', height)
@@ -96,6 +135,7 @@ function createTextNode() {
  let textStyle = this.style.getTextFontStyle()
  let textArr = this.nodeData.data.text.split(/\n/gim)
  let maxWidth = this.mindMap.opt.textAutoWrapWidth
+  let isMultiLine = false
  textArr.forEach((item, index) => {
    let arr = item.split('')
    let lines = []
@@ -113,6 +153,9 @@ function createTextNode() {
    if (line.length > 0) {
      lines.push(line.join(''))
    }
+    if (lines.length > 1) {
+      isMultiLine = true
+    }
    textArr[index] = lines.join('\n')
  })
  textArr = textArr.join('\n').split(/\n/gim)
@@ -127,6 +170,7 @@ function createTextNode() {
  height = Math.ceil(height)
  g.attr('data-width', width)
  g.attr('data-height', height)
+  g.attr('data-ismultiLine', isMultiLine || textArr.length > 1)
  return {
    node: g,
    width,
@@ -248,6 +292,32 @@ function createNoteNode() {
  }
 }

+// 测量自定义节点内容元素的宽高
+let warpEl = null
+function measureCustomNodeContentSize (content) {
+  if (!warpEl) {
+    warpEl = document.createElement('div')
+    warpEl.style.cssText = `
+      position: fixed;
+      left: -99999px;
+      top: -99999px;
+    `
+    this.mindMap.el.appendChild(warpEl)
+  }
+  warpEl.innerHTML = ''
+  warpEl.appendChild(content)
+  let rect = warpEl.getBoundingClientRect()
+  return {
+    width: rect.width,
+    height: rect.height
+  }
+}
+
+// 是否使用的是自定义节点内容
+function isUseCustomNodeContent()  {
+  return !!this._customNodeContent
+}
+
 export default {
    createImgNode,
    getImgShowSize,
@@ -256,5 +326,7 @@ export default {
    createTextNode,
    createHyperlinkNode,
    createTagNode,
-    createNoteNode
+    createNoteNode,
+    measureCustomNodeContentSize,
+    isUseCustomNodeContent
 }
--- a/simple-mind-map/src/core/render/node/nodeExpandBtn.js
+++ b/simple-mind-map/src/core/render/node/nodeExpandBtn.js
@@ -1,4 +1,4 @@
-import btnsSvg from '../svg/btns'
+import btnsSvg from '../../../svg/btns'
 import { SVG, Circle, G } from '@svgdotjs/svg.js'

 // 创建展开收起按钮的内容节点
@@ -32,15 +32,20 @@ function createExpandNodeContent() {

 //  创建或更新展开收缩按钮内容
 function updateExpandBtnNode() {
+  let { expand } = this.nodeData.data
+  // 如果本次和上次的展开状态一样则返回
+  if (expand === this._lastExpandBtnType) return
  if (this._expandBtn) {
    this._expandBtn.clear()
  }
  this.createExpandNodeContent()
  let node
-  if (this.nodeData.data.expand === false) {
+  if (expand === false) {
    node = this._openExpandNode
+    this._lastExpandBtnType = false
  } else {
    node = this._closeExpandNode
+    this._lastExpandBtnType = true
  }
  if (this._expandBtn) this._expandBtn.add(this._fillExpandNode).add(node)
 }
@@ -93,14 +98,36 @@ function renderExpandBtn() {
    })
    this.group.add(this._expandBtn)
  }
+  this._showExpandBtn = true
  this.updateExpandBtnNode()
  this.updateExpandBtnPos()
 }

 //  移除展开收缩按钮
 function removeExpandBtn() {
-  if (this._expandBtn) {
+  if (this._expandBtn && this._showExpandBtn) {
    this._expandBtn.remove()
+    this._showExpandBtn = false
+  }
+}
+
+// 显示展开收起按钮
+function showExpandBtn() {
+  if (this.mindMap.opt.alwaysShowExpandBtn) return
+  setTimeout(() => {
+    this.renderExpandBtn()
+  }, 0)
+}
+
+// 隐藏展开收起按钮
+function hideExpandBtn() {
+  if (this.mindMap.opt.alwaysShowExpandBtn || this._isMouseenter) return
+  // 非激活状态且展开状态鼠标移出才隐藏按钮
+  let { isActive, expand } = this.nodeData.data
+  if (!isActive && expand) {
+    setTimeout(() => {
+      this.removeExpandBtn()
+    }, 0)
  }
 }

@@ -109,5 +136,7 @@ export default {
  updateExpandBtnNode,
  updateExpandBtnPos,
  renderExpandBtn,
-  removeExpandBtn
+  removeExpandBtn,
+  showExpandBtn,
+  hideExpandBtn
 }
--- a/simple-mind-map/src/core/render/node/nodeGeneralization.js
+++ b/simple-mind-map/src/core/render/node/nodeGeneralization.js
@@ -1,4 +1,5 @@
-import Node from '../Node'
+import Node from './Node'
+import { createUid } from '../../../utils/index'

 //  检查是否存在概要
 function checkHasGeneralization () {
@@ -18,7 +19,7 @@ function createGeneralizationNode () {
      data: {
        data: this.nodeData.data.generalization
      },
-      uid: this.mindMap.uid++,
+      uid: createUid(),
      renderer: this.renderer,
      mindMap: this.mindMap,
      draw: this.draw,
--- a/simple-mind-map/src/core/view/View.js
+++ b/simple-mind-map/src/core/view/View.js
@@ -0,0 +1,296 @@
+import { CONSTANTS } from '../../constants/constant'
+
+//  视图操作类
+class View {
+  //  构造函数
+  constructor(opt = {}) {
+    this.opt = opt
+    this.mindMap = this.opt.mindMap
+    this.scale = 1
+    this.sx = 0
+    this.sy = 0
+    this.x = 0
+    this.y = 0
+    this.firstDrag = true
+    this.setTransformData(this.mindMap.opt.viewData)
+    this.bind()
+  }
+
+  //  绑定
+  bind() {
+    // 快捷键
+    this.mindMap.keyCommand.addShortcut('Control+=', () => {
+      this.enlarge()
+    })
+    this.mindMap.keyCommand.addShortcut('Control+-', () => {
+      this.narrow()
+    })
+    this.mindMap.keyCommand.addShortcut('Control+Enter', () => {
+      this.reset()
+    })
+    this.mindMap.keyCommand.addShortcut('Control+i', () => {
+      this.fit()
+    })
+    this.mindMap.svg.on('dblclick', () => {
+      this.reset()
+    })
+    // 拖动视图
+    this.mindMap.event.on('mousedown', () => {
+      this.sx = this.x
+      this.sy = this.y
+    })
+    this.mindMap.event.on('drag', (e, event) => {
+      if (e.ctrlKey) {
+        // 按住ctrl键拖动为多选
+        return
+      }
+      if (this.firstDrag) {
+        this.firstDrag = false
+        // 清除激活节点
+        if (this.mindMap.renderer.activeNodeList.length > 0) {
+          this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+        }
+      }
+      this.x = this.sx + event.mousemoveOffset.x
+      this.y = this.sy + event.mousemoveOffset.y
+      this.transform()
+    })
+    this.mindMap.event.on('mouseup', () => {
+      this.firstDrag = true
+    })
+    // 放大缩小视图
+    this.mindMap.event.on('mousewheel', (e, dir, event, isTouchPad) => {
+      let {
+        customHandleMousewheel,
+        mousewheelAction,
+        mouseScaleCenterUseMousePosition,
+        mousewheelMoveStep,
+        mousewheelZoomActionReverse
+      } = this.mindMap.opt
+      // 是否自定义鼠标滚轮事件
+      if (
+        customHandleMousewheel &&
+        typeof customHandleMousewheel === 'function'
+      ) {
+        return customHandleMousewheel(e)
+      }
+      // 鼠标滚轮事件控制缩放
+      if (mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM) {
+        let cx = mouseScaleCenterUseMousePosition ? e.clientX : undefined
+        let cy = mouseScaleCenterUseMousePosition ? e.clientY : undefined
+        switch (dir) {
+          // 鼠标滚轮，向上和向左，都是缩小
+          case CONSTANTS.DIR.UP:
+          case CONSTANTS.DIR.LEFT:
+            mousewheelZoomActionReverse ? this.enlarge(cx, cy, isTouchPad) : this.narrow(cx, cy, isTouchPad)
+            break
+          // 鼠标滚轮，向下和向右，都是放大
+          case CONSTANTS.DIR.DOWN:
+          case CONSTANTS.DIR.RIGHT:
+            mousewheelZoomActionReverse ? this.narrow(cx, cy, isTouchPad) : this.enlarge(cx, cy, isTouchPad)
+            break
+        }
+      } else {// 鼠标滚轮事件控制画布移动
+        let step = mousewheelMoveStep
+        if (isTouchPad) {
+          step = 5
+        }
+        switch (dir) {
+          // 上移
+          case CONSTANTS.DIR.DOWN:
+            this.translateY(-step)
+            break
+          // 下移
+          case CONSTANTS.DIR.UP:
+            this.translateY(step)
+            break
+          // 右移
+          case CONSTANTS.DIR.LEFT:
+            this.translateX(-step)
+            break
+          // 左移
+          case CONSTANTS.DIR.RIGHT:
+            this.translateX(step)
+            break
+        }
+      }
+    })
+  }
+
+  //  获取当前变换状态数据
+  getTransformData() {
+    return {
+      transform: this.mindMap.draw.transform(),
+      state: {
+        scale: this.scale,
+        x: this.x,
+        y: this.y,
+        sx: this.sx,
+        sy: this.sy
+      }
+    }
+  }
+
+  //  动态设置变换状态数据
+  setTransformData(viewData) {
+    if (viewData) {
+      Object.keys(viewData.state).forEach(prop => {
+        this[prop] = viewData.state[prop]
+      })
+      this.mindMap.draw.transform({
+        ...viewData.transform
+      })
+      this.mindMap.emit('view_data_change', this.getTransformData())
+      this.mindMap.emit('scale', this.scale)
+    }
+  }
+
+  //  平移x,y方向
+  translateXY(x, y) {
+    this.x += x
+    this.y += y
+    this.transform()
+  }
+
+  //  平移x方向
+  translateX(step) {
+    this.x += step
+    this.transform()
+  }
+
+  //  平移x方式到
+  translateXTo(x) {
+    this.x = x
+    this.transform()
+  }
+
+  //  平移y方向
+  translateY(step) {
+    this.y += step
+    this.transform()
+  }
+
+  //  平移y方向到
+  translateYTo(y) {
+    this.y = y
+    this.transform()
+  }
+
+  //   应用变换
+  transform() {
+    this.mindMap.draw.transform({
+      origin: [0, 0],
+      scale: this.scale,
+      translate: [this.x, this.y]
+    })
+    this.mindMap.emit('view_data_change', this.getTransformData())
+  }
+
+  //  恢复
+  reset() {
+    let scaleChange = this.scale !== 1
+    this.scale = 1
+    this.x = 0
+    this.y = 0
+    this.transform()
+    if (scaleChange) {
+      this.mindMap.emit('scale', this.scale)
+    }
+  }
+
+  //  缩小
+  narrow(cx, cy, isTouchPad) {
+    const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
+    const scale = Math.max(this.scale - scaleRatio, 0.1)
+    this.scaleInCenter(scale, cx, cy)
+    this.transform()
+    this.mindMap.emit('scale', this.scale)
+  }
+
+  //  放大
+  enlarge(cx, cy, isTouchPad) {
+    const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
+    const scale = this.scale + scaleRatio
+    this.scaleInCenter(scale, cx, cy)
+    this.transform()
+    this.mindMap.emit('scale', this.scale)
+  }
+
+  // 基于指定中心进行缩放，cx，cy 可不指定，此时会使用画布中心点
+  scaleInCenter(scale, cx, cy) {
+    if (cx === undefined || cy === undefined) {
+      cx = this.mindMap.width / 2
+      cy = this.mindMap.height / 2
+    }
+    const prevScale = this.scale
+    const ratio = 1 - scale / prevScale
+    const dx = (cx - this.x) * ratio
+    const dy = (cy - this.y) * ratio
+    this.x += dx
+    this.y += dy
+    this.scale = scale
+  }
+
+  //  设置缩放
+  setScale(scale, cx, cy) {
+    if (cx !== undefined && cy !== undefined) {
+      this.scaleInCenter(scale, cx, cy)
+    } else {
+      this.scale = scale
+    }
+    this.transform()
+    this.mindMap.emit('scale', this.scale)
+  }
+
+  // 适应画布大小
+  fit() {
+    let { fitPadding } = this.mindMap.opt
+    let draw = this.mindMap.draw
+    let origTransform = draw.transform()
+    let rect = draw.rbox()
+    let drawWidth = rect.width / origTransform.scaleX
+    let drawHeight = rect.height / origTransform.scaleY
+    let drawRatio = drawWidth / drawHeight
+    let { width: elWidth, height: elHeight } =
+      this.mindMap.el.getBoundingClientRect()
+    elWidth = elWidth - fitPadding * 2
+    elHeight = elHeight - fitPadding * 2
+    let elRatio = elWidth / elHeight
+    let newScale = 0
+    let flag = ''
+    if (drawWidth <= elWidth && drawHeight <= elHeight) {
+      newScale = 1
+      flag = 1
+    } else {
+      let newWidth = 0
+      let newHeight = 0
+      if (drawRatio > elRatio) {
+        newWidth = elWidth
+        newHeight = elWidth / drawRatio
+        flag = 2
+      } else {
+        newHeight = elHeight
+        newWidth = elHeight * drawRatio
+        flag = 3
+      }
+      newScale = newWidth / drawWidth
+    }
+    this.setScale(newScale)
+    let newRect = draw.rbox()
+    let newX = 0
+    let newY = 0
+    if (flag === 1) {
+      newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2
+      newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2
+    } else if (flag === 2) {
+      newX = -newRect.x + fitPadding
+      newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2
+    } else if (flag === 3) {
+      newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2
+      newY = -newRect.y + fitPadding
+    }
+    this.translateXY(newX, newY)
+  }
+}
+
+export default View
--- a/simple-mind-map/src/layouts/Base.js
+++ b/simple-mind-map/src/layouts/Base.js
@@ -1,5 +1,7 @@
-import Node from '../Node'
-import { CONSTANTS, initRootNodePositionMap } from '../utils/constant'
+import Node from '../core/render/node/Node'
+import { CONSTANTS, initRootNodePositionMap } from '../constants/constant'
+import Lru from '../utils/Lru'
+import { createUid } from '../utils/index'

 //  布局基类
 class Base {
@@ -13,8 +15,7 @@ class Base {
    this.draw = this.mindMap.draw
    // 根节点
    this.root = null
-    // 保存所有uid和节点，用于复用
-    this.nodePool = {}
+    this.lru = new Lru(this.mindMap.opt.maxNodeCacheCount)
  }

  //  计算节点位置
@@ -40,16 +41,7 @@ class Base {
    // 记录本次渲染时的节点
    this.renderer.nodeCache[uid] = node
    // 记录所有渲染时的节点
-    this.nodePool[uid] = node
-    // 如果总缓存数量达到1000，直接清空
-    if (Object.keys(this.nodePool).length > 1000) {
-      this.clearNodePool()
-    }
-  }
-
-  // 清空节点存储池
-  clearNodePool() {
-    this.nodePool = {}
+    this.lru.add(uid, node)
  }

  // 检查当前来源是否需要重新计算节点大小
@@ -57,6 +49,20 @@ class Base {
    return [CONSTANTS.CHANGE_THEME, CONSTANTS.TRANSFORM_TO_NORMAL_NODE].includes(this.renderer.renderSource)
  }

+  // 层级类型改变
+  checkIsLayerTypeChange(oldIndex, newIndex) {
+    if (oldIndex >= 2 && newIndex >= 2) return false
+    if (oldIndex >= 2 && newIndex < 2) return true
+    if (oldIndex < 2 && newIndex >= 2) return true
+  }
+
+  // 检查是否是结构布局改变重新渲染展开收起按钮占位元素
+  checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(node) {
+    if (this.renderer.renderSource === CONSTANTS.CHANGE_LAYOUT) {
+      node.needRerenderExpandBtnPlaceholderRect = true
+    }
+  }
+
  //  创建节点实例
  createNode(data, parent, isRoot, layerIndex) {
    // 创建节点
@@ -64,35 +70,39 @@ class Base {
    // 数据上保存了节点引用，那么直接复用节点
    if (data && data._node && !this.renderer.reRender) {
      newNode = data._node
+      let isLayerTypeChange = this.checkIsLayerTypeChange(newNode.layerIndex, layerIndex)
      newNode.reset()
      newNode.layerIndex = layerIndex
      this.cacheNode(data._node.uid, newNode)
+      this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
      // 主题或主题配置改变了需要重新计算节点大小和布局
-      if (this.checkIsNeedResizeSources()) {
+      if (this.checkIsNeedResizeSources() || isLayerTypeChange) {
        newNode.getSize()
        newNode.needLayout = true
      }
-    } else if (this.nodePool[data.data.uid] && !this.renderer.reRender) {
+    } else if (this.lru.has(data.data.uid) && !this.renderer.reRender) {
      // 数据上没有保存节点引用，但是通过uid找到了缓存的节点，也可以复用
-      newNode = this.nodePool[data.data.uid]
+      newNode = this.lru.get(data.data.uid)
      // 保存该节点上一次的数据
      let lastData = JSON.stringify(newNode.nodeData.data)
+      let isLayerTypeChange = this.checkIsLayerTypeChange(newNode.layerIndex, layerIndex)
      newNode.reset()
      newNode.nodeData = newNode.handleData(data || {})
      newNode.layerIndex = layerIndex
      this.cacheNode(data.data.uid, newNode)
+      this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
      data._node = newNode
      // 主题或主题配置改变了需要重新计算节点大小和布局
      let isResizeSource = this.checkIsNeedResizeSources()
      // 节点数据改变了需要重新计算节点大小和布局
      let isNodeDataChange = lastData !== JSON.stringify(data.data)
-      if (isResizeSource || isNodeDataChange) {
+      if (isResizeSource || isNodeDataChange || isLayerTypeChange) {
        newNode.getSize()
        newNode.needLayout = true
      }
    } else {
      // 创建新节点
-      let uid = this.mindMap.uid++
+      let uid = data.data.uid || createUid()
      newNode = new Node({
        data,
        uid,
--- a/simple-mind-map/src/layouts/CatalogOrganization.js
+++ b/simple-mind-map/src/layouts/CatalogOrganization.js
@@ -199,6 +199,9 @@ class CatalogOrganization extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
    let len = node.children.length
    let marginX = this.getMarginX(node.layerIndex + 1)
    if (node.isRoot) {
@@ -346,6 +349,11 @@ class CatalogOrganization extends Base {
    gNode.left = right + generalizationNodeMargin
    gNode.top = top + (bottom - top - gNode.height) / 2
  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    rect.size(width, expandBtnSize).x(0).y(height)
+  }
 }

 export default CatalogOrganization
--- a/simple-mind-map/src/layouts/Fishbone.js
+++ b/simple-mind-map/src/layouts/Fishbone.js
@@ -1,6 +1,6 @@
 import Base from './Base'
 import { walk, asyncRun, degToRad } from '../utils'
-import { CONSTANTS } from '../utils/constant'
+import { CONSTANTS } from '../constants/constant'
 import utils from './fishboneUtils'

 //  鱼骨图
@@ -51,8 +51,8 @@ class Fishbone extends Base {
            // 节点生长方向
            newNode.dir =
              index % 2 === 0
-                ? CONSTANTS.TIMELINE_DIR.TOP
-                : CONSTANTS.TIMELINE_DIR.BOTTOM
+                ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+                : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
          }
          // 计算二级节点的top值
          if (parent._node.isRoot) {
@@ -222,7 +222,7 @@ class Fishbone extends Base {

  // 检查节点是否是上方节点
  checkIsTop(node) {
-    return node.dir === CONSTANTS.TIMELINE_DIR.TOP
+    return node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
  }

  //  绘制连线，连接该节点到其子节点
@@ -231,12 +231,15 @@ class Fishbone extends Base {
      return []
    }
    let { top, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
    let len = node.children.length
    if (node.isRoot) {
      // 当前节点是根节点
      // 根节点的子节点是和根节点同一水平线排列
      let maxx = -Infinity
-      node.children.forEach((item) => {
+      node.children.forEach(item => {
        if (item.left > maxx) {
          maxx = item.left
        }
@@ -247,15 +250,15 @@ class Fishbone extends Base {
        let line = this.draw.path()
        if (this.checkIsTop(item)) {
          line.plot(
-            `M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${item.left},${
-              item.top + item.height
-            }`
+            `M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${
+              item.left
+            },${item.top + item.height}`
          )
        } else {
          line.plot(
-            `M ${nodeLineX - offsetX},${
-              item.top - offset
-            } L ${nodeLineX},${item.top}`
+            `M ${nodeLineX - offsetX},${item.top - offset} L ${nodeLineX},${
+              item.top
+            }`
          )
        }
        node.style.line(line)
@@ -370,6 +373,27 @@ class Fishbone extends Base {
    gNode.left = right + generalizationNodeMargin
    gNode.top = top + (bottom - top - gNode.height) / 2
  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    let dir = ''
+    if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+      dir =
+        node.layerIndex === 1
+          ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+          : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+    } else {
+      dir =
+        node.layerIndex === 1
+          ? CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+          : CONSTANTS.LAYOUT_GROW_DIR.TOP
+    }
+    if (dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+      rect.size(width, expandBtnSize).x(0).y(-expandBtnSize)
+    } else {
+      rect.size(width, expandBtnSize).x(0).y(height)
+    }
+  }
 }

 export default Fishbone
--- a/simple-mind-map/src/layouts/FishboneBottom.js
+++ b/simple-mind-map/src/layouts/FishboneBottom.js
@@ -52,8 +52,8 @@ class Fishbone extends Base {
            // 节点生长方向
            newNode.dir =
              index % 2 === 0
-                ? CONSTANTS.TIMELINE_DIR.TOP
-                : CONSTANTS.TIMELINE_DIR.BOTTOM
+                ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+                : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
          }
          // 计算二级节点的top值
          if (parent._node.isRoot) {
--- a/simple-mind-map/src/layouts/FishboneTop.js
+++ b/simple-mind-map/src/layouts/FishboneTop.js
@@ -52,8 +52,8 @@ class Fishbone extends Base {
            // 节点生长方向
            newNode.dir =
              index % 2 === 0
-                ? CONSTANTS.TIMELINE_DIR.TOP
-                : CONSTANTS.TIMELINE_DIR.BOTTOM
+                ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+                : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
          }
          // 计算二级节点的top值
          if (parent._node.isRoot) {
@@ -281,7 +281,7 @@ class Fishbone extends Base {
        if (
          node.parent &&
          node.parent.isRoot &&
-          node.dir === CONSTANTS.TIMELINE_DIR.TOP
+          node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
        ) {
          line.plot(
            `M ${x},${top} L ${x + lineLength},${
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -159,6 +159,9 @@ class LogicalStructure extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
    let marginX = this.getMarginX(node.layerIndex + 1)
    let s1 = (marginX - expandBtnSize) * 0.6
    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
@@ -169,9 +172,7 @@ class LogicalStructure extends Base {
      let x2 = item.left
      let y2 = item.top + item.height / 2
      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStyleOffset = nodeUseLineStyle
-        ? item.width
-        : 0
+      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 ${
@@ -188,6 +189,9 @@ class LogicalStructure extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
@@ -213,6 +217,9 @@ class LogicalStructure extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
@@ -245,10 +252,13 @@ class LogicalStructure extends Base {
    let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
      ? height / 2
      : 0
-    btn.translate(
-      width - translateX,
-      height / 2 - translateY + nodeUseLineStyleOffset
-    )
+    // 位置没有变化则返回
+    let _x = width
+    let _y = height / 2 + nodeUseLineStyleOffset
+    if (_x === translateX && _y === translateY) {
+      return
+    }
+    btn.translate(_x - translateX, _y - translateY)
  }

  //  创建概要节点
@@ -271,6 +281,11 @@ class LogicalStructure extends Base {
    gNode.left = right + generalizationNodeMargin
    gNode.top = top + (bottom - top - gNode.height) / 2
  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    rect.size(expandBtnSize, height).x(width).y(0)
+  }
 }

 export default LogicalStructure
--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -1,5 +1,6 @@
 import Base from './Base'
 import { walk, asyncRun } from '../utils'
+import { CONSTANTS } from '../constants/constant'

 //  思维导图
 class MindMap extends Base {
@@ -45,11 +46,14 @@ class MindMap extends Base {
            newNode.dir = parent._node.dir
          } else {
            // 节点生长方向
-            newNode.dir = index % 2 === 0 ? 'right' : 'left'
+            newNode.dir =
+              index % 2 === 0
+                ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
+                : CONSTANTS.LAYOUT_GROW_DIR.LEFT
          }
          // 根据生长方向定位到父节点的左侧或右侧
          newNode.left =
-            newNode.dir === 'right'
+            newNode.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT
              ? parent._node.left +
                parent._node.width +
                this.getMarginX(layerIndex)
@@ -72,7 +76,7 @@ class MindMap extends Base {
        let leftChildrenAreaHeight = 0
        let rightChildrenAreaHeight = 0
        cur._node.children.forEach(item => {
-          if (item.dir === 'left') {
+          if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
            leftLen++
            leftChildrenAreaHeight += item.height
          } else {
@@ -109,7 +113,7 @@ class MindMap extends Base {
          let leftTotalTop = baseTop - node.leftChildrenAreaHeight / 2
          let rightTotalTop = baseTop - node.rightChildrenAreaHeight / 2
          node.children.forEach(cur => {
-            if (cur.dir === 'left') {
+            if (cur.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
              cur.top = leftTotalTop
              leftTotalTop += cur.height + marginY
            } else {
@@ -162,7 +166,10 @@ class MindMap extends Base {
          return
        }
        let _offset = 0
-        let addHeight = item.dir === 'left' ? leftAddHeight : rightAddHeight
+        let addHeight =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? leftAddHeight
+            : rightAddHeight
        // 上面的节点往上移
        if (_index < index) {
          _offset = -addHeight
@@ -198,6 +205,9 @@ class MindMap extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
    let marginX = this.getMarginX(node.layerIndex + 1)
    let s1 = (marginX - expandBtnSize) * 0.6
    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
@@ -205,10 +215,8 @@ class MindMap extends Base {
      let x1 = 0
      let _s = 0
      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStyleOffset = nodeUseLineStyle
-        ? item.width
-        : 0
-      if (item.dir === 'left') {
+      let nodeUseLineStyleOffset = nodeUseLineStyle ? item.width : 0
+      if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
        _s = -s1
        x1 = node.layerIndex === 0 ? left : left - expandBtnSize
        nodeUseLineStyleOffset = -nodeUseLineStyleOffset
@@ -217,7 +225,10 @@ class MindMap extends Base {
        x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
      }
      let y1 = top + height / 2
-      let x2 = item.dir === 'left' ? item.left + item.width : item.left
+      let x2 =
+        item.dir === CONSTANTS.LAYOUT_GROW_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
@@ -235,23 +246,29 @@ class MindMap extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
        node.layerIndex === 0
          ? left + width / 2
-          : item.dir === 'left'
+          : item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
          ? left - expandBtnSize
          : left + width + expandBtnSize
      let y1 = top + height / 2
-      let x2 = item.dir === 'left' ? item.left + item.width : item.left
+      let x2 =
+        item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+          ? item.left + item.width
+          : item.left
      let y2 = item.top + item.height / 2
      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
      // 节点使用横线风格，需要额外渲染横线
      let nodeUseLineStylePath = ''
      if (nodeUseLineStyle) {
-        if (item.dir === 'left') {
+        if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
          nodeUseLineStylePath = ` L ${item.left},${y2}`
        } else {
          nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
@@ -269,16 +286,22 @@ class MindMap extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
        node.layerIndex === 0
          ? left + width / 2
-          : item.dir === 'left'
+          : item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
          ? left - expandBtnSize
-          : left + width + 20
+          : left + width + expandBtnSize
      let y1 = top + height / 2
-      let x2 = item.dir === 'left' ? item.left + item.width : item.left
+      let x2 =
+        item.dir === CONSTANTS.LAYOUT_GROW_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
@@ -286,7 +309,7 @@ class MindMap extends Base {
      // 节点使用横线风格，需要额外渲染横线
      let nodeUseLineStylePath = ''
      if (this.mindMap.themeConfig.nodeUseLineStyle) {
-        if (item.dir === 'left') {
+        if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
          nodeUseLineStylePath = ` L ${item.left},${y2}`
        } else {
          nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
@@ -310,14 +333,21 @@ class MindMap extends Base {
    let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
      ? height / 2
      : 0
-    let x = (node.dir === 'left' ? 0 - expandBtnSize : width) - translateX
-    let y = height / 2 - translateY + nodeUseLineStyleOffset
+    // 位置没有变化则返回
+    let _x =
+      node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT ? 0 - expandBtnSize : width
+    let _y = height / 2 + nodeUseLineStyleOffset
+    if (_x === translateX && _y === translateY) {
+      return
+    }
+    let x = _x - translateX
+    let y = _y - translateY
    btn.translate(x, y)
  }

  //  创建概要节点
  renderGeneralization(node, gLine, gNode) {
-    let isLeft = node.dir === 'left'
+    let isLeft = node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
    let {
      top,
      bottom,
@@ -343,6 +373,15 @@ class MindMap extends Base {
      (isLeft ? gNode.width : 0)
    gNode.top = top + (bottom - top - gNode.height) / 2
  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
+      rect.size(expandBtnSize, height).x(-expandBtnSize).y(0)
+    } else {
+      rect.size(expandBtnSize, height).x(width).y(0)
+    }
+  }
 }

 export default MindMap
--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/simple-mind-map/src/layouts/OrganizationStructure.js
@@ -179,6 +179,9 @@ class OrganizationStructure extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize, isRoot } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
    let x1 = left + width / 2
    let y1 = top + height
    let marginX = this.getMarginX(node.layerIndex + 1)
@@ -252,6 +255,11 @@ class OrganizationStructure extends Base {
    gNode.top = bottom + generalizationNodeMargin
    gNode.left = left + (right - left - gNode.width) / 2
  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    rect.size(width, expandBtnSize).x(0).y(height)
+  }
 }

 export default OrganizationStructure
--- a/simple-mind-map/src/layouts/Timeline.js
+++ b/simple-mind-map/src/layouts/Timeline.js
@@ -1,6 +1,6 @@
 import Base from './Base'
 import { walk, asyncRun } from '../utils'
-import { CONSTANTS } from '../utils/constant'
+import { CONSTANTS } from '../constants/constant'

 //  时间轴
 class Timeline extends Base {
@@ -50,8 +50,8 @@ class Timeline extends Base {
              // 节点生长方向
              newNode.dir =
                index % 2 === 0
-                  ? CONSTANTS.TIMELINE_DIR.BOTTOM
-                  : CONSTANTS.TIMELINE_DIR.TOP
+                  ? CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+                  : CONSTANTS.LAYOUT_GROW_DIR.TOP
            }
          } else {
            newNode.dir = ''
@@ -151,7 +151,7 @@ class Timeline extends Base {
        if (
          parent &&
          parent.isRoot &&
-          node.dir === CONSTANTS.TIMELINE_DIR.TOP
+          node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
        ) {
          // 遍历二级节点的子节点
          node.children.forEach(item => {
@@ -238,6 +238,9 @@ class Timeline extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
    let len = node.children.length
    if (node.isRoot) {
      // 当前节点是根节点
@@ -277,7 +280,7 @@ class Timeline extends Base {
        if (
          node.parent &&
          node.parent.isRoot &&
-          node.dir === CONSTANTS.TIMELINE_DIR.TOP
+          node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
        ) {
          line.plot(`M ${x},${top} L ${x},${miny}`)
        } else {
@@ -298,7 +301,7 @@ class Timeline extends Base {
      if (
        node.parent &&
        node.parent.isRoot &&
-        node.dir === CONSTANTS.TIMELINE_DIR.TOP
+        node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
      ) {
        btn.translate(
          width * 0.3 - expandBtnSize / 2 - translateX,
@@ -333,6 +336,28 @@ class Timeline extends Base {
    gNode.left = right + generalizationNodeMargin
    gNode.top = top + (bottom - top - gNode.height) / 2
  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    if (this.layout === CONSTANTS.LAYOUT.TIMELINE) {
+      rect.size(width, expandBtnSize).x(0).y(height)
+    } else {
+      let dir = ''
+      if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+        dir =
+          node.layerIndex === 1
+            ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+            : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+      } else {
+        dir = CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+      }
+      if (dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+        rect.size(width, expandBtnSize).x(0).y(-expandBtnSize)
+      } else {
+        rect.size(width, expandBtnSize).x(0).y(height)
+      }
+    }
+  }
 }

 export default Timeline
--- a/simple-mind-map/src/layouts/VerticalTimeline.js
+++ b/simple-mind-map/src/layouts/VerticalTimeline.js
@@ -0,0 +1,431 @@
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
+import { CONSTANTS } from '../constants/constant'
+
+//  竖向时间轴
+class VerticalTimeline extends Base {
+  //  构造函数
+  constructor(opt = {}, layout) {
+    super(opt)
+    this.layout = layout
+  }
+
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedTopValue()
+      },
+      () => {
+        this.adjustLeftTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (cur, parent, isRoot, layerIndex, index) => {
+        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
+        } else {
+          // 非根节点
+          // 节点生长方向
+          // 三级及以下节点以上级为准
+          if (parent._node.dir) {
+            newNode.dir = parent._node.dir
+          } else {
+            newNode.dir =
+              index % 2 === 0
+                ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
+                : CONSTANTS.LAYOUT_GROW_DIR.LEFT
+          }
+          // 定位二级节点的left
+          if (parent._node.isRoot) {
+            newNode.left =
+              parent._node.left +
+              (cur._node.width > parent._node.width
+                ? -(cur._node.width - parent._node.width) / 2
+                : (parent._node.width - cur._node.width) / 2)
+          } else {
+            newNode.left =
+              newNode.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT
+                ? parent._node.left +
+                  parent._node.width +
+                  this.getMarginX(layerIndex)
+                : parent._node.left -
+                  this.getMarginX(layerIndex) -
+                  newNode.width
+          }
+        }
+        if (!cur.data.expand) {
+          return true
+        }
+      },
+      (cur, parent, isRoot, layerIndex) => {
+        // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
+        if (isRoot) {
+          return
+        }
+        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, index) => {
+        if (
+          node.nodeData.data.expand &&
+          node.children &&
+          node.children.length
+        ) {
+          let marginY = this.getMarginY(layerIndex + 1)
+          // 定位二级节点的top
+          if (isRoot) {
+            let top = node.top + node.height
+            let totalTop = top + marginY
+            node.children.forEach(cur => {
+              cur.top = totalTop
+              totalTop += cur.height + marginY
+            })
+          } else {
+            // 定位三级及以下节点的top
+            let marginY = this.getMarginY(layerIndex + 1)
+            let baseTop = node.top + node.height / 2 + marginY
+            // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
+            let totalTop = baseTop - node.childrenAreaHeight / 2
+            node.children.forEach(cur => {
+              cur.top = totalTop
+              totalTop += cur.height + marginY
+            })
+          }
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left、top
+  adjustLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        if (isRoot) return
+        // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+        let base = this.getMarginY(layerIndex + 1) * 2 + node.height
+        let difference = node.childrenAreaHeight - base
+        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.hasCustomPosition()) return
+        // 三级或三级以下节点自身位置不需要动
+        if (!node.parent.isRoot && item === node) return
+        let _offset = 0
+        // 二级节点上面的兄弟节点不需要移动，自身需要往下移动
+        if (node.parent.isRoot) {
+          // 上面的节点不用移
+          if (_index < index) {
+            _offset = 0
+          } else if (_index > index) {
+            // 下面的节点往下移
+            _offset = addHeight * 2
+          } else {
+            // 自身也要移动
+            _offset = addHeight
+          }
+        } else {
+          // 三级或三级以下节点两侧的兄弟节点向两侧移动
+          // 上面的节点往上移
+          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)
+    }
+  }
+
+  //  调整兄弟节点的top
+  updateBrothersTop(node, addHeight) {
+    if (node.parent && !node.parent.isRoot) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 下面的节点往下移
+        if (_index > index) {
+          _offset = addHeight
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothersTop(node.parent, addHeight)
+    }
+  }
+
+  //  绘制连线，连接该节点到其子节点
+  renderLine(node, lines, style, 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 { expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    if (node.isRoot) {
+      // 当前节点是根节点
+      let prevBother = node
+      // 根节点的子节点是和根节点同一水平线排列
+      node.children.forEach((item, index) => {
+        let y1 = prevBother.top + prevBother.height
+        let y2 = item.top
+        let x = node.left + node.width / 2
+        let path = `M ${x},${y1} L ${x},${y2}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+        prevBother = item
+      })
+    } else {
+      // 当前节点为非根节点
+      if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT) {
+        let nodeRight = node.left + node.width
+        let nodeYCenter = node.top + node.height / 2
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let offset = (marginX - expandBtnSize) * 0.6
+        node.children.forEach((item, index) => {
+          let itemLeft = item.left
+          let itemYCenter = item.top + item.height / 2
+          let path = `
+            M ${nodeRight},${nodeYCenter} 
+            L ${nodeRight + offset},${nodeYCenter} 
+            L ${nodeRight + offset},${itemYCenter} 
+            L ${itemLeft},${itemYCenter}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+        })
+      } else {
+        let nodeLeft = node.left
+        let nodeYCenter = node.top + node.height / 2
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let offset = (marginX - expandBtnSize) * 0.6
+        node.children.forEach((item, index) => {
+          let itemRight = item.left + item.width
+          let itemYCenter = item.top + item.height / 2
+          let path = `
+            M ${nodeLeft},${nodeYCenter} 
+            L ${nodeLeft - offset},${nodeYCenter} 
+            L ${nodeLeft - offset},${itemYCenter} 
+            L ${itemRight},${itemYCenter}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+        })
+      }
+    }
+  }
+
+  // 直连
+  renderLineDirect(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    node.children.forEach((item, index) => {
+      if (node.isRoot) {
+        let prevBother = node
+        // 根节点的子节点是和根节点同一水平线排列
+        node.children.forEach((item, index) => {
+          let y1 = prevBother.top + prevBother.height
+          let y2 = item.top
+          let x = node.left + node.width / 2
+          let path = `M ${x},${y1} L ${x},${y2}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+          prevBother = item
+        })
+      } else {
+        let x1 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? left - expandBtnSize
+            : left + width + expandBtnSize
+        let y1 = top + height / 2
+        let x2 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? item.left + item.width
+            : item.left
+        let y2 = item.top + item.height / 2
+        let path = `M ${x1},${y1} L ${x2},${y2}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      }
+    })
+  }
+
+  //  曲线风格连线
+  renderLineCurve(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    node.children.forEach((item, index) => {
+      if (node.isRoot) {
+        let prevBother = node
+        // 根节点的子节点是和根节点同一水平线排列
+        node.children.forEach((item, index) => {
+          let y1 = prevBother.top + prevBother.height
+          let y2 = item.top
+          let x = node.left + node.width / 2
+          let path = `M ${x},${y1} L ${x},${y2}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+          prevBother = item
+        })
+      } else {
+        let x1 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? left - expandBtnSize
+            : left + width + expandBtnSize
+        let y1 = top + height / 2
+        let x2 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? item.left + item.width
+            : item.left
+        let y2 = item.top + item.height / 2
+        let path = this.cubicBezierPath(x1, y1, x2, y2)
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      }
+    })
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height, expandBtnSize, isRoot } = node
+    if (!isRoot) {
+      let { translateX, translateY } = btn.transform()
+      if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT) {
+        btn.translate(width - translateX, height / 2 - translateY)
+      } else {
+        btn.translate(-expandBtnSize - translateX, height / 2 - translateY)
+      }
+    }
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let isLeft = node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+    let {
+      top,
+      bottom,
+      left,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h', isLeft)
+    let x = isLeft
+      ? left - generalizationLineMargin
+      : right + generalizationLineMargin
+    let x1 = x
+    let y1 = top
+    let x2 = x
+    let y2 = bottom
+    let cx = x1 + (isLeft ? -20 : 20)
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left =
+      x +
+      (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
+      (isLeft ? gNode.width : 0)
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
+      rect.size(expandBtnSize, height).x(-expandBtnSize).y(0)
+    } else {
+      rect.size(expandBtnSize, height).x(width).y(0)
+    }
+  }
+}
+
+export default VerticalTimeline
--- a/simple-mind-map/src/parse/xmind.js
+++ b/simple-mind-map/src/parse/xmind.js
@@ -1,5 +1,11 @@
 import JSZip from 'jszip'
 import xmlConvert from 'xml-js'
+import {
+  getTextFromHtml,
+  imgToDataUrl,
+  parseDataUrl,
+  getImageSize
+} from '../utils/index'

 //  解析.xmind文件
 const parseXmindFile = file => {
@@ -10,7 +16,7 @@ const parseXmindFile = file => {
          let content = ''
          if (zip.files['content.json']) {
            let json = await zip.files['content.json'].async('string')
-            content = transformXmind(json)
+            content = await transformXmind(json, zip.files)
          } else if (zip.files['content.xml']) {
            let xml = await zip.files['content.xml'].async('string')
            let json = xmlConvert.xml2json(xml)
@@ -33,18 +39,20 @@ const parseXmindFile = file => {
 }

 //  转换xmind数据
-const transformXmind = content => {
+const transformXmind = async (content, files) => {
  let data = JSON.parse(content)[0]
  let nodeTree = data.rootTopic
  let newTree = {}
-  let walk = (node, newNode) => {
+  let waitLoadImageList = []
+  let walk = async (node, newNode) => {
    newNode.data = {
      // 节点内容
      text: node.title
    }
    // 节点备注
    if (node.notes) {
-      newNode.data.note = (node.notes.realHTML || node.notes.plain).content
+      let notesData = node.notes.realHTML || node.notes.plain
+      newNode.data.note = notesData ? notesData.content || '' : ''
    }
    // 超链接
    if (node.href && /^https?:\/\//.test(node.href)) {
@@ -54,6 +62,42 @@ const transformXmind = content => {
    if (node.labels && node.labels.length > 0) {
      newNode.data.tag = node.labels
    }
+    // 图片
+    if (node.image && /\.(jpg|jpeg|png|gif|webp)$/.test(node.image.src)) {
+      try {
+        // 处理异步逻辑
+        let resolve = null
+        let promise = new Promise(_resolve => {
+          resolve = _resolve
+        })
+        waitLoadImageList.push(promise)
+        // 读取图片
+        let imageType = /\.([^.]+)$/.exec(node.image.src)[1]
+        let imageBase64 =
+          `data:image/${imageType};base64,` +
+          (await files['resources/' + node.image.src.split('/')[1]].async(
+            'base64'
+          ))
+        newNode.data.image = imageBase64
+        // 如果图片尺寸不存在
+        if (!node.image.width && !node.image.height) {
+          let imageSize = await getImageSize(imageBase64)
+          newNode.data.imageSize = {
+            width: imageSize.width,
+            height: imageSize.height
+          }
+        } else {
+          newNode.data.imageSize = {
+            width: node.image.width,
+            height: node.image.height
+          }
+        }
+        resolve()
+      } catch (error) {
+        console.log(error)
+        resolve()
+      }
+    }
    // 子节点
    newNode.children = []
    if (
@@ -69,6 +113,7 @@ const transformXmind = content => {
    }
  }
  walk(nodeTree, newTree)
+  await Promise.all(waitLoadImageList)
  return newTree
 }

@@ -157,8 +202,127 @@ const transformOldXmind = content => {
  return newTree
 }

+// 数据转换为xmind文件
+const transformToXmind = async (data, name) => {
+  const id = 'simpleMindMap_' + Date.now()
+  const imageList = []
+  // 转换核心数据
+  let newTree = {}
+  let waitLoadImageList = []
+  let walk = async (node, newNode, isRoot) => {
+    let newData = {
+      structureClass: 'org.xmind.ui.logic.right',
+      title: getTextFromHtml(node.data.text), // 节点文本
+      children: {
+        attached: []
+      }
+    }
+    // 备注
+    if (node.data.note !== undefined) {
+      newData.notes = {
+        realHTML: {
+          content: node.data.note
+        },
+        plain: {
+          content: node.data.note
+        }
+      }
+    }
+    // 超链接
+    if (node.data.hyperlink !== undefined) {
+      newData.href = node.data.hyperlink
+    }
+    // 标签
+    if (node.data.tag !== undefined) {
+      newData.labels = node.data.tag || []
+    }
+    // 图片
+    if (node.data.image) {
+      try {
+        // 处理异步逻辑
+        let resolve = null
+        let promise = new Promise(_resolve => {
+          resolve = _resolve
+        })
+        waitLoadImageList.push(promise)
+        let imgName = ''
+        let imgData = node.data.image
+        // 网络图片要先转换成data:url
+        if (/^https?:\/\//.test(node.data.image)) {
+          imgData = await imgToDataUrl(node.data.image)
+        }
+        // 从data:url中解析出图片类型和base64
+        let dataUrlRes = parseDataUrl(imgData)
+        imgName = 'image_' + imageList.length + '.' + dataUrlRes.type
+        imageList.push({
+          name: imgName,
+          data: dataUrlRes.base64
+        })
+        newData.image = {
+          src: 'xap:resources/' + imgName,
+          width: node.data.imageSize.width,
+          height: node.data.imageSize.height
+        }
+        resolve()
+      } catch (error) {
+        console.log(error)
+        resolve()
+      }
+    }
+    // 样式
+    // 暂时不考虑样式
+    if (isRoot) {
+      newData.class = 'topic'
+      newNode.id = id
+      newNode.class = 'sheet'
+      newNode.title = name
+      newNode.extensions = []
+      newNode.topicPositioning = 'fixed'
+      newNode.topicOverlapping = 'overlap'
+      newNode.coreVersion = '2.100.0'
+      newNode.rootTopic = newData
+    } else {
+      Object.keys(newData).forEach(key => {
+        newNode[key] = newData[key]
+      })
+    }
+    if (node.children && node.children.length > 0) {
+      node.children.forEach(child => {
+        let newChild = {}
+        walk(child, newChild)
+        newData.children.attached.push(newChild)
+      })
+    }
+  }
+  walk(data, newTree, true)
+  await Promise.all(waitLoadImageList)
+  const contentData = [newTree]
+  // 创建压缩包
+  const zip = new JSZip()
+  zip.file('content.json', JSON.stringify(contentData))
+  zip.file(
+    'metadata.json',
+    `{"modifier":"","dataStructureVersion":"1","layoutEngineVersion":"2","activeSheetId":"${id}"}`
+  )
+  const manifestData = {
+    'file-entries': { 'content.json': {}, 'metadata.json': {} }
+  }
+  // 图片
+  if (imageList.length > 0) {
+    imageList.forEach(item => {
+      manifestData['file-entries']['resources/' + item.name] = {}
+      const img = zip.folder('resources')
+      img.file(item.name, item.data, { base64: true })
+    })
+  }
+  zip.file('manifest.json', JSON.stringify(manifestData))
+  const zipData = await zip.generateAsync({ type: 'blob' })
+  return zipData
+}
+
 export default {
  parseXmindFile,
  transformXmind,
-  transformOldXmind
+  transformOldXmind,
+  transformToXmind
 }
--- a/simple-mind-map/src/plugins/AssociativeLine.js
+++ b/simple-mind-map/src/plugins/AssociativeLine.js
@@ -1,15 +1,15 @@
-import { walk, bfsWalk, throttle } from './utils/'
+import { walk, bfsWalk, throttle } from '../utils'
 import { v4 as uuid } from 'uuid'
 import {
  getAssociativeLineTargetIndex,
  computeCubicBezierPathPoints,
-  joinCubicBezierPath,
  cubicBezierPath,
  getNodePoint,
  computeNodePoints,
-  getNodeLinePath,
-  getDefaultControlPointOffsets
-} from './utils/associativeLineUtils'
+  getNodeLinePath
+} from './associativeLine/associativeLineUtils'
+import associativeLineControlsMethods from './associativeLine/associativeLineControls'
+import associativeLineTextMethods from './associativeLine/associativeLineText'

 // 关联线类
 class AssociativeLine {
@@ -46,6 +46,14 @@ class AssociativeLine {
    }
    // 节流一下，不然很卡
    this.checkOverlapNode = throttle(this.checkOverlapNode, 100, this)
+    // 控制点相关方法
+    Object.keys(associativeLineControlsMethods).forEach(item => {
+      this[item] = associativeLineControlsMethods[item].bind(this)
+    })
+    // 关联线文字相关方法
+    Object.keys(associativeLineTextMethods).forEach(item => {
+      this[item] = associativeLineTextMethods[item].bind(this)
+    })
    this.bindEvent()
  }

@@ -83,12 +91,9 @@ class AssociativeLine {
    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)
-    })
+    this.mindMap.on('mouseup', this.onControlPointMouseup.bind(this))
+    // 缩放事件
+    this.mindMap.on('scale', this.onScale)
  }

  // 创建箭头
@@ -177,36 +182,46 @@ class AssociativeLine {
      .stroke({ width: associativeLineActiveWidth, color: 'transparent' })
      .fill({ color: 'none' })
    clickPath.plot(pathStr)
+    // 文字
+    let text = this.createText({ path, clickPath, node, toNode, startPoint, endPoint, controlPoints })
    // 点击事件
    clickPath.click(e => {
      e.stopPropagation()
-      // 如果当前存在激活节点，那么取消激活节点
-      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.setActiveLine({ path, clickPath, text, node, toNode, startPoint, endPoint, controlPoints })
    })
-    this.lineList.push([path, clickPath, node, toNode])
+    // 渲染关联线文字
+    this.renderText(this.getText(node, toNode), path, text)
+    this.lineList.push([path, clickPath, text, node, toNode])
+  }
+
+  // 激活某根关联线
+  setActiveLine({ path, clickPath, text, node, toNode, startPoint, endPoint, controlPoints }) {
+    let {
+      associativeLineActiveColor
+    } = this.mindMap.themeConfig
+    // 如果当前存在激活节点，那么取消激活节点
+    if (this.mindMap.renderer.activeNodeList.length > 0) {
+      this.clearActiveNodes()
+    } else {
+      // 否则清除当前的关联线的激活状态，如果有的话
+      this.clearActiveLine()
+      // 保存当前激活的关联线信息
+      this.activeLine = [path, clickPath, text, node, toNode]
+      // 让不可见的点击线显示
+      clickPath.stroke({ color: associativeLineActiveColor })
+      // 如果没有输入过关联线文字，那么显示默认文字
+      if (!this.getText(node, toNode)) {
+        this.renderText(this.mindMap.opt.defaultAssociativeLineText, path, text)
+      }
+      // 渲染控制点和连线
+      this.renderControls(
+        startPoint,
+        endPoint,
+        controlPoints[0],
+        controlPoints[1]
+      )
+      this.mindMap.emit('associative_line_click', path, clickPath, node, toNode)
+    }
  }

  // 移除所有连接线
@@ -214,6 +229,7 @@ class AssociativeLine {
    this.lineList.forEach(line => {
      line[0].remove()
      line[1].remove()
+      line[2].remove()
    })
    this.lineList = []
  }
@@ -245,15 +261,17 @@ class AssociativeLine {

  // 鼠标移动事件
  onMousemove(e) {
-    if (!this.isCreatingLine) return
+    this.onControlPointMousemove(e)
    this.updateCreatingLine(e)
  }

  // 更新创建过程中的连接线
  updateCreatingLine(e) {
+    if (!this.isCreatingLine) return
    let { x, y } = this.getTransformedEventPos(e)
    let startPoint = getNodePoint(this.creatingStartNode)
-    let pathStr = cubicBezierPath(startPoint.x, startPoint.y, x, y)
+    let offsetX = x > startPoint.x ? -10 : 10
+    let pathStr = cubicBezierPath(startPoint.x, startPoint.y, x + offsetX, y)
    this.creatingLine.plot(pathStr)
    this.checkOverlapNode(x, y)
  }
@@ -349,20 +367,33 @@ class AssociativeLine {
  // 删除连接线
  removeLine() {
    if (!this.activeLine) return
-    let [, , node, toNode] = this.activeLine
+    let [, , , node, toNode] = this.activeLine
    this.removeControls()
-    let { associativeLineTargets, associativeLineTargetControlOffsets } =
+    let { associativeLineTargets, associativeLineTargetControlOffsets, associativeLineText } =
      node.nodeData.data
    let targetIndex = getAssociativeLineTargetIndex(node, toNode)
+    // 更新关联线文本数据
+    let newAssociativeLineText = {}
+    if (associativeLineText) {
+      Object.keys(associativeLineText).forEach((item) => {
+        if (item !== toNode.nodeData.data.id) {
+          newAssociativeLineText[item] = associativeLineText[item]
+        }
+      })
+    }
    this.mindMap.execCommand('SET_NODE_DATA', node, {
+      // 目标
      associativeLineTargets: associativeLineTargets.filter((_, index) => {
        return index !== targetIndex
      }),
+      // 偏移量
      associativeLineTargetControlOffsets: associativeLineTargetControlOffsets
        ? associativeLineTargetControlOffsets.filter((_, index) => {
            return index !== targetIndex
          })
-        : []
+        : [],
+      // 文本
+      associativeLineText: newAssociativeLineText
    })
  }

@@ -376,9 +407,16 @@ class AssociativeLine {
  // 清除激活的线
  clearActiveLine() {
    if (this.activeLine) {
-      this.activeLine[1].stroke({
+      let [, clickPath, text, node, toNode] = this.activeLine
+      clickPath.stroke({
        color: 'transparent'
      })
+      // 隐藏关联线文本编辑框
+      this.hideEditTextBox()
+      // 如果当前关联线没有文字，则清空文字节点
+      if (!this.getText(node, toNode)) {
+        text.clear()
+      }
      this.activeLine = null
      this.removeControls()
    }
@@ -391,6 +429,7 @@ class AssociativeLine {
    this.lineList.forEach(line => {
      line[0].hide()
      line[1].hide()
+      line[2].hide()
    })
    this.hideControls()
  }
@@ -401,225 +440,11 @@ class AssociativeLine {
    this.lineList.forEach(line => {
      line[0].show()
      line[1].show()
+      line[2].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'
--- a/simple-mind-map/src/plugins/Drag.js
+++ b/simple-mind-map/src/plugins/Drag.js
@@ -1,5 +1,5 @@
-import { bfsWalk, throttle } from './utils'
-import Base from './layouts/Base'
+import { bfsWalk, throttle } from '../utils'
+import Base from '../layouts/Base'

 //  节点拖动类

--- a/simple-mind-map/src/plugins/Export.js
+++ b/simple-mind-map/src/plugins/Export.js
@@ -1,9 +1,7 @@
-import { imgToDataUrl, downloadFile } from './utils'
-import JsPDF from 'jspdf'
+import { imgToDataUrl, downloadFile, readBlob } from '../utils'
 import { SVG } from '@svgdotjs/svg.js'
-import drawBackgroundImageToCanvas from './utils/simulateCSSBackgroundInCanvas'
-import { transformToMarkdown } from './parse/toMarkdown'
-const URL = window.URL || window.webkitURL || window
+import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas'
+import { transformToMarkdown } from '../parse/toMarkdown'

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

  //  获取svg数据
-  async getSvgData(domToImage) {
+  async getSvgData() {
    let { exportPaddingX, exportPaddingY } = this.mindMap.opt
    let { svg, svgHTML } = this.mindMap.getSvgData({
      paddingX: exportPaddingX,
@@ -44,24 +42,14 @@ class Export {
    if (imageList.length > 0) {
      svgHTML = svg.svg()
    }
-    // 如果开启了富文本编辑，需要把svg中的dom元素转换成图片
-    let nodeWithDomToImg = null
-    if (domToImage && this.mindMap.richText) {
-      let res = await this.mindMap.richText.handleSvgDomElements(svg)
-      if (res) {
-        nodeWithDomToImg = res.svg
-        svgHTML = res.svgHTML
-      }
-    }
    return {
      node: svg,
-      str: svgHTML,
-      nodeWithDomToImg
+      str: svgHTML
    }
  }

  //   svg转png
-  svgToPng(svgSrc) {
+  svgToPng(svgSrc, transparent) {
    return new Promise((resolve, reject) => {
      const img = new Image()
      // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
@@ -73,7 +61,9 @@ class Export {
          canvas.height = img.height + this.exportPadding * 2
          let ctx = canvas.getContext('2d')
          // 绘制背景
-          await this.drawBackgroundToCanvas(ctx, canvas.width, canvas.height)
+          if (!transparent) {
+            await this.drawBackgroundToCanvas(ctx, canvas.width, canvas.height)
+          }
          // 图片绘制到canvas里
          ctx.drawImage(
            img,
@@ -135,57 +125,6 @@ class Export {
    })
  }

-  //  导出为png
-  /**
-   * 方法1.把svg的图片都转化成data:url格式，再转换
-   * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
-   */
-  async png() {
-    let { str } = await this.getSvgData(true)
-    // 转换成blob数据
-    let blob = new Blob([str], {
-      type: 'image/svg+xml'
-    })
-    // 转换成data:url数据
-    let svgUrl = URL.createObjectURL(blob)
-    // 绘制到canvas上
-    let imgDataUrl = await this.svgToPng(svgUrl)
-    URL.revokeObjectURL(svgUrl)
-    return imgDataUrl
-  }
-
-  //  导出为pdf
-  async pdf(name) {
-    let img = await this.png()
-    let pdf = new JsPDF('', 'pt', 'a4')
-    let a4Width = 595
-    let a4Height = 841
-    let a4Ratio = a4Width / a4Height
-    let image = new Image()
-    image.onload = () => {
-      let imageWidth = image.width
-      let imageHeight = image.height
-      let imageRatio = imageWidth / imageHeight
-      let w, h
-      if (imageWidth <= a4Width && imageHeight <= a4Height) {
-        // 使用图片原始宽高
-        w = imageWidth
-        h = imageHeight
-      } else if (a4Ratio > imageRatio) {
-        // 以a4Height为高度，缩放图片宽度
-        w = imageRatio * a4Height
-        h = a4Height
-      } else {
-        // 以a4Width为宽度，缩放图片高度
-        w = a4Width
-        h = a4Width / imageRatio
-      }
-      pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h)
-      pdf.save(name)
-    }
-    image.src = img
-  }
-
  //  在svg上绘制思维导图背景
  drawBackgroundToSvg(svg) {
    return new Promise(async resolve => {
@@ -208,16 +147,57 @@ class Export {
    })
  }

+  //  导出为png
+  /**
+   * 方法1.把svg的图片都转化成data:url格式，再转换
+   * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
+   */
+  async png(name, transparent = false) {
+    let { node, str } = await this.getSvgData()
+    // 如果开启了富文本，则使用htmltocanvas转换为图片
+    if (this.mindMap.richText) {
+      let res =  await this.mindMap.richText.handleExportPng(node.node)
+      let imgDataUrl = await this.svgToPng(res, transparent)
+      return imgDataUrl
+    }
+    // 转换成blob数据
+    let blob = new Blob([str], {
+      type: 'image/svg+xml'
+    })
+    // 转换成data:url数据
+    let svgUrl = await readBlob(blob)
+    // 绘制到canvas上
+    let res = await this.svgToPng(svgUrl, transparent)
+    return res
+  }
+
+  //  导出为pdf
+  async pdf(name) {
+    if (!this.mindMap.doExportPDF) {
+      throw new Error('请注册ExportPDF插件')
+    }
+    let img = await this.png()
+    this.mindMap.doExportPDF.pdf(name, img)
+  }
+
+  // 导出为xmind
+  async xmind(name) {
+    if (!this.mindMap.doExportXMind) {
+      throw new Error('请注册ExportXMind插件')
+    }
+    const data = this.mindMap.getData()
+    const blob = await this.mindMap.doExportXMind.xmind(data, name)
+    const res = await readBlob(blob)
+    return res
+  }
+
  //  导出为svg
-  // domToImage：是否将svg中的dom节点转换成图片的形式
  // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入
-  async svg(name, domToImage = false, plusCssText) {
-    let { node, nodeWithDomToImg } = await this.getSvgData(domToImage)
+  async svg(name, plusCssText) {
+    let { node } = await this.getSvgData()
    // 开启了节点富文本编辑
    if (this.mindMap.richText) {
-      if (domToImage) {
-        node = nodeWithDomToImg
-      } else if (plusCssText) {
+      if (plusCssText) {
        let foreignObjectList = node.find('foreignObject')
        if (foreignObjectList.length > 0) {
          foreignObjectList[0].add(SVG(`<style>${plusCssText}</style>`))
@@ -231,28 +211,32 @@ class Export {
    let blob = new Blob([str], {
      type: 'image/svg+xml'
    })
-    return URL.createObjectURL(blob)
+    let res = await readBlob(blob)
+    return res
  }

  //  导出为json
-  json(name, withConfig = true) {
+  async json(name, withConfig = true) {
    let data = this.mindMap.getData(withConfig)
    let str = JSON.stringify(data)
    let blob = new Blob([str])
-    return URL.createObjectURL(blob)
+    let res = await readBlob(blob)
+    return res
  }

  //  专有文件，其实就是json文件
-  smm(name, withConfig) {
-    return this.json(name, withConfig)
+  async smm(name, withConfig) {
+    let res = await this.json(name, withConfig)
+    return res
  }

  // markdown文件
-  md() {
+  async md() {
    let data = this.mindMap.getData()
    let content = transformToMarkdown(data)
    let blob = new Blob([content])
-    return URL.createObjectURL(blob)
+    let res = await readBlob(blob)
+    return res
  }
 }

--- a/simple-mind-map/src/plugins/ExportPDF.js
+++ b/simple-mind-map/src/plugins/ExportPDF.js
@@ -0,0 +1,44 @@
+import JsPDF from 'jspdf'
+
+//  导出PDF类，需要通过Export插件使用
+class ExportPDF {
+  //  构造函数
+  constructor(opt) {
+    this.mindMap = opt.mindMap
+  }
+
+  //  导出为pdf
+  pdf(name, img) {
+    let pdf = new JsPDF('', 'pt', 'a4')
+    let a4Width = 595
+    let a4Height = 841
+    let a4Ratio = a4Width / a4Height
+    let image = new Image()
+    image.onload = () => {
+      let imageWidth = image.width
+      let imageHeight = image.height
+      let imageRatio = imageWidth / imageHeight
+      let w, h
+      if (imageWidth <= a4Width && imageHeight <= a4Height) {
+        // 使用图片原始宽高
+        w = imageWidth
+        h = imageHeight
+      } else if (a4Ratio > imageRatio) {
+        // 以a4Height为高度，缩放图片宽度
+        w = imageRatio * a4Height
+        h = a4Height
+      } else {
+        // 以a4Width为宽度，缩放图片高度
+        w = a4Width
+        h = a4Width / imageRatio
+      }
+      pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h)
+      pdf.save(name)
+    }
+    image.src = img
+  }
+}
+
+ExportPDF.instanceName = 'doExportPDF'
+
+export default ExportPDF
--- a/simple-mind-map/src/plugins/ExportXMind.js
+++ b/simple-mind-map/src/plugins/ExportXMind.js
@@ -0,0 +1,19 @@
+import xmind from '../parse/xmind'
+
+//  导出XMind类，需要通过Export插件使用
+class ExportXMind {
+  //  构造函数
+  constructor(opt) {
+    this.mindMap = opt.mindMap
+  }
+
+  // 导出xmind
+  async xmind(data, name) {
+    const zipData = await xmind.transformToXmind(data, name)
+    return zipData
+  }
+}
+
+ExportXMind.instanceName = 'doExportXMind'
+
+export default ExportXMind
--- a/simple-mind-map/src/plugins/KeyboardNavigation.js
+++ b/simple-mind-map/src/plugins/KeyboardNavigation.js
@@ -1,5 +1,5 @@
-import { bfsWalk } from './utils'
-import { CONSTANTS } from './utils/constant'
+import { bfsWalk } from '../utils'
+import { CONSTANTS } from '../constants/constant'

 //  键盘导航类
 class KeyboardNavigation {
@@ -28,8 +28,7 @@ class KeyboardNavigation {
      this.focus(dir)
    } else {
      let root = this.mindMap.renderer.root
-      this.mindMap.renderer.moveNodeToCenter(root)
-      root.active()
+      this.mindMap.execCommand('GO_TARGET_NODE', root)
    }
  }

@@ -81,8 +80,7 @@ class KeyboardNavigation {

    // 找到了则让目标节点聚焦
    if (targetNode) {
-      this.mindMap.renderer.moveNodeToCenter(targetNode)
-      targetNode.active()
+      this.mindMap.execCommand('GO_TARGET_NODE', targetNode)
    }
  }

--- a/simple-mind-map/src/plugins/MiniMap.js
+++ b/simple-mind-map/src/plugins/MiniMap.js
--- a/simple-mind-map/src/plugins/NodeImgAdjust.js
+++ b/simple-mind-map/src/plugins/NodeImgAdjust.js
@@ -0,0 +1,223 @@
+// 节点图片大小调整插件
+import { resizeImgSizeByOriginRatio } from '../utils/index'
+import btnsSvg from '../svg/btns'
+
+class NodeImgAdjust {
+  //  构造函数
+  constructor({ mindMap }) {
+    this.mindMap = mindMap
+    this.resizeBtnSize = 26 // 调整按钮的大小
+    this.handleEl = null // 自定义元素，用来渲染临时图片、调整按钮
+    this.isShowHandleEl = false // 自定义元素是否在显示中
+    this.node = null // 当前节点实例
+    this.img = null // 当前节点的图片节点
+    this.rect = null // 当前图片节点的尺寸信息
+    this.isMousedown = false // 当前是否是按住调整按钮状态
+    this.currentImgWidth = 0 // 当前拖拽实时图片的大小
+    this.currentImgHeight = 0
+    this.isAdjusted = false // 是否是拖拽结束后的渲染期间
+    this.bindEvent()
+  }
+
+  // 监听事件
+  bindEvent() {
+    this.onNodeImgMouseleave = this.onNodeImgMouseleave.bind(this)
+    this.onNodeImgMousemove = this.onNodeImgMousemove.bind(this)
+    this.onMousemove = this.onMousemove.bind(this)
+    this.onMouseup = this.onMouseup.bind(this)
+    this.onRenderEnd = this.onRenderEnd.bind(this)
+    this.mindMap.on('node_img_mouseleave', this.onNodeImgMouseleave)
+    this.mindMap.on('node_img_mousemove', this.onNodeImgMousemove)
+    this.mindMap.on('mousemove', this.onMousemove)
+    this.mindMap.on('mouseup', this.onMouseup)
+    this.mindMap.on('node_mouseup', this.onMouseup)
+    this.mindMap.on('node_tree_render_end', this.onRenderEnd)
+  }
+
+  // 解绑事件
+  unBindEvent() {
+    this.mindMap.off('node_img_mouseleave', this.onNodeImgMouseleave)
+    this.mindMap.off('node_img_mousemove', this.onNodeImgMousemove)
+    this.mindMap.off('mousemove', this.onMousemove)
+    this.mindMap.off('mouseup', this.onMouseup)
+    this.mindMap.off('node_mouseup', this.onMouseup)
+    this.mindMap.off('node_tree_render_end', this.onRenderEnd)
+  }
+
+  // 节点图片鼠标移动事件
+  onNodeImgMousemove(node, img) {
+    // 如果当前正在拖动调整中那么直接返回
+    if (this.isMousedown || this.isAdjusted || this.mindMap.opt.readonly) return
+    // 如果在当前节点内移动，以及自定义元素已经是显示状态，那么直接返回
+    if (this.node === node && this.isShowHandleEl) return
+    // 更新当前节点信息
+    this.node = node
+    this.img = img
+    this.rect = this.img.rbox()
+    // 显示自定义元素
+    this.showHandleEl()
+  }
+
+  // 节点图片鼠标移出事件
+  onNodeImgMouseleave() {
+    if (this.isMousedown) return
+    this.hideHandleEl()
+  }
+
+  // 隐藏节点实际的图片
+  hideNodeImage() {
+    if (!this.img) return
+    this.img.hide()
+  }
+
+  // 显示节点实际的图片
+  showNodeImage() {
+    if (!this.img) return
+    this.img.show()
+  }
+
+  // 显示自定义元素
+  showHandleEl() {
+    if (!this.handleEl) {
+      this.createResizeBtnEl()
+    }
+    this.setHandleElRect()
+    document.body.appendChild(this.handleEl)
+    this.isShowHandleEl = true
+  }
+
+  // 隐藏自定义元素
+  hideHandleEl() {
+    if (!this.isShowHandleEl) return
+    this.isShowHandleEl = false
+    document.body.removeChild(this.handleEl)
+    this.handleEl.style.backgroundImage = ``
+    this.handleEl.style.width = 0
+    this.handleEl.style.height = 0
+    this.handleEl.style.left = 0
+    this.handleEl.style.top = 0
+  }
+
+  // 设置自定义元素尺寸位置信息
+  setHandleElRect() {
+    let { width, height, x, y } = this.rect
+    this.handleEl.style.left = `${x}px`
+    this.handleEl.style.top = `${y}px`
+    this.currentImgWidth = width
+    this.currentImgHeight = height
+    this.updateHandleElSize()
+  }
+
+  // 更新自定义元素宽高
+  updateHandleElSize() {
+    this.handleEl.style.width = `${this.currentImgWidth}px`
+    this.handleEl.style.height = `${this.currentImgHeight}px`
+  }
+
+  // 创建调整按钮元素
+  createResizeBtnEl() {
+    // 容器元素
+    this.handleEl = document.createElement('div')
+    this.handleEl.style.cssText = `
+      pointer-events: none;
+      position: fixed;
+      background-size: cover;
+    `
+    // 调整按钮元素
+    const btnEl = document.createElement('div')
+    btnEl.innerHTML = btnsSvg.imgAdjust
+    btnEl.style.cssText = `
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      pointer-events: auto;
+      background-color: rgba(0, 0, 0, 0.3);
+      width: ${this.resizeBtnSize}px;
+      height: ${this.resizeBtnSize}px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: nwse-resize;
+    `
+    this.handleEl.appendChild(btnEl)
+    // 给按钮元素绑定事件
+    btnEl.addEventListener('mouseenter', () => {
+      // 移入按钮，会触发节点图片的移出事件，所以需要再次显示按钮
+      this.showHandleEl()
+    })
+    btnEl.addEventListener('mouseleave', () => {
+      // 移除按钮，需要隐藏按钮
+      if (this.isMousedown) return
+      this.hideHandleEl()
+    })
+    btnEl.addEventListener('mousedown', e => {
+      this.onMousedown(e)
+    })
+  }
+
+  // 鼠标按钮按下事件
+  onMousedown() {
+    this.isMousedown = true
+    // 隐藏节点实际图片
+    this.hideNodeImage()
+    // 将节点图片渲染到自定义元素上
+    this.handleEl.style.backgroundImage = `url(${this.node.nodeData.data.image})`
+  }
+
+  // 鼠标移动
+  onMousemove(e) {
+    if (!this.isMousedown) return
+    e.preventDefault()
+    // 计算当前拖拽位置对应的图片的实时大小
+    let { width: imageOriginWidth, height: imageOriginHeight } =
+      this.node.nodeData.data.imageSize
+    let newWidth = e.clientX - this.rect.x
+    let newHeight = e.clientY - this.rect.y
+    if (newWidth <= 0 || newHeight <= 0) return
+    let [actWidth, actHeight] = resizeImgSizeByOriginRatio(
+      imageOriginWidth,
+      imageOriginHeight,
+      newWidth,
+      newHeight
+    )
+    this.currentImgWidth = actWidth
+    this.currentImgHeight = actHeight
+    this.updateHandleElSize()
+  }
+
+  // 鼠标松开
+  onMouseup() {
+    if (!this.isMousedown) return
+    // 显示节点实际图片
+    this.showNodeImage()
+    // 隐藏自定义元素
+    this.hideHandleEl()
+    // 更新节点图片为新的大小
+    let { image, imageTitle } = this.node.nodeData.data
+    let { scaleX, scaleY } = this.mindMap.draw.transform()
+    this.mindMap.execCommand('SET_NODE_IMAGE', this.node, {
+      url: image,
+      title: imageTitle,
+      width: this.currentImgWidth / scaleX,
+      height: this.currentImgHeight / scaleY,
+      custom: true // 代表自定义了图片大小
+    })
+    this.isAdjusted = true
+    this.isMousedown = false
+  }
+
+  // 渲染完成事件
+  onRenderEnd() {
+    if (!this.isAdjusted) return
+    this.isAdjusted = false
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+}
+
+NodeImgAdjust.instanceName = 'nodeImgAdjust'
+
+export default NodeImgAdjust
--- a/simple-mind-map/src/plugins/RichText.js
+++ b/simple-mind-map/src/plugins/RichText.js
@@ -1,9 +1,8 @@
 import Quill from 'quill'
 import 'quill/dist/quill.snow.css'
 import html2canvas from 'html2canvas'
-import { Image as SvgImage } from '@svgdotjs/svg.js'
-import { walk } from './utils'
-import { CONSTANTS } from './utils/constant'
+import { walk, getTextFromHtml } from '../utils'
+import { CONSTANTS } from '../constants/constant'

 let extended = false

@@ -40,11 +39,34 @@ class RichText {
    this.range = null
    this.lastRange = null
    this.node = null
+    this.isInserting = false
    this.styleEl = null
    this.cacheEditingText = ''
+    this.lostStyle = false
+    this.isCompositing = false
    this.initOpt()
    this.extendQuill()
    this.appendCss()
+    this.bindEvent()
+
+    // 处理数据，转成富文本格式
+    if (this.mindMap.opt.data) {
+      this.mindMap.opt.data = this.handleSetData(this.mindMap.opt.data)
+    }
+  }
+
+  // 绑定事件
+  bindEvent() {
+    this.onCompositionStart = this.onCompositionStart.bind(this)
+    this.onCompositionEnd = this.onCompositionEnd.bind(this)
+    window.addEventListener('compositionstart', this.onCompositionStart)
+    window.addEventListener('compositionend', this.onCompositionEnd)
+  }
+
+  // 解绑事件
+  unbindEvent() {
+    window.removeEventListener('compositionstart', this.onCompositionStart)
+    window.removeEventListener('compositionend', this.onCompositionEnd)
  }

  // 插入样式
@@ -55,6 +77,7 @@ class RichText {
        padding: 0;
        height: auto;
        line-height: normal;
+        -webkit-user-select: text;
      }
      
      .ql-container {
@@ -65,14 +88,15 @@ class RichText {
      .ql-container.ql-snow {
        border: none;
      }
+
+      .smm-richtext-node-wrap p {
+        font-family: auto;
+      }
+
+      .smm-richtext-node-edit-wrap p {
+        font-family: auto;
+      }
    `
-    // .smm-richtext-node-wrap p {
-    //   display: flex;
-    // }
-    
-    // .smm-richtext-node-edit-wrap p {
-    //   display: flex;
-    // }
    this.styleEl = document.createElement('style')
    this.styleEl.type = 'text/css'
    this.styleEl.innerHTML = cssText
@@ -122,56 +146,64 @@ class RichText {
  }

  // 显示文本编辑控件
-  showEditText(node, rect) {
+  showEditText(node, rect, isInserting) {
    if (this.showTextEdit) {
      return
    }
    this.node = node
+    this.isInserting = isInserting
    if (!rect) rect = node._textData.node.node.getBoundingClientRect()
    this.mindMap.emit('before_show_text_edit')
    this.mindMap.renderer.textEdit.registerTmpShortcut()
-    const paddingX = 5
-    const paddingY = 3
+    // 原始宽高
+    let g = node._textData.node
+    let originWidth = g.attr('data-width')
+    let originHeight = g.attr('data-height')
+    // 缩放值
+    let scaleX = rect.width / originWidth
+    let scaleY = rect.height / originHeight
+    // 内边距
+    const paddingX = 6
+    const paddingY = 4
    if (!this.textEditNode) {
      this.textEditNode = document.createElement('div')
      this.textEditNode.classList.add('smm-richtext-node-edit-wrap')
-      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: ${paddingY}px ${paddingX}px;margin-left: -${paddingX}px;margin-top: -${paddingY}px;`
+      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: ${paddingY}px ${paddingX}px;`
      this.textEditNode.addEventListener('click', e => {
        e.stopPropagation()
      })
      document.body.appendChild(this.textEditNode)
    }
-    // 原始宽高
-    let g = node._textData.node
-    let originWidth = g.attr('data-width')
-    let originHeight = g.attr('data-height')
    // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
    let bgColor = node.style.merge('fillColor')
+    this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px`
+    this.textEditNode.style.marginTop = `-${paddingY * scaleY}px`
    this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
-    this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? '#fff' : bgColor
+    this.textEditNode.style.backgroundColor =
+      bgColor === 'transparent' ? '#fff' : bgColor
    this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px'
    this.textEditNode.style.minHeight = originHeight + 'px'
-    this.textEditNode.style.left =
-      rect.left + (rect.width - originWidth) / 2 + 'px'
-    this.textEditNode.style.top =
-      rect.top + (rect.height - originHeight) / 2 + 'px'
+    this.textEditNode.style.left = rect.left + 'px'
+    this.textEditNode.style.top = rect.top + 'px'
    this.textEditNode.style.display = 'block'
-    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px'
-    this.textEditNode.style.transform = `scale(${rect.width / originWidth}, ${
-      rect.height / originHeight
-    })`
+    this.textEditNode.style.maxWidth =
+      this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px'
+    this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})`
+    this.textEditNode.style.transformOrigin = 'left top'
    if (!node.nodeData.data.richText) {
      // 还不是富文本的情况
      let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
      let html = `<p>${text}</p>`
      this.textEditNode.innerHTML = this.cacheEditingText || html
    } else {
-      this.textEditNode.innerHTML = this.cacheEditingText || node.nodeData.data.text
+      this.textEditNode.innerHTML =
+        this.cacheEditingText || node.nodeData.data.text
    }
    this.initQuillEditor()
    document.querySelector('.ql-editor').style.minHeight = originHeight + 'px'
    this.showTextEdit = true
-    this.focus()
+    // 如果是刚创建的节点，那么默认全选，否则普通激活不全选
+    this.focus(isInserting ? 0 : null)
    if (!node.nodeData.data.richText) {
      // 如果是非富文本的情况，需要手动应用文本样式
      this.setTextStyleIfNotRichText(node)
@@ -190,7 +222,7 @@ class RichText {
      underline: node.style.merge('textDecoration') === 'underline',
      strike: node.style.merge('textDecoration') === 'line-through'
    }
-    this.formatAllText(style)
+    this.pureFormatAllText(style)
  }

  // 获取当前正在编辑的内容
@@ -206,7 +238,8 @@ class RichText {
      return
    }
    let html = this.getEditText()
-    let list = nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList
+    let list =
+      nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList
    list.forEach(node => {
      this.mindMap.execCommand('SET_NODE_TEXT', node, html, true)
      if (node.isGeneralization) {
@@ -215,15 +248,12 @@ class RichText {
      }
      this.mindMap.render()
    })
-    this.mindMap.emit(
-      'hide_text_edit',
-      this.textEditNode,
-      list
-    )
+    this.mindMap.emit('hide_text_edit', this.textEditNode, list)
    this.textEditNode.style.display = 'none'
    this.showTextEdit = false
    this.mindMap.emit('rich_text_selection_change', false)
    this.node = null
+    this.isInserting = false
  }

  // 初始化Quill富文本编辑器
@@ -245,6 +275,8 @@ class RichText {
      theme: 'snow'
    })
    this.quill.on('selection-change', range => {
+      // 刚创建的节点全选不需要显示操作条
+      if (this.isInserting) return
      this.lastRange = this.range
      this.range = null
      if (range) {
@@ -273,6 +305,37 @@ class RichText {
        )
      }
    })
+    this.quill.on('text-change', () => {
+      let contents = this.quill.getContents()
+      let len = contents.ops.length
+      // 如果编辑过程中删除所有字符，那么会丢失主题的样式
+      if (len <= 0 || (len === 1 && contents.ops[0].insert === '\n')) {
+        this.lostStyle = true
+        // 需要删除节点的样式数据
+        this.syncFormatToNodeConfig(null, true)
+      } else if (this.lostStyle && !this.isCompositing) {
+        // 如果处于样式丢失状态，那么需要进行格式化加回样式
+        this.setTextStyleIfNotRichText(this.node)
+        this.lostStyle = false
+      }
+    })
+  }
+
+  // 正则输入中文
+  onCompositionStart() {
+    if (!this.showTextEdit) {
+      return
+    }
+    this.isCompositing = true
+  }
+
+  // 中文输入结束
+  onCompositionEnd() {
+    if (!this.showTextEdit || !this.lostStyle) {
+      return
+    }
+    this.isCompositing = false
+    this.setTextStyleIfNotRichText(this.node)
  }

  // 选中全部
@@ -281,9 +344,9 @@ class RichText {
  }

  // 聚焦
-  focus() {
+  focus(start) {
    let len = this.quill.getLength()
-    this.quill.setSelection(len, len)
+    this.quill.setSelection(typeof start === 'number' ? start : len, len)
  }

  // 格式化当前选中的文本
@@ -292,7 +355,9 @@ class RichText {
    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)
+    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)
    }
@@ -313,6 +378,11 @@ class RichText {
  // 格式化所有文本
  formatAllText(config = {}) {
    this.syncFormatToNodeConfig(config)
+    this.pureFormatAllText(config)
+  }
+
+  // 纯粹的格式化所有文本
+  pureFormatAllText(config = {}) {
    this.quill.formatText(0, this.quill.getLength(), config)
  }

@@ -321,7 +391,14 @@ class RichText {
    if (!this.node) return
    if (clear) {
      // 清除文本样式
-      ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textDecoration', 'color'].forEach((prop) => {
+      ;[
+        'fontFamily',
+        'fontSize',
+        'fontWeight',
+        'fontStyle',
+        'textDecoration',
+        'color'
+      ].forEach(prop => {
        delete this.node.nodeData.data[prop]
      })
    } else {
@@ -396,94 +473,40 @@ class RichText {
    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()
+  // 处理导出为图片
+  async handleExportPng(node) {
+    let el = document.createElement('div')
+    el.style.position = 'absolute'
+    el.style.left = '-9999999px'
+    el.appendChild(node)
+    this.mindMap.el.appendChild(el)
+    // 遍历所有节点，将它们的margin和padding设为0
+    let walk = root => {
+      root.style.margin = 0
+      root.style.padding = 0
+      if (root.hasChildNodes()) {
+        Array.from(root.children).forEach(item => {
+          walk(item)
+        })
+      }
    }
-  }
-
-  // 将svg中嵌入的dom元素转换成图片
-  handleSvgDomElements(svg) {
-    return new Promise((resolve, reject) => {
-      svg = svg.clone()
-      let foreignObjectList = svg.find('foreignObject')
-      let index = 0
-      let len = foreignObjectList.length
-      let transform = async () => {
-        this.mindMap.emit('transforming-dom-to-images', index, len)
-        try {
-          let item = foreignObjectList[index++]
-          let parent = item.parent()
-          let clone = item.first().node.cloneNode(true)
-          let div = document.createElement('div')
-          div.style.cssText = `position: fixed; left: -999999px;`
-          div.appendChild(clone)
-          this.mindMap.el.appendChild(div)
-          let canvas = await html2canvas(clone, {
-            backgroundColor: null
-          })
-          // 优先使用原始宽高，因为当设备的window.devicePixelRatio不为1时，html2canvas输出的图片会更大
-          let imgNodeWidth = parent.attr('data-width') || canvas.width
-          let imgNodeHeight = parent.attr('data-height') || canvas.height
-          this.mindMap.el.removeChild(div)
-          let imgNode = new SvgImage()
-            .load(canvas.toDataURL())
-            .size(imgNodeWidth, imgNodeHeight)
-            .x((parent ? parent.attr('data-offsetx') : 0) || 0)
-          item.replace(imgNode)
-          if (index <= len - 1) {
-            setTimeout(() => {
-              transform()
-            }, 0)
-          } else {
-            resolve({
-              svg: svg,
-              svgHTML: svg.svg()
-            })
-          }
-        } catch (error) {
-          reject(error)
-        }
-      }
-      if (len > 0) {
-        transform()
-      } else {
-        resolve(null)
-      }
+    walk(node)
+    let canvas = await html2canvas(el, {
+      backgroundColor: null
    })
+    this.mindMap.el.removeChild(el)
+    return canvas.toDataURL()
  }

  // 将所有节点转换成非富文本节点
  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
+          node.data.text = getTextFromHtml(node.data.text)
          // delete node.data.uid
        }
      },
@@ -498,6 +521,23 @@ class RichText {
    this.mindMap.render(null, CONSTANTS.TRANSFORM_TO_NORMAL_NODE)
  }

+  // 处理导入数据
+  handleSetData(data) {
+    let walk = root => {
+      if (!root.data.richText) {
+        root.data.richText = true
+        root.data.resetRichText = true
+      }
+      if (root.children && root.children.length > 0) {
+        Array.from(root.children).forEach(item => {
+          walk(item)
+        })
+      }
+    }
+    walk(data)
+    return data
+  }
+
  // 插件被移除前做的事情
  beforePluginRemove() {
    this.transformAllNodesToNormalNode()
--- a/simple-mind-map/src/plugins/Select.js
+++ b/simple-mind-map/src/plugins/Select.js
@@ -1,4 +1,4 @@
-import { bfsWalk, throttle } from './utils'
+import { bfsWalk, throttle } from '../utils'

 //  选择节点类

@@ -22,9 +22,14 @@ class Select {
      if (this.mindMap.opt.readonly) {
        return
      }
-      if (!e.ctrlKey && e.which !== 3) {
+      let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
+      if (
+        !e.ctrlKey &&
+        (useLeftKeySelectionRightKeyDrag ? e.which !== 1 : e.which !== 3)
+      ) {
        return
      }
+      e.preventDefault()
      this.isMousedown = true
      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
      this.mouseDownX = x
@@ -146,25 +151,24 @@ class Select {
      let bottom = (top + height) * scaleY + translateY
      left = left * scaleX + translateX
      top = top * scaleY + translateY
-      if ((left >= minx && left <= maxx ||
-          right >= minx && right <= maxx) && 
-          (top >= miny && top <= maxy ||
-          bottom >= miny && bottom <= maxy)
-        ) {
+      if (
+        ((left >= minx && left <= maxx) || (right >= minx && right <= maxx)) &&
+        ((top >= miny && top <= maxy) || (bottom >= miny && bottom <= maxy))
+      ) {
        // this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
-          if (node.nodeData.data.isActive) {
-            return
-          }
-          this.mindMap.renderer.setNodeActive(node, true)
-          this.mindMap.renderer.addActiveNode(node)
+        if (node.nodeData.data.isActive) {
+          return
+        }
+        this.mindMap.renderer.setNodeActive(node, true)
+        this.mindMap.renderer.addActiveNode(node)
        // })
      } else if (node.nodeData.data.isActive) {
        // this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
-          if (!node.nodeData.data.isActive) {
-            return
-          }
-          this.mindMap.renderer.setNodeActive(node, false)
-          this.mindMap.renderer.removeActiveNode(node)
+        if (!node.nodeData.data.isActive) {
+          return
+        }
+        this.mindMap.renderer.setNodeActive(node, false)
+        this.mindMap.renderer.removeActiveNode(node)
        // })
      }
    })
--- a/simple-mind-map/src/plugins/TouchEvent.js
+++ b/simple-mind-map/src/plugins/TouchEvent.js
@@ -0,0 +1,127 @@
+// 手势事件支持类
+
+class TouchEvent {
+  //  构造函数
+  constructor({ mindMap }) {
+    this.mindMap = mindMap
+    this.touchesNum = 0
+    this.singleTouchstartEvent = null
+    this.clickNum = 0
+    this.doubleTouchmoveDistance = 0
+    this.bindEvent()
+  }
+
+  // 绑定事件
+  bindEvent() {
+    this.onTouchstart = this.onTouchstart.bind(this)
+    this.onTouchmove = this.onTouchmove.bind(this)
+    this.onTouchcancel = this.onTouchcancel.bind(this)
+    this.onTouchend = this.onTouchend.bind(this)
+    window.addEventListener('touchstart', this.onTouchstart)
+    window.addEventListener('touchmove', this.onTouchmove)
+    window.addEventListener('touchcancel', this.onTouchcancel)
+    window.addEventListener('touchend', this.onTouchend)
+  }
+
+  // 解绑事件
+  unBindEvent() {
+    window.removeEventListener('touchstart', this.onTouchstart)
+    window.removeEventListener('touchmove', this.onTouchmove)
+    window.removeEventListener('touchcancel', this.onTouchcancel)
+    window.removeEventListener('touchend', this.onTouchend)
+  }
+
+  // 手指按下事件
+  onTouchstart(e) {
+    this.touchesNum = e.touches.length
+    if (this.touchesNum === 1) {
+      let touch = e.touches[0]
+      this.singleTouchstartEvent = touch
+      this.dispatchMouseEvent('mousedown', touch.target, touch)
+    }
+  }
+
+  // 手指移动事件
+  onTouchmove(e) {
+    let len = e.touches.length
+    if (len === 1) {
+      let touch = e.touches[0]
+      this.dispatchMouseEvent('mousemove', touch.target, touch)
+    } else if (len === 2) {
+      let touch1 = e.touches[0]
+      let touch2 = e.touches[1]
+      let ox = touch1.clientX - touch2.clientX
+      let oy = touch1.clientY - touch2.clientY
+      let distance = Math.sqrt(Math.pow(ox, 2) + Math.pow(oy, 2))
+      // 以两指中心点进行缩放
+      let { x: touch1ClientX, y: touch1ClientY } = this.mindMap.toPos(touch1.clientX, touch1.clientY)
+      let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos(touch2.clientX, touch2.clientY)
+      let cx = (touch1ClientX + touch2ClientX) / 2
+      let cy = (touch1ClientY + touch2ClientY) / 2
+      if (distance > this.doubleTouchmoveDistance) {
+        // 放大
+        this.mindMap.view.enlarge(cx, cy)
+      } else {
+        // 缩小
+        this.mindMap.view.narrow(cx, cy)
+      }
+      this.doubleTouchmoveDistance = distance
+    }
+  }
+
+  // 手指取消事件
+  onTouchcancel(e) {}
+
+  // 手指松开事件
+  onTouchend(e) {
+    this.dispatchMouseEvent('mouseup', e.target)
+    if (this.touchesNum === 1) {
+      // 模拟双击事件
+      this.clickNum++
+      setTimeout(() => {
+        this.clickNum = 0
+      }, 300)
+      let ev = this.singleTouchstartEvent
+      if (this.clickNum > 1) {
+        this.clickNum = 0
+        this.dispatchMouseEvent('dblclick', ev.target, ev)
+      } else {
+        // 点击事件应该不用模拟
+        // this.dispatchMouseEvent('click', ev.target, ev)
+      }
+    }
+    this.touchesNum = 0
+    this.singleTouchstartEvent = null
+    this.doubleTouchmoveDistance = 0
+  }
+
+  // 发送鼠标事件
+  dispatchMouseEvent(eventName, target, e) {
+    let opt = {}
+    if (e) {
+      opt = {
+        screenX: e.screenX,
+        screenY: e.screenY,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        which: 1
+      }
+    }
+    let event = new MouseEvent(eventName, {
+      view: window,
+      bubbles: true,
+      cancelable: true,
+      ...opt
+    })
+    target.dispatchEvent(event)
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+}
+
+TouchEvent.instanceName = 'touchEvent'
+
+export default TouchEvent
--- a/simple-mind-map/src/plugins/Watermark.js
+++ b/simple-mind-map/src/plugins/Watermark.js
@@ -1,5 +1,5 @@
 import { Text, G } from '@svgdotjs/svg.js'
-import { degToRad, camelCaseToHyphen } from './utils'
+import { degToRad, camelCaseToHyphen } from '../utils'
 import merge from 'deepmerge'

 // 水印类
--- a/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js
+++ b/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js
@@ -0,0 +1,241 @@
+import {
+  getAssociativeLineTargetIndex,
+  joinCubicBezierPath,
+  computeNodePoints,
+  getDefaultControlPointOffsets
+} from './associativeLineUtils'
+
+// 创建控制点、连线节点
+function 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')
+}
+
+// 创建控制点
+function 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)
+    })
+}
+
+// 控制点的鼠标按下事件
+function onControlPointMousedown(e, pointKey) {
+  e.stopPropagation()
+  this.isControlPointMousedown = true
+  this.mousedownControlPointKey = pointKey
+}
+
+// 控制点的鼠标移动事件
+function 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, text, 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)
+  this.updateTextPos(path, text)
+  this.updateTextEditBoxPos(text)
+}
+
+// 控制点的鼠标移动事件
+function 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)
+}
+
+// 复位控制点移动
+function resetControlPoint() {
+  this.isControlPointMousedown = false
+  this.mousedownControlPointKey = ''
+  this.controlPointMousemoveState = {
+    pos: null,
+    startPoint: null,
+    endPoint: null,
+    targetIndex: ''
+  }
+}
+
+// 渲染控制点
+function 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)
+}
+
+// 删除控制点
+function 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
+}
+
+// 隐藏控制点
+function hideControls() {
+  if (!this.controlLine1) return
+  ;[
+    this.controlLine1,
+    this.controlLine2,
+    this.controlPoint1,
+    this.controlPoint2
+  ].forEach(item => {
+    item.hide()
+  })
+}
+
+// 显示控制点
+function showControls() {
+  if (!this.controlLine1) return
+  ;[
+    this.controlLine1,
+    this.controlLine2,
+    this.controlPoint1,
+    this.controlPoint2
+  ].forEach(item => {
+    item.show()
+  })
+}
+
+export default {
+  createControlNodes,
+  createOneControlNode,
+  onControlPointMousedown,
+  onControlPointMousemove,
+  onControlPointMouseup,
+  resetControlPoint,
+  renderControls,
+  removeControls,
+  hideControls,
+  showControls
+}
--- a/simple-mind-map/src/plugins/associativeLine/associativeLineText.js
+++ b/simple-mind-map/src/plugins/associativeLine/associativeLineText.js
@@ -0,0 +1,167 @@
+import { Text } from '@svgdotjs/svg.js'
+import { getStrWithBrFromHtml } from '../../utils/index'
+
+// 创建文字节点
+function createText(data) {
+  let g = this.draw.group()
+  const setActive = () => {
+    if (
+      !this.activeLine ||
+      this.activeLine[3] !== data.node ||
+      this.activeLine[4] !== data.toNode
+    ) {
+      this.setActiveLine({
+        ...data,
+        text: g
+      })
+    }
+  }
+  g.click(e => {
+    e.stopPropagation()
+    setActive()
+  })
+  g.on('dblclick', e => {
+    e.stopPropagation()
+    setActive()
+    if (!this.activeLine) return
+    this.showEditTextBox(g)
+  })
+  return g
+}
+
+//  显示文本编辑框
+function showEditTextBox(g) {
+  this.mindMap.emit('before_show_text_edit')
+  // 注册回车快捷键
+  this.mindMap.keyCommand.addShortcut('Enter', () => {
+    this.hideEditTextBox()
+  })
+  
+  if (!this.textEditNode) {
+    this.textEditNode = document.createElement('div')
+    this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none; word-break: break-all;`
+    this.textEditNode.setAttribute('contenteditable', true)
+    this.textEditNode.addEventListener('keyup', e => {
+      e.stopPropagation()
+    })
+    this.textEditNode.addEventListener('click', e => {
+      e.stopPropagation()
+    })
+    document.body.appendChild(this.textEditNode)
+  }
+  let {
+    associativeLineTextFontSize,
+    associativeLineTextFontFamily,
+    associativeLineTextLineHeight
+  } = this.mindMap.themeConfig
+  let scale = this.mindMap.view.scale
+  let [, , , node, toNode] = this.activeLine
+  let textLines = (
+    this.getText(node, toNode) || this.mindMap.opt.defaultAssociativeLineText
+  ).split(/\n/gim)
+  this.textEditNode.style.fontFamily = associativeLineTextFontFamily
+  this.textEditNode.style.fontSize = associativeLineTextFontSize * scale + 'px'
+  this.textEditNode.style.lineHeight = textLines.length > 1 ? associativeLineTextLineHeight : 'normal'
+  this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
+  this.textEditNode.innerHTML = textLines.join('<br>')
+  this.textEditNode.style.display = 'block'
+  this.updateTextEditBoxPos(g)
+  this.showTextEdit = true
+}
+
+// 处理画布缩放
+function onScale() {
+  this.hideEditTextBox()
+}
+
+// 更新文本编辑框位置
+function updateTextEditBoxPos(g) {
+  let rect = g.node.getBoundingClientRect()
+  this.textEditNode.style.minWidth = rect.width + 10 + 'px'
+  this.textEditNode.style.minHeight = rect.height + 6 + 'px'
+  this.textEditNode.style.left = rect.left + 'px'
+  this.textEditNode.style.top = rect.top + 'px'
+}
+
+//  隐藏文本编辑框
+function hideEditTextBox() {
+  if (!this.showTextEdit) {
+    return
+  }
+  let [path, , text, node, toNode] = this.activeLine
+  let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
+  this.mindMap.execCommand('SET_NODE_DATA', node, {
+    associativeLineText: {
+      ...(node.nodeData.data.associativeLineText || {}),
+      [toNode.nodeData.data.id]: str
+    }
+  })
+  this.textEditNode.style.display = 'none'
+  this.textEditNode.innerHTML = ''
+  this.showTextEdit = false
+  this.renderText(str, path, text)
+  this.mindMap.emit('hide_text_edit')
+}
+
+// 获取某根关联线的文字
+function getText(node, toNode) {
+  let obj = node.nodeData.data.associativeLineText
+  if (!obj) {
+    return ''
+  }
+  return obj[toNode.nodeData.data.id] || ''
+}
+
+// 渲染关联线文字
+function renderText(str, path, text) {
+  if (!str) return
+  let { associativeLineTextFontSize, associativeLineTextLineHeight } =
+    this.mindMap.themeConfig
+  text.clear()
+  let textArr = str.split(/\n/gim)
+  textArr.forEach((item, index) => {
+    let node = new Text().text(item)
+    node.y(associativeLineTextFontSize * associativeLineTextLineHeight * index)
+    this.styleText(node)
+    text.add(node)
+  })
+  updateTextPos(path, text)
+}
+
+// 给文本设置样式
+function styleText(node) {
+  let {
+    associativeLineTextColor,
+    associativeLineTextFontSize,
+    associativeLineTextFontFamily
+  } = this.mindMap.themeConfig
+  node
+    .fill({
+      color: associativeLineTextColor
+    })
+    .css({
+      'font-family': associativeLineTextFontFamily,
+      'font-size': associativeLineTextFontSize
+    })
+}
+
+// 更新关联线文字位置
+function updateTextPos(path, text) {
+  let pathLength = path.length()
+  let centerPoint = path.pointAt(pathLength / 2)
+  let { width: textWidth, height: textHeight } = text.bbox()
+  text.x(centerPoint.x - textWidth / 2)
+  text.y(centerPoint.y - textHeight / 2)
+}
+
+export default {
+  getText,
+  createText,
+  styleText,
+  onScale,
+  showEditTextBox,
+  hideEditTextBox,
+  updateTextEditBoxPos,
+  renderText,
+  updateTextPos
+}
--- a/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js
+++ b/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js
--- a/simple-mind-map/src/svg/btns.js
+++ b/simple-mind-map/src/svg/btns.js
@@ -4,7 +4,11 @@ const open = `<svg t="1618141562310" class="icon" viewBox="0 0 1024 1024" versio
 //  收缩按钮
 const close = `<svg t="1618141589243" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13611" width="200" height="200"><path d="M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z" p-id="13612"></path><path d="M252.928 474.624h518.144v74.24h-518.144z" p-id="13613"></path></svg>`

+// 图片调整按钮
+const imgAdjust = `<svg width="12px" height="12px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M1008.128 614.4a25.6 25.6 0 0 0-27.648 5.632l-142.848 142.848L259.072 186.88 401.92 43.52A25.6 25.6 0 0 0 384 0h-358.4a25.6 25.6 0 0 0-25.6 25.6v358.4a25.6 25.6 0 0 0 43.52 17.92l143.36-142.848 578.048 578.048-142.848 142.848a25.6 25.6 0 0 0 17.92 43.52h358.4a25.6 25.6 0 0 0 25.6-25.6v-358.4a25.6 25.6 0 0 0-15.872-25.088z"  /></svg>`
+
 export default {
  open,
-  close
+  close,
+  imgAdjust
 }
--- a/simple-mind-map/src/svg/icons.js
+++ b/simple-mind-map/src/svg/icons.js
@@ -279,9 +279,9 @@ export const nodeIconList = [
 ]

 //  获取nodeIconList icon内容
-const getNodeIconListIcon = name => {
+const getNodeIconListIcon = (name, extendIconList = []) => {
  let arr = name.split('_')
-  let typeData = nodeIconList.find(item => {
+  let typeData = [...nodeIconList, ...extendIconList].find(item => {
    return item.type === arr[0]
  })
  return typeData.list.find(item => {
--- a/simple-mind-map/src/themes/autumn.js
+++ b/simple-mind-map/src/themes/autumn.js
@@ -0,0 +1,57 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 秋天
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: '#fff2df',
+  // 连线的颜色
+  lineColor: '#b0bc47',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: '#b0bc47',
+  // 根节点样式
+  root: {
+    fillColor: '#e68112',
+    color: '#fff',
+    borderColor: '#e68112',
+    borderWidth: 0,
+    fontSize: 24,
+    active: {
+      borderColor: '#b0bc47',
+      borderWidth: 3
+    }
+  },
+  // 二级节点样式
+  second: {
+    fillColor: '#ffd683',
+    color: '#8c5416',
+    borderColor: '#b0bc47',
+    borderWidth: 2,
+    fontSize: 18,
+    active: {
+      borderColor: '#e68112'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: '#8c5416',
+    active: {
+      borderColor: '#b0bc47'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: '#ffd683',
+    borderColor: '#b0bc47',
+    borderWidth: 2,
+    color: '#8c5416',
+    active: {
+      borderColor: '#e68112'
+    }
+  }
+})
--- a/simple-mind-map/src/themes/avocado.js
+++ b/simple-mind-map/src/themes/avocado.js
@@ -0,0 +1,57 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 牛油果
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: '#e6f1de',
+  // 连线的颜色
+  lineColor: '#f5ffad',
+  lineWidth: 4,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: '#749336',
+  // 根节点样式
+  root: {
+    fillColor: '#94c143',
+    color: '#fff',
+    borderColor: '#94c143',
+    borderWidth: 0,
+    fontSize: 24,
+    active: {
+      borderColor: '#749336',
+      borderWidth: 3
+    }
+  },
+  // 二级节点样式
+  second: {
+    fillColor: '#cee498',
+    color: '#749336',
+    borderColor: '#aec668',
+    borderWidth: 2,
+    fontSize: 18,
+    active: {
+      borderColor: '#749336'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: '#749336',
+    active: {
+      borderColor: '#749336'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: '#cee498',
+    borderColor: '#aec668',
+    borderWidth: 2,
+    color: '#749336',
+    active: {
+      borderColor: '#749336'
+    }
+  }
+})
--- a/simple-mind-map/src/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@@ -34,6 +34,14 @@ export default {
  associativeLineActiveWidth: 8,
  // 关联线激活状态的颜色
  associativeLineActiveColor: 'rgba(2, 167, 240, 1)',
+  // 关联线文字颜色
+  associativeLineTextColor: 'rgb(51, 51, 51)',
+  // 关联线文字大小
+  associativeLineTextFontSize: 14,
+  // 关联线文字行高
+  associativeLineTextLineHeight: 1.2,
+  // 关联线文字字体
+  associativeLineTextFontFamily: '微软雅黑, Microsoft YaHei',
  // 背景颜色
  backgroundColor: '#fafafa',
  // 背景图片
@@ -148,4 +156,38 @@ export const supportActiveStyle = [
  'borderRadius'
 ]

+// 检测主题配置是否是节点大小无关的
+const nodeSizeIndependenceList = [
+  'lineWidth',
+  'lineColor',
+  'lineDasharray',
+  'lineStyle',
+  'generalizationLineWidth',
+  'generalizationLineColor',
+  'associativeLineWidth',
+  'associativeLineColor',
+  'associativeLineActiveWidth',
+  'associativeLineActiveColor',
+  'associativeLineTextColor',
+  'associativeLineTextFontSize',
+  'associativeLineTextLineHeight',
+  'associativeLineTextFontFamily',
+  'backgroundColor',
+  'backgroundImage',
+  'backgroundRepeat',
+  'backgroundPosition',
+  'backgroundSize'
+]
+export const checkIsNodeSizeIndependenceConfig = (config) => {
+  let keys = Object.keys(config)
+  for(let i = 0; i < keys.length; i++) {
+    if (!nodeSizeIndependenceList.find((item) => {
+      return item === keys[i]
+    })) {
+      return false
+    }
+  }
+  return true
+}
+
 export const lineStyleProps = ['lineColor', 'lineDasharray', 'lineWidth']
--- a/simple-mind-map/src/themes/index.js
+++ b/simple-mind-map/src/themes/index.js
@@ -27,6 +27,9 @@ import redSpirit from './redSpirit'
 import blackHumour from './blackHumour'
 import lateNightOffice from './lateNightOffice'
 import blackGold from './blackGold'
+import avocado from './avocado'
+import autumn from './autumn'
+import orangeJuice from './orangeJuice'

 export default {
  default: defaultTheme,
@@ -57,5 +60,8 @@ export default {
  redSpirit,
  blackHumour,
  lateNightOffice,
-  blackGold
+  blackGold,
+  avocado,
+  autumn,
+  orangeJuice
 }
--- a/simple-mind-map/src/themes/orangeJuice.js
+++ b/simple-mind-map/src/themes/orangeJuice.js
@@ -0,0 +1,57 @@
+import defaultTheme from './default'
+import merge from 'deepmerge'
+
+// 橙汁
+export default merge(defaultTheme, {
+  // 背景颜色
+  backgroundColor: '#070616',
+  // 连线的颜色
+  lineColor: '#fff',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: '#fff',
+  // 根节点样式
+  root: {
+    fillColor: '#ff6811',
+    color: '#110501',
+    borderColor: '#ff6811',
+    borderWidth: 0,
+    fontSize: 24,
+    active: {
+      borderColor: '#a9a4a9',
+      borderWidth: 3
+    }
+  },
+  // 二级节点样式
+  second: {
+    fillColor: '#070616',
+    color: '#a9a4a9',
+    borderColor: '#ff6811',
+    borderWidth: 2,
+    fontSize: 18,
+    active: {
+      borderColor: '#110501'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: '#a9a4a9',
+    active: {
+      borderColor: '#ff6811'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: '',
+    borderColor: '#ff6811',
+    borderWidth: 2,
+    color: '#a9a4a9',
+    active: {
+      borderColor: '#110501'
+    }
+  }
+})
--- a/simple-mind-map/src/utils/BatchExecution.js
+++ b/simple-mind-map/src/utils/BatchExecution.js
@@ -1,4 +1,4 @@
-import { nextTick } from './utils'
+import { nextTick } from '.'

 //  批量执行
 class BatchExecution {
--- a/simple-mind-map/src/utils/Lru.js
+++ b/simple-mind-map/src/utils/Lru.js
@@ -0,0 +1,39 @@
+// LRU缓存类
+export default class CRU {
+    constructor(max) {
+        this.max = max || 1000
+        this.size = 0
+        this.pool = new Map()
+    }
+
+    add(key, value) {
+        // 如果该key是否已经存在，则先删除
+        this.delete(key)
+        this.pool.set(key, value)
+        this.size++
+        // 如果数量超出最大值，则删除最早的
+        if (this.size > this.max) {
+            let keys = this.pool.keys()
+            let last = keys.next()
+            this.delete(last.value)
+        }
+        
+    }
+
+    delete(key) {
+        if (this.pool.has(key)) {
+            this.pool.delete(key)
+            this.size--
+        }
+    }
+
+    has(key) {
+        return this.pool.has(key)
+    }
+
+    get(key) {
+        if (this.pool.has(key)) {
+            return this.pool.get(key)
+        }
+    }
+}
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -1,3 +1,5 @@
+import { v4 as uuidv4 } from 'uuid'
+
 //  深度优先遍历树
 export const walk = (
  root,
@@ -31,9 +33,11 @@ export const walk = (

 //  广度优先遍历树
 export const bfsWalk = (root, callback) => {
-  callback(root)
  let stack = [root]
  let isStop = false
+  if (callback(root, null) === 'stop') {
+    isStop = true
+  }
  while (stack.length) {
    if (isStop) {
      break
@@ -41,8 +45,9 @@ export const bfsWalk = (root, callback) => {
    let cur = stack.shift()
    if (cur.children && cur.children.length) {
      cur.children.forEach(item => {
+        if (isStop) return
        stack.push(item)
-        if (callback(item) === 'stop') {
+        if (callback(item, cur) === 'stop') {
          isStop = true
        }
      })
@@ -50,6 +55,26 @@ export const bfsWalk = (root, callback) => {
  }
 }

+// 按原比例缩放图片
+export const resizeImgSizeByOriginRatio = (
+  width,
+  height,
+  newWidth,
+  newHeight
+) => {
+  let arr = []
+  let nRatio = width / height
+  let mRatio = newWidth / newHeight
+  if (nRatio > mRatio) {
+    // 固定高度
+    arr = [nRatio * newHeight, newHeight]
+  } else {
+    // 固定宽度
+    arr = [newWidth, newWidth / nRatio]
+  }
+  return arr
+}
+
 //  缩放图片尺寸
 export const resizeImgSize = (width, height, maxWidth, maxHeight) => {
  let nRatio = width / height
@@ -137,7 +162,12 @@ export const copyRenderTree = (tree, root, removeActiveState = false) => {
 }

 //  复制节点树数据
-export const copyNodeTree = (tree, root, removeActiveState = false, keepId = 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
@@ -188,6 +218,18 @@ export const imgToDataUrl = src => {
  })
 }

+// 解析dataUrl
+export const parseDataUrl = data => {
+  if (!/^data:/.test(data)) return data
+  let [typeStr, base64] = data.split(',')
+  let res = /^data:[^/]+\/([^;]+);/.exec(typeStr)
+  let type = res[1]
+  return {
+    type,
+    base64
+  }
+}
+
 //  下载文件
 export const downloadFile = (file, fileName) => {
  let a = document.createElement('a')
@@ -236,8 +278,8 @@ export const degToRad = deg => {
  return deg * (Math.PI / 180)
 }

-// 驼峰转连字符 
-export const camelCaseToHyphen = (str) => {
+// 驼峰转连字符
+export const camelCaseToHyphen = str => {
  return str.replace(/([a-z])([A-Z])/g, (...args) => {
    return args[1] + '-' + args[2].toLowerCase()
  })
@@ -258,11 +300,8 @@ export const measureText = (text, { italic, bold, fontSize, fontFamily }) => {
  }
  measureTextContext.save()
  measureTextContext.font = font
-  const {
-    width,
-    actualBoundingBoxAscent,
-    actualBoundingBoxDescent
-  } = measureTextContext.measureText(text)
+  const { width, actualBoundingBoxAscent, actualBoundingBoxDescent } =
+    measureTextContext.measureText(text)
  measureTextContext.restore()
  const height = actualBoundingBoxAscent + actualBoundingBoxDescent
  return { width, height }
@@ -270,7 +309,9 @@ export const measureText = (text, { italic, bold, fontSize, fontFamily }) => {

 // 拼接font字符串
 export const joinFontStr = ({ italic, bold, fontSize, fontFamily }) => {
-  return `${italic ? 'italic ' : ''} ${bold ? 'bold ' : ''} ${fontSize}px ${fontFamily} `
+  return `${italic ? 'italic ' : ''} ${
+    bold ? 'bold ' : ''
+  } ${fontSize}px ${fontFamily} `
 }

 //  在下一个事件循环里执行任务
@@ -332,4 +373,64 @@ export const checkNodeOuter = (mindMap, node) => {
    offsetLeft,
    offsetTop
  }
+}
+
+// 提取html字符串里的纯文本
+let getTextFromHtmlEl = null
+export const getTextFromHtml = html => {
+  if (!getTextFromHtmlEl) {
+    getTextFromHtmlEl = document.createElement('div')
+  }
+  getTextFromHtmlEl.innerHTML = html
+  return getTextFromHtmlEl.textContent
+}
+
+// 将blob转成data:url
+export const readBlob = blob => {
+  return new Promise((resolve, reject) => {
+    let reader = new FileReader()
+    reader.onload = evt => {
+      resolve(evt.target.result)
+    }
+    reader.onerror = err => {
+      reject(err)
+    }
+    reader.readAsDataURL(blob)
+  })
+}
+
+// 将dom节点转换成html字符串
+let nodeToHTMLWrapEl = null
+export const nodeToHTML = node => {
+  if (!nodeToHTMLWrapEl) {
+    nodeToHTMLWrapEl = document.createElement('div')
+  }
+  nodeToHTMLWrapEl.innerHTML = ''
+  nodeToHTMLWrapEl.appendChild(node)
+  return nodeToHTMLWrapEl.innerHTML
+}
+
+// 获取图片大小
+export const getImageSize = src => {
+  return new Promise(resolve => {
+    let img = new Image()
+    img.src = src
+    img.onload = () => {
+      resolve({
+        width: img.width,
+        height: img.height
+      })
+    }
+    img.onerror = () => {
+      resolve({
+        width: 0,
+        height: 0
+      })
+    }
+  })
+}
+
+// 创建节点唯一的id
+export const createUid = () => {
+  return uuidv4()
 }
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -33,6 +33,7 @@
        "markdown-it": "^13.0.1",
        "markdown-it-checkbox": "^1.1.0",
        "prettier": "^1.19.1",
+        "vconsole": "^3.15.1",
        "vue-template-compiler": "^2.6.11",
        "webpack": "^4.44.2"
      }
@@ -5168,6 +5169,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/copy-text-to-clipboard": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.1.0.tgz",
+      "integrity": "sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/copy-webpack-plugin": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz",
@@ -10351,6 +10364,12 @@
      "integrity": "sha512-cnAsSVxIDsYt0v7HmC0hWZFwwXSh+E6PgCrREDuN/EsjgLwA5XRmlMHhSiDPrt6HxY1gTivEa/Zh7GtODoLevQ==",
      "dev": true
    },
+    "node_modules/mutation-observer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/mutation-observer/-/mutation-observer-1.0.3.tgz",
+      "integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==",
+      "dev": true
+    },
    "node_modules/mute-stream": {
      "version": "0.0.8",
      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -15185,6 +15204,18 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/vconsole": {
+      "version": "3.15.1",
+      "resolved": "https://registry.npmjs.org/vconsole/-/vconsole-3.15.1.tgz",
+      "integrity": "sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "copy-text-to-clipboard": "^3.0.1",
+        "core-js": "^3.11.0",
+        "mutation-observer": "^1.0.3"
+      }
+    },
    "node_modules/vendors": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
@@ -20525,6 +20556,12 @@
      "integrity": "sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==",
      "dev": true
    },
+    "copy-text-to-clipboard": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.1.0.tgz",
+      "integrity": "sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng==",
+      "dev": true
+    },
    "copy-webpack-plugin": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz",
@@ -24567,6 +24604,12 @@
      "integrity": "sha512-cnAsSVxIDsYt0v7HmC0hWZFwwXSh+E6PgCrREDuN/EsjgLwA5XRmlMHhSiDPrt6HxY1gTivEa/Zh7GtODoLevQ==",
      "dev": true
    },
+    "mutation-observer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/mutation-observer/-/mutation-observer-1.0.3.tgz",
+      "integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==",
+      "dev": true
+    },
    "mute-stream": {
      "version": "0.0.8",
      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -28566,6 +28609,18 @@
      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
      "dev": true
    },
+    "vconsole": {
+      "version": "3.15.1",
+      "resolved": "https://registry.npmjs.org/vconsole/-/vconsole-3.15.1.tgz",
+      "integrity": "sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "copy-text-to-clipboard": "^3.0.1",
+        "core-js": "^3.11.0",
+        "mutation-observer": "^1.0.3"
+      }
+    },
    "vendors": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -37,6 +37,7 @@
    "markdown-it": "^13.0.1",
    "markdown-it-checkbox": "^1.1.0",
    "prettier": "^1.19.1",
+    "vconsole": "^3.15.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.44.2"
  },
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -3,9 +3,9 @@
  <head>
    <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>
+    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
+    <link rel="icon" href="./dist/logo.ico">
+    <title>思绪思维导图</title>
  </head>
  <body>
    <noscript>
--- a/web/public/logo.ico
+++ b/web/public/logo.ico
--- a/web/src/assets/avatar/ZXR.jpg
+++ b/web/src/assets/avatar/ZXR.jpg
--- a/web/src/assets/avatar/default.png
+++ b/web/src/assets/avatar/default.png
--- a/web/src/assets/avatar/qp.jpg
+++ b/web/src/assets/avatar/qp.jpg
--- a/web/src/assets/avatar/suka.jpg
+++ b/web/src/assets/avatar/suka.jpg
--- a/web/src/assets/avatar/小土渣的宇宙.jpeg
+++ b/web/src/assets/avatar/小土渣的宇宙.jpeg
--- a/web/src/assets/avatar/志斌.jpg
+++ b/web/src/assets/avatar/志斌.jpg
--- a/web/src/assets/avatar/花儿朵朵.jpg
+++ b/web/src/assets/avatar/花儿朵朵.jpg
--- 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=1679621707211') format('woff2'),
-       url('iconfont.woff?t=1679621707211') format('woff'),
-       url('iconfont.ttf?t=1679621707211') format('truetype');
+  src: url('iconfont.woff2?t=1689407546912') format('woff2'),
+       url('iconfont.woff?t=1689407546912') format('woff'),
+       url('iconfont.ttf?t=1689407546912') format('truetype');
 }

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

+.iconjiantouyou:before {
+  content: "\e62d";
+}
+
+.iconbianji1:before {
+  content: "\e60a";
+}
+
+.icondaohang1:before {
+  content: "\e632";
+}
+
+.iconyanjing:before {
+  content: "\e8bf";
+}
+
+.iconwangzhan:before {
+  content: "\e628";
+}
+
+.iconcsdn:before {
+  content: "\e608";
+}
+
+.iconshejiaotubiao-10:before {
+  content: "\e644";
+}
+
+.iconstar:before {
+  content: "\e7df";
+}
+
+.iconfork:before {
+  content: "\e641";
+}
+
+.iconxiazai:before {
+  content: "\e613";
+}
+
+.iconteamwork:before {
+  content: "\e870";
+}
+
+.iconshuiyin:before {
+  content: "\e67a";
+}
+
+.iconxmind:before {
+  content: "\ea57";
+}
+
+.iconmouseR:before {
+  content: "\e6bd";
+}
+
+.iconmouseL:before {
+  content: "\e6c0";
+}
+
 .iconwenjian:before {
  content: "\e607";
 }
--- 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/autumn.jpg
+++ b/web/src/assets/img/autumn.jpg
--- a/web/src/assets/img/avocado.jpg
+++ b/web/src/assets/img/avocado.jpg
--- a/web/src/assets/img/block1.png
+++ b/web/src/assets/img/block1.png
--- a/web/src/assets/img/block3.png
+++ b/web/src/assets/img/block3.png
--- a/web/src/assets/img/block4.png
+++ b/web/src/assets/img/block4.png
--- a/web/src/assets/img/catalogOrganization.png
+++ b/web/src/assets/img/catalogOrganization.png
--- a/web/src/assets/img/fishbone.png
+++ b/web/src/assets/img/fishbone.png
--- a/web/src/assets/img/iconList.jpg
+++ b/web/src/assets/img/iconList.jpg
--- a/web/src/assets/img/logicalStructure.png
+++ b/web/src/assets/img/logicalStructure.png
--- a/web/src/assets/img/logo2.png
+++ b/web/src/assets/img/logo2.png
--- a/web/src/assets/img/mindMap.png
+++ b/web/src/assets/img/mindMap.png
--- a/web/src/assets/img/orangeJuice.jpg
+++ b/web/src/assets/img/orangeJuice.jpg
--- a/web/src/assets/img/organizationStructure.png
+++ b/web/src/assets/img/organizationStructure.png
--- a/web/src/assets/img/split.png
+++ b/web/src/assets/img/split.png
--- a/web/src/assets/img/timeline.png
+++ b/web/src/assets/img/timeline.png
--- a/web/src/assets/img/timeline2.png
+++ b/web/src/assets/img/timeline2.png
--- a/web/src/assets/img/verticalTimeline.jpg
+++ b/web/src/assets/img/verticalTimeline.jpg
--- a/web/src/assets/img/verticalTimeline.png
+++ b/web/src/assets/img/verticalTimeline.png
--- a/web/src/config/constant.js
+++ b/web/src/config/constant.js
@@ -1,12 +1,13 @@
 //  布局结构图片映射
 export const layoutImgMap = {
-    logicalStructure: require('../assets/img/logicalStructure.jpg'),
-    mindMap: require('../assets/img/mindMap.jpg'),
-    organizationStructure: require('../assets/img/organizationStructure.jpg'),
-    catalogOrganization: require('../assets/img/catalogOrganization.jpg'),
-    timeline: require('../assets/img/timeline.jpg'),
-    timeline2: require('../assets/img/timeline2.jpg'),
-    fishbone: require('../assets/img/fishbone.jpg'),
+    logicalStructure: require('../assets/img/logicalStructure.png'),
+    mindMap: require('../assets/img/mindMap.png'),
+    organizationStructure: require('../assets/img/organizationStructure.png'),
+    catalogOrganization: require('../assets/img/catalogOrganization.png'),
+    timeline: require('../assets/img/timeline.png'),
+    timeline2: require('../assets/img/timeline2.png'),
+    fishbone: require('../assets/img/fishbone.png'),
+    verticalTimeline: require('../assets/img/verticalTimeline.png'),
 }

 //  主题图片映射
@@ -40,5 +41,8 @@ export const themeMap = {
    blackHumour: require('../assets/img/blackHumour.jpg'),
    lateNightOffice: require('../assets/img/lateNightOffice.jpg'),
    blackGold: require('../assets/img/blackGold.jpg'),
+    autumn: require('../assets/img/autumn.jpg'),
+    avocado: require('../assets/img/avocado.jpg'),
+    orangeJuice: require('../assets/img/orangeJuice.jpg'),
 }
  
--- a/web/src/config/en.js
+++ b/web/src/config/en.js
@@ -291,6 +291,11 @@ export const shortcutKeyList = [
        icon: 'icondingwei',
        name: 'Reset',
        value: 'Ctrl + Enter'
+      },
+      {
+        icon: 'iconquanping1',
+        name: 'fit canvas',
+        value: 'Ctrl + i'
      }
    ]
  }
@@ -407,5 +412,11 @@ export const downTypeList = [
    type: 'md',
    icon: 'iconmarkdown',
    desc: 'Easy for other software to open'
+  },
+  {
+    name: 'XMind',
+    type: 'xmind',
+    icon: 'iconxmind',
+    desc: 'XMind file'
  }
 ]
--- a/web/src/config/icon.js
+++ b/web/src/config/icon.js
--- a/web/src/config/zh.js
+++ b/web/src/config/zh.js
@@ -351,6 +351,11 @@ export const shortcutKeyList = [
        icon: 'icondingwei',
        name: '恢复默认',
        value: 'Ctrl + Enter'
+      },
+      {
+        icon: 'iconquanping1',
+        name: '适应画布',
+        value: 'Ctrl + i'
      }
    ]
  }
@@ -479,5 +484,11 @@ export const downTypeList = [
    type: 'md',
    icon: 'iconmarkdown',
    desc: '便于其他软件打开'
+  },
+  {
+    name: 'XMind',
+    type: 'xmind',
+    icon: 'iconxmind',
+    desc: 'XMind格式'
  }
 ]
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -43,7 +43,10 @@ export default {
    associativeLineWidth: 'Width',
    associativeLineColor: 'Color',
    associativeLineActiveWidth: 'Active width',
-    associativeLineActiveColor: 'Active color'
+    associativeLineActiveColor: 'Active color',
+    mousewheelZoomActionReverse: 'Mouse Wheel Zoom',
+    mousewheelZoomActionReverse1: 'Zoom out forward and zoom in back',
+    mousewheelZoomActionReverse2: 'Zoom in forward and zoom out back'
  },
  color: {
    moreColor: 'More color'
@@ -69,7 +72,8 @@ export default {
    level4: 'Level4',
    level5: 'Level5',
    level6: 'Level6',
-    zenMode: 'Zen mode'
+    zenMode: 'Zen mode',
+    fitCanvas: 'Fit canvas'
  },
  count: {
    words: 'Words',
@@ -90,7 +94,7 @@ export default {
    pdfFile: 'pdf file',
    markdownFile: 'markdown file',
    tips: 'tips: .smm and .json file can be import',
-    domToImage: 'Whether to convert rich text nodes in svg into pictures',
+    isTransparent: 'Background is transparent',
    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: ',
@@ -110,8 +114,9 @@ export default {
  },
  navigatorToolbar: {
    openMiniMap: 'Open mini map',
-    readonly: 'Readonly',
-    edit: 'Edit'
+    closeMiniMap: 'Close mini map',
+    readonly: 'Change to eadonly',
+    edit: 'Change to edit'
  },
  nodeHyperlink: {
    title: 'Link',
@@ -201,5 +206,9 @@ export default {
  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.'
+  },
+  mouseAction: {
+    tip1: 'Current: Left click to drag the canvas, right click to box select nodes',
+    tip2: 'Current: Left click to box select nodes, right click to drag the canvas',
  }
 }
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -43,7 +43,10 @@ export default {
    associativeLineWidth: '粗细',
    associativeLineColor: '颜色',
    associativeLineActiveWidth: '激活粗细',
-    associativeLineActiveColor: '激活颜色'
+    associativeLineActiveColor: '激活颜色',
+    mousewheelZoomActionReverse: '鼠标滚轮缩放',
+    mousewheelZoomActionReverse1: '向前缩小向后放大',
+    mousewheelZoomActionReverse2: '向前放大向后缩小'
  },
  color: {
    moreColor: '更多颜色'
@@ -69,7 +72,8 @@ export default {
    level4: '四级主题',
    level5: '五级主题',
    level6: '六级主题',
-    zenMode: '禅模式'
+    zenMode: '禅模式',
+    fitCanvas: '适应画布'
  },
  count: {
    words: '字数',
@@ -90,7 +94,7 @@ export default {
    pdfFile: 'pdf文件',
    markdownFile: 'markdown文件',
    tips: 'tips：.smm和.json文件可用于导入',
-    domToImage: '是否将svg中富文本节点转换成图片',
+    isTransparent: '背景是否透明',
    pngTips: 'tips：富文本模式导出图片非常耗时，建议导出为svg格式',
    svgTips: 'tips：富文本模式导出图片非常耗时',
    transformingDomToImages: '正在转换节点：',
@@ -110,8 +114,9 @@ export default {
  },
  navigatorToolbar: {
    openMiniMap: '开启小地图',
-    readonly: '只读模式',
-    edit: '编辑模式'
+    closeMiniMap: '关闭小地图',
+    readonly: '切换为只读模式',
+    edit: '切换为编辑模式'
  },
  nodeHyperlink: {
    title: '超链接',
@@ -201,5 +206,9 @@ export default {
  edit: {
    newFeatureNoticeTitle: '新特性提醒',
    newFeatureNoticeMessage: '本次更新支持了节点富文本编辑，但是存在一定缺陷，最主要的影响是导出为图片的时间和节点数量成正比，所以对导出需求比较依赖的话可以通过【基础样式】-【其他配置】-【是否开启节点富文本编辑】设置关掉富文本编辑模式。'
+  },
+  mouseAction: {
+    tip1: '当前：左键拖动画布，右键框选节点',
+    tip2: '当前：左键框选节点，右键拖动画布',
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
wanglin2	89983f9f47	Merge branch 'feature' into main	2023-07-18 09:30:32 +08:00
wanglin2	b71a80e383	打包0.6.7	2023-07-18 09:29:19 +08:00
wanglin2	2bf146816b	Doc：update	2023-07-18 09:21:58 +08:00
wanglin2	daf9888da4	Fix：修复节点收起再展开后展开收起按钮占位元素丢失的问题	2023-07-18 08:44:44 +08:00
wanglin2	b42cee7a2f	Feat：支持根据id定位到某个节点、优化大纲的节点定位	2023-07-18 08:35:40 +08:00
wanglin2	9ecb199608	更新群二维码	2023-07-17 22:16:08 +08:00
wanglin2	adccef5699	Feat：修改节点uid的创建	2023-07-17 09:59:47 +08:00
wanglin2	94230f8ec6	Fix：修复大纲里创建新节点时节点样式丢失的问题	2023-07-17 09:43:22 +08:00
wanglin2	a161661c6b	删除节点过渡动画效果	2023-07-17 09:07:58 +08:00
wanglin2	08b971cd9a	Demo:优化大纲编辑	2023-07-16 22:20:09 +08:00
wanglin2	b64c8f132b	Demo:优化页面:侧边栏按钮支持收起;优化小屏适配	2023-07-15 17:29:26 +08:00
wanglin2	d6181591c5	Fix:修复只读模式下可以缩放图片的bug	2023-07-15 15:26:57 +08:00
wanglin2	e093cb1741	Merge branch 'feature' into main	2023-07-13 09:50:01 +08:00
wanglin2	a63a92c423	打包	2023-07-13 09:48:30 +08:00
wanglin2	2c4f065626	新增文档首页	2023-07-13 09:44:55 +08:00
wanglin2	ae5d4dd2a6	Merge branch 'feature' into main	2023-07-11 16:36:51 +08:00
wanglin2	e574883e5f	Doc: update	2023-07-11 16:31:48 +08:00
wanglin2	1bf60c49c7	Merge branch 'feature' into main	2023-07-11 14:52:35 +08:00
wanglin2	ddc173cf84	update README	2023-07-11 14:52:15 +08:00
wanglin2	2c71c7d102	Merge branch 'feature' into main	2023-07-11 14:44:01 +08:00
wanglin2	f6cb08bdaa	update Doc and README	2023-07-11 14:08:00 +08:00
wanglin2	05728de21b	Merge branch 'feature' into main	2023-07-10 16:08:26 +08:00
wanglin2	b51027f641	Doc: update	2023-07-10 16:07:48 +08:00
wanglin2	ea4fdf8290	更新群二维码	2023-07-10 09:16:20 +08:00
wanglin2	55796b4e39	Merge branch 'feature' into main	2023-07-06 17:13:07 +08:00
wanglin2	e534c3138d	Doc: update	2023-07-06 17:12:42 +08:00
wanglin2	e185abd223	Merge branch 'feature' into main	2023-07-06 10:49:19 +08:00
wanglin2	3b73f72866	打包0.6.6	2023-07-06 10:45:44 +08:00
wanglin2	0db2f47133	Doc: update	2023-07-06 10:37:02 +08:00
wanglin2	80c7ec0fac	Demo：更新结构示意图	2023-07-06 10:05:00 +08:00
wanglin2	780ce363de	Fix：修复切换结构后展开收起按钮的隐藏占位元素不更新的问题	2023-07-06 09:31:58 +08:00
wanglin2	eaa8929457	Fix：修复除了向右生长的结构，其他结构鼠标移入展开收起按钮位置时不会触发按钮显示的问题	2023-07-06 09:12:18 +08:00
wanglin2	ad0f62a5ac	Demo：增加竖向时间轴图片	2023-07-05 18:11:02 +08:00
wanglin2	31f21ce013	Feat：新增竖向时间轴	2023-07-05 16:49:32 +08:00
wanglin2	7a20ce2f79	Fix：修复二级节点拖拽成3级节点时节点边框样式未更新的问题	2023-07-05 14:21:15 +08:00
wanglin2	b98e7a97ec	Demo：支持导出xmind文件	2023-07-05 14:00:57 +08:00
wanglin2	0bb50b3371	Feat：1.支持导出为xmind新版文件；2.导入xmind新版文件支持处理图片	2023-07-05 13:58:55 +08:00
wanglin2	a03091b28c	Fix：修复拖拽移动一个节点为另一个节点的子节点时该节点的父节点指向未更新的问题	2023-07-04 09:10:32 +08:00
wanglin2	6c33984b8c	优化：刚创建的节点默认全选方便删除默认文本	2023-07-04 08:42:31 +08:00
wanglin2	28a4be0631	Fix:TouchEvent插件去除派发click事件,解决移动端点击超链接会打开两个窗口的问题	2023-07-03 22:39:47 +08:00
wanglin2	b8a3be7a62	优化触控板缩放画布时幅度过大的问题	2023-07-03 22:26:11 +08:00
wanglin2	259d4028f3	更新群二维码	2023-07-03 08:42:37 +08:00
wanglin2	fb1251afc1	Doc: update	2023-06-29 13:51:57 +08:00
wanglin2	06e3fd428a	Fix：修复缩放情况下调整图片大小不正确的问题	2023-06-28 18:22:43 +08:00
wanglin2	a48e52f1f4	打包0.6.5	2023-06-28 16:37:19 +08:00
wanglin2	f8a345d8de	Doc: update	2023-06-28 16:28:47 +08:00
wanglin2	d900c2f122	Feat：节点图片支持拖拽调整大小	2023-06-28 15:03:15 +08:00
wanglin2	443a714549	Feat：支持配置鼠标滚轮方向对应的缩放行为	2023-06-27 16:46:37 +08:00
wanglin2	74618a8a2b	Feat：打包后的库支持获取内置常量、主题等数据	2023-06-27 16:27:46 +08:00
wanglin2	a25bd4c556	Fix：修复xmind导入报错	2023-06-27 16:15:42 +08:00
wanglin2	efe205ae70	打包0.6.4-fix.1	2023-06-27 09:08:45 +08:00
wanglin2	a0d7473b1f	Doc: update	2023-06-27 09:05:39 +08:00
wanglin2	7821781f20	Feat：鼠标滚轮缩放时默认以鼠标当前位置为中心进行缩放，可以通过配置关闭该特性	2023-06-27 09:05:25 +08:00
街角小林	b90d4ddf8a	Merge pull request #152 from F-star/feat/scale-in-wheel-curor Feat: 支持滚轮情况下，以光标为中心进行缩放	2023-06-27 08:47:40 +08:00
Hao Huang	314562c167	Feat: 支持滚轮情况下，以光标为中心进行缩放	2023-06-26 13:32:33 +00:00
wanglin2	5f0a9a7ce2	打包0.6.4	2023-06-26 16:20:38 +08:00
wanglin2	98e27841ad	Doc: update	2023-06-26 16:15:20 +08:00
wanglin2	1b6467728c	Feat:优化指定中心点缩放	2023-06-26 15:57:45 +08:00
街角小林	4bb349b2df	Merge pull request #151 from F-star/main Feat: 以画布为中心进行缩放	2023-06-26 15:25:08 +08:00
Hao Huang	b262336f08	Feat: 以画布为中心进行缩放	2023-06-26 05:47:06 +00:00
wanglin2	2b59087461	Merge branch 'feature' into main	2023-06-26 10:33:03 +08:00
wanglin2	66c9805efc	Doc: update	2023-06-26 10:32:36 +08:00
wanglin2	710128901a	更新群二维码	2023-06-26 09:56:10 +08:00
wanglin2	61be0f7ac4	Merge branch 'feature' into main	2023-06-24 17:08:18 +08:00
wanglin2	7289b3a0ad	Doc:update	2023-06-24 17:06:52 +08:00
wanglin2	25243e2053	Merge branch 'feature' into main	2023-06-21 15:56:20 +08:00
wanglin2	060a448cd5	打包0.6.3	2023-06-21 15:55:38 +08:00
wanglin2	bdb6078df6	'更新文档'	2023-06-21 15:33:51 +08:00
wanglin2	749a4d0e81	Feat：支持自定义节点内容	2023-06-21 14:57:22 +08:00
wanglin2	1749705694	Fix：修复概要节点会响应快捷键添加节点的问题	2023-06-21 10:50:26 +08:00
wanglin2	eec736be4d	README: update	2023-06-20 16:43:10 +08:00
wanglin2	ffdf53941a	Merge branch 'feature' into main	2023-06-20 16:39:55 +08:00
wanglin2	5676e952f3	打包0.6.2	2023-06-20 16:38:29 +08:00
wanglin2	e049ee6260	Doc: update	2023-06-20 16:35:36 +08:00
wanglin2	f1355c9d2a	Fix：修复切换主题时节点样式没有随之切换的问题	2023-06-20 16:29:54 +08:00
wanglin2	d696e0fdc1	合并	2023-06-19 22:37:13 +08:00
wanglin2	c8d2f284fd	打包0.6.1	2023-06-19 22:34:19 +08:00
wanglin2	aa8ecd4f60	合并	2023-06-19 22:32:37 +08:00
wanglin2	2323fe9bc0	Fix:修复将鼠标滚动改为移动画布行为后，使用触控板操作时移动灵敏度过高的问题	2023-06-19 22:31:12 +08:00
wanglin2	b9a0b16fc8	更新群二维码	2023-06-19 11:37:28 +08:00
wanglin2	b9c340afbf	Doc：更新文档	2023-06-19 09:28:36 +08:00
wanglin2	ee98d7128b	Merge branch 'feature' into main	2023-06-15 17:09:52 +08:00
wanglin2	d37febe306	打包0.6.0-fix.1	2023-06-15 17:09:27 +08:00
wanglin2	5de97f05b3	更新文档	2023-06-12 18:13:05 +08:00
wanglin2	662447bc69	Fix：修复没有设置过背景样式的情况下销毁思维导图报错的问题	2023-06-12 17:42:01 +08:00
wanglin2	51c1c46287	Merge branch 'feature' into main	2023-06-12 17:07:54 +08:00
wanglin2	3b03d9798b	打包0.6.0	2023-06-12 17:06:23 +08:00
wanglin2	17fbef810c	Fix：修复清空节点再输入中文时发生抖动的问题	2023-06-12 17:02:14 +08:00
wanglin2	e798975a9f	更新群二维码	2023-06-12 15:14:37 +08:00
wanglin2	2af65e322b	Merge branch 'feature' into main	2023-06-12 15:12:57 +08:00
wanglin2	23f09f9b4d	打包0.6.0	2023-06-12 14:42:44 +08:00
wanglin2	d69668a488	Feat：新增触摸事件支持插件	2023-06-12 14:14:55 +08:00
wanglin2	5353888965	更新文档	2023-06-12 09:10:04 +08:00
wanglin2	b33fd1908a	Fix:修复富文本编辑时删除完所有文本后再输入时样式丢失问题	2023-06-11 22:21:03 +08:00
wanglin2	97583ffcba	Feat:新增销毁思维导图的方法	2023-06-11 13:14:19 +08:00
wanglin2	360eca620e	Feature:将导出pdf功能提取为一个单独的插件	2023-06-11 10:41:53 +08:00
wanglin2	6d0682e821	Fix:修复左键多选节点后多选状态被取消的问题	2023-06-11 10:21:49 +08:00
wanglin2	834bdf37c3	Feat：支持控制节点是否允许编辑	2023-06-09 17:18:02 +08:00
wanglin2	e3d31f69bf	Feat：支持设置为左键多选节点，右键拖动画布	2023-06-09 16:49:15 +08:00
wanglin2	ac55415de1	Fix：1.去除不需要的依赖；2.修复按住ctrl键多选节点时不会触发节点的click事件的问题	2023-06-09 13:39:07 +08:00
wanglin2	4d91be5be6	Feat：可通过配置决定是否开启按住ctrl键多选节点的功能	2023-06-08 20:18:13 +08:00
wanglin2	ee467cb155	Feat：支持一键缩放思维导图至画布大小	2023-06-08 20:06:20 +08:00
wanglin2	6281f2360c	更新文档	2023-06-08 18:27:25 +08:00
wanglin2	cd8af6ae06	合并	2023-06-08 16:51:31 +08:00
wanglin2	45cc199d7f	重新调整核心库代码目录结构	2023-06-08 16:49:54 +08:00
街角小林	b04469649a	Merge pull request #145 from clh021/main add MIT LICENSE	2023-06-08 08:59:04 +08:00
chenlianghong	ee57dbdcc5	add MIT LICENSE	2023-06-07 17:40:47 +08:00
wanglin2	bca744f6fc	更新群二维码	2023-06-06 09:14:18 +08:00
wanglin2	442408dacf	更新群二维码	2023-05-30 08:54:11 +08:00
wanglin2	7297f0a082	更新群二维码	2023-05-23 14:24:29 +08:00
wanglin2	f0d90941fb	合并	2023-05-15 10:26:33 +08:00
wanglin2	830962c044	更新群二维码	2023-05-15 10:25:34 +08:00
wanglin2	eeec71dc65	更新群二维码	2023-05-05 21:48:58 +08:00
wanglin2	9bd87a22f3	更新群二维码	2023-05-05 21:39:43 +08:00
wanglin2	88c9f22a15	Merge branch 'feature' into main	2023-05-05 21:34:40 +08:00
wanglin2	7380fc60d5	打包	2023-05-05 21:34:26 +08:00
wanglin2	a178b99d73	更新群二维码	2023-05-05 16:10:31 +08:00
wanglin2	af9ee04aaf	Merge branch 'feature' into main	2023-05-02 10:05:39 +08:00
wanglin2	01dc98f1f8	打包0.5.11	2023-05-02 10:01:08 +08:00
wanglin2	cbd07246bd	更新文档	2023-05-02 10:00:13 +08:00
wanglin2	5bb23ca738	优化主题配置更新,改变不涉及节点大小的配置不触发节点重新计算	2023-04-28 22:07:53 +08:00
wanglin2	0886ba7698	完善关联线文本编辑	2023-04-28 21:51:58 +08:00
wanglin2	a65cffa58b	完善关联线文本编辑	2023-04-28 17:26:37 +08:00
wanglin2	02e2d432dd	Feature：关联线支持文本开发中	2023-04-28 17:10:39 +08:00
wanglin2	c8d23cab40	更新README	2023-04-28 09:04:20 +08:00
wanglin2	244ced83bc	更新群二维码	2023-04-28 08:59:54 +08:00
wanglin2	5c9c3d7934	打包0.5.10-fix.2	2023-04-26 16:02:47 +08:00
wanglin2	4ca6713675	更新文档	2023-04-26 15:54:28 +08:00
wanglin2	3d18404fd6	Fix：修复富文本模式下，切换主题、导入数据后没有触发数据改变的问题	2023-04-26 15:49:52 +08:00
wanglin2	98dda26bf8	新增三种主题	2023-04-26 15:48:58 +08:00
wanglin2	cd4c5ecd83	'Fix：修复导入出错的问题'	2023-04-26 11:20:34 +08:00
wanglin2	fdc0017ccb	'打包0.5.10'	2023-04-26 11:02:51 +08:00
wanglin2	20a5c12bbb	'更新文档'	2023-04-26 10:58:01 +08:00
wanglin2	4eacec125e	Feature：使用LRU缓存算法优化节点复用	2023-04-26 10:37:32 +08:00
wanglin2	34322ba6d1	更新文档	2023-04-25 17:29:56 +08:00
wanglin2	8210151a7b	打包0.5.9	2023-04-25 17:19:14 +08:00
wanglin2	1e00088608	更新文档	2023-04-25 17:14:19 +08:00
wanglin2	ee59b8002a	修改导出，使用FileReader代替URL.createObjectURL转换blob数据	2023-04-25 17:13:39 +08:00
wanglin2	b2ca5d0fba	打包0.5.8	2023-04-25 10:12:41 +08:00
wanglin2	470604e567	更新文档	2023-04-25 10:00:40 +08:00
wanglin2	f5f665ec0a	Demo：扩展节点图标列表	2023-04-25 09:05:46 +08:00
wanglin2	5e865a4e33	Feature：支持扩展节点图标	2023-04-25 09:05:10 +08:00
wanglin2	38ad33b604	修复隐藏模式下展开收起按钮的缺陷	2023-04-24 15:29:52 +08:00
wanglin2	e1b4146171	Feature：默认改为鼠标移上节点才显示展开收起按钮	2023-04-24 14:25:36 +08:00
wanglin2	65151f4b0a	优化性能：1.节点位置没有变化不触发位置设置；2.展开收起状态没有变化不触发按钮更新	2023-04-24 10:25:23 +08:00
wanglin2	942706fb63	Merge branch 'feature' into main	2023-04-24 09:09:33 +08:00
wanglin2	5f4492d4b7	打包0.5.7	2023-04-24 09:08:48 +08:00
wanglin2	ace1f62a40	更新文档	2023-04-24 09:02:01 +08:00
wanglin2	706c88c7d5	Featyre：富文本模式下，导入数据、初始化数据、切换主题场景节点样式支持跟随主题变化	2023-04-23 16:18:49 +08:00
wanglin2	4512fb16eb	优化富文本节点编辑	2023-04-23 15:20:33 +08:00
wanglin2	e446ff12e7	Demo：修复主题的标题显示错误问题	2023-04-23 14:39:16 +08:00
wanglin2	4318646abe	更新文档	2023-04-23 14:36:47 +08:00
wanglin2	2cbfe4f0e7	Feature：富文本模式导出改为使用html2canvas转换整个svg	2023-04-23 14:09:41 +08:00
wanglin2	b7910c4665	优化节点编辑	2023-04-22 14:24:05 +08:00