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:
街角小林
2024-05-07 09:33:21 +08:00
parent a93518dee0
commit 98d28a7b67
6 changed files with 177 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/Doc/catalogList.js
View File

@@ -11,7 +11,7 @@ let langList = [
}
]
let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
let CourseList = new Array(27).fill(0).map((_, index) => {
let CourseList = new Array(28).fill(0).map((_, index) => {
return 'course' + (index + 1)
})
let APIList = [

1
web/src/pages/Doc/routerList.js
View File

@@ -34,6 +34,7 @@ export default [
{ path: 'course25', title: '关于概要' },
{ path: 'course26', title: '如何实现AI生成节点内容' },
{ path: 'course27', title: '快捷键操作如何传递自定义参数' },
{ path: 'course28', title: '如何动态修改自定义元素的大小' },
{ path: 'doExport', title: 'Export 插件' },
{ path: 'drag', title: 'Drag插件' },
{ path: 'introduction', title: '简介' },

50
web/src/pages/Doc/zh/course28/index.md Normal file
View File

@@ -0,0 +1,50 @@
# 如何动态修改自定义元素的大小
自定义节点大小不会随着自定义元素大小改变而自动改变，如果有动态修改自定义节点内容大小的需求，比如展开收起一部分内容，目前可以尝试如下做法：
1.控制节点大小的字段必须是节点数据中的一个字段，否则重新渲染时节点重新创建大小又会恢复最初的大小：
```js
new MindMap({
isUseCustomNodeContent: true,
customCreateNodeContent: node => {
let el = document.createElement('div')
const _expand = node.nodeData.data._expand
el.style.background = '#000'
el.style.width = '100px'
el.style.height = _expand ? '100px' : '50px'
return el
}
})
```
可以给节点数据添加一个自定义字段，比如`_expand`，然后通过这个字段来控制自定义元素的大小。
2.点击自定义节点内容切换大小时需要修改节点数据，然后调用渲染方法：
```js
new MindMap({
isUseCustomNodeContent: true,
customCreateNodeContent: node => {
const el = document.createElement('div')
const _expand = node.nodeData.data._expand
el.style.background = '#000'
el.style.width = '100px'
el.style.height = _expand ? '100px' : '50px'
el.addEventListener('click', () => {
node.setData({
resetRichText: true,
_expand: !_expand
})
this.mindMap.render()
})
return el
}
})
```
注意其中的`resetRichText`字段必须设置为`true`，否则不会触发渲染。
### 完整示例
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNq1Vc1uEzEQfpXBCG2K0k3KzyWkhf4dkGiFKjjhCm13J4nprr2yvUmrKpceEQ/BjWdonwdRHoPxrvenTbggYanNeuabb8Yz4/EV283zcF4gG7GxibXILRi0Rb7DpchypS1cgcZJH5Q8UoW0mPTBzKI0VYsTnMASJlplEBBD0FgcCZkcRXml4syQOMXNjKSbWZRzxiUAlylacDKH3AZZpCmXXDZuer0N2N6BKwfuwHBR0/dKFQCmI0hUXGQobThFe5ii+9y7fJv0Am+5r6SNhEQdbPQrqySy0ahid4szJ+CsI3JCixfWCTn79f3m99fru+sbzjxDhShE4gBbtWzZaDmLZyJNNEoH+NQadTz8xfFD5z9vv93d/ljj/14Mz7ryNo41sZy2ui7ufwX2/J8Cqz+9rLYTUtgTpeyxSvC9MsIKJckySHFigz4EMdWe6nzq4bHGyOIxLhx+D2fRXCg9gkAquxtbMceg5jUfDe4XxqrMQV3HENMIrC6w5iq1+xVjFyNp0zRrtWIljaXepJ5tmrOKxfdnL0jEPNh4aPEZL/JIJq7ViTR0/w6oDqErRuiVrQ2mobGXKYZnUXw+1XRznGXweDgc0nVcQS1EYmcOsDUc5hfrEDMU05klSB3H6xoMlLSXK1ZRkhzO6TTvhKFUoO4FcSricypE5/q2qzwTzRd3pPr+dpdGUp6IePaBWuxe7rvLxzaCRysJKTulk1S3/AwIqckSirCj7SI1TT0t6Uy+3dzPcuMVlw40HlSzkaYibSzSQKNK0g5gTGWEOI2M2ebMuzrATHFWqj1AJK22GUYEGQ9IW/H4r/GgQ0/bsi4l4o0fr5yFg2qm+kkYosnC2BjOKFw3WgHCTiR1Ecrq06gaDp+UOIC8uT8aySPdhlJRnt39PX4YcU3VGkZnRqWFrQwB3C0cwdDvrMrbzar7qtlG8MI1WO15vd+ntecs0lNBfmvWnDpQyGktIAKqVZky1mdVwtyjE34xStIbV7Jwr6CENdONM3rCqqEWDugz1PQKiQxdbjfPtFoY1ETSDLk1z1plu1oZZ+VjW7LlHxp7SUc=" />

54
web/src/pages/Doc/zh/course28/index.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<div>
<h1>如何动态修改自定义元素的大小</h1>
<p>自定义节点大小不会随着自定义元素大小改变而自动改变，如果有动态修改自定义节点内容大小的需求，比如展开收起一部分内容，目前可以尝试如下做法：</p>
<p>1.控制节点大小的字段必须是节点数据中的一个字段，否则重新渲染时节点重新创建大小又会恢复最初的大小：</p>
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
<span class="hljs-attr">isUseCustomNodeContent</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
<span class="hljs-keyword">let</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
<span class="hljs-keyword">const</span> _expand = node.nodeData.data._expand
el.style.background = <span class="hljs-string">&#x27;#000&#x27;</span>
el.style.width = <span class="hljs-string">&#x27;100px&#x27;</span>
el.style.height = _expand ? <span class="hljs-string">&#x27;100px&#x27;</span> : <span class="hljs-string">&#x27;50px&#x27;</span>
<span class="hljs-keyword">return</span> el
}
})
</code></pre>
<p>可以给节点数据添加一个自定义字段，比如<code>_expand</code>，然后通过这个字段来控制自定义元素的大小。</p>
<p>2.点击自定义节点内容切换大小时需要修改节点数据，然后调用渲染方法：</p>
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
<span class="hljs-attr">isUseCustomNodeContent</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> {
<span class="hljs-keyword">const</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
<span class="hljs-keyword">const</span> _expand = node.nodeData.data._expand
el.style.background = <span class="hljs-string">&#x27;#000&#x27;</span>
el.style.width = <span class="hljs-string">&#x27;100px&#x27;</span>
el.style.height = _expand ? <span class="hljs-string">&#x27;100px&#x27;</span> : <span class="hljs-string">&#x27;50px&#x27;</span>
el.addEventListener(<span class="hljs-string">&#x27;click&#x27;</span>, <span class="hljs-function">() =&gt;</span> {
node.setData({
<span class="hljs-attr">resetRichText</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">_expand</span>: !_expand
})
<span class="hljs-built_in">this</span>.mindMap.render()
})
<span class="hljs-keyword">return</span> el
}
})
</code></pre>
<p>注意其中的<code>resetRichText</code>字段必须设置为<code>true</code>，否则不会触发渲染。</p>
<h3>完整示例</h3>
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNq1Vc1uEzEQfpXBCG2K0k3KzyWkhf4dkGiFKjjhCm13J4nprr2yvUmrKpceEQ/BjWdonwdRHoPxrvenTbggYanNeuabb8Yz4/EV283zcF4gG7GxibXILRi0Rb7DpchypS1cgcZJH5Q8UoW0mPTBzKI0VYsTnMASJlplEBBD0FgcCZkcRXml4syQOMXNjKSbWZRzxiUAlylacDKH3AZZpCmXXDZuer0N2N6BKwfuwHBR0/dKFQCmI0hUXGQobThFe5ii+9y7fJv0Am+5r6SNhEQdbPQrqySy0ahid4szJ+CsI3JCixfWCTn79f3m99fru+sbzjxDhShE4gBbtWzZaDmLZyJNNEoH+NQadTz8xfFD5z9vv93d/ljj/14Mz7ryNo41sZy2ui7ufwX2/J8Cqz+9rLYTUtgTpeyxSvC9MsIKJckySHFigz4EMdWe6nzq4bHGyOIxLhx+D2fRXCg9gkAquxtbMceg5jUfDe4XxqrMQV3HENMIrC6w5iq1+xVjFyNp0zRrtWIljaXepJ5tmrOKxfdnL0jEPNh4aPEZL/JIJq7ViTR0/w6oDqErRuiVrQ2mobGXKYZnUXw+1XRznGXweDgc0nVcQS1EYmcOsDUc5hfrEDMU05klSB3H6xoMlLSXK1ZRkhzO6TTvhKFUoO4FcSricypE5/q2qzwTzRd3pPr+dpdGUp6IePaBWuxe7rvLxzaCRysJKTulk1S3/AwIqckSirCj7SI1TT0t6Uy+3dzPcuMVlw40HlSzkaYibSzSQKNK0g5gTGWEOI2M2ebMuzrATHFWqj1AJK22GUYEGQ9IW/H4r/GgQ0/bsi4l4o0fr5yFg2qm+kkYosnC2BjOKFw3WgHCTiR1Ecrq06gaDp+UOIC8uT8aySPdhlJRnt39PX4YcU3VGkZnRqWFrQwB3C0cwdDvrMrbzar7qtlG8MI1WO15vd+ntecs0lNBfmvWnDpQyGktIAKqVZky1mdVwtyjE34xStIbV7Jwr6CENdONM3rCqqEWDugz1PQKiQxdbjfPtFoY1ETSDLk1z1plu1oZZ+VjW7LlHxp7SUc=" />
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

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

