@rse/gradia 1.3.0 → 1.4.1

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,25 @@ 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;
+/*  the maximum number of steps a name label is slid along a single
+    segment of its route, as a long segment would otherwise offer far
+    more candidate positions than a placement can ever need  */
+const SLIDE_MAX = 16;
 /*  track occupied areas (node boxes and already placed labels) to
-    let subsequent labels dodge into a collision-free position, and the
+    let subsequent labels dodge into a collision-free position, plus the
+    areas merely reserved for the labels still to be placed, 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 +62,56 @@ 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 reserved = [];
+    const reserve = (box) => {
+        reserved.push(box);
+    };
+    /*  a claim counts the areas reserved for the labels still to come
+        like the occupied ones, so an early label yields the position a
+        later one depends upon wherever it has an alternative of its
+        own, while the "own" reservation of the claiming label is
+        released, as that is the very area it is about to take  */
+    const claim = (candidates, edge, dodge = true, own) => {
+        if (own !== undefined) {
+            const k = reserved.indexOf(own);
+            if (k >= 0)
+                reserved.splice(k, 1);
+        }
         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) + collisions(reserved, c)) * (lineCount + 1) +
+                (dodge ? crossings(c, edge) : 0);
             if (score < lowest) {
                 box = c;
                 lowest = score;
@@ -81,7 +122,7 @@ const labelPlacer = (layout, hops, hopRadius) => {
         occupied.push(box);
         return box;
     };
-    return { claim, occupied };
+    return { claim, reserve, occupied };
 };
 /*  generate the SVG fragments for a single node box (a node with a
     "url" attribute becomes a hyperlink covering the whole box)  */
@@ -101,24 +142,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;
@@ -153,63 +195,100 @@ const viewBoxOf = (layout, boxes, margin) => {
         h: Math.ceil(maxY - minY + margin)
     };
 };
