Merge branch 'feature' into main

打包0.5.5
更新文档
2026-02-18 06:18:27 +08:00 · 2023-04-18 09:54:45 +08:00 · 2023-04-18 09:52:15 +08:00 · 2023-04-18 09:45:40 +08:00 · 2023-04-18 09:45:29 +08:00 · 2023-04-18 09:04:16 +08:00
353 changed files with 54600 additions and 7610 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
 node_modules
 .DS_Store
-package-lock.json
+dist_electron
--- a/README.md
+++ b/README.md
--- a/docs/assets/1.gif
+++ b/docs/assets/1.gif
--- a/docs/assets/2.gif
+++ b/docs/assets/2.gif
--- a/docs/assets/2021-07-21-19-54-48.gif
+++ b/docs/assets/2021-07-21-19-54-48.gif
--- a/docs/assets/3.gif
+++ b/docs/assets/3.gif
--- a/docs/assets/image-20210717174716810.png
+++ b/docs/assets/image-20210717174716810.png
--- a/docs/assets/image-20210717202607786.png
+++ b/docs/assets/image-20210717202607786.png
--- a/docs/assets/image-20210717210355763.png
+++ b/docs/assets/image-20210717210355763.png
--- a/docs/assets/image-20210717224527681.png
+++ b/docs/assets/image-20210717224527681.png
--- a/docs/assets/image-20210717230604086.png
+++ b/docs/assets/image-20210717230604086.png
--- a/docs/assets/image-20210717230805200.png
+++ b/docs/assets/image-20210717230805200.png
--- a/docs/assets/image-20210717230808662.png
+++ b/docs/assets/image-20210717230808662.png
--- a/docs/assets/image-20210718083006111.png
+++ b/docs/assets/image-20210718083006111.png
--- a/docs/assets/image-20210718083616076.png
+++ b/docs/assets/image-20210718083616076.png
--- a/docs/assets/image-20210718092817830.png
+++ b/docs/assets/image-20210718092817830.png
--- a/docs/assets/image-20210718102434530.png
+++ b/docs/assets/image-20210718102434530.png
--- a/docs/assets/image-20210718110652705.png
+++ b/docs/assets/image-20210718110652705.png
--- a/docs/assets/image-20210718111334085.png
+++ b/docs/assets/image-20210718111334085.png
--- a/docs/assets/image-20210718134525691.png
+++ b/docs/assets/image-20210718134525691.png
--- a/docs/assets/image-20210718184835414.png
+++ b/docs/assets/image-20210718184835414.png
--- a/docs/assets/image-20210718191124627.png
+++ b/docs/assets/image-20210718191124627.png
--- a/docs/assets/image-20210718221814590.png
+++ b/docs/assets/image-20210718221814590.png
--- a/docs/assets/image-20210718222150055.png
+++ b/docs/assets/image-20210718222150055.png
--- a/docs/assets/image-20210718222612078.png
+++ b/docs/assets/image-20210718222612078.png
--- a/docs/assets/image-20210720191943989.png
+++ b/docs/assets/image-20210720191943989.png
--- a/docs/assets/image-20210720192008277.png
+++ b/docs/assets/image-20210720192008277.png
--- a/docs/assets/image-20210720200816281.png
+++ b/docs/assets/image-20210720200816281.png
--- a/docs/assets/image-20210721183307656.png
+++ b/docs/assets/image-20210721183307656.png
--- a/docs/assets/image-20210721183340310.png
+++ b/docs/assets/image-20210721183340310.png
--- a/docs/assets/image-20210721183823754.png
+++ b/docs/assets/image-20210721183823754.png
--- a/docs/assets/image-20210721184140488.png
+++ b/docs/assets/image-20210721184140488.png
--- a/docs/assets/image-20210721185453825.png
+++ b/docs/assets/image-20210721185453825.png
--- a/docs/assets/image-20210721190700979.png
+++ b/docs/assets/image-20210721190700979.png
--- a/docs/assets/swdt.jpg
+++ b/docs/assets/swdt.jpg
--- a/docs/web思维导图实现的技术点分析.md
+++ b/docs/web思维导图实现的技术点分析.md
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.10aa67e3.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-5397ae43.e756f28b.js" rel="prefetch"><link href="dist/css/app.f735ed26.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.f631d5ff.css" rel="preload" as="style"><link href="dist/js/app.2fa527aa.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.68a34765.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.f631d5ff.css" rel="stylesheet"><link href="dist/css/app.f735ed26.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.68a34765.js"></script><script src="dist/js/app.2fa527aa.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.d16bc076.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.09a9e943.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.1ed9e72b.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.6deaeca5.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.54a22da0.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.35d98938.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.e6f73d7a.js" rel="prefetch"><link href="dist/js/chunk-2d0ac5dc.60cca854.js" rel="prefetch"><link href="dist/js/chunk-2d0afe0d.9d477efa.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.2ce2efbe.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.fa8a1448.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.c69acfc6.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.e5fb004d.js" rel="prefetch"><link href="dist/js/chunk-2d0b978a.f8cf18a3.js" rel="prefetch"><link href="dist/js/chunk-2d0b9b64.74778ebe.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.90c10c16.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.317837bd.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.c7eb53c0.js" rel="prefetch"><link href="dist/js/chunk-2d0c09f6.11d06ad8.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.c796f5a9.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.a76580c3.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.1c42b5f8.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.5aac283d.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.957de630.js" rel="prefetch"><link href="dist/js/chunk-2d0c4a65.cd9f2135.js" rel="prefetch"><link href="dist/js/chunk-2d0c5538.88c61b8a.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.84b9239b.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.7a02f652.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.48b95a81.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.015541ec.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.cee455b8.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.131fde2d.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.bbe358e7.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.c5497b45.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.30c25366.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.2f357c47.js" rel="prefetch"><link href="dist/js/chunk-2d0e4e1f.9e5366fb.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.0eca5330.js" rel="prefetch"><link href="dist/js/chunk-2d0e9726.cb0b7af1.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.9792465b.js" rel="prefetch"><link href="dist/js/chunk-2d0e9802.7b2165cb.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.488ecfcd.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.ded9201c.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.79752ab7.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.33633e99.js" rel="prefetch"><link href="dist/js/chunk-2d20ff53.5a293f49.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.07e1e1c8.js" rel="prefetch"><link href="dist/js/chunk-2d216004.7800d5f8.js" rel="prefetch"><link href="dist/js/chunk-2d216037.f55e8a4f.js" rel="prefetch"><link href="dist/js/chunk-2d2160a3.907f6f9c.js" rel="prefetch"><link href="dist/js/chunk-2d216642.9e7e4c69.js" rel="prefetch"><link href="dist/js/chunk-2d217907.325d840d.js" rel="prefetch"><link href="dist/js/chunk-2d221c76.8f8c1623.js" rel="prefetch"><link href="dist/js/chunk-2d2254a4.8ebe1825.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.0d16e8ba.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.c1a94e96.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.c772670d.js" rel="prefetch"><link href="dist/js/chunk-2d230098.5927b8ca.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.d701f22e.js" rel="prefetch"><link href="dist/js/chunk-2d2375fa.3667bfcc.js" rel="prefetch"><link href="dist/js/chunk-2d238428.b57532b8.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.83e1648b.js" rel="prefetch"><link href="dist/css/app.c2a500f4.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.a2c9b092.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.c2a500f4.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.a2c9b092.js"></script></body></html>
--- a/qrcode.jpg
+++ b/qrcode.jpg
--- a/simple-mind-map/dist/img/blueSky.3c7f8ccb.jpg
+++ b/simple-mind-map/dist/img/blueSky.3c7f8ccb.jpg
--- a/simple-mind-map/dist/img/brainImpairedPink.511fee22.jpg
+++ b/simple-mind-map/dist/img/brainImpairedPink.511fee22.jpg
--- a/simple-mind-map/dist/img/catalogOrganization.380bb277.jpg
+++ b/simple-mind-map/dist/img/catalogOrganization.380bb277.jpg
--- a/simple-mind-map/dist/img/classic.733f273c.jpg
+++ b/simple-mind-map/dist/img/classic.733f273c.jpg
--- a/simple-mind-map/dist/img/classic2.cdfe2a8d.jpg
+++ b/simple-mind-map/dist/img/classic2.cdfe2a8d.jpg
--- a/simple-mind-map/dist/img/classic3.19d6c347.jpg
+++ b/simple-mind-map/dist/img/classic3.19d6c347.jpg
--- a/simple-mind-map/dist/img/classic4.087902fc.jpg
+++ b/simple-mind-map/dist/img/classic4.087902fc.jpg
--- a/simple-mind-map/dist/img/classicBlue.4b8243c6.jpg
+++ b/simple-mind-map/dist/img/classicBlue.4b8243c6.jpg
--- a/simple-mind-map/dist/img/classicGreen.c2ae7bde.jpg
+++ b/simple-mind-map/dist/img/classicGreen.c2ae7bde.jpg
--- a/simple-mind-map/dist/img/dark.894c1d36.jpg
+++ b/simple-mind-map/dist/img/dark.894c1d36.jpg
--- a/simple-mind-map/dist/img/dark2.c49dc11c.jpg
+++ b/simple-mind-map/dist/img/dark2.c49dc11c.jpg
--- a/simple-mind-map/dist/img/default.1312a3ba.jpg
+++ b/simple-mind-map/dist/img/default.1312a3ba.jpg
--- a/simple-mind-map/dist/img/earthYellow.c35e546d.jpg
+++ b/simple-mind-map/dist/img/earthYellow.c35e546d.jpg
--- a/simple-mind-map/dist/img/freshGreen.0e344e3e.jpg
+++ b/simple-mind-map/dist/img/freshGreen.0e344e3e.jpg
--- a/simple-mind-map/dist/img/freshRed.1c5bde77.jpg
+++ b/simple-mind-map/dist/img/freshRed.1c5bde77.jpg
--- a/simple-mind-map/dist/img/gold.3093b3c8.jpg
+++ b/simple-mind-map/dist/img/gold.3093b3c8.jpg
--- a/simple-mind-map/dist/img/greenLeaf.6789e8fc.jpg
+++ b/simple-mind-map/dist/img/greenLeaf.6789e8fc.jpg
--- a/simple-mind-map/dist/img/logicalStructure.624920ce.jpg
+++ b/simple-mind-map/dist/img/logicalStructure.624920ce.jpg
--- a/simple-mind-map/dist/img/mindMap.223b38aa.jpg
+++ b/simple-mind-map/dist/img/mindMap.223b38aa.jpg
--- a/simple-mind-map/dist/img/minions.c2a93f9e.jpg
+++ b/simple-mind-map/dist/img/minions.c2a93f9e.jpg
--- a/simple-mind-map/dist/img/mint.7933f60a.jpg
+++ b/simple-mind-map/dist/img/mint.7933f60a.jpg
--- a/simple-mind-map/dist/img/organizationStructure.8064f4da.jpg
+++ b/simple-mind-map/dist/img/organizationStructure.8064f4da.jpg
--- a/simple-mind-map/dist/img/pinkGrape.32c2587b.jpg
+++ b/simple-mind-map/dist/img/pinkGrape.32c2587b.jpg
--- a/simple-mind-map/dist/img/romanticPurple.7607e58a.jpg
+++ b/simple-mind-map/dist/img/romanticPurple.7607e58a.jpg
--- a/simple-mind-map/dist/img/skyGreen.4cfa829a.jpg
+++ b/simple-mind-map/dist/img/skyGreen.4cfa829a.jpg
--- a/simple-mind-map/dist/img/vitalityOrange.5dd9014f.jpg
+++ b/simple-mind-map/dist/img/vitalityOrange.5dd9014f.jpg
--- a/simple-mind-map/example/exampleData.js
+++ b/simple-mind-map/example/exampleData.js
@@ -900,6 +900,17 @@ const data5 = {
    }
 }

+// 富文本数据v0.4.0+，需要使用RichText插件才支持富文本编辑
+const richTextData = {
+    "root": {
+        "data": {
+            "text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
+            "richText": true
+        },
+        "children": []
+    }
+}
+
 const rootData = {
    "root": {
        "data": {
@@ -925,5 +936,6 @@ export default {
    "layout": "logicalStructure",
    // "layout": "mindMap",
    // "layout": "catalogOrganization"
-    // "layout": "organizationStructure"
+    // "layout": "organizationStructure",
+    "config": {}
 }
--- a/simple-mind-map/example/exportFullData.json
+++ b/simple-mind-map/example/exportFullData.json
@@ -31,6 +31,12 @@
                    "isActive": false
                },
                "children": []
+            }, {
+                "data": {
+                    "text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
+                    "richText": true
+                },
+                "children": []
            }]
        }]
    },
@@ -62,5 +68,6 @@
            "sx": 0,
            "sy": 0
        }
-    }
+    },
+    "config": {}
 }
--- a/simple-mind-map/full.js
+++ b/simple-mind-map/full.js
@@ -0,0 +1,26 @@
+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 xmind from './src/parse/xmind.js'
+import markdown from './src/parse/markdown.js'
+
+MindMap.xmind = xmind
+MindMap.markdown = markdown
+
+MindMap
+  .usePlugin(MiniMap)
+  .usePlugin(Watermark)
+  .usePlugin(Drag)
+  .usePlugin(KeyboardNavigation)
+  .usePlugin(Export)
+  .usePlugin(Select)
+  .usePlugin(AssociativeLine)
+  .usePlugin(RichText)
+
+export default MindMap
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -7,22 +7,19 @@ import Style from './src/Style'
 import KeyCommand from './src/KeyCommand'
 import Command from './src/Command'
 import BatchExecution from './src/BatchExecution'
-import Export from './src/Export'
-import Select from './src/Select'
-import Drag from './src/Drag'
-import MiniMap from './src/MiniMap'
-import { layoutValueList } from './src/utils/constant'
+import { layoutValueList, CONSTANTS } from './src/utils/constant'
 import { SVG } from '@svgdotjs/svg.js'
-import xmind from './src/parse/xmind'
 import { simpleDeepClone } from './src/utils'
-import KeyboardNavigation from './src/KeyboardNavigation'
+import defaultTheme from './src/themes/default'

 // 默认选项配置
 const defaultOpt = {
  // 是否只读
  readonly: false,
  // 布局
-  layout: 'logicalStructure',
+  layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
+  // 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
+  fishboneDeg: 45,
  // 主题
  theme: 'default', // 内置主题：default（默认主题）
  // 主题配置，会和所选择的主题进行合并
@@ -44,28 +41,72 @@ const defaultOpt = {
  // 多选节点时鼠标移动距边缘多少距离时开始偏移
  selectTranslateLimit: 20,
  // 自定义节点备注内容显示
-  customNoteContentShow: null
+  customNoteContentShow: null,
  /*
        {
            show(){},
            hide(){}
        }
    */
+  // 是否开启节点自由拖拽
+  enableFreeDrag: false,
+  // 水印配置
+  watermarkConfig: {
+    text: '',
+    lineSpacing: 100,
+    textSpacing: 100,
+    angle: 30,
+    textStyle: {
+      color: '#999',
+      opacity: 0.5,
+      fontSize: 14
+    }
+  },
+  // 达到该宽度文本自动换行
+  textAutoWrapWidth: 500,
+  // 自定义鼠标滚轮事件处理
+  // 可以传一个函数，回调参数为事件对象
+  customHandleMousewheel: null,
+  // 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
+  mousewheelAction: 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
 }

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

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

    // 初始化主题
    this.initTheme()
@@ -114,89 +155,52 @@ class MindMap {
      draw: this.draw
    })

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

+    // 注册插件
+    MindMap.pluginList.forEach((plugin) => {
+      this.initPlugin(plugin)
+    })
+
    // 初始渲染
-    this.reRender()
+    this.render()
    setTimeout(() => {
      this.command.addHistory()
    }, 0)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-01 22:15:22
