@yuneta/gobj-ui 7.23.2 → 7.23.4

package/README.md

@@ -448,6 +448,17 @@ stays. Note the close contract: `C_YUI_WINDOW.close_window()` calls `on_close`
 and THEN destroys itself, so a host must drop its reference rather than destroy
 the window too.
 
+Its camera comes from **`yui_graph_camera.js`** (`7.23.4`), the one place every
+DOM-toolbar graph asks for one — this gclass and the gobj tree both, so a
+cloned toolbar cannot drift apart again. The vocabulary is the treedb graph's
+(`c_g6_nodes_tree.js`, which draws its toolbar as a G6 plugin over an SVG
+sprite and so cannot share the code, only the decisions): zoom in / zoom out, a
+live **zoom readout**, `yi-fit` for fit — the same corner brackets the sprite
+draws for `g6-icon-fit` — and the WRITTEN `1:1` for actual size, which is
+written in every editor that offers it and never drawn. Fold is the chevron
+pair, from the lazy tree viewer's own toolbar. The readout hangs off G6's
+`aftertransform`, the one hook that also covers the wheel.
+
 The graph carries **its own** toolbar, a **layout picker**
 (`EV_CHANGE_LAYOUT {layout}`: `vertical tree`, `dagre top-down`,
 `dagre left-right` — the layout and the edge type move together), and since

package/dist/gobj-ui.cjs.js

@@ -9350,6 +9350,160 @@ function yui_toolbar(attrs = {}, items = []) {
 	return $toolbar;
 }
 //#endregion
+//#region src/yui_graph_camera.js
+/***********************************************************************
+*          yui_graph_camera.js
+*
+*  The camera and fold controls a G6 graph puts in a DOM toolbar,
+*  built in ONE place.
+*
+*  This module exists because the same action was drawn three
+*  different ways across sibling views — actual size as a bare
+*  magnifier here and as `1:1` there, fit as `arrows-to-eye` here and
+*  as corner brackets there, fold as chevrons here and as an eye
+*  there.  A user sees two of these graphs side by side in the same
+*  console, so a copied-and-drifted toolbar is not a detail.
+*
+*  The VOCABULARY is not invented here.  It is the one
+*  `c_g6_nodes_tree.js` settled on for the treedb graph, which draws
+*  its toolbar as a G6 plugin over an SVG sprite and therefore cannot
+*  share this code — only its decisions:
+*
+*      zoom in / zoom out      magnifiers
+*      zoom level              a READOUT, because without it "1:1" is
+*                              a jump to a value nobody was told
+*      fit                     corner brackets (`yi-fit`, the same
+*                              path as the sprite's `g6-icon-fit`)
+*      actual size             the WRITTEN `1:1` — the action is
+*                              `zoomTo(1)`, and actual size is written
+*                              in every editor that offers it, never
+*                              drawn, because there is no glyph for it
+*
+*  Fold is the one the treedb graph does not have, so its vocabulary
+*  comes from the other side of the family: the lazy tree viewer's own
+*  toolbar (`c_yui_json.js`) uses chevrons — open pointing down, closed
+*  pointing right — which is also the direction the per-node handles
+*  speak.  An eye means show/hide, which is a different idea.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/************************************************************
+*   One icon button that fires `event_name`.
+************************************************************/
+function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
+	return [
+		"button",
+		{
+			class: `button ${event_name}`,
+			type: "button",
+			style: {
+				height: wide,
+				width: "2.5em"
+			},
+			title: (0, i18next.t)(label_key),
+			"data-i18n-title": label_key,
+			"aria-label": (0, i18next.t)(label_key),
+			"data-i18n-aria-label": label_key
+		},
+		["i", {
+			style: "font-size:1.5em; color:inherit;" + (extra_style || ""),
+			class: icon
+		}],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
+		} }
+	];
+}
+/************************************************************
+*   The current zoom as a percentage.
+************************************************************/
+function yui_graph_zoom_text(graph) {
+	if (!graph) return "100%";
+	try {
+		return Math.round(graph.getZoom() * 100) + "%";
+	} catch (e) {
+		return "100%";
+	}
+}
+/************************************************************
+*   Repaint the readout of a container that carries one.
+*
+*   Call it from G6's `aftertransform`, which is the ONE hook
+*   that also covers the WHEEL — a camera change that passes
+*   through no action, so repainting from each zoom action
+*   leaves the number lying after every notch.
+************************************************************/
+function yui_graph_update_zoom($container, graph) {
+	if (!$container) return;
+	let $readout = $container.querySelector(".GRAPH_ZOOM_LEVEL");
+	if (!$readout) return;
+	$readout.textContent = yui_graph_zoom_text(graph);
+}
+/************************************************************
+*   The camera cluster: zoom in, zoom out, readout, fit,
+*   actual size.  Returns createElement2 specs, in order.
+*
+*   `wide` is the host toolbar's button height.
+************************************************************/
+function yui_graph_camera_items(gobj, graph, wide) {
+	return [
+		camera_button(gobj, "yi-magnifying-glass-plus", "EV_ZOOM_IN", "zoom in", wide),
+		camera_button(gobj, "yi-magnifying-glass-minus", "EV_ZOOM_OUT", "zoom out", wide),
+		[
+			"span",
+			{
+				class: "GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey",
+				style: "font-size:.85rem; min-width:3.5em; justify-content:center;",
+				title: (0, i18next.t)("zoom level"),
+				"data-i18n-title": "zoom level"
+			},
+			yui_graph_zoom_text(graph)
+		],
+		camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", wide),
+		[
+			"button",
+			{
+				class: "button EV_ZOOM_RESET",
+				type: "button",
+				style: {
+					height: wide,
+					width: "2.5em"
+				},
+				title: (0, i18next.t)("actual size"),
+				"data-i18n-title": "actual size",
+				"aria-label": (0, i18next.t)("actual size"),
+				"data-i18n-aria-label": "actual size"
+			},
+			[
+				"span",
+				{ style: "font-weight:700;" },
+				"1:1"
+			],
+			{ click: (evt) => {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_ZOOM_RESET", { evt }, gobj);
+			} }
+		]
+	];
+}
+/************************************************************
+*   The fold pair: expand all, collapse all.  Chevrons, the
+*   open one rotated down — the same pair the lazy tree
+*   viewer's toolbar uses, and the same direction the
+*   per-node handles speak.
+************************************************************/
+function yui_graph_fold_items(gobj, wide) {
+	return [camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide, " transform: rotate(90deg);"), camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide)];
+}
+/************************************************************
+*   A refresh button, for the graphs that offer one.
+************************************************************/
+function yui_graph_refresh_item(gobj, wide) {
+	return camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", wide);
+}
+//#endregion
 //#region src/g6_drag_canvas_touch.js
 /***********************************************************************
 *          g6_drag_canvas_touch.js
@@ -9753,36 +9907,6 @@ function destroy_ui$6(gobj) {
 	}
 }
 /************************************************************
-*   One fold button.  `open` rotates the chevron to the open
-*   state, mirroring the per-node toggle of the lazy tree.
-************************************************************/
-function graph_fold_button(gobj, event_name, label_key, open) {
-	let icon_style = "font-size:1.5em; color:inherit;" + (open ? " transform: rotate(90deg);" : "");
-	return [
-		"button",
-		{
-			class: `button ${event_name}`,
-			type: "button",
-			style: {
-				height: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "wide"),
-				width: "2.5em"
-			},
-			title: (0, i18next.t)(label_key),
-			"data-i18n-title": label_key,
-			"aria-label": (0, i18next.t)(label_key),
-			"data-i18n-aria-label": label_key
-		},
-		["i", {
-			style: icon_style,
-			class: "yi-chevron-right"
-		}],
-		{ click: (evt) => {
-			evt.stopPropagation();
-			(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, {}, gobj);
-		} }
-	];
-}
-/************************************************************
 *   Toolbar
 ************************************************************/
 function make_toolbar$3(gobj) {
@@ -9832,62 +9956,8 @@ function make_toolbar$3(gobj) {
 		]]
 	]];
 	let center_items = [];
