@yuneta/gobj-ui 7.23.152 → 7.23.154

package/src/treedb_elbow.js

@@ -25,6 +25,21 @@
  *        the order the edges were made, so a new edge never moves the
  *        ones already drawn.
  *
+ *      - Several forward edges sharing one END: the children of one
+ *        card, or the parents of one card (all its fkeys enter by one
+ *        point). They are STAGGERED: each turns at its own height in
+ *        the channel, so their runs lie side by side instead of on top
+ *        of each other. Leaving a card, the one that runs farthest
+ *        turns highest; reaching a card, the one that comes from
+ *        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.
  *
@@ -32,9 +47,12 @@
  *          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  */
+export const ELBOW_STAGGER_PAD = 6;    /*  staggered turns keep this far from the rows  */
 
 /************************************************************
  *  The lane of `id` among `ids`, the edges joining the same two
@@ -54,6 +72,24 @@ export function elbow_lane(ids, id)
     return side * Math.ceil(k / 2);
 }
 
+/************************************************************
+ *  The rank of `id` among `items` ([{id, span}]): the forward
+ *  edges that share one end with it, each with how far it runs
+ *  ACROSS. Farthest first; a tie goes to the edge made first.
+ *  Returns {rank, count}.
+ ************************************************************/
+export function elbow_rank(items, id)
+{
+    let sorted = items.slice().sort((a, b) => {
+        if(b.span !== a.span) {
+            return b.span - a.span;
+        }
+        return String(a.id).localeCompare(String(b.id), undefined, {numeric: true});
+    });
+    let rank = sorted.findIndex((it) => it.id === id);
+    return {rank: (rank < 0)? 0 : rank, count: sorted.length};
+}
+
 function swap(p)
 {
     return [p[1], p[0]];
@@ -64,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
@@ -71,21 +255,39 @@ 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, 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)
+export function elbow_points(s, t, box_s, box_t, lane, vertical, stagger)
 {
     if(!vertical) {
-        return elbow_points(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true)
-            .map(swap);
+        return elbow_points(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true,
+                            stagger).map(swap);
     }
 
     let shift = lane * ELBOW_STEP;
 
-    /*  Forward: the channel half way down, moved by the lane and
-     *  kept strictly between the two ports.  */
+    /*  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. 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 mid = (s[1] + t[1]) / 2 + shift;
-        mid = Math.min(Math.max(mid, s[1] + ELBOW_STEP), t[1] - ELBOW_STEP);
+        let st = stagger || {};
+        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]];
+        }
+        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]];
     }
 
@@ -215,8 +417,12 @@ function heap_pop(h)
 /************************************************************
  *  The shortest orthogonal line from `a` to `z` that enters none
  *  of `boxes` (already expanded by the clearance), a turn costing
- *  ROUTE_BEND. The line leaves `a` going down and ends at `z`
- *  going down, since after `z` it drops into a port.
+ *  ROUTE_BEND. The line leaves `a` SIDEWAYS and reaches `z`
+ *  SIDEWAYS: the column straight under a port and the one straight
+ *  over it belong to the forward edges that share that port, which
+ *  run along them to their staggered turns -- a route going down
+ *  that column lay on top of them. So a routed line shares only
+ *  the stub between the port and `a` (or `z`).
  *
  *  The grid is SPARSE: only the lines of the boxes' borders and
  *  of the two ends, which is all an orthogonal shortest path ever
@@ -302,7 +508,10 @@ function orth_search(a, z, boxes)
         let k = state >> 2;
         let dir = state & 3;
         if(k === goal) {
-            let total = cost + ((dir === 2)? 0 : ROUTE_BEND);
+            if(dir >= 2) {
+                continue;       /*  down the port's own column: not allowed  */
+            }
+            let total = cost + ROUTE_BEND;      /*  the turn into the port  */
             if(total < found_cost) {
                 found_cost = total;
                 found = state;
@@ -310,6 +519,9 @@ function orth_search(a, z, boxes)
             continue;
         }
         for(let [nk, nd, len] of moves(k)) {
+            if(k === start && nd >= 2) {
+                continue;       /*  out of the port sideways, not down its column  */
+            }
             let c = cost + len + ((nd === dir)? 0 : ROUTE_BEND);
             let ns = nk * 4 + nd;
             if(c < best[ns]) {
@@ -360,15 +572,21 @@ function orth_search(a, z, boxes)
  *  coincide. Nearby cards first; all of them if that finds no way;
  *  the simple elbow if nothing does.
  ************************************************************/
-export function elbow_route(s, t, box_s, box_t, lane, vertical, boxes)
+export function elbow_route(s, t, box_s, box_t, lane, vertical, boxes, stagger)
 {
     let others = boxes || [];
     if(!vertical) {
         return elbow_route(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true,
-                           others.map(swap_box)).map(swap);
+                           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);
+    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_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};
@@ -165,6 +167,195 @@ describe("the route round the other cards", () => {
     });
 });
 
