From d27eee0fae6a3be23efcef27e5ad1b0d0e7c7d75 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Tue, 17 Jan 2023 13:56:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=A7=8B=E8=BF=9B=E8=A1=8C=E6=8F=92?=
=?UTF-8?q?=E4=BB=B6=E5=8C=96=E8=BD=AC=E6=8D=A2=EF=BC=8C=E5=8D=B3=E6=8F=90?=
=?UTF-8?q?=E5=8F=96=E9=9D=9E=E6=A0=B8=E5=BF=83=E7=9A=84=E7=B1=BB=E4=BD=9C?=
=?UTF-8?q?=E4=B8=BA=E6=8F=92=E4=BB=B6=EF=BC=8C=E4=B8=8D=E5=86=8D=E5=86=85?=
=?UTF-8?q?=E7=BD=AE=EF=BC=9B=E6=8A=BD=E5=8F=96=E5=87=BA=E6=A0=A1=E5=9C=B0?=
=?UTF-8?q?=E5=9B=BE=E7=B1=BB=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
simple-mind-map/index.js | 57 +++++++++++++++++++---
simple-mind-map/src/Export.js | 2 +-
simple-mind-map/src/MiniMap.js | 41 ++--------------
web/src/pages/Doc/en/constructor/index.md | 32 ++++++++++++
web/src/pages/Doc/en/constructor/index.vue | 26 ++++++++++
web/src/pages/Doc/en/miniMap/index.md | 17 -------
web/src/pages/Doc/en/miniMap/index.vue | 13 -----
web/src/pages/Doc/zh/constructor/index.md | 30 ++++++++++++
web/src/pages/Doc/zh/constructor/index.vue | 26 ++++++++++
web/src/pages/Doc/zh/miniMap/index.md | 16 ------
web/src/pages/Doc/zh/miniMap/index.vue | 12 -----
web/src/pages/Edit/components/Edit.vue | 4 ++
12 files changed, 173 insertions(+), 103 deletions(-)
diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js
index 05c1e39e..9f45265e 100644
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -10,7 +10,6 @@ import BatchExecution from './src/BatchExecution'
import Export from './src/Export'
import Select from './src/Select'
import Drag from './src/Drag'
-import MiniMap from './src/MiniMap'
import Watermark from './src/Watermark'
import { layoutValueList } from './src/utils/constant'
import { SVG } from '@svgdotjs/svg.js'
@@ -119,11 +118,6 @@ class MindMap {
draw: this.draw
})
- // 小地图类
- this.miniMap = new MiniMap({
- mindMap: this
- })
-
// 导出类
this.doExport = new Export({
mindMap: this
@@ -152,6 +146,13 @@ class MindMap {
// 批量执行类
this.batchExecution = new BatchExecution()
+ // 注册插件
+ MindMap.pluginList.forEach((plugin) => {
+ this[plugin.instanceName] = new plugin({
+ mindMap: this
+ })
+ })
+
// 初始渲染
this.reRender()
setTimeout(() => {
@@ -354,6 +355,50 @@ class MindMap {
}
this.emit('mode_change', mode)
}
+
+ // 获取svg数据
+ getSvgData() {
+ const svg = this.svg
+ const draw = this.draw
+ // 保存原始信息
+ const origWidth = svg.width()
+ const origHeight = svg.height()
+ const origTransform = draw.transform()
+ const elRect = this.el.getBoundingClientRect()
+ // 去除放大缩小的变换效果
+ draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
+ // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
+ const rect = draw.rbox()
+ // 将svg设置为实际内容的宽高
+ svg.size(rect.width, rect.height)
+ // 把实际内容变换
+ draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
+ // 克隆一份数据
+ const clone = svg.clone()
+ // 恢复原先的大小和变换信息
+ svg.size(origWidth, origHeight)
+ draw.transform(origTransform)
+
+ return {
+ svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
+ svgHTML: clone.svg(), // svg字符串
+ rect: {
+ ...rect, // 思维导图图形未缩放时的位置尺寸等信息
+ ratio: rect.width / rect.height // 思维导图图形的宽高比
+ },
+ origWidth, // 画布宽度
+ origHeight, // 画布高度
+ scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
+ scaleY: origTransform.scaleY // 思维导图图形的垂直缩放值
+ }
+ }
+}
+
+// 插件列表
+MindMap.pluginList = []
+MindMap.usePlugin = (plugin) => {
+ MindMap.pluginList.push(plugin)
+ return MindMap
}
// 定义新主题
diff --git a/simple-mind-map/src/Export.js b/simple-mind-map/src/Export.js
index 4f0ed230..141965ee 100644
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -26,7 +26,7 @@ class Export {
// 获取svg数据
async getSvgData() {
- let { svg, svgHTML } = this.mindMap.miniMap.getMiniMap()
+ let { svg, svgHTML } = this.mindMap.getSvgData()
// 把图片的url转换成data:url类型，否则导出会丢失图片
let imageList = svg.find('image')
let task = imageList.map(async item => {
diff --git a/simple-mind-map/src/MiniMap.js b/simple-mind-map/src/MiniMap.js
index fe9b12af..9bc1d6ba 100644
--- a/simple-mind-map/src/MiniMap.js
+++ b/simple-mind-map/src/MiniMap.js
@@ -14,43 +14,6 @@ class MiniMap {
}
}
- // 获取小地图相关数据
- getMiniMap() {
- const svg = this.mindMap.svg
- const draw = this.mindMap.draw
- // 保存原始信息
- const origWidth = svg.width()
- const origHeight = svg.height()
- const origTransform = draw.transform()
- const elRect = this.mindMap.el.getBoundingClientRect()
- // 去除放大缩小的变换效果
- draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
- // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
- const rect = draw.rbox()
- // 将svg设置为实际内容的宽高
- svg.size(rect.width, rect.height)
- // 把实际内容变换
- draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
- // 克隆一份数据
- const clone = svg.clone()
- // 恢复原先的大小和变换信息
- svg.size(origWidth, origHeight)
- draw.transform(origTransform)
-
- return {
- svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
- svgHTML: clone.svg(), // svg字符串
- rect: {
- ...rect, // 思维导图图形未缩放时的位置尺寸等信息
- ratio: rect.width / rect.height // 思维导图图形的宽高比
- },
- origWidth, // 画布宽度
- origHeight, // 画布高度
- scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
- scaleY: origTransform.scaleY // 思维导图图形的垂直缩放值
- }
- }
-
// 计算小地图的渲染数据
/**
* boxWidth：小地图容器的宽度
@@ -58,7 +21,7 @@ class MiniMap {
*/
calculationMiniMap(boxWidth, boxHeight) {
let { svgHTML, rect, origWidth, origHeight, scaleX, scaleY } =
- this.getMiniMap()
+ this.mindMap.getSvgData()
// 计算数据
let boxRatio = boxWidth / boxHeight
let actWidth = 0
@@ -144,4 +107,6 @@ class MiniMap {
}
}
+MiniMap.instanceName = 'miniMap'
+
export default MiniMap
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md
index dfcda5d2..3c159c70 100644
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -81,10 +81,42 @@ mindMap.setTheme('Theme name')
For all configurations of theme, please refer to [Default Topic](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js). The `defineTheme`method will merge the configuration you passed in with the default configuration. Most of the themes do not need custom many parts. For a typical customized theme configuration, please refer to [blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js).
+### usePlugin(plugin)
+
+> v0.3.0+
+
+If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method.
+
+## Static props
+
+### pluginList
+
+> v0.3.0+
+
+List of all currently registered plugins.
+
## Instance methods
+### getSvgData()
+
+> v0.3.0+
+
+Get the `svg` data and return an object. The detailed structure is as follows:
+
+```js
+{
+ svg, // Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)
+ svgHTML, // String, svg string, i.e. html string, can be directly rendered to the small map container you prepared
+ rect: // Object, position, size, etc. of mind map graphics before zoom
+ origWidth, // Number, canvas width
+ origHeight, // Number, canvas height
+ scaleX, // Number, horizontal zoom value of mind map graphics
+ scaleY, // Number, vertical zoom value of mind map graphics
+}
+```
+
### render()
Triggers a full rendering, which will reuse nodes for better performance. If
diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue
index 4e242a3d..adfeacee 100644
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -207,7 +207,33 @@ MindMap.defineTheme('Theme name', {})
mindMap.setTheme('Theme name')
For all configurations of theme, please refer to Default Topic. The defineThememethod will merge the configuration you passed in with the default configuration. Most of the themes do not need custom many parts. For a typical customized theme configuration, please refer to blueSky.
+usePlugin(plugin)
+
+v0.3.0+
+
+If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method.
+Static props
+pluginList
+
+v0.3.0+
+
+List of all currently registered plugins.
Instance methods
+getSvgData()
+
+v0.3.0+
+
+Get the svg data and return an object. The detailed structure is as follows:
+{
+ svg,
+ svgHTML,
+ rect:
+ origWidth,
+ origHeight,
+ scaleX,
+ scaleY,
+}
+
render()
Triggers a full rendering, which will reuse nodes for better performance. If
only the node positions have changed, this method can be called to reRender.
diff --git a/web/src/pages/Doc/en/miniMap/index.md b/web/src/pages/Doc/en/miniMap/index.md
index b51d53af..0492c671 100644
--- a/web/src/pages/Doc/en/miniMap/index.md
+++ b/web/src/pages/Doc/en/miniMap/index.md
@@ -12,23 +12,6 @@ The `mindMap.miniMap` instance can be obtained through this.
## Methods
-### getMiniMap()
-
-Obtain small map related data, this function is generally not used directly, the
-function returns:
-
-```js
-{
- svg, // Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)
- svgHTML, // String, svg string, i.e. html string, can be directly rendered to the small map container you prepared
- rect: // Object, position, size, etc. of mind map graphics before zoom
- origWidth, // Number, canvas width
- origHeight, // Number, canvas height
- scaleX, // Number, horizontal zoom value of mind map graphics
- scaleY, // Number, vertical zoom value of mind map graphics
-}
-```
-
### calculationMiniMap(boxWidth, boxHeight)
"Calculate the rendering data for the small map, this function will call the
diff --git a/web/src/pages/Doc/en/miniMap/index.vue b/web/src/pages/Doc/en/miniMap/index.vue
index dcb0a330..1f231a4f 100644
--- a/web/src/pages/Doc/en/miniMap/index.vue
+++ b/web/src/pages/Doc/en/miniMap/index.vue
@@ -11,19 +11,6 @@ part of the mind map content. The viewport frame can be used to view the current
viewport location, and can be quickly positioned by dragging on the small map.
The mindMap.miniMap instance can be obtained through this.
Methods
-getMiniMap()
-Obtain small map related data, this function is generally not used directly, the
-function returns:
-{
- svg,
- svgHTML,
- rect:
- origWidth,
- origHeight,
- scaleX,
- scaleY,
-}
-
calculationMiniMap(boxWidth, boxHeight)
"Calculate the rendering data for the small map, this function will call the
getMiniMap() method, so using this function is sufficient.
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index 68db1720..9d3e0a71 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -83,10 +83,40 @@ mindMap.setTheme('主题名称')
主题的所有配置可以参考[默认主题](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js)。`defineTheme`方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考[blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js)。
+### usePlugin(plugin)
+> v0.3.0+
+
+注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。
+
+## 静态属性
+
+### pluginList
+
+> v0.3.0+
+
+当前注册的所有插件列表。
## 实例方法
+### getSvgData()
+
+> v0.3.0+
+
+获取`svg`数据，返回一个对象，详细结构如下：
+
+```js
+{
+ svg, // Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
+ svgHTML, // String，svg字符串，即html字符串，可以直接渲染到你准备的小地图容器内
+ rect: // Object，思维导图图形未缩放时的位置尺寸等信息
+ origWidth, // Number，画布宽度
+ origHeight, // Number，画布高度
+ scaleX, // Number，思维导图图形的水平缩放值
+ scaleY, // Number，思维导图图形的垂直缩放值
+}
+```
+
### render()
触发整体渲染，会进行节点复用，性能较`reRender`会更好一点，如果只是节点位置变化了可以调用该方法进行渲染
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 35cfe076..9fcc1fed 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -207,7 +207,33 @@ MindMap.defineTheme('主题名称', {
mindMap.setTheme('主题名称')
主题的所有配置可以参考默认主题。defineTheme方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考blueSky。
+usePlugin(plugin)
+
+v0.3.0+
+
+注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。
+静态属性
+pluginList
+
+v0.3.0+
+
+当前注册的所有插件列表。
实例方法
+getSvgData()
+
+v0.3.0+
+
+获取svg数据，返回一个对象，详细结构如下：
+{
+ svg,
+ svgHTML,
+ rect:
+ origWidth,
+ origHeight,
+ scaleX,
+ scaleY,
+}
+
render()
触发整体渲染，会进行节点复用，性能较reRender会更好一点，如果只是节点位置变化了可以调用该方法进行渲染
reRender()
diff --git a/web/src/pages/Doc/zh/miniMap/index.md b/web/src/pages/Doc/zh/miniMap/index.md
index 8256e61c..fbd9dd24 100644
--- a/web/src/pages/Doc/zh/miniMap/index.md
+++ b/web/src/pages/Doc/zh/miniMap/index.md
@@ -8,22 +8,6 @@
## 方法
-### getMiniMap()
-
-获取小地图相关数据，这个函数一般不会直接使用，函数返回的内容：
-
-```js
-{
- svg, // Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
- svgHTML, // String，svg字符串，即html字符串，可以直接渲染到你准备的小地图容器内
- rect: // Object，思维导图图形未缩放时的位置尺寸等信息
- origWidth, // Number，画布宽度
- origHeight, // Number，画布高度
- scaleX, // Number，思维导图图形的水平缩放值
- scaleY, // Number，思维导图图形的垂直缩放值
-}
-```
-
### calculationMiniMap(boxWidth, boxHeight)
计算小地图的渲染数据，该函数内会调用`getMiniMap()`方法，所以一般使用该函数即可。
diff --git a/web/src/pages/Doc/zh/miniMap/index.vue b/web/src/pages/Doc/zh/miniMap/index.vue
index a4091be8..029b057c 100644
--- a/web/src/pages/Doc/zh/miniMap/index.vue
+++ b/web/src/pages/Doc/zh/miniMap/index.vue
@@ -7,18 +7,6 @@
用于帮助快速开发小地图功能，小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。
可通过mindMap.miniMap获取到该实例。
方法
-getMiniMap()
-获取小地图相关数据，这个函数一般不会直接使用，函数返回的内容：
-{
- svg,
- svgHTML,
- rect:
- origWidth,
- origHeight,
- scaleX,
- scaleY,
-}
-
calculationMiniMap(boxWidth, boxHeight)
计算小地图的渲染数据，该函数内会调用getMiniMap()方法，所以一般使用该函数即可。
boxWidth：小地图容器的宽度
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index deeda3f6..9a168d3b 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -22,6 +22,7 @@