@yuneta/gobj-ui 7.23.145 → 7.23.147

package/README.md

@@ -497,8 +497,10 @@ cloned toolbar cannot drift apart again. The vocabulary is the treedb graph's
 sprite and so cannot share the code, only the decisions): zoom in / zoom out, a
 live **zoom readout**, `yi-fit` for fit — the same corner brackets the sprite
 draws for `g6-icon-fit` — and the WRITTEN `1:1` for actual size, which is
-written in every editor that offers it and never drawn. Fold is the chevron
-pair, from the lazy tree viewer's own toolbar. The readout hangs off G6's
+written in every editor that offers it and never drawn. Fold is the
+double-chevron pair (`yi-angles-down` / `yi-angles-up`, `7.23.147`), the same
+as the lazy tree viewer's toolbar: not the single chevron of a node's handle,
+which opens ONE node. The readout hangs off G6's
 `aftertransform`, the one hook that also covers the wheel.
 
 Both graph toolbars are arranged the same way (`7.23.7`): the **global**
@@ -1664,6 +1666,18 @@ forwards them as `EV_SET_HIDDEN_TOPICS`, `EV_SET_MAIN_TOPIC`,
 `main topic`, `highlight topic`, `loose records`, `hidden topics`; `legend`
 is no longer used.
 
+**The layout select has a stepper beside it** (`7.23.146`): ↑ and ↓
+(`yi-arrow-up` / `yi-arrow-down` since `7.23.147`, a shafted arrow steps a
+sequence; the fold stepper's level buttons are tree boxes, `yi-square-minus`
+/ `yi-square-plus`) step to
+the layout before or after the current one, in the order the engine offers
+them (`layout_names`), without opening the list. Layouts are picked by trying
+them one after another, and a list closes on every pick. The stepper reads the
+layout the engine is USING (its `layout` attr, which `auto_layout` can set),
+not the persisted choice, and disables the button at each end of the list. A
+press is `EV_STEP_LAYOUT {step}` (internal), which sends `EV_SET_LAYOUT` with
+the neighbour. Consumer i18n keys: `previous layout`, `next layout`.
+
 **The main topic's chip is not a disabled button** (`7.23.88`): it cannot be
 hidden, so its body is a `div` wearing the `.button` skin — bold, at full
 strength, with a gold star — and not a toggle painted at Bulma's half

package/dist/gobj-ui.cjs.js

