@pooder/kit 5.0.0 → 5.0.2

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);
@@ -3706,10 +3798,7 @@ var ImageTool = class {
     context.eventBus.on("selection:created", this.onSelectionChanged);
     context.eventBus.on("selection:updated", this.onSelectionChanged);
     context.eventBus.on("selection:cleared", this.onSelectionCleared);
-    context.eventBus.on(
-      "scene:layout:change",
-      this.onSceneLayoutChanged
-    );
+    context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
     const configService = context.services.get(
       "ConfigurationService"
     );
@@ -3749,10 +3838,7 @@ var ImageTool = class {
     context.eventBus.off("selection:created", this.onSelectionChanged);
     context.eventBus.off("selection:updated", this.onSelectionChanged);
     context.eventBus.off("selection:cleared", this.onSelectionCleared);
-    context.eventBus.off(
-      "scene:layout:change",
-      this.onSceneLayoutChanged
-    );
+    context.eventBus.off("scene:layout:change", this.onSceneLayoutChanged);
     (_a = this.dirtyTrackerDisposable) == null ? void 0 : _a.dispose();
     this.dirtyTrackerDisposable = void 0;
     this.clearRenderedImages();
@@ -3861,7 +3947,7 @@ var ImageTool = class {
           id: "image.frame.outerBackground",
           type: "color",
           label: "Image Frame Outer Background",
-          default: "rgba(0,0,0,0.18)"
+          default: "#f5f5f5"
         }
       ],
       [ContributionPointIds5.COMMANDS]: [
@@ -3904,6 +3990,7 @@ var ImageTool = class {
             this.workingItems = this.cloneItems(this.items);
             this.hasWorkingChanges = false;
             this.updateImages();
+            this.emitWorkingChange();
           }
         },
         {
@@ -4018,13 +4105,20 @@ var ImageTool = class {
   cloneItems(items) {
     return this.normalizeItems((items || []).map((i) => ({ ...i })));
   }
+  emitWorkingChange(changedId = null) {
+    var _a;
+    (_a = this.context) == null ? void 0 : _a.eventBus.emit("image:working:change", {
+      changedId,
+      items: this.cloneItems(this.workingItems)
+    });
+  }
   generateId() {
     return Math.random().toString(36).substring(2, 9);
   }
   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;
@@ -4086,6 +4180,7 @@ var ImageTool = class {
     if (this.workingItems.some((existing) => existing.id === item.id)) return;
     this.workingItems = this.cloneItems([...this.workingItems, item]);
     this.updateImages();
+    this.emitWorkingChange(item.id);
   }
   async updateImage(id, updates, options = {}) {
     this.syncToolActiveFromWorkbench();
@@ -4193,7 +4288,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() {
@@ -4269,10 +4364,7 @@ var ImageTool = class {
         "image.frame.innerBackground",
         "rgba(0,0,0,0)"
       ) || "rgba(0,0,0,0)",
-      outerBackground: this.getConfig(
-        "image.frame.outerBackground",
-        "rgba(0,0,0,0.18)"
-      ) || "rgba(0,0,0,0.18)"
+      outerBackground: "#f5f5f5"
     };
   }
   resolveRenderImageState(item) {
@@ -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"
       }
     });
@@ -4416,10 +4508,21 @@ var ImageTool = class {
     const canvasW = this.canvasService.canvas.width || 0;
     const canvasH = this.canvasService.canvas.height || 0;
     const visual = this.getFrameVisualConfig();
-    const topH = Math.max(0, frame.top);
-    const bottomH = Math.max(0, canvasH - (frame.top + frame.height));
-    const leftW = Math.max(0, frame.left);
-    const rightW = Math.max(0, canvasW - (frame.left + frame.width));
+    const frameLeft = Math.max(0, Math.min(canvasW, frame.left));
+    const frameTop = Math.max(0, Math.min(canvasH, frame.top));
+    const frameRight = Math.max(
+      frameLeft,
+      Math.min(canvasW, frame.left + frame.width)
+    );
+    const frameBottom = Math.max(
+      frameTop,
+      Math.min(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 mask = [
       {
         id: "image.cropMask.top",
@@ -4443,7 +4546,7 @@ var ImageTool = class {
         data: { id: "image.cropMask.bottom", zIndex: 2 },
         props: {
           left: canvasW / 2,
-          top: frame.top + frame.height + bottomH / 2,
+          top: frameBottom + bottomH / 2,
           width: canvasW,
           height: bottomH,
           originX: "center",
@@ -4459,9 +4562,9 @@ var ImageTool = class {
         data: { id: "image.cropMask.left", zIndex: 3 },
         props: {
           left: leftW / 2,
-          top: frame.top + frame.height / 2,
+          top: frameTop + visibleFrameH / 2,
           width: leftW,
-          height: frame.height,
+          height: visibleFrameH,
           originX: "center",
           originY: "center",
           fill: visual.outerBackground,
@@ -4474,10 +4577,10 @@ var ImageTool = class {
         type: "rect",
         data: { id: "image.cropMask.right", zIndex: 4 },
         props: {
-          left: frame.left + frame.width + rightW / 2,
-          top: frame.top + frame.height / 2,
+          left: frameRight + rightW / 2,
+          top: frameTop + visibleFrameH / 2,
           width: rightW,
-          height: frame.height,
+          height: visibleFrameH,
           originX: "center",
           originY: "center",
           fill: visual.outerBackground,
@@ -4567,6 +4670,7 @@ var ImageTool = class {
     if (this.isToolActive) {
       this.updateImages();
     }
+    this.emitWorkingChange(id);
   }
   async updateImageInConfig(id, updates) {
     var _a, _b, _c, _d;
@@ -4647,6 +4751,7 @@ var ImageTool = class {
     this.isImageSelectionActive = true;
     this.focusedImageId = id;
     this.updateImages();
+    this.emitWorkingChange(id);
   }
   focusImageSelection(id) {
     if (!this.canvasService) return;
@@ -4739,6 +4844,7 @@ var ImageTool = class {
     this.hasWorkingChanges = false;
     this.workingItems = this.cloneItems(next);
     this.updateConfig(next);
+    this.emitWorkingChange(focusId);
     if (focusId) {
       this.focusedImageId = focusId;
       this.isImageSelectionActive = true;
@@ -4758,7 +4864,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 +4874,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 +4921,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 +5622,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 +5655,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.2",
   "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();
+    }
   }
+
 }