Radial menu

"use client";

import {
  useEffect,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
  type KeyboardEvent,
  type MouseEvent,
  type PointerEvent,
  type ReactNode,
} from "react";
import "./radial-menu.css";

export type RadialMenuItem = {
  id: string;
  label: string;
  icon?: ReactNode;
  onSelect: () => void;
  disabled?: boolean;
};

export type RadialMenuProps = Omit<ComponentProps<"div">, "children"> & {
  /** Names the target region and the menu. */
  label: string;
  /** Up to eight actions, placed clockwise from the top. */
  items: RadialMenuItem[];
  /** How the pointer opens it. The Menu key and Shift+F10 always work. */
  trigger?: "hold" | "contextmenu" | "both";
  /** How long a press must last before the ring opens, in milliseconds. */
  holdDelay?: number;
  /** The target region. */
  children: ReactNode;
};

/* Must match the sizes in radial-menu.css. */
const RING = 168;
const ORBIT = 58;
const EDGE = 8;
/* Pointer travel that still counts as "no direction yet". */
const DEAD_ZONE = 18;
/* Movement that turns a pending hold into an ordinary drag. */
const SLOP = 6;

type Opened = {
  /* Ring centre, kept inside the viewport. */
  x: number;
  y: number;
  /* Where the pointer was. Direction is measured from here, so a clamped ring never starts hot. */
  px: number;
  py: number;
};

