@pooder/kit 2.0.0 → 3.0.0

package/src/dieline.ts

@@ -1,133 +1,386 @@
 import {
-  Command,
-  Editor,
-  EditorState,
   Extension,
-  OptionSchema,
-  Rect,
-  Circle,
-  Ellipse,
-  Path,
-  PooderLayer,
-  Pattern,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationContribution,
 } from "@pooder/core";
+import { Path, Pattern } from "fabric";
+import CanvasService from "./CanvasService";
+import { ImageTracer } from "./tracer";
+import { Coordinate } from "./coordinate";
 import {
   generateDielinePath,
   generateMaskPath,
   generateBleedZonePath,
+  getPathBounds,
   HoleData,
 } from "./geometry";
 
-export interface DielineToolOptions {
-  shape: "rect" | "circle" | "ellipse";
-  width: number;
-  height: number;
-  radius: number; // corner radius for rect
-  position?: { x: number; y: number };
-  borderLength?: number;
-  offset: number;
-  style: "solid" | "dashed";
-  insideColor: string;
-  outsideColor: string;
-  showBleedLines?: boolean;
-}
-
-// Alias for compatibility if needed, or just use DielineToolOptions
-export type DielineConfig = DielineToolOptions;
-
 export interface DielineGeometry {
-  shape: "rect" | "circle" | "ellipse";
+  shape: "rect" | "circle" | "ellipse" | "custom";
   x: number;
   y: number;
   width: number;
   height: number;
   radius: number;
+  offset: number;
+  borderLength?: number;
+  pathData?: string;
 }
 
