@scx-js/scx-dom 0.0.1 → 0.0.2

package/Download.js

@@ -1,67 +1,67 @@
-import {isNull, isString, notBlank, notNull} from "@scx-js/scx-common";
-
-function getFileNameFromContentDisposition(str) {
-    if (!str) {
-        return null;
-    }
-    const s = str.split(/;\s*/);
-    //优先使用 filename* 请查看 : https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition
-    let fileNameElement = s.filter(c => c.startsWith("filename*="))[0];
-    if (!fileNameElement) {
-        fileNameElement = s.filter(c => c.startsWith("filename="))[0];
-    }
-    if (!fileNameElement) {// 两者都没有
-        return null;
-    }
-    const fileNameWithCharset = fileNameElement.split("=")[1];
-    const fs = fileNameWithCharset.split("''");
-    //这里还可以获取到 charset 但是用不到 所以就管了
-    const encodedFileName = fs[fs.length - 1];
-    return notBlank(encodedFileName) ? decodeURIComponent(encodedFileName) : null;
-}
-
-/**
- * 根据 url 下载文件
- * @param url {string|Blob} 下载地址
- * @param fileName 下载文件的名称 为空取文件原始名
- */
-function download(url, fileName = null) {
-    const link = document.createElement("a");
-    link.rel = "noopener";
-    link.target = "_blank";
-
-    link.download = notNull(fileName) ? fileName : "";
-
-    if (isString(url) || url instanceof URL) { // 标准 URL
-        link.href = url;
-        if (link.origin !== location.origin) {
-            fetch(link.href, {method: "GET"}).then(r => {
-                if (r.ok) {
-                    if (isNull(fileName)) { //如果原有的下载名称为空 我们尝试使用 content-disposition 中的文件名
-                        const f = getFileNameFromContentDisposition(r.headers.get("content-disposition"));
-                        if (notNull(f)) {
-                            fileName = f;
-                        }
-                    }
-                    return r.blob();
-                } else {
-                    throw new Error(r.status + " : " + r.statusText);
-                }
-            }).then(b => download(b, fileName)).catch(e => {
-                console.error(e);
-                link.click();
-            });
-        } else {
-            link.click();
-        }
-    } else { // Blob 文件
-        link.href = URL.createObjectURL(url);
-        setTimeout(() => URL.revokeObjectURL(link.href), 4E4); // 40s
-        setTimeout(() => link.click(), 0);
-    }
-}
-
-export {
-    download,
-    getFileNameFromContentDisposition,
-};
+import {isNull, isString, notBlank, notNull} from "@scx-js/scx-common";
+
+function getFileNameFromContentDisposition(str) {
+    if (!str) {
+        return null;
+    }
+    const s = str.split(/;\s*/);
+    //优先使用 filename* 请查看 : https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition
+    let fileNameElement = s.filter(c => c.startsWith("filename*="))[0];
+    if (!fileNameElement) {
+        fileNameElement = s.filter(c => c.startsWith("filename="))[0];
+    }
+    if (!fileNameElement) {// 两者都没有
+        return null;
+    }
+    const fileNameWithCharset = fileNameElement.split("=")[1];
+    const fs = fileNameWithCharset.split("''");
+    //这里还可以获取到 charset 但是用不到 所以就管了
+    const encodedFileName = fs[fs.length - 1];
+    return notBlank(encodedFileName) ? decodeURIComponent(encodedFileName) : null;
+}
+
+/**
+ * 根据 url 下载文件
+ * @param url {string|Blob} 下载地址
+ * @param fileName 下载文件的名称 为空取文件原始名
+ */
+function download(url, fileName = null) {
+    const link = document.createElement("a");
+    link.rel = "noopener";
+    link.target = "_blank";
+
+    link.download = notNull(fileName) ? fileName : "";
+
+    if (isString(url) || url instanceof URL) { // 标准 URL
+        link.href = url;
+        if (link.origin !== location.origin) {
+            fetch(link.href, {method: "GET"}).then(r => {
+                if (r.ok) {
+                    if (isNull(fileName)) { //如果原有的下载名称为空 我们尝试使用 content-disposition 中的文件名
+                        const f = getFileNameFromContentDisposition(r.headers.get("content-disposition"));
+                        if (notNull(f)) {
+                            fileName = f;
+                        }
+                    }
+                    return r.blob();
+                } else {
+                    throw new Error(r.status + " : " + r.statusText);
+                }
+            }).then(b => download(b, fileName)).catch(e => {
+                console.error(e);
+                link.click();
+            });
+        } else {
+            link.click();
+        }
+    } else { // Blob 文件
+        link.href = URL.createObjectURL(url);
+        setTimeout(() => URL.revokeObjectURL(link.href), 4E4); // 40s
+        setTimeout(() => link.click(), 0);
+    }
+}
+
+export {
+    download,
+    getFileNameFromContentDisposition,
+};

