@pooder/kit 5.3.1 → 6.0.0

package/src/extensions/image.ts

@@ -14,8 +14,10 @@ import {
   Pattern,
   Point,
 } from "fabric";
-import { CanvasService, RenderObjectSpec } from "../services";
-import { generateDielinePath } from "./geometry";
+import { CanvasService, RenderLayoutRect, RenderObjectSpec } from "../services";
+import { isDielineShape, normalizeShapeStyle } from "./dielineShape";
+import type { DielineShape, DielineShapeStyle } from "./dielineShape";
+import { generateDielinePath, getPathBounds } from "./geometry";
 import {
   buildSceneGeometry,
   computeSceneLayout,
@@ -64,11 +66,11 @@ interface FrameVisualConfig {
   outerBackground: string;
 }
 
-type DielineShape = "rect" | "circle" | "ellipse" | "custom";
 type ShapeOverlayShape = Exclude<DielineShape, "custom">;
 
 interface SceneGeometryLike {
   shape: DielineShape;
+  shapeStyle: DielineShapeStyle;
   radius: number;
   offset: number;
 }
@@ -134,6 +136,10 @@ export class ImageTool implements Extension {
   private dirtyTrackerDisposable?: { dispose(): void };
   private cropShapeHatchPattern?: Pattern;
   private cropShapeHatchPatternColor?: string;
+  private cropShapeHatchPatternKey?: string;
+  private imageSpecs: RenderObjectSpec[] = [];
+  private overlaySpecs: RenderObjectSpec[] = [];
+  private renderProducerDisposable?: { dispose: () => void };
 
   activate(context: ExtensionContext) {
     this.context = context;
@@ -142,6 +148,41 @@ export class ImageTool implements Extension {
       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);
@@ -202,13 +243,15 @@ export class ImageTool implements Extension {
     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;
@@ -766,47 +809,41 @@ export class ImageTool implements Extension {
       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,
-    };
+    });
   }
 
-  private async resolveDefaultFitArea(): Promise<DielineFitArea | null> {
-    if (!this.context || !this.canvasService) return null;
-    const commandService = this.context.services.get<any>("CommandService");
-    if (!commandService) return null;
+  private getFrameRectScreen(frame?: FrameRect): FrameRect {
+    if (!this.canvasService) {
+      return { left: 0, top: 0, width: 0, height: 0 };
+    }
+    return this.canvasService.toScreenRect(frame || this.getFrameRect());
+  }
 
-    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;
-      }
+  private toLayoutSceneRect(rect: FrameRect): RenderLayoutRect {
+    return {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height,
+      space: "scene",
+    };
+  }
 
-      return {
-        width: Math.max(1, width),
-        height: Math.max(1, height),
-        left: left + width / 2,
-        top: top + height / 2,
-      };
-    } catch {
-      return null;
-    }
+  private async resolveDefaultFitArea(): Promise<DielineFitArea | null> {
+    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,
+    };
   }
 
   private async fitImageToDefaultArea(id: string) {
@@ -818,13 +855,14 @@ export class ImageTool implements Extension {
       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,
     });
   }
 
