@pooder/kit 6.1.2 → 6.2.1

package/src/extensions/image/ImageTool.ts

@@ -10,7 +10,6 @@ import {
   Canvas as FabricCanvas,
   Control,
   Image as FabricImage,
-  Path as FabricPath,
   Pattern,
   Point,
   controlsUtils,
@@ -177,9 +176,6 @@ const IMAGE_DEFAULT_CONTROL_CAPABILITIES: ImageControlCapability[] = [
 ];
 
 const IMAGE_MOVE_SNAP_THRESHOLD_PX = 6;
-const IMAGE_MOVE_SNAP_RELEASE_THRESHOLD_PX = 10;
-const IMAGE_SNAP_GUIDE_LAYER_ID = "image.snapGuide";
-
 const IMAGE_CONTROL_DESCRIPTORS: ImageControlDescriptor[] = [
   {
     key: "tl",
@@ -236,9 +232,12 @@ export class ImageTool implements Extension {
   private overlaySpecs: RenderObjectSpec[] = [];
   private activeSnapX: SnapMatch | null = null;
   private activeSnapY: SnapMatch | null = null;
-  private snapGuideXObject?: FabricPath;
-  private snapGuideYObject?: FabricPath;
+  private movingImageId: string | null = null;
+  private hasRenderedSnapGuides = false;
   private canvasObjectMovingHandler?: (e: any) => void;
+  private canvasMouseUpHandler?: (e: any) => void;
+  private canvasBeforeRenderHandler?: () => void;
+  private canvasAfterRenderHandler?: () => void;
   private renderProducerDisposable?: { dispose: () => void };
   private readonly subscriptions = new SubscriptionBag();
   private imageControlsByCapabilityKey: Map<string, Record<string, Control>> =
@@ -377,7 +376,7 @@ export class ImageTool implements Extension {
     this.imageSpecs = [];
     this.overlaySpecs = [];
     this.imageControlsByCapabilityKey.clear();
-    this.clearSnapGuides();
+    this.endMoveSnapInteraction();
     this.unbindCanvasInteractionHandlers();
 
     this.clearRenderedImages();
@@ -398,7 +397,7 @@ export class ImageTool implements Extension {
     const before = this.isToolActive;
     this.syncToolActiveFromWorkbench(event.id);
     if (!this.isToolActive) {
-      this.clearSnapGuides();
+      this.endMoveSnapInteraction();
       this.setImageFocus(null, {
         syncCanvasSelection: true,
         skipRender: true,
@@ -448,7 +447,7 @@ export class ImageTool implements Extension {
   };
 
   private onSelectionCleared = () => {
-    this.clearSnapGuides();
+    this.endMoveSnapInteraction();
     this.setImageFocus(null, {
       syncCanvasSelection: false,
       skipRender: true,
@@ -458,7 +457,7 @@ export class ImageTool implements Extension {
   };
 
   private onSceneLayoutChanged = () => {
-    this.updateSnapGuideVisuals();
+    this.canvasService?.requestRenderAll();
     this.updateImages();
   };
 
@@ -468,22 +467,65 @@ export class ImageTool implements Extension {
 
   private bindCanvasInteractionHandlers() {
     if (!this.canvasService || this.canvasObjectMovingHandler) return;
+    this.canvasMouseUpHandler = (e: any) => {
+      const target = this.getActiveImageTarget(e?.target);
+      if (
+        target &&
+        typeof target?.data?.id === "string" &&
+        target.data.id === this.movingImageId
+      ) {
+        this.applyMoveSnapToTarget(target);
+      }
+      this.endMoveSnapInteraction();
+    };
     this.canvasObjectMovingHandler = (e: any) => {
       this.handleCanvasObjectMoving(e);
     };
+    this.canvasBeforeRenderHandler = () => {
+      this.handleCanvasBeforeRender();
+    };
+    this.canvasAfterRenderHandler = () => {
+      this.handleCanvasAfterRender();
+    };
+    this.canvasService.canvas.on("mouse:up", this.canvasMouseUpHandler);
     this.canvasService.canvas.on(
       "object:moving",
       this.canvasObjectMovingHandler,
     );
+    this.canvasService.canvas.on(
+      "before:render",
+      this.canvasBeforeRenderHandler,
+    );
+    this.canvasService.canvas.on("after:render", this.canvasAfterRenderHandler);
   }
 
   private unbindCanvasInteractionHandlers() {
-    if (!this.canvasService || !this.canvasObjectMovingHandler) return;
-    this.canvasService.canvas.off(
-      "object:moving",
-      this.canvasObjectMovingHandler,
-    );
+    if (!this.canvasService) return;
+    if (this.canvasMouseUpHandler) {
+      this.canvasService.canvas.off("mouse:up", this.canvasMouseUpHandler);
+    }
+    if (this.canvasObjectMovingHandler) {
+      this.canvasService.canvas.off(
+        "object:moving",
+        this.canvasObjectMovingHandler,
+      );
+    }
+    if (this.canvasBeforeRenderHandler) {
+      this.canvasService.canvas.off(
+        "before:render",
+        this.canvasBeforeRenderHandler,
+      );
+    }
+    if (this.canvasAfterRenderHandler) {
+      this.canvasService.canvas.off(
+        "after:render",
+        this.canvasAfterRenderHandler,
+      );
+    }
+    this.canvasMouseUpHandler = undefined;
     this.canvasObjectMovingHandler = undefined;
+    this.canvasBeforeRenderHandler = undefined;
+    this.canvasAfterRenderHandler = undefined;
   }
 
   private getActiveImageTarget(target: any): any | null {
@@ -518,28 +560,12 @@ export class ImageTool implements Extension {
     return this.canvasService.toSceneLength(px);
   }
 
-  private pickSnapMatch(
-    candidates: SnapCandidate[],
-    previous: SnapMatch | null,
-  ): SnapMatch | null {
+  private pickSnapMatch(candidates: SnapCandidate[]): SnapMatch | null {
     if (!candidates.length) return null;
 
     const snapThreshold = this.getSnapThresholdScene(
       IMAGE_MOVE_SNAP_THRESHOLD_PX,
     );
-    const releaseThreshold = this.getSnapThresholdScene(
-      IMAGE_MOVE_SNAP_RELEASE_THRESHOLD_PX,
-    );
-
-    if (previous) {
-      const sticky = candidates.find((candidate) => {
-        return (
-          candidate.lineId === previous.lineId &&
-          Math.abs(candidate.deltaScene) <= releaseThreshold
-        );
-      });
-      if (sticky) return sticky;
-    }
 
     let best: SnapCandidate | null = null;
     candidates.forEach((candidate) => {
@@ -552,10 +578,9 @@ export class ImageTool implements Extension {
   }
 
   private computeMoveSnapMatches(
-    target: any,
+    bounds: FrameRect | null,
     frame: FrameRect,
   ): { x: SnapMatch | null; y: SnapMatch | null } {
-    const bounds = this.getTargetBoundsScene(target);
     if (!bounds || frame.width <= 0 || frame.height <= 0) {
       return { x: null, y: null };
     }
@@ -610,8 +635,8 @@ export class ImageTool implements Extension {
     ];
 
     return {
-      x: this.pickSnapMatch(xCandidates, this.activeSnapX),
-      y: this.pickSnapMatch(yCandidates, this.activeSnapY),
+      x: this.pickSnapMatch(xCandidates),
+      y: this.pickSnapMatch(yCandidates),
     };
   }
 
@@ -634,93 +659,104 @@ export class ImageTool implements Extension {
     this.activeSnapX = nextX;
     this.activeSnapY = nextY;
     if (changed) {
-      this.updateSnapGuideVisuals();
+      this.canvasService?.requestRenderAll();
     }
   }
 
-  private clearSnapGuides() {
+  private clearSnapPreview() {
     this.activeSnapX = null;
     this.activeSnapY = null;
-    this.removeSnapGuideObject("x");
-    this.removeSnapGuideObject("y");
+    this.hasRenderedSnapGuides = false;
     this.canvasService?.requestRenderAll();
   }
 
-  private removeSnapGuideObject(axis: SnapAxis) {
+  private endMoveSnapInteraction() {
+    this.movingImageId = null;
+    this.clearSnapPreview();
+  }
+
+  private applyMoveSnapToTarget(target: any): {
+    x: SnapMatch | null;
+    y: SnapMatch | null;
+  } {
+    if (!this.canvasService) {
+      return { x: null, y: null };
+    }
+    const frame = this.getFrameRect();
+    if (frame.width <= 0 || frame.height <= 0) {
+      return { x: null, y: null };
+    }
+    const bounds = this.getTargetBoundsScene(target);
+    const matches = this.computeMoveSnapMatches(bounds, frame);
+    const deltaScreenX = this.canvasService.toScreenLength(
+      matches.x?.deltaScene ?? 0,
+    );
+    const deltaScreenY = this.canvasService.toScreenLength(
+      matches.y?.deltaScene ?? 0,
+    );
+    if (deltaScreenX || deltaScreenY) {
+      target.set({
+        left: Number(target.left || 0) + deltaScreenX,
+        top: Number(target.top || 0) + deltaScreenY,
+      });
+      target.setCoords();
+    }
+    return matches;
+  }
+
+  private handleCanvasBeforeRender() {
     if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-    const current =
-      axis === "x" ? this.snapGuideXObject : this.snapGuideYObject;
-    if (!current) return;
-    canvas.remove(current);
-    if (axis === "x") {
-      this.snapGuideXObject = undefined;
+    if (!this.hasRenderedSnapGuides && !this.activeSnapX && !this.activeSnapY) {
       return;
     }
-    this.snapGuideYObject = undefined;
+    this.canvasService.canvas.clearContext(
+      this.canvasService.canvas.contextTop,
+    );
+    this.hasRenderedSnapGuides = false;
   }
 
-  private createOrUpdateSnapGuideObject(axis: SnapAxis, pathData: string) {
+  private drawSnapGuideLine(
+    from: { x: number; y: number },
+    to: { x: number; y: number },
+  ) {
     if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
+    const ctx = this.canvasService.canvas.contextTop;
+    if (!ctx) return;
     const color =
       this.getConfig<string>("image.control.borderColor", "#1677ff") ||
       "#1677ff";
-    const strokeWidth = 1;
-    this.removeSnapGuideObject(axis);
-
-    const created = new FabricPath(pathData, {
-      originX: "left",
-      originY: "top",
-      fill: "rgba(0,0,0,0)",
-      stroke: color,
-      strokeWidth,
-      selectable: false,
-      evented: false,
-      excludeFromExport: true,
-      objectCaching: false,
-      data: {
-        id: `${IMAGE_SNAP_GUIDE_LAYER_ID}.${axis}`,
-        layerId: IMAGE_SNAP_GUIDE_LAYER_ID,
-        type: "image-snap-guide",
-      },
-    } as any);
-    created.setCoords();
-    canvas.add(created);
-    canvas.bringObjectToFront(created);
-    if (axis === "x") {
-      this.snapGuideXObject = created;
-      return;
-    }
-    this.snapGuideYObject = created;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(from.x, from.y);
+    ctx.lineTo(to.x, to.y);
+    ctx.stroke();
+    ctx.restore();
   }
 
-  private updateSnapGuideVisuals() {
+  private handleCanvasAfterRender() {
     if (!this.canvasService || !this.isImageEditingVisible()) {
-      this.removeSnapGuideObject("x");
-      this.removeSnapGuideObject("y");
       return;
     }
 
     const frame = this.getFrameRect();
     if (frame.width <= 0 || frame.height <= 0) {
-      this.removeSnapGuideObject("x");
-      this.removeSnapGuideObject("y");
       return;
     }
     const frameScreen = this.getFrameRectScreen(frame);
+    let drew = false;
 
     if (this.activeSnapX) {
       const x = this.canvasService.toScreenPoint({
         x: this.activeSnapX.lineScene,
         y: frame.top,
       }).x;
-      this.createOrUpdateSnapGuideObject(
-        "x",
-        `M ${x} ${frameScreen.top} L ${x} ${frameScreen.top + frameScreen.height}`,
+      this.drawSnapGuideLine(
+        { x, y: frameScreen.top },
+        { x, y: frameScreen.top + frameScreen.height },
       );
-    } else {
-      this.removeSnapGuideObject("x");
+      drew = true;
     }
 
     if (this.activeSnapY) {
@@ -728,60 +764,31 @@ export class ImageTool implements Extension {
         x: frame.left,
         y: this.activeSnapY.lineScene,
       }).y;
-      this.createOrUpdateSnapGuideObject(
-        "y",
-        `M ${frameScreen.left} ${y} L ${frameScreen.left + frameScreen.width} ${y}`,
+      this.drawSnapGuideLine(
+        { x: frameScreen.left, y },
+        { x: frameScreen.left + frameScreen.width, y },
       );
-    } else {
-      this.removeSnapGuideObject("y");
+      drew = true;
     }
-
-    this.canvasService.requestRenderAll();
+    this.hasRenderedSnapGuides = drew;
   }
 
   private handleCanvasObjectMoving(e: any) {
     const target = this.getActiveImageTarget(e?.target);
     if (!target || !this.canvasService) return;
+    this.movingImageId =
+      typeof target?.data?.id === "string" ? target.data.id : null;
 
     const frame = this.getFrameRect();
     if (frame.width <= 0 || frame.height <= 0) {
-      this.clearSnapGuides();
+      this.endMoveSnapInteraction();
       return;
     }
-
-    const matches = this.computeMoveSnapMatches(target, frame);
-    const deltaX = matches.x?.deltaScene ?? 0;
-    const deltaY = matches.y?.deltaScene ?? 0;
-
-    if (deltaX || deltaY) {
-      target.set({
-        left:
-          Number(target.left || 0) + this.canvasService.toScreenLength(deltaX),
-        top:
-          Number(target.top || 0) + this.canvasService.toScreenLength(deltaY),
-      });
-      target.setCoords();
-    }
-
+    const rawBounds = this.getTargetBoundsScene(target);
+    const matches = this.computeMoveSnapMatches(rawBounds, frame);
     this.updateSnapMatchState(matches.x, matches.y);
   }
 
-  private applySnapMatchesToTarget(
-    target: any,
-    matches: { x: SnapMatch | null; y: SnapMatch | null },
-  ) {
-    if (!this.canvasService || !target) return;
-    const deltaX = matches.x?.deltaScene ?? 0;
-    const deltaY = matches.y?.deltaScene ?? 0;
-    if (!deltaX && !deltaY) return;
-
-    target.set({
-      left: Number(target.left || 0) + this.canvasService.toScreenLength(deltaX),
-      top: Number(target.top || 0) + this.canvasService.toScreenLength(deltaY),
-    });
-    target.setCoords();
-  }
-
   private syncToolActiveFromWorkbench(fallbackId?: string | null) {
     const wb = this.context?.services.get<WorkbenchService>("WorkbenchService");
     const activeId = wb?.activeToolId;
@@ -1546,33 +1553,9 @@ export class ImageTool implements Extension {
             originY: "top",
             fill: hatchFill,
             opacity: patternFill ? 1 : 0.8,
-            stroke: null,
-            fillRule: "evenodd",
-            selectable: false,
-            evented: false,
-            excludeFromExport: true,
-            objectCaching: false,
-          },
-        },
-        {
-          id: "image.cropShapePath",
-          type: "path",
-          data: { id: "image.cropShapePath", zIndex: 6 },
-          layout: {
-            reference: "custom",
-            referenceRect: frameRect,
-            alignX: "start",
-            alignY: "start",
-            offsetX: shapeBounds.x,
-            offsetY: shapeBounds.y,
-          },
-          props: {
-            pathData: shapePathData,
-            originX: "left",
-            originY: "top",
-            fill: "rgba(0,0,0,0)",
             stroke: "rgba(255, 0, 0, 0.9)",
             strokeWidth: this.canvasService?.toSceneLength(1) ?? 1,
+            fillRule: "evenodd",
             selectable: false,
             evented: false,
             excludeFromExport: true,
@@ -1959,7 +1942,6 @@ export class ImageTool implements Extension {
       isImageSelectionActive: this.isImageSelectionActive,
       focusedImageId: this.focusedImageId,
     });
-    this.updateSnapGuideVisuals();
     this.canvasService.requestRenderAll();
   }
 
@@ -1973,12 +1955,12 @@ export class ImageTool implements Extension {
     const id = target?.data?.id;
     const layerId = target?.data?.layerId;
     if (typeof id !== "string" || layerId !== IMAGE_OBJECT_LAYER_ID) return;
-
+    if (this.movingImageId === id) {
+      this.applyMoveSnapToTarget(target);
+    }
     const frame = this.getFrameRect();
+    this.endMoveSnapInteraction();
     if (!frame.width || !frame.height) return;
-    const matches = this.computeMoveSnapMatches(target, frame);
-    this.applySnapMatchesToTarget(target, matches);
-    this.clearSnapGuides();
 
     const center = target.getCenterPoint
       ? target.getCenterPoint()

package/src/extensions/ruler/RulerTool.ts

@@ -20,11 +20,12 @@ const MIN_ARROW_SIZE = 4;
 const THICKNESS_TO_STROKE_WIDTH_RATIO = 20;
 
 const DEFAULT_THICKNESS = 20;
-const DEFAULT_GAP = 45;
+const DEFAULT_GAP = 65;
 const DEFAULT_FONT_SIZE = 10;
 const DEFAULT_BACKGROUND_COLOR = "#f0f0f0";
 const DEFAULT_TEXT_COLOR = "#333333";
 const DEFAULT_LINE_COLOR = "#999999";
+const RULER_DEBUG_KEY = "ruler.debug";
 
 const RULER_THICKNESS_MIN = 10;
 const RULER_THICKNESS_MAX = 100;
@@ -48,6 +49,7 @@ export class RulerTool implements Extension {
   private textColor = DEFAULT_TEXT_COLOR;
   private lineColor = DEFAULT_LINE_COLOR;
   private fontSize = DEFAULT_FONT_SIZE;
+  private debugEnabled = false;
   private renderSeq = 0;
   private readonly numericProps = new Set(["thickness", "gap", "fontSize"]);
   private specs: RenderObjectSpec[] = [];
@@ -112,7 +114,14 @@ export class RulerTool implements Extension {
       this.syncConfig(configService);
       configService.onAnyChange((e: { key: string; value: any }) => {
         let shouldUpdate = false;
-        if (e.key.startsWith("ruler.")) {
+        if (e.key === RULER_DEBUG_KEY) {
+          this.debugEnabled = e.value === true;
+          this.log("config:update", {
+            key: e.key,
+            raw: e.value,
+            normalized: this.debugEnabled,
+          });
+        } else if (e.key.startsWith("ruler.")) {
           const prop = e.key.split(".")[1];
           if (prop && prop in this) {
             if (this.numericProps.has(prop)) {
@@ -203,6 +212,12 @@ export class RulerTool implements Extension {
           max: RULER_FONT_SIZE_MAX,
           default: DEFAULT_FONT_SIZE,
         },
+        {
+          id: RULER_DEBUG_KEY,
+          type: "boolean",
+          label: "Ruler Debug Log",
+          default: false,
+        },
       ] as ConfigurationContribution[],
       [ContributionPointIds.COMMANDS]: [
         {
@@ -249,7 +264,12 @@ export class RulerTool implements Extension {
     };
   }
 
+  private isDebugEnabled(): boolean {
+    return this.debugEnabled;
+  }
+
   private log(step: string, payload?: Record<string, unknown>) {
+    if (!this.isDebugEnabled()) return;
     if (payload) {
       console.debug(`[RulerTool] ${step}`, payload);
       return;
@@ -279,6 +299,8 @@ export class RulerTool implements Extension {
       configService.get("ruler.fontSize", this.fontSize),
       DEFAULT_FONT_SIZE,
     );
+    this.debugEnabled =
+      configService.get(RULER_DEBUG_KEY, this.debugEnabled) === true;
 
     this.log("config:loaded", {
       thickness: this.thickness,

package/src/shared/constants/layers.ts

@@ -5,6 +5,7 @@ export const WHITE_INK_OBJECT_LAYER_ID = "white-ink.user";
 export const WHITE_INK_COVER_LAYER_ID = "white-ink.cover";
 export const WHITE_INK_OVERLAY_LAYER_ID = "white-ink.overlay";
 export const DIELINE_LAYER_ID = "dieline-overlay";
+export const FEATURE_DIELINE_LAYER_ID = "feature-dieline-overlay";
 export const FEATURE_OVERLAY_LAYER_ID = "feature-overlay";
 export const RULER_LAYER_ID = "ruler-overlay";
 export const FILM_LAYER_ID = "overlay";
@@ -17,6 +18,7 @@ export const LAYER_IDS = {
   whiteInkCover: WHITE_INK_COVER_LAYER_ID,
   whiteInkOverlay: WHITE_INK_OVERLAY_LAYER_ID,
   dieline: DIELINE_LAYER_ID,
+  featureDieline: FEATURE_DIELINE_LAYER_ID,
   featureOverlay: FEATURE_OVERLAY_LAYER_ID,
   rulerOverlay: RULER_LAYER_ID,
   filmOverlay: FILM_LAYER_ID,

package/tests/run.ts

@@ -21,6 +21,10 @@ import { createWhiteInkCommands } from "../src/extensions/white-ink/commands";
 import { createWhiteInkConfigurations } from "../src/extensions/white-ink/config";
 import { createDielineCommands } from "../src/extensions/dieline/commands";
 import { createDielineConfigurations } from "../src/extensions/dieline/config";
+import {
+  normalizePointInGeometry,
+  resolveFeaturePosition,
+} from "../src/extensions/featureCoordinates";
 
 function assert(condition: unknown, message: string) {
   if (!condition) throw new Error(message);
@@ -120,6 +124,38 @@ function testEdgeScale() {
   assert(height === 80, `expected height 80, got ${height}`);
 }
 
+function testFeaturePlacementProjection() {
+  const trimGeometry = {
+    x: 100,
+    y: 120,
+    width: 120,
+    height: 180,
+  };
+  const cutGeometry = {
+    x: 100,
+    y: 120,
+    width: 150,
+    height: 210,
+  };
+  const trimFeature = {
+    x: 0.82,
+    y: 0.68,
+  };
+
+  const trimCenter = resolveFeaturePosition(trimFeature, trimGeometry);
+  const cutFeature = normalizePointInGeometry(trimCenter, cutGeometry);
+  const cutCenter = resolveFeaturePosition(cutFeature, cutGeometry);
+
+  assert(
+    Math.abs(trimCenter.x - cutCenter.x) < 1e-6,
+    `expected projected feature x to stay fixed, got ${trimCenter.x} vs ${cutCenter.x}`,
+  );
+  assert(
+    Math.abs(trimCenter.y - cutCenter.y) < 1e-6,
+    `expected projected feature y to stay fixed, got ${trimCenter.y} vs ${cutCenter.y}`,
+  );
+}
+
 function testVisibilityDsl() {
   const layers = new Map([
     ["ruler-overlay", { exists: true, objectCount: 2 }],
@@ -396,6 +432,7 @@ function main() {
   testBridgeSelection();
   testMaskOps();
   testEdgeScale();
+  testFeaturePlacementProjection();
   testVisibilityDsl();
   testContributionCompatibility();
   console.log("ok");