@yuneta/gobj-ui 7.23.81 → 7.23.83

package/src/c_yui_treedb_graph.js

@@ -120,8 +120,8 @@ SDATA(data_type_t.DTP_STRING,   "layout",           sdata_flag_t.SDF_PERSIST, ""
 SDATA(data_type_t.DTP_LIST,     "hidden_topics",    sdata_flag_t.SDF_PERSIST, "[]", "Topics hidden from the graph (legend). User preference, per treedb"),
 SDATA(data_type_t.DTP_STRING,   "main_topic",       sdata_flag_t.SDF_PERSIST, "", "The topic the tree hangs from; empty = deduced by the graph. User preference, per treedb"),
 SDATA(data_type_t.DTP_LIST,     "loose_topics",     sdata_flag_t.SDF_PERSIST, "[]", "Topics whose LOOSE records (no parent) are shown. User preference, per treedb"),
-SDATA(data_type_t.DTP_STRING,   "node_mode",        sdata_flag_t.SDF_PERSIST, "expanded", "How the records are drawn: `expanded` = the cards with their ports, `compact` = coloured squares, the topology alone. User preference"),
-SDATA(data_type_t.DTP_BOOLEAN,  "node_labels",      sdata_flag_t.SDF_PERSIST, true, "A compact node says its name under its square. User preference"),
+SDATA(data_type_t.DTP_STRING,   "node_mode",        sdata_flag_t.SDF_PERSIST, "expanded", "How the records are drawn: `expanded` = the cards with their pills and ports, `compact` = one-line pills with the name, `shape` = coloured figures, the topology alone. User preference"),
+SDATA(data_type_t.DTP_BOOLEAN,  "node_labels",      sdata_flag_t.SDF_PERSIST, true, "A `shape` node says its name under its figure. User preference"),
 
 /*---------------- Remote Connection ----------------*/
 SDATA(data_type_t.DTP_POINTER,  "gobj_remote_yuno", 0,  null,   "Remote Yuno to request data"),
@@ -547,28 +547,64 @@ function option_label(name)
  ************************************************************/
 function node_shape_items(gobj, wide)
 {
-    let toggle = (cls, icon, event_name, label_key) => {
-        return ['button', {class: `${cls} button`, type: 'button',
+    /*  Three push buttons in one group, not a select: a view is
+     *  picked at a glance and in one press, and the pressed one
+     *  SAYS which view is on -- a closed list says nothing until it
+     *  is opened. Icons, because a card, a line and a figure draw
+     *  themselves better than three words.  */
+    let mode_buttons = NODE_MODES.map((mode) => {
+        let key = NODE_MODE_LABELS[mode];
+        return ['button', {class: 'GRAPH_NODE_MODE_BTN button', type: 'button',
+                           'data-mode': mode,
                            style: {height: wide, width: '2.5em'},
-                           title: t(label_key), 'data-i18n-title': label_key,
-                           'aria-label': t(label_key), 'data-i18n-aria-label': label_key,
+                           title: t(key), 'data-i18n-title': key,
+                           'aria-label': t(key), 'data-i18n-aria-label': key,
                            'aria-pressed': 'false'},
-            ['i', {style: 'font-size:1.5em; color:inherit;', class: icon}],
+            ['i', {style: 'font-size:1.5em; color:inherit;', class: NODE_MODE_ICONS[mode]}],
             {
                 click: (evt) => {
                     evt.stopPropagation();
-                    gobj_send_event(gobj, event_name, {}, gobj);
+                    gobj_send_event(gobj, "EV_SET_NODE_MODE", {node_mode: mode}, gobj);
                 }
             }
         ];
-    };
+    });
     return [
-        toggle('GRAPH_NODE_MODE', 'yi-hexagon-nodes', 'EV_TOGGLE_NODE_MODE', 'closed nodes'),
-        toggle('GRAPH_NODE_LABELS', 'yi-font', 'EV_TOGGLE_NODE_LABELS', 'node labels'),
+        ['div', {class: 'GRAPH_NODE_MODE buttons has-addons',
+                 style: 'margin:0 0 0 .5rem; flex:0 0 auto; flex-wrap:nowrap;'}, mode_buttons],
+        ['button', {class: 'GRAPH_NODE_LABELS button', type: 'button',
+                    style: {height: wide, width: '2.5em'},
+                    title: t('node labels'), 'data-i18n-title': 'node labels',
+                    'aria-label': t('node labels'), 'data-i18n-aria-label': 'node labels',
+                    'aria-pressed': 'false'},
+            ['i', {style: 'font-size:1.5em; color:inherit;', class: 'yi-font'}],
+            {
+                click: (evt) => {
+                    evt.stopPropagation();
+                    gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
+                }
+            }
+        ],
     ];
 }
 
-/*  The pressed look and `aria-pressed` of the two, from the attrs.
+/*  The three views of a record: the child's `node_mode`, the i18n
+ *  key of each, and the glyph -- a card, a line, a figure.  */
+const NODE_MODES = ['expanded', 'compact', 'shape'];
+const NODE_MODE_LABELS = {
+    expanded: 'full',
+    compact:  'compact',
+    shape:    'shape',
+};
+const NODE_MODE_ICONS = {
+    expanded: 'yi-square',
+    compact:  'yi-bars',
+    shape:    'yi-hexagon-nodes',
+};
+
+/*  The pressed view and the labels toggle, from the attrs. The
+ *  toggle only means something on figures, so it is disabled
+ *  elsewhere.
  *  `$root` is whatever holds the toolbar: the toolbar itself before
  *  the view is mounted, the view's container after.  */
 function refresh_node_shape_buttons(gobj, $root)
@@ -576,17 +612,21 @@ function refresh_node_shape_buttons(gobj, $root)
     if(!$root) {
         return;
     }
-    let compact = (gobj_read_str_attr(gobj, "node_mode") === "compact");
+    let mode = gobj_read_str_attr(gobj, "node_mode");
+    if(!NODE_MODES.includes(mode)) {
+        mode = 'expanded';
+    }
     let labels = gobj_read_bool_attr(gobj, "node_labels");
-    set_pressed_state($root, '.GRAPH_NODE_MODE', compact);
-    set_pressed_state($root, '.GRAPH_NODE_LABELS', labels);
-    let $mode = $root.querySelector('.GRAPH_NODE_MODE');
-    if($mode) {
-        $mode.setAttribute('aria-pressed', compact? 'true' : 'false');
+    for(let $btn of $root.querySelectorAll('.GRAPH_NODE_MODE_BTN')) {
+        let on = ($btn.getAttribute('data-mode') === mode);
+        $btn.classList.toggle('pressed_state', on);
+        $btn.setAttribute('aria-pressed', on? 'true' : 'false');
     }
+    set_pressed_state($root, '.GRAPH_NODE_LABELS', labels);
     let $labels = $root.querySelector('.GRAPH_NODE_LABELS');
     if($labels) {
         $labels.setAttribute('aria-pressed', labels? 'true' : 'false');
+        $labels.disabled = (mode !== 'shape');
     }
 }
 
@@ -654,8 +694,8 @@ function make_toolbar(gobj)
          *  way back to the default depth.  */
         ...yui_graph_fold_items(gobj, gobj_read_str_attr(gobj, "wide")),
 
-        /*  The shape pair: closed squares or open cards, and the name
-         *  under a square. Two STATES, so they look pressed.  */
+        /*  The view of the nodes -- full cards, one-line pills or
+         *  figures -- and the name under a figure.  */
         ...node_shape_items(gobj, gobj_read_str_attr(gobj, "wide")),
 
         /*  Inspect the treedb's raw tranger json in the lazy tree viewer
@@ -2770,14 +2810,14 @@ function ac_collapse_all(gobj, event, kw, src)
 }
 
 /************************************************************
- *  The shape pair of the toolbar: the attr flips, persists,
- *  shows on the button, and reaches the G6 child, which owns
- *  the nodes.
+ *  The view of the nodes and the labels toggle of the toolbar:
+ *  the attr changes, persists, shows on the control, and reaches
+ *  the G6 child, which owns the nodes.
  ************************************************************/
-function ac_toggle_node_mode(gobj, event, kw, src)
+function ac_set_node_mode(gobj, event, kw, src)
 {
     let priv = gobj.priv;
-    let mode = (gobj_read_str_attr(gobj, "node_mode") === "compact")? "expanded" : "compact";
+    let mode = (kw && NODE_MODES.includes(kw.node_mode))? kw.node_mode : "expanded";
 
     gobj_write_str_attr(gobj, "node_mode", mode);
     gobj_save_persistent_attrs(gobj, "node_mode");
@@ -2955,7 +2995,7 @@ function create_gclass(gclass_name)
             ["EV_FIND_NODES",               ac_find_nodes,              null],
             ["EV_EXPAND_ALL",               ac_expand_all,              null],
             ["EV_COLLAPSE_ALL",             ac_collapse_all,            null],
-            ["EV_TOGGLE_NODE_MODE",         ac_toggle_node_mode,        null],
+            ["EV_SET_NODE_MODE",            ac_set_node_mode,           null],
             ["EV_TOGGLE_NODE_LABELS",       ac_toggle_node_labels,      null],
             ["EV_LAYOUT_AUTOSET",           ac_layout_autoset,          null],
             ["EV_LEGEND_TOPIC",             ac_legend_topic,            null],
@@ -2998,7 +3038,7 @@ function create_gclass(gclass_name)
         ["EV_FIND_NODES",               0],
         ["EV_EXPAND_ALL",               0],
         ["EV_COLLAPSE_ALL",             0],
-        ["EV_TOGGLE_NODE_MODE",         0],
+        ["EV_SET_NODE_MODE",            0],
         ["EV_TOGGLE_NODE_LABELS",       0],
         ["EV_FIND_RESULT",              0],
         ["EV_LAYOUT_AUTOSET",           0],