@pooder/kit 4.0.0 → 4.1.0

package/src/background.ts

@@ -1,230 +1,230 @@
-import {
-  Extension,
-  ExtensionContext,
-  ContributionPointIds,
-  CommandContribution,
-  ConfigurationContribution,
-} from "@pooder/core";
-import { Rect, FabricImage as Image } from "fabric";
-import CanvasService from "./CanvasService";
-
-export class BackgroundTool implements Extension {
-  id = "pooder.kit.background";
-  public metadata = {
-    name: "BackgroundTool",
-  };
-
-  private color: string = "";
-  private url: string = "";
-
-  private canvasService?: CanvasService;
-
-  constructor(
-    options?: Partial<{
-      color: string;
-      url: string;
-    }>,
-  ) {
-    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 BackgroundTool");
-      return;
-    }
-
-    const configService = context.services.get<any>("ConfigurationService");
-    if (configService) {
-      // Load initial config
-      this.color = configService.get("background.color", this.color);
-      this.url = configService.get("background.url", this.url);
-
-      // Listen for changes
-      configService.onAnyChange((e: { key: string; value: any }) => {
-        if (e.key.startsWith("background.")) {
-          const prop = e.key.split(".")[1];
-          console.log(
-            `[BackgroundTool] Config change detected: ${e.key} -> ${e.value}, prop: ${prop}`,
-          );
-          if (prop && prop in this) {
-            console.log(
-              `[BackgroundTool] Updating option ${prop} to ${e.value}`,
-            );
-            (this as any)[prop] = e.value;
-            this.updateBackground();
-          } else {
-            console.warn(
-              `[BackgroundTool] Property ${prop} not found in options`,
-            );
-          }
-        }
-      });
-    }
-
-    this.initLayer();
-    this.updateBackground();
-  }
-
-  deactivate(context: ExtensionContext) {
-    if (this.canvasService) {
-      const layer = this.canvasService.getLayer("background");
-      if (layer) {
-        this.canvasService.canvas.remove(layer);
-      }
-      this.canvasService = undefined;
-    }
-  }
-
-  contribute() {
-    return {
-      [ContributionPointIds.CONFIGURATIONS]: [
-        {
-          id: "background.color",
-          type: "color",
-          label: "Background Color",
-          default: "",
-        },
-        {
-          id: "background.url",
-          type: "string",
-          label: "Image URL",
-          default: "",
-        },
-      ] as ConfigurationContribution[],
-      [ContributionPointIds.COMMANDS]: [
-        {
-          command: "reset",
-          title: "Reset Background",
-          handler: () => {
-            this.updateBackground();
-            return true;
-          },
-        },
-        {
-          command: "clear",
-          title: "Clear Background",
-          handler: () => {
-            this.color = "transparent";
-            this.url = "";
-            this.updateBackground();
-            return true;
-          },
-        },
-        {
-          command: "setBackgroundColor",
-          title: "Set Background Color",
-          handler: (color: string) => {
-            if (this.color === color) return true;
-            this.color = color;
-            this.updateBackground();
-            return true;
-          },
-        },
-        {
-          command: "setBackgroundImage",
-          title: "Set Background Image",
-          handler: (url: string) => {
-            if (this.url === url) return true;
-            this.url = url;
-            this.updateBackground();
-            return true;
-          },
-        },
-      ] as CommandContribution[],
-    };
-  }
-
-  private initLayer() {
-    if (!this.canvasService) return;
-    let backgroundLayer = this.canvasService.getLayer("background");
-    if (!backgroundLayer) {
-      backgroundLayer = this.canvasService.createLayer("background", {
-        width: this.canvasService.canvas.width,
-        height: this.canvasService.canvas.height,
-        selectable: false,
-        evented: false,
-      });
-      this.canvasService.canvas.sendObjectToBack(backgroundLayer);
-    }
-  }
-
-  private async updateBackground() {
-    if (!this.canvasService) return;
-    const layer = this.canvasService.getLayer("background");
-    if (!layer) {
-      console.warn("[BackgroundTool] Background layer not found");
-      return;
-    }
-
-    const { color, url } = this;
-
-    const width = this.canvasService.canvas.width || 800;
-    const height = this.canvasService.canvas.height || 600;
-
-    let rect = this.canvasService.getObject(
-      "background-color-rect",
-      "background",
-    ) as Rect;
-    if (rect) {
-      rect.set({
-        fill: color,
-      });
-    } else {
-      rect = new Rect({
-        width,
-        height,
-        fill: color,
-        selectable: false,
-        evented: false,
-        data: {
-          id: "background-color-rect",
-        },
-      });
-      layer.add(rect);
-      layer.sendObjectToBack(rect);
-    }
-
-    let img = this.canvasService.getObject(
-      "background-image",
-      "background",
-    ) as Image;
-    try {
-      if (img) {
-        if (img.getSrc() !== url) {
-          if (url) {
-            await img.setSrc(url);
-          } else {
-            layer.remove(img);
-          }
-        }
-      } else {
-        if (url) {
-          img = await Image.fromURL(url, { crossOrigin: "anonymous" });
-          img.set({
-            originX: "left",
-            originY: "top",
-            left: 0,
-            top: 0,
-            selectable: false,
-            evented: false,
-            data: {
-              id: "background-image",
-            },
-          });
-          img.scaleToWidth(width);
-          if (img.getScaledHeight() < height) img.scaleToHeight(height);
-          layer.add(img);
-        }
-      }
-      this.canvasService.requestRenderAll();
-    } catch (e) {
-      console.error("[BackgroundTool] Failed to load image", e);
-    }
-    layer.dirty = true;
-    this.canvasService.requestRenderAll();
-  }
-}
+import {
+  Extension,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationContribution,
+} from "@pooder/core";
+import { Rect, FabricImage as Image } from "fabric";
+import CanvasService from "./CanvasService";
+
+export class BackgroundTool implements Extension {
+  id = "pooder.kit.background";
+  public metadata = {
+    name: "BackgroundTool",
+  };
+
+  private color: string = "";
+  private url: string = "";
+
+  private canvasService?: CanvasService;
+
+  constructor(
+    options?: Partial<{
+      color: string;
+      url: string;
+    }>,
+  ) {
+    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 BackgroundTool");
+      return;
+    }
+
+    const configService = context.services.get<any>("ConfigurationService");
+    if (configService) {
+      // Load initial config
+      this.color = configService.get("background.color", this.color);
+      this.url = configService.get("background.url", this.url);
+
+      // Listen for changes
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (e.key.startsWith("background.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[BackgroundTool] Config change detected: ${e.key} -> ${e.value}, prop: ${prop}`,
+          );
+          if (prop && prop in this) {
+            console.log(
+              `[BackgroundTool] Updating option ${prop} to ${e.value}`,
+            );
+            (this as any)[prop] = e.value;
+            this.updateBackground();
+          } else {
+            console.warn(
+              `[BackgroundTool] Property ${prop} not found in options`,
+            );
+          }
+        }
+      });
+    }
+
+    this.initLayer();
+    this.updateBackground();
+  }
+
+  deactivate(context: ExtensionContext) {
+    if (this.canvasService) {
+      const layer = this.canvasService.getLayer("background");
+      if (layer) {
+        this.canvasService.canvas.remove(layer);
+      }
+      this.canvasService = undefined;
+    }
+  }
+
+  contribute() {
+    return {
+      [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "background.color",
+          type: "color",
+          label: "Background Color",
+          default: "",
+        },
+        {
+          id: "background.url",
+          type: "string",
+          label: "Image URL",
+          default: "",
+        },
+      ] as ConfigurationContribution[],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "reset",
+          title: "Reset Background",
+          handler: () => {
+            this.updateBackground();
+            return true;
+          },
+        },
+        {
+          command: "clear",
+          title: "Clear Background",
+          handler: () => {
+            this.color = "transparent";
+            this.url = "";
+            this.updateBackground();
+            return true;
+          },
+        },
+        {
+          command: "setBackgroundColor",
+          title: "Set Background Color",
+          handler: (color: string) => {
+            if (this.color === color) return true;
+            this.color = color;
+            this.updateBackground();
+            return true;
+          },
+        },
+        {
+          command: "setBackgroundImage",
+          title: "Set Background Image",
+          handler: (url: string) => {
+            if (this.url === url) return true;
+            this.url = url;
+            this.updateBackground();
+            return true;
+          },
+        },
+      ] as CommandContribution[],
+    };
+  }
+
+  private initLayer() {
+    if (!this.canvasService) return;
+    let backgroundLayer = this.canvasService.getLayer("background");
+    if (!backgroundLayer) {
+      backgroundLayer = this.canvasService.createLayer("background", {
+        width: this.canvasService.canvas.width,
+        height: this.canvasService.canvas.height,
+        selectable: false,
+        evented: false,
+      });
+      this.canvasService.canvas.sendObjectToBack(backgroundLayer);
+    }
+  }
+
+  private async updateBackground() {
+    if (!this.canvasService) return;
+    const layer = this.canvasService.getLayer("background");
+    if (!layer) {
+      console.warn("[BackgroundTool] Background layer not found");
+      return;
+    }
+
+    const { color, url } = this;
+
+    const width = this.canvasService.canvas.width || 800;
+    const height = this.canvasService.canvas.height || 600;
+
+    let rect = this.canvasService.getObject(
+      "background-color-rect",
+      "background",
+    ) as Rect;
+    if (rect) {
+      rect.set({
+        fill: color,
+      });
+    } else {
+      rect = new Rect({
+        width,
+        height,
+        fill: color,
+        selectable: false,
+        evented: false,
+        data: {
+          id: "background-color-rect",
+        },
+      });
+      layer.add(rect);
+      layer.sendObjectToBack(rect);
+    }
+
+    let img = this.canvasService.getObject(
+      "background-image",
+      "background",
+    ) as Image;
+    try {
+      if (img) {
+        if (img.getSrc() !== url) {
+          if (url) {
+            await img.setSrc(url);
+          } else {
+            layer.remove(img);
+          }
+        }
+      } else {
+        if (url) {
+          img = await Image.fromURL(url, { crossOrigin: "anonymous" });
+          img.set({
+            originX: "left",
+            originY: "top",
+            left: 0,
+            top: 0,
+            selectable: false,
+            evented: false,
+            data: {
+              id: "background-image",
+            },
+          });
+          img.scaleToWidth(width);
+          if (img.getScaledHeight() < height) img.scaleToHeight(height);
+          layer.add(img);
+        }
+      }
+      this.canvasService.requestRenderAll();
+    } catch (e) {
+      console.error("[BackgroundTool] Failed to load image", e);
+    }
+    layer.dirty = true;
+    this.canvasService.requestRenderAll();
+  }
+}

