@pooder/kit 5.3.1 → 6.0.0

package/src/extensions/sceneLayoutModel.ts

@@ -2,6 +2,13 @@ import type { ConfigurationService } from "@pooder/core";
 import type { CanvasService } from "../services";
 import { Coordinate, Unit } from "../coordinate";
 import { parseLengthToMm } from "../units";
+import {
+  DEFAULT_DIELINE_SHAPE,
+  DEFAULT_DIELINE_SHAPE_STYLE,
+  normalizeShapeStyle,
+  normalizeDielineShape,
+} from "./dielineShape";
+import type { DielineShape, DielineShapeStyle } from "./dielineShape";
 
 export type SizeConstraintMode = "free" | "lockAspect" | "equal";
 export type CutMode = "trim" | "outset" | "inset";
@@ -45,9 +52,9 @@ export interface SceneLayoutSnapshot {
 }
 
 export interface SceneGeometrySnapshot {
-  shape: "rect" | "circle" | "ellipse" | "custom";
-  unit: "mm";
-  displayUnit: Unit;
+  shape: DielineShape;
+  shapeStyle: DielineShapeStyle;
+  unit: "px";
   x: number;
   y: number;
   width: number;
@@ -331,11 +338,16 @@ export function buildSceneGeometry(
   const sourceHeight = Number(
     configService.get("dieline.customSourceHeightPx", 0),
   );
+  const shapeStyle = normalizeShapeStyle(
+    configService.get("dieline.shapeStyle", DEFAULT_DIELINE_SHAPE_STYLE),
+  );
 
   return {
-    shape: configService.get("dieline.shape", "rect"),
-    unit: "mm",
-    displayUnit: normalizeUnit(configService.get("size.unit", "mm")),
+    shape: normalizeDielineShape(
+      configService.get("dieline.shape", DEFAULT_DIELINE_SHAPE),
+    ),
+    shapeStyle,
+    unit: "px",
     x: layout.trimRect.centerX,
     y: layout.trimRect.centerY,
     width: layout.trimRect.width,

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 {
@@ -88,7 +88,6 @@ const WHITE_INK_OBJECT_LAYER_ID = "white-ink.user";
 const WHITE_INK_COVER_LAYER_ID = "white-ink.cover";
 const WHITE_INK_OVERLAY_LAYER_ID = "white-ink.overlay";
 const IMAGE_OBJECT_LAYER_ID = "image.user";
-const IMAGE_OVERLAY_LAYER_ID = "image-overlay";
 
 const WHITE_INK_DEBUG_KEY = "whiteInk.debug";
 const WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY = "whiteInk.previewImageVisible";
@@ -125,6 +124,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 +136,33 @@ export class WhiteInkTool implements Extension {
       console.warn("CanvasService not found for WhiteInkTool");
       return;
     }
+    this.renderProducerDisposable?.dispose();
+    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
+      this.id,
+      () => ({
+        passes: [
+          {
+            id: WHITE_INK_COVER_LAYER_ID,
+            stack: 220,
+            order: 0,
+            objects: this.coverSpecs,
+          },
+          {
+            id: WHITE_INK_OBJECT_LAYER_ID,
+            stack: 221,
+            order: 0,
+            objects: this.whiteSpecs,
+          },
+          {
+            id: WHITE_INK_OVERLAY_LAYER_ID,
+            stack: 790,
+            order: 0,
+            objects: this.overlaySpecs,
+          },
+        ],
+      }),
+      { priority: 260 },
+    );
 
     context.eventBus.on("tool:activated", this.onToolActivated);
     context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
@@ -222,7 +252,11 @@ export class WhiteInkTool implements Extension {
     this.dirtyTrackerDisposable?.dispose();
     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 +781,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 +830,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",
@@ -864,7 +916,9 @@ export class WhiteInkTool implements Extension {
     return Math.max(frameW / sourceW, frameH / sourceH);
   }
 
-  private async ensureSourceSize(sourceUrl: string): Promise<SourceSize | null> {
+  private async ensureSourceSize(
+    sourceUrl: string,
+  ): Promise<SourceSize | null> {
     if (!sourceUrl) return null;
     const cached = this.getSourceSize(sourceUrl);
     if (cached) return cached;
@@ -1025,8 +1079,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 +1105,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 +1153,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 +1178,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 +1203,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 +1228,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 +1257,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,
@@ -1181,25 +1279,6 @@ export class WhiteInkTool implements Extension {
       },
     ];
   }
-
-  private applyImageVisibilityForWhiteInk(previewActive: boolean) {
-    if (!this.canvasService) return;
-    const visible = !previewActive;
-    let changed = false;
-
-    this.canvasService.canvas.getObjects().forEach((obj: any) => {
-      if (obj?.data?.layerId !== IMAGE_OBJECT_LAYER_ID) return;
-      if (obj.visible === visible) return;
-      obj.set({ visible });
-      obj.setCoords?.();
-      changed = true;
-    });
-
-    if (changed) {
-      this.canvasService.requestRenderAll();
-    }
-  }
-
   private resolveRenderItems(): WhiteInkItem[] {
     if (this.isToolActive) {
       return this.cloneItems(this.workingItems);
@@ -1232,93 +1311,12 @@ export class WhiteInkTool implements Extension {
     };
   }
 
-  private resolveDefaultInsertIndex(objects: any[]): number {
-    if (!this.canvasService) return 0;
-    const backgroundLayer = this.canvasService.getLayer("background");
-    if (!backgroundLayer) return 0;
-    const bgIndex = objects.indexOf(backgroundLayer as any);
-    if (bgIndex < 0) return 0;
-    return bgIndex + 1;
-  }
-
-  private syncZOrder() {
-    if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-
-    const whiteObjects = this.canvasService.getRootLayerObjects(
-      WHITE_INK_OBJECT_LAYER_ID,
-    ) as any[];
-    const coverObjects = this.canvasService.getRootLayerObjects(
-      WHITE_INK_COVER_LAYER_ID,
-    ) as any[];
-    const frameObjects = this.canvasService.getRootLayerObjects(
-      WHITE_INK_OVERLAY_LAYER_ID,
-    ) as any[];
-
-    const currentObjects = canvas.getObjects();
-    const imageIndexes = currentObjects
-      .map((obj: any, index: number) =>
-        obj?.data?.layerId === IMAGE_OBJECT_LAYER_ID ? index : -1,
-      )
-      .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;
-    });
-
-    frameObjects.forEach((obj) => canvas.bringObjectToFront(obj));
-
-    canvas
-      .getObjects()
-      .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);
-    }
-  }
-
   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) {
@@ -1349,7 +1347,6 @@ export class WhiteInkTool implements Extension {
     const seq = ++this.renderSeq;
 
     const previewActive = this.isPreviewActive();
-    this.applyImageVisibilityForWhiteInk(previewActive);
 
     const frame = this.getFrameRect();
     const frameSpecs = this.buildFrameSpecs(frame);
@@ -1397,25 +1394,15 @@ 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();
     this.canvasService.requestRenderAll();
   }
 
@@ -1522,4 +1509,3 @@ export class WhiteInkTool implements Extension {
     });
   }
 }
-