@yuneta/gobj-ui 7.23.148 → 7.23.149

package/README.md

@@ -1425,6 +1425,19 @@ layouts by three 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.
 
+**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

package/dist/gobj-ui.cjs.js

@@ -45644,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);
@@ -45736,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",
@@ -56571,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"),
@@ -56822,6 +56828,8 @@ function register_layouts(gobj) {
 		(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);
@@ -57514,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
@@ -58989,6 +59000,38 @@ 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);
@@ -63432,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.
@@ -63991,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,
@@ -64112,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],
@@ -64188,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"),
@@ -64280,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);
@@ -64490,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",
@@ -64574,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
@@ -65122,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;
@@ -65815,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;
 }
 /************************************************************
@@ -66166,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;
 }
 /************************************************************
@@ -66238,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");
@@ -66482,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,
@@ -66559,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],

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;
@@ -45639,7 +45639,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 +45731,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 +56566,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 +56823,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 +57517,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 +58995,38 @@ 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.
+************************************************************/
+var ELBOW_RADIUS = 6;
+var TreedbElbowV = class extends 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 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 BaseLayout {
 	async execute(data, options) {
 		let input = treedb_layout_input(data);
@@ -63427,6 +63470,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 +64043,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 +64169,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 +64246,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 +64339,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 +64550,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 +64658,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 +65216,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 +65910,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 +66262,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 +66335,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 +66588,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 +66670,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.149",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_g6_nodes_tree.js

@@ -146,6 +146,7 @@ import {
     HTML,
     Toolbar,
     register,
+    Polyline,
 } from '@antv/g6';
 
 import {Circle as CircleGeometry, Rect as RectGeometry} from '@antv/g';
@@ -456,6 +457,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 +939,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 +2041,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 +4212,47 @@ 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.
+ ************************************************************/
+const ELBOW_RADIUS = 6;
+
+class TreedbElbowV extends 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}));
+    }
+}
+
+class TreedbElbowH extends 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}));
+    }
+}
+
 class TreedbCompactLayout extends BaseLayout
 {
     async execute(data, options) {
@@ -10875,6 +10929,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 +11591,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 +11659,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],

package/src/c_yui_treedb_graph.js

@@ -134,6 +134,7 @@ SDATA(data_type_t.DTP_LIST,     "hidden_topics",    sdata_flag_t.SDF_PERSIST, "[
 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"),
@@ -283,6 +284,7 @@ function mt_create(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
@@ -625,6 +627,22 @@ function node_shape_items(gobj, wide)
                 }
             }
         ],
+        /*  How the lines are drawn: curves, or the elbows of an org
+         *  chart. A toggle, so a pressed pill; disabled on a layout
+         *  with no rows, where the edges stay curved anyway.  */
+        ['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);
+                }
+            }
+        ],
     ];
 }
 
@@ -672,6 +690,17 @@ 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);
+    }
 }
 
 /************************************************************
@@ -1319,6 +1348,7 @@ function populate_nodes_tree_options(gobj)
             $layout_select.value = current_layout;
         }
         refresh_layout_stepper(gobj);
+        refresh_node_shape_buttons(gobj, $container);
     }
 
     // Restore persisted operation_mode selection
@@ -2614,6 +2644,7 @@ function ac_set_layout(gobj, event, kw, src)
         gobj
     );
     refresh_layout_stepper(gobj);
+    refresh_node_shape_buttons(gobj, priv.$container);
 
     return 0;
 }
@@ -3116,6 +3147,7 @@ function ac_layout_autoset(gobj, event, kw, src)
     }
     $select.value = layout;
     refresh_layout_stepper(gobj);
+    refresh_node_shape_buttons(gobj, $container);
     return 0;
 }
 
@@ -3213,6 +3245,20 @@ function ac_set_node_mode(gobj, event, kw, src)
     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;
@@ -3395,6 +3441,7 @@ function create_gclass(gclass_name)
             ["EV_COLLAPSE_LEVEL",           ac_fold_level_step,         null],
             ["EV_SET_NODE_MODE",            ac_set_node_mode,           null],
             ["EV_TOGGLE_NODE_LABELS",       ac_toggle_node_labels,      null],
+            ["EV_TOGGLE_EDGE_SHAPE",        ac_toggle_edge_shape,       null],
             ["EV_LAYOUT_AUTOSET",           ac_layout_autoset,          null],
             ["EV_CAMERA_CHANGED",           ac_camera_changed,          null],
             ["EV_LEGEND_TOPIC",             ac_legend_topic,            null],
@@ -3441,6 +3488,7 @@ function create_gclass(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/src/yui_icons.css

@@ -444,3 +444,9 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm11.3-387.3l104 104c4.6 4.6 5.9 11.5 3.5 17.4S366.5 256 360 256l-56 0 0 96c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-96-56 0c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.9 3.5-17.4l104-104c6.2-6.2 16.4-6.2 22.6 0z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm11.3-387.3l104 104c4.6 4.6 5.9 11.5 3.5 17.4S366.5 256 360 256l-56 0 0 96c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-96-56 0c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.9 3.5-17.4l104-104c6.2-6.2 16.4-6.2 22.6 0z'/%3E%3C/svg%3E");
 }
+
+/*  Elbow edges: boxes joined by right-angled lines (FontAwesome Free 7.3.1). */
+.yi-diagram-project::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 16 128 0 0-16c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-16-128 0 0 16c0 7.3-1.7 14.3-4.6 20.5l68.6 91.5 80 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-7.3 1.7-14.3 4.6-20.5L128 224 48 224c-26.5 0-48-21.5-48-48L0 80z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 16 128 0 0-16c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-16-128 0 0 16c0 7.3-1.7 14.3-4.6 20.5l68.6 91.5 80 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-7.3 1.7-14.3 4.6-20.5L128 224 48 224c-26.5 0-48-21.5-48-48L0 80z'/%3E%3C/svg%3E");
+}