@yuneta/gobj-ui 7.23.148 → 7.23.150

package/dist/gobj-ui.es.js

@@ -6,7 +6,7 @@ import { createJSONEditor } from "vanilla-jsoneditor";
 import { TabulatorFull } from "tabulator-tables";
 import * as maplibregl from "maplibre-gl";
 import uPlot from "uplot";
-import { BaseLayout, BrushSelect, CanvasEvent, Circle, CommonEvent, DragCanvas, EdgeEvent, ExtensionCategory, Graph, HTML, HistoryEvent, NodeEvent, Toolbar, ZoomCanvas, register } from "@antv/g6";
+import { BaseLayout, BrushSelect, CanvasEvent, Circle, CommonEvent, DragCanvas, EdgeEvent, ExtensionCategory, Graph, HTML, HistoryEvent, NodeEvent, Polyline, Toolbar, ZoomCanvas, register } from "@antv/g6";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -29625,6 +29625,54 @@ function layout_radial(nodes, edges, opts) {
 	}
 	return pos;
 }
+/************************************************************
+*  The lane of `id` among `ids`, the edges joining the same two
+*  cards: 0, then +1, -1, +2, -2... in the order they were made.
+*  Edge ids end in a counter, so a numeric sort is that order.
+************************************************************/
+function elbow_lane(ids, id) {
+	let k = ids.slice().sort((a, b) => String(a).localeCompare(String(b), void 0, { numeric: true })).indexOf(id);
+	if (k <= 0) return 0;
+	return (k % 2 ? 1 : -1) * Math.ceil(k / 2);
+}
+function swap(p) {
+	return [p[1], p[0]];
+}
+function swap_box(b) {
+	return {
+		x1: b.y1,
+		y1: b.x1,
+		x2: b.y2,
+		y2: b.x2
+	};
+}
+/************************************************************
+*  The control points of an elbow from the port `s` to the port
+*  `t` ([x, y] each), knowing the boxes of the two cards
+*  ({x1, y1, x2, y2}) and the edge's lane.
+*
+*      vertical    the rows are stacked (top to bottom); false
+*                  when they are side by side (left to right)
+************************************************************/
+function elbow_points(s, t, box_s, box_t, lane, vertical) {
+	if (!vertical) return elbow_points(swap(s), swap(t), swap_box(box_s), swap_box(box_t), lane, true).map(swap);
+	let shift = lane * 10;
+	if (t[1] - s[1] > 20) {
+		let mid = (s[1] + t[1]) / 2 + shift;
+		mid = Math.min(Math.max(mid, s[1] + 10), t[1] - 10);
+		return [[s[0], mid], [t[0], mid]];
+	}
+	let out = 16 + Math.abs(shift);
+	let side = lane < 0 ? Math.min(box_s.x1, box_t.x1) - 24 - Math.abs(shift) : Math.max(box_s.x2, box_t.x2) + 24 + Math.abs(shift);
+	let y1 = s[1] + out;
+	let y2 = t[1] - out;
+	return [
+		[s[0], y1],
+		[side, y1],
+		[side, y2],
+		[t[0], y2]
+	];
+}
 //#endregion
 //#region node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -45639,7 +45687,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);
