@yuneta/gobj-ui 7.23.153 → 7.23.155

package/src/c_g6_nodes_tree.js

@@ -133,7 +133,10 @@ import {
     fold_root_group_key,
 } from "./treedb_fold_model.js";
 import {layout_tree, layout_radial, layout_compact} from "./treedb_layout.js";
-import {elbow_lane, elbow_rank, elbow_route} from "./treedb_elbow.js";
+import {
+    elbow_lane, elbow_rank, elbow_route, elbow_combs, curve_hits, rounded_path, CURVE_RADIUS,
+    ELBOW_STEP,
+} from "./treedb_elbow.js";
 
 import {
     BaseLayout,
@@ -148,6 +151,8 @@ import {
     Toolbar,
     register,
     Polyline,
+    Cubic,
+    CubicHorizontal,
 } from '@antv/g6';
 
 import {Circle as CircleGeometry, Rect as RectGeometry} from '@antv/g';
@@ -942,6 +947,8 @@ function register_layouts(gobj)
         register(ExtensionCategory.LAYOUT, 'treedb-compact', TreedbCompactLayout);
         register(ExtensionCategory.EDGE, 'treedb-elbow-v', TreedbElbowV);
         register(ExtensionCategory.EDGE, 'treedb-elbow-h', TreedbElbowH);
+        register(ExtensionCategory.EDGE, 'treedb-curve-v', TreedbCurveV);
+        register(ExtensionCategory.EDGE, 'treedb-curve-h', TreedbCurveH);
         register(ExtensionCategory.LAYOUT, 'treedb-radial', TreedbRadialLayout);
         register(ExtensionCategory.NODE, 'light', LightNode);
         register(ExtensionCategory.NODE, 'treedb-card', TreedbCard);
@@ -2042,16 +2049,20 @@ function layout_direction(gobj)
     return str_in_list(LR_LAYOUTS, gobj.priv.layout)? "LR" : "TB";
 }
 
-/*  A curve, or an elbow when the reader asked for one and the layout
- *  has rows to run it between.  */
+/*  An elbow when the reader asked for one, a curve otherwise -- ours
+ *  where the layout has rows, which keeps off the cards; G6's plain
+ *  cubic on a layout with no rows to go round by.  */
 function edge_type_for(gobj)
 {
     let lr = (layout_direction(gobj) === "LR");
     let rowless = gobj_read_attr(gobj, "rowless_layouts") || [];
-    if(gobj_read_str_attr(gobj, "edge_shape") === "elbow" &&
-       !str_in_list(rowless, gobj.priv.layout)) {
+    let rows = !str_in_list(rowless, gobj.priv.layout);
+    if(rows && gobj_read_str_attr(gobj, "edge_shape") === "elbow") {
         return lr? "treedb-elbow-h" : "treedb-elbow-v";
     }
+    if(rows) {
+        return lr? "treedb-curve-h" : "treedb-curve-v";
+    }
     return lr? "cubic-horizontal" : "cubic";
 }
 
@@ -4324,13 +4335,22 @@ function elbow_stagger_of(edge, vertical)
     try {
         let ps = pos(s);
         let pt = pos(t);
-        let dep = graph.getRelatedEdgesData(s, 'out')
-            .filter((d) => d.source === s && pos(d.target)[along] > ps[along])
-            .map((d) => ({
+        let leaving = graph.getRelatedEdgesData(s, 'out')
+            .filter((d) => d.source === s && pos(d.target)[along] > ps[along]);
+        /*  The cards they reach, for the combs of a stack; a comb's
+         *  run ends at its lane, so that is what its span measures.  */
+        let combs = elbow_combs(leaving.map((d) => ({
+            id: d.id,
+            box: elbow_box(element.getElement(d.target)),
+        })), vertical);
+        let dep = leaving.map((d) => {
+            let comb = combs.get(d.id);
+            let far = comb? comb.lane : pos(d.target)[across];
+            return {
                 id: d.id,
-                span: Math.abs(pos(d.target)[across] -
-                               port_of(s, d.style && d.style.sourcePort)[across]),
-            }));
+                span: Math.abs(far - port_of(s, d.style && d.style.sourcePort)[across]),
+            };
+        });
         let arr = graph.getRelatedEdgesData(t, 'in')
             .filter((d) => d.target === t && pos(d.source)[along] < pt[along])
             .map((d) => ({
@@ -4338,7 +4358,11 @@ function elbow_stagger_of(edge, vertical)
                 span: Math.abs(port_of(d.source, d.style && d.style.sourcePort)[across] -
                                pt[across]),
             }));
-        return {dep: elbow_rank(dep, edge.id), arr: elbow_rank(arr, edge.id)};
+        return {
+            dep: elbow_rank(dep, edge.id),
+            arr: elbow_rank(arr, edge.id),
+            comb: combs.get(edge.id) || null,
+        };
     } catch(e) {
         log_error(`elbow edge ${edge.id}: cannot read the edges sharing its ends: ${e}`);
         return null;
@@ -4375,6 +4399,51 @@ class TreedbElbowH extends Polyline
     }
 }
 
