@yuneta/gobj-ui 7.23.153 → 7.23.155

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"});