@pooder/kit 6.2.0 → 6.2.2

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

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageTool = void 0;
 const core_1 = require("@pooder/core");
 const fabric_1 = require("fabric");
-const dielineShape_1 = require("../dielineShape");
-const geometry_1 = require("../geometry");
 const sceneLayoutModel_1 = require("../../shared/scene/sceneLayoutModel");
 const frame_1 = require("../../shared/scene/frame");
 const sourceSizeCache_1 = require("../../shared/imaging/sourceSizeCache");
@@ -13,6 +11,7 @@ const sessionState_1 = require("../../shared/runtime/sessionState");
 const layers_1 = require("../../shared/constants/layers");
 const commands_1 = require("./commands");
 const config_1 = require("./config");
+const sessionOverlay_1 = require("./sessionOverlay");
 const IMAGE_DEFAULT_CONTROL_CAPABILITIES = [
     "rotate",
     "scale",
@@ -427,10 +426,20 @@ class ImageTool {
             this.canvasService?.requestRenderAll();
         }
     }
+    clearSnapGuideContext() {
+        const topContext = this.canvasService?.canvas.contextTop;
+        if (!this.canvasService || !topContext)
+            return;
+        this.canvasService.canvas.clearContext(topContext);
+    }
     clearSnapPreview() {
+        const shouldClearCanvas = this.hasRenderedSnapGuides || !!this.activeSnapX || !!this.activeSnapY;
         this.activeSnapX = null;
         this.activeSnapY = null;
         this.hasRenderedSnapGuides = false;
+        if (shouldClearCanvas) {
+            this.clearSnapGuideContext();
+        }
         this.canvasService?.requestRenderAll();
     }
     endMoveSnapInteraction() {
@@ -816,9 +825,6 @@ class ImageTool {
         }
         return this.canvasService.toScreenRect(frame || this.getFrameRect());
     }
-    toLayoutSceneRect(rect) {
-        return (0, frame_1.toLayoutSceneRect)(rect);
-    }
     async resolveDefaultFitArea() {
         if (!this.canvasService)
             return null;
@@ -941,78 +947,33 @@ class ImageTool {
                 "#f5f5f5",
         };
     }
