@yuneta/gobj-ui 7.14.3 → 7.16.0

package/src/c_g6_nodes_tree.js

@@ -105,11 +105,22 @@ import {yui_theme_now, yui_watch_theme} from "./yui_theme.js";
 
 /***************************************************************
  *  YuiToolbar — G6 Toolbar subclass that adds per-item className
- *  and disabled support.
+ *  and disabled support, plus three item kinds G6 does not have.
  *
  *  Each item in getItems() may carry:
  *    className  — CSS class added to the div (e.g. 'EV_SAVE_GRAPH')
  *    disabled   — boolean; sets the 'disabled' attribute initially
+ *    text       — render this text instead of a sprite symbol; a
+ *                 label is the only readable way to say `1:1`, and
+ *                 every editor that offers actual-size writes it
+ *    readout    — a text item that REPORTS instead of acting (the
+ *                 zoom level); it is not a button
+ *    separator  — a group divider, not an item
+ *
+ *  The base class fires onClick only for elements whose class list
+ *  contains `g6-toolbar-item`, so a separator and a readout carry
+ *  their own class and are inert by construction, with no guard in
+ *  the click handler.
  *
  *  With className set to the event name, the lib_graph.js state
  *  functions (set_submit_state, disableElements, …) work on toolbar
@@ -122,14 +133,36 @@ class YuiToolbar extends Toolbar
     {
         const items = await this.options.getItems();
         return items.map((item) => {
+            if(item.separator) {
+                return `<div class="g6-toolbar-sep" aria-hidden="true"></div>`;
+            }
+
             const extra_class = item.className ? ` ${item.className}` : '';
-            const disabled    = item.disabled  ? ' disabled'          : '';
+            const title       = item.title ?? '';
+
+            if(item.readout) {
+                return (
+                    `<div class="g6-toolbar-readout${extra_class}"` +
+                    ` title="${title}" aria-label="${title}">` +
+                    `${item.text ?? ''}` +
+                    `</div>`
+                );
+            }
+
+            const disabled = item.disabled ? ' disabled' : '';
+            const is_text   = (item.text !== undefined);
+            const kind_class = is_text ? ' g6-toolbar-item-text' : '';
+            const body = is_text
+                ? `<span class="g6-toolbar-text">${item.text}</span>`
+                : `<svg aria-hidden="true" focusable="false">` +
+                  `<use xlink:href="#${item.id}"></use>` +
+                  `</svg>`;
+
             return (
-                `<div class="g6-toolbar-item${extra_class}"` +
-                ` value="${item.value}" title="${item.title ?? ''}"${disabled}>` +
-                `<svg aria-hidden="true" focusable="false">` +
-                `<use xlink:href="#${item.id}"></use>` +
-                `</svg>` +
+                `<div class="g6-toolbar-item${kind_class}${extra_class}"` +
+                ` value="${item.value}" title="${title}"` +
+                ` aria-label="${title}"${disabled}>` +
+                `${body}` +
                 `</div>`
             );
         }).join('');
@@ -151,6 +184,15 @@ const GCLASS_NAME = "C_G6_NODES_TREE";
 const HIGHLIGHT_COLOR = "#f0a020";
 const HIGHLIGHT_HALO  = "rgba(240,160,32,0.35)";
 
+/*
+ *  The selection ring. Deliberately NOT the amber of the highlight:
+ *  a node can be a find match AND be selected, and two amber rings
+ *  would say nothing about either. Blue is what a selection is in
+ *  every editor, and the ring is drawn OUTSIDE the highlight's halo
+ *  so the two compose instead of overwriting one another.
+ */
+const SELECT_RING = "rgba(59,130,246,0.95)";
+
 /***************************************************************
  *  Internal layout and operation mode definitions
  ***************************************************************/
