npm - @yuneta/gobj-ui - Versions diffs - 3.0.0 → 4.0.0 - Mend

@yuneta/gobj-ui 3.0.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/README.md +324 -6
package/dist/gobj-ui.cjs.js +10891 -5006
package/dist/gobj-ui.es.js +10915 -5064
package/index.js +45 -1
package/package.json +4 -4
package/src/c_g6_nodes_tree.js +128 -40
package/src/c_yui_form.js +112 -53
package/src/c_yui_gobj_tree_js.js +58 -36
package/src/c_yui_json.css +139 -0
package/src/c_yui_json.js +928 -0
package/src/c_yui_json_graph.js +110 -20
package/src/c_yui_map.js +18 -36
package/src/c_yui_nav.js +6 -9
package/src/c_yui_period.css +184 -0
package/src/c_yui_period.js +1441 -0
package/src/c_yui_shell.css +33 -0
package/src/c_yui_shell.js +672 -111
package/src/c_yui_treedb_graph.js +639 -37
package/src/c_yui_treedb_schema.js +478 -0
package/src/c_yui_treedb_topic_with_form.css +7 -42
package/src/c_yui_treedb_topic_with_form.js +152 -103
package/src/c_yui_treedb_topics.css +73 -0
package/src/c_yui_treedb_topics.js +1070 -29
package/src/c_yui_window.js +180 -97
package/src/c_yui_window_manager.js +38 -4
package/src/json_view_helpers.js +214 -0
package/src/json_view_helpers.test.js +135 -0
package/src/route_map_model.js +317 -0
package/src/route_map_model.test.js +209 -0
package/src/route_resolver.js +24 -1
package/src/route_resolver.test.js +40 -1
package/src/shell_modals.js +117 -39
package/src/shell_route_map.css +225 -0
package/src/shell_route_map.js +363 -0
package/src/tabulator.css +67 -0
package/src/yui_dev.js +130 -8
package/src/yui_frontend_view.js +106 -0
package/src/yui_icons.css +62 -0
package/src/yui_inputs.css +8 -3
package/src/yui_inputs.js +51 -8
package/src/yui_tabulator_i18n.js +128 -0
package/src/yui_theme.js +147 -0
package/src/yui_time.js +666 -0
package/src/yui_time.test.js +330 -0
package/src/yui_toolbar.js +86 -43

package/src/c_yui_treedb_schema.js ADDED Viewed

