Image cropper

"use client";

import {
  useEffect,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
  type KeyboardEvent,
  type PointerEvent,
} from "react";
import { Button } from "./button";
import { Icon } from "./icon";
import "./image-cropper.css";

/** The crop in pixels of the source image after rotation, and that rotation in degrees. */
export type CropArea = { x: number; y: number; width: number; height: number; rotation: 0 | 90 | 180 | 270 };

export type ImageCropperProps = Omit<ComponentProps<"div">, "children" | "onChange"> & {
  /** The image to crop. Same origin, a data or blob URL, or CORS-enabled if you export it. */
  src: string;
  /** Describes the image. */
  alt: string;
  /** Width divided by height, such as 1 or 16 / 9. Leave it out for a free frame. */
  aspect?: number;
  /** Shows a round mask, for profile pictures. The crop itself stays a rectangle. */
  shape?: "rect" | "round";
  /** Largest zoom, as a multiple of the fitted size. */
  maxZoom?: number;
  /** Rotation on first render. */
  defaultRotation?: CropArea["rotation"];
  /** Tallest the image area may get, in pixels. */
  maxHeight?: number;
  /** Called with the crop in source pixels whenever it changes, once the image has loaded. */
  onCropChange?: (area: CropArea) => void;
  /** Passed to the img, for exporting images from another origin. */
  crossOrigin?: ComponentProps<"img">["crossOrigin"];
};

type Box = { x: number; y: number; w: number; h: number };
type Corner = "nw" | "ne" | "sw" | "se";
type Drag = { mode: "move" | Corner; px: number; py: number; start: Box };

const MIN = 0.05;
const STEP = 0.01;
const clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi);

/** The largest frame of the aspect that fits, centred; k is the frame's height per unit of width, in fractions. */
function fitted(k: number | null): Box {
  if (k === null) return { x: 0.1, y: 0.1, w: 0.8, h: 0.8 };
  const w = Math.min(0.9, 0.9 / k);
  const h = w * k;
  return { x: (1 - w) / 2, y: (1 - h) / 2, w, h };
}

/** Draws the crop onto a canvas at full resolution. */
export function cropToCanvas(image: HTMLImageElement, area: CropArea): HTMLCanvasElement {
  const canvas = document.createElement("canvas");
  canvas.width = Math.max(1, Math.round(area.width));
  canvas.height = Math.max(1, Math.round(area.height));
  const g = canvas.getContext("2d");
  if (!g) return canvas;
  const w = image.naturalWidth;
  const h = image.naturalHeight;
  const turned = area.rotation % 180 !== 0;
  g.translate(-area.x, -area.y);
  g.translate((turned ? h : w) / 2, (turned ? w : h) / 2);
  g.rotate((area.rotation * Math.PI) / 180);
  g.drawImage(image, -w / 2, -h / 2);
  return canvas;
}

/** Loads the image if given a URL, crops it and encodes it, by default as PNG. */
export async function cropImage(source: string | HTMLImageElement, area: CropArea, type = "image/png", quality?: number): Promise<Blob | null> {
  let image: HTMLImageElement;
  if (typeof source === "string") {
    image = new Image();
    image.crossOrigin = "anonymous";
    image.src = source;
    await image.decode();
  } else image = source;
  const canvas = cropToCanvas(image, area);
  return new Promise((resolve) => canvas.toBlob(resolve, type, quality));
}