-	for (let item of [
-		[
-			"yi-magnifying-glass-plus",
-			"EV_ZOOM_IN",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass",
-			"EV_ZOOM_RESET",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass-minus",
-			"EV_ZOOM_OUT",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-to-eye",
-			"EV_CENTER",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-rotate",
-			"EV_REFRESH",
-			false,
-			"i"
-		]
-	]) {
-		let icon_name = item[0];
-		let event_name = item[1];
-		let disabled = item[2];
-		let button = {
-			class: `button ${event_name}`,
-			style: {
-				height: toolbar_wide,
-				width: "2.5em"
-			}
-		};
-		if (disabled) button.disabled = true;
-		center_items.push([
-			"button",
-			button,
-			["i", {
-				style: "font-size:1.5em; color:inherit;",
-				class: icon_name
-			}],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
-			} }
-		]);
-	}
+	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
+	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let current_layout = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout") || DEFAULT_LAYOUT;
 	let options = Object.keys(LAYOUTS$1).map(function(key) {
 		let attrs = {
@@ -9901,29 +9971,25 @@ function make_toolbar$3(gobj) {
 			layout_label(key)
 		];
 	});
-	let right_items = [
-		(0, _yuneta_gobj_js.createElement2)([
-			"select",
-			{
-				class: "JSON_GRAPH_LAYOUT select",
-				style: {
-					height: toolbar_wide,
-					"margin-left": "0.5em"
-				},
-				title: (0, i18next.t)("layout"),
-				"data-i18n-title": "layout",
-				"aria-label": (0, i18next.t)("layout"),
-				"data-i18n-aria-label": "layout"
+	let right_items = [(0, _yuneta_gobj_js.createElement2)([
+		"select",
+		{
+			class: "JSON_GRAPH_LAYOUT select",
+			style: {
+				height: toolbar_wide,
+				"margin-left": "0.5em"
 			},
-			options,
-			{ change: (evt) => {
-				evt.stopPropagation();
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
-			} }
-		]),
-		graph_fold_button(gobj, "EV_EXPAND_ALL", "expand all", true),
-		graph_fold_button(gobj, "EV_COLLAPSE_ALL", "collapse all", false)
-	];
+			title: (0, i18next.t)("layout"),
+			"data-i18n-title": "layout",
+			"aria-label": (0, i18next.t)("layout"),
+			"data-i18n-aria-label": "layout"
+		},
+		options,
+		{ change: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
+		} }
+	])].concat(yui_graph_fold_items(gobj, toolbar_wide));
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -9971,6 +10037,9 @@ function build_graph$3(gobj) {
 	graph.on(_antv_g6.NodeEvent.CLICK, (evt) => {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_CLICK", { evt }, gobj);
 	});
+	graph.on("aftertransform", () => {
+		yui_graph_update_zoom((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), priv.graph);
+	});
 	graph.on(_antv_g6.CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
 		let $canvas = document.getElementById(priv.canvas_id);
@@ -10230,6 +10299,7 @@ function load_json(gobj) {
 		});
 		graph.render().then(() => {
 			if (!preserve_view) graph.fitView();
+			yui_graph_update_zoom((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), priv.graph);
 		});
 	}
 }
