@yuneta/gobj-ui 7.23.151 → 7.23.153

package/README.md

@@ -1457,8 +1457,22 @@ 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
+several rows, an edge between two cards of one row. Since `7.23.152` a node is
+measured **whole** — card, ports and label — so a line keeps clear of the
+ports as well; the edge's own ports stick out of its own cards, so its first
+and last segments are not tested against their own box.
+
+The edges sharing an **end** do not lie on top of each other either
+(`7.23.153`): the forward edges leaving one card — all of them, not only one
+port's, or two hooks side by side would stack their runs — and those reaching
+one card (all its fkeys enter by one point) are **staggered**, each turning at
+its own height in the channel, 10px apart at most and closer when the channel
+is short. Leaving, the farthest turns highest; arriving, the farthest turns
+lowest: the orders in which the lines of one end nest without crossing. A
+routed line leaves its port and reaches the other one **sideways**, because
+the column straight under or over a port is where the staggered edges of that
+port run. Only the stub at the port is shared. 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.
 

package/dist/gobj-ui.cjs.js

@@ -29640,6 +29640,23 @@ function elbow_lane(ids, id) {
 	if (k <= 0) return 0;
 	return (k % 2 ? 1 : -1) * 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}.
+************************************************************/
+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), void 0, { 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]];
 }
@@ -29658,19 +29675,41 @@ 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.
 ************************************************************/
-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);
+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, stagger).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);
+		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;
+		} 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 - 12);
+			let step = Math.min(10, room / (group.count - 1));
+			mid = mid - (group.count - 1) * step / 2 + k * step;
+		}
+		mid += shift;
+		mid = Math.min(Math.max(mid, lo + 4), hi - 4);
 		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;
