@yuneta/gobj-ui 7.23.149 → 7.23.151

package/README.md

@@ -1438,6 +1438,30 @@ direction, and a layout with no rows (`rowless_layouts`: `radial`,
 `edge_shape` is `SDF_PERSIST` on `C_YUI_TREEDB_GRAPH`, a preference per
 treedb like `node_labels`. Consumer key: `elbow edges`.
 
+Two cases are not a channel (`7.23.150`, `treedb_elbow.js`, pure and
+tested). An elbow that does not run **forward** — the target above its
+source or in the same row, which one edge of every reciprocal pair is —
+goes **round** the two cards instead of through them: a short run out of its
+port, along the outside of both, and in from the other port's own side. And
+the edges joining the **same two cards**, either way round, take **lanes**
+10px apart in the order they were made (0, +1, −1…), so a new one never
+moves the ones already drawn; a detour on a negative lane goes round the
+left.
+
+And no elbow crosses a card (`7.23.151`). Each is tried simple first — the
+channel, or the detour round its two cards — and only when that line crosses
+a card is it **routed**: out of its port, the shortest way along the gaps
+between the cards, and in. It is our own orthogonal search on a sparse grid
+(the lines of the cards' borders, grown by a 12px clearance that grows with
+the lane, plus the two ends; a turn costs 40px of line), over the cards within
+400px first and all of them if that finds no way; with no way at all the
+simple elbow stays. A parent and the row of children under it keep their bus;
+what gets routed is a detour with a third card in its way, an edge dropping
+several rows, an edge between two cards of one row. Ports are not obstacles,
+only cards. G6's `shortest-path` router is not used: it is not exported, it
+falls back in silence to a route that crosses cards, and it rewrites its
+module defaults with every config it is given.
+
 All three take 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 (the place, not the

package/dist/gobj-ui.cjs.js

@@ -29630,6 +29630,254 @@ function layout_radial(nodes, edges, opts) {
 	}
 	return pos;
 }
+/************************************************************
+*  The lane of `id` among `ids`, the edges joining the same two
+*  cards: 0, then +1, -1, +2, -2... in the order they were made.
+*  Edge ids end in a counter, so a numeric sort is that order.
+************************************************************/
+function elbow_lane(ids, id) {
+	let k = ids.slice().sort((a, b) => String(a).localeCompare(String(b), void 0, { numeric: true })).indexOf(id);
+	if (k <= 0) return 0;
+	return (k % 2 ? 1 : -1) * Math.ceil(k / 2);
+}
+function swap(p) {
+	return [p[1], p[0]];
+}
+function swap_box(b) {
+	return {
+		x1: b.y1,
+		y1: b.x1,
+		x2: b.y2,
+		y2: b.x2
+	};
+}
+/************************************************************
+*  The control points of an elbow from the port `s` to the port
+*  `t` ([x, y] each), knowing the boxes of the two cards
+*  ({x1, y1, x2, y2}) and the edge's lane.
+*
+*      vertical    the rows are stacked (top to bottom); false
+*                  when they are side by side (left to right)
+************************************************************/
+function elbow_points(s, t, box_s, box_t, lane, vertical) {
+	if (!vertical) return elbow_points(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true).map(swap);
+	let shift = lane * 10;
+	if (t[1] - s[1] > 20) {
+		let mid = (s[1] + t[1]) / 2 + shift;
+		mid = Math.min(Math.max(mid, s[1] + 10), t[1] - 10);
+		return [[s[0], mid], [t[0], mid]];
+	}
+	let out = 16 + Math.abs(shift);
+	let side = lane < 0 ? Math.min(box_s.x1, box_t.x1) - 24 - Math.abs(shift) : Math.max(box_s.x2, box_t.x2) + 24 + Math.abs(shift);
+	let y1 = s[1] + out;
+	let y2 = t[1] - out;
+	return [
+		[s[0], y1],
+		[side, y1],
+		[side, y2],
+		[t[0], y2]
+	];
+}
+function box_expand(b, m) {
+	return {
+		x1: b.x1 - m,
+		y1: b.y1 - m,
+		x2: b.x2 + m,
+		y2: b.y2 + m
+	};
+}
+function box_overlaps(a, b) {
+	return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
+}
+function point_inside(p, b) {
+	return p[0] > b.x1 && p[0] < b.x2 && p[1] > b.y1 && p[1] < b.y2;
+}
+function segment_hits(a, c, b) {
+	let x1 = Math.min(a[0], c[0]);
+	let x2 = Math.max(a[0], c[0]);
+	let y1 = Math.min(a[1], c[1]);
+	let y2 = Math.max(a[1], c[1]);
+	return x1 < b.x2 && x2 > b.x1 && y1 < b.y2 && y2 > b.y1;
+}
+/************************************************************
+*  Does the polyline `points` (its ends included) cross any of
+*  `boxes`? A card is a box shrunk by a pixel, so a line along
+*  its border or leaving from a port on it is not a hit.
+************************************************************/
+function elbow_path_hits(points, boxes) {
+	for (let b of boxes) {
+		let inner = box_expand(b, -1);
+		for (let i = 0; i + 1 < points.length; i++) if (segment_hits(points[i], points[i + 1], inner)) return true;
+	}
+	return false;
+}
+function heap_push(h, item) {
+	h.push(item);
+	let i = h.length - 1;
+	while (i > 0) {
+		let p = i - 1 >> 1;
+		if (h[p][0] <= h[i][0]) break;
+		[h[p], h[i]] = [h[i], h[p]];
+		i = p;
+	}
+}
+function heap_pop(h) {
+	let top = h[0];
+	let last = h.pop();
+	if (h.length) {
+		h[0] = last;
+		let i = 0;
+		for (;;) {
+			let l = 2 * i + 1;
+			let r = l + 1;
+			let m = i;
+			if (l < h.length && h[l][0] < h[m][0]) m = l;
+			if (r < h.length && h[r][0] < h[m][0]) m = r;
+			if (m === i) break;
+			[h[m], h[i]] = [h[i], h[m]];
+			i = m;
+		}
+	}
+	return top;
+}
+/************************************************************
+*  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.
+*
+*  The grid is SPARSE: only the lines of the boxes' borders and
+*  of the two ends, which is all an orthogonal shortest path ever
+*  needs to turn on. Returns [a, ...turns, z], or null when every
+*  way is closed.
+************************************************************/
+function orth_search(a, z, boxes) {
+	for (let b of boxes) if (point_inside(a, b) || point_inside(z, b)) return null;
+	let uniq = (list) => [...new Set(list)].sort((p, q) => p - q);
+	let xs = uniq([a[0], z[0]].concat(...boxes.map((b) => [b.x1, b.x2])));
+	let ys = uniq([a[1], z[1]].concat(...boxes.map((b) => [b.y1, b.y2])));
+	let W = xs.length;
+	let H = ys.length;
+	let free = (x, y) => !boxes.some((b) => point_inside([x, y], b));
+	let ok = new Uint8Array(W * H);
+	for (let j = 0; j < H; j++) for (let i = 0; i < W; i++) ok[j * W + i] = free(xs[i], ys[j]) ? 1 : 0;
+	let step_right = new Uint8Array(W * H);
+	let step_down = new Uint8Array(W * H);
+	for (let j = 0; j < H; j++) for (let i = 0; i < W; i++) {
+		let k = j * W + i;
+		if (!ok[k]) continue;
+		if (i + 1 < W && ok[k + 1] && free((xs[i] + xs[i + 1]) / 2, ys[j])) step_right[k] = 1;
+		if (j + 1 < H && ok[k + W] && free(xs[i], (ys[j] + ys[j + 1]) / 2)) step_down[k] = 1;
+	}
+	let start = ys.indexOf(a[1]) * W + xs.indexOf(a[0]);
+	let goal = ys.indexOf(z[1]) * W + xs.indexOf(z[0]);
+	let best = new Float64Array(W * H * 4).fill(Infinity);
+	let prev = new Int32Array(W * H * 4).fill(-1);
+	let heap = [];
+	best[start * 4 + 2] = 0;
+	heap_push(heap, [0, start * 4 + 2]);
+	let moves = (k) => {
+		let i = k % W;
+		let j = (k - i) / W;
+		let out = [];
+		if (step_right[k]) out.push([
+			k + 1,
+			0,
+			xs[i + 1] - xs[i]
+		]);
+		if (i > 0 && step_right[k - 1]) out.push([
+			k - 1,
+			1,
+			xs[i] - xs[i - 1]
+		]);
+		if (step_down[k]) out.push([
+			k + W,
+			2,
+			ys[j + 1] - ys[j]
+		]);
+		if (j > 0 && step_down[k - W]) out.push([
+			k - W,
+			3,
+			ys[j] - ys[j - 1]
+		]);
+		return out;
+	};
+	let found = -1;
+	let found_cost = Infinity;
+	while (heap.length) {
+		let [cost, state] = heap_pop(heap);
+		if (cost > best[state] || cost >= found_cost) continue;
+		let k = state >> 2;
+		let dir = state & 3;
+		if (k === goal) {
+			let total = cost + (dir === 2 ? 0 : 40);
+			if (total < found_cost) {
+				found_cost = total;
+				found = state;
+			}
+			continue;
+		}
+		for (let [nk, nd, len] of moves(k)) {
+			let c = cost + len + (nd === dir ? 0 : 40);
+			let ns = nk * 4 + nd;
+			if (c < best[ns]) {
+				best[ns] = c;
+				prev[ns] = state;
+				heap_push(heap, [c, ns]);
+			}
+		}
+	}
+	if (found < 0) return null;
+	let states = [];
+	for (let s = found; s >= 0; s = prev[s]) states.push(s);
+	states.reverse();
+	let pts = [a];
+	for (let n = 1; n < states.length; n++) if (n + 1 < states.length && (states[n + 1] & 3) !== (states[n] & 3)) {
+		let k = states[n] >> 2;
+		pts.push([xs[k % W], ys[Math.floor(k / W)]]);
+	}
+	pts.push(z);
+	return pts;
+}
+/************************************************************
+*  The control points of an elbow that does not cross any card.
+*
+*  The simple elbow first (elbow_points): the channel, or the
+*  detour round the two cards. Only when that line crosses a card
+*  -- a third record standing in a detour's way, a row in the way
+*  of an edge that drops several rows -- is it ROUTED: out of the
+*  port, the shortest way along the gaps between the cards, in.
+*  A parent and the row of children under it keep their bus.
+*
+*  `boxes` are all the cards on screen, the two of the edge
+*  included. The route keeps a clearance from every card, which
+*  grows with the lane so that two routed edges of one pair do not
+*  coincide. Nearby cards first; all of them if that finds no way;
+*  the simple elbow if nothing does.
+************************************************************/
+function elbow_route(s, t, box_s, box_t, lane, vertical, boxes) {
+	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);
+	let simple = elbow_points(s, t, box_s, box_t, lane, true);
+	if (!elbow_path_hits([
+		s,
+		...simple,
+		t
+	], others)) return simple;
+	let m = 12 + Math.abs(lane) * 10;
+	let a = [s[0], s[1] + m + 4];
+	let z = [t[0], t[1] - m - 4];
+	let region = box_expand({
+		x1: Math.min(a[0], z[0], box_s.x1, box_t.x1),
+		y1: Math.min(a[1], z[1], box_s.y1, box_t.y1),
+		x2: Math.max(a[0], z[0], box_s.x2, box_t.x2),
+		y2: Math.max(a[1], z[1], box_s.y2, box_t.y2)
+	}, 400);
+	let near = others.filter((b) => box_overlaps(b, region));
+	let route = orth_search(a, z, near.map((b) => box_expand(b, m)));
+	if (!route && near.length < others.length) route = orth_search(a, z, others.map((b) => box_expand(b, m)));
+	return route || simple;
+}
 //#endregion
 //#region node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -59009,14 +59257,64 @@ var TreedbTreeLayout = class extends _antv_g6.BaseLayout {
 *
 *  Computed on every draw from where the two ends ARE, so a
 *  dragged card, a fold or a layout needs nothing else. `-v` runs