@@ -12539,74 +12609,8 @@ function make_toolbar$1(gobj) {
 	let left_items = [];
 	let center_items = [];
 	let right_items = [];
-	for (let item of [
-		[
-			"yi-magnifying-glass-plus",
-			"EV_ZOOM_IN",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass",
-			"EV_ZOOM_RESET",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass-minus",
-			"EV_ZOOM_OUT",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-to-eye",
-			"EV_CENTER",
-			false,
-			"i"
-		],
-		[
-			"yi-eye",
-			"EV_EXPAND_ALL",
-			false,
-			"i"
-		],
-		[
-			"yi-eye-slash",
-			"EV_COLLAPSE_ALL",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-rotate",
-			"EV_REFRESH",
-			false,
-			"i"
-		]
-	]) {
-		let icon_name = item[0];
-		let event_name = item[1];
-		let disabled = item[2];
-		let button = {
-			class: `button ${event_name}`,
-			style: {
-				height: toolbar_wide,
-				width: "2.5em"
-			}
-		};
-		if (disabled) button.disabled = true;
-		center_items.push([
-			"button",
-			button,
-			["i", {
-				style: "font-size:1.5em; color:inherit;",
-				class: icon_name
-			}],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
-			} }
-		]);
-	}
+	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide).concat(yui_graph_fold_items(gobj, toolbar_wide));
+	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let options = [];
 	for (let key of Object.keys(LAYOUTS)) {
 		let opt_attrs = { value: key };
@@ -12679,6 +12683,9 @@ function build_graph$2(gobj) {
 		behaviors: ["drag-canvas", "zoom-canvas"]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
+	graph.on("aftertransform", () => {
+		yui_graph_update_zoom((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), priv.graph);
+	});
 	graph.on(_antv_g6.NodeEvent.CLICK, (evt) => {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_CLICK", { evt }, gobj);
 	});

package/dist/gobj-ui.es.js

@@ -9345,6 +9345,160 @@ function yui_toolbar(attrs = {}, items = []) {
 	return $toolbar;
 }
 //#endregion
+//#region src/yui_graph_camera.js
+/***********************************************************************
+*          yui_graph_camera.js
+*
+*  The camera and fold controls a G6 graph puts in a DOM toolbar,
+*  built in ONE place.
+*
+*  This module exists because the same action was drawn three
+*  different ways across sibling views — actual size as a bare
+*  magnifier here and as `1:1` there, fit as `arrows-to-eye` here and
+*  as corner brackets there, fold as chevrons here and as an eye
+*  there.  A user sees two of these graphs side by side in the same
+*  console, so a copied-and-drifted toolbar is not a detail.
+*
+*  The VOCABULARY is not invented here.  It is the one
+*  `c_g6_nodes_tree.js` settled on for the treedb graph, which draws
+*  its toolbar as a G6 plugin over an SVG sprite and therefore cannot
+*  share this code — only its decisions:
+*
+*      zoom in / zoom out      magnifiers
+*      zoom level              a READOUT, because without it "1:1" is
+*                              a jump to a value nobody was told
+*      fit                     corner brackets (`yi-fit`, the same
+*                              path as the sprite's `g6-icon-fit`)
+*      actual size             the WRITTEN `1:1` — the action is
+*                              `zoomTo(1)`, and actual size is written
+*                              in every editor that offers it, never
+*                              drawn, because there is no glyph for it
+*
+*  Fold is the one the treedb graph does not have, so its vocabulary
+*  comes from the other side of the family: the lazy tree viewer's own
+*  toolbar (`c_yui_json.js`) uses chevrons — open pointing down, closed
+*  pointing right — which is also the direction the per-node handles
+*  speak.  An eye means show/hide, which is a different idea.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/************************************************************
+*   One icon button that fires `event_name`.
+************************************************************/
+function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
+	return [
+		"button",
+		{
+			class: `button ${event_name}`,
+			type: "button",
+			style: {
+				height: wide,
+				width: "2.5em"
+			},
+			title: t(label_key),
+			"data-i18n-title": label_key,
+			"aria-label": t(label_key),
+			"data-i18n-aria-label": label_key
+		},
+		["i", {
+			style: "font-size:1.5em; color:inherit;" + (extra_style || ""),
+			class: icon
+		}],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, event_name, { evt }, gobj);
+		} }
+	];
+}
+/************************************************************
+*   The current zoom as a percentage.
+************************************************************/
+function yui_graph_zoom_text(graph) {
+	if (!graph) return "100%";
+	try {
+		return Math.round(graph.getZoom() * 100) + "%";
+	} catch (e) {
+		return "100%";
+	}
+}
+/************************************************************
+*   Repaint the readout of a container that carries one.
+*
+*   Call it from G6's `aftertransform`, which is the ONE hook
+*   that also covers the WHEEL — a camera change that passes
+*   through no action, so repainting from each zoom action
+*   leaves the number lying after every notch.
+************************************************************/
+function yui_graph_update_zoom($container, graph) {
+	if (!$container) return;
+	let $readout = $container.querySelector(".GRAPH_ZOOM_LEVEL");
+	if (!$readout) return;
+	$readout.textContent = yui_graph_zoom_text(graph);
+}
+/************************************************************
+*   The camera cluster: zoom in, zoom out, readout, fit,
+*   actual size.  Returns createElement2 specs, in order.
+*
+*   `wide` is the host toolbar's button height.
+************************************************************/
+function yui_graph_camera_items(gobj, graph, wide) {
+	return [
+		camera_button(gobj, "yi-magnifying-glass-plus", "EV_ZOOM_IN", "zoom in", wide),
+		camera_button(gobj, "yi-magnifying-glass-minus", "EV_ZOOM_OUT", "zoom out", wide),
+		[
+			"span",
+			{
+				class: "GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey",
+				style: "font-size:.85rem; min-width:3.5em; justify-content:center;",
+				title: t("zoom level"),
+				"data-i18n-title": "zoom level"
+			},
+			yui_graph_zoom_text(graph)
+		],
+		camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", wide),
+		[
+			"button",
+			{
+				class: "button EV_ZOOM_RESET",
+				type: "button",
+				style: {
+					height: wide,
+					width: "2.5em"
+				},
+				title: t("actual size"),
+				"data-i18n-title": "actual size",
+				"aria-label": t("actual size"),
+				"data-i18n-aria-label": "actual size"
+			},
+			[
+				"span",
+				{ style: "font-weight:700;" },
+				"1:1"
+			],
+			{ click: (evt) => {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_ZOOM_RESET", { evt }, gobj);
+			} }
+		]
+	];
+}
+/************************************************************
+*   The fold pair: expand all, collapse all.  Chevrons, the
+*   open one rotated down — the same pair the lazy tree
+*   viewer's toolbar uses, and the same direction the
+*   per-node handles speak.
+************************************************************/
+function yui_graph_fold_items(gobj, wide) {
+	return [camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide, " transform: rotate(90deg);"), camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide)];
+}
+/************************************************************
+*   A refresh button, for the graphs that offer one.
+************************************************************/
+function yui_graph_refresh_item(gobj, wide) {
+	return camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", wide);
+}
+//#endregion
 //#region src/g6_drag_canvas_touch.js
 /***********************************************************************
 *          g6_drag_canvas_touch.js
@@ -9748,36 +9902,6 @@ function destroy_ui$6(gobj) {
 	}
 }
 /************************************************************
-*   One fold button.  `open` rotates the chevron to the open
-*   state, mirroring the per-node toggle of the lazy tree.
-************************************************************/
-function graph_fold_button(gobj, event_name, label_key, open) {
-	let icon_style = "font-size:1.5em; color:inherit;" + (open ? " transform: rotate(90deg);" : "");
-	return [
-		"button",
-		{
-			class: `button ${event_name}`,
-			type: "button",
-			style: {
-				height: gobj_read_attr(gobj, "wide"),
-				width: "2.5em"
-			},
-			title: t(label_key),
-			"data-i18n-title": label_key,
-			"aria-label": t(label_key),
-			"data-i18n-aria-label": label_key
-		},
-		["i", {
-			style: icon_style,
-			class: "yi-chevron-right"
-		}],
-		{ click: (evt) => {
-			evt.stopPropagation();
-			gobj_send_event(gobj, event_name, {}, gobj);
-		} }
-	];
-}
-/************************************************************
 *   Toolbar
 ************************************************************/
 function make_toolbar$3(gobj) {
@@ -9827,62 +9951,8 @@ function make_toolbar$3(gobj) {
 		]]
 	]];
 	let center_items = [];
