@yuneta/gobj-ui 7.16.0 → 7.17.0

package/README.md

@@ -718,8 +718,16 @@ clicked":
 | click a node | selects it **and opens it**: resize handles, ports, popovers |
 | **shift + click** | adds that node to the selection, or takes it out |
 | **shift + drag on the canvas** | rubber band: the selection becomes what it enclosed |
+| **ctrl/cmd + A** | every node |
 | drag any selected node | **moves the whole selection**, as one undo |
-| click the canvas | clears it |
+| **Delete** / **Backspace** | deletes the selection, after a confirmation that counts what it takes |
+| **Esc**, or a click on the canvas | clears it |
+
+The keys reach the graph only while the **graph has focus** — G6 gives its
+canvas a `tabIndex` of its own — which is what keeps `ctrl+A` inside the find
+box a selection of the TEXT and not of every node: the focus is in the input,
+and the input is not inside the canvas. They arrive as `EV_KEY_DOWN` and the
+action decides, so a key is as visible in the `machine` trace as a click.
 
 Three decisions are worth knowing, because each one is where this could have
 gone wrong:
@@ -752,6 +760,17 @@ predicate), or the canvas would pan under the rubber band — G6 binds
 `drag-canvas` straight to the drag events, and its own docs warn that the two
 gestures cannot both be a plain drag.
 
+**A delete says what it takes, whether it is one or twenty.** The Delete key
+asks the same question the per-node delete icon asks, built by the same
+function: the record's key when there is one, the count when there are more,
+and then the two lines that are actually at stake — *N children will be
+UNLINKED, not deleted* and *it will be detached from M parents* — where over a
+set the numbers are the sums. These views delete with `force`, so an operator
+pressing Delete over twelve cards has to read eleven detached children, not
+"are you sure". It needs no new keys: the sentence is the one `7.10.0` already
+defined. The question has no icon to hang off, so it is asked in the middle of
+the graph it is about.
+
 **A marquee selects, it does not open.** Even when it encloses exactly one
 node, the handles and ports stay away: `_selected_node_id` means *the node
 opened for editing*, and only a click sets it. Everything that hangs off a

package/dist/gobj-ui.cjs.js

@@ -54088,12 +54088,15 @@ function configure_events(gobj) {
 		update_toolbar(gobj);
 	};
 	i18next.default.on("languageChanged", priv._on_language_changed);
