@yuneta/gobj-ui 7.23.18 → 7.23.20

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,
@@ -69,6 +72,11 @@ import {
 import { ensure_drag_canvas_patch } from "./g6_drag_canvas_touch.js";
 import { ensure_pinch_zoom_patch } from "./g6_touch_gestures.js";
 import { yui_is_dark, yui_theme_now, yui_watch_theme } from "./yui_theme.js";
+import {
+    is_pure_collection,
+    has_branch,
+    count_branches,
+} from "./json_view_helpers.js";
 
 /***************************************************************
  *              Constants
@@ -190,6 +198,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;
@@ -592,6 +606,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));
 
     /*
@@ -697,6 +712,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) => {
@@ -736,7 +775,7 @@ function build_graph(gobj)
 /************************************************************
  *  Build cell value HTML (matching old mx_json_viewer colors)
  ************************************************************/
-function build_cell_html(key, value, type, dark, matched)
+function build_cell_html(key, value, type, dark, matched, fold)
 {
     /*
      *  A match is a LIGHT chip on BOTH themes, so what sits on it is
@@ -779,6 +818,19 @@ function build_cell_html(key, value, type, dark, matched)
     let row = `<span style="color:${key_color}">• ${escapeHtml(String(key))}: </span>` +
               `<span style="color:${color}">${display_value}</span>`;
 
+    /*
+     *  A fold chip ON THE ROW, for a container that gets no card of its
+     *  own: the control belongs next to the key it folds, which is
+     *  where a tree puts it, and it is the only handle those children
+     *  have -- their parent's header chip folds every branch it has,
+     *  not this one.
+     */
+    if(fold) {
+        row += `<span style="margin-left:8px;">` +
+               fold_toggle_html(fold.path, true, fold.folded, fold.branches, fold.colors) +
+               `</span>`;
+    }
+
     if(matched) {
         /*  The highlight is baked into the card's MARKUP and not set as
          *  a G6 node state: the key shape of an `html` node is a DOM
@@ -951,6 +1003,10 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
     let pending_complex = [];
     let card_matched = false;
 
+    let colors = json_card_style(
+        is_dict ? GROUP_COLORS.dict : GROUP_COLORS.list, dark
+    );
+
     let entries = is_dict ? Object.entries(kw) : kw.map((v, i) => [i, v]);
 
     for(let [key, value] of entries) {
@@ -960,13 +1016,62 @@ 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);
 
-        if((is_object(value) && json_object_size(value) > 0) ||
-           (is_array(value) && value.length > 0)) {
+        /*
+         *  EVERY key is a row, containers included: `cols` is one key of
+         *  the topic dict exactly like `pkey` and `tkey`, and a drawing
+         *  that leaves it out of the card does not say what the document
+         *  says.
+         *
+         *  What a container key does NOT get is its contents repeated
+         *  underneath it -- the row says `[14]` and the fourteen cards
+         *  say the rest. That is the part which does not scale: an array
+         *  of a thousand dicts would otherwise print a thousand-row card
+         *  beside the thousand cards it duplicates.
+         */
+        let fold = null;
+        if(has_branch(value)) {
             pending_complex.push({key: key, value: value});
+
+            /*
+             *  A child that gets no card of its own is folded from HERE
+             *  or from nowhere.
+             */
+            if(is_pure_collection(value)) {
+                let child_path = add_segment(path, key);
+                fold = {
+                    path: child_path,
+                    folded: priv.collapsed.has(child_path),
+                    branches: count_branches(value),
+                    colors: colors,
+                };
+            }
+        }
+
+        lines.push(build_cell_html(key, value, type, dark, matched, fold));
+    }
+
+    /*
+     *  A pure collection is not drawn: its row above names it and its
+     *  children hang from THIS card's parent. The root always gets a
+     *  card, or a document that is a plain list of records would have
+     *  nothing to hang anything from.
+     */
+    if(parent_id && is_pure_collection(kw)) {
+        if(priv.collapsed.has(path)) {
+            return parent_id;
+        }
+        for(let pending of pending_complex) {
+            build_json_nodes(
+                gobj,
+                add_segment(path, pending.key),
+                pending.value,
+                nodes,
+                edges,
+                parent_id
+            );
         }
+        return parent_id;
     }
 
     let label = get_group_label(path) || (is_dict ? "{}" : "[]");
@@ -981,9 +1086,6 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
      */
     let foldable = pending_complex.length > 0;
     let folded = foldable && priv.collapsed.has(path);
-    let colors = json_card_style(
-        is_dict ? GROUP_COLORS.dict : GROUP_COLORS.list, dark
-    );
     let border_color = card_matched? (dark? "#ffb300": "#ff8f00"): colors.border;
     let border_width = card_matched? 2: 1;
 
@@ -1103,20 +1205,47 @@ 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);
+            });
         });
     }
 }
 
 /************************************************************
  *  Every path that HAS a branch to fold, in the same recursion
- *  build_json_nodes uses — so "collapse all" can never name a
- *  card that does not exist.  The root is excluded: folding it
+ *  build_json_nodes uses — so "collapse all" can never name
+ *  something with no handle.  The handle is a card's header chip
+ *  for a container that gets a card, and the chip on its ROW in
+ *  the parent for a pure collection, which gets none; both are
+ *  keyed by this same path.  The root is excluded: folding it
  *  would leave an empty canvas.
  ************************************************************/
 function collect_foldable_paths(value, path, out, is_root)
