mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 18:37:43 +08:00
Merge branch 'feature' into main
This commit is contained in:
wanglin2
commit
1e32338d23
12
README.md
12
README.md
@ -7,12 +7,18 @@
|
||||
[](https://github.com/wanglin2/mind-map/network/members)
|
||||
|
||||
|
||||
> 一个简单&强大的Web思维导图库，不依赖任何框架。
|
||||
> 一个简单&强大的Web思维导图
|
||||
|
||||
在线Demo：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)
|
||||
本项目包含两部分：
|
||||
|
||||
1.一个js思维导图库，不依赖任何框架，你可以使用它来快速完成Web思维导图产品的开发。
|
||||
|
||||
开发文档：[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/)
|
||||
|
||||
2.一个Web思维导图，基于思维导图库、Vue2.x、ElementUI开发，可以操作电脑本地文件，所以你可以直接把它当做一个在线版思维导图应用使用，如果觉得github的响应速度慢，你也可以部署到你的服务器上。
|
||||
|
||||
在线地址：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)
|
||||
|
||||
# 特性
|
||||
|
||||
- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积
|
||||
@ -72,8 +78,6 @@ const mindMap = new MindMap({
|
||||
|
||||
想要实现更多功能？可以查看[开发文档](https://wanglin2.github.io/mind-map/#/doc/zh/)。
|
||||
|
||||
仓库内附带一个基于`Vue2.x`的全功能demo，可以解决你大部分功能实现上的困惑。
|
||||
|
||||
# License
|
||||
|
||||
MIT
|
||||
|
||||
@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.d14d5cea.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.b893939e.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.1ed9e72b.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.6deaeca5.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.54a22da0.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.35d98938.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.e6f73d7a.js" rel="prefetch"><link href="dist/js/chunk-2d0ac5dc.7c713704.js" rel="prefetch"><link href="dist/js/chunk-2d0afe0d.9d477efa.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.2ce2efbe.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.fa8a1448.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.c69acfc6.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.e5fb004d.js" rel="prefetch"><link href="dist/js/chunk-2d0b978a.f8cf18a3.js" rel="prefetch"><link href="dist/js/chunk-2d0b9b64.6421dbe0.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.90c10c16.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.317837bd.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.c7eb53c0.js" rel="prefetch"><link href="dist/js/chunk-2d0c09f6.11d06ad8.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.c796f5a9.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.a76580c3.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.1c42b5f8.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.5aac283d.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.957de630.js" rel="prefetch"><link href="dist/js/chunk-2d0c4a65.cd9f2135.js" rel="prefetch"><link href="dist/js/chunk-2d0c5538.88c61b8a.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.84b9239b.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.28a93337.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.48b95a81.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.53cef6b4.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.cee455b8.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.131fde2d.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.bbe358e7.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.c5497b45.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.30c25366.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.2f357c47.js" rel="prefetch"><link href="dist/js/chunk-2d0e4e1f.9e5366fb.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.0eca5330.js" rel="prefetch"><link href="dist/js/chunk-2d0e9726.cb0b7af1.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.9792465b.js" rel="prefetch"><link href="dist/js/chunk-2d0e9802.7b2165cb.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.bdf6ead1.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.ded9201c.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.f1bb8dbf.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.33633e99.js" rel="prefetch"><link href="dist/js/chunk-2d20ff53.5a293f49.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.c0e313a6.js" rel="prefetch"><link href="dist/js/chunk-2d216004.7800d5f8.js" rel="prefetch"><link href="dist/js/chunk-2d216037.f55e8a4f.js" rel="prefetch"><link href="dist/js/chunk-2d2160a3.907f6f9c.js" rel="prefetch"><link href="dist/js/chunk-2d216642.635c34e8.js" rel="prefetch"><link href="dist/js/chunk-2d217907.325d840d.js" rel="prefetch"><link href="dist/js/chunk-2d221c76.8f8c1623.js" rel="prefetch"><link href="dist/js/chunk-2d2254a4.5aa14a47.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.0d16e8ba.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.c1a94e96.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.c772670d.js" rel="prefetch"><link href="dist/js/chunk-2d230098.de51f2d4.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.d701f22e.js" rel="prefetch"><link href="dist/js/chunk-2d2375fa.4aba3292.js" rel="prefetch"><link href="dist/js/chunk-2d238428.b57532b8.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.4dedfacf.js" rel="prefetch"><link href="dist/css/app.b11acbdb.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.dbe3debc.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.b11acbdb.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.dbe3debc.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="./dist/logo.png"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-0b4c0228.2313b4b8.js" rel="prefetch"><link href="dist/js/chunk-2d0a3179.ecdc0449.js" rel="prefetch"><link href="dist/js/chunk-2d0a514a.6d16a18f.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.fcf43a73.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.4e43a508.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.2151bd9a.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.a1773017.js" rel="prefetch"><link href="dist/js/chunk-2d0ac5dc.378335bb.js" rel="prefetch"><link href="dist/js/chunk-2d0afe0d.106affda.js" rel="prefetch"><link href="dist/js/chunk-2d0b1c6f.40c3a4c6.js" rel="prefetch"><link href="dist/js/chunk-2d0b361e.bd367278.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.1d4a5492.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.1ed97f5c.js" rel="prefetch"><link href="dist/js/chunk-2d0b978a.e3dec256.js" rel="prefetch"><link href="dist/js/chunk-2d0b9b64.03e02abe.js" rel="prefetch"><link href="dist/js/chunk-2d0ba309.cad55829.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.bc2402de.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.8e142e17.js" rel="prefetch"><link href="dist/js/chunk-2d0c09f6.46dff9b5.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.5e69748f.js" rel="prefetch"><link href="dist/js/chunk-2d0c14fc.2b0a3aa0.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.41f869ae.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.d27d7537.js" rel="prefetch"><link href="dist/js/chunk-2d0c20be.a826dbb3.js" rel="prefetch"><link href="dist/js/chunk-2d0c4a65.d6ccf037.js" rel="prefetch"><link href="dist/js/chunk-2d0c5538.480c6adf.js" rel="prefetch"><link href="dist/js/chunk-2d0d5cb9.53817128.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.810b3b6b.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.cfa871f6.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.0f476897.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.10ad3333.js" rel="prefetch"><link href="dist/js/chunk-2d0dd3b1.a4748b26.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.d8e94894.js" rel="prefetch"><link href="dist/js/chunk-2d0ddf37.2bb0ee69.js" rel="prefetch"><link href="dist/js/chunk-2d0de01b.f8eea9ae.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.5f8f761a.js" rel="prefetch"><link href="dist/js/chunk-2d0e4e1f.53e37fe0.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.25303766.js" rel="prefetch"><link href="dist/js/chunk-2d0e9726.588baf8d.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.428d2cf2.js" rel="prefetch"><link href="dist/js/chunk-2d0e9802.6c3450dd.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.113b1ad7.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.390e6ae8.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.577d738a.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.76d5e91c.js" rel="prefetch"><link href="dist/js/chunk-2d20ff53.c0447317.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.999247ea.js" rel="prefetch"><link href="dist/js/chunk-2d216004.6bc315a8.js" rel="prefetch"><link href="dist/js/chunk-2d216037.735c6ef2.js" rel="prefetch"><link href="dist/js/chunk-2d2160a3.667b0cef.js" rel="prefetch"><link href="dist/js/chunk-2d216642.43efb068.js" rel="prefetch"><link href="dist/js/chunk-2d217907.fcb88ac3.js" rel="prefetch"><link href="dist/js/chunk-2d221c76.0f835399.js" rel="prefetch"><link href="dist/js/chunk-2d2254a4.aba788ef.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.4ed5fff9.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.6c80e04d.js" rel="prefetch"><link href="dist/js/chunk-2d22bd06.20c08643.js" rel="prefetch"><link href="dist/js/chunk-2d230098.2901ec53.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.c6cec8ad.js" rel="prefetch"><link href="dist/js/chunk-2d2375fa.4e68cb6b.js" rel="prefetch"><link href="dist/js/chunk-2d238428.816b9c47.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/js/chunk-a48508c0.057b1a50.js" rel="prefetch"><link href="dist/css/app.f08aba10.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.c097b26d.css" rel="preload" as="style"><link href="dist/js/app.2cd4db22.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d36f5bd6.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.c097b26d.css" rel="stylesheet"><link href="dist/css/app.f08aba10.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.d36f5bd6.js"></script><script src="dist/js/app.2cd4db22.js"></script></body></html>
|
||||
@ -54,13 +54,13 @@ positioning, set border style, transition property (optional)
|
||||
|
||||
4.Listen for `data_change` and `view_data_change` events, and in this event call
|
||||
the `calculationMiniMap` method to get calculation data, then render `svgHTML`
|
||||
to the `miniMapContainer` element and set its style:
|
||||
to the `miniMapContainer` element and set `miniMapContainer` element style:
|
||||
|
||||
```js
|
||||
:style="{
|
||||
transform: `scale(${svgBoxScale})`,
|
||||
left: svgBoxLeft + 'px',
|
||||
top: svgBoxTop + 'px',
|
||||
transform: `scale(${miniMapBoxScale})`,
|
||||
left: miniMapBoxLeft + 'px',
|
||||
top: miniMapBoxTop + 'px',
|
||||
}"
|
||||
```
|
||||
|
||||
|
||||
@ -39,11 +39,11 @@ absolute positioning</p>
|
||||
positioning, set border style, transition property (optional)</p>
|
||||
<p>4.Listen for <code>data_change</code> and <code>view_data_change</code> events, and in this event call
|
||||
the <code>calculationMiniMap</code> method to get calculation data, then render <code>svgHTML</code>
|
||||
to the <code>miniMapContainer</code> element and set its style:</p>
|
||||
to the <code>miniMapContainer</code> element and set <code>miniMapContainer</code> element style:</p>
|
||||
<pre class="hljs"><code>:style=<span class="hljs-string">"{
|
||||
transform: `scale(${svgBoxScale})`,
|
||||
left: svgBoxLeft + 'px',
|
||||
top: svgBoxTop + 'px',
|
||||
transform: `scale(${miniMapBoxScale})`,
|
||||
left: miniMapBoxLeft + 'px',
|
||||
top: miniMapBoxTop + 'px',
|
||||
}"</span>
|
||||
</code></pre>
|
||||
<p>5.Set the <code>viewBoxStyle</code> object as the style of the <code>viewBoxContainer</code> element</p>
|
||||
|
||||
@ -1,3 +1,28 @@
|
||||
# 结构
|
||||
|
||||
编写中。。。
|
||||
`simple-mind-map`目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）。
|
||||
|
||||
可以在实例化`simple-mind-map`时通过选项指定使用的结构：
|
||||
|
||||
```js
|
||||
new MindMap({
|
||||
// ...
|
||||
layout: 'logicalStructure'
|
||||
})
|
||||
```
|
||||
|
||||
也可以动态切换结构：
|
||||
|
||||
```js
|
||||
mindMap.setLayout('organizationStructure')
|
||||
```
|
||||
|
||||
获取当前使用的结构可以使用`getLayout`方法：
|
||||
|
||||
```js
|
||||
const layout = mindMap.getLayout()
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVVtrFDEU/iuHiMxWtrNb8Gndlnp7EFqR+tgUSWfS3WgmGSaZXiwLUgrWS0Hpg6Ag6os++ChCW8Q/0+72Z3iymZkd2z745sIsk3P5vpOc72S2yc00DddzTjqka6JMpBYMt3k6R5VIUp1Z2IaMrzVBq0WdK8vjJpg+k1JvLPE1GMBaphMIECGoMhaFihdZ6l2UGDRLPp2gdTphKSVUAVAluQVnc5GzoHIpvb3VgtNfB6cv9oe/nw1/HI/e75693BntHJ7uvTv7/I2qSCtjgUVWrPP7OuYGsycVNZZXpqjyKHvPh/tfRscHw4+7ZVrUZ6rHF7aYzi3mNaZgdg62HXFRSoi7X2Bb6G4EOusxJZ4yK7R6aLM8snnGA4QfOIbqQBoXUdyG+EZ5EI2xC4DLDsQ6yhOubNjj9q7k7vXW1r24ERSZt7WyTCieBVNNnxUzyzoe3f0ocQZKaiZvtnzTOjMlw0+H/sj8UbvfoABzgVFfyDjjygUvTzDOwV3Kcp7p5Oj16OjrebK/CS8hXZn46nH/qYLytbCVeUIJu6S1dRp7oI1wKsDMQPI1GzQhiLB12KaVIlyORdOBQOqeiJicCMb5B1M3vLoBUJmjD29P33z3RXuVnxy9Ojn+WdehVo1AIfUjr3RkbLhlE9z/gjB2IjqoT0O4zmTOnQCLOE+PosWn2/IzjtONC8txMJnluALoxmIdIsmMmaWkKOIOTzQlY3cRIOKJt5IqhnRb6K0HlkhWa7nKXIh3Uttdza3VCuYjKaInGFKfSYyrj2235YNL5IqlfOu2apvApbFb0u9nvriMKAlb/gYqpjHkJgkjYyipWhLW9lse6YaIbb8DM+321XEcQFqJIOPIiAc+doz1454r58+lhJokslWjZW59ImoGpdSBdrGyOp0sLtL3uej1Mfx6u51ulsyX814rmROW9QTylqgpi2OheqWhKj0s2vSPFc+UFRRFV2sERImNe0CaxHfA3fnhY6MVfmLG8LRwYAeq4aYEvyB+osMWvoYZXq0i4a5Z06uZ3jA8QxBKimm75Kvicy+22mUVtQ3I4A+xm1Zg" />
|
||||
@ -1,8 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>结构</h1>
|
||||
<p>编写中。。。</p>
|
||||
|
||||
<p><code>simple-mind-map</code>目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）。</p>
|
||||
<p>可以在实例化<code>simple-mind-map</code>时通过选项指定使用的结构：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-comment">// ...</span>
|
||||
<span class="hljs-attr">layout</span>: <span class="hljs-string">'logicalStructure'</span>
|
||||
})
|
||||
</code></pre>
|
||||
<p>也可以动态切换结构：</p>
|
||||
<pre class="hljs"><code>mindMap.setLayout(<span class="hljs-string">'organizationStructure'</span>)
|
||||
</code></pre>
|
||||
<p>获取当前使用的结构可以使用<code>getLayout</code>方法：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> layout = mindMap.getLayout()
|
||||
</code></pre>
|
||||
<h2>完整示例</h2>
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVVtrFDEU/iuHiMxWtrNb8Gndlnp7EFqR+tgUSWfS3WgmGSaZXiwLUgrWS0Hpg6Ag6os++ChCW8Q/0+72Z3iymZkd2z745sIsk3P5vpOc72S2yc00DddzTjqka6JMpBYMt3k6R5VIUp1Z2IaMrzVBq0WdK8vjJpg+k1JvLPE1GMBaphMIECGoMhaFihdZ6l2UGDRLPp2gdTphKSVUAVAluQVnc5GzoHIpvb3VgtNfB6cv9oe/nw1/HI/e75693BntHJ7uvTv7/I2qSCtjgUVWrPP7OuYGsycVNZZXpqjyKHvPh/tfRscHw4+7ZVrUZ6rHF7aYzi3mNaZgdg62HXFRSoi7X2Bb6G4EOusxJZ4yK7R6aLM8snnGA4QfOIbqQBoXUdyG+EZ5EI2xC4DLDsQ6yhOubNjj9q7k7vXW1r24ERSZt7WyTCieBVNNnxUzyzoe3f0ocQZKaiZvtnzTOjMlw0+H/sj8UbvfoABzgVFfyDjjygUvTzDOwV3Kcp7p5Oj16OjrebK/CS8hXZn46nH/qYLytbCVeUIJu6S1dRp7oI1wKsDMQPI1GzQhiLB12KaVIlyORdOBQOqeiJicCMb5B1M3vLoBUJmjD29P33z3RXuVnxy9Ojn+WdehVo1AIfUjr3RkbLhlE9z/gjB2IjqoT0O4zmTOnQCLOE+PosWn2/IzjtONC8txMJnluALoxmIdIsmMmaWkKOIOTzQlY3cRIOKJt5IqhnRb6K0HlkhWa7nKXIh3Uttdza3VCuYjKaInGFKfSYyrj2235YNL5IqlfOu2apvApbFb0u9nvriMKAlb/gYqpjHkJgkjYyipWhLW9lse6YaIbb8DM+321XEcQFqJIOPIiAc+doz1454r58+lhJokslWjZW59ImoGpdSBdrGyOp0sLtL3uej1Mfx6u51ulsyX814rmROW9QTylqgpi2OheqWhKj0s2vSPFc+UFRRFV2sERImNe0CaxHfA3fnhY6MVfmLG8LRwYAeq4aYEvyB+osMWvoYZXq0i4a5Z06uZ3jA8QxBKimm75Kvicy+22mUVtQ3I4A+xm1Zg" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,3 +1,34 @@
|
||||
# 如何渲染一个大纲
|
||||
|
||||
编写中。。。
|
||||
思维导图本质就是一颗树，所以你可以使用树组件来完成大纲的显示。
|
||||
|
||||
可以监听`data_change`事件来获取当前最新的思维导图数据：
|
||||
|
||||
```js
|
||||
mindMap.on('data_change', (data) => {
|
||||
// data数据是不带节点对象的纯数据
|
||||
// 如果你需要操作节点对象，可以使用mindMap.renderer.renderTree
|
||||
console.log(data, mindMap.renderer.renderTree)
|
||||
})
|
||||
```
|
||||
|
||||
通常点击了大纲的某个节点，会将画布定位到该节点并激活该节点，这可以这么做：
|
||||
|
||||
```js
|
||||
const node = data._node
|
||||
mindMap.renderer.moveNodeToCenter(node)
|
||||
node.active()
|
||||
```
|
||||
|
||||
当在大纲树上编辑了某个节点的内容，需要同步到思维导图树上：
|
||||
|
||||
```js
|
||||
data._node.setText('xxx')
|
||||
```
|
||||
|
||||
要插入兄弟节点或子节点可以这么操作：
|
||||
|
||||
```js
|
||||
mindMap.execCommand('INSERT_NODE', false)
|
||||
mindMap.execCommand('INSERT_CHILD_NODE', false)
|
||||
```
|
||||
@ -1,7 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>如何渲染一个大纲</h1>
|
||||
<p>编写中。。。</p>
|
||||
<p>思维导图本质就是一颗树，所以你可以使用树组件来完成大纲的显示。</p>
|
||||
<p>可以监听<code>data_change</code>事件来获取当前最新的思维导图数据：</p>
|
||||
<pre class="hljs"><code>mindMap.on(<span class="hljs-string">'data_change'</span>, <span class="hljs-function">(<span class="hljs-params">data</span>) =></span> {
|
||||
<span class="hljs-comment">// data数据是不带节点对象的纯数据</span>
|
||||
<span class="hljs-comment">// 如果你需要操作节点对象，可以使用mindMap.renderer.renderTree</span>
|
||||
<span class="hljs-built_in">console</span>.log(data, mindMap.renderer.renderTree)
|
||||
})
|
||||
</code></pre>
|
||||
<p>通常点击了大纲的某个节点，会将画布定位到该节点并激活该节点，这可以这么做：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> node = data._node
|
||||
mindMap.renderer.moveNodeToCenter(node)
|
||||
node.active()
|
||||
</code></pre>
|
||||
<p>当在大纲树上编辑了某个节点的内容，需要同步到思维导图树上：</p>
|
||||
<pre class="hljs"><code>data._node.setText(<span class="hljs-string">'xxx'</span>)
|
||||
</code></pre>
|
||||
<p>要插入兄弟节点或子节点可以这么操作：</p>
|
||||
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">'INSERT_NODE'</span>, <span class="hljs-literal">false</span>)
|
||||
mindMap.execCommand(<span class="hljs-string">'INSERT_CHILD_NODE'</span>, <span class="hljs-literal">false</span>)
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,3 +1,131 @@
|
||||
# 快捷键
|
||||
|
||||
编写中。。。
|
||||
`simple-mind-map`常用操作都支持快捷键方式使用，目前所有的快捷键列表如下：
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
type: '节点操作',
|
||||
list: [
|
||||
{
|
||||
name: '插入下级节点',
|
||||
value: 'Tab'
|
||||
},
|
||||
{
|
||||
name: '插入同级节点',
|
||||
value: 'Enter'
|
||||
},
|
||||
{
|
||||
name: '上移节点',
|
||||
value: 'Ctrl + ↑'
|
||||
},
|
||||
{
|
||||
name: '下移节点',
|
||||
value: 'Ctrl + ↓'
|
||||
},
|
||||
{
|
||||
name: '插入概要',
|
||||
value: 'Ctrl + S'
|
||||
},
|
||||
{
|
||||
name: '展开/收起节点',
|
||||
value: '/'
|
||||
},
|
||||
{
|
||||
name: '删除节点',
|
||||
value: 'Delete | Backspace'
|
||||
},
|
||||
{
|
||||
name: '复制节点',
|
||||
value: 'Ctrl + C'
|
||||
},
|
||||
{
|
||||
name: '剪切节点',
|
||||
value: 'Ctrl + X'
|
||||
},
|
||||
{
|
||||
name: '粘贴节点',
|
||||
value: 'Ctrl + V'
|
||||
},
|
||||
{
|
||||
name: '编辑节点',
|
||||
value: 'F2'
|
||||
},
|
||||
{
|
||||
name: '文本换行',
|
||||
value: 'Shift + Enter'
|
||||
},
|
||||
{
|
||||
name: '回退',
|
||||
value: 'Ctrl + Z'
|
||||
},
|
||||
{
|
||||
name: '前进',
|
||||
value: 'Ctrl + Y'
|
||||
},
|
||||
{
|
||||
name: '全选',
|
||||
value: 'Ctrl + A'
|
||||
},
|
||||
{
|
||||
name: '多选',
|
||||
value: '右键 / Ctrl + 左键'
|
||||
},
|
||||
{
|
||||
name: '一键整理布局',
|
||||
value: 'Ctrl + L'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: '画布操作',
|
||||
list: [
|
||||
{
|
||||
name: '放大',
|
||||
value: 'Ctrl + +'
|
||||
},
|
||||
{
|
||||
name: '缩小',
|
||||
value: 'Ctrl + -'
|
||||
},
|
||||
{
|
||||
name: '恢复默认',
|
||||
value: 'Ctrl + Enter'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
默认当鼠标滑入画布范围内才会响应快捷键操作，如果你想去掉这个限制可以在实例化`simple-mind-map`时通过选项指定：
|
||||
|
||||
```js
|
||||
new MindMap({
|
||||
// ...
|
||||
enableShortcutOnlyWhenMouseInSvg: false
|
||||
})
|
||||
```
|
||||
|
||||
你也可以添加新的快捷键：
|
||||
|
||||
```js
|
||||
mindMap.keyCommand.addShortcut('key', () => {
|
||||
// 执行一些操作
|
||||
})
|
||||
```
|
||||
|
||||
`key`支持三种方式：
|
||||
|
||||
```
|
||||
Enter // 单个按键
|
||||
Tab | Insert // 或
|
||||
Shift + a // 与
|
||||
```
|
||||
|
||||
要获取所有的按键值对应的名称，可以：
|
||||
|
||||
```js
|
||||
import { keyMap } from 'simple-mind-map/src/utils/keyMap'
|
||||
```
|
||||
|
||||
可以添加当然也可以移除，详细文档可以参考[keyCommand](https://wanglin2.github.io/mind-map/#/doc/zh/keyCommand)。
|
||||
@ -1,7 +1,120 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>快捷键</h1>
|
||||
<p>编写中。。。</p>
|
||||
<p><code>simple-mind-map</code>常用操作都支持快捷键方式使用，目前所有的快捷键列表如下：</p>
|
||||
<pre class="hljs"><code>[
|
||||
{
|
||||
<span class="hljs-attr">type</span>: <span class="hljs-string">'节点操作'</span>,
|
||||
<span class="hljs-attr">list</span>: [
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'插入下级节点'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Tab'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'插入同级节点'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Enter'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'上移节点'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + ↑'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'下移节点'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + ↓'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'插入概要'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + S'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'展开/收起节点'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'/'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'删除节点'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Delete | Backspace'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'复制节点'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + C'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'剪切节点'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + X'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'粘贴节点'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + V'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'编辑节点'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'F2'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'文本换行'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Shift + Enter'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'回退'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + Z'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'前进'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + Y'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'全选'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + A'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'多选'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'右键 / Ctrl + 左键'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'一键整理布局'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + L'</span>
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">type</span>: <span class="hljs-string">'画布操作'</span>,
|
||||
<span class="hljs-attr">list</span>: [
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'放大'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + +'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'缩小'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + -'</span>
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'恢复默认'</span>,
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + Enter'</span>
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</code></pre>
|
||||
<p>默认当鼠标滑入画布范围内才会响应快捷键操作，如果你想去掉这个限制可以在实例化<code>simple-mind-map</code>时通过选项指定：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-comment">// ...</span>
|
||||
<span class="hljs-attr">enableShortcutOnlyWhenMouseInSvg</span>: <span class="hljs-literal">false</span>
|
||||
})
|
||||
</code></pre>
|
||||
<p>你也可以添加新的快捷键：</p>
|
||||
<pre class="hljs"><code>mindMap.keyCommand.addShortcut(<span class="hljs-string">'key'</span>, <span class="hljs-function">() =></span> {
|
||||
<span class="hljs-comment">// 执行一些操作</span>
|
||||
})
|
||||
</code></pre>
|
||||
<p><code>key</code>支持三种方式：</p>
|
||||
<pre class="hljs"><code>Enter // 单个按键
|
||||
Tab | Insert // 或
|
||||
Shift + a // 与
|
||||
</code></pre>
|
||||
<p>要获取所有的按键值对应的名称，可以：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> { keyMap } <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/utils/keyMap'</span>
|
||||
</code></pre>
|
||||
<p>可以添加当然也可以移除，详细文档可以参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/keyCommand">keyCommand</a>。</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,3 +1,54 @@
|
||||
# 如何渲染一个小地图
|
||||
|
||||
编写中。。。
|
||||
> 要使用小地图需要注册小地图插件
|
||||
|
||||
小地图可以方便看到当前画布可视区域在思维导图树的哪个部分。
|
||||
|
||||
虽然小地图需要你自行开发，不过`simple-mind-map`提供了一些方法来帮你快速的完成这一工作。
|
||||
|
||||
小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。
|
||||
|
||||
当注册了小地图插件后可以通过`mindMap.miniMap`获取到插件实例，然后通过`mindMap.miniMap.calculationMiniMap`方法即可获取小地图渲染需要的数据，返回的数据结构如下：
|
||||
|
||||
```js
|
||||
{
|
||||
svgHTML, // 小地图html
|
||||
viewBoxStyle, // 视图框的位置信息
|
||||
miniMapBoxScale, // 视图框的缩放值
|
||||
miniMapBoxLeft, // 视图框的left值
|
||||
miniMapBoxTop, // 视图框的top值
|
||||
}
|
||||
```
|
||||
|
||||
完整实现思路如下：
|
||||
|
||||
1.准备一个宽高不为0的容器元素container，定位不为static
|
||||
|
||||
2.在container内创建一个小地图容器元素miniMapContainer，绝对定位，设置变换中心点为`left top`：
|
||||
|
||||
```css
|
||||
transform-origin: left top;
|
||||
```
|
||||
|
||||
3.在container内创建一个视口框元素viewBoxContainer，绝对定位，设置边框样式，过渡属性（可选）
|
||||
|
||||
4.监听data_change和view_data_change事件，最好也监听一下node_tree_render_end事件，防止初次渲染完毕后小地图没有刷新，在该事件内调用calculationMiniMap方法获取计算数据，然后将返回数据中的svgHTML渲染到miniMapContainer元素内，并且给miniMapContainer元素设置或更新如下样式：
|
||||
|
||||
```js
|
||||
{
|
||||
transform: `scale(${miniMapBoxScale})`,
|
||||
left: miniMapBoxLeft + 'px',
|
||||
top: miniMapBoxTop + 'px',
|
||||
}
|
||||
```
|
||||
5.将viewBoxStyle对象设置为viewBoxContainer元素的样式
|
||||
|
||||
到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置
|
||||
|
||||
6.监听container元素的mousedown、mousemove、mouseup事件，分别调用小地图插件实例的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果
|
||||
|
||||
插件的完整信息可以参考[miniMap](https://wanglin2.github.io/mind-map/#/doc/zh/miniMap)。
|
||||
|
||||
## 完整示例
|
||||
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVt2O20QUfpWRASULWSfbUgQhW5UCEkgNQqUSF0yVeu1J4sqesTzjJFWUm4oLhEBcIH6LBFyBhBStEBdsJXgaki1vwTn2jD12stpy1ZU28sz3nZ85c35m6byRJO4sY07fGUg/DRNFJFNZcp3yME5EqsiSpGzcIYIPRcYVCzpETr0oEvPbbExWZJyKmLRAQ6uUGIY8GHpJAVFHwnbEDmPYPYy9hDqUE0J5xBTBPWQeE55FEeWUd7tkc/rF5ofTzaO/N+uzzXe/nn//8Wb917+/fUu5L7hUBH6VF3KWfhgGagqyR73eDvYOCydTBeA1wHK120d/bL8+LZUbCXAhBBfeNIIgAudtoz8HhjML2fymWHygHkRM48tViWoNSPC9knC0B7/FxugSwr098B2BkaijWRJ4ikFEwyGC7QNyfJ0sMYJwpCfrn8/X35RH2n51uv18jRjGFuQ8kNAhdrUZF1z0s8hTIVxosdWuB7TTDCL4klvb/vn79scvN5/YMSQ78XNnXpQxN+Qof2d4C1xAT1w5m+ASRexwFnRDshFLuQltndwA63wM9UV0xOpsiPxFZIAoX2EOFReS14FkgZhzvA9WXUgz0hYTaPuUxGKGFp9CCTIvUJLleXG5iiypFJTF3LYSyipGNjdF3M4hQljUJ4Hws5hx5U6Yejti+HnzwbtBu6UlyxxoHXQKKYxlv9COf9TBDepYW8W2YguF29TZ/nT25NOH5w/PijaBfyutDIn+NIyClHEkf1TpaKjba6Vp6Z/Hn50//qVprG5wj9G7FWbznpEH5lPvGTm4eXVbCPWeCNj7QoZY7SDZiiDzWx3S8uHq4Jru5vTVwetFR65SR/B2C48w8qcenzAQsftQ3hBsKpbt6H/wObg1UiljIzhTwNIR/O7KYIcddIuhBOMIForBJAEKrAgZBOGM+JEn5TF1tPa3oFCok8OaEAYVWuYnUAZdQG2iiaTRWDbB6mZuxKaeAbeq2zCoKhhYrBUDV01GllR4piciIdodqmoOWT41ey11bBYMjr0ci9KX2FmB1chLlXpcjkUa98k9ic20/fyy0V5XB/dqSYlDZqz6zen2Emkli1aDqURiE3HOFbyysBVVq8pTHYgc0V/2fTXuXg8NOyrlOWsDpXHr5bf5GnStBINlriRn3NAvG+q43eI5o9ujy2Ts+lJSp6wh7LsmF039z3Gw9vGh8kLOIyQpqzJlOI1nLAfygsb/55o5a1RVgt6JFFGmCkFzHT29ykNuFrvmp/lk75OXe71kYSzvt/uisRx76SQEu0Zr4gVByCdmo3TdLUvnKX0+Mj5ot6115Xm5ZVy/ZnleRb7+lrvMfpn3hyIN88OhR+hFQ3Mzxy7VfCJSaGx9ciVZEADCgKSTk/aVq692yCuv4X/RdLULRkcUkZ57VRrj0P3yFHQ6TpGA+H5270vB4bmee0A1AAlYDhvI+gySHSeM24VPN4VRH8YMc/XwJBVzCa+0+yChq3TPC72Q3c10lNK+rZzVf9RSHZw=" />
|
||||
@ -1,8 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>如何渲染一个小地图</h1>
|
||||
<p>编写中。。。</p>
|
||||
|
||||
<blockquote>
|
||||
<p>要使用小地图需要注册小地图插件</p>
|
||||
</blockquote>
|
||||
<p>小地图可以方便看到当前画布可视区域在思维导图树的哪个部分。</p>
|
||||
<p>虽然小地图需要你自行开发，不过<code>simple-mind-map</code>提供了一些方法来帮你快速的完成这一工作。</p>
|
||||
<p>小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。</p>
|
||||
<p>当注册了小地图插件后可以通过<code>mindMap.miniMap</code>获取到插件实例，然后通过<code>mindMap.miniMap.calculationMiniMap</code>方法即可获取小地图渲染需要的数据，返回的数据结构如下：</p>
|
||||
<pre class="hljs"><code>{
|
||||
svgHTML, <span class="hljs-comment">// 小地图html</span>
|
||||
viewBoxStyle, <span class="hljs-comment">// 视图框的位置信息</span>
|
||||
miniMapBoxScale, <span class="hljs-comment">// 视图框的缩放值</span>
|
||||
miniMapBoxLeft, <span class="hljs-comment">// 视图框的left值</span>
|
||||
miniMapBoxTop, <span class="hljs-comment">// 视图框的top值</span>
|
||||
}
|
||||
</code></pre>
|
||||
<p>完整实现思路如下：</p>
|
||||
<p>1.准备一个宽高不为0的容器元素container，定位不为static</p>
|
||||
<p>2.在container内创建一个小地图容器元素miniMapContainer，绝对定位，设置变换中心点为<code>left top</code>：</p>
|
||||
<pre class="hljs"><code><span class="hljs-attribute">transform-origin</span>: left top;
|
||||
</code></pre>
|
||||
<p>3.在container内创建一个视口框元素viewBoxContainer，绝对定位，设置边框样式，过渡属性（可选）</p>
|
||||
<p>4.监听data_change和view_data_change事件，最好也监听一下node_tree_render_end事件，防止初次渲染完毕后小地图没有刷新，在该事件内调用calculationMiniMap方法获取计算数据，然后将返回数据中的svgHTML渲染到miniMapContainer元素内，并且给miniMapContainer元素设置或更新如下样式：</p>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-attr">transform</span>: <span class="hljs-string">`scale(<span class="hljs-subst">${miniMapBoxScale}</span>)`</span>,
|
||||
<span class="hljs-attr">left</span>: miniMapBoxLeft + <span class="hljs-string">'px'</span>,
|
||||
<span class="hljs-attr">top</span>: miniMapBoxTop + <span class="hljs-string">'px'</span>,
|
||||
}
|
||||
</code></pre>
|
||||
<p>5.将viewBoxStyle对象设置为viewBoxContainer元素的样式</p>
|
||||
<p>到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置</p>
|
||||
<p>6.监听container元素的mousedown、mousemove、mouseup事件，分别调用小地图插件实例的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果</p>
|
||||
<p>插件的完整信息可以参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/miniMap">miniMap</a>。</p>
|
||||
<h2>完整示例</h2>
|
||||
<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVt2O20QUfpWRASULWSfbUgQhW5UCEkgNQqUSF0yVeu1J4sqesTzjJFWUm4oLhEBcIH6LBFyBhBStEBdsJXgaki1vwTn2jD12stpy1ZU28sz3nZ85c35m6byRJO4sY07fGUg/DRNFJFNZcp3yME5EqsiSpGzcIYIPRcYVCzpETr0oEvPbbExWZJyKmLRAQ6uUGIY8GHpJAVFHwnbEDmPYPYy9hDqUE0J5xBTBPWQeE55FEeWUd7tkc/rF5ofTzaO/N+uzzXe/nn//8Wb917+/fUu5L7hUBH6VF3KWfhgGagqyR73eDvYOCydTBeA1wHK120d/bL8+LZUbCXAhBBfeNIIgAudtoz8HhjML2fymWHygHkRM48tViWoNSPC9knC0B7/FxugSwr098B2BkaijWRJ4ikFEwyGC7QNyfJ0sMYJwpCfrn8/X35RH2n51uv18jRjGFuQ8kNAhdrUZF1z0s8hTIVxosdWuB7TTDCL4klvb/vn79scvN5/YMSQ78XNnXpQxN+Qof2d4C1xAT1w5m+ASRexwFnRDshFLuQltndwA63wM9UV0xOpsiPxFZIAoX2EOFReS14FkgZhzvA9WXUgz0hYTaPuUxGKGFp9CCTIvUJLleXG5iiypFJTF3LYSyipGNjdF3M4hQljUJ4Hws5hx5U6Yejti+HnzwbtBu6UlyxxoHXQKKYxlv9COf9TBDepYW8W2YguF29TZ/nT25NOH5w/PijaBfyutDIn+NIyClHEkf1TpaKjba6Vp6Z/Hn50//qVprG5wj9G7FWbznpEH5lPvGTm4eXVbCPWeCNj7QoZY7SDZiiDzWx3S8uHq4Jru5vTVwetFR65SR/B2C48w8qcenzAQsftQ3hBsKpbt6H/wObg1UiljIzhTwNIR/O7KYIcddIuhBOMIForBJAEKrAgZBOGM+JEn5TF1tPa3oFCok8OaEAYVWuYnUAZdQG2iiaTRWDbB6mZuxKaeAbeq2zCoKhhYrBUDV01GllR4piciIdodqmoOWT41ey11bBYMjr0ci9KX2FmB1chLlXpcjkUa98k9ic20/fyy0V5XB/dqSYlDZqz6zen2Emkli1aDqURiE3HOFbyysBVVq8pTHYgc0V/2fTXuXg8NOyrlOWsDpXHr5bf5GnStBINlriRn3NAvG+q43eI5o9ujy2Ts+lJSp6wh7LsmF039z3Gw9vGh8kLOIyQpqzJlOI1nLAfygsb/55o5a1RVgt6JFFGmCkFzHT29ykNuFrvmp/lk75OXe71kYSzvt/uisRx76SQEu0Zr4gVByCdmo3TdLUvnKX0+Mj5ot6115Xm5ZVy/ZnleRb7+lrvMfpn3hyIN88OhR+hFQ3Mzxy7VfCJSaGx9ciVZEADCgKSTk/aVq692yCuv4X/RdLULRkcUkZ57VRrj0P3yFHQ6TpGA+H5270vB4bmee0A1AAlYDhvI+gySHSeM24VPN4VRH8YMc/XwJBVzCa+0+yChq3TPC72Q3c10lNK+rZzVf9RSHZw=" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -45,13 +45,13 @@ MindMap.usePlugin(MiniMap)
|
||||
|
||||
3.在`container`内创建一个视口框元素`viewBoxContainer`，绝对定位，设置边框样式，过渡属性（可选）
|
||||
|
||||
4.监听`data_change`和`view_data_change`事件，在该事件内调用`calculationMiniMap`方法获取计算数据，然后将`svgHTML`渲染到`miniMapContainer`元素内，并且设置它的样式：
|
||||
4.监听`data_change`和`view_data_change`事件，在该事件内调用`calculationMiniMap`方法获取计算数据，然后将`svgHTML`渲染到`miniMapContainer`元素内，并且设置`miniMapContainer`元素的样式：
|
||||
|
||||
```js
|
||||
:style="{
|
||||
transform: `scale(${svgBoxScale})`,
|
||||
left: svgBoxLeft + 'px',
|
||||
top: svgBoxTop + 'px',
|
||||
transform: `scale(${miniMapBoxScale})`,
|
||||
left: miniMapBoxLeft + 'px',
|
||||
top: miniMapBoxTop + 'px',
|
||||
}"
|
||||
```
|
||||
|
||||
|
||||
@ -30,11 +30,11 @@ MindMap.usePlugin(MiniMap)
|
||||
<p>1.准备一个容器元素<code>container</code>，定位不为<code>static</code></p>
|
||||
<p>2.在<code>container</code>内创建一个小地图容器元素<code>miniMapContainer</code>，绝对定位</p>
|
||||
<p>3.在<code>container</code>内创建一个视口框元素<code>viewBoxContainer</code>，绝对定位，设置边框样式，过渡属性（可选）</p>
|
||||
<p>4.监听<code>data_change</code>和<code>view_data_change</code>事件，在该事件内调用<code>calculationMiniMap</code>方法获取计算数据，然后将<code>svgHTML</code>渲染到<code>miniMapContainer</code>元素内，并且设置它的样式：</p>
|
||||
<p>4.监听<code>data_change</code>和<code>view_data_change</code>事件，在该事件内调用<code>calculationMiniMap</code>方法获取计算数据，然后将<code>svgHTML</code>渲染到<code>miniMapContainer</code>元素内，并且设置<code>miniMapContainer</code>元素的样式：</p>
|
||||
<pre class="hljs"><code>:style=<span class="hljs-string">"{
|
||||
transform: `scale(${svgBoxScale})`,
|
||||
left: svgBoxLeft + 'px',
|
||||
top: svgBoxTop + 'px',
|
||||
transform: `scale(${miniMapBoxScale})`,
|
||||
left: miniMapBoxLeft + 'px',
|
||||
top: miniMapBoxTop + 'px',
|
||||
}"</span>
|
||||
</code></pre>
|
||||
<p>5.将<code>viewBoxStyle</code>对象设置为<code>viewBoxContainer</code>元素的样式</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user