@yuneta/gobj-ui 7.23.152 → 7.23.154

package/README.md

@@ -1413,7 +1413,13 @@ layouts by three thin adapters in `c_g6_nodes_tree.js`:
   shaped like a real one; a uniform tree is the same width. The contour
   arithmetic is Moen's (1990) as mxGraph wrote it in `mxCompactTreeLayout`
   (JGraph Ltd, Apache-2.0), read in maxGraph — a port, not a dependency,
-  because maxGraph's layouts drive its own graph model.
+  because maxGraph's layouts drive its own graph model. Since `7.23.154` a run
+  of three or more **leaf** children is **stacked**: two columns under the
+  parent with a corridor between them, row after row — the contour alone
+  gained nothing on a whole level opened with the stepper, where every parent
+  still needed the row of its children beside it. Against `tree`: regions
+  only 10% of the width, one region open with a 24-device hall 21%, a whole
+  level open 41%. The tree grows taller instead; read it with elbow edges.
 - **`radial`** (`treedb-radial`) — the root in the middle, a ring per depth,
   every subtree an angular **sector** proportional to its leaves, and the
   radius of each ring the largest of three: one `ranksep` out from the ring
@@ -1460,8 +1466,23 @@ 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. 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. G6's `shortest-path`
-router is not used: it is not exported, it
+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. Into a lower row of a stack of
+the compact tree an edge runs a **comb** (`7.23.154`): along the channel to a
+lane of its own in the stack's corridor, down it, and into the gap above its
+card; lanes go outermost first by row, so none crosses another, and a comb is
+drawn as laid out, never routed. 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

@@ -29331,6 +29331,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
@@ -29411,10 +29419,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 = [];
@@ -29427,18 +29506,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);
@@ -29474,7 +29567,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;
@@ -29501,9 +29594,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
@@ -29640,6 +29738,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]];
 }
@@ -29651,6 +29766,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
@@ -29658,13 +29903,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);
@@ -29758,8 +30023,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
@@ -29825,7 +30094,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;
@@ -29833,6 +30103,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]) {
@@ -29873,10 +30144,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,
@@ -59277,8 +59549,9 @@ 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) {
@@ -59330,10 +59603,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) {
+		(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 }));
@@ -59342,7 +59660,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 }));