@yuneta/gobj-ui 7.23.68 → 7.23.70

package/src/c_yui_treedb_graph.js

@@ -506,6 +506,12 @@ function option_label(name)
         /*  Layouts (`layout_names` of the G6 child).  */
         case "manual":
             return t("manual");
+        case "treedb-tree":
+            return t("treedb-tree");
+        case "treedb-outline":
+            return t("treedb-outline");
+        case "radial":
+            return t("radial");
         case "dagre":
             return t("dagre");
         case "antv-dagre":
@@ -2328,6 +2334,11 @@ function ac_set_operation_mode(gobj, event, kw, src)
  *  card's graph icon travels — as EV_TOPIC_SELECTED, which the host turns
  *  into the URL, so what you are looking at stays linkable.
  ************************************************************/
+/*  The glyphs of a chip's small buttons: `is-small` sets a 0.75rem
+ *  font and a star or a crosshair at that size is a speck. The BUTTON
+ *  stays small so the strip keeps its height; the glyph inside grows.  */
+const LEGEND_GLYPH_STYLE = 'font-size:1.5em; line-height:1; color:inherit;';
+
 function refresh_legend(gobj)
 {
     let priv = gobj.priv;
@@ -2423,7 +2434,7 @@ function refresh_legend(gobj)
                                     type: 'button', style: 'padding:0 .4rem;',
                                     title: t('main topic'), 'data-i18n-title': 'main topic',
                                     'aria-label': t('main topic'), 'aria-pressed': 'true'},
