@yuneta/gobj-ui 6.1.2 → 6.2.1

package/README.md

@@ -201,6 +201,23 @@ seen*:
   `projection.path`) while the rest of the tree keeps its tabs. Note the
   asymmetry that makes it a third mode and not a layout: `index` and `chrome`
   project a node's CHILDREN; `path` projects the way in.
+- **`remember_position` — an item points at where you LEFT that child.**
+  Without it a nav item points at the canonical route of its child, so a strip
+  of children behaves like a row of tabs that forgets: open a topic inside one,
+  move to a sibling, come back, and the tab is at its landing — browser Back
+  the only way to what was open. With it, the item carries the tail that was
+  last active under that child.
+
+  It stays a **real position**, which is the reason it is done here and not by
+  the viewer restoring itself: clicking is a navigation like any other, nothing
+  redirects and nothing argues with the url. A bare navigation to a child
+  records "its home", so choosing the landing sticks too.
+
+  Off by default: a tree whose children are pages wants the item to BE the
+  destination. On for a tree whose children are workspaces with a position
+  inside them — the agent console's strip of treedbs, each with its open topic.
+  Since 6.2.0.
+
 - **`nav_mode` — the three shapes as one runtime knob.** The two bullets above
   describe what a tree *declares*; `nav_mode` is how a user *chooses* between
   the shapes without the app rewriting anything:

package/package.json

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

package/src/c_yui_node.js

