FE/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-17 14:04:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Doc: update

Browse Source
This commit is contained in:
街角小林
2023-12-18 10:47:14 +08:00
parent 346e5b4ac8
commit f887b14d1f
35 changed files with 331 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
simple-mind-map/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "simple-mind-map",
"version": "0.9.1-fix.2",
"version": "0.9.2",
"description": "一个简单的web在线思维导图",
"authors": [
{

22
web/src/pages/Doc/en/changelog/index.md
View File

@@ -1,5 +1,27 @@
# Changelog
## 0.9.2
Fix:
> 1.Fix the issue of no line breaks when node text contains consecutive numbers or letters.
>
> 2.Fix the issue of duplicate node drawing when importing files with the same UID as existing nodes on the current canvas.
>
> 3.Fix the issue of duplicate rendering of nodes caused by forward and backward when the number of nodes exceeds the maximum number of cache pools.
>
> 4.Fix the issue of the canvas moving in the opposite direction when scrolling horizontally with the mouse or touchpad.
>
> 5.Fix the issue where the mouse in flag is not reset when a node is destroyed.
New:
> 1.Modify the mousewheel event, change the dir flag to dirs, support storing multiple directions, and optimize the dual finger movement operation of the touchpad.
>
> 2.The TextEdit class adds the isShowTextEdit method to determine whether the current node is in an editing state.
>
> 3.Change the paste method of the render class to support pasting clipboard data.
## 0.9.1-fix.2
Fix:

15
web/src/pages/Doc/en/changelog/index.vue
View File

@@ -1,6 +1,21 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.9.2</h2>
<p>Fix:</p>
<blockquote>
<p>1.Fix the issue of no line breaks when node text contains consecutive numbers or letters.</p>
<p>2.Fix the issue of duplicate node drawing when importing files with the same UID as existing nodes on the current canvas.</p>
<p>3.Fix the issue of duplicate rendering of nodes caused by forward and backward when the number of nodes exceeds the maximum number of cache pools.</p>
<p>4.Fix the issue of the canvas moving in the opposite direction when scrolling horizontally with the mouse or touchpad.</p>
<p>5.Fix the issue where the mouse in flag is not reset when a node is destroyed.</p>
</blockquote>
<p>New:</p>
<blockquote>
<p>1.Modify the mousewheel event, change the dir flag to dirs, support storing multiple directions, and optimize the dual finger movement operation of the touchpad.</p>
<p>2.The TextEdit class adds the isShowTextEdit method to determine whether the current node is in an editing state.</p>
<p>3.Change the paste method of the render class to support pasting clipboard data.</p>
</blockquote>
<h2>0.9.1-fix.2</h2>
<p>Fix:</p>
<blockquote>

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

@@ -381,7 +381,7 @@ Listen to an event. Event list:
| mousemove | el element mouse move event | e (event object), this (Event event class instance) |
| drag | If it is a drag event while holding down the left button | e (event object), this (Event event class instance) |
| mouseup | el element mouse up event | e (event object), this (Event event class instance) |
| mousewheel | Mouse scroll event | 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） |
| mousewheel | Mouse scroll event | e (event object), dir (up or down scroll. v0.9.2+ changed to dirs, array type, which supports saving multiple directions simultaneously), this (Event event class instance) 、isTouchPad（v0.6.1+, Is it an event triggered by the touchpad） |
| contextmenu | svg canvas right mouse button menu event | e (event object) |
| node_click | Node click event | this (node instance), e (event object) |
| node_mousedown | Node mouse down event | this (node instance), e (event object) |

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

@@ -910,7 +910,7 @@ poor performance and should be used sparingly.</p>
<tr>
<td>mousewheel</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 event triggered by the touchpad）</td>
<td>e (event object), dir (up or down scroll. v0.9.2+ changed to dirs, array type, which supports saving multiple directions simultaneously), this (Event event class instance) 、isTouchPad（v0.6.1+, Is it an event triggered by the touchpad）</td>
</tr>
<tr>
<td>contextmenu</td>

19
web/src/pages/Doc/en/render/index.md
View File

@@ -120,11 +120,6 @@ Search for the index of a node in the active list.
Get the position index of a node among its siblings.
### copyNode()
Copy a node, the active node is the node to be operated on, if there are
multiple active nodes, only the first node will be operated on.
### setNodeDataRender(node, data, notRender)
- `notRender`: v0.6.9+, `Boolean`, Default is `false`, Do not trigger rendering.
@@ -181,22 +176,30 @@ Find the corresponding node instance based on the uid.
> v0.6.8+
Copy nodes. After calling this method, the current activated node data will be stored. Multiple activated nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.
Copy nodes. After calling this method, the current activated node data will be stored. and subsequent calls to the 'paste()' method can be pasted.
If the browser and protocol (https) support 'js' to manipulate clipboard data, the copied node data will also be added to the user's clipboard.
### cut()
> v0.6.8+
Cut a node. After calling this method, the currently active node will be cut and the node data will be stored. Multiple nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.
Cut a node. After calling this method, the currently active node will be cut and the node data will be stored. and subsequent calls to the 'paste()' method can be pasted.
If the browser and protocol (https) support 'js' to manipulate clipboard data, the copied node data will also be added to the user's clipboard.
### paste()
> v0.6.8+
Pasting nodes can be done by calling the 'copy()' or 'cut()' method after calling it. This method does not support pasting data from the user's clipboard. Please use the built-in 'Ctrl+v' shortcut key.
Pasting nodes can be done by calling the 'copy()' or 'cut()' method after calling it.
If the browser and protocol (https) support 'js' to manipulate clipboard data, data copied from other places can also be pasted. For example, you can paste' simple mind map 'nodes across browsers. If it is non' simple mind map 'node data, the text and images in the clipboard will be extracted and pasted. The text will be pasted as a child node by default, and the images will be added to the current node by default.
### clearCache()
> v0.9.2+
Empty the node cache pool.
### emitNodeActiveEvent(node = null, activeNodeList = [...this.activeNodeList])

15
web/src/pages/Doc/en/render/index.vue
View File

@@ -96,9 +96,6 @@ disable the enter key and delete key related shortcuts to prevent conflicts.</p>
<p>Search for the index of a node in the active list.</p>
<h3>getNodeIndex(node)</h3>
<p>Get the position index of a node among its siblings.</p>
<h3>copyNode()</h3>
<p>Copy a node, the active node is the node to be operated on, if there are
multiple active nodes, only the first node will be operated on.</p>
<h3>setNodeDataRender(node, data, notRender)</h3>
<ul>
<li><code>notRender</code>: v0.6.9+, <code>Boolean</code>, Default is <code>false</code>, Do not trigger rendering.</li>
@@ -152,18 +149,24 @@ is an object, e.g. <code>{text: 'I am new text'}</code>.</p>
<blockquote>
<p>v0.6.8+</p>
</blockquote>
<p>Copy nodes. After calling this method, the current activated node data will be stored. Multiple activated nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.</p>
<p>Copy nodes. After calling this method, the current activated node data will be stored. and subsequent calls to the 'paste()' method can be pasted.</p>
<p>If the browser and protocol (https) support 'js' to manipulate clipboard data, the copied node data will also be added to the user's clipboard.</p>
<h3>cut()</h3>
<blockquote>
<p>v0.6.8+</p>
</blockquote>
<p>Cut a node. After calling this method, the currently active node will be cut and the node data will be stored. Multiple nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.</p>
<p>Cut a node. After calling this method, the currently active node will be cut and the node data will be stored. and subsequent calls to the 'paste()' method can be pasted.</p>
<p>If the browser and protocol (https) support 'js' to manipulate clipboard data, the copied node data will also be added to the user's clipboard.</p>
<h3>paste()</h3>
<blockquote>
<p>v0.6.8+</p>
</blockquote>
<p>Pasting nodes can be done by calling the 'copy()' or 'cut()' method after calling it. This method does not support pasting data from the user's clipboard. Please use the built-in 'Ctrl+v' shortcut key.</p>
<p>Pasting nodes can be done by calling the 'copy()' or 'cut()' method after calling it.</p>
<p>If the browser and protocol (https) support 'js' to manipulate clipboard data, data copied from other places can also be pasted. For example, you can paste' simple mind map 'nodes across browsers. If it is non' simple mind map 'node data, the text and images in the clipboard will be extracted and pasted. The text will be pasted as a child node by default, and the images will be added to the current node by default.</p>
<h3>clearCache()</h3>
<blockquote>
<p>v0.9.2+</p>
</blockquote>
<p>Empty the node cache pool.</p>
<h3>emitNodeActiveEvent(node = null, activeNodeList = [...this.activeNodeList])</h3>
<ul>

6
web/src/pages/Doc/en/utils/index.md
View File

@@ -498,4 +498,8 @@ Check if a cache exists.
#### get(key)
Gets the value of a cache.
Gets the value of a cache.
> v0.9.2+
Empty the cache pool.

4
web/src/pages/Doc/en/utils/index.vue
View File

@@ -397,6 +397,10 @@ drawBackgroundImageToCanvas(ctx, width, height, img, {
<p>Check if a cache exists.</p>
<h4>get(key)</h4>
<p>Gets the value of a cache.</p>
<blockquote>
<p>v0.9.2+</p>
</blockquote>
<p>Empty the cache pool.</p>
</div>
</template>

22
web/src/pages/Doc/zh/changelog/index.md
View File

@@ -1,5 +1,27 @@
# Changelog
## 0.9.2
修复：
> 1.修复节点文本含有连续的数字或字母时没有换行的问题。
>
> 2.修复导入含有和当前画布已有节点uid相同的文件时会重复绘制节点的问题。
>
> 3.修复当节点数量超出了缓存池的最大数量时，前进回退会导致节点重复渲染的问题。
>
> 4.修复鼠标或触控板水平滚动时画布移动方向相反的问题。
>
> 5.修复节点被销毁时鼠标移入标志没有复位的问题。
新增：
> 1.修改mousewheel事件,dir标志修改为dirs,支持存储多个方向,优化触控板的双指移动操作。
>
> 2.TextEdit类增加isShowTextEdit方法判断当前是否处在节点编辑状态。
>
> 3.Render类的paste方法改为支持粘贴剪贴板的数据。
## 0.9.1-fix.2
修复：

15
web/src/pages/Doc/zh/changelog/index.vue
View File

@@ -1,6 +1,21 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.9.2</h2>
<p>修复：</p>
<blockquote>
<p>1.修复节点文本含有连续的数字或字母时没有换行的问题。</p>
<p>2.修复导入含有和当前画布已有节点uid相同的文件时会重复绘制节点的问题。</p>
<p>3.修复当节点数量超出了缓存池的最大数量时，前进回退会导致节点重复渲染的问题。</p>
<p>4.修复鼠标或触控板水平滚动时画布移动方向相反的问题。</p>
<p>5.修复节点被销毁时鼠标移入标志没有复位的问题。</p>
</blockquote>
<p>新增：</p>
<blockquote>
<p>1.修改mousewheel事件,dir标志修改为dirs,支持存储多个方向,优化触控板的双指移动操作。</p>
<p>2.TextEdit类增加isShowTextEdit方法判断当前是否处在节点编辑状态。</p>
<p>3.Render类的paste方法改为支持粘贴剪贴板的数据。</p>
</blockquote>
<h2>0.9.1-fix.2</h2>
<p>修复：</p>
<blockquote>

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

@@ -379,7 +379,7 @@ mindMap.setTheme('主题名称')
| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） |
| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） |
| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） |
| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例）、isTouchPad（v0.6.1+，是否是触控板触发的事件） |
| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动。v0.9.2+已改为dirs，数组类型，即支持同时保存多个方向）、this（Event事件类实例）、isTouchPad（v0.6.1+，是否是触控板触发的事件） |
| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） |
| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） |
| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） |

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

@@ -826,7 +826,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr>
<td>mousewheel</td>
<td>鼠标滚动事件</td>
<td>e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例）、isTouchPad（v0.6.1+，是否是触控板触发的事件）</td>
<td>e（事件对象）、dir（向上up还是向下down滚动。v0.9.2+已改为dirs，数组类型，即支持同时保存多个方向）、this（Event事件类实例）、isTouchPad（v0.6.1+，是否是触控板触发的事件）</td>
</tr>
<tr>
<td>contextmenu</td>

2
web/src/pages/Doc/zh/course11/index.md
View File

@@ -1,6 +1,6 @@
# 结构
`simple-mind-map`目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）、verticalTimeline（v0.6.6+竖向时间轴）。
`simple-mind-map`目前支持的结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）、verticalTimeline（v0.6.6+竖向时间轴）。
可以在实例化`simple-mind-map`时通过选项指定使用的结构：

2
web/src/pages/Doc/zh/course11/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<h1>结构</h1>
<p><code>simple-mind-map</code>目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）、verticalTimeline（v0.6.6+竖向时间轴）。</p>
<p><code>simple-mind-map</code>目前支持的结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）、verticalTimeline（v0.6.6+竖向时间轴）。</p>
<p>可以在实例化<code>simple-mind-map</code>时通过选项指定使用的结构：</p>
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
<span class="hljs-comment">// ...</span>

18
web/src/pages/Doc/zh/course13/index.md
View File

@@ -15,6 +15,10 @@
name: '插入同级节点',
value: 'Enter'
},
{
name: '插入父节点',
value: 'Shift + Tab'
},
{
name: '上移节点',
value: 'Ctrl + ↑'
@@ -35,6 +39,10 @@
name: '删除节点',
value: 'Delete | Backspace'
},
{
name: '仅删除当前节点',
value: 'Shift + Backspace'
},
{
name: '复制节点',
value: 'Ctrl + C'
@@ -89,8 +97,16 @@
value: 'Ctrl + -'
},
{
name: '恢复默认',
name: '放大缩小',
value: 'Ctrl + 鼠标滚动'
},
{
name: '回到根节点',
value: 'Ctrl + Enter'
},
{
name: '适应画布',
value: 'Ctrl + i'
}
]
}

18
web/src/pages/Doc/zh/course13/index.vue
View File

@@ -14,6 +14,10 @@
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;插入同级节点&#x27;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Enter&#x27;</span>
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;插入父节点&#x27;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Shift + Tab&#x27;</span>
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;上移节点&#x27;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + ↑&#x27;</span>
@@ -34,6 +38,10 @@
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;删除节点&#x27;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Delete | Backspace&#x27;</span>
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;仅删除当前节点&#x27;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Shift + Backspace&#x27;</span>
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;复制节点&#x27;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + C&#x27;</span>
@@ -88,8 +96,16 @@
<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + -&#x27;</span>
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;恢复默认&#x27;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;放大缩小&#x27;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + 鼠标滚动&#x27;</span>
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;回到根节点&#x27;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + Enter&#x27;</span>
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;适应画布&#x27;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Ctrl + i&#x27;</span>
}
]
}

