@yuneta/gobj-ui 7.17.0 → 7.18.1

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
 
@@ -719,6 +730,7 @@ clicked":
 | **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 |
 | **Delete** / **Backspace** | deletes the selection, after a confirmation that counts what it takes |
 | **Esc**, or a click on the canvas | clears it |

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"/>
@@ -53859,6 +53868,7 @@ var PRIVATE_DATA$1 = {
 	_link_saved_styles: [],
 	_focus_topic: null,
 	_focus_ids: [],
+	_on_pointerdown_focus: null,
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_find: null,
@@ -53923,6 +53933,10 @@ function mt_destroy$1(gobj) {
 		i18next.default.off("languageChanged", priv._on_language_changed);
 		priv._on_language_changed = null;
 	}
+	if (priv._on_pointerdown_focus) {
+		priv.$container.removeEventListener("pointerdown", priv._on_pointerdown_focus);
+		priv._on_pointerdown_focus = null;
+	}
 	if (priv.theme_observer) {
 		priv.theme_observer.disconnect();
 		priv.theme_observer = null;
@@ -54088,6 +54102,16 @@ function configure_events(gobj) {
 		update_toolbar(gobj);
 	};
 	i18next.default.on("languageChanged", priv._on_language_changed);
+	priv._on_pointerdown_focus = (ev) => {
+		let target = ev.target;
+		if (target && typeof target.closest === "function") {
+			if (target.closest("input, textarea, select, [contenteditable]")) return;
+			if (target.closest(".g6-confirm-popover, .g6-create-popover,.g6-node-popover, .g6-edge-popover")) return;
+		}
+		let $canvas = priv.$container.querySelector("canvas");
+		if ($canvas && typeof $canvas.focus === "function") $canvas.focus({ preventScroll: true });
+	};
+	priv.$container.addEventListener("pointerdown", priv._on_pointerdown_focus);
 	graph.on("keydown", (evt) => {
 		let ctrl = !!(evt.ctrlKey || evt.metaKey);
 		if (ctrl && (evt.key === "a" || evt.key === "A")) {
@@ -54150,6 +54174,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.
@@ -54250,6 +54275,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({
@@ -54281,6 +54313,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;
@@ -55086,6 +55121,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
@@ -55554,6 +55635,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.
@@ -58058,6 +58156,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;
@@ -58129,7 +58239,7 @@ function ac_key_down(gobj, event, kw, src) {
 		let fullscreen = graph_get_plugin(gobj, "fullscreen");
 		if (fullscreen) {
 			if (key === "F" || key === "f") fullscreen.request();
-			else if (key === "Escape") fullscreen.exit();
+			else if (key === "Escape" && priv.is_fullscreen) fullscreen.exit();
 		}
 	}
 	if (!priv.edit_mode) return 0;
@@ -58431,6 +58541,11 @@ function create_gclass$1(gclass_name) {
 			ac_auto_fit,
 			null
 		],
+		[
+			"EV_ZOOM_SELECTION",
+			ac_zoom_selection,
+			null
+		],
 		[
 			"EV_FOCUS_TOPIC",
 			ac_focus_topic,
@@ -58525,6 +58640,7 @@ function create_gclass$1(gclass_name) {
 		["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"/>
@@ -53846,6 +53855,7 @@ var PRIVATE_DATA$1 = {
 	_link_saved_styles: [],
 	_focus_topic: null,
 	_focus_ids: [],
+	_on_pointerdown_focus: null,
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_find: null,
@@ -53910,6 +53920,10 @@ function mt_destroy$1(gobj) {
 		i18next.off("languageChanged", priv._on_language_changed);
 		priv._on_language_changed = null;
 	}
+	if (priv._on_pointerdown_focus) {
+		priv.$container.removeEventListener("pointerdown", priv._on_pointerdown_focus);
+		priv._on_pointerdown_focus = null;
+	}
 	if (priv.theme_observer) {
 		priv.theme_observer.disconnect();
 		priv.theme_observer = null;
@@ -54075,6 +54089,16 @@ function configure_events(gobj) {
 		update_toolbar(gobj);
 	};
 	i18next.on("languageChanged", priv._on_language_changed);
+	priv._on_pointerdown_focus = (ev) => {
+		let target = ev.target;
+		if (target && typeof target.closest === "function") {
+			if (target.closest("input, textarea, select, [contenteditable]")) return;
+			if (target.closest(".g6-confirm-popover, .g6-create-popover,.g6-node-popover, .g6-edge-popover")) return;
+		}
+		let $canvas = priv.$container.querySelector("canvas");
+		if ($canvas && typeof $canvas.focus === "function") $canvas.focus({ preventScroll: true });
+	};
+	priv.$container.addEventListener("pointerdown", priv._on_pointerdown_focus);
 	graph.on("keydown", (evt) => {
 		let ctrl = !!(evt.ctrlKey || evt.metaKey);
 		if (ctrl && (evt.key === "a" || evt.key === "A")) {
@@ -54137,6 +54161,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.
@@ -54237,6 +54262,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({
@@ -54268,6 +54300,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;
@@ -55073,6 +55108,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
@@ -55541,6 +55622,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.
@@ -58045,6 +58143,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;
@@ -58116,7 +58226,7 @@ function ac_key_down(gobj, event, kw, src) {
 		let fullscreen = graph_get_plugin(gobj, "fullscreen");
 		if (fullscreen) {
 			if (key === "F" || key === "f") fullscreen.request();
-			else if (key === "Escape") fullscreen.exit();
+			else if (key === "Escape" && priv.is_fullscreen) fullscreen.exit();
 		}
 	}
 	if (!priv.edit_mode) return 0;
@@ -58418,6 +58528,11 @@ function create_gclass$1(gclass_name) {
 			ac_auto_fit,
 			null
 		],
+		[
+			"EV_ZOOM_SELECTION",
+			ac_zoom_selection,
+			null
+		],
 		[
 			"EV_FOCUS_TOPIC",
 			ac_focus_topic,
@@ -58512,6 +58627,7 @@ function create_gclass$1(gclass_name) {
 		["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.17.0",
+  "version": "7.18.1",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_g6_nodes_tree.js

@@ -333,6 +333,7 @@ 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
+    _on_pointerdown_focus: null,    // listener keeping the keyboard on the canvas
     _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
@@ -459,6 +460,13 @@ function mt_destroy(gobj)
         priv._on_language_changed = null;
     }
 
+    if(priv._on_pointerdown_focus) {
+        priv.$container.removeEventListener(
+            "pointerdown", priv._on_pointerdown_focus
+        );
+        priv._on_pointerdown_focus = null;
+    }
+
     if(priv.theme_observer) {
         priv.theme_observer.disconnect();
         priv.theme_observer = null;
@@ -787,6 +795,36 @@ function configure_events(gobj)
     };
     i18next.on('languageChanged', priv._on_language_changed);
 
+    /*  Clicking a CARD is clicking a DOM element inside the container,
+     *  and that takes the keyboard away from G6's canvas -- the only
+     *  element that receives keydown. Selecting two nodes by clicking
+     *  them and then pressing Escape did nothing, which is the most
+     *  ordinary way there is to reach for it. The focus goes back on
+     *  every press inside the graph.
+     *
+     *  Except on what is there to be typed into: the popovers this
+     *  gclass appends to its own container carry inputs, and stealing
+     *  their focus on pointerdown would make them impossible to fill
+     *  in.
+     */
+    priv._on_pointerdown_focus = (ev) => {
+        let target = ev.target;
+        if(target && typeof target.closest === "function") {
+            if(target.closest("input, textarea, select, [contenteditable]")) {
+                return;
+            }
+            if(target.closest(".g6-confirm-popover, .g6-create-popover," +
+                              ".g6-node-popover, .g6-edge-popover")) {
+                return;
+            }
+        }
+        let $canvas = priv.$container.querySelector("canvas");
+        if($canvas && typeof $canvas.focus === "function") {
+            $canvas.focus({preventScroll: true});
+        }
+    };
+    priv.$container.addEventListener("pointerdown", priv._on_pointerdown_focus);
+
     /*  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:
@@ -912,6 +950,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);
 }
 
 /************************************************************
@@ -1031,6 +1073,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.  */
@@ -1062,6 +1118,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;
@@ -2290,6 +2349,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
@@ -3049,6 +3167,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");
+    }
 }
 
 /************************************************************
@@ -6774,6 +6922,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);
@@ -6869,11 +7036,17 @@ function ac_key_down(gobj, event, kw, src)
         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.  */
+            } else if(key === "Escape" && priv.is_fullscreen) {
+                /*  Only while actually IN full screen. Asking to leave
+                 *  a full screen nobody entered throws, and since this
+                 *  is now an action rather than a listener, that throw
+                 *  takes the rest of the key with it -- which is how
+                 *  Escape stopped clearing the selection.
+                 *
+                 *  Escape does both when both apply, and that is right:
+                 *  the browser leaves 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();
             }
         }
@@ -7232,6 +7405,7 @@ function create_gclass(gclass_name)
             ["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],
@@ -7278,6 +7452,7 @@ function create_gclass(gclass_name)
         ["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"/>