@yuneta/gobj-ui 7.23.153 → 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
@@ -29663,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
@@ -29670,34 +29898,32 @@ function swap_box(b) {
 *
 *      vertical    the rows are stacked (top to bottom); false
 *                  when they are side by side (left to right)
-*      stagger     {dep, arr}: the edge's rank among the forward
-*                  edges leaving its source card and among those
-*                  reaching its target card (elbow_rank). Absent,
-*                  the channel is the middle.
+*      stagger     {dep, arr, comb}: the edge's rank among the
+*                  forward edges leaving its source card and among
+*                  those reaching its target card (elbow_rank), and
+*                  its comb when the target is in a lower row of a
+*                  stack (elbow_combs). Absent, the channel is the
+*                  middle.
 ************************************************************/
 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 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 = (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;
+		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]];
 	}
@@ -29916,6 +30142,7 @@ function orth_search(a, z, 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), 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,
@@ -59389,17 +59616,27 @@ function elbow_stagger_of(edge, vertical) {
 	try {
 		let ps = pos(s);
 		let pt = pos(t);
-		let dep = graph.getRelatedEdgesData(s, "out").filter((d) => d.source === s && pos(d.target)[along] > ps[along]).map((d) => ({
+		let leaving = graph.getRelatedEdgesData(s, "out").filter((d) => d.source === s && pos(d.target)[along] > ps[along]);
+		let combs = elbow_combs(leaving.map((d) => ({
 			id: d.id,
-			span: Math.abs(pos(d.target)[across] - port_of(s, d.style && d.style.sourcePort)[across])
-		}));
+			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)
+			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}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.153",
+  "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_rank, elbow_route} from "./treedb_elbow.js";
+import {elbow_lane, elbow_rank, elbow_route, elbow_combs} from "./treedb_elbow.js";
 
 import {
     BaseLayout,
@@ -4324,13 +4324,22 @@ function elbow_stagger_of(edge, vertical)
     try {
         let ps = pos(s);
         let pt = pos(t);
-        let dep = graph.getRelatedEdgesData(s, 'out')
-            .filter((d) => d.source === s && pos(d.target)[along] > ps[along])
-            .map((d) => ({
+        let leaving = graph.getRelatedEdgesData(s, 'out')
+            .filter((d) => d.source === s && pos(d.target)[along] > ps[along]);
+        /*  The cards they reach, for the combs of a stack; a comb's
+         *  run ends at its lane, so that is what its span measures.  */
+        let combs = elbow_combs(leaving.map((d) => ({
+            id: d.id,
+            box: elbow_box(element.getElement(d.target)),
+        })), vertical);
+        let dep = leaving.map((d) => {
+            let comb = combs.get(d.id);
+            let far = comb? comb.lane : pos(d.target)[across];
+            return {
                 id: d.id,
-                span: Math.abs(pos(d.target)[across] -
-                               port_of(s, d.style && d.style.sourcePort)[across]),
-            }));
+                span: Math.abs(far - port_of(s, d.style && d.style.sourcePort)[across]),
+            };
+        });
         let arr = graph.getRelatedEdgesData(t, 'in')
             .filter((d) => d.target === t && pos(d.source)[along] < pt[along])
             .map((d) => ({
@@ -4338,7 +4347,11 @@ function elbow_stagger_of(edge, vertical)
                 span: Math.abs(port_of(d.source, d.style && d.style.sourcePort)[across] -
                                pt[across]),
             }));
-        return {dep: elbow_rank(dep, edge.id), arr: elbow_rank(arr, edge.id)};
+        return {
+            dep: elbow_rank(dep, edge.id),
+            arr: elbow_rank(arr, edge.id),
+            comb: combs.get(edge.id) || null,
+        };
     } catch(e) {
         log_error(`elbow edge ${edge.id}: cannot read the edges sharing its ends: ${e}`);
         return null;