@yuneta/gobj-ui 7.23.130 → 7.23.131

package/dist/gobj-ui.cjs.js

@@ -18318,6 +18318,7 @@ function get_node_category(d) {
 ***************************************************************/
 var LAYOUTS = {
 	"vertical": {
+		key: "vertical tree",
 		label: "Vertical",
 		orientation: "V",
 		compact: false,
@@ -18325,6 +18326,7 @@ var LAYOUTS = {
 		edge_type: "cubic-vertical"
 	},
 	"vertical-compact": {
+		key: "vertical tree compact",
 		label: "Vertical compact",
 		orientation: "V",
 		compact: true,
@@ -18332,6 +18334,7 @@ var LAYOUTS = {
 		edge_type: "cubic-vertical"
 	},
 	"horizontal": {
+		key: "horizontal tree",
 		label: "Horizontal",
 		orientation: "H",
 		compact: false,
@@ -18339,6 +18342,7 @@ var LAYOUTS = {
 		edge_type: "cubic-horizontal"
 	},
 	"horizontal-compact": {
+		key: "horizontal tree compact",
 		label: "Horizontal compact",
 		orientation: "H",
 		compact: true,
@@ -18346,6 +18350,7 @@ var LAYOUTS = {
 		edge_type: "cubic-horizontal"
 	},
 	"lanes-v": {
+		key: "lanes vertical",
 		label: "Lanes vertical",
 		orientation: "V",
 		compact: true,
@@ -18353,6 +18358,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"lanes-h": {
+		key: "lanes horizontal",
 		label: "Lanes horizontal",
 		orientation: "H",
 		compact: true,
@@ -18360,6 +18366,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"dagre-tb": {
+		key: "dagre top-down",
 		label: "Dagre (top → bottom)",
 		orientation: "V",
 		compact: true,
@@ -18372,6 +18379,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"dagre-lr": {
+		key: "dagre left-right",
 		label: "Dagre (left → right)",
 		orientation: "H",
 		compact: true,
@@ -18740,12 +18748,16 @@ function make_toolbar$1(gobj) {
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let options = [];
 	for (let key of Object.keys(LAYOUTS)) {
-		let opt_attrs = { value: key };
+		let i18n_key = LAYOUTS[key].key;
+		let opt_attrs = {
+			value: key,
+			"data-i18n": i18n_key
+		};
 		if (key === current_layout) opt_attrs.selected = "selected";
 		options.push([
 			"option",
 			opt_attrs,
-			LAYOUTS[key].label
+			(0, i18next.t)(i18n_key)
 		]);
 	}
 	let $wrap = (0, _yuneta_gobj_js.createElement2)([

package/dist/gobj-ui.es.js

@@ -18313,6 +18313,7 @@ function get_node_category(d) {
 ***************************************************************/
 var LAYOUTS = {
 	"vertical": {
+		key: "vertical tree",
 		label: "Vertical",
 		orientation: "V",
 		compact: false,
@@ -18320,6 +18321,7 @@ var LAYOUTS = {
 		edge_type: "cubic-vertical"
 	},
 	"vertical-compact": {
+		key: "vertical tree compact",
 		label: "Vertical compact",
 		orientation: "V",
 		compact: true,
@@ -18327,6 +18329,7 @@ var LAYOUTS = {
 		edge_type: "cubic-vertical"
 	},
 	"horizontal": {
+		key: "horizontal tree",
 		label: "Horizontal",
 		orientation: "H",
 		compact: false,
@@ -18334,6 +18337,7 @@ var LAYOUTS = {
 		edge_type: "cubic-horizontal"
 	},
 	"horizontal-compact": {
+		key: "horizontal tree compact",
 		label: "Horizontal compact",
 		orientation: "H",
 		compact: true,
@@ -18341,6 +18345,7 @@ var LAYOUTS = {
 		edge_type: "cubic-horizontal"
 	},
 	"lanes-v": {
+		key: "lanes vertical",
 		label: "Lanes vertical",
 		orientation: "V",
 		compact: true,
@@ -18348,6 +18353,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"lanes-h": {
+		key: "lanes horizontal",
 		label: "Lanes horizontal",
 		orientation: "H",
 		compact: true,
@@ -18355,6 +18361,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"dagre-tb": {
+		key: "dagre top-down",
 		label: "Dagre (top → bottom)",
 		orientation: "V",
 		compact: true,
@@ -18367,6 +18374,7 @@ var LAYOUTS = {
 		edge_type: "polyline"
 	},
 	"dagre-lr": {
+		key: "dagre left-right",
 		label: "Dagre (left → right)",
 		orientation: "H",
 		compact: true,
@@ -18735,12 +18743,16 @@ function make_toolbar$1(gobj) {
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let options = [];
 	for (let key of Object.keys(LAYOUTS)) {
-		let opt_attrs = { value: key };
+		let i18n_key = LAYOUTS[key].key;
+		let opt_attrs = {
+			value: key,
+			"data-i18n": i18n_key
+		};
 		if (key === current_layout) opt_attrs.selected = "selected";
 		options.push([
 			"option",
 			opt_attrs,
-			LAYOUTS[key].label
+			t(i18n_key)
 		]);
 	}
 	let $wrap = createElement2([

package/package.json

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

package/src/c_yui_gobj_tree_js.js

@@ -448,8 +448,16 @@ function get_node_category(d)
  *    g6_layout:   G6 layout config object applied to the graph
  *    edge_type:   matching G6 edge type
  ***************************************************************/
+/*  `key` is the i18n key of the layout and `label` its reference ENGLISH
+ *  wording -- the value a consumer's `en` bundle carries for that key.
+ *
+ *  The keys are SHARED with the JSON graph's own picker (`vertical tree`,
+ *  `dagre top-down`, `dagre left-right`): the two graphs sit side by side
+ *  in the same console, so the same layout must be called the same thing
+ *  in both -- the toolbar vocabulary rule, applied to a select.  */
 const LAYOUTS = {
     "vertical": {
+        key: "vertical tree",
         label: "Vertical",
         orientation: "V",
         compact: false,
@@ -457,6 +465,7 @@ const LAYOUTS = {
         edge_type: 'cubic-vertical',
     },
     "vertical-compact": {
+        key: "vertical tree compact",
         label: "Vertical compact",
         orientation: "V",
         compact: true,
@@ -464,6 +473,7 @@ const LAYOUTS = {
         edge_type: 'cubic-vertical',
     },
     "horizontal": {
+        key: "horizontal tree",
         label: "Horizontal",
         orientation: "H",
         compact: false,
@@ -471,6 +481,7 @@ const LAYOUTS = {
         edge_type: 'cubic-horizontal',
     },
     "horizontal-compact": {
+        key: "horizontal tree compact",
         label: "Horizontal compact",
         orientation: "H",
         compact: true,
@@ -478,6 +489,7 @@ const LAYOUTS = {
         edge_type: 'cubic-horizontal',
     },
     "lanes-v": {
+        key: "lanes vertical",
         label: "Lanes vertical",
         orientation: "V",
         compact: true,
@@ -485,6 +497,7 @@ const LAYOUTS = {
         edge_type: 'polyline',
     },
     "lanes-h": {
+        key: "lanes horizontal",
         label: "Lanes horizontal",
         orientation: "H",
         compact: true,
@@ -492,6 +505,7 @@ const LAYOUTS = {
         edge_type: 'polyline',
     },
     "dagre-tb": {
+        key: "dagre top-down",
         label: "Dagre (top → bottom)",
         orientation: "V",
         compact: true,
@@ -499,6 +513,7 @@ const LAYOUTS = {
         edge_type: 'polyline',
     },
     "dagre-lr": {
+        key: "dagre left-right",
         label: "Dagre (left → right)",
         orientation: "H",
         compact: true,
@@ -1015,13 +1030,20 @@ function make_toolbar(gobj)
     /*
      *  Layout selector
      */
+    /*  An <option> is text like any other, and it was the only text of
+     *  this window that stayed English: the labels were written into
+     *  LAYOUTS and put straight on the node. The KEY is the layout id --
+     *  the same choice the treedb graph makes for its own layouts -- and
+     *  `value` stays explicit, or a translated option would tell the FSM
+     *  to enter a layout called "Vertical compacto".  */
     let options = [];
     for(let key of Object.keys(LAYOUTS)) {
-        let opt_attrs = {value: key};
+        let i18n_key = LAYOUTS[key].key;
+        let opt_attrs = {value: key, 'data-i18n': i18n_key};
         if(key === current_layout) {
             opt_attrs.selected = "selected";
         }
-        options.push(['option', opt_attrs, LAYOUTS[key].label]);
+        options.push(['option', opt_attrs, t(i18n_key)]);
     }
 
     /*  `.select` on the WRAPPER and not on the control: Bulma styles

package/src/yui_dev.js

@@ -67,17 +67,25 @@ const TRAFFIC_TS_FIELDS = {
  *  label translated once at build time would come back in English at
  *  the first click.  */
 /*  ⚠️  The keys of this window are a BLIND SPOT for a consumer's
- *  `validate-locales`: the table below and the `mk_expand` / `mk_dir` /
- *  `mk_out` helpers pass their key as a VARIABLE, so a scan of `t("…")`
+ *  `validate-locales`: the table below and the `grp` / `mk_view` /
+ *  `mk_expand` / `mk_dir` / `mk_out` helpers pass their key as a
+ *  VARIABLE, and `OUT_TITLES` holds three more in a lookup table --
+ *  so they, so a scan of `t("…")`
  *  sees none of them and reports OK with the whole window in English --
  *  which is how it shipped in gui_agent and gui_treedb. The full set a
  *  consumer must define, kept here so it can be copied:
  *
- *      automata, creation, start / stop, subscriptions, i18n, traffic,
- *      no poll, output, window, console, both, view, detailed, expanded,
- *      name only, expand, schema, data, metadata, show, outgoing,
- *      incoming, errors, find, log, traces, developer, yuno monitor,
- *      copied, muted, unmute
+ *      automata, both, browser console only, clear,
+ *      clear captured traffic, compact, console, copied, copy,
+ *      copy visible traffic to clipboard, creation, data, detailed,
+ *      dev window and browser console, dev window only, developer,
+ *      errors, expand, expanded, filter events / payload, find,
+ *      hide the timers and the recurring traffic, i18n, incoming, log,
+ *      machine trace shape, metadata, mute this message, muted,
+ *      name only, no poll, outgoing, output, periodic, schema, show,
+ *      show this section in the expanded view, simple mach,
+ *      start / stop, subscriptions, traces, traffic, unmute, view,
+ *      window, yuno monitor
  *
  *  wattyzer and the yunovatios GUIs carry them; check a new consumer
  *  against this list, and confirm it by DUMPING the window.  */