@yuneta/gobj-ui 7.23.17 → 7.23.19

package/src/c_yui_json_graph.js

@@ -50,6 +50,9 @@ import {yui_toolbar} from "./yui_toolbar.js";
 import {attach_clear} from "./yui_inputs.js";
 import {
     yui_graph_camera_items,
+    yui_graph_anchor_item,
+    yui_graph_update_anchor,
+    yui_graph_center_on,
     yui_graph_fold_items,
     yui_graph_refresh_item,
     yui_graph_update_zoom,
@@ -190,6 +193,12 @@ let PRIVATE_DATA = {
     $find_input:    null,
     $find_result:   null,
     $find_count:    null,
+
+    /*---------------- camera anchor ----------------*/
+    anchor_id:      "",     // the node the camera keeps in the middle
+    anchor_path:    "",     // its path, so a rebuild can find it again
+    anchor_state:   "off",  // "off" | "arming" | "on"
+    last_zoom:      1,      // tells a wheel zoom from a drag in aftertransform
 };
 
 let __gclass__ = null;
@@ -197,17 +206,41 @@ let __layout_registered__ = false;
 
 
 /***************************************************************
- *  Type colors matching the original mx_json_viewer
+ *  Type colours, ONE EXPLICIT PALETTE PER THEME and not a
+ *  derivation, for the same reason the tree keeps two sets of
+ *  CSS tokens: a colour that reads on white is not the same
+ *  colour lightened, and deriving one from the other made the
+ *  two views of one document disagree about what a string is.
+ *  These ARE the tree's tokens (`c_yui_json.css`), so the tree
+ *  and the graph now say green with the same green.
+ *
+ *  The light values are darker than the `mx_json_viewer` ones
+ *  they came from, because those could not be read: `#FF8C00`
+ *  is mid-luminance, so it reaches at most **2.33:1 against any
+ *  background that exists** -- no card colour and no highlight
+ *  could have fixed it, only the colour itself. Orange and blue
+ *  moved until every type clears 4.5:1 on all five surfaces this
+ *  viewer paints (two light cards, the match chip, two dark
+ *  cards); red and green were already there.
  ***************************************************************/
-const TYPE_COLORS = {
+const TYPE_COLORS_LIGHT = {
     string:  "#006000",     // green
-    number:  "#EE422E",     // red
-    boolean: "#FF8C00",     // orange
-    null:    "#475ED0",     // blue
+    number:  "#b5330b",     // red
+    boolean: "#8C4D00",     // orange
+    null:    "#4359C6",     // blue
     list:    "#4C0099",     // purple
     dict:    "#4C0099",     // purple
 };
 
+const TYPE_COLORS_DARK = {
+    string:  "#7ec87e",
+    number:  "#ff8a65",
+    boolean: "#ffb74d",
+    null:    "#90a4f4",
+    list:    "#B799D6",
+    dict:    "#B799D6",
+};
+
 /***************************************************************
  *  Group (card) colours. `fill` is the light-theme card; `tint`
  *  is the hue that fill hints at, used to derive the dark card —
@@ -260,24 +293,17 @@ function json_card_style(group, dark)
 }
 
 /***************************************************************
- *  A scalar's colour by type. The palette is tuned for a light
- *  card; on a dark one every one of them (dark green #006000,
- *  blue #475ED0, …) sinks into the background, so brighten it.
- *
- *  60% white and not the 45% it shipped with.  The number is a
- *  balance measured both ways: brighter reads better on the dark
- *  card (the worst type goes from 2.88:1 to 4.74:1) and washes the
- *  six types toward one pastel, and past this point red, orange
- *  and purple stop being tellable apart, which is the only reason
- *  they are coloured at all.
+ *  A scalar's colour by type, straight out of the palette for
+ *  the theme.  It used to be the light colour mixed with white,
+ *  which is how a document ended up green in one view and a
+ *  paler green in the other, and how the amount of white became
+ *  a knob nobody could set: enough of it to read on a dark card
+ *  washed the six types into one pastel.
  ***************************************************************/
 function type_color(type, dark)
 {
-    let color = TYPE_COLORS[type] || (dark ? "#e8eaed" : "black");
-    if(!dark) {
-        return color;
-    }
-    return `color-mix(in srgb, ${color} 40%, #ffffff)`;
+    let palette = dark? TYPE_COLORS_DARK: TYPE_COLORS_LIGHT;
+    return palette[type] || (dark ? "#e8eaed" : "black");
 }
 
 
@@ -575,6 +601,7 @@ function make_toolbar(gobj)
      *  the same console and a copied toolbar drifts.
      */
     center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
+    center_items.push(yui_graph_anchor_item(gobj, toolbar_wide));
     center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 
     /*
@@ -680,6 +707,30 @@ function build_graph(gobj)
      *  after every notch.  */
     graph.on('aftertransform', () => {
         yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+
+        /*
+         *  A ZOOM re-centres on the anchor; a PAN does not.
+         *  `aftertransform` fires for both, and an anchor that also
+         *  answered a drag would make the graph impossible to move
+         *  while it is set. The zoom LEVEL is what tells them apart:
+         *  it changes on a wheel notch and never on a drag.
+         *
+         *  No recursion: the centring translates without zooming, so
+         *  the level it fires back with is the one just stored.
+         */
+        let z = priv.last_zoom;
+        try {
+            z = priv.graph.getZoom();
+        } catch(e) {
+            return;
+        }
+        if(z === priv.last_zoom) {
+            return;
+        }
+        priv.last_zoom = z;
+        if(priv.anchor_state === "on" && priv.anchor_id) {
+            yui_graph_center_on(priv.graph, priv.anchor_id);
+        }
     });
 
     graph.on(CanvasEvent.CLICK, (evt) => {
@@ -943,16 +994,33 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
             card_matched = true;
             priv.match_count++;
         }
-        let html = build_cell_html(key, value, type, dark, matched);
-        lines.push(html);
 
+        /*
+         *  A non-empty container gets a CARD OF ITS OWN, so a row for it
+         *  here would be the same thing drawn twice -- and the second
+         *  drawing is the one that does not scale.  An array of 14 dicts
+         *  printed fourteen `0: {13}` rows above fourteen cards saying
+         *  the same; an array of a thousand prints a thousand-row card
+         *  nobody can read, beside the thousand cards it duplicates.
+         *
+         *  What is left in the body is exactly the SCALARS: what this
+         *  node IS.  What it CONTAINS is the edges, and the count now
+         *  rides in the header for the case where the body comes out
+         *  empty.
+         */
         if((is_object(value) && json_object_size(value) > 0) ||
            (is_array(value) && value.length > 0)) {
             pending_complex.push({key: key, value: value});
+            continue;
         }
+
+        lines.push(build_cell_html(key, value, type, dark, matched));
     }
 
     let label = get_group_label(path) || (is_dict ? "{}" : "[]");
+    if(pending_complex.length > 0) {
+        label += is_dict? ` {${pending_complex.length}}`: ` [${pending_complex.length}]`;
+    }
 
     /*
      *  Folded: keep the card, drop the branch, and SAY how much went
@@ -1086,12 +1154,36 @@ function load_json(gobj)
     priv.pending_preserve_view = false;
 
     if(nodes.length > 0) {
+        let root_id = nodes[0].id;      /*  built before its children  */
         graph.setData({nodes: nodes, edges: edges});
         graph.render().then(() => {
-            if(!preserve_view) {
-                graph.fitView();
+            /*  Ids are generated per build: point the anchor at its path
+             *  again before anybody asks the camera to go there.  */
+            reanchor(gobj);
+
+            if(preserve_view) {
+                yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+                return;
             }
-            yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+
+            /*
+             *  ACTUAL SIZE, not fit.  A JSON graph of anything real does
+             *  not fit at a zoom anybody can read: the schema of one
+             *  topic fits at 37%, where every card is grey texture.
+             *  Fitting answered "where is everything" when the question
+             *  on opening is "what does this say".
+             *
+             *  Centred on the ANCHOR if there is one, else on the ROOT
+             *  -- never parked at the layout's origin, which is a corner
+             *  with nothing in it and is where `1:1` used to land.
+             */
+            Promise.resolve(graph.zoomTo(1)).then(() => {
+                if(!yui_graph_center_on(graph, priv.anchor_id)) {
+                    yui_graph_center_on(graph, root_id);
+                }
+                priv.last_zoom = 1;
+                yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+            });
         });
     }
 }
@@ -1473,6 +1565,93 @@ function ac_theme(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *   Every camera action ends the same way once an anchor is
+ *   set: the thing you were reading goes back to the middle.
+ *
+ *   Chained on the promise G6 returns rather than run beside it
+ *   -- centring before the zoom has finished centres the OLD
+ *   view, and the reader watches the node slide away and come
+ *   back.
+ ************************************************************/
+function after_camera(gobj, moved)
+{
+    let priv = gobj.priv;
+
+    if(priv.anchor_state !== "on" || !priv.anchor_id) {
+        return;
+    }
+    Promise.resolve(moved).then(function() {
+        yui_graph_center_on(priv.graph, priv.anchor_id);
+    }).catch(function() {
+        /*  a camera move that never finished has nothing to centre  */
+    });
+}
+
+/************************************************************
+ *   Point the anchor back at its node after a rebuild.
+ *
+ *   Node ids are generated per build, so the id the reader
+ *   chose does not survive a refresh, a fold or a layout
+ *   change -- the PATH does, and it is what the anchor really
+ *   means: "this place in the document", not "this card".
+ *
+ *   A path that is no longer drawn (its parent got folded)
+ *   releases the anchor rather than leaving a button that says
+ *   it is locked onto something invisible.
+ ************************************************************/
+function reanchor(gobj)
+{
+    let priv = gobj.priv;
+
+    if(priv.anchor_state !== "on" || !priv.anchor_path) {
+        return;
+    }
+
+    let found = "";
+    try {
+        for(let node of priv.graph.getNodeData()) {
+            if(node && node.data && node.data.path === priv.anchor_path) {
+                found = node.id;
+                break;
+            }
+        }
+    } catch(e) {
+        return;     /*  between renders: keep what we have and try later  */
+    }
+
+    priv.anchor_id = found;
+    if(!found) {
+        priv.anchor_state = "off";
+        priv.anchor_path = "";
+    }
+    yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+}
+
+/************************************************************
+ *   Arm the anchor, or let it go.
+ *
+ *   Three states and one button, so a press ADVANCES: with no
+ *   target it starts waiting for one, and with a target it
+ *   releases.  Pressing it while it waits is a cancel, which is
+ *   what somebody who pressed it by mistake will try.
+ ************************************************************/
+function ac_toggle_anchor(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+
+    if(priv.anchor_state === "off") {
+        priv.anchor_state = "arming";
+    } else {
+        priv.anchor_state = "off";
+        priv.anchor_id = "";
+        priv.anchor_path = "";
+    }
+
+    yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+    return 0;
+}
+
 /************************************************************
  *
  ************************************************************/
@@ -1481,7 +1660,7 @@ function ac_zoom_in(gobj, event, kw, src)
     let graph = gobj.priv.graph;
     if(graph) {
         let z = graph.getZoom();
-        graph.zoomTo(z * 1.2);
+        after_camera(gobj, graph.zoomTo(z * 1.2));
     }
     return 0;
 }
@@ -1494,7 +1673,7 @@ function ac_zoom_out(gobj, event, kw, src)
     let graph = gobj.priv.graph;
     if(graph) {
         let z = graph.getZoom();
-        graph.zoomTo(z * 0.8);
+        after_camera(gobj, graph.zoomTo(z * 0.8));
     }
     return 0;
 }