export function RadialMenu({
  label,
  items,
  trigger = "both",
  holdDelay = 250,
  className,
  children,
  onPointerDown,
  onPointerMove,
  onPointerUp,
  onPointerCancel,
  onPointerLeave,
  onContextMenu,
  onKeyDown,
  ...rest
}: RadialMenuProps) {
  const auto = useId();
  const slices = items.slice(0, 8);
  const count = slices.length;
  const [opened, setOpened] = useState<Opened | null>(null);
  const [active, setActive] = useState(-1);
  const targetRef = useRef<HTMLDivElement>(null);
  const layerRef = useRef<HTMLDivElement>(null);
  const ringRef = useRef<HTMLDivElement>(null);
  const holdTimer = useRef<number | undefined>(undefined);
  const press = useRef<{ id: number; x: number; y: number } | null>(null);
  const layerPress = useRef(false);
  const wedgeTurn = useRef(0);
  /* The ring keeps its place while it fades out after closing. */
  const lastPlace = useRef({ x: 0, y: 0 });

  const holdEnabled = trigger !== "contextmenu";
  const contextEnabled = trigger !== "hold";

  useEffect(() => () => window.clearTimeout(holdTimer.current), []);

  useEffect(() => {
    const layer = layerRef.current;
    if (!layer) return;
    if (opened) {
      if (!layer.matches(":popover-open")) layer.showPopover();
      ringRef.current?.focus({ preventScroll: true });
    } else if (layer.matches(":popover-open")) {
      const hadFocus = layer.contains(document.activeElement);
      layer.hidePopover();
      if (hadFocus) targetRef.current?.focus({ preventScroll: true });
    }
  }, [opened]);

  function open(px: number, py: number) {
    if (count === 0) return;
    const half = RING / 2 + EDGE;
    const width = document.documentElement.clientWidth;
    const height = document.documentElement.clientHeight;
    const x = Math.min(Math.max(px, half), Math.max(half, width - half));
    const y = Math.min(Math.max(py, half), Math.max(half, height - half));
    setOpened({ x, y, px, py });
    setActive(-1);
  }

  function openAtTarget() {
    const box = targetRef.current?.getBoundingClientRect();
    if (!box) return;
    open(box.left + box.width / 2, box.top + box.height / 2);
    setActive(slices.findIndex((item) => !item.disabled));
  }

  function close() {
    setOpened(null);
    setActive(-1);
  }

  function run(index: number) {
    const item = slices[index];
    if (!item || item.disabled) return;
    close();
    item.onSelect();
  }

  /** The slice the pointer points at, or -1 inside the dead zone. */
  function aim(clientX: number, clientY: number) {
    if (!opened) return -1;
    const dx = clientX - opened.px;
    const dy = clientY - opened.py;
    if (Math.hypot(dx, dy) < DEAD_ZONE) return -1;
    const degrees = (Math.atan2(dy, dx) * 180) / Math.PI + 90;
    const step = 360 / count;
    return Math.round((((degrees % 360) + 360) % 360) / step) % count;
  }

  function step(from: number, by: 1 | -1) {
    for (let i = 1; i <= count; i++) {
      const next = (((from + by * i) % count) + count) % count;
      if (!slices[next]?.disabled) return next;
    }
    return from;
  }

  function capture(id: number) {
    try {
      targetRef.current?.setPointerCapture(id);
    } catch {
      /* The pointer is already gone; the ring stays open for a click instead. */
    }
  }

  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {
    onPointerDown?.(event);
    if (opened || event.defaultPrevented) return;
    press.current = { id: event.pointerId, x: event.clientX, y: event.clientY };
    if (holdEnabled && event.button === 0 && count > 0) {
      const { pointerId, clientX, clientY } = event;
      window.clearTimeout(holdTimer.current);
      holdTimer.current = window.setTimeout(() => {
        capture(pointerId);
        open(clientX, clientY);
      }, holdDelay);
    }
  }

  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
    onPointerMove?.(event);
    const start = press.current;
    if (!start) return;
    if (!opened) {
      if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > SLOP) {
        window.clearTimeout(holdTimer.current);
      }
      return;
    }
    setActive(aim(event.clientX, event.clientY));
  }

  function handlePointerUp(event: PointerEvent<HTMLDivElement>) {
    onPointerUp?.(event);
    window.clearTimeout(holdTimer.current);
    const wasPressing = press.current !== null;
    press.current = null;
    if (!opened || !wasPressing) return;
    const index = aim(event.clientX, event.clientY);
    if (index >= 0) run(index);
    /* Released inside the dead zone: the ring stays open for a click or the keyboard. */
  }

  function handlePointerCancel(event: PointerEvent<HTMLDivElement>) {
    onPointerCancel?.(event);
    window.clearTimeout(holdTimer.current);
    press.current = null;
  }

  function handlePointerLeave(event: PointerEvent<HTMLDivElement>) {
    onPointerLeave?.(event);
    if (!opened) {
      window.clearTimeout(holdTimer.current);
      press.current = null;
    }
  }

  function handleContextMenu(event: MouseEvent<HTMLDivElement>) {
    onContextMenu?.(event);
    if (opened) {
      event.preventDefault();
      return;
    }
    if (!contextEnabled || count === 0 || event.defaultPrevented) return;
    event.preventDefault();
    window.clearTimeout(holdTimer.current);
    const start = press.current;
    if (start) capture(start.id);
    /* A context menu from the keyboard carries no pointer position. */
    if (start || event.clientX !== 0 || event.clientY !== 0) open(event.clientX, event.clientY);
    else openAtTarget();
  }

  function handleTargetKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented || opened) return;
    if (event.key === "ContextMenu" || (event.shiftKey && event.key === "F10")) {
      event.preventDefault();
      event.stopPropagation();
      openAtTarget();
    }
  }

  function handleRingKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    const { key } = event;
    let handled = true;
    if (key === "ArrowRight" || key === "ArrowDown") setActive((a) => step(a < 0 ? -1 : a, 1));
    else if (key === "ArrowLeft" || key === "ArrowUp") setActive((a) => step(a < 0 ? 0 : a, -1));
    else if (key === "Home") setActive(step(-1, 1));
    else if (key === "End") setActive(step(0, -1));
    else if (key === "Enter" || key === " ") run(active);
    else if (key === "Escape" || key === "Tab") close();
    else if (/^[1-8]$/.test(key)) run(Number(key) - 1);
    else handled = false;
    if (handled) {
      event.preventDefault();
      event.stopPropagation();
    }
  }

  function handleLayerPointerDown(event: PointerEvent<HTMLDivElement>) {
    layerPress.current = true;
    setActive(aim(event.clientX, event.clientY));
  }

  function handleLayerPointerUp(event: PointerEvent<HTMLDivElement>) {
    if (!layerPress.current) return;
    layerPress.current = false;
    const index = aim(event.clientX, event.clientY);
    if (index >= 0) run(index);
    else close();
  }

  if (active >= 0 && count > 0) {
    const target = (active * 360) / count;
    const current = wedgeTurn.current;
    const delta = ((((target - current) % 360) + 540) % 360) - 180;
    wedgeTurn.current = current + delta;
  }

  if (opened) lastPlace.current = { x: opened.x, y: opened.y };
  const ringStyle = {
    left: lastPlace.current.x,
    top: lastPlace.current.y,
    "--_turn": `${wedgeTurn.current}deg`,
    "--_slice": `${360 / Math.max(count, 1)}deg`,
  } as CSSProperties;
  const activeItem = active >= 0 ? slices[active] : undefined;

  return (
    <>
      <div
        tabIndex={0}
        role="group"
        aria-label={label}
        aria-keyshortcuts="Shift+F10"
        {...rest}
        ref={targetRef}
        className={["eq-radial-menu", className].filter(Boolean).join(" ")}
        data-trigger={trigger}
        data-open={opened ? "" : undefined}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerUp}
        onPointerCancel={handlePointerCancel}
        onPointerLeave={handlePointerLeave}
        onLostPointerCapture={() => {
          press.current = null;
        }}
        onContextMenu={handleContextMenu}
        onKeyDown={handleTargetKeyDown}
      >
        {children}
      </div>
      <div
        ref={layerRef}
        popover="manual"
        className="eq-radial-menu-layer"
        onPointerDown={handleLayerPointerDown}
        onMouseDown={(event) => event.preventDefault()}
        onPointerMove={(event) => setActive(aim(event.clientX, event.clientY))}
        onPointerUp={handleLayerPointerUp}
        onContextMenu={(event) => event.preventDefault()}
      >
        <div
          ref={ringRef}
          role="menu"
          aria-label={label}
          tabIndex={-1}
          aria-activedescendant={activeItem ? `${auto}${active}` : undefined}
          className="eq-radial-menu-ring"
          style={ringStyle}
          data-active={activeItem ? "" : undefined}
          onKeyDown={handleRingKeyDown}
          onBlur={(event) => {
            const next = event.relatedTarget;
            if (!(next instanceof Node && event.currentTarget.contains(next))) close();
          }}
        >
          <span className="eq-radial-menu-wedge" aria-hidden="true" />
          {slices.map((item, index) => {
            const angle = ((index * 360) / count - 90) * (Math.PI / 180);
            const place = {
              "--_x": `${(Math.cos(angle) * ORBIT).toFixed(2)}px`,
              "--_y": `${(Math.sin(angle) * ORBIT).toFixed(2)}px`,
            } as CSSProperties;
            return (
              <div
                key={item.id}
                id={`${auto}${index}`}
                role="menuitem"
                aria-label={item.label}
                aria-disabled={item.disabled || undefined}
                aria-keyshortcuts={String(index + 1)}
                className="eq-radial-menu-item"
                data-active={index === active ? "" : undefined}
                style={place}
              >
                {item.icon ?? <span className="eq-radial-menu-initial">{item.label.slice(0, 1)}</span>}
              </div>
            );
          })}
          <span className="eq-radial-menu-centre" aria-hidden="true" data-disabled={activeItem?.disabled ? "" : undefined}>
            {activeItem ? activeItem.label : label}
          </span>
        </div>
      </div>
    </>
  );
}