watermark-js-nine 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Your Name
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,149 @@
+# Watermark Component
+
+一个功能强大的网页水印组件，支持文字和图片水印，支持全图平铺或单个水印，支持旋转、透明度等多种配置。
+
+A powerful web watermark component that supports text and image watermarks, full-screen tiling or single watermark, rotation, opacity, and various other configurations.
+
+## 特性 Features
+
+- 📝 **文字水印 / Text Watermark**: 支持自定义文本、字体、颜色、大小 / Custom text, font, color, size
+- 🖼️ **图片水印 / Image Watermark**: 支持自定义图片、大小、透明度 / Custom image, size, opacity
+- 🔄 **灵活布局 / Flexible Layout**: 支持全图平铺或单个定位（九宫格） / Full-screen tiling or single positioning (9-grid)
+- 📐 **精确控制 / Precise Control**: 支持旋转角度、偏移量、间距（毫米单位） / Rotation angle, offset, spacing (in mm)
+- 🖨️ **打印支持 / Print Support**: 针对打印场景的优化 / Optimization for printing scenarios
+- 📦 **TypeScript**: 完整的类型定义 / Complete type definitions
+
+## 安装 Installation
+
+```bash
+npm install watermark-js-nine
+```
+
+或者使用 yarn / Or use yarn:
+
+```bash
+yarn add watermark-js-nine
+```
+
+## 使用方法 Usage
+
+### 引入 Import
+
+```typescript
+import NewWatermark, { WatermarkConfig } from 'watermark-js-nine';
+```
+
+### 基本使用 Basic Usage
+
+```typescript
+// 配置水印 / Configure watermark
+const config: WatermarkConfig = {
+  type: "text",
+  tilling: true, // 平铺 / Tiling
+  value: "机密文件\nCONFIDENTIAL",
+  font: "20pt Arial",
+  fillStyle: "rgba(200, 200, 200, 0.5)",
+  rotate: -45,
+  horizontal: 20, // mm
+  vertical: 20    // mm
+};
+
+// 初始化 / Initialize
+// 参数1: 目标元素ID / Target Element ID
+// 参数2: 配置对象或数组 / Configuration object or array
+const watermark = new NewWatermark("target-element-id", config);
+watermark.init();
+```
+
+### 混合水印 Mixed Watermarks
+
+支持传入配置数组来叠加多个水印。
+
+Supports passing a configuration array to overlay multiple watermarks.
+
+```typescript
+const configs: WatermarkConfig[] = [
+  {
+    type: "text",
+    tilling: true,
+    value: "内部资料",
+    rotate: -45,
+    fillStyle: "rgba(0,0,0,0.1)"
+  },
+  {
+    type: "image",
+    tilling: false,
+    place: "topRight",
+    image: {
+      data: "base64-string...",
+      size: [20, 20] // mm
+    }
+  }
+];
+
+const wm = new NewWatermark("app", configs);
+wm.init();
+```
+
+## 配置选项 Configuration (WatermarkConfig)
+
+| 属性 Property | 类型 Type | 说明 Description | 默认值 Default |
+|--------------|-----------|------------------|---------------|
+| `type` | `"text" \| "image"` | 水印类型 / Watermark type | `"text"` |
+| `tilling` | `boolean` | 是否平铺 / Whether to tile | `true` |
+| `rotate` | `number` | 旋转角度 / Rotation angle | `0` |
+| `offset` | `[number, number]` | 偏移量 [x, y] (mm) / Offset | `[0, 0]` |
+| `horizontal` | `number` | 横向间距 (mm) / Horizontal spacing | `0` |
+| `vertical` | `number` | 纵向间距 (mm) / Vertical spacing | `0` |
+| `place` | `PlaceType` | 单个水印位置 / Single watermark position | `"middleCenter"` |
+
+### 文字水印配置 Text Configuration
+
+| 属性 Property | 类型 Type | 说明 Description |
+|--------------|-----------|------------------|
+| `value` | `string` | 水印文本（支持 `\n` 换行） / Watermark text |
+| `font` | `string` | 字体样式 (e.g. "20pt SimSun") / Font style |
+| `fillStyle` | `string` | 填充颜色 / Fill color |
+
+### 图片水印配置 Image Configuration (`image` object)
+
+| 属性 Property | 类型 Type | 说明 Description |
+|--------------|-----------|------------------|
+| `type` | `string` | 图片类型 (png/jpg) / Image type |
+| `data` | `string` | 图片 Base64 数据 / Image Base64 data |
+| `size` | `[number, number]` | 图片大小 [width, height] (mm) / Image size |
+| `opacity` | `number` | 不透明度 (0-100) / Opacity |
+
+### 位置类型 PlaceType
+
+单个水印支持以下位置：
+Supported positions for single watermark:
+
+- `topLeft`, `topCenter`, `topRight`
+- `middleLeft`, `middleCenter`, `middleRight`
+- `bottomLeft`, `bottomCenter`, `bottomRight`
+
+## API
+
+### `constructor(elementId: string, config: WatermarkConfig | WatermarkConfig[], isPrint?: boolean, zoom?: number)`
+
+- `elementId`: 目标 DOM 元素的 ID。
+- `config`: 水印配置对象或数组。
+- `isPrint`: 是否为打印模式（影响 DPI 计算）。
+- `zoom`: 缩放比例。
+
+### `init(): Promise<void>`
+
+初始化并渲染水印。
+
+Initialize and render the watermark.
+
+### `destroy(): void`
+
+移除水印。
+
+Remove the watermark.
+
+## 许可证 License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Options for configuring the SvgDraggableComponent
+ */
+export interface SvgDraggableComponentOptions {
+  /** Width of the SVG canvas (default: 800) */
+  width?: number;
+  /** Height of the SVG canvas (default: 600) */
+  height?: number;
+  /** X position of the rectangle (default: 10) */
+  rectX?: number;
+  /** Y position of the rectangle (default: 10) */
+  rectY?: number;
+  /** Width of the rectangle (default: 200) */
+  rectWidth?: number;
+  /** Height of the rectangle (default: 100) */
+  rectHeight?: number;
+  /** Fill color of the rectangle (default: 'yellow') */
+  rectFill?: string;
+  /** Stroke color of the rectangle (default: 'black') */
+  rectStroke?: string;
+  /** X position of the component group (default: 100) */
+  compX?: number;
+  /** Y position of the component group (default: 100) */
+  compY?: number;
+  /** Whether to show the border (default: true) */
+  showBorder?: boolean;
+}
+
+/**
+ * A lightweight SVG component with drag and resize functionality
+ */
+export default class SvgDraggableComponent {
+  /**
+   * Create a new SvgDraggableComponent instance
+   * @param options - Configuration options
+   */
+  constructor(options?: SvgDraggableComponentOptions);
+
+  /**
+   * Mount the component to a container element
+   * @param container - DOM element or CSS selector string
+   * @throws Error if container is not found
+   */
+  mount(container: HTMLElement | string): void;
+
+  /**
+   * Destroy the component and cleanup event listeners
+   */
+  destroy(): void;
+}

