@pooder/kit 5.0.0 → 5.0.1

package/.test-dist/src/dieline.js

@@ -7,6 +7,7 @@ const tracer_1 = require("./tracer");
 const units_1 = require("./units");
 const geometry_1 = require("./geometry");
 const sceneLayoutModel_1 = require("./sceneLayoutModel");
+const IMAGE_OBJECT_LAYER_ID = "image.user";
 class DielineTool {
     constructor(options) {
         this.id = "pooder.kit.dieline";
@@ -314,8 +315,8 @@ class DielineTool {
                 {
                     command: "exportCutImage",
                     title: "Export Cut Image",
-                    handler: () => {
-                        return this.exportCutImage();
+                    handler: (options) => {
+                        return this.exportCutImage(options);
                     },
                 },
                 {
@@ -445,6 +446,15 @@ class DielineTool {
                     ? -sizeState.cutMarginMm
                     : 0;
     }
+    bringFeatureMarkersToFront() {
+        if (!this.canvasService)
+            return;
+        const canvas = this.canvasService.canvas;
+        canvas
+            .getObjects()
+            .filter((obj) => obj?.data?.type === "feature-marker")
+            .forEach((obj) => canvas.bringObjectToFront(obj));
+    }
     updateDieline(_emitEvent = true) {
         if (!this.canvasService)
             return;
@@ -632,6 +642,8 @@ class DielineTool {
         else {
             this.canvasService.canvas.bringObjectToFront(layer);
         }
+        // Feature tool markers can extend outside trim. Keep them above dieline mask.
+        this.bringFeatureMarkersToFront();
         const rulerLayer = this.canvasService.getLayer("ruler-overlay");
         if (rulerLayer) {
             this.canvasService.canvas.bringObjectToFront(rulerLayer);
@@ -655,19 +667,23 @@ class DielineTool {
             pathData: this.state.pathData,
         };
     }
-    async exportCutImage() {
-        if (!this.canvasService)
+    async exportCutImage(options) {
+        const debug = options?.debug === true;
+        if (!this.canvasService) {
+            console.warn("[DielineTool] exportCutImage returned null: canvas-not-ready");
             return null;
+        }
         const configService = this.getConfigService();
-        if (!configService)
-            return null;
-        const userLayer = this.canvasService.getLayer("user");
-        if (!userLayer)
+        if (!configService) {
+            console.warn("[DielineTool] exportCutImage returned null: config-service-not-ready");
             return null;
+        }
         this.syncSizeState(configService);
         const sceneLayout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, (0, sceneLayoutModel_1.readSizeState)(configService));
-        if (!sceneLayout)
+        if (!sceneLayout) {
+            console.warn("[DielineTool] exportCutImage returned null: scene-layout-null");
             return null;
+        }
         const { shape, radius, features, pathData } = this.state;
         const canvasW = sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
         const canvasH = sceneLayout.canvasHeight || this.canvasService.canvas.height || 600;
@@ -700,24 +716,103 @@ class DielineTool {
             canvasWidth: canvasW,
             canvasHeight: canvasH,
         });
-        const clonedLayer = await userLayer.clone();
         const clipPath = new fabric_1.Path(generatedPathData, {
-            originX: "left",
-            originY: "top",
-            left: 0,
-            top: 0,
+            originX: "center",
+            originY: "center",
+            left: cx,
+            top: cy,
             absolutePositioned: true,
         });
-        clonedLayer.clipPath = clipPath;
-        const bounds = clipPath.getBoundingRect();
-        return clonedLayer.toDataURL({
-            format: "png",
-            multiplier: 2,
-            left: bounds.left,
-            top: bounds.top,
-            width: bounds.width,
-            height: bounds.height,
+        const pathOffsetX = Number(clipPath?.pathOffset?.x);
+        const pathOffsetY = Number(clipPath?.pathOffset?.y);
+        const centerX = Number.isFinite(pathOffsetX) ? pathOffsetX : cx;
+        const centerY = Number.isFinite(pathOffsetY) ? pathOffsetY : cy;
+        clipPath.set({
+            originX: "center",
+            originY: "center",
+            left: centerX,
+            top: centerY,
+            absolutePositioned: true,
         });
+        clipPath.setCoords();
+        const pathBounds = clipPath.getBoundingRect();
+        if (!Number.isFinite(pathBounds.left) ||
+            !Number.isFinite(pathBounds.top) ||
+            !Number.isFinite(pathBounds.width) ||
+            !Number.isFinite(pathBounds.height) ||
+            pathBounds.width <= 0 ||
+            pathBounds.height <= 0) {
+            console.warn("[DielineTool] exportCutImage returned null: invalid-cut-bounds", {
+                bounds: pathBounds,
+            });
+            return null;
+        }
+        const exportBounds = pathBounds;
+        const sourceImages = this.canvasService.canvas.getObjects().filter((obj) => {
+            return obj?.data?.layerId === IMAGE_OBJECT_LAYER_ID;
+        });
+        if (!sourceImages.length) {
+            console.warn("[DielineTool] exportCutImage returned null: no-image-objects-on-canvas");
+            return null;
+        }
+        const sourceCanvasWidth = Number(this.canvasService.canvas.width || sceneLayout.canvasWidth || canvasW);
+        const sourceCanvasHeight = Number(this.canvasService.canvas.height || sceneLayout.canvasHeight || canvasH);
+        const el = document.createElement("canvas");
+        const exportCanvas = new fabric_1.Canvas(el, {
+            renderOnAddRemove: false,
+            selection: false,
+            enableRetinaScaling: false,
+            preserveObjectStacking: true,
+        });
+        exportCanvas.setDimensions({
+            width: Math.max(1, sourceCanvasWidth),
+            height: Math.max(1, sourceCanvasHeight),
+        });
+        try {
+            for (const source of sourceImages) {
+                const clone = await source.clone();
+                clone.set({
+                    selectable: false,
+                    evented: false,
+                });
+                clone.setCoords();
+                exportCanvas.add(clone);
+            }
+            exportCanvas.clipPath = clipPath;
+            exportCanvas.renderAll();
+            const dataUrl = exportCanvas.toDataURL({
+                format: "png",
+                multiplier: 2,
+                left: exportBounds.left,
+                top: exportBounds.top,
+                width: exportBounds.width,
+                height: exportBounds.height,
+            });
+            if (debug) {
+                console.info("[DielineTool] exportCutImage success", {
+                    sourceCount: sourceImages.length,
+                    bounds: exportBounds,
+                    rawPathBounds: pathBounds,
+                    pathOffset: {
+                        x: Number.isFinite(pathOffsetX) ? pathOffsetX : null,
+                        y: Number.isFinite(pathOffsetY) ? pathOffsetY : null,
+                    },
+                    clipPathCenter: {
+                        x: centerX,
+                        y: centerY,
+                    },
+                    cutRect: sceneLayout.cutRect,
+                    canvasSize: {
+                        width: Math.max(1, sourceCanvasWidth),
+                        height: Math.max(1, sourceCanvasHeight),
+                    },
+                });
+            }
+            return dataUrl;
+        }
+        finally {
+            exportCanvas.dispose();
+        }
     }
 }
 exports.DielineTool = DielineTool;

package/.test-dist/src/feature.js

@@ -282,6 +282,8 @@ class FeatureTool {
             };
         }
         this.hasWorkingChanges = false;
+        // Keep feature markers above dieline overlay after config-driven redraw.
+        this.redraw();
         return { ok: true };
     }
     addFeature(type) {

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pooder/kit
 
+## 5.0.1
+
+### Patch Changes
+
+- bugfix
+
 ## 5.0.0
 
 ### Major Changes

package/dist/index.d.mts

@@ -133,7 +133,9 @@ declare class DielineTool implements Extension {
     private bringFeatureMarkersToFront;
     updateDieline(_emitEvent?: boolean): void;
     getGeometry(): DielineGeometry | null;
-    exportCutImage(): Promise<string | null>;
+    exportCutImage(options?: {
+        debug?: boolean;
+    }): Promise<string | null>;
 }
 
 declare class FilmTool implements Extension {

package/dist/index.d.ts

@@ -133,7 +133,9 @@ declare class DielineTool implements Extension {
     private bringFeatureMarkersToFront;
     updateDieline(_emitEvent?: boolean): void;
     getGeometry(): DielineGeometry | null;
-    exportCutImage(): Promise<string | null>;
+    exportCutImage(options?: {
+        debug?: boolean;
+    }): Promise<string | null>;
 }
 
 declare class FilmTool implements Extension {

package/dist/index.js

@@ -1811,6 +1811,7 @@ function buildSceneGeometry(configService, layout) {
 }
 
 // src/dieline.ts
+var IMAGE_OBJECT_LAYER_ID = "image.user";
 var DielineTool = class {
   constructor(options) {
     this.id = "pooder.kit.dieline";
@@ -2137,8 +2138,8 @@ var DielineTool = class {
         {
           command: "exportCutImage",
           title: "Export Cut Image",
-          handler: () => {
-            return this.exportCutImage();
+          handler: (options) => {
+            return this.exportCutImage(options);
           }
         },
         {
@@ -2478,18 +2479,29 @@ var DielineTool = class {
       pathData: this.state.pathData
     };
   }
-  async exportCutImage() {
-    if (!this.canvasService) return null;
+  async exportCutImage(options) {
+    var _a, _b;
+    const debug = (options == null ? void 0 : options.debug) === true;
+    if (!this.canvasService) {
+      console.warn("[DielineTool] exportCutImage returned null: canvas-not-ready");
+      return null;
+    }
     const configService = this.getConfigService();
-    if (!configService) return null;
-    const userLayer = this.canvasService.getLayer("user");
-    if (!userLayer) return null;
+    if (!configService) {
+      console.warn(
+        "[DielineTool] exportCutImage returned null: config-service-not-ready"
+      );
+      return null;
+    }
     this.syncSizeState(configService);
     const sceneLayout = computeSceneLayout(
       this.canvasService,
       readSizeState(configService)
     );
-    if (!sceneLayout) return null;
+    if (!sceneLayout) {
+      console.warn("[DielineTool] exportCutImage returned null: scene-layout-null");
+      return null;
+    }
     const { shape, radius, features, pathData } = this.state;
     const canvasW = sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
     const canvasH = sceneLayout.canvasHeight || this.canvasService.canvas.height || 600;
@@ -2522,24 +2534,104 @@ var DielineTool = class {
       canvasWidth: canvasW,
       canvasHeight: canvasH
     });
-    const clonedLayer = await userLayer.clone();
     const clipPath = new import_fabric2.Path(generatedPathData, {
-      originX: "left",
-      originY: "top",
-      left: 0,
-      top: 0,
+      originX: "center",
+      originY: "center",
+      left: cx,
+      top: cy,
       absolutePositioned: true
     });
-    clonedLayer.clipPath = clipPath;
-    const bounds = clipPath.getBoundingRect();
-    return clonedLayer.toDataURL({
-      format: "png",
-      multiplier: 2,
-      left: bounds.left,
-      top: bounds.top,
-      width: bounds.width,
-      height: bounds.height
+    const pathOffsetX = Number((_a = clipPath == null ? void 0 : clipPath.pathOffset) == null ? void 0 : _a.x);
+    const pathOffsetY = Number((_b = clipPath == null ? void 0 : clipPath.pathOffset) == null ? void 0 : _b.y);
+    const centerX = Number.isFinite(pathOffsetX) ? pathOffsetX : cx;
+    const centerY = Number.isFinite(pathOffsetY) ? pathOffsetY : cy;
+    clipPath.set({
+      originX: "center",
+      originY: "center",
+      left: centerX,
+      top: centerY,
+      absolutePositioned: true
+    });
+    clipPath.setCoords();
+    const pathBounds = clipPath.getBoundingRect();
+    if (!Number.isFinite(pathBounds.left) || !Number.isFinite(pathBounds.top) || !Number.isFinite(pathBounds.width) || !Number.isFinite(pathBounds.height) || pathBounds.width <= 0 || pathBounds.height <= 0) {
+      console.warn("[DielineTool] exportCutImage returned null: invalid-cut-bounds", {
+        bounds: pathBounds
+      });
+      return null;
+    }
+    const exportBounds = pathBounds;
+    const sourceImages = this.canvasService.canvas.getObjects().filter((obj) => {
+      var _a2;
+      return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID;
+    });
+    if (!sourceImages.length) {
+      console.warn(
+        "[DielineTool] exportCutImage returned null: no-image-objects-on-canvas"
+      );
+      return null;
+    }
+    const sourceCanvasWidth = Number(
+      this.canvasService.canvas.width || sceneLayout.canvasWidth || canvasW
+    );
+    const sourceCanvasHeight = Number(
+      this.canvasService.canvas.height || sceneLayout.canvasHeight || canvasH
+    );
+    const el = document.createElement("canvas");
+    const exportCanvas = new import_fabric2.Canvas(el, {
+      renderOnAddRemove: false,
+      selection: false,
+      enableRetinaScaling: false,
+      preserveObjectStacking: true
+    });
+    exportCanvas.setDimensions({
+      width: Math.max(1, sourceCanvasWidth),
+      height: Math.max(1, sourceCanvasHeight)
     });
+    try {
+      for (const source of sourceImages) {
+        const clone = await source.clone();
+        clone.set({
+          selectable: false,
+          evented: false
+        });
+        clone.setCoords();
+        exportCanvas.add(clone);
+      }
+      exportCanvas.clipPath = clipPath;
+      exportCanvas.renderAll();
+      const dataUrl = exportCanvas.toDataURL({
+        format: "png",
+        multiplier: 2,
+        left: exportBounds.left,
+        top: exportBounds.top,
+        width: exportBounds.width,
+        height: exportBounds.height
+      });
+      if (debug) {
+        console.info("[DielineTool] exportCutImage success", {
+          sourceCount: sourceImages.length,
+          bounds: exportBounds,
+          rawPathBounds: pathBounds,
+          pathOffset: {
+            x: Number.isFinite(pathOffsetX) ? pathOffsetX : null,
+            y: Number.isFinite(pathOffsetY) ? pathOffsetY : null
+          },
+          clipPathCenter: {
+            x: centerX,
+            y: centerY
+          },
+          cutRect: sceneLayout.cutRect,
+          canvasSize: {
+            width: Math.max(1, sourceCanvasWidth),
+            height: Math.max(1, sourceCanvasHeight)
+          }
+        });
+      }
+      return dataUrl;
+    } finally {
+      exportCanvas.dispose();
+    }
   }
 };
 
@@ -3625,7 +3717,7 @@ var FeatureTool = class {
 // src/image.ts
 var import_core5 = require("@pooder/core");
 var import_fabric5 = require("fabric");
-var IMAGE_OBJECT_LAYER_ID = "image.user";
+var IMAGE_OBJECT_LAYER_ID2 = "image.user";
 var IMAGE_OVERLAY_LAYER_ID = "image-overlay";
 var IMAGE_REPLACE_GUARD_MS = 2500;
 var ImageTool = class {
@@ -3685,7 +3777,7 @@ var ImageTool = class {
       const selectedImage = list.find(
         (obj) => {
           var _a2;
-          return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID;
+          return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID2;
         }
       );
       this.isImageSelectionActive = !!selectedImage;
@@ -3724,7 +3816,7 @@ var ImageTool = class {
       const target = e == null ? void 0 : e.target;
       const id = (_a = target == null ? void 0 : target.data) == null ? void 0 : _a.id;
       const layerId = (_b = target == null ? void 0 : target.data) == null ? void 0 : _b.layerId;
-      if (typeof id !== "string" || layerId !== IMAGE_OBJECT_LAYER_ID) return;
+      if (typeof id !== "string" || layerId !== IMAGE_OBJECT_LAYER_ID2) return;
       const frame = this.getFrameRect();
       if (!frame.width || !frame.height) return;
       const center = target.getCenterPoint ? target.getCenterPoint() : new import_fabric5.Point((_c = target.left) != null ? _c : 0, (_d = target.top) != null ? _d : 0);
@@ -4073,7 +4165,7 @@ var ImageTool = class {
   getImageIdFromActiveObject() {
     var _a, _b, _c;
     const active = (_a = this.canvasService) == null ? void 0 : _a.canvas.getActiveObject();
-    if (((_b = active == null ? void 0 : active.data) == null ? void 0 : _b.layerId) === IMAGE_OBJECT_LAYER_ID && typeof ((_c = active == null ? void 0 : active.data) == null ? void 0 : _c.id) === "string") {
+    if (((_b = active == null ? void 0 : active.data) == null ? void 0 : _b.layerId) === IMAGE_OBJECT_LAYER_ID2 && typeof ((_c = active == null ? void 0 : active.data) == null ? void 0 : _c.id) === "string") {
       return active.data.id;
     }
     return null;
@@ -4242,7 +4334,7 @@ var ImageTool = class {
     if (!this.canvasService) return [];
     return this.canvasService.canvas.getObjects().filter((obj) => {
       var _a;
-      return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID;
+      return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID2;
     });
   }
   getOverlayObjects() {
@@ -4398,7 +4490,7 @@ var ImageTool = class {
       created.set({
         data: {
           id: item.id,
-          layerId: IMAGE_OBJECT_LAYER_ID,
+          layerId: IMAGE_OBJECT_LAYER_ID2,
           type: "image-item"
         }
       });
@@ -4413,7 +4505,7 @@ var ImageTool = class {
       data: {
         ...obj.data || {},
         id: item.id,
-        layerId: IMAGE_OBJECT_LAYER_ID,
+        layerId: IMAGE_OBJECT_LAYER_ID2,
         type: "image-item"
       }
     });
@@ -4817,7 +4909,7 @@ var ImageTool = class {
     const idSet = new Set(imageIds);
     const sourceObjects = this.canvasService.canvas.getObjects().filter((obj) => {
       var _a2, _b2;
-      return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID && typeof ((_b2 = obj == null ? void 0 : obj.data) == null ? void 0 : _b2.id) === "string" && idSet.has(obj.data.id);
+      return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID2 && typeof ((_b2 = obj == null ? void 0 : obj.data) == null ? void 0 : _b2.id) === "string" && idSet.has(obj.data.id);
     });
     for (const source of sourceObjects) {
       const clone = await source.clone();
@@ -4862,7 +4954,7 @@ var ImageTool = class {
 var import_core6 = require("@pooder/core");
 var import_fabric6 = require("fabric");
 var WHITE_INK_OBJECT_LAYER_ID = "white-ink.user";
-var IMAGE_OBJECT_LAYER_ID2 = "image.user";
+var IMAGE_OBJECT_LAYER_ID3 = "image.user";
 var WHITE_INK_DEBUG_KEY = "whiteInk.debug";
 var WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY = "whiteInk.previewImageVisible";
 var WHITE_INK_DEFAULT_OPACITY = 0.85;
@@ -5563,7 +5655,7 @@ var WhiteInkTool = class {
     const imageIndexes = objects.map(
       (obj, index) => {
         var _a;
-        return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID2 ? index : -1;
+        return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID3 ? index : -1;
       }
     ).filter((index) => index >= 0);
     if (imageIndexes.length > 0) {
@@ -5596,7 +5688,7 @@ var WhiteInkTool = class {
     let changed = false;
     this.canvasService.canvas.getObjects().forEach((obj) => {
       var _a, _b;
-      if (((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) !== IMAGE_OBJECT_LAYER_ID2) return;
+      if (((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) !== IMAGE_OBJECT_LAYER_ID3) return;
       if (obj.visible === visible) return;
       obj.set({ visible });
       (_b = obj.setCoords) == null ? void 0 : _b.call(obj);

package/dist/index.mjs

@@ -205,7 +205,7 @@ var BackgroundTool = class {
 import {
   ContributionPointIds as ContributionPointIds2
 } from "@pooder/core";
-import { Path, Pattern } from "fabric";
+import { Canvas as FabricCanvas, Path, Pattern } from "fabric";
 
 // src/tracer.ts
 import paper from "paper";
@@ -1756,6 +1756,7 @@ function buildSceneGeometry(configService, layout) {
 }
 
 // src/dieline.ts
+var IMAGE_OBJECT_LAYER_ID = "image.user";
 var DielineTool = class {
   constructor(options) {
     this.id = "pooder.kit.dieline";
@@ -2082,8 +2083,8 @@ var DielineTool = class {
         {
           command: "exportCutImage",
           title: "Export Cut Image",
-          handler: () => {
-            return this.exportCutImage();
+          handler: (options) => {
+            return this.exportCutImage(options);
           }
         },
         {
@@ -2423,18 +2424,29 @@ var DielineTool = class {
       pathData: this.state.pathData
     };
   }
-  async exportCutImage() {
-    if (!this.canvasService) return null;
+  async exportCutImage(options) {
+    var _a, _b;
+    const debug = (options == null ? void 0 : options.debug) === true;
+    if (!this.canvasService) {
+      console.warn("[DielineTool] exportCutImage returned null: canvas-not-ready");
+      return null;
+    }
     const configService = this.getConfigService();
-    if (!configService) return null;
-    const userLayer = this.canvasService.getLayer("user");
-    if (!userLayer) return null;
+    if (!configService) {
+      console.warn(
+        "[DielineTool] exportCutImage returned null: config-service-not-ready"
+      );
+      return null;
+    }
     this.syncSizeState(configService);
     const sceneLayout = computeSceneLayout(
       this.canvasService,
       readSizeState(configService)
     );
-    if (!sceneLayout) return null;
+    if (!sceneLayout) {
+      console.warn("[DielineTool] exportCutImage returned null: scene-layout-null");
+      return null;
+    }
     const { shape, radius, features, pathData } = this.state;
     const canvasW = sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
     const canvasH = sceneLayout.canvasHeight || this.canvasService.canvas.height || 600;
@@ -2467,24 +2479,104 @@ var DielineTool = class {
       canvasWidth: canvasW,
       canvasHeight: canvasH
     });
-    const clonedLayer = await userLayer.clone();
     const clipPath = new Path(generatedPathData, {
-      originX: "left",
-      originY: "top",
-      left: 0,
-      top: 0,
+      originX: "center",
+      originY: "center",
+      left: cx,
+      top: cy,
       absolutePositioned: true
     });
-    clonedLayer.clipPath = clipPath;
-    const bounds = clipPath.getBoundingRect();
-    return clonedLayer.toDataURL({
-      format: "png",
-      multiplier: 2,
-      left: bounds.left,
-      top: bounds.top,
-      width: bounds.width,
-      height: bounds.height
+    const pathOffsetX = Number((_a = clipPath == null ? void 0 : clipPath.pathOffset) == null ? void 0 : _a.x);
+    const pathOffsetY = Number((_b = clipPath == null ? void 0 : clipPath.pathOffset) == null ? void 0 : _b.y);
+    const centerX = Number.isFinite(pathOffsetX) ? pathOffsetX : cx;
+    const centerY = Number.isFinite(pathOffsetY) ? pathOffsetY : cy;
+    clipPath.set({
+      originX: "center",
+      originY: "center",
+      left: centerX,
+      top: centerY,
+      absolutePositioned: true
+    });
+    clipPath.setCoords();
+    const pathBounds = clipPath.getBoundingRect();
+    if (!Number.isFinite(pathBounds.left) || !Number.isFinite(pathBounds.top) || !Number.isFinite(pathBounds.width) || !Number.isFinite(pathBounds.height) || pathBounds.width <= 0 || pathBounds.height <= 0) {
+      console.warn("[DielineTool] exportCutImage returned null: invalid-cut-bounds", {
+        bounds: pathBounds
+      });
+      return null;
+    }
+    const exportBounds = pathBounds;
+    const sourceImages = this.canvasService.canvas.getObjects().filter((obj) => {
+      var _a2;
+      return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID;
+    });
+    if (!sourceImages.length) {
+      console.warn(
+        "[DielineTool] exportCutImage returned null: no-image-objects-on-canvas"
+      );
+      return null;
+    }
+    const sourceCanvasWidth = Number(
+      this.canvasService.canvas.width || sceneLayout.canvasWidth || canvasW
+    );
+    const sourceCanvasHeight = Number(
+      this.canvasService.canvas.height || sceneLayout.canvasHeight || canvasH
+    );
+    const el = document.createElement("canvas");
+    const exportCanvas = new FabricCanvas(el, {
+      renderOnAddRemove: false,
+      selection: false,
+      enableRetinaScaling: false,
+      preserveObjectStacking: true
+    });
+    exportCanvas.setDimensions({
+      width: Math.max(1, sourceCanvasWidth),
+      height: Math.max(1, sourceCanvasHeight)
     });
+    try {
+      for (const source of sourceImages) {
+        const clone = await source.clone();
+        clone.set({
+          selectable: false,
+          evented: false
+        });
+        clone.setCoords();
+        exportCanvas.add(clone);
+      }
+      exportCanvas.clipPath = clipPath;
+      exportCanvas.renderAll();
+      const dataUrl = exportCanvas.toDataURL({
+        format: "png",
+        multiplier: 2,
+        left: exportBounds.left,
+        top: exportBounds.top,
+        width: exportBounds.width,
+        height: exportBounds.height
+      });
+      if (debug) {
+        console.info("[DielineTool] exportCutImage success", {
+          sourceCount: sourceImages.length,
+          bounds: exportBounds,
+          rawPathBounds: pathBounds,
+          pathOffset: {
+            x: Number.isFinite(pathOffsetX) ? pathOffsetX : null,
+            y: Number.isFinite(pathOffsetY) ? pathOffsetY : null
+          },
+          clipPathCenter: {
+            x: centerX,
+            y: centerY
+          },
+          cutRect: sceneLayout.cutRect,
+          canvasSize: {
+            width: Math.max(1, sourceCanvasWidth),
+            height: Math.max(1, sourceCanvasHeight)
+          }
+        });
+      }
+      return dataUrl;
+    } finally {
+      exportCanvas.dispose();
+    }
   }
 };
 
@@ -3575,8 +3667,8 @@ var FeatureTool = class {
 import {
   ContributionPointIds as ContributionPointIds5
 } from "@pooder/core";
-import { Canvas as FabricCanvas, Image as FabricImage, Point as Point2 } from "fabric";
-var IMAGE_OBJECT_LAYER_ID = "image.user";
+import { Canvas as FabricCanvas2, Image as FabricImage, Point as Point2 } from "fabric";
+var IMAGE_OBJECT_LAYER_ID2 = "image.user";
 var IMAGE_OVERLAY_LAYER_ID = "image-overlay";
 var IMAGE_REPLACE_GUARD_MS = 2500;
 var ImageTool = class {
@@ -3636,7 +3728,7 @@ var ImageTool = class {
       const selectedImage = list.find(
         (obj) => {
           var _a2;
-          return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID;
+          return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID2;
         }
       );
       this.isImageSelectionActive = !!selectedImage;
@@ -3675,7 +3767,7 @@ var ImageTool = class {
       const target = e == null ? void 0 : e.target;
       const id = (_a = target == null ? void 0 : target.data) == null ? void 0 : _a.id;
       const layerId = (_b = target == null ? void 0 : target.data) == null ? void 0 : _b.layerId;
-      if (typeof id !== "string" || layerId !== IMAGE_OBJECT_LAYER_ID) return;
+      if (typeof id !== "string" || layerId !== IMAGE_OBJECT_LAYER_ID2) return;
       const frame = this.getFrameRect();
       if (!frame.width || !frame.height) return;
       const center = target.getCenterPoint ? target.getCenterPoint() : new Point2((_c = target.left) != null ? _c : 0, (_d = target.top) != null ? _d : 0);
@@ -4024,7 +4116,7 @@ var ImageTool = class {
   getImageIdFromActiveObject() {
     var _a, _b, _c;
     const active = (_a = this.canvasService) == null ? void 0 : _a.canvas.getActiveObject();
-    if (((_b = active == null ? void 0 : active.data) == null ? void 0 : _b.layerId) === IMAGE_OBJECT_LAYER_ID && typeof ((_c = active == null ? void 0 : active.data) == null ? void 0 : _c.id) === "string") {
+    if (((_b = active == null ? void 0 : active.data) == null ? void 0 : _b.layerId) === IMAGE_OBJECT_LAYER_ID2 && typeof ((_c = active == null ? void 0 : active.data) == null ? void 0 : _c.id) === "string") {
       return active.data.id;
     }
     return null;
@@ -4193,7 +4285,7 @@ var ImageTool = class {
     if (!this.canvasService) return [];
     return this.canvasService.canvas.getObjects().filter((obj) => {
       var _a;
-      return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID;
+      return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID2;
     });
   }
   getOverlayObjects() {
@@ -4349,7 +4441,7 @@ var ImageTool = class {
       created.set({
         data: {
           id: item.id,
-          layerId: IMAGE_OBJECT_LAYER_ID,
+          layerId: IMAGE_OBJECT_LAYER_ID2,
           type: "image-item"
         }
       });
@@ -4364,7 +4456,7 @@ var ImageTool = class {
       data: {
         ...obj.data || {},
         id: item.id,
-        layerId: IMAGE_OBJECT_LAYER_ID,
+        layerId: IMAGE_OBJECT_LAYER_ID2,
         type: "image-item"
       }
     });
@@ -4758,7 +4850,7 @@ var ImageTool = class {
     const width = Math.max(1, Math.round(frame.width * multiplier));
     const height = Math.max(1, Math.round(frame.height * multiplier));
     const el = document.createElement("canvas");
-    const tempCanvas = new FabricCanvas(el, {
+    const tempCanvas = new FabricCanvas2(el, {
       renderOnAddRemove: false,
       selection: false,
       enableRetinaScaling: false,
@@ -4768,7 +4860,7 @@ var ImageTool = class {
     const idSet = new Set(imageIds);
     const sourceObjects = this.canvasService.canvas.getObjects().filter((obj) => {
       var _a2, _b2;
-      return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID && typeof ((_b2 = obj == null ? void 0 : obj.data) == null ? void 0 : _b2.id) === "string" && idSet.has(obj.data.id);
+      return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID2 && typeof ((_b2 = obj == null ? void 0 : obj.data) == null ? void 0 : _b2.id) === "string" && idSet.has(obj.data.id);
     });
     for (const source of sourceObjects) {
       const clone = await source.clone();
@@ -4815,7 +4907,7 @@ import {
 } from "@pooder/core";
 import { Image as FabricImage2 } from "fabric";
 var WHITE_INK_OBJECT_LAYER_ID = "white-ink.user";
-var IMAGE_OBJECT_LAYER_ID2 = "image.user";
+var IMAGE_OBJECT_LAYER_ID3 = "image.user";
 var WHITE_INK_DEBUG_KEY = "whiteInk.debug";
 var WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY = "whiteInk.previewImageVisible";
 var WHITE_INK_DEFAULT_OPACITY = 0.85;
@@ -5516,7 +5608,7 @@ var WhiteInkTool = class {
     const imageIndexes = objects.map(
       (obj, index) => {
         var _a;
-        return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID2 ? index : -1;
+        return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID3 ? index : -1;
       }
     ).filter((index) => index >= 0);
     if (imageIndexes.length > 0) {
@@ -5549,7 +5641,7 @@ var WhiteInkTool = class {
     let changed = false;
     this.canvasService.canvas.getObjects().forEach((obj) => {
       var _a, _b;
-      if (((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) !== IMAGE_OBJECT_LAYER_ID2) return;
+      if (((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) !== IMAGE_OBJECT_LAYER_ID3) return;
       if (obj.visible === visible) return;
       obj.set({ visible });
       (_b = obj.setCoords) == null ? void 0 : _b.call(obj);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Standard plugins for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/dieline.ts

@@ -6,7 +6,7 @@ import {
   ConfigurationContribution,
   ConfigurationService,
 } from "@pooder/core";
-import { Path, Pattern } from "fabric";
+import { Canvas as FabricCanvas, Path, Pattern } from "fabric";
 import CanvasService from "./CanvasService";
 import { ImageTracer } from "./tracer";
 import { Unit } from "./coordinate";
@@ -63,6 +63,8 @@ export interface DielineState {
   pathData?: string;
 }
 
+const IMAGE_OBJECT_LAYER_ID = "image.user";
+
 export class DielineTool implements Extension {
   id = "pooder.kit.dieline";
   public metadata = {
@@ -424,8 +426,8 @@ export class DielineTool implements Extension {
         {
           command: "exportCutImage",
           title: "Export Cut Image",
-          handler: () => {
-            return this.exportCutImage();
+          handler: (options?: { debug?: boolean }) => {
+            return this.exportCutImage(options);
           },
         },
         {
@@ -824,19 +826,30 @@ export class DielineTool implements Extension {
     } as DielineGeometry;
   }
 
-  public async exportCutImage() {
-    if (!this.canvasService) return null;
+  public async exportCutImage(options?: { debug?: boolean }) {
+    const debug = options?.debug === true;
+
+    if (!this.canvasService) {
+      console.warn("[DielineTool] exportCutImage returned null: canvas-not-ready");
+      return null;
+    }
     const configService = this.getConfigService();
-    if (!configService) return null;
-    const userLayer = this.canvasService.getLayer("user");
-    if (!userLayer) return null;
+    if (!configService) {
+      console.warn(
+        "[DielineTool] exportCutImage returned null: config-service-not-ready",
+      );
+      return null;
+    }
 
     this.syncSizeState(configService);
     const sceneLayout = computeSceneLayout(
       this.canvasService,
       readSizeState(configService),
     );
-    if (!sceneLayout) return null;
+    if (!sceneLayout) {
+      console.warn("[DielineTool] exportCutImage returned null: scene-layout-null");
+      return null;
+    }
 
     const { shape, radius, features, pathData } = this.state;
     const canvasW = sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
@@ -874,24 +887,119 @@ export class DielineTool implements Extension {
       canvasHeight: canvasH,
     });
 
-    const clonedLayer = await userLayer.clone();
     const clipPath = new Path(generatedPathData, {
-      originX: "left",
-      originY: "top",
-      left: 0,
-      top: 0,
+      originX: "center",
+      originY: "center",
+      left: cx,
+      top: cy,
       absolutePositioned: true,
     });
-    clonedLayer.clipPath = clipPath;
-
-    const bounds = clipPath.getBoundingRect();
-    return clonedLayer.toDataURL({
-      format: "png",
-      multiplier: 2,
-      left: bounds.left,
-      top: bounds.top,
-      width: bounds.width,
-      height: bounds.height,
+    const pathOffsetX = Number((clipPath as any)?.pathOffset?.x);
+    const pathOffsetY = Number((clipPath as any)?.pathOffset?.y);
+    const centerX = Number.isFinite(pathOffsetX) ? pathOffsetX : cx;
+    const centerY = Number.isFinite(pathOffsetY) ? pathOffsetY : cy;
+    clipPath.set({
+      originX: "center",
+      originY: "center",
+      left: centerX,
+      top: centerY,
+      absolutePositioned: true,
     });
+    clipPath.setCoords();
+
+    const pathBounds = clipPath.getBoundingRect();
+    if (
+      !Number.isFinite(pathBounds.left) ||
+      !Number.isFinite(pathBounds.top) ||
+      !Number.isFinite(pathBounds.width) ||
+      !Number.isFinite(pathBounds.height) ||
+      pathBounds.width <= 0 ||
+      pathBounds.height <= 0
+    ) {
+      console.warn("[DielineTool] exportCutImage returned null: invalid-cut-bounds", {
+        bounds: pathBounds,
+      });
+      return null;
+    }
+    const exportBounds = pathBounds;
+
+    const sourceImages = this.canvasService.canvas.getObjects().filter((obj: any) => {
+      return obj?.data?.layerId === IMAGE_OBJECT_LAYER_ID;
+    });
+    if (!sourceImages.length) {
+      console.warn(
+        "[DielineTool] exportCutImage returned null: no-image-objects-on-canvas",
+      );
+      return null;
+    }
+
+    const sourceCanvasWidth = Number(
+      this.canvasService.canvas.width || sceneLayout.canvasWidth || canvasW,
+    );
+    const sourceCanvasHeight = Number(
+      this.canvasService.canvas.height || sceneLayout.canvasHeight || canvasH,
+    );
+
+    const el = document.createElement("canvas");
+    const exportCanvas = new FabricCanvas(el, {
+      renderOnAddRemove: false,
+      selection: false,
+      enableRetinaScaling: false,
+      preserveObjectStacking: true,
+    } as any);
+    exportCanvas.setDimensions({
+      width: Math.max(1, sourceCanvasWidth),
+      height: Math.max(1, sourceCanvasHeight),
+    });
+
+    try {
+      for (const source of sourceImages as any[]) {
+        const clone = await source.clone();
+        clone.set({
+          selectable: false,
+          evented: false,
+        });
+        clone.setCoords();
+        exportCanvas.add(clone);
+      }
+
+      exportCanvas.clipPath = clipPath;
+      exportCanvas.renderAll();
+
+      const dataUrl = exportCanvas.toDataURL({
+        format: "png",
+        multiplier: 2,
+        left: exportBounds.left,
+        top: exportBounds.top,
+        width: exportBounds.width,
+        height: exportBounds.height,
+      });
+
+      if (debug) {
+        console.info("[DielineTool] exportCutImage success", {
+          sourceCount: sourceImages.length,
+          bounds: exportBounds,
+          rawPathBounds: pathBounds,
+          pathOffset: {
+            x: Number.isFinite(pathOffsetX) ? pathOffsetX : null,
+            y: Number.isFinite(pathOffsetY) ? pathOffsetY : null,
+          },
+          clipPathCenter: {
+            x: centerX,
+            y: centerY,
+          },
+          cutRect: sceneLayout.cutRect,
+          canvasSize: {
+            width: Math.max(1, sourceCanvasWidth),
+            height: Math.max(1, sourceCanvasHeight),
+          },
+        });
+      }
+
+      return dataUrl;
+    } finally {
+      exportCanvas.dispose();
+    }
   }
+
 }