+	let y1 = Math.max(s[1], box_s.y2) + out;
+	let y2 = Math.min(t[1], box_t.y1) - out;
 	return [
 		[s[0], y1],
 		[side, y1],
@@ -29699,15 +29738,30 @@ function segment_hits(a, c, b) {
 	let y2 = Math.max(a[1], c[1]);
 	return x1 < b.x2 && x2 > b.x1 && y1 < b.y2 && y2 > b.y1;
 }
+function same_box(a, b) {
+	return !!a && !!b && a.x1 === b.x1 && a.y1 === b.y1 && a.x2 === b.x2 && a.y2 === b.y2;
+}
 /************************************************************
 *  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.
+*  `boxes`? A box is shrunk by a pixel, so a line along its
+*  border is not a hit.
+*
+*  A box is a whole node, its ports included, and the edge's own
+*  ports stick out of its own two cards: its first segment starts
+*  inside `box_s` and its last one ends inside `box_t`. Those two
+*  segments are not tested against their own box; every other
+*  segment is, so a line may not run back over its own cards.
 ************************************************************/
-function elbow_path_hits(points, boxes) {
+function elbow_path_hits(points, boxes, box_s, box_t) {
+	let last = points.length - 2;
 	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;
+		let own_s = same_box(b, box_s);
+		let own_t = same_box(b, box_t);
+		for (let i = 0; i <= last; i++) {
+			if (own_s && i === 0 || own_t && i === last) continue;
+			if (segment_hits(points[i], points[i + 1], inner)) return true;
+		}
 	}
 	return false;
 }
@@ -29743,8 +29797,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
@@ -29810,7 +29868,8 @@ function orth_search(a, z, boxes) {
 		let k = state >> 2;
 		let dir = state & 3;
 		if (k === goal) {
-			let total = cost + (dir === 2 ? 0 : 40);
+			if (dir >= 2) continue;
+			let total = cost + 40;
 			if (total < found_cost) {
 				found_cost = total;
 				found = state;
@@ -29818,6 +29877,7 @@ function orth_search(a, z, boxes) {
 			continue;
 		}
 		for (let [nk, nd, len] of moves(k)) {
+			if (k === start && nd >= 2) continue;
 			let c = cost + len + (nd === dir ? 0 : 40);
 			let ns = nk * 4 + nd;
 			if (c < best[ns]) {
@@ -29849,24 +29909,27 @@ function orth_search(a, z, boxes) {
 *  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
+*  `boxes` are all the nodes on screen, the two of the edge
+*  included, each as the box of the WHOLE node -- card, ports and
+*  label -- so a line clears the ports too. `box_s` and `box_t`
+*  are the edge's own two, measured the same way. The route keeps
+*  a clearance from every box, 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) {
+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);
-	let simple = elbow_points(s, t, box_s, box_t, lane, true);
+	if (!vertical) return elbow_route(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true, others.map(swap_box), stagger).map(swap);
+	let simple = elbow_points(s, t, box_s, box_t, lane, true, stagger);
 	if (!elbow_path_hits([
 		s,
 		...simple,
 		t
-	], others)) return simple;
+	], others, box_s, box_t)) 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 a = [s[0], Math.max(s[1], box_s.y2) + m + 1];
+	let z = [t[0], Math.min(t[1], box_t.y1) - m - 1];
 	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),
@@ -59259,13 +59322,15 @@ var TreedbTreeLayout = class extends _antv_g6.BaseLayout {
 *  dragged card, a fold or a layout needs nothing else. `-v` runs
 *  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).
+*  the same two cards take lanes, the edges sharing an end turn at
+*  staggered heights, 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();
+		let b = node.getRenderBounds();
+		if (!b || b.isEmpty && b.isEmpty()) b = node.getShape("key").getBounds();
 		return {
 			x1: b.min[0],
 			y1: b.min[1],
@@ -59311,10 +59376,45 @@ function elbow_lane_of(edge) {
 		return 0;
 	}
 }
+function elbow_stagger_of(edge, vertical) {
+	let graph = edge.context && edge.context.graph;
+	let element = edge.context && edge.context.element;
+	let s = edge.sourceNode && edge.sourceNode.id;
+	let t = edge.targetNode && edge.targetNode.id;
+	if (!graph || !element || s === void 0 || t === void 0) return null;
+	let across = vertical ? 0 : 1;
+	let along = vertical ? 1 : 0;
+	let pos = (id) => graph.getElementPosition(id);
+	let port_of = (node_id, key) => {
+		let node = element.getElement(node_id);
+		let ports = node && typeof node.getPorts === "function" ? node.getPorts() : {};
+		let port = key ? ports[key] : null;
+		return port ? port.getPosition() : pos(node_id);
+	};
+	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) => ({
+			id: d.id,
+			span: Math.abs(pos(d.target)[across] - 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) => ({
+			id: d.id,
+			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)
+		};
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`elbow edge ${edge.id}: cannot read the edges sharing its ends: ${e}`);
+		return null;
+	}
+}
 var TreedbElbowV = class extends _antv_g6.Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), true, elbow_obstacles(this));
+		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), true, elbow_obstacles(this), elbow_stagger_of(this, true));
 	}
 	getKeyPath(attributes) {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));
@@ -59323,7 +59423,7 @@ var TreedbElbowV = class extends _antv_g6.Polyline {
 var TreedbElbowH = class extends _antv_g6.Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), false, elbow_obstacles(this));
+		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), false, elbow_obstacles(this), elbow_stagger_of(this, false));
 	}
 	getKeyPath(attributes) {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));

package/dist/gobj-ui.es.js

@@ -29635,6 +29635,23 @@ function elbow_lane(ids, id) {
 	if (k <= 0) return 0;
 	return (k % 2 ? 1 : -1) * 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}.
+************************************************************/
+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), void 0, { 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]];
 }
@@ -29653,19 +29670,41 @@ 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.
 ************************************************************/