-    toSceneGeometryLike(raw) {
-        const shape = raw?.shape;
-        if (!(0, dielineShape_1.isDielineShape)(shape)) {
+    resolveSessionOverlayState() {
+        if (!this.canvasService || !this.context) {
             return null;
         }
-        const radiusRaw = Number(raw?.radius);
-        const offsetRaw = Number(raw?.offset);
-        const unit = typeof raw?.unit === "string" ? raw.unit : "px";
-        const radius = unit === "scene" || !this.canvasService
-            ? radiusRaw
-            : this.canvasService.toSceneLength(radiusRaw);
-        const offset = unit === "scene" || !this.canvasService
-            ? offsetRaw
-            : this.canvasService.toSceneLength(offsetRaw);
-        return {
-            shape,
-            shapeStyle: (0, dielineShape_1.normalizeShapeStyle)(raw?.shapeStyle),
-            radius: Number.isFinite(radius) ? radius : 0,
-            offset: Number.isFinite(offset) ? offset : 0,
-        };
-    }
-    async resolveSceneGeometryForOverlay() {
-        if (!this.context)
-            return null;
-        const commandService = this.context.services.get("CommandService");
-        if (commandService) {
-            try {
-                const raw = await Promise.resolve(commandService.executeCommand("getSceneGeometry"));
-                const geometry = this.toSceneGeometryLike(raw);
-                if (geometry) {
-                    this.debug("overlay:sceneGeometry:command", geometry);
-                    return geometry;
-                }
-                this.debug("overlay:sceneGeometry:command:invalid", { raw });
-            }
-            catch (error) {
-                this.debug("overlay:sceneGeometry:command:error", {
-                    error: error instanceof Error ? error.message : String(error),
-                });
-            }
-        }
-        if (!this.canvasService)
-            return null;
         const configService = this.context.services.get("ConfigurationService");
-        if (!configService)
+        if (!configService) {
             return null;
-        const sizeState = (0, sceneLayoutModel_1.readSizeState)(configService);
-        const layout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, sizeState);
+        }
+        const layout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, (0, sceneLayoutModel_1.readSizeState)(configService));
         if (!layout) {
-            this.debug("overlay:sceneGeometry:fallback:missing-layout");
+            this.debug("overlay:layout:missing");
             return null;
         }
-        const geometry = this.toSceneGeometryLike((0, sceneLayoutModel_1.buildSceneGeometry)(configService, layout));
-        if (geometry) {
-            this.debug("overlay:sceneGeometry:fallback", geometry);
-        }
-        return geometry;
-    }
-    resolveCutShapeRadius(geometry, frame) {
-        const visualRadius = Number.isFinite(geometry.radius)
-            ? Math.max(0, geometry.radius)
-            : 0;
-        const visualOffset = Number.isFinite(geometry.offset) ? geometry.offset : 0;
-        const rawCutRadius = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
-        const maxRadius = Math.max(0, Math.min(frame.width, frame.height) / 2);
-        return Math.max(0, Math.min(maxRadius, rawCutRadius));
+        const geometry = (0, sceneLayoutModel_1.buildSceneGeometry)(configService, layout);
+        this.debug("overlay:state:resolved", {
+            cutRect: layout.cutRect,
+            shape: geometry.shape,
+            shapeStyle: geometry.shapeStyle,
+            radius: geometry.radius,
+            offset: geometry.offset,
+        });
+        return { layout, geometry };
     }
     getCropShapeHatchPattern(color = "rgba(255, 0, 0, 0.6)") {
         if (typeof document === "undefined")
             return undefined;
-        const sceneScale = this.canvasService?.getSceneScale() || 1;
-        const cacheKey = `${color}::${sceneScale.toFixed(6)}`;
+        const cacheKey = color;
         if (this.cropShapeHatchPattern &&
             this.cropShapeHatchPatternColor === color &&
             this.cropShapeHatchPatternKey === cacheKey) {
@@ -1045,140 +1006,11 @@ class ImageTool {
             // @ts-ignore: Fabric Pattern accepts canvas source here.
             repetition: "repeat",
         });
-        // Scene specs are scaled to screen by CanvasService; keep hatch density in screen pixels.
-        pattern.patternTransform = [
-            1 / sceneScale,
-            0,
-            0,
-            1 / sceneScale,
-            0,
-            0,
-        ];
         this.cropShapeHatchPattern = pattern;
         this.cropShapeHatchPatternColor = color;
         this.cropShapeHatchPatternKey = cacheKey;
         return pattern;
     }
