@pooder/kit 5.0.0 → 5.0.2

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,17 @@
 # @pooder/kit
 
+## 5.0.2
+
+### Patch Changes
+
+- bugfix
+
+## 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 {
@@ -284,6 +286,7 @@ declare class ImageTool implements Extension {
     private normalizeItem;
     private normalizeItems;
     private cloneItems;
+    private emitWorkingChange;
     private generateId;
     private getImageIdFromActiveObject;
     private resolveReplaceTargetId;

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 {
@@ -284,6 +286,7 @@ declare class ImageTool implements Extension {
     private normalizeItem;
     private normalizeItems;
     private cloneItems;
+    private emitWorkingChange;
     private generateId;
     private getImageIdFromActiveObject;
     private resolveReplaceTargetId;

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);
@@ -3755,10 +3847,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"
     );
@@ -3798,10 +3887,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();
@@ -3910,7 +3996,7 @@ var ImageTool = class {
           id: "image.frame.outerBackground",
           type: "color",
           label: "Image Frame Outer Background",
-          default: "rgba(0,0,0,0.18)"
+          default: "#f5f5f5"
         }
       ],
       [import_core5.ContributionPointIds.COMMANDS]: [
@@ -3953,6 +4039,7 @@ var ImageTool = class {
             this.workingItems = this.cloneItems(this.items);
             this.hasWorkingChanges = false;
             this.updateImages();
+            this.emitWorkingChange();
           }
         },
         {
@@ -4067,13 +4154,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;
@@ -4135,6 +4229,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();
@@ -4242,7 +4337,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() {
@@ -4318,10 +4413,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) {
@@ -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"
       }
     });
@@ -4465,10 +4557,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",
@@ -4492,7 +4595,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",
@@ -4508,9 +4611,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,
@@ -4523,10 +4626,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,
@@ -4616,6 +4719,7 @@ var ImageTool = class {
     if (this.isToolActive) {
       this.updateImages();
     }
+    this.emitWorkingChange(id);
   }
   async updateImageInConfig(id, updates) {
     var _a, _b, _c, _d;
@@ -4696,6 +4800,7 @@ var ImageTool = class {
     this.isImageSelectionActive = true;
     this.focusedImageId = id;
     this.updateImages();
+    this.emitWorkingChange(id);
   }
   focusImageSelection(id) {
     if (!this.canvasService) return;
@@ -4788,6 +4893,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;
@@ -4817,7 +4923,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 +4968,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 +5669,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 +5702,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);