Merge pull request #1266 from zhensherlock/dev

Dev

Author: zhensherlock

CHANGELOG.md

@@ -1,3 +1,26 @@
+# [1.6.0](https://github.com/zhensherlock/watermark-js-plus/compare/v1.5.9...v1.6.0) (2025-04-26)
+
+
+### ✨ Features | 新功能
+
+* **watermark:** add dynamic animation styles based on background repeat ([3f0b5a4](https://github.com/zhensherlock/watermark-js-plus/commit/3f0b5a4ff44fe00e8023f73abcfeff2e18e25f7d))
+
+
+### 🎫 Chores | 其他更新
+
+* **deps:** update dependency element-plus to v2.9.8 ([b8b61e4](https://github.com/zhensherlock/watermark-js-plus/commit/b8b61e4d89953268c0a9c034591a877d24fab94a))
+* **deps:** update dependency eslint to v9.25.0 ([d984ccc](https://github.com/zhensherlock/watermark-js-plus/commit/d984ccc5405da86ea4f76a17f51e12e5dc4d25fd))
+* **deps:** update dependency eslint to v9.25.1 ([bdcc74d](https://github.com/zhensherlock/watermark-js-plus/commit/bdcc74d7c0436302598fa8e969f839f4aeab696e))
+* **deps:** update dependency lint-staged to v15.5.1 ([359e7a3](https://github.com/zhensherlock/watermark-js-plus/commit/359e7a39ca8777b70abb323ebf6411e7d2f968e5))
+* **deps:** update dependency rollup to v4.40.0 ([414eaed](https://github.com/zhensherlock/watermark-js-plus/commit/414eaedcc7a3fcfffc108658ac1d458bbee3ffe0))
+* **deps:** update dependency ts-jest to v29.3.2 ([ce38314](https://github.com/zhensherlock/watermark-js-plus/commit/ce383143cc8636b81fb0e8c02a17243a79bd7317))
+* **deps:** update typescript-eslint monorepo to v8.30.1 ([d93a5a4](https://github.com/zhensherlock/watermark-js-plus/commit/d93a5a489b09fd85bdc56083783ae0db735313c0))
+* **deps:** update typescript-eslint monorepo to v8.31.0 ([37cdb22](https://github.com/zhensherlock/watermark-js-plus/commit/37cdb2295292e3f21a7d3ca2546ffdffc1dc6826))
+* update dependencies ([847d03b](https://github.com/zhensherlock/watermark-js-plus/commit/847d03be6419a3067e656c7fb7cde395f2b3ad40))
+* update dependencies ([e2cf22b](https://github.com/zhensherlock/watermark-js-plus/commit/e2cf22b1f44e8f215b7d3b622e48323b1bf61cbd))
+
+
+
 ## [1.5.9](https://github.com/zhensherlock/watermark-js-plus/compare/v1.5.8...v1.5.9) (2025-04-11)
 
 

docs/guide/extra/ie.md

@@ -18,7 +18,7 @@ import { Watermark } from 'watermark-js-plus/ie'
 ## CDN
 ```html
 <!-- import JavaScript -->
-<script src="https://www.unpkg.com/watermark-js-plus@1.5.8/dist/ie/index.iife.min.js"></script>
+<script src="https://www.unpkg.com/watermark-js-plus@1.6.0/dist/ie/index.iife.min.js"></script>
 ```
 
 > We recommend our users to lock version when using CDN. Please refer to [unpkg.com](https://unpkg.com/) for more information.

docs/guide/watermark.md

@@ -23,10 +23,12 @@ onMounted(() => {
   // child element watermark
   childElementWatermark = new Watermark({
     parent: '.parent-element',
-    width: 400,
-    height: 400,
+    width: 180,
+    height: 180,
+    textRowMaxWidth: 254,
     backgroundRepeat: 'no-repeat',
     zIndex: 900,
+    movable: true,
     // parent: '.parent-element',
     // // textRowMaxWidth: 200,
     // // contentType: 'multi-line-text',
@@ -372,10 +374,12 @@ import { Watermark } from 'watermark-js-plus' // import watermark plugin
 
 const watermark = new Watermark({
   parent: '.parent-element',
-  width: 400,
-  height: 400,
+  width: 180,
+  height: 180,
+  textRowMaxWidth: 254,
   backgroundRepeat: 'no-repeat',
-  zIndex: 900
+  zIndex: 900,
+  movable: true
 })
 
 watermark.create() // add watermark

docs/zh/guide/extra/ie.md

@@ -18,7 +18,7 @@ import { Watermark } from 'watermark-js-plus/ie'
 ## CDN
 ```html
 <!-- import JavaScript -->
-<script src="https://www.unpkg.com/watermark-js-plus@1.5.8/dist/ie/index.iife.min.js"></script>
+<script src="https://www.unpkg.com/watermark-js-plus@1.6.0/dist/ie/index.iife.min.js"></script>
 ```
 
 > 我们建议使用 CDN 引入用户在链接地址上锁定版本，以免将来插件升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com/)。

docs/zh/guide/watermark.md

@@ -23,10 +23,12 @@ onMounted(() => {
   // 子元素水印
   childElementWatermark = new Watermark({
     parent: '.parent-element',
-    width: 400,
-    height: 400,
+    width: 180,
+    height: 180,
+    textRowMaxWidth: 254,
     backgroundRepeat: 'no-repeat',
-    zIndex: 900
+    zIndex: 900,
+    movable: true
   });
 });
 
@@ -318,10 +320,12 @@ import { Watermark } from 'watermark-js-plus' // 引入水印插件
 
 const watermark = new Watermark({
   parent: '.parent-element',
-  width: 400,
-  height: 400,
+  width: 180,
+  height: 180,
+  textRowMaxWidth: 254,
   backgroundRepeat: 'no-repeat',
-  zIndex: 900
+  zIndex: 900,
+  movable: true
 })
 
 watermark.create() // 添加水印

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "watermark-js-plus",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "description": "watermark for the browser",
   "scripts": {
     "clean:dist": "rimraf dist",
@@ -92,8 +92,8 @@
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/jquery": "^3.5.32",
     "@types/markdown-it": "^14.1.2",
-    "@typescript-eslint/eslint-plugin": "^8.29.1",
-    "@typescript-eslint/parser": "^8.29.1",
+    "@typescript-eslint/eslint-plugin": "^8.31.0",
+    "@typescript-eslint/parser": "^8.31.0",
     "@vue/theme": "^2.3.0",
     "autoprefixer": "^10.4.21",
     "canvas": "^2.11.2",
@@ -104,8 +104,8 @@
     "core-js": "^3.41.0",
     "cross-fetch": "^4.1.0",
     "cssnano": "^7.0.6",
-    "element-plus": "^2.9.7",
-    "eslint": "^9.24.0",
+    "element-plus": "^2.9.8",
+    "eslint": "^9.25.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.2",
     "eslint-config-semistandard": "^17.0.0",
@@ -120,20 +120,20 @@
     "jest-environment-jsdom": "^29.7.0",
     "jimp": "^0.22.12",
     "jquery": "^3.7.1",
-    "lint-staged": "^15.5.0",
+    "lint-staged": "^15.5.1",
     "lodash": "^4.17.21",
     "markdown-it": "^14.1.0",
     "pinia": "^3.0.2",
     "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
-    "rollup": "^4.39.0",
+    "rollup": "^4.40.0",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-sass": "^1.15.2",
     "rollup-plugin-visualizer": "^5.14.0",
     "rollup-plugin-your-function": "^0.5.3",
     "terser": "^5.39.0",
-    "ts-jest": "^29.3.1",
+    "ts-jest": "^29.3.2",
     "typescript": "^5.8.3",
     "unplugin-element-plus": "^0.9.1",
     "vitepress": "^1.6.3",

package.json

@@ -1,4 +1,4 @@
-import { convertImage, isUndefined } from '../utils'
+import { convertImage, generateAnimationStyle, isUndefined } from '../utils'
 import type { ChangeOptionsMode, WatermarkDom, WatermarkOptions } from '../types'
 import { initialOptions } from '../utils/initialization'
 import protection from '../utils/protection'
@@ -92,7 +92,7 @@ class Watermark {
       position:${parentElementType === 'root' ? 'fixed' : 'absolute'}!important;-webkit-print-color-adjust:exact!important;width:100%!important;height:100%!important;
       z-index:${this.options.zIndex}!important;background-image:url(${image})!important;background-repeat:${this.options.backgroundRepeat}!important;
       background-size:${backgroundSize[0]}px ${backgroundSize[1]}px!important;background-position:${this.options.backgroundPosition};
-      ${this.options.movable ? 'animation: 200s linear 0s infinite alternate watermark !important;' : ''}
+      ${generateAnimationStyle(this.options.movable, this.options.backgroundRepeat)}
     `
     this.watermarkDom.appendChild(watermarkInnerDom)
     this.parentElement.appendChild(this.watermarkDom)

src/core/watermark.ts

@@ -15,3 +15,21 @@
     background-position: 0 0;
   }
 }
+
+@keyframes watermark-horizontal {
+  from {
+    background-position-x: 0;
+  }
+  to {
+    background-position-x: 100%;
+  }
+}
+
+@keyframes watermark-vertical {
+  from {
+    background-position-y: 0;
+  }
+  to {
+    background-position-y: 100%;
+  }
+}

src/style/global.scss

@@ -156,3 +156,23 @@ export const loadImage = (
 export const generateMatrix = (rows: number, columns: number, value: any) => {
   return Array.from({ length: rows }, () => new Array(columns).fill(value))
 }
+
+export const generateAnimationStyle = (movable: boolean, backgroundRepeat: string) => {
+  if (!movable) {
+    return ''
+  }
+  const horizontalDuration = Math.random() * (8 - 2) + 2
+  const verticalDuration = Math.random() * (4 - 2) + 2
+  switch (backgroundRepeat) {
+    case 'repeat':
+      return 'animation: 200s linear 0s infinite alternate watermark !important;'
+    case 'repeat-x':
+      return `animation: ${horizontalDuration}s ease-in 0s infinite alternate watermark-vertical !important;'`
+    case 'repeat-y':
+      return `animation: ${verticalDuration}s ease-out 0s infinite alternate watermark-horizontal !important;'`
+    case 'no-repeat':
+      return `animation: ${horizontalDuration}s ease-in 0s infinite alternate watermark-horizontal, ${verticalDuration}s ease-out 0s infinite alternate watermark-vertical !important;`
+    default:
+      return ''
+  }
+}