@@ -291,6 +333,10 @@ let PRIVATE_DATA = {
     _link_saved_styles: [],         // saved port styles to restore on cancel
     _focus_topic:       null,       // topic currently focused (EV_FOCUS_TOPIC)
     _focus_ids:         [],         // node ids carrying the focus 'active' state
+    _selected_paint_ids: [],        // node ids whose card is PAINTED selected
+                                    // (G6's 'selected' state is the selection
+                                    //  itself; this is what is on screen, and
+                                    //  it exists to diff the repaint)
     _pending_focus_topic: null,     // focus requested before data was loaded
     _pending_find:      null,       // find requested before data was loaded
     _layout_asked:      "",         // layout the host asked for at create (see mt_create)
@@ -732,6 +778,7 @@ function configure_events(gobj)
         update_edge_icon_position(gobj);
         update_node_icon_position(gobj);
         update_link_icon_position(gobj);
+        update_zoom_readout(gobj);
     });
 
     // Re-render G6 toolbars when language changes
@@ -863,6 +910,79 @@ function update_toolbar(gobj)
     }
 }
 
+/************************************************************
+ *  The floating toolbars follow the theme.
+ *
+ *  They used to be pinned to a light background in BOTH themes,
+ *  with the icon colour pinned dark so it survived that -- two
+ *  light islands sitting over a dark canvas. The tokens do the
+ *  flipping now; the fallbacks are the old forced-light values, so
+ *  a host without Bulma gets exactly what it had.
+ ************************************************************/
+function toolbar_style(extra)
+{
+    return Object.assign({
+        backgroundColor: 'var(--bulma-scheme-main, #f5f5f5)',
+        color:           'var(--bulma-text-strong, #333)',
+        padding:         '8px',
+        boxShadow:       '0 2px 8px rgba(0, 0, 0, 0.15)',
+        borderRadius:    '8px',
+        border:          '1px solid var(--bulma-border-weak, #e8e8e8)',
+        opacity:         '0.85',
+    }, extra || {});
+}
+
+/************************************************************
+ *  The zoom level as a percentage, the way every editor that
+ *  shows one writes it. Empty while the graph cannot be asked --
+ *  the toolbar is built before the first draw, and a viewport
+ *  that does not exist yet has no zoom to report.
+ ************************************************************/
+function zoom_percent_text(gobj)
+{
+    let graph = gobj.priv.graph;
+
+    if(!graph || typeof graph.getZoom !== "function") {
+        return "";
+    }
+
+    let zoom;
+    try {
+        zoom = graph.getZoom();
+    } catch(e) {
+        return "";
+    }
+    if(!zoom) {
+        return "";
+    }
+
+    return `${Math.round(zoom * 100)}%`;
+}
+
+/************************************************************
+ *  Repaint the zoom readout in place.
+ *
+ *  The text node is patched instead of re-rendering the plugin:
+ *  the readout follows the wheel, and updatePlugin() rebuilds the
+ *  whole toolbar's innerHTML -- which would also drop the disabled
+ *  state of the edit buttons on every notch of the wheel.
+ ************************************************************/
+function update_zoom_readout(gobj)
+{
+    let $container = gobj_read_attr(gobj, "$container");
+
+    if(!$container) {
+        return;
+    }
+
+    let $readout = $container.querySelector(".G6_ZOOM_LEVEL");
+    if(!$readout) {
+        return;     /* no toolbar (with_toolbar false): nobody to report to */
+    }
+
+    $readout.textContent = zoom_percent_text(gobj);
+}
+
 function configure_toolbar(gobj)
 {
     let priv = gobj.priv;
@@ -880,28 +1000,37 @@ function configure_toolbar(gobj)
             type: 'yui-toolbar',
             className: 'g6-toolbar-large',
             position: toolbar_position,
-            style: {
-                backgroundColor: '#f5f5f5',
-                /*  Forced-light bg in both themes → pin dark icon
-                 *  color (currentColor) so it stays visible in dark. */
-                color: '#333',
-                padding: '8px',
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-                borderRadius: '8px',
-                border: '1px solid #e8e8e8',
-                opacity: '0.85',
-                marginTop: '12px',
+            style: toolbar_style({
+                marginTop:  '12px',
                 marginLeft: '12px',
-            },
+            }),
             getItems: () => {
                 let items = [
                     { id: 'g6-icon-zoom-in',  value: 'zoom-in',  className: 'EV_ZOOM_IN',  title: t('zoom in')  },
                     { id: 'g6-icon-zoom-out', value: 'zoom-out', className: 'EV_ZOOM_OUT', title: t('zoom out') },
+                    /*  What the two buttons above change. Every editor
+                     *  that offers a zoom shows the number; without it
+                     *  `1:1` is a jump to a value nobody was told.  */
+                    { readout: true, className: 'G6_ZOOM_LEVEL',
+                      text: zoom_percent_text(gobj), title: t('zoom level') },
+                    { separator: true },
                     { id: 'g6-icon-fit',      value: 'auto-fit', className: 'EV_AUTO_FIT', title: t('auto fit') },
-                    { id: 'g6-icon-home', value: 'reset', className: 'EV_ZOOM_RESET', title: t('reset zoom') },
+                    /*  `1:1`, not a house. The action is `zoomTo(1)`: it
+                     *  sets the SCALE and leaves the camera where it was,
+                     *  which is neither of the two things a house means
+                     *  anywhere -- a map's initial extent, an editor's
+                     *  starting view. Sitting under `fit`, the house read
+                     *  as a second way to get the whole graph back, and
+                     *  answered with the same corner of it at 100%.
+                     *  Actual size is WRITTEN in every editor that offers
+                     *  it, never drawn: there is no glyph for it.  */
+                    { text: '1:1', value: 'reset', className: 'EV_ZOOM_RESET', title: t('actual size') },
                 ];
 
                 if(gobj_read_bool_attr(gobj, "with_fullscreen")) {
+                    /*  Full screen is a WINDOW control, not a camera one:
+                     *  it goes in its own group.  */
+                    items.push({ separator: true });
                     if(priv.is_fullscreen) {
                         items.push(
                             { id: 'g6-icon-fullscreen-exit', value: 'exit-fullscreen', className: 'EV_EXIT_FULLSCREEN', title: t('exit full screen') }
@@ -976,18 +1105,7 @@ function configure_toolbar_edit(gobj)
             type: 'yui-toolbar',
             className: 'g6-toolbar-large',
             position: 'left-top',
-            style: {
-                backgroundColor: '#f5f5f5',
-                /*  Toolbar bg is forced light in BOTH themes; icons
-                 *  use currentColor, so pin a dark color or in dark
-                 *  theme they'd be light-on-light (invisible). */
-                color: '#333',
-                padding: '8px',
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-                borderRadius: '8px',
-                border: '1px solid #e8e8e8',
-                opacity: '0.85',
-            },
+            style: toolbar_style(),
             getItems: () => {
                 return [
                     { id: 'g6-icon-plus',  value: 'create-node', className: 'EV_CREATE_NODE_BTN color_create_state', title: t('create node') },
@@ -1077,9 +1195,46 @@ function configure_behaviour(gobj)
         case "edition":
             priv.edit_mode = true;
             behaviors = [
-                "drag-canvas",
+                /*  Panning gives way while Shift is held: that is the
+                 *  marquee's gesture, and G6 binds drag-canvas straight
+                 *  to the drag events, so without this the canvas pans
+                 *  under the rubber band.  */
+                {
+                    type: "drag-canvas",
+                    key: "drag-canvas",
+                    enable: (event) => !event.shiftKey,
+                },
                 "zoom-canvas",
+                /*  Moves EVERY node in the `selected` state, not just
+                 *  the one under the pointer, and wraps the whole move
+                 *  in one history batch -- so a group move is one drag
+                 *  and one undo. Nothing to configure: `selected` is
+                 *  already its default `state`.  */
                 "drag-element",
+                /*  Shift+drag on the canvas: the rubber band. The
+                 *  GESTURE is G6's, its RESULT enters the machine --
+                 *  `onSelect` fires before G6 writes the state, so the
+                 *  ids travel with the event and the action does not
+                 *  have to race it.  */
+                {
+                    type: "brush-select",
+                    key: "brush-select",
+                    trigger: ["shift"],
+                    enableElements: ["node"],
+                    /*  Left at G6's default (false): the set is read at
+                     *  pointerup, not on every pointermove. Each answer
+                     *  repaints the cards it touches, and doing that per
+                     *  frame of a rubber band over a hundred nodes is
+                     *  paid for nothing -- the band already shows what
+                     *  it covers.  */
+                    immediately: false,
+                    onSelect: (states) => {
+                        let ids = Object.keys(states || {}).filter(
+                            (id) => (states[id] || []).includes("selected")
+                        );
+                        gobj_send_event(gobj, "EV_BRUSH_SELECT", {ids: ids}, gobj);
+                    },
+                },
             ];
             break;
         case "operation":
@@ -2843,6 +2998,126 @@ function perform_history_op(gobj, is_redo)
     }
 }
 
+/************************************************************
+ *  The selection.
+ *
+ *  G6's `selected` element state IS the selection: `drag-element`
+ *  reads it (`getElementDataByState`) to decide what a drag moves,
+ *  so keeping the set anywhere else would be a second truth the
+ *  drag does not consult. What this gclass keeps is what is
+ *  PAINTED -- an html node draws no state style at all (its key
+ *  shape is a DOM element), so the ring lives in the card's own
+ *  html, exactly like the find highlight, and the painted set
+ *  exists to diff the repaint.
+ ************************************************************/
+function selected_node_ids(gobj)
+{
+    let graph = gobj.priv.graph;
+
+    if(!graph) {
+        return [];
+    }
+
+    let data;
+    try {
+        data = graph.getElementDataByState('node', 'selected') || [];
+    } catch(e) {
+        return [];      /* asked before there is a graph to ask */
+    }
+
+    return data.map((nd) => nd.id);
+}
+
+/************************************************************
+ *  Move the ring to these nodes and off the ones that had it.
+ ************************************************************/
+function paint_selection(gobj, ids)
+{
+    let priv = gobj.priv;
+    let prev = priv._selected_paint_ids || [];
+    let next = ids || [];
+
+    priv._selected_paint_ids = next;
+
+    repaint_cards(gobj, new Set([...prev, ...next]));
+}
+
+/************************************************************
+ *  Select a SET of nodes: what a marquee and a shift-click do.
+ *
+ *  It leaves `_selected_node_id` null even for a set of one,
+ *  because that field is not "the selection", it is "the node
+ *  opened for editing" -- the resize handles, the ports and the
+ *  popovers hang off it, and none of them means anything over a
+ *  set. Clicking a node is what opens one (`select_node`); a
+ *  marquee selects, it does not open.
+ ************************************************************/
+function set_selection(gobj, ids)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
+    let next = [];
+    for(let id of (ids || [])) {
+        try {
+            if(graph.getNodeData(id)) {
+                next.push(id);
+            }
+        } catch(e) {
+            /*  An id the graph does not have: a brush answers with what
+             *  it enclosed, and a node can be gone by the time we ask.  */
+        }
+    }
+
+    deselect_node(gobj);        /* the state, the paint and the affordances */
+
+    if(!next.length) {
+        return;
+    }
+
+    history_pause(gobj);
+    try {
+        let states = {};
+        for(let id of next) {
+            states[id] = ['selected'];
+        }
+        graph.setElementState(states);
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: cannot set the selection: ${e}`);
+    }
+
+    paint_selection(gobj, next);
+
+    graph_draw(gobj).then(() => {
+        history_resume(gobj);
+    });
+}
+
+/************************************************************
+ *  Add a node to the selection, or take it out of it.
+ ************************************************************/
+function toggle_in_selection(gobj, node_id)
+{
+    let priv = gobj.priv;
+
+    /*  The union of the two views of the same thing. A brush clears
+     *  G6's state on pointerdown without telling anybody, so reading
+     *  only the state could drop a card that is on screen wearing a
+     *  ring.  */
+    let current = new Set(selected_node_ids(gobj));
+    for(let id of (priv._selected_paint_ids || [])) {
+        current.add(id);
+    }
+
+    if(current.has(node_id)) {
+        current.delete(node_id);
+    } else {
+        current.add(node_id);
+    }
+
+    set_selection(gobj, [...current]);
+}
+
 function select_node(gobj, node_id)
 {
     let priv = gobj.priv;
@@ -2857,6 +3132,7 @@ function select_node(gobj, node_id)
         graph.setElementState(node_id, ['selected']);
     } catch(e) {}
     priv._selected_node_id = node_id;
+    paint_selection(gobj, [node_id]);
 
     // Show resize handles and properties icon
     show_resize_handles(gobj);
@@ -2879,12 +3155,28 @@ function deselect_node(gobj)
     hide_delete_confirm(gobj);
     hide_unlink_confirm(gobj);
 
+    /*  Both views of the selection, because either can hold an id the
+     *  other lost: G6's state is what a drag moves, the painted set is
+     *  what the reader can see.  */
+    let clearing = new Set([
+        ...selected_node_ids(gobj),
+        ...(priv._selected_paint_ids || [])
+    ]);
     if(priv._selected_node_id) {
+        clearing.add(priv._selected_node_id);
+    }
+
+    if(clearing.size) {
         history_pause(gobj);
         try {
-            graph.setElementState(priv._selected_node_id, []);
+            let states = {};
+            for(let id of clearing) {
+                states[id] = [];
+            }
+            graph.setElementState(states);
         } catch(e) {}
         priv._selected_node_id = null;
+        paint_selection(gobj, []);
 
         graph_draw(gobj).then(() => {
             history_resume(gobj);
@@ -4688,7 +4980,7 @@ function refresh_minimap(gobj)
  *  same three-way choice — it lived inline in the theme refresh and is
  *  shared now. Returns null for a node that carries no desc.
  ************************************************************/
-function node_innerHTML_of(nd, theme, highlight)
+function node_innerHTML_of(nd, theme, highlight, selected)
 {
     if(!nd || !nd.data || !nd.data.desc) {
         return null;
@@ -4700,45 +4992,49 @@ function node_innerHTML_of(nd, theme, highlight)
     switch(desc.node_treedb_type) {
         case 'child':
             return build_chip_innerHTML(
-                desc.color, theme, record.icon, label, record.id, highlight
+                desc.color, theme, record.icon, label, record.id,
+                highlight, selected
             );
         case 'extended':
             return build_node_innerHTML(
                 desc.color, theme, record.icon, label,
-                desc.topic_name, true, record.id, highlight
+                desc.topic_name, true, record.id, highlight, selected
             );
         case 'hierarchical':
             return build_node_innerHTML(
                 desc.color, theme, record.icon, label,
-                desc.topic_name, false, record.id, highlight
+                desc.topic_name, false, record.id, highlight, selected
             );
     }
     return null;
 }
 
 /************************************************************
- *  Repaint the cards whose highlight state CHANGES: the ones that had it
- *  and lose it, plus the ones that gain it. Only those — a treedb graph
- *  is redrawn per keystroke of the find box otherwise.
+ *  Repaint these cards with the flags they carry RIGHT NOW.
+ *
+ *  One place, because the flags are independent and each used to
+ *  be written by whoever repainted last: a find that repainted its
+ *  matches erased the selection ring off them, and a selection
+ *  repainted over a match erased the amber. Both are read here
+ *  from where they live.
  ************************************************************/
-function apply_node_highlight(gobj, prev_ids, next_ids)
+function repaint_cards(gobj, ids)
 {
     let priv = gobj.priv;
     let graph = priv.graph;
-    if(!graph) {
-        return;
-    }
 
-    let next = new Set(next_ids || []);
-    let touched = new Set([...(prev_ids || []), ...next]);
-    if(touched.size === 0) {
+    if(!graph || !ids || !ids.size) {
         return;
     }
 
+    let focus    = new Set(priv._focus_ids || []);
+    let selected = new Set(priv._selected_paint_ids || []);
+
     let updates = [];
-    for(let id of touched) {
-        let nd = graph.getNodeData(id);
-        let html = node_innerHTML_of(nd, priv.theme, next.has(id));
+    for(let id of ids) {
+        let html = node_innerHTML_of(
+            graph.getNodeData(id), priv.theme, focus.has(id), selected.has(id)
+        );
         if(html !== null) {
             updates.push({id: id, style: {innerHTML: html}});
         }
@@ -4746,14 +5042,37 @@ function apply_node_highlight(gobj, prev_ids, next_ids)
     if(!updates.length) {
         return;
     }
+
     try {
         graph.updateNodeData(updates);
         graph.draw();
     } catch(e) {
-        log_error(`${gobj_short_name(gobj)}: cannot repaint the highlight: ${e}`);
+        log_error(`${gobj_short_name(gobj)}: cannot repaint the cards: ${e}`);
     }
 }
 
+/************************************************************
+ *  Repaint the cards whose highlight state CHANGES: the ones that had it
+ *  and lose it, plus the ones that gain it. Only those — a treedb graph
+ *  is redrawn per keystroke of the find box otherwise.
+ ************************************************************/
+function apply_node_highlight(gobj, prev_ids, next_ids)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+    if(!graph) {
+        return;
+    }
+
+    let next = new Set(next_ids || []);
+    let touched = new Set([...(prev_ids || []), ...next]);
+    if(touched.size === 0) {
+        return;
+    }
+
+    repaint_cards(gobj, touched);
+}
+
 function refresh_html_nodes_theme(gobj, theme)
 {
     let priv = gobj.priv;
@@ -4766,10 +5085,13 @@ function refresh_html_nodes_theme(gobj, theme)
      *  rebuilt every card without it would silently CLEAR the focus or the
      *  find that is on screen. Carry it across. */
     let highlighted = new Set(priv._focus_ids || []);
+    let selected = new Set(priv._selected_paint_ids || []);
     let updates = [];
     for(let i = 0; i < nodes.length; i++) {
         let id = nodes[i].id;
-        let html = node_innerHTML_of(graph.getNodeData(id), theme, highlighted.has(id));
+        let html = node_innerHTML_of(
+            graph.getNodeData(id), theme, highlighted.has(id), selected.has(id)
+        );
         if(html !== null) {
             updates.push({id: id, style: {innerHTML: html}});
         }
@@ -4808,13 +5130,42 @@ function refresh_default_edges_theme(gobj, theme)
     }
 }
 
+/************************************************************
+ *  The rings a card can wear, composed into one `box-shadow`.
+ *
+ *  A node can be a find match and be selected at the same time, so
+ *  neither ring may be written by overwriting the other: the amber
+ *  halo hugs the card and the blue selection ring is drawn outside
+ *  it, which is also the order that reads correctly when only one
+ *  of them is on.
+ ************************************************************/
+function ring_shadow(highlight, selected, base_shadow)
+{
+    let rings = [];
+
+    if(highlight) {
+        rings.push(`0 0 0 4px ${HIGHLIGHT_HALO}`);
+    }
+    if(selected) {
+        rings.push(`0 0 0 ${highlight? "7px" : "3px"} ${SELECT_RING}`);
+    }
+    if(base_shadow) {
+        rings.push(base_shadow);
+    }
+    if(!rings.length) {
+        return "";
+    }
+
+    return `box-shadow: ${rings.join(", ")};`;
+}
+
 /************************************************************
  *  Build innerHTML for pure-child (leaf) nodes: a compact
  *  chip-card. Same colour/typography family as the entity card
  *  but lighter (1px border, no shadow, single line). The name is
  *  always legible (ellipsis + native title tooltip on overflow).
  ************************************************************/
-function build_chip_innerHTML(color, theme, icon, label, key, highlight)
+function build_chip_innerHTML(color, theme, icon, label, key, highlight, selected)
 {
     let title = key || label;
     let dark = (theme === "dark");
@@ -4845,7 +5196,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight)
     height: 100%;
     background: ${bg};
     border: ${highlight? "3px" : "1px"} solid ${border};
-    ${highlight? `box-shadow: 0 0 0 4px ${HIGHLIGHT_HALO};` : ""}
+    ${ring_shadow(highlight, selected, "")}
     border-radius: 8px;
     color: ${text_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -4872,7 +5223,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight)
  *  colour is kept (per-topic differentiation) but softened via
  *  color-mix instead of a harsh saturated fill. Theme-aware.
  ************************************************************/
-function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight)
+function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight, selected)
 {
     let title = key || label;
     let dark = (theme === "dark");
@@ -4935,7 +5286,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     background: ${bg};
     border: ${highlight? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
-    box-shadow: ${highlight? `0 0 0 4px ${HIGHLIGHT_HALO}, ${shadow}` : shadow};
+    ${ring_shadow(highlight, selected, shadow)}
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     display: flex;
@@ -6372,6 +6723,20 @@ function ac_node_drag_end(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  The rubber band let go: these are the nodes it enclosed.
+ *
+ *  They arrive in the kw because `onSelect` runs BEFORE G6 writes
+ *  the state, so asking the graph here would answer the previous
+ *  selection.
+ ************************************************************/
+function ac_brush_select(gobj, event, kw, src)
+{
+    set_selection(gobj, (kw && kw.ids) || []);
+
+    return 0;
+}
+
 /************************************************************
  *  Node click - publish vertex clicked event
  ************************************************************/
@@ -6390,7 +6755,13 @@ function ac_node_click(gobj, event, kw, src)
                 record: nodedata.data.record
             });
 
-            if(priv.edit_mode) {
+            if(priv.edit_mode && kw.evt.shiftKey) {
+                /*  Shift+click extends the selection, the way it does
+                 *  everywhere. It never looks for a port: a port is a
+                 *  one-node affordance, and this gesture is about the
+                 *  set.  */
+                toggle_in_selection(gobj, node_id);
+            } else if(priv.edit_mode) {
                 // Check if click hits a port
                 // Convert client coords to viewport (container-relative) then to canvas
                 let containerRect = priv.$container.getBoundingClientRect();
@@ -6677,6 +7048,7 @@ function create_gclass(gclass_name)
             ["EV_NODE_CONTEXT_MENU",        ac_node_context_menu,   null],
             ["EV_CANVAS_CLICK",             ac_canvas_click,        null],
             ["EV_NODE_DRAG_END",            ac_node_drag_end,       null],
+            ["EV_BRUSH_SELECT",             ac_brush_select,        null],
 
             /*--- Toolbar events ---*/
             ["EV_ZOOM_IN",                  ac_zoom_in,             null],
@@ -6721,6 +7093,7 @@ function create_gclass(gclass_name)
         ["EV_NODE_CONTEXT_MENU",        0],
         ["EV_CANVAS_CLICK",             0],
         ["EV_NODE_DRAG_END",            0],
+        ["EV_BRUSH_SELECT",             0],
 
         /*--- Toolbar (internal) ---*/
         ["EV_ZOOM_IN",                  0],