@yuneta/gobj-ui 7.23.145 → 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

@@ -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-chevron-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-chevron-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],

package/dist/gobj-ui.es.js

@@ -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-chevron-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-chevron-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],

package/package.json

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

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],