Feat：支持仅在导出时显示水印的配置选项

wanglin2 · Dec 25, 2023 · 2bcf763 · 2bcf763
1 parent 9ea36a8
commit 2bcf763
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 16 deletions.
diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js
@@ -407,20 +407,34 @@ class MindMap {
     draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
     // 克隆一份数据
     let clone = svg.clone()
-    // 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题
-    if (
-      !ignoreWatermark &&
-      (rect.width > origWidth || rect.height > origHeight) &&
-      this.watermark &&
-      this.watermark.hasWatermark()
-    ) {
-      this.width = rect.width
-      this.height = rect.height
-      this.watermark.onResize()
-      clone = svg.clone()
-      this.width = origWidth
-      this.height = origHeight
-      this.watermark.onResize()
+    // 是否存在水印
+    const hasWatermark = this.watermark && this.watermark.hasWatermark()
+    if (!ignoreWatermark && hasWatermark) {
+      this.watermark.isInExport = true
+      // 是否是仅导出时需要水印
+      const { onlyExport } = this.opt.watermarkConfig
+      // 是否需要重新绘制水印
+      const needReDrawWatermark =
+        rect.width > origWidth || rect.height > origHeight
+      // 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题
+      if (needReDrawWatermark) {
+        this.width = rect.width
+        this.height = rect.height
+        this.watermark.onResize()
+        clone = svg.clone()
+        this.width = origWidth
+        this.height = origHeight
+        this.watermark.onResize()
+      } else if (onlyExport) {
+        // 如果是仅导出时需要水印，那么需要进行绘制
+        this.watermark.onResize()
+        clone = svg.clone()
+      }
+      // 如果是仅导出时需要水印，需要清除
+      if (onlyExport) {
+        this.watermark.clear()
+      }
+      this.watermark.isInExport = false
     }
     // 添加必要的样式
     clone.add(SVG(`<style>${cssContent}</style>`))

diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js
@@ -40,6 +40,7 @@ export const defaultOpt = {
   enableFreeDrag: false,
   // 水印配置
   watermarkConfig: {
+    onlyExport: false,// 是否仅在导出时添加水印
     text: '',
     lineSpacing: 100,
     textSpacing: 100,

diff --git a/simple-mind-map/src/plugins/Watermark.js b/simple-mind-map/src/plugins/Watermark.js
@@ -12,6 +12,7 @@ class Watermark {
     this.text = '' // 水印文字
     this.textStyle = {} // 水印文字样式
     this.watermarkDraw = null // 容器
+    this.isInExport = false // 是否是在导出过程中
     this.maxLong = this.getMaxLong()
     this.updateWatermark(this.mindMap.opt.watermarkConfig || {})
     this.bindEvent()
@@ -72,11 +73,18 @@ class Watermark {
     this.textStyle = Object.assign(this.textStyle, textStyle || {})
   }
 
+  // 清除水印
+  clear() {
+    if (this.watermarkDraw) this.watermarkDraw.clear()
+  }
+
   // 绘制水印
   // 非精确绘制，会绘制一些超出可视区域的水印
   draw() {
-    // 清空之前的水印
-    if (this.watermarkDraw) this.watermarkDraw.clear()
+    this.clear()
+    // 如果是仅导出需要水印，那么非导出中不渲染
+    const { onlyExport } = this.mindMap.opt.watermarkConfig
+    if (onlyExport && !this.isInExport) return
     // 如果没有水印数据，那么水印容器也删除掉
     if (!this.hasWatermark()) {
       this.removeContainer()