@pooder/kit 3.1.0 → 3.3.0

package/src/geometry.ts

@@ -14,6 +14,7 @@ export type PositionAnchor =
 export interface HoleData {
   x?: number;
   y?: number;
+  shape?: "circle" | "square";
   anchor?: PositionAnchor;
   offsetX?: number;
   offsetY?: number;
@@ -24,7 +25,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 +83,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 };
@@ -104,6 +104,8 @@ export interface GeometryOptions {
   y: number;
   holes: Array<HoleData>;
   pathData?: string;
+  canvasWidth?: number;
+  canvasHeight?: number;
 }
 
 export interface MaskGeometryOptions extends GeometryOptions {
@@ -288,21 +290,41 @@ function getDielineShape(options: GeometryOptions): paper.PathItem {
     let cutsPath: paper.PathItem | null = null;
 
     holes.forEach((hole) => {
+      const center = new paper.Point(hole.x!, hole.y!);
+
       // Create Lug (Outer Radius)
-      const lug = new paper.Path.Circle({
-        center: [hole.x, hole.y],
-        radius: hole.outerRadius,
-      });
+      const lug =
+        hole.shape === "square"
+          ? new paper.Path.Rectangle({
+              point: [
+                center.x - hole.outerRadius,
+                center.y - hole.outerRadius,
+              ],
+              size: [hole.outerRadius * 2, hole.outerRadius * 2],
+            })
+          : new paper.Path.Circle({
+              center: center,
+              radius: hole.outerRadius,
+            });
 
       // REMOVED: Intersects check. We want to process all holes defined in config.
       // If a hole is completely outside, it might form an island, but that's better than missing it.
       // Users can remove the hole if they don't want it.
 
       // Create Cut (Inner Radius)
-      const cut = new paper.Path.Circle({
-        center: [hole.x, hole.y],
-        radius: hole.innerRadius,
-      });
+      const cut =
+        hole.shape === "square"
+          ? new paper.Path.Rectangle({
+              point: [
+                center.x - hole.innerRadius,
+                center.y - hole.innerRadius,
+              ],
+              size: [hole.innerRadius * 2, hole.innerRadius * 2],
+            })
+          : new paper.Path.Circle({
+              center: center,
+              radius: hole.innerRadius,
+            });
 
       // Union Lugs
       if (!lugsPath) {
@@ -358,7 +380,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,
+        );
       }
     }
   }
@@ -371,7 +396,9 @@ function getDielineShape(options: GeometryOptions): paper.PathItem {
  * Logic: (BaseShape UNION IntersectingLugs) SUBTRACT Cuts
  */
 export function generateDielinePath(options: GeometryOptions): string {
-  ensurePaper(options.width * 2, options.height * 2);
+  const paperWidth = options.canvasWidth || options.width * 2 || 2000;
+  const paperHeight = options.canvasHeight || options.height * 2 || 2000;
+  ensurePaper(paperWidth, paperHeight);
   paper.project.activeLayer.removeChildren();
 
   const mainShape = getDielineShape(options);
@@ -421,8 +448,9 @@ export function generateBleedZonePath(
   offset: number,
 ): string {
   // Ensure canvas is large enough
-  const maxDim = Math.max(options.width, options.height) + Math.abs(offset) * 4;
-  ensurePaper(maxDim, maxDim);
+  const paperWidth = options.canvasWidth || options.width * 2 || 2000;
+  const paperHeight = options.canvasHeight || options.height * 2 || 2000;
+  ensurePaper(paperWidth, paperHeight);
   paper.project.activeLayer.removeChildren();
 
   // 1. Original Shape
@@ -541,6 +569,8 @@ export function getNearestPointOnDieline(
 }
 
 export function getPathBounds(pathData: string): {
+  x: number;
+  y: number;
   width: number;
   height: number;
 } {
@@ -548,5 +578,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,
+  };
 }

package/src/hole.ts

@@ -6,7 +6,7 @@ import {
   ConfigurationContribution,
   ConfigurationService,
 } from "@pooder/core";
-import { Circle, Group, Point } from "fabric";
+import { Circle, Group, Point, Rect } from "fabric";
 import CanvasService from "./CanvasService";
 import { DielineGeometry } from "./dieline";
 import {
@@ -152,12 +152,22 @@ export class HoleTool implements Extension {
           title: "Add Hole",
           handler: (x: number, y: number) => {
             if (!this.canvasService) return false;
-            const { width, height } = this.canvasService.canvas;
             
-            const normalizedHole = Coordinate.normalizePoint(
-              { x, y },
-              { width: width || 800, height: height || 600 }
-            );
+            // Normalize relative to Dieline Geometry if available
+            let normalizedX = 0.5;
+            let normalizedY = 0.5;
+
+            if (this.currentGeometry) {
+                const { x: gx, y: gy, width: gw, height: gh } = this.currentGeometry;
+                const left = gx - gw / 2;
+                const top = gy - gh / 2;
+                normalizedX = gw > 0 ? (x - left) / gw : 0.5;
+                normalizedY = gh > 0 ? (y - top) / gh : 0.5;
+            } else {
+                 const { width, height } = this.canvasService.canvas;
+                 normalizedX = Coordinate.toNormalized(x, width || 800);
+                 normalizedY = Coordinate.toNormalized(y, height || 600);
+            }
 
             const configService = this.context?.services.get<ConfigurationService>(
               "ConfigurationService"
@@ -169,10 +179,12 @@ export class HoleTool implements Extension {
               const lastHole = currentHoles[currentHoles.length - 1];
               const innerRadius = lastHole?.innerRadius ?? 15;
               const outerRadius = lastHole?.outerRadius ?? 25;
+              const shape = lastHole?.shape ?? "circle";
 
               const newHole = {
-                  x: normalizedHole.x,
-                  y: normalizedHole.y,
+                  x: normalizedX,
+                  y: normalizedY,
+                  shape,
                   innerRadius,
                   outerRadius,
               };
@@ -206,6 +218,7 @@ export class HoleTool implements Extension {
     if (!this.handleDielineChange) {
       this.handleDielineChange = (geometry: DielineGeometry) => {
         this.currentGeometry = geometry;
+        this.redraw();
         const changed = this.enforceConstraints();
         // Only sync if constraints actually moved something
         if (changed) {
@@ -294,7 +307,14 @@ export class HoleTool implements Extension {
         if (!target || target.data?.type !== "hole-marker") return;
 
         // Update state when hole is moved
-        this.syncHolesFromCanvas();
+        // Ensure final position is constrained (handles case where 'modified' reports unconstrained coords)
+        const changed = this.enforceConstraints();
+        
+        // If enforceConstraints changed something, it already synced.
+        // If not, we sync manually to save the move (which was valid).
+        if (!changed) {
+          this.syncHolesFromCanvas();
+        }
       };
       canvas.on("object:modified", this.handleModified);
     }
@@ -350,21 +370,43 @@ export class HoleTool implements Extension {
     if (!this.canvasService) return;
     const objects = this.canvasService.canvas
       .getObjects()
-      .filter((obj: any) => obj.data?.type === "hole-marker");
+      .filter(
+        (obj: any) =>
+          obj.data?.type === "hole-marker" || obj.name === "hole-marker",
+      );
 
-    // Sort objects by index
+    // If we have markers but no state, or mismatch, we should be careful.
+    // However, if we just dragged one, we expect them to match.
+    if (objects.length === 0 && this.holes.length > 0) {
+      console.warn("HoleTool: No markers found on canvas to sync from");
+      return;
+    }
+
+    // Sort objects by index to match this.holes order
     objects.sort(
-      (a: any, b: any) => (a.data?.index ?? 0) - (b.data?.index ?? 0)
+      (a: any, b: any) => (a.data?.index ?? 0) - (b.data?.index ?? 0),
     );
 
     // Update holes based on canvas positions
-    // We need to preserve original hole properties (radii, anchor)
-    // If a hole has an anchor, we update offsetX/Y instead of x/y
     const newHoles = objects.map((obj, i) => {
       const original = this.holes[i];
       const newAbsX = obj.left!;
       const newAbsY = obj.top!;
 
+      // Validate coordinates to prevent NaN issues
+      if (isNaN(newAbsX) || isNaN(newAbsY)) {
+        console.error("HoleTool: Invalid marker coordinates", {
+          newAbsX,
+          newAbsY,
+        });
+        return original;
+      }
+
+      // Get current scale to denormalize offsets
+      const scale = this.currentGeometry?.scale || 1;
+      const unit = this.currentGeometry?.unit || "mm";
+      const unitScale = Coordinate.convertUnit(1, "mm", unit);
+
       if (original && original.anchor && this.currentGeometry) {
         // Reverse calculate offset from anchor
         const { x, y, width, height } = this.currentGeometry;
@@ -413,31 +455,50 @@ export class HoleTool implements Extension {
             by = bottom;
             break;
         }
-        
+
         return {
           ...original,
-          offsetX: newAbsX - bx,
-          offsetY: newAbsY - by,
+          // Denormalize offset back to physical units (mm)
+          offsetX: (newAbsX - bx) / scale / unitScale,
+          offsetY: (newAbsY - by) / scale / unitScale,
           // Clear direct coordinates if we use anchor
           x: undefined,
           y: undefined,
+          // Ensure other properties are preserved
+          innerRadius: original.innerRadius,
+          outerRadius: original.outerRadius,
+          shape: original.shape || "circle",
         };
       }
 
-      // If no anchor, use normalized coordinates
-      const { width, height } = this.canvasService!.canvas;
-      const p = Coordinate.normalizePoint(
-        { x: newAbsX, y: newAbsY },
-        { width: width || 800, height: height || 600 }
-      );
-      
+      // If no anchor, use normalized coordinates relative to Dieline Geometry
+      let normalizedX = 0.5;
+      let normalizedY = 0.5;
+
+      if (this.currentGeometry) {
+        const { x, y, width, height } = this.currentGeometry;
+        const left = x - width / 2;
+        const top = y - height / 2;
+        normalizedX = width > 0 ? (newAbsX - left) / width : 0.5;
+        normalizedY = height > 0 ? (newAbsY - top) / height : 0.5;
+      } else {
+        // Fallback to Canvas normalization
+        const { width, height } = this.canvasService!.canvas;
+        normalizedX = Coordinate.toNormalized(newAbsX, width || 800);
+        normalizedY = Coordinate.toNormalized(newAbsY, height || 600);
+      }
+
       return {
         ...original,
-        x: p.x,
-        y: p.y,
-        // Ensure radii are preserved
+        x: normalizedX,
+        y: normalizedY,
+        // Clear offsets if we are using direct normalized coordinates
+        offsetX: undefined,
+        offsetY: undefined,
+        // Ensure other properties are preserved
         innerRadius: original?.innerRadius ?? 15,
         outerRadius: original?.outerRadius ?? 25,
+        shape: original?.shape || "circle",
       };
     });
 
@@ -486,36 +547,73 @@ export class HoleTool implements Extension {
       y: (height || 600) / 2,
       width: width || 800,
       height: height || 600,
-    };
+      scale: 1, // Default scale if no geometry loaded
+    } as any;
 
     holes.forEach((hole, index) => {
+      // Geometry scale is needed.
+      const scale = geometry.scale || 1;
+      const unit = geometry.unit || "mm";
+      const unitScale = Coordinate.convertUnit(1, 'mm', unit);
+      
+      const visualInnerRadius = hole.innerRadius * unitScale * scale;
+      const visualOuterRadius = hole.outerRadius * unitScale * scale;
+
       // Resolve position
+      // Apply unit conversion and scale to offsets before resolving (mm -> px)
       const pos = resolveHolePosition(
-        hole,
+        {
+          ...hole,
+          offsetX: (hole.offsetX || 0) * unitScale * scale,
+          offsetY: (hole.offsetY || 0) * unitScale * scale,
+        },
         geometry,
-        { width: width || 800, height: height || 600 }
+        { width: geometry.width, height: geometry.height } // Use geometry dims instead of canvas
       );
 
-      const innerCircle = new Circle({
-        radius: hole.innerRadius,
-        fill: "transparent",
-        stroke: "red",
-        strokeWidth: 2,
-        originX: "center",
-        originY: "center",
-      });
+      const isSquare = hole.shape === "square";
+
+      const innerMarker = isSquare
+        ? new Rect({
+            width: visualInnerRadius * 2,
+            height: visualInnerRadius * 2,
+            fill: "transparent",
+            stroke: "red",
+            strokeWidth: 2,
+            originX: "center",
+            originY: "center",
+          })
+        : new Circle({
+            radius: visualInnerRadius,
+            fill: "transparent",
+            stroke: "red",
+            strokeWidth: 2,
+            originX: "center",
+            originY: "center",
+          });
 
-      const outerCircle = new Circle({
-        radius: hole.outerRadius,
-        fill: "transparent",
-        stroke: "#666",
-        strokeWidth: 1,
-        strokeDashArray: [5, 5],
-        originX: "center",
-        originY: "center",
-      });
+      const outerMarker = isSquare
+        ? new Rect({
+            width: visualOuterRadius * 2,
+            height: visualOuterRadius * 2,
+            fill: "transparent",
+            stroke: "#666",
+            strokeWidth: 1,
+            strokeDashArray: [5, 5],
+            originX: "center",
+            originY: "center",
+          })
+        : new Circle({
+            radius: visualOuterRadius,
+            fill: "transparent",
+            stroke: "#666",
+            strokeWidth: 1,
+            strokeDashArray: [5, 5],
+            originX: "center",
+            originY: "center",
+          });
 
-      const holeGroup = new Group([outerCircle, innerCircle], {
+      const holeGroup = new Group([outerMarker, innerMarker], {
         left: pos.x,
         top: pos.y,
         originX: "center",
@@ -592,14 +690,23 @@ export class HoleTool implements Extension {
     objects.forEach((obj: any, i: number) => {
       const currentPos = new Point(obj.left, obj.top);
       // We need to pass the hole's radii to calculateConstrainedPosition
-      const holeData = this.holes[i];
-      
-      const newPos = this.calculateConstrainedPosition(
-        currentPos,
-        constraintGeometry,
-        holeData?.innerRadius ?? 15,
-        holeData?.outerRadius ?? 25
-      );
+    const holeData = this.holes[i];
+    
+    // Scale radii for constraint calculation (since geometry is in pixels)
+    // Geometry scale is needed.
+    const scale = geometry.scale || 1;
+    const unit = geometry.unit || "mm";
+    const unitScale = Coordinate.convertUnit(1, 'mm', unit);
+    
+    const innerR = (holeData?.innerRadius ?? 15) * unitScale * scale;
+    const outerR = (holeData?.outerRadius ?? 25) * unitScale * scale;
+
+    const newPos = this.calculateConstrainedPosition(
+      currentPos,
+      constraintGeometry,
+      innerR,
+      outerR
+    );
 
       if (currentPos.distanceFrom(newPos) > 0.1) {
         obj.set({