打包0.9.6

Doc: update
Fix：修复添加了数学公式的节点，切换主题时文本样式没有改变的问题
2026-02-19 23:08:32 +08:00 · 2024-01-26 11:33:26 +08:00 · 2024-01-26 11:19:27 +08:00 · 2024-01-26 11:09:17 +08:00 · 2024-01-26 09:44:09 +08:00 · 2024-01-26 09:43:17 +08:00
99 changed files with 1910 additions and 28465 deletions
--- a/README.md
+++ b/README.md
@@ -2,12 +2,12 @@

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

-> 一个简单&强大的 Web 思维导图
+> 中文名：思绪思维导图。一个简单&强大的 Web 思维导图。

 本项目包含两部分：

@@ -27,8 +27,6 @@ Github：[releases](https://github.com/wanglin2/mind-map/releases)。

 > 客户端版本会落后于在线版本，尝试最新功能请优先使用在线版。

-> 如果访问 github 比较慢，可以使用【更新可能会滞后】：http://lxqnsys.com/simple-mind-map/#/index
-
 # 特性

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

 [MIT](./LICENSE)

+保留`mind-map`版权声明的情况下可随意商用。
+
 # 微信交流群

 群聊人数较多，无法通过二维码入群，可以微信添加`wanglinguanfang`拉你入群。
@@ -260,4 +260,16 @@ const mindMap = new MindMap({
        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
        <span>建明</span>
    </span>
+    <span>
+        <img src="./web/src/assets/avatar/汪津合.jpg" style="width: 50px;height: 50px;" />
+        <span>汪津合</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>博文</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/慕智打印-兰兰.jpg" style="width: 50px;height: 50px;" />
+        <span>慕智打印-兰兰</span>
+    </span>
 </p>
--- a/dist/css/chunk-1fafd80f.css
+++ b/dist/css/chunk-1fafd80f.css
--- a/dist/img/classic6.jpg
+++ b/dist/img/classic6.jpg
--- a/dist/img/classic7.jpg
+++ b/dist/img/classic7.jpg
--- a/dist/img/慕智打印-兰兰.jpg
+++ b/dist/img/慕智打印-兰兰.jpg
--- a/dist/img/手绘风格.png
+++ b/dist/img/手绘风格.png
--- a/dist/img/汪津合.jpg
+++ b/dist/img/汪津合.jpg
--- a/dist/js/app.js
+++ b/dist/js/app.js
--- a/dist/js/chunk-02258ed0.js
+++ b/dist/js/chunk-02258ed0.js
--- a/dist/js/chunk-1c3bec15.js
+++ b/dist/js/chunk-1c3bec15.js
--- a/dist/js/chunk-1fafd80f.js
+++ b/dist/js/chunk-1fafd80f.js
--- a/dist/js/chunk-2d0d9fbc.js
+++ b/dist/js/chunk-2d0d9fbc.js
--- a/dist/js/chunk-2d0dad5f.js
+++ b/dist/js/chunk-2d0dad5f.js
--- a/dist/js/chunk-2d0e2326.js
+++ b/dist/js/chunk-2d0e2326.js
--- a/dist/js/chunk-2d0f026c.js
+++ b/dist/js/chunk-2d0f026c.js
--- a/dist/js/chunk-2d208ffa.js
+++ b/dist/js/chunk-2d208ffa.js
--- a/dist/js/chunk-2d20f68f.js
+++ b/dist/js/chunk-2d20f68f.js
--- a/dist/js/chunk-68ef25b7.js
+++ b/dist/js/chunk-68ef25b7.js
--- a/dist/js/chunk-72f53a83.js
+++ b/dist/js/chunk-72f53a83.js
--- a/dist/js/chunk-792bedf8.js
+++ b/dist/js/chunk-792bedf8.js
--- a/dist/js/chunk-9d289278.js
+++ b/dist/js/chunk-9d289278.js
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!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,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径
      window.externalPublicPath = './dist/'
      // 接管应用
-      window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?f0979c57ec2369021c42" rel="stylesheet"><link href="dist/css/app.css?f0979c57ec2369021c42" 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>const getDataFromBackend = () => {
+      window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?ce6307fb704926e49985" rel="stylesheet"><link href="dist/css/app.css?ce6307fb704926e49985" 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>const getDataFromBackend = () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
@@ -66,4 +66,4 @@
        // 可以通过window.$bus.$on()来监听应用的一些事件
        // 实例化页面
        window.initApp()
-      }</script><script src="dist/js/chunk-vendors.js?f0979c57ec2369021c42"></script><script src="dist/js/app.js?f0979c57ec2369021c42"></script></body></html>
+      }</script><script src="dist/js/chunk-vendors.js?ce6307fb704926e49985"></script><script src="dist/js/app.js?ce6307fb704926e49985"></script></body></html>
--- a/simple-mind-map/full.js
+++ b/simple-mind-map/full.js
@@ -28,7 +28,7 @@ MindMap.iconList = icons.nodeIconList
 MindMap.constants = constants
 MindMap.themes = themes
 MindMap.defaultTheme = defaultTheme
-MindMap.version = '0.9.4'
+MindMap.version = '0.9.6'

 MindMap.usePlugin(MiniMap)
  .usePlugin(Watermark)
--- a/simple-mind-map/package-lock.json
+++ b/simple-mind-map/package-lock.json
@@ -1,11 +1,11 @@
 {
  "name": "simple-mind-map",
-  "version": "0.9.2",
+  "version": "0.9.4",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
-      "version": "0.9.2",
+      "version": "0.9.4",
      "license": "MIT",
      "dependencies": {
        "@svgdotjs/svg.js": "^3.0.16",
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.9.4",
+  "version": "0.9.6",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/simple-mind-map/src/constants/defaultOptions.js
+++ b/simple-mind-map/src/constants/defaultOptions.js
@@ -40,7 +40,7 @@ export const defaultOpt = {
  enableFreeDrag: false,
  // 水印配置
  watermarkConfig: {
-    onlyExport: false,// 是否仅在导出时添加水印
+    onlyExport: false, // 是否仅在导出时添加水印
    text: '',
    lineSpacing: 100,
    textSpacing: 100,
@@ -256,5 +256,24 @@ export const defaultOpt = {
      }
    }
  */
-  handleNodePasteImg: null
+  handleNodePasteImg: null,
+  // 默认情况下，新创建的关联线两个端点的位置是根据两个节点中心点的相对位置来计算的，如果你想固定位置，可以通过这个属性来配置
+  // from和to都不传，则都自动计算，如果只传一个，另一个则会自动计算
+  associativeLineInitPointsPosition: {
+    // from和to可选值：left、top、bottom、right
+    from: '', // 关联线起始节点上端点的位置
+    to: '' // 关联线目标节点上端点的位置
+  },
+  // 是否允许调整关联线两个端点的位置
+  enableAdjustAssociativeLinePoints: true,
+  // 自定义创建节点形状的方法，可以传一个函数，均接收一个参数
+  // 矩形、圆角矩形、椭圆、圆等形状会调用该方法
+  // 接收svg path字符串，返回svg节点
+  customCreateNodePath: null,
+  // 菱形、平行四边形、八角矩形、外三角矩形、内三角矩形等形状会调用该方法
+  // 接收points数组点位，返回svg节点
+  customCreateNodePolygon: null,
+  // 自定义转换节点连线路径的方法
+  // 接收svg path字符串，返回转换后的svg path字符串
+  customTransformNodeLinePath: null
 }
--- a/simple-mind-map/src/core/render/Render.js
+++ b/simple-mind-map/src/core/render/Render.js
@@ -180,6 +180,9 @@ class Render {
    // 下移节点
    this.downNode = this.downNode.bind(this)
    this.mindMap.command.add('DOWN_NODE', this.downNode)
+    //  将一个节点上移一个层级
+    this.moveUpOneLevel = this.moveUpOneLevel.bind(this)
+    this.mindMap.command.add('MOVE_UP_ONE_LEVEL', this.moveUpOneLevel)
    // 移动节点
    this.insertAfter = this.insertAfter.bind(this)
    this.mindMap.command.add('INSERT_AFTER', this.insertAfter)
@@ -397,6 +400,10 @@ class Render {

  //   渲染
  render(callback = () => {}, source) {
+    // 切换主题时，被收起的节点需要添加样式复位的标注
+    if (source === CONSTANTS.CHANGE_THEME) {
+      this.resetUnExpandNodeStyle()
+    }
    // 如果当前还没有渲染完毕，不再触发渲染
    if (this.isRendering) {
      // 等待当前渲染完毕后再进行一次渲染
@@ -439,6 +446,7 @@ class Render {
          this.waitRenderingParams = []
          this.render(...params)
        } else {
+          this.renderSource = ''
          if (this.reRender) {
            this.reRender = false
          }
@@ -455,6 +463,18 @@ class Render {
    this.emitNodeActiveEvent()
  }

+  // 给当前被收起来的节点数据添加文本复位标志
+  resetUnExpandNodeStyle() {
+    walk(this.renderTree, null, node => {
+      if (!node.data.expand) {
+        walk(node, null, node2 => {
+          node2.data.resetRichText = true
+        })
+        return true
+      }
+    })
+  }
+
  //  清除当前所有激活节点，并会触发事件
  clearActiveNode() {
    if (this.activeNodeList.length <= 0) {
@@ -874,6 +894,22 @@ class Render {
    this.mindMap.render()
  }

+  // 将节点上移一个层级，多个节点只会操作第一个节点
+  moveUpOneLevel(node) {
+    node = node || this.activeNodeList[0]
+    if (!node || node.isRoot || node.layerIndex <= 1) {
+      return
+    }
+    const parent = node.parent
+    const grandpa = parent.parent
+    const index = getNodeIndexInNodeList(node, parent.children)
+    const parentIndex = getNodeIndexInNodeList(parent, grandpa.children)
+    // 节点数据
+    parent.nodeData.children.splice(index, 1)
+    grandpa.nodeData.children.splice(parentIndex + 1, 0, node.nodeData)
+    this.mindMap.render()
+  }
+
  // 复制节点
  copy() {
    this.beingCopyData = this.copyNode()
--- a/simple-mind-map/src/core/render/node/Shape.js
+++ b/simple-mind-map/src/core/render/node/Shape.js
@@ -1,10 +1,11 @@
-import { Rect, Polygon, Path } from '@svgdotjs/svg.js'
+import { Polygon, Path, SVG } from '@svgdotjs/svg.js'
 import { CONSTANTS } from '../../../constants/constant'

 //  节点形状类
 export default class Shape {
  constructor(node) {
    this.node = node
+    this.mindMap = node.mindMap
  }

  //  形状需要的padding
@@ -106,11 +107,29 @@ export default class Shape {
    }
  }

+  // 创建路径节点
+  createPath(pathStr) {
+    const { customCreateNodePath } = this.mindMap.opt
+    if (customCreateNodePath) {
+      return SVG(customCreateNodePath(pathStr))
+    }
+    return new Path().plot(pathStr)
+  }
+
+  // 创建多边形节点
+  createPolygon(points) {
+    const { customCreateNodePolygon } = this.mindMap.opt
+    if (customCreateNodePolygon) {
+      return SVG(customCreateNodePolygon(points))
+    }
+    return new Polygon().plot(points)
+  }
+
  // 创建矩形
  createRect() {
    let { width, height } = this.getNodeSize()
    let borderRadius = this.node.style.merge('borderRadius')
-    return new Path().plot(`
+    const pathStr = `
      M${borderRadius},0
      L${width - borderRadius},0
      C${width - borderRadius},0 ${width},${0} ${width},${borderRadius}
@@ -123,7 +142,8 @@ export default class Shape {
      L${0},${borderRadius}
      C${0},${borderRadius} ${0},${0} ${borderRadius},${0}
      Z
-    `)
+    `
+    return this.createPath(pathStr)
  }

  //  创建菱形
@@ -139,12 +159,13 @@ export default class Shape {
    let bottomY = height
    let leftX = 0
    let leftY = halfHeight
-    return new Polygon().plot([
+    const points = [
      [topX, topY],
      [rightX, rightY],
      [bottomX, bottomY],
      [leftX, leftY]
-    ])
+    ]
+    return this.createPolygon(points)
  }

  //  创建平行四边形
@@ -152,32 +173,34 @@ export default class Shape {
    let { paddingX } = this.node.getPaddingVale()
    paddingX = paddingX || this.node.shapePadding.paddingX
    let { width, height } = this.getNodeSize()
-    return new Polygon().plot([
+    const points = [
      [paddingX, 0],
      [width, 0],
      [width - paddingX, height],
      [0, height]
-    ])
+    ]
+    return this.createPolygon(points)
  }

  //  创建圆角矩形
  createRoundedRectangle() {
    let { width, height } = this.getNodeSize()
    let halfHeight = height / 2
-    return new Path().plot(`
+    const pathStr = `
      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 this.createPath(pathStr)
  }

  //  创建八角矩形
  createOctagonalRectangle() {
    let w = 5
    let { width, height } = this.getNodeSize()
-    return new Polygon().plot([
+    const points = [
      [0, w],
      [w, 0],
      [width - w, 0],
@@ -186,7 +209,8 @@ export default class Shape {
      [width - w, height],
      [w, height],
      [0, height - w]
-    ])
+    ]
+    return this.createPolygon(points)
  }

  //  创建外三角矩形
@@ -194,14 +218,15 @@ export default class Shape {
    let { paddingX } = this.node.getPaddingVale()
    paddingX = paddingX || this.node.shapePadding.paddingX
    let { width, height } = this.getNodeSize()
-    return new Polygon().plot([
+    const points = [
      [paddingX, 0],
      [width - paddingX, 0],
      [width, height / 2],
      [width - paddingX, height],
      [paddingX, height],
      [0, height / 2]
-    ])
+    ]
+    return this.createPolygon(points)
  }

  //  创建内三角矩形
@@ -209,14 +234,15 @@ export default class Shape {
    let { paddingX } = this.node.getPaddingVale()
    paddingX = paddingX || this.node.shapePadding.paddingX
    let { width, height } = this.getNodeSize()
-    return new Polygon().plot([
+    const points = [
      [0, 0],
      [width, 0],
      [width - paddingX / 2, height / 2],
      [width, height],
      [0, height],
      [paddingX / 2, height / 2]
-    ])
+    ]
+    return this.createPolygon(points)
  }

  //  创建椭圆
@@ -224,12 +250,13 @@ export default class Shape {
    let { width, height } = this.getNodeSize()
    let halfWidth = width / 2
    let halfHeight = height / 2
-    return new Path().plot(`
+    const pathStr = `
      M${halfWidth},0
      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
      M${halfWidth},${height} 
      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
-    `)
+    `
+    return this.createPath(pathStr)
  }

  //  创建圆
@@ -237,12 +264,13 @@ export default class Shape {
    let { width, height } = this.getNodeSize()
    let halfWidth = width / 2
    let halfHeight = height / 2
-    return new Path().plot(`
+    const pathStr = `
      M${halfWidth},0
      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
      M${halfWidth},${height} 
      A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
-    `)
+    `
+    return this.createPath(pathStr)
  }
 }

--- a/simple-mind-map/src/core/render/node/Style.js
+++ b/simple-mind-map/src/core/render/node/Style.js
@@ -220,9 +220,14 @@ class Style {
          childNodeStyle._marker || childNodeStyle.createMarker()
        // 设置样式
        childNodeStyle._markerPath.stroke({ color }).fill({ color })
-        line.marker('end', childNodeStyle._marker)
+        // 箭头位置可能会发生改变，所以需要先删除
+        line.attr('marker-start', '')
+        line.attr('marker-end', '')
+        const dir = childNodeStyle.merge('lineMarkerDir')
+        line.marker(dir, childNodeStyle._marker)
      } else if (childNodeStyle._marker) {
        // 不显示箭头，则删除该子节点的箭头标记
+        line.attr('marker-start', '')
        line.attr('marker-end', '')
        childNodeStyle._marker.remove()
        childNodeStyle._marker = null
--- a/simple-mind-map/src/core/render/node/nodeCreateContents.js
+++ b/simple-mind-map/src/core/render/node/nodeCreateContents.js
@@ -186,6 +186,9 @@ function createTextNode() {
  if (this.getData('richText')) {
    return this.createRichTextNode()
  }
+  if (this.getData('resetRichText')) {
+    delete this.nodeData.data.resetRichText
+  }
  let g = new G()
  let fontSize = this.getStyle('fontSize', false)
  let lineHeight = this.getStyle('lineHeight', false)
--- a/simple-mind-map/src/core/render/node/nodeGeneralization.js
+++ b/simple-mind-map/src/core/render/node/nodeGeneralization.js
@@ -104,7 +104,7 @@ function renderGeneralization() {

 // 更新节点概要数据
 function updateGeneralizationData() {
-  const childrenLength = this.children.length
+  const childrenLength = this.nodeData.children.length
  const list = this.formatGetGeneralization()
  const newList = []
  list.forEach(item => {
--- a/simple-mind-map/src/core/view/View.js
+++ b/simple-mind-map/src/core/view/View.js
@@ -106,7 +106,7 @@ class View {
        }
      } else {
        // 2.鼠标滚轮事件控制画布移动
-        const step = isTouchPad ? 5 : mousewheelMoveStep
+        const step = isTouchPad ? 10 : mousewheelMoveStep
        let mx = 0
        let my = 0
        // 上移
--- a/simple-mind-map/src/layouts/Base.js
+++ b/simple-mind-map/src/layouts/Base.js
@@ -85,8 +85,12 @@ class Base {
      newNode.layerIndex = layerIndex
      this.cacheNode(data._node.uid, newNode)
      this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
-      // 主题或主题配置改变了需要重新计算节点大小和布局
-      if (this.checkIsNeedResizeSources() || isLayerTypeChange) {
+      // 主题或主题配置改变了、节点层级改变了，需要重新渲染节点文本等情况需要重新计算节点大小和布局
+      if (
+        this.checkIsNeedResizeSources() ||
+        isLayerTypeChange ||
+        newNode.getData('resetRichText')
+      ) {
        newNode.getSize()
        newNode.needLayout = true
      }
@@ -113,9 +117,14 @@ class Base {
      data._node = newNode
      // 主题或主题配置改变了需要重新计算节点大小和布局
      const isResizeSource = this.checkIsNeedResizeSources()
-      // 节点数据改变了需要重新计算节点大小和布局
+      // 主题或主题配置改变了、节点层级改变了，需要重新渲染节点文本，节点数据改变了等情况需要重新计算节点大小和布局
      const isNodeDataChange = lastData !== JSON.stringify(data.data)
-      if (isResizeSource || isNodeDataChange || isLayerTypeChange) {
+      if (
+        isResizeSource ||
+        isNodeDataChange ||
+        isLayerTypeChange ||
+        newNode.getData('resetRichText')
+      ) {
        newNode.getSize()
        newNode.needLayout = true
      }
@@ -505,9 +514,19 @@ class Base {

  // 设置连线样式
  setLineStyle(style, line, path, childNode) {
-    line.plot(path)
+    line.plot(this.transformPath(path))
    style && style(line, childNode, true)
  }
+
+  // 转换路径，可以转换成特殊风格的线条样式
+  transformPath(path) {
+    const { customTransformNodeLinePath } = this.mindMap.opt
+    if (customTransformNodeLinePath) {
+      return customTransformNodeLinePath(path)
+    } else {
+      return path
+    }
+  }
 }

 export default Base
--- a/simple-mind-map/src/layouts/CatalogOrganization.js
+++ b/simple-mind-map/src/layouts/CatalogOrganization.js
@@ -240,14 +240,14 @@ class CatalogOrganization extends Base {
      // 父节点的竖线
      let line1 = this.lineDraw.path()
      node.style.line(line1)
-      line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
+      line1.plot(this.transformPath(`M ${x1},${y1} L ${x1},${y1 + s1}`))
      node._lines.push(line1)
      style && style(line1, node)
      // 水平线
      if (len > 0) {
        let lin2 = this.lineDraw.path()
        node.style.line(lin2)
-        lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
+        lin2.plot(this.transformPath(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`))
        node._lines.push(lin2)
        style && style(lin2, node)
      }
@@ -311,7 +311,9 @@ class CatalogOrganization extends Base {
        if (maxy < y1 + expandBtnSize) {
          lin2.hide()
        } else {
-          lin2.plot(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
+          lin2.plot(
+            this.transformPath(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
+          )
          lin2.show()
        }
        node._lines.push(lin2)
@@ -349,7 +351,7 @@ class CatalogOrganization extends Base {
      let cx = x1 + 20
      let cy = y1 + (y2 - y1) / 2
      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-      item.generalizationLine.plot(path)
+      item.generalizationLine.plot(this.transformPath(path))
      item.generalizationNode.left = right + generalizationNodeMargin
      item.generalizationNode.top =
        top + (bottom - top - item.generalizationNode.height) / 2
--- a/simple-mind-map/src/layouts/Fishbone.js
+++ b/simple-mind-map/src/layouts/Fishbone.js
@@ -253,15 +253,19 @@ class Fishbone extends Base {
        let line = this.lineDraw.path()
        if (this.checkIsTop(item)) {
          line.plot(
-            `M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${
-              item.left
-            },${item.top + item.height}`
+            this.transformPath(
+              `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
-            }`
+            this.transformPath(
+              `M ${nodeLineX - offsetX},${item.top - offset} L ${nodeLineX},${
+                item.top
+              }`
+            )
          )
        }
        node.style.line(line)
@@ -273,9 +277,11 @@ class Fishbone extends Base {
      let offset = node.height / 2 + this.getMarginY(node.layerIndex + 1)
      let line = this.lineDraw.path()
      line.plot(
-        `M ${node.left + node.width},${nodeHalfTop} L ${
-          maxx - offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
-        },${nodeHalfTop}`
+        this.transformPath(
+          `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)
@@ -372,7 +378,7 @@ class Fishbone extends Base {
      let cx = x1 + 20
      let cy = y1 + (y2 - y1) / 2
      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-      item.generalizationLine.plot(path)
+      item.generalizationLine.plot(this.transformPath(path))
      item.generalizationNode.left = right + generalizationNodeMargin
      item.generalizationNode.top =
        top + (bottom - top - item.generalizationNode.height) / 2
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -197,10 +197,12 @@ class LogicalStructure extends Base {
    if (!this.mindMap.opt.alwaysShowExpandBtn) {
      expandBtnSize = 0
    }
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    const { nodeUseLineStyle } = this.mindMap.themeConfig
    node.children.forEach((item, index) => {
-      let x1 =
-        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+      if (node.layerIndex === 0) {
+        expandBtnSize = 0
+      }
+      let x1 = left + width + expandBtnSize
      let y1 = top + height / 2
      let x2 = item.left
      let y2 = item.top + item.height / 2
@@ -224,10 +226,19 @@ class LogicalStructure extends Base {
    if (!this.mindMap.opt.alwaysShowExpandBtn) {
      expandBtnSize = 0
    }
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    const {
+      nodeUseLineStyle,
+      rootLineStartPositionKeepSameInCurve,
+      rootLineKeepSameInCurve
+    } = this.mindMap.themeConfig
    node.children.forEach((item, index) => {
+      if (node.layerIndex === 0) {
+        expandBtnSize = 0
+      }
      let x1 =
-        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+        node.layerIndex === 0 && !rootLineStartPositionKeepSameInCurve
+          ? left + width / 2
+          : left + width + expandBtnSize
      let y1 = top + height / 2
      let x2 = item.left
      let y2 = item.top + item.height / 2
@@ -238,7 +249,7 @@ class LogicalStructure extends Base {
      let nodeUseLineStylePath = nodeUseLineStyle
        ? ` L ${item.left + item.width},${y2}`
        : ''
-      if (node.isRoot && !this.mindMap.themeConfig.rootLineKeepSameInCurve) {
+      if (node.isRoot && !rootLineKeepSameInCurve) {
        path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
      } else {
        path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -259,12 +259,13 @@ class MindMap extends Base {
    if (!this.mindMap.opt.alwaysShowExpandBtn) {
      expandBtnSize = 0
    }
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    const { nodeUseLineStyle } = this.mindMap.themeConfig
    node.children.forEach((item, index) => {
+      if (node.layerIndex === 0) {
+        expandBtnSize = 0
+      }
      let x1 =
-        node.layerIndex === 0
-          ? left + width / 2
-          : item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+        item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
          ? left - expandBtnSize
          : left + width + expandBtnSize
      let y1 = top + height / 2
@@ -298,10 +299,17 @@ class MindMap extends Base {
    if (!this.mindMap.opt.alwaysShowExpandBtn) {
      expandBtnSize = 0
    }
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    const {
+      nodeUseLineStyle,
+      rootLineKeepSameInCurve,
+      rootLineStartPositionKeepSameInCurve
+    } = this.mindMap.themeConfig
    node.children.forEach((item, index) => {
+      if (node.layerIndex === 0) {
+        expandBtnSize = 0
+      }
      let x1 =
-        node.layerIndex === 0
+        node.layerIndex === 0 && !rootLineStartPositionKeepSameInCurve
          ? left + width / 2
          : item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
          ? left - expandBtnSize
@@ -317,14 +325,14 @@ class MindMap extends Base {
      y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
      // 节点使用横线风格，需要额外渲染横线
      let nodeUseLineStylePath = ''
-      if (this.mindMap.themeConfig.nodeUseLineStyle) {
+      if (nodeUseLineStyle) {
        if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
          nodeUseLineStylePath = ` L ${item.left},${y2}`
        } else {
          nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
        }
      }
-      if (node.isRoot && !this.mindMap.themeConfig.rootLineKeepSameInCurve) {
+      if (node.isRoot && !rootLineKeepSameInCurve) {
        path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
      } else {
        path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/simple-mind-map/src/layouts/OrganizationStructure.js
@@ -161,13 +161,14 @@ class OrganizationStructure extends Base {
      return []
    }
    let { left, top, width, height } = node
+    const { nodeUseLineStyle } = this.mindMap.themeConfig
    let x1 = left + width / 2
    let y1 = top + height
    node.children.forEach((item, index) => {
      let x2 = item.left + item.width / 2
      let y2 = item.top
      // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
+      let nodeUseLineStylePath = nodeUseLineStyle
        ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
        : ''
      let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
@@ -213,14 +214,16 @@ class OrganizationStructure extends Base {
    let line1 = this.lineDraw.path()
    node.style.line(line1)
    expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
-    line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
+    line1.plot(
+      this.transformPath(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
+    )
    node._lines.push(line1)
    style && style(line1, node)
    // 水平线
    if (len > 0) {
      let lin2 = this.lineDraw.path()
      node.style.line(lin2)
-      lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
+      lin2.plot(this.transformPath(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`))
      node._lines.push(lin2)
      style && style(lin2, node)
    }
@@ -253,7 +256,7 @@ class OrganizationStructure extends Base {
      let cx = x1 + (x2 - x1) / 2
      let cy = y1 + 20
      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-      item.generalizationLine.plot(path)
+      item.generalizationLine.plot(this.transformPath(path))
      item.generalizationNode.top = bottom + generalizationNodeMargin
      item.generalizationNode.left =
        left + (right - left - item.generalizationNode.width) / 2
--- a/simple-mind-map/src/layouts/Timeline.js
+++ b/simple-mind-map/src/layouts/Timeline.js
@@ -274,9 +274,13 @@ class Timeline extends Base {
          node.parent.isRoot &&
          node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
        ) {
-          line.plot(`M ${x},${top} L ${x},${miny}`)
+          line.plot(this.transformPath(`M ${x},${top} L ${x},${miny}`))
        } else {
-          line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
+          line.plot(
+            this.transformPath(
+              `M ${x},${top + height + expandBtnSize} L ${x},${maxy}`
+            )
+          )
        }
        node.style.line(line)
        node._lines.push(line)
@@ -325,9 +329,10 @@ class Timeline extends Base {
      let cx = x1 + 20
      let cy = y1 + (y2 - y1) / 2
      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-      item.generalizationLine.plot(path)
+      item.generalizationLine.plot(this.transformPath(path))
      item.generalizationNode.left = right + generalizationNodeMargin
-      item.generalizationNode.top = top + (bottom - top - item.generalizationNode.height) / 2
+      item.generalizationNode.top =
+        top + (bottom - top - item.generalizationNode.height) / 2
    })
  }

--- a/simple-mind-map/src/layouts/VerticalTimeline.js
+++ b/simple-mind-map/src/layouts/VerticalTimeline.js
@@ -398,7 +398,7 @@ class VerticalTimeline extends Base {
      let cx = x1 + (isLeft ? -20 : 20)
      let cy = y1 + (y2 - y1) / 2
      let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-      item.generalizationLine.plot(path)
+      item.generalizationLine.plot(this.transformPath(path))
      item.generalizationNode.left =
        x +
        (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
--- a/simple-mind-map/src/layouts/fishboneUtils.js
+++ b/simple-mind-map/src/layouts/fishboneUtils.js
@@ -36,12 +36,18 @@ export default {
    }) {
      if (node.parent && node.parent.isRoot) {
        line.plot(
-          `M ${x},${top} L ${x + lineLength},${
-            top - Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
-          }`
+          ctx.transformPath(
+            `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}`)
+        line.plot(
+          ctx.transformPath(
+            `M ${x},${top + height + expandBtnSize} L ${x},${maxy}`
+          )
+        )
      }
    },
    computedLeftTopValue({ layerIndex, node, ctx }) {
@@ -135,14 +141,16 @@ export default {
    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
-          }`
+          ctx.transformPath(
+            `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}`)
+        line.plot(ctx.transformPath(`M ${x},${top} L ${x},${miny}`))
      }
    },
    computedLeftTopValue({ layerIndex, node, ctx }) {
--- a/simple-mind-map/src/plugins/AssociativeLine.js
+++ b/simple-mind-map/src/plugins/AssociativeLine.js
@@ -451,6 +451,17 @@ class AssociativeLine {
      endPoint.x,
      endPoint.y
    )
+    // 检查是否存在固定位置的配置
+    const { associativeLineInitPointsPosition } = this.mindMap.opt
+    if (associativeLineInitPointsPosition) {
+      const { from, to } = associativeLineInitPointsPosition
+      if (from) {
+        startPoint.dir = from
+      }
+      if (to) {
+        endPoint.dir = to
+      }
+    }
    let offsetList =
      fromNode.getData('associativeLineTargetControlOffsets') || []
    // 保存的实际是控制点和端点的差值，否则当节点位置改变了，控制点还是原来的位置，连线就不对了
--- a/simple-mind-map/src/plugins/RichText.js
+++ b/simple-mind-map/src/plugins/RichText.js
@@ -7,7 +7,8 @@ import {
  isWhite,
  getVisibleColorFromTheme,
  isUndef,
-  checkSmmFormatData
+  checkSmmFormatData,
+  removeHtmlNodeByClass
 } from '../utils'
 import { CONSTANTS } from '../constants/constant'

@@ -309,6 +310,8 @@ class RichText {
  // 获取当前正在编辑的内容
  getEditText() {
    let html = this.quill.container.firstChild.innerHTML
+    // 去除ql-cursor节点
+    html = removeHtmlNodeByClass(html, '.ql-cursor')
    // 去除最后的空行
    return html.replace(/<p><br><\/p>$/, '')
  }
@@ -488,7 +491,7 @@ class RichText {
  // 格式化当前选中的文本
  formatText(config = {}, clear = false, pure = false) {
    if (!this.range && !this.lastRange) return
-    if(!pure) this.syncFormatToNodeConfig(config, clear)
+    if (!pure) this.syncFormatToNodeConfig(config, clear)
    let rangeLost = !this.range
    let range = rangeLost ? this.lastRange : this.range
    clear
@@ -636,36 +639,6 @@ class RichText {
    }
  }

-  // 处理导出为图片
-  async handleExportPng(node) {
-    let el = document.createElement('div')
-    el.style.position = 'absolute'
-    el.style.left = '-9999999px'
-    el.appendChild(node)
-    this.mindMap.el.appendChild(el)
-    // 遍历所有节点，将它们的margin和padding设为0
-    let walk = root => {
-      root.style.margin = 0
-      root.style.padding = 0
-      if (root.hasChildNodes()) {
-        Array.from(root.children).forEach(item => {
-          walk(item)
-        })
-      }
-    }
-    walk(node)
-
-    // 如果使用html2canvas
-    // let canvas = await html2canvas(el, {
-    //   backgroundColor: null
-    // })
-    // return canvas.toDataURL()
-
-    const res = await domtoimage.toPng(el)
-    this.mindMap.el.removeChild(el)
-    return res
-  }
-
  // 将所有节点转换成非富文本节点
  transformAllNodesToNormalNode() {
    walk(
--- a/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js
+++ b/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js
@@ -221,6 +221,7 @@ function resetControlPoint() {

 // 渲染控制点
 function renderControls(startPoint, endPoint, point1, point2) {
+  if (!this.mindMap.opt.enableAdjustAssociativeLinePoints) return
  if (!this.controlLine1) {
    this.createControlNodes()
  }
--- a/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js
+++ b/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js
@@ -1,3 +1,5 @@
+import { getRectRelativePosition } from '../../utils/index'
+
 // 获取目标节点在起始节点的目标数组中的索引
 export const getAssociativeLineTargetIndex = (node, toNode) => {
  return node.getData('associativeLineTargets').findIndex(item => {
@@ -7,14 +9,21 @@ export const getAssociativeLineTargetIndex = (node, toNode) => {

 // 计算贝塞尔曲线的控制点
 export const computeCubicBezierPathPoints = (x1, y1, x2, y2) => {
+  const min = 5
  let cx1 = x1 + (x2 - x1) / 2
  let cy1 = y1
  let cx2 = cx1
  let cy2 = y2
-  if (Math.abs(x1 - x2) <= 5) {
+  if (Math.abs(x1 - x2) <= min) {
    cx1 = x1 + (y2 - y1) / 2
    cx2 = cx1
  }
+  if (Math.abs(y1 - y2) <= min) {
+    cx1 = x1
+    cy1 = y1 - (x2 - x1) / 2
+    cx2 = x2
+    cy2 = cy1
+  }
  return [
    {
      x: cx1,
@@ -39,7 +48,9 @@ const getNodeRect = node => {
    right: left + width,
    bottom: top + height,
    left,
-    top
+    top,
+    width,
+    height
  }
 }

@@ -169,22 +180,26 @@ export const getNodePoint = (node, dir = 'right', range = 0, e = null) => {
    case 'left':
      return {
        x: left,
-        y: top + height / 2 - range
+        y: top + height / 2 - range,
+        dir
      }
    case 'right':
      return {
        x: left + width,
-        y: top + height / 2 - range
+        y: top + height / 2 - range,
+        dir
      }
    case 'top':
      return {
        x: left + width / 2 - range,
-        y: top
+        y: top,
+        dir
      }
    case 'bottom':
      return {
        x: left + width / 2 - range,
-        y: top + height
+        y: top + height,
+        dir
      }
    default:
      break
@@ -193,34 +208,64 @@ export const getNodePoint = (node, dir = 'right', range = 0, e = null) => {

 // 根据两个节点的位置计算节点的连接点
 export const computeNodePoints = (fromNode, toNode) => {
-  let fromRect = getNodeRect(fromNode)
-  let fromCx = (fromRect.right + fromRect.left) / 2
-  let fromCy = (fromRect.bottom + fromRect.top) / 2
-  let toRect = getNodeRect(toNode)
-  let toCx = (toRect.right + toRect.left) / 2
-  let toCy = (toRect.bottom + toRect.top) / 2
-  // 中心点坐标的差值
-  let offsetX = toCx - fromCx
-  let offsetY = toCy - fromCy
-  if (offsetX === 0 && offsetY === 0) return []
+  const fromRect = getNodeRect(fromNode)
+  const toRect = getNodeRect(toNode)
  let fromDir = ''
  let toDir = ''
-  if (offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY) {
-    // left
-    fromDir = 'left'
-    toDir = 'right'
-  } else if (offsetX > 0 && offsetX >= -offsetY && offsetX >= offsetY) {
-    // right
-    fromDir = 'right'
-    toDir = 'left'
-  } else if (offsetY <= 0 && offsetY < offsetX && offsetY < -offsetX) {
-    // up
-    fromDir = 'top'
-    toDir = 'bottom'
-  } else if (offsetY > 0 && -offsetY < offsetX && offsetY > offsetX) {
-    // down
-    fromDir = 'right'
-    toDir = 'right'
+  const dir = getRectRelativePosition(
+    {
+      x: fromRect.left,
+      y: fromRect.top,
+      width: fromRect.width,
+      height: fromRect.height
+    },
+    {
+      x: toRect.left,
+      y: toRect.top,
+      width: toRect.width,
+      height: toRect.height
+    }
+  )
+  // 起始矩形在结束矩形的什么方向
+  switch (dir) {
+    case 'left-top':
+      fromDir = 'right'
+      toDir = 'top'
+      break
+    case 'right-top':
+      fromDir = 'left'
+      toDir = 'top'
+      break
+    case 'right-bottom':
+      fromDir = 'left'
+      toDir = 'bottom'
+      break
+    case 'left-bottom':
+      fromDir = 'right'
+      toDir = 'bottom'
+      break
+    case 'left':
+      fromDir = 'right'
+      toDir = 'left'
+      break
+    case 'right':
+      fromDir = 'left'
+      toDir = 'right'
+      break
+    case 'top':
+      fromDir = 'right'
+      toDir = 'right'
+      break
+    case 'bottom':
+      fromDir = 'left'
+      toDir = 'left'
+      break
+    case 'overlap':
+      fromDir = 'right'
+      toDir = 'right'
+      break
+    default:
+      break
  }
  return [getNodePoint(fromNode, fromDir), getNodePoint(toNode, toDir)]
 }
@@ -230,8 +275,9 @@ export const getNodeLinePath = (startPoint, endPoint, node, toNode) => {
  let targetIndex = getAssociativeLineTargetIndex(node, toNode)
  // 控制点
  let controlPoints = []
-  let associativeLineTargetControlOffsets =
-    node.getData('associativeLineTargetControlOffsets')
+  let associativeLineTargetControlOffsets = node.getData(
+    'associativeLineTargetControlOffsets'
+  )
  if (
    associativeLineTargetControlOffsets &&
    associativeLineTargetControlOffsets[targetIndex]
--- a/simple-mind-map/src/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@@ -20,9 +20,11 @@ export default {
  lineStyle: 'straight', // 曲线（curve）【仅支持logicalStructure、mindMap、verticalTimeline三种结构】、直线（straight）、直连（direct）【仅支持logicalStructure、mindMap、organizationStructure、verticalTimeline四种结构】
  // 曲线连接时，根节点和其他节点的连接线样式保持统一，默认根节点为 ( 型，其他节点为 { 型，设为true后，都为 { 型。仅支持logicalStructure、mindMap两种结构
  rootLineKeepSameInCurve: true,
+  // 曲线连接时，根节点和其他节点的连线起始位置保持统一，默认根节点的连线起始位置在节点中心，其他节点在节点右侧，如果该配置设为true，那么根节点的连线起始位置也会在节点右侧
+  rootLineStartPositionKeepSameInCurve: false,
  // 直线连接(straight)时，连线的圆角大小，设置为0代表没有圆角，仅支持logicalStructure、mindMap、verticalTimeline三种结构
  lineRadius: 5,
-  // 连线尾部是否显示标记，目前只支持箭头
+  // 连线是否显示标记，目前只支持箭头
  showLineMarker: false,
  // 概要连线的粗细
  generalizationLineWidth: 1,
@@ -77,7 +79,9 @@ export default {
    textDecoration: 'none',
    gradientStyle: false,
    startColor: '#549688',
-    endColor: '#fff'
+    endColor: '#fff',
+    // 连线标记的位置，start（头部）、end（尾部），该配置在showLineMarker配置为true时生效
+    lineMarkerDir: 'end'
  },
  // 二级节点样式
  second: {
@@ -98,7 +102,8 @@ export default {
    textDecoration: 'none',
    gradientStyle: false,
    startColor: '#549688',
-    endColor: '#fff'
+    endColor: '#fff',
+    lineMarkerDir: 'end'
  },
  // 三级及以下节点样式
  node: {
@@ -119,7 +124,8 @@ export default {
    textDecoration: 'none',
    gradientStyle: false,
    startColor: '#549688',
-    endColor: '#fff'
+    endColor: '#fff',
+    lineMarkerDir: 'end'
  },
  // 概要节点样式
  generalization: {
@@ -176,6 +182,7 @@ const nodeSizeIndependenceList = [
  'backgroundPosition',
  'backgroundSize',
  'rootLineKeepSameInCurve',
+  'rootLineStartPositionKeepSameInCurve',
  'showLineMarker',
  'gradientStyle',
  'lineRadius',
@@ -196,4 +203,9 @@ export const checkIsNodeSizeIndependenceConfig = config => {
  return true
 }

-export const lineStyleProps = ['lineColor', 'lineDasharray', 'lineWidth']
+export const lineStyleProps = [
+  'lineColor',
+  'lineDasharray',
+  'lineWidth',
+  'lineMarkerDir'
+]
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -489,9 +489,27 @@ export const removeHtmlStyle = html => {
 }

 // 给html标签中指定的标签添加内联样式
+let addHtmlStyleEl = null
 export const addHtmlStyle = (html, tag, style) => {
-  const reg = new RegExp(`(<${tag}[^>]*)(>[^<>]*</${tag}>)`, 'g')
-  return html.replaceAll(reg, `$1 style="${style}"$2`)
+  if (!addHtmlStyleEl) {
+    addHtmlStyleEl = document.createElement('div')
+  }
+  addHtmlStyleEl.innerHTML = html
+  let walk = root => {
+    let childNodes = root.childNodes
+    childNodes.forEach(node => {
+      if (node.nodeType === 1) {
+        // 元素节点
+        if (node.tagName.toLowerCase() === tag) {
+          node.style.cssText = style
+        } else {
+          walk(node)
+        }
+      }
+    })
+  }
+  walk(addHtmlStyleEl)
+  return addHtmlStyleEl.innerHTML
 }

 // 检查一个字符串是否是富文本字符
@@ -535,6 +553,20 @@ export const replaceHtmlText = (html, searchText, replaceText) => {
  return replaceHtmlTextEl.innerHTML
 }

+// 去除html字符串中指定选择器的节点，然后返回html字符串
+let removeHtmlNodeByClassEl = null
+export const removeHtmlNodeByClass = (html, selector) => {
+  if (!removeHtmlNodeByClassEl) {
+    removeHtmlNodeByClassEl = document.createElement('div')
+  }
+  removeHtmlNodeByClassEl.innerHTML = html
+  const node = removeHtmlNodeByClassEl.querySelector(selector)
+  if (node) {
+    node.parentNode.removeChild(node)
+  }
+  return removeHtmlNodeByClassEl.innerHTML
+}
+
 // 判断一个颜色是否是白色
 export const isWhite = color => {
  color = String(color).replaceAll(/\s+/g, '')
@@ -1198,3 +1230,41 @@ export const transformObjectToTreeData = data => {
  })
  return res
 }
+
+// 计算两个点的直线距离
+export const getTwoPointDistance = (x1, y1, x2, y2) => {
+  return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2))
+}
+
+// 判断两个矩形的相对位置
+// 第一个矩形在第二个矩形的什么方向
+export const getRectRelativePosition = (rect1, rect2) => {
+  // 获取第一个矩形的中心点坐标
+  const rect1CenterX = rect1.x + rect1.width / 2
+  const rect1CenterY = rect1.y + rect1.height / 2
+
+  // 获取第二个矩形的中心点坐标
+  const rect2CenterX = rect2.x + rect2.width / 2
+  const rect2CenterY = rect2.y + rect2.height / 2
+
+  // 判断第一个矩形在第二个矩形的哪个方向
+  if (rect1CenterX < rect2CenterX && rect1CenterY < rect2CenterY) {
+    return 'left-top'
+  } else if (rect1CenterX > rect2CenterX && rect1CenterY < rect2CenterY) {
+    return 'right-top'
+  } else if (rect1CenterX > rect2CenterX && rect1CenterY > rect2CenterY) {
+    return 'right-bottom'
+  } else if (rect1CenterX < rect2CenterX && rect1CenterY > rect2CenterY) {
+    return 'left-bottom'
+  } else if (rect1CenterX < rect2CenterX && rect1CenterY === rect2CenterY) {
+    return 'left'
+  } else if (rect1CenterX > rect2CenterX && rect1CenterY === rect2CenterY) {
+    return 'right'
+  } else if (rect1CenterX === rect2CenterX && rect1CenterY < rect2CenterY) {
+    return 'top'
+  } else if (rect1CenterX === rect2CenterX && rect1CenterY > rect2CenterY) {
+    return 'bottom'
+  } else {
+    return 'overlap'
+  }
+}
--- a/simple-mind-map/src/utils/jspdf.js
+++ b/simple-mind-map/src/utils/jspdf.js
--- a/web/src/assets/avatar/慕智打印-兰兰.jpg
+++ b/web/src/assets/avatar/慕智打印-兰兰.jpg
--- a/web/src/assets/avatar/汪津合.jpg
+++ b/web/src/assets/avatar/汪津合.jpg
--- a/web/src/assets/img/docs/手绘风格.png
+++ b/web/src/assets/img/docs/手绘风格.png
--- a/web/src/assets/img/themes/classic6.jpg
+++ b/web/src/assets/img/themes/classic6.jpg
--- a/web/src/assets/img/themes/classic7.jpg
+++ b/web/src/assets/img/themes/classic7.jpg
--- a/web/src/config/constant.js
+++ b/web/src/config/constant.js
@@ -55,7 +55,9 @@ export const themeMap = {
  classic5: require('../assets/img/themes/classic5.jpg'),
  dark3: require('../assets/img/themes/dark3.jpg'),
  dark4: require('../assets/img/themes/dark4.jpg'),
-  cactus: require('../assets/img/themes/cactus.jpg')
+  cactus: require('../assets/img/themes/cactus.jpg'),
+  classic6: require('../assets/img/themes/classic6.jpg'),
+  classic7: require('../assets/img/themes/classic7.jpg'),
 }

 // 公式列表
--- a/web/src/config/en.js
+++ b/web/src/config/en.js
@@ -330,6 +330,36 @@ export const shortcutKeyList = [
        value: 'Ctrl + i'
      }
    ]
+  },
+  {
+    type: 'Outline Operation',
+    list: [
+      {
+        icon: 'iconhuanhang',
+        name: 'Text Wrap',
+        value: 'Shift + Enter'
+      },
+      {
+        icon: 'iconshanchu',
+        name: 'Delete current node',
+        value: 'Delete'
+      },
+      {
+        icon: 'icontianjiazijiedian',
+        name: 'Inert child node',
+        value: 'Tab'
+      },
+      {
+        icon: 'iconjiedian',
+        name: 'Insert sibling node',
+        value: 'Enter'
+      },
+      {
+        icon: 'icondodeparent',
+        name: 'Move up one level',
+        value: 'Shift + Tab'
+      },
+    ]
  }
 ]

--- a/web/src/config/zh.js
+++ b/web/src/config/zh.js
@@ -397,6 +397,36 @@ export const shortcutKeyList = [
        value: 'Ctrl + i'
      }
    ]
+  },
+  {
+    type: '大纲操作',
+    list: [
+      {
+        icon: 'iconhuanhang',
+        name: '文本换行',
+        value: 'Shift + Enter'
+      },
+      {
+        icon: 'iconshanchu',
+        name: '删除节点',
+        value: 'Delete'
+      },
+      {
+        icon: 'icontianjiazijiedian',
+        name: '插入下级节点',
+        value: 'Tab'
+      },
+      {
+        icon: 'iconjiedian',
+        name: '插入同级节点',
+        value: 'Enter'
+      },
+      {
+        icon: 'icondodeparent',
+        name: '上移一个层级',
+        value: 'Shift + Tab'
+      },
+    ]
  }
 ]

--- a/web/src/customThemes/classic6.js
+++ b/web/src/customThemes/classic6.js
@@ -0,0 +1,45 @@
+// 经典6
+export default {
+    backgroundColor: 'rgb(255, 255, 255)',
+    // 连线的颜色
+    lineColor: 'rgb(0, 0, 0)',
+    lineWidth: 2,
+    // 概要连线的粗细
+    generalizationLineWidth: 2,
+    // 概要连线的颜色
+    generalizationLineColor: 'rgb(0, 0, 0)',
+    // 关联线默认状态的颜色
+    associativeLineColor: 'rgb(152, 162, 171)',
+    // 关联线文字颜色
+    associativeLineTextColor: 'rgb(68, 68, 68)',
+    // 根节点样式
+    root: {
+      fillColor: 'rgb(237, 182, 72)',
+      color: 'rgb(0, 0, 0)',
+      borderColor: 'rgb(0, 0, 0)',
+      borderWidth: 2,
+      fontSize: 24
+    },
+    // 二级节点样式
+    second: {
+      fillColor: 'rgb(114, 158, 28)',
+      color: '#fff',
+      borderColor: 'rgb(0, 0, 0)',
+      borderWidth: 2,
+      fontSize: 18
+    },
+    // 三级及以下节点样式
+    node: {
+      fontSize: 14,
+      color: 'rgb(10, 2, 2)'
+    },
+    // 概要节点样式
+    generalization: {
+      fontSize: 14,
+      fillColor: '#fff',
+      borderColor: '',
+      borderWidth: 0,
+      color: 'rgb(10, 2, 2)'
+    }
+  }
+  
--- a/web/src/customThemes/classic7.js
+++ b/web/src/customThemes/classic7.js
@@ -0,0 +1,44 @@
+// 经典7
+export default {
+  backgroundColor: 'rgb(255, 255, 255)',
+  // 连线的颜色
+  lineColor: 'rgb(237, 185, 81)',
+  lineWidth: 2,
+  // 概要连线的粗细
+  generalizationLineWidth: 2,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(226, 90, 64)',
+  // 关联线默认状态的颜色
+  associativeLineColor: 'rgb(152, 162, 171)',
+  // 关联线文字颜色
+  associativeLineTextColor: 'rgb(68, 68, 68)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(226, 90, 64)',
+    color: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 24
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(43, 118, 239)',
+    color: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 18
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(43, 118, 239)'
+  },
+  // 概要节点样式
+  generalization: {
+    fontSize: 14,
+    fillColor: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    color: 'rgb(43, 118, 239)'
+  }
+}
--- a/web/src/customThemes/index.js
+++ b/web/src/customThemes/index.js
@@ -7,6 +7,8 @@ import neonLamp from './neonLamp'
 import darkNightLceBlade from './darkNightLceBlade'
 import morandi from './morandi'
 import classic5 from './classic5'
+import classic6 from './classic6'
+import classic7 from './classic7'
 import dark3 from './dark3'
 import dark4 from './dark4'
 import cactus from './cactus'
@@ -83,5 +85,17 @@ export default [
        value: 'cactus',
        theme: cactus,
        dark: false
+    },
+    {
+        name: '脑图经典6',
+        value: 'classic6',
+        theme: classic6,
+        dark: false
+    },
+    {
+        name: '脑图经典7',
+        value: 'classic7',
+        theme: classic7,
+        dark: false
    }
 ]
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -58,7 +58,11 @@ export default {
    associativeLineText: 'Associative line text',
    fontFamily: 'Font family',
    fontSize: 'Font size',
-    isShowScrollbar: 'Is show scrollbar'
+    isShowScrollbar: 'Is show scrollbar',
+    isUseHandDrawnLikeStyle: 'Is use hand drawn like style',
+    rootLineStartPos: 'Root line start pos',
+    center: 'Center',
+    right: 'Right'
  },
  color: {
    moreColor: 'More color'
@@ -143,7 +147,8 @@ export default {
    openMiniMap: 'Open mini map',
    closeMiniMap: 'Close mini map',
    readonly: 'Change to eadonly',
-    edit: 'Change to edit'
+    edit: 'Change to edit',
+    backToRoot: 'Back to root node'
  },
  nodeHyperlink: {
    title: 'Link',
@@ -206,7 +211,10 @@ export default {
    vertical: 'Vertical',
    gradientStyle: 'Gradient',
    startColor: 'Start',
-    endColor: 'End'
+    endColor: 'End',
+    arrowDir: 'Arrow dir',
+    arrowDirStart: 'Start',
+    arrowDirEnd: 'End'
  },
  theme: {
    title: 'Theme',
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -58,7 +58,11 @@ export default {
    associativeLineText: '关联线文字',
    fontFamily: '字体',
    fontSize: '字号',
-    isShowScrollbar: '是否显示滚动条'
+    isShowScrollbar: '是否显示滚动条',
+    isUseHandDrawnLikeStyle: '是否开启手绘风格',
+    rootLineStartPos: '根节点连线起始位置',
+    center: '中心',
+    right: '右侧'
  },
  color: {
    moreColor: '更多颜色'
@@ -141,7 +145,8 @@ export default {
    openMiniMap: '开启小地图',
    closeMiniMap: '关闭小地图',
    readonly: '切换为只读模式',
-    edit: '切换为编辑模式'
+    edit: '切换为编辑模式',
+    backToRoot: '回到根节点'
  },
  nodeHyperlink: {
    title: '超链接',
@@ -204,7 +209,10 @@ export default {
    vertical: '垂直',
    gradientStyle: '渐变',
    startColor: '起始',
-    endColor: '结束'
+    endColor: '结束',
+    arrowDir: '箭头位置',
+    arrowDirStart: '头部',
+    arrowDirEnd: '尾部'
  },
  theme: {
    title: '主题',
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -38,6 +38,7 @@ let APIList = [
  'scrollbar',
  'formula',
  'cooperate',
+  'handDrawnLikeStyle',
  'xmind',
  'markdown',
  'utils'
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,61 @@
 # Changelog

+## 0.9.6
+
+Fix:
+
+> 1.Fix the issue where the style of the collapsed nodes remains unchanged when switching themes;
+>
+> 2.Fix the issue of losing the new text style when switching themes for text wrapping;
+>
+> 3.Fix the issue where the style of the newline text remains unchanged when switching themes;
+>
+> 4.Fixed the issue of adding mathematical formulas to nodes and not changing the text style when switching themes;
+
+New:
+
+> 1.Add new fields to the theme, used to set the display position, head or tail, of node line arrows;
+>
+> 2.New field added to the theme, used to set the starting position of the root node line when connecting curves;
+>
+> 3.Mac dual finger touch event moves the canvas to increase sensitivity slightly;
+>
+> 4.Add MOVE_ UP_ ONE_ The LEVEL command is used to move a node up one level;
+
+Demo:
+
+> 1.The outline supports pressing Shift+Tab to move nodes up one level;
+>
+> 2.Support setting the position of node arrow display;
+>
+> 3.Support setting the starting position of root node connections;
+>
+> 4.Add two new themes;
+>
+> 5.Fix the issue of text wrapping not taking effect in the outline and displaying the br tag;
+
+## 0.9.5
+
+Fix:
+
+> 1.Fix the issue of missing inter zone summaries when expanding and folding nodes.
+>
+> 2.Fix the issue where the position of the newly created associated line is always on the right side of the node without changing according to its relative position.
+
+New:
+
+> 1.Add configuration for the initial positions of the two endpoints when creating associated lines.
+>
+> 2.Add a configuration that prohibits adjusting the endpoint position of associated lines.
+>
+> 3.Add a hand drawn style plugin.
+
+Demo:
+
+> 1.Optimize interface adaptation on mobile devices.
+>
+> 2.Supports enabling hand drawn styles.
+
 ## 0.9.4

 Fix:
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,41 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.9.6</h2>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue where the style of the collapsed nodes remains unchanged when switching themes;</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Add new fields to the theme, used to set the display position, head or tail, of node line arrows;</p>
+<p>2.New field added to the theme, used to set the starting position of the root node line when connecting curves;</p>
+<p>3.Mac dual finger touch event moves the canvas to increase sensitivity slightly;</p>
+<p>4.Add MOVE_ UP_ ONE_ The LEVEL command is used to move a node up one level;</p>
+</blockquote>
+<p>Demo:</p>
+<blockquote>
+<p>1.The outline supports pressing Shift+Tab to move nodes up one level;</p>
+<p>2.Support setting the position of node arrow display;</p>
+<p>3.Support setting the starting position of root node connections;</p>
+</blockquote>
+<h2>0.9.5</h2>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue of missing inter zone summaries when expanding and folding nodes.</p>
+<p>2.Fix the issue where the position of the newly created associated line is always on the right side of the node without changing according to its relative position.</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Add configuration for the initial positions of the two endpoints when creating associated lines.</p>
+<p>2.Add a configuration that prohibits adjusting the endpoint position of associated lines.</p>
+<p>3.Add a hand drawn style plugin.</p>
+</blockquote>
+<p>Demo:</p>
+<blockquote>
+<p>1.Optimize interface adaptation on mobile devices.</p>
+<p>2.Supports enabling hand drawn styles.</p>
+</blockquote>
 <h2>0.9.4</h2>
 <p>Fix:</p>
 <blockquote>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -106,8 +106,11 @@ const mindMap = new MindMap({
 | createNewNodeBehavior（v0.9.1+）     | String | default  | Behavior when creating a new node. default（By default, newly created nodes will be activated and enter editing mode. If multiple new nodes are created simultaneously, they will only be activated and will not enter editing mode）、notActive（Do not activate newly created nodes）、activeOnly（Only activate newly created nodes and do not enter editing mode）  |         |
 | defaultNodeImage（v0.9.1-fix.2+）     | String |   | Image address, the default image displayed when node image loading fails  |         |
 | handleNodePasteImg（v0.9.2+）     | null or Function | null  | The processing method for pasting images from the clipboard on a node is to convert them into data:URL data and insert them into the node by default. You can use this method to upload image data to the server and save the URL of the image. An asynchronous method can be passed to receive image data of Blob type, and the specified structure needs to be returned: { url, size: {width, height} }  |         |
-| isLimitMindMapInCanvas（v0.9.2+）     | Boolean |  false | Whether to limit the mind map within the canvas. For example, when dragging to the right, the leftmost part of the mind map graphic will not be able to continue dragging to the right when it reaches the center of the canvas, and the same applies to other things |
-| isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+）     | Boolean |  true | When registering the Scrollbar plugin, will the mind map be limited to the canvas and the isLimitMindMapInCanvas configuration no longer work |
+| isLimitMindMapInCanvas（v0.9.2+）     | Boolean |  false | Whether to limit the mind map within the canvas. For example, when dragging to the right, the leftmost part of the mind map graphic will not be able to continue dragging to the right when it reaches the center of the canvas, and the same applies to other things |         |
+| isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+）     | Boolean |  true | When registering the Scrollbar plugin, will the mind map be limited to the canvas and the isLimitMindMapInCanvas configuration no longer work |         |
+| associativeLineInitPointsPosition（v0.9.5+）     | null / { from, to } | { from: '', to: '' }  | By default, the position of the two endpoints of a newly created association line is calculated based on the relative position of the center points of the two nodes. If you want to fix the position, you can configure it through this option. If neither from nor to is transmitted, they will be automatically calculated. If only one is transmitted, the other will be automatically calculated. from and to optional values
+：left、top、bottom、right |         |
+| enableAdjustAssociativeLinePoints（v0.9.5+）     | Boolean | true  | Is it allowed to adjust the position of the two endpoints of the associated line |

 ### Data structure

@@ -536,6 +539,7 @@ redo. All commands are as follows:
 | INSERT_FORMULA（v0.7.2+）           |  Insert mathematical formulas into nodes, operate on the currently active node or specified node   | formula（Mathematical formula to insert, LaTeX syntax）, appointNodes（Optional, specify the node to insert the formula into. Multiple nodes can be passed as arrays, otherwise it defaults to the currently active node） |
 | INSERT_PARENT_NODE（v0.8.0+）           |  Insert a parent node into the specified node, with the operation node being the currently active node or the specified node   | openEdit（Activate the newly inserted node and enter editing mode, default to 'true'`）、 appointNodes（Optional, specify the node to insert into the parent node, and specify that multiple nodes can pass an array）、 appointData（Optional, specify the data for the newly created node, such as {text: 'xxx', ...}, Detailed structure can be referenced [exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js)） |
 | REMOVE_CURRENT_NODE（v0.8.0+）           |  Delete only the current node, operate on the currently active node or specified node    | appointNodes（Optional, specify the nodes to be deleted, and multiple nodes can be passed as an array） |
+| MOVE_UP_ONE_LEVEL（v0.9.6+）           | Move the specified node up one level     | node（Optional, specify the node to move up the hierarchy, if not passed, it will be the first node in the current active node） |

 ### setData(data)

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -616,6 +616,27 @@
 <td>When registering the Scrollbar plugin, will the mind map be limited to the canvas and the isLimitMindMapInCanvas configuration no longer work</td>
 <td></td>
 </tr>
+<tr>
+<td>associativeLineInitPointsPosition（v0.9.5+）</td>
+<td>null / { from, to }</td>
+<td>{ from: '', to: '' }</td>
+<td>By default, the position of the two endpoints of a newly created association line is calculated based on the relative position of the center points of the two nodes. If you want to fix the position, you can configure it through this option. If neither from nor to is transmitted, they will be automatically calculated. If only one is transmitted, the other will be automatically calculated. from and to optional values</td>
+<td></td>
+</tr>
+<tr>
+<td>：left、top、bottom、right</td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+</tr>
+<tr>
+<td>enableAdjustAssociativeLinePoints（v0.9.5+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>Is it allowed to adjust the position of the two endpoints of the associated line</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Data structure</h3>
@@ -1369,6 +1390,11 @@ redo. All commands are as follows:</p>
 <td>Delete only the current node, operate on the currently active node or specified node</td>
 <td>appointNodes（Optional, specify the nodes to be deleted, and multiple nodes can be passed as an array）</td>
 </tr>
+<tr>
+<td>MOVE_UP_ONE_LEVEL（v0.9.6+）</td>
+<td>Move the specified node up one level</td>
+<td>node（Optional, specify the node to move up the hierarchy, if not passed, it will be the first node in the current active node）</td>
+</tr>
 </tbody>
 </table>
 <h3>setData(data)</h3>
--- a/web/src/pages/Doc/en/handDrawnLikeStyle/index.md
+++ b/web/src/pages/Doc/en/handDrawnLikeStyle/index.md
@@ -0,0 +1,102 @@
+# HandDrawnLikeStyle chargeable plugin
+
+> Regarding fees
+>
+> Mind map is an open-source project under the MIT protocol. In theory, as long as the copyright statement of mind map is retained, there is no charge for commercial use, and this protocol will not be changed in the future. Moreover, neither the online version nor the client will consider charging. However, in order to ensure the sustainable development of the project, revenue will be obtained through various means, such as existing sponsorship methods. The second approach is to use paid plugins, with the basic principle that basic functions, core functions, and necessary functions are not charged, while optional additional functions may be charged.
+>
+> Finally, the fee is only applicable to developers. If it is only the online version or client version of the mind map, users do not need to pay, and all functions can be used for free.
+
+HandDrawnLikeStyle is the first paid plugin that provides a hand drawn style, where the connections and shapes of nodes become hand drawn, just like the following:
+
+<img src="../../../../assets/img/docs/手绘风格.png" style="width: 800px" />
+
+You can also try to turn on the hand drawn style in the online version through the settings of 【 Basic Style 】 - 【 Enable Hand drawn Style 】.
+
+The internal implementation is through the [rough](https://github.com/rough-stuff/rough) library, so if you have the energy, you can also implement this plugin based on this library yourself.
+
+## Charge
+
+At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address, and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.
+
+Price:
+
+1.￥ 19.9, Only includes the packaged files, which are in two formats: .cjs.min.js and .esm.min.js.
+
+2.￥ 29.9, including unpackaged source code and packaged files.
+
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+
+## Register
+
+1.Referencing packaged files:
+
+```js
+import MindMap from 'simple-mind-map'
+import HandDrawnLikeStyle from 'handDrawnLikeStyle.cjs.min.js'
+// or import HandDrawnLikeStyle from 'handDrawnLikeStyle.esm.min.js'
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+```
+
+2.Referencing Unpackaged Source Code
+
+You can first enter the plugin directory to execute:
+
+```bash
+npm link
+```
+
+Then enter your project root directory to execute:
+
+```bash
+npm link simple-mind-map-plugin-handdrawnlikestyle
+```
+
+Then you can directly import it for use:
+
+```js
+import MindMap from 'simple-mind-map'
+import HandDrawnLikeStyle from 'simple-mind-map-plugin-handdrawnlikestyle'
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.handDrawnLikeStyle`.
+
+After registering the plugin, there is no need to perform other methods and the hand drawn style can take effect.
+
+If you are using the mindMap.addPlugin method to dynamically register a component, you need to call the method of re rendering once:
+
+```js
+mindMap.addPlugin(HandDrawnLikeStyle)
+mindMap.reRender()
+```
+
+## Methods
+
+You may not be familiar with the following methods.
+
+### createPath(svgPathStr)
+
+- `svgPathStr`：SVG Path string
+
+Create a hand drawn style path node and return the path node of SVG.
+
+### createPolygon(points)
+
+- `points`：Points array
+
+```js
+points：[
+    [x1, y1],
+    ...
+]
+```
+
+Create a hand drawn polygon node and return the Path node of SVG.
+
+### transformPath(svgPathStr)
+
+Convert SVG Path strings to hand drawn SVG Path strings.
--- a/web/src/pages/Doc/en/handDrawnLikeStyle/index.vue
+++ b/web/src/pages/Doc/en/handDrawnLikeStyle/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <h1>HandDrawnLikeStyle chargeable plugin</h1>
+<blockquote>
+<p>Regarding fees</p>
+<p>Mind map is an open-source project under the MIT protocol. In theory, as long as the copyright statement of mind map is retained, there is no charge for commercial use, and this protocol will not be changed in the future. Moreover, neither the online version nor the client will consider charging. However, in order to ensure the sustainable development of the project, revenue will be obtained through various means, such as existing sponsorship methods. The second approach is to use paid plugins, with the basic principle that basic functions, core functions, and necessary functions are not charged, while optional additional functions may be charged.</p>
+<p>Finally, the fee is only applicable to developers. If it is only the online version or client version of the mind map, users do not need to pay, and all functions can be used for free.</p>
+</blockquote>
+<p>HandDrawnLikeStyle is the first paid plugin that provides a hand drawn style, where the connections and shapes of nodes become hand drawn, just like the following:</p>
+<img src="../../../../assets/img/docs/手绘风格.png" style="width: 800px" />
+<p>You can also try to turn on the hand drawn style in the online version through the settings of 【 Basic Style 】 - 【 Enable Hand drawn Style 】.</p>
+<p>The internal implementation is through the <a href="https://github.com/rough-stuff/rough">rough</a> library, so if you have the energy, you can also implement this plugin based on this library yourself.</p>
+<h2>Charge</h2>
+<p>At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address, and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.</p>
+<p>Price:</p>
+<p>1.￥ 19.9, Only includes the packaged files, which are in two formats: .cjs.min.js and .esm.min.js.</p>
+<p>2.￥ 29.9, including unpackaged source code and packaged files.</p>
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+<h2>Register</h2>
+<p>1.Referencing packaged files:</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> HandDrawnLikeStyle <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;handDrawnLikeStyle.cjs.min.js&#x27;</span>
+<span class="hljs-comment">// or import HandDrawnLikeStyle from &#x27;handDrawnLikeStyle.esm.min.js&#x27;</span>
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+</code></pre>
+<p>2.Referencing Unpackaged Source Code</p>
+<p>You can first enter the plugin directory to execute:</p>
+<pre class="hljs"><code>npm link
+</code></pre>
+<p>Then enter your project root directory to execute:</p>
+<pre class="hljs"><code>npm link simple-mind-map-plugin-handdrawnlikestyle
+</code></pre>
+<p>Then you can directly import it for use:</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> HandDrawnLikeStyle <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map-plugin-handdrawnlikestyle&#x27;</span>
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.handDrawnLikeStyle</code>.</p>
+<p>After registering the plugin, there is no need to perform other methods and the hand drawn style can take effect.</p>
+<p>If you are using the mindMap.addPlugin method to dynamically register a component, you need to call the method of re rendering once:</p>
+<pre class="hljs"><code>mindMap.addPlugin(HandDrawnLikeStyle)
+mindMap.reRender()
+</code></pre>
+<h2>Methods</h2>
+<p>You may not be familiar with the following methods.</p>
+<h3>createPath(svgPathStr)</h3>
+<ul>
+<li><code>svgPathStr</code>：SVG Path string</li>
+</ul>
+<p>Create a hand drawn style path node and return the path node of SVG.</p>
+<h3>createPolygon(points)</h3>
+<ul>
+<li><code>points</code>：Points array</li>
+</ul>
+<pre class="hljs"><code>points：[
+    [x1, y1],
+    ...
+]
+</code></pre>
+<p>Create a hand drawn polygon node and return the Path node of SVG.</p>
+<h3>transformPath(svgPathStr)</h3>
+<p>Convert SVG Path strings to hand drawn SVG Path strings.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -1,6 +1,6 @@
 # Introduction

-`simple-mind-map` is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.
+`simple-mind-map` 【Chinese name: 思绪 mind map】 is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.

 > If you just want to use mind mapping, you can also use the demo of this project as a regular online mind mapping tool. Click on the 【Online Demo】 in the upper right corner to start using it.
 >
@@ -285,4 +285,18 @@ Open source is not easy. If this project is helpful to you, you can invite the a
        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>建明</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/汪津合.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>汪津合</p>
+    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>博文</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/慕智打印-兰兰.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>慕智打印-兰兰</p>
+    </div>
 </div>
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -1,24 +1,24 @@
 <template>
  <div>
    <h1>Introduction</h1>
-<p><code>simple-mind-map</code> is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.</p>
+<p><code>simple-mind-map</code> 【Chinese name: 思绪 mind map】 is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.</p>
 <blockquote>
 <p>If you just want to use mind mapping, you can also use the demo of this project as a regular online mind mapping tool. Click on the 【Online Demo】 in the upper right corner to start using it.</p>
 <p>Additionally, a client is provided for download, support <code>Windows</code>、<code>Mac</code> and <code>Linux</code>, <a href="/mind-map/#/doc/zh/client">Click here to learn more</a>。</p>
 </blockquote>
 <h2>Features</h2>
 <ul>
-<li><input type="checkbox" id="checkbox48" checked="true" /><label for="checkbox48">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
-<li><input type="checkbox" id="checkbox49" checked="true" /><label for="checkbox49">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
-<li><input type="checkbox" id="checkbox50" checked="true" /><label for="checkbox50">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
-<li><input type="checkbox" id="checkbox51" checked="true" /><label for="checkbox51">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
-<li><input type="checkbox" id="checkbox52" checked="true" /><label for="checkbox52">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
-<li><input type="checkbox" id="checkbox53" checked="true" /><label for="checkbox53">Support canvas dragging and scaling</label></li>
-<li><input type="checkbox" id="checkbox54" checked="true" /><label for="checkbox54">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
-<li><input type="checkbox" id="checkbox55" checked="true" /><label for="checkbox55">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
-<li><input type="checkbox" id="checkbox56" checked="true" /><label for="checkbox56">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
-<li><input type="checkbox" id="checkbox57" checked="true" /><label for="checkbox57">Provide rich configurations to meet various scenarios and usage habits</label></li>
-<li><input type="checkbox" id="checkbox58" checked="true" /><label for="checkbox58">Support collaborative editing</label></li>
+<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
+<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
+<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
+<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
+<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
+<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Support canvas dragging and scaling</label></li>
+<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
+<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
+<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
+<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Provide rich configurations to meet various scenarios and usage habits</label></li>
+<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Support collaborative editing</label></li>
 </ul>
 <h2>Repository Catalog Introduction</h2>
 <p>1.<code>simple-mind-map</code></p>
@@ -28,16 +28,16 @@ frameworks such as Vue and React, or without a framework.</p>
 <p>This is an online mind map built using the <code>simple-mind-map</code> library and based
 on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
 <ul>
-<li><input type="checkbox" id="checkbox59" checked="true" /><label for="checkbox59">Toolbar, which supports inserting and deleting nodes, and editing node</label>
+<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Toolbar, which supports inserting and deleting nodes, and editing node</label>
 images, icons, hyperlinks, notes, tags, and summaries</li>
-<li><input type="checkbox" id="checkbox60" checked="true" /><label for="checkbox60">Sidebar, with panels for basic style settings, node style settings,</label>
+<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Sidebar, with panels for basic style settings, node style settings,</label>
 outline, theme selection, and structure selection</li>
-<li><input type="checkbox" id="checkbox61" checked="true" /><label for="checkbox61">Import and export functionality; data is saved in the browser's local</label>
+<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">Import and export functionality; data is saved in the browser's local</label>
 storage by default, but it also supports creating, opening, and editing
 local files on the computer directly</li>
-<li><input type="checkbox" id="checkbox62" checked="true" /><label for="checkbox62">Right-click menu, which supports operations such as expanding, collapsing,</label>
+<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">Right-click menu, which supports operations such as expanding, collapsing,</label>
 and organizing layout</li>
-<li><input type="checkbox" id="checkbox63" checked="true" /><label for="checkbox63">Bottom bar, which supports node and word count statistics, switching</label>
+<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">Bottom bar, which supports node and word count statistics, switching</label>
 between edit and read-only modes, zooming in and out, and switching to
 full screen, support mini map</li>
 </ul>
@@ -241,6 +241,20 @@ full screen, support mini map</li>
        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>建明</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/汪津合.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>汪津合</p>
+    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>博文</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/慕智打印-兰兰.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>慕智打印-兰兰</p>
+    </div>
 </div>
  </div>
 </template>
--- a/web/src/pages/Doc/en/start/index.md
+++ b/web/src/pages/Doc/en/start/index.md
@@ -204,4 +204,8 @@ The following configurations can be added to the packaging configuration file:
 resolve: { alias: { stream: "stream-browserify" } }
 ```

-Different packaging tools may have different specific configurations, with the principle of excluding 'stream' dependencies.
+Different packaging tools may have different specific configurations, with the principle of excluding 'stream' dependencies.
+
+### When clicking the [New], [Open], or [Save As] buttons, it will prompt that the browser does not support it or is not using the HTTPS protocol.
+
+The browser uses API [window.showOpenFilePicker](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showOpenFilePicker) to operate local files on the computer. If it is not supported, either the browser does not support this API or the page is not using the HTTPS protocol, You can press F12, or open the browser console through the right-click menu on the page and enter 'window.showOpenFilePicker' in the 'Console' tab. If it returns 'undefined', it means it is not supported. If it does not return this message and the page still prompts that the browser does not support it or is not using the HTTPS protocol, you can submit an issue or contact the author.
--- a/web/src/pages/Doc/en/start/index.vue
+++ b/web/src/pages/Doc/en/start/index.vue
@@ -138,6 +138,8 @@ module. If you need it, you can try using other libraries to parse <code>xml</co
 <pre class="hljs"><code>resolve: { <span class="hljs-attr">alias</span>: { <span class="hljs-attr">stream</span>: <span class="hljs-string">&quot;stream-browserify&quot;</span> } }
 </code></pre>
 <p>Different packaging tools may have different specific configurations, with the principle of excluding 'stream' dependencies.</p>
+<h3>When clicking the [New], [Open], or [Save As] buttons, it will prompt that the browser does not support it or is not using the HTTPS protocol.</h3>
+<p>The browser uses API <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showOpenFilePicker">window.showOpenFilePicker</a> to operate local files on the computer. If it is not supported, either the browser does not support this API or the page is not using the HTTPS protocol, You can press F12, or open the browser console through the right-click menu on the page and enter 'window.showOpenFilePicker' in the 'Console' tab. If it returns 'undefined', it means it is not supported. If it does not return this message and the page still prompts that the browser does not support it or is not using the HTTPS protocol, you can submit an issue or contact the author.</p>

  </div>
 </template>
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@@ -469,6 +469,16 @@ Convert to:

 Convert flat objects into a tree structure. Reverse operation of the transformTreeDataToObject method.

+#### removeHtmlNodeByClass(html, selector)
+
+> v0.9.6+
+
+- `html`：html string
+
+- `selector`：Node selectors, such as class selectors and id selectors
+
+Remove the node of the specified selector from the specified HTML string, and then return the processed HTML string.
+
 ## Simulate CSS background in Canvas

 Import:
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -60,6 +60,7 @@ export default [
      { path: 'scrollbar', title: 'Scrollbar插件' },
      { path: 'formula', title: 'Formula插件' },
      { path: 'cooperate', title: 'Cooperate插件' },
+      { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle收费插件' },
      { path: 'help1', title: '概要/关联线' },
      { path: 'help2', title: '客户端' },
      { path: 'help3', title: '打开预览在线文件' },
@@ -101,6 +102,7 @@ export default [
      { path: 'scrollbar', title: 'Scrollbar plugin' },
      { path: 'formula', title: 'Formula plugin' },
      { path: 'cooperate', title: 'Cooperate plugin' },
+      { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle chargeable plugin' },
      { path: 'client', title: 'Client' }
    ]
  }
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,61 @@
 # Changelog

+## 0.9.6
+
+修复：
+
+> 1.修复切换主题时，被收起的节点样式没有改变的问题；
+>
+> 2.修复切换主题后进行文本换行时，新换行的文本样式会丢失的问题；
+>
+> 3.修复切换主题时，换行的文本样式没有改变的问题；
+>
+> 4.修复添加了数学公式的节点，切换主题时文本样式没有改变的问题；
+
+新增：
+
+> 1.主题新增字段，用于设置节点连线箭头的显示位置，头部或者尾部；
+>
+> 2.主题新增字段，用于设置曲线连接时，根节点连线的起始位置；
+>
+> 3.Mac 双指触摸事件移动画布增加一点灵敏度；
+>
+> 4.新增 MOVE_UP_ONE_LEVEL 命令，用于将节点上移一个层级；
+
+Demo：
+
+> 1.大纲支持按 Shift+Tab 键将节点上移一个层级；
+>
+> 2.支持设置节点箭头显示的位置；
+>
+> 3.支持设置根节点连线的起始位置；
+>
+> 4.新增两个主题；
+>
+> 5.修复大纲中文本换行不生效，显示br标签的问题；
+
+## 0.9.5
+
+修复：
+
+> 1.修复展开收起节点时区间概要会丢失的问题。
+>
+> 2.修复新创建的关联线位置始终在节点的右侧没有根据相对位置变化的问题。
+
+新增：
+
+> 1.增加设置关联线创建时两个端点初始位置的配置。
+>
+> 2.增加禁止调整关联线端点位置的配置。
+>
+> 3.新增手绘风格插件。
+
+Demo：
+
+> 1.优化界面在移动端的适配。
+>
+> 2.支持开启手绘风格。
+
 ## 0.9.4

 修复：
@@ -10,15 +66,15 @@
 >
 > 3.修复被主题定义了加粗的节点切换主题后文本样式丢失的问题。
 >
-> 4.修复mac上useLeftKeySelectionRightKeyDrag选项设为true时无法按住ctrl键多选节点的问题。
+> 4.修复 mac 上 useLeftKeySelectionRightKeyDrag 选项设为 true 时无法按住 ctrl 键多选节点的问题。
 >
 > 5.修复节点富文本编辑时清除样式后文字样式丢失并且切换主题也不会恢复的问题。
 >
-> 6.修复删除含有子节点的节点时，data_change_detail事件报错的问题。
+> 6.修复删除含有子节点的节点时，data_change_detail 事件报错的问题。

 新增：

-> 1.主题配置增加lineRadius属性设置直线连接时的圆角大小。
+> 1.主题配置增加 lineRadius 属性设置直线连接时的圆角大小。

 Demo：

@@ -38,7 +94,7 @@ Demo：
 >
 > 2.修复 Chrome 内核版本比较低的浏览器中公式无法渲染的问题。
 >
-> 3.修复在微前端框架子应用中使用时，new MouseEvent代码执行报错的问题。
+> 3.修复在微前端框架子应用中使用时，new MouseEvent 代码执行报错的问题。
 >
 > 4.修复导出图片时节点连线的箭头、关联线的箭头、渐变背景丢失的问题。

@@ -68,7 +124,7 @@ Demo：

 > 1.修复节点文本含有连续的数字或字母时没有换行的问题。
 >
-> 2.修复导入含有和当前画布已有节点uid相同的文件时会重复绘制节点的问题。
+> 2.修复导入含有和当前画布已有节点 uid 相同的文件时会重复绘制节点的问题。
 >
 > 3.修复当节点数量超出了缓存池的最大数量时，前进回退会导致节点重复渲染的问题。
 >
@@ -76,11 +132,11 @@ Demo：
 >
 > 5.修复节点被销毁时鼠标移入标志没有复位的问题。
 >
-> 6.修复滚动条插件在initRootNodePosition配置不为默认的[center,center]时位置计算错误的问题。
+> 6.修复滚动条插件在 initRootNodePosition 配置不为默认的[center,center]时位置计算错误的问题。
 >
 > 7.修复拖拽画布时鼠标在节点上面松开时拖拽无法停止的问题。
 >
-> 8.修复当画布容器距浏览器窗口左上角不为0时，view.fit方法计算出来的位置有误差的问题。
+> 8.修复当画布容器距浏览器窗口左上角不为 0 时，view.fit 方法计算出来的位置有误差的问题。
 >
 > 9.修复当节点数量比较多时，导出的图片中水印没有完全覆盖整个图片的问题。
 >
@@ -88,20 +144,19 @@ Demo：
 >
 > 11.修复节点文本编辑状态中鼠标选择文本时移出编辑框，文字选中状态会丢失的问题。
 >
-> 12.修复节点富文本编辑时，文本选中范围为null时没有触发rich_text_selection_change事件的问题。
+> 12.修复节点富文本编辑时，文本选中范围为 null 时没有触发 rich_text_selection_change 事件的问题。
 >
-> 13.修复node_dragging事件回参里没有node实例的问题。
+> 13.修复 node_dragging 事件回参里没有 node 实例的问题。
 >
-> 14.修复节点数量过多，画布尺寸过大无法导出png的问题。
-
+> 14.修复节点数量过多，画布尺寸过大无法导出 png 的问题。

 新增：

-> 1.修改mousewheel事件,dir标志修改为dirs,支持存储多个方向,优化触控板的双指移动操作。
+> 1.修改 mousewheel 事件,dir 标志修改为 dirs,支持存储多个方向,优化触控板的双指移动操作。
 >
-> 2.TextEdit类增加isShowTextEdit方法判断当前是否处在节点编辑状态。
+> 2.TextEdit 类增加 isShowTextEdit 方法判断当前是否处在节点编辑状态。
 >
-> 3.Render类的paste方法改为支持粘贴剪贴板的数据。
+> 3.Render 类的 paste 方法改为支持粘贴剪贴板的数据。
 >
 > 4.新增将思维导图图形限制在画布内的配置选项。
 >
@@ -113,11 +168,11 @@ Demo：
 >
 > 8.在节点粘贴剪贴板中的图片时，支持自定义处理函数，可以将图片上传到你的服务器。
 >
-> 9.重构pdf的导出逻辑，导出的pdf尺寸不再是固定的a4，而是思维导图的尺寸，同时删除分页导出的配置。
+> 9.重构 pdf 的导出逻辑，导出的 pdf 尺寸不再是固定的 a4，而是思维导图的尺寸，同时删除分页导出的配置。
 >
 > 10.节点连线支持显示箭头，作为主题的一个字段。
 >
-> 11.最大历史记录数量默认调整为500。
+> 11.最大历史记录数量默认调整为 500。

 Demo：

@@ -143,15 +198,15 @@ Demo：

 修复：

-1.修复自定义节点方法返回null时报错的问题。
+1.修复自定义节点方法返回 null 时报错的问题。

-2.修复导出pdf文件体积很大的问题。
+2.修复导出 pdf 文件体积很大的问题。

 ## 0.9.1

 修复：

-> 1.修复自定义节点内容时导出图片、svg、pdf报错的问题。
+> 1.修复自定义节点内容时导出图片、svg、pdf 报错的问题。
 >
 > 2.优化节点激活事件的派发，激活节点未改变时不派发事件，短时间派发多次事件时跳过中间事件。
 >
@@ -159,15 +214,15 @@ Demo：
 >
 > 4.修复在节点编辑状态中通过鼠标滚轮缩放画布再退出节点编辑后快捷键失效的问题。
 >
-> 5.修复点击节点也会触发node_dragend事件的问题。
+> 5.修复点击节点也会触发 node_dragend 事件的问题。
 >
-> 6.修复不在格式刷时点击画布和节点也会触发painter_end事件的问题。
+> 6.修复不在格式刷时点击画布和节点也会触发 painter_end 事件的问题。
 >
 > 7.修复在节点文本编辑中和关联线文本编辑中时销毁思维导图文本编辑框未被销毁的问题。

 新增：

-> 1.按住Ctrl键时禁用节点双击事件。
+> 1.按住 Ctrl 键时禁用节点双击事件。
 >
 > 2.支持配置创建新节点时的行为：聚焦且进入编辑、不聚焦、只聚焦。
 >
@@ -175,7 +230,7 @@ Demo：
 >
 > 4.鼠标滚轮行为默认改为上下移动画布；默认改为向前滚动放大画布，向后缩小。
 >
-> 5.在鼠标滚轮行为为上下移动画布时，支持按住Ctrl键进行放大缩小画布。
+> 5.在鼠标滚轮行为为上下移动画布时，支持按住 Ctrl 键进行放大缩小画布。

 Demo：支持配置创建新节点时的行为。

@@ -187,15 +242,15 @@ Demo：支持配置创建新节点时的行为。

 2.鼠标移入概要会高亮其所属节点。

-3.导入和导出xmind文件支持处理概要。
+3.导入和导出 xmind 文件支持处理概要。

 ## 0.8.1

 修复：

-> 1.修复历史记录数据中概要节点的激活状态未被删除的问题，会导致点击概要节点时触发data_change事件。
-> 
-> 2.修复在safari浏览器中运行时，页面空白且控制台抛出异常的问题。
+> 1.修复历史记录数据中概要节点的激活状态未被删除的问题，会导致点击概要节点时触发 data_change 事件。
+>
+> 2.修复在 safari 浏览器中运行时，页面空白且控制台抛出异常的问题。
 >
 > 3.修复缩放画布时图标浮层和备注浮层和节点脱离的问题。
 >
@@ -205,32 +260,31 @@ Demo：支持配置创建新节点时的行为。
 >
 > 6.修复先给自身添加概要，再给下级添加概要会出现概要重叠的问题；修复同时给存在上下级关系的节点添加概要时概要重叠的问题。
 >
-> 7.修复节点数量很多的情况下导出pdf报错的问题。
-
+> 7.修复节点数量很多的情况下导出 pdf 报错的问题。

 新增：

 > 1.新增禁止拖动画布的配置选项。
 >
 > 2.新增禁止双指缩放画布的配置选项。
-> 
-> 3.导出png的方法新增压缩参数；优化大数据量节点导出pdf时体积过大的问题。
 >
-> 4.将节点实例的isParent方法改名为isAncestor，同时新增isParent方法。
+> 3.导出 png 的方法新增压缩参数；优化大数据量节点导出 pdf 时体积过大的问题。
+>
+> 4.将节点实例的 isParent 方法改名为 isAncestor，同时新增 isParent 方法。

 Demo：

 > 1.修复只读模式下仍旧可以搜索替换和编辑大纲的问题。
 >
-> 2.修复节点内容为html标签时大纲无法显示和编辑的问题。
+> 2.修复节点内容为 html 标签时大纲无法显示和编辑的问题。
 >
 > 3.修复同时选中多个节点添加图标时，所有节点图标都会统一为第一个节点的图标的问题。
 >
-> 4.导出操作增加loading。
+> 4.导出操作增加 loading。

 ## 0.8.0-fix.1

-修复：修复直接粘贴的方式创建新节点时如果粘贴的内容带有<>等html标签符号时新创建的节点内容为空的问题。
+修复：修复直接粘贴的方式创建新节点时如果粘贴的内容带有<>等 html 标签符号时新创建的节点内容为空的问题。

 ## 0.8.0

@@ -238,13 +292,13 @@ Demo：

 修复：

-> 1.修复导出图片和svg时关联线的箭头消失的问题。
+> 1.修复导出图片和 svg 时关联线的箭头消失的问题。
 >
 > 2.修复调整容器大小后回到根节点的操作异常的问题。
 >
-> 3.修复插入概要、上移、下移、一键整理布局的快捷键操作没有触发data_change事件的问题。
+> 3.修复插入概要、上移、下移、一键整理布局的快捷键操作没有触发 data_change 事件的问题。
 >
-> 4.修复存在水印时导出图片、svg、pdf时每个节点都会显示边框的问题。
+> 4.修复存在水印时导出图片、svg、pdf 时每个节点都会显示边框的问题。
 >
 > 5.修复容器尺寸改变后没有水印没有重新绘制的问题。
 >
@@ -254,11 +308,11 @@ Demo：

 新增：

-> 1.优化画布DOM结构，将节点、连线、关联线分层渲染。
+> 1.优化画布 DOM 结构，将节点、连线、关联线分层渲染。
 >
 > 2.优化水印插件。
 >
-> 3.setTheme、setThemeConfig、setLayout函数增加不触发重新渲染的参数。
+> 3.setTheme、setThemeConfig、setLayout 函数增加不触发重新渲染的参数。
 >
 > 4.新增插入父节点的命令。
 >
@@ -279,7 +333,7 @@ Demo：
 Demo：

 > 1.修改回到根节点的方法及文案。
-> 
+>
 > 2.修复覆盖方式切换主题时第一次切换不生效的问题。
 >
 > 3.右键菜单新增插入父节点和仅删除当前节点的功能。
@@ -310,7 +364,7 @@ Demo：
 >
 > 2.修复多选节点时在节点上松开鼠标时框选区域不会消失的问题。
 >
-> 3.修复多次粘贴节点时由于节点uid重复造成的渲染异常问题。
+> 3.修复多次粘贴节点时由于节点 uid 重复造成的渲染异常问题。

 Demo：

@@ -339,7 +393,7 @@ Demo：1.修复公式侧边栏组件导致的侧边栏自动关闭问题。
 > 2.支持同时拖拽移动多个节点。
 >
 > 3.支持同时复制、剪切多个节点。
-> 
+>
 > 4.节点标签颜色改为根据标签内容生成，即同样的标签内容会生成相同的颜色。
 >
 > 5.优化子节点的插入：1.同时对多个节点插入子节点时，不进入编辑状态；2.新插入的子节点自动进入激活状态。
@@ -348,7 +402,7 @@ Demo：1.修复公式侧边栏组件导致的侧边栏自动关闭问题。
 >
 > 7.新增同时插入多个同级节点、多个子节点的命令。
 >
-> 8.将节点唯一标识由id全部改为uid，主要影响关联线，之前版本的关联线可能无法正常显示。
+> 8.将节点唯一标识由 id 全部改为 uid，主要影响关联线，之前版本的关联线可能无法正常显示。
 >
 > 9.优化图标合并逻辑，支持扩展库内部分类下的图标。
 >
@@ -368,7 +422,7 @@ Demo：

 > 1.新增思维导图初次加载时适应画布大小的配置选项。
 >
-> 2.新增自动生成dts声明文件的命令。
+> 2.新增自动生成 dts 声明文件的命令。

 ## 0.7.1-fix.1

@@ -380,15 +434,15 @@ Demo：

 > 1.修复关联线端点改变后未保存的问题。
 >
-> 2.修复画布左上角距浏览器窗口不为0时多选节点鼠标移动到边缘时画布滚动异常的问题。
+> 2.修复画布左上角距浏览器窗口不为 0 时多选节点鼠标移动到边缘时画布滚动异常的问题。
 >
-> 3.修复导入存在为标题为空的节点的xmind文件报错的问题。
+> 3.修复导入存在为标题为空的节点的 xmind 文件报错的问题。
 >
-> 4.修复导出的xmind文件在最新版xmind软件上打开时提示已损坏的问题。
+> 4.修复导出的 xmind 文件在最新版 xmind 软件上打开时提示已损坏的问题。
 >
-> 5.修复导出带有贴纸的数据为xmind格式时贴纸无法显示的问题。
+> 5.修复导出带有贴纸的数据为 xmind 格式时贴纸无法显示的问题。
 >
-> 6.修复没有注册select插件时节点右键事件报错的问题。
+> 6.修复没有注册 select 插件时节点右键事件报错的问题。
 >
 > 7.修复注册插件的方法没有去重的问题。

@@ -402,7 +456,7 @@ Demo：
 >
 > 4.删除节点后激活相邻节点。
 >
-> 5.节点数据data中以_开头的字段被认为是自定义字段。
+> 5.节点数据 data 中以\_开头的字段被认为是自定义字段。

 Demo：

@@ -410,7 +464,7 @@ Demo：

 ## 0.7.0

-破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标hover效果。
+破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标 hover 效果。

 修复：

@@ -418,7 +472,7 @@ Demo：
 >
 > 2.修复切换主题时存在关联线的节点样式不会更新的问题。
 >
-> 3.修复全选没有触发node_active事件的问题。
+> 3.修复全选没有触发 node_active 事件的问题。

 新增：

@@ -428,32 +482,32 @@ Demo：
 >
 > 3.新增滚动条插件。
 >
-> 4.支持在url中通过fileURL查询参数打开指定的在线文件。
+> 4.支持在 url 中通过 fileURL 查询参数打开指定的在线文件。
 >
-> 5.鱼骨图支持设置节点margin。
+> 5.鱼骨图支持设置节点 margin。
 >
 > 6.默认关闭双击复位画布。
 >
-> 7.修改导出图片方法的参数,导出pdf时如果思维导图尺寸小于a4纸那么不旋转方向。
+> 7.修改导出图片方法的参数,导出 pdf 时如果思维导图尺寸小于 a4 纸那么不旋转方向。
+>
+> 8.提升导出的图片和 pdf 在高清屏的清晰度。
 >
-> 8.提升导出的图片和pdf在高清屏的清晰度。
-> 
 > 9.插件新增销毁前生命周期函数，解决销毁思维导图时插件的一些副作用没有清除的问题。
 >
 > 10.优化基础样式的设置，修改不影响大小的主题属性时不触发全量渲染。
 >
 > 11.右键多选节点结束时禁止触发节点右键菜单事件，避免触发右键菜单显示。
 >
-> 12.优化Select插件，如果多选节点没有变化，那么不触发激活激活事件。
+> 12.优化 Select 插件，如果多选节点没有变化，那么不触发激活激活事件。
 >
-> 13.node_active事件抛出的激活节点列表不再直接引用内部激活列表。
+> 13.node_active 事件抛出的激活节点列表不再直接引用内部激活列表。
 >
 > 14.优化鼠标按下节点事件逻辑，在右键拖拽画布模式下支持右键按住根节点拖拽画布。

 Demo：

 > 1.不直接引用内部激活节点列表，优化性能。
-> 
+>
 > 2.支持配置是否显示滚动条。
 >
 > 3.删除侧边栏节点样式配置部分的激活节点配置。
@@ -462,13 +516,13 @@ Demo：

 修复：

-> 1.修复导入百度脑图导出的xmind文件报错的问题。
+> 1.修复导入百度脑图导出的 xmind 文件报错的问题。
 >
-> 2.修复mindMap.export方法代码错误。
+> 2.修复 mindMap.export 方法代码错误。

 新增：

-> 1.新增index.d.ts。
+> 1.新增 index.d.ts。
 >
 > 2.支持配置是否开启双击复位思维导图。
 >
@@ -480,29 +534,29 @@ Demo：

 > 1.优化富文本测量元素的逻辑，删除样式的重复设置和节点的重复添加。
 >
-> 2.优化导出图片逻辑，遍历节点转换图片的url时，如果已经是data:URL形式不重复处理。
+> 2.优化导出图片逻辑，遍历节点转换图片的 url 时，如果已经是 data:URL 形式不重复处理。

 新增：

-> 1.去除导出svg方法的第二个参数，改为通过实例化配置。
+> 1.去除导出 svg 方法的第二个参数，改为通过实例化配置。
 >
 > 2.导出图片不再使用外部库。

 Demo：

-> 1.修复单独编辑大纲时能给根节点添加兄弟节点的bug。
+> 1.修复单独编辑大纲时能给根节点添加兄弟节点的 bug。

 ## 0.6.15-fix.2

-修复：修复在Firefox浏览器中富文本节点无法显示的问题。
+修复：修复在 Firefox 浏览器中富文本节点无法显示的问题。

 ## 0.6.15-fix.1

 新增：

-> 1.导出pdf支持根据图片大小分页导出。
+> 1.导出 pdf 支持根据图片大小分页导出。
 >
-> 2.导出pdf支持根据长宽比自动调整方向。
+> 2.导出 pdf 支持根据长宽比自动调整方向。
 >
 > 3.优化展开收起按钮的占位元素：1.没有子节点的节点不渲染该元素；2.根据是否存在子节点动态更新该元素。
 >
@@ -514,9 +568,9 @@ Demo：

 > 1.修复节点文本为空时显示异常问题。
 >
-> 2.导出svg的图形的paddingX和paddingY改为单侧padding。
+> 2.导出 svg 的图形的 paddingX 和 paddingY 改为单侧 padding。
 >
-> 3.修复画布距浏览器窗口左上角不为0时鼠标缩放时不以鼠标为中心的问题。
+> 3.修复画布距浏览器窗口左上角不为 0 时鼠标缩放时不以鼠标为中心的问题。
 >
 > 4.修复节点边框会重合的问题。

@@ -536,7 +590,7 @@ Demo：

 新增：

-> 1.去除创建隐藏输入框，通过navigator.clipboard实现复制粘贴；支持跨浏览器粘贴思维导图节点数据；支持自定义处理剪贴板中的文本数据。
+> 1.去除创建隐藏输入框，通过 navigator.clipboard 实现复制粘贴；支持跨浏览器粘贴思维导图节点数据；支持自定义处理剪贴板中的文本数据。

 Demo：

@@ -562,21 +616,21 @@ Demo：

 修复：

-> 1.修复只读模式下鼠标中键按住节点无法拖动画布的问题。 
+> 1.修复只读模式下鼠标中键按住节点无法拖动画布的问题。
 >
-> 2.修复快速拖动节点几次后会概率性报错的问题。 
+> 2.修复快速拖动节点几次后会概率性报错的问题。
 >
 > 3.修复在移动端激活节点、展开收起时等操作时会拉起输入法的问题。
 >
-> 4.修复主题配置中背景图片为none时会发起一个异常请求的问题。
+> 4.修复主题配置中背景图片为 none 时会发起一个异常请求的问题。

 新增：

-> 1.移动端手势缩放优化: 按线性关系进行缩放、双指位移可以调整画布位置。 
+> 1.移动端手势缩放优化: 按线性关系进行缩放、双指位移可以调整画布位置。
 >
-> 2.去掉异步渲染节点的逻辑，提升创建新节点的速度。 
+> 2.去掉异步渲染节点的逻辑，提升创建新节点的速度。
 >
-> 3.导出图片由html2canvas库改为使用dom-to-image-more库，解决导出富文本节点文字样式丢失的问题。 
+> 3.导出图片由 html2canvas 库改为使用 dom-to-image-more 库，解决导出富文本节点文字样式丢失的问题。
 >
 > 4.非富文本输入框进入编辑状态时取消默认全选。
 >
@@ -586,21 +640,21 @@ Demo：

 > 1.保存视图数据时增加防抖操作，优化性能。
 >
-> 2.一些耗时的操作添加loading效果。
+> 2.一些耗时的操作添加 loading 效果。
 >
 > 3.完善右键菜单和富文本工具条的暗黑模式。

 ## 0.6.12

 修复：
-  
+
 > 1.修复当思维导图全部移出可视区域后小地图中的指示器也会移出小地图区域的问题。
 >
 > 2.修复移动端双指缩放过于灵敏的问题。
 >
 > 3.修复只读模式下按住节点无法拖动画布的问题。
 >
-> 4.修复当思维导图距浏览器窗口左上角不为0时，小地图渲染不正确的问题。
+> 4.修复当思维导图距浏览器窗口左上角不为 0 时，小地图渲染不正确的问题。
 >
 > 5.修复移动节点时新位置的提示块过大的问题。
 >
@@ -612,7 +666,7 @@ Demo：

 新增：

-> 1.节点移动结束事件（node_dragend）增加回调参数，可以获取到移动到节点的uid。
+> 1.节点移动结束事件（node_dragend）增加回调参数，可以获取到移动到节点的 uid。
 >
 > 2.支持通过配置指定内部一些元素添加到的位置。
 >
@@ -642,7 +696,7 @@ Demo：

 新增：1.优化小地图,去除小地图内的节点内容,优化性能。

-Demo：1.新增主题、主题列表新增tab区分。 2.节点图片上传支持输入网络图片地址。 3.节点图片上传支持输入网络图片。
+Demo：1.新增主题、主题列表新增 tab 区分。 2.节点图片上传支持输入网络图片地址。 3.节点图片上传支持输入网络图片。

 ## 0.6.10

@@ -650,25 +704,25 @@ Demo：1.新增主题、主题列表新增tab区分。 2.节点图片上传支

 新增：1.搜索支持搜索空白字符和替换为空白字符。

-Demo：1.支持通过图标按钮调出搜索。 2.支持通过图标按钮切换暗黑模式。 3.优化搜索:鼠标不在搜索区域内不聚焦,解决鼠标不在搜索区域内无法删除输入的文字的问题。 4.调整添加节点图标的界面UI，新增系列节点图标。 5.新增贴纸列表。 6.修复在搜索框回车后输入框焦点丢失的问题。 7.支持点击节点内的图标显示一个图标快捷替换和删除悬浮面板。 
+Demo：1.支持通过图标按钮调出搜索。 2.支持通过图标按钮切换暗黑模式。 3.优化搜索:鼠标不在搜索区域内不聚焦,解决鼠标不在搜索区域内无法删除输入的文字的问题。 4.调整添加节点图标的界面 UI，新增系列节点图标。 5.新增贴纸列表。 6.修复在搜索框回车后输入框焦点丢失的问题。 7.支持点击节点内的图标显示一个图标快捷替换和删除悬浮面板。

 ## 0.6.9-fix.1

 修复：1.修复搜索进行一次单个替换后再全部替换不正确的问题。

-新增：1.不会再直接修改传入的data对象，内部会深拷贝一份。
+新增：1.不会再直接修改传入的 data 对象，内部会深拷贝一份。

 ## 0.6.9

-修复：1.修复给概要节点设置样式概要节点会消失的问题。2.修复自定义节点内容时，二次创建根实例时节点内容不渲染的问题。3.修复节点处于编辑中时添加新节点时新节点的焦点丢失问题。 2.修复连续按tab键无法连续创建子节点的问题。
+修复：1.修复给概要节点设置样式概要节点会消失的问题。2.修复自定义节点内容时，二次创建根实例时节点内容不渲染的问题。3.修复节点处于编辑中时添加新节点时新节点的焦点丢失问题。 2.修复连续按 tab 键无法连续创建子节点的问题。

-新增：1.导出svg时替换svg中存在的`&nbsp;`字符，避免导出的svg报错。 2.支持搜索和替换。
+新增：1.导出 svg 时替换 svg 中存在的`&nbsp;`字符，避免导出的 svg 报错。 2.支持搜索和替换。

 Demo：1.切换主题时支持选择是否覆盖设置过的基础样式。

 ## 0.6.8

-修复：1.修改插入概要的快捷键为Ctrl+G，避免和保存快捷键冲突。 2.修复节点正在编辑时切换富文本编辑配置输入框出现异常的问题。
+修复：1.修改插入概要的快捷键为 Ctrl+G，避免和保存快捷键冲突。 2.修复节点正在编辑时切换富文本编辑配置输入框出现异常的问题。

 新增：1.修改复制、剪切、粘贴逻辑，支持粘贴剪切板中的数据。

@@ -678,17 +732,17 @@ Demo：1.修复基础样式-设置节点外边距未保存的问题。 2.支持

 修复：1.修复节点收起再展开后展开收起按钮占位元素丢失的问题。 2.修复只读模式下可以缩放图片的问题。

-新增：1.支持根据节点实例或节点uid定位到某个节点。 2.修改节点uid的创建方式，导出数据添加节点的uid。
+新增：1.支持根据节点实例或节点 uid 定位到某个节点。 2.修改节点 uid 的创建方式，导出数据添加节点的 uid。

 移除：1.移除节点过渡效果。

-Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式丢失的问题。 3.修复大纲里编辑节点后按回车或Tab键后编辑文本丢失的问题。 4.优化大纲的节点定位，被收起的节点会自动展开。 5.侧边栏按钮支持收起。 6.优化小屏适配。
+Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式丢失的问题。 3.修复大纲里编辑节点后按回车或 Tab 键后编辑文本丢失的问题。 4.优化大纲的节点定位，被收起的节点会自动展开。 5.侧边栏按钮支持收起。 6.优化小屏适配。

 ## 0.6.6

-新增：1.支持导出为Xmind新版文件。2.导入Xmind新版文件支持导入节点中的图片。 3.新增竖向时间轴结构。
+新增：1.支持导出为 Xmind 新版文件。2.导入 Xmind 新版文件支持导入节点中的图片。 3.新增竖向时间轴结构。

-修复：1.TouchEvent插件不再派发click事件，解决移动端点击超链接会打开两个窗口的问题。 2.修复拖拽移动一个节点成为另一个节点的子节点时该节点的父节点指向未更新的问题。 3.修复二级节点拖拽成三级节点时节点边框样式未更新的问题。 4.修复向右生长的结构外其他结构鼠标移入展开收起按钮位置时不会触发按钮显示的问题。
+修复：1.TouchEvent 插件不再派发 click 事件，解决移动端点击超链接会打开两个窗口的问题。 2.修复拖拽移动一个节点成为另一个节点的子节点时该节点的父节点指向未更新的问题。 3.修复二级节点拖拽成三级节点时节点边框样式未更新的问题。 4.修复向右生长的结构外其他结构鼠标移入展开收起按钮位置时不会触发按钮显示的问题。

 优化：1.优化触控板缩放画布时幅度过大的问题。2.刚创建的节点默认全选方便删除默认文本。

@@ -698,7 +752,7 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 ## 0.6.5

-修复：1.修复xmind文件导入报错的问题。 2.修复极少数情况下当节点文本的宽度为小数时显示发生换行的问题。
+修复：1.修复 xmind 文件导入报错的问题。 2.修复极少数情况下当节点文本的宽度为小数时显示发生换行的问题。

 新增：1.打包后的库支持获取内置常量、主题等数据。 2.支持配置鼠标滚轮方向对应的缩放行为。 3.节点图片支持拖拽调整大小。

@@ -732,11 +786,11 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 ## 0.6.0

-破坏性更新：调整了simple-mind-map源码的目录结构，主要影响：1.插件的引入路径需要修改。2.constant文件路径需要修改。
+破坏性更新：调整了 simple-mind-map 源码的目录结构，主要影响：1.插件的引入路径需要修改。2.constant 文件路径需要修改。

-新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。 4.支持控制节点是否允许编辑。 5.新增销毁思维导图的方法。 6.新增触摸事件支持插件。
+新增：1.支持一键缩放至适应画布功能。 2.按住 Ctrl 键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。 4.支持控制节点是否允许编辑。 5.新增销毁思维导图的方法。 6.新增触摸事件支持插件。

-修复：1.修复按住ctrl键多选节点时不会触发节点的click事件的问题。 2.修复清空一个节点后再输入文字时节点样式丢失的问题。
+修复：1.修复按住 ctrl 键多选节点时不会触发节点的 click 事件的问题。 2.修复清空一个节点后再输入文字时节点样式丢失的问题。

 ## 0.5.11

@@ -746,7 +800,7 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 ## 0.5.10

-新增：使用LRU缓存算法优化节点复用逻辑。
+新增：使用 LRU 缓存算法优化节点复用逻辑。

 ## 0.5.10-fix.1

@@ -770,7 +824,7 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 ## 0.5.7

-破坏性更新：富文本模式下导出png改为使用html2canvas转换整个svg，大幅提高导出速度，不过html2canvas存在一个bug，foreignObject元素中的dom节点内联的文字颜色无法识别，所以导出节点的文字颜色是固定的，不过相对于之前的导出基本不可用状态，目前至少能快速顺利的导出。
+破坏性更新：富文本模式下导出 png 改为使用 html2canvas 转换整个 svg，大幅提高导出速度，不过 html2canvas 存在一个 bug，foreignObject 元素中的 dom 节点内联的文字颜色无法识别，所以导出节点的文字颜色是固定的，不过相对于之前的导出基本不可用状态，目前至少能快速顺利的导出。

 优化：优化富文本节点编辑体验。

@@ -784,13 +838,13 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 ## 0.5.5

-新增：1.支持配置导出为png、svg、pdf时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的z-index。 3.支持点击画布外的区域结束节点编辑状态。
+新增：1.支持配置导出为 png、svg、pdf 时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的 z-index。 3.支持点击画布外的区域结束节点编辑状态。

 ## 0.5.5-fix.1

 修复：1.修复节点在画布外编辑时编辑框也在画布外的问题。 2.修改结构后复位变换，防止存在缩放时切换结构后第一次拖动时会发生位置突变的问题。

-优化：1.节点多选时只要节点和选区存在交叉即认为被选中。 
+优化：1.节点多选时只要节点和选区存在交叉即认为被选中。

 ## 0.5.5-fix.2

@@ -800,7 +854,7 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 新增：1.添加新主题。 2.新增时间轴和鱼骨结构。

-修复：1.修复节点右键和画布右键的冲突问题。 2.修复组织结构图、目录组织图等节点拖拽时存在线段未隐藏的bug。
+修复：1.修复节点右键和画布右键的冲突问题。 2.修复组织结构图、目录组织图等节点拖拽时存在线段未隐藏的 bug。

 优化：1.优化组织结构图布局。2.优化目录组织图布局。

@@ -848,25 +902,19 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

     5.优化节点编辑的体验；

-修复：1.修复setData方法不触发历史记录的问题；
+修复：1.修复 setData 方法不触发历史记录的问题；

-修改：从0.5.0版本开始，考虑性能问题，节点激活状态只能修改形状相关的样式：
+修改：从 0.5.0 版本开始，考虑性能问题，节点激活状态只能修改形状相关的样式：

 ```js
-[
-  'fillColor',
-  'borderColor',
-  'borderWidth',
-  'borderDasharray',
-  'borderRadius'
-]
+;['fillColor', 'borderColor', 'borderWidth', 'borderDasharray', 'borderRadius']
 ```

 ## 0.4.7

-优化：1.富文本编辑时初始聚焦时不再默认全选；2.富文本编辑时使用节点填充色作为背景色，避免节点颜色为白色时看不见。 3.节点激活状态切换不再触发历史记录。 4.短时间多次触发历史记录，只会添加最后一次的数据。 5.优化历史记录添加，当有回退时，再次添加新记录时删除当前指针后面的历史数据。 
+优化：1.富文本编辑时初始聚焦时不再默认全选；2.富文本编辑时使用节点填充色作为背景色，避免节点颜色为白色时看不见。 3.节点激活状态切换不再触发历史记录。 4.短时间多次触发历史记录，只会添加最后一次的数据。 5.优化历史记录添加，当有回退时，再次添加新记录时删除当前指针后面的历史数据。

-新增：1.支持导入和导出Markdown格式文件。 2.支持配置插入节点时的初始文字。 3.扩展插入节点和删除节点的命令，支持指定节点。
+新增：1.支持导入和导出 Markdown 格式文件。 2.支持配置插入节点时的初始文字。 3.扩展插入节点和删除节点的命令，支持指定节点。

 ## 0.4.6

@@ -874,11 +922,11 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 优化：1.添加历史数据时过滤和上一次相比没有改变的数据。

-修复：1.修复节点编辑时方向键和方向键导航功能的冲突问题。 2.修复拖拽移动节点时节点id的丢失问题，这会导致关联线丢失。
+修复：1.修复节点编辑时方向键和方向键导航功能的冲突问题。 2.修复拖拽移动节点时节点 id 的丢失问题，这会导致关联线丢失。

 ## 0.4.5

-新增：1.支持关联线。 2.按住根节点也可以拖动画布。3.按住ctrl键可以调整多选节点。
+新增：1.支持关联线。 2.按住根节点也可以拖动画布。3.按住 ctrl 键可以调整多选节点。

 ## 0.4.4

@@ -898,7 +946,7 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 新增：1.新增抛出节点鼠标移入和移除事件；2.节点富文本支持设置背景颜色；3.节点富文本支持清除样式。

-修复：1.Mac系统触控板缩放相反的问题；2.设备window.devicePixelRatio不为1时，当存在富文本节点时导出的图片中富文本节点尺寸会变大的问题。
+修复：1.Mac 系统触控板缩放相反的问题；2.设备 window.devicePixelRatio 不为 1 时，当存在富文本节点时导出的图片中富文本节点尺寸会变大的问题。

 ## 0.4.0

@@ -946,7 +994,7 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 ## 0.2.20

-修复：画布距窗口左上角不为0时节点拖拽出现偏移的问题。
+修复：画布距窗口左上角不为 0 时节点拖拽出现偏移的问题。

 ## 0.2.19

@@ -1000,7 +1048,7 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 ## 0.2.8

-修复：xmind8版本文件导入失败的问题。
+修复：xmind8 版本文件导入失败的问题。

 新增：支持展开到指定层级。

@@ -1008,15 +1056,15 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 修复：根节点添加多个节点爆栈的问题。

-新增：支持导入.xmind文件。
+新增：支持导入.xmind 文件。

 ## 0.2.6

-新增：导出svg增加title标签。
+新增：导出 svg 增加 title 标签。

 ## 0.2.5

-修复：节点展开收起的bug。
+修复：节点展开收起的 bug。

 新增：节点支持自定义线条样式。

@@ -1034,11 +1082,11 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 ## 0.2.1

-新增：支持导出为pdf。
+新增：支持导出为 pdf。

 ## 0.2.0

-新增：经典4主题；支持添加概要；支持自由拖拽；上移节点、下移节点、复制节点、剪切节点、粘贴节点、一键整理布快捷键；库打包；Ctrl+左键多选。
+新增：经典 4 主题；支持添加概要；支持自由拖拽；上移节点、下移节点、复制节点、剪切节点、粘贴节点、一键整理布快捷键；库打包；Ctrl+左键多选。

 ## 0.1.18

@@ -1050,7 +1098,7 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 ## 0.1.16

-新增：节点备注支持markdown及富文本。
+新增：节点备注支持 markdown 及富文本。

 修复：不能选中文字的问题；节点标注在节点激活后无法隐藏问题；超链接、备注、标签等文字编辑时返回键和回车键与思维导图快捷键冲突的问题。

@@ -1064,7 +1112,7 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 ## 0.1.13

-新增：快捷键功能；新增导出为json。
+新增：快捷键功能；新增导出为 json。

 优化：一些细节。

@@ -1074,4 +1122,4 @@ Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式

 ## 0.1.0

-完成基本功能。
+完成基本功能。
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,19 +1,54 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.9.6</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复切换主题时，被收起的节点样式没有改变的问题；</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.主题新增字段，用于设置节点连线箭头的显示位置，头部或者尾部；</p>
+<p>2.主题新增字段，用于设置曲线连接时，根节点连线的起始位置；</p>
+<p>3.Mac 双指触摸事件移动画布增加一点灵敏度；</p>
+<p>4.新增 MOVE_UP_ONE_LEVEL 命令，用于将节点上移一个层级；</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.大纲支持按 Shift+Tab 键将节点上移一个层级；</p>
+<p>2.支持设置节点箭头显示的位置；</p>
+<p>3.支持设置根节点连线的起始位置；</p>
+</blockquote>
+<h2>0.9.5</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复展开收起节点时区间概要会丢失的问题。</p>
+<p>2.修复新创建的关联线位置始终在节点的右侧没有根据相对位置变化的问题。</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.增加设置关联线创建时两个端点初始位置的配置。</p>
+<p>2.增加禁止调整关联线端点位置的配置。</p>
+<p>3.新增手绘风格插件。</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.优化界面在移动端的适配。</p>
+<p>2.支持开启手绘风格。</p>
+</blockquote>
 <h2>0.9.4</h2>
 <p>修复：</p>
 <blockquote>
 <p>1.修复一些情况下，节点显示时的文本区域宽度和编辑时的宽度不一致导致的文本换行不一致的问题。</p>
 <p>2.修复存在渐变色背景的节点富文本编辑时编辑框没有应用渐变的问题。</p>
 <p>3.修复被主题定义了加粗的节点切换主题后文本样式丢失的问题。</p>
-<p>4.修复mac上useLeftKeySelectionRightKeyDrag选项设为true时无法按住ctrl键多选节点的问题。</p>
+<p>4.修复 mac 上 useLeftKeySelectionRightKeyDrag 选项设为 true 时无法按住 ctrl 键多选节点的问题。</p>
 <p>5.修复节点富文本编辑时清除样式后文字样式丢失并且切换主题也不会恢复的问题。</p>
-<p>6.修复删除含有子节点的节点时，data_change_detail事件报错的问题。</p>
+<p>6.修复删除含有子节点的节点时，data_change_detail 事件报错的问题。</p>
 </blockquote>
 <p>新增：</p>
 <blockquote>
-<p>1.主题配置增加lineRadius属性设置直线连接时的圆角大小。</p>
+<p>1.主题配置增加 lineRadius 属性设置直线连接时的圆角大小。</p>
 </blockquote>
 <p>Demo：</p>
 <blockquote>
@@ -27,7 +62,7 @@
 <blockquote>
 <p>1.修复 Safari 浏览器上节点存在图标时文字位置错位的问题。</p>
 <p>2.修复 Chrome 内核版本比较低的浏览器中公式无法渲染的问题。</p>
-<p>3.修复在微前端框架子应用中使用时，new MouseEvent代码执行报错的问题。</p>
+<p>3.修复在微前端框架子应用中使用时，new MouseEvent 代码执行报错的问题。</p>
 <p>4.修复导出图片时节点连线的箭头、关联线的箭头、渐变背景丢失的问题。</p>
 </blockquote>
 <p>新增：</p>
@@ -46,33 +81,33 @@
 <p>修复：</p>
 <blockquote>
 <p>1.修复节点文本含有连续的数字或字母时没有换行的问题。</p>
-<p>2.修复导入含有和当前画布已有节点uid相同的文件时会重复绘制节点的问题。</p>
+<p>2.修复导入含有和当前画布已有节点 uid 相同的文件时会重复绘制节点的问题。</p>
 <p>3.修复当节点数量超出了缓存池的最大数量时，前进回退会导致节点重复渲染的问题。</p>
 <p>4.修复鼠标或触控板水平滚动时画布移动方向相反的问题。</p>
 <p>5.修复节点被销毁时鼠标移入标志没有复位的问题。</p>
-<p>6.修复滚动条插件在initRootNodePosition配置不为默认的[center,center]时位置计算错误的问题。</p>
+<p>6.修复滚动条插件在 initRootNodePosition 配置不为默认的[center,center]时位置计算错误的问题。</p>
 <p>7.修复拖拽画布时鼠标在节点上面松开时拖拽无法停止的问题。</p>
-<p>8.修复当画布容器距浏览器窗口左上角不为0时，view.fit方法计算出来的位置有误差的问题。</p>
+<p>8.修复当画布容器距浏览器窗口左上角不为 0 时，view.fit 方法计算出来的位置有误差的问题。</p>
 <p>9.修复当节点数量比较多时，导出的图片中水印没有完全覆盖整个图片的问题。</p>
 <p>10.修复插入公式报错的问题。</p>
 <p>11.修复节点文本编辑状态中鼠标选择文本时移出编辑框，文字选中状态会丢失的问题。</p>
-<p>12.修复节点富文本编辑时，文本选中范围为null时没有触发rich_text_selection_change事件的问题。</p>
-<p>13.修复node_dragging事件回参里没有node实例的问题。</p>
-<p>14.修复节点数量过多，画布尺寸过大无法导出png的问题。</p>
+<p>12.修复节点富文本编辑时，文本选中范围为 null 时没有触发 rich_text_selection_change 事件的问题。</p>
+<p>13.修复 node_dragging 事件回参里没有 node 实例的问题。</p>
+<p>14.修复节点数量过多，画布尺寸过大无法导出 png 的问题。</p>
 </blockquote>
 <p>新增：</p>
 <blockquote>
-<p>1.修改mousewheel事件,dir标志修改为dirs,支持存储多个方向,优化触控板的双指移动操作。</p>
-<p>2.TextEdit类增加isShowTextEdit方法判断当前是否处在节点编辑状态。</p>
-<p>3.Render类的paste方法改为支持粘贴剪贴板的数据。</p>
+<p>1.修改 mousewheel 事件,dir 标志修改为 dirs,支持存储多个方向,优化触控板的双指移动操作。</p>
+<p>2.TextEdit 类增加 isShowTextEdit 方法判断当前是否处在节点编辑状态。</p>
+<p>3.Render 类的 paste 方法改为支持粘贴剪贴板的数据。</p>
 <p>4.新增将思维导图图形限制在画布内的配置选项。</p>
 <p>5.注册了滚动条插件的情况下，支持配置是否将思维导图限制在画布内。</p>
 <p>6.收起所有节点操作会将思维导图根节点移至画布中心。</p>
 <p>7.支持仅在导出时显示水印的配置选项。</p>
 <p>8.在节点粘贴剪贴板中的图片时，支持自定义处理函数，可以将图片上传到你的服务器。</p>
-<p>9.重构pdf的导出逻辑，导出的pdf尺寸不再是固定的a4，而是思维导图的尺寸，同时删除分页导出的配置。</p>
+<p>9.重构 pdf 的导出逻辑，导出的 pdf 尺寸不再是固定的 a4，而是思维导图的尺寸，同时删除分页导出的配置。</p>
 <p>10.节点连线支持显示箭头，作为主题的一个字段。</p>
-<p>11.最大历史记录数量默认调整为500。</p>
+<p>11.最大历史记录数量默认调整为 500。</p>
 </blockquote>
 <p>Demo：</p>
 <blockquote>
@@ -92,77 +127,77 @@
 </blockquote>
 <h2>0.9.1-fix.1</h2>
 <p>修复：</p>
-<p>1.修复自定义节点方法返回null时报错的问题。</p>
-<p>2.修复导出pdf文件体积很大的问题。</p>
+<p>1.修复自定义节点方法返回 null 时报错的问题。</p>
+<p>2.修复导出 pdf 文件体积很大的问题。</p>
 <h2>0.9.1</h2>
 <p>修复：</p>
 <blockquote>
-<p>1.修复自定义节点内容时导出图片、svg、pdf报错的问题。</p>
+<p>1.修复自定义节点内容时导出图片、svg、pdf 报错的问题。</p>
 <p>2.优化节点激活事件的派发，激活节点未改变时不派发事件，短时间派发多次事件时跳过中间事件。</p>
 <p>3.修复节点处于编辑状态时，通过鼠标滚动移动画布后编辑框和节点脱离的问题。</p>
 <p>4.修复在节点编辑状态中通过鼠标滚轮缩放画布再退出节点编辑后快捷键失效的问题。</p>
-<p>5.修复点击节点也会触发node_dragend事件的问题。</p>
-<p>6.修复不在格式刷时点击画布和节点也会触发painter_end事件的问题。</p>
+<p>5.修复点击节点也会触发 node_dragend 事件的问题。</p>
+<p>6.修复不在格式刷时点击画布和节点也会触发 painter_end 事件的问题。</p>
 <p>7.修复在节点文本编辑中和关联线文本编辑中时销毁思维导图文本编辑框未被销毁的问题。</p>
 </blockquote>
 <p>新增：</p>
 <blockquote>
-<p>1.按住Ctrl键时禁用节点双击事件。</p>
+<p>1.按住 Ctrl 键时禁用节点双击事件。</p>
 <p>2.支持配置创建新节点时的行为：聚焦且进入编辑、不聚焦、只聚焦。</p>
 <p>3.只读模式下搜索时给当前匹配到的节点增加高亮效果。</p>
 <p>4.鼠标滚轮行为默认改为上下移动画布；默认改为向前滚动放大画布，向后缩小。</p>
-<p>5.在鼠标滚轮行为为上下移动画布时，支持按住Ctrl键进行放大缩小画布。</p>
+<p>5.在鼠标滚轮行为为上下移动画布时，支持按住 Ctrl 键进行放大缩小画布。</p>
 </blockquote>
 <p>Demo：支持配置创建新节点时的行为。</p>
 <h2>0.9.0</h2>
 <p>新增：</p>
 <p>1.支持对同一个节点的部分子节点添加概要。</p>
 <p>2.鼠标移入概要会高亮其所属节点。</p>
-<p>3.导入和导出xmind文件支持处理概要。</p>
+<p>3.导入和导出 xmind 文件支持处理概要。</p>
 <h2>0.8.1</h2>
 <p>修复：</p>
 <blockquote>
-<p>1.修复历史记录数据中概要节点的激活状态未被删除的问题，会导致点击概要节点时触发data_change事件。</p>
-<p>2.修复在safari浏览器中运行时，页面空白且控制台抛出异常的问题。</p>
+<p>1.修复历史记录数据中概要节点的激活状态未被删除的问题，会导致点击概要节点时触发 data_change 事件。</p>
+<p>2.修复在 safari 浏览器中运行时，页面空白且控制台抛出异常的问题。</p>
 <p>3.修复缩放画布时图标浮层和备注浮层和节点脱离的问题。</p>
 <p>4.修复只读模式下可以全选节点的问题。</p>
 <p>5.修复富文本模式下节点内容存在 时导出为图片出错的问题。</p>
 <p>6.修复先给自身添加概要，再给下级添加概要会出现概要重叠的问题；修复同时给存在上下级关系的节点添加概要时概要重叠的问题。</p>
-<p>7.修复节点数量很多的情况下导出pdf报错的问题。</p>
+<p>7.修复节点数量很多的情况下导出 pdf 报错的问题。</p>
 </blockquote>
 <p>新增：</p>
 <blockquote>
 <p>1.新增禁止拖动画布的配置选项。</p>
 <p>2.新增禁止双指缩放画布的配置选项。</p>
-<p>3.导出png的方法新增压缩参数；优化大数据量节点导出pdf时体积过大的问题。</p>
-<p>4.将节点实例的isParent方法改名为isAncestor，同时新增isParent方法。</p>
+<p>3.导出 png 的方法新增压缩参数；优化大数据量节点导出 pdf 时体积过大的问题。</p>
+<p>4.将节点实例的 isParent 方法改名为 isAncestor，同时新增 isParent 方法。</p>
 </blockquote>
 <p>Demo：</p>
 <blockquote>
 <p>1.修复只读模式下仍旧可以搜索替换和编辑大纲的问题。</p>
-<p>2.修复节点内容为html标签时大纲无法显示和编辑的问题。</p>
+<p>2.修复节点内容为 html 标签时大纲无法显示和编辑的问题。</p>
 <p>3.修复同时选中多个节点添加图标时，所有节点图标都会统一为第一个节点的图标的问题。</p>
-<p>4.导出操作增加loading。</p>
+<p>4.导出操作增加 loading。</p>
 </blockquote>
 <h2>0.8.0-fix.1</h2>
-<p>修复：修复直接粘贴的方式创建新节点时如果粘贴的内容带有&lt;&gt;等html标签符号时新创建的节点内容为空的问题。</p>
+<p>修复：修复直接粘贴的方式创建新节点时如果粘贴的内容带有&lt;&gt;等 html 标签符号时新创建的节点内容为空的问题。</p>
 <h2>0.8.0</h2>
 <p>破坏性更新：大幅优化部分代码，小幅提升性能，主要是<code>render</code>类，删除无用逻辑、调整不合理的实现、提取重复代码；修改函数名称、函数功能等。</p>
 <p>修复：</p>
 <blockquote>
-<p>1.修复导出图片和svg时关联线的箭头消失的问题。</p>
+<p>1.修复导出图片和 svg 时关联线的箭头消失的问题。</p>
 <p>2.修复调整容器大小后回到根节点的操作异常的问题。</p>
-<p>3.修复插入概要、上移、下移、一键整理布局的快捷键操作没有触发data_change事件的问题。</p>
-<p>4.修复存在水印时导出图片、svg、pdf时每个节点都会显示边框的问题。</p>
+<p>3.修复插入概要、上移、下移、一键整理布局的快捷键操作没有触发 data_change 事件的问题。</p>
+<p>4.修复存在水印时导出图片、svg、pdf 时每个节点都会显示边框的问题。</p>
 <p>5.修复容器尺寸改变后没有水印没有重新绘制的问题。</p>
 <p>6.修复存在水印时小地图渲染非常慢的问题。</p>
 <p>7.修复协同插件当创建新节点时新节点未显示创建人头像的问题。</p>
 </blockquote>
 <p>新增：</p>
 <blockquote>
-<p>1.优化画布DOM结构，将节点、连线、关联线分层渲染。</p>
+<p>1.优化画布 DOM 结构，将节点、连线、关联线分层渲染。</p>
 <p>2.优化水印插件。</p>
-<p>3.setTheme、setThemeConfig、setLayout函数增加不触发重新渲染的参数。</p>
+<p>3.setTheme、setThemeConfig、setLayout 函数增加不触发重新渲染的参数。</p>
 <p>4.新增插入父节点的命令。</p>
 <p>5.新增仅删除当前节点的命令。</p>
 <p>6.插入概要时自动展开子节点。</p>
@@ -192,7 +227,7 @@
 <blockquote>
 <p>1.修复一些情况下多选节点时的框选区域没有消失的问题。</p>
 <p>2.修复多选节点时在节点上松开鼠标时框选区域不会消失的问题。</p>
-<p>3.修复多次粘贴节点时由于节点uid重复造成的渲染异常问题。</p>
+<p>3.修复多次粘贴节点时由于节点 uid 重复造成的渲染异常问题。</p>
 </blockquote>
 <p>Demo：</p>
 <blockquote>
@@ -217,7 +252,7 @@
 <p>5.优化子节点的插入：1.同时对多个节点插入子节点时，不进入编辑状态；2.新插入的子节点自动进入激活状态。</p>
 <p>6.优化兄弟节点的插入：1.支持同时对多个节点插入兄弟节点；2.对根节点调用插入兄弟节点的命令时不再创建子节点。</p>
 <p>7.新增同时插入多个同级节点、多个子节点的命令。</p>
-<p>8.将节点唯一标识由id全部改为uid，主要影响关联线，之前版本的关联线可能无法正常显示。</p>
+<p>8.将节点唯一标识由 id 全部改为 uid，主要影响关联线，之前版本的关联线可能无法正常显示。</p>
 <p>9.优化图标合并逻辑，支持扩展库内部分类下的图标。</p>
 <p>10.关联线：1.双击关联线进入关联线文本编辑模式；2.关联线文本为默认文本的话不保存；3.存在激活节点时点击关联线可直接激活关联线。</p>
 </blockquote>
@@ -231,7 +266,7 @@
 <p>新增：</p>
 <blockquote>
 <p>1.新增思维导图初次加载时适应画布大小的配置选项。</p>
-<p>2.新增自动生成dts声明文件的命令。</p>
+<p>2.新增自动生成 dts 声明文件的命令。</p>
 </blockquote>
 <h2>0.7.1-fix.1</h2>
 <p>修复：修复拖拽节点时没有排除被拖拽节点的下级节点的问题。</p>
@@ -239,11 +274,11 @@
 <p>修复：</p>
 <blockquote>
 <p>1.修复关联线端点改变后未保存的问题。</p>
-<p>2.修复画布左上角距浏览器窗口不为0时多选节点鼠标移动到边缘时画布滚动异常的问题。</p>
-<p>3.修复导入存在为标题为空的节点的xmind文件报错的问题。</p>
-<p>4.修复导出的xmind文件在最新版xmind软件上打开时提示已损坏的问题。</p>
-<p>5.修复导出带有贴纸的数据为xmind格式时贴纸无法显示的问题。</p>
-<p>6.修复没有注册select插件时节点右键事件报错的问题。</p>
+<p>2.修复画布左上角距浏览器窗口不为 0 时多选节点鼠标移动到边缘时画布滚动异常的问题。</p>
+<p>3.修复导入存在为标题为空的节点的 xmind 文件报错的问题。</p>
+<p>4.修复导出的 xmind 文件在最新版 xmind 软件上打开时提示已损坏的问题。</p>
+<p>5.修复导出带有贴纸的数据为 xmind 格式时贴纸无法显示的问题。</p>
+<p>6.修复没有注册 select 插件时节点右键事件报错的问题。</p>
 <p>7.修复注册插件的方法没有去重的问题。</p>
 </blockquote>
 <p>新增：</p>
@@ -252,35 +287,35 @@
 <p>2.重构滚动条插件，优化使用体验。</p>
 <p>3.不完美的解决逻辑结构图、思维导图、目录组织图、组织结构图概要和节点的冲突问题（概要后面应该会重写或删除）。</p>
 <p>4.删除节点后激活相邻节点。</p>
-<p>5.节点数据data中以_开头的字段被认为是自定义字段。</p>
+<p>5.节点数据 data 中以_开头的字段被认为是自定义字段。</p>
 </blockquote>
 <p>Demo：</p>
 <blockquote>
 <p>1.页面增加显示当前核心库版本号。</p>
 </blockquote>
 <h2>0.7.0</h2>
-<p>破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标hover效果。</p>
+<p>破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标 hover 效果。</p>
 <p>修复：</p>
 <blockquote>
 <p>1.修复节点边框尺寸比较大的情况下的的渲染异常问题。</p>
 <p>2.修复切换主题时存在关联线的节点样式不会更新的问题。</p>
-<p>3.修复全选没有触发node_active事件的问题。</p>
+<p>3.修复全选没有触发 node_active 事件的问题。</p>
 </blockquote>
 <p>新增：</p>
 <blockquote>
 <p>1.收起节点时，显示折叠的节点数量。</p>
 <p>2.支持关联线端点的位置跟随鼠标拖拽变化。</p>
 <p>3.新增滚动条插件。</p>
-<p>4.支持在url中通过fileURL查询参数打开指定的在线文件。</p>
-<p>5.鱼骨图支持设置节点margin。</p>
+<p>4.支持在 url 中通过 fileURL 查询参数打开指定的在线文件。</p>
+<p>5.鱼骨图支持设置节点 margin。</p>
 <p>6.默认关闭双击复位画布。</p>
-<p>7.修改导出图片方法的参数,导出pdf时如果思维导图尺寸小于a4纸那么不旋转方向。</p>
-<p>8.提升导出的图片和pdf在高清屏的清晰度。</p>
+<p>7.修改导出图片方法的参数,导出 pdf 时如果思维导图尺寸小于 a4 纸那么不旋转方向。</p>
+<p>8.提升导出的图片和 pdf 在高清屏的清晰度。</p>
 <p>9.插件新增销毁前生命周期函数，解决销毁思维导图时插件的一些副作用没有清除的问题。</p>
 <p>10.优化基础样式的设置，修改不影响大小的主题属性时不触发全量渲染。</p>
 <p>11.右键多选节点结束时禁止触发节点右键菜单事件，避免触发右键菜单显示。</p>
-<p>12.优化Select插件，如果多选节点没有变化，那么不触发激活激活事件。</p>
-<p>13.node_active事件抛出的激活节点列表不再直接引用内部激活列表。</p>
+<p>12.优化 Select 插件，如果多选节点没有变化，那么不触发激活激活事件。</p>
+<p>13.node_active 事件抛出的激活节点列表不再直接引用内部激活列表。</p>
 <p>14.优化鼠标按下节点事件逻辑，在右键拖拽画布模式下支持右键按住根节点拖拽画布。</p>
 </blockquote>
 <p>Demo：</p>
@@ -292,12 +327,12 @@
 <h2>0.6.17</h2>
 <p>修复：</p>
 <blockquote>
-<p>1.修复导入百度脑图导出的xmind文件报错的问题。</p>
-<p>2.修复mindMap.export方法代码错误。</p>
+<p>1.修复导入百度脑图导出的 xmind 文件报错的问题。</p>
+<p>2.修复 mindMap.export 方法代码错误。</p>
 </blockquote>
 <p>新增：</p>
 <blockquote>
-<p>1.新增index.d.ts。</p>
+<p>1.新增 index.d.ts。</p>
 <p>2.支持配置是否开启双击复位思维导图。</p>
 <p>3.拦截富文本编辑时的粘贴操作，去掉格式，只允许粘贴纯文本。</p>
 </blockquote>
@@ -305,24 +340,24 @@
 <p>修复：</p>
 <blockquote>
 <p>1.优化富文本测量元素的逻辑，删除样式的重复设置和节点的重复添加。</p>
-<p>2.优化导出图片逻辑，遍历节点转换图片的url时，如果已经是data:URL形式不重复处理。</p>
+<p>2.优化导出图片逻辑，遍历节点转换图片的 url 时，如果已经是 data:URL 形式不重复处理。</p>
 </blockquote>
 <p>新增：</p>
 <blockquote>
-<p>1.去除导出svg方法的第二个参数，改为通过实例化配置。</p>
+<p>1.去除导出 svg 方法的第二个参数，改为通过实例化配置。</p>
 <p>2.导出图片不再使用外部库。</p>
 </blockquote>
 <p>Demo：</p>
 <blockquote>
-<p>1.修复单独编辑大纲时能给根节点添加兄弟节点的bug。</p>
+<p>1.修复单独编辑大纲时能给根节点添加兄弟节点的 bug。</p>
 </blockquote>
 <h2>0.6.15-fix.2</h2>
-<p>修复：修复在Firefox浏览器中富文本节点无法显示的问题。</p>
+<p>修复：修复在 Firefox 浏览器中富文本节点无法显示的问题。</p>
 <h2>0.6.15-fix.1</h2>
 <p>新增：</p>
 <blockquote>
-<p>1.导出pdf支持根据图片大小分页导出。</p>
-<p>2.导出pdf支持根据长宽比自动调整方向。</p>
+<p>1.导出 pdf 支持根据图片大小分页导出。</p>
+<p>2.导出 pdf 支持根据长宽比自动调整方向。</p>
 <p>3.优化展开收起按钮的占位元素：1.没有子节点的节点不渲染该元素；2.根据是否存在子节点动态更新该元素。</p>
 <p>4.新增禁止鼠标滚轮缩放的配置。</p>
 <p>5.支持传递错误处理函数。</p>
@@ -330,8 +365,8 @@
 <p>修复：</p>
 <blockquote>
 <p>1.修复节点文本为空时显示异常问题。</p>
-<p>2.导出svg的图形的paddingX和paddingY改为单侧padding。</p>
-<p>3.修复画布距浏览器窗口左上角不为0时鼠标缩放时不以鼠标为中心的问题。</p>
+<p>2.导出 svg 的图形的 paddingX 和 paddingY 改为单侧 padding。</p>
+<p>3.修复画布距浏览器窗口左上角不为 0 时鼠标缩放时不以鼠标为中心的问题。</p>
 <p>4.修复节点边框会重合的问题。</p>
 </blockquote>
 <p>Demo：</p>
@@ -345,7 +380,7 @@
 <h2>0.6.14</h2>
 <p>新增：</p>
 <blockquote>
-<p>1.去除创建隐藏输入框，通过navigator.clipboard实现复制粘贴；支持跨浏览器粘贴思维导图节点数据；支持自定义处理剪贴板中的文本数据。</p>
+<p>1.去除创建隐藏输入框，通过 navigator.clipboard 实现复制粘贴；支持跨浏览器粘贴思维导图节点数据；支持自定义处理剪贴板中的文本数据。</p>
 </blockquote>
 <p>Demo：</p>
 <blockquote>
@@ -365,20 +400,20 @@
 <p>1.修复只读模式下鼠标中键按住节点无法拖动画布的问题。</p>
 <p>2.修复快速拖动节点几次后会概率性报错的问题。</p>
 <p>3.修复在移动端激活节点、展开收起时等操作时会拉起输入法的问题。</p>
-<p>4.修复主题配置中背景图片为none时会发起一个异常请求的问题。</p>
+<p>4.修复主题配置中背景图片为 none 时会发起一个异常请求的问题。</p>
 </blockquote>
 <p>新增：</p>
 <blockquote>
 <p>1.移动端手势缩放优化: 按线性关系进行缩放、双指位移可以调整画布位置。</p>
 <p>2.去掉异步渲染节点的逻辑，提升创建新节点的速度。</p>
-<p>3.导出图片由html2canvas库改为使用dom-to-image-more库，解决导出富文本节点文字样式丢失的问题。</p>
+<p>3.导出图片由 html2canvas 库改为使用 dom-to-image-more 库，解决导出富文本节点文字样式丢失的问题。</p>
 <p>4.非富文本输入框进入编辑状态时取消默认全选。</p>
 <p>5.存在一个激活节点时，支持按下中文、数字、英文按键时自动进入文本编辑模式。</p>
 </blockquote>
 <p>Demo：</p>
 <blockquote>
 <p>1.保存视图数据时增加防抖操作，优化性能。</p>
-<p>2.一些耗时的操作添加loading效果。</p>
+<p>2.一些耗时的操作添加 loading 效果。</p>
 <p>3.完善右键菜单和富文本工具条的暗黑模式。</p>
 </blockquote>
 <h2>0.6.12</h2>
@@ -387,7 +422,7 @@
 <p>1.修复当思维导图全部移出可视区域后小地图中的指示器也会移出小地图区域的问题。</p>
 <p>2.修复移动端双指缩放过于灵敏的问题。</p>
 <p>3.修复只读模式下按住节点无法拖动画布的问题。</p>
-<p>4.修复当思维导图距浏览器窗口左上角不为0时，小地图渲染不正确的问题。</p>
+<p>4.修复当思维导图距浏览器窗口左上角不为 0 时，小地图渲染不正确的问题。</p>
 <p>5.修复移动节点时新位置的提示块过大的问题。</p>
 <p>6.修复搜索不能替换为空字符的问题。</p>
 <p>7.修复富文本模式下，搜索替换后换行会丢失的问题。</p>
@@ -395,7 +430,7 @@
 </blockquote>
 <p>新增：</p>
 <blockquote>
-<p>1.节点移动结束事件（node_dragend）增加回调参数，可以获取到移动到节点的uid。</p>
+<p>1.节点移动结束事件（node_dragend）增加回调参数，可以获取到移动到节点的 uid。</p>
 <p>2.支持通过配置指定内部一些元素添加到的位置。</p>
 <p>3.支持格式刷功能。</p>
 <p>4.曲线风格下，根节点的连接线样式支持和其他节点保持一致。</p>
@@ -413,35 +448,35 @@
 <p>修复：1.修复节点文字为白色时编辑的时候看不见的问题。</p>
 <h2>0.6.11</h2>
 <p>新增：1.优化小地图,去除小地图内的节点内容,优化性能。</p>
-<p>Demo：1.新增主题、主题列表新增tab区分。 2.节点图片上传支持输入网络图片地址。 3.节点图片上传支持输入网络图片。</p>
+<p>Demo：1.新增主题、主题列表新增 tab 区分。 2.节点图片上传支持输入网络图片地址。 3.节点图片上传支持输入网络图片。</p>
 <h2>0.6.10</h2>
 <p>修复：1.修复搜索定位到某个节点后删除该节点，再次搜索时搜索结果未更新的问题。 2.修复调整图片大小的按钮在节点操作后没有更新的问题。 3.修复内部数据深拷贝位置不正确的问题。 4.修复富文本节点换行不生效的问题。 5.修复切换主题等场景时节点换行会丢失的问题。</p>
 <p>新增：1.搜索支持搜索空白字符和替换为空白字符。</p>
-<p>Demo：1.支持通过图标按钮调出搜索。 2.支持通过图标按钮切换暗黑模式。 3.优化搜索:鼠标不在搜索区域内不聚焦,解决鼠标不在搜索区域内无法删除输入的文字的问题。 4.调整添加节点图标的界面UI，新增系列节点图标。 5.新增贴纸列表。 6.修复在搜索框回车后输入框焦点丢失的问题。 7.支持点击节点内的图标显示一个图标快捷替换和删除悬浮面板。</p>
+<p>Demo：1.支持通过图标按钮调出搜索。 2.支持通过图标按钮切换暗黑模式。 3.优化搜索:鼠标不在搜索区域内不聚焦,解决鼠标不在搜索区域内无法删除输入的文字的问题。 4.调整添加节点图标的界面 UI，新增系列节点图标。 5.新增贴纸列表。 6.修复在搜索框回车后输入框焦点丢失的问题。 7.支持点击节点内的图标显示一个图标快捷替换和删除悬浮面板。</p>
 <h2>0.6.9-fix.1</h2>
 <p>修复：1.修复搜索进行一次单个替换后再全部替换不正确的问题。</p>
-<p>新增：1.不会再直接修改传入的data对象，内部会深拷贝一份。</p>
+<p>新增：1.不会再直接修改传入的 data 对象，内部会深拷贝一份。</p>
 <h2>0.6.9</h2>
-<p>修复：1.修复给概要节点设置样式概要节点会消失的问题。2.修复自定义节点内容时，二次创建根实例时节点内容不渲染的问题。3.修复节点处于编辑中时添加新节点时新节点的焦点丢失问题。 2.修复连续按tab键无法连续创建子节点的问题。</p>
-<p>新增：1.导出svg时替换svg中存在的<code>&amp;nbsp;</code>字符，避免导出的svg报错。 2.支持搜索和替换。</p>
+<p>修复：1.修复给概要节点设置样式概要节点会消失的问题。2.修复自定义节点内容时，二次创建根实例时节点内容不渲染的问题。3.修复节点处于编辑中时添加新节点时新节点的焦点丢失问题。 2.修复连续按 tab 键无法连续创建子节点的问题。</p>
+<p>新增：1.导出 svg 时替换 svg 中存在的<code>&amp;nbsp;</code>字符，避免导出的 svg 报错。 2.支持搜索和替换。</p>
 <p>Demo：1.切换主题时支持选择是否覆盖设置过的基础样式。</p>
 <h2>0.6.8</h2>
-<p>修复：1.修改插入概要的快捷键为Ctrl+G，避免和保存快捷键冲突。 2.修复节点正在编辑时切换富文本编辑配置输入框出现异常的问题。</p>
+<p>修复：1.修改插入概要的快捷键为 Ctrl+G，避免和保存快捷键冲突。 2.修复节点正在编辑时切换富文本编辑配置输入框出现异常的问题。</p>
 <p>新增：1.修改复制、剪切、粘贴逻辑，支持粘贴剪切板中的数据。</p>
 <p>Demo：1.修复基础样式-设置节点外边距未保存的问题。 2.支持根据主题自动切换为暗黑模式。</p>
 <h2>0.6.7</h2>
 <p>修复：1.修复节点收起再展开后展开收起按钮占位元素丢失的问题。 2.修复只读模式下可以缩放图片的问题。</p>
-<p>新增：1.支持根据节点实例或节点uid定位到某个节点。 2.修改节点uid的创建方式，导出数据添加节点的uid。</p>
+<p>新增：1.支持根据节点实例或节点 uid 定位到某个节点。 2.修改节点 uid 的创建方式，导出数据添加节点的 uid。</p>
 <p>移除：1.移除节点过渡效果。</p>
-<p>Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式丢失的问题。 3.修复大纲里编辑节点后按回车或Tab键后编辑文本丢失的问题。 4.优化大纲的节点定位，被收起的节点会自动展开。 5.侧边栏按钮支持收起。 6.优化小屏适配。</p>
+<p>Demo：1.添加网站首页。 2.修复大纲里创建新节点时节点样式丢失的问题。 3.修复大纲里编辑节点后按回车或 Tab 键后编辑文本丢失的问题。 4.优化大纲的节点定位，被收起的节点会自动展开。 5.侧边栏按钮支持收起。 6.优化小屏适配。</p>
 <h2>0.6.6</h2>
-<p>新增：1.支持导出为Xmind新版文件。2.导入Xmind新版文件支持导入节点中的图片。 3.新增竖向时间轴结构。</p>
-<p>修复：1.TouchEvent插件不再派发click事件，解决移动端点击超链接会打开两个窗口的问题。 2.修复拖拽移动一个节点成为另一个节点的子节点时该节点的父节点指向未更新的问题。 3.修复二级节点拖拽成三级节点时节点边框样式未更新的问题。 4.修复向右生长的结构外其他结构鼠标移入展开收起按钮位置时不会触发按钮显示的问题。</p>
+<p>新增：1.支持导出为 Xmind 新版文件。2.导入 Xmind 新版文件支持导入节点中的图片。 3.新增竖向时间轴结构。</p>
+<p>修复：1.TouchEvent 插件不再派发 click 事件，解决移动端点击超链接会打开两个窗口的问题。 2.修复拖拽移动一个节点成为另一个节点的子节点时该节点的父节点指向未更新的问题。 3.修复二级节点拖拽成三级节点时节点边框样式未更新的问题。 4.修复向右生长的结构外其他结构鼠标移入展开收起按钮位置时不会触发按钮显示的问题。</p>
 <p>优化：1.优化触控板缩放画布时幅度过大的问题。2.刚创建的节点默认全选方便删除默认文本。</p>
 <h2>0.6.5-fix.1</h2>
 <p>修复：1.修复在缩放情况下调整图片大小不正确的问题。</p>
 <h2>0.6.5</h2>
-<p>修复：1.修复xmind文件导入报错的问题。 2.修复极少数情况下当节点文本的宽度为小数时显示发生换行的问题。</p>
+<p>修复：1.修复 xmind 文件导入报错的问题。 2.修复极少数情况下当节点文本的宽度为小数时显示发生换行的问题。</p>
 <p>新增：1.打包后的库支持获取内置常量、主题等数据。 2.支持配置鼠标滚轮方向对应的缩放行为。 3.节点图片支持拖拽调整大小。</p>
 <h2>0.6.4-fix.1</h2>
 <p>新增：1.鼠标滚轮缩放时默认以鼠标当前位置为中心进行缩放，可以通过配置关闭该特性。</p>
@@ -458,14 +493,14 @@
 <h2>0.6.0-fix.1</h2>
 <p>修复：1.修复没有设置过背景样式的情况下销毁思维导图报错的问题。</p>
 <h2>0.6.0</h2>
-<p>破坏性更新：调整了simple-mind-map源码的目录结构，主要影响：1.插件的引入路径需要修改。2.constant文件路径需要修改。</p>
-<p>新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。 4.支持控制节点是否允许编辑。 5.新增销毁思维导图的方法。 6.新增触摸事件支持插件。</p>
-<p>修复：1.修复按住ctrl键多选节点时不会触发节点的click事件的问题。 2.修复清空一个节点后再输入文字时节点样式丢失的问题。</p>
+<p>破坏性更新：调整了 simple-mind-map 源码的目录结构，主要影响：1.插件的引入路径需要修改。2.constant 文件路径需要修改。</p>
+<p>新增：1.支持一键缩放至适应画布功能。 2.按住 Ctrl 键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。 4.支持控制节点是否允许编辑。 5.新增销毁思维导图的方法。 6.新增触摸事件支持插件。</p>
+<p>修复：1.修复按住 ctrl 键多选节点时不会触发节点的 click 事件的问题。 2.修复清空一个节点后再输入文字时节点样式丢失的问题。</p>
 <h2>0.5.11</h2>
 <p>新增：支持关联性文本编辑。</p>
 <p>优化：优化主题配置更新，改变不涉及节点大小的配置不触发节点重新计算。</p>
 <h2>0.5.10</h2>
-<p>新增：使用LRU缓存算法优化节点复用逻辑。</p>
+<p>新增：使用 LRU 缓存算法优化节点复用逻辑。</p>
 <h2>0.5.10-fix.1</h2>
 <p>修复：修复导入出错的问题。</p>
 <h2>0.5.10-fix.2</h2>
@@ -477,14 +512,14 @@
 <p>优化：1.节点位置没有变化不触发位置设置。 2.展开收起状态没有变化不触发按钮更新。</p>
 <p>新增：1.默认改为鼠标移上节点才显示展开收起按钮。 2.支持扩展节点可插入的图标列表。</p>
 <h2>0.5.7</h2>
-<p>破坏性更新：富文本模式下导出png改为使用html2canvas转换整个svg，大幅提高导出速度，不过html2canvas存在一个bug，foreignObject元素中的dom节点内联的文字颜色无法识别，所以导出节点的文字颜色是固定的，不过相对于之前的导出基本不可用状态，目前至少能快速顺利的导出。</p>
+<p>破坏性更新：富文本模式下导出 png 改为使用 html2canvas 转换整个 svg，大幅提高导出速度，不过 html2canvas 存在一个 bug，foreignObject 元素中的 dom 节点内联的文字颜色无法识别，所以导出节点的文字颜色是固定的，不过相对于之前的导出基本不可用状态，目前至少能快速顺利的导出。</p>
 <p>优化：优化富文本节点编辑体验。</p>
 <p>新增：富文本模式下，导入数据、初始化数据、切换主题场景节点样式支持跟随主题变化。</p>
 <h2>0.5.6</h2>
 <p>修复：1.修复短时间快速多次渲染时节点位置错乱的问题。 2.修复节点正在编辑中时拖动画布导致编辑框和节点分离的问题。</p>
 <p>新增：1.添加最大历史记录数限制。</p>
 <h2>0.5.5</h2>
-<p>新增：1.支持配置导出为png、svg、pdf时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的z-index。 3.支持点击画布外的区域结束节点编辑状态。</p>
+<p>新增：1.支持配置导出为 png、svg、pdf 时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的 z-index。 3.支持点击画布外的区域结束节点编辑状态。</p>
 <h2>0.5.5-fix.1</h2>
 <p>修复：1.修复节点在画布外编辑时编辑框也在画布外的问题。 2.修改结构后复位变换，防止存在缩放时切换结构后第一次拖动时会发生位置突变的问题。</p>
 <p>优化：1.节点多选时只要节点和选区存在交叉即认为被选中。</p>
@@ -492,7 +527,7 @@
 <p>修复：1.修复小地图报错。</p>
 <h2>0.5.4</h2>
 <p>新增：1.添加新主题。 2.新增时间轴和鱼骨结构。</p>
-<p>修复：1.修复节点右键和画布右键的冲突问题。 2.修复组织结构图、目录组织图等节点拖拽时存在线段未隐藏的bug。</p>
+<p>修复：1.修复节点右键和画布右键的冲突问题。 2.修复组织结构图、目录组织图等节点拖拽时存在线段未隐藏的 bug。</p>
 <p>优化：1.优化组织结构图布局。2.优化目录组织图布局。</p>
 <h2>0.5.4-fix.1</h2>
 <p>优化：1.优化鱼骨图布局。</p>
@@ -520,25 +555,19 @@

 5.优化节点编辑的体验；
 </code></pre>
-<p>修复：1.修复setData方法不触发历史记录的问题；</p>
-<p>修改：从0.5.0版本开始，考虑性能问题，节点激活状态只能修改形状相关的样式：</p>
-<pre class="hljs"><code>[
-  <span class="hljs-string">&#x27;fillColor&#x27;</span>,
-  <span class="hljs-string">&#x27;borderColor&#x27;</span>,
-  <span class="hljs-string">&#x27;borderWidth&#x27;</span>,
-  <span class="hljs-string">&#x27;borderDasharray&#x27;</span>,
-  <span class="hljs-string">&#x27;borderRadius&#x27;</span>
-]
+<p>修复：1.修复 setData 方法不触发历史记录的问题；</p>
+<p>修改：从 0.5.0 版本开始，考虑性能问题，节点激活状态只能修改形状相关的样式：</p>
+<pre class="hljs"><code>;[<span class="hljs-string">&#x27;fillColor&#x27;</span>, <span class="hljs-string">&#x27;borderColor&#x27;</span>, <span class="hljs-string">&#x27;borderWidth&#x27;</span>, <span class="hljs-string">&#x27;borderDasharray&#x27;</span>, <span class="hljs-string">&#x27;borderRadius&#x27;</span>]
 </code></pre>
 <h2>0.4.7</h2>
 <p>优化：1.富文本编辑时初始聚焦时不再默认全选；2.富文本编辑时使用节点填充色作为背景色，避免节点颜色为白色时看不见。 3.节点激活状态切换不再触发历史记录。 4.短时间多次触发历史记录，只会添加最后一次的数据。 5.优化历史记录添加，当有回退时，再次添加新记录时删除当前指针后面的历史数据。</p>
-<p>新增：1.支持导入和导出Markdown格式文件。 2.支持配置插入节点时的初始文字。 3.扩展插入节点和删除节点的命令，支持指定节点。</p>
+<p>新增：1.支持导入和导出 Markdown 格式文件。 2.支持配置插入节点时的初始文字。 3.扩展插入节点和删除节点的命令，支持指定节点。</p>
 <h2>0.4.6</h2>
 <p>新增：1.关联线支持调整控制点。</p>
 <p>优化：1.添加历史数据时过滤和上一次相比没有改变的数据。</p>
-<p>修复：1.修复节点编辑时方向键和方向键导航功能的冲突问题。 2.修复拖拽移动节点时节点id的丢失问题，这会导致关联线丢失。</p>
+<p>修复：1.修复节点编辑时方向键和方向键导航功能的冲突问题。 2.修复拖拽移动节点时节点 id 的丢失问题，这会导致关联线丢失。</p>
 <h2>0.4.5</h2>
-<p>新增：1.支持关联线。 2.按住根节点也可以拖动画布。3.按住ctrl键可以调整多选节点。</p>
+<p>新增：1.支持关联线。 2.按住根节点也可以拖动画布。3.按住 ctrl 键可以调整多选节点。</p>
 <h2>0.4.4</h2>
 <p>新增：支持响应鼠标的横向滚动。</p>
 <h2>0.4.3</h2>
@@ -548,7 +577,7 @@
 <p>新增：<code>Node</code>类的<code>setText</code>方法增加第二个参数，以支持设置富文本内容。</p>
 <h2>0.4.1</h2>
 <p>新增：1.新增抛出节点鼠标移入和移除事件；2.节点富文本支持设置背景颜色；3.节点富文本支持清除样式。</p>
-<p>修复：1.Mac系统触控板缩放相反的问题；2.设备window.devicePixelRatio不为1时，当存在富文本节点时导出的图片中富文本节点尺寸会变大的问题。</p>
+<p>修复：1.Mac 系统触控板缩放相反的问题；2.设备 window.devicePixelRatio 不为 1 时，当存在富文本节点时导出的图片中富文本节点尺寸会变大的问题。</p>
 <h2>0.4.0</h2>
 <p>新增：节点支持富文本编辑。</p>
 <h2>0.3.4</h2>
@@ -572,7 +601,7 @@
 <h2>0.2.21</h2>
 <p>新增：支持节点横线风格。</p>
 <h2>0.2.20</h2>
-<p>修复：画布距窗口左上角不为0时节点拖拽出现偏移的问题。</p>
+<p>修复：画布距窗口左上角不为 0 时节点拖拽出现偏移的问题。</p>
 <h2>0.2.19</h2>
 <p>修复：没有激活节点时随便按什么键都会触发自动聚焦的问题。</p>
 <h2>0.2.18</h2>
@@ -599,15 +628,15 @@
 <h2>0.2.9</h2>
 <p>新增：支持新建、打开、保存到电脑本地文件。</p>
 <h2>0.2.8</h2>
-<p>修复：xmind8版本文件导入失败的问题。</p>
+<p>修复：xmind8 版本文件导入失败的问题。</p>
 <p>新增：支持展开到指定层级。</p>
 <h2>0.2.7</h2>
 <p>修复：根节点添加多个节点爆栈的问题。</p>
-<p>新增：支持导入.xmind文件。</p>
+<p>新增：支持导入.xmind 文件。</p>
 <h2>0.2.6</h2>
-<p>新增：导出svg增加title标签。</p>
+<p>新增：导出 svg 增加 title 标签。</p>
 <h2>0.2.5</h2>
-<p>修复：节点展开收起的bug。</p>
+<p>修复：节点展开收起的 bug。</p>
 <p>新增：节点支持自定义线条样式。</p>
 <h2>0.2.4</h2>
 <p>新增：节点支持多种形状。</p>
@@ -616,22 +645,22 @@
 <h2>0.2.2</h2>
 <p>修复：输入字符串'/'和快捷键'/'冲突问题。</p>
 <h2>0.2.1</h2>
-<p>新增：支持导出为pdf。</p>
+<p>新增：支持导出为 pdf。</p>
 <h2>0.2.0</h2>
-<p>新增：经典4主题；支持添加概要；支持自由拖拽；上移节点、下移节点、复制节点、剪切节点、粘贴节点、一键整理布快捷键；库打包；Ctrl+左键多选。</p>
+<p>新增：经典 4 主题；支持添加概要；支持自由拖拽；上移节点、下移节点、复制节点、剪切节点、粘贴节点、一键整理布快捷键；库打包；Ctrl+左键多选。</p>
 <h2>0.1.18</h2>
 <p>修复：节点图标不能删除的问题；工具按钮置灰仍然可以点击的问题。</p>
 <h2>0.1.17</h2>
 <p>新增：增加只读模式。</p>
 <h2>0.1.16</h2>
-<p>新增：节点备注支持markdown及富文本。</p>
+<p>新增：节点备注支持 markdown 及富文本。</p>
 <p>修复：不能选中文字的问题；节点标注在节点激活后无法隐藏问题；超链接、备注、标签等文字编辑时返回键和回车键与思维导图快捷键冲突的问题。</p>
 <h2>0.1.15</h2>
 <p>新增：状态数据支持保存激活状态、视图状态（拖动位置、缩放值）；支持节点拖拽。</p>
 <h2>0.1.14</h2>
 <p>修复：存在激活节点时设置主题存在的问题。</p>
 <h2>0.1.13</h2>
-<p>新增：快捷键功能；新增导出为json。</p>
+<p>新增：快捷键功能；新增导出为 json。</p>
 <p>优化：一些细节。</p>
 <h2>0.1.12</h2>
 <p>新增：本地存储；右键菜单功能等。</p>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -108,6 +108,8 @@ const mindMap = new MindMap({
 | handleNodePasteImg（v0.9.2+）     | null 或 Function | null  | 在节点上粘贴剪贴板中的图片的处理方法，默认是转换为data:url数据插入到节点中，你可以通过该方法来将图片数据上传到服务器，实现保存图片的url。可以传递一个异步方法，接收Blob类型的图片数据，需要返回指定结构：{ url, size: {width, height} }  |
 | isLimitMindMapInCanvas（v0.9.2+）     | Boolean |  false | 是否将思维导图限制在画布内。比如向右拖动时，思维导图图形的最左侧到达画布中心时将无法继续向右拖动，其他同理 |
 | isLimitMindMapInCanvasWhenHasScrollbar（v0.9.2+）     | Boolean |  true | 当注册了滚动条插件（Scrollbar）时，是否将思维导图限制在画布内，isLimitMindMapInCanvas配置不再起作用 |
+| associativeLineInitPointsPosition（v0.9.5+）     | null / { from, to } | { from: '', to: '' }  | 默认情况下，新创建的关联线两个端点的位置是根据两个节点中心点的相对位置来计算的，如果你想固定位置，可以通过这个选项来配置。from和to都不传，则都自动计算，如果只传一个，另一个则会自动计算。from和to可选值：left、top、bottom、right |
+| enableAdjustAssociativeLinePoints（v0.9.5+）     | Boolean | true  | 是否允许调整关联线两个端点的位置 |

 ### 数据结构

@@ -531,6 +533,7 @@ mindMap.updateConfig({
 | INSERT_FORMULA（v0.7.2+）           |  给节点插入数学公式，操作节点为当前激活的节点或指定节点   | formula（要插入的数学公式，LaTeX 语法）, appointNodes（可选，指定要插入公式的节点，多个节点可以传数组，否则默认为当前激活的节点） |
 | INSERT_PARENT_NODE（v0.8.0+）           |  给指定的节点插入父节点，操作节点为当前激活的节点或指定节点   | openEdit（是否激活新插入的节点并进入编辑模式，默认为`true`）、 appointNodes（可选，指定要插入父节点的节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考[exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js)） |
 | REMOVE_CURRENT_NODE（v0.8.0+）           |   仅删除当前节点，操作节点为当前激活的节点或指定节点   | appointNodes（可选，指定要删除的节点，指定多个节点可以传一个数组） |
+| MOVE_UP_ONE_LEVEL（v0.9.6+）           |  将指定节点上移一个层级    | node（可选，指定要上移层级的节点，不传则为当前激活节点中的第一个） |

 ### setData(data)

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -531,6 +531,18 @@
 <td>true</td>
 <td>当注册了滚动条插件（Scrollbar）时，是否将思维导图限制在画布内，isLimitMindMapInCanvas配置不再起作用</td>
 </tr>
+<tr>
+<td>associativeLineInitPointsPosition（v0.9.5+）</td>
+<td>null / { from, to }</td>
+<td>{ from: '', to: '' }</td>
+<td>默认情况下，新创建的关联线两个端点的位置是根据两个节点中心点的相对位置来计算的，如果你想固定位置，可以通过这个选项来配置。from和to都不传，则都自动计算，如果只传一个，另一个则会自动计算。from和to可选值：left、top、bottom、right</td>
+</tr>
+<tr>
+<td>enableAdjustAssociativeLinePoints（v0.9.5+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>是否允许调整关联线两个端点的位置</td>
+</tr>
 </tbody>
 </table>
 <h3>数据结构</h3>
@@ -1279,6 +1291,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <td>仅删除当前节点，操作节点为当前激活的节点或指定节点</td>
 <td>appointNodes（可选，指定要删除的节点，指定多个节点可以传一个数组）</td>
 </tr>
+<tr>
+<td>MOVE_UP_ONE_LEVEL（v0.9.6+）</td>
+<td>将指定节点上移一个层级</td>
+<td>node（可选，指定要上移层级的节点，不传则为当前激活节点中的第一个）</td>
+</tr>
 </tbody>
 </table>
 <h3>setData(data)</h3>
--- a/web/src/pages/Doc/zh/handDrawnLikeStyle/index.md
+++ b/web/src/pages/Doc/zh/handDrawnLikeStyle/index.md
@@ -0,0 +1,102 @@
+# HandDrawnLikeStyle 收费插件
+
+> 关于收费
+>
+> mind-map 是一个 MIT 协议的开源项目，理论上只要保留 mind-map 的版权声明，无论是否商用都不收费，这个协议以后也不会改变。另外无论是在线版，还是客户端都不会考虑收费。但是为了项目的可持续发展，会通过一些方式来获取收益，比如现有的赞助方式。而收费插件是第二个方式，基本原则是基本功能、核心功能、必要功能不收费，而可有可无的附加功能可能会做成收费的。
+>
+> 最后，收费仅针对开发者，如果仅是在线版或者客户端的思维导图用户是无需付费的，所有功能均可免费使用。
+
+HandDrawnLikeStyle 是第一个收费插件，功能是提供手绘风格的样式，也就是节点的连线、形状会变成手绘的样式，就像下面这样：
+
+<img src="../../../../assets/img/docs/手绘风格.png" style="width: 800px" />
+
+你也可以在在线版中通过【基础样式】-【是否开启手绘风格】设置来开启手绘风格样式进行尝试。
+
+内部实现是通过[rough](https://github.com/rough-stuff/rough)库，所以如果你有精力，也可以自己基于这个库来实现这个插件。
+
+## 收费
+
+现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址，然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。
+
+价格：
+
+1.￥ 19.9，仅包含打包后的文件，即.cjs.min.js、.esm.min.js 两种格式的文件。
+
+2.￥ 29.9，包含未打包的源码和打包后的文件。
+
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+
+## 注册
+
+1.引用打包后的文件：
+
+```js
+import MindMap from 'simple-mind-map'
+import HandDrawnLikeStyle from 'handDrawnLikeStyle.cjs.min.js'
+// 或 import HandDrawnLikeStyle from 'handDrawnLikeStyle.esm.min.js'
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+```
+
+2.引用未打包的源码
+
+可以先进入到插件目录执行：
+
+```bash
+npm link
+```
+
+然后进入到你的项目根目录执行：
+
+```bash
+npm link simple-mind-map-plugin-handdrawnlikestyle
+```
+
+然后就可以直接导入进行使用：
+
+```js
+import MindMap from 'simple-mind-map'
+import HandDrawnLikeStyle from 'simple-mind-map-plugin-handdrawnlikestyle'
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.handDrawnLikeStyle`获取到该实例。
+
+注册该插件后，无需执行其他方法，手绘风格即可生效。
+
+如果你是使用 mindMap.addPlugin 方法来动态注册的组件，那么需要调用一次重新渲染的方法：
+
+```js
+mindMap.addPlugin(HandDrawnLikeStyle)
+mindMap.reRender()
+```
+
+## 方法
+
+以下方法你应该不太会用到。
+
+### createPath(svgPathStr)
+
+- `svgPathStr`：SVG Path字符串
+
+创建一个手绘风格的路径节点，返回SVG的Path节点。
+
+### createPolygon(points)
+
+- `points`：点位数组。
+
+```js
+points：[
+    [x1, y1],
+    ...
+]
+```
+
+创建一个手绘风格的多边形节点，返回SVG的Path节点。
+
+### transformPath(svgPathStr)
+
+将SVG Path字符串转换成手绘风格的SVG Path字符串。
--- a/web/src/pages/Doc/zh/handDrawnLikeStyle/index.vue
+++ b/web/src/pages/Doc/zh/handDrawnLikeStyle/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <h1>HandDrawnLikeStyle 收费插件</h1>
+<blockquote>
+<p>关于收费</p>
+<p>mind-map 是一个 MIT 协议的开源项目，理论上只要保留 mind-map 的版权声明，无论是否商用都不收费，这个协议以后也不会改变。另外无论是在线版，还是客户端都不会考虑收费。但是为了项目的可持续发展，会通过一些方式来获取收益，比如现有的赞助方式。而收费插件是第二个方式，基本原则是基本功能、核心功能、必要功能不收费，而可有可无的附加功能可能会做成收费的。</p>
+<p>最后，收费仅针对开发者，如果仅是在线版或者客户端的思维导图用户是无需付费的，所有功能均可免费使用。</p>
+</blockquote>
+<p>HandDrawnLikeStyle 是第一个收费插件，功能是提供手绘风格的样式，也就是节点的连线、形状会变成手绘的样式，就像下面这样：</p>
+<img src="../../../../assets/img/docs/手绘风格.png" style="width: 800px" />
+<p>你也可以在在线版中通过【基础样式】-【是否开启手绘风格】设置来开启手绘风格样式进行尝试。</p>
+<p>内部实现是通过<a href="https://github.com/rough-stuff/rough">rough</a>库，所以如果你有精力，也可以自己基于这个库来实现这个插件。</p>
+<h2>收费</h2>
+<p>现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址，然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。</p>
+<p>价格：</p>
+<p>1.￥ 19.9，仅包含打包后的文件，即.cjs.min.js、.esm.min.js 两种格式的文件。</p>
+<p>2.￥ 29.9，包含未打包的源码和打包后的文件。</p>
+<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+<h2>注册</h2>
+<p>1.引用打包后的文件：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> HandDrawnLikeStyle <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;handDrawnLikeStyle.cjs.min.js&#x27;</span>
+<span class="hljs-comment">// 或 import HandDrawnLikeStyle from &#x27;handDrawnLikeStyle.esm.min.js&#x27;</span>
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+</code></pre>
+<p>2.引用未打包的源码</p>
+<p>可以先进入到插件目录执行：</p>
+<pre class="hljs"><code>npm link
+</code></pre>
+<p>然后进入到你的项目根目录执行：</p>
+<pre class="hljs"><code>npm link simple-mind-map-plugin-handdrawnlikestyle
+</code></pre>
+<p>然后就可以直接导入进行使用：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> HandDrawnLikeStyle <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map-plugin-handdrawnlikestyle&#x27;</span>
+
+MindMap.usePlugin(HandDrawnLikeStyle)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.handDrawnLikeStyle</code>获取到该实例。</p>
+<p>注册该插件后，无需执行其他方法，手绘风格即可生效。</p>
+<p>如果你是使用 mindMap.addPlugin 方法来动态注册的组件，那么需要调用一次重新渲染的方法：</p>
+<pre class="hljs"><code>mindMap.addPlugin(HandDrawnLikeStyle)
+mindMap.reRender()
+</code></pre>
+<h2>方法</h2>
+<p>以下方法你应该不太会用到。</p>
+<h3>createPath(svgPathStr)</h3>
+<ul>
+<li><code>svgPathStr</code>：SVG Path字符串</li>
+</ul>
+<p>创建一个手绘风格的路径节点，返回SVG的Path节点。</p>
+<h3>createPolygon(points)</h3>
+<ul>
+<li><code>points</code>：点位数组。</li>
+</ul>
+<pre class="hljs"><code>points：[
+    [x1, y1],
+    ...
+]
+</code></pre>
+<p>创建一个手绘风格的多边形节点，返回SVG的Path节点。</p>
+<h3>transformPath(svgPathStr)</h3>
+<p>将SVG Path字符串转换成手绘风格的SVG Path字符串。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -1,6 +1,6 @@
 # 简介

-`simple-mind-map`是一个简单&强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。
+`simple-mind-map`【中文名：思绪思维导图】是一个简单&强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。

 > 如果你只是想使用思维导图，你也完全可以把本项目的demo作为一个普通的在线思维导图工具使用。点击右上角的【在线示例】开始使用吧。
 >
@@ -278,4 +278,18 @@
        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>建明</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/汪津合.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>汪津合</p>
+    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>博文</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/慕智打印-兰兰.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>慕智打印-兰兰</p>
+    </div>
 </div>
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -1,24 +1,24 @@
 <template>
  <div>
    <h1>简介</h1>
-<p><code>simple-mind-map</code>是一个简单&amp;强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。</p>
+<p><code>simple-mind-map</code>【中文名：思绪思维导图】是一个简单&amp;强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。</p>
 <blockquote>
 <p>如果你只是想使用思维导图，你也完全可以把本项目的demo作为一个普通的在线思维导图工具使用。点击右上角的【在线示例】开始使用吧。</p>
 <p>另外也提供了客户端可供下载，支持<code>Windows</code>、<code>Mac</code>及<code>Linux</code>，<a href="/mind-map/#/doc/zh/client">点此了解更多</a>。</p>
 </blockquote>
 <h2>特性</h2>
 <ul>
-<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
-<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
-<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
-<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
-<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容</label></li>
-<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">支持画布拖动、缩放</label></li>
-<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
-<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
-<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条</label></li>
-<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">提供丰富的配置，满足各种场景各种使用习惯</label></li>
-<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">支持协同编辑</label></li>
+<li><input type="checkbox" id="checkbox0" checked="true" /><label for="checkbox0">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
+<li><input type="checkbox" id="checkbox1" checked="true" /><label for="checkbox1">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
+<li><input type="checkbox" id="checkbox2" checked="true" /><label for="checkbox2">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
+<li><input type="checkbox" id="checkbox3" checked="true" /><label for="checkbox3">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
+<li><input type="checkbox" id="checkbox4" checked="true" /><label for="checkbox4">节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容</label></li>
+<li><input type="checkbox" id="checkbox5" checked="true" /><label for="checkbox5">支持画布拖动、缩放</label></li>
+<li><input type="checkbox" id="checkbox6" checked="true" /><label for="checkbox6">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
+<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
+<li><input type="checkbox" id="checkbox8" checked="true" /><label for="checkbox8">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条</label></li>
+<li><input type="checkbox" id="checkbox9" checked="true" /><label for="checkbox9">提供丰富的配置，满足各种场景各种使用习惯</label></li>
+<li><input type="checkbox" id="checkbox10" checked="true" /><label for="checkbox10">支持协同编辑</label></li>
 </ul>
 <h2>仓库目录介绍</h2>
 <p>1.<code>simple-mind-map</code></p>
@@ -26,11 +26,11 @@
 <p>2.<code>web</code></p>
 <p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
 <ul>
-<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
-<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
-<li><input type="checkbox" id="checkbox46" checked="true" /><label for="checkbox46">右键菜单，支持展开、收起、整理布局等操作</label></li>
-<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
+<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
+<li><input type="checkbox" id="checkbox13" checked="true" /><label for="checkbox13">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
+<li><input type="checkbox" id="checkbox14" checked="true" /><label for="checkbox14">右键菜单，支持展开、收起、整理布局等操作</label></li>
+<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
 </ul>
 <p>提供文档页面服务。</p>
 <p>3.<code>dist</code></p>
@@ -235,6 +235,20 @@
        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>建明</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/汪津合.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>汪津合</p>
+    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>博文</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/慕智打印-兰兰.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>慕智打印-兰兰</p>
+    </div>
 </div>
  </div>
 </template>
--- a/web/src/pages/Doc/zh/start/index.md
+++ b/web/src/pages/Doc/zh/start/index.md
@@ -188,4 +188,8 @@ import MindMap from "simple-mind-map/dist/simpleMindMap.umd.min"
 resolve: { alias: { stream: "stream-browserify" } }
 ```

-不同的打包工具可能具体配置不一样，原理就是排除`stream`依赖。
+不同的打包工具可能具体配置不一样，原理就是排除`stream`依赖。
+
+### 4.点击【新建】、【打开】、【另存为】按钮时提示浏览器不支持，或者非https协议。
+
+浏览器上操作电脑本地文件使用的是[window.showOpenFilePicker](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showOpenFilePicker)api，如果不支持，要么是浏览器不支持这个API，要么是因为页面非https协议，你可以按F12，或者在页面通过鼠标右键菜单中的【检查】打开浏览器控制台，在其中的【控制台】或【console】tab中输入`window.showOpenFilePicker`按回车，如果返回`undefined`则代表不支持，如果返回的不是这个，而页面依旧提示提示浏览器不支持，或者非https协议，那么可以提交issue，或者联系作者。
--- a/web/src/pages/Doc/zh/start/index.vue
+++ b/web/src/pages/Doc/zh/start/index.vue
@@ -121,6 +121,8 @@ npm run build
 <pre class="hljs"><code>resolve: { <span class="hljs-attr">alias</span>: { <span class="hljs-attr">stream</span>: <span class="hljs-string">&quot;stream-browserify&quot;</span> } }
 </code></pre>
 <p>不同的打包工具可能具体配置不一样，原理就是排除<code>stream</code>依赖。</p>
+<h3>4.点击【新建】、【打开】、【另存为】按钮时提示浏览器不支持，或者非https协议。</h3>
+<p>浏览器上操作电脑本地文件使用的是<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showOpenFilePicker">window.showOpenFilePicker</a>api，如果不支持，要么是浏览器不支持这个API，要么是因为页面非https协议，你可以按F12，或者在页面通过鼠标右键菜单中的【检查】打开浏览器控制台，在其中的【控制台】或【console】tab中输入<code>window.showOpenFilePicker</code>按回车，如果返回<code>undefined</code>则代表不支持，如果返回的不是这个，而页面依旧提示提示浏览器不支持，或者非https协议，那么可以提交issue，或者联系作者。</p>

  </div>
 </template>
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@@ -45,7 +45,15 @@ import {walk, ...} from 'simple-mind-map/src/utils'
 示例：

 ```js
-walk(tree, null, () => {}, () => {}, false, 0, 0)
+walk(
+  tree,
+  null,
+  () => {},
+  () => {},
+  false,
+  0,
+  0
+)
 ```

 #### bfsWalk(root, callback)
@@ -86,7 +94,7 @@ copyRenderTree({}, this.mindMap.renderer.renderTree)

 - `removeActiveState`：`Boolean`，默认为`false`，是否移除节点的激活状态

- `removeId`：v0.7.3-fix.1+，是否移除节点数据中的uid，默认为`true`
+- `removeId`：v0.7.3-fix.1+，是否移除节点数据中的 uid，默认为`true`

 > - `keepId`： （原第四个参数）`Boolean`，默认为`false`，是否保留被复制节点的`id`，默认会删除`id`防止节点`id`重复，但是对于移动节点的场景，节点原`id`需要保留。

@@ -98,7 +106,7 @@ copyNodeTree({}, node)

 #### imgToDataUrl(src)

-图片转成dataURL
+图片转成 dataURL

 #### downloadFile(file, fileName)

@@ -137,12 +145,14 @@ copyNodeTree({}, node)
 测量文本的宽高，返回值：

 ```js
-{ width, height }
+{
+  width, height
+}
 ```

 #### getTextFromHtml(html)

-提取html字符串里的纯文本内容。
+提取 html 字符串里的纯文本内容。

 #### readBlob(blob)

@@ -158,8 +168,8 @@ copyNodeTree({}, node)

 ```js
 {
-  type,// 数据的文件类型
-  base64// base64数据
+  type, // 数据的文件类型
+    base64 // base64数据
 }
 ```

@@ -167,14 +177,13 @@ copyNodeTree({}, node)

 > v0.6.6+

- `src`：图片的url
+- `src`：图片的 url

 获取图片的大小。返回：

 ```js
 {
-  width,
-  height
+  width, height
 }
 ```

@@ -182,14 +191,14 @@ copyNodeTree({}, node)

 > v0.6.8+

- `imgFile`：图片类型的File对象
+- `imgFile`：图片类型的 File 对象

 加载图片，返回：

 ```js
 {
-  url,// DataUrl
-  size// { width, height } 图片宽高
+  url, // DataUrl
+    size // { width, height } 图片宽高
 }
 ```

@@ -203,13 +212,13 @@ copyNodeTree({}, node)

 > v0.6.10+

-移除html字符串中节点的内联样式。
+移除 html 字符串中节点的内联样式。

 #### addHtmlStyle(html, tag, style)

 > v0.6.10+

-给html标签中指定的标签添加内联样式。
+给 html 标签中指定的标签添加内联样式。

 #### checkIsRichText(str)

@@ -267,7 +276,7 @@ copyNodeTree({}, node)

 > v0.7.2+

- `el`：DOM节点，可聚焦的元素，一般为输入框元素。
+- `el`：DOM 节点，可聚焦的元素，一般为输入框元素。

 聚焦指定输入框。

@@ -275,7 +284,7 @@ copyNodeTree({}, node)

 > v0.7.2+

- `el`：DOM节点，可聚焦的元素，一般为输入框元素。
+- `el`：DOM 节点，可聚焦的元素，一般为输入框元素。

 聚焦并全选指定输入框。

@@ -297,9 +306,9 @@ copyNodeTree({}, node)

 - `createNewId`：v0.7.3-fix.1+，`Boolean`，默认为`false`，即如果节点不存在`uid`的话，会创建新的`uid`。如果传`true`，那么无论节点数据原来是否存在`uid`，都会创建新的`uid`

-给指定的节点列表树数据添加uid（如果uid不存在的话），会修改原数据。
+给指定的节点列表树数据添加 uid（如果 uid 不存在的话），会修改原数据。

-#### getNodeIndex(node) 
+#### getNodeIndex(node)

 > v0.7.2+

@@ -364,7 +373,7 @@ copyNodeTree({}, node)

 获取节点在兄弟节点中的位置索引。

-#### getNodeIndexInNodeList(node, nodeList) 
+#### getNodeIndexInNodeList(node, nodeList)

 > v0.8.0+

@@ -386,8 +395,7 @@ copyNodeTree({}, node)

 ```js
 {
-  text,
-  img
+  text, img
 }
 ```

@@ -407,9 +415,9 @@ copyNodeTree({}, node)

 > v0.9.1+

- `str`：html字符串
+- `str`：html 字符串

-给html自闭合标签添加闭合状态，`<div><img src="xxx"></div>` -> `<div><img src="xxx" /></div>`。
+给 html 自闭合标签添加闭合状态，`<div><img src="xxx"></div>` -> `<div><img src="xxx" /></div>`。

 #### checkNodeListIsEqual(list1, list2)

@@ -448,7 +456,9 @@ copyNodeTree({}, node)
        ]
    }
 ```
+
 转为：
+
 ```js
    {
        uid: {
@@ -462,9 +472,19 @@ copyNodeTree({}, node)

 > v0.9.3+

-将平级对象转树结构。transformTreeDataToObject方法的反向操作。
+将平级对象转树结构。transformTreeDataToObject 方法的反向操作。

-## 在canvas中模拟css的背景属性
+#### removeHtmlNodeByClass(html, selector)
+
+> v0.9.6+
+
+- `html`：html 字符串
+
+- `selector`：节点选择器，比如类选择器，id 选择器
+
+去除指定 html 字符串中指定选择器的节点，然后返回处理后的 html 字符串。
+
+## 在 canvas 中模拟 css 的背景属性

 引入：

@@ -481,20 +501,27 @@ let img = '/1.jpg'
 let canvas = document.createElement('canvas')
 canvas.width = width
 canvas.height = height
-drawBackgroundImageToCanvas(ctx, width, height, img, {
-  backgroundRepeat: 'repeat-y',
-  backgroundSize: '60%',
-  backgroundPosition: 'center center'
-}, (err) => {
-  if (err) {
-    // 失败
-  } else {
-    // 成功
+drawBackgroundImageToCanvas(
+  ctx,
+  width,
+  height,
+  img,
+  {
+    backgroundRepeat: 'repeat-y',
+    backgroundSize: '60%',
+    backgroundPosition: 'center center'
+  },
+  err => {
+    if (err) {
+      // 失败
+    } else {
+      // 成功
+    }
  }
-})
+)
 ```

-## LRU缓存类
+## LRU 缓存类

 > v0.5.10+

@@ -544,4 +571,4 @@ let lru = new Lru(max)

 > v0.9.2+

-清空缓存池。
+清空缓存池。
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -148,6 +148,7 @@
        </div>
      </div>
      <div class="row">
+        <!-- 线宽 -->
        <div class="rowItem" v-if="lineStyleListShow.length > 1">
          <span class="name">{{ $t('baseStyle.style') }}</span>
          <el-select
@@ -176,6 +177,7 @@
            </el-option>
          </el-select>
        </div>
+        <!-- 根节点连线样式 -->
        <div
          class="rowItem"
          v-if="
@@ -204,6 +206,7 @@
          </el-select>
        </div>
        <div class="rowItem" v-if="showLineRadius">
+          <!-- 连线圆角大小 -->
          <span class="name">{{ $t('baseStyle.lineRadius') }}</span>
          <el-select
            size="mini"
@@ -226,6 +229,37 @@
          </el-select>
        </div>
      </div>
+      <div class="row">
+        <!-- 根节点连线起始位置 -->
+        <div
+          class="rowItem"
+          v-if="
+            style.lineStyle === 'curve' && showRootLineKeepSameInCurveLayouts
+          "
+        >
+          <span class="name">{{ $t('baseStyle.rootLineStartPos') }}</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.rootLineStartPositionKeepSameInCurve"
+            placeholder=""
+            @change="
+              value => {
+                update('rootLineStartPositionKeepSameInCurve', value)
+              }
+            "
+          >
+            <el-option
+              key="center"
+              :label="$t('baseStyle.center')"
+              :value="false"
+            >
+            </el-option>
+            <el-option key="right" :label="$t('baseStyle.right')" :value="true">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
      <div class="row">
        <div class="rowItem">
          <el-checkbox
@@ -845,6 +879,16 @@
          >
        </div>
      </div>
+      <!-- 是否开启手绘风格 -->
+      <!-- <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="localConfigs.isUseHandDrawnLikeStyle"
+            @change="updateLocalConfig('isUseHandDrawnLikeStyle', $event)"
+            >{{ $t('baseStyle.isUseHandDrawnLikeStyle') }}</el-checkbox
+          >
+        </div>
+      </div> -->
    </div>
  </Sidebar>
 </template>
@@ -907,6 +951,7 @@ export default {
        lineStyle: '',
        showLineMarker: '',
        rootLineKeepSameInCurve: '',
+        rootLineStartPositionKeepSameInCurve: '',
        lineRadius: 0,
        generalizationLineWidth: '',
        generalizationLineColor: '',
@@ -952,7 +997,8 @@ export default {
      updateWatermarkTimer: null,
      enableNodeRichText: true,
      localConfigs: {
-        isShowScrollbar: false
+        isShowScrollbar: false,
+        isUseHandDrawnLikeStyle: false
      },
      currentLayout: '' // 当前结构
    }
@@ -1065,6 +1111,7 @@ export default {
        'lineStyle',
        'showLineMarker',
        'rootLineKeepSameInCurve',
+        'rootLineStartPositionKeepSameInCurve',
        'lineRadius',
        'lineColor',
        'generalizationLineWidth',
@@ -1112,7 +1159,7 @@ export default {
      this.enableNodeRichText = this.localConfig.openNodeRichText
      this.mousewheelAction = this.localConfig.mousewheelAction
      this.mousewheelZoomActionReverse = this.localConfig.mousewheelZoomActionReverse
-      ;['isShowScrollbar'].forEach(key => {
+      ;['isShowScrollbar', 'isUseHandDrawnLikeStyle'].forEach(key => {
        this.localConfigs[key] = this.localConfig[key]
      })
    },
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -46,6 +46,7 @@ import Painter from 'simple-mind-map/src/plugins/Painter.js'
 import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js'
 import Formula from 'simple-mind-map/src/plugins/Formula.js'
 import Cooperate from 'simple-mind-map/src/plugins/Cooperate.js'
+// import HandDrawnLikeStyle from 'simple-mind-map-plugin-handdrawnlikestyle'
 import OutlineSidebar from './OutlineSidebar'
 import Style from './Style'
 import BaseStyle from './BaseStyle'
@@ -147,7 +148,8 @@ export default {
      isShowScrollbar: state => state.localConfig.isShowScrollbar,
      useLeftKeySelectionRightKeyDrag: state =>
        state.localConfig.useLeftKeySelectionRightKeyDrag,
-      isShowScrollbar: state => state.localConfig.isShowScrollbar
+      isUseHandDrawnLikeStyle: state =>
+        state.localConfig.isUseHandDrawnLikeStyle
    })
  },
  watch: {
@@ -164,6 +166,13 @@ export default {
      } else {
        this.removeScrollbarPlugin()
      }
+    },
+    isUseHandDrawnLikeStyle() {
+      if (this.isUseHandDrawnLikeStyle) {
+        this.addHandDrawnLikeStylePlugin()
+      } else {
+        this.removeHandDrawnLikeStylePlugin()
+      }
    }
  },
  mounted() {
@@ -400,6 +409,7 @@ export default {
      })
      if (this.openNodeRichText) this.addRichTextPlugin()
      if (this.isShowScrollbar) this.addScrollbarPlugin()
+      if (this.isUseHandDrawnLikeStyle) this.addHandDrawnLikeStylePlugin()
      this.mindMap.keyCommand.addShortcut('Control+s', () => {
        this.manualSave()
      })
@@ -558,6 +568,27 @@ export default {
      this.mindMap.removePlugin(ScrollbarPlugin)
    },

+    // 加载手绘风格插件
+    addHandDrawnLikeStylePlugin() {
+      try {
+        if (!this.mindMap) return
+        this.mindMap.addPlugin(HandDrawnLikeStyle)
+        this.mindMap.reRender()
+      } catch (error) {
+        console.log('手绘风格插件不存在')
+      }
+    },
+
+    // 移除手绘风格插件
+    removeHandDrawnLikeStylePlugin() {
+      try {
+        this.mindMap.removePlugin(HandDrawnLikeStyle)
+        this.mindMap.reRender()
+      } catch (error) {
+        console.log('手绘风格插件不存在')
+      }
+    },
+
    // 测试动态插入节点
    testDynamicCreateNodes() {
      // return
--- a/web/src/pages/Edit/components/Export.vue
+++ b/web/src/pages/Edit/components/Export.vue
@@ -3,17 +3,18 @@
    class="nodeExportDialog"
    :title="$t('export.title')"
    :visible.sync="dialogVisible"
-    width="700px"
    v-loading.fullscreen.lock="loading"
    :element-loading-text="loadingText"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
+    :width="isMobile ? '90%' : '50%'"
+    :top="isMobile? '20px' : '15vh'"
  >
    <div class="exportContainer" :class="{ isDark: isDark }">
      <div class="nameInputBox">
        <span class="name">{{ $t('export.filename') }}</span>
        <el-input
-          style="width: 300px"
+          style="max-width: 300px"
          v-model="fileName"
          size="mini"
          @keydown.native.stop
@@ -29,30 +30,33 @@
        class="paddingInputBox"
        v-show="['svg', 'png', 'pdf'].includes(exportType)"
      >
-        <span class="name">{{ $t('export.paddingX') }}</span>
-        <el-input
-          style="width: 100px"
-          v-model="paddingX"
-          size="mini"
-          @change="onPaddingChange"
-          @keydown.native.stop
-        ></el-input>
-        <span class="name" style="margin-left: 10px;">{{
-          $t('export.paddingY')
-        }}</span>
-        <el-input
-          style="width: 100px"
-          v-model="paddingY"
-          size="mini"
-          @change="onPaddingChange"
-          @keydown.native.stop
-        ></el-input>
-        <el-checkbox
-          v-show="['png', 'pdf'].includes(exportType)"
-          v-model="isTransparent"
-          style="margin-left: 12px"
-          >{{ $t('export.isTransparent') }}</el-checkbox
-        >
+        <div class="paddingInputGroup">
+          <span class="name">{{ $t('export.paddingX') }}</span>
+          <el-input
+            style="max-width: 100px"
+            v-model="paddingX"
+            size="mini"
+            @change="onPaddingChange"
+            @keydown.native.stop
+          ></el-input>
+        </div>
+        <div class="paddingInputGroup">
+          <span class="name">{{ $t('export.paddingY') }}</span>
+          <el-input
+            style="width: 100px"
+            v-model="paddingY"
+            size="mini"
+            @change="onPaddingChange"
+            @keydown.native.stop
+          ></el-input>
+        </div>
+        <div class="paddingInputGroup">
+          <el-checkbox
+            v-show="['png', 'pdf'].includes(exportType)"
+            v-model="isTransparent"
+            >{{ $t('export.isTransparent') }}</el-checkbox
+          >
+        </div>
      </div>
      <div class="downloadTypeList">
        <div
@@ -83,6 +87,7 @@
 <script>
 import { mapState } from 'vuex'
 import { downTypeList } from '@/config'
+import { isMobile } from 'simple-mind-map/src/utils/index'

 /**
 * @Author: 王林
@@ -101,7 +106,8 @@ export default {
      loading: false,
      loadingText: '',
      paddingX: 10,
-      paddingY: 10
+      paddingY: 10,
+      isMobile: isMobile()
    }
  },
  computed: {
@@ -176,7 +182,13 @@ export default {
          this.isTransparent
        )
      } else if (this.exportType === 'pdf') {
-        this.$bus.$emit('export', this.exportType, true, this.fileName, this.isTransparent)
+        this.$bus.$emit(
+          'export',
+          this.exportType,
+          true,
+          this.fileName,
+          this.isTransparent
+        )
      } else {
        this.$bus.$emit('export', this.exportType, true, this.fileName)
      }
@@ -221,7 +233,18 @@ export default {
  }

  .paddingInputBox {
-    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .paddingInputGroup {
+      margin-right: 12px;
+      margin-bottom: 12px;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }

    .name {
      margin-right: 10px;
@@ -260,6 +283,7 @@ export default {
      .icon {
        font-size: 30px;
        margin-right: 10px;
+        flex-shrink: 0;

        &.png {
          color: #ffc038;
@@ -287,15 +311,26 @@ export default {
      }

      .info {
+        width: 100%;
+        overflow: hidden;
+
        .name {
          color: #1a1a1a;
          font-size: 15px;
          margin-bottom: 5px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
        }

        .desc {
          color: #999;
          font-size: 12px;
+          display: -webkit-box; /* 必须设置display属性为-webkit-box */
+          overflow: hidden; /* 超出部分隐藏 */
+          text-overflow: ellipsis; /* 显示省略号 */
+          -webkit-line-clamp: 2; /* 限制显示两行 */
+          -webkit-box-orient: vertical; /* 垂直方向上的换行 */
        }
      }
    }
--- a/web/src/pages/Edit/components/Navigator.vue
+++ b/web/src/pages/Edit/components/Navigator.vue
@@ -4,6 +4,7 @@
    class="navigatorBox"
    :class="{ isDark: isDark }"
    ref="navigatorBox"
+    :style="{ width: width + 'px' }"
    @mousedown="onMousedown"
    @mousemove="onMousemove"
    @mouseup="onMouseup"
@@ -47,25 +48,31 @@ export default {
        bottom: 0,
        right: 0
      },
-      mindMapImg: ''
+      mindMapImg: '',
+      width: 0,
+      setSizeTimer: null
    }
  },
  computed: {
    ...mapState(['isDark'])
  },
  mounted() {
+    this.setSize()
+    window.addEventListener('resize', this.setSize)
    this.$bus.$on('toggle_mini_map', this.toggle_mini_map)
    this.$bus.$on('data_change', this.data_change)
    this.$bus.$on('view_data_change', this.data_change)
    this.$bus.$on('node_tree_render_end', this.data_change)
  },
  destroyed() {
+    window.removeEventListener('resize', this.setSize)
    this.$bus.$off('toggle_mini_map', this.toggle_mini_map)
    this.$bus.$off('data_change', this.data_change)
    this.$bus.$off('view_data_change', this.data_change)
    this.$bus.$off('node_tree_render_end', this.data_change)
  },
  methods: {
+    // 切换显示小地图
    toggle_mini_map(show) {
      this.showMiniMap = show
      this.$nextTick(() => {
@@ -77,6 +84,8 @@ export default {
        }
      })
    },
+
+    // 思维导图数据改变，更新小地图
    data_change() {
      if (!this.showMiniMap) {
        return
@@ -86,6 +95,22 @@ export default {
        this.drawMiniMap()
      }, 500)
    },
+
+    // 计算容器宽度
+    setSize() {
+      clearTimeout(this.setSizeTimer)
+      this.setSizeTimer = setTimeout(() => {
+        this.width = Math.min(window.innerWidth - 80, 370)
+        this.$nextTick(() => {
+          if (this.showMiniMap) {
+            this.init()
+            this.drawMiniMap()
+          }
+        })
+      }, 300)
+    },
+
+    // 获取宽高
    init() {
      let { width, height } = this.$refs.navigatorBox.getBoundingClientRect()
      this.boxWidth = width
@@ -128,7 +153,6 @@ export default {
 <style lang="less" scoped>
 .navigatorBox {
  position: absolute;
-  width: 350px;
  height: 220px;
  background-color: #fff;
  bottom: 80px;
--- a/web/src/pages/Edit/components/NavigatorToolbar.vue
+++ b/web/src/pages/Edit/components/NavigatorToolbar.vue
@@ -15,6 +15,15 @@
        />
      </el-select>
    </div>
+    <div class="item">
+      <el-tooltip
+        effect="dark"
+        :content="$t('navigatorToolbar.backToRoot')"
+        placement="top"
+      >
+        <div class="btn iconfont icondingwei" @click="backToRoot"></div>
+      </el-tooltip>
+    </div>
    <div class="item">
      <div class="btn iconfont iconsousuo" @click="showSearch"></div>
    </div>
@@ -180,6 +189,10 @@ export default {
      a.href = url
      a.target = '_blank'
      a.click()
+    },
+
+    backToRoot() {
+      this.mindMap.renderer.setRootNodeCenter()
    }
  }
 }
--- a/web/src/pages/Edit/components/NodeHyperlink.vue
+++ b/web/src/pages/Edit/components/NodeHyperlink.vue
@@ -3,7 +3,8 @@
    class="nodeHyperlinkDialog"
    :title="$t('nodeHyperlink.title')"
    :visible.sync="dialogVisible"
-    width="500"
+    :width="isMobile ? '90%' : '50%'"
+    :top="isMobile ? '20px' : '15vh'"
  >
    <div class="item">
      <span class="name">{{ $t('nodeHyperlink.link') }}</span>
@@ -41,6 +42,8 @@
 </template>

 <script>
+import { isMobile } from 'simple-mind-map/src/utils/index'
+
 /**
 * @Author: 王林
 * @Date: 2021-06-24 22:53:17
@@ -54,7 +57,8 @@ export default {
      link: '',
      linkTitle: '',
      activeNodes: [],
-      protocol: 'https'
+      protocol: 'https',
+      isMobile: isMobile()
    }
  },
  created() {
--- a/web/src/pages/Edit/components/NodeImage.vue
+++ b/web/src/pages/Edit/components/NodeImage.vue
@@ -3,7 +3,8 @@
    class="nodeImageDialog"
    :title="$t('nodeImage.title')"
    :visible.sync="dialogVisible"
-    width="500"
+    :width="isMobile ? '90%' : '50%'"
+    :top="isMobile ? '20px' : '15vh'"
  >
    <div class="title">方式一</div>
    <ImgUpload
@@ -37,7 +38,7 @@

 <script>
 import ImgUpload from '@/components/ImgUpload'
-import { getImageSize } from 'simple-mind-map/src/utils/index'
+import { getImageSize, isMobile } from 'simple-mind-map/src/utils/index'

 /**
 * @Author: 王林
@@ -55,7 +56,8 @@ export default {
      img: '',
      imgUrl: '',
      imgTitle: '',
-      activeNodes: null
+      activeNodes: null,
+      isMobile: isMobile()
    }
  },
  created() {
--- a/web/src/pages/Edit/components/NodeNote.vue
+++ b/web/src/pages/Edit/components/NodeNote.vue
@@ -3,7 +3,8 @@
    class="nodeNoteDialog"
    :title="$t('nodeNote.title')"
    :visible.sync="dialogVisible"
-    width="500"
+    :width="isMobile ? '90%' : '50%'"
+    :top="isMobile ? '20px' : '15vh'"
  >
    <!-- <el-input
      type="textarea"
@@ -26,6 +27,7 @@
 <script>
 import Editor from '@toast-ui/editor'
 import '@toast-ui/editor/dist/toastui-editor.css' // Editor's Style
+import { isMobile } from 'simple-mind-map/src/utils/index'

 /**
 * @Author: 王林
@@ -39,7 +41,8 @@ export default {
      dialogVisible: false,
      note: '',
      activeNodes: [],
-      editor: null
+      editor: null,
+      isMobile: isMobile()
    }
  },
  created() {
--- a/web/src/pages/Edit/components/NodeTag.vue
+++ b/web/src/pages/Edit/components/NodeTag.vue
@@ -3,7 +3,8 @@
    class="nodeTagDialog"
    :title="$t('nodeTag.title')"
    :visible.sync="dialogVisible"
-    width="500"
+    :width="isMobile ? '90%' : '50%'"
+    :top="isMobile ? '20px' : '15vh'"
  >
    <el-input
      v-model="tag"
@@ -39,7 +40,7 @@
 </template>

 <script>
-import { generateColorByContent } from 'simple-mind-map/src/utils/index'
+import { generateColorByContent, isMobile } from 'simple-mind-map/src/utils/index'

 /**
 * @Author: 王林
@@ -54,7 +55,8 @@ export default {
      tagArr: [],
      tag: '',
      activeNodes: [],
-      max: 5
+      max: 5,
+      isMobile: isMobile()
    }
  },
  created() {
--- a/web/src/pages/Edit/components/Outline.vue
+++ b/web/src/pages/Edit/components/Outline.vue
@@ -99,6 +99,7 @@ export default {
      // 在大纲里操作节点时不要响应该事件，否则会重新刷新树
      if (this.notHandleDataChange) {
        this.notHandleDataChange = false
+        this.isAfterCreateNewNode = false
        return
      }
      if (this.isAfterCreateNewNode) {
@@ -130,11 +131,11 @@ export default {
      let data = this.mindMap.getData()
      data.root = true // 标记根节点
      let walk = root => {
-        let text = (root.data.richText
+        let text = root.data.richText
          ? nodeRichTextToTextWithWrap(root.data.text)
          : root.data.text
-        ).replaceAll(/\n/g, '<br>')
        text = htmlEscape(text)
+        text = text.replaceAll(/\n/g, '<br>')
        root.textCache = text // 保存一份修改前的数据，用于对比是否修改了
        root.label = text
        root.uid = root.data.uid
@@ -223,17 +224,30 @@ export default {
    // 节点输入区域按键事件
    onNodeInputKeydown(e) {
      if (e.keyCode === 13 && !e.shiftKey) {
+        // 插入兄弟节点
        e.preventDefault()
        this.insertType = 'insertNode'
        e.target.blur()
      }
      if (e.keyCode === 9) {
        e.preventDefault()
-        this.insertType = 'insertChildNode'
-        e.target.blur()
+        if (e.shiftKey) {
+          // 节点上升一级
+          this.insertType = 'moveUp'
+          e.target.blur()
+        } else {
+          // 插入子节点
+          this.insertType = 'insertChildNode'
+          e.target.blur()
+        }
      }
    },

+    // 节点上移一个层级
+    moveUp() {
+      this.mindMap.execCommand('MOVE_UP_ONE_LEVEL')
+    },
+
    // 插入兄弟节点
    insertNode() {
      this.notHandleDataChange = true
--- a/web/src/pages/Edit/components/OutlineEdit.vue
+++ b/web/src/pages/Edit/components/OutlineEdit.vue
@@ -103,11 +103,11 @@ export default {
      let data = this.mindMap.getData()
      data.root = true // 标记根节点
      let walk = root => {
-        let text = (root.data.richText
+        let text = root.data.richText
          ? nodeRichTextToTextWithWrap(root.data.text)
          : root.data.text
-        ).replaceAll(/\n/g, '<br>')
        text = htmlEscape(text)
+        text = text.replaceAll(/\n/g, '<br>')
        root.textCache = text // 保存一份修改前的数据，用于对比是否修改了
        root.label = text
        root.uid = root.data.uid
@@ -178,7 +178,13 @@ export default {
      }
      if (e.keyCode === 9) {
        e.preventDefault()
-        this.$refs.tree.append(data, node)
+        if (e.shiftKey) {
+          // 上移一个层级
+          this.$refs.tree.insertAfter(node.data, node.parent)
+          this.$refs.tree.remove(node)
+        } else {
+          this.$refs.tree.append(data, node)
+        }
      }
      this.save()
      this.$nextTick(() => {
--- a/web/src/pages/Edit/components/Style.vue
+++ b/web/src/pages/Edit/components/Style.vue
@@ -394,6 +394,27 @@
              </el-option>
            </el-select>
          </div>
+          <div class="rowItem">
+            <span class="name">{{ $t('style.arrowDir') }}</span>
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.lineMarkerDir"
+              placeholder=""
+              @change="update('lineMarkerDir')"
+            >
+              <el-option
+                key="start"
+                :label="$t('style.arrowDirStart')"
+                value="start"
+              ></el-option>
+              <el-option
+                key="end"
+                :label="$t('style.arrowDirEnd')"
+                value="end"
+              ></el-option>
+            </el-select>
+          </div>
        </div>
        <!-- 节点内边距 -->
        <div class="title noTop">{{ $t('style.nodePadding') }}</div>
@@ -478,6 +499,7 @@ export default {
        lineColor: '',
        lineDasharray: '',
        lineWidth: '',
+        lineMarkerDir: '',
        gradientStyle: false,
        startColor: '',
        endColor: ''
@@ -556,6 +578,7 @@ export default {
        'lineColor',
        'lineDasharray',
        'lineWidth',
+        'lineMarkerDir',
        'gradientStyle',
        'startColor',
        'endColor'
--- a/web/src/pages/Edit/components/Toolbar.vue
+++ b/web/src/pages/Edit/components/Toolbar.vue
@@ -11,7 +11,7 @@
          width="120"
          trigger="hover"
          v-if="showMoreBtn"
-          style="margin-left: 20px;"
+          :style="{ marginLeft: horizontalList.length > 0 ? '20px' : 0 }"
        >
          <ToolbarNodeBtnList
            dir="v"
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -17,7 +17,9 @@ const store = new Vuex.Store({
      // 鼠标行为
      useLeftKeySelectionRightKeyDrag: false,
      // 是否显示滚动条
-      isShowScrollbar: false
+      isShowScrollbar: false,
+      // 是否开启手绘风格
+      isUseHandDrawnLikeStyle: false
    },
    activeSidebar: '', // 当前显示的侧边栏
    isDark: false, // 是否是暗黑模式
Author	SHA1	Message	Date
街角小林	6a4e87af7b	打包0.9.6	2024-01-26 11:33:26 +08:00
街角小林	7354bec8fd	Doc: update	2024-01-26 11:19:27 +08:00
街角小林	3405fb7e8a	Fix：修复添加了数学公式的节点，切换主题时文本样式没有改变的问题	2024-01-26 11:09:17 +08:00
街角小林	138cc4b3e8	Fix：修复切换主题时，换行的文本样式没有改变的问题	2024-01-26 09:44:09 +08:00
街角小林	e6ede72169	Fix：修复切换主题后，第一次进行文本换行后，新换行的文本样式会丢失的问题	2024-01-26 09:43:17 +08:00
街角小林	edddbbd1d6	Demo：修复大纲中文本换行不生效，显示br标签的问题	2024-01-26 09:05:34 +08:00
街角小林	304e76e4af	删除无用文件	2024-01-26 08:49:26 +08:00
街角小林	b4ceb88d18	Doc: update	2024-01-26 08:43:14 +08:00
街角小林	635fdf4806	Demo：新增两个主题	2024-01-26 08:40:31 +08:00
街角小林	77d376210e	Doc: update	2024-01-25 18:25:36 +08:00
街角小林	12f9e03f63	Demo：大纲支持按Shift+Tab将节点上移一个层级	2024-01-25 15:24:41 +08:00
街角小林	a4f83437c9	Feat：新增MOVE_UP_ONE_LEVEL命令将节点上移一个层级	2024-01-25 15:19:11 +08:00
街角小林	a5b3efd272	Doc: update	2024-01-25 14:11:43 +08:00
街角小林	7bd467a330	Fix：修复切换主题时，被收起的节点样式没有变化的问题	2024-01-25 13:52:23 +08:00
街角小林	59b2506884	Feat：Mac双指触摸事件移动画布增加一点灵敏度	2024-01-25 08:58:33 +08:00
街角小林	cf87333910	Feat：直连风格根节点的连线起点统一为节点的边界	2024-01-24 18:51:39 +08:00
街角小林	95b957d37e	Feat：主题新增字段用于设置曲线连接下根节点连线的起始位置	2024-01-24 18:28:04 +08:00
街角小林	7d18f98a33	Feat：支持设置节点连线箭头的显示位置，头部或者尾部	2024-01-24 17:52:48 +08:00
街角小林	6baf388d95	update	2024-01-22 19:59:17 +08:00
街角小林	d63d01647c	打包0.9.5	2024-01-22 19:56:20 +08:00
街角小林	70c6a26de0	Doc: update	2024-01-22 19:53:38 +08:00
街角小林	8241bcbbb4	Demo：优化代码	2024-01-19 17:45:48 +08:00
街角小林	89fd59adec	Demo：支持开启手绘风格	2024-01-19 16:29:50 +08:00
街角小林	9b1f26f6e9	Feat：支持自定义创建节点形状的方法	2024-01-19 15:50:32 +08:00
街角小林	e590161f0a	Doc: update	2024-01-17 18:19:48 +08:00
街角小林	2fe804880f	Demo：优化移动端的使用体验	2024-01-16 18:30:41 +08:00
街角小林	bbb21d4e76	Feat：优化创建关联线时初始端点位置的计算逻辑	2024-01-16 10:10:32 +08:00
街角小林	3f9c3e9fb1	Doc: update	2024-01-16 08:41:25 +08:00
街角小林	925c5d6d3c	Feat：增加禁止调整关联线端点位置的配置	2024-01-15 18:34:19 +08:00
街角小林	bb223b080c	Feat：增加设置关联线创建时两个端点初始位置的配置	2024-01-15 18:31:40 +08:00
街角小林	c3652331ea	Fix：修复新创建的关联线位置始终在节点的右侧没有根据相对位置调整的问题	2024-01-15 17:50:24 +08:00
街角小林	62c61b6e53	Fix：修复展开收起节点时区间概要会丢失的问题	2024-01-15 17:11:16 +08:00