@yuneta/gobj-ui 7.26.27 → 7.26.29

package/src/c_yui_treedb_topics.js

@@ -565,7 +565,7 @@ function show_load_error(gobj, message)
         $container.insertBefore($err, $container.firstChild);
     }
     let treedb = gobj_read_attr(gobj, "treedb_name") || "";
-    $err.textContent = (treedb ? `${treedb}: ` : "") + (message || "cannot load treedb");
+    $err.textContent = (treedb ? `${treedb}: ` : "") + (message || t("cannot load treedb"));
 }
 
 /************************************************************
@@ -1368,8 +1368,9 @@ function process_treedb_descs(gobj)
         );
 
         // TODO get icon from remote config
-        add_tab(gobj, gobj_topic_form, id, key, "yi-table");
-        add_topic_card(gobj, id, key, "yi-table", desc);
+        /*  `key` is a topic of the backend's schema: data  */
+        add_tab(gobj, gobj_topic_form, id, /* i18n: data */ key, "yi-table");
+        add_topic_card(gobj, id, /* i18n: data */ key, "yi-table", desc);
 
         gobj_start(gobj_topic_form);
     }
@@ -1390,7 +1391,7 @@ function process_treedb_descs(gobj)
         if(gobj.priv._pending_info) {
             let ti = gobj.priv._pending_info;
             gobj.priv._pending_info = null;
-            show_topic_info(gobj, ti);
+            show_topic_info(gobj, /* i18n: data */ ti);     // a topic name
         } else if(href && href.indexOf("?") >= 0) {
             gobj_send_event(gobj, "EV_SHOW", {href: href}, gobj);
         } else {
@@ -2075,7 +2076,7 @@ function open_json_viewer(gobj, opts)
             close_json_viewer(gobj);
             return;
         }
-        priv.json_modal = yui_shell_show_modal(shell, $box, {
+        priv.json_modal = yui_shell_show_modal(shell, /* i18n: data */ $box, {
             dialog:        true,
             logical_class: "TREEDB_JSON_SHEET",
             title_prefix: priv.treedb_name,
@@ -2223,8 +2224,7 @@ function answer_print_tranger_refused(gobj, path, answer)
         gobj_send_event(jv, "EV_SUBTREE_ERROR",
             Object.assign({path: path}, answer), gobj);
     } else {
-        yui_shell_show_error(yui_shell_of(gobj),
-            answer.i18n || answer.error, {t: t});
+        yui_shell_show_error(yui_shell_of(gobj), answer.i18n || answer.error, {t: t});
     }
 }
 
@@ -2274,7 +2274,7 @@ function request_print_tranger(gobj, path)
         }, gobj);
     if(ret) {
         log_error(ret);
-        answer_print_tranger_refused(gobj, path, {error: refusal_text(ret)});
+        answer_print_tranger_refused(gobj, path, {error: /* i18n: data */ refusal_text(ret)});
         return;
     }
     if(path) {
@@ -2386,7 +2386,7 @@ function ac_mt_command_answer(gobj, event, kw, src)
                     {path: path, error: comment || "print-tranger failed"}, gobj);
             } else {
                 yui_shell_show_error(yui_shell_of(gobj),
-                    comment || "print-tranger failed", {t: t});
+                    /* i18n: data */ comment || "print-tranger failed", {t: t});
             }
             return 0;
         }
@@ -2411,7 +2411,7 @@ function ac_mt_command_answer(gobj, event, kw, src)
         }
         if(result < 0) {
             yui_shell_show_error(yui_shell_of(gobj),
-                comment || "schema-file failed", {t: t});
+                /* i18n: data */ comment || "schema-file failed", {t: t});
             return 0;
         }
         gobj_send_event(jv, "EV_SET_JSON", {json: data}, gobj);
@@ -2459,9 +2459,9 @@ function ac_mt_command_answer(gobj, event, kw, src)
             /*  The schema couldn't load (not a treedb, no authz for it, backend
              *  down…). Show an inline banner in the view rather than a blocking
              *  app-modal that wedges the whole SPA behind an empty tab. */