+/************************************************************
+ *  A CURVED edge that keeps off the cards. G6's cubic, as before,
+ *  unless that very curve -- sampled, not guessed from the
+ *  rectangle round it -- would cross a card other than its own two,
+ *  or when it does not run forward and so would cross its own:
+ *  the card above a lower row of a stack, a row between a parent
+ *  and a far child. Then it goes the way an elbow would (the comb,
+ *  the detour, the route: the same lanes and staggered turns) with
+ *  round corners, so it still reads as a curve. `-v` for rows
+ *  stacked top to bottom, `-h` for columns.
+ ************************************************************/
+function curve_key_path(edge, attributes, vertical, plain)
+{
+    let [s, t] = edge.getEndpoints(attributes, false);
+    let along = vertical? 1 : 0;
+    let box_s = elbow_box(edge.sourceNode);
+    let box_t = elbow_box(edge.targetNode);
+    let boxes = elbow_obstacles(edge);
+    /*  An edge that does not run forward -- one of every reciprocal
+     *  pair, an edge within one row -- runs through its OWN two cards
+     *  as a cubic, which curve_hits does not look at: it goes round
+     *  them, as its elbow does.  */
+    let forward = (t[along] - s[along] > 2 * ELBOW_STEP);
+    if(forward && !curve_hits(plain, boxes, box_s, box_t)) {
+        return plain;
+    }
+    let pts = elbow_route(s, t, box_s, box_t, elbow_lane_of(edge), vertical, boxes,
+                          elbow_stagger_of(edge, vertical));
+    return rounded_path([s, ...pts, t], CURVE_RADIUS);
+}
+
+class TreedbCurveV extends Cubic
+{
+    getKeyPath(attributes) {
+        return curve_key_path(this, attributes, true, super.getKeyPath(attributes));
+    }
+}
+
+class TreedbCurveH extends CubicHorizontal
+{
+    getKeyPath(attributes) {
+        return curve_key_path(this, attributes, false, super.getKeyPath(attributes));
+    }
+}
+
 class TreedbCompactLayout extends BaseLayout
 {
     async execute(data, options) {

package/src/treedb_elbow.js

@@ -34,6 +34,16 @@
  *        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.
+ *
+ *      And for CURVED edges (curve_hits, rounded_path): a curve
+ *      that would cross another card follows the same way an elbow
+ *      would, with round corners, so it reads as a curve.
+ *
  *      Written for the top-down reading; left to right is the same
  *      geometry with the axes swapped.
  *
@@ -41,6 +51,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 +104,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 +259,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 +277,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 +584,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;
@@ -452,3 +613,112 @@ export function elbow_route(s, t, box_s, box_t, lane, vertical, boxes, stagger)
     }
     return route || simple;
 }
