@yuneta/gobj-ui 7.23.11 → 7.23.13

package/README.md

@@ -884,13 +884,31 @@ gesture to give them: G6 binds panning and the band to the same plain drag, so
 one of the two has to stand aside. The edit toolbar carries a **selection
 mode** toggle (the dashed marquee, next to `+`): while it is on, a tap picks a
 card and a drag on the background draws the band, and panning is what stands
-aside. It is deliberately a button and not a heuristic — the toolbar says which
+aside. It looks **pressed** while it is on (`pressed_state`, an inverted
+neutral chip) rather than taking one of the palette's colours: each of those
+names a KIND of action, and `7.23.11` borrowed undo/redo's violet for it —
+which put the same colour on two neighbouring buttons for two different
+reasons, and carried the whole state change in the hairline of an outline
+glyph. It is deliberately a button and not a heuristic — the toolbar says which
 of the two the graph is listening for, and turning it off gives the camera
 back. It is not device-specific: the same button spares a desktop reader the
 key. Leaving edition turns it off, and it is not persisted.
 
 **New key for consumers: `selection mode`.**
 
+**The two selects of the toolbar speak the app's language** (`7.23.13`). They
+rendered their raw names — `reading`, `edition`, `dagre`, `manual` — in every
+language, because neither went through `t()` at all: not a missing key, a
+missing call. The label is translated and carries its own `data-i18n`, so it
+follows a language change; the option's `value` is now set EXPLICITLY, because
+an `<option>` with no value answers with its own text and a translated label
+would have sent `"Edición"` to the FSM as the mode to enter.
+
+**New keys for consumers: `reading`, `operation`, `writing`, `edition`,
+`manual`, `dagre`, `antv-dagre`, `d3-force`, `force-atlas2`.** A host that adds
+a layout of its own gets its name untranslated, which is what all of them got
+until now.
+
 ### Tabs opened at runtime, and the two decisions their url costs
 
 `yui_tab_routes.js`. A workspace whose tabs are opened by the operator —

package/dist/gobj-ui.cjs.js

@@ -20597,6 +20597,19 @@ function set_active_state($container, selector, set) {
 	if (set) addClasses($container, selector, "color_active_state");
 	else removeClasses($container, selector, "color_active_state");
 }
