@pooder/kit 5.0.4 → 5.1.0

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

@@ -212,8 +212,14 @@ function createBaseShape(options: GeometryOptions): paper.PathItem {
       radius: [Math.max(0, width / 2), Math.max(0, height / 2)],
     });
   } else if (shape === "custom" && pathData) {
-    const path = new paper.Path();
-    path.pathData = pathData;
+    const hasMultipleSubPaths = ((pathData.match(/[Mm]/g) || []).length ?? 0) > 1;
+    const path: paper.PathItem = hasMultipleSubPaths
+      ? new paper.CompoundPath(pathData)
+      : (() => {
+          const single = new paper.Path();
+          single.pathData = pathData;
+          return single;
+        })();
     // Align center
     path.position = center;
     if (
@@ -233,6 +239,37 @@ function createBaseShape(options: GeometryOptions): paper.PathItem {
   }
 }
 
+function resolveBridgeBasePath(
+  shape: paper.PathItem,
+  anchor: paper.Point,
+): paper.Path | null {
+  if (shape instanceof paper.Path) {
+    return shape;
+  }
+
+  if (shape instanceof paper.CompoundPath) {
+    const children = (shape.children || []).filter(
+      (child): child is paper.Path => child instanceof paper.Path,
+    );
+    if (!children.length) return null;
+    let best = children[0];
+    let bestDistance = Infinity;
+    for (const child of children) {
+      const location = child.getNearestLocation(anchor);
+      const point = location?.point;
+      if (!point) continue;
+      const distance = point.getDistance(anchor);
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        best = child;
+      }
+    }
+    return best;
+  }
+
+  return null;
+}
+
 /**
  * Creates a Paper.js Item for a single feature.
  */
