Signature pad

"use client";

import { useEffect, useId, useRef, useState } from "react";
import type { ComponentProps, PointerEvent, ReactNode } from "react";
import { Button } from "./button";
import "./signature-pad.css";

/** True when there is something to render; false, null and "" count as nothing. */
function present(node: ReactNode): boolean {
  return node != null && node !== false && node !== "";
}

/* Drawing space. The pad keeps this aspect ratio, so strokes never stretch. */
const WIDTH = 400;
const HEIGHT = 160;
const BASELINE = 124;
const STROKE = 2.6;
const SCRIPT = '"Snell Roundhand", "Segoe Script", "Bradley Hand", "Brush Script MT", cursive';

type Point = { x: number; y: number };

export type SignatureValue = {
  /** "drawn" from strokes, or "typed" from the name box. */
  kind: "drawn" | "typed";
  /** One SVG path per stroke, in a 400 by 160 space. Empty when typed. */
  paths: string[];
  /** The typed name. Empty when drawn. */
  text: string;
  /** A standalone SVG document with the ink colour written in. */
  svg: string;
};

const round = (n: number) => Math.round(n * 10) / 10;

/** A smooth path through the points: quadratic curves that bend at each point and pass through the midpoints. */
function toPath(points: Point[]) {
  if (points.length === 0) return "";
  const [first] = points;
  // A tap is a dot: a tiny segment that the round cap turns into a circle.
  if (points.length === 1) return `M${round(first.x)} ${round(first.y)}l0.1 0`;
  let d = `M${round(first.x)} ${round(first.y)}`;
  for (let i = 1; i < points.length - 1; i++) {
    const p = points[i];
    const next = points[i + 1];
    d += `Q${round(p.x)} ${round(p.y)} ${round((p.x + next.x) / 2)} ${round((p.y + next.y) / 2)}`;
  }
  const last = points[points.length - 1];
  return `${d}L${round(last.x)} ${round(last.y)}`;
}

const escapeXml = (text: string) =>
  text.replace(/[<>&"']/g, (c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;", '"': "&quot;", "'": "&apos;" })[c] ?? c);

function toSvg(paths: string[], text: string, color: string) {
  const body = text
    ? `<text x="${WIDTH / 2}" y="${BASELINE - 8}" text-anchor="middle" font-family='${SCRIPT}' font-size="44" fill="${color}">${escapeXml(text)}</text>`
    : `<g fill="none" stroke="${color}" stroke-width="${STROKE}" stroke-linecap="round" stroke-linejoin="round">${paths
        .map((d) => `<path d="${d}"/>`)
        .join("")}</g>`;
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${WIDTH} ${HEIGHT}" width="${WIDTH}" height="${HEIGHT}">${body}</svg>`;
}

/**
 * Rasterises a signature's SVG to a PNG data URL, for storage or a PDF.
 * Runs in the browser only; call it from an event handler.
 */
export async function signatureToPng(svg: string, scale = 2): Promise<string> {
  const url = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
  try {
    const image = new Image();
    image.decoding = "async";
    image.src = url;
    await image.decode();
    const canvas = document.createElement("canvas");
    canvas.width = WIDTH * scale;
    canvas.height = HEIGHT * scale;
    const context = canvas.getContext("2d");
    if (!context) throw new Error("Canvas 2D is not available.");
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
    return canvas.toDataURL("image/png");
  } finally {
    URL.revokeObjectURL(url);
  }
}

export type SignaturePadProps = Omit<ComponentProps<"div">, "onChange"> & {
  /** Visible label for the pad. */
  label: ReactNode;
  hint?: ReactNode;
  /** Error text. Marks the pad and the name box invalid and is announced with them. */
  error?: ReactNode;
  /** Called after each stroke, undo, clear or typed change; null when the pad is empty. */
  onValueChange?: (value: SignatureValue | null) => void;
  /** Adds a hidden input carrying the SVG document, so the signature submits with a form. */
  name?: string;
  /** A form will not submit while the pad is empty. Reported on the name box, the pad's one focusable control. */
  required?: boolean;
  disabled?: boolean;
  /** Placeholder of the name box, the keyboard way to sign. */
  typePlaceholder?: string;
};