@@ -1127,20 +1256,21 @@ function collect_foldable_paths(value, path, out, is_root)
         return false;
     }
 
-    let has_branch = false;
+    /*  `found_branch` and not `has_branch`: that name belongs to the
+     *  helper above, and a local would shadow it here.  */
+    let found_branch = false;
     let entries = is_dict ? Object.entries(value) : value.map((v, i) => [i, v]);
     for(let [key, child] of entries) {
-        if((is_object(child) && json_object_size(child) > 0) ||
-           (is_array(child) && child.length > 0)) {
-            has_branch = true;
+        if(has_branch(child)) {
+            found_branch = true;
             collect_foldable_paths(child, add_segment(path, key), out, false);
         }
     }
 
-    if(has_branch && !is_root) {
+    if(found_branch && !is_root) {
         out.push(path);
     }
-    return has_branch;
+    return found_branch;
 }
 
 /************************************************************
@@ -1490,6 +1620,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;
+}
+
 /************************************************************
  *
  ************************************************************/
@@ -1498,7 +1715,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;
 }
@@ -1511,7 +1728,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;
 }
@@ -1521,10 +1738,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;
 }
@@ -1556,6 +1784,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,
@@ -1677,6 +1920,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],
@@ -1700,6 +1944,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/json_view_helpers.js

@@ -314,3 +314,70 @@ export function container_label(value, max_chars)
     }
     return text;
 }
