@yuneta/gobj-ui 7.23.27 → 7.23.29

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -1273,8 +1273,11 @@ function configure_toolbar(gobj)
                      *  the rebuild came back OFF.  */
                     {
                         id: 'g6-icon-anchor', value: 'anchor',
+                        /*  PRESSED is "on" and only "on": pressed is the
+                         *  state the control is IN, and while it is
+                         *  arming it is asking for something instead.  */
                         className: 'EV_TOGGLE_ANCHOR' +
-                            (priv.anchor_state !== "off"? ' pressed_state' : '') +
+                            (priv.anchor_state === "on"? ' pressed_state' : '') +
                             (priv.anchor_state === "arming"? ' color_pending_state' : ''),
                         title: anchor_title(priv.anchor_state)
                     },
@@ -1600,6 +1603,37 @@ function configure_behaviour(gobj)
     graph_write_behaviors(gobj, behaviors);
 }
 
+/************************************************************
+ *  Count hooks and fkeys in topic desc, classify node type
+ ************************************************************/
+function calculate_hooks_fkeys_counter(desc)
+{
+    let cols = desc.cols;
+    desc.hooks_counter = 0;
+    desc.fkeys_counter = 0;
+
+    for(let i=0; i<cols.length; i++) {
+        let col = cols[i];
+        const field_desc = treedb_get_field_desc(col);
+        switch(field_desc.type) {
+            case "hook":
+                desc.hooks_counter++;
+                break;
+            case "fkey":
+                desc.fkeys_counter++;
+                break;
+        }
+    }
+
+    if(desc.hooks_counter === 0) {
+        desc.node_treedb_type = 'child';
+    } else if(desc.fkeys_counter === 0) {
+        desc.node_treedb_type = 'extended';
+    } else {
+        desc.node_treedb_type = 'hierarchical';
+    }
+}
+
 /************************************************************
  *  Build ports for a topic desc
  ************************************************************/
@@ -5712,7 +5746,7 @@ function refresh_minimap(gobj)
  *  same three-way choice — it lived inline in the theme refresh and is
  *  shared now. Returns null for a node that carries no desc.
  ************************************************************/
