@rse/gradia 1.3.0 → 1.4.0

package/dst/gradia-api-render-svg.js

@@ -5,8 +5,8 @@
 */
 /*  external dependencies  */
 import UUID from "pure-uuid";
-import { resolveFont, cssValueOf } from "./gradia-api-config.js";
-import { FS_NAME, FS_TYPE, FS_ATTR, FS_EDGE, FS_ARITY, FS_GROUP, ARITY_OFF, textWidth, escapeXML } from "./gradia-api-render-base.js";
+import { resolveFont, cssValueOf, cssSizeOf } from "./gradia-api-config.js";
+import { FS_GROUP, ARITY_OFF, ARITY_PAD, arityHeight, textWidth, escapeXML } from "./gradia-api-render-base.js";
 import { linesOfNode, urlOf, typeOf, defaultStyleOf, containerHead, MIN_H, NAME_H, ATTR_H, ATTR_P, TYPE_H, TYPE_D, HEAD_H } from "./gradia-api-render-node.js";
 import { computeHops, pathOf, pointAt } from "./gradia-api-render-edge.js";
 /*  escape a string for use inside a CSS string literal (the XML escaping
@@ -32,13 +32,20 @@ const TAG_DX = 18; /*  left offset of the group tag  */
 const TAG_DY = 12; /*  top offset of the group tag   */
 /*  the half width of the box an edge line segment occupies  */
 const LINE_PAD = 2;
+/*  the clearance a label keeps from a foreign edge line, as a label
+    merely not overlapping such a line still reads as its annotation  */
+const LINE_GAP = 12;
+/*  the gap between two arity labels set back one behind the other along
+    one and the same edge line, and the number of such setbacks tried  */
+const ARITY_STEP = 8;
+const ARITY_BACK = 3;
 /*  track occupied areas (node boxes and already placed labels) to
     let subsequent labels dodge into a collision-free position, and the
     edge lines (their segments and crossing hops) to let the labels at
     least prefer the position covering the fewest lines (the returned
     "occupied" array grows with every claimed label box and hence also
     serves as the box input of the overall bounding box)  */
