leafer-x-watermark 2.0.0 → 3.1.0

package/README.md

@@ -129,7 +129,7 @@ app.tree.add(watermark)
 - **WatermarkAsync**: 异步生成，适用于包含外部资源的图形。
 - **WatermarkURL**: 直接使用 `tileURL` 属性设置图片 URL。
 
-继承自 Leafer UI 的 [Rect](https://www.leaferjs.com/ui/display/Rect.html) 组件，拥有所有 Rect 属性，并额外支持：
+继承自 Leafer UI 的 [Rect](https://www.leaferjs.com/ui/reference/display/Rect.html) 组件，拥有所有 Rect 属性，并额外支持：
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { IRectData, IUI, IRectInputData, IObject, IJSONOptions } from '@leafer-ui/interface';
-import { RectData, Rect } from '@leafer-ui/core';
+import { RectData, Rect, PropertyEvent } from '@leafer-ui/core';
 
 type IStaggerType = 'x' | 'y';
 interface IStaggerData {
@@ -91,7 +91,9 @@ declare abstract class ProcessorDataBase extends RectData implements IProcessDat
 
 declare abstract class WatermarkBase<TConstructorData = IWatermarkInputData> extends Rect<TConstructorData> implements IWatermark {
     __: ProcessorDataBase;
-    get tileURL(): string;
+    constructor(data?: TConstructorData);
+    syncParentSize(e?: PropertyEvent): void;
+    destroy(): void;
 }
 
 declare class ProcessorDataAsync extends ProcessorDataBase {
@@ -108,6 +110,7 @@ declare class WatermarkAsync<TConstructorData = IWatermarkInputData> extends Wat
     tileGap: number | ITileGap;
     tileStagger: IStagger;
     tileRotation: number;
+    get tileURL(): string;
 }
 
 declare class ProcessorData$1 extends ProcessorDataBase {
@@ -124,13 +127,14 @@ declare class WatermarkSync<TConstructorData = IWatermarkInputData> extends Wate
     tileGap: number | ITileGap;
     tileStagger: IStagger;
     tileRotation: number;
+    get tileURL(): string;
 }
 
 declare class ProcessorData extends ProcessorDataBase {
     __leaf: WatermarkURL;
     regenerateImage(): void;
 }
-declare class WatermarkURL<TConstructorData = IWatermarkInputData> extends Rect<TConstructorData> implements IWatermark {
+declare class WatermarkURL<TConstructorData = IWatermarkInputData> extends WatermarkBase<TConstructorData> {
     get __tag(): string;
     __: ProcessorData;
     tileURL?: string;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Debug, RectData, isObject, UICreator, Rect, dataProcessor, boundsType, registerUI, Plugin, Creator, MatrixHelper, MathHelper, PaintImage, Platform } from '@leafer-ui/core';
+import { Debug, RectData, isObject, UICreator, Rect, PropertyEvent, dataProcessor, boundsType, registerUI, Plugin, Creator, MatrixHelper, MathHelper, PaintImage, Platform } from '@leafer-ui/core';
 
 const console = Debug.get("leafer-x-watermark");
 class ProcessorDataBase extends RectData {
@@ -22,6 +22,8 @@ class ProcessorDataBase extends RectData {
   setTileMode(value) {
     this._tileMode = value;
     this.updateFill();
+    if (value && this.__leaf.syncParentSize)
+      this.__leaf.syncParentSize();
   }
   setTileSize(value) {
     this._tileSize = value;
@@ -125,8 +127,29 @@ class ProcessorDataBase extends RectData {
 }
 
 class WatermarkBase extends Rect {
-  get tileURL() {
-    return this.__._cachedUrl;
+  constructor(data) {
+    super(data);
+    this.syncParentSize = this.syncParentSize.bind(this);
+    this.waitParent(() => {
+      this.parent.on(PropertyEvent.CHANGE, this.syncParentSize);
+      this.syncParentSize();
+    });
+  }
+  syncParentSize(e) {
+    if (e && !["width", "height"].includes(e.attrName)) {
+      return;
+    }
+    if (this.__._tileMode && this.parent) {
+      this.width = this.parent.width;
+      this.height = this.parent.height;
+      this.y = this.x = 0;
+    }
+  }
+  destroy() {
+    if (this.parent) {
+      this.parent.off(PropertyEvent.CHANGE, this.syncParentSize);
+    }
+    super.destroy();
   }
 }
 
@@ -166,6 +189,9 @@ let WatermarkAsync = class extends WatermarkBase {
   get __tag() {
     return "WatermarkAsync";
   }
+  get tileURL() {
+    return this.__._cachedUrl;
+  }
 };
 __decorateClass$2([
   dataProcessor(ProcessorDataAsync)
@@ -235,6 +261,9 @@ let WatermarkSync = class extends WatermarkBase {
   get __tag() {
     return "WatermarkSync";
   }
+  get tileURL() {
+    return this.__._cachedUrl;
+  }
 };
 __decorateClass$1([
   dataProcessor(ProcessorData$1)
@@ -303,7 +332,7 @@ class ProcessorData extends ProcessorDataBase {
     });
   }
 }
-let WatermarkURL = class extends Rect {
+let WatermarkURL = class extends WatermarkBase {
   get __tag() {
     return "WatermarkURL";
   }
@@ -336,13 +365,48 @@ WatermarkURL = __decorateClass([
 const { get, scale, copy } = MatrixHelper;
 const { getFloorScale } = MathHelper;
 const { abs } = Math;
-const originalCreatePattern = PaintImage.createPattern.bind(PaintImage);
+const ORIGINAL_CREATE_PATTERN = Symbol.for("leafer-x-watermark:PaintImage.createPattern.original");
+const STAGGER_PATTERN_ID = Symbol.for("leafer-x-watermark:paint.staggerPatternId");
+function ensureOriginalCreatePattern() {
+  const anyPaintImage = PaintImage;
+  if (!anyPaintImage[ORIGINAL_CREATE_PATTERN]) {
+    anyPaintImage[ORIGINAL_CREATE_PATTERN] = PaintImage.createPattern.bind(PaintImage);
+  }
+  return anyPaintImage[ORIGINAL_CREATE_PATTERN];
+}
+const staggerCanvasCache = /* @__PURE__ */ new WeakMap();
 function normalizeStagger(stagger) {
   if (typeof stagger === "number") {
     return { type: "x", offset: stagger };
   }
   return { type: stagger.type || "x", offset: stagger.offset || 0 };
 }
+function isSameStaggerParams(a, b) {
+  return a[0] === b[0] && a[1] === b[1] && a[2] === b[2] && a[3] === b[3] && a[4] === b[4] && a[5] === b[5] && a[6] === b[6] && a[7] === b[7];
+}
+function getStaggerCanvas(image, width, height, xGap, yGap, stagger, opacity, smooth) {
+  const cached = staggerCanvasCache.get(image);
+  if (cached) {
+    const nextParams = [
+      width,
+      height,
+      xGap,
+      yGap,
+      stagger.type,
+      stagger.offset,
+      opacity,
+      smooth
+    ];
+    if (isSameStaggerParams(cached.params, nextParams))
+      return cached.canvas;
+  }
+  const canvas = createStaggerCanvas(image, width, height, xGap, yGap, stagger, opacity, smooth);
+  staggerCanvasCache.set(image, {
+    params: [width, height, xGap, yGap, stagger.type, stagger.offset, opacity, smooth],
+    canvas
+  });
+  return canvas;
+}
 function createStaggerCanvas(image, imgWidth, imgHeight, xGap, yGap, stagger, opacity, smooth) {
   const unitWidth = imgWidth + xGap;
   const unitHeight = imgHeight + yGap;
@@ -378,8 +442,8 @@ function createStaggerCanvas(image, imgWidth, imgHeight, xGap, yGap, stagger, op
   return canvas;
 }
 function createPatternWithStagger(paint, ui, canvas, renderOptions) {
-  const originPaint = paint.originPaint;
-  const rawStagger = originPaint?.stagger;
+  const originalCreatePattern = ensureOriginalCreatePattern();
+  const rawStagger = paint.data?.stagger ?? paint.originPaint?.stagger;
   if (rawStagger === void 0 || rawStagger === 0) {
     originalCreatePattern(paint, ui, canvas, renderOptions);
     return;
@@ -390,59 +454,62 @@ function createPatternWithStagger(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;
+  const baseId = `${scaleX}-${scaleY}`;
+  const staggerId = `${baseId}-stagger-${stagger.type}-${stagger.offset}`;
+  const anyPaint = paint;
+  if (ui.destroyed)
+    return;
+  if (paint.patternId === baseId && anyPaint[STAGGER_PATTERN_ID] === staggerId)
+    return;
+  if (Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)
+    return;
+  const { image, data } = paint;
+  const { transform, gap } = data;
+  const fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
+  if (fixScale) {
+    scaleX *= fixScale;
+    scaleY *= fixScale;
+  }
+  let imageMatrix;
+  let xGap = 0;
+  let yGap = 0;
+  let { width, height } = image;
+  width *= scaleX;
+  height *= scaleY;
+  if (gap) {
+    xGap = gap.x * scaleX / abs(data.scaleX || 1);
+    yGap = gap.y * scaleY / abs(data.scaleY || 1);
+  }
+  if (transform || scaleX !== 1 || scaleY !== 1) {
+    scaleX *= getFloorScale(width + (xGap || 0));
+    scaleY *= getFloorScale(height + (yGap || 0));
+    imageMatrix = get();
+    if (transform)
+      copy(imageMatrix, transform);
+    scale(imageMatrix, 1 / scaleX, 1 / scaleY);
   }
+  const imageCanvas = getStaggerCanvas(
+    image,
+    width,
+    height,
+    xGap,
+    yGap,
+    stagger,
+    data.opacity,
+    ui.leafer?.config.smooth
+  );
+  const pattern = image.getPattern(
+    imageCanvas,
+    data.repeat || (Platform.origin.noRepeat || "no-repeat"),
+    imageMatrix,
+    paint
+  );
+  paint.style = pattern;
+  paint.patternId = baseId;
+  anyPaint[STAGGER_PATTERN_ID] = staggerId;
 }
 function installStaggerPattern() {
+  ensureOriginalCreatePattern();
   PaintImage.createPattern = createPatternWithStagger;
 }
 function processStaggerData(paint) {

package/package.json

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