@pooder/kit 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Standard plugins for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -23,6 +23,7 @@
   },
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "test": "tsc -p tsconfig.test.json && node .test-dist/tests/run.js"
   }
 }

package/src/CanvasService.ts

@@ -1,8 +1,10 @@
 import { Canvas, Group, FabricObject } from "fabric";
 import { Service, EventBus } from "@pooder/core";
+import { ViewportSystem } from "./ViewportSystem";
 
 export default class CanvasService implements Service {
   public canvas: Canvas;
+  public viewport: ViewportSystem;
   private eventBus?: EventBus;
 
   constructor(el: HTMLCanvasElement | string | Canvas, options?: any) {
@@ -14,6 +16,11 @@ export default class CanvasService implements Service {
         ...options,
       });
     }
+
+    this.viewport = new ViewportSystem();
+    if (this.canvas.width !== undefined && this.canvas.height !== undefined) {
+      this.viewport.updateContainer(this.canvas.width, this.canvas.height);
+    }
     
     if (options?.eventBus) {
       this.setEventBus(options.eventBus);

package/src/ViewportSystem.ts

@@ -0,0 +1,92 @@
+import { Coordinate, Layout, Point, Size } from "./coordinate";
+
+export class ViewportSystem {
+  private _containerSize: Size = { width: 0, height: 0 };
+  private _physicalSize: Size = { width: 0, height: 0 };
+  private _padding: number = 0;
+  private _layout: Layout = {
+    scale: 1,
+    offsetX: 0,
+    offsetY: 0,
+    width: 0,
+    height: 0,
+  };
+
+  constructor(
+    containerSize: Size = { width: 0, height: 0 },
+    physicalSize: Size = { width: 0, height: 0 },
+    padding: number = 40,
+  ) {
+    this._containerSize = containerSize;
+    this._physicalSize = physicalSize;
+    this._padding = padding;
+    this.updateLayout();
+  }
+
+  get layout(): Layout {
+    return this._layout;
+  }
+
+  get scale(): number {
+    return this._layout.scale;
+  }
+
+  get offset(): Point {
+    return { x: this._layout.offsetX, y: this._layout.offsetY };
+  }
+
+  updateContainer(width: number, height: number) {
+    if (
+      this._containerSize.width === width &&
+      this._containerSize.height === height
+    )
+      return;
+    this._containerSize = { width, height };
+    this.updateLayout();
+  }
+
+  updatePhysical(width: number, height: number) {
+    if (this._physicalSize.width === width && this._physicalSize.height === height)
+      return;
+    this._physicalSize = { width, height };
+    this.updateLayout();
+  }
+
+  setPadding(padding: number) {
+    if (this._padding === padding) return;
+    this._padding = padding;
+    this.updateLayout();
+  }
+
+  private updateLayout() {
+    this._layout = Coordinate.calculateLayout(
+      this._containerSize,
+      this._physicalSize,
+      this._padding,
+    );
+  }
+
+  toPixel(value: number): number {
+    return value * this._layout.scale;
+  }
+
+  toPhysical(value: number): number {
+    return this._layout.scale === 0 ? 0 : value / this._layout.scale;
+  }
+
+  toPixelPoint(point: Point): Point {
+    return {
+      x: point.x * this._layout.scale + this._layout.offsetX,
+      y: point.y * this._layout.scale + this._layout.offsetY,
+    };
+  }
+
+  // Convert screen coordinate (e.g. mouse event) to physical coordinate (relative to content origin)
+  toPhysicalPoint(point: Point): Point {
+    if (this._layout.scale === 0) return { x: 0, y: 0 };
+    return {
+      x: (point.x - this._layout.offsetX) / this._layout.scale,
+      y: (point.y - this._layout.offsetY) / this._layout.scale,
+    };
+  }
+}

package/src/constraints.ts

@@ -1,14 +1,29 @@
-import { DielineFeature } from "./geometry";
-
 export interface ConstraintContext {
   dielineWidth: number;
   dielineHeight: number;
 }
 
+export interface ConstraintFeature {
+  id: string;
+  groupId?: string;
+  operation: "add" | "subtract";
+  shape: "rect" | "circle";
+  x: number;
+  y: number;
+  width?: number;
+  height?: number;
+  radius?: number;
+  placement?: "edge" | "internal";
+  constraints?: {
+    type: string;
+    params?: any;
+  };
+}
+
 export type ConstraintHandler = (
   x: number,
   y: number,
-  feature: DielineFeature,
+  feature: ConstraintFeature,
   context: ConstraintContext
 ) => { x: number; y: number };
 
@@ -22,7 +37,7 @@ export class ConstraintRegistry {
   static apply(
     x: number,
     y: number,
-    feature: DielineFeature,
+    feature: ConstraintFeature,
     context: ConstraintContext
   ): { x: number; y: number } {
     if (!feature.constraints || !feature.constraints.type) {
@@ -153,6 +168,40 @@ const internalConstraint: ConstraintHandler = (x, y, feature, context) => {
   return { x: clampedX, y: clampedY };
 };
 
+/**
+ * Bottom Tangent Strategy (stand protrusion)
+ * Forces a feature to be tangent to the dieline bottom edge from outside (below).
+ * Params:
+ * - gap: number (mm, default 0) extra clearance between dieline and protrusion
+ * - confineX: boolean (default true) keep feature within left/right bounds
+ */
+const tangentBottomConstraint: ConstraintHandler = (x, y, feature, context) => {
+  const { dielineWidth, dielineHeight } = context;
+  const params = feature.constraints?.params || {};
+  const gap = params.gap || 0;
+  const confineX = params.confineX !== false;
+
+  const extentY =
+    feature.shape === "circle"
+      ? feature.radius || 0
+      : (feature.height || 0) / 2;
+  const newY = 1 + (extentY + gap) / dielineHeight;
+
+  let newX = x;
+  if (confineX) {
+    const extentX =
+      feature.shape === "circle"
+        ? feature.radius || 0
+        : (feature.width || 0) / 2;
+    const minX = extentX / dielineWidth;
+    const maxX = 1 - extentX / dielineWidth;
+    newX = minX > maxX ? 0.5 : Math.max(minX, Math.min(newX, maxX));
+  }
+
+  return { x: newX, y: newY };
+};
+
 // Register built-ins
 ConstraintRegistry.register("edge", edgeConstraint);
 ConstraintRegistry.register("internal", internalConstraint);
+ConstraintRegistry.register("tangent-bottom", tangentBottomConstraint);

package/src/dieline.ts

@@ -8,7 +8,8 @@ import {
 import { Path, Pattern } from "fabric";
 import CanvasService from "./CanvasService";
 import { ImageTracer } from "./tracer";
-import { Coordinate, Unit } from "./coordinate";
+import { Unit } from "./coordinate";
+import { parseLengthToMm } from "./units";
 import {
   generateDielinePath,
   generateMaskPath,
@@ -16,11 +17,11 @@ import {
   getPathBounds,
   DielineFeature,
 } from "./geometry";
-import { ConstraintRegistry } from "./constraints";
 
 export interface DielineGeometry {
   shape: "rect" | "circle" | "ellipse" | "custom";
-  unit: Unit;
+  unit: "mm";
+  displayUnit: Unit;
   x: number;
   y: number;
   width: number;
@@ -41,7 +42,7 @@ export interface LineStyle {
 }
 
 export interface DielineState {
-  unit: Unit;
+  displayUnit: Unit;
   shape: "rect" | "circle" | "ellipse" | "custom";
   width: number;
   height: number;
@@ -64,7 +65,7 @@ export class DielineTool implements Extension {
   };
 
   private state: DielineState = {
-    unit: "mm",
+    displayUnit: "mm",
     shape: "rect",
     width: 500,
     height: 500,
@@ -119,61 +120,138 @@ export class DielineTool implements Extension {
     if (configService) {
       // Load initial config
       const s = this.state;
-      s.unit = configService.get("dieline.unit", s.unit);
+      s.displayUnit = configService.get("dieline.displayUnit", s.displayUnit);
       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.width = parseLengthToMm(
+        configService.get("dieline.width", s.width),
+        "mm",
+      );
+      s.height = parseLengthToMm(
+        configService.get("dieline.height", s.height),
+        "mm",
+      );
+      s.radius = parseLengthToMm(
+        configService.get("dieline.radius", s.radius),
+        "mm",
+      );
       s.padding = configService.get("dieline.padding", s.padding);
-      s.offset = configService.get("dieline.offset", s.offset);
-      
+      s.offset = parseLengthToMm(
+        configService.get("dieline.offset", s.offset),
+        "mm",
+      );
+
       // 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.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.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.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.")) {
-          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;
+            case "dieline.displayUnit":
+              s.displayUnit = e.value;
+              break;
+            case "dieline.shape":
+              s.shape = e.value;
+              break;
+            case "dieline.width":
+              s.width = parseLengthToMm(e.value, "mm");
+              break;
+            case "dieline.height":
+              s.height = parseLengthToMm(e.value, "mm");
+              break;
+            case "dieline.radius":
+              s.radius = parseLengthToMm(e.value, "mm");
+              break;
+            case "dieline.padding":
+              s.padding = e.value;
+              break;
+            case "dieline.offset":
+              s.offset = parseLengthToMm(e.value, "mm");
+              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();
         }
@@ -195,11 +273,11 @@ export class DielineTool implements Extension {
     return {
       [ContributionPointIds.CONFIGURATIONS]: [
         {
-          id: "dieline.unit",
+          id: "dieline.displayUnit",
           type: "select",
-          label: "Unit",
-          options: ["px", "mm", "cm", "in"],
-          default: s.unit,
+          label: "Display Unit",
+          options: ["mm", "cm", "in"],
+          default: s.displayUnit,
         },
         {
           id: "dieline.shape",
@@ -211,7 +289,7 @@ export class DielineTool implements Extension {
         {
           id: "dieline.width",
           type: "number",
-          label: "Width",
+          label: "Width (mm)",
           min: 10,
           max: 2000,
           default: s.width,
@@ -219,7 +297,7 @@ export class DielineTool implements Extension {
         {
           id: "dieline.height",
           type: "number",
-          label: "Height",
+          label: "Height (mm)",
           min: 10,
           max: 2000,
           default: s.height,
@@ -227,7 +305,7 @@ export class DielineTool implements Extension {
         {
           id: "dieline.radius",
           type: "number",
-          label: "Corner Radius",
+          label: "Corner Radius (mm)",
           min: 0,
           max: 500,
           default: s.radius,
@@ -242,7 +320,7 @@ export class DielineTool implements Extension {
         {
           id: "dieline.offset",
           type: "number",
-          label: "Bleed Offset",
+          label: "Bleed Offset (mm)",
           min: -100,
           max: 100,
           default: s.offset,
@@ -343,20 +421,13 @@ export class DielineTool implements Extension {
             if (!configService) return;
 
             const features = configService.get("dieline.features") || [];
-            const dielineWidth = configService.get("dieline.width") || 500;
-            const dielineHeight = configService.get("dieline.height") || 500;
 
             let changed = false;
             const newFeatures = features.map((f: any) => {
               if (f.groupId === groupId) {
-                const constrained = ConstraintRegistry.apply(x, y, f, {
-                  dielineWidth,
-                  dielineHeight,
-                });
-
-                if (f.x !== constrained.x || f.y !== constrained.y) {
+                if (f.x !== x || f.y !== y) {
                   changed = true;
-                  return { ...f, x: constrained.x, y: constrained.y };
+                  return { ...f, x, y };
                 }
               }
               return f;
@@ -494,7 +565,7 @@ export class DielineTool implements Extension {
     if (!layer) return;
 
     const {
-      unit,
+      displayUnit,
       shape,
       radius,
       offset,
@@ -505,7 +576,7 @@ export class DielineTool implements Extension {
       showBleedLines,
       features,
     } = this.state;
-    let { width, height } = this.state;
+    const { width, height } = this.state;
 
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
@@ -513,11 +584,12 @@ export class DielineTool implements Extension {
     // Calculate Layout based on Physical Dimensions and Canvas Size
     // Add padding to avoid edge hugging
     const paddingPx = this.resolvePadding(canvasW, canvasH);
-    const layout = Coordinate.calculateLayout(
-      { width: canvasW, height: canvasH },
-      { width, height },
-      paddingPx,
-    );
+
+    // Update Viewport System
+    this.canvasService.viewport.setPadding(paddingPx);
+    this.canvasService.viewport.updatePhysical(width, height);
+
+    const layout = this.canvasService.viewport.layout;
 
     const scale = layout.scale;
     const cx = layout.offsetX + layout.width / 2;
@@ -534,7 +606,6 @@ export class DielineTool implements Extension {
 
     // 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 {
@@ -709,7 +780,9 @@ export class DielineTool implements Extension {
       stroke: mainLine.style === "hidden" ? null : mainLine.color,
       strokeWidth: mainLine.width,
       strokeDashArray:
-        mainLine.style === "dashed" ? [mainLine.dashLength, mainLine.dashLength] : undefined,
+        mainLine.style === "dashed"
+          ? [mainLine.dashLength, mainLine.dashLength]
+          : undefined,
       selectable: false,
       evented: false,
       originX: "left",
@@ -753,16 +826,26 @@ export class DielineTool implements Extension {
 
   public getGeometry(): DielineGeometry | null {
     if (!this.canvasService) return null;
-    const { unit, shape, width, height, radius, offset, mainLine, pathData } = this.state;
+    const {
+      displayUnit,
+      shape,
+      width,
+      height,
+      radius,
+      offset,
+      mainLine,
+      pathData,
+    } = this.state;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
 
     const paddingPx = this.resolvePadding(canvasW, canvasH);
-    const layout = Coordinate.calculateLayout(
-      { width: canvasW, height: canvasH },
-      { width, height },
-      paddingPx,
-    );
+
+    // Update Viewport System (Ensure it's up to date)
+    this.canvasService.viewport.setPadding(paddingPx);
+    this.canvasService.viewport.updatePhysical(width, height);
+
+    const layout = this.canvasService.viewport.layout;
 
     const scale = layout.scale;
     const cx = layout.offsetX + layout.width / 2;
@@ -773,14 +856,14 @@ export class DielineTool implements Extension {
 
     return {
       shape,
-      unit,
+      unit: "mm",
+      displayUnit,
       x: cx,
       y: cy,
       width: visualWidth,
       height: visualHeight,
       radius: radius * scale,
       offset: offset * scale,
-      // Pass scale to help other tools (like FeatureTool) convert units
       scale,
       strokeWidth: mainLine.width,
       pathData,
@@ -794,16 +877,17 @@ export class DielineTool implements Extension {
     if (!userLayer) return null;
 
     // 1. Generate Path Data
-    const { shape, width, height, radius, features, unit, pathData } = this.state;
+    const { shape, width, height, radius, features, pathData } = this.state;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
 
     const paddingPx = this.resolvePadding(canvasW, canvasH);
-    const layout = Coordinate.calculateLayout(
-      { width: canvasW, height: canvasH },
-      { width, height },
-      paddingPx,
-    );
+
+    // Update Viewport System
+    this.canvasService.viewport.setPadding(paddingPx);
+    this.canvasService.viewport.updatePhysical(width, height);
+
+    const layout = this.canvasService.viewport.layout;
     const scale = layout.scale;
     const cx = layout.offsetX + layout.width / 2;
     const cy = layout.offsetY + layout.height / 2;