@rse/gradia 1.2.4 → 1.4.0

package/README.md

@@ -307,40 +307,51 @@ command-line options (`font-embed` being command-line only, see below).
 The recognized options, and their default values, are:
 
 ```
-font-family                Helvetica    size-node-height-scale     2.25
-font-embed                 false        size-edge-corner-radius    20
-color-node-regular-name    #336699      size-edge-hop-radius       8
-color-node-regular-box     #e0f0ff      size-edge-track-gap        12
-color-node-regular-border  #c0d0e0      size-edge-port-gap         24
-color-node-primary-name    #ffffff      group-box-padding          30
-color-node-primary-box     #336699      group-box-gap              40
-color-node-primary-border  #003366      container-box-padding      30
-color-node-ghost-name      #666666      graph-columns-max          4
-color-node-ghost-box       #f0f0f0      graph-channel-width-max    140
-color-node-ghost-border    #a0a0a0      graph-channel-width-min    24
-color-node-self-name       #444444      graph-gutter-height-max    90
-color-node-self-box        #e0e0e0      graph-gutter-height-min    20
-color-node-self-border     #707070      graph-node-separation      30
-color-group-name           #6699cc      graph-rank-separation      60
-color-group-box            #f4f8fc      graph-node-degree-max      3
-color-group-border         #c0d0e0      hub-channel-width-max      340
-color-container-name       #666666      hub-channel-width-min      240
-color-container-box        #f6f6f6      hub-node-gap               20
-color-container-border     #a0a0a0      hub-node-degree-max        3
-color-edge-line            #999999      grid-columns-max           4
-color-edge-name            #333333      grid-columns-min           3
-color-edge-arity           #333333      grid-gap-horizontal        40
-color-edge-halo            #ffffff      grid-gap-vertical          20
-size-canvas-margin         40           grid-node-width-equal      true
-size-node-width-min        220          grid-node-height-equal     true
-size-node-width-max        0
+font-family                Helvetica    size-node-width-min        220
+font-embed                 false        size-node-width-max        0
+color-node-regular-name    #336699      size-node-height-scale     2.25
+color-node-regular-box     #e0f0ff      size-edge-corner-radius    20
+color-node-regular-border  #c0d0e0      size-edge-hop-radius       8
+color-node-primary-name    #ffffff      size-edge-track-gap        12
+color-node-primary-box     #336699      size-edge-port-gap         24
+color-node-primary-border  #003366      group-box-padding          30
+color-node-ghost-name      #666666      group-box-gap              40
+color-node-ghost-box       #f0f0f0      container-box-padding      30
+color-node-ghost-border    #a0a0a0      graph-columns-max          4
+color-node-self-name       #444444      graph-channel-width-max    140
+color-node-self-box        #e0e0e0      graph-channel-width-min    24
+color-node-self-border     #707070      graph-gutter-height-max    90
+color-group-name           #6699cc      graph-gutter-height-min    20
+color-group-box            #f4f8fc      graph-node-separation      30
+color-group-border         #c0d0e0      graph-rank-separation      60
+color-container-name       #666666      graph-node-degree-max      3
+color-container-box        #f6f6f6      hub-channel-width-max      340
+color-container-border     #a0a0a0      hub-channel-width-min      240
+color-edge-line            #999999      hub-node-gap               20
+color-edge-name            #333333      hub-node-degree-max        3
+color-edge-arity           #333333      hub-node-count-max         0
+color-edge-halo            #ffffff      grid-columns-max           4
+size-font-node             30           grid-columns-min           3
+size-font-type             16           grid-gap-horizontal        40
+size-font-prop             22           grid-gap-vertical          20
+size-font-edge             16           grid-node-width-equal      true
+size-font-arity            16           grid-node-height-equal     true
+size-canvas-margin         40
 ```
 
 The `size-*`, `group-*`, `container-*`, `graph-*`, `hub-*`, and
