| import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react"; |
| import { Pause, Play, RotateCcw, SkipForward } from "lucide-react"; |
|
|
| export type LoopStop = { |
| x: number; |
| y: number; |
| ids: string[]; |
| inspect: string; |
| title: string; |
| note: string; |
| }; |
|
|
| type Props = { |
| stops: LoopStop[]; |
| loopMs?: number; |
| viewBox: string; |
| ariaLabel: string; |
| onSelect: (id: string) => void; |
| children: (api: { |
| on: (id: string) => boolean; |
| markerId: string; |
| token: { x: number; y: number }; |
| step: number; |
| }) => ReactNode; |
| }; |
|
|
| const HOLD = 0.38; |
|
|
| export function LoopFigure({ |
| stops, |
| loopMs = 16000, |
| viewBox, |
| ariaLabel, |
| onSelect, |
| children, |
| }: Props) { |
| const [playing, setPlaying] = useState(true); |
| const [progress, setProgress] = useState(0); |
| const started = useRef(performance.now()); |
| const pausedAt = useRef(0); |
| const rawId = useId().replace(/:/g, ""); |
| const markerId = `arr-${rawId}`; |
|
|
| useEffect(() => { |
| if (!playing) return; |
| let frame = 0; |
| const tick = (now: number) => { |
| setProgress(((now - started.current) % loopMs) / loopMs); |
| frame = requestAnimationFrame(tick); |
| }; |
| frame = requestAnimationFrame(tick); |
| return () => cancelAnimationFrame(frame); |
| }, [playing, loopMs]); |
|
|
| const motion = useMemo(() => alongPath(stops, progress), [stops, progress]); |
| const current = stops[motion.step]; |
| const lit = useMemo(() => new Set(current.ids), [current]); |
|
|
| useEffect(() => { |
| onSelect(current.inspect); |
| }, [current.inspect, onSelect]); |
|
|
| const jump = (next: number) => { |
| const idx = ((next % stops.length) + stops.length) % stops.length; |
| started.current = performance.now() - (idx / stops.length) * loopMs; |
| setProgress(idx / stops.length); |
| }; |
|
|
| return ( |
| <div className="overflow-hidden rounded-xl border border-white/10 bg-[#f7f4ec]"> |
| <div className="flex flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-[#111827] px-3 py-3 sm:px-4"> |
| <div className="min-w-0"> |
| <p className="font-mono text-[10px] tracking-[0.22em] text-cyan-200/80 uppercase"> |
| Loop · {motion.step + 1} / {stops.length} |
| </p> |
| <p className="text-sm font-medium text-white">{current.title}</p> |
| </div> |
| <div className="flex items-center gap-2"> |
| <button |
| type="button" |
| aria-label={playing ? "Pause animation" : "Play animation"} |
| onClick={() => { |
| if (playing) { |
| pausedAt.current = performance.now(); |
| setPlaying(false); |
| } else { |
| started.current += performance.now() - pausedAt.current; |
| setPlaying(true); |
| } |
| }} |
| className="inline-flex min-h-11 items-center gap-1.5 rounded-md border border-white/15 bg-white/5 px-3 py-2 text-xs text-slate-100 hover:bg-white/10" |
| > |
| {playing ? <Pause className="h-3.5 w-3.5" /> : <Play className="h-3.5 w-3.5" />} |
| {playing ? "Pause" : "Play"} |
| </button> |
| <button |
| type="button" |
| aria-label="Step to next block" |
| onClick={() => { |
| setPlaying(false); |
| jump(motion.step + 1); |
| }} |
| className="inline-flex min-h-11 items-center gap-1.5 rounded-md border border-white/15 bg-white/5 px-3 py-2 text-xs text-slate-100 hover:bg-white/10" |
| > |
| <SkipForward className="h-3.5 w-3.5" /> |
| Step |
| </button> |
| <button |
| type="button" |
| aria-label="Restart animation" |
| onClick={() => { |
| jump(0); |
| setPlaying(true); |
| }} |
| className="inline-flex min-h-11 items-center gap-1.5 rounded-md border border-white/15 bg-white/5 px-3 py-2 text-xs text-slate-100 hover:bg-white/10" |
| > |
| <RotateCcw className="h-3.5 w-3.5" /> |
| Restart |
| </button> |
| </div> |
| </div> |
| |
| <div className="border-b border-black/10 bg-[#111827] px-3 py-2 sm:px-4"> |
| <label className="flex items-center gap-3"> |
| <span className="hidden font-mono text-[10px] text-slate-400 uppercase sm:inline"> |
| Scrub |
| </span> |
| <input |
| type="range" |
| min={0} |
| max={1} |
| step={0.001} |
| value={progress} |
| aria-valuemin={0} |
| aria-valuemax={100} |
| aria-valuenow={Math.round(progress * 100)} |
| aria-label="Scrub architecture animation" |
| onChange={(event) => { |
| const t = Number(event.target.value); |
| setPlaying(false); |
| pausedAt.current = performance.now(); |
| started.current = performance.now() - t * loopMs; |
| setProgress(t); |
| }} |
| className="h-11 w-full accent-cyan-300" |
| /> |
| </label> |
| </div> |
| |
| <div className="overflow-x-auto"> |
| <svg |
| viewBox={viewBox} |
| className="h-auto w-full min-w-[20rem]" |
| role="img" |
| aria-label={ariaLabel} |
| > |
| <defs> |
| <marker |
| id={markerId} |
| markerWidth="8" |
| markerHeight="8" |
| refX="6" |
| refY="4" |
| orient="auto" |
| > |
| <path d="M0 0 L8 4 L0 8 Z" fill="#444" /> |
| </marker> |
| </defs> |
| {children({ |
| on: (id) => lit.has(id), |
| markerId, |
| token: { x: motion.x, y: motion.y }, |
| step: motion.step, |
| })} |
| <circle |
| cx={motion.x} |
| cy={motion.y} |
| r="8" |
| fill="#e11d48" |
| stroke="#fff" |
| strokeWidth="2" |
| /> |
| </svg> |
| </div> |
| |
| <p className="border-t border-black/10 bg-white/70 px-4 py-3 text-sm text-slate-800"> |
| {current.note} |
| </p> |
| </div> |
| ); |
| } |
|
|
| function alongPath(stops: LoopStop[], t: number) { |
| const n = stops.length; |
| const x = ((((t % 1) + 1) % 1) * n); |
| const step = Math.min(n - 1, Math.floor(x)); |
| const f = x - step; |
| const a = stops[step]; |
| const b = stops[(step + 1) % n]; |
| if (f < HOLD) return { x: a.x, y: a.y, step }; |
| const u = (f - HOLD) / (1 - HOLD); |
| const ease = u * u * (3 - 2 * u); |
| return { |
| x: a.x + (b.x - a.x) * ease, |
| y: a.y + (b.y - a.y) * ease, |
| step, |
| }; |
| } |
|
|
| export const FILL = { |
| orange: "#e39b4a", |
| yellow: "#e6cf4e", |
| cyan: "#78c3c4", |
| pink: "#efb0c2", |
| green: "#86c86f", |
| purple: "#9b8ec8", |
| white: "#f4f4f4", |
| blue: "#7eb6d9", |
| }; |
|
|
| export function FigBox({ |
| x, |
| y, |
| w, |
| h, |
| fill, |
| label, |
| lit, |
| onClick, |
| }: { |
| x: number; |
| y: number; |
| w: number; |
| h: number; |
| fill: string; |
| label: string; |
| lit: boolean; |
| onClick: () => void; |
| }) { |
| return ( |
| <g onClick={onClick} className="cursor-pointer"> |
| {lit ? ( |
| <rect |
| x={x - 4} |
| y={y - 4} |
| width={w + 8} |
| height={h + 8} |
| rx="8" |
| fill="none" |
| stroke="#e11d48" |
| strokeWidth="2" |
| className="pulse-ring" |
| /> |
| ) : null} |
| <rect |
| x={x} |
| y={y} |
| width={w} |
| height={h} |
| rx="5" |
| fill={fill} |
| stroke={lit ? "#111" : "#555"} |
| strokeWidth={lit ? 2.4 : 1} |
| /> |
| <text |
| x={x + w / 2} |
| y={y + h / 2 + 4} |
| textAnchor="middle" |
| fontSize={label.length > 18 ? 11 : 13} |
| fill="#1a1a1a" |
| fontWeight={lit ? 700 : 600} |
| > |
| {label} |
| </text> |
| </g> |
| ); |
| } |
|
|
| export function Arrow({ |
| x1, |
| y1, |
| x2, |
| y2, |
| active, |
| markerId, |
| }: { |
| x1: number; |
| y1: number; |
| x2: number; |
| y2: number; |
| active: boolean; |
| markerId: string; |
| }) { |
| return ( |
| <line |
| x1={x1} |
| y1={y1} |
| x2={x2} |
| y2={y2} |
| stroke={active ? "#111" : "#888"} |
| strokeWidth={active ? 2.3 : 1.2} |
| markerEnd={`url(#${markerId})`} |
| /> |
| ); |
| } |
|
|
