@pooder/kit 5.3.0 → 5.4.0

package/src/extensions/white-ink.ts

@@ -8,7 +8,7 @@ import {
   ToolSessionService,
   WorkbenchService,
 } from "@pooder/core";
-import { CanvasService, RenderObjectSpec } from "../services";
+import { CanvasService, RenderLayoutRect, RenderObjectSpec } from "../services";
 import { computeSceneLayout, readSizeState } from "./sceneLayoutModel";
 
 export interface WhiteInkItem {
@@ -56,21 +56,21 @@ interface ImageSnapshot {
   height: number;
 }
 
-interface ImagePlacementState {
-  id: string;
-  sourceUrl: string;
-  committedUrl: string;
-  left: number;
-  top: number;
-  scale: number;
-  angle: number;
-}
-
-interface RenderSources {
-  whiteSrc: string;
-  coverSrc: string;
-  whiteScaleAdjustX: number;
-  whiteScaleAdjustY: number;
+interface ImagePlacementState {
+  id: string;
+  sourceUrl: string;
+  committedUrl: string;
+  left: number;
+  top: number;
+  scale: number;
+  angle: number;
+}
+
+interface RenderSources {
+  whiteSrc: string;
+  coverSrc: string;
+  whiteScaleAdjustX: number;
+  whiteScaleAdjustY: number;
 }
 
 interface UpsertWhiteInkOptions {
@@ -125,6 +125,10 @@ export class WhiteInkTool implements Extension {
   private previewImageVisible = true;
   private renderSeq = 0;
   private dirtyTrackerDisposable?: { dispose(): void };
+  private whiteSpecs: RenderObjectSpec[] = [];
+  private coverSpecs: RenderObjectSpec[] = [];
+  private overlaySpecs: RenderObjectSpec[] = [];
+  private renderProducerDisposable?: { dispose: () => void };
 
   activate(context: ExtensionContext) {
     this.context = context;
@@ -133,6 +137,18 @@ export class WhiteInkTool implements Extension {
       console.warn("CanvasService not found for WhiteInkTool");
       return;
     }
+    this.renderProducerDisposable?.dispose();
+    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
+      this.id,
+      () => ({
+        rootLayerSpecs: {
+          [WHITE_INK_OBJECT_LAYER_ID]: this.whiteSpecs,
+          [WHITE_INK_COVER_LAYER_ID]: this.coverSpecs,
+          [WHITE_INK_OVERLAY_LAYER_ID]: this.overlaySpecs,
+        },
+      }),
+      { priority: 260 },
+    );
 
     context.eventBus.on("tool:activated", this.onToolActivated);
     context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
@@ -223,6 +239,11 @@ export class WhiteInkTool implements Extension {
     this.dirtyTrackerDisposable = undefined;
     this.clearRenderedWhiteInks();
     this.applyImageVisibilityForWhiteInk(false);
+    this.renderProducerDisposable?.dispose();
+    this.renderProducerDisposable = undefined;
+    if (this.canvasService) {
+      void this.canvasService.flushRenderFromProducers();
+    }
 
     this.canvasService = undefined;
     this.context = undefined;
@@ -747,11 +768,21 @@ export class WhiteInkTool implements Extension {
       return { left: 0, top: 0, width: 0, height: 0 };
     }
 
-    return {
+    return this.canvasService.toSceneRect({
       left: layout.cutRect.left,
       top: layout.cutRect.top,
       width: layout.cutRect.width,
       height: layout.cutRect.height,
+    });
+  }
+
+  private toLayoutSceneRect(rect: FrameRect): RenderLayoutRect {
+    return {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height,
+      space: "scene",
     };
   }
 
@@ -786,15 +817,23 @@ export class WhiteInkTool implements Extension {
     const width = Number(obj?.width || 0);
     const height = Number(obj?.height || 0);
     this.rememberSourceSize(src, { width, height });
+    const sceneScale = this.canvasService?.getSceneScale() || 1;
+    const leftScreen = Number.isFinite(obj?.left) ? Number(obj.left) : 0;
+    const topScreen = Number.isFinite(obj?.top) ? Number(obj.top) : 0;
+    const scenePoint = this.canvasService
+      ? this.canvasService.toScenePoint({ x: leftScreen, y: topScreen })
+      : { x: leftScreen, y: topScreen };
 
     return {
       id: String(obj?.data?.id || "image"),
       src,
       element,
-      left: Number.isFinite(obj?.left) ? Number(obj.left) : 0,
-      top: Number.isFinite(obj?.top) ? Number(obj.top) : 0,
-      scaleX: Number.isFinite(obj?.scaleX) ? Number(obj.scaleX) : 1,
-      scaleY: Number.isFinite(obj?.scaleY) ? Number(obj.scaleY) : 1,
+      left: scenePoint.x,
+      top: scenePoint.y,
+      scaleX:
+        (Number.isFinite(obj?.scaleX) ? Number(obj.scaleX) : 1) / sceneScale,
+      scaleY:
+        (Number.isFinite(obj?.scaleY) ? Number(obj.scaleY) : 1) / sceneScale,
       angle: Number.isFinite(obj?.angle) ? Number(obj.angle) : 0,
       originX: typeof obj?.originX === "string" ? obj.originX : "center",
       originY: typeof obj?.originY === "string" ? obj.originY : "center",
@@ -807,116 +846,118 @@ export class WhiteInkTool implements Extension {
     };
   }
 
-  private getImagePlacementState(id?: string): ImagePlacementState | null {
-    const rawItems = this.getConfig<any[]>("image.items", []);
-    if (!Array.isArray(rawItems) || rawItems.length === 0) return null;
-
-    const matched =
-      (id
-        ? rawItems.find(
-            (item: any) =>
-              item &&
-              typeof item === "object" &&
-              typeof item.id === "string" &&
-              item.id === id,
-          )
-        : undefined) || rawItems[0];
-
-    if (!matched || typeof matched !== "object") return null;
-
-    const sourceUrl =
-      typeof matched.sourceUrl === "string" && matched.sourceUrl.length > 0
-        ? matched.sourceUrl
-        : typeof matched.url === "string"
-          ? matched.url
-          : "";
-    const committedUrl =
-      typeof matched.committedUrl === "string" ? matched.committedUrl : "";
-
-    return {
-      id:
-        typeof matched.id === "string" && matched.id.length > 0
-          ? matched.id
-          : id || "image",
-      sourceUrl,
-      committedUrl,
-      left: Number.isFinite(matched.left) ? Number(matched.left) : 0.5,
-      top: Number.isFinite(matched.top) ? Number(matched.top) : 0.5,
-      scale: Number.isFinite(matched.scale) ? Math.max(0.05, matched.scale) : 1,
-      angle: Number.isFinite(matched.angle) ? matched.angle : 0,
-    };
-  }
-
-  private shouldRestoreSnapshotToSource(
-    snapshot: ImageSnapshot,
-    placement: ImagePlacementState,
-  ): boolean {
-    if (!placement.sourceUrl || !placement.committedUrl) return false;
-    if (placement.sourceUrl === placement.committedUrl) return false;
-    return snapshot.src === placement.committedUrl;
-  }
-
-  private getCoverScale(frame: FrameRect, source: SourceSize): number {
-    const frameW = Math.max(1, frame.width);
-    const frameH = Math.max(1, frame.height);
-    const sourceW = Math.max(1, source.width);
-    const sourceH = Math.max(1, source.height);
-    return Math.max(frameW / sourceW, frameH / sourceH);
-  }
-
-  private async ensureSourceSize(sourceUrl: string): Promise<SourceSize | null> {
-    if (!sourceUrl) return null;
-    const cached = this.getSourceSize(sourceUrl);
-    if (cached) return cached;
-
-    try {
-      const image = await this.loadImageElement(sourceUrl);
-      const size = this.getElementSize(image);
-      if (!size) return null;
-      this.rememberSourceSize(sourceUrl, size);
-      return {
-        width: size.width,
-        height: size.height,
-      };
-    } catch {
-      return null;
-    }
-  }
-
-  private async resolveAlignedImageSnapshot(
-    snapshot: ImageSnapshot,
-  ): Promise<ImageSnapshot> {
-    const placement = this.getImagePlacementState(snapshot.id);
-    if (!placement) return snapshot;
-    if (!this.shouldRestoreSnapshotToSource(snapshot, placement)) {
-      return snapshot;
-    }
-
-    const frame = this.getFrameRect();
-    if (frame.width <= 0 || frame.height <= 0) {
-      return snapshot;
-    }
-
-    const sourceSize = await this.ensureSourceSize(placement.sourceUrl);
-    if (!sourceSize) return snapshot;
-
-    const coverScale = this.getCoverScale(frame, sourceSize);
-
-    return {
-      ...snapshot,
-      src: placement.sourceUrl,
-      element: undefined,
-      left: frame.left + placement.left * frame.width,
-      top: frame.top + placement.top * frame.height,
-      scaleX: coverScale * placement.scale,
-      scaleY: coverScale * placement.scale,
-      angle: placement.angle,
-      originX: "center",
-      originY: "center",
-      width: sourceSize.width,
-      height: sourceSize.height,
-    };
-  }
+  private getImagePlacementState(id?: string): ImagePlacementState | null {
+    const rawItems = this.getConfig<any[]>("image.items", []);
+    if (!Array.isArray(rawItems) || rawItems.length === 0) return null;
+
+    const matched =
+      (id
+        ? rawItems.find(
+            (item: any) =>
+              item &&
+              typeof item === "object" &&
+              typeof item.id === "string" &&
+              item.id === id,
+          )
+        : undefined) || rawItems[0];
+
+    if (!matched || typeof matched !== "object") return null;
+
+    const sourceUrl =
+      typeof matched.sourceUrl === "string" && matched.sourceUrl.length > 0
+        ? matched.sourceUrl
+        : typeof matched.url === "string"
+          ? matched.url
+          : "";
+    const committedUrl =
+      typeof matched.committedUrl === "string" ? matched.committedUrl : "";
+
+    return {
+      id:
+        typeof matched.id === "string" && matched.id.length > 0
+          ? matched.id
+          : id || "image",
+      sourceUrl,
+      committedUrl,
+      left: Number.isFinite(matched.left) ? Number(matched.left) : 0.5,
+      top: Number.isFinite(matched.top) ? Number(matched.top) : 0.5,
+      scale: Number.isFinite(matched.scale) ? Math.max(0.05, matched.scale) : 1,
+      angle: Number.isFinite(matched.angle) ? matched.angle : 0,
+    };
+  }
+
+  private shouldRestoreSnapshotToSource(
+    snapshot: ImageSnapshot,
+    placement: ImagePlacementState,
+  ): boolean {
+    if (!placement.sourceUrl || !placement.committedUrl) return false;
+    if (placement.sourceUrl === placement.committedUrl) return false;
+    return snapshot.src === placement.committedUrl;
+  }
+
+  private getCoverScale(frame: FrameRect, source: SourceSize): number {
+    const frameW = Math.max(1, frame.width);
+    const frameH = Math.max(1, frame.height);
+    const sourceW = Math.max(1, source.width);
+    const sourceH = Math.max(1, source.height);
+    return Math.max(frameW / sourceW, frameH / sourceH);
+  }
+
+  private async ensureSourceSize(
+    sourceUrl: string,
+  ): Promise<SourceSize | null> {
+    if (!sourceUrl) return null;
+    const cached = this.getSourceSize(sourceUrl);
+    if (cached) return cached;
+
+    try {
+      const image = await this.loadImageElement(sourceUrl);
+      const size = this.getElementSize(image);
+      if (!size) return null;
+      this.rememberSourceSize(sourceUrl, size);
+      return {
+        width: size.width,
+        height: size.height,
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  private async resolveAlignedImageSnapshot(
+    snapshot: ImageSnapshot,
+  ): Promise<ImageSnapshot> {
+    const placement = this.getImagePlacementState(snapshot.id);
+    if (!placement) return snapshot;
+    if (!this.shouldRestoreSnapshotToSource(snapshot, placement)) {
+      return snapshot;
+    }
+
+    const frame = this.getFrameRect();
+    if (frame.width <= 0 || frame.height <= 0) {
+      return snapshot;
+    }
+
+    const sourceSize = await this.ensureSourceSize(placement.sourceUrl);
+    if (!sourceSize) return snapshot;
+
+    const coverScale = this.getCoverScale(frame, sourceSize);
+
+    return {
+      ...snapshot,
+      src: placement.sourceUrl,
+      element: undefined,
+      left: frame.left + placement.left * frame.width,
+      top: frame.top + placement.top * frame.height,
+      scaleX: coverScale * placement.scale,
+      scaleY: coverScale * placement.scale,
+      angle: placement.angle,
+      originX: "center",
+      originY: "center",
+      width: sourceSize.width,
+      height: sourceSize.height,
+    };
+  }
   private getImageElementFromObject(obj: any): any {
     if (!obj) return null;
     if (typeof obj.getElement === "function") {
@@ -1025,8 +1066,11 @@ export class WhiteInkTool implements Extension {
     if (!this.isToolActive || !this.canvasService) return [];
     if (frame.width <= 0 || frame.height <= 0) return [];
 
-    const canvasW = this.canvasService.canvas.width || 0;
-    const canvasH = this.canvasService.canvas.height || 0;
+    const viewport = this.canvasService.getSceneViewportRect();
+    const canvasW = viewport.width || 0;
+    const canvasH = viewport.height || 0;
+    const canvasLeft = viewport.left || 0;
+    const canvasTop = viewport.top || 0;
     const strokeColor =
       this.getConfig<string>("image.frame.strokeColor", "#808080") || "#808080";
     const strokeWidthRaw = Number(
@@ -1048,23 +1092,44 @@ export class WhiteInkTool implements Extension {
     const dashLength = Number.isFinite(dashLengthRaw)
       ? Math.max(1, dashLengthRaw)
       : 8;
+    const strokeWidthScene = this.canvasService.toSceneLength(strokeWidth);
+    const dashLengthScene = this.canvasService.toSceneLength(dashLength);
 
-    const frameLeft = Math.max(0, Math.min(canvasW, frame.left));
-    const frameTop = Math.max(0, Math.min(canvasH, frame.top));
+    const frameLeft = Math.max(
+      canvasLeft,
+      Math.min(canvasLeft + canvasW, frame.left),
+    );
+    const frameTop = Math.max(
+      canvasTop,
+      Math.min(canvasTop + canvasH, frame.top),
+    );
     const frameRight = Math.max(
       frameLeft,
-      Math.min(canvasW, frame.left + frame.width),
+      Math.min(canvasLeft + canvasW, frame.left + frame.width),
     );
     const frameBottom = Math.max(
       frameTop,
-      Math.min(canvasH, frame.top + frame.height),
+      Math.min(canvasTop + canvasH, frame.top + frame.height),
     );
     const visibleFrameH = Math.max(0, frameBottom - frameTop);
 
-    const topH = frameTop;
-    const bottomH = Math.max(0, canvasH - frameBottom);
-    const leftW = frameLeft;
-    const rightW = Math.max(0, canvasW - frameRight);
+    const topH = Math.max(0, frameTop - canvasTop);
+    const bottomH = Math.max(0, canvasTop + canvasH - frameBottom);
+    const leftW = Math.max(0, frameLeft - canvasLeft);
+    const rightW = Math.max(0, canvasLeft + canvasW - frameRight);
+    const viewportRect = this.toLayoutSceneRect({
+      left: canvasLeft,
+      top: canvasTop,
+      width: canvasW,
+      height: canvasH,
+    });
+    const visibleFrameBandRect = this.toLayoutSceneRect({
+      left: canvasLeft,
+      top: frameTop,
+      width: canvasW,
+      height: visibleFrameH,
+    });
+    const frameRect = this.toLayoutSceneRect(frame);
 
     const maskSpecs: RenderObjectSpec[] = [
       {
@@ -1075,13 +1140,17 @@ export class WhiteInkTool implements Extension {
           layerId: WHITE_INK_OVERLAY_LAYER_ID,
           type: "white-ink-mask",
         },
-        props: {
-          left: canvasW / 2,
-          top: topH / 2,
-          width: canvasW,
+        layout: {
+          reference: "custom",
+          referenceRect: viewportRect,
+          alignX: "start",
+          alignY: "start",
+          width: "100%",
           height: topH,
-          originX: "center",
-          originY: "center",
+        },
+        props: {
+          originX: "left",
+          originY: "top",
           fill: outerBackground,
           selectable: false,
           evented: false,
@@ -1096,13 +1165,17 @@ export class WhiteInkTool implements Extension {
           layerId: WHITE_INK_OVERLAY_LAYER_ID,
           type: "white-ink-mask",
         },
-        props: {
-          left: canvasW / 2,
-          top: frameBottom + bottomH / 2,
-          width: canvasW,
+        layout: {
+          reference: "custom",
+          referenceRect: viewportRect,
+          alignX: "start",
+          alignY: "end",
+          width: "100%",
           height: bottomH,
-          originX: "center",
-          originY: "center",
+        },
+        props: {
+          originX: "left",
+          originY: "top",
           fill: outerBackground,
           selectable: false,
           evented: false,
@@ -1117,13 +1190,17 @@ export class WhiteInkTool implements Extension {
           layerId: WHITE_INK_OVERLAY_LAYER_ID,
           type: "white-ink-mask",
         },
-        props: {
-          left: leftW / 2,
-          top: frameTop + visibleFrameH / 2,
+        layout: {
+          reference: "custom",
+          referenceRect: visibleFrameBandRect,
+          alignX: "start",
+          alignY: "start",
           width: leftW,
-          height: visibleFrameH,
-          originX: "center",
-          originY: "center",
+          height: "100%",
+        },
+        props: {
+          originX: "left",
+          originY: "top",
           fill: outerBackground,
           selectable: false,
           evented: false,
@@ -1138,13 +1215,17 @@ export class WhiteInkTool implements Extension {
           layerId: WHITE_INK_OVERLAY_LAYER_ID,
           type: "white-ink-mask",
         },
-        props: {
-          left: frameRight + rightW / 2,
-          top: frameTop + visibleFrameH / 2,
+        layout: {
+          reference: "custom",
+          referenceRect: visibleFrameBandRect,
+          alignX: "end",
+          alignY: "start",
           width: rightW,
-          height: visibleFrameH,
-          originX: "center",
-          originY: "center",
+          height: "100%",
+        },
+        props: {
+          originX: "left",
+          originY: "top",
           fill: outerBackground,
           selectable: false,
           evented: false,
@@ -1163,17 +1244,21 @@ export class WhiteInkTool implements Extension {
           layerId: WHITE_INK_OVERLAY_LAYER_ID,
           type: "white-ink-frame",
         },
+        layout: {
+          reference: "custom",
+          referenceRect: frameRect,
+          alignX: "start",
+          alignY: "start",
+          width: "100%",
+          height: "100%",
+        },
         props: {
-          left: frame.left + frame.width / 2,
-          top: frame.top + frame.height / 2,
-          width: frame.width,
-          height: frame.height,
-          originX: "center",
-          originY: "center",
+          originX: "left",
+          originY: "top",
           fill: innerBackground,
           stroke: strokeColor,
-          strokeWidth,
-          strokeDashArray: [dashLength, dashLength],
+          strokeWidth: strokeWidthScene,
+          strokeDashArray: [dashLengthScene, dashLengthScene],
           selectable: false,
           evented: false,
           excludeFromExport: true,
@@ -1262,30 +1347,22 @@ export class WhiteInkTool implements Extension {
       )
       .filter((index: number) => index >= 0);
 
-    let whiteInsertIndex = imageIndexes.length
-      ? Math.min(...imageIndexes)
-      : this.resolveDefaultInsertIndex(currentObjects);
-
-    whiteObjects.forEach((obj) => {
-      canvas.moveObjectTo(obj, whiteInsertIndex);
-      whiteInsertIndex += 1;
-    });
-
-    const afterWhiteObjects = canvas.getObjects();
-    const afterImageIndexes = afterWhiteObjects
-      .map((obj: any, index: number) =>
-        obj?.data?.layerId === IMAGE_OBJECT_LAYER_ID ? index : -1,
-      )
-      .filter((index: number) => index >= 0);
-
-    let coverInsertIndex = afterImageIndexes.length
-      ? Math.max(...afterImageIndexes) + 1
-      : whiteInsertIndex;
-
-    coverObjects.forEach((obj) => {
-      canvas.moveObjectTo(obj, coverInsertIndex);
-      coverInsertIndex += 1;
-    });
+    let whiteInsertIndex = imageIndexes.length
+      ? Math.min(...imageIndexes)
+      : this.resolveDefaultInsertIndex(currentObjects);
+
+    let coverInsertIndex = whiteInsertIndex;
+
+    coverObjects.forEach((obj) => {
+      canvas.moveObjectTo(obj, coverInsertIndex);
+      coverInsertIndex += 1;
+    });
+
+    whiteInsertIndex = coverInsertIndex;
+    whiteObjects.forEach((obj) => {
+      canvas.moveObjectTo(obj, whiteInsertIndex);
+      whiteInsertIndex += 1;
+    });
 
     frameObjects.forEach((obj) => canvas.bringObjectToFront(obj));
 
@@ -1294,31 +1371,16 @@ export class WhiteInkTool implements Extension {
       .filter((obj: any) => obj?.data?.layerId === IMAGE_OVERLAY_LAYER_ID)
       .forEach((obj: any) => canvas.bringObjectToFront(obj));
 
-    const dielineOverlay = this.canvasService.getLayer("dieline-overlay");
-    if (dielineOverlay) {
-      canvas.bringObjectToFront(dielineOverlay as any);
-    }
-
-    const rulerOverlay = this.canvasService.getLayer("ruler-overlay");
-    if (rulerOverlay) {
-      canvas.bringObjectToFront(rulerOverlay as any);
-    }
+    this.canvasService.bringLayerToFront("dieline-overlay");
+    this.canvasService.bringLayerToFront("ruler-overlay");
   }
 
   private clearRenderedWhiteInks() {
     if (!this.canvasService) return;
-    void this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_OBJECT_LAYER_ID,
-      [],
-    );
-    void this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_COVER_LAYER_ID,
-      [],
-    );
-    void this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_OVERLAY_LAYER_ID,
-      [],
-    );
+    this.whiteSpecs = [];
+    this.coverSpecs = [];
+    this.overlaySpecs = [];
+    this.canvasService.requestRenderFromProducers();
   }
 
   private purgeSourceCaches(item?: WhiteInkItem) {
@@ -1397,22 +1459,14 @@ export class WhiteInkTool implements Extension {
       }
     }
 
-    await this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_OBJECT_LAYER_ID,
-      whiteSpecs,
-    );
+    this.whiteSpecs = whiteSpecs;
     if (seq !== this.renderSeq) return;
 
-    await this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_COVER_LAYER_ID,
-      coverSpecs,
-    );
+    this.coverSpecs = coverSpecs;
     if (seq !== this.renderSeq) return;
 
-    await this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_OVERLAY_LAYER_ID,
-      frameSpecs,
-    );
+    this.overlaySpecs = frameSpecs;
+    await this.canvasService.flushRenderFromProducers();
     if (seq !== this.renderSeq) return;
 
     this.syncZOrder();
@@ -1522,4 +1576,3 @@ export class WhiteInkTool implements Extension {
     });
   }
 }
-