-`grid-*` options control the rendering geometry (canvas margin, node
-box sizing, edge routing, group and container box spacing, and the
-per-diagram-type layout) and take non-negative numbers, except the
-booleans `grid-node-width-equal` and `grid-node-height-equal`.
+`grid-*` options control the rendering geometry (text font sizes, canvas
+margin, node box sizing, edge routing, group and container box spacing,
+and the per-diagram-type layout) and take non-negative numbers, except
+the booleans `grid-node-width-equal` and `grid-node-height-equal`.
+
+The `size-font-*` options control the font sizes of the node names
+(`size-font-node`), the node types (`size-font-type`), the node
+properties (`size-font-prop`), the edge names (`size-font-edge`), and
+the edge arities (`size-font-arity`). They are geometry options, as they
+size the node boxes and the channels the edge labels land in: the line
+heights inside a node box, the head of a container box, and the width
+demand of a channel all track their font size.
 
 The `size-node-width-max` option additionally enables the word-wrapping
 of the node box texts: given a positive value, the node name, its type,
@@ -359,11 +370,16 @@ like all channels by the edges routed through them.
 
 The `size-edge-port-gap` option controls the distance of the edge
 attachment ports along a node side, and hence the vertical distance of
-the parallel edges and their labels. It is a *maximum*: a node box too
-small to hold all its ports at that distance packs them closer together
-instead. A node side carrying more edges than `graph-node-degree-max`
-or `hub-node-degree-max` grows its box height by this very
-distance per additional edge.
+the parallel edges and their labels. A node box grows in height until
+it holds all of its ports at that distance, so the edges of a node stay
+readably apart however short its textual content is, and a node side
+carrying more edges than `graph-node-degree-max` or
+`hub-node-degree-max` grows by this very distance per additional edge
+on top of that. In a diagram whose edges carry arities, the distance is
+raised to what those labels demand, as an arity sits beside its own
+edge line and has to stay clear of the arrow head above it. Only the
+fixed-size box of a container placeholder cannot grow and hence packs
+its ports closer together instead.
 
 The `graph-channel-width-*` and `graph-gutter-height-*` options control
 the spacing of a `graph` diagram: its inter-column channels and
@@ -376,6 +392,19 @@ unlabeled diagram can be spaced out, while the `-max` options cap it, so
 that neither many parallel edges nor a long label can push the nodes
 apart without bound.
 
+The `hub-node-count-max` option controls the wrapping of the input and
+output column of a `hub` diagram: given a positive value, a column of
+more nodes than this wraps into two staggered sub-columns, whose nodes
+alternate between the outer sub-column and the inner one, with every
+outer node vertically centered onto a gap between two inner nodes,
+through which its edges reach the primary node. This trades nearly
+half of the height of a large diagram for additional width. The option
+decides for the larger of the two columns alone, as the height of the
+diagram follows that one: the node count of its tallest resulting
+(sub-)column implicitly caps the smaller column, which hence wraps
+exactly if that lowers the height of the diagram. The value `0`
+disables the wrapping entirely.
+
 The `grid-columns-min` and `grid-columns-max` options control the column
 count of a `grid` diagram, which by default is derived from the node
 count as a roughly square grid: `grid-columns-min` raises the derived
@@ -404,6 +433,21 @@ hard-coded into the SVG instead. The resulting precedence is: first
 `#config`/`--config`, then the CSS custom property `--gradia-<option>`,
 and finally the built-in default.
 
+The `size-font-*` options are embedded into the generated SVG, too, but
+as they also sized the layout, the SVG always references the CSS custom
+property `--gradia-<option>` and falls back to the *effective* value
+(configured or default). An override at display time hence retains the
+layout of the configured size and should stay close to it.
+
+The styling is not repeated on every element of the generated SVG, but
+declared once as CSS classes in a `<style>` element, which the elements
+reference. A class is named `gradia-<digest>` after the digest of its
+own declarations, so equal declarations always yield the very same
+class. As the class names are global once multiple diagrams are embedded
+into the very same document, the embedding document can hence strip the
+`<style>` elements off the diagrams and declare the union of their
+rules (one per line) a single time on its own.
+
 The `font-family` option is either a built-in font family, a plain font
 family name, or the path to a WOFF2 file. The only built-in font family
 is `Source Sans 3`, shipped as a variable WOFF2 file by the NPM

