@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/big/force-galaxy.js

@@ -0,0 +1,276 @@
+"use client";
+import { useReducedMotion as e, useReveal as t } from "../hooks.js";
+import { Plot as n, Tooltip as r } from "../core.js";
+import { clamp as i, noteOf as a, noteSpace as o } from "../util.js";
+import { HitRect as s, TipText as c } from "../hover.js";
+import { FootNote as l } from "../plot-note.js";
+import { ChartSvg as u } from "../svg.js";
+import { Label as d } from "../text.js";
+import { paint as f, useTextureIds as p } from "../texture-ids.js";
+import { CrossHatch as m, Hatch as h, PlateLabel as g } from "../texture.js";
+import { buildGalaxy as _, drawGalaxy as v, fitHub as y, labelAt as b, labelOnEngraving as x, makeSimulation as S, settle as C } from "./force-galaxy-model.js";
+import { forceGalaxyDemo as w } from "./force-galaxy.data.js";
+import { useEffect as T, useMemo as E, useRef as D, useState as O } from "react";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+//#region src/charts/big/force-galaxy.tsx
+var M = (e) => `${e.toFixed(1)}m`, N = {
+	ink: {
+		fill: "fill-hero",
+		stroke: "stroke-ink"
+	},
+	l2: {
+		fill: "fill-l2",
+		stroke: "stroke-l2"
+	},
+	l3: {
+		fill: "fill-l3",
+		stroke: "stroke-l3"
+	},
+	l4: {
+		fill: "fill-l4",
+		stroke: "stroke-l4"
+	},
+	l5: {
+		fill: "fill-l5",
+		stroke: "stroke-l5"
+	}
+}, P = [
+	"ink",
+	"l2",
+	"l3",
+	"l4",
+	"l5"
+], F = {
+	cross: "stroke-grid",
+	mesh: "stroke-l5",
+	spoke: "stroke-l6"
+}, I = [
+	1,
+	1.5,
+	2
+], L = (e) => e.kind === "mesh" ? I[Math.min(I.length, Math.max(1, e.weight)) - 1] : 1, R = "transition-opacity group-data-[focus=true]/galaxy:not-data-[on=true]:opacity-30", z = "transition-tone group-data-[focus=true]/galaxy:not-data-[on=true]:opacity-5 data-[on=true]:stroke-ink", B = (t, n, r) => {
+	let i = D(null), a = e();
+	return T(() => {
+		let e = n ? S(t, () => {
+			v(t, r);
+		}) : null;
+		return i.current = e, e !== null && a && (C(t, e), v(t, r)), () => {
+			e?.stop(), i.current = null;
+		};
+	}, [
+		t,
+		n,
+		r,
+		a
+	]), i;
+}, V = (e, t) => {
+	let n = D([]), r = D(null);
+	return (i) => {
+		if (r.current === i) return;
+		r.current = i;
+		for (let e of n.current) delete e.dataset.on;
+		n.current = [];
+		let a = t.frame.get("root");
+		if (a !== void 0 && (a.dataset.focus = String(i !== null)), i === null) return;
+		let o = (e) => {
+			e !== void 0 && (e.dataset.on = "true", n.current.push(e));
+		};
+		for (let n of [i, ...e.neighbours.get(i) ?? []]) o(t.stars.get(n)), o(t.labels.get(n));
+		for (let n of e.edges) (n.a.id === i || n.b.id === i) && o(t.edges.get(n.id));
+	};
+}, H = (e) => /* @__PURE__ */ A("defs", { children: P.map((t) => A(t === "ink" ? m : h, {
+	id: `${e.pid}-${t}`,
+	tone: N[t].fill
+}, t)) }), U = (e, t) => e.hub ? {
+	className: e.tone === "ink" ? "stroke-ink" : "stroke-l5",
+	fill: f(`${t}-${e.tone}`),
+	strokeWidth: 1
+} : {
+	className: `stroke-transparent ${N[e.tone].fill}`,
+	fill: void 0,
+	strokeWidth: 7
+}, W = (e) => {
+	let { galaxy: t, handles: n, pid: r } = e;
+	return /* @__PURE__ */ j(k, { children: [
+		/* @__PURE__ */ A("g", { children: t.edges.map((e) => /* @__PURE__ */ A("line", {
+			className: `${F[e.kind]} ${z}`,
+			ref: (t) => {
+				t !== null && n.edges.set(e.id, t);
+			},
+			strokeLinecap: "round",
+			strokeWidth: L(e),
+			x1: e.a.x,
+			x2: e.b.x,
+			y1: e.a.y,
+			y2: e.b.y
+		}, e.id)) }),
+		/* @__PURE__ */ A("g", { children: t.stars.map((e) => {
+			let t = U(e, r);
+			return /* @__PURE__ */ A("circle", {
+				className: `cursor-grab touch-none ${t.className} ${R}`,
+				cx: e.x,
+				cy: e.y,
+				"data-id": e.id,
+				fill: t.fill,
+				r: e.r,
+				ref: (t) => {
+					t !== null && n.stars.set(e.id, t);
+				},
+				strokeWidth: t.strokeWidth
+			}, e.id);
+		}) }),
+		/* @__PURE__ */ A("g", {
+			className: "pointer-events-none",
+			children: [...t.rings.values()].map((e) => {
+				let r = b(t, e);
+				return /* @__PURE__ */ j("g", {
+					className: `group/hub ${R}`,
+					"data-plate": String(x(t, e, r)),
+					ref: (t) => {
+						t !== null && n.labels.set(e.hub.id, t);
+					},
+					transform: `translate(${Math.round(r.x)} ${Math.round(r.y)})`,
+					children: [/* @__PURE__ */ A("g", {
+						className: "hidden group-data-[plate=true]/hub:inline",
+						children: /* @__PURE__ */ A(g, {
+							className: "t-label",
+							text: e.hub.id,
+							x: 0,
+							y: 0
+						})
+					}), /* @__PURE__ */ A(d, {
+						anchor: "middle",
+						className: "group-data-[plate=true]/hub:hidden",
+						dy: "0.35em",
+						halo: !0,
+						voice: "label",
+						children: e.hub.id
+					})]
+				}, e.hub.id);
+			})
+		})
+	] });
+}, G = (e) => {
+	let t = e.currentTarget.getBoundingClientRect();
+	return {
+		x: e.clientX - t.left,
+		y: e.clientY - t.top
+	};
+}, K = (e, t) => {
+	let { target: n } = e, r = n instanceof SVGElement ? n.dataset.id : void 0;
+	return r === void 0 ? null : t.stars.find((e) => e.id === r) ?? null;
+}, q = (e) => {
+	let { focus: t, galaxy: n, handles: r, onTip: i, sim: a } = e, o = D(null), s = (e) => ({
+		degree: n.neighbours.get(e.id)?.length ?? 0,
+		id: e.id,
+		volume: e.volume,
+		x: e.x ?? 0,
+		y: (e.y ?? 0) - e.r - 4
+	}), c = (e) => {
+		let { x: r, y: s } = G(e), c = K(e, n), l = c === null || c.hub ? c : [...n.rings.values()].find((e) => e.sats.includes(c))?.hub ?? null;
+		o.current = {
+			moved: !1,
+			pointer: e.pointerId,
+			star: l,
+			x0: r,
+			y0: s
+		}, l !== null && (e.currentTarget.setPointerCapture(e.pointerId), e.currentTarget.dataset.dragging = "true", l.fx = l.x, l.fy = l.y, a.current?.alphaTarget(.25).restart(), t(l.id), i(null));
+	}, l = (e) => {
+		let { x: c, y: l } = G(e), u = o.current;
+		if (u !== null && Math.hypot(c - u.x0, l - u.y0) > 3 && (u.moved = !0), u !== null && u.star !== null) {
+			let e = u.star, t = n.rings.get(e.id), i = t === void 0 ? {
+				x: c,
+				y: l
+			} : y(n, t, c, l);
+			e.fx = i.x, e.fy = i.y, a.current === null && (e.x = e.fx, e.y = e.fy, n.orbit(), v(n, r));
+			return;
+		}
+		let d = K(e, n);
+		t(d?.id ?? null), i(d === null ? null : s(d));
+	}, u = (e) => {
+		let s = o.current;
+		o.current = null, delete e.currentTarget.dataset.dragging, s !== null && (s.star === null ? s.moved || (t(null), i(null), n.place(), v(n, r), a.current?.alpha(1).restart()) : (s.star.fx = null, s.star.fy = null, a.current?.alphaTarget(0).alpha(Math.max(a.current.alpha(), .5)).restart(), e.currentTarget.hasPointerCapture(s.pointer) && e.currentTarget.releasePointerCapture(s.pointer)));
+	};
+	return {
+		onPointerCancel: u,
+		onPointerDown: c,
+		onPointerLeave: () => {
+			(o.current === null || o.current.star === null) && (t(null), i(null));
+		},
+		onPointerMove: l,
+		onPointerUp: u
+	};
+}, J = (e) => {
+	let { data: n, onTip: r, width: a } = e, c = a < 520 ? 1.15 : .82, d = Math.min(e.height, Math.round(i(a * c, 360, 480))), f = D(null), m = t(f), h = d - o(e.note, a - 16, 18), g = E(() => _(n, a, h), [
+		n,
+		a,
+		h
+	]), v = E(() => ({
+		edges: /* @__PURE__ */ new Map(),
+		frame: /* @__PURE__ */ new Map(),
+		labels: /* @__PURE__ */ new Map(),
+		stars: /* @__PURE__ */ new Map()
+	}), []), y = B(g, m, v), b = p("galaxy")("hub"), x = q({
+		focus: V(g, v),
+		galaxy: g,
+		handles: v,
+		onTip: r,
+		sim: y
+	}), S = E(() => /* @__PURE__ */ A(W, {
+		galaxy: g,
+		handles: v,
+		pid: b
+	}), [
+		g,
+		v,
+		b
+	]), C = new Set(n.nodes.map((e) => e.domain)).size, w = `Underground lines and stations: ${n.nodes.length} nodes in ${C} lines`;
+	return /* @__PURE__ */ A("div", {
+		className: "fade",
+		ref: f,
+		children: /* @__PURE__ */ j(u, {
+			className: "group/galaxy touch-pan-y data-[dragging=true]:cursor-grabbing",
+			height: d,
+			label: w,
+			ref: (e) => {
+				e !== null && v.frame.set("root", e);
+			},
+			width: a,
+			...x,
+			children: [
+				/* @__PURE__ */ A(H, { pid: b }),
+				/* @__PURE__ */ A(s, {
+					height: d,
+					width: a
+				}),
+				S,
+				/* @__PURE__ */ A(l, {
+					height: d,
+					text: e.note,
+					width: a
+				})
+			]
+		})
+	});
+}, Y = (e) => {
+	let t = e.data ?? w, i = e.format ?? M, [o, s] = O(null);
+	return /* @__PURE__ */ A(n, {
+		overlay: o === null ? null : /* @__PURE__ */ A(r, {
+			x: o.x,
+			y: o.y,
+			children: /* @__PURE__ */ A(c, {
+				facts: [`${i(o.volume)} ${e.unit ?? "entries and exits a year"}`, `${o.degree} links`],
+				lead: o.id
+			})
+		}),
+		children: (n) => /* @__PURE__ */ A(J, {
+			data: t,
+			height: e.height ?? 480,
+			note: a(e),
+			onTip: s,
+			width: n
+		})
+	});
+};
+//#endregion
+export { Y as ForceGalaxy };

