@yuneta/gobj-ui 7.23.185 → 7.23.187

package/src/c_g6_nodes_tree.js

@@ -77,6 +77,7 @@ import {
     kw_get_dict_value,
     kw_set_dict_value,
     kw_clone_by_keys,
+    json_deep_copy,
     json_object_update,
     json_object_update_missing,
     json_object_size,
@@ -91,6 +92,11 @@ import {
     safeSrc,
 } from "@yuneta/gobj-js";
 
+import {
+    plan_graph_saves,
+    topic_arrangement_changed,
+} from "./graph_save_plan.js";
+
 import {
     addClasses,
     removeClasses,
@@ -483,6 +489,7 @@ let PRIVATE_DATA = {
     graph:              null,       // Instance of G6
     __graphs__:         [],         // Rows of __graphs__
     _graph_properties:  {},         // topic_name → {nodes: {node_id: {x,y,size,...}}}
+    _saved_graph_properties: {},    // the same, as the BACKEND has it: what a Save compares against
     yet_showed:         false,
     edit_mode:          false,
     operation_mode:     null,
@@ -960,7 +967,12 @@ function build_graph(gobj)
         container: priv.$container,
         animation: false,
         autoResize: false,
-        zoomRange: [0.2, 4],
+        /*  The floor was 0.2, and a treedb of a few hundred records does
+         *  not fit in a screen at 20%: the reader could see the shape of
+         *  the whole thing in the minimap and never on the canvas. Fit
+         *  still stops at a legible zoom on purpose (graph_fit_readable);
+         *  zooming out by hand is the reader's business.  */
+        zoomRange: [0.02, 4],
         node: {  // WARNING this affect to all nodes with prevalence over individual defines!
             palette: {
                 type: 'group',
@@ -2931,6 +2943,7 @@ function draw_link(
         parent_topic: parent_topic,
         parent_id:    parent_id,
         hook_name:    hook_name,
+        child_topic:  child_topic,
         child_id:     child_id,
         is_tree:      is_tree,
     });
@@ -3051,6 +3064,7 @@ function build_graph_properties(gobj)
 {
     let priv = gobj.priv;
     priv._graph_properties = {};
+    priv._saved_graph_properties = {};
 
     for(let i = 0; i < priv.__graphs__.length; i++) {
         let rec = priv.__graphs__[i];
@@ -3060,6 +3074,11 @@ function build_graph_properties(gobj)
         let props = rec.properties;
         if(is_object(props)) {
             priv._graph_properties[rec.topic] = props;
+            /*  A COPY: the line above hands the record's own object to
+             *  the view, which then arranges it in place, so anything
+             *  kept by reference would change with it and a Save would
+             *  never find a difference.  */
+            priv._saved_graph_properties[rec.topic] = json_deep_copy(props);
         }
     }
 }
@@ -3205,34 +3224,30 @@ function save_geometry(gobj)
         update_edge_geometry(gobj, edges[i].id);
     }
 
-    // Save one __graphs__ record per topic
-    let origin = gobj_read_str_attr(gobj_yuno(), "node_uuid");
-
-    for(const [topic_name, properties] of Object.entries(priv._graph_properties)) {
-        // Add origin metadata
-        properties.__origin__ = origin;
-
-        let kw_update = {
-            treedb_name: priv.treedb_name,
-            topic_name: "__graphs__",
-            record: {
-                id: topic_name,
-                topic: topic_name,
-                active: true,
-                properties: properties
-            },
-            options: {
-                list_dict: true,
-                autolink: false,
-                create: true    // Create if doesn't exist, update if it does
-            }
-        };
-        gobj_publish_event(gobj, "EV_UPDATE_NODE", kw_update);
+    /*  One __graphs__ record per topic that CHANGED, and nothing for
+     *  the rest. The Save button says that something happened, never
+     *  what: it lights from `history.canUndo()` for the moves G6
+     *  records and from mark_graph_dirty() for everything it does not
+     *  (a colour, a pill, a per-topic default). So the topics are
+     *  chosen by comparing what the view holds against what the
+     *  backend has -- which sees both kinds of change, and goes on
+     *  working after an undo, a redo, or the history.clear() that
+     *  ac_save_graph() does one line before calling this.
+     *
+     *  The store is append-only: a topic written with the content it
+     *  already had is a record that says nothing, for ever. Moving one
+     *  card of a five-topic treedb used to append five.  */
+    let plan = plan_graph_saves(priv._graph_properties, priv._saved_graph_properties);
+    for(let i = 0; i < plan.length; i++) {
+        save_topic_graph_properties(gobj, plan[i]);
     }
 }
 
 /************************************************************
  *  Save __graphs__ properties for a single topic to backend.
+ *
+ *  The ONE door to `__graphs__`: a caller that knows a topic moved
+ *  says so, and this decides whether the backend needs telling.
  ************************************************************/
 function save_topic_graph_properties(gobj, topic_name)
 {
@@ -3242,9 +3257,30 @@ function save_topic_graph_properties(gobj, topic_name)
         return;
     }
 
+    /*  A record that says what the record under it says is a record
+     *  that will be read for ever and mean nothing -- the store is
+     *  append-only. It reached here by two doors: the Save, which
+     *  wrote every topic the view had loaded, and the delete of a
+     *  node that carried no geometry of its own.  */
+    if(!topic_arrangement_changed(properties, priv._saved_graph_properties[topic_name])) {
+        return;
+    }
+
     let origin = gobj_read_str_attr(gobj_yuno(), "node_uuid");
     properties.__origin__ = origin;
 
+    /*  What the backend will hold once this is written. Taken BEFORE
+     *  the publish and as a copy, because the object below travels by
+     *  reference and goes on being arranged after the write.
+     *
+     *  Nothing answers an `EV_UPDATE_NODE` of `__graphs__` -- the view
+     *  writes that topic itself and is deliberately not told about it
+     *  (see the EV_RECORD_WRITTEN of C_YUI_TREEDB_GRAPH) -- so this is
+     *  the write taken for granted. A refused one leaves the view
+     *  believing the backend holds an arrangement it does not, until
+     *  the next load reads the records again.  */
+    priv._saved_graph_properties[topic_name] = json_deep_copy(properties);
+
     let kw_update = {
         treedb_name: priv.treedb_name,
         topic_name: "__graphs__",
@@ -3688,7 +3724,7 @@ async function graph_fit_selection(gobj, ids)
     let bh = Math.max(1, maxy - miny);
 
     let zoom = Math.min(vw / bw, vh / bh);
-    let range = graph.getZoomRange() || [0.2, 4];
+    let range = graph.getZoomRange() || [0.02, 4];
     zoom = Math.max(range[0], Math.min(range[1], zoom));
 
     await graph.zoomTo(zoom);
@@ -7765,7 +7801,6 @@ function refresh_default_edges_theme(gobj, theme)
     if(!graph) {
         return;
     }
-    let dark = (theme === "dark");
     let edges = graph.getData().edges || [];
     let updates = [];
     for(let i = 0; i < edges.length; i++) {
@@ -7773,10 +7808,7 @@ function refresh_default_edges_theme(gobj, theme)
         if(!d.themed_default) {
             continue;
         }
-        let stroke = d.is_tree
-            ? (dark ? '#22a7c2' : '#0e7490')
-            : (dark ? '#8b94a3' : '#6b7280');
-        updates.push({ id: edges[i].id, style: { stroke: stroke } });
+        updates.push({id: edges[i].id, style: {stroke: default_edge_stroke(gobj, d, theme)}});
     }
     if(updates.length > 0) {
         graph.updateEdgeData(updates);
@@ -8658,26 +8690,60 @@ function apply_edge_properties(gobj, edge_id, lineWidth, stroke, scope)
     deselect_edge(gobj);
 }
 
+/************************************************************
+ *  The colour a link is DRAWN in: the colour of the two knobs it
+ *  joins.
+ *
+ *  Both ends of a link wear the CHILD topic's colour -- the
+ *  parent's hook port is painted with the colour of whatever may
+ *  hang there, and the child's fkey port with its own (see
+ *  build_ports) -- so the line between them has one obvious
+ *  colour, and a reader follows a link by its hue instead of
+ *  tracing a grey thread across the canvas.
+ *
+ *  It goes through port_rim(): the FILL of a port says which
+ *  topic, and a line on the canvas is a graphical object that
+ *  needs 3:1 against it, which that mix clears in both themes
+ *  (9.11 dark, 3.80 light) while keeping the hue. So a link is
+ *  drawn in exactly the colour of the rim of the two knobs it
+ *  ends on.
+ *
+ *  The containment/tree relation (parent and child of the same
+ *  topic) is no longer marked by a teal of its own -- it is that
+ *  topic's colour like any other link, and what still tells it
+ *  apart is its WIDTH.
+ *
+ *  A topic with no colour, or an edge of a graph with no schema
+ *  yet, keeps the neutral grey this used to give everything.
+ ************************************************************/
+function default_edge_stroke(gobj, d, theme)
+{
+    let priv = gobj.priv;
+    let desc = is_object(priv.descs)? priv.descs[d.child_topic] : null;
+    if(desc && desc.color) {
+        return port_rim(desc.color, theme);
+    }
+    let dark = (theme === "dark");
+    return d.is_tree? (dark? '#22a7c2' : '#0e7490') : (dark? '#8b94a3' : '#6b7280');
+}
+
 /************************************************************
  *  The style an edge INHERITS, before anything saved for the
  *  edge itself: its hook's default in the parent topic, else the
  *  parent topic's default for every edge, else the library's.
  *
- *  The library's: neutral grey, teal for the containment/tree
- *  relation (parent and child of the same topic, a
- *  self-hierarchy). `themed_default` says the colour is still the
- *  library's, so a theme toggle re-themes it and leaves a chosen
- *  one alone.
+ *  The library's: the colour of the ports it joins (see
+ *  default_edge_stroke), and a wider line for the
+ *  containment/tree relation. `themed_default` says the colour is
+ *  still the library's, so a theme toggle re-themes it and leaves
+ *  a chosen one alone.
  ************************************************************/
 function edge_inherited_style_of(gobj, d)
 {
     let priv = gobj.priv;
-    let dark = (priv.theme === "dark");
     let style = {
         lineWidth: d.is_tree ? 2 : 1.6,
-        stroke: d.is_tree
-            ? (dark ? '#22a7c2' : '#0e7490')
-            : (dark ? '#8b94a3' : '#6b7280'),
+        stroke: default_edge_stroke(gobj, d, priv.theme),
         themed_default: true,
     };
 

package/src/c_yui_schema_editor.js

@@ -810,7 +810,9 @@ function render_toolbar(gobj)
      *----------------------------------------------*/
     let $right = [];
     if(priv.treedb_id && has_model) {
-        $right.push(toolbar_button("SCHEMA_DIAGRAM_BTN", "yi-hexagon-nodes",
+        /*  The compass, like every other door to a SCHEMA: the
+         *  `hexagon-nodes` it wore is the graph of the DATA.  */
+        $right.push(toolbar_button("SCHEMA_DIAGRAM_BTN", "yi-compass-drafting",
             priv.diagram ? "topics" : "diagram", "EV_TOGGLE_DIAGRAM", false));
         $right.push(toolbar_button("SCHEMA_VALIDATE_BTN", "yi-square-check",
             "check", "EV_VALIDATE", false));

package/src/c_yui_treedb_topics.js

@@ -335,12 +335,19 @@ function build_ui(gobj)
                         }
                     }],
                     /*  Landing view toggle: cards grid <-> schema graph
-                     *  (topics as nodes). Shown only on the landing. */
+                     *  (topics as nodes). Shown only on the landing.
+                     *
+                     *  The glyph is the draughtsman's compass, not the
+                     *  `hexagon-nodes` of the graph: the button one place
+                     *  to its left opens the graph of the DATA, and the
+                     *  two wore the same shape with only their labels
+                     *  telling them apart -- which on a narrow toolbar is
+                     *  nothing. A schema is the PLAN of the treedb. */
                     ['button', {class: 'button TREEDB_LANDING_TOGGLE is-hidden',
                                 title: t('schema graph'), 'aria-label': t('schema graph'),
                                 'data-i18n-title': 'schema graph',
                                 'data-i18n-aria-label': 'schema graph'}, [
-                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-hexagon-nodes')]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-compass-drafting')]],
                         ['span', {i18n: 'schema'}, 'schema']
                     ], {
                         click: (evt) => {
@@ -348,6 +355,24 @@ function build_ui(gobj)
                             gobj_send_event(gobj, "EV_TOGGLE_LANDING_VIEW", {}, gobj);
                         }
                     }],
+                    /*  The schema as JSON -- the `descs` the view is drawing,
+                     *  which is what a person writing a schema literal, or
+                     *  chasing a flag that did not take, actually needs to
+                     *  read. Landing-only, like the toggle it stands next
+                     *  to; the `raw json` button further right is another
+                     *  thing entirely (the tranger's content). */
+                    ['button', {class: 'button TREEDB_SCHEMA_JSON_BTN is-hidden',
+                                title: t('schema json'), 'aria-label': t('schema json'),
+                                'data-i18n-title': 'schema json',
+                                'data-i18n-aria-label': 'schema json'}, [
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-code')]],
+                        ['span', {i18n: 'schema json'}, 'schema json']
+                    ], {
+                        click: (evt) => {
+                            evt.stopPropagation();
+                            gobj_send_event(gobj, "EV_OPEN_SCHEMA_JSON", {}, gobj);
+                        }
+                    }],
                     /*  The backend this view browses. The tab that hosts this
                      *  view is labelled with the TREEDB name, and the same
                      *  treedb name lives on more than one node — two tabs
@@ -817,6 +842,7 @@ function show_topics_landing(gobj)
     let $info = $container.querySelector(".TREEDB_TOPIC_INFO");
     let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
     let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+    let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
     if($tabs) {
         $tabs.classList.add("is-hidden");
     }
@@ -835,6 +861,11 @@ function show_topics_landing(gobj)
         $toggle.classList.remove("is-hidden");   /*  the toggle lives on the landing  */
         $toggle.classList.toggle("is-primary", schema_mode);
     }
+    if($schema_json) {
+        /*  The schema's json is worth reading when the schema is what is
+         *  on screen; on the cards grid it is one more button in the way.  */
+        $schema_json.classList.toggle("is-hidden", !schema_mode);
+    }
     if(schema_mode) {
         if($landing) {
             $landing.classList.add("is-hidden");
@@ -946,6 +977,7 @@ function show_topic_detail(gobj)
     let $info = $container.querySelector(".TREEDB_TOPIC_INFO");
     let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
     let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+    let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
     if($landing) {
         $landing.classList.add("is-hidden");
     }
@@ -955,6 +987,9 @@ function show_topic_detail(gobj)
     if($info) {
         $info.classList.add("is-hidden");
     }
+    if($schema_json) {
+        $schema_json.classList.add("is-hidden");
+    }
     if($toggle) {
         $toggle.classList.add("is-hidden");   /*  landing-only  */
     }
@@ -1010,12 +1045,16 @@ function show_topic_info(gobj, topic)
     let $schema = $container.querySelector(".TREEDB_TOPICS_SCHEMA");
     let $back = $container.querySelector(".TREEDB_TOPICS_BACK");
     let $toggle = $container.querySelector(".TREEDB_LANDING_TOGGLE");
+    let $schema_json = $container.querySelector(".TREEDB_SCHEMA_JSON_BTN");
     if($landing) {
         $landing.classList.add("is-hidden");
     }
     if($schema) {
         $schema.classList.add("is-hidden");
     }
+    if($schema_json) {
+        $schema_json.classList.add("is-hidden");
+    }
     if($toggle) {
         $toggle.classList.add("is-hidden");
     }
@@ -1307,7 +1346,7 @@ function register_sub_routes(gobj)
     let nodes = [];
     if(is_object(gobj_read_attr(gobj, "landing_routes"))) {
         nodes.push({route: base + "/schema", label: "schema",
-                    icon: "yi-hexagon-nodes", gclass: "C_YUI_TREEDB_SCHEMA"});
+                    icon: "yi-compass-drafting", gclass: "C_YUI_TREEDB_SCHEMA"});
     }
     if(is_object(descs)) {
         for(let topic of Object.keys(descs)) {
@@ -1655,13 +1694,18 @@ function is_mobile()
  *  whole service (lazy drill). CHILD model: the viewer publishes
  *  EV_EXPAND_PATH to us.
  ************************************************************/
-function open_json_viewer(gobj)
+function open_json_viewer(gobj, opts)
 {
     let priv = gobj.priv;
+    let schema = !!(opts && opts.schema);
 
-    /*  Already open: just re-fetch.  */
+    /*  Already open: just re-fetch. The schema needs no fetch -- it is
+     *  the `descs` this view already holds -- so a second click on a
+     *  viewer that is already showing it does nothing.  */
     if(priv.json_win || priv.json_modal) {
-        request_print_tranger(gobj, "");
+        if(!schema) {
+            request_print_tranger(gobj, "");
+        }
         return;
     }
 
@@ -1681,7 +1725,11 @@ function open_json_viewer(gobj)
             /*  No `title`: the host titles it — the window's title bar on
              *  desktop, the dialog's header on mobile. The viewer's own
              *  title would land INSIDE that host, doubling it.  */
-            subscriber: gobj        /*  publishes EV_EXPAND_PATH to us  */
+            subscriber: gobj,       /*  publishes EV_EXPAND_PATH to us  */
+            /*  The schema is here already and it is small: it goes in
+             *  whole, and no drill-down happens because nothing is
+             *  collapsed.  */
+            json_data: schema? gobj_read_attr(gobj, "descs") : null
         },
         gobj
     );
@@ -1703,7 +1751,7 @@ function open_json_viewer(gobj)
             dialog:        true,
             logical_class: "TREEDB_JSON_SHEET",
             title_prefix: priv.treedb_name,
-            title:         "raw json",
+            title:         schema? "schema json" : "raw json",
             t:             t,
             on_close: () => {
                 if(gobj_is_destroying(gobj)) {
@@ -1733,8 +1781,8 @@ function open_json_viewer(gobj)
                 height:     620,
                 logical_class: "TREEDB_JSON_WINDOW",
                 title_prefix: priv.treedb_name,
-                title:      "raw json",
-                icon:       "yi-eye",
+                title:      schema? "schema json" : "raw json",
+                icon:       schema? "yi-code" : "yi-eye",
                 body:       $box,
                 manager:    null,
                 on_close: () => {
@@ -1754,7 +1802,9 @@ function open_json_viewer(gobj)
         gobj_start(priv.json_win);
     }
 
-    request_print_tranger(gobj, "");
+    if(!schema) {
+        request_print_tranger(gobj, "");
+    }
 }
 
 /************************************************************
@@ -2718,6 +2768,24 @@ function ac_open_json(gobj, event, kw, src)
     return 0;
 }
 
+/********************************************
+ *  The schema, as the json it is: the `descs` the schema graph is
+ *  drawing. Same viewer and same host as the tranger's raw json --
+ *  one at a time, so it closes whatever was open first.
+ ********************************************/
+function ac_open_schema_json(gobj, event, kw, src)
+{
+    if(!is_object(gobj_read_attr(gobj, "descs"))) {
+        /*  Not reachable by hand -- the button only exists while the
+         *  schema is on screen, which needs the descs -- so this is a
+         *  broken caller, not something to tell the reader about.  */
+        log_error(`${gobj_short_name(gobj)}: schema json with no descs`);
+        return -1;
+    }
+    open_json_viewer(gobj, {schema: true});
+    return 0;
+}
+
 /********************************************
  *  Open the graph where the reader left it: its last visited
  *  route under the graph's base -- `<graph>/<topic>` when a topic
@@ -2823,6 +2891,7 @@ function create_gclass(gclass_name)
             ["EV_DELETE_RECORD",        ac_delete_record,           null],
             ["EV_REFRESH_TOPIC",        ac_refresh_topic,           null],
             ["EV_OPEN_JSON",            ac_open_json,               null],
+            ["EV_OPEN_SCHEMA_JSON",     ac_open_schema_json,        null],
             ["EV_OPEN_GRAPH",           ac_open_graph,              null],
             ["EV_EXPAND_PATH",          ac_json_expand_path,        null],
             ["EV_JSON_CLOSED",          ac_json_closed,             null],
@@ -2857,6 +2926,7 @@ function create_gclass(gclass_name)
                                     event_flag_t.EVF_NO_WARN_SUBS],
         ["EV_REFRESH_TOPIC",        0],
         ["EV_OPEN_JSON",            0],
+        ["EV_OPEN_SCHEMA_JSON",     0],
         ["EV_OPEN_GRAPH",           0],
         ["EV_EXPAND_PATH",          0],
         ["EV_JSON_CLOSED",          0],

package/src/graph_save_plan.js

@@ -0,0 +1,108 @@
+/***********************************************************************
+ *          graph_save_plan.js
+ *
+ *      Which topics a Save of the graph has to write, and which it
+ *      must leave alone.
+ *
+ *      The arrangement of a treedb graph lives in `__graphs__`, ONE
+ *      record per topic. The Save collected every topic the view had
+ *      loaded and wrote all of them, whatever had moved: on a treedb
+ *      of five topics, dragging one card appended five records, four
+ *      of them saying exactly what the record under them said. The
+ *      store is append-only, so those four are there for ever.
+ *
+ *      This module is the decision, and nothing else: no G6, no DOM,
+ *      no gobj. Give it what the view is holding and what the backend
+ *      already has, and it answers which topics differ.
+ *
+ *      Two things it deliberately does NOT do:
+ *
+ *      - It does not ask the history plugin. The Save button lights
+ *        from two places -- `history.canUndo()` for what G6 records
+ *        (a move, a resize) and `mark_graph_dirty()` for what it does
+ *        not (a colour, a pill, a per-topic default) -- so the undo
+ *        stack is not the list of what changed, and reading it as one
+ *        would silently drop half the changes. A value comparison
+ *        sees both, and keeps working through undo, redo and a
+ *        history that was just cleared.
+ *
+ *      - It does not compare `__origin__`. That key is the node_uuid
+ *        of whoever wrote the record, bookkeeping about the write and
+ *        not about the arrangement; comparing it would make every
+ *        topic differ the first time a second browser saved, and the
+ *        record it forces would say nothing new.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {
+    is_object,
+    json_is_identical,
+} from "@yuneta/gobj-js";
+
+/***************************************************************
+ *  The properties as they are worth comparing: everything
+ *  except who wrote them.
+ ***************************************************************/
+function arrangement_of(properties)
+{
+    if(!is_object(properties)) {
+        return {};
+    }
+    let out = {};
+    for(const [key, value] of Object.entries(properties)) {
+        if(key === "__origin__") {
+            continue;
+        }
+        out[key] = value;
+    }
+    return out;
+}
+
+/***************************************************************
+ *  TRUE when the arrangement the view holds for `topic_name`
+ *  is not the one the backend already has.
+ *
+ *  A topic with no saved record has never been written, so
+ *  anything it holds is a change -- and an EMPTY arrangement
+ *  is not: a topic the view loaded and nobody ever arranged
+ *  has nothing to say, and saying it would create a record
+ *  that means "no layout".
+ ***************************************************************/
+function topic_arrangement_changed(live, saved)
+{
+    let a = arrangement_of(live);
+    if(!saved) {
+        return Object.keys(a).length > 0;
+    }
+    return !json_is_identical(a, arrangement_of(saved));
+}
+
+/***************************************************************
+ *  The topics a Save has to write.
+ *
+ *      live    {topic_name: properties}  what the view holds
+ *      saved   {topic_name: properties}  what the backend has
+ *
+ *  Returns their names, in the order the view holds them.
+ ***************************************************************/
+function plan_graph_saves(live, saved)
+{
+    let plan = [];
+    if(!is_object(live)) {
+        return plan;
+    }
+    let have = is_object(saved)? saved: {};
+    for(const [topic_name, properties] of Object.entries(live)) {
+        if(topic_arrangement_changed(properties, have[topic_name])) {
+            plan.push(topic_name);
+        }
+    }
+    return plan;
+}
+
+export {
+    plan_graph_saves,
+    topic_arrangement_changed,
+    arrangement_of,
+};