mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 10:27:44 +08:00
Doc: update
This commit is contained in:
街角小林
parent
4335cbb713
commit
766e0e5fae
@ -11,7 +11,7 @@ let langList = [
|
||||
}
|
||||
]
|
||||
let StartList = ['introduction', 'start', 'question', 'deploy', 'client', 'translate', 'changelog']
|
||||
let CourseList = new Array(29).fill(0).map((_, index) => {
|
||||
let CourseList = new Array(30).fill(0).map((_, index) => {
|
||||
return 'course' + (index + 1)
|
||||
})
|
||||
let APIList = [
|
||||
|
||||
@ -709,7 +709,7 @@ redo. All commands are as follows:
|
||||
| PASTE_NODE | Paste node to a node, the active node will be the operation node | data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods) |
|
||||
| SET_NODE_STYLE | Modify node single style | node (the node to set the style of), prop (style property), value (style property value), isActive (v0.7.0+has been abandoned, boolean, whether the style being set is for the active state) |
|
||||
| SET_NODE_STYLEs（v0.6.12+） | Modify multiple styles of nodes | node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（v0.7.0+has been abandoned, boolean, whether the style being set is for the active state） |
|
||||
| SET_NODE_ACTIVE | Set whether the node is active | node (the node to set), active (boolean, whether to activate) |
|
||||
| SET_NODE_ACTIVE | Set whether the node is active(This command only updates the activation fields and node activation styles in the node data. If you want to achieve the same effect as clicking on a node with the mouse, please use the 'active()' method of the node instance directly.) | node (the node to set), active (boolean, whether to activate) |
|
||||
| CLEAR_ACTIVE_NODE | Clear the active state of the currently active node(s), the active node will be the operation node | |
|
||||
| SET_NODE_EXPAND | Set whether the node is expanded | node (the node to set), expand (boolean, whether to expand) |
|
||||
| EXPAND_ALL | Expand all nodes | |
|
||||
|
||||
@ -1839,7 +1839,7 @@ redo. All commands are as follows:</p>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_ACTIVE</td>
|
||||
<td>Set whether the node is active</td>
|
||||
<td>Set whether the node is active(This command only updates the activation fields and node activation styles in the node data. If you want to achieve the same effect as clicking on a node with the mouse, please use the 'active()' method of the node instance directly.)</td>
|
||||
<td>node (the node to set), active (boolean, whether to activate)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@ -56,6 +56,10 @@ Whether the node is currently being dragged
|
||||
|
||||
## Methods
|
||||
|
||||
### active()
|
||||
|
||||
Manually activating this node will cause other activated nodes to lose their activation.
|
||||
|
||||
### checkIsInClient(padding = 0)
|
||||
|
||||
> v0.10.4+
|
||||
|
||||
@ -31,6 +31,8 @@
|
||||
</blockquote>
|
||||
<p>Whether the node is currently being dragged</p>
|
||||
<h2>Methods</h2>
|
||||
<h3>active()</h3>
|
||||
<p>Manually activating this node will cause other activated nodes to lose their activation.</p>
|
||||
<h3>checkIsInClient(padding = 0)</h3>
|
||||
<blockquote>
|
||||
<p>v0.10.4+</p>
|
||||
|
||||
@ -100,7 +100,7 @@ Add a node to the active list.
|
||||
|
||||
- `notEmitBeforeNodeActiveEvent`：v0.9.12+，is not distribute the 'before_node_active' event, which defaults to 'false' and will be distributed;
|
||||
|
||||
Add a node to the active list.
|
||||
Add a node to the active list. If you want to manually activate a node to achieve the same effect as clicking with a mouse, please directly call the 'active()' method of the node instance.
|
||||
|
||||
### removeActiveNode(node)
|
||||
|
||||
|
||||
@ -84,7 +84,7 @@ disable the enter key and delete key related shortcuts to prevent conflicts.</p>
|
||||
<ul>
|
||||
<li><code>notEmitBeforeNodeActiveEvent</code>：v0.9.12+，is not distribute the 'before_node_active' event, which defaults to 'false' and will be distributed;</li>
|
||||
</ul>
|
||||
<p>Add a node to the active list.</p>
|
||||
<p>Add a node to the active list. If you want to manually activate a node to achieve the same effect as clicking with a mouse, please directly call the 'active()' method of the node instance.</p>
|
||||
<h3>removeActiveNode(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.0+ abandoned</p>
|
||||
|
||||
@ -36,6 +36,7 @@ export default [
|
||||
{ path: 'course27', title: '快捷键操作如何传递自定义参数' },
|
||||
{ path: 'course28', title: '如何动态修改自定义元素的大小' },
|
||||
{ path: 'course29', title: '局域网docker部署解决HTTPS问题的一种方法' },
|
||||
{ path: 'course30', title: '如何通过代码激活节点' },
|
||||
{ path: 'doExport', title: 'Export 插件' },
|
||||
{ path: 'drag', title: 'Drag插件' },
|
||||
{ path: 'introduction', title: '简介' },
|
||||
|
||||
@ -706,7 +706,7 @@ mindMap.updateConfig({
|
||||
| CUT_NODE | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效 | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回) |
|
||||
| SET_NODE_STYLE | 修改节点单个样式 | node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式） |
|
||||
| SET_NODE_STYLEs（v0.6.12+） | 修改节点多个样式 | node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式） |
|
||||
| SET_NODE_ACTIVE | 设置节点是否激活 | node（要设置的节点）、active（布尔值，是否激活） |
|
||||
| SET_NODE_ACTIVE | 设置节点是否激活（该命令仅更新节点数据中的激活字段和节点激活样式，如果你想实现和鼠标点击节点激活的效果，请直接使用节点实例的`active()`方法） | node（要设置的节点）、active（布尔值，是否激活） |
|
||||
| CLEAR_ACTIVE_NODE | 清除当前已激活节点的激活状态，操作节点为当前激活的节点 | |
|
||||
| SET_NODE_EXPAND | 设置节点是否展开 | node（要设置的节点）、expand（布尔值，是否展开） |
|
||||
| EXPAND_ALL | 展开所有节点 | |
|
||||
|
||||
@ -1750,7 +1750,7 @@ mindMap.setTheme(<span class="hljs-string">'主题名称'</span>)
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_ACTIVE</td>
|
||||
<td>设置节点是否激活</td>
|
||||
<td>设置节点是否激活（该命令仅更新节点数据中的激活字段和节点激活样式，如果你想实现和鼠标点击节点激活的效果，请直接使用节点实例的<code>active()</code>方法）</td>
|
||||
<td>node（要设置的节点）、active（布尔值，是否激活）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
79
web/src/pages/Doc/zh/course30/index.md
Normal file
79
web/src/pages/Doc/zh/course30/index.md
Normal file
@ -0,0 +1,79 @@
|
||||
# 如何通过代码激活节点
|
||||
|
||||
默认可以通过鼠标单击节点来激活单个节点，鼠标拖拽或按住Ctrl键单击进行激活多个节点，那么如何通过代码来激活单个或多个节点，达到和鼠标操作一样的效果呢，请往下看。
|
||||
|
||||
## 激活单个节点
|
||||
|
||||
如果已经获取到节点实例，那么直接调用该节点实例的`active()`方法即可：
|
||||
|
||||
```js
|
||||
node.active()
|
||||
```
|
||||
|
||||
如果只知道节点`uid`，那么可以先获取节点实例，再调激活的方法：
|
||||
|
||||
```js
|
||||
const node = mindMap.renderer.findNodeByUid('uid')
|
||||
node.active()
|
||||
```
|
||||
|
||||
## 激活多个节点
|
||||
|
||||
如果要激活多个节点，在`v0.10.6`版本以前需要这么做：
|
||||
|
||||
```js
|
||||
;[id1, id2, id3].forEach(id => {
|
||||
// 获取节点实例
|
||||
const node = mindMap.renderer.findNodeByUid(id)
|
||||
// 手动派发节点激活前事件
|
||||
mindMap.emit(
|
||||
'before_node_active',
|
||||
node,
|
||||
mindMap.renderer.activeNodeList
|
||||
)
|
||||
// 激活节点，并将该节点添加到激活节点列表里
|
||||
mindMap.renderer.addNodeToActiveList(node, true)
|
||||
// 手动派发节点激活事件
|
||||
mindMap.renderer.emitNodeActiveEvent(node)
|
||||
})
|
||||
```
|
||||
|
||||
在`v0.10.6+`版本，`render`实例新增了激活多个节点的方法，所以可以直接使用：
|
||||
|
||||
```js
|
||||
const nodeList = [id1, id2, id3, id4].map(id => {
|
||||
return mindMap.renderer.findNodeByUid(id)
|
||||
})
|
||||
mindMap.renderer.activeMultiNode(nodeList)
|
||||
```
|
||||
|
||||
## 取消激活所有节点
|
||||
|
||||
取消激活所有节点可以直接调用`render`实例的方法：
|
||||
|
||||
```js
|
||||
mindMap.renderer.clearActiveNode()
|
||||
```
|
||||
|
||||
这个方法不会派发`before_node_active`事件，所以如果需要你可以自己手动派发一下。
|
||||
|
||||
## 取消激活指定节点
|
||||
|
||||
要取消激活指定的节点，在`v0.10.6`版本以前需要这么做：
|
||||
|
||||
```js
|
||||
;[id1, id2, id3, id4].forEach(id => {
|
||||
const node = mindMap.renderer.findNodeByUid(id)
|
||||
mindMap.renderer.removeNodeFromActiveList(node)
|
||||
mindMap.renderer.emitNodeActiveEvent(null)
|
||||
})
|
||||
```
|
||||
|
||||
在`v0.10.6+`版本，`render`实例新增了取消激活多个节点的方法，所以可以直接使用：
|
||||
|
||||
```js
|
||||
const nodeList = [id1, id2, id3, id4].map(id => {
|
||||
return mindMap.renderer.findNodeByUid(id)
|
||||
})
|
||||
mindMap.renderer.cancelActiveMultiNode(nodeList)
|
||||
```
|
||||
67
web/src/pages/Doc/zh/course30/index.vue
Normal file
67
web/src/pages/Doc/zh/course30/index.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>如何通过代码激活节点</h1>
|
||||
<p>默认可以通过鼠标单击节点来激活单个节点，鼠标拖拽或按住Ctrl键单击进行激活多个节点，那么如何通过代码来激活单个或多个节点，达到和鼠标操作一样的效果呢，请往下看。</p>
|
||||
<h2>激活单个节点</h2>
|
||||
<p>如果已经获取到节点实例，那么直接调用该节点实例的<code>active()</code>方法即可：</p>
|
||||
<pre class="hljs"><code>node.active()
|
||||
</code></pre>
|
||||
<p>如果只知道节点<code>uid</code>，那么可以先获取节点实例，再调激活的方法：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> node = mindMap.renderer.findNodeByUid(<span class="hljs-string">'uid'</span>)
|
||||
node.active()
|
||||
</code></pre>
|
||||
<h2>激活多个节点</h2>
|
||||
<p>如果要激活多个节点，在<code>v0.10.6</code>版本以前需要这么做：</p>
|
||||
<pre class="hljs"><code>;[id1, id2, id3].forEach(<span class="hljs-function"><span class="hljs-params">id</span> =></span> {
|
||||
<span class="hljs-comment">// 获取节点实例</span>
|
||||
<span class="hljs-keyword">const</span> node = mindMap.renderer.findNodeByUid(id)
|
||||
<span class="hljs-comment">// 手动派发节点激活前事件</span>
|
||||
mindMap.emit(
|
||||
<span class="hljs-string">'before_node_active'</span>,
|
||||
node,
|
||||
mindMap.renderer.activeNodeList
|
||||
)
|
||||
<span class="hljs-comment">// 激活节点，并将该节点添加到激活节点列表里</span>
|
||||
mindMap.renderer.addNodeToActiveList(node, <span class="hljs-literal">true</span>)
|
||||
<span class="hljs-comment">// 手动派发节点激活事件</span>
|
||||
mindMap.renderer.emitNodeActiveEvent(node)
|
||||
})
|
||||
</code></pre>
|
||||
<p>在<code>v0.10.6+</code>版本，<code>render</code>实例新增了激活多个节点的方法，所以可以直接使用：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> nodeList = [id1, id2, id3, id4].map(<span class="hljs-function"><span class="hljs-params">id</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> mindMap.renderer.findNodeByUid(id)
|
||||
})
|
||||
mindMap.renderer.activeMultiNode(nodeList)
|
||||
</code></pre>
|
||||
<h2>取消激活所有节点</h2>
|
||||
<p>取消激活所有节点可以直接调用<code>render</code>实例的方法：</p>
|
||||
<pre class="hljs"><code>mindMap.renderer.clearActiveNode()
|
||||
</code></pre>
|
||||
<p>这个方法不会派发<code>before_node_active</code>事件，所以如果需要你可以自己手动派发一下。</p>
|
||||
<h2>取消激活指定节点</h2>
|
||||
<p>要取消激活指定的节点，在<code>v0.10.6</code>版本以前需要这么做：</p>
|
||||
<pre class="hljs"><code>;[id1, id2, id3, id4].forEach(<span class="hljs-function"><span class="hljs-params">id</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> node = mindMap.renderer.findNodeByUid(id)
|
||||
mindMap.renderer.removeNodeFromActiveList(node)
|
||||
mindMap.renderer.emitNodeActiveEvent(<span class="hljs-literal">null</span>)
|
||||
})
|
||||
</code></pre>
|
||||
<p>在<code>v0.10.6+</code>版本，<code>render</code>实例新增了取消激活多个节点的方法，所以可以直接使用：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> nodeList = [id1, id2, id3, id4].map(<span class="hljs-function"><span class="hljs-params">id</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> mindMap.renderer.findNodeByUid(id)
|
||||
})
|
||||
mindMap.renderer.cancelActiveMultiNode(nodeList)
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -56,6 +56,10 @@
|
||||
|
||||
## 方法
|
||||
|
||||
### active()
|
||||
|
||||
手动激活该节点，当前其他已激活节点会失去激活。
|
||||
|
||||
### checkIsInClient(padding = 0)
|
||||
|
||||
> v0.10.4+
|
||||
|
||||
@ -31,6 +31,8 @@
|
||||
</blockquote>
|
||||
<p>节点是否正在拖拽中</p>
|
||||
<h2>方法</h2>
|
||||
<h3>active()</h3>
|
||||
<p>手动激活该节点，当前其他已激活节点会失去激活。</p>
|
||||
<h3>checkIsInClient(padding = 0)</h3>
|
||||
<blockquote>
|
||||
<p>v0.10.4+</p>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
|
||||
- `notEmitBeforeNodeActiveEvent`：v0.9.12+，是否不要派发`before_node_active`事件，默认为`false`，即会派发；
|
||||
|
||||
添加节点到激活列表里。
|
||||
添加节点到激活列表里。如果你想要手动激活某个节点，达到和鼠标点击激活一样的效果，请直接调用节点实例的`active()`方法。
|
||||
|
||||
### removeActiveNode(node)
|
||||
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
<ul>
|
||||
<li><code>notEmitBeforeNodeActiveEvent</code>：v0.9.12+，是否不要派发<code>before_node_active</code>事件，默认为<code>false</code>，即会派发；</li>
|
||||
</ul>
|
||||
<p>添加节点到激活列表里。</p>
|
||||
<p>添加节点到激活列表里。如果你想要手动激活某个节点，达到和鼠标点击激活一样的效果，请直接调用节点实例的<code>active()</code>方法。</p>
|
||||
<h3>removeActiveNode(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.0+已废弃</p>
|
||||
|
||||
@ -606,12 +606,26 @@ export default {
|
||||
// console.log(this.mindMap.renderer.root.getRect())
|
||||
// console.log(this.mindMap.renderer.root.getRectInSvg())
|
||||
// }, 5000);
|
||||
// setTimeout(() => {
|
||||
// this.mindMap.renderer.renderTree.data.fillColor = 'red'
|
||||
// this.mindMap.render()
|
||||
// this.mindMap.reRender()
|
||||
// this.mindMap.render()
|
||||
// }, 5000)
|
||||
setTimeout(() => {
|
||||
const id1 = '907cf148-4418-42a7-ae04-491fc483fe5e'
|
||||
const id2 = 'd3d9d35a-cfc0-4180-b61e-69ac0dcbed17'
|
||||
const id3 = '42c49f81-bb5b-46e3-bc20-1fc0abc1d834'
|
||||
const id4 = '4d63d518-4efc-4765-99a8-af9955c04b40'
|
||||
// this.mindMap.renderer.clearActiveNode()
|
||||
// const node = this.mindMap.renderer.findNodeByUid(id2)
|
||||
// node.active()
|
||||
|
||||
;[id1, id2, id3, id4].forEach(id => {
|
||||
const node = this.mindMap.renderer.findNodeByUid(id)
|
||||
this.mindMap.renderer.removeNodeFromActiveList(node, true)
|
||||
this.mindMap.renderer.emitNodeActiveEvent(null)
|
||||
})
|
||||
|
||||
// const nodeList = [id1, id2, id3, id4].map(id => {
|
||||
// return this.mindMap.renderer.findNodeByUid(id)
|
||||
// })
|
||||
// this.mindMap.renderer.activeMultiNode(nodeList)
|
||||
}, 5000)
|
||||
},
|
||||
|
||||
// url中是否存在要打开的文件
|
||||
|
||||
Loading…
Reference in New Issue
Block a user