package/dist/index.js

@@ -0,0 +1,279 @@
+/**
+ * SvgDraggableComponent - A lightweight SVG component with drag and resize functionality
+ */
+class SvgDraggableComponent {
+  constructor(options = {}) {
+    this.options = {
+      width: options.width || 800,
+      height: options.height || 600,
+      rectX: options.rectX || 10,
+      rectY: options.rectY || 10,
+      rectWidth: options.rectWidth || 200,
+      rectHeight: options.rectHeight || 100,
+      rectFill: options.rectFill || 'yellow',
+      rectStroke: options.rectStroke || 'black',
+      compX: options.compX || 100,
+      compY: options.compY || 100,
+      showBorder: options.showBorder !== undefined ? options.showBorder : true
+    };
+    
+    this.elements = {};
+    this.state = {
+      startX: 0,
+      startY: 0,
+      oldX: 0,
+      oldY: 0,
+      oldW: 0,
+      oldH: 0,
+      pressed: false,
+      task: 0
+    };
+    
+    this.container = null;
+  }
+
+  /**
+   * Create SVG elements
+   */
+  createSvg() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', this.options.width);
+    svg.setAttribute('height', this.options.height);
+    
+    if (this.options.showBorder) {
+      svg.style.border = '1px solid red';
+    }
+
+    // Create component group
+    const comp = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    comp.setAttribute('x', this.options.compX);
+    comp.setAttribute('y', this.options.compY);
+    comp.id = 'comp';
+
+    // Create rectangle
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.setAttribute('x', this.options.rectX);
+    rect.setAttribute('y', this.options.rectY);
+    rect.setAttribute('width', this.options.rectWidth);
+    rect.setAttribute('height', this.options.rectHeight);
+    rect.setAttribute('stroke', this.options.rectStroke);
+    rect.setAttribute('fill', this.options.rectFill);
+    rect.id = 'rect';
+
+    // Create corner circles
+    const clt = this.createCorner('clt', this.options.rectX, this.options.rectY);
+    const crt = this.createCorner('crt', this.options.rectX + this.options.rectWidth, this.options.rectY);
+    const clb = this.createCorner('clb', this.options.rectX, this.options.rectY + this.options.rectHeight);
+    const crb = this.createCorner('crb', this.options.rectX + this.options.rectWidth, this.options.rectY + this.options.rectHeight);
+
+    // Append elements
+    comp.appendChild(rect);
+    comp.appendChild(clt);
+    comp.appendChild(crt);
+    comp.appendChild(clb);
+    comp.appendChild(crb);
+    svg.appendChild(comp);
+
+    // Store references
+    this.elements = {
+      svg,
+      comp,
+      rect,
+      clt,
+      crt,
+      clb,
+      crb
+    };
+
+    return svg;
+  }
+
+  /**
+   * Create a corner circle
+   */
+  createCorner(id, cx, cy) {
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    circle.setAttribute('id', id);
+    circle.setAttribute('cx', cx);
+    circle.setAttribute('cy', cy);
+    circle.setAttribute('r', 10);
+    circle.setAttribute('stroke', 'none');
+    circle.setAttribute('fill', 'red');
+    circle.setAttribute('fill-opacity', 0.5);
+    return circle;
+  }
+
+  /**
+   * Setup drag functionality for the rectangle
+   */
+  setupRectDrag() {
+    const { rect, comp } = this.elements;
+
+    const handleMouseDown = (e) => {
+      this.state.pressed = true;
+      this.state.startX = e.offsetX;
+      this.state.startY = e.offsetY;
+      this.state.oldX = Number.parseFloat(comp.getAttribute('x'));
+      this.state.oldY = Number.parseFloat(comp.getAttribute('y'));
+    };
+
+    const handleMouseMove = (e) => {
+      if (!this.state.pressed) return;
+
+      const dx = e.offsetX - this.state.startX;
+      const dy = e.offsetY - this.state.startY;
+
+      if (this.state.task !== 0) {
+        cancelAnimationFrame(this.state.task);
+      }
+      
+      this.state.task = requestAnimationFrame(() => {
+        comp.setAttribute('x', this.state.oldX + dx);
+        comp.setAttribute('y', this.state.oldY + dy);
+      });
+    };
+
+    const handleMouseUp = () => {
+      this.state.pressed = false;
+    };
+
+    const handleMouseOver = () => {
+      rect.style.cursor = 'move';
+    };
+
+    rect.addEventListener('mousedown', handleMouseDown);
+    rect.addEventListener('mousemove', handleMouseMove);
+    rect.addEventListener('mouseup', handleMouseUp);
+    rect.addEventListener('mouseover', handleMouseOver);
+
+    // Store handlers for cleanup
+    this.handlers = this.handlers || {};
+    this.handlers.rect = {
+      mousedown: handleMouseDown,
+      mousemove: handleMouseMove,
+      mouseup: handleMouseUp,
+      mouseover: handleMouseOver
+    };
+  }
+
+  /**
+   * Setup resize functionality for the corner
+   */
+  setupCornerResize() {
+    const { crb } = this.elements;
+
+    const handleMouseDown = (e) => {
+      this.state.pressed = true;
+      this.state.startX = e.offsetX;
+      this.state.startY = e.offsetY;
+      this.state.oldX = Number.parseFloat(crb.getAttribute('cx'));
+      this.state.oldY = Number.parseFloat(crb.getAttribute('cy'));
+    };
+
+    const handleMouseMove = (e) => {
+      if (!this.state.pressed) return;
+
+      const dx = e.offsetX - this.state.startX;
+      const dy = e.offsetY - this.state.startY;
+
+      if (this.state.task !== 0) {
+        cancelAnimationFrame(this.state.task);
+      }
+      
+      crb.setAttribute('cx', this.state.oldX + dx);
+      crb.setAttribute('cy', this.state.oldY + dy);
+    };
+
+    const handleMouseUp = () => {
+      this.state.pressed = false;
+    };
+
+    const handleMouseOver = () => {
+      crb.style.cursor = 'nwse-resize';
+    };
+
+    const handleMouseLeave = () => {
+      // Handle mouse leave if needed
+    };
+
+    crb.addEventListener('mousedown', handleMouseDown);
+    crb.addEventListener('mousemove', handleMouseMove);
+    crb.addEventListener('mouseup', handleMouseUp);
+    crb.addEventListener('mouseover', handleMouseOver);
+    crb.addEventListener('mouseleave', handleMouseLeave);
+
+    // Store handlers for cleanup
+    this.handlers = this.handlers || {};
+    this.handlers.crb = {
+      mousedown: handleMouseDown,
+      mousemove: handleMouseMove,
+      mouseup: handleMouseUp,
+      mouseover: handleMouseOver,
+      mouseleave: handleMouseLeave
+    };
+  }
+
+  /**
+   * Mount the component to a container
+   * @param {HTMLElement|string} container - DOM element or selector string
+   */
+  mount(container) {
+    if (typeof container === 'string') {
+      this.container = document.querySelector(container);
+    } else {
+      this.container = container;
+    }
+
+    if (!this.container) {
+      throw new Error('Container not found');
+    }
+
+    const svg = this.createSvg();
+    this.container.appendChild(svg);
+    
+    this.setupRectDrag();
+    this.setupCornerResize();
+  }
+
+  /**
+   * Destroy the component and cleanup
+   */
+  destroy() {
+    if (this.elements.svg && this.container) {
+      this.container.removeChild(this.elements.svg);
+    }
+
+    // Cleanup event listeners
+    if (this.handlers) {
+      Object.keys(this.handlers).forEach(elementKey => {
+        const element = this.elements[elementKey];
+        const handlers = this.handlers[elementKey];
+        Object.keys(handlers).forEach(eventName => {
+          element.removeEventListener(eventName, handlers[eventName]);
+        });
+      });
+    }
+
+    this.elements = {};
+    this.handlers = {};
+    this.container = null;
+  }
+}
+
+// Export for different module systems
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = SvgDraggableComponent;
+}
+
+if (typeof define === 'function' && define.amd) {
+  define([], function() {
+    return SvgDraggableComponent;
+  });
+}
+
+if (typeof window !== 'undefined') {
+  window.SvgDraggableComponent = SvgDraggableComponent;
+}
+
+export default SvgDraggableComponent;
+

