openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Demo：更新文档，去除默认适应画布大小

Browse Source
This commit is contained in:
wanglin2 2023-09-18 09:13:24 +08:00
parent 43216ed925
commit e61749c1b3
5 changed files with 2187 additions and 2348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/pages/Doc/en/constructor/index.md
View File

@ -89,6 +89,7 @@ const mindMap = new MindMap({
| selectTextOnEnterEditText（v0.7.0+） | Boolean | true | Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node | | | selectTextOnEnterEditText（v0.7.0+） | Boolean | true | Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node | |
| deleteNodeActive（v0.7.1+） | Boolean | true | Enable the function of automatically activating adjacent nodes or parent nodes after deleting nodes | | | deleteNodeActive（v0.7.1+） | Boolean | true | Enable the function of automatically activating adjacent nodes or parent nodes after deleting nodes | |
| autoMoveWhenMouseInEdgeOnDrag（v0.7.1+） | Boolean | true | Whether to enable automatic canvas movement when the mouse moves to the edge of the canvas while dragging nodes | | | autoMoveWhenMouseInEdgeOnDrag（v0.7.1+） | Boolean | true | Whether to enable automatic canvas movement when the mouse moves to the edge of the canvas while dragging nodes | |
| fit（v0.7.2+） | Boolean | false | Is the first rendering scaled to fit the canvas size | |
### Data structure ### Data structure

279
web/src/pages/Doc/en/constructor/index.vue
View File

@ -46,9 +46,7 @@
<td>layout</td> <td>layout</td>
<td>String</td> <td>String</td>
<td>logicalStructure</td> <td>logicalStructure</td>
<td>Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization <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>
(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> <td></td>
</tr> </tr>
<tr> <tr>
@ -62,20 +60,14 @@
<td>theme</td> <td>theme</td>
<td>String</td> <td>String</td>
<td>default</td> <td>default</td>
<td>Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, <td>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+)</td>
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+)</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>themeConfig</td> <td>themeConfig</td>
<td>Object</td> <td>Object</td>
<td>{}</td> <td>{}</td>
<td>Theme configuration, will be merged with the selected theme, available fields refer to: <a <td>Theme configuration, will be merged with the selected theme, available fields refer to: <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">default.js</a></td>
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">default.js</a>
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -131,8 +123,7 @@
<td>customNoteContentShow（v0.1.6+）</td> <td>customNoteContentShow（v0.1.6+）</td>
<td>Object</td> <td>Object</td>
<td>null</td> <td>null</td>
<td>Custom node note content display, object type, structure: {show: (noteContent, left, top) =&gt; {// your <td>Custom node note content display, object type, structure: {show: (noteContent, left, top) =&gt; {// your display node note logic }, hide: () =&gt; {// your hide node note logic }}</td>
display node note logic }, hide: () =&gt; {// your hide node note logic }}</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -167,32 +158,28 @@
<td>customHandleMousewheel（v0.4.3+）</td> <td>customHandleMousewheel（v0.4.3+）</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>User-defined mouse wheel event processing can pass a function, and the callback parameter is the event <td>User-defined mouse wheel event processing can pass a function, and the callback parameter is the event object</td>
object</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>mousewheelAction（v0.4.3+）</td> <td>mousewheelAction（v0.4.3+）</td>
<td>String</td> <td>String</td>
<td>zoom</td> <td>zoom</td>
<td>The behavior of the mouse wheel, <code>zoom</code>(Zoom in and out)、<code>move</code>(Move up and down). If <td>The behavior of the mouse wheel, <code>zoom</code>(Zoom in and out)、<code>move</code>(Move up and down). If <code>customHandleMousewheel</code> passes a custom function, this property will not take effect</td>
<code>customHandleMousewheel</code> passes a custom function, this property will not take effect</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>mousewheelMoveStep（v0.4.3+）</td> <td>mousewheelMoveStep（v0.4.3+）</td>
<td>Number</td> <td>Number</td>
<td>100</td> <td>100</td>
<td>When the <code>mousewheelAction</code> is set to <code>move</code>, you can use this attribute to control <td>When the <code>mousewheelAction</code> is set to <code>move</code>, you can use this attribute to control the step length of the view movement when the mouse scrolls. The unit is <code>px</code></td>
the step length of the view movement when the mouse scrolls. The unit is <code>px</code></td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>mousewheelZoomActionReverse（v0.6.5+）</td> <td>mousewheelZoomActionReverse（v0.6.5+）</td>
<td>Boolean</td> <td>Boolean</td>
<td>false</td> <td>false</td>
<td>When <code>mousewheelAction</code> is set to <code>zoom</code>, the default scrolling forward is to zoom <td>When <code>mousewheelAction</code> is set to <code>zoom</code>, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed</td>
out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -213,8 +200,7 @@
<td>expandBtnStyle（v0.5.0+）</td> <td>expandBtnStyle（v0.5.0+）</td>
<td>Object</td> <td>Object</td>
<td>{ color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' }</td> <td>{ color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' }</td>
<td>Expand the color of the stow button, (The fontSize and strokeColor fields were added in version 0.7.0+to set <td>Expand the color of the stow button, (The fontSize and strokeColor fields were added in version 0.7.0+to set the text style for displaying the number of nodes when folded)</td>
the text style for displaying the number of nodes when folded)</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -228,9 +214,7 @@
<td>expandBtnNumHandler（v0.7.0+）</td> <td>expandBtnNumHandler（v0.7.0+）</td>
<td>Function</td> <td>Function</td>
<td></td> <td></td>
<td>Used to customize the content of displaying the number of nodes when folding, receiving a parameter that <td>Used to customize the content of displaying the number of nodes when folding, receiving a parameter that represents the instance of the folding node, and returning a number or string that represents the final displayed content. For example, when the number is greater than 99, 99 can be displayed+</td>
represents the instance of the folding node, and returning a number or string that represents the final
displayed content. For example, when the number is greater than 99, 99 can be displayed+</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -258,21 +242,14 @@
<td>nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature）</td> <td>nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature）</td>
<td>Number</td> <td>Number</td>
<td>300</td> <td>300</td>
<td>If node animation transition is enabled, the transition time can be set using this attribute, in <td>If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds</td>
milliseconds</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>initRootNodePosition（v0.5.3+）</td> <td>initRootNodePosition（v0.5.3+）</td>
<td>Array</td> <td>Array</td>
<td>null</td> <td>null</td>
<td>The position of the initial root node can be passed as an array, default is <td>The position of the initial root node can be passed as an array, default is <code>['center', 'center']</code>, Represents the root node at the center of the canvas, In addition to <code>center</code>, keywords can also be set to <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as <code>['40%', '60%']</code>, Represents a horizontal position at <code>40%</code> of the canvas width, and a vertical position at <code>60%</code> of the canvas height</td>
<code>['center', 'center']</code>, Represents the root node at the center of the canvas, In addition to
<code>center</code>, keywords can also be set to <code>left</code>, <code>top</code>, <code>right</code>, and
<code>bottom</code>, In addition to passing keywords, each item in the array can also pass a number
representing a specific pixel, Can pass a percentage string, such as <code>['40%', '60%']</code>, Represents a
horizontal position at <code>40%</code> of the canvas width, and a vertical position at <code>60%</code> of
the canvas height</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -321,24 +298,21 @@
<td>alwaysShowExpandBtn（v0.5.8+）</td> <td>alwaysShowExpandBtn（v0.5.8+）</td>
<td>Boolean</td> <td>Boolean</td>
<td>false</td> <td>false</td>
<td>Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse <td>Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse is moved up and activated by default</td>
is moved up and activated by default</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>iconList（v0.5.8+）</td> <td>iconList（v0.5.8+）</td>
<td>Array</td> <td>Array</td>
<td>[]</td> <td>[]</td>
<td>The icons that can be inserted into the extension node, and each item in the array is an object. Please <td>The icons that can be inserted into the extension node, and each item in the array is an object. Please refer to the &quot;Icon Configuration&quot; table below for the detailed structure of the object</td>
refer to the &quot;Icon Configuration&quot; table below for the detailed structure of the object</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>maxNodeCacheCount（v0.5.10+）</td> <td>maxNodeCacheCount（v0.5.10+）</td>
<td>Number</td> <td>Number</td>
<td>1000</td> <td>1000</td>
<td>The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to <td>The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool</td>
reuse nodes. This attribute allows you to specify the maximum number of caches in the pool</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -373,9 +347,7 @@
<td>beforeTextEdit（v0.6.0+）</td> <td>beforeTextEdit（v0.6.0+）</td>
<td>Function/null</td> <td>Function/null</td>
<td>null</td> <td>null</td>
<td>The callback method before the node is about to enter editing. If the method returns a value other than <td>The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance</td>
true, the editing will be canceled. The function can return a value or a promise, and the callback parameter
is the node instance</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -389,28 +361,21 @@
<td>customCreateNodeContent（v0.6.3+）</td> <td>customCreateNodeContent（v0.6.3+）</td>
<td>Function/null</td> <td>Function/null</td>
<td>null</td> <td>null</td>
<td>If <code>isUseCustomNodeContent</code> is set to <code>true</code>, then this option needs to be used to <td>If <code>isUseCustomNodeContent</code> is set to <code>true</code>, then this option needs to be used to pass in a method that receives the node instance <code>node</code> as a parameter (if you want to obtain data for that node, you can use <code>node.nodeData.data</code>). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return <code>null</code></td>
pass in a method that receives the node instance <code>node</code> as a parameter (if you want to obtain data
for that node, you can use <code>node.nodeData.data</code>). You need to return the custom node content
element, which is the DOM node. If a node does not require customization, you can return <code>null</code>
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）</td> <td>mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）</td>
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td>Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas <td>Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas</td>
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>customInnerElsAppendTo（v0.6.12+）</td> <td>customInnerElsAppendTo（v0.6.12+）</td>
<td>null/HTMLElement</td> <td>null/HTMLElement</td>
<td>null</td> <td>null</td>
<td>Specify the location where some internal elements (node text editing element, node note display element, <td>Specify the location where some internal elements (node text editing element, node note display element, associated line text editing element, node image adjustment button element) are added, and default to document.body</td>
associated line text editing element, node image adjustment button element) are added, and default to
document.body</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -424,48 +389,35 @@
<td>enableCreateHiddenInput（v0.6.13+）（v0.6.14+ remove this feature）</td> <td>enableCreateHiddenInput（v0.6.13+）（v0.6.14+ remove this feature）</td>
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td>Is it allowed to create a hidden input box that will be focused when the node is activated for pasting data <td>Is it allowed to create a hidden input box that will be focused when the node is activated for pasting data and automatically entering the text editing state</td>
and automatically entering the text editing state</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>enableAutoEnterTextEditWhenKeydown（v0.6.13+）</td> <td>enableAutoEnterTextEditWhenKeydown（v0.6.13+）</td>
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td>Does it automatically enter text editing mode when pressing the Chinese, English, or numeric buttons when <td>Does it automatically enter text editing mode when pressing the Chinese, English, or numeric buttons when there is an activation node?</td>
there is an activation node?</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>richTextEditFakeInPlace（v0.6.13+）</td> <td>richTextEditFakeInPlace（v0.6.13+）</td>
<td>Boolean</td> <td>Boolean</td>
<td>false</td> <td>false</td>
<td>Set the rich text node edit box to match the size of the node, creating a pseudo in place editing effect. It <td>Set the rich text node edit box to match the size of the node, creating a pseudo in place editing effect. It should be noted that only when there is only text within the node and the shape is rectangular, can the effect be better</td>
should be noted that only when there is only text within the node and the shape is rectangular, can the effect
be better</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>customHandleClipboardText（v0.6.14+）</td> <td>customHandleClipboardText（v0.6.14+）</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Customize the processing of clipboard text. When pressing ctrl+v to paste, it will read the text and images <td>Customize the processing of clipboard text. When pressing ctrl+v to paste, it will read the text and images from the user's clipboard. By default, it will only determine whether the text is regular text and node data in simple mind map format. If you want to process data from other mind maps, such as process, zhixi, etc., you can pass a function that takes the text from the current clipboard as a parameter and returns the processed data, which can be of two types: 1.If a pure text is returned, a child node will be directly created with that text; 2.Returns a node object in the following format: { simpleMindMap: true, data: { data: { text: '' }, children: [] } }, The representative is data in simple bind map format, and the node data is in the same format as the simple bind map node data. If your processing logic has asynchronous logic, you can also return a promise</td>
from the user's clipboard. By default, it will only determine whether the text is regular text and node data
in simple mind map format. If you want to process data from other mind maps, such as process, zhixi, etc., you
can pass a function that takes the text from the current clipboard as a parameter and returns the processed
data, which can be of two types: 1.If a pure text is returned, a child node will be directly created with that
text; 2.Returns a node object in the following format: { simpleMindMap: true, data: { data: { text: '' },
children: [] } }, The representative is data in simple bind map format, and the node data is in the same
format as the simple bind map node data. If your processing logic has asynchronous logic, you can also return
a promise</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>errorHandler（v0.6.15+）</td> <td>errorHandler（v0.6.15+）</td>
<td>Function</td> <td>Function</td>
<td></td> <td></td>
<td>Custom error handling functions currently only throw some asynchronous logic errors. Can pass a function <td>Custom error handling functions currently only throw some asynchronous logic errors. Can pass a function that takes two parameters, the first being the wrong type and the second being the wrong object</td>
that takes two parameters, the first being the wrong type and the second being the wrong object</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -479,8 +431,7 @@
<td>resetCss（v0.6.16+）</td> <td>resetCss（v0.6.16+）</td>
<td>String</td> <td>String</td>
<td>* { margin: 0; padding: 0; box-sizing: border-box; }</td> <td>* { margin: 0; padding: 0; box-sizing: border-box; }</td>
<td>When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in <td>When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset</td>
HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -494,32 +445,28 @@
<td>minExportImgCanvasScale（v0.7.0+）</td> <td>minExportImgCanvasScale（v0.7.0+）</td>
<td>Number</td> <td>Number</td>
<td>2</td> <td>2</td>
<td>The scaling factor of canvas when exporting images and PDFs, which is set to the maximum value of <td>The scaling factor of canvas when exporting images and PDFs, which is set to the maximum value of window.devicePixelRatio to improve image clarity</td>
window.devicePixelRatio to improve image clarity</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>hoverRectColor（v0.7.0+）</td> <td>hoverRectColor（v0.7.0+）</td>
<td>String</td> <td>String</td>
<td>rgb(94, 200, 248)</td> <td>rgb(94, 200, 248)</td>
<td>The node mouse hover and the rectangular border color displayed when activated will add a transparency of <td>The node mouse hover and the rectangular border color displayed when activated will add a transparency of 0.6 when hovering</td>
0.6 when hovering</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>hoverRectPadding（v0.7.0+）</td> <td>hoverRectPadding（v0.7.0+）</td>
<td>Number</td> <td>Number</td>
<td>2</td> <td>2</td>
<td>The distance between the node mouse hover and the displayed rectangular border when activated and the node <td>The distance between the node mouse hover and the displayed rectangular border when activated and the node content</td>
content</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>selectTextOnEnterEditText（v0.7.0+）</td> <td>selectTextOnEnterEditText（v0.7.0+）</td>
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td>Is the text selected by default when double-clicking a node to enter node text editing? By default, it will <td>Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node</td>
only be selected when creating a new node</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -533,15 +480,14 @@
<td>autoMoveWhenMouseInEdgeOnDrag（v0.7.1+）</td> <td>autoMoveWhenMouseInEdgeOnDrag（v0.7.1+）</td>
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td>Whether to enable automatic canvas movement when the mouse moves to the edge of the canvas while dragging <td>Whether to enable automatic canvas movement when the mouse moves to the edge of the canvas while dragging nodes</td>
nodes</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>fit</td> <td>fit（v0.7.2+）</td>
<td>Boolean</td> <td>Boolean</td>
<td>false</td> <td>false</td>
<td>Whether to fit view at first render</td> <td>Is the first rendering scaled to fit the canvas size</td>
<td></td> <td></td>
</tr> </tr>
</tbody> </tbody>
@ -581,9 +527,7 @@
] ]
} }
</code></pre> </code></pre>
<p>If you want to add custom fields, you can add them to the same level as 'data' and 'children'. If you want to add <p>If you want to add custom fields, you can add them to the same level as 'data' and 'children'. If you want to add them to the 'data' object, please use the <code>_</code> Name your custom field at the beginning, and it will be used internally to determine whether it is a custom field.</p>
them to the 'data' object, please use the <code>_</code> Name your custom field at the beginning, and it will be
used internally to determine whether it is a custom field.</p>
<h3>Watermark config</h3> <h3>Watermark config</h3>
<table> <table>
<thead> <thead>
@ -654,11 +598,7 @@
<td>list</td> <td>list</td>
<td>Array</td> <td>Array</td>
<td></td> <td></td>
<td>A list of icons under grouping, with each item in the array being an object, <td>A list of icons under grouping, with each item in the array being an object, <code>{ name: '', icon: '' }</code>，<code>name</code>represents the name of the icon, <code>icon</code>represents the icon, Can be an <code>svg</code> icon, such as <code>&lt;svg ...&gt;&lt;path&gt;&lt;/path&gt;&lt;/svg&gt;</code>, also can be a image <code>url</code>, or <code>base64</code> icon, such as <code>data:image/png;base64,...</code></td>
<code>{ name: '', icon: '' }</code>，<code>name</code>represents the name of the icon,
<code>icon</code>represents the icon, Can be an <code>svg</code> icon, such as
<code>&lt;svg ...&gt;&lt;path&gt;&lt;/path&gt;&lt;/svg&gt;</code>, also can be a image <code>url</code>, or
<code>base64</code> icon, such as <code>data:image/png;base64,...</code></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -670,9 +610,7 @@
<p>Define new theme.</p> <p>Define new theme.</p>
<p><code>name</code>：New theme name</p> <p><code>name</code>：New theme name</p>
<p><code>config</code>：New theme config</p> <p><code>config</code>：New theme config</p>
<p><code>Simple-mind-map </code> Built-in many themes. In addition, you can register new theme. It is recommended to <p><code>Simple-mind-map </code> Built-in many themes. In addition, you can register new theme. It is recommended to register before instantiation, so that you can directly use the newly registered theme during instantiation. Use example:</p>
register before instantiation, so that you can directly use the newly registered theme during instantiation. Use
example:</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> <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-comment">// 注册新主题</span> <span class="hljs-comment">// 注册新主题</span>
MindMap.defineTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>, {}) MindMap.defineTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>, {})
@ -685,28 +623,21 @@ MindMap.defineTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>, {})
<span class="hljs-comment">// 2.动态切换新主题</span> <span class="hljs-comment">// 2.动态切换新主题</span>
mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>) mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
</code></pre> </code></pre>
<p>For all configurations of theme, please refer to <a <p>For all configurations of theme, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">Default Topic</a>. The <code>defineTheme</code>method will merge the configuration you passed in with the default configuration. Most of the themes do not need custom many parts. For a typical customized theme configuration, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>.</p>
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">Default Topic</a>. The
<code>defineTheme</code>method will merge the configuration you passed in with the default configuration. Most of
the themes do not need custom many parts. For a typical customized theme configuration, please refer to <a
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>.</p>
<h3>usePlugin(plugin, opt = {})</h3> <h3>usePlugin(plugin, opt = {})</h3>
<blockquote> <blockquote>
<p>v0.3.0+</p> <p>v0.3.0+</p>
</blockquote> </blockquote>
<ul> <ul>
<li><code>opt</code>：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this <li><code>opt</code>：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter.</li>
parameter.</li>
</ul> </ul>
<p>If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this <p>If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.</p>
method. Can be called in chain.</p>
<p>Note: The plugin needs to be registered before instantiating <code>MindMap</code>.</p> <p>Note: The plugin needs to be registered before instantiating <code>MindMap</code>.</p>
<h3>hasPlugin(plugin)</h3> <h3>hasPlugin(plugin)</h3>
<blockquote> <blockquote>
<p>v0.4.0+</p> <p>v0.4.0+</p>
</blockquote> </blockquote>
<p>Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is <p>Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is <code>-1</code>, it means that the plugin is not registered.</p>
<code>-1</code>, it means that the plugin is not registered.</p>
<h2>Static props</h2> <h2>Static props</h2>
<h3>pluginList</h3> <h3>pluginList</h3>
<blockquote> <blockquote>
@ -718,8 +649,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<blockquote> <blockquote>
<p>v0.6.0+</p> <p>v0.6.0+</p>
</blockquote> </blockquote>
<p>Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas. <p>Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.</p>
</p>
<h3>getSvgData({ paddingX = 0, paddingY = 0 })</h3> <h3>getSvgData({ paddingX = 0, paddingY = 0 })</h3>
<blockquote> <blockquote>
<p>v0.3.0+</p> <p>v0.3.0+</p>
@ -739,15 +669,13 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
</code></pre> </code></pre>
<h3>render(callback)</h3> <h3>render(callback)</h3>
<ul> <ul>
<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete <li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
</li>
</ul> </ul>
<p>Triggers a full rendering, which will reuse nodes for better performance. If <p>Triggers a full rendering, which will reuse nodes for better performance. If
only the node positions have changed, this method can be called to <code>reRender</code>.</p> only the node positions have changed, this method can be called to <code>reRender</code>.</p>
<h3>reRender(callback)</h3> <h3>reRender(callback)</h3>
<ul> <ul>
<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete <li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
</li>
</ul> </ul>
<p>Performs a full re-render, clearing the canvas and creating new nodes. This has <p>Performs a full re-render, clearing the canvas and creating new nodes. This has
poor performance and should be used sparingly.</p> poor performance and should be used sparingly.</p>
@ -783,8 +711,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<tr> <tr>
<td>back_forward</td> <td>back_forward</td>
<td>Forward or backward</td> <td>Forward or backward</td>
<td>activeHistoryIndex (current index in the history data array), length (current length of the history data <td>activeHistoryIndex (current index in the history data array), length (current length of the history data array)</td>
array)</td>
</tr> </tr>
<tr> <tr>
<td>draw_click</td> <td>draw_click</td>
@ -819,8 +746,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<tr> <tr>
<td>mousewheel</td> <td>mousewheel</td>
<td>Mouse scroll event</td> <td>Mouse scroll event</td>
<td>e (event object), dir (up or down scroll), this (Event event class instance) 、isTouchPad（v0.6.1+, Is it an <td>e (event object), dir (up or down scroll), this (Event event class instance) 、isTouchPad（v0.6.1+, Is it an event triggered by the touchpad）</td>
event triggered by the touchpad）</td>
</tr> </tr>
<tr> <tr>
<td>contextmenu</td> <td>contextmenu</td>
@ -924,17 +850,12 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
</tr> </tr>
<tr> <tr>
<td>rich_text_selection_change（v0.4.0+）</td> <td>rich_text_selection_change（v0.4.0+）</td>
<td>Available when the <code>RichText</code> plugin is registered. Triggered when the text selection area <td>Available when the <code>RichText</code> plugin is registered. Triggered when the text selection area changes when the node is edited</td>
changes when the node is edited</td> <td>hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area）</td>
<td>hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected
area）、formatInfo（Text formatting information of the selected area）</td>
</tr> </tr>
<tr> <tr>
<td>transforming-dom-to-images（v0.4.0+）</td> <td>transforming-dom-to-images（v0.4.0+）</td>
<td>Available when the <code>RichText</code> plugin is registered. When there is a <code>DOM</code> node in <td>Available when the <code>RichText</code> plugin is registered. When there is a <code>DOM</code> node in <code>svg</code>, the <code>DOM</code> node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting</td>
<code>svg</code>, the <code>DOM</code> node will be converted to an image when exporting to an image. This
event will be triggered during the conversion process. You can use this event to prompt the user about the
node to which you are currently converting</td>
<td>index（Index of the node currently converted to）、len（Total number of nodes to be converted）</td> <td>index（Index of the node currently converted to）、len（Total number of nodes to be converted）</td>
</tr> </tr>
<tr> <tr>
@ -945,10 +866,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<tr> <tr>
<td>node_dragend（v0.4.5+）</td> <td>node_dragend（v0.4.5+）</td>
<td>Triggered when the node is dragged and ends</td> <td>Triggered when the node is dragged and ends</td>
<td>{ overlapNodeUid, prevNodeUid, nextNodeUid }（v0.6.12+，The node uid to which the node is moved this time, for <td>{ overlapNodeUid, prevNodeUid, nextNodeUid }（v0.6.12+，The node uid to which the node is moved this time, for example, if it is moved to node A, then the overlayNodeUid is the uid of node A. If it is moved to the front of node B, then the nextNodeUid is the uid of node B. You can obtain the node instance through the mindMap. extender.findNodeByUid(uid) method）</td>
example, if it is moved to node A, then the overlayNodeUid is the uid of node A. If it is moved to the front
of node B, then the nextNodeUid is the uid of node B. You can obtain the node instance through the mindMap.
extender.findNodeByUid(uid) method）</td>
</tr> </tr>
<tr> <tr>
<td>associative_line_click（v0.4.5+）</td> <td>associative_line_click（v0.4.5+）</td>
@ -996,22 +914,19 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<blockquote> <blockquote>
<p>0.2.24+</p> <p>0.2.24+</p>
</blockquote> </blockquote>
<p><code>prop</code>：Get the value of the specified configuration, and return the entire configuration if not passed <p><code>prop</code>：Get the value of the specified configuration, and return the entire configuration if not passed</p>
</p>
<p>Get config, That is, <code>opt</code> of <code>new MindMap (opt)</code></p> <p>Get config, That is, <code>opt</code> of <code>new MindMap (opt)</code></p>
<h3>updateConfig(<em>opt</em> = {})</h3> <h3>updateConfig(<em>opt</em> = {})</h3>
<blockquote> <blockquote>
<p>0.2.24+</p> <p>0.2.24+</p>
</blockquote> </blockquote>
<p><code>opt</code>：Configuration to update</p> <p><code>opt</code>：Configuration to update</p>
<p>Update config，That is update <code>opt</code> of <code>new MindMap(opt)</code>，You can only update some data, such <p>Update config，That is update <code>opt</code> of <code>new MindMap(opt)</code>，You can only update some data, such as:</p>
as:</p>
<pre class="hljs"><code>mindMap.updateConfig({ <pre class="hljs"><code>mindMap.updateConfig({
<span class="hljs-attr">enableFreeDrag</span>: <span class="hljs-literal">true</span><span class="hljs-comment">// 开启节点自由拖拽</span> <span class="hljs-attr">enableFreeDrag</span>: <span class="hljs-literal">true</span><span class="hljs-comment">// 开启节点自由拖拽</span>
}) })
</code></pre> </code></pre>
<p>This method only updates the configuration and has no other side effects, such as triggering canvas re-rendering <p>This method only updates the configuration and has no other side effects, such as triggering canvas re-rendering</p>
</p>
<h3>getLayout()</h3> <h3>getLayout()</h3>
<p>Gets the current layout structure.</p> <p>Gets the current layout structure.</p>
<h3>setLayout(layout)</h3> <h3>setLayout(layout)</h3>
@ -1046,36 +961,22 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
</tr> </tr>
<tr> <tr>
<td>INSERT_NODE</td> <td>INSERT_NODE</td>
<td>Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple <td>Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple active nodes, only the first one will be effective</td>
active nodes, only the first one will be effective</td> <td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is <code>true</code>） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a> ）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type）</td>
<td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is
<code>true</code>） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an
array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...},
Detailed structure can be referred to <a
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>
）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type）</td>
</tr> </tr>
<tr> <tr>
<td>INSERT_CHILD_NODE</td> <td>INSERT_CHILD_NODE</td>
<td>Insert a child node, the active node or appoint node will be the operation node</td> <td>Insert a child node, the active node or appoint node will be the operation node</td>
<td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is <td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is <code>true</code>）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a> ）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type）</td>
<code>true</code>）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an
array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...},
Detailed structure can be referred to <a
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>
）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type）</td>
</tr> </tr>
<tr> <tr>
<td>UP_NODE</td> <td>UP_NODE</td>
<td>Move node up, the active node will be the operation node. If there are multiple active nodes, only the first <td>Move node up, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the first node in the list will be invalid</td>
one will be effective. Using this command on the root node or the first node in the list will be invalid</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>DOWN_NODE</td> <td>DOWN_NODE</td>
<td>Move node down, the active node will be the operation node. If there are multiple active nodes, only the <td>Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid</td>
first one will be effective. Using this command on the root node or the last node in the list will be invalid
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -1086,20 +987,17 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<tr> <tr>
<td>PASTE_NODE</td> <td>PASTE_NODE</td>
<td>Paste node to a node, the active node will be the operation node</td> <td>Paste node to a node, the active node will be the operation node</td>
<td>data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() <td>data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods)</td>
methods)</td>
</tr> </tr>
<tr> <tr>
<td>SET_NODE_STYLE</td> <td>SET_NODE_STYLE</td>
<td>Modify node single style</td> <td>Modify node single style</td>
<td>node (the node to set the style of), prop (style property), value (style property value), isActive <td>node (the node to set the style of), prop (style property), value (style property value), isActive (v0.7.0+has been abandoned, boolean, whether the style being set is for the active state)</td>
(v0.7.0+has been abandoned, boolean, whether the style being set is for the active state)</td>
</tr> </tr>
<tr> <tr>
<td>SET_NODE_STYLEs（v0.6.12+）</td> <td>SET_NODE_STYLEs（v0.6.12+）</td>
<td>Modify multiple styles of nodes</td> <td>Modify multiple styles of nodes</td>
<td>node（the node to set the style of）、style（Style object，key is style prop，value is style <td>node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（v0.7.0+has been abandoned, boolean, whether the style being set is for the active state）</td>
value）、isActive（v0.7.0+has been abandoned, boolean, whether the style being set is for the active state）</td>
</tr> </tr>
<tr> <tr>
<td>SET_NODE_ACTIVE</td> <td>SET_NODE_ACTIVE</td>
@ -1139,23 +1037,17 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<tr> <tr>
<td>SET_NODE_TEXT</td> <td>SET_NODE_TEXT</td>
<td>Set node text</td> <td>Set node text</td>
<td>node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text <td>node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to <code>true</code>）、resetRichText（v0.6.10+Do you want to reset rich text? The default is false. If true is passed, the style of the rich text node will be reset）</td>
character, you need to set it to <code>true</code>）、resetRichText（v0.6.10+Do you want to reset rich text? The
default is false. If true is passed, the style of the rich text node will be reset）</td>
</tr> </tr>
<tr> <tr>
<td>SET_NODE_IMAGE</td> <td>SET_NODE_IMAGE</td>
<td>Set Node Image</td> <td>Set Node Image</td>
<td>node (node to set), imgData (object, image information, structured as: <td>node (node to set), imgData (object, image information, structured as: <code>{url, title, width, height}</code>, the width and height of the image must be passed)</td>
<code>{url, title, width, height}</code>, the width and height of the image must be passed)</td>
</tr> </tr>
<tr> <tr>
<td>SET_NODE_ICON</td> <td>SET_NODE_ICON</td>
<td>Set Node Icon</td> <td>Set Node Icon</td>
<td>node (node to set), icons (array, predefined image names array, available icons can be obtained in the <td>node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a> file, icon name is type_name, such as ['priority_1'])</td>
nodeIconList list in the <a
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a> file,
icon name is type_name, such as ['priority_1'])</td>
</tr> </tr>
<tr> <tr>
<td>SET_NODE_HYPERLINK</td> <td>SET_NODE_HYPERLINK</td>
@ -1170,9 +1062,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<tr> <tr>
<td>SET_NODE_TAG</td> <td>SET_NODE_TAG</td>
<td>Set Node Tag</td> <td>Set Node Tag</td>
<td>node (node to set), tag (string array, built-in color information can be obtained in <a <td>node (node to set), tag (string array, built-in color information can be obtained in <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>)</td>
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>)
</td>
</tr> </tr>
<tr> <tr>
<td>INSERT_AFTER (v0.1.5+)</td> <td>INSERT_AFTER (v0.1.5+)</td>
@ -1192,8 +1082,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<tr> <tr>
<td>ADD_GENERALIZATION (v0.2.0+)</td> <td>ADD_GENERALIZATION (v0.2.0+)</td>
<td>Add a node summary</td> <td>Add a node summary</td>
<td>data (the data for the summary, in object format, all numerical fields of the node are supported, default is <td>data (the data for the summary, in object format, all numerical fields of the node are supported, default is <code>{text: 'summary'}</code>)</td>
<code>{text: 'summary'}</code>)</td>
</tr> </tr>
<tr> <tr>
<td>REMOVE_GENERALIZATION (v0.2.0+)</td> <td>REMOVE_GENERALIZATION (v0.2.0+)</td>
@ -1203,8 +1092,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<tr> <tr>
<td>SET_NODE_CUSTOM_POSITION (v0.2.0+)</td> <td>SET_NODE_CUSTOM_POSITION (v0.2.0+)</td>
<td>Set a custom position for a node</td> <td>Set a custom position for a node</td>
<td>node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default <td>node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined)</td>
is undefined)</td>
</tr> </tr>
<tr> <tr>
<td>RESET_LAYOUT (v0.2.0+)</td> <td>RESET_LAYOUT (v0.2.0+)</td>
@ -1214,15 +1102,12 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<tr> <tr>
<td>SET_NODE_SHAPE (v0.2.4+)</td> <td>SET_NODE_SHAPE (v0.2.4+)</td>
<td>Set the shape of a node</td> <td>Set the shape of a node</td>
<td>node (the node to set), shape (the shape, all shapes: <a <td>node (the node to set), shape (the shape, all shapes: <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js">Shape.js</a>)</td>
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js">Shape.js</a>)
</td>
</tr> </tr>
<tr> <tr>
<td>GO_TARGET_NODE（v0.6.7+）</td> <td>GO_TARGET_NODE（v0.6.7+）</td>
<td>Navigate to a node, and if the node is collapsed, it will automatically expand to that node</td> <td>Navigate to a node, and if the node is collapsed, it will automatically expand to that node</td>
<td>node（Node instance or node uid to locate）、callback（v0.6.9+, Callback function after positioning completion） <td>node（Node instance or node uid to locate）、callback（v0.6.9+, Callback function after positioning completion）</td>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -1235,9 +1120,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
</blockquote> </blockquote>
<p>Dynamic setting of mind map data, including node data, layout, theme, view</p> <p>Dynamic setting of mind map data, including node data, layout, theme, view</p>
<p><code>data</code>: complete data, structure can refer to <p><code>data</code>: complete data, structure can refer to
<a <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a></p>
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a>
</p>
<h3>getData(withConfig)</h3> <h3>getData(withConfig)</h3>
<blockquote> <blockquote>
<p>v0.2.9+</p> <p>v0.2.9+</p>
@ -1254,19 +1137,15 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<p><code>type</code>: the type to be exported, optional values: png, svg, json, pdf (v0.2.1+), <p><code>type</code>: the type to be exported, optional values: png, svg, json, pdf (v0.2.1+),
smm (essentially also json)</p> smm (essentially also json)</p>
<p><code>isDownload</code>: whether to directly trigger download, Boolean value, default is <p><code>isDownload</code>: whether to directly trigger download, Boolean value, default is
<code>false</code> <code>false</code></p>
</p>
<p><code>fileName</code>: (v0.1.6+) the name of the exported file, default is <code>思维导图</code> (mind <p><code>fileName</code>: (v0.1.6+) the name of the exported file, default is <code>思维导图</code> (mind
map).</p> map).</p>
<p>If it is exported as <code>png</code>, the fourth parameter can be passed:</p> <p>If it is exported as <code>png</code>, the fourth parameter can be passed:</p>
<p><code>transparent</code>: v0.5.7+, <code>Boolean</code>, default is <code>false</code>, Specify whether the <p><code>transparent</code>: v0.5.7+, <code>Boolean</code>, default is <code>false</code>, Specify whether the background of the exported image is transparent</p>
background of the exported image is transparent</p>
<p>If it is exported as <code>svg</code>, the fourth parameter can be passed:</p> <p>If it is exported as <code>svg</code>, the fourth parameter can be passed:</p>
<p><code>plusCssText</code>: Additional <code>CSS</code> style. If there is a <code>dom</code> node in <p><code>plusCssText</code>: Additional <code>CSS</code> style. If there is a <code>dom</code> node in <code>svg</code>, you can pass in some styles specific to the node through this parameter</p>
<code>svg</code>, you can pass in some styles specific to the node through this parameter</p>
<p>If it is exported as <code>json</code> or <code>smm</code>, the fourth parameter can be passed:</p> <p>If it is exported as <code>json</code> or <code>smm</code>, the fourth parameter can be passed:</p>
<p><code>withConfig</code>: <code>Boolean</code>, default is <code>true</code>, Specify whether the exported data <p><code>withConfig</code>: <code>Boolean</code>, default is <code>true</code>, Specify whether the exported data includes configuration data, otherwise only pure node tree data will be exported</p>
includes configuration data, otherwise only pure node tree data will be exported</p>
<h3>toPos(x, y)</h3> <h3>toPos(x, y)</h3>
<blockquote> <blockquote>
<p>v0.1.5+</p> <p>v0.1.5+</p>
@ -1277,17 +1156,15 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<blockquote> <blockquote>
<p>v0.4.0+</p> <p>v0.4.0+</p>
</blockquote> </blockquote>
<p>Register plugin, Use <code>MindMap.usePlugin</code> to register plugin only before instantiation, The registered <p>Register plugin, Use <code>MindMap.usePlugin</code> to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the <code>addPlugin</code> method of the instance.</p>
plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can
use the <code>addPlugin</code> method of the instance.</p>
<h3>removePlugin(plugin)</h3> <h3>removePlugin(plugin)</h3>
<blockquote> <blockquote>
<p>v0.4.0+</p> <p>v0.4.0+</p>
</blockquote> </blockquote>
<p>Remove registered plugin, Plugins registered through the <code>usePlugin</code> or <code>addPlugin</code> methods <p>Remove registered plugin, Plugins registered through the <code>usePlugin</code> or <code>addPlugin</code> methods can be removed.</p>
can be removed.</p>
</div></template> </div>
</template>
<script> <script>
export default { export default {
@ -1295,4 +1172,6 @@ export default {
} }
</script> </script>
<style></style> <style>
</style>

1
web/src/pages/Doc/zh/constructor/index.md
View File

@ -89,6 +89,7 @@ const mindMap = new MindMap({
| selectTextOnEnterEditText（v0.7.0+） | Boolean | true | 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中 | | | selectTextOnEnterEditText（v0.7.0+） | Boolean | true | 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中 | |
| deleteNodeActive（v0.7.1+） | Boolean | true | 是否开启删除节点后自动激活节点相邻节点或父节点的功能 | | | deleteNodeActive（v0.7.1+） | Boolean | true | 是否开启删除节点后自动激活节点相邻节点或父节点的功能 | |
| autoMoveWhenMouseInEdgeOnDrag（v0.7.1+） | Boolean | true | 拖拽节点时鼠标移动到画布边缘是否开启画布自动移动 | | | autoMoveWhenMouseInEdgeOnDrag（v0.7.1+） | Boolean | true | 拖拽节点时鼠标移动到画布边缘是否开启画布自动移动 | |
| fit（v0.7.2+） | Boolean | false | 首次渲染时是否缩放至适应画布大小 | |
### 数据结构 ### 数据结构

96
web/src/pages/Doc/zh/constructor/index.vue
View File

@ -46,9 +46,7 @@
<td>layout</td> <td>layout</td>
<td>String</td> <td>String</td>
<td>logicalStructure</td> <td>logicalStructure</td>
<td> <td>布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图）</td>
布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图）
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -62,18 +60,14 @@
<td>theme</td> <td>theme</td>
<td>String</td> <td>String</td>
<td>default</td> <td>default</td>
<td> <td>主题，可选列表：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+橙汁）</td>
主题，可选列表：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+橙汁）
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>themeConfig</td> <td>themeConfig</td>
<td>Object</td> <td>Object</td>
<td>{}</td> <td>{}</td>
<td>主题配置，会和所选择的主题进行合并，可用字段可参考：<a <td>主题配置，会和所选择的主题进行合并，可用字段可参考：<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">default.js</a></td>
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">default.js</a>
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -129,8 +123,7 @@
<td>customNoteContentShow（v0.1.6+）</td> <td>customNoteContentShow（v0.1.6+）</td>
<td>Object</td> <td>Object</td>
<td>null</td> <td>null</td>
<td>自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) =&gt; {// 你的显示节点备注逻辑 }, hide: () =&gt; {// <td>自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) =&gt; {// 你的显示节点备注逻辑 }, hide: () =&gt; {// 你的隐藏节点备注逻辑 }}</td>
你的隐藏节点备注逻辑 }}</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -172,8 +165,7 @@
<td>mousewheelAction（v0.4.3+）</td> <td>mousewheelAction（v0.4.3+）</td>
<td>String</td> <td>String</td>
<td>zoom</td> <td>zoom</td>
<td>鼠标滚轮的行为，<code>zoom</code>（放大缩小）、<code>move</code>（上下移动）。如果<code>customHandleMousewheel</code>传了自定义函数，这个属性不生效 <td>鼠标滚轮的行为，<code>zoom</code>（放大缩小）、<code>move</code>（上下移动）。如果<code>customHandleMousewheel</code>传了自定义函数，这个属性不生效</td>
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -257,9 +249,7 @@
<td>initRootNodePosition（v0.5.3+）</td> <td>initRootNodePosition（v0.5.3+）</td>
<td>Array</td> <td>Array</td>
<td>null</td> <td>null</td>
<td> <td>初始根节点的位置，可传一个数组，默认为<code>['center', 'center']</code>，代表根节点处于画布中心位置，除了<code>center</code>，关键词还可以设置<code>left</code>、<code>top</code>、<code>right</code>、<code>bottom</code>，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如<code>['40%', '60%']</code>，代表水平位置在画布宽度的<code>40%</code>的位置，垂直位置在画布高度的<code>60%</code>的位置</td>
初始根节点的位置，可传一个数组，默认为<code>['center', 'center']</code>，代表根节点处于画布中心位置，除了<code>center</code>，关键词还可以设置<code>left</code>、<code>top</code>、<code>right</code>、<code>bottom</code>，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如<code>['40%', '60%']</code>，代表水平位置在画布宽度的<code>40%</code>的位置，垂直位置在画布高度的<code>60%</code>的位置
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -371,9 +361,7 @@
<td>customCreateNodeContent（v0.6.3+）</td> <td>customCreateNodeContent（v0.6.3+）</td>
<td>Function/null</td> <td>Function/null</td>
<td>null</td> <td>null</td>
<td> <td>如果<code>isUseCustomNodeContent</code>设为<code>true</code>，那么需要使用该选项传入一个方法，接收节点实例<code>node</code>为参数（如果要获取该节点的数据，可以通过<code>node.nodeData.data</code>），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回<code>null</code>即可</td>
如果<code>isUseCustomNodeContent</code>设为<code>true</code>，那么需要使用该选项传入一个方法，接收节点实例<code>node</code>为参数（如果要获取该节点的数据，可以通过<code>node.nodeData.data</code>），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回<code>null</code>即可
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -422,10 +410,7 @@
<td>customHandleClipboardText（v0.6.14+）</td> <td>customHandleClipboardText（v0.6.14+）</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td> <td>自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片，默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据，如果你想处理其他思维导图的数据，比如processon、zhixi等，那么可以传递一个函数，接受当前剪贴板中的文本为参数，返回处理后的数据，可以返回两种类型：1.返回一个纯文本，那么会直接以该文本创建一个子节点；2.返回一个节点对象，格式如下：{ simpleMindMap: true, data: { data: { text: '' }, children: [] } }，代表是simple-mind-map格式的数据，节点数据同simple-mind-map节点数据格式，如果你的处理逻辑存在异步逻辑，也可以返回一个promise</td>
自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片，默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据，如果你想处理其他思维导图的数据，比如processon、zhixi等，那么可以传递一个函数，接受当前剪贴板中的文本为参数，返回处理后的数据，可以返回两种类型：1.返回一个纯文本，那么会直接以该文本创建一个子节点；2.返回一个节点对象，格式如下：{
simpleMindMap: true, data: { data: { text: '' }, children: [] }
}，代表是simple-mind-map格式的数据，节点数据同simple-mind-map节点数据格式，如果你的处理逻辑存在异步逻辑，也可以返回一个promise</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -498,12 +483,11 @@
<td>拖拽节点时鼠标移动到画布边缘是否开启画布自动移动</td> <td>拖拽节点时鼠标移动到画布边缘是否开启画布自动移动</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>fit</td> <td>fit（v0.7.2+）</td>
<td>Boolean</td> <td>Boolean</td>
<td>false</td> <td>false</td>
<td>初次加载是否适应视图</td> <td>首次渲染时是否缩放至适应画布大小</td>
<td></td> <td></td>
</tr> </tr>
</tbody> </tbody>
@ -543,9 +527,7 @@
] ]
} }
</code></pre> </code></pre>
<p> <p>如果你要添加自定义的字段，可以添加到<code>data</code>、<code>children</code>同级，如果你要添加到<code>data</code>对象里，那么请使用<code>_</code>开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。</p>
如果你要添加自定义的字段，可以添加到<code>data</code>、<code>children</code>同级，如果你要添加到<code>data</code>对象里，那么请使用<code>_</code>开头来命名你的自定义字段，内部会通过这个来判断是否是自定义字段。
</p>
<h3>水印配置</h3> <h3>水印配置</h3>
<table> <table>
<thead> <thead>
@ -616,9 +598,7 @@
<td>list</td> <td>list</td>
<td>Array</td> <td>Array</td>
<td></td> <td></td>
<td> <td>分组下的图标列表，数组的每一项为一个对象，<code>{ name: '', icon: '' }</code>，<code>name</code>代表图标的名称，<code>icon</code>代表图标，可以是<code>svg</code>图标，比如<code>&lt;svg ...&gt;&lt;path&gt;&lt;/path&gt;&lt;/svg&gt;</code>，也可以是图片<code>url</code>，或者是<code>base64</code>图标，比如<code>data:image/png;base64,...</code></td>
分组下的图标列表，数组的每一项为一个对象，<code>{ name: '', icon: '' }</code>，<code>name</code>代表图标的名称，<code>icon</code>代表图标，可以是<code>svg</code>图标，比如<code>&lt;svg ...&gt;&lt;path&gt;&lt;/path&gt;&lt;/svg&gt;</code>，也可以是图片<code>url</code>，或者是<code>base64</code>图标，比如<code>data:image/png;base64,...</code>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -643,9 +623,7 @@ MindMap.defineTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>, {
<span class="hljs-comment">// 2.动态切换新主题</span> <span class="hljs-comment">// 2.动态切换新主题</span>
mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>) mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
</code></pre> </code></pre>
<p>主题的所有配置可以参考<a <p>主题的所有配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">默认主题</a>。<code>defineTheme</code>方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>。</p>
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">默认主题</a>。<code>defineTheme</code>方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考<a
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>。</p>
<h3>usePlugin(plugin, opt = {})</h3> <h3>usePlugin(plugin, opt = {})</h3>
<blockquote> <blockquote>
<p>v0.3.0+</p> <p>v0.3.0+</p>
@ -870,9 +848,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
</tr> </tr>
<tr> <tr>
<td>transforming-dom-to-images（v0.4.0+）</td> <td>transforming-dom-to-images（v0.4.0+）</td>
<td> <td>当注册了<code>RichText</code>插件时可用。当<code>svg</code>中存在<code>DOM</code>节点时，导出为图片时会将<code>DOM</code>节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点</td>
当注册了<code>RichText</code>插件时可用。当<code>svg</code>中存在<code>DOM</code>节点时，导出为图片时会将<code>DOM</code>节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点
</td>
<td>index（当前转换到的节点索引）、len（一共需要转换的节点数量）</td> <td>index（当前转换到的节点索引）、len（一共需要转换的节点数量）</td>
</tr> </tr>
<tr> <tr>
@ -883,9 +859,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr> <tr>
<td>node_dragend（v0.4.5+）</td> <td>node_dragend（v0.4.5+）</td>
<td>节点被拖拽结束时触发</td> <td>节点被拖拽结束时触发</td>
<td>{ overlapNodeUid, prevNodeUid, nextNodeUid <td>{ overlapNodeUid, prevNodeUid, nextNodeUid }（v0.6.12+，本次节点移动到的节点uid，比如本次移动到了节点A上，那么overlapNodeUid就是节点A的uid，如果移动到了B节点的前面，那么nextNodeUid就是节点B的uid，你可以通过mindMap.renderer.findNodeByUid(uid)方法来获取节点实例）</td>
}（v0.6.12+，本次节点移动到的节点uid，比如本次移动到了节点A上，那么overlapNodeUid就是节点A的uid，如果移动到了B节点的前面，那么nextNodeUid就是节点B的uid，你可以通过mindMap.renderer.findNodeByUid(uid)方法来获取节点实例）
</td>
</tr> </tr>
<tr> <tr>
<td>associative_line_click（v0.4.5+）</td> <td>associative_line_click（v0.4.5+）</td>
@ -978,18 +952,12 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr> <tr>
<td>INSERT_NODE</td> <td>INSERT_NODE</td>
<td>插入同级节点，操作节点为当前激活的节点或指定节点，如果有多个激活节点，只会对第一个有效</td> <td>插入同级节点，操作节点为当前激活的节点或指定节点，如果有多个激活节点，只会对第一个有效</td>
<td>openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为<code>true</code>）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 <td>openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为<code>true</code>）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>）、 appointChildren（v0.6.14+，可选，指定新创建节点的子节点，数组类型）</td>
appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考<a
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>）、
appointChildren（v0.6.14+，可选，指定新创建节点的子节点，数组类型）</td>
</tr> </tr>
<tr> <tr>
<td>INSERT_CHILD_NODE</td> <td>INSERT_CHILD_NODE</td>
<td>插入子节点，操作节点为当前激活的节点或指定节点</td> <td>插入子节点，操作节点为当前激活的节点或指定节点</td>
<td>openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为<code>true</code>）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 <td>openEdit（v0.4.6+，是否激活新插入的节点并进入编辑模式，默认为<code>true</code>）、 appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）、 appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>）、 appointChildren（v0.6.14+，可选，指定新创建节点的子节点，数组类型）</td>
appointData（可选，指定新创建节点的数据，比如{text: 'xxx', ...}，详细结构可以参考<a
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a>）、
appointChildren（v0.6.14+，可选，指定新创建节点的子节点，数组类型）</td>
</tr> </tr>
<tr> <tr>
<td>UP_NODE</td> <td>UP_NODE</td>
@ -1064,9 +1032,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr> <tr>
<td>SET_NODE_TEXT</td> <td>SET_NODE_TEXT</td>
<td>设置节点文本</td> <td>设置节点文本</td>
<td> <td>node（要设置的节点）、text（要设置的文本字符串，换行可以使用<code>\n</code>）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为<code>true</code>）、resetRichText（v0.6.10+是否要复位富文本，默认为false，如果传true那么会重置富文本节点的样式）</td>
node（要设置的节点）、text（要设置的文本字符串，换行可以使用<code>\n</code>）、richText（v0.4.0+，如果要设置的是富文本字符，需要设为<code>true</code>）、resetRichText（v0.6.10+是否要复位富文本，默认为false，如果传true那么会重置富文本节点的样式）
</td>
</tr> </tr>
<tr> <tr>
<td>SET_NODE_IMAGE</td> <td>SET_NODE_IMAGE</td>
@ -1076,9 +1042,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr> <tr>
<td>SET_NODE_ICON</td> <td>SET_NODE_ICON</td>
<td>设置节点图标</td> <td>设置节点图标</td>
<td>node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在<a <td>node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a>文件里的<code>nodeIconList</code>列表里获取到，图标名称为<code>type_name</code>，如<code>['priority_1']</code>）</td>
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a>文件里的<code>nodeIconList</code>列表里获取到，图标名称为<code>type_name</code>，如<code>['priority_1']</code>）
</td>
</tr> </tr>
<tr> <tr>
<td>SET_NODE_HYPERLINK</td> <td>SET_NODE_HYPERLINK</td>
@ -1093,9 +1057,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr> <tr>
<td>SET_NODE_TAG</td> <td>SET_NODE_TAG</td>
<td>设置节点标签</td> <td>设置节点标签</td>
<td>node（要设置的节点）、tag（字符串数组，内置颜色信息可在<a <td>node（要设置的节点）、tag（字符串数组，内置颜色信息可在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>里获取到）</td>
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>里获取到）
</td>
</tr> </tr>
<tr> <tr>
<td>INSERT_AFTER（v0.1.5+）</td> <td>INSERT_AFTER（v0.1.5+）</td>
@ -1135,9 +1097,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr> <tr>
<td>SET_NODE_SHAPE（v0.2.4+）</td> <td>SET_NODE_SHAPE（v0.2.4+）</td>
<td>设置节点形状</td> <td>设置节点形状</td>
<td>node（要设置的节点）、shape（形状，全部形状：<a <td>node（要设置的节点）、shape（形状，全部形状：<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js">Shape.js</a>）</td>
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js">Shape.js</a>）
</td>
</tr> </tr>
<tr> <tr>
<td>GO_TARGET_NODE（v0.6.7+）</td> <td>GO_TARGET_NODE（v0.6.7+）</td>
@ -1154,16 +1114,13 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<p>v0.2.7+</p> <p>v0.2.7+</p>
</blockquote> </blockquote>
<p>动态设置思维导图数据，包括节点数据、布局、主题、视图</p> <p>动态设置思维导图数据，包括节点数据、布局、主题、视图</p>
<p><code>data</code>：完整数据，结构可参考<a <p><code>data</code>：完整数据，结构可参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a></p>
href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a>
</p>
<h3>getData(withConfig)</h3> <h3>getData(withConfig)</h3>
<blockquote> <blockquote>
<p>v0.2.9+</p> <p>v0.2.9+</p>
</blockquote> </blockquote>
<p>获取思维导图数据</p> <p>获取思维导图数据</p>
<p><code>withConfig</code>：<code>Boolean</code>，默认为<code>false</code>，即获取的数据只包括节点树，如果传<code>true</code>则会包含主题、布局、视图等数据 <p><code>withConfig</code>：<code>Boolean</code>，默认为<code>false</code>，即获取的数据只包括节点树，如果传<code>true</code>则会包含主题、布局、视图等数据</p>
</p>
<h3>export(type, isDownload, fileName)</h3> <h3>export(type, isDownload, fileName)</h3>
<blockquote> <blockquote>
<p>需要先注册<code>Export</code>插件</p> <p>需要先注册<code>Export</code>插件</p>
@ -1187,8 +1144,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<blockquote> <blockquote>
<p>v0.4.0+</p> <p>v0.4.0+</p>
</blockquote> </blockquote>
<p>注册插件，使用<code>MindMap.usePlugin</code>注册插件只能在实例化之前，实例化后注册的插件是不会生效的，所以如果想在实例化后注册插件可以使用实例的<code>addPlugin</code>方法。 <p>注册插件，使用<code>MindMap.usePlugin</code>注册插件只能在实例化之前，实例化后注册的插件是不会生效的，所以如果想在实例化后注册插件可以使用实例的<code>addPlugin</code>方法。</p>
</p>
<h3>removePlugin(plugin)</h3> <h3>removePlugin(plugin)</h3>
<blockquote> <blockquote>
<p>v0.4.0+</p> <p>v0.4.0+</p>
@ -1204,4 +1160,6 @@ export default {
} }
</script> </script>
<style></style> <style>
</style>

2
web/src/pages/Edit/components/Edit.vue
View File

@ -276,7 +276,7 @@ export default {
this.mindMap = new MindMap({ this.mindMap = new MindMap({
el: this.$refs.mindMapContainer, el: this.$refs.mindMapContainer,
data: root, data: root,
fit: true, fit: false,
layout: layout, layout: layout,
theme: theme.template, theme: theme.template,
themeConfig: theme.config, themeConfig: theme.config,