@yuneta/gobj-ui 7.23.3 → 7.23.5

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -24,6 +24,7 @@ import {
     sdata_flag_t,
     gclass_flag_t,
     gclass_create,
+    gclass_find_by_name,
     log_error,
     log_warning,
     trace_msg,
@@ -7633,6 +7634,12 @@ function create_gclass(gclass_name)
  ***************************************************************************/
 function register_c_g6_nodes_tree()
 {
+    /*  Idempotent: C_YUI_TREEDB_GRAPH auto-registers this engine, so an
+     *  app that also registers it explicitly (in either order) must not
+     *  trip "GClass ALREADY created".  */
+    if(gclass_find_by_name(GCLASS_NAME, false)) {
+        return 0;
+    }
     return create_gclass(GCLASS_NAME);
 }
 

package/src/c_yui_gobj_tree_js.js

@@ -40,6 +40,12 @@ import {
 } from "@yuneta/gobj-js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {
+    yui_graph_camera_items,
+    yui_graph_fold_items,
+    yui_graph_refresh_item,
+    yui_graph_update_zoom,
+} from "./yui_graph_camera.js";
 
 import {t} from "i18next";
 
@@ -535,40 +541,18 @@ function make_toolbar(gobj)
     let center_items = [];
     let right_items = [];
 
-    let c_icons = [
-        ["yi-magnifying-glass-plus",  "EV_ZOOM_IN",      false, 'i'],
-        ["yi-magnifying-glass",       "EV_ZOOM_RESET",   false, 'i'],
-        ["yi-magnifying-glass-minus", "EV_ZOOM_OUT",     false, 'i'],
-        ["yi-arrows-to-eye",          "EV_CENTER",       false, 'i'],
-        ["yi-eye",                    "EV_EXPAND_ALL",   false, 'i'],
-        ["yi-eye-slash",              "EV_COLLAPSE_ALL", false, 'i'],
-        ["yi-arrows-rotate",          "EV_REFRESH",      false, 'i'],
-    ];
-
-    for(let item of c_icons) {
-        let icon_name = item[0];
-        let event_name = item[1];
-        let disabled = item[2];
-
-        let button = {
-            class: `button ${event_name}`,
-            style: {height: toolbar_wide, width: '2.5em'}
-        };
-        if(disabled) {
-            button.disabled = true;
-        }
-        center_items.push(
-            ['button', button,
-                ['i', {style: 'font-size:1.5em; color:inherit;', class: icon_name}],
-                {
-                    click: (evt) => {
-                        evt.stopPropagation();
-                        gobj_send_event(gobj, event_name, {evt: evt}, gobj);
-                    }
-                }
-            ]
-        );
-    }
+    /*
+     *  The camera and the fold pair come from yui_graph_camera.js.
+     *
+     *  This toolbar used to draw two of these its own way — a bare
+     *  magnifier for actual size, `arrows-to-eye` for fit — and fold as
+     *  an eye, which means show/hide and not open/closed.  The same
+     *  console shows this graph and the JSON one side by side, so the
+     *  drawings have to be the same drawings.
+     */
+    center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide)
+        .concat(yui_graph_fold_items(gobj, toolbar_wide));
+    center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 
     /*
      *  Layout selector
@@ -651,6 +635,12 @@ function build_graph(gobj)
         graph.setTheme(priv.theme);
     }
 
+    /*  The readout follows ANY camera change, the wheel included — a
+     *  wheel notch passes through no action of ours.  */
+    graph.on('aftertransform', () => {
+        yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+    });
+
     graph.on(NodeEvent.CLICK, (evt) => {
         gobj_send_event(gobj, "EV_NODE_CLICK", {evt: evt}, gobj);
     });

package/src/c_yui_json_graph.js

@@ -47,6 +47,12 @@ import {
 } from "@yuneta/gobj-js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {
+    yui_graph_camera_items,
+    yui_graph_fold_items,
+    yui_graph_refresh_item,
+    yui_graph_update_zoom,
+} from "./yui_graph_camera.js";
 
 import {t} from "i18next";
 
@@ -179,7 +185,6 @@ let PRIVATE_DATA = {
     find_timer:     null,   // rate-limits the find box
     fold_listener:  null,   // delegated click on the card fold handles
     $layout_select: null,   // the layout picker
-    $zoom_readout:  null,   // the zoom percentage
     $find_input:    null,
     $find_result:   null,
     $find_count:    null,
@@ -455,77 +460,6 @@ function destroy_ui(gobj)
     }
 }
 