@@ -0,0 +1,478 @@
+/***********************************************************************
+ *          c_yui_treedb_schema.js
+ *
+ *      Schema-graph landing (prototype): the treedb drawn as a GRAPH OF
+ *      TOPICS — one node per topic, one edge per hook/fkey relationship
+ *      — from the schema `descs` alone (no data, no backend calls). A
+ *      node click opens that topic's table (a real hash navigation via
+ *      the host-supplied `node_route`). An alternate landing to the
+ *      topic cards, in the spirit of "every treedb is a graph".
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {
+    SDATA,
+    SDATA_END,
+    data_type_t,
+    gclass_create,
+    log_error,
+    gobj_read_pointer_attr,
+    gobj_subscribe_event,
+    gobj_parent,
+    gobj_read_attr,
+    createElement2,
+    gobj_write_attr,
+    gobj_short_name,
+    gobj_read_bool_attr,
+    gobj_read_str_attr,
+    is_object,
+} from "@yuneta/gobj-js";
+import {Graph, NodeEvent} from "@antv/g6";
+import {yui_is_dark, yui_watch_theme} from "./yui_theme.js";
+import {t} from "i18next";
+/***************************************************************
+ *              Constants
+ ***************************************************************/
+const GCLASS_NAME = "C_YUI_TREEDB_SCHEMA";
+/***************************************************************
+ *              Data
+ ***************************************************************/
+const attrs_table = [
+SDATA(data_type_t.DTP_POINTER,  "subscriber",   0,  null,   "Subscriber of output events"),
+SDATA(data_type_t.DTP_JSON,     "descs",        0,  null,   "Treedb schema: {topic_name: desc}"),
+SDATA(data_type_t.DTP_STRING,   "node_route",   0,  "",     "Hash-route template with a {topic} placeholder: a node click opens that topic (e.g. '#/topics/db/<sel>/{topic}')"),
+SDATA(data_type_t.DTP_BOOLEAN,  "system",       0,  false,  "Include system topics (__*__) too"),
+SDATA(data_type_t.DTP_POINTER,  "$container",   0,  null,   "Root HTML element"),
+SDATA_END()
+];
+let PRIVATE_DATA = {
+    $container:     null,
+    graph:          null,
+    theme_observer: null,   // MutationObserver on <html data-theme>
+};
+let __gclass__ = null;
+                    /******************************
+                     *      Framework Methods
+                     ******************************/
+function mt_create(gobj)
+{
+    build_ui(gobj);
+    /*
+     *  CHILD subscription model
+     */
+    let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
+    if(!subscriber) {
+        subscriber = gobj_parent(gobj);
+    }
+    gobj_subscribe_event(gobj, null, {}, subscriber);
+}
+function mt_start(gobj)
+{
+    /*  The graph picks its colours from the theme. Translate the DOM
+     *  mutation into EV_THEME and let the action restyle the live graph
+     *  (ac_theme) — a rebuild would reset the camera. */
+    gobj.priv.theme_observer = yui_watch_theme(gobj);
+    build_graph(gobj);
+}
+function mt_stop(gobj)
+{
+    let priv = gobj.priv;
+    if(priv.theme_observer) {
+        priv.theme_observer.disconnect();
+        priv.theme_observer = null;
+    }
+    destroy_graph(gobj);
+}
+function mt_destroy(gobj)
+{
+    let $container = gobj_read_attr(gobj, "$container");
+    if($container && $container.parentNode) {
+        $container.parentNode.removeChild($container);
+    }
+    gobj_write_attr(gobj, "$container", null);
+}
+                    /***************************
+                     *      Local Methods
+                     ***************************/
+/************************************************************
+ *   Build UI
+ ************************************************************/
+function build_ui(gobj)
+{
+    let $container = createElement2(
+        ['div', {class: 'C_YUI_TREEDB_SCHEMA TREEDB_SCHEMA_VIEW',
+                 style: 'position:relative; height:100%; min-height:0;'}, []]
+    );
+    gobj_write_attr(gobj, "$container", $container);
+}
+/************************************************************
+ *   Derive {nodes, edges} from the schema.
+ *   Node  = a topic.  Edge  = a hook (parent -> child) or an
+ *   fkey (child -> parent, reversed to parent -> child), deduped.
+ *   Left-to-right dagre follows the parent -> child data flow.
+ ************************************************************/
+function schema_to_graph(gobj)
+{
+    let descs = gobj_read_attr(gobj, "descs");
+    let system = gobj_read_bool_attr(gobj, "system");
+    let nodes = [];
+    let topic_set = {};
+    if(!is_object(descs)) {
+        return {nodes: nodes, edges: []};
+    }
+    for(let topic of Object.keys(descs)) {
+        if(!system && topic.substring(0, 2) === "__") {
+            continue;
+        }
+        topic_set[topic] = true;
+        nodes.push({id: topic, data: {topic_name: topic}});
+    }
+    let edge_seen = {};
+    let edges = [];
+    let add_edge = (source, target) => {
+        if(!topic_set[source] || !topic_set[target] || source === target) {
+            return;
+        }
+        let key = source + "" + target;
+        if(edge_seen[key]) {
+            return;
+        }
+        edge_seen[key] = true;
+        edges.push({id: key, source: source, target: target});
+    };
+    for(let topic of Object.keys(descs)) {
+        let desc = descs[topic];
+        if(!is_object(desc) || !Array.isArray(desc.cols)) {
+            continue;
+        }
+        for(let col of desc.cols) {
+            if(!col) {
+                continue;
+            }
+            if(is_object(col.hook)) {
+                for(let child of Object.keys(col.hook)) {
+                    add_edge(topic, child);          /*  parent -> child  */
+                }
+            } else if(is_object(col.fkey)) {
+                for(let parent of Object.keys(col.fkey)) {
+                    add_edge(parent, topic);         /*  parent -> child  */
+                }
+            }
+        }
+    }
+    return {nodes: nodes, edges: edges};
+}
+/************************************************************
+ *   The theme-dependent styles, in ONE place: they are applied
+ *   as the graph is built and re-applied on a theme switch
+ *   (ac_theme), which restyles the LIVE graph — rebuilding it
+ *   would drop the user's zoom/pan and any dragged node.
+ ************************************************************/
+function node_style(dark)
+{
+    return {
+        size:           40,
+        fill:           "#5B8FF9",
+        labelText:      (d) => d.id,
+        labelPlacement: "bottom",
+        labelFill:      dark ? "#e6e6e6" : "#333333",
+        labelBackground: true,
+        labelBackgroundFill: dark ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.7)",
+        cursor:         "pointer",
+    };
+}
+function edge_style(dark)
+{
+    return {
+        stroke:   dark ? "#666666" : "#bbbbbb",
+        endArrow: true,
+    };
+}
+/************************************************************
+ *   Build the G6 schema graph.
+ ************************************************************/
+function build_graph(gobj)
+{
+    let priv = gobj.priv;
+    let $container = gobj_read_attr(gobj, "$container");
+    if(!$container) {
+        return;
+    }
+    destroy_graph(gobj);
+    let data = schema_to_graph(gobj);
+    if(data.nodes.length === 0) {
+        let $empty = createElement2(
+            ['div', {class: 'TREEDB_SCHEMA_EMPTY p-4 has-text-grey',
+                     i18n: 'no topics'}, t('no topics', {defaultValue: 'No topics'})]
+        );
+        $container.appendChild($empty);
+        return;
+    }
+    let dark = yui_is_dark();
+    let graph;
+    try {
+        graph = new Graph({
+            container:  $container,
+            autoResize: true,
+            data:       data,
+            node: {
+                style: node_style(dark),
+            },
+            edge: {
+                style: edge_style(dark),
+            },
+            layout: {
+                type:    "antv-dagre",
+                rankdir: "LR",
+                nodesep: 24,
+                ranksep: 60,
+            },
+            behaviors: ["zoom-canvas", "drag-canvas", "drag-element"],
+        });
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: schema graph create failed: ${e}`);
+        return;
+    }
+    priv.graph = graph;
+    graph.setTheme(dark ? "dark" : "light");
+    /*  A node click opens that topic — a real hash navigation, so it is
+     *  deep-linkable and Back-friendly like the cards. Crosses the FSM. */
+    graph.on(NodeEvent.CLICK, (evt) => {
+        let node_id = evt && evt.target && evt.target.id;
+        gobj_send_event(gobj, "EV_NODE_CLICK", {node_id: node_id}, gobj);
+    });
+    graph.render().then(() => {
+        try {
+            graph.fitView();
+        } catch(e) {
+            // best-effort centring
+        }
+    }).catch((e) => {
+        log_error(`${gobj_short_name(gobj)}: schema graph render failed: ${e}`);
+    });
+}
+/************************************************************
+ *   Destroy the G6 graph.
+ ************************************************************/
+function destroy_graph(gobj)
+{
+    let priv = gobj.priv;
+    if(priv.graph) {
+        try {
+            priv.graph.destroy();
+        } catch(e) {
+            // already gone
+        }
+        priv.graph = null;
+    }
+    let $container = gobj_read_attr(gobj, "$container");
+    if($container) {
+        while($container.firstChild) {
+            $container.removeChild($container.firstChild);
+        }
+    }
+}
+                    /***************************
+                     *      Actions
+                     ***************************/
+/************************************************************
+ *   A topic node was clicked: open its table via the host route.
+ ************************************************************/
+function ac_node_click(gobj, event, kw, src)
+{
+    let topic = kw && kw.node_id;
+    let route = gobj_read_str_attr(gobj, "node_route");
+    if(!topic || !route) {
+        return 0;
+    }
+    let href = route.replace("{topic}", topic);
+    if(typeof window !== "undefined") {
+        window.location.hash = href;
+    }
+    return 0;
+}
+/************************************************************
+ *   Shown by the host: (re)fit the view now the container is
+ *   visible and sized (G6 renders at 0×0 while display:none).
+ ************************************************************/
+function ac_show(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    if(!priv.graph) {
+        build_graph(gobj);
+        return 0;
+    }
+    try {
+        priv.graph.fitView();
+    } catch(e) {
+        // best-effort
+    }
+    return 0;
+}
+/************************************************************
+ *   {theme: "dark"|"light"} — the app switched theme.
+ *   A restyle, not new data: repaint the LIVE graph and redraw,
+ *   so the user's zoom/pan and dragged nodes survive.  A rebuild
+ *   is only right when there is no graph to restyle — the "no
+ *   topics" empty state, whose message is built, not drawn.
+ ************************************************************/
+function ac_theme(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+    if(!graph) {
+        build_graph(gobj);
+        return 0;
+    }
+    let dark = (kw && kw.theme) ? (kw.theme === "dark") : yui_is_dark();
+    try {
+        graph.setTheme(dark ? "dark" : "light");
+        graph.setNode({style: node_style(dark)});
+        graph.setEdge({style: edge_style(dark)});
+        graph.draw().catch((e) => {
+            log_error(`${gobj_short_name(gobj)}: schema graph redraw failed: ${e}`);
+        });
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: schema graph restyle failed: ${e}`);
+    }
+    return 0;
+}
+/************************************************************
+ *   Rebuild from a fresh schema (descs arrived / changed).
+ ************************************************************/
+function ac_rebuild(gobj, event, kw, src)
+{
+    if(kw && is_object(kw.descs)) {
+        gobj_write_attr(gobj, "descs", kw.descs);
+    }
+    build_graph(gobj);
+    return 0;
+}
+                    /***************************
+                     *          FSM
+                     ***************************/
+const gmt = {
+    mt_create:  mt_create,
+    mt_start:   mt_start,
+    mt_stop:    mt_stop,
+    mt_destroy: mt_destroy,
+};
+function create_gclass(gclass_name)
+{
+    if(__gclass__) {
+        log_error(`GClass ALREADY created: ${gclass_name}`);
+        return -1;
+    }
+    const states = [
+        ["ST_IDLE", [
+            ["EV_NODE_CLICK",   ac_node_click,  null],
+            ["EV_SHOW",         ac_show,        null],
+            ["EV_THEME",        ac_theme,       null],
+            ["EV_REBUILD",      ac_rebuild,     null],
+        ]]
+    ];
+    const event_types = [
+        ["EV_NODE_CLICK",   0],
+        ["EV_SHOW",         0],
+        ["EV_THEME",        0],
+        ["EV_REBUILD",      0],
+    ];
+    __gclass__ = gclass_create(
+        gclass_name,
+        event_types,
+        states,
+        gmt,
+        0,  // lmt
+        attrs_table,
+        PRIVATE_DATA,
+        0,  // authz_table
+        0,  // command_table
+        0,  // s_user_trace_level
+        0   // gclass_flag
+    );
+    if(!__gclass__) {
+        return -1;
+    }
+    return 0;
+}
+function register_c_yui_treedb_schema()
+{
+    return create_gclass(GCLASS_NAME);
+}
+export {register_c_yui_treedb_schema};

