coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 10:27:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Doc: update

Browse Source
This commit is contained in:
wanglin2 2023-10-17 16:56:07 +08:00
parent e0db4ad4f6
commit baf36acc97
10 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -310,7 +310,7 @@ Clear `lineDraw`、`associativeLineDraw`、`nodeDraw`、`otherDraw` containers.
Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.
### getSvgData({ paddingX = 0, paddingY = 0 })
### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false })
> v0.3.0+
@ -318,6 +318,8 @@ Destroy mind maps. It will remove registered plugins, remove listening events, a
`paddingY`: Padding y
`ignoreWatermark`：v0.8.0+, Do not draw watermarks. If you do not need to draw watermarks, you can pass 'true' because drawing watermarks is very slow
Get the `svg` data and return an object. The detailed structure is as follows:
```js
@ -404,6 +406,7 @@ Listen to an event. Event list:
| node_icon_click（v0.6.10+） | Triggered when clicking on an icon within a node | this（node instance）、item（Click on the icon name）、e（event object） |
| view_theme_change（v0.6.12+） | Triggered after calling the setTheme method to set the theme | theme（theme name） |
| set_data（v0.7.3+） | Triggered when the setData method is called to dynamically set mind map data | data（New Mind Map Data） |
| resize（v0.8.0+） | Triggered after the container size changes, actually when the 'resize' method of the mind map instance is called | |
### emit(event, ...args)

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

@ -771,12 +771,13 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
<p>v0.6.0+</p>
</blockquote>
<p>Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.</p>
<h3>getSvgData({ paddingX = 0, paddingY = 0 })</h3>
<h3>getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false })</h3>
<blockquote>
<p>v0.3.0+</p>
</blockquote>
<p><code>paddingX</code>: Padding x</p>
<p><code>paddingY</code>: Padding y</p>
<p><code>ignoreWatermark</code>：v0.8.0+, Do not draw watermarks. If you do not need to draw watermarks, you can pass 'true' because drawing watermarks is very slow</p>
<p>Get the <code>svg</code> data and return an object. The detailed structure is as follows:</p>
<pre class="hljs"><code>{
svg, <span class="hljs-comment">// Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)</span>
@ -1019,6 +1020,11 @@ poor performance and should be used sparingly.</p>
<td>Triggered when the setData method is called to dynamically set mind map data</td>
<td>data（New Mind Map Data）</td>
</tr>
<tr>
<td>resize（v0.8.0+）</td>
<td>Triggered after the container size changes, actually when the 'resize' method of the mind map instance is called</td>
<td></td>
</tr>
</tbody>
</table>
<h3>emit(event, ...args)</h3>

3
web/src/pages/Doc/en/miniMap/index.md
View File

@ -35,7 +35,8 @@ Function return content:
```js
{
svgHTML, // small map html
getImgUrl,// v0.8.0+, An asynchronous function that you can call and pass a callback function. The callback function can receive a parameter representing a small map of the image type, and you can render it through the img tag
svgHTML, // Mini map HTML, it is recommended to use the getImgUrl method to obtain image type mini maps, reduce the number of page DOM, and optimize performance
viewBoxStyle, // view box position information
miniMapBoxScale, // view box zoom value
miniMapBoxLeft, // view box left value

3
web/src/pages/Doc/en/miniMap/index.vue
View File

@ -25,7 +25,8 @@ MindMap.usePlugin(MiniMap)
<p><code>boxHeight</code>: the height of the small map container</p>
<p>Function return content:</p>
<pre class="hljs"><code>{
svgHTML, <span class="hljs-comment">// small map html</span>
getImgUrl,<span class="hljs-comment">// v0.8.0+, An asynchronous function that you can call and pass a callback function. The callback function can receive a parameter representing a small map of the image type, and you can render it through the img tag</span>
svgHTML, <span class="hljs-comment">// Mini map HTML, it is recommended to use the getImgUrl method to obtain image type mini maps, reduce the number of page DOM, and optimize performance</span>
viewBoxStyle, <span class="hljs-comment">// view box position information</span>
miniMapBoxScale, <span class="hljs-comment">// view box zoom value</span>
miniMapBoxLeft, <span class="hljs-comment">// view box left value</span>

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

@ -310,7 +310,7 @@ mindMap.setTheme('主题名称')
销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。
### getSvgData({ paddingX = 0, paddingY = 0 })
### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false })
> v0.3.0+
@ -318,6 +318,8 @@ mindMap.setTheme('主题名称')
`paddingY`：垂直内边距
`ignoreWatermark`：v0.8.0+，不要绘制水印，如果不需要绘制水印的场景可以传`true`，因为绘制水印非常慢
获取`svg`数据，返回一个对象，详细结构如下：
```js
@ -401,6 +403,7 @@ mindMap.setTheme('主题名称')
| node_icon_click（v0.6.10+） | 点击节点内的图标时触发 | this（节点实例）、item（点击的图标名称）、e（事件对象） |
| view_theme_change（v0.6.12+） | 调用了setTheme方法设置主题后触发 | theme（设置的新主题名称） |
| set_data（v0.7.3+） | 调用了setData方法动态设置思维导图数据时触发 | data（新的思维导图数据） |
| resize（v0.8.0+） | 容器尺寸改变后触发，实际上是当思维导图实例的`resize`方法被调用后触发 | |
### emit(event, ...args)

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

@ -695,12 +695,13 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<p>v0.6.0+</p>
</blockquote>
<p>销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。</p>
<h3>getSvgData({ paddingX = 0, paddingY = 0 })</h3>
<h3>getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false })</h3>
<blockquote>
<p>v0.3.0+</p>
</blockquote>
<p><code>paddingX</code>：水平内边距</p>
<p><code>paddingY</code>：垂直内边距</p>
<p><code>ignoreWatermark</code>：v0.8.0+，不要绘制水印，如果不需要绘制水印的场景可以传<code>true</code>，因为绘制水印非常慢</p>
<p>获取<code>svg</code>数据，返回一个对象，详细结构如下：</p>
<pre class="hljs"><code>{
svg, <span class="hljs-comment">// Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）</span>
@ -936,6 +937,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<td>调用了setData方法动态设置思维导图数据时触发</td>
<td>data（新的思维导图数据）</td>
</tr>
<tr>
<td>resize（v0.8.0+）</td>
<td>容器尺寸改变后触发，实际上是当思维导图实例的<code>resize</code>方法被调用后触发</td>
<td></td>
</tr>
</tbody>
</table>
<h3>emit(event, ...args)</h3>

17
web/src/pages/Doc/zh/course14/index.md
View File

@ -12,6 +12,7 @@
```js
{
getImgUrl,// v0.8.0+，一个异步函数，你可以调用该函数，传递一个回调函数，回调函数可以接收一个参数，代表图片类型的小地图，你可以通过img标签进行渲染
svgHTML, // 小地图html
viewBoxStyle, // 视图框的位置信息
miniMapBoxScale, // 视图框的缩放值
@ -32,7 +33,13 @@ transform-origin: left top;
3.在container内创建一个视口框元素viewBoxContainer，绝对定位，设置边框样式，过渡属性（可选）
4.监听data_change和view_data_change事件，最好也监听一下node_tree_render_end事件，防止初次渲染完毕后小地图没有刷新，在该事件内调用calculationMiniMap方法获取计算数据，然后将返回数据中的svgHTML渲染到miniMapContainer元素内，并且给miniMapContainer元素设置或更新如下样式：
4.监听data_change和view_data_change事件，最好也监听一下node_tree_render_end事件，防止初次渲染完毕后小地图没有刷新，在该事件内调用calculationMiniMap方法获取计算数据，然后将返回数据中的svgHTML渲染到miniMapContainer元素内：
```js
miniMapContainer.innerHTML = svgHTML
```
并且给miniMapContainer元素设置或更新如下样式：
```js
{
@ -49,6 +56,14 @@ transform-origin: left top;
插件的完整信息可以参考[miniMap](https://wanglin2.github.io/mind-map/#/doc/zh/miniMap)。
在`v0.8.0+`版本之后，`calculationMiniMap`方法会返回`getImgUrl`属性，这是一个异步函数，你可以调用它并传递一个回调函数，回调函数可以接收一个参数，代表小地图图片数据，然后可以通过`img`标签进行渲染，替代前面的`svgHTML`，这样可以减少页面上的节点数量，能优化一定的性能：
```js
getImgUrl(img => {
img.src = img
})
```
## 完整示例
<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=" />

11
web/src/pages/Doc/zh/course14/index.vue
View File

@ -9,6 +9,7 @@
<p>小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。</p>
<p>当注册了小地图插件后可以通过<code>mindMap.miniMap</code>获取到插件实例，然后通过<code>mindMap.miniMap.calculationMiniMap</code>方法即可获取小地图渲染需要的数据，返回的数据结构如下：</p>
<pre class="hljs"><code>{
getImgUrl,<span class="hljs-comment">// v0.8.0+，一个异步函数，你可以调用该函数，传递一个回调函数，回调函数可以接收一个参数，代表图片类型的小地图，你可以通过img标签进行渲染</span>
svgHTML, <span class="hljs-comment">// 小地图html</span>
viewBoxStyle, <span class="hljs-comment">// 视图框的位置信息</span>
miniMapBoxScale, <span class="hljs-comment">// 视图框的缩放值</span>
@ -22,7 +23,10 @@
<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>
<p>4.监听data_change和view_data_change事件，最好也监听一下node_tree_render_end事件，防止初次渲染完毕后小地图没有刷新，在该事件内调用calculationMiniMap方法获取计算数据，然后将返回数据中的svgHTML渲染到miniMapContainer元素内：</p>
<pre class="hljs"><code>miniMapContainer.innerHTML = svgHTML
</code></pre>
<p>并且给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">&#x27;px&#x27;</span>,
@ -33,6 +37,11 @@
<p>到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置</p>
<p>6.监听container元素的mousedown、mousemove、mouseup事件，分别调用小地图插件实例的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果</p>
<p>插件的完整信息可以参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/miniMap">miniMap</a>。</p>
<p>在<code>v0.8.0+</code>版本之后，<code>calculationMiniMap</code>方法会返回<code>getImgUrl</code>属性，这是一个异步函数，你可以调用它并传递一个回调函数，回调函数可以接收一个参数，代表小地图图片数据，然后可以通过<code>img</code>标签进行渲染，替代前面的<code>svgHTML</code>，这样可以减少页面上的节点数量，能优化一定的性能：</p>
<pre class="hljs"><code>getImgUrl(<span class="hljs-function"><span class="hljs-params">img</span> =&gt;</span> {
img.src = img
})
</code></pre>
<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>

3
web/src/pages/Doc/zh/miniMap/index.md
View File

@ -30,7 +30,8 @@ MindMap.usePlugin(MiniMap)
```js
{
svgHTML, // 小地图html
getImgUrl,// v0.8.0+，一个异步函数，你可以调用该函数，传递一个回调函数，回调函数可以接收一个参数，代表图片类型的小地图，你可以通过img标签进行渲染
svgHTML, // 小地图html，推荐使用getImgUrl方式获取图片类型的小地图，减少页面DOM数量，优化性能
viewBoxStyle, // 视图框的位置信息
miniMapBoxScale, // 视图框的缩放值
miniMapBoxLeft, // 视图框的left值

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

@ -20,7 +20,8 @@ MindMap.usePlugin(MiniMap)
<p><code>boxHeight</code>：小地图容器的高度</p>
<p>函数返回内容：</p>
<pre class="hljs"><code>{
svgHTML, <span class="hljs-comment">// 小地图html</span>
getImgUrl,<span class="hljs-comment">// v0.8.0+，一个异步函数，你可以调用该函数，传递一个回调函数，回调函数可以接收一个参数，代表图片类型的小地图，你可以通过img标签进行渲染</span>
svgHTML, <span class="hljs-comment">// 小地图html，推荐使用getImgUrl方式获取图片类型的小地图，减少页面DOM数量，优化性能</span>
viewBoxStyle, <span class="hljs-comment">// 视图框的位置信息</span>
miniMapBoxScale, <span class="hljs-comment">// 视图框的缩放值</span>
miniMapBoxLeft, <span class="hljs-comment">// 视图框的left值</span>