@pooder/kit 5.3.1 → 6.0.0

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

@@ -3,6 +3,7 @@ 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("./sceneLayoutModel");
 const IMAGE_OBJECT_LAYER_ID = "image.user";
@@ -23,6 +24,8 @@ class ImageTool {
         this.isImageSelectionActive = false;
         this.focusedImageId = null;
         this.renderSeq = 0;
+        this.imageSpecs = [];
+        this.overlaySpecs = [];
         this.onToolActivated = (event) => {
             const before = this.isToolActive;
             this.syncToolActiveFromWorkbench(event.id);
@@ -99,16 +102,20 @@ class ImageTool {
             const center = target.getCenterPoint
                 ? target.getCenterPoint()
                 : new fabric_1.Point(target.left ?? 0, target.top ?? 0);
+            const centerScene = this.canvasService
+                ? this.canvasService.toScenePoint({ x: center.x, y: center.y })
+                : { x: center.x, y: center.y };
             const objectScale = Number.isFinite(target?.scaleX) ? target.scaleX : 1;
+            const objectScaleScene = this.toSceneObjectScale(objectScale || 1);
             const workingItem = this.workingItems.find((item) => item.id === id);
             const sourceKey = workingItem?.sourceUrl || workingItem?.url || "";
             const sourceSize = this.getSourceSize(sourceKey, target);
             const coverScale = this.getCoverScale(frame, sourceSize);
             const updates = {
-                left: this.clampNormalized((center.x - frame.left) / frame.width),
-                top: this.clampNormalized((center.y - frame.top) / frame.height),
+                left: this.clampNormalized((centerScene.x - frame.left) / frame.width),
+                top: this.clampNormalized((centerScene.y - frame.top) / frame.height),
                 angle: Number.isFinite(target.angle) ? target.angle : 0,
-                scale: Math.max(0.05, (objectScale || 1) / coverScale),
+                scale: Math.max(0.05, objectScaleScene / coverScale),
             };
             this.focusedImageId = id;
             this.updateImageInWorking(id, updates);
@@ -121,6 +128,37 @@ class ImageTool {
             console.warn("CanvasService not found for ImageTool");
             return;
         }
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => ({
+            passes: [
+                {
+                    id: IMAGE_OBJECT_LAYER_ID,
+                    stack: 500,
+                    order: 0,
+                    visibility: {
+                        op: "not",
+                        expr: {
+                            op: "sessionActive",
+                            toolId: "pooder.kit.white-ink",
+                        },
+                    },
+                    objects: this.imageSpecs,
+                },
+                {
+                    id: IMAGE_OVERLAY_LAYER_ID,
+                    stack: 800,
+                    order: 0,
+                    visibility: {
+                        op: "not",
+                        expr: {
+                            op: "sessionActive",
+                            toolId: "pooder.kit.white-ink",
+                        },
+                    },
+                    objects: this.overlaySpecs,
+                },
+            ],
+        }), { priority: 300 });
         context.eventBus.on("tool:activated", this.onToolActivated);
         context.eventBus.on("object:modified", this.onObjectModified);
         context.eventBus.on("selection:created", this.onSelectionChanged);
@@ -166,9 +204,14 @@ class ImageTool {
         this.dirtyTrackerDisposable = undefined;
         this.cropShapeHatchPattern = undefined;
         this.cropShapeHatchPatternColor = undefined;
+        this.cropShapeHatchPatternKey = undefined;
+        this.imageSpecs = [];
+        this.overlaySpecs = [];
         this.clearRenderedImages();
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = undefined;
         if (this.canvasService) {
-            void this.canvasService.applyObjectSpecsToRootLayer(IMAGE_OVERLAY_LAYER_ID, []);
+            void this.canvasService.flushRenderFromProducers();
             this.canvasService = undefined;
         }
         this.context = undefined;
@@ -581,42 +624,40 @@ class ImageTool {
         if (!layout) {
             return { left: 0, top: 0, width: 0, height: 0 };
         }
-        return {
+        return this.canvasService.toSceneRect({
             left: layout.cutRect.left,
             top: layout.cutRect.top,
             width: layout.cutRect.width,
             height: layout.cutRect.height,
+        });
+    }
+    getFrameRectScreen(frame) {
+        if (!this.canvasService) {
+            return { left: 0, top: 0, width: 0, height: 0 };
+        }
+        return this.canvasService.toScreenRect(frame || this.getFrameRect());
+    }
+    toLayoutSceneRect(rect) {
+        return {
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height,
+            space: "scene",
         };
     }
     async resolveDefaultFitArea() {
-        if (!this.context || !this.canvasService)
-            return null;
-        const commandService = this.context.services.get("CommandService");
-        if (!commandService)
+        if (!this.canvasService)
             return null;
-        try {
-            const layout = await Promise.resolve(commandService.executeCommand("getSceneLayout"));
-            const cutRect = layout?.cutRect;
-            const width = Number(cutRect?.width);
-            const height = Number(cutRect?.height);
-            const left = Number(cutRect?.left);
-            const top = Number(cutRect?.top);
-            if (!Number.isFinite(width) ||
-                !Number.isFinite(height) ||
-                !Number.isFinite(left) ||
-                !Number.isFinite(top)) {
-                return null;
-            }
-            return {
-                width: Math.max(1, width),
-                height: Math.max(1, height),
-                left: left + width / 2,
-                top: top + height / 2,
-            };
-        }
-        catch {
+        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)
@@ -626,13 +667,14 @@ class ImageTool {
             await this.fitImageToArea(id, area);
             return;
         }
-        const canvasW = Math.max(1, this.canvasService.canvas.width || 0);
-        const canvasH = Math.max(1, this.canvasService.canvas.height || 0);
+        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: canvasW / 2,
-            top: canvasH / 2,
+            left: viewport.left + canvasW / 2,
+            top: viewport.top + canvasH / 2,
         });
     }
     getImageObjects() {
@@ -645,7 +687,7 @@ class ImageTool {
     getOverlayObjects() {
         if (!this.canvasService)
             return [];
-        return this.canvasService.getRootLayerObjects(IMAGE_OVERLAY_LAYER_ID);
+        return this.canvasService.getPassObjects(IMAGE_OVERLAY_LAYER_ID);
     }
     getImageObject(id) {
         return this.getImageObjects().find((obj) => obj?.data?.id === id);
@@ -653,9 +695,9 @@ class ImageTool {
     clearRenderedImages() {
         if (!this.canvasService)
             return;
-        const canvas = this.canvasService.canvas;
-        this.getImageObjects().forEach((obj) => canvas.remove(obj));
-        this.canvasService.requestRenderAll();
+        this.imageSpecs = [];
+        this.overlaySpecs = [];
+        this.canvasService.requestRenderFromProducers();
     }
     purgeSourceSizeCacheForItem(item) {
         if (!item)
@@ -683,6 +725,32 @@ class ImageTool {
         }
         return { width: 1, height: 1 };
     }
+    async ensureSourceSize(src) {
+        if (!src)
+            return null;
+        const cached = this.sourceSizeBySrc.get(src);
+        if (cached)
+            return cached;
+        try {
+            const image = await fabric_1.Image.fromURL(src, {
+                crossOrigin: "anonymous",
+            });
+            const width = Number(image?.width || 0);
+            const height = Number(image?.height || 0);
+            if (width > 0 && height > 0) {
+                const size = { width, height };
+                this.sourceSizeBySrc.set(src, size);
+                return size;
+            }
+        }
+        catch (error) {
+            this.debug("image:size:load-failed", {
+                src,
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+        return null;
+    }
     getCoverScale(frame, size) {
         const sw = Math.max(1, size.width);
         const sh = Math.max(1, size.height);
@@ -710,16 +778,21 @@ class ImageTool {
     }
     toSceneGeometryLike(raw) {
         const shape = raw?.shape;
-        if (shape !== "rect" &&
-            shape !== "circle" &&
-            shape !== "ellipse" &&
-            shape !== "custom") {
+        if (!(0, dielineShape_1.isDielineShape)(shape)) {
             return null;
         }
-        const radius = Number(raw?.radius);
-        const offset = Number(raw?.offset);
+        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,
         };
@@ -773,8 +846,11 @@ class ImageTool {
     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)}`;
         if (this.cropShapeHatchPattern &&
-            this.cropShapeHatchPatternColor === color) {
+            this.cropShapeHatchPatternColor === color &&
+            this.cropShapeHatchPatternKey === cacheKey) {
             return this.cropShapeHatchPattern;
         }
         const size = 16;
@@ -804,8 +880,18 @@ 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) {
@@ -818,6 +904,7 @@ class ImageTool {
             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);
@@ -827,6 +914,7 @@ class ImageTool {
             frameWidth: frame.width,
             frameHeight: frame.height,
             offset: sceneGeometry.offset,
+            shapeStyle,
             inset,
             shapeWidth,
             shapeHeight,
@@ -849,6 +937,7 @@ class ImageTool {
             x: frame.width / 2,
             y: frame.height / 2,
             features: [],
+            shapeStyle,
             canvasWidth: frame.width,
             canvasHeight: frame.height,
         };
@@ -866,6 +955,9 @@ class ImageTool {
             }
             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 = [
@@ -873,10 +965,16 @@ class ImageTool {
                     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,
-                        left: frame.left,
-                        top: frame.top,
                         originX: "left",
                         originY: "top",
                         fill: hatchFill,
@@ -893,15 +991,21 @@ class ImageTool {
                     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,
-                        left: frame.left,
-                        top: frame.top,
                         originX: "left",
                         originY: "top",
                         fill: "rgba(0,0,0,0)",
                         stroke: "rgba(255, 0, 0, 0.9)",
-                        strokeWidth: 1,
+                        strokeWidth: this.canvasService?.toSceneLength(1) ?? 1,
                         selectable: false,
                         evented: false,
                         excludeFromExport: true,
@@ -918,6 +1022,8 @@ class ImageTool {
                 fillRule: "evenodd",
                 shapePathLength,
                 hatchPathLength,
+                shapeBounds,
+                hatchBounds,
                 hatchFillType: hatchFill && typeof hatchFill === "object" ? "pattern" : "color",
                 ids: specs.map((spec) => spec.id),
             });
@@ -980,6 +1086,11 @@ class ImageTool {
             opacity: render.opacity,
         };
     }
+    toSceneObjectScale(value) {
+        if (!this.canvasService)
+            return value;
+        return value / this.canvasService.getSceneScale();
+    }
     getCurrentSrc(obj) {
         if (!obj)
             return undefined;
@@ -987,109 +1098,28 @@ class ImageTool {
             return obj.getSrc();
         return obj?._originalElement?.src;
     }
-    applyImageControlVisibility(obj) {
-        if (typeof obj?.setControlsVisibility !== "function")
-            return;
-        obj.setControlsVisibility({
-            mt: false,
-            mb: false,
-            ml: false,
-            mr: false,
-            tl: true,
-            tr: true,
-            bl: true,
-            br: true,
-            mtr: true,
-        });
-    }
-    async upsertImageObject(item, frame, seq) {
-        if (!this.canvasService)
-            return;
-        const canvas = this.canvasService.canvas;
-        const render = this.resolveRenderImageState(item);
-        if (!render.src)
-            return;
-        let obj = this.getImageObject(item.id);
-        const currentSrc = this.getCurrentSrc(obj);
-        if (obj && currentSrc && currentSrc !== render.src) {
-            canvas.remove(obj);
-            obj = undefined;
-        }
-        if (!obj) {
-            const created = await fabric_1.Image.fromURL(render.src, {
-                crossOrigin: "anonymous",
-            });
-            if (seq !== this.renderSeq)
-                return;
-            created.set({
+    async buildImageSpecs(items, frame) {
+        const specs = [];
+        for (const item of items) {
+            const render = this.resolveRenderImageState(item);
+            if (!render.src)
+                continue;
+            const ensured = await this.ensureSourceSize(render.src);
+            const sourceSize = ensured || this.getSourceSize(render.src);
+            const props = this.computeCanvasProps(render, sourceSize, frame);
+            specs.push({
+                id: item.id,
+                type: "image",
+                src: render.src,
                 data: {
                     id: item.id,
                     layerId: IMAGE_OBJECT_LAYER_ID,
                     type: "image-item",
                 },
+                props,
             });
-            canvas.add(created);
-            obj = created;
-        }
-        this.rememberSourceSize(render.src, obj);
-        const sourceSize = this.getSourceSize(render.src, obj);
-        const props = this.computeCanvasProps(render, sourceSize, frame);
-        obj.set({
-            ...props,
-            data: {
-                ...(obj.data || {}),
-                id: item.id,
-                layerId: IMAGE_OBJECT_LAYER_ID,
-                type: "image-item",
-            },
-        });
-        this.applyImageControlVisibility(obj);
-        obj.setCoords();
-        const resolver = this.loadResolvers.get(item.id);
-        if (resolver) {
-            resolver();
-            this.loadResolvers.delete(item.id);
-        }
-    }
-    syncImageZOrder(items) {
-        if (!this.canvasService)
-            return;
-        const canvas = this.canvasService.canvas;
-        const objects = canvas.getObjects();
-        let insertIndex = 0;
-        const backgroundLayer = this.canvasService.getLayer("background");
-        if (backgroundLayer) {
-            const bgIndex = objects.indexOf(backgroundLayer);
-            if (bgIndex >= 0)
-                insertIndex = bgIndex + 1;
-        }
-        items.forEach((item) => {
-            const obj = this.getImageObject(item.id);
-            if (!obj)
-                return;
-            canvas.moveObjectTo(obj, insertIndex);
-            insertIndex += 1;
-        });
-        const overlayObjects = this.getOverlayObjects().sort((a, b) => {
-            const az = Number(a?.data?.zIndex ?? 0);
-            const bz = Number(b?.data?.zIndex ?? 0);
-            return az - bz;
-        });
-        overlayObjects.forEach((obj) => {
-            canvas.bringObjectToFront(obj);
-        });
-        if (this.isDebugEnabled()) {
-            const stack = canvas
-                .getObjects()
-                .map((obj, index) => ({
-                index,
-                id: obj?.data?.id,
-                layerId: obj?.data?.layerId,
-                zIndex: obj?.data?.zIndex,
-            }))
-                .filter((item) => item.layerId === IMAGE_OVERLAY_LAYER_ID);
-            this.debug("overlay:stack", stack);
         }
+        return specs;
     }
     buildOverlaySpecs(frame, sceneGeometry) {
         const visible = this.isImageEditingVisible();
@@ -1106,31 +1136,53 @@ class ImageTool {
             });
             return [];
         }
-        const canvasW = this.canvasService.canvas.width || 0;
-        const canvasH = this.canvasService.canvas.height || 0;
+        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 visual = this.getFrameVisualConfig();
-        const frameLeft = Math.max(0, Math.min(canvasW, frame.left));
-        const frameTop = Math.max(0, Math.min(canvasH, frame.top));
-        const frameRight = Math.max(frameLeft, Math.min(canvasW, frame.left + frame.width));
-        const frameBottom = Math.max(frameTop, Math.min(canvasH, frame.top + frame.height));
+        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 = frameTop;
-        const bottomH = Math.max(0, canvasH - frameBottom);
-        const leftW = frameLeft;
-        const rightW = Math.max(0, canvasW - frameRight);
+        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 },
-                props: {
-                    left: canvasW / 2,
-                    top: topH / 2,
-                    width: canvasW,
+                layout: {
+                    reference: "custom",
+                    referenceRect: viewportRect,
+                    alignX: "start",
+                    alignY: "start",
+                    width: "100%",
                     height: topH,
-                    originX: "center",
-                    originY: "center",
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
                     fill: visual.outerBackground,
                     selectable: false,
                     evented: false,
@@ -1140,13 +1192,17 @@ class ImageTool {
                 id: "image.cropMask.bottom",
                 type: "rect",
                 data: { id: "image.cropMask.bottom", zIndex: 2 },
-                props: {
-                    left: canvasW / 2,
-                    top: frameBottom + bottomH / 2,
-                    width: canvasW,
+                layout: {
+                    reference: "custom",
+                    referenceRect: viewportRect,
+                    alignX: "start",
+                    alignY: "end",
+                    width: "100%",
                     height: bottomH,
-                    originX: "center",
-                    originY: "center",
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
                     fill: visual.outerBackground,
                     selectable: false,
                     evented: false,
@@ -1156,13 +1212,17 @@ class ImageTool {
                 id: "image.cropMask.left",
                 type: "rect",
                 data: { id: "image.cropMask.left", zIndex: 3 },
-                props: {
-                    left: leftW / 2,
-                    top: frameTop + visibleFrameH / 2,
+                layout: {
+                    reference: "custom",
+                    referenceRect: visibleFrameBandRect,
+                    alignX: "start",
+                    alignY: "start",
                     width: leftW,
-                    height: visibleFrameH,
-                    originX: "center",
-                    originY: "center",
+                    height: "100%",
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
                     fill: visual.outerBackground,
                     selectable: false,
                     evented: false,
@@ -1172,13 +1232,17 @@ class ImageTool {
                 id: "image.cropMask.right",
                 type: "rect",
                 data: { id: "image.cropMask.right", zIndex: 4 },
-                props: {
-                    left: frameRight + rightW / 2,
-                    top: frameTop + visibleFrameH / 2,
+                layout: {
+                    reference: "custom",
+                    referenceRect: visibleFrameBandRect,
+                    alignX: "end",
+                    alignY: "start",
                     width: rightW,
-                    height: visibleFrameH,
-                    originX: "center",
-                    originY: "center",
+                    height: "100%",
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
                     fill: visual.outerBackground,
                     selectable: false,
                     evented: false,
@@ -1189,26 +1253,32 @@ class ImageTool {
             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: {
-                left: frame.left + frame.width / 2,
-                top: frame.top + frame.height / 2,
-                width: frame.width,
-                height: frame.height,
-                originX: "center",
-                originY: "center",
+                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,
+                strokeWidth: visual.strokeStyle === "hidden" ? 0 : strokeWidthScene,
                 strokeDashArray: visual.strokeStyle === "dashed"
-                    ? [visual.dashLength, visual.dashLength]
+                    ? [dashLengthScene, dashLengthScene]
                     : undefined,
                 selectable: false,
                 evented: false,
             },
         };
-        const specs = [...mask, ...shapeOverlay, frameSpec];
+        const specs = shapeOverlay.length > 0
+            ? [...mask, ...shapeOverlay]
+            : [...mask, ...shapeOverlay, frameSpec];
         this.debug("overlay:built", {
             frame,
             shape: sceneGeometry?.shape,
@@ -1236,31 +1306,37 @@ class ImageTool {
                 skipRender: true,
             });
         }
-        this.getImageObjects().forEach((obj) => {
-            const id = obj?.data?.id;
-            if (typeof id === "string" && !desiredIds.has(id)) {
-                this.canvasService?.canvas.remove(obj);
-            }
-        });
-        for (const item of renderItems) {
-            if (seq !== this.renderSeq)
-                return;
-            await this.upsertImageObject(item, frame, seq);
-        }
+        const imageSpecs = await this.buildImageSpecs(renderItems, frame);
         if (seq !== this.renderSeq)
             return;
-        this.syncImageZOrder(renderItems);
         const sceneGeometry = await this.resolveSceneGeometryForOverlay();
         if (seq !== this.renderSeq)
             return;
-        const overlaySpecs = this.buildOverlaySpecs(frame, sceneGeometry);
-        await this.canvasService.applyObjectSpecsToRootLayer(IMAGE_OVERLAY_LAYER_ID, overlaySpecs);
-        this.syncImageZOrder(renderItems);
+        this.imageSpecs = imageSpecs;
+        this.overlaySpecs = this.buildOverlaySpecs(frame, sceneGeometry);
+        await this.canvasService.flushRenderFromProducers();
+        if (seq !== this.renderSeq)
+            return;
+        renderItems.forEach((item) => {
+            if (!this.getImageObject(item.id))
+                return;
+            const resolver = this.loadResolvers.get(item.id);
+            if (!resolver)
+                return;
+            resolver();
+            this.loadResolvers.delete(item.id);
+        });
+        if (this.focusedImageId && this.isToolActive) {
+            this.setImageFocus(this.focusedImageId, {
+                syncCanvasSelection: true,
+                skipRender: true,
+            });
+        }
         const overlayCanvasCount = this.getOverlayObjects().length;
         this.debug("render:done", {
             seq,
             renderCount: renderItems.length,
-            overlayCount: overlaySpecs.length,
+            overlayCount: this.overlaySpecs.length,
             overlayCanvasCount,
             isToolActive: this.isToolActive,
             isImageSelectionActive: this.isImageSelectionActive,
@@ -1350,7 +1426,7 @@ class ImageTool {
         const source = this.getSourceSize(render.src, obj);
         const frame = this.getFrameRect();
         const coverScale = this.getCoverScale(frame, source);
-        const currentScale = obj.scaleX || 1;
+        const currentScale = this.toSceneObjectScale(obj.scaleX || 1);
         const zoom = Math.max(0.05, currentScale / coverScale);
         const updated = {
             scale: Number.isFinite(zoom) ? zoom : 1,
@@ -1388,12 +1464,17 @@ class ImageTool {
         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 canvasW = this.canvasService.canvas.width || 1;
-        const canvasH = this.canvasService.canvas.height || 1;
+        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 ? areaLeftInput * canvasW : areaLeftInput;
-        const areaTopPx = areaTopInput <= 1.5 ? areaTopInput * canvasH : areaTopInput;
+        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)),
@@ -1426,6 +1507,8 @@ class ImageTool {
             next.push(this.normalizeItem({
                 ...item,
                 url,
+                // Keep original source for next image-tool session editing,
+                // and use committedUrl as non-image-tools render source.
                 sourceUrl,
                 committedUrl: url,
             }));
@@ -1447,7 +1530,8 @@ class ImageTool {
         if (!normalizedIds.length) {
             throw new Error("image-ids-required");
         }
-        const frame = this.getFrameRect();
+        const frameScene = this.getFrameRect();
+        const frame = this.getFrameRectScreen(frameScene);
         const multiplier = Math.max(1, options.multiplier ?? 2);
         const format = options.format === "jpeg" ? "jpeg" : "png";
         const width = Math.max(1, Math.round(frame.width * multiplier));