// arcsec-lib.jsx — shared primitives for the arcsec hero directions
// Exports (to window): useRaf, clamp, lerp, easeInOut, formatAngle,
// readoutFromQ, halfFromQ, AngleDiagram, Readout, UnitChain, StarField
const { useRef, useEffect, useState, useCallback, useMemo } = React;
// ── math ───────────────────────────────────────────────────────────
const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
const lerp = (a, b, t) => a + (b - a) * t;
const easeInOut = (t) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2);
// requestAnimationFrame loop. cb(elapsedMs, absMs). Pauses when active=false.
function useRaf(cb, active = true) {
const cbRef = useRef(cb); cbRef.current = cb;
useEffect(() => {
if (!active) return;
let id, start = null;
const loop = (t) => { if (start == null) start = t; cbRef.current(t - start, t); id = requestAnimationFrame(loop); };
id = requestAnimationFrame(loop);
return () => cancelAnimationFrame(id);
}, [active]);
}
// ── the arcsecond chain ─────────────────────────────────────────────
// q in [0,1]: 0 = pinched to ~1 arcsecond, 1 = wide open (~32°).
// halfFromQ drives the DRAWN wedge (stays a legible sliver at the bottom);
// readoutFromQ drives the NUMBER, which dives log-uniformly into arcseconds.
// The decoupling is the honest "magnitude exaggerated" trick — a real 1″
// wedge would be invisible.
const Q_HALF_MIN = 0.55; // smallest drawn half-angle (deg)
const Q_HALF_MAX = 16; // widest drawn half-angle (deg)
const READ_MIN = 1 / 3600; // 1 arcsecond, in degrees
const READ_MAX = 32; // widest readout, in degrees
const halfFromQ = (q) => lerp(Q_HALF_MIN, Q_HALF_MAX, clamp(q, 0, 1));
const qFromHalf = (h) => clamp((h - Q_HALF_MIN) / (Q_HALF_MAX - Q_HALF_MIN), 0, 1);
const readoutFromQ = (q) => Math.exp(lerp(Math.log(READ_MIN), Math.log(READ_MAX), clamp(q, 0, 1)));
// Format an angle (in DEGREES) into the most natural unit of the chain.
function formatAngle(deg) {
const arcmin = deg * 60, arcsec = deg * 3600;
if (deg >= 1) return { num: deg.toFixed(deg >= 10 ? 1 : 2), unit: '\u00b0', key: 'deg', name: 'degrees' };
if (arcmin >= 1) return { num: arcmin.toFixed(arcmin >= 10 ? 1 : 2), unit: '\u2032', key: 'min', name: 'arcminutes' };
return { num: arcsec.toFixed(arcsec >= 10 ? 1 : arcsec >= 1 ? 2 : 3), unit: '\u2033', key: 'sec', name: 'arcseconds' };
}
// ── the angle instrument ────────────────────────────────────────────
// Two rays symmetric about a horizontal axis from a vertex on the left.
// Pure SVG, sized by viewBox so pointer mapping is resolution-independent.
const DIAG = { W: 580, H: 460, vx: 70, L: 452, arcR: 104 };
function AngleDiagram({
halfDeg, accent, faint = 'rgba(255,255,255,0.10)',
handles = false, protractor = false, fingers = false, sweepDeg = null,
svgRef, onPointer, style,
}) {
const { W, H, vx, L, arcR } = DIAG;
const vy = H / 2;
const th = (halfDeg * Math.PI) / 180;
const c = Math.cos(th), s = Math.sin(th);
const topEnd = [vx + L * c, vy - L * s];
const botEnd = [vx + L * c, vy + L * s];
const arcTop = [vx + arcR * c, vy - arcR * s];
const arcBot = [vx + arcR * c, vy + arcR * s];
const arc = `M ${arcTop[0].toFixed(2)} ${arcTop[1].toFixed(2)} A ${arcR} ${arcR} 0 0 1 ${arcBot[0].toFixed(2)} ${arcBot[1].toFixed(2)}`;
const gid = useMemo(() => 'g' + Math.random().toString(36).slice(2, 8), []);
// protractor tick ring
const ticks = [];
if (protractor) {
for (let d = -30; d <= 30; d += 5) {
const a = (d * Math.PI) / 180, big = d % 15 === 0;
const r0 = L * 0.86, r1 = L * 0.86 + (big ? 16 : 9);
ticks.push(
);
}
}
// capsule fingertips that pinch from outside each ray
let fingerEls = null;
if (fingers) {
const dt = L * 0.55, gap = 15 + halfDeg * 0.7, fw = 88, fh = 30;
const mk = (sign) => {
const a = sign * th; // screen angle of this ray
const bx = vx + dt * Math.cos(a), by = vy + dt * Math.sin(a);
// offset outward (perpendicular, away from axis)
const ox = Math.sin(a) * gap * (sign > 0 ? 1 : 1);
const px = bx - Math.sin(a) * gap * sign, py = by + Math.cos(a) * gap * sign;
const deg = (a * 180) / Math.PI;
return (
);
};
fingerEls = {mk(-1)}{mk(1)};
}
return (
);
}
// Map a client point to the diagram's viewBox space, then to a half-angle.
function pointerToHalfDeg(svg, clientX, clientY) {
const r = svg.getBoundingClientRect();
const x = ((clientX - r.left) / r.width) * DIAG.W;
const y = ((clientY - r.top) / r.height) * DIAG.H;
const dx = Math.max(8, x - DIAG.vx), dy = Math.abs(y - DIAG.H / 2);
const half = (Math.atan2(dy, dx) * 180) / Math.PI;
return clamp(half, Q_HALF_MIN, Q_HALF_MAX);
}
// ── readout ─────────────────────────────────────────────────────────
function UnitChain({ activeKey, accent }) {
const items = [['deg', '\u00b0'], ['min', '\u2032'], ['sec', '\u2033']];
return (
{items.map(([k, g], i) => (
{i > 0 && {'\u2192'}}
{g}
))}
);
}
function Readout({ deg, accent, align = 'left', size = 76 }) {
const f = formatAngle(deg);
return (
60 ? 12 : 9, alignItems: align === 'center' ? 'center' : 'flex-start' }}>
{f.num}
{f.unit}
{stars.map((st, i) => (
))}
);
}
// thousands-separated integer
const fmtInt = (n) => Math.round(n).toLocaleString('en-US');
Object.assign(window, {
useRaf, clamp, lerp, easeInOut, formatAngle, fmtInt,
readoutFromQ, halfFromQ, qFromHalf, pointerToHalfDeg,
AngleDiagram, Readout, UnitChain, StarField,
});