zmdms-webui 0.0.181 → 1.0.0

package/dist/es/print/print.js

@@ -27,7 +27,7 @@ var Print = function (props, ref) {
         "ztxk-print--water": headerProps.isWaterBtn,
     });
     var _d = useState(false), spinning = _d[0], setSpinning = _d[1];
-    return (jsx(Spin, __assign({ spinning: spinning || outSpinning }, { children: jsxs("div", __assign({ className: classes }, { children: [jsx(PrintHeader, __assign({ setSpinning: setSpinning, waterVisible: waterVisible, setWaterVisible: setWaterVisible }, headerProps)), jsx(WatermarkCom, __assign({ className: "ztxk-print--content", visible: waterVisible, isMutationObserver: false, isAppendBody: true }, waterConfig, { children: jsx("div", __assign({ className: "ztxk-print--main" }, { children: children })) }))] })) })));
+    return (jsx(Spin, __assign({ spinning: spinning || outSpinning }, { children: jsxs("div", __assign({ className: classes }, { children: [jsx(PrintHeader, __assign({ setSpinning: setSpinning, waterVisible: waterVisible, setWaterVisible: setWaterVisible }, headerProps)), jsx(WatermarkCom, __assign({ className: "ztxk-print--content", visible: waterVisible, isShadow: true }, waterConfig, { children: jsx("div", __assign({ className: "ztxk-print--main" }, { children: children })) }))] })) })));
 };
 var PrintCom = memo(forwardRef(Print));
 PrintCom.displayName = "ZTXK_WEBUI_Print";

package/dist/es/watermark/index.css

@@ -1 +1 @@
-.ztxk-watermark.ztxk-watermark--hidden>.ztxk-watermark--div{display:none}#watermark-shadow-id-zmdms{display:block!important;pointer-events:none!important}
+.ztxk-watermark.ztxk-watermark--hidden>.ztxk-watermark--div{display:none}

package/dist/es/watermark/utils.js

@@ -1,27 +1,35 @@
 import { __assign } from '../_virtual/_tslib.js';
 
