@yuneta/gobj-ui 7.23.147 → 7.23.149

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,20 @@ 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
+**Elbow edges** (`7.23.149`) are an option of the edges, not a layout: the
+toolbar's `GRAPH_EDGE_ELBOW` toggle sets `edge_shape` to `elbow`, and every
+edge goes straight out of the parent's port to the channel half way to the
+child, along it, and straight into the child's port — mxGraph's tree routing.
+The children of one hook share a row and a port, so they share the channel
+and read as one bus. The two edge types (`treedb-elbow-v` / `-h`) subclass
+G6's `Polyline` and compute the elbow from the ports on every draw, so
+dragging, folding and relayout need nothing else. It follows the reading
+direction, and a layout with no rows (`rowless_layouts`: `radial`,
+`d3-force`, `force-atlas2`) keeps the curve, with the toggle disabled.
+`edge_shape` is `SDF_PERSIST` on `C_YUI_TREEDB_GRAPH`, a preference per
+treedb like `node_labels`. Consumer key: `elbow edges`.
+
+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));
@@ -45447,7 +45644,7 @@ var _excluded$1 = ["style"];
 /**
 * Polyline inherits the marker-related capabilities of Polygon.
 */
-var Polyline = /*#__PURE__*/ function(_Polygon) {
+var Polyline$1 = /*#__PURE__*/ function(_Polygon) {
 	function Polyline() {
 		var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, style = _ref.style, rest = _objectWithoutProperties(_ref, _excluded$1);
 		_classCallCheck(this, Polyline);
@@ -45539,7 +45736,7 @@ var Polyline = /*#__PURE__*/ function(_Polygon) {
 		}
 	]);
 }(Polygon);
