@pooder/kit 3.3.0 → 3.5.0

package/src/dieline.ts

@@ -14,8 +14,7 @@ import {
   generateMaskPath,
   generateBleedZonePath,
   getPathBounds,
-  HoleData,
-  resolveHolePosition,
+  EdgeFeature,
 } from "./geometry";
 
 export interface DielineGeometry {
@@ -29,6 +28,31 @@ export interface DielineGeometry {
   offset: number;
   borderLength?: number;
   scale?: number;
+  strokeWidth?: number;
+  pathData?: string;
+}
+
+export interface LineStyle {
+  width: number;
+  color: string;
+  dashLength: number;
+  style: "solid" | "dashed" | "hidden";
+}
+
+export interface DielineState {
+  unit: Unit;
+  shape: "rect" | "circle" | "ellipse" | "custom";
+  width: number;
+  height: number;
+  radius: number;
+  offset: number;
+  padding: number | string;
+  mainLine: LineStyle;
+  offsetLine: LineStyle;
+  insideColor: string;
+  outsideColor: string;
+  showBleedLines: boolean;
+  features: EdgeFeature[];
   pathData?: string;
 }
 
@@ -38,46 +62,47 @@ export class DielineTool implements Extension {
     name: "DielineTool",
   };
 
-  private unit: Unit = "mm";
-  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 padding: number | string = 140;
-  private pathData?: string;
+  private state: DielineState = {
+    unit: "mm",
+    shape: "rect",
+    width: 500,
+    height: 500,
+    radius: 0,
+    offset: 0,
+    padding: 140,
+    mainLine: {
+      width: 2.7,
+      color: "#FF0000",
+      dashLength: 5,
+      style: "solid",
+    },
+    offsetLine: {
+      width: 2.7,
+      color: "#FF0000",
+      dashLength: 5,
+      style: "solid",
+    },
+    insideColor: "rgba(0,0,0,0)",
+    outsideColor: "#ffffff",
+    showBleedLines: true,
+    features: [],
+  };
 
   private canvasService?: CanvasService;
   private context?: ExtensionContext;
 
-  constructor(
-    options?: Partial<{
-      unit: Unit;
-      shape: "rect" | "circle" | "ellipse" | "custom";
-      width: number;
-      height: number;
-      radius: number;
-      // Position is normalized (0-1)
-      position: { x: number; y: number };
-      padding: number | string;
-      offset: number;
-      style: "solid" | "dashed";
-      insideColor: string;
-      outsideColor: string;
-      showBleedLines: boolean;
-      holes: HoleData[];
-      pathData: string;
-    }>,
-  ) {
+  constructor(options?: Partial<DielineState>) {
     if (options) {
-      Object.assign(this, options);
+      // Deep merge for styles to avoid overwriting defaults with partial objects
+      if (options.mainLine) {
+        Object.assign(this.state.mainLine, options.mainLine);
+        delete options.mainLine;
+      }
+      if (options.offsetLine) {
+        Object.assign(this.state.offsetLine, options.offsetLine);
+        delete options.offsetLine;
+      }
+      Object.assign(this.state, options);
     }
   }
 
@@ -92,40 +117,64 @@ export class DielineTool implements Extension {
     const configService = context.services.get<any>("ConfigurationService");
     if (configService) {
       // Load initial config
-      this.unit = configService.get("dieline.unit", this.unit);
-      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.padding = configService.get("dieline.padding", this.padding);
-      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);
+      const s = this.state;
+      s.unit = configService.get("dieline.unit", s.unit);
+      s.shape = configService.get("dieline.shape", s.shape);
+      s.width = configService.get("dieline.width", s.width);
+      s.height = configService.get("dieline.height", s.height);
+      s.radius = configService.get("dieline.radius", s.radius);
+      s.padding = configService.get("dieline.padding", s.padding);
+      s.offset = configService.get("dieline.offset", s.offset);
+      
+      // Main Line
+      s.mainLine.width = configService.get("dieline.strokeWidth", s.mainLine.width);
+      s.mainLine.color = configService.get("dieline.strokeColor", s.mainLine.color);
+      s.mainLine.dashLength = configService.get("dieline.dashLength", s.mainLine.dashLength);
+      s.mainLine.style = configService.get("dieline.style", s.mainLine.style);
+
+      // Offset Line
+      s.offsetLine.width = configService.get("dieline.offsetStrokeWidth", s.offsetLine.width);
+      s.offsetLine.color = configService.get("dieline.offsetStrokeColor", s.offsetLine.color);
+      s.offsetLine.dashLength = configService.get("dieline.offsetDashLength", s.offsetLine.dashLength);
+      s.offsetLine.style = configService.get("dieline.offsetStyle", s.offsetLine.style);
+
+      s.insideColor = configService.get("dieline.insideColor", s.insideColor);
+      s.outsideColor = configService.get("dieline.outsideColor", s.outsideColor);
+      s.showBleedLines = configService.get("dieline.showBleedLines", s.showBleedLines);
+      s.features = configService.get("dieline.features", s.features);
+      s.pathData = configService.get("dieline.pathData", s.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();
+          console.log(`[DielineTool] Config change detected: ${e.key} -> ${e.value}`);
+          
+          switch (e.key) {
+            case "dieline.unit": s.unit = e.value; break;
+            case "dieline.shape": s.shape = e.value; break;
+            case "dieline.width": s.width = e.value; break;
+            case "dieline.height": s.height = e.value; break;
+            case "dieline.radius": s.radius = e.value; break;
+            case "dieline.padding": s.padding = e.value; break;
+            case "dieline.offset": s.offset = e.value; break;
+            
+            case "dieline.strokeWidth": s.mainLine.width = e.value; break;
+            case "dieline.strokeColor": s.mainLine.color = e.value; break;
+            case "dieline.dashLength": s.mainLine.dashLength = e.value; break;
+            case "dieline.style": s.mainLine.style = e.value; break;
+            
+            case "dieline.offsetStrokeWidth": s.offsetLine.width = e.value; break;
+            case "dieline.offsetStrokeColor": s.offsetLine.color = e.value; break;
+            case "dieline.offsetDashLength": s.offsetLine.dashLength = e.value; break;
+            case "dieline.offsetStyle": s.offsetLine.style = e.value; break;
+            
+            case "dieline.insideColor": s.insideColor = e.value; break;
+            case "dieline.outsideColor": s.outsideColor = e.value; break;
+            case "dieline.showBleedLines": s.showBleedLines = e.value; break;
+            case "dieline.features": s.features = e.value; break;
+            case "dieline.pathData": s.pathData = e.value; break;
           }
+          this.updateDieline();
         }
       });
     }