package/dist/waterMark.d.ts

@@ -0,0 +1,95 @@
+export interface WatermarkConfig {
+    type: "text" | "image";
+    tilling: boolean;
+    value?: string;
+    font?: string;
+    fillStyle?: string;
+    image?: {
+        type?: string;
+        data?: string;
+        size?: [number, number];
+        opacity?: number;
+    };
+    rotate?: number;
+    offset?: [number, number];
+    horizontal?: number;
+    vertical?: number;
+    place?: PlaceType;
+    svgContainer?: SVGSVGElement;
+}
+type PlaceType = "topLeft" | "topCenter" | "topRight" | "middleLeft" | "middleCenter" | "middleRight" | "bottomLeft" | "bottomCenter" | "bottomRight";
+export default class NewWatermark {
+    private elementId;
+    private config;
+    private element;
+    private isImageElement;
+    private isPrint;
+    private observer;
+    /**
+     * 创建水印实例
+     * @param elementId 目标元素的id
+     * @param config 水印配置
+     * @param isPrint 是否为打印模式
+     * @param zoom 缩放比例
+     */
+    constructor(elementId: string, config: WatermarkConfig | Array<WatermarkConfig>, isPrint?: boolean, zoom?: number);
+    private getRandomPlace;
+    /**
+     * 合并默认配置
+     */
+    private mergeDefaultConfig;
+    /**
+     * 初始化并渲染水印
+     */
+    init(): Promise<void>;
+    private waterListener;
+    /**
+     * 创建SVG容器
+     */
+    private createSvgContainer;
+    /**
+     * 包装图片元素（为图片创建一个容器）
+     */
+    private wrapImageElement;
+    /**
+     * 渲染平铺水印（全图水印）
+     */
+    private renderTillingWatermark;
+    /**
+     * 创建平铺图片水印
+     */
+    private createTillingImageWatermark;
+    /**
+     * 创建平铺文字水印
+     */
+    private createTillingTextWatermark;
+    /**
+     * 渲染单个水印
+     */
+    private renderSingleWatermark;
+    /**
+     * 创建单个图片水印
+     */
+    private createSingleImageWatermark;
+    /**
+     * 单个图片计算位置 始终沿着九宫格不超出范围定位和旋转
+     */
+    private calculateImagePosition;
+    /**
+     * 创建单个文字水印
+     */
+    private createSingleTextWatermark;
+    /**
+     * 单个文字计算位置
+     */
+    private calculateTextPosition;
+    private renderImageWatermark;
+    private imageWatermark;
+    private translateXY;
+    /**
+     * 移除水印
+     */
+    destroy(): void;
+}
+export {};
+//# sourceMappingURL=waterMark.d.ts.map

