@yuneta/gobj-ui 7.23.144 → 7.23.146

package/README.md

@@ -1664,6 +1664,15 @@ 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 ▼ 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

@@ -60735,6 +60735,23 @@ function auto_layout(gobj) {
 	return true;
 }
 /************************************************************
+*  Paint the minimap again from where the nodes are NOW.
+*
+*  It repaints off the graph's draw events, and a layout emits none:
+*  G6 moves the nodes with a SILENT draw. So after a layout change
+*  the minimap went on showing the arrangement before it.
+************************************************************/
+function repaint_minimap(gobj) {
+	let plugin = graph_get_plugin(gobj, "minimap");
+	if (!plugin || plugin.destroyed) return;
+	try {
+		plugin.renderMinimap();
+		plugin.renderMask();
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: repaint_minimap failed: ${e}`);
+	}
+}
+/************************************************************
 *  Show or hide the minimap, deciding by the SIZE of the graph.
 *
 *  A minimap of a graph that already fits on screen is decoration; one
@@ -62506,7 +62523,10 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: refresh_minimap failed: ${e}`);
 	}
 	await graph_draw(gobj);
-	if (changed || opts.relayout) await graph_layout(gobj);
+	if (changed || opts.relayout) {
+		await graph_layout(gobj);
+		repaint_minimap(gobj);
+	}
 	if (!(opts.restore && await restore_camera(gobj))) {
 		if (opts.fit) await graph_fit_readable(gobj);
 		else if (opts.keep && opts.keep_vp) await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
@@ -63272,15 +63292,38 @@ function ac_fullscreen(gobj, event, kw, src) {
 }
 /************************************************************
 *  Layout change
+*
+*  A new layout moves EVERY node, so the camera cannot stay on the
+*  coordinates it had: it would look at empty grid where the old
+*  arrangement was. It goes through the reconcile instead, which
+*  holds the node the reader was looking at on the same pixel (the
+*  zoom is kept) and fits only if nothing is left in view.
 ************************************************************/
 function ac_set_layout$1(gobj, event, kw, src) {
-	gobj.priv;
+	let priv = gobj.priv;
+	let graph = priv.graph;
 	let layout = select_layout(gobj, kw.layout);
+	priv._layout_asked = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout");
 	apply_layout_direction(gobj);
-	graph_set_layout(gobj, layout).then(() => {
+	let done = () => {
 		configure_behaviour(gobj);
 		update_toolbar(gobj);
-	});
+	};
+	if (!priv._fold_model || !graph || !graph.rendered) {
+		graph_set_layout(gobj, layout).then(() => {
+			repaint_minimap(gobj);
+			done();
+		});
+		return 0;
+	}
+	let keep = camera_anchor_node(gobj);
+	let vp = keep ? yui_graph_viewport_of(graph, keep) : null;
+	graph.setLayout(layout);
+	reconcile_fold(gobj, {
+		relayout: true,
+		keep,
+		keep_vp: vp
+	}).then(done);
 	return 0;
 }
 /************************************************************
@@ -64442,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");
@@ -64479,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-chevron-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-chevron-down", "next layout", 1)]
+		],
 		[
 			"span",
 			{
@@ -64825,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;
@@ -65517,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;
 }
 /************************************************************
@@ -65849,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;
 }
 /************************************************************
@@ -66125,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,
@@ -66229,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],

package/dist/gobj-ui.es.js

@@ -60730,6 +60730,23 @@ function auto_layout(gobj) {
 	return true;
 }
 /************************************************************
+*  Paint the minimap again from where the nodes are NOW.
+*
+*  It repaints off the graph's draw events, and a layout emits none:
+*  G6 moves the nodes with a SILENT draw. So after a layout change
+*  the minimap went on showing the arrangement before it.
+************************************************************/
+function repaint_minimap(gobj) {
+	let plugin = graph_get_plugin(gobj, "minimap");
+	if (!plugin || plugin.destroyed) return;
+	try {
+		plugin.renderMinimap();
+		plugin.renderMask();
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: repaint_minimap failed: ${e}`);
+	}
+}
+/************************************************************
 *  Show or hide the minimap, deciding by the SIZE of the graph.
 *
 *  A minimap of a graph that already fits on screen is decoration; one
@@ -62501,7 +62518,10 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 		log_error(`${gobj_short_name(gobj)}: refresh_minimap failed: ${e}`);
 	}
 	await graph_draw(gobj);
-	if (changed || opts.relayout) await graph_layout(gobj);
+	if (changed || opts.relayout) {
+		await graph_layout(gobj);
+		repaint_minimap(gobj);
+	}
 	if (!(opts.restore && await restore_camera(gobj))) {
 		if (opts.fit) await graph_fit_readable(gobj);
 		else if (opts.keep && opts.keep_vp) await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
@@ -63267,15 +63287,38 @@ function ac_fullscreen(gobj, event, kw, src) {
 }
 /************************************************************
 *  Layout change
+*
+*  A new layout moves EVERY node, so the camera cannot stay on the
+*  coordinates it had: it would look at empty grid where the old
+*  arrangement was. It goes through the reconcile instead, which
+*  holds the node the reader was looking at on the same pixel (the
+*  zoom is kept) and fits only if nothing is left in view.
 ************************************************************/
 function ac_set_layout$1(gobj, event, kw, src) {
-	gobj.priv;
+	let priv = gobj.priv;
+	let graph = priv.graph;
 	let layout = select_layout(gobj, kw.layout);
+	priv._layout_asked = gobj_read_str_attr(gobj, "layout");
 	apply_layout_direction(gobj);
-	graph_set_layout(gobj, layout).then(() => {
+	let done = () => {
 		configure_behaviour(gobj);
 		update_toolbar(gobj);
-	});
+	};
+	if (!priv._fold_model || !graph || !graph.rendered) {
+		graph_set_layout(gobj, layout).then(() => {
+			repaint_minimap(gobj);
+			done();
+		});
+		return 0;
+	}
+	let keep = camera_anchor_node(gobj);
+	let vp = keep ? yui_graph_viewport_of(graph, keep) : null;
+	graph.setLayout(layout);
+	reconcile_fold(gobj, {
+		relayout: true,
+		keep,
+		keep_vp: vp
+	}).then(done);
 	return 0;
 }
 /************************************************************
@@ -64437,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");
@@ -64474,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-chevron-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-chevron-down", "next layout", 1)]
+		],
 		[
 			"span",
 			{
@@ -64820,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;
@@ -65512,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;
 }
 /************************************************************
@@ -65844,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;
 }
 /************************************************************
@@ -66120,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,
@@ -66224,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],

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -7124,6 +7124,27 @@ function auto_layout(gobj)
     return true;
 }
 
+/************************************************************
+ *  Paint the minimap again from where the nodes are NOW.
+ *
+ *  It repaints off the graph's draw events, and a layout emits none:
+ *  G6 moves the nodes with a SILENT draw. So after a layout change
+ *  the minimap went on showing the arrangement before it.
+ ************************************************************/
+function repaint_minimap(gobj)
+{
+    let plugin = graph_get_plugin(gobj, "minimap");
+    if(!plugin || plugin.destroyed) {
+        return;
+    }
+    try {
+        plugin.renderMinimap();
+        plugin.renderMask();
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: repaint_minimap failed: ${e}`);
+    }
+}
+
 /************************************************************
  *  Show or hide the minimap, deciding by the SIZE of the graph.
  *
@@ -9772,6 +9793,7 @@ async function reconcile_fold_apply(gobj, opts, visible)
     await graph_draw(gobj);
     if(changed || opts.relayout) {
         await graph_layout(gobj);
+        repaint_minimap(gobj);
     }
 
     /*  THE VIEWPORT, and only here.
@@ -10924,18 +10946,44 @@ function ac_fullscreen(gobj, event, kw, src)
 
 /************************************************************
  *  Layout change
+ *
+ *  A new layout moves EVERY node, so the camera cannot stay on the
+ *  coordinates it had: it would look at empty grid where the old
+ *  arrangement was. It goes through the reconcile instead, which
+ *  holds the node the reader was looking at on the same pixel (the
+ *  zoom is kept) and fits only if nothing is left in view.
  ************************************************************/
 function ac_set_layout(gobj, event, kw, src)
 {
     let priv = gobj.priv;
+    let graph = priv.graph;
     let layout = select_layout(gobj, kw.layout);
+
+    /*  The reader chose it: a later load must not auto-lay it back.  */
+    priv._layout_asked = gobj_read_str_attr(gobj, "layout");
+
     /*  The ports turn with the reading direction, before the lines
      *  are laid out from them.  */
     apply_layout_direction(gobj);
-    graph_set_layout(gobj, layout).then(() => {
+
+    let done = () => {
         configure_behaviour(gobj);
         update_toolbar(gobj);
-    });
+    };
+
+    if(!priv._fold_model || !graph || !graph.rendered) {
+        /*  No records yet: nothing on screen to hold still.  */
+        graph_set_layout(gobj, layout).then(() => {
+            repaint_minimap(gobj);
+            done();
+        });
+        return 0;
+    }
+
+    let keep = camera_anchor_node(gobj);
+    let vp = keep? yui_graph_viewport_of(graph, keep) : null;
+    graph.setLayout(layout);
+    reconcile_fold(gobj, {relayout: true, keep: keep, keep_vp: vp}).then(done);
 
     return 0;
 }

package/src/c_yui_treedb_graph.js

@@ -783,6 +783,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 +875,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-chevron-up', 'previous layout', -1),
+            layout_step_button(gobj, 'GRAPH_LAYOUT_NEXT', 'yi-chevron-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 +1315,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 +2610,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 +3112,7 @@ function ac_layout_autoset(gobj, event, kw, src)
         return 0;
     }
     $select.value = layout;
+    refresh_layout_stepper(gobj);
     return 0;
 }
 
@@ -3308,6 +3384,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 +3430,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],