@yuneta/gobj-ui 7.23.3 → 7.23.4

package/README.md

@@ -448,12 +448,16 @@ 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 speaks the **same vocabulary as the treedb graph** (`7.23.3`): zoom
-in / zoom out, a live **zoom readout**, `yi-fit` for fit — the same corner
-brackets the SVG 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.
-The readout hangs off G6's `aftertransform`, the one hook that also covers the
-wheel.
+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`,

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
@@ -9556,7 +9710,6 @@ var PRIVATE_DATA$11 = {
 	find_timer: null,
 	fold_listener: null,
 	$layout_select: null,
-	$zoom_readout: null,
 	$find_input: null,
 	$find_result: null,
 	$find_count: null
@@ -9754,84 +9907,6 @@ function destroy_ui$6(gobj) {
 	}
 }
 /************************************************************
-*   One camera button.
-************************************************************/
-function camera_button(gobj, icon, event_name, label_key, wide) {
-	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;",
-			class: icon
-		}],
-		{ click: (evt) => {
-			evt.stopPropagation();
-			(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
-		} }
-	];
-}
-/************************************************************
-*   The zoom, as a percentage.  What the two magnifiers
-*   change: an editor that offers a zoom shows the number.
-************************************************************/
-function zoom_percent_text$1(gobj) {
-	let graph = gobj.priv.graph;
-	if (!graph) return "100%";
-	try {
-		return Math.round(graph.getZoom() * 100) + "%";
-	} catch (e) {
-		return "100%";
-	}
-}
-/************************************************************
-*   Repaint the readout after anything that moves the camera.
-************************************************************/
-function update_zoom_readout$1(gobj) {
-	let priv = gobj.priv;
-	if (priv.$zoom_readout) priv.$zoom_readout.textContent = zoom_percent_text$1(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) {
@@ -9881,52 +9956,8 @@ function make_toolbar$3(gobj) {
 		]]
 	]];
 	let center_items = [];
-	for (let item of [[
-		"yi-magnifying-glass-plus",
-		"EV_ZOOM_IN",
-		"zoom in"
-	], [
-		"yi-magnifying-glass-minus",
-		"EV_ZOOM_OUT",
-		"zoom out"
-	]]) center_items.push(camera_button(gobj, item[0], item[1], item[2], toolbar_wide));
-	priv.$zoom_readout = (0, _yuneta_gobj_js.createElement2)([
-		"span",
-		{
-			class: "JSON_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"
-		},
-		zoom_percent_text$1(gobj)
-	]);
-	center_items.push(priv.$zoom_readout);
-	center_items.push(camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", toolbar_wide));
-	center_items.push([
-		"button",
-		{
-			class: "button EV_ZOOM_RESET",
-			type: "button",
-			style: {
-				height: toolbar_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);
-		} }
-	]);
-	center_items.push(camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", toolbar_wide));
+	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 = {
@@ -9940,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",
@@ -10011,7 +10038,7 @@ function build_graph$3(gobj) {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_CLICK", { evt }, gobj);
 	});
 	graph.on("aftertransform", () => {
-		update_zoom_readout$1(gobj);
+		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") {
@@ -10272,7 +10299,7 @@ function load_json(gobj) {
 		});
 		graph.render().then(() => {
 			if (!preserve_view) graph.fitView();
-			update_zoom_readout$1(gobj);
+			yui_graph_update_zoom((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), priv.graph);
 		});
 	}
 }
@@ -12582,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 };
@@ -12722,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
@@ -9551,7 +9705,6 @@ var PRIVATE_DATA$11 = {
 	find_timer: null,
 	fold_listener: null,
 	$layout_select: null,
-	$zoom_readout: null,
 	$find_input: null,
 	$find_result: null,
 	$find_count: null
@@ -9749,84 +9902,6 @@ function destroy_ui$6(gobj) {
 	}
 }
 /************************************************************
-*   One camera button.
-************************************************************/
-function camera_button(gobj, icon, event_name, label_key, wide) {
-	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;",
-			class: icon
-		}],
-		{ click: (evt) => {
-			evt.stopPropagation();
-			gobj_send_event(gobj, event_name, { evt }, gobj);
-		} }
-	];
-}
-/************************************************************
-*   The zoom, as a percentage.  What the two magnifiers
-*   change: an editor that offers a zoom shows the number.
-************************************************************/
-function zoom_percent_text$1(gobj) {
-	let graph = gobj.priv.graph;
-	if (!graph) return "100%";
-	try {
-		return Math.round(graph.getZoom() * 100) + "%";
-	} catch (e) {
-		return "100%";
-	}
-}
-/************************************************************
-*   Repaint the readout after anything that moves the camera.
-************************************************************/
-function update_zoom_readout$1(gobj) {
-	let priv = gobj.priv;
-	if (priv.$zoom_readout) priv.$zoom_readout.textContent = zoom_percent_text$1(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) {
@@ -9876,52 +9951,8 @@ function make_toolbar$3(gobj) {
 		]]
 	]];
 	let center_items = [];
-	for (let item of [[
-		"yi-magnifying-glass-plus",
-		"EV_ZOOM_IN",
-		"zoom in"
-	], [
-		"yi-magnifying-glass-minus",
-		"EV_ZOOM_OUT",
-		"zoom out"
-	]]) center_items.push(camera_button(gobj, item[0], item[1], item[2], toolbar_wide));
-	priv.$zoom_readout = createElement2([
-		"span",
-		{
-			class: "JSON_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"
-		},
-		zoom_percent_text$1(gobj)
-	]);
-	center_items.push(priv.$zoom_readout);
-	center_items.push(camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", toolbar_wide));
-	center_items.push([
-		"button",
-		{
-			class: "button EV_ZOOM_RESET",
-			type: "button",
-			style: {
-				height: toolbar_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);
-		} }
-	]);
-	center_items.push(camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", toolbar_wide));
+	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 = {
@@ -9935,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",
@@ -10006,7 +10033,7 @@ function build_graph$3(gobj) {
 		gobj_send_event(gobj, "EV_NODE_CLICK", { evt }, gobj);
 	});
 	graph.on("aftertransform", () => {
-		update_zoom_readout$1(gobj);
+		yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
 	});
 	graph.on(CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
@@ -10267,7 +10294,7 @@ function load_json(gobj) {
 		});
 		graph.render().then(() => {
 			if (!preserve_view) graph.fitView();
-			update_zoom_readout$1(gobj);
+			yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
 		});
 	}
 }
@@ -12577,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 };
@@ -12717,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.3",
+  "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";
 
@@ -179,7 +185,6 @@ let PRIVATE_DATA = {
     find_timer:     null,   // rate-limits the find box
     fold_listener:  null,   // delegated click on the card fold handles
     $layout_select: null,   // the layout picker
-    $zoom_readout:  null,   // the zoom percentage
     $find_input:    null,
     $find_result:   null,
     $find_count:    null,
@@ -455,77 +460,6 @@ function destroy_ui(gobj)
     }
 }
 
-/************************************************************
- *   One camera button.
- ************************************************************/
-function camera_button(gobj, icon, event_name, label_key, wide)
-{
-    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;', class: icon}],
-        {
-            click: (evt) => {
-                evt.stopPropagation();
-                gobj_send_event(gobj, event_name, {evt: evt}, gobj);
-            }
-        }
-    ];
-}
-
-/************************************************************
- *   The zoom, as a percentage.  What the two magnifiers
- *   change: an editor that offers a zoom shows the number.
- ************************************************************/
-function zoom_percent_text(gobj)
-{
-    let graph = gobj.priv.graph;
-    if(!graph) {
-        return "100%";
-    }
-    try {
-        return Math.round(graph.getZoom() * 100) + "%";
-    } catch(e) {
-        return "100%";
-    }
-}
-
-/************************************************************
- *   Repaint the readout after anything that moves the camera.
- ************************************************************/
-function update_zoom_readout(gobj)
-{
-    let priv = gobj.priv;
-    if(priv.$zoom_readout) {
-        priv.$zoom_readout.textContent = zoom_percent_text(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
  ************************************************************/
@@ -593,54 +527,12 @@ function make_toolbar(gobj)
     let center_items = [];
 
     /*
-     *  The camera, in the SAME vocabulary the treedb graph uses
-     *  (`c_g6_nodes_tree.js`): zoom in / zoom out, then what those two
-     *  change — the zoom READOUT, because without it "1:1" is a jump to
-     *  a value nobody was told — then fit, then actual size.
-     *
-     *  Two of these used to be a different picture for the same action
-     *  in a sibling view, which is the worst thing an icon can be:
-     *  `EV_ZOOM_RESET` was a bare magnifier and `EV_CENTER` was
-     *  `yi-arrows-to-eye`.  Now fit is the same bracket glyph as the
-     *  sprite's `g6-icon-fit`, and actual size is WRITTEN — `1:1` is
-     *  written in every editor that offers it, never drawn, because
-     *  there is no glyph for it.
+     *  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.
      */
-    let c_icons = [
-        ["yi-magnifying-glass-plus",  "EV_ZOOM_IN",  "zoom in"],
-        ["yi-magnifying-glass-minus", "EV_ZOOM_OUT", "zoom out"],
-    ];
-
-    for(let item of c_icons) {
-        center_items.push(camera_button(gobj, item[0], item[1], item[2], toolbar_wide));
-    }
-
-    priv.$zoom_readout = createElement2(
-        ['span', {class: 'JSON_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'},
-         zoom_percent_text(gobj)]
-    );
-    center_items.push(priv.$zoom_readout);
-
-    center_items.push(camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", toolbar_wide));
-
-    /*  Written, not drawn — see above.  */
-    center_items.push(
-        ['button', {class: 'button EV_ZOOM_RESET', type: 'button',
-                    style: {height: toolbar_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);
-             }
-         }]
-    );
-
-    center_items.push(camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", toolbar_wide));
+    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.
@@ -681,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],
@@ -748,7 +637,7 @@ function build_graph(gobj)
      *  node from each zoom action would have left the readout lying
      *  after every notch.  */
     graph.on('aftertransform', () => {
-        update_zoom_readout(gobj);
+        yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
     });
 
     graph.on(CanvasEvent.CLICK, (evt) => {
@@ -1145,7 +1034,7 @@ function load_json(gobj)
             if(!preserve_view) {
                 graph.fitView();
             }
-            update_zoom_readout(gobj);
+            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);
+}