-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);
+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, stagger).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);
+		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;
+		} 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 - 12);
+			let step = Math.min(10, room / (group.count - 1));
+			mid = mid - (group.count - 1) * step / 2 + k * step;
+		}
+		mid += shift;
+		mid = Math.min(Math.max(mid, lo + 4), hi - 4);
 		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;
+	let y1 = Math.max(s[1], box_s.y2) + out;
+	let y2 = Math.min(t[1], box_t.y1) - out;
 	return [
 		[s[0], y1],
 		[side, y1],
@@ -29694,15 +29733,30 @@ function segment_hits(a, c, b) {
 	let y2 = Math.max(a[1], c[1]);
 	return x1 < b.x2 && x2 > b.x1 && y1 < b.y2 && y2 > b.y1;
 }
+function same_box(a, b) {
+	return !!a && !!b && a.x1 === b.x1 && a.y1 === b.y1 && a.x2 === b.x2 && a.y2 === b.y2;
+}
 /************************************************************
 *  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.
+*  `boxes`? A box is shrunk by a pixel, so a line along its
+*  border is not a hit.
+*
+*  A box is a whole node, its ports included, and the edge's own
+*  ports stick out of its own two cards: its first segment starts
+*  inside `box_s` and its last one ends inside `box_t`. Those two
+*  segments are not tested against their own box; every other
+*  segment is, so a line may not run back over its own cards.
 ************************************************************/
-function elbow_path_hits(points, boxes) {
+function elbow_path_hits(points, boxes, box_s, box_t) {
+	let last = points.length - 2;
 	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;
+		let own_s = same_box(b, box_s);
+		let own_t = same_box(b, box_t);
+		for (let i = 0; i <= last; i++) {
+			if (own_s && i === 0 || own_t && i === last) continue;
+			if (segment_hits(points[i], points[i + 1], inner)) return true;
+		}
 	}
 	return false;
 }
@@ -29738,8 +29792,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
@@ -29805,7 +29863,8 @@ function orth_search(a, z, boxes) {
 		let k = state >> 2;
 		let dir = state & 3;
 		if (k === goal) {
-			let total = cost + (dir === 2 ? 0 : 40);
+			if (dir >= 2) continue;
+			let total = cost + 40;
 			if (total < found_cost) {
 				found_cost = total;
 				found = state;
@@ -29813,6 +29872,7 @@ function orth_search(a, z, boxes) {
 			continue;
 		}
 		for (let [nk, nd, len] of moves(k)) {
+			if (k === start && nd >= 2) continue;
 			let c = cost + len + (nd === dir ? 0 : 40);
 			let ns = nk * 4 + nd;
 			if (c < best[ns]) {
@@ -29844,24 +29904,27 @@ function orth_search(a, z, boxes) {
 *  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
+*  `boxes` are all the nodes on screen, the two of the edge
+*  included, each as the box of the WHOLE node -- card, ports and
+*  label -- so a line clears the ports too. `box_s` and `box_t`
+*  are the edge's own two, measured the same way. The route keeps
+*  a clearance from every box, 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) {
+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);
-	let simple = elbow_points(s, t, box_s, box_t, lane, true);
+	if (!vertical) return elbow_route(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true, others.map(swap_box), stagger).map(swap);
+	let simple = elbow_points(s, t, box_s, box_t, lane, true, stagger);
 	if (!elbow_path_hits([
 		s,
 		...simple,
 		t
-	], others)) return simple;
+	], others, box_s, box_t)) 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 a = [s[0], Math.max(s[1], box_s.y2) + m + 1];
+	let z = [t[0], Math.min(t[1], box_t.y1) - m - 1];
 	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),
@@ -59254,13 +59317,15 @@ var TreedbTreeLayout = class extends BaseLayout {
 *  dragged card, a fold or a layout needs nothing else. `-v` runs
 *  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).
+*  the same two cards take lanes, the edges sharing an end turn at
+*  staggered heights, 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();
+		let b = node.getRenderBounds();
+		if (!b || b.isEmpty && b.isEmpty()) b = node.getShape("key").getBounds();
 		return {
 			x1: b.min[0],
 			y1: b.min[1],
@@ -59306,10 +59371,45 @@ function elbow_lane_of(edge) {
 		return 0;
 	}
 }
+function elbow_stagger_of(edge, vertical) {
+	let graph = edge.context && edge.context.graph;
+	let element = edge.context && edge.context.element;
+	let s = edge.sourceNode && edge.sourceNode.id;
+	let t = edge.targetNode && edge.targetNode.id;
+	if (!graph || !element || s === void 0 || t === void 0) return null;
+	let across = vertical ? 0 : 1;
+	let along = vertical ? 1 : 0;
+	let pos = (id) => graph.getElementPosition(id);
+	let port_of = (node_id, key) => {
+		let node = element.getElement(node_id);
+		let ports = node && typeof node.getPorts === "function" ? node.getPorts() : {};
+		let port = key ? ports[key] : null;
+		return port ? port.getPosition() : pos(node_id);
+	};
+	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) => ({
+			id: d.id,
+			span: Math.abs(pos(d.target)[across] - 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) => ({
+			id: d.id,
+			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)
+		};
+	} catch (e) {
+		log_error(`elbow edge ${edge.id}: cannot read the edges sharing its ends: ${e}`);
+		return null;
+	}
+}
 var TreedbElbowV = class extends Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), true, elbow_obstacles(this));
