Doc: update
This commit is contained in:
街角小林
parent
2a84a3cf16
commit
d1ade8204b
BIN
web/src/assets/img/docs/编号1.jpg
Normal file
BIN
web/src/assets/img/docs/编号1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
web/src/assets/img/docs/编号2.jpg
Normal file
BIN
web/src/assets/img/docs/编号2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
web/src/assets/img/docs/编号3.jpg
Normal file
BIN
web/src/assets/img/docs/编号3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@ -43,6 +43,7 @@ let APIList = [
|
||||
'demonstrate',
|
||||
'notation',
|
||||
'outerFrame',
|
||||
'numbers',
|
||||
'xmind',
|
||||
'markdown',
|
||||
'utils'
|
||||
|
||||
@ -1,5 +1,63 @@
|
||||
# Changelog
|
||||
|
||||
## 0.10.6
|
||||
|
||||
> 2024.8.15
|
||||
|
||||
Fix:
|
||||
|
||||
> 1.Fix the issue where the highlighting of search nodes does not disappear in read-only mode;
|
||||
>
|
||||
> 2.Fixed the issue where the associated line plugin reported an error when clicking on the right-click menu of the mouse;
|
||||
>
|
||||
> 3.Fix the issue where clicking on the canvas cannot deactivate associated lines;
|
||||
>
|
||||
> 4.Fixed the issue where the text style of the summary node did not change when switching themes in rich text mode;
|
||||
>
|
||||
> 5.Fixed the issue where selecting both summary nodes and their corresponding nodes simultaneously and setting node styles would cause summary nodes to lose their activation status;
|
||||
>
|
||||
> 6.Fixed the issue where nodes outside the canvas would report an error when adding icons after selecting all nodes in performance mode;
|
||||
>
|
||||
> 7.Fix the issue of being unable to move forward after activating a node during rollback operation;
|
||||
|
||||
New:
|
||||
|
||||
> 1.Add Node Number Plugin;
|
||||
>
|
||||
> 2.Search plugin supports searching summary nodes;
|
||||
>
|
||||
> 3.Add instantiation option to not display expand and collapse buttons;
|
||||
>
|
||||
> 4.Theme configuration supports setting the style of associated lines, namely solid or dashed lines;
|
||||
>
|
||||
> 5.Mouse box selection supports selecting summary nodes;
|
||||
>
|
||||
> 6.Select All operation supports selecting summary nodes;
|
||||
>
|
||||
> 7.Add node note icon click event;
|
||||
>
|
||||
> 8.Add manual activation and deactivation methods for multiple nodes in the render class;
|
||||
>
|
||||
> 9.Method for adding an extended font list to the RichText plugin;
|
||||
>
|
||||
> 10.Fix the issue of incomplete support for summary nodes in the GO_TARGET_deDE command;
|
||||
>
|
||||
> 11.Delete the elements of the text editing box when destroying an instance;
|
||||
|
||||
Demo:
|
||||
|
||||
> 1.Right click menu adds the function of setting node numbers;
|
||||
>
|
||||
> 2.Support setting the style of associated lines, namely solid or dashed lines;
|
||||
>
|
||||
> 3.Support selecting the content of the floating layer of notes with the mouse;
|
||||
>
|
||||
> 4.Change the hyperlink in the remarks to open a new window;
|
||||
>
|
||||
> 5.Fixed the issue where entering the zoom note input box when activating a node would result in inputting it into the node text;
|
||||
>
|
||||
> 6.Fixed the issue where switching themes after changing the base style, selecting overwrite, and then modifying the base style would restore the previously overwritten style;
|
||||
|
||||
## 0.10.5
|
||||
|
||||
> 2024.8.2
|
||||
|
||||
@ -1,6 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.10.6</h2>
|
||||
<blockquote>
|
||||
<p>2024.8.15</p>
|
||||
</blockquote>
|
||||
<p>Fix:</p>
|
||||
<blockquote>
|
||||
<p>1.Fix the issue where the highlighting of search nodes does not disappear in read-only mode;</p>
|
||||
<p>2.Fixed the issue where the associated line plugin reported an error when clicking on the right-click menu of the mouse;</p>
|
||||
<p>3.Fix the issue where clicking on the canvas cannot deactivate associated lines;</p>
|
||||
<p>4.Fixed the issue where the text style of the summary node did not change when switching themes in rich text mode;</p>
|
||||
<p>5.Fixed the issue where selecting both summary nodes and their corresponding nodes simultaneously and setting node styles would cause summary nodes to lose their activation status;</p>
|
||||
<p>6.Fixed the issue where nodes outside the canvas would report an error when adding icons after selecting all nodes in performance mode;</p>
|
||||
<p>7.Fix the issue of being unable to move forward after activating a node during rollback operation;</p>
|
||||
</blockquote>
|
||||
<p>New:</p>
|
||||
<blockquote>
|
||||
<p>1.Add Node Number Plugin;</p>
|
||||
<p>2.Search plugin supports searching summary nodes;</p>
|
||||
<p>3.Add instantiation option to not display expand and collapse buttons;</p>
|
||||
<p>4.Theme configuration supports setting the style of associated lines, namely solid or dashed lines;</p>
|
||||
<p>5.Mouse box selection supports selecting summary nodes;</p>
|
||||
<p>6.Select All operation supports selecting summary nodes;</p>
|
||||
<p>7.Add node note icon click event;</p>
|
||||
<p>8.Add manual activation and deactivation methods for multiple nodes in the render class;</p>
|
||||
<p>9.Method for adding an extended font list to the RichText plugin;</p>
|
||||
<p>10.Fix the issue of incomplete support for summary nodes in the GO_TARGET_deDE command;</p>
|
||||
<p>11.Delete the elements of the text editing box when destroying an instance;</p>
|
||||
</blockquote>
|
||||
<p>Demo:</p>
|
||||
<blockquote>
|
||||
<p>1.Right click menu adds the function of setting node numbers;</p>
|
||||
<p>2.Support setting the style of associated lines, namely solid or dashed lines;</p>
|
||||
<p>3.Support selecting the content of the floating layer of notes with the mouse;</p>
|
||||
<p>4.Change the hyperlink in the remarks to open a new window;</p>
|
||||
<p>5.Fixed the issue where entering the zoom note input box when activating a node would result in inputting it into the node text;</p>
|
||||
<p>6.Fixed the issue where switching themes after changing the base style, selecting overwrite, and then modifying the base style would restore the previously overwritten style;</p>
|
||||
</blockquote>
|
||||
<h2>0.10.5</h2>
|
||||
<blockquote>
|
||||
<p>2024.8.2</p>
|
||||
|
||||
@ -20,6 +20,10 @@ const mindMap = new MindMap({
|
||||
});
|
||||
```
|
||||
|
||||
### Special Reminder
|
||||
|
||||
Node tree rendering is an asynchronous operation, so it is not possible to immediately call some operations that require node rendering to be completed after instantiation, otherwise errors and unknown phenomena may occur, You need to listen for the 'node_tree_render_end' event and wait until the node tree rendering is complete before proceeding. In addition to instantiation, other methods such as 'setData', 'updateData', 'render', etc. are asynchronous and need to be handled in this way.
|
||||
|
||||
## Instantiation options
|
||||
|
||||
### 1.Base
|
||||
@ -101,6 +105,7 @@ const mindMap = new MindMap({
|
||||
| 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 | |
|
||||
| openPerformance（v0.10.4+） | Boolean | false | Whether to enable performance mode or not, by default, all nodes will be rendered directly, regardless of whether they are in the visible area of the canvas. This will cause a lag when there are a large number of nodes (1000+). If your data volume is large, you can enable performance mode through this configuration, that is, only rendering nodes within the visible area of the canvas, and not rendering nodes beyond it. This will greatly improve rendering speed, but of course, it will also bring some other problems, such as: 1. When dragging or scaling the canvas, real-time calculation and rendering of nodes without nodes will be performed, which will bring some lag; When exporting images, SVG, and PDF, all nodes need to be rendered first, so it may be slower; 3. Other currently undiscovered issues | |
|
||||
| performanceConfig（v0.10.4+） | Object | { time: 250, padding: 100, removeNodeWhenOutCanvas: true } | Performance optimization mode configuration. time（How often do nodes refresh after a view change. Unit:ms）、padding（Still rendering nodes beyond the specified range around the canvas）、removeNodeWhenOutCanvas（Is the node deleted from the canvas after being moved out of the visible area of the canvas） | |
|
||||
| notShowExpandBtn（v0.10.6+） | Boolean | false | Do not display the expand/collapse button, higher priority than the 'alwaysShowExpandBtn' configuration | |
|
||||
|
||||
### 1.1Data structure
|
||||
|
||||
@ -622,6 +627,7 @@ Listen to an event. Event list:
|
||||
| node_attachmentContextmenu（v0.9.10+） | Right click event on node attachment icon | this(Current node instance)、e（Event Object）、node（Icon node） |
|
||||
| before_update_config（v0.10.4+） | Triggered before updating the configuration, that is, when the 'mindMap.updateConfig' method is called to update the configuration | opt（The configuration object before updating refers to an object, not a copy, so when the after_uupdate_comfig event is triggered, the object will also change synchronously. Therefore, it is necessary to cache a certain configuration field that you need） |
|
||||
| after_update_config（v0.10.4+） | Triggered after updating configuration | opt（Updated configuration object） |
|
||||
| node_note_click（v0.10.6+） | Click event of node note icon | this(Current node instance)、e（Event Object）、node（Icon node） |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
|
||||
@ -16,6 +16,8 @@
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<h3>Special Reminder</h3>
|
||||
<p>Node tree rendering is an asynchronous operation, so it is not possible to immediately call some operations that require node rendering to be completed after instantiation, otherwise errors and unknown phenomena may occur, You need to listen for the 'node_tree_render_end' event and wait until the node tree rendering is complete before proceeding. In addition to instantiation, other methods such as 'setData', 'updateData', 'render', etc. are asynchronous and need to be handled in this way.</p>
|
||||
<h2>Instantiation options</h2>
|
||||
<h3>1.Base</h3>
|
||||
<table>
|
||||
@ -554,6 +556,13 @@
|
||||
<td>Performance optimization mode configuration. time（How often do nodes refresh after a view change. Unit:ms）、padding（Still rendering nodes beyond the specified range around the canvas）、removeNodeWhenOutCanvas（Is the node deleted from the canvas after being moved out of the visible area of the canvas）</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>notShowExpandBtn（v0.10.6+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>Do not display the expand/collapse button, higher priority than the 'alwaysShowExpandBtn' configuration</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>1.1Data structure</h3>
|
||||
@ -1722,6 +1731,11 @@ poor performance and should be used sparingly.</p>
|
||||
<td>Triggered after updating configuration</td>
|
||||
<td>opt（Updated configuration object）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_note_click（v0.10.6+）</td>
|
||||
<td>Click event of node note icon</td>
|
||||
<td>this(Current node instance)、e（Event Object）、node（Icon node）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
|
||||
@ -16,7 +16,7 @@ The internal implementation is through the [rough](https://github.com/rough-stuf
|
||||
|
||||
## Charge
|
||||
|
||||
At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address, and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.
|
||||
At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address(If you reach the maximum text limit, you can make the payment in two installments), and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.
|
||||
|
||||
Price:
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<p>You can also try to turn on the hand drawn style in the online version through the settings of 【 Basic Style 】 - 【 Enable Hand drawn Style 】.</p>
|
||||
<p>The internal implementation is through the <a href="https://github.com/rough-stuff/rough">rough</a> library, so if you have the energy, you can also implement this plugin based on this library yourself.</p>
|
||||
<h2>Charge</h2>
|
||||
<p>At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address, and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.</p>
|
||||
<p>At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address(If you reach the maximum text limit, you can make the payment in two installments), and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.</p>
|
||||
<p>Price:</p>
|
||||
<p>1.￥ 19.9, Only includes the packaged files, which are in two formats: .cjs.min.js and .esm.min.js.</p>
|
||||
<p>2.￥ 29.9, including unpackaged source code and packaged files.</p>
|
||||
|
||||
109
web/src/pages/Doc/en/notation/index.md
Normal file
109
web/src/pages/Doc/en/notation/index.md
Normal file
@ -0,0 +1,109 @@
|
||||
# Notation chargeable plugin
|
||||
|
||||
> Regarding fees
|
||||
>
|
||||
> Mind map is an open-source project under the MIT protocol. In theory, as long as the copyright statement of mind map is retained, there is no charge for commercial use, and this protocol will not be changed in the future. Moreover, neither the online version nor the client will consider charging. However, in order to ensure the sustainable development of the project, revenue will be obtained through various means, such as existing sponsorship methods. The second approach is to use paid plugins, with the basic principle that basic functions, core functions, and necessary functions are not charged, while optional additional functions may be charged.
|
||||
>
|
||||
> Finally, the fee is only applicable to developers. If it is only the online version or client version of the mind map, users do not need to pay, and all functions can be used for free.
|
||||
|
||||
Notation is the second paid plugin that provides tagging functionality for individual nodes, allowing for the addition of hand drawn circles, backgrounds, strikethrough lines, and more. It supports animation effects, such as the following:
|
||||
|
||||
<img src="../../../../assets/img/docs/标记.jpg" style="width: 900px" />
|
||||
|
||||
You can also experience it in the online version by activating the node first, and then clicking the 【notation】 button above to add a notation.
|
||||
|
||||
The internal implementation is done through the [rough-notation](https://github.com/rough-stuff/rough-notation) library, so if you have the energy, you can also implement this plugin based on this library yourself.
|
||||
|
||||
## Charge
|
||||
|
||||
At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address(If you reach the maximum text limit, you can make the payment in two installments), and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.
|
||||
|
||||
Price:
|
||||
|
||||
1.￥ 19.9, Only includes the packaged files, which are in two formats: .cjs.min.js and .esm.min.js.
|
||||
|
||||
2.￥ 29.9, including unpackaged source code and packaged files.
|
||||
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
|
||||
## Register
|
||||
|
||||
1.Referencing packaged files:
|
||||
|
||||
```js
|
||||
import MindMap from 'simple-mind-map'
|
||||
import Notation from 'notation.cjs.min.js'
|
||||
// 或 import Notation from 'notation.esm.min.js'
|
||||
|
||||
MindMap.usePlugin(Notation)
|
||||
```
|
||||
|
||||
2.Referencing Unpackaged Source Code
|
||||
|
||||
You can first enter the plugin directory to execute:
|
||||
|
||||
```bash
|
||||
npm link
|
||||
```
|
||||
|
||||
Then enter your project root directory to execute:
|
||||
|
||||
```bash
|
||||
npm link simple-mind-map-plugin-handdrawnlikestyle
|
||||
```
|
||||
|
||||
Then you can directly import it for use:
|
||||
|
||||
```js
|
||||
import MindMap from 'simple-mind-map'
|
||||
import Notation from 'simple-mind-map-plugin-notation'
|
||||
|
||||
MindMap.usePlugin(Notation)
|
||||
```
|
||||
|
||||
After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.notation`.
|
||||
|
||||
If you are using the mindMap.addPlugin method to dynamically register a component, you will need to call the method for re rendering once:
|
||||
|
||||
```js
|
||||
mindMap.addPlugin(Notation)
|
||||
mindMap.reRender()
|
||||
```
|
||||
|
||||
## Command
|
||||
|
||||
After registering this plugin, the 'SET_NOTATION' command will be added to the mind map instance to set node numbers. Use this command:
|
||||
|
||||
```js
|
||||
mindMap.execCommand('SET_NOTATION', appointNodes, show, config)
|
||||
```
|
||||
|
||||
This command can pass three parameters:
|
||||
|
||||
- `appointNodes`：Assign a number to a specified node instance, which can be passed as a single node instance or as an array of node instances. If an empty array is passed, a notation will be added to the currently activated node;
|
||||
|
||||
- `show`：Boolean，Required transmission, whether to display the notation;
|
||||
|
||||
- `config`：Object，Optional, notation configuration, object format, detailed fields of the object are as follows:
|
||||
|
||||
| Field name | Type | Default | Desc |
|
||||
| ------- | ----- | ----- | ---- |
|
||||
| type | String | circle | Tag type, optional values: underline, box, circle, highlight, strike-through, crossed-off |
|
||||
| color | String | 'hoverRectColor' configuration in mind map instantiation options | Color |
|
||||
| strokeWidth | Number | 1 | Line width |
|
||||
| padding | Number | 20 | Padding |
|
||||
| animate | Boolean | true | Is enable animation |
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
// Add a circular marker to the currently activated node
|
||||
mindMap.execCommand('SET_NOTATION', [], true, {
|
||||
type: 'circle',
|
||||
color: 'red'
|
||||
})
|
||||
```
|
||||
|
||||
After adding tags, the data will be saved to the node's 'data'under the name 'notation'.
|
||||
124
web/src/pages/Doc/en/notation/index.vue
Normal file
124
web/src/pages/Doc/en/notation/index.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Notation chargeable plugin</h1>
|
||||
<blockquote>
|
||||
<p>Regarding fees</p>
|
||||
<p>Mind map is an open-source project under the MIT protocol. In theory, as long as the copyright statement of mind map is retained, there is no charge for commercial use, and this protocol will not be changed in the future. Moreover, neither the online version nor the client will consider charging. However, in order to ensure the sustainable development of the project, revenue will be obtained through various means, such as existing sponsorship methods. The second approach is to use paid plugins, with the basic principle that basic functions, core functions, and necessary functions are not charged, while optional additional functions may be charged.</p>
|
||||
<p>Finally, the fee is only applicable to developers. If it is only the online version or client version of the mind map, users do not need to pay, and all functions can be used for free.</p>
|
||||
</blockquote>
|
||||
<p>Notation is the second paid plugin that provides tagging functionality for individual nodes, allowing for the addition of hand drawn circles, backgrounds, strikethrough lines, and more. It supports animation effects, such as the following:</p>
|
||||
<img src="../../../../assets/img/docs/标记.jpg" style="width: 900px" />
|
||||
<p>You can also experience it in the online version by activating the node first, and then clicking the 【notation】 button above to add a notation.</p>
|
||||
<p>The internal implementation is done through the <a href="https://github.com/rough-stuff/rough-notation">rough-notation</a> library, so if you have the energy, you can also implement this plugin based on this library yourself.</p>
|
||||
<h2>Charge</h2>
|
||||
<p>At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address(If you reach the maximum text limit, you can make the payment in two installments), and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.</p>
|
||||
<p>Price:</p>
|
||||
<p>1.￥ 19.9, Only includes the packaged files, which are in two formats: .cjs.min.js and .esm.min.js.</p>
|
||||
<p>2.￥ 29.9, including unpackaged source code and packaged files.</p>
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
<h2>Register</h2>
|
||||
<p>1.Referencing packaged files:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Notation <span class="hljs-keyword">from</span> <span class="hljs-string">'notation.cjs.min.js'</span>
|
||||
<span class="hljs-comment">// 或 import Notation from 'notation.esm.min.js'</span>
|
||||
|
||||
MindMap.usePlugin(Notation)
|
||||
</code></pre>
|
||||
<p>2.Referencing Unpackaged Source Code</p>
|
||||
<p>You can first enter the plugin directory to execute:</p>
|
||||
<pre class="hljs"><code>npm link
|
||||
</code></pre>
|
||||
<p>Then enter your project root directory to execute:</p>
|
||||
<pre class="hljs"><code>npm link simple-mind-map-plugin-handdrawnlikestyle
|
||||
</code></pre>
|
||||
<p>Then you can directly import it for use:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Notation <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map-plugin-notation'</span>
|
||||
|
||||
MindMap.usePlugin(Notation)
|
||||
</code></pre>
|
||||
<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.notation</code>.</p>
|
||||
<p>If you are using the mindMap.addPlugin method to dynamically register a component, you will need to call the method for re rendering once:</p>
|
||||
<pre class="hljs"><code>mindMap.addPlugin(Notation)
|
||||
mindMap.reRender()
|
||||
</code></pre>
|
||||
<h2>Command</h2>
|
||||
<p>After registering this plugin, the 'SET_NOTATION' command will be added to the mind map instance to set node numbers. Use this command:</p>
|
||||
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">'SET_NOTATION'</span>, appointNodes, show, config)
|
||||
</code></pre>
|
||||
<p>This command can pass three parameters:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>appointNodes</code>：Assign a number to a specified node instance, which can be passed as a single node instance or as an array of node instances. If an empty array is passed, a notation will be added to the currently activated node;</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>show</code>：Boolean，Required transmission, whether to display the notation;</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>config</code>：Object，Optional, notation configuration, object format, detailed fields of the object are as follows:</p>
|
||||
</li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Field name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Desc</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>type</td>
|
||||
<td>String</td>
|
||||
<td>circle</td>
|
||||
<td>Tag type, optional values: underline, box, circle, highlight, strike-through, crossed-off</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>color</td>
|
||||
<td>String</td>
|
||||
<td>'hoverRectColor' configuration in mind map instantiation options</td>
|
||||
<td>Color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>strokeWidth</td>
|
||||
<td>Number</td>
|
||||
<td>1</td>
|
||||
<td>Line width</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>padding</td>
|
||||
<td>Number</td>
|
||||
<td>20</td>
|
||||
<td>Padding</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>animate</td>
|
||||
<td>Boolean</td>
|
||||
<td>true</td>
|
||||
<td>Is enable animation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Example:</p>
|
||||
<pre class="hljs"><code><span class="hljs-comment">// Add a circular marker to the currently activated node</span>
|
||||
mindMap.execCommand(<span class="hljs-string">'SET_NOTATION'</span>, [], <span class="hljs-literal">true</span>, {
|
||||
<span class="hljs-attr">type</span>: <span class="hljs-string">'circle'</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'red'</span>
|
||||
})
|
||||
</code></pre>
|
||||
<p>After adding tags, the data will be saved to the node's 'data'under the name 'notation'.</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
90
web/src/pages/Doc/en/numbers/index.md
Normal file
90
web/src/pages/Doc/en/numbers/index.md
Normal file
@ -0,0 +1,90 @@
|
||||
# Numbers chargeable plugin
|
||||
|
||||
The Numbers plugin provides the function of one click numbering of child nodes of a node, supports multiple numbering forms, and specifies the hierarchy of numbering:
|
||||
|
||||
<img src="../../../../assets/img/docs/编号1.jpg" style="width: 400px" />
|
||||
|
||||
<img src="../../../../assets/img/docs/编号2.jpg" style="width: 400px" />
|
||||
|
||||
<img src="../../../../assets/img/docs/编号3.jpg" style="width: 400px" />
|
||||
|
||||
You can experience it in the online version by right clicking on the node and clicking on its numbered child nodes.
|
||||
|
||||
## Charge
|
||||
|
||||
At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address(If you reach the maximum text limit, you can make the payment in two installments), and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.
|
||||
|
||||
Price: ￥ 29.9, including unpackaged source code and packaged files.
|
||||
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
|
||||
## Register
|
||||
|
||||
1.Referencing packaged files:
|
||||
|
||||
```js
|
||||
import MindMap from 'simple-mind-map'
|
||||
import Numbers from 'numbers.cjs.min.js'
|
||||
// 或 import Numbers from 'numbers.esm.min.js'
|
||||
|
||||
MindMap.usePlugin(Numbers)
|
||||
```
|
||||
|
||||
2.Referencing Unpackaged Source Code
|
||||
|
||||
You can first enter the plugin directory to execute:
|
||||
|
||||
```bash
|
||||
npm link
|
||||
```
|
||||
|
||||
Then enter your project root directory to execute:
|
||||
|
||||
```bash
|
||||
npm link simple-mind-map-plugin-handdrawnlikestyle
|
||||
```
|
||||
|
||||
Then you can directly import it for use:
|
||||
|
||||
```js
|
||||
import MindMap from 'simple-mind-map'
|
||||
import Numbers from 'simple-mind-map-plugin-numbers'
|
||||
|
||||
MindMap.usePlugin(Numbers)
|
||||
```
|
||||
|
||||
After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.numbers`.
|
||||
|
||||
## Command
|
||||
|
||||
After registering this plugin, the 'SET_NUMBER' command will be added to the mind map instance to set node numbers. Use this command:
|
||||
|
||||
```js
|
||||
mindMap.execCommand('SET_NUMBER', appointNodes, number)
|
||||
```
|
||||
|
||||
This command can pass two parameters:
|
||||
|
||||
- `appointNodes`：Assign a number to a specified node instance, which can be passed as a single node instance or as an array of node instances. If an empty array is passed, a tag will be added to the currently activated node;
|
||||
|
||||
- `number`：If the number data to be set is passed as' null ', it means the number will be deleted. Otherwise, please pass an object with the following detailed fields:
|
||||
|
||||
| Field name | Type | Default | Desc |
|
||||
| ------- | ----- | ----- | ---- |
|
||||
| type | Number | 1 | Number format, default is '1', representing ordinary numbers, optional values: 1 (pure number), 2 (number with decimal point, such as: 1.), 3 (number with parentheses, such as: (1)), 4 (lowercase letter, such as: a.), 5 (uppercase letter, such as: A.), 6 (lowercase Roman number, such as: i.), 7 (uppercase Roman number, such as: I.), 8 (Chinese uppercase number, such as: 一、) |
|
||||
| level | Number | 1 | The child node hierarchy to be numbered, default is level 1, optional values: 1 (level 1), 2 (level 2), 3 (level 3), 0 (all levels) |
|
||||
|
||||
When calling a command, you can pass only one field, such as '{type: 1}', and the other field will use the previous setting.
|
||||
|
||||
示例：
|
||||
|
||||
```js
|
||||
mindMap.execCommand('SET_NUMBER', [], {
|
||||
type: 2,
|
||||
level: 3
|
||||
})
|
||||
```
|
||||
|
||||
After setting the number, the data will be saved to the node's 'data' under the name 'number'.
|
||||
93
web/src/pages/Doc/en/numbers/index.vue
Normal file
93
web/src/pages/Doc/en/numbers/index.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Numbers chargeable plugin</h1>
|
||||
<p>The Numbers plugin provides the function of one click numbering of child nodes of a node, supports multiple numbering forms, and specifies the hierarchy of numbering:</p>
|
||||
<img src="../../../../assets/img/docs/编号1.jpg" style="width: 400px" />
|
||||
<img src="../../../../assets/img/docs/编号2.jpg" style="width: 400px" />
|
||||
<img src="../../../../assets/img/docs/编号3.jpg" style="width: 400px" />
|
||||
<p>You can experience it in the online version by right clicking on the node and clicking on its numbered child nodes.</p>
|
||||
<h2>Charge</h2>
|
||||
<p>At present, the charging method is relatively primitive. By scanning the code and transferring money, please note the plugin you want to purchase and your email address(If you reach the maximum text limit, you can make the payment in two installments), and then the plugin file will be sent to your email. Purchase should be made after full use and consideration. If you are not familiar with front-end development and do not know how to use plugins, please consider purchasing carefully. There will be no refund unless there are special reasons. If you find bugs or have requirements, you can submit relevant issues.</p>
|
||||
<p>Price: ￥ 29.9, including unpackaged source code and packaged files.</p>
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
<h2>Register</h2>
|
||||
<p>1.Referencing packaged files:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Numbers <span class="hljs-keyword">from</span> <span class="hljs-string">'numbers.cjs.min.js'</span>
|
||||
<span class="hljs-comment">// 或 import Numbers from 'numbers.esm.min.js'</span>
|
||||
|
||||
MindMap.usePlugin(Numbers)
|
||||
</code></pre>
|
||||
<p>2.Referencing Unpackaged Source Code</p>
|
||||
<p>You can first enter the plugin directory to execute:</p>
|
||||
<pre class="hljs"><code>npm link
|
||||
</code></pre>
|
||||
<p>Then enter your project root directory to execute:</p>
|
||||
<pre class="hljs"><code>npm link simple-mind-map-plugin-handdrawnlikestyle
|
||||
</code></pre>
|
||||
<p>Then you can directly import it for use:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Numbers <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map-plugin-numbers'</span>
|
||||
|
||||
MindMap.usePlugin(Numbers)
|
||||
</code></pre>
|
||||
<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.numbers</code>.</p>
|
||||
<h2>Command</h2>
|
||||
<p>After registering this plugin, the 'SET_NUMBER' command will be added to the mind map instance to set node numbers. Use this command:</p>
|
||||
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">'SET_NUMBER'</span>, appointNodes, number)
|
||||
</code></pre>
|
||||
<p>This command can pass two parameters:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>appointNodes</code>：Assign a number to a specified node instance, which can be passed as a single node instance or as an array of node instances. If an empty array is passed, a tag will be added to the currently activated node;</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>number</code>：If the number data to be set is passed as' null ', it means the number will be deleted. Otherwise, please pass an object with the following detailed fields:</p>
|
||||
</li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Field name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Desc</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>type</td>
|
||||
<td>Number</td>
|
||||
<td>1</td>
|
||||
<td>Number format, default is '1', representing ordinary numbers, optional values: 1 (pure number), 2 (number with decimal point, such as: 1.), 3 (number with parentheses, such as: (1)), 4 (lowercase letter, such as: a.), 5 (uppercase letter, such as: A.), 6 (lowercase Roman number, such as: i.), 7 (uppercase Roman number, such as: I.), 8 (Chinese uppercase number, such as: 一、)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>level</td>
|
||||
<td>Number</td>
|
||||
<td>1</td>
|
||||
<td>The child node hierarchy to be numbered, default is level 1, optional values: 1 (level 1), 2 (level 2), 3 (level 3), 0 (all levels)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>When calling a command, you can pass only one field, such as '{type: 1}', and the other field will use the previous setting.</p>
|
||||
<p>示例：</p>
|
||||
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">'SET_NUMBER'</span>, [], {
|
||||
<span class="hljs-attr">type</span>: <span class="hljs-number">2</span>,
|
||||
<span class="hljs-attr">level</span>: <span class="hljs-number">3</span>
|
||||
})
|
||||
</code></pre>
|
||||
<p>After setting the number, the data will be saved to the node's 'data' under the name 'number'.</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -21,6 +21,22 @@ The rendering tree, also known as the data tree of the mind map.
|
||||
|
||||
## Methods
|
||||
|
||||
### activeMultiNode(nodeList = [])
|
||||
|
||||
> v0.10.6+
|
||||
|
||||
- `nodeList`：Node instance list
|
||||
|
||||
Manually activate multiple nodes. To activate a single node, please directly call the 'active()' method of the node instance.
|
||||
|
||||
### cancelActiveMultiNode(nodeList = [])
|
||||
|
||||
> v0.10.6+
|
||||
|
||||
- `nodeList`：Node instance list
|
||||
|
||||
Manually deactivate multiple nodes. To deactivate a single node, please directly call the 'deactivate()' method of the node instance.
|
||||
|
||||
### highlightNode(node, range)
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
@ -12,6 +12,22 @@ accessed through <code>mindMap.renderer</code>.</p>
|
||||
<p>The rendering tree, also known as the data tree of the mind map.</p>
|
||||
<h3>layout</h3>
|
||||
<h2>Methods</h2>
|
||||
<h3>activeMultiNode(nodeList = [])</h3>
|
||||
<blockquote>
|
||||
<p>v0.10.6+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>nodeList</code>：Node instance list</li>
|
||||
</ul>
|
||||
<p>Manually activate multiple nodes. To activate a single node, please directly call the 'active()' method of the node instance.</p>
|
||||
<h3>cancelActiveMultiNode(nodeList = [])</h3>
|
||||
<blockquote>
|
||||
<p>v0.10.6+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>nodeList</code>：Node instance list</li>
|
||||
</ul>
|
||||
<p>Manually deactivate multiple nodes. To deactivate a single node, please directly call the 'deactivate()' method of the node instance.</p>
|
||||
<h3>highlightNode(node, range)</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
|
||||
@ -68,6 +68,16 @@ Replace the built-in font size list during rich text editing. The built-in list
|
||||
|
||||
## Method
|
||||
|
||||
### extendFont(list = [], cover = false)
|
||||
|
||||
> v0.8.6+
|
||||
|
||||
- `list`：List of font names to be expanded;
|
||||
|
||||
- `cover`：Whether to overwrite the current font list, default is 'false', which means adding after the current font list;
|
||||
|
||||
Dynamically expand supported fonts.
|
||||
|
||||
### setNotActiveNodeStyle(node, style)
|
||||
|
||||
> v0.8.0+
|
||||
|
||||
@ -56,6 +56,19 @@ MindMap.usePlugin(RichText, opt?)
|
||||
<pre class="hljs"><code>[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, ..<span class="hljs-number">.100</span>]
|
||||
</code></pre>
|
||||
<h2>Method</h2>
|
||||
<h3>extendFont(list = [], cover = false)</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.6+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>list</code>：List of font names to be expanded;</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>cover</code>：Whether to overwrite the current font list, default is 'false', which means adding after the current font list;</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Dynamically expand supported fonts.</p>
|
||||
<h3>setNotActiveNodeStyle(node, style)</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.0+</p>
|
||||
|
||||
@ -24,7 +24,7 @@ import {walk, ...} from 'simple-mind-map/src/utils'
|
||||
|
||||
Scale the image proportionally. Zoom to the specified size of `newWidth` and `newHeight` while maintaining the original aspect ratio of the image.
|
||||
|
||||
#### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
|
||||
#### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0, ancestors = [])
|
||||
|
||||
Depth-first traversal of a tree
|
||||
|
||||
@ -33,10 +33,10 @@ Depth-first traversal of a tree
|
||||
`parent`: parent node
|
||||
|
||||
`beforeCallback`: preorder traversal callback function, callback parameters are:
|
||||
root, parent, isRoot, layerIndex, index
|
||||
root, parent, isRoot, layerIndex, index, ancestors
|
||||
|
||||
`afterCallback`: postorder traversal callback function, callback parameters are:
|
||||
root, parent, isRoot, layerIndex, index
|
||||
root, parent, isRoot, layerIndex, index, ancestors
|
||||
|
||||
`isRoot`: whether it is the root node
|
||||
|
||||
@ -44,6 +44,8 @@ root, parent, isRoot, layerIndex, index
|
||||
|
||||
`index`: index of the node among its siblings
|
||||
|
||||
`ancestors`：v0.10.6+, List of all ancestor nodes of the current node
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
|
||||
@ -15,17 +15,18 @@
|
||||
<p><code>newWidth</code>：Width to zoom in to</p>
|
||||
<p><code>newHeight</code>：Height to zoom in to</p>
|
||||
<p>Scale the image proportionally. Zoom to the specified size of <code>newWidth</code> and <code>newHeight</code> while maintaining the original aspect ratio of the image.</p>
|
||||
<h4>walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)</h4>
|
||||
<h4>walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0, ancestors = [])</h4>
|
||||
<p>Depth-first traversal of a tree</p>
|
||||
<p><code>root</code>: the root node of the tree to be traversed</p>
|
||||
<p><code>parent</code>: parent node</p>
|
||||
<p><code>beforeCallback</code>: preorder traversal callback function, callback parameters are:
|
||||
root, parent, isRoot, layerIndex, index</p>
|
||||
root, parent, isRoot, layerIndex, index, ancestors</p>
|
||||
<p><code>afterCallback</code>: postorder traversal callback function, callback parameters are:
|
||||
root, parent, isRoot, layerIndex, index</p>
|
||||
root, parent, isRoot, layerIndex, index, ancestors</p>
|
||||
<p><code>isRoot</code>: whether it is the root node</p>
|
||||
<p><code>layerIndex</code>: node level</p>
|
||||
<p><code>index</code>: index of the node among its siblings</p>
|
||||
<p><code>ancestors</code>：v0.10.6+, List of all ancestor nodes of the current node</p>
|
||||
<p>Example:</p>
|
||||
<pre class="hljs"><code>walk(tree, <span class="hljs-literal">null</span>, <span class="hljs-function">() =></span> {}, <span class="hljs-function">() =></span> {}, <span class="hljs-literal">false</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
|
||||
</code></pre>
|
||||
|
||||
@ -70,6 +70,7 @@ export default [
|
||||
{ path: 'outerFrame', title: 'OuterFrame插件' },
|
||||
{ path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle收费插件' },
|
||||
{ path: 'notation', title: 'Notation收费插件' },
|
||||
{ path: 'numbers', title: 'Numbers收费插件' },
|
||||
{ path: 'help1', title: '概要/关联线' },
|
||||
{ path: 'help2', title: '客户端' },
|
||||
{ path: 'help3', title: '打开预览在线文件' },
|
||||
@ -121,6 +122,7 @@ export default [
|
||||
title: 'HandDrawnLikeStyle chargeable plugin'
|
||||
},
|
||||
{ path: 'notation', title: 'Notation chargeable plugin' },
|
||||
{ path: 'numbers', title: 'Numbers chargeable plugin' },
|
||||
{ path: 'client', title: 'Client' }
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,5 +1,63 @@
|
||||
# Changelog
|
||||
|
||||
## 0.10.6
|
||||
|
||||
> 2024.8.15
|
||||
|
||||
修复：
|
||||
|
||||
> 1.修复只读模式下搜索节点的高亮不会消失的问题；
|
||||
>
|
||||
> 2.修复点击鼠标右键菜单时关联线插件报错的问题 ；
|
||||
>
|
||||
> 3.修复点击画布无法取消激活关联线的问题；
|
||||
>
|
||||
> 4.修复富文本模式下切换主题，概要节点的文本样式没有跟随改变的问题；
|
||||
>
|
||||
> 5.修复同时选中概要节点和其所属节点，设置节点样式后概要节点会失去激活状态的问题；
|
||||
>
|
||||
> 6.修复性能模式下全选节点后添加图标时，画布外的节点会报错的问题；
|
||||
>
|
||||
> 7.修复处于回退操作中激活节点后无法前进的问题；
|
||||
|
||||
新增：
|
||||
|
||||
> 1.新增节点编号插件；
|
||||
>
|
||||
> 2.搜索插件支持搜索概要节点；
|
||||
>
|
||||
> 3.新增不显示展开收起按钮的实例化选项；
|
||||
>
|
||||
> 4.主题配置支持设置关联线的样式，即实线或虚线；
|
||||
>
|
||||
> 5.鼠标框选支持选中概要节点；
|
||||
>
|
||||
> 6.全选操作支持选中概要节点；
|
||||
>
|
||||
> 7.新增节点备注图标点击事件；
|
||||
>
|
||||
> 8.render类新增手动激活和取消激活多个节点的方法；
|
||||
>
|
||||
> 9.RichText插件新增扩展字体列表的方法；
|
||||
>
|
||||
> 10.修复GO_TARGET_NODE命令对概要节点支持不全的问题；
|
||||
>
|
||||
> 11.实例销毁时删除文本编辑框的元素；
|
||||
|
||||
Demo：
|
||||
|
||||
> 1.右键菜单新增设置节点编号功能；
|
||||
>
|
||||
> 2.支持设置关联线的样式，即实线或虚线；
|
||||
>
|
||||
> 3.支持鼠标选中备注浮层的内容；
|
||||
>
|
||||
> 4.备注里的超链接改为新窗口打开；
|
||||
>
|
||||
> 5.修复激活节点时在缩放备注输入框中输入会输入到节点文本中的问题；
|
||||
>
|
||||
> 6.修复更改基础样式后切换主题，选择覆盖，再修改基础样式时之前覆盖的样式会恢复的问题；
|
||||
|
||||
## 0.10.5
|
||||
|
||||
> 2024.8.2
|
||||
|
||||
@ -1,6 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.10.6</h2>
|
||||
<blockquote>
|
||||
<p>2024.8.15</p>
|
||||
</blockquote>
|
||||
<p>修复：</p>
|
||||
<blockquote>
|
||||
<p>1.修复只读模式下搜索节点的高亮不会消失的问题；</p>
|
||||
<p>2.修复点击鼠标右键菜单时关联线插件报错的问题 ；</p>
|
||||
<p>3.修复点击画布无法取消激活关联线的问题；</p>
|
||||
<p>4.修复富文本模式下切换主题，概要节点的文本样式没有跟随改变的问题；</p>
|
||||
<p>5.修复同时选中概要节点和其所属节点，设置节点样式后概要节点会失去激活状态的问题；</p>
|
||||
<p>6.修复性能模式下全选节点后添加图标时，画布外的节点会报错的问题；</p>
|
||||
<p>7.修复处于回退操作中激活节点后无法前进的问题；</p>
|
||||
</blockquote>
|
||||
<p>新增：</p>
|
||||
<blockquote>
|
||||
<p>1.新增节点编号插件；</p>
|
||||
<p>2.搜索插件支持搜索概要节点；</p>
|
||||
<p>3.新增不显示展开收起按钮的实例化选项；</p>
|
||||
<p>4.主题配置支持设置关联线的样式，即实线或虚线；</p>
|
||||
<p>5.鼠标框选支持选中概要节点；</p>
|
||||
<p>6.全选操作支持选中概要节点；</p>
|
||||
<p>7.新增节点备注图标点击事件；</p>
|
||||
<p>8.render类新增手动激活和取消激活多个节点的方法；</p>
|
||||
<p>9.RichText插件新增扩展字体列表的方法；</p>
|
||||
<p>10.修复GO_TARGET_NODE命令对概要节点支持不全的问题；</p>
|
||||
<p>11.实例销毁时删除文本编辑框的元素；</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.5</h2>
|
||||
<blockquote>
|
||||
<p>2024.8.2</p>
|
||||
|
||||
@ -20,6 +20,10 @@ const mindMap = new MindMap({
|
||||
});
|
||||
```
|
||||
|
||||
### 特别提醒
|
||||
|
||||
节点树渲染是一个异步的操作，所以不能实例化完后立即调用一些需要节点渲染完成才能执行的操作，否则会发生错误和一些未知的现象，你需要监听`node_tree_render_end`事件，在节点树渲染完成后再进行。除了实例化，其他诸如：`setData`、`updateData`、`render`等方法都是异步的，也需要这样处理。
|
||||
|
||||
## 实例化选项
|
||||
|
||||
### 1.基本
|
||||
@ -101,6 +105,7 @@ const mindMap = new MindMap({
|
||||
| customHyperlinkJump（v0.10.2+） | null、Function | false | 自定义超链接的跳转。如果不传，默认会以新窗口的方式打开超链接，可以传递一个函数，函数接收两个参数：link（超链接的url）、node（所属节点实例），只要传递了函数，就会阻止默认的跳转 |
|
||||
| openPerformance（v0.10.4+） | Boolean | false | 是否开启性能模式，默认情况下所有节点都会直接渲染，无论是否处于画布可视区域，这样当节点数量比较多时（1000+）会比较卡，如果你的数据量比较大，那么可以通过该配置开启性能模式，即只渲染画布可视区域内的节点，超出的节点不渲染，这样会大幅提高渲染速度，当然同时也会带来一些其他问题，比如：1.当拖动或是缩放画布时会实时计算并渲染未节点的节点，所以会带来一定卡顿；2.导出图片、svg、pdf时需要先渲染全部节点，所以会比较慢；3.其他目前未发现的问题 |
|
||||
| performanceConfig（v0.10.4+） | Object | { time: 250, padding: 100, removeNodeWhenOutCanvas: true } | 性能优化模式配置。time（当视图改变后多久刷新一次节点，单位：ms）、padding（超出画布四周指定范围内依旧渲染节点）、removeNodeWhenOutCanvas（节点移出画布可视区域后是否从画布删除） |
|
||||
| notShowExpandBtn（v0.10.6+） | Boolean | false | 不显示展开收起按钮，优先级比alwaysShowExpandBtn配置高 |
|
||||
|
||||
#### 1.1数据结构
|
||||
|
||||
@ -621,6 +626,7 @@ mindMap.setTheme('主题名称')
|
||||
| node_attachmentContextmenu（v0.9.10+） | 节点附件图标的右键点击事件 | this(当前节点实例)、e（事件对象）、node（图标节点） |
|
||||
| before_update_config（v0.10.4+） | 更新配置前触发，即当调用了`mindMap.updateConfig`方法更新配置时触发 | opt（未更新前的配置对象，引用对象，而非拷贝，所以当after_update_config事件触发后，该对象也会同步变化，所以需要缓存你需要的某个配置字段） |
|
||||
| after_update_config（v0.10.4+） | 更新配置后触发 | opt（更新后的配置对象） |
|
||||
| node_note_click（v0.10.6+） | 节点备注图标的点击事件 | this(当前节点实例)、e（事件对象）、node（图标节点） |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
|
||||
@ -16,6 +16,8 @@
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<h3>特别提醒</h3>
|
||||
<p>节点树渲染是一个异步的操作，所以不能实例化完后立即调用一些需要节点渲染完成才能执行的操作，否则会发生错误和一些未知的现象，你需要监听<code>node_tree_render_end</code>事件，在节点树渲染完成后再进行。除了实例化，其他诸如：<code>setData</code>、<code>updateData</code>、<code>render</code>等方法都是异步的，也需要这样处理。</p>
|
||||
<h2>实例化选项</h2>
|
||||
<h3>1.基本</h3>
|
||||
<table>
|
||||
@ -478,6 +480,12 @@
|
||||
<td>{ time: 250, padding: 100, removeNodeWhenOutCanvas: true }</td>
|
||||
<td>性能优化模式配置。time（当视图改变后多久刷新一次节点，单位：ms）、padding（超出画布四周指定范围内依旧渲染节点）、removeNodeWhenOutCanvas（节点移出画布可视区域后是否从画布删除）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>notShowExpandBtn（v0.10.6+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>不显示展开收起按钮，优先级比alwaysShowExpandBtn配置高</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h4>1.1数据结构</h4>
|
||||
@ -1631,6 +1639,11 @@ mindMap.setTheme(<span class="hljs-string">'主题名称'</span>)
|
||||
<td>更新配置后触发</td>
|
||||
<td>opt（更新后的配置对象）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_note_click（v0.10.6+）</td>
|
||||
<td>节点备注图标的点击事件</td>
|
||||
<td>this(当前节点实例)、e（事件对象）、node（图标节点）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
|
||||
@ -16,7 +16,7 @@ HandDrawnLikeStyle 是第一个收费插件，功能是提供手绘风格的样
|
||||
|
||||
## 收费
|
||||
|
||||
现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址，然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。
|
||||
现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址（如果达到文字上限，那么你可以分两次付款），然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。
|
||||
|
||||
价格：
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<p>你也可以在在线版中通过【基础样式】-【是否开启手绘风格】设置来开启手绘风格样式进行尝试。</p>
|
||||
<p>内部实现是通过<a href="https://github.com/rough-stuff/rough">rough</a>库，所以如果你有精力，也可以自己基于这个库来实现这个插件。</p>
|
||||
<h2>收费</h2>
|
||||
<p>现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址，然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。</p>
|
||||
<p>现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址（如果达到文字上限，那么你可以分两次付款），然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。</p>
|
||||
<p>价格：</p>
|
||||
<p>1.￥ 19.9，仅包含打包后的文件，即.cjs.min.js、.esm.min.js 两种格式的文件。</p>
|
||||
<p>2.￥ 29.9，包含未打包的源码和打包后的文件。</p>
|
||||
|
||||
@ -16,7 +16,7 @@ Notation 是第二个收费插件，功能是提供单个节点的标记功能
|
||||
|
||||
## 收费
|
||||
|
||||
现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址，然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。
|
||||
现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址（如果达到文字上限，那么你可以分两次付款），然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。
|
||||
|
||||
价格：
|
||||
|
||||
@ -65,8 +65,6 @@ MindMap.usePlugin(Notation)
|
||||
|
||||
注册完且实例化`MindMap`后可通过`mindMap.notation`获取到该实例。
|
||||
|
||||
注册该插件后，无需执行其他方法，手绘风格即可生效。
|
||||
|
||||
如果你是使用 mindMap.addPlugin 方法来动态注册的组件，那么需要调用一次重新渲染的方法：
|
||||
|
||||
```js
|
||||
@ -86,7 +84,7 @@ mindMap.execCommand('SET_NOTATION', appointNodes, show, config)
|
||||
|
||||
- `appointNodes`：给指定的节点实例添加标记，可以传单个节点实例，也可以传递一个节点实例数组，如果传空数组，则会给当前激活的节点添加标记；
|
||||
|
||||
- `show`：Boolean，必传，是否显示编辑；
|
||||
- `show`：Boolean，必传，是否显示标记；
|
||||
|
||||
- `config`：Object，可选，标记配置，对象格式，对象的详细字段如下：
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<p>你也可以在在线版中进行体验，先激活节点，然后点击上方【标记】按钮添加标记。</p>
|
||||
<p>内部实现是通过<a href="https://github.com/rough-stuff/rough-notation">rough-notation</a>库，所以如果你有精力，也可以自己基于这个库来实现这个插件。</p>
|
||||
<h2>收费</h2>
|
||||
<p>现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址，然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。</p>
|
||||
<p>现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址（如果达到文字上限，那么你可以分两次付款），然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。</p>
|
||||
<p>价格：</p>
|
||||
<p>1.￥ 19.9，仅包含打包后的文件，即.cjs.min.js、.esm.min.js 两种格式的文件。</p>
|
||||
<p>2.￥ 29.9，包含未打包的源码和打包后的文件。</p>
|
||||
@ -39,7 +39,6 @@ MindMap.usePlugin(Notation)
|
||||
MindMap.usePlugin(Notation)
|
||||
</code></pre>
|
||||
<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.notation</code>获取到该实例。</p>
|
||||
<p>注册该插件后，无需执行其他方法，手绘风格即可生效。</p>
|
||||
<p>如果你是使用 mindMap.addPlugin 方法来动态注册的组件，那么需要调用一次重新渲染的方法：</p>
|
||||
<pre class="hljs"><code>mindMap.addPlugin(Notation)
|
||||
mindMap.reRender()
|
||||
@ -54,7 +53,7 @@ mindMap.reRender()
|
||||
<p><code>appointNodes</code>：给指定的节点实例添加标记，可以传单个节点实例，也可以传递一个节点实例数组，如果传空数组，则会给当前激活的节点添加标记；</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>show</code>：Boolean，必传，是否显示编辑；</p>
|
||||
<p><code>show</code>：Boolean，必传，是否显示标记；</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>config</code>：Object，可选，标记配置，对象格式，对象的详细字段如下：</p>
|
||||
|
||||
90
web/src/pages/Doc/zh/numbers/index.md
Normal file
90
web/src/pages/Doc/zh/numbers/index.md
Normal file
@ -0,0 +1,90 @@
|
||||
# Numbers 收费插件
|
||||
|
||||
Numbers插件提供一键编号某个节点的子节点的功能，支持多种编号形式，支持编号指定层级：
|
||||
|
||||
<img src="../../../../assets/img/docs/编号1.jpg" style="width: 400px" />
|
||||
|
||||
<img src="../../../../assets/img/docs/编号2.jpg" style="width: 400px" />
|
||||
|
||||
<img src="../../../../assets/img/docs/编号3.jpg" style="width: 400px" />
|
||||
|
||||
你可以在在线版中通过在节点上【单击鼠标右键】-【单击编号其子节点】来进行体验。
|
||||
|
||||
## 收费
|
||||
|
||||
现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址（如果达到文字上限，那么你可以分两次付款），然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。
|
||||
|
||||
价格：￥ 29.9，包含未打包的源码和打包后的文件。
|
||||
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
|
||||
## 注册
|
||||
|
||||
1.引用打包后的文件：
|
||||
|
||||
```js
|
||||
import MindMap from 'simple-mind-map'
|
||||
import Numbers from 'numbers.cjs.min.js'
|
||||
// 或 import Numbers from 'numbers.esm.min.js'
|
||||
|
||||
MindMap.usePlugin(Numbers)
|
||||
```
|
||||
|
||||
2.引用未打包的源码
|
||||
|
||||
可以先进入到插件目录执行：
|
||||
|
||||
```bash
|
||||
npm link
|
||||
```
|
||||
|
||||
然后进入到你的项目根目录执行：
|
||||
|
||||
```bash
|
||||
npm link simple-mind-map-plugin-numbers
|
||||
```
|
||||
|
||||
然后就可以直接导入进行使用：
|
||||
|
||||
```js
|
||||
import MindMap from 'simple-mind-map'
|
||||
import Numbers from 'simple-mind-map-plugin-numbers'
|
||||
|
||||
MindMap.usePlugin(Numbers)
|
||||
```
|
||||
|
||||
注册完且实例化`MindMap`后可通过`mindMap.numbers`获取到该实例。
|
||||
|
||||
## 命令
|
||||
|
||||
注册了本插件后会在思维导图实例上新增`SET_NUMBER`命令，给节点设置编号使用该命令：
|
||||
|
||||
```js
|
||||
mindMap.execCommand('SET_NUMBER', appointNodes, number)
|
||||
```
|
||||
|
||||
该命令可以传递两个参数：
|
||||
|
||||
- `appointNodes`：给指定的节点实例设置编号，可以传单个节点实例，也可以传递一个节点实例数组，如果传空数组，则会给当前激活的节点添加标记；
|
||||
|
||||
- `number`：要设置的编号数据，如果传`null`，那么代表删除编号，否则请传递一个对象，对象的详细字段如下：
|
||||
|
||||
| 字段名称 | 类型 | 默认值 | 描述 |
|
||||
| ------- | ----- | ----- | ---- |
|
||||
| type | Number | 1 | 编号形式，默认为`1`，代表普通数字，可选值：1（纯数字）、2（数字带小数点，比如：1.）、3（数字带括号，比如：(1)）、4（小写字母，比如：a.）、5（大写字母，比如：A.）、6（小写罗马数字，比如：i.）、7（大写罗马数字，比如：I.）、8（中国大写数字，比如：一、） |
|
||||
| level | Number | 1 | 要编号的子节点层级，默认为1级，可选值：1（1级）、2（2级）、3（3级）、0（所有层级） |
|
||||
|
||||
调用命令时你可以只传递其中一个字段，比如`{ type: 1 }`，另一个字段会沿用之前的设置。
|
||||
|
||||
示例：
|
||||
|
||||
```js
|
||||
mindMap.execCommand('SET_NUMBER', [], {
|
||||
type: 2,
|
||||
level: 3
|
||||
})
|
||||
```
|
||||
|
||||
设置编号后数据会以`number`为名称保存到节点的`data`数据中。
|
||||
93
web/src/pages/Doc/zh/numbers/index.vue
Normal file
93
web/src/pages/Doc/zh/numbers/index.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Numbers 收费插件</h1>
|
||||
<p>Numbers插件提供一键编号某个节点的子节点的功能，支持多种编号形式，支持编号指定层级：</p>
|
||||
<img src="../../../../assets/img/docs/编号1.jpg" style="width: 400px" />
|
||||
<img src="../../../../assets/img/docs/编号2.jpg" style="width: 400px" />
|
||||
<img src="../../../../assets/img/docs/编号3.jpg" style="width: 400px" />
|
||||
<p>你可以在在线版中通过在节点上【单击鼠标右键】-【单击编号其子节点】来进行体验。</p>
|
||||
<h2>收费</h2>
|
||||
<p>现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址（如果达到文字上限，那么你可以分两次付款），然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。</p>
|
||||
<p>价格：￥ 29.9，包含未打包的源码和打包后的文件。</p>
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
<h2>注册</h2>
|
||||
<p>1.引用打包后的文件：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Numbers <span class="hljs-keyword">from</span> <span class="hljs-string">'numbers.cjs.min.js'</span>
|
||||
<span class="hljs-comment">// 或 import Numbers from 'numbers.esm.min.js'</span>
|
||||
|
||||
MindMap.usePlugin(Numbers)
|
||||
</code></pre>
|
||||
<p>2.引用未打包的源码</p>
|
||||
<p>可以先进入到插件目录执行：</p>
|
||||
<pre class="hljs"><code>npm link
|
||||
</code></pre>
|
||||
<p>然后进入到你的项目根目录执行：</p>
|
||||
<pre class="hljs"><code>npm link simple-mind-map-plugin-numbers
|
||||
</code></pre>
|
||||
<p>然后就可以直接导入进行使用：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Numbers <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map-plugin-numbers'</span>
|
||||
|
||||
MindMap.usePlugin(Numbers)
|
||||
</code></pre>
|
||||
<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.numbers</code>获取到该实例。</p>
|
||||
<h2>命令</h2>
|
||||
<p>注册了本插件后会在思维导图实例上新增<code>SET_NUMBER</code>命令，给节点设置编号使用该命令：</p>
|
||||
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">'SET_NUMBER'</span>, appointNodes, number)
|
||||
</code></pre>
|
||||
<p>该命令可以传递两个参数：</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>appointNodes</code>：给指定的节点实例设置编号，可以传单个节点实例，也可以传递一个节点实例数组，如果传空数组，则会给当前激活的节点添加标记；</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>number</code>：要设置的编号数据，如果传<code>null</code>，那么代表删除编号，否则请传递一个对象，对象的详细字段如下：</p>
|
||||
</li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>字段名称</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
<th>描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>type</td>
|
||||
<td>Number</td>
|
||||
<td>1</td>
|
||||
<td>编号形式，默认为<code>1</code>，代表普通数字，可选值：1（纯数字）、2（数字带小数点，比如：1.）、3（数字带括号，比如：(1)）、4（小写字母，比如：a.）、5（大写字母，比如：A.）、6（小写罗马数字，比如：i.）、7（大写罗马数字，比如：I.）、8（中国大写数字，比如：一、）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>level</td>
|
||||
<td>Number</td>
|
||||
<td>1</td>
|
||||
<td>要编号的子节点层级，默认为1级，可选值：1（1级）、2（2级）、3（3级）、0（所有层级）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>调用命令时你可以只传递其中一个字段，比如<code>{ type: 1 }</code>，另一个字段会沿用之前的设置。</p>
|
||||
<p>示例：</p>
|
||||
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">'SET_NUMBER'</span>, [], {
|
||||
<span class="hljs-attr">type</span>: <span class="hljs-number">2</span>,
|
||||
<span class="hljs-attr">level</span>: <span class="hljs-number">3</span>
|
||||
})
|
||||
</code></pre>
|
||||
<p>设置编号后数据会以<code>number</code>为名称保存到节点的<code>data</code>数据中。</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -22,6 +22,22 @@
|
||||
|
||||
## 方法
|
||||
|
||||
### activeMultiNode(nodeList = [])
|
||||
|
||||
> v0.10.6+
|
||||
|
||||
- `nodeList`：节点实例列表
|
||||
|
||||
手动激活多个节点，激活单个节点请直接调用节点实例的`active()`方法。
|
||||
|
||||
### cancelActiveMultiNode(nodeList = [])
|
||||
|
||||
> v0.10.6+
|
||||
|
||||
- `nodeList`：节点实例列表
|
||||
|
||||
手动取消激活多个节点，取消激活单个节点请直接调用节点实例的`deactivate()`方法。
|
||||
|
||||
### highlightNode(node, range)
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
@ -12,6 +12,22 @@
|
||||
<h3>layout</h3>
|
||||
<p>当前的布局实例。</p>
|
||||
<h2>方法</h2>
|
||||
<h3>activeMultiNode(nodeList = [])</h3>
|
||||
<blockquote>
|
||||
<p>v0.10.6+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>nodeList</code>：节点实例列表</li>
|
||||
</ul>
|
||||
<p>手动激活多个节点，激活单个节点请直接调用节点实例的<code>active()</code>方法。</p>
|
||||
<h3>cancelActiveMultiNode(nodeList = [])</h3>
|
||||
<blockquote>
|
||||
<p>v0.10.6+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>nodeList</code>：节点实例列表</li>
|
||||
</ul>
|
||||
<p>手动取消激活多个节点，取消激活单个节点请直接调用节点实例的<code>deactivate()</code>方法。</p>
|
||||
<h3>highlightNode(node, range)</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
|
||||
@ -68,6 +68,16 @@ MindMap.usePlugin(RichText, opt?)
|
||||
|
||||
## 方法
|
||||
|
||||
### extendFont(list = [], cover = false)
|
||||
|
||||
> v0.8.6+
|
||||
|
||||
- `list`：要扩展的字体名称列表；
|
||||
|
||||
- `cover`：是否覆盖当前的字体列表，默认为`false`，即在当前字体列表后增加；
|
||||
|
||||
动态扩展支持的字体。
|
||||
|
||||
### setNotActiveNodeStyle(node, style)
|
||||
|
||||
> v0.8.0+
|
||||
|
||||
@ -56,6 +56,19 @@ MindMap.usePlugin(RichText, opt?)
|
||||
<pre class="hljs"><code>[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, ..<span class="hljs-number">.100</span>]
|
||||
</code></pre>
|
||||
<h2>方法</h2>
|
||||
<h3>extendFont(list = [], cover = false)</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.6+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>list</code>：要扩展的字体名称列表；</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>cover</code>：是否覆盖当前的字体列表，默认为<code>false</code>，即在当前字体列表后增加；</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>动态扩展支持的字体。</p>
|
||||
<h3>setNotActiveNodeStyle(node, style)</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.0+</p>
|
||||
|
||||
@ -24,7 +24,7 @@ import {walk, ...} from 'simple-mind-map/src/utils'
|
||||
|
||||
按比例缩放图片。在保持图片原始宽高比的情况下缩放到指定的`newWidth`、`newHeight`大小。
|
||||
|
||||
#### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
|
||||
#### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0, ancestors = [])
|
||||
|
||||
深度优先遍历树
|
||||
|
||||
@ -32,9 +32,9 @@ import {walk, ...} from 'simple-mind-map/src/utils'
|
||||
|
||||
`parent`：父节点
|
||||
|
||||
`beforeCallback`：前序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index
|
||||
`beforeCallback`：前序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index, ancestors
|
||||
|
||||
`afterCallback`：后序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index
|
||||
`afterCallback`：后序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index, ancestors
|
||||
|
||||
`isRoot`：是否是根节点
|
||||
|
||||
@ -42,6 +42,8 @@ import {walk, ...} from 'simple-mind-map/src/utils'
|
||||
|
||||
`index`：节点在同级节点里的索引
|
||||
|
||||
`ancestors`：v0.10.6+，当前节点的所有祖先节点列表
|
||||
|
||||
示例：
|
||||
|
||||
```js
|
||||
|
||||
@ -15,15 +15,16 @@
|
||||
<p><code>newWidth</code>：要缩放到的宽度</p>
|
||||
<p><code>newHeight</code>：要缩放到的高度</p>
|
||||
<p>按比例缩放图片。在保持图片原始宽高比的情况下缩放到指定的<code>newWidth</code>、<code>newHeight</code>大小。</p>
|
||||
<h4>walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)</h4>
|
||||
<h4>walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0, ancestors = [])</h4>
|
||||
<p>深度优先遍历树</p>
|
||||
<p><code>root</code>：要遍历的树的根节点</p>
|
||||
<p><code>parent</code>：父节点</p>
|
||||
<p><code>beforeCallback</code>：前序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index</p>
|
||||
<p><code>afterCallback</code>：后序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index</p>
|
||||
<p><code>beforeCallback</code>：前序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index, ancestors</p>
|
||||
<p><code>afterCallback</code>：后序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index, ancestors</p>
|
||||
<p><code>isRoot</code>：是否是根节点</p>
|
||||
<p><code>layerIndex</code>：节点层级</p>
|
||||
<p><code>index</code>：节点在同级节点里的索引</p>
|
||||
<p><code>ancestors</code>：v0.10.6+，当前节点的所有祖先节点列表</p>
|
||||
<p>示例：</p>
|
||||
<pre class="hljs"><code>walk(
|
||||
tree,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user