@yuneta/gobj-ui 7.23.153 → 7.23.154

package/src/treedb_elbow.js

@@ -34,6 +34,12 @@
  *        farthest turns lowest -- the two orders in which the lines of
  *        one end nest without crossing.
  *
+ *      - A card in a lower row of a STACK (treedb_layout.js lays a
+ *        run of leaf children out as two columns with a corridor
+ *        between them): the card above it stands in the way of the
+ *        channel, so its edge runs down the corridor in a lane of
+ *        its own -- a COMB -- and turns into the gap above its card.
+ *
  *      Written for the top-down reading; left to right is the same
  *      geometry with the axes swapped.
  *
@@ -41,6 +47,8 @@
  *          All Rights Reserved.
  ***********************************************************************/
 
+import {STACK_GAP, STACK_LANE_PAD, STACK_LANE_STEP, STACK_TRUNK_MIN} from "./treedb_layout.js";
+
 export const ELBOW_STEP = 10;      /*  between two lanes  */
 export const ELBOW_JETTY = 16;     /*  straight run out of a port before a detour turns  */
 export const ELBOW_CLEAR = 24;     /*  how far outside the two cards a detour runs  */
@@ -92,6 +100,154 @@ function swap_box(b)
     return {x1: b.y1, y1: b.x1, x2: b.y2, y2: b.x2};
 }
 
