@pooder/kit 6.1.1 → 6.2.0

package/src/extensions/image/ImageTool.ts

@@ -14,7 +14,11 @@ import {
   Point,
   controlsUtils,
 } from "fabric";
-import { CanvasService, RenderLayoutRect, RenderObjectSpec } from "../../services";
+import {
+  CanvasService,
+  RenderLayoutRect,
+  RenderObjectSpec,
+} from "../../services";
 import { isDielineShape, normalizeShapeStyle } from "../dielineShape";
 import type { DielineShape, DielineShapeStyle } from "../dielineShape";
 import { generateDielinePath, getPathBounds } from "../geometry";
@@ -140,11 +144,38 @@ interface ImageControlDescriptor {
   create: () => Control;
 }
 
+type SnapAxis = "x" | "y";
+type SnapLineKind = "edge" | "center";
+type SnapLineId =
+  | "frame-left"
+  | "frame-center-x"
+  | "frame-right"
+  | "frame-top"
+  | "frame-center-y"
+  | "frame-bottom";
+
+interface SnapMatch {
+  axis: SnapAxis;
+  lineId: SnapLineId;
+  kind: SnapLineKind;
+  lineScene: number;
+  deltaScene: number;
+}
+
+interface SnapCandidate {
+  axis: SnapAxis;
+  lineId: SnapLineId;
+  kind: SnapLineKind;
+  lineScene: number;
+  deltaScene: number;
+}
+
 const IMAGE_DEFAULT_CONTROL_CAPABILITIES: ImageControlCapability[] = [
   "rotate",
   "scale",
 ];
 