+describe("edges sharing an end are staggered", () => {
+    test("the rank is farthest first, a tie to the edge made first", () => {
+        let items = [{id: "e-3", span: 10}, {id: "e-1", span: 300}, {id: "e-2", span: 10}];
+        expect(elbow_rank(items, "e-1")).toEqual({rank: 0, count: 3});
+        expect(elbow_rank(items, "e-2")).toEqual({rank: 1, count: 3});
+        expect(elbow_rank(items, "e-3")).toEqual({rank: 2, count: 3});
+    });
+
+    /*  One parent on top (port at x 50, bottom at 40) and a row of
+     *  children below (tops at 130).  */
+    const P = {x1: 0, y1: 0, x2: 100, y2: 40};
+    const PORT = [50, 40];
+    const KIDS = [50, 160, 290, 420, -120].map((x, i) => ({
+        id: `e-${i + 1}`, x: x, box: {x1: x - 50, y1: 130, x2: x + 50, y2: 170},
+    }));
+    const channel_of = (kid) => {
+        let items = KIDS.map((k) => ({id: k.id, span: Math.abs(k.x - PORT[0])}));
+        let dep = elbow_rank(items, kid.id);
+        return elbow_points(PORT, [kid.x, 130], P, kid.box, 0, true, {dep: dep})[0][1];
+    };
+
+    test("the children of one port turn each at its own height, inside the channel", () => {
+        let ys = KIDS.map(channel_of);
+        expect(new Set(ys).size).toBe(KIDS.length);
+        for(let y of ys) {
+            expect(y).toBeGreaterThan(40);
+            expect(y).toBeLessThan(130);
+        }
+    });
+
+    test("the farthest turns highest, and the lines of one port do not cross", () => {
+        let y = Object.fromEntries(KIDS.map((k) => [k.id, channel_of(k)]));
+        expect(y["e-4"]).toBeLessThan(y["e-2"]);        /*  420 is farther than 160  */
+        /*  A crossing: one edge's drop (at its child's x, from its turn
+         *  down to the row) cut by another's run (from the port to its
+         *  child, at its own turn).  */
+        for(let a of KIDS) {
+            for(let b of KIDS) {
+                if(a === b) {
+                    continue;
+                }
+                let lo = Math.min(PORT[0], b.x);
+                let hi = Math.max(PORT[0], b.x);
+                let cuts = a.x > lo && a.x < hi && y[b.id] > y[a.id] && y[b.id] < 130;
+                expect(cuts).toBe(false);
+            }
+        }
+    });
+
+    test("the parents of one card: the farthest turns lowest, and they do not cross", () => {
+        /*  Parents on top at these x (port at the middle of each bottom),
+         *  one child below at x 200 whose fkeys all enter at its top.  */
+        const C = {x1: 150, y1: 130, x2: 250, y2: 170};
+        const T0 = [200, 130];
+        const PARENTS = [0, 120, 330, 560].map((x, i) => ({id: `p-${i + 1}`, x: x}));
+        let items = PARENTS.map((p) => ({id: p.id, span: Math.abs(p.x - T0[0])}));
+        let y = {};
+        for(let p of PARENTS) {
+            let box = {x1: p.x - 50, y1: 0, x2: p.x + 50, y2: 40};
+            let arr = elbow_rank(items, p.id);
+            y[p.id] = elbow_points([p.x, 40], T0, box, C, 0, true, {arr: arr})[0][1];
+        }
+        expect(new Set(Object.values(y)).size).toBe(PARENTS.length);
+        expect(y["p-4"]).toBeGreaterThan(y["p-2"]);     /*  560 is farther than 120  */
+        /*  A crossing: one parent's drop (at its x, from its row down to
+         *  its turn) cut by another's run (from its x to the child).  */
+        for(let a of PARENTS) {
+            for(let b of PARENTS) {
+                if(a === b) {
+                    continue;
+                }
+                let lo = Math.min(b.x, T0[0]);
+                let hi = Math.max(b.x, T0[0]);
+                let cuts = a.x > lo && a.x < hi && y[b.id] > 40 && y[b.id] < y[a.id];
+                expect(cuts).toBe(false);
+            }
+        }
+    });
+
+    test("a routed edge leaves and reaches its ports sideways, sharing only the stub", () => {
+        /*  A same-row edge from A to C, with D standing between them:
+         *  it is routed. It must not run down the column over C's
+         *  port, which is where a forward edge into C drops.  */
+        const A2 = {x1: 0, y1: 200, x2: 100, y2: 240};
+        const D2 = {x1: 150, y1: 180, x2: 250, y2: 260};
+        const C2 = {x1: 300, y1: 200, x2: 400, y2: 240};
+        let s = [50, 240];
+        let t = [350, 200];
+        let boxes = [A2, D2, C2];
+        let route = elbow_route(s, t, A2, C2, 0, true, boxes);
+        expect(route.length).toBeGreaterThan(2);
+        expect(elbow_path_hits([s, ...route, t], boxes, A2, C2)).toBe(false);
+        let a = route[0];
+        let z = route[route.length - 1];
+        expect(route[1][1]).toBe(a[1]);                     /*  leaves a sideways  */
+        expect(route[route.length - 2][1]).toBe(z[1]);      /*  reaches z sideways  */
+        expect(t[1] - z[1]).toBeLessThan(20);               /*  the stub is short  */
+    });
+
+    test("an end shared by nobody keeps the middle", () => {
+        let one = {rank: 0, count: 1};
+        expect(elbow_points(PORT, [160, 130], P, KIDS[1].box, 0, true, {dep: one, arr: one}))
+            .toEqual(elbow_points(PORT, [160, 130], P, KIDS[1].box, 0, true));
+    });
+});
+
+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.  */