export function SignaturePad({
  label,
  hint,
  error,
  onValueChange,
  name,
  required = false,
  disabled = false,
  typePlaceholder = "Or type your name",
  className,
  ...rest
}: SignaturePadProps) {
  const id = useId();
  const labelId = `${id}-label`;
  const hintId = present(hint) ? `${id}-hint` : undefined;
  const errorId = `${id}-error`;

  const [strokes, setStrokes] = useState<string[]>([]);
  const [live, setLive] = useState<string>("");
  const [typed, setTyped] = useState("");
  const [reported, setReported] = useState(false);
  const [svg, setSvg] = useState("");
  const surface = useRef<SVGSVGElement>(null);
  const input = useRef<HTMLInputElement>(null);
  const points = useRef<Point[] | null>(null);

  const empty = strokes.length === 0 && typed.trim() === "";
  const missing = required && empty;

  // The name box is the control a form can focus, so the empty-pad message lives on it.
  useEffect(() => {
    input.current?.setCustomValidity(missing ? "Draw your signature or type your name." : "");
  }, [missing]);

  function emit(nextStrokes: string[], nextText: string) {
    const text = nextText.trim();
    const isEmpty = nextStrokes.length === 0 && text === "";
    // The ink colour is read at the moment of change, so the exported SVG matches what is on screen.
    const color = surface.current ? getComputedStyle(surface.current).color : "black";
    const doc = isEmpty ? "" : toSvg(text ? [] : nextStrokes, text, color);
    setSvg(doc);
    if (!isEmpty) setReported(false);
    onValueChange?.(
      isEmpty ? null : { kind: text ? "typed" : "drawn", paths: text ? [] : nextStrokes, text, svg: doc },
    );
  }

  function pointFrom(event: PointerEvent<SVGSVGElement>): Point {
    const box = event.currentTarget.getBoundingClientRect();
    return {
      x: ((event.clientX - box.left) / box.width) * WIDTH,
      y: ((event.clientY - box.top) / box.height) * HEIGHT,
    };
  }

  function handlePointerDown(event: PointerEvent<SVGSVGElement>) {
    if (disabled || (event.pointerType === "mouse" && event.button !== 0)) return;
    event.preventDefault();
    event.currentTarget.setPointerCapture(event.pointerId);
    // Drawing replaces a typed name: one signature at a time.
    if (typed) setTyped("");
    points.current = [pointFrom(event)];
    setLive(toPath(points.current));
  }

  function handlePointerMove(event: PointerEvent<SVGSVGElement>) {
    const current = points.current;
    if (!current) return;
    // Coalesced events keep fast strokes smooth where the engine batches them.
    const batch = event.nativeEvent.getCoalescedEvents?.() ?? [];
    const box = event.currentTarget.getBoundingClientRect();
    const samples = batch.length > 0 ? batch : [event.nativeEvent];
    for (const sample of samples) {
      const p = { x: ((sample.clientX - box.left) / box.width) * WIDTH, y: ((sample.clientY - box.top) / box.height) * HEIGHT };
      const last = current[current.length - 1];
      if (Math.hypot(p.x - last.x, p.y - last.y) >= 1.5) current.push(p);
    }
    setLive(toPath(current));
  }

  function finish() {
    const current = points.current;
    if (!current) return;
    points.current = null;
    setLive("");
    const next = [...strokes, toPath(current)];
    setStrokes(next);
    emit(next, "");
  }

  function undo() {
    const next = strokes.slice(0, -1);
    setStrokes(next);
    emit(next, typed);
    // The button disables itself with the last stroke; keep focus in the pad.
    if (next.length === 0) input.current?.focus();
  }

  function clear() {
    setStrokes([]);
    setTyped("");
    emit([], "");
    input.current?.focus();
  }

  const showMissing = reported && missing;
  const message = present(error) ? error : showMissing ? "Draw your signature or type your name." : null;
  const invalid = present(message) || undefined;
  const describedBy = [hintId, present(message) ? errorId : undefined].filter(Boolean).join(" ") || undefined;
  const typedText = typed.trim();

  return (
    <div
      {...rest}
      className={["eq-signature-pad", className].filter(Boolean).join(" ")}
      role="group"
      aria-labelledby={labelId}
      data-disabled={disabled || undefined}
    >
      <span className="eq-signature-pad-label" id={labelId}>
        {label}
      </span>
      <div className="eq-signature-pad-surface" data-invalid={invalid}>
        <svg
          ref={surface}
          className="eq-signature-pad-canvas"
          viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
          role="img"
          aria-label={empty ? "Signature, empty" : typedText ? `Signature, typed as ${typedText}` : "Signature, drawn"}
          onPointerDown={handlePointerDown}
          onPointerMove={handlePointerMove}
          onPointerUp={finish}
          onPointerCancel={finish}
          onLostPointerCapture={finish}
        >
          <line className="eq-signature-pad-baseline" x1="24" x2={WIDTH - 24} y1={BASELINE} y2={BASELINE} />
          {typedText ? (
            <text
              className="eq-signature-pad-typed"
              x={WIDTH / 2}
              y={BASELINE - 8}
              textAnchor="middle"
              fontSize="44"
              fontFamily={SCRIPT}
              textLength={typedText.length > 16 ? WIDTH - 64 : undefined}
              lengthAdjust="spacingAndGlyphs"
            >
              {typedText}
            </text>
          ) : (
            <g className="eq-signature-pad-ink" strokeWidth={STROKE}>
              {strokes.map((d, index) => (
                <path key={index} className="eq-signature-pad-stroke" d={d} />
              ))}
              {live && <path className="eq-signature-pad-stroke" d={live} />}
            </g>
          )}
        </svg>
        {empty && !live && (
          <span className="eq-signature-pad-placeholder" aria-hidden="true">
            Sign here
          </span>
        )}
      </div>
      <div className="eq-signature-pad-bar">
        <input
          ref={input}
          className="eq-signature-pad-name"
          type="text"
          autoComplete="name"
          aria-label="Type your name instead of drawing"
          placeholder={typePlaceholder}
          value={typed}
          disabled={disabled}
          // Not the native required: a drawing alone satisfies it, so the check is setCustomValidity above.
          aria-invalid={invalid}
          aria-describedby={describedBy}
          onInvalid={() => setReported(true)}
          onChange={(event) => {
            const text = event.currentTarget.value;
            setTyped(text);
            // Typing replaces any drawing, so there is only ever one signature.
            if (strokes.length > 0 && text.trim()) setStrokes([]);
            emit(text.trim() ? [] : strokes, text);
          }}
        />
        <Button
          className="eq-signature-pad-action"
          variant="ghost"
          size="s"
          square
          aria-label="Undo last stroke"
          disabled={disabled || strokes.length === 0 || typedText !== ""}
          onClick={undo}
          lead={
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M5.5 3.5 2.5 6.5l3 3" />
              <path d="M2.5 6.5h7a4 4 0 0 1 0 8h-2" />
            </svg>
          }
        />
        <Button
          className="eq-signature-pad-action"
          variant="ghost"
          size="s"
          disabled={disabled || empty}
          onClick={clear}
        >
          Clear
        </Button>
      </div>
      {present(hint) && (
        <p className="eq-signature-pad-hint" id={hintId}>
          {hint}
        </p>
      )}
      <p className="eq-signature-pad-error" id={errorId} hidden={!present(message)}>
        {message}
      </p>
      {name && <input type="hidden" name={name} value={svg} />}
    </div>
  );
}