@yuneta/gobj-ui 7.23.0 → 7.23.2

package/src/c_yui_json_graph.js

@@ -74,6 +74,73 @@ const GCLASS_NAME = "C_YUI_JSON_GRAPH";
  */
 const FOLD_SWALLOWED_EVENTS = ["pointerdown", "pointerup", "mousedown", "click"];
 
+/*
+ *  Layouts, same shape the gobj tree's registry uses
+ *  (`c_yui_gobj_tree_js.js`): a G6 layout config plus the edge type
+ *  that matches its direction — a vertical layout with horizontal
+ *  cubics draws every edge going the wrong way round.
+ *
+ *  `json-tree` is this gclass's own layout, the one it always had, and
+ *  it stays the default: it sizes each level from the real card widths,
+ *  which a generic layout cannot do with `html` nodes.  The dagre pair
+ *  is there for the documents it does badly — a wide, shallow object
+ *  reads better left→right, which is also the house direction for a
+ *  topology.
+ */
+const LAYOUTS = {
+    "json-tree": {
+        label: "vertical tree",
+        g6_layout: {type: 'json-tree-layout'},
+        edge_type: 'cubic-vertical',
+    },
+    "dagre-tb": {
+        label: "dagre top-down",
+        g6_layout: {type: 'antv-dagre', rankdir: 'TB', nodesep: 20, ranksep: 40},
+        edge_type: 'polyline',
+    },
+    "dagre-lr": {
+        label: "dagre left-right",
+        g6_layout: {type: 'antv-dagre', rankdir: 'LR', nodesep: 20, ranksep: 40},
+        edge_type: 'polyline',
+    },
+    /*  `compact-box` is NOT here on purpose: it lays out from a fixed
+     *  node size, and an `html` card is nothing like it — every card
+     *  landed on top of the next.  A layout that draws the document
+     *  unreadable is worse than one option fewer.  dagre reads the real
+     *  sizes, which is why both of its directions are here.  */
+};
+
+const DEFAULT_LAYOUT = "json-tree";
+
+function get_layout_cfg(key)
+{
+    return LAYOUTS[key] || LAYOUTS[DEFAULT_LAYOUT];
+}
+
+/************************************************************
+ *  A layout's label, with every key SPELLED OUT inside t().
+ *
+ *  Never t(LAYOUTS[key].label) nor a `data-i18n` fed from that
+ *  table: the apps' validate-locales scans for t("literal"),
+ *  so a key reached through a variable is a key it cannot
+ *  demand — and i18next answers an undefined key with the key
+ *  itself, which renders in lower-case English and never
+ *  changes language.  Twice already in this component's
+ *  history (7.20.0 `tree view`, and this table on its first
+ *  draft).
+ ************************************************************/
+function layout_label(key)
+{
+    switch(key) {
+        case "dagre-tb":
+            return t("dagre top-down");
+        case "dagre-lr":
+            return t("dagre left-right");
+        default:
+            return t("vertical tree");
+    }
+}
+
 /***************************************************************
  *              Data
  ***************************************************************/
@@ -91,6 +158,7 @@ SDATA(data_type_t.DTP_STRING,   "canvas_id",        0,  "",     "Canvas ID"),
 
 /*---------------- Graph Settings ----------------*/
 SDATA(data_type_t.DTP_STRING,   "wide",             0,  "36px", "Height of header"),
+SDATA(data_type_t.DTP_STRING,   "layout",           0,  "json-tree", "Layout key (see LAYOUTS)"),
 
 SDATA_END()
 ];
@@ -110,6 +178,7 @@ let PRIVATE_DATA = {
     match_count:    0,      // matches of the last find, for the count chip
     find_timer:     null,   // rate-limits the find box
     fold_listener:  null,   // delegated click on the card fold handles
+    $layout_select: null,   // the layout picker
     $find_input:    null,
     $find_result:   null,
     $find_count:    null,
@@ -351,6 +420,7 @@ function build_ui(gobj)
         log_error(`${gobj_short_name(gobj)}: no canvas mount, fold handles are dead`);
     }
 