@@ -141,6 +190,7 @@ export class DielineTool implements Extension {
   }
 
   contribute() {
+    const s = this.state;
     return {
       [ContributionPointIds.CONFIGURATIONS]: [
         {
@@ -148,14 +198,14 @@ export class DielineTool implements Extension {
           type: "select",
           label: "Unit",
           options: ["px", "mm", "cm", "in"],
-          default: this.unit,
+          default: s.unit,
         },
         {
           id: "dieline.shape",
           type: "select",
           label: "Shape",
           options: ["rect", "circle", "ellipse", "custom"],
-          default: this.shape,
+          default: s.shape,
         },
         {
           id: "dieline.width",
@@ -163,7 +213,7 @@ export class DielineTool implements Extension {
           label: "Width",
           min: 10,
           max: 2000,
-          default: this.width,
+          default: s.width,
         },
         {
           id: "dieline.height",
@@ -171,7 +221,7 @@ export class DielineTool implements Extension {
           label: "Height",
           min: 10,
           max: 2000,
-          default: this.height,
+          default: s.height,
         },
         {
           id: "dieline.radius",
@@ -179,20 +229,14 @@ export class DielineTool implements Extension {
           label: "Corner Radius",
           min: 0,
           max: 500,
-          default: this.radius,
-        },
-        {
-          id: "dieline.position",
-          type: "json",
-          label: "Position (Normalized)",
-          default: this.radius,
+          default: s.radius,
         },
         {
           id: "dieline.padding",
           type: "select",
           label: "View Padding",
           options: [0, 10, 20, 40, 60, 100, "2%", "5%", "10%", "15%", "20%"],
-          default: this.padding,
+          default: s.padding,
         },
         {
           id: "dieline.offset",
@@ -200,38 +244,91 @@ export class DielineTool implements Extension {
           label: "Bleed Offset",
           min: -100,
           max: 100,
-          default: this.offset,
+          default: s.offset,
         },
         {
           id: "dieline.showBleedLines",
           type: "boolean",
           label: "Show Bleed Lines",
-          default: this.showBleedLines,
+          default: s.showBleedLines,
+        },
+        {
+          id: "dieline.strokeWidth",
+          type: "number",
+          label: "Line Width",
+          min: 0.1,
+          max: 10,
+          step: 0.1,
+          default: s.mainLine.width,
+        },
+        {
+          id: "dieline.strokeColor",
+          type: "color",
+          label: "Line Color",
+          default: s.mainLine.color,
+        },
+        {
+          id: "dieline.dashLength",
+          type: "number",
+          label: "Dash Length",
+          min: 1,
+          max: 50,
+          default: s.mainLine.dashLength,
         },
         {
           id: "dieline.style",
           type: "select",
           label: "Line Style",
-          options: ["solid", "dashed"],
-          default: this.style,
+          options: ["solid", "dashed", "hidden"],
+          default: s.mainLine.style,
+        },
+        {
+          id: "dieline.offsetStrokeWidth",
+          type: "number",
+          label: "Offset Line Width",
+          min: 0.1,
+          max: 10,
+          step: 0.1,
+          default: s.offsetLine.width,
+        },
+        {
+          id: "dieline.offsetStrokeColor",
+          type: "color",
+          label: "Offset Line Color",
+          default: s.offsetLine.color,
+        },
+        {
+          id: "dieline.offsetDashLength",
+          type: "number",
+          label: "Offset Dash Length",
+          min: 1,
+          max: 50,
+          default: s.offsetLine.dashLength,
+        },
+        {
+          id: "dieline.offsetStyle",
+          type: "select",
+          label: "Offset Line Style",
+          options: ["solid", "dashed", "hidden"],
+          default: s.offsetLine.style,
         },
         {
           id: "dieline.insideColor",
           type: "color",
           label: "Inside Color",
-          default: this.insideColor,
+          default: s.insideColor,
         },
         {
           id: "dieline.outsideColor",
           type: "color",
           label: "Outside Color",
-          default: this.outsideColor,
+          default: s.outsideColor,
         },
         {
-          id: "dieline.holes",
+          id: "dieline.features",
           type: "json",
-          label: "Holes",
-          default: this.holes,
+          label: "Edge Features",
+          default: s.features,
         },
       ] as ConfigurationContribution[],
       [ContributionPointIds.COMMANDS]: [
@@ -257,23 +354,17 @@ export class DielineTool implements Extension {
               const pathData = await ImageTracer.trace(imageUrl, options);
               const bounds = getPathBounds(pathData);
 
-              const currentMax = Math.max(this.width, this.height);
+              const currentMax = Math.max(s.width, s.height);
               const scale = currentMax / Math.max(bounds.width, bounds.height);
 
               const newWidth = bounds.width * scale;
               const newHeight = bounds.height * scale;
 
-              const configService = this.context?.services.get<any>(
-                "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;
+              return {
+                pathData,
+                width: newWidth,
+                height: newHeight,
+              };
             } catch (e) {
               console.error("Edge detection failed", e);
               throw e;
@@ -349,15 +440,15 @@ export class DielineTool implements Extension {
     containerWidth: number,
     containerHeight: number,
   ): number {
-    if (typeof this.padding === "number") {
-      return this.padding;
+    if (typeof this.state.padding === "number") {
+      return this.state.padding;
     }
-    if (typeof this.padding === "string") {
-      if (this.padding.endsWith("%")) {
-        const percent = parseFloat(this.padding) / 100;
+    if (typeof this.state.padding === "string") {
+      if (this.state.padding.endsWith("%")) {
+        const percent = parseFloat(this.state.padding) / 100;
         return Math.min(containerWidth, containerHeight) * percent;
       }
-      return parseFloat(this.padding) || 0;
+      return parseFloat(this.state.padding) || 0;
     }
     return 0;
   }
@@ -372,14 +463,14 @@ export class DielineTool implements Extension {
       shape,
       radius,
       offset,
-      style,
+      mainLine,
+      offsetLine,
       insideColor,
       outsideColor,
-      position,
       showBleedLines,
-      holes,
-    } = this;
-    let { width, height } = this;
+      features,
+    } = this.state;
+    let { width, height } = this.state;
 
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
@@ -406,51 +497,38 @@ export class DielineTool implements Extension {
     // Clear existing objects
     layer.remove(...layer.getObjects());
 
-    // Resolve Holes for Geometry Generation (using visual coordinates)
-    const geometryForHoles = {
-      x: cx,
-      y: cy,
-      width: visualWidth,
-      height: visualHeight,
-      // Pass scale/unit context if needed by resolveHolePosition (though currently unused there)
-    };
-
-    const absoluteHoles = (holes || []).map((h) => {
-      // Scale hole radii and offsets: mm -> current unit -> pixels
-      const unitScale = Coordinate.convertUnit(1, "mm", unit);
-      const offsetScale = unitScale * scale;
-
-      // Apply scaling to offsets BEFORE resolving position
-      const hWithPixelOffsets = {
-        ...h,
-        offsetX: (h.offsetX || 0) * offsetScale,
-        offsetY: (h.offsetY || 0) * offsetScale,
-      };
-
-      const pos = resolveHolePosition(hWithPixelOffsets, geometryForHoles, {
-        width: canvasW,
-        height: canvasH,
-      });
+    // Scale Features for Geometry Generation
+    const absoluteFeatures = (features || []).map((f) => {
+      // Scale current unit -> pixels (features share the same unit as the dieline)
+      const featureScale = scale;
 
       return {
-        ...h,
-        x: pos.x,
-        y: pos.y,
-        // Scale hole radii: mm -> current unit -> pixels
-        innerRadius: h.innerRadius * offsetScale,
-        outerRadius: h.outerRadius * offsetScale,
-        // Store scaled offsets in the result for consistency, though pos is already resolved
-        offsetX: hWithPixelOffsets.offsetX,
-        offsetY: hWithPixelOffsets.offsetY,
+        ...f,
+        x: f.x,
+        y: f.y,
+        width: (f.width || 0) * featureScale,
+        height: (f.height || 0) * featureScale,
+        radius: (f.radius || 0) * featureScale,
       };
     });
 
+    const originalFeatures = absoluteFeatures.filter(
+      (f) => !f.target || f.target === "original" || f.target === "both",
+    );
+    const offsetFeatures = absoluteFeatures.filter(
+      (f) => f.target === "offset" || f.target === "both",
+    );
+
     // 1. Draw Mask (Outside)
     const cutW = Math.max(0, visualWidth + visualOffset * 2);
     const cutH = Math.max(0, visualHeight + visualOffset * 2);
     const cutR =
       visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
 
+    // If no bleed offset, mask should match the original dieline (including its features)
+    // If bleed offset exists (positive or negative), mask matches bleed line (which only includes offset features)
+    const maskFeatures = visualOffset !== 0 ? offsetFeatures : originalFeatures;
+
     // Use Paper.js to generate the complex mask path
     const maskPathData = generateMaskPath({
       canvasWidth: canvasW,
@@ -461,8 +539,8 @@ export class DielineTool implements Extension {
       radius: cutR,
       x: cx,
       y: cy,
-      holes: absoluteHoles,
-      pathData: this.pathData,
+      features: maskFeatures,
+      pathData: this.state.pathData,
     });
 
     const mask = new Path(maskPathData, {
@@ -477,13 +555,13 @@ export class DielineTool implements Extension {
     });
     layer.add(mask);
 
-    // 2. Draw Inside Fill (Dieline Shape itself, merged with holes if needed)
+    // 2. Draw Inside Fill (Dieline Shape itself, merged with features if needed)
     if (
       insideColor &&
       insideColor !== "transparent" &&
       insideColor !== "rgba(0,0,0,0)"
     ) {
-      // Generate path for the product shape (Paper) = Dieline - Holes
+      // Generate path for the product shape (Paper) = Dieline +/- Features
       const productPathData = generateDielinePath({
         shape,
         width: cutW,
@@ -491,8 +569,8 @@ export class DielineTool implements Extension {
         radius: cutR,
         x: cx,
         y: cy,
-        holes: absoluteHoles,
-        pathData: this.pathData,
+        features: maskFeatures, // Use same features as mask for consistency
+        pathData: this.state.pathData,
         canvasWidth: canvasW,
         canvasHeight: canvasH,
       });
@@ -518,8 +596,20 @@ export class DielineTool implements Extension {
           radius: visualRadius,
           x: cx,
           y: cy,
-          holes: absoluteHoles,
-          pathData: this.pathData,
+          features: originalFeatures,
+          pathData: this.state.pathData,
+          canvasWidth: canvasW,
+          canvasHeight: canvasH,
+        },
+        {
+          shape,
+          width: cutW,
+          height: cutH,
+          radius: cutR,
+          x: cx,
+          y: cy,
+          features: offsetFeatures,
+          pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH,
         },
@@ -528,7 +618,7 @@ export class DielineTool implements Extension {
 
       // Use solid red for hatch lines to match dieline, background is transparent
       if (showBleedLines !== false) {
-        const pattern = this.createHatchPattern("red");
+        const pattern = this.createHatchPattern(mainLine.color);
         if (pattern) {
           const bleedObj = new Path(bleedPathData, {
             fill: pattern,
@@ -551,17 +641,20 @@ export class DielineTool implements Extension {
         radius: cutR,
         x: cx,
         y: cy,
-        holes: absoluteHoles,
-        pathData: this.pathData,
+        features: offsetFeatures,
+        pathData: this.state.pathData,
         canvasWidth: canvasW,
         canvasHeight: canvasH,
       });
 
       const offsetBorderObj = new Path(offsetPathData, {
         fill: null,
-        stroke: "#666", // Grey
-        strokeWidth: 1,
-        strokeDashArray: [4, 4], // Dashed
+        stroke: offsetLine.style === "hidden" ? null : offsetLine.color,
+        strokeWidth: offsetLine.width,
+        strokeDashArray:
+          offsetLine.style === "dashed"
+            ? [offsetLine.dashLength, offsetLine.dashLength]
+            : undefined,
         selectable: false,
         evented: false,
         originX: "left",
@@ -571,9 +664,6 @@ export class DielineTool implements Extension {
     }
 
     // 4. Draw Dieline (Visual Border)
-    // This should outline the product shape AND the 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: visualWidth,
@@ -581,17 +671,18 @@ export class DielineTool implements Extension {
       radius: visualRadius,
       x: cx,
       y: cy,
-      holes: absoluteHoles,
-      pathData: this.pathData,
+      features: originalFeatures,
+      pathData: this.state.pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH,
     });
 
     const borderObj = new Path(borderPathData, {
       fill: "transparent",
-      stroke: "red",
-      strokeWidth: 1,
-      strokeDashArray: style === "dashed" ? [5, 5] : undefined,
+      stroke: mainLine.style === "hidden" ? null : mainLine.color,
+      strokeWidth: mainLine.width,
+      strokeDashArray:
+        mainLine.style === "dashed" ? [mainLine.dashLength, mainLine.dashLength] : undefined,
       selectable: false,
       evented: false,
       originX: "left",
@@ -624,16 +715,8 @@ export class DielineTool implements Extension {
     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)
+    // Emit change event so other tools (like FeatureTool) can react
     if (emitEvent && this.context) {
-      // FIX: Ensure we use the exact same geometry values as used in rendering above.
-      // Although getGeometry() recalculates layout, it should be identical if props haven't changed.
-      // But to be absolutely safe and avoid micro-differences or race conditions, we can reuse calculated values.
-      // However, getGeometry is public API, so it's better if it's correct.
-      // Let's verify getGeometry logic matches updateDieline logic perfectly.
-      // Yes, both use Coordinate.calculateLayout with the same inputs.
-
       const geometry = this.getGeometry();
       if (geometry) {
         this.context.eventBus.emit("dieline:geometry:change", geometry);
@@ -643,7 +726,7 @@ export class DielineTool implements Extension {
 
   public getGeometry(): DielineGeometry | null {
     if (!this.canvasService) return null;
-    const { unit, shape, width, height, radius, position, offset } = this;
+    const { unit, shape, width, height, radius, offset, mainLine, pathData } = this.state;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
 
@@ -670,9 +753,10 @@ export class DielineTool implements Extension {
       height: visualHeight,
       radius: radius * scale,
       offset: offset * scale,
-      // Pass scale to help other tools (like HoleTool) convert units
+      // Pass scale to help other tools (like FeatureTool) convert units
       scale,
-      pathData: this.pathData,
+      strokeWidth: mainLine.width,
+      pathData,
     } as DielineGeometry;
   }
 
@@ -680,13 +764,10 @@ export class DielineTool implements Extension {
     if (!this.canvasService) return null;
     const userLayer = this.canvasService.getLayer("user");
 
-    // Even if no user images, we might want to export the shape?
-    // But usually "Cut Image" implies the printed content.
-    // If empty, maybe just return null or empty string.
     if (!userLayer) return null;
 
     // 1. Generate Path Data
-    const { shape, width, height, radius, position, holes } = this;
+    const { shape, width, height, radius, features, unit, pathData } = this.state;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
 
@@ -703,74 +784,57 @@ export class DielineTool implements Extension {
     const visualHeight = layout.height;
     const visualRadius = radius * scale;
 
-    // Denormalize Holes for Export
-    const absoluteHoles = (holes || []).map((h) => {
-      const unit = this.unit || "mm";
-      const unitScale = Coordinate.convertUnit(1, "mm", unit);
-
-      const pos = resolveHolePosition(
-        {
-          ...h,
-          offsetX: (h.offsetX || 0) * unitScale * scale,
-          offsetY: (h.offsetY || 0) * unitScale * scale,
-        },
-        { x: cx, y: cy, width: visualWidth, height: visualHeight },
-        { width: canvasW, height: canvasH },
-      );
+    // Scale Features
+    const absoluteFeatures = (features || []).map((f) => {
+      const featureScale = scale;
 
       return {
-        ...h,
-        x: pos.x,
-        y: pos.y,
-        innerRadius: h.innerRadius * unitScale * scale,
-        outerRadius: h.outerRadius * unitScale * scale,
-        offsetX: (h.offsetX || 0) * unitScale * scale,
-        offsetY: (h.offsetY || 0) * unitScale * scale,
+        ...f,
+        x: f.x,
+        y: f.y,
+        width: (f.width || 0) * featureScale,
+        height: (f.height || 0) * featureScale,
+        radius: (f.radius || 0) * featureScale,
       };
     });
 
-    const pathData = generateDielinePath({
+    const originalFeatures = absoluteFeatures.filter(
+      (f) => !f.target || f.target === "original" || f.target === "both",
+    );
+
+    const generatedPathData = generateDielinePath({
       shape,
       width: visualWidth,
       height: visualHeight,
       radius: visualRadius,
       x: cx,
       y: cy,
-      holes: absoluteHoles,
-      pathData: this.pathData,
+      features: originalFeatures,
+      pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH,
     });
 
     // 2. Prepare for Export
-    // Clone the layer to not affect the stage
     const clonedLayer = await userLayer.clone();
 
-    // Create Clip Path
-    // Note: In Fabric, clipPath is relative to the object center usually,
-    // but for a Group that is full-canvas (left=0, top=0), absolute coordinates should work
-    // if we configure it correctly.
-    // However, Fabric's clipPath handling can be tricky with Groups.
-    // Safest bet: Position the clipPath absolutely and ensuring group is absolute.
-
-    const clipPath = new Path(pathData, {
+    const clipPath = new Path(generatedPathData, {
       originX: "left",
       originY: "top",
       left: 0,
       top: 0,
-      absolutePositioned: true, // Important for groups
+      absolutePositioned: true,
     });
 
     clonedLayer.clipPath = clipPath;
 
     // 3. Calculate Crop Area (The Dieline Bounds)
-    // We want to export only the area covered by the dieline
     const bounds = clipPath.getBoundingRect();
 
     // 4. Export
     const dataUrl = clonedLayer.toDataURL({
       format: "png",
-      multiplier: 2, // Better quality
+      multiplier: 2,
       left: bounds.left,
       top: bounds.top,
       width: bounds.width,