@yuneta/gobj-ui 7.16.0 → 7.18.0

package/README.md

@@ -680,6 +680,8 @@ Two implementation notes worth keeping:
 | fit | `fitView()`: the whole graph in the viewport |
 | **`1:1`** | `zoomTo(1)`: actual size |
 | ── | |
+| **fit to selection** | `fit`, for the part that is selected (edition only, disabled while nothing is) |
+| ── | |
 | full screen | the container, not the camera |
 
 Two of those rows are the answer to a real complaint, and the reasoning
@@ -695,6 +697,14 @@ generalises:
   that offers it, because there is no glyph anybody recognises for it.
 - **the zoom level is shown** because `1:1` is a jump to a number, and a jump
   to a number is only meaningful next to the number you are on.
+- **fit to selection** wears the `fit` icon with a marked object inside it,
+  drawn rather than borrowed: the two sit next to each other and are the same
+  action at two scopes, so they have to read as a family. It appears only in
+  edition — a button that can never be enabled is furniture, not a control —
+  and is disabled while nothing is selected. `fitView()` has no subset form,
+  so the bounds are measured off the elements and the zoom is clamped to the
+  graph's own `zoomRange`, the only limit that is not invented here. One card
+  filling the view is not a bug: that is what zooming to it means.
 
 The **separators are gaps, not lines**: every item already carries a hairline
 against its neighbour, so one more line would not group anything. Full screen
@@ -705,8 +715,9 @@ Both toolbars (this one and the edit one) **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 over a dark canvas.
 
-**New keys for consumers: `actual size`, `zoom level`** (both tooltips, so a
-host that has not defined them shows the key on hover and nothing else breaks).
+**New keys for consumers: `actual size`, `zoom level`, `zoom to selection`**
+(all tooltips, so a host that has not defined them shows the key on hover and
+nothing else breaks).
 
 ### Selecting several nodes, and moving them together
 
@@ -718,8 +729,17 @@ 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 |
+| the **fit-to-selection** button | puts the viewport on what is selected |
 | 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 +772,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

