@yuneta/gobj-ui 7.23.147 → 7.23.149

package/src/c_g6_nodes_tree.js

@@ -132,7 +132,7 @@ import {
     fold_split_group_key,
     fold_root_group_key,
 } from "./treedb_fold_model.js";
-import {layout_tree, layout_radial} from "./treedb_layout.js";
+import {layout_tree, layout_radial, layout_compact} from "./treedb_layout.js";
 
 import {
     BaseLayout,
@@ -146,6 +146,7 @@ import {
     HTML,
     Toolbar,
     register,
+    Polyline,
 } from '@antv/g6';
 
 import {Circle as CircleGeometry, Rect as RectGeometry} from '@antv/g';
@@ -350,6 +351,16 @@ const _layouts = {
         nodesep: 18,
         ranksep: 90,
     },
+    /*  The same tree packed by CONTOUR (Moen, as mxGraph drew it): a
+     *  closed branch sits beside an open one at the depth they share,
+     *  instead of beside the whole block of the open one. Same rows
+     *  and order as `treedb-tree` (treedb_layout.js).  */
+    "compact-tree": {
+        type: 'treedb-compact',
+        direction: 'TB',
+        nodesep: 18,
+        ranksep: 90,
+    },
     "dagre": {
         type: 'dagre',
         rankdir: 'LR',
@@ -446,6 +457,8 @@ SDATA(data_type_t.DTP_LIST,     "loose_topics",         0,  "[]",   "Topics whos
 
 /*---------------- Node shape ----------------*/
 SDATA(data_type_t.DTP_STRING,   "node_mode",            0,  "expanded", "How a record is drawn: `expanded` = the card with its pills and ports; `compact` = a one-line pill with the name and small ports; `shape` = a figure of the topic's colour (square, circle, diamond... per node or topic, from the node properties), no ports, no text -- the topology alone. One node can be toggled against it (EV_TOGGLE_NODE_MODE)"),
+SDATA(data_type_t.DTP_STRING,   "edge_shape",           0,  "curved", "How an edge is drawn: `curved` (the default) or `elbow` -- straight out of its port to the channel between the two rows, along it, and straight into the other port: the bus of an org chart, as mxGraph drew its trees. Layouts with no rows (`rowless_layouts`) keep the curve"),
+SDATA(data_type_t.DTP_LIST,     "rowless_layouts",      sdata_flag_t.SDF_RD, JSON.stringify(["radial", "d3-force", "force-atlas2"]), "Layouts with no rows for an elbow to run between: their edges stay curved whatever `edge_shape` says (read-only, for the parent to query)"),
 SDATA(data_type_t.DTP_BOOLEAN,  "node_labels",          0,  true,   "A `shape` node says its name under the figure. Off, it is a coloured figure and nothing else"),
 SDATA(data_type_t.DTP_BOOLEAN,  "confirm_delete_node",  0,  true,   "Ask confirmation before deleting a node"),
 SDATA(data_type_t.DTP_BOOLEAN,  "confirm_unlink_edge",  0,  true,   "Ask confirmation before unlinking an edge"),
@@ -925,6 +938,9 @@ function register_layouts(gobj)
         _g6_extensions_registered = true;
         register(ExtensionCategory.LAYOUT, 'manual', ManualLayout);
         register(ExtensionCategory.LAYOUT, 'treedb-tree', TreedbTreeLayout);
+        register(ExtensionCategory.LAYOUT, 'treedb-compact', TreedbCompactLayout);
+        register(ExtensionCategory.EDGE, 'treedb-elbow-v', TreedbElbowV);
+        register(ExtensionCategory.EDGE, 'treedb-elbow-h', TreedbElbowH);
         register(ExtensionCategory.LAYOUT, 'treedb-radial', TreedbRadialLayout);
         register(ExtensionCategory.NODE, 'light', LightNode);
         register(ExtensionCategory.NODE, 'treedb-card', TreedbCard);
@@ -2025,9 +2041,17 @@ function layout_direction(gobj)
     return str_in_list(LR_LAYOUTS, gobj.priv.layout)? "LR" : "TB";
 }
 
+/*  A curve, or an elbow when the reader asked for one and the layout
+ *  has rows to run it between.  */
 function edge_type_for(gobj)
 {
-    return (layout_direction(gobj) === "LR")? "cubic-horizontal" : "cubic";
+    let lr = (layout_direction(gobj) === "LR");
+    let rowless = gobj_read_attr(gobj, "rowless_layouts") || [];
+    if(gobj_read_str_attr(gobj, "edge_shape") === "elbow" &&
+       !str_in_list(rowless, gobj.priv.layout)) {
+        return lr? "treedb-elbow-h" : "treedb-elbow-v";
+    }
+    return lr? "cubic-horizontal" : "cubic";
 }
 
 /************************************************************
@@ -4188,6 +4212,55 @@ class TreedbTreeLayout extends BaseLayout
     }
 }
 
+/************************************************************
+ *  An ELBOW edge, the way mxGraph drew a tree: straight out of
+ *  the parent's port to the channel half way to the child, along
+ *  it, and straight into the child's port. The children of one
+ *  hook sit on one row and leave by one port, so they share the
+ *  channel and the lines read as one bus.
+ *
+ *  Computed on every draw from where the two ends ARE, so a
+ *  dragged card, a fold or a layout needs nothing else. `-v` runs
+ *  between rows (top to bottom), `-h` between columns.
+ ************************************************************/
+const ELBOW_RADIUS = 6;
+
+class TreedbElbowV extends Polyline
+{
+    getControlPoints(attributes) {
+        let [s, t] = this.getEndpoints(attributes, false);
+        let mid = (s[1] + t[1]) / 2;
+        return [[s[0], mid], [t[0], mid]];
+    }
+
+    getKeyPath(attributes) {
+        return super.getKeyPath(Object.assign({}, attributes,
+            {radius: attributes.radius || ELBOW_RADIUS}));
+    }
+}
+
+class TreedbElbowH extends Polyline
+{
+    getControlPoints(attributes) {
+        let [s, t] = this.getEndpoints(attributes, false);
+        let mid = (s[0] + t[0]) / 2;
+        return [[mid, s[1]], [mid, t[1]]];
+    }
+
+    getKeyPath(attributes) {
+        return super.getKeyPath(Object.assign({}, attributes,
+            {radius: attributes.radius || ELBOW_RADIUS}));
+    }
+}
+
+class TreedbCompactLayout extends BaseLayout
+{
+    async execute(data, options) {
+        let input = treedb_layout_input(data);
+        return treedb_layout_output(layout_compact(input.nodes, input.edges, options));
+    }
+}
+
 class TreedbRadialLayout extends BaseLayout
 {
     async execute(data, options) {
@@ -10856,6 +10929,25 @@ function ac_set_node_labels(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  Curved or elbow edges (the host's toggle). Nothing moves: every
+ *  edge takes the type that goes with the shape and the layout,
+ *  and draws again.
+ ************************************************************/
+function ac_set_edge_shape(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+
+    let shape = (kw && kw.edge_shape === "elbow")? "elbow" : "curved";
+    gobj_write_str_attr(gobj, "edge_shape", shape);
+    if(!priv.graph || !priv.graph_rendered) {
+        return 0;   /*  every edge is typed as it is drawn  */
+    }
+    apply_layout_direction(gobj);
+    graph_draw(gobj);
+    return 0;
+}
+
 /************************************************************
  *  ONE node opened or closed against the mode (a double click,
  *  or the context menu). It holds still on screen while the
@@ -11499,6 +11591,7 @@ function create_gclass(gclass_name)
             ["EV_SET_LOOSE_TOPICS",         ac_set_loose_topics,    null],
             ["EV_SET_NODE_MODE",            ac_set_node_mode,       null],
             ["EV_SET_NODE_LABELS",          ac_set_node_labels,     null],
+            ["EV_SET_EDGE_SHAPE",           ac_set_edge_shape,      null],
             ["EV_TOGGLE_NODE_MODE",         ac_toggle_node_mode,    null],
             ["EV_NODE_DBLCLICK",            ac_node_dblclick,       null],
             ["EV_CENTER",                   ac_center,              null],
@@ -11566,6 +11659,7 @@ function create_gclass(gclass_name)
         ["EV_SET_LOOSE_TOPICS",         0],
         ["EV_SET_NODE_MODE",            0],
         ["EV_SET_NODE_LABELS",          0],
+        ["EV_SET_EDGE_SHAPE",           0],
         ["EV_TOGGLE_NODE_MODE",         0],
         ["EV_NODE_DBLCLICK",            0],
         ["EV_LEGEND_STATE",             event_flag_t.EVF_OUTPUT_EVENT],

package/src/c_yui_treedb_graph.js

@@ -134,6 +134,7 @@ SDATA(data_type_t.DTP_LIST,     "hidden_topics",    sdata_flag_t.SDF_PERSIST, "[
 SDATA(data_type_t.DTP_STRING,   "main_topic",       sdata_flag_t.SDF_PERSIST, "", "The topic the tree hangs from; empty = deduced by the graph. User preference, per treedb"),
 SDATA(data_type_t.DTP_LIST,     "loose_topics",     sdata_flag_t.SDF_PERSIST, "[]", "Topics whose LOOSE records (no parent) are shown. User preference, per treedb"),
 SDATA(data_type_t.DTP_STRING,   "node_mode",        sdata_flag_t.SDF_PERSIST, "expanded", "How the records are drawn: `expanded` = the cards with their pills and ports, `compact` = one-line pills with the name, `shape` = coloured figures, the topology alone. User preference"),
+SDATA(data_type_t.DTP_STRING,   "edge_shape",       sdata_flag_t.SDF_PERSIST, "curved", "How the edges are drawn: `curved` or `elbow` (the bus of an org chart). User preference"),
 SDATA(data_type_t.DTP_BOOLEAN,  "node_labels",      sdata_flag_t.SDF_PERSIST, true, "A `shape` node says its name under its figure. User preference"),
 SDATA(data_type_t.DTP_DICT,     "camera",           sdata_flag_t.SDF_PERSIST, "{}", "Where the reader left the viewport: {zoom, x, y}. Handed to the engine on creation and written back when a move settles, so the graph opens where it was left. User preference, per treedb"),
 SDATA(data_type_t.DTP_INTEGER,  "fold_level",       sdata_flag_t.SDF_PERSIST, 0, "The level of the MAIN tree the toolbar's stepper stands on: 1 = the main topic's roots, N = N-1 levels under them; 0 = never stepped, `expand_depth`. Handed to the engine on creation, so the graph opens at the level it was left. User preference, per treedb"),
@@ -283,6 +284,7 @@ function mt_create(gobj)
             loose_topics: gobj_read_attr(gobj, "loose_topics") || [],
             node_mode: gobj_read_str_attr(gobj, "node_mode") || "expanded",
             node_labels: gobj_read_bool_attr(gobj, "node_labels"),
+            edge_shape: gobj_read_str_attr(gobj, "edge_shape") || "curved",
             camera: gobj_read_attr(gobj, "camera") || {},
         },
         gobj
@@ -553,6 +555,8 @@ function option_label(name)
             return t("manual");
         case "treedb-tree":
             return t("treedb-tree");
+        case "compact-tree":
+            return t("compact-tree");
         case "radial":
             return t("radial");
         case "dagre":
@@ -623,6 +627,22 @@ function node_shape_items(gobj, wide)
                 }
             }
         ],
+        /*  How the lines are drawn: curves, or the elbows of an org
+         *  chart. A toggle, so a pressed pill; disabled on a layout
+         *  with no rows, where the edges stay curved anyway.  */
+        ['button', {class: 'GRAPH_EDGE_ELBOW button', type: 'button',
+                    style: {height: wide, width: '2.5em'},
+                    title: t('elbow edges'), 'data-i18n-title': 'elbow edges',
+                    'aria-label': t('elbow edges'), 'data-i18n-aria-label': 'elbow edges',
+                    'aria-pressed': 'false'},
+            yui_toolbar_icon('yi-diagram-project'),
+            {
+                click: (evt) => {
+                    evt.stopPropagation();
+                    gobj_send_event(gobj, "EV_TOGGLE_EDGE_SHAPE", {}, gobj);
+                }
+            }
+        ],
     ];
 }
 
@@ -670,6 +690,17 @@ function refresh_node_shape_buttons(gobj, $root)
         $labels.setAttribute('aria-pressed', labels? 'true' : 'false');
         $labels.disabled = (mode !== 'shape');
     }
+
+    let elbow = (gobj_read_str_attr(gobj, "edge_shape") === "elbow");
+    set_pressed_state($root, '.GRAPH_EDGE_ELBOW', elbow);
+    let $elbow = $root.querySelector('.GRAPH_EDGE_ELBOW');
+    if($elbow) {
+        $elbow.setAttribute('aria-pressed', elbow? 'true' : 'false');
+        let child = gobj.priv.gobj_nodes_tree;
+        let rowless = child? (gobj_read_attr(child, "rowless_layouts") || []) : [];
+        let layout = child? gobj_read_str_attr(child, "layout") : "";
+        $elbow.disabled = rowless.includes(layout);
+    }
 }
 
 /************************************************************
@@ -1317,6 +1348,7 @@ function populate_nodes_tree_options(gobj)
             $layout_select.value = current_layout;
         }
         refresh_layout_stepper(gobj);
+        refresh_node_shape_buttons(gobj, $container);
     }
 
     // Restore persisted operation_mode selection
@@ -2612,6 +2644,7 @@ function ac_set_layout(gobj, event, kw, src)
         gobj
     );
     refresh_layout_stepper(gobj);
+    refresh_node_shape_buttons(gobj, priv.$container);
 
     return 0;
 }
@@ -3114,6 +3147,7 @@ function ac_layout_autoset(gobj, event, kw, src)
     }
     $select.value = layout;
     refresh_layout_stepper(gobj);
+    refresh_node_shape_buttons(gobj, $container);
     return 0;
 }
 
@@ -3211,6 +3245,20 @@ function ac_set_node_mode(gobj, event, kw, src)
     return 0;
 }
 
+function ac_toggle_edge_shape(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    let shape = (gobj_read_str_attr(gobj, "edge_shape") === "elbow")? "curved" : "elbow";
+
+    gobj_write_str_attr(gobj, "edge_shape", shape);
+    gobj_save_persistent_attrs(gobj, "edge_shape");
+    refresh_node_shape_buttons(gobj, priv.$container);
+    if(priv.gobj_nodes_tree) {
+        gobj_send_event(priv.gobj_nodes_tree, "EV_SET_EDGE_SHAPE", {edge_shape: shape}, gobj);
+    }
+    return 0;
+}
+
 function ac_toggle_node_labels(gobj, event, kw, src)
 {
     let priv = gobj.priv;
@@ -3393,6 +3441,7 @@ function create_gclass(gclass_name)
             ["EV_COLLAPSE_LEVEL",           ac_fold_level_step,         null],
             ["EV_SET_NODE_MODE",            ac_set_node_mode,           null],
             ["EV_TOGGLE_NODE_LABELS",       ac_toggle_node_labels,      null],
+            ["EV_TOGGLE_EDGE_SHAPE",        ac_toggle_edge_shape,       null],
             ["EV_LAYOUT_AUTOSET",           ac_layout_autoset,          null],
             ["EV_CAMERA_CHANGED",           ac_camera_changed,          null],
             ["EV_LEGEND_TOPIC",             ac_legend_topic,            null],
@@ -3439,6 +3488,7 @@ function create_gclass(gclass_name)
         ["EV_COLLAPSE_LEVEL",           0],
         ["EV_SET_NODE_MODE",            0],
         ["EV_TOGGLE_NODE_LABELS",       0],
+        ["EV_TOGGLE_EDGE_SHAPE",        0],
         ["EV_FIND_RESULT",              0],
         ["EV_LAYOUT_AUTOSET",           0],
         ["EV_CAMERA_CHANGED",           0],

package/src/treedb_layout.js

@@ -274,6 +274,264 @@ function tidy_tree_lr(nodes, edges, o)
     return pos;
 }
 
+/************************************************************
+ *  The compact tree.
+ *
+ *  The tidy tree above gives every subtree its whole BLOCK: open a
+ *  hall with twenty-four devices and its block widens, and with it
+ *  every block above it, so the siblings of its ancestors move apart
+ *  at depths where nothing of theirs touches. This one keeps the
+ *  CONTOUR of each subtree instead -- its outline on each side, depth
+ *  by depth -- and slides every sibling against the outline of the
+ *  ones before it. A folded region then sits as close to an open one
+ *  as their cards allow at each depth, which is what a folded treedb
+ *  is: one branch open among closed ones.
+ *
+ *  Same spanning tree, same order, same rows as the tidy tree: only
+ *  the packing across the depths differs, so switching between the
+ *  two moves cards sideways and never reorders them.
+ *
+ *  The contour arithmetic is Moen's ("Drawing dynamic trees", IEEE
+ *  Software, 1990) in the form mxGraph gave it in mxCompactTreeLayout
+ *  -- Copyright (c) 2006-2015 JGraph Ltd, Apache License 2.0 -- read in
+ *  maxGraph's CompactTreeLayout.ts: leaf, join, merge, offset and
+ *  bridge below follow that form. What is ours: it runs on the
+ *  spanning tree of a FOREST, every depth is a row as wide as its
+ *  widest card (mxGraph's `alignRanks`), several roots sit side by
+ *  side, and there is no recursion.
+ ************************************************************/
+export function layout_compact(nodes, edges, opts)
+{
+    let o = Object.assign({}, DEFAULTS, opts || {});
+    if(o.direction === "LR") {
+        return compact_tree_lr(nodes, edges, o);
+    }
+    let transposed = nodes.map((n) => Object.assign({}, n, {w: n.h, h: n.w}));
+    let lr = compact_tree_lr(transposed, edges, o);
+    let pos = new Map();
+    for(let [id, p] of lr) {
+        pos.set(id, {x: p.y, y: p.x});
+    }
+    return pos;
+}
+
+/*  One segment of a contour: a step of `dx` along the depth and `dy`
+ *  across it, then the next segment.  */
+function contour_line(dx, dy, next)
+{
+    return {dx: dx, dy: dy, next: next || null};
+}
+
+/*  How far the segment (a1, a2) at (p1, p2) has to move across to
+ *  clear the segment (b1, b2) at the origin.  */
+function contour_offset(p1, p2, a1, a2, b1, b2)
+{
+    if(b1 <= p1 || p1 + a1 <= 0) {
+        return 0;
+    }
+    let d;
+    let t = b1 * a2 - a1 * b2;
+    if(t > 0) {
+        if(p1 < 0) {
+            d = (p1 * a2) / a1 - p2;
+        } else if(p1 > 0) {
+            d = (p1 * b2) / b1 - p2;
+        } else {
+            d = -p2;
+        }
+    } else if(b1 < p1 + a1) {
+        d = b2 - (p2 + ((b1 - p1) * a2) / a1);
+    } else if(b1 > p1 + a1) {
+        d = ((a1 + p1) * b2) / b1 - (p2 + a2);
+    } else {
+        d = b2 - (p2 + a2);
+    }
+    return (d > 0)? d : 0;
+}
+
+function contour_bridge(line1, x1, y1, line2, x2, y2)
+{
+    let dx = x2 + line2.dx - x1;
+    let dy = (line2.dx === 0)? line2.dy : (dx * line2.dy) / line2.dx;
+    let r = contour_line(dx, dy, line2.next);
+    line1.next = contour_line(0, y2 + line2.dy - dy - y1, r);
+    return r;
+}
+
+/*  Slide contour `p2` against `p1` until they clear; returns how far,
+ *  and leaves in `p1` the outline of the two together.  */
+function contour_merge(p1, p2)
+{
+    let x = 0;
+    let y = 0;
+    let total = 0;
+    let upper = p1.lower_head;
+    let lower = p2.upper_head;
+
+    while(lower && upper) {
+        let d = contour_offset(x, y, lower.dx, lower.dy, upper.dx, upper.dy);
+        y += d;
+        total += d;
+        if(x + lower.dx <= upper.dx) {
+            x += lower.dx;
+            y += lower.dy;
+            lower = lower.next;
+        } else {
+            x -= upper.dx;
+            y -= upper.dy;
+            upper = upper.next;
+        }
+    }
+
+    if(lower) {
+        let b = contour_bridge(p1.upper_tail, 0, 0, lower, x, y);
+        p1.upper_tail = b.next? p2.upper_tail : b;
+        p1.lower_tail = p2.lower_tail;
+    } else {
+        let b = contour_bridge(p2.lower_tail, x, y, upper, 0, 0);
+        if(!b.next) {
+            p1.lower_tail = b;
+        }
+    }
+    p1.lower_head = p2.lower_head;
+    return total;
+}
+
+function compact_tree_lr(nodes, edges, o)
+{
+    let t = spanning_tree(nodes, edges);
+    let order = walk_order(t);
+    let pos = new Map();
+
+    /*  Columns, as in the tidy tree: a depth is as wide as its widest
+     *  card, and a column's gap is `ranksep`.  */
+    let col_w = [];
+    for(let [id, d] of t.depth) {
+        col_w[d] = Math.max(col_w[d] || 0, t.by_id.get(id).w);
+    }
+    let col_x = [];
+    let x = 0;
+    for(let d = 0; d < col_w.length; d++) {
+        col_x[d] = x;
+        x += (col_w[d] || 0) + o.ranksep;
+    }
+
+    /*  mxGraph's nodeDistance is padding on EACH side of a card, so two
+     *  neighbours end `nodesep` apart; its levelDistance is what is
+     *  left of the column gap after that padding.  */
+    let pad = o.nodesep / 2;
+    let dist = o.nodesep;
+    let level_distance = o.ranksep - pad;
+
+    /*  `len` along the depth (the column's width: the rows are aligned),
+     *  `ext` across it (the card's own height).  */
+    let tn = new Map();
+    for(let id of order) {
+        tn.set(id, {
+            len: col_w[t.depth.get(id)],
+            ext: t.by_id.get(id).h,
+            off_x: 0,
+            off_y: 0,
+            y: 0,
+            contour: null,
+        });
+    }
+
+    /*  Contours, children before parents.  */
+    for(let i = order.length - 1; i >= 0; i--) {
+        let id = order[i];
+        let n = tn.get(id);
+        let kids = t.children.get(id) || [];
+
+        if(!kids.length) {
+            let upper = contour_line(n.len + dist, 0);
+            let lower_tail = contour_line(0, -n.ext - dist);
+            n.contour = {
+                upper_head: upper,
+                upper_tail: upper,
+                lower_tail: lower_tail,
+                lower_head: contour_line(n.len + dist, 0, lower_tail),
+            };
+            continue;
+        }
+
+        /*  join: the children side by side, each slid against the
+         *  outline of the ones before it.  */
+        let first = tn.get(kids[0]);
+        n.contour = first.contour;
+        let h = first.ext + dist;
+        let span = h;
+        for(let k = 1; k < kids.length; k++) {
+            let kid = tn.get(kids[k]);
+            let d = contour_merge(n.contour, kid.contour);
+            kid.off_y = d + h;
+            kid.off_x = 0;
+            h = kid.ext + dist;
+            span += d + h;
+        }
+
+        /*  attach: the parent centred across the span of its children,
+         *  one column before them.  */
+        let gap = pad + level_distance;
+        let y2 = (span - n.ext) / 2 - pad;
+        let y1 = y2 + n.ext + 2 * pad - span;
+        first.off_x = gap + n.len;
+        first.off_y = y1;
+        n.contour.upper_head = contour_line(n.len, 0,
+                                   contour_line(gap, y1, n.contour.upper_head));
+        n.contour.lower_head = contour_line(n.len, 0,
+                                   contour_line(gap, y2, n.contour.lower_head));
+    }
+
+    /*  Positions across, parents before children: the first child at
+     *  its offset from the parent, each next one at its offset from
+     *  the one before.  */
+    let root_of = new Map();
+    for(let id of order) {
+        let n = tn.get(id);
+        if(!root_of.has(id)) {
+            root_of.set(id, id);
+        }
+        let kids = t.children.get(id) || [];
+        if(!kids.length) {
+            continue;
+        }
+        let running = n.y + tn.get(kids[0]).off_y;
+        tn.get(kids[0]).y = running;
+        root_of.set(kids[0], root_of.get(id));
+        for(let k = 1; k < kids.length; k++) {
+            let kid = tn.get(kids[k]);
+            kid.y = running + kid.off_y;
+            running = kid.y;
+            root_of.set(kids[k], root_of.get(id));
+        }
+    }
+
+    /*  Several roots: each tree after the one before, by its extent.  */
+    let lo = new Map();
+    let hi = new Map();
+    for(let id of order) {
+        let r = root_of.get(id);
+        let n = tn.get(id);
+        lo.set(r, Math.min(lo.has(r)? lo.get(r) : Infinity, n.y));
+        hi.set(r, Math.max(hi.has(r)? hi.get(r) : -Infinity, n.y + n.ext));
+    }
+    let shift = new Map();
+    let top = 0;
+    for(let r of t.roots) {
+        shift.set(r, top - lo.get(r));
+        top += hi.get(r) - lo.get(r) + o.nodesep * 2;
+    }
+
+    for(let id of order) {
+        let d = t.depth.get(id);
+        let n = tn.get(id);
+        let y = n.y + shift.get(root_of.get(id));
+        pos.set(id, {x: col_x[d] + col_w[d] / 2, y: y + n.ext / 2});
+    }
+    return pos;
+}
+
 /*  How much of a card lies along the direction `a`: the projection
  *  of its rectangle on that direction. Full width when the card is
  *  read along its width, full height across it, and the honest

package/src/treedb_layout.test.js

@@ -6,7 +6,7 @@
  *      tidy tree's rows and centring, the radial tree's rings.
  ***********************************************************************/
 import { describe, test, expect } from "vitest";
-import { spanning_tree, layout_tree, layout_radial } from "./treedb_layout.js";
+import { spanning_tree, layout_tree, layout_radial, layout_compact } from "./treedb_layout.js";
 
 /*  es -> (norte, sur); norte -> nave; nave -> d0, d1 (hook rank 1) and
  *  c1 (hook rank 2); c1 -> d0 as well (second parent).  */
@@ -97,6 +97,107 @@ describe("the tidy tree, read down (the default)", () => {
     });
 });
 