+		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), true, elbow_obstacles(this), elbow_stagger_of(this, true));
 	}
 	getKeyPath(attributes) {
 		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));
@@ -59318,7 +59418,7 @@ var TreedbElbowV = class extends Polyline {
 var TreedbElbowH = class extends Polyline {
 	getControlPoints(attributes) {
 		let [s, t] = this.getEndpoints(attributes, false);
-		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), false, elbow_obstacles(this));
+		return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), false, elbow_obstacles(this), elbow_stagger_of(this, false));
 	}
 	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.151",
+  "version": "7.23.153",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_g6_nodes_tree.js

@@ -133,7 +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 {elbow_lane, elbow_rank, elbow_route} from "./treedb_elbow.js";
 
 import {
     BaseLayout,
@@ -4224,16 +4224,23 @@ class TreedbTreeLayout extends BaseLayout
  *  dragged card, a fold or a layout needs nothing else. `-v` runs
  *  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).
+ *  the same two cards take lanes, the edges sharing an end turn at
+ *  staggered heights, 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.  */
+/*  The box of a WHOLE node on the canvas -- the card, its ports and
+ *  its label -- for an elbow to keep clear of. The ports are the
+ *  reason it is not the key shape's box: they stick out of the
+ *  card, and a line over a port reads as a link to it.  */
 function elbow_box(node)
 {
     try {
-        let b = node.getShape('key').getBounds();
+        let b = node.getRenderBounds();
+        if(!b || b.isEmpty && b.isEmpty()) {
+            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}`);
@@ -4291,12 +4298,60 @@ function elbow_lane_of(edge)
     }
 }
 
+/*  Where `edge` stands among the forward edges sharing one of its
+ *  ends, for the stagger (treedb_elbow.js): the ones leaving its
+ *  source card, and the ones reaching its target card. How far each
+ *  runs ACROSS is measured from the real port it leaves by -- the
+ *  hooks of one card sit at different places along its edge.  */
+function elbow_stagger_of(edge, vertical)
+{
+    let graph = edge.context && edge.context.graph;
+    let element = edge.context && edge.context.element;
+    let s = edge.sourceNode && edge.sourceNode.id;
+    let t = edge.targetNode && edge.targetNode.id;
+    if(!graph || !element || s === undefined || t === undefined) {
+        return null;
+    }
+    let across = vertical? 0 : 1;
+    let along = vertical? 1 : 0;
+    let pos = (id) => graph.getElementPosition(id);
+    let port_of = (node_id, key) => {
+        let node = element.getElement(node_id);
+        let ports = (node && typeof node.getPorts === 'function')? node.getPorts() : {};
+        let port = key? ports[key] : null;
+        return port? port.getPosition() : pos(node_id);
+    };
+    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) => ({
+                id: d.id,
+                span: Math.abs(pos(d.target)[across] -
+                               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) => ({
+                id: d.id,
+                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)};
+    } catch(e) {
+        log_error(`elbow edge ${edge.id}: cannot read the edges sharing its ends: ${e}`);
+        return null;
+    }
+}
+
 class TreedbElbowV extends Polyline
 {
     getControlPoints(attributes) {
         let [s, t] = this.getEndpoints(attributes, false);
         return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode),
-                           elbow_lane_of(this), true, elbow_obstacles(this));
+                           elbow_lane_of(this), true, elbow_obstacles(this),
+                           elbow_stagger_of(this, true));
     }
 
     getKeyPath(attributes) {
@@ -4310,7 +4365,8 @@ class TreedbElbowH extends Polyline
     getControlPoints(attributes) {
         let [s, t] = this.getEndpoints(attributes, false);
         return elbow_route(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode),
-                           elbow_lane_of(this), false, elbow_obstacles(this));
+                           elbow_lane_of(this), false, elbow_obstacles(this),
+                           elbow_stagger_of(this, false));
     }
 
     getKeyPath(attributes) {

package/src/treedb_elbow.js

@@ -25,6 +25,15 @@
  *        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.
+ *
  *      Written for the top-down reading; left to right is the same
  *      geometry with the axes swapped.
  *
@@ -35,6 +44,7 @@
 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 +64,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]];
@@ -71,21 +99,44 @@ 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.
  ************************************************************/
-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.  */
     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 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;
+        }
+        mid += shift;
+        mid = Math.min(Math.max(mid, lo + 4), hi - 4);
         return [[s[0], mid], [t[0], mid]];
     }
 
@@ -96,8 +147,10 @@ export function elbow_points(s, t, box_s, box_t, lane, vertical)
     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  */
+    /*  From the border of the whole box, which holds the ports: a
+     *  port sticks out of its card, and the run has to clear it.  */
+    let y1 = Math.max(s[1], box_s.y2) + out;     /*  a hook port is on the bottom edge  */
+    let y2 = Math.min(t[1], box_t.y1) - out;     /*  an fkey port is on the top edge  */
     return [[s[0], y1], [side, y1], [side, y2], [t[0], y2]];
 }
 
@@ -133,16 +186,33 @@ function segment_hits(a, c, b)
     return x1 < b.x2 && x2 > b.x1 && y1 < b.y2 && y2 > b.y1;
 }
 
+function same_box(a, b)
+{
+    return !!a && !!b && a.x1 === b.x1 && a.y1 === b.y1 && a.x2 === b.x2 && a.y2 === b.y2;
+}
+
 /************************************************************
  *  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.
+ *  `boxes`? A box is shrunk by a pixel, so a line along its
+ *  border is not a hit.
+ *
+ *  A box is a whole node, its ports included, and the edge's own
+ *  ports stick out of its own two cards: its first segment starts
+ *  inside `box_s` and its last one ends inside `box_t`. Those two
+ *  segments are not tested against their own box; every other
+ *  segment is, so a line may not run back over its own cards.
  ************************************************************/
-export function elbow_path_hits(points, boxes)
+export function elbow_path_hits(points, boxes, box_s, box_t)
 {
+    let last = points.length - 2;
     for(let b of boxes) {
         let inner = box_expand(b, -1);
-        for(let i = 0; i + 1 < points.length; i++) {
+        let own_s = same_box(b, box_s);
+        let own_t = same_box(b, box_t);
+        for(let i = 0; i <= last; i++) {
+            if((own_s && i === 0) || (own_t && i === last)) {
+                continue;
+            }
             if(segment_hits(points[i], points[i + 1], inner)) {
                 return true;
             }
@@ -196,8 +266,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
@@ -283,7 +357,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;
@@ -291,6 +368,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]) {
@@ -332,28 +412,32 @@ function orth_search(a, z, boxes)
  *  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
+ *  `boxes` are all the nodes on screen, the two of the edge
+ *  included, each as the box of the WHOLE node -- card, ports and
+ *  label -- so a line clears the ports too. `box_s` and `box_t`
+ *  are the edge's own two, measured the same way. The route keeps
+ *  a clearance from every box, 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)
+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);
     }
 
-    let simple = elbow_points(s, t, box_s, box_t, lane, true);
-    if(!elbow_path_hits([s, ...simple, t], others)) {
+    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;
     }
 
     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  */
+    /*  Just outside the grown box of each end, which holds its ports.  */
+    let a = [s[0], Math.max(s[1], box_s.y2) + m + 1];     /*  out of a bottom port  */
+    let z = [t[0], Math.min(t[1], box_t.y1) - m - 1];     /*  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),

package/src/treedb_elbow.test.js

@@ -7,7 +7,7 @@
  ***********************************************************************/
 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_STEP, ELBOW_CLEAR,
 } from "./treedb_elbow.js";
 
 /*  Two cards 100x40: A on top, B one row below it.  */
@@ -165,6 +165,149 @@ 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 ports are obstacles too", () => {
+    /*  Whole-node boxes: a port of 14px sticks 7px out of the bottom
+     *  and the top of each card.  */
+    const AP = {x1: 0, y1: -7, x2: 100, y2: 47};
+    const BP = {x1: 350, y1: 123, x2: 450, y2: 177};
+    const S = [50, 40];
+    const T2 = [400, 130];
+
+    test("an edge's own ports do not make its line a hit", () => {
+        let simple = elbow_points(S, T2, AP, BP, 0, true);
+        expect(elbow_path_hits([S, ...simple, T2], [AP, BP], AP, BP)).toBe(false);
+        expect(elbow_route(S, T2, AP, BP, 0, true, [AP, BP])).toEqual(simple);
+    });
+
+    test("a port of a third card in the channel is gone round", () => {
+        /*  F's card ends at y 80, above the channel (85); its port
+         *  reaches down to 95, into it.  */
+        const F_CARD = {x1: 200, y1: 0, x2: 300, y2: 80};
+        const F = {x1: 200, y1: -7, x2: 300, y2: 95};
+        let simple = elbow_points(S, T2, AP, BP, 0, true);
+        expect(elbow_path_hits([S, ...simple, T2], [AP, BP, F_CARD], AP, BP)).toBe(false);
+        expect(elbow_path_hits([S, ...simple, T2], [AP, BP, F], AP, BP)).toBe(true);
+        let route = elbow_route(S, T2, AP, BP, 0, true, [AP, BP, F]);
+        expect(elbow_path_hits([S, ...route, T2], [AP, BP, F], AP, BP)).toBe(false);
+    });
+
+    test("a detour clears the ports of its own two cards", () => {
+        /*  B below A, both with their ports: B -> A goes round.  */
+        const AB = {x1: 0, y1: -7, x2: 100, y2: 47};
+        const BB = {x1: 0, y1: 123, x2: 100, y2: 177};
+        let pts = elbow_points([60, 170], [50, 0], BB, AB, 0, true);
+        expect(pts[0][1]).toBeGreaterThan(BB.y2);
+        expect(pts[3][1]).toBeLessThan(AB.y1);
+        expect(elbow_path_hits([[60, 170], ...pts, [50, 0]], [AB, BB], BB, AB)).toBe(false);
+    });
+});
+
 describe("read left to right", () => {
     test("is the same geometry with the axes swapped", () => {
         let sw = (p) => [p[1], p[0]];