-*  between rows (top to bottom), `-h` between columns.
+*  between rows (top to bottom), `-h` between columns. An edge that
+*  does not run forward goes round the two cards, the edges joining
+*  the same two cards take lanes, and a line that would cross any
+*  other card is routed round it (treedb_elbow.js).
 ************************************************************/
 var ELBOW_RADIUS = 6;
+function elbow_box(node) {
+	try {
+		let b = node.getShape("key").getBounds();
+		return {
+			x1: b.min[0],
+			y1: b.min[1],
+			x2: b.max[0],
+			y2: b.max[1]
+		};
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`elbow edge: no bounds for node ${node && node.id}: ${e}`);
+		let c = node.getCenter();
+		return {
+			x1: c[0],
+			y1: c[1],
+			x2: c[0],
+			y2: c[1]
+		};
+	}
+}
+var _elbow_boxes = null;
+function elbow_obstacles(edge) {
+	if (_elbow_boxes) return _elbow_boxes;
+	let element = edge.context && edge.context.element;
+	if (!element) return [];
+	try {
+		_elbow_boxes = element.getNodes().map((n) => elbow_box(n));
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`elbow edge ${edge.id}: cannot read the cards: ${e}`);
+		_elbow_boxes = [];
+	}
+	queueMicrotask(() => {
+		_elbow_boxes = null;
+	});
+	return _elbow_boxes;
+}
+function elbow_lane_of(edge) {
+	let graph = edge.context && edge.context.graph;
+	let s = edge.sourceNode && edge.sourceNode.id;
+	let t = edge.targetNode && edge.targetNode.id;
+	if (!graph || s === void 0 || t === void 0 || s === t) return 0;
+	try {
+		return elbow_lane(graph.getRelatedEdgesData(s).filter((d) => d.source === s && d.target === t || d.source === t && d.target === s).map((d) => d.id), edge.id);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`elbow edge ${edge.id}: cannot read the edges of ${s}: ${e}`);
+		return 0;
+	}
+}
 var TreedbElbowV = class extends _antv_g6.Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		let mid = (s[1] + t[1]) / 2;
