Doc: update

2026-02-21 10:27:44 +08:00 · 2023-09-04 16:49:24 +08:00 · 2023-09-04 16:49:24 +08:00 · a4611d11a8
commit a4611d11a8
parent 5d1f460a94
36 changed files with 966 additions and 1094 deletions
--- a/README.md
+++ b/README.md
@ -169,4 +169,8 @@ const mindMap = new MindMap({
        <img src="./web/src/assets/avatar/布林.jpg" 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/web/src/assets/avatar/南风.jpg
+++ b/web/src/assets/avatar/南风.jpg
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@ -11,7 +11,7 @@ let langList = [
  }
 ]
 let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
-let CourseList = new Array(22).fill(0).map((_, index) => {
+let CourseList = new Array(24).fill(0).map((_, index) => {
  return 'course' + (index + 1)
 })
 let APIList = [
@ -34,6 +34,7 @@ let APIList = [
  'nodeImgAdjust',
  'search',
  'painter',
+  'scrollbar',
  'xmind',
  'markdown',
  'utils'
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@ -1,5 +1,55 @@
 # Changelog

+## 0.7.0
+
+Breaking change: Removed the section of node activation style in the theme file, Setting the activation style of nodes is no longer supported, and the activation effect has been changed to a unified node outer border style, while also supporting the mouse hover effect.
+
+Fix:
+
+> 1.Fix rendering anomalies when the node border size is relatively large.
+>
+> 2.Fixed an issue where the node style of the associated line will not be updated when switching themes.
+>
+> 3.Fix that selecting all did not trigger node_ The issue with active events.
+
+新增：
+
+> 1.When folding nodes, displays the number of collapsed nodes.
+>
+> 2.Support the position of the endpoint of the associated line to follow mouse drag changes.
+>
+> 3.Add a scrollbar plugin.
+>
+> 4.Support opening specified online files through fileURL query parameters in URLs.
+>
+> 5.The fishbone diagram supports setting node margins.
+>
+> 6.By default, double-click to reset the canvas.
+>
+> 7.Modify the parameters of the export image method, and when exporting PDF, if the size of the mind map is smaller than A4 paper, do not rotate the direction.
+>
+> 8.Improve the clarity of exported images and PDFs on high-definition screens.
+> 
+> 9.Add a pre destruction lifecycle function to the plugin to address the issue of some side effects that were not cleared during the destruction of the mind map.
+>
+> 10.Optimize the settings of the basic style and do not trigger full rendering when modifying theme attributes that do not affect size.
+>
+> 11.Prohibit triggering node right-click menu events when multiple node selections are completed, to avoid triggering the right-click menu display.
+>
+> 12.Optimize the Select plugin so that if multiple selected nodes do not change, the activation event is not triggered.
+>
+> 13.The activation node list thrown by event node_active no longer directly references the internal activation list.
+>
+> 14.Optimize the logic of mouse button down node events, and support dragging the canvas by holding down the root node with the right mouse button in the right-click drag and drop canvas mode.
+
+Demo：
+
+> 1.Do not directly reference the internal activation node list to optimize performance.
+> 
+> 2.Support configuring whether to display scrollbars.
+>
+> 3.Delete the active node configuration in the sidebar node style configuration section.
+
 ## 0.6.17

 Fix:
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@ -1,6 +1,37 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.7.0</h2>
+<p>Breaking change: Removed the section of node activation style in the theme file, Setting the activation style of nodes is no longer supported, and the activation effect has been changed to a unified node outer border style, while also supporting the mouse hover effect.</p>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix rendering anomalies when the node border size is relatively large.</p>
+<p>2.Fixed an issue where the node style of the associated line will not be updated when switching themes.</p>
+<p>3.Fix that selecting all did not trigger node_ The issue with active events.</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.When folding nodes, displays the number of collapsed nodes.</p>
+<p>2.Support the position of the endpoint of the associated line to follow mouse drag changes.</p>
+<p>3.Add a scrollbar plugin.</p>
+<p>4.Support opening specified online files through fileURL query parameters in URLs.</p>
+<p>5.The fishbone diagram supports setting node margins.</p>
+<p>6.By default, double-click to reset the canvas.</p>
+<p>7.Modify the parameters of the export image method, and when exporting PDF, if the size of the mind map is smaller than A4 paper, do not rotate the direction.</p>
+<p>8.Improve the clarity of exported images and PDFs on high-definition screens.</p>
+<p>9.Add a pre destruction lifecycle function to the plugin to address the issue of some side effects that were not cleared during the destruction of the mind map.</p>
+<p>10.Optimize the settings of the basic style and do not trigger full rendering when modifying theme attributes that do not affect size.</p>
+<p>11.Prohibit triggering node right-click menu events when multiple node selections are completed, to avoid triggering the right-click menu display.</p>
+<p>12.Optimize the Select plugin so that if multiple selected nodes do not change, the activation event is not triggered.</p>
+<p>13.The activation node list thrown by event node_active no longer directly references the internal activation list.</p>
+<p>14.Optimize the logic of mouse button down node events, and support dragging the canvas by holding down the root node with the right mouse button in the right-click drag and drop canvas mode.</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.Do not directly reference the internal activation node list to optimize performance.</p>
+<p>2.Support configuring whether to display scrollbars.</p>
+<p>3.Delete the active node configuration in the sidebar node style configuration section.</p>
+</blockquote>
 <h2>0.6.17</h2>
 <p>Fix:</p>
 <blockquote>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@ -48,8 +48,10 @@ const mindMap = new MindMap({
 | mousewheelZoomActionReverse（v0.6.5+）     | Boolean  | false | When `mousewheelAction` is set to `zoom`, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed   |          |
 | defaultInsertSecondLevelNodeText（v0.4.7+）     | String  | 二级节点 | Text of the default inserted secondary node               |          |
 | defaultInsertBelowSecondLevelNodeText（v0.4.7+）     | String  | 分支主题 | Text for nodes below the second level inserted by default               |          |
-| expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff' } | Expand the color of the stow button  |          |
+| expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' } | Expand the color of the stow button, (The fontSize and strokeColor fields were added in version 0.7.0+to set the text style for displaying the number of nodes when folded) |          |
 | expandBtnIcon（v0.5.0+）     | Object  | { open: '', close: '' } | Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon  |          |
+| expandBtnNumHandler（v0.7.0+）     | Function  |  | Used to customize the content of displaying the number of nodes when folding, receiving a parameter that represents the instance of the folding node, and returning a number or string that represents the final displayed content. For example, when the number is greater than 99, 99 can be displayed+  |          |
+| isShowExpandNum（v0.7.0+）     | Boolean  | true | Display the number of folded nodes when they are folded up  |          |
 | enableShortcutOnlyWhenMouseInSvg（v0.5.1+）     | Boolean  | true | Only respond to shortcut key events when the mouse is inside the canvas  |          |
 | enableNodeTransitionMove（v0.5.1+）（v0.6.7+ is remove this feature）     | Boolean  | true | Whether to enable node animation transition  |          |
 | nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature）     | Number  | 300 | If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds  |          |
@ -80,7 +82,11 @@ const mindMap = new MindMap({
 | errorHandler（v0.6.15+）     | Function  |  | Custom error handling functions currently only throw some asynchronous logic errors. Can pass a function that takes two parameters, the first being the wrong type and the second being the wrong object |          |
 | disableMouseWheelZoom（v0.6.15+）     | Boolean  | false | Prohibit mouse wheel scaling, you can still use the API for scaling |          |
 | resetCss（v0.6.16+）     | String  |  * { margin: 0; padding: 0; box-sizing: border-box; } | When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset |          |
-| enableDblclickReset（v0.6.17+）     | Boolean  | true  | Turn on the mouse and double-click to reset the position and zoom of the mind map |          |
+| enableDblclickReset（v0.6.17+）     | Boolean  | true(v0.7.0+changed to false)  | Turn on the mouse and double-click to reset the position and zoom of the mind map |          |
+| minExportImgCanvasScale（v0.7.0+）     | Number  | 2  | The scaling factor of canvas when exporting images and PDFs, which is set to the maximum value of window.devicePixelRatio to improve image clarity |          |
+| hoverRectColor（v0.7.0+）     | String  | rgb(94, 200, 248)  | The node mouse hover and the rectangular border color displayed when activated will add a transparency of 0.6 when hovering |          |
+| hoverRectPadding（v0.7.0+）     | Number  | 2  | The distance between the node mouse hover and the displayed rectangular border when activated and the node content |          |
+| selectTextOnEnterEditText（v0.7.0+）     | Boolean  | true  | Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node |          |

 ### Watermark config

@ -337,8 +343,8 @@ redo. All commands are as follows:
 | DOWN_NODE                          | Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid |                                                              |
 | REMOVE_NODE                        | Remove node, the active node or appoint node will be the operation node      |  appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）                                                            |
 | PASTE_NODE                         | Paste node to a node, the active node will be the operation node | data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods) |
-| SET_NODE_STYLE                     | Modify node single style                                            | node (the node to set the style of), prop (style property), value (style property value), isActive (boolean, whether the style being set is for the active state) |
-| SET_NODE_STYLEs（v0.6.12+）       |  Modify multiple styles of nodes   | node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（boolean, whether the style being set is for the active state） |
+| SET_NODE_STYLE                     | Modify node single style                                            | node (the node to set the style of), prop (style property), value (style property value), isActive (v0.7.0+has been abandoned, boolean, whether the style being set is for the active state) |
+| SET_NODE_STYLEs（v0.6.12+）       |  Modify multiple styles of nodes   | node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（v0.7.0+has been abandoned, boolean, whether the style being set is for the active state） |
 | SET_NODE_ACTIVE                    | Set whether the node is active                               | node (the node to set), active (boolean, whether to activate) |
 | CLEAR_ACTIVE_NODE                  | Clear the active state of the currently active node(s), the active node will be the operation node |                                                              |
 | SET_NODE_EXPAND                    | Set whether the node is expanded                             | node (the node to set), expand (boolean, whether to expand)  |
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
--- a/web/src/pages/Doc/en/doExport/index.md
+++ b/web/src/pages/Doc/en/doExport/index.md
@ -38,13 +38,17 @@ a.download = 'xxx'
 a.click()
 ```

-### png(name, transparent = false, rotateWhenWidthLongerThenHeight)
+### png(name, transparent = false, checkRotate)
+
+> Versions below v0.7.0 are: png(name, transparent = false, rotateWhenWidthLongerThenHeight)

 - `name`: Name, optional

 - `transparent`: v0.5.7+, Specify whether the background of the exported image is transparent

- `rotateWhenWidthLongerThenHeight`: v0.6.15+，Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio
+- `rotateWhenWidthLongerThenHeight`: v0.6.15+, V0.7.0+abandoned, Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio
+
+- `checkRotate`: v0.7.0+, Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees.

 Exports as `png`.

--- a/web/src/pages/Doc/en/doExport/index.vue
+++ b/web/src/pages/Doc/en/doExport/index.vue
@ -27,7 +27,10 @@ a.href = <span class="hljs-string">&#x27;xxx.png&#x27;</span><span class="hljs-c
 a.download = <span class="hljs-string">&#x27;xxx&#x27;</span>
 a.click()
 </code></pre>
-<h3>png(name, transparent = false, rotateWhenWidthLongerThenHeight)</h3>
+<h3>png(name, transparent = false, checkRotate)</h3>
+<blockquote>
+<p>Versions below v0.7.0 are: png(name, transparent = false, rotateWhenWidthLongerThenHeight)</p>
+</blockquote>
 <ul>
 <li>
 <p><code>name</code>: Name, optional</p>
@ -36,7 +39,10 @@ a.click()
 <p><code>transparent</code>: v0.5.7+, Specify whether the background of the exported image is transparent</p>
 </li>
 <li>
-<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+，Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio</p>
+<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+, V0.7.0+abandoned, Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio</p>
+</li>
+<li>
+<p><code>checkRotate</code>: v0.7.0+, Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees.</p>
 </li>
 </ul>
 <p>Exports as <code>png</code>.</p>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@ -188,4 +188,8 @@ Open source is not easy. If this project is helpful to you, you can invite the a
        <img src="../../../../assets/avatar/布林.jpg" 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
@ -147,6 +147,10 @@ full screen, support mini map</li>
        <img src="../../../../assets/avatar/布林.jpg" 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/node/index.md
+++ b/web/src/pages/Doc/en/node/index.md
@ -110,17 +110,21 @@ Get the final style value applied to this node

 `root`: whether it is the root node, default `false`

-`isActive`: whether the value being fetched is the active state style value,
+`isActive`: v0.7.0+has been abandoned, whether the value being fetched is the active state style value,
 default `false`

 ### setStyle(prop, value, isActive)

+- `isActive`: v0.7.0+has been abandoned
+
 Modify a style of the node, a shortcut method for the `SET_NODE_STYLE` command

 ### setStyles(style, isActive)

 > v0.6.12+

+- `isActive`: v0.7.0+has been abandoned
+
 Modify multiple styles of nodes, a shortcut method for the `SET_NODE_STYLES` command

 ### getData(key)
--- a/web/src/pages/Doc/en/node/index.vue
+++ b/web/src/pages/Doc/en/node/index.vue
@ -64,14 +64,20 @@
 <p>Get the final style value applied to this node</p>
 <p><code>prop</code>: the style property to get</p>
 <p><code>root</code>: whether it is the root node, default <code>false</code></p>
-<p><code>isActive</code>: whether the value being fetched is the active state style value,
+<p><code>isActive</code>: v0.7.0+has been abandoned, whether the value being fetched is the active state style value,
 default <code>false</code></p>
 <h3>setStyle(prop, value, isActive)</h3>
+<ul>
+<li><code>isActive</code>: v0.7.0+has been abandoned</li>
+</ul>
 <p>Modify a style of the node, a shortcut method for the <code>SET_NODE_STYLE</code> command</p>
 <h3>setStyles(style, isActive)</h3>
 <blockquote>
 <p>v0.6.12+</p>
 </blockquote>
+<ul>
+<li><code>isActive</code>: v0.7.0+has been abandoned</li>
+</ul>
 <p>Modify multiple styles of nodes, a shortcut method for the <code>SET_NODE_STYLES</code> command</p>
 <h3>getData(key)</h3>
 <p>Get the specified value in the <code>data</code> object of the node's real data <code>nodeData</code>,
--- a/web/src/pages/Doc/en/scrollbar/index.md
+++ b/web/src/pages/Doc/en/scrollbar/index.md
@ -0,0 +1,64 @@
+# Scrollbar plugin
+
+> v0.7.0+
+
+This plugin is used to help develop the functionality of horizontal and vertical scrollbar.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import Scrollbar from 'simple-mind-map/src/plugins/Scrollbar.js'
+MindMap.usePlugin(Scrollbar)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.scrollbar`.
+
+## Event
+
+#### scrollbar_change
+
+Triggered when the scrollbar data changes, you can listen to this event to update the position and size of the scrollbar.
+
+## Method
+
+### setScrollBarWrapSize(width, height)
+
+- `width`: Number, The width of your scrollbar container element.
+
+- `height`: Number, The height of your scrollbar container element.
+
+Set the size of the scroll bar container, which is the width of the container for horizontal scrollbars and the height of the container for vertical scrollbars. When your scrollbar container size changes, you need to call this method again.
+
+### calculationScrollbar()
+
+> You need to first call the setScrollBarWrapSize method to set the width and height of the scroll bar container element.
+>
+> Generally, it is necessary to monitor scrollbar_change event, and then call it to update the scroll bar.
+
+Return value: 
+
+```js
+{
+    // Vertical scrollbar
+    vertical: {
+        top,
+        height
+    },
+    // Horizontal scrollbar
+    horizontal: {
+        left,
+        width
+    }
+}
+```
+
+Obtain the size and position of the scroll bar, and you can set it to the scroll bar element based on the return value to achieve the effect of rendering and caring about the scroll bar.
+
+### onMousedown(e, type)
+
+- `e`: The event object for the mouse down event.
+
+- `type`: The type of scroll bar pressed, vertical(Vertical scrollbar)、horizontal(Horizontal scrollbar)。
+
+This method needs to be called when the mouse press event of the scrollbar element occurs.
--- a/web/src/pages/Doc/en/scrollbar/index.vue
+++ b/web/src/pages/Doc/en/scrollbar/index.vue
@ -0,0 +1,70 @@
+<template>
+  <div>
+    <h1>Scrollbar plugin</h1>
+<blockquote>
+<p>v0.7.0+</p>
+</blockquote>
+<p>This plugin is used to help develop the functionality of horizontal and vertical scrollbar.</p>
+<h2>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Scrollbar <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Scrollbar.js&#x27;</span>
+MindMap.usePlugin(Scrollbar)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.scrollbar</code>.</p>
+<h2>Event</h2>
+<h4>scrollbar_change</h4>
+<p>Triggered when the scrollbar data changes, you can listen to this event to update the position and size of the scrollbar.</p>
+<h2>Method</h2>
+<h3>setScrollBarWrapSize(width, height)</h3>
+<ul>
+<li>
+<p><code>width</code>: Number, The width of your scrollbar container element.</p>
+</li>
+<li>
+<p><code>height</code>: Number, The height of your scrollbar container element.</p>
+</li>
+</ul>
+<p>Set the size of the scroll bar container, which is the width of the container for horizontal scrollbars and the height of the container for vertical scrollbars. When your scrollbar container size changes, you need to call this method again.</p>
+<h3>calculationScrollbar()</h3>
+<blockquote>
+<p>You need to first call the setScrollBarWrapSize method to set the width and height of the scroll bar container element.</p>
+<p>Generally, it is necessary to monitor scrollbar_change event, and then call it to update the scroll bar.</p>
+</blockquote>
+<p>Return value:</p>
+<pre class="hljs"><code>{
+    <span class="hljs-comment">// Vertical scrollbar</span>
+    <span class="hljs-attr">vertical</span>: {
+        top,
+        height
+    },
+    <span class="hljs-comment">// Horizontal scrollbar</span>
+    <span class="hljs-attr">horizontal</span>: {
+        left,
+        width
+    }
+}
+</code></pre>
+<p>Obtain the size and position of the scroll bar, and you can set it to the scroll bar element based on the return value to achieve the effect of rendering and caring about the scroll bar.</p>
+<h3>onMousedown(e, type)</h3>
+<ul>
+<li>
+<p><code>e</code>: The event object for the mouse down event.</p>
+</li>
+<li>
+<p><code>type</code>: The type of scroll bar pressed, vertical(Vertical scrollbar)、horizontal(Horizontal scrollbar)。</p>
+</li>
+</ul>
+<p>This method needs to be called when the mouse press event of the scrollbar element occurs.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/search/index.md
+++ b/web/src/pages/Doc/en/search/index.md
@ -12,7 +12,7 @@ import Search from 'simple-mind-map/src/plugins/Search.js'
 MindMap.usePlugin(Search)
 ```

-After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.Search`.
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.search`.

 ## Event

--- a/web/src/pages/Doc/en/search/index.vue
+++ b/web/src/pages/Doc/en/search/index.vue
@ -10,7 +10,7 @@
 <span class="hljs-keyword">import</span> Search <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Search.js&#x27;</span>
 MindMap.usePlugin(Search)
 </code></pre>
-<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.Search</code>.</p>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.search</code>.</p>
 <h2>Event</h2>
 <h3>search_info_change</h3>
 <p>You can listen to 'search_info_change' event to get the number of current search results and the index currently located.</p>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@ -29,6 +29,8 @@ export default [
      { path: 'course20', title: '如何自定义节点内容' },
      { path: 'course21', title: '如何复制、剪切、粘贴' },
      { path: 'course22', title: '如何实现搜索、替换' },
+      { path: 'course23', title: '如何渲染滚动条' },
+      { path: 'course24', title: '如何开发一个插件' },
      { path: 'doExport', title: 'Export 插件' },
      { path: 'drag', title: 'Drag插件' },
      { path: 'introduction', title: '简介' },
@ -52,7 +54,8 @@ export default [
      { path: 'nodeImgAdjust', title: 'NodeImgAdjust插件' },
      { path: 'search', title: 'Search插件' },
      { path: 'painter', title: 'Painter插件' },
-      { path: 'help1', title: '概要/关联线' },
+      { path: 'painter', title: 'Painter插件' },
+      { path: 'scrollbar', title: 'Scrollbar插件' },
      { path: 'help2', title: '客户端' }
    ]
  },
@ -85,7 +88,8 @@ export default [
      { path: 'touchEvent', title: 'TouchEvent plugin' },
      { path: 'nodeImgAdjust', title: 'NodeImgAdjust plugin' },
      { path: 'search', title: 'Search plugin' },
-      { path: 'painter', title: 'Painter plugin' }
+      { path: 'painter', title: 'Painter plugin' },
+      { path: 'scrollbar', title: 'Scrollbar plugin' }
    ]
  }
 ]
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@ -1,5 +1,55 @@
 # Changelog

+## 0.7.0
+
+破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标hover效果。
+
+修复：
+
+> 1.修复节点边框尺寸比较大的情况下的的渲染异常问题。
+>
+> 2.修复切换主题时存在关联线的节点样式不会更新的问题。
+>
+> 3.修复全选没有触发node_active事件的问题。
+
+新增：
+
+> 1.收起节点时，显示折叠的节点数量。
+>
+> 2.支持关联线端点的位置跟随鼠标拖拽变化。
+>
+> 3.新增滚动条插件。
+>
+> 4.支持在url中通过fileURL查询参数打开指定的在线文件。
+>
+> 5.鱼骨图支持设置节点margin。
+>
+> 6.默认关闭双击复位画布。
+>
+> 7.修改导出图片方法的参数,导出pdf时如果思维导图尺寸小于a4纸那么不旋转方向。
+>
+> 8.提升导出的图片和pdf在高清屏的清晰度。
+> 
+> 9.插件新增销毁前生命周期函数，解决销毁思维导图时插件的一些副作用没有清除的问题。
+>
+> 10.优化基础样式的设置，修改不影响大小的主题属性时不触发全量渲染。
+>
+> 11.右键多选节点结束时禁止触发节点右键菜单事件，避免触发右键菜单显示。
+>
+> 12.优化Select插件，如果多选节点没有变化，那么不触发激活激活事件。
+>
+> 13.node_active事件抛出的激活节点列表不再直接引用内部激活列表。
+>
+> 14.优化鼠标按下节点事件逻辑，在右键拖拽画布模式下支持右键按住根节点拖拽画布。
+
+Demo：
+
+> 1.不直接引用内部激活节点列表，优化性能。
+> 
+> 2.支持配置是否显示滚动条。
+>
+> 3.删除侧边栏节点样式配置部分的激活节点配置。
+
 ## 0.6.17

 修复：
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@ -1,6 +1,37 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.7.0</h2>
+<p>破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标hover效果。</p>
+<p>修复：</p>
+<blockquote>
+<p>1.修复节点边框尺寸比较大的情况下的的渲染异常问题。</p>
+<p>2.修复切换主题时存在关联线的节点样式不会更新的问题。</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>6.默认关闭双击复位画布。</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>14.优化鼠标按下节点事件逻辑，在右键拖拽画布模式下支持右键按住根节点拖拽画布。</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.不直接引用内部激活节点列表，优化性能。</p>
+<p>2.支持配置是否显示滚动条。</p>
+<p>3.删除侧边栏节点样式配置部分的激活节点配置。</p>
+</blockquote>
 <h2>0.6.17</h2>
 <p>修复：</p>
 <blockquote>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@ -48,8 +48,10 @@ const mindMap = new MindMap({
 | mousewheelZoomActionReverse（v0.6.5+）     | Boolean  | false |  当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来  |          |
 | defaultInsertSecondLevelNodeText（v0.4.7+）     | String  | 二级节点 | 默认插入的二级节点的文字               |          |
 | defaultInsertBelowSecondLevelNodeText（v0.4.7+）     | String  | 分支主题 | 默认插入的二级以下节点的文字               |          |
-| expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff' } | 展开收起按钮的颜色  |          |
+| expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' } | 展开收起按钮的颜色，（fontSize及strokeColor字段为0.7.0+版本新增的，用于设置收起时显示节点数量的文字样式）  |          |
 | expandBtnIcon（v0.5.0+）     | Object  | { open: '', close: '' } | 自定义展开收起按钮的图标，可以传图标的svg字符串  |          |
+| expandBtnNumHandler（v0.7.0+）     | Function  |  | 用于自定义收起时显示节点数量的内容，接收一个参数，代表收起的节点实例，需要返回一个数字或字符串，代表最终显示的内容，比如你可以当数量大于99时，显示99+  |          |
+| isShowExpandNum（v0.7.0+）     | Boolean  | true | 节点收起时是否显示收起的数量  |          |
 | enableShortcutOnlyWhenMouseInSvg（v0.5.1+）     | Boolean  | true | 是否只有当鼠标在画布内才响应快捷键事件  |          |
 | enableNodeTransitionMove（v0.5.1+）（v0.6.7+已去除该特性）     | Boolean  | true | 是否开启节点动画过渡  |          |
 | nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+已去除该特性）     | Number  | 300 | 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms  |          |
@ -80,7 +82,11 @@ const mindMap = new MindMap({
 | errorHandler（v0.6.15+）     | Function  |  | 自定义错误处理函数，目前只会抛出一些异步逻辑出错的情况。可以传递一个函数，会接收两个参数，第一个为错误的类型，第二个为错误对象 |          |
 | disableMouseWheelZoom（v0.6.15+）     | Boolean  | false | 禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放 |          |
 | resetCss（v0.6.16+）     | String  |  * { margin: 0; padding: 0; box-sizing: border-box; } | 设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖，如果不覆盖，节点内容会发生偏移 |          |
-| enableDblclickReset（v0.6.17+）     | Boolean  | true  | 开启鼠标双击复位思维导图位置及缩放 |          |
+| enableDblclickReset（v0.6.17+）     | Boolean  | true（v0.7.0+改为false）  | 开启鼠标双击复位思维导图位置及缩放 |          |
+| minExportImgCanvasScale（v0.7.0+）     | Number  | 2  | 导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度 |          |
+| hoverRectColor（v0.7.0+）     | String  | rgb(94, 200, 248)  | 节点鼠标hover和激活时显示的矩形边框颜色，hover时会添加0.6的透明度 |          |
+| hoverRectPadding（v0.7.0+）     | Number  | 2  | 节点鼠标hover和激活时显示的矩形边框距节点内容的距离 |          |
+| selectTextOnEnterEditText（v0.7.0+）     | Boolean  | true  | 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中 |          |

 ### 水印配置

@ -330,8 +336,8 @@ mindMap.updateConfig({
 | REMOVE_NODE                         | 删除节点，操作节点为当前激活的节点或指定节点                         |   appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）                                                           |
 | PASTE_NODE                          | 粘贴节点到节点，操作节点为当前激活的节点                     | data（要粘贴的节点数据，一般通过`renderer.copyNode()`方法和`renderer.cutNode()`方法获取） |
 | CUT_NODE                            | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效 | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回) |
-| SET_NODE_STYLE                      | 修改节点单个样式                                                 | node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式） |
-| SET_NODE_STYLEs（v0.6.12+）                      | 修改节点多个样式                                                 | node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（布尔值，是否设置的是激活状态的样式） |
+| SET_NODE_STYLE                      | 修改节点单个样式                                                 | node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式） |
+| SET_NODE_STYLEs（v0.6.12+）                      | 修改节点多个样式                                                 | node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式） |
 | SET_NODE_ACTIVE                     | 设置节点是否激活                                             | node（要设置的节点）、active（布尔值，是否激活）             |
 | CLEAR_ACTIVE_NODE                   | 清除当前已激活节点的激活状态，操作节点为当前激活的节点       |                                                              |
 | SET_NODE_EXPAND                     | 设置节点是否展开                                             | node（要设置的节点）、expand（布尔值，是否展开）             |
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@ -199,8 +199,8 @@
 <tr>
 <td>expandBtnStyle（v0.5.0+）</td>
 <td>Object</td>
-<td>{ color: '#808080', fill: '#fff' }</td>
-<td>展开收起按钮的颜色</td>
+<td>{ color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' }</td>
+<td>展开收起按钮的颜色，（fontSize及strokeColor字段为0.7.0+版本新增的，用于设置收起时显示节点数量的文字样式）</td>
 <td></td>
 </tr>
 <tr>
@ -211,6 +211,20 @@
 <td></td>
 </tr>
 <tr>
+<td>expandBtnNumHandler（v0.7.0+）</td>
+<td>Function</td>
+<td></td>
+<td>用于自定义收起时显示节点数量的内容，接收一个参数，代表收起的节点实例，需要返回一个数字或字符串，代表最终显示的内容，比如你可以当数量大于99时，显示99+</td>
+<td></td>
+</tr>
+<tr>
+<td>isShowExpandNum（v0.7.0+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>节点收起时是否显示收起的数量</td>
+<td></td>
+</tr>
+<tr>
 <td>enableShortcutOnlyWhenMouseInSvg（v0.5.1+）</td>
 <td>Boolean</td>
 <td>true</td>
@ -423,10 +437,38 @@
 <tr>
 <td>enableDblclickReset（v0.6.17+）</td>
 <td>Boolean</td>
-<td>true</td>
+<td>true（v0.7.0+改为false）</td>
 <td>开启鼠标双击复位思维导图位置及缩放</td>
 <td></td>
 </tr>
+<tr>
+<td>minExportImgCanvasScale（v0.7.0+）</td>
+<td>Number</td>
+<td>2</td>
+<td>导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度</td>
+<td></td>
+</tr>
+<tr>
+<td>hoverRectColor（v0.7.0+）</td>
+<td>String</td>
+<td>rgb(94, 200, 248)</td>
+<td>节点鼠标hover和激活时显示的矩形边框颜色，hover时会添加0.6的透明度</td>
+<td></td>
+</tr>
+<tr>
+<td>hoverRectPadding（v0.7.0+）</td>
+<td>Number</td>
+<td>2</td>
+<td>节点鼠标hover和激活时显示的矩形边框距节点内容的距离</td>
+<td></td>
+</tr>
+<tr>
+<td>selectTextOnEnterEditText（v0.7.0+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>
@ -888,12 +930,12 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <tr>
 <td>SET_NODE_STYLE</td>
 <td>修改节点单个样式</td>
-<td>node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式）</td>
+<td>node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式）</td>
 </tr>
 <tr>
 <td>SET_NODE_STYLEs（v0.6.12+）</td>
 <td>修改节点多个样式</td>
-<td>node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（布尔值，是否设置的是激活状态的样式）</td>
+<td>node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式）</td>
 </tr>
 <tr>
 <td>SET_NODE_ACTIVE</td>
--- a/web/src/pages/Doc/zh/course23/index.md
+++ b/web/src/pages/Doc/zh/course23/index.md
@ -0,0 +1,116 @@
+# 如何渲染滚动条
+
+> 需要先注册 Scrollbar 插件
+
+滚动条分为水平和垂直滚动条，所以你需要创建如下模板：
+
+```html
+<!-- 垂直 -->
+<div class="scrollbar verticalScrollbar" ref="verticalScrollbarRef">
+    <div
+        class="scrollbarInner"
+        :style="verticalScrollbarStyle"
+        @mousedown="onVerticalScrollbarMousedown"
+    ></div>
+</div>
+
+<!-- 水平 -->
+<div class="scrollbar horizontalScrollbar" ref="horizontalScrollbarRef">
+    <div
+        class="scrollbarInner"
+        :style="horizontalScrollbarStyle"
+        @mousedown="onHorizontalScrollbarMousedown"
+    ></div>
+</div>
+```
+
+外层元素为滚动条容器元素，内层为滚动条元素。
+
+内层滚动条元素一般需要设置成绝对定位，样式示例如下：
+
+```css
+.scrollbar {
+    position: relative;
+    background-color: #f5f5f5;
+    border-radius: 10px;
+    overflow: hidden;
+
+    &.verticalScrollbar {
+        width: 10px;
+        height: 500px;
+
+        .scrollbarInner {
+            width: 10px;
+            left: 0;
+        }
+    }
+
+    &.horizontalScrollbar {
+        width: 500px;
+        height: 10px;
+
+        .scrollbarInner {
+            height: 10px;
+            top: 0;
+        }
+    }
+
+    .scrollbarInner {
+        position: absolute;
+        background-color: #ccc;
+        border-radius: 10px;
+    }
+}
+```
+
+垂直滚动条的`top`和`height`、水平滚动条的`left`和`width`值需要调用插件的方法获取。
+
+首先你需要调用`setScrollBarWrapSize`方法传递你的滚动条容器的宽和高：
+
+```js
+// 水平滚动条容器的宽度
+const { width } = this.$refs.horizontalScrollbarRef.getBoundingClientRect()
+// 垂直滚动条容器的高度
+const { height } = this.$refs.verticalScrollbarRef.getBoundingClientRect()
+mindMap.scrollbar.setScrollBarWrapSize(width, height)
+```
+
+如果容器大小发生了改变需要再次调用该方法传递改变后的大小。
+
+然后你需要监听`scrollbar_change`方法来获取滚动条大小和位置数据：
+
+```js
+mindMap.('scrollbar_change', this.updateScrollbar)
+
+// 调用插件方法更新滚动条位置和大小
+{
+    updateScrollbar() {
+        const {
+            vertical,
+            horizontal
+        } = mindMap.scrollbar.calculationScrollbar()
+        this.verticalScrollbarStyle = {
+            top: vertical.top + '%',
+            height: vertical.height + '%'
+        }
+        this.horizontalScrollbarStyle = {
+            left: horizontal.left + '%',
+            width: horizontal.width + '%'
+        }
+    }
+}
+```
+
+调用插件的`calculationScrollbar`方法来获取滚动条元素的位置和大小，返回的是百分比数值，所以需要添加`%`。
+
+最后，需要给滚动条元素绑定`mousedown`事件，并且调用插件的`onMousedown`方法：
+
+```js
+// 垂直滚动条元素
+mindMap.scrollbar.onMousedown(e, 'vertical')
+
+// 水平滚动条元素
+mindMap.scrollbar.onMousedown(e, 'horizontal')
+```
+
+以上就是实现滚动条渲染的全部步骤。
--- a/web/src/pages/Doc/zh/course23/index.vue
+++ b/web/src/pages/Doc/zh/course23/index.vue
@ -0,0 +1,112 @@
+<template>
+  <div>
+    <h1>如何渲染滚动条</h1>
+<blockquote>
+<p>需要先注册 Scrollbar 插件</p>
+</blockquote>
+<p>滚动条分为水平和垂直滚动条，所以你需要创建如下模板：</p>
+<pre class="hljs"><code><span class="hljs-comment">&lt;!-- 垂直 --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbar verticalScrollbar&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;verticalScrollbarRef&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>
+        <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbarInner&quot;</span>
+        <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;verticalScrollbarStyle&quot;</span>
+        @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;onVerticalScrollbarMousedown&quot;</span>
+    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- 水平 --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbar horizontalScrollbar&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;horizontalScrollbarRef&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>
+        <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbarInner&quot;</span>
+        <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;horizontalScrollbarStyle&quot;</span>
+        @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;onHorizontalScrollbarMousedown&quot;</span>
+    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+<p>外层元素为滚动条容器元素，内层为滚动条元素。</p>
+<p>内层滚动条元素一般需要设置成绝对定位，样式示例如下：</p>
+<pre class="hljs"><code><span class="hljs-selector-class">.scrollbar</span> {
+    <span class="hljs-attribute">position</span>: relative;
+    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f5f5f5</span>;
+    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
+    <span class="hljs-attribute">overflow</span>: hidden;
+
+    &amp;<span class="hljs-selector-class">.verticalScrollbar</span> {
+        <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;
+        <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;
+
+        <span class="hljs-selector-class">.scrollbarInner</span> {
+            <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;
+            <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
+        }
+    }
+
+    &amp;<span class="hljs-selector-class">.horizontalScrollbar</span> {
+        <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;
+        <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;
+
+        <span class="hljs-selector-class">.scrollbarInner</span> {
+            <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;
+            <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
+        }
+    }
+
+    <span class="hljs-selector-class">.scrollbarInner</span> {
+        <span class="hljs-attribute">position</span>: absolute;
+        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ccc</span>;
+        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
+    }
+}
+</code></pre>
+<p>垂直滚动条的<code>top</code>和<code>height</code>、水平滚动条的<code>left</code>和<code>width</code>值需要调用插件的方法获取。</p>
+<p>首先你需要调用<code>setScrollBarWrapSize</code>方法传递你的滚动条容器的宽和高：</p>
+<pre class="hljs"><code><span class="hljs-comment">// 水平滚动条容器的宽度</span>
+<span class="hljs-keyword">const</span> { width } = <span class="hljs-built_in">this</span>.$refs.horizontalScrollbarRef.getBoundingClientRect()
+<span class="hljs-comment">// 垂直滚动条容器的高度</span>
+<span class="hljs-keyword">const</span> { height } = <span class="hljs-built_in">this</span>.$refs.verticalScrollbarRef.getBoundingClientRect()
+mindMap.scrollbar.setScrollBarWrapSize(width, height)
+</code></pre>
+<p>如果容器大小发生了改变需要再次调用该方法传递改变后的大小。</p>
+<p>然后你需要监听<code>scrollbar_change</code>方法来获取滚动条大小和位置数据：</p>
+<pre class="hljs"><code>mindMap.(<span class="hljs-string">&#x27;scrollbar_change&#x27;</span>, <span class="hljs-built_in">this</span>.updateScrollbar)
+
+<span class="hljs-comment">// 调用插件方法更新滚动条位置和大小</span>
+{
+    <span class="hljs-function"><span class="hljs-title">updateScrollbar</span>(<span class="hljs-params"></span>)</span> {
+        <span class="hljs-keyword">const</span> {
+            vertical,
+            horizontal
+        } = mindMap.scrollbar.calculationScrollbar()
+        <span class="hljs-built_in">this</span>.verticalScrollbarStyle = {
+            <span class="hljs-attr">top</span>: vertical.top + <span class="hljs-string">&#x27;%&#x27;</span>,
+            <span class="hljs-attr">height</span>: vertical.height + <span class="hljs-string">&#x27;%&#x27;</span>
+        }
+        <span class="hljs-built_in">this</span>.horizontalScrollbarStyle = {
+            <span class="hljs-attr">left</span>: horizontal.left + <span class="hljs-string">&#x27;%&#x27;</span>,
+            <span class="hljs-attr">width</span>: horizontal.width + <span class="hljs-string">&#x27;%&#x27;</span>
+        }
+    }
+}
+</code></pre>
+<p>调用插件的<code>calculationScrollbar</code>方法来获取滚动条元素的位置和大小，返回的是百分比数值，所以需要添加<code>%</code>。</p>
+<p>最后，需要给滚动条元素绑定<code>mousedown</code>事件，并且调用插件的<code>onMousedown</code>方法：</p>
+<pre class="hljs"><code><span class="hljs-comment">// 垂直滚动条元素</span>
+mindMap.scrollbar.onMousedown(e, <span class="hljs-string">&#x27;vertical&#x27;</span>)
+
+<span class="hljs-comment">// 水平滚动条元素</span>
+mindMap.scrollbar.onMousedown(e, <span class="hljs-string">&#x27;horizontal&#x27;</span>)
+</code></pre>
+<p>以上就是实现滚动条渲染的全部步骤。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course24/index.md
+++ b/web/src/pages/Doc/zh/course24/index.md
@ -0,0 +1,65 @@
+# 如何开发一个插件
+
+库本身提供了一些插件，如果满足不了你的需求，你也可以自己开发一个新插件。
+
+想要开发一个插件，你肯定需要对库的实现原理、模块划分、目录结构等等有一定了解，简而言之，需要你对库的源码有一定程度的熟悉，所以如果还没看过，现在就可以先去阅读一下，好消息是，本库的源码并不复杂，相信你一定能看懂。
+
+在你决定动手之前，最好先看一下内部插件是如何实现的。
+
+一个插件就是一个类：
+
+```js
+class YourPlugin {
+    constructor({ mindMap }) {
+        this.mindMap = mindMap
+    }
+
+    // 插件被移除前做的事情
+    beforePluginRemove() {
+        
+    }
+
+    // 插件被卸载前做的事情
+    beforePluginDestroy() {
+        
+    }
+}
+
+Scrollbar.instanceName = 'yourPlugin'
+```
+
+实例化插件时会传入思维导图实例，你可以保存起来，后续可以通过它来监听方法或调用实例的方法，甚至是其他插件的方法。
+
+需要给插件类添加一个静态属性`instanceName`，会将你的插件实例通过该属性保存到思维导图实例上，外部或其他插件想要获取你的插件实例时都需要通过该属性：
+
+```js
+mindMap.yourPlugin.xxx
+```
+
+插件存在两个生命周期函数：
+
+`beforePluginRemove`生命周期会在思维导图实例调用`removePlugin`方法时调用，代表思维导图实例并没有销毁，只是移除该插件。
+
+`beforePluginDestroy`生命周期会在销毁思维导图时调用，此时思维导图实例也会被销毁。
+
+```js
+mindMap.removePlugin(YourPlugin)
+```
+
+你也可以继承内部的一些插件：
+
+```js
+import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js'
+
+class YourPlugin extends ScrollbarPlugin {
+    constructor(opt) {
+        super(opt)
+    }
+}
+
+Scrollbar.instanceName = 'yourPlugin'
+```
+
+插件的原理无非是监听一些你需要的事件，然后调用一些你需要的方法来完成一些功能，其实没啥好多说的，建议看一下内部插件的实现。
+
+当你完成了一个插件后，你可以考虑发布到`npm`，提供给其他开发者使用。
--- a/web/src/pages/Doc/zh/course24/index.vue
+++ b/web/src/pages/Doc/zh/course24/index.vue
@ -0,0 +1,60 @@
+<template>
+  <div>
+    <h1>如何开发一个插件</h1>
+<p>库本身提供了一些插件，如果满足不了你的需求，你也可以自己开发一个新插件。</p>
+<p>想要开发一个插件，你肯定需要对库的实现原理、模块划分、目录结构等等有一定了解，简而言之，需要你对库的源码有一定程度的熟悉，所以如果还没看过，现在就可以先去阅读一下，好消息是，本库的源码并不复杂，相信你一定能看懂。</p>
+<p>在你决定动手之前，最好先看一下内部插件是如何实现的。</p>
+<p>一个插件就是一个类：</p>
+<pre class="hljs"><code><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">YourPlugin</span> </span>{
+    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">{ mindMap }</span>)</span> {
+        <span class="hljs-built_in">this</span>.mindMap = mindMap
+    }
+
+    <span class="hljs-comment">// 插件被移除前做的事情</span>
+    <span class="hljs-function"><span class="hljs-title">beforePluginRemove</span>(<span class="hljs-params"></span>)</span> {
+        
+    }
+
+    <span class="hljs-comment">// 插件被卸载前做的事情</span>
+    <span class="hljs-function"><span class="hljs-title">beforePluginDestroy</span>(<span class="hljs-params"></span>)</span> {
+        
+    }
+}
+
+Scrollbar.instanceName = <span class="hljs-string">&#x27;yourPlugin&#x27;</span>
+</code></pre>
+<p>实例化插件时会传入思维导图实例，你可以保存起来，后续可以通过它来监听方法或调用实例的方法，甚至是其他插件的方法。</p>
+<p>需要给插件类添加一个静态属性<code>instanceName</code>，会将你的插件实例通过该属性保存到思维导图实例上，外部或其他插件想要获取你的插件实例时都需要通过该属性：</p>
+<pre class="hljs"><code>mindMap.yourPlugin.xxx
+</code></pre>
+<p>插件存在两个生命周期函数：</p>
+<p><code>beforePluginRemove</code>生命周期会在思维导图实例调用<code>removePlugin</code>方法时调用，代表思维导图实例并没有销毁，只是移除该插件。</p>
+<p><code>beforePluginDestroy</code>生命周期会在销毁思维导图时调用，此时思维导图实例也会被销毁。</p>
+<pre class="hljs"><code>mindMap.removePlugin(YourPlugin)
+</code></pre>
+<p>你也可以继承内部的一些插件：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> ScrollbarPlugin <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Scrollbar.js&#x27;</span>
+
+<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">YourPlugin</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ScrollbarPlugin</span> </span>{
+    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">opt</span>)</span> {
+        <span class="hljs-built_in">super</span>(opt)
+    }
+}
+
+Scrollbar.instanceName = <span class="hljs-string">&#x27;yourPlugin&#x27;</span>
+</code></pre>
+<p>插件的原理无非是监听一些你需要的事件，然后调用一些你需要的方法来完成一些功能，其实没啥好多说的，建议看一下内部插件的实现。</p>
+<p>当你完成了一个插件后，你可以考虑发布到<code>npm</code>，提供给其他开发者使用。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course3/index.md
+++ b/web/src/pages/Doc/zh/course3/index.md
@ -14,6 +14,28 @@ mindMap.execCommand('INSERT_CHILD_NODE')

 `INSERT_CHILD_NODE`命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。

+如果你想获取插入节点的实例，可以这样操作：
+
+1.需要指定新插入节点的`id`，比如：
+
+```js
+import { createUid } from 'simple-mind-map/src/utils'
+
+let uid = createUid()
+mindMap.execCommand('INSERT_CHILD_NODE', false, [], {
+    uid
+})
+```
+
+2.然后在`node_tree_render_end`事件里通过该`id`来获取实例：
+
+```js
+mindMap.on('node_tree_render_end', () => {
+    // 调用renderer实例的findNodeByUid方法获取到节点的实例对象
+    const node = mindMap.renderer.findNodeByUid(uid)
+})
+```
+
 ## 插入兄弟节点

 插入兄弟节点和插入子节点方式完全一致：
--- a/web/src/pages/Doc/zh/course3/index.vue
+++ b/web/src/pages/Doc/zh/course3/index.vue
@ -8,6 +8,21 @@
 </code></pre>
 <p>这样就会在当前激活节点（如果存在多个激活节点，默认会操作第一个激活节点）下添加一个子节点。</p>
 <p><code>INSERT_CHILD_NODE</code>命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。</p>
+<p>如果你想获取插入节点的实例，可以这样操作：</p>
+<p>1.需要指定新插入节点的<code>id</code>，比如：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> { createUid } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils&#x27;</span>
+
+<span class="hljs-keyword">let</span> uid = createUid()
+mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">false</span>, [], {
+    uid
+})
+</code></pre>
+<p>2.然后在<code>node_tree_render_end</code>事件里通过该<code>id</code>来获取实例：</p>
+<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;node_tree_render_end&#x27;</span>, <span class="hljs-function">() =&gt;</span> {
+    <span class="hljs-comment">// 调用renderer实例的findNodeByUid方法获取到节点的实例对象</span>
+    <span class="hljs-keyword">const</span> node = mindMap.renderer.findNodeByUid(uid)
+})
+</code></pre>
 <h2>插入兄弟节点</h2>
 <p>插入兄弟节点和插入子节点方式完全一致：</p>
 <pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_NODE&#x27;</span>)
--- a/web/src/pages/Doc/zh/doExport/index.md
+++ b/web/src/pages/Doc/zh/doExport/index.md
@ -38,13 +38,17 @@ a.download = 'xxx'
 a.click()
 ```

-### png(name, transparent = false, rotateWhenWidthLongerThenHeight)
+### png(name, transparent = false, checkRotate)
+
+> v0.7.0以下版本为： png(name, transparent = false, rotateWhenWidthLongerThenHeight)

 - `name`：名称，可不传

 - `transparent`：v0.5.7+，指定导出图片的背景是否是透明的

- `rotateWhenWidthLongerThenHeight`: v0.6.15+，Boolean, false, 是否在图片宽比高长时自动旋转90度
+- `rotateWhenWidthLongerThenHeight`: v0.6.15+，v0.7.0+已废弃，Boolean, false, 是否在图片宽比高长时自动旋转90度
+
+- `checkRotate`：v0.7.0+，Function，可以传递一个函数，接收图片的宽度和高度两个参数，返回true或false，true代表图片需要旋转90度。

 导出为`png`。

--- a/web/src/pages/Doc/zh/doExport/index.vue
+++ b/web/src/pages/Doc/zh/doExport/index.vue
@ -27,7 +27,10 @@ a.href = <span class="hljs-string">&#x27;xxx.png&#x27;</span><span class="hljs-c
 a.download = <span class="hljs-string">&#x27;xxx&#x27;</span>
 a.click()
 </code></pre>
-<h3>png(name, transparent = false, rotateWhenWidthLongerThenHeight)</h3>
+<h3>png(name, transparent = false, checkRotate)</h3>
+<blockquote>
+<p>v0.7.0以下版本为： png(name, transparent = false, rotateWhenWidthLongerThenHeight)</p>
+</blockquote>
 <ul>
 <li>
 <p><code>name</code>：名称，可不传</p>
@ -36,7 +39,10 @@ a.click()
 <p><code>transparent</code>：v0.5.7+，指定导出图片的背景是否是透明的</p>
 </li>
 <li>
-<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+，Boolean, false, 是否在图片宽比高长时自动旋转90度</p>
+<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+，v0.7.0+已废弃，Boolean, false, 是否在图片宽比高长时自动旋转90度</p>
+</li>
+<li>
+<p><code>checkRotate</code>：v0.7.0+，Function，可以传递一个函数，接收图片的宽度和高度两个参数，返回true或false，true代表图片需要旋转90度。</p>
 </li>
 </ul>
 <p>导出为<code>png</code>。</p>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@ -181,4 +181,8 @@
        <img src="../../../../assets/avatar/布林.jpg" 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
@ -141,6 +141,10 @@
        <img src="../../../../assets/avatar/布林.jpg" 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/node/index.md
+++ b/web/src/pages/Doc/zh/node/index.md
@ -110,16 +110,20 @@

 `root`：是否是根节点，默认`false`

-`isActive`：获取的是否是激活状态的样式值，默认`false`
+`isActive`：v0.7.0+已废弃，获取的是否是激活状态的样式值，默认`false`

 ### setStyle(prop, value, isActive)

+`isActive`：v0.7.0+已废弃
+
 修改节点的某个样式，`SET_NODE_STYLE`命令的快捷方法

 ### setStyles(style, isActive)

 > v0.6.12+

+`isActive`：v0.7.0+已废弃
+
 修改节点多个样式，`SET_NODE_STYLES`命令的快捷方法

 ### getData(key)
--- a/web/src/pages/Doc/zh/node/index.vue
+++ b/web/src/pages/Doc/zh/node/index.vue
@ -64,13 +64,15 @@
 <p>获取某个最终应用到该节点的样式值</p>
 <p><code>prop</code>：要获取的样式属性</p>
 <p><code>root</code>：是否是根节点，默认<code>false</code></p>
-<p><code>isActive</code>：获取的是否是激活状态的样式值，默认<code>false</code></p>
+<p><code>isActive</code>：v0.7.0+已废弃，获取的是否是激活状态的样式值，默认<code>false</code></p>
 <h3>setStyle(prop, value, isActive)</h3>
+<p><code>isActive</code>：v0.7.0+已废弃</p>
 <p>修改节点的某个样式，<code>SET_NODE_STYLE</code>命令的快捷方法</p>
 <h3>setStyles(style, isActive)</h3>
 <blockquote>
 <p>v0.6.12+</p>
 </blockquote>
+<p><code>isActive</code>：v0.7.0+已废弃</p>
 <p>修改节点多个样式，<code>SET_NODE_STYLES</code>命令的快捷方法</p>
 <h3>getData(key)</h3>
 <p>获取该节点真实数据<code>nodeData</code>的<code>data</code>对象里的指定值，<code>key</code>不传返回这个<code>data</code>对象</p>
--- a/web/src/pages/Doc/zh/scrollbar/index.md
+++ b/web/src/pages/Doc/zh/scrollbar/index.md
@ -0,0 +1,64 @@
+# Scrollbar 插件
+
+> v0.7.0+
+
+该插件用于帮助开发水平和垂直滚动条的功能。
+
+## 注册
+
+```js
+import MindMap from 'simple-mind-map'
+import Scrollbar from 'simple-mind-map/src/plugins/Scrollbar.js'
+MindMap.usePlugin(Scrollbar)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.scrollbar`获取到该实例。
+
+## 事件
+
+#### scrollbar_change
+
+当滚动条数据发生改变时触发，你可以监听该事件来更新滚动条位置和大小。
+
+## 方法
+
+### setScrollBarWrapSize(width, height)
+
+- `width`：Number，你的滚动条容器元素的宽度。
+
+- `height`： Number，你的滚动条容器元素的高度。
+
+设置滚动条容器的大小，对于水平滚动条，即容器的宽度，对于垂直滚动条，即容器的高度。当你的滚动条容器尺寸改变时需要再次调用该方法。
+
+### calculationScrollbar()
+
+> 需要先调用setScrollBarWrapSize方法设置滚动条容器元素的宽高。
+>
+> 一般需要监听scrollbar_change事件，然后调用该方法更新滚动条。
+
+返回值：
+
+```js
+{
+    // 垂直滚动条
+    vertical: {
+        top,
+        height
+    },
+    // 水平滚动条
+    horizontal: {
+        left,
+        width
+    }
+}
+```
+
+获取滚动条大小和位置，你可以根据返回值来设置到滚动条元素上，达到渲染和关心滚动条的效果。
+
+### onMousedown(e, type)
+
+- `e`：鼠标按下事件的事件对象。
+
+- `type`：按下的滚动条类型，vertical（垂直滚动条）、horizontal（水平滚动条）。
+
+滚动条元素的鼠标按下事件时需要调用该方法。
--- a/web/src/pages/Doc/zh/scrollbar/index.vue
+++ b/web/src/pages/Doc/zh/scrollbar/index.vue
@ -0,0 +1,70 @@
+<template>
+  <div>
+    <h1>Scrollbar 插件</h1>
+<blockquote>
+<p>v0.7.0+</p>
+</blockquote>
+<p>该插件用于帮助开发水平和垂直滚动条的功能。</p>
+<h2>注册</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Scrollbar <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Scrollbar.js&#x27;</span>
+MindMap.usePlugin(Scrollbar)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.scrollbar</code>获取到该实例。</p>
+<h2>事件</h2>
+<h4>scrollbar_change</h4>
+<p>当滚动条数据发生改变时触发，你可以监听该事件来更新滚动条位置和大小。</p>
+<h2>方法</h2>
+<h3>setScrollBarWrapSize(width, height)</h3>
+<ul>
+<li>
+<p><code>width</code>：Number，你的滚动条容器元素的宽度。</p>
+</li>
+<li>
+<p><code>height</code>： Number，你的滚动条容器元素的高度。</p>
+</li>
+</ul>
+<p>设置滚动条容器的大小，对于水平滚动条，即容器的宽度，对于垂直滚动条，即容器的高度。当你的滚动条容器尺寸改变时需要再次调用该方法。</p>
+<h3>calculationScrollbar()</h3>
+<blockquote>
+<p>需要先调用setScrollBarWrapSize方法设置滚动条容器元素的宽高。</p>
+<p>一般需要监听scrollbar_change事件，然后调用该方法更新滚动条。</p>
+</blockquote>
+<p>返回值：</p>
+<pre class="hljs"><code>{
+    <span class="hljs-comment">// 垂直滚动条</span>
+    <span class="hljs-attr">vertical</span>: {
+        top,
+        height
+    },
+    <span class="hljs-comment">// 水平滚动条</span>
+    <span class="hljs-attr">horizontal</span>: {
+        left,
+        width
+    }
+}
+</code></pre>
+<p>获取滚动条大小和位置，你可以根据返回值来设置到滚动条元素上，达到渲染和关心滚动条的效果。</p>
+<h3>onMousedown(e, type)</h3>
+<ul>
+<li>
+<p><code>e</code>：鼠标按下事件的事件对象。</p>
+</li>
+<li>
+<p><code>type</code>：按下的滚动条类型，vertical（垂直滚动条）、horizontal（水平滚动条）。</p>
+</li>
+</ul>
+<p>滚动条元素的鼠标按下事件时需要调用该方法。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>