Diagram layout into drawing objects

/** Block sizes from the label: a line of text is ~0.62 of its height wide per character. */
export function nodeSize(n, th) {
  if (n.sym) {
    const sp = symbolPlace(n, th);
    if (sp) { const lab = String(n.label).split('\n'); return { w: Math.max(SYM_BOX * th, Math.max(...lab.map((l) => l.length)) * th * 0.62 + th), h: sp.h + 0.8 * th + (lab.length * 1.3 + 0.5) * th }; }
  }
  const lines = String(n.label).split('\n');
  const w = Math.max(...lines.map((l) => l.length)) * th * 0.62 + 3 * th;
  const h = (lines.length * 1.3 + 1.7) * th;
  const dia = n.shape === 'diamond';
  return { w: Math.max(dia ? 10 * th : 8 * th, dia ? w * 1.5 : w), h: dia ? h * 1.6 : h };
}

function symbolPlace(n, th) {
  const ents = symbolShape(n.sym);
  if (!ents || !ents.length) return null;
  const bb = boundsOfEnts(ents), w = Math.max(bb.x1 - bb.x0, 1e-6), h = Math.max(bb.y1 - bb.y0, 1e-6);
  const k = SYM_BOX * th / Math.max(w, h * 1.4);   // a wide symbol fills the box's width, a tall one 1.4 times the width in height
  return { ents, bb, k, w: w * k, h: h * k };
}

const xform = (ents, k, dx, dy, layer) => ents.map((e) => {
  const o = { ...e, layer, color: null };
  switch (e.type) {
    case 'line': return { ...o, x1: e.x1 * k + dx, y1: e.y1 * k + dy, x2: e.x2 * k + dx, y2: e.y2 * k + dy };
    case 'circle': return { ...o, cx: e.cx * k + dx, cy: e.cy * k + dy, r: e.r * k };
    case 'arc': return { ...o, cx: e.cx * k + dx, cy: e.cy * k + dy, r: e.r * k };
    case 'poly': return { ...o, pts: e.pts.map((q) => ({ x: q.x * k + dx, y: q.y * k + dy, b: q.b || 0 })) };
    case 'hatch': return { ...o, loops: e.loops.map((l) => l.map((v, i) => v * k + (i % 2 ? dy : dx))) };
    case 'text': return { ...o, x: e.x * k + dx, y: e.y * k + dy, h: (e.h || 1) * k };
    default: return o;
  }
});

const GX = 2.5 * th, GY = 4 * th;
const x = new Array(V.length).fill(0), y = new Array(V.length).fill(0);
let cursorY = 0;
const layerH = L.map((ly) => Math.max(0, ...ly.map((k) => V[k].h)));
L.forEach((ly, li) => { let cx = 0; for (const k of ly) { x[k] = cx + V[k].w / 2; cx += V[k].w + GX; } y[li] = cursorY; cursorY += layerH[li] + GY; });
for (let it = 0; it < 4; it++) {
  for (const ly of (it % 2 ? [...L].reverse() : L)) {
    const want = ly.map((k) => { const ns = [...links[k].up, ...links[k].down]; return ns.length ? ns.reduce((s, n) => s + x[n], 0) / ns.length : x[k]; });
    for (let p = 0; p < ly.length; p++) { const k = ly[p], lo = p ? x[ly[p - 1]] + (V[ly[p - 1]].w + V[k].w) / 2 + GX : -Infinity; x[k] = Math.max(lo, want[p]); }
    for (let p = ly.length - 2; p >= 0; p--) { const k = ly[p], hi = x[ly[p + 1]] - (V[ly[p + 1]].w + V[k].w) / 2 - GX; if (x[k] > hi) x[k] = hi; }
    // the push right above may have crowded the left again: one more pass left to right keeps the minimum gaps
    for (let p = 1; p < ly.length; p++) { const k = ly[p], lo = x[ly[p - 1]] + (V[ly[p - 1]].w + V[k].w) / 2 + GX; if (x[k] < lo) x[k] = lo; }
  }
}
const yc = y.map((t, li) => t + (layerH[li] || 0) / 2);   // a layer's middle: where its blocks are centred
const minX = Math.min(...V.map((v, k) => x[k] - v.w / 2));
for (let k = 0; k < V.length; k++) x[k] -= minX;

/** Sequence diagrams: blocks across the top, a dashed lifeline under each, one message per row. */
function layoutSequence(graph, th) {
  const P = graph.nodes, idx = new Map(P.map((n, i) => [n.id, i]));
  const size = P.map((n) => nodeSize(n, th));
  const boxH = Math.max(...size.map((s) => s.h));
  const gap = new Array(Math.max(0, P.length - 1)).fill(2.5 * th);   // the distance between neighbouring lifelines, widened by the labels that cross it
  const need = (a, b, text) => { const lo = Math.min(a, b), hi = Math.max(a, b); if (lo === hi) return; const w = (String(text).length * th * 0.8 * 0.62 + 2 * th) / (hi - lo); for (let k = lo; k < hi; k++) gap[k] = Math.max(gap[k], w); };
  graph.edges.forEach((e) => need(idx.get(e.from), idx.get(e.to), e.label));
  const cx = []; let acc = 0;
  P.forEach((n, i) => { if (i) acc = Math.max(acc + gap[i - 1], cx[i - 1] + size[i - 1].w / 2 + size[i].w / 2 + 1.5 * th) - 0; cx.push(i ? acc : size[0].w / 2); acc = cx[i]; });
  const row = 3.4 * th, top = boxH + 2.6 * th;
  const edges = graph.edges.map((e, i) => {
    const a = idx.get(e.from), b = idx.get(e.to), y = top + i * row;
    if (a === b) {
      const d = th * 1.4;
      return { i, pts: [{ x: cx[a], y: y - th * 0.4 }, { x: cx[a] + d, y: y - th * 0.4 }, { x: cx[a] + d, y: y + th * 0.9 }, { x: cx[a], y: y + th * 0.9 }], label: e.label ? { x: cx[a] + d, y: y + th * 0.25, vertical: true } : null };
    }
    return { i, pts: [{ x: cx[a], y }, { x: cx[b], y }], label: e.label ? { x: (cx[a] + cx[b]) / 2, y, vertical: false } : null };
  });
  const bottom = top + graph.edges.length * row;
  const nodes = P.map((n, i) => ({ id: n.id, x: cx[i], y: boxH / 2, w: size[i].w, h: boxH }));
  const lifelines = P.map((_, i) => ({ x: cx[i], y0: boxH, y1: bottom }));
  const xs = [...nodes.flatMap((n) => [n.x - n.w / 2, n.x + n.w / 2]), ...edges.flatMap((e) => e.pts.map((p) => p.x))];
  return { nodes, edges, lifelines, bounds: { minX: Math.min(...xs), maxX: Math.max(...xs), minY: 0, maxY: bottom } };
}

const X = (px) => x + px - b.minX, Y = (py) => y - (py - b.minY);   // the layout's y grows down; the drawing's grows up

const arrowHead = (from, to, s) => {
  const dx = to.x - from.x, dy = to.y - from.y, d = Math.hypot(dx, dy) || 1, ux = dx / d, uy = dy / d;
  return [to.x, to.y, to.x - ux * s - uy * s * 0.35, to.y - uy * s + ux * s * 0.35, to.x - ux * s + uy * s * 0.35, to.y - uy * s - ux * s * 0.35, to.x, to.y];
};