38
web/src/pages/Doc/zh/course15/index.md
View File

@@ -88,37 +88,15 @@ mindMap.on('expand_btn_click', hide)
接下来介绍一下复制、剪切、粘贴的实现。
一般来说你的右键菜单中肯定也会添加这三个按钮，另外快捷键操作也是必不可少的，但是这三个快捷键是没有内置的，所以你需要自己注册一下：
一般来说你的右键菜单中肯定也会添加这三个按钮，当点击这三个按钮时你需要调用对应的方法：
```js
mindMap.keyCommand.addShortcut('Control+c', copy)
mindMap.keyCommand.addShortcut('Control+v', paste)
mindMap.keyCommand.addShortcut('Control+x', cut)
```
// 当点击了复制按钮时调用
mindMap.renderer.copy()
如需删除调用`removeShortcut`方法即可。
// 当点击了剪切按钮时调用
mindMap.renderer.cut()
接下来实现一下这三个方法：
```js
// 保存复制/剪切的节点的数据，后续可以原来粘贴
let copyData = null
const copy = () => {
copyData = mindMap.renderer.copyNode()
}
const cut = () => {
mindMap.execCommand('CUT_NODE', _copyData => {
copyData = _copyData
})
}
const paste = () => {
mindMap.execCommand('PASTE_NODE', copyData)
}
```
## 完整示例
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#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" />
// 当点击了粘贴按钮时调用
mindMap.renderer.paste()
```

33
web/src/pages/Doc/zh/course15/index.vue
View File

@@ -73,32 +73,17 @@ mindMap.on(<span class="hljs-string">&#x27;expand_btn_click&#x27;</span>, hide)
</code></pre>
<h2>复制、剪切、粘贴的实现</h2>
<p>接下来介绍一下复制、剪切、粘贴的实现。</p>
<p>一般来说你的右键菜单中肯定也会添加这三个按钮，另外快捷键操作也是必不可少的，但是这三个快捷键是没有内置的，所以你需要自己注册一下：</p>
<pre class="hljs"><code>mindMap.keyCommand.addShortcut(<span class="hljs-string">&#x27;Control+c&#x27;</span>, copy)
mindMap.keyCommand.addShortcut(<span class="hljs-string">&#x27;Control+v&#x27;</span>, paste)
mindMap.keyCommand.addShortcut(<span class="hljs-string">&#x27;Control+x&#x27;</span>, cut)
<p>一般来说你的右键菜单中肯定也会添加这三个按钮，当点击这三个按钮时你需要调用对应的方法：</p>
<pre class="hljs"><code><span class="hljs-comment">// 当点击了复制按钮时调用</span>
mindMap.renderer.copy()
<span class="hljs-comment">// 当点击了剪切按钮时调用</span>
mindMap.renderer.cut()
<span class="hljs-comment">// 当点击了粘贴按钮时调用</span>
mindMap.renderer.paste()
</code></pre>
<p>如需删除调用<code>removeShortcut</code>方法即可。</p>
<p>接下来实现一下这三个方法：</p>
<pre class="hljs"><code><span class="hljs-comment">// 保存复制/剪切的节点的数据，后续可以原来粘贴</span>
<span class="hljs-keyword">let</span> copyData = <span class="hljs-literal">null</span>
<span class="hljs-keyword">const</span> copy = <span class="hljs-function">() =&gt;</span> {
copyData = mindMap.renderer.copyNode()
}
<span class="hljs-keyword">const</span> cut = <span class="hljs-function">() =&gt;</span> {
mindMap.execCommand(<span class="hljs-string">&#x27;CUT_NODE&#x27;</span>, <span class="hljs-function"><span class="hljs-params">_copyData</span> =&gt;</span> {
copyData = _copyData
})
}
<span class="hljs-keyword">const</span> paste = <span class="hljs-function">() =&gt;</span> {
mindMap.execCommand(<span class="hljs-string">&#x27;PASTE_NODE&#x27;</span>, copyData)
}
</code></pre>
<h2>完整示例</h2>
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#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" />
</div>
</template>

32
web/src/pages/Doc/zh/course21/index.md
View File

@@ -1,20 +1,8 @@
# 如何复制、剪切、粘贴
## 使用快捷键
核心库内部默认支持`Ctrl+c`、`Ctrl+x`、`Ctrl+v`三个快捷键来执行复制、剪切、粘贴操作。
当激活了某个节点，按`Ctrl+c`会复制当前激活节点的数据，按`Ctrl+x`会删除当前激活节点，同时保存该节点的数据，这两个操作当同时存在多个激活节点，只会对第一个生效。
当按了`Ctrl+c`或`Ctrl+x`后，按`Ctrl+v`会在当前激活的节点粘贴复制或剪切的数据，也就是被复制或剪切的节点会作为该节点的子节点。
除了支持粘贴在画布中复制或剪切的节点数据外，如果你再其他地方复制了文本或图片，也支持进行粘贴，也就是会粘贴你当前剪贴板中的数据，如果你的剪切板中存在文本数据，那么会粘贴作为当前激活节点的子节点，如果存在图片数据，那么会直接给当前激活节点添加或替换图片。
如果复制或剪切了画布数据，同时剪切板中也存在数据，那么默认会以最新的`Ctrl+c`或`Ctrl+x`操作为准，比如你先复制了节点，然后又复制了其他地方的文本，那么会粘贴最后一次的操作，也就是其他地方复制的文本数据。
## 使用按钮触发
一般会在右键菜单上下文中显然复制、剪切、粘贴三个按钮，当点击了这三个按钮也需要能执行复制、剪切、粘贴操作，这需要调用内部的一些方法来完成：
一个常规的思维导图一般会实现一个右键菜单，右键菜单中会提供复制、剪切、粘贴三个按钮，当点击了这三个按钮需要能执行复制、剪切、粘贴操作，这需要调用内部的一些方法来完成：
```js
// 点击了复制按钮
@@ -33,7 +21,23 @@ const onPasteBtnClick = () => {
}
```
需要注意的是，这三个方法只能复制、剪切、粘贴画布中的节点数据，不支持操作用户的剪切板数据。
`copy`和`cut`方法会保存你当前激活的节点数据用于粘贴，如果浏览器及协议（https）支持`js`操作剪贴板数据，那么复制或剪切的节点数据也会同时添加到用户的剪贴板中，在其他地方也可以进行粘贴。
`paste`方法会执行粘贴操作，如果浏览器及协议（https）支持`js`操作剪贴板数据，那么其他地方复制的数据也可以进行粘贴，比如你可以进行跨浏览器粘贴`simple-mind-map`节点，如果是非`simple-mind-map`节点数据，那么会提取出剪切板中的文本和图片进行粘贴，文本默认会粘贴为子节点，图片默认会添加到当前的节点中。
如果浏览器或协议（https）不支持`js`操作剪贴板数据，那么`copy`和`cut`方法复制和剪切的数据只会保存在当前页面的内存中，无法在其他地方粘贴。
如果复制或剪切了画布数据，同时剪切板中也存在数据，那么默认会以最新的`Ctrl+c`或`Ctrl+x`操作为准，比如你先复制了节点，然后又复制了其他地方的文本，那么会粘贴最后一次的操作，也就是其他地方复制的文本数据。
## 使用快捷键
核心库内部默认支持`Ctrl+c`、`Ctrl+x`、`Ctrl+v`三个快捷键来执行复制、剪切、粘贴操作。
当激活了某个节点，按`Ctrl+c`会复制当前激活节点的数据，按`Ctrl+x`会删除当前激活节点，同时保存该节点的数据供粘贴。
当按了`Ctrl+c`或`Ctrl+x`后，按`Ctrl+v`会在当前激活的节点粘贴复制或剪切的数据。
这三个快捷键内部调用的其实就是前面的`copy`、`cut`、`paste`方法。
### 完整示例

18
web/src/pages/Doc/zh/course21/index.vue
View File

@@ -1,14 +1,8 @@
<template>
<div>
<h1>如何复制、剪切、粘贴</h1>
<h2>使用快捷键</h2>
<p>核心库内部默认支持<code>Ctrl+c</code>、<code>Ctrl+x</code>、<code>Ctrl+v</code>三个快捷键来执行复制、剪切、粘贴操作。</p>
<p>当激活了某个节点，按<code>Ctrl+c</code>会复制当前激活节点的数据，按<code>Ctrl+x</code>会删除当前激活节点，同时保存该节点的数据，这两个操作当同时存在多个激活节点，只会对第一个生效。</p>
<p>当按了<code>Ctrl+c</code>或<code>Ctrl+x</code>后，按<code>Ctrl+v</code>会在当前激活的节点粘贴复制或剪切的数据，也就是被复制或剪切的节点会作为该节点的子节点。</p>
<p>除了支持粘贴在画布中复制或剪切的节点数据外，如果你再其他地方复制了文本或图片，也支持进行粘贴，也就是会粘贴你当前剪贴板中的数据，如果你的剪切板中存在文本数据，那么会粘贴作为当前激活节点的子节点，如果存在图片数据，那么会直接给当前激活节点添加或替换图片。</p>
<p>如果复制或剪切了画布数据，同时剪切板中也存在数据，那么默认会以最新的<code>Ctrl+c</code>或<code>Ctrl+x</code>操作为准，比如你先复制了节点，然后又复制了其他地方的文本，那么会粘贴最后一次的操作，也就是其他地方复制的文本数据。</p>
<h2>使用按钮触发</h2>
<p>一般会在右键菜单上下文中显然复制、剪切、粘贴三个按钮，当点击了这三个按钮也需要能执行复制、剪切、粘贴操作，这需要调用内部的一些方法来完成：</p>
<p>一个常规的思维导图一般会实现一个右键菜单，右键菜单中会提供复制、剪切、粘贴三个按钮，当点击了这三个按钮需要能执行复制、剪切、粘贴操作，这需要调用内部的一些方法来完成：</p>
<pre class="hljs"><code><span class="hljs-comment">// 点击了复制按钮</span>
<span class="hljs-keyword">const</span> onCopyBtnClick = <span class="hljs-function">() =&gt;</span> {
mindMap.renderer.copy()
@@ -24,7 +18,15 @@
mindMap.renderer.paste()
}
</code></pre>
<p>需要注意的是，这三个方法只能复制、剪切、粘贴画布中的节点数据，不支持操作用户的剪切板数据。</p>
<p><code>copy</code>和<code>cut</code>方法会保存你当前激活的节点数据用于粘贴，如果浏览器及协议（https）支持<code>js</code>操作剪贴板数据，那么复制或剪切的节点数据也会同时添加到用户的剪贴板中，在其他地方也可以进行粘贴。</p>
<p><code>paste</code>方法会执行粘贴操作，如果浏览器及协议（https）支持<code>js</code>操作剪贴板数据，那么其他地方复制的数据也可以进行粘贴，比如你可以进行跨浏览器粘贴<code>simple-mind-map</code>节点，如果是非<code>simple-mind-map</code>节点数据，那么会提取出剪切板中的文本和图片进行粘贴，文本默认会粘贴为子节点，图片默认会添加到当前的节点中。</p>
<p>如果浏览器或协议（https）不支持<code>js</code>操作剪贴板数据，那么<code>copy</code>和<code>cut</code>方法复制和剪切的数据只会保存在当前页面的内存中，无法在其他地方粘贴。</p>
<p>如果复制或剪切了画布数据，同时剪切板中也存在数据，那么默认会以最新的<code>Ctrl+c</code>或<code>Ctrl+x</code>操作为准，比如你先复制了节点，然后又复制了其他地方的文本，那么会粘贴最后一次的操作，也就是其他地方复制的文本数据。</p>
<h2>使用快捷键</h2>
<p>核心库内部默认支持<code>Ctrl+c</code>、<code>Ctrl+x</code>、<code>Ctrl+v</code>三个快捷键来执行复制、剪切、粘贴操作。</p>
<p>当激活了某个节点，按<code>Ctrl+c</code>会复制当前激活节点的数据，按<code>Ctrl+x</code>会删除当前激活节点，同时保存该节点的数据供粘贴。</p>
<p>当按了<code>Ctrl+c</code>或<code>Ctrl+x</code>后，按<code>Ctrl+v</code>会在当前激活的节点粘贴复制或剪切的数据。</p>
<p>这三个快捷键内部调用的其实就是前面的<code>copy</code>、<code>cut</code>、<code>paste</code>方法。</p>
<h3>完整示例</h3>
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVc1OGzEQfpWRqypJFXaD1FMaEIX20AMV4lpz2Ow6ianXXq29BIRy4VCgopeeeuyhUqUeeqhQJejrEKBv0fH+k0RVbkSKtJ75vm/Gnhn7mLyMIucgYaRLetqPeWRAM5NE61TyMFKxgWOI2aANSm6rRBoWtEGPPCHUeJcNYAKDWIXQQIVGydjmMtj2osxFiUazYCshWldCL6KESgAqBTNgbRa5BjIRgkoqXRfuTq6mp39urj9Mv32anv2+vTj/+/knlb6S2mAaWyo62jRyS3D/PRKbLVhbh2OrCYWeEzMZsJjFjo/gZovKyZz2+Y/p2emcdmKWl07MQuW7X1/uLy9nlXc8bdjS2pFFl+rl0TdrrNrRsXFx5M1ckIkuBMpPQiaNM2TmtWD2c/PoTdBs5MwtJY3HJYsbrXbGCjzjdYucsETEGiipmTKzYYfGmim5/Xp1//EEt54V1f4muZgF+iMuAtyUBb+rNGbkFkaZjXRzfXF3/X022MOAC4LuVb467pEyKD5zW8HjkptdpcxbFbAdpbnhSiKzIdjANNrQ8LF0WKa9FD5pvcC2wNboudm84qTiwjAcMs8wXAH0An4AvvC0XqMkL/crFipKUncO4EHlLZsBIT0XvXVgoWSUEn3PQoqN9PqJMUrChm/bGiEPxxOR2Qz33Az4X2I1e5aXzucyvAeThcxs/maY1Z6Kr55bOzJcanMkstPbyK8xShw3u7vy6XKYDh1fa0qwBPYKA3Bqp1u0z5gHZtSF1U7naYoDiMqixgwj8gOWOtJ+sP8ns1UopCqi19dKJCYjAtjW6EInXxkVVYv58CPGhyOEP+90osMi8uK4z8oryYuHHOMWqpEXBFwOC0OZupM3xZIZrxYZ5EmXaxTEhk5rQNokq4B9LZx9rSQ+Tqk8zR1YgXJYKcG3J5tQx8VPJ8arkofMFmulH6uxxvt0Hxn5sC14jzLufKktK89tQib/AMXMadM=" />
</div>

4
web/src/pages/Doc/zh/course22/index.md
View File

@@ -36,4 +36,6 @@ mindMap.search.replaceAll(this.replaceText)
mindMap.on('search_info_change', data => {
console.log('当前所在：'+ (data.currentIndex + 1), '匹配总数：' + data.total)
})
```
```
如果是只读模式下搜索，搜索匹配到的节点不会被激活，而是被高亮。

1
web/src/pages/Doc/zh/course22/index.vue
View File

@@ -24,6 +24,7 @@
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;当前所在：&#x27;</span>+ (data.currentIndex + <span class="hljs-number">1</span>), <span class="hljs-string">&#x27;匹配总数：&#x27;</span> + data.total)
})
</code></pre>
<p>如果是只读模式下搜索，搜索匹配到的节点不会被激活，而是被高亮。</p>
</div>
</template>

54
web/src/pages/Doc/zh/course3/index.md
View File

@@ -2,6 +2,8 @@
首先和操作节点内容一样，也需要监听节点的激活事件，然后禁用相关按钮。
以下命令都支持传递一些参数，详情请参考【API】-【构造函数】-【execCommand方法】小节中该命令的介绍。
## 插入子节点
插入子节点很简单，执行`INSERT_CHILD_NODE`命令即可：
@@ -12,8 +14,6 @@ mindMap.execCommand('INSERT_CHILD_NODE')
这样就会在当前激活节点（如果存在多个激活节点，默认会操作第一个激活节点）下添加一个子节点。
`INSERT_CHILD_NODE`命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。
如果你想获取插入节点的实例，可以这样操作：
1.需要指定新插入节点的`id`，比如：
@@ -36,14 +36,52 @@ mindMap.on('node_tree_render_end', () => {
})
```
## 插入兄弟节点
## 插入多个子节点
插入兄弟节点和插入子节点方式完全一致：
如果你要同时插入多个子节点，那么可以执行`INSERT_MULTI_CHILD_NODE`命令：
```js
mindMap.execCommand('INSERT_MULTI_CHILD_NODE', [], childList)
```
`childList`是要插入的子节点数据的数组，必传。
```js
[
{
data: {
text: '自定义节点1'
}
}
]
```
## 插入同级节点
插入同级节点和插入子节点方式完全一致：
```js
mindMap.execCommand('INSERT_NODE')
```
## 插入多个同级节点
插入多个同级节点可以执行`INSERT_MULTI_NODE`命令：
```js
mindMap.execCommand('INSERT_NODE'. [], nodeList)
```
`nodeList`是要插入的同级节点数据的数组，必传。
## 插入父节点
要插入父节点可以调用`INSERT_PARENT_NODE`命令：
```js
mindMap.execCommand('INSERT_PARENT_NODE')
```
## 删除节点
删除节点也是执行命令：
@@ -54,6 +92,14 @@ mindMap.execCommand('REMOVE_NODE')
会删除当前激活的所有节点。
## 仅删除当前节点
`REMOVE_CURRENT_NODE`命令可以仅删除激活的节点，子节点不会被删除。
```js
mindMap.execCommand('REMOVE_CURRENT_NODE')
```
## 前进回退
首先需要监听`back_forward`事件，事件回调中可以获取当前的历史记录总数，以及当前所在的历史记录索引，那么就可以判断当前是否处于历史记录的最开始，还是最后，然后对前进回退按钮进行禁用。