+/*  Where a forward edge turns between `lo` and `hi`: the middle, or
+ *  its staggered place among the edges sharing one of its ends --
+ *  leaving, the farthest highest; arriving, the farthest lowest.  */
+function staggered_turn(lo, hi, st)
+{
+    let mid = (lo + hi) / 2;
+    let group = null;
+    let k = 0;
+    if(st.dep && st.dep.count > 1) {
+        group = st.dep;
+        k = st.dep.rank;
+    } else if(st.arr && st.arr.count > 1) {
+        group = st.arr;
+        k = st.arr.count - 1 - st.arr.rank;
+    }
+    if(group) {
+        let room = Math.max(0, hi - lo - 2 * ELBOW_STAGGER_PAD);
+        let step = Math.min(ELBOW_STEP, room / (group.count - 1));
+        mid = mid - (group.count - 1) * step / 2 + k * step;
+    }
+    return mid;
+}
+
+/************************************************************
+ *  The combs of the stacks under one card.
+ *
+ *  treedb_layout.js lays a run of leaf children out as two columns
+ *  with a corridor between them. A card in the first row is reached
+ *  from the channel like any other; one in a lower row cannot be --
+ *  the card above it stands in the way -- so its edge runs down
+ *  the corridor in a LANE of its own and turns into the gap above
+ *  its card, which it shares only with the other card of its row,
+ *  reached from the other side.
+ *
+ *      targets     [{id, box}]: the forward edges leaving one card,
+ *                  each with the box of the card it reaches
+ *      vertical    as in elbow_points; false swaps the boxes
+ *
+ *  Returns Map id -> {lane, z, top}: the lane, the height of the
+ *  gap it turns into, and the top of the stack's first row (where
+ *  the channel over the stack ends). Only for a card that stands
+ *  under another of the group, within a stack gap and lined up
+ *  with it on the corridor side -- what a stack looks like.
+ *
+ *  Lanes go outermost first, row by row: a line into a higher row
+ *  keeps outside the lines going deeper, and none crosses another.
+ ************************************************************/
+export function elbow_combs(targets, vertical)
+{
+    let list = vertical? targets : targets.map((it) => ({id: it.id, box: swap_box(it.box)}));
+    let cy = (b) => (b.y1 + b.y2) / 2;
+    let near = (a, b) => Math.abs(a - b) < 1.5;
+
+    let under = [];
+    for(let it of list) {
+        let b = it.box;
+        let above = null;
+        for(let o of list) {
+            let a = o.box;
+            if(o === it || a.y2 > b.y1 || b.y1 - a.y2 > STACK_GAP) {
+                continue;
+            }
+            if(!(near(a.x2, b.x2) || near(a.x1, b.x1))) {
+                continue;
+            }
+            if(!above || a.y2 > above.y2) {
+                above = a;
+            }
+        }
+        if(!above) {
+            continue;
+        }
+        /*  Its column: lined up on the corridor side, which is the
+         *  right edge of the first column and the left edge of the
+         *  second. Two cards of one width line up on both; then the
+         *  card beside it in its row says.  */
+        let side;
+        if(near(above.x2, b.x2) && !near(above.x1, b.x1)) {
+            side = 0;
+        } else if(near(above.x1, b.x1) && !near(above.x2, b.x2)) {
+            side = 1;
+        } else {
+            let left_of_it = list.some((o) => o !== it && near(cy(o.box), cy(b)) &&
+                                               o.box.x2 <= b.x1);
+            side = left_of_it? 1 : 0;
+        }
+        under.push({id: it.id, box: b, above: above, side: side});
+    }
+
+    /*  The corridor of a card: from the first column's edge to the
+     *  second's, read off any row of the stack that has both.  */
+    let corridor = (u) => {
+        if(u.side === 0) {
+            let l = u.box.x2;
+            let col = list.filter((o) => near(o.box.x2, l));
+            let r = Infinity;
+            for(let c of col) {
+                for(let o of list) {
+                    if(o !== c && near(cy(o.box), cy(c.box)) && o.box.x1 >= l - 0.5) {
+                        r = Math.min(r, o.box.x1);
+                    }
+                }
+            }
+            return {l: l, r: isFinite(r)? r : l + STACK_TRUNK_MIN, col: col};
+        }
+        let r = u.box.x1;
+        let col = list.filter((o) => near(o.box.x1, r));
+        let l = -Infinity;
+        for(let c of col) {
+            for(let o of list) {
+                if(o !== c && near(cy(o.box), cy(c.box)) && o.box.x2 <= r + 0.5) {
+                    l = Math.max(l, o.box.x2);
+                }
+            }
+        }
+        return {l: isFinite(l)? l : r - STACK_TRUNK_MIN, r: r, col: col};
+    };
+
+    let groups = new Map();
+    for(let u of under) {
+        let c = corridor(u);
+        u.top = Math.min(...c.col.map((o) => o.box.y1));
+        let key = `${Math.round(c.l)}|${Math.round(c.r)}`;
+        if(!groups.has(key)) {
+            groups.set(key, {l: c.l, r: c.r, left: [], right: []});
+        }
+        groups.get(key)[(u.side === 0)? 'left' : 'right'].push(u);
+    }
+
+    let out = new Map();
+    for(let g of groups.values()) {
+        g.left.sort((a, b) => a.box.y1 - b.box.y1);
+        g.right.sort((a, b) => a.box.y1 - b.box.y1);
+        let n = g.left.length + g.right.length;
+        let room = g.r - g.l - 2 * STACK_LANE_PAD;
+        let step = (n > 1)? Math.max(0, Math.min(STACK_LANE_STEP, room / (n - 1))) : 0;
+        g.left.forEach((u, i) => {
+            out.set(u.id, {lane: g.l + STACK_LANE_PAD + i * step,
+                           z: (u.above.y2 + u.box.y1) / 2, top: u.top});
+        });
+        g.right.forEach((u, j) => {
+            out.set(u.id, {lane: g.r - STACK_LANE_PAD - j * step,
+                           z: (u.above.y2 + u.box.y1) / 2, top: u.top});
+        });
+    }
+    return out;
+}
+
 /************************************************************
  *  The control points of an elbow from the port `s` to the port
  *  `t` ([x, y] each), knowing the boxes of the two cards
@@ -99,10 +255,12 @@ function swap_box(b)
  *
  *      vertical    the rows are stacked (top to bottom); false
  *                  when they are side by side (left to right)
- *      stagger     {dep, arr}: the edge's rank among the forward
- *                  edges leaving its source card and among those
- *                  reaching its target card (elbow_rank). Absent,
- *                  the channel is the middle.
+ *      stagger     {dep, arr, comb}: the edge's rank among the
+ *                  forward edges leaving its source card and among
+ *                  those reaching its target card (elbow_rank), and
+ *                  its comb when the target is in a lower row of a
+ *                  stack (elbow_combs). Absent, the channel is the
+ *                  middle.
  ************************************************************/
 export function elbow_points(s, t, box_s, box_t, lane, vertical, stagger)
 {
@@ -115,27 +273,20 @@ export function elbow_points(s, t, box_s, box_t, lane, vertical, stagger)
 
     /*  Forward: the channel half way between the two cards, each
      *  edge of a shared end at its own height round it, moved by the
-     *  lane, and kept between the two rows.  */
+     *  lane, and kept between the two rows. Into a lower row of a
+     *  stack: along the channel to its corridor lane, down the lane,
+     *  and into the gap above its card.  */
     if(t[1] - s[1] > 2 * ELBOW_STEP) {
-        let lo = Math.max(s[1], box_s.y2);
-        let hi = Math.min(t[1], box_t.y1);
-        let mid = (lo + hi) / 2;
         let st = stagger || {};
-        let group = null;
-        let k = 0;
-        if(st.dep && st.dep.count > 1) {
-            group = st.dep;
-            k = st.dep.rank;                          /*  farthest highest  */
-        } else if(st.arr && st.arr.count > 1) {
-            group = st.arr;
-            k = st.arr.count - 1 - st.arr.rank;       /*  farthest lowest  */
-        }
-        if(group) {
-            let room = Math.max(0, hi - lo - 2 * ELBOW_STAGGER_PAD);
-            let step = Math.min(ELBOW_STEP, room / (group.count - 1));
-            mid = mid - (group.count - 1) * step / 2 + k * step;
+        let lo = Math.max(s[1], box_s.y2);
+        if(st.comb) {
+            let c = st.comb;
+            let turn = staggered_turn(lo, c.top, {dep: st.dep}) + shift;
+            turn = Math.min(Math.max(turn, lo + 4), c.top - 4);
+            return [[s[0], turn], [c.lane, turn], [c.lane, c.z], [t[0], c.z]];
         }
-        mid += shift;
+        let hi = Math.min(t[1], box_t.y1);
+        let mid = staggered_turn(lo, hi, st) + shift;
         mid = Math.min(Math.max(mid, lo + 4), hi - 4);
         return [[s[0], mid], [t[0], mid]];
     }
@@ -429,6 +580,12 @@ export function elbow_route(s, t, box_s, box_t, lane, vertical, boxes, stagger)
                            others.map(swap_box), stagger).map(swap);
     }
 
