Doc: update

2026-02-17 22:08:25 +08:00 · 2024-07-03 11:07:50 +08:00
parent 591e6a5b2a
commit 658b47b72e
31 changed files with 785 additions and 63 deletions
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -42,6 +42,7 @@ let APIList = [
  'handDrawnLikeStyle',
  'demonstrate',
  'notation',
+  'outerFrame',
  'xmind',
  'markdown',
  'utils'
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,51 @@
 # Changelog

+## 0.10.2
+
+> 2024.7.3
+
+Fix:
+
+> 1.Fix the issue of node text and custom content with the createNodePrefixContent option not being vertically centered;
+>
+> 2.Fix the issue of selecting node text when dragging the endpoints of associated lines;
+
+New:
+
+> 1.Add external frame plugins;
+>
+> 2.Add a leftward logical structure diagram;
+>
+> 3.The mini map supports dragging and dropping view boxes to adjust the canvas position;
+>
+> 4.Add an instantiation option to intercept nodes and start dragging them;
+>
+> 5.Prevent default behavior for mousedown, mousemove, drag, and node.mousedown events;
+>
+> 6.The beforeDragEnd option of the drag plugin adds a callback parameter to the list of nodes that are currently being dragged;
+>
+> 7.Add an instantiation option that prohibits reading and writing to the user's clipboard;
+>
+> 8.Independently separate the canvas automatic movement function of the Select plugin to solve the problem of the Drag plugin being unable to use the canvas automatic movement function without registering the Select plugin;
+>
+> 9.Add callback parameters to the edited node for the hide_text_edit event;
+>
+> 10.Activate the node when clicking on the hyperlink icon; Add instantiation options for custom hyperlink redirection;
+
+Demo:
+
+> 1.Color selection supports transparency selection;
+>
+> 2.Add external frame setting function;
+>
+> 3.Add copy to clipboard function in the right-click menu;
+>
+> 4.Add a leftward logical structure diagram;
+>
+> 5.Fix the issue where the event does not end after the mouse is moved out of the mini map and then released;
+>
+> 6.The mini map supports dragging and dropping view boxes to adjust the canvas position;
+
 ## 0.10.1

 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.10.2</h2>
+<blockquote>
+<p>2024.7.3</p>
+</blockquote>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue of node text and custom content with the createNodePrefixContent option not being vertically centered;</p>
+<p>2.Fix the issue of selecting node text when dragging the endpoints of associated lines;</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Add external frame plugins;</p>
+<p>2.Add a leftward logical structure diagram;</p>
+<p>3.The mini map supports dragging and dropping view boxes to adjust the canvas position;</p>
+<p>4.Add an instantiation option to intercept nodes and start dragging them;</p>
+<p>5.Prevent default behavior for mousedown, mousemove, drag, and node.mousedown events;</p>
+<p>6.The beforeDragEnd option of the drag plugin adds a callback parameter to the list of nodes that are currently being dragged;</p>
+<p>7.Add an instantiation option that prohibits reading and writing to the user's clipboard;</p>
+<p>8.Independently separate the canvas automatic movement function of the Select plugin to solve the problem of the Drag plugin being unable to use the canvas automatic movement function without registering the Select plugin;</p>
+<p>9.Add callback parameters to the edited node for the hide_text_edit event;</p>
+<p>10.Activate the node when clicking on the hyperlink icon; Add instantiation options for custom hyperlink redirection;</p>
+</blockquote>
+<p>Demo:</p>
+<blockquote>
+<p>1.Color selection supports transparency selection;</p>
+<p>2.Add external frame setting function;</p>
+<p>3.Add copy to clipboard function in the right-click menu;</p>
+<p>4.Add a leftward logical structure diagram;</p>
+<p>5.Fix the issue where the event does not end after the mouse is moved out of the mini map and then released;</p>
+<p>6.The mini map supports dragging and dropping view boxes to adjust the canvas position;</p>
+</blockquote>
 <h2>0.10.1</h2>
 <p>Fix:</p>
 <blockquote>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -28,7 +28,7 @@ const mindMap = new MindMap({
 | -------------------------------- | ------- | ---------------- | ------------------------------------------- | -------- |
 | el                               | Element |                  | Container element, must be a DOM element（When the position of container elements on the page has changed but the size has not changed, the 'getElRectInfo()' method must be called to update the relevant information inside the library; When the size also changes, the 'resize()' method must be called, otherwise it will cause some functional exceptions）                     | Yes      |
 | data                             | Object 、null  |     | Mind map data, Please refer to the introduction of 【Data structure】 below. V0.9.9+supports passing empty objects or null, and the canvas will display blank space |          |
-| layout                           | String  | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram） |          |
+| layout                           | String  | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), logicalStructureLeft(v0.10.2+, Leftward logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram） |          |
 | fishboneDeg（v0.5.4+）                      | Number |  45          |    Set the diagonal angle of the fishbone structure diagram        |        |
 | theme                            | String  | default          | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple, simpleBlack(v0.5.4+), courseGreen(v0.5.4+), coffee(v0.5.4+), redSpirit(v0.5.4+), blackHumour(v0.5.4+), lateNightOffice(v0.5.4+), blackGold(v0.5.4+)、、avocado(v.5.10-fix.2+)、autumn(v.5.10-fix.2+)、orangeJuice(v.5.10-fix.2+) |          |
 | themeConfig                      | Object  | {}               | Theme configuration, will be merged with the selected theme, available fields refer to: [default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) |          |
@@ -96,6 +96,8 @@ const mindMap = new MindMap({
 | 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 |         |
+| disabledClipboard（v0.10.2+）     | Boolean | false | Is prohibit pasting data from the user's clipboard and writing copied node data to the user's clipboard. At this time, only node data from the canvas can be copied and pasted |         |
+| customHyperlinkJump（v0.10.2+）     | null、Function | false | Customize the jump of hyperlinks. If not passed, the hyperlink will be opened as a new window by default, and a function can be passed, The function takes two parameters: link（The URL of the hyperlink）、node（Node instance to which it belongs）, As long as a function is passed, it will block the default jump |         |

 ### 1.1Data structure

@@ -214,8 +216,9 @@ 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 |          |
+| 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,beingDragNodeList}, 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. 'beingDragNodeList' is a newly added callback parameter for v0.10.2+, which is the list of nodes that are currently being dragged |          |
 | 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） |          |
+| beforeDragStart（v0.10.2+）     | null、Function（(nodeList) => {}）  | null  | This function is called just before the node is dragged. The function receives the list of node instances to be dragged as parameters. If you want to prevent this drag, you can return true. It can be an asynchronous function that returns a Promise instance |          |

 ### 5.Watermark plugin

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -47,7 +47,7 @@
 <td>layout</td>
 <td>String</td>
 <td>logicalStructure</td>
-<td>Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram）</td>
+<td>Layout type, options: logicalStructure (logical structure diagram), logicalStructureLeft(v0.10.2+, Leftward logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram）</td>
 <td></td>
 </tr>
 <tr>
@@ -519,6 +519,20 @@
 <td>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</td>
 <td></td>
 </tr>
+<tr>
+<td>disabledClipboard（v0.10.2+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>Is prohibit pasting data from the user's clipboard and writing copied node data to the user's clipboard. At this time, only node data from the canvas can be copied and pasted</td>
+<td></td>
+</tr>
+<tr>
+<td>customHyperlinkJump（v0.10.2+）</td>
+<td>null、Function</td>
+<td>false</td>
+<td>Customize the jump of hyperlinks. If not passed, the hyperlink will be opened as a new window by default, and a function can be passed, The function takes two parameters: link（The URL of the hyperlink）、node（Node instance to which it belongs）, As long as a function is passed, it will block the default jump</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>1.1Data structure</h3>
@@ -781,7 +795,7 @@
 <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>This function is called just before the drag is completed. The function receives an object as a parameter: {overlapNodeUid,prevNodeUid,nextNodeUid,beingDragNodeList}, 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. 'beingDragNodeList' is a newly added callback parameter for v0.10.2+, which is the list of nodes that are currently being dragged</td>
 <td></td>
 </tr>
 <tr>
@@ -791,6 +805,13 @@
 <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>
+<tr>
+<td>beforeDragStart（v0.10.2+）</td>
+<td>null、Function（(nodeList) =&gt; {}）</td>
+<td>null</td>
+<td>This function is called just before the node is dragged. The function receives the list of node instances to be dragged as parameters. If you want to prevent this drag, you can return true. It can be an asynchronous function that returns a Promise instance</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>5.Watermark plugin</h3>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -9,7 +9,7 @@
 ## Features

 - [x] Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume
- [x] Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures
+- [x] Support logical structure chart(Left and Right Logical Structure Diagram), mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures
 - [x] Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes
 - [x] Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas
 - [x] 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
@@ -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）[charge]、Notation（Node marker plugin）[charge]
+> 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）、OuterFrame（Outer frame plugin）、HandDrawnLikeStyle（Hand drawn style plugin）[charge]、Notation（Node marker plugin）[charge]

 Features that will not be implemented in this project:

--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -9,7 +9,7 @@
 <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="checkbox18" checked="true" /><label for="checkbox18">Support logical structure chart(Left and Right Logical Structure Diagram), 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>
@@ -23,7 +23,7 @@
 </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）[charge]、Notation（Node marker plugin）[charge]</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）、OuterFrame（Outer frame 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>
--- a/web/src/pages/Doc/en/miniMap/index.md
+++ b/web/src/pages/Doc/en/miniMap/index.md
@@ -81,13 +81,16 @@ At this point, when the mind map on the canvas changes, the small map will also
 be updated in real time, and the view box element will reflect the position of
 the viewport on the mind map graph in real time

-6.Listen for the `mousedown`, `mousemove`, and `mouseup` events of the
-`container` element, and call the three methods that will be introduced below to
-achieve the effect of the mind map on the canvas being dragged with the mouse
+6.Listen for the `mousedown`, `mousemove`events of the
+`container` element, And listen for the 'mouseup' event of the 'window' (if 'mouseup' is bound to the 'container' element, the entire dragging behavior of the 'container' element cannot be stopped when the mouse is moved out), and call the three methods that will be introduced below to achieve the effect of the mind map on the canvas being dragged with the mouse
+
+7.In v0.10.2+version, it supports dragging and dropping viewport boxes within the mini map to achieve synchronized dragging of the canvas, Implementing this feature can listen to the 'mousedown' of the 'viewBoxContainer' element（Need to prevent bubbles, otherwise it will trigger the 'mousedown' event of the 'container' element）、`mousemove` event, Call the 'onViewBoxMousedown' and 'onViewBoxMousemove' methods of the mini map plugin instance separately, At the same time, it is necessary to listen for the 'mini_map_view_box_position_change' event to update the viewBoxContainer element in real-time
+
+For detailed tutorials, please refer to[How to render a mini map](https://wanglin2.github.io/mind-map/#/doc/zh/course14)。

 ### onMousedown(e)

-Small map mouse down event executes this function
+Small map mouse down event executes this function.

 `e`: event object

@@ -99,8 +102,20 @@ This function is executed on the small map mouse move event.

 `sensitivityNum`: drag sensitivity, the higher the sensitivity, the greater the
 actual canvas dragging distance on the small map when dragging the same distance
-on the small map
+on the small map.

 ### onMouseup()

-This function is executed on the small map mouse release event.
+This function is executed on the small map mouse release event.
+
+### onViewBoxMousedown(e)
+
+> v0.10.2+
+
+Call this method for the viewport box element mouse down event.
+
+### onViewBoxMousemove(e)
+
+> v0.10.2+
+
+Call this method for the mouse movement event of the viewport box element.
--- a/web/src/pages/Doc/en/miniMap/index.vue
+++ b/web/src/pages/Doc/en/miniMap/index.vue
@@ -58,20 +58,31 @@ to the <code>miniMapContainer</code> element and set <code>miniMapContainer</cod
 <p>At this point, when the mind map on the canvas changes, the small map will also
 be updated in real time, and the view box element will reflect the position of
 the viewport on the mind map graph in real time</p>
-<p>6.Listen for the <code>mousedown</code>, <code>mousemove</code>, and <code>mouseup</code> events of the
-<code>container</code> element, and call the three methods that will be introduced below to
-achieve the effect of the mind map on the canvas being dragged with the mouse</p>
+<p>6.Listen for the <code>mousedown</code>, <code>mousemove</code>events of the
+<code>container</code> element, And listen for the 'mouseup' event of the 'window' (if 'mouseup' is bound to the 'container' element, the entire dragging behavior of the 'container' element cannot be stopped when the mouse is moved out), and call the three methods that will be introduced below to achieve the effect of the mind map on the canvas being dragged with the mouse</p>
+<p>7.In v0.10.2+version, it supports dragging and dropping viewport boxes within the mini map to achieve synchronized dragging of the canvas, Implementing this feature can listen to the 'mousedown' of the 'viewBoxContainer' element（Need to prevent bubbles, otherwise it will trigger the 'mousedown' event of the 'container' element）、<code>mousemove</code> event, Call the 'onViewBoxMousedown' and 'onViewBoxMousemove' methods of the mini map plugin instance separately, At the same time, it is necessary to listen for the 'mini_map_view_box_position_change' event to update the viewBoxContainer element in real-time</p>
+<p>For detailed tutorials, please refer to<a href="https://wanglin2.github.io/mind-map/#/doc/zh/course14">How to render a mini map</a>。</p>
 <h3>onMousedown(e)</h3>
-<p>Small map mouse down event executes this function</p>
+<p>Small map mouse down event executes this function.</p>
 <p><code>e</code>: event object</p>
 <h3>onMousemove(e, sensitivityNum = 5)</h3>
 <p>This function is executed on the small map mouse move event.</p>
 <p><code>e</code>: event object</p>
 <p><code>sensitivityNum</code>: drag sensitivity, the higher the sensitivity, the greater the
 actual canvas dragging distance on the small map when dragging the same distance
-on the small map</p>
+on the small map.</p>
 <h3>onMouseup()</h3>
 <p>This function is executed on the small map mouse release event.</p>
+<h3>onViewBoxMousedown(e)</h3>
+<blockquote>
+<p>v0.10.2+</p>
+</blockquote>
+<p>Call this method for the viewport box element mouse down event.</p>
+<h3>onViewBoxMousemove(e)</h3>
+<blockquote>
+<p>v0.10.2+</p>
+</blockquote>
+<p>Call this method for the mouse movement event of the viewport box element.</p>

  </div>
 </template>
--- a/web/src/pages/Doc/en/outerFrame/index.md
+++ b/web/src/pages/Doc/en/outerFrame/index.md
@@ -0,0 +1,89 @@
+# OuterFrame plugin
+
+> v0.10.2+
+
+This plugin is used to implement bounding box functionality.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import OuterFrame from 'simple-mind-map/src/plugins/OuterFrame.js'
+MindMap.usePlugin(OuterFrame)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.outerFrame`.
+
+The application can refer to the code in this section of the demo: [NodeOuterFrame.vue](https://github.com/wanglin2/mind-map/blob/main/web/src/pages/Edit/components/NodeOuterFrame.vue)。
+
+## Command
+
+This plugin will register the 'ADD_OUTER_FRAME' command with the mind map to add bounding boxes to nodes:
+
+```js
+mindMap.execCommand('ADD_OUTER_FRAME', appointNodes, config = {})
+```
+
+- `appointNodes`：Specify the node instance node to add the bounding box to, which can be a single node instance or an array of node instances. If passing '[]' or 'null', the bounding box will be added to the currently active node on the canvas
+
+- `config`：Outline configuration, object format, and fields are as follows:
+
+| Field            | Type    | Default           | Desc         |
+| ------------------ | ------- | --------------- | ------------|
+| radius | Number | 5 | Size of rounded corners on the outer frame |
+| strokeWidth | Number | 2 | Outer border width |
+| strokeColor | String | #0984e3 | Outer border color |
+| strokeDasharray | String | 5,5 | Outer border dashed line |
+| fill | String | rgba(9,132,227,0.05) | Outer frame fill color |
+
+## Event
+
+### outer_frame_active
+
+Triggered when clicking to activate a certain bounding box. The callback function takes three parameters: el（Outer frame elements,The rect element of library @svgdotjs/svg.js）, node（The parent node instance of the node to which this scope belongs）, range（Range interval, relative to node）
+
+The application can listen to this event to retrieve the currently activated bounding box, retrieve its configuration, and echo it to the page. Since the scope may contain multiple nodes, the first node instance is usually taken. If you want to retrieve the position of the bounding box on the page, you can call the 'el.rbox' method:
+
+```js
+mindMap.on('outer_frame_active', (el, parentNode, range) => {
+    // Take the bounding box style of the first node within the range
+    const firstNode = parentNode.children[range[0]]
+    const firstNodeOuterFrame = firstNode.getData('outerFrame')
+    // Obtain the position and size information of the bounding box, where you can render your configuration float layer
+    const { x, y, width, height } = el.rbox()
+})
+```
+
+### outer_frame_delete
+
+Triggered when deleting the currently active bounding box on the canvas.
+
+## Methods
+
+### getActiveOuterFrame()
+
+Get the currently activated bounding box data. Return an object with the following structure:
+
+```js
+{
+    el,
+    node,
+    range
+}
+```
+
+### updateActiveOuterFrame(config = {})
+
+Update the currently active bounding box. After executing this method, please immediately hide your style panel as it will clear the currently active bounding box.
+
+### removeActiveOuterFrame()
+
+Delete the currently active bounding box.
+
+### getRangeNodeList(node, range)
+
+Get a list of boxed child nodes within a specified range of a node.
+
+### clearActiveOuterFrame()
+
+Clear the currently active bounding box.
--- a/web/src/pages/Doc/en/outerFrame/index.vue
+++ b/web/src/pages/Doc/en/outerFrame/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <h1>OuterFrame plugin</h1>
+<blockquote>
+<p>v0.10.2+</p>
+</blockquote>
+<p>This plugin is used to implement bounding box functionality.</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> OuterFrame <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/OuterFrame.js&#x27;</span>
+MindMap.usePlugin(OuterFrame)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.outerFrame</code>.</p>
+<p>The application can refer to the code in this section of the demo: <a href="https://github.com/wanglin2/mind-map/blob/main/web/src/pages/Edit/components/NodeOuterFrame.vue">NodeOuterFrame.vue</a>。</p>
+<h2>Command</h2>
+<p>This plugin will register the 'ADD_OUTER_FRAME' command with the mind map to add bounding boxes to nodes:</p>
+<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;ADD_OUTER_FRAME&#x27;</span>, appointNodes, config = {})
+</code></pre>
+<ul>
+<li>
+<p><code>appointNodes</code>：Specify the node instance node to add the bounding box to, which can be a single node instance or an array of node instances. If passing '[]' or 'null', the bounding box will be added to the currently active node on the canvas</p>
+</li>
+<li>
+<p><code>config</code>：Outline configuration, object format, and fields are as follows:</p>
+</li>
+</ul>
+<table>
+<thead>
+<tr>
+<th>Field</th>
+<th>Type</th>
+<th>Default</th>
+<th>Desc</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>radius</td>
+<td>Number</td>
+<td>5</td>
+<td>Size of rounded corners on the outer frame</td>
+</tr>
+<tr>
+<td>strokeWidth</td>
+<td>Number</td>
+<td>2</td>
+<td>Outer border width</td>
+</tr>
+<tr>
+<td>strokeColor</td>
+<td>String</td>
+<td>#0984e3</td>
+<td>Outer border color</td>
+</tr>
+<tr>
+<td>strokeDasharray</td>
+<td>String</td>
+<td>5,5</td>
+<td>Outer border dashed line</td>
+</tr>
+<tr>
+<td>fill</td>
+<td>String</td>
+<td>rgba(9,132,227,0.05)</td>
+<td>Outer frame fill color</td>
+</tr>
+</tbody>
+</table>
+<h2>Event</h2>
+<h3>outer_frame_active</h3>
+<p>Triggered when clicking to activate a certain bounding box. The callback function takes three parameters: el（Outer frame elements,The rect element of library @svgdotjs/svg.js）, node（The parent node instance of the node to which this scope belongs）, range（Range interval, relative to node）</p>
+<p>The application can listen to this event to retrieve the currently activated bounding box, retrieve its configuration, and echo it to the page. Since the scope may contain multiple nodes, the first node instance is usually taken. If you want to retrieve the position of the bounding box on the page, you can call the 'el.rbox' method:</p>
+<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;outer_frame_active&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">el, parentNode, range</span>) =&gt;</span> {
+    <span class="hljs-comment">// Take the bounding box style of the first node within the range</span>
+    <span class="hljs-keyword">const</span> firstNode = parentNode.children[range[<span class="hljs-number">0</span>]]
+    <span class="hljs-keyword">const</span> firstNodeOuterFrame = firstNode.getData(<span class="hljs-string">&#x27;outerFrame&#x27;</span>)
+    <span class="hljs-comment">// Obtain the position and size information of the bounding box, where you can render your configuration float layer</span>
+    <span class="hljs-keyword">const</span> { x, y, width, height } = el.rbox()
+})
+</code></pre>
+<h3>outer_frame_delete</h3>
+<p>Triggered when deleting the currently active bounding box on the canvas.</p>
+<h2>Methods</h2>
+<h3>getActiveOuterFrame()</h3>
+<p>Get the currently activated bounding box data. Return an object with the following structure:</p>
+<pre class="hljs"><code>{
+    el,
+    node,
+    range
+}
+</code></pre>
+<h3>updateActiveOuterFrame(config = {})</h3>
+<p>Update the currently active bounding box. After executing this method, please immediately hide your style panel as it will clear the currently active bounding box.</p>
+<h3>removeActiveOuterFrame()</h3>
+<p>Delete the currently active bounding box.</p>
+<h3>getRangeNodeList(node, range)</h3>
+<p>Get a list of boxed child nodes within a specified range of a node.</p>
+<h3>clearActiveOuterFrame()</h3>
+<p>Clear the currently active bounding box.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@@ -101,7 +101,11 @@ and copying the `data` of the data object, example:
 copyNodeTree({}, node);
 ```

-#### imgToDataUrl(src)
+#### imgToDataUrl(src, returnBlob = false)
+
+- `src`：Image url
+
+- `returnBlob`：v0.10.2+，Is the result returned in Blob format, defaulting to DataURL format

 Convert image to dataURL

--- a/web/src/pages/Doc/en/utils/index.vue
+++ b/web/src/pages/Doc/en/utils/index.vue
@@ -66,7 +66,15 @@ basic data, otherwise it will throw an error</p>
 and copying the <code>data</code> of the data object, example:</p>
 <pre class="hljs"><code>copyNodeTree({}, node);
 </code></pre>
-<h4>imgToDataUrl(src)</h4>
+<h4>imgToDataUrl(src, returnBlob = false)</h4>
+<ul>
+<li>
+<p><code>src</code>：Image url</p>
+</li>
+<li>
+<p><code>returnBlob</code>：v0.10.2+，Is the result returned in Blob format, defaulting to DataURL format</p>
+</li>
+</ul>
 <p>Convert image to dataURL</p>
 <h4>downloadFile(file, fileName)</h4>
 <p>Download file</p>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -65,6 +65,7 @@ export default [
      { path: 'cooperate', title: 'Cooperate插件' },
      { path: 'rainbowLines', title: 'RainbowLines插件' },
      { path: 'demonstrate', title: 'Demonstrate插件' },
+      { path: 'outerFrame', title: 'OuterFrame插件' },
      { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle收费插件' },
      { path: 'notation', title: 'Notation收费插件' },
      { path: 'help1', title: '概要/关联线' },
@@ -111,6 +112,7 @@ export default [
      { path: 'cooperate', title: 'Cooperate plugin' },
      { path: 'rainbowLines', title: 'RainbowLines plugin' },
      { path: 'demonstrate', title: 'Demonstrate plugin' },
+      { path: 'outerFrame', title: 'OuterFrame plugin' },
      {
        path: 'handDrawnLikeStyle',
        title: 'HandDrawnLikeStyle chargeable plugin'
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,51 @@
 # Changelog

+## 0.10.2
+
+> 2024.7.3
+
+修复：
+
+> 1.修复节点文本和createNodePrefixContent选项自定义的内容没有垂直居中的问题；
+>
+> 2.修复拖动关联线端点移动时会选中节点文字的问题；
+
+新增：
+
+> 1.新增外框插件；
+>
+> 2.新增向左逻辑结构图；
+>
+> 3.小地图支持拖拽视图框调整画布位置；
+>
+> 4.新增拦截节点开始拖拽的实例化选项；
+>
+> 5.阻止mousedown、mousemove、drag、node_mousedown事件的默认行为；
+>
+> 6.drag插件的beforeDragEnd选项新增当前被拖拽的节点列表的回调参数；
+>
+> 7.新增禁止读取和写入用户剪贴板的实例化选项；
+>
+> 8.将Select插件的画布自动移动功能独立出来，解决没有注册Select插件的情况下Drag插件无法使用画布自动移动功能的问题；
+>
+> 9.hide_text_edit事件增加被编辑节点的回调参数；
+>
+> 10.点击超链接图标时激活节点；新增自定义超链接跳转的实例化选项；
+
+Demo：
+
+> 1.颜色选择支持选择透明度；
+>
+> 2.新增外框设置功能；
+>
+> 3.右键菜单新增复制到剪贴板功能；
+>
+> 4.新增向左逻辑结构图；
+>
+> 5.修复鼠标移出小地图再松开后事件没有结束的问题；
+>
+> 6.小地图支持拖拽视图框调整画布位置；
+
 ## 0.10.1

 修复：
--- 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.10.2</h2>
+<blockquote>
+<p>2024.7.3</p>
+</blockquote>
+<p>修复：</p>
+<blockquote>
+<p>1.修复节点文本和createNodePrefixContent选项自定义的内容没有垂直居中的问题；</p>
+<p>2.修复拖动关联线端点移动时会选中节点文字的问题；</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.新增外框插件；</p>
+<p>2.新增向左逻辑结构图；</p>
+<p>3.小地图支持拖拽视图框调整画布位置；</p>
+<p>4.新增拦截节点开始拖拽的实例化选项；</p>
+<p>5.阻止mousedown、mousemove、drag、node_mousedown事件的默认行为；</p>
+<p>6.drag插件的beforeDragEnd选项新增当前被拖拽的节点列表的回调参数；</p>
+<p>7.新增禁止读取和写入用户剪贴板的实例化选项；</p>
+<p>8.将Select插件的画布自动移动功能独立出来，解决没有注册Select插件的情况下Drag插件无法使用画布自动移动功能的问题；</p>
+<p>9.hide_text_edit事件增加被编辑节点的回调参数；</p>
+<p>10.点击超链接图标时激活节点；新增自定义超链接跳转的实例化选项；</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.颜色选择支持选择透明度；</p>
+<p>2.新增外框设置功能；</p>
+<p>3.右键菜单新增复制到剪贴板功能；</p>
+<p>4.新增向左逻辑结构图；</p>
+<p>5.修复鼠标移出小地图再松开后事件没有结束的问题；</p>
+<p>6.小地图支持拖拽视图框调整画布位置；</p>
+</blockquote>
 <h2>0.10.1</h2>
 <p>修复：</p>
 <blockquote>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -28,7 +28,7 @@ const mindMap = new MindMap({
 | -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ |
 | el                               | Element |                  | 容器元素，必传，必须为DOM元素（当容器元素在页面上的位置发生了改变，但大小没有改变的情况下必须调用`getElRectInfo()`方法更新库内部的相关信息；当大小也发生了改变后必须调用`resize()`方法，否则会造成一些功能异常）              |
 | data                             | Object 、 null  |   | 思维导图数据，可参考下方【数据结构】介绍。v0.9.9+支持传空对象或者null，画布会显示空白 |
-| layout                           | String  | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图） |
+| layout                           | String  | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、logicalStructureLeft（v0.10.2+，向左逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图） |
 | fishboneDeg（v0.5.4+）                      | Number |  45          |  设置鱼骨结构图的斜线角度               |
 | theme                            | String  | default          | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫）、simpleBlack（v0.5.4+简约黑）、courseGreen（v0.5.4+课程绿）、coffee（v0.5.4+咖啡）、redSpirit（v0.5.4+红色精神）、blackHumour（v0.5.4+黑色幽默）、lateNightOffice（v0.5.4+深夜办公室）、blackGold（v0.5.4+黑金）、avocado（v.5.10-fix.2+牛油果）、autumn（v.5.10-fix.2+秋天）、orangeJuice（v.5.10-fix.2+橙汁） |
 | themeConfig                      | Object  | {}               | 主题配置，会和所选择的主题进行合并，可用字段可参考：[default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) |
@@ -96,6 +96,8 @@ const mindMap = new MindMap({
 | 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 |
+| disabledClipboard（v0.10.2+）     | Boolean | false | 是否禁止粘贴用户剪贴板中的数据，禁止将复制的节点数据写入用户的剪贴板中，此时只能复制和粘贴画布内的节点数据 |
+| customHyperlinkJump（v0.10.2+）     | null、Function | false | 自定义超链接的跳转。如果不传，默认会以新窗口的方式打开超链接，可以传递一个函数，函数接收两个参数：link（超链接的url）、node（所属节点实例），只要传递了函数，就会阻止默认的跳转 |

 #### 1.1数据结构

@@ -217,8 +219,9 @@ 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实例 |
+| beforeDragEnd（v0.10.1+）     | null、Function  | null  | 即将拖拽完成前调用该函数，函数接收一个对象作为参数：{overlapNodeUid,prevNodeUid,nextNodeUid,beingDragNodeList}，代表拖拽信息，如果要阻止本次拖拽，那么可以返回true，此时node_dragend事件不会再触发。函数可以是异步函数，返回Promise实例。beingDragNodeList为v0.10.2+新增的回调参数，为当前被拖拽的节点列表 |
 | handleDragCloneNode（v0.10.1+）     | null、Function  | null  | 拖拽单个节点时会克隆被拖拽节点，如果想修改该克隆节点，那么可以通过该选项提供一个处理函数，函数接收克隆节点对象。（需要注意的是节点对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象） |
+| beforeDragStart（v0.10.2+）     | null、Function（(nodeList) => {}）  | null  | 即将开始拖拽节点前调用该函数，函数接收当前即将被拖拽的节点实例列表作为参数，如果要阻止本次拖拽，那么可以返回true。可以是异步函数，返回一个Promise实例 |

 ### 5.Watermark插件

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -44,7 +44,7 @@
 <td>layout</td>
 <td>String</td>
 <td>logicalStructure</td>
-<td>布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图）</td>
+<td>布局类型，可选列表：logicalStructure（逻辑结构图）、logicalStructureLeft（v0.10.2+，向左逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图）</td>
 </tr>
 <tr>
 <td>fishboneDeg（v0.5.4+）</td>
@@ -448,6 +448,18 @@
 <td>null</td>
 <td>添加附加的节点后置内容。后置内容指和文本同一行的区域中的后置内容，不包括节点图片部分。用法同createNodePrefixContent</td>
 </tr>
+<tr>
+<td>disabledClipboard（v0.10.2+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>是否禁止粘贴用户剪贴板中的数据，禁止将复制的节点数据写入用户的剪贴板中，此时只能复制和粘贴画布内的节点数据</td>
+</tr>
+<tr>
+<td>customHyperlinkJump（v0.10.2+）</td>
+<td>null、Function</td>
+<td>false</td>
+<td>自定义超链接的跳转。如果不传，默认会以新窗口的方式打开超链接，可以传递一个函数，函数接收两个参数：link（超链接的url）、node（所属节点实例），只要传递了函数，就会阻止默认的跳转</td>
+</tr>
 </tbody>
 </table>
 <h4>1.1数据结构</h4>
@@ -692,7 +704,7 @@
 <td>beforeDragEnd（v0.10.1+）</td>
 <td>null、Function</td>
 <td>null</td>
-<td>即将拖拽完成前调用该函数，函数接收一个对象作为参数：{overlapNodeUid,prevNodeUid,nextNodeUid}，代表拖拽信息，如果要阻止本次拖拽，那么可以返回true，此时node_dragend事件不会再触发。函数可以是异步函数，返回Promise实例</td>
+<td>即将拖拽完成前调用该函数，函数接收一个对象作为参数：{overlapNodeUid,prevNodeUid,nextNodeUid,beingDragNodeList}，代表拖拽信息，如果要阻止本次拖拽，那么可以返回true，此时node_dragend事件不会再触发。函数可以是异步函数，返回Promise实例。beingDragNodeList为v0.10.2+新增的回调参数，为当前被拖拽的节点列表</td>
 </tr>
 <tr>
 <td>handleDragCloneNode（v0.10.1+）</td>
@@ -700,6 +712,12 @@
 <td>null</td>
 <td>拖拽单个节点时会克隆被拖拽节点，如果想修改该克隆节点，那么可以通过该选项提供一个处理函数，函数接收克隆节点对象。（需要注意的是节点对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象）</td>
 </tr>
+<tr>
+<td>beforeDragStart（v0.10.2+）</td>
+<td>null、Function（(nodeList) =&gt; {}）</td>
+<td>null</td>
+<td>即将开始拖拽节点前调用该函数，函数接收当前即将被拖拽的节点实例列表作为参数，如果要阻止本次拖拽，那么可以返回true。可以是异步函数，返回一个Promise实例</td>
+</tr>
 </tbody>
 </table>
 <h3>5.Watermark插件</h3>
--- a/web/src/pages/Doc/zh/course14/index.md
+++ b/web/src/pages/Doc/zh/course14/index.md
@@ -52,7 +52,7 @@ miniMapContainer.innerHTML = svgHTML

 到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置

-6.监听container元素的mousedown、mousemove、mouseup事件，分别调用小地图插件实例的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果
+6.监听container元素的mousedown、mousemove事件，并且监听window的mouseup事件（如果将mouseup绑定到container元素上，那么鼠标移出container元素整个拖拽行为无法停止），分别调用小地图插件实例的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果

 插件的完整信息可以参考[miniMap](https://wanglin2.github.io/mind-map/#/doc/zh/miniMap)。

@@ -64,6 +64,30 @@ getImgUrl(img => {
 })
 ```

+在`v0.10.2+`版本之后，支持拖拽小地图内的视口框元素来同步移动画布位置，也就是可以拖拽`viewBoxContainer`元素，要实现这个特性，需要监听`viewBoxContainer`元素的`mousedown`（需要阻止冒泡，否则会触发container元素的mousedown事件）、`mousemove`事件，分别调用小地图插件实例的方法：
+
+```js
+// mousedown事件调用
+mindMap.miniMap.onViewBoxMousedown(e)
+// mousemove事件调用
+mindMap.miniMap.onViewBoxMousemove(e)
+```
+
+同时需要监听`mini_map_view_box_position_change`事件来实时更新`viewBoxContainer`元素：
+
+```js
+mindMap.on('mini_map_view_box_position_change', ({ left, right, top, bottom }) => {
+    viewBoxStyle.left = left
+    viewBoxStyle.right = right
+    viewBoxStyle.top = top
+    viewBoxStyle.bottom = bottom
+})
+```
+
+需要注意，如果你给`viewBoxContainer`元素设置了`css`的`transition`属性来增加过渡效果，那么在`mini_map_view_box_position_change`事件里需要临时去除，否则拖动会不流畅，可以在前面的`mouseup`事件里恢复。
+
 ## 完整示例

-<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVt2O20QUfpWRASULWSfbUgQhW5UCEkgNQqUSF0yVeu1J4sqesTzjJFWUm4oLhEBcIH6LBFyBhBStEBdsJXgaki1vwTn2jD12stpy1ZU28sz3nZ85c35m6byRJO4sY07fGUg/DRNFJFNZcp3yME5EqsiSpGzcIYIPRcYVCzpETr0oEvPbbExWZJyKmLRAQ6uUGIY8GHpJAVFHwnbEDmPYPYy9hDqUE0J5xBTBPWQeE55FEeWUd7tkc/rF5ofTzaO/N+uzzXe/nn//8Wb917+/fUu5L7hUBH6VF3KWfhgGagqyR73eDvYOCydTBeA1wHK120d/bL8+LZUbCXAhBBfeNIIgAudtoz8HhjML2fymWHygHkRM48tViWoNSPC9knC0B7/FxugSwr098B2BkaijWRJ4ikFEwyGC7QNyfJ0sMYJwpCfrn8/X35RH2n51uv18jRjGFuQ8kNAhdrUZF1z0s8hTIVxosdWuB7TTDCL4klvb/vn79scvN5/YMSQ78XNnXpQxN+Qof2d4C1xAT1w5m+ASRexwFnRDshFLuQltndwA63wM9UV0xOpsiPxFZIAoX2EOFReS14FkgZhzvA9WXUgz0hYTaPuUxGKGFp9CCTIvUJLleXG5iiypFJTF3LYSyipGNjdF3M4hQljUJ4Hws5hx5U6Yejti+HnzwbtBu6UlyxxoHXQKKYxlv9COf9TBDepYW8W2YguF29TZ/nT25NOH5w/PijaBfyutDIn+NIyClHEkf1TpaKjba6Vp6Z/Hn50//qVprG5wj9G7FWbznpEH5lPvGTm4eXVbCPWeCNj7QoZY7SDZiiDzWx3S8uHq4Jru5vTVwetFR65SR/B2C48w8qcenzAQsftQ3hBsKpbt6H/wObg1UiljIzhTwNIR/O7KYIcddIuhBOMIForBJAEKrAgZBOGM+JEn5TF1tPa3oFCok8OaEAYVWuYnUAZdQG2iiaTRWDbB6mZuxKaeAbeq2zCoKhhYrBUDV01GllR4piciIdodqmoOWT41ey11bBYMjr0ci9KX2FmB1chLlXpcjkUa98k9ic20/fyy0V5XB/dqSYlDZqz6zen2Emkli1aDqURiE3HOFbyysBVVq8pTHYgc0V/2fTXuXg8NOyrlOWsDpXHr5bf5GnStBINlriRn3NAvG+q43eI5o9ujy2Ts+lJSp6wh7LsmF039z3Gw9vGh8kLOIyQpqzJlOI1nLAfygsb/55o5a1RVgt6JFFGmCkFzHT29ykNuFrvmp/lk75OXe71kYSzvt/uisRx76SQEu0Zr4gVByCdmo3TdLUvnKX0+Mj5ot6115Xm5ZVy/ZnleRb7+lrvMfpn3hyIN88OhR+hFQ3Mzxy7VfCJSaGx9ciVZEADCgKSTk/aVq692yCuv4X/RdLULRkcUkZ57VRrj0P3yFHQ6TpGA+H5270vB4bmee0A1AAlYDhvI+gySHSeM24VPN4VRH8YMc/XwJBVzCa+0+yChq3TPC72Q3c10lNK+rZzVf9RSHZw=" />
+在线Demo小地图代码：[Navigator.vue](https://github.com/wanglin2/mind-map/blob/main/web/src/pages/Edit/components/Navigator.vue)。
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV1tvG0UU/iujBWQHnLXbUgQmqUpLJZAShEoED2zlbrxje6v1zmp3bKeyLEGFArSp8sCt0EqkApFKSFGEEGrShl/jS/LEX+Cc2Znd2bXdhCcs2d6Z853LnDm37RvvBIHZ7VCjaixF9dANOIko7wSXLN9tByzkpE9C2igR5q+yjs+pUyJRy/Y81rtOG2RAGiFrkwJIKCQcq67vrNpBTLKMCLY9utiG3cW2HViG5RNi+R7lBPcQuUz8judZvuWXy2S0vz16tD96+Pdo72D045PJT1+M9o5Ofn9g+XXmR5zAL7ddn4afuA5vAe+5SmWK9h51my0OxItAE2LHD/8cf7+fCFccYIILJlxVjMAC5y2iPQsK03Vp7wrb+Ijf9qik9wcJtefy1lpo+5HLXeZLOg87NEFIHSiibicizs2gr9AGGo3kygzyGkNfZamdwLE5BZ+7q0gsLpDlS6SPPoZDH+89nuz9kBx6/N3++P4e0tD7wGcDh7wEU6oxwcR6x7PxMEKqHRSzLi/l3Qy2CG3jp3+Mf/5m9JXuZTLlYbNrex1quj7yr62ugAloiRl1m7hEFt3hMVyBdIomXLk2C84Rs3h09Tw40rJo8Pw8MJAsf4BRFl+IyJSIOqyHwVCk6YXkPa0hATZLSJt1UeMZhCByjpCOiAtNRDZik3NhzL5AQydI5WNo7W6Otn8ZP96EBD15vjPe+XK89fXw6b3h4b3hs79SEz6Ob+zsPskzKK0zdU52n43uPnmRzjO5MM8w96TDo/uTo73Rr7sQ4uNvD0bbD4aHm/883zp59Nnxb5/HNWbKjg9Z7OmrLdtvCmP6kIANXiIhpk+JcBaUyDrjHArm4NR7atheJC5qOk1MFAsQ/JuDECqxiuD/HAzYg/GAgT2TLk1dljZLVyUtoqgVIa3E055qDUVBIoR6VeKweqdNfW42Kb/mUXy8cvt9p1iQnEndKCyUYi7Mv2osHT+WgRuWoW3F25xucNy2jPHOwfHdO5M7B3Hzwc9ACkNgveV6Tkh9BH+aysiJm6klr2l4uDU53M0ryyqcofRGStNx/5MF6lHuKT7IFn6dMf4Bc6gKaeAsYLAVSqRQh6uDa7oh4IOFt+M+n6Yb84sFPEKtLvIAWPTeJZqIDsW4q/0HvA9m1XhIaQ3O5NCwBr+zeHrAw3qm7TjXumDxihtxCuEFARdXOeBJKt6UEiwZNZhiasK6dbZRC6QnUivn5D1WFPguleM5CyYsWHAKwxHYBytClhy3S+qeHUXLliG1vgv1yDIEWQJcJ6UmyQGQpTJQdaC6RiUx6dppWFwWZ8YqC3StHSmExWME1sQUgSuFkAotnlGpac23f8vQUTDLzMRokGqElQdQubDnWBkbLGxXyc0I+3vx5X6u4w8WbmZiHueeBq/mB67XSCHYKOSQUP10II5eMS6pG9zig9RS6QhBkU/6jeTuRPeQLLBzPJSePzP75DBKVj/XNKr58VSzOBsAZgQnFnecb8ApBx45FxD5zqmJz0Zk8qyelspa8MNSHFMgLssXCcswy/Hbg+wbJo3aZj2KLCMpLtjEVZ6owtjDKbWK7wWvCBwhKkmrEHA42napIIhKh9+X8vmkRKWM9nrEvA6PGVUgVeRKBItaTKtviTG5Sl6vVIINpXm23leV5rYdNl3Qq6QGULBcv6k2EtPNJK3PaPM5ZYM0W1unlidbyvSLmuWp57OvTqfpTzJ2kcH0gYcT4wpYkZOcz4hTJa+zECp+lZwPNggQXIeEzfXi+Qtvlsgbb+E37kbSBCXD80jFvBCdotzMZVBShubKEtKgzouANkpGHM748mveipgP79pChiUJEM5JT4cshyFcNHKzDI9mCBOV26YY+YvrIetFYNAt4JDVasbrdcw7nTfIJU86MAb/Ak6Okok=" />
--- a/web/src/pages/Doc/zh/course14/index.vue
+++ b/web/src/pages/Doc/zh/course14/index.vue
@@ -35,15 +35,31 @@
 </code></pre>
 <p>5.将viewBoxStyle对象设置为viewBoxContainer元素的样式</p>
 <p>到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置</p>
-<p>6.监听container元素的mousedown、mousemove、mouseup事件，分别调用小地图插件实例的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果</p>
+<p>6.监听container元素的mousedown、mousemove事件，并且监听window的mouseup事件（如果将mouseup绑定到container元素上，那么鼠标移出container元素整个拖拽行为无法停止），分别调用小地图插件实例的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果</p>
 <p>插件的完整信息可以参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/miniMap">miniMap</a>。</p>
 <p>在<code>v0.8.0+</code>版本之后，<code>calculationMiniMap</code>方法会返回<code>getImgUrl</code>属性，这是一个异步函数，你可以调用它并传递一个回调函数，回调函数可以接收一个参数，代表小地图图片数据，然后可以通过<code>img</code>标签进行渲染，替代前面的<code>svgHTML</code>，这样可以减少页面上的节点数量，能优化一定的性能：</p>
 <pre class="hljs"><code>getImgUrl(<span class="hljs-function"><span class="hljs-params">img</span> =&gt;</span> {
    img.src = img
 })
 </code></pre>
+<p>在<code>v0.10.2+</code>版本之后，支持拖拽小地图内的视口框元素来同步移动画布位置，也就是可以拖拽<code>viewBoxContainer</code>元素，要实现这个特性，需要监听<code>viewBoxContainer</code>元素的<code>mousedown</code>（需要阻止冒泡，否则会触发container元素的mousedown事件）、<code>mousemove</code>事件，分别调用小地图插件实例的方法：</p>
+<pre class="hljs"><code><span class="hljs-comment">// mousedown事件调用</span>
+mindMap.miniMap.onViewBoxMousedown(e)
+<span class="hljs-comment">// mousemove事件调用</span>
+mindMap.miniMap.onViewBoxMousemove(e)
+</code></pre>
+<p>同时需要监听<code>mini_map_view_box_position_change</code>事件来实时更新<code>viewBoxContainer</code>元素：</p>
+<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;mini_map_view_box_position_change&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">{ left, right, top, bottom }</span>) =&gt;</span> {
+    viewBoxStyle.left = left
+    viewBoxStyle.right = right
+    viewBoxStyle.top = top
+    viewBoxStyle.bottom = bottom
+})
+</code></pre>
+<p>需要注意，如果你给<code>viewBoxContainer</code>元素设置了<code>css</code>的<code>transition</code>属性来增加过渡效果，那么在<code>mini_map_view_box_position_change</code>事件里需要临时去除，否则拖动会不流畅，可以在前面的<code>mouseup</code>事件里恢复。</p>
 <h2>完整示例</h2>
-<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVt2O20QUfpWRASULWSfbUgQhW5UCEkgNQqUSF0yVeu1J4sqesTzjJFWUm4oLhEBcIH6LBFyBhBStEBdsJXgaki1vwTn2jD12stpy1ZU28sz3nZ85c35m6byRJO4sY07fGUg/DRNFJFNZcp3yME5EqsiSpGzcIYIPRcYVCzpETr0oEvPbbExWZJyKmLRAQ6uUGIY8GHpJAVFHwnbEDmPYPYy9hDqUE0J5xBTBPWQeE55FEeWUd7tkc/rF5ofTzaO/N+uzzXe/nn//8Wb917+/fUu5L7hUBH6VF3KWfhgGagqyR73eDvYOCydTBeA1wHK120d/bL8+LZUbCXAhBBfeNIIgAudtoz8HhjML2fymWHygHkRM48tViWoNSPC9knC0B7/FxugSwr098B2BkaijWRJ4ikFEwyGC7QNyfJ0sMYJwpCfrn8/X35RH2n51uv18jRjGFuQ8kNAhdrUZF1z0s8hTIVxosdWuB7TTDCL4klvb/vn79scvN5/YMSQ78XNnXpQxN+Qof2d4C1xAT1w5m+ASRexwFnRDshFLuQltndwA63wM9UV0xOpsiPxFZIAoX2EOFReS14FkgZhzvA9WXUgz0hYTaPuUxGKGFp9CCTIvUJLleXG5iiypFJTF3LYSyipGNjdF3M4hQljUJ4Hws5hx5U6Yejti+HnzwbtBu6UlyxxoHXQKKYxlv9COf9TBDepYW8W2YguF29TZ/nT25NOH5w/PijaBfyutDIn+NIyClHEkf1TpaKjba6Vp6Z/Hn50//qVprG5wj9G7FWbznpEH5lPvGTm4eXVbCPWeCNj7QoZY7SDZiiDzWx3S8uHq4Jru5vTVwetFR65SR/B2C48w8qcenzAQsftQ3hBsKpbt6H/wObg1UiljIzhTwNIR/O7KYIcddIuhBOMIForBJAEKrAgZBOGM+JEn5TF1tPa3oFCok8OaEAYVWuYnUAZdQG2iiaTRWDbB6mZuxKaeAbeq2zCoKhhYrBUDV01GllR4piciIdodqmoOWT41ey11bBYMjr0ci9KX2FmB1chLlXpcjkUa98k9ic20/fyy0V5XB/dqSYlDZqz6zen2Emkli1aDqURiE3HOFbyysBVVq8pTHYgc0V/2fTXuXg8NOyrlOWsDpXHr5bf5GnStBINlriRn3NAvG+q43eI5o9ujy2Ts+lJSp6wh7LsmF039z3Gw9vGh8kLOIyQpqzJlOI1nLAfygsb/55o5a1RVgt6JFFGmCkFzHT29ykNuFrvmp/lk75OXe71kYSzvt/uisRx76SQEu0Zr4gVByCdmo3TdLUvnKX0+Mj5ot6115Xm5ZVy/ZnleRb7+lrvMfpn3hyIN88OhR+hFQ3Mzxy7VfCJSaGx9ciVZEADCgKSTk/aVq692yCuv4X/RdLULRkcUkZ57VRrj0P3yFHQ6TpGA+H5270vB4bmee0A1AAlYDhvI+gySHSeM24VPN4VRH8YMc/XwJBVzCa+0+yChq3TPC72Q3c10lNK+rZzVf9RSHZw=" />
+<p>在线Demo小地图代码：<a href="https://github.com/wanglin2/mind-map/blob/main/web/src/pages/Edit/components/Navigator.vue">Navigator.vue</a>。</p>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV1tvG0UU/iujBWQHnLXbUgQmqUpLJZAShEoED2zlbrxje6v1zmp3bKeyLEGFArSp8sCt0EqkApFKSFGEEGrShl/jS/LEX+Cc2Znd2bXdhCcs2d6Z853LnDm37RvvBIHZ7VCjaixF9dANOIko7wSXLN9tByzkpE9C2igR5q+yjs+pUyJRy/Y81rtOG2RAGiFrkwJIKCQcq67vrNpBTLKMCLY9utiG3cW2HViG5RNi+R7lBPcQuUz8judZvuWXy2S0vz16tD96+Pdo72D045PJT1+M9o5Ofn9g+XXmR5zAL7ddn4afuA5vAe+5SmWK9h51my0OxItAE2LHD/8cf7+fCFccYIILJlxVjMAC5y2iPQsK03Vp7wrb+Ijf9qik9wcJtefy1lpo+5HLXeZLOg87NEFIHSiibicizs2gr9AGGo3kygzyGkNfZamdwLE5BZ+7q0gsLpDlS6SPPoZDH+89nuz9kBx6/N3++P4e0tD7wGcDh7wEU6oxwcR6x7PxMEKqHRSzLi/l3Qy2CG3jp3+Mf/5m9JXuZTLlYbNrex1quj7yr62ugAloiRl1m7hEFt3hMVyBdIomXLk2C84Rs3h09Tw40rJo8Pw8MJAsf4BRFl+IyJSIOqyHwVCk6YXkPa0hATZLSJt1UeMZhCByjpCOiAtNRDZik3NhzL5AQydI5WNo7W6Otn8ZP96EBD15vjPe+XK89fXw6b3h4b3hs79SEz6Ob+zsPskzKK0zdU52n43uPnmRzjO5MM8w96TDo/uTo73Rr7sQ4uNvD0bbD4aHm/883zp59Nnxb5/HNWbKjg9Z7OmrLdtvCmP6kIANXiIhpk+JcBaUyDrjHArm4NR7atheJC5qOk1MFAsQ/JuDECqxiuD/HAzYg/GAgT2TLk1dljZLVyUtoqgVIa3E055qDUVBIoR6VeKweqdNfW42Kb/mUXy8cvt9p1iQnEndKCyUYi7Mv2osHT+WgRuWoW3F25xucNy2jPHOwfHdO5M7B3Hzwc9ACkNgveV6Tkh9BH+aysiJm6klr2l4uDU53M0ryyqcofRGStNx/5MF6lHuKT7IFn6dMf4Bc6gKaeAsYLAVSqRQh6uDa7oh4IOFt+M+n6Yb84sFPEKtLvIAWPTeJZqIDsW4q/0HvA9m1XhIaQ3O5NCwBr+zeHrAw3qm7TjXumDxihtxCuEFARdXOeBJKt6UEiwZNZhiasK6dbZRC6QnUivn5D1WFPguleM5CyYsWHAKwxHYBytClhy3S+qeHUXLliG1vgv1yDIEWQJcJ6UmyQGQpTJQdaC6RiUx6dppWFwWZ8YqC3StHSmExWME1sQUgSuFkAotnlGpac23f8vQUTDLzMRokGqElQdQubDnWBkbLGxXyc0I+3vx5X6u4w8WbmZiHueeBq/mB67XSCHYKOSQUP10II5eMS6pG9zig9RS6QhBkU/6jeTuRPeQLLBzPJSePzP75DBKVj/XNKr58VSzOBsAZgQnFnecb8ApBx45FxD5zqmJz0Zk8qyelspa8MNSHFMgLssXCcswy/Hbg+wbJo3aZj2KLCMpLtjEVZ6owtjDKbWK7wWvCBwhKkmrEHA42napIIhKh9+X8vmkRKWM9nrEvA6PGVUgVeRKBItaTKtviTG5Sl6vVIINpXm23leV5rYdNl3Qq6QGULBcv6k2EtPNJK3PaPM5ZYM0W1unlidbyvSLmuWp57OvTqfpTzJ2kcH0gYcT4wpYkZOcz4hTJa+zECp+lZwPNggQXIeEzfXi+Qtvlsgbb+E37kbSBCXD80jFvBCdotzMZVBShubKEtKgzouANkpGHM748mveipgP79pChiUJEM5JT4cshyFcNHKzDI9mCBOV26YY+YvrIetFYNAt4JDVasbrdcw7nTfIJU86MAb/Ak6Okok=" />
  </div>
 </template>

--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -9,7 +9,7 @@
 ## 特性

 - [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积
- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构
+- [x] 支持逻辑结构图（向左、向右逻辑结构图）、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构
 - [x] 内置多种主题，允许高度自定义样式，支持注册新主题
 - [x] 节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式
 - [x] 节点支持拖拽（拖拽移动、自由调整）、多种节点形状；支持扩展节点内容、支持使用 DDM 完全自定义节点内容
@@ -24,7 +24,7 @@

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

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

 本项目不会实现的特性：

--- 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="checkbox34" checked="true" /><label for="checkbox34">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
+<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">支持逻辑结构图（向左、向右逻辑结构图）、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
+<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
+<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
+<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">节点支持拖拽（拖拽移动、自由调整）、多种节点形状；支持扩展节点内容、支持使用 DDM 完全自定义节点内容</label></li>
+<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">支持画布拖动、缩放</label></li>
+<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">支持鼠标按键拖动选择和 Ctrl+左键两种多选节点方式</label></li>
+<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">支持导出为</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="checkbox42" checked="true" /><label for="checkbox42">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条、手绘风格、彩虹线条</label></li>
+<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">提供丰富的配置，满足各种场景各种使用习惯</label></li>
+<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">支持协同编辑</label></li>
+<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">支持演示模式</label></li>
 </ul>
 <p>官方提供了如下插件，可根据需求按需引入（某个功能不生效大概率是因为你没有引入对应的插件），具体使用方式请查看文档：</p>
 <blockquote>
-<p>RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、HandDrawnLikeStyle（手绘风格插件）[收费]、Notation（节点标记插件）[收费]</p>
+<p>RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、OuterFrame（外框插件）、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="checkbox46" checked="true" /><label for="checkbox46">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
+<li><input type="checkbox" id="checkbox48" checked="true" /><label for="checkbox48">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
+<li><input type="checkbox" id="checkbox49" checked="true" /><label for="checkbox49">右键菜单，支持展开、收起、整理布局等操作</label></li>
+<li><input type="checkbox" id="checkbox50" checked="true" /><label for="checkbox50">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
 </ul>
 <p>提供文档页面服务。</p>
 <p>3.<code>dist</code></p>
--- a/web/src/pages/Doc/zh/miniMap/index.md
+++ b/web/src/pages/Doc/zh/miniMap/index.md
@@ -70,17 +70,21 @@ MindMap.usePlugin(MiniMap)

 到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置

-6.监听`container`元素的`mousedown`、`mousemove`、`mouseup`事件，分别调用下面即将介绍的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果
+6.监听`container`元素的`mousedown`、`mousemove`事件，并且监听`window`的`mouseup`事件（如果将`mouseup`绑定到`container`元素上，那么鼠标移出`container`元素整个拖拽行为无法停止），分别调用下面即将介绍的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果
+
+7.在v0.10.2+版本，支持拖拽小地图内的视口框来实现同步拖拽画布，实现该特性可以监听`viewBoxContainer`元素的`mousedown`（需要阻止冒泡，否则会触发`container`元素的`mousedown`事件）、`mousemove`事件，分别调用小地图插件实例的`onViewBoxMousedown`和`onViewBoxMousemove`方法，同时需要监听mini_map_view_box_position_change事件来实时更新viewBoxContainer元素。
+
+详细教程请参考[如何渲染一个小地图](https://wanglin2.github.io/mind-map/#/doc/zh/course14)。

 ### onMousedown(e)

-小地图鼠标按下事件执行该函数
+小地图鼠标按下事件执行该函数。

 `e`：事件对象

 ### onMousemove(e, sensitivityNum = 5)

-小地图鼠标移动事件执行该函数
+小地图鼠标移动事件执行该函数。

 `e`：事件对象

@@ -88,4 +92,16 @@ MindMap.usePlugin(MiniMap)

 ### onMouseup()

-小地图鼠标松开事件执行该函数
+小地图鼠标松开事件执行该函数。
+
+### onViewBoxMousedown(e)
+
+> v0.10.2+
+
+视口框元素鼠标按下事件调用该方法。
+
+### onViewBoxMousemove(e)
+
+> v0.10.2+
+
+视口框元素鼠标移动事件调用该方法。
--- a/web/src/pages/Doc/zh/miniMap/index.vue
+++ b/web/src/pages/Doc/zh/miniMap/index.vue
@@ -47,16 +47,28 @@ MindMap.usePlugin(MiniMap)
 </code></pre>
 <p>5.将<code>viewBoxStyle</code>对象设置为<code>viewBoxContainer</code>元素的样式</p>
 <p>到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置</p>
-<p>6.监听<code>container</code>元素的<code>mousedown</code>、<code>mousemove</code>、<code>mouseup</code>事件，分别调用下面即将介绍的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果</p>
+<p>6.监听<code>container</code>元素的<code>mousedown</code>、<code>mousemove</code>事件，并且监听<code>window</code>的<code>mouseup</code>事件（如果将<code>mouseup</code>绑定到<code>container</code>元素上，那么鼠标移出<code>container</code>元素整个拖拽行为无法停止），分别调用下面即将介绍的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果</p>
+<p>7.在v0.10.2+版本，支持拖拽小地图内的视口框来实现同步拖拽画布，实现该特性可以监听<code>viewBoxContainer</code>元素的<code>mousedown</code>（需要阻止冒泡，否则会触发<code>container</code>元素的<code>mousedown</code>事件）、<code>mousemove</code>事件，分别调用小地图插件实例的<code>onViewBoxMousedown</code>和<code>onViewBoxMousemove</code>方法，同时需要监听mini_map_view_box_position_change事件来实时更新viewBoxContainer元素。</p>
+<p>详细教程请参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/course14">如何渲染一个小地图</a>。</p>
 <h3>onMousedown(e)</h3>
-<p>小地图鼠标按下事件执行该函数</p>
+<p>小地图鼠标按下事件执行该函数。</p>
 <p><code>e</code>：事件对象</p>
 <h3>onMousemove(e, sensitivityNum = 5)</h3>
-<p>小地图鼠标移动事件执行该函数</p>
+<p>小地图鼠标移动事件执行该函数。</p>
 <p><code>e</code>：事件对象</p>
 <p><code>sensitivityNum</code>：拖动灵敏度，灵敏度越大，在小地图上拖动相同距离时实际上的画布拖动距离就越大</p>
 <h3>onMouseup()</h3>
-<p>小地图鼠标松开事件执行该函数</p>
+<p>小地图鼠标松开事件执行该函数。</p>
+<h3>onViewBoxMousedown(e)</h3>
+<blockquote>
+<p>v0.10.2+</p>
+</blockquote>
+<p>视口框元素鼠标按下事件调用该方法。</p>
+<h3>onViewBoxMousemove(e)</h3>
+<blockquote>
+<p>v0.10.2+</p>
+</blockquote>
+<p>视口框元素鼠标移动事件调用该方法。</p>

  </div>
 </template>
--- a/web/src/pages/Doc/zh/outerFrame/index.md
+++ b/web/src/pages/Doc/zh/outerFrame/index.md
@@ -0,0 +1,89 @@
+# OuterFrame 插件
+
+> v0.10.2+
+
+该插件用于实现外框功能。
+
+## 注册
+
+```js
+import MindMap from 'simple-mind-map'
+import OuterFrame from 'simple-mind-map/src/plugins/OuterFrame.js'
+MindMap.usePlugin(OuterFrame)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.outerFrame`获取到该实例。
+
+应用使用可参考Demo该部分的代码：[NodeOuterFrame.vue](https://github.com/wanglin2/mind-map/blob/main/web/src/pages/Edit/components/NodeOuterFrame.vue)。
+
+## 命令
+
+该插件会向思维导图注册`ADD_OUTER_FRAME`命令，用于给节点添加外框：
+
+```js
+mindMap.execCommand('ADD_OUTER_FRAME', appointNodes, config = {})
+```
+
+- `appointNodes`：指定要添加外框的节点实例节点，可以是单个节点实例，也可以是节点实例数组，如果传递`[]`或`null`，则会向画布当前激活的节点添加外框
+
+- `config`：外框配置，对象格式，字段如下：
+
+| 字段名称            | 类型    | 默认值           | 描述         |
+| ------------------ | ------- | --------------- | ------------|
+| radius | Number | 5 | 外框圆角大小 |
+| strokeWidth | Number | 2 | 外框边框宽度 |
+| strokeColor | String | #0984e3 | 外框边框颜色 |
+| strokeDasharray | String | 5,5 | 外框边框虚线 |
+| fill | String | rgba(9,132,227,0.05) | 外框填充颜色 |
+
+## 事件
+
+### outer_frame_active
+
+当点击激活某个外框时触发。回调函数接收三个参数：el（外框元素，@svgdotjs/svg.js库的rect元素）, node（该范围所属节点的父节点实例）, range（范围区间，相对于node）
+
+应用可以监听该事件来获取当前激活的外框，获取到其配置回显到页面，因为范围可能包含多个节点，所以通常取第一个节点实例，如果要获取外框在页面上的位置，可以调用`el.rbox`方法：
+
+```js
+mindMap.on('outer_frame_active', (el, parentNode, range) => {
+    // 取范围内第一个节点的外框样式
+    const firstNode = parentNode.children[range[0]]
+    const firstNodeOuterFrame = firstNode.getData('outerFrame')
+    // 获取外框的位置大小信息，你可以在该位置渲染你的配置浮层
+    const { x, y, width, height } = el.rbox()
+})
+```
+
+### outer_frame_delete
+
+删除画布当前激活的外框时触发。
+
+## 方法
+
+### getActiveOuterFrame()
+
+获取当前激活的外框数据。返回一个对象，结构如下：
+
+```js
+{
+    el,
+    node,
+    range
+}
+```
+
+### updateActiveOuterFrame(config = {})
+
+更新当前激活的外框。执行了该方法后请立即隐藏你的样式面板，因为会清除当前激活的外框。
+
+### removeActiveOuterFrame()
+
+删除当前激活的外框。
+
+### getRangeNodeList(node, range)
+
+获取某个节点指定范围的带外框的子节点列表。
+
+### clearActiveOuterFrame()
+
+清除当前激活的外框。
--- a/web/src/pages/Doc/zh/outerFrame/index.vue
+++ b/web/src/pages/Doc/zh/outerFrame/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <h1>OuterFrame 插件</h1>
+<blockquote>
+<p>v0.10.2+</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> OuterFrame <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/OuterFrame.js&#x27;</span>
+MindMap.usePlugin(OuterFrame)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.outerFrame</code>获取到该实例。</p>
+<p>应用使用可参考Demo该部分的代码：<a href="https://github.com/wanglin2/mind-map/blob/main/web/src/pages/Edit/components/NodeOuterFrame.vue">NodeOuterFrame.vue</a>。</p>
+<h2>命令</h2>
+<p>该插件会向思维导图注册<code>ADD_OUTER_FRAME</code>命令，用于给节点添加外框：</p>
+<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;ADD_OUTER_FRAME&#x27;</span>, appointNodes, config = {})
+</code></pre>
+<ul>
+<li>
+<p><code>appointNodes</code>：指定要添加外框的节点实例节点，可以是单个节点实例，也可以是节点实例数组，如果传递<code>[]</code>或<code>null</code>，则会向画布当前激活的节点添加外框</p>
+</li>
+<li>
+<p><code>config</code>：外框配置，对象格式，字段如下：</p>
+</li>
+</ul>
+<table>
+<thead>
+<tr>
+<th>字段名称</th>
+<th>类型</th>
+<th>默认值</th>
+<th>描述</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>radius</td>
+<td>Number</td>
+<td>5</td>
+<td>外框圆角大小</td>
+</tr>
+<tr>
+<td>strokeWidth</td>
+<td>Number</td>
+<td>2</td>
+<td>外框边框宽度</td>
+</tr>
+<tr>
+<td>strokeColor</td>
+<td>String</td>
+<td>#0984e3</td>
+<td>外框边框颜色</td>
+</tr>
+<tr>
+<td>strokeDasharray</td>
+<td>String</td>
+<td>5,5</td>
+<td>外框边框虚线</td>
+</tr>
+<tr>
+<td>fill</td>
+<td>String</td>
+<td>rgba(9,132,227,0.05)</td>
+<td>外框填充颜色</td>
+</tr>
+</tbody>
+</table>
+<h2>事件</h2>
+<h3>outer_frame_active</h3>
+<p>当点击激活某个外框时触发。回调函数接收三个参数：el（外框元素，@svgdotjs/svg.js库的rect元素）, node（该范围所属节点的父节点实例）, range（范围区间，相对于node）</p>
+<p>应用可以监听该事件来获取当前激活的外框，获取到其配置回显到页面，因为范围可能包含多个节点，所以通常取第一个节点实例，如果要获取外框在页面上的位置，可以调用<code>el.rbox</code>方法：</p>
+<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;outer_frame_active&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">el, parentNode, range</span>) =&gt;</span> {
+    <span class="hljs-comment">// 取范围内第一个节点的外框样式</span>
+    <span class="hljs-keyword">const</span> firstNode = parentNode.children[range[<span class="hljs-number">0</span>]]
+    <span class="hljs-keyword">const</span> firstNodeOuterFrame = firstNode.getData(<span class="hljs-string">&#x27;outerFrame&#x27;</span>)
+    <span class="hljs-comment">// 获取外框的位置大小信息，你可以在该位置渲染你的配置浮层</span>
+    <span class="hljs-keyword">const</span> { x, y, width, height } = el.rbox()
+})
+</code></pre>
+<h3>outer_frame_delete</h3>
+<p>删除画布当前激活的外框时触发。</p>
+<h2>方法</h2>
+<h3>getActiveOuterFrame()</h3>
+<p>获取当前激活的外框数据。返回一个对象，结构如下：</p>
+<pre class="hljs"><code>{
+    el,
+    node,
+    range
+}
+</code></pre>
+<h3>updateActiveOuterFrame(config = {})</h3>
+<p>更新当前激活的外框。执行了该方法后请立即隐藏你的样式面板，因为会清除当前激活的外框。</p>
+<h3>removeActiveOuterFrame()</h3>
+<p>删除当前激活的外框。</p>
+<h3>getRangeNodeList(node, range)</h3>
+<p>获取某个节点指定范围的带外框的子节点列表。</p>
+<h3>clearActiveOuterFrame()</h3>
+<p>清除当前激活的外框。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@@ -104,7 +104,11 @@ copyRenderTree({}, this.mindMap.renderer.renderTree)
 copyNodeTree({}, node)
 ```

-#### imgToDataUrl(src)
+#### imgToDataUrl(src, returnBlob = false)
+
+- `src`：图片url
+
+- `returnBlob`：v0.10.2+，是否以Blob格式返回结果，默认为DataURL格式

 图片转成 dataURL

--- a/web/src/pages/Doc/zh/utils/index.vue
+++ b/web/src/pages/Doc/zh/utils/index.vue
@@ -69,7 +69,15 @@
 <p>复制节点树数据，主要是剔除其中的引用<code>node</code>实例的<code>_node</code>，然后复制<code>data</code>对象的数据，示例：</p>
 <pre class="hljs"><code>copyNodeTree({}, node)
 </code></pre>
-<h4>imgToDataUrl(src)</h4>
+<h4>imgToDataUrl(src, returnBlob = false)</h4>
+<ul>
+<li>
+<p><code>src</code>：图片url</p>
+</li>
+<li>
+<p><code>returnBlob</code>：v0.10.2+，是否以Blob格式返回结果，默认为DataURL格式</p>
+</li>
+</ul>
 <p>图片转成 dataURL</p>
 <h4>downloadFile(file, fileName)</h4>
 <p>下载文件</p>