-	for (let item of [
-		[
-			"yi-magnifying-glass-plus",
-			"EV_ZOOM_IN",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass",
-			"EV_ZOOM_RESET",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass-minus",
-			"EV_ZOOM_OUT",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-to-eye",
-			"EV_CENTER",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-rotate",
-			"EV_REFRESH",
-			false,
-			"i"
-		]
-	]) {
-		let icon_name = item[0];
-		let event_name = item[1];
-		let disabled = item[2];
-		let button = {
-			class: `button ${event_name}`,
-			style: {
-				height: toolbar_wide,
-				width: "2.5em"
-			}
-		};
-		if (disabled) button.disabled = true;
-		center_items.push([
-			"button",
-			button,
-			["i", {
-				style: "font-size:1.5em; color:inherit;",
-				class: icon_name
-			}],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, event_name, { evt }, gobj);
-			} }
-		]);
-	}
+	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
+	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let current_layout = gobj_read_str_attr(gobj, "layout") || DEFAULT_LAYOUT;
 	let options = Object.keys(LAYOUTS$1).map(function(key) {
 		let attrs = {
@@ -9896,29 +9966,25 @@ function make_toolbar$3(gobj) {
 			layout_label(key)
 		];
 	});
-	let right_items = [
-		createElement2([
-			"select",
-			{
-				class: "JSON_GRAPH_LAYOUT select",
-				style: {
-					height: toolbar_wide,
-					"margin-left": "0.5em"
-				},
-				title: t("layout"),
-				"data-i18n-title": "layout",
-				"aria-label": t("layout"),
-				"data-i18n-aria-label": "layout"
+	let right_items = [createElement2([
+		"select",
+		{
+			class: "JSON_GRAPH_LAYOUT select",
+			style: {
+				height: toolbar_wide,
+				"margin-left": "0.5em"
 			},
-			options,
-			{ change: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
-			} }
-		]),
-		graph_fold_button(gobj, "EV_EXPAND_ALL", "expand all", true),
-		graph_fold_button(gobj, "EV_COLLAPSE_ALL", "collapse all", false)
-	];
+			title: t("layout"),
+			"data-i18n-title": "layout",
+			"aria-label": t("layout"),
+			"data-i18n-aria-label": "layout"
+		},
+		options,
+		{ change: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
+		} }
+	])].concat(yui_graph_fold_items(gobj, toolbar_wide));
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -9966,6 +10032,9 @@ function build_graph$3(gobj) {
 	graph.on(NodeEvent.CLICK, (evt) => {
 		gobj_send_event(gobj, "EV_NODE_CLICK", { evt }, gobj);
 	});
+	graph.on("aftertransform", () => {
+		yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+	});
 	graph.on(CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
 		let $canvas = document.getElementById(priv.canvas_id);
@@ -10225,6 +10294,7 @@ function load_json(gobj) {
 		});
 		graph.render().then(() => {
 			if (!preserve_view) graph.fitView();
+			yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
 		});
 	}
 }
