@pooder/kit 3.5.0 → 4.0.0

package/src/dieline.ts

@@ -14,7 +14,7 @@ import {
   generateMaskPath,
   generateBleedZonePath,
   getPathBounds,
-  EdgeFeature,
+  DielineFeature,
 } from "./geometry";
 
 export interface DielineGeometry {
@@ -52,7 +52,7 @@ export interface DielineState {
   insideColor: string;
   outsideColor: string;
   showBleedLines: boolean;
-  features: EdgeFeature[];
+  features: DielineFeature[];
   pathData?: string;
 }
 
@@ -512,12 +512,8 @@ export class DielineTool implements Extension {
       };
     });
 
-    const originalFeatures = absoluteFeatures.filter(
-      (f) => !f.target || f.target === "original" || f.target === "both",
-    );
-    const offsetFeatures = absoluteFeatures.filter(
-      (f) => f.target === "offset" || f.target === "both",
-    );
+    // Split features into Cut (Physical) and Visual (All)
+    const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
 
     // 1. Draw Mask (Outside)
     const cutW = Math.max(0, visualWidth + visualOffset * 2);
@@ -525,10 +521,6 @@ export class DielineTool implements Extension {
     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,
@@ -539,7 +531,7 @@ export class DielineTool implements Extension {
       radius: cutR,
       x: cx,
       y: cy,
-      features: maskFeatures,
+      features: cutFeatures,
       pathData: this.state.pathData,
     });
 
