@yuneta/gobj-ui 7.23.80 → 7.23.82

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,53 @@ 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',
-                           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,
-                           'aria-pressed': 'false'},
-            ['i', {style: 'font-size:1.5em; color:inherit;', class: icon}],
+    /*  `value` explicit on every option, as on the two selects
+     *  above: a translated <option> without one answers with its
+     *  TEXT, and the mode the child is told is a word it does not
+     *  know.  */
+    let options = NODE_MODES.map((mode) =>
+        ['option', {value: mode, 'data-i18n': NODE_MODE_LABELS[mode]}, t(NODE_MODE_LABELS[mode])]
+    );
+    return [
+        ['span', {class: 'GRAPH_NODE_MODE_LABEL is-hidden-mobile',
+                  style: 'padding-left:10px; padding-right:5px;', i18n: 'nodes'}, 'nodes'],
+        ['div', {class: 'select'}, [
+            ['select', {class: 'GRAPH_NODE_MODE_SELECT',
+                        title: t('nodes'), 'data-i18n-title': 'nodes',
+                        'aria-label': t('nodes'), 'data-i18n-aria-label': 'nodes'}, options]
+        ], {
+            change: (evt) => {
+                evt.stopPropagation();
+                gobj_send_event(gobj, "EV_SET_NODE_MODE", {node_mode: evt.target.value}, gobj);
+            }
+        }],
+        ['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, event_name, {}, gobj);
+                    gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, 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'),
+        ],
     ];
 }
 
-/*  The pressed look and `aria-pressed` of the two, from the attrs.
+/*  The three views of a record, and the label of each in the
+ *  select. The values are the child's `node_mode`.  */
+const NODE_MODES = ['expanded', 'compact', 'shape'];
+const NODE_MODE_LABELS = {
+    expanded: 'full',
+    compact:  'compact',
+    shape:    'shape',
+};
+
+/*  The select 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 +601,20 @@ 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');
+    let $mode = $root.querySelector('.GRAPH_NODE_MODE_SELECT');
     if($mode) {
-        $mode.setAttribute('aria-pressed', compact? 'true' : 'false');
+        $mode.value = mode;
     }
+    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 +682,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 +2798,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 +2983,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 +3026,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],

package/src/lib_graph.css

@@ -86,6 +86,7 @@
 .graph-container .g6-create-popover,
 .graph-container .g6-node-popover,
 .graph-container .g6-edge-popover,
+.graph-container .g6-port-popover,
 .graph-container .g6-node-detail {
     -webkit-user-select: text;
     user-select: text;
@@ -99,6 +100,7 @@
 .graph-container .g6-create-popover,
 .graph-container .g6-node-popover,
 .graph-container .g6-edge-popover,
+.graph-container .g6-port-popover,
 .graph-container .g6-node-detail,
 .graph-container .g6-contextmenu {
     touch-action: auto;