@yuneta/gobj-ui 7.23.1 → 7.23.3

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,8 @@ 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
+    $zoom_readout:  null,   // the zoom percentage
     $find_input:    null,
     $find_result:   null,
     $find_count:    null,
@@ -351,6 +421,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');
@@ -384,6 +455,53 @@ function destroy_ui(gobj)
     }
 }
 
+/************************************************************
+ *   One camera button.
+ ************************************************************/
+function camera_button(gobj, icon, event_name, label_key, wide)
+{
+    return ['button', {class: `button ${event_name}`, 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},
+        ['i', {style: 'font-size:1.5em; color:inherit;', class: icon}],
+        {
+            click: (evt) => {
+                evt.stopPropagation();
+                gobj_send_event(gobj, event_name, {evt: evt}, gobj);
+            }
+        }
+    ];
+}
+
+/************************************************************
+ *   The zoom, as a percentage.  What the two magnifiers
+ *   change: an editor that offers a zoom shows the number.
+ ************************************************************/
+function zoom_percent_text(gobj)
+{
+    let graph = gobj.priv.graph;
+    if(!graph) {
+        return "100%";
+    }
+    try {
+        return Math.round(graph.getZoom() * 100) + "%";
+    } catch(e) {
+        return "100%";
+    }
+}
+
+/************************************************************
+ *   Repaint the readout after anything that moves the camera.
+ ************************************************************/
+function update_zoom_readout(gobj)
+{
+    let priv = gobj.priv;
+    if(priv.$zoom_readout) {
+        priv.$zoom_readout.textContent = zoom_percent_text(gobj);
+    }
+}
+
 /************************************************************
  *   One fold button.  `open` rotates the chevron to the open
  *   state, mirroring the per-node toggle of the lazy tree.
@@ -474,39 +592,56 @@ function make_toolbar(gobj)
     ];
     let center_items = [];
 
+    /*
+     *  The camera, in the SAME vocabulary the treedb graph uses
+     *  (`c_g6_nodes_tree.js`): zoom in / zoom out, then what those two
+     *  change — the zoom READOUT, because without it "1:1" is a jump to
+     *  a value nobody was told — then fit, then actual size.
+     *
+     *  Two of these used to be a different picture for the same action
+     *  in a sibling view, which is the worst thing an icon can be:
+     *  `EV_ZOOM_RESET` was a bare magnifier and `EV_CENTER` was
+     *  `yi-arrows-to-eye`.  Now fit is the same bracket glyph as the
+     *  sprite's `g6-icon-fit`, and actual size is WRITTEN — `1:1` is
+     *  written in every editor that offers it, never drawn, because
+     *  there is no glyph for it.
+     */
     let c_icons = [
-        ["yi-magnifying-glass-plus", "EV_ZOOM_IN",       false, 'i'],
-        ["yi-magnifying-glass",      "EV_ZOOM_RESET",    false, 'i'],
-        ["yi-magnifying-glass-minus","EV_ZOOM_OUT",      false, 'i'],
-        ["yi-arrows-to-eye",         "EV_CENTER",        false, 'i'],
-        ["yi-arrows-rotate",         "EV_REFRESH",       false, 'i'],
+        ["yi-magnifying-glass-plus",  "EV_ZOOM_IN",  "zoom in"],
+        ["yi-magnifying-glass-minus", "EV_ZOOM_OUT", "zoom out"],
     ];
 
     for(let item of c_icons) {
-        let icon_name = item[0];
-        let event_name = item[1];
-        let disabled = item[2];
-
-        let button = {
-            class: `button ${event_name}`,
-            style: {height: toolbar_wide, width: '2.5em'}
-        };
-        if(disabled) {
-            button.disabled = true;
-        }
-        center_items.push(
-            ['button', button,
-                ['i', {style: 'font-size:1.5em; color:inherit;', class: icon_name}],
-                {
-                    click: (evt) => {
-                        evt.stopPropagation();
-                        gobj_send_event(gobj, event_name, {evt: evt}, gobj);
-                    }
-                }
-            ]
-        );
+        center_items.push(camera_button(gobj, item[0], item[1], item[2], toolbar_wide));
     }
 