+    priv.$layout_select = $container.querySelector('.JSON_GRAPH_LAYOUT');
     priv.$find_input = $container.querySelector('.JSON_GRAPH_FIND_INPUT');
     priv.$find_result = $container.querySelector('.JSON_GRAPH_FIND_RESULT');
     priv.$find_count = $container.querySelector('.JSON_GRAPH_FIND_COUNT');
@@ -516,7 +586,38 @@ function make_toolbar(gobj)
      *  went; "expand all" puts it back.  Same chevron as the lazy tree,
      *  rotated to point down for the open state.
      */
+    /*
+     *  A layout picker, same shape as the gobj tree's.  One layout
+     *  cannot serve every document: the built-in one sizes each level
+     *  from the real card widths, dagre packs a wide shallow object
+     *  far better, and left→right is the house direction for reading a
+     *  topology.
+     */
+    let current_layout = gobj_read_str_attr(gobj, "layout") || DEFAULT_LAYOUT;
+    let options = Object.keys(LAYOUTS).map(function(key) {
+        let attrs = {value: key, 'data-i18n': LAYOUTS[key].label};
+        if(key === current_layout) {
+            attrs.selected = "selected";
+        }
+        return ['option', attrs, layout_label(key)];
+    });
+
+    let $layout_select = createElement2(
+        ['select', {
+            class: 'JSON_GRAPH_LAYOUT select',
+            style: {height: toolbar_wide, "margin-left": "0.5em"},
+            title: t("layout"), 'data-i18n-title': "layout",
+            'aria-label': t("layout"), 'data-i18n-aria-label': "layout"
+        }, options, {
+            change: (evt) => {
+                evt.stopPropagation();
+                gobj_send_event(gobj, "EV_CHANGE_LAYOUT", {layout: evt.target.value}, gobj);
+            }
+        }]
+    );
+
     let right_items = [
+        $layout_select,
         graph_fold_button(gobj, "EV_EXPAND_ALL", "expand all", true),
         graph_fold_button(gobj, "EV_COLLAPSE_ALL", "collapse all", false),
     ];
