"use client"; import type { FocusEvent, HTMLAttributes, KeyboardEvent, PointerEvent } from "react"; import { useEffect, useId, useRef, useState } from "react"; export type Coordinate = { x: number; y: number }; export type CrosshairCoordinateCursorProps = HTMLAttributes & { /** Accessible name of the measured area. */ label?: string; /** Report pixels from the top-left corner, or percentages of the area. */ unit?: "px" | "percent"; showReadout?: boolean; /** Pixels moved per arrow key press. Hold Shift for ten times the step. */ keyboardStep?: number; onCoordinateChange?: (point: Coordinate) => void; formatReadout?: (point: Coordinate, unit: "px" | "percent") => string; }; function defaultFormat(point: Coordinate, unit: "px" | "percent") { const suffix = unit === "px" ? " px" : "%"; return "x " + point.x + suffix + ", y " + point.y + suffix; } export function CrosshairCoordinateCursor({ children, label = "Coordinate area", unit = "px", showReadout = true, keyboardStep = 4, onCoordinateChange, formatReadout = defaultFormat, className = "", onPointerMove, onPointerDown, onPointerLeave, onKeyDown, onFocus, onBlur, ...props }: CrosshairCoordinateCursorProps) { const hintId = useId(); const root = useRef(null); const horizontal = useRef(null); const vertical = useRef(null); const readout = useRef(null); const frame = useRef(0); const pending = useRef<{ x: number; y: number } | null>(null); const position = useRef<{ x: number; y: number } | null>(null); const [active, setActive] = useState(false); const [announcement, setAnnouncement] = useState(""); useEffect(() => { return () => cancelAnimationFrame(frame.current); }, []); function toCoordinate(x: number, y: number, width: number, height: number): Coordinate { if (unit === "percent") { return { x: width ? Math.round((x / width) * 1000) / 10 : 0, y: height ? Math.round((y / height) * 1000) / 10 : 0, }; } return { x: Math.round(x), y: Math.round(y) }; } function paint(x: number, y: number) { const area = root.current; if (!area) return null; const width = area.clientWidth; const height = area.clientHeight; const clampedX = Math.min(Math.max(x, 0), width || x); const clampedY = Math.min(Math.max(y, 0), height || y); position.current = { x: clampedX, y: clampedY }; const point = toCoordinate(clampedX, clampedY, width, height); if (horizontal.current) horizontal.current.style.transform = "translateY(" + clampedY + "px)"; if (vertical.current) vertical.current.style.transform = "translateX(" + clampedX + "px)"; if (readout.current) { const flipX = width > 0 && clampedX > width - 150; const flipY = clampedY < 40; readout.current.textContent = formatReadout(point, unit); readout.current.style.transform = "translate(" + (clampedX + (flipX ? -12 : 12)) + "px, " + (clampedY + (flipY ? 12 : -12)) + "px) translate(" + (flipX ? "-100%" : "0") + ", " + (flipY ? "0" : "-100%") + ")"; } onCoordinateChange?.(point); return point; } function flush() { frame.current = 0; if (!pending.current) return; paint(pending.current.x, pending.current.y); pending.current = null; } function track(event: PointerEvent) { const bounds = event.currentTarget.getBoundingClientRect(); pending.current = { x: event.clientX - bounds.left, y: event.clientY - bounds.top }; setActive(true); if (!frame.current) frame.current = requestAnimationFrame(flush); } function handlePointerMove(event: PointerEvent) { onPointerMove?.(event); track(event); } function handlePointerDown(event: PointerEvent) { onPointerDown?.(event); track(event); } function handlePointerLeave(event: PointerEvent) { onPointerLeave?.(event); // Touch keeps the last tapped point visible so the reading can be inspected. if (event.pointerType === "touch") return; if (root.current && root.current !== document.activeElement) setActive(false); } function handleFocus(event: FocusEvent) { onFocus?.(event); const area = root.current; if (!area) return; setActive(true); if (!position.current) paint(area.clientWidth / 2, area.clientHeight / 2); } function handleBlur(event: FocusEvent) { onBlur?.(event); setActive(false); } function handleKeyDown(event: KeyboardEvent) { onKeyDown?.(event); const step = keyboardStep * (event.shiftKey ? 10 : 1); const offsets: Record = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step], }; const offset = offsets[event.key]; if (!offset) return; event.preventDefault(); const area = root.current; const current = position.current ?? { x: (area?.clientWidth ?? 0) / 2, y: (area?.clientHeight ?? 0) / 2 }; setActive(true); const point = paint(current.x + offset[0], current.y + offset[1]); if (point) setAnnouncement(formatReadout(point, unit)); } const lineTone = "bg-[#1F4B8E]/70 dark:bg-[#8DB2E6]/70"; return (

{children}

); }