watermark-js-plus 0.0.1 → 0.0.2

package/.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Deploy
+name: deploy
 
 on:
   push:

package/.github/workflows/npm-publish.yml

@@ -1,7 +1,7 @@
 # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
 
-name: Publish
+name: npm-publish
 
 on:
   release:

package/CHANGELOG.md

@@ -1,4 +1,13 @@
-## 0.0.1 (2022-12-05)
+## [0.0.2](https://github.com/zhensherlock/watermark-js-plus/compare/v0.0.1...v0.0.2) (2022-12-07)
+
+
+### ✨ Features | 新功能
+
+* optimize parent element logic ([836a1ee](https://github.com/zhensherlock/watermark-js-plus/commit/836a1eed2319c42444bdb6362dbf8114ab9bcf0e))
+
+
+
+## [0.0.1](https://github.com/zhensherlock/watermark-js-plus/compare/fb530a78a35020947fec230142a131b56b3588b4...v0.0.1) (2022-12-05)
 
 
 ### ✨ Features | 新功能

package/docs/.vitepress/config.ts

@@ -5,9 +5,19 @@ export default {
   title: 'watermark-js-plus',
   description: 'A watermark plugin',
   base: '/watermark-js-plus',
+  head: [
+    ['link', { rel: 'shortcut icon', href: '/watermark-js-plus/favicons/favicon-64x64.png' }],
+    ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/watermark-js-plus/favicons/apple-touch-icon.png' }],
+    // ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicons/favicon-32x32.png' }],
+    // ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicons/favicon-16x16.png' }],
+    // ['link', { rel: "manifest", href: "/assets/favicons/site.webmanifest"}],
+    // ['link', { rel: "mask-icon", href: "/assets/favicons/safari-pinned-tab.svg", color: "#3a0839"}],
+    // ['meta', { name: "msapplication-TileColor", content: "#3a0839"}],
+    // ['meta', { name: "msapplication-config", content: "/assets/favicons/browserconfig.xml"}],
+    // ['meta', { name: "theme-color", content: "#ffffff"}],
+  ],
   themeConfig: {
-    // siteTitle: "Kitty",
-    // logo: "/logo.png",
+    logo: '/logo.png',
     nav: [
       { text: 'Guide', link: '/guide/what-is-this', activeMatch: '/guide/' },
       { text: 'Configs', link: '/config/', activeMatch: '/config/' },
@@ -20,7 +30,7 @@ export default {
           },
           // {
           //   text: 'Contributing',
-          //   link: 'https://github.com/vuejs/vitepress/blob/main/.github/contributing.md'
+          //   link: 'https://github.com/zhensherlock/watermark-js-plus/blob/main/.github/contributing.md'
           // }
         ]
       }
@@ -32,6 +42,7 @@ export default {
       '/guide': [
         {
           text: 'Guide',
+          // collapsible: true,
           items: [
             { text: 'Introduce', link: '/guide/what-is-this' },
             { text: 'Getting Started', link: '/guide/getting-started' },
@@ -43,6 +54,7 @@ export default {
       '/config': [
         {
           text: 'Config',
+          // collapsible: true,
           items: [
             { text: 'Basic Config', link: '/config/' },
             { text: 'Blind Watermark Config', link: '/config/blind' },

package/docs/.vitepress/locales/zh-CN.ts

@@ -24,6 +24,7 @@ export default {
     '/zh/guide': [
       {
         text: '向导',
+        // collapsible: true,
         items: [
           { text: '介绍', link: '/zh/guide/what-is-this' },
           { text: '开始使用', link: '/zh/guide/getting-started' },
@@ -35,6 +36,7 @@ export default {
     '/zh/config': [
       {
         text: '配置',
+        // collapsible: true,
         items: [
           { text: '基础配置项', link: '/zh/config/' },
           { text: '暗水印配置项', link: '/zh/config/blind' },

package/docs/config/index.md

@@ -149,10 +149,10 @@ Enable listening for watermark dom changes.
 
 The watermark cannot be added repeatedly.
 
-## parentElement
+## parent
 
-- **Type:** `HTMLElement`
-- **Default:** `document.body`
+- **Type:** `Element | string`
+- **Default:** `'body'`
 
 Watermarking container.
 

package/docs/guide/watermark.md

@@ -26,7 +26,7 @@ const textWatermark = new wm.Watermark({
   }
 });
 const handleAddTextWatermark = () => {
-  if (isDark) {
+  if (isDark.value) {
     textWatermark.options.fontColor = '#fff'
   }
   textWatermark.create();
@@ -50,7 +50,7 @@ const multiLineTextWatermark = new wm.Watermark({
   }
 });
 const handleAddMultiLineTextWatermark = () => {
-  if (isDark) {
+  if (isDark.value) {
     multiLineTextWatermark.options.fontColor = '#fff'
   }
   multiLineTextWatermark.create();

package/docs/guide/what-is-this.md

@@ -3,7 +3,7 @@ layout: doc
 ---
 
 # What is this?
-This is a canvas-based watermark for browser.
+This is a *canvas-based* watermark for browser.
 
 ## Features
 - Create watermark and blind watermark

package/docs/index.md

@@ -9,7 +9,7 @@ hero:
   text: Advanced watermark plugin
   tagline: Simple, powerful, and performant.
   image:
-    src: /logo.png
+    src: /hero-image.png
     alt: watermark-js-plus
   actions:
     - theme: brand

package/docs/zh/config/blind-decode.md

@@ -1,14 +1,14 @@
 ---
 layout: doc
 ---
-# Blind Watermark Decode
+# 解析暗水印
 
 ## url
 
 - **Type:** `string`
 - **Default:** `''`
 
-Decoding picture path.
+解码暗水印图片路径。
 
 ## mode
 
@@ -16,18 +16,18 @@ Decoding picture path.
 - **Default:** `'canvas'`
 - **available values**: `'canvas'`
 
-Mode of decoding.
+解码模式。
 
 ## fillColor
 
 - **Type:** `string`
 - **Default:** `'#000'`
 
-fill color.
+解码 fill color.
 
 ## compositeOperation
 
 - **Type:** `string`
 - **Default:** `'color-burn'`
 
-composite operation.
+解码 composite operation.

package/docs/zh/config/blind.md

@@ -1,14 +1,14 @@
 ---
 layout: doc
 ---
-# Blind Watermark Config
+# 暗水印
 
 ## globalAlpha
 
 - **Type:** `number`
 - **Default:** `0.005`
 
-Transparency of watermark.
+水印的透明度。
 
 ## mode
 
@@ -16,4 +16,4 @@ Transparency of watermark.
 - **Default:** `'blind'`
 - **available values**: `'default' | 'blind'`
 
-Watermark mode
+水印模式。

package/docs/zh/config/index.md

@@ -1,30 +1,30 @@
 ---
 layout: doc
 ---
-# Basic Config
+# 基础配置项
 
 ## width
 
 - **Type:** `number`
 - **Default:** `300`
 
-A unit of width for a single watermark.
+单个水印的宽度。
 
 ## height
 
 - **Type:** `number`
 - **Default:** `300`
 
-A unit of height for a single watermark.
+单个水印的高度。
 
 ## rotate
 
 - **Type:** `number`
 - **Default:** `45`
 
-Watermark rotation Angle.
+水印旋转角度
 
-Rotate with the center of the text as the origin.
+以文本的中心为原点旋转。
 
 ## contentType
 
@@ -32,35 +32,35 @@ Rotate with the center of the text as the origin.
 - **Default:** `'text'`
 - **available values**: `'text' | 'image' | 'multi-line-text' | 'rich-text'`
 
-Type of watermark content.
+水印内容类型。
 
 ## content
 
 - **Type:** `string`
 - **Default:** `'hello watermark-js-plus'`
 
-Watermark content.
+水印内容。
 
 ## imageWidth
 
 - **Type:** `number`
 - **Default:** `0`
 
-Watermark image width.
+水印图像宽度。
 
 ## imageHeight
 
 - **Type:** `number`
 - **Default:** `0`
 
-Watermark image height.
+水印图像高度。
 
 ## lineHeight
 
 - **Type:** `number`
 - **Default:** `30`
 
-Watermark content line high.
+水印内容行高。
 
 ## zIndex
 
@@ -81,14 +81,14 @@ background-position
 - **Type:** `number`
 - **Default:** `20`
 
-The font size of the watermark content.
+水印内容的字体大小。
 
 ## fontFamily
 
 - **Type:** `string`
 - **Default:** `'sans-serif'`
 
-The font family of the watermark content.
+水印内容的字体。
 
 ## textAlign
 
@@ -96,7 +96,7 @@ The font family of the watermark content.
 - **Default:** `'center'`
 - **available values**: `'center' | 'left' | 'right'`
 
-Watermark content horizontal alignment.
+水印内容水平对齐方式。
 
 ## textBaseline
 
@@ -104,28 +104,28 @@ Watermark content horizontal alignment.
 - **Default:** `'middle'`
 - **available values**: `'top' | 'bottom' | 'middle'`
 
-Watermark content baseline.
+水印内容基准线。
 
 ## fontColor
 
 - **Type:** `string`
 - **Default:** `'#000'`
 
-Watermark content font color.
+水印内容字体颜色。
 
 ## globalAlpha
 
 - **Type:** `number`
 - **Default:** `0.5`
 
-Transparency of watermark.
+水印的透明度。
 
 ## fontWeight
 
 - **Type:** `string`
 - **Default:** `'normal'`
 
-Watermark content font weight.
+水印内容字体权重。
 
 ## mode
 
@@ -133,46 +133,46 @@ Watermark content font weight.
 - **Default:** `'default'`
 - **available values**: `'default' | 'blind'`
 
-Watermark mode
+水印模式。
 
 ## mutationObserve
 
 - **Type:** `boolean`
 - **Default:** `true`
 
-Enable listening for watermark dom changes.
+启用侦听水印dom更改。
 
 ## unique
 
 - **Type:** `boolean`
 - **Default:** `true`
 
-The watermark cannot be added repeatedly.
+不能重复添加水印。
 
-## parentElement
+## parent
 
-- **Type:** `HTMLElement`
-- **Default:** `document.body`
+- **Type:** `Element | string`
+- **Default:** `'body'`
 
-Watermarking container.
+水印的容器。
 
 ## onSuccess
 
 - **Type:** `Function`
 - **Default:** `() => {}`
 
-Watermark added successful callback event.
+水印添加成功的回调事件。
 
 ## onBeforeDestroy
 
 - **Type:** `Function`
 - **Default:** `() => {}`
 
-Watermark delete before callback event.
+水印删除前的回调事件。
 
 ## onDestroyed
 
 - **Type:** `Function`
 - **Default:** `() => {}`
 
-Watermark deleted after callback event.
+水印删除后的回调事件。

package/docs/zh/guide/watermark.md

@@ -26,7 +26,7 @@ const textWatermark = new wm.Watermark({
   }
 });
 const handleAddTextWatermark = () => {
-  if (isDark) {
+  if (isDark.value) {
     textWatermark.options.fontColor = '#fff'
   }
   textWatermark.create();
@@ -50,7 +50,7 @@ const multiLineTextWatermark = new wm.Watermark({
   }
 });
 const handleAddMultiLineTextWatermark = () => {
-  if (isDark) {
+  if (isDark.value) {
     multiLineTextWatermark.options.fontColor = '#fff'
   }
   multiLineTextWatermark.create();

package/docs/zh/index.md

@@ -9,7 +9,7 @@ hero:
   text: 高级的水印插件
   tagline: 简易、强大、高性能。
   image:
-    src: /logo.png
+    src: /hero-image.png
     alt: watermark-js-plus
   actions:
     - theme: brand

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watermark-js-plus",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "watermark for the browser",
   "main": "lib/watermark.js",
   "type": "module",

package/src/blind.ts

@@ -4,9 +4,9 @@ import { convertImage, isFunction } from './utils'
 
 export default class BlindWatermark extends Watermark {
   constructor (props: Partial<WatermarkOptions> = {}) {
+    props.globalAlpha = 0.005
+    props.mode = CreateWatermarkModeEnum.blind
     super(props)
-    this.options.globalAlpha = 0.005
-    this.options.mode = CreateWatermarkModeEnum.blind
   }
 
   static decode (props: Partial<DecodeBlindWatermark>) {

package/src/types/index.ts

@@ -54,7 +54,7 @@ export interface WatermarkOptions {
   mode: CreateWatermarkModeEnum; // 模式 default | blind
   mutationObserve: boolean;
   unique: boolean;
-  parentElement: HTMLElement;
+  parent: Element | string;
   onSuccess: Function;
   onBeforeDestroy: Function;
   onDestroyed: Function;

package/src/watermark.ts

@@ -9,10 +9,11 @@ import {
 } from './types'
 
 export default class Watermark {
-  options: WatermarkOptions
-  observer?: MutationObserver
-  parentObserve?: MutationObserver
-  watermarkDom?: WatermarkDom
+  private readonly options: WatermarkOptions
+  private parentElement: Element = document.body
+  private observer?: MutationObserver
+  private parentObserve?: MutationObserver
+  private watermarkDom?: WatermarkDom
 
   constructor (props: Partial<WatermarkOptions> = {}) {
     this.options = Object.assign({
@@ -36,7 +37,7 @@ export default class Watermark {
       mode: CreateWatermarkModeEnum.default, // 模式 default | blind
       mutationObserve: true,
       unique: true,
-      parentElement: document.body,
+      parent: 'body',
       onSuccess: () => {},
       onBeforeDestroy: () => {},
       onDestroyed: () => {}
@@ -44,6 +45,7 @@ export default class Watermark {
     if (this.options?.rotate) {
       this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180)
     }
+    this.changeParentElement(this.options.parent)
   }
 
   static createCanvas (width: number, height: number): HTMLCanvasElement {
@@ -57,6 +59,15 @@ export default class Watermark {
     return canvas
   }
 
+  changeParentElement (parent: Element | string) {
+    if (typeof parent === 'string') {
+      const parentElement = document.querySelector(parent)
+      parentElement && (this.parentElement = parentElement)
+    } else {
+      this.parentElement = parent
+    }
+  }
+
   async create () {
     if (!this.validateUnique()) {
       return
@@ -74,6 +85,7 @@ export default class Watermark {
     this.watermarkDom.__WATERMARK__INSTANCE__ = this
     this.watermarkDom.style.cssText = `
       z-index: ${this.options.zIndex};
+      position: relative;
     `
     watermarkInnerDom.style.cssText = `
       position: fixed;
@@ -90,7 +102,7 @@ export default class Watermark {
       -webkit-print-color-adjust: exact;
     `
     this.watermarkDom.append(watermarkInnerDom)
-    this.options.parentElement.appendChild(this.watermarkDom)
+    this.parentElement.appendChild(this.watermarkDom)
 
     if (this.options.mutationObserve) {
       this.bindMutationObserve()
@@ -109,7 +121,7 @@ export default class Watermark {
   private validateUnique (): boolean {
     let result = true
     if (this.options.unique) {
-      this.options.parentElement.childNodes.forEach(node => {
+      this.parentElement.childNodes.forEach(node => {
         if (!result) {
           return
         }
@@ -278,7 +290,7 @@ export default class Watermark {
         }
       })
     })
-    this.parentObserve.observe(this.options.parentElement, {
+    this.parentObserve.observe(this.parentElement, {
       attributes: true, // 子节点的变动（指新增，删除或者更改）
       childList: true, // 属性的变动
       subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。