@@ -537,6 +638,7 @@ function make_toolbar(gobj)
 function build_graph(gobj)
 {
     let priv = gobj.priv;
+    let layout_cfg = get_layout_cfg(gobj_read_str_attr(gobj, "layout"));
 
     const graph = priv.graph = new Graph({
         container: priv.canvas_id,
@@ -551,7 +653,7 @@ function build_graph(gobj)
         },
 
         edge: {
-            type: 'cubic-vertical',
+            type: layout_cfg.edge_type,
             style: {
                 stroke: '#999',
                 lineWidth: 1,
@@ -559,9 +661,7 @@ function build_graph(gobj)
             },
         },
 
-        layout: {
-            type: 'json-tree-layout',
-        },
+        layout: layout_cfg.g6_layout,
 
         behaviors: [
             'drag-canvas',
@@ -668,24 +768,47 @@ function build_cell_html(key, value, type, dark, matched)
  *  innerHTML string, so there is no other way to hang a
  *  handler on it.
  *
- *  Folded it shows the glyph AND the count of branches hidden
- *  under it; open, just the glyph.  No word, no title: a word
- *  inside this string could carry no i18n key.
+ *  A filled CHIP, the same one the gobj tree draws
+ *  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
+ *  border, radius, and `+N` / `−` rather than a triangle.  It
+ *  shipped once as a bare `▾` and on a phone it was invisible —
+ *  a glyph is a couple of pixels of ink at the zoom that fits a
+ *  document on screen, while a filled chip stays a visible blob
+ *  and reads as something you press.  `+N` also carries the
+ *  count of what is hidden, which the open state does not need.
+ *
+ *  No `title`: it would be a word inside an innerHTML string,
+ *  where it could carry no i18n key and would sit in English
+ *  forever.  `+3` and `−` need no language.
  ************************************************************/
-function fold_toggle_html(path, foldable, folded, branches)
+function fold_toggle_html(path, foldable, folded, branches, colors)
 {
     if(!foldable) {
-        /*  A spacer, so the label of a leaf card stays centred on the
-         *  same axis as the label of a foldable one.  */
-        return `<span style="width:1.1em; flex:0 0 auto;"></span>`;
+        /*  A spacer the width of the chip, so the label of a leaf card
+         *  stays on the same axis as the label of a foldable one.  */
+        return `<span style="width:24px; flex:0 0 auto;"></span>`;
     }
 
-    let glyph = folded? "&#9656;": "&#9662;";       /*  right / down  */
-    let text = folded? `${glyph} ${branches}`: glyph;
+    let label = folded? ("+" + branches): "&#8722;";        /*  +N / −  */
 
-    return `<span data-fold-path="${escapeHtml(path)}" ` +
-        `style="flex:0 0 auto; cursor:pointer; user-select:none; ` +
-        `padding:0 .2em; min-width:1.1em; text-align:left;">${text}</span>`;
+    return `<span data-fold-path="${escapeHtml(path)}" style="
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 22px;
+        height: 16px;
+        padding: 0 5px;
+        background: ${colors.bg};
+        color: ${colors.border};
+        border: 1px solid ${colors.bg};
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: 700;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+    ">${label}</span>`;
 }
 
 /************************************************************
@@ -854,7 +977,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
         display: flex;
         align-items: center;
         gap: 6px;
-    ">${fold_toggle_html(path, foldable, folded, pending_complex.length)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
+    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
     ${content_html}
 </div>`;
 
@@ -1184,6 +1307,47 @@ function ac_refresh(gobj, event, kw, src)
 
 /************************************************************
  *  {theme: "dark"|"light"} — the app switched theme.
+ *  EV_CHANGE_LAYOUT { layout }
+ *
+ *  The layout AND the edge type move together — a vertical
+ *  layout with horizontal cubics draws every edge the wrong way
+ *  round — and then the graph is rebuilt and refitted, because a
+ *  new layout is a new shape and the old camera framed the old
+ *  one.
+ ************************************************************/
+function ac_change_layout(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    let key = (kw && kw.layout) || "";
+
+    if(!LAYOUTS[key]) {
+        log_error(`${gobj_short_name(gobj)}: unknown layout '${key}'`);
+        return -1;
+    }
+    if(key === gobj_read_str_attr(gobj, "layout")) {
+        return 0;
+    }
+
+    gobj_write_str_attr(gobj, "layout", key);
+
+    /*  Keep the picker in step when the event came from elsewhere.  */
+    if(priv.$layout_select && priv.$layout_select.value !== key) {
+        priv.$layout_select.value = key;
+    }
+
+    let cfg = get_layout_cfg(key);
+    if(priv.graph) {
+        priv.graph.setOptions({
+            layout: cfg.g6_layout,
+            edge: {type: cfg.edge_type},
+        });
+    }
+    refresh_json(gobj);
+    update_find_result(gobj);
+    return 0;
+}
+
+/************************************************************
  *  EV_TOGGLE_FOLD { path } — fold or unfold ONE card.
  *
  *  The camera does not move: folding one branch is a local
@@ -1466,6 +1630,7 @@ function create_gclass(gclass_name)
             ["EV_REFRESH",              ac_refresh,             null],
             ["EV_FIND_NODES",           ac_find_nodes,          null],
             ["EV_TOGGLE_FOLD",          ac_toggle_fold,         null],
+            ["EV_CHANGE_LAYOUT",        ac_change_layout,       null],
             ["EV_EXPAND_ALL",           ac_expand_all,          null],
             ["EV_COLLAPSE_ALL",         ac_collapse_all,        null],
             ["EV_THEME",                ac_theme,               null],
@@ -1488,6 +1653,7 @@ function create_gclass(gclass_name)
         ["EV_REFRESH",              0],
         ["EV_FIND_NODES",           0],
         ["EV_TOGGLE_FOLD",          0],
+        ["EV_CHANGE_LAYOUT",        0],
         ["EV_EXPAND_ALL",           0],
         ["EV_COLLAPSE_ALL",         0],
         ["EV_THEME",                0],

package/src/c_yui_treedb_topic_with_form.js

@@ -42,6 +42,8 @@ import {
     kwid_get_ids,
     gobj_create_pure_child,
     gobj_start,
+    gobj_create_service,
+    gobj_is_destroying,
     gobj_stop,
     gobj_destroy,
     gobj_is_running,
@@ -170,9 +172,11 @@ let PRIVATE_DATA = {
     form:               null,   // hosted C_YUI_FORM child (while dialog open)
     form_modal:         null,   // { close } handle of the adaptive dialog
     schema_gobj:        null,   // hosted C_YUI_JSON child (while schema open)
-    schema_modal:       null,   // { close } handle of the schema dialog
+    schema_modal:       null,   // { close } handle of the schema dialog (phone)
+    schema_win:         null,   // C_YUI_WINDOW presenting it (laptop)
     cell_json_gobj:     null,   // hosted C_YUI_JSON child (while a cell is open)
-    cell_json_modal:    null,   // { close } handle of the cell dialog
+    cell_json_modal:    null,   // { close } handle of the cell dialog (phone)
+    cell_json_win:      null,   // C_YUI_WINDOW presenting it (laptop)
 };
 
 let __gclass__ = null;
@@ -184,6 +188,120 @@ let __gclass__ = null;
  *  stacking context below body-level modals).  The legacy
  *  C_YUI_MAIN "#popup-layer" and document.body (Bulma `.modal` is
  *  position:fixed) remain the shell-less fallbacks. */
+/*  True on a phone-width viewport (Bulma's mobile breakpoint).  */
+function is_mobile()
+{
+    return typeof window !== "undefined" && window.innerWidth <= 768;
+}
+
+/************************************************************
+ *  Present a JSON viewer's $container.
+ *
+ *  On a LAPTOP a floating C_YUI_WINDOW: a JSON document is
+ *  something you read WHILE looking at the table behind it —
+ *  you move it, you resize it, you maximise it when the
+ *  document is big.  A modal can do none of that, and it
+ *  darkens exactly the rows you opened the cell from.
+ *
+ *  On a phone the modal sheet stays: there is no room to
+ *  arrange anything, and the sheet already carries the shell's
+ *  Escape / Back handling.
+ *
+ *  Returns {win, modal} — exactly one of them is set.
+ ************************************************************/
+function present_json_popup(gobj, $box, opts)
+{
+    let shell = yui_shell_of(gobj);
+    if(!shell) {
+        log_error(`${gobj_short_name(gobj)}: no shell, cannot present the json`);
+        return null;
+    }
+
+    if(is_mobile()) {
+        return {
+            modal: yui_shell_show_modal(shell, $box, {
+                dialog:        true,
+                logical_class: opts.logical_class + "_SHEET",
+                title_prefix:  opts.title_prefix,
+                title:         opts.title,
+                t:             t,
+                on_close:      opts.on_close
+            }),
+            win: null
+        };
+    }
+
+    let win = gobj_create_service(
+        opts.name,
+        "C_YUI_WINDOW",
+        {
+            $parent:    popup_mount_layer(gobj),
+            subscriber: null,
+            modal:      false,
+            showMax:    true,
+            showFooter: false,
+            resizable:  true,
+            center:     true,
+            auto_save_size_and_position: true,
+            width:      720,
+            height:     620,
+            logical_class: opts.logical_class + "_WINDOW",
+            title_prefix:  opts.title_prefix,
+            title:         opts.title,
+            icon:          opts.icon,
+            body:          $box,
+            manager:       null,
+            /*  C_YUI_WINDOW.close_window() calls this and THEN stops and
+             *  destroys itself, so a teardown that also destroys the
+             *  window destroys it twice — two "gobj NULL or DESTROYED".
+             *  `opts.forget_window()` drops the host's reference first;
+             *  the ✕ path is the window retiring ITSELF.  */
+            on_close:      function() {
+                if(gobj_is_destroying(gobj)) {
+                    return;
+                }
+                opts.forget_window();
+                opts.on_close();
+            }
+        },
+        gobj
+    );
+    if(!win) {
+        log_error(`${gobj_short_name(gobj)}: cannot create the json window`);
+        return null;
+    }
+    gobj_start(win);
+    return {win: win, modal: null};
+}
+
+/************************************************************
+ *  Retire a presenting window: reference cleared FIRST, then
+ *  stop, then destroy.
+ *
+ *  The order is the whole content of this function.  The ✕ of
+ *  the window calls back into the teardown that calls this, so
+ *  clearing the reference first is what stops the recursion.
+ *  And it is STOP then destroy because the window was started
+ *  on open: handing a running gobj to gobj_destroy() makes the
+ *  framework rescue it and say so — "Destroying a RUNNING
+ *  gobj" — which is a caller's bug, not a framework message.
+ *  Same lesson `c_tranger_view.close_json_viewer` carries.
+ ************************************************************/
+function retire_popup_window(win)
+{
+    if(!win) {
+        return;
+    }
+    try {
+        if(gobj_is_running(win)) {
+            gobj_stop(win);
+        }
+        gobj_destroy(win);
+    } catch(e) {
+        log_warning(`${GCLASS_NAME}: json window already gone: ${e}`);
+    }
+}
+
 function popup_mount_layer(gobj)
 {
     let $layer = yui_shell_popup_layer(yui_shell_of(gobj));
@@ -1864,16 +1982,25 @@ function open_schema_dialog(gobj)
     /*  Title split in two halves: the topic name is DATA (never
      *  translated) and "schema" is the kind (carries its i18n key), so
      *  the header re-translates on a language switch. */
-    priv.schema_modal = yui_shell_show_modal(shell, $box, {
-        dialog:        true,
-        logical_class: "TREEDB_SCHEMA_SHEET",
+    let presented = present_json_popup(gobj, $box, {
+        name:          "schemawin_" + clean_name(gobj_name(gobj)),
+        logical_class: "TREEDB_SCHEMA",
         title_prefix:  gobj_read_str_attr(gobj, "topic_name"),
         title:         "schema",
-        t:             t,
+        icon:          "yi-table",
+        forget_window: function() {
+            priv.schema_win = null;
+        },
         on_close:      function() {
             teardown_schema_child(gobj);
         }
     });
+    if(!presented) {
+        teardown_schema_child(gobj);    // Error already logged
+        return;
+    }
+    priv.schema_modal = presented.modal;
+    priv.schema_win = presented.win;
 
     /*  EV_SET_JSON and not the `json_data` attr: the attr renders the
      *  tree but leaves the viewer in ST_IDLE, where a click to expand a
@@ -1896,6 +2023,9 @@ function teardown_schema_child(gobj)
         gobj_destroy(priv.schema_gobj);
         priv.schema_gobj = null;
     }
+    let win = priv.schema_win;
+    priv.schema_win = null;
+    retire_popup_window(win);
     priv.schema_modal = null;
 }
 
@@ -1982,16 +2112,25 @@ function open_cell_json_dialog(gobj, row_id, col_id)
      *  i18n key — the shared `col.id` one, so the header re-translates on a
      *  language switch and reads as the raw id where the app defines no key
      *  (exactly what an untranslated column header already shows). */
-    priv.cell_json_modal = yui_shell_show_modal(shell, $box, {
-        dialog:        true,
-        logical_class: "TREEDB_CELL_JSON_SHEET",
+    let presented = present_json_popup(gobj, $box, {
+        name:          "cellwin_" + clean_name(gobj_name(gobj)),
+        logical_class: "TREEDB_CELL_JSON",
         title_prefix:  String(row_id),
         title:         col_id,
-        t:             t,
+        icon:          "yi-js-square",
+        forget_window: function() {
+            priv.cell_json_win = null;
+        },
         on_close:      function() {
             teardown_cell_json_child(gobj);
         }
     });
+    if(!presented) {
+        teardown_cell_json_child(gobj);     // Error already logged
+        return;
+    }
+    priv.cell_json_modal = presented.modal;
+    priv.cell_json_win = presented.win;
 
     /*  EV_SET_JSON and not the `json_data` attr: the attr renders the
      *  tree but leaves the viewer in ST_IDLE, where a click to expand a
@@ -2014,6 +2153,9 @@ function teardown_cell_json_child(gobj)
         gobj_destroy(priv.cell_json_gobj);
         priv.cell_json_gobj = null;
     }
+    let win = priv.cell_json_win;
+    priv.cell_json_win = null;
+    retire_popup_window(win);
     priv.cell_json_modal = null;
 }