@yuneta/gobj-ui 7.23.146 → 7.23.148

package/README.md

@@ -497,8 +497,10 @@ cloned toolbar cannot drift apart again. The vocabulary is the treedb graph's
 sprite and so cannot share the code, only the decisions): zoom in / zoom out, a
 live **zoom readout**, `yi-fit` for fit — the same corner brackets the sprite
 draws for `g6-icon-fit` — and the WRITTEN `1:1` for actual size, which is
-written in every editor that offers it and never drawn. Fold is the chevron
-pair, from the lazy tree viewer's own toolbar. The readout hangs off G6's
+written in every editor that offers it and never drawn. Fold is the
+double-chevron pair (`yi-angles-down` / `yi-angles-up`, `7.23.147`), the same
+as the lazy tree viewer's toolbar: not the single chevron of a node's handle,
+which opens ONE node. The readout hangs off G6's
 `aftertransform`, the one hook that also covers the wheel.
 
 Both graph toolbars are arranged the same way (`7.23.7`): the **global**
@@ -1385,8 +1387,8 @@ G6 5.1 registers these layouts, and this is how each meets that shape:
 | `circular`, `concentric`, `grid`, `mds`, `random` | rings, rings by degree, a grid, projection, noise | none knows a parent from a child |
 | `combo-combined`, `fishbone` | combos / cause-effect | not this data |
 
-So two of our own, in `treedb_layout.js` (pure, tested), registered as G6
-layouts by two thin adapters in `c_g6_nodes_tree.js`:
+So three of our own, in `treedb_layout.js` (pure, tested), registered as G6
+layouts by three thin adapters in `c_g6_nodes_tree.js`:
 
 - **`treedb-tree`** — the classic tidy tree, **top to bottom**. A row per
   depth as tall as its tallest card, a node centred over the block of its
@@ -1400,6 +1402,18 @@ layouts by two thin adapters in `c_g6_nodes_tree.js`:
   keeps the other reading for a host that wants it). The outline that shipped
   beside it (`treedb-outline`, one row per node) was removed in `7.23.75`: a
   list that indents is a JSON viewer, and this library already has one.