+/************************************************************
+*  Set or reset the 'pressed' state of a TOGGLE.
+*
+*  Not one of the colours above: each of those names a KIND of
+*  action (create, pending, history, destructive), and a toggle
+*  is not an action -- it is a state the control is IN. So it
+*  looks pressed instead of changing category, which also keeps
+*  it out of the way of a neighbour wearing the same hue.
+************************************************************/
+function set_pressed_state($container, selector, set) {
+	if (set) addClasses($container, selector, "pressed_state");
+	else removeClasses($container, selector, "pressed_state");
+}
 /**
 * Returns a smart stroke color in `rgba()` format based on:
 * - The given fill color (hex or rgb[a])
@@ -48317,7 +48330,7 @@ function configure_toolbar_edit(gobj) {
 				{
 					id: "g6-icon-select-mode",
 					value: "selection-mode",
-					className: "EV_TOGGLE_SELECTION_MODE" + (priv.selection_mode ? " color_active_state" : ""),
+					className: "EV_TOGGLE_SELECTION_MODE" + (priv.selection_mode ? " pressed_state" : ""),
 					title: (0, i18next.t)("selection mode")
 				},
 				{
@@ -49750,7 +49763,9 @@ function update_zoom_selection_button(gobj) {
 	else disableElements($container, ".EV_ZOOM_SELECTION");
 }
 /************************************************************
-*  The selection mode is a state, so it has to LOOK like one.
+*  The selection mode is a state, so it has to LOOK like one:
+*  a PRESSED toggle, not a button wearing one of the palette's
+*  action colours (see `pressed_state` in lib_graph.css).
 *
 *  Toggled on the element rather than re-rendered with the
 *  toolbar, for the same reason as the button above: a
@@ -49762,7 +49777,7 @@ function update_selection_mode_button(gobj) {
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
 	if (!$container) return;
 	if (!$container.querySelector(".EV_TOGGLE_SELECTION_MODE")) return;
-	set_active_state($container, ".EV_TOGGLE_SELECTION_MODE", priv.selection_mode);
+	set_pressed_state($container, ".EV_TOGGLE_SELECTION_MODE", priv.selection_mode);
 }
 /************************************************************
 *  Select a SET of nodes: what a marquee and a shift-click do.
@@ -53121,6 +53136,40 @@ function destroy_ui$1(gobj) {
 	}
 }
 /************************************************************
+*  The label of an option of the two selects of the toolbar.
+*
+*  Both of them used to render their RAW names -- `reading`,
+*  `edition`, `dagre`, `manual` -- in every language, because
+*  neither went through `t()` at all. Not a missing key: a
+*  missing call.
+*
+*  Written as one literal per case, and deliberately not as
+*  `t(name)`: a consumer's `validate-locales.mjs` reads
+*  LITERALS, so a variable key is invisible to it -- the app
+*  ships without the entry and nothing says so, because
+*  i18next answers an unknown key with the key itself, which
+*  is exactly the English word that was there before. The
+*  same reason the keys are listed in the README.
+*
+*  The default is what a host that adds a layout of its own
+*  gets: the name it chose, which is what all of them got
+*  until now.
+************************************************************/
+function option_label(name) {
+	switch (name) {
+		case "reading": return (0, i18next.t)("reading");
+		case "operation": return (0, i18next.t)("operation");
+		case "writing": return (0, i18next.t)("writing");
+		case "edition": return (0, i18next.t)("edition");
+		case "manual": return (0, i18next.t)("manual");
+		case "dagre": return (0, i18next.t)("dagre");
+		case "antv-dagre": return (0, i18next.t)("antv-dagre");
+		case "d3-force": return (0, i18next.t)("d3-force");
+		case "force-atlas2": return (0, i18next.t)("force-atlas2");
+		default: return name;
+	}
+}
+/************************************************************
 *
 ************************************************************/
 function make_toolbar(gobj) {
@@ -53163,8 +53212,11 @@ function make_toolbar(gobj) {
 				{ class: "GRAPH_MODE_SELECT" },
 				modes.map((item) => [
 					"option",
-					{},
-					item
+					{
+						value: item,
+						"data-i18n": item
+					},
+					option_label(item)
 				])
 			]],
 			{ change: (evt) => {
@@ -53503,7 +53555,8 @@ function populate_nodes_tree_options(gobj) {
 		for (let name of layout_names) {
 			let option = document.createElement("option");
 			option.value = name;
-			option.textContent = name;
+			option.setAttribute("data-i18n", name);
+			option.textContent = option_label(name);
 			$layout_select.appendChild(option);
 		}
 		let current_layout = (0, _yuneta_gobj_js.gobj_read_str_attr)(priv.gobj_nodes_tree, "layout");
@@ -63694,6 +63747,7 @@ exports.rolling_bounds = rolling_bounds;
 exports.safe_locale = safe_locale;
 exports.set_active_state = set_active_state;
 exports.set_cancel_state = set_cancel_state;
+exports.set_pressed_state = set_pressed_state;
 exports.set_submit_state = set_submit_state;
 exports.setup_dev = setup_dev;
 exports.setup_frontend_view = setup_frontend_view;

package/dist/gobj-ui.es.js

@@ -20584,6 +20584,19 @@ function set_active_state($container, selector, set) {
 	if (set) addClasses($container, selector, "color_active_state");
 	else removeClasses($container, selector, "color_active_state");
 }
+/************************************************************
+*  Set or reset the 'pressed' state of a TOGGLE.
+*
+*  Not one of the colours above: each of those names a KIND of
+*  action (create, pending, history, destructive), and a toggle
+*  is not an action -- it is a state the control is IN. So it
+*  looks pressed instead of changing category, which also keeps
+*  it out of the way of a neighbour wearing the same hue.
+************************************************************/
+function set_pressed_state($container, selector, set) {
+	if (set) addClasses($container, selector, "pressed_state");
+	else removeClasses($container, selector, "pressed_state");
+}
 /**
 * Returns a smart stroke color in `rgba()` format based on:
 * - The given fill color (hex or rgb[a])
@@ -48304,7 +48317,7 @@ function configure_toolbar_edit(gobj) {
 				{
 					id: "g6-icon-select-mode",
 					value: "selection-mode",
-					className: "EV_TOGGLE_SELECTION_MODE" + (priv.selection_mode ? " color_active_state" : ""),
+					className: "EV_TOGGLE_SELECTION_MODE" + (priv.selection_mode ? " pressed_state" : ""),
 					title: t("selection mode")
 				},
 				{
@@ -49737,7 +49750,9 @@ function update_zoom_selection_button(gobj) {
 	else disableElements($container, ".EV_ZOOM_SELECTION");
 }
 /************************************************************
-*  The selection mode is a state, so it has to LOOK like one.
+*  The selection mode is a state, so it has to LOOK like one:
+*  a PRESSED toggle, not a button wearing one of the palette's
+*  action colours (see `pressed_state` in lib_graph.css).
 *
 *  Toggled on the element rather than re-rendered with the
 *  toolbar, for the same reason as the button above: a
@@ -49749,7 +49764,7 @@ function update_selection_mode_button(gobj) {
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$container) return;
 	if (!$container.querySelector(".EV_TOGGLE_SELECTION_MODE")) return;
-	set_active_state($container, ".EV_TOGGLE_SELECTION_MODE", priv.selection_mode);
+	set_pressed_state($container, ".EV_TOGGLE_SELECTION_MODE", priv.selection_mode);
 }
 /************************************************************
 *  Select a SET of nodes: what a marquee and a shift-click do.
@@ -53108,6 +53123,40 @@ function destroy_ui$1(gobj) {
 	}
 }
 /************************************************************
+*  The label of an option of the two selects of the toolbar.
+*
+*  Both of them used to render their RAW names -- `reading`,
+*  `edition`, `dagre`, `manual` -- in every language, because
+*  neither went through `t()` at all. Not a missing key: a
+*  missing call.
+*
+*  Written as one literal per case, and deliberately not as
+*  `t(name)`: a consumer's `validate-locales.mjs` reads
+*  LITERALS, so a variable key is invisible to it -- the app
+*  ships without the entry and nothing says so, because
+*  i18next answers an unknown key with the key itself, which
+*  is exactly the English word that was there before. The
+*  same reason the keys are listed in the README.
+*
+*  The default is what a host that adds a layout of its own
+*  gets: the name it chose, which is what all of them got
+*  until now.
+************************************************************/
+function option_label(name) {
+	switch (name) {
+		case "reading": return t("reading");
+		case "operation": return t("operation");
+		case "writing": return t("writing");
+		case "edition": return t("edition");
+		case "manual": return t("manual");
+		case "dagre": return t("dagre");
+		case "antv-dagre": return t("antv-dagre");
+		case "d3-force": return t("d3-force");
+		case "force-atlas2": return t("force-atlas2");
+		default: return name;
+	}
+}
+/************************************************************
 *
 ************************************************************/
 function make_toolbar(gobj) {
@@ -53150,8 +53199,11 @@ function make_toolbar(gobj) {
 				{ class: "GRAPH_MODE_SELECT" },
 				modes.map((item) => [
 					"option",
-					{},
-					item
+					{
+						value: item,
+						"data-i18n": item
+					},
+					option_label(item)
 				])
 			]],
 			{ change: (evt) => {
@@ -53490,7 +53542,8 @@ function populate_nodes_tree_options(gobj) {
 		for (let name of layout_names) {
 			let option = document.createElement("option");
 			option.value = name;
-			option.textContent = name;
+			option.setAttribute("data-i18n", name);
+			option.textContent = option_label(name);
 			$layout_select.appendChild(option);
 		}
 		let current_layout = gobj_read_str_attr(priv.gobj_nodes_tree, "layout");
@@ -63623,6 +63676,6 @@ function setup_frontend_view(self) {
 	return win;
 }
 //#endregion
-export { EditControl, MarkerControl, YUI_PERIODS, YUI_PERIODS_DEFAULT, YUI_ROLLING, addClasses, apply_dev_traces, attach_clear, build_dev_panel, dev_window_was_open, disableElements, enableElements, epoch_to_local_input, epoch_to_ms, expose_view_container, fmt_epoch, getStrokeColor, infer_period, info_traffic, inject_svg_icons, is_current_period, iso_week, local_input_to_epoch, ms_to_epoch, period_bounds, period_bounds_epoch, period_label, period_name, period_shift, period_spec, period_start, refresh_clear, register_c_g6_nodes_tree, register_c_yui_form, register_c_yui_gobj_tree_js, register_c_yui_json, register_c_yui_json_graph, register_c_yui_map, register_c_yui_nav, register_c_yui_pager, register_c_yui_period, register_c_yui_schema_editor, register_c_yui_service_view, register_c_yui_shell, register_c_yui_treedb_graph, register_c_yui_treedb_schema, register_c_yui_treedb_topic_with_form, register_c_yui_treedb_topics, register_c_yui_uplot, register_c_yui_window, register_c_yui_window_manager, register_c_yui_wizard, removeChildElements, removeClasses, rolling_bounds, safe_locale, set_active_state, set_cancel_state, set_submit_state, setup_dev, setup_frontend_view, toggleClasses, yui_is_dark, yui_mount_service_view, yui_shell_close_drawer, yui_shell_close_dropdown, yui_shell_confirm_danger, yui_shell_confirm_ok, yui_shell_confirm_yesno, yui_shell_confirm_yesnocancel, yui_shell_navigate, yui_shell_open_drawer, yui_shell_overlay_dismissed, yui_shell_pop_escape, yui_shell_push_escape, yui_shell_refresh_avatars, yui_shell_register_event_handler, yui_shell_register_overlay, yui_shell_set_avatar_provider, yui_shell_set_connection_state, yui_shell_set_sub_routes, yui_shell_set_toolbar_item_badge, yui_shell_set_toolbar_item_icon, yui_shell_set_translator, yui_shell_show_error, yui_shell_show_info, yui_shell_show_modal, yui_shell_show_route_map, yui_shell_show_warning, yui_shell_toggle_drawer, yui_shell_unpark_route, yui_theme_now, yui_toolbar, yui_watch_theme };
+export { EditControl, MarkerControl, YUI_PERIODS, YUI_PERIODS_DEFAULT, YUI_ROLLING, addClasses, apply_dev_traces, attach_clear, build_dev_panel, dev_window_was_open, disableElements, enableElements, epoch_to_local_input, epoch_to_ms, expose_view_container, fmt_epoch, getStrokeColor, infer_period, info_traffic, inject_svg_icons, is_current_period, iso_week, local_input_to_epoch, ms_to_epoch, period_bounds, period_bounds_epoch, period_label, period_name, period_shift, period_spec, period_start, refresh_clear, register_c_g6_nodes_tree, register_c_yui_form, register_c_yui_gobj_tree_js, register_c_yui_json, register_c_yui_json_graph, register_c_yui_map, register_c_yui_nav, register_c_yui_pager, register_c_yui_period, register_c_yui_schema_editor, register_c_yui_service_view, register_c_yui_shell, register_c_yui_treedb_graph, register_c_yui_treedb_schema, register_c_yui_treedb_topic_with_form, register_c_yui_treedb_topics, register_c_yui_uplot, register_c_yui_window, register_c_yui_window_manager, register_c_yui_wizard, removeChildElements, removeClasses, rolling_bounds, safe_locale, set_active_state, set_cancel_state, set_pressed_state, set_submit_state, setup_dev, setup_frontend_view, toggleClasses, yui_is_dark, yui_mount_service_view, yui_shell_close_drawer, yui_shell_close_dropdown, yui_shell_confirm_danger, yui_shell_confirm_ok, yui_shell_confirm_yesno, yui_shell_confirm_yesnocancel, yui_shell_navigate, yui_shell_open_drawer, yui_shell_overlay_dismissed, yui_shell_pop_escape, yui_shell_push_escape, yui_shell_refresh_avatars, yui_shell_register_event_handler, yui_shell_register_overlay, yui_shell_set_avatar_provider, yui_shell_set_connection_state, yui_shell_set_sub_routes, yui_shell_set_toolbar_item_badge, yui_shell_set_toolbar_item_icon, yui_shell_set_translator, yui_shell_show_error, yui_shell_show_info, yui_shell_show_modal, yui_shell_show_route_map, yui_shell_show_warning, yui_shell_toggle_drawer, yui_shell_unpark_route, yui_theme_now, yui_toolbar, yui_watch_theme };
 
 //# sourceMappingURL=gobj-ui.es.js.map

package/index.js

@@ -114,7 +114,7 @@ export {
 /*
  *  Libraries and utilities
  */
-export { addClasses, removeClasses, toggleClasses, removeChildElements, disableElements, enableElements, set_submit_state, set_cancel_state, set_active_state, getStrokeColor } from "./src/lib_graph.js";
+export { addClasses, removeClasses, toggleClasses, removeChildElements, disableElements, enableElements, set_submit_state, set_cancel_state, set_active_state, set_pressed_state, getStrokeColor } from "./src/lib_graph.js";
 export { inject_svg_icons } from "./src/lib_icons.js";
 export { EditControl, MarkerControl } from "./src/lib_maplibre.js";
 export { yui_toolbar } from "./src/yui_toolbar.js";

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -79,6 +79,7 @@ import {
     set_submit_state,
     set_cancel_state,
     set_active_state,
+    set_pressed_state,
     getStrokeColor,
 } from "./lib_graph.js";
 
@@ -1340,7 +1341,7 @@ function configure_toolbar_edit(gobj)
                     {
                         id: 'g6-icon-select-mode', value: 'selection-mode',
                         className: 'EV_TOGGLE_SELECTION_MODE' +
-                            (priv.selection_mode? ' color_active_state' : ''),
+                            (priv.selection_mode? ' pressed_state' : ''),
                         title: t('selection mode')
                     },
                     { id: 'g6-icon-save', value: 'save', className: 'EV_SAVE_GRAPH',   title: t('save'), disabled: true },
@@ -3608,7 +3609,9 @@ function update_zoom_selection_button(gobj)
 }
 
 /************************************************************
- *  The selection mode is a state, so it has to LOOK like one.
+ *  The selection mode is a state, so it has to LOOK like one:
+ *  a PRESSED toggle, not a button wearing one of the palette's
+ *  action colours (see `pressed_state` in lib_graph.css).
  *
  *  Toggled on the element rather than re-rendered with the
  *  toolbar, for the same reason as the button above: a
@@ -3628,7 +3631,7 @@ function update_selection_mode_button(gobj)
         return;     /* no edit toolbar: not in edition, or folded away */
     }
 
-    set_active_state($container, ".EV_TOGGLE_SELECTION_MODE", priv.selection_mode);
+    set_pressed_state($container, ".EV_TOGGLE_SELECTION_MODE", priv.selection_mode);
 }
 
 /************************************************************

package/src/c_yui_treedb_graph.js

@@ -452,6 +452,56 @@ function destroy_ui(gobj)
     }
 }
 
+/************************************************************
+ *  The label of an option of the two selects of the toolbar.
+ *
+ *  Both of them used to render their RAW names -- `reading`,
+ *  `edition`, `dagre`, `manual` -- in every language, because
+ *  neither went through `t()` at all. Not a missing key: a
+ *  missing call.
+ *
+ *  Written as one literal per case, and deliberately not as
+ *  `t(name)`: a consumer's `validate-locales.mjs` reads
+ *  LITERALS, so a variable key is invisible to it -- the app
+ *  ships without the entry and nothing says so, because
+ *  i18next answers an unknown key with the key itself, which
+ *  is exactly the English word that was there before. The
+ *  same reason the keys are listed in the README.
+ *
+ *  The default is what a host that adds a layout of its own
+ *  gets: the name it chose, which is what all of them got
+ *  until now.
+ ************************************************************/
+function option_label(name)
+{
+    switch(name) {
+        /*  Operation modes (`operation_modes` attr).  */
+        case "reading":
+            return t("reading");
+        case "operation":
+            return t("operation");
+        case "writing":
+            return t("writing");
+        case "edition":
+            return t("edition");
+
+        /*  Layouts (`layout_names` of the G6 child).  */
+        case "manual":
+            return t("manual");
+        case "dagre":
+            return t("dagre");
+        case "antv-dagre":
+            return t("antv-dagre");
+        case "d3-force":
+            return t("d3-force");
+        case "force-atlas2":
+            return t("force-atlas2");
+
+        default:
+            return name;
+    }
+}
+
 /************************************************************
  *
  ************************************************************/
@@ -468,7 +518,14 @@ function make_toolbar(gobj)
          *  one that draws the create / delete / link affordances.  */
         modes = modes.filter(mode => mode !== "edition");
     }
-    let mode_options = modes.map(item => ['option', {}, item]);
+    /*  `value` EXPLICIT, and that is not decoration: an <option>
+     *  with no value attribute answers with its own TEXT, so the
+     *  moment the label is translated `evt.target.value` becomes
+     *  "Edición" and the mode the FSM is told to enter is a word
+     *  no `switch` of this gclass knows.  */
+    let mode_options = modes.map(item =>
+        ['option', {value: item, 'data-i18n': item}, option_label(item)]
+    );
 
     /*
      *  Left: layout and mode selectors
@@ -876,7 +933,12 @@ function populate_nodes_tree_options(gobj)
         for(let name of layout_names) {
             let option = document.createElement('option');
             option.value = name;
-            option.textContent = name;
+            /*  The key travels in the attribute so a language change
+             *  re-translates it: `refresh_language()` only touches a
+             *  node that carries its own key, and this select is built
+             *  once, after the child answers with its layouts.  */
+            option.setAttribute('data-i18n', name);
+            option.textContent = option_label(name);
             $layout_select.appendChild(option);
         }
         // Restore persisted layout selection

package/src/lib_graph.css

@@ -177,6 +177,32 @@
     background-color: var(--bulma-background, #f0f0f0);
 }
 
+/*
+ *  A TOGGLE that is on looks PRESSED, it does not take a colour from
+ *  the palette at the top of this file: each of those names a kind of
+ *  ACTION, and "the graph is listening for a selection" is not one --
+ *  borrowing undo/redo's violet for it put the same colour on two
+ *  neighbouring buttons for two different reasons.
+ *
+ *  Inverted neutral, and deliberately hue-free: it cannot be mistaken
+ *  for the hover tint declared just above (a much lighter wash of the
+ *  same surface), it reads at a glance even when the glyph is a thin
+ *  outline rather than a solid silhouette, and it says what it says
+ *  without a hue -- which is the same reason the palette above is
+ *  documented as colour-blind safe.
+ *
+ *  The `:hover` half is not decoration: without it, hovering a pressed
+ *  button would hand it back to the rule above (equal specificity,
+ *  declared earlier, so this one wins only where both match) and the
+ *  toggle would appear to switch off under the pointer.
+ */
+.g6-toolbar.g6-toolbar-large .g6-toolbar-item.pressed_state,
+.g6-toolbar.g6-toolbar-large .g6-toolbar-item.pressed_state:hover {
+    background-color: var(--bulma-text, #2e333d);
+    color: var(--bulma-background, #ffffff);
+    border-radius: 4px;
+}
+
 /*
  *  Touch: the context menu is a LIST OF COMMANDS, and G6 sizes its
  *  rows with `padding: 8px 12px` -- 34px, which is a mouse row. The

package/src/lib_graph.js

@@ -109,6 +109,24 @@ function set_active_state($container, selector, set)
     }
 }
 
+/************************************************************
+ *  Set or reset the 'pressed' state of a TOGGLE.
+ *
+ *  Not one of the colours above: each of those names a KIND of
+ *  action (create, pending, history, destructive), and a toggle
+ *  is not an action -- it is a state the control is IN. So it
+ *  looks pressed instead of changing category, which also keeps
+ *  it out of the way of a neighbour wearing the same hue.
+ ************************************************************/
+function set_pressed_state($container, selector, set)
+{
+    if(set) {
+        addClasses($container, selector, "pressed_state");
+    } else {
+        removeClasses($container, selector, "pressed_state");
+    }
+}
+
 /**
  * Returns a smart stroke color in `rgba()` format based on:
  * - The given fill color (hex or rgb[a])
@@ -187,5 +205,6 @@ export {
     set_submit_state,
     set_cancel_state,
     set_active_state,
+    set_pressed_state,
     getStrokeColor,
 };