+/*  Every two cards of one row stand at least `gap` apart.  */
+function expect_no_overlap_in_rows(list, pos, gap)
+{
+    for(let i = 0; i < list.length; i++) {
+        for(let j = i + 1; j < list.length; j++) {
+            let a = list[i];
+            let b = list[j];
+            let pa = pos.get(a.id);
+            let pb = pos.get(b.id);
+            if(Math.abs(pa.y - pb.y) > 1e-6) {
+                continue;
+            }
+            expect(Math.abs(pa.x - pb.x) + 1e-6).toBeGreaterThanOrEqual((a.w + b.w) / 2 + gap);
+        }
+    }
+}
+
+function width_of(list, pos)
+{
+    let lo = Infinity;
+    let hi = -Infinity;
+    for(let n of list) {
+        let p = pos.get(n.id);
+        lo = Math.min(lo, p.x - n.w / 2);
+        hi = Math.max(hi, p.x + n.w / 2);
+    }
+    return hi - lo;
+}
+
+/*  r -> a, b;  a -> hall -> six devices;  b is a closed sibling.  */
+const wide = [N("r", 172, 96), N("a", 172, 96), N("b", 172, 96), N("hall", 172, 96)]
+    .concat([0, 1, 2, 3, 4, 5].map((i) => N(`d${i}`, 116, 40)));
+const wide_edges = [
+    {source: "r", target: "a"}, {source: "r", target: "b"}, {source: "a", target: "hall"},
+].concat([0, 1, 2, 3, 4, 5].map((i) => ({source: "hall", target: `d${i}`})));
+
+describe("the compact tree", () => {
+    test("the rows are the tidy tree's rows", () => {
+        let tidy = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100});
+        let pos = layout_compact(nodes, edges, {nodesep: 10, ranksep: 100});
+        for(let n of nodes) {
+            expect(pos.get(n.id).y).toBe(tidy.get(n.id).y);
+        }
+    });
+
+    test("no two cards of a row are closer than the gap", () => {
+        expect_no_overlap_in_rows(nodes, layout_compact(nodes, edges, {nodesep: 10, ranksep: 100}), 10);
+        expect_no_overlap_in_rows(wide, layout_compact(wide, wide_edges, {nodesep: 18, ranksep: 90}), 18);
+    });
+
+    test("a parent is centred over its children, which keep their order", () => {
+        let pos = layout_compact(nodes, edges, {nodesep: 10, ranksep: 100});
+        expect(pos.get("d0").x).toBeLessThan(pos.get("d1").x);
+        expect(pos.get("d1").x).toBeLessThan(pos.get("c1").x);
+        let first = pos.get("d0").x - 58;
+        let last = pos.get("c1").x + 86;
+        expect(pos.get("nave").x).toBeCloseTo((first + last) / 2, 6);
+        expect(pos.get("norte").x).toBeLessThan(pos.get("sur").x);
+    });
+
+    test("a closed sibling sits beside an open branch, not beside its block", () => {
+        let opts = {nodesep: 18, ranksep: 90};
+        let tidy = layout_tree(wide, wide_edges, opts);
+        let pos = layout_compact(wide, wide_edges, opts);
+        /*  In the tidy tree `b` waits for the whole fan of devices; here it
+         *  only has to clear `a`, the card beside it.  */
+        expect(pos.get("b").x - pos.get("a").x).toBeLessThan(tidy.get("b").x - tidy.get("a").x);
+        expect(pos.get("b").x - pos.get("a").x).toBeGreaterThanOrEqual(172 + 18 - 1e-6);
+        expect(width_of(wide, pos)).toBeLessThanOrEqual(width_of(wide, tidy));
+    });
+
+    test("two trees sit side by side, not overlapped", () => {
+        let pos = layout_compact([N("a", 100, 50), N("b", 100, 50)], [], {nodesep: 10});
+        expect(pos.get("b").x - pos.get("a").x).toBe(100 + 20);
+    });
+
+    test("read right, it is the same tree with the axes swapped", () => {
+        let down = layout_compact(wide, wide_edges, {nodesep: 18, ranksep: 90});
+        let swapped = wide.map((n) => N(n.id, n.h, n.w));
+        let right = layout_compact(swapped, wide_edges, {nodesep: 18, ranksep: 90, direction: "LR"});
+        for(let n of wide) {
+            expect(right.get(n.id).x).toBeCloseTo(down.get(n.id).y, 6);
+            expect(right.get(n.id).y).toBeCloseTo(down.get(n.id).x, 6);
+        }
+    });
+
+    test("a tree as deep as the data places every node, without recursion", () => {
+        let chain = [];
+        let links = [];
+        for(let i = 0; i < 5000; i++) {
+            chain.push(N(`n${i}`, 40, 20));
+            if(i > 0) {
+                links.push({source: `n${i - 1}`, target: `n${i}`});
+            }
+        }
+        let pos = layout_compact(chain, links, {});
+        expect(pos.size).toBe(5000);
+        expect(Number.isFinite(pos.get("n4999").x)).toBe(true);
+    });
+});
+
 describe("the tidy tree, read right", () => {
     test("depths are columns; a column is as wide as its widest card", () => {
         let pos = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100, direction: "LR"});

package/src/yui_icons.css

@@ -444,3 +444,9 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm11.3-387.3l104 104c4.6 4.6 5.9 11.5 3.5 17.4S366.5 256 360 256l-56 0 0 96c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-96-56 0c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.9 3.5-17.4l104-104c6.2-6.2 16.4-6.2 22.6 0z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm11.3-387.3l104 104c4.6 4.6 5.9 11.5 3.5 17.4S366.5 256 360 256l-56 0 0 96c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-96-56 0c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.9 3.5-17.4l104-104c6.2-6.2 16.4-6.2 22.6 0z'/%3E%3C/svg%3E");
 }
+
+/*  Elbow edges: boxes joined by right-angled lines (FontAwesome Free 7.3.1). */
+.yi-diagram-project::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 16 128 0 0-16c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-16-128 0 0 16c0 7.3-1.7 14.3-4.6 20.5l68.6 91.5 80 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-7.3 1.7-14.3 4.6-20.5L128 224 48 224c-26.5 0-48-21.5-48-48L0 80z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 16 128 0 0-16c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-16-128 0 0 16c0 7.3-1.7 14.3-4.6 20.5l68.6 91.5 80 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-7.3 1.7-14.3 4.6-20.5L128 224 48 224c-26.5 0-48-21.5-48-48L0 80z'/%3E%3C/svg%3E");
+}