+    /*  A comb runs where the layout left room for it: its corridor
+     *  and its gap are empty by construction.  */
+    if(stagger && stagger.comb) {
+        return elbow_points(s, t, box_s, box_t, lane, true, stagger);
+    }
+
     let simple = elbow_points(s, t, box_s, box_t, lane, true, stagger);
     if(!elbow_path_hits([s, ...simple, t], others, box_s, box_t)) {
         return simple;

package/src/treedb_elbow.test.js

@@ -7,8 +7,10 @@
  ***********************************************************************/
 import { describe, test, expect } from "vitest";
 import {
-    elbow_lane, elbow_points, elbow_route, elbow_path_hits, elbow_rank, ELBOW_STEP, ELBOW_CLEAR,
+    elbow_lane, elbow_points, elbow_route, elbow_path_hits, elbow_rank, elbow_combs,
+    ELBOW_STEP, ELBOW_CLEAR,
 } from "./treedb_elbow.js";
+import { layout_compact } from "./treedb_layout.js";
 
 /*  Two cards 100x40: A on top, B one row below it.  */
 const A = {x1: 0, y1: 0, x2: 100, y2: 40};
@@ -271,6 +273,89 @@ describe("edges sharing an end are staggered", () => {
     });
 });
 
+describe("the comb of a stack", () => {
+    /*  A parent over eight leaves, laid out by the compact tree (a
+     *  stack: four rows of two). Boxes as the graph measures them,
+     *  with 14px ports sticking 7px out of the top and bottom.  */
+    const P = {id: "p", w: 172, h: 96};
+    const LEAVES = [0, 1, 2, 3, 4, 5, 6, 7].map((i) => ({id: `l${i}`, w: 116, h: 40}));
+    const pos = layout_compact([P, ...LEAVES], LEAVES.map((l) => ({source: "p", target: l.id})),
+                               {nodesep: 18, ranksep: 90});
+    const box = (n) => {
+        let c = pos.get(n.id);
+        return {x1: c.x - n.w / 2, y1: c.y - n.h / 2 - 7, x2: c.x + n.w / 2, y2: c.y + n.h / 2 + 7};
+    };
+    const BOX_P = box(P);
+    const PORT = [pos.get("p").x, pos.get("p").y + 48];
+    const targets = LEAVES.map((l, i) => ({id: `e-${i + 1}`, box: box(l), leaf: l}));
+    const combs = elbow_combs(targets.map((t) => ({id: t.id, box: t.box})), true);
+    const paths = targets.map((t) => {
+        let comb = combs.get(t.id) || null;
+        let items = targets.map((u) => {
+            let c = combs.get(u.id);
+            let far = c? c.lane : pos.get(u.leaf.id).x;
+            return {id: u.id, span: Math.abs(far - PORT[0])};
+        });
+        let end = [pos.get(t.leaf.id).x, t.box.y1 + 7];
+        let pts = elbow_points(PORT, end, BOX_P, t.box, 0, true,
+                               {dep: elbow_rank(items, t.id), comb: comb});
+        return {id: t.id, box: t.box, full: [PORT, ...pts, end]};
+    });
+
+    test("only the cards under another card get a comb", () => {
+        expect(combs.size).toBe(6);
+        expect(combs.has("e-1")).toBe(false);
+        expect(combs.has("e-2")).toBe(false);
+    });
+
+    test("no line crosses a card", () => {
+        let all = [BOX_P, ...targets.map((t) => t.box)];
+        for(let p of paths) {
+            expect(elbow_path_hits(p.full, all, BOX_P, p.box)).toBe(false);
+        }
+    });
+
+    test("no two lines lie on each other past the stub of the port", () => {
+        /*  Two axis-aligned segments overlap when they are on one line
+         *  and share more than a point of it.  */
+        let overlap = (a, b, c, d) => {
+            let va = a[0] === b[0];
+            let vc = c[0] === d[0];
+            let ha = a[1] === b[1];
+            let hc = c[1] === d[1];
+            if(va && vc && Math.abs(a[0] - c[0]) < 0.5) {
+                return Math.min(Math.max(a[1], b[1]), Math.max(c[1], d[1])) -
+                       Math.max(Math.min(a[1], b[1]), Math.min(c[1], d[1])) > 0.5;
+            }
+            if(ha && hc && Math.abs(a[1] - c[1]) < 0.5) {
+                return Math.min(Math.max(a[0], b[0]), Math.max(c[0], d[0])) -
+                       Math.max(Math.min(a[0], b[0]), Math.min(c[0], d[0])) > 0.5;
+            }
+            return false;
+        };
+        for(let i = 0; i < paths.length; i++) {
+            for(let j = i + 1; j < paths.length; j++) {
+                let A = paths[i].full;
+                let B = paths[j].full;
+                for(let m = 1; m + 1 < A.length; m++) {
+                    for(let n = 1; n + 1 < B.length; n++) {
+                        expect(overlap(A[m], A[m + 1], B[n], B[n + 1])).toBe(false);
+                    }
+                }
+            }
+        }
+    });
+
+    test("a comb is drawn as laid out, not routed", () => {
+        let t = targets[6];
+        let c = combs.get(t.id);
+        let end = [pos.get(t.leaf.id).x, t.box.y1 + 7];
+        let st = {comb: c};
+        expect(elbow_route(PORT, end, BOX_P, t.box, 0, true, [BOX_P, ...targets.map((u) => u.box)], st))
+            .toEqual(elbow_points(PORT, end, BOX_P, t.box, 0, true, st));
+    });
+});
+
 describe("the ports are obstacles too", () => {
     /*  Whole-node boxes: a port of 14px sticks 7px out of the bottom
      *  and the top of each card.  */

package/src/treedb_layout.js

@@ -291,6 +291,14 @@ function tidy_tree_lr(nodes, edges, o)
  *  the packing across the depths differs, so switching between the
  *  two moves cards sideways and never reorders them.
  *
+ *  And a run of three or more LEAF children -- a hall's devices, a
+ *  region's places when none is open -- is STACKED: two columns
+ *  under the parent with a corridor between them, row after row.
+ *  That is what makes it compact when a whole level is open, where
+ *  the contour alone gains nothing: every parent needed the whole
+ *  row of its children beside it. The tree grows taller instead of
+ *  wider. Its elbow edges run down the corridor (elbow_combs).
+ *
  *  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
@@ -397,12 +405,125 @@ function contour_merge(p1, p2)
     return total;
 }
 
+/*  How the compact tree STACKS a run of leaf children: two columns
+ *  under their parent, a CORRIDOR between them that the elbow edges
+ *  run down (treedb_elbow.js, elbow_combs), a gap between the rows
+ *  that they turn into. The corridor is sized here from how many
+ *  lines will run down it; the edges count the lanes from where the
+ *  cards stand.  */
+export const STACK_MIN_RUN = 3;        /*  shorter runs stay in the row  */
+export const STACK_GAP = 40;           /*  between two rows of a stack  */
+export const STACK_LANE_PAD = 10;      /*  from a column to its first lane  */
+export const STACK_LANE_STEP = 6;      /*  between two lanes  */
+export const STACK_TRUNK_MIN = 36;
+
+/*  The corridor of a stack of `k` cards: every card below the first
+ *  row gets a lane.  */
+export function stack_trunk_width(k)
+{
+    let lanes = Math.max(0, k - 2);
+    return Math.max(STACK_TRUNK_MIN,
+                    2 * STACK_LANE_PAD + Math.max(0, lanes - 1) * STACK_LANE_STEP);
+}
+
+/*  A stack in the LR frame (depth along x, siblings along y): `side`
+ *  is how far each column reaches across, `starts`/`row_len` where
+ *  each row begins and how long it is along the depth. Its first row
+ *  IS the depth's column, so it lines up with every other card there.  */
+function stack_geometry(t, st, col_x, col_w)
+{
+    let d = st.depth;
+    let k = st.ids.length;
+    let rows = Math.ceil(k / 2);
+    let side = [0, 0];
+    let row_len = [];
+    for(let i = 0; i < k; i++) {
+        let n = t.by_id.get(st.ids[i]);
+        let r = Math.floor(i / 2);
+        side[i % 2] = Math.max(side[i % 2], n.h);
+        row_len[r] = Math.max(row_len[r] || 0, n.w);
+    }
+    row_len[0] = col_w[d];
+    let trunk = stack_trunk_width(k);
+    let starts = [col_x[d]];
+    for(let r = 1; r < rows; r++) {
+        starts[r] = starts[r - 1] + row_len[r - 1] + STACK_GAP;
+    }
+    return {
+        side: side,
+        trunk: trunk,
+        starts: starts,
+        row_len: row_len,
+        len: starts[rows - 1] + row_len[rows - 1] - col_x[d],
+        ext: side[0] + trunk + side[1],
+    };
+}
+
+/*  The cards of a stack whose block starts across at `top`: row by
+ *  row, the first of each row against the corridor from one side,
+ *  the second against it from the other.  */
+function place_stack(t, st, g, top, pos)
+{
+    for(let i = 0; i < st.ids.length; i++) {
+        let n = t.by_id.get(st.ids[i]);
+        let r = Math.floor(i / 2);
+        let across = (i % 2 === 0)
+            ? top + g.side[0] - n.h / 2
+            : top + g.side[0] + g.trunk + n.h / 2;
+        pos.set(st.ids[i], {x: g.starts[r] + g.row_len[r] / 2, y: across});
+    }
+}
+
 function compact_tree_lr(nodes, edges, o)
 {
     let t = spanning_tree(nodes, edges);
-    let order = walk_order(t);
     let pos = new Map();
 
+    /*  A run of STACK_MIN_RUN or more consecutive LEAF children is laid
+     *  out as one block, a STACK. The contour packing below takes the
+     *  block as one leaf of its own length, so nothing is packed under
+     *  it. Runs, not all the leaves of a parent: the children keep
+     *  their order. A stack's key is an OBJECT, so it can never be
+     *  taken for a node id, which is a string.  */
+    let kids_of = new Map();
+    let stacks = new Map();
+    for(let [id, kids] of t.children) {
+        let out = [];
+        let run = [];
+        let flush = () => {
+            if(run.length >= STACK_MIN_RUN) {
+                let key = {stack: stacks.size};
+                stacks.set(key, {ids: run, depth: t.depth.get(run[0])});
+                out.push(key);
+            } else {
+                out.push(...run);
+            }
+            run = [];
+        };
+        for(let kid of kids) {
+            if((t.children.get(kid) || []).length === 0) {
+                run.push(kid);
+            } else {
+                flush();
+                out.push(kid);
+            }
+        }
+        flush();
+        kids_of.set(id, out);
+    }
+
+    /*  Parents before children, a stack being one child.  */
+    let order = [];
+    let todo = t.roots.slice().reverse();
+    while(todo.length) {
+        let id = todo.pop();
+        order.push(id);
+        let kids = kids_of.get(id) || [];
+        for(let i = kids.length - 1; i >= 0; i--) {
+            todo.push(kids[i]);
+        }
+    }
+
     /*  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 = [];
@@ -423,25 +544,31 @@ function compact_tree_lr(nodes, edges, o)
     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).  */
+    /*  `len` along the depth (the column's width: the rows are aligned;
+     *  a stack's own length), `ext` across it.  */
     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,
-        });
+        let st = stacks.get(id);
+        if(st) {
+            let g = stack_geometry(t, st, col_x, col_w);
+            tn.set(id, {len: g.len, ext: g.ext, geom: g, off_x: 0, off_y: 0, y: 0, contour: null});
+        } else {
+            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) || [];
+        let kids = kids_of.get(id) || [];
 
         if(!kids.length) {
             let upper = contour_line(n.len + dist, 0);
@@ -492,7 +619,7 @@ function compact_tree_lr(nodes, edges, o)
         if(!root_of.has(id)) {
             root_of.set(id, id);
         }
-        let kids = t.children.get(id) || [];
+        let kids = kids_of.get(id) || [];
         if(!kids.length) {
             continue;
         }
@@ -524,9 +651,14 @@ function compact_tree_lr(nodes, edges, o)
     }
 
     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));
