From b0ff6ee7e152260cec840a79b2d37a5b5601eedc Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Wed, 15 Mar 2023 17:55:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B0=B4=E5=8D=B0=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E5=85=BC=E5=AE=B9=E5=BE=AE=E5=89=8D=E7=AB=AF=E5=9C=BA=E6=99=AF?=
 =?UTF-8?q?,=E5=BA=94=E7=94=A8=E5=94=AF=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../examples/webpack-main/package.json        |  1 +
 .../examples/webpack-main/src/app.jsx         |  3 +-
 .../examples/webpack-micro/package.json       |  1 +
 .../webpack-micro/src/pages/webpack/index.vue |  6 ++
 .../fes-plugin-watermark/src/runtime/core.js  | 76 ++++++++++---------
 packages/fes-plugin-watermark/types.d.ts      | 31 +++++---
 6 files changed, 69 insertions(+), 49 deletions(-)

diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/package.json b/packages/fes-plugin-qiankun/examples/webpack-main/package.json
index 8363454d..f42ca66c 100644
--- a/packages/fes-plugin-qiankun/examples/webpack-main/package.json
+++ b/packages/fes-plugin-qiankun/examples/webpack-main/package.json
@@ -46,6 +46,7 @@
         "@fesjs/fes": "^3.0.0-rc.0",
         "@fesjs/builder-webpack": "^3.0.0-rc.5",
         "@fesjs/plugin-qiankun": "3.0.0-rc.0",
+        "@fesjs/plugin-watermark": "3.0.0-rc.0",
         "vue": "^3.2.37",
         "@fesjs/fes-design": "^0.7.0"
     },
diff --git a/packages/fes-plugin-qiankun/examples/webpack-main/src/app.jsx b/packages/fes-plugin-qiankun/examples/webpack-main/src/app.jsx
index a942f014..4842ee66 100644
--- a/packages/fes-plugin-qiankun/examples/webpack-main/src/app.jsx
+++ b/packages/fes-plugin-qiankun/examples/webpack-main/src/app.jsx
@@ -1,4 +1,4 @@
-import { access as accessApi } from '@fesjs/fes';
+import { access as accessApi, createWatermark } from '@fesjs/fes';
 import PageLoading from '@/components/PageLoading.vue';
 
 export const beforeRender = {
@@ -10,6 +10,7 @@ export const beforeRender = {
                 setRole('admin');
                 resolve();
             }, 1000);
+            createWatermark();
         });
     },
 };
diff --git a/packages/fes-plugin-qiankun/examples/webpack-micro/package.json b/packages/fes-plugin-qiankun/examples/webpack-micro/package.json
index bb8410d7..670f2693 100644
--- a/packages/fes-plugin-qiankun/examples/webpack-micro/package.json
+++ b/packages/fes-plugin-qiankun/examples/webpack-micro/package.json
@@ -46,6 +46,7 @@
         "@fesjs/fes": "^3.0.0-rc.0",
         "@fesjs/builder-webpack": "^3.0.0-rc.5",
         "@fesjs/plugin-qiankun": "3.0.0-rc.0",
+        "@fesjs/plugin-watermark": "3.0.0-rc.0",
         "vue": "^3.2.37",
         "@fesjs/fes-design": "^0.7.0"
     },
diff --git a/packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/index.vue b/packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/index.vue
index bce5f24a..d8924319 100644
--- a/packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/index.vue
+++ b/packages/fes-plugin-qiankun/examples/webpack-micro/src/pages/webpack/index.vue
@@ -8,8 +8,14 @@
 }
 </config>
 <script>