package/lib/charts/big/thread-triptych.data.js

@@ -0,0 +1,204 @@
+"use client";
+//#region src/charts/big/thread-triptych.data.ts
+var e = /* @__PURE__ */ new Map([
+	["Artiodactyla", "Laurasiatheria"],
+	["Carnivora", "Laurasiatheria"],
+	["Chiroptera", "Laurasiatheria"],
+	["Primates", "Euarchontoglires"],
+	["Rodentia", "Euarchontoglires"],
+	["Soricomorpha", "Laurasiatheria"]
+]), t = [
+	[
+		"Rodentia",
+		"Muridae",
+		"Rattus"
+	],
+	[
+		"Rodentia",
+		"Muridae",
+		"Mus"
+	],
+	[
+		"Rodentia",
+		"Cricetidae",
+		"Microtus"
+	],
+	[
+		"Rodentia",
+		"Cricetidae",
+		"Peromyscus"
+	],
+	[
+		"Rodentia",
+		"Sciuridae",
+		"Sciurus"
+	],
+	[
+		"Rodentia",
+		"Sciuridae",
+		"Tamias"
+	],
+	[
+		"Primates",
+		"Cercopithecidae",
+		"Macaca"
+	],
+	[
+		"Primates",
+		"Cercopithecidae",
+		"Trachypithecus"
+	],
+	[
+		"Primates",
+		"Pitheciidae",
+		"Plecturocebus"
+	],
+	[
+		"Primates",
+		"Pitheciidae",
+		"Pithecia"
+	],
+	[
+		"Primates",
+		"Callitrichidae",
+		"Mico"
+	],
+	[
+		"Primates",
+		"Callitrichidae",
+		"Saguinus"
+	],
+	[
+		"Chiroptera",
+		"Vespertilionidae",
+		"Myotis"
+	],
+	[
+		"Chiroptera",
+		"Vespertilionidae",
+		"Murina"
+	],
+	[
+		"Chiroptera",
+		"Phyllostomidae",
+		"Sturnira"
+	],
+	[
+		"Chiroptera",
+		"Phyllostomidae",
+		"Artibeus"
+	],
+	[
+		"Chiroptera",
+		"Pteropodidae",
+		"Pteropus"
+	],
+	[
+		"Chiroptera",
+		"Pteropodidae",
+		"Nyctimene"
+	],
+	[
+		"Soricomorpha",
+		"Soricidae",
+		"Crocidura"
+	],
+	[
+		"Soricomorpha",
+		"Soricidae",
+		"Sorex"
+	],
+	[
+		"Soricomorpha",
+		"Talpidae",
+		"Talpa"
+	],
+	[
+		"Soricomorpha",
+		"Talpidae",
+		"Euroscaptor"
+	],
+	[
+		"Soricomorpha",
+		"Solenodontidae",
+		"Solenodon"
+	],
+	[
+		"Carnivora",
+		"Mustelidae",
+		"Mustela"
+	],
+	[
+		"Carnivora",
+		"Mustelidae",
+		"Martes"
+	],
+	[
+		"Carnivora",
+		"Viverridae",
+		"Genetta"
+	],
+	[
+		"Carnivora",
+		"Viverridae",
+		"Paradoxurus"
+	],
+	[
+		"Carnivora",
+		"Felidae",
+		"Felis"
+	],
+	[
+		"Carnivora",
+		"Felidae",
+		"Leopardus"
+	],
+	[
+		"Artiodactyla",
+		"Bovidae",
+		"Ovis"
+	],
+	[
+		"Artiodactyla",
+		"Bovidae",
+		"Cephalophus"
+	],
+	[
+		"Artiodactyla",
+		"Cervidae",
+		"Muntiacus"
+	],
+	[
+		"Artiodactyla",
+		"Cervidae",
+		"Mazama"
+	],
+	[
+		"Artiodactyla",
+		"Suidae",
+		"Sus"
+	],
+	[
+		"Artiodactyla",
+		"Suidae",
+		"Babyrousa"
+	]
+].map(([t, n, r]) => [
+	r,
+	n,
+	t,
+	e.get(t) ?? ""
+]), n = {
+	columns: [
+		0,
+		1,
+		2,
+		3
+	].map((e) => [...new Set(t.map((t) => t[e] ?? ""))]),
+	paths: t.map((e) => ({
+		id: e.join(">"),
+		stops: e
+	}))
+};
+//#endregion
+export { n as threadTriptychDemo };