-		return [[s[0], mid], [t[0], mid]];
+		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), true, elbow_obstacles(this));
 	}
 	getKeyPath(attributes) {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));
@@ -59025,8 +59323,7 @@ var TreedbElbowV = class extends _antv_g6.Polyline {
 var TreedbElbowH = class extends _antv_g6.Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		let mid = (s[0] + t[0]) / 2;
-		return [[mid, s[1]], [mid, t[1]]];
+		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), false, elbow_obstacles(this));
 	}
 	getKeyPath(attributes) {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));

package/dist/gobj-ui.es.js

@@ -29625,6 +29625,254 @@ function layout_radial(nodes, edges, opts) {
 	}
 	return pos;
 }
+/************************************************************
+*  The lane of `id` among `ids`, the edges joining the same two
+*  cards: 0, then +1, -1, +2, -2... in the order they were made.
+*  Edge ids end in a counter, so a numeric sort is that order.
+************************************************************/
+function elbow_lane(ids, id) {
+	let k = ids.slice().sort((a, b) => String(a).localeCompare(String(b), void 0, { numeric: true })).indexOf(id);
+	if (k <= 0) return 0;
+	return (k % 2 ? 1 : -1) * Math.ceil(k / 2);
+}
+function swap(p) {
+	return [p[1], p[0]];
+}
+function swap_box(b) {
+	return {
+		x1: b.y1,
+		y1: b.x1,
+		x2: b.y2,
+		y2: b.x2
+	};
+}
+/************************************************************
+*  The control points of an elbow from the port `s` to the port
+*  `t` ([x, y] each), knowing the boxes of the two cards
+*  ({x1, y1, x2, y2}) and the edge's lane.
+*
+*      vertical    the rows are stacked (top to bottom); false
+*                  when they are side by side (left to right)
+************************************************************/
+function elbow_points(s, t, box_s, box_t, lane, vertical) {
+	if (!vertical) return elbow_points(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true).map(swap);
+	let shift = lane * 10;
+	if (t[1] - s[1] > 20) {
+		let mid = (s[1] + t[1]) / 2 + shift;
+		mid = Math.min(Math.max(mid, s[1] + 10), t[1] - 10);
+		return [[s[0], mid], [t[0], mid]];
+	}
+	let out = 16 + Math.abs(shift);
+	let side = lane < 0 ? Math.min(box_s.x1, box_t.x1) - 24 - Math.abs(shift) : Math.max(box_s.x2, box_t.x2) + 24 + Math.abs(shift);
+	let y1 = s[1] + out;
+	let y2 = t[1] - out;
+	return [
+		[s[0], y1],
+		[side, y1],
+		[side, y2],
+		[t[0], y2]
+	];
+}
+function box_expand(b, m) {
+	return {
+		x1: b.x1 - m,
+		y1: b.y1 - m,
+		x2: b.x2 + m,
+		y2: b.y2 + m
+	};
+}
+function box_overlaps(a, b) {
+	return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
+}
+function point_inside(p, b) {
+	return p[0] > b.x1 && p[0] < b.x2 && p[1] > b.y1 && p[1] < b.y2;
+}
+function segment_hits(a, c, b) {
+	let x1 = Math.min(a[0], c[0]);
+	let x2 = Math.max(a[0], c[0]);
+	let y1 = Math.min(a[1], c[1]);
+	let y2 = Math.max(a[1], c[1]);
+	return x1 < b.x2 && x2 > b.x1 && y1 < b.y2 && y2 > b.y1;
+}
+/************************************************************
+*  Does the polyline `points` (its ends included) cross any of
+*  `boxes`? A card is a box shrunk by a pixel, so a line along
+*  its border or leaving from a port on it is not a hit.
+************************************************************/
+function elbow_path_hits(points, boxes) {
+	for (let b of boxes) {
+		let inner = box_expand(b, -1);
+		for (let i = 0; i + 1 < points.length; i++) if (segment_hits(points[i], points[i + 1], inner)) return true;
+	}
+	return false;
+}
+function heap_push(h, item) {
+	h.push(item);
+	let i = h.length - 1;
+	while (i > 0) {
+		let p = i - 1 >> 1;
+		if (h[p][0] <= h[i][0]) break;
+		[h[p], h[i]] = [h[i], h[p]];
+		i = p;
+	}
+}
+function heap_pop(h) {
+	let top = h[0];
+	let last = h.pop();
+	if (h.length) {
+		h[0] = last;
+		let i = 0;
+		for (;;) {
+			let l = 2 * i + 1;
+			let r = l + 1;
+			let m = i;
+			if (l < h.length && h[l][0] < h[m][0]) m = l;
+			if (r < h.length && h[r][0] < h[m][0]) m = r;
+			if (m === i) break;
+			[h[m], h[i]] = [h[i], h[m]];
+			i = m;
+		}
+	}
+	return top;
+}
+/************************************************************
+*  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.
+*
+*  The grid is SPARSE: only the lines of the boxes' borders and
+*  of the two ends, which is all an orthogonal shortest path ever
+*  needs to turn on. Returns [a, ...turns, z], or null when every
+*  way is closed.
+************************************************************/
+function orth_search(a, z, boxes) {
+	for (let b of boxes) if (point_inside(a, b) || point_inside(z, b)) return null;
+	let uniq = (list) => [...new Set(list)].sort((p, q) => p - q);
+	let xs = uniq([a[0], z[0]].concat(...boxes.map((b) => [b.x1, b.x2])));
+	let ys = uniq([a[1], z[1]].concat(...boxes.map((b) => [b.y1, b.y2])));
+	let W = xs.length;
+	let H = ys.length;
+	let free = (x, y) => !boxes.some((b) => point_inside([x, y], b));
+	let ok = new Uint8Array(W * H);
+	for (let j = 0; j < H; j++) for (let i = 0; i < W; i++) ok[j * W + i] = free(xs[i], ys[j]) ? 1 : 0;
+	let step_right = new Uint8Array(W * H);
+	let step_down = new Uint8Array(W * H);
+	for (let j = 0; j < H; j++) for (let i = 0; i < W; i++) {
+		let k = j * W + i;
+		if (!ok[k]) continue;
+		if (i + 1 < W && ok[k + 1] && free((xs[i] + xs[i + 1]) / 2, ys[j])) step_right[k] = 1;
+		if (j + 1 < H && ok[k + W] && free(xs[i], (ys[j] + ys[j + 1]) / 2)) step_down[k] = 1;
+	}
+	let start = ys.indexOf(a[1]) * W + xs.indexOf(a[0]);
+	let goal = ys.indexOf(z[1]) * W + xs.indexOf(z[0]);
+	let best = new Float64Array(W * H * 4).fill(Infinity);
+	let prev = new Int32Array(W * H * 4).fill(-1);
+	let heap = [];
+	best[start * 4 + 2] = 0;
+	heap_push(heap, [0, start * 4 + 2]);
+	let moves = (k) => {
+		let i = k % W;
+		let j = (k - i) / W;
+		let out = [];
+		if (step_right[k]) out.push([
+			k + 1,
+			0,
+			xs[i + 1] - xs[i]
+		]);
+		if (i > 0 && step_right[k - 1]) out.push([
+			k - 1,
+			1,
+			xs[i] - xs[i - 1]
+		]);
+		if (step_down[k]) out.push([
+			k + W,
+			2,
+			ys[j + 1] - ys[j]
+		]);
+		if (j > 0 && step_down[k - W]) out.push([
+			k - W,
+			3,
+			ys[j] - ys[j - 1]
+		]);
+		return out;
+	};
+	let found = -1;
+	let found_cost = Infinity;
+	while (heap.length) {
+		let [cost, state] = heap_pop(heap);
+		if (cost > best[state] || cost >= found_cost) continue;
+		let k = state >> 2;
+		let dir = state & 3;
+		if (k === goal) {
+			let total = cost + (dir === 2 ? 0 : 40);
+			if (total < found_cost) {
+				found_cost = total;
+				found = state;
+			}
+			continue;
+		}
+		for (let [nk, nd, len] of moves(k)) {
+			let c = cost + len + (nd === dir ? 0 : 40);
+			let ns = nk * 4 + nd;
+			if (c < best[ns]) {
+				best[ns] = c;
+				prev[ns] = state;
+				heap_push(heap, [c, ns]);
+			}
+		}
+	}
+	if (found < 0) return null;
+	let states = [];
+	for (let s = found; s >= 0; s = prev[s]) states.push(s);
+	states.reverse();
+	let pts = [a];
+	for (let n = 1; n < states.length; n++) if (n + 1 < states.length && (states[n + 1] & 3) !== (states[n] & 3)) {
+		let k = states[n] >> 2;
+		pts.push([xs[k % W], ys[Math.floor(k / W)]]);
+	}
+	pts.push(z);
+	return pts;
+}
+/************************************************************
+*  The control points of an elbow that does not cross any card.
+*
+*  The simple elbow first (elbow_points): the channel, or the
+*  detour round the two cards. Only when that line crosses a card
+*  -- a third record standing in a detour's way, a row in the way
+*  of an edge that drops several rows -- is it ROUTED: out of the
+*  port, the shortest way along the gaps between the cards, in.
+*  A parent and the row of children under it keep their bus.
+*
+*  `boxes` are all the cards on screen, the two of the edge
+*  included. The route keeps a clearance from every card, which
+*  grows with the lane so that two routed edges of one pair do not
+*  coincide. Nearby cards first; all of them if that finds no way;
+*  the simple elbow if nothing does.
+************************************************************/
+function elbow_route(s, t, box_s, box_t, lane, vertical, boxes) {
+	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);
+	let simple = elbow_points(s, t, box_s, box_t, lane, true);
+	if (!elbow_path_hits([
+		s,
+		...simple,
+		t
+	], others)) return simple;
+	let m = 12 + Math.abs(lane) * 10;
+	let a = [s[0], s[1] + m + 4];
+	let z = [t[0], t[1] - m - 4];
+	let region = box_expand({
+		x1: Math.min(a[0], z[0], box_s.x1, box_t.x1),
+		y1: Math.min(a[1], z[1], box_s.y1, box_t.y1),
+		x2: Math.max(a[0], z[0], box_s.x2, box_t.x2),
+		y2: Math.max(a[1], z[1], box_s.y2, box_t.y2)
+	}, 400);
+	let near = others.filter((b) => box_overlaps(b, region));
+	let route = orth_search(a, z, near.map((b) => box_expand(b, m)));
+	if (!route && near.length < others.length) route = orth_search(a, z, others.map((b) => box_expand(b, m)));
+	return route || simple;
+}
 //#endregion
 //#region node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -59004,14 +59252,64 @@ var TreedbTreeLayout = class extends BaseLayout {
 *
 *  Computed on every draw from where the two ends ARE, so a
 *  dragged card, a fold or a layout needs nothing else. `-v` runs