+const IMAGE_MOVE_SNAP_THRESHOLD_PX = 6;
 const IMAGE_CONTROL_DESCRIPTORS: ImageControlDescriptor[] = [
   {
     key: "tl",
@@ -199,6 +230,14 @@ export class ImageTool implements Extension {
   private cropShapeHatchPatternKey?: string;
   private imageSpecs: RenderObjectSpec[] = [];
   private overlaySpecs: RenderObjectSpec[] = [];
+  private activeSnapX: SnapMatch | null = null;
+  private activeSnapY: SnapMatch | null = null;
+  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>> =
@@ -247,9 +286,18 @@ export class ImageTool implements Extension {
       }),
       { priority: 300 },
     );
+    this.bindCanvasInteractionHandlers();
 
-    this.subscriptions.on(context.eventBus, "tool:activated", this.onToolActivated);
-    this.subscriptions.on(context.eventBus, "object:modified", this.onObjectModified);
+    this.subscriptions.on(
+      context.eventBus,
+      "tool:activated",
+      this.onToolActivated,
+    );
+    this.subscriptions.on(
+      context.eventBus,
+      "object:modified",
+      this.onObjectModified,
+    );
     this.subscriptions.on(
       context.eventBus,
       "selection:created",
@@ -328,6 +376,8 @@ export class ImageTool implements Extension {
     this.imageSpecs = [];
     this.overlaySpecs = [];
     this.imageControlsByCapabilityKey.clear();
+    this.endMoveSnapInteraction();
+    this.unbindCanvasInteractionHandlers();
 
     this.clearRenderedImages();
     this.renderProducerDisposable?.dispose();
@@ -347,6 +397,7 @@ export class ImageTool implements Extension {
     const before = this.isToolActive;
     this.syncToolActiveFromWorkbench(event.id);
     if (!this.isToolActive) {
+      this.endMoveSnapInteraction();
       this.setImageFocus(null, {
         syncCanvasSelection: true,
         skipRender: true,
@@ -396,6 +447,7 @@ export class ImageTool implements Extension {
   };
 
   private onSelectionCleared = () => {
+    this.endMoveSnapInteraction();
     this.setImageFocus(null, {
       syncCanvasSelection: false,
       skipRender: true,
@@ -405,6 +457,7 @@ export class ImageTool implements Extension {
   };
 
   private onSceneLayoutChanged = () => {
+    this.canvasService?.requestRenderAll();
     this.updateImages();
   };
 
@@ -412,6 +465,330 @@ export class ImageTool implements Extension {
     this.updateImages();
   };
 
+  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) 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 {
+    if (!this.isToolActive) return null;
+    if (!target) return null;
+    if (target?.data?.layerId !== IMAGE_OBJECT_LAYER_ID) return null;
+    if (typeof target?.data?.id !== "string") return null;
+    return target;
+  }
+
+  private getTargetBoundsScene(target: any): FrameRect | null {
+    if (!this.canvasService || !target) return null;
+    const rawBounds =
+      typeof target.getBoundingRect === "function"
+        ? target.getBoundingRect()
+        : {
+            left: Number(target.left || 0),
+            top: Number(target.top || 0),
+            width: Number(target.width || 0),
+            height: Number(target.height || 0),
+          };
+    return this.canvasService.toSceneRect({
+      left: Number(rawBounds.left || 0),
+      top: Number(rawBounds.top || 0),
+      width: Number(rawBounds.width || 0),
+      height: Number(rawBounds.height || 0),
+    });
+  }
+
+  private getSnapThresholdScene(px: number): number {
+    if (!this.canvasService) return px;
+    return this.canvasService.toSceneLength(px);
+  }
+
+  private pickSnapMatch(candidates: SnapCandidate[]): SnapMatch | null {
+    if (!candidates.length) return null;
+
+    const snapThreshold = this.getSnapThresholdScene(
+      IMAGE_MOVE_SNAP_THRESHOLD_PX,
+    );
+
+    let best: SnapCandidate | null = null;
+    candidates.forEach((candidate) => {
+      if (Math.abs(candidate.deltaScene) > snapThreshold) return;
+      if (!best || Math.abs(candidate.deltaScene) < Math.abs(best.deltaScene)) {
+        best = candidate;
+      }
+    });
+    return best;
+  }
+
+  private computeMoveSnapMatches(
+    bounds: FrameRect | null,
+    frame: FrameRect,
+  ): { x: SnapMatch | null; y: SnapMatch | null } {
+    if (!bounds || frame.width <= 0 || frame.height <= 0) {
+      return { x: null, y: null };
+    }
+
+    const xCandidates: SnapCandidate[] = [
+      {
+        axis: "x",
+        lineId: "frame-left",
+        kind: "edge",
+        lineScene: frame.left,
+        deltaScene: frame.left - bounds.left,
+      },
+      {
+        axis: "x",
+        lineId: "frame-center-x",
+        kind: "center",
+        lineScene: frame.left + frame.width / 2,
+        deltaScene:
+          frame.left + frame.width / 2 - (bounds.left + bounds.width / 2),
+      },
+      {
+        axis: "x",
+        lineId: "frame-right",
+        kind: "edge",
+        lineScene: frame.left + frame.width,
+        deltaScene: frame.left + frame.width - (bounds.left + bounds.width),
+      },
+    ];
+    const yCandidates: SnapCandidate[] = [
+      {
+        axis: "y",
+        lineId: "frame-top",
+        kind: "edge",
+        lineScene: frame.top,
+        deltaScene: frame.top - bounds.top,
+      },
+      {
+        axis: "y",
+        lineId: "frame-center-y",
+        kind: "center",
+        lineScene: frame.top + frame.height / 2,
+        deltaScene:
+          frame.top + frame.height / 2 - (bounds.top + bounds.height / 2),
+      },
+      {
+        axis: "y",
+        lineId: "frame-bottom",
+        kind: "edge",
+        lineScene: frame.top + frame.height,
+        deltaScene: frame.top + frame.height - (bounds.top + bounds.height),
+      },
+    ];
+
+    return {
+      x: this.pickSnapMatch(xCandidates),
+      y: this.pickSnapMatch(yCandidates),
+    };
+  }
+
+  private areSnapMatchesEqual(
+    a: SnapMatch | null,
+    b: SnapMatch | null,
+  ): boolean {
+    if (!a && !b) return true;
+    if (!a || !b) return false;
+    return a.lineId === b.lineId && a.axis === b.axis && a.kind === b.kind;
+  }
+
+  private updateSnapMatchState(
+    nextX: SnapMatch | null,
+    nextY: SnapMatch | null,
+  ) {
+    const changed =
+      !this.areSnapMatchesEqual(this.activeSnapX, nextX) ||
+      !this.areSnapMatchesEqual(this.activeSnapY, nextY);
+    this.activeSnapX = nextX;
+    this.activeSnapY = nextY;
+    if (changed) {
+      this.canvasService?.requestRenderAll();
+    }
+  }
+
+  private clearSnapPreview() {
+    this.activeSnapX = null;
+    this.activeSnapY = null;
+    this.hasRenderedSnapGuides = false;
+    this.canvasService?.requestRenderAll();
+  }
+
+  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;
+    if (!this.hasRenderedSnapGuides && !this.activeSnapX && !this.activeSnapY) {
+      return;
+    }
+    this.canvasService.canvas.clearContext(
+      this.canvasService.canvas.contextTop,
+    );
+    this.hasRenderedSnapGuides = false;
+  }
+
+  private drawSnapGuideLine(
+    from: { x: number; y: number },
+    to: { x: number; y: number },
+  ) {
+    if (!this.canvasService) return;
+    const ctx = this.canvasService.canvas.contextTop;
+    if (!ctx) return;
+    const color =
+      this.getConfig<string>("image.control.borderColor", "#1677ff") ||
+      "#1677ff";
+    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 handleCanvasAfterRender() {
+    if (!this.canvasService || !this.isImageEditingVisible()) {
+      return;
+    }
+
+    const frame = this.getFrameRect();
+    if (frame.width <= 0 || frame.height <= 0) {
+      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.drawSnapGuideLine(
+        { x, y: frameScreen.top },
+        { x, y: frameScreen.top + frameScreen.height },
+      );
+      drew = true;
+    }
+
+    if (this.activeSnapY) {
+      const y = this.canvasService.toScreenPoint({
+        x: frame.left,
+        y: this.activeSnapY.lineScene,
+      }).y;
+      this.drawSnapGuideLine(
+        { x: frameScreen.left, y },
+        { x: frameScreen.left + frameScreen.width, y },
+      );
+      drew = true;
+    }
+    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.endMoveSnapInteraction();
+      return;
+    }
+    const rawBounds = this.getTargetBoundsScene(target);
+    const matches = this.computeMoveSnapMatches(rawBounds, frame);
+    this.updateSnapMatchState(matches.x, matches.y);
+  }
+
   private syncToolActiveFromWorkbench(fallbackId?: string | null) {
     const wb = this.context?.services.get<WorkbenchService>("WorkbenchService");
     const activeId = wb?.activeToolId;
@@ -1176,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,
@@ -1602,8 +1955,11 @@ 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 center = target.getCenterPoint

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,