@pooder/kit 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pooder/kit
 
+## 3.3.0
+
+### Minor Changes
+
+- hole shape
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -29,6 +29,7 @@ type PositionAnchor = "top-left" | "top-center" | "top-right" | "center-left" |
 interface HoleData {
     x?: number;
     y?: number;
+    shape?: "circle" | "square";
     anchor?: PositionAnchor;
     offsetX?: number;
     offsetY?: number;

package/dist/index.d.ts

@@ -29,6 +29,7 @@ type PositionAnchor = "top-left" | "top-center" | "top-right" | "center-left" |
 interface HoleData {
     x?: number;
     y?: number;
+    shape?: "circle" | "square";
     anchor?: PositionAnchor;
     offsetX?: number;
     offsetY?: number;

package/dist/index.js

@@ -614,12 +614,25 @@ function getDielineShape(options) {
     let lugsPath = null;
     let cutsPath = null;
     holes.forEach((hole) => {
-      const lug = new import_paper.default.Path.Circle({
-        center: [hole.x, hole.y],
+      const center = new import_paper.default.Point(hole.x, hole.y);
+      const lug = hole.shape === "square" ? new import_paper.default.Path.Rectangle({
+        point: [
+          center.x - hole.outerRadius,
+          center.y - hole.outerRadius
+        ],
+        size: [hole.outerRadius * 2, hole.outerRadius * 2]
+      }) : new import_paper.default.Path.Circle({
+        center,
         radius: hole.outerRadius
       });
-      const cut = new import_paper.default.Path.Circle({
-        center: [hole.x, hole.y],
+      const cut = hole.shape === "square" ? new import_paper.default.Path.Rectangle({
+        point: [
+          center.x - hole.innerRadius,
+          center.y - hole.innerRadius
+        ],
+        size: [hole.innerRadius * 2, hole.innerRadius * 2]
+      }) : new import_paper.default.Path.Circle({
+        center,
         radius: hole.innerRadius
       });
       if (!lugsPath) {
@@ -676,7 +689,9 @@ function getDielineShape(options) {
   return mainShape;
 }
 function generateDielinePath(options) {
-  ensurePaper(options.width * 2, options.height * 2);
+  const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
+  const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
+  ensurePaper(paperWidth, paperHeight);
   import_paper.default.project.activeLayer.removeChildren();
   const mainShape = getDielineShape(options);
   const pathData = mainShape.pathData;
@@ -700,8 +715,9 @@ function generateMaskPath(options) {
   return pathData;
 }
 function generateBleedZonePath(options, offset) {
-  const maxDim = Math.max(options.width, options.height) + Math.abs(offset) * 4;
-  ensurePaper(maxDim, maxDim);
+  const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
+  const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
+  ensurePaper(paperWidth, paperHeight);
   import_paper.default.project.activeLayer.removeChildren();
   const shapeOriginal = getDielineShape(options);
   let shapeOffset;
@@ -1145,7 +1161,9 @@ var DielineTool = class {
         x: cx,
         y: cy,
         holes: absoluteHoles,
-        pathData: this.pathData
+        pathData: this.pathData,
+        canvasWidth: canvasW,
+        canvasHeight: canvasH
       });
       const insideObj = new import_fabric2.Path(productPathData, {
         fill: insideColor,
@@ -1168,7 +1186,9 @@ var DielineTool = class {
           x: cx,
           y: cy,
           holes: absoluteHoles,
-          pathData: this.pathData
+          pathData: this.pathData,
+          canvasWidth: canvasW,
+          canvasHeight: canvasH
         },
         visualOffset
       );
@@ -1195,7 +1215,9 @@ var DielineTool = class {
         x: cx,
         y: cy,
         holes: absoluteHoles,
-        pathData: this.pathData
+        pathData: this.pathData,
+        canvasWidth: canvasW,
+        canvasHeight: canvasH
       });
       const offsetBorderObj = new import_fabric2.Path(offsetPathData, {
         fill: null,
@@ -1219,7 +1241,9 @@ var DielineTool = class {
       x: cx,
       y: cy,
       holes: absoluteHoles,
-      pathData: this.pathData
+      pathData: this.pathData,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH
     });
     const borderObj = new import_fabric2.Path(borderPathData, {
       fill: "transparent",
@@ -1334,7 +1358,9 @@ var DielineTool = class {
       x: cx,
       y: cy,
       holes: absoluteHoles,
-      pathData: this.pathData
+      pathData: this.pathData,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH
     });
     const clonedLayer = await userLayer.clone();
     const clipPath = new import_fabric2.Path(pathData, {
@@ -1627,7 +1653,7 @@ var HoleTool = class {
           command: "addHole",
           title: "Add Hole",
           handler: (x, y) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (!this.canvasService) return false;
             let normalizedX = 0.5;
             let normalizedY = 0.5;
@@ -1650,9 +1676,11 @@ var HoleTool = class {
               const lastHole = currentHoles[currentHoles.length - 1];
               const innerRadius = (_b = lastHole == null ? void 0 : lastHole.innerRadius) != null ? _b : 15;
               const outerRadius = (_c = lastHole == null ? void 0 : lastHole.outerRadius) != null ? _c : 25;
+              const shape = (_d = lastHole == null ? void 0 : lastHole.shape) != null ? _d : "circle";
               const newHole = {
                 x: normalizedX,
                 y: normalizedY,
+                shape,
                 innerRadius,
                 outerRadius
               };
@@ -1684,6 +1712,7 @@ var HoleTool = class {
     if (!this.handleDielineChange) {
       this.handleDielineChange = (geometry) => {
         this.currentGeometry = geometry;
+        this.redraw();
         const changed = this.enforceConstraints();
         if (changed) {
           this.syncHolesToDieline();
@@ -1797,10 +1826,16 @@ var HoleTool = class {
   }
   syncHolesFromCanvas() {
     if (!this.canvasService) return;
-    const objects = this.canvasService.canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
-    });
+    const objects = this.canvasService.canvas.getObjects().filter(
+      (obj) => {
+        var _a;
+        return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker" || obj.name === "hole-marker";
+      }
+    );
+    if (objects.length === 0 && this.holes.length > 0) {
+      console.warn("HoleTool: No markers found on canvas to sync from");
+      return;
+    }
     objects.sort(
       (a, b) => {
         var _a, _b, _c, _d;
@@ -1812,6 +1847,13 @@ var HoleTool = class {
       const original = this.holes[i];
       const newAbsX = obj.left;
       const newAbsY = obj.top;
+      if (isNaN(newAbsX) || isNaN(newAbsY)) {
+        console.error("HoleTool: Invalid marker coordinates", {
+          newAbsX,
+          newAbsY
+        });
+        return original;
+      }
       const scale = ((_a = this.currentGeometry) == null ? void 0 : _a.scale) || 1;
       const unit = ((_b = this.currentGeometry) == null ? void 0 : _b.unit) || "mm";
       const unitScale = Coordinate.convertUnit(1, "mm", unit);
@@ -1868,7 +1910,11 @@ var HoleTool = class {
           offsetY: (newAbsY - by) / scale / unitScale,
           // Clear direct coordinates if we use anchor
           x: void 0,
-          y: void 0
+          y: void 0,
+          // Ensure other properties are preserved
+          innerRadius: original.innerRadius,
+          outerRadius: original.outerRadius,
+          shape: original.shape || "circle"
         };
       }
       let normalizedX = 0.5;
@@ -1888,9 +1934,13 @@ var HoleTool = class {
         ...original,
         x: normalizedX,
         y: normalizedY,
-        // Ensure radii are preserved
+        // Clear offsets if we are using direct normalized coordinates
+        offsetX: void 0,
+        offsetY: void 0,
+        // Ensure other properties are preserved
         innerRadius: (_c = original == null ? void 0 : original.innerRadius) != null ? _c : 15,
-        outerRadius: (_d = original == null ? void 0 : original.outerRadius) != null ? _d : 25
+        outerRadius: (_d = original == null ? void 0 : original.outerRadius) != null ? _d : 25,
+        shape: (original == null ? void 0 : original.shape) || "circle"
       };
     });
     this.holes = newHoles;
@@ -1948,7 +1998,16 @@ var HoleTool = class {
         { width: geometry.width, height: geometry.height }
         // Use geometry dims instead of canvas
       );
-      const innerCircle = new import_fabric4.Circle({
+      const isSquare = hole.shape === "square";
+      const innerMarker = isSquare ? new import_fabric4.Rect({
+        width: visualInnerRadius * 2,
+        height: visualInnerRadius * 2,
+        fill: "transparent",
+        stroke: "red",
+        strokeWidth: 2,
+        originX: "center",
+        originY: "center"
+      }) : new import_fabric4.Circle({
         radius: visualInnerRadius,
         fill: "transparent",
         stroke: "red",
@@ -1956,7 +2015,16 @@ var HoleTool = class {
         originX: "center",
         originY: "center"
       });
-      const outerCircle = new import_fabric4.Circle({
+      const outerMarker = isSquare ? new import_fabric4.Rect({
+        width: visualOuterRadius * 2,
+        height: visualOuterRadius * 2,
+        fill: "transparent",
+        stroke: "#666",
+        strokeWidth: 1,
+        strokeDashArray: [5, 5],
+        originX: "center",
+        originY: "center"
+      }) : new import_fabric4.Circle({
         radius: visualOuterRadius,
         fill: "transparent",
         stroke: "#666",
@@ -1965,7 +2033,7 @@ var HoleTool = class {
         originX: "center",
         originY: "center"
       });
-      const holeGroup = new import_fabric4.Group([outerCircle, innerCircle], {
+      const holeGroup = new import_fabric4.Group([outerMarker, innerMarker], {
         left: pos.x,
         top: pos.y,
         originX: "center",
@@ -2293,12 +2361,25 @@ var ImageTool = class {
     let visualHeight = canvasH;
     let dielinePhysicalWidth = 500;
     let dielinePhysicalHeight = 500;
+    let bleedOffset = 0;
     if (this.context) {
       const configService = this.context.services.get("ConfigurationService");
       if (configService) {
         dielinePhysicalWidth = configService.get("dieline.width") || 500;
         dielinePhysicalHeight = configService.get("dieline.height") || 500;
-        const padding = configService.get("dieline.padding") || 40;
+        bleedOffset = configService.get("dieline.offset") || 0;
+        const paddingValue = configService.get("dieline.padding") || 40;
+        let padding = 0;
+        if (typeof paddingValue === "number") {
+          padding = paddingValue;
+        } else if (typeof paddingValue === "string") {
+          if (paddingValue.endsWith("%")) {
+            const percent = parseFloat(paddingValue) / 100;
+            padding = Math.min(canvasW, canvasH) * percent;
+          } else {
+            padding = parseFloat(paddingValue) || 0;
+          }
+        }
         const layout = Coordinate.calculateLayout(
           { width: canvasW, height: canvasH },
           { width: dielinePhysicalWidth, height: dielinePhysicalHeight },
@@ -2318,7 +2399,8 @@ var ImageTool = class {
       visualWidth,
       visualHeight,
       dielinePhysicalWidth,
-      dielinePhysicalHeight
+      dielinePhysicalHeight,
+      bleedOffset
     };
   }
   updateImages() {
@@ -2385,22 +2467,26 @@ var ImageTool = class {
       image.set({
         originX: "center",
         originY: "center",
-        data: { id: item.id }
+        data: { id: item.id },
+        uniformScaling: true,
+        lockScalingFlip: true
+      });
+      image.setControlsVisibility({
+        mt: false,
+        mb: false,
+        ml: false,
+        mr: false
       });
       let { width, height, left, top } = item;
-      const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight } = layout;
+      const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight, bleedOffset } = layout;
       if (width === void 0 && height === void 0) {
-        const imgAspect = (image.width || 1) / (image.height || 1);
-        const dielineAspect = dielinePhysicalWidth / dielinePhysicalHeight;
-        if (imgAspect > dielineAspect) {
-          const w = dielinePhysicalWidth;
-          width = w;
-          height = w / imgAspect;
-        } else {
-          const h = dielinePhysicalHeight;
-          height = h;
-          width = h * imgAspect;
-        }
+        const targetWidth = dielinePhysicalWidth + 2 * bleedOffset;
+        const targetHeight = dielinePhysicalHeight + 2 * bleedOffset;
+        const targetMax = Math.max(targetWidth, targetHeight);
+        const imageMax = Math.max(image.width || 1, image.height || 1);
+        const scale = targetMax / imageMax;
+        width = (image.width || 1) * scale;
+        height = (image.height || 1) * scale;
         item.width = width;
         item.height = height;
       }

package/dist/index.mjs

@@ -574,12 +574,25 @@ function getDielineShape(options) {
     let lugsPath = null;
     let cutsPath = null;
     holes.forEach((hole) => {
-      const lug = new paper.Path.Circle({
-        center: [hole.x, hole.y],
+      const center = new paper.Point(hole.x, hole.y);
+      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,
         radius: hole.outerRadius
       });
-      const cut = new paper.Path.Circle({
-        center: [hole.x, hole.y],
+      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,
         radius: hole.innerRadius
       });
       if (!lugsPath) {
@@ -636,7 +649,9 @@ function getDielineShape(options) {
   return mainShape;
 }
 function generateDielinePath(options) {
-  ensurePaper(options.width * 2, options.height * 2);
+  const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
+  const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
+  ensurePaper(paperWidth, paperHeight);
   paper.project.activeLayer.removeChildren();
   const mainShape = getDielineShape(options);
   const pathData = mainShape.pathData;
@@ -660,8 +675,9 @@ function generateMaskPath(options) {
   return pathData;
 }
 function generateBleedZonePath(options, offset) {
-  const maxDim = Math.max(options.width, options.height) + Math.abs(offset) * 4;
-  ensurePaper(maxDim, maxDim);
+  const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
+  const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
+  ensurePaper(paperWidth, paperHeight);
   paper.project.activeLayer.removeChildren();
   const shapeOriginal = getDielineShape(options);
   let shapeOffset;
@@ -1105,7 +1121,9 @@ var DielineTool = class {
         x: cx,
         y: cy,
         holes: absoluteHoles,
-        pathData: this.pathData
+        pathData: this.pathData,
+        canvasWidth: canvasW,
+        canvasHeight: canvasH
       });
       const insideObj = new Path(productPathData, {
         fill: insideColor,
@@ -1128,7 +1146,9 @@ var DielineTool = class {
           x: cx,
           y: cy,
           holes: absoluteHoles,
-          pathData: this.pathData
+          pathData: this.pathData,
+          canvasWidth: canvasW,
+          canvasHeight: canvasH
         },
         visualOffset
       );
@@ -1155,7 +1175,9 @@ var DielineTool = class {
         x: cx,
         y: cy,
         holes: absoluteHoles,
-        pathData: this.pathData
+        pathData: this.pathData,
+        canvasWidth: canvasW,
+        canvasHeight: canvasH
       });
       const offsetBorderObj = new Path(offsetPathData, {
         fill: null,
@@ -1179,7 +1201,9 @@ var DielineTool = class {
       x: cx,
       y: cy,
       holes: absoluteHoles,
-      pathData: this.pathData
+      pathData: this.pathData,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH
     });
     const borderObj = new Path(borderPathData, {
       fill: "transparent",
@@ -1294,7 +1318,9 @@ var DielineTool = class {
       x: cx,
       y: cy,
       holes: absoluteHoles,
-      pathData: this.pathData
+      pathData: this.pathData,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH
     });
     const clonedLayer = await userLayer.clone();
     const clipPath = new Path(pathData, {
@@ -1485,7 +1511,7 @@ var FilmTool = class {
 import {
   ContributionPointIds as ContributionPointIds4
 } from "@pooder/core";
-import { Circle, Group, Point } from "fabric";
+import { Circle, Group, Point, Rect as Rect2 } from "fabric";
 var HoleTool = class {
   constructor(options) {
     this.id = "pooder.kit.hole";
@@ -1591,7 +1617,7 @@ var HoleTool = class {
           command: "addHole",
           title: "Add Hole",
           handler: (x, y) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (!this.canvasService) return false;
             let normalizedX = 0.5;
             let normalizedY = 0.5;
@@ -1614,9 +1640,11 @@ var HoleTool = class {
               const lastHole = currentHoles[currentHoles.length - 1];
               const innerRadius = (_b = lastHole == null ? void 0 : lastHole.innerRadius) != null ? _b : 15;
               const outerRadius = (_c = lastHole == null ? void 0 : lastHole.outerRadius) != null ? _c : 25;
+              const shape = (_d = lastHole == null ? void 0 : lastHole.shape) != null ? _d : "circle";
               const newHole = {
                 x: normalizedX,
                 y: normalizedY,
+                shape,
                 innerRadius,
                 outerRadius
               };
@@ -1648,6 +1676,7 @@ var HoleTool = class {
     if (!this.handleDielineChange) {
       this.handleDielineChange = (geometry) => {
         this.currentGeometry = geometry;
+        this.redraw();
         const changed = this.enforceConstraints();
         if (changed) {
           this.syncHolesToDieline();
@@ -1761,10 +1790,16 @@ var HoleTool = class {
   }
   syncHolesFromCanvas() {
     if (!this.canvasService) return;
-    const objects = this.canvasService.canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
-    });
+    const objects = this.canvasService.canvas.getObjects().filter(
+      (obj) => {
+        var _a;
+        return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker" || obj.name === "hole-marker";
+      }
+    );
+    if (objects.length === 0 && this.holes.length > 0) {
+      console.warn("HoleTool: No markers found on canvas to sync from");
+      return;
+    }
     objects.sort(
       (a, b) => {
         var _a, _b, _c, _d;
@@ -1776,6 +1811,13 @@ var HoleTool = class {
       const original = this.holes[i];
       const newAbsX = obj.left;
       const newAbsY = obj.top;
+      if (isNaN(newAbsX) || isNaN(newAbsY)) {
+        console.error("HoleTool: Invalid marker coordinates", {
+          newAbsX,
+          newAbsY
+        });
+        return original;
+      }
       const scale = ((_a = this.currentGeometry) == null ? void 0 : _a.scale) || 1;
       const unit = ((_b = this.currentGeometry) == null ? void 0 : _b.unit) || "mm";
       const unitScale = Coordinate.convertUnit(1, "mm", unit);
@@ -1832,7 +1874,11 @@ var HoleTool = class {
           offsetY: (newAbsY - by) / scale / unitScale,
           // Clear direct coordinates if we use anchor
           x: void 0,
-          y: void 0
+          y: void 0,
+          // Ensure other properties are preserved
+          innerRadius: original.innerRadius,
+          outerRadius: original.outerRadius,
+          shape: original.shape || "circle"
         };
       }
       let normalizedX = 0.5;
@@ -1852,9 +1898,13 @@ var HoleTool = class {
         ...original,
         x: normalizedX,
         y: normalizedY,
-        // Ensure radii are preserved
+        // Clear offsets if we are using direct normalized coordinates
+        offsetX: void 0,
+        offsetY: void 0,
+        // Ensure other properties are preserved
         innerRadius: (_c = original == null ? void 0 : original.innerRadius) != null ? _c : 15,
-        outerRadius: (_d = original == null ? void 0 : original.outerRadius) != null ? _d : 25
+        outerRadius: (_d = original == null ? void 0 : original.outerRadius) != null ? _d : 25,
+        shape: (original == null ? void 0 : original.shape) || "circle"
       };
     });
     this.holes = newHoles;
@@ -1912,7 +1962,16 @@ var HoleTool = class {
         { width: geometry.width, height: geometry.height }
         // Use geometry dims instead of canvas
       );
-      const innerCircle = new Circle({
+      const isSquare = hole.shape === "square";
+      const innerMarker = isSquare ? new Rect2({
+        width: visualInnerRadius * 2,
+        height: visualInnerRadius * 2,
+        fill: "transparent",
+        stroke: "red",
+        strokeWidth: 2,
+        originX: "center",
+        originY: "center"
+      }) : new Circle({
         radius: visualInnerRadius,
         fill: "transparent",
         stroke: "red",
@@ -1920,7 +1979,16 @@ var HoleTool = class {
         originX: "center",
         originY: "center"
       });
-      const outerCircle = new Circle({
+      const outerMarker = isSquare ? new Rect2({
+        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",
@@ -1929,7 +1997,7 @@ var HoleTool = class {
         originX: "center",
         originY: "center"
       });
-      const holeGroup = new Group([outerCircle, innerCircle], {
+      const holeGroup = new Group([outerMarker, innerMarker], {
         left: pos.x,
         top: pos.y,
         originX: "center",
@@ -2259,12 +2327,25 @@ var ImageTool = class {
     let visualHeight = canvasH;
     let dielinePhysicalWidth = 500;
     let dielinePhysicalHeight = 500;
+    let bleedOffset = 0;
     if (this.context) {
       const configService = this.context.services.get("ConfigurationService");
       if (configService) {
         dielinePhysicalWidth = configService.get("dieline.width") || 500;
         dielinePhysicalHeight = configService.get("dieline.height") || 500;
-        const padding = configService.get("dieline.padding") || 40;
+        bleedOffset = configService.get("dieline.offset") || 0;
+        const paddingValue = configService.get("dieline.padding") || 40;
+        let padding = 0;
+        if (typeof paddingValue === "number") {
+          padding = paddingValue;
+        } else if (typeof paddingValue === "string") {
+          if (paddingValue.endsWith("%")) {
+            const percent = parseFloat(paddingValue) / 100;
+            padding = Math.min(canvasW, canvasH) * percent;
+          } else {
+            padding = parseFloat(paddingValue) || 0;
+          }
+        }
         const layout = Coordinate.calculateLayout(
           { width: canvasW, height: canvasH },
           { width: dielinePhysicalWidth, height: dielinePhysicalHeight },
@@ -2284,7 +2365,8 @@ var ImageTool = class {
       visualWidth,
       visualHeight,
       dielinePhysicalWidth,
-      dielinePhysicalHeight
+      dielinePhysicalHeight,
+      bleedOffset
     };
   }
   updateImages() {
@@ -2351,22 +2433,26 @@ var ImageTool = class {
       image.set({
         originX: "center",
         originY: "center",
-        data: { id: item.id }
+        data: { id: item.id },
+        uniformScaling: true,
+        lockScalingFlip: true
+      });
+      image.setControlsVisibility({
+        mt: false,
+        mb: false,
+        ml: false,
+        mr: false
       });
       let { width, height, left, top } = item;
-      const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight } = layout;
+      const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight, bleedOffset } = layout;
       if (width === void 0 && height === void 0) {
-        const imgAspect = (image.width || 1) / (image.height || 1);
-        const dielineAspect = dielinePhysicalWidth / dielinePhysicalHeight;
-        if (imgAspect > dielineAspect) {
-          const w = dielinePhysicalWidth;
-          width = w;
-          height = w / imgAspect;
-        } else {
-          const h = dielinePhysicalHeight;
-          height = h;
-          width = h * imgAspect;
-        }
+        const targetWidth = dielinePhysicalWidth + 2 * bleedOffset;
+        const targetHeight = dielinePhysicalHeight + 2 * bleedOffset;
+        const targetMax = Math.max(targetWidth, targetHeight);
+        const imageMax = Math.max(image.width || 1, image.height || 1);
+        const scale = targetMax / imageMax;
+        width = (image.width || 1) * scale;
+        height = (image.height || 1) * scale;
         item.width = width;
         item.height = height;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "3.2.0",
+  "version": "3.3.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",

package/src/image.ts

@@ -241,13 +241,27 @@ export class ImageTool implements Extension {
     let visualHeight = canvasH;
     let dielinePhysicalWidth = 500;
     let dielinePhysicalHeight = 500;
+    let bleedOffset = 0;
 
     if (this.context) {
       const configService = this.context.services.get<ConfigurationService>("ConfigurationService");
       if (configService) {
         dielinePhysicalWidth = configService.get("dieline.width") || 500;
         dielinePhysicalHeight = configService.get("dieline.height") || 500;
-        const padding = configService.get("dieline.padding") || 40;
+        bleedOffset = configService.get("dieline.offset") || 0;
+        
+        const paddingValue = configService.get("dieline.padding") || 40;
+        let padding = 0;
+        if (typeof paddingValue === "number") {
+          padding = paddingValue;
+        } else if (typeof paddingValue === "string") {
+          if (paddingValue.endsWith("%")) {
+            const percent = parseFloat(paddingValue) / 100;
+            padding = Math.min(canvasW, canvasH) * percent;
+          } else {
+            padding = parseFloat(paddingValue) || 0;
+          }
+        }
         
         const layout = Coordinate.calculateLayout(
             { width: canvasW, height: canvasH },
@@ -269,7 +283,8 @@ export class ImageTool implements Extension {
       visualWidth,
       visualHeight,
       dielinePhysicalWidth,
-      dielinePhysicalHeight
+      dielinePhysicalHeight,
+      bleedOffset
     };
   }
 
@@ -378,26 +393,34 @@ export class ImageTool implements Extension {
           originX: "center",
           originY: "center",
           data: { id: item.id },
+          uniformScaling: true,
+          lockScalingFlip: true,
+        });
+
+        image.setControlsVisibility({
+          mt: false,
+          mb: false,
+          ml: false,
+          mr: false,
         });
 
         // Initial Layout
         let { width, height, left, top } = item;
-        const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight } = layout;
+        const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight, bleedOffset } = layout;
 
         // Auto-scale if needed
         if (width === undefined && height === undefined) {
-           const imgAspect = (image.width || 1) / (image.height || 1);
-           const dielineAspect = dielinePhysicalWidth / dielinePhysicalHeight;
+           // Calculate target dimensions including bleed
+           const targetWidth = dielinePhysicalWidth + 2 * bleedOffset;
+           const targetHeight = dielinePhysicalHeight + 2 * bleedOffset;
+           
+           // "适应最长边" (Fit to longest side) logic
+           const targetMax = Math.max(targetWidth, targetHeight);
+           const imageMax = Math.max(image.width || 1, image.height || 1);
+           const scale = targetMax / imageMax;
            
-           if (imgAspect > dielineAspect) {
-             const w = dielinePhysicalWidth;
-             width = w;
-             height = w / imgAspect;
-           } else {
-             const h = dielinePhysicalHeight;
-             height = h;
-             width = h * imgAspect;
-           }
+           width = (image.width || 1) * scale;
+           height = (image.height || 1) * scale;
            
            // Update item with defaults
            item.width = width;