@@ -12534,74 +12604,8 @@ function make_toolbar$1(gobj) {
 	let left_items = [];
 	let center_items = [];
 	let right_items = [];
-	for (let item of [
-		[
-			"yi-magnifying-glass-plus",
-			"EV_ZOOM_IN",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass",
-			"EV_ZOOM_RESET",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass-minus",
-			"EV_ZOOM_OUT",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-to-eye",
-			"EV_CENTER",
-			false,
-			"i"
-		],
-		[
-			"yi-eye",
-			"EV_EXPAND_ALL",
-			false,
-			"i"
-		],
-		[
-			"yi-eye-slash",
-			"EV_COLLAPSE_ALL",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-rotate",
-			"EV_REFRESH",
-			false,
-			"i"
-		]
-	]) {
-		let icon_name = item[0];
-		let event_name = item[1];
-		let disabled = item[2];
-		let button = {
-			class: `button ${event_name}`,
-			style: {
-				height: toolbar_wide,
-				width: "2.5em"
-			}
-		};
-		if (disabled) button.disabled = true;
-		center_items.push([
-			"button",
-			button,
-			["i", {
-				style: "font-size:1.5em; color:inherit;",
-				class: icon_name
-			}],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, event_name, { evt }, gobj);
-			} }
-		]);
-	}
+	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide).concat(yui_graph_fold_items(gobj, toolbar_wide));
+	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let options = [];
 	for (let key of Object.keys(LAYOUTS)) {
 		let opt_attrs = { value: key };
@@ -12674,6 +12678,9 @@ function build_graph$2(gobj) {
 		behaviors: ["drag-canvas", "zoom-canvas"]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
+	graph.on("aftertransform", () => {
+		yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+	});
 	graph.on(NodeEvent.CLICK, (evt) => {
 		gobj_send_event(gobj, "EV_NODE_CLICK", { evt }, gobj);
 	});

package/package.json

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

package/src/c_yui_gobj_tree_js.js

@@ -40,6 +40,12 @@ import {
 } from "@yuneta/gobj-js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {
+    yui_graph_camera_items,
+    yui_graph_fold_items,
+    yui_graph_refresh_item,
+    yui_graph_update_zoom,
+} from "./yui_graph_camera.js";
 
 import {t} from "i18next";
 
@@ -535,40 +541,18 @@ function make_toolbar(gobj)
     let center_items = [];
     let right_items = [];
 
-    let c_icons = [
-        ["yi-magnifying-glass-plus",  "EV_ZOOM_IN",      false, 'i'],
-        ["yi-magnifying-glass",       "EV_ZOOM_RESET",   false, 'i'],
-        ["yi-magnifying-glass-minus", "EV_ZOOM_OUT",     false, 'i'],
-        ["yi-arrows-to-eye",          "EV_CENTER",       false, 'i'],
-        ["yi-eye",                    "EV_EXPAND_ALL",   false, 'i'],
-        ["yi-eye-slash",              "EV_COLLAPSE_ALL", false, 'i'],
-        ["yi-arrows-rotate",          "EV_REFRESH",      false, 'i'],
-    ];
-
-    for(let item of c_icons) {
-        let icon_name = item[0];
-        let event_name = item[1];
-        let disabled = item[2];
-
-        let button = {
-            class: `button ${event_name}`,
-            style: {height: toolbar_wide, width: '2.5em'}
-        };
-        if(disabled) {
-            button.disabled = true;
-        }
-        center_items.push(
-            ['button', button,
-                ['i', {style: 'font-size:1.5em; color:inherit;', class: icon_name}],
-                {
-                    click: (evt) => {
-                        evt.stopPropagation();
-                        gobj_send_event(gobj, event_name, {evt: evt}, gobj);
-                    }
-                }
-            ]
-        );
-    }
+    /*
+     *  The camera and the fold pair come from yui_graph_camera.js.
+     *
+     *  This toolbar used to draw two of these its own way — a bare
+     *  magnifier for actual size, `arrows-to-eye` for fit — and fold as
+     *  an eye, which means show/hide and not open/closed.  The same
+     *  console shows this graph and the JSON one side by side, so the
+     *  drawings have to be the same drawings.
+     */
+    center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide)
+        .concat(yui_graph_fold_items(gobj, toolbar_wide));
+    center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 
     /*
      *  Layout selector
@@ -651,6 +635,12 @@ function build_graph(gobj)
         graph.setTheme(priv.theme);
     }
 
+    /*  The readout follows ANY camera change, the wheel included — a
+     *  wheel notch passes through no action of ours.  */
+    graph.on('aftertransform', () => {
+        yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+    });
+
     graph.on(NodeEvent.CLICK, (evt) => {
         gobj_send_event(gobj, "EV_NODE_CLICK", {evt: evt}, gobj);
     });

