Doc: update

2026-02-17 14:04:47 +08:00 · 2024-06-14 15:06:56 +08:00
parent fcdcda929c
commit de423f3bd3
25 changed files with 577 additions and 55 deletions
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ Github：[releases](https://github.com/wanglin2/mind-map/releases)。百度云

 官方提供了如下插件，可根据需求按需引入（某个功能不生效大概率是因为你没有引入对应的插件），具体使用方式请查看文档：

-> RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、HandDrawnLikeStyle（手绘风格插件）[收费]
+> RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、HandDrawnLikeStyle（手绘风格插件）[收费]、Notation（节点标记插件）[收费]

 本项目不会实现的特性：

@@ -385,4 +385,20 @@ 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/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/好名字.jpg" style="width: 50px;height: 50px;" />
+        <span>好名字</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/Kyle.jpg" style="width: 50px;height: 50px;" />
+        <span>Kyle</span>
+    </span>
 </p>
--- a/web/src/assets/avatar/Kyle.jpg
+++ b/web/src/assets/avatar/Kyle.jpg
--- 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/标记.jpg
+++ b/web/src/assets/img/docs/标记.jpg
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -41,6 +41,7 @@ let APIList = [
  'rainbowLines',
  'handDrawnLikeStyle',
  'demonstrate',
+  'notation',
  'xmind',
  'markdown',
  'utils'
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,35 @@
 # Changelog

+## 0.10.1
+
+Fix:
+
+> 1.Fix the issue where the TouchEvent plugin triggers node input when clicking twice at different positions;
+>
+> 2.Fix / shortcut the issue of being able to retrieve child nodes of the root node;
+
+New:
+
+> 1.Add instantiation options for handling SVG objects before export;
+>
+> 2.Add instantiation options for cloned nodes when modifying drag and drop nodes;
+>
+> 3.Add a content layout completion event for distributing individual nodes;
+>
+> 4.Add instantiation options for intercepting node drag and drop;
+>
+> 5.Add instantiation options to restrict the maximum and minimum values of TouchEvent plugin's double finger scaling;
+>
+> 6.Add a node editing plugin;
+
+Demo:
+
+> 1.Add node marking function;
+>
+> 2.Fix the issue where the input box in the bottom right corner cannot be entered in demonstration mode;
+>
+> 3.Do not display directory, new, or open buttons when opening on the mobile end;
+
 ## 0.10.0

 Major updates: Upgrade the interaction effect when dragging nodes;
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,27 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.10.1</h2>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue where the TouchEvent plugin triggers node input when clicking twice at different positions;</p>
+<p>2.Fix / shortcut the issue of being able to retrieve child nodes of the root node;</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Add instantiation options for handling SVG objects before export;</p>
+<p>2.Add instantiation options for cloned nodes when modifying drag and drop nodes;</p>
+<p>3.Add a content layout completion event for distributing individual nodes;</p>
+<p>4.Add instantiation options for intercepting node drag and drop;</p>
+<p>5.Add instantiation options to restrict the maximum and minimum values of TouchEvent plugin's double finger scaling;</p>
+<p>6.Add a node editing plugin;</p>
+</blockquote>
+<p>Demo:</p>
+<blockquote>
+<p>1.Add node marking function;</p>
+<p>2.Fix the issue where the input box in the bottom right corner cannot be entered in demonstration mode;</p>
+<p>3.Do not display directory, new, or open buttons when opening on the mobile end;</p>
+</blockquote>
 <h2>0.10.0</h2>
 <p>Major updates: Upgrade the interaction effect when dragging nodes;</p>
 <p>Fix:</p>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -93,7 +93,7 @@ const mindMap = new MindMap({
 | 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 |         |
 | beforeShortcutRun（v0.9.9+）     | Function、null | null  | The lifecycle function before the shortcut operation is about to be executed, returning true can prevent the operation from executing. The function takes two parameters: key（Shortcut key）、activeNodeList（List of currently activated nodes） |         |
-| resetScaleOnMoveNodeToCenter（v0.9.12+）     | Boolean |  false | Whether to reset the scaling level to 100% when moving nodes to the canvas center, returning to the root node, and other operations（The underlying impact is on the moveNodeToCenter method of the render class） |         |
+| resetScaleOnMoveNodeToCenter（v0.9.12+）     | Boolean |  false | Whether to reset the scaling level to 100% when moving nodes to the canvas center, returning to the root node, and other operations（This option actually affects the render. moveNodeToCenter method, and the moveNodeToCenter method itself also has a second parameter, resetScale, to set whether to reset. If the resetScale parameter is not passed, then use resetScaleOnMoveNodeToCenter configuration; otherwise, use resetScale configuration） |         |
 | createNodePrefixContent（v0.9.12+）     | Function、null | null  | Add additional node pre content.Pre content refers to the pre content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, Can return objects in {el, width, height} format, el is a DOM node object, width and height represent the width, height, and numerical type of the content. If custom content is not required, null can also be returned  |         |
 | createNodePostfixContent（v0.9.12+）     | Function、null | null  | Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section. The usage is the same as createNodePrefixContent |         |

@@ -159,6 +159,7 @@ If you want to add custom fields, you can add them to the same level as 'data' a
 | 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 |          |
 | addContentToHeader（v0.9.9+）     | Function、null | null  | Add custom content to the header when exporting PNG, SVG, and PDF. Can pass a function that can return null to indicate no content is added, or it can return an object, For a detailed introduction, please refer to section 【How to add custom content when exporting】 below |         |
 | addContentToFooter（v0.9.9+）     | Function、null | null  | The basic definition is the same as addContentToHeader, adding custom content at the end |         |
+| handleBeingExportSvg（v0.10.1+）     | Function、null | null  | When exporting PNG, SVG, and PDF, the SVG data on the canvas will be obtained for cloning, and then exported through the cloned elements. If you want to do some processing on the cloned elements, such as adding, replacing, or modifying some of them, you can pass a processing function through this parameter to receive the SVG element object. After processing, you need to return the original SVG element object.（It should be noted that the node object refers to the element object of the @ svgdotjs/svg. js library, so you need to read the documentation of the library to operate this object） |         |

 #### 2.1How to add custom content when exporting

@@ -213,6 +214,8 @@ new MindMap({
 | dragPlaceholderRectFill（v0.7.2+）     |  String |  rgb(94, 200, 248) | The filling color of the schematic rectangle for the new position when dragging nodes. |          |
 | dragPlaceholderLineConfig（v0.10.0+）     |  Object | { color: 'rgb(94, 200, 248)',  width: 2 }  | Style configuration of schematic lines for new positions when dragging nodes |          |
 | dragOpacityConfig（v0.7.2+）     | Object  | { cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 }  | The transparency configuration during node dragging, passing an object, and the field meanings are: the transparency of the cloned node or rectangle that follows the mouse movement, and the transparency of the dragged node |          |
+| beforeDragEnd（v0.10.1+）     | null、Function  | null  | This function is called just before the drag is completed. The function receives an object as a parameter: {overlapNodeUid,prevNodeUid,nextNodeUid}, represents drag and drop information. If you want to prevent this drag and drop, you can return true. At this time, the node.drag event will not be triggered again. Functions can be asynchronous and return Promise instances |          |
+| handleDragCloneNode（v0.10.1+）     | null、Function  | null  | When dragging a single node, the dragged node will be cloned. If you want to modify the cloned node, you can provide a processing function through this option, which receives the cloned node object.（It should be noted that the node object refers to the element object of the @svgdotjs/svg.js library, so you need to read the documentation of the library to operate this object） |          |

 ### 5.Watermark plugin

@@ -256,6 +259,8 @@ new MindMap({
 | Field Name                       | Type    | Default Value    | Description                                 | Required |
 | -------------------------------- | ------- | ---------------- | ------------------------------------------- | -------- |
 | disableTouchZoom（v0.8.1+）     | Boolean | false  |  Prohibit double finger scaling, you can still use the API for scaling, which takes effect on the TouchEvent plugin |         |
+| minTouchZoomScale（v0.10.1+）     | Number | 20  | Allow maximum and minimum scaling values, percentage, pass -1 to indicate no restrictions  |         |
+| maxTouchZoomScale（v0.10.1+）     | Number | -1  |  Same as minTouchZoomScale |         |

 ### 9.Scrollbar plugin

@@ -579,6 +584,7 @@ Listen to an event. Event list:
 | exit_demonstrate（v0.9.11+）    | Triggered when exiting demonstration mode  |     |
 | demonstrate_jump（v0.9.11+）    | Trigger when switching steps in demonstration mode  |  currentStepIndex（The index of the steps currently played, counting from 0）、stepLength（Total number of playback steps）   |
 | node_tag_click（v0.9.12+）    | Click events on node labels | this(Current node instance)、item（Content of clicked tags）    |
+| node_layout_end（v0.10.1+）    | Event where the content layout of a single node is completed | this(Current node instance)  |

 ### emit(event, ...args)

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -502,7 +502,7 @@
 <td>resetScaleOnMoveNodeToCenter（v0.9.12+）</td>
 <td>Boolean</td>
 <td>false</td>
-<td>Whether to reset the scaling level to 100% when moving nodes to the canvas center, returning to the root node, and other operations（The underlying impact is on the moveNodeToCenter method of the render class）</td>
+<td>Whether to reset the scaling level to 100% when moving nodes to the canvas center, returning to the root node, and other operations（This option actually affects the render. moveNodeToCenter method, and the moveNodeToCenter method itself also has a second parameter, resetScale, to set whether to reset. If the resetScale parameter is not passed, then use resetScaleOnMoveNodeToCenter configuration; otherwise, use resetScale configuration）</td>
 <td></td>
 </tr>
 <tr>
@@ -651,6 +651,13 @@
 <td>The basic definition is the same as addContentToHeader, adding custom content at the end</td>
 <td></td>
 </tr>
+<tr>
+<td>handleBeingExportSvg（v0.10.1+）</td>
+<td>Function、null</td>
+<td>null</td>
+<td>When exporting PNG, SVG, and PDF, the SVG data on the canvas will be obtained for cloning, and then exported through the cloned elements. If you want to do some processing on the cloned elements, such as adding, replacing, or modifying some of them, you can pass a processing function through this parameter to receive the SVG element object. After processing, you need to return the original SVG element object.（It should be noted that the node object refers to the element object of the @ svgdotjs/svg. js library, so you need to read the documentation of the library to operate this object）</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h4>2.1How to add custom content when exporting</h4>
@@ -770,6 +777,20 @@
 <td>The transparency configuration during node dragging, passing an object, and the field meanings are: the transparency of the cloned node or rectangle that follows the mouse movement, and the transparency of the dragged node</td>
 <td></td>
 </tr>
+<tr>
+<td>beforeDragEnd（v0.10.1+）</td>
+<td>null、Function</td>
+<td>null</td>
+<td>This function is called just before the drag is completed. The function receives an object as a parameter: {overlapNodeUid,prevNodeUid,nextNodeUid}, represents drag and drop information. If you want to prevent this drag and drop, you can return true. At this time, the node.drag event will not be triggered again. Functions can be asynchronous and return Promise instances</td>
+<td></td>
+</tr>
+<tr>
+<td>handleDragCloneNode（v0.10.1+）</td>
+<td>null、Function</td>
+<td>null</td>
+<td>When dragging a single node, the dragged node will be cloned. If you want to modify the cloned node, you can provide a processing function through this option, which receives the cloned node object.（It should be noted that the node object refers to the element object of the @svgdotjs/svg.js library, so you need to read the documentation of the library to operate this object）</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>5.Watermark plugin</h3>
@@ -958,6 +979,20 @@
 <td>Prohibit double finger scaling, you can still use the API for scaling, which takes effect on the TouchEvent plugin</td>
 <td></td>
 </tr>
+<tr>
+<td>minTouchZoomScale（v0.10.1+）</td>
+<td>Number</td>
+<td>20</td>
+<td>Allow maximum and minimum scaling values, percentage, pass -1 to indicate no restrictions</td>
+<td></td>
+</tr>
+<tr>
+<td>maxTouchZoomScale（v0.10.1+）</td>
+<td>Number</td>
+<td>-1</td>
+<td>Same as minTouchZoomScale</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>9.Scrollbar plugin</h3>
@@ -1566,6 +1601,11 @@ poor performance and should be used sparingly.</p>
 <td>Click events on node labels</td>
 <td>this(Current node instance)、item（Content of clicked tags）</td>
 </tr>
+<tr>
+<td>node_layout_end（v0.10.1+）</td>
+<td>Event where the content layout of a single node is completed</td>
+<td>this(Current node instance)</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -23,7 +23,7 @@

 The official provides the following plugins, which can be introduced as needed (a certain function may not be effective because you did not introduce the corresponding plugin). Please refer to the documentation for specific usage methods:

-> RichText（Node Rich Text Plugin）、Select（Mouse Multiple Selection Node Plugin）、Drag（Node drag plugin）、AssociativeLine（Associate Line Plugin）、Export（Export plugin）、KeyboardNavigation（Keyboard navigation plugin）、MiniMap（Mini Map Plugin）、Watermark（Watermark plugin）、TouchEvent（Mobile touch event support plugin）、NodeImgAdjust（Drag and adjust node image size plugin）、Search（Search plugin）、Painter（Node Format Brush Plugin）、Scrollbar（Scroll bar plugin）、Formula（Mathematical Formula Plugin）、Cooperate（Collaborative editing plugin）、RainbowLines（Rainbow Line Plugin）、Demonstrate（Demonstration mode plugin）、HandDrawnLikeStyle（Hand drawn style plugin）[收费]
+> RichText（Node Rich Text Plugin）、Select（Mouse Multiple Selection Node Plugin）、Drag（Node drag plugin）、AssociativeLine（Associate Line Plugin）、Export（Export plugin）、KeyboardNavigation（Keyboard navigation plugin）、MiniMap（Mini Map Plugin）、Watermark（Watermark plugin）、TouchEvent（Mobile touch event support plugin）、NodeImgAdjust（Drag and adjust node image size plugin）、Search（Search plugin）、Painter（Node Format Brush Plugin）、Scrollbar（Scroll bar plugin）、Formula（Mathematical Formula Plugin）、Cooperate（Collaborative editing plugin）、RainbowLines（Rainbow Line Plugin）、Demonstrate（Demonstration mode plugin）、HandDrawnLikeStyle（Hand drawn style plugin）[charge]、Notation（Node marker plugin）[charge]

 Features that will not be implemented in this project:

@@ -410,4 +410,22 @@ 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>
+</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 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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/Kyle.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>Kyle</p>
+    </div>
+</div>
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -8,22 +8,22 @@
 </blockquote>
 <h2>Features</h2>
 <ul>
-<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">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="checkbox18" checked="true" /><label for="checkbox18">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="checkbox19" checked="true" /><label for="checkbox19">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
-<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
-<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, Support for expanding node content, and fully customize node content using DDM</label></li>
-<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Support canvas dragging and scaling</label></li>
-<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
-<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
-<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, scrollbar, Hand drawn style, and rainbow lines</label></li>
-<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Provide rich configurations to meet various scenarios and usage habits</label></li>
-<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Support collaborative editing</label></li>
-<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Support demonstration mode</label></li>
+<li><input type="checkbox" id="checkbox68" checked="true" /><label for="checkbox68">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="checkbox69" checked="true" /><label for="checkbox69">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="checkbox70" checked="true" /><label for="checkbox70">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
+<li><input type="checkbox" id="checkbox71" checked="true" /><label for="checkbox71">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
+<li><input type="checkbox" id="checkbox72" checked="true" /><label for="checkbox72">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, Support for expanding node content, and fully customize node content using DDM</label></li>
+<li><input type="checkbox" id="checkbox73" checked="true" /><label for="checkbox73">Support canvas dragging and scaling</label></li>
+<li><input type="checkbox" id="checkbox74" checked="true" /><label for="checkbox74">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
+<li><input type="checkbox" id="checkbox75" checked="true" /><label for="checkbox75">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
+<li><input type="checkbox" id="checkbox76" checked="true" /><label for="checkbox76">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, scrollbar, Hand drawn style, and rainbow lines</label></li>
+<li><input type="checkbox" id="checkbox77" checked="true" /><label for="checkbox77">Provide rich configurations to meet various scenarios and usage habits</label></li>
+<li><input type="checkbox" id="checkbox78" checked="true" /><label for="checkbox78">Support collaborative editing</label></li>
+<li><input type="checkbox" id="checkbox79" checked="true" /><label for="checkbox79">Support demonstration mode</label></li>
 </ul>
 <p>The official provides the following plugins, which can be introduced as needed (a certain function may not be effective because you did not introduce the corresponding plugin). Please refer to the documentation for specific usage methods:</p>
 <blockquote>
-<p>RichText（Node Rich Text Plugin）、Select（Mouse Multiple Selection Node Plugin）、Drag（Node drag plugin）、AssociativeLine（Associate Line Plugin）、Export（Export plugin）、KeyboardNavigation（Keyboard navigation plugin）、MiniMap（Mini Map Plugin）、Watermark（Watermark plugin）、TouchEvent（Mobile touch event support plugin）、NodeImgAdjust（Drag and adjust node image size plugin）、Search（Search plugin）、Painter（Node Format Brush Plugin）、Scrollbar（Scroll bar plugin）、Formula（Mathematical Formula Plugin）、Cooperate（Collaborative editing plugin）、RainbowLines（Rainbow Line Plugin）、Demonstrate（Demonstration mode plugin）、HandDrawnLikeStyle（Hand drawn style plugin）[收费]</p>
+<p>RichText（Node Rich Text Plugin）、Select（Mouse Multiple Selection Node Plugin）、Drag（Node drag plugin）、AssociativeLine（Associate Line Plugin）、Export（Export plugin）、KeyboardNavigation（Keyboard navigation plugin）、MiniMap（Mini Map Plugin）、Watermark（Watermark plugin）、TouchEvent（Mobile touch event support plugin）、NodeImgAdjust（Drag and adjust node image size plugin）、Search（Search plugin）、Painter（Node Format Brush Plugin）、Scrollbar（Scroll bar plugin）、Formula（Mathematical Formula Plugin）、Cooperate（Collaborative editing plugin）、RainbowLines（Rainbow Line Plugin）、Demonstrate（Demonstration mode plugin）、HandDrawnLikeStyle（Hand drawn style plugin）[charge]、Notation（Node marker plugin）[charge]</p>
 </blockquote>
 <p>Features that will not be implemented in this project:</p>
 <blockquote>
@@ -39,16 +39,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="checkbox29" checked="true" /><label for="checkbox29">Toolbar, which supports inserting and deleting nodes, and editing node</label>
+<li><input type="checkbox" id="checkbox80" checked="true" /><label for="checkbox80">Toolbar, which supports inserting and deleting nodes, and editing node</label>
 images, icons, hyperlinks, notes, tags, and summaries</li>
-<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">Sidebar, with panels for basic style settings, node style settings,</label>
+<li><input type="checkbox" id="checkbox81" checked="true" /><label for="checkbox81">Sidebar, with panels for basic style settings, node style settings,</label>
 outline, theme selection, and structure selection</li>
-<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">Import and export functionality; data is saved in the browser's local</label>
+<li><input type="checkbox" id="checkbox82" checked="true" /><label for="checkbox82">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="checkbox32" checked="true" /><label for="checkbox32">Right-click menu, which supports operations such as expanding, collapsing,</label>
+<li><input type="checkbox" id="checkbox83" checked="true" /><label for="checkbox83">Right-click menu, which supports operations such as expanding, collapsing,</label>
 and organizing layout</li>
-<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">Bottom bar, which supports node and word count statistics, switching</label>
+<li><input type="checkbox" id="checkbox84" checked="true" /><label for="checkbox84">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>
@@ -365,6 +365,25 @@ full screen, support mini map</li>
        <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 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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/Kyle.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>Kyle</p>
+    </div>
+</div>
+
  </div>
 </template>

--- a/web/src/pages/Doc/en/render/index.md
+++ b/web/src/pages/Doc/en/render/index.md
@@ -148,13 +148,13 @@ Move a node in front of another node.

 Move a node behind another node.

-### moveNodeToCenter(node)
+### moveNodeToCenter(node, resetScale)

 > v0.2.17+

-Move a node to the center of the canvas.
+- `resetScale`: v0.10.1+, Specify whether to reset the canvas scaling value to 100%. When you do not explicitly pass it, the default value is undefined, because the resetScaleOnMoveNodeToCenter configuration of the instantiation option also determines whether to reset scaling. Therefore, use the resetScaleOnMoveNodeToCenter configuration when you do not explicitly pass it, otherwise use the resetScale configuration

-Currently, if there is zoom, returning to the center will reset the zoom.
+Move a node to the center of the canvas.

 ### expandToNodeUid(uid, callback)

--- a/web/src/pages/Doc/en/render/index.vue
+++ b/web/src/pages/Doc/en/render/index.vue
@@ -121,12 +121,14 @@ is an object, e.g. <code>{text: 'I am new text'}</code>.</p>
 <p>v0.1.5+</p>
 </blockquote>
 <p>Move a node behind another node.</p>
-<h3>moveNodeToCenter(node)</h3>
+<h3>moveNodeToCenter(node, resetScale)</h3>
 <blockquote>
 <p>v0.2.17+</p>
 </blockquote>
+<ul>
+<li><code>resetScale</code>: v0.10.1+, Specify whether to reset the canvas scaling value to 100%. When you do not explicitly pass it, the default value is undefined, because the resetScaleOnMoveNodeToCenter configuration of the instantiation option also determines whether to reset scaling. Therefore, use the resetScaleOnMoveNodeToCenter configuration when you do not explicitly pass it, otherwise use the resetScale configuration</li>
+</ul>
 <p>Move a node to the center of the canvas.</p>
-<p>Currently, if there is zoom, returning to the center will reset the zoom.</p>
 <h3>expandToNodeUid(uid, callback)</h3>
 <blockquote>
 <p>v0.6.7+</p>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -66,6 +66,7 @@ export default [
      { path: 'rainbowLines', title: 'RainbowLines插件' },
      { path: 'demonstrate', title: 'Demonstrate插件' },
      { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle收费插件' },
+      { path: 'notation', title: 'Notation收费插件' },
      { path: 'help1', title: '概要/关联线' },
      { path: 'help2', title: '客户端' },
      { path: 'help3', title: '打开预览在线文件' },
@@ -114,6 +115,7 @@ export default [
        path: 'handDrawnLikeStyle',
        title: 'HandDrawnLikeStyle chargeable plugin'
      },
+      { path: 'notation', title: 'Notation 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,35 @@
 # Changelog

+## 0.10.1
+
+修复：
+
+> 1.修复TouchEvent插件两次点击位置不同时也会触发节点输入的问题；
+>
+> 2.修复/快捷键能收起根节点的子节点的问题；
+
+新增：
+
+> 1.新增处理导出前的svg对象的实例化选项；
+>
+> 2.新增修改拖拽节点时克隆的节点的实例化选项；
+>
+> 3.新增派发单个节点的内容布局完成事件；
+>
+> 4.新增拦截节点拖拽的实例化选项；
+>
+> 5.新增限制TouchEvent插件双指缩放的最大值和最小值的实例化选项；
+>
+> 6.新增节点编辑插件；
+
+Demo：
+
+> 1.新增节点标记功能；
+>
+> 2.修复演示模式中右下角输入框无法输入的问题；
+>
+> 3.移动端打开时不显示目录、新建、打开按钮；
+
 ## 0.10.0

 较大更新：升级节点拖拽时的交互效果；
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,27 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.10.1</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复TouchEvent插件两次点击位置不同时也会触发节点输入的问题；</p>
+<p>2.修复/快捷键能收起根节点的子节点的问题；</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.新增处理导出前的svg对象的实例化选项；</p>
+<p>2.新增修改拖拽节点时克隆的节点的实例化选项；</p>
+<p>3.新增派发单个节点的内容布局完成事件；</p>
+<p>4.新增拦截节点拖拽的实例化选项；</p>
+<p>5.新增限制TouchEvent插件双指缩放的最大值和最小值的实例化选项；</p>
+<p>6.新增节点编辑插件；</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.新增节点标记功能；</p>
+<p>2.修复演示模式中右下角输入框无法输入的问题；</p>
+<p>3.移动端打开时不显示目录、新建、打开按钮；</p>
+</blockquote>
 <h2>0.10.0</h2>
 <p>较大更新：升级节点拖拽时的交互效果；</p>
 <p>修复：</p>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -93,7 +93,7 @@ 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 | 是否将思维导图限制在画布内。比如向右拖动时，思维导图图形的最左侧到达画布中心时将无法继续向右拖动，其他同理 |
 | beforeShortcutRun（v0.9.9+）     | Function、null | null  | 快捷键操作即将执行前的生命周期函数，返回true可以阻止操作执行。函数接收两个参数：key（快捷键）、activeNodeList（当前激活的节点列表） |
-| resetScaleOnMoveNodeToCenter（v0.9.12+）     | Boolean |  false | 移动节点到画布中心、回到根节点等操作时是否将缩放层级复位为100%（底层影响的是render类的moveNodeToCenter方法） |
+| resetScaleOnMoveNodeToCenter（v0.9.12+）     | Boolean |  false | 移动节点到画布中心、回到根节点等操作时是否将缩放层级复位为100%（该选项实际影响的是render.moveNodeToCenter方法，moveNodeToCenter方法本身也存在第二个参数resetScale来设置是否复位，如果resetScale参数没有传递，那么使用resetScaleOnMoveNodeToCenter配置，否则使用resetScale配置）。 |
 | createNodePrefixContent（v0.9.12+）     | Function、null | null  | 添加附加的节点前置内容。前置内容指和文本同一行的区域中的前置内容，不包括节点图片部分。可以传递一个函数，这个函数接收一个节点实例的参数，可以返回{el, width, height}格式的对象，el为DOM节点对象，width和height代表内容的宽高，数字类型，如果不需要自定义内容，也可以返回null |
 | createNodePostfixContent（v0.9.12+）     | Function、null | null  | 添加附加的节点后置内容。后置内容指和文本同一行的区域中的后置内容，不包括节点图片部分。用法同createNodePrefixContent |

@@ -162,6 +162,7 @@ const mindMap = new MindMap({
 | minExportImgCanvasScale（v0.7.0+）     | Number  | 2  | 导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度 |
 | addContentToHeader（v0.9.9+）     | Function、null | null  | 导出png、svg、pdf时在头部添加自定义内容。可传递一个函数，这个函数可以返回null代表不添加内容，也可以返回一个对象，详细介绍请参考下方【导出时如何添加自定义内容】 |
 | addContentToFooter（v0.9.9+）     | Function、null | null  | 基本释义同addContentToHeader，在尾部添加自定义内容 |
+| handleBeingExportSvg（v0.10.1+）     | Function、null | null  | 导出png、svg、pdf时会获取画布上的svg数据进行克隆，然后通过该克隆的元素进行导出，如果你想对该克隆元素做一些处理，比如新增、替换、修改其中的一些元素，那么可以通过该参数传递一个处理函数，接收svg元素对象，处理后，需要返回原svg元素对象。（需要注意的是svg对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象） |

 #### 2.1导出时如何添加自定义内容

@@ -216,6 +217,8 @@ new MindMap({
 | dragPlaceholderRectFill（v0.7.2+）     |  String | rgb(94, 200, 248)  | 节点拖拽时新位置的示意矩形的填充颜色 |
 | dragPlaceholderLineConfig（v0.10.0+）     |  Object | { color: 'rgb(94, 200, 248)',  width: 2 }  | 节点拖拽时新位置的示意连线的样式配置 |
 | dragOpacityConfig（v0.7.2+）     | Object  | { cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 }  | 节点拖拽时的透明度配置，传递一个对象，字段含义分别为：跟随鼠标移动的克隆节点或矩形的透明度、被拖拽节点的透明度 |
+| beforeDragEnd（v0.10.1+）     | null、Function  | null  | 即将拖拽完成前调用该函数，函数接收一个对象作为参数：{overlapNodeUid,prevNodeUid,nextNodeUid}，代表拖拽信息，如果要阻止本次拖拽，那么可以返回true，此时node_dragend事件不会再触发。函数可以是异步函数，返回Promise实例 |
+| handleDragCloneNode（v0.10.1+）     | null、Function  | null  | 拖拽单个节点时会克隆被拖拽节点，如果想修改该克隆节点，那么可以通过该选项提供一个处理函数，函数接收克隆节点对象。（需要注意的是节点对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象） |

 ### 5.Watermark插件

@@ -258,6 +261,8 @@ new MindMap({
 | 字段名称                         | 类型    | 默认值           | 描述                                                         |
 | -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ |
 | disableTouchZoom（v0.8.1+）     | Boolean | false  | 禁止双指缩放，你仍旧可以使用api进行缩放，对TouchEvent插件生效  |
+| minTouchZoomScale（v0.10.1+）     | Number | 20  | 允许最大和最小的缩放值，百分数，传-1代表不限制  |
+| maxTouchZoomScale（v0.10.1+）     | Number | -1  |  同minTouchZoomScale |

 ### 9.Scrollbar插件

@@ -578,6 +583,7 @@ mindMap.setTheme('主题名称')
 | exit_demonstrate（v0.9.11+）    | 退出演示模式时触发  |     |
 | demonstrate_jump（v0.9.11+）    | 演示模式中，切换步骤时触发  |  currentStepIndex（当前播放到的步骤索引，从0开始计数）、stepLength（总的播放步骤数量）   |
 | node_tag_click（v0.9.12+）    | 节点标签的点击事件 | this(当前节点实例)、item（点击的标签内容）    |
+| node_layout_end（v0.10.1+）    | 单个节点内容布局完成的事件 | this(当前节点实例)  |

 ### emit(event, ...args)

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -434,7 +434,7 @@
 <td>resetScaleOnMoveNodeToCenter（v0.9.12+）</td>
 <td>Boolean</td>
 <td>false</td>
-<td>移动节点到画布中心、回到根节点等操作时是否将缩放层级复位为100%（底层影响的是render类的moveNodeToCenter方法）</td>
+<td>移动节点到画布中心、回到根节点等操作时是否将缩放层级复位为100%（该选项实际影响的是render.moveNodeToCenter方法，moveNodeToCenter方法本身也存在第二个参数resetScale来设置是否复位，如果resetScale参数没有传递，那么使用resetScaleOnMoveNodeToCenter配置，否则使用resetScale配置）。</td>
 </tr>
 <tr>
 <td>createNodePrefixContent（v0.9.12+）</td>
@@ -574,6 +574,12 @@
 <td>null</td>
 <td>基本释义同addContentToHeader，在尾部添加自定义内容</td>
 </tr>
+<tr>
+<td>handleBeingExportSvg（v0.10.1+）</td>
+<td>Function、null</td>
+<td>null</td>
+<td>导出png、svg、pdf时会获取画布上的svg数据进行克隆，然后通过该克隆的元素进行导出，如果你想对该克隆元素做一些处理，比如新增、替换、修改其中的一些元素，那么可以通过该参数传递一个处理函数，接收svg元素对象，处理后，需要返回原svg元素对象。（需要注意的是svg对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象）</td>
+</tr>
 </tbody>
 </table>
 <h4>2.1导出时如何添加自定义内容</h4>
@@ -682,6 +688,18 @@
 <td>{ cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 }</td>
 <td>节点拖拽时的透明度配置，传递一个对象，字段含义分别为：跟随鼠标移动的克隆节点或矩形的透明度、被拖拽节点的透明度</td>
 </tr>
+<tr>
+<td>beforeDragEnd（v0.10.1+）</td>
+<td>null、Function</td>
+<td>null</td>
+<td>即将拖拽完成前调用该函数，函数接收一个对象作为参数：{overlapNodeUid,prevNodeUid,nextNodeUid}，代表拖拽信息，如果要阻止本次拖拽，那么可以返回true，此时node_dragend事件不会再触发。函数可以是异步函数，返回Promise实例</td>
+</tr>
+<tr>
+<td>handleDragCloneNode（v0.10.1+）</td>
+<td>null、Function</td>
+<td>null</td>
+<td>拖拽单个节点时会克隆被拖拽节点，如果想修改该克隆节点，那么可以通过该选项提供一个处理函数，函数接收克隆节点对象。（需要注意的是节点对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象）</td>
+</tr>
 </tbody>
 </table>
 <h3>5.Watermark插件</h3>
@@ -849,6 +867,18 @@
 <td>false</td>
 <td>禁止双指缩放，你仍旧可以使用api进行缩放，对TouchEvent插件生效</td>
 </tr>
+<tr>
+<td>minTouchZoomScale（v0.10.1+）</td>
+<td>Number</td>
+<td>20</td>
+<td>允许最大和最小的缩放值，百分数，传-1代表不限制</td>
+</tr>
+<tr>
+<td>maxTouchZoomScale（v0.10.1+）</td>
+<td>Number</td>
+<td>-1</td>
+<td>同minTouchZoomScale</td>
+</tr>
 </tbody>
 </table>
 <h3>9.Scrollbar插件</h3>
@@ -1440,6 +1470,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <td>节点标签的点击事件</td>
 <td>this(当前节点实例)、item（点击的标签内容）</td>
 </tr>
+<tr>
+<td>node_layout_end（v0.10.1+）</td>
+<td>单个节点内容布局完成的事件</td>
+<td>this(当前节点实例)</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -24,7 +24,7 @@

 官方提供了如下插件，可根据需求按需引入（某个功能不生效大概率是因为你没有引入对应的插件），具体使用方式请查看文档：

-> RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、HandDrawnLikeStyle（手绘风格插件）[收费]
+> RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、HandDrawnLikeStyle（手绘风格插件）[收费]、Notation（节点标记插件）[收费]

 本项目不会实现的特性：

@@ -406,4 +406,22 @@
        <img src="../../../../assets/avatar/峰.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>峰</p>
    </div>
-</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 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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/Kyle.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>Kyle</p>
+    </div>
+</div>
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -8,22 +8,22 @@
 </blockquote>
 <h2>特性</h2>
 <ul>
-<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>txt</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>
-<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">支持演示模式</label></li>
+<li><input type="checkbox" id="checkbox51" checked="true" /><label for="checkbox51">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
+<li><input type="checkbox" id="checkbox52" checked="true" /><label for="checkbox52">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
+<li><input type="checkbox" id="checkbox53" checked="true" /><label for="checkbox53">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
+<li><input type="checkbox" id="checkbox54" checked="true" /><label for="checkbox54">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
+<li><input type="checkbox" id="checkbox55" checked="true" /><label for="checkbox55">节点支持拖拽（拖拽移动、自由调整）、多种节点形状；支持扩展节点内容、支持使用 DDM 完全自定义节点内容</label></li>
+<li><input type="checkbox" id="checkbox56" checked="true" /><label for="checkbox56">支持画布拖动、缩放</label></li>
+<li><input type="checkbox" id="checkbox57" checked="true" /><label for="checkbox57">支持鼠标按键拖动选择和 Ctrl+左键两种多选节点方式</label></li>
+<li><input type="checkbox" id="checkbox58" checked="true" /><label for="checkbox58">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
+<li><input type="checkbox" id="checkbox59" checked="true" /><label for="checkbox59">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条、手绘风格、彩虹线条</label></li>
+<li><input type="checkbox" id="checkbox60" checked="true" /><label for="checkbox60">提供丰富的配置，满足各种场景各种使用习惯</label></li>
+<li><input type="checkbox" id="checkbox61" checked="true" /><label for="checkbox61">支持协同编辑</label></li>
+<li><input type="checkbox" id="checkbox62" checked="true" /><label for="checkbox62">支持演示模式</label></li>
 </ul>
 <p>官方提供了如下插件，可根据需求按需引入（某个功能不生效大概率是因为你没有引入对应的插件），具体使用方式请查看文档：</p>
 <blockquote>
-<p>RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、HandDrawnLikeStyle（手绘风格插件）[收费]</p>
+<p>RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、HandDrawnLikeStyle（手绘风格插件）[收费]、Notation（节点标记插件）[收费]</p>
 </blockquote>
 <p>本项目不会实现的特性：</p>
 <blockquote>
@@ -37,11 +37,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="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>
-<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
+<li><input type="checkbox" id="checkbox63" checked="true" /><label for="checkbox63">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox64" checked="true" /><label for="checkbox64">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
+<li><input type="checkbox" id="checkbox65" checked="true" /><label for="checkbox65">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
+<li><input type="checkbox" id="checkbox66" checked="true" /><label for="checkbox66">右键菜单，支持展开、收起、整理布局等操作</label></li>
+<li><input type="checkbox" id="checkbox67" checked="true" /><label for="checkbox67">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
 </ul>
 <p>提供文档页面服务。</p>
 <p>3.<code>dist</code></p>
@@ -358,6 +358,25 @@
        <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 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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/Kyle.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>Kyle</p>
+    </div>
+</div>
+
  </div>
 </template>

--- a/web/src/pages/Doc/zh/notation/index.md
+++ b/web/src/pages/Doc/zh/notation/index.md
@@ -0,0 +1,111 @@
+# Notation 收费插件
+
+> 关于收费
+>
+> mind-map 是一个 MIT 协议的开源项目，理论上只要保留 mind-map 的版权声明，无论是否商用都不收费，这个协议以后也不会改变。另外无论是在线版，还是客户端都不会考虑收费。但是为了项目的可持续发展，会通过一些方式来获取收益，比如现有的赞助方式。而收费插件是第二个方式，基本原则是基本功能、核心功能、必要功能不收费，而可有可无的附加功能可能会做成收费的。
+>
+> 最后，收费仅针对开发者，如果仅是在线版或者客户端的思维导图用户是无需付费的，所有功能均可免费使用。
+
+Notation 是第二个收费插件，功能是提供单个节点的标记功能，也就是可以在单个节点上加个手绘风格的圈、背景、删除线等等，支持动画效果，就像下面这样：
+
+<img src="../../../../assets/img/docs/标记.jpg" style="width: 900px" />
+
+你也可以在在线版中进行体验，先激活节点，然后点击上方【标记】按钮添加标记。
+
+内部实现是通过[rough-notation](https://github.com/rough-stuff/rough-notation)库，所以如果你有精力，也可以自己基于这个库来实现这个插件。
+
+## 收费
+
+现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址，然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 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 Notation from 'notation.cjs.min.js'
+// 或 import Notation from 'notation.esm.min.js'
+
+MindMap.usePlugin(Notation)
+```
+
+2.引用未打包的源码
+
+可以先进入到插件目录执行：
+
+```bash
+npm link
+```
+
+然后进入到你的项目根目录执行：
+
+```bash
+npm link simple-mind-map-plugin-notation
+```
+
+然后就可以直接导入进行使用：
+
+```js
+import MindMap from 'simple-mind-map'
+import Notation from 'simple-mind-map-plugin-notation'
+
+MindMap.usePlugin(Notation)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.notation`获取到该实例。
+
+注册该插件后，无需执行其他方法，手绘风格即可生效。
+
+如果你是使用 mindMap.addPlugin 方法来动态注册的组件，那么需要调用一次重新渲染的方法：
+
+```js
+mindMap.addPlugin(Notation)
+mindMap.reRender()
+```
+
+## 命令
+
+注册了本插件后会在思维导图实例上新增`SET_NOTATION`命令，给节点添加标记使用该命令：
+
+```js
+mindMap.execCommand('SET_NOTATION', appointNodes, show, config)
+```
+
+该命令可以传递三个参数：
+
+- `appointNodes`：给指定的节点实例添加标记，可以传单个节点实例，也可以传递一个节点实例数组，如果传空数组，则会给当前激活的节点添加标记；
+
+- `show`：Boolean，必传，是否显示编辑；
+
+- `config`：Object，可选，标记配置，对象格式，对象的详细字段如下：
+
+| 字段名称 | 类型  | 默认值 | 描述 |
+| ------- | ----- | ----- | ---- |
+| type | String | circle | 标记类型，可选值：underline（下划线）、box（边框）、circle（圆）、highlight（高亮）、strike-through（删除线）、crossed-off（叉） |
+| color | String | 思维导图实例化选项中的hoverRectColor配置 | 颜色 |
+| strokeWidth | Number | 1 | 线宽 |
+| padding | Number | 20 | 内边距 |
+| animate | Boolean | true | 是否开启动画 |
+
+示例：
+
+```js
+// 给当前激活的节点添加一个圆类型的标记
+mindMap.execCommand('SET_NOTATION', [], true, {
+    type: 'circle',
+    color: 'red'
+})
+```
+
+添加标记后数据会以`notation`为名称保存到节点的`data`数据中。
--- a/web/src/pages/Doc/zh/notation/index.vue
+++ b/web/src/pages/Doc/zh/notation/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <h1>Notation 收费插件</h1>
+<blockquote>
+<p>关于收费</p>
+<p>mind-map 是一个 MIT 协议的开源项目，理论上只要保留 mind-map 的版权声明，无论是否商用都不收费，这个协议以后也不会改变。另外无论是在线版，还是客户端都不会考虑收费。但是为了项目的可持续发展，会通过一些方式来获取收益，比如现有的赞助方式。而收费插件是第二个方式，基本原则是基本功能、核心功能、必要功能不收费，而可有可无的附加功能可能会做成收费的。</p>
+<p>最后，收费仅针对开发者，如果仅是在线版或者客户端的思维导图用户是无需付费的，所有功能均可免费使用。</p>
+</blockquote>
+<p>Notation 是第二个收费插件，功能是提供单个节点的标记功能，也就是可以在单个节点上加个手绘风格的圈、背景、删除线等等，支持动画效果，就像下面这样：</p>
+<img src="../../../../assets/img/docs/标记.jpg" style="width: 900px" />
+<p>你也可以在在线版中进行体验，先激活节点，然后点击上方【标记】按钮添加标记。</p>
+<p>内部实现是通过<a href="https://github.com/rough-stuff/rough-notation">rough-notation</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> Notation <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;notation.cjs.min.js&#x27;</span>
+<span class="hljs-comment">// 或 import Notation from &#x27;notation.esm.min.js&#x27;</span>
+
+MindMap.usePlugin(Notation)
+</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-notation
+</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> Notation <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map-plugin-notation&#x27;</span>
+
+MindMap.usePlugin(Notation)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.notation</code>获取到该实例。</p>
+<p>注册该插件后，无需执行其他方法，手绘风格即可生效。</p>
+<p>如果你是使用 mindMap.addPlugin 方法来动态注册的组件，那么需要调用一次重新渲染的方法：</p>
+<pre class="hljs"><code>mindMap.addPlugin(Notation)
+mindMap.reRender()
+</code></pre>
+<h2>命令</h2>
+<p>注册了本插件后会在思维导图实例上新增<code>SET_NOTATION</code>命令，给节点添加标记使用该命令：</p>
+<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;SET_NOTATION&#x27;</span>, appointNodes, show, config)
+</code></pre>
+<p>该命令可以传递三个参数：</p>
+<ul>
+<li>
+<p><code>appointNodes</code>：给指定的节点实例添加标记，可以传单个节点实例，也可以传递一个节点实例数组，如果传空数组，则会给当前激活的节点添加标记；</p>
+</li>
+<li>
+<p><code>show</code>：Boolean，必传，是否显示编辑；</p>
+</li>
+<li>
+<p><code>config</code>：Object，可选，标记配置，对象格式，对象的详细字段如下：</p>
+</li>
+</ul>
+<table>
+<thead>
+<tr>
+<th>字段名称</th>
+<th>类型</th>
+<th>默认值</th>
+<th>描述</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>type</td>
+<td>String</td>
+<td>circle</td>
+<td>标记类型，可选值：underline（下划线）、box（边框）、circle（圆）、highlight（高亮）、strike-through（删除线）、crossed-off（叉）</td>
+</tr>
+<tr>
+<td>color</td>
+<td>String</td>
+<td>思维导图实例化选项中的hoverRectColor配置</td>
+<td>颜色</td>
+</tr>
+<tr>
+<td>strokeWidth</td>
+<td>Number</td>
+<td>1</td>
+<td>线宽</td>
+</tr>
+<tr>
+<td>padding</td>
+<td>Number</td>
+<td>20</td>
+<td>内边距</td>
+</tr>
+<tr>
+<td>animate</td>
+<td>Boolean</td>
+<td>true</td>
+<td>是否开启动画</td>
+</tr>
+</tbody>
+</table>
+<p>示例：</p>
+<pre class="hljs"><code><span class="hljs-comment">// 给当前激活的节点添加一个圆类型的标记</span>
+mindMap.execCommand(<span class="hljs-string">&#x27;SET_NOTATION&#x27;</span>, [], <span class="hljs-literal">true</span>, {
+    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;circle&#x27;</span>,
+    <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;red&#x27;</span>
+})
+</code></pre>
+<p>添加标记后数据会以<code>notation</code>为名称保存到节点的<code>data</code>数据中。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/render/index.md
+++ b/web/src/pages/Doc/zh/render/index.md
@@ -146,13 +146,13 @@

 将节点移动到另一个节点的后面。

-### moveNodeToCenter(node)
+### moveNodeToCenter(node, resetScale)

 > v0.2.17+

-移动节点到画布中心。
+- `resetScale`：v0.10.1+， 指定是否要将画布缩放值复位为100%，当你没有显式传递时，默认值为undefined，因为实例化选项的resetScaleOnMoveNodeToCenter配置也会决定是否复位缩放，所以当你没有显式传递时使用resetScaleOnMoveNodeToCenter配置，否则使用resetScale配置

-目前如果是存在缩放的情况下回到中心会重置缩放。
+移动节点到画布中心。

 ### expandToNodeUid(uid, callback)

--- a/web/src/pages/Doc/zh/render/index.vue
+++ b/web/src/pages/Doc/zh/render/index.vue
@@ -118,12 +118,14 @@
 <p>v0.1.5+</p>
 </blockquote>
 <p>将节点移动到另一个节点的后面。</p>
-<h3>moveNodeToCenter(node)</h3>
+<h3>moveNodeToCenter(node, resetScale)</h3>
 <blockquote>
 <p>v0.2.17+</p>
 </blockquote>
+<ul>
+<li><code>resetScale</code>：v0.10.1+， 指定是否要将画布缩放值复位为100%，当你没有显式传递时，默认值为undefined，因为实例化选项的resetScaleOnMoveNodeToCenter配置也会决定是否复位缩放，所以当你没有显式传递时使用resetScaleOnMoveNodeToCenter配置，否则使用resetScale配置</li>
+</ul>
 <p>移动节点到画布中心。</p>
-<p>目前如果是存在缩放的情况下回到中心会重置缩放。</p>
 <h3>expandToNodeUid(uid, callback)</h3>
 <blockquote>
 <p>v0.6.7+</p>