package/src/constraints.ts

@@ -0,0 +1,158 @@
+import { DielineFeature } from "./geometry";
+
+export interface ConstraintContext {
+  dielineWidth: number;
+  dielineHeight: number;
+}
+
+export type ConstraintHandler = (
+  x: number,
+  y: number,
+  feature: DielineFeature,
+  context: ConstraintContext
+) => { x: number; y: number };
+
+export class ConstraintRegistry {
+  private static handlers = new Map<string, ConstraintHandler>();
+
+  static register(type: string, handler: ConstraintHandler) {
+    this.handlers.set(type, handler);
+  }
+
+  static apply(
+    x: number,
+    y: number,
+    feature: DielineFeature,
+    context: ConstraintContext
+  ): { x: number; y: number } {
+    if (!feature.constraints || !feature.constraints.type) {
+      return { x, y };
+    }
+
+    const handler = this.handlers.get(feature.constraints.type);
+    if (handler) {
+      return handler(x, y, feature, context);
+    }
+
+    return { x, y };
+  }
+}
+
+// --- Built-in Strategies ---
+
+/**
+ * Edge Constraint Strategy
+ * Snaps the feature to the nearest allowed edge.
+ * Params:
+ * - allowedEdges: ('top' | 'bottom' | 'left' | 'right')[] (default: all)
+ * - confine: boolean (default: false) - if true, keeps feature within edge length
+ * - offset: number (default: 0) - physical offset from edge (positive = inwards usually, but here 0 is edge)
+ *   For simplicity, let's say offset is additive to the edge position.
+ *   Top: 0 + offset
+ *   Bottom: 1 - offset
+ *   Left: 0 + offset
+ *   Right: 1 - offset
+ */
+const edgeConstraint: ConstraintHandler = (x, y, feature, context) => {
+  const { dielineWidth, dielineHeight } = context;
+  const params = feature.constraints?.params || {};
+  const allowedEdges = params.allowedEdges || [
+    "top",
+    "bottom",
+    "left",
+    "right",
+  ];
+  const confine = params.confine || false;
+  const offset = params.offset || 0;
+
+  // Calculate physical distances to allowed edges
+  const distances: { edge: string; dist: number }[] = [];
+
+  if (allowedEdges.includes("top"))
+    distances.push({ edge: "top", dist: y * dielineHeight });
+  if (allowedEdges.includes("bottom"))
+    distances.push({ edge: "bottom", dist: (1 - y) * dielineHeight });
+  if (allowedEdges.includes("left"))
+    distances.push({ edge: "left", dist: x * dielineWidth });
+  if (allowedEdges.includes("right"))
+    distances.push({ edge: "right", dist: (1 - x) * dielineWidth });
+
+  if (distances.length === 0) return { x, y };
+
+  // Find nearest
+  distances.sort((a, b) => a.dist - b.dist);
+  const nearest = distances[0].edge;
+
+  let newX = x;
+  let newY = y;
+  const fw = feature.width || 0;
+  const fh = feature.height || 0;
+
+  // Snap to edge
+  switch (nearest) {
+    case "top":
+      newY = 0 + offset / dielineHeight;
+      if (confine) {
+        const minX = (fw / 2) / dielineWidth;
+        const maxX = 1 - minX;
+        newX = Math.max(minX, Math.min(newX, maxX));
+      }
+      break;
+    case "bottom":
+      newY = 1 - offset / dielineHeight;
+      if (confine) {
+        const minX = (fw / 2) / dielineWidth;
+        const maxX = 1 - minX;
+        newX = Math.max(minX, Math.min(newX, maxX));
+      }
+      break;
+    case "left":
+      newX = 0 + offset / dielineWidth;
+      if (confine) {
+        const minY = (fh / 2) / dielineHeight;
+        const maxY = 1 - minY;
+        newY = Math.max(minY, Math.min(newY, maxY));
+      }
+      break;
+    case "right":
+      newX = 1 - offset / dielineWidth;
+      if (confine) {
+        const minY = (fh / 2) / dielineHeight;
+        const maxY = 1 - minY;
+        newY = Math.max(minY, Math.min(newY, maxY));
+      }
+      break;
+  }
+
+  return { x: newX, y: newY };
+};
+
+/**
+ * Internal Constraint Strategy
+ * Keeps the feature strictly inside the dieline bounds with optional margin.
+ * Params:
+ * - margin: number (default: 0) - physical margin
+ */
+const internalConstraint: ConstraintHandler = (x, y, feature, context) => {
+  const { dielineWidth, dielineHeight } = context;
+  const params = feature.constraints?.params || {};
+  const margin = params.margin || 0;
+  const fw = feature.width || 0;
+  const fh = feature.height || 0;
+
+  const minX = (margin + fw / 2) / dielineWidth;
+  const maxX = 1 - (margin + fw / 2) / dielineWidth;
+  
+  const minY = (margin + fh / 2) / dielineHeight;
+  const maxY = 1 - (margin + fh / 2) / dielineHeight;
+
+  // Handle case where feature is larger than container
+  const clampedX = minX > maxX ? 0.5 : Math.max(minX, Math.min(x, maxX));
+  const clampedY = minY > maxY ? 0.5 : Math.max(minY, Math.min(y, maxY));
+
+  return { x: clampedX, y: clampedY };
+};
+
+// Register built-ins
+ConstraintRegistry.register("edge", edgeConstraint);
+ConstraintRegistry.register("internal", internalConstraint);