components/system-map/system-map-circles.ts

Functions

Imports

It imports components/system-map/system-map-circles-search.ts, components/system-map/system-map-data.ts, components/system-map/system-map-html.ts, components/system-map/system-map-inside.ts. No module of this repo imports it.

Source

1// Inside any system: one circle per system, drawn at build time, so one tap on any capsomer zooms
2// into its wiring (Dustin, 2026-10-18: "I thought it was a single page that you would click on
3// something and it would show the wiring of it", and "it's not intuitive to click twice").
4// `circleLayers` draws every circle as an inside layer in the map's classes; `systemMapHtml` takes
5// them as `circles`, and the controller shows the chosen one (system-map.ts). It runs at build
6// time: the search takes minutes over a large family, and a page should not.
7//
8// What a circle holds:
9//   - the system's own parts inside it;
10//   - around the rim, what it works with outside (its `external` parts) and every other system it
11//     connects to;
12//   - one wire for each pair a relationship joins, from the exact part that uses it. A line
13//     between two systems as wholes (Capsid coordinates Foxing) runs from the circle's edge, and
14//     is left out when a part of this system already wires to that system.
15// A private system is drawn like any other: its parts inside, its links around the rim.
16//
17// The places are searched for, from fixed starts, so the same data always draws the same way:
18// each part over a grid inside the circle, the rim's order around it, until no wire crosses
19// another or runs under a box it does not end at, and then the shortest wires. The drawing is the
20// shell's width, so a unit is the same size as on the map, and as tall as it needs.
21
22import { EXTERNAL, LOOSE_KINDS, type MapSystem, STORE_KINDS, type SystemMapData, layoutMap } from "./system-map-data.ts";
23import { escapeHtml as esc } from "./system-map-html.ts";
24import { type Rect, hitsRect, playableFlows } from "./system-map-inside.ts";
25import {
26  ANNEAL_STEPS,
27  BOX_PAD_X,
28  CIRCLE,
29  type CircleNode,
30  type CircleWire,
31  CROSSING,
32  GRID,
33  KIND_SIZE,
34  LABEL_FOOT,
35  LABEL_SIZE,
36  LINE_H,
37  MARGIN,
38  MIN_BOX_W,
39  NAME_SIZE,
40  OVERLAP,
41  RIM_H,
42  RIM_PAD_X,
43  RIM_SIZE,
44  SEARCH_CODE,
45  SEEDS,
46  type WireShape,
47  bendWires,
48  coster,
49  f1,
50  firstOrder,
51  firstPlaces,
52  placeRim,
53  radiusFor,
54  random,
55  rectOf,
56  segmentsCross,
57  slotsFor,
58  textWidth,
59  wrapName,
60} from "./system-map-circles-search.ts";
61
62export type { CircleNode, CircleWire, WireShape } from "./system-map-circles-search.ts";
63
64/**
65 * One circle laid out: its radius, the name at its foot, every box placed, every wire with its
66 * shape, the drawing's top, foot and width, and what the search scored it.
67 */
68export interface CircleLayout {
69  name: string;
70  r: number;
71  label: Rect | null;
72  nodes: CircleNode[];
73  wires: Array<CircleWire & WireShape>;
74  top: number;
75  bottom: number;
76  width: number;
77  faults: number;
78  cost: number;
79}
80
81/** A circle already searched for, under the key of what drew it. */
82export interface SavedCircle {
83  key: string;
84  layout: CircleLayout;
85}
86
87export interface CircleScene {
88  system: MapSystem;
89  nodes: CircleNode[];
90  wires: CircleWire[];
91}
92
93function partNode(c: { id: string; name: string; kind: string }): CircleNode {
94  const lines = wrapName(c.name);
95  const w = Math.ceil(Math.max(MIN_BOX_W, ...lines.map((l) => textWidth(l, NAME_SIZE)), textWidth(c.kind, KIND_SIZE)) + 2 * BOX_PAD_X);
96  return { id: c.id, role: "part", name: c.name, lines, sub: c.kind, w, h: 12 + lines.length * LINE_H + 11, store: STORE_KINDS.has(c.kind), x: 0, y: 0 };
97}
98
99function rimNode(id: string, name: string, role: "outside" | "system", priv = false): CircleNode {
100  return { id, role, name, lines: [name], sub: "", w: Math.ceil(textWidth(name, RIM_SIZE) + 2 * RIM_PAD_X), h: RIM_H, private: priv, x: 0, y: 0 };
101}
102
103/** What one system's circle draws: its parts, what is around its rim, and its wires, before anything is placed. */
104export function sceneOf(data: SystemMapData, id: string): CircleScene {
105  const system = data.systems.find((s) => s.id === id);
106  if (!system) throw new Error(`no system ${id}`);
107  const containers = data.containers ?? [];
108  const systems = new Map(data.systems.map((s) => [s.id, s]));
109  const owner = new Map(containers.map((c) => [c.id, c.system]));
110  const own = containers.filter((c) => c.system === id);
111  const nodes: CircleNode[] = [...own.filter((c) => c.kind !== EXTERNAL).map(partNode), ...own.filter((c) => c.kind === EXTERNAL).map((c) => rimNode(c.id, c.name, "outside"))];
112  const index = new Map(nodes.map((n, i) => [n.id, i]));
113  /** Another system, on the rim, added when a line first reaches it. */
114  const systemAt = (other: string) => {
115    const key = `system:${other}`;
116    let i = index.get(key);
117    if (i === undefined) {
118      const s = systems.get(other);
119      i = nodes.push(rimNode(key, s?.name ?? other, "system", s?.private)) - 1;
120      index.set(key, i);
121    }
122    return i;
123  };
124  /** Where a relationship's end sits in this drawing: one of its own boxes, the circle, or another system. */
125  const at = (end: string): number | null => {
126    if (index.has(end) && !end.startsWith("system:")) return index.get(end)!;
127    if (end === id) return CIRCLE;
128    const other = owner.get(end) ?? end;
129    return other === id ? null : systemAt(other);
130  };
131  const wires = new Map<string, CircleWire>();
132  const stubs: CircleWire[] = [];
133  // Only what touches this system: one of its parts, or the system itself.
134  const touches = (e: string) => e === id || owner.get(e) === id;
135  for (const r of data.relationships ?? []) {
136    if (!touches(r.from) && !touches(r.to)) continue;
137    const a = at(r.from);
138    const b = at(r.to);
139    if (a === null || b === null || a === b) continue;
140    const loose = LOOSE_KINDS.has(r.kind);
141    if (a === CIRCLE || b === CIRCLE) {
142      const other = a === CIRCLE ? b : a;
143      if (nodes[other]!.role !== "system") continue;
144      const prior = stubs.find((s) => s.b === other);
145      if (prior) prior.loose &&= loose;
146      else stubs.push({ a: CIRCLE, b: other, from: id, to: nodes[other]!.id, loose });
147      continue;
148    }
149    const key = a < b ? `${a} ${b}` : `${b} ${a}`;
150    const prior = wires.get(key);
151    if (prior) prior.loose &&= loose;
152    else wires.set(key, { a, b, from: nodes[a]!.id, to: nodes[b]!.id, loose });
153  }
154  // A part's own wire to a system says more than the circle's: the circle's is drawn only where there is none.
155  const wired = new Set([...wires.values()].flatMap((w) => [w.a, w.b]));
156  // A system that some line reached only as a whole and lost it keeps its place: it is still connected.
157  return { system, nodes, wires: [...wires.values(), ...stubs.filter((s) => !wired.has(s.b))] };
158}
159
160/** FNV-1a, 64 bits, in base 36: a key that is the same in every runtime, with no crypto module. */
161function hash(s: string): string {
162  let h = 0xcbf29ce484222325n;
163  for (let i = 0; i < s.length; i++) {
164    h ^= BigInt(s.charCodeAt(i));
165    h = (h * 0x100000001b3n) & 0xffffffffffffffffn;
166  }
167  return h.toString(36).padStart(13, "0");
168}
169
170/**
171 * What one circle is drawn from, as a key: its name, boxes and wires, the width it is drawn at,
172 * and the search's own code and numbers. A saved circle with the same key is the circle the search
173 * would draw.
174 */
175export function layoutKey(scene: CircleScene, minWidth: number): string {
176  return hash(`${JSON.stringify({ name: scene.system.name, nodes: scene.nodes, wires: scene.wires, minWidth })}\0${LAYOUT_CODE}`);
177}
178
179/**
180 * Lays out one circle, at least `minWidth` wide: the shell's.
181 *
182 * At each size the search runs from up to SEEDS fixed seeds while a fault is left, and the drawing
183 * kept is the one with the fewest faults once its wires are curved (a wire under a box counting ten
184 * crossings), the smallest of those tied. A circle with any fault left is drawn larger, a twentieth
185 * at a time up to half again: room lets a wire bow round the others, which is the only way past two
186 * parts that share three boxes (Carrel's Worker and its fifteen-minute check each wire to the site,
187 * Google and Email; straight, one pair must cross). A circle with no fault stops at the first size,
188 * so only a circle that needs the room pays for it in width.
189 */
190export function layoutScene(scene: CircleScene, minWidth: number): CircleLayout {
191  let best: { l: CircleLayout; score: number } | null = null;
192  let width = 0;
193  const scoreOf = (l: CircleLayout) => (l.cost >= OVERLAP ? 1e6 : 0) + faultsOf(l).reduce((n, f) => n + (f.includes(" crosses ") ? 1 : 10), 0);
194  for (let grown = 1; grown <= 1.5; grown *= 1.05) {
195    for (let seed = 0; seed < SEEDS; seed++) {
196      const l = layoutAt(scene, minWidth, grown, seed);
197      width ||= l.width;
198      if (l.width > width && l.cost >= OVERLAP / 2) continue;
199      const score = scoreOf(l);
200      if (!best || score < best.score) best = { l, score };
201      if (score === 0) return l;
202    }
203  }
204  return best!.l;
205}
206
207interface Best {
208  cost: number;
209  at: number[][];
210  seq: number[];
211  top: number;
212}
213
214/** One circle at one size. */
215function layoutAt(scene: CircleScene, minWidth: number, grown: number, seed: number): CircleLayout {
216  const nodes = scene.nodes.map((n) => ({ ...n }));
217  const node = (i: number) => nodes[i]!;
218  const wires = scene.wires;
219  const parts = nodes.map((n, i) => (n.role === "part" ? i : -1)).filter((i) => i >= 0);
220  const rim = nodes.map((n, i) => (n.role !== "part" ? i : -1)).filter((i) => i >= 0);
221  const r = f1(radiusFor(parts.map(node)) * grown);
222  const width = Math.max(minWidth, Math.ceil(2 * (r + MARGIN)));
223  const halfW = width / 2;
224  const name = scene.system.name;
225  // With parts inside, the name sits at the circle's foot, as the core's does; with none, in the middle.
226  const labelW = Math.ceil(textWidth(name.toUpperCase(), LABEL_SIZE) * 1.1 + 6);
227  const label = parts.length ? { x: -labelW / 2, y: r - LABEL_FOOT - 10, w: labelW, h: 13 } : null;
228  const slots = parts.map((i) => slotsFor(node(i), r, label));
229  // A part most of the wires run to (a Worker that every store and service hangs off) is the hub:
230  // it stays near the middle, so its wires run out like spokes rather than across the circle.
231  const degree = parts.map((i) => wires.filter((w) => w.a === i || w.b === i).length);
232  const hub = degree.indexOf(Math.max(0, ...degree));
233  if (hub >= 0 && degree[hub]! >= 5 && degree[hub]! >= 0.4 * wires.length) {
234    const near = slots[hub]!.filter(([x, y]) => Math.hypot(x, y) <= 0.3 * r);
235    if (near.length) slots[hub] = near;
236  }
237  const rand = random(nodes.length * 7919 + wires.length * 104729 + seed);
238
239  const cost = coster(nodes, wires, r, label);
240  const order = firstOrder(nodes, wires, rim);
241  let seq = [...order];
242  let top = Math.ceil(rim.length / 2);
243  let current = 0;
244  /** Each part over every place it may take, then the rim's order, until nothing improves. */
245  const descend = (rounds: number, withRim: boolean) => {
246    placeRim(nodes, seq, top, r, halfW);
247    cost.refreshAll();
248    current = cost.total();
249    for (let round = 0; round < rounds; round++) {
250      let improved = false;
251      for (const [pi, i] of parts.entries()) {
252        const n = node(i);
253        const keep: [number, number] = [n.x, n.y];
254        let pick = keep;
255        const before = cost.partial(i);
256        let bestDelta = -1e-6;
257        // Every other place first, then every place near the best of those and near where it is.
258        const around = (p: readonly number[], c: readonly number[]) => Math.abs(p[0]! - c[0]!) <= 2 * GRID && Math.abs(p[1]! - c[1]!) <= 2 * GRID;
259        for (const pass of [0, 1]) {
260          const centre = pick;
261          for (const p of slots[pi]!) {
262            const coarse = (p[0] / GRID) % 2 === 0 && (p[1] / GRID) % 2 === 0;
263            if (pass === 0 ? !coarse : coarse || (!around(p, centre) && !around(p, keep))) continue;
264            n.x = p[0];
265            n.y = p[1];
266            cost.refresh(i);
267            const delta = cost.partial(i) - before;
268            if (delta < bestDelta) {
269              bestDelta = delta;
270              pick = p;
271            }
272          }
273        }
274        n.x = pick[0];
275        n.y = pick[1];
276        cost.refresh(i);
277        if (pick !== keep) {
278          current += bestDelta;
279          improved = true;
280        }
281      }
282      if (withRim) {
283        // Then the rim: any two swapped, or one more or fewer above the circle.
284        const tryRim = (next: number[], nextTop: number) => {
285          placeRim(nodes, next, nextTop, r, halfW);
286          cost.refreshAll();
287          const c = cost.total();
288          if (c < current - 1e-6) {
289            current = c;
290            seq = next;
291            top = nextTop;
292            improved = true;
293          }
294        };
295        // The order the parts ask for: each round the circle toward what it wires to (barycentric), its count above.
296        const want = seq.map((i) => {
297          let tx = 0;
298          let ty = 0;
299          for (const w of wires) {
300            const o = w.a === i ? w.b : w.b === i ? w.a : null;
301            if (o === null || o === CIRCLE) continue;
302            tx += node(o).x - node(i).x * 0.25;
303            ty += node(o).y - node(i).y * 0.25;
304          }
305          return { i, ang: tx || ty ? Math.atan2(ty, tx) : Math.atan2(node(i).y, node(i).x) };
306        });
307        want.sort((p, q) => p.ang - q.ang);
308        tryRim(
309          want.map((w) => w.i),
310          Math.max(1, Math.min(seq.length - 1, want.filter((w) => w.ang < 0).length)),
311        );
312        for (let a = 0; a < seq.length; a++) {
313          for (let b = a + 1; b < seq.length; b++) {
314            const next = [...seq];
315            [next[a], next[b]] = [next[b]!, next[a]!];
316            tryRim(next, top);
317          }
318        }
319        for (const t of [top - 1, top + 1]) if (t >= 0 && t <= seq.length) tryRim([...seq], t);
320        placeRim(nodes, seq, top, r, halfW);
321        cost.refreshAll();
322        current = cost.total();
323      }
324      if (!improved) break;
325    }
326  };
327  let best: Best | null = null;
328  const keepBest = () => {
329    if (!best || current < best.cost - 1e-6) best = { cost: current, at: nodes.map((n) => [n.x, n.y]), seq: [...seq], top };
330  };
331  const restore = (b: Best) => {
332    nodes.forEach((n, i) => {
333      n.x = b.at[i]![0]!;
334      n.y = b.at[i]![1]!;
335    });
336  };
337  /**
338   * Annealing from where the search stands: a part moved, near or anywhere, or one of the rim
339   * moved to another place in its order, each kept when it costs less, or sometimes when it costs
340   * a little more while the temperature is high, so the search climbs out of a drawing no single
341   * move improves (simulated annealing, from a fixed seed). The best drawing seen is kept.
342   */
343  const slotAt = slots.map((list) => new Map(list.map((p) => [`${p[0]} ${p[1]}`, p])));
344  const anneal = () => {
345    for (let step = 0; step < ANNEAL_STEPS; step++) {
346      const temp = 3e4 * Math.pow(1e-4, step / ANNEAL_STEPS);
347      if (seq.length > 1 && rand() < 0.12) {
348        const from = Math.floor(rand() * seq.length);
349        const to = Math.floor(rand() * seq.length);
350        if (from === to) continue;
351        const next = [...seq];
352        if (rand() < 0.5) [next[from], next[to]] = [next[to]!, next[from]!];
353        else next.splice(to, 0, ...next.splice(from, 1));
354        const nextTop = rand() < 0.2 ? Math.max(0, Math.min(seq.length, top + (rand() < 0.5 ? -1 : 1))) : top;
355        placeRim(nodes, next, nextTop, r, halfW);
356        cost.refreshAll();
357        const c2 = cost.total();
358        if (c2 < current || rand() < Math.exp((current - c2) / temp)) {
359          current = c2;
360          seq = next;
361          top = nextTop;
362        } else {
363          placeRim(nodes, seq, top, r, halfW);
364          cost.refreshAll();
365        }
366      } else {
367        const pi = Math.floor(rand() * parts.length);
368        const i = parts[pi]!;
369        const n = node(i);
370        const list = slots[pi]!;
371        const keep = [n.x, n.y] as const;
372        const before = cost.partial(i);
373        let p: [number, number] | undefined;
374        if (rand() < 0.5) p = list[Math.floor(rand() * list.length)];
375        else {
376          p = slotAt[pi]!.get(`${keep[0] + GRID * (Math.floor(rand() * 7) - 3)} ${keep[1] + GRID * (Math.floor(rand() * 7) - 3)}`);
377        }
378        if (!p) continue;
379        n.x = p[0];
380        n.y = p[1];
381        cost.refresh(i);
382        const delta = cost.partial(i) - before;
383        if (delta < 0 || rand() < Math.exp(-delta / temp)) current += delta;
384        else {
385          n.x = keep[0];
386          n.y = keep[1];
387          cost.refresh(i);
388        }
389      }
390      keepBest();
391    }
392  };
393  // From each start: the rim's first order turned round by a quarter at a time, the parts placed
394  // toward it, settled; annealed while a fault is left; settled again.
395  const turns = rim.length > 1 ? [0, 0.25, 0.5, 0.75].map((f) => Math.round(f * rim.length)).filter((t, i, a) => a.indexOf(t) === i) : [0];
396  for (const turn of turns) {
397    seq = [...order.slice(turn), ...order.slice(0, turn)];
398    top = Math.ceil(rim.length / 2);
399    placeRim(nodes, seq, top, r, halfW);
400    firstPlaces(nodes, wires, parts, slots, r, rand);
401    descend(8, true);
402    keepBest();
403    if (current < CROSSING) break;
404    if (!parts.length) continue;
405    anneal();
406    const c = best as unknown as Best;
407    restore(c);
408    seq = [...c.seq];
409    top = c.top;
410    descend(8, true);
411    keepBest();
412    if ((best as unknown as Best).cost < CROSSING) break;
413  }
414  const done = best as unknown as Best;
415  placeRim(nodes, done.seq, done.top, r, halfW);
416  restore(done);
417  cost.refreshAll();
418  const routes = bendWires(nodes, wires, r, label);
419  // The drawing: the shell's width, and as tall as the rim reaches.
420  let above = -r - MARGIN;
421  let below = r + MARGIN;
422  for (const n of nodes) {
423    above = Math.min(above, n.y - n.h / 2 - MARGIN);
424    below = Math.max(below, n.y + n.h / 2 + MARGIN);
425  }
426  const faults = Math.floor(done.cost / CROSSING);
427  return { name, r, label, nodes, wires: wires.map((w, k) => ({ ...w, ...routes[k]! })), top: f1(above), bottom: f1(below), width, faults, cost: done.cost };
428}
429
430/** What drew a circle, for its key: the search's own code and this file's. */
431const LAYOUT_CODE = [SEARCH_CODE, partNode, rimNode, sceneOf, layoutScene, layoutAt].map(String).join("\0");
432
433// ---------------------------------------------------------------------------------------
434// The markup.
435
436/** Text inside the circle of a system with no parts drawn: its summary, wrapped to the circle. */
437function wrapText(text: string, r: number): string[] {
438  const max = 1.5 * r;
439  const lines: string[] = [];
440  let line = "";
441  for (const w of text.split(/\s+/).filter(Boolean)) {
442    const next = line ? `${line} ${w}` : w;
443    if (line && textWidth(next, RIM_SIZE) > max) {
444      lines.push(line);
445      line = w;
446    } else line = next;
447  }
448  if (line) lines.push(line);
449  return lines.slice(0, 6);
450}
451
452/**
453 * One system's inside layer, in the map's classes, so its stylesheet draws it and, for the core,
454 * the controller plays the flows over it: each part a `.cap-system-map-box`, what is outside it the
455 * same with data-external, each wire a `.cap-system-map-wire` carrying the ids of its two ends and
456 * its route. Another system on the rim is a `.cap-system-map-rim` carrying data-goto, a tap that
457 * zooms there.
458 */
459function layerSvg(l: CircleLayout, o: { id: string; summary: string; token: boolean; viewBox: number[] }): string {
460  const [vx, vy, vw, vh] = o.viewBox;
461  const wires = l.wires
462    .map((w) => {
463      const route = w.pts.map(([x, y]) => `${x},${y}`).join(" ");
464      return `<path class="cap-system-map-wire" data-from="${esc(w.from)}" data-to="${esc(w.to)}"${w.loose ? " data-loose" : ""}${w.a === CIRCLE ? " data-whole" : ""} data-route="${route}" d="${w.d}"/>`;
465    })
466    .join("");
467  const boxes = l.nodes
468    .map((n) => {
469      const x = f1(n.x - n.w / 2);
470      const y = f1(n.y - n.h / 2);
471      if (n.role === "system") {
472        const sys = n.id.slice("system:".length);
473        return `<g class="cap-system-map-rim" data-goto="${esc(sys)}"${n.private ? " data-private" : ""}><rect x="${x}" y="${y}" width="${n.w}" height="${n.h}" rx="${n.h / 2}"/><text class="cap-system-map-rim-name" x="${n.x}" y="${f1(n.y + 4)}">${esc(n.name)}</text></g>`;
474      }
475      if (n.role === "outside") {
476        return `<g class="cap-system-map-box" data-id="${esc(n.id)}" data-x="${n.x}" data-y="${n.y}" data-external><rect x="${x}" y="${y}" width="${n.w}" height="${n.h}" rx="4"/><text class="cap-system-map-box-name" x="${n.x}" y="${f1(n.y + 4)}">${esc(n.name)}</text></g>`;
477      }
478      const names = n.lines.map((line, i) => `<text class="cap-system-map-box-name" x="${n.x}" y="${f1(y + 16 + i * LINE_H)}">${esc(line)}</text>`).join("");
479      return `<g class="cap-system-map-box" data-id="${esc(n.id)}" data-x="${n.x}" data-y="${n.y}"${n.store ? " data-store" : ""}><rect x="${x}" y="${y}" width="${n.w}" height="${n.h}" rx="${n.store ? 12 : 5}"/>${names}<text class="cap-system-map-box-kind" x="${n.x}" y="${f1(y + n.h - 8)}">${esc(n.sub)}</text></g>`;
480    })
481    .join("");
482  let middle: string;
483  if (l.nodes.some((n) => n.role === "part")) middle = `<text class="cap-system-map-inside-title" x="0" y="${f1(l.r - LABEL_FOOT)}">${esc(l.name)}</text>`;
484  else {
485    const lines = wrapText(o.summary, l.r);
486    const top = -((lines.length - 1) * 14) / 2 + 8;
487    middle = `<text class="cap-system-map-inside-name" x="0" y="${f1(top - 16)}">${esc(l.name)}</text>${lines.map((t, i) => `<text class="cap-system-map-inside-text" x="0" y="${f1(top + 4 + i * 14)}">${esc(t)}</text>`).join("")}`;
488  }
489  const token = o.token ? `<circle class="cap-system-map-token" r="6" cx="0" cy="0"/>` : "";
490  return `<svg class="cap-system-map-layer" data-layer="inside" data-system="${esc(o.id)}" viewBox="${vx} ${vy} ${vw} ${vh}" aria-hidden="true" focusable="false"><circle class="cap-system-map-boundary" cx="0" cy="0" r="${l.r}"/>${middle}${wires}${boxes}${token}</svg>`;
491}
492
493/**
494 * What a laid-out circle gets wrong, in words: boxes too close, a wire under a box it does not end
495 * at or under the name, and two wires crossing.
496 */
497export function faultsOf(l: CircleLayout): string[] {
498  const out: string[] = [];
499  const { nodes, wires } = l;
500  for (let i = 0; i < nodes.length; i++) {
501    for (let j = i + 1; j < nodes.length; j++) {
502      const a = nodes[i]!;
503      const b = nodes[j]!;
504      if (Math.abs(a.x - b.x) < (a.w + b.w) / 2 + 2 && Math.abs(a.y - b.y) < (a.h + b.h) / 2 + 2) out.push(`${a.id} touches ${b.id}`);
505    }
506  }
507  const name = (w: CircleWire) => `${w.from}-${w.to}`;
508  const segsOf = (w: { pts: number[][] }) => w.pts.slice(1).map((q, i) => [...w.pts[i]!, ...q] as [number, number, number, number]);
509  for (const [k, w] of wires.entries()) {
510    const mine = segsOf(w);
511    for (const [m, n] of nodes.entries()) {
512      if (m !== w.a && m !== w.b && mine.some(([px, py, qx, qy]) => hitsRect(px, py, qx, qy, rectOf(n)))) out.push(`${name(w)} runs under ${n.id}`);
513    }
514    if (l.label && mine.some(([px, py, qx, qy]) => hitsRect(px, py, qx, qy, l.label!))) out.push(`${name(w)} runs under the name`);
515    for (const v of wires.slice(k + 1)) {
516      const shared = w.a === v.a || w.a === v.b || w.b === v.a || w.b === v.b;
517      if (!shared && mine.some((s) => segsOf(v).some((t) => segmentsCross(s, t)))) out.push(`${name(w)} crosses ${name(v)}`);
518    }
519  }
520  return out;
521}
522
523export interface CircleOptions {
524  /** What a circle with no parts says in its middle: the system's description by default. */
525  summary?: (s: MapSystem) => string;
526  /**
527   * Circles already searched for, by system id with their key. One whose key still matches is
528   * used as it is; the rest are searched for and put in it, so the caller can keep them (a file
529   * beside the build). A system the data no longer has is dropped from it.
530   */
531  saved?: Record<string, SavedCircle>;
532}
533
534/**
535 * Every system's inside layer, as markup, by id, for `systemMapHtml`'s `circles`: laid out at the
536 * shell's width, each at least the shell's height for that width, so zooming into a small system
537 * leaves the stage its size. The core's carries the token when it has flows to play.
538 */
539export function circleLayers(data: SystemMapData, options: CircleOptions = {}): Record<string, string> {
540  const { summary = (s: MapSystem) => s.description ?? "", saved = {} } = options;
541  const [, , shellW, shellH] = layoutMap(data.systems).viewBox;
542  const core = data.systems.find((s) => s.ring === "core");
543  const flows = playableFlows(data, core).length > 0;
544  const out: Record<string, string> = {};
545  for (const id of Object.keys(saved)) if (!data.systems.some((s) => s.id === id)) delete saved[id];
546  for (const s of data.systems) {
547    const scene = sceneOf(data, s.id);
548    const key = layoutKey(scene, shellW);
549    if (saved[s.id]?.key !== key) saved[s.id] = { key, layout: layoutScene(scene, shellW) };
550    const l = saved[s.id]!.layout;
551    // Never shorter, for its width, than the shell, so the stage does not shrink when a small system is chosen.
552    const minH = (l.width * shellH) / shellW;
553    const pad = Math.max(0, minH - (l.bottom - l.top)) / 2;
554    const viewBox = [f1(-l.width / 2), f1(l.top - pad), l.width, f1(l.bottom - l.top + 2 * pad)];
555    out[s.id] = layerSvg(l, { id: s.id, summary: summary(s), token: flows && s.id === core?.id, viewBox });
556  }
557  return out;
558}