@pixerate/editor 0.18.0 → 0.20.0

package/dist/image-editor/index.js

@@ -148,6 +148,349 @@ function removeAlpha(imageData) {
   }
 }
 
+// src/image-editor/geometry.ts
+function normalizeAngle(degrees) {
+  const a = (degrees % 360 + 360) % 360;
+  return a === 360 ? 0 : a;
+}
+function cosSin(angle) {
+  switch (angle) {
+    case 0:
+      return [1, 0];
+    case 90:
+      return [0, 1];
+    case 180:
+      return [-1, 0];
+    case 270:
+      return [0, -1];
+    default: {
+      const rad = angle * Math.PI / 180;
+      return [Math.cos(rad), Math.sin(rad)];
+    }
+  }
+}
+function isQuarterTurnSwapped(transform) {
+  const angle = normalizeAngle(transform.rotate);
+  return angle === 90 || angle === 270;
+}
+function getRotatedSize(width, height, transform) {
+  const [c, s] = cosSin(normalizeAngle(transform.rotate));
+  return {
+    width: Math.abs(width * c) + Math.abs(height * s),
+    height: Math.abs(width * s) + Math.abs(height * c)
+  };
+}
+function projectImagePoint(pt, p) {
+  const [c, s] = cosSin(p.angle);
+  let x = pt.x - (p.region.x + p.region.width / 2);
+  let y = pt.y - (p.region.y + p.region.height / 2);
+  if (p.flipH) x = -x;
+  if (p.flipV) y = -y;
+  const rx = x * c - y * s;
+  const ry = x * s + y * c;
+  return { x: p.originX + rx * p.scale, y: p.originY + ry * p.scale };
+}
+function unprojectCanvasPoint(pt, p) {
+  const [c, s] = cosSin(p.angle);
+  const rx = (pt.x - p.originX) / p.scale;
+  const ry = (pt.y - p.originY) / p.scale;
+  let x = rx * c + ry * s;
+  let y = -rx * s + ry * c;
+  if (p.flipH) x = -x;
+  if (p.flipV) y = -y;
+  return { x: x + p.region.x + p.region.width / 2, y: y + p.region.y + p.region.height / 2 };
+}
+function applyImageProjectionToContext(ctx, p) {
+  ctx.translate(p.originX, p.originY);
+  ctx.scale(p.scale, p.scale);
+  if (p.angle !== 0) ctx.rotate(p.angle * Math.PI / 180);
+  if (p.flipH || p.flipV) ctx.scale(p.flipH ? -1 : 1, p.flipV ? -1 : 1);
+  ctx.translate(-(p.region.x + p.region.width / 2), -(p.region.y + p.region.height / 2));
+}
+function projectImageRect(rect, p) {
+  const corners = [
+    projectImagePoint({ x: rect.x, y: rect.y }, p),
+    projectImagePoint({ x: rect.x + rect.width, y: rect.y }, p),
+    projectImagePoint({ x: rect.x, y: rect.y + rect.height }, p),
+    projectImagePoint({ x: rect.x + rect.width, y: rect.y + rect.height }, p)
+  ];
+  const xs = corners.map((c) => c.x);
+  const ys = corners.map((c) => c.y);
+  const minX = Math.min(...xs);
+  const minY = Math.min(...ys);
+  return { x: minX, y: minY, width: Math.max(...xs) - minX, height: Math.max(...ys) - minY };
+}
+function clampCropToImage(crop, width, height) {
+  const x = Math.max(0, Math.min(width - 1, crop.x));
+  const y = Math.max(0, Math.min(height - 1, crop.y));
+  return {
+    x,
+    y,
+    width: Math.max(1, Math.min(width - x, crop.width)),
+    height: Math.max(1, Math.min(height - y, crop.height))
+  };
+}
+function resolveViewport(state, vpWidth, vpHeight, isActivelyCropping, cropOverride) {
+  const { imageDimensions, crop: stateCrop, transform, zoom, pan } = state;
+  const naturalWidth = imageDimensions.width || 800;
+  const naturalHeight = imageDimensions.height || 600;
+  const full = { x: 0, y: 0, width: naturalWidth, height: naturalHeight };
+  const activeCrop = cropOverride !== void 0 && cropOverride !== null ? cropOverride : stateCrop ?? (isActivelyCropping ? full : null);
+  const region = !isActivelyCropping && activeCrop ? clampCropToImage(activeCrop, naturalWidth, naturalHeight) : full;
+  const { width: baseW, height: baseH } = getRotatedSize(region.width, region.height, transform);
+  const fitScale = Math.min(vpWidth * 0.85 / baseW, vpHeight * 0.85 / baseH, 1);
+  const centerX = vpWidth / 2 + pan.x;
+  const centerY = vpHeight / 2 + pan.y;
+  const projection = {
+    region,
+    angle: normalizeAngle(transform.rotate),
+    flipH: transform.flipH,
+    flipV: transform.flipV,
+    scale: zoom * fitScale,
+    originX: centerX,
+    originY: centerY
+  };
+  return { activeCrop, baseW, baseH, fitScale, centerX, centerY, projection };
+}
+function getViewportProjection(state, vpWidth, vpHeight, isActivelyCropping = false, cropOverride) {
+  return resolveViewport(state, vpWidth, vpHeight, isActivelyCropping, cropOverride).projection;
+}
+function getViewportMetrics(state, vpWidth, vpHeight, isActivelyCropping = false, cropOverride) {
+  const { zoom } = state;
+  const { activeCrop, baseW, baseH, fitScale, centerX, centerY, projection } = resolveViewport(
+    state,
+    vpWidth,
+    vpHeight,
+    isActivelyCropping,
+    cropOverride
+  );
+  const renderW = baseW * fitScale;
+  const renderH = baseH * fitScale;
+  const imageRect = {
+    x: centerX - renderW * zoom / 2,
+    y: centerY - renderH * zoom / 2,
+    width: renderW * zoom,
+    height: renderH * zoom
+  };
+  const cropRect = activeCrop ? projectImageRect(activeCrop, projection) : null;
+  return {
+    vpWidth,
+    vpHeight,
+    centerX,
+    centerY,
+    baseW,
+    baseH,
+    fitScale,
+    renderW,
+    renderH,
+    totalScale: zoom * fitScale,
+    imageRect,
+    cropRect
+  };
+}
+function canvasToImagePoint(canvasPt, state, vpWidth, vpHeight, isActivelyCropping = false) {
+  return unprojectCanvasPoint(canvasPt, getViewportProjection(state, vpWidth, vpHeight, isActivelyCropping));
+}
+function imageToCanvasPoint(imgPt, state, vpWidth, vpHeight, isActivelyCropping = false) {
+  return projectImagePoint(imgPt, getViewportProjection(state, vpWidth, vpHeight, isActivelyCropping));
+}
+var HANDLE_VECTORS = {
+  nw: [-1, -1],
+  n: [0, -1],
+  ne: [1, -1],
+  e: [1, 0],
+  se: [1, 1],
+  s: [0, 1],
+  sw: [-1, 1],
+  w: [-1, 0]
+};
+function vectorToHandle(x, y) {
+  const vx = Math.abs(x) < 0.38 ? 0 : Math.sign(x);
+  const vy = Math.abs(y) < 0.38 ? 0 : Math.sign(y);
+  for (const [name, [hx, hy]] of Object.entries(HANDLE_VECTORS)) {
+    if (hx === vx && hy === vy) return name;
+  }
+  return null;
+}
+function mapCropHandle(handle, transform, toScreen = false) {
+  if (handle === null || handle === "inside") return handle;
+  const [hx, hy] = HANDLE_VECTORS[handle];
+  const [c, s] = cosSin(normalizeAngle(transform.rotate));
+  const fx = transform.flipH ? -1 : 1;
+  const fy = transform.flipV ? -1 : 1;
+  if (toScreen) {
+    const x2 = hx * fx;
+    const y2 = hy * fy;
+    return vectorToHandle(x2 * c - y2 * s, x2 * s + y2 * c);
+  }
+  const x = hx * c + hy * s;
+  const y = -hx * s + hy * c;
+  return vectorToHandle(x * fx, y * fy);
+}
+function hitTestCrop(canvasPt, state, vpWidth, vpHeight, handleThreshold = 14, cropOverride) {
+  const metrics = getViewportMetrics(state, vpWidth, vpHeight, true, cropOverride);
+  if (!metrics.cropRect) return null;
+  const screenHandle = hitTestCropRect(canvasPt, metrics.cropRect, handleThreshold);
+  return mapCropHandle(screenHandle, state.transform);
+}
+function hitTestCropRect(canvasPt, rect, handleThreshold) {
+  const { x, y, width: w, height: h } = rect;
+  const px = canvasPt.x;
+  const py = canvasPt.y;
+  const dist = (x1, y1, x2, y2) => Math.hypot(x1 - x2, y1 - y2);
+  if (dist(px, py, x, y) <= handleThreshold) return "nw";
+  if (dist(px, py, x + w, y) <= handleThreshold) return "ne";
+  if (dist(px, py, x + w, y + h) <= handleThreshold) return "se";
+  if (dist(px, py, x, y + h) <= handleThreshold) return "sw";
+  const nearX = px >= x - handleThreshold && px <= x + w + handleThreshold;
+  const nearY = py >= y - handleThreshold && py <= y + h + handleThreshold;
+  if (nearX && Math.abs(py - y) <= handleThreshold) return "n";
+  if (nearX && Math.abs(py - (y + h)) <= handleThreshold) return "s";
+  if (nearY && Math.abs(px - x) <= handleThreshold) return "w";
+  if (nearY && Math.abs(px - (x + w)) <= handleThreshold) return "e";
+  if (px >= x && px <= x + w && py >= y && py <= y + h) {
+    return "inside";
+  }
+  return null;
+}
+function getCropCursor(handle, transform) {
+  const screenHandle = transform ? mapCropHandle(handle, transform, true) : handle;
+  switch (screenHandle) {
+    case "nw":
+    case "se":
+      return "nwse-resize";
+    case "ne":
+    case "sw":
+      return "nesw-resize";
+    case "n":
+    case "s":
+      return "ns-resize";
+    case "e":
+    case "w":
+      return "ew-resize";
+    case "inside":
+      return "move";
+    default:
+      return "crosshair";
+  }
+}
+function calculateCropDrag(startCrop, handle, startImgPt, currentImgPt, imgWidth, imgHeight, aspectRatio, transform) {
+  if (aspectRatio && transform && isQuarterTurnSwapped(transform)) {
+    aspectRatio = 1 / aspectRatio;
+  }
+  const dx = currentImgPt.x - startImgPt.x;
+  const dy = currentImgPt.y - startImgPt.y;
+  if (handle === "inside") {
+    const maxX = Math.max(0, imgWidth - startCrop.width);
+    const maxY = Math.max(0, imgHeight - startCrop.height);
+    const newX = Math.max(0, Math.min(maxX, startCrop.x + dx));
+    const newY = Math.max(0, Math.min(maxY, startCrop.y + dy));
+    return {
+      x: Math.round(newX),
+      y: Math.round(newY),
+      width: startCrop.width,
+      height: startCrop.height
+    };
+  }
+  let left = startCrop.x;
+  let top = startCrop.y;
+  let right = startCrop.x + startCrop.width;
+  let bottom = startCrop.y + startCrop.height;
+  const minSize = 20;
+  if (handle === "e" || handle === "ne" || handle === "se") {
+    right = Math.min(imgWidth, Math.max(left + minSize, startCrop.x + startCrop.width + dx));
+  }
+  if (handle === "w" || handle === "nw" || handle === "sw") {
+    left = Math.max(0, Math.min(right - minSize, startCrop.x + dx));
+  }
+  if (handle === "s" || handle === "se" || handle === "sw") {
+    bottom = Math.min(imgHeight, Math.max(top + minSize, startCrop.y + startCrop.height + dy));
+  }
+  if (handle === "n" || handle === "nw" || handle === "ne") {
+    top = Math.max(0, Math.min(bottom - minSize, startCrop.y + dy));
+  }
+  if (aspectRatio && aspectRatio > 0) {
+    let currentW = right - left;
+    let currentH = bottom - top;
+    if (handle === "e" || handle === "w") {
+      currentH = Math.min(imgHeight, currentW / aspectRatio);
+      bottom = Math.min(imgHeight, top + currentH);
+    } else if (handle === "n" || handle === "s") {
+      currentW = Math.min(imgWidth, currentH * aspectRatio);
+      right = Math.min(imgWidth, left + currentW);
+    } else {
+      const targetH = currentW / aspectRatio;
+      if (top + targetH <= imgHeight) {
+        bottom = top + targetH;
+      } else {
+        const targetW = currentH * aspectRatio;
+        right = Math.min(imgWidth, left + targetW);
+      }
+    }
+  }
+  return {
+    x: Math.round(left),
+    y: Math.round(top),
+    width: Math.round(Math.max(minSize, right - left)),
+    height: Math.round(Math.max(minSize, bottom - top))
+  };
+}
+function getAnnotationBounds(ann) {
+  switch (ann.type) {
+    case "rect":
+    case "image":
+      return {
+        x: Math.min(ann.x, ann.x + ann.width),
+        y: Math.min(ann.y, ann.y + ann.height),
+        width: Math.abs(ann.width),
+        height: Math.abs(ann.height)
+      };
+    case "circle":
+      return {
+        x: ann.x - Math.abs(ann.radiusX),
+        y: ann.y - Math.abs(ann.radiusY),
+        width: Math.abs(ann.radiusX) * 2,
+        height: Math.abs(ann.radiusY) * 2
+      };
+    case "arrow":
+    case "line": {
+      const minX = Math.min(ann.x, ann.endX);
+      const minY = Math.min(ann.y, ann.endY);
+      return {
+        x: minX,
+        y: minY,
+        width: Math.max(Math.abs(ann.endX - ann.x), 10),
+        height: Math.max(Math.abs(ann.endY - ann.y), 10)
+      };
+    }
+    case "pen": {
+      if (!ann.points.length) return { x: ann.x, y: ann.y, width: 0, height: 0 };
+      let minX = ann.points[0].x;
+      let maxX = ann.points[0].x;
+      let minY = ann.points[0].y;
+      let maxY = ann.points[0].y;
+      for (const pt of ann.points) {
+        if (pt.x < minX) minX = pt.x;
+        if (pt.x > maxX) maxX = pt.x;
+        if (pt.y < minY) minY = pt.y;
+        if (pt.y > maxY) maxY = pt.y;
+      }
+      return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+    }
+    case "text":
+      return {
+        x: ann.x,
+        y: ann.y,
+        width: ann.text.length * ann.fontSize * 0.6,
+        height: ann.fontSize * 1.2
+      };
+  }
+}
+function hitTestAnnotation(imgPt, ann, padding = 10) {
+  const b = getAnnotationBounds(ann);
+  return imgPt.x >= b.x - padding && imgPt.x <= b.x + b.width + padding && imgPt.y >= b.y - padding && imgPt.y <= b.y + b.height + padding;
+}
+
 // src/image-editor/renderer.ts
 var ImageCache = class {
   cache = /* @__PURE__ */ new Map();
@@ -195,6 +538,8 @@ var ImageEditorRenderer = class {
   imageCache = globalImageCache;
   cachedBaseCanvas = null;
   cachedBaseKey = "";
+  sourceIds = /* @__PURE__ */ new WeakMap();
+  nextSourceId = 0;
   /**
    * Helper to create a canvas element safely in browser/JSDOM.
    */
@@ -226,8 +571,8 @@ var ImageEditorRenderer = class {
     } else {
       img = imageSource;
     }
-    const naturalWidth = img.naturalWidth || img.videoWidth || img.width || 800;
-    const naturalHeight = img.naturalHeight || img.videoHeight || img.height || 600;
+    const { width: naturalWidth, height: naturalHeight } = getSourceSize(img);
+    const geoState = state.imageDimensions.width === naturalWidth && state.imageDimensions.height === naturalHeight ? state : { ...state, imageDimensions: { width: naturalWidth, height: naturalHeight } };
     const { crop, transform, adjustments, depthMask, annotations, selectedAnnotationId, zoom, pan, isOriginalCompared } = state;
     const vpWidth = options.viewportWidth || targetCanvas.width;
     const vpHeight = options.viewportHeight || targetCanvas.height;
@@ -239,93 +584,122 @@ var ImageEditorRenderer = class {
       return;
     }
     const isActivelyCropping = Boolean(options.showCropOverlay || state.activeTool === "crop");
-    const cropX = !isActivelyCropping && crop ? Math.max(0, crop.x) : 0;
-    const cropY = !isActivelyCropping && crop ? Math.max(0, crop.y) : 0;
-    const cropW = !isActivelyCropping && crop ? Math.min(naturalWidth - cropX, crop.width) : naturalWidth;
-    const cropH = !isActivelyCropping && crop ? Math.min(naturalHeight - cropY, crop.height) : naturalHeight;
-    const angle = (transform.rotate % 360 + 360) % 360;
-    const isSwapped = angle === 90 || angle === 270;
-    const baseW = isSwapped ? cropH : cropW;
-    const baseH = isSwapped ? cropW : cropH;
-    const baseKey = `${state.sourceUrl}-${naturalWidth}x${naturalHeight}-${cropX},${cropY},${cropW},${cropH}-${angle},${transform.flipH},${transform.flipV}-${adjustments.brightness},${adjustments.contrast},${adjustments.saturation},${adjustments.exposure},${adjustments.temperature},${adjustments.blur},${adjustments.opacity}-${depthMask.enabled},${depthMask.depthRange?.[0]}-${depthMask.depthRange?.[1]},${depthMask.softness},${depthMask.invert},${depthMask.mode}`;
+    const projection = getViewportProjection(geoState, vpWidth, vpHeight, isActivelyCropping);
+    const { region } = projection;
+    const rotated = getRotatedSize(region.width, region.height, transform);
+    const baseKey = [
+      this.getSourceId(img),
+      state.sourceUrl,
+      `${naturalWidth}x${naturalHeight}`,
+      `${region.x},${region.y},${region.width},${region.height}`,
+      `${projection.angle},${transform.flipH},${transform.flipV}`,
+      `${adjustments.brightness},${adjustments.contrast},${adjustments.saturation},${adjustments.exposure},${adjustments.temperature},${adjustments.blur},${adjustments.opacity}`,
+      `${depthMask.enabled},${depthMask.maskSource},${depthMask.depthRange?.[0]}-${depthMask.depthRange?.[1]},${depthMask.softness},${depthMask.invert},${depthMask.mode}`
+    ].join("|");
     let baseCanvas = this.cachedBaseCanvas;
     if (!baseCanvas || this.cachedBaseKey !== baseKey) {
-      baseCanvas = this.createCanvas(baseW, baseH);
-      const baseCtx = baseCanvas.getContext("2d");
-      if (baseCtx) {
-        baseCtx.save();
-        const rad = angle * Math.PI / 180;
-        baseCtx.translate(baseW / 2, baseH / 2);
-        baseCtx.rotate(rad);
-        baseCtx.scale(transform.flipH ? -1 : 1, transform.flipV ? -1 : 1);
-        baseCtx.drawImage(
-          img,
-          cropX,
-          cropY,
-          cropW,
-          cropH,
-          -cropW / 2,
-          -cropH / 2,
-          cropW,
-          cropH
-        );
-        baseCtx.restore();
-        const imageData = baseCtx.getImageData(0, 0, baseW, baseH);
-        if (imageData) {
-          applyAdjustments(imageData, adjustments);
-          if (depthMask.enabled && depthMask.maskSource) {
-            try {
-              const maskImg = await this.imageCache.get(depthMask.maskSource);
-              const maskCanvas = this.createCanvas(baseW, baseH);
-              const maskCtx = maskCanvas.getContext("2d");
-              if (maskCtx) {
-                maskCtx.drawImage(maskImg, cropX, cropY, cropW, cropH, 0, 0, baseW, baseH);
-                const maskData = maskCtx.getImageData(0, 0, baseW, baseH);
-                if (maskData) {
-                  applyDepthMask(imageData, maskData, depthMask);
-                }
-              }
-            } catch {
-            }
-          }
-          baseCtx.putImageData(imageData, 0, 0);
-        }
-      }
+      baseCanvas = await this.renderBaseImage(img, naturalWidth, naturalHeight, region, transform, state);
       this.cachedBaseCanvas = baseCanvas;
       this.cachedBaseKey = baseKey;
     }
-    ctx.save();
-    ctx.translate(vpWidth / 2 + pan.x, vpHeight / 2 + pan.y);
-    ctx.scale(zoom, zoom);
-    const fitScale = Math.min(vpWidth * 0.85 / baseW, vpHeight * 0.85 / baseH, 1);
-    const renderW = baseW * fitScale;
-    const renderH = baseH * fitScale;
-    ctx.drawImage(baseCanvas, -renderW / 2, -renderH / 2, renderW, renderH);
-    const scaleFactor = fitScale;
-    ctx.save();
-    ctx.translate(-renderW / 2, -renderH / 2);
-    ctx.scale(scaleFactor, scaleFactor);
-    for (const ann of annotations) {
-      await this.drawAnnotation(ctx, ann);
-      if (options.showSelectionOverlay && ann.id === selectedAnnotationId) {
-        this.drawAnnotationSelection(ctx, ann);
+    const drawW = rotated.width * projection.scale;
+    const drawH = rotated.height * projection.scale;
+    ctx.drawImage(baseCanvas, projection.originX - drawW / 2, projection.originY - drawH / 2, drawW, drawH);
+    if (annotations.length > 0 || options.draftAnnotation) {
+      ctx.save();
+      applyImageProjectionToContext(ctx, projection);
+      ctx.beginPath();
+      ctx.rect(region.x, region.y, region.width, region.height);
+      ctx.clip();
+      for (const ann of annotations) {
+        await this.drawAnnotation(ctx, ann);
+        if (options.showSelectionOverlay && ann.id === selectedAnnotationId) {
+          this.drawAnnotationSelection(ctx, ann);
+        }
       }
+      if (options.draftAnnotation) {
+        await this.drawAnnotation(ctx, options.draftAnnotation);
+      }
+      ctx.restore();
     }
-    if (options.draftAnnotation) {
-      await this.drawAnnotation(ctx, options.draftAnnotation);
+    if (isActivelyCropping) {
+      const activeCrop = options.draftCrop !== void 0 && options.draftCrop !== null ? options.draftCrop : crop ?? { x: 0, y: 0, width: naturalWidth, height: naturalHeight };
+      this.drawCropOverlay(ctx, getViewportMetrics(geoState, vpWidth, vpHeight, true, activeCrop));
     }
-    ctx.restore();
-    ctx.restore();
-    const isCroppingActive = Boolean(options.showCropOverlay || state.activeTool === "crop");
-    const activeCrop = options.draftCrop !== void 0 && options.draftCrop !== null ? options.draftCrop : crop ?? (isCroppingActive ? {
-      x: 0,
-      y: 0,
-      width: naturalWidth,
-      height: naturalHeight
-    } : null);
-    if (isCroppingActive && activeCrop) {
-      this.drawCropOverlay(ctx, state, vpWidth, vpHeight, naturalWidth, naturalHeight, activeCrop);
+  }
+  /**
+   * Draws `region` of the source image with rotation/flip applied, then pixel adjustments
+   * and the depth mask (which receives the identical transform so it stays aligned).
+   */
+  async renderBaseImage(img, naturalWidth, naturalHeight, region, transform, state) {
+    const { adjustments, depthMask } = state;
+    const rotated = getRotatedSize(region.width, region.height, transform);
+    const baseW = Math.max(1, Math.round(rotated.width));
+    const baseH = Math.max(1, Math.round(rotated.height));
+    const baseCanvas = this.createCanvas(baseW, baseH);
+    const baseCtx = baseCanvas.getContext("2d");
+    if (!baseCtx) return baseCanvas;
+    const projection = getBaseProjection(region, transform, baseW, baseH);
+    baseCtx.save();
+    applyImageProjectionToContext(baseCtx, projection);
+    baseCtx.drawImage(
+      img,
+      region.x,
+      region.y,
+      region.width,
+      region.height,
+      region.x,
+      region.y,
+      region.width,
+      region.height
+    );
+    baseCtx.restore();
+    const imageData = baseCtx.getImageData(0, 0, baseW, baseH);
+    if (imageData) {
+      applyAdjustments(imageData, adjustments);
+      if (depthMask.enabled && depthMask.maskSource) {
+        try {
+          const maskImg = await this.imageCache.get(depthMask.maskSource);
+          const maskSize = getSourceSize(maskImg, naturalWidth, naturalHeight);
+          const sx = maskSize.width / naturalWidth;
+          const sy = maskSize.height / naturalHeight;
+          const maskCanvas = this.createCanvas(baseW, baseH);
+          const maskCtx = maskCanvas.getContext("2d");
+          if (maskCtx) {
+            maskCtx.save();
+            applyImageProjectionToContext(maskCtx, projection);
+            maskCtx.drawImage(
+              maskImg,
+              region.x * sx,
+              region.y * sy,
+              region.width * sx,
+              region.height * sy,
+              region.x,
+              region.y,
+              region.width,
+              region.height
+            );
+            maskCtx.restore();
+            const maskData = maskCtx.getImageData(0, 0, baseW, baseH);
+            if (maskData) {
+              applyDepthMask(imageData, maskData, depthMask);
+            }
+          }
+        } catch {
+        }
+      }
+      baseCtx.putImageData(imageData, 0, 0);
+    }
+    return baseCanvas;
+  }
+  getSourceId(img) {
+    const key = img;
+    let id = this.sourceIds.get(key);
+    if (id === void 0) {
+      id = ++this.nextSourceId;
+      this.sourceIds.set(key, id);
     }
+    return id;
   }
   /**
    * Draws an individual annotation onto the canvas.
@@ -448,7 +822,7 @@ var ImageEditorRenderer = class {
     ctx.strokeStyle = "#3b82f6";
     ctx.lineWidth = 1.5;
     ctx.setLineDash([4, 4]);
-    const bounds = this.getAnnotationBounds(ann);
+    const bounds = getAnnotationBounds(ann);
     const pad = 4;
     ctx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.width + pad * 2, bounds.height + pad * 2);
     ctx.fillStyle = "#ffffff";
@@ -467,82 +841,31 @@ var ImageEditorRenderer = class {
     }
     ctx.restore();
   }
+  /** @deprecated Use the standalone `getAnnotationBounds` from the geometry module. */
   getAnnotationBounds(ann) {
-    switch (ann.type) {
-      case "rect":
-        return { x: ann.x, y: ann.y, width: ann.width, height: ann.height };
-      case "circle":
-        return {
-          x: ann.x - Math.abs(ann.radiusX),
-          y: ann.y - Math.abs(ann.radiusY),
-          width: Math.abs(ann.radiusX) * 2,
-          height: Math.abs(ann.radiusY) * 2
-        };
-      case "arrow":
-      case "line": {
-        const minX = Math.min(ann.x, ann.endX);
-        const minY = Math.min(ann.y, ann.endY);
-        return {
-          x: minX,
-          y: minY,
-          width: Math.max(Math.abs(ann.endX - ann.x), 10),
-          height: Math.max(Math.abs(ann.endY - ann.y), 10)
-        };
-      }
-      case "pen": {
-        if (!ann.points.length) return { x: ann.x, y: ann.y, width: 0, height: 0 };
-        let minX = ann.points[0].x, maxX = ann.points[0].x;
-        let minY = ann.points[0].y, maxY = ann.points[0].y;
-        for (const pt of ann.points) {
-          if (pt.x < minX) minX = pt.x;
-          if (pt.x > maxX) maxX = pt.x;
-          if (pt.y < minY) minY = pt.y;
-          if (pt.y > maxY) maxY = pt.y;
-        }
-        return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-      }
-      case "text":
-        return {
-          x: ann.x,
-          y: ann.y,
-          width: ann.text.length * ann.fontSize * 0.6,
-          height: ann.fontSize * 1.2
-        };
-      case "image":
-        return { x: ann.x, y: ann.y, width: ann.width, height: ann.height };
-    }
+    return getAnnotationBounds(ann);
   }
   /**
-   * Draws a rule-of-thirds crop grid overlay.
+   * Draws a rule-of-thirds crop grid overlay. All rectangles come from
+   * `getViewportMetrics`, i.e. the crop box projected through rotation/flip.
    */
-  drawCropOverlay(ctx, state, vpWidth, vpHeight, imgWidth, imgHeight, cropOverride) {
-    const crop = cropOverride !== void 0 && cropOverride !== null ? cropOverride : state.crop ?? {
-      x: 0,
-      y: 0,
-      width: imgWidth,
-      height: imgHeight
-    };
-    if (!crop) return;
-    const { transform, pan, zoom } = state;
-    const angle = (transform.rotate % 360 + 360) % 360;
-    const isSwapped = angle === 90 || angle === 270;
-    const baseW = isSwapped ? imgHeight : imgWidth;
-    const baseH = isSwapped ? imgWidth : imgHeight;
+  drawCropOverlay(ctx, metrics) {
+    const { imageRect, cropRect } = metrics;
+    if (!cropRect) return;
+    const imgL = imageRect.x;
+    const imgT = imageRect.y;
+    const imgR = imageRect.x + imageRect.width;
+    const imgB = imageRect.y + imageRect.height;
+    const startX = cropRect.x;
+    const startY = cropRect.y;
+    const cropBoxW = cropRect.width;
+    const cropBoxH = cropRect.height;
     ctx.save();
-    ctx.translate(vpWidth / 2 + pan.x, vpHeight / 2 + pan.y);
-    ctx.scale(zoom, zoom);
-    const fitScale = Math.min(vpWidth * 0.85 / baseW, vpHeight * 0.85 / baseH, 1);
-    const renderW = baseW * fitScale;
-    const renderH = baseH * fitScale;
-    const startX = -renderW / 2 + crop.x / imgWidth * renderW;
-    const startY = -renderH / 2 + crop.y / imgHeight * renderH;
-    const cropBoxW = crop.width / imgWidth * renderW;
-    const cropBoxH = crop.height / imgHeight * renderH;
     ctx.fillStyle = "rgba(0, 0, 0, 0.45)";
-    ctx.fillRect(-renderW / 2, -renderH / 2, renderW, startY - -renderH / 2);
-    ctx.fillRect(-renderW / 2, startY + cropBoxH, renderW, renderH / 2 - (startY + cropBoxH));
-    ctx.fillRect(-renderW / 2, startY, startX - -renderW / 2, cropBoxH);
-    ctx.fillRect(startX + cropBoxW, startY, renderW / 2 - (startX + cropBoxW), cropBoxH);
+    ctx.fillRect(imgL, imgT, imageRect.width, Math.max(0, startY - imgT));
+    ctx.fillRect(imgL, startY + cropBoxH, imageRect.width, Math.max(0, imgB - (startY + cropBoxH)));
+    ctx.fillRect(imgL, startY, Math.max(0, startX - imgL), cropBoxH);
+    ctx.fillRect(startX + cropBoxW, startY, Math.max(0, imgR - (startX + cropBoxW)), cropBoxH);
     ctx.strokeStyle = "#ffffff";
     ctx.lineWidth = 2;
     ctx.strokeRect(startX, startY, cropBoxW, cropBoxH);
@@ -600,59 +923,23 @@ var ImageEditorRenderer = class {
     } else {
       img = imageSource;
     }
-    const naturalWidth = img.naturalWidth || img.videoWidth || img.width || 800;
-    const naturalHeight = img.naturalHeight || img.videoHeight || img.height || 600;
-    const { crop, transform, adjustments, depthMask, annotations } = state;
-    const cropX = crop ? Math.max(0, crop.x) : 0;
-    const cropY = crop ? Math.max(0, crop.y) : 0;
-    const cropW = crop ? Math.min(naturalWidth - cropX, crop.width) : naturalWidth;
-    const cropH = crop ? Math.min(naturalHeight - cropY, crop.height) : naturalHeight;
-    const angle = (transform.rotate % 360 + 360) % 360;
-    const isSwapped = angle === 90 || angle === 270;
-    const baseW = isSwapped ? cropH : cropW;
-    const baseH = isSwapped ? cropW : cropH;
+    const { width: naturalWidth, height: naturalHeight } = getSourceSize(img);
+    const { crop, transform, annotations } = state;
+    const region = crop ? clampCropToImage(crop, naturalWidth, naturalHeight) : { x: 0, y: 0, width: naturalWidth, height: naturalHeight };
+    const rotated = getRotatedSize(region.width, region.height, transform);
+    const baseW = Math.max(1, Math.round(rotated.width));
+    const baseH = Math.max(1, Math.round(rotated.height));
     const exportW = options.width || baseW;
     const exportH = options.height || baseH;
     const exportCanvas = this.createCanvas(exportW, exportH);
     const ctx = exportCanvas.getContext("2d");
     if (!ctx) return exportCanvas;
-    const intermediateCanvas = this.createCanvas(baseW, baseH);
-    const interCtx = intermediateCanvas.getContext("2d");
-    if (interCtx) {
-      interCtx.save();
-      const rad = angle * Math.PI / 180;
-      interCtx.translate(baseW / 2, baseH / 2);
-      interCtx.rotate(rad);
-      interCtx.scale(transform.flipH ? -1 : 1, transform.flipV ? -1 : 1);
-      interCtx.drawImage(img, cropX, cropY, cropW, cropH, -cropW / 2, -cropH / 2, cropW, cropH);
-      interCtx.restore();
-      const imageData = interCtx.getImageData(0, 0, baseW, baseH);
-      if (imageData) {
-        applyAdjustments(imageData, adjustments);
-        if (depthMask.enabled && depthMask.maskSource) {
-          try {
-            const maskImg = await this.imageCache.get(depthMask.maskSource);
-            const maskCanvas = this.createCanvas(baseW, baseH);
-            const maskCtx = maskCanvas.getContext("2d");
-            if (maskCtx) {
-              maskCtx.drawImage(maskImg, cropX, cropY, cropW, cropH, 0, 0, baseW, baseH);
-              const maskData = maskCtx.getImageData(0, 0, baseW, baseH);
-              if (maskData) {
-                applyDepthMask(imageData, maskData, depthMask);
-              }
-            }
-          } catch {
-          }
-        }
-        interCtx.putImageData(imageData, 0, 0);
-      }
-    }
-    ctx.drawImage(intermediateCanvas, 0, 0, baseW, baseH, 0, 0, exportW, exportH);
+    const baseCanvas = await this.renderBaseImage(img, naturalWidth, naturalHeight, region, transform, state);
+    ctx.drawImage(baseCanvas, 0, 0, baseW, baseH, 0, 0, exportW, exportH);
     if (options.includeAnnotations !== false && annotations.length > 0) {
-      const annScaleX = exportW / baseW;
-      const annScaleY = exportH / baseH;
       ctx.save();
-      ctx.scale(annScaleX, annScaleY);
+      ctx.scale(exportW / baseW, exportH / baseH);
+      applyImageProjectionToContext(ctx, getBaseProjection(region, transform, baseW, baseH));
       for (const ann of annotations) {
         await this.drawAnnotation(ctx, ann);
       }
@@ -661,66 +948,114 @@ var ImageEditorRenderer = class {
     return exportCanvas;
   }
   /**
-   * Generates a binary mask canvas (white for mask/selected area, black for unmasked).
-   * Useful for AI inpainting and selective generative fill.
+   * Generates a strictly binary mask canvas (white = area to regenerate, black = keep) in
+   * natural image pixel space of the current source image — the same space the crop box
+   * and annotations are stored in. Pair it with `toSourceDataURL()` for AI inpainting.
    */
   async renderMask(state, options) {
-    const naturalWidth = state.imageDimensions.width;
-    const naturalHeight = state.imageDimensions.height;
+    const naturalWidth = Math.max(1, Math.round(state.imageDimensions.width));
+    const naturalHeight = Math.max(1, Math.round(state.imageDimensions.height));
     const maskCanvas = this.createCanvas(naturalWidth, naturalHeight);
     const ctx = maskCanvas.getContext("2d");
     if (!ctx) return maskCanvas;
-    ctx.fillStyle = "#000000";
+    ctx.fillStyle = MASK_BLACK;
     ctx.fillRect(0, 0, naturalWidth, naturalHeight);
     const useCrop = options?.useCrop ?? true;
     const useAnnotations = options?.useAnnotations ?? true;
     if (useCrop && state.crop) {
-      ctx.fillStyle = "#ffffff";
+      ctx.fillStyle = MASK_WHITE;
       ctx.fillRect(state.crop.x, state.crop.y, state.crop.width, state.crop.height);
     }
-    if (useAnnotations && state.annotations.length > 0) {
-      for (const ann of state.annotations) {
-        ctx.save();
-        if (ann.rotation) {
-          ctx.translate(ann.x, ann.y);
-          ctx.rotate(ann.rotation * Math.PI / 180);
-          ctx.translate(-ann.x, -ann.y);
-        }
-        if (ann.type === "pen") {
-          const pen = ann;
-          if (pen.points.length > 0) {
-            ctx.beginPath();
-            ctx.strokeStyle = "#ffffff";
-            ctx.lineWidth = Math.max(pen.strokeWidth, 8);
-            ctx.lineCap = "round";
-            ctx.lineJoin = "round";
-            ctx.moveTo(pen.points[0].x, pen.points[0].y);
-            for (let i = 1; i < pen.points.length; i++) {
-              ctx.lineTo(pen.points[i].x, pen.points[i].y);
-            }
-            ctx.stroke();
-          }
-        } else if (ann.type === "rect") {
-          const rect = ann;
-          ctx.fillStyle = "#ffffff";
-          ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-        } else if (ann.type === "circle") {
-          const circ = ann;
-          ctx.fillStyle = "#ffffff";
+    if (useAnnotations && state.annotations.length > 0) {
+      for (const ann of state.annotations) {
+        this.drawAnnotationMask(ctx, ann);
+      }
+    }
+    const imageData = ctx.getImageData?.(0, 0, naturalWidth, naturalHeight);
+    if (imageData) {
+      const d = imageData.data;
+      for (let i = 0; i < d.length; i += 4) {
+        const v = d[i] >= 128 ? 255 : 0;
+        d[i] = v;
+        d[i + 1] = v;
+        d[i + 2] = v;
+        d[i + 3] = 255;
+      }
+      ctx.putImageData(imageData, 0, 0);
+    }
+    return maskCanvas;
+  }
+  drawAnnotationMask(ctx, ann) {
+    ctx.save();
+    ctx.globalAlpha = 1;
+    ctx.fillStyle = MASK_WHITE;
+    ctx.strokeStyle = MASK_WHITE;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    if (ann.rotation) {
+      ctx.translate(ann.x, ann.y);
+      ctx.rotate(ann.rotation * Math.PI / 180);
+      ctx.translate(-ann.x, -ann.y);
+    }
+    switch (ann.type) {
+      case "pen": {
+        if (ann.points.length > 0) {
           ctx.beginPath();
-          ctx.ellipse(circ.x, circ.y, circ.radiusX, circ.radiusY, 0, 0, Math.PI * 2);
-          ctx.fill();
-        } else {
-          ctx.strokeStyle = "#ffffff";
-          ctx.fillStyle = "#ffffff";
-          await this.drawAnnotation(ctx, ann);
+          ctx.lineWidth = Math.max(ann.strokeWidth || 0, 8);
+          ctx.moveTo(ann.points[0].x, ann.points[0].y);
+          for (let i = 1; i < ann.points.length; i++) {
+            ctx.lineTo(ann.points[i].x, ann.points[i].y);
+          }
+          ctx.stroke();
         }
-        ctx.restore();
+        break;
+      }
+      case "circle": {
+        ctx.beginPath();
+        ctx.ellipse(ann.x, ann.y, Math.abs(ann.radiusX), Math.abs(ann.radiusY), 0, 0, Math.PI * 2);
+        ctx.fill();
+        break;
+      }
+      case "arrow":
+      case "line": {
+        ctx.beginPath();
+        ctx.lineWidth = Math.max(ann.strokeWidth || 0, 8);
+        ctx.moveTo(ann.x, ann.y);
+        ctx.lineTo(ann.endX, ann.endY);
+        ctx.stroke();
+        break;
+      }
+      case "rect":
+      case "image":
+      case "text": {
+        const b = getAnnotationBounds(ann);
+        ctx.fillRect(b.x, b.y, b.width, b.height);
+        break;
       }
     }
-    return maskCanvas;
+    ctx.restore();
   }
 };
+var MASK_WHITE = "#ffffff";
+var MASK_BLACK = "#000000";
+function getSourceSize(img, fallbackW = 800, fallbackH = 600) {
+  const anyImg = img;
+  return {
+    width: anyImg.naturalWidth || anyImg.videoWidth || anyImg.width || fallbackW,
+    height: anyImg.naturalHeight || anyImg.videoHeight || anyImg.height || fallbackH
+  };
+}
+function getBaseProjection(region, transform, baseW, baseH) {
+  return {
+    region,
+    angle: normalizeAngle(transform.rotate),
+    flipH: transform.flipH,
+    flipV: transform.flipV,
+    scale: 1,
+    originX: baseW / 2,
+    originY: baseH / 2
+  };
+}
 
 // src/image-editor/controller.ts
 var DEFAULT_ADJUSTMENTS = {
@@ -789,39 +1124,56 @@ var ImageEditorController = class {
     };
     if (options.image instanceof Object && "width" in options.image) {
       this.imageElement = options.image;
+      this.state.sourceUrl = options.image.src || null;
       this.state.imageDimensions = {
         width: options.image.naturalWidth || options.image.width || 800,
         height: options.image.naturalHeight || options.image.height || 600
       };
     }
-    this.initialSnapshot = this.serializeState();
+    this.initialSnapshot = this.captureHistoryEntry();
     if (typeof options.image === "string") {
       this.loadImage(options.image);
     }
   }
   // --- Image Loading ---
+  /**
+   * Loads a new source image and makes it the baseline that `reset()` returns to.
+   * Does not record history; use `applyInpaintedImage` / `applyBackgroundRemovedImage`
+   * for undoable source replacement.
+   */
   async loadImage(src) {
+    if (typeof src === "string") this.state.sourceUrl = src;
+    const source = await this.resolveSource(src);
+    this.imageElement = source.element;
+    this.state.sourceUrl = source.sourceUrl;
+    this.state.imageDimensions = source.dimensions;
+    this.initialSnapshot = this.captureHistoryEntry();
+    this.notify();
+  }
+  async resolveSource(src) {
     if (typeof src === "string") {
-      this.state.sourceUrl = src;
       try {
         const img = await this.renderer.imageCache.get(src);
-        this.imageElement = img;
-        this.state.imageDimensions = {
-          width: img.naturalWidth || img.width || 800,
-          height: img.naturalHeight || img.height || 600
+        return {
+          sourceUrl: src,
+          element: img,
+          dimensions: {
+            width: img.naturalWidth || img.width || 800,
+            height: img.naturalHeight || img.height || 600
+          }
         };
-      } catch (err) {
+      } catch {
+        return { sourceUrl: src, element: null, dimensions: { ...this.state.imageDimensions } };
       }
-    } else {
-      this.imageElement = src;
-      this.state.sourceUrl = src.src || null;
-      this.state.imageDimensions = {
+    }
+    return {
+      sourceUrl: src.src || null,
+      element: src,
+      dimensions: {
         width: src.naturalWidth || src.width || 800,
         height: src.naturalHeight || src.height || 600
-      };
-    }
-    this.initialSnapshot = this.serializeState();
-    this.notify();
+      }
+    };
   }
   getImageElement() {
     return this.imageElement;
@@ -843,9 +1195,28 @@ var ImageEditorController = class {
     this.listeners.forEach((l) => l(currentState));
   }
   // --- History (Undo / Redo / Reset) ---
+  captureHistoryEntry() {
+    return {
+      state: this.serializeState(),
+      source: {
+        sourceUrl: this.state.sourceUrl,
+        element: this.imageElement,
+        dimensions: { ...this.state.imageDimensions }
+      }
+    };
+  }
+  restoreHistoryEntry(entry) {
+    this.applySerializedState(entry.state);
+    this.imageElement = entry.source.element;
+    this.state.sourceUrl = entry.source.sourceUrl;
+    this.state.imageDimensions = { ...entry.source.dimensions };
+    if (this.state.selectedAnnotationId && !this.state.annotations.some((a) => a.id === this.state.selectedAnnotationId)) {
+      this.state.selectedAnnotationId = null;
+    }
+  }
   recordHistory() {
     if (this.isApplyingHistory) return;
-    this.undoStack.push(this.serializeState());
+    this.undoStack.push(this.captureHistoryEntry());
     if (this.undoStack.length > this.maxHistoryDepth) {
       this.undoStack.shift();
     }
@@ -860,10 +1231,9 @@ var ImageEditorController = class {
   undo() {
     if (!this.canUndo) return false;
     this.isApplyingHistory = true;
-    const current = this.serializeState();
-    this.redoStack.push(current);
+    this.redoStack.push(this.captureHistoryEntry());
     const prev = this.undoStack.pop();
-    this.applySerializedState(prev);
+    this.restoreHistoryEntry(prev);
     this.isApplyingHistory = false;
     this.notify();
     return true;
@@ -871,17 +1241,16 @@ var ImageEditorController = class {
   redo() {
     if (!this.canRedo) return false;
     this.isApplyingHistory = true;
-    const current = this.serializeState();
-    this.undoStack.push(current);
+    this.undoStack.push(this.captureHistoryEntry());
     const next = this.redoStack.pop();
-    this.applySerializedState(next);
+    this.restoreHistoryEntry(next);
     this.isApplyingHistory = false;
     this.notify();
     return true;
   }
   reset() {
     this.recordHistory();
-    this.applySerializedState(this.initialSnapshot);
+    this.restoreHistoryEntry(this.initialSnapshot);
     this.state.zoom = 1;
     this.state.pan = { x: 0, y: 0 };
     this.state.activeTool = "select";
@@ -916,6 +1285,9 @@ var ImageEditorController = class {
   applyCropPreset(ratio) {
     this.recordHistory();
     const { width, height } = this.state.imageDimensions;
+    if (ratio && isQuarterTurnSwapped(this.state.transform)) {
+      ratio = 1 / ratio;
+    }
     if (!ratio) {
       this.state.crop = { x: 0, y: 0, width, height };
     } else {
@@ -945,22 +1317,22 @@ var ImageEditorController = class {
   rotate(degrees) {
     this.recordHistory();
     const current = this.state.transform.rotate;
-    this.state.transform.rotate = (current + degrees) % 360;
+    this.state.transform = { ...this.state.transform, rotate: (current + degrees) % 360 };
     this.notify();
   }
   setRotation(degrees) {
     this.recordHistory();
-    this.state.transform.rotate = degrees % 360;
+    this.state.transform = { ...this.state.transform, rotate: degrees % 360 };
     this.notify();
   }
   flipHorizontal() {
     this.recordHistory();
-    this.state.transform.flipH = !this.state.transform.flipH;
+    this.state.transform = { ...this.state.transform, flipH: !this.state.transform.flipH };
     this.notify();
   }
   flipVertical() {
     this.recordHistory();
-    this.state.transform.flipV = !this.state.transform.flipV;
+    this.state.transform = { ...this.state.transform, flipV: !this.state.transform.flipV };
     this.notify();
   }
   // --- Adjustments ---
@@ -1115,14 +1487,68 @@ var ImageEditorController = class {
     const canvas = await this.renderMask(options);
     return canvas.toDataURL("image/png");
   }
+  /**
+   * Renders the current source image at natural size with no crop, rotation, flip,
+   * adjustments or annotations. This is the image that `toMaskDataURL()` is aligned with
+   * and the space that `applyInpaintedImage` / `applyBackgroundRemovedImage` expect back.
+   */
+  async renderSource() {
+    const { width, height } = this.state.imageDimensions;
+    const canvas = this.renderer.createCanvas(width, height);
+    const source = this.imageElement || this.state.sourceUrl;
+    const ctx = canvas.getContext("2d");
+    if (!ctx || !source) return canvas;
+    const img = typeof source === "string" ? await this.renderer.imageCache.get(source) : source;
+    ctx.drawImage(img, 0, 0, width, height);
+    return canvas;
+  }
+  async toSourceDataURL(options = {}) {
+    const canvas = await this.renderSource();
+    return canvas.toDataURL(options.format || "image/png", options.quality ?? 0.92);
+  }
+  /**
+   * Replaces the source image with an inpainted result (natural image space, see
+   * `toSourceDataURL`) and clears the mask annotations, as ONE undoable step.
+   */
   async applyInpaintedImage(newDataUrl) {
-    this.recordHistory();
-    await this.loadImage(newDataUrl);
-    this.clearAnnotations();
+    await this.replaceSource(newDataUrl, true);
   }
+  /**
+   * Replaces the source image with a background-removed result as ONE undoable step.
+   * Crop and annotations are kept (rescaled if the new image has different dimensions).
+   */
   async applyBackgroundRemovedImage(newDataUrl) {
+    await this.replaceSource(newDataUrl, false);
+  }
+  async replaceSource(src, clearAnnotations) {
+    const next = await this.resolveSource(src);
     this.recordHistory();
-    await this.loadImage(newDataUrl);
+    const prev = this.state.imageDimensions;
+    const sx = next.dimensions.width / (prev.width || next.dimensions.width);
+    const sy = next.dimensions.height / (prev.height || next.dimensions.height);
+    this.imageElement = next.element;
+    this.state.sourceUrl = next.sourceUrl;
+    this.state.imageDimensions = next.dimensions;
+    if (sx !== 1 || sy !== 1) {
+      if (this.state.crop) {
+        this.state.crop = clampCropToImage(
+          {
+            x: Math.round(this.state.crop.x * sx),
+            y: Math.round(this.state.crop.y * sy),
+            width: Math.round(this.state.crop.width * sx),
+            height: Math.round(this.state.crop.height * sy)
+          },
+          next.dimensions.width,
+          next.dimensions.height
+        );
+      }
+      this.state.annotations = this.state.annotations.map((ann) => scaleAnnotation(ann, sx, sy));
+    }
+    if (clearAnnotations) {
+      this.state.annotations = [];
+      this.state.selectedAnnotationId = null;
+    }
+    this.notify();
   }
   // --- Serialization ---
   toJSON() {
@@ -1157,226 +1583,25 @@ var ImageEditorController = class {
     this.state.annotations = JSON.parse(JSON.stringify(data.annotations || []));
   }
 };
-
-// src/image-editor/geometry.ts
-function getViewportMetrics(state, vpWidth, vpHeight, isActivelyCropping = false, cropOverride) {
-  const { imageDimensions, crop: stateCrop, transform, zoom, pan } = state;
-  const naturalWidth = imageDimensions.width || 800;
-  const naturalHeight = imageDimensions.height || 600;
-  const activeCrop = cropOverride !== void 0 && cropOverride !== null ? cropOverride : stateCrop ?? (isActivelyCropping ? { x: 0, y: 0, width: naturalWidth, height: naturalHeight } : null);
-  const cropW = !isActivelyCropping && activeCrop ? activeCrop.width : naturalWidth;
-  const cropH = !isActivelyCropping && activeCrop ? activeCrop.height : naturalHeight;
-  const angle = (transform.rotate % 360 + 360) % 360;
-  const isSwapped = angle === 90 || angle === 270;
-  const baseW = isSwapped ? cropH : cropW;
-  const baseH = isSwapped ? cropW : cropH;
-  const fitScale = Math.min(vpWidth * 0.85 / baseW, vpHeight * 0.85 / baseH, 1);
-  const renderW = baseW * fitScale;
-  const renderH = baseH * fitScale;
-  const totalScale = zoom * fitScale;
-  const centerX = vpWidth / 2 + pan.x;
-  const centerY = vpHeight / 2 + pan.y;
-  const imageRect = {
-    x: centerX - renderW * zoom / 2,
-    y: centerY - renderH * zoom / 2,
-    width: renderW * zoom,
-    height: renderH * zoom
-  };
-  let cropRect = null;
-  if (activeCrop) {
-    const startX = -renderW / 2 + activeCrop.x / naturalWidth * renderW;
-    const startY = -renderH / 2 + activeCrop.y / naturalHeight * renderH;
-    const cropBoxW = activeCrop.width / naturalWidth * renderW;
-    const cropBoxH = activeCrop.height / naturalHeight * renderH;
-    cropRect = {
-      x: centerX + zoom * startX,
-      y: centerY + zoom * startY,
-      width: zoom * cropBoxW,
-      height: zoom * cropBoxH
-    };
-  }
-  return {
-    vpWidth,
-    vpHeight,
-    centerX,
-    centerY,
-    baseW,
-    baseH,
-    fitScale,
-    renderW,
-    renderH,
-    totalScale,
-    imageRect,
-    cropRect
-  };
-}
-function canvasToImagePoint(canvasPt, state, vpWidth, vpHeight, isActivelyCropping = false) {
-  const metrics = getViewportMetrics(state, vpWidth, vpHeight, isActivelyCropping);
-  const unzoomedX = (canvasPt.x - metrics.centerX) / state.zoom;
-  const unzoomedY = (canvasPt.y - metrics.centerY) / state.zoom;
-  const x = (unzoomedX + metrics.renderW / 2) / metrics.fitScale;
-  const y = (unzoomedY + metrics.renderH / 2) / metrics.fitScale;
-  return { x: Math.round(x), y: Math.round(y) };
-}
-function imageToCanvasPoint(imgPt, state, vpWidth, vpHeight, isActivelyCropping = false) {
-  const metrics = getViewportMetrics(state, vpWidth, vpHeight, isActivelyCropping);
-  const unzoomedX = (imgPt.x - metrics.baseW / 2) * metrics.fitScale;
-  const unzoomedY = (imgPt.y - metrics.baseH / 2) * metrics.fitScale;
-  const canvasX = metrics.centerX + unzoomedX * state.zoom;
-  const canvasY = metrics.centerY + unzoomedY * state.zoom;
-  return { x: Math.round(canvasX), y: Math.round(canvasY) };
-}
-function hitTestCrop(canvasPt, state, vpWidth, vpHeight, handleThreshold = 14, cropOverride) {
-  const metrics = getViewportMetrics(state, vpWidth, vpHeight, true, cropOverride);
-  if (!metrics.cropRect) return null;
-  const { x, y, width: w, height: h } = metrics.cropRect;
-  const px = canvasPt.x;
-  const py = canvasPt.y;
-  const dist = (x1, y1, x2, y2) => Math.hypot(x1 - x2, y1 - y2);
-  if (dist(px, py, x, y) <= handleThreshold) return "nw";
-  if (dist(px, py, x + w, y) <= handleThreshold) return "ne";
-  if (dist(px, py, x + w, y + h) <= handleThreshold) return "se";
-  if (dist(px, py, x, y + h) <= handleThreshold) return "sw";
-  const nearX = px >= x - handleThreshold && px <= x + w + handleThreshold;
-  const nearY = py >= y - handleThreshold && py <= y + h + handleThreshold;
-  if (nearX && Math.abs(py - y) <= handleThreshold) return "n";
-  if (nearX && Math.abs(py - (y + h)) <= handleThreshold) return "s";
-  if (nearY && Math.abs(px - x) <= handleThreshold) return "w";
-  if (nearY && Math.abs(px - (x + w)) <= handleThreshold) return "e";
-  if (px >= x && px <= x + w && py >= y && py <= y + h) {
-    return "inside";
-  }
-  return null;
-}
-function getCropCursor(handle) {
-  switch (handle) {
-    case "nw":
-    case "se":
-      return "nwse-resize";
-    case "ne":
-    case "sw":
-      return "nesw-resize";
-    case "n":
-    case "s":
-      return "ns-resize";
-    case "e":
-    case "w":
-      return "ew-resize";
-    case "inside":
-      return "move";
-    default:
-      return "crosshair";
-  }
-}
-function calculateCropDrag(startCrop, handle, startImgPt, currentImgPt, imgWidth, imgHeight, aspectRatio) {
-  const dx = currentImgPt.x - startImgPt.x;
-  const dy = currentImgPt.y - startImgPt.y;
-  if (handle === "inside") {
-    const maxX = Math.max(0, imgWidth - startCrop.width);
-    const maxY = Math.max(0, imgHeight - startCrop.height);
-    const newX = Math.max(0, Math.min(maxX, startCrop.x + dx));
-    const newY = Math.max(0, Math.min(maxY, startCrop.y + dy));
-    return {
-      x: Math.round(newX),
-      y: Math.round(newY),
-      width: startCrop.width,
-      height: startCrop.height
-    };
-  }
-  let left = startCrop.x;
-  let top = startCrop.y;
-  let right = startCrop.x + startCrop.width;
-  let bottom = startCrop.y + startCrop.height;
-  const minSize = 20;
-  if (handle === "e" || handle === "ne" || handle === "se") {
-    right = Math.min(imgWidth, Math.max(left + minSize, startCrop.x + startCrop.width + dx));
-  }
-  if (handle === "w" || handle === "nw" || handle === "sw") {
-    left = Math.max(0, Math.min(right - minSize, startCrop.x + dx));
-  }
-  if (handle === "s" || handle === "se" || handle === "sw") {
-    bottom = Math.min(imgHeight, Math.max(top + minSize, startCrop.y + startCrop.height + dy));
-  }
-  if (handle === "n" || handle === "nw" || handle === "ne") {
-    top = Math.max(0, Math.min(bottom - minSize, startCrop.y + dy));
-  }
-  if (aspectRatio && aspectRatio > 0) {
-    let currentW = right - left;
-    let currentH = bottom - top;
-    if (handle === "e" || handle === "w") {
-      currentH = Math.min(imgHeight, currentW / aspectRatio);
-      bottom = Math.min(imgHeight, top + currentH);
-    } else if (handle === "n" || handle === "s") {
-      currentW = Math.min(imgWidth, currentH * aspectRatio);
-      right = Math.min(imgWidth, left + currentW);
-    } else {
-      const targetH = currentW / aspectRatio;
-      if (top + targetH <= imgHeight) {
-        bottom = top + targetH;
-      } else {
-        const targetW = currentH * aspectRatio;
-        right = Math.min(imgWidth, left + targetW);
-      }
-    }
-  }
-  return {
-    x: Math.round(left),
-    y: Math.round(top),
-    width: Math.round(Math.max(minSize, right - left)),
-    height: Math.round(Math.max(minSize, bottom - top))
-  };
-}
-function getAnnotationBounds(ann) {
-  switch (ann.type) {
+function scaleAnnotation(ann, sx, sy) {
+  const k = Math.sqrt(Math.abs(sx * sy));
+  const base = { ...ann, x: ann.x * sx, y: ann.y * sy };
+  switch (base.type) {
+    case "pen":
+      return { ...base, points: base.points.map((p) => ({ x: p.x * sx, y: p.y * sy })), strokeWidth: base.strokeWidth * k };
     case "rect":
-      return { x: ann.x, y: ann.y, width: ann.width, height: ann.height };
+      return { ...base, width: base.width * sx, height: base.height * sy, strokeWidth: base.strokeWidth * k };
+    case "image":
+      return { ...base, width: base.width * sx, height: base.height * sy };
     case "circle":
-      return {
-        x: ann.x - ann.radiusX,
-        y: ann.y - ann.radiusY,
-        width: ann.radiusX * 2,
-        height: ann.radiusY * 2
-      };
+      return { ...base, radiusX: base.radiusX * sx, radiusY: base.radiusY * sy, strokeWidth: base.strokeWidth * k };
     case "arrow":
-    case "line": {
-      const minX = Math.min(ann.x, ann.endX);
-      const minY = Math.min(ann.y, ann.endY);
-      return {
-        x: minX,
-        y: minY,
-        width: Math.max(Math.abs(ann.endX - ann.x), 10),
-        height: Math.max(Math.abs(ann.endY - ann.y), 10)
-      };
-    }
-    case "pen": {
-      if (!ann.points.length) return { x: ann.x, y: ann.y, width: 0, height: 0 };
-      let minX = ann.points[0].x;
-      let maxX = ann.points[0].x;
-      let minY = ann.points[0].y;
-      let maxY = ann.points[0].y;
-      for (const pt of ann.points) {
-        if (pt.x < minX) minX = pt.x;
-        if (pt.x > maxX) maxX = pt.x;
-        if (pt.y < minY) minY = pt.y;
-        if (pt.y > maxY) maxY = pt.y;
-      }
-      return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-    }
+    case "line":
+      return { ...base, endX: base.endX * sx, endY: base.endY * sy, strokeWidth: base.strokeWidth * k };
     case "text":
-      return {
-        x: ann.x,
-        y: ann.y,
-        width: ann.text.length * ann.fontSize * 0.6,
-        height: ann.fontSize * 1.2
-      };
-    case "image":
-      return { x: ann.x, y: ann.y, width: ann.width, height: ann.height };
+      return { ...base, fontSize: base.fontSize * k };
   }
 }
-function hitTestAnnotation(imgPt, ann, padding = 10) {
-  const b = getAnnotationBounds(ann);
-  return imgPt.x >= b.x - padding && imgPt.x <= b.x + b.width + padding && imgPt.y >= b.y - padding && imgPt.y <= b.y + b.height + padding;
-}
 export {
   DEFAULT_ADJUSTMENTS,
   DEFAULT_DEPTH_MASK,
@@ -1385,15 +1610,25 @@ export {
   ImageEditorRenderer,
   applyAdjustments,
   applyDepthMask,
+  applyImageProjectionToContext,
   calculateCropDrag,
   canvasToImagePoint,
+  clampCropToImage,
   getAnnotationBounds,
   getCropCursor,
+  getRotatedSize,
   getViewportMetrics,
+  getViewportProjection,
   globalImageCache,
   hitTestAnnotation,
   hitTestCrop,
   imageToCanvasPoint,
-  removeAlpha
+  isQuarterTurnSwapped,
+  mapCropHandle,
+  normalizeAngle,
+  projectImagePoint,
+  projectImageRect,
+  removeAlpha,
+  unprojectCanvasPoint
 };
 //# sourceMappingURL=index.js.map