@@ -53617,6 +53617,15 @@ var ICONS = `<svg xmlns="http://www.w3.org/2000/svg">
     <symbol id="g6-icon-fit" viewBox="0 0 448 512">
         <path fill="currentColor" 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"/>
     </symbol>
+    <!-- fit to selection: the same corner brackets as the fit icon,
+         around a marked object. The two sit side by side in the
+         toolbar and have to read as a family, which a borrowed glyph
+         would not. (No backticks in here: the sprite lives inside a
+         template literal.) -->
+    <symbol id="g6-icon-fit-selection" viewBox="0 0 448 512">
+        <path fill="currentColor" 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"/>
+        <rect fill="currentColor" x="144" y="176" width="160" height="160" rx="24"/>
+    </symbol>
     <!-- crosshairs (center) -->
     <symbol id="g6-icon-center" viewBox="0 0 576 512">
         <path fill="currentColor" d="M288-16c17.7 0 32 14.3 32 32l0 18.3c98.1 14 175.7 91.6 189.7 189.7l18.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-18.3 0c-14 98.1-91.6 175.7-189.7 189.7l0 18.3c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-18.3C157.9 463.7 80.3 386.1 66.3 288L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l18.3 0C80.3 125.9 157.9 48.3 256 34.3L256 16c0-17.7 14.3-32 32-32zM131.2 288c12.7 62.7 62.1 112.1 124.8 124.8l0-12.8c0-17.7 14.3-32 32-32s32 14.3 32 32l0 12.8c62.7-12.7 112.1-62.1 124.8-124.8L432 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l12.8 0C432.1 161.3 382.7 111.9 320 99.2l0 12.8c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-12.8C193.3 111.9 143.9 161.3 131.2 224l12.8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-12.8 0zM288 208a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/>
@@ -54088,12 +54097,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);
 	});
 }
 /************************************************************
@@ -54147,6 +54159,7 @@ function update_toolbar(gobj) {
 	if (graph_get_plugin(gobj, "toolbar")) graph.updatePlugin({ key: "toolbar" });
 	configure_toolbar_edit(gobj);
 	if (graph_get_plugin(gobj, "toolbar-edit")) graph.updatePlugin({ key: "toolbar-edit" });
+	update_zoom_selection_button(gobj);
 }
 /************************************************************
 *  The floating toolbars follow the theme.
@@ -54247,6 +54260,13 @@ function configure_toolbar(gobj) {
 					title: (0, i18next.t)("actual size")
 				}
 			];
+			if (priv.edit_mode) items.push({
+				id: "g6-icon-fit-selection",
+				value: "fit-selection",
+				className: "EV_ZOOM_SELECTION",
+				title: (0, i18next.t)("zoom to selection"),
+				disabled: true
+			});
 			if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_fullscreen")) {
 				items.push({ separator: true });
 				if (priv.is_fullscreen) items.push({
@@ -54278,6 +54298,9 @@ function configure_toolbar(gobj) {
 				case "auto-fit":
 					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_AUTO_FIT", {}, gobj);
 					break;
+				case "fit-selection":
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_ZOOM_SELECTION", {}, gobj);
+					break;
 				case "center":
 					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CENTER", {}, gobj);
 					break;
@@ -55083,6 +55106,52 @@ async function graph_fit_readable(gobj) {
 	}
 }
 /************************************************************
+*  Put the viewport on the selection: what `fit` does, for a part.
+*
+*  Computed rather than delegated because `fitView()` fits the whole
+*  graph and there is no subset form of it. The bounds come from the
+*  elements themselves, so a node's real card size is what is
+*  measured, not an assumed one; the zoom is clamped to the graph's
+*  own `zoomRange`, which is the only limit that is not invented
+*  here. A selection of one card filling the view is not a bug --
+*  that is what zooming to it means, and it is what every editor
+*  that offers the action does.
+************************************************************/
+async function graph_fit_selection(gobj, ids) {
+	let graph = gobj.priv.graph;
+	if (!graph || !ids || !ids.length) return;
+	let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
+	let found = 0;
+	for (let id of ids) {
+		let bounds;
+		try {
+			bounds = graph.getElementRenderBounds(id);
+		} catch (e) {
+			continue;
+		}
+		if (!bounds || !bounds.min || !bounds.max) continue;
+		minx = Math.min(minx, bounds.min[0]);
+		miny = Math.min(miny, bounds.min[1]);
+		maxx = Math.max(maxx, bounds.max[0]);
+		maxy = Math.max(maxy, bounds.max[1]);
+		found++;
+	}
+	if (!found) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: the selection has no bounds to fit`);
+		return;
+	}
+	let size = graph.getSize();
+	let vw = Math.max(1, size[0] - 96);
+	let vh = Math.max(1, size[1] - 96);
+	let bw = Math.max(1, maxx - minx);
+	let bh = Math.max(1, maxy - miny);
+	let zoom = Math.min(vw / bw, vh / bh);
+	let range = graph.getZoomRange() || [.2, 4];
+	zoom = Math.max(range[0], Math.min(range[1], zoom));
+	await graph.zoomTo(zoom);
+	await graph.focusElement(ids);
+}
+/************************************************************
 *  Focus the graph on one topic: highlight (amber 'active' state)
 *  every node of that topic and centre the viewport on them. An
 *  empty topic clears the highlight. If the graph is not rendered
@@ -55470,10 +55539,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;
@@ -55544,6 +55620,23 @@ function paint_selection(gobj, ids) {
 	let next = ids || [];
 	priv._selected_paint_ids = next;
 	repaint_cards(gobj, /* @__PURE__ */ new Set([...prev, ...next]));
