@yuneta/gobj-ui 7.23.152 → 7.23.154

package/dist/gobj-ui.es.js

@@ -29326,6 +29326,14 @@ function tidy_tree_lr(nodes, edges, o) {
 *  the packing across the depths differs, so switching between the
 *  two moves cards sideways and never reorders them.
 *
+*  And a run of three or more LEAF children -- a hall's devices, a
+*  region's places when none is open -- is STACKED: two columns
+*  under the parent with a corridor between them, row after row.
+*  That is what makes it compact when a whole level is open, where
+*  the contour alone gains nothing: every parent needed the whole
+*  row of its children beside it. The tree grows taller instead of
+*  wider. Its elbow edges run down the corridor (elbow_combs).
+*
 *  The contour arithmetic is Moen's ("Drawing dynamic trees", IEEE
 *  Software, 1990) in the form mxGraph gave it in mxCompactTreeLayout
 *  -- Copyright (c) 2006-2015 JGraph Ltd, Apache License 2.0 -- read in
@@ -29406,10 +29414,81 @@ function contour_merge(p1, p2) {
 	p1.lower_head = p2.lower_head;
 	return total;
 }
+function stack_trunk_width(k) {
+	let lanes = Math.max(0, k - 2);
+	return Math.max(36, 20 + Math.max(0, lanes - 1) * 6);
+}
+function stack_geometry(t, st, col_x, col_w) {
+	let d = st.depth;
+	let k = st.ids.length;
+	let rows = Math.ceil(k / 2);
+	let side = [0, 0];
+	let row_len = [];
+	for (let i = 0; i < k; i++) {
+		let n = t.by_id.get(st.ids[i]);
+		let r = Math.floor(i / 2);
+		side[i % 2] = Math.max(side[i % 2], n.h);
+		row_len[r] = Math.max(row_len[r] || 0, n.w);
+	}
+	row_len[0] = col_w[d];
+	let trunk = stack_trunk_width(k);
+	let starts = [col_x[d]];
+	for (let r = 1; r < rows; r++) starts[r] = starts[r - 1] + row_len[r - 1] + 40;
+	return {
+		side,
+		trunk,
+		starts,
+		row_len,
+		len: starts[rows - 1] + row_len[rows - 1] - col_x[d],
+		ext: side[0] + trunk + side[1]
+	};
+}
+function place_stack(t, st, g, top, pos) {
+	for (let i = 0; i < st.ids.length; i++) {
+		let n = t.by_id.get(st.ids[i]);
+		let r = Math.floor(i / 2);
+		let across = i % 2 === 0 ? top + g.side[0] - n.h / 2 : top + g.side[0] + g.trunk + n.h / 2;
+		pos.set(st.ids[i], {
+			x: g.starts[r] + g.row_len[r] / 2,
+			y: across
+		});
+	}
+}
 function compact_tree_lr(nodes, edges, o) {
 	let t = spanning_tree(nodes, edges);
-	let order = walk_order(t);
 	let pos = /* @__PURE__ */ new Map();
+	let kids_of = /* @__PURE__ */ new Map();
+	let stacks = /* @__PURE__ */ new Map();
+	for (let [id, kids] of t.children) {
+		let out = [];
+		let run = [];
+		let flush = () => {
+			if (run.length >= 3) {
+				let key = { stack: stacks.size };
+				stacks.set(key, {
+					ids: run,
+					depth: t.depth.get(run[0])
+				});
+				out.push(key);
+			} else out.push(...run);
+			run = [];
+		};
+		for (let kid of kids) if ((t.children.get(kid) || []).length === 0) run.push(kid);
+		else {
+			flush();
+			out.push(kid);
+		}
+		flush();
+		kids_of.set(id, out);
+	}
+	let order = [];
+	let todo = t.roots.slice().reverse();
+	while (todo.length) {
+		let id = todo.pop();
+		order.push(id);
+		let kids = kids_of.get(id) || [];
+		for (let i = kids.length - 1; i >= 0; i--) todo.push(kids[i]);
+	}
 	let col_w = [];
 	for (let [id, d] of t.depth) col_w[d] = Math.max(col_w[d] || 0, t.by_id.get(id).w);
 	let col_x = [];
@@ -29422,18 +29501,32 @@ function compact_tree_lr(nodes, edges, o) {
 	let dist = o.nodesep;
 	let level_distance = o.ranksep - pad;
 	let tn = /* @__PURE__ */ new Map();
-	for (let id of order) tn.set(id, {
-		len: col_w[t.depth.get(id)],
-		ext: t.by_id.get(id).h,
-		off_x: 0,
-		off_y: 0,
-		y: 0,
-		contour: null
-	});
+	for (let id of order) {
+		let st = stacks.get(id);
+		if (st) {
+			let g = stack_geometry(t, st, col_x, col_w);
+			tn.set(id, {
+				len: g.len,
+				ext: g.ext,
+				geom: g,
+				off_x: 0,
+				off_y: 0,
+				y: 0,
+				contour: null
+			});
+		} else tn.set(id, {
+			len: col_w[t.depth.get(id)],
+			ext: t.by_id.get(id).h,
+			off_x: 0,
+			off_y: 0,
+			y: 0,
+			contour: null
+		});
+	}
 	for (let i = order.length - 1; i >= 0; i--) {
 		let id = order[i];
 		let n = tn.get(id);
-		let kids = t.children.get(id) || [];
+		let kids = kids_of.get(id) || [];
 		if (!kids.length) {
 			let upper = contour_line(n.len + dist, 0);
 			let lower_tail = contour_line(0, -n.ext - dist);
@@ -29469,7 +29562,7 @@ function compact_tree_lr(nodes, edges, o) {
 	for (let id of order) {
 		let n = tn.get(id);
 		if (!root_of.has(id)) root_of.set(id, id);
-		let kids = t.children.get(id) || [];
+		let kids = kids_of.get(id) || [];
 		if (!kids.length) continue;
 		let running = n.y + tn.get(kids[0]).off_y;
 		tn.get(kids[0]).y = running;
@@ -29496,9 +29589,14 @@ function compact_tree_lr(nodes, edges, o) {
 		top += hi.get(r) - lo.get(r) + o.nodesep * 2;
 	}
 	for (let id of order) {
-		let d = t.depth.get(id);
 		let n = tn.get(id);
 		let y = n.y + shift.get(root_of.get(id));
+		let st = stacks.get(id);
+		if (st) {
+			place_stack(t, st, n.geom, y, pos);
+			continue;
+		}
+		let d = t.depth.get(id);
 		pos.set(id, {
 			x: col_x[d] + col_w[d] / 2,
 			y: y + n.ext / 2
@@ -29635,6 +29733,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]];
 }
@@ -29646,6 +29761,136 @@ function swap_box(b) {
 		y2: b.x2
 	};
 }
+function staggered_turn(lo, hi, st) {
+	let mid = (lo + hi) / 2;
+	let group = null;
+	let k = 0;
+	if (st.dep && st.dep.count > 1) {
+		group = st.dep;
+		k = st.dep.rank;
+	} else if (st.arr && st.arr.count > 1) {
+		group = st.arr;
+		k = st.arr.count - 1 - st.arr.rank;
+	}
+	if (group) {
+		let room = Math.max(0, hi - lo - 12);
+		let step = Math.min(10, room / (group.count - 1));
+		mid = mid - (group.count - 1) * step / 2 + k * step;
+	}
+	return mid;
+}
+/************************************************************
+*  The combs of the stacks under one card.
+*
+*  treedb_layout.js lays a run of leaf children out as two columns
+*  with a corridor between them. A card in the first row is reached
+*  from the channel like any other; one in a lower row cannot be --
+*  the card above it stands in the way -- so its edge runs down
+*  the corridor in a LANE of its own and turns into the gap above
+*  its card, which it shares only with the other card of its row,
+*  reached from the other side.
+*
+*      targets     [{id, box}]: the forward edges leaving one card,
+*                  each with the box of the card it reaches
+*      vertical    as in elbow_points; false swaps the boxes
+*
+*  Returns Map id -> {lane, z, top}: the lane, the height of the
+*  gap it turns into, and the top of the stack's first row (where
+*  the channel over the stack ends). Only for a card that stands
+*  under another of the group, within a stack gap and lined up
+*  with it on the corridor side -- what a stack looks like.
+*
+*  Lanes go outermost first, row by row: a line into a higher row
+*  keeps outside the lines going deeper, and none crosses another.
+************************************************************/
+function elbow_combs(targets, vertical) {
+	let list = vertical ? targets : targets.map((it) => ({
+		id: it.id,
+		box: swap_box(it.box)
+	}));
+	let cy = (b) => (b.y1 + b.y2) / 2;
+	let near = (a, b) => Math.abs(a - b) < 1.5;
+	let under = [];
+	for (let it of list) {
+		let b = it.box;
+		let above = null;
+		for (let o of list) {
+			let a = o.box;
+			if (o === it || a.y2 > b.y1 || b.y1 - a.y2 > 40) continue;
+			if (!(near(a.x2, b.x2) || near(a.x1, b.x1))) continue;
+			if (!above || a.y2 > above.y2) above = a;
+		}
+		if (!above) continue;
+		let side;
+		if (near(above.x2, b.x2) && !near(above.x1, b.x1)) side = 0;
+		else if (near(above.x1, b.x1) && !near(above.x2, b.x2)) side = 1;
+		else side = list.some((o) => o !== it && near(cy(o.box), cy(b)) && o.box.x2 <= b.x1) ? 1 : 0;
+		under.push({
+			id: it.id,
+			box: b,
+			above,
+			side
+		});
+	}
+	let corridor = (u) => {
+		if (u.side === 0) {
+			let l = u.box.x2;
+			let col = list.filter((o) => near(o.box.x2, l));
+			let r = Infinity;
+			for (let c of col) for (let o of list) if (o !== c && near(cy(o.box), cy(c.box)) && o.box.x1 >= l - .5) r = Math.min(r, o.box.x1);
+			return {
+				l,
+				r: isFinite(r) ? r : l + 36,
+				col
+			};
+		}
+		let r = u.box.x1;
+		let col = list.filter((o) => near(o.box.x1, r));
+		let l = -Infinity;
+		for (let c of col) for (let o of list) if (o !== c && near(cy(o.box), cy(c.box)) && o.box.x2 <= r + .5) l = Math.max(l, o.box.x2);
+		return {
+			l: isFinite(l) ? l : r - 36,
+			r,
+			col
+		};
+	};
+	let groups = /* @__PURE__ */ new Map();
+	for (let u of under) {
+		let c = corridor(u);
+		u.top = Math.min(...c.col.map((o) => o.box.y1));
+		let key = `${Math.round(c.l)}|${Math.round(c.r)}`;
+		if (!groups.has(key)) groups.set(key, {
+			l: c.l,
+			r: c.r,
+			left: [],
+			right: []
+		});
+		groups.get(key)[u.side === 0 ? "left" : "right"].push(u);
+	}
+	let out = /* @__PURE__ */ new Map();
+	for (let g of groups.values()) {
+		g.left.sort((a, b) => a.box.y1 - b.box.y1);
+		g.right.sort((a, b) => a.box.y1 - b.box.y1);
+		let n = g.left.length + g.right.length;
+		let room = g.r - g.l - 20;
+		let step = n > 1 ? Math.max(0, Math.min(6, room / (n - 1))) : 0;
+		g.left.forEach((u, i) => {
+			out.set(u.id, {
+				lane: g.l + 10 + i * step,
+				z: (u.above.y2 + u.box.y1) / 2,
+				top: u.top
+			});
+		});
+		g.right.forEach((u, j) => {
+			out.set(u.id, {
+				lane: g.r - 10 - j * step,
+				z: (u.above.y2 + u.box.y1) / 2,
+				top: u.top
+			});
+		});
+	}
+	return out;
+}
 /************************************************************
 *  The control points of an elbow from the port `s` to the port
 *  `t` ([x, y] each), knowing the boxes of the two cards
@@ -29653,13 +29898,33 @@ function swap_box(b) {
 *
 *      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);
+*      stagger     {dep, arr, comb}: the edge's rank among the
+*                  forward edges leaving its source card and among
+*                  those reaching its target card (elbow_rank), and
+*                  its comb when the target is in a lower row of a
+*                  stack (elbow_combs). Absent, the channel is the
+*                  middle.
+************************************************************/
+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 st = stagger || {};
+		let lo = Math.max(s[1], box_s.y2);
+		if (st.comb) {
+			let c = st.comb;
+			let turn = staggered_turn(lo, c.top, { dep: st.dep }) + shift;
+			turn = Math.min(Math.max(turn, lo + 4), c.top - 4);
+			return [
+				[s[0], turn],
+				[c.lane, turn],
+				[c.lane, c.z],
+				[t[0], c.z]
+			];
+		}
+		let hi = Math.min(t[1], box_t.y1);
+		let mid = staggered_turn(lo, hi, st) + shift;
+		mid = Math.min(Math.max(mid, lo + 4), hi - 4);
 		return [[s[0], mid], [t[0], mid]];
 	}
 	let out = 16 + Math.abs(shift);
@@ -29753,8 +30018,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
@@ -29820,7 +30089,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;
@@ -29828,6 +30098,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]) {
@@ -29868,10 +30139,11 @@ function orth_search(a, z, boxes) {
 *  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);
+	if (stagger && stagger.comb) return elbow_points(s, t, box_s, box_t, lane, true, stagger);
+	let simple = elbow_points(s, t, box_s, box_t, lane, true, stagger);
 	if (!elbow_path_hits([
 		s,
 		...simple,
@@ -59272,8 +59544,9 @@ 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) {
@@ -59325,10 +59598,55 @@ 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 leaving = graph.getRelatedEdgesData(s, "out").filter((d) => d.source === s && pos(d.target)[along] > ps[along]);
+		let combs = elbow_combs(leaving.map((d) => ({
+			id: d.id,
+			box: elbow_box(element.getElement(d.target))
+		})), vertical);
+		let dep = leaving.map((d) => {
+			let comb = combs.get(d.id);
+			let far = comb ? comb.lane : pos(d.target)[across];
+			return {
+				id: d.id,
+				span: Math.abs(far - port_of(s, d.style && d.style.sourcePort)[across])
+			};
+		});
+		let arr = graph.getRelatedEdgesData(t, "in").filter((d) => d.target === t && pos(d.source)[along] < pt[along]).map((d) => ({
+			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),
+			comb: combs.get(edge.id) || null
+		};
+	} 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 }));
@@ -59337,7 +59655,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.152",
+  "version": "7.23.154",
   "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, elbow_combs} from "./treedb_elbow.js";
 
 import {
     BaseLayout,
@@ -4224,8 +4224,9 @@ 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;
 
@@ -4297,12 +4298,73 @@ 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 leaving = graph.getRelatedEdgesData(s, 'out')
+            .filter((d) => d.source === s && pos(d.target)[along] > ps[along]);
+        /*  The cards they reach, for the combs of a stack; a comb's
+         *  run ends at its lane, so that is what its span measures.  */
+        let combs = elbow_combs(leaving.map((d) => ({
+            id: d.id,
+            box: elbow_box(element.getElement(d.target)),
+        })), vertical);
+        let dep = leaving.map((d) => {
+            let comb = combs.get(d.id);
+            let far = comb? comb.lane : pos(d.target)[across];
+            return {
+                id: d.id,
+                span: Math.abs(far - port_of(s, d.style && d.style.sourcePort)[across]),
+            };
+        });
+        let arr = graph.getRelatedEdgesData(t, 'in')
+            .filter((d) => d.target === t && pos(d.source)[along] < pt[along])
+            .map((d) => ({
+                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),
+            comb: combs.get(edge.id) || null,
+        };
+    } 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) {
@@ -4316,7 +4378,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) {