+import { onBeforeUnmount } from 'vue';
+import { createWatermark, destroyWatermark } from '@fesjs/fes';
+
 export default {
     setup() {
+        createWatermark();
+
+        onBeforeUnmount(destroyWatermark);
         return {
             bigData: new Array(5 * 1024 * 1024),
         };
diff --git a/packages/fes-plugin-watermark/src/runtime/core.js b/packages/fes-plugin-watermark/src/runtime/core.js
index 9cb7015b..4b93db94 100644
--- a/packages/fes-plugin-watermark/src/runtime/core.js
+++ b/packages/fes-plugin-watermark/src/runtime/core.js
@@ -30,31 +30,37 @@ function timeFormat(date, format = 'YYYY-MM-DD') {
     return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, (str) => String(map[str]));
 }
 
-let _wmContainerMo = null; // MutationObserver
-let _wmMo = null; // MutationObserver
-let _wmTimer = null; // timestamp
+let wmContainerObx = null; // MutationObserver
+let wmObx = null; // MutationObserver
+let wmTimer = null; // timestamp
+let watermarkDiv = null;
 
 // 销毁水印
 export function destroyWatermark() {
     // 监听器关闭
-    _wmMo?.disconnect();
-    _wmMo = null;
-    _wmContainerMo?.disconnect();
-    _wmContainerMo = null;
+    wmObx?.disconnect();
+    wmObx = null;
+    wmContainerObx?.disconnect();
+    wmContainerObx = null;
     // 清除timer
-    if (_wmTimer) {
-        window.clearTimeout(_wmTimer);
-        _wmTimer = null;
+    if (wmTimer) {
+        window.clearTimeout(wmTimer);
+        wmTimer = null;
     }
     // 删除水印元素
-    let __wm = document.querySelector('.__wm');
-    __wm?.parentNode?.removeChild(__wm);
-    __wm = null;
+    watermarkDiv?.parentNode?.removeChild(watermarkDiv);
+    watermarkDiv = null;
 }
 
-function _createWatermark(param) {
+function innerCreateWatermark(param) {
     const { content, container, width, height, textAlign, textBaseline, fontSize, fontFamily, fillStyle, rotate, zIndex, timestamp, watch } = param;
 
+    if (!container) {
+        return console.warn('createWatermark配置的container不能为空');
+    }
+
+    destroyWatermark();
+
     const canvas = document.createElement('canvas');
     canvas.setAttribute('width', `${width}px`);
     canvas.setAttribute('height', `${height}px`);
@@ -67,9 +73,13 @@ function _createWatermark(param) {
     ctx.translate(width / 2, height / 2);
     ctx.rotate(-(Math.PI / 180) * rotate);
     ctx.fillText(`${content}`, 0, 0);
-    timestamp && ctx.fillText(`${timeFormat(new Date(), timestamp)}`, 0, parseInt(fontSize) + 5);
+    if (timestamp) {
+        ctx.fillText(`${timeFormat(new Date(), timestamp)}`, 0, parseInt(fontSize) + 5);
+    }
 
-    const watermarkDiv = document.querySelector('.__wm') || document.createElement('div');
+    const CLASS_NAME = `wm_${Date.now()}`;
+
+    watermarkDiv = document.createElement('div');
     const styleStr = `
     position: ${container === document.body ? 'fixed' : 'absolute'};
     user-select: none;
@@ -81,9 +91,8 @@ function _createWatermark(param) {
     pointer-events: none !important;
     background-repeat: repeat;
     background-image: url('${canvas.toDataURL()}')`;
-
     watermarkDiv.setAttribute('style', styleStr);
-    watermarkDiv.classList.add('__wm');
+    watermarkDiv.classList.add(CLASS_NAME);
 
     if (container.firstChild) {
         container.insertBefore(watermarkDiv, container.firstChild);
@@ -91,26 +100,25 @@ function _createWatermark(param) {
         container.appendChild(watermarkDiv);
     }
 
-    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+    const MutationObserver = window.MutationObserver;
     if (watch && MutationObserver) {
-        _wmContainerMo = new MutationObserver(() => {
-            const __wm = container.querySelector('.__wm');
-            if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
-                destroyWatermark();
-                _createWatermark(param);
+        wmContainerObx = new MutationObserver(() => {
+            if (!container.querySelector(`.${CLASS_NAME}`)) {
+                innerCreateWatermark(param);
             }
         });
 
-        _wmContainerMo.observe(container, {
+        wmContainerObx.observe(container, {
             childList: true,
         });
 
-        _wmMo = new MutationObserver(() => {
-            destroyWatermark();
-            _createWatermark(param);
+        wmObx = new MutationObserver(() => {
+            if (watermarkDiv.getAttribute('style') !== styleStr) {
+                innerCreateWatermark(param);
+            }
         });
 
-        _wmMo.observe(watermarkDiv, {
+        wmObx.observe(watermarkDiv, {
             attributes: true,
         });
     }
@@ -125,9 +133,8 @@ function _createWatermark(param) {
             timeout = 1000 * 60 * 60;
         }
 
-        _wmTimer = window.setTimeout(() => {
-            destroyWatermark();
-            _createWatermark(param);
+        wmTimer = window.setTimeout(() => {
+            innerCreateWatermark(param);
         }, timeout);
     }
 }
@@ -155,10 +162,7 @@ export function createWatermark(option) {
         watch: true,
     };
 
-    // 为避免多次调用 createWatermark 触发重复监听，这里先执行销毁水印操作
-    destroyWatermark();
-
-    _createWatermark({
+    innerCreateWatermark({
         ...defaultOption,
         ...option,
     });
diff --git a/packages/fes-plugin-watermark/types.d.ts b/packages/fes-plugin-watermark/types.d.ts
index e5b81af0..c5617cea 100644
--- a/packages/fes-plugin-watermark/types.d.ts
+++ b/packages/fes-plugin-watermark/types.d.ts
@@ -1,18 +1,25 @@
 import '@fesjs/fes';
 
 interface WatermarkParam {
-    content: string;
-    container: HTMLElement;
-    width: number;
-    height: number;
-    textAlign: 'left' | 'right' | 'center' | 'start' | 'end';
-    textBaseline: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
-    fontSize: string;
-    fontFamily: string;
-    fillStyle: string;
-    rotate: number;
-    zIndex: number;
-    timestamp: string;
+    content?: string;
+    container?: HTMLElement;
+    width?: number;
+    height?: number;
+    textAlign?: 'center' | 'end' | 'left' | 'right' | 'start';
+    textBaseline?:
+        | 'alphabetic'
+        | 'bottom'
+        | 'hanging'
+        | 'ideographic'
+        | 'middle'
+        | 'top';
+    fontSize?: string;
+    fontFamily?: string;
+    fillStyle?: string;
+    rotate?: number;
+    zIndex?: number;
+    timestamp?: string | false;
+    watch?: boolean;
 }
 export function createWatermark(param: WatermarkParam): void;
 export function destroyWatermark(): void;