package/src/c_yui_json_graph.js

@@ -47,6 +47,12 @@ import {
 } from "@yuneta/gobj-js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
+import {
+    yui_graph_camera_items,
+    yui_graph_fold_items,
+    yui_graph_refresh_item,
+    yui_graph_update_zoom,
+} from "./yui_graph_camera.js";
 
 import {t} from "i18next";
 
@@ -454,30 +460,6 @@ function destroy_ui(gobj)
     }
 }
 
-/************************************************************
- *   One fold button.  `open` rotates the chevron to the open
- *   state, mirroring the per-node toggle of the lazy tree.
- ************************************************************/
-function graph_fold_button(gobj, event_name, label_key, open)
-{
-    let icon_style = 'font-size:1.5em; color:inherit;' +
-        (open? ' transform: rotate(90deg);': '');
-
-    return ['button', {class: `button ${event_name}`,
-                       type: 'button',
-                       style: {height: gobj_read_attr(gobj, "wide"), width: '2.5em'},
-                       title: t(label_key), 'data-i18n-title': label_key,
-                       'aria-label': t(label_key), 'data-i18n-aria-label': label_key},
-        ['i', {style: icon_style, class: 'yi-chevron-right'}],
-        {
-            click: (evt) => {
-                evt.stopPropagation();
-                gobj_send_event(gobj, event_name, {}, gobj);
-            }
-        }
-    ];
-}
-
 /************************************************************
  *   Toolbar
  ************************************************************/
@@ -544,38 +526,13 @@ function make_toolbar(gobj)
     ];
     let center_items = [];
 