package/FixedElement.js

@@ -1,26 +1,26 @@
-/**
- * 将元素移除文档流并固定在原位置 一般用在 before-leave 上 使用方法如下
- *     <transition-group name="xxx" @before-leave="fixedElement">
- *       <div v-for="(item,i) in list" :key="item">
- *          {{item}}
- *       </div>
- *     </transition-group>
- * @param el
- */
-function fixedElement(el) {
-    const {
-        marginLeft,
-        marginTop,
-        width,
-        height,
-    } = window.getComputedStyle(el);
-    el.style.left = `${el.offsetLeft - parseFloat(marginLeft)}px`;
-    el.style.top = `${el.offsetTop - parseFloat(marginTop)}px`;
-    el.style.width = width;
-    el.style.height = height;
-    el.style.position = "absolute";
-}
-
-export {
-    fixedElement,
-};
+/**
+ * 将元素移除文档流并固定在原位置 一般用在 before-leave 上 使用方法如下
+ *     <transition-group name="xxx" @before-leave="fixedElement">
+ *       <div v-for="(item,i) in list" :key="item">
+ *          {{item}}
+ *       </div>
+ *     </transition-group>
+ * @param el
+ */
+function fixedElement(el) {
+    const {
+        marginLeft,
+        marginTop,
+        width,
+        height,
+    } = window.getComputedStyle(el);
+    el.style.left = `${el.offsetLeft - parseFloat(marginLeft)}px`;
+    el.style.top = `${el.offsetTop - parseFloat(marginTop)}px`;
+    el.style.width = width;
+    el.style.height = height;
+    el.style.position = "absolute";
+}
+
+export {
+    fixedElement,
+};

package/HtmlToText.js

@@ -1,7 +1,7 @@
-function htmlToText(html) {
-    const tempDiv = document.createElement("div");
-    tempDiv.innerHTML = html;
-    return tempDiv.innerText;
-}
-
-export {htmlToText};
+function htmlToText(html) {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = html;
+    return tempDiv.innerText;
+}
+
+export {htmlToText};

package/ScxDrag.js