+
+
+/************************************************************
+ *   A dict, in the JSON sense: not an array and not null.
+ ************************************************************/
+function is_plain_object(v)
+{
+    return v !== null && typeof v === "object" && !Array.isArray(v);
+}
+
+/************************************************************
+ *  Does this container hold ONLY other containers?
+ *
+ *  Such a value is not a thing, it is a LIST of things -- and a
+ *  list is fully described by the row that names it in its
+ *  parent, plus the edges to what it holds.  Drawing it as a
+ *  card of its own put a node in the middle of the graph with no
+ *  data in it, saying nothing the parent's row did not already
+ *  say, and pushed everything below it one level down.
+ *
+ *  An EMPTY container inside counts as content: `{0}` is
+ *  something the card has to show, and there is no child card
+ *  to show it instead.
+ ************************************************************/
+export function is_pure_collection(value)
+{
+    let entries = is_plain_object(value)? Object.entries(value)
+                : Array.isArray(value)? value.map((v, i) => [i, v])
+                : [];
+
+    if(entries.length === 0) {
+        return false;
+    }
+    for(let [, v] of entries) {
+        if(!has_branch(v)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+/************************************************************
+ *  A value that gets a card, or children, of its own.
+ ************************************************************/
+export function has_branch(value)
+{
+    return (is_plain_object(value) && Object.keys(value).length > 0) ||
+           (Array.isArray(value) && value.length > 0);
+}
+
+/************************************************************
+ *  How many branches a container has, which is what the fold
+ *  chip counts.
+ ************************************************************/
+export function count_branches(value)
+{
+    let entries = is_plain_object(value)? Object.values(value)
+                : Array.isArray(value)? value
+                : [];
+    let n = 0;
+    for(let v of entries) {
+        if(has_branch(v)) {
+            n++;
+        }
+    }
+    return n;
+}

package/src/json_view_helpers.test.js

@@ -18,6 +18,9 @@ import {
     json_text_dump,
     pick_view_mode,
     container_label,
+    is_pure_collection,
+    has_branch,
+    count_branches,
 } from "./json_view_helpers.js";
 
 
@@ -243,3 +246,67 @@ test("container_label: cut at max_chars, and said with an ellipsis", () => {
     expect(container_label({id: uuid}, 0)).toBe(uuid);
     expect(container_label({id: uuid}, undefined)).toBe(uuid);
 });
+
+/***************************************************************
+ *      has_branch() / count_branches() / is_pure_collection()
+ ***************************************************************/
+test("has_branch: only a NON-EMPTY container branches", () => {
+    expect(has_branch({a: 1})).toBe(true);
+    expect(has_branch([1])).toBe(true);
+    expect(has_branch({})).toBe(false);
+    expect(has_branch([])).toBe(false);
+    expect(has_branch("x")).toBe(false);
+    expect(has_branch(0)).toBe(false);
+    expect(has_branch(null)).toBe(false);
+});
+
+test("count_branches: counts what gets a card, not what is there", () => {
+    expect(count_branches({a: 1, b: {}, c: {x: 1}, d: [1]})).toBe(2);
+    expect(count_branches([{}, [], {a: 1}])).toBe(1);
+    expect(count_branches({a: 1})).toBe(0);
+    expect(count_branches("x")).toBe(0);
+});
+
+test("is_pure_collection: a LIST of things, not a thing", () => {
+    /*  Every entry a container with something in it. */
+    expect(is_pure_collection([{a: 1}, {b: 2}])).toBe(true);
+    expect(is_pure_collection({x: {a: 1}, y: [1]})).toBe(true);
+
+    /*  One scalar is enough to make it a thing with content of its own,
+     *  and so is an EMPTY container: `{0}` has no child card to show it. */
+    expect(is_pure_collection([{a: 1}, 2])).toBe(false);
+    expect(is_pure_collection({x: {a: 1}, n: 3})).toBe(false);
+    expect(is_pure_collection([{a: 1}, {}])).toBe(false);
+
+    expect(is_pure_collection([])).toBe(false);
+    expect(is_pure_collection({})).toBe(false);
+    expect(is_pure_collection("x")).toBe(false);
+});
+
+test("is_pure_collection: the schema this came from", () => {
+    /*  The `devices` topic descriptor, cut to shape: `cols` is one key of
+     *  the dict like `pkey` is, and the only one that branches. */
+    let col = {id: "id", header: "Device", type: "string", flag: [], enum: {}};
+    let topic = {
+        topic_name: "devices",
+        pkey: "id",
+        pkey2s: [],             /*  empty: a row, not a branch  */
+        tkey: "tm",
+        system_flag: 1,
+        topic_version: 3,
+        cols: [col, col, col],
+    };
+
+    /*  The topic is NOT a pure collection: it has six scalar rows, so it
+     *  keeps its card. */
+    expect(is_pure_collection(topic)).toBe(false);
+    expect(count_branches(topic)).toBe(1);
+
+    /*  `cols` IS one: nothing but columns. It gets no card of its own --
+     *  its row in the topic names it, and the columns hang from the topic. */
+    expect(is_pure_collection(topic.cols)).toBe(true);
+    expect(count_branches(topic.cols)).toBe(3);
+
+    /*  A column has content, so it keeps its card. */
+    expect(is_pure_collection(col)).toBe(false);
+});

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"/>