@pooder/kit 1.0.0 → 3.0.0

package/src/hole.ts

@@ -1,413 +1,629 @@
-import { Command, Editor, EditorState, Extension, OptionSchema, Circle, Group, Point } from '@pooder/core';
-import { DielineTool, DielineGeometry } from './dieline';
-import { getNearestPointOnDieline } from './geometry';
-import paper from 'paper';
-
-export interface HoleToolOptions {
-    innerRadius: number;
-    outerRadius: number;
-    style: 'solid' | 'dashed';
-    holes?: Array<{ x: number, y: number }>;
-}
-
-export class HoleTool implements Extension<HoleToolOptions> {
-    public name = 'HoleTool';
-    public options: HoleToolOptions = {
-        innerRadius: 15,
-        outerRadius: 25,
-        style: 'solid',
-        holes: []
-    };
-
-    public schema: Record<keyof HoleToolOptions, OptionSchema> = {
-        innerRadius: {
-            type: 'number',
-            min: 1,
-            max: 100,
-            label: 'Inner Radius'
-        },
-        outerRadius: {
-            type: 'number',
-            min: 1,
-            max: 100,
-            label: 'Outer Radius'
-        },
-        style: {
-            type: 'select',
-            options: ['solid', 'dashed'],
-            label: 'Line Style'
-        },
-        holes: {
-            type: 'json',
-            label: 'Holes'
-        } as any
-    };
-
-    private handleMoving: ((e: any) => void) | null = null;
-    private handleModified: ((e: any) => void) | null = null;
-
-    onMount(editor: Editor) {
-        this.setup(editor);
-    }
-
-    onUnmount(editor: Editor) {
-        this.teardown(editor);
-    }
-
-    onDestroy(editor: Editor) {
-        this.teardown(editor);
-    }
-
-    private getDielineGeometry(editor: Editor): DielineGeometry | null {
-        const dielineTool = editor.getExtension('DielineTool') as DielineTool;
-        if (!dielineTool) return null;
-
-        const geometry = dielineTool.getGeometry(editor);
-        if (!geometry) return null;
-
-        const offset = dielineTool.options.offset || 0;
-
-        // Apply offset to geometry
-        return {
-            ...geometry,
-            width: Math.max(0, geometry.width + offset * 2),
-            height: Math.max(0, geometry.height + offset * 2),
-            radius: Math.max(0, geometry.radius + offset)
-        };
-    }
-
-    private setup(editor: Editor) {
-        if (!this.handleMoving) {
-            this.handleMoving = (e: any) => {
-                const target = e.target;
-                if (!target || target.data?.type !== 'hole-marker') return;
-
-                const geometry = this.getDielineGeometry(editor);
-                if (!geometry) return;
-
-                const p = new Point(target.left, target.top);
-                const newPos = this.calculateConstrainedPosition(p, geometry);
-
-                target.set({
-                    left: newPos.x,
-                    top: newPos.y
-                });
-            };
-            editor.canvas.on('object:moving', this.handleMoving);
-        }
-        
-        if (!this.handleModified) {
-            this.handleModified = (e: any) => {
-                 const target = e.target;
-                 if (!target || target.data?.type !== 'hole-marker') return;
-                 
-                 // Update state when hole is moved
-                 this.syncHolesFromCanvas(editor);
-            };
-            editor.canvas.on('object:modified', this.handleModified);
-        }
-
-        const opts = this.options;
-        // Default hole if none exist
-        if (!opts.holes || opts.holes.length === 0) {
-             let defaultPos = { x: editor.canvas.width! / 2, y: 50 };
-             
-             const g = this.getDielineGeometry(editor);
-             if (g) {
-                 // Default to Top-Center of Dieline shape
-                 const topCenter = { x: g.x, y: g.y - g.height / 2 };
-                 // Snap to exact shape edge
-                 const snapped = getNearestPointOnDieline(topCenter, { ...g, holes: [] } as any);
-                 defaultPos = snapped;
-             }
-             
-             opts.holes = [defaultPos];
-        }
-        
-        this.options = { ...opts };
-        this.redraw(editor);
-
-        // Ensure Dieline updates to reflect current holes (fusion effect)
-        const dielineTool = editor.getExtension('DielineTool') as DielineTool;
-        if (dielineTool && dielineTool.updateDieline) {
-            dielineTool.updateDieline(editor);
-        }
-    }
-
-    private teardown(editor: Editor) {
-        if (this.handleMoving) {
-            editor.canvas.off('object:moving', this.handleMoving);
-            this.handleMoving = null;
-        }
-        if (this.handleModified) {
-            editor.canvas.off('object:modified', this.handleModified);
-            this.handleModified = null;
-        }
-        
-        const objects = editor.canvas.getObjects().filter((obj: any) => obj.data?.type === 'hole-marker');
-        objects.forEach(obj => editor.canvas.remove(obj));
-        
-        editor.canvas.requestRenderAll();
-    }
-
-    onUpdate(editor: Editor, state: EditorState) {
-    }
-
-    commands: Record<string, Command> = {
-        reset: {
-            execute: (editor: Editor) => {
-                let defaultPos = { x: editor.canvas.width! / 2, y: 50 };
-                
-                const g = this.getDielineGeometry(editor);
-                if (g) {
-                    const topCenter = { x: g.x, y: g.y - g.height / 2 };
-                    defaultPos = getNearestPointOnDieline(topCenter, { ...g, holes: [] } as any);
-                }
-
-                this.options = {
-                    innerRadius: 15,
-                    outerRadius: 25,
-                    style: 'solid',
-                    holes: [defaultPos]
-                };
-                this.redraw(editor);
-                
-                // Trigger Dieline update
-                const dielineTool = editor.getExtension('DielineTool') as DielineTool;
-                if (dielineTool && dielineTool.updateDieline) {
-                    dielineTool.updateDieline(editor);
-                }
-                
-                return true;
-            }
-        },
-        addHole: {
-            execute: (editor: Editor, x: number, y: number) => {
-                if (!this.options.holes) this.options.holes = [];
-                this.options.holes.push({ x, y });
-                this.redraw(editor);
-                
-                // Trigger Dieline update
-                const dielineTool = editor.getExtension('DielineTool') as any;
-                if (dielineTool && dielineTool.updateDieline) {
-                    dielineTool.updateDieline(editor);
-                }
-                
-                return true;
-            },
-            schema: {
-                x: {
-                    type: 'number',
-                    label: 'X Position',
-                    required: true
-                },
-                y: {
-                    type: 'number',
-                    label: 'Y Position',
-                    required: true
-                }
-            }
-        },
-        clearHoles: {
-            execute: (editor: Editor) => {
-                this.options.holes = [];
-                this.redraw(editor);
-                
-                // Trigger Dieline update
-                const dielineTool = editor.getExtension('DielineTool') as any;
-                if (dielineTool && dielineTool.updateDieline) {
-                    dielineTool.updateDieline(editor);
-                }
-                
-                return true;
-            }
-        }
-    };
-    
-    private syncHolesFromCanvas(editor: Editor) {
-        const objects = editor.canvas.getObjects().filter((obj: any) => obj.data?.type === 'hole-marker');
-        const holes = objects.map(obj => ({ x: obj.left!, y: obj.top! }));
-        this.options.holes = holes;
-        
-        // Trigger Dieline update for real-time fusion effect
-        const dielineTool = editor.getExtension('DielineTool') as any;
-        if (dielineTool && dielineTool.updateDieline) {
-            dielineTool.updateDieline(editor);
-        }
-    }
-
-    private redraw(editor: Editor) {
-        const canvas = editor.canvas;
-        
-        // Remove existing holes
-        const existing = canvas.getObjects().filter((obj: any) => obj.data?.type === 'hole-marker');
-        existing.forEach(obj => canvas.remove(obj));
-
-        const { innerRadius, outerRadius, style, holes } = this.options;
-        
-        if (!holes || holes.length === 0) {
-            canvas.requestRenderAll();
-            return;
-        }
-
-        holes.forEach((hole, index) => {
-            const innerCircle = new Circle({
-                radius: innerRadius,
-                fill: 'transparent',
-                stroke: 'red',
-                strokeWidth: 2,
-                originX: 'center',
-                originY: 'center'
-            });
-
-            const outerCircle = new Circle({
-                radius: outerRadius,
-                fill: 'transparent',
-                stroke: '#666',
-                strokeWidth: 1,
-                strokeDashArray: style === 'dashed' ? [5, 5] : undefined,
-                originX: 'center',
-                originY: 'center'
-            });
-
-            const holeGroup = new Group([outerCircle, innerCircle], {
-                left: hole.x,
-                top: hole.y,
-                originX: 'center',
-                originY: 'center',
-                selectable: true,
-                hasControls: false, // Don't allow resizing/rotating
-                hasBorders: false,
-                subTargetCheck: false,
-                opacity: 0, // Default hidden
-                hoverCursor: 'move',
-                data: { type: 'hole-marker', index } 
-            }as any);
-            (holeGroup as any).name = 'hole-marker';
-
-            // Auto-show/hide logic
-            holeGroup.on('mouseover', () => {
-                holeGroup.set('opacity', 1);
-                canvas.requestRenderAll();
-            });
-            holeGroup.on('mouseout', () => {
-                if (canvas.getActiveObject() !== holeGroup) {
-                    holeGroup.set('opacity', 0);
-                    canvas.requestRenderAll();
-                }
-            });
-            holeGroup.on('selected', () => {
-                holeGroup.set('opacity', 1);
-                canvas.requestRenderAll();
-            });
-            holeGroup.on('deselected', () => {
-                holeGroup.set('opacity', 0);
-                canvas.requestRenderAll();
-            });
-
-            canvas.add(holeGroup);
-            canvas.bringObjectToFront(holeGroup);
-        });
-        
-        canvas.requestRenderAll();
-    }
-
-    private calculateConstrainedPosition(p: Point, g: DielineGeometry): Point {
-        // Use Paper.js to get accurate nearest point
-        // This handles ellipses, rects, and rounded rects correctly
-        
-        // Convert to holes format for geometry options
-        const options = {
-            ...g,
-            holes: [] // We don't need holes for boundary calculation
-        };
-        
-        const nearest = getNearestPointOnDieline({x: p.x, y: p.y}, options as any);
-        
-        // Now constrain distance
-        const nearestP = new Point(nearest.x, nearest.y);
-        const dist = p.distanceFrom(nearestP);
-        
-        // Determine if point is inside or outside
-        // Simple heuristic: distance from center
-        // Or using paper.js contains() if we had the full path object
-        // For convex shapes, center distance works mostly, but let's use the vector direction
-        
-        // Vector from nearest to current point
-        const v = p.subtract(nearestP);
-        
-        // Vector from center to nearest point (approximate normal for convex shapes)
-        const center = new Point(g.x, g.y);
-        const centerToNearest = nearestP.subtract(center);
-        
-        // Dot product to see if they align (outside) or oppose (inside)
-        // If point is exactly on line, dist is 0.
-        
-        // However, we want to constrain the point to be within [innerRadius, -outerRadius] distance from the edge.
-        // Actually, usually users want to snap to the edge or stay within a reasonable margin.
-        // The previous logic clamped the distance.
-        
-        // Let's implement a simple snap-to-edge if close, otherwise allow free movement but clamp max distance?
-        // Or reproduce the previous "slide along edge" behavior.
-        // Previous behavior: "clampedDist = Math.min(dist, innerRadius); ... Math.max(dist, -outerRadius)"
-        // This implies the hole center can be slightly inside or outside the main shape edge.
-        
-        // Let's determine sign of distance
-        // We can use paper.js Shape.contains(point) to check if inside.
-        // But getNearestPointOnDieline returns just coordinates.
-        
-        // Optimization: Let's assume for Dieline shapes (convex-ish), 
-        // if distance from center > distance of nearest from center, it's outside.
-        const distToCenter = p.distanceFrom(center);
-        const nearestDistToCenter = nearestP.distanceFrom(center);
-        
-        let signedDist = dist;
-        if (distToCenter < nearestDistToCenter) {
-            signedDist = -dist; // Inside
-        }
-        
-        // Clamp distance
-        let clampedDist = signedDist;
-        if (signedDist > 0) {
-            clampedDist = Math.min(signedDist, this.options.innerRadius);
-        } else {
-            clampedDist = Math.max(signedDist, -this.options.outerRadius);
-        }
-        
-        // Reconstruct point
-        // If dist is very small, just use nearestP
-        if (dist < 0.001) return nearestP;
-        
-        // Direction vector normalized
-        const dir = v.scalarDivide(dist);
-        
-        // New point = nearest + dir * clampedDist
-        // Note: if inside (signedDist < 0), v points towards center (roughly), dist is positive magnitude.
-        // Wait, v = p - nearest.
-        // If p is inside, p is closer to center. v points Inwards.
-        // If we want clampedDist to be negative, we should probably stick to normal vectors.
-        
-        // Let's simplify:
-        // Just place it at nearest point + offset vector.
-        // Offset vector is 'v' scaled to clampedDist.
-        
-        // If p is inside, v points in. length is 'dist'.
-        // We want length to be 'clampedDist' (magnitude).
-        // Since clampedDist is negative for inside, we need to be careful with signs.
-        
-        // Actually simpler:
-        // We want the result to lie on the line connecting Center -> P -> Nearest? No.
-        // We want it on the line Nearest -> P.
-        
-        // Current distance is 'dist'.
-        // Desired distance is abs(clampedDist).
-        // If clampedDist sign matches signedDist sign, we just scale v.
-        
-        const scale = Math.abs(clampedDist) / (dist || 1);
-        
-        // If we are clamping, we just scale the vector from nearest.
-        const offset = v.scalarMultiply(scale);
-        
-        return nearestP.add(offset);
-    }
-}
+import {
+  Extension,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationContribution,
+  ConfigurationService,
+} from "@pooder/core";
+import { Circle, Group, Point } from "fabric";
+import CanvasService from "./CanvasService";
+import { DielineGeometry } from "./dieline";
+import { getNearestPointOnDieline, HoleData } from "./geometry";
+import { Coordinate } from "./coordinate";
+
+export class HoleTool implements Extension {
+  id = "pooder.kit.hole";
+
+  public metadata = {
+    name: "HoleTool",
+  };
+
+  private innerRadius: number = 15;
+  private outerRadius: number = 25;
+  private style: "solid" | "dashed" = "solid";
+  private holes: Array<{ x: number; y: number }> = [];
+  private constraintTarget: "original" | "bleed" = "bleed";
+
+  private canvasService?: CanvasService;
+  private context?: ExtensionContext;
+  private isUpdatingConfig = false;
+
+  private handleMoving: ((e: any) => void) | null = null;
+  private handleModified: ((e: any) => void) | null = null;
+  private handleDielineChange: ((geometry: DielineGeometry) => void) | null =
+    null;
+
+  // Cache geometry to enforce constraints during drag
+  private currentGeometry: DielineGeometry | null = null;
+
+  constructor(
+    options?: Partial<{
+      innerRadius: number;
+      outerRadius: number;
+      style: "solid" | "dashed";
+      holes: Array<{ x: number; y: number }>;
+      constraintTarget: "original" | "bleed";
+    }>,
+  ) {
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+
+  activate(context: ExtensionContext) {
+    this.context = context;
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for HoleTool");
+      return;
+    }
+
+    const configService = context.services.get<ConfigurationService>(
+      "ConfigurationService",
+    );
+    if (configService) {
+      // Load initial config
+      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,
+      );
+
+      // Load holes from dieline.holes (SSOT)
+      const dielineHoles = configService.get("dieline.holes", []);
+      if (this.canvasService) {
+        const { width, height } = this.canvasService.canvas;
+        this.holes = dielineHoles.map((h: any) => {
+          const p = Coordinate.denormalizePoint(h, {
+            width: width || 800,
+            height: height || 600,
+          });
+          return { x: p.x, y: p.y };
+        });
+      }
+
+      // Listen for changes
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (this.isUpdatingConfig) return;
+
+        if (e.key.startsWith("hole.")) {
+          const prop = e.key.split(".")[1];
+          if (prop && prop in this) {
+            (this as any)[prop] = e.value;
+            this.redraw();
+            // Allow syncHolesToDieline to run to update dieline.holes
+            this.syncHolesToDieline();
+          }
+        }
+        // Listen for dieline.holes changes (e.g. from undo/redo or other sources)
+        if (e.key === "dieline.holes") {
+          const holes = e.value || [];
+          if (this.canvasService) {
+            const { width, height } = this.canvasService.canvas;
+            this.holes = holes.map((h: any) => {
+              const p = Coordinate.denormalizePoint(h, {
+                width: width || 800,
+                height: height || 600,
+              });
+              return { x: p.x, y: p.y };
+            });
+            this.redraw();
+          }
+        }
+      });
+    }
+
+    this.setup();
+  }
+
+  deactivate(context: ExtensionContext) {
+    this.teardown();
+    this.canvasService = undefined;
+    this.context = undefined;
+  }
+
+  contribute() {
+    return {
+      [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",
+          label: "Constraint Target",
+          options: ["original", "bleed"],
+          default: "bleed",
+        },
+      ] as ConfigurationContribution[],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "resetHoles",
+          title: "Reset Holes",
+          handler: () => {
+            if (!this.canvasService) return false;
+            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 };
+              defaultPos = getNearestPointOnDieline(topCenter, {
+                ...g,
+                holes: [],
+              } as any);
+            }
+
+            this.innerRadius = 15;
+            this.outerRadius = 25;
+            this.style = "solid";
+            this.holes = [defaultPos];
+
+            this.redraw();
+            this.syncHolesToDieline();
+            return true;
+          },
+        },
+        {
+          command: "addHole",
+          title: "Add Hole",
+          handler: (x: number, y: number) => {
+            if (!this.holes) this.holes = [];
+            this.holes.push({ x, y });
+            this.redraw();
+            this.syncHolesToDieline();
+            return true;
+          },
+        },
+        {
+          command: "clearHoles",
+          title: "Clear Holes",
+          handler: () => {
+            this.holes = [];
+            this.redraw();
+            this.syncHolesToDieline();
+            return true;
+          },
+        },
+      ] as CommandContribution[],
+    };
+  }
+
+  private setup() {
+    if (!this.canvasService || !this.context) return;
+    const canvas = this.canvasService.canvas;
+
+    // 1. Listen for Dieline Geometry Changes
+    if (!this.handleDielineChange) {
+      this.handleDielineChange = (geometry: DielineGeometry) => {
+        this.currentGeometry = geometry;
+        const changed = this.enforceConstraints();
+        // Only sync if constraints actually moved something
+        if (changed) {
+          this.syncHolesToDieline();
+        }
+      };
+      this.context.eventBus.on(
+        "dieline:geometry:change",
+        this.handleDielineChange,
+      );
+    }
+
+    // 2. Initial Fetch of Geometry
+    // Assuming DielineTool registered 'getGeometry' command which is now available via CommandService
+    // Since we don't have direct access to CommandService here (it was in activate),
+    // we can get it from context.services
+    const commandService = this.context.services.get<any>("CommandService");
+    if (commandService) {
+      try {
+        const geometry = commandService.executeCommand("getGeometry");
+        if (geometry) {
+          // If executeCommand returns a promise, await it?
+          // CommandService.executeCommand is async in previous definition.
+          // But here we are in sync setup.
+          // Let's assume we can handle the promise if needed, or if it returns value directly (if not async).
+          // Checking CommandService implementation: executeCommand IS async.
+          Promise.resolve(geometry).then((g) => {
+            if (g) {
+              this.currentGeometry = g as DielineGeometry;
+              // Re-run setup logic dependent on geometry
+              this.enforceConstraints();
+              this.initializeHoles();
+            }
+          });
+        }
+      } catch (e) {
+        // Command might not be ready
+      }
+    }
+
+    // 3. Setup Canvas Interaction
+    if (!this.handleMoving) {
+      this.handleMoving = (e: any) => {
+        const target = e.target;
+        if (!target || target.data?.type !== "hole-marker") return;
+
+        if (!this.currentGeometry) return;
+
+        // Calculate effective geometry based on constraint target
+        const effectiveOffset =
+          this.constraintTarget === "original"
+            ? 0
+            : this.currentGeometry.offset;
+        const constraintGeometry = {
+          ...this.currentGeometry,
+          width: Math.max(0, this.currentGeometry.width + effectiveOffset * 2),
+          height: Math.max(
+            0,
+            this.currentGeometry.height + effectiveOffset * 2,
+          ),
+          radius: Math.max(0, this.currentGeometry.radius + effectiveOffset),
+        };
+
+        const p = new Point(target.left, target.top);
+        const newPos = this.calculateConstrainedPosition(p, constraintGeometry);
+
+        target.set({
+          left: newPos.x,
+          top: newPos.y,
+        });
+      };
+      canvas.on("object:moving", this.handleMoving);
+    }
+
+    if (!this.handleModified) {
+      this.handleModified = (e: any) => {
+        const target = e.target;
+        if (!target || target.data?.type !== "hole-marker") return;
+
+        // Update state when hole is moved
+        this.syncHolesFromCanvas();
+      };
+      canvas.on("object:modified", this.handleModified);
+    }
+
+    this.initializeHoles();
+  }
+
+  private initializeHoles() {
+    if (!this.canvasService) return;
+    // Default hole if none exist
+    if (!this.holes || this.holes.length === 0) {
+      let defaultPos = { x: this.canvasService.canvas.width! / 2, y: 50 };
+
+      if (this.currentGeometry) {
+        const g = this.currentGeometry;
+        // Default to Top-Center of Dieline shape
+        const topCenter = { x: g.x, y: g.y - g.height / 2 };
+        // Snap to exact shape edge
+        const snapped = getNearestPointOnDieline(topCenter, {
+          ...g,
+          holes: [],
+        } as any);
+        defaultPos = snapped;
+      }
+
+      this.holes = [defaultPos];
+    }
+
+    this.redraw();
+    this.syncHolesToDieline();
+  }
+
+  private teardown() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
+
+    if (this.handleMoving) {
+      canvas.off("object:moving", this.handleMoving);
+      this.handleMoving = null;
+    }
+    if (this.handleModified) {
+      canvas.off("object:modified", this.handleModified);
+      this.handleModified = null;
+    }
+    if (this.handleDielineChange && this.context) {
+      this.context.eventBus.off(
+        "dieline:geometry:change",
+        this.handleDielineChange,
+      );
+      this.handleDielineChange = null;
+    }
+
+    const objects = canvas
+      .getObjects()
+      .filter((obj: any) => obj.data?.type === "hole-marker");
+    objects.forEach((obj) => canvas.remove(obj));
+
+    // Clear holes from Dieline (visual only, state preserved in HoleTool options)
+    if (this.context) {
+      const commandService = this.context.services.get<any>("CommandService");
+      if (commandService) {
+        try {
+          commandService.executeCommand("setHoles", []);
+        } catch (e) {}
+      }
+    }
+
+    this.canvasService.requestRenderAll();
+  }
+
+  private syncHolesFromCanvas() {
+    if (!this.canvasService) return;
+    const objects = this.canvasService.canvas
+      .getObjects()
+      .filter((obj: any) => obj.data?.type === "hole-marker");
+
+    const holes = objects.map((obj) => ({ x: obj.left!, y: obj.top! }));
+    this.holes = holes;
+
+    this.syncHolesToDieline();
+  }
+
+  private 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>(
+      "ConfigurationService",
+    );
+
+    if (configService) {
+      this.isUpdatingConfig = true;
+      try {
+        // Update dieline.holes (Normalized coordinates)
+        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);
+      } finally {
+        this.isUpdatingConfig = false;
+      }
+    }
+  }
+
+  private redraw() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
+
+    // Remove existing holes
+    const existing = canvas
+      .getObjects()
+      .filter((obj: any) => obj.data?.type === "hole-marker");
+    existing.forEach((obj) => canvas.remove(obj));
+
+    const { innerRadius, outerRadius, style, holes } = this;
+
+    if (!holes || holes.length === 0) {
+      this.canvasService.requestRenderAll();
+      return;
+    }
+
+    holes.forEach((hole, index) => {
+      const innerCircle = new Circle({
+        radius: innerRadius,
+        fill: "transparent",
+        stroke: "red",
+        strokeWidth: 2,
+        originX: "center",
+        originY: "center",
+      });
+
+      const outerCircle = new Circle({
+        radius: outerRadius,
+        fill: "transparent",
+        stroke: "#666",
+        strokeWidth: 1,
+        strokeDashArray: style === "dashed" ? [5, 5] : undefined,
+        originX: "center",
+        originY: "center",
+      });
+
+      const holeGroup = new Group([outerCircle, innerCircle], {
+        left: hole.x,
+        top: hole.y,
+        originX: "center",
+        originY: "center",
+        selectable: true,
+        hasControls: false, // Don't allow resizing/rotating
+        hasBorders: false,
+        subTargetCheck: false,
+        opacity: 0, // Default hidden
+        hoverCursor: "move",
+        data: { type: "hole-marker", index },
+      } as any);
+      (holeGroup as any).name = "hole-marker";
+
+      // Auto-show/hide logic
+      holeGroup.on("mouseover", () => {
+        holeGroup.set("opacity", 1);
+        canvas.requestRenderAll();
+      });
+      holeGroup.on("mouseout", () => {
+        if (canvas.getActiveObject() !== holeGroup) {
+          holeGroup.set("opacity", 0);
+          canvas.requestRenderAll();
+        }
+      });
+      holeGroup.on("selected", () => {
+        holeGroup.set("opacity", 1);
+        canvas.requestRenderAll();
+      });
+      holeGroup.on("deselected", () => {
+        holeGroup.set("opacity", 0);
+        canvas.requestRenderAll();
+      });
+
+      canvas.add(holeGroup);
+      
+      // Ensure hole markers are always on top of Dieline layer
+      // Dieline layer uses bringObjectToFront, so we must be aggressive
+      // But we can't control when Dieline updates.
+      // Ideally, HoleTool should use a dedicated overlay layer above Dieline.
+      // For now, let's just bring to front.
+      canvas.bringObjectToFront(holeGroup);
+    });
+
+    // Also bring all existing markers to front to be safe
+    const markers = canvas.getObjects().filter((o: any) => o.data?.type === "hole-marker");
+    markers.forEach(m => canvas.bringObjectToFront(m));
+
+    this.canvasService.requestRenderAll();
+  }
+
+  public enforceConstraints(): boolean {
+    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;
+    const constraintGeometry = {
+      ...geometry,
+      width: Math.max(0, geometry.width + effectiveOffset * 2),
+      height: Math.max(0, geometry.height + effectiveOffset * 2),
+      radius: Math.max(0, geometry.radius + effectiveOffset),
+    };
+
+    // Get all hole markers
+    const objects = this.canvasService.canvas
+      .getObjects()
+      .filter((obj: any) => obj.data?.type === "hole-marker");
+
+    console.log(
+      `[HoleTool] Enforcing constraints on ${objects.length} markers`,
+    );
+
+    let changed = false;
+    // Sort objects by index to maintain order in options.holes
+    objects.sort(
+      (a: any, b: any) => (a.data?.index ?? 0) - (b.data?.index ?? 0),
+    );
+
+    const newHoles: { x: number; y: number }[] = [];
+
+    objects.forEach((obj: any) => {
+      const currentPos = new Point(obj.left, obj.top);
+      const newPos = this.calculateConstrainedPosition(
+        currentPos,
+        constraintGeometry,
+      );
+
+      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,
+        });
+        obj.setCoords();
+        changed = true;
+      }
+      newHoles.push({ x: obj.left, y: obj.top });
+    });
+
+    if (changed) {
+      this.holes = newHoles;
+      this.canvasService.requestRenderAll();
+      // We return true instead of syncing directly to avoid recursion
+      return true;
+    }
+    return false;
+  }
+
+  private calculateConstrainedPosition(p: Point, g: DielineGeometry): Point {
+    // Use Paper.js to get accurate nearest point
+    // This handles ellipses, rects, and rounded rects correctly
+
+    // Convert to holes format for geometry options
+    const options = {
+      ...g,
+      holes: [], // We don't need holes for boundary calculation
+    };
+
+    const nearest = getNearestPointOnDieline(
+      { x: p.x, y: p.y },
+      options as any,
+    );
+
+    // Now constrain distance
+    const nearestP = new Point(nearest.x, nearest.y);
+    const dist = p.distanceFrom(nearestP);
+
+    // Vector from nearest to current point
+    const v = p.subtract(nearestP);
+
+    // Vector from center to nearest point (approximate normal for convex shapes)
+    const center = new Point(g.x, g.y);
+    const centerToNearest = nearestP.subtract(center);
+
+    const distToCenter = p.distanceFrom(center);
+    const nearestDistToCenter = nearestP.distanceFrom(center);
+
+    let signedDist = dist;
+    if (distToCenter < nearestDistToCenter) {
+      signedDist = -dist; // Inside
+    }
+
+    // Clamp distance
+    let clampedDist = signedDist;
+    if (signedDist > 0) {
+      clampedDist = Math.min(signedDist, this.innerRadius);
+    } else {
+      clampedDist = Math.max(signedDist, -this.outerRadius);
+    }
+
+    // Reconstruct point
+    if (dist < 0.001) return nearestP;
+
+    // We want the result to lie on the line connecting Nearest -> P
+    const scale = Math.abs(clampedDist) / (dist || 1);
+    const offset = v.scalarMultiply(scale);
+
+    return nearestP.add(offset);
+  }
+}