@pooder/kit 3.1.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Standard plugins for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -19,7 +19,7 @@
   "dependencies": {
     "paper": "^0.12.18",
     "fabric": "^7.0.0",
-    "@pooder/core": "1.1.0"
+    "@pooder/core": "1.2.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts",

package/src/coordinate.ts

@@ -8,7 +8,45 @@ export interface Size {
   height: number;
 }
 
+export type Unit = "px" | "mm" | "cm" | "in";
+
+export interface Layout {
+  scale: number;
+  offsetX: number;
+  offsetY: number;
+  width: number;
+  height: number;
+}
+
 export class Coordinate {
+  /**
+   * Calculate layout to fit content within container while preserving aspect ratio.
+   */
+  static calculateLayout(
+    container: Size,
+    content: Size,
+    padding: number = 0,
+  ): Layout {
+    const availableWidth = Math.max(0, container.width - padding * 2);
+    const availableHeight = Math.max(0, container.height - padding * 2);
+
+    if (content.width === 0 || content.height === 0) {
+      return { scale: 1, offsetX: 0, offsetY: 0, width: 0, height: 0 };
+    }
+
+    const scaleX = availableWidth / content.width;
+    const scaleY = availableHeight / content.height;
+    const scale = Math.min(scaleX, scaleY);
+
+    const width = content.width * scale;
+    const height = content.height * scale;
+
+    const offsetX = (container.width - width) / 2;
+    const offsetY = (container.height - height) / 2;
+
+    return { scale, offsetX, offsetY, width, height };
+  }
+
   /**
    * Convert an absolute value to a normalized value (0-1).
    * @param value Absolute value (e.g., pixels)
@@ -46,4 +84,23 @@ export class Coordinate {
       y: this.toAbsolute(point.y, size.height),
     };
   }
+
+  static convertUnit(value: number, from: Unit, to: Unit): number {
+    if (from === to) return value;
+    
+    // Base unit: mm
+    const toMM: Record<Unit, number> = {
+      px: 0.264583, // 1px = 0.264583mm (96 DPI)
+      mm: 1,
+      cm: 10,
+      in: 25.4
+    };
+
+    const mmValue = value * (from === 'px' ? toMM.px : toMM[from] || 1);
+    
+    if (to === 'px') {
+        return mmValue / toMM.px;
+    }
+    return mmValue / (toMM[to] || 1);
+  }
 }

package/src/dieline.ts

@@ -8,7 +8,7 @@ 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,
@@ -20,6 +20,7 @@ import {
 
 export interface DielineGeometry {
   shape: "rect" | "circle" | "ellipse" | "custom";
+  unit: Unit;
   x: number;
   y: number;
   width: number;
@@ -27,6 +28,7 @@ export interface DielineGeometry {
   radius: number;
   offset: number;
   borderLength?: number;
+  scale?: number;
   pathData?: string;
 }
 
@@ -36,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;
@@ -48,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;
@@ -56,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;
@@ -88,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(
@@ -141,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",
@@ -176,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",
@@ -255,8 +263,9 @@ export class DielineTool implements Extension {
               const newWidth = bounds.width * scale;
               const newHeight = bounds.height * scale;
 
-              const configService =
-                this.context?.services.get<any>("ConfigurationService");
+              const configService = this.context?.services.get<any>(
+                "ConfigurationService",
+              );
               if (configService) {
                 configService.update("dieline.width", newWidth);
                 configService.update("dieline.height", newHeight);
@@ -336,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,
@@ -349,7 +376,6 @@ export class DielineTool implements Extension {
       insideColor,
       outsideColor,
       position,
-      borderLength,
       showBleedLines,
       holes,
     } = this;
@@ -358,45 +384,72 @@ export class DielineTool implements Extension {
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
 
-    let visualWidth = width;
-    let visualHeight = height;
-
-    if (borderLength && borderLength > 0) {
-      visualWidth = Math.max(0, canvasW - borderLength * 2);
-      visualHeight = Math.max(0, canvasH - borderLength * 2);
-    }
-
-    const cx = Coordinate.toAbsolute(position?.x ?? 0.5, canvasW);
-    const cy = Coordinate.toAbsolute(position?.y ?? 0.5, 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());
 
-    // Resolve 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 pos = resolveHolePosition(
-        h,
-        geometryForHoles,
-        { 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: 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({
@@ -458,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
@@ -517,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,
     });
 
@@ -566,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);
@@ -575,141 +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 unit = this.unit || "mm";
+      const unitScale = Coordinate.convertUnit(1, "mm", unit);
+
       const pos = resolveHolePosition(
-        h,
-        { x: cx, y: cy, width, height },
-        { width: canvasW, height: canvasH }
+        {
+          ...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: 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",
-    });
-
-    // 4. Apply Clip & Export
-    canvas.clipPath = clipPathCorrected;
+    // 3. Calculate Crop Area (The Dieline Bounds)
+    // We want to export only the area covered by the dieline
+    const bounds = clipPath.getBoundingRect();
 
-    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;
   }
 }

package/src/geometry.ts

@@ -24,7 +24,7 @@ export interface HoleData {
 export function resolveHolePosition(
   hole: HoleData,
   geometry: { x: number; y: number; width: number; height: number },
-  canvasSize: { width: number; height: number }
+  canvasSize: { width: number; height: number },
 ): { x: number; y: number } {
   if (hole.anchor) {
     const { x, y, width, height } = geometry;
@@ -82,14 +82,13 @@ export function resolveHolePosition(
       y: by + (hole.offsetY || 0),
     };
   } else if (hole.x !== undefined && hole.y !== undefined) {
-    // Legacy / Direct coordinates (Normalized)
-    // We assume x/y are normalized to canvas size if no anchor is present
-    // Or should we support absolute?
-    // Current system uses normalized.
-    // Coordinate.denormalizePoint logic:
+    // Legacy / Direct coordinates (Normalized relative to Dieline Geometry)
+    // Formula: absolute = normalized * width + (center - width/2)
+    // This handles padding correctly.
+    const { x, width, y, height } = geometry;
     return {
-      x: hole.x * canvasSize.width,
-      y: hole.y * canvasSize.height,
+      x: hole.x * width + (x - width / 2) + (hole.offsetX || 0),
+      y: hole.y * height + (y - height / 2) + (hole.offsetY || 0),
     };
   }
   return { x: 0, y: 0 };
@@ -358,7 +357,10 @@ function getDielineShape(options: GeometryOptions): paper.PathItem {
         cutsPath.remove();
         mainShape = temp;
       } catch (e) {
-        console.error("Geometry: Failed to subtract cutsPath from mainShape", e);
+        console.error(
+          "Geometry: Failed to subtract cutsPath from mainShape",
+          e,
+        );
       }
     }
   }
@@ -541,6 +543,8 @@ export function getNearestPointOnDieline(
 }
 
 export function getPathBounds(pathData: string): {
+  x: number;
+  y: number;
   width: number;
   height: number;
 } {
@@ -548,5 +552,10 @@ export function getPathBounds(pathData: string): {
   path.pathData = pathData;
   const bounds = path.bounds;
   path.remove();
-  return { width: bounds.width, height: bounds.height };
+  return {
+    x: bounds.x,
+    y: bounds.y,
+    width: bounds.width,
+    height: bounds.height,
+  };
 }