+        let st = stacks.get(id);
+        if(st) {
+            place_stack(t, st, n.geom, y, pos);
+            continue;
+        }
+        let d = t.depth.get(id);
         pos.set(id, {x: col_x[d] + col_w[d] / 2, y: y + n.ext / 2});
     }
     return pos;

package/src/treedb_layout.test.js

@@ -6,7 +6,9 @@
  *      tidy tree's rows and centring, the radial tree's rings.
  ***********************************************************************/
 import { describe, test, expect } from "vitest";
-import { spanning_tree, layout_tree, layout_radial, layout_compact } from "./treedb_layout.js";
+import {
+    spanning_tree, layout_tree, layout_radial, layout_compact, stack_trunk_width, STACK_GAP,
+} 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).  */
@@ -134,12 +136,15 @@ const wide_edges = [
 ].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", () => {
+    test("the rows are the tidy tree's rows; a stack starts on its row", () => {
         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);
+        /*  nave's three leaves (d0, d1, c1) are a stack: d0 and d1 are
+         *  its first row, on the tidy row; c1 opens the next one.  */
+        for(let id of ["es", "norte", "sur", "nave", "d0", "d1"]) {
+            expect(pos.get(id).y).toBe(tidy.get(id).y);
         }
+        expect(pos.get("c1").y).toBeGreaterThan(pos.get("d0").y);
     });
 
     test("no two cards of a row are closer than the gap", () => {
@@ -147,14 +152,13 @@ describe("the compact tree", () => {
         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("two leaves stay side by side, and the parent is centred over them", () => {
+        let two = [N("p", 172, 96), N("a", 116, 40), N("b", 116, 40)];
+        let pos = layout_compact(two, [{source: "p", target: "a"}, {source: "p", target: "b"}],
+                                 {nodesep: 10, ranksep: 100});
+        expect(pos.get("a").y).toBe(pos.get("b").y);
+        expect(pos.get("b").x - pos.get("a").x).toBe(116 + 10);
+        expect(pos.get("p").x).toBeCloseTo((pos.get("a").x + pos.get("b").x) / 2, 6);
     });
 
     test("a closed sibling sits beside an open branch, not beside its block", () => {
@@ -198,6 +202,74 @@ describe("the compact tree", () => {
     });
 });
 
+describe("the compact tree stacks a run of leaves", () => {
+    const P6 = N("p", 172, 96);
+    const L6 = [0, 1, 2, 3, 4, 5].map((i) => N(`l${i}`, 116, 40));
+    const E6 = L6.map((l) => ({source: "p", target: l.id}));
+    const OPTS = {nodesep: 18, ranksep: 90};
+
+    test("in two columns, row after row, against a corridor", () => {
+        let pos = layout_compact([P6, ...L6], E6, OPTS);
+        let y = (id) => pos.get(id).y;
+        let x = (id) => pos.get(id).x;
+        expect(y("l0")).toBe(y("l1"));
+        expect(y("l2")).toBe(y("l3"));
+        expect(y("l2") - y("l0")).toBe(40 + STACK_GAP);
+        expect(y("l4") - y("l2")).toBe(40 + STACK_GAP);
+        /*  The first column lines up on its right edge, the second on
+         *  its left, and between them the corridor.  */
+        expect(x("l0")).toBe(x("l2"));
+        expect(x("l1")).toBe(x("l5"));
+        expect((x("l1") - 58) - (x("l0") + 58)).toBe(stack_trunk_width(6));
+        /*  The parent over the block.  */
+        expect(x("p")).toBeCloseTo(((x("l0") - 58) + (x("l1") + 58)) / 2, 6);
+    });
+
+    test("no two cards overlap", () => {
+        let all = [P6, ...L6];
+        let pos = layout_compact(all, E6, OPTS);
+        for(let i = 0; i < all.length; i++) {
+            for(let j = i + 1; j < all.length; j++) {
+                let a = all[i];
+                let b = all[j];
+                let pa = pos.get(a.id);
+                let pb = pos.get(b.id);
+                let apart_x = Math.abs(pa.x - pb.x) >= (a.w + b.w) / 2;
+                let apart_y = Math.abs(pa.y - pb.y) >= (a.h + b.h) / 2;
+                expect(apart_x || apart_y).toBe(true);
+            }
+        }
+    });
+
+    test("a whole level of leaves takes a fraction of the row it took", () => {
+        let tidy = layout_tree([P6, ...L6], E6, OPTS);
+        let pos = layout_compact([P6, ...L6], E6, OPTS);
+        let span = (p) => {
+            let xs = L6.map((l) => p.get(l.id).x);
+            return Math.max(...xs) - Math.min(...xs) + 116;
+        };
+        expect(span(pos)).toBeLessThan(span(tidy) / 2);
+    });
+
+    test("a run is broken by a child with children, and the order is kept", () => {
+        /*  p -> a, b, c (leaves), m (has a child), d, e (leaves).  */
+        let list = [N("p", 172, 96), N("a", 116, 40), N("b", 116, 40), N("c", 116, 40),
+                    N("m", 172, 96), N("d", 116, 40), N("e", 116, 40), N("mk", 116, 40)];
+        let links = ["a", "b", "c", "m", "d", "e"].map((k) => ({source: "p", target: k}))
+            .concat([{source: "m", target: "mk"}]);
+        let pos = layout_compact(list, links, OPTS);
+        /*  a, b, c: a stack (c under a); d, e: a pair on the row.  */
+        expect(pos.get("c").y).toBeGreaterThan(pos.get("a").y);
+        expect(pos.get("c").x).toBe(pos.get("a").x);
+        expect(pos.get("d").y).toBe(pos.get("a").y);
+        expect(pos.get("e").y).toBe(pos.get("a").y);
+        /*  Left to right: the stack, m, then d and e.  */
+        expect(pos.get("b").x).toBeLessThan(pos.get("m").x);
+        expect(pos.get("m").x).toBeLessThan(pos.get("d").x);
+        expect(pos.get("d").x).toBeLessThan(pos.get("e").x);
+    });
+});
+
 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"});