@@ -11305,13 +11305,13 @@ function yui_graph_camera_items(gobj, graph, wide) {
 	];
 }
 /************************************************************
-*   The fold pair: expand all, collapse all.  Chevrons, the
-*   open one rotated down — the same pair the lazy tree
-*   viewer's toolbar uses, and the same direction the
-*   per-node handles speak.
+*   The fold pair: expand all, collapse all.  Double chevrons,
+*   down and up -- the same pair the lazy tree viewer's toolbar
+*   uses. Not the single chevron of a node's handle: that opens
+*   ONE node, these act on all of them.
 ************************************************************/
 function yui_graph_fold_items(gobj, wide) {
-	return [camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide, " transform: rotate(90deg);"), camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide)];
+	return [camera_button(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand all", wide), camera_button(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all", wide)];
 }
 /************************************************************
 *   The ANCHOR toggle: pick one element and every camera move
@@ -13851,7 +13851,7 @@ function make_toolbar$4(gobj) {
 			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
-	left_items.push(icon_button$1(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
+	left_items.push(icon_button$1(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all"));
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
 	let right_items = [view_mode_switch$1(gobj), icon_button$1(gobj, "yi-copy", "EV_COPY_ALL", "copy json")];
@@ -64418,7 +64418,7 @@ function fold_level_items(gobj, wide) {
 			style: "margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 		},
 		[
-			step_button("GRAPH_FOLD_COLLAPSE", "yi-chevron-right", "collapse one level", "EV_COLLAPSE_LEVEL"),
+			step_button("GRAPH_FOLD_COLLAPSE", "yi-square-minus", "collapse one level", "EV_COLLAPSE_LEVEL"),
 			[
 				"div",
 				{
@@ -64459,7 +64459,7 @@ function fold_level_items(gobj, wide) {
 					]
 				]
 			],
-			step_button("GRAPH_FOLD_EXPAND", "yi-chevron-down", "expand one level", "EV_EXPAND_LEVEL")
+			step_button("GRAPH_FOLD_EXPAND", "yi-square-plus", "expand one level", "EV_EXPAND_LEVEL")
 		]
 	]];
 }
@@ -64485,6 +64485,40 @@ function refresh_fold_level(gobj) {
 	if ($collapse) $collapse.disabled = !(levels && level > 1);
 	if ($expand) $expand.disabled = !(levels && level < levels);
 }
+function layout_step_button(gobj, cls, icon, key, step) {
+	return [
+		"button",
+		{
+			class: `${cls} button`,
+			type: "button",
+			style: {
+				height: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "wide"),
+				width: "2.5em"
+			},
+			disabled: true,
+			title: (0, i18next.t)(key),
+			"data-i18n-title": key,
+			"aria-label": (0, i18next.t)(key),
+			"data-i18n-aria-label": key
+		},
+		yui_toolbar_icon(icon),
+		{ click: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_STEP_LAYOUT", { step }, gobj);
+		} }
+	];
+}
+function refresh_layout_stepper(gobj) {
+	let priv = gobj.priv;
+	let $container = priv.$container;
+	if (!$container || !priv.gobj_nodes_tree) return;
+	let names = (0, _yuneta_gobj_js.gobj_read_attr)(priv.gobj_nodes_tree, "layout_names") || [];
+	let index = names.indexOf((0, _yuneta_gobj_js.gobj_read_str_attr)(priv.gobj_nodes_tree, "layout"));
+	let $prev = $container.querySelector(".GRAPH_LAYOUT_PREV");
+	let $next = $container.querySelector(".GRAPH_LAYOUT_NEXT");
+	if ($prev) $prev.disabled = !(index > 0);
+	if ($next) $next.disabled = !(index >= 0 && index < names.length - 1);
+}
 function make_toolbar(gobj) {
 	let priv = gobj.priv;
 	let modes = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "operation_modes");
@@ -64522,6 +64556,14 @@ function make_toolbar(gobj) {
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_LAYOUT", { layout: evt.target.value }, gobj);
 			} }
 		],
+		[
+			"div",
+			{
+				class: "GRAPH_LAYOUT_STEPPER buttons has-addons",
+				style: "margin:0 0 0 .25rem; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
+			},
+			[layout_step_button(gobj, "GRAPH_LAYOUT_PREV", "yi-arrow-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-arrow-down", "next layout", 1)]
+		],
 		[
 			"span",
 			{
@@ -64868,6 +64910,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);
 	}
 	let $operation_mode_select = $container.querySelector(".GRAPH_MODE_SELECT");
 	$operation_mode_select.value = priv.operation_mode;
@@ -65560,6 +65603,25 @@ function ac_set_layout(gobj, event, kw, src) {
 	let $layout_select = priv.$container.querySelector(".GRAPH_LAYOUT_SELECT");
 	$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);
+	return 0;
+}
+/************************************************************
+*  One press of the layout stepper (EV_STEP_LAYOUT {step}): the
+*  layout before or after the one the engine is using, in the order
+*  it offers them. The buttons are disabled at the ends, so a step
+*  out of the list is a sender that did not read them.
+************************************************************/
+function ac_step_layout(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let step = kw && kw.step || 0;
+	let names = (0, _yuneta_gobj_js.gobj_read_attr)(priv.gobj_nodes_tree, "layout_names") || [];
+	let index = names.indexOf((0, _yuneta_gobj_js.gobj_read_str_attr)(priv.gobj_nodes_tree, "layout")) + step;
+	if (step === 0 || index < 0 || index >= names.length) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: layout step ${step} is out of the list`);
+		return -1;
+	}
+	(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_LAYOUT", { layout: names[index] }, gobj);
 	return 0;
 }
 /************************************************************
@@ -65892,6 +65954,7 @@ function ac_layout_autoset(gobj, event, kw, src) {
 	let layout = kw && kw.layout || "";
 	if (!$select || !layout) return 0;
 	$select.value = layout;
+	refresh_layout_stepper(gobj);
 	return 0;
 }
 /************************************************************
@@ -66168,6 +66231,11 @@ function create_gclass$3(gclass_name) {
 			ac_set_layout,
 			null
 		],
+		[
+			"EV_STEP_LAYOUT",
+			ac_step_layout,
+			null
+		],
 		[
 			"EV_SET_OPERATION_MODE",
 			ac_set_operation_mode,
@@ -66272,6 +66340,7 @@ function create_gclass$3(gclass_name) {
 		["EV_RUN_NODE", 0],
 		["EV_CLOSE_WINDOW", 0],
 		["EV_SET_LAYOUT", 0],
+		["EV_STEP_LAYOUT", 0],
 		["EV_SET_OPERATION_MODE", 0],
 		["EV_SET_FOCUS_TOPIC", 0],
 		["EV_FIND_NODES", 0],
@@ -69800,7 +69869,7 @@ function version_banner(gobj, topic) {
 				[[
 					"span",
 					{ class: "icon" },
-					[["i", { class: "yi-chevron-up" }]]
+					[["i", { class: "yi-circle-up" }]]
 				], [
 					"span",
 					{ i18n: "raise" },

package/dist/gobj-ui.es.js

@@ -11300,13 +11300,13 @@ function yui_graph_camera_items(gobj, graph, wide) {
 	];
 }
 /************************************************************
-*   The fold pair: expand all, collapse all.  Chevrons, the
-*   open one rotated down — the same pair the lazy tree
-*   viewer's toolbar uses, and the same direction the
-*   per-node handles speak.
+*   The fold pair: expand all, collapse all.  Double chevrons,
+*   down and up -- the same pair the lazy tree viewer's toolbar
+*   uses. Not the single chevron of a node's handle: that opens
+*   ONE node, these act on all of them.
 ************************************************************/
 function yui_graph_fold_items(gobj, wide) {
-	return [camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide, " transform: rotate(90deg);"), camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide)];
+	return [camera_button(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand all", wide), camera_button(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all", wide)];
 }
 /************************************************************
 *   The ANCHOR toggle: pick one element and every camera move
@@ -13846,7 +13846,7 @@ function make_toolbar$4(gobj) {
 			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
-	left_items.push(icon_button$1(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
+	left_items.push(icon_button$1(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all"));
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
 	let right_items = [view_mode_switch$1(gobj), icon_button$1(gobj, "yi-copy", "EV_COPY_ALL", "copy json")];
@@ -64413,7 +64413,7 @@ function fold_level_items(gobj, wide) {
 			style: "margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 		},
 		[
-			step_button("GRAPH_FOLD_COLLAPSE", "yi-chevron-right", "collapse one level", "EV_COLLAPSE_LEVEL"),
+			step_button("GRAPH_FOLD_COLLAPSE", "yi-square-minus", "collapse one level", "EV_COLLAPSE_LEVEL"),
 			[
 				"div",
 				{
@@ -64454,7 +64454,7 @@ function fold_level_items(gobj, wide) {
 					]
 				]
 			],
-			step_button("GRAPH_FOLD_EXPAND", "yi-chevron-down", "expand one level", "EV_EXPAND_LEVEL")
+			step_button("GRAPH_FOLD_EXPAND", "yi-square-plus", "expand one level", "EV_EXPAND_LEVEL")
 		]
 	]];
 }
@@ -64480,6 +64480,40 @@ function refresh_fold_level(gobj) {
 	if ($collapse) $collapse.disabled = !(levels && level > 1);
 	if ($expand) $expand.disabled = !(levels && level < levels);
 }
+function layout_step_button(gobj, cls, icon, key, step) {
+	return [
+		"button",
+		{
+			class: `${cls} button`,
+			type: "button",
+			style: {
+				height: gobj_read_str_attr(gobj, "wide"),
+				width: "2.5em"
+			},
+			disabled: true,
+			title: t(key),
+			"data-i18n-title": key,
+			"aria-label": t(key),
+			"data-i18n-aria-label": key
+		},
+		yui_toolbar_icon(icon),
+		{ click: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, "EV_STEP_LAYOUT", { step }, gobj);
+		} }
+	];
+}
+function refresh_layout_stepper(gobj) {
+	let priv = gobj.priv;
+	let $container = priv.$container;
+	if (!$container || !priv.gobj_nodes_tree) return;
+	let names = gobj_read_attr(priv.gobj_nodes_tree, "layout_names") || [];
+	let index = names.indexOf(gobj_read_str_attr(priv.gobj_nodes_tree, "layout"));
+	let $prev = $container.querySelector(".GRAPH_LAYOUT_PREV");
+	let $next = $container.querySelector(".GRAPH_LAYOUT_NEXT");
+	if ($prev) $prev.disabled = !(index > 0);
+	if ($next) $next.disabled = !(index >= 0 && index < names.length - 1);
+}
 function make_toolbar(gobj) {
 	let priv = gobj.priv;
 	let modes = gobj_read_attr(gobj, "operation_modes");
@@ -64517,6 +64551,14 @@ function make_toolbar(gobj) {
 				gobj_send_event(gobj, "EV_SET_LAYOUT", { layout: evt.target.value }, gobj);
 			} }
 		],
+		[
+			"div",
+			{
+				class: "GRAPH_LAYOUT_STEPPER buttons has-addons",
+				style: "margin:0 0 0 .25rem; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
+			},
+			[layout_step_button(gobj, "GRAPH_LAYOUT_PREV", "yi-arrow-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-arrow-down", "next layout", 1)]
+		],
 		[
 			"span",
 			{
@@ -64863,6 +64905,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);
 	}
 	let $operation_mode_select = $container.querySelector(".GRAPH_MODE_SELECT");
 	$operation_mode_select.value = priv.operation_mode;
@@ -65555,6 +65598,25 @@ function ac_set_layout(gobj, event, kw, src) {
 	let $layout_select = priv.$container.querySelector(".GRAPH_LAYOUT_SELECT");
 	$layout_select.value = priv.layout;
 	gobj_send_event(priv.gobj_nodes_tree, "EV_SET_LAYOUT", { layout }, gobj);
+	refresh_layout_stepper(gobj);
+	return 0;
+}
+/************************************************************
+*  One press of the layout stepper (EV_STEP_LAYOUT {step}): the
+*  layout before or after the one the engine is using, in the order
+*  it offers them. The buttons are disabled at the ends, so a step
+*  out of the list is a sender that did not read them.
+************************************************************/
+function ac_step_layout(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let step = kw && kw.step || 0;
+	let names = gobj_read_attr(priv.gobj_nodes_tree, "layout_names") || [];
+	let index = names.indexOf(gobj_read_str_attr(priv.gobj_nodes_tree, "layout")) + step;
+	if (step === 0 || index < 0 || index >= names.length) {
+		log_error(`${gobj_short_name(gobj)}: layout step ${step} is out of the list`);
+		return -1;
+	}
+	gobj_send_event(gobj, "EV_SET_LAYOUT", { layout: names[index] }, gobj);
 	return 0;
 }
 /************************************************************
@@ -65887,6 +65949,7 @@ function ac_layout_autoset(gobj, event, kw, src) {
 	let layout = kw && kw.layout || "";
 	if (!$select || !layout) return 0;
 	$select.value = layout;
+	refresh_layout_stepper(gobj);
 	return 0;
 }
 /************************************************************
@@ -66163,6 +66226,11 @@ function create_gclass$3(gclass_name) {
 			ac_set_layout,
 			null
 		],
+		[
+			"EV_STEP_LAYOUT",
+			ac_step_layout,
+			null
+		],
 		[
 			"EV_SET_OPERATION_MODE",
 			ac_set_operation_mode,
@@ -66267,6 +66335,7 @@ function create_gclass$3(gclass_name) {
 		["EV_RUN_NODE", 0],
 		["EV_CLOSE_WINDOW", 0],
 		["EV_SET_LAYOUT", 0],
+		["EV_STEP_LAYOUT", 0],
 		["EV_SET_OPERATION_MODE", 0],
 		["EV_SET_FOCUS_TOPIC", 0],
 		["EV_FIND_NODES", 0],
@@ -69795,7 +69864,7 @@ function version_banner(gobj, topic) {
 				[[
 					"span",
 					{ class: "icon" },
-					[["i", { class: "yi-chevron-up" }]]
+					[["i", { class: "yi-circle-up" }]]
 				], [
 					"span",
 					{ i18n: "raise" },

package/package.json

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

package/src/c_yui_json.css

@@ -155,13 +155,6 @@
     transform: rotate(90deg);
 }
 
-/*  "Expand all" reuses the chevron (the only one available) rotated to point
- *  DOWN — the open state — while "collapse all" keeps it pointing right (the
- *  closed state), mirroring the per-node toggle. */
-.C_YUI_JSON .EV_EXPAND_ALL i {
-    transform: rotate(90deg);
-}
-
 .C_YUI_JSON .JSON_TOGGLE_REMOTE i {
     font-size: 0.8em;
     color: var(--bulma-link-on-scheme, var(--bulma-link, #3273dc));

package/src/c_yui_json.js

@@ -399,8 +399,8 @@ function make_toolbar(gobj)
      *  place both graphs put theirs.  It opens the whole document; the
      *  per-row toggles live in the rows.  */
     left_items.push(
-        icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL",   "expand loaded"),
-        icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all")
+        icon_button(gobj, "yi-angles-down", "EV_EXPAND_ALL",   "expand loaded"),
+        icon_button(gobj, "yi-angles-up",   "EV_COLLAPSE_ALL", "collapse all")
     );
 
     attach_clear($search_control, $search_input);

package/src/c_yui_schema_editor.js

@@ -1264,7 +1264,7 @@ function version_banner(gobj, topic)
                         title: t("raise the version"), "aria-label": t("raise the version"),
                         "data-i18n-title": "raise the version",
                         "data-i18n-aria-label": "raise the version"}, [
-                ["span", {class: "icon"}, [["i", {class: "yi-chevron-up"}]]],
+                ["span", {class: "icon"}, [["i", {class: "yi-circle-up"}]]],
                 ["span", {i18n: "raise"}, t("raise")]
             ]]
         ]]

package/src/c_yui_treedb_graph.js

@@ -716,8 +716,9 @@ function fold_level_items(gobj, wide)
     return [
         ['div', {class: 'GRAPH_FOLD_STEPPER buttons has-addons',
                  style: 'margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;'}, [
-            /*  The same two chevrons the pills speak: `▸` folded, `▾` open.  */
-            step_button('GRAPH_FOLD_COLLAPSE', 'yi-chevron-right',
+            /*  Tree boxes, not the pills' chevrons: a pill opens ONE hook,
+             *  this steps a LEVEL of the whole tree.  */
+            step_button('GRAPH_FOLD_COLLAPSE', 'yi-square-minus',
                         'collapse one level', 'EV_COLLAPSE_LEVEL'),
             /*  A `div` with the button skin, like the legend's main
              *  chip: a readout between two buttons of one group, not
@@ -740,7 +741,7 @@ function fold_level_items(gobj, wide)
                 ['span', {class: 'GRAPH_FOLD_COUNT',
                           style: 'font-variant-numeric:tabular-nums;'}, '–'],
             ]],
-            step_button('GRAPH_FOLD_EXPAND', 'yi-chevron-down',
+            step_button('GRAPH_FOLD_EXPAND', 'yi-square-plus',
                         'expand one level', 'EV_EXPAND_LEVEL'),
         ]],
     ];
@@ -783,6 +784,48 @@ function refresh_fold_level(gobj)
     }
 }
 
+/*  A button of the layout stepper: the layout before (`step` -1) or
+ *  after (+1) the current one, in the order the engine offers them.  */
+function layout_step_button(gobj, cls, icon, key, step)
+{
+    return ['button', {class: `${cls} button`, type: 'button',
+                       style: {height: gobj_read_str_attr(gobj, "wide"), width: '2.5em'},
+                       disabled: true,
+                       title: t(key), 'data-i18n-title': key,
+                       'aria-label': t(key), 'data-i18n-aria-label': key},
+        yui_toolbar_icon(icon),
+        {
+            click: (evt) => {
+                evt.stopPropagation();
+                gobj_send_event(gobj, "EV_STEP_LAYOUT", {step: step}, gobj);
+            }
+        }
+    ];
+}
+
+/*  Paint the layout stepper from the layout the engine is USING: it can
+ *  differ from the persisted choice (auto_layout picks one for a treedb
+ *  nobody arranged). The ends of the list disable their button.  */
+function refresh_layout_stepper(gobj)
+{
+    let priv = gobj.priv;
+    let $container = priv.$container;
+    if(!$container || !priv.gobj_nodes_tree) {
+        return;
+    }
+    let names = gobj_read_attr(priv.gobj_nodes_tree, "layout_names") || [];
+    let index = names.indexOf(gobj_read_str_attr(priv.gobj_nodes_tree, "layout"));
+
+    let $prev = $container.querySelector('.GRAPH_LAYOUT_PREV');
+    let $next = $container.querySelector('.GRAPH_LAYOUT_NEXT');
+    if($prev) {
+        $prev.disabled = !(index > 0);
+    }
+    if($next) {
+        $next.disabled = !(index >= 0 && index < names.length - 1);
+    }
+}
+
 function make_toolbar(gobj)
 {
     let priv = gobj.priv;
@@ -833,6 +876,15 @@ function make_toolbar(gobj)
                 gobj_send_event(gobj, "EV_SET_LAYOUT", {layout: evt.target.value}, gobj);
             }
         }],
+        /*  One step up or down the list without opening it: layouts are
+         *  picked by trying them one after another, and a list closes on
+         *  every pick. Born disabled, like the fold stepper: the options
+         *  arrive with the child (populate_nodes_tree_options).  */
+        ['div', {class: 'GRAPH_LAYOUT_STEPPER buttons has-addons',
+                 style: 'margin:0 0 0 .25rem; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;'}, [
+            layout_step_button(gobj, 'GRAPH_LAYOUT_PREV', 'yi-arrow-up', 'previous layout', -1),
+            layout_step_button(gobj, 'GRAPH_LAYOUT_NEXT', 'yi-arrow-down', 'next layout', 1),
+        ]],
 
         ['span', {class: 'GRAPH_MODE_LABEL is-hidden-mobile', style: 'padding-left:10px; padding-right:5px;', i18n: 'operation mode'}, 'operation mode'],
         ['div', {class: 'select'}, [
@@ -1264,6 +1316,7 @@ function populate_nodes_tree_options(gobj)
         if(current_layout) {
             $layout_select.value = current_layout;
         }
+        refresh_layout_stepper(gobj);
     }
 
     // Restore persisted operation_mode selection
@@ -2558,7 +2611,30 @@ function ac_set_layout(gobj, event, kw, src)
         },
         gobj
     );
+    refresh_layout_stepper(gobj);
+
+    return 0;
+}
+
+/************************************************************
+ *  One press of the layout stepper (EV_STEP_LAYOUT {step}): the
+ *  layout before or after the one the engine is using, in the order
+ *  it offers them. The buttons are disabled at the ends, so a step
+ *  out of the list is a sender that did not read them.
+ ************************************************************/
+function ac_step_layout(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+
+    let step = (kw && kw.step) || 0;
+    let names = gobj_read_attr(priv.gobj_nodes_tree, "layout_names") || [];
+    let index = names.indexOf(gobj_read_str_attr(priv.gobj_nodes_tree, "layout")) + step;
+    if(step === 0 || index < 0 || index >= names.length) {
+        log_error(`${gobj_short_name(gobj)}: layout step ${step} is out of the list`);
+        return -1;
+    }
 
+    gobj_send_event(gobj, "EV_SET_LAYOUT", {layout: names[index]}, gobj);
     return 0;
 }
 
@@ -3037,6 +3113,7 @@ function ac_layout_autoset(gobj, event, kw, src)
         return 0;
     }
     $select.value = layout;
+    refresh_layout_stepper(gobj);
     return 0;
 }
 
@@ -3308,6 +3385,7 @@ function create_gclass(gclass_name)
             ["EV_RUN_NODE",                 ac_run_node,                null],
             ["EV_CLOSE_WINDOW",             ac_close_window,            null],
             ["EV_SET_LAYOUT",               ac_set_layout,              null],
+            ["EV_STEP_LAYOUT",              ac_step_layout,             null],
             ["EV_SET_OPERATION_MODE",       ac_set_operation_mode,      null],
             ["EV_SET_FOCUS_TOPIC",          ac_set_focus_topic,         null],
             ["EV_FIND_NODES",               ac_find_nodes,              null],
@@ -3353,6 +3431,7 @@ function create_gclass(gclass_name)
         ["EV_RUN_NODE",                 0],
         ["EV_CLOSE_WINDOW",             0],
         ["EV_SET_LAYOUT",               0],
+        ["EV_STEP_LAYOUT",              0],
         ["EV_SET_OPERATION_MODE",       0],
         ["EV_SET_FOCUS_TOPIC",          0],
         ["EV_FIND_NODES",               0],

package/src/yui_graph_camera.js

@@ -181,17 +181,16 @@ export function yui_graph_camera_items(gobj, graph, wide)
 }
 
 /************************************************************
- *   The fold pair: expand all, collapse all.  Chevrons, the
- *   open one rotated down — the same pair the lazy tree
- *   viewer's toolbar uses, and the same direction the
- *   per-node handles speak.
+ *   The fold pair: expand all, collapse all.  Double chevrons,
+ *   down and up -- the same pair the lazy tree viewer's toolbar
+ *   uses. Not the single chevron of a node's handle: that opens
+ *   ONE node, these act on all of them.
  ************************************************************/
 export function yui_graph_fold_items(gobj, wide)
 {
     return [
-        camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide,
-            ' transform: rotate(90deg);'),
-        camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide),
+        camera_button(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand all", wide),
+        camera_button(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all", wide),
     ];
 }
 

package/src/yui_icons.css

@@ -404,3 +404,43 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 64L480 160 352 256V192H64V128H352ZM160 256L32 352 160 448V384H448V320H160Z'/%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='M352 64L480 160 352 256V192H64V128H352ZM160 256L32 352 160 448V384H448V320H160Z'/%3E%3C/svg%3E");
 }
+
+/* --- One shape per meaning (FontAwesome Free 7.3.1, solid) ---
+ *  A chevron opens or closes ONE thing, or scrolls; a shafted arrow
+ *  steps through a sequence; a tree box steps one LEVEL of a tree;
+ *  a double chevron acts on ALL of it. */
+
+.yi-square-plus::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM200 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM200 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/svg%3E");
+}
+
+.yi-square-minus::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm72 200l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm72 200l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/%3E%3C/svg%3E");
+}
+
+.yi-angles-down::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 402.7 329.4 265.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-160 160zm160-352l-160 160c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 210.7 329.4 73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 402.7 329.4 265.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-160 160zm160-352l-160 160c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 210.7 329.4 73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3z'/%3E%3C/svg%3E");
+}
+
+.yi-angles-up::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 109.3 329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160zm160 352l-160-160c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 329.4 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 109.3 329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160zm160 352l-160-160c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 329.4 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3z'/%3E%3C/svg%3E");
+}
+
+.yi-arrow-up::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 105.4 105.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 105.4 105.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E");
+}
+
+.yi-arrow-down::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M169.4 502.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7 224 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 370.7-105.4-105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M169.4 502.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7 224 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 370.7-105.4-105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
+}
+
+.yi-circle-up::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='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");
+}