@pooder/kit 5.0.3 → 5.1.0

package/src/{image.ts → extensions/image.ts}

@@ -9,8 +9,7 @@ import {
   WorkbenchService,
 } from "@pooder/core";
 import { Canvas as FabricCanvas, Image as FabricImage, Point } from "fabric";
-import CanvasService from "./CanvasService";
-import type { RenderObjectSpec } from "./renderSpec";
+import { CanvasService, RenderObjectSpec } from "../services";
 import { computeSceneLayout, readSizeState } from "./sceneLayoutModel";
 
 export interface ImageItem {
@@ -57,8 +56,7 @@ interface FrameVisualConfig {
 
 interface UpsertImageOptions {
   id?: string;
-  mode?: "auto" | "replace" | "add";
-  createIfMissing?: boolean;
+  mode?: "replace" | "add";
   addOptions?: Partial<ImageItem>;
   fitOnAdd?: boolean;
 }
@@ -74,44 +72,26 @@ interface UpdateImageOptions {
   target?: "auto" | "config" | "working";
 }
 
-interface DetectBounds {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-interface DetectEdgeResult {
-  pathData: string;
-  rawBounds?: DetectBounds;
-  baseBounds?: DetectBounds;
-  imageWidth?: number;
-  imageHeight?: number;
+interface ExportCroppedImageOptions {
+  multiplier?: number;
+  format?: "png" | "jpeg";
 }
 
-interface ImageRenderSnapshot {
-  id: string;
-  centerX: number;
-  centerY: number;
-  objectScale: number;
-  sourceWidth: number;
-  sourceHeight: number;
+interface ExportUserCroppedImageOptions extends ExportCroppedImageOptions {
+  imageIds?: string[];
 }
 
-interface DetectFromFrameOptions {
-  expand?: number;
-  smoothing?: boolean;
-  simplifyTolerance?: number;
-  multiplier?: number;
-  debug?: boolean;
+interface ExportUserCroppedImageResult {
+  url: string;
+  width: number;
+  height: number;
+  multiplier: number;
+  format: "png" | "jpeg";
+  imageIds: string[];
 }
 
 const IMAGE_OBJECT_LAYER_ID = "image.user";
 const IMAGE_OVERLAY_LAYER_ID = "image-overlay";
-const IMAGE_REPLACE_GUARD_MS = 2500;
-const IMAGE_DETECT_EXPAND_DEFAULT = 30;
-const IMAGE_DETECT_SIMPLIFY_TOLERANCE_DEFAULT = 2;
-const IMAGE_DETECT_MULTIPLIER_DEFAULT = 2;
 
 export class ImageTool implements Extension {
   id = "pooder.kit.image";
@@ -131,7 +111,6 @@ export class ImageTool implements Extension {
   private isToolActive = false;
   private isImageSelectionActive = false;
   private focusedImageId: string | null = null;
-  private suppressSelectionClearUntil = 0;
   private renderSeq = 0;
   private dirtyTrackerDisposable?: { dispose(): void };
 
@@ -218,13 +197,10 @@ export class ImageTool implements Extension {
     const before = this.isToolActive;
     this.syncToolActiveFromWorkbench(event.id);
     if (!this.isToolActive) {
-      const now = Date.now();
-      const inGuardWindow =
-        now <= this.suppressSelectionClearUntil && !!this.focusedImageId;
-      if (!inGuardWindow) {
-        this.isImageSelectionActive = false;
-        this.focusedImageId = null;
-      }
+      this.setImageFocus(null, {
+        syncCanvasSelection: true,
+        skipRender: true,
+      });
     }
     this.debug("tool:activated", {
       id: event.id,
@@ -233,7 +209,6 @@ export class ImageTool implements Extension {
       before,
       isToolActive: this.isToolActive,
       focusedImageId: this.focusedImageId,
-      suppressSelectionClearUntil: this.suppressSelectionClearUntil,
     });
     if (!this.isToolActive && this.isDebugEnabled()) {
       console.trace("[ImageTool] tool deactivated trace");
@@ -271,16 +246,10 @@ export class ImageTool implements Extension {
   };
 
   private onSelectionCleared = () => {
-    const now = Date.now();
-    if (now <= this.suppressSelectionClearUntil && this.focusedImageId) {
-      this.debug("selection:cleared ignored", {
-        suppressUntil: this.suppressSelectionClearUntil,
-        focusedImageId: this.focusedImageId,
-      });
-      return;
-    }
-    this.isImageSelectionActive = false;
-    this.focusedImageId = null;
+    this.setImageFocus(null, {
+      syncCanvasSelection: false,
+      skipRender: true,
+    });
     this.debug("selection:cleared applied");
     this.updateImages();
   };
@@ -353,7 +322,7 @@ export class ImageTool implements Extension {
           id: "image.frame.strokeColor",
           type: "color",
           label: "Image Frame Stroke Color",
-          default: "#FF0000",
+          default: "#808080",
         },
         {
           id: "image.frame.strokeWidth",
@@ -369,7 +338,7 @@ export class ImageTool implements Extension {
           type: "select",
           label: "Image Frame Stroke Style",
           options: ["solid", "dashed", "hidden"],
-          default: "solid",
+          default: "dashed",
         },
         {
           id: "image.frame.dashLength",
@@ -444,12 +413,12 @@ export class ImageTool implements Extension {
           },
         },
         {
-          command: "exportImageFrameUrl",
-          title: "Export Image Frame Url",
+          command: "exportUserCroppedImage",
+          title: "Export User Cropped Image",
           handler: async (
-            options: { multiplier?: number; format?: "png" | "jpeg" } = {},
+            options: ExportUserCroppedImageOptions = {},
           ) => {
-            return await this.exportImageFrameUrl(options);
+            return await this.exportUserCroppedImage(options);
           },
         },
         {
@@ -474,6 +443,16 @@ export class ImageTool implements Extension {
             await this.fitImageToDefaultArea(id);
           },
         },
+        {
+          command: "focusImage",
+          title: "Focus Image",
+          handler: (
+            id: string | null,
+            options: { syncCanvasSelection?: boolean } = {},
+          ) => {
+            return this.setImageFocus(id, options);
+          },
+        },
         {
           command: "removeImage",
           title: "Remove Image",
@@ -483,8 +462,10 @@ export class ImageTool implements Extension {
             if (next.length !== this.items.length) {
               this.purgeSourceSizeCacheForItem(removed);
               if (this.focusedImageId === id) {
-                this.focusedImageId = null;
-                this.isImageSelectionActive = false;
+                this.setImageFocus(null, {
+                  syncCanvasSelection: true,
+                  skipRender: true,
+                });
               }
               this.updateConfig(next);
             }
@@ -506,8 +487,10 @@ export class ImageTool implements Extension {
           title: "Clear Images",
           handler: () => {
             this.sourceSizeBySrc.clear();
-            this.focusedImageId = null;
-            this.isImageSelectionActive = false;
+            this.setImageFocus(null, {
+              syncCanvasSelection: true,
+              skipRender: true,
+            });
             this.updateConfig([]);
           },
         },
@@ -584,29 +567,50 @@ export class ImageTool implements Extension {
     return Math.random().toString(36).substring(2, 9);
   }
 
-  private getImageIdFromActiveObject(): string | null {
-    const active = this.canvasService?.canvas.getActiveObject() as any;
-    if (
-      active?.data?.layerId === IMAGE_OBJECT_LAYER_ID &&
-      typeof active?.data?.id === "string"
-    ) {
-      return active.data.id;
-    }
-    return null;
+  private hasImageItem(id: string): boolean {
+    return (
+      this.items.some((item) => item.id === id) ||
+      this.workingItems.some((item) => item.id === id)
+    );
   }
 
-  private resolveReplaceTargetId(explicitId?: string | null): string | null {
-    const has = (id: string | null | undefined) =>
-      !!id && this.items.some((item) => item.id === id);
+  private setImageFocus(
+    id: string | null,
+    options: { syncCanvasSelection?: boolean; skipRender?: boolean } = {},
+  ) {
+    const syncCanvasSelection = options.syncCanvasSelection !== false;
 
-    if (has(explicitId)) return explicitId as string;
-    if (has(this.focusedImageId)) return this.focusedImageId as string;
+    if (id && !this.hasImageItem(id)) {
+      return { ok: false, reason: "image-not-found" as const };
+    }
+
+    this.focusedImageId = id;
+    this.isImageSelectionActive = !!id;
+
+    if (syncCanvasSelection && this.canvasService) {
+      const canvas = this.canvasService.canvas;
+      if (!id) {
+        canvas.discardActiveObject();
+      } else {
+        const obj = this.getImageObject(id);
+        if (obj) {
+          obj.set({
+            selectable: true,
+            evented: true,
+            hasControls: true,
+            hasBorders: true,
+          });
+          canvas.setActiveObject(obj);
+        }
+      }
+      this.canvasService.requestRenderAll();
+    }
 
-    const activeId = this.getImageIdFromActiveObject();
-    if (has(activeId)) return activeId;
+    if (!options.skipRender) {
+      this.updateImages();
+    }
 
-    if (this.items.length === 1) return this.items[0].id;
-    return null;
+    return { ok: true, id };
   }
 
   private async addImageEntry(
@@ -622,9 +626,6 @@ export class ImageTool implements Extension {
       ...options,
     } as ImageItem);
 
-    this.focusedImageId = id;
-    this.isImageSelectionActive = true;
-    this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
     const sessionDirtyBeforeAdd = this.isToolActive && this.hasWorkingChanges;
     const waitLoaded = this.waitImageLoaded(id, true);
     this.updateConfig([...this.items, newItem]);
@@ -634,7 +635,7 @@ export class ImageTool implements Extension {
       await this.fitImageToDefaultArea(id);
     }
     if (loaded) {
-      this.focusImageSelection(id);
+      this.setImageFocus(id);
     }
     return id;
   }
@@ -643,23 +644,20 @@ export class ImageTool implements Extension {
     url: string,
     options: UpsertImageOptions = {},
   ): Promise<{ id: string; mode: "replace" | "add" }> {
-    const mode = options.mode || "auto";
+    const mode = options.mode || (options.id ? "replace" : "add");
     const fitOnAdd = options.fitOnAdd !== false;
-    if (mode === "add") {
-      const id = await this.addImageEntry(url, options.addOptions, fitOnAdd);
-      return { id, mode: "add" };
-    }
-
-    const targetId = this.resolveReplaceTargetId(options.id ?? null);
-    if (targetId) {
+    if (mode === "replace") {
+      if (!options.id) {
+        throw new Error("replace-target-id-required");
+      }
+      const targetId = options.id;
+      if (!this.hasImageItem(targetId)) {
+        throw new Error("replace-target-not-found");
+      }
       await this.updateImageInConfig(targetId, { url });
       return { id: targetId, mode: "replace" };
     }
 
-    if (mode === "replace" || options.createIfMissing === false) {
-      throw new Error("replace-target-not-found");
-    }
-
     const id = await this.addImageEntry(url, options.addOptions, fitOnAdd);
     return { id, mode: "add" };
   }
@@ -870,12 +868,12 @@ export class ImageTool implements Extension {
   private getFrameVisualConfig(): FrameVisualConfig {
     const strokeStyleRaw = (this.getConfig<string>(
       "image.frame.strokeStyle",
-      "solid",
-    ) || "solid") as string;
+      "dashed",
+    ) || "dashed") as string;
     const strokeStyle: "solid" | "dashed" | "hidden" =
       strokeStyleRaw === "dashed" || strokeStyleRaw === "hidden"
         ? strokeStyleRaw
-        : "solid";
+        : "dashed";
 
     const strokeWidth = Number(
       this.getConfig<number>("image.frame.strokeWidth", 2) ?? 2,
@@ -886,8 +884,8 @@ export class ImageTool implements Extension {
 
     return {
       strokeColor:
-        this.getConfig<string>("image.frame.strokeColor", "#FF0000") ||
-        "#FF0000",
+        this.getConfig<string>("image.frame.strokeColor", "#808080") ||
+        "#808080",
       strokeWidth: Number.isFinite(strokeWidth) ? Math.max(0, strokeWidth) : 2,
       strokeStyle,
       dashLength: Number.isFinite(dashLength) ? Math.max(1, dashLength) : 8,
@@ -1199,8 +1197,10 @@ export class ImageTool implements Extension {
     const frame = this.getFrameRect();
     const desiredIds = new Set(renderItems.map((item) => item.id));
     if (this.focusedImageId && !desiredIds.has(this.focusedImageId)) {
-      this.focusedImageId = null;
-      this.isImageSelectionActive = false;
+      this.setImageFocus(null, {
+        syncCanvasSelection: false,
+        skipRender: true,
+      });
     }
 
     this.getImageObjects().forEach((obj: any) => {
@@ -1281,8 +1281,10 @@ export class ImageTool implements Extension {
     next[index] = this.normalizeItem({ ...next[index], ...updates });
     this.workingItems = next;
     this.hasWorkingChanges = true;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
+    this.setImageFocus(id, {
+      syncCanvasSelection: false,
+      skipRender: true,
+    });
     if (this.isToolActive) {
       this.updateImages();
     }
@@ -1318,16 +1320,13 @@ export class ImageTool implements Extension {
     this.updateConfig(next);
 
     if (replacingSource) {
-      this.focusedImageId = id;
-      this.isImageSelectionActive = true;
-      this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
       this.debug("replace:image:begin", { id, replacingUrl });
       this.purgeSourceSizeCacheForItem(base);
       const loaded = await this.waitImageLoaded(id, true);
       this.debug("replace:image:loaded", { id, loaded });
       if (loaded) {
         await this.refitImageToFrame(id);
-        this.focusImageSelection(id);
+        this.setImageFocus(id);
       }
     }
   }
@@ -1380,32 +1379,10 @@ export class ImageTool implements Extension {
     this.updateConfig(next);
     this.workingItems = this.cloneItems(next);
     this.hasWorkingChanges = false;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
     this.updateImages();
     this.emitWorkingChange(id);
   }
 
-  private focusImageSelection(id: string) {
-    if (!this.canvasService) return;
-    const obj = this.getImageObject(id);
-    if (!obj) return;
-
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
-    this.suppressSelectionClearUntil = Date.now() + 700;
-    obj.set({
-      selectable: true,
-      evented: true,
-      hasControls: true,
-      hasBorders: true,
-    });
-    this.canvasService.canvas.setActiveObject(obj);
-    this.debug("focus:image", { id });
-    this.canvasService.requestRenderAll();
-    this.updateImages();
-  }
-
   private async fitImageToArea(
     id: string,
     area: { width: number; height: number; left?: number; top?: number },
@@ -1473,16 +1450,13 @@ export class ImageTool implements Extension {
       return { ok: false, reason: "frame-not-ready" };
     }
 
-    const focusId =
-      this.resolveReplaceTargetId(this.focusedImageId) ||
-      (this.workingItems.length === 1 ? this.workingItems[0].id : null);
-
     const next: ImageItem[] = [];
     for (const item of this.workingItems) {
-      const url = await this.exportCroppedImageByIds([item.id], {
+      const exported = await this.exportCroppedImageByIds([item.id], {
         multiplier: 2,
         format: "png",
       });
+      const url = exported.url;
 
       const sourceUrl = item.sourceUrl || item.url;
       const previousCommitted = item.committedUrl;
@@ -1502,27 +1476,28 @@ export class ImageTool implements Extension {
     this.hasWorkingChanges = false;
     this.workingItems = this.cloneItems(next);
     this.updateConfig(next);
-    this.emitWorkingChange(focusId);
-    if (focusId) {
-      this.focusedImageId = focusId;
-      this.isImageSelectionActive = true;
-      this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
-      this.focusImageSelection(focusId);
-    }
+    this.emitWorkingChange(this.focusedImageId);
     return { ok: true };
   }
 
   private async exportCroppedImageByIds(
     imageIds: string[],
-    options: { multiplier?: number; format?: "png" | "jpeg" },
-  ): Promise<string> {
+    options: ExportCroppedImageOptions,
+  ): Promise<ExportUserCroppedImageResult> {
     if (!this.canvasService) {
       throw new Error("CanvasService not initialized");
     }
 
+    const normalizedIds = [...new Set(imageIds)].filter(
+      (id): id is string => typeof id === "string" && id.length > 0,
+    );
+    if (!normalizedIds.length) {
+      throw new Error("image-ids-required");
+    }
+
     const frame = this.getFrameRect();
     const multiplier = Math.max(1, options.multiplier ?? 2);
-    const format = options.format ?? "png";
+    const format: "png" | "jpeg" = options.format === "jpeg" ? "jpeg" : "png";
 
     const width = Math.max(1, Math.round(frame.width * multiplier));
     const height = Math.max(1, Math.round(frame.height * multiplier));
@@ -1536,61 +1511,84 @@ export class ImageTool implements Extension {
     } as any);
     tempCanvas.setDimensions({ width, height });
 
-    const idSet = new Set(imageIds);
-    const sourceObjects = this.canvasService.canvas
-      .getObjects()
-      .filter((obj: any) => {
-        return (
-          obj?.data?.layerId === IMAGE_OBJECT_LAYER_ID &&
-          typeof obj?.data?.id === "string" &&
-          idSet.has(obj.data.id)
-        );
-      });
+    try {
+      const idSet = new Set(normalizedIds);
+      const sourceObjects = this.canvasService.canvas
+        .getObjects()
+        .filter((obj: any) => {
+          return (
+            obj?.data?.layerId === IMAGE_OBJECT_LAYER_ID &&
+            typeof obj?.data?.id === "string" &&
+            idSet.has(obj.data.id)
+          );
+        });
+
+      if (!sourceObjects.length) {
+        throw new Error("image-objects-not-found");
+      }
 
-    for (const source of sourceObjects as any[]) {
-      const clone = await source.clone();
-      const center = source.getCenterPoint
-        ? source.getCenterPoint()
-        : new Point(source.left ?? 0, source.top ?? 0);
+      for (const source of sourceObjects as any[]) {
+        const clone = await source.clone();
+        const center = source.getCenterPoint
+          ? source.getCenterPoint()
+          : new Point(source.left ?? 0, source.top ?? 0);
 
-      clone.set({
-        originX: "center",
-        originY: "center",
-        left: (center.x - frame.left) * multiplier,
-        top: (center.y - frame.top) * multiplier,
-        scaleX: (source.scaleX || 1) * multiplier,
-        scaleY: (source.scaleY || 1) * multiplier,
-        angle: source.angle || 0,
-        selectable: false,
-        evented: false,
-      });
-      clone.setCoords();
-      tempCanvas.add(clone);
-    }
+        clone.set({
+          originX: "center",
+          originY: "center",
+          left: (center.x - frame.left) * multiplier,
+          top: (center.y - frame.top) * multiplier,
+          scaleX: (source.scaleX || 1) * multiplier,
+          scaleY: (source.scaleY || 1) * multiplier,
+          angle: source.angle || 0,
+          selectable: false,
+          evented: false,
+        });
+        clone.setCoords();
+        tempCanvas.add(clone);
+      }
 
-    tempCanvas.renderAll();
-    const dataUrl = tempCanvas.toDataURL({ format, multiplier: 1 });
-    tempCanvas.dispose();
+      tempCanvas.renderAll();
+      const blob = await tempCanvas.toBlob({ format, multiplier: 1 });
+      if (!blob) {
+        throw new Error("image-export-failed");
+      }
 
-    const blob = await (await fetch(dataUrl)).blob();
-    return URL.createObjectURL(blob);
+      return {
+        url: URL.createObjectURL(blob),
+        width,
+        height,
+        multiplier,
+        format,
+        imageIds: (sourceObjects as any[])
+          .map((obj: any) => obj?.data?.id)
+          .filter((id: any): id is string => typeof id === "string"),
+      };
+    } finally {
+      tempCanvas.dispose();
+    }
   }
 
-  private async exportImageFrameUrl(
-    options: { multiplier?: number; format?: "png" | "jpeg" } = {},
-  ): Promise<{ url: string }> {
+  private async exportUserCroppedImage(
+    options: ExportUserCroppedImageOptions = {},
+  ): Promise<ExportUserCroppedImageResult> {
     if (!this.canvasService) {
       throw new Error("CanvasService not initialized");
     }
 
-    const imageIds = this.getImageObjects()
-      .map((obj: any) => obj?.data?.id)
-      .filter((id: any) => typeof id === "string");
+    await this.updateImagesAsync();
+    this.syncToolActiveFromWorkbench();
 
-    const url = await this.exportCroppedImageByIds(
-      imageIds as string[],
-      options,
-    );
-    return { url };
+    const imageIds =
+      options.imageIds && options.imageIds.length > 0
+        ? options.imageIds
+        : (this.isToolActive ? this.workingItems : this.items).map(
+            (item) => item.id,
+          );
+    if (!imageIds.length) {
+      throw new Error("no-images-to-export");
+    }
+
+    return await this.exportCroppedImageByIds(imageIds, options);
   }
 }

package/src/extensions/index.ts

@@ -0,0 +1,11 @@
+export * from "./background";
+export * from "./image";
+export * from "./size";
+export * from "./dieline";
+export * from "./feature";
+export * from "./film";
+export * from "./mirror";
+export * from "./ruler";
+export * from "./white-ink";
+export { SceneLayoutService } from "./sceneLayout";
+export { SceneVisibilityService } from "./sceneVisibility";

package/src/{maskOps.ts → extensions/maskOps.ts}

@@ -10,6 +10,13 @@ export interface CreateMaskOptions {
   alphaOpaqueCutoff?: number;
 }
 
+export interface AlphaAnalysis {
+  total: number;
+  minAlpha: number;
+  belowOpaqueRatio: number;
+  veryTransparentRatio: number;
+}
+
 export function createMask(
   imageData: ImageData,
   options: CreateMaskOptions,
@@ -55,7 +62,21 @@ export function createMask(
   return mask;
 }
 
-function inferMaskMode(imageData: ImageData, alphaOpaqueCutoff: number): MaskMode {
+export function inferMaskMode(
+  imageData: ImageData,
+  alphaOpaqueCutoff: number,
+): MaskMode {
+  const analysis = analyzeAlpha(imageData, alphaOpaqueCutoff);
+  if (analysis.minAlpha === 255) return "whitebg";
+  if (analysis.veryTransparentRatio >= 0.0005) return "alpha";
+  if (analysis.belowOpaqueRatio >= 0.01) return "alpha";
+  return "whitebg";
+}
+
+export function analyzeAlpha(
+  imageData: ImageData,
+  alphaOpaqueCutoff: number,
+): AlphaAnalysis {
   const { data } = imageData;
   const total = data.length / 4;
 
@@ -70,15 +91,12 @@ function inferMaskMode(imageData: ImageData, alphaOpaqueCutoff: number): MaskMod
     if (a < 32) veryTransparent++;
   }
 
-  if (minAlpha === 255) return "whitebg";
-
-  const belowOpaqueRatio = belowOpaque / total;
-  const veryTransparentRatio = veryTransparent / total;
-
-  if (veryTransparentRatio >= 0.0005) return "alpha";
-  if (belowOpaqueRatio >= 0.01) return "alpha";
-
-  return "whitebg";
+  return {
+    total,
+    minAlpha,
+    belowOpaqueRatio: belowOpaque / total,
+    veryTransparentRatio: veryTransparent / total,
+  };
 }
 
 export function circularMorphology(