@yuneta/gobj-ui 7.23.162 → 7.23.164

package/README.md

@@ -861,6 +861,19 @@ C_YUI_TREEDB_TOPIC_WITH_FORM                      C_YUI_TREEDB_TOPICS
 "which topic" dialog. All three are input events; `EV_OPEN_LINKED` is the one
 output event, and `C_YUI_TREEDB_TOPICS` declares it.
 
+**The table loads a hook as its count** (since `7.23.163`). Its three loads
+ask with `hook_size`, so a hook arrives as `[{"size": N}]` and not as the ids
+of its children, which nothing in the table reads any more:
+
+```js
+const TABLE_READ_OPTIONS = {list_dict: true, hook_size: true};
+```
+
+The node events still carry whole hooks, so after a live update a row can
+hold the list again; the cell and a delete's question count either shape. The
+search box no longer finds a parent row by the id of one of its children: to
+find what hangs from a row, click its hook.
+
 ### Read-only treedbs: `readonly`
 
 `C_YUI_TREEDB_TOPICS` and `C_YUI_TREEDB_GRAPH` take a **`readonly`** attr; the
@@ -1003,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", {
@@ -23057,6 +23064,10 @@ function nodes_answer(data) {
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$6 = "C_YUI_TREEDB_TOPICS";
+var TABLE_READ_OPTIONS = {
+	list_dict: true,
+	hook_size: true
+};
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -24089,7 +24100,7 @@ function get_nodes$1(gobj, topic_name) {
 	subscribe_treedb$1(gobj, topic_name);
 	let gobj_topic_form = get_gobj_formtable(gobj, topic_name);
 	if (gobj_topic_form && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj_topic_form, "with_remote_paging")) return;
-	treedb_nodes$1(gobj, treedb_name, topic_name, { list_dict: true });
+	treedb_nodes$1(gobj, treedb_name, topic_name, Object.assign({}, TABLE_READ_OPTIONS));
 }
 /************************************************************
 *
@@ -24672,7 +24683,7 @@ function ac_request_page(gobj, event, kw, src) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: a page request with no topic or no id`);
 		return -1;
 	}
-	if (treedb_nodes$1(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "treedb_name"), topic_name, { list_dict: true }, {
+	if (treedb_nodes$1(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "treedb_name"), topic_name, Object.assign({}, TABLE_READ_OPTIONS), {
 		from: kw.from,
 		limit: kw.limit,
 		req_id: kw.req_id
@@ -24826,7 +24837,8 @@ function ac_refresh_topic(gobj, event, kw, src) {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj_topic_form, "EV_REPULL_PAGE", {}, gobj);
 		return 0;
 	}
-	treedb_nodes$1(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "treedb_name"), kw.topic_name, { list_dict: true });
+	let options = Object.assign({}, TABLE_READ_OPTIONS);
+	treedb_nodes$1(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "treedb_name"), kw.topic_name, options);
 	return 0;
 }
 /********************************************
@@ -57665,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,
@@ -57783,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;
@@ -57892,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", {
@@ -23052,6 +23059,10 @@ function nodes_answer(data) {
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$6 = "C_YUI_TREEDB_TOPICS";
+var TABLE_READ_OPTIONS = {
+	list_dict: true,
+	hook_size: true
+};
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -24084,7 +24095,7 @@ function get_nodes$1(gobj, topic_name) {
 	subscribe_treedb$1(gobj, topic_name);
 	let gobj_topic_form = get_gobj_formtable(gobj, topic_name);
 	if (gobj_topic_form && gobj_read_bool_attr(gobj_topic_form, "with_remote_paging")) return;
-	treedb_nodes$1(gobj, treedb_name, topic_name, { list_dict: true });
+	treedb_nodes$1(gobj, treedb_name, topic_name, Object.assign({}, TABLE_READ_OPTIONS));
 }
 /************************************************************
 *
@@ -24667,7 +24678,7 @@ function ac_request_page(gobj, event, kw, src) {
 		log_error(`${gobj_short_name(gobj)}: a page request with no topic or no id`);
 		return -1;
 	}
-	if (treedb_nodes$1(gobj, gobj_read_str_attr(gobj, "treedb_name"), topic_name, { list_dict: true }, {
+	if (treedb_nodes$1(gobj, gobj_read_str_attr(gobj, "treedb_name"), topic_name, Object.assign({}, TABLE_READ_OPTIONS), {
 		from: kw.from,
 		limit: kw.limit,
 		req_id: kw.req_id
@@ -24821,7 +24832,8 @@ function ac_refresh_topic(gobj, event, kw, src) {
 		gobj_send_event(gobj_topic_form, "EV_REPULL_PAGE", {}, gobj);
 		return 0;
 	}
-	treedb_nodes$1(gobj, gobj_read_str_attr(gobj, "treedb_name"), kw.topic_name, { list_dict: true });
+	let options = Object.assign({}, TABLE_READ_OPTIONS);
+	treedb_nodes$1(gobj, gobj_read_str_attr(gobj, "treedb_name"), kw.topic_name, options);
 	return 0;
 }
 /********************************************
@@ -57660,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,
@@ -57778,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;
@@ -57887,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.162",
+  "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/c_yui_treedb_topics.js

@@ -74,6 +74,21 @@ import {t} from "i18next";
  ***************************************************************/
 const GCLASS_NAME = "C_YUI_TREEDB_TOPICS";
 
+/*
+ *  How a topic TABLE reads its rows. `hook_size`: a hook comes back as
+ *  its COUNT, `[{"size": N}]`, not as the id of every child. The cell
+ *  only ever showed the number, and a click on it opens the child topic
+ *  filtered (EV_OPEN_LINKED) -- so the ids were downloaded for nothing:
+ *  every device id, once per device type, on every load of that topic.
+ *
+ *  Only the table LOADS use it. The writes keep their own options, and
+ *  the node events still carry whole hooks (c_node publishes them with
+ *  `list_dict`, whatever a reader asked for); the cell counts either
+ *  shape (`treedb_hook_data_size`), and so does a delete's question
+ *  (`delete_impact`'s ref_count).
+ */
+const TABLE_READ_OPTIONS = {list_dict: true, hook_size: true};
+
 /***************************************************************
  *              Data
  ***************************************************************/
@@ -1316,9 +1331,7 @@ function get_nodes(gobj, topic_name)
         gobj,
         treedb_name,
         topic_name,
-        {
-            list_dict: true
-        }
+        Object.assign({}, TABLE_READ_OPTIONS)
     );
 }
 
@@ -2371,7 +2384,7 @@ function ac_request_page(gobj, event, kw, src)
         gobj,
         gobj_read_str_attr(gobj, "treedb_name"),
         topic_name,
-        {list_dict: true},
+        Object.assign({}, TABLE_READ_OPTIONS),
         {from: kw.from, limit: kw.limit, req_id: kw.req_id}
     );
 
@@ -2592,9 +2605,7 @@ function ac_refresh_topic(gobj, event, kw, src)
         return 0;
     }
 
-    let options = {
-        list_dict: true
-    };
+    let options = Object.assign({}, TABLE_READ_OPTIONS);
 
     let treedb_name = gobj_read_str_attr(gobj, "treedb_name");
 

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", {