+	update_zoom_selection_button(gobj);
+}
+/************************************************************
+*  Zoom-to-selection can only act on a selection.
+*
+*  The attribute is toggled on the element instead of re-rendering
+*  the toolbar, which would rebuild its innerHTML -- and with it
+*  drop the disabled state of every OTHER button -- each time a
+*  card is ticked.
+************************************************************/
+function update_zoom_selection_button(gobj) {
+	let priv = gobj.priv;
+	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	if (!$container) return;
+	if (!$container.querySelector(".EV_ZOOM_SELECTION")) return;
+	if ((priv._selected_paint_ids || []).length > 0) enableElements($container, ".EV_ZOOM_SELECTION");
+	else disableElements($container, ".EV_ZOOM_SELECTION");
 }
 /************************************************************
 *  Select a SET of nodes: what a marquee and a shift-click do.
@@ -57157,17 +57250,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");
@@ -57976,6 +58141,18 @@ function ac_auto_fit(gobj, event, kw, src) {
 	graph_fitview(gobj);
 	return 0;
 }
+/************************************************************
+*  Zoom to what is selected.
+************************************************************/
+function ac_zoom_selection(gobj, event, kw, src) {
+	let ids = gobj.priv._selected_paint_ids || [];
+	if (!ids.length) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: zoom to selection with nothing selected`);
+		return -1;
+	}
+	graph_fit_selection(gobj, ids);
+	return 0;
+}
 function ac_focus_topic(gobj, event, kw, src) {
 	graph_focus_topic(gobj, kw && kw.topic);
 	return 0;
@@ -58034,6 +58211,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 +58501,11 @@ function create_gclass$1(gclass_name) {
 			ac_brush_select,
 			null
 		],
+		[
+			"EV_KEY_DOWN",
+			ac_key_down,
+			null
+		],
 		[
 			"EV_ZOOM_IN",
 			ac_zoom_in,
@@ -58312,6 +58526,11 @@ function create_gclass$1(gclass_name) {
 			ac_auto_fit,
 			null
 		],
+		[
+			"EV_ZOOM_SELECTION",
+			ac_zoom_selection,
+			null
+		],
 		[
 			"EV_FOCUS_TOPIC",
 			ac_focus_topic,
@@ -58401,10 +58620,12 @@ 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],
 		["EV_AUTO_FIT", 0],
+		["EV_ZOOM_SELECTION", 0],
 		["EV_FOCUS_TOPIC", 0],
 		["EV_FIND_NODES", 0],
 		["EV_FIND_RESULT", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],

package/dist/gobj-ui.es.js

@@ -53604,6 +53604,15 @@ var ICONS = `<svg xmlns="http://www.w3.org/2000/svg">
     <symbol id="g6-icon-fit" viewBox="0 0 448 512">
         <path fill="currentColor" 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"/>
     </symbol>
+    <!-- fit to selection: the same corner brackets as the fit icon,
+         around a marked object. The two sit side by side in the
+         toolbar and have to read as a family, which a borrowed glyph
+         would not. (No backticks in here: the sprite lives inside a
+         template literal.) -->
+    <symbol id="g6-icon-fit-selection" viewBox="0 0 448 512">
+        <path fill="currentColor" 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"/>
+        <rect fill="currentColor" x="144" y="176" width="160" height="160" rx="24"/>
+    </symbol>
     <!-- crosshairs (center) -->
     <symbol id="g6-icon-center" viewBox="0 0 576 512">
         <path fill="currentColor" d="M288-16c17.7 0 32 14.3 32 32l0 18.3c98.1 14 175.7 91.6 189.7 189.7l18.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-18.3 0c-14 98.1-91.6 175.7-189.7 189.7l0 18.3c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-18.3C157.9 463.7 80.3 386.1 66.3 288L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l18.3 0C80.3 125.9 157.9 48.3 256 34.3L256 16c0-17.7 14.3-32 32-32zM131.2 288c12.7 62.7 62.1 112.1 124.8 124.8l0-12.8c0-17.7 14.3-32 32-32s32 14.3 32 32l0 12.8c62.7-12.7 112.1-62.1 124.8-124.8L432 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l12.8 0C432.1 161.3 382.7 111.9 320 99.2l0 12.8c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-12.8C193.3 111.9 143.9 161.3 131.2 224l12.8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-12.8 0zM288 208a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/>
@@ -54075,12 +54084,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);
 	});
 }
 /************************************************************
@@ -54134,6 +54146,7 @@ function update_toolbar(gobj) {
 	if (graph_get_plugin(gobj, "toolbar")) graph.updatePlugin({ key: "toolbar" });
 	configure_toolbar_edit(gobj);
 	if (graph_get_plugin(gobj, "toolbar-edit")) graph.updatePlugin({ key: "toolbar-edit" });
+	update_zoom_selection_button(gobj);
 }
 /************************************************************
 *  The floating toolbars follow the theme.
@@ -54234,6 +54247,13 @@ function configure_toolbar(gobj) {
 					title: t("actual size")
 				}
 			];
+			if (priv.edit_mode) items.push({
+				id: "g6-icon-fit-selection",
+				value: "fit-selection",
+				className: "EV_ZOOM_SELECTION",
+				title: t("zoom to selection"),
+				disabled: true
+			});
 			if (gobj_read_bool_attr(gobj, "with_fullscreen")) {
 				items.push({ separator: true });
 				if (priv.is_fullscreen) items.push({
@@ -54265,6 +54285,9 @@ function configure_toolbar(gobj) {
 				case "auto-fit":
 					gobj_send_event(gobj, "EV_AUTO_FIT", {}, gobj);
 					break;
+				case "fit-selection":
+					gobj_send_event(gobj, "EV_ZOOM_SELECTION", {}, gobj);
+					break;
 				case "center":
 					gobj_send_event(gobj, "EV_CENTER", {}, gobj);
 					break;
@@ -55070,6 +55093,52 @@ async function graph_fit_readable(gobj) {
 	}
 }
 /************************************************************
+*  Put the viewport on the selection: what `fit` does, for a part.
+*
+*  Computed rather than delegated because `fitView()` fits the whole
+*  graph and there is no subset form of it. The bounds come from the
+*  elements themselves, so a node's real card size is what is
+*  measured, not an assumed one; the zoom is clamped to the graph's
+*  own `zoomRange`, which is the only limit that is not invented
+*  here. A selection of one card filling the view is not a bug --
+*  that is what zooming to it means, and it is what every editor
+*  that offers the action does.
+************************************************************/
+async function graph_fit_selection(gobj, ids) {
+	let graph = gobj.priv.graph;
+	if (!graph || !ids || !ids.length) return;
+	let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
+	let found = 0;
+	for (let id of ids) {
+		let bounds;
+		try {
+			bounds = graph.getElementRenderBounds(id);
+		} catch (e) {
+			continue;
+		}
+		if (!bounds || !bounds.min || !bounds.max) continue;
+		minx = Math.min(minx, bounds.min[0]);
+		miny = Math.min(miny, bounds.min[1]);
+		maxx = Math.max(maxx, bounds.max[0]);
+		maxy = Math.max(maxy, bounds.max[1]);
+		found++;
+	}
+	if (!found) {
+		log_error(`${gobj_short_name(gobj)}: the selection has no bounds to fit`);
+		return;
+	}
+	let size = graph.getSize();
+	let vw = Math.max(1, size[0] - 96);
+	let vh = Math.max(1, size[1] - 96);
+	let bw = Math.max(1, maxx - minx);
+	let bh = Math.max(1, maxy - miny);
+	let zoom = Math.min(vw / bw, vh / bh);
+	let range = graph.getZoomRange() || [.2, 4];
+	zoom = Math.max(range[0], Math.min(range[1], zoom));
+	await graph.zoomTo(zoom);
+	await graph.focusElement(ids);
+}
+/************************************************************
 *  Focus the graph on one topic: highlight (amber 'active' state)
 *  every node of that topic and centre the viewport on them. An
 *  empty topic clears the highlight. If the graph is not rendered
@@ -55457,10 +55526,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;
@@ -55531,6 +55607,23 @@ function paint_selection(gobj, ids) {
 	let next = ids || [];
 	priv._selected_paint_ids = next;
 	repaint_cards(gobj, /* @__PURE__ */ new Set([...prev, ...next]));
