@rse/gradia 1.2.4 → 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
@@ -20,23 +20,32 @@ const escapeCSS = (text) => text.replace(/[\\"']/g, "\\$&").replace(/[\r\n\f]/g,
 const NS_GRADIA = new UUID(5, "ns:URL", "https://github.com/rse/gradia").format();
 /*  derive a per-document identifier prefix from a seed, as the SVG
     identifiers are DOM-global and would collide once multiple diagrams
-    are embedded into the very same document. The prefix is a UUID v5 of
-    the seed and hence stays stable across regenerations of an unchanged
-    diagram (the Base16 format keeps it alphanumeric and thus a valid XML
-    name and CSS/URL fragment)  */
-const idPrefix = (seed) => `gradia-${new UUID(5, NS_GRADIA, seed).format("b16").toLowerCase()}`;
+    are embedded into the very same document. The prefix is derived from
+    the UUID v5 of the seed and hence stays stable across regenerations
+    of an unchanged diagram (the Base16 format keeps it alphanumeric and
+    thus a valid XML name and CSS/URL fragment, and its leading 12 digits
+    keep the identifiers short, as every edge references one, while
+    still making a collision among the diagrams of a document unlikely)  */
+const idPrefix = (seed) => `gradia-${new UUID(5, NS_GRADIA, seed).format("b16").toLowerCase().slice(0, 12)}`;
 /*  the placement of a group tag in the top-left corner of its group box  */
 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,
@@ -48,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;
@@ -83,7 +106,7 @@ const labelPlacer = (layout, hops, hopRadius) => {
 };
 /*  generate the SVG fragments for a single node box (a node with a
     "url" attribute becomes a hyperlink covering the whole box)  */
-const renderNode = (node, layout, style, font, color, config) => {
+const renderNode = (node, layout, style, styler, config) => {
     const { cx, cy, boxW, boxH, contentH } = layout;
     const w = boxW.get(node.id);
     const h = boxH.get(node.id);
@@ -93,32 +116,31 @@ const renderNode = (node, layout, style, font, color, config) => {
     const url = urlOf(node);
     const parts = [];
     parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="6" ` +
-        `style="fill: ${color(style.fill)}; stroke: ${color(style.stroke)}" stroke-width="4.0"` +
+        `class="${styler.box(style.fill, style.stroke, 4)}"` +
         `${style.dash !== undefined ? ` stroke-dasharray="${escapeXML(style.dash)}"` : ""}/>`);
     /*  vertically center the textual content block within the box, with
         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}" text-anchor="middle" ` +
-            `font-size="${FS_TYPE}" ` +
-            `style="font-family: ${font}; fill: ${color(style.text)}">${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}" text-anchor="middle" ` +
-            `font-size="${FS_NAME}" font-weight="600" ` +
-            `style="font-family: ${font}; fill: ${color(style.text)}">${escapeXML(line)}</text>`);
+        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}" text-anchor="middle" ` +
-            `font-size="${FS_ATTR}" ` +
-            `style="font-family: ${font}; fill: ${color(style.text)}">${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,97 +179,93 @@ 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, font, color) => {
-    /*  the halo rendered behind the edge labels for readability
-        (its color is emitted into the style attribute below, as only
-        there the CSS custom property lookup can be resolved)  */
-    const halo = "stroke-width=\"4.5\" paint-order=\"stroke\" stroke-linejoin=\"round\"";
+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}" text-anchor="middle" ` +
-            `font-size="${FS_EDGE}" ` +
-            `style="font-family: ${font}; fill: ${color("color-edge-name")}; ` +
-            `stroke: ${color("color-edge-halo")}" ` +
-            `${halo}>${escapeXML(edge.name)}</text>`);
+        parts.push(`<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>`);
     }
     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);
-        parts.push(`<text x="${(box[0] + box[2]) / 2}" y="${box[3] - 3}" text-anchor="middle" ` +
-            `font-size="${FS_ARITY}" ` +
-            `style="font-family: ${font}; fill: ${color("color-edge-arity")}; ` +
-            `stroke: ${color("color-edge-halo")}" ` +
-            `${halo}>${escapeXML(edge.arity)}</text>`);
+        /*  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", "size-font-arity", { middle: true, halo: true })}">` +
+            `${escapeXML(edge.arity)}</text>`);
     }
     return parts;
 };
 /*  generate the SVG fragments for a single group box and its tag
     in the top-left corner  */
