@rse/gradia 1.1.9 → 1.2.0

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

@@ -18,16 +18,26 @@ export const defaultStyleOf = (node) => isPrimary(node) ? {
 };
 /*  the special "type" annotation (rendered above the node name)  */
 export const typeOf = (node) => node.attrs.findLast((attr) => attr.key === "type")?.val;
+/*  the special "parent" annotation (nesting the node into a container node)  */
+export const parentOf = (node) => node.attrs.findLast((attr) => attr.key === "parent")?.val;
+/*  the special "container" annotation (the diagram type laying out the
+    members of the node, marking even a member-less node as a container)  */
+export const containerTypeOf = (node) => node.attrs.findLast((attr) => attr.key === "container")?.val;
+/*  container box head geometry (the head holds the name tag and the
+    optional type line above it)  */
+export const HEAD_H = 34; /*  height of the container box head        */
+export const HEAD_T = 20; /*  extra head height of a type line        */
+export const containerHead = (node) => HEAD_H + (typeOf(node) !== undefined ? HEAD_T : 0);
 /*  the special attributes consumed by the renderers instead of being
     rendered as node box text lines  */
-const ATTRS_SPECIAL = new Set(["url", "type", "primary", "group"]);
+const ATTRS_SPECIAL = new Set(["url", "type", "primary", "group", "parent", "container"]);
 /*  split the attributes rendered as text lines from the special ones  */
 export const attrsOfNode = (node) => node.attrs.filter((attr) => !ATTRS_SPECIAL.has(attr.key));
 /*  the special "url" attribute (rendered as a hyperlink on the whole node
     box, restricted to relative URLs and safe schemes, as the generated
     SVG anchor would otherwise execute an injected "javascript:" URL)  */
 const URL_SCHEME = /^\s*([A-Za-z][A-Za-z0-9+.-]*):/;
