leafer-x-watermark 1.0.0 → 1.1.1

package/README.md

@@ -64,9 +64,9 @@ const watermark = new Watermark({
     fill: 'rgba(255, 0, 0, 0.1)',
     fontSize: 20,
   }),
-  tileMode: true,    // 开启平铺
-  tileSize: 100,     // 100% 原始大小
-  tileGap: 20,       // 20% 间距
+  tileMode: true, // 开启平铺
+  tileSize: 100, // 100% 原始大小
+  tileGap: 20, // 20% 间距
   tileRotation: -30, // 旋转 -30 度
   width: 800,
   height: 600,
@@ -84,7 +84,7 @@ const watermark = new Watermark({
     fontSize: 14,
   }),
   tileMode: true,
-  tileStagger: 50,  // 50% 错位偏移
+  tileStagger: 50, // 50% 错位偏移
   tileGap: 10,
   width: 800,
   height: 600,
@@ -121,8 +121,8 @@ const watermark = new Watermark({
 | `tileContent` | string | - | 水印内容，LeaferJS 元素的 JSON 字符串 |
 | `tileMode` | boolean | `true` | 平铺模式：`true` 平铺，`false` 拉伸 |
 | `tileSize` | number | `100` | 显示比例（%），100 为原始大小 |
-| `tileGap` | number | `0` | 间距比例（%），基于显示尺寸计算 |
-| `tileStagger` | number | `0` | 错位偏移比例（0-100），控制相邻行的水平偏移 |
+| `tileGap` | `number \| { x?: number, y?: number }` | `0` | 间距比例（%），支持统一数值或分别设置 x/y 间距 |
+| `tileStagger` | `number \| { type?: 'x' \| 'y', offset: number }` | `0` | 错位偏移，支持数值(0-100)或详细配置 |
 | `tileRotation` | number | `0` | 水印旋转角度（度） |
 
 ### 属性说明
@@ -160,13 +160,15 @@ JSON.stringify({
 
 间距基于显示尺寸的百分比计算：
 - `tileGap: 10` 表示间距为水印宽/高的 10%
+- 支持分别设置：`{ x: 20, y: 10 }`
 
 #### tileStagger
 
-错位排列效果，值为 0-100：
+错位排列效果，支持数值 (0-100) 或对象配置：
+- `tileStagger: 50` = 水平方向（x）相邻行偏移 50%
+- `{ type: 'y', offset: 50 }` = 垂直方向（y）相邻列偏移 50%
 - `0` = 无错位
-- `50` = 相邻行偏移 50%
-- `100` = 相邻行偏移 100%（等于一个完整水印宽度）
+- `100` = 完全错位（等于一个完整水印尺寸）
 
 ## 💡 使用场景
 

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { IRectData, IUI, IRectInputData, IJSONOptions, IUIJSONData, IObject } from '@leafer-ui/interface';
+import { IRectData, IUI, IRectInputData, IObject, IJSONOptions } from '@leafer-ui/interface';
 import { RectData, Rect } from '@leafer-ui/core';
 
 type IStaggerType = 'x' | 'y';
@@ -33,9 +33,16 @@ interface IProcessDataType extends IRectData {
     _tileContent?: string;
     _tileMode?: boolean;
     _tileSize?: number;
-    _tileGap?: number;
-    _tileStagger?: number;
+    _tileGap?: number | ITileGap;
+    _tileStagger?: IStagger;
     _tileRotation?: number;
+    _cachedUrl?: string;
+    _cachedBounds?: {
+        width: number;
+        height: number;
+    };
+    updateFill: () => void;
+    regenerateImage: () => Promise<void>;
 }
 interface IWatermark extends IWatermarkAttrData, IUI {
     __: IProcessDataType;
@@ -45,19 +52,27 @@ interface IWatermarkInputData extends IWatermarkAttrData, IRectInputData {
 declare class ProcessorData extends RectData implements IProcessDataType {
     __leaf: Watermark;
     _tileContent?: string;
-    setTileContent(value: string): void;
+    _cachedUrl?: string;
+    _cachedBounds?: {
+        width: number;
+        height: number;
+    };
+    setTileContent(value: string): Promise<void>;
     _tileMode?: boolean;
     setTileMode(value: boolean): void;
     _tileSize?: number;
     setTileSize(value: number): void;
-    _tileGap?: number;
+    _tileGap?: number | ITileGap;
     setTileGap(value: number): void;
-    _tileStagger?: number;
+    _tileStagger?: IStagger;
     setTileStagger(value: number): void;
     _tileRotation?: number;
     setTileRotation(value: number): void;
+    updateFill(): void;
     __getData(): IObject;
     __getInputData(names?: string[] | IObject, options?: IJSONOptions): IObject;
+    private createTileItem;
+    regenerateImage(): Promise<void>;
 }
 declare class Watermark<TConstructorData = IWatermarkInputData> extends Rect<TConstructorData> implements IWatermark {
     get __tag(): string;
@@ -73,13 +88,8 @@ declare class Watermark<TConstructorData = IWatermarkInputData> extends Rect<TCo
     tileRotation: number;
     width: number;
     height: number;
-    private _cachedUrl?;
-    private _cachedBounds?;
+    get tileURL(): string;
     constructor(data?: TConstructorData);
-    private createTileItem;
-    regenerateImage(): void;
-    updateFill(): void;
-    toJSON(options?: IJSONOptions): IUIJSONData;
 }
 
 declare function normalizeStagger(stagger: IStagger): INormalizedStagger;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { MatrixHelper, MathHelper, PaintImage, Platform, Debug, dataProcessor, boundsType, registerUI, Plugin, RectData, Rect, UICreator, isObject } from '@leafer-ui/core';
+import { MatrixHelper, MathHelper, PaintImage, Platform, Debug, dataProcessor, boundsType, registerUI, Plugin, RectData, isObject, UICreator, Rect } from '@leafer-ui/core';
 
 const { get, scale, copy } = MatrixHelper;
 const { getFloorScale } = MathHelper;
@@ -132,145 +132,136 @@ var __decorateClass = (decorators, target, key, kind) => {
 installStaggerPattern();
 const debug = Debug.get("leafer-x-watermark");
 class ProcessorData extends RectData {
-  __leaf;
-  _tileContent;
+  _tileContent = "";
+  _cachedUrl;
+  _cachedBounds;
   setTileContent(value) {
     this._tileContent = value;
-    this.__leaf.regenerateImage();
+    return this.regenerateImage();
   }
-  _tileMode;
+  _tileMode = true;
   setTileMode(value) {
     this._tileMode = value;
-    this.__leaf.updateFill();
+    this.updateFill();
   }
-  _tileSize;
+  _tileSize = 100;
   setTileSize(value) {
     this._tileSize = value;
-    this.__leaf.updateFill();
+    this.updateFill();
   }
-  _tileGap;
+  _tileGap = 0;
   setTileGap(value) {
     this._tileGap = value;
-    this.__leaf.updateFill();
+    this.updateFill();
   }
-  _tileStagger;
+  _tileStagger = 0;
   setTileStagger(value) {
     this._tileStagger = value;
-    this.__leaf.updateFill();
+    this.updateFill();
   }
-  _tileRotation;
+  _tileRotation = 0;
   setTileRotation(value) {
     this._tileRotation = value;
-    this.__leaf.updateFill();
+    this.updateFill();
+  }
+  updateFill() {
+    const leaf = this.__leaf;
+    const { _tileMode, _tileSize, _tileGap, _tileStagger, _tileRotation } = this;
+    if (!this._cachedUrl || !this._cachedBounds || _tileSize <= 0) {
+      leaf.fill = void 0;
+      return;
+    }
+    const { width: boundsWidth, height: boundsHeight } = this._cachedBounds;
+    if (!_tileMode) {
+      leaf.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;
+      leaf.fill = {
+        type: "image",
+        url: this._cachedUrl,
+        mode: "repeat",
+        gap: { x: gapX, y: gapY },
+        size: { width: sizeWidth, height: sizeHeight },
+        stagger: _tileStagger,
+        rotation: _tileRotation,
+        align: "center"
+      };
+    }
   }
   __getData() {
     const data = super.__getData();
-    if (data.url)
-      delete data.fill;
+    delete data.fill;
     return data;
   }
   __getInputData(names, options) {
     const data = super.__getInputData(names, options);
-    if (data.url)
-      delete data.fill;
+    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();
+  async regenerateImage() {
+    const leaf = this.__leaf;
+    const { _tileContent } = this;
+    const { width, height } = leaf;
+    if (!_tileContent) {
+      this._cachedUrl = void 0;
+      this._cachedBounds = void 0;
+      leaf.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) {
+      leaf.width = bounds.width;
+      leaf.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"
-        };
-      }
-    });
+}
+let Watermark = class extends Rect {
+  get __tag() {
+    return "Watermark";
+  }
+  get tileURL() {
+    return this.__._cachedUrl;
   }
-  toJSON(options) {
-    const data = super.toJSON(options);
-    const { fill, ...cleanData } = data;
-    return cleanData;
+  constructor(data) {
+    super(data);
   }
 };
 __decorateClass([

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "leafer-x-watermark",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "packageManager": "pnpm@10.14.0",
   "description": "Leafer 水印插件",
   "author": "XiaDeYu <1579883916@qq.com>",