@@ -1,255 +1,255 @@
-import {isFunction, isObject, rafThrottle} from "@scx-js/scx-common";
-
-/**
- * 获取视图的上下界限
- * @return {{top: number, left: number, bottom: number, right: number}}
- */
-function getViewBounds() {
-    //当前视图的宽高
-    const clientWidth = document.documentElement.clientWidth;
-    const clientHeight = document.documentElement.clientHeight;
-
-    //计算上下界限
-    return {
-        left: 0,
-        top: 0,
-        right: clientWidth,
-        bottom: clientHeight,
-    };
-}
-
-class ScxDrag {
-
-    /**
-     * 目标元素
-     */
-    targetElement;
-
-    /**
-     * 可拖拽区域元素
-     */
-    dragElement;
-
-    //存取鼠标按下时的初始状态 (包含元素的初始矩阵,鼠标位置,上下界限等)
-    startX;
-    startY;
-    startMatrix;
-
-    //判断为点击事件的距离
-    v = 10;
-
-    //当前状态
-    isMoving = false;
-
-    //用户自定义的 上下界
-    bounds;
-
-    //用户自定义的 回调
-    onClick;
-    onDragStart;
-    onDrag;
-    onDragEnd;
-
-    //上下界限 用于加速计算
-    minLeft;
-    minTop;
-    maxLeft;
-    maxTop;
-
-    //当前触摸点 
-    nowTouch;
-
-    /**
-     *
-     * @param targetElement
-     * @param dragElement
-     * @param callback
-     * @param bounds {Function||{top,left,bottom,right}}
-     */
-    constructor(targetElement, {
-        dragElement = targetElement, //默认使用 targetElement
-        onClick = (el) => {
-        },
-        onDragStart = (el) => {
-        },
-        onDrag = (el) => {
-        },
-        onDragEnd = (el) => {
-        },
-        bounds,// 自定义的界限
-    } = {}) {
-        this.targetElement = targetElement;
-        this.dragElement = dragElement;
-        this.onClick = onClick;
-        this.onDragStart = onDragStart;
-        this.onDrag = onDrag;
-        this.onDragEnd = onDragEnd;
-        this.bounds = bounds;
-        //节流
-        this.update = rafThrottle(this.update);
-        //强制绑定 this 指向 防止 addEventListener 改变 this 指向
-        this.onMousedown = this.onMousedown.bind(this);
-        this.onMousemove = this.onMousemove.bind(this);
-        this.onMouseup = this.onMouseup.bind(this);
-        this.onTouchstart = this.onTouchstart.bind(this);
-        this.onTouchmove = this.onTouchmove.bind(this);
-        this.onTouchend = this.onTouchend.bind(this);
-    }
-
-    //获取上下界 默认采用 浏览器视图
-    getBounds() {
-        if (isFunction(this.bounds)) {
-            return this.bounds(getViewBounds());
-        } else if (isObject(this.bounds)) {
-            return this.bounds;
-        } else {
-            return getViewBounds();
-        }
-    }
-
-    //判断坐标与start 的差值是否小于指定值
-    isMove(x, y) {
-        return Math.abs(this.startX - x) > this.v || Math.abs(this.startY - y) > this.v;
-    }
-
-    //当多指移动时 我们只需要获取当前的移动事件
-    filterTouchEvent(event) {
-        let touch;
-        for (let changedTouch of event.changedTouches) {
-            if (changedTouch.identifier === this.nowTouch.identifier) {
-                touch = changedTouch;
-            }
-        }
-        return touch;
-    }
-
-    onMousedown(event) {
-        //我们只响应左键
-        if (event.button !== 0) {
-            return;
-        }
-        //获取鼠标初始点击位置
-        this.onStart(event.clientX, event.clientY);
-
-        document.addEventListener("mousemove", this.onMousemove);
-        document.addEventListener("mouseup", this.onMouseup);
-    }
-
-    onTouchstart(event) {
-        //停止事件传播
-        event.stopPropagation();
-        event.preventDefault();
-        //设置最后一个 触摸点
-        this.nowTouch = event.changedTouches[event.changedTouches.length - 1];
-
-        this.onStart(this.nowTouch.clientX, this.nowTouch.clientY);
-
-        document.addEventListener("touchmove", this.onTouchmove);
-        document.addEventListener("touchend", this.onTouchend);
-    }
-
-    onMousemove(event) {
-        this.onMove(event.clientX, event.clientY);
-    }
-
-    onTouchmove(event) {
-        let touch = this.filterTouchEvent(event);
-        if (touch) {
-            this.onMove(touch.clientX, touch.clientY);
-        }
-    }
-
-    onMouseup(e) {
-        this.onEnd(e);
-        document.removeEventListener("mousemove", this.onMousemove);
-        document.removeEventListener("mouseup", this.onMouseup);
-    }
-
-    onTouchend(e) {
-        let touch = this.filterTouchEvent(e);
-        if (touch) {
-            this.onEnd(e);
-            document.removeEventListener("touchmove", this.onTouchmove);
-            document.removeEventListener("touchend", this.onTouchend);
-        }
-    }
-
-    onStart(x, y) {
-        this.startX = x;
-        this.startY = y;
-
-        //获取元素当前的矩阵状态
-        this.startMatrix = new DOMMatrix(window.getComputedStyle(this.targetElement).transform);
-
-        //获取元素当前的位置
-        const {
-            left,
-            top,
-            bottom,
-            right,
-        } = this.targetElement.getBoundingClientRect();
-
-        //计算上下界限
-        const bounds = this.getBounds();
-
-        //计算上下界限
-        this.minLeft = bounds.left - left;
-        this.minTop = bounds.top - top;
-        this.maxLeft = bounds.right - right;
-        this.maxTop = bounds.bottom - bottom;
-    }
-
-    onMove(x, y) {
-        if (this.isMoving || this.isMove(x, y)) {
-            this.update(x, y);
-            if (!this.isMoving) {
-                this.isMoving = true;
-                this.onDragStart(this.targetElement);
-            }
-            this.onDrag(this.targetElement);
-        }
-    }
-
-    onEnd(e) {
-        //需等待 update 完成后 
-        this.update.cancel();
-        if (this.isMoving) {
-            this.onDragEnd(this.targetElement, this.startMatrix, e);
-        } else {
-            this.onClick(this.targetElement);
-        }
-        this.isMoving = false;
-    }
-
-    update(X, Y) {
-        let moveX = Math.min(Math.max(X - this.startX, this.minLeft), this.maxLeft);
-        let moveY = Math.min(Math.max(Y - this.startY, this.minTop), this.maxTop);
-        //todo 这里若元素有放大旋转等操作会导致错误的移动
-        //这里距离需要进行重新计算
-        moveX = moveX / this.startMatrix.a;
-        moveY = moveY / this.startMatrix.d;
-        //旋转等操作待处理
-
-        const newMatrix = this.startMatrix.translate(moveX, moveY);
-
-        this.targetElement.style.transform = newMatrix.toString();
-    }
-
-    enable() {
-        this.dragElement.addEventListener("mousedown", this.onMousedown);
-        this.dragElement.addEventListener("touchstart", this.onTouchstart);
-        return this;
-    }
-
-    disable() {
-        this.dragElement.removeEventListener("mousedown", this.onMousedown);
-        this.dragElement.removeEventListener("touchstart", this.onTouchstart);
-        return this;
-    }
-
-}
-
-export {
-    ScxDrag,
-    getViewBounds,
-};
+import {isFunction, isObject, rafThrottle} from "@scx-js/scx-common";
+
+/**
+ * 获取视图的上下界限
+ * @return {{top: number, left: number, bottom: number, right: number}}
+ */
+function getViewBounds() {
+    //当前视图的宽高
+    const clientWidth = document.documentElement.clientWidth;
+    const clientHeight = document.documentElement.clientHeight;
+
+    //计算上下界限
+    return {
+        left: 0,
+        top: 0,
+        right: clientWidth,
+        bottom: clientHeight,
+    };
+}
+
+class ScxDrag {
+
+    /**
+     * 目标元素
+     */
+    targetElement;
+
+    /**
+     * 可拖拽区域元素
+     */
+    dragElement;
+
+    //存取鼠标按下时的初始状态 (包含元素的初始矩阵,鼠标位置,上下界限等)
+    startX;
+    startY;
+    startMatrix;
+
+    //判断为点击事件的距离
+    v = 10;
+
+    //当前状态
+    isMoving = false;
+
+    //用户自定义的 上下界
+    bounds;
+
+    //用户自定义的 回调
+    onClick;
+    onDragStart;
+    onDrag;
+    onDragEnd;
+
+    //上下界限 用于加速计算
+    minLeft;
+    minTop;
+    maxLeft;
+    maxTop;
+
+    //当前触摸点 
+    nowTouch;
+
+    /**
+     *
+     * @param targetElement
+     * @param dragElement
+     * @param callback
+     * @param bounds {Function||{top,left,bottom,right}}
+     */
+    constructor(targetElement, {
+        dragElement = targetElement, //默认使用 targetElement
+        onClick = (el) => {
+        },
+        onDragStart = (el) => {
+        },
+        onDrag = (el) => {
+        },
+        onDragEnd = (el) => {
+        },
+        bounds,// 自定义的界限
+    } = {}) {
+        this.targetElement = targetElement;
+        this.dragElement = dragElement;
+        this.onClick = onClick;
+        this.onDragStart = onDragStart;
+        this.onDrag = onDrag;
+        this.onDragEnd = onDragEnd;
+        this.bounds = bounds;
+        //节流
+        this.update = rafThrottle(this.update);
+        //强制绑定 this 指向 防止 addEventListener 改变 this 指向
+        this.onMousedown = this.onMousedown.bind(this);
+        this.onMousemove = this.onMousemove.bind(this);
+        this.onMouseup = this.onMouseup.bind(this);
+        this.onTouchstart = this.onTouchstart.bind(this);
+        this.onTouchmove = this.onTouchmove.bind(this);
+        this.onTouchend = this.onTouchend.bind(this);
+    }
+
+    //获取上下界 默认采用 浏览器视图
+    getBounds() {
+        if (isFunction(this.bounds)) {
+            return this.bounds(getViewBounds());
+        } else if (isObject(this.bounds)) {
+            return this.bounds;
+        } else {
+            return getViewBounds();
+        }
+    }
+
+    //判断坐标与start 的差值是否小于指定值
+    isMove(x, y) {
+        return Math.abs(this.startX - x) > this.v || Math.abs(this.startY - y) > this.v;
+    }
+
+    //当多指移动时 我们只需要获取当前的移动事件
+    filterTouchEvent(event) {
+        let touch;
+        for (let changedTouch of event.changedTouches) {
+            if (changedTouch.identifier === this.nowTouch.identifier) {
+                touch = changedTouch;
+            }
+        }
+        return touch;
+    }
+
+    onMousedown(event) {
+        //我们只响应左键
+        if (event.button !== 0) {
+            return;
+        }
+        //获取鼠标初始点击位置
+        this.onStart(event.clientX, event.clientY);
+
+        document.addEventListener("mousemove", this.onMousemove);
+        document.addEventListener("mouseup", this.onMouseup);
+    }
+
+    onTouchstart(event) {
+        //停止事件传播
+        event.stopPropagation();
+        event.preventDefault();
+        //设置最后一个 触摸点
+        this.nowTouch = event.changedTouches[event.changedTouches.length - 1];
+
+        this.onStart(this.nowTouch.clientX, this.nowTouch.clientY);
+
+        document.addEventListener("touchmove", this.onTouchmove);
+        document.addEventListener("touchend", this.onTouchend);
+    }
+
+    onMousemove(event) {
+        this.onMove(event.clientX, event.clientY);
+    }
+
+    onTouchmove(event) {
+        let touch = this.filterTouchEvent(event);
+        if (touch) {
+            this.onMove(touch.clientX, touch.clientY);
+        }
+    }
+
+    onMouseup(e) {
+        this.onEnd(e);
+        document.removeEventListener("mousemove", this.onMousemove);
+        document.removeEventListener("mouseup", this.onMouseup);
+    }
+
+    onTouchend(e) {
+        let touch = this.filterTouchEvent(e);
+        if (touch) {
+            this.onEnd(e);
+            document.removeEventListener("touchmove", this.onTouchmove);
+            document.removeEventListener("touchend", this.onTouchend);
+        }
+    }
+
+    onStart(x, y) {
+        this.startX = x;
+        this.startY = y;
+
+        //获取元素当前的矩阵状态
+        this.startMatrix = new DOMMatrix(window.getComputedStyle(this.targetElement).transform);
+
+        //获取元素当前的位置
+        const {
+            left,
+            top,
+            bottom,
+            right,
+        } = this.targetElement.getBoundingClientRect();
+
+        //计算上下界限
+        const bounds = this.getBounds();
+
+        //计算上下界限
+        this.minLeft = bounds.left - left;
+        this.minTop = bounds.top - top;
+        this.maxLeft = bounds.right - right;
+        this.maxTop = bounds.bottom - bottom;
+    }
+
+    onMove(x, y) {
+        if (this.isMoving || this.isMove(x, y)) {
+            this.update(x, y);
+            if (!this.isMoving) {
+                this.isMoving = true;
+                this.onDragStart(this.targetElement);
+            }
+            this.onDrag(this.targetElement);
+        }
+    }
+
+    onEnd(e) {
+        //需等待 update 完成后 
+        this.update.cancel();
+        if (this.isMoving) {
+            this.onDragEnd(this.targetElement, this.startMatrix, e);
+        } else {
+            this.onClick(this.targetElement);
+        }
+        this.isMoving = false;
+    }
+
+    update(X, Y) {
+        let moveX = Math.min(Math.max(X - this.startX, this.minLeft), this.maxLeft);
+        let moveY = Math.min(Math.max(Y - this.startY, this.minTop), this.maxTop);
+        //todo 这里若元素有放大旋转等操作会导致错误的移动
+        //这里距离需要进行重新计算
+        moveX = moveX / this.startMatrix.a;
+        moveY = moveY / this.startMatrix.d;
+        //旋转等操作待处理
+
+        const newMatrix = this.startMatrix.translate(moveX, moveY);
+
+        this.targetElement.style.transform = newMatrix.toString();
+    }
+
+    enable() {
+        this.dragElement.addEventListener("mousedown", this.onMousedown);
+        this.dragElement.addEventListener("touchstart", this.onTouchstart);
+        return this;
+    }
+
+    disable() {
+        this.dragElement.removeEventListener("mousedown", this.onMousedown);
+        this.dragElement.removeEventListener("touchstart", this.onTouchstart);
+        return this;
+    }
+
+}
+
+export {
+    ScxDrag,
+    getViewBounds,
+};