+- **`compact-tree`** (`treedb-compact`, `7.23.148`) — the same tree packed by
+  **contour** instead of by block. The tidy tree gives each subtree its whole
+  block, so a hall opened with twenty-four devices pushes the siblings of its
+  ancestors apart at depths where nothing of theirs touches; here every
+  sibling slides against the outline of the ones before it, and a closed
+  branch sits beside an open one at the depth they share. Same rows and order
+  as `treedb-tree`, so switching moves cards sideways and never reorders them.
+  One region open with a 24-device hall is 70% of the tidy width on a treedb
+  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.
 - **`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
@@ -1411,7 +1425,7 @@ layouts by two thin adapters in `c_g6_nodes_tree.js`:
   construction, across the ring or along the radius; several roots share the
   circle around an empty centre.
 
-Both take the **same spanning tree**, chosen deterministically: roots are the
+All three take the **same spanning tree**, chosen deterministically: roots are the
 nodes with no incoming edge, in node order; a node belongs to the **first
 parent that reaches it** in a breadth-first walk (the place, not the
 controller, because the place's column came first) and its other links are
@@ -1664,7 +1678,10 @@ forwards them as `EV_SET_HIDDEN_TOPICS`, `EV_SET_MAIN_TOPIC`,
 `main topic`, `highlight topic`, `loose records`, `hidden topics`; `legend`
 is no longer used.
 
-**The layout select has a stepper beside it** (`7.23.146`): ▲ and ▼ step to
+**The layout select has a stepper beside it** (`7.23.146`): ↑ and ↓
+(`yi-arrow-up` / `yi-arrow-down` since `7.23.147`, a shafted arrow steps a
+sequence; the fold stepper's level buttons are tree boxes, `yi-square-minus`
+/ `yi-square-plus`) step to
 the layout before or after the current one, in the order the engine offers
 them (`layout_names`), without opening the list. Layouts are picked by trying
 them one after another, and a list closes on every pick. The stepper reads the

package/dist/gobj-ui.cjs.js

@@ -11305,13 +11305,13 @@ function yui_graph_camera_items(gobj, graph, wide) {
 	];
 }
 /************************************************************
-*   The fold pair: expand all, collapse all.  Chevrons, the
-*   open one rotated down — the same pair the lazy tree
-*   viewer's toolbar uses, and the same direction the
-*   per-node handles speak.
+*   The fold pair: expand all, collapse all.  Double chevrons,
+*   down and up -- the same pair the lazy tree viewer's toolbar
+*   uses. Not the single chevron of a node's handle: that opens
+*   ONE node, these act on all of them.
 ************************************************************/
 function yui_graph_fold_items(gobj, wide) {
-	return [camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide, " transform: rotate(90deg);"), camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide)];
+	return [camera_button(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand all", wide), camera_button(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all", wide)];
 }
 /************************************************************
 *   The ANCHOR toggle: pick one element and every camera move
@@ -13851,7 +13851,7 @@ function make_toolbar$4(gobj) {
 			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
-	left_items.push(icon_button$1(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
+	left_items.push(icon_button$1(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all"));
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
 	let right_items = [view_mode_switch$1(gobj), icon_button$1(gobj, "yi-copy", "EV_COPY_ALL", "copy json")];
@@ -29314,6 +29314,203 @@ function tidy_tree_lr(nodes, edges, o) {
 	}
 	return pos;
 }
+/************************************************************
+*  The compact tree.
+*
+*  The tidy tree above gives every subtree its whole BLOCK: open a
+*  hall with twenty-four devices and its block widens, and with it
+*  every block above it, so the siblings of its ancestors move apart
+*  at depths where nothing of theirs touches. This one keeps the
+*  CONTOUR of each subtree instead -- its outline on each side, depth
+*  by depth -- and slides every sibling against the outline of the
+*  ones before it. A folded region then sits as close to an open one
+*  as their cards allow at each depth, which is what a folded treedb
+*  is: one branch open among closed ones.
+*
+*  Same spanning tree, same order, same rows as the tidy tree: only
+*  the packing across the depths differs, so switching between the
+*  two moves cards sideways and never reorders them.
+*
+*  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
+*  maxGraph's CompactTreeLayout.ts: leaf, join, merge, offset and
+*  bridge below follow that form. What is ours: it runs on the
+*  spanning tree of a FOREST, every depth is a row as wide as its
+*  widest card (mxGraph's `alignRanks`), several roots sit side by
+*  side, and there is no recursion.
+************************************************************/
+function layout_compact(nodes, edges, opts) {
+	let o = Object.assign({}, DEFAULTS, opts || {});
+	if (o.direction === "LR") return compact_tree_lr(nodes, edges, o);
+	let lr = compact_tree_lr(nodes.map((n) => Object.assign({}, n, {
+		w: n.h,
+		h: n.w
+	})), edges, o);
+	let pos = /* @__PURE__ */ new Map();
+	for (let [id, p] of lr) pos.set(id, {
+		x: p.y,
+		y: p.x
+	});
+	return pos;
+}
+function contour_line(dx, dy, next) {
+	return {
+		dx,
+		dy,
+		next: next || null
+	};
+}
+function contour_offset(p1, p2, a1, a2, b1, b2) {
+	if (b1 <= p1 || p1 + a1 <= 0) return 0;
+	let d;
+	if (b1 * a2 - a1 * b2 > 0) {
+		if (p1 < 0) d = p1 * a2 / a1 - p2;
+		else if (p1 > 0) d = p1 * b2 / b1 - p2;
+		else d = -p2;
+	} else if (b1 < p1 + a1) d = b2 - (p2 + (b1 - p1) * a2 / a1);
+	else if (b1 > p1 + a1) d = (a1 + p1) * b2 / b1 - (p2 + a2);
+	else d = b2 - (p2 + a2);
+	return d > 0 ? d : 0;
+}
+function contour_bridge(line1, x1, y1, line2, x2, y2) {
+	let dx = x2 + line2.dx - x1;
+	let dy = line2.dx === 0 ? line2.dy : dx * line2.dy / line2.dx;
+	let r = contour_line(dx, dy, line2.next);
+	line1.next = contour_line(0, y2 + line2.dy - dy - y1, r);
+	return r;
+}
+function contour_merge(p1, p2) {
+	let x = 0;
+	let y = 0;
+	let total = 0;
+	let upper = p1.lower_head;
+	let lower = p2.upper_head;
+	while (lower && upper) {
+		let d = contour_offset(x, y, lower.dx, lower.dy, upper.dx, upper.dy);
+		y += d;
+		total += d;
+		if (x + lower.dx <= upper.dx) {
+			x += lower.dx;
+			y += lower.dy;
+			lower = lower.next;
+		} else {
+			x -= upper.dx;
+			y -= upper.dy;
+			upper = upper.next;
+		}
+	}
+	if (lower) {
+		let b = contour_bridge(p1.upper_tail, 0, 0, lower, x, y);
+		p1.upper_tail = b.next ? p2.upper_tail : b;
+		p1.lower_tail = p2.lower_tail;
+	} else {
+		let b = contour_bridge(p2.lower_tail, x, y, upper, 0, 0);
+		if (!b.next) p1.lower_tail = b;
+	}
+	p1.lower_head = p2.lower_head;
+	return total;
+}
+function compact_tree_lr(nodes, edges, o) {
+	let t = spanning_tree(nodes, edges);
+	let order = walk_order(t);
+	let pos = /* @__PURE__ */ new Map();
+	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 = [];
+	let x = 0;
+	for (let d = 0; d < col_w.length; d++) {
+		col_x[d] = x;
+		x += (col_w[d] || 0) + o.ranksep;
+	}
+	let pad = o.nodesep / 2;
+	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 i = order.length - 1; i >= 0; i--) {
+		let id = order[i];
+		let n = tn.get(id);
+		let kids = t.children.get(id) || [];
+		if (!kids.length) {
+			let upper = contour_line(n.len + dist, 0);
+			let lower_tail = contour_line(0, -n.ext - dist);
+			n.contour = {
+				upper_head: upper,
+				upper_tail: upper,
+				lower_tail,
+				lower_head: contour_line(n.len + dist, 0, lower_tail)
+			};
+			continue;
+		}
+		let first = tn.get(kids[0]);
+		n.contour = first.contour;
+		let h = first.ext + dist;
+		let span = h;
+		for (let k = 1; k < kids.length; k++) {
+			let kid = tn.get(kids[k]);
+			let d = contour_merge(n.contour, kid.contour);
+			kid.off_y = d + h;
+			kid.off_x = 0;
+			h = kid.ext + dist;
+			span += d + h;
+		}
+		let gap = pad + level_distance;
+		let y2 = (span - n.ext) / 2 - pad;
+		let y1 = y2 + n.ext + 2 * pad - span;
+		first.off_x = gap + n.len;
+		first.off_y = y1;
+		n.contour.upper_head = contour_line(n.len, 0, contour_line(gap, y1, n.contour.upper_head));
+		n.contour.lower_head = contour_line(n.len, 0, contour_line(gap, y2, n.contour.lower_head));
+	}
+	let root_of = /* @__PURE__ */ new Map();
+	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) || [];
+		if (!kids.length) continue;
+		let running = n.y + tn.get(kids[0]).off_y;
+		tn.get(kids[0]).y = running;
+		root_of.set(kids[0], root_of.get(id));
+		for (let k = 1; k < kids.length; k++) {
+			let kid = tn.get(kids[k]);
+			kid.y = running + kid.off_y;
+			running = kid.y;
+			root_of.set(kids[k], root_of.get(id));
+		}
+	}
+	let lo = /* @__PURE__ */ new Map();
+	let hi = /* @__PURE__ */ new Map();
+	for (let id of order) {
+		let r = root_of.get(id);
+		let n = tn.get(id);
+		lo.set(r, Math.min(lo.has(r) ? lo.get(r) : Infinity, n.y));
+		hi.set(r, Math.max(hi.has(r) ? hi.get(r) : -Infinity, n.y + n.ext));
+	}
+	let shift = /* @__PURE__ */ new Map();
+	let top = 0;
+	for (let r of t.roots) {
+		shift.set(r, top - lo.get(r));
+		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));
+		pos.set(id, {
+			x: col_x[d] + col_w[d] / 2,
+			y: y + n.ext / 2
+		});
+	}
+	return pos;
+}
 function extent_at(n, a) {
 	if (!n) return 0;
 	return Math.abs(n.w * Math.cos(a)) + Math.abs(n.h * Math.sin(a));
@@ -56297,6 +56494,12 @@ var _layouts = {
 		nodesep: 18,
 		ranksep: 90
 	},
+	"compact-tree": {
+		type: "treedb-compact",
+		direction: "TB",
+		nodesep: 18,
+		ranksep: 90
+	},
 	"dagre": {
 		type: "dagre",
 		rankdir: "LR",
@@ -56618,6 +56821,7 @@ function register_layouts(gobj) {
 		_g6_extensions_registered = true;
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "manual", ManualLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-tree", TreedbTreeLayout);
+		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-compact", TreedbCompactLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-radial", TreedbRadialLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.NODE, "light", LightNode);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.NODE, "treedb-card", TreedbCard);
@@ -58785,6 +58989,12 @@ var TreedbTreeLayout = class extends _antv_g6.BaseLayout {
 		return treedb_layout_output(layout_tree(input.nodes, input.edges, options));
 	}
 };
+var TreedbCompactLayout = class extends _antv_g6.BaseLayout {
+	async execute(data, options) {
+		let input = treedb_layout_input(data);
+		return treedb_layout_output(layout_compact(input.nodes, input.edges, options));
+	}
+};
 var TreedbRadialLayout = class extends _antv_g6.BaseLayout {
 	async execute(data, options) {
 		let input = treedb_layout_input(data);
@@ -64256,6 +64466,7 @@ function option_label(name) {
 		case "edition": return (0, i18next.t)("edition");
 		case "manual": return (0, i18next.t)("manual");
 		case "treedb-tree": return (0, i18next.t)("treedb-tree");
+		case "compact-tree": return (0, i18next.t)("compact-tree");
 		case "radial": return (0, i18next.t)("radial");
 		case "dagre": return (0, i18next.t)("dagre");
 		case "antv-dagre": return (0, i18next.t)("antv-dagre");
@@ -64418,7 +64629,7 @@ function fold_level_items(gobj, wide) {
 			style: "margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 		},
 		[
-			step_button("GRAPH_FOLD_COLLAPSE", "yi-chevron-right", "collapse one level", "EV_COLLAPSE_LEVEL"),
+			step_button("GRAPH_FOLD_COLLAPSE", "yi-square-minus", "collapse one level", "EV_COLLAPSE_LEVEL"),
 			[
 				"div",
 				{
@@ -64459,7 +64670,7 @@ function fold_level_items(gobj, wide) {
 					]
 				]
 			],
-			step_button("GRAPH_FOLD_EXPAND", "yi-chevron-down", "expand one level", "EV_EXPAND_LEVEL")
+			step_button("GRAPH_FOLD_EXPAND", "yi-square-plus", "expand one level", "EV_EXPAND_LEVEL")
 		]
 	]];
 }
@@ -64562,7 +64773,7 @@ function make_toolbar(gobj) {
 				class: "GRAPH_LAYOUT_STEPPER buttons has-addons",
 				style: "margin:0 0 0 .25rem; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 			},
-			[layout_step_button(gobj, "GRAPH_LAYOUT_PREV", "yi-chevron-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-chevron-down", "next layout", 1)]
+			[layout_step_button(gobj, "GRAPH_LAYOUT_PREV", "yi-arrow-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-arrow-down", "next layout", 1)]
 		],
 		[
 			"span",
@@ -69869,7 +70080,7 @@ function version_banner(gobj, topic) {
 				[[
 					"span",
 					{ class: "icon" },
-					[["i", { class: "yi-chevron-up" }]]
+					[["i", { class: "yi-circle-up" }]]
 				], [
 					"span",
 					{ i18n: "raise" },

package/dist/gobj-ui.es.js

@@ -11300,13 +11300,13 @@ function yui_graph_camera_items(gobj, graph, wide) {
 	];
 }
 /************************************************************
-*   The fold pair: expand all, collapse all.  Chevrons, the
-*   open one rotated down — the same pair the lazy tree
-*   viewer's toolbar uses, and the same direction the
-*   per-node handles speak.
+*   The fold pair: expand all, collapse all.  Double chevrons,
+*   down and up -- the same pair the lazy tree viewer's toolbar
+*   uses. Not the single chevron of a node's handle: that opens
+*   ONE node, these act on all of them.
 ************************************************************/
 function yui_graph_fold_items(gobj, wide) {
-	return [camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide, " transform: rotate(90deg);"), camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide)];
+	return [camera_button(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand all", wide), camera_button(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all", wide)];
 }
 /************************************************************
 *   The ANCHOR toggle: pick one element and every camera move
@@ -13846,7 +13846,7 @@ function make_toolbar$4(gobj) {
 			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
-	left_items.push(icon_button$1(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
+	left_items.push(icon_button$1(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all"));
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
 	let right_items = [view_mode_switch$1(gobj), icon_button$1(gobj, "yi-copy", "EV_COPY_ALL", "copy json")];
@@ -29309,6 +29309,203 @@ function tidy_tree_lr(nodes, edges, o) {
 	}
 	return pos;
 }
+/************************************************************
+*  The compact tree.
+*
+*  The tidy tree above gives every subtree its whole BLOCK: open a
+*  hall with twenty-four devices and its block widens, and with it
+*  every block above it, so the siblings of its ancestors move apart
+*  at depths where nothing of theirs touches. This one keeps the
+*  CONTOUR of each subtree instead -- its outline on each side, depth
+*  by depth -- and slides every sibling against the outline of the
+*  ones before it. A folded region then sits as close to an open one
+*  as their cards allow at each depth, which is what a folded treedb
+*  is: one branch open among closed ones.
+*
+*  Same spanning tree, same order, same rows as the tidy tree: only
+*  the packing across the depths differs, so switching between the
+*  two moves cards sideways and never reorders them.
+*
+*  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
+*  maxGraph's CompactTreeLayout.ts: leaf, join, merge, offset and
+*  bridge below follow that form. What is ours: it runs on the
+*  spanning tree of a FOREST, every depth is a row as wide as its
+*  widest card (mxGraph's `alignRanks`), several roots sit side by
+*  side, and there is no recursion.
+************************************************************/
+function layout_compact(nodes, edges, opts) {
+	let o = Object.assign({}, DEFAULTS, opts || {});
+	if (o.direction === "LR") return compact_tree_lr(nodes, edges, o);
+	let lr = compact_tree_lr(nodes.map((n) => Object.assign({}, n, {
+		w: n.h,
+		h: n.w
+	})), edges, o);
+	let pos = /* @__PURE__ */ new Map();
+	for (let [id, p] of lr) pos.set(id, {
+		x: p.y,
+		y: p.x
+	});
+	return pos;
+}
+function contour_line(dx, dy, next) {
+	return {
+		dx,
+		dy,
+		next: next || null
+	};
+}
+function contour_offset(p1, p2, a1, a2, b1, b2) {
+	if (b1 <= p1 || p1 + a1 <= 0) return 0;
+	let d;
+	if (b1 * a2 - a1 * b2 > 0) {
+		if (p1 < 0) d = p1 * a2 / a1 - p2;
+		else if (p1 > 0) d = p1 * b2 / b1 - p2;
+		else d = -p2;
+	} else if (b1 < p1 + a1) d = b2 - (p2 + (b1 - p1) * a2 / a1);
+	else if (b1 > p1 + a1) d = (a1 + p1) * b2 / b1 - (p2 + a2);
+	else d = b2 - (p2 + a2);
+	return d > 0 ? d : 0;
+}
+function contour_bridge(line1, x1, y1, line2, x2, y2) {
+	let dx = x2 + line2.dx - x1;
+	let dy = line2.dx === 0 ? line2.dy : dx * line2.dy / line2.dx;
+	let r = contour_line(dx, dy, line2.next);
+	line1.next = contour_line(0, y2 + line2.dy - dy - y1, r);
+	return r;
+}
+function contour_merge(p1, p2) {
+	let x = 0;
+	let y = 0;
+	let total = 0;
+	let upper = p1.lower_head;
+	let lower = p2.upper_head;
+	while (lower && upper) {
+		let d = contour_offset(x, y, lower.dx, lower.dy, upper.dx, upper.dy);
+		y += d;
+		total += d;
+		if (x + lower.dx <= upper.dx) {
+			x += lower.dx;
+			y += lower.dy;
+			lower = lower.next;
+		} else {
+			x -= upper.dx;
+			y -= upper.dy;
+			upper = upper.next;
+		}
+	}
+	if (lower) {
+		let b = contour_bridge(p1.upper_tail, 0, 0, lower, x, y);
+		p1.upper_tail = b.next ? p2.upper_tail : b;
+		p1.lower_tail = p2.lower_tail;
+	} else {
+		let b = contour_bridge(p2.lower_tail, x, y, upper, 0, 0);
+		if (!b.next) p1.lower_tail = b;
+	}
+	p1.lower_head = p2.lower_head;
+	return total;
+}
+function compact_tree_lr(nodes, edges, o) {
+	let t = spanning_tree(nodes, edges);
+	let order = walk_order(t);
+	let pos = /* @__PURE__ */ new Map();
+	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 = [];
+	let x = 0;
+	for (let d = 0; d < col_w.length; d++) {
+		col_x[d] = x;
+		x += (col_w[d] || 0) + o.ranksep;
+	}
+	let pad = o.nodesep / 2;
+	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 i = order.length - 1; i >= 0; i--) {
+		let id = order[i];
+		let n = tn.get(id);
+		let kids = t.children.get(id) || [];
+		if (!kids.length) {
+			let upper = contour_line(n.len + dist, 0);
+			let lower_tail = contour_line(0, -n.ext - dist);
+			n.contour = {
+				upper_head: upper,
+				upper_tail: upper,
+				lower_tail,
+				lower_head: contour_line(n.len + dist, 0, lower_tail)
+			};
+			continue;
+		}
+		let first = tn.get(kids[0]);
+		n.contour = first.contour;
+		let h = first.ext + dist;
+		let span = h;
+		for (let k = 1; k < kids.length; k++) {
+			let kid = tn.get(kids[k]);
+			let d = contour_merge(n.contour, kid.contour);
+			kid.off_y = d + h;
+			kid.off_x = 0;
+			h = kid.ext + dist;
+			span += d + h;
+		}
+		let gap = pad + level_distance;
+		let y2 = (span - n.ext) / 2 - pad;
+		let y1 = y2 + n.ext + 2 * pad - span;
+		first.off_x = gap + n.len;
+		first.off_y = y1;
+		n.contour.upper_head = contour_line(n.len, 0, contour_line(gap, y1, n.contour.upper_head));
+		n.contour.lower_head = contour_line(n.len, 0, contour_line(gap, y2, n.contour.lower_head));
+	}
+	let root_of = /* @__PURE__ */ new Map();
+	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) || [];
+		if (!kids.length) continue;
+		let running = n.y + tn.get(kids[0]).off_y;
+		tn.get(kids[0]).y = running;
+		root_of.set(kids[0], root_of.get(id));
+		for (let k = 1; k < kids.length; k++) {
+			let kid = tn.get(kids[k]);
+			kid.y = running + kid.off_y;
+			running = kid.y;
+			root_of.set(kids[k], root_of.get(id));
+		}
+	}
+	let lo = /* @__PURE__ */ new Map();
+	let hi = /* @__PURE__ */ new Map();
+	for (let id of order) {
+		let r = root_of.get(id);
+		let n = tn.get(id);
+		lo.set(r, Math.min(lo.has(r) ? lo.get(r) : Infinity, n.y));
+		hi.set(r, Math.max(hi.has(r) ? hi.get(r) : -Infinity, n.y + n.ext));
+	}
+	let shift = /* @__PURE__ */ new Map();
+	let top = 0;
+	for (let r of t.roots) {
+		shift.set(r, top - lo.get(r));
+		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));
+		pos.set(id, {
+			x: col_x[d] + col_w[d] / 2,
+			y: y + n.ext / 2
+		});
+	}
+	return pos;
+}
 function extent_at(n, a) {
 	if (!n) return 0;
 	return Math.abs(n.w * Math.cos(a)) + Math.abs(n.h * Math.sin(a));
@@ -56292,6 +56489,12 @@ var _layouts = {
 		nodesep: 18,
 		ranksep: 90
 	},
+	"compact-tree": {
+		type: "treedb-compact",
+		direction: "TB",
+		nodesep: 18,
+		ranksep: 90
+	},
 	"dagre": {
 		type: "dagre",
 		rankdir: "LR",
@@ -56613,6 +56816,7 @@ function register_layouts(gobj) {
 		_g6_extensions_registered = true;
 		register(ExtensionCategory.LAYOUT, "manual", ManualLayout);
 		register(ExtensionCategory.LAYOUT, "treedb-tree", TreedbTreeLayout);
+		register(ExtensionCategory.LAYOUT, "treedb-compact", TreedbCompactLayout);
 		register(ExtensionCategory.LAYOUT, "treedb-radial", TreedbRadialLayout);
 		register(ExtensionCategory.NODE, "light", LightNode);
 		register(ExtensionCategory.NODE, "treedb-card", TreedbCard);
@@ -58780,6 +58984,12 @@ var TreedbTreeLayout = class extends BaseLayout {
 		return treedb_layout_output(layout_tree(input.nodes, input.edges, options));
 	}
 };
+var TreedbCompactLayout = class extends BaseLayout {
+	async execute(data, options) {
+		let input = treedb_layout_input(data);
+		return treedb_layout_output(layout_compact(input.nodes, input.edges, options));
+	}
+};
 var TreedbRadialLayout = class extends BaseLayout {
 	async execute(data, options) {
 		let input = treedb_layout_input(data);
@@ -64251,6 +64461,7 @@ function option_label(name) {
 		case "edition": return t("edition");
 		case "manual": return t("manual");
 		case "treedb-tree": return t("treedb-tree");
+		case "compact-tree": return t("compact-tree");
 		case "radial": return t("radial");
 		case "dagre": return t("dagre");
 		case "antv-dagre": return t("antv-dagre");
@@ -64413,7 +64624,7 @@ function fold_level_items(gobj, wide) {
 			style: "margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 		},
 		[
-			step_button("GRAPH_FOLD_COLLAPSE", "yi-chevron-right", "collapse one level", "EV_COLLAPSE_LEVEL"),
+			step_button("GRAPH_FOLD_COLLAPSE", "yi-square-minus", "collapse one level", "EV_COLLAPSE_LEVEL"),
 			[
 				"div",
 				{
@@ -64454,7 +64665,7 @@ function fold_level_items(gobj, wide) {
 					]
 				]
 			],
-			step_button("GRAPH_FOLD_EXPAND", "yi-chevron-down", "expand one level", "EV_EXPAND_LEVEL")
+			step_button("GRAPH_FOLD_EXPAND", "yi-square-plus", "expand one level", "EV_EXPAND_LEVEL")
 		]
 	]];
 }
@@ -64557,7 +64768,7 @@ function make_toolbar(gobj) {
 				class: "GRAPH_LAYOUT_STEPPER buttons has-addons",
 				style: "margin:0 0 0 .25rem; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 			},
-			[layout_step_button(gobj, "GRAPH_LAYOUT_PREV", "yi-chevron-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-chevron-down", "next layout", 1)]
+			[layout_step_button(gobj, "GRAPH_LAYOUT_PREV", "yi-arrow-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-arrow-down", "next layout", 1)]
 		],
 		[
 			"span",
@@ -69864,7 +70075,7 @@ function version_banner(gobj, topic) {
 				[[
 					"span",
 					{ class: "icon" },
-					[["i", { class: "yi-chevron-up" }]]
+					[["i", { class: "yi-circle-up" }]]
 				], [
 					"span",
 					{ i18n: "raise" },

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -132,7 +132,7 @@ import {
     fold_split_group_key,
     fold_root_group_key,
 } from "./treedb_fold_model.js";
-import {layout_tree, layout_radial} from "./treedb_layout.js";
+import {layout_tree, layout_radial, layout_compact} from "./treedb_layout.js";
 
 import {
     BaseLayout,
@@ -350,6 +350,16 @@ const _layouts = {
         nodesep: 18,
         ranksep: 90,
     },
+    /*  The same tree packed by CONTOUR (Moen, as mxGraph drew it): a
+     *  closed branch sits beside an open one at the depth they share,
+     *  instead of beside the whole block of the open one. Same rows
+     *  and order as `treedb-tree` (treedb_layout.js).  */
+    "compact-tree": {
+        type: 'treedb-compact',
+        direction: 'TB',
+        nodesep: 18,
+        ranksep: 90,
+    },
     "dagre": {
         type: 'dagre',
         rankdir: 'LR',
@@ -925,6 +935,7 @@ function register_layouts(gobj)
         _g6_extensions_registered = true;
         register(ExtensionCategory.LAYOUT, 'manual', ManualLayout);
         register(ExtensionCategory.LAYOUT, 'treedb-tree', TreedbTreeLayout);
+        register(ExtensionCategory.LAYOUT, 'treedb-compact', TreedbCompactLayout);
         register(ExtensionCategory.LAYOUT, 'treedb-radial', TreedbRadialLayout);
         register(ExtensionCategory.NODE, 'light', LightNode);
         register(ExtensionCategory.NODE, 'treedb-card', TreedbCard);
@@ -4188,6 +4199,14 @@ class TreedbTreeLayout extends BaseLayout
     }
 }
 
+class TreedbCompactLayout extends BaseLayout
+{
+    async execute(data, options) {
+        let input = treedb_layout_input(data);
+        return treedb_layout_output(layout_compact(input.nodes, input.edges, options));
+    }
+}
+
 class TreedbRadialLayout extends BaseLayout
 {
     async execute(data, options) {

package/src/c_yui_json.css

@@ -155,13 +155,6 @@
     transform: rotate(90deg);
 }
 
-/*  "Expand all" reuses the chevron (the only one available) rotated to point
- *  DOWN — the open state — while "collapse all" keeps it pointing right (the
- *  closed state), mirroring the per-node toggle. */
-.C_YUI_JSON .EV_EXPAND_ALL i {
-    transform: rotate(90deg);
-}
-
 .C_YUI_JSON .JSON_TOGGLE_REMOTE i {
     font-size: 0.8em;
     color: var(--bulma-link-on-scheme, var(--bulma-link, #3273dc));

package/src/c_yui_json.js

@@ -399,8 +399,8 @@ function make_toolbar(gobj)
      *  place both graphs put theirs.  It opens the whole document; the
      *  per-row toggles live in the rows.  */
     left_items.push(
-        icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL",   "expand loaded"),
-        icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all")
+        icon_button(gobj, "yi-angles-down", "EV_EXPAND_ALL",   "expand loaded"),
+        icon_button(gobj, "yi-angles-up",   "EV_COLLAPSE_ALL", "collapse all")
     );
 
     attach_clear($search_control, $search_input);

package/src/c_yui_schema_editor.js

@@ -1264,7 +1264,7 @@ function version_banner(gobj, topic)
                         title: t("raise the version"), "aria-label": t("raise the version"),
                         "data-i18n-title": "raise the version",
                         "data-i18n-aria-label": "raise the version"}, [
-                ["span", {class: "icon"}, [["i", {class: "yi-chevron-up"}]]],
+                ["span", {class: "icon"}, [["i", {class: "yi-circle-up"}]]],
                 ["span", {i18n: "raise"}, t("raise")]
             ]]
         ]]

package/src/c_yui_treedb_graph.js

@@ -553,6 +553,8 @@ function option_label(name)
             return t("manual");
         case "treedb-tree":
             return t("treedb-tree");
+        case "compact-tree":
+            return t("compact-tree");
         case "radial":
             return t("radial");
         case "dagre":
@@ -716,8 +718,9 @@ function fold_level_items(gobj, wide)
     return [
         ['div', {class: 'GRAPH_FOLD_STEPPER buttons has-addons',
                  style: 'margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;'}, [
-            /*  The same two chevrons the pills speak: `▸` folded, `▾` open.  */
-            step_button('GRAPH_FOLD_COLLAPSE', 'yi-chevron-right',
+            /*  Tree boxes, not the pills' chevrons: a pill opens ONE hook,
+             *  this steps a LEVEL of the whole tree.  */
+            step_button('GRAPH_FOLD_COLLAPSE', 'yi-square-minus',
                         'collapse one level', 'EV_COLLAPSE_LEVEL'),
             /*  A `div` with the button skin, like the legend's main
              *  chip: a readout between two buttons of one group, not
@@ -740,7 +743,7 @@ function fold_level_items(gobj, wide)
                 ['span', {class: 'GRAPH_FOLD_COUNT',
                           style: 'font-variant-numeric:tabular-nums;'}, '–'],
             ]],
-            step_button('GRAPH_FOLD_EXPAND', 'yi-chevron-down',
+            step_button('GRAPH_FOLD_EXPAND', 'yi-square-plus',
                         'expand one level', 'EV_EXPAND_LEVEL'),
         ]],
     ];
@@ -881,8 +884,8 @@ function make_toolbar(gobj)
          *  arrive with the child (populate_nodes_tree_options).  */
         ['div', {class: 'GRAPH_LAYOUT_STEPPER buttons has-addons',
                  style: 'margin:0 0 0 .25rem; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;'}, [
-            layout_step_button(gobj, 'GRAPH_LAYOUT_PREV', 'yi-chevron-up', 'previous layout', -1),
-            layout_step_button(gobj, 'GRAPH_LAYOUT_NEXT', 'yi-chevron-down', 'next layout', 1),
+            layout_step_button(gobj, 'GRAPH_LAYOUT_PREV', 'yi-arrow-up', 'previous layout', -1),
+            layout_step_button(gobj, 'GRAPH_LAYOUT_NEXT', 'yi-arrow-down', 'next layout', 1),
         ]],
 
         ['span', {class: 'GRAPH_MODE_LABEL is-hidden-mobile', style: 'padding-left:10px; padding-right:5px;', i18n: 'operation mode'}, 'operation mode'],

package/src/treedb_layout.js

@@ -274,6 +274,264 @@ function tidy_tree_lr(nodes, edges, o)
     return pos;
 }
 
+/************************************************************
+ *  The compact tree.
+ *
+ *  The tidy tree above gives every subtree its whole BLOCK: open a
+ *  hall with twenty-four devices and its block widens, and with it
+ *  every block above it, so the siblings of its ancestors move apart
+ *  at depths where nothing of theirs touches. This one keeps the
+ *  CONTOUR of each subtree instead -- its outline on each side, depth
+ *  by depth -- and slides every sibling against the outline of the
+ *  ones before it. A folded region then sits as close to an open one
+ *  as their cards allow at each depth, which is what a folded treedb
+ *  is: one branch open among closed ones.
+ *
+ *  Same spanning tree, same order, same rows as the tidy tree: only
+ *  the packing across the depths differs, so switching between the
+ *  two moves cards sideways and never reorders them.
+ *
+ *  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
+ *  maxGraph's CompactTreeLayout.ts: leaf, join, merge, offset and
+ *  bridge below follow that form. What is ours: it runs on the
+ *  spanning tree of a FOREST, every depth is a row as wide as its
+ *  widest card (mxGraph's `alignRanks`), several roots sit side by
+ *  side, and there is no recursion.
+ ************************************************************/
+export function layout_compact(nodes, edges, opts)
+{
+    let o = Object.assign({}, DEFAULTS, opts || {});
+    if(o.direction === "LR") {
+        return compact_tree_lr(nodes, edges, o);
+    }
+    let transposed = nodes.map((n) => Object.assign({}, n, {w: n.h, h: n.w}));
+    let lr = compact_tree_lr(transposed, edges, o);
+    let pos = new Map();
+    for(let [id, p] of lr) {
+        pos.set(id, {x: p.y, y: p.x});
+    }
+    return pos;
+}
+
+/*  One segment of a contour: a step of `dx` along the depth and `dy`
+ *  across it, then the next segment.  */
+function contour_line(dx, dy, next)
+{
+    return {dx: dx, dy: dy, next: next || null};
+}
+
+/*  How far the segment (a1, a2) at (p1, p2) has to move across to
+ *  clear the segment (b1, b2) at the origin.  */
+function contour_offset(p1, p2, a1, a2, b1, b2)
+{
+    if(b1 <= p1 || p1 + a1 <= 0) {
+        return 0;
+    }
+    let d;
+    let t = b1 * a2 - a1 * b2;
+    if(t > 0) {
+        if(p1 < 0) {
+            d = (p1 * a2) / a1 - p2;
+        } else if(p1 > 0) {
+            d = (p1 * b2) / b1 - p2;
+        } else {
+            d = -p2;
+        }
+    } else if(b1 < p1 + a1) {
+        d = b2 - (p2 + ((b1 - p1) * a2) / a1);
+    } else if(b1 > p1 + a1) {
+        d = ((a1 + p1) * b2) / b1 - (p2 + a2);
+    } else {
+        d = b2 - (p2 + a2);
+    }
+    return (d > 0)? d : 0;
+}
+
+function contour_bridge(line1, x1, y1, line2, x2, y2)
+{
+    let dx = x2 + line2.dx - x1;
+    let dy = (line2.dx === 0)? line2.dy : (dx * line2.dy) / line2.dx;
+    let r = contour_line(dx, dy, line2.next);
+    line1.next = contour_line(0, y2 + line2.dy - dy - y1, r);
+    return r;
+}
+
+/*  Slide contour `p2` against `p1` until they clear; returns how far,
+ *  and leaves in `p1` the outline of the two together.  */
+function contour_merge(p1, p2)
+{
+    let x = 0;
+    let y = 0;
+    let total = 0;
+    let upper = p1.lower_head;
+    let lower = p2.upper_head;
+
+    while(lower && upper) {
+        let d = contour_offset(x, y, lower.dx, lower.dy, upper.dx, upper.dy);
+        y += d;
+        total += d;
+        if(x + lower.dx <= upper.dx) {
+            x += lower.dx;
+            y += lower.dy;
+            lower = lower.next;
+        } else {
+            x -= upper.dx;
+            y -= upper.dy;
+            upper = upper.next;
+        }
+    }
+
+    if(lower) {
+        let b = contour_bridge(p1.upper_tail, 0, 0, lower, x, y);
+        p1.upper_tail = b.next? p2.upper_tail : b;
+        p1.lower_tail = p2.lower_tail;
+    } else {
+        let b = contour_bridge(p2.lower_tail, x, y, upper, 0, 0);
+        if(!b.next) {
+            p1.lower_tail = b;
+        }
+    }
+    p1.lower_head = p2.lower_head;
+    return total;
+}
+
+function compact_tree_lr(nodes, edges, o)
+{
+    let t = spanning_tree(nodes, edges);
+    let order = walk_order(t);
+    let pos = new Map();
+
+    /*  Columns, as in the tidy tree: a depth is as wide as its widest
+     *  card, and a column's gap is `ranksep`.  */
+    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 = [];
+    let x = 0;
+    for(let d = 0; d < col_w.length; d++) {
+        col_x[d] = x;
+        x += (col_w[d] || 0) + o.ranksep;
+    }
+
+    /*  mxGraph's nodeDistance is padding on EACH side of a card, so two
+     *  neighbours end `nodesep` apart; its levelDistance is what is
+     *  left of the column gap after that padding.  */
+    let pad = o.nodesep / 2;
+    let dist = o.nodesep;
+    let level_distance = o.ranksep - pad;
+
+    /*  `len` along the depth (the column's width: the rows are aligned),
+     *  `ext` across it (the card's own height).  */
+    let tn = 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,
+        });
+    }
+
+    /*  Contours, children before parents.  */
+    for(let i = order.length - 1; i >= 0; i--) {
+        let id = order[i];
+        let n = tn.get(id);
+        let kids = t.children.get(id) || [];
+
+        if(!kids.length) {
+            let upper = contour_line(n.len + dist, 0);
+            let lower_tail = contour_line(0, -n.ext - dist);
+            n.contour = {
+                upper_head: upper,
+                upper_tail: upper,
+                lower_tail: lower_tail,
+                lower_head: contour_line(n.len + dist, 0, lower_tail),
+            };
+            continue;
+        }
+
+        /*  join: the children side by side, each slid against the
+         *  outline of the ones before it.  */
+        let first = tn.get(kids[0]);
+        n.contour = first.contour;
+        let h = first.ext + dist;
+        let span = h;
+        for(let k = 1; k < kids.length; k++) {
+            let kid = tn.get(kids[k]);
+            let d = contour_merge(n.contour, kid.contour);
+            kid.off_y = d + h;
+            kid.off_x = 0;
+            h = kid.ext + dist;
+            span += d + h;
+        }
+
+        /*  attach: the parent centred across the span of its children,
+         *  one column before them.  */
+        let gap = pad + level_distance;
+        let y2 = (span - n.ext) / 2 - pad;
+        let y1 = y2 + n.ext + 2 * pad - span;
+        first.off_x = gap + n.len;
+        first.off_y = y1;
+        n.contour.upper_head = contour_line(n.len, 0,
+                                   contour_line(gap, y1, n.contour.upper_head));
+        n.contour.lower_head = contour_line(n.len, 0,
+                                   contour_line(gap, y2, n.contour.lower_head));
+    }
+
+    /*  Positions across, parents before children: the first child at
+     *  its offset from the parent, each next one at its offset from
+     *  the one before.  */
+    let root_of = new Map();
+    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) || [];
+        if(!kids.length) {
+            continue;
+        }
+        let running = n.y + tn.get(kids[0]).off_y;
+        tn.get(kids[0]).y = running;
+        root_of.set(kids[0], root_of.get(id));
+        for(let k = 1; k < kids.length; k++) {
+            let kid = tn.get(kids[k]);
+            kid.y = running + kid.off_y;
+            running = kid.y;
+            root_of.set(kids[k], root_of.get(id));
+        }
+    }
+
+    /*  Several roots: each tree after the one before, by its extent.  */
+    let lo = new Map();
+    let hi = new Map();
+    for(let id of order) {
+        let r = root_of.get(id);
+        let n = tn.get(id);
+        lo.set(r, Math.min(lo.has(r)? lo.get(r) : Infinity, n.y));
+        hi.set(r, Math.max(hi.has(r)? hi.get(r) : -Infinity, n.y + n.ext));
+    }
+    let shift = new Map();
+    let top = 0;
+    for(let r of t.roots) {
+        shift.set(r, top - lo.get(r));
+        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));
+        pos.set(id, {x: col_x[d] + col_w[d] / 2, y: y + n.ext / 2});
+    }
+    return pos;
+}
+
 /*  How much of a card lies along the direction `a`: the projection
  *  of its rectangle on that direction. Full width when the card is
  *  read along its width, full height across it, and the honest

package/src/treedb_layout.test.js

@@ -6,7 +6,7 @@
  *      tidy tree's rows and centring, the radial tree's rings.
  ***********************************************************************/
 import { describe, test, expect } from "vitest";
-import { spanning_tree, layout_tree, layout_radial } from "./treedb_layout.js";
+import { spanning_tree, layout_tree, layout_radial, layout_compact } from "./treedb_layout.js";
 
 /*  es -> (norte, sur); norte -> nave; nave -> d0, d1 (hook rank 1) and
  *  c1 (hook rank 2); c1 -> d0 as well (second parent).  */
@@ -97,6 +97,107 @@ describe("the tidy tree, read down (the default)", () => {
     });
 });
 
+/*  Every two cards of one row stand at least `gap` apart.  */
+function expect_no_overlap_in_rows(list, pos, gap)
+{
+    for(let i = 0; i < list.length; i++) {
+        for(let j = i + 1; j < list.length; j++) {
+            let a = list[i];
+            let b = list[j];
+            let pa = pos.get(a.id);
+            let pb = pos.get(b.id);
+            if(Math.abs(pa.y - pb.y) > 1e-6) {
+                continue;
+            }
+            expect(Math.abs(pa.x - pb.x) + 1e-6).toBeGreaterThanOrEqual((a.w + b.w) / 2 + gap);
+        }
+    }
+}
+
+function width_of(list, pos)
+{
+    let lo = Infinity;
+    let hi = -Infinity;
+    for(let n of list) {
+        let p = pos.get(n.id);
+        lo = Math.min(lo, p.x - n.w / 2);
+        hi = Math.max(hi, p.x + n.w / 2);
+    }
+    return hi - lo;
+}
+
+/*  r -> a, b;  a -> hall -> six devices;  b is a closed sibling.  */
+const wide = [N("r", 172, 96), N("a", 172, 96), N("b", 172, 96), N("hall", 172, 96)]
+    .concat([0, 1, 2, 3, 4, 5].map((i) => N(`d${i}`, 116, 40)));
+const wide_edges = [
+    {source: "r", target: "a"}, {source: "r", target: "b"}, {source: "a", target: "hall"},
+].concat([0, 1, 2, 3, 4, 5].map((i) => ({source: "hall", target: `d${i}`})));
+
+describe("the compact tree", () => {
+    test("the rows are the tidy tree's rows", () => {
+        let tidy = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100});
+        let pos = layout_compact(nodes, edges, {nodesep: 10, ranksep: 100});
+        for(let n of nodes) {
+            expect(pos.get(n.id).y).toBe(tidy.get(n.id).y);
+        }
+    });
+
+    test("no two cards of a row are closer than the gap", () => {
+        expect_no_overlap_in_rows(nodes, layout_compact(nodes, edges, {nodesep: 10, ranksep: 100}), 10);
+        expect_no_overlap_in_rows(wide, layout_compact(wide, wide_edges, {nodesep: 18, ranksep: 90}), 18);
+    });
+
+    test("a parent is centred over its children, which keep their order", () => {
+        let pos = layout_compact(nodes, edges, {nodesep: 10, ranksep: 100});
+        expect(pos.get("d0").x).toBeLessThan(pos.get("d1").x);
+        expect(pos.get("d1").x).toBeLessThan(pos.get("c1").x);
+        let first = pos.get("d0").x - 58;
+        let last = pos.get("c1").x + 86;
+        expect(pos.get("nave").x).toBeCloseTo((first + last) / 2, 6);
+        expect(pos.get("norte").x).toBeLessThan(pos.get("sur").x);
+    });
+
+    test("a closed sibling sits beside an open branch, not beside its block", () => {
+        let opts = {nodesep: 18, ranksep: 90};
+        let tidy = layout_tree(wide, wide_edges, opts);
+        let pos = layout_compact(wide, wide_edges, opts);
+        /*  In the tidy tree `b` waits for the whole fan of devices; here it
+         *  only has to clear `a`, the card beside it.  */
+        expect(pos.get("b").x - pos.get("a").x).toBeLessThan(tidy.get("b").x - tidy.get("a").x);
+        expect(pos.get("b").x - pos.get("a").x).toBeGreaterThanOrEqual(172 + 18 - 1e-6);
+        expect(width_of(wide, pos)).toBeLessThanOrEqual(width_of(wide, tidy));
+    });
+
+    test("two trees sit side by side, not overlapped", () => {
+        let pos = layout_compact([N("a", 100, 50), N("b", 100, 50)], [], {nodesep: 10});
+        expect(pos.get("b").x - pos.get("a").x).toBe(100 + 20);
+    });
+
+    test("read right, it is the same tree with the axes swapped", () => {
+        let down = layout_compact(wide, wide_edges, {nodesep: 18, ranksep: 90});
+        let swapped = wide.map((n) => N(n.id, n.h, n.w));
+        let right = layout_compact(swapped, wide_edges, {nodesep: 18, ranksep: 90, direction: "LR"});
+        for(let n of wide) {
+            expect(right.get(n.id).x).toBeCloseTo(down.get(n.id).y, 6);
+            expect(right.get(n.id).y).toBeCloseTo(down.get(n.id).x, 6);
+        }
+    });
+
+    test("a tree as deep as the data places every node, without recursion", () => {
+        let chain = [];
+        let links = [];
+        for(let i = 0; i < 5000; i++) {
+            chain.push(N(`n${i}`, 40, 20));
+            if(i > 0) {
+                links.push({source: `n${i - 1}`, target: `n${i}`});
+            }
+        }
+        let pos = layout_compact(chain, links, {});
+        expect(pos.size).toBe(5000);
+        expect(Number.isFinite(pos.get("n4999").x)).toBe(true);
+    });
+});
+
 describe("the tidy tree, read right", () => {
     test("depths are columns; a column is as wide as its widest card", () => {
         let pos = layout_tree(nodes, edges, {nodesep: 10, ranksep: 100, direction: "LR"});

package/src/yui_graph_camera.js

@@ -181,17 +181,16 @@ export function yui_graph_camera_items(gobj, graph, wide)
 }
 
 /************************************************************
- *   The fold pair: expand all, collapse all.  Chevrons, the
- *   open one rotated down — the same pair the lazy tree
- *   viewer's toolbar uses, and the same direction the
- *   per-node handles speak.
+ *   The fold pair: expand all, collapse all.  Double chevrons,
+ *   down and up -- the same pair the lazy tree viewer's toolbar
+ *   uses. Not the single chevron of a node's handle: that opens
+ *   ONE node, these act on all of them.
  ************************************************************/
 export function yui_graph_fold_items(gobj, wide)
 {
     return [
-        camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide,
-            ' transform: rotate(90deg);'),
-        camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide),
+        camera_button(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand all", wide),
+        camera_button(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all", wide),
     ];
 }
 

package/src/yui_icons.css

@@ -404,3 +404,43 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 64L480 160 352 256V192H64V128H352ZM160 256L32 352 160 448V384H448V320H160Z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 64L480 160 352 256V192H64V128H352ZM160 256L32 352 160 448V384H448V320H160Z'/%3E%3C/svg%3E");
 }
+
+/* --- One shape per meaning (FontAwesome Free 7.3.1, solid) ---
+ *  A chevron opens or closes ONE thing, or scrolls; a shafted arrow
+ *  steps through a sequence; a tree box steps one LEVEL of a tree;
+ *  a double chevron acts on ALL of it. */
+
+.yi-square-plus::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM200 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM200 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/svg%3E");
+}
+
+.yi-square-minus::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm72 200l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm72 200l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/%3E%3C/svg%3E");
+}
+
+.yi-angles-down::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 402.7 329.4 265.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-160 160zm160-352l-160 160c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 210.7 329.4 73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 402.7 329.4 265.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-160 160zm160-352l-160 160c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 210.7 329.4 73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3z'/%3E%3C/svg%3E");
+}
+
+.yi-angles-up::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 109.3 329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160zm160 352l-160-160c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 329.4 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 109.3 329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160zm160 352l-160-160c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 329.4 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3z'/%3E%3C/svg%3E");
+}
+
+.yi-arrow-up::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 105.4 105.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 105.4 105.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E");
+}
+
+.yi-arrow-down::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M169.4 502.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7 224 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 370.7-105.4-105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M169.4 502.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7 224 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 370.7-105.4-105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
+}
+
+.yi-circle-up::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm11.3-387.3l104 104c4.6 4.6 5.9 11.5 3.5 17.4S366.5 256 360 256l-56 0 0 96c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-96-56 0c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.9 3.5-17.4l104-104c6.2-6.2 16.4-6.2 22.6 0z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm11.3-387.3l104 104c4.6 4.6 5.9 11.5 3.5 17.4S366.5 256 360 256l-56 0 0 96c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-96-56 0c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.9 3.5-17.4l104-104c6.2-6.2 16.4-6.2 22.6 0z'/%3E%3C/svg%3E");
+}