@zukhruf/diagram 0.3.32 → 0.3.34

package/dist/lib/layouts/graph/layout.js

@@ -1,6 +1,9 @@
+import { validateGraph } from "../../model/validate-graph.js";
 import { gridAreas } from "./areas.js";
 import { gridGutters } from "./gutters.js";
-import { measureGroupTitle, measureNode } from "./measure.js";
+import { measureGroupTitle, measureNode, placeGroupPorts } from "./measure.js";
+import { roundLayout } from "./round.js";
+import { routeGraph } from "./route.js";
 import { LAYOUT_TOKENS } from "./tokens.js";
 import { sizeTracks } from "./tracks.js";
 
@@ -8,11 +11,12 @@ import { sizeTracks } from "./tracks.js";
  * Lays out a graph on a content-sized grid: it measures every node, sizes
  * each row and column to the content in it, and reserves the chrome of the
  * groups in the gutters between them. It throws when the grid cannot be
- * drawn without overlap.
+ * drawn without overlap, or when an id or an edge end is wrong.
  */
 export function layoutGraph(ir) {
-  const measured = new Map(ir.nodes.map(node => [node.id, measureNode(node, LAYOUT_TOKENS)]));
-  const titles = new Map(ir.groups.map(group => [group.id, measureGroupTitle(group, LAYOUT_TOKENS)]));
+  validateGraph(ir);
+  const measured = new Map(ir.nodes.map(node => [node.id, measureNode(node)]));
+  const titles = new Map(ir.groups.map(group => [group.id, measureGroupTitle(group)]));
   const areas = gridAreas(ir);
   const gutters = gridGutters(areas, new Map([...titles].map(([id, title]) => [id, title.height])), ir.edges);
   const items = axis => ir.nodes.map(node => {
@@ -45,13 +49,18 @@ export function layoutGraph(ir) {
     };
   });
   const groups = areas.groups.map(groupArea => placeGroup(groupArea, titles.get(groupArea.group.id), lines, gutters));
-  return {
+  const widestGutter = Math.max(...[...gutters.row, ...gutters.col].map(gutter => gutter.size));
+  const {
+    edges,
+    leaders
+  } = routeGraph(ir, nodes, groups, areas, 2 * widestGutter);
+  return roundLayout({
     nodes,
     groups,
-    edges: [],
-    leaders: [],
-    viewBox: viewBoxOf(nodes, groups)
-  };
+    edges,
+    leaders,
+    viewBox: viewBoxOf(nodes, groups, edges, leaders)
+  });
 }
 function areaBox(area, lines) {
   const x = lines.col.trackStart(area.col);
@@ -108,7 +117,8 @@ function placeGroup({
     depth,
     rect,
     ...title.place(rect),
-    dividers: group.dividers ? dividers(rect, area, title, group.labelSide, lines, gutters) : []
+    dividers: group.dividers ? dividers(rect, area, title, group.labelSide, lines, gutters) : [],
+    ports: placeGroupPorts(group.ports ?? [], rect)
   };
 }
 
@@ -141,8 +151,23 @@ function dividers(rect, area, title, labelSide, lines, gutters) {
     }];
   })];
 }