-const renderGroup = (group, font, color) => [
+const renderGroup = (group, styler) => [
     `<rect x="${group.x}" y="${group.y}" width="${group.w}" height="${group.h}" rx="12" ` +
-        `style="fill: ${color("color-group-box")}; ` +
-        `stroke: ${color("color-group-border")}" stroke-width="3.0"/>`,
+        `class="${styler.box("color-group-box", "color-group-border", 3)}"/>`,
     `<text x="${group.x + TAG_DX}" y="${group.y + TAG_DY + FS_GROUP}" ` +
-        `font-size="${FS_GROUP}" font-weight="600" ` +
-        `style="font-family: ${font}; fill: ${color("color-group-name")}">${escapeXML(group.name)}</text>`
+        `class="${styler.text("color-group-name", FS_GROUP, { bold: true })}">${escapeXML(group.name)}</text>`
 ];
 /*  generate the SVG fragments for a single container box and its tag
     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, font, color) => {
+const renderContainer = (c, styler, config) => {
     const type = typeOf(c.node);
     const url = urlOf(c.node);
     const parts = [
         `<rect x="${c.x}" y="${c.y}" width="${c.w}" height="${c.h}" rx="12" ` +
-            `style="fill: ${color("color-container-box")}; ` +
-            `stroke: ${color("color-container-border")}" stroke-width="3.0" stroke-dasharray="10 6"/>`,
+            `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}" ` +
-                `font-size="${FS_TYPE}" ` +
-                `style="font-family: ${font}; fill: ${color("color-container-name")}">${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}" ` +
-            `font-size="${FS_GROUP}" font-weight="600" ` +
-            `style="font-family: ${font}; fill: ${color("color-container-name")}">${escapeXML(c.node.name)}</text>`
+        `<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>`
     ];
     if (url === undefined)
         return parts;
@@ -264,7 +282,7 @@ export const renderSVG = (layout, config, explicit, seed) => {
         values: explicitly configured values are hard-coded, while all
         others are fetched at display time from the "--gradia-<option>"
         CSS custom properties, falling back to the built-in defaults  */
-    const color = (key) => escapeXML(cssValueOf(explicit, key));
+    const color = (key) => cssValueOf(explicit, key);
     /*  derive the collision-free identifiers of this SVG document  */
     const prefix = idPrefix(seed);
     const idArrow = `${prefix}-arrow`;
@@ -273,47 +291,71 @@ export const renderSVG = (layout, config, explicit, seed) => {
     const stack = Object.hasOwn(explicit, "font-family") ?
         `'${escapeCSS(family)}'` :
         `var(--gradia-font-family, '${escapeCSS(family)}')`;
-    const font = escapeXML(`${stack}, ui-sans-serif, -apple-system, Helvetica, Arial, sans-serif`);
+    const font = `${stack}, ui-sans-serif, -apple-system, Helvetica, Arial, sans-serif`;
+    /*  collect the CSS classes the rendered elements reference (the
+        halo behind an edge label keeps it readable on top of a line)  */
+    const rules = new Map();
+    const classOf = (decls) => {
+        let name = rules.get(decls);
+        if (name === undefined) {
+            name = `gradia-${new UUID(5, NS_GRADIA, decls).format("b16").toLowerCase().slice(0, 8)}`;
+            rules.set(decls, name);
+        }
+        return name;
+    };
+    const styler = {
+        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)}` +
+            (options.halo ? `; stroke: ${color("color-edge-halo")}; stroke-width: 4.5; ` +
+                "paint-order: stroke; stroke-linejoin: round" : "")),
+        box: (fill, stroke, width) => classOf(`fill: ${color(fill)}; stroke: ${color(stroke)}; stroke-width: ${width}`)
+    };
+    const classEdge = classOf(`fill: none; stroke: ${color("color-edge-line")}; stroke-width: 3`);
+    const classArrow = classOf(`fill: ${color("color-edge-line")}`);
     /*  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"])}" fill="none" ` +
-            `style="stroke: ${color("color-edge-line")}" stroke-width="3.0" marker-end="url(#${idArrow})"/>`);
-        svgLabels.push(...renderEdgeLabels(edge, polys[i], claim, font, color));
+        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], (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), font, color, config));
+    const svgNodes = nodes.flatMap((node) => renderNode(node, layout, styleOf(node), styler, config));
     /*  generate the SVG fragments for the group boxes (drawn below
         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, font, color));
-    const svgContainers = containers.flatMap((c) => renderContainer(c, font, color));
+    const svgGroups = groups.flatMap((group) => renderGroup(group, 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]);
     const vb = viewBoxOf(layout, [...occupied, ...groupBoxes, ...containerBoxes], config["size-canvas-margin"]);
-    /*  assemble the final SVG document  */
+    /*  assemble the final SVG document (with one CSS rule per line)  */
     return [
         "<?xml version=\"1.0\" encoding=\"UTF-8\"?>",
         "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" " +
             `viewBox="${vb.x} ${vb.y} ${vb.w} ${vb.h}" width="${vb.w}" height="${vb.h}">`,
         "<defs>",
+        "<style>",
         ...(embed !== undefined ? [
-            "<style>",
             `@font-face { font-family: "${escapeXML(escapeCSS(family))}"; ` +
                 (weight !== undefined ? `font-weight: ${escapeXML(escapeCSS(weight))}; ` : "") +
-                `src: url(data:font/woff2;base64,${embed}) format("woff2"); }`,
-            "</style>"
+                `src: url(data:font/woff2;base64,${embed}) format("woff2"); }`
         ] : []),
+        ...Array.from(rules, ([decls, name]) => `.${name} { ${escapeXML(decls)} }`),
+        "</style>",
         `<marker id="${idArrow}" viewBox="0 0 10 10" refX="9" refY="5" ` +
             "markerWidth=\"21\" markerHeight=\"21\" markerUnits=\"userSpaceOnUse\" " +
             "orient=\"auto-start-reverse\">",
-        `<path d="M 0 1 L 9 5 L 0 9 z" style="fill: ${color("color-edge-line")}"/>`,
+        `<path d="M 0 1 L 9 5 L 0 9 z" class="${classArrow}"/>`,
         "</marker>",
         "</defs>",
         ...svgGroups,

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  */