+	update_zoom_selection_button(gobj);
+}
+/************************************************************
+*  Zoom-to-selection can only act on a selection.
+*
+*  The attribute is toggled on the element instead of re-rendering
+*  the toolbar, which would rebuild its innerHTML -- and with it
+*  drop the disabled state of every OTHER button -- each time a
+*  card is ticked.
+************************************************************/
+function update_zoom_selection_button(gobj) {
+	let priv = gobj.priv;
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return;
+	if (!$container.querySelector(".EV_ZOOM_SELECTION")) return;
+	if ((priv._selected_paint_ids || []).length > 0) enableElements($container, ".EV_ZOOM_SELECTION");
+	else disableElements($container, ".EV_ZOOM_SELECTION");
 }
 /************************************************************
 *  Select a SET of nodes: what a marquee and a shift-click do.
@@ -57144,17 +57237,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");
@@ -57963,6 +58128,18 @@ function ac_auto_fit(gobj, event, kw, src) {
 	graph_fitview(gobj);
 	return 0;
 }
+/************************************************************
+*  Zoom to what is selected.
+************************************************************/
+function ac_zoom_selection(gobj, event, kw, src) {
+	let ids = gobj.priv._selected_paint_ids || [];
+	if (!ids.length) {
+		log_error(`${gobj_short_name(gobj)}: zoom to selection with nothing selected`);
+		return -1;
+	}
+	graph_fit_selection(gobj, ids);
+	return 0;
+}
 function ac_focus_topic(gobj, event, kw, src) {
 	graph_focus_topic(gobj, kw && kw.topic);
 	return 0;
@@ -58021,6 +58198,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 +58488,11 @@ function create_gclass$1(gclass_name) {
 			ac_brush_select,
 			null
 		],
+		[
+			"EV_KEY_DOWN",
+			ac_key_down,
+			null
+		],
 		[
 			"EV_ZOOM_IN",
 			ac_zoom_in,
@@ -58299,6 +58513,11 @@ function create_gclass$1(gclass_name) {
 			ac_auto_fit,
 			null
 		],
+		[
+			"EV_ZOOM_SELECTION",
+			ac_zoom_selection,
+			null
+		],
 		[
 			"EV_FOCUS_TOPIC",
 			ac_focus_topic,
@@ -58388,10 +58607,12 @@ 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],
 		["EV_AUTO_FIT", 0],
+		["EV_ZOOM_SELECTION", 0],
 		["EV_FOCUS_TOPIC", 0],
 		["EV_FIND_NODES", 0],
 		["EV_FIND_RESULT", event_flag_t.EVF_OUTPUT_EVENT],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.16.0",
+  "version": "7.18.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);
+    });
 }
 
 /************************************************************
@@ -908,6 +912,10 @@ function update_toolbar(gobj)
             key: 'toolbar-edit',
         });
     }
+
+    /*  A re-render rebuilds the innerHTML, so a button whose enabled
+     *  state is not part of getItems() has to be told again.  */
+    update_zoom_selection_button(gobj);
 }
 
 /************************************************************
@@ -1027,6 +1035,20 @@ function configure_toolbar(gobj)
                     { text: '1:1', value: 'reset', className: 'EV_ZOOM_RESET', title: t('actual size') },
                 ];
 
+                /*  Only in edition, because that is where a selection
+                 *  can exist: a button that is permanently disabled is
+                 *  not a control, it is furniture. Disabled while the
+                 *  selection is empty -- `paint_selection` is the one
+                 *  funnel every change goes through, so it is the one
+                 *  place that has to say so.  */
+                if(priv.edit_mode) {
+                    items.push({
+                        id: 'g6-icon-fit-selection', value: 'fit-selection',
+                        className: 'EV_ZOOM_SELECTION',
+                        title: t('zoom to selection'), disabled: true
+                    });
+                }
+
                 if(gobj_read_bool_attr(gobj, "with_fullscreen")) {
                     /*  Full screen is a WINDOW control, not a camera one:
                      *  it goes in its own group.  */
@@ -1058,6 +1080,9 @@ function configure_toolbar(gobj)
                     case 'auto-fit':
                         gobj_send_event(gobj, "EV_AUTO_FIT", {}, gobj);
                         break;
+                    case 'fit-selection':
+                        gobj_send_event(gobj, "EV_ZOOM_SELECTION", {}, gobj);
+                        break;
                     case 'center':
                         gobj_send_event(gobj, "EV_CENTER", {}, gobj);
                         break;
@@ -2286,6 +2311,65 @@ async function graph_fit_readable(gobj)
     }
 }
 
