@yuneta/gobj-ui 7.23.159 → 7.23.160

package/dist/gobj-ui.es.js

@@ -11500,6 +11500,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.
 *
@@ -13561,7 +13619,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();
@@ -13572,7 +13630,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();
@@ -13583,7 +13641,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) {
@@ -13598,7 +13656,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();
@@ -13734,22 +13792,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
 		],
 		[
@@ -16846,16 +16904,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));
 }
 /************************************************************
@@ -16914,22 +16972,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
 		],
 		[
@@ -21037,7 +21095,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();
@@ -21048,7 +21106,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();
@@ -21059,7 +21117,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) {
@@ -21074,7 +21132,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();
@@ -21280,22 +21338,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
 		],
 		[
@@ -64008,15 +64066,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));
@@ -64404,7 +64462,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;
 }
@@ -64814,17 +64872,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
 		],
 		[
@@ -64924,7 +64982,7 @@ function create_gclass$4(gclass_name) {
 		],
 		[
 			"EV_CENTER",
-			ac_center,
+			ac_center$1,
 			null
 		],
 		[
@@ -67640,6 +67698,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.
 ***********************************************************************/
@@ -67677,19 +67741,23 @@ var attrs_table$2 = [
 	SDATA(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}')"),
 	SDATA(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"),
 	SDATA(data_type_t.DTP_BOOLEAN, "system", 0, false, "Include system topics (__*__) too"),
+	SDATA(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)"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Root HTML element"),
 	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 = gobj_read_pointer_attr(gobj, "subscriber");
 	if (!subscriber) subscriber = gobj_parent(gobj);
@@ -67719,13 +67787,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, gobj_read_str_attr(gobj, "wide"))
+		],
+		[
+			"div",
+			{ class: "yui-horizontal-toolbar-section right" },
+			[]
+		]
+	]);
+	refresh_language($toolbar, t);
+	priv.$canvas = createElement2([
+		"div",
+		{
+			class: "TREEDB_SCHEMA_CANVAS",
+			style: "position:relative; flex:1 1 auto; min-height:0;"
+		},
+		[]
+	]);
 	let $container = 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]
 	]);
 	gobj_write_attr(gobj, "$container", $container);
 }
@@ -68019,7 +68121,10 @@ function edge_style(dark) {
 function build_graph(gobj) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
-	if (!$container) return;
+	if (!$container || !priv.$canvas) {
+		log_error(`${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) {
@@ -68031,15 +68136,16 @@ function build_graph(gobj) {
 			},
 			t("no topics", { defaultValue: "No topics" })
 		]);
-		$container.appendChild($empty);
+		priv.$canvas.appendChild($empty);
 		return;
 	}
 	let dark = yui_is_dark();
 	let graph;
 	try {
 		graph = new Graph({
-			container: $container,
+			container: priv.$canvas,
 			autoResize: true,
+			animation: false,
 			data,
 			edge: { style: edge_style(dark) },
 			layout: {
@@ -68049,8 +68155,8 @@ function build_graph(gobj) {
 				ranksep: 90
 			},
 			behaviors: [
-				"zoom-canvas",
 				"drag-canvas",
+				...yui_graph_camera_behaviors(),
 				"drag-element"
 			]
 		});
@@ -68060,11 +68166,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(NodeEvent.CLICK, (evt) => {
 		let node_id = evt && evt.target && evt.target.id;
 		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) => {
 		log_error(`${gobj_short_name(gobj)}: schema graph render failed: ${e}`);
 	});
 }
@@ -68073,14 +68185,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 = 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
@@ -68170,6 +68285,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(gobj_read_attr(gobj, "$container"), gobj.priv.graph);
+	}).catch((e) => {
+		log_error(`${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) {
@@ -68211,13 +68358,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", event_flag_t.EVF_OUTPUT_EVENT | 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 = 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;

package/package.json

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