feat: plugin-watermark 提供 destroyWatermark (#124)

* feat: 水印支持动态关闭和打开

* refactor: watermark代码规范

* feat: 水印关闭逻辑优化

* fix: watermark 导出 destroyWatermark

* refactor: 代码规范

* feat: 水印性能优化

* refactor: 代码规范

* refactor: 代码规范

* fix: 重新渲染水印

docs/reference/plugin/plugins/watermark.md

@@ -43,16 +43,18 @@ export default {
 ### createWatermark
 
 创建水印功能，通过 `@fesjs/fes` 导入 API：
+
 ```js
-import { createWatermark } from '@fesjs/fes'
+import { createWatermark, destroyWatermark } from '@fesjs/fes';
 
-createWatermark({ content: '我是水印' });
+createWatermark({ content: '我是水印' }); // 生成水印
+destroyWatermark(); // 销毁水印
 ```
 
-
 默认参数是：
 ```js
 {
+    content = '请勿外传',
     container = document.body,
     width = 300,
     height = 300,
@@ -61,7 +63,6 @@ createWatermark({ content: '我是水印' });
     fontSize = '14px',
     fontFamily = 'Microsoft Yahei',
     fillStyle = 'rgba(184, 184, 184, 0.3)',
-    content = '请勿外传',
     rotate = 25,
     zIndex = 99999,
     timestamp = 'YYYY-MM-DD HH:mm'

packages/fes-plugin-watermark/src/index.js

@@ -38,7 +38,7 @@ export default (api) => {
 
     api.addPluginExports(() => [
         {
-            specifiers: ['createWatermark'],
+            specifiers: ['createWatermark', 'destroyWatermark'],
             source: absoluteFilePath
         }
     ]);

packages/fes-plugin-watermark/src/runtime/core.js

@@ -30,26 +30,27 @@ function timeFormat(date, format = 'YYYY-MM-DD') {
     return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, str => String(map[str]));
 }
 
-// canvas 实现 watermark
+const defaultOption = {
-export function createWatermark({
+    content: '请勿外传',
-    container = document.body,
+    container: document.body,
-    width = 300,
+    width: 300,
-    height = 300,
+    height: 300,
-    textAlign = 'center',
+    textAlign: 'center',
-    textBaseline = 'middle',
+    textBaseline: 'middle',
-    fontSize = '14px',
+    fontSize: '14px',
-    fontFamily = 'Microsoft Yahei',
+    fontFamily: 'Microsoft Yahei',
-    fillStyle = 'rgba(184, 184, 184, 0.3)',
+    fillStyle: 'rgba(184, 184, 184, 0.3)',
-    content = '请勿外传',
+    rotate: 25,
-    rotate = 25,
+    zIndex: 99999,
-    zIndex = 99999,
+    timestamp: 'YYYY-MM-DD HH:mm'
-    timestamp = 'YYYY-MM-DD HH:mm'
+};
-} = {}) {
+
-    // eslint-disable-next-line no-undef
+let _wmMo = null; // MutationObserver
-    if (WATERMARK_DISABLED) {
+let _wmTimer = null; // timestamp
-        return;
+
-    }
+function _createWatermark(param) {
-    const param = {
+    const {
+        content,
         container,
         width,
         height,
@@ -58,11 +59,11 @@ export function createWatermark({
         fontSize,
         fontFamily,
         fillStyle,
-        content,
         rotate,
         zIndex,
         timestamp
-    };
+    } = param;
+
     const canvas = document.createElement('canvas');
     canvas.setAttribute('width', `${width}px`);
     canvas.setAttribute('height', `${height}px`);
@@ -108,17 +109,17 @@ export function createWatermark({
 
     const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
     if (MutationObserver) {
-        let mo = new MutationObserver(() => {
+        _wmMo = new MutationObserver(() => {
             __wm = document.querySelector('.__wm');
             if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
                 // 避免一直触发
-                mo.disconnect();
+                _wmMo.disconnect();
-                mo = null;
+                _wmMo = null;
-                createWatermark(param);
+                _createWatermark(param);
             }
         });
 
-        mo.observe(container, {
+        _wmMo.observe(container, {
             attributes: true,
             subtree: true,
             childList: true
@@ -135,9 +136,38 @@ export function createWatermark({
             timeout = 1000 * 60 * 60;
         }
 
-        setTimeout(() => {
+        _wmTimer = window.setTimeout(() => {
-            // 触发MutationObserver
+            // 触发 MutationObserver
             watermarkDiv.style.bottom = '0';
         }, timeout);
     }
 }
+
+// 销毁水印
+export function destroyWatermark() {
+    // 监听器关闭
+    _wmMo && _wmMo.disconnect();
+    _wmMo = null;
+    _wmTimer && window.clearTimeout(_wmTimer);
+    _wmTimer = null;
+
+    // 删除水印元素
+    const __wm = document.querySelector('.__wm');
+    __wm && __wm.parentNode.removeChild(__wm);
+}
+
+// canvas 实现 watermark
+export function createWatermark(option) {
+    // eslint-disable-next-line no-undef
+    if (WATERMARK_DISABLED) {
+        return;
+    }
+
+    // 为避免多次调用 createWatermark 触发重复监听，这里先执行销毁水印操作
+    destroyWatermark();
+
+    _createWatermark({
+        ...defaultOption,
+        ...option
+    });
+}