@@ -1504,10 +1683,21 @@ function ac_zoom_out(gobj, event, kw, src)
  ************************************************************/
 function ac_zoom_reset(gobj, event, kw, src)
 {
-    let graph = gobj.priv.graph;
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
     if(graph && graph.rendered) {
-        graph.zoomTo(1);
-        graph.translateTo([0, 0]);
+        /*
+         *  With an anchor, actual size means "this node, life size".
+         *  Without one it means the layout's origin, which is where
+         *  `1:1` always landed -- a corner nobody was looking at.
+         */
+        if(priv.anchor_state === "on" && priv.anchor_id) {
+            after_camera(gobj, graph.zoomTo(1));
+        } else {
+            graph.zoomTo(1);
+            graph.translateTo([0, 0]);
+        }
     }
     return 0;
 }
@@ -1539,6 +1729,21 @@ function ac_node_click(gobj, event, kw, src)
         nodedata = graph.getNodeData(node_id);
     } catch(e) {}
 
+    /*
+     *  A waiting anchor TAKES the click: it is what the reader armed
+     *  the button for, and letting the same press also open the item
+     *  would make picking a target a side effect of doing something
+     *  else.
+     */
+    if(priv.anchor_state === "arming") {
+        priv.anchor_id = node_id;
+        priv.anchor_path = (nodedata && nodedata.data)? nodedata.data.path: "";
+        priv.anchor_state = "on";
+        yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+        yui_graph_center_on(graph, node_id);
+        return 0;
+    }
+
     if(nodedata && nodedata.data) {
         gobj_publish_event(gobj, "EV_JSON_ITEM_CLICKED", {
             path: nodedata.data.path,
@@ -1660,6 +1865,7 @@ function create_gclass(gclass_name)
             ["EV_ZOOM_RESET",           ac_zoom_reset,          null],
             ["EV_CENTER",               ac_center,              null],
             ["EV_NODE_CLICK",           ac_node_click,          null],
+            ["EV_TOGGLE_ANCHOR",        ac_toggle_anchor,       null],
             ["EV_RESIZE",               ac_resize,              null],
             ["EV_SHOW",                 ac_show,                null],
             ["EV_HIDE",                 ac_hide,                null],
@@ -1683,6 +1889,7 @@ function create_gclass(gclass_name)
         ["EV_ZOOM_RESET",           0],
         ["EV_CENTER",               0],
         ["EV_NODE_CLICK",           0],
+        ["EV_TOGGLE_ANCHOR",        0],
         ["EV_RESIZE",               0],
         ["EV_SHOW",                 0],
         ["EV_HIDE",                 0],

package/src/lib_icons.js

@@ -140,6 +140,13 @@ const ICONS = `<svg xmlns="http://www.w3.org/2000/svg">
             stroke="currentColor" stroke-width="40"
             stroke-dasharray="59 36"/>
     </symbol>
+    <!-- location-crosshairs (anchor the camera on one element).
+         The SAME path as the DOM toolbars and their yi-location-crosshairs
+         mask: the two toolbars sit in one console, and a control that
+         does one thing has to be drawn one way. -->
+    <symbol id="g6-icon-anchor" viewBox="0 0 576 512">
+        <path fill="currentColor" d="M288-16c17.7 0 32 14.3 32 32l0 18.3c98.1 14 175.7 91.6 189.7 189.7l18.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-18.3 0c-14 98.1-91.6 175.7-189.7 189.7l0 18.3c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-18.3C157.9 463.7 80.3 386.1 66.3 288L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l18.3 0C80.3 125.9 157.9 48.3 256 34.3L256 16c0-17.7 14.3-32 32-32zM128 256a160 160 0 1 0 320 0 160 160 0 1 0 -320 0zm160-96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/>
+    </symbol>
     <!-- floppy-disk (save) -->
     <symbol id="g6-icon-save" viewBox="0 0 448 512">
         <path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32L64 32zm32 96c0-17.7 14.3-32 32-32l160 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-160 0c-17.7 0-32-14.3-32-32l0-64zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>

package/src/yui_graph_camera.js

@@ -39,6 +39,8 @@ import {createElement2, gobj_send_event} from "@yuneta/gobj-js";
 
 import {t} from "i18next";
 
+import {set_pressed_state} from "./lib_graph.js";
+
 
 /************************************************************
  *   One icon button that fires `event_name`.
@@ -141,6 +143,99 @@ export function yui_graph_fold_items(gobj, wide)
     ];
 }
 
+/************************************************************
+ *   The ANCHOR toggle: pick one element and every camera move
+ *   from then on leaves it in the MIDDLE.
+ *
+ *   Why it exists: a graph that fits on screen is unreadable at
+ *   the zoom that makes it fit, and the zoom that makes it
+ *   readable does not fit -- so the useful view is always a
+ *   fraction of the document, and which fraction is the whole
+ *   question.  Without an anchor, `1:1` lands wherever the
+ *   layout's origin happens to be and the reader hunts for the
+ *   node they were looking at.
+ *
+ *   Crosshairs and not a thumbtack.  A tack says "do not move
+ *   this", which is what a pinned NODE would mean in a graph you
+ *   can drag nodes around in; this pins the CAMERA to a target,
+ *   which is what a crosshair says and what every map that
+ *   offers it draws.  It is also in the icon set already, and a
+ *   `yi-*` class that is not is a black square.
+ *
+ *   Three states, because two would not say what a press does:
+ *
+ *      off      no target; the camera behaves as it always did
+ *      arming   waiting for you to click the element you mean
+ *      on       locked; every zoom re-centres on it
+ ************************************************************/
+export function yui_graph_anchor_item(gobj, wide)
+{
+    return camera_button(gobj, "yi-location-crosshairs", "EV_TOGGLE_ANCHOR",
+                         "anchor view", wide);
+}
+
+/************************************************************
+ *   Paint the anchor button.  `state` is "off" | "arming" | "on".
+ *
+ *   Both live states look PRESSED, because both are states the
+ *   control is IN rather than actions; what separates them is the
+ *   colour, and only the waiting one takes a palette colour --
+ *   it is the one that needs the reader to do something next.
+ ************************************************************/
+export function yui_graph_update_anchor($container, state)
+{
+    if(!$container) {
+        return;
+    }
+    let $btn = $container.querySelector('.EV_TOGGLE_ANCHOR');
+    if(!$btn) {
+        return;     /*  a toolbar without the control: nothing to paint  */
+    }
+    set_pressed_state($container, '.EV_TOGGLE_ANCHOR', state !== "off");
+    $btn.classList.toggle('color_pending_state', state === "arming");
+    $btn.setAttribute("aria-pressed", (state === "on")? "true": "false");
+
+    let key = (state === "arming")? "click the element to centre on"
+            : (state === "on")? "centred: click to release"
+            : "anchor view";
+    $btn.setAttribute("title", t(key));
+    $btn.setAttribute("data-i18n-title", key);
+    $btn.setAttribute("aria-label", t(key));
+    $btn.setAttribute("data-i18n-aria-label", key);
+}
+
+/************************************************************
+ *   Put `node_id` back in the middle of the viewport.
+ *
+ *   Called AFTER the camera moved, never instead of moving it:
+ *   the zoom is what the reader asked for, the centring is what
+ *   keeps the thing they are reading under their eyes.
+ *
+ *   Guarded on every side because it runs on every wheel notch:
+ *   a graph mid-rebuild, an anchor whose node went away with a
+ *   fold, a G6 version without `focusElement` -- none of those is
+ *   an error worth a log line per notch, they are all "there is
+ *   nothing to centre right now".
+ ************************************************************/
+export function yui_graph_center_on(graph, node_id)
+{
+    if(!graph || !node_id) {
+        return false;
+    }
+    try {
+        if(typeof graph.getElementData === "function" && !graph.getElementData(node_id)) {
+            return false;
+        }
+        if(typeof graph.focusElement !== "function") {
+            return false;
+        }
+        graph.focusElement(node_id);
+        return true;
+    } catch(e) {
+        return false;   /*  the element is gone, or the graph is between renders  */
+    }
+}
+
 /************************************************************
  *   A refresh button, for the graphs that offer one.
  ************************************************************/