@yuneta/gobj-ui 7.14.3 → 7.15.0

package/README.md

@@ -668,6 +668,46 @@ Two implementation notes worth keeping:
   still arrive from a keyboard path or a form that outlived the flag, and an
   ignored write is exactly the behaviour this whole change exists to stop.
 
+### The graph's viewport toolbar
+
+`C_G6_NODES_TREE` floats a vertical toolbar over the canvas:
+
+| control | what it does |
+|---|---|
+| zoom in / zoom out | one step of scale |
+| **the zoom level** | a readout, not a button — `85%` |
+| ── | |
+| fit | `fitView()`: the whole graph in the viewport |
+| **`1:1`** | `zoomTo(1)`: actual size |
+| ── | |
+| full screen | the container, not the camera |
+
+Two of those rows are the answer to a real complaint, and the reasoning
+generalises:
+
+- **`1:1` used to be a house**, and the house was the thing people reached for
+  when they wanted the graph back. It never gave it to them: the action is
+  `zoomTo(1)`, which sets the **scale** and leaves the camera where it was, so
+  from a corner of a large graph it answered with the same corner at 100%. A
+  house means *the initial extent* in a map and *the starting view* in an
+  editor — never a scale — and this one sat directly under `fit`, so the pair
+  read as two ways to do one thing. Actual size is **written** in every editor
+  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.
+
+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
+is behind the second one because it is a window control that happens to live in
+a camera toolbar.
+
+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).
+
 ### Finding a node in the graph
 
 `C_YUI_TREEDB_GRAPH` carries a find box in the middle of its toolbar. It

package/dist/gobj-ui.cjs.js