-Polyline.PARSED_STYLE_LIST = new Set([].concat(_toConsumableArray(Polygon.PARSED_STYLE_LIST), [
+Polyline$1.PARSED_STYLE_LIST = new Set([].concat(_toConsumableArray(Polygon.PARSED_STYLE_LIST), [
 	"points",
 	"markerStart",
 	"markerMid",
@@ -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",
@@ -56368,6 +56571,12 @@ var attrs_table$4 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "main_topic", 0, "", "The topic the tree hangs from; empty = deduced (the one whose hooks reach the most others). Its parentless records are the roots; a parentless record of a topic linked to it is LOOSE and shown only on request"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_LIST, "loose_topics", 0, "[]", "Topics whose loose records (no parent, in a topic the schema hangs from the main one) are shown as roots"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "node_mode", 0, "expanded", "How a record is drawn: `expanded` = the card with its pills and ports; `compact` = a one-line pill with the name and small ports; `shape` = a figure of the topic's colour (square, circle, diamond... per node or topic, from the node properties), no ports, no text -- the topology alone. One node can be toggled against it (EV_TOGGLE_NODE_MODE)"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "edge_shape", 0, "curved", "How an edge is drawn: `curved` (the default) or `elbow` -- straight out of its port to the channel between the two rows, along it, and straight into the other port: the bus of an org chart, as mxGraph drew its trees. Layouts with no rows (`rowless_layouts`) keep the curve"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_LIST, "rowless_layouts", _yuneta_gobj_js.sdata_flag_t.SDF_RD, JSON.stringify([
+		"radial",
+		"d3-force",
+		"force-atlas2"
+	]), "Layouts with no rows for an elbow to run between: their edges stay curved whatever `edge_shape` says (read-only, for the parent to query)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "node_labels", 0, true, "A `shape` node says its name under the figure. Off, it is a coloured figure and nothing else"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "confirm_delete_node", 0, true, "Ask confirmation before deleting a node"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "confirm_unlink_edge", 0, true, "Ask confirmation before unlinking an edge"),
@@ -56618,6 +56827,9 @@ 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.EDGE, "treedb-elbow-v", TreedbElbowV);
+		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.EDGE, "treedb-elbow-h", TreedbElbowH);
 		(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);
@@ -57310,7 +57522,10 @@ function layout_direction(gobj) {
 	return (0, _yuneta_gobj_js.str_in_list)(LR_LAYOUTS, gobj.priv.layout) ? "LR" : "TB";
 }
 function edge_type_for(gobj) {
-	return layout_direction(gobj) === "LR" ? "cubic-horizontal" : "cubic";
+	let lr = layout_direction(gobj) === "LR";
+	let rowless = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "rowless_layouts") || [];
+	if ((0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "edge_shape") === "elbow" && !(0, _yuneta_gobj_js.str_in_list)(rowless, gobj.priv.layout)) return lr ? "treedb-elbow-h" : "treedb-elbow-v";
+	return lr ? "cubic-horizontal" : "cubic";
 }
 /************************************************************
 *  Where the ports sit, by direction: fkeys (the way in from a
@@ -58785,6 +59000,44 @@ var TreedbTreeLayout = class extends _antv_g6.BaseLayout {
 		return treedb_layout_output(layout_tree(input.nodes, input.edges, options));
 	}
 };
+/************************************************************
+*  An ELBOW edge, the way mxGraph drew a tree: straight out of
+*  the parent's port to the channel half way to the child, along
+*  it, and straight into the child's port. The children of one
+*  hook sit on one row and leave by one port, so they share the
+*  channel and the lines read as one bus.
+*
+*  Computed on every draw from where the two ends ARE, so a
+*  dragged card, a fold or a layout needs nothing else. `-v` runs
+*  between rows (top to bottom), `-h` between columns.
+************************************************************/
+var ELBOW_RADIUS = 6;
+var TreedbElbowV = class extends _antv_g6.Polyline {
+	getControlPoints(attributes) {
+		let [s, t] = this.getEndpoints(attributes, false);
+		let mid = (s[1] + t[1]) / 2;
+		return [[s[0], mid], [t[0], mid]];
+	}
+	getKeyPath(attributes) {
+		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));
+	}
+};
+var TreedbElbowH = class extends _antv_g6.Polyline {
+	getControlPoints(attributes) {
+		let [s, t] = this.getEndpoints(attributes, false);
+		let mid = (s[0] + t[0]) / 2;
+		return [[mid, s[1]], [mid, t[1]]];
+	}
+	getKeyPath(attributes) {
+		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));
+	}
+};
+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);
@@ -63222,6 +63475,20 @@ function ac_set_node_labels(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  Curved or elbow edges (the host's toggle). Nothing moves: every
+*  edge takes the type that goes with the shape and the layout,
+*  and draws again.
+************************************************************/
+function ac_set_edge_shape(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let shape = kw && kw.edge_shape === "elbow" ? "elbow" : "curved";
+	(0, _yuneta_gobj_js.gobj_write_str_attr)(gobj, "edge_shape", shape);
+	if (!priv.graph || !priv.graph_rendered) return 0;
+	apply_layout_direction(gobj);
+	graph_draw(gobj);
+	return 0;
+}
+/************************************************************
 *  ONE node opened or closed against the mode (a double click,
 *  or the context menu). It holds still on screen while the
 *  rest of the graph makes room, as a fold does.
@@ -63781,6 +64048,11 @@ function create_gclass$4(gclass_name) {
 			ac_set_node_labels,
 			null
 		],
+		[
+			"EV_SET_EDGE_SHAPE",
+			ac_set_edge_shape,
+			null
+		],
 		[
 			"EV_TOGGLE_NODE_MODE",
 			ac_toggle_node_mode,
@@ -63902,6 +64174,7 @@ function create_gclass$4(gclass_name) {
 		["EV_SET_LOOSE_TOPICS", 0],
 		["EV_SET_NODE_MODE", 0],
 		["EV_SET_NODE_LABELS", 0],
+		["EV_SET_EDGE_SHAPE", 0],
 		["EV_TOGGLE_NODE_MODE", 0],
 		["EV_NODE_DBLCLICK", 0],
 		["EV_LEGEND_STATE", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
@@ -63978,6 +64251,7 @@ var attrs_table$3 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "main_topic", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "", "The topic the tree hangs from; empty = deduced by the graph. User preference, per treedb"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_LIST, "loose_topics", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "[]", "Topics whose LOOSE records (no parent) are shown. User preference, per treedb"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "node_mode", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "expanded", "How the records are drawn: `expanded` = the cards with their pills and ports, `compact` = one-line pills with the name, `shape` = coloured figures, the topology alone. User preference"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "edge_shape", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "curved", "How the edges are drawn: `curved` or `elbow` (the bus of an org chart). User preference"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "node_labels", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, true, "A `shape` node says its name under its figure. User preference"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_DICT, "camera", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "{}", "Where the reader left the viewport: {zoom, x, y}. Handed to the engine on creation and written back when a move settles, so the graph opens where it was left. User preference, per treedb"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "fold_level", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, 0, "The level of the MAIN tree the toolbar's stepper stands on: 1 = the main topic's roots, N = N-1 levels under them; 0 = never stepped, `expand_depth`. Handed to the engine on creation, so the graph opens at the level it was left. User preference, per treedb"),
@@ -64070,6 +64344,7 @@ function mt_create$3(gobj) {
 		loose_topics: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "loose_topics") || [],
 		node_mode: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "node_mode") || "expanded",
 		node_labels: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels"),
+		edge_shape: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "edge_shape") || "curved",
 		camera: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "camera") || {}
 	}, gobj);
 	populate_nodes_tree_options(gobj);
@@ -64256,6 +64531,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");
@@ -64279,58 +64555,82 @@ function option_label(name) {
 *  its context menu (the child's business).
 ************************************************************/
 function node_shape_items(gobj, wide) {
-	return [[
-		"div",
-		{
-			class: "GRAPH_NODE_MODE buttons has-addons",
-			style: "margin:0 0 0 .5rem; flex:0 0 auto; flex-wrap:nowrap;"
-		},
-		NODE_MODES.map((mode) => {
-			let key = NODE_MODE_LABELS[mode];
-			return [
-				"button",
-				{
-					class: "GRAPH_NODE_MODE_BTN button",
-					type: "button",
-					"data-mode": mode,
-					style: {
-						height: wide,
-						width: "2.5em"
+	return [
+		[
+			"div",
+			{
+				class: "GRAPH_NODE_MODE buttons has-addons",
+				style: "margin:0 0 0 .5rem; flex:0 0 auto; flex-wrap:nowrap;"
+			},
+			NODE_MODES.map((mode) => {
+				let key = NODE_MODE_LABELS[mode];
+				return [
+					"button",
+					{
+						class: "GRAPH_NODE_MODE_BTN button",
+						type: "button",
+						"data-mode": mode,
+						style: {
+							height: wide,
+							width: "2.5em"
+						},
+						title: (0, i18next.t)(key),
+						"data-i18n-title": key,
+						"aria-label": (0, i18next.t)(key),
+						"data-i18n-aria-label": key,
+						"aria-pressed": "false"
 					},
-					title: (0, i18next.t)(key),
-					"data-i18n-title": key,
-					"aria-label": (0, i18next.t)(key),
-					"data-i18n-aria-label": key,
-					"aria-pressed": "false"
+					yui_toolbar_icon(NODE_MODE_ICONS[mode]),
+					{ click: (evt) => {
+						evt.stopPropagation();
+						(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
+					} }
+				];
+			})
+		],
+		[
+			"button",
+			{
+				class: "GRAPH_NODE_LABELS button",
+				type: "button",
+				style: {
+					height: wide,
+					width: "2.5em"
 				},
-				yui_toolbar_icon(NODE_MODE_ICONS[mode]),
-				{ click: (evt) => {
-					evt.stopPropagation();
-					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
-				} }
-			];
-		})
-	], [
-		"button",
-		{
-			class: "GRAPH_NODE_LABELS button",
-			type: "button",
-			style: {
-				height: wide,
-				width: "2.5em"
+				title: (0, i18next.t)("node labels"),
+				"data-i18n-title": "node labels",
+				"aria-label": (0, i18next.t)("node labels"),
+				"data-i18n-aria-label": "node labels",
+				"aria-pressed": "false"
 			},
-			title: (0, i18next.t)("node labels"),
-			"data-i18n-title": "node labels",
-			"aria-label": (0, i18next.t)("node labels"),
-			"data-i18n-aria-label": "node labels",
-			"aria-pressed": "false"
-		},
-		yui_toolbar_icon("yi-font"),
-		{ click: (evt) => {
-			evt.stopPropagation();
-			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
-		} }
-	]];
+			yui_toolbar_icon("yi-font"),
+			{ click: (evt) => {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
+			} }
+		],
+		[
+			"button",
+			{
+				class: "GRAPH_EDGE_ELBOW button",
+				type: "button",
+				style: {
+					height: wide,
+					width: "2.5em"
+				},
+				title: (0, i18next.t)("elbow edges"),
+				"data-i18n-title": "elbow edges",
+				"aria-label": (0, i18next.t)("elbow edges"),
+				"data-i18n-aria-label": "elbow edges",
+				"aria-pressed": "false"
+			},
+			yui_toolbar_icon("yi-diagram-project"),
+			{ click: (evt) => {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_EDGE_SHAPE", {}, gobj);
+			} }
+		]
+	];
 }
 var NODE_MODES = [
 	"expanded",
@@ -64363,6 +64663,16 @@ function refresh_node_shape_buttons(gobj, $root) {
 		$labels.setAttribute("aria-pressed", labels ? "true" : "false");
 		$labels.disabled = mode !== "shape";
 	}
+	let elbow = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "edge_shape") === "elbow";
+	set_pressed_state($root, ".GRAPH_EDGE_ELBOW", elbow);
+	let $elbow = $root.querySelector(".GRAPH_EDGE_ELBOW");
+	if ($elbow) {
+		$elbow.setAttribute("aria-pressed", elbow ? "true" : "false");
+		let child = gobj.priv.gobj_nodes_tree;
+		let rowless = child ? (0, _yuneta_gobj_js.gobj_read_attr)(child, "rowless_layouts") || [] : [];
+		let layout = child ? (0, _yuneta_gobj_js.gobj_read_str_attr)(child, "layout") : "";
+		$elbow.disabled = rowless.includes(layout);
+	}
 }
 /************************************************************
 *  The fold STEPPER: one level less, where the tree stands, one
@@ -64911,6 +65221,7 @@ function populate_nodes_tree_options(gobj) {
 		let current_layout = (0, _yuneta_gobj_js.gobj_read_str_attr)(priv.gobj_nodes_tree, "layout");
 		if (current_layout) $layout_select.value = current_layout;
 		refresh_layout_stepper(gobj);
+		refresh_node_shape_buttons(gobj, $container);
 	}
 	let $operation_mode_select = $container.querySelector(".GRAPH_MODE_SELECT");
 	$operation_mode_select.value = priv.operation_mode;
@@ -65604,6 +65915,7 @@ function ac_set_layout(gobj, event, kw, src) {
 	$layout_select.value = priv.layout;
 	(0, _yuneta_gobj_js.gobj_send_event)(priv.gobj_nodes_tree, "EV_SET_LAYOUT", { layout }, gobj);
 	refresh_layout_stepper(gobj);
+	refresh_node_shape_buttons(gobj, priv.$container);
 	return 0;
 }
 /************************************************************
@@ -65955,6 +66267,7 @@ function ac_layout_autoset(gobj, event, kw, src) {
 	if (!$select || !layout) return 0;
 	$select.value = layout;
 	refresh_layout_stepper(gobj);
+	refresh_node_shape_buttons(gobj, $container);
 	return 0;
 }
 /************************************************************
@@ -66027,6 +66340,15 @@ function ac_set_node_mode(gobj, event, kw, src) {
 	if (priv.gobj_nodes_tree) (0, _yuneta_gobj_js.gobj_send_event)(priv.gobj_nodes_tree, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
 	return 0;
 }
+function ac_toggle_edge_shape(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let shape = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "edge_shape") === "elbow" ? "curved" : "elbow";
+	(0, _yuneta_gobj_js.gobj_write_str_attr)(gobj, "edge_shape", shape);
+	(0, _yuneta_gobj_js.gobj_save_persistent_attrs)(gobj, "edge_shape");
+	refresh_node_shape_buttons(gobj, priv.$container);
+	if (priv.gobj_nodes_tree) (0, _yuneta_gobj_js.gobj_send_event)(priv.gobj_nodes_tree, "EV_SET_EDGE_SHAPE", { edge_shape: shape }, gobj);
+	return 0;
+}
 function ac_toggle_node_labels(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let labels = !(0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels");
@@ -66271,6 +66593,11 @@ function create_gclass$3(gclass_name) {
 			ac_toggle_node_labels,
 			null
 		],
+		[
+			"EV_TOGGLE_EDGE_SHAPE",
+			ac_toggle_edge_shape,
+			null
+		],
 		[
 			"EV_LAYOUT_AUTOSET",
 			ac_layout_autoset,
@@ -66348,6 +66675,7 @@ function create_gclass$3(gclass_name) {
 		["EV_COLLAPSE_LEVEL", 0],
 		["EV_SET_NODE_MODE", 0],
 		["EV_TOGGLE_NODE_LABELS", 0],
+		["EV_TOGGLE_EDGE_SHAPE", 0],
 		["EV_FIND_RESULT", 0],
 		["EV_LAYOUT_AUTOSET", 0],
 		["EV_CAMERA_CHANGED", 0],