@@ -307,113 +344,122 @@ function getPerimeterShape(options: GeometryOptions): paper.PathItem {
           const inset = Math.min(1, Math.max(0, itemBounds.width * 0.01));
           const xLeft = itemBounds.left + inset;
           const xRight = itemBounds.right - inset;
-
-          if (!(mainShape instanceof paper.Path)) {
-            throw new Error("Geometry: Bridge requires base shape to be a Path");
-          }
-
-          const leftHit = getExitHit({
-            mainShape,
-            x: xLeft,
-            bridgeBottom,
-            toY,
-            eps,
-            delta,
-            overlap,
-            op: f.operation,
-          });
-          const rightHit = getExitHit({
-            mainShape,
-            x: xRight,
-            bridgeBottom,
-            toY,
-            eps,
-            delta,
-            overlap,
-            op: f.operation,
-          });
-
-          if (!leftHit || !rightHit || xRight - xLeft <= eps) {
-            throw new Error("Geometry: Bridge ray intersection not found");
-          }
-
-          const path = mainShape as paper.Path;
-          const pathLength = path.length;
-          const leftOffset = leftHit.location.offset;
-          const rightOffset = rightHit.location.offset;
-
-          const distanceA = wrappedDistance(pathLength, leftOffset, rightOffset);
-          const distanceB = wrappedDistance(pathLength, rightOffset, leftOffset);
-          const countFor = (d: number) => Math.max(8, Math.min(80, Math.ceil(d / 6)));
-
-          const offsetsA = sampleWrappedOffsets(
-            pathLength,
-            leftOffset,
-            rightOffset,
-            countFor(distanceA),
-          );
-
-          const offsetsB = sampleWrappedOffsets(
-            pathLength,
-            rightOffset,
-            leftOffset,
-            countFor(distanceB),
-          );
-
-          const pointsA = offsetsA
-            .map((o) => path.getPointAt(o))
-            .filter((p): p is paper.Point => Boolean(p));
-          const pointsB = offsetsB
-            .map((o) => path.getPointAt(o))
-            .filter((p): p is paper.Point => Boolean(p));
-
-          if (pointsA.length < 2 || pointsB.length < 2) {
-            throw new Error("Geometry: Bridge contour sampling failed");
+          const bridgeBasePath = resolveBridgeBasePath(mainShape, center);
+          const canBridge = !!bridgeBasePath && xRight - xLeft > eps;
+
+          if (canBridge && bridgeBasePath) {
+            const leftHit = getExitHit({
+              mainShape: bridgeBasePath,
+              x: xLeft,
+              bridgeBottom,
+              toY,
+              eps,
+              delta,
+              overlap,
+              op: f.operation,
+            });
+            const rightHit = getExitHit({
+              mainShape: bridgeBasePath,
+              x: xRight,
+              bridgeBottom,
+              toY,
+              eps,
+              delta,
+              overlap,
+              op: f.operation,
+            });
+
+            if (leftHit && rightHit) {
+              const pathLength = bridgeBasePath.length;
+              const leftOffset = leftHit.location.offset;
+              const rightOffset = rightHit.location.offset;
+
+              const distanceA = wrappedDistance(pathLength, leftOffset, rightOffset);
+              const distanceB = wrappedDistance(pathLength, rightOffset, leftOffset);
+              const countFor = (d: number) =>
+                Math.max(8, Math.min(80, Math.ceil(d / 6)));
+
+              const offsetsA = sampleWrappedOffsets(
+                pathLength,
+                leftOffset,
+                rightOffset,
+                countFor(distanceA),
+              );
+
+              const offsetsB = sampleWrappedOffsets(
+                pathLength,
+                rightOffset,
+                leftOffset,
+                countFor(distanceB),
+              );
+
+              const pointsA = offsetsA
+                .map((o) => bridgeBasePath.getPointAt(o))
+                .filter((p): p is paper.Point => Boolean(p));
+              const pointsB = offsetsB
+                .map((o) => bridgeBasePath.getPointAt(o))
+                .filter((p): p is paper.Point => Boolean(p));
+
+              if (pointsA.length >= 2 && pointsB.length >= 2) {
+                let topBase = selectOuterChain({
+                  mainShape: bridgeBasePath,
+                  pointsA,
+                  pointsB,
+                  delta,
+                  overlap,
+                  op: f.operation,
+                });
+
+                const dist2 = (a: paper.Point, b: paper.Point) => {
+                  const dx = a.x - b.x;
+                  const dy = a.y - b.y;
+                  return dx * dx + dy * dy;
+                };
+
+                if (
+                  dist2(topBase[0], leftHit.point) >
+                  dist2(topBase[0], rightHit.point)
+                ) {
+                  topBase = topBase.slice().reverse();
+                }
+
+                topBase = topBase.slice();
+                topBase[0] = leftHit.point;
+                topBase[topBase.length - 1] = rightHit.point;
+
+                const capShiftY =
+                  f.operation === "subtract"
+                    ? -Math.max(overlap * 2, delta)
+                    : overlap;
+                const topPoints = topBase.map((p) =>
+                  p.add(new paper.Point(0, capShiftY)),
+                );
+
+                const bridgeBottomY = bridgeBottom + overlap * 2;
+                const bridgePoly = new paper.Path({ insert: false });
+                for (const p of topPoints) bridgePoly.add(p);
+                bridgePoly.add(new paper.Point(xRight, bridgeBottomY));
+                bridgePoly.add(new paper.Point(xLeft, bridgeBottomY));
+                bridgePoly.closed = true;
+
+                const unitedItem = item.unite(bridgePoly);
+                item.remove();
+                bridgePoly.remove();
+
+                if (f.operation === "add") {
+                  adds.push(unitedItem);
+                } else {
+                  subtracts.push(unitedItem);
+                }
+                return;
+              }
+            }
           }
 
-          let topBase = selectOuterChain({
-            mainShape,
-            pointsA,
-            pointsB,
-            delta,
-            overlap,
-            op: f.operation,
-          });
-
-          const dist2 = (a: paper.Point, b: paper.Point) => {
-            const dx = a.x - b.x;
-            const dy = a.y - b.y;
-            return dx * dx + dy * dy;
-          };
-
-          if (dist2(topBase[0], leftHit.point) > dist2(topBase[0], rightHit.point)) {
-            topBase = topBase.slice().reverse();
-          }
-
-          topBase = topBase.slice();
-          topBase[0] = leftHit.point;
-          topBase[topBase.length - 1] = rightHit.point;
-
-          const capShiftY = f.operation === "subtract" ? -Math.max(overlap * 2, delta) : overlap;
-          const topPoints = topBase.map(
-            (p) => p.add(new paper.Point(0, capShiftY)),
-          );
-
-          const bridgeBottomY = bridgeBottom + overlap * 2;
-          const bridgePoly = new paper.Path({ insert: false });
-          for (const p of topPoints) bridgePoly.add(p);
-          bridgePoly.add(new paper.Point(xRight, bridgeBottomY));
-          bridgePoly.add(new paper.Point(xLeft, bridgeBottomY));
-          bridgePoly.closed = true;
-
-          const unitedItem = item.unite(bridgePoly);
-          item.remove();
-          bridgePoly.remove();
-
           if (f.operation === "add") {
-            adds.push(unitedItem);
+            adds.push(item);
           } else {
-            subtracts.push(unitedItem);
+            subtracts.push(item);
           }
         } else {
           if (f.operation === "add") {

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 {
@@ -73,43 +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_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";
@@ -431,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);
           },
         },
         {
@@ -1470,10 +1452,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 +1482,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 +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(

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

@@ -5,7 +5,7 @@ import {
   CommandContribution,
   ConfigurationContribution,
 } from "@pooder/core";
-import CanvasService from "./CanvasService";
+import { CanvasService } from "../services";
 
 export class MirrorTool implements Extension {
   id = "pooder.kit.mirror";

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

@@ -7,8 +7,8 @@ import {
   ConfigurationService,
 } from "@pooder/core";
 import { Rect, Line, Text, Group, Polygon } from "fabric";
-import CanvasService from "./CanvasService";
-import { formatMm } from "./units";
+import { CanvasService } from "../services";
+import { formatMm } from "../units";
 import { computeSceneLayout, readSizeState } from "./sceneLayoutModel";
 
 export class RulerTool implements Extension {
@@ -304,7 +304,9 @@ export class RulerTool implements Extension {
     const rulerBottom = rulerRect.top + rulerRect.height;
 
     // Display Dimensions (Physical)
-    const displayWidthMm = useCutAsRuler ? layout.cutWidthMm : layout.trimWidthMm;
+    const displayWidthMm = useCutAsRuler
+      ? layout.cutWidthMm
+      : layout.trimWidthMm;
     const displayHeightMm = useCutAsRuler
       ? layout.cutHeightMm
       : layout.trimHeightMm;