@yuneta/gobj-ui 7.23.148 → 7.23.150

package/README.md

@@ -1425,6 +1425,30 @@ 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`.
+
+Two cases are not a channel (`7.23.150`, `treedb_elbow.js`, pure and
+tested). An elbow that does not run **forward** — the target above its
+source or in the same row, which one edge of every reciprocal pair is —
+goes **round** the two cards instead of through them: a short run out of its
+port, along the outside of both, and in from the other port's own side. And
+the edges joining the **same two cards**, either way round, take **lanes**
+10px apart in the order they were made (0, +1, −1…), so a new one never
+moves the ones already drawn; a detour on a negative lane goes round the
+left. The detour clears the two cards it joins, not the others: a card of a
+third record standing in its way is crossed, as a curve would cross it.
+
 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

@@ -29630,6 +29630,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) {
@@ -45644,7 +45692,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 +45784,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 +56619,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 +56876,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 +57570,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 +59048,70 @@ 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. 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) {
+		(0, _yuneta_gobj_js.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) {
+		(0, _yuneta_gobj_js.log_error)(`elbow edge ${edge.id}: cannot read the edges of ${s}: ${e}`);
+		return 0;
+	}
+}
+var TreedbElbowV = class extends _antv_g6.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 _antv_g6.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 _antv_g6.BaseLayout {
 	async execute(data, options) {
 		let input = treedb_layout_input(data);
@@ -63432,6 +63555,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 +64128,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 +64254,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 +64331,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 +64424,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 +64635,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 +64743,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 +65301,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 +65995,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 +66347,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 +66420,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 +66673,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 +66755,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],