@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/flow/FlowChart.js

@@ -0,0 +1,145 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { FlowPaint } from "./flowEnums.js";
+import { FlowGraph } from "./FlowGraph.js";
+import { FlowTable } from "./FlowTable.js";
+import { color, interpolateRgb } from "d3";
+// src/charts/flow/FlowChart.ts
+var instances = 0;
+/** Shared drawing for flow charts: labels that never overlap or overflow, and translucent bands. */
+var FlowChart = class extends Chart2D {
+	uid = ++instances;
+	/** Draws labels in order, truncating at the edge of `area` (default the plot) and skipping any that would collide. */
+	labels(ctx, name, items, parent, area) {
+		const placed = [];
+		const [X0, Y0, X1, Y1] = area ?? [
+			0,
+			0,
+			ctx.plot.width,
+			ctx.plot.height
+		];
+		for (const item of items) {
+			const size = item.size ?? 11, anchor = item.anchor ?? "start";
+			const room = anchor === "start" ? X1 - item.x : anchor === "end" ? item.x - X0 : 2 * Math.min(item.x - X0, X1 - item.x);
+			const text = FlowTable.fit(item.text, room, size);
+			if (!text) continue;
+			const wide = FlowTable.width(text, size);
+			const left = anchor === "start" ? item.x : anchor === "end" ? item.x - wide : item.x - wide / 2;
+			const box = [
+				left,
+				item.y - size * .6,
+				left + wide,
+				item.y + size * .6
+			];
+			if (box[1] < Y0 - 1 || box[3] > Y1 + 1) continue;
+			if (placed.some(({ box: b }) => box[0] < b[2] + 2 && box[2] > b[0] - 2 && box[1] < b[3] && box[3] > b[1])) continue;
+			placed.push({
+				...item,
+				text,
+				box
+			});
+		}
+		const marks = ctx.marks(name, "text", placed, (d) => d.key, parent).attr("text-anchor", (d) => d.anchor ?? "start").attr("dy", "0.35em").attr("pointer-events", "none").attr("font-size", (d) => d.size ?? 11).attr("font-weight", (d) => d.weight ?? 400).attr("font-family", ctx.theme.fontFamily).attr("fill", (d) => d.fill ?? {
+			ink: ctx.theme.ink,
+			secondary: ctx.theme.inkSecondary,
+			muted: ctx.theme.inkMuted
+		}[d.tone ?? "secondary"]).attr("stroke", (d) => d.halo ? ctx.theme.surface : null).attr("stroke-width", (d) => d.halo ? 3 : null).attr("paint-order", "stroke").text((d) => d.text);
+		ctx.set(marks, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		}, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+	/** Ink for text on any fill, including the `rgb()` strings of sequential ramps. */
+	inkOver(ctx, fill) {
+		return ctx.palette.inkOn(color(fill)?.formatHex() ?? fill);
+	}
+	/** Tick labels outside the plot: below it, or left of it in a gutter of `gutter` px when `side` is `left`. */
+	ticks(ctx, name, items, side, gutter = 58) {
+		const { width, height } = ctx.plot;
+		if (side === "left") this.labels(ctx, name, items, ctx.group(`${name}-axis`).attr("transform", null), [
+			-gutter,
+			-8,
+			width,
+			height + 8
+		]);
+		else this.labels(ctx, name, items, ctx.group(`${name}-axis`).attr("transform", `translate(0,${height + 13})`), [
+			-12,
+			-8,
+			width + 12,
+			8
+		]);
+	}
+	/** Translucent filled bands, painted flat or with a gradient along their span. */
+	bands(ctx, name, bands, tip, opacity = .45) {
+		const blended = bands.filter((band) => band.span && band.to);
+		const defs = ctx.group(`${name}-defs`);
+		ctx.marks(`${name}-gradients`, "linearGradient", blended, (d) => d.key, defs).attr("id", (d) => this.gradientId(name, d.key)).attr("gradientUnits", "userSpaceOnUse").attr("x1", (d) => d.span[0]).attr("y1", (d) => d.span[1]).attr("x2", (d) => d.span[2]).attr("y2", (d) => d.span[3]).selectAll("stop").data((d) => [d.from, d.to]).join("stop").attr("offset", (_, i) => i).attr("stop-color", (color) => color);
+		const marks = ctx.marks(name, "path", bands, (d) => d.key).attr("fill", (d) => d.span && d.to ? `url(#${this.gradientId(name, d.key)})` : d.from);
+		ctx.set(marks, {
+			d: (d) => d.d,
+			"fill-opacity": opacity
+		}, {
+			d: (d) => d.d,
+			"fill-opacity": 0
+		}, 3);
+		ctx.hover(marks, (d) => tip(d.datum));
+		return marks;
+	}
+	/** Sets a stroked path: new lines draw on from their start, existing ones morph. */
+	stroke(ctx, lines, d) {
+		const fresh = lines.filter(function() {
+			return !this.hasAttribute("d");
+		});
+		const placed = lines.filter(function() {
+			return this.hasAttribute("d");
+		});
+		ctx.set(placed, { d });
+		fresh.attr("d", d);
+		ctx.drawOn(fresh);
+	}
+	/** Resolves a band's colours for a paint mode. */
+	tint(ctx, mode, from, to, span) {
+		if (mode === FlowPaint.Neutral) return { from: interpolateRgb(ctx.theme.axis, ctx.theme.inkMuted)(.4) };
+		if (mode === FlowPaint.Target) return { from: to };
+		if (mode === FlowPaint.Gradient && from !== to) return {
+			from,
+			to,
+			span
+		};
+		return { from };
+	}
+	/** While a node is hovered, recede the bands that do not touch it. */
+	trace(nodes, bands, touches) {
+		nodes.on("pointerenter.trace", (_, node) => {
+			bands.style("opacity", (band) => touches(band, node) ? null : .2);
+		}).on("pointerleave.trace", () => {
+			bands.style("opacity", null);
+		});
+	}
+	gradientId(name, key) {
+		return `flow-${this.uid}-${name}-${key.replace(/[^a-zA-Z0-9_-]/g, (c) => c.charCodeAt(0).toString(16))}`;
+	}
+};
+/** Flow charts over a directed graph. */
+var FlowGraphChart = class extends FlowChart {
+	graph(weighted = true) {
+		return FlowGraph.from(this.options.data, this.options, weighted);
+	}
+	table() {
+		return {
+			columns: [
+				"source",
+				"target",
+				"value"
+			],
+			rows: this.graph(false).arcs.map((arc) => [
+				arc.source,
+				arc.target,
+				arc.value
+			])
+		};
+	}
+};
+export { FlowChart, FlowGraphChart };

package/dist/charts/flow/FlowGraph.js

@@ -0,0 +1,97 @@
+// src/charts/flow/FlowGraph.ts
+var text = (value) => value === null || value === void 0 || value === "" ? null : String(value);
+/** A cleaned directed graph: unique nodes, merged parallel links, implicit nodes filled in. */
+var FlowGraph = class FlowGraph {
+	vertices;
+	arcs;
+	constructor(vertices, arcs) {
+		this.vertices = vertices;
+		this.arcs = arcs;
+	}
+	/**
+	* Reads links and nodes. When `weighted`, links without a positive finite value carry no flow
+	* and are dropped; otherwise they count as 1.
+	*/
+	static from(data, fields = {}, weighted = true) {
+		const { source = "source", target = "target", value = "value", id = "id", label = "label", group = "group" } = fields;
+		const links = Array.isArray(data) ? data : data?.links ?? [];
+		const nodes = Array.isArray(data) ? [] : data?.nodes ?? [];
+		const vertices = /* @__PURE__ */ new Map();
+		for (const node of nodes) {
+			const key = text(node?.[id]);
+			if (key !== null && !vertices.has(key)) vertices.set(key, {
+				id: key,
+				label: text(node[label]) ?? key,
+				group: text(node[group]),
+				raw: node
+			});
+		}
+		const arcs = /* @__PURE__ */ new Map();
+		for (const link of links) {
+			const from = text(link?.[source]), to = text(link?.[target]);
+			if (from === null || to === null) continue;
+			const amount = weighted ? Number(link[value]) : Number(link[value] ?? 1) || 1;
+			if (!Number.isFinite(amount) || amount <= 0) continue;
+			for (const key of [from, to]) if (!vertices.has(key)) vertices.set(key, {
+				id: key,
+				label: key,
+				group: null,
+				raw: null
+			});
+			const key = `${from}\u0000${to}`;
+			const hit = arcs.get(key);
+			if (hit) hit.value += amount;
+			else arcs.set(key, {
+				source: from,
+				target: to,
+				value: amount,
+				raw: link
+			});
+		}
+		return new FlowGraph([...vertices.values()], [...arcs.values()]);
+	}
+	/** Indices of the arcs that close a cycle, self-loops included, in depth-first order. */
+	backArcs() {
+		const outgoing = /* @__PURE__ */ new Map();
+		this.arcs.forEach((arc, i) => outgoing.set(arc.source, [...outgoing.get(arc.source) ?? [], i]));
+		const state = /* @__PURE__ */ new Map(), back = /* @__PURE__ */ new Set();
+		const visit = (start) => {
+			const stack = [[start, 0]];
+			state.set(start, 1);
+			while (stack.length) {
+				const top = stack[stack.length - 1];
+				const arcId = outgoing.get(top[0])?.[top[1]++];
+				if (arcId === void 0) {
+					state.set(top[0], 2);
+					stack.pop();
+					continue;
+				}
+				const next = this.arcs[arcId].target;
+				if (state.get(next) === 1) back.add(arcId);
+				else if (!state.has(next)) {
+					state.set(next, 1);
+					stack.push([next, 0]);
+				}
+			}
+		};
+		const incoming = new Set(this.arcs.map((arc) => arc.target));
+		for (const { id } of this.vertices) if (!incoming.has(id) && !state.has(id)) visit(id);
+		for (const { id } of this.vertices) if (!state.has(id)) visit(id);
+		return back;
+	}
+	/** This graph without the arcs that close a cycle. */
+	acyclic() {
+		const back = this.backArcs();
+		return new FlowGraph(this.vertices, this.arcs.filter((_, i) => !back.has(i)));
+	}
+	/** Larger of total inflow and total outflow for every node. */
+	throughput() {
+		const totals = new Map(this.vertices.map(({ id }) => [id, [0, 0]]));
+		for (const { source, target, value } of this.arcs) {
+			totals.get(source)[1] += value;
+			totals.get(target)[0] += value;
+		}
+		return new Map([...totals].map(([id, [inflow, outflow]]) => [id, Math.max(inflow, outflow)]));
+	}
+};
+export { FlowGraph };

package/dist/charts/flow/FlowMapLess.js

@@ -0,0 +1,229 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FlowGraphChart } from "./FlowChart.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowSamples } from "./FlowSamples.js";
+import { forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY, scaleSqrt, sum } from "d3";
+// src/charts/flow/FlowMapLess.ts
+var MapLessLayout = /* @__PURE__ */ function(MapLessLayout) {
+	MapLessLayout["Force"] = "force";
+	MapLessLayout["Circle"] = "circle";
+	MapLessLayout["Grid"] = "grid";
+	MapLessLayout["Hub"] = "hub";
+	return MapLessLayout;
+}({});
+var MapLessArc = /* @__PURE__ */ function(MapLessArc) {
+	MapLessArc["Tapered"] = "tapered";
+	MapLessArc["Band"] = "band";
+	MapLessArc["Line"] = "line";
+	return MapLessArc;
+}({});
+var MapLessBend = /* @__PURE__ */ function(MapLessBend) {
+	MapLessBend["Bowed"] = "bowed";
+	MapLessBend["Straight"] = "straight";
+	return MapLessBend;
+}({});
+/** Node size: everything passing through, or only the surplus or deficit. */
+var MapLessMeasure = /* @__PURE__ */ function(MapLessMeasure) {
+	MapLessMeasure["Throughput"] = "throughput";
+	MapLessMeasure["Net"] = "net";
+	return MapLessMeasure;
+}({});
+/** Draw origin-destination flows without a base map, when the pattern of movement matters more than geography. */
+var FlowMapLess = class extends FlowGraphChart {
+	static meta = {
+		id: "flow-map-less",
+		name: "Map-less flow map",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Shows origin-destination movement between abstract places, with tapering arcs sized by volume.",
+		tags: [
+			"origin destination",
+			"od",
+			"trips",
+			"migration"
+		],
+		sample: (seed) => FlowSamples.network(seed, 12, 3),
+		variants: {
+			layout: [
+				"force",
+				"circle",
+				"grid",
+				"hub"
+			],
+			arc: [
+				"tapered",
+				"band",
+				"line"
+			],
+			bend: ["bowed", "straight"],
+			measure: ["throughput", "net"]
+		}
+	};
+	defaults() {
+		return {
+			layout: "force",
+			arc: "tapered",
+			bend: "bowed",
+			measure: "throughput"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 10,
+			right: 12,
+			bottom: 10,
+			left: 12
+		};
+	}
+	place(sites, arcs, width, height) {
+		const { layout, x, y } = this.options;
+		const count = sites.length;
+		if (x && y && sites.every((site) => site.raw && Number.isFinite(+site.raw[x]) && Number.isFinite(+site.raw[y]))) {
+			const xs = sites.map((site) => +site.raw[x]), ys = sites.map((site) => +site.raw[y]);
+			const [x0, x1, y0, y1] = [
+				Math.min(...xs),
+				Math.max(...xs),
+				Math.min(...ys),
+				Math.max(...ys)
+			];
+			sites.forEach((site, i) => {
+				site.px = (xs[i] - x0) / (x1 - x0 || 1);
+				site.py = 1 - (ys[i] - y0) / (y1 - y0 || 1);
+			});
+		} else if (layout === "circle") sites.forEach((site, i) => {
+			const a = i / count * Math.PI * 2 - Math.PI / 2;
+			site.px = .5 + .5 * Math.cos(a);
+			site.py = .5 + .5 * Math.sin(a);
+		});
+		else if (layout === "grid") {
+			const columns = Math.ceil(Math.sqrt(count * width / height)), rows = Math.ceil(count / columns);
+			sites.forEach((site, i) => {
+				site.px = columns > 1 ? i % columns / (columns - 1) : .5;
+				site.py = rows > 1 ? Math.floor(i / columns) / (rows - 1) : .5;
+			});
+		} else if (layout === "hub") [...sites].sort((a, b) => b.total - a.total).forEach((site, i) => {
+			if (i === 0) {
+				site.px = site.py = .5;
+				return;
+			}
+			const a = (i - 1) / Math.max(1, count - 1) * Math.PI * 2 - Math.PI / 2;
+			site.px = .5 + .5 * Math.cos(a);
+			site.py = .5 + .5 * Math.sin(a);
+		});
+		else {
+			const links = arcs.map((arc) => ({
+				source: arc.source,
+				target: arc.target
+			}));
+			forceSimulation(sites).force("charge", forceManyBody().strength(-220)).force("link", forceLink(links).id((site) => site.id).distance(60)).force("x", forceX(0).strength(.09)).force("y", forceY(0).strength(.14)).force("hit", forceCollide(28)).stop().tick(220);
+			const xs = sites.map((site) => site.x ?? 0), ys = sites.map((site) => site.y ?? 0);
+			const [x0, x1, y0, y1] = [
+				Math.min(...xs),
+				Math.max(...xs),
+				Math.min(...ys),
+				Math.max(...ys)
+			];
+			sites.forEach((site, i) => {
+				site.px = (xs[i] - x0) / (x1 - x0 || 1);
+				site.py = (ys[i] - y0) / (y1 - y0 || 1);
+			});
+		}
+	}
+	draw(ctx) {
+		const { measure, arc: form, bend } = this.options;
+		const graph = this.graph();
+		const arcs = graph.arcs.filter((link) => link.source !== link.target);
+		const sites = graph.vertices.map((vertex) => {
+			const inflow = sum(arcs, (link) => link.target === vertex.id ? link.value : 0), outflow = sum(arcs, (link) => link.source === vertex.id ? link.value : 0);
+			return {
+				...vertex,
+				total: inflow + outflow,
+				net: inflow - outflow,
+				px: .5,
+				py: .5,
+				r: 6
+			};
+		});
+		const size = (site) => measure === "net" ? Math.abs(site.net) : site.total;
+		const radius = scaleSqrt([0, Math.max(1, ...sites.map(size))], [4, 16]);
+		const pad = 22;
+		const { width, height } = ctx.plot;
+		this.place(sites, arcs, width - 44, height - 44);
+		for (const site of sites) {
+			site.r = radius(size(site));
+			site.x = pad + site.px * (width - 44);
+			site.y = pad + site.py * (height - 44);
+		}
+		const byId = new Map(sites.map((site) => [site.id, site]));
+		const heaviest = Math.max(1, ...arcs.map((link) => link.value));
+		const trips = arcs.map((link) => {
+			const from = byId.get(link.source), to = byId.get(link.target);
+			const a = [from.x, from.y], b = [to.x, to.y];
+			const lift = bend === "bowed" ? .18 : 0;
+			const control = [(a[0] + b[0]) / 2 + (b[1] - a[1]) * lift, (a[1] + b[1]) / 2 - (b[0] - a[0]) * lift];
+			return {
+				arc: link,
+				from,
+				to,
+				points: FlowGeometry.trim(FlowGeometry.quadratic(a, control, b), from.r + 1, to.r + 2),
+				width: 1.5 + link.value / heaviest * 11
+			};
+		});
+		const shade = (group, label) => ctx.palette.color(group ?? label);
+		const hue = (site) => measure === "net" ? ctx.palette.diverging(site.net / Math.max(1, ...sites.map((other) => Math.abs(other.net)))) : shade(site.group, site.label);
+		for (const site of sites) if (measure !== "net") shade(site.group, site.label);
+		const body = (trip) => {
+			if (form === "tapered") return FlowGeometry.taper(trip.points, trip.width, .6);
+			if (form === "band") return FlowGeometry.taper(trip.points.slice(0, -1), trip.width, trip.width);
+			return FlowGeometry.taper(trip.points.slice(0, -1), 2, 2);
+		};
+		const tint = (trip) => measure === "net" ? ctx.theme.inkMuted : shade(trip.from.group, trip.from.label);
+		const routes = ctx.marks("arcs", "path", trips, (d) => `${d.arc.source}>${d.arc.target}`).attr("fill", tint);
+		ctx.set(routes, {
+			d: body,
+			"fill-opacity": .6
+		}, {
+			d: body,
+			"fill-opacity": 0
+		}, 8);
+		ctx.hover(routes, (d) => ({
+			title: `${d.from.label} → ${d.to.label}`,
+			rows: [["Volume", d.arc.value]],
+			color: tint(d)
+		}));
+		const heads = ctx.marks("heads", "path", form === "tapered" ? [] : trips, (d) => `${d.arc.source}>${d.arc.target}`).attr("fill", tint).attr("fill-opacity", .75);
+		const head = (d) => FlowGeometry.arrow(d.points[d.points.length - 1], FlowGeometry.heading(d.points), form === "band" ? Math.max(8, d.width * 1.3) : 8);
+		ctx.set(heads, { d: head }, { d: head }, 8);
+		const dots = ctx.marks("sites", "circle", sites, (d) => d.id).attr("fill", hue).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: (d) => d.r
+		}, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 0
+		}, 10);
+		ctx.hover(dots, (d) => ({
+			title: d.label,
+			color: hue(d),
+			rows: [["Through", d.total], ["Net", d.net]]
+		}));
+		this.trace(dots, routes, (trip, site) => trip.from === site || trip.to === site);
+		const center = [width / 2, height / 2];
+		this.labels(ctx, "names", [...sites].sort((a, b) => size(b) - size(a)).map((site) => {
+			const below = site.y > center[1], offset = site.r + 8;
+			return {
+				key: site.id,
+				x: site.x,
+				y: site.y + (below ? offset : -offset),
+				text: site.label,
+				anchor: "middle",
+				halo: true,
+				tone: "ink"
+			};
+		}));
+	}
+};
+export { FlowMapLess, MapLessArc, MapLessBend, MapLessLayout, MapLessMeasure };