+
+/*----------------------------------------------------------------*
+ *      CURVED edges that would cross a card
+ *----------------------------------------------------------------*/
+export const CURVE_RADIUS = 24;     /*  the corners of a curve that goes round  */
+export const CURVE_STEPS = 16;      /*  samples of each curved stretch  */
+
+/*  Points along a G6 path: the ends of its runs and CURVE_STEPS
+ *  samples of each quadratic or cubic stretch.  */
+function path_points(path)
+{
+    let pts = [];
+    let cur = null;
+    for(let c of path) {
+        if(c[0] === 'M' || c[0] === 'L') {
+            cur = [c[1], c[2]];
+            pts.push(cur);
+        } else if(c[0] === 'C' && cur) {
+            let [x0, y0] = cur;
+            for(let k = 1; k <= CURVE_STEPS; k++) {
+                let u = k / CURVE_STEPS;
+                let v = 1 - u;
+                pts.push([
+                    v * v * v * x0 + 3 * v * v * u * c[1] + 3 * v * u * u * c[3] + u * u * u * c[5],
+                    v * v * v * y0 + 3 * v * v * u * c[2] + 3 * v * u * u * c[4] + u * u * u * c[6],
+                ]);
+            }
+            cur = [c[5], c[6]];
+        } else if(c[0] === 'Q' && cur) {
+            let [x0, y0] = cur;
+            for(let k = 1; k <= CURVE_STEPS; k++) {
+                let u = k / CURVE_STEPS;
+                let v = 1 - u;
+                pts.push([
+                    v * v * x0 + 2 * v * u * c[1] + u * u * c[3],
+                    v * v * y0 + 2 * v * u * c[2] + u * u * c[4],
+                ]);
+            }
+            cur = [c[3], c[4]];
+        }
+    }
+    return pts;
+}
+
+/************************************************************
+ *  Does the G6 path `path` of a curved edge cross a card other than
+ *  its own two? Measured on the curve itself -- the path G6 would
+ *  draw, sampled -- and not on the rectangle round it, which took
+ *  every card the curve merely passed near: the ports of a row
+ *  stick well into the space above it. Its own two cards are left
+ *  out: the curve starts and ends on their ports.
+ ************************************************************/
+export function curve_hits(path, boxes, box_s, box_t)
+{
+    let pts = path_points(path);
+    if(pts.length < 2) {
+        return false;
+    }
+    let bb = {x1: Infinity, y1: Infinity, x2: -Infinity, y2: -Infinity};
+    for(let p of pts) {
+        bb.x1 = Math.min(bb.x1, p[0]);
+        bb.y1 = Math.min(bb.y1, p[1]);
+        bb.x2 = Math.max(bb.x2, p[0]);
+        bb.y2 = Math.max(bb.y2, p[1]);
+    }
+    for(let b of (boxes || [])) {
+        if(same_box(b, box_s) || same_box(b, box_t) || !box_overlaps(b, box_expand(bb, 1))) {
+            continue;
+        }
+        let inner = box_expand(b, -1);
+        for(let k = 0; k + 1 < pts.length; k++) {
+            if(segment_hits(pts[k], pts[k + 1], inner)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+/************************************************************
+ *  A G6 path (['M'|'L'|'Q', ...]) along `points` with every corner
+ *  rounded -- by `radius`, or by half the shorter of its two
+ *  segments, so a short run is never overshot. The rounding is the
+ *  quadratic G6's own polyline uses.
+ ************************************************************/
+export function rounded_path(points, radius)
+{
+    let path = [['M', points[0][0], points[0][1]]];
+    for(let i = 1; i + 1 < points.length; i++) {
+        let a = points[i - 1];
+        let m = points[i];
+        let b = points[i + 1];
+        let len_in = Math.hypot(m[0] - a[0], m[1] - a[1]);
+        let len_out = Math.hypot(b[0] - m[0], b[1] - m[1]);
+        let r = Math.min(radius, len_in / 2, len_out / 2);
+        let collinear = Math.abs((m[0] - a[0]) * (b[1] - m[1]) - (m[1] - a[1]) * (b[0] - m[0])) < 1e-9;
+        if(r <= 0 || collinear) {
+            path.push(['L', m[0], m[1]]);
+            continue;
+        }
+        let p1 = [m[0] - (m[0] - a[0]) / len_in * r, m[1] - (m[1] - a[1]) / len_in * r];
+        let p2 = [m[0] + (b[0] - m[0]) / len_out * r, m[1] + (b[1] - m[1]) / len_out * r];
+        path.push(['L', p1[0], p1[1]]);
+        path.push(['Q', m[0], m[1], p2[0], p2[1]]);
+    }
+    let last = points[points.length - 1];
+    path.push(['L', last[0], last[1]]);
+    return path;
+}

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,
+    curve_hits, rounded_path, 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,133 @@ 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("a curve that would cross a card", () => {
+    /*  Whole-node boxes (ports 7px out of top and bottom).  */
+    const PB = {x1: 0, y1: -7, x2: 172, y2: 103};         /*  a parent  */
+    const R0 = {x1: 0, y1: 183, x2: 116, y2: 237};        /*  row 0 of a stack  */
+    const R1 = {x1: 0, y1: 277, x2: 116, y2: 331};        /*  row 1, under it  */
+    const SIB = {x1: 200, y1: -7, x2: 372, y2: 103};      /*  the parent's sibling  */
+    const S = [86, 96];
+
+    /*  The cubic G6 draws between two vertical ports: tangents along
+     *  the line, as its default curveOffset gives.  */
+    const cubic = (s, t) => [["M", s[0], s[1]],
+                             ["C", s[0], (s[1] + t[1]) / 2, t[0], (s[1] + t[1]) / 2, t[0], t[1]]];
+
+    test("a curve into a card of the next row crosses nothing", () => {
+        expect(curve_hits(cubic(S, [58, 190]), [PB, R0, R1, SIB], PB, R0)).toBe(false);
+    });
+
+    test("a curve into a lower row of a stack crosses the card above it", () => {
+        expect(curve_hits(cubic(S, [58, 284]), [PB, R0, R1, SIB], PB, R1)).toBe(true);
+    });
+
+    test("a curve that passes NEAR a card, beside its ports, does not count", () => {
+        /*  N0 in the target row with its port poking 7px up, beside
+         *  where the curve lands; the rectangle round the curve took it.  */
+        const T0 = {x1: 250, y1: 183, x2: 366, y2: 237};
+        const N0 = {x1: 120, y1: 183, x2: 236, y2: 237};
+        expect(curve_hits(cubic(S, [308, 190]), [PB, SIB, T0, N0], PB, T0)).toBe(false);
+    });
+
+    test("the rounded path: a straight line is one run", () => {
+        expect(rounded_path([[0, 0], [0, 100]], 24)).toEqual([["M", 0, 0], ["L", 0, 100]]);
+    });
+
+    test("the rounded path: each corner a quadratic, never past half a short run", () => {
+        let path = rounded_path([[0, 0], [0, 60], [100, 60], [100, 70]], 24);
+        expect(path[0]).toEqual(["M", 0, 0]);
+        expect(path[1]).toEqual(["L", 0, 36]);                  /*  24 before the corner  */
+        expect(path[2]).toEqual(["Q", 0, 60, 24, 60]);
+        expect(path[3]).toEqual(["L", 95, 60]);                 /*  the last run is 10: r = 5  */
+        expect(path[4]).toEqual(["Q", 100, 60, 100, 65]);
+        expect(path[5]).toEqual(["L", 100, 70]);
+    });
+});
+
 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.  */