leafer-x-watermark 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 XiaDeYu <https://github.com/Xdy1579883916>
+
+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,208 @@
+# leafer-x-watermark
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![bundle][bundle-src]][bundle-href]
+[![License][license-src]][license-href]
+
+Leafer UI 水印插件，支持任意 LeaferJS 元素平铺水印
+
+## ✨ 特性
+
+- 🎨 **任意图形** - 支持任意 LeaferJS 元素作为水印内容
+- 🔄 **平铺模式** - 支持平铺（repeat）和拉伸（stretch）两种模式
+- 📐 **灵活缩放** - 支持自定义水印尺寸比例
+- 🔲 **间距控制** - 支持自定义水印间距
+- 🎯 **错位排列** - 支持水印错位（stagger）效果
+- 🔃 **旋转支持** - 支持水印旋转角度设置
+- ⚡ **性能优化** - 智能缓存，仅在必要时重新生成图片
+
+## 📦 安装
+
+```bash
+# pnpm
+pnpm add leafer-x-watermark
+
+# npm
+npm install leafer-x-watermark
+
+# yarn
+yarn add leafer-x-watermark
+```
+
+## 🚀 快速开始
+
+### 基础使用
+
+```typescript
+import { App } from 'leafer-ui'
+import { Watermark } from 'leafer-x-watermark'
+
+const app = new App({ view: 'app' })
+
+const watermark = new Watermark({
+  tileContent: JSON.stringify({
+    tag: 'Text',
+    text: '水印文字',
+    fill: 'rgba(0, 0, 0, 0.1)',
+    fontSize: 16,
+  }),
+  width: 800,
+  height: 600,
+})
+
+app.tree.add(watermark)
+```
+
+### 平铺模式
+
+```typescript
+const watermark = new Watermark({
+  tileContent: JSON.stringify({
+    tag: 'Text',
+    text: 'CONFIDENTIAL',
+    fill: 'rgba(255, 0, 0, 0.1)',
+    fontSize: 20,
+  }),
+  tileMode: true,    // 开启平铺
+  tileSize: 100,     // 100% 原始大小
+  tileGap: 20,       // 20% 间距
+  tileRotation: -30, // 旋转 -30 度
+  width: 800,
+  height: 600,
+})
+```
+
+### 错位排列
+
+```typescript
+const watermark = new Watermark({
+  tileContent: JSON.stringify({
+    tag: 'Text',
+    text: '机密文件',
+    fill: 'rgba(0, 0, 0, 0.1)',
+    fontSize: 14,
+  }),
+  tileMode: true,
+  tileStagger: 50,  // 50% 错位偏移
+  tileGap: 10,
+  width: 800,
+  height: 600,
+})
+```
+
+### 图形水印
+
+```typescript
+const watermark = new Watermark({
+  tileContent: JSON.stringify({
+    tag: 'Group',
+    children: [
+      { tag: 'Ellipse', width: 20, height: 20, fill: 'rgba(0, 100, 255, 0.2)' },
+      { tag: 'Text', text: 'LOGO', x: 25, y: 3, fill: 'rgba(0, 100, 255, 0.2)', fontSize: 12 },
+    ],
+  }),
+  tileMode: true,
+  tileSize: 80,
+  tileGap: 30,
+  width: 800,
+  height: 600,
+})
+```
+
+## 📖 API 文档
+
+### Watermark 属性
+
+继承自 Leafer UI 的 [Rect](https://www.leaferjs.com/ui/display/Rect.html) 组件，拥有所有 Rect 属性，并额外支持：
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `tileContent` | string | - | 水印内容，LeaferJS 元素的 JSON 字符串 |
+| `tileMode` | boolean | `true` | 平铺模式：`true` 平铺，`false` 拉伸 |
+| `tileSize` | number | `100` | 显示比例（%），100 为原始大小 |
+| `tileGap` | number | `0` | 间距比例（%），基于显示尺寸计算 |
+| `tileStagger` | number | `0` | 错位偏移比例（0-100），控制相邻行的水平偏移 |
+| `tileRotation` | number | `0` | 水印旋转角度（度） |
+
+### 属性说明
+
+#### tileContent
+
+水印内容为 LeaferJS 元素的 JSON 字符串，支持所有 LeaferJS 图形类型：
+
+```typescript
+// 文本
+JSON.stringify({ tag: 'Text', text: '水印', fill: '#000', fontSize: 16 })
+
+// 图片
+JSON.stringify({ tag: 'Image', url: 'logo.png', width: 50, height: 50 })
+
+// 组合图形
+JSON.stringify({
+  tag: 'Group',
+  children: [
+    { tag: 'Rect', width: 30, height: 30, fill: '#f00' },
+    { tag: 'Text', text: 'A', x: 10, y: 5, fill: '#fff' },
+  ],
+})
+```
+
+#### tileSize
+
+控制水印显示大小的比例：
+- `100` = 原始大小
+- `50` = 缩小 50%
+- `200` = 放大 200%
+- `0` 或负数 = 不显示水印
+
+#### tileGap
+
+间距基于显示尺寸的百分比计算：
+- `tileGap: 10` 表示间距为水印宽/高的 10%
+
+#### tileStagger
+
+错位排列效果，值为 0-100：
+- `0` = 无错位
+- `50` = 相邻行偏移 50%
+- `100` = 相邻行偏移 100%（等于一个完整水印宽度）
+
+## 💡 使用场景
+
+- 📄 文档版权保护
+- 🖼️ 图片水印
+- 🔒 机密文件标识
+- 🏢 企业 Logo 背景
+- 📑 证书防伪
+
+## 🔗 相关链接
+
+- [在线演示](https://leafer-x-watermark.vercel.app/)
+- [Leafer UI 文档](https://www.leaferjs.com/ui/guide/)
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## License
+
+[MIT](./LICENSE) License © 2024-PRESENT [XiaDeYu](https://github.com/Xdy1579883916)
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/leafer-x-watermark?style=flat&colorA=080f12&colorB=1fa669
+
+[npm-version-href]: https://npmjs.com/package/leafer-x-watermark
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/leafer-x-watermark?style=flat&colorA=080f12&colorB=1fa669
+
+[npm-downloads-href]: https://npmjs.com/package/leafer-x-watermark
+
+[bundle-src]: https://img.shields.io/bundlephobia/minzip/leafer-x-watermark?style=flat&colorA=080f12&colorB=1fa669&label=minzip
+
+[bundle-href]: https://bundlephobia.com/result?p=leafer-x-watermark
+
+[license-src]: https://img.shields.io/github/license/Xdy1579883916/leafer-x-watermark.svg?style=flat&colorA=080f12&colorB=1fa669
+
+[license-href]: https://github.com/Xdy1579883916/leafer-x-watermark/blob/master/LICENSE

package/dist/index.d.mts

@@ -0,0 +1,90 @@
+import { IRectData, IUI, IRectInputData, IJSONOptions, IUIJSONData, IObject } from '@leafer-ui/interface';
+import { RectData, Rect } from '@leafer-ui/core';
+
+type IStaggerType = 'x' | 'y';
+interface IStaggerData {
+    type?: IStaggerType;
+    offset: number;
+}
+type IStagger = number | IStaggerData;
+interface INormalizedStagger {
+    type: IStaggerType;
+    offset: number;
+}
+declare module '@leafer-ui/interface' {
+    interface IImagePaint {
+        stagger?: IStagger;
+    }
+}
+
+interface ITileGap {
+    x?: number;
+    y?: number;
+}
+interface IWatermarkAttrData {
+    tileContent?: string;
+    tileMode?: boolean;
+    tileSize?: number;
+    tileGap?: number | ITileGap;
+    tileStagger?: IStagger;
+    tileRotation?: number;
+}
+interface IProcessDataType extends IRectData {
+    _tileContent?: string;
+    _tileMode?: boolean;
+    _tileSize?: number;
+    _tileGap?: number;
+    _tileStagger?: number;
+    _tileRotation?: number;
+}
+interface IWatermark extends IWatermarkAttrData, IUI {
+    __: IProcessDataType;
+}
+interface IWatermarkInputData extends IWatermarkAttrData, IRectInputData {
+}
+declare class ProcessorData extends RectData implements IProcessDataType {
+    __leaf: Watermark;
+    _tileContent?: string;
+    setTileContent(value: string): void;
+    _tileMode?: boolean;
+    setTileMode(value: boolean): void;
+    _tileSize?: number;
+    setTileSize(value: number): void;
+    _tileGap?: number;
+    setTileGap(value: number): void;
+    _tileStagger?: number;
+    setTileStagger(value: number): void;
+    _tileRotation?: number;
+    setTileRotation(value: number): void;
+    __getData(): IObject;
+    __getInputData(names?: string[] | IObject, options?: IJSONOptions): IObject;
+}
+declare class Watermark<TConstructorData = IWatermarkInputData> extends Rect<TConstructorData> implements IWatermark {
+    get __tag(): string;
+    __: IProcessDataType;
+    tileContent?: string;
+    tileMode: boolean;
+    tileSize: number;
+    tileGap: number | {
+        x?: number;
+        y?: number;
+    };
+    tileStagger: IStagger;
+    tileRotation: number;
+    width: number;
+    height: number;
+    private _cachedUrl?;
+    private _cachedBounds?;
+    constructor(data?: TConstructorData);
+    private createTileItem;
+    regenerateImage(): void;
+    updateFill(): void;
+    toJSON(options?: IJSONOptions): IUIJSONData;
+}
+
+declare function normalizeStagger(stagger: IStagger): INormalizedStagger;
+declare function installStaggerPattern(): void;
+declare function processStaggerData(paint: any): INormalizedStagger | null;
+
+export { ProcessorData, Watermark, installStaggerPattern, normalizeStagger, processStaggerData };
+export type { INormalizedStagger, IProcessDataType, IStagger, IStaggerData, IStaggerType, IWatermark, IWatermarkAttrData, IWatermarkInputData };

package/dist/index.mjs

@@ -0,0 +1,308 @@
+import { MatrixHelper, MathHelper, PaintImage, Platform, Debug, dataProcessor, boundsType, registerUI, Plugin, RectData, Rect, UICreator, isObject } from '@leafer-ui/core';
+
+const { get, scale, copy } = MatrixHelper;
+const { getFloorScale } = MathHelper;
+const { abs } = Math;
+const originalCreatePattern = PaintImage.createPattern.bind(PaintImage);
+function normalizeStagger(stagger) {
+  if (typeof stagger === "number") {
+    return { type: "x", offset: stagger };
+  }
+  return { type: stagger.type || "x", offset: stagger.offset || 0 };
+}
+function createStaggerCanvas(image, imgWidth, imgHeight, xGap, yGap, stagger, opacity, smooth) {
+  const unitWidth = imgWidth + xGap;
+  const unitHeight = imgHeight + yGap;
+  const isXStagger = stagger.type === "x";
+  const patternWidth = isXStagger ? unitWidth : unitWidth * 2;
+  const patternHeight = isXStagger ? unitHeight * 2 : unitHeight;
+  const canvas = Platform.origin.createCanvas(
+    Math.max(Math.floor(patternWidth), 1),
+    Math.max(Math.floor(patternHeight), 1)
+  );
+  const ctx = canvas.getContext("2d");
+  if (opacity && opacity < 1)
+    ctx.globalAlpha = opacity;
+  ctx.imageSmoothingEnabled = smooth !== false;
+  const imgView = image.view;
+  const drawImg = (x, y) => {
+    ctx.drawImage(imgView, 0, 0, image.width, image.height, x, y, imgWidth, imgHeight);
+  };
+  const offset = stagger.offset / 100 * (isXStagger ? unitWidth : unitHeight);
+  if (isXStagger) {
+    drawImg(0, 0);
+    drawImg(offset, unitHeight);
+    if (offset + imgWidth > unitWidth) {
+      drawImg(offset - unitWidth, unitHeight);
+    }
+  } else {
+    drawImg(0, 0);
+    drawImg(unitWidth, offset);
+    if (offset + imgHeight > unitHeight) {
+      drawImg(unitWidth, offset - unitHeight);
+    }
+  }
+  return canvas;
+}
+function createPatternWithStagger(paint, ui, canvas, renderOptions) {
+  const originPaint = paint.originPaint;
+  const rawStagger = originPaint?.stagger;
+  if (rawStagger === void 0 || rawStagger === 0) {
+    originalCreatePattern(paint, ui, canvas, renderOptions);
+    return;
+  }
+  const stagger = normalizeStagger(rawStagger);
+  if (stagger.offset === 0) {
+    originalCreatePattern(paint, ui, canvas, renderOptions);
+    return;
+  }
+  let { scaleX, scaleY } = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
+  const id = `${scaleX}-${scaleY}-stagger-${stagger.type}-${stagger.offset}`;
+  if (paint.patternId !== id && !ui.destroyed) {
+    const { image, data } = paint;
+    const { transform, gap } = data;
+    const fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
+    let imageMatrix;
+    let xGap = 0;
+    let yGap = 0;
+    let { width, height } = image;
+    if (fixScale) {
+      scaleX *= fixScale;
+      scaleY *= fixScale;
+    }
+    width *= scaleX;
+    height *= scaleY;
+    if (gap) {
+      xGap = gap.x * scaleX / abs(data.scaleX || 1);
+      yGap = gap.y * scaleY / abs(data.scaleY || 1);
+    }
+    const unitWidth = width + xGap;
+    const unitHeight = height + yGap;
+    const isXStagger = stagger.type === "x";
+    const patternWidth = isXStagger ? unitWidth : unitWidth * 2;
+    const patternHeight = isXStagger ? unitHeight * 2 : unitHeight;
+    if (transform || scaleX !== 1 || scaleY !== 1) {
+      const matrixScaleX = scaleX * getFloorScale(patternWidth);
+      const matrixScaleY = scaleY * getFloorScale(patternHeight);
+      imageMatrix = get();
+      if (transform)
+        copy(imageMatrix, transform);
+      scale(imageMatrix, 1 / matrixScaleX, 1 / matrixScaleY);
+    }
+    const imageCanvas = createStaggerCanvas(
+      image,
+      width,
+      height,
+      xGap,
+      yGap,
+      stagger,
+      data.opacity,
+      ui.leafer?.config.smooth
+    );
+    const pattern = image.getPattern(
+      imageCanvas,
+      data.repeat || "repeat",
+      imageMatrix,
+      paint
+    );
+    paint.style = pattern;
+    paint.patternId = id;
+  }
+}
+function installStaggerPattern() {
+  PaintImage.createPattern = createPatternWithStagger;
+}
+function processStaggerData(paint) {
+  if (paint.stagger !== void 0) {
+    return normalizeStagger(paint.stagger);
+  }
+  return null;
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+installStaggerPattern();
+const debug = Debug.get("leafer-x-watermark");
+class ProcessorData extends RectData {
+  __leaf;
+  _tileContent;
+  setTileContent(value) {
+    this._tileContent = value;
+    this.__leaf.regenerateImage();
+  }
+  _tileMode;
+  setTileMode(value) {
+    this._tileMode = value;
+    this.__leaf.updateFill();
+  }
+  _tileSize;
+  setTileSize(value) {
+    this._tileSize = value;
+    this.__leaf.updateFill();
+  }
+  _tileGap;
+  setTileGap(value) {
+    this._tileGap = value;
+    this.__leaf.updateFill();
+  }
+  _tileStagger;
+  setTileStagger(value) {
+    this._tileStagger = value;
+    this.__leaf.updateFill();
+  }
+  _tileRotation;
+  setTileRotation(value) {
+    this._tileRotation = value;
+    this.__leaf.updateFill();
+  }
+  __getData() {
+    const data = super.__getData();
+    if (data.url)
+      delete data.fill;
+    return data;
+  }
+  __getInputData(names, options) {
+    const data = super.__getInputData(names, options);
+    if (data.url)
+      delete data.fill;
+    return data;
+  }
+}
+let Watermark = class extends Rect {
+  get __tag() {
+    return "Watermark";
+  }
+  // 缓存导出的图片和尺寸信息
+  _cachedUrl;
+  _cachedBounds;
+  constructor(data) {
+    super(data);
+    this.regenerateImage();
+  }
+  createTileItem(itemData) {
+    return UICreator.get("Group", {
+      children: [itemData],
+      // rotation: this.tileRotation,
+      around: "center"
+    });
+  }
+  regenerateImage() {
+    Platform.requestRender(async () => {
+      const { tileContent, width, height } = this;
+      if (!tileContent) {
+        this._cachedUrl = void 0;
+        this._cachedBounds = void 0;
+        this.fill = void 0;
+        return;
+      }
+      let itemData;
+      try {
+        itemData = JSON.parse(tileContent);
+      } catch (e) {
+        debug.error("Invalid tileContent JSON:", e);
+        return;
+      }
+      const tempItem = this.createTileItem(itemData);
+      const bounds = tempItem.getBounds("box", "local");
+      if (!width || !height) {
+        this.width = bounds.width;
+        this.height = bounds.height;
+      }
+      const exportWidth = 1e3;
+      const { data: url } = await tempItem.export("png", {
+        blob: false,
+        size: { width: exportWidth }
+      });
+      this._cachedUrl = url;
+      this._cachedBounds = { width: bounds.width, height: bounds.height };
+      tempItem.destroy();
+      this.updateFill();
+    });
+  }
+  updateFill() {
+    Platform.requestRender(() => {
+      const { tileMode, tileSize, tileGap, tileStagger } = this;
+      if (!this._cachedUrl || !this._cachedBounds || tileSize <= 0) {
+        this.fill = void 0;
+        return;
+      }
+      const { width: boundsWidth, height: boundsHeight } = this._cachedBounds;
+      if (!tileMode) {
+        this.fill = {
+          type: "image",
+          url: this._cachedUrl,
+          mode: "stretch"
+        };
+      } else {
+        const scale = tileSize / 100;
+        const sizeWidth = boundsWidth * scale;
+        const sizeHeight = boundsHeight * scale;
+        let xGap, yGap;
+        if (isObject(tileGap)) {
+          xGap = tileGap.x;
+          yGap = tileGap.y;
+        } else {
+          xGap = yGap = tileGap;
+        }
+        const gapX = xGap / 100 * sizeWidth;
+        const gapY = yGap / 100 * sizeHeight;
+        this.fill = {
+          type: "image",
+          url: this._cachedUrl,
+          mode: "repeat",
+          gap: { x: gapX, y: gapY },
+          size: { width: sizeWidth, height: sizeHeight },
+          stagger: tileStagger,
+          rotation: this.tileRotation,
+          align: "center"
+        };
+      }
+    });
+  }
+  toJSON(options) {
+    const data = super.toJSON(options);
+    const { fill, ...cleanData } = data;
+    return cleanData;
+  }
+};
+__decorateClass([
+  dataProcessor(ProcessorData)
+], Watermark.prototype, "__", 2);
+__decorateClass([
+  boundsType()
+], Watermark.prototype, "tileContent", 2);
+__decorateClass([
+  boundsType(true)
+], Watermark.prototype, "tileMode", 2);
+__decorateClass([
+  boundsType(100)
+], Watermark.prototype, "tileSize", 2);
+__decorateClass([
+  boundsType(0)
+], Watermark.prototype, "tileGap", 2);
+__decorateClass([
+  boundsType(0)
+], Watermark.prototype, "tileStagger", 2);
+__decorateClass([
+  boundsType(0)
+], Watermark.prototype, "tileRotation", 2);
+__decorateClass([
+  boundsType(0)
+], Watermark.prototype, "width", 2);
+__decorateClass([
+  boundsType(0)
+], Watermark.prototype, "height", 2);
+Watermark = __decorateClass([
+  registerUI()
+], Watermark);
+Plugin.add("leafer-x-watermark");
+
+export { ProcessorData, Watermark, installStaggerPattern, normalizeStagger, processStaggerData };

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "leafer-x-watermark",
+  "type": "module",
+  "version": "1.0.0",
+  "packageManager": "pnpm@10.14.0",
+  "description": "Leafer 水印插件",
+  "author": "XiaDeYu <1579883916@qq.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/Xdy1579883916/leafer-x-watermark#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Xdy1579883916/leafer-x-watermark.git"
+  },
+  "bugs": "https://github.com/Xdy1579883916/leafer-x-watermark/issues",
+  "keywords": [
+    "leafer",
+    "水印",
+    "插件"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "dev": "pnpm run -C playground dev",
+    "doc": "pnpm run -C playground build",
+    "lint": "eslint",
+    "prepublishOnly": "nr build",
+    "release": "bumpp && npm publish",
+    "test": "vitest",
+    "prepare": "simple-git-hooks"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^5.4.1",
+    "@antfu/ni": "^25.0.0",
+    "@antfu/utils": "^9.3.0",
+    "@lx/watermark": "workspace:*",
+    "@types/node": "^24.10.4",
+    "bumpp": "^10.3.2",
+    "eslint": "^9.39.2",
+    "lint-staged": "^16.2.7",
+    "simple-git-hooks": "^2.13.1",
+    "tinyexec": "^1.0.2",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "unbuild": "^3.6.1",
+    "vite": "^7.3.0",
+    "vitest": "^3.2.4",
+    "vitest-package-exports": "^0.1.1",
+    "yaml": "^2.8.2"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm i --frozen-lockfile --ignore-scripts --offline && npx lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}