@pooder/kit 3.0.1 → 3.2.0

package/src/dieline.ts

@@ -8,17 +8,19 @@ import {
 import { Path, Pattern } from "fabric";
 import CanvasService from "./CanvasService";
 import { ImageTracer } from "./tracer";
-import { Coordinate } from "./coordinate";
+import { Coordinate, Unit } from "./coordinate";
 import {
   generateDielinePath,
   generateMaskPath,
   generateBleedZonePath,
   getPathBounds,
   HoleData,
+  resolveHolePosition,
 } from "./geometry";
 
 export interface DielineGeometry {
   shape: "rect" | "circle" | "ellipse" | "custom";
+  unit: Unit;
   x: number;
   y: number;
   width: number;
@@ -26,6 +28,7 @@ export interface DielineGeometry {
   radius: number;
   offset: number;
   borderLength?: number;
+  scale?: number;
   pathData?: string;
 }
 
@@ -35,6 +38,7 @@ export class DielineTool implements Extension {
     name: "DielineTool",
   };
 
+  private unit: Unit = "mm";
   private shape: "rect" | "circle" | "ellipse" | "custom" = "rect";
   private width: number = 500;
   private height: number = 500;
@@ -47,7 +51,7 @@ export class DielineTool implements Extension {
   private holes: HoleData[] = [];
   // Position is stored as normalized coordinates (0-1)
   private position?: { x: number; y: number };
-  private borderLength?: number;
+  private padding: number | string = 140;
   private pathData?: string;
 
   private canvasService?: CanvasService;
@@ -55,13 +59,14 @@ export class DielineTool implements Extension {
 
   constructor(
     options?: Partial<{
+      unit: Unit;
       shape: "rect" | "circle" | "ellipse" | "custom";
       width: number;
       height: number;
       radius: number;
       // Position is normalized (0-1)
       position: { x: number; y: number };
-      borderLength: number;
+      padding: number | string;
       offset: number;
       style: "solid" | "dashed";
       insideColor: string;
@@ -87,14 +92,12 @@ export class DielineTool implements Extension {
     const configService = context.services.get<any>("ConfigurationService");
     if (configService) {
       // Load initial config
+      this.unit = configService.get("dieline.unit", this.unit);
       this.shape = configService.get("dieline.shape", this.shape);
       this.width = configService.get("dieline.width", this.width);
       this.height = configService.get("dieline.height", this.height);
       this.radius = configService.get("dieline.radius", this.radius);
-      this.borderLength = configService.get(
-        "dieline.borderLength",
-        this.borderLength,
-      );
+      this.padding = configService.get("dieline.padding", this.padding);
       this.offset = configService.get("dieline.offset", this.offset);
       this.style = configService.get("dieline.style", this.style);
       this.insideColor = configService.get(
@@ -140,6 +143,13 @@ export class DielineTool implements Extension {
   contribute() {
     return {
       [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "dieline.unit",
+          type: "select",
+          label: "Unit",
+          options: ["px", "mm", "cm", "in"],
+          default: this.unit,
+        },
         {
           id: "dieline.shape",
           type: "select",
@@ -175,15 +185,14 @@ export class DielineTool implements Extension {
           id: "dieline.position",
           type: "json",
           label: "Position (Normalized)",
-          default: this.position,
+          default: this.radius,
         },
         {
-          id: "dieline.borderLength",
-          type: "number",
-          label: "Margin",
-          min: 0,
-          max: 500,
-          default: this.borderLength,
+          id: "dieline.padding",
+          type: "select",
+          label: "View Padding",
+          options: [0, 10, 20, 40, 60, 100, "2%", "5%", "10%", "15%", "20%"],
+          default: this.padding,
         },
         {
           id: "dieline.offset",
@@ -226,65 +235,6 @@ export class DielineTool implements Extension {
         },
       ] as ConfigurationContribution[],
       [ContributionPointIds.COMMANDS]: [
-        {
-          command: "reset",
-          title: "Reset Dieline",
-          handler: () => {
-            this.shape = "rect";
-            this.width = 300;
-            this.height = 300;
-            this.radius = 0;
-            this.offset = 0;
-            this.style = "solid";
-            this.insideColor = "rgba(0,0,0,0)";
-            this.outsideColor = "#ffffff";
-            this.showBleedLines = true;
-            this.holes = [];
-            this.pathData = undefined;
-            this.updateDieline();
-            return true;
-          },
-        },
-        {
-          command: "setDimensions",
-          title: "Set Dimensions",
-          handler: (width: number, height: number) => {
-            if (this.width === width && this.height === height) return true;
-            this.width = width;
-            this.height = height;
-            this.updateDieline();
-            return true;
-          },
-        },
-        {
-          command: "setShape",
-          title: "Set Shape",
-          handler: (shape: "rect" | "circle" | "ellipse" | "custom") => {
-            if (this.shape === shape) return true;
-            this.shape = shape;
-            this.updateDieline();
-            return true;
-          },
-        },
-        {
-          command: "setBleed",
-          title: "Set Bleed",
-          handler: (bleed: number) => {
-            if (this.offset === bleed) return true;
-            this.offset = bleed;
-            this.updateDieline();
-            return true;
-          },
-        },
-        {
-          command: "setHoles",
-          title: "Set Holes",
-          handler: (holes: HoleData[]) => {
-            this.holes = holes;
-            this.updateDieline(false);
-            return true;
-          },
-        },
         {
           command: "getGeometry",
           title: "Get Geometry",
@@ -304,39 +254,25 @@ export class DielineTool implements Extension {
           title: "Detect Edge from Image",
           handler: async (imageUrl: string, options?: any) => {
             try {
-              // Pass current dimensions if we want to scale immediately?
-              // But wait, the user said "It should be scaled according to width and height".
-              // If the user already set width/height on the tool, we should respect it?
-              // Or should we set width/height based on the image aspect ratio?
-              // Usually for a new trace, we might want to respect the IMAGE aspect ratio but fit into current width/height?
-              // Or just replace width/height with image dimensions?
-              // Let's assume we want to keep the current "box" size but fit the shape inside?
-              // Or if options has width/height use that.
-
-              // Let's first trace to get the natural shape (and its aspect ratio)
-              // Then we can decide how to update this.width/this.height.
-
               const pathData = await ImageTracer.trace(imageUrl, options);
-
-              // We need to set width/height from the path bounds to avoid distortion
               const bounds = getPathBounds(pathData);
 
-              // If we want to scale the path to specific dimensions, we can do it via ImageTracer options.scaleToWidth/Height
-              // But here we got the raw path.
-              // Let's update the TOOL's dimensions to match the detected shape's aspect ratio,
-              // while keeping the size reasonable (e.g. max dimension 300 or current size).
-
-              // If current tool size is default 300x300, we might want to resize tool to match image ratio.
               const currentMax = Math.max(this.width, this.height);
               const scale = currentMax / Math.max(bounds.width, bounds.height);
 
-              this.width = bounds.width * scale;
-              this.height = bounds.height * scale;
+              const newWidth = bounds.width * scale;
+              const newHeight = bounds.height * scale;
 
-              this.shape = "custom";
-              this.pathData = pathData;
+              const configService = this.context?.services.get<any>(
+                "ConfigurationService",
+              );
+              if (configService) {
+                configService.update("dieline.width", newWidth);
+                configService.update("dieline.height", newHeight);
+                configService.update("dieline.shape", "custom");
+                configService.update("dieline.pathData", pathData);
+              }
 
-              this.updateDieline();
               return pathData;
             } catch (e) {
               console.error("Edge detection failed", e);
@@ -409,12 +345,30 @@ export class DielineTool implements Extension {
     return new Pattern({ source: canvas, repetition: "repeat" });
   }
 
+  private resolvePadding(
+    containerWidth: number,
+    containerHeight: number,
+  ): number {
+    if (typeof this.padding === "number") {
+      return this.padding;
+    }
+    if (typeof this.padding === "string") {
+      if (this.padding.endsWith("%")) {
+        const percent = parseFloat(this.padding) / 100;
+        return Math.min(containerWidth, containerHeight) * percent;
+      }
+      return parseFloat(this.padding) || 0;
+    }
+    return 0;
+  }
+
   public updateDieline(emitEvent: boolean = true) {
     if (!this.canvasService) return;
     const layer = this.getLayer();
     if (!layer) return;
 
     const {
+      unit,
       shape,
       radius,
       offset,
@@ -422,7 +376,6 @@ export class DielineTool implements Extension {
       insideColor,
       outsideColor,
       position,
-      borderLength,
       showBleedLines,
       holes,
     } = this;
@@ -431,38 +384,72 @@ export class DielineTool implements Extension {
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
 
-    // Handle borderLength (Margin)
-    if (borderLength && borderLength > 0) {
-      width = Math.max(0, canvasW - borderLength * 2);
-      height = Math.max(0, canvasH - borderLength * 2);
-    }
-
-    // Handle Position
-    // this.position is normalized (0-1). Default to center (0.5, 0.5).
-    const normalizedPos = position ?? { x: 0.5, y: 0.5 };
-    const cx = Coordinate.toAbsolute(normalizedPos.x, canvasW);
-    const cy = Coordinate.toAbsolute(normalizedPos.y, canvasH);
+    // Calculate Layout based on Physical Dimensions and Canvas Size
+    // Add padding to avoid edge hugging
+    const paddingPx = this.resolvePadding(canvasW, canvasH);
+    const layout = Coordinate.calculateLayout(
+      { width: canvasW, height: canvasH },
+      { width, height },
+      paddingPx,
+    );
+
+    const scale = layout.scale;
+    const cx = layout.offsetX + layout.width / 2;
+    const cy = layout.offsetY + layout.height / 2;
+
+    // Scaled dimensions for rendering (Pixels)
+    const visualWidth = layout.width;
+    const visualHeight = layout.height;
+    const visualRadius = radius * scale;
+    const visualOffset = offset * scale;
 
     // Clear existing objects
     layer.remove(...layer.getObjects());
 
-    // Denormalize Holes for Geometry Generation
+    // Resolve Holes for Geometry Generation (using visual coordinates)
+    const geometryForHoles = {
+      x: cx,
+      y: cy,
+      width: visualWidth,
+      height: visualHeight,
+      // Pass scale/unit context if needed by resolveHolePosition (though currently unused there)
+    };
+
     const absoluteHoles = (holes || []).map((h) => {
-      const p = Coordinate.denormalizePoint(
-        { x: h.x, y: h.y },
-        { width: canvasW, height: canvasH },
-      );
+      // Scale hole radii and offsets: mm -> current unit -> pixels
+      const unitScale = Coordinate.convertUnit(1, "mm", unit);
+      const offsetScale = unitScale * scale;
+
+      // Apply scaling to offsets BEFORE resolving position
+      const hWithPixelOffsets = {
+        ...h,
+        offsetX: (h.offsetX || 0) * offsetScale,
+        offsetY: (h.offsetY || 0) * offsetScale,
+      };
+
+      const pos = resolveHolePosition(hWithPixelOffsets, geometryForHoles, {
+        width: canvasW,
+        height: canvasH,
+      });
+
       return {
         ...h,
-        x: p.x,
-        y: p.y,
+        x: pos.x,
+        y: pos.y,
+        // Scale hole radii: mm -> current unit -> pixels
+        innerRadius: h.innerRadius * offsetScale,
+        outerRadius: h.outerRadius * offsetScale,
+        // Store scaled offsets in the result for consistency, though pos is already resolved
+        offsetX: hWithPixelOffsets.offsetX,
+        offsetY: hWithPixelOffsets.offsetY,
       };
     });
 
     // 1. Draw Mask (Outside)
-    const cutW = Math.max(0, width + offset * 2);
-    const cutH = Math.max(0, height + offset * 2);
-    const cutR = radius === 0 ? 0 : Math.max(0, radius + offset);
+    const cutW = Math.max(0, visualWidth + visualOffset * 2);
+    const cutH = Math.max(0, visualHeight + visualOffset * 2);
+    const cutR =
+      visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
 
     // Use Paper.js to generate the complex mask path
     const maskPathData = generateMaskPath({
@@ -524,15 +511,15 @@ export class DielineTool implements Extension {
       const bleedPathData = generateBleedZonePath(
         {
           shape,
-          width,
-          height,
-          radius,
+          width: visualWidth,
+          height: visualHeight,
+          radius: visualRadius,
           x: cx,
           y: cy,
           holes: absoluteHoles,
           pathData: this.pathData,
         },
-        offset,
+        visualOffset,
       );
 
       // Use solid red for hatch lines to match dieline, background is transparent
@@ -583,12 +570,12 @@ export class DielineTool implements Extension {
     // generateDielinePath expects holes to be in absolute coordinates (matching width/height scale)
     const borderPathData = generateDielinePath({
       shape,
-      width: width,
-      height: height,
-      radius: radius,
+      width: visualWidth,
+      height: visualHeight,
+      radius: visualRadius,
       x: cx,
       y: cy,
-      holes: absoluteHoles, // FIX: Use absoluteHoles instead of holes
+      holes: absoluteHoles,
       pathData: this.pathData,
     });
 
@@ -632,6 +619,13 @@ export class DielineTool implements Extension {
     // Emit change event so other tools (like HoleTool) can react
     // Only emit if requested (to avoid loops when updating non-geometry props like holes)
     if (emitEvent && this.context) {
+      // FIX: Ensure we use the exact same geometry values as used in rendering above.
+      // Although getGeometry() recalculates layout, it should be identical if props haven't changed.
+      // But to be absolutely safe and avoid micro-differences or race conditions, we can reuse calculated values.
+      // However, getGeometry is public API, so it's better if it's correct.
+      // Let's verify getGeometry logic matches updateDieline logic perfectly.
+      // Yes, both use Coordinate.calculateLayout with the same inputs.
+
       const geometry = this.getGeometry();
       if (geometry) {
         this.context.eventBus.emit("dieline:geometry:change", geometry);
@@ -641,140 +635,138 @@ export class DielineTool implements Extension {
 
   public getGeometry(): DielineGeometry | null {
     if (!this.canvasService) return null;
-    const { shape, width, height, radius, position, borderLength, offset } =
-      this;
+    const { unit, shape, width, height, radius, position, offset } = this;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
 
-    let visualWidth = width;
-    let visualHeight = height;
+    const paddingPx = this.resolvePadding(canvasW, canvasH);
+    const layout = Coordinate.calculateLayout(
+      { width: canvasW, height: canvasH },
+      { width, height },
+      paddingPx,
+    );
 
-    if (borderLength && borderLength > 0) {
-      visualWidth = Math.max(0, canvasW - borderLength * 2);
-      visualHeight = Math.max(0, canvasH - borderLength * 2);
-    }
+    const scale = layout.scale;
+    const cx = layout.offsetX + layout.width / 2;
+    const cy = layout.offsetY + layout.height / 2;
 
-    const cx = Coordinate.toAbsolute(position?.x ?? 0.5, canvasW);
-    const cy = Coordinate.toAbsolute(position?.y ?? 0.5, canvasH);
+    const visualWidth = layout.width;
+    const visualHeight = layout.height;
 
     return {
       shape,
+      unit,
       x: cx,
       y: cy,
       width: visualWidth,
       height: visualHeight,
-      radius,
-      offset,
-      borderLength,
+      radius: radius * scale,
+      offset: offset * scale,
+      // Pass scale to help other tools (like HoleTool) convert units
+      scale,
       pathData: this.pathData,
-    };
+    } as DielineGeometry;
   }
 
-  public exportCutImage() {
+  public async exportCutImage() {
     if (!this.canvasService) return null;
-    const canvas = this.canvasService.canvas;
+    const userLayer = this.canvasService.getLayer("user");
+
+    // Even if no user images, we might want to export the shape?
+    // But usually "Cut Image" implies the printed content.
+    // If empty, maybe just return null or empty string.
+    if (!userLayer) return null;
 
     // 1. Generate Path Data
     const { shape, width, height, radius, position, holes } = this;
-    const canvasW = canvas.width || 800;
-    const canvasH = canvas.height || 600;
-    const cx = Coordinate.toAbsolute(position?.x ?? 0.5, canvasW);
-    const cy = Coordinate.toAbsolute(position?.y ?? 0.5, canvasH);
+    const canvasW = this.canvasService.canvas.width || 800;
+    const canvasH = this.canvasService.canvas.height || 600;
+
+    const paddingPx = this.resolvePadding(canvasW, canvasH);
+    const layout = Coordinate.calculateLayout(
+      { width: canvasW, height: canvasH },
+      { width, height },
+      paddingPx,
+    );
+    const scale = layout.scale;
+    const cx = layout.offsetX + layout.width / 2;
+    const cy = layout.offsetY + layout.height / 2;
+    const visualWidth = layout.width;
+    const visualHeight = layout.height;
+    const visualRadius = radius * scale;
 
     // Denormalize Holes for Export
     const absoluteHoles = (holes || []).map((h) => {
-      const p = Coordinate.denormalizePoint(
-        { x: h.x, y: h.y },
+      const unit = this.unit || "mm";
+      const unitScale = Coordinate.convertUnit(1, "mm", unit);
+
+      const pos = resolveHolePosition(
+        {
+          ...h,
+          offsetX: (h.offsetX || 0) * unitScale * scale,
+          offsetY: (h.offsetY || 0) * unitScale * scale,
+        },
+        { x: cx, y: cy, width: visualWidth, height: visualHeight },
         { width: canvasW, height: canvasH },
       );
+
       return {
         ...h,
-        x: p.x,
-        y: p.y,
+        x: pos.x,
+        y: pos.y,
+        innerRadius: h.innerRadius * unitScale * scale,
+        outerRadius: h.outerRadius * unitScale * scale,
+        offsetX: (h.offsetX || 0) * unitScale * scale,
+        offsetY: (h.offsetY || 0) * unitScale * scale,
       };
     });
 
     const pathData = generateDielinePath({
       shape,
-      width,
-      height,
-      radius,
+      width: visualWidth,
+      height: visualHeight,
+      radius: visualRadius,
       x: cx,
       y: cy,
       holes: absoluteHoles,
       pathData: this.pathData,
     });
 
-    // 2. Create Clip Path
-    // @ts-ignore
+    // 2. Prepare for Export
+    // Clone the layer to not affect the stage
+    const clonedLayer = await userLayer.clone();
+
+    // Create Clip Path
+    // Note: In Fabric, clipPath is relative to the object center usually,
+    // but for a Group that is full-canvas (left=0, top=0), absolute coordinates should work
+    // if we configure it correctly.
+    // However, Fabric's clipPath handling can be tricky with Groups.
+    // Safest bet: Position the clipPath absolutely and ensuring group is absolute.
+
     const clipPath = new Path(pathData, {
-      left: 0,
-      top: 0,
       originX: "left",
       originY: "top",
-      absolutePositioned: true,
-    });
-
-    // 3. Hide UI Layers
-    const layer = this.getLayer();
-    const wasVisible = layer?.visible ?? true;
-    if (layer) layer.visible = false;
-
-    // Hide hole markers
-    const holeMarkers = canvas
-      .getObjects()
-      .filter((o: any) => o.data?.type === "hole-marker");
-    holeMarkers.forEach((o) => (o.visible = false));
-
-    // Hide Ruler Overlay
-    const rulerLayer = canvas
-      .getObjects()
-      .find((obj: any) => obj.data?.id === "ruler-overlay");
-    const rulerWasVisible = rulerLayer?.visible ?? true;
-    if (rulerLayer) rulerLayer.visible = false;
-
-    // 4. Apply Clip & Export
-    const originalClip = canvas.clipPath;
-    canvas.clipPath = clipPath;
-
-    const bbox = clipPath.getBoundingRect();
-
-    const clipPathCorrected = new Path(pathData, {
-      absolutePositioned: true,
       left: 0,
       top: 0,
+      absolutePositioned: true, // Important for groups
     });
 
-    const tempPath = new Path(pathData);
-    const tempBounds = tempPath.getBoundingRect();
+    clonedLayer.clipPath = clipPath;
 
-    clipPathCorrected.set({
-      left: tempBounds.left,
-      top: tempBounds.top,
-      originX: "left",
-      originY: "top",
-    });
+    // 3. Calculate Crop Area (The Dieline Bounds)
+    // We want to export only the area covered by the dieline
+    const bounds = clipPath.getBoundingRect();
 
-    // 4. Apply Clip & Export
-    canvas.clipPath = clipPathCorrected;
-
-    const exportBbox = clipPathCorrected.getBoundingRect();
-    const dataURL = canvas.toDataURL({
+    // 4. Export
+    const dataUrl = clonedLayer.toDataURL({
       format: "png",
-      multiplier: 2,
-      left: exportBbox.left,
-      top: exportBbox.top,
-      width: exportBbox.width,
-      height: exportBbox.height,
+      multiplier: 2, // Better quality
+      left: bounds.left,
+      top: bounds.top,
+      width: bounds.width,
+      height: bounds.height,
     });
 
-    // 5. Restore
-    canvas.clipPath = originalClip;
-    if (layer) layer.visible = wasVisible;
-    if (rulerLayer) rulerLayer.visible = rulerWasVisible;
-    holeMarkers.forEach((o) => (o.visible = true));
-    canvas.requestRenderAll();
-
-    return dataURL;
+    return dataUrl;
   }
 }