package/dst/gradia-api-config.d.ts

@@ -23,6 +23,11 @@ export declare const configDefaults: {
     "color-edge-name": string;
     "color-edge-arity": string;
     "color-edge-halo": string;
+    "size-font-node": number;
+    "size-font-type": number;
+    "size-font-prop": number;
+    "size-font-edge": number;
+    "size-font-arity": number;
     "size-canvas-margin": number;
     "size-node-width-min": number;
     "size-node-width-max": number;
@@ -46,6 +51,7 @@ export declare const configDefaults: {
     "hub-channel-width-min": number;
     "hub-node-gap": number;
     "hub-node-degree-max": number;
+    "hub-node-count-max": number;
     "grid-columns-max": number;
     "grid-columns-min": number;
     "grid-gap-horizontal": number;
@@ -57,6 +63,8 @@ export type Config = typeof configDefaults;
 export type ConfigEmbedded = {
     [K in keyof Config]: Config[K] extends string ? K : never;
 }[keyof Config];
+export type ConfigFontSize = "size-font-node" | "size-font-type" | "size-font-prop" | "size-font-edge" | "size-font-arity";
+export declare const cssSizeOf: (config: Config, key: ConfigFontSize) => string;
 export declare const cssValueOf: (explicit: Partial<Config>, key: ConfigEmbedded) => string;
 export declare const validateConfig: (raw: Record<string, unknown>, options: {
     trusted: boolean;

package/dst/gradia-api-config.js

@@ -33,6 +33,11 @@ export const configDefaults = {
     "color-edge-name": "#333333",
     "color-edge-arity": "#333333",
     "color-edge-halo": "#ffffff",
+    "size-font-node": 30, /*  font size of node names                */
+    "size-font-type": 16, /*  font size of node types                */
+    "size-font-prop": 22, /*  font size of node properties           */
+    "size-font-edge": 16, /*  font size of edge names                */
+    "size-font-arity": 16, /*  font size of edge arities              */
     "size-canvas-margin": 40, /*  outer margin of the canvas             */
     "size-node-width-min": 220, /*  minimum node box width                 */
     "size-node-width-max": 0, /*  maximum node box width (0 = unlimited) */
@@ -56,6 +61,7 @@ export const configDefaults = {
     "hub-channel-width-min": 240, /*  hub: min width of column channels      */
     "hub-node-gap": 20, /*  hub: vertical gap of stacked nodes     */
     "hub-node-degree-max": 3, /*  hub: max edges/side before growth      */
+    "hub-node-count-max": 0, /*  hub: max nodes/column before wrapping  */
     "grid-columns-max": 4, /*  grid: max side-by-side tiles           */
     "grid-columns-min": 3, /*  grid: min side-by-side tiles           */
     "grid-gap-horizontal": 40, /*  grid: horizontal gap between tiles     */
@@ -63,6 +69,10 @@ export const configDefaults = {
     "grid-node-width-equal": true, /*  grid: force equal width of node boxes  */
     "grid-node-height-equal": true /*  grid: force equal height of node boxes */
 };
+/*  resolve a font size option into a CSS value: the effective value is
+    the fallback of the CSS custom property "--gradia-<option>", as it
+    also sized the layout, so an override should stay close to it  */
+export const cssSizeOf = (config, key) => `var(--gradia-${key}, ${config[key]}px)`;
 /*  resolve a directly embedded configuration option into a CSS value:
     an explicitly configured value is hard-coded (stripped of the
     characters which would end the CSS declaration, to prevent a CSS

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

@@ -1,12 +1,10 @@
 import { Node, Edge } from "./gradia-api-model.js";
-import { ConfigEmbedded } from "./gradia-api-config.js";
-export declare const FS_NAME = 30;
-export declare const FS_TYPE = 16;
-export declare const FS_ATTR = 22;
-export declare const FS_EDGE = 16;
-export declare const FS_ARITY = 16;
+import { Config, ConfigEmbedded } from "./gradia-api-config.js";
 export declare const FS_GROUP = 24;
 export declare const ARITY_OFF = 24;
+export declare const ARITY_PAD = 4;
+export declare const ARROW_H = 17;
+export declare const arityHeight: (config: Config) => number;
 export declare const textWidth: (text: string, size: number) => number;
 export declare const textWrap: (text: string, size: number, maxWidth: number) => string[];
 export declare const escapeXML: (text: string) => string;

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

@@ -3,17 +3,20 @@
 **  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
 **  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
 */
-/*  rendering font size constants (the further geometry is configurable,
+/*  rendering font size constant of the group tags (the font sizes of
+    the node and edge texts and the further geometry are configurable,
     see the "size-*" and per-diagram-type options in the configuration)  */
-export const FS_NAME = 30; /*  font size of node names       */
-export const FS_TYPE = 16; /*  font size of node types       */
-export const FS_ATTR = 22; /*  font size of node attributes  */
-export const FS_EDGE = 16; /*  font size of edge labels      */
-export const FS_ARITY = 16; /*  font size of edge arities     */
 export const FS_GROUP = 24; /*  font size of group tags       */
 /*  the setback of an edge arity label from the arrow head it annotates
     (shared by the SVG rendering and the graph channel sizing)  */
 export const ARITY_OFF = 24;
+/*  the offset of an edge arity label from its own edge line, and the
+    rendered height of an arrow head (the 21px marker of the SVG
+    covering 8 of the 10 units of its own viewBox)  */
+export const ARITY_PAD = 4;
+export const ARROW_H = 17;
+/*  the height of the box an edge arity label occupies  */
+export const arityHeight = (config) => Math.round(config["size-font-arity"] * 0.8);
 /*  estimate rendered text width (no canvas available under Node,
     factor tuned for the average glyph advance of Source Sans 3)  */
 export const textWidth = (text, size) => text.length * size * 0.52;

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

@@ -3,7 +3,7 @@
 **  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
 **  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
 */
-import { FS_GROUP, FS_TYPE, textWidth } from "./gradia-api-render-base.js";
+import { FS_GROUP, textWidth } from "./gradia-api-render-base.js";
 import { parentOf, containerTypeOf, containerHead, typeOf, defaultStyleOf } from "./gradia-api-render-node.js";
 import { simplifyPoly } from "./gradia-api-render-edge.js";
 /*  determine the containment tree of the graph (in order of node
@@ -116,10 +116,10 @@ export const renderContained = async (graph, containment, type, types, config) =
     /*  the box size of a container placeholder: its content plus
         the padding and the head, at least as wide as its tag  */
     const sizeOf = (member, b) => {
-        const tag = Math.max(textWidth(member.name, FS_GROUP), textWidth(typeOf(member) ?? "", FS_TYPE));
+        const tag = Math.max(textWidth(member.name, FS_GROUP), textWidth(typeOf(member) ?? "", config["size-font-type"]));
         return {
             w: Math.max(b.maxX - b.minX, tag) + pad * 2,
-            h: b.maxY - b.minY + pad * 2 + containerHead(member)
+            h: b.maxY - b.minY + pad * 2 + containerHead(member, config)
         };
     };
     /*  compose a laid out containment level with its inner levels: the
@@ -148,7 +148,7 @@ export const renderContained = async (graph, containment, type, types, config) =
             const k = parts.push({
                 layout: level.layout,
                 dx: cx - w / 2 + pad - level.bounds.minX,
-                dy: cy - h / 2 + containerHead(member) + pad - level.bounds.minY
+                dy: cy - h / 2 + containerHead(member, config) + pad - level.bounds.minY
             }) - 1;
             for (const node of level.layout.nodes)
                 partOf.set(node.id, k);
@@ -237,7 +237,7 @@ export const renderContained = async (graph, containment, type, types, config) =
             attaches at: the position of its inner gate  */
         const portOffset = (member, y) => {
             const { bounds } = inner.get(member.id);
-            return (y - bounds.minY) + containerHead(member) + pad - sizeOf(member, bounds).h / 2;
+            return (y - bounds.minY) + containerHead(member, config) + pad - sizeOf(member, bounds).h / 2;
         };
         /*  derive the edges of this level: the edges lifted to it (both
             endpoints in the subtree, but not both inside the same member

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

@@ -1,5 +1,8 @@
 import { Edge } from "./gradia-api-model.js";
+import { Config } from "./gradia-api-config.js";
 import { Poly } from "./gradia-api-render-base.js";
+export declare const PORT_PAD = 10;
+export declare const portGapOf: (edges: Edge[], config: Config) => number;
 export declare const simplifyPoly: (pts: Poly) => Poly;
 export type Side = "e" | "w" | "n";
 export declare const assignPorts: (edges: Edge[], sides: {

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

@@ -3,8 +3,18 @@
 **  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
 **  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
 */
+import { ARITY_PAD, ARROW_H, arityHeight } from "./gradia-api-render-base.js";
 /*  edge attachment port geometry  */
-const PORT_PAD = 10; /*  padding of the port band inside the box  */
+export const PORT_PAD = 10; /*  padding of the port band inside the box  */
+/*  the separation of the adjacent ports of a node side: the configured
+    one, raised to what the arity labels demand once any edge carries
+    one, as such a label sits ARITY_PAD below the line of the port above
+    it, whose arrow head reaches down by half its height, and needs two
+    more ARITY_PAD of air between the two, so it stays attributable to
+    its own arrow instead of drifting into the neighboring one  */
+export const portGapOf = (edges, config) => edges.some((edge) => edge.arity !== undefined) ?
+    Math.max(config["size-edge-port-gap"], Math.ceil(3 * ARITY_PAD + arityHeight(config) + ARROW_H / 2)) :
+    config["size-edge-port-gap"];
 /*  drop duplicate and collinear intermediate points of a polyline  */
 export const simplifyPoly = (pts) => {
     /*  drop the collinear intermediate points first, as collapsing

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

@@ -7,19 +7,19 @@ export declare const typeOf: (node: Node) => string | undefined;
 export declare const parentOf: (node: Node) => string | undefined;
 export declare const containerTypeOf: (node: Node) => string | undefined;
 export declare const HEAD_H = 34;
-export declare const HEAD_T = 20;
-export declare const containerHead: (node: Node) => number;
+export declare const HEAD_T: (config: Config) => number;
+export declare const containerHead: (node: Node, config: Config) => number;
 export declare const orderOf: (node: Node) => number | undefined;
 export declare const attrsOfNode: (node: Node) => Attr[];
 export declare const urlOf: (node: Node) => string | undefined;
 export declare const PAD_W = 18;
-export declare const MIN_H = 56;
-export declare const NAME_H = 34;
-export declare const ATTR_H = 30;
 export declare const ATTR_P = 12;
 export declare const ATTR_B = 20;
-export declare const TYPE_H = 26;
-export declare const TYPE_D = 36;
+export declare const MIN_H: (config: Config) => number;
+export declare const NAME_H: (config: Config) => number;
+export declare const ATTR_H: (config: Config) => number;
+export declare const TYPE_H: (config: Config) => number;
+export declare const TYPE_D: (config: Config) => number;
 export interface NodeLines {
     name: string[];
     type: string[];

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

@@ -3,7 +3,7 @@
 **  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
 **  Distributed under MIT license <https://spdx.org/licenses/MIT.html>
 */
-import { FS_NAME, FS_TYPE, FS_ATTR, textWidth, textWrap } from "./gradia-api-render-base.js";
+import { textWidth, textWrap } from "./gradia-api-render-base.js";
 /*  the special "primary" annotation (rendered as a distinct node coloring)  */
 export const isPrimary = (node) => node.attrs.findLast((attr) => attr.key === "primary")?.val === "true";
 /*  the default node box coloring (primary node boxes get a distinct one)  */
@@ -26,8 +26,8 @@ export const containerTypeOf = (node) => node.attrs.findLast((attr) => attr.key
 /*  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);
+export const HEAD_T = (config) => config["size-font-type"] + 4; /*  extra head height of a type line  */
+export const containerHead = (node, config) => HEAD_H + (typeOf(node) !== undefined ? HEAD_T(config) : 0);
 /*  the special "order" annotation (the explicit top-down placement
     order of the node, a finite number, an invalid value being ignored)  */
 export const orderOf = (node) => {
@@ -57,15 +57,24 @@ export const urlOf = (node) => {
         return undefined;
     return url;
 };
-/*  node box text metrics (shared by the measuring and the text placement)  */
+/*  node box text metrics (shared by the measuring and the text
+    placement), where the vertical ones track the font size of the text
+    they space out, so that a configured font size never lets a line
+    collide with its neighbor  */
 export const PAD_W = 18; /*  left/right node box text padding          */
-export const MIN_H = 56; /*  minimum node box height                   */
-export const NAME_H = 34; /*  height of an additional name line         */
-export const ATTR_H = 30; /*  height of a single attribute line         */
 export const ATTR_P = 12; /*  top padding of the attribute block        */
 export const ATTR_B = 20; /*  bottom padding of the attribute block     */
-export const TYPE_H = 26; /*  extra height of a single type line        */
-export const TYPE_D = 36; /*  baseline distance of the type to the name */
+/*  minimum node box height (one name line plus its vertical padding)  */
+export const MIN_H = (config) => config["size-font-node"] + 26;
+/*  height of an additional name line  */
+export const NAME_H = (config) => config["size-font-node"] + 4;
+/*  height of a single attribute line  */
+export const ATTR_H = (config) => config["size-font-prop"] + 8;
+/*  extra height of a single type line  */
+export const TYPE_H = (config) => config["size-font-type"] + 10;
+/*  baseline distance of the type line to the name line (the cap height
+    of the name plus the line box of the type)  */
+export const TYPE_D = (config) => config["size-font-node"] * 0.72 + config["size-font-type"] * 0.90;
 /*  break the textual content of a node into its rendered lines, word-wrapped
     to the configured maximum box width (shared by the measuring and the text
     placement, so both can never disagree on the resulting line count)  */
@@ -74,9 +83,9 @@ export const linesOfNode = (node, config) => {
         config["size-node-width-max"] - PAD_W * 2 : 0;
     const type = typeOf(node);
     return {
-        name: textWrap(node.name, FS_NAME, max),
-        type: type !== undefined ? textWrap(type, FS_TYPE, max) : [],
-        attrs: attrsOfNode(node).flatMap((attr) => textWrap(`${attr.key}: ${attr.val}`, FS_ATTR, max))
+        name: textWrap(node.name, config["size-font-node"], max),
+        type: type !== undefined ? textWrap(type, config["size-font-type"], max) : [],
+        attrs: attrsOfNode(node).flatMap((attr) => textWrap(`${attr.key}: ${attr.val}`, config["size-font-prop"], max))
     };
 };
 /*  determine node box sizes from their textual content (boxes are
@@ -99,9 +108,10 @@ export const measureNodes = (nodes, config, scaleOf, fixed) => {
             continue;
         }
         const lines = linesOfNode(node, config);
-        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);
+        const w = Math.max(0, ...lines.name.map((line) => textWidth(line, config["size-font-node"])), ...lines.type.map((line) => textWidth(line, config["size-font-type"])), ...lines.attrs.map((line) => textWidth(line, config["size-font-prop"])));
+        const h = MIN_H(config) + (lines.name.length - 1) * NAME_H(config) +
+            lines.type.length * TYPE_H(config) +
+            (lines.attrs.length > 0 ? ATTR_P + (lines.attrs.length - 1) * ATTR_H(config) + 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.max(h, Math.ceil(h * scaleOf(node))));
         contentH.set(node.id, h);