@yuneta/gobj-ui 7.23.69 → 7.23.71

package/src/treedb_layout.test.js

@@ -0,0 +1,172 @@
+/***********************************************************************
+ *          treedb_layout.test.js
+ *
+ *      The two treedb layouts, pinned: the spanning tree they share
+ *      (roots, first parent wins, hook order then record order), the
+ *      tidy tree's columns and centring, the outline's rows.
+ ***********************************************************************/
+import { describe, test, expect } from "vitest";
+import { spanning_tree, layout_tree, layout_outline, layout_radial } 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).  */
+const N = (id, w, h) => ({id, w, h});
+const nodes = [
+    N("es", 172, 96), N("norte", 172, 96), N("sur", 172, 96), N("nave", 172, 120),
+    N("d0", 116, 40), N("d1", 116, 40), N("c1", 172, 96),
+];
+const edges = [
+    {source: "es", target: "norte", rank: 0},
+    {source: "es", target: "sur", rank: 0},
+    {source: "norte", target: "nave", rank: 0},
+    {source: "nave", target: "c1", rank: 2},
+    {source: "nave", target: "d0", rank: 1},
+    {source: "nave", target: "d1", rank: 1},
+    {source: "c1", target: "d0", rank: 0},
+];
+
+describe("the spanning tree", () => {
+    test("roots are the nodes with no incoming edge, in node order", () => {
+        let t = spanning_tree(nodes, edges);
+        expect(t.roots).toEqual(["es"]);
+        expect(t.depth.get("nave")).toBe(2);
+        expect(t.depth.get("d0")).toBe(3);
+    });
+
+    test("children are ordered by hook rank, then by node order", () => {
+        let t = spanning_tree(nodes, edges);
+        expect(t.children.get("nave")).toEqual(["d0", "d1", "c1"]);
+        expect(t.children.get("es")).toEqual(["norte", "sur"]);
+    });
+
+    test("a node with two parents belongs to the first that reaches it", () => {
+        let t = spanning_tree(nodes, edges);
+        expect(t.children.get("c1")).toEqual([]);        /*  d0 is nave's  */
+        expect(t.depth.get("d0")).toBe(3);
+    });
+
+    test("a cycle nothing reaches gets a root; a self edge is ignored", () => {
+        let t = spanning_tree(
+            [N("a", 10, 10), N("b", 10, 10), N("c", 10, 10)],
+            [{source: "a", target: "b"}, {source: "b", target: "c"}, {source: "c", target: "a"},
+             {source: "b", target: "b"}]
+        );
+        expect(t.roots).toEqual(["a"]);
+        expect(t.children.get("a")).toEqual(["b"]);
+        expect(t.depth.get("c")).toBe(2);
+    });
+
+    test("an edge to an unknown node is ignored", () => {
+        let t = spanning_tree([N("a", 10, 10)], [{source: "a", target: "ghost"}]);
+        expect(t.roots).toEqual(["a"]);
+        expect(t.children.get("a")).toEqual([]);
+    });
+});
+
+describe("the tidy tree", () => {
+    test("depths are columns; a column is as wide as its widest card", () => {
+        let pos = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100});
+        expect(pos.get("es").x).toBe(86);                       /*  172/2  */
+        expect(pos.get("norte").x).toBe(172 + 100 + 86);
+        expect(pos.get("sur").x).toBe(pos.get("norte").x);
+        /*  depth 3 holds chips (116) and c1 (172): column is 172 wide,
+         *  the chips are centred in it  */
+        let col3 = 3 * (172 + 100);
+        expect(pos.get("c1").x).toBe(col3 + 86);
+        expect(pos.get("d0").x).toBe(col3 + 86);
+    });
+
+    test("siblings stack with the gap; a parent is centred on its children", () => {
+        let pos = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100});
+        /*  nave's children: d0 (40), d1 (40), c1 (96) = 196 tall  */
+        expect(pos.get("d1").y - pos.get("d0").y).toBe(50);
+        expect(pos.get("c1").y - pos.get("d1").y).toBe(20 + 10 + 48);
+        let first = pos.get("d0").y - 20;
+        let last = pos.get("c1").y + 48;
+        expect(pos.get("nave").y).toBe((first + last) / 2);
+    });
+
+    test("a parent taller than its children keeps its own height", () => {
+        let pos = layout_tree(
+            [N("p", 100, 200), N("k", 50, 20)],
+            [{source: "p", target: "k"}], {nodesep: 10, ranksep: 50}
+        );
+        expect(pos.get("p").y).toBe(100);
+        expect(pos.get("k").y).toBe(100);     /*  centred in the parent's block  */
+    });
+
+    test("two trees are stacked, not overlapped", () => {
+        let pos = layout_tree(
+            [N("a", 100, 50), N("b", 100, 50)], [], {nodesep: 10}
+        );
+        expect(pos.get("a").y).toBe(25);
+        expect(pos.get("b").y).toBe(25 + 50 + 20);
+    });
+
+    test("opening a hook does not move what is not under or beside it", () => {
+        let base = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100});
+        let more = nodes.concat([N("d2", 116, 40)]);
+        let more_edges = edges.concat([{source: "nave", target: "d2", rank: 1}]);
+        let pos = layout_tree(more, more_edges, {nodesep: 10, ranksep: 100});
+        expect(pos.get("es").x).toBe(base.get("es").x);
+        expect(pos.get("d0").y).toBe(base.get("d0").y);     /*  above the new one  */
+        expect(pos.get("d1").y).toBe(base.get("d1").y);
+        expect(pos.get("d2").y).toBe(base.get("d1").y + 50);
+        expect(pos.get("c1").y).toBe(base.get("c1").y + 50); /*  pushed down, in order  */
+    });
+});
+
+describe("the radial tree", () => {
+    test("one root sits at the centre, its children on a ring around it", () => {
+        let pos = layout_radial(nodes, edges, {nodesep: 10, ranksep: 100});
+        expect(pos.get("es")).toEqual({x: 0, y: 0});
+        let r = Math.hypot(pos.get("norte").x, pos.get("norte").y);
+        expect(r).toBeGreaterThanOrEqual(100);
+        expect(Math.hypot(pos.get("sur").x, pos.get("sur").y)).toBeCloseTo(r, 6);
+        /*  norte carries 3 of es's 4 leaves: three quarters of the
+         *  circle, from the top (-90°) clockwise, so its middle is at
+         *  +45°; sur gets the last quarter, from 180° to 270°, centred
+         *  at 225° (-135°)  */
+        let ang = (id) => Math.atan2(pos.get(id).y, pos.get(id).x);
+        expect(ang("norte")).toBeCloseTo(Math.PI / 4, 6);
+        expect(ang("sur")).toBeCloseTo(-3 * Math.PI / 4, 6);
+    });
+
+    test("a ring is long enough for its nodes: no two neighbours closer than a card", () => {
+        let many = [N("root", 172, 96)];
+        let e = [];
+        for(let i = 0; i < 40; i++) {
+            many.push(N(`k${i}`, 172, 96));
+            e.push({source: "root", target: `k${i}`, rank: 0});
+        }
+        let pos = layout_radial(many, e, {nodesep: 10, ranksep: 100});
+        let r = Math.hypot(pos.get("k0").x, pos.get("k0").y);
+        /*  40 diagonals of ~197 plus gaps on the circumference  */
+        expect(2 * Math.PI * r).toBeGreaterThanOrEqual(40 * (Math.hypot(172, 96) + 10) - 1e-6);
+        let d = Math.hypot(pos.get("k1").x - pos.get("k0").x, pos.get("k1").y - pos.get("k0").y);
+        expect(d).toBeGreaterThan(190);
+    });
+
+    test("several roots share the circle around an empty centre", () => {
+        let pos = layout_radial(
+            [N("a", 100, 50), N("b", 100, 50), N("c", 100, 50)], [], {ranksep: 100}
+        );
+        for(let id of ["a", "b", "c"]) {
+            expect(Math.hypot(pos.get(id).x, pos.get(id).y)).toBeCloseTo(100, 6);
+        }
+        expect(pos.get("a").x).not.toBe(pos.get("b").x);
+    });
+});
+
+describe("the outline", () => {
+    test("one node per row, pre-order, indented by depth", () => {
+        let pos = layout_outline(nodes, edges, {nodesep: 10, indent: 40});
+        let rows = [...pos.entries()].sort((a, b) => a[1].y - b[1].y).map((e) => e[0]);
+        expect(rows).toEqual(["es", "norte", "nave", "d0", "d1", "c1", "sur"]);
+        expect(pos.get("es").x).toBe(86);
+        expect(pos.get("nave").x).toBe(2 * 40 + 86);
+        expect(pos.get("d0").x).toBe(3 * 40 + 58);
+        expect(pos.get("es").y).toBe(48);
+        expect(pos.get("norte").y).toBe(96 + 10 + 48);
+    });
+});