From baf36acc975b76112c9590963a594b3517440f12 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Tue, 17 Oct 2023 16:56:07 +0800 Subject: [PATCH] Doc: update --- web/src/pages/Doc/en/constructor/index.md | 5 ++++- web/src/pages/Doc/en/constructor/index.vue | 8 +++++++- web/src/pages/Doc/en/miniMap/index.md | 3 ++- web/src/pages/Doc/en/miniMap/index.vue | 3 ++- web/src/pages/Doc/zh/constructor/index.md | 5 ++++- web/src/pages/Doc/zh/constructor/index.vue | 8 +++++++- web/src/pages/Doc/zh/course14/index.md | 17 ++++++++++++++++- web/src/pages/Doc/zh/course14/index.vue | 11 ++++++++++- web/src/pages/Doc/zh/miniMap/index.md | 3 ++- web/src/pages/Doc/zh/miniMap/index.vue | 3 ++- 10 files changed, 56 insertions(+), 10 deletions(-) diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index e7c3114f..a83aecad 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -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) diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index f9254f26..aed840f6 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -771,12 +771,13 @@ mindMap.setTheme('Theme name')

v0.6.0+

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+

paddingX: Padding x

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:

{
   svg, // Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)
@@ -1019,6 +1020,11 @@ poor performance and should be used sparingly.

 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)

diff --git a/web/src/pages/Doc/en/miniMap/index.md b/web/src/pages/Doc/en/miniMap/index.md
index 68ac2fc0..74a62890 100644
--- a/web/src/pages/Doc/en/miniMap/index.md
+++ b/web/src/pages/Doc/en/miniMap/index.md
@@ -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
diff --git a/web/src/pages/Doc/en/miniMap/index.vue b/web/src/pages/Doc/en/miniMap/index.vue
index 5591fbff..0dd90323 100644
--- a/web/src/pages/Doc/en/miniMap/index.vue
+++ b/web/src/pages/Doc/en/miniMap/index.vue
@@ -25,7 +25,8 @@ MindMap.usePlugin(MiniMap)
 
boxHeight: the height of the small map container

 
Function return content:

 
{
-      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
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index f92d6aac..d17efa01 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -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)
 
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index f03a1065..676ae56c 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -695,12 +695,13 @@ mindMap.setTheme('主题名称')
 
v0.6.0+

 
 
销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。

-
getSvgData({ paddingX = 0, paddingY = 0 })

+
getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false })

 

 
v0.3.0+

 

 
paddingX：水平内边距

 
paddingY：垂直内边距

+
ignoreWatermark：v0.8.0+，不要绘制水印，如果不需要绘制水印的场景可以传true，因为绘制水印非常慢

 
获取svg数据，返回一个对象，详细结构如下：

 
{
   svg, // Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
@@ -936,6 +937,11 @@ mindMap.setTheme('主题名称')
 调用了setData方法动态设置思维导图数据时触发
 data（新的思维导图数据）
 
+
+resize（v0.8.0+）
+容器尺寸改变后触发，实际上是当思维导图实例的resize方法被调用后触发
+
+
 
 
 
emit(event, ...args)

diff --git a/web/src/pages/Doc/zh/course14/index.md b/web/src/pages/Doc/zh/course14/index.md
index 0b962805..5af73b13 100644
--- a/web/src/pages/Doc/zh/course14/index.md
+++ b/web/src/pages/Doc/zh/course14/index.md
@@ -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
+})
+```
+
 ## 完整示例