-/************************************************************
- *   One camera button.
- ************************************************************/
-function camera_button(gobj, icon, event_name, label_key, wide)
-{
-    return ['button', {class: `button ${event_name}`, type: 'button',
-                       style: {height: wide, width: '2.5em'},
-                       title: t(label_key), 'data-i18n-title': label_key,
-                       'aria-label': t(label_key), 'data-i18n-aria-label': label_key},
-        ['i', {style: 'font-size:1.5em; color:inherit;', class: icon}],
-        {
-            click: (evt) => {
-                evt.stopPropagation();
-                gobj_send_event(gobj, event_name, {evt: evt}, gobj);
-            }
-        }
-    ];
-}
-
-/************************************************************
- *   The zoom, as a percentage.  What the two magnifiers
- *   change: an editor that offers a zoom shows the number.
- ************************************************************/
-function zoom_percent_text(gobj)
-{
-    let graph = gobj.priv.graph;
-    if(!graph) {
-        return "100%";
-    }
-    try {
-        return Math.round(graph.getZoom() * 100) + "%";
-    } catch(e) {
-        return "100%";
-    }
-}
-
-/************************************************************
- *   Repaint the readout after anything that moves the camera.
- ************************************************************/
-function update_zoom_readout(gobj)
-{
-    let priv = gobj.priv;
-    if(priv.$zoom_readout) {
-        priv.$zoom_readout.textContent = zoom_percent_text(gobj);
-    }
-}
-
-/************************************************************
- *   One fold button.  `open` rotates the chevron to the open
- *   state, mirroring the per-node toggle of the lazy tree.
- ************************************************************/
-function graph_fold_button(gobj, event_name, label_key, open)
-{
-    let icon_style = 'font-size:1.5em; color:inherit;' +
-        (open? ' transform: rotate(90deg);': '');
-
-    return ['button', {class: `button ${event_name}`,
-                       type: 'button',
-                       style: {height: gobj_read_attr(gobj, "wide"), width: '2.5em'},
-                       title: t(label_key), 'data-i18n-title': label_key,
-                       'aria-label': t(label_key), 'data-i18n-aria-label': label_key},
-        ['i', {style: icon_style, class: 'yi-chevron-right'}],
-        {
-            click: (evt) => {
-                evt.stopPropagation();
-                gobj_send_event(gobj, event_name, {}, gobj);
-            }
-        }
-    ];
-}
-
 /************************************************************
  *   Toolbar
  ************************************************************/
@@ -593,54 +527,12 @@ function make_toolbar(gobj)
     let center_items = [];
 
     /*
-     *  The camera, in the SAME vocabulary the treedb graph uses
-     *  (`c_g6_nodes_tree.js`): zoom in / zoom out, then what those two
-     *  change — the zoom READOUT, because without it "1:1" is a jump to
-     *  a value nobody was told — then fit, then actual size.
-     *
-     *  Two of these used to be a different picture for the same action
-     *  in a sibling view, which is the worst thing an icon can be:
-     *  `EV_ZOOM_RESET` was a bare magnifier and `EV_CENTER` was
-     *  `yi-arrows-to-eye`.  Now fit is the same bracket glyph as the
-     *  sprite's `g6-icon-fit`, and actual size is WRITTEN — `1:1` is
-     *  written in every editor that offers it, never drawn, because
-     *  there is no glyph for it.
+     *  The camera and the fold pair come from yui_graph_camera.js: the
+     *  same drawings the gobj tree uses, because the two graphs sit in
+     *  the same console and a copied toolbar drifts.
      */