@@ -36,6 +36,49 @@ mindMap.on('node_tree_render_end', () => {
})
```
插入节点的命令也可以传入一定参数，比如创建新节点不想直接进入新节点的编辑模式，那么可以这样调用：
```js
mindMap.execCommand('INSERT_CHILD_NODE', false)
```
如果想给指定的节点插入新节点，而不是当前激活的节点，那么就可以通过第二个参数：
```js
mindMap.execCommand('INSERT_CHILD_NODE', false, [node])
```
参数是通过平铺的列表方式传递的，所以前面的参数都不能省略。
如果要指定创建的新节点的一些数据，那么可以通过第三个参数：
```js
mindMap.execCommand('INSERT_CHILD_NODE', false, [], {
uid: '指定uid',
text: '指定初始文本'
})
```
最后一个参数可以指定创建新节点的子节点：
```js
mindMap.execCommand('INSERT_CHILD_NODE', false, [], {
uid: '指定uid',
text: '指定初始文本'
}, [
{
data: {
text: '下级节点'
},
children: []
}
])
```
注意传递的是完整的节点结构数据。
其他命令也是类似的，详细可以参考api文档。
## 插入多个子节点
如果你要同时插入多个子节点，那么可以执行`INSERT_MULTI_CHILD_NODE`命令：

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

@@ -23,6 +23,34 @@ 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>
<p>插入节点的命令也可以传入一定参数，比如创建新节点不想直接进入新节点的编辑模式，那么可以这样调用：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">false</span>)
</code></pre>
<p>如果想给指定的节点插入新节点，而不是当前激活的节点，那么就可以通过第二个参数：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">false</span>, [node])
</code></pre>
<p>参数是通过平铺的列表方式传递的，所以前面的参数都不能省略。</p>
<p>如果要指定创建的新节点的一些数据，那么可以通过第三个参数：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">false</span>, [], {
<span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;指定uid&#x27;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;指定初始文本&#x27;</span>
})
</code></pre>
<p>最后一个参数可以指定创建新节点的子节点：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">false</span>, [], {
<span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;指定uid&#x27;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;指定初始文本&#x27;</span>
}, [
{
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;下级节点&#x27;</span>
},
<span class="hljs-attr">children</span>: []
}
])
</code></pre>
<p>注意传递的是完整的节点结构数据。</p>
<p>其他命令也是类似的，详细可以参考api文档。</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)