@@ -45731,7 +45779,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",
@@ -56566,6 +56614,12 @@ var attrs_table$4 = [
 	SDATA(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"),
 	SDATA(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"),
 	SDATA(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)"),
+	SDATA(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"),
+	SDATA(data_type_t.DTP_LIST, "rowless_layouts", 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)"),
 	SDATA(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"),
 	SDATA(data_type_t.DTP_BOOLEAN, "confirm_delete_node", 0, true, "Ask confirmation before deleting a node"),
 	SDATA(data_type_t.DTP_BOOLEAN, "confirm_unlink_edge", 0, true, "Ask confirmation before unlinking an edge"),
@@ -56817,6 +56871,8 @@ function register_layouts(gobj) {
 		register(ExtensionCategory.LAYOUT, "manual", ManualLayout);
 		register(ExtensionCategory.LAYOUT, "treedb-tree", TreedbTreeLayout);
 		register(ExtensionCategory.LAYOUT, "treedb-compact", TreedbCompactLayout);
+		register(ExtensionCategory.EDGE, "treedb-elbow-v", TreedbElbowV);
+		register(ExtensionCategory.EDGE, "treedb-elbow-h", TreedbElbowH);
 		register(ExtensionCategory.LAYOUT, "treedb-radial", TreedbRadialLayout);
 		register(ExtensionCategory.NODE, "light", LightNode);
 		register(ExtensionCategory.NODE, "treedb-card", TreedbCard);
@@ -57509,7 +57565,10 @@ function layout_direction(gobj) {
 	return 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 = gobj_read_attr(gobj, "rowless_layouts") || [];
+	if (gobj_read_str_attr(gobj, "edge_shape") === "elbow" && !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
@@ -58984,6 +59043,70 @@ var TreedbTreeLayout = class extends 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. An edge that
+*  does not run forward goes round the two cards, and the edges
+*  joining the same two cards take lanes (treedb_elbow.js).
+************************************************************/
+var ELBOW_RADIUS = 6;
+function elbow_box(node) {
+	try {
+		let b = node.getShape("key").getBounds();
+		return {
+			x1: b.min[0],
+			y1: b.min[1],
+			x2: b.max[0],
+			y2: b.max[1]
+		};
+	} catch (e) {
+		log_error(`elbow edge: no bounds for node ${node && node.id}: ${e}`);
+		let c = node.getCenter();
+		return {
+			x1: c[0],
+			y1: c[1],
+			x2: c[0],
+			y2: c[1]
+		};
+	}
+}
+function elbow_lane_of(edge) {
+	let graph = edge.context && edge.context.graph;
+	let s = edge.sourceNode && edge.sourceNode.id;
+	let t = edge.targetNode && edge.targetNode.id;
+	if (!graph || s === void 0 || t === void 0 || s === t) return 0;
+	try {
+		return elbow_lane(graph.getRelatedEdgesData(s).filter((d) => d.source === s && d.target === t || d.source === t && d.target === s).map((d) => d.id), edge.id);
+	} catch (e) {
+		log_error(`elbow edge ${edge.id}: cannot read the edges of ${s}: ${e}`);
+		return 0;
+	}
+}
+var TreedbElbowV = class extends Polyline {
+	getControlPoints(attributes) {
+		let [s, t] = this.getEndpoints(attributes, false);
+		return elbow_points(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), true);
+	}
+	getKeyPath(attributes) {
+		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));
+	}
+};
+var TreedbElbowH = class extends Polyline {
+	getControlPoints(attributes) {
+		let [s, t] = this.getEndpoints(attributes, false);
+		return elbow_points(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode), elbow_lane_of(this), false);
+	}
+	getKeyPath(attributes) {
+		return super.getKeyPath(Object.assign({}, attributes, { radius: attributes.radius || ELBOW_RADIUS }));
+	}
+};
 var TreedbCompactLayout = class extends BaseLayout {
 	async execute(data, options) {
 		let input = treedb_layout_input(data);
@@ -63427,6 +63550,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";
+	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.
@@ -63986,6 +64123,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,
@@ -64107,6 +64249,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", event_flag_t.EVF_OUTPUT_EVENT],
@@ -64183,6 +64326,7 @@ var attrs_table$3 = [
 	SDATA(data_type_t.DTP_STRING, "main_topic", sdata_flag_t.SDF_PERSIST, "", "The topic the tree hangs from; empty = deduced by the graph. User preference, per treedb"),
 	SDATA(data_type_t.DTP_LIST, "loose_topics", sdata_flag_t.SDF_PERSIST, "[]", "Topics whose LOOSE records (no parent) are shown. User preference, per treedb"),
 	SDATA(data_type_t.DTP_STRING, "node_mode", 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"),
+	SDATA(data_type_t.DTP_STRING, "edge_shape", sdata_flag_t.SDF_PERSIST, "curved", "How the edges are drawn: `curved` or `elbow` (the bus of an org chart). User preference"),
 	SDATA(data_type_t.DTP_BOOLEAN, "node_labels", sdata_flag_t.SDF_PERSIST, true, "A `shape` node says its name under its figure. User preference"),
 	SDATA(data_type_t.DTP_DICT, "camera", 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"),
 	SDATA(data_type_t.DTP_INTEGER, "fold_level", 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"),
@@ -64275,6 +64419,7 @@ function mt_create$3(gobj) {
 		loose_topics: gobj_read_attr(gobj, "loose_topics") || [],
 		node_mode: gobj_read_str_attr(gobj, "node_mode") || "expanded",
 		node_labels: gobj_read_bool_attr(gobj, "node_labels"),
+		edge_shape: gobj_read_str_attr(gobj, "edge_shape") || "curved",
 		camera: gobj_read_attr(gobj, "camera") || {}
 	}, gobj);
 	populate_nodes_tree_options(gobj);
@@ -64485,58 +64630,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: t(key),
+						"data-i18n-title": key,
+						"aria-label": t(key),
+						"data-i18n-aria-label": key,
+						"aria-pressed": "false"
 					},
-					title: t(key),
-					"data-i18n-title": key,
-					"aria-label": t(key),
-					"data-i18n-aria-label": key,
-					"aria-pressed": "false"
+					yui_toolbar_icon(NODE_MODE_ICONS[mode]),
+					{ click: (evt) => {
+						evt.stopPropagation();
+						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();
-					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: t("node labels"),
+				"data-i18n-title": "node labels",
+				"aria-label": t("node labels"),
+				"data-i18n-aria-label": "node labels",
+				"aria-pressed": "false"
 			},
-			title: t("node labels"),
-			"data-i18n-title": "node labels",
-			"aria-label": t("node labels"),
-			"data-i18n-aria-label": "node labels",
-			"aria-pressed": "false"
-		},
-		yui_toolbar_icon("yi-font"),
-		{ click: (evt) => {
-			evt.stopPropagation();
-			gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
-		} }
-	]];
+			yui_toolbar_icon("yi-font"),
+			{ click: (evt) => {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
+			} }
+		],
+		[
+			"button",
+			{
+				class: "GRAPH_EDGE_ELBOW button",
+				type: "button",
+				style: {
+					height: wide,
+					width: "2.5em"
+				},
+				title: t("elbow edges"),
+				"data-i18n-title": "elbow edges",
+				"aria-label": t("elbow edges"),
+				"data-i18n-aria-label": "elbow edges",
+				"aria-pressed": "false"
+			},
+			yui_toolbar_icon("yi-diagram-project"),
+			{ click: (evt) => {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_TOGGLE_EDGE_SHAPE", {}, gobj);
+			} }
+		]
+	];
 }
 var NODE_MODES = [
 	"expanded",
@@ -64569,6 +64738,16 @@ function refresh_node_shape_buttons(gobj, $root) {
 		$labels.setAttribute("aria-pressed", labels ? "true" : "false");
 		$labels.disabled = mode !== "shape";
 	}
+	let elbow = 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 ? gobj_read_attr(child, "rowless_layouts") || [] : [];
+		let layout = child ? gobj_read_str_attr(child, "layout") : "";
+		$elbow.disabled = rowless.includes(layout);
+	}
 }
 /************************************************************
 *  The fold STEPPER: one level less, where the tree stands, one
@@ -65117,6 +65296,7 @@ function populate_nodes_tree_options(gobj) {
 		let current_layout = 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;
@@ -65810,6 +65990,7 @@ function ac_set_layout(gobj, event, kw, src) {
 	$layout_select.value = priv.layout;
 	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;
 }
 /************************************************************
@@ -66161,6 +66342,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;
 }
 /************************************************************
@@ -66233,6 +66415,15 @@ function ac_set_node_mode(gobj, event, kw, src) {
 	if (priv.gobj_nodes_tree) 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 = gobj_read_str_attr(gobj, "edge_shape") === "elbow" ? "curved" : "elbow";
+	gobj_write_str_attr(gobj, "edge_shape", shape);
+	gobj_save_persistent_attrs(gobj, "edge_shape");
+	refresh_node_shape_buttons(gobj, priv.$container);
+	if (priv.gobj_nodes_tree) 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 = !gobj_read_bool_attr(gobj, "node_labels");
@@ -66477,6 +66668,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,
@@ -66554,6 +66750,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],

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -133,6 +133,7 @@ import {
     fold_root_group_key,
 } from "./treedb_fold_model.js";
 import {layout_tree, layout_radial, layout_compact} from "./treedb_layout.js";
+import {elbow_lane, elbow_points} from "./treedb_elbow.js";
 
 import {
     BaseLayout,
@@ -146,6 +147,7 @@ import {
     HTML,
     Toolbar,
     register,
+    Polyline,
 } from '@antv/g6';
 
 import {Circle as CircleGeometry, Rect as RectGeometry} from '@antv/g';
@@ -456,6 +458,8 @@ SDATA(data_type_t.DTP_LIST,     "loose_topics",         0,  "[]",   "Topics whos
 
 /*---------------- Node shape ----------------*/
 SDATA(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)"),
+SDATA(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"),
+SDATA(data_type_t.DTP_LIST,     "rowless_layouts",      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)"),
 SDATA(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"),
 SDATA(data_type_t.DTP_BOOLEAN,  "confirm_delete_node",  0,  true,   "Ask confirmation before deleting a node"),
 SDATA(data_type_t.DTP_BOOLEAN,  "confirm_unlink_edge",  0,  true,   "Ask confirmation before unlinking an edge"),
@@ -936,6 +940,8 @@ function register_layouts(gobj)
         register(ExtensionCategory.LAYOUT, 'manual', ManualLayout);
         register(ExtensionCategory.LAYOUT, 'treedb-tree', TreedbTreeLayout);
         register(ExtensionCategory.LAYOUT, 'treedb-compact', TreedbCompactLayout);
+        register(ExtensionCategory.EDGE, 'treedb-elbow-v', TreedbElbowV);
+        register(ExtensionCategory.EDGE, 'treedb-elbow-h', TreedbElbowH);
         register(ExtensionCategory.LAYOUT, 'treedb-radial', TreedbRadialLayout);
         register(ExtensionCategory.NODE, 'light', LightNode);
         register(ExtensionCategory.NODE, 'treedb-card', TreedbCard);
@@ -2036,9 +2042,17 @@ function layout_direction(gobj)
     return str_in_list(LR_LAYOUTS, gobj.priv.layout)? "LR" : "TB";
 }
 
+/*  A curve, or an elbow when the reader asked for one and the layout
+ *  has rows to run it between.  */
 function edge_type_for(gobj)
 {
-    return (layout_direction(gobj) === "LR")? "cubic-horizontal" : "cubic";
+    let lr = (layout_direction(gobj) === "LR");
+    let rowless = gobj_read_attr(gobj, "rowless_layouts") || [];
+    if(gobj_read_str_attr(gobj, "edge_shape") === "elbow" &&
+       !str_in_list(rowless, gobj.priv.layout)) {
+        return lr? "treedb-elbow-h" : "treedb-elbow-v";
+    }
+    return lr? "cubic-horizontal" : "cubic";
 }
 
 /************************************************************
@@ -4199,6 +4213,84 @@ class TreedbTreeLayout extends BaseLayout
     }
 }
 
+/************************************************************
+ *  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. An edge that
+ *  does not run forward goes round the two cards, and the edges
+ *  joining the same two cards take lanes (treedb_elbow.js).
+ ************************************************************/
+const ELBOW_RADIUS = 6;
+
+/*  The box of a card on the canvas, for a detour to go round it.  */
+function elbow_box(node)
+{
+    try {
+        let b = node.getShape('key').getBounds();
+        return {x1: b.min[0], y1: b.min[1], x2: b.max[0], y2: b.max[1]};
+    } catch(e) {
+        log_error(`elbow edge: no bounds for node ${node && node.id}: ${e}`);
+        let c = node.getCenter();
+        return {x1: c[0], y1: c[1], x2: c[0], y2: c[1]};
+    }
+}
+
+/*  The lane of an edge among the edges joining the same two cards,
+ *  either way round (treedb_elbow.js).  */
+function elbow_lane_of(edge)
+{
+    let graph = edge.context && edge.context.graph;
+    let s = edge.sourceNode && edge.sourceNode.id;
+    let t = edge.targetNode && edge.targetNode.id;
+    if(!graph || s === undefined || t === undefined || s === t) {
+        return 0;
+    }
+    try {
+        let ids = graph.getRelatedEdgesData(s)
+            .filter((d) => (d.source === s && d.target === t) ||
+                           (d.source === t && d.target === s))
+            .map((d) => d.id);
+        return elbow_lane(ids, edge.id);
+    } catch(e) {
+        log_error(`elbow edge ${edge.id}: cannot read the edges of ${s}: ${e}`);
+        return 0;
+    }
+}
+
+class TreedbElbowV extends Polyline
+{
+    getControlPoints(attributes) {
+        let [s, t] = this.getEndpoints(attributes, false);
+        return elbow_points(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode),
+                            elbow_lane_of(this), true);
+    }
+
+    getKeyPath(attributes) {
+        return super.getKeyPath(Object.assign({}, attributes,
+            {radius: attributes.radius || ELBOW_RADIUS}));
+    }
+}
+
+class TreedbElbowH extends Polyline
+{
+    getControlPoints(attributes) {
+        let [s, t] = this.getEndpoints(attributes, false);
+        return elbow_points(s, t, elbow_box(this.sourceNode), elbow_box(this.targetNode),
+                            elbow_lane_of(this), false);
+    }
+
+    getKeyPath(attributes) {
+        return super.getKeyPath(Object.assign({}, attributes,
+            {radius: attributes.radius || ELBOW_RADIUS}));
+    }
+}
+
 class TreedbCompactLayout extends BaseLayout
 {
     async execute(data, options) {
@@ -10875,6 +10967,25 @@ 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";
+    gobj_write_str_attr(gobj, "edge_shape", shape);
+    if(!priv.graph || !priv.graph_rendered) {
+        return 0;   /*  every edge is typed as it is drawn  */
+    }
+    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
@@ -11518,6 +11629,7 @@ function create_gclass(gclass_name)
             ["EV_SET_LOOSE_TOPICS",         ac_set_loose_topics,    null],
             ["EV_SET_NODE_MODE",            ac_set_node_mode,       null],
             ["EV_SET_NODE_LABELS",          ac_set_node_labels,     null],
+            ["EV_SET_EDGE_SHAPE",           ac_set_edge_shape,      null],
             ["EV_TOGGLE_NODE_MODE",         ac_toggle_node_mode,    null],
             ["EV_NODE_DBLCLICK",            ac_node_dblclick,       null],
             ["EV_CENTER",                   ac_center,              null],
@@ -11585,6 +11697,7 @@ function create_gclass(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",             event_flag_t.EVF_OUTPUT_EVENT],