-*  between rows (top to bottom), `-h` between columns.
+*  between rows (top to bottom), `-h` between columns. An edge that
+*  does not run forward goes round the two cards, the edges joining
+*  the same two cards take lanes, and a line that would cross any
+*  other card is routed round it (treedb_elbow.js).
 ************************************************************/
 var ELBOW_RADIUS = 6;
+function elbow_box(node) {
+	try {
+		let b = node.getShape("key").getBounds();
+		return {
+			x1: b.min[0],
+			y1: b.min[1],
+			x2: b.max[0],
+			y2: b.max[1]
+		};
+	} catch (e) {
+		log_error(`elbow edge: no bounds for node ${node && node.id}: ${e}`);
+		let c = node.getCenter();
+		return {
+			x1: c[0],
+			y1: c[1],
+			x2: c[0],
+			y2: c[1]
+		};
+	}
+}
+var _elbow_boxes = null;
+function elbow_obstacles(edge) {
+	if (_elbow_boxes) return _elbow_boxes;
+	let element = edge.context && edge.context.element;
+	if (!element) return [];
+	try {
+		_elbow_boxes = element.getNodes().map((n) => elbow_box(n));
+	} catch (e) {
+		log_error(`elbow edge ${edge.id}: cannot read the cards: ${e}`);
+		_elbow_boxes = [];
+	}
+	queueMicrotask(() => {
+		_elbow_boxes = null;
+	});
+	return _elbow_boxes;
+}
+function elbow_lane_of(edge) {
+	let graph = edge.context && edge.context.graph;
+	let s = edge.sourceNode && edge.sourceNode.id;
+	let t = edge.targetNode && edge.targetNode.id;
+	if (!graph || s === void 0 || t === void 0 || s === t) return 0;
+	try {
+		return elbow_lane(graph.getRelatedEdgesData(s).filter((d) => d.source === s && d.target === t || d.source === t && d.target === s).map((d) => d.id), edge.id);
+	} catch (e) {
+		log_error(`elbow edge ${edge.id}: cannot read the edges of ${s}: ${e}`);
+		return 0;
+	}
+}
 var TreedbElbowV = class extends Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		let mid = (s[1] + t[1]) / 2;
