@yuneta/gobj-ui 7.23.147 → 7.23.148

package/README.md

@@ -1387,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
@@ -1402,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
@@ -1413,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

package/dist/gobj-ui.cjs.js

@@ -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");

package/dist/gobj-ui.es.js

@@ -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");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.147",
+  "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_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":

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"});