-function node_innerHTML_of(nd, theme, highlight, selected)
+function node_innerHTML_of(nd, theme, highlight, selected, anchored)
 {
     if(!nd || !nd.data || !nd.data.desc) {
         return null;
@@ -5725,17 +5759,17 @@ function node_innerHTML_of(nd, theme, highlight, selected)
         case 'child':
             return build_chip_innerHTML(
                 desc.color, theme, record.icon, label, record.id,
-                highlight, selected
+                highlight, selected, anchored
             );
         case 'extended':
             return build_node_innerHTML(
                 desc.color, theme, record.icon, label,
-                desc.topic_name, true, record.id, highlight, selected
+                desc.topic_name, true, record.id, highlight, selected, anchored
             );
         case 'hierarchical':
             return build_node_innerHTML(
                 desc.color, theme, record.icon, label,
-                desc.topic_name, false, record.id, highlight, selected
+                desc.topic_name, false, record.id, highlight, selected, anchored
             );
     }
     return null;
@@ -5765,7 +5799,8 @@ function repaint_cards(gobj, ids)
     let updates = [];
     for(let id of ids) {
         let html = node_innerHTML_of(
-            graph.getNodeData(id), priv.theme, focus.has(id), selected.has(id)
+            graph.getNodeData(id), priv.theme, focus.has(id), selected.has(id),
+            priv.anchor_state === "on" && id === priv.anchor_id
         );
         if(html !== null) {
             updates.push({id: id, style: {innerHTML: html}});
@@ -5871,6 +5906,25 @@ function refresh_default_edges_theme(gobj, theme)
  *  it, which is also the order that reads correctly when only one
  *  of them is on.
  ************************************************************/
+/************************************************************
+ *  The mark of the card the CAMERA is holding.
+ *
+ *  An outline and not another ring, and DASHED: the two rings
+ *  already mean things here -- amber is a find match or a
+ *  focused topic, blue is the selection -- and a third solid
+ *  ring would be a third thing to learn in the same channel.
+ *  A dash is a different channel, so it reads beside either of
+ *  them, and it says "provisional" the way a camera state is.
+ *
+ *  The same dash the other two viewers draw: this is one
+ *  feature with one control, and it should not be three
+ *  drawings.
+ ************************************************************/
+function anchor_outline(anchored)
+{
+    return anchored? "outline: 3px dashed #fa8c16; outline-offset: 2px;" : "";
+}
+
 function ring_shadow(highlight, selected, base_shadow)
 {
     let rings = [];
@@ -5897,7 +5951,7 @@ function ring_shadow(highlight, selected, base_shadow)
  *  but lighter (1px border, no shadow, single line). The name is
  *  always legible (ellipsis + native title tooltip on overflow).
  ************************************************************/
-function build_chip_innerHTML(color, theme, icon, label, key, highlight, selected)
+function build_chip_innerHTML(color, theme, icon, label, key, highlight, selected, anchored)
 {
     let title = key || label;
     let dark = (theme === "dark");
@@ -5922,13 +5976,14 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
     }
 
     return `
-<div title="${escapeHtml(title)}" style="
+<div class="TREEDB_CARD" title="${escapeHtml(title)}" style="
     box-sizing: border-box;
     width: 100%;
     height: 100%;
     background: ${bg};
     border: ${highlight? "3px" : "1px"} solid ${border};
     ${ring_shadow(highlight, selected, "")}
+    ${anchor_outline(anchored)}
     border-radius: 8px;
     color: ${text_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -5955,7 +6010,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
  *  colour is kept (per-topic differentiation) but softened via
  *  color-mix instead of a harsh saturated fill. Theme-aware.
  ************************************************************/
-function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight, selected)
+function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight, selected, anchored)
 {
     let title = key || label;
     let dark = (theme === "dark");
@@ -6011,7 +6066,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     }
 
     return `
-<div title="${escapeHtml(title)}" style="
+<div class="TREEDB_CARD" title="${escapeHtml(title)}" style="
     box-sizing: border-box;
     width: 100%;
     height: 100%;
@@ -6019,6 +6074,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     border: ${highlight? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
     ${ring_shadow(highlight, selected, shadow)}
+    ${anchor_outline(anchored)}
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     display: flex;
@@ -7571,6 +7627,7 @@ function after_camera(gobj, moved)
 function ac_toggle_anchor(gobj, event, kw, src)
 {
     let priv = gobj.priv;
+    let was = priv.anchor_id;
 
     if(priv.anchor_state === "off") {
         priv.anchor_state = "arming";
@@ -7580,6 +7637,9 @@ function ac_toggle_anchor(gobj, event, kw, src)
     }
 
     update_toolbar(gobj);
+    if(was) {
+        repaint_cards(gobj, new Set([was]));
+    }
     return 0;
 }
 
@@ -7838,6 +7898,7 @@ function ac_node_click(gobj, event, kw, src)
         priv.anchor_id = node_id;
         priv.anchor_state = "on";
         update_toolbar(gobj);
+        repaint_cards(gobj, new Set([node_id]));
 
         /*  POSTED, not made here: a camera move issued inside G6's click
          *  dispatch is swallowed -- see the note in yui_graph_center_on.

package/src/c_yui_gobj_tree_js.js

@@ -22,6 +22,8 @@ import {
     gobj_write_attr,
     gobj_send_event,
     gobj_post_event,
+    kw_get_local_storage_value,
+    kw_set_local_storage_value,
     gobj_write_str_attr,
     gobj_read_str_attr,
     gobj_publish_event,
@@ -120,6 +122,123 @@ const ZOOM_CANVAS = {type: 'zoom-canvas', animation: false};
 const BEHAVIORS_READING = ['drag-canvas', ZOOM_CANVAS, 'drag-element'];
 const BEHAVIORS_PICKING = ['drag-canvas', ZOOM_CANVAS];
 
+/*
+ *  Where this view is remembered between visits.
+ *
+ *  In localStorage and not in a persistent attr, for the reason the
+ *  framework gives itself: only a SERVICE can load or save persistent
+ *  attrs, and this gclass is hosted as a child. It is also the right
+ *  place on its own terms -- how somebody left THEIR tree arranged is
+ *  a fact about that browser, not about the yuno.
+ *
+ *  Keyed by the gobj's name so two trees in one app do not overwrite
+ *  each other's arrangement.
+ */
+const VIEW_STORE_PREFIX = "yui_gobj_tree_view:";
+
+/*  What is worth carrying back: the layout, where the camera was, and
+ *  which branches were folded. The anchor goes too -- it is a camera
+ *  state like the other two, and coming back to a tree still holding
+ *  the node you left it on is the point of holding it.  */
+function view_store_key(gobj)
+{
+    return VIEW_STORE_PREFIX + gobj_name(gobj);
+}
+
+function restore_view_shape(gobj)
+{
+    let priv = gobj.priv;
+    let state = load_view_state(gobj);
+
+    if(!state) {
+        return;
+    }
+    if(state.layout && LAYOUTS[state.layout]) {
+        gobj_write_str_attr(gobj, "layout", state.layout);
+        /*  And the picker with it: the toolbar was built from the
+         *  attr's default a moment ago, so without this the graph draws
+         *  the remembered layout while the control names another.  */
+        if(priv.$layout_select) {
+            priv.$layout_select.value = state.layout;
+        }
+    }
+    if(state.collapsed && typeof state.collapsed === "object") {
+        priv.collapse_state = Object.assign({}, state.collapsed);
+    }
+}
+
+function restore_view_state(gobj)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+    let state = load_view_state(gobj);
+
+    if(!graph || !state) {
+        return false;
+    }
+
+    let done = false;
+    priv.restoring = true;
+    try {
+        if(typeof state.zoom === "number" && state.zoom > 0) {
+            graph.zoomTo(state.zoom);
+            priv.last_zoom = state.zoom;
+            done = true;
+        }
+        if(Array.isArray(state.position) && state.position.length >= 2) {
+            graph.translateTo([state.position[0], state.position[1]]);
+            done = true;
+        }
+        if(state.anchor) {
+            /*  By NAME, never by node id: ids are generated per build,
+             *  and this one was written in another session.  */
+            priv.anchor_name = state.anchor;
+            priv.anchor_state = "on";
+            reanchor(gobj);
+            yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+            paint_anchor_mark(gobj);
+        }
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: cannot restore the saved view: ${e}`);
+    } finally {
+        priv.restoring = false;
+    }
+
+    yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+    return done;
+}
+
+function save_view_state(gobj)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
+    if(!graph || priv.restoring) {
+        return;     /*  mid-restore: that is our own writing coming back  */
+    }
+
+    let state = {
+        layout: gobj_read_str_attr(gobj, "layout"),
+        collapsed: priv.collapse_state || {},
+        anchor: (priv.anchor_state === "on")? priv.anchor_name: "",
+    };
+    try {
+        state.zoom = graph.getZoom();
+        state.position = graph.getPosition();
+    } catch(e) {
+        /*  between renders: keep the rest, the camera is not readable  */
+    }
+
+    kw_set_local_storage_value(view_store_key(gobj), state);
+}
+
+function load_view_state(gobj)
+{
+    let state = kw_get_local_storage_value(view_store_key(gobj), null, false);
+
+    return (state && typeof state === "object")? state: null;
+}
+
 let PRIVATE_DATA = {
     canvas_id: "",
     graph: null,
@@ -146,6 +265,8 @@ let PRIVATE_DATA = {
     anchor_id:      "",     // the node the camera keeps in the middle
     anchor_name:    "",     // its full_name, which survives a rebuild
     anchor_state:   "off",  // "off" | "arming" | "on"
+    restoring:      false,  // guards the store against its own restore
+    restored:       false,  // the saved arrangement is applied ONCE
     last_zoom:      1,      // tells a wheel zoom from a drag in aftertransform
 };
 
@@ -369,6 +490,14 @@ function mt_create(gobj)
  ***************************************************************/
 function mt_start(gobj)
 {
+    /*
+     *  The layout and the folds go back BEFORE the first build: they
+     *  decide what is built, so restoring them afterwards would mean
+     *  building the tree twice and showing the wrong one first.
+     *  The camera goes back after, once there is something to point at.
+     */
+    restore_view_shape(gobj);
+
     build_graph(gobj);
     load_tree(gobj);
 }
@@ -530,8 +659,15 @@ function build_popover(gobj, $container)
 
     let $close = document.createElement("button");
     $close.type = "button";
+    /*  Named so a stylesheet can reach it: the size a FINGER needs is a
+     *  media query, and a media query cannot beat an inline style
+     *  without one to hang off. See `lib_graph.css`.  */
+    $close.className = "GOBJ_TREE_POPOVER_CLOSE";
     $close.textContent = "×";
     $close.title = t("close");
+    $close.setAttribute("data-i18n-title", "close");
+    $close.setAttribute("aria-label", t("close"));
+    $close.setAttribute("data-i18n-aria-label", "close");
     $close.style.cssText = `
         background: transparent;
         border: none;
@@ -710,6 +846,10 @@ function build_graph(gobj)
         if(priv.anchor_state === "on" && priv.anchor_id) {
             yui_graph_center_on(priv.graph, priv.anchor_id);
         }
+        /*  Where the reader left the camera. One hook covers the wheel,
+         *  the drag and every zoom button, which is why it is not
+         *  written into each of them.  */
+        save_view_state(gobj);
     });
 
     graph.on(NodeEvent.CLICK, (evt) => {
@@ -947,7 +1087,7 @@ function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, c
         );
 
         node_html = `
-<div style="
+<div class="GOBJ_CARD" data-gobj-name="${escapeHtml(full_name)}" style="
     width: ${width}px;
     height: ${height}px;
     background: ${cs.bg};
@@ -999,7 +1139,7 @@ function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, c
         ).join("");
 
         node_html = `
-<div style="
+<div class="GOBJ_CARD" data-gobj-name="${escapeHtml(full_name)}" style="
     width: ${width}px;
     height: ${height}px;
     background: ${cs.bg};
@@ -1145,6 +1285,7 @@ function load_tree(gobj)
              *  there.  (`anchor` below is the OTHER one -- see the
              *  note in PRIVATE_DATA.)  */
             reanchor(gobj);
+            paint_anchor_mark(gobj);
 
             if(anchor) {
                 restore_view_anchored(gobj, anchor);
@@ -1154,6 +1295,19 @@ function load_tree(gobj)
                 return;
             }
 
+            /*
+             *  The arrangement this browser was left in, once: after
+             *  that the reader's own camera wins, and a restore on
+             *  every rebuild would drag them back every time they
+             *  folded something.
+             */
+            if(!priv.restored) {
+                priv.restored = true;
+                if(restore_view_state(gobj)) {
+                    return;
+                }
+            }
+
             /*
              *  ACTUAL SIZE, not fit.  A tree of anything real does not
              *  fit at a zoom anybody can read, so fitting answered
@@ -1795,6 +1949,7 @@ class GobjLanesHLayout extends BaseLayout {
  ************************************************************/
 function ac_refresh(gobj, event, kw, src)
 {
+    save_view_state(gobj);
     refresh_tree(gobj);
     return 0;
 }
@@ -1841,10 +1996,12 @@ function ac_change_layout(gobj, event, kw, src)
     }
 
     apply_layout(gobj);
+    save_view_state(gobj);
 
     /*
      *  Rebuild nodes because compact/full HTML differs per layout
      */
+    save_view_state(gobj);
     refresh_tree(gobj);
 
     return 0;
@@ -1902,6 +2059,7 @@ function ac_toggle_collapse(gobj, event, kw, src)
         priv.collapse_state[node_data.full_name] = "collapsed";
     }
 
+    save_view_state(gobj);
     refresh_tree(gobj, {anchor: anchor});
     return 0;
 }
@@ -2022,12 +2180,46 @@ function ac_center_anchor(gobj, event, kw, src)
 {
     let priv = gobj.priv;
 
+    paint_anchor_mark(gobj);
+    save_view_state(gobj);
     if(priv.anchor_state === "on" && priv.anchor_id) {
         yui_graph_center_on(priv.graph, priv.anchor_id);
     }
     return 0;
 }
 
+/************************************************************
+ *   Mark the card the camera is holding.
+ *
+ *   A class on the card's own element and not a G6 node state:
+ *   G6 paints no state style on an html node.
+ *
+ *   Re-applied after every rebuild, because the cards are new
+ *   DOM each time and the mark would otherwise last until the
+ *   next expand.
+ ************************************************************/
+function paint_anchor_mark(gobj)
+{
+    let priv = gobj.priv;
+    let $container = gobj_read_attr(gobj, "$container");
+
+    if(!$container) {
+        return;
+    }
+    for(let $card of $container.querySelectorAll('.GOBJ_CARD_ANCHORED')) {
+        $card.classList.remove('GOBJ_CARD_ANCHORED');
+    }
+    if(priv.anchor_state !== "on" || !priv.anchor_name) {
+        return;
+    }
+    let $it = $container.querySelector(
+        '.GOBJ_CARD[data-gobj-name="' + CSS.escape(priv.anchor_name) + '"]'
+    );
+    if($it) {
+        $it.classList.add('GOBJ_CARD_ANCHORED');
+    }
+}
+
 /************************************************************
  *   Reading, or picking the node to anchor.
  ************************************************************/
@@ -2068,6 +2260,8 @@ function ac_toggle_anchor(gobj, event, kw, src)
 
     yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
     set_picking_mode(gobj, priv.anchor_state === "arming");
+    paint_anchor_mark(gobj);
+    save_view_state(gobj);
     return 0;
 }
 
@@ -2202,6 +2396,7 @@ function ac_show(gobj, event, kw, src)
     /*
      *  Always refresh on show: the tree may have changed while hidden
      */
+    save_view_state(gobj);
     refresh_tree(gobj);
 
     if(graph) {