-		return [[s[0], mid], [t[0], mid]];
+		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), true, elbow_obstacles(this));
 	}
 	getKeyPath(attributes) {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));
@@ -59020,8 +59318,7 @@ var TreedbElbowV = class extends Polyline {
 var TreedbElbowH = class extends Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		let mid = (s[0] + t[0]) / 2;
-		return [[mid, s[1]], [mid, t[1]]];
+		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), false, elbow_obstacles(this));
 	}
 	getKeyPath(attributes) {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.149",
+  "version": "7.23.151",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_g6_nodes_tree.js

@@ -133,6 +133,7 @@ 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_route} from "./treedb_elbow.js";
 
 import {
     BaseLayout,
@@ -4221,16 +4222,81 @@ class TreedbTreeLayout extends BaseLayout
  *
  *  Computed on every draw from where the two ends ARE, so a
  *  dragged card, a fold or a layout needs nothing else. `-v` runs
- *  between rows (top to bottom), `-h` between columns.
+ *  between rows (top to bottom), `-h` between columns. An edge that
+ *  does not run forward goes round the two cards, the edges joining
+ *  the same two cards take lanes, and a line that would cross any
+ *  other card is routed round it (treedb_elbow.js).
  ************************************************************/
 const ELBOW_RADIUS = 6;
 
+/*  The box of a card on the canvas, for a detour to go round it.  */
+function elbow_box(node)
+{
+    try {
+        let b = node.getShape('key').getBounds();
+        return {x1: b.min[0], y1: b.min[1], x2: b.max[0], y2: b.max[1]};
+    } catch(e) {
+        log_error(`elbow edge: no bounds for node ${node && node.id}: ${e}`);
+        let c = node.getCenter();
+        return {x1: c[0], y1: c[1], x2: c[0], y2: c[1]};
+    }
+}
+
+/*  Every card on screen, as boxes: what a routed elbow keeps clear
+ *  of. Read ONCE per draw -- G6 draws all its edges in one go, so
+ *  the list lives until the next microtask and every edge of that
+ *  draw shares it.  */
+let _elbow_boxes = null;
+
+function elbow_obstacles(edge)
+{
+    if(_elbow_boxes) {
+        return _elbow_boxes;
+    }
+    let element = edge.context && edge.context.element;
+    if(!element) {
+        return [];
+    }
+    try {
+        _elbow_boxes = element.getNodes().map((n) => elbow_box(n));
+    } catch(e) {
+        log_error(`elbow edge ${edge.id}: cannot read the cards: ${e}`);
+        _elbow_boxes = [];
+    }
+    queueMicrotask(() => {
+        _elbow_boxes = null;
+    });
+    return _elbow_boxes;
+}
+
+/*  The lane of an edge among the edges joining the same two cards,
+ *  either way round (treedb_elbow.js).  */
+function elbow_lane_of(edge)
+{
+    let graph = edge.context && edge.context.graph;
+    let s = edge.sourceNode && edge.sourceNode.id;
+    let t = edge.targetNode && edge.targetNode.id;
+    if(!graph || s === undefined || t === undefined || s === t) {
+        return 0;
+    }
+    try {
+        let ids = graph.getRelatedEdgesData(s)
+            .filter((d) => (d.source === s && d.target === t) ||
+                           (d.source === t && d.target === s))
+            .map((d) => d.id);
+        return elbow_lane(ids, edge.id);
+    } catch(e) {
+        log_error(`elbow edge ${edge.id}: cannot read the edges of ${s}: ${e}`);
+        return 0;
+    }
+}
+
 class TreedbElbowV extends Polyline
 {
     getControlPoints(attributes) {
         let [s, t] = this.getEndpoints(attributes, false);
-        let mid = (s[1] + t[1]) / 2;
-        return [[s[0], mid], [t[0], mid]];
+        return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode),
+                           elbow_lane_of(this), true, elbow_obstacles(this));
     }
 
     getKeyPath(attributes) {
@@ -4243,8 +4309,8 @@ class TreedbElbowH extends Polyline
 {
     getControlPoints(attributes) {
         let [s, t] = this.getEndpoints(attributes, false);
-        let mid = (s[0] + t[0]) / 2;
-        return [[mid, s[1]], [mid, t[1]]];
+        return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode),
+                           elbow_lane_of(this), false, elbow_obstacles(this));
     }
 
     getKeyPath(attributes) {

package/src/treedb_elbow.js

@@ -0,0 +1,370 @@
+/***********************************************************************
+ *          treedb_elbow.js
+ *
+ *      Where an elbow edge of the treedb graph turns, as plain
+ *      geometry: the two elbow edge types of c_g6_nodes_tree.js ask
+ *      this module for their control points on every draw, and it
+ *      can be tested without G6.
+ *
+ *      An elbow is mxGraph's tree routing: straight out of the
+ *      parent's port to the channel half way to the child, along it,
+ *      and straight into the child's port. Two cases are not that:
+ *
+ *      - An edge that does not run FORWARD: the child above its
+ *        parent, or in the same row. One of the two edges of a
+ *        reciprocal pair (A -> B and B -> A) is always one. A channel
+ *        half way between would cross both cards and lie on top of
+ *        its partner, so it goes ROUND: a short run out of its port,
+ *        along the outside of both cards, and into the other port
+ *        from that port's own side.
+ *
+ *      - Several edges joining the SAME two cards: a reciprocal pair,
+ *        or two hooks of one parent reaching one child. Each gets a
+ *        LANE: the first stays where it is, the next moves one step to
+ *        one side, the next one step to the other. The lane follows
+ *        the order the edges were made, so a new edge never moves the
+ *        ones already drawn.
+ *
+ *      Written for the top-down reading; left to right is the same
+ *      geometry with the axes swapped.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+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  */
+
+/************************************************************
+ *  The lane of `id` among `ids`, the edges joining the same two
+ *  cards: 0, then +1, -1, +2, -2... in the order they were made.
+ *  Edge ids end in a counter, so a numeric sort is that order.
+ ************************************************************/
+export function elbow_lane(ids, id)
+{
+    let sorted = ids.slice().sort(
+        (a, b) => String(a).localeCompare(String(b), undefined, {numeric: true})
+    );
+    let k = sorted.indexOf(id);
+    if(k <= 0) {
+        return 0;
+    }
+    let side = (k % 2)? 1 : -1;
+    return side * Math.ceil(k / 2);
+}
+
+function swap(p)
+{
+    return [p[1], p[0]];
+}
+
+function swap_box(b)
+{
+    return {x1: b.y1, y1: b.x1, x2: b.y2, y2: b.x2};
+}
+
+/************************************************************
+ *  The control points of an elbow from the port `s` to the port
+ *  `t` ([x, y] each), knowing the boxes of the two cards
+ *  ({x1, y1, x2, y2}) and the edge's lane.
+ *
+ *      vertical    the rows are stacked (top to bottom); false
+ *                  when they are side by side (left to right)
+ ************************************************************/
+export function elbow_points(s, t, box_s, box_t, lane, vertical)
+{
+    if(!vertical) {
+        return elbow_points(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true)
+            .map(swap);
+    }
+
+    let shift = lane * ELBOW_STEP;
+
+    /*  Forward: the channel half way down, moved by the lane and
+     *  kept strictly between the two ports.  */
+    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);
+        return [[s[0], mid], [t[0], mid]];
+    }
+
+    /*  Backwards, or across one row: round the outside. A negative
+     *  lane goes round the left, any other the right, so the two
+     *  detours of one pair never share a side.  */
+    let out = ELBOW_JETTY + Math.abs(shift);
+    let side = (lane < 0)
+        ? Math.min(box_s.x1, box_t.x1) - ELBOW_CLEAR - Math.abs(shift)
+        : Math.max(box_s.x2, box_t.x2) + ELBOW_CLEAR + Math.abs(shift);
+    let y1 = s[1] + out;        /*  a hook port is on the bottom edge  */
+    let y2 = t[1] - out;        /*  an fkey port is on the top edge  */
+    return [[s[0], y1], [side, y1], [side, y2], [t[0], y2]];
+}
+
+/*----------------------------------------------------------------*
+ *      Round the OTHER cards too
+ *----------------------------------------------------------------*/
+export const ROUTE_REACH = 400;     /*  how far around the two cards the first search looks  */
+export const ROUTE_BEND = 40;       /*  a turn costs as much as this many pixels of line  */
+
+function box_expand(b, m)
+{
+    return {x1: b.x1 - m, y1: b.y1 - m, x2: b.x2 + m, y2: b.y2 + m};
+}
+
+function box_overlaps(a, b)
+{
+    return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
+}
+
+function point_inside(p, b)
+{
+    return p[0] > b.x1 && p[0] < b.x2 && p[1] > b.y1 && p[1] < b.y2;
+}
+
+/*  Does the axis-aligned segment a-c pass through the INSIDE of b?
+ *  Running along its border does not count.  */
+function segment_hits(a, c, b)
+{
+    let x1 = Math.min(a[0], c[0]);
+    let x2 = Math.max(a[0], c[0]);
+    let y1 = Math.min(a[1], c[1]);
+    let y2 = Math.max(a[1], c[1]);
+    return x1 < b.x2 && x2 > b.x1 && y1 < b.y2 && y2 > b.y1;
+}
+
+/************************************************************
+ *  Does the polyline `points` (its ends included) cross any of
+ *  `boxes`? A card is a box shrunk by a pixel, so a line along
+ *  its border or leaving from a port on it is not a hit.
+ ************************************************************/
+export function elbow_path_hits(points, boxes)
+{
+    for(let b of boxes) {
+        let inner = box_expand(b, -1);
+        for(let i = 0; i + 1 < points.length; i++) {
+            if(segment_hits(points[i], points[i + 1], inner)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+/*  A binary heap of [cost, state], smallest cost first.  */
+function heap_push(h, item)
+{
+    h.push(item);
+    let i = h.length - 1;
+    while(i > 0) {
+        let p = (i - 1) >> 1;
+        if(h[p][0] <= h[i][0]) {
+            break;
+        }
+        [h[p], h[i]] = [h[i], h[p]];
+        i = p;
+    }
+}
+
+function heap_pop(h)
+{
+    let top = h[0];
+    let last = h.pop();
+    if(h.length) {
+        h[0] = last;
+        let i = 0;
+        for(;;) {
+            let l = 2 * i + 1;
+            let r = l + 1;
+            let m = i;
+            if(l < h.length && h[l][0] < h[m][0]) {
+                m = l;
+            }
+            if(r < h.length && h[r][0] < h[m][0]) {
+                m = r;
+            }
+            if(m === i) {
+                break;
+            }
+            [h[m], h[i]] = [h[i], h[m]];
+            i = m;
+        }
+    }
+    return top;
+}
+
+/************************************************************
+ *  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.
+ *
+ *  The grid is SPARSE: only the lines of the boxes' borders and
+ *  of the two ends, which is all an orthogonal shortest path ever
+ *  needs to turn on. Returns [a, ...turns, z], or null when every
+ *  way is closed.
+ ************************************************************/
+function orth_search(a, z, boxes)
+{
+    for(let b of boxes) {
+        if(point_inside(a, b) || point_inside(z, b)) {
+            return null;
+        }
+    }
+
+    let uniq = (list) => [...new Set(list)].sort((p, q) => p - q);
+    let xs = uniq([a[0], z[0]].concat(...boxes.map((b) => [b.x1, b.x2])));
+    let ys = uniq([a[1], z[1]].concat(...boxes.map((b) => [b.y1, b.y2])));
+    let W = xs.length;
+    let H = ys.length;
+
+    let free = (x, y) => !boxes.some((b) => point_inside([x, y], b));
+    let ok = new Uint8Array(W * H);
+    for(let j = 0; j < H; j++) {
+        for(let i = 0; i < W; i++) {
+            ok[j * W + i] = free(xs[i], ys[j])? 1 : 0;
+        }
+    }
+    /*  A step to the next line is open when both points are free and
+     *  so is the middle of the step: consecutive lines have no border
+     *  between them, so the middle speaks for the whole step.  */
+    let step_right = new Uint8Array(W * H);
+    let step_down = new Uint8Array(W * H);
+    for(let j = 0; j < H; j++) {
+        for(let i = 0; i < W; i++) {
+            let k = j * W + i;
+            if(!ok[k]) {
+                continue;
+            }
+            if(i + 1 < W && ok[k + 1] && free((xs[i] + xs[i + 1]) / 2, ys[j])) {
+                step_right[k] = 1;
+            }
+            if(j + 1 < H && ok[k + W] && free(xs[i], (ys[j] + ys[j + 1]) / 2)) {
+                step_down[k] = 1;
+            }
+        }
+    }
+
+    /*  States are (point, heading): 0 right, 1 left, 2 down, 3 up.  */
+    let start = ys.indexOf(a[1]) * W + xs.indexOf(a[0]);
+    let goal = ys.indexOf(z[1]) * W + xs.indexOf(z[0]);
+    let best = new Float64Array(W * H * 4).fill(Infinity);
+    let prev = new Int32Array(W * H * 4).fill(-1);
+    let heap = [];
+    best[start * 4 + 2] = 0;
+    heap_push(heap, [0, start * 4 + 2]);
+
+    let moves = (k) => {
+        let i = k % W;
+        let j = (k - i) / W;
+        let out = [];
+        if(step_right[k]) {
+            out.push([k + 1, 0, xs[i + 1] - xs[i]]);
+        }
+        if(i > 0 && step_right[k - 1]) {
+            out.push([k - 1, 1, xs[i] - xs[i - 1]]);
+        }
+        if(step_down[k]) {
+            out.push([k + W, 2, ys[j + 1] - ys[j]]);
+        }
+        if(j > 0 && step_down[k - W]) {
+            out.push([k - W, 3, ys[j] - ys[j - 1]]);
+        }
+        return out;
+    };
+
+    let found = -1;
+    let found_cost = Infinity;
+    while(heap.length) {
+        let [cost, state] = heap_pop(heap);
+        if(cost > best[state] || cost >= found_cost) {
+            continue;
+        }
+        let k = state >> 2;
+        let dir = state & 3;
+        if(k === goal) {
+            let total = cost + ((dir === 2)? 0 : ROUTE_BEND);
+            if(total < found_cost) {
+                found_cost = total;
+                found = state;
+            }
+            continue;
+        }
+        for(let [nk, nd, len] of moves(k)) {
+            let c = cost + len + ((nd === dir)? 0 : ROUTE_BEND);
+            let ns = nk * 4 + nd;
+            if(c < best[ns]) {
+                best[ns] = c;
+                prev[ns] = state;
+                heap_push(heap, [c, ns]);
+            }
+        }
+    }
+    if(found < 0) {
+        return null;
+    }
+
+    /*  Back from the goal, keeping only the points where it turns.  */
+    let states = [];
+    for(let s = found; s >= 0; s = prev[s]) {
+        states.push(s);
+    }
+    states.reverse();
+    let pts = [a];
+    for(let n = 1; n < states.length; n++) {
+        let turn = (n + 1 < states.length) && ((states[n + 1] & 3) !== (states[n] & 3));
+        if(turn) {
+            let k = states[n] >> 2;
+            pts.push([xs[k % W], ys[Math.floor(k / W)]]);
+        }
+    }
+    pts.push(z);
+    return pts;
+}
+
+/************************************************************
+ *  The control points of an elbow that does not cross any card.
+ *
+ *  The simple elbow first (elbow_points): the channel, or the
+ *  detour round the two cards. Only when that line crosses a card
+ *  -- a third record standing in a detour's way, a row in the way
+ *  of an edge that drops several rows -- is it ROUTED: out of the
+ *  port, the shortest way along the gaps between the cards, in.
+ *  A parent and the row of children under it keep their bus.
+ *
+ *  `boxes` are all the cards on screen, the two of the edge
+ *  included. The route keeps a clearance from every card, which
+ *  grows with the lane so that two routed edges of one pair do not
+ *  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)
+{
+    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);
+    }
+
+    let simple = elbow_points(s, t, box_s, box_t, lane, true);
+    if(!elbow_path_hits([s, ...simple, t], others)) {
+        return simple;
+    }
+
+    let m = ELBOW_CLEAR / 2 + Math.abs(lane) * ELBOW_STEP;
+    let a = [s[0], s[1] + m + 4];       /*  out of a bottom port  */
+    let z = [t[0], t[1] - m - 4];       /*  into a top port  */
+    let region = box_expand({
+        x1: Math.min(a[0], z[0], box_s.x1, box_t.x1),
+        y1: Math.min(a[1], z[1], box_s.y1, box_t.y1),
+        x2: Math.max(a[0], z[0], box_s.x2, box_t.x2),
+        y2: Math.max(a[1], z[1], box_s.y2, box_t.y2),
+    }, ROUTE_REACH);
+    let near = others.filter((b) => box_overlaps(b, region));
+
+    let route = orth_search(a, z, near.map((b) => box_expand(b, m)));
+    if(!route && near.length < others.length) {
+        route = orth_search(a, z, others.map((b) => box_expand(b, m)));
+    }
+    return route || simple;
+}

package/src/treedb_elbow.test.js

@@ -0,0 +1,182 @@
+/***********************************************************************
+ *          treedb_elbow.test.js
+ *
+ *      The elbow edges of the treedb graph, pinned: the lane of an
+ *      edge among those joining the same two cards, the channel of a
+ *      forward edge, the detour of one that is not.
+ ***********************************************************************/
+import { describe, test, expect } from "vitest";
+import {
+    elbow_lane, elbow_points, elbow_route, elbow_path_hits, ELBOW_STEP, ELBOW_CLEAR,
+} from "./treedb_elbow.js";
+
+/*  Two cards 100x40: A on top, B one row below it.  */
+const A = {x1: 0, y1: 0, x2: 100, y2: 40};
+const B = {x1: 0, y1: 130, x2: 100, y2: 170};
+const A_HOOK = [50, 40];        /*  A's bottom edge  */
+const A_FKEY = [50, 0];         /*  A's top edge  */
+const B_HOOK = [60, 170];
+const B_FKEY = [50, 130];
+
+describe("the lane", () => {
+    test("one edge alone keeps the middle", () => {
+        expect(elbow_lane(["edge-t-7"], "edge-t-7")).toBe(0);
+    });
+
+    test("lanes follow the order the edges were made, not the string order", () => {
+        let ids = ["edge-t-10", "edge-t-9", "edge-t-11"];
+        expect(elbow_lane(ids, "edge-t-9")).toBe(0);
+        expect(elbow_lane(ids, "edge-t-10")).toBe(1);
+        expect(elbow_lane(ids, "edge-t-11")).toBe(-1);
+    });
+
+    test("a new edge does not move the ones already drawn", () => {
+        let before = ["edge-t-1", "edge-t-2"];
+        let after = before.concat(["edge-t-3"]);
+        for(let id of before) {
+            expect(elbow_lane(after, id)).toBe(elbow_lane(before, id));
+        }
+    });
+});
+
+describe("a forward edge", () => {
+    test("turns in the channel half way between the ports", () => {
+        let pts = elbow_points(A_HOOK, B_FKEY, A, B, 0, true);
+        expect(pts).toEqual([[50, 85], [50, 85]]);
+    });
+
+    test("its lane moves the channel, and keeps it between the ports", () => {
+        let pts = elbow_points(A_HOOK, B_FKEY, A, B, 1, true);
+        expect(pts[0][1]).toBe(85 + ELBOW_STEP);
+        let far = elbow_points(A_HOOK, B_FKEY, A, B, 20, true);
+        expect(far[0][1]).toBeLessThan(B_FKEY[1]);
+        expect(far[0][1]).toBeGreaterThan(A_HOOK[1]);
+    });
+});
+
+describe("an edge that does not run forward", () => {
+    test("goes round the outside of both cards", () => {
+        /*  B -> A: out of B's bottom, back up into A's top.  */
+        let pts = elbow_points(B_HOOK, A_FKEY, B, A, 0, true);
+        expect(pts.length).toBe(4);
+        let side = pts[1][0];
+        expect(side).toBeGreaterThanOrEqual(100 + ELBOW_CLEAR);
+        expect(pts[2][0]).toBe(side);
+        expect(pts[0][1]).toBeGreaterThan(B.y2);     /*  below B  */
+        expect(pts[3][1]).toBeLessThan(A.y1);        /*  above A  */
+    });
+
+    test("a reciprocal pair shares no segment", () => {
+        let forward = elbow_points(A_HOOK, B_FKEY, A, B, 0, true);
+        let back = elbow_points(B_HOOK, A_FKEY, B, A, 1, true);
+        let channel = forward[0][1];
+        expect(back.every((p) => p[1] !== channel)).toBe(true);
+        expect(back[1][0]).toBeGreaterThan(A.x2);
+    });
+
+    test("a negative lane goes round the other side", () => {
+        let right = elbow_points(B_HOOK, A_FKEY, B, A, 1, true);
+        let left = elbow_points(B_HOOK, A_FKEY, B, A, -1, true);
+        expect(right[1][0]).toBeGreaterThan(A.x2);
+        expect(left[1][0]).toBeLessThan(A.x1);
+    });
+
+    test("two cards in one row are not joined through them", () => {
+        /*  C beside A, same row: A's hook (bottom) to C's fkey (top).  */
+        let C = {x1: 200, y1: 0, x2: 300, y2: 40};
+        let pts = elbow_points(A_HOOK, [250, 0], A, C, 0, true);
+        expect(pts.length).toBe(4);
+        expect(pts[1][0]).toBeGreaterThan(C.x2);
+    });
+});
+
+describe("the route round the other cards", () => {
+    test("a line that crosses no card is left as it is", () => {
+        let others = [A, B, {x1: 400, y1: 0, x2: 500, y2: 40}];
+        expect(elbow_route(A_HOOK, B_FKEY, A, B, 0, true, others))
+            .toEqual(elbow_points(A_HOOK, B_FKEY, A, B, 0, true));
+    });
+
+    test("a detour with a third card in its way goes round that one too", () => {
+        /*  D stands right where the detour of B -> A runs, beside both.  */
+        let D = {x1: 110, y1: -20, x2: 210, y2: 200};
+        let boxes = [A, B, D];
+        let simple = elbow_points(B_HOOK, A_FKEY, B, A, 0, true);
+        expect(elbow_path_hits([B_HOOK, ...simple, A_FKEY], boxes)).toBe(true);
+        let route = elbow_route(B_HOOK, A_FKEY, B, A, 0, true, boxes);
+        expect(elbow_path_hits([B_HOOK, ...route, A_FKEY], boxes)).toBe(false);
+        expect(route).not.toEqual(simple);
+    });
+
+    test("an edge dropping several rows goes round the row in between", () => {
+        /*  P on top, M in the row between, C two rows down.  */
+        let P = {x1: 0, y1: 0, x2: 100, y2: 40};
+        let M = {x1: -40, y1: 130, x2: 140, y2: 170};
+        let C = {x1: 0, y1: 260, x2: 100, y2: 300};
+        let boxes = [P, M, C];
+        let route = elbow_route([50, 40], [50, 260], P, C, 0, true, boxes);
+        expect(elbow_path_hits([[50, 40], ...route, [50, 260]], boxes)).toBe(false);
+    });
+
+    test("when every way is closed it keeps the simple elbow", () => {
+        let wall = {x1: -1000, y1: 60, x2: 1000, y2: 100};
+        let route = elbow_route(A_HOOK, B_FKEY, A, B, 0, true, [A, B, wall]);
+        expect(route).toEqual(elbow_points(A_HOOK, B_FKEY, A, B, 0, true));
+    });
+
+    test("two routed edges of one pair keep apart", () => {
+        let D = {x1: 110, y1: -20, x2: 210, y2: 200};
+        let boxes = [A, B, D];
+        let r1 = elbow_route(B_HOOK, A_FKEY, B, A, 1, true, boxes);
+        let r2 = elbow_route(B_HOOK, A_FKEY, B, A, -1, true, boxes);
+        expect(elbow_path_hits([B_HOOK, ...r1, A_FKEY], boxes)).toBe(false);
+        expect(elbow_path_hits([B_HOOK, ...r2, A_FKEY], boxes)).toBe(false);
+        expect(r1).not.toEqual(r2);
+    });
+
+    test("read left to right, the route is the transpose", () => {
+        let sw = (p) => [p[1], p[0]];
+        let swb = (b) => ({x1: b.y1, y1: b.x1, x2: b.y2, y2: b.x2});
+        let D = {x1: 110, y1: -20, x2: 210, y2: 200};
+        let down = elbow_route(B_HOOK, A_FKEY, B, A, 0, true, [A, B, D]);
+        let right = elbow_route(sw(B_HOOK), sw(A_FKEY), swb(B), swb(A), 0, false,
+                                [A, B, D].map(swb));
+        expect(right).toEqual(down.map(sw));
+    });
+
+    test("a screen of eighty cards is routed in a few milliseconds", () => {
+        let boxes = [];
+        for(let r = 0; r < 4; r++) {
+            for(let c = 0; c < 20; c++) {
+                boxes.push({x1: c * 190, y1: r * 186, x2: c * 190 + 172, y2: r * 186 + 96});
+            }
+        }
+        /*  From a card of the bottom row back up to one of the top row,
+         *  across the whole screen.  */
+        let src = boxes[3 * 20 + 18];
+        let dst = boxes[2];
+        let s = [(src.x1 + src.x2) / 2, src.y2];
+        let t = [(dst.x1 + dst.x2) / 2, dst.y1];
+        let t0 = performance.now();
+        let route = elbow_route(s, t, src, dst, 0, true, boxes);
+        let ms = performance.now() - t0;
+        expect(elbow_path_hits([s, ...route, t], boxes)).toBe(false);
+        expect(ms).toBeLessThan(200);
+    });
+});
+
+describe("read left to right", () => {
+    test("is the same geometry with the axes swapped", () => {
+        let sw = (p) => [p[1], p[0]];
+        let swb = (b) => ({x1: b.y1, y1: b.x1, x2: b.y2, y2: b.x2});
+        for(let [s, t, bs, bt, lane] of [
+            [A_HOOK, B_FKEY, A, B, 0],
+            [A_HOOK, B_FKEY, A, B, 1],
+            [B_HOOK, A_FKEY, B, A, -1],
+        ]) {
+            let down = elbow_points(s, t, bs, bt, lane, true);
+            let right = elbow_points(sw(s), sw(t), swb(bs), swb(bt), lane, false);
+            expect(right).toEqual(down.map(sw));
+        }
+    });
+});