-    let c_icons = [
-        ["yi-magnifying-glass-plus",  "EV_ZOOM_IN",  "zoom in"],
-        ["yi-magnifying-glass-minus", "EV_ZOOM_OUT", "zoom out"],
-    ];
-
-    for(let item of c_icons) {
-        center_items.push(camera_button(gobj, item[0], item[1], item[2], toolbar_wide));
-    }
-
-    priv.$zoom_readout = createElement2(
-        ['span', {class: 'JSON_GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey',
-                  style: 'font-size:.85rem; min-width:3.5em; justify-content:center;',
-                  title: t('zoom level'), 'data-i18n-title': 'zoom level'},
-         zoom_percent_text(gobj)]
-    );
-    center_items.push(priv.$zoom_readout);
-
-    center_items.push(camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", toolbar_wide));
-
-    /*  Written, not drawn — see above.  */
-    center_items.push(
-        ['button', {class: 'button EV_ZOOM_RESET', type: 'button',
-                    style: {height: toolbar_wide, width: '2.5em'},
-                    title: t('actual size'), 'data-i18n-title': 'actual size',
-                    'aria-label': t('actual size'), 'data-i18n-aria-label': 'actual size'},
-         ['span', {style: 'font-weight:700;'}, '1:1'],
-         {
-             click: (evt) => {
-                 evt.stopPropagation();
-                 gobj_send_event(gobj, "EV_ZOOM_RESET", {evt: evt}, gobj);
-             }
-         }]
-    );
-
-    center_items.push(camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", toolbar_wide));
+    center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
+    center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 
     /*
      *  Right: fold the tree.
@@ -681,11 +573,8 @@ function make_toolbar(gobj)
         }]
     );
 
-    let right_items = [
-        $layout_select,
-        graph_fold_button(gobj, "EV_EXPAND_ALL", "expand all", true),
-        graph_fold_button(gobj, "EV_COLLAPSE_ALL", "collapse all", false),
-    ];
+    let right_items = [$layout_select].concat(
+        yui_graph_fold_items(gobj, toolbar_wide));
 
     const $toolbar = yui_toolbar({}, [
         ['div', {class: 'yui-horizontal-toolbar-section left'}, left_items],
@@ -748,7 +637,7 @@ function build_graph(gobj)
      *  node from each zoom action would have left the readout lying
      *  after every notch.  */
     graph.on('aftertransform', () => {
-        update_zoom_readout(gobj);
+        yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
     });
 
     graph.on(CanvasEvent.CLICK, (evt) => {
@@ -1145,7 +1034,7 @@ function load_json(gobj)
             if(!preserve_view) {
                 graph.fitView();
             }
-            update_zoom_readout(gobj);
+            yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
         });
     }
 }

package/src/c_yui_treedb_graph.js