-    buildCropShapeOverlaySpecs(frame, sceneGeometry) {
-        if (!sceneGeometry) {
-            this.debug("overlay:shape:skip", { reason: "scene-geometry-missing" });
-            return [];
-        }
-        if (sceneGeometry.shape === "custom") {
-            this.debug("overlay:shape:skip", { reason: "shape-custom" });
-            return [];
-        }
-        const shape = sceneGeometry.shape;
-        const shapeStyle = sceneGeometry.shapeStyle;
-        const inset = 0;
-        const shapeWidth = Math.max(1, frame.width);
-        const shapeHeight = Math.max(1, frame.height);
-        const radius = this.resolveCutShapeRadius(sceneGeometry, frame);
-        this.debug("overlay:shape:geometry", {
-            shape,
-            frameWidth: frame.width,
-            frameHeight: frame.height,
-            offset: sceneGeometry.offset,
-            shapeStyle,
-            inset,
-            shapeWidth,
-            shapeHeight,
-            baseRadius: sceneGeometry.radius,
-            radius,
-        });
-        const isSameAsFrame = Math.abs(shapeWidth - frame.width) <= 0.0001 &&
-            Math.abs(shapeHeight - frame.height) <= 0.0001;
-        if (shape === "rect" && radius <= 0.0001 && isSameAsFrame) {
-            this.debug("overlay:shape:skip", {
-                reason: "shape-rect-no-radius",
-            });
-            return [];
-        }
-        const baseOptions = {
-            shape,
-            width: shapeWidth,
-            height: shapeHeight,
-            radius,
-            x: frame.width / 2,
-            y: frame.height / 2,
-            features: [],
-            shapeStyle,
-            canvasWidth: frame.width,
-            canvasHeight: frame.height,
-        };
-        try {
-            const shapePathData = (0, geometry_1.generateDielinePath)(baseOptions);
-            const outerRectPathData = `M 0 0 L ${frame.width} 0 L ${frame.width} ${frame.height} L 0 ${frame.height} Z`;
-            const hatchPathData = `${outerRectPathData} ${shapePathData}`;
-            if (!shapePathData || !hatchPathData) {
-                this.debug("overlay:shape:skip", {
-                    reason: "path-generation-empty",
-                    shape,
-                    radius,
-                });
-                return [];
-            }
-            const patternFill = this.getCropShapeHatchPattern();
-            const hatchFill = patternFill || "rgba(255, 0, 0, 0.22)";
-            const shapeBounds = (0, geometry_1.getPathBounds)(shapePathData);
-            const hatchBounds = (0, geometry_1.getPathBounds)(hatchPathData);
-            const frameRect = this.toLayoutSceneRect(frame);
-            const hatchPathLength = hatchPathData.length;
-            const shapePathLength = shapePathData.length;
-            const specs = [
-                {
-                    id: "image.cropShapeHatch",
-                    type: "path",
-                    data: { id: "image.cropShapeHatch", zIndex: 5 },
-                    layout: {
-                        reference: "custom",
-                        referenceRect: frameRect,
-                        alignX: "start",
-                        alignY: "start",
-                        offsetX: hatchBounds.x,
-                        offsetY: hatchBounds.y,
-                    },
-                    props: {
-                        pathData: hatchPathData,
-                        originX: "left",
-                        originY: "top",
-                        fill: hatchFill,
-                        opacity: patternFill ? 1 : 0.8,
-                        stroke: "rgba(255, 0, 0, 0.9)",
-                        strokeWidth: this.canvasService?.toSceneLength(1) ?? 1,
-                        fillRule: "evenodd",
-                        selectable: false,
-                        evented: false,
-                        excludeFromExport: true,
-                        objectCaching: false,
-                    },
-                },
-            ];
-            this.debug("overlay:shape:built", {
-                shape,
-                radius,
-                inset,
-                shapeWidth,
-                shapeHeight,
-                fillRule: "evenodd",
-                shapePathLength,
-                hatchPathLength,
-                shapeBounds,
-                hatchBounds,
-                hatchFillType: hatchFill && typeof hatchFill === "object" ? "pattern" : "color",
-                ids: specs.map((spec) => spec.id),
-            });
-            return specs;
-        }
-        catch (error) {
-            this.debug("overlay:shape:error", {
-                shape,
-                radius,
-                error: error instanceof Error ? error.message : String(error),
-            });
-            return [];
-        }
-    }
     resolveRenderImageState(item) {
         const active = this.isToolActive;
         const sourceUrl = item.sourceUrl || item.url;
@@ -1262,167 +1094,35 @@ class ImageTool {
         }
         return specs;
     }