package/dist/waterMark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"waterMark.d.ts","sourceRoot":"","sources":["../src/waterMark.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IAEjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE;QACN,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED,KAAK,SAAS,GACV,SAAS,GACT,WAAW,GACX,UAAU,GACV,YAAY,GACZ,cAAc,GACd,aAAa,GACb,YAAY,GACZ,cAAc,GACd,aAAa,CAAC;AAmMlB,MAAM,CAAC,OAAO,OAAO,YAAY;IAC/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,MAAM,CAA2C;IACzD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,QAAQ,CAAwB;IAExC;;;;;;OAMG;gBAED,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,eAAe,GAAG,KAAK,CAAC,eAAe,CAAC,EAChD,OAAO,UAAQ,EACf,IAAI,SAAI;IAQV,OAAO,CAAC,cAAc;IAKtB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA4B1B;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAsC3B,OAAO,CAAC,aAAa;IAerB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAgC1B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IA6BxB;;OAEG;YACW,sBAAsB;IAuCpC;;OAEG;YACW,2BAA2B;IA6CzC;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAkClC;;OAEG;YACW,qBAAqB;IAiBnC;;OAEG;YACW,0BAA0B;IAiCxC;;OAEG;IACH,OAAO,CAAC,sBAAsB;IA4G9B;;OAEG;IACH,OAAO,CAAC,yBAAyB;IA+BjC;;OAEG;IACH,OAAO,CAAC,qBAAqB;YAsIf,oBAAoB;YAUpB,cAAc;IAiL5B,OAAO,CAAC,WAAW;IA0DnB;;OAEG;IACH,OAAO,IAAI,IAAI;CAMhB"}