@pooder/kit 6.1.2 → 6.2.1

package/.test-dist/src/extensions/image/ImageTool.js

@@ -17,6 +17,7 @@ const IMAGE_DEFAULT_CONTROL_CAPABILITIES = [
     "rotate",
     "scale",
 ];
+const IMAGE_MOVE_SNAP_THRESHOLD_PX = 6;
 const IMAGE_CONTROL_DESCRIPTORS = [
     {
         key: "tl",
@@ -59,12 +60,17 @@ class ImageTool {
         this.renderSeq = 0;
         this.imageSpecs = [];
         this.overlaySpecs = [];
+        this.activeSnapX = null;
+        this.activeSnapY = null;
+        this.movingImageId = null;
+        this.hasRenderedSnapGuides = false;
         this.subscriptions = new subscriptions_1.SubscriptionBag();
         this.imageControlsByCapabilityKey = new Map();
         this.onToolActivated = (event) => {
             const before = this.isToolActive;
             this.syncToolActiveFromWorkbench(event.id);
             if (!this.isToolActive) {
+                this.endMoveSnapInteraction();
                 this.setImageFocus(null, {
                     syncCanvasSelection: true,
                     skipRender: true,
@@ -110,6 +116,7 @@ class ImageTool {
             this.updateImages();
         };
         this.onSelectionCleared = () => {
+            this.endMoveSnapInteraction();
             this.setImageFocus(null, {
                 syncCanvasSelection: false,
                 skipRender: true,
@@ -118,6 +125,7 @@ class ImageTool {
             this.updateImages();
         };
         this.onSceneLayoutChanged = () => {
+            this.canvasService?.requestRenderAll();
             this.updateImages();
         };
         this.onSceneGeometryChanged = () => {
@@ -131,7 +139,11 @@ class ImageTool {
             const layerId = target?.data?.layerId;
             if (typeof id !== "string" || layerId !== layers_1.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
@@ -195,6 +207,7 @@ class ImageTool {
                 },
             ],
         }), { 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, "selection:created", this.onSelectionChanged);
@@ -238,6 +251,8 @@ class ImageTool {
         this.imageSpecs = [];
         this.overlaySpecs = [];
         this.imageControlsByCapabilityKey.clear();
+        this.endMoveSnapInteraction();
+        this.unbindCanvasInteractionHandlers();
         this.clearRenderedImages();
         this.renderProducerDisposable?.dispose();
         this.renderProducerDisposable = undefined;
@@ -247,6 +262,271 @@ class ImageTool {
         }
         this.context = undefined;
     }
+    bindCanvasInteractionHandlers() {
+        if (!this.canvasService || this.canvasObjectMovingHandler)
+            return;
+        this.canvasMouseUpHandler = (e) => {
+            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) => {
+            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);
+    }
+    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;
+    }
+    getActiveImageTarget(target) {
+        if (!this.isToolActive)
+            return null;
+        if (!target)
+            return null;
+        if (target?.data?.layerId !== layers_1.IMAGE_OBJECT_LAYER_ID)
+            return null;
+        if (typeof target?.data?.id !== "string")
+            return null;
+        return target;
+    }
+    getTargetBoundsScene(target) {
+        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),
+        });
+    }
+    getSnapThresholdScene(px) {
+        if (!this.canvasService)
+            return px;
+        return this.canvasService.toSceneLength(px);
+    }
+    pickSnapMatch(candidates) {
+        if (!candidates.length)
+            return null;
+        const snapThreshold = this.getSnapThresholdScene(IMAGE_MOVE_SNAP_THRESHOLD_PX);
+        let best = 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;
+    }
+    computeMoveSnapMatches(bounds, frame) {
+        if (!bounds || frame.width <= 0 || frame.height <= 0) {
+            return { x: null, y: null };
+        }
+        const xCandidates = [
+            {
+                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 = [
+            {
+                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),
+        };
+    }
+    areSnapMatchesEqual(a, b) {
+        if (!a && !b)
+            return true;
+        if (!a || !b)
+            return false;
+        return a.lineId === b.lineId && a.axis === b.axis && a.kind === b.kind;
+    }
+    updateSnapMatchState(nextX, nextY) {
+        const changed = !this.areSnapMatchesEqual(this.activeSnapX, nextX) ||
+            !this.areSnapMatchesEqual(this.activeSnapY, nextY);
+        this.activeSnapX = nextX;
+        this.activeSnapY = nextY;
+        if (changed) {
+            this.canvasService?.requestRenderAll();
+        }
+    }
+    clearSnapPreview() {
+        this.activeSnapX = null;
+        this.activeSnapY = null;
+        this.hasRenderedSnapGuides = false;
+        this.canvasService?.requestRenderAll();
+    }
+    endMoveSnapInteraction() {
+        this.movingImageId = null;
+        this.clearSnapPreview();
+    }
+    applyMoveSnapToTarget(target) {
+        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;
+    }
+    handleCanvasBeforeRender() {
+        if (!this.canvasService)
+            return;
+        if (!this.hasRenderedSnapGuides && !this.activeSnapX && !this.activeSnapY) {
+            return;
+        }
+        this.canvasService.canvas.clearContext(this.canvasService.canvas.contextTop);
+        this.hasRenderedSnapGuides = false;
+    }
+    drawSnapGuideLine(from, to) {
+        if (!this.canvasService)
+            return;
+        const ctx = this.canvasService.canvas.contextTop;
+        if (!ctx)
+            return;
+        const color = this.getConfig("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();
+    }
+    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;
+    }
+    handleCanvasObjectMoving(e) {
+        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);
+    }
     syncToolActiveFromWorkbench(fallbackId) {
         const wb = this.context?.services.get("WorkbenchService");
         const activeId = wb?.activeToolId;
@@ -864,33 +1144,9 @@ class ImageTool {
                         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,

package/.test-dist/src/extensions/ruler/RulerTool.js

@@ -13,6 +13,7 @@ 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;
 const RULER_GAP_MIN = 0;
@@ -31,6 +32,7 @@ class RulerTool {
         this.textColor = DEFAULT_TEXT_COLOR;
         this.lineColor = DEFAULT_LINE_COLOR;
         this.fontSize = DEFAULT_FONT_SIZE;
+        this.debugEnabled = false;
         this.renderSeq = 0;
         this.numericProps = new Set(["thickness", "gap", "fontSize"]);
         this.specs = [];
@@ -72,7 +74,15 @@ class RulerTool {
             this.syncConfig(configService);
             configService.onAnyChange((e) => {
                 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)) {
@@ -158,6 +168,12 @@ class RulerTool {
                     max: RULER_FONT_SIZE_MAX,
                     default: DEFAULT_FONT_SIZE,
                 },
+                {
+                    id: RULER_DEBUG_KEY,
+                    type: "boolean",
+                    label: "Ruler Debug Log",
+                    default: false,
+                },
             ],
             [core_1.ContributionPointIds.COMMANDS]: [
                 {
@@ -187,7 +203,12 @@ class RulerTool {
             ],
         };
     }
+    isDebugEnabled() {
+        return this.debugEnabled;
+    }
     log(step, payload) {
+        if (!this.isDebugEnabled())
+            return;
         if (payload) {
             console.debug(`[RulerTool] ${step}`, payload);
             return;
@@ -201,6 +222,8 @@ class RulerTool {
         this.textColor = configService.get("ruler.textColor", this.textColor);
         this.lineColor = configService.get("ruler.lineColor", this.lineColor);
         this.fontSize = this.toFiniteNumber(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,
             gap: this.gap,

package/.test-dist/src/shared/constants/layers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LAYER_IDS = exports.FILM_LAYER_ID = exports.RULER_LAYER_ID = exports.FEATURE_OVERLAY_LAYER_ID = exports.DIELINE_LAYER_ID = exports.WHITE_INK_OVERLAY_LAYER_ID = exports.WHITE_INK_COVER_LAYER_ID = exports.WHITE_INK_OBJECT_LAYER_ID = exports.IMAGE_OVERLAY_LAYER_ID = exports.IMAGE_OBJECT_LAYER_ID = exports.BACKGROUND_LAYER_ID = void 0;
+exports.LAYER_IDS = exports.FILM_LAYER_ID = exports.RULER_LAYER_ID = exports.FEATURE_OVERLAY_LAYER_ID = exports.FEATURE_DIELINE_LAYER_ID = exports.DIELINE_LAYER_ID = exports.WHITE_INK_OVERLAY_LAYER_ID = exports.WHITE_INK_COVER_LAYER_ID = exports.WHITE_INK_OBJECT_LAYER_ID = exports.IMAGE_OVERLAY_LAYER_ID = exports.IMAGE_OBJECT_LAYER_ID = exports.BACKGROUND_LAYER_ID = void 0;
 exports.BACKGROUND_LAYER_ID = "background";
 exports.IMAGE_OBJECT_LAYER_ID = "image.user";
 exports.IMAGE_OVERLAY_LAYER_ID = "image-overlay";
@@ -8,6 +8,7 @@ exports.WHITE_INK_OBJECT_LAYER_ID = "white-ink.user";
 exports.WHITE_INK_COVER_LAYER_ID = "white-ink.cover";
 exports.WHITE_INK_OVERLAY_LAYER_ID = "white-ink.overlay";
 exports.DIELINE_LAYER_ID = "dieline-overlay";
+exports.FEATURE_DIELINE_LAYER_ID = "feature-dieline-overlay";
 exports.FEATURE_OVERLAY_LAYER_ID = "feature-overlay";
 exports.RULER_LAYER_ID = "ruler-overlay";
 exports.FILM_LAYER_ID = "overlay";
@@ -19,6 +20,7 @@ exports.LAYER_IDS = {
     whiteInkCover: exports.WHITE_INK_COVER_LAYER_ID,
     whiteInkOverlay: exports.WHITE_INK_OVERLAY_LAYER_ID,
     dieline: exports.DIELINE_LAYER_ID,
+    featureDieline: exports.FEATURE_DIELINE_LAYER_ID,
     featureOverlay: exports.FEATURE_OVERLAY_LAYER_ID,
     rulerOverlay: exports.RULER_LAYER_ID,
     filmOverlay: exports.FILM_LAYER_ID,

package/.test-dist/tests/run.js

@@ -11,6 +11,7 @@ const commands_2 = require("../src/extensions/white-ink/commands");
 const config_2 = require("../src/extensions/white-ink/config");
 const commands_3 = require("../src/extensions/dieline/commands");
 const config_3 = require("../src/extensions/dieline/config");
+const featureCoordinates_1 = require("../src/extensions/featureCoordinates");
 function assert(condition, message) {
     if (!condition)
         throw new Error(message);
@@ -91,6 +92,29 @@ function testEdgeScale() {
     assert(width === 140, `expected width 140, got ${width}`);
     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 = (0, featureCoordinates_1.resolveFeaturePosition)(trimFeature, trimGeometry);
+    const cutFeature = (0, featureCoordinates_1.normalizePointInGeometry)(trimCenter, cutGeometry);
+    const cutCenter = (0, featureCoordinates_1.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 }],
@@ -259,6 +283,7 @@ function main() {
     testBridgeSelection();
     testMaskOps();
     testEdgeScale();
+    testFeaturePlacementProjection();
     testVisibilityDsl();
     testContributionCompatibility();
     console.log("ok");

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @pooder/kit
 
+## 6.2.1
+
+### Patch Changes
+
+- bugfix
+
+## 6.2.0
+
+### Minor Changes
+
+- refactor the dieline feature and modify the image snap
+
 ## 6.1.2
 
 ### Patch Changes