package/dist/charts/flow/FlowNodeLinkChart.js

@@ -0,0 +1,130 @@
+import { FlowGraphChart } from "./FlowChart.js";
+import { FlowDirection, FlowRouter } from "./flowEnums.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowTable } from "./FlowTable.js";
+// src/charts/flow/FlowNodeLinkChart.ts
+var FlowNodeShape = /* @__PURE__ */ function(FlowNodeShape) {
+	FlowNodeShape["Box"] = "box";
+	FlowNodeShape["Pill"] = "pill";
+	FlowNodeShape["Diamond"] = "diamond";
+	FlowNodeShape["Data"] = "data";
+	FlowNodeShape["Dot"] = "dot";
+	return FlowNodeShape;
+}({});
+/** Node-link diagrams with shaped nodes and arrowed connectors. */
+var NodeLinkChart = class extends FlowGraphChart {
+	get vertical() {
+		return this.options.direction === FlowDirection.TopBottom;
+	}
+	get toPlot() {
+		return this.vertical ? (u, v) => [v, u] : (u, v) => [u, v];
+	}
+	outline(box) {
+		const to = this.toPlot;
+		const [cx, cy] = to(box.u, box.v);
+		const [w, h] = this.vertical ? [box.across, box.along] : [box.along, box.across];
+		const corner = (r) => `M${cx - w / 2 + r},${cy - h / 2}h${w - 2 * r}q${r},0 ${r},${r}v${h - 2 * r}q0,${r} ${-r},${r}h${-(w - 2 * r)}q${-r},0 ${-r},${-r}v${-(h - 2 * r)}q0,${-r} ${r},${-r}Z`;
+		if (box.shape === "pill") return corner(h / 2);
+		if (box.shape === "diamond") return FlowGeometry.polygon([
+			[cx - w / 2, cy],
+			[cx, cy - h / 2],
+			[cx + w / 2, cy],
+			[cx, cy + h / 2]
+		]);
+		if (box.shape === "data") return FlowGeometry.polygon([
+			[cx - w / 2 + 8, cy - h / 2],
+			[cx + w / 2, cy - h / 2],
+			[cx + w / 2 - 8, cy + h / 2],
+			[cx - w / 2, cy + h / 2]
+		]);
+		if (box.shape === "dot") return `M${cx - 7},${cy}a7,7 0 1,0 14,0a7,7 0 1,0 -14,0Z`;
+		return corner(5);
+	}
+	drawConnectors(ctx, connectors) {
+		const router = this.options.router ?? FlowRouter.Orthogonal;
+		const to = this.toPlot;
+		const shaft = (edge) => {
+			const stops = edge.stops, last = stops[stops.length - 1], prior = stops[stops.length - 2];
+			if (router === FlowRouter.Straight) {
+				const size = Math.hypot(last[0] - prior[0], last[1] - prior[1]) || 1;
+				return [...stops.slice(0, -1), [last[0] - (last[0] - prior[0]) / size * 6, last[1] - (last[1] - prior[1]) / size * 6]];
+			}
+			return [...stops.slice(0, -1), [last[0] - Math.sign(last[0] - prior[0] || 1) * 6, last[1]]];
+		};
+		const lines = ctx.marks("connectors", "path", connectors, (d) => d.key).attr("fill", "none").attr("stroke", (d) => d.stroke ?? ctx.theme.axis).attr("stroke-width", (d) => d.width ?? 2).attr("stroke-linejoin", "round").attr("stroke-opacity", 1);
+		this.stroke(ctx, lines, (d) => FlowGeometry.route(shaft(d), router, to));
+		ctx.hover(lines, (d) => d.tip);
+		const head = (d) => {
+			const end = d.stops[d.stops.length - 1], prior = d.stops[d.stops.length - 2];
+			const from = router === FlowRouter.Straight ? prior : [end[0] - Math.sign(end[0] - prior[0] || 1), end[1]];
+			const [ax, ay] = to(from[0], from[1]), tip = to(end[0], end[1]);
+			return FlowGeometry.arrow(tip, Math.atan2(tip[1] - ay, tip[0] - ax), 9 + (d.width ?? 2) / 2);
+		};
+		const heads = ctx.marks("heads", "path", connectors, (d) => d.key).attr("fill", (d) => d.stroke ?? ctx.theme.axis);
+		ctx.set(heads, { d: head }, { d: head });
+		return lines;
+	}
+	/** Connector captions, near the arrow and above the boxes. */
+	drawConnectorLabels(ctx, connectors) {
+		const to = this.toPlot, orthogonal = (this.options.router ?? FlowRouter.Orthogonal) === FlowRouter.Orthogonal;
+		this.labels(ctx, "edge-labels", connectors.flatMap((edge) => {
+			if (!edge.label) return [];
+			const a = edge.stops[edge.stops.length - 2], b = edge.stops[edge.stops.length - 1];
+			const [x, y] = to(orthogonal ? a[0] + (b[0] - a[0]) * .75 : (a[0] + b[0]) / 2, orthogonal ? b[1] : (a[1] + b[1]) / 2);
+			const lifted = orthogonal && !this.vertical;
+			return [{
+				key: edge.key,
+				x: orthogonal && this.vertical ? x + 12 : x,
+				y: lifted ? y - 8 : y,
+				text: edge.label,
+				anchor: "middle",
+				size: 10,
+				halo: true,
+				tone: "muted"
+			}];
+		}));
+	}
+	drawBoxes(ctx, boxes) {
+		const to = this.toPlot;
+		const marks = ctx.marks("nodes", "path", boxes, (d) => d.id).attr("fill", (d) => d.fill).attr("stroke", (d) => d.shape === "dot" ? ctx.theme.surface : null).attr("stroke-width", (d) => d.shape === "dot" ? 2 : null);
+		ctx.set(marks, { d: (d) => this.outline(d) }, { d: (d) => this.outline(d) }, 12);
+		ctx.hover(marks, (d) => d.tip);
+		this.labels(ctx, "node-names", boxes.map((box) => {
+			const [x, y] = to(box.u, box.v);
+			const beside = {
+				key: box.id,
+				x: x + 11,
+				y,
+				text: box.label,
+				anchor: "start",
+				halo: true,
+				tone: "ink"
+			};
+			const below = (gap) => ({
+				key: box.id,
+				x,
+				y: y + gap,
+				text: box.label,
+				anchor: "middle",
+				halo: true,
+				tone: "ink"
+			});
+			if (box.shape === "dot") return this.vertical ? beside : below(16);
+			const wide = this.vertical ? box.across : box.along, tall = this.vertical ? box.along : box.across;
+			const room = (box.shape === "diamond" ? wide * .66 : wide) - 10;
+			const text = FlowTable.fit(box.label, room);
+			if (!text || box.shape === "diamond" && text !== box.label || tall < 9) return below(tall / 2 + 9);
+			return {
+				key: box.id,
+				x,
+				y,
+				text,
+				anchor: "middle",
+				size: tall < 13 ? 9 : 11,
+				fill: ctx.palette.inkOn(box.fill)
+			};
+		}));
+		return marks;
+	}
+};
+export { FlowNodeShape, NodeLinkChart };