-   * @Desc: 配置参数处理
-   */
+  //  配置参数处理
  handleOpt(opt) {
    // 检查布局配置
    if (!layoutValueList.includes(opt.layout)) {
-      opt.layout = 'logicalStructure'
+      opt.layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
    }
    // 检查主题配置
    opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default'
    return opt
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-06 18:47:29
-   * @Desc: 渲染，部分渲染
-   */
-  render() {
+  //  渲染，部分渲染
+  render(callback, source = '') {
    this.batchExecution.push('render', () => {
      this.initTheme()
      this.renderer.reRender = false
-      this.renderer.render()
+      this.renderer.render(callback, source)
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-08 22:05:11
-   * @Desc: 重新渲染
-   */
-  reRender() {
+  //  重新渲染
+  reRender(callback) {
    this.batchExecution.push('render', () => {
      this.draw.clear()
      this.initTheme()
      this.renderer.reRender = true
-      this.renderer.render()
+      this.renderer.render(callback)
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 21:16:52
-   * @Desc: 容器尺寸变化，调整尺寸
-   */
+  //  容器尺寸变化，调整尺寸
  resize() {
    this.elRect = this.el.getBoundingClientRect()
    this.width = this.elRect.width
@@ -204,38 +208,22 @@ class MindMap {
    this.svg.size(this.width, this.height)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 13:25:50
-   * @Desc: 监听事件
-   */
+  //  监听事件
  on(event, fn) {
    this.event.on(event, fn)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 13:51:35
-   * @Desc: 触发事件
-   */
+  //  触发事件
  emit(event, ...args) {
    this.event.emit(event, ...args)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 13:53:54
-   * @Desc: 解绑事件
-   */
+  //  解绑事件
  off(event, fn) {
    this.event.off(event, fn)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-05 13:32:43
-   * @Desc: 设置主题
-   */
+  //  设置主题
  initTheme() {
    // 合并主题配置
    this.themeConfig = merge(theme[this.opt.theme], this.opt.themeConfig)
@@ -243,107 +231,75 @@ class MindMap {
    Style.setBackgroundStyle(this.el, this.themeConfig)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-05 13:52:08
-   * @Desc: 设置主题
-   */
+  //  设置主题
  setTheme(theme) {
    this.renderer.clearAllActive()
    this.opt.theme = theme
-    this.reRender()
+    this.render(null, CONSTANTS.CHANGE_THEME)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-06-25 23:52:37
-   * @Desc: 获取当前主题
-   */
+  //  获取当前主题
  getTheme() {
    return this.opt.theme
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-05 13:50:17
-   * @Desc: 设置主题配置
-   */
+  //  设置主题配置
  setThemeConfig(config) {
    this.opt.themeConfig = config
-    this.reRender()
+    this.render(null, CONSTANTS.CHANGE_THEME)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-08-01 10:38:34
-   * @Desc: 获取自定义主题配置
-   */
+  //  获取自定义主题配置
  getCustomThemeConfig() {
    return this.opt.themeConfig
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-05 14:01:29
-   * @Desc: 获取某个主题配置值
-   */
+  //  获取某个主题配置值
  getThemeConfig(prop) {
    return prop === undefined ? this.themeConfig : this.themeConfig[prop]
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-07-13 16:17:06
-   * @Desc: 获取当前布局结构
-   */
+  // 获取配置
+  getConfig(prop) {
+    return prop === undefined ? this.opt : this.opt[prop]
+  }
+
+  // 更新配置
+  updateConfig(opt = {}) {
+    this.opt = this.handleOpt(merge.all([defaultOpt, this.opt, opt]))
+  }
+
+  //  获取当前布局结构
  getLayout() {
    return this.opt.layout
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-07-13 16:17:33
-   * @Desc: 设置布局结构
-   */
+  //  设置布局结构
  setLayout(layout) {
    // 检查布局配置
    if (!layoutValueList.includes(layout)) {
-      layout = 'logicalStructure'
+      layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
    }
    this.opt.layout = layout
    this.renderer.setLayout()
    this.render()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-04 13:01:00
-   * @Desc: 执行命令
-   */
+  //  执行命令
  execCommand(...args) {
    this.command.exec(...args)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-08-03 22:58:12
-   * @Desc: 动态设置思维导图数据，纯节点数据
-   */
+  //  动态设置思维导图数据，纯节点数据
  setData(data) {
    this.execCommand('CLEAR_ACTIVE_NODE')
    this.command.clearHistory()
+    this.command.addHistory()
    this.renderer.renderTree = data
    this.reRender()
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-09-21 16:39:13
-   * @Desc: 动态设置思维导图数据，包括节点数据、布局、主题、视图
-   */
+  //  动态设置思维导图数据，包括节点数据、布局、主题、视图
  setFullData(data) {
    if (data.root) {
      this.setData(data.root)
@@ -364,14 +320,9 @@ class MindMap {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林
-   * @Date: 2022-09-24 14:42:07
-   * @Desc: 获取思维导图数据，节点树、主题、布局等
-   */
+  //  获取思维导图数据，节点树、主题、布局等
  getData(withConfig) {
-    let nodeData = this.command.getCopyData()
+    let nodeData = this.command.removeDataUid(this.command.getCopyData())
    let data = {}
    if (withConfig) {
      data = {
@@ -389,21 +340,13 @@ class MindMap {
    return simpleDeepClone(data)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-01 22:06:38
-   * @Desc: 导出
-   */
+  //  导出
  async export(...args) {
    let result = await this.doExport.export(...args)
    return result
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 09:20:03
-   * @Desc: 转换位置
-   */
+  //  转换位置
  toPos(x, y) {
    return {
      x: x - this.elRect.left,
@@ -411,25 +354,121 @@ class MindMap {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-06-08 14:12:38
-   * @Desc: 设置只读模式、编辑模式
-   */
+  //  设置只读模式、编辑模式
  setMode(mode) {
-    if (!['readonly', 'edit'].includes(mode)) {
+    if (![CONSTANTS.MODE.READONLY, CONSTANTS.MODE.EDIT].includes(mode)) {
      return
    }
-    this.opt.readonly = mode === 'readonly'
+    this.opt.readonly = mode === CONSTANTS.MODE.READONLY
    if (this.opt.readonly) {
      // 取消当前激活的元素
      this.renderer.clearAllActive()
    }
    this.emit('mode_change', mode)
  }
+
+  // 获取svg数据
+  getSvgData({ paddingX = 0, paddingY = 0 }) {
+    const svg = this.svg
+    const draw = this.draw
+    // 保存原始信息
+    const origWidth = svg.width()
+    const origHeight = svg.height()
+    const origTransform = draw.transform()
+    const elRect = this.el.getBoundingClientRect()
+    // 去除放大缩小的变换效果
+    draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
+    // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
+    const rect = draw.rbox()
+    // 内边距
+    rect.width += paddingX
+    rect.height += paddingY
+    draw.translate(paddingX / 2, paddingY / 2)
+    // 将svg设置为实际内容的宽高
+    svg.size(rect.width, rect.height)
+    // 把实际内容变换
+    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
+    // 克隆一份数据
+    let clone = svg.clone()
+    // 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题
+    if ((rect.width > origWidth || rect.height >  origHeight) && this.watermark && this.watermark.hasWatermark()) {
+      this.width = rect.width
+      this.height = rect.height
+      this.watermark.draw()
+      clone = svg.clone()
+      this.width = origWidth
+      this.height = origHeight
+      this.watermark.draw()
+    }
+    // 恢复原先的大小和变换信息
+    svg.size(origWidth, origHeight)
+    draw.transform(origTransform)
+
+    return {
+      svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
+      svgHTML: clone.svg(), // svg字符串
+      rect: {
+        ...rect, // 思维导图图形未缩放时的位置尺寸等信息
+        ratio: rect.width / rect.height // 思维导图图形的宽高比
+      },
+      origWidth, // 画布宽度
+      origHeight, // 画布高度
+      scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
+      scaleY: origTransform.scaleY // 思维导图图形的垂直缩放值
+    }
+  }
+
+  // 添加插件
+  addPlugin(plugin, opt) {
+    let index = MindMap.hasPlugin(plugin)
+    if (index === -1) {
+      MindMap.usePlugin(plugin, opt)
+      this.initPlugin(plugin)
+    }
+  }
+
+  // 移除插件
+  removePlugin(plugin) {
+    let index = MindMap.hasPlugin(plugin)
+    if (index !== -1) {
+      MindMap.pluginList.splice(index, 1)
+      if (this[plugin.instanceName]) {
+        if (this[plugin.instanceName].beforePluginRemove) {
+          this[plugin.instanceName].beforePluginRemove()
+        }
+        delete this[plugin.instanceName]
+      }
+    }
+  }
+
+  // 实例化插件
+  initPlugin(plugin) {
+    this[plugin.instanceName] = new plugin({
+      mindMap: this,
+      pluginOpt: plugin.pluginOpt
+    })
+  }
 }

-MindMap.xmind = xmind
+// 插件列表
+MindMap.pluginList = []
+MindMap.usePlugin = (plugin, opt = {}) => {
+  plugin.pluginOpt = opt
+  MindMap.pluginList.push(plugin)
+  return MindMap
+}
+MindMap.hasPlugin = (plugin) => {
+  return MindMap.pluginList.findIndex((item) => {
+    return item === plugin
+  })
+}
+
+// 定义新主题
+MindMap.defineTheme = (name, config = {}) => {
+  if (theme[name]) {
+    return new Error('该主题名称已存在')
+  }
+  theme[name] = merge(defaultTheme, config)
+}

 export default MindMap
--- a/simple-mind-map/package-lock.json
+++ b/simple-mind-map/package-lock.json
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.20",
+  "version": "0.5.5",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
@@ -22,14 +22,18 @@
    "format": "prettier --write ."
  },
  "module": "index.js",
-  "main": "./dist/simpleMindMap.umd.min.js",
+  "__main": "./dist/simpleMindMap.umd.min.js",
  "dependencies": {
    "@svgdotjs/svg.js": "^3.0.16",
    "canvg": "^3.0.7",
    "deepmerge": "^1.5.2",
    "eventemitter3": "^4.0.7",
+    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.1",
    "jszip": "^3.10.1",
+    "mdast-util-from-markdown": "^1.3.0",
+    "quill": "^1.3.6",
+    "uuid": "^9.0.0",
    "xml-js": "^1.6.11"
  },
  "keywords": [
--- a/simple-mind-map/scripts/walkJsFiles.js
+++ b/simple-mind-map/scripts/walkJsFiles.js
@@ -0,0 +1,46 @@
+// 遍历所有js文件
+const path = require('path')
+const fs = require('fs')
+
+const entryPath = path.resolve(__dirname, '../src')
+
+const transform = dir => {
+  let dirs = fs.readdirSync(dir)
+  dirs.forEach(item => {
+    let file = path.join(dir, item)
+    if (fs.statSync(file).isDirectory()) {
+      transform(file)
+    } else if (/\.js$/.test(file)) {
+      transformFile(file)
+    }
+  })
+}
+
+const transformFile = file => {
+  console.log(file);
+  let content = fs.readFileSync(file, 'utf-8')
+  countCodeLines(content)
+  // transformComments(file, content)
+}
+
+// 统计代码行数
+let totalLines = 0
+const countCodeLines = (content) => {
+  totalLines += content.split(/\n/).length
+}
+
+// 转换注释类型
+const transformComments = (file, content) => {
+  console.log('当前转换文件：', file)
+  content = content.replace(/\/\*\*[^/]+\*\//g, str => {
+    let res = /@Desc:([^\n]+)\n/g.exec(str)
+    if (res.length > 0) {
+      return '// ' + res[1]
+    }
+  })
+  fs.writeFileSync(file, content)
+}
+
+transform(entryPath)
+transformFile(path.join(__dirname, '../index.js'))
+console.log(totalLines);
--- a/simple-mind-map/src/AssociativeLine.js
+++ b/simple-mind-map/src/AssociativeLine.js
@@ -0,0 +1,627 @@
+import { walk, bfsWalk, throttle } from './utils/'
+import { v4 as uuid } from 'uuid'
+import {
+  getAssociativeLineTargetIndex,
+  computeCubicBezierPathPoints,
+  joinCubicBezierPath,
+  cubicBezierPath,
+  getNodePoint,
+  computeNodePoints,
+  getNodeLinePath,
+  getDefaultControlPointOffsets
+} from './utils/associativeLineUtils'
+
+// 关联线类
+class AssociativeLine {
+  constructor(opt = {}) {
+    this.mindMap = opt.mindMap
+    this.draw = this.mindMap.draw
+    // 当前所有连接线
+    this.lineList = []
+    // 当前激活的连接线
+    this.activeLine = null
+    // 当前正在创建连接线
+    this.isCreatingLine = false // 是否正在创建连接线中
+    this.creatingStartNode = null // 起始节点
+    this.creatingLine = null // 创建过程中的连接线
+    this.overlapNode = null // 创建过程中的目标节点
+    // 是否有节点正在被拖拽
+    this.isNodeDragging = false
+    // 箭头图标
+    this.markerPath = null
+    this.marker = this.createMarker()
+    // 控制点
+    this.controlLine1 = null
+    this.controlLine2 = null
+    this.controlPoint1 = null
+    this.controlPoint2 = null
+    this.controlPointDiameter = 10
+    this.isControlPointMousedown = false
+    this.mousedownControlPointKey = ''
+    this.controlPointMousemoveState = {
+      pos: null,
+      startPoint: null,
+      endPoint: null,
+      targetIndex: ''
+    }
+    // 节流一下，不然很卡
+    this.checkOverlapNode = throttle(this.checkOverlapNode, 100, this)
+    this.bindEvent()
+  }
+
+  // 监听事件
+  bindEvent() {
+    // 节点树渲染完毕后渲染连接线
+    this.renderAllLines = this.renderAllLines.bind(this)
+    this.mindMap.on('node_tree_render_end', this.renderAllLines)
+    // 状态改变后重新渲染连接线
+    this.mindMap.on('data_change', this.renderAllLines)
+    // 监听画布和节点点击事件，用于清除当前激活的连接线
+    this.mindMap.on('draw_click', () => {
+      if (this.isControlPointMousedown) {
+        return
+      }
+      this.clearActiveLine()
+    })
+    this.mindMap.on('node_click', node => {
+      if (this.isCreatingLine) {
+        this.completeCreateLine(node)
+      } else {
+        this.clearActiveLine()
+      }
+    })
+    // 注册删除快捷键
+    this.mindMap.keyCommand.addShortcut(
+      'Del|Backspace',
+      this.removeLine.bind(this)
+    )
+    // 注册添加连接线的命令
+    this.mindMap.command.add('ADD_ASSOCIATIVE_LINE', this.addLine.bind(this))
+    // 监听鼠标移动事件
+    this.mindMap.on('mousemove', this.onMousemove.bind(this))
+    // 节点拖拽事件
+    this.mindMap.on('node_dragging', this.onNodeDragging.bind(this))
+    this.mindMap.on('node_dragend', this.onNodeDragend.bind(this))
+    // 拖拽控制点
+    window.addEventListener('mousemove', e => {
+      this.onControlPointMousemove(e)
+    })
+    window.addEventListener('mouseup', e => {
+      this.onControlPointMouseup(e)
+    })
+  }
+
+  // 创建箭头
+  createMarker() {
+    return this.draw.marker(20, 20, add => {
+      add.ref(2, 5)
+      add.size(10, 10)
+      add.attr('orient', 'auto-start-reverse')
+      this.markerPath = add.path('M0,0 L2,5 L0,10 L10,5 Z')
+    })
+  }
+
+  // 渲染所有连线
+  renderAllLines() {
+    // 先移除
+    this.removeAllLines()
+    this.removeControls()
+    this.clearActiveLine()
+    let tree = this.mindMap.renderer.root
+    if (!tree) return
+    let idToNode = new Map()
+    let nodeToIds = new Map()
+    walk(
+      tree,
+      null,
+      cur => {
+        if (!cur) return
+        let data = cur.nodeData.data
+        if (
+          data.associativeLineTargets &&
+          data.associativeLineTargets.length > 0
+        ) {
+          nodeToIds.set(cur, data.associativeLineTargets)
+        }
+        if (data.id) {
+          idToNode.set(data.id, cur)
+        }
+      },
+      () => {},
+      true,
+      0
+    )
+    nodeToIds.forEach((ids, node) => {
+      ids.forEach(id => {
+        let toNode = idToNode.get(id)
+        if (!node || !toNode) return
+        let [startPoint, endPoint] = computeNodePoints(node, toNode)
+        this.drawLine(startPoint, endPoint, node, toNode)
+      })
+    })
+  }
+
+  // 绘制连接线
+  drawLine(startPoint, endPoint, node, toNode) {
+    let {
+      associativeLineWidth,
+      associativeLineColor,
+      associativeLineActiveWidth,
+      associativeLineActiveColor
+    } = this.mindMap.themeConfig
+    // 箭头
+    this.markerPath
+      .stroke({ color: associativeLineColor })
+      .fill({ color: associativeLineColor })
+    // 路径
+    let { path: pathStr, controlPoints } = getNodeLinePath(
+      startPoint,
+      endPoint,
+      node,
+      toNode
+    )
+    // 虚线
+    let path = this.draw.path()
+    path
+      .stroke({
+        width: associativeLineWidth,
+        color: associativeLineColor,
+        dasharray: [6, 4]
+      })
+      .fill({ color: 'none' })
+    path.plot(pathStr)
+    path.marker('end', this.marker)
+    // 不可见的点击线
+    let clickPath = this.draw.path()
+    clickPath
+      .stroke({ width: associativeLineActiveWidth, color: 'transparent' })
+      .fill({ color: 'none' })
+    clickPath.plot(pathStr)
+    // 点击事件
+    clickPath.click(e => {
+      e.stopPropagation()
+      // 如果当前存在激活节点，那么取消激活节点
+      if (this.mindMap.renderer.activeNodeList.length > 0) {
+        this.clearActiveNodes()
+      } else {
+        // 否则清除当前的关联线的激活状态，如果有的话
+        this.clearActiveLine()
+        // 保存当前激活的关联线信息
+        this.activeLine = [path, clickPath, node, toNode]
+        // 让不可见的点击线显示
+        clickPath.stroke({ color: associativeLineActiveColor })
+        // 渲染控制点和连线
+        this.renderControls(
+          startPoint,
+          endPoint,
+          controlPoints[0],
+          controlPoints[1]
+        )
+        this.mindMap.emit(
+          'associative_line_click',
+          path,
+          clickPath,
+          node,
+          toNode
+        )
+      }
+    })
+    this.lineList.push([path, clickPath, node, toNode])
+  }
+
+  // 移除所有连接线
+  removeAllLines() {
+    this.lineList.forEach(line => {
+      line[0].remove()
+      line[1].remove()
+    })
+    this.lineList = []
+  }
+
+  // 从当前激活节点开始创建连接线
+  createLineFromActiveNode() {
+    if (this.mindMap.renderer.activeNodeList.length <= 0) return
+    let node = this.mindMap.renderer.activeNodeList[0]
+    this.createLine(node)
+  }
+
+  // 创建连接线
+  createLine(fromNode) {
+    let { associativeLineWidth, associativeLineColor } =
+      this.mindMap.themeConfig
+    if (this.isCreatingLine || !fromNode) return
+    this.isCreatingLine = true
+    this.creatingStartNode = fromNode
+    this.creatingLine = this.draw.path()
+    this.creatingLine
+      .stroke({
+        width: associativeLineWidth,
+        color: associativeLineColor,
+        dasharray: [6, 4]
+      })
+      .fill({ color: 'none' })
+    this.creatingLine.marker('end', this.marker)
+  }
+
+  // 鼠标移动事件
+  onMousemove(e) {
+    if (!this.isCreatingLine) return
+    this.updateCreatingLine(e)
+  }
+
+  // 更新创建过程中的连接线
+  updateCreatingLine(e) {
+    let { x, y } = this.getTransformedEventPos(e)
+    let startPoint = getNodePoint(this.creatingStartNode)
+    let pathStr = cubicBezierPath(startPoint.x, startPoint.y, x, y)
+    this.creatingLine.plot(pathStr)
+    this.checkOverlapNode(x, y)
+  }
+
+  // 获取转换后的鼠标事件对象的坐标
+  getTransformedEventPos(e) {
+    let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+    let { scaleX, scaleY, translateX, translateY } =
+      this.mindMap.draw.transform()
+    return {
+      x: (x - translateX) / scaleX,
+      y: (y - translateY) / scaleY
+    }
+  }
+
+  // 检测当前移动到的目标节点
+  checkOverlapNode(x, y) {
+    this.overlapNode = null
+    bfsWalk(this.mindMap.renderer.root, node => {
+      if (node.nodeData.data.isActive) {
+        this.mindMap.renderer.setNodeActive(node, false)
+      }
+      if (node === this.creatingStartNode || this.overlapNode) {
+        return
+      }
+      let { left, top, width, height } = node
+      let right = left + width
+      let bottom = top + height
+      if (x >= left && x <= right && y >= top && y <= bottom) {
+        this.overlapNode = node
+      }
+    })
+    if (this.overlapNode && !this.overlapNode.nodeData.data.isActive) {
+      this.mindMap.renderer.setNodeActive(this.overlapNode, true)
+    }
+  }
+
+  // 完成创建连接线
+  completeCreateLine(node) {
+    if (this.creatingStartNode === node) return
+    this.addLine(this.creatingStartNode, node)
+    if (this.overlapNode && this.overlapNode.nodeData.data.isActive) {
+      this.mindMap.renderer.setNodeActive(this.overlapNode, false)
+    }
+    this.isCreatingLine = false
+    this.creatingStartNode = null
+    this.creatingLine.remove()
+    this.creatingLine = null
+    this.overlapNode = null
+  }
+
+  // 添加连接线
+  addLine(fromNode, toNode) {
+    if (!fromNode || !toNode) return
+    // 目标节点如果没有id，则生成一个id
+    let id = toNode.nodeData.data.id
+    if (!id) {
+      id = uuid()
+      this.mindMap.execCommand('SET_NODE_DATA', toNode, {
+        id
+      })
+    }
+    // 将目标节点id保存起来
+    let list = fromNode.nodeData.data.associativeLineTargets || []
+    list.push(id)
+    // 保存控制点
+    let [startPoint, endPoint] = computeNodePoints(fromNode, toNode)
+    let controlPoints = computeCubicBezierPathPoints(
+      startPoint.x,
+      startPoint.y,
+      endPoint.x,
+      endPoint.y
+    )
+    let offsetList =
+      fromNode.nodeData.data.associativeLineTargetControlOffsets || []
+    // 保存的实际是控制点和端点的差值，否则当节点位置改变了，控制点还是原来的位置，连线就不对了
+    offsetList[list.length - 1] = [
+      {
+        x: controlPoints[0].x - startPoint.x,
+        y: controlPoints[0].y - startPoint.y
+      },
+      {
+        x: controlPoints[1].x - endPoint.x,
+        y: controlPoints[1].y - endPoint.y
+      }
+    ]
+    this.mindMap.execCommand('SET_NODE_DATA', fromNode, {
+      associativeLineTargets: list,
+      associativeLineTargetControlOffsets: offsetList
+    })
+  }
+
+  // 删除连接线
+  removeLine() {
+    if (!this.activeLine) return
+    let [, , node, toNode] = this.activeLine
+    this.removeControls()
+    let { associativeLineTargets, associativeLineTargetControlOffsets } =
+      node.nodeData.data
+    let targetIndex = getAssociativeLineTargetIndex(node, toNode)
+    this.mindMap.execCommand('SET_NODE_DATA', node, {
+      associativeLineTargets: associativeLineTargets.filter((_, index) => {
+        return index !== targetIndex
+      }),
+      associativeLineTargetControlOffsets: associativeLineTargetControlOffsets
+        ? associativeLineTargetControlOffsets.filter((_, index) => {
+            return index !== targetIndex
+          })
+        : []
+    })
+  }
+
+  // 清除当前激活的节点
+  clearActiveNodes() {
+    if (this.mindMap.renderer.activeNodeList.length > 0) {
+      this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+    }
+  }
+
+  // 清除激活的线
+  clearActiveLine() {
+    if (this.activeLine) {
+      this.activeLine[1].stroke({
+        color: 'transparent'
+      })
+      this.activeLine = null
+      this.removeControls()
+    }
+  }
+
+  // 处理节点正在拖拽事件
+  onNodeDragging() {
+    if (this.isNodeDragging) return
+    this.isNodeDragging = true
+    this.lineList.forEach(line => {
+      line[0].hide()
+      line[1].hide()
+    })
+    this.hideControls()
+  }
+
+  // 处理节点拖拽完成事件
+  onNodeDragend() {
+    if (!this.isNodeDragging) return
+    this.lineList.forEach(line => {
+      line[0].show()
+      line[1].show()
+    })
+    this.showControls()
+    this.isNodeDragging = false
+  }
+
+  // 创建控制点、连线节点
+  createControlNodes() {
+    let { associativeLineActiveColor } = this.mindMap.themeConfig
+    // 连线
+    this.controlLine1 = this.draw
+      .line()
+      .stroke({ color: associativeLineActiveColor, width: 2 })
+    this.controlLine2 = this.draw
+      .line()
+      .stroke({ color: associativeLineActiveColor, width: 2 })
+    // 控制点
+    this.controlPoint1 = this.createOneControlNode('controlPoint1')
+    this.controlPoint2 = this.createOneControlNode('controlPoint2')
+  }
+
+  // 创建控制点
+  createOneControlNode(pointKey) {
+    let { associativeLineActiveColor } = this.mindMap.themeConfig
+    return this.draw
+      .circle(this.controlPointDiameter)
+      .stroke({ color: associativeLineActiveColor })
+      .fill({ color: '#fff' })
+      .click(e => {
+        e.stopPropagation()
+      })
+      .mousedown(e => {
+        this.onControlPointMousedown(e, pointKey)
+      })
+  }
+
+  // 控制点的鼠标按下事件
+  onControlPointMousedown(e, pointKey) {
+    e.stopPropagation()
+    this.isControlPointMousedown = true
+    this.mousedownControlPointKey = pointKey
+  }
+
+  // 控制点的鼠标移动事件
+  onControlPointMousemove(e) {
+    if (
+      !this.isControlPointMousedown ||
+      !this.mousedownControlPointKey ||
+      !this[this.mousedownControlPointKey]
+    )
+      return
+    e.stopPropagation()
+    e.preventDefault()
+    let radius = this.controlPointDiameter / 2
+    // 转换鼠标当前的位置
+    let { x, y } = this.getTransformedEventPos(e)
+    this.controlPointMousemoveState.pos = {
+      x,
+      y
+    }
+    // 更新当前拖拽的控制点的位置
+    this[this.mousedownControlPointKey].x(x - radius).y(y - radius)
+    let [path, clickPath, node, toNode] = this.activeLine
+    let [startPoint, endPoint] = computeNodePoints(node, toNode)
+    this.controlPointMousemoveState.startPoint = startPoint
+    this.controlPointMousemoveState.endPoint = endPoint
+    let targetIndex = getAssociativeLineTargetIndex(node, toNode)
+    this.controlPointMousemoveState.targetIndex = targetIndex
+    let offsets = []
+    let associativeLineTargetControlOffsets = node.nodeData.data.associativeLineTargetControlOffsets
+    if (!associativeLineTargetControlOffsets) {
+      // 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
+      offsets = getDefaultControlPointOffsets(startPoint, endPoint)
+    } else {
+      offsets = associativeLineTargetControlOffsets[targetIndex]
+    }
+    let point1 = null
+    let point2 = null
+    // 拖拽的是控制点1
+    if (this.mousedownControlPointKey === 'controlPoint1') {
+      point1 = {
+        x,
+        y
+      }
+      point2 = {
+        x: endPoint.x + offsets[1].x,
+        y: endPoint.y + offsets[1].y
+      }
+      // 更新控制点1的连线
+      this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
+    } else {
+      // 拖拽的是控制点2
+      point1 = {
+        x: startPoint.x + offsets[0].x,
+        y: startPoint.y + offsets[0].y
+      }
+      point2 = {
+        x,
+        y
+      }
+      // 更新控制点2的连线
+      this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
+    }
+    // 更新关联线
+    let pathStr = joinCubicBezierPath(startPoint, endPoint, point1, point2)
+    path.plot(pathStr)
+    clickPath.plot(pathStr)
+  }
+
+  // 控制点的鼠标移动事件
+  onControlPointMouseup(e) {
+    if (!this.isControlPointMousedown) return
+    e.stopPropagation()
+    e.preventDefault()
+    let { pos, startPoint, endPoint, targetIndex } =
+      this.controlPointMousemoveState
+    let [, , node] = this.activeLine
+    let offsetList = []
+    let associativeLineTargetControlOffsets = node.nodeData.data.associativeLineTargetControlOffsets
+    if (!associativeLineTargetControlOffsets) {
+      // 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
+      offsetList[targetIndex] = getDefaultControlPointOffsets(startPoint, endPoint)
+    } else {  
+      offsetList = associativeLineTargetControlOffsets
+    }
+    let offset1 = null
+    let offset2 = null
+    if (this.mousedownControlPointKey === 'controlPoint1') {
+      // 更新控制点1数据
+      offset1 = {
+        x: pos.x - startPoint.x,
+        y: pos.y - startPoint.y
+      }
+      offset2 = offsetList[targetIndex][1]
+    } else {
+      // 更新控制点2数据
+      offset1 = offsetList[targetIndex][0]
+      offset2 = {
+        x: pos.x - endPoint.x,
+        y: pos.y - endPoint.y
+      }
+    }
+    offsetList[targetIndex] = [offset1, offset2]
+    this.mindMap.execCommand('SET_NODE_DATA', node, {
+      associativeLineTargetControlOffsets: offsetList
+    })
+    // 这里要加个setTimeout0是因为draw_click事件比mouseup事件触发的晚，所以重置isControlPointMousedown需要等draw_click事件触发完以后
+    setTimeout(() => {
+      this.resetControlPoint()
+    }, 0)
+  }
+
+  // 复位控制点移动
+  resetControlPoint() {
+    this.isControlPointMousedown = false
+    this.mousedownControlPointKey = ''
+    this.controlPointMousemoveState = {
+      pos: null,
+      startPoint: null,
+      endPoint: null,
+      targetIndex: ''
+    }
+  }
+
+  // 渲染控制点
+  renderControls(startPoint, endPoint, point1, point2) {
+    if (!this.controlLine1) {
+      this.createControlNodes()
+    }
+    let radius = this.controlPointDiameter / 2
+    // 控制点和起终点的连线
+    this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
+    this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
+    // 控制点
+    this.controlPoint1.x(point1.x - radius).y(point1.y - radius)
+    this.controlPoint2.x(point2.x - radius).y(point2.y - radius)
+  }
+
+  // 删除控制点
+  removeControls() {
+    if (!this.controlLine1) return
+    ;[
+      this.controlLine1,
+      this.controlLine2,
+      this.controlPoint1,
+      this.controlPoint2
+    ].forEach(item => {
+      item.remove()
+    })
+    this.controlLine1 = null
+    this.controlLine2 = null
+    this.controlPoint1 = null
+    this.controlPoint2 = null
+  }
+
+  // 隐藏控制点
+  hideControls() {
+    if (!this.controlLine1) return
+    ;[
+      this.controlLine1,
+      this.controlLine2,
+      this.controlPoint1,
+      this.controlPoint2
+    ].forEach(item => {
+      item.hide()
+    })
+  }
+
+  // 显示控制点
+  showControls() {
+    if (!this.controlLine1) return
+    ;[
+      this.controlLine1,
+      this.controlLine2,
+      this.controlPoint1,
+      this.controlPoint2
+    ].forEach(item => {
+      item.show()
+    })
+  }
+}
+
+AssociativeLine.instanceName = 'associativeLine'
+
+export default AssociativeLine
--- a/simple-mind-map/src/BatchExecution.js
+++ b/simple-mind-map/src/BatchExecution.js
@@ -1,60 +1,15 @@
-/**
- * @Author: 王林
- * @Date: 2021-06-27 13:16:23
- * @Desc: 在下一个事件循环里执行任务
- */
-const nextTick = function (fn, ctx) {
-  let pending = false
-  let timerFunc = null
-  let handle = () => {
-    pending = false
-    ctx ? fn.call(ctx) : fn()
-  }
-  // 支持MutationObserver接口的话使用MutationObserver
-  if (typeof MutationObserver !== 'undefined') {
-    let counter = 1
-    let observer = new MutationObserver(handle)
-    let textNode = document.createTextNode(counter)
-    observer.observe(textNode, {
-      characterData: true // 设为 true 表示监视指定目标节点或子节点树中节点所包含的字符数据的变化
-    })
-    timerFunc = function () {
-      counter = (counter + 1) % 2 // counter会在0和1两者循环变化
-      textNode.data = counter // 节点变化会触发回调handle，
-    }
-  } else {
-    // 否则使用定时器
-    timerFunc = setTimeout
-  }
-  return function () {
-    if (pending) return
-    pending = true
-    timerFunc(handle, 0)
-  }
-}
+import { nextTick } from './utils'

-/**
- * @Author: 王林
- * @Date: 2021-06-26 22:40:52
- * @Desc: 批量执行
- */
+//  批量执行
 class BatchExecution {
-  /**
-   * @Author: 王林
-   * @Date: 2021-06-26 22:41:41
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor() {
    this.has = {}
    this.queue = []
    this.nextTick = nextTick(this.flush, this)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-06-27 12:54:04
-   * @Desc: 添加任务
-   */
+  //  添加任务
  push(name, fn) {
    if (this.has[name]) {
      return
@@ -67,11 +22,7 @@ class BatchExecution {
    this.nextTick()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-06-27 13:09:24
-   * @Desc:  执行队列
-   */
+  //   执行队列
  flush() {
    let fns = this.queue.slice(0)
    this.queue = []
--- a/simple-mind-map/src/Command.js
+++ b/simple-mind-map/src/Command.js
@@ -1,16 +1,8 @@
-import { copyRenderTree, simpleDeepClone } from './utils'
+import { copyRenderTree, simpleDeepClone, nextTick } from './utils'

-/**
- * @Author: 王林
- * @Date: 2021-05-04 13:10:06
- * @Desc: 命令类
- */
+//  命令类
 class Command {
-  /**
-   * @Author: 王林
-   * @Date: 2021-05-04 13:10:24
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor(opt = {}) {
    this.opt = opt
    this.mindMap = opt.mindMap
@@ -19,24 +11,17 @@ class Command {
    this.activeHistoryIndex = 0
    // 注册快捷键
    this.registerShortcutKeys()
+    this.addHistory = nextTick(this.addHistory, this)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-08-03 23:06:55
-   * @Desc: 清空历史数据
-   */
+  //  清空历史数据
  clearHistory() {
    this.history = []
    this.activeHistoryIndex = 0
    this.mindMap.emit('back_forward', 0, 0)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-08-02 23:23:19
-   * @Desc: 注册快捷键
-   */
+  //  注册快捷键
  registerShortcutKeys() {
    this.mindMap.keyCommand.addShortcut('Control+z', () => {
      this.mindMap.execCommand('BACK')
@@ -46,28 +31,20 @@ class Command {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-04 13:12:30
-   * @Desc: 执行命令
-   */
+  //  执行命令
  exec(name, ...args) {
    if (this.commands[name]) {
      this.commands[name].forEach(fn => {
        fn(...args)
      })
-      if (name === 'BACK' || name === 'FORWARD') {
+      if (['BACK', 'FORWARD', 'SET_NODE_ACTIVE', 'CLEAR_ACTIVE_NODE'].includes(name)) {
        return
      }
      this.addHistory()
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-04 13:13:01
-   * @Desc: 添加命令
-   */
+  //  添加命令
  add(name, fn) {
    if (this.commands[name]) {
      this.commands[name].push(fn)
@@ -76,11 +53,7 @@ class Command {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-15 23:02:41
-   * @Desc: 移除命令
-   */
+  //  移除命令
  remove(name, fn) {
    if (!this.commands[name]) {
      return
@@ -98,16 +71,21 @@ class Command {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-04 14:35:43
-   * @Desc: 添加回退数据
-   */
+  //  添加回退数据
  addHistory() {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
    let data = this.getCopyData()
+    // 此次数据和上次一样则不重复添加
+    if (this.history.length > 0 && JSON.stringify(this.history[this.history.length - 1]) === JSON.stringify(data)) {
+      return
+    }
+    // 删除当前历史指针后面的数据
+    this.history = this.history.slice(0, this.activeHistoryIndex + 1)
    this.history.push(simpleDeepClone(data))
    this.activeHistoryIndex = this.history.length - 1
-    this.mindMap.emit('data_change', data)
+    this.mindMap.emit('data_change', this.removeDataUid(data))
    this.mindMap.emit(
      'back_forward',
      this.activeHistoryIndex,
@@ -115,12 +93,11 @@ class Command {
    )
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 22:34:53
-   * @Desc: 回退
-   */
+  //  回退
  back(step = 1) {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
    if (this.activeHistoryIndex - step >= 0) {
      this.activeHistoryIndex -= step
      this.mindMap.emit(
@@ -128,32 +105,45 @@ class Command {
        this.activeHistoryIndex,
        this.history.length
      )
-      return simpleDeepClone(this.history[this.activeHistoryIndex])
+      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
+      this.mindMap.emit('data_change', this.removeDataUid(data))
+      return data
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-07-12 10:45:31
-   * @Desc: 前进
-   */
+  //  前进
  forward(step = 1) {
+    if (this.mindMap.opt.readonly) {
+      return
+    }
    let len = this.history.length
    if (this.activeHistoryIndex + step <= len - 1) {
      this.activeHistoryIndex += step
-      this.mindMap.emit('back_forward', this.activeHistoryIndex)
-      return simpleDeepClone(this.history[this.activeHistoryIndex])
+      this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
+      let data = simpleDeepClone(this.history[this.activeHistoryIndex])
+      this.mindMap.emit('data_change', this.removeDataUid(data))
+      return data
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-04 15:02:58
-   * @Desc: 获取渲染树数据副本
-   */
+  //  获取渲染树数据副本
  getCopyData() {
-    return copyRenderTree({}, this.mindMap.renderer.renderTree)
+    return copyRenderTree({}, this.mindMap.renderer.renderTree, true)
+  }
+
+  // 移除节点数据中的uid
+  removeDataUid(data) {
+    data = simpleDeepClone(data)
+    let walk = (root) => {
+      delete root.data.uid
+      if (root.children && root.children.length > 0) {
+        root.children.forEach((item) => {
+          walk(item)
+        })
+      }
+    }
+    walk(data)
+    return data
  }
 }

--- a/simple-mind-map/src/Drag.js
+++ b/simple-mind-map/src/Drag.js
@@ -1,18 +1,10 @@
 import { bfsWalk, throttle } from './utils'
 import Base from './layouts/Base'

-/**
- * javascript comment
- * @Author: 王林25
- * @Date: 2021-11-23 17:38:55
- * @Desc: 节点拖动类
- */
+//  节点拖动类
+
 class Drag extends Base {
-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 22:35:16
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor({ mindMap }) {
    super(mindMap.renderer)
    this.mindMap = mindMap
@@ -20,12 +12,7 @@ class Drag extends Base {
    this.bindEvent()
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-11-23 19:33:56
-   * @Desc: 复位
-   */
+  //  复位
  reset() {
    // 当前拖拽节点
    this.node = null
@@ -56,13 +43,11 @@ class Drag extends Base {
    this.mouseDownY = 0
    this.mouseMoveX = 0
    this.mouseMoveY = 0
+    // 鼠标移动的距离距鼠标按下的位置距离多少以上才认为是拖动事件
+    this.checkDragOffset = 10
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 22:36:36
-   * @Desc: 绑定事件
-   */
+  //  绑定事件
  bindEvent() {
    this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
    this.mindMap.on('node_mousedown', (node, e) => {
@@ -91,13 +76,14 @@ class Drag extends Base {
      if (!this.isMousedown) {
        return
      }
+      this.mindMap.emit('node_dragging', this.node)
      e.preventDefault()
      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
      this.mouseMoveX = x
      this.mouseMoveY = y
      if (
-        Math.abs(x - this.mouseDownX) <= 10 &&
-        Math.abs(y - this.mouseDownY) <= 10 &&
+        Math.abs(x - this.mouseDownX) <= this.checkDragOffset &&
+        Math.abs(y - this.mouseDownY) <= this.checkDragOffset &&
        !this.node.isDrag
      ) {
        return
@@ -110,12 +96,7 @@ class Drag extends Base {
    this.mindMap.on('mouseup', this.onMouseup)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-11-23 19:38:02
-   * @Desc: 鼠标松开事件
-   */
+  //  鼠标松开事件
  onMouseup(e) {
    if (!this.isMousedown) {
      return
@@ -137,7 +118,7 @@ class Drag extends Base {
      // 存在下一个相邻节点，作为其前一个兄弟节点
      this.mindMap.renderer.setNodeActive(this.nextNode, false)
      this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
-    } else if (_nodeIsDrag) {
+    } else if (_nodeIsDrag && this.mindMap.opt.enableFreeDrag) {
      // 自定义位置
      let { x, y } = this.mindMap.toPos(
        e.clientX - this.offsetX,
@@ -154,14 +135,10 @@ class Drag extends Base {
      this.mindMap.render()
    }
    this.reset()
+    this.mindMap.emit('node_dragend')
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-11-23 19:34:53
-   * @Desc: 创建克隆节点
-   */
+  //  创建克隆节点
  createCloneNode() {
    if (!this.clone) {
      // 节点
@@ -182,12 +159,7 @@ class Drag extends Base {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-11-23 19:35:16
-   * @Desc: 移除克隆节点
-   */
+  //  移除克隆节点
  removeCloneNode() {
    if (!this.clone) {
      return
@@ -197,12 +169,7 @@ class Drag extends Base {
    this.placeholder.remove()
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-11-23 18:53:47
-   * @Desc: 拖动中
-   */
+  //  拖动中
  onMove(x, y) {
    if (!this.isMousedown) {
      return
@@ -228,18 +195,13 @@ class Drag extends Base {
    this.checkOverlapNode()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 10:20:43
-   * @Desc: 检测重叠节点
-   */
+  //  检测重叠节点
  checkOverlapNode() {
    if (!this.drawTransform) {
      return
    }
-    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-    let checkRight = this.cloneNodeLeft + this.node.width * scaleX
-    let checkBottom = this.cloneNodeTop + this.node.height * scaleX
+    let x = this.mouseMoveX
+    let y = this.mouseMoveY
    this.overlapNode = null
    this.prevNode = null
    this.nextNode = null
@@ -254,34 +216,71 @@ class Drag extends Base {
      if (this.overlapNode || (this.prevNode && this.nextNode)) {
        return
      }
-      let { left, top, width, height } = node
-      let _left = left
-      let _top = top
-      let _bottom = top + height
-      let right = (left + width) * scaleX + translateX
-      let bottom = (top + height) * scaleY + translateY
-      left = left * scaleX + translateX
-      top = top * scaleY + translateY
-      // 检测是否重叠
-      if (!this.overlapNode) {
-        if (
-          left <= checkRight &&
-          right >= this.cloneNodeLeft &&
-          top <= checkBottom &&
-          bottom >= this.cloneNodeTop
-        ) {
-          this.overlapNode = node
+      let nodeRect = this.getNodeRect(node)
+      let oneFourthHeight = nodeRect.height / 4
+      // 前一个和后一个节点
+      let checkList = node.parent ? node.parent.children.filter((item) => {
+        return item !== this.node
+      }) : []
+      let index = checkList.findIndex((item) => {
+        return item === node
+      })
+      let prevBrother = null
+      let nextBrother = null
+      if (index !== -1) {
+        if (index - 1 >= 0) {
+          prevBrother = checkList[index - 1]
+        }
+        if (index + 1 <= checkList.length - 1) {
+          nextBrother = checkList[index + 1]
        }
      }
-      // 检测兄弟节点位置
-      if (!this.prevNode && !this.nextNode && !node.isRoot) {// && this.node.isBrother(node)
-        if (left <= checkRight && right >= this.cloneNodeLeft) {
-          if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
+      // 和前一个兄弟节点的距离
+      let prevBrotherOffset = 0
+      if (prevBrother) {
+        let prevNodeRect = this.getNodeRect(prevBrother)  
+        prevBrotherOffset = nodeRect.top - prevNodeRect.bottom
+        // 间距小于10就当它不存在
+        prevBrotherOffset = prevBrotherOffset >= 10 ? prevBrotherOffset / 2 : 0
+      } else {
+        // 没有前一个兄弟节点，那么假设和前一个节点的距离为20
+        prevBrotherOffset = 10
+      }
+      // 和后一个兄弟节点的距离
+      let nextBrotherOffset = 0
+      if (nextBrother) {
+        let nextNodeRect = this.getNodeRect(nextBrother)
+        nextBrotherOffset = nextNodeRect.top - nodeRect.bottom
+        nextBrotherOffset = nextBrotherOffset >= 10 ? nextBrotherOffset / 2 : 0
+      } else {
+        nextBrotherOffset = 10
+      }
+      if (nodeRect.left <= x && nodeRect.right >= x) {
+        // 检测兄弟节点位置
+        if (!this.overlapNode && !this.prevNode && !this.nextNode && !node.isRoot) {
+          let checkIsPrevNode = nextBrotherOffset > 0 ? // 距离下一个兄弟节点的距离大于0
+            y > nodeRect.bottom && y <= (nodeRect.bottom + nextBrotherOffset) : // 那么在当前节点外底部判断
+            y >= nodeRect.bottom - oneFourthHeight && y <= nodeRect.bottom // 否则在当前节点内底部1/4区间判断
+          let checkIsNextNode = prevBrotherOffset > 0 ? // 距离上一个兄弟节点的距离大于0
+            y < nodeRect.top && y >= (nodeRect.top - prevBrotherOffset) : // 那么在当前节点外底部判断
+            y >= nodeRect.top && y <= nodeRect.top + oneFourthHeight
+          if (checkIsPrevNode) {
            this.prevNode = node
-            this.placeholder.size(node.width, 10).move(_left, _bottom)
-          } else if (checkBottom < top && checkBottom >= top - 10) {
+            let size = nextBrotherOffset > 0 ? nextBrotherOffset : 5
+            this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originBottom)
+          } else if (checkIsNextNode) {
            this.nextNode = node
-            this.placeholder.size(node.width, 10).move(_left, _top - 10)
+            let size = prevBrotherOffset > 0 ? prevBrotherOffset : 5
+            this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originTop - size)
+          }
+        }
+        // 检测是否重叠
+        if (!this.overlapNode && !this.prevNode && !this.nextNode) {
+          if (
+            nodeRect.top + (prevBrotherOffset > 0 ? 0 : oneFourthHeight) <= y &&
+            nodeRect.bottom - (nextBrotherOffset > 0 ? 0 : oneFourthHeight) >= y
+          ) {
+            this.overlapNode = node
          }
        }
      }
@@ -290,6 +289,32 @@ class Drag extends Base {
      this.mindMap.renderer.setNodeActive(this.overlapNode, true)
    }
  }
+
+  // 计算节点的位置尺寸信息
+  getNodeRect(node) {
+    let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+    let { left, top, width, height } = node
+    let originLeft = left
+    let originTop = top
+    let originBottom = top + height
+    let right = (left + width) * scaleX + translateX
+    let bottom = (top + height) * scaleY + translateY
+    left = left * scaleX + translateX
+    top = top * scaleY + translateY
+    return {
+      width,
+      height,
+      left,
+      top,
+      right,
+      bottom,
+      originLeft,
+      originTop,
+      originBottom
+    }
+  }
 }

+Drag.instanceName = 'drag'
+
 export default Drag
--- a/simple-mind-map/src/Event.js
+++ b/simple-mind-map/src/Event.js
@@ -1,18 +1,9 @@
 import EventEmitter from 'eventemitter3'
+import { CONSTANTS } from './utils/constant'

-/**
- * javascript comment
- * @Author: 王林25
- * @Date: 2021-04-07 14:53:09
- * @Desc: 事件类
- */
+//  事件类
 class Event extends EventEmitter {
-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 14:53:25
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor(opt = {}) {
    super()
    this.opt = opt
@@ -34,13 +25,9 @@ class Event extends EventEmitter {
    this.bind()
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 15:52:24
-   * @Desc: 绑定函数上下文
-   */
+  //  绑定函数上下文
  bindFn() {
+    this.onBodyClick = this.onBodyClick.bind(this)
    this.onDrawClick = this.onDrawClick.bind(this)
    this.onMousedown = this.onMousedown.bind(this)
    this.onMousemove = this.onMousemove.bind(this)
@@ -49,72 +36,56 @@ class Event extends EventEmitter {
    this.onContextmenu = this.onContextmenu.bind(this)
    this.onSvgMousedown = this.onSvgMousedown.bind(this)
    this.onKeyup = this.onKeyup.bind(this)
+    this.onMouseenter = this.onMouseenter.bind(this)
+    this.onMouseleave = this.onMouseleave.bind(this)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 14:53:43
-   * @Desc: 绑定事件
-   */
+  //  绑定事件
  bind() {
+    document.body.addEventListener('click', this.onBodyClick)
    this.mindMap.svg.on('click', this.onDrawClick)
    this.mindMap.el.addEventListener('mousedown', this.onMousedown)
    this.mindMap.svg.on('mousedown', this.onSvgMousedown)
    window.addEventListener('mousemove', this.onMousemove)
    window.addEventListener('mouseup', this.onMouseup)
-    // 兼容火狐浏览器
-    if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
-      this.mindMap.el.addEventListener('DOMMouseScroll', this.onMousewheel)
-    } else {
-      this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
-    }
+    this.mindMap.el.addEventListener('wheel', this.onMousewheel)
    this.mindMap.svg.on('contextmenu', this.onContextmenu)
+    this.mindMap.svg.on('mouseenter', this.onMouseenter)
+    this.mindMap.svg.on('mouseleave', this.onMouseleave)
    window.addEventListener('keyup', this.onKeyup)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 15:40:51
-   * @Desc: 解绑事件
-   */
+  //  解绑事件
  unbind() {
+    document.body.removeEventListener('click', this.onBodyClick)
    this.mindMap.svg.off('click', this.onDrawClick)
    this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
    window.removeEventListener('mousemove', this.onMousemove)
    window.removeEventListener('mouseup', this.onMouseup)
-    this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
+    this.mindMap.el.removeEventListener('wheel', this.onMousewheel)
    this.mindMap.svg.off('contextmenu', this.onContextmenu)
+    this.mindMap.svg.off('mouseenter', this.onMouseenter)
+    this.mindMap.svg.off('mouseleave', this.onMouseleave)
    window.removeEventListener('keyup', this.onKeyup)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 13:19:39
-   * @Desc:  画布的单击事件
-   */
+  //   画布的单击事件
  onDrawClick(e) {
    this.emit('draw_click', e)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-16 13:37:30
-   * @Desc:  svg画布的鼠标按下事件
-   */
+  // 页面的单击事件
+  onBodyClick(e) {
+    this.emit('body_click', e)
+  }
+
+  //   svg画布的鼠标按下事件
  onSvgMousedown(e) {
    this.emit('svg_mousedown', e)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 15:17:35
-   * @Desc: 鼠标按下事件
-   */
+  //  鼠标按下事件
  onMousedown(e) {
-    // e.preventDefault()
    // 鼠标左键
    if (e.which === 1) {
      this.isLeftMousedown = true
@@ -124,72 +95,65 @@ class Event extends EventEmitter {
    this.emit('mousedown', e, this)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 15:18:32
-   * @Desc: 鼠标移动事件
-   */
+  //  鼠标移动事件
  onMousemove(e) {
-    // e.preventDefault()
    this.mousemovePos.x = e.clientX
    this.mousemovePos.y = e.clientY
    this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
    this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
    this.emit('mousemove', e, this)
    if (this.isLeftMousedown) {
+      e.preventDefault()
      this.emit('drag', e, this)
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 15:18:57
-   * @Desc: 鼠标松开事件
-   */
+  //  鼠标松开事件
  onMouseup(e) {
    this.isLeftMousedown = false
    this.emit('mouseup', e, this)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 15:46:27
-   * @Desc: 鼠标滚动
-   */
+  //  鼠标滚动
  onMousewheel(e) {
    e.stopPropagation()
    e.preventDefault()
    let dir
-    if ((e.wheelDeltaY || e.detail) > 0) {
-      dir = 'up'
+    // 解决mac触控板双指缩放方向相反的问题
+    if (e.ctrlKey) {
+      if (e.deltaY > 0) dir = CONSTANTS.DIR.UP
+      if (e.deltaY < 0) dir = CONSTANTS.DIR.DOWN
+      if (e.deltaX > 0) dir = CONSTANTS.DIR.LEFT
+      if (e.deltaX < 0) dir = CONSTANTS.DIR.RIGHT
    } else {
-      dir = 'down'
+      if ((e.wheelDeltaY || e.detail) > 0) dir = CONSTANTS.DIR.UP
+      if ((e.wheelDeltaY || e.detail) < 0) dir = CONSTANTS.DIR.DOWN
+      if ((e.wheelDeltaX || e.detail) > 0) dir = CONSTANTS.DIR.LEFT
+      if ((e.wheelDeltaX || e.detail) < 0) dir = CONSTANTS.DIR.RIGHT
    }
    this.emit('mousewheel', e, dir, this)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 22:34:13
-   * @Desc: 鼠标右键菜单事件
-   */
+  //  鼠标右键菜单事件
  onContextmenu(e) {
    e.preventDefault()
    this.emit('contextmenu', e)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-09 11:12:11
-   * @Desc: 按键松开事件
-   */
+  //  按键松开事件
  onKeyup(e) {
    this.emit('keyup', e)
  }
+
+  // 进入
+  onMouseenter(e) {
+    this.emit('svg_mouseenter', e)
+  }
+
+  // 离开
+  onMouseleave(e) {
+    this.emit('svg_mouseleave', e)
+  }
 }

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

-/**
- * @Author: 王林
- * @Date: 2021-07-01 22:05:16
- * @Desc: 导出类
- */
+//  导出类
 class Export {
-  /**
-   * @Author: 王林
-   * @Date: 2021-07-01 22:05:42
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor(opt) {
    this.mindMap = opt.mindMap
    this.exportPadding = this.mindMap.opt.exportPadding
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-02 07:44:06
-   * @Desc: 导出
-   */
+  //  导出
  async export(type, isDownload = true, name = '思维导图', ...args) {
    if (this[type]) {
      let result = await this[type](name, ...args)
@@ -36,13 +26,13 @@ class Export {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-04 14:57:40
-   * @Desc: 获取svg数据
-   */
-  async getSvgData() {
-    let { svg, svgHTML } = this.mindMap.miniMap.getMiniMap()
+  //  获取svg数据
+  async getSvgData(domToImage) {
+    let { exportPaddingX, exportPaddingY } = this.mindMap.opt
+    let { svg, svgHTML } = this.mindMap.getSvgData({
+      paddingX: exportPaddingX,
+      paddingY: exportPaddingY
+    })
    // 把图片的url转换成data:url类型，否则导出会丢失图片
    let imageList = svg.find('image')
    let task = imageList.map(async item => {
@@ -51,17 +41,26 @@ class Export {
      item.attr('href', imgData)
    })
    await Promise.all(task)
+    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
+      str: svgHTML,
+      nodeWithDomToImg
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-04 15:25:19
-   * @Desc:  svg转png
-   */
+  //   svg转png
  svgToPng(svgSrc) {
    return new Promise((resolve, reject) => {
      const img = new Image()
@@ -99,17 +98,15 @@ class Export {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-04 15:32:07
-   * @Desc: 在canvas上绘制思维导图背景
-   */
+  //  在canvas上绘制思维导图背景
  drawBackgroundToCanvas(ctx, width, height) {
    return new Promise((resolve, reject) => {
      let {
        backgroundColor = '#fff',
        backgroundImage,
-        backgroundRepeat = 'repeat'
+        backgroundRepeat = 'no-repeat',
+        backgroundPosition = 'center center',
+        backgroundSize = 'cover',
      } = this.mindMap.themeConfig
      // 背景颜色
      ctx.save()
@@ -120,34 +117,31 @@ class Export {
      // 背景图片
      if (backgroundImage && backgroundImage !== 'none') {
        ctx.save()
-        let img = new Image()
-        img.src = backgroundImage
-        img.onload = () => {
-          let pat = ctx.createPattern(img, backgroundRepeat)
-          ctx.rect(0, 0, width, height)
-          ctx.fillStyle = pat
-          ctx.fill()
+        drawBackgroundImageToCanvas(ctx, width, height, backgroundImage, {
+          backgroundRepeat,
+          backgroundPosition,
+          backgroundSize
+        }, (err) => {
+          if (err) {
+            reject(err)
+          } else {
+            resolve()
+          }
          ctx.restore()
-          resolve()
-        }
-        img.onerror = e => {
-          reject(e)
-        }
+        })
      } else {
        resolve()
      }
    })
  }

+  //  导出为png
  /**
-   * @Author: 王林
-   * @Date: 2021-07-01 22:09:51
-   * @Desc: 导出为png
   * 方法1.把svg的图片都转化成data:url格式，再转换
   * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
   */
  async png() {
-    let { str } = await this.getSvgData()
+    let { str } = await this.getSvgData(true)
    // 转换成blob数据
    let blob = new Blob([str], {
      type: 'image/svg+xml'
@@ -160,12 +154,7 @@ class Export {
    return imgDataUrl
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-08-08 19:23:08
-   * @Desc: 导出为pdf
-   */
+  //  导出为pdf
  async pdf(name) {
    let img = await this.png()
    let pdf = new JsPDF('', 'pt', 'a4')
@@ -197,11 +186,7 @@ class Export {
    image.src = img
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-04 15:32:07
-   * @Desc: 在svg上绘制思维导图背景
-   */
+  //  在svg上绘制思维导图背景
  drawBackgroundToSvg(svg) {
    return new Promise(async resolve => {
      let {
@@ -223,13 +208,22 @@ class Export {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-04 14:54:07
-   * @Desc: 导出为svg
-   */
-  async svg(name) {
-    let { node } = await this.getSvgData()
+  //  导出为svg
+  // domToImage：是否将svg中的dom节点转换成图片的形式
+  // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入
+  async svg(name, domToImage = false, plusCssText) {
+    let { node, nodeWithDomToImg } = await this.getSvgData(domToImage)
+    // 开启了节点富文本编辑
+    if (this.mindMap.richText) {
+      if (domToImage) {
+        node = nodeWithDomToImg
+      } else if (plusCssText) {
+        let foreignObjectList = node.find('foreignObject')
+        if (foreignObjectList.length > 0) {
+          foreignObjectList[0].add(SVG(`<style>${plusCssText}</style>`))
+        }
+      }
+    }
    node.first().before(SVG(`<title>${name}</title>`))
    await this.drawBackgroundToSvg(node)
    let str = node.svg()
@@ -240,11 +234,7 @@ class Export {
    return URL.createObjectURL(blob)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-08-03 22:19:17
-   * @Desc: 导出为json
-   */
+  //  导出为json
  json(name, withConfig = true) {
    let data = this.mindMap.getData(withConfig)
    let str = JSON.stringify(data)
@@ -252,14 +242,20 @@ class Export {
    return URL.createObjectURL(blob)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-08-03 22:24:24
-   * @Desc: 专有文件，其实就是json文件
-   */
+  //  专有文件，其实就是json文件
  smm(name, withConfig) {
    return this.json(name, withConfig)
  }
+
+  // markdown文件
+  md() {
+    let data = this.mindMap.getData()
+    let content = transformToMarkdown(data)
+    let blob = new Blob([content])
+    return URL.createObjectURL(blob)
+  }
 }

+Export.instanceName = 'doExport'
+
 export default Export
--- a/simple-mind-map/src/KeyCommand.js
+++ b/simple-mind-map/src/KeyCommand.js
@@ -1,15 +1,7 @@
 import { keyMap } from './utils/keyMap'
-/**
- * @Author: 王林
- * @Date: 2021-04-24 15:20:46
- * @Desc: 快捷按键、命令处理类
- */
+//  快捷按键、命令处理类
 export default class KeyCommand {
-  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 15:21:32
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor(opt) {
    this.opt = opt
    this.mindMap = opt.mindMap
@@ -18,57 +10,49 @@ export default class KeyCommand {
    }
    this.shortcutMapCache = {}
    this.isPause = false
+    this.isInSvg = false
    this.bindEvent()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-08-14 08:57:55
-   * @Desc: 暂停快捷键响应
-   */
+  //  暂停快捷键响应
  pause() {
    this.isPause = true
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-08-14 08:58:43
-   * @Desc: 恢复快捷键响应
-   */
+  //  恢复快捷键响应
  recovery() {
    this.isPause = false
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-08-16 16:29:01
-   * @Desc: 保存当前注册的快捷键数据，然后清空快捷键数据
-   */
+  //  保存当前注册的快捷键数据，然后清空快捷键数据
  save() {
    this.shortcutMapCache = this.shortcutMap
    this.shortcutMap = {}
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-08-16 16:29:38
-   * @Desc: 恢复保存的快捷键数据，然后清空缓存数据
-   */
+  //  恢复保存的快捷键数据，然后清空缓存数据
  restore() {
    this.shortcutMap = this.shortcutMapCache
    this.shortcutMapCache = {}
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 15:23:22
-   * @Desc: 绑定事件
-   */
+  //  绑定事件
  bindEvent() {
+    // 只有当鼠标在画布内才响应快捷键
+    this.mindMap.on('svg_mouseenter', () => {
+      this.isInSvg = true
+    })
+    this.mindMap.on('svg_mouseleave', () => {
+      if (this.mindMap.richText && this.mindMap.richText.showTextEdit) {
+        return
+      }
+      if (this.mindMap.renderer.textEdit.showTextEdit) {
+        return
+      }
+      this.isInSvg = false
+    })
    window.addEventListener('keydown', e => {
-      if (this.isPause) {
+      if (this.isPause || (this.mindMap.opt.enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)) {
        return
      }
      Object.keys(this.shortcutMap).forEach(key => {
@@ -83,11 +67,7 @@ export default class KeyCommand {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 19:24:53
-   * @Desc: 检查键值是否符合
-   */
+  //  检查键值是否符合
  checkKey(e, key) {
    let o = this.getOriginEventCodeArr(e)
    let k = this.getKeyCodeArr(key)
@@ -107,11 +87,7 @@ export default class KeyCommand {
    return true
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 19:15:19
-   * @Desc: 获取事件对象里的键值数组
-   */
+  //  获取事件对象里的键值数组
  getOriginEventCodeArr(e) {
    let arr = []
    if (e.ctrlKey || e.metaKey) {
@@ -129,11 +105,7 @@ export default class KeyCommand {
    return arr
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 19:40:11
-   * @Desc: 获取快捷键对应的键值数组
-   */
+  //  获取快捷键对应的键值数组
  getKeyCodeArr(key) {
    let keyArr = key.split(/\s*\+\s*/)
    let arr = []
@@ -143,10 +115,8 @@ export default class KeyCommand {
    return arr
  }

+  //  添加快捷键命令
  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 15:23:00
-   * @Desc: 添加快捷键命令
   * Enter
   * Tab | Insert
   * Shift + a
@@ -161,12 +131,7 @@ export default class KeyCommand {
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-07-27 14:06:16
-   * @Desc: 移除快捷键命令
-   */
+  //  移除快捷键命令
  removeShortcut(key, fn) {
    key.split(/\s*\|\s*/).forEach(item => {
      if (this.shortcutMap[item]) {
@@ -185,11 +150,7 @@ export default class KeyCommand {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-08-14 08:49:58
-   * @Desc: 获取指定快捷键的处理函数
-   */
+  //  获取指定快捷键的处理函数
  getShortcutFn(key) {
    let res = []
    key.split(/\s*\|\s*/).forEach(item => {
--- a/simple-mind-map/src/KeyboardNavigation.js
+++ b/simple-mind-map/src/KeyboardNavigation.js
@@ -1,52 +1,39 @@
-import { isKey } from './utils/keyMap'
 import { bfsWalk } from './utils'
+import { CONSTANTS } from './utils/constant'

-/**
- * javascript comment
- * @Author: 王林25
- * @Date: 2022-12-09 11:06:50
- * @Desc: 键盘导航类
- */
-export default class KeyboardNavigation {
-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-09 11:07:24
-   * @Desc: 构造函数
-   */
+//  键盘导航类
+class KeyboardNavigation {
+  //  构造函数
  constructor(opt) {
    this.opt = opt
    this.mindMap = opt.mindMap
    this.onKeyup = this.onKeyup.bind(this)
-    this.mindMap.on('keyup', this.onKeyup)
-  }
-
-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-09 14:12:27
-   * @Desc: 处理按键事件
-   */
-  onKeyup(e) {
-    ;['Left', 'Up', 'Right', 'Down'].forEach(dir => {
-      if (isKey(e, dir)) {
-        if (this.mindMap.renderer.activeNodeList.length > 0) {
-          this.focus(dir)
-        } else {
-          let root = this.mindMap.renderer.root
-          this.mindMap.renderer.moveNodeToCenter(root)
-          root.active()
-        }
-      }
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.LEFT, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.LEFT)
+    })
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.UP, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.UP)
+    })
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.RIGHT, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.RIGHT)
+    })
+    this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.DOWN, () => {
+      this.onKeyup(CONSTANTS.KEY_DIR.DOWN)
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-09 14:12:39
-   * @Desc: 聚焦到下一个节点
-   */
+  //  处理按键事件
+  onKeyup(dir) {
+    if (this.mindMap.renderer.activeNodeList.length > 0) {
+      this.focus(dir)
+    } else {
+      let root = this.mindMap.renderer.root
+      this.mindMap.renderer.moveNodeToCenter(root)
+      root.active()
+    }
+  }
+
+  //  聚焦到下一个节点
  focus(dir) {
    // 当前聚焦的节点
    let currentActiveNode = this.mindMap.renderer.activeNodeList[0]
@@ -99,12 +86,7 @@ export default class KeyboardNavigation {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-12 16:22:54
-   * @Desc: 1.简单算法
-   */
+  //  1.简单算法
  getFocusNodeBySimpleAlgorithm({
    currentActiveNode,
    currentActiveNodeRect,
@@ -120,19 +102,19 @@ export default class KeyboardNavigation {
      let { left, top, right, bottom } = rect
      let match = false
      // 按下了左方向键
-      if (dir === 'Left') {
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
        // 判断节点是否在当前节点的左侧
        match = right <= currentActiveNodeRect.left
        // 按下了右方向键
-      } else if (dir === 'Right') {
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
        // 判断节点是否在当前节点的右侧
        match = left >= currentActiveNodeRect.right
        // 按下了上方向键
-      } else if (dir === 'Up') {
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
        // 判断节点是否在当前节点的上面
        match = bottom <= currentActiveNodeRect.top
        // 按下了下方向键
-      } else if (dir === 'Down') {
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
        // 判断节点是否在当前节点的下面
        match = top >= currentActiveNodeRect.bottom
      }
@@ -143,12 +125,7 @@ export default class KeyboardNavigation {
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-12 16:24:54
-   * @Desc: 2.阴影算法
-   */
+  //  2.阴影算法
  getFocusNodeByShadowAlgorithm({
    currentActiveNode,
    currentActiveNodeRect,
@@ -160,22 +137,22 @@ export default class KeyboardNavigation {
      let rect = this.getNodeRect(node)
      let { left, top, right, bottom } = rect
      let match = false
-      if (dir === 'Left') {
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
        match =
          left < currentActiveNodeRect.left &&
          top < currentActiveNodeRect.bottom &&
          bottom > currentActiveNodeRect.top
-      } else if (dir === 'Right') {
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
        match =
          right > currentActiveNodeRect.right &&
          top < currentActiveNodeRect.bottom &&
          bottom > currentActiveNodeRect.top
-      } else if (dir === 'Up') {
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
        match =
          top < currentActiveNodeRect.top &&
          left < currentActiveNodeRect.right &&
          right > currentActiveNodeRect.left
-      } else if (dir === 'Down') {
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
        match =
          bottom > currentActiveNodeRect.bottom &&
          left < currentActiveNodeRect.right &&
@@ -187,12 +164,7 @@ export default class KeyboardNavigation {
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-13 16:15:36
-   * @Desc: 3.区域算法
-   */
+  //  3.区域算法
  getFocusNodeByAreaAlgorithm({
    currentActiveNode,
    currentActiveNodeRect,
@@ -214,13 +186,13 @@ export default class KeyboardNavigation {
      let offsetY = ccY - cY
      if (offsetX === 0 && offsetY === 0) return
      let match = false
-      if (dir === 'Left') {
+      if (dir === CONSTANTS.KEY_DIR.LEFT) {
        match = offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY
-      } else if (dir === 'Right') {
+      } else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
        match = offsetX > 0 && offsetX >= -offsetY && offsetX >= offsetY
-      } else if (dir === 'Up') {
+      } else if (dir === CONSTANTS.KEY_DIR.UP) {
        match = offsetY <= 0 && offsetY < offsetX && offsetY < -offsetX
-      } else if (dir === 'Down') {
+      } else if (dir === CONSTANTS.KEY_DIR.DOWN) {
        match = offsetY > 0 && -offsetY < offsetX && offsetY > offsetX
      }
      if (match) {
@@ -229,12 +201,7 @@ export default class KeyboardNavigation {
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-09 14:12:50
-   * @Desc: 获取节点的位置信息
-   */
+  //  获取节点的位置信息
  getNodeRect(node) {
    let { scaleX, scaleY, translateX, translateY } =
      this.mindMap.draw.transform()
@@ -247,12 +214,7 @@ export default class KeyboardNavigation {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-09 14:13:04
-   * @Desc: 获取两个节点的距离
-   */
+  //  获取两个节点的距离
  getDistance(node1Rect, node2Rect) {
    let center1 = this.getCenter(node1Rect)
    let center2 = this.getCenter(node2Rect)
@@ -261,12 +223,7 @@ export default class KeyboardNavigation {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-09 14:13:11
-   * @Desc: 获取节点的中心点
-   */
+  //  获取节点的中心点
  getCenter({ left, right, top, bottom }) {
    return {
      x: (left + right) / 2,
@@ -274,3 +231,7 @@ export default class KeyboardNavigation {
    }
  }
 }
+
+KeyboardNavigation.instanceName = 'keyboardNavigation'
+
+export default KeyboardNavigation
--- a/simple-mind-map/src/MiniMap.js
+++ b/simple-mind-map/src/MiniMap.js
@@ -1,11 +1,6 @@
 // 小地图类
 class MiniMap {
-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-10-10 14:00:45
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor(opt) {
    this.mindMap = opt.mindMap
    this.isMousedown = false
@@ -19,59 +14,14 @@ class MiniMap {
    }
  }

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

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-10-10 14:22:40
-   * @Desc: 小地图鼠标按下事件
-   */
+  //  小地图鼠标按下事件
  onMousedown(e) {
    this.isMousedown = true
    this.mousedownPos = {
@@ -144,12 +89,7 @@ class MiniMap {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-10-10 14:22:55
-   * @Desc: 小地图鼠标移动事件
-   */
+  //  小地图鼠标移动事件
  onMousemove(e, sensitivityNum = 5) {
    if (!this.isMousedown) {
      return
@@ -161,15 +101,12 @@ class MiniMap {
    this.mindMap.view.translateYTo(oy * sensitivityNum + this.startViewPos.y)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-10-10 14:23:01
-   * @Desc: 小地图鼠标松开事件
-   */
+  //  小地图鼠标松开事件
  onMouseup() {
    this.isMousedown = false
  }
 }

+MiniMap.instanceName = 'miniMap'
+
 export default MiniMap
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -3,36 +3,36 @@ 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 TextEdit from './TextEdit'
 import { copyNodeTree, simpleDeepClone, walk } from './utils'
 import { shapeList } from './Shape'
 import { lineStyleProps } from './themes/default'
+import { CONSTANTS } from './utils/constant'

 // 布局列表
 const layouts = {
  // 逻辑结构图
-  logicalStructure: LogicalStructure,
+  [CONSTANTS.LAYOUT.LOGICAL_STRUCTURE]: LogicalStructure,
  // 思维导图
-  mindMap: MindMap,
+  [CONSTANTS.LAYOUT.MIND_MAP]: MindMap,
  // 目录组织图
-  catalogOrganization: CatalogOrganization,
+  [CONSTANTS.LAYOUT.CATALOG_ORGANIZATION]: CatalogOrganization,
  // 组织结构图
-  organizationStructure: OrganizationStructure
+  [CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE]: OrganizationStructure,
+  // 时间轴
+  [CONSTANTS.LAYOUT.TIMELINE]: Timeline,
+  // 时间轴2
+  [CONSTANTS.LAYOUT.TIMELINE2]: Timeline,
+  // 鱼骨图
+  [CONSTANTS.LAYOUT.FISHBONE]: Fishbone,
 }

-/**
- * javascript comment
- * @Author: 王林25
- * @Date: 2021-04-08 16:25:07
- * @Desc: 渲染
- */
+//  渲染
+
 class Render {
-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 16:25:32
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor(opt = {}) {
    this.opt = opt
    this.mindMap = opt.mindMap
@@ -42,6 +42,15 @@ class Render {
    this.renderTree = merge({}, this.mindMap.opt.data || {})
    // 是否重新渲染
    this.reRender = false
+    // 是否正在渲染中
+    this.isRendering = false
+    // 是否存在等待渲染
+    this.hasWaitRendering = false
+    // 用于缓存节点
+    this.nodeCache = {}
+    this.lastNodeCache = {}
+    // 触发render的来源
+    this.renderSource = ''
    // 当前激活的节点列表
    this.activeNodeList = []
    // 根节点
@@ -58,25 +67,16 @@ class Render {
    this.registerShortcutKeys()
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-07-13 16:20:07
-   * @Desc: 设置布局结构
-   */
+  //  设置布局结构
  setLayout() {
    this.layout = new (
      layouts[this.mindMap.opt.layout]
        ? layouts[this.mindMap.opt.layout]
-        : layouts.logicalStructure
-    )(this)
+        : layouts[CONSTANTS.LAYOUT.LOGICAL_STRUCTURE]
+    )(this, this.mindMap.opt.layout)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-06-20 10:34:06
-   * @Desc:  绑定事件
-   */
+  //   绑定事件
  bindEvent() {
    // 点击事件
    this.mindMap.on('draw_click', () => {
@@ -87,11 +87,7 @@ class Render {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-04 13:19:06
-   * @Desc: 注册命令
-   */
+  //  注册命令
  registerCommands() {
    // 全选
    this.selectAll = this.selectAll.bind(this)
@@ -192,11 +188,7 @@ class Render {
    this.mindMap.command.add('SET_NODE_SHAPE', this.setNodeShape)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 16:55:44
-   * @Desc: 注册快捷键
-   */
+  //  注册快捷键
  registerShortcutKeys() {
    // 插入下级节点
    this.mindMap.keyCommand.addShortcut('Tab', () => {
@@ -240,12 +232,7 @@ class Render {
    // 复制节点、剪切节点、粘贴节点的快捷键需开发者自行注册实现，可参考demo
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-05-09 10:43:52
-   * @Desc: 开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突
-   */
+  //  开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突
  startTextEdit() {
    this.mindMap.keyCommand.save()
    // this.mindMap.keyCommand.removeShortcut('Del|Backspace')
@@ -253,12 +240,7 @@ class Render {
    // this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-05-09 10:45:11
-   * @Desc: 结束文字编辑，会恢复回车键和删除键相关快捷键
-   */
+  //  结束文字编辑，会恢复回车键和删除键相关快捷键
  endTextEdit() {
    this.mindMap.keyCommand.restore()
    // this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
@@ -266,30 +248,53 @@ class Render {
    // this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
  }

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

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-12 22:45:01
-   * @Desc: 清除当前激活的节点
-   */
+  //  清除当前激活的节点
  clearActive() {
    this.activeNodeList.forEach(item => {
      this.setNodeActive(item, false)
@@ -297,11 +302,7 @@ class Render {
    this.activeNodeList = []
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-08-03 23:14:34
-   * @Desc: 清除当前所有激活节点，并会触发事件
-   */
+  //  清除当前所有激活节点，并会触发事件
  clearAllActive() {
    if (this.activeNodeList.length <= 0) {
      return
@@ -310,11 +311,7 @@ class Render {
    this.mindMap.emit('node_active', null, [])
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 10:54:00
-   * @Desc:  添加节点到激活列表里
-   */
+  //   添加节点到激活列表里
  addActiveNode(node) {
    let index = this.findActiveNodeIndex(node)
    if (index === -1) {
@@ -322,11 +319,7 @@ class Render {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 10:04:04
-   * @Desc: 在激活列表里移除某个节点
-   */
+  //  在激活列表里移除某个节点
  removeActiveNode(node) {
    let index = this.findActiveNodeIndex(node)
    if (index === -1) {
@@ -335,22 +328,14 @@ class Render {
    this.activeNodeList.splice(index, 1)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 10:55:23
-   * @Desc: 检索某个节点在激活列表里的索引
-   */
+  //  检索某个节点在激活列表里的索引
  findActiveNodeIndex(node) {
    return this.activeNodeList.findIndex(item => {
      return item === node
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-04 13:46:08
-   * @Desc: 获取节点在同级里的索引位置
-   */
+  //  获取节点在同级里的索引位置
  getNodeIndex(node) {
    return node.parent
      ? node.parent.children.findIndex(item => {
@@ -359,11 +344,7 @@ class Render {
      : 0
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-08-04 23:54:52
-   * @Desc: 全选
-   */
+  //  全选
  selectAll() {
    walk(
      this.root,
@@ -373,7 +354,7 @@ class Render {
          node.nodeData.data.isActive = true
          this.addActiveNode(node)
          setTimeout(() => {
-            node.renderNode()
+            node.updateNodeShape()
          }, 0)
        }
      },
@@ -384,58 +365,55 @@ class Render {
    )
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 22:34:12
-   * @Desc: 回退
-   */
+  //  回退
  back(step) {
    this.clearAllActive()
    let data = this.mindMap.command.back(step)
    if (data) {
      this.renderTree = data
-      this.mindMap.reRender()
+      this.mindMap.render()
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-07-12 10:44:51
-   * @Desc: 前进
-   */
+  //  前进
  forward(step) {
    this.clearAllActive()
    let data = this.mindMap.command.forward(step)
    if (data) {
      this.renderTree = data
-      this.mindMap.reRender()
+      this.mindMap.render()
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-04 13:19:54
-   * @Desc: 插入同级节点，多个节点只会操作第一个节点
-   */
-  insertNode() {
-    if (this.activeNodeList.length <= 0) {
+  // 规范指定节点数据
+  formatAppointNodes(appointNodes) {
+    if (!appointNodes) return []
+    return Array.isArray(appointNodes) ? appointNodes: [appointNodes]
+  }
+
+  //  插入同级节点，多个节点只会操作第一个节点
+  insertNode(openEdit = true, appointNodes = [], appointData = null) {
+    appointNodes = this.formatAppointNodes(appointNodes)
+    if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
      return
    }
-    let first = this.activeNodeList[0]
+    let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
+    let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
+    let first = list[0]
    if (first.isRoot) {
-      this.insertChildNode()
+      this.insertChildNode(openEdit, appointNodes, appointData)
    } else {
-      let text = first.layerIndex === 1 ? '二级节点' : '分支主题'
+      let text = first.layerIndex === 1 ? defaultInsertSecondLevelNodeText : defaultInsertBelowSecondLevelNodeText
      if (first.layerIndex === 1) {
-        first.parent.initRender = true
+        first.parent.destroy()
      }
      let index = this.getNodeIndex(first)
      first.parent.nodeData.children.splice(index + 1, 0, {
-        inserting: true,
+        inserting: openEdit,
        data: {
          text: text,
-          expand: true
+          expand: true,
+          ...(appointData || {})
        },
        children: []
      })
@@ -443,45 +421,38 @@ class Render {
    }
  }

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

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-14 23:34:14
-   * @Desc: 上移节点，多个节点只会操作第一个节点
-   */
+  //  上移节点，多个节点只会操作第一个节点
  upNode() {
    if (this.activeNodeList.length <= 0) {
      return
@@ -508,11 +479,7 @@ class Render {
    this.mindMap.render()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-14 23:34:18
-   * @Desc: 下移节点，多个节点只会操作第一个节点
-   */
+  //  下移节点，多个节点只会操作第一个节点
  downNode() {
    if (this.activeNodeList.length <= 0) {
      return
@@ -539,16 +506,13 @@ class Render {
    this.mindMap.render()
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-11-25 10:51:34
-   * @Desc: 将节点移动到另一个节点的前面
-   */
+  //  将节点移动到另一个节点的前面
  insertBefore(node, exist) {
    if (node.isRoot) {
      return
    }
+    // 如果是二级节点变成了下级节点，或是下级节点变成了二级节点，节点样式需要更新
+    let nodeLayerChanged = (node.layerIndex === 1 && exist.layerIndex !== 1) || (node.layerIndex !== 1 && exist.layerIndex === 1)
    // 移动节点
    let nodeParent = node.parent
    let nodeBorthers = nodeParent.children
@@ -561,7 +525,6 @@ class Render {
    nodeBorthers.splice(nodeIndex, 1)
    nodeParent.nodeData.children.splice(nodeIndex, 1)

-
    // 目标节点
    let existParent = exist.parent
    let existBorthers = existParent.children
@@ -573,19 +536,20 @@ class Render {
    }
    existBorthers.splice(existIndex, 0, node)
    existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
-    this.mindMap.render()
+    this.mindMap.render(() => {
+      if (nodeLayerChanged) {
+        node.reRender()
+      }
+    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-11-25 10:51:34
-   * @Desc: 将节点移动到另一个节点的后面
-   */
+  //  将节点移动到另一个节点的后面
  insertAfter(node, exist) {
    if (node.isRoot) {
      return
    }
+    // 如果是二级节点变成了下级节点，或是下级节点变成了二级节点，节点样式需要更新
+    let nodeLayerChanged = (node.layerIndex === 1 && exist.layerIndex !== 1) || (node.layerIndex !== 1 && exist.layerIndex === 1)
    // 移动节点
    let nodeParent = node.parent
    let nodeBorthers = nodeParent.children
@@ -598,7 +562,6 @@ class Render {
    nodeBorthers.splice(nodeIndex, 1)
    nodeParent.nodeData.children.splice(nodeIndex, 1)

-
    // 目标节点
    let existParent = exist.parent
    let existBorthers = existParent.children
@@ -611,50 +574,55 @@ class Render {
    existIndex++
    existBorthers.splice(existIndex, 0, node)
    existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
-    this.mindMap.render()
+    this.mindMap.render(() => {
+      if (nodeLayerChanged) {
+        node.reRender()
+      }
+    })
  }

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

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-15 22:46:27
-   * @Desc: 移除某个指定节点
-   */
+  //  移除某个指定节点
  removeOneNode(node) {
    let index = this.getNodeIndex(node)
    node.remove()
@@ -662,12 +630,7 @@ class Render {
    node.parent.nodeData.children.splice(index, 1)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-07-15 09:53:23
-   * @Desc: 复制节点，多个节点只会操作第一个节点
-   */
+  //  复制节点，多个节点只会操作第一个节点
  copyNode() {
    if (this.activeNodeList.length <= 0) {
      return
@@ -675,11 +638,7 @@ class Render {
    return copyNodeTree({}, this.activeNodeList[0], true)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-15 22:36:45
-   * @Desc: 剪切节点，多个节点只会操作第一个节点
-   */
+  //  剪切节点，多个节点只会操作第一个节点
  cutNode(callback) {
    if (this.activeNodeList.length <= 0) {
      return
@@ -698,29 +657,23 @@ class Render {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-11-24 16:54:01
-   * @Desc: 移动一个节点作为另一个节点的子节点
-   */
+  //  移动一个节点作为另一个节点的子节点
  moveNodeTo(node, toNode) {
    if (node.isRoot) {
      return
    }
-    let copyData = copyNodeTree({}, node)
+    let copyData = copyNodeTree({}, node, false, true)
    this.removeActiveNode(node)
    this.removeOneNode(node)
    this.mindMap.emit('node_active', null, this.activeNodeList)
    toNode.nodeData.children.push(copyData)
    this.mindMap.render()
+    if (toNode.isRoot) {
+      toNode.destroy()
+    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-15 20:09:39
-   * @Desc:  粘贴节点到节点
-   */
+  //   粘贴节点到节点
  pasteNode(data) {
    if (this.activeNodeList.length <= 0) {
      return
@@ -731,11 +684,7 @@ class Render {
    this.mindMap.render()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-08 21:54:30
-   * @Desc: 设置节点样式
-   */
+  //  设置节点样式
  setNodeStyle(node, prop, value, isActive) {
    let data = {}
    if (isActive) {
@@ -750,6 +699,17 @@ class Render {
        [prop]: value
      }
    }
+    // 如果开启了富文本，则需要应用到富文本上
+    if (this.mindMap.richText) {
+      let config = this.mindMap.richText.normalStyleToRichTextStyle({
+        [prop]: value
+      })
+      if (Object.keys(config).length > 0) {
+        this.mindMap.richText.showEditText(node)
+        this.mindMap.richText.formatAllText(config)
+        this.mindMap.richText.hideEditText([node])
+      }
+    }
    this.setNodeDataRender(node, data)
    // 更新了连线的样式
    if (lineStyleProps.includes(prop)) {
@@ -757,23 +717,15 @@ class Render {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-08 22:13:03
-   * @Desc: 设置节点是否激活
-   */
+  //  设置节点是否激活
  setNodeActive(node, active) {
    this.setNodeData(node, {
      isActive: active
    })
-    node.renderNode()
+    node.updateNodeShape()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 16:52:41
-   * @Desc: 设置节点是否展开
-   */
+  //  设置节点是否展开
  setNodeExpand(node, expand) {
    this.setNodeData(node, {
      expand
@@ -796,11 +748,7 @@ class Render {
    this.mindMap.render()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-15 23:23:37
-   * @Desc: 展开所有
-   */
+  //  展开所有
  expandAllNode() {
    walk(
      this.renderTree,
@@ -815,14 +763,10 @@ class Render {
      0,
      0
    )
-    this.mindMap.reRender()
+    this.mindMap.render()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-15 23:27:14
-   * @Desc: 收起所有
-   */
+  //  收起所有
  unexpandAllNode() {
    walk(
      this.renderTree,
@@ -838,15 +782,12 @@ class Render {
      0,
      0
    )
-    this.mindMap.reRender()
+    this.mindMap.render(() => {
+      this.mindMap.view.reset()
+    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-09-23 16:31:27
-   * @Desc: 展开到指定层级
-   */
+  //  展开到指定层级
  expandToLevel(level) {
    walk(
      this.renderTree,
@@ -860,14 +801,10 @@ class Render {
      0,
      0
    )
-    this.mindMap.reRender()
+    this.mindMap.render()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-08-14 09:18:40
-   * @Desc: 切换激活节点的展开状态
-   */
+  //  切换激活节点的展开状态
  toggleActiveExpand() {
    this.activeNodeList.forEach(node => {
      if (node.nodeData.children.length <= 0) {
@@ -877,11 +814,7 @@ class Render {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 17:15:33
-   * @Desc: 切换节点展开状态
-   */
+  //  切换节点展开状态
  toggleNodeExpand(node) {
    this.mindMap.execCommand(
      'SET_NODE_EXPAND',
@@ -890,22 +823,15 @@ class Render {
    )
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-09 22:04:19
-   * @Desc: 设置节点文本
-   */
-  setNodeText(node, text) {
+  //  设置节点文本
+  setNodeText(node, text, richText) {
    this.setNodeDataRender(node, {
-      text
+      text,
+      richText
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 08:37:40
-   * @Desc: 设置节点图片
-   */
+  //  设置节点图片
  setNodeImage(node, { url, title, width, height }) {
    this.setNodeDataRender(node, {
      image: url,
@@ -917,22 +843,14 @@ class Render {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 08:44:06
-   * @Desc: 设置节点图标
-   */
+  //  设置节点图标
  setNodeIcon(node, icons) {
    this.setNodeDataRender(node, {
      icon: icons
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 08:49:33
-   * @Desc: 设置节点超链接
-   */
+  //  设置节点超链接
  setNodeHyperlink(node, link, title = '') {
    this.setNodeDataRender(node, {
      hyperlink: link,
@@ -940,33 +858,21 @@ class Render {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 08:52:59
-   * @Desc: 设置节点备注
-   */
+  //  设置节点备注
  setNodeNote(node, note) {
    this.setNodeDataRender(node, {
      note
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 08:54:53
-   * @Desc: 设置节点标签
-   */
+  //  设置节点标签
  setNodeTag(node, tag) {
    this.setNodeDataRender(node, {
      tag
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-07-30 20:52:42
-   * @Desc: 添加节点概要
-   */
+  //  添加节点概要
  addGeneralization(data) {
    if (this.activeNodeList.length <= 0) {
      return
@@ -985,11 +891,7 @@ class Render {
    this.mindMap.render()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-07-30 21:16:33
-   * @Desc: 删除节点概要
-   */
+  //  删除节点概要
  removeGeneralization() {
    if (this.activeNodeList.length <= 0) {
      return
@@ -1006,12 +908,7 @@ class Render {
    this.mindMap.render()
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-08-02 19:04:24
-   * @Desc: 设置节点自定义位置
-   */
+  //  设置节点自定义位置
  setNodeCustomPosition(node, left = undefined, top = undefined) {
    let nodeList = [node] || this.activeNodeList
    nodeList.forEach(item => {
@@ -1022,12 +919,7 @@ class Render {
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-08-02 20:02:50
-   * @Desc: 一键整理布局，即去除自定义位置
-   */
+  //  一键整理布局，即去除自定义位置
  resetLayout() {
    walk(
      this.root,
@@ -1048,12 +940,7 @@ class Render {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林
-   * @Date: 2022-09-12 21:44:01
-   * @Desc: 设置节点形状
-   */
+  //  设置节点形状
  setNodeShape(node, shape) {
    if (!shape || !shapeList.includes(shape)) {
      return
@@ -1064,26 +951,17 @@ class Render {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-05-04 14:19:48
-   * @Desc: 更新节点数据
-   */
+  //  更新节点数据
  setNodeData(node, data) {
    Object.keys(data).forEach(key => {
      node.nodeData.data[key] = data[key]
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 08:45:48
-   * @Desc: 设置节点数据，并判断是否渲染
-   */
+  //  设置节点数据，并判断是否渲染
  setNodeDataRender(node, data) {
    this.setNodeData(node, data)
-    let changed = node.getSize()
-    node.renderNode()
+    let changed = node.reRender()
    if (changed) {
      if (node.isGeneralization) {
        // 概要节点
@@ -1093,12 +971,7 @@ class Render {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-09 11:46:57
-   * @Desc: 移动节点到画布中心
-   */
+  //  移动节点到画布中心
  moveNodeToCenter(node) {
    let halfWidth = this.mindMap.width / 2
    let halfHeight = this.mindMap.height / 2
--- a/simple-mind-map/src/RichText.js
+++ b/simple-mind-map/src/RichText.js
@@ -0,0 +1,466 @@
+import Quill from 'quill'
+import 'quill/dist/quill.snow.css'
+import './css/quill.css'
+import html2canvas from 'html2canvas'
+import { Image as SvgImage } from '@svgdotjs/svg.js'
+import { walk } from './utils'
+import { CONSTANTS } from './utils/constant'
+
+let extended = false
+
+// 扩展quill的字体列表
+let fontFamilyList = [
+  '宋体, SimSun, Songti SC',
+  '微软雅黑, Microsoft YaHei',
+  '楷体, 楷体_GB2312, SimKai, STKaiti',
+  '黑体, SimHei, Heiti SC',
+  '隶书, SimLi',
+  'andale mono',
+  'arial, helvetica, sans-serif',
+  'arial black, avant garde',
+  'comic sans ms',
+  'impact, chicago',
+  'times new roman',
+  'sans-serif',
+  'serif'
+]
+
+// 扩展quill的字号列表
+let fontSizeList = new Array(100).fill(0).map((_, index) => {
+  return index + 'px'
+})
+
+// 节点支持富文本编辑功能
+class RichText {
+  constructor({ mindMap, pluginOpt }) {
+    this.mindMap = mindMap
+    this.pluginOpt = pluginOpt
+    this.textEditNode = null
+    this.showTextEdit = false
+    this.quill = null
+    this.range = null
+    this.lastRange = null
+    this.node = null
+    this.initOpt()
+    this.extendQuill()
+  }
+
+  // 处理选项参数
+  initOpt() {
+    if (
+      this.pluginOpt.fontFamilyList &&
+      Array.isArray(this.pluginOpt.fontFamilyList)
+    ) {
+      fontFamilyList = this.pluginOpt.fontFamilyList
+    }
+    if (
+      this.pluginOpt.fontSizeList &&
+      Array.isArray(this.pluginOpt.fontSizeList)
+    ) {
+      fontSizeList = this.pluginOpt.fontSizeList
+    }
+  }
+
+  // 扩展quill编辑器
+  extendQuill() {
+    if (extended) {
+      return
+    }
+    extended = true
+
+    // 扩展quill的字体列表
+    const FontAttributor = Quill.import('attributors/class/font')
+    FontAttributor.whitelist = fontFamilyList
+    Quill.register(FontAttributor, true)
+
+    const FontStyle = Quill.import('attributors/style/font')
+    FontStyle.whitelist = fontFamilyList
+    Quill.register(FontStyle, true)
+
+    // 扩展quill的字号列表
+    const SizeAttributor = Quill.import('attributors/class/size')
+    SizeAttributor.whitelist = fontSizeList
+    Quill.register(SizeAttributor, true)
+
+    const SizeStyle = Quill.import('attributors/style/size')
+    SizeStyle.whitelist = fontSizeList
+    Quill.register(SizeStyle, true)
+  }
+
+  // 显示文本编辑控件
+  showEditText(node, rect) {
+    if (this.showTextEdit) {
+      return
+    }
+    this.node = node
+    if (!rect) rect = node._textData.node.node.getBoundingClientRect()
+    this.mindMap.emit('before_show_text_edit')
+    this.mindMap.renderer.textEdit.registerTmpShortcut()
+    if (!this.textEditNode) {
+      this.textEditNode = document.createElement('div')
+      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: 3px 5px;margin-left: -5px;margin-top: -3px;`
+      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.zIndex = this.mindMap.opt.nodeTextEditZIndex
+    this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? '#fff' : bgColor
+    this.textEditNode.style.minWidth = originWidth + 'px'
+    this.textEditNode.style.minHeight = originHeight + 'px'
+    this.textEditNode.style.left =
+      rect.left + (rect.width - originWidth) / 2 + 'px'
+    this.textEditNode.style.top =
+      rect.top + (rect.height - originHeight) / 2 + 'px'
+    this.textEditNode.style.display = 'block'
+    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
+    this.textEditNode.style.transform = `scale(${rect.width / originWidth}, ${
+      rect.height / originHeight
+    })`
+    if (!node.nodeData.data.richText) {
+      // 还不是富文本的情况
+      let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
+      let html = `<p>${text}</p>`
+      this.textEditNode.innerHTML = html
+    } else {
+      this.textEditNode.innerHTML = node.nodeData.data.text
+    }
+    this.initQuillEditor()
+    document.querySelector('.ql-editor').style.minHeight = originHeight + 'px'
+    this.showTextEdit = true
+    this.focus()
+    if (!node.nodeData.data.richText) {
+      // 如果是非富文本的情况，需要手动应用文本样式
+      this.setTextStyleIfNotRichText(node)
+    }
+  }
+
+  // 如果是非富文本的情况，需要手动应用文本样式
+  setTextStyleIfNotRichText(node) {
+    let style = {
+      font: node.style.merge('fontFamily'),
+      color: node.style.merge('color'),
+      italic: node.style.merge('fontStyle') === 'italic',
+      bold: node.style.merge('fontWeight') === 'bold',
+      size: node.style.merge('fontSize') + 'px',
+      underline: node.style.merge('textDecoration') === 'underline',
+      strike: node.style.merge('textDecoration') === 'line-through'
+    }
+    this.formatAllText(style)
+  }
+
+  // 隐藏文本编辑控件，即完成编辑
+  hideEditText(nodes) {
+    if (!this.showTextEdit) {
+      return
+    }
+    let html = this.quill.container.firstChild.innerHTML
+    // 去除最后的空行
+    html = html.replace(/<p><br><\/p>$/, '')
+    let list = nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList
+    list.forEach(node => {
+      this.mindMap.execCommand('SET_NODE_TEXT', node, html, true)
+      if (node.isGeneralization) {
+        // 概要节点
+        node.generalizationBelongNode.updateGeneralization()
+      }
+      this.mindMap.render()
+    })
+    this.mindMap.emit(
+      'hide_text_edit',
+      this.textEditNode,
+      list
+    )
+    this.textEditNode.style.display = 'none'
+    this.showTextEdit = false
+    this.mindMap.emit('rich_text_selection_change', false)
+    this.node = null
+  }
+
+  // 初始化Quill富文本编辑器
+  initQuillEditor() {
+    this.quill = new Quill(this.textEditNode, {
+      modules: {
+        toolbar: false,
+        keyboard: {
+          bindings: {
+            enter: {
+              key: 13,
+              handler: function () {
+                // 覆盖默认的回车键换行
+              }
+            }
+          }
+        }
+      },
+      theme: 'snow'
+    })
+    this.quill.on('selection-change', range => {
+      this.lastRange = this.range
+      this.range = null
+      if (range) {
+        let bounds = this.quill.getBounds(range.index, range.length)
+        let rect = this.textEditNode.getBoundingClientRect()
+        let rectInfo = {
+          left: bounds.left + rect.left,
+          top: bounds.top + rect.top,
+          right: bounds.right + rect.left,
+          bottom: bounds.bottom + rect.top,
+          width: bounds.width
+        }
+        let formatInfo = this.quill.getFormat(range.index, range.length)
+        let hasRange = false
+        if (range.length == 0) {
+          hasRange = false
+        } else {
+          this.range = range
+          hasRange = true
+        }
+        this.mindMap.emit(
+          'rich_text_selection_change',
+          hasRange,
+          rectInfo,
+          formatInfo
+        )
+      }
+    })
+  }
+
+  // 选中全部
+  selectAll() {
+    this.quill.setSelection(0, this.quill.getLength())
+  }
+
+  // 聚焦
+  focus() {
+    let len = this.quill.getLength()
+    this.quill.setSelection(len, len)
+  }
+
+  // 格式化当前选中的文本
+  formatText(config = {}, clear = false) {
+    if (!this.range && !this.lastRange) return
+    this.syncFormatToNodeConfig(config, clear)
+    let rangeLost = !this.range
+    let range = rangeLost ? this.lastRange : this.range
+    clear ? this.quill.removeFormat(range.index, range.length) : this.quill.formatText(range.index, range.length, config)
+    if (rangeLost) {
+      this.quill.setSelection(this.lastRange.index, this.lastRange.length)
+    }
+  }
+
+  // 清除当前选中文本的样式
+  removeFormat() {
+    this.formatText({}, true)
+  }
+
+  // 格式化指定范围的文本
+  formatRangeText(range, config = {}) {
+    if (!range) return
+    this.syncFormatToNodeConfig(config)
+    this.quill.formatText(range.index, range.length, config)
+  }
+
+  // 格式化所有文本
+  formatAllText(config = {}) {
+    this.syncFormatToNodeConfig(config)
+    this.quill.formatText(0, this.quill.getLength(), config)
+  }
+
+  // 同步格式化到节点样式配置
+  syncFormatToNodeConfig(config, clear) {
+    if (!this.node) return
+    if (clear) {
+      // 清除文本样式
+      ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textDecoration', 'color'].forEach((prop) => {
+        delete this.node.nodeData.data[prop]
+      })
+    } else {
+      let data = this.richTextStyleToNormalStyle(config)
+      this.mindMap.renderer.setNodeData(this.node, data)
+    }
+  }
+
+  // 将普通节点样式对象转换成富文本样式对象
+  normalStyleToRichTextStyle(style) {
+    let config = {}
+    Object.keys(style).forEach(prop => {
+      let value = style[prop]
+      switch (prop) {
+        case 'fontFamily':
+          config.font = value
+          break
+        case 'fontSize':
+          config.size = value + 'px'
+          break
+        case 'fontWeight':
+          config.bold = value === 'bold'
+          break
+        case 'fontStyle':
+          config.italic = value === 'italic'
+          break
+        case 'textDecoration':
+          config.underline = value === 'underline'
+          config.strike = value === 'line-through'
+          break
+        case 'color':
+          config.color = value
+          break
+        default:
+          break
+      }
+    })
+    return config
+  }
+
+  // 将富文本样式对象转换成普通节点样式对象
+  richTextStyleToNormalStyle(config) {
+    let data = {}
+    Object.keys(config).forEach(prop => {
+      let value = config[prop]
+      switch (prop) {
+        case 'font':
+          data.fontFamily = value
+          break
+        case 'size':
+          data.fontSize = parseFloat(value)
+          break
+        case 'bold':
+          data.fontWeight = value ? 'bold' : 'normal'
+          break
+        case 'italic':
+          data.fontStyle = value ? 'italic' : 'normal'
+          break
+        case 'underline':
+          data.textDecoration = value ? 'underline' : 'none'
+          break
+        case 'strike':
+          data.textDecoration = value ? 'line-through' : 'none'
+          break
+        case 'color':
+          data.color = value
+          break
+        default:
+          break
+      }
+    })
+    return data
+  }
+
+  // 将svg中嵌入的dom元素转换成图片
+  async _handleSvgDomElements(svg) {
+    svg = svg.clone()
+    let foreignObjectList = svg.find('foreignObject')
+    let task = foreignObjectList.map(async item => {
+      let clone = item.first().node.cloneNode(true)
+      let div = document.createElement('div')
+      div.style.cssText = `position: fixed; left: -999999px;`
+      div.appendChild(clone)
+      this.mindMap.el.appendChild(div)
+      let canvas = await html2canvas(clone, {
+        backgroundColor: null
+      })
+      this.mindMap.el.removeChild(div)
+      let imgNode = new SvgImage()
+        .load(canvas.toDataURL())
+        .size(canvas.width, canvas.height)
+      item.replace(imgNode)
+    })
+    await Promise.all(task)
+    return {
+      svg: svg,
+      svgHTML: svg.svg()
+    }
+  }
+
+  // 将svg中嵌入的dom元素转换成图片
+  handleSvgDomElements(svg) {
+    return new Promise((resolve, reject) => {
+      svg = svg.clone()
+      let foreignObjectList = svg.find('foreignObject')
+      let index = 0
+      let len = foreignObjectList.length
+      let transform = async () => {
+        this.mindMap.emit('transforming-dom-to-images', index, len)
+        try {
+          let item = foreignObjectList[index++]
+          let parent = item.parent()
+          let clone = item.first().node.cloneNode(true)
+          let div = document.createElement('div')
+          div.style.cssText = `position: fixed; left: -999999px;`
+          div.appendChild(clone)
+          this.mindMap.el.appendChild(div)
+          let canvas = await html2canvas(clone, {
+            backgroundColor: null
+          })
+          // 优先使用原始宽高，因为当设备的window.devicePixelRatio不为1时，html2canvas输出的图片会更大
+          let imgNodeWidth = parent.attr('data-width') || canvas.width
+          let imgNodeHeight = parent.attr('data-height') || canvas.height
+          this.mindMap.el.removeChild(div)
+          let imgNode = new SvgImage()
+            .load(canvas.toDataURL())
+            .size(imgNodeWidth, imgNodeHeight)
+            .x((parent ? parent.attr('data-offsetx') : 0) || 0)
+          item.replace(imgNode)
+          if (index <= len - 1) {
+            setTimeout(() => {
+              transform()
+            }, 0)
+          } else {
+            resolve({
+              svg: svg,
+              svgHTML: svg.svg()
+            })
+          }
+        } catch (error) {
+          reject(error)
+        }
+      }
+      if (len > 0) {
+        transform()
+      } else {
+        resolve(null)
+      }
+    })
+  }
+
+  // 将所有节点转换成非富文本节点
+  transformAllNodesToNormalNode() {
+    let div = document.createElement('div')
+    walk(
+      this.mindMap.renderer.renderTree,
+      null,
+      node => {
+        if (node.data.richText) {
+          node.data.richText = false
+          div.innerHTML = node.data.text
+          node.data.text = div.textContent
+          // delete node.data.uid
+        }
+      },
+      null,
+      true,
+      0,
+      0
+    )
+    // 清空历史数据，并且触发数据变化
+    this.mindMap.command.clearHistory()
+    this.mindMap.command.addHistory()
+    this.mindMap.render(null, CONSTANTS.TRANSFORM_TO_NORMAL_NODE)
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.transformAllNodesToNormalNode()
+  }
+}
+
+RichText.instanceName = 'richText'
+
+export default RichText
--- a/simple-mind-map/src/Select.js
+++ b/simple-mind-map/src/Select.js
@@ -1,17 +1,9 @@
 import { bfsWalk, throttle } from './utils'

-/**
- * @Author: 王林
- * @Date: 2021-07-10 22:34:51
- * @Desc: 选择节点类
- */
+//  选择节点类

 class Select {
-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 22:35:16
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor({ mindMap }) {
    this.mindMap = mindMap
    this.rect = null
@@ -23,11 +15,7 @@ class Select {
    this.bindEvent()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 22:36:36
-   * @Desc: 绑定事件
-   */
+  //  绑定事件
  bindEvent() {
    this.checkInNodes = throttle(this.checkInNodes, 500, this)
    this.mindMap.on('mousedown', e => {
@@ -81,11 +69,7 @@ class Select {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-13 07:55:49
-   * @Desc: 鼠标移动事件
-   */
+  //  鼠标移动事件
  onMove(x, y) {
    // 绘制矩形
    this.rect.plot([
@@ -128,22 +112,14 @@ class Select {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-22 08:02:23
-   * @Desc: 开启自动移动
-   */
+  //  开启自动移动
  startAutoMove(x, y) {
    this.autoMoveTimer = setTimeout(() => {
      this.onMove(x, y)
    }, 20)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 10:19:37
-   * @Desc: 创建矩形
-   */
+  //  创建矩形
  createRect(x, y) {
    this.rect = this.mindMap.svg
      .polygon()
@@ -156,11 +132,7 @@ class Select {
      .plot([[x, y]])
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 10:20:43
-   * @Desc: 检测在选区里的节点
-   */
+  //  检测在选区里的节点
  checkInNodes() {
    let { scaleX, scaleY, translateX, translateY } =
      this.mindMap.draw.transform()
@@ -195,4 +167,6 @@ class Select {
  }
 }

+Select.instanceName = 'select'
+
 export default Select
--- a/simple-mind-map/src/Shape.js
+++ b/simple-mind-map/src/Shape.js
@@ -1,18 +1,13 @@
-/**
- * @Author: 王林
- * @Date: 2022-08-22 21:32:50
- * @Desc: 节点形状类
- */
+import { Rect, Polygon, Path } from '@svgdotjs/svg.js'
+import { CONSTANTS } from './utils/constant'
+
+//  节点形状类
 export default class Shape {
  constructor(node) {
    this.node = node
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-08-17 22:32:32
-   * @Desc: 形状需要的padding
-   */
+  //  形状需要的padding
  getShapePadding(width, height, paddingX, paddingY) {
    const shape = this.node.getShape()
    const defaultPaddingX = 15
@@ -21,37 +16,37 @@ export default class Shape {
    const actHeight = height + paddingY * 2
    const actOffset = Math.abs(actWidth - actHeight)
    switch (shape) {
-      case 'roundedRectangle':
+      case CONSTANTS.SHAPE.ROUNDED_RECTANGLE:
        return {
          paddingX: height > width ? (height - width) / 2 : 0,
          paddingY: 0
        }
-      case 'diamond':
+      case CONSTANTS.SHAPE.DIAMOND:
        return {
          paddingX: width / 2,
          paddingY: height / 2
        }
-      case 'parallelogram':
+      case CONSTANTS.SHAPE.PARALLELOGRAM:
        return {
          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
          paddingY: 0
        }
-      case 'outerTriangularRectangle':
+      case CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE:
        return {
          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
          paddingY: 0
        }
-      case 'innerTriangularRectangle':
+      case CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE:
        return {
          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
          paddingY: 0
        }
-      case 'ellipse':
+      case CONSTANTS.SHAPE.ELLIPSE:
        return {
          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
          paddingY: paddingY <= 0 ? defaultPaddingY : 0
        }
-      case 'circle':
+      case CONSTANTS.SHAPE.CIRCLE:
        return {
          paddingX: actHeight > actWidth ? actOffset / 2 : 0,
          paddingY: actHeight < actWidth ? actOffset / 2 : 0
@@ -64,51 +59,43 @@ export default class Shape {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-08-17 22:22:53
-   * @Desc: 创建形状节点
-   */
+  //  创建形状节点
  createShape() {
    const shape = this.node.getShape()
    let { width, height } = this.node
    let node = null
    // 矩形
-    if (shape === 'rectangle') {
-      node = this.node.group.rect(width, height)
-    } else if (shape === 'diamond') {
+    if (shape === CONSTANTS.SHAPE.RECTANGLE) {
+      node = new Rect().size(width, height)
+    } else if (shape === CONSTANTS.SHAPE.DIAMOND) {
      // 菱形
      node = this.createDiamond()
-    } else if (shape === 'parallelogram') {
+    } else if (shape === CONSTANTS.SHAPE.PARALLELOGRAM) {
      // 平行四边形
      node = this.createParallelogram()
-    } else if (shape === 'roundedRectangle') {
+    } else if (shape === CONSTANTS.SHAPE.ROUNDED_RECTANGLE) {
      // 圆角矩形
      node = this.createRoundedRectangle()
-    } else if (shape === 'octagonalRectangle') {
+    } else if (shape === CONSTANTS.SHAPE.OCTAGONAL_RECTANGLE) {
      // 八角矩形
      node = this.createOctagonalRectangle()
-    } else if (shape === 'outerTriangularRectangle') {
+    } else if (shape === CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE) {
      // 外三角矩形
      node = this.createOuterTriangularRectangle()
-    } else if (shape === 'innerTriangularRectangle') {
+    } else if (shape === CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE) {
      // 内三角矩形
      node = this.createInnerTriangularRectangle()
-    } else if (shape === 'ellipse') {
+    } else if (shape === CONSTANTS.SHAPE.ELLIPSE) {
      // 椭圆
      node = this.createEllipse()
-    } else if (shape === 'circle') {
+    } else if (shape === CONSTANTS.SHAPE.CIRCLE) {
      // 圆
      node = this.createCircle()
    }
    return node
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-09-04 09:08:54
-   * @Desc: 创建菱形
-   */
+  //  创建菱形
  createDiamond() {
    let { width, height } = this.node
    let halfWidth = width / 2
@@ -121,155 +108,122 @@ export default class Shape {
    let bottomY = height
    let leftX = 0
    let leftY = halfHeight
-    return this.node.group.polygon(`
-            ${topX}, ${topY}
-            ${rightX}, ${rightY}
-            ${bottomX}, ${bottomY}
-            ${leftX}, ${leftY}
-        `)
+    return new Polygon().plot([
+      [topX, topY],
+      [rightX, rightY],
+      [bottomX, bottomY],
+      [leftX, leftY]
+    ])
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-09-03 16:14:12
-   * @Desc: 创建平行四边形
-   */
+  //  创建平行四边形
  createParallelogram() {
    let { paddingX } = this.node.getPaddingVale()
    paddingX = paddingX || this.node.shapePadding.paddingX
    let { width, height } = this.node
-    return this.node.group.polygon(`
-            ${paddingX}, ${0}
-            ${width}, ${0}
-            ${width - paddingX}, ${height}
-            ${0}, ${height}
-        `)
+    return new Polygon().plot([
+      [paddingX, 0],
+      [width, 0],
+      [width - paddingX, height],
+      [0, height]
+    ])
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-09-03 16:50:23
-   * @Desc: 创建圆角矩形
-   */
+  //  创建圆角矩形
  createRoundedRectangle() {
    let { width, height } = this.node
    let halfHeight = height / 2
-    return this.node.group.path(`
-            M${halfHeight},0
-            L${width - halfHeight},0
-            A${height / 2},${height / 2} 0 0,1 ${width - halfHeight},${height} 
-            L${halfHeight},${height}
-            A${height / 2},${height / 2} 0 0,1 ${halfHeight},${0}
-        `)
+    return new Path().plot(`
+      M${halfHeight},0
+      L${width - halfHeight},0
+      A${height / 2},${height / 2} 0 0,1 ${width - halfHeight},${height} 
+      L${halfHeight},${height}
+      A${height / 2},${height / 2} 0 0,1 ${halfHeight},${0}
+    `)
  }

-  /**
-   * javascript comment
-   * @Author: 王林
-   * @Date: 2022-09-12 16:14:08
-   * @Desc: 创建八角矩形
-   */
+  //  创建八角矩形
  createOctagonalRectangle() {
    let w = 5
    let { width, height } = this.node
-    return this.node.group.polygon(`
-            ${0}, ${w}
-            ${w}, ${0}
-            ${width - w}, ${0}
-            ${width}, ${w}
-            ${width}, ${height - w}
-            ${width - w}, ${height}
-            ${w}, ${height}
-            ${0}, ${height - w}
-        `)
+    return new Polygon().plot([
+      [0, w],
+      [w, 0],
+      [width - w, 0],
+      [width, w],
+      [width, height - w],
+      [width - w, height],
+      [w, height],
+      [0, height - w]
+    ])
  }

-  /**
-   * javascript comment
-   * @Author: 王林
-   * @Date: 2022-09-12 20:55:50
-   * @Desc: 创建外三角矩形
-   */
+  //  创建外三角矩形
  createOuterTriangularRectangle() {
    let { paddingX } = this.node.getPaddingVale()
    paddingX = paddingX || this.node.shapePadding.paddingX
    let { width, height } = this.node
-    return this.node.group.polygon(`
-            ${paddingX}, ${0}
-            ${width - paddingX}, ${0}
-            ${width}, ${height / 2}
-            ${width - paddingX}, ${height}
-            ${paddingX}, ${height}
-            ${0}, ${height / 2}
-        `)
+    return new Polygon().plot([
+      [paddingX, 0],
+      [width - paddingX, 0],
+      [width, height / 2],
+      [width - paddingX, height],
+      [paddingX, height],
+      [0, height / 2]
+    ])
  }

-  /**
-   * javascript comment
-   * @Author: 王林
-   * @Date: 2022-09-12 20:59:37
-   * @Desc: 创建内三角矩形
-   */
+  //  创建内三角矩形
  createInnerTriangularRectangle() {
    let { paddingX } = this.node.getPaddingVale()
    paddingX = paddingX || this.node.shapePadding.paddingX
    let { width, height } = this.node
-    return this.node.group.polygon(`
-            ${0}, ${0}
-            ${width}, ${0}
-            ${width - paddingX / 2}, ${height / 2}
-            ${width}, ${height}
-            ${0}, ${height}
-            ${paddingX / 2}, ${height / 2}
-        `)
+    return new Polygon().plot([
+      [0, 0],
+      [width, 0],
+      [width - paddingX / 2, height / 2],
+      [width, height],
+      [0, height],
+      [paddingX / 2, height / 2]
+    ])
  }

-  /**
-   * javascript comment
-   * @Author: 王林
-   * @Date: 2022-09-12 21:06:31
-   * @Desc: 创建椭圆
-   */
+  //  创建椭圆
  createEllipse() {
    let { width, height } = this.node
    let halfWidth = width / 2
    let halfHeight = height / 2
-    return this.node.group.path(`
-            M${halfWidth},0
-            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
-            M${halfWidth},${height} 
-            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
-        `)
+    return new Path().plot(`
+      M${halfWidth},0
+      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
+      M${halfWidth},${height} 
+      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
+    `)
  }

-  /**
-   * javascript comment
-   * @Author: 王林
-   * @Date: 2022-09-12 21:14:04
-   * @Desc: 创建圆
-   */
+  //  创建圆
  createCircle() {
    let { width, height } = this.node
    let halfWidth = width / 2
    let halfHeight = height / 2
-    return this.node.group.path(`
-            M${halfWidth},0
-            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
-            M${halfWidth},${height} 
-            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
-        `)
+    return new Path().plot(`
+      M${halfWidth},0
+      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
+      M${halfWidth},${height} 
+      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
+    `)
  }
 }

 // 形状列表
 export const shapeList = [
-  'rectangle',
-  'diamond',
-  'parallelogram',
-  'roundedRectangle',
-  'octagonalRectangle',
-  'outerTriangularRectangle',
-  'innerTriangularRectangle',
-  'ellipse',
-  'circle'
+  CONSTANTS.SHAPE.RECTANGLE,
+  CONSTANTS.SHAPE.DIAMOND,
+  CONSTANTS.SHAPE.PARALLELOGRAM,
+  CONSTANTS.SHAPE.ROUNDED_RECTANGLE,
+  CONSTANTS.SHAPE.OCTAGONAL_RECTANGLE,
+  CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE,
+  CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE,
+  CONSTANTS.SHAPE.ELLIPSE,
+  CONSTANTS.SHAPE.CIRCLE
 ]
--- a/simple-mind-map/src/Style.js
+++ b/simple-mind-map/src/Style.js
@@ -1,65 +1,44 @@
 import { tagColorList } from './utils/constant'
 const rootProp = ['paddingX', 'paddingY']

-/**
- * @Author: 王林
- * @Date: 2021-04-11 10:09:08
- * @Desc: 样式类
- */
+//  样式类
 class Style {
-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 16:01:53
-   * @Desc:  设置背景样式
-   */
+  //   设置背景样式
  static setBackgroundStyle(el, themeConfig) {
-    let { backgroundColor, backgroundImage, backgroundRepeat } = themeConfig
+    let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig
    el.style.backgroundColor = backgroundColor
    if (backgroundImage) {
      el.style.backgroundImage = `url(${backgroundImage})`
      el.style.backgroundRepeat = backgroundRepeat
+      el.style.backgroundPosition = backgroundPosition
+      el.style.backgroundSize = backgroundSize
+    } else {
+      el.style.backgroundImage = 'none'
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 10:10:11
-   * @Desc: 构造函数
-   */
-  constructor(ctx, themeConfig) {
+  //  构造函数
+  constructor(ctx) {
    this.ctx = ctx
-    this.themeConfig = themeConfig
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-12 07:40:14
-   * @Desc: 更新主题配置
-   */
-  updateThemeConfig(themeConfig) {
-    this.themeConfig = themeConfig
-  }
-
-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 12:02:55
-   * @Desc: 合并样式
-   */
+  //  合并样式
  merge(prop, root, isActive) {
+    let themeConfig = this.ctx.mindMap.themeConfig
    // 三级及以下节点
-    let defaultConfig = this.themeConfig.node
+    let defaultConfig = themeConfig.node
    if (root || rootProp.includes(prop)) {
      // 直接使用最外层样式
-      defaultConfig = this.themeConfig
+      defaultConfig = themeConfig
    } else if (this.ctx.isGeneralization) {
      // 概要节点
-      defaultConfig = this.themeConfig.generalization
+      defaultConfig = themeConfig.generalization
    } else if (this.ctx.layerIndex === 0) {
      // 根节点
-      defaultConfig = this.themeConfig.root
+      defaultConfig = themeConfig.root
    } else if (this.ctx.layerIndex === 1) {
      // 二级节点
-      defaultConfig = this.themeConfig.second
+      defaultConfig = themeConfig.second
    }
    // 激活状态
    if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
@@ -78,59 +57,44 @@ class Style {
      : defaultConfig[prop]
  }

-  /**
-   * javascript comment
-   * @Author: 王林
-   * @Date: 2022-09-12 21:55:57
-   * @Desc: 获取某个样式值
-   */
+  //  获取某个样式值
  getStyle(prop, root, isActive) {
    return this.merge(prop, root, isActive)
  }

-  /**
-   * javascript comment
-   * @Author: flydreame
-   * @Date: 2022-09-17 12:09:39
-   * @Desc: 获取自身自定义样式
-   */
+  //  获取自身自定义样式
  getSelfStyle(prop) {
    return this.ctx.nodeData.data[prop]
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 10:12:56
-   * @Desc: 矩形
-   */
+  //  矩形
  rect(node) {
    this.shape(node)
    node.radius(this.merge('borderRadius'))
  }

-  /**
-   * javascript comment
-   * @Author: 王林
-   * @Date: 2022-09-12 15:04:28
-   * @Desc:  矩形外的其他形状
-   */
+  //   矩形外的其他形状
  shape(node) {
-    node
-      .fill({
-        color: this.merge('fillColor')
-      })
-      .stroke({
-        color: this.merge('borderColor'),
-        width: this.merge('borderWidth'),
-        dasharray: this.merge('borderDasharray')
-      })
+    node.fill({
+      color: this.merge('fillColor')
+    })
+    // 节点使用横线样式，不需要渲染非激活状态的边框样式
+    // if (
+    //   !this.ctx.isRoot &&
+    //   !this.ctx.isGeneralization &&
+    //   this.ctx.mindMap.themeConfig.nodeUseLineStyle &&
+    //   !this.ctx.nodeData.data.isActive
+    // ) {
+    //   return
+    // }
+    node.stroke({
+      color: this.merge('borderColor'),
+      width: this.merge('borderWidth'),
+      dasharray: this.merge('borderDasharray')
+    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 12:07:59
-   * @Desc: 文字
-   */
+  //  文字
  text(node) {
    node
      .fill({
@@ -145,22 +109,26 @@ class Style {
      })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-13 08:14:34
-   * @Desc: html文字节点
-   */
-  domText(node, fontSizeScale = 1) {
+  // 获取文本样式
+  getTextFontStyle() {
+    return { 
+      italic: this.merge('fontStyle') === 'italic', 
+      bold: this.merge('fontWeight'), 
+      fontSize: this.merge('fontSize'), 
+      fontFamily: this.merge('fontFamily')
+    }
+  }
+
+  //  html文字节点
+  domText(node, fontSizeScale = 1, textLines) {
    node.style.fontFamily = this.merge('fontFamily')
    node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
    node.style.fontWeight = this.merge('fontWeight') || 'normal'
+    node.style.lineHeight = textLines === 1 ? 'normal' : this.merge('lineHeight')
+    node.style.fontStyle = this.merge('fontStyle')
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-06-20 20:02:18
-   * @Desc: 标签文字
-   */
+  //  标签文字
  tagText(node, index) {
    node
      .fill({
@@ -171,42 +139,26 @@ class Style {
      })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-06-20 21:04:11
-   * @Desc: 标签矩形
-   */
+  //  标签矩形
  tagRect(node, index) {
    node.fill({
      color: tagColorList[index].background
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-03 22:37:19
-   * @Desc: 内置图标
-   */
+  //  内置图标
  iconNode(node) {
    node.attr({
      fill: this.merge('color')
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 14:50:49
-   * @Desc: 连线
-   */
+  //  连线
  line(node, { width, color, dasharray } = {}) {
    node.stroke({ width, color, dasharray }).fill({ color: 'none' })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-07-30 16:19:03
-   * @Desc: 概要连线
-   */
+  //  概要连线
  generalizationLine(node) {
    node
      .stroke({
@@ -216,14 +168,15 @@ class Style {
      .fill({ color: 'none' })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 20:03:59
-   * @Desc: 按钮
-   */
-  iconBtn(node, fillNode) {
-    node.fill({ color: '#808080' })
-    fillNode.fill({ color: '#fff' })
+  //  展开收起按钮
+  iconBtn(node, node2, fillNode) {
+    let { color, fill } = this.ctx.mindMap.opt.expandBtnStyle || {
+      color: '#808080',
+      fill: '#fff'
+    }
+    node.fill({ color: color })
+    node2.fill({ color: color })
+    fillNode.fill({ color: fill })
  }
 }

--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -1,18 +1,8 @@
 import { getStrWithBrFromHtml } from './utils'

-/**
- * javascript comment
- * @Author: 王林25
- * @Date: 2021-06-19 11:11:28
- * @Desc: 节点文字编辑类
- */
+//  节点文字编辑类
 export default class TextEdit {
-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-06-19 11:22:57
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor(renderer) {
    this.renderer = renderer
    this.mindMap = renderer.mindMap
@@ -23,11 +13,7 @@ export default class TextEdit {
    this.bindEvent()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 13:27:04
-   * @Desc: 事件
-   */
+  //  事件
  bindEvent() {
    this.show = this.show.bind(this)
    // 节点双击事件
@@ -37,6 +23,16 @@ export default class TextEdit {
      // 隐藏文本编辑框
      this.hideEditTextBox()
    })
+    this.mindMap.on('body_click', () => {
+      // 隐藏文本编辑框
+      if (this.mindMap.opt.isEndNodeTextEditOnClickOuter) {
+        this.hideEditTextBox()
+      }
+    })
+    this.mindMap.on('svg_mousedown', () => {
+      // 隐藏文本编辑框
+      this.hideEditTextBox()
+    })
    // 展开收缩按钮点击事件
    this.mindMap.on('expand_btn_click', () => {
      this.hideEditTextBox()
@@ -54,12 +50,7 @@ export default class TextEdit {
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-08-16 16:27:02
-   * @Desc: 注册临时快捷键
-   */
+  //  注册临时快捷键
  registerTmpShortcut() {
    // 注册回车快捷键
    this.mindMap.keyCommand.addShortcut('Enter', () => {
@@ -67,51 +58,54 @@ export default class TextEdit {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-13 22:15:56
-   * @Desc: 显示文本编辑框
-   */
+  //  显示文本编辑框
  show(node) {
-    this.showEditTextBox(node, node._textData.node.node.getBoundingClientRect())
+    let rect = node._textData.node.node.getBoundingClientRect()
+    if (this.mindMap.richText) {
+      this.mindMap.richText.showEditText(node, rect)
+      return
+    }
+    this.showEditTextBox(node, rect)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-13 22:13:02
-   * @Desc: 显示文本编辑框
-   */
+  //  显示文本编辑框
  showEditTextBox(node, rect) {
    this.mindMap.emit('before_show_text_edit')
    this.registerTmpShortcut()
    if (!this.textEditNode) {
      this.textEditNode = document.createElement('div')
-      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;`
+      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)
    }
-    node.style.domText(this.textEditNode, this.mindMap.view.scale)
-    this.textEditNode.innerHTML = node.nodeData.data.text
-      .split(/\n/gim)
-      .join('<br>')
+    let scale = this.mindMap.view.scale
+    let lineHeight = node.style.merge('lineHeight')
+    let fontSize = node.style.merge('fontSize')
+    let textLines = node.nodeData.data.text.split(/\n/gim)
+    node.style.domText(this.textEditNode, scale, textLines.length)
+    this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
+    this.textEditNode.innerHTML = textLines.join('<br>')
    this.textEditNode.style.minWidth = rect.width + 10 + 'px'
    this.textEditNode.style.minHeight = rect.height + 6 + 'px'
    this.textEditNode.style.left = rect.left + 'px'
    this.textEditNode.style.top = rect.top + 'px'
    this.textEditNode.style.display = 'block'
+    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth * scale + 'px'
+    if (textLines.length > 1 && lineHeight !== 1) {
+      this.textEditNode.style.transform = `translateY(${-((lineHeight * fontSize - fontSize) / 2 - 2) * scale}px)`
+    }
    this.showTextEdit = true
    // 选中文本
    this.selectNodeText()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-08-02 23:13:50
-   * @Desc: 选中文本
-   */
+  //  选中文本
  selectNodeText() {
    let selection = window.getSelection()
    let range = document.createRange()
@@ -120,12 +114,11 @@ export default class TextEdit {
    selection.addRange(range)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-24 13:48:16
-   * @Desc: 隐藏文本编辑框
-   */
+  //  隐藏文本编辑框
  hideEditTextBox() {
+    if (this.mindMap.richText) {
+      return this.mindMap.richText.hideEditText()
+    }
    if (!this.showTextEdit) {
      return
    }
@@ -148,6 +141,7 @@ export default class TextEdit {
    this.textEditNode.style.fontFamily = 'inherit'
    this.textEditNode.style.fontSize = 'inherit'
    this.textEditNode.style.fontWeight = 'normal'
+    this.textEditNode.style.transform = 'translateY(0)'
    this.showTextEdit = false
  }
 }
--- a/simple-mind-map/src/View.js
+++ b/simple-mind-map/src/View.js
@@ -1,16 +1,8 @@
-/**
- * javascript comment
- * @Author: 王林25
- * @Date: 2021-04-07 14:45:24
- * @Desc: 视图操作类
- */
+import { CONSTANTS } from './utils/constant'
+
+//  视图操作类
 class View {
-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 14:45:40
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor(opt = {}) {
    this.opt = opt
    this.mindMap = this.opt.mindMap
@@ -24,12 +16,7 @@ class View {
    this.bind()
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 15:38:51
-   * @Desc: 绑定
-   */
+  //  绑定
  bind() {
    // 快捷键
    this.mindMap.keyCommand.addShortcut('Control+=', () => {
@@ -70,22 +57,46 @@ class View {
    })
    // 放大缩小视图
    this.mindMap.event.on('mousewheel', (e, dir) => {
-      // // 放大
-      if (dir === 'down') {
-        this.enlarge()
+      if (this.mindMap.opt.customHandleMousewheel && typeof this.mindMap.opt.customHandleMousewheel === 'function') {
+        return this.mindMap.opt.customHandleMousewheel(e)
+      }
+      if (this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM) {
+        switch (dir) {
+          // 鼠标滚轮，向上和向左，都是缩小
+          case CONSTANTS.DIR.UP:
+          case CONSTANTS.DIR.LEFT:
+            this.narrow()
+            break
+          // 鼠标滚轮，向下和向右，都是放大
+          case CONSTANTS.DIR.DOWN:
+          case CONSTANTS.DIR.RIGHT:
+            this.enlarge()
+            break
+        }
      } else {
-        // 缩小
-        this.narrow()
+        switch (dir){
+          // 上移
+          case CONSTANTS.DIR.DOWN:
+            this.translateY(-this.mindMap.opt.mousewheelMoveStep)
+            break
+          // 下移
+          case CONSTANTS.DIR.UP:
+            this.translateY(this.mindMap.opt.mousewheelMoveStep)
+            break
+          // 右移
+          case CONSTANTS.DIR.LEFT:
+            this.translateX(-this.mindMap.opt.mousewheelMoveStep)
+            break
+          // 左移
+          case CONSTANTS.DIR.RIGHT:
+            this.translateX(this.mindMap.opt.mousewheelMoveStep)
+            break
+        }
      }
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-11-22 18:30:24
-   * @Desc: 获取当前变换状态数据
-   */
+  //  获取当前变换状态数据
  getTransformData() {
    return {
      transform: this.mindMap.draw.transform(),
@@ -99,12 +110,7 @@ class View {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-11-22 19:54:17
-   * @Desc: 动态设置变换状态数据
-   */
+  //  动态设置变换状态数据
  setTransformData(viewData) {
    if (viewData) {
      Object.keys(viewData.state).forEach(prop => {
@@ -118,55 +124,31 @@ class View {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-07-13 15:49:06
-   * @Desc: 平移x方向
-   */
+  //  平移x方向
  translateX(step) {
    this.x += step
    this.transform()
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-10-10 14:03:53
-   * @Desc: 平移x方式到
-   */
+  //  平移x方式到
  translateXTo(x) {
    this.x = x
    this.transform()
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-07-13 15:48:52
-   * @Desc: 平移y方向
-   */
+  //  平移y方向
  translateY(step) {
    this.y += step
    this.transform()
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-10-10 14:04:10
-   * @Desc: 平移y方向到
-   */
+  //  平移y方向到
  translateYTo(y) {
    this.y = y
    this.transform()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-04 17:13:14
-   * @Desc:  应用变换
-   */
+  //   应用变换
  transform() {
    this.mindMap.draw.transform({
      scale: this.scale,
@@ -176,11 +158,7 @@ class View {
    this.mindMap.emit('view_data_change', this.getTransformData())
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-11 17:41:35
-   * @Desc: 恢复
-   */
+  //  恢复
  reset() {
    this.scale = 1
    this.x = 0
@@ -188,11 +166,7 @@ class View {
    this.transform()
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-04 17:10:34
-   * @Desc: 缩小
-   */
+  //  缩小
  narrow() {
    if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
      this.scale -= this.mindMap.opt.scaleRatio
@@ -203,23 +177,14 @@ class View {
    this.mindMap.emit('scale', this.scale)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-04 17:10:41
-   * @Desc: 放大
-   */
+  //  放大
  enlarge() {
    this.scale += this.mindMap.opt.scaleRatio
    this.transform()
    this.mindMap.emit('scale', this.scale)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-12-09 16:31:59
-   * @Desc: 设置缩放
-   */
+  //  设置缩放
  setScale(scale) {
    this.scale = scale
    this.transform()
--- a/simple-mind-map/src/Watermark.js
+++ b/simple-mind-map/src/Watermark.js
@@ -0,0 +1,120 @@
+import { Text, G } from '@svgdotjs/svg.js'
+import { degToRad, camelCaseToHyphen } from './utils'
+import merge from 'deepmerge'
+
+// 水印类
+class Watermark {
+  constructor(opt = {}) {
+    this.mindMap = opt.mindMap
+    this.lineSpacing = 0 // 水印行间距
+    this.textSpacing = 0 // 行内水印间距
+    this.angle = 0 // 旋转角度
+    this.text = '' // 水印文字
+    this.textStyle = {} // 水印文字样式
+    this.watermarkDraw = this.mindMap.svg
+      .group()
+      .css({ 'pointer-events': 'none', 'user-select': 'none' })
+    this.maxLong = Math.sqrt(
+      Math.pow(this.mindMap.width, 2) + Math.pow(this.mindMap.height, 2)
+    )
+    this.updateWatermark(this.mindMap.opt.watermarkConfig || {})
+  }
+
+  // 获取是否存在水印
+  hasWatermark() {
+    return !!this.text.trim()
+  }
+
+  // 处理水印配置
+  handleConfig({ text, lineSpacing, textSpacing, angle, textStyle }) {
+    this.text = text === undefined ? '' : String(text).trim()
+    this.lineSpacing =
+      typeof lineSpacing === 'number' && lineSpacing > 0 ? lineSpacing : 100
+    this.textSpacing =
+      typeof textSpacing === 'number' && textSpacing > 0 ? textSpacing : 100
+    this.angle =
+      typeof angle === 'number' && angle >= 0 && angle <= 90 ? angle : 30
+    this.textStyle = Object.assign(this.textStyle, textStyle || {})
+  }
+
+  // 绘制水印
+  // 非精确绘制，会绘制一些超出可视区域的水印
+  draw() {
+    this.watermarkDraw.clear()
+    if (!this.hasWatermark()) {
+      return
+    }
+    let x = 0
+    while (x < this.mindMap.width) {
+      this.drawText(x)
+      x += this.lineSpacing / Math.sin(degToRad(this.angle))
+    }
+
+    let yOffset =
+      this.lineSpacing / Math.cos(degToRad(this.angle)) || this.lineSpacing
+    let y = yOffset
+    while (y < this.mindMap.height) {
+      this.drawText(0, y)
+      y += yOffset
+    }
+  }
+
+  // 绘制文字
+  drawText(x, y) {
+    let long = Math.min(
+      this.maxLong,
+      (this.mindMap.width - x) / Math.cos(degToRad(this.angle))
+    )
+    let g = new G()
+    let bbox = null
+    let bboxWidth = 0
+    let textHeight = -1
+    while (bboxWidth < long) {
+      let text = new Text().text(this.text)
+      g.add(text)
+      text.transform({
+        translateX: bboxWidth
+      })
+      this.setTextStyle(text)
+      bbox = g.bbox()
+      if (textHeight === -1) {
+        textHeight = bbox.height
+      }
+      bboxWidth = bbox.width + this.textSpacing
+    }
+    let params = {
+      rotate: this.angle,
+      origin: 'top left',
+      translateX: x,
+      translateY: textHeight
+    }
+    if (y !== undefined) {
+      params.translateY = y + textHeight
+    }
+    g.transform(params)
+    this.watermarkDraw.add(g)
+  }
+
+  // 给文字设置样式
+  setTextStyle(text) {
+    Object.keys(this.textStyle).forEach(item => {
+      let value = this.textStyle[item]
+      if (item === 'color') {
+        text.fill(value)
+      } else {
+        text.css(camelCaseToHyphen(item), value)
+      }
+    })
+  }
+
+  // 更新水印
+  updateWatermark(config) {
+    this.mindMap.opt.watermarkConfig = merge(this.mindMap.opt.watermarkConfig, config)
+    this.handleConfig(config)
+    this.draw()
+  }
+}
+
+Watermark.instanceName = 'watermark'
+
+export default Watermark
--- a/simple-mind-map/src/css/quill.css
+++ b/simple-mind-map/src/css/quill.css
@@ -0,0 +1,11 @@
+.ql-editor {
+    overflow: hidden;
+    padding: 0;
+    height: auto;
+    line-height: normal;
+}
+
+.ql-container {
+    height: auto;
+    font-size: inherit;
+}
--- a/simple-mind-map/src/layouts/Base.js
+++ b/simple-mind-map/src/layouts/Base.js
@@ -1,16 +1,9 @@
 import Node from '../Node'
+import { CONSTANTS, initRootNodePositionMap } from '../utils/constant'

-/**
- * @Author: 王林
- * @Date: 2021-04-12 22:24:30
- * @Desc: 布局基类
- */
+//  布局基类
 class Base {
-  /**
-   * @Author: 王林
-   * @Date: 2021-04-12 22:25:16
-   * @Desc: 构造函数
-   */
+  //  构造函数
  constructor(renderer) {
    // 渲染实例
    this.renderer = renderer
@@ -20,66 +13,97 @@ class Base {
    this.draw = this.mindMap.draw
    // 根节点
    this.root = null
+    // 保存所有uid和节点，用于复用
+    this.nodePool = {}
  }

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

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

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

-  /**
-   * @Author: 王林
-   * @Date: 2022-07-30 22:49:28
-   * @Desc: 概要节点
-   */
+  //  概要节点
  renderGeneralization() {}

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-10 21:30:54
-   * @Desc: 创建节点实例
-   */
+  // 通过uid缓存节点
+  cacheNode(uid, node) {
+    // 记录本次渲染时的节点
+    this.renderer.nodeCache[uid] = node
+    // 记录所有渲染时的节点
+    this.nodePool[uid] = node
+    // 如果总缓存数量达到1000，直接清空
+    if (Object.keys(this.nodePool).length > 1000) {
+      this.clearNodePool()
+    }
+  }
+
+  // 清空节点存储池
+  clearNodePool() {
+    this.nodePool = {}
+  }
+
+  // 检查当前来源是否需要重新计算节点大小
+  checkIsNeedResizeSources() {
+    return [CONSTANTS.CHANGE_THEME, CONSTANTS.TRANSFORM_TO_NORMAL_NODE].includes(this.renderer.renderSource)
+  }
+
+  //  创建节点实例
  createNode(data, parent, isRoot, layerIndex) {
    // 创建节点
    let newNode = null
-    // 复用节点
+    // 数据上保存了节点引用，那么直接复用节点
    if (data && data._node && !this.renderer.reRender) {
      newNode = data._node
      newNode.reset()
      newNode.layerIndex = layerIndex
+      this.cacheNode(data._node.uid, newNode)
+      // 主题或主题配置改变了需要重新计算节点大小和布局
+      if (this.checkIsNeedResizeSources()) {
+        newNode.getSize()
+        newNode.needLayout = true
+      }
+    } else if (this.nodePool[data.data.uid] && !this.renderer.reRender) {
+      // 数据上没有保存节点引用，但是通过uid找到了缓存的节点，也可以复用
+      newNode = this.nodePool[data.data.uid]
+      // 保存该节点上一次的数据
+      let lastData = JSON.stringify(newNode.nodeData.data)
+      newNode.reset()
+      newNode.nodeData = newNode.handleData(data || {})
+      newNode.layerIndex = layerIndex
+      this.cacheNode(data.data.uid, newNode)
+      data._node = newNode
+      // 主题或主题配置改变了需要重新计算节点大小和布局
+      let isResizeSource = this.checkIsNeedResizeSources()
+      // 节点数据改变了需要重新计算节点大小和布局
+      let isNodeDataChange = lastData !== JSON.stringify(data.data)
+      if (isResizeSource || isNodeDataChange) {
+        newNode.getSize()
+        newNode.needLayout = true
+      }
    } else {
      // 创建新节点
+      let uid = this.mindMap.uid++
      newNode = new Node({
        data,
-        uid: this.mindMap.uid++,
+        uid,
        renderer: this.renderer,
        mindMap: this.mindMap,
        draw: this.draw,
        layerIndex
      })
-      newNode.getSize()
+      // uid保存到数据上，为了节点复用
+      data.data.uid = uid
+      this.cacheNode(uid, newNode)
      // 数据关联实际节点
      data._node = newNode
      if (data.data.isActive) {
@@ -98,22 +122,31 @@ class Base {
    return newNode
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-07-16 13:48:43
-   * @Desc: 定位节点到画布中间
-   */
-  setNodeCenter(node) {
-    node.left = (this.mindMap.width - node.width) / 2
-    node.top = (this.mindMap.height - node.height) / 2
+  // 格式化节点位置
+  formatPosition(value, size, nodeSize) {
+    if (typeof value === 'number') {
+      return value
+    } else if (initRootNodePositionMap[value] !== undefined) {
+      return size * initRootNodePositionMap[value]
+    } else if (/^\d\d*%$/.test(value)) {
+      return Number.parseFloat(value) / 100 * size
+    } else {
+      return (size - nodeSize) / 2
+    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 11:25:52
-   * @Desc: 更新子节点属性
-   */
+  //  定位节点到画布中间
+  setNodeCenter(node) {
+    let { initRootNodePosition } = this.mindMap.opt
+    let { CENTER }= CONSTANTS.INIT_ROOT_NODE_POSITION
+    if (!initRootNodePosition || !Array.isArray(initRootNodePosition) || initRootNodePosition.length < 2) {
+      initRootNodePosition = [CENTER, CENTER]
+    }
+    node.left = this.formatPosition(initRootNodePosition[0], this.mindMap.width, node.width)
+    node.top = this.formatPosition(initRootNodePosition[1], this.mindMap.height, node.height)
+  }
+
+  //  更新子节点属性
  updateChildren(children, prop, offset) {
    children.forEach(item => {
      item[prop] += offset
@@ -124,22 +157,45 @@ class Base {
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 15:05:01
-   * @Desc: 二次贝塞尔曲线
-   */
+  //  更新子节点多个属性
+  updateChildrenPro(children, props) {
+    children.forEach(item => {
+      Object.keys(props).forEach((prop) => {
+        item[prop] += props[prop]
+      })
+      if (item.children && item.children.length && !item.hasCustomPosition()) {
+        // 适配自定义位置
+        this.updateChildrenPro(item.children, props)
+      }
+    })
+  }
+
+  //  递归计算节点的宽度
+  getNodeAreaWidth(node) {
+    let widthArr = []
+    let loop = (node, width) => {
+      if (node.children.length) {
+        width += node.width / 2
+        node.children.forEach(item => {
+          loop(item, width)
+        })
+      } else {
+        width += node.width
+        widthArr.push(width)
+      }
+    }
+    loop(node, 0)
+    return Math.max(...widthArr)
+  }
+
+  //  二次贝塞尔曲线
  quadraticCurvePath(x1, y1, x2, y2) {
    let cx = x1 + (x2 - x1) * 0.2
    let cy = y1 + (y2 - y1) * 0.8
    return `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
  }

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

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

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 15:34:20
-   * @Desc: 获取节点的marginY
-   */
+  //  获取节点的marginY
  getMarginY(layerIndex) {
    return layerIndex === 1
      ? this.mindMap.themeConfig.second.marginY
      : this.mindMap.themeConfig.node.marginY
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-07-31 20:53:12
-   * @Desc: 获取节点包括概要在内的宽度
-   */
+  //  获取节点包括概要在内的宽度
  getNodeWidthWithGeneralization(node) {
    return Math.max(
      node.width,
@@ -182,11 +226,7 @@ class Base {
    )
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-07-31 20:53:12
-   * @Desc: 获取节点包括概要在内的高度
-   */
+  //  获取节点包括概要在内的高度
  getNodeHeightWithGeneralization(node) {
    return Math.max(
      node.height,
@@ -194,10 +234,8 @@ class Base {
    )
  }

+  //  获取节点的边界值
  /**
-   * @Author: 王林
-   * @Date: 2022-07-31 09:14:03
-   * @Desc: 获取节点的边界值
   * dir：生长方向，h（水平）、v（垂直）
   * isLeft：是否向左生长
   */
@@ -259,6 +297,11 @@ class Base {
      generalizationNodeMargin
    }
  }
+
+  // 获取节点实际存在几个子节点
+  getNodeActChildrenLength(node) {
+    return node.nodeData.children && node.nodeData.children.length
+  }
 }

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

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

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-06 14:04:20
-   * @Desc: 布局
-   */
+  //  布局
  doLayout(callback) {
    let task = [
      () => {
@@ -40,12 +27,7 @@ class CatalogOrganization extends Base {
    asyncRun(task)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 09:49:32
-   * @Desc: 遍历数据计算节点的left、width、height
-   */
+  //  遍历数据计算节点的left、width、height
  computedBaseValue() {
    walk(
      this.renderer.renderTree,
@@ -84,12 +66,7 @@ class CatalogOrganization extends Base {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 09:59:25
-   * @Desc: 遍历节点树计算节点的left、top
-   */
+  //  遍历节点树计算节点的left、top
  computedLeftTopValue() {
    walk(
      this.root,
@@ -110,11 +87,11 @@ class CatalogOrganization extends Base {
              totalLeft += cur.width + marginX
            })
          } else {
-            let totalTop = node.top + node.height + marginY + node.expandBtnSize
+            let totalTop = node.top + node.height + marginY + (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
            node.children.forEach(cur => {
              cur.left = node.left + node.width * 0.5
              cur.top = totalTop
-              totalTop += cur.height + marginY + node.expandBtnSize
+              totalTop += cur.height + marginY + (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
            })
          }
        }
@@ -124,12 +101,7 @@ class CatalogOrganization extends Base {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 10:04:05
-   * @Desc: 调整节点left、top
-   */
+  //  调整节点left、top
  adjustLeftTopValue() {
    walk(
      this.root,
@@ -143,7 +115,7 @@ class CatalogOrganization extends Base {
          let areaWidth = this.getNodeAreaWidth(node)
          let difference = areaWidth - node.width
          if (difference > 0) {
-            this.updateBrothersLeft(node, difference / 2)
+            this.updateBrothersLeft(node, difference)
          }
        }
        // 调整top
@@ -152,85 +124,40 @@ class CatalogOrganization extends Base {
          let marginY = this.getMarginY(layerIndex + 1)
          let totalHeight =
            node.children.reduce((h, item) => {
-              return h + item.height
+              return h + item.height + (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
            }, 0) +
-            (len + 1) * marginY +
-            len * node.expandBtnSize
+            len * marginY
          this.updateBrothersTop(node, totalHeight)
        }
      },
-      null,
+      (node, parent, isRoot) => {
+        if (isRoot) {
+          let { right, left } = this.getNodeBoundaries(node, 'h')
+          let childrenWidth = right - left
+          let offset = (node.left - left) - (childrenWidth - node.width) / 2
+          this.updateChildren(node.children, 'left', offset)
+        }
+      },
      true
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-12 18:55:03
-   * @Desc: 递归计算节点的宽度
-   */
-  getNodeAreaWidth(node) {
-    let widthArr = []
-    let loop = (node, width) => {
-      if (node.children.length) {
-        width += node.width / 2
-        node.children.forEach(item => {
-          loop(item, width)
-        })
-      } else {
-        width += node.width
-        widthArr.push(width)
-      }
-    }
-    loop(node, 0)
-    return Math.max(...widthArr)
-  }
-
-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-07-13 11:12:51
-   * @Desc: 调整兄弟节点的left
-   */
+  //  调整兄弟节点的left
  updateBrothersLeft(node, addWidth) {
    if (node.parent) {
      let childrenList = node.parent.children
      let index = childrenList.findIndex(item => {
        return item === node
      })
-      // 存在大于一个节点时，第一个或最后一个节点自身也需要移动，否则两边不对称
-      if (
-        (index === 0 || index === childrenList.length - 1) &&
-        childrenList.length > 1
-      ) {
-        let _offset = index === 0 ? -addWidth : addWidth
-        node.left += _offset
-        if (
-          node.children &&
-          node.children.length &&
-          !node.hasCustomPosition()
-        ) {
-          this.updateChildren(node.children, 'left', _offset)
-        }
-      }
      childrenList.forEach((item, _index) => {
-        if (item.hasCustomPosition()) {
+        if (item.hasCustomPosition() || _index <= index) {
          // 适配自定义位置
          return
        }
-        let _offset = 0
-        if (_index < index) {
-          // 左边的节点往左移
-          _offset = -addWidth
-        } else if (_index > index) {
-          // 右边的节点往右移
-          _offset = addWidth
-        }
-        item.left += _offset
+        item.left += addWidth
        // 同步更新子节点的位置
        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'left', _offset)
+          this.updateChildren(item.children, 'left', addWidth)
        }
      })
      // 更新父节点的位置
@@ -238,12 +165,7 @@ class CatalogOrganization extends Base {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 14:26:03
-   * @Desc: 调整兄弟节点的top
-   */
+  //  调整兄弟节点的top
  updateBrothersTop(node, addHeight) {
    if (node.parent && !node.parent.isRoot) {
      let childrenList = node.parent.children
@@ -271,11 +193,7 @@ class CatalogOrganization extends Base {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 14:42:48
-   * @Desc: 绘制连线，连接该节点到其子节点
-   */
+  //  绘制连线，连接该节点到其子节点
  renderLine(node, lines, style) {
    if (node.children.length <= 0) {
      return []
@@ -299,9 +217,13 @@ class CatalogOrganization extends Base {
        if (x2 > maxx) {
          maxx = x2
        }
-        let path = `M ${x2},${y1 + s1} L ${x2},${
-          y1 + s1 > y2 ? y2 + item.height : y2
-        }`
+        // 节点使用横线风格，需要额外渲染横线
+        let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+          ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
+          : ''
+        let path =
+          `M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}` +
+          nodeUseLineStylePath
        // 竖线
        lines[index].plot(path)
        style && style(lines[index], item)
@@ -365,6 +287,13 @@ class CatalogOrganization extends Base {
          }
          path = `M ${x2},${y2} L ${_left},${y2}`
        }
+        // 节点使用横线风格，需要额外渲染横线
+        let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+          ? ` L ${_left},${y2 - item.height / 2} L ${_left},${
+              y2 + item.height / 2
+            }`
+          : ''
+        path += nodeUseLineStylePath
        lines[index].plot(path)
        style && style(lines[index], item)
      })
@@ -385,11 +314,7 @@ class CatalogOrganization extends Base {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 19:54:26
-   * @Desc: 渲染按钮
-   */
+  //  渲染按钮
  renderExpandBtn(node, btn) {
    let { width, height, expandBtnSize, isRoot } = node
    if (!isRoot) {
@@ -401,11 +326,7 @@ class CatalogOrganization extends Base {
    }
  }

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

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

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-06 14:04:20
-   * @Desc: 布局
-   */
+  //  布局
  doLayout(callback) {
    let task = [
      () => {
@@ -40,12 +27,7 @@ class LogicalStructure extends Base {
    asyncRun(task)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 09:49:32
-   * @Desc: 遍历数据计算节点的left、width、height
-   */
+  //  遍历数据计算节点的left、width、height
  computedBaseValue() {
    walk(
      this.renderer.renderTree,
@@ -80,12 +62,7 @@ class LogicalStructure extends Base {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 09:59:25
-   * @Desc: 遍历节点树计算节点的top
-   */
+  //  遍历节点树计算节点的top
  computedTopValue() {
    walk(
      this.root,
@@ -111,12 +88,7 @@ class LogicalStructure extends Base {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 10:04:05
-   * @Desc: 调整节点top
-   */
+  //  调整节点top
  adjustTopValue() {
    walk(
      this.root,
@@ -139,12 +111,7 @@ class LogicalStructure extends Base {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 14:26:03
-   * @Desc: 更新兄弟节点的top
-   */
+  //  更新兄弟节点的top
  updateBrothers(node, addHeight) {
    if (node.parent) {
      let childrenList = node.parent.children
@@ -175,11 +142,7 @@ class LogicalStructure extends Base {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 14:42:48
-   * @Desc: 绘制连线，连接该节点到其子节点
-   */
+  //  绘制连线，连接该节点到其子节点
  renderLine(node, lines, style, lineStyle) {
    if (lineStyle === 'curve') {
      this.renderLineCurve(node, lines, style)
@@ -190,12 +153,7 @@ class LogicalStructure extends Base {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-09-30 14:17:30
-   * @Desc: 直线风格连线
-   */
+  //  直线风格连线
  renderLineStraight(node, lines, style) {
    if (node.children.length <= 0) {
      return []
@@ -203,54 +161,59 @@ class LogicalStructure extends Base {
    let { left, top, width, height, expandBtnSize } = node
    let marginX = this.getMarginX(node.layerIndex + 1)
    let s1 = (marginX - expandBtnSize) * 0.6
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
        node.layerIndex === 0 ? left + width : left + width + expandBtnSize
      let y1 = top + height / 2
      let x2 = item.left
      let y2 = item.top + item.height / 2
-      let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${
-        x1 + s1
-      },${y2} L ${x2},${y2}`
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStyleOffset = nodeUseLineStyle
+        ? item.width
+        : 0
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
+        x2 + nodeUseLineStyleOffset
+      },${y2}`
      lines[index].plot(path)
      style && style(lines[index], item)
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-09-30 14:34:41
-   * @Desc: 直连风格
-   */
+  //  直连风格
  renderLineDirect(node, lines, style) {
    if (node.children.length <= 0) {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
      let y1 = top + height / 2
      let x2 = item.left
      let y2 = item.top + item.height / 2
-      let path = `M ${x1},${y1} L ${x2},${y2}`
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = nodeUseLineStyle
+        ? ` L ${item.left + item.width},${y2}`
+        : ''
+      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
      lines[index].plot(path)
      style && style(lines[index], item)
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-09-30 14:17:43
-   * @Desc: 曲线风格连线
-   */
+  //  曲线风格连线
  renderLineCurve(node, lines, style) {
    if (node.children.length <= 0) {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
@@ -258,32 +221,37 @@ class LogicalStructure extends Base {
      let x2 = item.left
      let y2 = item.top + item.height / 2
      let path = ''
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = nodeUseLineStyle
+        ? ` L ${item.left + item.width},${y2}`
+        : ''
      if (node.isRoot) {
-        path = this.quadraticCurvePath(x1, y1, x2, y2)
+        path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
      } else {
-        path = this.cubicBezierPath(x1, y1, x2, y2)
+        path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
      }
      lines[index].plot(path)
      style && style(lines[index], item)
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 19:54:26
-   * @Desc: 渲染按钮
-   */
+  //  渲染按钮
  renderExpandBtn(node, btn) {
    let { width, height } = node
    let { translateX, translateY } = btn.transform()
-    btn.translate(width - translateX, height / 2 - translateY)
+    // 节点使用横线风格，需要调整展开收起按钮位置
+    let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
+      ? height / 2
+      : 0
+    btn.translate(
+      width - translateX,
+      height / 2 - translateY + nodeUseLineStyleOffset
+    )
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-07-30 08:30:35
-   * @Desc: 创建概要节点
-   */
+  //  创建概要节点
  renderGeneralization(node, gLine, gNode) {
    let {
      top,
--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -1,28 +1,15 @@
 import Base from './Base'
 import { walk, asyncRun } from '../utils'

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

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-06 14:04:20
-   * @Desc: 布局
-   */
+  //  布局
  doLayout(callback) {
    let task = [
      () => {
@@ -41,12 +28,7 @@ class MindMap extends Base {
    asyncRun(task)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 09:49:32
-   * @Desc: 遍历数据计算节点的left、width、height
-   */
+  //  遍历数据计算节点的left、width、height
  computedBaseValue() {
    walk(
      this.renderer.renderTree,
@@ -110,12 +92,7 @@ class MindMap extends Base {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 09:59:25
-   * @Desc: 遍历节点树计算节点的top
-   */
+  //  遍历节点树计算节点的top
  computedTopValue() {
    walk(
      this.root,
@@ -147,12 +124,7 @@ class MindMap extends Base {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 10:04:05
-   * @Desc: 调整节点top
-   */
+  //  调整节点top
  adjustTopValue() {
    walk(
      this.root,
@@ -174,12 +146,7 @@ class MindMap extends Base {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 14:26:03
-   * @Desc: 更新兄弟节点的top
-   */
+  //  更新兄弟节点的top
  updateBrothers(node, leftAddHeight, rightAddHeight) {
    if (node.parent) {
      // 过滤出和自己同方向的节点
@@ -214,11 +181,7 @@ class MindMap extends Base {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 14:42:48
-   * @Desc: 绘制连线，连接该节点到其子节点
-   */
+  //  绘制连线，连接该节点到其子节点
  renderLine(node, lines, style, lineStyle) {
    if (lineStyle === 'curve') {
      this.renderLineCurve(node, lines, style)
@@ -229,12 +192,7 @@ class MindMap extends Base {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-09-30 14:10:47
-   * @Desc: 直线风格连线
-   */
+  //  直线风格连线
  renderLineStraight(node, lines, style) {
    if (node.children.length <= 0) {
      return []
@@ -242,12 +200,18 @@ class MindMap extends Base {
    let { left, top, width, height, expandBtnSize } = node
    let marginX = this.getMarginX(node.layerIndex + 1)
    let s1 = (marginX - expandBtnSize) * 0.6
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 = 0
      let _s = 0
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStyleOffset = nodeUseLineStyle
+        ? item.width
+        : 0
      if (item.dir === 'left') {
        _s = -s1
        x1 = node.layerIndex === 0 ? left : left - expandBtnSize
+        nodeUseLineStyleOffset = -nodeUseLineStyleOffset
      } else {
        _s = s1
        x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
@@ -255,25 +219,23 @@ class MindMap extends Base {
      let y1 = top + height / 2
      let x2 = item.dir === 'left' ? item.left + item.width : item.left
      let y2 = item.top + item.height / 2
-      let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${
-        x1 + _s
-      },${y2} L ${x2},${y2}`
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${
+        x2 + nodeUseLineStyleOffset
+      },${y2}`
      lines[index].plot(path)
      style && style(lines[index], item)
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-09-30 14:34:41
-   * @Desc: 直连风格
-   */
+  //  直连风格
  renderLineDirect(node, lines, style) {
    if (node.children.length <= 0) {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
        node.layerIndex === 0
@@ -284,23 +246,30 @@ class MindMap extends Base {
      let y1 = top + height / 2
      let x2 = item.dir === 'left' ? item.left + item.width : item.left
      let y2 = item.top + item.height / 2
-      let path = `M ${x1},${y1} L ${x2},${y2}`
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = ''
+      if (nodeUseLineStyle) {
+        if (item.dir === 'left') {
+          nodeUseLineStylePath = ` L ${item.left},${y2}`
+        } else {
+          nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
+        }
+      }
+      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
      lines[index].plot(path)
      style && style(lines[index], item)
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-09-30 14:10:56
-   * @Desc: 曲线风格连线
-   */
+  //  曲线风格连线
  renderLineCurve(node, lines, style) {
    if (node.children.length <= 0) {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
+    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
    node.children.forEach((item, index) => {
      let x1 =
        node.layerIndex === 0
@@ -312,34 +281,41 @@ class MindMap extends Base {
      let x2 = item.dir === 'left' ? item.left + item.width : item.left
      let y2 = item.top + item.height / 2
      let path = ''
+      y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
+      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = ''
+      if (this.mindMap.themeConfig.nodeUseLineStyle) {
+        if (item.dir === 'left') {
+          nodeUseLineStylePath = ` L ${item.left},${y2}`
+        } else {
+          nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
+        }
+      }
      if (node.isRoot) {
-        path = this.quadraticCurvePath(x1, y1, x2, y2)
+        path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
      } else {
-        path = this.cubicBezierPath(x1, y1, x2, y2)
+        path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
      }
      lines[index].plot(path)
      style && style(lines[index], item)
    })
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 19:54:26
-   * @Desc: 渲染按钮
-   */
+  //  渲染按钮
  renderExpandBtn(node, btn) {
    let { width, height, expandBtnSize } = node
    let { translateX, translateY } = btn.transform()
+    // 节点使用横线风格，需要调整展开收起按钮位置
+    let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
+      ? height / 2
+      : 0
    let x = (node.dir === 'left' ? 0 - expandBtnSize : width) - translateX
-    let y = height / 2 - translateY
+    let y = height / 2 - translateY + nodeUseLineStyleOffset
    btn.translate(x, y)
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-07-30 08:30:35
-   * @Desc: 创建概要节点
-   */
+  //  创建概要节点
  renderGeneralization(node, gLine, gNode) {
    let isLeft = node.dir === 'left'
    let {
--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/simple-mind-map/src/layouts/OrganizationStructure.js
@@ -1,28 +1,15 @@
 import Base from './Base'
 import { walk, asyncRun } from '../utils'

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

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-06 14:04:20
-   * @Desc: 布局
-   */
+  //  布局
  doLayout(callback) {
    let task = [
      () => {
@@ -41,12 +28,7 @@ class OrganizationStructure extends Base {
    asyncRun(task)
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 09:49:32
-   * @Desc: 遍历数据计算节点的left、width、height
-   */
+  //  遍历数据计算节点的left、width、height
  computedBaseValue() {
    walk(
      this.renderer.renderTree,
@@ -81,12 +63,7 @@ class OrganizationStructure extends Base {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 09:59:25
-   * @Desc: 遍历节点树计算节点的left
-   */
+  //  遍历节点树计算节点的left
  computedLeftValue() {
    walk(
      this.root,
@@ -112,12 +89,7 @@ class OrganizationStructure extends Base {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-08 10:04:05
-   * @Desc: 调整节点left
-   */
+  //  调整节点left
  adjustLeftValue() {
    walk(
      this.root,
@@ -140,12 +112,7 @@ class OrganizationStructure extends Base {
    )
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2021-04-07 14:26:03
-   * @Desc: 更新兄弟节点的left
-   */
+  //  更新兄弟节点的left
  updateBrothers(node, addWidth) {
    if (node.parent) {
      let childrenList = node.parent.children
@@ -176,11 +143,7 @@ class OrganizationStructure extends Base {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 14:42:48
-   * @Desc: 绘制连线，连接该节点到其子节点
-   */
+  //  绘制连线，连接该节点到其子节点
  renderLine(node, lines, style, lineStyle) {
    if (lineStyle === 'direct') {
      this.renderLineDirect(node, lines, style)
@@ -189,12 +152,7 @@ class OrganizationStructure extends Base {
    }
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-09-30 14:34:41
-   * @Desc: 直连风格
-   */
+  //  直连风格
  renderLineDirect(node, lines, style) {
    if (node.children.length <= 0) {
      return []
@@ -205,18 +163,17 @@ class OrganizationStructure extends Base {
    node.children.forEach((item, index) => {
      let x2 = item.left + item.width / 2
      let y2 = item.top
-      let path = `M ${x1},${y1} L ${x2},${y2}`
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+        ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
+        : ''
+      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
      lines[index].plot(path)
      style && style(lines[index], item)
    })
  }

-  /**
-   * javascript comment
-   * @Author: 王林25
-   * @Date: 2022-09-30 14:39:07
-   * @Desc: 直线风格连线
-   */
+  //  直线风格连线
  renderLineStraight(node, lines, style) {
    if (node.children.length <= 0) {
      return []
@@ -238,7 +195,11 @@ class OrganizationStructure extends Base {
      if (x2 > maxx) {
        maxx = x2
      }
-      let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+        ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
+        : ''
+      let path = `M ${x2},${y1 + s1} L ${x2},${y2}` + nodeUseLineStylePath
      lines[index].plot(path)
      style && style(lines[index], item)
    })
@@ -261,11 +222,7 @@ class OrganizationStructure extends Base {
    }
  }

-  /**
-   * @Author: 王林
-   * @Date: 2021-04-11 19:54:26
-   * @Desc: 渲染按钮
-   */
+  //  渲染按钮
  renderExpandBtn(node, btn) {
    let { width, height, expandBtnSize } = node
    let { translateX, translateY } = btn.transform()
@@ -275,11 +232,7 @@ class OrganizationStructure extends Base {
    )
  }

-  /**
-   * @Author: 王林
-   * @Date: 2022-07-30 08:30:35
-   * @Desc: 创建概要节点
-   */
+  //  创建概要节点
  renderGeneralization(node, gLine, gNode) {
    let {
      bottom,
--- a/simple-mind-map/src/layouts/Timeline.js
+++ b/simple-mind-map/src/layouts/Timeline.js
@@ -0,0 +1,338 @@
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
+import { CONSTANTS } from '../utils/constant'
+
+//  时间轴
+class Timeline extends Base {
+  //  构造函数
+  constructor(opt = {}, layout) {
+    super(opt)
+    this.layout = layout
+  }
+
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedLeftTopValue()
+      },
+      () => {
+        this.adjustLeftTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (cur, parent, isRoot, layerIndex, index) => {
+        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
+        } else {
+          // 非根节点
+          // 时间轴2类型需要交替显示
+          if (this.layout === CONSTANTS.LAYOUT.TIMELINE2) {
+            // 三级及以下节点以上级为准
+            if (parent._node.dir) {
+              newNode.dir = parent._node.dir
+            } else {
+              // 节点生长方向
+              newNode.dir =
+                index % 2 === 0
+                  ? CONSTANTS.TIMELINE_DIR.BOTTOM
+                  : CONSTANTS.TIMELINE_DIR.TOP
+            }
+          } else {
+            newNode.dir = ''
+          }
+          if (parent._node.isRoot) {
+            newNode.top =
+              parent._node.top +
+              (cur._node.height > parent._node.height
+                ? -(cur._node.height - parent._node.height) / 2
+                : (parent._node.height - cur._node.height) / 2)
+          }
+        }
+        if (!cur.data.expand) {
+          return true
+        }
+      },
+      null,
+      true,
+      0
+    )
+  }
+
+  //  遍历节点树计算节点的left、top
+  computedLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex, index) => {
+        if (
+          node.nodeData.data.expand &&
+          node.children &&
+          node.children.length
+        ) {
+          let marginX = this.getMarginX(layerIndex + 1)
+          let marginY = this.getMarginY(layerIndex + 1)
+          if (isRoot) {
+            let left = node.left + node.width
+            let totalLeft = left + marginX
+            node.children.forEach(cur => {
+              cur.left = totalLeft
+              totalLeft += cur.width + marginX
+            })
+          } else {
+            let totalTop =
+              node.top +
+              node.height +
+              marginY +
+              (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+            node.children.forEach(cur => {
+              cur.left = node.left + node.width * 0.5
+              cur.top = totalTop
+              totalTop +=
+                cur.height +
+                marginY +
+                (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
+            })
+          }
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left、top
+  adjustLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        // 调整left
+        if (node.isRoot) {
+          this.updateBrothersLeft(node)
+        }
+        // 调整top
+        let len = node.children.length
+        if (parent && !parent.isRoot && len > 0) {
+          let marginY = this.getMarginY(layerIndex + 1)
+          let totalHeight =
+            node.children.reduce((h, item) => {
+              return (
+                h +
+                item.height +
+                (this.getNodeActChildrenLength(item) > 0
+                  ? item.expandBtnSize
+                  : 0)
+              )
+            }, 0) +
+            len * marginY
+          this.updateBrothersTop(node, totalHeight)
+        }
+      },
+      (node, parent, isRoot, layerIndex) => {
+        if (
+          parent &&
+          parent.isRoot &&
+          node.dir === CONSTANTS.TIMELINE_DIR.TOP
+        ) {
+          // 遍历二级节点的子节点
+          node.children.forEach(item => {
+            let totalHeight = this.getNodeAreaHeight(item)
+            let _top = item.top
+            item.top =
+              node.top - (item.top - node.top) - totalHeight + node.height
+            this.updateChildren(item.children, 'top', item.top - _top)
+          })
+        }
+      },
+      true
+    )
+  }
+
+  //  递归计算节点的宽度
+  getNodeAreaHeight(node) {
+    let totalHeight = 0
+    let loop = node => {
+      totalHeight +=
+        node.height +
+        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
+        this.getMarginY(node.layerIndex)
+      if (node.children.length) {
+        node.children.forEach(item => {
+          loop(item)
+        })
+      }
+    }
+    loop(node)
+    return totalHeight
+  }
+
+  //  调整兄弟节点的left
+  updateBrothersLeft(node) {
+    let childrenList = node.children
+    let totalAddWidth = 0
+    childrenList.forEach(item => {
+      item.left += totalAddWidth
+      if (item.children && item.children.length) {
+        this.updateChildren(item.children, 'left', totalAddWidth)
+      }
+      // let areaWidth = this.getNodeAreaWidth(item)
+      let { left, right } = this.getNodeBoundaries(item, 'h')
+      let areaWidth = right - left
+      let difference = areaWidth - item.width
+      if (difference > 0) {
+        totalAddWidth += difference
+      }
+    })
+  }
+
+  //  调整兄弟节点的top
+  updateBrothersTop(node, addHeight) {
+    if (node.parent && !node.parent.isRoot) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 下面的节点往下移
+        if (_index > index) {
+          _offset = addHeight
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothersTop(node.parent, addHeight)
+    }
+  }
+
+  //  绘制连线，连接该节点到其子节点
+  renderLine(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    let len = node.children.length
+    if (node.isRoot) {
+      // 当前节点是根节点
+      let prevBother = node
+      // 根节点的子节点是和根节点同一水平线排列
+      node.children.forEach((item, index) => {
+        let x1 = prevBother.left + prevBother.width
+        let x2 = item.left
+        let y = node.top + node.height / 2
+        let path = `M ${x1},${y} L ${x2},${y}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+        prevBother = item
+      })
+    } else {
+      // 当前节点为非根节点
+      let maxy = -Infinity
+      let miny = Infinity
+      let x = node.left + node.width * 0.3
+      node.children.forEach((item, index) => {
+        let y = item.top + item.height / 2
+        if (y > maxy) {
+          maxy = y
+        }
+        if (y < miny) {
+          miny = y
+        }
+        // 水平线
+        let path = `M ${x},${y} L ${item.left},${y}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      })
+      // 竖线
+      if (len > 0) {
+        let line = this.draw.path()
+        expandBtnSize = len > 0 ? expandBtnSize : 0
+        if (
+          node.parent &&
+          node.parent.isRoot &&
+          node.dir === CONSTANTS.TIMELINE_DIR.TOP
+        ) {
+          line.plot(`M ${x},${top} L ${x},${miny}`)
+        } else {
+          line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
+        }
+        node.style.line(line)
+        node._lines.push(line)
+        style && style(line, node)
+      }
+    }
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height, expandBtnSize, isRoot } = node
+    if (!isRoot) {
+      let { translateX, translateY } = btn.transform()
+      if (
+        node.parent &&
+        node.parent.isRoot &&
+        node.dir === CONSTANTS.TIMELINE_DIR.TOP
+      ) {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          -expandBtnSize / 2 - translateY
+        )
+      } else {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          height + expandBtnSize / 2 - translateY
+        )
+      }
+    }
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      top,
+      bottom,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h')
+    let x1 = right + generalizationLineMargin
+    let y1 = top
+    let x2 = right + generalizationLineMargin
+    let y2 = bottom
+    let cx = x1 + 20
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left = right + generalizationNodeMargin
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
+}
+
+export default Timeline
--- a/simple-mind-map/src/layouts/fishboneUtils.js
+++ b/simple-mind-map/src/layouts/fishboneUtils.js
@@ -0,0 +1,216 @@
+import { degToRad } from '../utils/'
+
+export default {
+  top: {
+    renderExpandBtn({
+      node,
+      btn,
+      expandBtnSize,
+      translateX,
+      translateY,
+      width,
+      height
+    }) {
+      if (node.parent && node.parent.isRoot) {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          -expandBtnSize / 2 - translateY
+        )
+      } else {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          height + expandBtnSize / 2 - translateY
+        )
+      }
+    },
+    renderLine({
+      node,
+      line,
+      top,
+      x,
+      lineLength,
+      height,
+      expandBtnSize,
+      maxy,
+      ctx
+    }) {
+      if (node.parent && node.parent.isRoot) {
+        line.plot(
+          `M ${x},${top} L ${x + lineLength},${
+            top - Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
+          }`
+        )
+      } else {
+        line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
+      }
+    },
+    computedLeftTopValue({ layerIndex, node, ctx }) {
+      if (layerIndex >= 1 && node.children) {
+        // 遍历三级及以下节点的子节点
+        let startLeft = node.left + node.width * ctx.childIndent
+        let totalTop =
+          node.top +
+          node.height +
+          (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+        node.children.forEach(item => {
+          item.left = startLeft
+          item.top += totalTop
+          totalTop +=
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+        })
+      }
+    },
+    adjustLeftTopValueBefore({ node, parent, ctx }) {
+      // 调整top
+      let len = node.children.length
+      // 调整三级及以下节点的top
+      if (parent && !parent.isRoot && len > 0) {
+        let totalHeight = node.children.reduce((h, item) => {
+          return (
+            h +
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+          )
+        }, 0)
+        ctx.updateBrothersTop(node, totalHeight)
+      }
+    },
+    adjustLeftTopValueAfter({ parent, node, ctx }) {
+      // 将二级节点的子节点移到上方
+      if (parent && parent.isRoot) {
+        // 遍历二级节点的子节点
+        let totalHeight = node.expandBtnSize
+        node.children.forEach(item => {
+          // 调整top
+          let nodeTotalHeight = ctx.getNodeAreaHeight(item)
+          let _top = item.top
+          let _left = item.left
+          item.top =
+            node.top - (item.top - node.top) - nodeTotalHeight + node.height
+          // 调整left
+          item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
+          totalHeight += nodeTotalHeight
+          // 同步更新后代节点
+          ctx.updateChildrenPro(item.children, {
+            top: item.top - _top,
+            left: item.left - _left
+          })
+        })
+      }
+    }
+  },
+  bottom: {
+    renderExpandBtn({
+      node,
+      btn,
+      expandBtnSize,
+      translateX,
+      translateY,
+      width,
+      height
+    }) {
+      if (node.parent && node.parent.isRoot) {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          height + expandBtnSize / 2 - translateY
+        )
+      } else {
+        btn.translate(
+          width * 0.3 - expandBtnSize / 2 - translateX,
+          -expandBtnSize / 2 - translateY
+        )
+      }
+    },
+    renderLine({ node, line, top, x, lineLength, height, miny, ctx }) {
+      if (node.parent && node.parent.isRoot) {
+        line.plot(
+          `M ${x},${top + height} L ${x + lineLength},${
+            top + height + Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
+          }`
+        )
+      } else {
+        line.plot(`M ${x},${top} L ${x},${miny}`)
+      }
+    },
+    computedLeftTopValue({ layerIndex, node, ctx }) {
+      if (layerIndex === 1 && node.children) {
+        // 遍历二级节点的子节点
+        let startLeft = node.left + node.width * ctx.childIndent
+        let totalTop =
+          node.top +
+          node.height +
+          (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+
+        node.children.forEach(item => {
+          item.left = startLeft
+          item.top =
+            totalTop +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+          totalTop +=
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+        })
+      }
+      if (layerIndex > 1 && node.children) {
+        // 遍历三级及以下节点的子节点
+        let startLeft = node.left + node.width * ctx.childIndent
+        let totalTop =
+          node.top -
+          (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+        node.children.forEach(item => {
+          item.left = startLeft
+          item.top = totalTop - item.height
+          totalTop -=
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+        })
+      }
+    },
+    adjustLeftTopValueBefore({ node, ctx, layerIndex }) {
+      // 调整top
+      let len = node.children.length
+      if (layerIndex > 2 && len > 0) {
+        let totalHeight = node.children.reduce((h, item) => {
+          return (
+            h +
+            item.height +
+            (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
+          )
+        }, 0)
+        ctx.updateBrothersTop(node, -totalHeight)
+      }
+    },
+    adjustLeftTopValueAfter({ parent, node, ctx }) {
+      // 将二级节点的子节点移到上方
+      if (parent && parent.isRoot) {
+        // 遍历二级节点的子节点
+        let totalHeight = 0
+        let totalHeight2 = node.expandBtnSize
+        node.children.forEach(item => {
+          // 调整top
+          let hasChildren = ctx.getNodeActChildrenLength(item) > 0
+          let nodeTotalHeight = ctx.getNodeAreaHeight(item)
+          let offset =
+            hasChildren > 0
+              ? nodeTotalHeight -
+                item.height -
+                (hasChildren ? item.expandBtnSize : 0)
+              : 0
+          let _top = totalHeight + offset
+          let _left = item.left
+          item.top += _top
+          // 调整left
+          item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight2) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
+          totalHeight += offset
+          totalHeight2 += nodeTotalHeight
+          // 同步更新后代节点
+          ctx.updateChildrenPro(item.children, {
+            top: _top,
+            left: item.left - _left
+          })
+        })
+      }
+    }
+  }
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
wanglin2	8f2cc72d3c	Merge branch 'feature' into main	2023-04-18 09:54:45 +08:00
wanglin2	ec22656bee	打包0.5.5	2023-04-18 09:52:15 +08:00
wanglin2	4acf8ba2ac	更新文档	2023-04-18 09:45:40 +08:00
wanglin2	d45a18904e	Feature：1.支持配置节点文本编辑框、节点备注浮层的z-index。2.支持点击画布区域外结束节点编辑状态	2023-04-18 09:45:29 +08:00
wanglin2	9fc2dbabd4	Feature：支持配置导出为png、svg、pdf时的内边距。	2023-04-18 09:04:16 +08:00
wanglin2	b83b81f52e	Merge branch 'feature' into main	2023-04-15 09:58:47 +08:00
wanglin2	d1e2db993e	打包0.5.4-fix.1	2023-04-15 09:54:50 +08:00
wanglin2	ab931901e2	优化鱼骨图布局	2023-04-15 09:51:12 +08:00
wanglin2	9879a25f9b	Merge branch 'feature' into main	2023-04-14 23:23:45 +08:00
wanglin2	16fb8eb092	打包0.5.4	2023-04-14 23:11:00 +08:00
wanglin2	de859927ed	更新文档	2023-04-14 23:03:14 +08:00
wanglin2	7bde59f664	优化目录组织图布局	2023-04-14 23:02:04 +08:00
wanglin2	be9668c7b8	修改鱼骨结构	2023-04-14 22:04:58 +08:00
wanglin2	95fe3189d5	Fix:修复隐藏节点时隐藏连线没有做异常处理的问题	2023-04-14 20:32:11 +08:00
wanglin2	9c60857c6a	优化鱼骨结构，支持margin	2023-04-14 17:43:02 +08:00
wanglin2	3b7cea9ee3	优化：提取结构类公共方法	2023-04-14 10:40:01 +08:00
wanglin2	3f081e5021	更新群二维码	2023-04-14 10:29:49 +08:00
wanglin2	d959420d6e	基本完成鱼骨结构	2023-04-14 10:27:25 +08:00
wanglin2	79d81b92e6	鱼骨结构开发中	2023-04-13 17:31:54 +08:00
wanglin2	940c60f23d	鱼骨结构开发中：完成上方鱼骨图	2023-04-13 09:35:06 +08:00
wanglin2	965ab8151e	优化时间轴结构逻辑	2023-04-13 08:32:39 +08:00
wanglin2	87d55b31ca	优化目录组织图结构逻辑	2023-04-13 08:31:00 +08:00
wanglin2	bb68575aca	优化组织结构图逻辑	2023-04-12 22:49:19 +08:00
wanglin2	e561e804be	Fix:修复组织结构图,目录组织图等节点拖拽时存在线段未隐藏的bug	2023-04-12 22:28:35 +08:00
wanglin2	5a8c3aa9d3	鱼骨结构开发中	2023-04-12 22:17:51 +08:00
wanglin2	f84639debd	测试提交	2023-04-12 17:42:18 +08:00
wanglin2	de77a2b613	Feature：新增时间轴结构	2023-04-12 14:15:46 +08:00
wanglin2	3825c3769f	精简时间轴结构的连线逻辑	2023-04-12 08:43:22 +08:00
wanglin2	876908e922	更新文档	2023-04-11 22:25:18 +08:00
wanglin2	25ecde8948	Fix:修复节点右键和画布右键的冲突问题	2023-04-11 22:23:26 +08:00
wanglin2	2de0334e3b	Feature：新增时间轴结构	2023-04-11 16:52:38 +08:00
wanglin2	1e32338d23	Merge branch 'feature' into main	2023-04-10 22:11:00 +08:00
wanglin2	21f487321a	更新文档	2023-04-10 22:08:26 +08:00
wanglin2	750af31996	Merge branch 'main' of https://github.com/wanglin2/mind-map into main	2023-04-10 10:27:15 +08:00
wanglin2	dc1aaee75d	Merge branch 'feature' into main	2023-04-10 10:26:49 +08:00
wanglin2	2122fa59d7	更新文档	2023-04-10 10:25:59 +08:00
wanglin2	5b7c65adad	添加新主题	2023-04-10 10:20:09 +08:00
wanglin2	fabf4535a8	Merge branch 'feature' into main	2023-04-09 22:11:11 +08:00
wanglin2	04566080e0	更新文档	2023-04-09 22:10:13 +08:00
wanglin2	0f9d9cdb21	Merge branch 'feature' into main	2023-04-09 08:53:58 +08:00
wanglin2	11538d1789	打包0.5.3-fix.2：修复导出图片时节点中的图片无法显示的问题；更新文档	2023-04-09 08:52:43 +08:00
wanglin2	49bae6cc6c	Merge branch 'feature' into main	2023-04-08 21:09:49 +08:00
wanglin2	9644ba0c8d	打包0.5.3-fix.1，修复设置初始根节点位置不生效的问题；文档新增教程章节	2023-04-08 21:09:24 +08:00
wanglin2	ac2df3cb2e	Merge branch 'feature' into main	2023-04-08 15:37:58 +08:00
wanglin2	aad1f911c8	支持打包成esm模块	2023-04-08 15:37:34 +08:00
wanglin2	27b50bf4ae	Merge branch 'feature' into main	2023-04-07 20:14:47 +08:00
wanglin2	2d22837e32	Demo：修复导入存在主题配置的数据没有触发本地存储的问题	2023-04-07 20:14:30 +08:00
wanglin2	866f2071ce	Merge branch 'feature' into main	2023-04-07 19:31:10 +08:00
wanglin2	9cb35eac29	更新文档	2023-04-07 19:30:52 +08:00
wanglin2	6ff63d9d56	Merge branch 'feature' into main	2023-04-07 15:56:14 +08:00
wanglin2	43539df25b	修改文档	2023-04-07 15:55:55 +08:00
wanglin2	cbafc24670	Merge branch 'feature' into main	2023-04-07 08:56:44 +08:00
wanglin2	cc83a18b18	打包0.5.3	2023-04-07 08:55:55 +08:00
wanglin2	5ae931da92	更新文档	2023-04-07 08:53:05 +08:00
wanglin2	853b999a7d	Feature：支持设置初始中心节点的位置	2023-04-07 08:42:27 +08:00
wanglin2	505622f3dc	Fix：修复富文本模式下选择了多个节点时修改样式时意外修改文本的问题	2023-04-06 20:14:54 +08:00
wanglin2	0a5b41e3e0	更新群二维码	2023-04-06 08:47:31 +08:00
wanglin2	8630c47b26	Merge branch 'feature' into main	2023-04-06 08:46:54 +08:00
wanglin2	6105fd6e3d	打包0.5.2，去除导出json数据中的uid字段	2023-04-06 08:45:43 +08:00
wanglin2	d7b1c4e4fe	优化:重新渲染时清空节点池	2023-04-05 21:22:39 +08:00
wanglin2	6ccafaa771	Merge branch 'feature' into main	2023-04-05 16:47:06 +08:00
wanglin2	6b15e469a2	打包0.5.1	2023-04-05 16:45:06 +08:00
wanglin2	5675e29df3	更新文档	2023-04-05 16:40:29 +08:00
wanglin2	52d094a7c7	Demo:窗口大小改变后修改画布大小	2023-04-05 09:55:39 +08:00
wanglin2	633ed68f92	Demo:导入数据后复位画布变换效果,解决导入后新节点在画布外的问题	2023-04-05 08:49:36 +08:00
wanglin2	388594e29a	Fix:修复快速操作时节点位置不正确的问题	2023-04-05 08:45:23 +08:00
wanglin2	af148fef27	Demo:修复在大纲内添加新节点时节点错乱的问题	2023-04-04 22:54:24 +08:00
wanglin2	983e55bd1d	优化:只有当鼠标在画布内才响应快捷键	2023-04-04 22:53:38 +08:00
wanglin2	69dab99bf7	Merge branch 'feature' into main	2023-04-02 21:27:24 +08:00
wanglin2	c94f459ff9	打包0.5.0	2023-04-02 21:12:44 +08:00
wanglin2	cd3baf411b	更新文档	2023-04-02 21:08:55 +08:00
wanglin2	042911371c	优化节点拖拽移动逻辑	2023-04-02 11:21:35 +08:00
wanglin2	8e2fb72309	优化:收起所有节点后回到中心位置	2023-04-01 17:30:29 +08:00
wanglin2	77aacccdad	FIX:setData后触发历史数据记录	2023-04-01 09:30:38 +08:00
wanglin2	5413c867e3	FEATURE:支持自定义展开收起按钮的颜色和图标	2023-04-01 09:19:51 +08:00
wanglin2	4fc7eb084e	demo:优化工具栏的位置	2023-04-01 08:26:53 +08:00
wanglin2	a9b04312d8	移除重复的事件绑定	2023-03-31 22:30:06 +08:00
wanglin2	4cd9b66653	阻止短时间多次触发渲染	2023-03-31 22:25:34 +08:00
wanglin2	9b7b41597f	Merge branch 'main' of https://github.com/wanglin2/mind-map into main	2023-03-31 14:39:30 +08:00
wanglin2	e56ff8fdf2	更新群二维码	2023-03-31 14:39:09 +08:00
wanglin2	8d9299aed7	优化和修复节点编辑的一些体验和问题	2023-03-31 14:37:32 +08:00
wanglin2	f8506cb75b	优化设置主题、前进回退等操作的性能问题	2023-03-31 14:36:08 +08:00
wanglin2	c90ee9e892	优化设置主题	2023-03-31 14:34:56 +08:00
wanglin2	4d21b84882	一些小调整	2023-03-31 14:32:43 +08:00
wanglin2	331f0bdf97	优化展开收起按钮的逻辑	2023-03-30 16:12:46 +08:00
wanglin2	0a4898697d	优化：提取代码中的常量	2023-03-30 14:36:30 +08:00
wanglin2	79ae08fc9a	1.修改主题不再完全重新渲染；2.重构Node类核心逻辑；3.Shape类不再直接添加节点，而是返回节点	2023-03-30 14:16:47 +08:00
wanglin2	1795773af9	Break change：节点激活样式只能修改形状相关样式	2023-03-28 20:01:52 +08:00
wanglin2	747a781ad8	删除注释后的空行	2023-03-28 19:35:57 +08:00
wanglin2	fcfcb1c3d1	优化：getSize以后不需要调用renderNode方法，直接layout即可	2023-03-28 19:30:13 +08:00
wanglin2	d412ae8cce	优化：节点实例、样式实例不再保存主题配置，直接从mindMap实例上获取	2023-03-28 19:15:47 +08:00
wanglin2	d834b76d42	FIX：修复创建节点时重复的函数调用，优化性能	2023-03-27 09:11:15 +08:00
wanglin2	3f9da8940f	打包0.4.7	2023-03-24 21:05:12 +08:00
wanglin2	26d5f69af2	Doc：更新文档	2023-03-24 15:26:44 +08:00
wanglin2	6efe4a3fd6	Feature：1.支持配置插入节点时的初始文字；2.优化历史记录添加逻辑；3.节点插入和删除命令支持传入指定节点和初始节点数据	2023-03-24 15:26:24 +08:00
wanglin2	2b4ab4a322	Fix：修复从富文本模式切换到非富文本模式时没有触发数据更新和历史记录的问题	2023-03-24 11:34:09 +08:00
wanglin2	cca42d1f89	Fix：修复从富文本模式切换到非富文本模式时	2023-03-24 11:33:17 +08:00
wanglin2	724fef87b1	Doc：更新文档	2023-03-24 11:22:18 +08:00
wanglin2	d50c0e4cd5	优化：1.节点激活状态切换不再触发历史记录；2.短时间多次触发历史记录只会添加最后一次的数据	2023-03-24 11:22:05 +08:00
wanglin2	c18c037642	Doc：更新文档	2023-03-24 10:31:21 +08:00
wanglin2	cda1da5fd0	Demo：Feature：支持导入和导出为markdown格式，优化导出弹窗视觉	2023-03-24 10:30:53 +08:00
wanglin2	eba1aa3a37	Demo：增加图标	2023-03-24 10:28:35 +08:00
wanglin2	81018bb615	Fix：修复富文本编辑模式下当没有富文本节点时无法导出为图片的问题	2023-03-24 10:27:13 +08:00
wanglin2	5fa0ff7b5c	Feature：支持导入和导出为markdown格式文件	2023-03-24 10:13:24 +08:00
wanglin2	cabe286ebb	优化：富文本编辑时默认不再全选；使用节点填充色作为编辑时的背景色	2023-03-23 09:39:00 +08:00
wanglin2	e337da088b	打包0.4.6	2023-03-22 15:14:50 +08:00
wanglin2	de97ea9e75	兼容0.4.5版本的关联线	2023-03-22 14:40:07 +08:00
wanglin2	cc331065eb	修改文档	2023-03-22 13:49:47 +08:00
wanglin2	9a8e630654	Feature：支持调整关联线的控制点	2023-03-22 13:49:34 +08:00
wanglin2	17ab977efb	优化关联线的点击逻辑	2023-03-22 13:42:31 +08:00
wanglin2	6bd10d9451	1.demo：大纲支持点击后定位节点，支持添加节点；2.完善问题	2023-03-21 09:35:34 +08:00
wanglin2	5313b9b69c	1.优化重复的历史数据；2.修复节点编辑时的方向键冲突；3.修复拖拽节点的id丢失问题	2023-03-21 09:34:47 +08:00
wanglin2	8dcfdcc44a	更新二维码	2023-03-20 09:26:46 +08:00
wanglin2	67422df3ff	打包0.4.5	2023-03-18 21:54:20 +08:00
wanglin2	2ad7536eb7	优化关联线逻辑	2023-03-18 21:51:02 +08:00
wanglin2	6f56e5c4e6	完善文档	2023-03-17 23:06:14 +08:00
wanglin2	5ae8ebe590	Feature:1.优化关联线创建,2.支持按住ctrl键多选和取消多选节点	2023-03-17 23:00:25 +08:00
wanglin2	6ecb97e4e5	Feature：按住根节点也可以拖动画布	2023-03-17 17:03:56 +08:00
wanglin2	c8f938dd3e	Fix：修复创建关联线时节点激活状态未清除的问题	2023-03-17 16:57:30 +08:00
wanglin2	0d29e29162	完善文档	2023-03-17 16:24:22 +08:00
wanglin2	be1b3dffce	demo支持关联线功能	2023-03-17 15:39:07 +08:00
wanglin2	3ba2dbe415	Feature：新增关联线功能	2023-03-17 15:38:38 +08:00
wanglin2	19a96c92a9	新增图标	2023-03-17 14:43:23 +08:00
wanglin2	c265e3e437	打包0.4.4	2023-03-14 09:45:27 +08:00
wanglin2	7434ac2648	Feature：支持响应鼠标的横向滚动	2023-03-08 16:04:26 +08:00
wanglin2	63d73a73aa	打包0.4.3	2023-03-08 09:43:11 +08:00
wanglin2	00f9258a4d	更新文档	2023-03-08 09:39:05 +08:00
wanglin2	7087b43d39	Fix：修复前进后退没有触发data_change事件的问题；Feature：鼠标滚轮事件支持自定义	2023-03-08 09:38:46 +08:00
wanglin2	945a78b7b1	去除docs目录，更新群二维码	2023-03-06 14:26:02 +08:00
wanglin2	55acc19ab8	打包0.4.2	2023-03-01 09:24:51 +08:00
wanglin2	410f0be05e	Fetaure：Node类的setText方法增加第二个参数，以支持设置富文本内容	2023-03-01 09:17:45 +08:00
wanglin2	2d7c091071	打包0.4.1	2023-02-27 15:31:52 +08:00
wanglin2	9bf58a54ce	Feature：节点富文本编辑支持清除文字样式	2023-02-27 15:19:56 +08:00
wanglin2	231adeea44	Feature：富文本支持设置背景颜色	2023-02-27 14:58:01 +08:00
wanglin2	0ea618af39	Fix:1.Mac系统触控板缩放方向相反的问题;2.设备像素比不为1时导出图片中富文本节点尺寸变大的问题.Feater:节点抛出鼠标移入和移出事件	2023-02-26 10:07:03 +08:00
wanglin2	f66297ff99	打包0.4.0	2023-02-25 10:11:16 +08:00
wanglin2	3113bf2e1f	完善文档	2023-02-24 17:14:48 +08:00
wanglin2	8c114dac02	Feature：支持节点富文本编辑	2023-02-24 17:14:24 +08:00
wanglin2	06dba79272	新增图标	2023-02-24 17:13:07 +08:00
wanglin2	8441986ca7	修改文档	2023-02-20 19:25:59 +08:00
wanglin2	c8b50908e1	Fix：修复底边风格的情况下，节点高度过高会和其他节点重叠的问题	2023-02-20 15:10:27 +08:00
wanglin2	7e11fde892	打包0.3.4	2023-02-20 11:30:15 +08:00
wanglin2	3d9f3bd7a8	Fix：修复批量删除的节点中如果存在根节点会出现删除异常的问题	2023-02-20 11:26:26 +08:00
wanglin2	46e11649b0	优化节点文本编辑	2023-02-20 11:02:04 +08:00
wanglin2	161ef7590c	feature：节点文本增加自动换行功能	2023-02-20 10:14:34 +08:00
wanglin2	ca660a3c74	打包0.3.3	2023-02-14 09:38:38 +08:00
wanglin2	7a24872331	Fix：修复根节点无法黄的问题	2023-02-14 09:35:56 +08:00
wanglin2	eb4ea9fb3a	打包0.3.2	2023-02-03 11:13:58 +08:00
wanglin2	64228c02ff	修复当思维导图实际内容大于屏幕宽高时，导出的时候超出的部分没有绘制水印的问题	2023-02-03 11:09:43 +08:00
wanglin2	f184a5d948	修复二级节点拖拽到其他节点或其他节点拖拽到二级节点时节点样式没有更新的问题	2023-02-03 10:40:06 +08:00
wanglin2	0bf5b2d6f7	打包0.3.1	2023-02-01 16:30:29 +08:00
wanglin2	74a52ea386	导出d的图片支持background-size/position/repeat属性效果	2023-02-01 16:25:57 +08:00
wanglin2	9914eef5b9	修改文档	2023-01-31 15:06:24 +08:00
wanglin2	f547f741f2	1.修复删除背景图片不生效的问题；2.背景图片展示增加位置和大小设置;3.修复节点拖拽到根节点时连接线跑到根节点上方的问题	2023-01-31 15:04:38 +08:00
wanglin2	c26149fa42	修复demo设置了水印页面刷新后生效的问题	2023-01-31 13:35:46 +08:00
wanglin2	b2aa3648eb	支持当修改文档后自动重新编译生成vue组件	2023-01-31 11:15:34 +08:00
wanglin2	b997604ab2	打包0.3.0	2023-01-17 17:39:37 +08:00
wanglin2	c6929b82ad	插件化架构基本升级完成	2023-01-17 16:53:28 +08:00
wanglin2	b40da53aef	只读模式下禁止添加历史记录、禁止响应前进后退操作	2023-01-17 15:49:23 +08:00
wanglin2	1e5dfd97e1	提取多选节点Select类作为插件	2023-01-17 15:26:35 +08:00
wanglin2	97bcc22abd	提取导出类作为插件	2023-01-17 15:21:02 +08:00
wanglin2	bd655839cb	提取出键盘导航类作为插件	2023-01-17 14:39:43 +08:00
wanglin2	a53a4e8e1d	提取拖拽类Drag作为插件	2023-01-17 14:30:13 +08:00
wanglin2	eb01646747	提取水印类作为插件	2023-01-17 14:11:07 +08:00
wanglin2	d27eee0fae	开始进行插件化转换，即提取非核心的类作为插件，不再内置；抽取出校地图类插件	2023-01-17 13:56:57 +08:00
wanglin2	92ee241ed8	将xmind解析方法从MindMap类上移除，改为按需引入方式使用	2023-01-17 11:19:59 +08:00
wanglin2	660906e4c5	【春节快乐】修改文档	2023-01-17 10:55:28 +08:00
wanglin2	971f0d3446	打包0.2.24	2023-01-17 09:24:33 +08:00
wanglin2	63eccede7f	完成水印功能、新增水印文档	2023-01-17 09:20:37 +08:00
wanglin2	5bd6adb488	节点自由拖拽支持配置是否开启	2023-01-14 16:26:51 +08:00
wanglin2	fbdc5e0f39	完善文档	2023-01-14 14:44:53 +08:00
wanglin2	5e994322fe	全新文档	2023-01-14 11:33:05 +08:00
wanglin2	fd0a594b56	打包0.2.23	2023-01-12 15:50:10 +08:00
wanglin2	d7b93ba0a0	新增支持注册新主题	2023-01-12 15:45:41 +08:00
wanglin2	c14fb5ad9d	修改文档	2023-01-12 09:07:10 +08:00
wanglin2	4d82dfdf9e	修复文档错误	2023-01-11 18:01:56 +08:00
wanglin2	7d3f08bed0	去除文档中的当前版本信息	2023-01-11 16:59:52 +08:00
wanglin2	60597616ec	取消内置在simple-mind-map包内的主题和结构图片	2023-01-11 16:55:44 +08:00
wanglin2	6d758a988c	打包	2023-01-11 14:23:27 +08:00
wanglin2	503506dfd4	区分全屏查看和全屏编辑	2023-01-11 14:12:42 +08:00
wanglin2	df32655321	文档新增changelog	2023-01-11 10:25:24 +08:00
wanglin2	1c7edf47e3	文档新增常见错误解决方案	2023-01-11 09:21:50 +08:00
wanglin2	4f5f9543f7	上传package-lock.json文件	2023-01-11 09:16:45 +08:00
wanglin2	0d3c1b7417	优化注释，去掉冗余信息	2023-01-10 11:08:55 +08:00
街角小林	e634fee753	Merge pull request #56 from emircanerkul/main Readme Translation	2023-01-10 10:05:23 +08:00
Emircan ERKUL	81c17dc643	Merge branch 'main' of github.com:emircanerkul/mind-map	2023-01-09 13:53:40 +03:00
Emircan ERKUL	cb106c7fac	translate readme documentation	2023-01-09 13:48:36 +03:00
wanglin2	5a9189b7fe	修改文档	2023-01-09 14:36:30 +08:00
wanglin2	160ed0d0e4	修改文档	2023-01-05 17:12:50 +08:00
wanglin25	ed92286178	打包	2023-01-05 16:16:39 +08:00
wanglin25	a837a6fb64	新增支持节点横线风格	2023-01-05 16:12:31 +08:00