@@ -837,9 +875,7 @@ export class ImageTool implements Extension {
 
   private getOverlayObjects(): any[] {
     if (!this.canvasService) return [];
-    return this.canvasService.getRootLayerObjects(
-      IMAGE_OVERLAY_LAYER_ID,
-    ) as any[];
+    return this.canvasService.getPassObjects(IMAGE_OVERLAY_LAYER_ID) as any[];
   }
 
   private getImageObject(id: string): any | undefined {
@@ -848,9 +884,9 @@ export class ImageTool implements Extension {
 
   private 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();
   }
 
   private purgeSourceSizeCacheForItem(item?: ImageItem) {
@@ -884,6 +920,32 @@ export class ImageTool implements Extension {
     return { width: 1, height: 1 };
   }
 
+  private async ensureSourceSize(src: string): Promise<SourceSize | null> {
+    if (!src) return null;
+    const cached = this.sourceSizeBySrc.get(src);
+    if (cached) return cached;
+
+    try {
+      const image = await FabricImage.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;
+  }
+
   private getCoverScale(frame: FrameRect, size: SourceSize): number {
     const sw = Math.max(1, size.width);
     const sh = Math.max(1, size.height);
@@ -929,19 +991,24 @@ export class ImageTool implements Extension {
 
   private toSceneGeometryLike(raw: any): SceneGeometryLike | null {
     const shape = raw?.shape;
-    if (
-      shape !== "rect" &&
-      shape !== "circle" &&
-      shape !== "ellipse" &&
-      shape !== "custom"
-    ) {
+    if (!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: normalizeShapeStyle(raw?.shapeStyle),
       radius: Number.isFinite(radius) ? radius : 0,
       offset: Number.isFinite(offset) ? offset : 0,
     };
@@ -1008,9 +1075,12 @@ export class ImageTool implements Extension {
     color = "rgba(255, 0, 0, 0.6)",
   ): Pattern | undefined {
     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;
     }
@@ -1043,8 +1113,18 @@ export class ImageTool implements Extension {
       // @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 as any).patternTransform = [
+      1 / sceneScale,
+      0,
+      0,
+      1 / sceneScale,
+      0,
+      0,
+    ];
     this.cropShapeHatchPattern = pattern;
     this.cropShapeHatchPatternColor = color;
+    this.cropShapeHatchPatternKey = cacheKey;
     return pattern;
   }
 
@@ -1062,6 +1142,7 @@ export class ImageTool implements Extension {
     }
 
     const shape = sceneGeometry.shape as ShapeOverlayShape;
+    const shapeStyle = sceneGeometry.shapeStyle;
     const inset = 0;
     const shapeWidth = Math.max(1, frame.width);
     const shapeHeight = Math.max(1, frame.height);
@@ -1072,6 +1153,7 @@ export class ImageTool implements Extension {
       frameWidth: frame.width,
       frameHeight: frame.height,
       offset: sceneGeometry.offset,
+      shapeStyle,
       inset,
       shapeWidth,
       shapeHeight,
@@ -1097,6 +1179,7 @@ export class ImageTool implements Extension {
       x: frame.width / 2,
       y: frame.height / 2,
       features: [],
+      shapeStyle,
       canvasWidth: frame.width,
       canvasHeight: frame.height,
     };
@@ -1116,6 +1199,9 @@ export class ImageTool implements Extension {
 
       const patternFill = this.getCropShapeHatchPattern();
       const hatchFill = patternFill || "rgba(255, 0, 0, 0.22)";
+      const shapeBounds = getPathBounds(shapePathData);
+      const hatchBounds = getPathBounds(hatchPathData);
+      const frameRect = this.toLayoutSceneRect(frame);
       const hatchPathLength = hatchPathData.length;
       const shapePathLength = shapePathData.length;
       const specs: RenderObjectSpec[] = [
@@ -1123,10 +1209,16 @@ export class ImageTool implements Extension {
           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,
@@ -1143,15 +1235,21 @@ export class ImageTool implements Extension {
           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,
@@ -1168,6 +1266,8 @@ export class ImageTool implements Extension {
         fillRule: "evenodd",
         shapePathLength,
         hatchPathLength,
+        shapeBounds,
+        hatchBounds,
         hatchFillType:
           hatchFill && typeof hatchFill === "object" ? "pattern" : "color",
         ids: specs.map((spec) => spec.id),
@@ -1241,126 +1341,45 @@ export class ImageTool implements Extension {
     };
   }
 
+  private toSceneObjectScale(value: number): number {
+    if (!this.canvasService) return value;
+    return value / this.canvasService.getSceneScale();
+  }
+
   private getCurrentSrc(obj: any): string | undefined {
     if (!obj) return undefined;
     if (typeof obj.getSrc === "function") return obj.getSrc();
     return obj?._originalElement?.src;
   }
 
-  private applyImageControlVisibility(obj: any) {
-    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,
-    });
-  }
-
-  private async upsertImageObject(
-    item: ImageItem,
+  private async buildImageSpecs(
+    items: ImageItem[],
     frame: FrameRect,
-    seq: number,
-  ) {
-    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);
+  ): Promise<RenderObjectSpec[]> {
+    const specs: RenderObjectSpec[] = [];
 
-    if (obj && currentSrc && currentSrc !== render.src) {
-      canvas.remove(obj);
-      obj = undefined;
-    }
+    for (const item of items) {
+      const render = this.resolveRenderImageState(item);
+      if (!render.src) continue;
 
-    if (!obj) {
-      const created = await FabricImage.fromURL(render.src, {
-        crossOrigin: "anonymous",
-      });
-      if (seq !== this.renderSeq) return;
+      const ensured = await this.ensureSourceSize(render.src);
+      const sourceSize = ensured || this.getSourceSize(render.src);
+      const props = this.computeCanvasProps(render, sourceSize, frame);
 
-      created.set({
+      specs.push({
+        id: item.id,
+        type: "image",
+        src: render.src,
         data: {
           id: item.id,
           layerId: IMAGE_OBJECT_LAYER_ID,
           type: "image-item",
         },
-      } as any);
-      canvas.add(created as any);
-      obj = created as any;
-    }
-
-    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);
-    }
-  }
-
-  private syncImageZOrder(items: ImageItem[]) {
-    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 as any);
-      if (bgIndex >= 0) insertIndex = bgIndex + 1;
+        props,
+      });
     }
 
-    items.forEach((item) => {
-      const obj = this.getImageObject(item.id);
-      if (!obj) return;
-      canvas.moveObjectTo(obj, insertIndex);
-      insertIndex += 1;
-    });
-
-    const overlayObjects = this.getOverlayObjects().sort((a: any, b: any) => {
-      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: any, index: number) => ({
-          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;
   }
 
   private buildOverlaySpecs(
@@ -1384,26 +1403,52 @@ export class ImageTool implements Extension {
       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 strokeWidthScene = this.canvasService.toSceneLength(
+      visual.strokeWidth,
+    );
+    const dashLengthScene = this.canvasService.toSceneLength(visual.dashLength);
 
-    const frameLeft = Math.max(0, Math.min(canvasW, frame.left));
-    const frameTop = Math.max(0, Math.min(canvasH, frame.top));
+    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(canvasW, frame.left + frame.width),
+      Math.min(canvasLeft + canvasW, frame.left + frame.width),
     );
     const frameBottom = Math.max(
       frameTop,
-      Math.min(canvasH, frame.top + frame.height),
+      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: RenderObjectSpec[] = [
@@ -1411,13 +1456,17 @@ export class ImageTool implements Extension {
         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,
@@ -1427,13 +1476,17 @@ export class ImageTool implements Extension {
         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,
@@ -1443,13 +1496,17 @@ export class ImageTool implements Extension {
         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,
@@ -1459,13 +1516,17 @@ export class ImageTool implements Extension {
         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,
@@ -1477,29 +1538,36 @@ export class ImageTool implements Extension {
       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,
@@ -1530,35 +1598,38 @@ export class ImageTool implements Extension {
       });
     }
 
-    this.getImageObjects().forEach((obj: any) => {
-      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,
@@ -1584,8 +1655,12 @@ export class ImageTool implements Extension {
     const center = target.getCenterPoint
       ? target.getCenterPoint()
       : new 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 || "";
@@ -1593,10 +1668,10 @@ export class ImageTool implements Extension {
     const coverScale = this.getCoverScale(frame, sourceSize);
 
     const updates: Partial<ImageItem> = {
-      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;
@@ -1691,7 +1766,7 @@ export class ImageTool implements Extension {
     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: Partial<ImageItem> = {
@@ -1739,16 +1814,21 @@ export class ImageTool implements Extension {
       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;
+      areaLeftInput <= 1.5
+        ? viewport.left + areaLeftInput * canvasW
+        : areaLeftInput;
     const areaTopPx =
-      areaTopInput <= 1.5 ? areaTopInput * canvasH : areaTopInput;
+      areaTopInput <= 1.5
+        ? viewport.top + areaTopInput * canvasH
+        : areaTopInput;
 
     const updates: Partial<ImageItem> = {
       scale: Math.max(0.05, desiredScale / baseCover),
@@ -1827,7 +1907,8 @@ export class ImageTool implements Extension {
       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: "png" | "jpeg" = options.format === "jpeg" ? "jpeg" : "png";