32
web/src/pages/Doc/zh/course3/index.vue
View File

@@ -2,12 +2,12 @@
<div>
<h1>插入/删除节点、前进回退</h1>
<p>首先和操作节点内容一样，也需要监听节点的激活事件，然后禁用相关按钮。</p>
<p>以下命令都支持传递一些参数，详情请参考【API】-【构造函数】-【execCommand方法】小节中该命令的介绍。</p>
<h2>插入子节点</h2>
<p>插入子节点很简单，执行<code>INSERT_CHILD_NODE</code>命令即可：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>)
</code></pre>
<p>这样就会在当前激活节点（如果存在多个激活节点，默认会操作第一个激活节点）下添加一个子节点。</p>
<p><code>INSERT_CHILD_NODE</code>命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。</p>
<p>如果你想获取插入节点的实例，可以这样操作：</p>
<p>1.需要指定新插入节点的<code>id</code>，比如：</p>
<pre class="hljs"><code><span class="hljs-keyword">import</span> { createUid } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils&#x27;</span>
@@ -23,15 +23,41 @@ mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</spa
<span class="hljs-keyword">const</span> node = mindMap.renderer.findNodeByUid(uid)
})
</code></pre>
<h2>插入兄弟节点</h2>
<p>插入兄弟节点和插入子节点方式完全一致：</p>
<h2>插入多个子节点</h2>
<p>如果你要同时插入多个子节点，那么可以执行<code>INSERT_MULTI_CHILD_NODE</code>命令：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_MULTI_CHILD_NODE&#x27;</span>, [], childList)
</code></pre>
<p><code>childList</code>是要插入的子节点数据的数组，必传。</p>
<pre class="hljs"><code>[
{
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;自定义节点1&#x27;</span>
}
}
]
</code></pre>
<h2>插入同级节点</h2>
<p>插入同级节点和插入子节点方式完全一致：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_NODE&#x27;</span>)
</code></pre>
<h2>插入多个同级节点</h2>
<p>插入多个同级节点可以执行<code>INSERT_MULTI_NODE</code>命令：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_NODE&#x27;</span>. [], nodeList)
</code></pre>
<p><code>nodeList</code>是要插入的同级节点数据的数组，必传。</p>
<h2>插入父节点</h2>
<p>要插入父节点可以调用<code>INSERT_PARENT_NODE</code>命令：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_PARENT_NODE&#x27;</span>)
</code></pre>
<h2>删除节点</h2>
<p>删除节点也是执行命令：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;REMOVE_NODE&#x27;</span>)
</code></pre>
<p>会删除当前激活的所有节点。</p>
<h2>仅删除当前节点</h2>
<p><code>REMOVE_CURRENT_NODE</code>命令可以仅删除激活的节点，子节点不会被删除。</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;REMOVE_CURRENT_NODE&#x27;</span>)
</code></pre>
<h2>前进回退</h2>
<p>首先需要监听<code>back_forward</code>事件，事件回调中可以获取当前的历史记录总数，以及当前所在的历史记录索引，那么就可以判断当前是否处于历史记录的最开始，还是最后，然后对前进回退按钮进行禁用。</p>
<pre class="hljs"><code><span class="hljs-keyword">const</span> isStart = ref(<span class="hljs-literal">true</span>)