-var WRAP_DIV_ID = "watermark-shadow-id-zmdms";
-function createWatermark(watermarkText, options) {
-    var preDiv = document.getElementById(WRAP_DIV_ID);
-    if (preDiv) {
-        preDiv.remove();
-    }
-    // 创建一个新的 div 作为水印容器
-    var watermarkDiv = document.createElement("div");
-    watermarkDiv.id = WRAP_DIV_ID;
-    // 使用 shadow DOM
-    var shadowRoot = watermarkDiv.attachShadow({ mode: "open" });
-    var width = options.width, height = options.height;
+function createWatermark(watermarkText, options, container) {
+    var width = options.width, height = options.height, rotate = options.rotate;
+    var watermarkWidth = width * 2;
+    var watermarkHeight = height * 2;
+    // 计算旋转后水印的占用空间
+    var radians = (Math.abs(rotate) * Math.PI) / 180;
+    var sin = Math.sin(radians);
+    var cos = Math.cos(radians);
+    var rotatedWidth = cos * watermarkWidth + sin * watermarkHeight;
+    var rotatedHeight = sin * watermarkWidth + cos * watermarkHeight;
+    // 计算容器可以容纳多少行和列的水印
+    var containerWidth = Math.max(container.offsetWidth || 1200, document.body.clientWidth);
+    var containerHeight = Math.max(container.offsetHeight || 1200, document.body.clientHeight);
+    var cols = Math.ceil(containerWidth / rotatedWidth);
+    var rows = Math.ceil(containerHeight / rotatedHeight);
     // 创建一个水印元素
     var fragment = document.createDocumentFragment();
-    for (var i = 0; i < 3; i++) {
-        var watermark = createWatermarkItem(watermarkText, __assign(__assign({}, options), { top: 50 + height * i, left: 50 + width * i }));
-        fragment.appendChild(watermark);
+    // 循环创建和定位水印元素
+    for (var row = 0; row < rows; row++) {
+        for (var col = 0; col < cols; col++) {
+            // 克隆水印元素
+            var watermark = createWatermarkItem(watermarkText, __assign({}, options));
+            // 设置绝对定位
+            watermark.style.left = "".concat(col * rotatedWidth, "px");
+            watermark.style.top = "".concat(row * rotatedHeight, "px");
+            // 将克隆的水印添加到容器中
+            fragment.appendChild(watermark);
+        }
     }
-    // 将水印添加到 shadow DOM
-    shadowRoot.appendChild(fragment);
-    // 将水印容器添加到文档的 body 中
-    document.body.appendChild(watermarkDiv);
+    return fragment;
 }
 function createWatermarkItem(watermarkText, options) {
     // 创建一个水印元素
@@ -37,8 +45,8 @@ function createWatermarkItem(watermarkText, options) {
     watermark.style.position = "absolute";
     watermark.style.top = "".concat(top || 50, "px");
     watermark.style.left = "".concat(left || 50, "px");
-    watermark.style.width = "".concat(width || 200, "px");
-    watermark.style.height = "".concat(height || 200, "px");
+    watermark.style.width = "".concat((width || 200) * 2, "px");
+    watermark.style.height = "".concat((height || 200) * 2, "px");
     watermark.style.color = (font === null || font === void 0 ? void 0 : font.color) || "rgba(0, 0, 0, 0.2)";
     watermark.style.fontFamily = (font === null || font === void 0 ? void 0 : font.fontFamily) || "微软雅黑";
     watermark.style.fontSize = "".concat((font === null || font === void 0 ? void 0 : font.fontSize) || 14, "px");

package/dist/es/watermark/watermark-shadow.js

@@ -0,0 +1,116 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
+import { createWatermark } from './utils.js';
+import { useMemoizedFn, useMount } from 'ahooks';
+
+var WatermarkShadow = function (props, ref) {
+    var zIndex = props.zIndex, isMutationObserver = props.isMutationObserver, content = props.content, font = props.font, rotate = props.rotate, width = props.width, height = props.height, containerDomRef = props.containerDomRef;
+    var waterDomRef = useRef(null);
+    var shadowRootRef = useRef();
+    var createWaterMemo = useMemoizedFn(function () {
+        if (!content) {
+            return;
+        }
+        var watermarkFragment = createWatermark(content, {
+            font: font,
+            rotate: rotate,
+            width: width,
+            height: height,
+        }, containerDomRef === null || containerDomRef === void 0 ? void 0 : containerDomRef.current);
+        if (shadowRootRef.current) {
+            while (shadowRootRef.current.firstChild) {
+                shadowRootRef.current.removeChild(shadowRootRef.current.firstChild);
+            }
+            shadowRootRef.current.appendChild(watermarkFragment);
+        }
+    });
+    // 初始化一个监听器
+    var observerMemo = useMemo(function () {
+        // 配置观察器的选项
+        var config = { childList: true, attributes: true, subtree: true };
+        // 创建一个回调函数来处理观察到的变化
+        var callback = function (mutationsList) {
+            var _a, _b;
+            console.log("触发子级", mutationsList);
+            // 先解除监听
+            (_a = observer === null || observer === void 0 ? void 0 : observer.disconnect) === null || _a === void 0 ? void 0 : _a.call(observer);
+            createWaterMemo();
+            // 等元素挂载后再开始监听
+            (_b = observer === null || observer === void 0 ? void 0 : observer.observe) === null || _b === void 0 ? void 0 : _b.call(observer, shadowRootRef.current, config);
+        };
+        // 创建一个 MutationObserver 实例并传入回调函数
+        var observer = new MutationObserver(callback);
+        return {
+            observer: observer,
+            config: config,
+        };
+    }, [createWaterMemo]);
+    // 初始化创建shadow节点
+    useMount(function () {
+        if (waterDomRef.current) {
+            var shadowRoot = waterDomRef.current.attachShadow({
+                mode: "open",
+            });
+            shadowRootRef.current = shadowRoot;
+        }
+    });
+    useEffect(function () {
+        var _a, _b;
+        if (!content) {
+            return;
+        }
+        var watermarkFragment = createWatermark(content, {
+            font: font,
+            rotate: rotate,
+            width: width,
+            height: height,
+        }, containerDomRef === null || containerDomRef === void 0 ? void 0 : containerDomRef.current);
+        if (shadowRootRef.current) {
+            while (shadowRootRef.current.firstChild) {
+                shadowRootRef.current.removeChild(shadowRootRef.current.firstChild);
+            }
+            shadowRootRef.current.appendChild(watermarkFragment);
+            // 是否监听？
+            if (isMutationObserver) {
+                (_b = (_a = observerMemo.observer) === null || _a === void 0 ? void 0 : _a.observe) === null || _b === void 0 ? void 0 : _b.call(_a, shadowRootRef.current, observerMemo.config);
+            }
+        }
+        return function () {
+            var _a, _b;
+            (_b = (_a = observerMemo.observer) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+    }, [
+        content,
+        font,
+        height,
+        rotate,
+        width,
+        observerMemo,
+        isMutationObserver,
+        containerDomRef,
+    ]);
+    useImperativeHandle(ref, function () {
+        return {
+            getWaterDomRef: function () { return waterDomRef.current; },
+            toggleVisible: function () {
+                if (waterDomRef.current) {
+                    waterDomRef.current.style.visibility = "hidden";
+                }
+            },
+        };
+    });
+    return (jsx("div", { ref: waterDomRef, className: "ztxk-watermark--div", style: {
+            zIndex: zIndex,
+            position: "absolute",
+            visibility: "visible",
+            overflow: "hidden",
+            left: 0,
+            top: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+        } }));
+};
+var WatermarkShadow$1 = memo(forwardRef(WatermarkShadow));
+
+export { WatermarkShadow$1 as default };

package/dist/es/watermark/watermark.js

@@ -1,11 +1,11 @@
 import { __rest, __assign } from '../_virtual/_tslib.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, useRef, useMemo, useEffect } from 'react';
 import classNames from '../node_modules/classnames/index.js';
 import WatermarkDiv from './watermark-div.js';
+import WatermarkShadow from './watermark-shadow.js';
 import { mergeWaterConfig, createWater } from 'zmdms-utils';
 import { useMutationObserver } from 'ahooks';
-import { createWatermark } from './utils.js';
 
 var reRendering = function (mutation, isWatermarkEle) {
     var flag = false;
@@ -52,15 +52,17 @@ var Watermark = function (props) {
         };
     }, [content, font, height, image, rotate, width, lineSpacing]);
     useMutationObserver(function (mutationsList) {
-        if (!isMutationObserver || isAppendBody || isShadow) {
+        if (!isMutationObserver || isAppendBody) {
             return;
         }
         console.log("触发父级", mutationsList);
         mutationsList.forEach(function (mutation) {
+            var _a, _b;
             if (reRendering(mutation, function (node) {
-                return node === waterDomChildHandleRef.current.getWaterDomRef();
+                var _a, _b;
+                return node === ((_b = (_a = waterDomChildHandleRef.current) === null || _a === void 0 ? void 0 : _a.getWaterDomRef) === null || _b === void 0 ? void 0 : _b.call(_a));
             })) {
-                waterDomRef.current.appendChild(waterDomChildHandleRef.current.getWaterDomRef());
+                waterDomRef.current.appendChild((_b = (_a = waterDomChildHandleRef.current) === null || _a === void 0 ? void 0 : _a.getWaterDomRef) === null || _b === void 0 ? void 0 : _b.call(_a));
             }
         });
     }, waterDomRef, {
@@ -77,14 +79,8 @@ var Watermark = function (props) {
             document.body.style.background = "";
         }
     }, [isAppendBody, visible, config.image]);
-    useEffect(function () {
-        if (!isShadow) {
-            return;
-        }
-        createWatermark(content, { font: font, rotate: rotate, width: width, height: height });
-    }, [content, font, height, isShadow, rotate, width]);
     if (isShadow) {
-        return (jsx("div", __assign({ className: classes, style: { position: "relative" }, ref: waterDomRef }, { children: children })));
+        return (jsxs("div", __assign({ className: classes, style: { position: "relative" }, ref: waterDomRef }, { children: [children, jsx(WatermarkShadow, { ref: waterDomChildHandleRef, isMutationObserver: isMutationObserver, content: content, font: font, rotate: rotate, width: width, height: height, containerDomRef: waterDomRef, zIndex: zIndex })] })));
     }
     return isAppendBody ? (jsx("div", __assign({ className: classes, style: { position: "relative" }, ref: waterDomRef }, { children: children }))) : (jsxs("div", __assign({ className: classes, style: { position: "relative" }, ref: waterDomRef }, { children: [children, jsx(WatermarkDiv, { ref: waterDomChildHandleRef, isMutationObserver: isMutationObserver, isAppendBody: isAppendBody, zIndex: zIndex, image: config.image })] })));
 };