@@ -53702,11 +53702,22 @@ function inject_svg_icons() {
 ***********************************************************************/
 /***************************************************************
 *  YuiToolbar — G6 Toolbar subclass that adds per-item className
-*  and disabled support.
+*  and disabled support, plus three item kinds G6 does not have.
 *
 *  Each item in getItems() may carry:
 *    className  — CSS class added to the div (e.g. 'EV_SAVE_GRAPH')
 *    disabled   — boolean; sets the 'disabled' attribute initially
+*    text       — render this text instead of a sprite symbol; a
+*                 label is the only readable way to say `1:1`, and
+*                 every editor that offers actual-size writes it
+*    readout    — a text item that REPORTS instead of acting (the
+*                 zoom level); it is not a button
+*    separator  — a group divider, not an item
+*
+*  The base class fires onClick only for elements whose class list
+*  contains `g6-toolbar-item`, so a separator and a readout carry
+*  their own class and are inert by construction, with no guard in
+*  the click handler.
 *
 *  With className set to the event name, the lib_graph.js state
 *  functions (set_submit_state, disableElements, …) work on toolbar
@@ -53716,9 +53727,15 @@ function inject_svg_icons() {
 var YuiToolbar = class extends _antv_g6.Toolbar {
 	async getDOMContent() {
 		return (await this.options.getItems()).map((item) => {
+			if (item.separator) return `<div class="g6-toolbar-sep" aria-hidden="true"></div>`;
 			const extra_class = item.className ? ` ${item.className}` : "";
+			const title = item.title ?? "";
+			if (item.readout) return `<div class="g6-toolbar-readout${extra_class}" title="${title}" aria-label="${title}">${item.text ?? ""}</div>`;
 			const disabled = item.disabled ? " disabled" : "";
-			return `<div class="g6-toolbar-item${extra_class}" value="${item.value}" title="${item.title ?? ""}"${disabled}><svg aria-hidden="true" focusable="false"><use xlink:href="#${item.id}"></use></svg></div>`;
+			const is_text = item.text !== void 0;
+			const kind_class = is_text ? " g6-toolbar-item-text" : "";
+			const body = is_text ? `<span class="g6-toolbar-text">${item.text}</span>` : `<svg aria-hidden="true" focusable="false"><use xlink:href="#${item.id}"></use></svg>`;
+			return `<div class="g6-toolbar-item${kind_class}${extra_class}" value="${item.value}" title="${title}" aria-label="${title}"${disabled}>${body}</div>`;
 		}).join("");
 	}
 };
@@ -54063,6 +54080,7 @@ function configure_events(gobj) {
 		update_edge_icon_position(gobj);
 		update_node_icon_position(gobj);
 		update_link_icon_position(gobj);
+		update_zoom_readout(gobj);
 	});
 	priv._on_language_changed = () => {
 		update_toolbar(gobj);
@@ -54128,6 +54146,59 @@ function update_toolbar(gobj) {
 	configure_toolbar_edit(gobj);
 	if (graph_get_plugin(gobj, "toolbar-edit")) graph.updatePlugin({ key: "toolbar-edit" });
 }
+/************************************************************
+*  The floating toolbars follow the theme.
+*
+*  They used to be pinned to a light background in BOTH themes,
+*  with the icon colour pinned dark so it survived that -- two
+*  light islands sitting over a dark canvas. The tokens do the
+*  flipping now; the fallbacks are the old forced-light values, so
+*  a host without Bulma gets exactly what it had.
+************************************************************/
+function toolbar_style(extra) {
+	return Object.assign({
+		backgroundColor: "var(--bulma-scheme-main, #f5f5f5)",
+		color: "var(--bulma-text-strong, #333)",
+		padding: "8px",
+		boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+		borderRadius: "8px",
+		border: "1px solid var(--bulma-border-weak, #e8e8e8)",
+		opacity: "0.85"
+	}, extra || {});
+}
+/************************************************************
+*  The zoom level as a percentage, the way every editor that
+*  shows one writes it. Empty while the graph cannot be asked --
+*  the toolbar is built before the first draw, and a viewport
+*  that does not exist yet has no zoom to report.
+************************************************************/
+function zoom_percent_text(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph || typeof graph.getZoom !== "function") return "";
+	let zoom;
+	try {
+		zoom = graph.getZoom();
+	} catch (e) {
+		return "";
+	}
+	if (!zoom) return "";
+	return `${Math.round(zoom * 100)}%`;
+}
+/************************************************************
+*  Repaint the zoom readout in place.
+*
+*  The text node is patched instead of re-rendering the plugin:
+*  the readout follows the wheel, and updatePlugin() rebuilds the
+*  whole toolbar's innerHTML -- which would also drop the disabled
+*  state of the edit buttons on every notch of the wheel.
+************************************************************/
+function update_zoom_readout(gobj) {
+	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	if (!$container) return;
+	let $readout = $container.querySelector(".G6_ZOOM_LEVEL");
+	if (!$readout) return;
+	$readout.textContent = zoom_percent_text(gobj);
+}
 function configure_toolbar(gobj) {
 	let priv = gobj.priv;
 	let toolbar_position = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "toolbar_position") || "top-left";