-	if ((0, _yuneta_gobj_js.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();
+	graph.on("keydown", (evt) => {
+		let ctrl = !!(evt.ctrlKey || evt.metaKey);
+		if (ctrl && (evt.key === "a" || evt.key === "A")) {
+			if (typeof evt.preventDefault === "function") evt.preventDefault();
+		}
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_KEY_DOWN", {
+			key: evt.key,
+			ctrl
+		}, gobj);
 	});
 }
 /************************************************************
@@ -55470,10 +55473,17 @@ function create_form_button_row(parent, buttons) {
 function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_color, onConfirm, priv_key) {
 	hide_overlay(gobj, priv_key);
 	let priv = gobj.priv;
-	if (!target_el) return;
-	let iconRect = target_el.getBoundingClientRect();
 	let containerRect = priv.$container.getBoundingClientRect();
-	const popover = create_popover_base(iconRect.right - containerRect.left + 6, iconRect.top - containerRect.top - 4, "g6-confirm-popover", "#ff4d4f", 160);
+	let left, top;
+	if (target_el) {
+		let iconRect = target_el.getBoundingClientRect();
+		left = iconRect.right - containerRect.left + 6;
+		top = iconRect.top - containerRect.top - 4;
+	} else {
+		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);
 	let msg = document.createElement("div");
 	msg.style.cssText = "margin-bottom:10px;font-weight:500;white-space:pre-line;";
 	msg.textContent = message;
@@ -57157,17 +57167,89 @@ function execute_delete_node(gobj, nodeData) {
 	deselect_node(gobj);
 }
 /************************************************************
+*  Every node in the graph.
+************************************************************/
+function select_all_nodes(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph) return;
+	set_selection(gobj, ((graph.getData() || {}).nodes || []).map((nd) => nd.id));
+}
+/************************************************************
+*  The nodes currently selected, as their node data.
+************************************************************/
+function selected_nodes_data(gobj) {
+	let priv = gobj.priv;
+	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;
+		}
+		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 = (0, i18next.t)("delete") + " " + nd.data.desc.topic_name + ": " + (nd.data.record || {}).id + "?";
+	} else question = (0, i18next.t)("delete") + " " + nodes.length + " " + (0, i18next.t)("records") + "?";
+	if (children > 0) question += "\n" + children + " " + (0, i18next.t)("children will be unlinked, not deleted", { count: children });
+	if (parents > 0) question += "\n" + (0, i18next.t)("it will be detached from") + " " + parents + " " + (0, i18next.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;
+	if (!(0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "confirm_delete_node")) {
+		execute_delete_selection(gobj, nodes);
+		return;
+	}
+	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);
+	for (let nd of nodes) (0, _yuneta_gobj_js.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;
-	let record = nodeData.data.record || {};
-	let topic_name = nodeData.data.desc.topic_name;
-	let impact = delete_impact(nodeData.data.desc, record);
-	let question = (0, i18next.t)("delete") + " " + topic_name + ": " + record.id + "?";
-	if (impact.children > 0) question += "\n" + impact.children + " " + (0, i18next.t)("children will be unlinked, not deleted", { count: impact.children });
-	if (impact.parents > 0) question += "\n" + (0, i18next.t)("it will be detached from") + " " + impact.parents + " " + (0, i18next.t)("parents", { count: impact.parents });
-	show_confirm_popover(gobj, priv._node_delete_el, question, "delete", "#ff4d4f", () => execute_delete_node(gobj, nodeData), "_delete_confirm_el");
+	show_confirm_popover(gobj, priv._node_delete_el, delete_question([nodeData]), "delete", "#ff4d4f", () => execute_delete_node(gobj, nodeData), "_delete_confirm_el");
 }
 function hide_delete_confirm(gobj) {
 	hide_overlay(gobj, "_delete_confirm_el");
@@ -58034,6 +58116,38 @@ 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 ((0, _yuneta_gobj_js.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") 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
@@ -58292,6 +58406,11 @@ function create_gclass$1(gclass_name) {
 			ac_brush_select,
 			null
 		],
+		[
+			"EV_KEY_DOWN",
+			ac_key_down,
+			null
+		],
 		[
 			"EV_ZOOM_IN",
 			ac_zoom_in,
@@ -58401,6 +58520,7 @@ function create_gclass$1(gclass_name) {
 		["EV_CANVAS_CLICK", 0],
 		["EV_NODE_DRAG_END", 0],
 		["EV_BRUSH_SELECT", 0],
+		["EV_KEY_DOWN", 0],
 		["EV_ZOOM_IN", 0],
 		["EV_ZOOM_OUT", 0],
 		["EV_ZOOM_RESET", 0],

package/dist/gobj-ui.es.js

@@ -54075,12 +54075,15 @@ function configure_events(gobj) {
 		update_toolbar(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();
+	graph.on("keydown", (evt) => {
+		let ctrl = !!(evt.ctrlKey || evt.metaKey);
+		if (ctrl && (evt.key === "a" || evt.key === "A")) {
+			if (typeof evt.preventDefault === "function") evt.preventDefault();
+		}
+		gobj_send_event(gobj, "EV_KEY_DOWN", {
+			key: evt.key,
+			ctrl
+		}, gobj);
 	});
 }
 /************************************************************
@@ -55457,10 +55460,17 @@ function create_form_button_row(parent, buttons) {
 function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_color, onConfirm, priv_key) {
 	hide_overlay(gobj, priv_key);
 	let priv = gobj.priv;
-	if (!target_el) return;
-	let iconRect = target_el.getBoundingClientRect();
 	let containerRect = priv.$container.getBoundingClientRect();
-	const popover = create_popover_base(iconRect.right - containerRect.left + 6, iconRect.top - containerRect.top - 4, "g6-confirm-popover", "#ff4d4f", 160);
+	let left, top;
+	if (target_el) {
+		let iconRect = target_el.getBoundingClientRect();
+		left = iconRect.right - containerRect.left + 6;
+		top = iconRect.top - containerRect.top - 4;
+	} else {
+		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);
 	let msg = document.createElement("div");
 	msg.style.cssText = "margin-bottom:10px;font-weight:500;white-space:pre-line;";
 	msg.textContent = message;
@@ -57144,17 +57154,89 @@ function execute_delete_node(gobj, nodeData) {
 	deselect_node(gobj);
 }
 /************************************************************
+*  Every node in the graph.
+************************************************************/
+function select_all_nodes(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph) return;
+	set_selection(gobj, ((graph.getData() || {}).nodes || []).map((nd) => nd.id));
+}
+/************************************************************
+*  The nodes currently selected, as their node data.
+************************************************************/
+function selected_nodes_data(gobj) {
+	let priv = gobj.priv;
+	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;
+		}
+		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") + "?";
+	if (children > 0) question += "\n" + children + " " + t("children will be unlinked, not deleted", { count: children });
+	if (parents > 0) question += "\n" + t("it will be detached from") + " " + 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;
+	if (!gobj_read_bool_attr(gobj, "confirm_delete_node")) {
+		execute_delete_selection(gobj, nodes);
+		return;
+	}
+	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);
+	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;
-	let record = nodeData.data.record || {};
-	let topic_name = nodeData.data.desc.topic_name;
-	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 (impact.parents > 0) question += "\n" + t("it will be detached from") + " " + impact.parents + " " + t("parents", { count: impact.parents });
-	show_confirm_popover(gobj, priv._node_delete_el, question, "delete", "#ff4d4f", () => execute_delete_node(gobj, nodeData), "_delete_confirm_el");
+	show_confirm_popover(gobj, priv._node_delete_el, delete_question([nodeData]), "delete", "#ff4d4f", () => execute_delete_node(gobj, nodeData), "_delete_confirm_el");
 }
 function hide_delete_confirm(gobj) {
 	hide_overlay(gobj, "_delete_confirm_el");
@@ -58021,6 +58103,38 @@ 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") 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
@@ -58279,6 +58393,11 @@ function create_gclass$1(gclass_name) {
 			ac_brush_select,
 			null
 		],
+		[
+			"EV_KEY_DOWN",
+			ac_key_down,
+			null
+		],
 		[
 			"EV_ZOOM_IN",
 			ac_zoom_in,
@@ -58388,6 +58507,7 @@ function create_gclass$1(gclass_name) {
 		["EV_CANVAS_CLICK", 0],
 		["EV_NODE_DRAG_END", 0],
 		["EV_BRUSH_SELECT", 0],
+		["EV_KEY_DOWN", 0],
 		["EV_ZOOM_IN", 0],
 		["EV_ZOOM_OUT", 0],
 		["EV_ZOOM_RESET", 0],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.16.0",
+  "version": "7.17.0",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_g6_nodes_tree.js

@@ -787,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);
+    });
 }
 
 /************************************************************
@@ -2925,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);
 
@@ -5347,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;
 
-    /*  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});
+    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;
     }
-    if(impact.parents > 0) {
+
+    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') + '?';
+    }
+
+    if(children > 0) {
+        question += '\n' + children + ' ' +
+                    t('children will be unlinked, not deleted', {count: children});
+    }
+    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'
@@ -6723,6 +6852,53 @@ 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.
  *
@@ -7049,6 +7225,7 @@ function create_gclass(gclass_name)
             ["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],
@@ -7094,6 +7271,7 @@ function create_gclass(gclass_name)
         ["EV_CANVAS_CLICK",             0],
         ["EV_NODE_DRAG_END",            0],
         ["EV_BRUSH_SELECT",             0],
+        ["EV_KEY_DOWN",                 0],
 
         /*--- Toolbar (internal) ---*/
         ["EV_ZOOM_IN",                  0],