@pooder/kit 5.3.1 → 6.0.0

package/src/extensions/dieline.ts

@@ -7,13 +7,19 @@ import {
   ConfigurationService,
 } from "@pooder/core";
 import { Canvas as FabricCanvas, Path, Pattern } from "fabric";
-import { CanvasService } from "../services";
+import { CanvasService, RenderEffectSpec, RenderObjectSpec } from "../services";
 import { ImageTracer } from "./tracer";
-import { Unit } from "../coordinate";
 import { parseLengthToMm } from "../units";
+import {
+  DEFAULT_DIELINE_SHAPE,
+  DEFAULT_DIELINE_SHAPE_STYLE,
+  DIELINE_SHAPES,
+  normalizeShapeStyle,
+  normalizeDielineShape,
+} from "./dielineShape";
+import type { DielineShape, DielineShapeStyle } from "./dielineShape";
 import {
   generateDielinePath,
-  generateMaskPath,
   generateBleedZonePath,
   DielineFeature,
 } from "./geometry";
@@ -24,9 +30,9 @@ import {
 } from "./sceneLayoutModel";
 
 export interface DielineGeometry {
-  shape: "rect" | "circle" | "ellipse" | "custom";
-  unit: "mm";
-  displayUnit: Unit;
+  shape: DielineShape;
+  shapeStyle: DielineShapeStyle;
+  unit: "px";
   x: number;
   y: number;
   width: number;
@@ -49,8 +55,8 @@ export interface LineStyle {
 }
 
 export interface DielineState {
-  displayUnit: Unit;
-  shape: "rect" | "circle" | "ellipse" | "custom";
+  shape: DielineShape;
+  shapeStyle: DielineShapeStyle;
   width: number;
   height: number;
   radius: number;
@@ -59,7 +65,6 @@ export interface DielineState {
   mainLine: LineStyle;
   offsetLine: LineStyle;
   insideColor: string;
-  outsideColor: string;
   showBleedLines: boolean;
   features: DielineFeature[];
   pathData?: string;
@@ -68,6 +73,7 @@ export interface DielineState {
 }
 
 const IMAGE_OBJECT_LAYER_ID = "image.user";
+const DIELINE_LAYER_ID = "dieline-overlay";
 
 export class DielineTool implements Extension {
   id = "pooder.kit.dieline";
@@ -76,8 +82,8 @@ export class DielineTool implements Extension {
   };
 
   private state: DielineState = {
-    displayUnit: "mm",
-    shape: "rect",
+    shape: DEFAULT_DIELINE_SHAPE,
+    shapeStyle: { ...DEFAULT_DIELINE_SHAPE_STYLE },
     width: 500,
     height: 500,
     radius: 0,
@@ -96,13 +102,16 @@ export class DielineTool implements Extension {
       style: "solid",
     },
     insideColor: "rgba(0,0,0,0)",
-    outsideColor: "#ffffff",
     showBleedLines: true,
     features: [],
   };
 
   private canvasService?: CanvasService;
   private context?: ExtensionContext;
+  private specs: RenderObjectSpec[] = [];
+  private effects: RenderEffectSpec[] = [];
+  private renderSeq = 0;
+  private renderProducerDisposable?: { dispose: () => void };
   private onCanvasResized = () => {
     this.updateDieline();
   };
@@ -118,7 +127,15 @@ export class DielineTool implements Extension {
         Object.assign(this.state.offsetLine, options.offsetLine);
         delete options.offsetLine;
       }
+      if (options.shapeStyle) {
+        this.state.shapeStyle = normalizeShapeStyle(
+          options.shapeStyle,
+          this.state.shapeStyle,
+        );
+        delete options.shapeStyle;
+      }
       Object.assign(this.state, options);
+      this.state.shape = normalizeDielineShape(options.shape, this.state.shape);
     }
   }
 
@@ -129,6 +146,30 @@ export class DielineTool implements Extension {
       console.warn("CanvasService not found for DielineTool");
       return;
     }
+    this.renderProducerDisposable?.dispose();
+    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
+      this.id,
+      () => ({
+        passes: [
+          {
+            id: DIELINE_LAYER_ID,
+            stack: 700,
+            order: 0,
+            replace: true,
+            visibility: {
+              op: "not",
+              expr: {
+                op: "activeToolIn",
+                ids: ["pooder.kit.image", "pooder.kit.white-ink"],
+              },
+            },
+            effects: this.effects,
+            objects: this.specs,
+          },
+        ],
+      }),
+      { priority: 250 },
+    );
 
     const configService = context.services.get<ConfigurationService>(
       "ConfigurationService",
@@ -137,8 +178,14 @@ export class DielineTool implements Extension {
       // Load initial config
       const s = this.state;
       const sizeState = readSizeState(configService);
-      s.displayUnit = sizeState.unit;
-      s.shape = configService.get("dieline.shape", s.shape);
+      s.shape = normalizeDielineShape(
+        configService.get("dieline.shape", s.shape),
+        s.shape,
+      );
+      s.shapeStyle = normalizeShapeStyle(
+        configService.get("dieline.shapeStyle", s.shapeStyle),
+        s.shapeStyle,
+      );
       s.width = sizeState.actualWidthMm;
       s.height = sizeState.actualHeightMm;
       s.radius = parseLengthToMm(
@@ -187,10 +234,6 @@ export class DielineTool implements Extension {
       );
 
       s.insideColor = configService.get("dieline.insideColor", s.insideColor);
-      s.outsideColor = configService.get(
-        "dieline.outsideColor",
-        s.outsideColor,
-      );
       s.showBleedLines = configService.get(
         "dieline.showBleedLines",
         s.showBleedLines,
@@ -216,7 +259,6 @@ export class DielineTool implements Extension {
       configService.onAnyChange((e: { key: string; value: any }) => {
         if (e.key.startsWith("size.")) {
           const nextSize = readSizeState(configService);
-          s.displayUnit = nextSize.unit;
           s.width = nextSize.actualWidthMm;
           s.height = nextSize.actualHeightMm;
           s.padding = nextSize.viewPadding;
@@ -233,7 +275,10 @@ export class DielineTool implements Extension {
         if (e.key.startsWith("dieline.")) {
           switch (e.key) {
             case "dieline.shape":
-              s.shape = e.value;
+              s.shape = normalizeDielineShape(e.value, s.shape);
+              break;
+            case "dieline.shapeStyle":
+              s.shapeStyle = normalizeShapeStyle(e.value, s.shapeStyle);
               break;
             case "dieline.radius":
               s.radius = parseLengthToMm(e.value, "mm");
@@ -268,9 +313,6 @@ export class DielineTool implements Extension {
             case "dieline.insideColor":
               s.insideColor = e.value;
               break;
-            case "dieline.outsideColor":
-              s.outsideColor = e.value;
-              break;
             case "dieline.showBleedLines":
               s.showBleedLines = e.value;
               break;
@@ -299,13 +341,19 @@ export class DielineTool implements Extension {
     }
 
     context.eventBus.on("canvas:resized", this.onCanvasResized);
-    this.createLayer();
     this.updateDieline();
   }
 
   deactivate(context: ExtensionContext) {
     context.eventBus.off("canvas:resized", this.onCanvasResized);
-    this.destroyLayer();
+    this.renderSeq += 1;
+    this.specs = [];
+    this.effects = [];
+    this.renderProducerDisposable?.dispose();
+    this.renderProducerDisposable = undefined;
+    if (this.canvasService) {
+      void this.canvasService.flushRenderFromProducers();
+    }
     this.canvasService = undefined;
     this.context = undefined;
   }
@@ -329,7 +377,7 @@ export class DielineTool implements Extension {
           id: "dieline.shape",
           type: "select",
           label: "Shape",
-          options: ["rect", "circle", "ellipse", "custom"],
+          options: Array.from(DIELINE_SHAPES),
           default: s.shape,
         },
         {
@@ -340,6 +388,12 @@ export class DielineTool implements Extension {
           max: 500,
           default: s.radius,
         },
+        {
+          id: "dieline.shapeStyle",
+          type: "json",
+          label: "Shape Style",
+          default: s.shapeStyle,
+        },
         {
           id: "dieline.showBleedLines",
           type: "boolean",
@@ -412,12 +466,6 @@ export class DielineTool implements Extension {
           label: "Inside Color",
           default: s.insideColor,
         },
-        {
-          id: "dieline.outsideColor",
-          type: "color",
-          label: "Outside Color",
-          default: s.outsideColor,
-        },
         {
           id: "dieline.features",
           type: "json",
@@ -531,42 +579,6 @@ export class DielineTool implements Extension {
     };
   }
 
-  private getLayer() {
-    return this.canvasService?.getLayer("dieline-overlay");
-  }
-
-  private createLayer() {
-    if (!this.canvasService) return;
-    const width = this.canvasService.canvas.width || 800;
-    const height = this.canvasService.canvas.height || 600;
-
-    const layer = this.canvasService.createLayer("dieline-overlay", {
-      width,
-      height,
-      selectable: false,
-      evented: false,
-    });
-
-    this.canvasService.canvas.bringObjectToFront(layer);
-
-    // Ensure above user layer
-    const userLayer = this.canvasService.getLayer("user");
-    if (userLayer) {
-      const userIndex = this.canvasService.canvas
-        .getObjects()
-        .indexOf(userLayer);
-      this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
-    }
-  }
-
-  private destroyLayer() {
-    if (!this.canvasService) return;
-    const layer = this.getLayer();
-    if (layer) {
-      this.canvasService.canvas.remove(layer);
-    }
-  }
-
   private createHatchPattern(color: string = "rgba(0, 0, 0, 0.3)") {
     if (typeof document === "undefined") {
       return undefined;
@@ -598,9 +610,15 @@ export class DielineTool implements Extension {
     );
   }
 
+  private hasImageItems(): boolean {
+    const configService = this.getConfigService();
+    if (!configService) return false;
+    const items = configService.get("image.items", []) as unknown;
+    return Array.isArray(items) && items.length > 0;
+  }
+
   private syncSizeState(configService: ConfigurationService) {
     const sizeState = readSizeState(configService);
-    this.state.displayUnit = sizeState.unit;
     this.state.width = sizeState.actualWidthMm;
     this.state.height = sizeState.actualHeightMm;
     this.state.padding = sizeState.viewPadding;
@@ -609,47 +627,28 @@ export class DielineTool implements Extension {
         ? sizeState.cutMarginMm
         : sizeState.cutMode === "inset"
           ? -sizeState.cutMarginMm
-          : 0;
-  }
-
-  private bringFeatureMarkersToFront() {
-    if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-    canvas
-      .getObjects()
-      .filter((obj: any) => obj?.data?.type === "feature-marker")
-      .forEach((obj: any) => canvas.bringObjectToFront(obj));
+      : 0;
   }
 
-  public updateDieline(_emitEvent: boolean = true) {
-    if (!this.canvasService) return;
-    const layer = this.getLayer();
-    if (!layer) return;
-    const configService = this.getConfigService();
-    if (!configService) return;
-
-    this.syncSizeState(configService);
-    const sceneLayout = computeSceneLayout(
-      this.canvasService,
-      readSizeState(configService),
-    );
-    if (!sceneLayout) return;
-
+  private buildDielineSpecs(
+    sceneLayout: NonNullable<ReturnType<typeof computeSceneLayout>>,
+  ): RenderObjectSpec[] {
     const {
       shape,
+      shapeStyle,
       radius,
       mainLine,
       offsetLine,
       insideColor,
-      outsideColor,
       showBleedLines,
       features,
     } = this.state;
+    const hasImages = this.hasImageItems();
 
     const canvasW =
-      sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
+      sceneLayout.canvasWidth || this.canvasService?.canvas.width || 800;
     const canvasH =
-      sceneLayout.canvasHeight || this.canvasService.canvas.height || 600;
+      sceneLayout.canvasHeight || this.canvasService?.canvas.height || 600;
     const scale = sceneLayout.scale;
     const cx = sceneLayout.trimRect.centerX;
     const cy = sceneLayout.trimRect.centerY;
@@ -663,8 +662,6 @@ export class DielineTool implements Extension {
     const cutR =
       visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
 
-    layer.remove(...layer.getObjects());
-
     const absoluteFeatures = (features || []).map((f) => ({
       ...f,
       x: f.x,
@@ -675,36 +672,13 @@ export class DielineTool implements Extension {
     }));
     const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
 
-    const maskPathData = generateMaskPath({
-      canvasWidth: canvasW,
-      canvasHeight: canvasH,
-      shape,
-      width: cutW,
-      height: cutH,
-      radius: cutR,
-      x: cx,
-      y: cy,
-      features: cutFeatures,
-      pathData: this.state.pathData,
-      customSourceWidthPx: this.state.customSourceWidthPx,
-      customSourceHeightPx: this.state.customSourceHeightPx,
-    });
-    const mask = new Path(maskPathData, {
-      fill: outsideColor,
-      stroke: null,
-      selectable: false,
-      evented: false,
-      originX: "left" as const,
-      originY: "top" as const,
-      left: 0,
-      top: 0,
-    });
-    layer.add(mask);
+    const specs: RenderObjectSpec[] = [];
 
     if (
       insideColor &&
       insideColor !== "transparent" &&
-      insideColor !== "rgba(0,0,0,0)"
+      insideColor !== "rgba(0,0,0,0)" &&
+      !hasImages
     ) {
       const productPathData = generateDielinePath({
         shape,
@@ -714,6 +688,7 @@ export class DielineTool implements Extension {
         x: cx,
         y: cy,
         features: cutFeatures,
+        shapeStyle,
         pathData: this.state.pathData,
         customSourceWidthPx: this.state.customSourceWidthPx,
         customSourceHeightPx: this.state.customSourceHeightPx,
@@ -721,15 +696,21 @@ export class DielineTool implements Extension {
         canvasHeight: canvasH,
       });
 
-      const insideObj = new Path(productPathData, {
-        fill: insideColor,
-        stroke: null,
-        selectable: false,
-        evented: false,
-        originX: "left",
-        originY: "top",
+      specs.push({
+        id: "dieline.inside",
+        type: "path",
+        space: "screen",
+        data: { id: "dieline.inside", type: "dieline" },
+        props: {
+          pathData: productPathData,
+          fill: insideColor,
+          stroke: null,
+          selectable: false,
+          evented: false,
+          originX: "left",
+          originY: "top",
+        },
       });
-      layer.add(insideObj);
     }
 
     if (Math.abs(visualOffset) > 0.0001) {
@@ -742,6 +723,7 @@ export class DielineTool implements Extension {
           x: cx,
           y: cy,
           features: cutFeatures,
+          shapeStyle,
           pathData: this.state.pathData,
           customSourceWidthPx: this.state.customSourceWidthPx,
           customSourceHeightPx: this.state.customSourceHeightPx,
@@ -756,6 +738,7 @@ export class DielineTool implements Extension {
           x: cx,
           y: cy,
           features: cutFeatures,
+          shapeStyle,
           pathData: this.state.pathData,
           customSourceWidthPx: this.state.customSourceWidthPx,
           customSourceHeightPx: this.state.customSourceHeightPx,
@@ -768,16 +751,22 @@ export class DielineTool implements Extension {
       if (showBleedLines !== false) {
         const pattern = this.createHatchPattern(mainLine.color);
         if (pattern) {
-          const bleedObj = new Path(bleedPathData, {
-            fill: pattern,
-            stroke: null,
-            selectable: false,
-            evented: false,
-            objectCaching: false,
-            originX: "left",
-            originY: "top",
+          specs.push({
+            id: "dieline.bleed-zone",
+            type: "path",
+            space: "screen",
+            data: { id: "dieline.bleed-zone", type: "dieline" },
+            props: {
+              pathData: bleedPathData,
+              fill: pattern,
+              stroke: null,
+              selectable: false,
+              evented: false,
+              objectCaching: false,
+              originX: "left",
+              originY: "top",
+            },
           });
-          layer.add(bleedObj);
         }
       }
 
@@ -789,6 +778,7 @@ export class DielineTool implements Extension {
         x: cx,
         y: cy,
         features: cutFeatures,
+        shapeStyle,
         pathData: this.state.pathData,
         customSourceWidthPx: this.state.customSourceWidthPx,
         customSourceHeightPx: this.state.customSourceHeightPx,
@@ -796,20 +786,26 @@ export class DielineTool implements Extension {
         canvasHeight: canvasH,
       });
 
-      const offsetBorderObj = new Path(offsetPathData, {
-        fill: null,
-        stroke: offsetLine.style === "hidden" ? null : offsetLine.color,
-        strokeWidth: offsetLine.width,
-        strokeDashArray:
-          offsetLine.style === "dashed"
-            ? [offsetLine.dashLength, offsetLine.dashLength]
-            : undefined,
-        selectable: false,
-        evented: false,
-        originX: "left",
-        originY: "top",
+      specs.push({
+        id: "dieline.offset-border",
+        type: "path",
+        space: "screen",
+        data: { id: "dieline.offset-border", type: "dieline" },
+        props: {
+          pathData: offsetPathData,
+          fill: null,
+          stroke: offsetLine.style === "hidden" ? null : offsetLine.color,
+          strokeWidth: offsetLine.width,
+          strokeDashArray:
+            offsetLine.style === "dashed"
+              ? [offsetLine.dashLength, offsetLine.dashLength]
+              : undefined,
+          selectable: false,
+          evented: false,
+          originX: "left",
+          originY: "top",
+        },
       });
-      layer.add(offsetBorderObj);
     }
 
     const borderPathData = generateDielinePath({
@@ -820,49 +816,145 @@ export class DielineTool implements Extension {
       x: cx,
       y: cy,
       features: absoluteFeatures,
+      shapeStyle,
       pathData: this.state.pathData,
       customSourceWidthPx: this.state.customSourceWidthPx,
       customSourceHeightPx: this.state.customSourceHeightPx,
       canvasWidth: canvasW,
       canvasHeight: canvasH,
     });
-    const borderObj = new Path(borderPathData, {
-      fill: "transparent",
-      stroke: mainLine.style === "hidden" ? null : mainLine.color,
-      strokeWidth: mainLine.width,
-      strokeDashArray:
-        mainLine.style === "dashed"
-          ? [mainLine.dashLength, mainLine.dashLength]
-          : undefined,
-      selectable: false,
-      evented: false,
-      originX: "left",
-      originY: "top",
+
+    specs.push({
+      id: "dieline.border",
+      type: "path",
+      space: "screen",
+      data: { id: "dieline.border", type: "dieline" },
+      props: {
+        pathData: borderPathData,
+        fill: "transparent",
+        stroke: mainLine.style === "hidden" ? null : mainLine.color,
+        strokeWidth: mainLine.width,
+        strokeDashArray:
+          mainLine.style === "dashed"
+            ? [mainLine.dashLength, mainLine.dashLength]
+            : undefined,
+        selectable: false,
+        evented: false,
+        originX: "left",
+        originY: "top",
+      },
     });
-    layer.add(borderObj);
-
-    const userLayer = this.canvasService.getLayer("user");
-    if (layer && userLayer) {
-      const layerIndex = this.canvasService.canvas.getObjects().indexOf(layer);
-      const userIndex = this.canvasService.canvas
-        .getObjects()
-        .indexOf(userLayer);
-      if (layerIndex < userIndex) {
-        this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
-      }
-    } else {
-      this.canvasService.canvas.bringObjectToFront(layer);
-    }
 
-    // Feature tool markers can extend outside trim. Keep them above dieline mask.
-    this.bringFeatureMarkersToFront();
+    return specs;
+  }
+
+  private buildImageClipEffects(
+    sceneLayout: NonNullable<ReturnType<typeof computeSceneLayout>>,
+  ): RenderEffectSpec[] {
+    const { shape, shapeStyle, radius, features } = this.state;
+
+    const canvasW =
+      sceneLayout.canvasWidth || this.canvasService?.canvas.width || 800;
+    const canvasH =
+      sceneLayout.canvasHeight || this.canvasService?.canvas.height || 600;
+    const scale = sceneLayout.scale;
+    const cx = sceneLayout.trimRect.centerX;
+    const cy = sceneLayout.trimRect.centerY;
+
+    const visualWidth = sceneLayout.trimRect.width;
+    const visualRadius = radius * scale;
+    const cutW = sceneLayout.cutRect.width;
+    const cutH = sceneLayout.cutRect.height;
+    const visualOffset = (cutW - visualWidth) / 2;
+    const cutR =
+      visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
 
-    const rulerLayer = this.canvasService.getLayer("ruler-overlay");
-    if (rulerLayer) {
-      this.canvasService.canvas.bringObjectToFront(rulerLayer);
+    const absoluteFeatures = (features || []).map((f) => ({
+      ...f,
+      x: f.x,
+      y: f.y,
+      width: (f.width || 0) * scale,
+      height: (f.height || 0) * scale,
+      radius: (f.radius || 0) * scale,
+    }));
+    const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
+
+    const clipPathData = generateDielinePath({
+      shape,
+      width: cutW,
+      height: cutH,
+      radius: cutR,
+      x: cx,
+      y: cy,
+      features: cutFeatures,
+      shapeStyle,
+      pathData: this.state.pathData,
+      customSourceWidthPx: this.state.customSourceWidthPx,
+      customSourceHeightPx: this.state.customSourceHeightPx,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH,
+    });
+    if (!clipPathData) return [];
+
+    return [
+      {
+        type: "clipPath",
+        id: "dieline.clip.image",
+        targetPassIds: [IMAGE_OBJECT_LAYER_ID],
+        source: {
+          id: "dieline.effect.clip-path",
+          type: "path",
+          space: "screen",
+          data: {
+            id: "dieline.effect.clip-path",
+            type: "dieline-effect",
+            effect: "clipPath",
+          },
+          props: {
+            pathData: clipPathData,
+            fill: "#000000",
+            stroke: null,
+            originX: "left",
+            originY: "top",
+            selectable: false,
+            evented: false,
+            excludeFromExport: true,
+          },
+        },
+      },
+    ];
+  }
+
+  public updateDieline(_emitEvent: boolean = true) {
+    void this.updateDielineAsync();
+  }
+
+  private async updateDielineAsync() {
+    if (!this.canvasService) return;
+    const configService = this.getConfigService();
+    if (!configService) return;
+    const seq = ++this.renderSeq;
+
+    this.syncSizeState(configService);
+    const sceneLayout = computeSceneLayout(
+      this.canvasService,
+      readSizeState(configService),
+    );
+    if (!sceneLayout) {
+      if (seq !== this.renderSeq) return;
+      this.specs = [];
+      this.effects = [];
+      await this.canvasService.flushRenderFromProducers();
+      return;
     }
 
-    layer.dirty = true;
+    const nextSpecs = this.buildDielineSpecs(sceneLayout);
+    const nextEffects = this.buildImageClipEffects(sceneLayout);
+    if (seq !== this.renderSeq) return;
+    this.specs = nextSpecs;
+    this.effects = nextEffects;
+    await this.canvasService.flushRenderFromProducers();
+    if (seq !== this.renderSeq) return;
     this.canvasService.requestRenderAll();
   }
 
@@ -914,7 +1006,7 @@ export class DielineTool implements Extension {
       return null;
     }
 
-    const { shape, radius, features, pathData } = this.state;
+    const { shape, shapeStyle, radius, features, pathData } = this.state;
     const canvasW =
       sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
     const canvasH =
@@ -947,6 +1039,7 @@ export class DielineTool implements Extension {
       x: cx,
       y: cy,
       features: cutFeatures,
+      shapeStyle,
       pathData,
       customSourceWidthPx: this.state.customSourceWidthPx,
       customSourceHeightPx: this.state.customSourceHeightPx,