package/Watermark.js

@@ -1,105 +1,105 @@
-import {randomUUID} from "@scx-js/scx-common";
-
-class Watermark {
-    text;
-    timer = null;
-
-    constructor(text = "SCX") {
-        this.text = text;
-        this.watermarkTextBgDomID = randomUUID();
-        this.watermarkImage = getWatermarkImage(this.text);
-        this.watermarkTextBg = document.createElement("div");
-        this.watermarkTextBg.id = this.watermarkTextBgDomID;
-        this.setDivStyle(this.watermarkTextBg);
-
-        this.createDom = this.createDom.bind(this);
-    }
-
-
-    setDivStyle(d) {
-        d.style.pointerEvents = "none";
-        d.style.top = "0px";
-        d.style.left = "0px";
-        d.style.position = "fixed";
-        d.style.zIndex = "990000";
-        d.style.width = "100%";
-        d.style.height = "100%";
-        d.style.background = "url(" + this.watermarkImage + ") left top repeat";
-    }
-
-    /**
-     * 开启水印
-     */
-    openWatermark() {
-        this.createDom();
-        this.removeEvent();
-        this.createEvent();
-    }
-
-    /**
-     * 清除水印
-     */
-    clearWatermark() {
-        this.removeDom();
-        this.removeEvent();
-    }
-
-    /**
-     * 添加水印
-     */
-    createDom() {
-        const domId = document.getElementById(this.watermarkTextBgDomID);
-        if (domId) {
-            this.setDivStyle(domId);
-        } else {
-            document.body.appendChild(this.watermarkTextBg);
-        }
-    }
-
-    removeDom() {
-        const domId = document.getElementById(this.watermarkTextBgDomID);
-        if (domId) {
-            document.body.removeChild(domId);
-        }
-    }
-
-    createEvent() {
-        window.addEventListener("resize", this.createDom);
-        this.timer = setInterval(() => {
-            this.createDom();
-        }, 5000);
-    }
-
-    removeEvent() {
-        window.removeEventListener("resize", this.createDom);
-        clearInterval(this.timer);
-        this.timer = null;
-    }
-
-}
-
-
-function getWatermarkImage(text) {
-
-    const canvas = document.createElement("canvas");
-    canvas.width = 300;
-    canvas.height = 200;
-
-    const watermarkText = canvas.getContext("2d");
-    watermarkText.rotate((-20 * Math.PI) / 180);
-    watermarkText.font = "15px Arial";
-    const gradient = watermarkText.createLinearGradient(0, 0, 150, 0);
-    gradient.addColorStop(0, "magenta");
-    gradient.addColorStop(1.0, "blue");
-    watermarkText.fillStyle = gradient;
-    watermarkText.textAlign = "center";
-    watermarkText.textBaseline = "middle";
-    watermarkText.fillText(text, canvas.width * 0.3, canvas.height * 0.7);
-
-    return canvas.toDataURL("image/png", 1);
-}
-
-
-export {
-    Watermark,
-};
+import {randomUUID} from "@scx-js/scx-common";
+
+class Watermark {
+    text;
+    timer = null;
+
+    constructor(text = "SCX") {
+        this.text = text;
+        this.watermarkTextBgDomID = randomUUID();
+        this.watermarkImage = getWatermarkImage(this.text);
+        this.watermarkTextBg = document.createElement("div");
+        this.watermarkTextBg.id = this.watermarkTextBgDomID;
+        this.setDivStyle(this.watermarkTextBg);
+
+        this.createDom = this.createDom.bind(this);
+    }
+
+
+    setDivStyle(d) {
+        d.style.pointerEvents = "none";
+        d.style.top = "0px";
+        d.style.left = "0px";
+        d.style.position = "fixed";
+        d.style.zIndex = "990000";
+        d.style.width = "100%";
+        d.style.height = "100%";
+        d.style.background = "url(" + this.watermarkImage + ") left top repeat";
+    }
+
+    /**
+     * 开启水印
+     */
+    openWatermark() {
+        this.createDom();
+        this.removeEvent();
+        this.createEvent();
+    }
+
+    /**
+     * 清除水印
+     */
+    clearWatermark() {
+        this.removeDom();
+        this.removeEvent();
+    }
+
+    /**
+     * 添加水印
+     */
+    createDom() {
+        const domId = document.getElementById(this.watermarkTextBgDomID);
+        if (domId) {
+            this.setDivStyle(domId);
+        } else {
+            document.body.appendChild(this.watermarkTextBg);
+        }
+    }
+
+    removeDom() {
+        const domId = document.getElementById(this.watermarkTextBgDomID);
+        if (domId) {
+            document.body.removeChild(domId);
+        }
+    }
+
+    createEvent() {
+        window.addEventListener("resize", this.createDom);
+        this.timer = setInterval(() => {
+            this.createDom();
+        }, 5000);
+    }
+
+    removeEvent() {
+        window.removeEventListener("resize", this.createDom);
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+
+}
+
+
+function getWatermarkImage(text) {
+
+    const canvas = document.createElement("canvas");
+    canvas.width = 300;
+    canvas.height = 200;
+
+    const watermarkText = canvas.getContext("2d");
+    watermarkText.rotate((-20 * Math.PI) / 180);
+    watermarkText.font = "15px Arial";
+    const gradient = watermarkText.createLinearGradient(0, 0, 150, 0);
+    gradient.addColorStop(0, "magenta");
+    gradient.addColorStop(1.0, "blue");
+    watermarkText.fillStyle = gradient;
+    watermarkText.textAlign = "center";
+    watermarkText.textBaseline = "middle";
+    watermarkText.fillText(text, canvas.width * 0.3, canvas.height * 0.7);
+
+    return canvas.toDataURL("image/png", 1);
+}
+
+
+export {
+    Watermark,
+};

package/index.js

@@ -1,5 +1,5 @@
-export * from "./Download.js";
-export * from "./FixedElement.js";
-export * from "./HtmlToText.js";
-export * from "./ScxDrag.js";
-export * from "./Watermark.js";
+export * from "./Download.js";
+export * from "./FixedElement.js";
+export * from "./HtmlToText.js";
+export * from "./ScxDrag.js";
+export * from "./Watermark.js";

package/package.json

@@ -1,13 +1,13 @@
-{
-  "name": "@scx-js/scx-dom",
-  "version": "0.0.1",
-  "description": "SCX DOM",
-  "license": "MIT",
-  "author": "scx567888",
-  "main": "index.js",
-  "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/scx567888/scx-js.git"
-  }
-}
+{
+  "name": "@scx-js/scx-dom",
+  "version": "0.0.2",
+  "description": "SCX DOM",
+  "license": "MIT",
+  "author": "scx567888",
+  "main": "index.js",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scx567888/scx-js.git"
+  }
+}