export function ImageCropper({
  src,
  alt,
  aspect,
  shape = "rect",
  maxZoom = 3,
  defaultRotation = 0,
  maxHeight = 320,
  onCropChange,
  crossOrigin,
  className,
  style,
  ...rest
}: ImageCropperProps) {
  const id = useId();
  const root = useRef<HTMLDivElement>(null);
  const image = useRef<HTMLImageElement>(null);
  const drag = useRef<Drag | null>(null);
  const report = useRef(onCropChange);
  report.current = onCropChange;
  const [natural, setNatural] = useState<{ w: number; h: number } | null>(null);
  const [room, setRoom] = useState(0);
  const [rotation, setRotation] = useState<CropArea["rotation"]>(defaultRotation);
  const [zoom, setZoom] = useState(1);
  const [crop, setCrop] = useState<Box>(() => fitted(null));
  const [view, setView] = useState({ x: 0.5, y: 0.5 });
  const [dragging, setDragging] = useState(false);

  const turned = rotation % 180 !== 0;
  const rw = natural ? (turned ? natural.h : natural.w) : 4;
  const rh = natural ? (turned ? natural.w : natural.h) : 3;
  // Frame height per unit of frame width, in fractions of the rotated image.
  const k = aspect ? rw / (aspect * rh) : null;

  // Width available, measured after mount and on resize.
  useEffect(() => {
    const node = root.current;
    if (!node) return;
    setRoom(node.clientWidth);
    const observer = new ResizeObserver(([entry]) => entry && setRoom(entry.contentRect.width));
    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  // An image that finished loading before hydration never fires load.
  useEffect(() => {
    const img = image.current;
    if (img?.complete && img.naturalWidth > 0) setNatural({ w: img.naturalWidth, h: img.naturalHeight });
  }, [src]);

  // A new image, aspect or rotation starts from the largest frame that fits.
  useEffect(() => {
    setCrop(fitted(k));
    setView({ x: 0.5, y: 0.5 });
  }, [k, src]);

  useEffect(() => {
    if (!natural) return;
    report.current?.({
      x: Math.round(crop.x * rw),
      y: Math.round(crop.y * rh),
      width: Math.round(crop.w * rw),
      height: Math.round(crop.h * rh),
      rotation,
    });
  }, [crop, natural, rotation, rw, rh]);

  const ratio = rw / rh;
  const fitW = room > 0 ? Math.min(room, maxHeight * ratio) : 0;
  const fitH = fitW / ratio;
  const cw = fitW * zoom;
  const ch = fitH * zoom;
  const ox = clamp(fitW / 2 - view.x * cw, fitW - cw, 0);
  const oy = clamp(fitH / 2 - view.y * ch, fitH - ch, 0);

  function centre(box: Box) {
    setView({ x: box.x + box.w / 2, y: box.y + box.h / 2 });
  }

  function resize(start: Box, corner: Corner, dx: number, dy: number): Box {
    const east = corner === "ne" || corner === "se";
    const south = corner === "sw" || corner === "se";
    // The corner across from the one held stays put.
    const ax = east ? start.x : start.x + start.w;
    const ay = south ? start.y : start.y + start.h;
    const roomX = east ? 1 - ax : ax;
    const roomY = south ? 1 - ay : ay;
    let w = clamp(start.w + (east ? dx : -dx), MIN, roomX);
    let h = clamp(start.h + (south ? dy : -dy), MIN, roomY);
    if (k !== null) {
      w = clamp(Math.max(w, h / k), Math.max(MIN, MIN / k), Math.min(roomX, roomY / k));
      h = w * k;
    }
    return { x: east ? ax : ax - w, y: south ? ay : ay - h, w, h };
  }

  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {
    if (event.button !== 0 || !(event.target instanceof Element) || cw === 0) return;
    const handle = event.target.closest<HTMLElement>("[data-corner]");
    const onFrame = event.target.closest(".eq-image-cropper-frame");
    if (!onFrame) return;
    event.preventDefault();
    event.currentTarget.setPointerCapture(event.pointerId);
    if (onFrame instanceof HTMLElement) onFrame.focus({ preventScroll: true });
    const corner = handle?.dataset.corner as Corner | undefined;
    drag.current = { mode: corner ?? "move", px: event.clientX, py: event.clientY, start: crop };
    setDragging(true);
  }

  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
    const d = drag.current;
    if (!d || cw === 0) return;
    const dx = (event.clientX - d.px) / cw;
    const dy = (event.clientY - d.py) / ch;
    if (d.mode === "move") {
      setCrop({ ...d.start, x: clamp(d.start.x + dx, 0, 1 - d.start.w), y: clamp(d.start.y + dy, 0, 1 - d.start.h) });
    } else setCrop(resize(d.start, d.mode, dx, dy));
  }

  function endDrag() {
    if (!drag.current) return;
    drag.current = null;
    setDragging(false);
    centre(crop);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    if (event.altKey || event.ctrlKey || event.metaKey) return;
    const dx = event.key === "ArrowRight" ? STEP : event.key === "ArrowLeft" ? -STEP : 0;
    const dy = event.key === "ArrowDown" ? STEP : event.key === "ArrowUp" ? -STEP : 0;
    if (dx === 0 && dy === 0) return;
    event.preventDefault();
    event.stopPropagation();
    const next = event.shiftKey
      ? resize(crop, "se", dx, k !== null && dx !== 0 ? dx * k : dy)
      : { ...crop, x: clamp(crop.x + dx, 0, 1 - crop.w), y: clamp(crop.y + dy, 0, 1 - crop.h) };
    setCrop(next);
    centre(next);
  }

  // With a fixed aspect the frame is refitted by the effect above, since k changes with the turn.
  function rotate() {
    setRotation((r) => ((r + 90) % 360) as CropArea["rotation"]);
    setView({ x: 0.5, y: 0.5 });
  }

  const pixels = natural ? `${Math.round(crop.w * rw)} by ${Math.round(crop.h * rh)} pixels` : "";
  const at = natural ? `at ${Math.round(crop.x * rw)}, ${Math.round(crop.y * rh)}` : "";

  return (
    <div
      ref={root}
      {...rest}
      className={["eq-image-cropper", className].filter(Boolean).join(" ")}
      style={style}
      data-shape={shape}
      data-ready={natural && fitW > 0 ? "" : undefined}
    >
      <div
        className="eq-image-cropper-stage"
        style={{ width: fitW || undefined, height: fitH || undefined }}
        data-dragging={dragging || undefined}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={endDrag}
        onPointerCancel={endDrag}
        onLostPointerCapture={endDrag}
      >
        <div
          className="eq-image-cropper-canvas"
          style={{ width: cw, height: ch, translate: `${ox}px ${oy}px` } as CSSProperties}
        >
          <img
            ref={image}
            className="eq-image-cropper-image"
            src={src}
            alt={alt}
            crossOrigin={crossOrigin}
            draggable={false}
            onLoad={(event) => setNatural({ w: event.currentTarget.naturalWidth, h: event.currentTarget.naturalHeight })}
            style={{
              width: turned ? ch : cw,
              height: turned ? cw : ch,
              rotate: `${rotation}deg`,
            }}
          />
          <div
            className="eq-image-cropper-frame"
            role="group"
            tabIndex={0}
            aria-label="Crop area"
            aria-describedby={`${id}-help ${id}-status`}
            style={{
              left: `${crop.x * 100}%`,
              top: `${crop.y * 100}%`,
              width: `${crop.w * 100}%`,
              height: `${crop.h * 100}%`,
            }}
            onKeyDown={handleKeyDown}
          >
            <span className="eq-image-cropper-grid" aria-hidden="true" />
            {(["nw", "ne", "sw", "se"] as const).map((corner) => (
              <span key={corner} className="eq-image-cropper-handle" data-corner={corner} aria-hidden="true" />
            ))}
          </div>
        </div>
      </div>
      <div className="eq-image-cropper-toolbar">
        <label className="eq-image-cropper-zoom">
          <Icon name="zoom-out" size={16} />
          <span className="eq-image-cropper-sr">Zoom</span>
          <input
            className="eq-image-cropper-range"
            type="range"
            min={1}
            max={maxZoom}
            step={0.05}
            value={zoom}
            aria-valuetext={`${Math.round(zoom * 100)}%`}
            style={{ "--_fill": (zoom - 1) / Math.max(0.01, maxZoom - 1) } as CSSProperties}
            onChange={(event) => {
              setZoom(event.currentTarget.valueAsNumber);
              centre(crop);
            }}
          />
          <Icon name="zoom-in" size={16} />
        </label>
        <Button variant="outline" size="s" aria-label="Rotate 90 degrees" lead={<Icon name="refresh" size={16} />} onClick={rotate} />
      </div>
      <p id={`${id}-help`} className="eq-image-cropper-sr">
        Arrow keys move the crop. Shift and arrow keys resize it.
      </p>
      <p id={`${id}-status`} className="eq-image-cropper-sr" aria-live="polite">
        {pixels && !dragging && `Crop ${pixels} ${at}.`}
      </p>
    </div>
  );
}