@pooder/kit 3.0.0 → 3.1.0

package/dist/index.js

@@ -472,6 +472,65 @@ var Coordinate = class {
 
 // src/geometry.ts
 var import_paper = __toESM(require("paper"));
+function resolveHolePosition(hole, geometry, canvasSize) {
+  if (hole.anchor) {
+    const { x, y, width, height } = geometry;
+    let bx = x;
+    let by = y;
+    const left = x - width / 2;
+    const right = x + width / 2;
+    const top = y - height / 2;
+    const bottom = y + height / 2;
+    switch (hole.anchor) {
+      case "top-left":
+        bx = left;
+        by = top;
+        break;
+      case "top-center":
+        bx = x;
+        by = top;
+        break;
+      case "top-right":
+        bx = right;
+        by = top;
+        break;
+      case "center-left":
+        bx = left;
+        by = y;
+        break;
+      case "center":
+        bx = x;
+        by = y;
+        break;
+      case "center-right":
+        bx = right;
+        by = y;
+        break;
+      case "bottom-left":
+        bx = left;
+        by = bottom;
+        break;
+      case "bottom-center":
+        bx = x;
+        by = bottom;
+        break;
+      case "bottom-right":
+        bx = right;
+        by = bottom;
+        break;
+    }
+    return {
+      x: bx + (hole.offsetX || 0),
+      y: by + (hole.offsetY || 0)
+    };
+  } else if (hole.x !== void 0 && hole.y !== void 0) {
+    return {
+      x: hole.x * canvasSize.width,
+      y: hole.y * canvasSize.height
+    };
+  }
+  return { x: 0, y: 0 };
+}
 function ensurePaper(width, height) {
   if (!import_paper.default.project) {
     import_paper.default.setup(new import_paper.default.Size(width, height));
@@ -833,65 +892,6 @@ var DielineTool = class {
         }
       ],
       [import_core2.ContributionPointIds.COMMANDS]: [
-        {
-          command: "reset",
-          title: "Reset Dieline",
-          handler: () => {
-            this.shape = "rect";
-            this.width = 300;
-            this.height = 300;
-            this.radius = 0;
-            this.offset = 0;
-            this.style = "solid";
-            this.insideColor = "rgba(0,0,0,0)";
-            this.outsideColor = "#ffffff";
-            this.showBleedLines = true;
-            this.holes = [];
-            this.pathData = void 0;
-            this.updateDieline();
-            return true;
-          }
-        },
-        {
-          command: "setDimensions",
-          title: "Set Dimensions",
-          handler: (width, height) => {
-            if (this.width === width && this.height === height) return true;
-            this.width = width;
-            this.height = height;
-            this.updateDieline();
-            return true;
-          }
-        },
-        {
-          command: "setShape",
-          title: "Set Shape",
-          handler: (shape) => {
-            if (this.shape === shape) return true;
-            this.shape = shape;
-            this.updateDieline();
-            return true;
-          }
-        },
-        {
-          command: "setBleed",
-          title: "Set Bleed",
-          handler: (bleed) => {
-            if (this.offset === bleed) return true;
-            this.offset = bleed;
-            this.updateDieline();
-            return true;
-          }
-        },
-        {
-          command: "setHoles",
-          title: "Set Holes",
-          handler: (holes) => {
-            this.holes = holes;
-            this.updateDieline(false);
-            return true;
-          }
-        },
         {
           command: "getGeometry",
           title: "Get Geometry",
@@ -910,16 +910,21 @@ var DielineTool = class {
           command: "detectEdge",
           title: "Detect Edge from Image",
           handler: async (imageUrl, options) => {
+            var _a;
             try {
               const pathData = await ImageTracer.trace(imageUrl, options);
               const bounds = getPathBounds(pathData);
               const currentMax = Math.max(this.width, this.height);
               const scale = currentMax / Math.max(bounds.width, bounds.height);
-              this.width = bounds.width * scale;
-              this.height = bounds.height * scale;
-              this.shape = "custom";
-              this.pathData = pathData;
-              this.updateDieline();
+              const newWidth = bounds.width * scale;
+              const newHeight = bounds.height * scale;
+              const configService = (_a = this.context) == null ? void 0 : _a.services.get("ConfigurationService");
+              if (configService) {
+                configService.update("dieline.width", newWidth);
+                configService.update("dieline.height", newHeight);
+                configService.update("dieline.shape", "custom");
+                configService.update("dieline.pathData", pathData);
+              }
               return pathData;
             } catch (e) {
               console.error("Edge detection failed", e);
@@ -979,6 +984,7 @@ var DielineTool = class {
     return new import_fabric2.Pattern({ source: canvas, repetition: "repeat" });
   }
   updateDieline(emitEvent = true) {
+    var _a, _b;
     if (!this.canvasService) return;
     const layer = this.getLayer();
     if (!layer) return;
@@ -997,23 +1003,31 @@ var DielineTool = class {
     let { width, height } = this;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
+    let visualWidth = width;
+    let visualHeight = height;
     if (borderLength && borderLength > 0) {
-      width = Math.max(0, canvasW - borderLength * 2);
-      height = Math.max(0, canvasH - borderLength * 2);
+      visualWidth = Math.max(0, canvasW - borderLength * 2);
+      visualHeight = Math.max(0, canvasH - borderLength * 2);
     }
-    const normalizedPos = position != null ? position : { x: 0.5, y: 0.5 };
-    const cx = Coordinate.toAbsolute(normalizedPos.x, canvasW);
-    const cy = Coordinate.toAbsolute(normalizedPos.y, canvasH);
+    const cx = Coordinate.toAbsolute((_a = position == null ? void 0 : position.x) != null ? _a : 0.5, canvasW);
+    const cy = Coordinate.toAbsolute((_b = position == null ? void 0 : position.y) != null ? _b : 0.5, canvasH);
     layer.remove(...layer.getObjects());
+    const geometryForHoles = {
+      x: cx,
+      y: cy,
+      width: visualWidth,
+      height: visualHeight
+    };
     const absoluteHoles = (holes || []).map((h) => {
-      const p = Coordinate.denormalizePoint(
-        { x: h.x, y: h.y },
+      const pos = resolveHolePosition(
+        h,
+        geometryForHoles,
         { width: canvasW, height: canvasH }
       );
       return {
         ...h,
-        x: p.x,
-        y: p.y
+        x: pos.x,
+        y: pos.y
       };
     });
     const cutW = Math.max(0, width + offset * 2);
@@ -1198,14 +1212,15 @@ var DielineTool = class {
     const cx = Coordinate.toAbsolute((_a = position == null ? void 0 : position.x) != null ? _a : 0.5, canvasW);
     const cy = Coordinate.toAbsolute((_b = position == null ? void 0 : position.y) != null ? _b : 0.5, canvasH);
     const absoluteHoles = (holes || []).map((h) => {
-      const p = Coordinate.denormalizePoint(
-        { x: h.x, y: h.y },
+      const pos = resolveHolePosition(
+        h,
+        { x: cx, y: cy, width, height },
         { width: canvasW, height: canvasH }
       );
       return {
         ...h,
-        x: p.x,
-        y: p.y
+        x: pos.x,
+        y: pos.y
       };
     });
     const pathData = generateDielinePath({
@@ -1442,9 +1457,6 @@ var HoleTool = class {
     this.metadata = {
       name: "HoleTool"
     };
-    this.innerRadius = 15;
-    this.outerRadius = 25;
-    this.style = "solid";
     this.holes = [];
     this.constraintTarget = "bleed";
     this.isUpdatingConfig = false;
@@ -1468,53 +1480,20 @@ var HoleTool = class {
       "ConfigurationService"
     );
     if (configService) {
-      this.innerRadius = configService.get(
-        "hole.innerRadius",
-        this.innerRadius
-      );
-      this.outerRadius = configService.get(
-        "hole.outerRadius",
-        this.outerRadius
-      );
-      this.style = configService.get("hole.style", this.style);
       this.constraintTarget = configService.get(
         "hole.constraintTarget",
         this.constraintTarget
       );
-      const dielineHoles = configService.get("dieline.holes", []);
-      if (this.canvasService) {
-        const { width, height } = this.canvasService.canvas;
-        this.holes = dielineHoles.map((h) => {
-          const p = Coordinate.denormalizePoint(h, {
-            width: width || 800,
-            height: height || 600
-          });
-          return { x: p.x, y: p.y };
-        });
-      }
+      this.holes = configService.get("dieline.holes", []);
       configService.onAnyChange((e) => {
         if (this.isUpdatingConfig) return;
-        if (e.key.startsWith("hole.")) {
-          const prop = e.key.split(".")[1];
-          if (prop && prop in this) {
-            this[prop] = e.value;
-            this.redraw();
-            this.syncHolesToDieline();
-          }
+        if (e.key === "hole.constraintTarget") {
+          this.constraintTarget = e.value;
+          this.enforceConstraints();
         }
         if (e.key === "dieline.holes") {
-          const holes = e.value || [];
-          if (this.canvasService) {
-            const { width, height } = this.canvasService.canvas;
-            this.holes = holes.map((h) => {
-              const p = Coordinate.denormalizePoint(h, {
-                width: width || 800,
-                height: height || 600
-              });
-              return { x: p.x, y: p.y };
-            });
-            this.redraw();
-          }
+          this.holes = e.value || [];
+          this.redraw();
         }
       });
     }
@@ -1528,29 +1507,6 @@ var HoleTool = class {
   contribute() {
     return {
       [import_core4.ContributionPointIds.CONFIGURATIONS]: [
-        {
-          id: "hole.innerRadius",
-          type: "number",
-          label: "Inner Radius",
-          min: 1,
-          max: 100,
-          default: 15
-        },
-        {
-          id: "hole.outerRadius",
-          type: "number",
-          label: "Outer Radius",
-          min: 1,
-          max: 100,
-          default: 25
-        },
-        {
-          id: "hole.style",
-          type: "select",
-          label: "Line Style",
-          options: ["solid", "dashed"],
-          default: "solid"
-        },
         {
           id: "hole.constraintTarget",
           type: "select",
@@ -1564,6 +1520,7 @@ var HoleTool = class {
           command: "resetHoles",
           title: "Reset Holes",
           handler: () => {
+            var _a;
             if (!this.canvasService) return false;
             let defaultPos = { x: this.canvasService.canvas.width / 2, y: 50 };
             if (this.currentGeometry) {
@@ -1574,12 +1531,24 @@ var HoleTool = class {
                 holes: []
               });
             }
-            this.innerRadius = 15;
-            this.outerRadius = 25;
-            this.style = "solid";
-            this.holes = [defaultPos];
-            this.redraw();
-            this.syncHolesToDieline();
+            const { width, height } = this.canvasService.canvas;
+            const normalizedHole = Coordinate.normalizePoint(defaultPos, {
+              width: width || 800,
+              height: height || 600
+            });
+            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+              "ConfigurationService"
+            );
+            if (configService) {
+              configService.update("dieline.holes", [
+                {
+                  x: normalizedHole.x,
+                  y: normalizedHole.y,
+                  innerRadius: 15,
+                  outerRadius: 25
+                }
+              ]);
+            }
             return true;
           }
         },
@@ -1587,10 +1556,29 @@ var HoleTool = class {
           command: "addHole",
           title: "Add Hole",
           handler: (x, y) => {
-            if (!this.holes) this.holes = [];
-            this.holes.push({ x, y });
-            this.redraw();
-            this.syncHolesToDieline();
+            var _a, _b, _c;
+            if (!this.canvasService) return false;
+            const { width, height } = this.canvasService.canvas;
+            const normalizedHole = Coordinate.normalizePoint(
+              { x, y },
+              { width: width || 800, height: height || 600 }
+            );
+            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+              "ConfigurationService"
+            );
+            if (configService) {
+              const currentHoles = configService.get("dieline.holes", []);
+              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 newHole = {
+                x: normalizedHole.x,
+                y: normalizedHole.y,
+                innerRadius,
+                outerRadius
+              };
+              configService.update("dieline.holes", [...currentHoles, newHole]);
+            }
             return true;
           }
         },
@@ -1598,9 +1586,13 @@ var HoleTool = class {
           command: "clearHoles",
           title: "Clear Holes",
           handler: () => {
-            this.holes = [];
-            this.redraw();
-            this.syncHolesToDieline();
+            var _a;
+            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+              "ConfigurationService"
+            );
+            if (configService) {
+              configService.update("dieline.holes", []);
+            }
             return true;
           }
         }
@@ -1641,10 +1633,12 @@ var HoleTool = class {
     }
     if (!this.handleMoving) {
       this.handleMoving = (e) => {
-        var _a;
+        var _a, _b, _c, _d, _e;
         const target = e.target;
         if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "hole-marker") return;
         if (!this.currentGeometry) return;
+        const index = (_c = (_b = target.data) == null ? void 0 : _b.index) != null ? _c : -1;
+        const holeData = this.holes[index];
         const effectiveOffset = this.constraintTarget === "original" ? 0 : this.currentGeometry.offset;
         const constraintGeometry = {
           ...this.currentGeometry,
@@ -1656,7 +1650,12 @@ var HoleTool = class {
           radius: Math.max(0, this.currentGeometry.radius + effectiveOffset)
         };
         const p = new import_fabric4.Point(target.left, target.top);
-        const newPos = this.calculateConstrainedPosition(p, constraintGeometry);
+        const newPos = this.calculateConstrainedPosition(
+          p,
+          constraintGeometry,
+          (_d = holeData == null ? void 0 : holeData.innerRadius) != null ? _d : 15,
+          (_e = holeData == null ? void 0 : holeData.outerRadius) != null ? _e : 25
+        );
         target.set({
           left: newPos.x,
           top: newPos.y
@@ -1677,19 +1676,6 @@ var HoleTool = class {
   }
   initializeHoles() {
     if (!this.canvasService) return;
-    if (!this.holes || this.holes.length === 0) {
-      let defaultPos = { x: this.canvasService.canvas.width / 2, y: 50 };
-      if (this.currentGeometry) {
-        const g = this.currentGeometry;
-        const topCenter = { x: g.x, y: g.y - g.height / 2 };
-        const snapped = getNearestPointOnDieline(topCenter, {
-          ...g,
-          holes: []
-        });
-        defaultPos = snapped;
-      }
-      this.holes = [defaultPos];
-    }
     this.redraw();
     this.syncHolesToDieline();
   }
@@ -1733,32 +1719,98 @@ var HoleTool = class {
       var _a;
       return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
     });
-    const holes = objects.map((obj) => ({ x: obj.left, y: obj.top }));
-    this.holes = holes;
+    objects.sort(
+      (a, b) => {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = a.data) == null ? void 0 : _a.index) != null ? _b : 0) - ((_d = (_c = b.data) == null ? void 0 : _c.index) != null ? _d : 0);
+      }
+    );
+    const newHoles = objects.map((obj, i) => {
+      var _a, _b;
+      const original = this.holes[i];
+      const newAbsX = obj.left;
+      const newAbsY = obj.top;
+      if (original && original.anchor && this.currentGeometry) {
+        const { x, y, width: width2, height: height2 } = this.currentGeometry;
+        let bx = x;
+        let by = y;
+        const left = x - width2 / 2;
+        const right = x + width2 / 2;
+        const top = y - height2 / 2;
+        const bottom = y + height2 / 2;
+        switch (original.anchor) {
+          case "top-left":
+            bx = left;
+            by = top;
+            break;
+          case "top-center":
+            bx = x;
+            by = top;
+            break;
+          case "top-right":
+            bx = right;
+            by = top;
+            break;
+          case "center-left":
+            bx = left;
+            by = y;
+            break;
+          case "center":
+            bx = x;
+            by = y;
+            break;
+          case "center-right":
+            bx = right;
+            by = y;
+            break;
+          case "bottom-left":
+            bx = left;
+            by = bottom;
+            break;
+          case "bottom-center":
+            bx = x;
+            by = bottom;
+            break;
+          case "bottom-right":
+            bx = right;
+            by = bottom;
+            break;
+        }
+        return {
+          ...original,
+          offsetX: newAbsX - bx,
+          offsetY: newAbsY - by,
+          // Clear direct coordinates if we use anchor
+          x: void 0,
+          y: void 0
+        };
+      }
+      const { width, height } = this.canvasService.canvas;
+      const p = Coordinate.normalizePoint(
+        { x: newAbsX, y: newAbsY },
+        { width: width || 800, height: height || 600 }
+      );
+      return {
+        ...original,
+        x: p.x,
+        y: p.y,
+        // Ensure radii are preserved
+        innerRadius: (_a = original == null ? void 0 : original.innerRadius) != null ? _a : 15,
+        outerRadius: (_b = original == null ? void 0 : original.outerRadius) != null ? _b : 25
+      };
+    });
+    this.holes = newHoles;
     this.syncHolesToDieline();
   }
   syncHolesToDieline() {
     if (!this.context || !this.canvasService) return;
-    const { holes, innerRadius, outerRadius } = this;
-    const currentHoles = holes || [];
-    const width = this.canvasService.canvas.width || 800;
-    const height = this.canvasService.canvas.height || 600;
     const configService = this.context.services.get(
       "ConfigurationService"
     );
     if (configService) {
       this.isUpdatingConfig = true;
       try {
-        const normalizedHoles = currentHoles.map((h) => {
-          const p = Coordinate.normalizePoint(h, { width, height });
-          return {
-            x: p.x,
-            y: p.y,
-            innerRadius,
-            outerRadius
-          };
-        });
-        configService.update("dieline.holes", normalizedHoles);
+        configService.update("dieline.holes", this.holes);
       } finally {
         this.isUpdatingConfig = false;
       }
@@ -1767,19 +1819,31 @@ var HoleTool = class {
   redraw() {
     if (!this.canvasService) return;
     const canvas = this.canvasService.canvas;
+    const { width, height } = canvas;
     const existing = canvas.getObjects().filter((obj) => {
       var _a;
       return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
     });
     existing.forEach((obj) => canvas.remove(obj));
-    const { innerRadius, outerRadius, style, holes } = this;
+    const holes = this.holes;
     if (!holes || holes.length === 0) {
       this.canvasService.requestRenderAll();
       return;
     }
+    const geometry = this.currentGeometry || {
+      x: (width || 800) / 2,
+      y: (height || 600) / 2,
+      width: width || 800,
+      height: height || 600
+    };
     holes.forEach((hole, index) => {
+      const pos = resolveHolePosition(
+        hole,
+        geometry,
+        { width: width || 800, height: height || 600 }
+      );
       const innerCircle = new import_fabric4.Circle({
-        radius: innerRadius,
+        radius: hole.innerRadius,
         fill: "transparent",
         stroke: "red",
         strokeWidth: 2,
@@ -1787,17 +1851,17 @@ var HoleTool = class {
         originY: "center"
       });
       const outerCircle = new import_fabric4.Circle({
-        radius: outerRadius,
+        radius: hole.outerRadius,
         fill: "transparent",
         stroke: "#666",
         strokeWidth: 1,
-        strokeDashArray: style === "dashed" ? [5, 5] : void 0,
+        strokeDashArray: [5, 5],
         originX: "center",
         originY: "center"
       });
       const holeGroup = new import_fabric4.Group([outerCircle, innerCircle], {
-        left: hole.x,
-        top: hole.y,
+        left: pos.x,
+        top: pos.y,
         originX: "center",
         originY: "center",
         selectable: true,
@@ -1842,9 +1906,6 @@ var HoleTool = class {
   enforceConstraints() {
     const geometry = this.currentGeometry;
     if (!geometry || !this.canvasService) {
-      console.log(
-        "[HoleTool] Skipping enforceConstraints: No geometry or canvas service"
-      );
       return false;
     }
     const effectiveOffset = this.constraintTarget === "original" ? 0 : geometry.offset;
@@ -1858,9 +1919,6 @@ var HoleTool = class {
       var _a;
       return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
     });
-    console.log(
-      `[HoleTool] Enforcing constraints on ${objects.length} markers`
-    );
     let changed = false;
     objects.sort(
       (a, b) => {
@@ -1869,16 +1927,17 @@ var HoleTool = class {
       }
     );
     const newHoles = [];
-    objects.forEach((obj) => {
+    objects.forEach((obj, i) => {
+      var _a, _b;
       const currentPos = new import_fabric4.Point(obj.left, obj.top);
+      const holeData = this.holes[i];
       const newPos = this.calculateConstrainedPosition(
         currentPos,
-        constraintGeometry
+        constraintGeometry,
+        (_a = holeData == null ? void 0 : holeData.innerRadius) != null ? _a : 15,
+        (_b = holeData == null ? void 0 : holeData.outerRadius) != null ? _b : 25
       );
       if (currentPos.distanceFrom(newPos) > 0.1) {
-        console.log(
-          `[HoleTool] Moving hole from (${currentPos.x}, ${currentPos.y}) to (${newPos.x}, ${newPos.y})`
-        );
         obj.set({
           left: newPos.x,
           top: newPos.y
@@ -1886,16 +1945,14 @@ var HoleTool = class {
         obj.setCoords();
         changed = true;
       }
-      newHoles.push({ x: obj.left, y: obj.top });
     });
     if (changed) {
-      this.holes = newHoles;
-      this.canvasService.requestRenderAll();
+      this.syncHolesFromCanvas();
       return true;
     }
     return false;
   }
-  calculateConstrainedPosition(p, g) {
+  calculateConstrainedPosition(p, g, innerRadius, outerRadius) {
     const options = {
       ...g,
       holes: []
@@ -1909,7 +1966,6 @@ var HoleTool = class {
     const dist = p.distanceFrom(nearestP);
     const v = p.subtract(nearestP);
     const center = new import_fabric4.Point(g.x, g.y);
-    const centerToNearest = nearestP.subtract(center);
     const distToCenter = p.distanceFrom(center);
     const nearestDistToCenter = nearestP.distanceFrom(center);
     let signedDist = dist;
@@ -1918,9 +1974,9 @@ var HoleTool = class {
     }
     let clampedDist = signedDist;
     if (signedDist > 0) {
-      clampedDist = Math.min(signedDist, this.innerRadius);
+      clampedDist = Math.min(signedDist, innerRadius);
     } else {
-      clampedDist = Math.max(signedDist, -this.outerRadius);
+      clampedDist = Math.max(signedDist, -outerRadius);
     }
     if (dist < 1e-3) return nearestP;
     const scale = Math.abs(clampedDist) / (dist || 1);