@yuneta/gobj-ui 7.15.0 → 7.17.0

package/src/c_g6_nodes_tree.js

@@ -184,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
  ***************************************************************/
@@ -324,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)
@@ -774,20 +787,24 @@ function configure_events(gobj)
     };
     i18next.on('languageChanged', priv._on_language_changed);
 
-    if(gobj_read_bool_attr(gobj, "with_fullscreen")) {
-        graph.on("keydown", (evt) => {
-            const key = evt.key;
-            const fullscreen = graph_get_plugin(gobj, "fullscreen");
-            if(!fullscreen) {
-                return;
-            }
-            if(key === "F" || key === "f") {
-                fullscreen.request();
-            } else if(key === "Escape") {
-                fullscreen.exit();
+    /*  The canvas carries a `tabIndex` of its own, so a keydown reaches
+     *  us only while the GRAPH has focus. That is what keeps Ctrl+A in
+     *  the find box a text selection and not a selection of every node:
+     *  the focus is in the input, and the input is not inside the
+     *  canvas. The callback only translates -- the work is in the
+     *  action, like every other gesture here.  */
+    graph.on("keydown", (evt) => {
+        let ctrl = !!(evt.ctrlKey || evt.metaKey);
+
+        if(ctrl && (evt.key === "a" || evt.key === "A")) {
+            /*  Or the browser selects the page's text underneath.  */
+            if(typeof evt.preventDefault === "function") {
+                evt.preventDefault();
             }
-        });
-    }
+        }
+
+        gobj_send_event(gobj, "EV_KEY_DOWN", {key: evt.key, ctrl: ctrl}, gobj);
+    });
 }
 
 /************************************************************
@@ -1182,9 +1199,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":
@@ -2875,14 +2929,19 @@ function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_co
     hide_overlay(gobj, priv_key);
 
     let priv = gobj.priv;
-    if(!target_el) {
-        return;
-    }
-
-    let iconRect = target_el.getBoundingClientRect();
     let containerRect = priv.$container.getBoundingClientRect();
-    let left = iconRect.right - containerRect.left + 6;
-    let top = iconRect.top - containerRect.top - 4;
+    let left, top;
+
+    if(target_el) {
+        let iconRect = target_el.getBoundingClientRect();
+        left = iconRect.right - containerRect.left + 6;
+        top  = iconRect.top   - containerRect.top  - 4;
+    } else {
+        /*  A question about a SET has no icon to hang off: it is asked
+         *  in the middle of the graph it is about.  */
+        left = Math.round(containerRect.width / 2) - 110;
+        top  = Math.round(containerRect.height / 4);
+    }
 
     const popover = create_popover_base(left, top, 'g6-confirm-popover', '#ff4d4f', 160);
 
@@ -2948,6 +3007,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;
@@ -2962,6 +3141,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);
@@ -2984,12 +3164,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);
@@ -4793,7 +4989,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;
@@ -4805,45 +5001,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}});
         }
@@ -4851,12 +5051,35 @@ 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)
@@ -4871,10 +5094,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}});
         }
@@ -4913,13 +5139,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");
@@ -4950,7 +5205,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;
@@ -4977,7 +5232,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");
@@ -5040,7 +5295,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;
@@ -5101,31 +5356,151 @@ function execute_delete_node(gobj, nodeData)
 }
 
 /************************************************************
- *  Show a confirmation popover next to the delete icon.
+ *  Every node in the graph.
  ************************************************************/