package/src/c_yui_treedb_topic_with_form.css CHANGED Viewed

@@ -46,52 +46,17 @@
     min-width: 0;
 }
-/*  Moved from c_yui_main.css (2.6.1): the responsive edit-dialog card
- *  and the utilities this gclass tags on its DOM.
- *  Self-contained here so every consumer gets it without the
- *  legacy stack's stylesheet. */
-/* Custom class to adjust the modal width */
-.modal-card.modal-is-responsive {
-    width: 100%;
-    max-width: 100%;
-}
-@media screen and (min-width: 768px) {
-    .modal-card.modal-is-responsive {
-        width: 50rem;
+/*  The edit/create form runs in the shell's standardized adaptive dialog
+ *  (yui_shell_show_modal dialog:true, logical_class TREEDB_FORM_SHEET). The
+ *  shell CSS already gives it the centred card / full-screen-mobile sheet;
+ *  here we only widen it on desktop — a label+field record form wants more
+ *  room than the default 640px. Mobile stays edge-to-edge (shell rule). */
+@media screen and (min-width: 769px) {
+    .TREEDB_FORM_SHEET .yui-dialog-content {
         max-width: 50rem;
     }
 }
-/*
- *  Mobile (< 768px, dovetails with the desktop rule above): a
- *  `modal-is-responsive` card (the C_YUI_TREEDB edit/delete form
- *  popup, and any other consumer of this opt-in class) takes the
- *  WHOLE screen instead of a centred sheet — more room to edit on a
- *  phone.  Confirm dialogs do not carry `modal-is-responsive`, so
- *  they stay compact.  Edge-to-edge: full size, no margin, flat
- *  corners; the body keeps Bulma's own scroll.
- */
-@media screen and (max-width: 767px) {
-    .modal-card.modal-is-responsive {
-        width: 100%;
-        max-width: 100%;
-        height: 100%;
-        max-height: 100%;
-        margin: 0;
-        border-radius: 0;
-    }
-    .modal-card.modal-is-responsive .modal-card-head,
-    .modal-card.modal-is-responsive .modal-card-foot {
-        border-radius: 0;
-    }
-    .modal-card.modal-is-responsive .modal-card-body {
-        flex: 1 1 auto;
-        overflow-y: auto;
-    }
-}
 .without-border {
     border: none !important;
     box-shadow: none !important;