+/************************************************************
+ *  Put the viewport on the selection: what `fit` does, for a part.
+ *
+ *  Computed rather than delegated because `fitView()` fits the whole
+ *  graph and there is no subset form of it. The bounds come from the
+ *  elements themselves, so a node's real card size is what is
+ *  measured, not an assumed one; the zoom is clamped to the graph's
+ *  own `zoomRange`, which is the only limit that is not invented
+ *  here. A selection of one card filling the view is not a bug --
+ *  that is what zooming to it means, and it is what every editor
+ *  that offers the action does.
+ ************************************************************/
+async function graph_fit_selection(gobj, ids)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
+    if(!graph || !ids || !ids.length) {
+        return;
+    }
+
+    let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
+    let found = 0;
+    for(let id of ids) {
+        let bounds;
+        try {
+            bounds = graph.getElementRenderBounds(id);
+        } catch(e) {
+            continue;       /* gone since it was selected */
+        }
+        if(!bounds || !bounds.min || !bounds.max) {
+            continue;
+        }
+        minx = Math.min(minx, bounds.min[0]);
+        miny = Math.min(miny, bounds.min[1]);
+        maxx = Math.max(maxx, bounds.max[0]);
+        maxy = Math.max(maxy, bounds.max[1]);
+        found++;
+    }
+    if(!found) {
+        log_error(`${gobj_short_name(gobj)}: the selection has no bounds to fit`);
+        return;
+    }
+
+    const MARGIN = 48;
+    let size = graph.getSize();
+    let vw = Math.max(1, size[0] - MARGIN * 2);
+    let vh = Math.max(1, size[1] - MARGIN * 2);
+    let bw = Math.max(1, maxx - minx);
+    let bh = Math.max(1, maxy - miny);
+
+    let zoom = Math.min(vw / bw, vh / bh);
+    let range = graph.getZoomRange() || [0.2, 4];
+    zoom = Math.max(range[0], Math.min(range[1], zoom));
+
+    await graph.zoomTo(zoom);
+    await graph.focusElement(ids);
+}
+
 /************************************************************
  *  Focus the graph on one topic: highlight (amber 'active' state)
  *  every node of that topic and centre the viewport on them. An
@@ -2925,14 +3009,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);
 
@@ -3040,6 +3129,36 @@ function paint_selection(gobj, ids)
     priv._selected_paint_ids = next;
 
     repaint_cards(gobj, new Set([...prev, ...next]));
+    update_zoom_selection_button(gobj);
+}
+
+/************************************************************
+ *  Zoom-to-selection can only act on a selection.
+ *
+ *  The attribute is toggled on the element instead of re-rendering
+ *  the toolbar, which would rebuild its innerHTML -- and with it
+ *  drop the disabled state of every OTHER button -- each time a
+ *  card is ticked.
+ ************************************************************/
+function update_zoom_selection_button(gobj)
+{
+    let priv = gobj.priv;
+    let $container = gobj_read_attr(gobj, "$container");
+
+    if(!$container) {
+        return;
+    }
+
+    let $btn = $container.querySelector(".EV_ZOOM_SELECTION");
+    if(!$btn) {
+        return;     /* no toolbar, or not in edition: nothing to enable */
+    }
+
+    if((priv._selected_paint_ids || []).length > 0) {
+        enableElements($container, ".EV_ZOOM_SELECTION");
+    } else {
+        disableElements($container, ".EV_ZOOM_SELECTION");
+    }
 }
 
 /************************************************************
@@ -5347,31 +5466,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);
+        }
+    }
 
-    /*  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});
+    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(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'
@@ -6645,6 +6884,25 @@ function ac_auto_fit(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  Zoom to what is selected.
+ ************************************************************/
+function ac_zoom_selection(gobj, event, kw, src)
+{
+    let ids = gobj.priv._selected_paint_ids || [];
+
+    if(!ids.length) {
+        /*  The button is disabled without a selection, so getting here
+         *  means the event came from somewhere else.  */
+        log_error(`${gobj_short_name(gobj)}: zoom to selection with nothing selected`);
+        return -1;
+    }
+
+    graph_fit_selection(gobj, ids);
+
+    return 0;
+}
+
 function ac_focus_topic(gobj, event, kw, src)
 {
     graph_focus_topic(gobj, kw && kw.topic);
@@ -6723,6 +6981,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,12 +7354,14 @@ 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],
             ["EV_ZOOM_OUT",                 ac_zoom_out,            null],
             ["EV_ZOOM_RESET",               ac_zoom_reset,          null],
             ["EV_AUTO_FIT",                 ac_auto_fit,            null],