@@ -54136,17 +54207,10 @@ function configure_toolbar(gobj) {
 		type: "yui-toolbar",
 		className: "g6-toolbar-large",
 		position: toolbar_position,
-		style: {
-			backgroundColor: "#f5f5f5",
-			color: "#333",
-			padding: "8px",
-			boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-			borderRadius: "8px",
-			border: "1px solid #e8e8e8",
-			opacity: "0.85",
+		style: toolbar_style({
 			marginTop: "12px",
 			marginLeft: "12px"
-		},
+		}),
 		getItems: () => {
 			let items = [
 				{
@@ -54161,6 +54225,13 @@ function configure_toolbar(gobj) {
 					className: "EV_ZOOM_OUT",
 					title: (0, i18next.t)("zoom out")
 				},
+				{
+					readout: true,
+					className: "G6_ZOOM_LEVEL",
+					text: zoom_percent_text(gobj),
+					title: (0, i18next.t)("zoom level")
+				},
+				{ separator: true },
 				{
 					id: "g6-icon-fit",
 					value: "auto-fit",
@@ -54168,13 +54239,14 @@ function configure_toolbar(gobj) {
 					title: (0, i18next.t)("auto fit")
 				},
 				{
-					id: "g6-icon-home",
+					text: "1:1",
 					value: "reset",
 					className: "EV_ZOOM_RESET",
-					title: (0, i18next.t)("reset zoom")
+					title: (0, i18next.t)("actual size")
 				}
 			];
 			if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_fullscreen")) {
+				items.push({ separator: true });
 				if (priv.is_fullscreen) items.push({
 					id: "g6-icon-fullscreen-exit",
 					value: "exit-fullscreen",
@@ -54230,15 +54302,7 @@ function configure_toolbar_edit(gobj) {
 		type: "yui-toolbar",
 		className: "g6-toolbar-large",
 		position: "left-top",
-		style: {
-			backgroundColor: "#f5f5f5",
-			color: "#333",
-			padding: "8px",
-			boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-			borderRadius: "8px",
-			border: "1px solid #e8e8e8",
-			opacity: "0.85"
-		},
+		style: toolbar_style(),
 		getItems: () => {
 			return [
 				{

package/dist/gobj-ui.es.js

@@ -53689,11 +53689,22 @@ function inject_svg_icons() {
 ***********************************************************************/
 /***************************************************************
 *  YuiToolbar — G6 Toolbar subclass that adds per-item className
-*  and disabled support.
+*  and disabled support, plus three item kinds G6 does not have.
 *
 *  Each item in getItems() may carry:
 *    className  — CSS class added to the div (e.g. 'EV_SAVE_GRAPH')
 *    disabled   — boolean; sets the 'disabled' attribute initially
+*    text       — render this text instead of a sprite symbol; a
+*                 label is the only readable way to say `1:1`, and
+*                 every editor that offers actual-size writes it
+*    readout    — a text item that REPORTS instead of acting (the
+*                 zoom level); it is not a button
+*    separator  — a group divider, not an item
+*
+*  The base class fires onClick only for elements whose class list
+*  contains `g6-toolbar-item`, so a separator and a readout carry
+*  their own class and are inert by construction, with no guard in
+*  the click handler.
 *
 *  With className set to the event name, the lib_graph.js state
 *  functions (set_submit_state, disableElements, …) work on toolbar
@@ -53703,9 +53714,15 @@ function inject_svg_icons() {
 var YuiToolbar = class extends Toolbar {
 	async getDOMContent() {
 		return (await this.options.getItems()).map((item) => {
+			if (item.separator) return `<div class="g6-toolbar-sep" aria-hidden="true"></div>`;
 			const extra_class = item.className ? ` ${item.className}` : "";
+			const title = item.title ?? "";
+			if (item.readout) return `<div class="g6-toolbar-readout${extra_class}" title="${title}" aria-label="${title}">${item.text ?? ""}</div>`;
 			const disabled = item.disabled ? " disabled" : "";
-			return `<div class="g6-toolbar-item${extra_class}" value="${item.value}" title="${item.title ?? ""}"${disabled}><svg aria-hidden="true" focusable="false"><use xlink:href="#${item.id}"></use></svg></div>`;
+			const is_text = item.text !== void 0;
+			const kind_class = is_text ? " g6-toolbar-item-text" : "";
+			const body = is_text ? `<span class="g6-toolbar-text">${item.text}</span>` : `<svg aria-hidden="true" focusable="false"><use xlink:href="#${item.id}"></use></svg>`;
+			return `<div class="g6-toolbar-item${kind_class}${extra_class}" value="${item.value}" title="${title}" aria-label="${title}"${disabled}>${body}</div>`;
 		}).join("");
 	}
 };
@@ -54050,6 +54067,7 @@ function configure_events(gobj) {
 		update_edge_icon_position(gobj);
 		update_node_icon_position(gobj);
 		update_link_icon_position(gobj);
+		update_zoom_readout(gobj);
 	});
 	priv._on_language_changed = () => {
 		update_toolbar(gobj);
@@ -54115,6 +54133,59 @@ function update_toolbar(gobj) {
 	configure_toolbar_edit(gobj);
 	if (graph_get_plugin(gobj, "toolbar-edit")) graph.updatePlugin({ key: "toolbar-edit" });
 }
+/************************************************************
+*  The floating toolbars follow the theme.
+*
+*  They used to be pinned to a light background in BOTH themes,
+*  with the icon colour pinned dark so it survived that -- two
+*  light islands sitting over a dark canvas. The tokens do the
+*  flipping now; the fallbacks are the old forced-light values, so
+*  a host without Bulma gets exactly what it had.
+************************************************************/
+function toolbar_style(extra) {
+	return Object.assign({
+		backgroundColor: "var(--bulma-scheme-main, #f5f5f5)",
+		color: "var(--bulma-text-strong, #333)",
+		padding: "8px",
+		boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+		borderRadius: "8px",
+		border: "1px solid var(--bulma-border-weak, #e8e8e8)",
+		opacity: "0.85"
+	}, extra || {});
+}
+/************************************************************
+*  The zoom level as a percentage, the way every editor that
+*  shows one writes it. Empty while the graph cannot be asked --
+*  the toolbar is built before the first draw, and a viewport
+*  that does not exist yet has no zoom to report.
+************************************************************/
+function zoom_percent_text(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph || typeof graph.getZoom !== "function") return "";
+	let zoom;
+	try {
+		zoom = graph.getZoom();
+	} catch (e) {
+		return "";
+	}
+	if (!zoom) return "";
+	return `${Math.round(zoom * 100)}%`;
+}
+/************************************************************
+*  Repaint the zoom readout in place.
+*
+*  The text node is patched instead of re-rendering the plugin:
+*  the readout follows the wheel, and updatePlugin() rebuilds the
+*  whole toolbar's innerHTML -- which would also drop the disabled
+*  state of the edit buttons on every notch of the wheel.
+************************************************************/
+function update_zoom_readout(gobj) {
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return;
+	let $readout = $container.querySelector(".G6_ZOOM_LEVEL");
+	if (!$readout) return;
+	$readout.textContent = zoom_percent_text(gobj);
+}
 function configure_toolbar(gobj) {
 	let priv = gobj.priv;
 	let toolbar_position = gobj_read_str_attr(gobj, "toolbar_position") || "top-left";
@@ -54123,17 +54194,10 @@ function configure_toolbar(gobj) {
 		type: "yui-toolbar",
 		className: "g6-toolbar-large",
 		position: toolbar_position,
-		style: {
-			backgroundColor: "#f5f5f5",
-			color: "#333",
-			padding: "8px",
-			boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-			borderRadius: "8px",
-			border: "1px solid #e8e8e8",
-			opacity: "0.85",
+		style: toolbar_style({
 			marginTop: "12px",
 			marginLeft: "12px"
-		},
+		}),
 		getItems: () => {
 			let items = [
 				{
@@ -54148,6 +54212,13 @@ function configure_toolbar(gobj) {
 					className: "EV_ZOOM_OUT",
 					title: t("zoom out")
 				},
+				{
+					readout: true,
+					className: "G6_ZOOM_LEVEL",
+					text: zoom_percent_text(gobj),
+					title: t("zoom level")
+				},
+				{ separator: true },
 				{
 					id: "g6-icon-fit",
 					value: "auto-fit",
@@ -54155,13 +54226,14 @@ function configure_toolbar(gobj) {
 					title: t("auto fit")
 				},
 				{
-					id: "g6-icon-home",
+					text: "1:1",
 					value: "reset",
 					className: "EV_ZOOM_RESET",
-					title: t("reset zoom")
+					title: t("actual size")
 				}
 			];
 			if (gobj_read_bool_attr(gobj, "with_fullscreen")) {
+				items.push({ separator: true });
 				if (priv.is_fullscreen) items.push({
 					id: "g6-icon-fullscreen-exit",
 					value: "exit-fullscreen",
@@ -54217,15 +54289,7 @@ function configure_toolbar_edit(gobj) {
 		type: "yui-toolbar",
 		className: "g6-toolbar-large",
 		position: "left-top",
-		style: {
-			backgroundColor: "#f5f5f5",
-			color: "#333",
-			padding: "8px",
-			boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-			borderRadius: "8px",
-			border: "1px solid #e8e8e8",
-			opacity: "0.85"
-		},
+		style: toolbar_style(),
 		getItems: () => {
 			return [
 				{

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -105,11 +105,22 @@ import {yui_theme_now, yui_watch_theme} from "./yui_theme.js";
 
 /***************************************************************
  *  YuiToolbar — G6 Toolbar subclass that adds per-item className
- *  and disabled support.
+ *  and disabled support, plus three item kinds G6 does not have.
  *
  *  Each item in getItems() may carry:
  *    className  — CSS class added to the div (e.g. 'EV_SAVE_GRAPH')
  *    disabled   — boolean; sets the 'disabled' attribute initially
+ *    text       — render this text instead of a sprite symbol; a
+ *                 label is the only readable way to say `1:1`, and
+ *                 every editor that offers actual-size writes it
+ *    readout    — a text item that REPORTS instead of acting (the
+ *                 zoom level); it is not a button
+ *    separator  — a group divider, not an item
+ *
+ *  The base class fires onClick only for elements whose class list
+ *  contains `g6-toolbar-item`, so a separator and a readout carry
+ *  their own class and are inert by construction, with no guard in
+ *  the click handler.
  *
  *  With className set to the event name, the lib_graph.js state
  *  functions (set_submit_state, disableElements, …) work on toolbar
@@ -122,14 +133,36 @@ class YuiToolbar extends Toolbar
     {
         const items = await this.options.getItems();
         return items.map((item) => {
+            if(item.separator) {
+                return `<div class="g6-toolbar-sep" aria-hidden="true"></div>`;
+            }
+
             const extra_class = item.className ? ` ${item.className}` : '';
-            const disabled    = item.disabled  ? ' disabled'          : '';
+            const title       = item.title ?? '';
+
+            if(item.readout) {
+                return (
+                    `<div class="g6-toolbar-readout${extra_class}"` +
+                    ` title="${title}" aria-label="${title}">` +
+                    `${item.text ?? ''}` +
+                    `</div>`
+                );
+            }
+
+            const disabled = item.disabled ? ' disabled' : '';
+            const is_text   = (item.text !== undefined);
+            const kind_class = is_text ? ' g6-toolbar-item-text' : '';
+            const body = is_text
+                ? `<span class="g6-toolbar-text">${item.text}</span>`
+                : `<svg aria-hidden="true" focusable="false">` +
+                  `<use xlink:href="#${item.id}"></use>` +
+                  `</svg>`;
+
             return (
-                `<div class="g6-toolbar-item${extra_class}"` +
-                ` value="${item.value}" title="${item.title ?? ''}"${disabled}>` +
-                `<svg aria-hidden="true" focusable="false">` +
-                `<use xlink:href="#${item.id}"></use>` +
-                `</svg>` +
+                `<div class="g6-toolbar-item${kind_class}${extra_class}"` +
+                ` value="${item.value}" title="${title}"` +
+                ` aria-label="${title}"${disabled}>` +
+                `${body}` +
                 `</div>`
             );
         }).join('');
@@ -732,6 +765,7 @@ function configure_events(gobj)
         update_edge_icon_position(gobj);
         update_node_icon_position(gobj);
         update_link_icon_position(gobj);
+        update_zoom_readout(gobj);
     });
 
     // Re-render G6 toolbars when language changes
@@ -863,6 +897,79 @@ function update_toolbar(gobj)
     }
 }
 
+/************************************************************
+ *  The floating toolbars follow the theme.
+ *
+ *  They used to be pinned to a light background in BOTH themes,
+ *  with the icon colour pinned dark so it survived that -- two
+ *  light islands sitting over a dark canvas. The tokens do the
+ *  flipping now; the fallbacks are the old forced-light values, so
+ *  a host without Bulma gets exactly what it had.
+ ************************************************************/
+function toolbar_style(extra)
+{
+    return Object.assign({
+        backgroundColor: 'var(--bulma-scheme-main, #f5f5f5)',
+        color:           'var(--bulma-text-strong, #333)',
+        padding:         '8px',
+        boxShadow:       '0 2px 8px rgba(0, 0, 0, 0.15)',
+        borderRadius:    '8px',
+        border:          '1px solid var(--bulma-border-weak, #e8e8e8)',
+        opacity:         '0.85',
+    }, extra || {});
+}
+
+/************************************************************
+ *  The zoom level as a percentage, the way every editor that
+ *  shows one writes it. Empty while the graph cannot be asked --
+ *  the toolbar is built before the first draw, and a viewport
+ *  that does not exist yet has no zoom to report.
+ ************************************************************/
+function zoom_percent_text(gobj)
+{
+    let graph = gobj.priv.graph;
+
+    if(!graph || typeof graph.getZoom !== "function") {
+        return "";
+    }
+
+    let zoom;
+    try {
+        zoom = graph.getZoom();
+    } catch(e) {
+        return "";
+    }
+    if(!zoom) {
+        return "";
+    }
+
+    return `${Math.round(zoom * 100)}%`;
+}
+
+/************************************************************
+ *  Repaint the zoom readout in place.
+ *
+ *  The text node is patched instead of re-rendering the plugin:
+ *  the readout follows the wheel, and updatePlugin() rebuilds the
+ *  whole toolbar's innerHTML -- which would also drop the disabled
+ *  state of the edit buttons on every notch of the wheel.
+ ************************************************************/
+function update_zoom_readout(gobj)
+{
+    let $container = gobj_read_attr(gobj, "$container");
+
+    if(!$container) {
+        return;
+    }
+
+    let $readout = $container.querySelector(".G6_ZOOM_LEVEL");
+    if(!$readout) {
+        return;     /* no toolbar (with_toolbar false): nobody to report to */
+    }
+
+    $readout.textContent = zoom_percent_text(gobj);
+}
+
 function configure_toolbar(gobj)
 {
     let priv = gobj.priv;
@@ -880,28 +987,37 @@ function configure_toolbar(gobj)
             type: 'yui-toolbar',
             className: 'g6-toolbar-large',
             position: toolbar_position,
-            style: {
-                backgroundColor: '#f5f5f5',
-                /*  Forced-light bg in both themes → pin dark icon
-                 *  color (currentColor) so it stays visible in dark. */
-                color: '#333',
-                padding: '8px',
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-                borderRadius: '8px',
-                border: '1px solid #e8e8e8',
-                opacity: '0.85',
-                marginTop: '12px',
+            style: toolbar_style({
+                marginTop:  '12px',
                 marginLeft: '12px',
-            },
+            }),
             getItems: () => {
                 let items = [
                     { id: 'g6-icon-zoom-in',  value: 'zoom-in',  className: 'EV_ZOOM_IN',  title: t('zoom in')  },
                     { id: 'g6-icon-zoom-out', value: 'zoom-out', className: 'EV_ZOOM_OUT', title: t('zoom out') },
+                    /*  What the two buttons above change. Every editor
+                     *  that offers a zoom shows the number; without it
+                     *  `1:1` is a jump to a value nobody was told.  */
+                    { readout: true, className: 'G6_ZOOM_LEVEL',
+                      text: zoom_percent_text(gobj), title: t('zoom level') },
+                    { separator: true },
                     { id: 'g6-icon-fit',      value: 'auto-fit', className: 'EV_AUTO_FIT', title: t('auto fit') },
-                    { id: 'g6-icon-home', value: 'reset', className: 'EV_ZOOM_RESET', title: t('reset zoom') },
+                    /*  `1:1`, not a house. The action is `zoomTo(1)`: it
+                     *  sets the SCALE and leaves the camera where it was,
+                     *  which is neither of the two things a house means
+                     *  anywhere -- a map's initial extent, an editor's
+                     *  starting view. Sitting under `fit`, the house read
+                     *  as a second way to get the whole graph back, and
+                     *  answered with the same corner of it at 100%.
+                     *  Actual size is WRITTEN in every editor that offers
+                     *  it, never drawn: there is no glyph for it.  */
+                    { text: '1:1', value: 'reset', className: 'EV_ZOOM_RESET', title: t('actual size') },
                 ];
 
                 if(gobj_read_bool_attr(gobj, "with_fullscreen")) {
+                    /*  Full screen is a WINDOW control, not a camera one:
+                     *  it goes in its own group.  */
+                    items.push({ separator: true });
                     if(priv.is_fullscreen) {
                         items.push(
                             { id: 'g6-icon-fullscreen-exit', value: 'exit-fullscreen', className: 'EV_EXIT_FULLSCREEN', title: t('exit full screen') }
@@ -976,18 +1092,7 @@ function configure_toolbar_edit(gobj)
             type: 'yui-toolbar',
             className: 'g6-toolbar-large',
             position: 'left-top',
-            style: {
-                backgroundColor: '#f5f5f5',
-                /*  Toolbar bg is forced light in BOTH themes; icons
-                 *  use currentColor, so pin a dark color or in dark
-                 *  theme they'd be light-on-light (invisible). */
-                color: '#333',
-                padding: '8px',
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-                borderRadius: '8px',
-                border: '1px solid #e8e8e8',
-                opacity: '0.85',
-            },
+            style: toolbar_style(),
             getItems: () => {
                 return [
                     { id: 'g6-icon-plus',  value: 'create-node', className: 'EV_CREATE_NODE_BTN color_create_state', title: t('create node') },

package/src/lib_graph.css

@@ -55,13 +55,79 @@
     opacity: 0.35;
     pointer-events: none;
 }
-/* Vertical toolbar (column): horizontal separator */
+/* Vertical toolbar (column): horizontal hairline between items */
 .g6-toolbar.g6-toolbar-large[style*="flex-direction: column"] .g6-toolbar-item + .g6-toolbar-item {
-    border-top: 1px solid #d9d9d9;
+    border-top: 1px solid var(--bulma-border-weak, #d9d9d9);
 }
-/* Horizontal toolbar (row): vertical separator */
+/* Horizontal toolbar (row): vertical hairline between items */
 .g6-toolbar.g6-toolbar-large[style*="flex-direction: row"] .g6-toolbar-item + .g6-toolbar-item {
-    border-left: 1px solid #d9d9d9;
+    border-left: 1px solid var(--bulma-border-weak, #d9d9d9);
+}
+
+/*
+ *  Group divider. Every item already carries a hairline against its
+ *  neighbour, so a group break has to be a GAP, not one more line --
+ *  otherwise the camera controls and the window control read as one
+ *  list of six equal things.
+ */
+.g6-toolbar.g6-toolbar-large .g6-toolbar-sep {
+    background-color: var(--bulma-border, #cfcfcf);
+    flex: none;
+}
+.g6-toolbar.g6-toolbar-large[style*="flex-direction: column"] .g6-toolbar-sep {
+    width: 100%;
+    height: 1px;
+    margin: 5px 0;
+}
+.g6-toolbar.g6-toolbar-large[style*="flex-direction: row"] .g6-toolbar-sep {
+    width: 1px;
+    align-self: stretch;
+    margin: 0 5px;
+}
+
+/*
+ *  A toolbar item whose glyph is TEXT (`1:1`). There is no icon for
+ *  actual size, so the item has to be as wide as its label instead
+ *  of the square an icon gets.
+ */
+.g6-toolbar.g6-toolbar-large .g6-toolbar-item-text {
+    width: auto;
+    min-width: 20px;
+}
+.g6-toolbar.g6-toolbar-large .g6-toolbar-text {
+    display: block;
+    line-height: 20px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    text-align: center;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
+
+/*
+ *  The zoom readout REPORTS, it does not act: no pointer, no hover,
+ *  and quieter than the buttons it sits with. It carries no
+ *  `g6-toolbar-item` class, which is also what keeps G6's own click
+ *  handler from firing on it.
+ */
+.g6-toolbar.g6-toolbar-large .g6-toolbar-readout {
+    padding: 2px 6px;
+    font-size: 0.75rem;
+    text-align: center;
+    white-space: nowrap;
+    cursor: default;
+    opacity: 0.7;
+    font-variant-numeric: tabular-nums;
+}
+
+/*
+ *  Hover follows the theme too. G6 injects `.g6-toolbar-item:hover
+ *  { background-color: #f0f0f0 }` at runtime, AFTER our bundled CSS,
+ *  so an equal-specificity rule would lose -- the extra class on the
+ *  toolbar itself is what wins it, with no !important.
+ */
+.g6-toolbar.g6-toolbar-large .g6-toolbar-item:hover {
+    background-color: var(--bulma-background, #f0f0f0);
 }
 
 /* No transient effects: open/move popups immediately (user pref).