-                         '★', {
+                         [['span', {style: LEGEND_GLYPH_STYLE}, '★']], {
                 click: (evt) => {
                     evt.stopPropagation();
                     gobj_send_event(gobj, "EV_LEGEND_TOPIC",
@@ -2434,13 +2445,13 @@ function refresh_legend(gobj)
             extras.push(['span', {class: 'GRAPH_LEGEND_STAR button is-small is-static',
                                   style: 'padding:0 .4rem;',
                                   title: t('main topic'), 'data-i18n-title': 'main topic'},
-                         '★']);
+                         [['span', {style: LEGEND_GLYPH_STYLE}, '★']]]);
         } else if(!hidden) {
             extras.push(['button', {class: 'GRAPH_LEGEND_STAR button is-small',
                                     type: 'button', style: 'padding:0 .4rem;',
                                     title: t('main topic'), 'data-i18n-title': 'main topic',
                                     'aria-label': t('main topic')},
-                         '☆', {
+                         [['span', {style: LEGEND_GLYPH_STYLE}, '☆']], {
                 click: (evt) => {
                     evt.stopPropagation();
                     gobj_send_event(gobj, "EV_LEGEND_TOPIC",
@@ -2477,7 +2488,7 @@ function refresh_legend(gobj)
                 title: t('highlight topic'), 'data-i18n-title': 'highlight topic',
                 'aria-label': t('highlight topic'),
                 'aria-pressed': focused? 'true' : 'false'
-            }, [['i', {class: 'yi-location-crosshairs'}]], {
+            }, [['i', {class: 'yi-location-crosshairs', style: LEGEND_GLYPH_STYLE}]], {
                 click: (evt) => {
                     evt.stopPropagation();
                     gobj_send_event(gobj, "EV_LEGEND_TOPIC",

package/src/treedb_layout.js

@@ -0,0 +1,380 @@
+/***********************************************************************
+ *          treedb_layout.js
+ *
+ *      Two layouts made for a treedb, and nothing else.
+ *
+ *      What a treedb graph IS, once it is folded (treedb_fold_model.js):
+ *      a forest read left to right. A main topic is a tree (places:
+ *      country, region, site, hall), the other topics hang from its
+ *      nodes through hooks (devices, users, controllers), a record may
+ *      hang from two parents (a device from its place AND its
+ *      controller), and every visible node was reached from a root.
+ *      Tens to a few hundred cards on screen, never the whole store.
+ *
+ *      G6's own layouts either do not know that or pay for not knowing:
+ *
+ *      - `dagre` gets the reading direction right and then ranks by
+ *        longest path and minimises crossings with a heuristic that
+ *        REORDERS the siblings on every run -- open one hook and the
+ *        column next to it shuffles. It is O(n·m) per sweep and it is
+ *        the one thing that takes time on a big expansion.
+ *      - the tree layouts (`compact-box`, `indented`, `dendrogram`,
+ *        `mindmap`) draw exactly the shape wanted, but G6 runs them on
+ *        a TREE it builds from the edges: a node with two parents is
+ *        placed by whichever parent the builder met first, unstably.
+ *      - the force family scatters a tree, which is the pile with
+ *        physics.
+ *
+ *      So: a tidy tree (`tree`) and an outline (`outline`), both fed by
+ *      the SAME spanning tree, chosen deterministically:
+ *
+ *      - roots are the nodes with no incoming edge, in node order;
+ *      - a node belongs to the FIRST parent that reaches it in a
+ *        breadth-first walk from the roots -- the place, not the
+ *        controller, because the place's column came first -- and the
+ *        other links are drawn as edges across the tree;
+ *      - the children of a node are ordered by the HOOK they hang from
+ *        (the parent's port order, which is the schema's column order)
+ *        and then by node order (record order, the pages' order);
+ *      - a node nothing reaches (a cycle) is a root too.
+ *
+ *      `tree`: the classic tidy tree, left to right. Each depth is a
+ *      column as wide as its widest card; a node is centred on the
+ *      block of its children; siblings stack with `nodesep` between
+ *      them. O(n), and opening a hook moves NOTHING that is not below
+ *      or beside it -- the cards keep their order, the eye keeps its
+ *      place.
+ *
+ *      `outline`: one node per row, indented by depth -- what a JSON
+ *      viewer draws, and what a treedb is when read as one. Tall, but
+ *      nothing is ever beside anything: the reader scrolls a list.
+ *
+ *      Pure: takes plain nodes and edges, returns positions. The G6
+ *      classes in c_g6_nodes_tree.js are two thin adapters over it.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+const DEFAULTS = {
+    nodesep: 18,        /*  gap between siblings (tree) / rows (outline)  */
+    ranksep: 110,       /*  gap between a column and the next (tree)  */
+    indent: 48,         /*  what a depth adds to the x of a row (outline)  */
+};
+
+/************************************************************
+ *  The spanning tree of a graph, deterministic.
+ *
+ *      nodes   [{id, w, h, order}]        order: creation index
+ *      edges   [{source, target, rank}]   rank: the hook's position in
+ *                                         the parent's ports (0 = first)
+ *
+ *  Returns {roots: [id], children: Map<id, [id]>, depth: Map<id, n>,
+ *           by_id: Map<id, node>}
+ ************************************************************/
+export function spanning_tree(nodes, edges)
+{
+    let by_id = new Map();
+    for(let i = 0; i < nodes.length; i++) {
+        let n = nodes[i];
+        by_id.set(n.id, Object.assign({order: i}, n));
+    }
+
+    /*  Outgoing links per node, with the rank of the hook they leave by.  */
+    let out = new Map();
+    let has_parent = new Set();
+    for(let e of edges) {
+        if(!by_id.has(e.source) || !by_id.has(e.target) || e.source === e.target) {
+            continue;
+        }
+        if(!out.has(e.source)) {
+            out.set(e.source, []);
+        }
+        out.get(e.source).push({id: e.target, rank: (e.rank > 0)? e.rank : 0});
+        has_parent.add(e.target);
+    }
+    for(let list of out.values()) {
+        list.sort((a, b) => {
+            if(a.rank !== b.rank) {
+                return a.rank - b.rank;
+            }
+            return by_id.get(a.id).order - by_id.get(b.id).order;
+        });
+    }
+
+    let roots = [];
+    for(let n of by_id.values()) {
+        if(!has_parent.has(n.id)) {
+            roots.push(n.id);
+        }
+    }
+
+    let children = new Map();
+    let depth = new Map();
+    let assign = (start) => {
+        let queue = [start];
+        depth.set(start, 0);
+        while(queue.length) {
+            let id = queue.shift();
+            let kids = [];
+            for(let link of (out.get(id) || [])) {
+                if(depth.has(link.id)) {
+                    continue;   /*  reached before: that parent keeps it  */
+                }
+                depth.set(link.id, depth.get(id) + 1);
+                kids.push(link.id);
+                queue.push(link.id);
+            }
+            children.set(id, kids);
+        }
+    };
+    for(let root of roots) {
+        assign(root);
+    }
+    /*  A cycle with no way in: its first node, in node order, is a root.  */
+    for(let n of by_id.values()) {
+        if(!depth.has(n.id)) {
+            roots.push(n.id);
+            assign(n.id);
+        }
+    }
+
+    return {roots: roots, children: children, depth: depth, by_id: by_id};
+}
+
+/************************************************************
+ *  The tidy tree, left to right.
+ *
+ *  Returns Map<id, {x, y}> with the CENTRE of each node, the way G6
+ *  positions a node.
+ ************************************************************/
+export function layout_tree(nodes, edges, opts)
+{
+    let o = Object.assign({}, DEFAULTS, opts || {});
+    let t = spanning_tree(nodes, edges);
+    let pos = new Map();
+
+    /*  Column widths: the widest card of each depth.  */
+    let col_w = [];
+    for(let [id, d] of t.depth) {
+        let w = t.by_id.get(id).w;
+        col_w[d] = Math.max(col_w[d] || 0, 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;
+    }
+
+    /*  Subtree heights, post-order.  */
+    let height = new Map();
+    let measure = (id) => {
+        let kids = t.children.get(id) || [];
+        let own = t.by_id.get(id).h;
+        if(!kids.length) {
+            height.set(id, own);
+            return own;
+        }
+        let sum = 0;
+        for(let i = 0; i < kids.length; i++) {
+            sum += measure(kids[i]);
+            if(i > 0) {
+                sum += o.nodesep;
+            }
+        }
+        let h = Math.max(own, sum);
+        height.set(id, h);
+        return h;
+    };
+    for(let root of t.roots) {
+        measure(root);
+    }
+
+    /*  Placement, pre-order: a node is centred on the block of its
+     *  children, which starts at the top of its own block.  */
+    let place = (id, top) => {
+        let n = t.by_id.get(id);
+        let d = t.depth.get(id);
+        let kids = t.children.get(id) || [];
+        let block = height.get(id);
+        let cx = col_x[d] + (col_w[d] - n.w) / 2 + n.w / 2;
+        if(!kids.length) {
+            pos.set(id, {x: cx, y: top + block / 2});
+            return;
+        }
+        let kids_h = 0;
+        for(let i = 0; i < kids.length; i++) {
+            kids_h += height.get(kids[i]);
+            if(i > 0) {
+                kids_h += o.nodesep;
+            }
+        }
+        let cursor = top + (block - kids_h) / 2;
+        for(let kid of kids) {
+            place(kid, cursor);
+            cursor += height.get(kid) + o.nodesep;
+        }
+        pos.set(id, {x: cx, y: top + block / 2});
+    };
+    let top = 0;
+    for(let root of t.roots) {
+        place(root, top);
+        top += height.get(root) + o.nodesep * 2;
+    }
+
+    return pos;
+}
+
+/************************************************************
+ *  The radial tree: the root in the middle, a ring per depth.
+ *
+ *  G6's `radial` places by MDS on the graph distances and pushes
+ *  overlaps apart afterwards, with a ring radius it is TOLD; twenty
+ *  cards of 172px on a ring of radius 200 have 52px each and pile
+ *  up. This one is the radial form of the tidy tree above: every
+ *  subtree gets an angular SECTOR proportional to its leaves, a node
+ *  sits in the middle of its sector, and the radius of each ring is
+ *  the larger of "one step further out than the ring before" and
+ *  "long enough for its nodes to sit side by side" -- so a hall
+ *  with a hundred devices is a wide, sparse fan, and nothing
+ *  overlaps by construction. Several roots share the circle around
+ *  a virtual centre.
+ *
+ *      ranksep   the step between rings
+ *      nodesep   the gap between neighbours on a ring
+ ************************************************************/
+export function layout_radial(nodes, edges, opts)
+{
+    let o = Object.assign({}, DEFAULTS, opts || {});
+    let t = spanning_tree(nodes, edges);
+    let pos = new Map();
+    if(!t.roots.length) {
+        return pos;
+    }
+
+    /*  Leaves under each node: the sector it deserves.  */
+    let leaves = new Map();
+    let count = (id) => {
+        let kids = t.children.get(id) || [];
+        if(!kids.length) {
+            leaves.set(id, 1);
+            return 1;
+        }
+        let n = 0;
+        for(let kid of kids) {
+            n += count(kid);
+        }
+        leaves.set(id, n);
+        return n;
+    };
+    let total = 0;
+    for(let root of t.roots) {
+        total += count(root);
+    }
+
+    /*  One root sits at the centre; several sit on the first ring
+     *  around an empty centre, so every depth shifts out by one.  */
+    let single = (t.roots.length === 1);
+    let ring_of = (id) => t.depth.get(id) + (single? 0 : 1);
+
+    /*  Pass 1, the ANGLES: a node's children split its sector by
+     *  their leaves, and a node sits at the middle of its sector.
+     *  Angles do not depend on the radii, so they come first.  */
+    let angle = new Map();
+    let rings = [];         /*  ring -> [{id, angle, diag}]  */
+    let sector = (id, from, span) => {
+        let a = from + span / 2;
+        angle.set(id, a);
+        let ring = ring_of(id);
+        if(!rings[ring]) {
+            rings[ring] = [];
+        }
+        let n = t.by_id.get(id);
+        rings[ring].push({id: id, angle: a, diag: Math.hypot(n.w, n.h)});
+        let cursor = from;
+        for(let kid of (t.children.get(id) || [])) {
+            let part = span * leaves.get(kid) / leaves.get(id);
+            sector(kid, cursor, part);
+            cursor += part;
+        }
+    };
+    if(single) {
+        let root = t.roots[0];
+        angle.set(root, 0);
+        let cursor = -Math.PI / 2;      /*  the first child at the top  */
+        for(let kid of (t.children.get(root) || [])) {
+            let part = 2 * Math.PI * leaves.get(kid) / leaves.get(root);
+            sector(kid, cursor, part);
+            cursor += part;
+        }
+    } else {
+        let cursor = -Math.PI / 2;
+        for(let root of t.roots) {
+            let part = 2 * Math.PI * leaves.get(root) / total;
+            sector(root, cursor, part);
+            cursor += part;
+        }
+    }
+
+    /*  Pass 2, the RADII: a ring is one step further out than the
+     *  ring before, and as far out as its two closest neighbours need
+     *  to sit side by side -- the arc between two adjacent centres is
+     *  r·Δangle, and it has to hold half of each card plus the gap.
+     *  Measured on NEIGHBOURS, not on the ring's total length: a
+     *  leafless root squeezed between two big subtrees gets a sliver
+     *  of angle, and it is the sliver that sets the radius.  */
+    let radius = [0];
+    for(let ring = 1; ring < rings.length; ring++) {
+        let r = radius[ring - 1] + o.ranksep;
+        let list = (rings[ring] || []).slice().sort((a, b) => a.angle - b.angle);
+        for(let i = 0; i < list.length && list.length > 1; i++) {
+            let a = list[i];
+            let b = list[(i + 1) % list.length];
+            let gap = (i + 1 < list.length)
+                ? b.angle - a.angle
+                : b.angle + 2 * Math.PI - a.angle;
+            if(gap > 1e-9) {
+                r = Math.max(r, (a.diag / 2 + b.diag / 2 + o.nodesep) / gap);
+            }
+        }
+        radius[ring] = r;
+    }
+
+    /*  Pass 3, the positions.  */
+    for(let [id, a] of angle) {
+        let r = radius[ring_of(id)] || 0;
+        pos.set(id, {x: r * Math.cos(a), y: r * Math.sin(a)});
+    }
+
+    return pos;
+}
+
+/************************************************************
+ *  The outline: one node per row, indented by depth, in the
+ *  pre-order of the spanning tree. Rows are left-aligned on
+ *  their indent, so a column of chips reads as a list.
+ ************************************************************/
+export function layout_outline(nodes, edges, opts)
+{
+    let o = Object.assign({}, DEFAULTS, opts || {});
+    let t = spanning_tree(nodes, edges);
+    let pos = new Map();
+
+    let y = 0;
+    let visit = (id) => {
+        let n = t.by_id.get(id);
+        let d = t.depth.get(id);
+        pos.set(id, {x: d * o.indent + n.w / 2, y: y + n.h / 2});
+        y += n.h + o.nodesep;
+        for(let kid of (t.children.get(id) || [])) {
+            visit(kid);
+        }
+    };
+    for(let root of t.roots) {
+        visit(root);
+        y += o.nodesep;     /*  a breath between two trees  */
+    }
+
+    return pos;
+}

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