@yuneta/gobj-ui 7.23.163 → 7.23.164

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", {
@@ -57670,6 +57677,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 +57796,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 +57909,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", {
@@ -57665,6 +57672,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 +57791,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 +57904,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.164",
   "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/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", {