@yuneta/gobj-ui 7.23.159 → 7.23.160

package/README.md

@@ -925,6 +925,30 @@ so it survived that — two light islands over a dark canvas.
 (all tooltips, so a host that has not defined them shows the key on hover and
 nothing else breaks).
 
+### The wheel over HTML nodes: `yui_graph_forward_wheel`
+
+G6's HTML nodes are drawn in a DOM layer **beside** the canvas element, and
+they pass on six pointer events and not the wheel. `scroll-canvas` listens on
+the canvas element and `zoom-canvas` reads G's wheel, which comes from that
+same element. So a wheel over an HTML card reaches neither: the graph does not
+scroll and does not zoom.
+
+`yui_graph_forward_wheel(graph, $host)` catches the wheel on the element G6 was
+mounted in and dispatches it again on the canvas element, with its deltas, its
+position and its modifiers. Both behaviors then take it as a wheel over empty
+canvas. It returns the function that removes the listener; call it before the
+graph is destroyed.
+
+```js
+priv.unforward_wheel = yui_graph_forward_wheel(graph, priv.$canvas);
+// ... in the teardown, before graph.destroy():
+priv.unforward_wheel();
+```
+
+An element that must scroll by itself inside the graph (a popover) stops the
+wheel with `stopPropagation()` before it reaches `$host`.
+`C_YUI_TREEDB_SCHEMA` uses it; `C_G6_NODES_TREE` does not yet.
+
 ### The anchor: one element the camera holds
 
 The same crosshairs button is in all three graphs' toolbars, drawn once in
@@ -1797,6 +1821,17 @@ schema question; that one answers the data question.
 The demo `test-app/schema.html` mounts it alone against the real yuneta agent
 schema, so the drawing can be held against the ASCII one in its `.c`.
 
+**Its camera is the family's** (since `7.23.160`). It has a toolbar with the
+`yui_graph_camera.js` cluster (zoom in, zoom out, the readout, fit, `1:1`), and
+it takes the wheel the same way as the other graphs: the wheel **scrolls**,
+Ctrl + wheel zooms, and a pinch zooms on a touch screen. This is true over the
+cards too, through `yui_graph_forward_wheel()`: the cards cover most of this
+drawing, and without it the wheel worked only in the gaps. It still never fits
+itself when it appears; fit is a button. The toolbar buttons fire
+`EV_ZOOM_IN`, `EV_ZOOM_OUT`, `EV_ZOOM_RESET` and `EV_CENTER` to the view
+itself, so a host declares nothing. `wide` (default `40px`) sets the button
+height.
+
 **Contract:**
 
 - Attributes: `subscriber`, `descs` (`{topic_name: desc}`, the schema),

package/dist/gobj-ui.cjs.js

@@ -11505,6 +11505,64 @@ function yui_graph_camera_behaviors() {
 	}];
 }
 /************************************************************
+*   Make the wheel work over HTML nodes too.
+*
+*   G6's HTML nodes live in a DOM layer BESIDE the canvas
+*   element, not in it, and they forward six pointer events and
+*   not the wheel. `scroll-canvas` listens on the canvas element
+*   and `zoom-canvas` reads G's own wheel event, which is fed
+*   from that same element -- so a wheel over a card reaches
+*   neither, and on a graph drawn with big cards the wheel only
+*   works in the gaps between them.
+*
+*   The wheel is caught on `$host` (the element G6 was mounted
+*   in) and dispatched again ON the canvas element, carrying the
+*   deltas, the position and the modifiers: both behaviors then
+*   take it exactly as a wheel over empty canvas. Control is
+*   read by G6 from the real keydown, which is still held.
+*
+*   A wheel whose target is the canvas passes untouched, which
+*   is also what keeps the re-dispatched one from looping. An
+*   element that must scroll by itself (a popover) stops the
+*   wheel before it gets here.
+*
+*   Returns the function that removes the listener.
+************************************************************/
+function yui_graph_forward_wheel(graph, $host) {
+	if (!graph || !$host) return () => {};
+	const on_wheel = (e) => {
+		let dom = null;
+		try {
+			dom = graph.getCanvas().getContextService().getDomElement();
+		} catch (err) {
+			return;
+		}
+		if (!dom || e.target === dom) return;
+		e.preventDefault();
+		e.stopPropagation();
+		dom.dispatchEvent(new WheelEvent("wheel", {
+			deltaX: e.deltaX,
+			deltaY: e.deltaY,
+			deltaZ: e.deltaZ,
+			deltaMode: e.deltaMode,
+			clientX: e.clientX,
+			clientY: e.clientY,
+			screenX: e.screenX,
+			screenY: e.screenY,
+			ctrlKey: e.ctrlKey,
+			shiftKey: e.shiftKey,
+			altKey: e.altKey,
+			metaKey: e.metaKey,
+			bubbles: true,
+			cancelable: true
+		}));
+	};
+	$host.addEventListener("wheel", on_wheel, { passive: false });
+	return () => {
+		$host.removeEventListener("wheel", on_wheel);
+	};
+}
+/************************************************************
 *   The camera cluster: zoom in, zoom out, readout, fit,
 *   actual size.  Returns createElement2 specs, in order.
 *
@@ -13566,7 +13624,7 @@ function ac_toggle_anchor$2(gobj, event, kw, src) {
 /************************************************************
 *
 ************************************************************/
