@yuneta/gobj-ui 7.23.163 → 7.23.165

package/README.md

@@ -1016,7 +1016,22 @@ 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.
+
+A graph that puts other DOM in its container, such as its own toolbars or a
+legend, passes `opts.selector`. Then only a wheel whose target is inside a
+matching element is forwarded, and a wheel over the rest keeps its own
+behaviour:
+
+```js
+priv._unforward_wheel = yui_graph_forward_wheel(graph, priv.$container, {
+    selector: ".TREEDB_CARD, .TREEDB_PILLS"
+});
+```
+
+`C_YUI_TREEDB_SCHEMA` forwards every wheel (its container holds only the
+cards). `C_G6_NODES_TREE` forwards only the wheels over its cards and pill
+strips (since `7.23.164`), so Ctrl + wheel over its toolbar does not zoom the
+graph.
 
 ### The anchor: one element the camera holds
 

package/dist/gobj-ui.cjs.js

@@ -11526,9 +11526,15 @@ function yui_graph_camera_behaviors() {
 *   element that must scroll by itself (a popover) stops the
 *   wheel before it gets here.
 *
+*   `opts.selector` narrows it to the wheels whose target is
+*   inside an element that matches, e.g. the root class of the
+*   cards. A graph that puts other DOM in its container -- its
+*   own toolbars, a legend -- passes one, so a wheel over those
+*   is left to them instead of scrolling the graph.
+*
 *   Returns the function that removes the listener.
 ************************************************************/
-function yui_graph_forward_wheel(graph, $host) {
+function yui_graph_forward_wheel(graph, $host, opts = {}) {
 	if (!graph || !$host) return () => {};
 	const on_wheel = (e) => {
 		let dom = null;
@@ -11538,6 +11544,7 @@ function yui_graph_forward_wheel(graph, $host) {
 			return;
 		}
 		if (!dom || e.target === dom) return;
+		if (opts.selector && !(e.target instanceof Element && e.target.closest(opts.selector))) return;
 		e.preventDefault();
 		e.stopPropagation();
 		dom.dispatchEvent(new WheelEvent("wheel", {
@@ -24544,10 +24551,16 @@ function ac_select_topic_card(gobj, event, kw, src) {
 *  Falls back to an in-view flip only when no routes were supplied.
 ************************************************************/
 function ac_toggle_landing_view(gobj, event, kw, src) {
-	let target = gobj.priv._landing_view === "schema" ? "cards" : "schema";
+	let priv = gobj.priv;
+	let target = priv._landing_view === "schema" ? "cards" : "schema";
 	let routes = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "landing_routes");
 	let href = (0, _yuneta_gobj_js.is_object)(routes) ? routes[target] : null;
 	if (href && typeof window !== "undefined") {
+		if (window.location.hash === href) {
+			(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: landing view '${priv._landing_view}' on screen under the '${target}' url (${href}): following the url`);
+			set_landing_view(gobj, target);
+			return 0;
+		}
 		window.location.hash = href;
 		return 0;
 	}
@@ -24573,6 +24586,12 @@ function ac_set_landing_view(gobj, event, kw, src) {
 *  Back from a topic to the cards-landing grid (the section index).
 ************************************************************/
 function ac_back_to_topics(gobj, event, kw, src) {
+	let routes = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "landing_routes");
+	let href = (0, _yuneta_gobj_js.is_object)(routes) ? routes[gobj.priv._landing_view] : null;
+	if (href && typeof window !== "undefined") {
+		window.location.hash = href;
+		return 0;
+	}
 	show_topics_landing(gobj);
 	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_TOPIC_SELECTED", { topic: "" });
 	return 0;
@@ -57670,6 +57689,7 @@ var PRIVATE_DATA$4 = {
 	_on_pointerdown_focus: null,
 	_on_native_contextmenu: null,
 	_uninstall_long_press: null,
+	_unforward_wheel: null,
 	toolbar_collapsed: true,
 	_toolbars_could_collapse: null,
 	_on_focusout_restore: null,
@@ -57788,6 +57808,10 @@ function mt_destroy$4(gobj) {
 		priv._uninstall_long_press();
 		priv._uninstall_long_press = null;
 	}
+	if (priv._unforward_wheel) {
+		priv._unforward_wheel();
+		priv._unforward_wheel = null;
+	}
 	if (priv.graph) {
 		priv.graph.destroy();
 		priv.graph = null;
@@ -57897,6 +57921,7 @@ function build_graph$1(gobj) {
 		plugins: []
 	});
 	graph.setTheme(priv.theme);
+	priv._unforward_wheel = yui_graph_forward_wheel(graph, priv.$container, { selector: ".TREEDB_CARD, .TREEDB_PILLS" });
 	graph.setLayout(layout);
 	priv.graph_rendered = false;
 	graph_render(gobj).then(() => {

package/dist/gobj-ui.es.js

@@ -11521,9 +11521,15 @@ function yui_graph_camera_behaviors() {
 *   element that must scroll by itself (a popover) stops the
 *   wheel before it gets here.
 *
+*   `opts.selector` narrows it to the wheels whose target is
+*   inside an element that matches, e.g. the root class of the
+*   cards. A graph that puts other DOM in its container -- its
+*   own toolbars, a legend -- passes one, so a wheel over those
+*   is left to them instead of scrolling the graph.
+*
 *   Returns the function that removes the listener.
 ************************************************************/
-function yui_graph_forward_wheel(graph, $host) {
+function yui_graph_forward_wheel(graph, $host, opts = {}) {
 	if (!graph || !$host) return () => {};
 	const on_wheel = (e) => {
 		let dom = null;
@@ -11533,6 +11539,7 @@ function yui_graph_forward_wheel(graph, $host) {
 			return;
 		}
 		if (!dom || e.target === dom) return;
+		if (opts.selector && !(e.target instanceof Element && e.target.closest(opts.selector))) return;
 		e.preventDefault();
 		e.stopPropagation();
 		dom.dispatchEvent(new WheelEvent("wheel", {
@@ -24539,10 +24546,16 @@ function ac_select_topic_card(gobj, event, kw, src) {
 *  Falls back to an in-view flip only when no routes were supplied.
 ************************************************************/
 function ac_toggle_landing_view(gobj, event, kw, src) {
-	let target = gobj.priv._landing_view === "schema" ? "cards" : "schema";
+	let priv = gobj.priv;
+	let target = priv._landing_view === "schema" ? "cards" : "schema";
 	let routes = gobj_read_attr(gobj, "landing_routes");
 	let href = is_object(routes) ? routes[target] : null;
 	if (href && typeof window !== "undefined") {
+		if (window.location.hash === href) {
+			log_error(`${gobj_short_name(gobj)}: landing view '${priv._landing_view}' on screen under the '${target}' url (${href}): following the url`);
+			set_landing_view(gobj, target);
+			return 0;
+		}
 		window.location.hash = href;
 		return 0;
 	}
@@ -24568,6 +24581,12 @@ function ac_set_landing_view(gobj, event, kw, src) {
 *  Back from a topic to the cards-landing grid (the section index).
 ************************************************************/
 function ac_back_to_topics(gobj, event, kw, src) {
+	let routes = gobj_read_attr(gobj, "landing_routes");
+	let href = is_object(routes) ? routes[gobj.priv._landing_view] : null;
+	if (href && typeof window !== "undefined") {
+		window.location.hash = href;
+		return 0;
+	}
 	show_topics_landing(gobj);
 	gobj_publish_event(gobj, "EV_TOPIC_SELECTED", { topic: "" });
 	return 0;
@@ -57665,6 +57684,7 @@ var PRIVATE_DATA$4 = {
 	_on_pointerdown_focus: null,
 	_on_native_contextmenu: null,
 	_uninstall_long_press: null,
+	_unforward_wheel: null,
 	toolbar_collapsed: true,
 	_toolbars_could_collapse: null,
 	_on_focusout_restore: null,
@@ -57783,6 +57803,10 @@ function mt_destroy$4(gobj) {
 		priv._uninstall_long_press();
 		priv._uninstall_long_press = null;
 	}
+	if (priv._unforward_wheel) {
+		priv._unforward_wheel();
+		priv._unforward_wheel = null;
+	}
 	if (priv.graph) {
 		priv.graph.destroy();
 		priv.graph = null;
@@ -57892,6 +57916,7 @@ function build_graph$1(gobj) {
 		plugins: []
 	});
 	graph.setTheme(priv.theme);
+	priv._unforward_wheel = yui_graph_forward_wheel(graph, priv.$container, { selector: ".TREEDB_CARD, .TREEDB_PILLS" });
 	graph.setLayout(layout);
 	priv.graph_rendered = false;
 	graph_render(gobj).then(() => {

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -112,6 +112,7 @@ import {
     yui_graph_center_on,
     yui_graph_viewport_of,
     yui_graph_camera_behaviors,
+    yui_graph_forward_wheel,
     yui_graph_place_at,
 } from "./yui_graph_camera.js";
 import {
@@ -531,6 +532,7 @@ let PRIVATE_DATA = {
     _on_pointerdown_focus: null,    // listener keeping the keyboard on the canvas
     _on_native_contextmenu: null,   // listener keeping the browser's menu out
     _uninstall_long_press: null,    // touch door to the context menu
+    _unforward_wheel:   null,       // removes the wheel forwarding of the cards
     toolbar_collapsed:  true,       // floating toolbars folded (narrow only)
     _toolbars_could_collapse: null, // last answer, to notice it changed
     _on_focusout_restore: null,     // ...and putting it back when it goes nowhere
@@ -743,6 +745,11 @@ function mt_destroy(gobj)
         priv._uninstall_long_press = null;
     }
 
+    if(priv._unforward_wheel) {
+        priv._unforward_wheel();
+        priv._unforward_wheel = null;
+    }
+
     if(priv.graph) {
         priv.graph.destroy();
         priv.graph = null;
@@ -994,6 +1001,14 @@ function build_graph(gobj)
      */
     graph.setTheme(priv.theme);
 
+    /*  A card is an HTML node, and G6's HTML nodes do not pass the wheel
+     *  on: over a card the graph neither scrolled nor zoomed. Only a wheel
+     *  over a CARD is handed back to the canvas -- the toolbars and the
+     *  legend live in this container too, and keep their own wheel.  */
+    priv._unforward_wheel = yui_graph_forward_wheel(graph, priv.$container, {
+        selector: ".TREEDB_CARD, .TREEDB_PILLS"
+    });
+
     graph.setLayout(layout);
     //show_positions(gobj);
 

package/src/c_yui_treedb_topics.js

@@ -2185,6 +2185,17 @@ function ac_toggle_landing_view(gobj, event, kw, src)
     let routes = gobj_read_attr(gobj, "landing_routes");
     let href = is_object(routes) ? routes[target] : null;
     if(href && typeof window !== "undefined") {
+        /*  The url already says `target` while the screen shows the other
+         *  view: assigning the same hash fires no route change, so the
+         *  switch would never come and the button would do nothing. The
+         *  screen and the url disagreeing is a broken invariant -- said,
+         *  and then the screen follows the url.  */
+        if(window.location.hash === href) {
+            log_error(`${gobj_short_name(gobj)}: landing view '${priv._landing_view}' ` +
+                `on screen under the '${target}' url (${href}): following the url`);
+            set_landing_view(gobj, target);
+            return 0;
+        }
         window.location.hash = href;   /*  push; route drives the switch  */
         return 0;
     }
@@ -2217,9 +2228,25 @@ function ac_set_landing_view(gobj, event, kw, src)
  ************************************************************/
 function ac_back_to_topics(gobj, event, kw, src)
 {
+    /*  With host routes the landing is a POSITION, so Back GOES there, the
+     *  way the toggle does, and the route drives the switch.
+     *
+     *  It used to paint the landing it remembered and tell the host "no
+     *  topic", which the host turns into the BARE route -- always the
+     *  cards. After a click on a node of the SCHEMA landing that left the
+     *  schema on screen under a cards url, and from then on the toggle
+     *  navigated to the url the page already had: no route change came and
+     *  the button did nothing. There was no way out of the schema.  */
+    let routes = gobj_read_attr(gobj, "landing_routes");
+    let href = is_object(routes) ? routes[gobj.priv._landing_view] : null;
+    if(href && typeof window !== "undefined") {
+        window.location.hash = href;   /*  push; route drives the switch  */
+        return 0;
+    }
+
+    /*  Legacy: no routes. Paint it here, and tell the host the topic
+     *  segment is gone so a reload re-lands on the grid.  */
     show_topics_landing(gobj);
-    /*  Tell the host the topic segment is gone so a reload re-lands on the
-     *  grid (empty topic ⇒ the host drops the <topic> from the URL). */
     gobj_publish_event(gobj, "EV_TOPIC_SELECTED", {topic: ""});
     return 0;
 }

package/src/yui_graph_camera.js

@@ -171,9 +171,15 @@ export function yui_graph_camera_behaviors()
  *   element that must scroll by itself (a popover) stops the
  *   wheel before it gets here.
  *
+ *   `opts.selector` narrows it to the wheels whose target is
+ *   inside an element that matches, e.g. the root class of the
+ *   cards. A graph that puts other DOM in its container -- its
+ *   own toolbars, a legend -- passes one, so a wheel over those
+ *   is left to them instead of scrolling the graph.
+ *
  *   Returns the function that removes the listener.
  ************************************************************/
-export function yui_graph_forward_wheel(graph, $host)
+export function yui_graph_forward_wheel(graph, $host, opts = {})
 {
     if(!graph || !$host) {
         return () => {};
@@ -188,6 +194,9 @@ export function yui_graph_forward_wheel(graph, $host)
         if(!dom || e.target === dom) {
             return;
         }
+        if(opts.selector && !(e.target instanceof Element && e.target.closest(opts.selector))) {
+            return;     /*  not over a card: that DOM keeps its own wheel  */
+        }
         e.preventDefault();
         e.stopPropagation();
         dom.dispatchEvent(new WheelEvent("wheel", {