-    let c_icons = [
-        ["yi-magnifying-glass-plus", "EV_ZOOM_IN",       false, 'i'],
-        ["yi-magnifying-glass",      "EV_ZOOM_RESET",    false, 'i'],
-        ["yi-magnifying-glass-minus","EV_ZOOM_OUT",      false, 'i'],
-        ["yi-arrows-to-eye",         "EV_CENTER",        false, 'i'],
-        ["yi-arrows-rotate",         "EV_REFRESH",       false, 'i'],
-    ];
-
-    for(let item of c_icons) {
-        let icon_name = item[0];
-        let event_name = item[1];
-        let disabled = item[2];
-
-        let button = {
-            class: `button ${event_name}`,
-            style: {height: toolbar_wide, width: '2.5em'}
-        };
-        if(disabled) {
-            button.disabled = true;
-        }
-        center_items.push(
-            ['button', button,
-                ['i', {style: 'font-size:1.5em; color:inherit;', class: icon_name}],
-                {
-                    click: (evt) => {
-                        evt.stopPropagation();
-                        gobj_send_event(gobj, event_name, {evt: evt}, gobj);
-                    }
-                }
-            ]
-        );
-    }
+    /*
+     *  The camera and the fold pair come from yui_graph_camera.js: the
+     *  same drawings the gobj tree uses, because the two graphs sit in
+     *  the same console and a copied toolbar drifts.
+     */
+    center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
+    center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 
     /*
      *  Right: fold the tree.
@@ -616,11 +573,8 @@ function make_toolbar(gobj)
         }]
     );
 
-    let right_items = [
-        $layout_select,
-        graph_fold_button(gobj, "EV_EXPAND_ALL", "expand all", true),
-        graph_fold_button(gobj, "EV_COLLAPSE_ALL", "collapse all", false),
-    ];
+    let right_items = [$layout_select].concat(
+        yui_graph_fold_items(gobj, toolbar_wide));
 
     const $toolbar = yui_toolbar({}, [
         ['div', {class: 'yui-horizontal-toolbar-section left'}, left_items],
@@ -677,6 +631,15 @@ function build_graph(gobj)
         gobj_send_event(gobj, "EV_NODE_CLICK", {evt: evt}, gobj);
     });
 
+    /*  ONE hook for the readout, the same one the treedb graph uses:
+     *  G6 fires it on any camera change, and the WHEEL is a camera
+     *  change that passes through no action of ours — patching the text
+     *  node from each zoom action would have left the readout lying
+     *  after every notch.  */
+    graph.on('aftertransform', () => {
+        yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+    });
+
     graph.on(CanvasEvent.CLICK, (evt) => {
         // Canvas click
     });
@@ -1071,6 +1034,7 @@ function load_json(gobj)
             if(!preserve_view) {
                 graph.fitView();
             }
+            yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
         });
     }
 }

package/src/yui_graph_camera.js

