开始进行插件化转换，即提取非核心的类作为插件，不再内置；抽取出校地图类插件

2026-02-21 18:37:43 +08:00 · 2023-01-17 13:56:57 +08:00 · 2023-01-17 13:56:57 +08:00 · d27eee0fae
commit d27eee0fae
parent 92ee241ed8
12 changed files with 173 additions and 103 deletions
--- 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
 }

 // 定义新主题
--- 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 => {
--- 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
--- 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
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@ -207,7 +207,33 @@ MindMap.defineTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>, {})
 mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
 </code></pre>
 <p>For all configurations of theme, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">Default Topic</a>. The <code>defineTheme</code>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 <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>.</p>
+<h3>usePlugin(plugin)</h3>
+<blockquote>
+<p>v0.3.0+</p>
+</blockquote>
+<p>If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method.</p>
+<h2>Static props</h2>
+<h3>pluginList</h3>
+<blockquote>
+<p>v0.3.0+</p>
+</blockquote>
+<p>List of all currently registered plugins.</p>
 <h2>Instance methods</h2>
+<h3>getSvgData()</h3>
+<blockquote>
+<p>v0.3.0+</p>
+</blockquote>
+<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>
+  svgHTML, <span class="hljs-comment">// String, svg string, i.e. html string, can be directly rendered to the small map container you prepared</span>
+  <span class="hljs-attr">rect</span>: <span class="hljs-comment">// Object, position, size, etc. of mind map graphics before zoom</span>
+  origWidth, <span class="hljs-comment">// Number, canvas width</span>
+  origHeight, <span class="hljs-comment">// Number, canvas height</span>
+  scaleX, <span class="hljs-comment">// Number, horizontal zoom value of mind map graphics</span>
+  scaleY, <span class="hljs-comment">// Number, vertical zoom value of mind map graphics</span>
+}
+</code></pre>
 <h3>render()</h3>
 <p>Triggers a full rendering, which will reuse nodes for better performance. If
 only the node positions have changed, this method can be called to <code>reRender</code>.</p>
--- 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
--- 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.</p>
 <p>The <code>mindMap.miniMap</code> instance can be obtained through this.</p>
 <h2>Methods</h2>
-<h3>getMiniMap()</h3>
-<p>Obtain small map related data, this function is generally not used directly, the
-function returns:</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>
-      svgHTML, <span class="hljs-comment">// String, svg string, i.e. html string, can be directly rendered to the small map container you prepared</span>
-      <span class="hljs-attr">rect</span>: <span class="hljs-comment">// Object, position, size, etc. of mind map graphics before zoom</span>
-      origWidth, <span class="hljs-comment">// Number, canvas width</span>
-      origHeight, <span class="hljs-comment">// Number, canvas height</span>
-      scaleX, <span class="hljs-comment">// Number, horizontal zoom value of mind map graphics</span>
-      scaleY, <span class="hljs-comment">// Number, vertical zoom value of mind map graphics</span>
-}
-</code></pre>
 <h3>calculationMiniMap(boxWidth, boxHeight)</h3>
 <p>&quot;Calculate the rendering data for the small map, this function will call the
 <code>getMiniMap()</code> method, so using this function is sufficient.</p>
--- 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`会更好一点，如果只是节点位置变化了可以调用该方法进行渲染
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@ -207,7 +207,33 @@ MindMap.defineTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>, {
 mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 </code></pre>
 <p>主题的所有配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">默认主题</a>。<code>defineTheme</code>方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>。</p>
+<h3>usePlugin(plugin)</h3>
+<blockquote>
+<p>v0.3.0+</p>
+</blockquote>
+<p>注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。</p>
+<h2>静态属性</h2>
+<h3>pluginList</h3>
+<blockquote>
+<p>v0.3.0+</p>
+</blockquote>
+<p>当前注册的所有插件列表。</p>
 <h2>实例方法</h2>
+<h3>getSvgData()</h3>
+<blockquote>
+<p>v0.3.0+</p>
+</blockquote>
+<p>获取<code>svg</code>数据，返回一个对象，详细结构如下：</p>
+<pre class="hljs"><code>{
+  svg, <span class="hljs-comment">// Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）</span>
+  svgHTML, <span class="hljs-comment">// String，svg字符串，即html字符串，可以直接渲染到你准备的小地图容器内</span>
+  <span class="hljs-attr">rect</span>: <span class="hljs-comment">// Object，思维导图图形未缩放时的位置尺寸等信息</span>
+  origWidth, <span class="hljs-comment">// Number，画布宽度</span>
+  origHeight, <span class="hljs-comment">// Number，画布高度</span>
+  scaleX, <span class="hljs-comment">// Number，思维导图图形的水平缩放值</span>
+  scaleY, <span class="hljs-comment">// Number，思维导图图形的垂直缩放值</span>
+}
+</code></pre>
 <h3>render()</h3>
 <p>触发整体渲染，会进行节点复用，性能较<code>reRender</code>会更好一点，如果只是节点位置变化了可以调用该方法进行渲染</p>
 <h3>reRender()</h3>
--- 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()`方法，所以一般使用该函数即可。
--- a/web/src/pages/Doc/zh/miniMap/index.vue
+++ b/web/src/pages/Doc/zh/miniMap/index.vue
@ -7,18 +7,6 @@
 <p>用于帮助快速开发小地图功能，小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。</p>
 <p>可通过<code>mindMap.miniMap</code>获取到该实例。</p>
 <h2>方法</h2>
-<h3>getMiniMap()</h3>
-<p>获取小地图相关数据，这个函数一般不会直接使用，函数返回的内容：</p>
-<pre class="hljs"><code>{
-      svg, <span class="hljs-comment">// Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）</span>
-      svgHTML, <span class="hljs-comment">// String，svg字符串，即html字符串，可以直接渲染到你准备的小地图容器内</span>
-      <span class="hljs-attr">rect</span>: <span class="hljs-comment">// Object，思维导图图形未缩放时的位置尺寸等信息</span>
-      origWidth, <span class="hljs-comment">// Number，画布宽度</span>
-      origHeight, <span class="hljs-comment">// Number，画布高度</span>
-      scaleX, <span class="hljs-comment">// Number，思维导图图形的水平缩放值</span>
-      scaleY, <span class="hljs-comment">// Number，思维导图图形的垂直缩放值</span>
-}
-</code></pre>
 <h3>calculationMiniMap(boxWidth, boxHeight)</h3>
 <p>计算小地图的渲染数据，该函数内会调用<code>getMiniMap()</code>方法，所以一般使用该函数即可。</p>
 <p><code>boxWidth</code>：小地图容器的宽度</p>
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@ -22,6 +22,7 @@

 <script>
 import MindMap from 'simple-mind-map'
+import MiniMap from 'simple-mind-map/src/MiniMap.js'
 import Outline from './Outline'
 import Style from './Style'
 import BaseStyle from './BaseStyle'
@ -39,6 +40,9 @@ import SidebarTrigger from './SidebarTrigger.vue'
 import { mapState } from 'vuex'
 import customThemeList from '@/customThemes'

+// 注册插件
+MindMap.usePlugin(MiniMap)
+
 // 注册自定义主题
 customThemeList.forEach((item) => {
  MindMap.defineTheme(item.value, item.theme)