@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-image/crop.ts

@@ -0,0 +1,770 @@
+import {
+  Vec,
+  type SelectionResizeHandleId,
+  type ShapeUpdate,
+} from "@land/canvas-core";
+import type { ImageShapeCrop, ImageShapeRecord } from "./types";
+
+const MIN_NORMALIZED_CROP_SIZE = 0.0001;
+const MIN_CROP_SIZE = 8;
+const IMAGE_CROP_ZOOM_FACTOR = 0.8;
+const IMAGE_CROP_EPSILON = 0.0001;
+export const IMAGE_CROP_HANDLE_TYPE = "image.crop";
+export const IMAGE_CROP_HISTORY_MARK_PREFIX = "image.crop:";
+export const IMAGE_CROP_HANDLE_HISTORY_MARK = "image.crop.handle";
+export const IMAGE_CROP_TRANSLATE_HISTORY_MARK = "image.crop.translate";
+export const IMAGE_CROP_MODE_ENTRY_MARK_PREFIX = `${IMAGE_CROP_HISTORY_MARK_PREFIX}edit:`;
+export const IMAGE_CROP_ASPECT_RATIO_PRESETS = [
+  { label: "1:1", value: "1:1", ratio: 1 },
+  { label: "4:3", value: "4:3", ratio: 4 / 3 },
+  { label: "16:9", value: "16:9", ratio: 16 / 9 },
+] as const;
+
+export type ImageCropAspectRatioPresetValue =
+  (typeof IMAGE_CROP_ASPECT_RATIO_PRESETS)[number]["value"];
+
+const IMAGE_CROP_HANDLE_CURSORS: Record<SelectionResizeHandleId, string> = {
+  top_left: "nwse-resize",
+  top: "ns-resize",
+  top_right: "nesw-resize",
+  right: "ew-resize",
+  bottom_right: "nwse-resize",
+  bottom: "ns-resize",
+  bottom_left: "nesw-resize",
+  left: "ew-resize",
+};
+
+const IMAGE_CROP_HANDLE_IDS = [
+  "top_left",
+  "top",
+  "top_right",
+  "right",
+  "bottom_right",
+  "bottom",
+  "bottom_left",
+  "left",
+] as const satisfies readonly SelectionResizeHandleId[];
+
+export interface ImageCropRect {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+export interface ImageCropPlacement {
+  imageX: number;
+  imageY: number;
+  imageWidth: number;
+  imageHeight: number;
+  rect: ImageCropRect;
+}
+
+export interface ImageCropCustomHandleAnchor {
+  kind: "custom";
+  type: typeof IMAGE_CROP_HANDLE_TYPE;
+  id: SelectionResizeHandleId;
+  point: Vec;
+  cursor: string;
+}
+
+interface UncroppedImageSpace {
+  w: number;
+  h: number;
+}
+
+function clamp01(value: number): number {
+  return Math.min(1, Math.max(0, value));
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function isCropPoint(value: unknown): value is { x: number; y: number } {
+  return (
+    !!value &&
+    typeof value === "object" &&
+    typeof (value as { x?: unknown }).x === "number" &&
+    Number.isFinite((value as { x: number }).x) &&
+    typeof (value as { y?: unknown }).y === "number" &&
+    Number.isFinite((value as { y: number }).y)
+  );
+}
+
+function normalizeRange(
+  first: number,
+  second: number,
+): { min: number; max: number } {
+  const clampedFirst = clamp01(first);
+  const clampedSecond = clamp01(second);
+  let min = Math.min(clampedFirst, clampedSecond);
+  let max = Math.max(clampedFirst, clampedSecond);
+
+  if (max - min < MIN_NORMALIZED_CROP_SIZE) {
+    const center = (min + max) / 2;
+    min = Math.max(
+      0,
+      Math.min(
+        1 - MIN_NORMALIZED_CROP_SIZE,
+        center - MIN_NORMALIZED_CROP_SIZE / 2,
+      ),
+    );
+    max = min + MIN_NORMALIZED_CROP_SIZE;
+  }
+
+  return { min, max };
+}
+
+export function normalizeImageShapeCrop(value: unknown): ImageShapeCrop | null {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const candidate = value as {
+    bottomRight?: unknown;
+    topLeft?: unknown;
+  };
+  if (!isCropPoint(candidate.topLeft) || !isCropPoint(candidate.bottomRight)) {
+    return null;
+  }
+
+  const x = normalizeRange(candidate.topLeft.x, candidate.bottomRight.x);
+  const y = normalizeRange(candidate.topLeft.y, candidate.bottomRight.y);
+  return {
+    topLeft: { x: x.min, y: y.min },
+    bottomRight: { x: x.max, y: y.max },
+  };
+}
+
+export function getImageCropRect(
+  crop: ImageShapeCrop | null | undefined,
+): ImageCropRect | null {
+  const normalized = normalizeImageShapeCrop(crop);
+  if (!normalized) {
+    return null;
+  }
+
+  const left = normalized.topLeft.x;
+  const top = normalized.topLeft.y;
+  const right = normalized.bottomRight.x;
+  const bottom = normalized.bottomRight.y;
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top,
+  };
+}
+
+export function getDefaultImageCrop(): ImageShapeCrop {
+  return {
+    topLeft: { x: 0, y: 0 },
+    bottomRight: { x: 1, y: 1 },
+  };
+}
+
+export function getImageCropRectOrDefault(
+  crop: ImageShapeCrop | null | undefined,
+): ImageCropRect {
+  return getImageCropRect(crop) ?? {
+    left: 0,
+    top: 0,
+    right: 1,
+    bottom: 1,
+    width: 1,
+    height: 1,
+  };
+}
+
+function isCropRectApproximatelyFull(rect: ImageCropRect): boolean {
+  return (
+    Math.abs(rect.left) <= IMAGE_CROP_EPSILON &&
+    Math.abs(rect.top) <= IMAGE_CROP_EPSILON &&
+    Math.abs(1 - rect.right) <= IMAGE_CROP_EPSILON &&
+    Math.abs(1 - rect.bottom) <= IMAGE_CROP_EPSILON
+  );
+}
+
+function areCropRectsEqual(left: ImageCropRect, right: ImageCropRect): boolean {
+  return (
+    Math.abs(left.left - right.left) <= IMAGE_CROP_EPSILON &&
+    Math.abs(left.top - right.top) <= IMAGE_CROP_EPSILON &&
+    Math.abs(left.right - right.right) <= IMAGE_CROP_EPSILON &&
+    Math.abs(left.bottom - right.bottom) <= IMAGE_CROP_EPSILON
+  );
+}
+
+function getImageCropFromRect(
+  rect: ImageCropRect,
+): ImageShapeCrop | null {
+  if (isCropRectApproximatelyFull(rect)) {
+    return null;
+  }
+
+  return normalizeImageShapeCrop({
+    topLeft: {
+      x: rect.left,
+      y: rect.top,
+    },
+    bottomRight: {
+      x: rect.right,
+      y: rect.bottom,
+    },
+  });
+}
+
+function getCenteredCropRect({
+  centerX,
+  centerY,
+  height,
+  width,
+}: {
+  centerX: number;
+  centerY: number;
+  height: number;
+  width: number;
+}): ImageCropRect {
+  const nextWidth = clamp(width, MIN_NORMALIZED_CROP_SIZE, 1);
+  const nextHeight = clamp(height, MIN_NORMALIZED_CROP_SIZE, 1);
+  const left = clamp(centerX - nextWidth / 2, 0, 1 - nextWidth);
+  const top = clamp(centerY - nextHeight / 2, 0, 1 - nextHeight);
+  return {
+    left,
+    top,
+    right: left + nextWidth,
+    bottom: top + nextHeight,
+    width: nextWidth,
+    height: nextHeight,
+  };
+}
+
+function getImageCropRectCenter(rect: ImageCropRect): { x: number; y: number } {
+  return {
+    x: rect.left + rect.width / 2,
+    y: rect.top + rect.height / 2,
+  };
+}
+
+export function getUncroppedImageSize({
+  crop,
+  shape,
+}: {
+  crop: ImageShapeCrop | null | undefined;
+  shape: ImageShapeRecord;
+}): UncroppedImageSpace {
+  const rect = getImageCropRectOrDefault(crop);
+  return {
+    w: shape.props.w / rect.width,
+    h: shape.props.h / rect.height,
+  };
+}
+
+export function getImageCropAspectRatioPresetValue(
+  shape: ImageShapeRecord,
+): ImageCropAspectRatioPresetValue | null {
+  const shapeAspectRatio = shape.props.w / shape.props.h;
+  for (const preset of IMAGE_CROP_ASPECT_RATIO_PRESETS) {
+    if (Math.abs(shapeAspectRatio - preset.ratio) <= 0.01) {
+      return preset.value;
+    }
+  }
+  return null;
+}
+
+export function isImageCropModeForShape(
+  shape: ImageShapeRecord,
+  markId: string | null | undefined,
+): boolean {
+  return markId === getImageCropModeMarkId(shape.id);
+}
+
+export function getImageCropModeMarkId(shapeId: ImageShapeRecord["id"]): string {
+  return `${IMAGE_CROP_MODE_ENTRY_MARK_PREFIX}${shapeId}`;
+}
+
+export function getImageCropHandleIds(): readonly SelectionResizeHandleId[] {
+  return IMAGE_CROP_HANDLE_IDS;
+}
+
+export function isImageCropHandleId(
+  value: string,
+): value is SelectionResizeHandleId {
+  return IMAGE_CROP_HANDLE_IDS.some((id) => id === value);
+}
+
+export function getImageCropHandleCursor(
+  handleId: SelectionResizeHandleId,
+): string {
+  return IMAGE_CROP_HANDLE_CURSORS[handleId];
+}
+
+function movesLeftCropEdge(handleId: SelectionResizeHandleId): boolean {
+  return (
+    handleId === "top_left" ||
+    handleId === "left" ||
+    handleId === "bottom_left"
+  );
+}
+
+function movesRightCropEdge(handleId: SelectionResizeHandleId): boolean {
+  return (
+    handleId === "top_right" ||
+    handleId === "right" ||
+    handleId === "bottom_right"
+  );
+}
+
+function movesTopCropEdge(handleId: SelectionResizeHandleId): boolean {
+  return (
+    handleId === "top_left" ||
+    handleId === "top" ||
+    handleId === "top_right"
+  );
+}
+
+function movesBottomCropEdge(handleId: SelectionResizeHandleId): boolean {
+  return (
+    handleId === "bottom_left" ||
+    handleId === "bottom" ||
+    handleId === "bottom_right"
+  );
+}
+
+export function getImageCropHandleAnchors({
+  localToPage,
+  shape,
+}: {
+  crop: ImageShapeCrop | null | undefined;
+  localToPage: { applyToPoint(point: Vec): Vec };
+  shape: ImageShapeRecord;
+}): ImageCropCustomHandleAnchor[] {
+  const left = 0;
+  const right = shape.props.w;
+  const top = 0;
+  const bottom = shape.props.h;
+  const centerX = (left + right) / 2;
+  const centerY = (top + bottom) / 2;
+  const points: Record<SelectionResizeHandleId, Vec> = {
+    top_left: new Vec(left, top),
+    top: new Vec(centerX, top),
+    top_right: new Vec(right, top),
+    right: new Vec(right, centerY),
+    bottom_right: new Vec(right, bottom),
+    bottom: new Vec(centerX, bottom),
+    bottom_left: new Vec(left, bottom),
+    left: new Vec(left, centerY),
+  };
+
+  return IMAGE_CROP_HANDLE_IDS.map((id) => ({
+    kind: "custom" as const,
+    type: IMAGE_CROP_HANDLE_TYPE,
+    id,
+    point: localToPage.applyToPoint(points[id]),
+    cursor: getImageCropHandleCursor(id),
+  }));
+}
+
+export function getImageCropUpdateFromHandleDrag({
+  handleId,
+  pageToLocal,
+  shape,
+  startCrop,
+  startPagePoint,
+  currentPagePoint,
+}: {
+  handleId: SelectionResizeHandleId;
+  pageToLocal: { applyToPoint(point: Vec): Vec };
+  shape: ImageShapeRecord;
+  startCrop: ImageShapeCrop | null | undefined;
+  startPagePoint: Vec;
+  currentPagePoint: Vec;
+}): ShapeUpdate | null {
+  const crop = normalizeImageShapeCrop(startCrop) ?? getDefaultImageCrop();
+  const uncroppedSize = getUncroppedImageSize({ crop, shape });
+  if (
+    uncroppedSize.w < MIN_CROP_SIZE ||
+    uncroppedSize.h < MIN_CROP_SIZE
+  ) {
+    return null;
+  }
+
+  const originLocalPoint = pageToLocal.applyToPoint(startPagePoint);
+  const currentLocalPoint = pageToLocal.applyToPoint(currentPagePoint);
+  const change = currentLocalPoint.sub(originLocalPoint);
+  if (change.x === 0 && change.y === 0) {
+    return null;
+  }
+
+  const previousCropBox = {
+    x: crop.topLeft.x * uncroppedSize.w,
+    y: crop.topLeft.y * uncroppedSize.h,
+    w: (crop.bottomRight.x - crop.topLeft.x) * uncroppedSize.w,
+    h: (crop.bottomRight.y - crop.topLeft.y) * uncroppedSize.h,
+  };
+  const previousMaxX = previousCropBox.x + previousCropBox.w;
+  const previousMaxY = previousCropBox.y + previousCropBox.h;
+  let nextX = previousCropBox.x;
+  let nextY = previousCropBox.y;
+  let nextW = previousCropBox.w;
+  let nextH = previousCropBox.h;
+
+  if (movesLeftCropEdge(handleId)) {
+    nextX = clamp(nextX + change.x, 0, previousMaxX - MIN_CROP_SIZE);
+    nextW = previousMaxX - nextX;
+  } else if (movesRightCropEdge(handleId)) {
+    const nextRight = clamp(
+      previousMaxX + change.x,
+      previousCropBox.x + MIN_CROP_SIZE,
+      uncroppedSize.w,
+    );
+    nextW = nextRight - nextX;
+  }
+
+  if (movesTopCropEdge(handleId)) {
+    nextY = clamp(nextY + change.y, 0, previousMaxY - MIN_CROP_SIZE);
+    nextH = previousMaxY - nextY;
+  } else if (movesBottomCropEdge(handleId)) {
+    const nextBottom = clamp(
+      previousMaxY + change.y,
+      previousCropBox.y + MIN_CROP_SIZE,
+      uncroppedSize.h,
+    );
+    nextH = nextBottom - nextY;
+  }
+
+  const nextCrop = normalizeImageShapeCrop({
+    topLeft: {
+      x: nextX / uncroppedSize.w,
+      y: nextY / uncroppedSize.h,
+    },
+    bottomRight: {
+      x: (nextX + nextW) / uncroppedSize.w,
+      y: (nextY + nextH) / uncroppedSize.h,
+    },
+  });
+  if (!nextCrop) {
+    return null;
+  }
+
+  const delta = new Vec(
+    nextX - crop.topLeft.x * uncroppedSize.w,
+    nextY - crop.topLeft.y * uncroppedSize.h,
+  );
+  const pageDelta = delta.rot(shape.rotation);
+
+  return {
+    id: shape.id,
+    x: shape.x + pageDelta.x,
+    y: shape.y + pageDelta.y,
+    props: {
+      w: nextW,
+      h: nextH,
+      crop: nextCrop,
+    },
+  };
+}
+
+export function getImageCropUpdateFromContentDrag({
+  currentPagePoint,
+  pageToLocal,
+  shape,
+  startCrop,
+  startPagePoint,
+  shiftKey,
+}: {
+  currentPagePoint: Vec;
+  pageToLocal: { applyToPoint(point: Vec): Vec };
+  shape: ImageShapeRecord;
+  startCrop: ImageShapeCrop | null | undefined;
+  startPagePoint: Vec;
+  shiftKey: boolean;
+}): ShapeUpdate | null {
+  const crop = normalizeImageShapeCrop(startCrop);
+  if (!crop) {
+    return null;
+  }
+
+  const originLocalPoint = pageToLocal.applyToPoint(startPagePoint);
+  const currentLocalPoint = pageToLocal.applyToPoint(currentPagePoint);
+  let change = currentLocalPoint.sub(originLocalPoint);
+  if (shiftKey) {
+    change =
+      Math.abs(change.x) < Math.abs(change.y)
+        ? new Vec(0, change.y)
+        : new Vec(change.x, 0);
+  }
+  if (change.x === 0 && change.y === 0) {
+    return null;
+  }
+
+  return getImageCropUpdateFromContentLocalChange({
+    change,
+    crop,
+    shape,
+  });
+}
+
+export function getImageCropUpdateFromContentNudge({
+  pageDelta,
+  shape,
+  startCrop,
+}: {
+  pageDelta: Vec;
+  shape: ImageShapeRecord;
+  startCrop: ImageShapeCrop | null | undefined;
+}): ShapeUpdate | null {
+  const crop = normalizeImageShapeCrop(startCrop);
+  if (!crop || pageDelta.equals(Vec.Zero())) {
+    return null;
+  }
+
+  return getImageCropUpdateFromContentLocalChange({
+    change: pageDelta.rot(-shape.rotation),
+    crop,
+    shape,
+  });
+}
+
+function getImageCropUpdateFromContentLocalChange({
+  change,
+  crop,
+  shape,
+}: {
+  change: Vec;
+  crop: ImageShapeCrop;
+  shape: ImageShapeRecord;
+}): ShapeUpdate | null {
+  const uncroppedSize = getUncroppedImageSize({ crop, shape });
+  const cropWidth = crop.bottomRight.x - crop.topLeft.x;
+  const cropHeight = crop.bottomRight.y - crop.topLeft.y;
+  const nextTopLeftX = clamp(
+    crop.topLeft.x - change.x / uncroppedSize.w,
+    0,
+    1 - cropWidth,
+  );
+  const nextTopLeftY = clamp(
+    crop.topLeft.y - change.y / uncroppedSize.h,
+    0,
+    1 - cropHeight,
+  );
+
+  const nextCrop = normalizeImageShapeCrop({
+    topLeft: {
+      x: nextTopLeftX,
+      y: nextTopLeftY,
+    },
+    bottomRight: {
+      x: nextTopLeftX + cropWidth,
+      y: nextTopLeftY + cropHeight,
+    },
+  });
+  if (!nextCrop) {
+    return null;
+  }
+
+  return {
+    id: shape.id,
+    props: {
+      crop: nextCrop,
+    },
+  };
+}
+
+export function getImageCropUpdateFromZoom({
+  direction,
+  shape,
+}: {
+  direction: "in" | "out";
+  shape: ImageShapeRecord;
+}): ShapeUpdate | null {
+  const rect = getImageCropRectOrDefault(shape.props.crop);
+  const center = getImageCropRectCenter(rect);
+  const rawFactor =
+    direction === "in" ? IMAGE_CROP_ZOOM_FACTOR : 1 / IMAGE_CROP_ZOOM_FACTOR;
+  const minFactor = Math.max(
+    MIN_NORMALIZED_CROP_SIZE / rect.width,
+    MIN_NORMALIZED_CROP_SIZE / rect.height,
+  );
+  const maxFactor = Math.min(1 / rect.width, 1 / rect.height);
+  const factor = clamp(rawFactor, minFactor, maxFactor);
+  const nextRect = getCenteredCropRect({
+    centerX: center.x,
+    centerY: center.y,
+    width: rect.width * factor,
+    height: rect.height * factor,
+  });
+  if (areCropRectsEqual(rect, nextRect)) {
+    return null;
+  }
+
+  return {
+    id: shape.id,
+    props: {
+      crop: getImageCropFromRect(nextRect),
+    },
+  };
+}
+
+function getImageCropUpdateWithLockedImagePlacement({
+  nextRect,
+  shape,
+}: {
+  nextRect: ImageCropRect;
+  shape: ImageShapeRecord;
+}): ShapeUpdate | null {
+  const currentRect = getImageCropRectOrDefault(shape.props.crop);
+  if (areCropRectsEqual(currentRect, nextRect)) {
+    return null;
+  }
+
+  const uncroppedSize = getUncroppedImageSize({
+    crop: shape.props.crop,
+    shape,
+  });
+  const localDelta = new Vec(
+    (nextRect.left - currentRect.left) * uncroppedSize.w,
+    (nextRect.top - currentRect.top) * uncroppedSize.h,
+  );
+  const pageDelta = localDelta.rot(shape.rotation);
+
+  return {
+    id: shape.id,
+    x: shape.x + pageDelta.x,
+    y: shape.y + pageDelta.y,
+    props: {
+      w: nextRect.width * uncroppedSize.w,
+      h: nextRect.height * uncroppedSize.h,
+      crop: getImageCropFromRect(nextRect),
+    },
+  };
+}
+
+export function getImageCropUpdateFromAspectRatioPreset({
+  preset,
+  shape,
+}: {
+  preset: ImageCropAspectRatioPresetValue;
+  shape: ImageShapeRecord;
+}): ShapeUpdate | null {
+  const currentRect = getImageCropRectOrDefault(shape.props.crop);
+  const center = getImageCropRectCenter(currentRect);
+  const uncroppedSize = getUncroppedImageSize({
+    crop: shape.props.crop,
+    shape,
+  });
+  const presetRatio =
+    IMAGE_CROP_ASPECT_RATIO_PRESETS.find((candidate) => candidate.value === preset)
+      ?.ratio ?? null;
+  if (!presetRatio) {
+    return null;
+  }
+
+  const normalizedCropAspectRatio =
+    presetRatio * (uncroppedSize.h / uncroppedSize.w);
+  let nextWidth = currentRect.width;
+  let nextHeight = nextWidth / normalizedCropAspectRatio;
+  if (nextHeight > currentRect.height) {
+    nextHeight = currentRect.height;
+    nextWidth = nextHeight * normalizedCropAspectRatio;
+  }
+
+  const nextRect = getCenteredCropRect({
+    centerX: center.x,
+    centerY: center.y,
+    width: nextWidth,
+    height: nextHeight,
+  });
+  return getImageCropUpdateWithLockedImagePlacement({
+    nextRect,
+    shape,
+  });
+}
+
+export function getImageCropResetUpdate({
+  baselineShape,
+  shape,
+}: {
+  baselineShape: ImageShapeRecord;
+  shape: ImageShapeRecord;
+}): ShapeUpdate | null {
+  const nextX = baselineShape.x;
+  const nextY = baselineShape.y;
+  const nextW = baselineShape.props.w;
+  const nextH = baselineShape.props.h;
+  const nextCrop = normalizeImageShapeCrop(baselineShape.props.crop);
+  if (
+    Math.abs(shape.x - nextX) <= IMAGE_CROP_EPSILON &&
+    Math.abs(shape.y - nextY) <= IMAGE_CROP_EPSILON &&
+    Math.abs(shape.props.w - nextW) <= IMAGE_CROP_EPSILON &&
+    Math.abs(shape.props.h - nextH) <= IMAGE_CROP_EPSILON &&
+    ((shape.props.crop === null && nextCrop === null) ||
+      (shape.props.crop !== null &&
+        nextCrop !== null &&
+        Math.abs(shape.props.crop.topLeft.x - nextCrop.topLeft.x) <=
+          IMAGE_CROP_EPSILON &&
+        Math.abs(shape.props.crop.topLeft.y - nextCrop.topLeft.y) <=
+          IMAGE_CROP_EPSILON &&
+        Math.abs(shape.props.crop.bottomRight.x - nextCrop.bottomRight.x) <=
+          IMAGE_CROP_EPSILON &&
+        Math.abs(shape.props.crop.bottomRight.y - nextCrop.bottomRight.y) <=
+          IMAGE_CROP_EPSILON))
+  ) {
+    return null;
+  }
+
+  return {
+    id: shape.id,
+    x: nextX,
+    y: nextY,
+    props: {
+      w: nextW,
+      h: nextH,
+      crop: nextCrop,
+    },
+  };
+}
+
+export function getImageCropPlacement({
+  crop,
+  shapeHeight,
+  shapeWidth,
+}: {
+  crop: ImageShapeCrop | null | undefined;
+  shapeHeight: number;
+  shapeWidth: number;
+}): ImageCropPlacement | null {
+  const rect = getImageCropRect(crop);
+  if (!rect) {
+    return null;
+  }
+
+  const imageWidth = shapeWidth / rect.width;
+  const imageHeight = shapeHeight / rect.height;
+  return {
+    imageX: -rect.left * imageWidth,
+    imageY: -rect.top * imageHeight,
+    imageWidth,
+    imageHeight,
+    rect,
+  };
+}
+
+export function formatImageCropViewBox(rect: ImageCropRect): string {
+  return [
+    formatCropNumber(rect.left),
+    formatCropNumber(rect.top),
+    formatCropNumber(rect.width),
+    formatCropNumber(rect.height),
+  ].join(" ");
+}
+
+function formatCropNumber(value: number): string {
+  if (!Number.isFinite(value)) {
+    return "0";
+  }
+  return Number(value.toFixed(4)).toString();
+}