-const labelPlacer = (layout, hops, hopRadius) => {
+const labelPlacer = (layout, hops, hopRadius, config) => {
     const { nodes, cx, cy, boxW, boxH } = layout;
     const occupied = nodes.map((node) => [
         cx(node.id) - boxW.get(node.id) / 2, cy(node.id) - boxH.get(node.id) / 2,
@@ -50,27 +57,41 @@ const labelPlacer = (layout, hops, hopRadius) => {
             group.x + TAG_DX + textWidth(group.name, FS_GROUP), group.y + TAG_DY + FS_GROUP * 1.2]);
     for (const c of layout.containers ?? [])
         occupied.push([c.x + TAG_DX, c.y + TAG_DY,
-            c.x + TAG_DX + textWidth(c.node.name, FS_GROUP), c.y + containerHead(c.node)]);
-    /*  collect the edge line segments and the hops bulging above them  */
-    const lines = [];
-    layout.polys.forEach((poly, i) => {
+            c.x + TAG_DX + textWidth(c.node.name, FS_GROUP), c.y + containerHead(c.node, config)]);
+    /*  collect the edge line segments and the hops bulging above them,
+        kept per edge, so a label can tell its own route from the foreign ones  */
+    const lines = layout.polys.map((poly, i) => {
+        const boxes = [];
         for (let k = 0; k < poly.length - 1; k++) {
             const [a, b] = [poly[k], poly[k + 1]];
-            lines.push([Math.min(a[0], b[0]) - LINE_PAD, Math.min(a[1], b[1]) - LINE_PAD,
+            boxes.push([Math.min(a[0], b[0]) - LINE_PAD, Math.min(a[1], b[1]) - LINE_PAD,
                 Math.max(a[0], b[0]) + LINE_PAD, Math.max(a[1], b[1]) + LINE_PAD]);
             for (const hx of hops[i].get(k) ?? [])
-                lines.push([hx - hopRadius, a[1] - hopRadius, hx + hopRadius, a[1]]);
+                boxes.push([hx - hopRadius, a[1] - hopRadius, hx + hopRadius, a[1]]);
         }
+        return boxes;
     });
+    const lineCount = lines.reduce((n, boxes) => n + boxes.length, 0);
     /*  claim the candidate box colliding with the fewest occupied
         areas and, among those, with the fewest edge lines (earlier
-        candidates win ties, so the first collision-free one is taken)  */
+        candidates win ties, so the first collision-free one is taken),
+        where the own edge lines count on touch only, as the label sits
+        beside its own route by construction, while the foreign ones
+        count already within a clearance, so a label hugging a foreign
+        line loses against one staying with its own edge. A claim with
+        "dodge" unset weighs the lines not at all, as its candidates are
+        ordered by a proximity which matters more than a crossed line,
+        which the halo of the label keeps readable anyway  */
     const collisions = (boxes, box) => boxes.filter((o) => box[0] < o[2] && box[2] > o[0] && box[1] < o[3] && box[3] > o[1]).length;
-    const claim = (candidates) => {
+    const crossings = (box, edge) => {
+        const near = [box[0] - LINE_GAP, box[1] - LINE_GAP, box[2] + LINE_GAP, box[3] + LINE_GAP];
+        return lines.reduce((n, boxes, i) => n + collisions(boxes, i === edge ? box : near), 0);
+    };
+    const claim = (candidates, edge, dodge = true) => {
         let box = candidates[0];
         let lowest = Infinity;
         for (const c of candidates) {
-            const score = collisions(occupied, c) * (lines.length + 1) + collisions(lines, c);
+            const score = collisions(occupied, c) * (lineCount + 1) + (dodge ? crossings(c, edge) : 0);
             if (score < lowest) {
                 box = c;
                 lowest = score;
@@ -101,24 +122,25 @@ const renderNode = (node, layout, style, styler, config) => {
         the optional type lines shifting the name and attributes down and
         the additional wrapped name lines shifting the attributes down  */
     const ty = cy(node.id) - contentH.get(node.id) / 2;
-    const th = lines.type.length * TYPE_H;
-    const nh = (lines.name.length - 1) * NAME_H;
+    const th = lines.type.length * TYPE_H(config);
+    const nh = (lines.name.length - 1) * NAME_H(config);
+    const asc = config["size-font-node"] * 0.36;
     const nameY = lines.attrs.length > 0 ?
-        ty + th + MIN_H / 2 + FS_NAME * 0.36 : cy(node.id) + th / 2 + FS_NAME * 0.36 - nh / 2;
+        ty + th + MIN_H(config) / 2 + asc : cy(node.id) + th / 2 + asc - nh / 2;
     lines.type.forEach((line, k) => {
         parts.push(`<text x="${cx(node.id)}" ` +
-            `y="${nameY - TYPE_D - (lines.type.length - 1 - k) * TYPE_H}" ` +
-            `class="${styler.text(style.text, FS_TYPE, { middle: true })}">${escapeXML(line)}</text>`);
+            `y="${nameY - TYPE_D(config) - (lines.type.length - 1 - k) * TYPE_H(config)}" ` +
+            `class="${styler.text(style.text, "size-font-type", { middle: true })}">${escapeXML(line)}</text>`);
     });
     lines.name.forEach((line, k) => {
-        parts.push(`<text x="${cx(node.id)}" y="${nameY + k * NAME_H}" ` +
-            `class="${styler.text(style.text, FS_NAME, { bold: true, middle: true })}">` +
+        parts.push(`<text x="${cx(node.id)}" y="${nameY + k * NAME_H(config)}" ` +
+            `class="${styler.text(style.text, "size-font-node", { bold: true, middle: true })}">` +
             `${escapeXML(line)}</text>`);
     });
     lines.attrs.forEach((line, k) => {
         parts.push(`<text x="${cx(node.id)}" ` +
-            `y="${ty + th + nh + MIN_H + ATTR_P + k * ATTR_H}" ` +
-            `class="${styler.text(style.text, FS_ATTR, { middle: true })}">${escapeXML(line)}</text>`);
+            `y="${ty + th + nh + MIN_H(config) + ATTR_P + k * ATTR_H(config)}" ` +
+            `class="${styler.text(style.text, "size-font-prop", { middle: true })}">${escapeXML(line)}</text>`);
     });
     if (url === undefined)
         return parts;
@@ -157,56 +179,63 @@ const viewBoxOf = (layout, boxes, margin) => {
     optional name, placed near the middle of the route, and its optional
     arity, placed near the arrow head (both dodging into a collision-free
     position through the "claim" of the label placer)  */
-const renderEdgeLabels = (edge, poly, claim, styler) => {
+const renderEdgeLabels = (edge, poly, claim, styler, config) => {
     const parts = [];
     if (edge.name !== undefined) {
-        const w = textWidth(edge.name, FS_EDGE);
+        const w = textWidth(edge.name, config["size-font-edge"]);
+        const h = config["size-font-edge"] + 4;
         const candidates = [];
         for (const f of [0.50, 0.40, 0.60, 0.30, 0.70, 0.20, 0.80]) {
             const p = pointAt(poly, f);
             if (p.horizontal) {
-                candidates.push([p.x - w / 2, p.y - 23, p.x + w / 2, p.y - 3]);
-                candidates.push([p.x - w / 2, p.y + 3, p.x + w / 2, p.y + 23]);
+                candidates.push([p.x - w / 2, p.y - 3 - h, p.x + w / 2, p.y - 3]);
+                candidates.push([p.x - w / 2, p.y + 3, p.x + w / 2, p.y + 3 + h]);
             }
             else {
-                candidates.push([p.x + 5, p.y - 10, p.x + 5 + w, p.y + 10]);
-                candidates.push([p.x - 5 - w, p.y - 10, p.x - 5, p.y + 10]);
+                candidates.push([p.x + 5, p.y - h / 2, p.x + 5 + w, p.y + h / 2]);
+                candidates.push([p.x - 5 - w, p.y - h / 2, p.x - 5, p.y + h / 2]);
             }
         }
         const box = claim(candidates);
         parts.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" ` +
-            `class="${styler.text("color-edge-name", FS_EDGE, { middle: true, halo: true })}">` +
+            `class="${styler.text("color-edge-name", "size-font-edge", { middle: true, halo: true })}">` +
             `${escapeXML(edge.name)}</text>`);
     }
     if (edge.arity !== undefined) {
-        const w = textWidth(edge.arity, FS_ARITY);
+        const w = textWidth(edge.arity, config["size-font-arity"]);
+        const h = arityHeight(config);
         const p = pointAt(poly, 1.0);
         const prev = pointAt(poly, 0.999);
         /*  set the arity back from the arrow head along the final
             segment and place it beside the line, so an edge approaching
-            vertically keeps its arity next to its own arrow  */
-        let candidates;
-        if (p.horizontal) {
-            const dx = Math.sign(p.x - prev.x) || 1;
-            const ax = p.x - dx * (ARITY_OFF + w / 2);
-            candidates = [
-                [ax - w / 2, p.y - 17, ax + w / 2, p.y - 4],
-                [ax - w / 2, p.y + 4, ax + w / 2, p.y + 17],
-                [ax - w / 2 - dx * 14, p.y - 17, ax + w / 2 - dx * 14, p.y - 4]
-            ];
-        }
-        else {
-            const dy = Math.sign(p.y - prev.y) || 1;
-            const ay = p.y - dy * ARITY_OFF;
-            candidates = [
-                [p.x + 6, ay - 7, p.x + 6 + w, ay + 6],
-                [p.x - 6 - w, ay - 7, p.x - 6, ay + 6],
-                [p.x + 6, ay - 7 - dy * 14, p.x + 6 + w, ay + 6 - dy * 14]
-            ];
+            vertically keeps its arity next to its own arrow, offering
+            both sides at every further setback, which steps by the label
+            extent along the segment, as a shorter step would leave the
+            label on top of the very label it dodges  */
+        const candidates = [];
+        for (let k = 0; k < ARITY_BACK; k++) {
+            const back = k * ((p.horizontal ? w : h) + ARITY_STEP);
+            if (p.horizontal) {
+                const dx = Math.sign(p.x - prev.x) || 1;
+                const ax = p.x - dx * (ARITY_OFF + w / 2 + back);
+                candidates.push([ax - w / 2, p.y - ARITY_PAD - h, ax + w / 2, p.y - ARITY_PAD]);
+                candidates.push([ax - w / 2, p.y + ARITY_PAD, ax + w / 2, p.y + ARITY_PAD + h]);
+            }
+            else {
+                const dy = Math.sign(p.y - prev.y) || 1;
+                const ay = p.y - dy * (ARITY_OFF + back);
+                candidates.push([p.x + 6, ay + 6 - h, p.x + 6 + w, ay + 6]);
+                candidates.push([p.x - 6 - w, ay + 6 - h, p.x - 6, ay + 6]);
+            }
         }
-        const box = claim(candidates);
+        /*  an arity claims its position without dodging the edge lines,
+            as the neighboring ports of a node run closer than any
+            clearance anyway and it is the very setback from its own
+            arrow head which attaches it to its edge, so a line crossed
+            beneath its halo weighs less than a drift away from that arrow  */
+        const box = claim(candidates, false);
         parts.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" ` +
-            `class="${styler.text("color-edge-arity", FS_ARITY, { middle: true, halo: true })}">` +
+            `class="${styler.text("color-edge-arity", "size-font-arity", { middle: true, halo: true })}">` +
             `${escapeXML(edge.arity)}</text>`);
     }
     return parts;
@@ -223,7 +252,7 @@ const renderGroup = (group, styler) => [
     in the top-left corner, with the optional type line above the name
     (a container with a "url" attribute becomes a hyperlink covering
     the whole box)  */
-const renderContainer = (c, styler) => {
+const renderContainer = (c, styler, config) => {
     const type = typeOf(c.node);
     const url = urlOf(c.node);
     const parts = [
@@ -231,10 +260,10 @@ const renderContainer = (c, styler) => {
             `class="${styler.box("color-container-box", "color-container-border", 3)}" ` +
             "stroke-dasharray=\"10 6\"/>",
         ...(type !== undefined ? [
-            `<text x="${c.x + TAG_DX}" y="${c.y + TAG_DY + FS_TYPE}" ` +
-                `class="${styler.text("color-container-name", FS_TYPE)}">${escapeXML(type)}</text>`
+            `<text x="${c.x + TAG_DX}" y="${c.y + TAG_DY + config["size-font-type"]}" ` +
+                `class="${styler.text("color-container-name", "size-font-type")}">${escapeXML(type)}</text>`
         ] : []),
-        `<text x="${c.x + TAG_DX}" y="${c.y + containerHead(c.node) - HEAD_H + TAG_DY + FS_GROUP}" ` +
+        `<text x="${c.x + TAG_DX}" y="${c.y + containerHead(c.node, config) - HEAD_H + TAG_DY + FS_GROUP}" ` +
             `class="${styler.text("color-container-name", FS_GROUP, { bold: true })}">` +
             `${escapeXML(c.node.name)}</text>`
     ];
@@ -275,7 +304,8 @@ export const renderSVG = (layout, config, explicit, seed) => {
         return name;
     };
     const styler = {
-        text: (fill, size, options = {}) => classOf(`font-family: ${font}; font-size: ${size}px; ` +
+        text: (fill, size, options = {}) => classOf(`font-family: ${font}; ` +
+            `font-size: ${typeof size === "number" ? `${size}px` : cssSizeOf(config, size)}; ` +
             (options.bold ? "font-weight: 600; " : "") +
             (options.middle ? "text-anchor: middle; " : "") +
             `fill: ${color(fill)}` +
@@ -288,14 +318,14 @@ export const renderSVG = (layout, config, explicit, seed) => {
     /*  detect the edge crossings requiring rendered hops  */
     const hops = computeHops(polys);
     /*  prepare the collision-free placement of the edge labels  */
-    const { claim, occupied } = labelPlacer(layout, hops, config["size-edge-hop-radius"]);
+    const { claim, occupied } = labelPlacer(layout, hops, config["size-edge-hop-radius"], config);
     /*  generate the SVG fragments for the edges (paths below, labels above)  */
     const svgEdges = [];
     const svgLabels = [];
     edges.forEach((edge, i) => {
         svgEdges.push(`<path d="${pathOf(polys[i], hops[i], config["size-edge-corner-radius"], config["size-edge-hop-radius"])}" ` +
             `class="${classEdge}" marker-end="url(#${idArrow})"/>`);
-        svgLabels.push(...renderEdgeLabels(edge, polys[i], claim, styler));
+        svgLabels.push(...renderEdgeLabels(edge, polys[i], (c, dodge) => claim(c, i, dodge), styler, config));
     });
     /*  generate the SVG fragments for the node boxes  */
     const svgNodes = nodes.flatMap((node) => renderNode(node, layout, styleOf(node), styler, config));
@@ -303,7 +333,7 @@ export const renderSVG = (layout, config, explicit, seed) => {
         everything else) and the container boxes (drawn below the edges
         and nodes, an outer box before its nested ones)  */
     const svgGroups = groups.flatMap((group) => renderGroup(group, styler));
-    const svgContainers = containers.flatMap((c) => renderContainer(c, styler));
+    const svgContainers = containers.flatMap((c) => renderContainer(c, styler, config));
     /*  determine the overall bounding box of all rendered elements  */
     const groupBoxes = groups.map((group) => [group.x, group.y, group.x + group.w, group.y + group.h]);
     const containerBoxes = containers.map((c) => [c.x, c.y, c.x + c.w, c.y + c.h]);

package/dst/gradia-api-type-graph.js

@@ -5,9 +5,9 @@
 */
 /*  external dependencies  */
 import { DagreLayout } from "@antv/layout";
-import { FS_EDGE, FS_ARITY, ARITY_OFF, textWidth } from "./gradia-api-render-base.js";
+import { ARITY_OFF, textWidth } from "./gradia-api-render-base.js";
 import { measureNodes, orderOf } from "./gradia-api-render-node.js";
-import { simplifyPoly, assignPorts, assignTracks, computeHops } from "./gradia-api-render-edge.js";
+import { simplifyPoly, assignPorts, assignTracks, computeHops, portGapOf, PORT_PAD } from "./gradia-api-render-edge.js";
 /*  rendering geometry constants  */
 const CLUSTX = 26; /*  max X distance within a grid column         */
 const CLUSTY = 72; /*  max Y distance within a grid row            */
@@ -255,7 +255,7 @@ const trackChans = (plan) => plan.gate === "t" ? [plan.chans[0]] : plan.gate ===
     its one, and, if those differ, the gutter next to the target row
     connects them (an edge whose gate end lies beyond that gutter ends
     in the gutter itself, as the gate merely marks the border passage)  */
-const planRoutes = (edges, col, row, sides, gates) => {
+const planRoutes = (edges, col, row, sides, gates, config) => {
     const flag = (from, to) => ({ mirror: from === "r", hairpin: from === to });
     const plans = edges.map((edge, i) => {
         /*  a self-loop detours as a hairpin through the channel beside
@@ -303,11 +303,11 @@ const planRoutes = (edges, col, row, sides, gates) => {
         if (source === target)
             return;
         if (name !== undefined && plan.chans.length === 1)
-            chanNeed(plan.chans[0], textWidth(name, FS_EDGE) + 2 * CHAN_LBL);
+            chanNeed(plan.chans[0], textWidth(name, config["size-font-edge"]) + 2 * CHAN_LBL);
         else if (name !== undefined && plan.guts.length > 0)
             gutLbl.set(plan.guts[0], (gutLbl.get(plan.guts[0]) ?? 0) + 1);
         if (arity !== undefined)
-            chanNeed(chans[chans.length - 1], ARITY_OFF + textWidth(arity, FS_ARITY) + CHAN_LBL);
+            chanNeed(chans[chans.length - 1], ARITY_OFF + textWidth(arity, config["size-font-arity"]) + CHAN_LBL);
     });
     /*  count the self-loops of every node, as their detours stack up
         above its box and have to fit into the gutter above its row
@@ -481,9 +481,10 @@ const routePolys = (edges, plans, portPos, boxH, cy, chanX, gutY) => {
     orthogonal polyline through the channels between the columns and
     the gutters between the rows  */
 const routeEdges = (edges, plans, sides, boxW, boxH, cx, cy, grid, config, level) => {
-    const portPre = assignPorts(edges, sides, cx, cy, boxW, boxH, config["size-edge-port-gap"], undefined, level.fixedPort);
+    const portGap = portGapOf(edges, config);
+    const portPre = assignPorts(edges, sides, cx, cy, boxW, boxH, portGap, undefined, level.fixedPort);
     const trackPre = assignTrackCoords(edges, plans, portPre, grid, config);
-    const portPos = assignPorts(edges, sides, cx, cy, boxW, boxH, config["size-edge-port-gap"], (edge) => plans[edge].guts.length > 0 ?
+    const portPos = assignPorts(edges, sides, cx, cy, boxW, boxH, portGap, (edge) => plans[edge].guts.length > 0 ?
         trackPre.gutY(plans[edge].guts[0], edge) : undefined, level.fixedPort);
     const { chanX, gutY } = assignTrackCoords(edges, plans, portPos, grid, config);
     const polys = routePolys(edges, plans, portPos, boxH, cy, chanX, gutY);
@@ -586,12 +587,14 @@ const attachSides = (edges, col, level) => edges.map((edge, i) => {
     const t = level.fixedPort?.(i, "t") !== undefined ? "w" : sc < tc ? "w" : "e";
     return { s, t };
 });
-/*  grow every box whose edge attachments exceed the configured
-    per-side maximum, step-wise by one port separation per
-    additional edge, so the edges keep enough attachment room
-    without a fixed height increase (the fixed-size boxes of a
-    containment level are exempt)  */
+/*  grow every box up to the height hosting all of its edge
+    attachments at the full port separation, and the one whose
+    attachments exceed the configured per-side maximum additionally
+    step-wise by one separation per additional edge, so the ports of a
+    node never pack tighter than configured, however small its content
+    height is (the fixed-size boxes of a containment level are exempt)  */
 const growBoxes = (nodes, edges, sides, boxH, config, level) => {
+    const portGap = portGapOf(edges, config);
     const portCnt = new Map();
     edges.forEach((edge, i) => {
         portCnt.set(`${sides[i].s}:${edge.source}`, (portCnt.get(`${sides[i].s}:${edge.source}`) ?? 0) + 1);
@@ -601,9 +604,8 @@ const growBoxes = (nodes, edges, sides, boxH, config, level) => {
         if (level.fixedSize?.has(node.id))
             continue;
         const cnt = Math.max(portCnt.get(`w:${node.id}`) ?? 0, portCnt.get(`e:${node.id}`) ?? 0);
-        if (cnt > config["graph-node-degree-max"])
-            boxH.set(node.id, boxH.get(node.id) +
-                (cnt - config["graph-node-degree-max"]) * config["size-edge-port-gap"]);
+        const extra = Math.max(0, cnt - config["graph-node-degree-max"]);
+        boxH.set(node.id, Math.max(boxH.get(node.id) + extra * portGap, cnt * portGap + PORT_PAD));
     }
 };
 /*  lay out a directed graph model (for a containment level: with the
@@ -699,12 +701,12 @@ export const render = async (graph, config, level = {}) => {
     /*  plan the coarse channel/gutter route of every edge (a west side
         attachment in the first column needs a channel left of it, so
         the whole grid is shifted one column to the right then)  */
-    let routes = planRoutes(edges, col, row, sides, gates);
+    let routes = planRoutes(edges, col, row, sides, gates, config);
     if (routes.plans.some((plan) => plan.chans.some((c) => c < 0))) {
         for (const node of nodes)
             col.set(node.id, col.get(node.id) + 1);
         ncols++;
-        routes = planRoutes(edges, col, row, sides, gates);
+        routes = planRoutes(edges, col, row, sides, gates, config);
     }
     const { plans, chanCnt, gutCnt, chanLbl, gutLbl, gutLoop } = routes;
     /*  grow the boxes by their edge attachment needs  */

package/dst/gradia-api-type-hub.js

@@ -3,9 +3,9 @@
 **  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
 **  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
 */
-import { FS_ARITY, ARITY_OFF, textWidth } from "./gradia-api-render-base.js";
+import { ARITY_OFF, textWidth } from "./gradia-api-render-base.js";
 import { isPrimary, measureNodes, defaultStyleOf } from "./gradia-api-render-node.js";
-import { simplifyPoly, assignPorts, assignTracks } from "./gradia-api-render-edge.js";
+import { simplifyPoly, assignPorts, assignTracks, portGapOf, PORT_PAD } from "./gradia-api-render-edge.js";
 /*  the separator between a node id and its placement suffix,
     distinguishing the two clones of a twice-placed node and the
     output clone of a self-referencing primary node  */
@@ -106,13 +106,16 @@ export const render = async (graph, config, level = {}) => {
         from the input toward the output column (see classifyTopology),
         hence leaves on the east and enters on the west side  */
     const sides = edges.map(() => ({ s: "e", t: "w" }));
-    /*  determine node box sizes from their textual content (all boxes at
-        half height scale), then grow every box whose edge attachments
-        exceed the configured per-side maximum, step-wise by one port
-        separation per additional edge, so the edges keep enough
-        attachment room without a fixed height increase (the fixed-size
-        boxes of a containment level are exempt)  */
+    /*  determine node box sizes from their textual content (all boxes
+        at half height scale), then grow every box up to the height
+        hosting all of its edge attachments at the full port separation,
+        and the one whose attachments exceed the configured per-side
+        maximum additionally step-wise by one separation per additional
+        edge, so the ports of a node never pack tighter than configured,
+        however small its content height is (the fixed-size boxes of a
+        containment level are exempt)  */
     const { boxW, boxH, contentH } = measureNodes(nodes, config, () => scale / 2, level.fixedSize);
+    const portGap = portGapOf(edges, config);
     const portCnt = new Map();
     edges.forEach((edge, i) => {
         portCnt.set(`${sides[i].s}:${edge.source}`, (portCnt.get(`${sides[i].s}:${edge.source}`) ?? 0) + 1);
@@ -122,20 +125,27 @@ export const render = async (graph, config, level = {}) => {
         if (level.fixedSize?.has(node.id))
             continue;
         const cnt = Math.max(portCnt.get(`w:${node.id}`) ?? 0, portCnt.get(`e:${node.id}`) ?? 0);
-        if (cnt > config["hub-node-degree-max"])
-            boxH.set(node.id, boxH.get(node.id) +
-                (cnt - config["hub-node-degree-max"]) * config["size-edge-port-gap"]);
+        const extra = Math.max(0, cnt - config["hub-node-degree-max"]);
+        boxH.set(node.id, Math.max(boxH.get(node.id) + extra * portGap, cnt * portGap + PORT_PAD));
     }
     /*  a stack of more nodes than the configured maximum wraps into two
         staggered sub-columns: its nodes alternate between the outer
         sub-column and the inner one (adjacent to the channel), and
         every outer node is vertically centered onto a gap between two
         inner nodes, through which its edges reach the channel on their
-        straight horizontal lanes (so the edge routing is unaffected)  */
+        straight horizontal lanes (so the edge routing is unaffected).
+        The configured maximum decides for the larger stack alone, as the
+        height of the diagram follows that one: the tallest (sub-)column
+        it ends up with implicitly caps the smaller stack, which hence
+        wraps exactly if that lowers the height of the diagram  */
     const countMax = config["hub-node-count-max"];
+    const bySize = inputs.length >= outputs.length ? [inputs, outputs] : [outputs, inputs];
+    const wrapped = [countMax > 0 && bySize[0].length > countMax, false];
+    const capped = wrapped[0] ? Math.ceil(bySize[0].length / 2) : bySize[0].length;
+    wrapped[1] = countMax > 0 && bySize[1].length > capped;
     const outerSet = new Set();
-    for (const list of [inputs, outputs])
-        if (countMax > 0 && list.length > countMax)
+    for (const [c, list] of bySize.entries())
+        if (wrapped[c])
             list.filter((_, k) => k % 2 === 0).forEach((node) => outerSet.add(node.id));
     /*  the vertical half extent of the lane the edges of an outer node
         occupy around its center: its ports at their maximum separation
@@ -145,7 +155,7 @@ export const render = async (graph, config, level = {}) => {
     const laneOf = (id) => {
         const cnt = Math.max(portCnt.get(`w:${id}`) ?? 0, portCnt.get(`e:${id}`) ?? 0);
         return level.fixedSize?.has(id) ? boxH.get(id) / 2 :
-            Math.min(boxH.get(id) / 2, (cnt - 1) * config["size-edge-port-gap"] / 2 + LANE_PAD);
+            Math.min(boxH.get(id) / 2, (cnt - 1) * portGap / 2 + LANE_PAD);
     };
     /*  fixed three-column layout: stack the input nodes in the first
         column and the output nodes in the third column (each stack
@@ -188,7 +198,7 @@ export const render = async (graph, config, level = {}) => {
         .reduce((a, node) => Math.max(a, boxW.get(node.id)), 0);
     const outerW = [subWidth(inputs, true), subWidth(outputs, true)];
     const wrapGap = edges.reduce((a, edge) => outerSet.has(edge.target) && edge.arity !== undefined ?
-        Math.max(a, ARITY_OFF + textWidth(edge.arity, FS_ARITY) + WRAP_PAD) : a, WRAP_GAP);
+        Math.max(a, ARITY_OFF + textWidth(edge.arity, config["size-font-arity"]) + WRAP_PAD) : a, WRAP_GAP);
     const sideW = (list, c) => subWidth(list, false) + (outerW[c] > 0 ? (c === 1 ? wrapGap : WRAP_GAP) + outerW[c] : 0);
     const colWidth = [sideW(inputs, 0), boxW.get(center.id), sideW(outputs, 1)];
     const chanOf = (edge) => Math.min(colOf(edge.source), colOf(edge.target));
@@ -217,7 +227,7 @@ export const render = async (graph, config, level = {}) => {
     };
     const cy = (id) => nodeCY.get(id);
     /*  distribute the edge attachment ports along each node side  */
-    const portPos = assignPorts(edges, sides, cx, cy, boxW, boxH, config["size-edge-port-gap"], undefined, level.fixedPort);
+    const portPos = assignPorts(edges, sides, cx, cy, boxW, boxH, portGap, undefined, level.fixedPort);
     /*  assign the vertical tracks within each channel (see assignTracks
         for the crossing-avoiding ordering scheme; a hub graph has no backward
         edges, hence no channel user is ever mirrored)  */