-function viewBoxOf(nodes, groups) {
-  const boxes = [...nodes.map(nodeLayout => nodeLayout.visual), ...groups.map(groupLayout => groupLayout.rect)];
+function viewBoxOf(nodes, groups, edges, leaders) {
+  const pointBox = ({
+    x,
+    y
+  }) => ({
+    x,
+    y,
+    w: 0,
+    h: 0
+  });
+  const boxes = [...nodes.map(nodeLayout => nodeLayout.visual), ...groups.map(groupLayout => groupLayout.rect), ...edges.flatMap(({
+    points,
+    label,
+    badge
+  }) => [...points.map(pointBox), ...(label ? [label.box] : []), ...(badge ? [badge.box] : [])]), ...leaders.flatMap(({
+    points
+  }) => points.map(pointBox))];
   const pad = LAYOUT_TOKENS.CONTENT_PAD;
   if (boxes.length === 0) return {
     x: -pad,

package/dist/lib/layouts/graph/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","names":["gridAreas","gridGutters","measureGroupTitle","measureNode","LAYOUT_TOKENS","sizeTracks","layoutGraph","ir","measured","Map","nodes","map","node","id","titles","groups","group","areas","gutters","title","height","edges","items","axis","area","get","frame","overhang","start","row","span","rowSpan","size","h","top","bottom","col","colSpan","w","left","right","line","count","gutter","lines","rows","cols","measuredNode","areaBox","place","nodeFrame","groupArea","placeGroup","leaders","viewBox","viewBoxOf","x","trackStart","y","trackEnd","stretch","visualW","visualH","depth","border","boundary","side","gutterStart","rect","dividers","labelSide","centre","titleAtBottom","inner","Array","from","length","_","index","boxes","nodeLayout","visual","groupLayout","pad","CONTENT_PAD","Math","min","box","max"],"sources":["../../../../src/lib/layouts/graph/layout.ts"],"sourcesContent":["import type { Box, DiagramGraphIR, Point } from '../../model/diagram-ir.ts';\nimport { type CellArea, type GroupArea, gridAreas } from './areas.ts';\nimport type {\n  GraphLayout,\n  GroupLayout,\n  NodeLayout,\n} from './graph-layout-result.ts';\nimport { type Axis, type GridGutters, gridGutters } from './gutters.ts';\nimport {\n  type MeasuredGroupTitle,\n  type MeasuredNode,\n  measureGroupTitle,\n  measureNode,\n} from './measure.ts';\nimport { LAYOUT_TOKENS } from './tokens.ts';\nimport { type TrackLine, sizeTracks } from './tracks.ts';\n\n/**\n * Lays out a graph on a content-sized grid: it measures every node, sizes\n * each row and column to the content in it, and reserves the chrome of the\n * groups in the gutters between them. It throws when the grid cannot be\n * drawn without overlap.\n */\nexport function layoutGraph(ir: DiagramGraphIR): GraphLayout {\n  const measured = new Map(\n    ir.nodes.map(\n      (node) => [node.id, measureNode(node, LAYOUT_TOKENS)] as const,\n    ),\n  );\n  const titles = new Map(\n    ir.groups.map(\n      (group) => [group.id, measureGroupTitle(group, LAYOUT_TOKENS)] as const,\n    ),\n  );\n  const areas = gridAreas(ir);\n  const gutters = gridGutters(\n    areas,\n    new Map([...titles].map(([id, title]) => [id, title.height])),\n    ir.edges,\n  );\n\n  const items = (axis: Axis) =>\n    ir.nodes.map((node) => {\n      const area = areas.nodes.get(node.id)!;\n      const { frame, overhang } = measured.get(node.id)!;\n      return axis === 'row'\n        ? {\n            start: area.row,\n            span: area.rowSpan,\n            size: frame.h + overhang.top + overhang.bottom,\n          }\n        : {\n            start: area.col,\n            span: area.colSpan,\n            size: frame.w + overhang.left + overhang.right,\n          };\n    });\n  const line = (axis: Axis, count: number) =>\n    sizeTracks(\n      count,\n      items(axis),\n      gutters[axis].map((gutter) => gutter.size),\n    );\n  const lines: Record<Axis, TrackLine> = {\n    row: line('row', areas.rows),\n    col: line('col', areas.cols),\n  };\n\n  const nodes: NodeLayout[] = ir.nodes.map((node) => {\n    const measuredNode = measured.get(node.id)!;\n    const area = areaBox(areas.nodes.get(node.id)!, lines);\n    return { node, ...measuredNode.place(nodeFrame(measuredNode, area)) };\n  });\n  const groups = areas.groups.map((groupArea) =>\n    placeGroup(groupArea, titles.get(groupArea.group.id)!, lines, gutters),\n  );\n\n  return {\n    nodes,\n    groups,\n    edges: [],\n    leaders: [],\n    viewBox: viewBoxOf(nodes, groups),\n  };\n}\n\nfunction areaBox(area: CellArea, lines: Record<Axis, TrackLine>): Box {\n  const x = lines.col.trackStart(area.col);\n  const y = lines.row.trackStart(area.row);\n  return {\n    x,\n    y,\n    w: lines.col.trackEnd(area.col + area.colSpan - 1) - x,\n    h: lines.row.trackEnd(area.row + area.rowSpan - 1) - y,\n  };\n}\n\n/** A stretching node fills its area; any other node keeps its measured frame, centred in the area. */\nfunction nodeFrame(measured: MeasuredNode, area: Box): Box {\n  const { frame, overhang, stretch } = measured;\n  if (stretch) {\n    return {\n      x: area.x + overhang.left,\n      y: area.y + overhang.top,\n      w: area.w - overhang.left - overhang.right,\n      h: area.h - overhang.top - overhang.bottom,\n    };\n  }\n  const visualW = frame.w + overhang.left + overhang.right;\n  const visualH = frame.h + overhang.top + overhang.bottom;\n  return {\n    x: area.x + (area.w - visualW) / 2 + overhang.left,\n    y: area.y + (area.h - visualH) / 2 + overhang.top,\n    ...frame,\n  };\n}\n\n/** Each side of a group lies on the outer edge of its chrome slot in the gutter where the group opens or closes. */\nfunction placeGroup(\n  { group, depth, area }: GroupArea,\n  title: MeasuredGroupTitle,\n  lines: Record<Axis, TrackLine>,\n  gutters: GridGutters,\n): GroupLayout {\n  const border = (axis: Axis, boundary: number, side: 'opening' | 'closing') =>\n    lines[axis].gutterStart(boundary) +\n    gutters[axis][boundary]![side].get(depth)!;\n  const x = border('col', area.col, 'opening');\n  const y = border('row', area.row, 'opening');\n  const rect = {\n    x,\n    y,\n    w: border('col', area.col + area.colSpan, 'closing') - x,\n    h: border('row', area.row + area.rowSpan, 'closing') - y,\n  };\n  return {\n    group,\n    depth,\n    rect,\n    ...title.place(rect),\n    dividers: group.dividers\n      ? dividers(rect, area, title, group.labelSide, lines, gutters)\n      : [],\n  };\n}\n\n/** A line through the middle of every gutter inside the group, clear of its title. */\nfunction dividers(\n  rect: Box,\n  area: CellArea,\n  title: MeasuredGroupTitle,\n  labelSide: 'top' | 'bottom' | undefined,\n  lines: Record<Axis, TrackLine>,\n  gutters: GridGutters,\n): [Point, Point][] {\n  const centre = (axis: Axis, boundary: number) =>\n    lines[axis].gutterStart(boundary) + gutters[axis][boundary]!.size / 2;\n  const titleAtBottom = labelSide === 'bottom';\n  const top = rect.y + (titleAtBottom ? 0 : title.height);\n  const bottom = rect.y + rect.h - (titleAtBottom ? title.height : 0);\n  const inner = (start: number, span: number) =>\n    Array.from({ length: span - 1 }, (_, index) => start + index + 1);\n  return [\n    ...inner(area.col, area.colSpan).map((boundary): [Point, Point] => {\n      const x = centre('col', boundary);\n      return [\n        { x, y: top },\n        { x, y: bottom },\n      ];\n    }),\n    ...inner(area.row, area.rowSpan).map((boundary): [Point, Point] => {\n      const y = centre('row', boundary);\n      return [\n        { x: rect.x, y },\n        { x: rect.x + rect.w, y },\n      ];\n    }),\n  ];\n}\n\nfunction viewBoxOf(nodes: NodeLayout[], groups: GroupLayout[]): Box {\n  const boxes = [\n    ...nodes.map((nodeLayout) => nodeLayout.visual),\n    ...groups.map((groupLayout) => groupLayout.rect),\n  ];\n  const pad = LAYOUT_TOKENS.CONTENT_PAD;\n  if (boxes.length === 0) return { x: -pad, y: -pad, w: 2 * pad, h: 2 * pad };\n  const left = Math.min(...boxes.map((box) => box.x));\n  const top = Math.min(...boxes.map((box) => box.y));\n  const right = Math.max(...boxes.map((box) => box.x + box.w));\n  const bottom = Math.max(...boxes.map((box) => box.y + box.h));\n  return {\n    x: left - pad,\n    y: top - pad,\n    w: right - left + 2 * pad,\n    h: bottom - top + 2 * pad,\n  };\n}\n"],"mappings":"AACA,SAAwCA,SAAS,QAAQ,YAAY;AAMrE,SAAsCC,WAAW,QAAQ,cAAc;AACvE,SAGEC,iBAAiB,EACjBC,WAAW,QACN,cAAc;AACrB,SAASC,aAAa,QAAQ,aAAa;AAC3C,SAAyBC,UAAU,QAAQ,aAAa;;AAExD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAACC,EAAkB,EAAe;EAC3D,MAAMC,QAAQ,GAAG,IAAIC,GAAG,CACtBF,EAAE,CAACG,KAAK,CAACC,GAAG,CACTC,IAAI,IAAK,CAACA,IAAI,CAACC,EAAE,EAAEV,WAAW,CAACS,IAAI,EAAER,aAAa,CAAC,CACtD,CACF,CAAC;EACD,MAAMU,MAAM,GAAG,IAAIL,GAAG,CACpBF,EAAE,CAACQ,MAAM,CAACJ,GAAG,CACVK,KAAK,IAAK,CAACA,KAAK,CAACH,EAAE,EAAEX,iBAAiB,CAACc,KAAK,EAAEZ,aAAa,CAAC,CAC/D,CACF,CAAC;EACD,MAAMa,KAAK,GAAGjB,SAAS,CAACO,EAAE,CAAC;EAC3B,MAAMW,OAAO,GAAGjB,WAAW,CACzBgB,KAAK,EACL,IAAIR,GAAG,CAAC,CAAC,GAAGK,MAAM,CAAC,CAACH,GAAG,CAAC,CAAC,CAACE,EAAE,EAAEM,KAAK,CAAC,KAAK,CAACN,EAAE,EAAEM,KAAK,CAACC,MAAM,CAAC,CAAC,CAAC,EAC7Db,EAAE,CAACc,KACL,CAAC;EAED,MAAMC,KAAK,GAAIC,IAAU,IACvBhB,EAAE,CAACG,KAAK,CAACC,GAAG,CAAEC,IAAI,IAAK;IACrB,MAAMY,IAAI,GAAGP,KAAK,CAACP,KAAK,CAACe,GAAG,CAACb,IAAI,CAACC,EAAE,CAAE;IACtC,MAAM;MAAEa,KAAK;MAAEC;IAAS,CAAC,GAAGnB,QAAQ,CAACiB,GAAG,CAACb,IAAI,CAACC,EAAE,CAAE;IAClD,OAAOU,IAAI,KAAK,KAAK,GACjB;MACEK,KAAK,EAAEJ,IAAI,CAACK,GAAG;MACfC,IAAI,EAAEN,IAAI,CAACO,OAAO;MAClBC,IAAI,EAAEN,KAAK,CAACO,CAAC,GAAGN,QAAQ,CAACO,GAAG,GAAGP,QAAQ,CAACQ;IAC1C,CAAC,GACD;MACEP,KAAK,EAAEJ,IAAI,CAACY,GAAG;MACfN,IAAI,EAAEN,IAAI,CAACa,OAAO;MAClBL,IAAI,EAAEN,KAAK,CAACY,CAAC,GAAGX,QAAQ,CAACY,IAAI,GAAGZ,QAAQ,CAACa;IAC3C,CAAC;EACP,CAAC,CAAC;EACJ,MAAMC,IAAI,GAAGA,CAAClB,IAAU,EAAEmB,KAAa,KACrCrC,UAAU,CACRqC,KAAK,EACLpB,KAAK,CAACC,IAAI,CAAC,EACXL,OAAO,CAACK,IAAI,CAAC,CAACZ,GAAG,CAAEgC,MAAM,IAAKA,MAAM,CAACX,IAAI,CAC3C,CAAC;EACH,MAAMY,KAA8B,GAAG;IACrCf,GAAG,EAAEY,IAAI,CAAC,KAAK,EAAExB,KAAK,CAAC4B,IAAI,CAAC;IAC5BT,GAAG,EAAEK,IAAI,CAAC,KAAK,EAAExB,KAAK,CAAC6B,IAAI;EAC7B,CAAC;EAED,MAAMpC,KAAmB,GAAGH,EAAE,CAACG,KAAK,CAACC,GAAG,CAAEC,IAAI,IAAK;IACjD,MAAMmC,YAAY,GAAGvC,QAAQ,CAACiB,GAAG,CAACb,IAAI,CAACC,EAAE,CAAE;IAC3C,MAAMW,IAAI,GAAGwB,OAAO,CAAC/B,KAAK,CAACP,KAAK,CAACe,GAAG,CAACb,IAAI,CAACC,EAAE,CAAC,EAAG+B,KAAK,CAAC;IACtD,OAAO;MAAEhC,IAAI;MAAE,GAAGmC,YAAY,CAACE,KAAK,CAACC,SAAS,CAACH,YAAY,EAAEvB,IAAI,CAAC;IAAE,CAAC;EACvE,CAAC,CAAC;EACF,MAAMT,MAAM,GAAGE,KAAK,CAACF,MAAM,CAACJ,GAAG,CAAEwC,SAAS,IACxCC,UAAU,CAACD,SAAS,EAAErC,MAAM,CAACW,GAAG,CAAC0B,SAAS,CAACnC,KAAK,CAACH,EAAE,CAAC,EAAG+B,KAAK,EAAE1B,OAAO,CACvE,CAAC;EAED,OAAO;IACLR,KAAK;IACLK,MAAM;IACNM,KAAK,EAAE,EAAE;IACTgC,OAAO,EAAE,EAAE;IACXC,OAAO,EAAEC,SAAS,CAAC7C,KAAK,EAAEK,MAAM;EAClC,CAAC;AACH;AAEA,SAASiC,OAAOA,CAACxB,IAAc,EAAEoB,KAA8B,EAAO;EACpE,MAAMY,CAAC,GAAGZ,KAAK,CAACR,GAAG,CAACqB,UAAU,CAACjC,IAAI,CAACY,GAAG,CAAC;EACxC,MAAMsB,CAAC,GAAGd,KAAK,CAACf,GAAG,CAAC4B,UAAU,CAACjC,IAAI,CAACK,GAAG,CAAC;EACxC,OAAO;IACL2B,CAAC;IACDE,CAAC;IACDpB,CAAC,EAAEM,KAAK,CAACR,GAAG,CAACuB,QAAQ,CAACnC,IAAI,CAACY,GAAG,GAAGZ,IAAI,CAACa,OAAO,GAAG,CAAC,CAAC,GAAGmB,CAAC;IACtDvB,CAAC,EAAEW,KAAK,CAACf,GAAG,CAAC8B,QAAQ,CAACnC,IAAI,CAACK,GAAG,GAAGL,IAAI,CAACO,OAAO,GAAG,CAAC,CAAC,GAAG2B;EACvD,CAAC;AACH;;AAEA;AACA,SAASR,SAASA,CAAC1C,QAAsB,EAAEgB,IAAS,EAAO;EACzD,MAAM;IAAEE,KAAK;IAAEC,QAAQ;IAAEiC;EAAQ,CAAC,GAAGpD,QAAQ;EAC7C,IAAIoD,OAAO,EAAE;IACX,OAAO;MACLJ,CAAC,EAAEhC,IAAI,CAACgC,CAAC,GAAG7B,QAAQ,CAACY,IAAI;MACzBmB,CAAC,EAAElC,IAAI,CAACkC,CAAC,GAAG/B,QAAQ,CAACO,GAAG;MACxBI,CAAC,EAAEd,IAAI,CAACc,CAAC,GAAGX,QAAQ,CAACY,IAAI,GAAGZ,QAAQ,CAACa,KAAK;MAC1CP,CAAC,EAAET,IAAI,CAACS,CAAC,GAAGN,QAAQ,CAACO,GAAG,GAAGP,QAAQ,CAACQ;IACtC,CAAC;EACH;EACA,MAAM0B,OAAO,GAAGnC,KAAK,CAACY,CAAC,GAAGX,QAAQ,CAACY,IAAI,GAAGZ,QAAQ,CAACa,KAAK;EACxD,MAAMsB,OAAO,GAAGpC,KAAK,CAACO,CAAC,GAAGN,QAAQ,CAACO,GAAG,GAAGP,QAAQ,CAACQ,MAAM;EACxD,OAAO;IACLqB,CAAC,EAAEhC,IAAI,CAACgC,CAAC,GAAG,CAAChC,IAAI,CAACc,CAAC,GAAGuB,OAAO,IAAI,CAAC,GAAGlC,QAAQ,CAACY,IAAI;IAClDmB,CAAC,EAAElC,IAAI,CAACkC,CAAC,GAAG,CAAClC,IAAI,CAACS,CAAC,GAAG6B,OAAO,IAAI,CAAC,GAAGnC,QAAQ,CAACO,GAAG;IACjD,GAAGR;EACL,CAAC;AACH;;AAEA;AACA,SAAS0B,UAAUA,CACjB;EAAEpC,KAAK;EAAE+C,KAAK;EAAEvC;AAAgB,CAAC,EACjCL,KAAyB,EACzByB,KAA8B,EAC9B1B,OAAoB,EACP;EACb,MAAM8C,MAAM,GAAGA,CAACzC,IAAU,EAAE0C,QAAgB,EAAEC,IAA2B,KACvEtB,KAAK,CAACrB,IAAI,CAAC,CAAC4C,WAAW,CAACF,QAAQ,CAAC,GACjC/C,OAAO,CAACK,IAAI,CAAC,CAAC0C,QAAQ,CAAC,CAAEC,IAAI,CAAC,CAACzC,GAAG,CAACsC,KAAK,CAAE;EAC5C,MAAMP,CAAC,GAAGQ,MAAM,CAAC,KAAK,EAAExC,IAAI,CAACY,GAAG,EAAE,SAAS,CAAC;EAC5C,MAAMsB,CAAC,GAAGM,MAAM,CAAC,KAAK,EAAExC,IAAI,CAACK,GAAG,EAAE,SAAS,CAAC;EAC5C,MAAMuC,IAAI,GAAG;IACXZ,CAAC;IACDE,CAAC;IACDpB,CAAC,EAAE0B,MAAM,CAAC,KAAK,EAAExC,IAAI,CAACY,GAAG,GAAGZ,IAAI,CAACa,OAAO,EAAE,SAAS,CAAC,GAAGmB,CAAC;IACxDvB,CAAC,EAAE+B,MAAM,CAAC,KAAK,EAAExC,IAAI,CAACK,GAAG,GAAGL,IAAI,CAACO,OAAO,EAAE,SAAS,CAAC,GAAG2B;EACzD,CAAC;EACD,OAAO;IACL1C,KAAK;IACL+C,KAAK;IACLK,IAAI;IACJ,GAAGjD,KAAK,CAAC8B,KAAK,CAACmB,IAAI,CAAC;IACpBC,QAAQ,EAAErD,KAAK,CAACqD,QAAQ,GACpBA,QAAQ,CAACD,IAAI,EAAE5C,IAAI,EAAEL,KAAK,EAAEH,KAAK,CAACsD,SAAS,EAAE1B,KAAK,EAAE1B,OAAO,CAAC,GAC5D;EACN,CAAC;AACH;;AAEA;AACA,SAASmD,QAAQA,CACfD,IAAS,EACT5C,IAAc,EACdL,KAAyB,EACzBmD,SAAuC,EACvC1B,KAA8B,EAC9B1B,OAAoB,EACF;EAClB,MAAMqD,MAAM,GAAGA,CAAChD,IAAU,EAAE0C,QAAgB,KAC1CrB,KAAK,CAACrB,IAAI,CAAC,CAAC4C,WAAW,CAACF,QAAQ,CAAC,GAAG/C,OAAO,CAACK,IAAI,CAAC,CAAC0C,QAAQ,CAAC,CAAEjC,IAAI,GAAG,CAAC;EACvE,MAAMwC,aAAa,GAAGF,SAAS,KAAK,QAAQ;EAC5C,MAAMpC,GAAG,GAAGkC,IAAI,CAACV,CAAC,IAAIc,aAAa,GAAG,CAAC,GAAGrD,KAAK,CAACC,MAAM,CAAC;EACvD,MAAMe,MAAM,GAAGiC,IAAI,CAACV,CAAC,GAAGU,IAAI,CAACnC,CAAC,IAAIuC,aAAa,GAAGrD,KAAK,CAACC,MAAM,GAAG,CAAC,CAAC;EACnE,MAAMqD,KAAK,GAAGA,CAAC7C,KAAa,EAAEE,IAAY,KACxC4C,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAE9C,IAAI,GAAG;EAAE,CAAC,EAAE,CAAC+C,CAAC,EAAEC,KAAK,KAAKlD,KAAK,GAAGkD,KAAK,GAAG,CAAC,CAAC;EACnE,OAAO,CACL,GAAGL,KAAK,CAACjD,IAAI,CAACY,GAAG,EAAEZ,IAAI,CAACa,OAAO,CAAC,CAAC1B,GAAG,CAAEsD,QAAQ,IAAqB;IACjE,MAAMT,CAAC,GAAGe,MAAM,CAAC,KAAK,EAAEN,QAAQ,CAAC;IACjC,OAAO,CACL;MAAET,CAAC;MAAEE,CAAC,EAAExB;IAAI,CAAC,EACb;MAAEsB,CAAC;MAAEE,CAAC,EAAEvB;IAAO,CAAC,CACjB;EACH,CAAC,CAAC,EACF,GAAGsC,KAAK,CAACjD,IAAI,CAACK,GAAG,EAAEL,IAAI,CAACO,OAAO,CAAC,CAACpB,GAAG,CAAEsD,QAAQ,IAAqB;IACjE,MAAMP,CAAC,GAAGa,MAAM,CAAC,KAAK,EAAEN,QAAQ,CAAC;IACjC,OAAO,CACL;MAAET,CAAC,EAAEY,IAAI,CAACZ,CAAC;MAAEE;IAAE,CAAC,EAChB;MAAEF,CAAC,EAAEY,IAAI,CAACZ,CAAC,GAAGY,IAAI,CAAC9B,CAAC;MAAEoB;IAAE,CAAC,CAC1B;EACH,CAAC,CAAC,CACH;AACH;AAEA,SAASH,SAASA,CAAC7C,KAAmB,EAAEK,MAAqB,EAAO;EAClE,MAAMgE,KAAK,GAAG,CACZ,GAAGrE,KAAK,CAACC,GAAG,CAAEqE,UAAU,IAAKA,UAAU,CAACC,MAAM,CAAC,EAC/C,GAAGlE,MAAM,CAACJ,GAAG,CAAEuE,WAAW,IAAKA,WAAW,CAACd,IAAI,CAAC,CACjD;EACD,MAAMe,GAAG,GAAG/E,aAAa,CAACgF,WAAW;EACrC,IAAIL,KAAK,CAACH,MAAM,KAAK,CAAC,EAAE,OAAO;IAAEpB,CAAC,EAAE,CAAC2B,GAAG;IAAEzB,CAAC,EAAE,CAACyB,GAAG;IAAE7C,CAAC,EAAE,CAAC,GAAG6C,GAAG;IAAElD,CAAC,EAAE,CAAC,GAAGkD;EAAI,CAAC;EAC3E,MAAM5C,IAAI,GAAG8C,IAAI,CAACC,GAAG,CAAC,GAAGP,KAAK,CAACpE,GAAG,CAAE4E,GAAG,IAAKA,GAAG,CAAC/B,CAAC,CAAC,CAAC;EACnD,MAAMtB,GAAG,GAAGmD,IAAI,CAACC,GAAG,CAAC,GAAGP,KAAK,CAACpE,GAAG,CAAE4E,GAAG,IAAKA,GAAG,CAAC7B,CAAC,CAAC,CAAC;EAClD,MAAMlB,KAAK,GAAG6C,IAAI,CAACG,GAAG,CAAC,GAAGT,KAAK,CAACpE,GAAG,CAAE4E,GAAG,IAAKA,GAAG,CAAC/B,CAAC,GAAG+B,GAAG,CAACjD,CAAC,CAAC,CAAC;EAC5D,MAAMH,MAAM,GAAGkD,IAAI,CAACG,GAAG,CAAC,GAAGT,KAAK,CAACpE,GAAG,CAAE4E,GAAG,IAAKA,GAAG,CAAC7B,CAAC,GAAG6B,GAAG,CAACtD,CAAC,CAAC,CAAC;EAC7D,OAAO;IACLuB,CAAC,EAAEjB,IAAI,GAAG4C,GAAG;IACbzB,CAAC,EAAExB,GAAG,GAAGiD,GAAG;IACZ7C,CAAC,EAAEE,KAAK,GAAGD,IAAI,GAAG,CAAC,GAAG4C,GAAG;IACzBlD,CAAC,EAAEE,MAAM,GAAGD,GAAG,GAAG,CAAC,GAAGiD;EACxB,CAAC;AACH","ignoreList":[]}
+{"version":3,"file":"layout.js","names":["validateGraph","gridAreas","gridGutters","measureGroupTitle","measureNode","placeGroupPorts","roundLayout","routeGraph","LAYOUT_TOKENS","sizeTracks","layoutGraph","ir","measured","Map","nodes","map","node","id","titles","groups","group","areas","gutters","title","height","edges","items","axis","area","get","frame","overhang","start","row","span","rowSpan","size","h","top","bottom","col","colSpan","w","left","right","line","count","gutter","lines","rows","cols","measuredNode","areaBox","place","nodeFrame","groupArea","placeGroup","widestGutter","Math","max","leaders","viewBox","viewBoxOf","x","trackStart","y","trackEnd","stretch","visualW","visualH","depth","border","boundary","side","gutterStart","rect","dividers","labelSide","ports","centre","titleAtBottom","inner","Array","from","length","_","index","pointBox","boxes","nodeLayout","visual","groupLayout","flatMap","points","label","badge","box","pad","CONTENT_PAD","min"],"sources":["../../../../src/lib/layouts/graph/layout.ts"],"sourcesContent":["import type { Box, DiagramGraphIR, Point } from '../../model/diagram-ir.ts';\nimport { validateGraph } from '../../model/validate-graph.ts';\nimport { type CellArea, type GroupArea, gridAreas } from './areas.ts';\nimport type {\n  GraphLayout,\n  GroupLayout,\n  NodeLayout,\n} from './graph-layout-result.ts';\nimport { type Axis, type GridGutters, gridGutters } from './gutters.ts';\nimport {\n  type MeasuredGroupTitle,\n  type MeasuredNode,\n  measureGroupTitle,\n  measureNode,\n  placeGroupPorts,\n} from './measure.ts';\nimport { roundLayout } from './round.ts';\nimport { type RoutedGraph, routeGraph } from './route.ts';\nimport { LAYOUT_TOKENS } from './tokens.ts';\nimport { type TrackLine, sizeTracks } from './tracks.ts';\n\n/**\n * Lays out a graph on a content-sized grid: it measures every node, sizes\n * each row and column to the content in it, and reserves the chrome of the\n * groups in the gutters between them. It throws when the grid cannot be\n * drawn without overlap, or when an id or an edge end is wrong.\n */\nexport function layoutGraph(ir: DiagramGraphIR): GraphLayout {\n  validateGraph(ir);\n  const measured = new Map(\n    ir.nodes.map((node) => [node.id, measureNode(node)] as const),\n  );\n  const titles = new Map(\n    ir.groups.map((group) => [group.id, measureGroupTitle(group)] as const),\n  );\n  const areas = gridAreas(ir);\n  const gutters = gridGutters(\n    areas,\n    new Map([...titles].map(([id, title]) => [id, title.height])),\n    ir.edges,\n  );\n\n  const items = (axis: Axis) =>\n    ir.nodes.map((node) => {\n      const area = areas.nodes.get(node.id)!;\n      const { frame, overhang } = measured.get(node.id)!;\n      return axis === 'row'\n        ? {\n            start: area.row,\n            span: area.rowSpan,\n            size: frame.h + overhang.top + overhang.bottom,\n          }\n        : {\n            start: area.col,\n            span: area.colSpan,\n            size: frame.w + overhang.left + overhang.right,\n          };\n    });\n  const line = (axis: Axis, count: number) =>\n    sizeTracks(\n      count,\n      items(axis),\n      gutters[axis].map((gutter) => gutter.size),\n    );\n  const lines: Record<Axis, TrackLine> = {\n    row: line('row', areas.rows),\n    col: line('col', areas.cols),\n  };\n\n  const nodes: NodeLayout[] = ir.nodes.map((node) => {\n    const measuredNode = measured.get(node.id)!;\n    const area = areaBox(areas.nodes.get(node.id)!, lines);\n    return { node, ...measuredNode.place(nodeFrame(measuredNode, area)) };\n  });\n  const groups = areas.groups.map((groupArea) =>\n    placeGroup(groupArea, titles.get(groupArea.group.id)!, lines, gutters),\n  );\n\n  const widestGutter = Math.max(\n    ...[...gutters.row, ...gutters.col].map((gutter) => gutter.size),\n  );\n  const { edges, leaders } = routeGraph(\n    ir,\n    nodes,\n    groups,\n    areas,\n    2 * widestGutter,\n  );\n\n  return roundLayout({\n    nodes,\n    groups,\n    edges,\n    leaders,\n    viewBox: viewBoxOf(nodes, groups, edges, leaders),\n  });\n}\n\nfunction areaBox(area: CellArea, lines: Record<Axis, TrackLine>): Box {\n  const x = lines.col.trackStart(area.col);\n  const y = lines.row.trackStart(area.row);\n  return {\n    x,\n    y,\n    w: lines.col.trackEnd(area.col + area.colSpan - 1) - x,\n    h: lines.row.trackEnd(area.row + area.rowSpan - 1) - y,\n  };\n}\n\n/** A stretching node fills its area; any other node keeps its measured frame, centred in the area. */\nfunction nodeFrame(measured: MeasuredNode, area: Box): Box {\n  const { frame, overhang, stretch } = measured;\n  if (stretch) {\n    return {\n      x: area.x + overhang.left,\n      y: area.y + overhang.top,\n      w: area.w - overhang.left - overhang.right,\n      h: area.h - overhang.top - overhang.bottom,\n    };\n  }\n  const visualW = frame.w + overhang.left + overhang.right;\n  const visualH = frame.h + overhang.top + overhang.bottom;\n  return {\n    x: area.x + (area.w - visualW) / 2 + overhang.left,\n    y: area.y + (area.h - visualH) / 2 + overhang.top,\n    ...frame,\n  };\n}\n\n/** Each side of a group lies on the outer edge of its chrome slot in the gutter where the group opens or closes. */\nfunction placeGroup(\n  { group, depth, area }: GroupArea,\n  title: MeasuredGroupTitle,\n  lines: Record<Axis, TrackLine>,\n  gutters: GridGutters,\n): GroupLayout {\n  const border = (axis: Axis, boundary: number, side: 'opening' | 'closing') =>\n    lines[axis].gutterStart(boundary) +\n    gutters[axis][boundary]![side].get(depth)!;\n  const x = border('col', area.col, 'opening');\n  const y = border('row', area.row, 'opening');\n  const rect = {\n    x,\n    y,\n    w: border('col', area.col + area.colSpan, 'closing') - x,\n    h: border('row', area.row + area.rowSpan, 'closing') - y,\n  };\n  return {\n    group,\n    depth,\n    rect,\n    ...title.place(rect),\n    dividers: group.dividers\n      ? dividers(rect, area, title, group.labelSide, lines, gutters)\n      : [],\n    ports: placeGroupPorts(group.ports ?? [], rect),\n  };\n}\n\n/** A line through the middle of every gutter inside the group, clear of its title. */\nfunction dividers(\n  rect: Box,\n  area: CellArea,\n  title: MeasuredGroupTitle,\n  labelSide: 'top' | 'bottom' | undefined,\n  lines: Record<Axis, TrackLine>,\n  gutters: GridGutters,\n): [Point, Point][] {\n  const centre = (axis: Axis, boundary: number) =>\n    lines[axis].gutterStart(boundary) + gutters[axis][boundary]!.size / 2;\n  const titleAtBottom = labelSide === 'bottom';\n  const top = rect.y + (titleAtBottom ? 0 : title.height);\n  const bottom = rect.y + rect.h - (titleAtBottom ? title.height : 0);\n  const inner = (start: number, span: number) =>\n    Array.from({ length: span - 1 }, (_, index) => start + index + 1);\n  return [\n    ...inner(area.col, area.colSpan).map((boundary): [Point, Point] => {\n      const x = centre('col', boundary);\n      return [\n        { x, y: top },\n        { x, y: bottom },\n      ];\n    }),\n    ...inner(area.row, area.rowSpan).map((boundary): [Point, Point] => {\n      const y = centre('row', boundary);\n      return [\n        { x: rect.x, y },\n        { x: rect.x + rect.w, y },\n      ];\n    }),\n  ];\n}\n\nfunction viewBoxOf(\n  nodes: NodeLayout[],\n  groups: GroupLayout[],\n  edges: RoutedGraph['edges'],\n  leaders: RoutedGraph['leaders'],\n): Box {\n  const pointBox = ({ x, y }: Point): Box => ({ x, y, w: 0, h: 0 });\n  const boxes = [\n    ...nodes.map((nodeLayout) => nodeLayout.visual),\n    ...groups.map((groupLayout) => groupLayout.rect),\n    ...edges.flatMap(({ points, label, badge }) => [\n      ...points.map(pointBox),\n      ...(label ? [label.box] : []),\n      ...(badge ? [badge.box] : []),\n    ]),\n    ...leaders.flatMap(({ points }) => points.map(pointBox)),\n  ];\n  const pad = LAYOUT_TOKENS.CONTENT_PAD;\n  if (boxes.length === 0) return { x: -pad, y: -pad, w: 2 * pad, h: 2 * pad };\n  const left = Math.min(...boxes.map((box) => box.x));\n  const top = Math.min(...boxes.map((box) => box.y));\n  const right = Math.max(...boxes.map((box) => box.x + box.w));\n  const bottom = Math.max(...boxes.map((box) => box.y + box.h));\n  return {\n    x: left - pad,\n    y: top - pad,\n    w: right - left + 2 * pad,\n    h: bottom - top + 2 * pad,\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/lib/layouts/graph/measure.d.ts

@@ -1,6 +1,5 @@
-import type { Box, DiagramEdge, DiagramGroup, DiagramNode, DiagramSide } from '../../model/diagram-ir.ts';
-import type { NodeLayout, TextRun } from './graph-layout-result.ts';
-import type { LayoutTokens } from './tokens.ts';
+import type { Box, DiagramEdge, DiagramGroup, DiagramNode, DiagramNodePort, DiagramSide } from '../../model/diagram-ir.ts';
+import type { GroupLayout, NodeLayout, TextRun } from './graph-layout-result.ts';
 type Sides = Record<DiagramSide, number>;
 export type MeasuredNode = {
     /** The smallest frame that holds the node's content. */
@@ -15,22 +14,21 @@ export type MeasuredNode = {
     /** Positions everything the node draws, given its final frame (at least `frame`). */
     place(box: Box): Omit<NodeLayout, 'node'>;
 };
-export declare function measureNode(node: DiagramNode, tokens: LayoutTokens): MeasuredNode;
+export declare function measureNode(node: DiagramNode): MeasuredNode;
+/** A group's ports sit evenly along their side of its rect, like a node's ports along its frame. */
+export declare function placeGroupPorts(ports: DiagramNodePort[], rect: Box): NodeLayout['ports'];
 export type MeasuredGroupTitle = {
     /** The height the title reserves on its side, BAND_PAD above and below included; 0 without a label. */
     height: number;
-    place(rect: Box): {
-        band?: Box;
-        label: TextRun[];
-    };
+    place(rect: Box): Pick<GroupLayout, 'band' | 'separator' | 'label'>;
 };
-export declare function measureGroupTitle(group: DiagramGroup, tokens: LayoutTokens): MeasuredGroupTitle;
+export declare function measureGroupTitle(group: DiagramGroup): MeasuredGroupTitle;
 export type MeasuredEdgeLabel = {
     w: number;
     h: number;
     place(box: Box): TextRun[];
 };
-export declare function measureEdgeLabel(edge: DiagramEdge, tokens: LayoutTokens): MeasuredEdgeLabel;
+export declare function measureEdgeLabel(edge: DiagramEdge): MeasuredEdgeLabel;
 export type MeasuredEdgeBadge = {
     w: number;
     h: number;
@@ -39,6 +37,12 @@ export type MeasuredEdgeBadge = {
         text: TextRun[];
     };
 };
-export declare function measureEdgeBadge(edge: DiagramEdge, tokens: LayoutTokens): MeasuredEdgeBadge;
+export declare function measureEdgeBadge(edge: DiagramEdge): MeasuredEdgeBadge;
+export type MeasuredEdgeTags = {
+    label?: MeasuredEdgeLabel;
+    badge?: MeasuredEdgeBadge;
+};
+/** What an edge carries along its route: a label beside it and a badge on it, each only when the edge has one. */
+export declare function measureEdgeTags(edge: DiagramEdge): MeasuredEdgeTags;
 export {};
 //# sourceMappingURL=measure.d.ts.map

package/dist/lib/layouts/graph/measure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"measure.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/graph/measure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,GAAG,EACH,WAAW,EACX,YAAY,EACZ,WAAW,EAEX,WAAW,EACZ,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAGpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,KAAK,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG;IACzB,wDAAwD;IACxD,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,0EAA0E;IAC1E,QAAQ,EAAE,KAAK,CAAC;IAChB,qDAAqD;IACrD,OAAO,EAAE,OAAO,CAAC;IACjB,qFAAqF;IACrF,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;CAC3C,CAAC;AAWF,wBAAgB,WAAW,CACzB,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,YAAY,GACnB,YAAY,CAiDd;AA6MD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uGAAuG;IACvG,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,IAAI,EAAE,GAAG,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,OAAO,EAAE,CAAA;KAAE,CAAC;CACpD,CAAC;AAEF,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,YAAY,GACnB,kBAAkB,CAwBpB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,EAAE,CAAC;CAC5B,CAAC;AAEF,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,YAAY,GACnB,iBAAiB,CAQnB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,IAAI,EAAE,OAAO,EAAE,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,YAAY,GACnB,iBAAiB,CAiBnB"}
+{"version":3,"file":"measure.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/graph/measure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,GAAG,EACH,WAAW,EACX,YAAY,EACZ,WAAW,EACX,eAAe,EACf,WAAW,EACZ,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,OAAO,EACR,MAAM,0BAA0B,CAAC;AAKlC,KAAK,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG;IACzB,wDAAwD;IACxD,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,0EAA0E;IAC1E,QAAQ,EAAE,KAAK,CAAC;IAChB,qDAAqD;IACrD,OAAO,EAAE,OAAO,CAAC;IACjB,qFAAqF;IACrF,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;CAC3C,CAAC;AAWF,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,GAAG,YAAY,CA8D3D;AAsGD,oGAAoG;AACpG,wBAAgB,eAAe,CAC7B,KAAK,EAAE,eAAe,EAAE,EACxB,IAAI,EAAE,GAAG,GACR,UAAU,CAAC,OAAO,CAAC,CAErB;AAsGD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uGAAuG;IACvG,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC,CAAC;CACrE,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,GAAG,kBAAkB,CAkCzE;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,EAAE,CAAC;CAC5B,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,GAAG,iBAAiB,CAWrE;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,IAAI,EAAE,OAAO,EAAE,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,GAAG,iBAAiB,CAoBrE;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B,CAAC;AAEF,kHAAkH;AAClH,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,gBAAgB,CAOnE"}

package/dist/lib/layouts/graph/measure.js

@@ -1,5 +1,6 @@
 import { nodeContent } from "./node-content.js";
 import { labelLines, textBlock } from "./text-block.js";
+import { LAYOUT_TOKENS } from "./tokens.js";
 /** The distance from a port's point to its label: the port marker's radius plus a gap. */
 const PORT_LABEL_OFFSET = 8;
 const EDGE_LABEL_FRAME_PAD = 4;
@@ -10,11 +11,11 @@ const BADGE_PAD = {
 };
 const BADGE_MIN_CONTENT = 24;
 const SIDES = ['top', 'right', 'bottom', 'left'];
-export function measureNode(node, tokens) {
+export function measureNode(node) {
   const kind = node.kind ?? 'node';
   if (node.hidden && kind === 'node') return hiddenNode();
-  const content = nodeContent(node, tokens);
-  const ports = portGeometry(node.ports ?? [], tokens);
+  const content = nodeContent(node);
+  const ports = portGeometry(node.ports ?? []);
   const w = Math.max(content.w + 2 * content.pad.x + ports.inset.left + ports.inset.right, ports.minLength.top, ports.minLength.bottom);
   const h = Math.max(content.h + 2 * content.pad.y + ports.inset.top + ports.inset.bottom, ports.minLength.left, ports.minLength.right);
   const place = box => {
@@ -24,13 +25,13 @@ export function measureNode(node, tokens) {
       left: content.pad.x,
       right: content.pad.x
     });
-    const frames = stackFrames(node, box, tokens);
-    const caption = placeCaption(node, union([box, ...frames]), tokens);
+    const frames = stackFrames(node, box);
+    const caption = placeCaption(node, union([box, ...frames]));
     return {
       box,
       visual: union([box, ...frames, ...(caption ? [caption.box] : [])]),
       frames,
-      radius: frameRadius(node, box, tokens),
+      radius: frameRadius(node, box),
       ...content.place(inner),
       ...(caption ? {
         caption
@@ -39,25 +40,43 @@ export function measureNode(node, tokens) {
     };
   };
   const {
-    visual
+    visual,
+    frames
   } = place({
     x: 0,
     y: 0,
     w,
     h
   });
+  const outside = outer => ({
+    top: 0 - outer.y,
+    left: 0 - outer.x,
+    bottom: outer.y + outer.h - h,
+    right: outer.x + outer.w - w
+  });
+  const stack = outside(union([{
+    x: 0,
+    y: 0,
+    w,
+    h
+  }, ...frames]));
+  const all = outside(visual);
+  // A caption reserves its room on both sides of the frame, so the frames of a row (or column) stay on one centre line whichever side their captions hang.
+  const caption = (a, b) => Math.max(all[a] - stack[a], all[b] - stack[b]);
+  const vertical = caption('top', 'bottom');
+  const horizontal = caption('left', 'right');
   return {
     frame: {
       w,
       h
     },
     overhang: {
-      top: 0 - visual.y,
-      left: 0 - visual.x,
-      bottom: visual.y + visual.h - h,
-      right: visual.x + visual.w - w
+      top: stack.top + vertical,
+      bottom: stack.bottom + vertical,
+      left: stack.left + horizontal,
+      right: stack.right + horizontal
     },
-    stretch: kind === 'node' && (node.stretch ?? true),
+    stretch: kind === 'node',
     place
   };
 }
@@ -85,7 +104,7 @@ function hiddenNode() {
     })
   };
 }
-function frameRadius(node, box, tokens) {
+function frameRadius(node, box) {
   switch (node.kind) {
     case 'connector':
       return box.h / 2;
@@ -97,7 +116,7 @@ function frameRadius(node, box, tokens) {
       return 0;
     default:
       if (node.frame === 'none') return 0;
-      return node.frame === 'flat' ? tokens.FLAT_RADIUS : tokens.RADIUS;
+      return node.frame === 'flat' ? LAYOUT_TOKENS.FLAT_RADIUS : LAYOUT_TOKENS.RADIUS;
   }
 }
 
@@ -106,8 +125,8 @@ function frameRadius(node, box, tokens) {
  * side's labels push the content inward, and a side with k ports is long
  * enough for k + 1 port spacings.
  */
-function portGeometry(ports, tokens) {
-  const font = tokens.fonts.portLabel;
+function portGeometry(ports) {
+  const font = LAYOUT_TOKENS.fonts.portLabel;
   const bySide = new Map(SIDES.map(side => [side, ports.filter(port => port.side === side).map(port => ({
     port,
     label: port.label ? textBlock(labelLines(port.label, port.accent ? 'accent' : undefined), font) : undefined
@@ -126,7 +145,7 @@ function portGeometry(ports, tokens) {
     const count = bySide.get(side).length;
     if (count === 0) return 0;
     const labelLength = side === 'top' || side === 'bottom' ? widest(side) : tallest(side);
-    const pitch = Math.max(tokens.PORT_SPACING, labelLength + tokens.LABEL_GAP);
+    const pitch = Math.max(LAYOUT_TOKENS.PORT_SPACING, labelLength + LAYOUT_TOKENS.LABEL_GAP);
     return (count + 1) * pitch;
   };
   return {
@@ -154,6 +173,11 @@ function portGeometry(ports, tokens) {
   };
 }
 
+/** A group's ports sit evenly along their side of its rect, like a node's ports along its frame. */
+export function placeGroupPorts(ports, rect) {
+  return portGeometry(ports).place(rect);
+}
+
 /** The point `fraction` of the way along `side` of `box`. */
 function portPoint(box, side, fraction) {
   switch (side) {
@@ -193,13 +217,13 @@ function placePortLabel(label, point, side) {
 }
 
 /** The back frames of a stack, farthest first, each one STACK_STEP further in the stack direction. */
-function stackFrames(node, box, tokens) {
+function stackFrames(node, box) {
   const count = Math.max(1, Math.floor(node.stack ?? 1));
   const kind = node.kind ?? 'node';
   if (count === 1 || kind !== 'node' || node.frame === 'none') return [];
   const direction = node.stackDirection ?? 'up-left';
-  const dx = (direction.endsWith('left') ? -1 : 1) * tokens.STACK_STEP.x;
-  const dy = (direction.startsWith('up') ? -1 : 1) * tokens.STACK_STEP.y;
+  const dx = (direction.endsWith('left') ? -1 : 1) * LAYOUT_TOKENS.STACK_STEP.x;
+  const dy = (direction.startsWith('up') ? -1 : 1) * LAYOUT_TOKENS.STACK_STEP.y;
   return Array.from({
     length: count - 1
   }, (_, index) => {
@@ -213,8 +237,8 @@ function stackFrames(node, box, tokens) {
 }
 
 /** The caption sits beside `box`, the frame together with its stacked back frames. */
-function placeCaption(node, box, tokens) {
-  const font = tokens.fonts.caption;
+function placeCaption(node, box) {
+  const font = LAYOUT_TOKENS.fonts.caption;
   const lines = textBlock(labelLines([node.caption ?? []].flat().map(line => line.trim()), node.captionColor), font);
   if (lines.h === 0) return undefined;
   const framed = node.captionFrame ?? false;
@@ -227,7 +251,7 @@ function placeCaption(node, box, tokens) {
   };
   const w = lines.w + 2 * pad.x;
   const h = lines.h + 2 * pad.y;
-  const gap = tokens.CAPTION_GAP;
+  const gap = LAYOUT_TOKENS.CAPTION_GAP;
   const side = node.captionSide ?? 'bottom';
   const centreX = box.x + (box.w - w) / 2;
   const centreY = box.y + (box.h - h) / 2;
@@ -272,9 +296,9 @@ function placeCaption(node, box, tokens) {
     text
   };
 }
-export function measureGroupTitle(group, tokens) {
-  const lines = textBlock(labelLines(group.label), tokens.fonts.groupLabel);
-  const height = lines.h > 0 ? lines.h + 2 * tokens.BAND_PAD : 0;
+export function measureGroupTitle(group) {
+  const lines = textBlock(labelLines(group.label), LAYOUT_TOKENS.fonts.groupLabel);
+  const height = lines.h > 0 ? lines.h + 2 * LAYOUT_TOKENS.BAND_PAD : 0;
   return {
     height,
     place(rect) {
@@ -282,32 +306,41 @@ export function measureGroupTitle(group, tokens) {
         label: []
       };
       const y = group.labelSide === 'bottom' ? rect.y + rect.h - height : rect.y;
-      const top = y + tokens.BAND_PAD;
+      const top = y + LAYOUT_TOKENS.BAND_PAD;
       const align = group.labelAlign ?? 'center';
       let label;
       if (align === 'start') {
-        label = lines.place(rect.x + tokens.PAD_X, top, 'start');
+        label = lines.place(rect.x + LAYOUT_TOKENS.PAD_X, top, 'start');
       } else if (align === 'end') {
-        label = lines.place(rect.x + rect.w - tokens.PAD_X, top, 'end');
+        label = lines.place(rect.x + rect.w - LAYOUT_TOKENS.PAD_X, top, 'end');
       } else {
         label = lines.place(rect.x + rect.w / 2, top, 'middle');
       }
-      return group.titleBand ? {
+      if (!group.titleBand) return {
+        label
+      };
+      const edge = group.labelSide === 'bottom' ? y : y + height;
+      return {
         band: {
           x: rect.x,
           y,
           w: rect.w,
           h: height
         },
-        label
-      } : {
+        separator: [{
+          x: rect.x,
+          y: edge
+        }, {
+          x: rect.x + rect.w,
+          y: edge
+        }],
         label
       };
     }
   };
 }
-export function measureEdgeLabel(edge, tokens) {
-  const lines = textBlock(labelLines(edge.label), tokens.fonts.edgeLabel);
+export function measureEdgeLabel(edge) {
+  const lines = textBlock(labelLines(edge.label), LAYOUT_TOKENS.fonts.edgeLabel);
   const pad = edge.labelFrame ? EDGE_LABEL_FRAME_PAD : 0;
   return {
     w: lines.w + 2 * pad,
@@ -315,10 +348,10 @@ export function measureEdgeLabel(edge, tokens) {
     place: box => lines.place(box.x + box.w / 2, box.y + pad, 'middle')
   };
 }
-export function measureEdgeBadge(edge, tokens) {
-  const lines = textBlock(labelLines(edge.badgeLabel), tokens.fonts.badge);
-  const icon = edge.badgeIcon ? tokens.BADGE_ICON : 0;
-  const gap = icon > 0 && lines.w > 0 ? tokens.BLOCK_GAP : 0;
+export function measureEdgeBadge(edge) {
+  const lines = textBlock(labelLines(edge.badgeLabel), LAYOUT_TOKENS.fonts.badge);
+  const icon = edge.badgeIcon ? LAYOUT_TOKENS.BADGE_ICON : 0;
+  const gap = icon > 0 && lines.w > 0 ? LAYOUT_TOKENS.BLOCK_GAP : 0;
   const rowW = icon + gap + lines.w;
   return {
     w: Math.max(BADGE_MIN_CONTENT, rowW) + 2 * BADGE_PAD.x,
@@ -341,6 +374,17 @@ export function measureEdgeBadge(edge, tokens) {
     }
   };
 }
+/** What an edge carries along its route: a label beside it and a badge on it, each only when the edge has one. */
+export function measureEdgeTags(edge) {
+  return {
+    ...(edge.label?.length ? {
+      label: measureEdgeLabel(edge)
+    } : {}),
+    ...(edge.badgeIcon || edge.badgeLabel?.length ? {
+      badge: measureEdgeBadge(edge)
+    } : {})
+  };
+}
 function sidesOf(value) {
   return {
     top: value('top'),