-function show_delete_confirm(gobj, nodeData)
+function select_all_nodes(gobj)
+{
+    let graph = gobj.priv.graph;
+
+    if(!graph) {
+        return;
+    }
+
+    let nodes = (graph.getData() || {}).nodes || [];
+    set_selection(gobj, nodes.map((nd) => nd.id));
+}
+
+/************************************************************
+ *  The nodes currently selected, as their node data.
+ ************************************************************/
+function selected_nodes_data(gobj)
 {
     let priv = gobj.priv;
-    let record = nodeData.data.record || {};
-    let topic_name = nodeData.data.desc.topic_name;
+    let graph = priv.graph;
+
+    let ids = new Set(selected_node_ids(gobj));
+    for(let id of (priv._selected_paint_ids || [])) {
+        ids.add(id);
+    }
+    if(priv._selected_node_id) {
+        ids.add(priv._selected_node_id);
+    }
+
+    let out = [];
+    for(let id of ids) {
+        let nd;
+        try {
+            nd = graph.getNodeData(id);
+        } catch(e) {
+            continue;       /* gone since it was selected */
+        }
+        if(nd && nd.data && nd.data.desc) {
+            out.push(nd);
+        }
+    }
+
+    return out;
+}
+
+/************************************************************
+ *  What a delete takes with it, for ONE node or for a set.
+ *
+ *  Same sentence in both cases and the same keys, because it is the
+ *  same warning: these views delete with `force`, which UNLINKS the
+ *  children (they survive, loose) and cleans the node off its
+ *  parents. Over a set the two numbers are the sums -- an operator
+ *  about to detach eleven records has to read eleven, not "are you
+ *  sure".
+ ************************************************************/
+function delete_question(nodes)
+{
+    let children = 0;
+    let parents = 0;
+
+    for(let nd of nodes) {
+        let impact = delete_impact(nd.data.desc, nd.data.record || {});
+        children += impact.children;
+        parents  += impact.parents;
+    }
+
+    let question;
+    if(nodes.length === 1) {
+        let nd = nodes[0];
+        question = t('delete') + ' ' + nd.data.desc.topic_name + ': ' +
+                   (nd.data.record || {}).id + '?';
+    } else {
+        question = t('delete') + ' ' + nodes.length + ' ' + t('records') + '?';
+    }
 
-    /*  What the delete takes with it. These views delete with `force`, and
-     *  `force` UNLINKS a node's children — they survive, loose — and cleans
-     *  it off its parents. A question that names only the node lets an
-     *  operator detach eleven records believing they removed one. */
-    let impact = delete_impact(nodeData.data.desc, record);
-    let question = t('delete') + ' ' + topic_name + ': ' + record.id + '?';
-    if(impact.children > 0) {
-        question += '\n' + impact.children + ' ' +
-                    t('children will be unlinked, not deleted', {count: impact.children});
+    if(children > 0) {
+        question += '\n' + children + ' ' +
+                    t('children will be unlinked, not deleted', {count: children});
     }
-    if(impact.parents > 0) {
+    if(parents > 0) {
         question += '\n' + t('it will be detached from') + ' ' +
-                    impact.parents + ' ' + t('parents', {count: impact.parents});
+                    parents + ' ' + t('parents', {count: parents});
+    }
+
+    return question;
+}
+
+/************************************************************
+ *  Delete every selected node (the Delete key).
+ ************************************************************/
+function request_delete_selection(gobj)
+{
+    let nodes = selected_nodes_data(gobj);
+
+    if(!nodes.length) {
+        return;     /* nothing selected: the key means nothing here */
     }
 
+    if(!gobj_read_bool_attr(gobj, "confirm_delete_node")) {
+        execute_delete_selection(gobj, nodes);
+        return;
+    }
+
+    /*  No anchor: the set has no icon of its own, so the question is
+     *  asked in the middle of the graph.  */
+    show_confirm_popover(gobj, null,
+        delete_question(nodes),
+        'delete', '#ff4d4f',
+        () => execute_delete_selection(gobj, nodes),
+        '_delete_confirm_el'
+    );
+}
+
+function execute_delete_selection(gobj, nodes)
+{
+    let priv = gobj.priv;
+
+    hide_delete_confirm(gobj);
+
+    /*  One event per node: a treedb deletes records, it has no bulk
+     *  delete, and the host turns each of these into its own command
+     *  exactly as the topic table's bulk delete does.  */
+    for(let nd of nodes) {
+        gobj_publish_event(gobj, "EV_DELETE_NODE", {
+            treedb_name: priv.treedb_name,
+            topic_name: nd.data.desc.topic_name,
+            record: nd.data.record,
+        });
+    }
+
+    deselect_node(gobj);
+}
+
+/************************************************************
+ *  Show a confirmation popover next to the delete icon.
+ ************************************************************/
+function show_delete_confirm(gobj, nodeData)
+{
+    let priv = gobj.priv;
+
+    /*  Same sentence as the Delete key's, from the same place: the
+     *  warning does not depend on how the delete was asked for.  */
     show_confirm_popover(gobj, priv._node_delete_el,
-        question,
+        delete_question([nodeData]),
         'delete', '#ff4d4f',
         () => execute_delete_node(gobj, nodeData),
         '_delete_confirm_el'
@@ -6477,6 +6852,67 @@ function ac_node_drag_end(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  A key, while the graph has focus.
+ *
+ *  Full screen keeps the two keys it always had. The rest belong to
+ *  the selection, so they only mean anything in edition -- outside
+ *  it there is nothing selected to clear, select or delete.
+ ************************************************************/
+function ac_key_down(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    let key = (kw && kw.key) || "";
+
+    if(gobj_read_bool_attr(gobj, "with_fullscreen")) {
+        let fullscreen = graph_get_plugin(gobj, "fullscreen");
+        if(fullscreen) {
+            if(key === "F" || key === "f") {
+                fullscreen.request();
+            } else if(key === "Escape") {
+                /*  Escape also clears the selection below, and both are
+                 *  right: the browser exits full screen on Escape
+                 *  whatever we do, so refusing to clear as well would
+                 *  only make the key do less than it appears to.  */
+                fullscreen.exit();
+            }
+        }
+    }
+
+    if(!priv.edit_mode) {
+        return 0;
+    }
+
+    if(key === "Escape") {
+        deselect_node(gobj);
+        return 0;
+    }
+    if(kw.ctrl && (key === "a" || key === "A")) {
+        select_all_nodes(gobj);
+        return 0;
+    }
+    if(key === "Delete" || key === "Backspace") {
+        request_delete_selection(gobj);
+        return 0;
+    }
+
+    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
  ************************************************************/
@@ -6495,7 +6931,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();
@@ -6782,6 +7224,8 @@ 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],
+            ["EV_KEY_DOWN",                 ac_key_down,            null],
 
             /*--- Toolbar events ---*/
             ["EV_ZOOM_IN",                  ac_zoom_in,             null],
@@ -6826,6 +7270,8 @@ function create_gclass(gclass_name)
         ["EV_NODE_CONTEXT_MENU",        0],
         ["EV_CANVAS_CLICK",             0],
         ["EV_NODE_DRAG_END",            0],
+        ["EV_BRUSH_SELECT",             0],
+        ["EV_KEY_DOWN",                 0],
 
         /*--- Toolbar (internal) ---*/
         ["EV_ZOOM_IN",                  0],