@pooder/kit 6.2.1 → 6.3.0

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,8 @@ 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 imageOperations_1 = require("./imageOperations");
+const sessionOverlay_1 = require("./sessionOverlay");
 const IMAGE_DEFAULT_CONTROL_CAPABILITIES = [
     "rotate",
     "scale",
@@ -256,6 +256,7 @@ class ImageTool {
         this.clearRenderedImages();
         this.renderProducerDisposable?.dispose();
         this.renderProducerDisposable = undefined;
+        this.emitImageStateChange();
         if (this.canvasService) {
             void this.canvasService.flushRenderFromProducers();
             this.canvasService = undefined;
@@ -427,10 +428,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() {
@@ -636,9 +647,9 @@ class ImageTool {
                     name: "Image",
                     interaction: "session",
                     commands: {
-                        begin: "resetWorkingImages",
+                        begin: "imageSessionReset",
                         commit: "completeImages",
-                        rollback: "resetWorkingImages",
+                        rollback: "imageSessionReset",
                     },
                     session: {
                         autoBegin: true,
@@ -676,6 +687,29 @@ class ImageTool {
     cloneItems(items) {
         return this.normalizeItems((items || []).map((i) => ({ ...i })));
     }
+    getViewItems() {
+        return this.isToolActive ? this.workingItems : this.items;
+    }
+    getImageViewState() {
+        this.syncToolActiveFromWorkbench();
+        const items = this.cloneItems(this.getViewItems());
+        const focusedItem = this.focusedImageId == null
+            ? null
+            : items.find((item) => item.id === this.focusedImageId) || null;
+        return {
+            items,
+            hasAnyImage: items.length > 0,
+            focusedId: this.focusedImageId,
+            focusedItem,
+            isToolActive: this.isToolActive,
+            isImageSelectionActive: this.isImageSelectionActive,
+            hasWorkingChanges: this.hasWorkingChanges,
+            source: this.isToolActive ? "working" : "committed",
+        };
+    }
+    emitImageStateChange() {
+        this.context?.eventBus.emit("image:state:change", this.getImageViewState());
+    }
     emitWorkingChange(changedId = null) {
         this.context?.eventBus.emit("image:working:change", {
             changedId,
@@ -713,9 +747,13 @@ class ImageTool {
         if (!options.skipRender) {
             this.updateImages();
         }
+        else {
+            this.emitImageStateChange();
+        }
         return { ok: true, id };
     }
-    async addImageEntry(url, options, fitOnAdd = true) {
+    async addImageEntry(url, options, operation) {
+        this.syncToolActiveFromWorkbench();
         const id = this.generateId();
         const newItem = this.normalizeItem({
             id,
@@ -723,13 +761,21 @@ class ImageTool {
             opacity: 1,
             ...options,
         });
-        const sessionDirtyBeforeAdd = this.isToolActive && this.hasWorkingChanges;
         const waitLoaded = this.waitImageLoaded(id, true);
-        this.updateConfig([...this.items, newItem]);
-        this.addItemToWorkingSessionIfNeeded(newItem, sessionDirtyBeforeAdd);
+        if (this.isToolActive) {
+            this.workingItems = this.cloneItems([...this.workingItems, newItem]);
+            this.hasWorkingChanges = true;
+            this.updateImages();
+            this.emitWorkingChange(id);
+        }
+        else {
+            this.updateConfig([...this.items, newItem]);
+        }
         const loaded = await waitLoaded;
-        if (loaded && fitOnAdd) {
-            await this.fitImageToDefaultArea(id);
+        if (loaded && operation) {
+            await this.applyImageOperation(id, operation, {
+                target: this.isToolActive ? "working" : "config",
+            });
         }
         if (loaded) {
             this.setImageFocus(id);
@@ -737,8 +783,8 @@ class ImageTool {
         return id;
     }
     async upsertImageEntry(url, options = {}) {
+        this.syncToolActiveFromWorkbench();
         const mode = options.mode || (options.id ? "replace" : "add");
-        const fitOnAdd = options.fitOnAdd !== false;
         if (mode === "replace") {
             if (!options.id) {
                 throw new Error("replace-target-id-required");
@@ -747,21 +793,33 @@ class ImageTool {
             if (!this.hasImageItem(targetId)) {
                 throw new Error("replace-target-not-found");
             }
-            await this.updateImageInConfig(targetId, { url });
+            if (this.isToolActive) {
+                const current = this.workingItems.find((item) => item.id === targetId) ||
+                    this.items.find((item) => item.id === targetId);
+                this.purgeSourceSizeCacheForItem(current);
+                this.updateImageInWorking(targetId, {
+                    url,
+                    sourceUrl: url,
+                    committedUrl: undefined,
+                });
+            }
+            else {
+                await this.updateImageInConfig(targetId, { url });
+            }
+            const loaded = await this.waitImageLoaded(targetId, true);
+            if (loaded && options.operation) {
+                await this.applyImageOperation(targetId, options.operation, {
+                    target: this.isToolActive ? "working" : "config",
+                });
+            }
+            if (loaded) {
+                this.setImageFocus(targetId);
+            }
             return { id: targetId, mode: "replace" };
         }
-        const id = await this.addImageEntry(url, options.addOptions, fitOnAdd);
+        const id = await this.addImageEntry(url, options.addOptions, options.operation);
         return { id, mode: "add" };
     }
-    addItemToWorkingSessionIfNeeded(item, sessionDirtyBeforeAdd) {
-        if (!sessionDirtyBeforeAdd || !this.isToolActive)
-            return;
-        if (this.workingItems.some((existing) => existing.id === item.id))
-            return;
-        this.workingItems = this.cloneItems([...this.workingItems, item]);
-        this.updateImages();
-        this.emitWorkingChange(item.id);
-    }
     async updateImage(id, updates, options = {}) {
         this.syncToolActiveFromWorkbench();
         const target = options.target || "auto";
@@ -816,40 +874,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;
-        const frame = this.getFrameRect();
-        if (frame.width <= 0 || frame.height <= 0)
-            return null;
-        return {
-            width: Math.max(1, frame.width),
-            height: Math.max(1, frame.height),
-            left: frame.left + frame.width / 2,
-            top: frame.top + frame.height / 2,
-        };
-    }
-    async fitImageToDefaultArea(id) {
-        if (!this.canvasService)
-            return;
-        const area = await this.resolveDefaultFitArea();
-        if (area) {
-            await this.fitImageToArea(id, area);
-            return;
-        }
-        const viewport = this.canvasService.getSceneViewportRect();
-        const canvasW = Math.max(1, viewport.width || 0);
-        const canvasH = Math.max(1, viewport.height || 0);
-        await this.fitImageToArea(id, {
-            width: canvasW,
-            height: canvasH,
-            left: viewport.left + canvasW / 2,
-            top: viewport.top + canvasH / 2,
-        });
-    }
     getImageObjects() {
         if (!this.canvasService)
             return [];
@@ -941,78 +965,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 +1024,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 +1112,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 +1168,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;
@@ -1484,11 +1200,39 @@ class ImageTool {
             isImageSelectionActive: this.isImageSelectionActive,
             focusedImageId: this.focusedImageId,
         });
+        this.emitImageStateChange();
         this.canvasService.requestRenderAll();
     }
     clampNormalized(value) {
         return Math.max(-1, Math.min(2, value));
     }
+    async setImageTransform(id, updates, options = {}) {
+        const next = {};
+        if (Number.isFinite(updates.scale)) {
+            next.scale = Math.max(0.05, Number(updates.scale));
+        }
+        if (Number.isFinite(updates.angle)) {
+            next.angle = Number(updates.angle);
+        }
+        if (Number.isFinite(updates.left)) {
+            next.left = this.clampNormalized(Number(updates.left));
+        }
+        if (Number.isFinite(updates.top)) {
+            next.top = this.clampNormalized(Number(updates.top));
+        }
+        if (Number.isFinite(updates.opacity)) {
+            next.opacity = Math.max(0, Math.min(1, Number(updates.opacity)));
+        }
+        if (!Object.keys(next).length)
+            return;
+        await this.updateImage(id, next, options);
+    }
+    resetImageSession() {
+        this.workingItems = this.cloneItems(this.items);
+        this.hasWorkingChanges = false;
+        this.updateImages();
+        this.emitWorkingChange();
+    }
     updateImageInWorking(id, updates) {
         const index = this.workingItems.findIndex((item) => item.id === id);
         if (index < 0)
@@ -1522,23 +1266,12 @@ class ImageTool {
                     url: replacingUrl,
                     sourceUrl: replacingUrl,
                     committedUrl: undefined,
-                    scale: updates.scale ?? 1,
-                    angle: updates.angle ?? 0,
-                    left: updates.left ?? 0.5,
-                    top: updates.top ?? 0.5,
                 }
                 : {}),
         });
         this.updateConfig(next);
         if (replacingSource) {
-            this.debug("replace:image:begin", { id, replacingUrl });
             this.purgeSourceSizeCacheForItem(base);
-            const loaded = await this.waitImageLoaded(id, true);
-            this.debug("replace:image:loaded", { id, loaded });
-            if (loaded) {
-                await this.refitImageToFrame(id);
-                this.setImageFocus(id);
-            }
         }
     }
     waitImageLoaded(id, forceWait = false) {
@@ -1556,73 +1289,53 @@ class ImageTool {
             });
         });
     }
-    async refitImageToFrame(id) {
+    async resolveImageSourceSize(id, src) {
         const obj = this.getImageObject(id);
-        if (!obj || !this.canvasService)
-            return;
-        const current = this.items.find((item) => item.id === id);
-        if (!current)
-            return;
-        const render = this.resolveRenderImageState(current);
-        this.rememberSourceSize(render.src, obj);
-        const source = this.getSourceSize(render.src, obj);
-        const frame = this.getFrameRect();
-        const coverScale = this.getCoverScale(frame, source);
-        const currentScale = this.toSceneObjectScale(obj.scaleX || 1);
-        const zoom = Math.max(0.05, currentScale / coverScale);
-        const updated = {
-            scale: Number.isFinite(zoom) ? zoom : 1,
-            angle: 0,
-            left: 0.5,
-            top: 0.5,
-        };
-        const index = this.items.findIndex((item) => item.id === id);
-        if (index < 0)
-            return;
-        const next = [...this.items];
-        next[index] = this.normalizeItem({ ...next[index], ...updated });
-        this.updateConfig(next);
-        this.workingItems = this.cloneItems(next);
-        this.hasWorkingChanges = false;
-        this.updateImages();
-        this.emitWorkingChange(id);
+        if (obj) {
+            this.rememberSourceSize(src, obj);
+        }
+        const ensured = await this.ensureSourceSize(src);
+        if (ensured)
+            return ensured;
+        if (!obj)
+            return null;
+        const width = Number(obj?.width || 0);
+        const height = Number(obj?.height || 0);
+        if (width <= 0 || height <= 0)
+            return null;
+        return { width, height };
     }
-    async fitImageToArea(id, area) {
+    async applyImageOperation(id, operation, options = {}) {
         if (!this.canvasService)
             return;
-        const loaded = await this.waitImageLoaded(id, false);
-        if (!loaded)
-            return;
-        const obj = this.getImageObject(id);
-        if (!obj)
-            return;
-        const renderItems = this.isToolActive ? this.workingItems : this.items;
+        this.syncToolActiveFromWorkbench();
+        const target = options.target || "auto";
+        const renderItems = target === "working" || (target === "auto" && this.isToolActive)
+            ? this.workingItems
+            : this.items;
         const current = renderItems.find((item) => item.id === id);
         if (!current)
             return;
         const render = this.resolveRenderImageState(current);
-        this.rememberSourceSize(render.src, obj);
-        const source = this.getSourceSize(render.src, obj);
+        const source = await this.resolveImageSourceSize(id, render.src);
+        if (!source)
+            return;
         const frame = this.getFrameRect();
-        const baseCover = this.getCoverScale(frame, source);
-        const desiredScale = Math.max(Math.max(1, area.width) / Math.max(1, source.width), Math.max(1, area.height) / Math.max(1, source.height));
         const viewport = this.canvasService.getSceneViewportRect();
-        const canvasW = viewport.width || 1;
-        const canvasH = viewport.height || 1;
-        const areaLeftInput = area.left ?? 0.5;
-        const areaTopInput = area.top ?? 0.5;
-        const areaLeftPx = areaLeftInput <= 1.5
-            ? viewport.left + areaLeftInput * canvasW
-            : areaLeftInput;
-        const areaTopPx = areaTopInput <= 1.5
-            ? viewport.top + areaTopInput * canvasH
-            : areaTopInput;
-        const updates = {
-            scale: Math.max(0.05, desiredScale / baseCover),
-            left: this.clampNormalized((areaLeftPx - frame.left) / Math.max(1, frame.width)),
-            top: this.clampNormalized((areaTopPx - frame.top) / Math.max(1, frame.height)),
-        };
-        if (this.isToolActive) {
+        const area = operation.type === "resetTransform"
+            ? (0, imageOperations_1.resolveImageOperationArea)({ frame, viewport })
+            : (0, imageOperations_1.resolveImageOperationArea)({
+                frame,
+                viewport,
+                area: operation.area,
+            });
+        const updates = (0, imageOperations_1.computeImageOperationUpdates)({
+            frame,
+            source,
+            operation,
+            area,
+        });
+        if (target === "working" || (target === "auto" && this.isToolActive)) {
             this.updateImageInWorking(id, updates);
             return;
         }