提取水印类作为插件

2026-02-21 18:37:43 +08:00 · 2023-01-17 14:11:07 +08:00 · 2023-01-17 14:11:07 +08:00 · eb01646747
commit eb01646747
parent d27eee0fae
20 changed files with 106 additions and 35 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 Watermark from './src/Watermark'
 import { layoutValueList } from './src/utils/constant'
 import { SVG } from '@svgdotjs/svg.js'
 import { simpleDeepClone } from './src/utils'
@ -138,11 +137,6 @@ class MindMap {
      mindMap: this
    })

-    // 水印类
-    this.watermark = new Watermark({
-      mindMap: this
-    })
-
    // 批量执行类
    this.batchExecution = new BatchExecution()

--- a/simple-mind-map/src/Watermark.js
+++ b/simple-mind-map/src/Watermark.js
@ -3,7 +3,7 @@ import { degToRad, camelCaseToHyphen } from './utils'
 import merge from 'deepmerge'

 // 水印类
-export default class Watermark {
+class Watermark {
  constructor(opt = {}) {
    this.mindMap = opt.mindMap
    this.lineSpacing = 0 // 水印行间距
@ -109,3 +109,7 @@ export default class Watermark {
    this.draw()
  }
 }
+
+Watermark.instanceName = 'watermark'
+
+export default Watermark
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@ -85,7 +85,9 @@ For all configurations of theme, please refer to [Default Topic](https://github.

 > 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.
+If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.
+
+Note: The plugin needs to be registered before instantiating `MindMap`.

 ## Static props

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@ -211,7 +211,8 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
 <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>
+<p>If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.</p>
+<p>Note: The plugin needs to be registered before instantiating <code>MindMap</code>.</p>
 <h2>Static props</h2>
 <h3>pluginList</h3>
 <blockquote>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@ -16,7 +16,7 @@
 - [x] Supports free dragging and dragging to adjust nodes
 - [x] Supports various node shapes
 - [x] Supports export to json, png, svg, pdf, and import from json, xmind
- [x] Supports mini map
+- [x] Supports mini map、support watermark

 ## Table of Contents

--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@ -16,7 +16,7 @@ summaries</li>
 <li><input type="checkbox" id="checkbox23" checked="true"><label for="checkbox23">Supports free dragging and dragging to adjust nodes</label></li>
 <li><input type="checkbox" id="checkbox24" checked="true"><label for="checkbox24">Supports various node shapes</label></li>
 <li><input type="checkbox" id="checkbox25" checked="true"><label for="checkbox25">Supports export to json, png, svg, pdf, and import from json, xmind</label></li>
-<li><input type="checkbox" id="checkbox26" checked="true"><label for="checkbox26">Supports mini map</label></li>
+<li><input type="checkbox" id="checkbox26" checked="true"><label for="checkbox26">Supports mini map、support watermark</label></li>
 </ul>
 <h2>Table of Contents</h2>
 <p>1.<code>simple-mind-map</code></p>
--- a/web/src/pages/Doc/en/miniMap/index.md
+++ b/web/src/pages/Doc/en/miniMap/index.md
@ -1,4 +1,4 @@
-# MiniMap instance
+# MiniMap plugin

 > v0.2.11+

@ -8,7 +8,16 @@ When zoomed, moved, or there are too many elements, the canvas may only display
 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.
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import MiniMap from 'simple-mind-map/src/MiniMap.js'
+
+MindMap.usePlugin(MiniMap)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.miniMap`.

 ## Methods

--- a/web/src/pages/Doc/en/miniMap/index.vue
+++ b/web/src/pages/Doc/en/miniMap/index.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <h1>MiniMap instance</h1>
+    <h1>MiniMap plugin</h1>
 <blockquote>
 <p>v0.2.11+</p>
 </blockquote>
@ -9,7 +9,13 @@ parts, one is the current canvas content, and the other is the viewport frame.
 When zoomed, moved, or there are too many elements, the canvas may only display
 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>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> MiniMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/MiniMap.js&#x27;</span>
+
+MindMap.usePlugin(MiniMap)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.miniMap</code>.</p>
 <h2>Methods</h2>
 <h3>calculationMiniMap(boxWidth, boxHeight)</h3>
 <p>&quot;Calculate the rendering data for the small map, this function will call the
--- a/web/src/pages/Doc/en/watermark/index.md
+++ b/web/src/pages/Doc/en/watermark/index.md
@ -1,9 +1,19 @@
-# Watermark instance
+# Watermark plugin

 > 0.2.24+

-`Watermark` instance is responsible for displaying the watermark, and can be obtained
-through `mindMap.watermark`.
+`Watermark` instance is responsible for displaying the watermark.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import Watermark from 'simple-mind-map/src/Watermark.js'
+
+MindMap.usePlugin(Watermark)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.watermark`.

 ## Methods

--- a/web/src/pages/Doc/en/watermark/index.vue
+++ b/web/src/pages/Doc/en/watermark/index.vue
@ -1,11 +1,17 @@
 <template>
  <div>
-    <h1>Watermark instance</h1>
+    <h1>Watermark plugin</h1>
 <blockquote>
 <p>0.2.24+</p>
 </blockquote>
-<p><code>Watermark</code> instance is responsible for displaying the watermark, and can be obtained
-through <code>mindMap.watermark</code>.</p>
+<p><code>Watermark</code> instance is responsible for displaying the watermark.</p>
+<h2>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Watermark <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/Watermark.js&#x27;</span>
+
+MindMap.usePlugin(Watermark)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.watermark</code>.</p>
 <h2>Methods</h2>
 <h3>draw()</h3>
 <p>Redraw the watermark.</p>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@ -1,3 +1,3 @@

-        export default [{"lang":"zh","children":[{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"DoExport实例"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation实例"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap实例"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"select","title":"Select实例"},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark实例"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"DoExport instance"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation instance"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap instance"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"select","title":"Select instance"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark instance"},{"path":"xmind","title":"XMind parse"}]}]
+        export default [{"lang":"zh","children":[{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"DoExport实例"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation实例"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"select","title":"Select实例"},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"DoExport instance"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation instance"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"select","title":"Select instance"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}]
    
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@ -87,7 +87,9 @@ mindMap.setTheme('主题名称')

 > v0.3.0+

-注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。
+注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。可链式调用。
+
+注意：插件需要在实例化`MindMap`前注册。

 ## 静态属性

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@ -211,7 +211,8 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <blockquote>
 <p>v0.3.0+</p>
 </blockquote>
-<p>注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。</p>
+<p>注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。可链式调用。</p>
+<p>注意：插件需要在实例化<code>MindMap</code>前注册。</p>
 <h2>静态属性</h2>
 <h3>pluginList</h3>
 <blockquote>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@ -14,7 +14,7 @@
 - [x] 支持节点自由拖拽、拖拽调整
 - [x] 支持多种节点形状
 - [x] 支持导出为`json`、`png`、`svg`、`pdf`，支持从`json`、`xmind`导入
- [x] 支持小地图
+- [x] 支持小地图、支持水印

 ## 目录介绍

--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@ -14,7 +14,7 @@
 <li><input type="checkbox" id="checkbox7" checked="true"><label for="checkbox7">支持节点自由拖拽、拖拽调整</label></li>
 <li><input type="checkbox" id="checkbox8" checked="true"><label for="checkbox8">支持多种节点形状</label></li>
 <li><input type="checkbox" id="checkbox9" checked="true"><label for="checkbox9">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>，支持从<code>json</code>、<code>xmind</code>导入</li>
-<li><input type="checkbox" id="checkbox10" checked="true"><label for="checkbox10">支持小地图</label></li>
+<li><input type="checkbox" id="checkbox10" checked="true"><label for="checkbox10">支持小地图、支持水印</label></li>
 </ul>
 <h2>目录介绍</h2>
 <p>1.<code>simple-mind-map</code></p>
--- a/web/src/pages/Doc/zh/miniMap/index.md
+++ b/web/src/pages/Doc/zh/miniMap/index.md
@ -1,10 +1,19 @@
-# MiniMap实例
+# MiniMap插件

 > v0.2.11+

 用于帮助快速开发小地图功能，小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。

-可通过`mindMap.miniMap`获取到该实例。
+## 注册
+
+```js
+import MindMap from 'simple-mind-map'
+import MiniMap from 'simple-mind-map/src/MiniMap.js'
+
+MindMap.usePlugin(MiniMap)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.miniMap`获取到该实例。

 ## 方法

--- a/web/src/pages/Doc/zh/miniMap/index.vue
+++ b/web/src/pages/Doc/zh/miniMap/index.vue
@ -1,11 +1,17 @@
 <template>
  <div>
-    <h1>MiniMap实例</h1>
+    <h1>MiniMap插件</h1>
 <blockquote>
 <p>v0.2.11+</p>
 </blockquote>
 <p>用于帮助快速开发小地图功能，小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。</p>
-<p>可通过<code>mindMap.miniMap</code>获取到该实例。</p>
+<h2>注册</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> MiniMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/MiniMap.js&#x27;</span>
+
+MindMap.usePlugin(MiniMap)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.miniMap</code>获取到该实例。</p>
 <h2>方法</h2>
 <h3>calculationMiniMap(boxWidth, boxHeight)</h3>
 <p>计算小地图的渲染数据，该函数内会调用<code>getMiniMap()</code>方法，所以一般使用该函数即可。</p>
--- a/web/src/pages/Doc/zh/watermark/index.md
+++ b/web/src/pages/Doc/zh/watermark/index.md
@ -1,8 +1,19 @@
-# Watermark实例
+# Watermark插件

 > 0.2.24+

-`Watermark`实例负责显示水印，可通过`mindMap.watermark`获取到该实例。
+`Watermark`插件负责显示水印。
+
+## 注册
+
+```js
+import MindMap from 'simple-mind-map'
+import Watermark from 'simple-mind-map/src/Watermark.js'
+
+MindMap.usePlugin(Watermark)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.watermark`获取到该实例。

 ## 方法

--- a/web/src/pages/Doc/zh/watermark/index.vue
+++ b/web/src/pages/Doc/zh/watermark/index.vue
@ -1,10 +1,17 @@
 <template>
  <div>
-    <h1>Watermark实例</h1>
+    <h1>Watermark插件</h1>
 <blockquote>
 <p>0.2.24+</p>
 </blockquote>
-<p><code>Watermark</code>实例负责显示水印，可通过<code>mindMap.watermark</code>获取到该实例。</p>
+<p><code>Watermark</code>插件负责显示水印。</p>
+<h2>注册</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Watermark <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/Watermark.js&#x27;</span>
+
+MindMap.usePlugin(Watermark)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.watermark</code>获取到该实例。</p>
 <h2>方法</h2>
 <h3>draw()</h3>
 <p>重新绘制水印。</p>
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@ -23,6 +23,7 @@
 <script>
 import MindMap from 'simple-mind-map'
 import MiniMap from 'simple-mind-map/src/MiniMap.js'
+import Watermark from 'simple-mind-map/src/Watermark.js';
 import Outline from './Outline'
 import Style from './Style'
 import BaseStyle from './BaseStyle'
@ -41,7 +42,9 @@ import { mapState } from 'vuex'
 import customThemeList from '@/customThemes'

 // 注册插件
-MindMap.usePlugin(MiniMap)
+MindMap
+  .usePlugin(MiniMap)
+  .usePlugin(Watermark)

 // 注册自定义主题
 customThemeList.forEach((item) => {