@@ -106,6 +106,7 @@ import {
     gobj_parent,
     gobj_gclass_name,
     gobj_read_attr,
+    gobj_read_bool_attr,
     gobj_read_pointer_attr,
     gobj_write_attr,
     gobj_subscribe_event,
@@ -124,6 +125,7 @@ import {
     join_route,
     projection_renders,
     child_nav_items,
+    nav_route_with_tail,
     chrome_visible,
     normalize_spec,
     is_nav_mode,
@@ -175,6 +177,7 @@ SDATA(data_type_t.DTP_JSON,     "children",     0,  null,   "Declared child spec
 SDATA(data_type_t.DTP_STRING,   "base_route",   0,  "",     "ROOT only: the declared route the whole tree hangs from"),
 SDATA(data_type_t.DTP_STRING,   "tree_version", 0,  "",     "ROOT only: version of the tree CONTRACT (its paths are public urls)"),
 SDATA(data_type_t.DTP_STRING,   "nav_mode",     0,  "stack","ROOT only: how the way in is shown — stack|back|path"),
+SDATA(data_type_t.DTP_BOOLEAN,  "remember_position", 0, false, "A nav item points at WHERE THE OPERATOR LEFT that child, not at its bare route: the tail last active under each child is remembered and appended. For a tree whose children are workspaces with a position inside them (a treedb and its open topic); off for one whose children are pages, where the item IS the destination"),
 
 SDATA(data_type_t.DTP_POINTER,  "$container",   0,  null,   "Root HTMLElement (shell view contract)"),
 SDATA_END()
@@ -187,6 +190,7 @@ let PRIVATE_DATA = {
     zone_sig:       null,   /*  their last item signature                 */
     content_gobj:   null,
     active_child:   null,   /*  child NODE gobj currently on the path    */
+    remembered:     null,   /*  child id -> tail last active under it     */
     chrome_depth:   null,   /*  effective for the active path (null = all) */
     distance:       0,      /*  segments from me down to the tip           */
     chain:          null,   /*  nodes from my child down to the tip        */
@@ -224,6 +228,7 @@ function mt_create(gobj)
     gobj_subscribe_event(gobj, null, {}, subscriber);
 
     priv.children = [];
+    priv.remembered = {};
     priv.navs = [];
     priv.zone_navs = {};
     priv.zone_sig = {};
@@ -627,6 +632,27 @@ function clear_navs(gobj)
  *      "index"  — I am the tip: the projection is the page.
  *      "chrome" — a child is showing: the projection is its chrome.
  ************************************************************/
+/************************************************************
+ *  WHERE A CHILD'S NAV ITEM POINTS.
+ *
+ *  One function, because two things read it and they must not
+ *  disagree: the item's own href, and the `active_route` the nav
+ *  is told to highlight — C_YUI_NAV matches by EXACT route, so an
+ *  item pointing at a remembered position while the active route
+ *  stayed canonical is an item that is never marked active.
+ ************************************************************/
+function child_nav_route(gobj, id)
+{
+    let my_route = route_of(gobj);
+    let base = my_route === "/" ? "" : my_route;
+    let route = `${base}/${id}`;
+
+    if(!gobj_read_bool_attr(gobj, "remember_position")) {
+        return route;
+    }
+    return nav_route_with_tail(route, gobj.priv.remembered[id]);
+}
+
 function render_projection(gobj, mode, $where, active_route, active_id, zones_only)
 {
     let priv = gobj.priv;
@@ -652,7 +678,12 @@ function render_projection(gobj, mode, $where, active_route, active_id, zones_on
             disabled: gobj_read_attr(child, "disabled")
         });
     }
-    let items = child_nav_items(specs, (id) => `${base}/${id}`);
+    /*  A nav item points at the child's canonical route, or — when this
+     *  tree remembers — at where the operator left that child. Same
+     *  contract either way: what the item carries is a real position,
+     *  so clicking it is a navigation and not a restore that would then
+     *  have to argue with the url.  */
+    let items = child_nav_items(specs, (id) => child_nav_route(gobj, id));
 
     let i = 0;
     for(let render of renders) {
@@ -714,7 +745,11 @@ function project_into_zone(gobj, render, items, active_route, active_id)
 {
     let priv = gobj.priv;
     let key = `${render.zone}|${render.layout}|${render.show_on || ""}`;
-    let sig = items.map((it) => it.id).join(",");
+    /*  The route is part of it: with `remember_position` an item's id
+     *  never changes while its destination does, so a signature of ids
+     *  alone would leave a persisted zone nav pointing at where the
+     *  operator was three navigations ago.  */
+    let sig = items.map((it) => `${it.id}=${it.route}`).join(",");
     let nav = priv.zone_navs[key];
 
     if(!nav) {
@@ -874,7 +909,10 @@ function render_child(gobj, child)
      *  level.  `chrome_depth` is how a node caps that for its corner
      *  of the tree (see resolve_chrome_depth). */
     if(chrome_visible(priv.distance, priv.chrome_depth)) {
-        render_projection(gobj, "chrome", priv.$chrome, route_of(child),
+        /*  The SAME route the item carries, or the nav has nothing to
+         *  match: it highlights by exact route.  */
+        render_projection(gobj, "chrome", priv.$chrome,
+            child_nav_route(gobj, gobj_read_attr(child, "node_id")),
             gobj_read_attr(child, "node_id"));
     }
     render_path(gobj, priv.$chrome);
@@ -989,6 +1027,18 @@ function activate(gobj, subpath, inherited_depth)
     priv.chrome_depth = info.chrome_depth;
     priv.chain = info.chain;
 
+    /*  WHERE THE OPERATOR IS INSIDE THIS CHILD, recorded before anything
+     *  is drawn, because the strip drawn on this very activation is the
+     *  one that has to point back here.
+     *
+     *  An empty tail is recorded too, and that is not the same as not
+     *  recording: navigating to a child's bare route IS the operator
+     *  choosing its home, and the item must stop pointing at the topic
+     *  they left three navigations ago.  */
+    if(head) {
+        priv.remembered[head] = tail || "";
+    }
+
     /*  Structure ends here: whatever is left of the url is data, and it
      *  belongs to the viewer.  Re-render only the first time — paging
      *  through data must not rebuild the DOM under the viewer. */

package/src/node_tree_model.js

@@ -169,6 +169,32 @@ export function projection_renders(projection, mode)
  *  `route_of(id)` returns the canonical route of a child — the
  *  node supplies it, so this file stays route-agnostic.
  ************************************************************/
+/***************************************************************
+ *  nav_route_with_tail(route, tail) -> where that item goes
+ *
+ *      A nav item normally points at the canonical route of a
+ *      child. When the tree remembers positions it points at
+ *      WHERE THE OPERATOR LEFT that child instead: the child's
+ *      route plus the tail last active under it.
+ *
+ *      It is the difference between a strip of treedbs that
+ *      behaves like a row of tabs and one that drops what each
+ *      tab had open every time you come back to it.
+ *
+ *      An empty tail is not a position: it means the operator was
+ *      at the child's own home, which is the canonical route.
+ ***************************************************************/
+export function nav_route_with_tail(route, tail)
+{
+    let base = String(route || "");
+    let rest = String(tail || "").replace(/^\/+/, "").replace(/\/+$/, "");
+
+    if(!rest) {
+        return base;
+    }
+    return base.replace(/\/+$/, "") + "/" + rest;
+}
+
 export function child_nav_items(children, route_of)
 {
     let items = [];

package/src/node_tree_model.test.js

@@ -3,7 +3,7 @@
  *
  *      Unit tests for the pure node-tree helpers.
  ***********************************************************************/
-import { test, expect } from "vitest";
+import { describe, test, expect } from "vitest";
 import {
     chrome_visible,
     split_subpath,
@@ -11,6 +11,7 @@ import {
     join_route,
     projection_renders,
     child_nav_items,
+    nav_route_with_tail,
     normalize_spec,
     is_nav_mode,
     nav_mode_renders,
@@ -350,3 +351,32 @@ test("back is depth 1 and path is depth 0, whatever the tree declared", () => {
     expect(nav_mode_depth(null, "stack")).toBe(null);
     expect(nav_mode_depth(2, "stack")).toBe(2);
 });
+
+describe("nav_route_with_tail — a nav item that points where you left", () => {
+    test("no tail is the canonical route: the child's own home", () => {
+        expect(nav_route_with_tail("/schemas/db", "")).toBe("/schemas/db");
+        expect(nav_route_with_tail("/schemas/db", null)).toBe("/schemas/db");
+        expect(nav_route_with_tail("/schemas/db", undefined)).toBe("/schemas/db");
+    });
+
+    test("a tail is appended, which is the whole point", () => {
+        expect(nav_route_with_tail("/schemas/db", "users")).toBe("/schemas/db/users");
+        expect(nav_route_with_tail("/schemas/db", "users/info"))
+            .toBe("/schemas/db/users/info");
+    });
+
+    test("it never doubles a slash, whichever side carries one", () => {
+        expect(nav_route_with_tail("/schemas/db/", "users")).toBe("/schemas/db/users");
+        expect(nav_route_with_tail("/schemas/db", "/users")).toBe("/schemas/db/users");
+        expect(nav_route_with_tail("/schemas/db/", "/users/")).toBe("/schemas/db/users");
+    });
+
+    test("a tail of only slashes is no tail", () => {
+        expect(nav_route_with_tail("/schemas/db", "/")).toBe("/schemas/db");
+    });
+
+    test("no route at all is not a crash", () => {
+        expect(nav_route_with_tail("", "users")).toBe("/users");
+        expect(nav_route_with_tail(null, null)).toBe("");
+    });
+});