+            ["EV_ZOOM_SELECTION",           ac_zoom_selection,      null],
             ["EV_FOCUS_TOPIC",              ac_focus_topic,         null],
             ["EV_FIND_NODES",               ac_find_nodes,          null],
             ["EV_CENTER",                   ac_center,              null],
@@ -7094,12 +7401,14 @@ 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],
         ["EV_ZOOM_OUT",                 0],
         ["EV_ZOOM_RESET",               0],
         ["EV_AUTO_FIT",                 0],
+        ["EV_ZOOM_SELECTION",           0],
         ["EV_FOCUS_TOPIC",              0],
         ["EV_FIND_NODES",               0],
         ["EV_FIND_RESULT",              event_flag_t.EVF_OUTPUT_EVENT],

package/src/lib_icons.js

@@ -52,6 +52,15 @@ const ICONS = `<svg xmlns="http://www.w3.org/2000/svg">
     <symbol id="g6-icon-fit" viewBox="0 0 448 512">
         <path fill="currentColor" 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"/>
     </symbol>
+    <!-- fit to selection: the same corner brackets as the fit icon,
+         around a marked object. The two sit side by side in the
+         toolbar and have to read as a family, which a borrowed glyph
+         would not. (No backticks in here: the sprite lives inside a
+         template literal.) -->
+    <symbol id="g6-icon-fit-selection" viewBox="0 0 448 512">
+        <path fill="currentColor" 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"/>
+        <rect fill="currentColor" x="144" y="176" width="160" height="160" rx="24"/>
+    </symbol>
     <!-- crosshairs (center) -->
     <symbol id="g6-icon-center" viewBox="0 0 576 512">
         <path fill="currentColor" d="M288-16c17.7 0 32 14.3 32 32l0 18.3c98.1 14 175.7 91.6 189.7 189.7l18.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-18.3 0c-14 98.1-91.6 175.7-189.7 189.7l0 18.3c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-18.3C157.9 463.7 80.3 386.1 66.3 288L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l18.3 0C80.3 125.9 157.9 48.3 256 34.3L256 16c0-17.7 14.3-32 32-32zM131.2 288c12.7 62.7 62.1 112.1 124.8 124.8l0-12.8c0-17.7 14.3-32 32-32s32 14.3 32 32l0 12.8c62.7-12.7 112.1-62.1 124.8-124.8L432 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l12.8 0C432.1 161.3 382.7 111.9 320 99.2l0 12.8c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-12.8C193.3 111.9 143.9 161.3 131.2 224l12.8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-12.8 0zM288 208a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/>