-    buildOverlaySpecs(frame, sceneGeometry) {
+    buildOverlaySpecs(overlayState) {
         const visible = this.isImageEditingVisible();
-        if (!visible ||
-            frame.width <= 0 ||
-            frame.height <= 0 ||
-            !this.canvasService) {
+        if (!visible || !overlayState || !this.canvasService) {
             this.debug("overlay:hidden", {
                 visible,
-                frame,
+                cutRect: overlayState?.layout.cutRect,
                 isToolActive: this.isToolActive,
                 isImageSelectionActive: this.isImageSelectionActive,
                 focusedImageId: this.focusedImageId,
             });
             return [];
         }
-        const viewport = this.canvasService.getSceneViewportRect();
-        const canvasW = viewport.width || 0;
-        const canvasH = viewport.height || 0;
-        const canvasLeft = viewport.left || 0;
-        const canvasTop = viewport.top || 0;
+        const viewport = this.canvasService.getScreenViewportRect();
         const visual = this.getFrameVisualConfig();
-        const strokeWidthScene = this.canvasService.toSceneLength(visual.strokeWidth);
-        const dashLengthScene = this.canvasService.toSceneLength(visual.dashLength);
-        const frameLeft = Math.max(canvasLeft, Math.min(canvasLeft + canvasW, frame.left));
-        const frameTop = Math.max(canvasTop, Math.min(canvasTop + canvasH, frame.top));
-        const frameRight = Math.max(frameLeft, Math.min(canvasLeft + canvasW, frame.left + frame.width));
-        const frameBottom = Math.max(frameTop, Math.min(canvasTop + canvasH, frame.top + frame.height));
-        const visibleFrameH = Math.max(0, frameBottom - frameTop);
-        const topH = Math.max(0, frameTop - canvasTop);
-        const bottomH = Math.max(0, canvasTop + canvasH - frameBottom);
-        const leftW = Math.max(0, frameLeft - canvasLeft);
-        const rightW = Math.max(0, canvasLeft + canvasW - frameRight);
-        const viewportRect = this.toLayoutSceneRect({
-            left: canvasLeft,
-            top: canvasTop,
-            width: canvasW,
-            height: canvasH,
-        });
-        const visibleFrameBandRect = this.toLayoutSceneRect({
-            left: canvasLeft,
-            top: frameTop,
-            width: canvasW,
-            height: visibleFrameH,
-        });
-        const frameRect = this.toLayoutSceneRect(frame);
-        const shapeOverlay = this.buildCropShapeOverlaySpecs(frame, sceneGeometry);
-        const mask = [
-            {
-                id: "image.cropMask.top",
-                type: "rect",
-                data: { id: "image.cropMask.top", zIndex: 1 },
-                layout: {
-                    reference: "custom",
-                    referenceRect: viewportRect,
-                    alignX: "start",
-                    alignY: "start",
-                    width: "100%",
-                    height: topH,
-                },
-                props: {
-                    originX: "left",
-                    originY: "top",
-                    fill: visual.outerBackground,
-                    selectable: false,
-                    evented: false,
-                },
+        const specs = (0, sessionOverlay_1.buildImageSessionOverlaySpecs)({
+            viewport: {
+                left: viewport.left,
+                top: viewport.top,
+                width: viewport.width,
+                height: viewport.height,
             },
-            {
-                id: "image.cropMask.bottom",
-                type: "rect",
-                data: { id: "image.cropMask.bottom", zIndex: 2 },
-                layout: {
-                    reference: "custom",
-                    referenceRect: viewportRect,
-                    alignX: "start",
-                    alignY: "end",
-                    width: "100%",
-                    height: bottomH,
-                },
-                props: {
-                    originX: "left",
-                    originY: "top",
-                    fill: visual.outerBackground,
-                    selectable: false,
-                    evented: false,
-                },
-            },
-            {
-                id: "image.cropMask.left",
-                type: "rect",
-                data: { id: "image.cropMask.left", zIndex: 3 },
-                layout: {
-                    reference: "custom",
-                    referenceRect: visibleFrameBandRect,
-                    alignX: "start",
-                    alignY: "start",
-                    width: leftW,
-                    height: "100%",
-                },
-                props: {
-                    originX: "left",
-                    originY: "top",
-                    fill: visual.outerBackground,
-                    selectable: false,
-                    evented: false,
-                },
-            },
-            {
-                id: "image.cropMask.right",
-                type: "rect",
-                data: { id: "image.cropMask.right", zIndex: 4 },
-                layout: {
-                    reference: "custom",
-                    referenceRect: visibleFrameBandRect,
-                    alignX: "end",
-                    alignY: "start",
-                    width: rightW,
-                    height: "100%",
-                },
-                props: {
-                    originX: "left",
-                    originY: "top",
-                    fill: visual.outerBackground,
-                    selectable: false,
-                    evented: false,
-                },
-            },
-        ];
-        const frameSpec = {
-            id: "image.cropFrame",
-            type: "rect",
-            data: { id: "image.cropFrame", zIndex: 7 },
-            layout: {
-                reference: "custom",
-                referenceRect: frameRect,
-                alignX: "start",
-                alignY: "start",
-                width: "100%",
-                height: "100%",
-            },
-            props: {
-                originX: "left",
-                originY: "top",
-                fill: visual.innerBackground,
-                stroke: visual.strokeStyle === "hidden"
-                    ? "rgba(0,0,0,0)"
-                    : visual.strokeColor,
-                strokeWidth: visual.strokeStyle === "hidden" ? 0 : strokeWidthScene,
-                strokeDashArray: visual.strokeStyle === "dashed"
-                    ? [dashLengthScene, dashLengthScene]
-                    : undefined,
-                selectable: false,
-                evented: false,
-            },
-        };
-        const specs = shapeOverlay.length > 0
-            ? [...mask, ...shapeOverlay]
-            : [...mask, ...shapeOverlay, frameSpec];
+            layout: overlayState.layout,
+            geometry: overlayState.geometry,
+            visual,
+            hatchPattern: this.getCropShapeHatchPattern(),
+        });
         this.debug("overlay:built", {
-            frame,
-            shape: sceneGeometry?.shape,
+            cutRect: overlayState.layout.cutRect,
+            shape: overlayState.geometry.shape,
             overlayIds: specs.map((spec) => ({
                 id: spec.id,
                 zIndex: spec.data?.zIndex,
@@ -1450,11 +1150,9 @@ class ImageTool {
         const imageSpecs = await this.buildImageSpecs(renderItems, frame);
         if (seq !== this.renderSeq)
             return;
-        const sceneGeometry = await this.resolveSceneGeometryForOverlay();
-        if (seq !== this.renderSeq)
-            return;
+        const overlayState = this.resolveSessionOverlayState();
         this.imageSpecs = imageSpecs;
-        this.overlaySpecs = this.buildOverlaySpecs(frame, sceneGeometry);
+        this.overlaySpecs = this.buildOverlaySpecs(overlayState);
         await this.canvasService.flushRenderFromProducers();
         if (seq !== this.renderSeq)
             return;

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

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildImageSessionOverlaySpecs = buildImageSessionOverlaySpecs;
+const geometry_1 = require("../geometry");
+const EPSILON = 0.0001;
+const SHAPE_OUTLINE_COLOR = "rgba(255, 0, 0, 0.9)";
+const DEFAULT_HATCH_FILL = "rgba(255, 0, 0, 0.22)";
+function buildRectPath(width, height) {
+    return `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z`;
+}
+function buildViewportMaskPath(viewport, cutRect) {
+    const cutLeft = cutRect.left - viewport.left;
+    const cutTop = cutRect.top - viewport.top;
+    return [
+        buildRectPath(viewport.width, viewport.height),
+        `M ${cutLeft} ${cutTop} L ${cutLeft + cutRect.width} ${cutTop} L ${cutLeft + cutRect.width} ${cutTop + cutRect.height} L ${cutLeft} ${cutTop + cutRect.height} Z`,
+    ].join(" ");
+}
+function resolveCutShapeRadiusPx(geometry, cutRect) {
+    const visualRadius = Number.isFinite(geometry.radius)
+        ? Math.max(0, geometry.radius)
+        : 0;
+    const visualOffset = Number.isFinite(geometry.offset) ? geometry.offset : 0;
+    const rawCutRadius = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
+    const maxRadius = Math.max(0, Math.min(cutRect.width, cutRect.height) / 2);
+    return Math.max(0, Math.min(maxRadius, rawCutRadius));
+}
+function buildBuiltinShapeOverlayPaths(cutRect, geometry) {
+    if (!geometry || geometry.shape === "custom") {
+        return null;
+    }
+    const radius = resolveCutShapeRadiusPx(geometry, cutRect);
+    if (geometry.shape === "rect" && radius <= EPSILON) {
+        return null;
+    }
+    const shapePathData = (0, geometry_1.generateDielinePath)({
+        shape: geometry.shape,
+        shapeStyle: geometry.shapeStyle,
+        width: Math.max(1, cutRect.width),
+        height: Math.max(1, cutRect.height),
+        radius,
+        x: cutRect.width / 2,
+        y: cutRect.height / 2,
+        features: [],
+        canvasWidth: Math.max(1, cutRect.width),
+        canvasHeight: Math.max(1, cutRect.height),
+    });
+    if (!shapePathData) {
+        return null;
+    }
+    return {
+        shapePathData,
+        hatchPathData: `${buildRectPath(cutRect.width, cutRect.height)} ${shapePathData}`,
+    };
+}
+function buildImageSessionOverlaySpecs(args) {
+    const { viewport, layout, geometry, visual, hatchPattern } = args;
+    const cutRect = layout.cutRect;
+    const specs = [];
+    specs.push({
+        id: "image.cropMask.rect",
+        type: "path",
+        space: "screen",
+        data: { id: "image.cropMask.rect", zIndex: 1 },
+        props: {
+            pathData: buildViewportMaskPath(viewport, cutRect),
+            left: viewport.left,
+            top: viewport.top,
+            originX: "left",
+            originY: "top",
+            fill: visual.outerBackground,
+            stroke: null,
+            fillRule: "evenodd",
+            selectable: false,
+            evented: false,
+            excludeFromExport: true,
+            objectCaching: false,
+        },
+    });
+    const shapeOverlay = buildBuiltinShapeOverlayPaths(cutRect, geometry);
+    if (shapeOverlay) {
+        specs.push({
+            id: "image.cropShapeHatch",
+            type: "path",
+            space: "screen",
+            data: { id: "image.cropShapeHatch", zIndex: 5 },
+            props: {
+                pathData: shapeOverlay.hatchPathData,
+                left: cutRect.left,
+                top: cutRect.top,
+                originX: "left",
+                originY: "top",
+                fill: hatchPattern || DEFAULT_HATCH_FILL,
+                opacity: hatchPattern ? 1 : 0.8,
+                stroke: null,
+                fillRule: "evenodd",
+                selectable: false,
+                evented: false,
+                excludeFromExport: true,
+                objectCaching: false,
+            },
+        });
+        specs.push({
+            id: "image.cropShapeOutline",
+            type: "path",
+            space: "screen",
+            data: { id: "image.cropShapeOutline", zIndex: 6 },
+            props: {
+                pathData: shapeOverlay.shapePathData,
+                left: cutRect.left,
+                top: cutRect.top,
+                originX: "left",
+                originY: "top",
+                fill: "transparent",
+                stroke: SHAPE_OUTLINE_COLOR,
+                strokeWidth: 1,
+                selectable: false,
+                evented: false,
+                excludeFromExport: true,
+                objectCaching: false,
+            },
+        });
+    }
+    specs.push({
+        id: "image.cropFrame",
+        type: "rect",
+        space: "screen",
+        data: { id: "image.cropFrame", zIndex: 7 },
+        props: {
+            left: cutRect.left,
+            top: cutRect.top,
+            width: cutRect.width,
+            height: cutRect.height,
+            originX: "left",
+            originY: "top",
+            fill: visual.innerBackground,
+            stroke: visual.strokeStyle === "hidden" ? "rgba(0,0,0,0)" : visual.strokeColor,
+            strokeWidth: visual.strokeStyle === "hidden" ? 0 : visual.strokeWidth,
+            strokeDashArray: visual.strokeStyle === "dashed"
+                ? [visual.dashLength, visual.dashLength]
+                : undefined,
+            selectable: false,
+            evented: false,
+            excludeFromExport: true,
+        },
+    });
+    return specs;
+}