2
web/src/pages/Doc/zh/course7/index.md
View File

@@ -1,5 +1,7 @@
# 开启节点自由拖拽
> 节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。
节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化`simple-mind-map`时传入开启的选项：
```js

3
web/src/pages/Doc/zh/course7/index.vue
View File

@@ -1,6 +1,9 @@
<template>
<div>
<h1>开启节点自由拖拽</h1>
<blockquote>
<p>节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。</p>
</blockquote>
<p>节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化<code>simple-mind-map</code>时传入开启的选项：</p>
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
<span class="hljs-comment">// ...</span>

6
web/src/pages/Doc/zh/course8/index.md
View File

@@ -1,8 +1,8 @@
# 开启节点富文本编辑
默认节点编辑是不支持富文本模式的，如果要开启需要使用富文本编辑插件，但是富文本编辑模式目前存在缺陷，详情可以阅读[richText](https://wanglin2.github.io/mind-map/#/doc/zh/richText)。
默认节点编辑是不支持富文本模式的，如果要开启需要使用富文本编辑插件。
富文本编辑的优势就是可以对一个节点内的部分文本设置样式，所以通常来说还需要搭配一个悬浮的工具栏，这个功能默认也是没有的，涉及到UI的功能一般都不提供，所以也需要你自行开发，如何渲染这个悬浮工具栏可以阅读[如何渲染富文本的悬浮工具栏](https://wanglin2.github.io/mind-map/#/doc/zh/course16)。
富文本编辑的优势就是可以对一个节点内的部分文本设置样式，所以通常来说还需要搭配一个悬浮的工具栏，这个功能默认也是没有的，涉及到UI的功能库都不提供，所以也需要你自行开发，如何渲染这个悬浮工具栏可以阅读[如何渲染富文本的悬浮工具栏](https://wanglin2.github.io/mind-map/#/doc/zh/course16)。
如果也你需要动态切换是否开启富文本编辑的功能可以参考如下代码：
@@ -18,4 +18,4 @@ mindMap.addPlugin(RichText)
mindMap.removePlugin(RichText)
```
如果你使用的是`simpleMindMap.umd.js`或`simpleMindMap.esm.js`这种打包后的完整版，那么是不支持切换的，默认是就是开启的，如有相关需求可以提[issue](https://github.com/wanglin2/mind-map/issues)。
如果你使用的是`simpleMindMap.umd.js`或`simpleMindMap.esm.js`这种打包后的完整版，那么是不支持切换的，默认是就是开启的。

6
web/src/pages/Doc/zh/course8/index.vue
View File

@@ -1,8 +1,8 @@
<template>
<div>
<h1>开启节点富文本编辑</h1>
<p>默认节点编辑是不支持富文本模式的，如果要开启需要使用富文本编辑插件，但是富文本编辑模式目前存在缺陷，详情可以阅读<a href="https://wanglin2.github.io/mind-map/#/doc/zh/richText">richText</a>。</p>
<p>富文本编辑的优势就是可以对一个节点内的部分文本设置样式，所以通常来说还需要搭配一个悬浮的工具栏，这个功能默认也是没有的，涉及到UI的功能一般都不提供，所以也需要你自行开发，如何渲染这个悬浮工具栏可以阅读<a href="https://wanglin2.github.io/mind-map/#/doc/zh/course16">如何渲染富文本的悬浮工具栏</a>。</p>
<p>默认节点编辑是不支持富文本模式的，如果要开启需要使用富文本编辑插件。</p>
<p>富文本编辑的优势就是可以对一个节点内的部分文本设置样式，所以通常来说还需要搭配一个悬浮的工具栏，这个功能默认也是没有的，涉及到UI的功能库都不提供，所以也需要你自行开发，如何渲染这个悬浮工具栏可以阅读<a href="https://wanglin2.github.io/mind-map/#/doc/zh/course16">如何渲染富文本的悬浮工具栏</a>。</p>
<p>如果也你需要动态切换是否开启富文本编辑的功能可以参考如下代码：</p>
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
<span class="hljs-keyword">import</span> RichText <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/RichText.js&#x27;</span>
@@ -14,7 +14,7 @@ mindMap.addPlugin(RichText)
<span class="hljs-comment">// 动态关闭富文本编辑</span>
mindMap.removePlugin(RichText)
</code></pre>
<p>如果你使用的是<code>simpleMindMap.umd.js</code>或<code>simpleMindMap.esm.js</code>这种打包后的完整版，那么是不支持切换的，默认是就是开启的，如有相关需求可以提<a href="https://github.com/wanglin2/mind-map/issues">issue</a>。</p>
<p>如果你使用的是<code>simpleMindMap.umd.js</code>或<code>simpleMindMap.esm.js</code>这种打包后的完整版，那么是不支持切换的，默认是就是开启的。</p>
</div>
</template>

10
web/src/pages/Doc/zh/course9/index.md
View File

@@ -5,9 +5,15 @@
```js
new MindMap({
// ...
mousewheelAction: 'zoom'// zoom（放大缩小）、move（上下移动）
mousewheelAction: 'move'// zoom（放大缩小）、move（上下移动）
// 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
mousewheelMoveStep: 100,
// 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点
mouseScaleCenterUseMousePosition: true,
// 当mousewheelAction设为zoom时，或者按住Ctrl键时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来
mousewheelZoomActionReverse: true,
// 禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放
disableMouseWheelZoom: false,
})
```
@@ -15,7 +21,7 @@ new MindMap({
```js
mindMap.updateConfig({
mousewheelAction: 'move'
mousewheelAction: 'zoom'
})
```

10
web/src/pages/Doc/zh/course9/index.vue
View File

@@ -4,14 +4,20 @@
<p>鼠标滚轮的行为支持放大缩小画布和上下移动画布，可以在实例化时通过配置指定：</p>
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
<span class="hljs-comment">// ...</span>
<span class="hljs-attr">mousewheelAction</span>: <span class="hljs-string">&#x27;zoom&#x27;</span><span class="hljs-comment">// zoom（放大缩小）、move（上下移动）</span>
<span class="hljs-attr">mousewheelAction</span>: <span class="hljs-string">&#x27;move&#x27;</span><span class="hljs-comment">// zoom（放大缩小）、move（上下移动）</span>
<span class="hljs-comment">// 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px</span>
<span class="hljs-attr">mousewheelMoveStep</span>: <span class="hljs-number">100</span>,
<span class="hljs-comment">// 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点</span>
<span class="hljs-attr">mouseScaleCenterUseMousePosition</span>: <span class="hljs-literal">true</span>,
<span class="hljs-comment">// 当mousewheelAction设为zoom时，或者按住Ctrl键时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来</span>
<span class="hljs-attr">mousewheelZoomActionReverse</span>: <span class="hljs-literal">true</span>,
<span class="hljs-comment">// 禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放</span>
<span class="hljs-attr">disableMouseWheelZoom</span>: <span class="hljs-literal">false</span>,
})
</code></pre>
<p>如果需要动态的切换行为可以使用<code>updateConfig</code>方法：</p>
<pre class="hljs"><code>mindMap.updateConfig({
<span class="hljs-attr">mousewheelAction</span>: <span class="hljs-string">&#x27;move&#x27;</span>
<span class="hljs-attr">mousewheelAction</span>: <span class="hljs-string">&#x27;zoom&#x27;</span>
})
</code></pre>
<p>此外也支持让你自行处理鼠标滚轮事件：</p>

18
web/src/pages/Doc/zh/render/index.md
View File

@@ -120,10 +120,6 @@
获取节点在同级里的位置索引。
### copyNode()
复制节点，操作节点为当前激活节点，有多个激活节点只会操作第一个节点。
### setNodeDataRender(node, data, notRender)
- `notRender`：v0.6.9+，`Boolean`，默认为`false`，是否不要触发渲染。
@@ -178,22 +174,30 @@
> v0.6.8+
复制节点，调用该方法后会存储当前激活的节点数据，多个激活节点只会操作第一个节点，后续调用`paste()`方法时可以进行粘贴。
复制节点，调用该方法后会存储当前激活的节点数据，后续调用`paste()`方法时可以进行粘贴。
如果浏览器及协议（https）支持`js`操作剪贴板数据，那么复制的节点数据也会同时添加到用户的剪贴板中。
### cut()
> v0.6.8+
剪切节点，调用该方法后会剪切当前激活的节点，并且存储该节点数据，多个节点只会操作第一个节点，后续调用`paste()`方法时可以进行粘贴。
剪切节点，调用该方法后会剪切当前激活的节点，并且存储该节点数据，后续调用`paste()`方法时可以进行粘贴。
如果浏览器及协议（https）支持`js`操作剪贴板数据，那么复制的节点数据也会同时添加到用户的剪贴板中。
### paste()
> v0.6.8+
粘贴节点，在调用了`copy()`或`cut()`方法后可以调用该方法进行粘贴节点。该方法不支持粘贴用户剪贴板中的数据，请使用内置的`Ctrl+v`快捷键。
粘贴节点，在调用了`copy()`或`cut()`方法后可以调用该方法进行粘贴节点。
如果浏览器及协议（https）支持`js`操作剪贴板数据，那么其他地方复制的数据也可以进行粘贴，比如你可以进行跨浏览器粘贴`simple-mind-map`节点，如果是非`simple-mind-map`节点数据，那么会提取出剪切板中的文本和图片进行粘贴，文本默认会粘贴为子节点，图片默认会添加到当前的节点中。
### clearCache()
> v0.9.2+
清空节点缓存池。
### emitNodeActiveEvent(node = null, activeNodeList = [...this.activeNodeList])

14
web/src/pages/Doc/zh/render/index.vue
View File

@@ -95,8 +95,6 @@
<p>检索某个节点在激活列表里的索引。</p>
<h3>getNodeIndex(node)</h3>
<p>获取节点在同级里的位置索引。</p>
<h3>copyNode()</h3>
<p>复制节点，操作节点为当前激活节点，有多个激活节点只会操作第一个节点。</p>
<h3>setNodeDataRender(node, data, notRender)</h3>
<ul>
<li><code>notRender</code>：v0.6.9+，<code>Boolean</code>，默认为<code>false</code>，是否不要触发渲染。</li>
@@ -148,18 +146,24 @@
<blockquote>
<p>v0.6.8+</p>
</blockquote>
<p>复制节点，调用该方法后会存储当前激活的节点数据，多个激活节点只会操作第一个节点，后续调用<code>paste()</code>方法时可以进行粘贴。</p>
<p>复制节点，调用该方法后会存储当前激活的节点数据，后续调用<code>paste()</code>方法时可以进行粘贴。</p>
<p>如果浏览器及协议（https）支持<code>js</code>操作剪贴板数据，那么复制的节点数据也会同时添加到用户的剪贴板中。</p>
<h3>cut()</h3>
<blockquote>
<p>v0.6.8+</p>
</blockquote>
<p>剪切节点，调用该方法后会剪切当前激活的节点，并且存储该节点数据，多个节点只会操作第一个节点，后续调用<code>paste()</code>方法时可以进行粘贴。</p>
<p>剪切节点，调用该方法后会剪切当前激活的节点，并且存储该节点数据，后续调用<code>paste()</code>方法时可以进行粘贴。</p>
<p>如果浏览器及协议（https）支持<code>js</code>操作剪贴板数据，那么复制的节点数据也会同时添加到用户的剪贴板中。</p>
<h3>paste()</h3>
<blockquote>
<p>v0.6.8+</p>
</blockquote>
<p>粘贴节点，在调用了<code>copy()</code>或<code>cut()</code>方法后可以调用该方法进行粘贴节点。该方法不支持粘贴用户剪贴板中的数据，请使用内置的<code>Ctrl+v</code>快捷键。</p>
<p>粘贴节点，在调用了<code>copy()</code>或<code>cut()</code>方法后可以调用该方法进行粘贴节点。</p>
<p>如果浏览器及协议（https）支持<code>js</code>操作剪贴板数据，那么其他地方复制的数据也可以进行粘贴，比如你可以进行跨浏览器粘贴<code>simple-mind-map</code>节点，如果是非<code>simple-mind-map</code>节点数据，那么会提取出剪切板中的文本和图片进行粘贴，文本默认会粘贴为子节点，图片默认会添加到当前的节点中。</p>
<h3>clearCache()</h3>
<blockquote>
<p>v0.9.2+</p>
</blockquote>
<p>清空节点缓存池。</p>
<h3>emitNodeActiveEvent(node = null, activeNodeList = [...this.activeNodeList])</h3>
<ul>

8
web/src/pages/Doc/zh/utils/index.md
View File

@@ -493,4 +493,10 @@ let lru = new Lru(max)
#### get(key)
获取某个缓存的值。
获取某个缓存的值。
#### clear()
> v0.9.2+
清空缓存池。

5
web/src/pages/Doc/zh/utils/index.vue
View File

@@ -392,6 +392,11 @@ drawBackgroundImageToCanvas(ctx, width, height, img, {
<p>检查某个缓存是否存在。</p>
<h4>get(key)</h4>
<p>获取某个缓存的值。</p>
<h4>clear()</h4>
<blockquote>
<p>v0.9.2+</p>
</blockquote>
<p>清空缓存池。</p>
</div>
</template>