@@ -78,6 +78,7 @@ import {
 } from "@yuneta/gobj-js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {register_c_g6_nodes_tree} from "./c_g6_nodes_tree.js";
 import {
     removeChildElements,
     disableElements,
@@ -2594,6 +2595,17 @@ function create_gclass(gclass_name)
  ***************************************************************************/
 function register_c_yui_treedb_graph()
 {
+    if(gclass_find_by_name(GCLASS_NAME, false)) {
+        return 0;
+    }
+    /*  This view hosts a C_G6_NODES_TREE child — the graph ENGINE — and
+     *  creates it BY NAME.  Without its gclass the view builds fine, the
+     *  child does not, and the failure lands as "GClass not registered"
+     *  from inside a component the host never named.  Same arrangement
+     *  C_YUI_JSON makes for C_YUI_JSON_GRAPH.  */
+    if(!gclass_find_by_name("C_G6_NODES_TREE", false)) {
+        register_c_g6_nodes_tree();
+    }
     return create_gclass(GCLASS_NAME);
 }
 

package/src/yui_graph_camera.js

@@ -0,0 +1,150 @@
+/***********************************************************************
+ *          yui_graph_camera.js
+ *
+ *  The camera and fold controls a G6 graph puts in a DOM toolbar,
+ *  built in ONE place.
+ *
+ *  This module exists because the same action was drawn three
+ *  different ways across sibling views — actual size as a bare
+ *  magnifier here and as `1:1` there, fit as `arrows-to-eye` here and
+ *  as corner brackets there, fold as chevrons here and as an eye
+ *  there.  A user sees two of these graphs side by side in the same
+ *  console, so a copied-and-drifted toolbar is not a detail.
+ *
+ *  The VOCABULARY is not invented here.  It is the one
+ *  `c_g6_nodes_tree.js` settled on for the treedb graph, which draws
+ *  its toolbar as a G6 plugin over an SVG sprite and therefore cannot
+ *  share this code — only its decisions:
+ *
+ *      zoom in / zoom out      magnifiers
+ *      zoom level              a READOUT, because without it "1:1" is
+ *                              a jump to a value nobody was told
+ *      fit                     corner brackets (`yi-fit`, the same
+ *                              path as the sprite's `g6-icon-fit`)
+ *      actual size             the WRITTEN `1:1` — the action is
+ *                              `zoomTo(1)`, and actual size is written
+ *                              in every editor that offers it, never
+ *                              drawn, because there is no glyph for it
+ *
+ *  Fold is the one the treedb graph does not have, so its vocabulary
+ *  comes from the other side of the family: the lazy tree viewer's own
+ *  toolbar (`c_yui_json.js`) uses chevrons — open pointing down, closed
+ *  pointing right — which is also the direction the per-node handles
+ *  speak.  An eye means show/hide, which is a different idea.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {createElement2, gobj_send_event} from "@yuneta/gobj-js";
+
+import {t} from "i18next";
+
+
+/************************************************************
+ *   One icon button that fires `event_name`.
+ ************************************************************/
+function camera_button(gobj, icon, event_name, label_key, wide, extra_style)
+{
+    return ['button', {class: `button ${event_name}`, type: 'button',
+                       style: {height: wide, width: '2.5em'},
+                       title: t(label_key), 'data-i18n-title': label_key,
+                       'aria-label': t(label_key), 'data-i18n-aria-label': label_key},
+        ['i', {style: 'font-size:1.5em; color:inherit;' + (extra_style || ''),
+               class: icon}],
+        {
+            click: (evt) => {
+                evt.stopPropagation();
+                gobj_send_event(gobj, event_name, {evt: evt}, gobj);
+            }
+        }
+    ];
+}
+
+/************************************************************
+ *   The current zoom as a percentage.
+ ************************************************************/
+export function yui_graph_zoom_text(graph)
+{
+    if(!graph) {
+        return "100%";
+    }
+    try {
+        return Math.round(graph.getZoom() * 100) + "%";
+    } catch(e) {
+        return "100%";
+    }
+}
+
+/************************************************************
+ *   Repaint the readout of a container that carries one.
+ *
+ *   Call it from G6's `aftertransform`, which is the ONE hook
+ *   that also covers the WHEEL — a camera change that passes
+ *   through no action, so repainting from each zoom action
+ *   leaves the number lying after every notch.
+ ************************************************************/
+export function yui_graph_update_zoom($container, graph)
+{
+    if(!$container) {
+        return;
+    }
+    let $readout = $container.querySelector('.GRAPH_ZOOM_LEVEL');
+    if(!$readout) {
+        return;     /*  a toolbar without a readout: nobody to report to  */
+    }
+    $readout.textContent = yui_graph_zoom_text(graph);
+}
+
+/************************************************************
+ *   The camera cluster: zoom in, zoom out, readout, fit,
+ *   actual size.  Returns createElement2 specs, in order.
+ *
+ *   `wide` is the host toolbar's button height.
+ ************************************************************/
+export function yui_graph_camera_items(gobj, graph, wide)
+{
+    return [
+        camera_button(gobj, "yi-magnifying-glass-plus", "EV_ZOOM_IN", "zoom in", wide),
+        camera_button(gobj, "yi-magnifying-glass-minus", "EV_ZOOM_OUT", "zoom out", wide),
+        ['span', {class: 'GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey',
+                  style: 'font-size:.85rem; min-width:3.5em; justify-content:center;',
+                  title: t('zoom level'), 'data-i18n-title': 'zoom level'},
+         yui_graph_zoom_text(graph)],
+        camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", wide),
+        /*  Written, not drawn — see the header.  */
+        ['button', {class: 'button EV_ZOOM_RESET', type: 'button',
+                    style: {height: wide, width: '2.5em'},
+                    title: t('actual size'), 'data-i18n-title': 'actual size',
+                    'aria-label': t('actual size'), 'data-i18n-aria-label': 'actual size'},
+         ['span', {style: 'font-weight:700;'}, '1:1'],
+         {
+             click: (evt) => {
+                 evt.stopPropagation();
+                 gobj_send_event(gobj, "EV_ZOOM_RESET", {evt: evt}, gobj);
+             }
+         }]
+    ];
+}
+
+/************************************************************
+ *   The fold pair: expand all, collapse all.  Chevrons, the
+ *   open one rotated down — the same pair the lazy tree
+ *   viewer's toolbar uses, and the same direction the
+ *   per-node handles speak.
+ ************************************************************/
+export function yui_graph_fold_items(gobj, wide)
+{
+    return [
+        camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide,
+            ' transform: rotate(90deg);'),
+        camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide),
+    ];
+}
+
+/************************************************************
+ *   A refresh button, for the graphs that offer one.
+ ************************************************************/
+export function yui_graph_refresh_item(gobj, wide)
+{
+    return camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", wide);
+}