@@ -0,0 +1,150 @@
+/***********************************************************************
+ *          yui_graph_camera.js
+ *
+ *  The camera and fold controls a G6 graph puts in a DOM toolbar,
+ *  built in ONE place.
+ *
+ *  This module exists because the same action was drawn three
+ *  different ways across sibling views — actual size as a bare
+ *  magnifier here and as `1:1` there, fit as `arrows-to-eye` here and
+ *  as corner brackets there, fold as chevrons here and as an eye
+ *  there.  A user sees two of these graphs side by side in the same
+ *  console, so a copied-and-drifted toolbar is not a detail.
+ *
+ *  The VOCABULARY is not invented here.  It is the one
+ *  `c_g6_nodes_tree.js` settled on for the treedb graph, which draws
+ *  its toolbar as a G6 plugin over an SVG sprite and therefore cannot
+ *  share this code — only its decisions:
+ *
+ *      zoom in / zoom out      magnifiers
+ *      zoom level              a READOUT, because without it "1:1" is
+ *                              a jump to a value nobody was told
+ *      fit                     corner brackets (`yi-fit`, the same
+ *                              path as the sprite's `g6-icon-fit`)
+ *      actual size             the WRITTEN `1:1` — the action is
+ *                              `zoomTo(1)`, and actual size is written
+ *                              in every editor that offers it, never
+ *                              drawn, because there is no glyph for it
+ *
+ *  Fold is the one the treedb graph does not have, so its vocabulary
+ *  comes from the other side of the family: the lazy tree viewer's own
+ *  toolbar (`c_yui_json.js`) uses chevrons — open pointing down, closed
+ *  pointing right — which is also the direction the per-node handles
+ *  speak.  An eye means show/hide, which is a different idea.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {createElement2, gobj_send_event} from "@yuneta/gobj-js";
+
+import {t} from "i18next";
+
+
+/************************************************************
+ *   One icon button that fires `event_name`.
+ ************************************************************/
+function camera_button(gobj, icon, event_name, label_key, wide, extra_style)
+{
+    return ['button', {class: `button ${event_name}`, type: 'button',
+                       style: {height: wide, width: '2.5em'},
+                       title: t(label_key), 'data-i18n-title': label_key,
+                       'aria-label': t(label_key), 'data-i18n-aria-label': label_key},
+        ['i', {style: 'font-size:1.5em; color:inherit;' + (extra_style || ''),
+               class: icon}],
+        {
+            click: (evt) => {
+                evt.stopPropagation();
+                gobj_send_event(gobj, event_name, {evt: evt}, gobj);
+            }
+        }
+    ];
+}
+
+/************************************************************
+ *   The current zoom as a percentage.
+ ************************************************************/
+export function yui_graph_zoom_text(graph)
+{
+    if(!graph) {
+        return "100%";
+    }
+    try {
+        return Math.round(graph.getZoom() * 100) + "%";
+    } catch(e) {
+        return "100%";
+    }
+}
+
+/************************************************************
+ *   Repaint the readout of a container that carries one.
+ *
+ *   Call it from G6's `aftertransform`, which is the ONE hook
+ *   that also covers the WHEEL — a camera change that passes
+ *   through no action, so repainting from each zoom action
+ *   leaves the number lying after every notch.
+ ************************************************************/
+export function yui_graph_update_zoom($container, graph)
+{
+    if(!$container) {
+        return;
+    }
+    let $readout = $container.querySelector('.GRAPH_ZOOM_LEVEL');
+    if(!$readout) {
+        return;     /*  a toolbar without a readout: nobody to report to  */
+    }
+    $readout.textContent = yui_graph_zoom_text(graph);
+}
+
+/************************************************************
+ *   The camera cluster: zoom in, zoom out, readout, fit,
+ *   actual size.  Returns createElement2 specs, in order.
+ *
+ *   `wide` is the host toolbar's button height.
+ ************************************************************/
+export function yui_graph_camera_items(gobj, graph, wide)
+{
+    return [
+        camera_button(gobj, "yi-magnifying-glass-plus", "EV_ZOOM_IN", "zoom in", wide),
+        camera_button(gobj, "yi-magnifying-glass-minus", "EV_ZOOM_OUT", "zoom out", wide),
+        ['span', {class: 'GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey',
+                  style: 'font-size:.85rem; min-width:3.5em; justify-content:center;',
+                  title: t('zoom level'), 'data-i18n-title': 'zoom level'},
+         yui_graph_zoom_text(graph)],
+        camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", wide),
+        /*  Written, not drawn — see the header.  */
+        ['button', {class: 'button EV_ZOOM_RESET', type: 'button',
+                    style: {height: wide, width: '2.5em'},
+                    title: t('actual size'), 'data-i18n-title': 'actual size',
+                    'aria-label': t('actual size'), 'data-i18n-aria-label': 'actual size'},
+         ['span', {style: 'font-weight:700;'}, '1:1'],
+         {
+             click: (evt) => {
+                 evt.stopPropagation();
+                 gobj_send_event(gobj, "EV_ZOOM_RESET", {evt: evt}, gobj);
+             }
+         }]
+    ];
+}
+
+/************************************************************
+ *   The fold pair: expand all, collapse all.  Chevrons, the
+ *   open one rotated down — the same pair the lazy tree
+ *   viewer's toolbar uses, and the same direction the
+ *   per-node handles speak.
+ ************************************************************/
+export function yui_graph_fold_items(gobj, wide)
+{
+    return [
+        camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide,
+            ' transform: rotate(90deg);'),
+        camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide),
+    ];
+}
+
+/************************************************************
+ *   A refresh button, for the graphs that offer one.
+ ************************************************************/
+export function yui_graph_refresh_item(gobj, wide)
+{
+    return camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", wide);
+}

package/src/yui_icons.css

@@ -376,3 +376,13 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M208 80c0-26.5 21.5-48 48-48l64 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-8 0 0 40 152 0c30.9 0 56 25.1 56 56l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-4.4-3.6-8-8-8l-152 0 0 40 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-40-152 0c-4.4 0-8 3.6-8 8l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-30.9 25.1-56 56-56l152 0 0-40-8 0c-26.5 0-48-21.5-48-48l0-64z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M208 80c0-26.5 21.5-48 48-48l64 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-8 0 0 40 152 0c30.9 0 56 25.1 56 56l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-4.4-3.6-8-8-8l-152 0 0 40 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-40-152 0c-4.4 0-8 3.6-8 8l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-30.9 25.1-56 56-56l152 0 0-40-8 0c-26.5 0-48-21.5-48-48l0-64z'/%3E%3C/svg%3E");
 }
+
+/*  The camera's "fit" bracket, the SAME glyph the treedb graph's SVG
+ *  sprite uses for the same action (`g6-icon-fit` in lib_icons.js).
+ *  One action, one drawing: the JSON graph used to say it with
+ *  `yi-arrows-to-eye`, which is a different picture for the same
+ *  button in a sibling view.  */
+.yi-fit::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath 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'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath 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'/%3E%3C/svg%3E");
+}