@pooder/kit 5.0.4 → 5.2.0

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

@@ -8,10 +8,19 @@ import {
   ToolSessionService,
   WorkbenchService,
 } from "@pooder/core";
-import { Canvas as FabricCanvas, Image as FabricImage, Point } from "fabric";
-import CanvasService from "./CanvasService";
-import type { RenderObjectSpec } from "./renderSpec";
-import { computeSceneLayout, readSizeState } from "./sceneLayoutModel";
+import {
+  Canvas as FabricCanvas,
+  Image as FabricImage,
+  Pattern,
+  Point,
+} from "fabric";
+import { CanvasService, RenderObjectSpec } from "../services";
+import { generateDielinePath } from "./geometry";
+import {
+  buildSceneGeometry,
+  computeSceneLayout,
+  readSizeState,
+} from "./sceneLayoutModel";
 
 export interface ImageItem {
   id: string;
@@ -55,6 +64,15 @@ interface FrameVisualConfig {
   outerBackground: string;
 }
 
+type DielineShape = "rect" | "circle" | "ellipse" | "custom";
+type ShapeOverlayShape = Exclude<DielineShape, "custom">;
+
+interface SceneGeometryLike {
+  shape: DielineShape;
+  radius: number;
+  offset: number;
+}
+
 interface UpsertImageOptions {
   id?: string;
   mode?: "replace" | "add";
@@ -73,43 +91,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_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,6 +132,8 @@ export class ImageTool implements Extension {
   private focusedImageId: string | null = null;
   private renderSeq = 0;
   private dirtyTrackerDisposable?: { dispose(): void };
+  private cropShapeHatchPattern?: Pattern;
+  private cropShapeHatchPatternColor?: string;
 
   activate(context: ExtensionContext) {
     this.context = context;
@@ -146,6 +149,7 @@ export class ImageTool implements Extension {
     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:geometry:change", this.onSceneGeometryChanged);
 
     const configService = context.services.get<ConfigurationService>(
       "ConfigurationService",
@@ -193,8 +197,11 @@ export class ImageTool implements Extension {
     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:geometry:change", this.onSceneGeometryChanged);
     this.dirtyTrackerDisposable?.dispose();
     this.dirtyTrackerDisposable = undefined;
+    this.cropShapeHatchPattern = undefined;
+    this.cropShapeHatchPatternColor = undefined;
 
     this.clearRenderedImages();
     if (this.canvasService) {
@@ -276,6 +283,10 @@ export class ImageTool implements Extension {
     this.updateImages();
   };
 
+  private onSceneGeometryChanged = () => {
+    this.updateImages();
+  };
+
   private syncToolActiveFromWorkbench(fallbackId?: string | null) {
     const wb = this.context?.services.get<WorkbenchService>("WorkbenchService");
     const activeId = wb?.activeToolId;
@@ -431,12 +442,10 @@ export class ImageTool implements Extension {
           },
         },
         {
-          command: "exportImageFrameUrl",
-          title: "Export Image Frame Url",
-          handler: async (
-            options: { multiplier?: number; format?: "png" | "jpeg" } = {},
-          ) => {
-            return await this.exportImageFrameUrl(options);
+          command: "exportUserCroppedImage",
+          title: "Export User Cropped Image",
+          handler: async (options: ExportUserCroppedImageOptions = {}) => {
+            return await this.exportUserCroppedImage(options);
           },
         },
         {
@@ -912,10 +921,268 @@ export class ImageTool implements Extension {
           "image.frame.innerBackground",
           "rgba(0,0,0,0)",
         ) || "rgba(0,0,0,0)",
-      outerBackground: "#f5f5f5",
+      outerBackground:
+        this.getConfig<string>("image.frame.outerBackground", "#f5f5f5") ||
+        "#f5f5f5",
+    };
+  }
+
+  private toSceneGeometryLike(raw: any): SceneGeometryLike | null {
+    const shape = raw?.shape;
+    if (
+      shape !== "rect" &&
+      shape !== "circle" &&
+      shape !== "ellipse" &&
+      shape !== "custom"
+    ) {
+      return null;
+    }
+
+    const radius = Number(raw?.radius);
+    const offset = Number(raw?.offset);
+    return {
+      shape,
+      radius: Number.isFinite(radius) ? radius : 0,
+      offset: Number.isFinite(offset) ? offset : 0,
     };
   }
 
+  private async resolveSceneGeometryForOverlay(): Promise<SceneGeometryLike | null> {
+    if (!this.context) return null;
+    const commandService = this.context.services.get<any>("CommandService");
+    if (commandService) {
+      try {
+        const raw = await Promise.resolve(
+          commandService.executeCommand("getSceneGeometry"),
+        );
+        const geometry = this.toSceneGeometryLike(raw);
+        if (geometry) {
+          this.debug("overlay:sceneGeometry:command", geometry);
+          return geometry;
+        }
+        this.debug("overlay:sceneGeometry:command:invalid", { raw });
+      } catch (error) {
+        this.debug("overlay:sceneGeometry:command:error", {
+          error: error instanceof Error ? error.message : String(error),
+        });
+      }
+    }
+
+    if (!this.canvasService) return null;
+    const configService = this.context.services.get<ConfigurationService>(
+      "ConfigurationService",
+    );
+    if (!configService) return null;
+
+    const sizeState = readSizeState(configService);
+    const layout = computeSceneLayout(this.canvasService, sizeState);
+    if (!layout) {
+      this.debug("overlay:sceneGeometry:fallback:missing-layout");
+      return null;
+    }
+
+    const geometry = this.toSceneGeometryLike(
+      buildSceneGeometry(configService, layout),
+    );
+    if (geometry) {
+      this.debug("overlay:sceneGeometry:fallback", geometry);
+    }
+    return geometry;
+  }
+
+  private resolveCutShapeRadius(
+    geometry: SceneGeometryLike,
+    frame: FrameRect,
+  ): number {
+    const visualRadius = Number.isFinite(geometry.radius)
+      ? Math.max(0, geometry.radius)
+      : 0;
+    const visualOffset = Number.isFinite(geometry.offset) ? geometry.offset : 0;
+    const rawCutRadius =
+      visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
+    const maxRadius = Math.max(0, Math.min(frame.width, frame.height) / 2);
+    return Math.max(0, Math.min(maxRadius, rawCutRadius));
+  }
+
+  private getCropShapeHatchPattern(
+    color = "rgba(255, 0, 0, 0.6)",
+  ): Pattern | undefined {
+    if (typeof document === "undefined") return undefined;
+    if (
+      this.cropShapeHatchPattern &&
+      this.cropShapeHatchPatternColor === color
+    ) {
+      return this.cropShapeHatchPattern;
+    }
+
+    const size = 16;
+    const patternCanvas = document.createElement("canvas");
+    patternCanvas.width = size;
+    patternCanvas.height = size;
+    const ctx = patternCanvas.getContext("2d");
+    if (!ctx) return undefined;
+
+    ctx.clearRect(0, 0, size, size);
+    ctx.fillStyle = "rgba(255, 0, 0, 0.08)";
+    ctx.fillRect(0, 0, size, size);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.moveTo(-size, size);
+    ctx.lineTo(size, -size);
+    ctx.moveTo(-size / 2, size + size / 2);
+    ctx.lineTo(size + size / 2, -size / 2);
+    ctx.moveTo(0, size);
+    ctx.lineTo(size, 0);
+    ctx.moveTo(size / 2, size + size / 2);
+    ctx.lineTo(size + size + size / 2, -size / 2);
+    ctx.stroke();
+
+    const pattern = new Pattern({
+      source: patternCanvas,
+      // @ts-ignore: Fabric Pattern accepts canvas source here.
+      repetition: "repeat",
+    });
+    this.cropShapeHatchPattern = pattern;
+    this.cropShapeHatchPatternColor = color;
+    return pattern;
+  }
+
+  private buildCropShapeOverlaySpecs(
+    frame: FrameRect,
+    sceneGeometry: SceneGeometryLike | null,
+  ): RenderObjectSpec[] {
+    if (!sceneGeometry) {
+      this.debug("overlay:shape:skip", { reason: "scene-geometry-missing" });
+      return [];
+    }
+    if (sceneGeometry.shape === "custom") {
+      this.debug("overlay:shape:skip", { reason: "shape-custom" });
+      return [];
+    }
+
+    const shape = sceneGeometry.shape as ShapeOverlayShape;
+    const inset = 0;
+    const shapeWidth = Math.max(1, frame.width);
+    const shapeHeight = Math.max(1, frame.height);
+    const radius = this.resolveCutShapeRadius(sceneGeometry, frame);
+
+    this.debug("overlay:shape:geometry", {
+      shape,
+      frameWidth: frame.width,
+      frameHeight: frame.height,
+      offset: sceneGeometry.offset,
+      inset,
+      shapeWidth,
+      shapeHeight,
+      baseRadius: sceneGeometry.radius,
+      radius,
+    });
+
+    const isSameAsFrame =
+      Math.abs(shapeWidth - frame.width) <= 0.0001 &&
+      Math.abs(shapeHeight - frame.height) <= 0.0001;
+    if (shape === "rect" && radius <= 0.0001 && isSameAsFrame) {
+      this.debug("overlay:shape:skip", {
+        reason: "shape-rect-no-radius",
+      });
+      return [];
+    }
+
+    const baseOptions = {
+      shape,
+      width: shapeWidth,
+      height: shapeHeight,
+      radius,
+      x: frame.width / 2,
+      y: frame.height / 2,
+      features: [],
+      canvasWidth: frame.width,
+      canvasHeight: frame.height,
+    };
+
+    try {
+      const shapePathData = generateDielinePath(baseOptions);
+      const outerRectPathData = `M 0 0 L ${frame.width} 0 L ${frame.width} ${frame.height} L 0 ${frame.height} Z`;
+      const hatchPathData = `${outerRectPathData} ${shapePathData}`;
+      if (!shapePathData || !hatchPathData) {
+        this.debug("overlay:shape:skip", {
+          reason: "path-generation-empty",
+          shape,
+          radius,
+        });
+        return [];
+      }
+
+      const patternFill = this.getCropShapeHatchPattern();
+      const hatchFill = patternFill || "rgba(255, 0, 0, 0.22)";
+      const hatchPathLength = hatchPathData.length;
+      const shapePathLength = shapePathData.length;
+      const specs: RenderObjectSpec[] = [
+        {
+          id: "image.cropShapeHatch",
+          type: "path",
+          data: { id: "image.cropShapeHatch", zIndex: 5 },
+          props: {
+            pathData: hatchPathData,
+            left: frame.left,
+            top: frame.top,
+            originX: "left",
+            originY: "top",
+            fill: hatchFill,
+            opacity: patternFill ? 1 : 0.8,
+            stroke: null,
+            fillRule: "evenodd",
+            selectable: false,
+            evented: false,
+            excludeFromExport: true,
+            objectCaching: false,
+          },
+        },
+        {
+          id: "image.cropShapePath",
+          type: "path",
+          data: { id: "image.cropShapePath", zIndex: 6 },
+          props: {
+            pathData: shapePathData,
+            left: frame.left,
+            top: frame.top,
+            originX: "left",
+            originY: "top",
+            fill: "rgba(0,0,0,0)",
+            stroke: "rgba(255, 0, 0, 0.9)",
+            strokeWidth: 1,
+            selectable: false,
+            evented: false,
+            excludeFromExport: true,
+            objectCaching: false,
+          },
+        },
+      ];
+      this.debug("overlay:shape:built", {
+        shape,
+        radius,
+        inset,
+        shapeWidth,
+        shapeHeight,
+        fillRule: "evenodd",
+        shapePathLength,
+        hatchPathLength,
+        hatchFillType:
+          hatchFill && typeof hatchFill === "object" ? "pattern" : "color",
+        ids: specs.map((spec) => spec.id),
+      });
+      return specs;
+    } catch (error) {
+      this.debug("overlay:shape:error", {
+        shape,
+        radius,
+        error: error instanceof Error ? error.message : String(error),
+      });
+      return [];
+    }
+  }
+
   private resolveRenderImageState(item: ImageItem): RenderImageState {
     const active = this.isToolActive;
     const sourceUrl = item.sourceUrl || item.url;
@@ -980,6 +1247,21 @@ export class ImageTool implements Extension {
     return obj?._originalElement?.src;
   }
 
+  private applyImageControlVisibility(obj: any) {
+    if (typeof obj?.setControlsVisibility !== "function") return;
+    obj.setControlsVisibility({
+      mt: false,
+      mb: false,
+      ml: false,
+      mr: false,
+      tl: true,
+      tr: true,
+      bl: true,
+      br: true,
+      mtr: true,
+    });
+  }
+
   private async upsertImageObject(
     item: ImageItem,
     frame: FrameRect,
@@ -1028,6 +1310,7 @@ export class ImageTool implements Extension {
         type: "image-item",
       },
     });
+    this.applyImageControlVisibility(obj);
     obj.setCoords();
 
     const resolver = this.loadResolvers.get(item.id);
@@ -1065,9 +1348,25 @@ export class ImageTool implements Extension {
     overlayObjects.forEach((obj) => {
       canvas.bringObjectToFront(obj);
     });
+
+    if (this.isDebugEnabled()) {
+      const stack = canvas
+        .getObjects()
+        .map((obj: any, index: number) => ({
+          index,
+          id: obj?.data?.id,
+          layerId: obj?.data?.layerId,
+          zIndex: obj?.data?.zIndex,
+        }))
+        .filter((item) => item.layerId === IMAGE_OVERLAY_LAYER_ID);
+      this.debug("overlay:stack", stack);
+    }
   }
 
-  private buildOverlaySpecs(frame: FrameRect): RenderObjectSpec[] {
+  private buildOverlaySpecs(
+    frame: FrameRect,
+    sceneGeometry: SceneGeometryLike | null,
+  ): RenderObjectSpec[] {
     const visible = this.isImageEditingVisible();
     if (
       !visible ||
@@ -1105,6 +1404,7 @@ export class ImageTool implements Extension {
     const bottomH = Math.max(0, canvasH - frameBottom);
     const leftW = frameLeft;
     const rightW = Math.max(0, canvasW - frameRight);
+    const shapeOverlay = this.buildCropShapeOverlaySpecs(frame, sceneGeometry);
 
     const mask: RenderObjectSpec[] = [
       {
@@ -1176,7 +1476,7 @@ export class ImageTool implements Extension {
     const frameSpec: RenderObjectSpec = {
       id: "image.cropFrame",
       type: "rect",
-      data: { id: "image.cropFrame", zIndex: 5 },
+      data: { id: "image.cropFrame", zIndex: 7 },
       props: {
         left: frame.left + frame.width / 2,
         top: frame.top + frame.height / 2,
@@ -1199,7 +1499,16 @@ export class ImageTool implements Extension {
       },
     };
 
-    return [...mask, frameSpec];
+    const specs = [...mask, ...shapeOverlay, frameSpec];
+    this.debug("overlay:built", {
+      frame,
+      shape: sceneGeometry?.shape,
+      overlayIds: specs.map((spec) => ({
+        id: spec.id,
+        zIndex: spec.data?.zIndex,
+      })),
+    });
+    return specs;
   }
 
   private updateImages() {
@@ -1235,7 +1544,10 @@ export class ImageTool implements Extension {
     if (seq !== this.renderSeq) return;
 
     this.syncImageZOrder(renderItems);
-    const overlaySpecs = this.buildOverlaySpecs(frame);
+    const sceneGeometry = await this.resolveSceneGeometryForOverlay();
+    if (seq !== this.renderSeq) return;
+
+    const overlaySpecs = this.buildOverlaySpecs(frame, sceneGeometry);
     await this.canvasService.applyObjectSpecsToRootLayer(
       IMAGE_OVERLAY_LAYER_ID,
       overlaySpecs,
@@ -1470,10 +1782,11 @@ export class ImageTool implements Extension {
 
     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;
@@ -1499,15 +1812,22 @@ export class ImageTool implements Extension {
 
   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));
@@ -1521,61 +1841,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";