@pooder/kit 3.5.0 → 4.1.0

package/src/feature.ts

@@ -11,10 +11,11 @@ import CanvasService from "./CanvasService";
 import { DielineGeometry } from "./dieline";
 import {
   getNearestPointOnDieline,
-  EdgeFeature,
+  DielineFeature,
   resolveFeaturePosition,
 } from "./geometry";
 import { Coordinate } from "./coordinate";
+import { ConstraintRegistry } from "./constraints";
 
 export class FeatureTool implements Extension {
   id = "pooder.kit.feature";
@@ -23,10 +24,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 +39,7 @@ export class FeatureTool implements Extension {
 
   constructor(
     options?: Partial<{
-      features: EdgeFeature[];
+      features: DielineFeature[];
     }>,
   ) {
     if (options) {
@@ -70,15 +72,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 +162,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 +178,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 +198,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 +211,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 +227,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 +235,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 +282,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 +312,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 +433,47 @@ export class FeatureTool implements Extension {
   private constrainPosition(
     p: Point,
     geometry: DielineGeometry,
-    limit: number
+    limit: number,
+    feature?: DielineFeature
   ): { x: number; y: number } {
+    if (feature && feature.constraints) {
+      // Use Constraint Registry
+      // Convert to normalized coordinates
+      const minX = geometry.x - geometry.width / 2;
+      const minY = geometry.y - geometry.height / 2;
+      
+      const nx = geometry.width > 0 ? (p.x - minX) / geometry.width : 0.5;
+      const ny = geometry.height > 0 ? (p.y - minY) / geometry.height : 0.5;
+
+      const scale = geometry.scale || 1;
+      const dielineWidth = geometry.width / scale;
+      const dielineHeight = geometry.height / scale;
+
+      const constrained = ConstraintRegistry.apply(nx, ny, feature, {
+        dielineWidth,
+        dielineHeight,
+      });
+
+      return {
+        x: minX + constrained.x * geometry.width,
+        y: minY + constrained.y * geometry.height,
+      };
+    }
+
+    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 +565,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 +580,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 +641,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 +698,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 +756,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 +781,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/film.ts

@@ -1,194 +1,194 @@
-import {
-  Extension,
-  ExtensionContext,
-  ContributionPointIds,
-  CommandContribution,
-  ConfigurationContribution,
-} from "@pooder/core";
-import { FabricImage as Image } from "fabric";
-import CanvasService from "./CanvasService";
-
-export class FilmTool implements Extension {
-  id = "pooder.kit.film";
-
-  public metadata = {
-    name: "FilmTool",
-  };
-
-  private url: string = "";
-  private opacity: number = 0.5;
-
-  private canvasService?: CanvasService;
-
-  constructor(
-    options?: Partial<{
-      url: string;
-      opacity: number;
-    }>,
-  ) {
-    if (options) {
-      Object.assign(this, options);
-    }
-  }
-
-  activate(context: ExtensionContext) {
-    this.canvasService = context.services.get<CanvasService>("CanvasService");
-    if (!this.canvasService) {
-      console.warn("CanvasService not found for FilmTool");
-      return;
-    }
-
-    const configService = context.services.get<any>("ConfigurationService");
-    if (configService) {
-      // Load initial config
-      this.url = configService.get("film.url", this.url);
-      this.opacity = configService.get("film.opacity", this.opacity);
-
-      // Listen for changes
-      configService.onAnyChange((e: { key: string; value: any }) => {
-        if (e.key.startsWith("film.")) {
-          const prop = e.key.split(".")[1];
-          console.log(
-            `[FilmTool] Config change detected: ${e.key} -> ${e.value}`,
-          );
-          if (prop && prop in this) {
-            (this as any)[prop] = e.value;
-            this.updateFilm();
-          }
-        }
-      });
-    }
-
-    this.initLayer();
-    this.updateFilm();
-  }
-
-  deactivate(context: ExtensionContext) {
-    if (this.canvasService) {
-      const layer = this.canvasService.getLayer("overlay");
-      if (layer) {
-        const img = this.canvasService.getObject("film-image", "overlay");
-        if (img) {
-          layer.remove(img);
-          this.canvasService.requestRenderAll();
-        }
-      }
-      this.canvasService = undefined;
-    }
-  }
-
-  contribute() {
-    return {
-      [ContributionPointIds.CONFIGURATIONS]: [
-        {
-          id: "film.url",
-          type: "string",
-          label: "Film Image URL",
-          default: "",
-        },
-        {
-          id: "film.opacity",
-          type: "number",
-          label: "Opacity",
-          min: 0,
-          max: 1,
-          step: 0.1,
-          default: 0.5,
-        },
-      ] as ConfigurationContribution[],
-      [ContributionPointIds.COMMANDS]: [
-        {
-          command: "setFilmImage",
-          title: "Set Film Image",
-          handler: (url: string, opacity: number) => {
-            if (this.url === url && this.opacity === opacity) return true;
-
-            this.url = url;
-            this.opacity = opacity;
-
-            this.updateFilm();
-
-            return true;
-          },
-        },
-      ] as CommandContribution[],
-    };
-  }
-
-  private initLayer() {
-    if (!this.canvasService) return;
-    let overlayLayer = this.canvasService.getLayer("overlay");
-    if (!overlayLayer) {
-      const width = this.canvasService.canvas.width || 800;
-      const height = this.canvasService.canvas.height || 600;
-
-      const layer = this.canvasService.createLayer("overlay", {
-        width,
-        height,
-        left: 0,
-        top: 0,
-        originX: "left",
-        originY: "top",
-        selectable: false,
-        evented: false,
-        subTargetCheck: false,
-        interactive: false,
-      });
-
-      this.canvasService.canvas.bringObjectToFront(layer);
-    }
-  }
-
-  private async updateFilm() {
-    if (!this.canvasService) return;
-    const layer = this.canvasService.getLayer("overlay");
-    if (!layer) {
-      console.warn("[FilmTool] Overlay layer not found");
-      return;
-    }
-
-    const { url, opacity } = this;
-
-    if (!url) {
-      const img = this.canvasService.getObject("film-image", "overlay");
-      if (img) {
-        layer.remove(img);
-        this.canvasService.requestRenderAll();
-      }
-      return;
-    }
-
-    const width = this.canvasService.canvas.width || 800;
-    const height = this.canvasService.canvas.height || 600;
-
-    let img = this.canvasService.getObject("film-image", "overlay") as Image;
-    try {
-      if (img) {
-        if (img.getSrc() !== url) {
-          await img.setSrc(url);
-        }
-        img.set({ opacity });
-      } else {
-        img = await Image.fromURL(url, { crossOrigin: "anonymous" });
-        img.scaleToWidth(width);
-        if (img.getScaledHeight() < height) img.scaleToHeight(height);
-        img.set({
-          originX: "left",
-          originY: "top",
-          left: 0,
-          top: 0,
-          opacity,
-          selectable: false,
-          evented: false,
-          data: { id: "film-image" },
-        });
-        layer.add(img);
-      }
-      this.canvasService.requestRenderAll();
-    } catch (error) {
-      console.error("[FilmTool] Failed to load film image", url, error);
-    }
-    layer.dirty = true;
-    this.canvasService.requestRenderAll();
-  }
-}
+import {
+  Extension,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationContribution,
+} from "@pooder/core";
+import { FabricImage as Image } from "fabric";
+import CanvasService from "./CanvasService";
+
+export class FilmTool implements Extension {
+  id = "pooder.kit.film";
+
+  public metadata = {
+    name: "FilmTool",
+  };
+
+  private url: string = "";
+  private opacity: number = 0.5;
+
+  private canvasService?: CanvasService;
+
+  constructor(
+    options?: Partial<{
+      url: string;
+      opacity: number;
+    }>,
+  ) {
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+
+  activate(context: ExtensionContext) {
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for FilmTool");
+      return;
+    }
+
+    const configService = context.services.get<any>("ConfigurationService");
+    if (configService) {
+      // Load initial config
+      this.url = configService.get("film.url", this.url);
+      this.opacity = configService.get("film.opacity", this.opacity);
+
+      // Listen for changes
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (e.key.startsWith("film.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[FilmTool] Config change detected: ${e.key} -> ${e.value}`,
+          );
+          if (prop && prop in this) {
+            (this as any)[prop] = e.value;
+            this.updateFilm();
+          }
+        }
+      });
+    }
+
+    this.initLayer();
+    this.updateFilm();
+  }
+
+  deactivate(context: ExtensionContext) {
+    if (this.canvasService) {
+      const layer = this.canvasService.getLayer("overlay");
+      if (layer) {
+        const img = this.canvasService.getObject("film-image", "overlay");
+        if (img) {
+          layer.remove(img);
+          this.canvasService.requestRenderAll();
+        }
+      }
+      this.canvasService = undefined;
+    }
+  }
+
+  contribute() {
+    return {
+      [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "film.url",
+          type: "string",
+          label: "Film Image URL",
+          default: "",
+        },
+        {
+          id: "film.opacity",
+          type: "number",
+          label: "Opacity",
+          min: 0,
+          max: 1,
+          step: 0.1,
+          default: 0.5,
+        },
+      ] as ConfigurationContribution[],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "setFilmImage",
+          title: "Set Film Image",
+          handler: (url: string, opacity: number) => {
+            if (this.url === url && this.opacity === opacity) return true;
+
+            this.url = url;
+            this.opacity = opacity;
+
+            this.updateFilm();
+
+            return true;
+          },
+        },
+      ] as CommandContribution[],
+    };
+  }
+
+  private initLayer() {
+    if (!this.canvasService) return;
+    let overlayLayer = this.canvasService.getLayer("overlay");
+    if (!overlayLayer) {
+      const width = this.canvasService.canvas.width || 800;
+      const height = this.canvasService.canvas.height || 600;
+
+      const layer = this.canvasService.createLayer("overlay", {
+        width,
+        height,
+        left: 0,
+        top: 0,
+        originX: "left",
+        originY: "top",
+        selectable: false,
+        evented: false,
+        subTargetCheck: false,
+        interactive: false,
+      });
+
+      this.canvasService.canvas.bringObjectToFront(layer);
+    }
+  }
+
+  private async updateFilm() {
+    if (!this.canvasService) return;
+    const layer = this.canvasService.getLayer("overlay");
+    if (!layer) {
+      console.warn("[FilmTool] Overlay layer not found");
+      return;
+    }
+
+    const { url, opacity } = this;
+
+    if (!url) {
+      const img = this.canvasService.getObject("film-image", "overlay");
+      if (img) {
+        layer.remove(img);
+        this.canvasService.requestRenderAll();
+      }
+      return;
+    }
+
+    const width = this.canvasService.canvas.width || 800;
+    const height = this.canvasService.canvas.height || 600;
+
+    let img = this.canvasService.getObject("film-image", "overlay") as Image;
+    try {
+      if (img) {
+        if (img.getSrc() !== url) {
+          await img.setSrc(url);
+        }
+        img.set({ opacity });
+      } else {
+        img = await Image.fromURL(url, { crossOrigin: "anonymous" });
+        img.scaleToWidth(width);
+        if (img.getScaledHeight() < height) img.scaleToHeight(height);
+        img.set({
+          originX: "left",
+          originY: "top",
+          left: 0,
+          top: 0,
+          opacity,
+          selectable: false,
+          evented: false,
+          data: { id: "film-image" },
+        });
+        layer.add(img);
+      }
+      this.canvasService.requestRenderAll();
+    } catch (error) {
+      console.error("[FilmTool] Failed to load film image", url, error);
+    }
+    layer.dirty = true;
+    this.canvasService.requestRenderAll();
+  }
+}