-/*  generate the SVG fragments for the labels of a single edge: its
-    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 parts = [];
-    if (edge.name !== undefined) {
-        const w = textWidth(edge.name, FS_EDGE);
-        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]);
-            }
-            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]);
-            }
-        }
-        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 })}">` +
-            `${escapeXML(edge.name)}</text>`);
-    }
-    if (edge.arity !== undefined) {
-        const w = textWidth(edge.arity, FS_ARITY);
-        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;
+/*  the candidate positions of the arity label of an edge: set back
+    from the arrow head along the final segment and placed beside the
+    line, so an edge approaching 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 arityBoxes = (arity, poly, config) => {
+    const w = textWidth(arity, config["size-font-arity"]);
+    const h = arityHeight(config);
+    const p = pointAt(poly, 1.0);
+    const prev = pointAt(poly, 0.999);
+    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);
-            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]
-            ];
+            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;
-            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]
-            ];
+            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]);
+        }
+    }
+    return candidates;
+};
+/*  generate the SVG fragment for the arity label of a single edge,
+    which claims one of its candidate positions 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 renderEdgeArity = (edge, candidates, claim, styler) => {
+    if (edge.arity === undefined)
+        return [];
+    const box = claim(candidates, false, candidates[0]);
+    return [`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" ` +
+            `class="${styler.text("color-edge-arity", "size-font-arity", { middle: true, halo: true })}">` +
+            `${escapeXML(edge.arity)}</text>`];
+};
+/*  generate the SVG fragment for the name label of a single edge,
+    placed near the middle of the route (dodging into a collision-free
+    position through the "claim" of the label placer)  */
+const renderEdgeName = (edge, poly, claim, styler, config) => {
+    if (edge.name === undefined)
+        return [];
+    const w = textWidth(edge.name, config["size-font-edge"]);
+    const h = config["size-font-edge"] + 4;
+    /*  offer, along every segment of the own route and on both sides
+        of its line, the label centered on the segment plus the two
+        positions flush with its ends plus, where the segment takes the
+        label at all, the positions sliding between those ends in steps
+        of half the label extent, as the free space along a route is
+        regularly not where the segment centers are, and order the
+        candidates by the distance from the middle of the route, so the
+        label ends up as close to that middle as the collisions along
+        the way allow  */
+    const slide = (lo, hi, extent) => {
+        const first = lo + extent / 2;
+        const last = hi - extent / 2;
+        const positions = [(lo + hi) / 2, first, last];
+        if (last > first) {
+            const steps = Math.min(Math.ceil((last - first) / (extent / 2)), SLIDE_MAX);
+            for (let k = 1; k < steps; k++)
+                positions.push(first + (last - first) * k / steps);
+        }
+        return positions;
+    };
+    const mid = pointAt(poly, 0.50);
+    const near = (box) => Math.abs((box[0] + box[2]) / 2 - mid.x) + Math.abs((box[1] + box[3]) / 2 - mid.y);
+    const candidates = [];
+    for (let k = 0; k < poly.length - 1; k++) {
+        const [a, b] = [poly[k], poly[k + 1]];
+        if (a[1] === b[1]) {
+            for (const x of slide(Math.min(a[0], b[0]), Math.max(a[0], b[0]), w)) {
+                candidates.push([x - w / 2, a[1] - 3 - h, x + w / 2, a[1] - 3]);
+                candidates.push([x - w / 2, a[1] + 3, x + w / 2, a[1] + 3 + h]);
+            }
+        }
+        else {
+            for (const y of slide(Math.min(a[1], b[1]), Math.max(a[1], b[1]), h)) {
+                candidates.push([a[0] + 5, y - h / 2, a[0] + 5 + w, y + h / 2]);
+                candidates.push([a[0] - 5 - w, y - h / 2, a[0] - 5, 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-arity", FS_ARITY, { middle: true, halo: true })}">` +
-            `${escapeXML(edge.arity)}</text>`);
     }
-    return parts;
+    candidates.sort((a, b) => near(a) - near(b));
+    const box = claim(candidates);
+    return [`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" ` +
+            `class="${styler.text("color-edge-name", "size-font-edge", { middle: true, halo: true })}">` +
+            `${escapeXML(edge.name)}</text>`];
 };
 /*  generate the SVG fragments for a single group box and its tag
     in the top-left corner  */
@@ -223,7 +302,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 +310,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 +354,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 +368,30 @@ 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"]);
-    /*  generate the SVG fragments for the edges (paths below, labels above)  */
-    const svgEdges = [];
+    const { claim, reserve, occupied } = labelPlacer(layout, hops, config["size-edge-hop-radius"], config);
+    /*  generate the SVG fragments for the edge paths  */
+    const svgEdges = polys.map((poly, i) => `<path d="${pathOf(poly, hops[i], config["size-edge-corner-radius"], config["size-edge-hop-radius"])}" ` +
+        `class="${classEdge}" marker-end="url(#${idArrow})"/>`);
+    /*  reserve the position every arity label prefers -- the one beside
+        its own arrow head -- before any name label is placed, as an
+        arity is bound to that arrow while a name may slide along the
+        whole route: a name hence yields the reserved area wherever it
+        has an alternative, and only a name left without one takes it
+        and pushes its arity onto the next setback  */
+    const arities = edges.map((edge, i) => edge.arity !== undefined ? arityBoxes(edge.arity, polys[i], config) : undefined);
+    for (const candidates of arities)
+        if (candidates !== undefined)
+            reserve(candidates[0]);
+    /*  generate the SVG fragments for the edge labels (the names
+        first, as their reservations keep the arity positions free)  */
     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(...renderEdgeName(edge, polys[i], (c, dodge) => claim(c, i, dodge), styler, config));
+    });
+    edges.forEach((edge, i) => {
+        const candidates = arities[i];
+        if (candidates !== undefined)
+            svgLabels.push(...renderEdgeArity(edge, candidates, (c, dodge, own) => claim(c, i, dodge, own), styler));
     });
     /*  generate the SVG fragments for the node boxes  */
     const svgNodes = nodes.flatMap((node) => renderNode(node, layout, styleOf(node), styler, config));
@@ -303,7 +399,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)  */