-const URL_SAFE = ["http", "https", "mailto"];
+const URL_SAFE = new Set(["http", "https", "mailto"]);
 export const urlOf = (node) => {
     const raw = node.attrs.findLast((attr) => attr.key === "url")?.val;
     if (raw === undefined)
@@ -36,7 +46,7 @@ export const urlOf = (node) => {
         resolving the URL and they would otherwise hide an unsafe scheme  */
     const url = raw.replace(/[\u0000-\u001F\u007F]/g, "");
     const scheme = URL_SCHEME.exec(url);
-    if (scheme !== null && !URL_SAFE.includes(scheme[1].toLowerCase()))
+    if (scheme !== null && !URL_SAFE.has(scheme[1].toLowerCase()))
         return undefined;
     return url;
 };
@@ -63,27 +73,31 @@ export const linesOfNode = (node, config) => {
     };
 };
 /*  determine node box sizes from their textual content
-    (boxes are scaled up in height by a per-node factor to
-    give the edges more attachment room)  */
-export const measureNodes = (nodes, config, scaleOf) => {
+    (boxes are scaled up in height by a per-node factor, but never
+    below the content height, to give the edges more attachment
+    room), except for the nodes
+    of a fixed size (the container placeholders and gate nodes
+    of a containment level), which are taken as given  */
+export const measureNodes = (nodes, config, scaleOf, fixed) => {
     /*  the resulting node box dimensions  */
     const boxW = new Map();
     const boxH = new Map();
     const contentH = new Map();
     /*  measure the text content of every node  */
     for (const node of nodes) {
+        const size = fixed?.get(node.id);
+        if (size !== undefined) {
+            boxW.set(node.id, size.w);
+            boxH.set(node.id, size.h);
+            contentH.set(node.id, size.h);
+            continue;
+        }
         const lines = linesOfNode(node, config);
-        let w = 0;
-        for (const line of lines.name)
-            w = Math.max(w, textWidth(line, FS_NAME));
-        for (const line of lines.type)
-            w = Math.max(w, textWidth(line, FS_TYPE));
-        for (const line of lines.attrs)
-            w = Math.max(w, textWidth(line, FS_ATTR));
+        const w = Math.max(0, ...lines.name.map((line) => textWidth(line, FS_NAME)), ...lines.type.map((line) => textWidth(line, FS_TYPE)), ...lines.attrs.map((line) => textWidth(line, FS_ATTR)));
         const h = MIN_H + (lines.name.length - 1) * NAME_H + lines.type.length * TYPE_H +
             (lines.attrs.length > 0 ? ATTR_P + (lines.attrs.length - 1) * ATTR_H + ATTR_B : 0);
         boxW.set(node.id, Math.max(config["size-node-width-min"], Math.ceil(w) + PAD_W * 2));
-        boxH.set(node.id, Math.ceil(h * scaleOf(node)));
+        boxH.set(node.id, Math.max(h, Math.ceil(h * scaleOf(node))));
         contentH.set(node.id, h);
     }
     return { boxW, boxH, contentH };

package/dst/gradia-api-render-svg.d.ts

@@ -1,23 +1,3 @@
-import { Node, Edge } from "./gradia-api-model.js";
 import { Config } from "./gradia-api-config.js";
-import { Poly, NodeStyle } from "./gradia-api-render-base.js";
-export interface GroupBox {
-    name: string;
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-}
-export interface Layout {
-    nodes: Node[];
-    edges: Edge[];
-    cx: (id: string) => number;
-    cy: (id: string) => number;
-    boxW: Map<string, number>;
-    boxH: Map<string, number>;
-    contentH: Map<string, number>;
-    polys: Poly[];
-    styleOf?: (node: Node) => NodeStyle;
-    groups?: GroupBox[];
-}
+import { Layout } from "./gradia-api-render-base.js";
 export declare const renderSVG: (layout: Layout, config: Config, explicit: Partial<Config>, seed: string) => string;

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

@@ -7,7 +7,7 @@
 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 { linesOfNode, urlOf, defaultStyleOf, MIN_H, NAME_H, ATTR_H, ATTR_P, TYPE_H, TYPE_D } from "./gradia-api-render-node.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
     is resolved by the parser before the CSS is parsed, so quotes and
@@ -28,24 +28,54 @@ const idPrefix = (seed) => `gradia-${new UUID(5, NS_GRADIA, seed).format("b16").
 /*  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;
 /*  track occupied areas (node boxes and already placed labels) to
-    let subsequent labels dodge into a collision-free position (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) => {
+    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 { 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,
         cx(node.id) + boxW.get(node.id) / 2, cy(node.id) + boxH.get(node.id) / 2
     ]);
-    /*  let the labels also dodge the group tags in the group box corners  */
+    /*  let the labels also dodge the group and container tags in the box corners  */
     for (const group of layout.groups ?? [])
         occupied.push([group.x + TAG_DX, group.y + TAG_DY,
             group.x + TAG_DX + textWidth(group.name, FS_GROUP), group.y + TAG_DY + FS_GROUP * 1.2]);
-    /*  claim the first collision-free candidate box  */
-    const collides = (box) => occupied.some((o) => box[0] < o[2] && box[2] > o[0] && box[1] < o[3] && box[3] > o[1]);
+    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) => {
+        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,
+                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]]);
+        }
+    });
+    /*  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)  */
+    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 box = candidates.find((c) => !collides(c)) ?? candidates[0];
+        let box = candidates[0];
+        let worst = Infinity;
+        for (const c of candidates) {
+            const score = collisions(occupied, c) * (lines.length + 1) + collisions(lines, c);
+            if (score < worst) {
+                box = c;
+                worst = score;
+            }
+            if (score === 0)
+                break;
+        }
         occupied.push(box);
         return box;
     };
@@ -189,11 +219,46 @@ const renderEdgeLabels = (edge, poly, claim, font, color) => {
     }
     return parts;
 };
+/*  generate the SVG fragments for a single group box and its tag
+    in the top-left corner  */
+const renderGroup = (group, font, color) => [
+    `<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"/>`,
+    `<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>`
+];
+/*  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 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"/>`,
+        ...(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 + 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>`
+    ];
+    if (url === undefined)
+        return parts;
+    return [`<a href="${escapeXML(url)}" xlink:href="${escapeXML(url)}">`, ...parts, "</a>"];
+};
 /*  render a laid out graph into an SVG document (the seed determines the
     identifier prefix of the document, see "idPrefix" above)  */
 export const renderSVG = (layout, config, explicit, seed) => {
     const { nodes, edges, polys } = layout;
     const groups = layout.groups ?? [];
+    const containers = layout.containers ?? [];
     const styleOf = layout.styleOf ?? defaultStyleOf;
     /*  resolve the directly embedded configuration options into CSS
         values: explicitly configured values are hard-coded, while all
@@ -212,7 +277,7 @@ 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);
+    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 svgLabels = [];
@@ -224,18 +289,14 @@ export const renderSVG = (layout, config, explicit, seed) => {
     /*  generate the SVG fragments for the node boxes  */
     const svgNodes = nodes.flatMap((node) => renderNode(node, layout, styleOf(node), font, color, config));
     /*  generate the SVG fragments for the group boxes (drawn below
-        everything else) and their tags in the top-left corners  */
-    const svgGroups = groups.flatMap((group) => [
-        `<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"/>`,
-        `<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>`
-    ]);
+        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));
     /*  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 vb = viewBoxOf(layout, [...occupied, ...groupBoxes], config["size-canvas-margin"]);
+    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  */
     return [
         "<?xml version=\"1.0\" encoding=\"UTF-8\"?>",
@@ -256,6 +317,7 @@ export const renderSVG = (layout, config, explicit, seed) => {
         "</marker>",
         "</defs>",
         ...svgGroups,
+        ...svgContainers,
         ...svgEdges,
         ...svgNodes,
         ...svgLabels,

package/dst/gradia-api-type-graph.d.ts

@@ -1,4 +1,5 @@
 import { Graph } from "./gradia-api-model.js";
 import { Config } from "./gradia-api-config.js";
-import { Layout } from "./gradia-api-render-svg.js";
-export declare const render: (graph: Graph, config: Config) => Promise<Layout>;
+import { Layout } from "./gradia-api-render-base.js";
+import { LevelContext } from "./gradia-api-render-container.js";
+export declare const render: (graph: Graph, config: Config, level?: LevelContext) => Promise<Layout>;