@@ -569,7 +561,7 @@ export class DielineTool implements Extension {
         radius: cutR,
         x: cx,
         y: cy,
-        features: maskFeatures, // Use same features as mask for consistency
+        features: cutFeatures, // Use same features as mask for consistency
         pathData: this.state.pathData,
         canvasWidth: canvasW,
         canvasHeight: canvasH,
@@ -596,7 +588,7 @@ export class DielineTool implements Extension {
           radius: visualRadius,
           x: cx,
           y: cy,
-          features: originalFeatures,
+          features: cutFeatures,
           pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH,
@@ -608,7 +600,7 @@ export class DielineTool implements Extension {
           radius: cutR,
           x: cx,
           y: cy,
-          features: offsetFeatures,
+          features: cutFeatures,
           pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH,
@@ -641,7 +633,7 @@ export class DielineTool implements Extension {
         radius: cutR,
         x: cx,
         y: cy,
-        features: offsetFeatures,
+        features: cutFeatures,
         pathData: this.state.pathData,
         canvasWidth: canvasW,
         canvasHeight: canvasH,
@@ -671,7 +663,7 @@ export class DielineTool implements Extension {
       radius: visualRadius,
       x: cx,
       y: cy,
-      features: originalFeatures,
+      features: absoluteFeatures,
       pathData: this.state.pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH,
@@ -798,9 +790,7 @@ export class DielineTool implements Extension {
       };
     });
 
-    const originalFeatures = absoluteFeatures.filter(
-      (f) => !f.target || f.target === "original" || f.target === "both",
-    );
+    const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
 
     const generatedPathData = generateDielinePath({
       shape,
@@ -809,7 +799,7 @@ export class DielineTool implements Extension {
       radius: visualRadius,
       x: cx,
       y: cy,
-      features: originalFeatures,
+      features: cutFeatures,
       pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH,

package/src/feature.ts

@@ -11,7 +11,7 @@ import CanvasService from "./CanvasService";
 import { DielineGeometry } from "./dieline";
 import {
   getNearestPointOnDieline,
-  EdgeFeature,
+  DielineFeature,
   resolveFeaturePosition,
 } from "./geometry";
 import { Coordinate } from "./coordinate";
@@ -23,10 +23,11 @@ export class FeatureTool implements Extension {
     name: "FeatureTool",
   };
 
-  private features: EdgeFeature[] = [];
+  private features: DielineFeature[] = [];
   private canvasService?: CanvasService;
   private context?: ExtensionContext;
   private isUpdatingConfig = false;
+  private isToolActive = false;
 
   private handleMoving: ((e: any) => void) | null = null;
   private handleModified: ((e: any) => void) | null = null;
@@ -37,7 +38,7 @@ export class FeatureTool implements Extension {
 
   constructor(
     options?: Partial<{
-      features: EdgeFeature[];
+      features: DielineFeature[];
     }>,
   ) {
     if (options) {
@@ -70,15 +71,44 @@ export class FeatureTool implements Extension {
       });
     }
 
+    // Listen to tool activation
+    context.eventBus.on("tool:activated", this.onToolActivated);
+
     this.setup();
   }
 
   deactivate(context: ExtensionContext) {
+    context.eventBus.off("tool:activated", this.onToolActivated);
     this.teardown();
     this.canvasService = undefined;
     this.context = undefined;
   }
 
+  private onToolActivated = (event: { id: string }) => {
+    this.isToolActive = event.id === this.id;
+    this.updateVisibility();
+  };
+
+  private updateVisibility() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
+    const markers = canvas
+      .getObjects()
+      .filter((obj: any) => obj.data?.type === "feature-marker");
+    
+    markers.forEach((marker: any) => {
+        // If tool active, allow selection. If not, disable selection.
+        // Also might want to hide them entirely or just disable interaction.
+        // Assuming we only want to see/edit holes when tool is active.
+        marker.set({
+            visible: this.isToolActive, // Or just selectable: false if we want them visible but locked
+            selectable: this.isToolActive,
+            evented: this.isToolActive
+        });
+    });
+    canvas.requestRenderAll();
+  }
+
   contribute() {
     return {
       [ContributionPointIds.COMMANDS]: [
@@ -131,10 +161,10 @@ export class FeatureTool implements Extension {
     const defaultSize = Coordinate.convertUnit(10, "mm", unit);
 
     // Default to top edge center
-    const newFeature: EdgeFeature = {
+    const newFeature: DielineFeature = {
       id: Date.now().toString(),
       operation: type,
-      target: "original",
+      placement: "edge",
       shape: "rect",
       x: 0.5,
       y: 0, // Top edge
@@ -147,7 +177,7 @@ export class FeatureTool implements Extension {
       const current = configService.get(
         "dieline.features",
         [],
-      ) as EdgeFeature[];
+      ) as DielineFeature[];
       configService.update("dieline.features", [...current, newFeature]);
     }
     return true;
@@ -167,11 +197,12 @@ export class FeatureTool implements Extension {
     const timestamp = Date.now();
 
     // 1. Lug (Outer) - Add
-    const lug: EdgeFeature = {
+    const lug: DielineFeature = {
       id: `${timestamp}-lug`,
       groupId,
       operation: "add",
       shape: "circle",
+      placement: "edge",
       x: 0.5,
       y: 0,
       radius: lugRadius, // 20mm
@@ -179,11 +210,12 @@ export class FeatureTool implements Extension {
     };
 
     // 2. Hole (Inner) - Subtract
-    const hole: EdgeFeature = {
+    const hole: DielineFeature = {
       id: `${timestamp}-hole`,
       groupId,
       operation: "subtract",
       shape: "circle",
+      placement: "edge",
       x: 0.5,
       y: 0,
       radius: holeRadius, // 15mm
@@ -194,7 +226,7 @@ export class FeatureTool implements Extension {
       const current = configService.get(
         "dieline.features",
         [],
-      ) as EdgeFeature[];
+      ) as DielineFeature[];
       configService.update("dieline.features", [...current, lug, hole]);
     }
     return true;
@@ -202,19 +234,10 @@ export class FeatureTool implements Extension {
 
   private getGeometryForFeature(
     geometry: DielineGeometry,
-    feature?: EdgeFeature,
+    feature?: DielineFeature,
   ): DielineGeometry {
-    if (feature?.target === "offset" && geometry.offset !== 0) {
-      return {
-        ...geometry,
-        width: geometry.width + geometry.offset * 2,
-        height: geometry.height + geometry.offset * 2,
-        radius:
-          geometry.radius === 0
-            ? 0
-            : Math.max(0, geometry.radius + geometry.offset),
-      };
-    }
+    // Legacy support or specialized scaling can go here if needed
+    // Currently all features operate on the base geometry (or scaled version of it)
     return geometry;
   }
 
@@ -258,7 +281,7 @@ export class FeatureTool implements Extension {
         if (!this.currentGeometry) return;
 
         // Determine feature to use for snapping context
-        let feature: EdgeFeature | undefined;
+        let feature: DielineFeature | undefined;
         if (target.data?.isGroup) {
           const indices = target.data?.indices as number[];
           if (indices && indices.length > 0) {
@@ -288,7 +311,7 @@ export class FeatureTool implements Extension {
         const minDim = Math.min(target.getScaledWidth(), target.getScaledHeight());
         const limit = Math.max(0, minDim / 2 - markerStrokeWidth);
         
-        const snapped = this.constrainPosition(p, geometry, limit);
+        const snapped = this.constrainPosition(p, geometry, limit, feature);
 
         target.set({
           left: snapped.x,
@@ -409,8 +432,23 @@ export class FeatureTool implements Extension {
   private constrainPosition(
     p: Point,
     geometry: DielineGeometry,
-    limit: number
+    limit: number,
+    feature?: DielineFeature
   ): { x: number; y: number } {
+    if (feature && feature.placement === "internal") {
+       // Constrain to bounds
+       // geometry.x/y is center
+       const minX = geometry.x - geometry.width / 2;
+       const maxX = geometry.x + geometry.width / 2;
+       const minY = geometry.y - geometry.height / 2;
+       const maxY = geometry.y + geometry.height / 2;
+       
+       return {
+         x: Math.max(minX, Math.min(maxX, p.x)),
+         y: Math.max(minY, Math.min(maxY, p.y))
+       };
+    }
+
     // Use geometry helper to find nearest point on Base Shape
     // geometry object matches GeometryOptions structure required by getNearestPointOnDieline
     // except for 'features' which we don't need for base shape snapping
@@ -502,9 +540,9 @@ export class FeatureTool implements Extension {
     const finalScale = scale;
 
     // Group features by groupId
-    const groups: { [key: string]: { feature: EdgeFeature; index: number }[] } =
+    const groups: { [key: string]: { feature: DielineFeature; index: number }[] } =
       {};
-    const singles: { feature: EdgeFeature; index: number }[] = [];
+    const singles: { feature: DielineFeature; index: number }[] = [];
 
     this.features.forEach((f, i) => {
       if (f.groupId) {
@@ -517,7 +555,7 @@ export class FeatureTool implements Extension {
 
     // Helper to create marker shape
     const createMarkerShape = (
-      feature: EdgeFeature,
+      feature: DielineFeature,
       pos: { x: number; y: number },
     ) => {
       // Features are in the same unit as geometry.unit
@@ -578,7 +616,9 @@ export class FeatureTool implements Extension {
       const marker = createMarkerShape(feature, pos);
 
       marker.set({
-        selectable: true,
+        visible: this.isToolActive,
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
         hasControls: false,
         hasBorders: false,
         hoverCursor: "move",
@@ -633,7 +673,9 @@ export class FeatureTool implements Extension {
       });
 
       const groupObj = new Group(shapes, {
-        selectable: true,
+        visible: this.isToolActive,
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
         hasControls: false,
         hasBorders: false,
         hoverCursor: "move",
@@ -689,7 +731,7 @@ export class FeatureTool implements Extension {
 
     markers.forEach((marker: any) => {
       // Find associated feature
-      let feature: EdgeFeature | undefined;
+      let feature: DielineFeature | undefined;
       if (marker.data?.isGroup) {
         const indices = marker.data?.indices as number[];
         if (indices && indices.length > 0) {
@@ -714,7 +756,8 @@ export class FeatureTool implements Extension {
       const snapped = this.constrainPosition(
         new Point(marker.left, marker.top),
         geometry,
-        limit
+        limit,
+        feature
       );
       marker.set({ left: snapped.x, top: snapped.y });
       marker.setCoords();

package/src/geometry.ts

@@ -3,20 +3,21 @@ import paper from "paper";
 export type FeatureOperation = "add" | "subtract";
 export type FeatureShape = "rect" | "circle";
 
-export interface EdgeFeature {
+export interface DielineFeature {
   id: string;
-  groupId?: string; // For grouping features together (e.g. double-layer hole)
+  groupId?: string;
   operation: FeatureOperation;
   shape: FeatureShape;
-  x: number; // Normalized 0-1 relative to geometry bounds
-  y: number; // Normalized 0-1 relative to geometry bounds
-  width?: number; // For rect (Physical units)
-  height?: number; // For rect (Physical units)
-  radius?: number; // For circle or rect corners (Physical units)
-  rotation?: number; // Degrees
-  target?: "original" | "offset" | "both";
-  color?: string; // Hex color for the marker
-  strokeDash?: number[]; // Stroke dash array for the marker
+  x: number;
+  y: number;
+  width?: number;
+  height?: number;
+  radius?: number;
+  rotation?: number;
+  placement?: "edge" | "internal";
+  color?: string;
+  strokeDash?: number[];
+  skipCut?: boolean;
 }
 
 export interface GeometryOptions {
@@ -26,7 +27,7 @@ export interface GeometryOptions {
   radius: number;
   x: number;
   y: number;
-  features: Array<EdgeFeature>;
+  features: Array<DielineFeature>;
   pathData?: string;
   canvasWidth?: number;
   canvasHeight?: number;
@@ -41,7 +42,7 @@ export interface MaskGeometryOptions extends GeometryOptions {
  * Resolves the absolute position of a feature based on normalized coordinates.
  */
 export function resolveFeaturePosition(
-  feature: EdgeFeature,
+  feature: DielineFeature,
   geometry: { x: number; y: number; width: number; height: number },
 ): { x: number; y: number } {
   const { x, y, width, height } = geometry;
@@ -116,7 +117,7 @@ function createBaseShape(options: GeometryOptions): paper.PathItem {
  * Creates a Paper.js Item for a single feature.
  */
 function createFeatureItem(
-  feature: EdgeFeature,
+  feature: DielineFeature,
   center: paper.Point,
 ): paper.PathItem {
   let item: paper.PathItem;
@@ -147,20 +148,24 @@ function createFeatureItem(
 }
 
 /**
- * Internal helper to generate the Dieline Shape (Paper Item).
- * Logic: (Base U Adds) - Subtracts
+ * Internal helper to generate the Perimeter Shape (Base + Edge Features).
  */
-function getDielineShape(options: GeometryOptions): paper.PathItem {
+function getPerimeterShape(options: GeometryOptions): paper.PathItem {
   // 1. Create Base Shape
   let mainShape = createBaseShape(options);
 
   const { features } = options;
 
   if (features && features.length > 0) {
+    // Filter for Edge Features (Default or explicit 'edge')
+    const edgeFeatures = features.filter(
+      (f) => !f.placement || f.placement === "edge",
+    );
+
     const adds: paper.PathItem[] = [];
     const subtracts: paper.PathItem[] = [];
 
-    features.forEach((f) => {
+    edgeFeatures.forEach((f) => {
       const pos = resolveFeaturePosition(f, options);
       const center = new paper.Point(pos.x, pos.y);
       const item = createFeatureItem(f, center);
@@ -174,9 +179,6 @@ function getDielineShape(options: GeometryOptions): paper.PathItem {
 
     // 2. Process Additions (Union)
     if (adds.length > 0) {
-      // Unite all additions first to avoid artifacts?
-      // Or unite one by one to mainShape?
-      // Unite one by one is safer for simple logic.
       for (const item of adds) {
         try {
           const temp = mainShape.unite(item);
@@ -209,6 +211,49 @@ function getDielineShape(options: GeometryOptions): paper.PathItem {
   return mainShape;
 }
 
+/**
+ * Applies Internal/Surface features to a shape.
+ */
+function applySurfaceFeatures(
+  shape: paper.PathItem,
+  features: DielineFeature[],
+  options: GeometryOptions,
+): paper.PathItem {
+  const internalFeatures = features.filter((f) => f.placement === "internal");
+  
+  if (internalFeatures.length === 0) return shape;
+
+  let result = shape;
+  
+  // Internal features are usually subtractive (holes)
+  // But we support 'add' too (islands? maybe just unite)
+  
+  for (const f of internalFeatures) {
+    const pos = resolveFeaturePosition(f, options);
+    const center = new paper.Point(pos.x, pos.y);
+    const item = createFeatureItem(f, center);
+
+    try {
+      if (f.operation === "add") {
+         const temp = result.unite(item);
+         result.remove();
+         item.remove();
+         result = temp;
+      } else {
+         const temp = result.subtract(item);
+         result.remove();
+         item.remove();
+         result = temp;
+      }
+    } catch (e) {
+      console.error("Geometry: Failed to apply surface feature", e);
+      item.remove();
+    }
+  }
+  
+  return result;
+}
+
 /**
  * Generates the path data for the Dieline (Product Shape).
  */
@@ -218,10 +263,11 @@ export function generateDielinePath(options: GeometryOptions): string {
   ensurePaper(paperWidth, paperHeight);
   paper.project.activeLayer.removeChildren();
 
-  const mainShape = getDielineShape(options);
+  const perimeter = getPerimeterShape(options);
+  const finalShape = applySurfaceFeatures(perimeter, options.features, options);
 
-  const pathData = mainShape.pathData;
-  mainShape.remove();
+  const pathData = finalShape.pathData;
+  finalShape.remove();
 
   return pathData;
 }
@@ -241,7 +287,8 @@ export function generateMaskPath(options: MaskGeometryOptions): string {
     size: [canvasWidth, canvasHeight],
   });
 
-  const mainShape = getDielineShape(options);
+  const perimeter = getPerimeterShape(options);
+  const mainShape = applySurfaceFeatures(perimeter, options.features, options);
 
   const finalMask = maskRect.subtract(mainShape);
 
@@ -270,10 +317,12 @@ export function generateBleedZonePath(
   paper.project.activeLayer.removeChildren();
 
   // 1. Generate Original Shape
-  const shapeOriginal = getDielineShape(originalOptions);
+  const pOriginal = getPerimeterShape(originalOptions);
+  const shapeOriginal = applySurfaceFeatures(pOriginal, originalOptions.features, originalOptions);
 
   // 2. Generate Offset Shape
-  const shapeOffset = getDielineShape(offsetOptions);
+  const pOffset = getPerimeterShape(offsetOptions);
+  const shapeOffset = applySurfaceFeatures(pOffset, offsetOptions.features, offsetOptions);
 
   // 3. Calculate Difference
   let bleedZone: paper.PathItem;

package/src/image.ts

@@ -33,6 +33,7 @@ export class ImageTool implements Extension {
   private canvasService?: CanvasService;
   private context?: ExtensionContext;
   private isUpdatingConfig = false;
+  private isToolActive = false;
 
   activate(context: ExtensionContext) {
     this.context = context;
@@ -42,6 +43,9 @@ export class ImageTool implements Extension {
       return;
     }
 
+    // Listen to tool activation
+    context.eventBus.on("tool:activated", this.onToolActivated);
+
     const configService = context.services.get<ConfigurationService>(
       "ConfigurationService",
     );
@@ -65,6 +69,8 @@ export class ImageTool implements Extension {
   }
 
   deactivate(context: ExtensionContext) {
+    context.eventBus.off("tool:activated", this.onToolActivated);
+    
     if (this.canvasService) {
       const layer = this.canvasService.getLayer("user");
       if (layer) {
@@ -79,6 +85,23 @@ export class ImageTool implements Extension {
     }
   }
 
+  private onToolActivated = (event: { id: string }) => {
+    this.isToolActive = event.id === this.id;
+    this.updateInteractivity();
+  };
+
+  private updateInteractivity() {
+    this.objectMap.forEach((obj) => {
+      obj.set({
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
+        hasControls: this.isToolActive,
+        hasBorders: this.isToolActive,
+      });
+    });
+    this.canvasService?.requestRenderAll();
+  }
+
   contribute() {
     return {
       [ContributionPointIds.CONFIGURATIONS]: [
@@ -291,6 +314,20 @@ export class ImageTool implements Extension {
     this.items.forEach((item, index) => {
       let obj = this.objectMap.get(item.id);
 
+      // Check if URL changed, if so remove object to force reload
+      // We assume Fabric object has getSrc() or we check data.url if we stored it
+      // Since we don't store url on object easily accessible without casting, 
+      // let's rely on checking if we need to reload.
+      // Actually, standard Fabric Image doesn't expose src easily on type without casting to any.
+      if (obj && (obj as any).getSrc) {
+         const currentSrc = (obj as any).getSrc();
+         if (currentSrc !== item.url) {
+            layer.remove(obj);
+            this.objectMap.delete(item.id);
+            obj = undefined;
+         }
+      }
+
       if (!obj) {
         // New object, load it
         this.loadImage(item, layer, layout);
@@ -375,6 +412,10 @@ export class ImageTool implements Extension {
           data: { id: item.id },
           uniformScaling: true,
           lockScalingFlip: true,
+          selectable: this.isToolActive,
+          evented: this.isToolActive,
+          hasControls: this.isToolActive,
+          hasBorders: this.isToolActive,
         });
 
         image.setControlsVisibility({