+    priv.$zoom_readout = createElement2(
+        ['span', {class: 'JSON_GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey',
+                  style: 'font-size:.85rem; min-width:3.5em; justify-content:center;',
+                  title: t('zoom level'), 'data-i18n-title': 'zoom level'},
+         zoom_percent_text(gobj)]
+    );
+    center_items.push(priv.$zoom_readout);
+
+    center_items.push(camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", toolbar_wide));
+
+    /*  Written, not drawn — see above.  */
+    center_items.push(
+        ['button', {class: 'button EV_ZOOM_RESET', type: 'button',
+                    style: {height: toolbar_wide, width: '2.5em'},
+                    title: t('actual size'), 'data-i18n-title': 'actual size',
+                    'aria-label': t('actual size'), 'data-i18n-aria-label': 'actual size'},
+         ['span', {style: 'font-weight:700;'}, '1:1'],
+         {
+             click: (evt) => {
+                 evt.stopPropagation();
+                 gobj_send_event(gobj, "EV_ZOOM_RESET", {evt: evt}, gobj);
+             }
+         }]
+    );
+
+    center_items.push(camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", toolbar_wide));
+
     /*
      *  Right: fold the tree.
      *
@@ -516,7 +651,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 +703,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 +718,7 @@ function build_graph(gobj)
         },
 
         edge: {
-            type: 'cubic-vertical',
+            type: layout_cfg.edge_type,
             style: {
                 stroke: '#999',
                 lineWidth: 1,
@@ -559,9 +726,7 @@ function build_graph(gobj)
             },
         },
 
-        layout: {
-            type: 'json-tree-layout',
-        },
+        layout: layout_cfg.g6_layout,
 
         behaviors: [
             'drag-canvas',
@@ -577,6 +742,15 @@ function build_graph(gobj)
         gobj_send_event(gobj, "EV_NODE_CLICK", {evt: evt}, gobj);
     });
 
+    /*  ONE hook for the readout, the same one the treedb graph uses:
+     *  G6 fires it on any camera change, and the WHEEL is a camera
+     *  change that passes through no action of ours — patching the text
+     *  node from each zoom action would have left the readout lying
+     *  after every notch.  */
+    graph.on('aftertransform', () => {
+        update_zoom_readout(gobj);
+    });
+
     graph.on(CanvasEvent.CLICK, (evt) => {
         // Canvas click
     });
@@ -971,6 +1145,7 @@ function load_json(gobj)
             if(!preserve_view) {
                 graph.fitView();
             }
+            update_zoom_readout(gobj);
         });
     }
 }
@@ -1207,6 +1382,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
@@ -1489,6 +1705,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],
@@ -1511,6 +1728,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;
 }
 

package/src/yui_icons.css

@@ -376,3 +376,13 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M208 80c0-26.5 21.5-48 48-48l64 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-8 0 0 40 152 0c30.9 0 56 25.1 56 56l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-4.4-3.6-8-8-8l-152 0 0 40 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-40-152 0c-4.4 0-8 3.6-8 8l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-30.9 25.1-56 56-56l152 0 0-40-8 0c-26.5 0-48-21.5-48-48l0-64z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M208 80c0-26.5 21.5-48 48-48l64 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-8 0 0 40 152 0c30.9 0 56 25.1 56 56l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-4.4-3.6-8-8-8l-152 0 0 40 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-40-152 0c-4.4 0-8 3.6-8 8l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-30.9 25.1-56 56-56l152 0 0-40-8 0c-26.5 0-48-21.5-48-48l0-64z'/%3E%3C/svg%3E");
 }
+
+/*  The camera's "fit" bracket, the SAME glyph the treedb graph's SVG
+ *  sprite uses for the same action (`g6-icon-fit` in lib_icons.js).
+ *  One action, one drawing: the JSON graph used to say it with
+ *  `yi-arrows-to-eye`, which is a different picture for the same
+ *  button in a sibling view.  */
+.yi-fit::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32S0 334.3 0 352l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32S0 334.3 0 352l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z'/%3E%3C/svg%3E");
+}