-            show_load_error(gobj, t(comment));
+            show_load_error(gobj, t(/* i18n: data */ comment));
         } else {
-            yui_shell_show_error(yui_shell_of(gobj), comment, {t: t});
+            yui_shell_show_error(yui_shell_of(gobj), /* i18n: data */ comment, {t: t});
             /*  A refused write leaves the TABLE showing what the operator
              *  typed and the store holding what it had. That is tolerable
              *  for a form (it stays open on the values it failed with) and
@@ -2737,7 +2737,7 @@ function ac_show(gobj, event, kw, src)
  ************************************************************/
 function ac_show_topic_info(gobj, event, kw, src)
 {
-    show_topic_info(gobj, kw && kw.topic);
+    show_topic_info(gobj, /* i18n: data */ kw && kw.topic);    // a topic name
     return 0;
 }
 

package/src/c_yui_window.js

@@ -836,7 +836,7 @@ function close_window(gobj)
         return {state: "vetoed"};
     }
     const answer = yui_shell_confirm_yesnocancel(
-        yui_shell_of(gobj), kw_close.warning,
+        yui_shell_of(gobj), /* i18n: data */ kw_close.warning,
         {t: t, yes_label: "yes", no_label: "no", cancel_label: "cancel"}
     ).then(function(answer) {
         if(answer !== "yes") {
@@ -909,7 +909,7 @@ function set_max_icon(gobj, maximized)
     }
     let $btn = $container.querySelector('.wc-max');
     if($btn) {
-        let key = maximized ? 'restore' : 'maximize';
+        const key = maximized ? 'restore' : 'maximize';
         $btn.innerHTML = maximized ? WC_RESTORE : WC_MAX;
         $btn.setAttribute('title', t(key));
         $btn.setAttribute('data-i18n-title', key);

package/src/c_yui_window_manager.js

@@ -510,9 +510,12 @@ function ac_register_window(gobj, event, kw, src)
         label_items.push(['span', {class: 'yui-dock-label-prefix'},
             text_node(prefix)]);    // data, not markup
     }
+    /*  An FSM action: what it is given is the kw of EV_REGISTER_WINDOW,
+     *  which no reader can follow. `title_key` is the window's `title`,
+     *  a key its HOST chose when it created the window.  */
     if(title_key) {
         label_items.push(
-            ['span', {class: 'yui-dock-label-kind', i18n: title_key},
+            ['span', {class: 'yui-dock-label-kind', i18n: /* i18n: data */ title_key},
              kind_text || title_key]
         );
     }
@@ -532,7 +535,7 @@ function ac_register_window(gobj, event, kw, src)
     let $chip = createElement2(
         ['div', Object.assign(
             {class: 'yui-dock-chip', role: 'button', tabindex: '0', title: title},
-            (!prefix && title_key) ? {'data-i18n-title': title_key} : {}
+            (!prefix && title_key) ? {'data-i18n-title': /* i18n: data */ title_key} : {}
         ), [
             chip_lead(kw.icon),
             ['span', {class: 'yui-dock-label'}, label_items],

package/src/c_yui_wizard.js

@@ -75,6 +75,12 @@ SDATA(data_type_t.DTP_POINTER,  "$container",   0,  null,       "HTMLElement roo
 SDATA_END()
 ];
 
+/*  The default keys of the three buttons, which reach t() through the
+ *  attrs: published for a consumer's validate-locales, which asks the
+ *  app's locales for every key of an exported `*_I18N_KEYS` array. A
+ *  host that names its own buttons asks for its own keys besides.  */
+export const C_YUI_WIZARD_I18N_KEYS = ["confirm", "next", "back"];
+
 let PRIVATE_DATA = {
     steps:    null,
     idx:      0,
@@ -267,7 +273,8 @@ function render_chrome(gobj)
 
     $back.classList.toggle('is-hidden', !model.show_back);
 
-    $plabel.setAttribute('data-i18n', model.primary_label);
+    $plabel.setAttribute('data-i18n',
+        /* i18n: WIZARD_HELPERS_I18N_KEYS, C_YUI_WIZARD_I18N_KEYS */ model.primary_label);
     $plabel.textContent = t(model.primary_label);
     $primary.setAttribute('title', t(model.primary_label));
     $primary.setAttribute('data-i18n-title', model.primary_label);

package/src/form_json_field.js

@@ -64,6 +64,13 @@ function value_fits(value, shape)
     }
 }
 
+/*  The key parse_json_field() returns as data (its `error`), which the
+ *  form hands to t(): published for a consumer's validate-locales, which
+ *  asks the app's locales for every key of an exported `*_I18N_KEYS`
+ *  array. i18n_key_functions.test.js holds it to every `error:` this
+ *  module writes.  */
+export const FORM_JSON_FIELD_I18N_KEYS = ["invalid json"];
+
 /************************************************************
  *  Parse what a json field holds.
  *

package/src/g6_canvas_tab_order.js

@@ -0,0 +1,84 @@
+/***********************************************************************
+ *          g6_canvas_tab_order.js
+ *
+ *          The canvases of a G6 graph in the page's Tab order: the main
+ *          one in its place, the other layers out of it.
+ *
+ *          G6 stacks four canvases (background, main, label, transient)
+ *          and gives each of them `tabIndex = 1` (configCanvasDom, when it
+ *          builds the Canvas and again on a renderer change). A POSITIVE
+ *          tabindex goes before every control of the page: Tab from a
+ *          graph went to its other canvases, then to the top of the page
+ *          and through every control there, and only then to the graph's
+ *          own buttons. The main canvas -- the one G6 listens on, and the
+ *          one a view puts the keyboard on -- takes 0, so Tab goes from it
+ *          to the graph's toolbars and buttons in DOM order; the other
+ *          layers receive nothing (`pointer-events: none`) and take -1.
+ *
+ *          Every view that creates a G6 Graph calls
+ *          keep_canvas_tab_order() right after `new Graph()`: the order is
+ *          put right each time G6 writes the 1 -- once the canvas is built
+ *          (on the first render(), whichever function of the view calls
+ *          it), and after a renderer change. One place, so a view with
+ *          several render() calls cannot miss the one that builds the
+ *          canvas.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {
+    gobj_short_name,
+    log_error,
+} from "@yuneta/gobj-js";
+
+import {GraphEvent} from "@antv/g6";
+
+/************************************************************
+ *  Main canvas 0, every other layer -1. Returns 0, or -1 with
+ *  the cause logged.
+ ************************************************************/
+function set_canvas_tab_order(gobj, graph)
+{
+    let canvas = graph? graph.getCanvas() : null;
+
+    if(!canvas || typeof canvas.getLayers !== "function") {
+        log_error(`${gobj_short_name(gobj)}: no canvas to set the Tab order of`);
+        return -1;
+    }
+
+    let ret = 0;
+    let layers = canvas.getLayers() || {};
+    for(let name of Object.keys(layers)) {
+        let $el = null;
+        try {
+            $el = layers[name].getContextService().getDomElement();
+        } catch(e) {
+            $el = null;
+        }
+        if(!$el) {
+            log_error(`${gobj_short_name(gobj)}: canvas layer '${name}' has no element`);
+            ret = -1;
+            continue;
+        }
+        $el.tabIndex = (name === "main")? 0 : -1;
+    }
+    return ret;
+}
+
+/************************************************************
+ *  Keep the order for the life of `graph`: on every moment G6
+ *  writes its own.
+ ************************************************************/
+function keep_canvas_tab_order(gobj, graph)
+{
+    for(let ev of [GraphEvent.AFTER_CANVAS_INIT, GraphEvent.AFTER_RENDERER_CHANGE]) {
+        graph.on(ev, () => {
+            set_canvas_tab_order(gobj, graph);
+        });
+    }
+}
+
+export {
+    set_canvas_tab_order,
+    keep_canvas_tab_order,
+};

package/src/g6_canvas_tab_order.wiring.test.js

@@ -0,0 +1,232 @@
+/***********************************************************************
+ *          g6_canvas_tab_order.wiring.test.js
+ *
+ *      Every view that draws a G6 graph puts its canvases in the page's
+ *      Tab order the same way (g6_canvas_tab_order.js): the main canvas
+ *      0, the other layers -1 (REV-CLOUD V20.5 #2, and the four views
+ *      the second pass left out).
+ *
+ *      G6 stacks four canvases and gives each `tabIndex = 1`; a
+ *      positive tabindex goes before every control of the page, so Tab
+ *      from a graph went through its other canvases and the whole page
+ *      before it reached the graph's own buttons.
+ *
+ *      The real gclasses, on a G6 Graph double that does what G6 does
+ *      here: the FIRST render() builds the four canvases with
+ *      `tabIndex = 1` and says so with `aftercanvasinit`; a renderer
+ *      change writes the 1 again and says `afterrendererchange`.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeAll, beforeEach, vi} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+/*  The views watch their container; nothing resizes here.  */
+if(typeof globalThis.ResizeObserver === "undefined") {
+    globalThis.ResizeObserver = class {
+        observe() {
+        }
+        unobserve() {
+        }
+        disconnect() {
+        }
+    };
+}
+
+const graphs = vi.hoisted(() => []);
+vi.mock("@antv/g6", async (importOriginal) => {
+    const real = await importOriginal();
+    class FakeGraph {
+        constructor(options) {
+            this.options = options;
+            this.handlers = {};
+            this.layers = null;
+            graphs.push(this);
+            return new Proxy(this, {
+                get: (t, k) => (k in t) ? t[k] : (() => undefined),
+            });
+        }
+        container_el() {
+            const c = this.options.container;
+            return (typeof c === "string") ? document.getElementById(c) : c;
+        }
+        write_canvas_dom() {
+            for(const name of Object.keys(this.layers)) {
+                this.layers[name].el.tabIndex = 1;
+            }
+        }
+        render() {
+            if(!this.layers) {
+                const $c = this.container_el();
+                this.layers = {};
+                for(const name of ["background", "main", "label", "transient"]) {
+                    const el = document.createElement("canvas");
+                    el.setAttribute("data-layer", name);
+                    $c.appendChild(el);
+                    this.layers[name] = {
+                        el: el,
+                        getContextService: () => ({getDomElement: () => el}),
+                    };
+                }
+                this.write_canvas_dom();
+                this.emit(real.GraphEvent.AFTER_CANVAS_INIT, {canvas: this.getCanvas()});
+            }
+            return Promise.resolve();
+        }
+        setRenderer() {
+            this.write_canvas_dom();
+            this.emit(real.GraphEvent.AFTER_RENDERER_CHANGE, {});
+        }
+        getCanvas() {
+            return {
+                getLayers: () => this.layers,
+                getContainer: () => this.container_el(),
+            };
+        }
+        on(name, fn) {
+            (this.handlers[name] = this.handlers[name] || []).push(fn);
+        }
+        emit(name, ev) {
+            for(const fn of (this.handlers[name] || [])) {
+                fn(ev);
+            }
+        }
+        getZoom() {
+            return 1;
+        }
+        getData() {
+            return {nodes: [], edges: [], combos: []};
+        }
+        getNodeData() {
+            return [];
+        }
+        getEdgeData() {
+            return [];
+        }
+        getPlugins() {
+            return [];
+        }
+        getBehaviors() {
+            return [];
+        }
+        getOptions() {
+            return {behaviors: []};
+        }
+        draw() {
+            return Promise.resolve();
+        }
+        fitView() {
+            return Promise.resolve();
+        }
+        zoomTo() {
+            return Promise.resolve();
+        }
+        destroy() {
+        }
+    }
+    return {...real, Graph: FakeGraph};
+});
+
+const {
+    SDATA_END, gclass_create, gobj_start_up, gobj_create_yuno, gobj_create_pure_child,
+    gobj_start, gobj_read_attr, set_log_callback, register_c_timer,
+} = await import("@yuneta/gobj-js");
+const {register_c_yui_json_graph} = await import("./c_yui_json_graph.js");
+const {register_c_yui_gobj_tree_js} = await import("./c_yui_gobj_tree_js.js");
+const {register_c_yui_fsm_graph} = await import("./c_yui_fsm_graph.js");
+const {register_c_yui_treedb_schema} = await import("./c_yui_treedb_schema.js");
+const {register_c_g6_nodes_tree} = await import("./c_g6_nodes_tree.js");
+
+const logged = [];
+let yuno = null;
+
+beforeAll(async () => {
+    const i18next = (await import("i18next")).default;
+    await i18next.init({lng: "en", resources: {en: {translation: {}}}});
+    gobj_start_up(null, null, null, null, null, null, null);
+    set_log_callback((level, msg) => {
+        logged.push({level: String(level), msg: String(msg)});
+    });
+    register_c_timer();
+    register_c_yui_json_graph();
+    register_c_yui_gobj_tree_js();
+    register_c_yui_fsm_graph();
+    register_c_yui_treedb_schema();
+    register_c_g6_nodes_tree();
+    gclass_create("C_TEST_TAB_ORDER_HOST", [], [["ST_IDLE", []]], {}, 0,
+        [SDATA_END()], {}, 0, 0, 0, 0);
+    yuno = gobj_create_yuno("tab_order_yuno", "C_TEST_TAB_ORDER_HOST", {});
+});
+
+beforeEach(() => {
+    logged.length = 0;
+});
+
+const DESC = {topic_name: "users", cols: [
+    {id: "id", type: "string", flag: ["persistent"]},
+]};
+
+/*  Each view, with what it needs to render a first time.  */
+const VIEWS = {
+    C_YUI_JSON_GRAPH:   {json_data: {a: 1, b: [1, 2]}},
+    C_YUI_GOBJ_TREE_JS: {},
+    C_YUI_FSM_GRAPH:    {fsm: {
+        entry_state: "ST_IDLE",
+        states: [{name: "ST_IDLE"}, {name: "ST_BUSY"}],
+        rows: [
+            {event: "EV_GO",   cells: [{next_state: "ST_BUSY"}, null]},
+            {event: "EV_DONE", cells: [null, {next_state: "ST_IDLE"}]},
+        ],
+        published: [],
+        unreachable: [],
+    }},
+    C_YUI_TREEDB_SCHEMA: {descs: {users: DESC}},
+    C_G6_NODES_TREE:    {with_toolbar: false, operation_mode: "reading"},
+};
+
+let seq = 0;
+
+async function mount(gclass_name, attrs)
+{
+    const $container = document.createElement("div");
+    document.body.appendChild($container);
+    const n0 = graphs.length;
+    const view = gobj_create_pure_child(`tab_order_${++seq}`, gclass_name,
+        Object.assign({$container: $container}, attrs), yuno);
+    /*  Mounted as a host mounts it: a view that builds its own root
+     *  (json, gobj tree) is in the document before it starts, and
+     *  G6 finds its canvas mount there by id.  */
+    document.body.appendChild(gobj_read_attr(view, "$container"));
+    gobj_start(view);
+    /*  render() resolves on its own time, as G6's does.  */
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    return {view, $container, graph: graphs.length > n0 ? graphs[graphs.length - 1] : null};
+}
+
+function tab_order(graph)
+{
+    const order = {};
+    for(const [name, layer] of Object.entries(graph.layers || {})) {
+        order[name] = layer.el.tabIndex;
+    }
+    return order;
+}
+
+describe("every G6 view: the main canvas in the Tab order, the other layers out", () => {
+    for(const [gclass_name, attrs] of Object.entries(VIEWS)) {
+        test(`${gclass_name}: after its first render, and after a renderer change`, async () => {
+            const {graph} = await mount(gclass_name, attrs);
+            expect(graph, `${gclass_name} built a graph`).toBeTruthy();
+            expect(graph.layers, `${gclass_name} rendered when it started`).toBeTruthy();
+            expect(tab_order(graph)).toEqual({background: -1, main: 0, label: -1, transient: -1});
+
+            graph.setRenderer();
+            expect(tab_order(graph)).toEqual({background: -1, main: 0, label: -1, transient: -1});
+
+            expect(logged.filter((l) => l.level === "error").map((l) => l.msg)).toEqual([]);
+        });
+    }
+});