@pooder/kit 3.2.0 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "Standard plugins for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/dieline.ts

@@ -493,6 +493,8 @@ export class DielineTool implements Extension {
         y: cy,
         holes: absoluteHoles,
         pathData: this.pathData,
+        canvasWidth: canvasW,
+        canvasHeight: canvasH,
       });
 
       const insideObj = new Path(productPathData, {
@@ -518,6 +520,8 @@ export class DielineTool implements Extension {
           y: cy,
           holes: absoluteHoles,
           pathData: this.pathData,
+          canvasWidth: canvasW,
+          canvasHeight: canvasH,
         },
         visualOffset,
       );
@@ -549,6 +553,8 @@ export class DielineTool implements Extension {
         y: cy,
         holes: absoluteHoles,
         pathData: this.pathData,
+        canvasWidth: canvasW,
+        canvasHeight: canvasH,
       });
 
       const offsetBorderObj = new Path(offsetPathData, {
@@ -577,6 +583,8 @@ export class DielineTool implements Extension {
       y: cy,
       holes: absoluteHoles,
       pathData: this.pathData,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH,
     });
 
     const borderObj = new Path(borderPathData, {
@@ -730,6 +738,8 @@ export class DielineTool implements Extension {
       y: cy,
       holes: absoluteHoles,
       pathData: this.pathData,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH,
     });
 
     // 2. Prepare for Export

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;
@@ -103,6 +104,8 @@ export interface GeometryOptions {
   y: number;
   holes: Array<HoleData>;
   pathData?: string;
+  canvasWidth?: number;
+  canvasHeight?: number;
 }
 
 export interface MaskGeometryOptions extends GeometryOptions {
@@ -287,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) {
@@ -373,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);
@@ -423,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

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 {
@@ -179,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: normalizedX,
                   y: normalizedY,
+                  shape,
                   innerRadius,
                   outerRadius,
               };
@@ -216,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) {
@@ -367,21 +370,38 @@ 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",
+      );
+
+    // 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
+    // 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";
@@ -435,7 +455,7 @@ export class HoleTool implements Extension {
             by = bottom;
             break;
         }
-        
+
         return {
           ...original,
           // Denormalize offset back to physical units (mm)
@@ -444,11 +464,14 @@ export class HoleTool implements Extension {
           // 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 relative to Dieline Geometry
-      // normalized = (absolute - (center - width/2)) / width
       let normalizedX = 0.5;
       let normalizedY = 0.5;
 
@@ -459,19 +482,23 @@ export class HoleTool implements Extension {
         normalizedX = width > 0 ? (newAbsX - left) / width : 0.5;
         normalizedY = height > 0 ? (newAbsY - top) / height : 0.5;
       } else {
-        // Fallback to Canvas normalization if no geometry (should rare)
+        // 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: normalizedX,
         y: normalizedY,
-        // Ensure radii are preserved
+        // 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",
       };
     });
 
@@ -544,26 +571,49 @@ export class HoleTool implements Extension {
         { width: geometry.width, height: geometry.height } // Use geometry dims instead of canvas
       );
 
-      const innerCircle = new Circle({
-        radius: visualInnerRadius,
-        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: visualOuterRadius,
-        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",