-export class DielineTool implements Extension<DielineToolOptions> {
-  public name = "DielineTool";
-  public options: DielineToolOptions = {
-    shape: "rect",
-    width: 300,
-    height: 300,
-    radius: 0,
-    offset: 0,
-    style: "solid",
-    insideColor: "rgba(0,0,0,0)",
-    outsideColor: "#ffffff",
-    showBleedLines: true,
-  };
-
-  public schema: Record<keyof DielineToolOptions, OptionSchema> = {
-    shape: {
-      type: "select",
-      options: ["rect", "circle", "ellipse"],
-      label: "Shape",
-    },
-    width: { type: "number", min: 10, max: 2000, label: "Width" },
-    height: { type: "number", min: 10, max: 2000, label: "Height" },
-    radius: { type: "number", min: 0, max: 500, label: "Corner Radius" },
-    position: { type: "string", label: "Position" }, // Complex object, simplified for now or need custom handler
-    borderLength: { type: "number", min: 0, max: 500, label: "Margin" },
-    offset: { type: "number", min: -100, max: 100, label: "Bleed Offset" },
-    showBleedLines: { type: "boolean", label: "Show Bleed Lines" },
-    style: {
-      type: "select",
-      options: ["solid", "dashed"],
-      label: "Line Style",
-    },
-    insideColor: { type: "color", label: "Inside Color" },
-    outsideColor: { type: "color", label: "Outside Color" },
+export class DielineTool implements Extension {
+  id = "pooder.kit.dieline";
+  public metadata = {
+    name: "DielineTool",
   };
 
-  onMount(editor: Editor) {
-    this.createLayer(editor);
-    this.updateDieline(editor);
+  private shape: "rect" | "circle" | "ellipse" | "custom" = "rect";
+  private width: number = 500;
+  private height: number = 500;
+  private radius: number = 0;
+  private offset: number = 0;
+  private style: "solid" | "dashed" = "solid";
+  private insideColor: string = "rgba(0,0,0,0)";
+  private outsideColor: string = "#ffffff";
+  private showBleedLines: boolean = true;
+  private holes: HoleData[] = [];
+  // Position is stored as normalized coordinates (0-1)
+  private position?: { x: number; y: number };
+  private borderLength?: number;
+  private pathData?: string;
+
+  private canvasService?: CanvasService;
+  private context?: ExtensionContext;
+
+  constructor(
+    options?: Partial<{
+      shape: "rect" | "circle" | "ellipse" | "custom";
+      width: number;
+      height: number;
+      radius: number;
+      // Position is normalized (0-1)
+      position: { x: number; y: number };
+      borderLength: number;
+      offset: number;
+      style: "solid" | "dashed";
+      insideColor: string;
+      outsideColor: string;
+      showBleedLines: boolean;
+      holes: HoleData[];
+      pathData: string;
+    }>,
+  ) {
+    if (options) {
+      Object.assign(this, options);
+    }
   }
 
-  onUnmount(editor: Editor) {
-    this.destroyLayer(editor);
+  activate(context: ExtensionContext) {
+    this.context = context;
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for DielineTool");
+      return;
+    }
+
+    const configService = context.services.get<any>("ConfigurationService");
+    if (configService) {
+      // Load initial config
+      this.shape = configService.get("dieline.shape", this.shape);
+      this.width = configService.get("dieline.width", this.width);
+      this.height = configService.get("dieline.height", this.height);
+      this.radius = configService.get("dieline.radius", this.radius);
+      this.borderLength = configService.get(
+        "dieline.borderLength",
+        this.borderLength,
+      );
+      this.offset = configService.get("dieline.offset", this.offset);
+      this.style = configService.get("dieline.style", this.style);
+      this.insideColor = configService.get(
+        "dieline.insideColor",
+        this.insideColor,
+      );
+      this.outsideColor = configService.get(
+        "dieline.outsideColor",
+        this.outsideColor,
+      );
+      this.showBleedLines = configService.get(
+        "dieline.showBleedLines",
+        this.showBleedLines,
+      );
+      this.holes = configService.get("dieline.holes", this.holes);
+      this.pathData = configService.get("dieline.pathData", this.pathData);
+
+      // Listen for changes
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (e.key.startsWith("dieline.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[DielineTool] Config change detected: ${e.key} -> ${e.value}`,
+          );
+          if (prop && prop in this) {
+            (this as any)[prop] = e.value;
+            this.updateDieline();
+          }
+        }
+      });
+    }
+
+    this.createLayer();
+    this.updateDieline();
   }
 
-  onUpdate(editor: Editor, state: EditorState) {
-    this.updateDieline(editor);
+  deactivate(context: ExtensionContext) {
+    this.destroyLayer();
+    this.canvasService = undefined;
+    this.context = undefined;
   }
 
-  onDestroy(editor: Editor) {
-    this.destroyLayer(editor);
+  contribute() {
+    return {
+      [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "dieline.shape",
+          type: "select",
+          label: "Shape",
+          options: ["rect", "circle", "ellipse", "custom"],
+          default: this.shape,
+        },
+        {
+          id: "dieline.width",
+          type: "number",
+          label: "Width",
+          min: 10,
+          max: 2000,
+          default: this.width,
+        },
+        {
+          id: "dieline.height",
+          type: "number",
+          label: "Height",
+          min: 10,
+          max: 2000,
+          default: this.height,
+        },
+        {
+          id: "dieline.radius",
+          type: "number",
+          label: "Corner Radius",
+          min: 0,
+          max: 500,
+          default: this.radius,
+        },
+        {
+          id: "dieline.position",
+          type: "json",
+          label: "Position (Normalized)",
+          default: this.position,
+        },
+        {
+          id: "dieline.borderLength",
+          type: "number",
+          label: "Margin",
+          min: 0,
+          max: 500,
+          default: this.borderLength,
+        },
+        {
+          id: "dieline.offset",
+          type: "number",
+          label: "Bleed Offset",
+          min: -100,
+          max: 100,
+          default: this.offset,
+        },
+        {
+          id: "dieline.showBleedLines",
+          type: "boolean",
+          label: "Show Bleed Lines",
+          default: this.showBleedLines,
+        },
+        {
+          id: "dieline.style",
+          type: "select",
+          label: "Line Style",
+          options: ["solid", "dashed"],
+          default: this.style,
+        },
+        {
+          id: "dieline.insideColor",
+          type: "color",
+          label: "Inside Color",
+          default: this.insideColor,
+        },
+        {
+          id: "dieline.outsideColor",
+          type: "color",
+          label: "Outside Color",
+          default: this.outsideColor,
+        },
+        {
+          id: "dieline.holes",
+          type: "json",
+          label: "Holes",
+          default: this.holes,
+        },
+      ] as ConfigurationContribution[],
+      [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 = undefined;
+            this.updateDieline();
+            return true;
+          },
+        },
+        {
+          command: "setDimensions",
+          title: "Set Dimensions",
+          handler: (width: number, height: number) => {
+            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: "rect" | "circle" | "ellipse" | "custom") => {
+            if (this.shape === shape) return true;
+            this.shape = shape;
+            this.updateDieline();
+            return true;
+          },
+        },
+        {
+          command: "setBleed",
+          title: "Set Bleed",
+          handler: (bleed: number) => {
+            if (this.offset === bleed) return true;
+            this.offset = bleed;
+            this.updateDieline();
+            return true;
+          },
+        },
+        {
+          command: "setHoles",
+          title: "Set Holes",
+          handler: (holes: HoleData[]) => {
+            this.holes = holes;
+            this.updateDieline(false);
+            return true;
+          },
+        },
+        {
+          command: "getGeometry",
+          title: "Get Geometry",
+          handler: () => {
+            return this.getGeometry();
+          },
+        },
+        {
+          command: "exportCutImage",
+          title: "Export Cut Image",
+          handler: () => {
+            return this.exportCutImage();
+          },
+        },
+        {
+          command: "detectEdge",
+          title: "Detect Edge from Image",
+          handler: async (imageUrl: string, options?: any) => {
+            try {
+              // Pass current dimensions if we want to scale immediately?
+              // But wait, the user said "It should be scaled according to width and height".
+              // If the user already set width/height on the tool, we should respect it?
+              // Or should we set width/height based on the image aspect ratio?
+              // Usually for a new trace, we might want to respect the IMAGE aspect ratio but fit into current width/height?
+              // Or just replace width/height with image dimensions?
+              // Let's assume we want to keep the current "box" size but fit the shape inside?
+              // Or if options has width/height use that.
+
+              // Let's first trace to get the natural shape (and its aspect ratio)
+              // Then we can decide how to update this.width/this.height.
+
+              const pathData = await ImageTracer.trace(imageUrl, options);
+
+              // We need to set width/height from the path bounds to avoid distortion
+              const bounds = getPathBounds(pathData);
+
+              // If we want to scale the path to specific dimensions, we can do it via ImageTracer options.scaleToWidth/Height
+              // But here we got the raw path.
+              // Let's update the TOOL's dimensions to match the detected shape's aspect ratio,
+              // while keeping the size reasonable (e.g. max dimension 300 or current size).
+
+              // If current tool size is default 300x300, we might want to resize tool to match image ratio.
+              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();
+              return pathData;
+            } catch (e) {
+              console.error("Edge detection failed", e);
+              throw e;
+            }
+          },
+        },
+      ] as CommandContribution[],
+    };
   }
 
-  private getLayer(editor: Editor, id: string) {
-    return editor.canvas
-      .getObjects()
-      .find((obj: any) => obj.data?.id === id) as PooderLayer | undefined;
+  private getLayer() {
+    return this.canvasService?.getLayer("dieline-overlay");
   }
 
-  private createLayer(editor: Editor) {
-    let layer = this.getLayer(editor, "dieline-overlay");
+  private createLayer() {
+    if (!this.canvasService) return;
+    const width = this.canvasService.canvas.width || 800;
+    const height = this.canvasService.canvas.height || 600;
 
-    if (!layer) {
-      const width = editor.canvas.width || 800;
-      const height = editor.canvas.height || 600;
+    const layer = this.canvasService.createLayer("dieline-overlay", {
+      width,
+      height,
+      selectable: false,
+      evented: false,
+    });
 
-      layer = new PooderLayer([], {
-        width,
-        height,
-        selectable: false,
-        evented: false,
-        data: { id: "dieline-overlay" },
-      } as any);
+    this.canvasService.canvas.bringObjectToFront(layer);
 
-      editor.canvas.add(layer);
+    // Ensure above user layer
+    const userLayer = this.canvasService.getLayer("user");
+    if (userLayer) {
+      const userIndex = this.canvasService.canvas
+        .getObjects()
+        .indexOf(userLayer);
+      this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
     }
-
-    editor.canvas.bringObjectToFront(layer);
   }
 
-  private destroyLayer(editor: Editor) {
-    const layer = this.getLayer(editor, "dieline-overlay");
+  private destroyLayer() {
+    if (!this.canvasService) return;
+    const layer = this.getLayer();
     if (layer) {
-      editor.canvas.remove(layer);
+      this.canvasService.canvas.remove(layer);
     }
   }
 
@@ -156,7 +409,11 @@ export class DielineTool implements Extension<DielineToolOptions> {
     return new Pattern({ source: canvas, repetition: "repeat" });
   }
 
-  public updateDieline(editor: Editor) {
+  public updateDieline(emitEvent: boolean = true) {
+    if (!this.canvasService) return;
+    const layer = this.getLayer();
+    if (!layer) return;
+
     const {
       shape,
       radius,
@@ -167,11 +424,12 @@ export class DielineTool implements Extension<DielineToolOptions> {
       position,
       borderLength,
       showBleedLines,
-    } = this.options;
-    let { width, height } = this.options;
+      holes,
+    } = this;
+    let { width, height } = this;
 
-    const canvasW = editor.canvas.width || 800;
-    const canvasH = editor.canvas.height || 600;
+    const canvasW = this.canvasService.canvas.width || 800;
+    const canvasH = this.canvasService.canvas.height || 600;
 
     // Handle borderLength (Margin)
     if (borderLength && borderLength > 0) {
@@ -180,32 +438,26 @@ export class DielineTool implements Extension<DielineToolOptions> {
     }
 
     // Handle Position
-    const cx = position?.x ?? canvasW / 2;
-    const cy = position?.y ?? canvasH / 2;
-
-    const layer = this.getLayer(editor, "dieline-overlay");
-    if (!layer) return;
+    // this.position is normalized (0-1). Default to center (0.5, 0.5).
+    const normalizedPos = position ?? { x: 0.5, y: 0.5 };
+    const cx = Coordinate.toAbsolute(normalizedPos.x, canvasW);
+    const cy = Coordinate.toAbsolute(normalizedPos.y, canvasH);
 
     // Clear existing objects
     layer.remove(...layer.getObjects());
 
-    // Get Hole Tool and Enforce Constraints
-    const holeTool = editor.getExtension("HoleTool") as any;
-    if (holeTool && typeof holeTool.enforceConstraints === "function") {
-      holeTool.enforceConstraints(editor);
-    }
-
-    // Get Hole Data
-    const holes = holeTool ? holeTool.options.holes || [] : [];
-    const innerRadius = holeTool ? holeTool.options.innerRadius || 15 : 15;
-    const outerRadius = holeTool ? holeTool.options.outerRadius || 25 : 25;
-
-    const holeData: HoleData[] = holes.map((h: any) => ({
-      x: h.x,
-      y: h.y,
-      innerRadius,
-      outerRadius,
-    }));
+    // Denormalize Holes for Geometry Generation
+    const absoluteHoles = (holes || []).map((h) => {
+      const p = Coordinate.denormalizePoint(
+        { x: h.x, y: h.y },
+        { width: canvasW, height: canvasH },
+      );
+      return {
+        ...h,
+        x: p.x,
+        y: p.y,
+      };
+    });
 
     // 1. Draw Mask (Outside)
     const cutW = Math.max(0, width + offset * 2);
@@ -222,7 +474,8 @@ export class DielineTool implements Extension<DielineToolOptions> {
       radius: cutR,
       x: cx,
       y: cy,
-      holes: holeData,
+      holes: absoluteHoles,
+      pathData: this.pathData,
     });
 
     const mask = new Path(maskPathData, {
@@ -237,12 +490,7 @@ export class DielineTool implements Extension<DielineToolOptions> {
     });
     layer.add(mask);
 
-    // 2. Draw Inside Fill (Dieline Shape itself, merged with holes if needed, or just the shape?)
-    // The user wants "fusion effect" so holes should be part of the dieline visually.
-    // If insideColor is transparent, it doesn't matter much.
-    // If insideColor is opaque, we need to punch holes in it too.
-    // Let's use Paper.js for this too if insideColor is not transparent.
-
+    // 2. Draw Inside Fill (Dieline Shape itself, merged with holes if needed)
     if (
       insideColor &&
       insideColor !== "transparent" &&
@@ -256,7 +504,8 @@ export class DielineTool implements Extension<DielineToolOptions> {
         radius: cutR,
         x: cx,
         y: cy,
-        holes: holeData,
+        holes: absoluteHoles,
+        pathData: this.pathData,
       });
 
       const insideObj = new Path(productPathData, {
@@ -280,7 +529,8 @@ export class DielineTool implements Extension<DielineToolOptions> {
           radius,
           x: cx,
           y: cy,
-          holes: holeData,
+          holes: absoluteHoles,
+          pathData: this.pathData,
         },
         offset,
       );
@@ -310,7 +560,8 @@ export class DielineTool implements Extension<DielineToolOptions> {
         radius: cutR,
         x: cx,
         y: cy,
-        holes: holeData,
+        holes: absoluteHoles,
+        pathData: this.pathData,
       });
 
       const offsetBorderObj = new Path(offsetPathData, {
@@ -328,8 +579,8 @@ export class DielineTool implements Extension<DielineToolOptions> {
 
     // 4. Draw Dieline (Visual Border)
     // This should outline the product shape AND the holes.
-    // Paper.js `generateDielinePath` returns exactly this (Dieline - Holes).
-
+    // NOTE: We need to use absoluteHoles (denormalized) here, NOT holes (normalized 0-1)
+    // generateDielinePath expects holes to be in absolute coordinates (matching width/height scale)
     const borderPathData = generateDielinePath({
       shape,
       width: width,
@@ -337,7 +588,8 @@ export class DielineTool implements Extension<DielineToolOptions> {
       radius: radius,
       x: cx,
       y: cy,
-      holes: holeData,
+      holes: absoluteHoles, // FIX: Use absoluteHoles instead of holes
+      pathData: this.pathData,
     });
 
     const borderObj = new Path(borderPathData, {
@@ -353,209 +605,46 @@ export class DielineTool implements Extension<DielineToolOptions> {
 
     layer.add(borderObj);
 
-    editor.canvas.requestRenderAll();
-  }
+    // Enforce z-index: Dieline > User
+    const userLayer = this.canvasService.getLayer("user");
+    if (layer && userLayer) {
+      const layerIndex = this.canvasService.canvas.getObjects().indexOf(layer);
+      const userIndex = this.canvasService.canvas
+        .getObjects()
+        .indexOf(userLayer);
+      if (layerIndex < userIndex) {
+        this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
+      }
+    } else {
+      // If no user layer, just bring to front (safe default)
+      this.canvasService.canvas.bringObjectToFront(layer);
+    }
 
-  commands: Record<string, Command> = {
-    reset: {
-      execute: (editor: Editor) => {
-        this.options = {
-          shape: "rect",
-          width: 300,
-          height: 300,
-          radius: 0,
-          offset: 0,
-          style: "solid",
-          insideColor: "rgba(0,0,0,0)",
-          outsideColor: "#ffffff",
-          showBleedLines: true,
-        };
-        this.updateDieline(editor);
-        return true;
-      },
-    },
-    destroy: {
-      execute: (editor: Editor) => {
-        this.destroyLayer(editor);
-        return true;
-      },
-    },
-    setDimensions: {
-      execute: (editor: Editor, width: number, height: number) => {
-        if (this.options.width === width && this.options.height === height)
-          return true;
-        this.options.width = width;
-        this.options.height = height;
-        this.updateDieline(editor);
-        return true;
-      },
-      schema: {
-        width: {
-          type: "number",
-          label: "Width",
-          min: 10,
-          max: 2000,
-          required: true,
-        },
-        height: {
-          type: "number",
-          label: "Height",
-          min: 10,
-          max: 2000,
-          required: true,
-        },
-      },
-    },
-    setShape: {
-      execute: (editor: Editor, shape: "rect" | "circle" | "ellipse") => {
-        if (this.options.shape === shape) return true;
-        this.options.shape = shape;
-        this.updateDieline(editor);
-        return true;
-      },
-      schema: {
-        shape: {
-          type: "string",
-          label: "Shape",
-          options: ["rect", "circle", "ellipse"],
-          required: true,
-        },
-      },
-    },
-    setBleed: {
-      execute: (editor: Editor, bleed: number) => {
-        if (this.options.offset === bleed) return true;
-        this.options.offset = bleed;
-        this.updateDieline(editor);
-        return true;
-      },
-      schema: {
-        bleed: {
-          type: "number",
-          label: "Bleed",
-          min: -100,
-          max: 100,
-          required: true,
-        },
-      },
-    },
-    exportCutImage: {
-      execute: (editor: Editor) => {
-        // 1. Generate Path Data
-        const { shape, width, height, radius, position } = this.options;
-        const canvasW = editor.canvas.width || 800;
-        const canvasH = editor.canvas.height || 600;
-        const cx = position?.x ?? canvasW / 2;
-        const cy = position?.y ?? canvasH / 2;
-
-        const holeTool = editor.getExtension("HoleTool") as any;
-        const holes = holeTool ? holeTool.options.holes || [] : [];
-        const innerRadius = holeTool ? holeTool.options.innerRadius || 15 : 15;
-        const outerRadius = holeTool ? holeTool.options.outerRadius || 25 : 25;
-        const holeData = holes.map((h: any) => ({
-          x: h.x,
-          y: h.y,
-          innerRadius,
-          outerRadius,
-        }));
-
-        const pathData = generateDielinePath({
-          shape,
-          width,
-          height,
-          radius,
-          x: cx,
-          y: cy,
-          holes: holeData,
-        });
-
-        // 2. Create Clip Path
-        // @ts-ignore
-        const clipPath = new Path(pathData, {
-          left: 0,
-          top: 0,
-          originX: "left",
-          originY: "top",
-          absolutePositioned: true,
-        });
-
-        // 3. Hide UI Layers
-        const layer = this.getLayer(editor, "dieline-overlay");
-        const wasVisible = layer?.visible ?? true;
-        if (layer) layer.visible = false;
-
-        // Hide hole markers
-        const holeMarkers = editor.canvas
-          .getObjects()
-          .filter((o: any) => o.data?.type === "hole-marker");
-        holeMarkers.forEach((o) => (o.visible = false));
-
-        // Hide Ruler Overlay
-        const rulerLayer = editor.canvas
-          .getObjects()
-          .find((obj: any) => obj.data?.id === "ruler-overlay");
-        const rulerWasVisible = rulerLayer?.visible ?? true;
-        if (rulerLayer) rulerLayer.visible = false;
-
-        // 4. Apply Clip & Export
-        const originalClip = editor.canvas.clipPath;
-        editor.canvas.clipPath = clipPath;
-
-        const bbox = clipPath.getBoundingRect();
-        // Adjust hole coordinates to be relative to the bounding box
-        const holeDataRelative = holes.map((h: any) => ({
-          x: h.x - bbox.left,
-          y: h.y - bbox.top,
-          innerRadius,
-          outerRadius,
-        }));
-
-        const clipPathCorrected = new Path(pathData, {
-          absolutePositioned: true,
-          left: 0,
-          top: 0,
-        });
-
-        const tempPath = new Path(pathData);
-        const tempBounds = tempPath.getBoundingRect();
-
-        clipPathCorrected.set({
-          left: tempBounds.left,
-          top: tempBounds.top,
-          originX: "left",
-          originY: "top",
-        });
-
-        // 4. Apply Clip & Export
-        editor.canvas.clipPath = clipPathCorrected;
-
-        const exportBbox = clipPathCorrected.getBoundingRect();
-        const dataURL = editor.canvas.toDataURL({
-          format: "png",
-          multiplier: 2,
-          left: exportBbox.left,
-          top: exportBbox.top,
-          width: exportBbox.width,
-          height: exportBbox.height,
-        });
-
-        // 5. Restore
-        editor.canvas.clipPath = originalClip;
-        if (layer) layer.visible = wasVisible;
-        if (rulerLayer) rulerLayer.visible = rulerWasVisible;
-        holeMarkers.forEach((o) => (o.visible = true));
-        editor.canvas.requestRenderAll();
-
-        return dataURL;
-      },
-    },
-  };
+    // Ensure Ruler is above Dieline if it exists
+    const rulerLayer = this.canvasService.getLayer("ruler-overlay");
+    if (rulerLayer) {
+      this.canvasService.canvas.bringObjectToFront(rulerLayer);
+    }
 
-  public getGeometry(editor: Editor): DielineGeometry | null {
-    const { shape, width, height, radius, position, borderLength } =
-      this.options;
-    const canvasW = editor.canvas.width || 800;
-    const canvasH = editor.canvas.height || 600;
+    layer.dirty = true;
+    this.canvasService.requestRenderAll();
+
+    // Emit change event so other tools (like HoleTool) can react
+    // Only emit if requested (to avoid loops when updating non-geometry props like holes)
+    if (emitEvent && this.context) {
+      const geometry = this.getGeometry();
+      if (geometry) {
+        this.context.eventBus.emit("dieline:geometry:change", geometry);
+      }
+    }
+  }
+
+  public getGeometry(): DielineGeometry | null {
+    if (!this.canvasService) return null;
+    const { shape, width, height, radius, position, borderLength, offset } =
+      this;
+    const canvasW = this.canvasService.canvas.width || 800;
+    const canvasH = this.canvasService.canvas.height || 600;
 
     let visualWidth = width;
     let visualHeight = height;
@@ -565,8 +654,8 @@ export class DielineTool implements Extension<DielineToolOptions> {
       visualHeight = Math.max(0, canvasH - borderLength * 2);
     }
 
-    const cx = position?.x ?? canvasW / 2;
-    const cy = position?.y ?? canvasH / 2;
+    const cx = Coordinate.toAbsolute(position?.x ?? 0.5, canvasW);
+    const cy = Coordinate.toAbsolute(position?.y ?? 0.5, canvasH);
 
     return {
       shape,
@@ -575,6 +664,117 @@ export class DielineTool implements Extension<DielineToolOptions> {
       width: visualWidth,
       height: visualHeight,
       radius,
+      offset,
+      borderLength,
+      pathData: this.pathData,
     };
   }
+
+  public exportCutImage() {
+    if (!this.canvasService) return null;
+    const canvas = this.canvasService.canvas;
+
+    // 1. Generate Path Data
+    const { shape, width, height, radius, position, holes } = this;
+    const canvasW = canvas.width || 800;
+    const canvasH = canvas.height || 600;
+    const cx = Coordinate.toAbsolute(position?.x ?? 0.5, canvasW);
+    const cy = Coordinate.toAbsolute(position?.y ?? 0.5, canvasH);
+
+    // Denormalize Holes for Export
+    const absoluteHoles = (holes || []).map((h) => {
+      const p = Coordinate.denormalizePoint(
+        { x: h.x, y: h.y },
+        { width: canvasW, height: canvasH },
+      );
+      return {
+        ...h,
+        x: p.x,
+        y: p.y,
+      };
+    });
+
+    const pathData = generateDielinePath({
+      shape,
+      width,
+      height,
+      radius,
+      x: cx,
+      y: cy,
+      holes: absoluteHoles,
+      pathData: this.pathData,
+    });
+
+    // 2. Create Clip Path
+    // @ts-ignore
+    const clipPath = new Path(pathData, {
+      left: 0,
+      top: 0,
+      originX: "left",
+      originY: "top",
+      absolutePositioned: true,
+    });
+
+    // 3. Hide UI Layers
+    const layer = this.getLayer();
+    const wasVisible = layer?.visible ?? true;
+    if (layer) layer.visible = false;
+
+    // Hide hole markers
+    const holeMarkers = canvas
+      .getObjects()
+      .filter((o: any) => o.data?.type === "hole-marker");
+    holeMarkers.forEach((o) => (o.visible = false));
+
+    // Hide Ruler Overlay
+    const rulerLayer = canvas
+      .getObjects()
+      .find((obj: any) => obj.data?.id === "ruler-overlay");
+    const rulerWasVisible = rulerLayer?.visible ?? true;
+    if (rulerLayer) rulerLayer.visible = false;
+
+    // 4. Apply Clip & Export
+    const originalClip = canvas.clipPath;
+    canvas.clipPath = clipPath;
+
+    const bbox = clipPath.getBoundingRect();
+
+    const clipPathCorrected = new Path(pathData, {
+      absolutePositioned: true,
+      left: 0,
+      top: 0,
+    });
+
+    const tempPath = new Path(pathData);
+    const tempBounds = tempPath.getBoundingRect();
+
+    clipPathCorrected.set({
+      left: tempBounds.left,
+      top: tempBounds.top,
+      originX: "left",
+      originY: "top",
+    });
+
+    // 4. Apply Clip & Export
+    canvas.clipPath = clipPathCorrected;
+
+    const exportBbox = clipPathCorrected.getBoundingRect();
+    const dataURL = canvas.toDataURL({
+      format: "png",
+      multiplier: 2,
+      left: exportBbox.left,
+      top: exportBbox.top,
+      width: exportBbox.width,
+      height: exportBbox.height,
+    });
+
+    // 5. Restore
+    canvas.clipPath = originalClip;
+    if (layer) layer.visible = wasVisible;
+    if (rulerLayer) rulerLayer.visible = rulerWasVisible;
+    holeMarkers.forEach((o) => (o.visible = true));
+    canvas.requestRenderAll();
+
+    return dataURL;
+  }
 }