-function ac_zoom_in$3(gobj, event, kw, src) {
+function ac_zoom_in$4(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
@@ -13577,7 +13635,7 @@ function ac_zoom_in$3(gobj, event, kw, src) {
 /************************************************************
 *
 ************************************************************/
-function ac_zoom_out$3(gobj, event, kw, src) {
+function ac_zoom_out$4(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
@@ -13588,7 +13646,7 @@ function ac_zoom_out$3(gobj, event, kw, src) {
 /************************************************************
 *
 ************************************************************/
-function ac_zoom_reset$3(gobj, event, kw, src) {
+function ac_zoom_reset$4(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	if (graph && graph.rendered) {
@@ -13603,7 +13661,7 @@ function ac_zoom_reset$3(gobj, event, kw, src) {
 /************************************************************
 *
 ************************************************************/
-function ac_center$3(gobj, event, kw, src) {
+function ac_center$4(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		graph.fitCenter();
@@ -13739,22 +13797,22 @@ function create_gclass$14(gclass_name) {
 		],
 		[
 			"EV_ZOOM_IN",
-			ac_zoom_in$3,
+			ac_zoom_in$4,
 			null
 		],
 		[
 			"EV_ZOOM_OUT",
-			ac_zoom_out$3,
+			ac_zoom_out$4,
 			null
 		],
 		[
 			"EV_ZOOM_RESET",
-			ac_zoom_reset$3,
+			ac_zoom_reset$4,
 			null
 		],
 		[
 			"EV_CENTER",
-			ac_center$3,
+			ac_center$4,
 			null
 		],
 		[
@@ -16851,16 +16909,16 @@ function ac_language_changed$7(gobj, event, kw, src) {
 /************************************************************
 *   The camera.
 ************************************************************/
-function ac_zoom_in$2(gobj, event, kw, src) {
+function ac_zoom_in$3(gobj, event, kw, src) {
 	return camera(gobj, "zoom in", (graph) => graph.zoomBy(1.2));
 }
-function ac_zoom_out$2(gobj, event, kw, src) {
+function ac_zoom_out$3(gobj, event, kw, src) {
 	return camera(gobj, "zoom out", (graph) => graph.zoomBy(1 / 1.2));
 }
-function ac_zoom_reset$2(gobj, event, kw, src) {
+function ac_zoom_reset$3(gobj, event, kw, src) {
 	return camera(gobj, "reset the zoom", (graph) => graph.zoomTo(1));
 }
-function ac_center$2(gobj, event, kw, src) {
+function ac_center$3(gobj, event, kw, src) {
 	return camera(gobj, "fit the graph", (graph) => fit_readable(graph));
 }
 /************************************************************
@@ -16919,22 +16977,22 @@ function create_gclass$11(gclass_name) {
 		],
 		[
 			"EV_ZOOM_IN",
-			ac_zoom_in$2,
+			ac_zoom_in$3,
 			null
 		],
 		[
 			"EV_ZOOM_OUT",
-			ac_zoom_out$2,
+			ac_zoom_out$3,
 			null
 		],
 		[
 			"EV_ZOOM_RESET",
-			ac_zoom_reset$2,
+			ac_zoom_reset$3,
 			null
 		],
 		[
 			"EV_CENTER",
-			ac_center$2,
+			ac_center$3,
 			null
 		],
 		[
@@ -21042,7 +21100,7 @@ function ac_toggle_anchor$1(gobj, event, kw, src) {
 /************************************************************
 *
 ************************************************************/
-function ac_zoom_in$1(gobj, event, kw, src) {
+function ac_zoom_in$2(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
@@ -21053,7 +21111,7 @@ function ac_zoom_in$1(gobj, event, kw, src) {
 /************************************************************
 *
 ************************************************************/
-function ac_zoom_out$1(gobj, event, kw, src) {
+function ac_zoom_out$2(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
@@ -21064,7 +21122,7 @@ function ac_zoom_out$1(gobj, event, kw, src) {
 /************************************************************
 *
 ************************************************************/
-function ac_zoom_reset$1(gobj, event, kw, src) {
+function ac_zoom_reset$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	if (graph && graph.rendered) {
@@ -21079,7 +21137,7 @@ function ac_zoom_reset$1(gobj, event, kw, src) {
 /************************************************************
 *
 ************************************************************/
-function ac_center$1(gobj, event, kw, src) {
+function ac_center$2(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		graph.fitCenter();
@@ -21285,22 +21343,22 @@ function create_gclass$9(gclass_name) {
 		],
 		[
 			"EV_ZOOM_IN",
-			ac_zoom_in$1,
+			ac_zoom_in$2,
 			null
 		],
 		[
 			"EV_ZOOM_OUT",
-			ac_zoom_out$1,
+			ac_zoom_out$2,
 			null
 		],
 		[
 			"EV_ZOOM_RESET",
-			ac_zoom_reset$1,
+			ac_zoom_reset$2,
 			null
 		],
 		[
 			"EV_CENTER",
-			ac_center$1,
+			ac_center$2,
 			null
 		],
 		[
@@ -64013,15 +64071,15 @@ function ac_theme$1(gobj, event, kw, src) {
 /************************************************************
 *  Zoom controls
 ************************************************************/
-function ac_zoom_in(gobj, event, kw, src) {
+function ac_zoom_in$1(gobj, event, kw, src) {
 	graph_zoom_in(gobj);
 	return 0;
 }
-function ac_zoom_out(gobj, event, kw, src) {
+function ac_zoom_out$1(gobj, event, kw, src) {
 	graph_zoom_out(gobj);
 	return 0;
 }
-function ac_zoom_reset(gobj, event, kw, src) {
+function ac_zoom_reset$1(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	if (priv.anchor_state === "on" && priv.anchor_id) after_camera(gobj, graph.zoomTo(1));
@@ -64409,7 +64467,7 @@ function ac_find_next$1(gobj, event, kw, src) {
 	graph_find_step(gobj, !!(kw && kw.back));
 	return 0;
 }
-function ac_center(gobj, event, kw, src) {
+function ac_center$1(gobj, event, kw, src) {
 	graph_center(gobj);
 	return 0;
 }
@@ -64819,17 +64877,17 @@ function create_gclass$4(gclass_name) {
 		],
 		[
 			"EV_ZOOM_IN",
-			ac_zoom_in,
+			ac_zoom_in$1,
 			null
 		],
 		[
 			"EV_ZOOM_OUT",
-			ac_zoom_out,
+			ac_zoom_out$1,
 			null
 		],
 		[
 			"EV_ZOOM_RESET",
-			ac_zoom_reset,
+			ac_zoom_reset$1,
 			null
 		],
 		[
@@ -64929,7 +64987,7 @@ function create_gclass$4(gclass_name) {
 		],
 		[
 			"EV_CENTER",
-			ac_center,
+			ac_center$1,
 			null
 		],
 		[
@@ -67645,6 +67703,12 @@ function register_c_yui_treedb_graph() {
 *      via the host-supplied `node_route`). An alternate landing to the
 *      topic cards, in the spirit of "every treedb is a graph".
 *
+*      The CAMERA is the family's (yui_graph_camera.js): the same
+*      toolbar cluster -- zoom in/out, readout, fit, 1:1 -- and the
+*      same wheel: it SCROLLS, and Ctrl + wheel zooms, over the cards
+*      too (yui_graph_forward_wheel). This view zoomed on a bare wheel
+*      and had no toolbar, beside graphs that did neither.
+*
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
@@ -67682,19 +67746,23 @@ var attrs_table$2 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "node_route", 0, "", "Hash-route template with a {topic} placeholder: a node click opens that topic (e.g. '#/topics/db/<sel>/{topic}')"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_node_click", 0, false, "With no `node_route`, PUBLISH a node click as EV_NODE_CLICK instead of dropping it. Opt-in, because a subscriber has to DECLARE the event: the hosts that route by hash, and the ones that want nothing, must not have it appear underneath them"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "system", 0, false, "Include system topics (__*__) too"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "wide", 0, "40px", "Height of the toolbar buttons: the family's (C_YUI_TREEDB_GRAPH, C_YUI_JSON_GRAPH, C_YUI_GOBJ_TREE_JS)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "Root HTML element"),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
 var PRIVATE_DATA$2 = {
 	$container: null,
+	$canvas: null,
 	graph: null,
-	theme_observer: null
+	theme_observer: null,
+	unforward_wheel: null
 };
 var __gclass__$2 = null;
 /******************************
 *      Framework Methods
 ******************************/
 function mt_create$2(gobj) {
+	ensure_pinch_zoom_patch();
 	build_ui$2(gobj);
 	let subscriber = (0, _yuneta_gobj_js.gobj_read_pointer_attr)(gobj, "subscriber");
 	if (!subscriber) subscriber = (0, _yuneta_gobj_js.gobj_parent)(gobj);
@@ -67724,13 +67792,47 @@ function mt_destroy$2(gobj) {
 *   Build UI
 ************************************************************/
 function build_ui$2(gobj) {
+	let priv = gobj.priv;
+	const $toolbar = yui_toolbar({}, [
+		[
+			"div",
+			{ class: "yui-horizontal-toolbar-section left" },
+			[]
+		],
+		[
+			"div",
+			{ class: "yui-horizontal-toolbar-section center" },
+			yui_graph_camera_items(gobj, null, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "wide"))
+		],
+		[
+			"div",
+			{ class: "yui-horizontal-toolbar-section right" },
+			[]
+		]
+	]);
+	(0, _yuneta_gobj_js.refresh_language)($toolbar, i18next.t);
+	priv.$canvas = (0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{
+			class: "TREEDB_SCHEMA_CANVAS",
+			style: "position:relative; flex:1 1 auto; min-height:0;"
+		},
+		[]
+	]);
 	let $container = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
 			class: "C_YUI_TREEDB_SCHEMA TREEDB_SCHEMA_VIEW",
-			style: "position:relative; height:100%; min-height:0;"
+			style: "position:relative; height:100%; min-height:0; display:flex; flex-direction:column;"
 		},
-		[]
+		[[
+			"div",
+			{
+				class: "TREEDB_SCHEMA_TOOLBAR",
+				style: "flex:0 0 auto;"
+			},
+			[$toolbar]
+		], priv.$canvas]
 	]);
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "$container", $container);
 }
@@ -68024,7 +68126,10 @@ function edge_style(dark) {
 function build_graph(gobj) {
 	let priv = gobj.priv;
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
-	if (!$container) return;
+	if (!$container || !priv.$canvas) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no UI to draw the schema in`);
+		return;
+	}
 	destroy_graph(gobj);
 	let data = schema_to_graph(gobj);
 	if (data.nodes.length === 0) {
@@ -68036,15 +68141,16 @@ function build_graph(gobj) {
 			},
 			(0, i18next.t)("no topics", { defaultValue: "No topics" })
 		]);
-		$container.appendChild($empty);
+		priv.$canvas.appendChild($empty);
 		return;
 	}
 	let dark = yui_is_dark();
 	let graph;
 	try {
 		graph = new _antv_g6.Graph({
-			container: $container,
+			container: priv.$canvas,
 			autoResize: true,
+			animation: false,
 			data,
 			edge: { style: edge_style(dark) },
 			layout: {
@@ -68054,8 +68160,8 @@ function build_graph(gobj) {
 				ranksep: 90
 			},
 			behaviors: [
-				"zoom-canvas",
 				"drag-canvas",
+				...yui_graph_camera_behaviors(),
 				"drag-element"
 			]
 		});
@@ -68065,11 +68171,17 @@ function build_graph(gobj) {
 	}
 	priv.graph = graph;
 	graph.setTheme(dark ? "dark" : "light");
+	graph.on("aftertransform", () => {
+		yui_graph_update_zoom($container, priv.graph);
+	});
+	priv.unforward_wheel = yui_graph_forward_wheel(graph, priv.$canvas);
 	graph.on(_antv_g6.NodeEvent.CLICK, (evt) => {
 		let node_id = evt && evt.target && evt.target.id;
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_CLICK", { node_id }, gobj);
 	});
-	graph.render().catch((e) => {
+	graph.render().then(() => {
+		yui_graph_update_zoom($container, priv.graph);
+	}).catch((e) => {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: schema graph render failed: ${e}`);
 	});
 }
@@ -68078,14 +68190,17 @@ function build_graph(gobj) {
 ************************************************************/
 function destroy_graph(gobj) {
 	let priv = gobj.priv;
+	if (priv.unforward_wheel) {
+		priv.unforward_wheel();
+		priv.unforward_wheel = null;
+	}
 	if (priv.graph) {
 		try {
 			priv.graph.destroy();
 		} catch (e) {}
 		priv.graph = null;
 	}
-	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
-	if ($container) while ($container.firstChild) $container.removeChild($container.firstChild);
+	if (priv.$canvas) while (priv.$canvas.firstChild) priv.$canvas.removeChild(priv.$canvas.firstChild);
 }
 /***************************
 *      Actions
@@ -68175,6 +68290,38 @@ function ac_theme(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*   The camera, from the toolbar. Same moves as the family's
+*   (C_YUI_GOBJ_TREE_JS): +/- 20%, fit, and actual size at the
+*   layout's origin.
+************************************************************/
+function camera_move(gobj, what, promise) {
+	Promise.resolve(promise).then(() => {
+		yui_graph_update_zoom((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), gobj.priv.graph);
+	}).catch((e) => {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: schema graph ${what} failed: ${e}`);
+	});
+}
+function ac_zoom_in(gobj, event, kw, src) {
+	let graph = gobj.priv.graph;
+	if (graph) camera_move(gobj, "zoom in", graph.zoomTo(graph.getZoom() * 1.2));
+	return 0;
+}
+function ac_zoom_out(gobj, event, kw, src) {
+	let graph = gobj.priv.graph;
+	if (graph) camera_move(gobj, "zoom out", graph.zoomTo(graph.getZoom() * .8));
+	return 0;
+}
+function ac_zoom_reset(gobj, event, kw, src) {
+	let graph = gobj.priv.graph;
+	if (graph && graph.rendered) camera_move(gobj, "actual size", Promise.resolve(graph.zoomTo(1)).then(() => graph.translateTo([0, 0])));
+	return 0;
+}
+function ac_center(gobj, event, kw, src) {
+	let graph = gobj.priv.graph;
+	if (graph) camera_move(gobj, "fit", graph.fitView());
+	return 0;
+}
+/************************************************************
 *   Rebuild from a fresh schema (descs arrived / changed).
 ************************************************************/
 function ac_rebuild(gobj, event, kw, src) {
@@ -68216,13 +68363,37 @@ function create_gclass$2(gclass_name) {
 			"EV_REBUILD",
 			ac_rebuild,
 			null
+		],
+		[
+			"EV_ZOOM_IN",
+			ac_zoom_in,
+			null
+		],
+		[
+			"EV_ZOOM_OUT",
+			ac_zoom_out,
+			null
+		],
+		[
+			"EV_ZOOM_RESET",
+			ac_zoom_reset,
+			null
+		],
+		[
+			"EV_CENTER",
+			ac_center,
+			null
 		]
 	]]];
 	const event_types = [
 		["EV_NODE_CLICK", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_SHOW", 0],
 		["EV_THEME", 0],
-		["EV_REBUILD", 0]
+		["EV_REBUILD", 0],
+		["EV_ZOOM_IN", 0],
+		["EV_ZOOM_OUT", 0],
+		["EV_ZOOM_RESET", 0],
+		["EV_CENTER", 0]
 	];
 	__gclass__$2 = (0, _yuneta_gobj_js.gclass_create)(gclass_name, event_types, states, gmt$2, 0, attrs_table$2, PRIVATE_DATA$2, 0, 0, 0, 0);
 	if (!__gclass__$2) return -1;