@yuneta/gobj-ui 7.23.157 → 7.23.158

package/README.md

@@ -1254,23 +1254,38 @@ construction rather than by a check in twenty places.
 ### Finding a node in the graph
 
 `C_YUI_TREEDB_GRAPH` carries a find box in the middle of its toolbar. It
-matches the term against the node's **label**, its id and its topic name, puts
-every match in the same amber `active` state the topic focus uses, and centres
-the viewport on them.
-
-Two details that are not decoration:
-
+matches the term against the node's **label**, its id and its topic name, and
+puts every match **on screen** in the same amber `active` state the topic focus
+uses. It changes nothing else: no group is opened, no layout runs, the camera
+does not move. Emptying the box takes the amber off and leaves the graph
+exactly as it was.
+
+Details that are not decoration:
+
+- it **only looks** (since `7.23.158`). It used to search the whole treedb and
+  unfold a page of the matches it found, so every keystroke re-laid the graph
+  out, and the groups it opened stayed open when the box was cleared. Opening
+  up to a topic is the legend's focus button, which still searches the whole
+  treedb and unfolds what it needs.
+- the term **stays live**. It is repainted after every change of what is on
+  screen (a group opened by hand, a fold level, a refresh, a hidden topic), so
+  newly shown matches arrive lit and the count follows the screen.
+- **Enter** centres the next lit card, **Shift+Enter** the previous one, in
+  reading order (top to bottom, then left to right). That is the one camera
+  move of the find, and the reader asks for it. The count then reads `k/N`.
 - it matches the **label**, not only the id. On a topic keyed by `rowid`,
   `uuid` or `qualified` the id is a counter or a path and the name a human
   knows the record by lives in a secondary key — the same reason `node_label()`
   exists.
-- it **says how many** it found. A graph that did not move looks identical
-  whether nothing matched or the only match was already on screen, so the count
-  is shown next to the box (hidden while the box is empty; a typed term that
-  matches nothing shows `0`, which is an answer).
+- it **says how many** it found, and how many more it did NOT light:
+  `12 matches (+513 not shown, +40 in hidden topics)`. A graph with no amber
+  looks identical whether nothing matched or the matches are folded away, so
+  the count is shown next to the box (hidden while the box is empty; a typed
+  term that matches nothing shows `0`, which is an answer).
 
 The find and the topic focus **share the highlight**: starting one clears the
-other. Two amber sets at once would say nothing about either.
+other (a topic focus also empties the box). Two amber sets at once would say
+nothing about either.
 
 The highlight is painted **into the card's own html**, not with G6's `active`
 element state. That state is an amber `stroke` + `halo`, both properties of a
@@ -1281,9 +1296,12 @@ changes are repainted, and a theme switch carries the highlight across (it
 rebuilds every card, and rebuilding them without it would clear what is on
 screen).
 
-Wiring: the box sends `EV_FIND_NODES {text}` to the view, which forwards it to
-`C_G6_NODES_TREE`; the graph answers `EV_FIND_RESULT {term, matches}`, which the
-view declares like every other event its child publishes.
+Wiring: the box sends `EV_FIND_NODES {text}` to the view, and Enter sends
+`EV_FIND_NEXT {back}`; the view forwards both to `C_G6_NODES_TREE`. The graph
+answers `EV_FIND_RESULT {term, matches, folded_matches, hidden_matches,
+current}`, which the view declares like every other event its child publishes.
+Consumer i18n keys: `matches` (counted), `not shown`, `hidden topics`,
+`find on screen` (the box's title and name).
 
 ### The graph opens FOLDED, like a JSON viewer
 

package/dist/gobj-ui.cjs.js

@@ -56720,8 +56720,9 @@ var PRIVATE_DATA$4 = {
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_focus_all: false,
-	_find_hidden_matches: 0,
-	_pending_find: null,
+	_find_term: "",
+	_find_current: "",
+	_find_found: null,
 	_layout_asked: "",
 	_nodes_total: 0,
 	_nodes_placed: 0,
@@ -58676,6 +58677,14 @@ function graph_focus_topic(gobj, topic, reveal_all) {
 	}
 	let model = priv._fold_model;
 	let state = priv._fold_state;
+	if ((0, _yuneta_gobj_js.empty_string)(topic) && priv._find_term) {
+		priv._focus_topic = null;
+		return;
+	}
+	if (!(0, _yuneta_gobj_js.empty_string)(topic)) {
+		priv._find_term = "";
+		priv._find_current = "";
+	}
 	let keys = [];
 	if (!(0, _yuneta_gobj_js.empty_string)(topic)) {
 		for (let node of model.nodes.values()) if (node.topic_name === topic) keys.push(node.key);
@@ -58691,17 +58700,17 @@ function graph_focus_topic(gobj, topic, reveal_all) {
 	}
 	priv._focus_topic = topic || null;
 	reconcile_fold(gobj, {}).then(() => {
-		apply_focus_ids(gobj, keys, "focus topic");
+		apply_focus_ids(gobj, keys, "focus topic", true);
 	});
 }
 /************************************************************
-*  Paint the highlight on these records (by model key) and put
-*  the first of them in the middle. Shared by the find and the
-*  topic focus, after the reconcile that brought them on screen.
-*  Keys that are still off screen are skipped: a match beyond the
-*  page a reveal opened is counted, not painted.
+*  Paint the highlight on these records (by model key) and, with
+*  `center`, put the first of them in the middle. Shared by the
+*  find and the topic focus. Keys that are not on screen are
+*  skipped: a match beyond the page a reveal opened is counted,
+*  not painted.
 ************************************************************/
-function apply_focus_ids(gobj, keys, what) {
+function apply_focus_ids(gobj, keys, what, center) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	if (!graph) return;
@@ -58726,7 +58735,7 @@ function apply_focus_ids(gobj, keys, what) {
 	try {
 		if (typeof graph.setElementState === "function") graph.setElementState(states);
 		apply_node_highlight(gobj, prev_ids, ids);
-		if (ids.length) yui_graph_center_on(graph, ids[0]);
+		if (center && ids.length) yui_graph_center_on(graph, ids[0]);
 	} catch (e) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: ${what} apply failed: ${e}`);
 	}
@@ -58737,61 +58746,139 @@ function node_id_of_key(gobj, key) {
 	return build_node_name(gobj, key.slice(0, i), key.slice(i + 1));
 }
 /************************************************************
-*  Find the nodes whose name, id or topic contains `term`, highlight
-*  them with the same amber 'active' state the topic focus uses, and
-*  centre the viewport on them. Returns how many matched, which is the
-*  half the toolbar needs: a search that finds nothing must SAY so,
-*  because a graph that did not move is also what a graph looks like
-*  when the match is off-screen.
+*  The find box: highlight the cards ON SCREEN whose name, id or
+*  topic contains `term`, and change nothing else -- no group is
+*  opened, no layout runs, the camera does not move. The graph the
+*  reader arranged is the graph they are searching; emptying the
+*  box takes the amber off and leaves it exactly as it was.
+*
+*  It used to search the whole treedb and unfold a page of what it
+*  found, which re-laid the graph out on every keystroke and left
+*  the unfolded groups behind when the box was cleared. Opening up
+*  to a topic is the legend's focus (graph_focus_topic); this only
+*  LOOKS.
+*
+*  The term is kept and repainted after every reconcile (see
+*  reconcile_fold_now): a group opened by hand shows its matches
+*  already lit, and the count follows what is on screen.
 *
 *  It shares the highlight slot with graph_focus_topic on purpose —
-*  two amber sets at once would say nothing about either. An empty
-*  term clears it. Matching reads the node's LABEL and not only its
-*  id: on a topic keyed by rowid or by a qualified path, the id is a
-*  counter and the name a human knows is elsewhere (see node_label).
+*  two amber sets at once would say nothing about either. Matching
+*  reads the node's LABEL and not only its id: on a topic keyed by
+*  rowid or by a qualified path, the id is a counter and the name a
+*  human knows is elsewhere (see node_label).
 ************************************************************/
 function graph_find_nodes(gobj, term) {
 	let priv = gobj.priv;
-	if (!priv.graph || !priv.graph_rendered || !priv._fold_model) {
-		priv._pending_find = term;
-		return 0;
+	let next = (0, _yuneta_gobj_js.empty_string)(term) ? "" : String(term);
+	let was = priv._find_term;
+	priv._find_term = next;
+	priv._find_current = "";
+	priv._find_found = null;
+	let ready = priv.graph && priv.graph_rendered && priv._fold_model;
+	if (!next) {
+		if (was && ready && !priv._focus_topic) apply_focus_ids(gobj, [], "find", false);
+		publish_find_result(gobj);
+		return;
 	}
+	priv._focus_topic = null;
+	if (!ready) return;
+	refresh_find(gobj, fold_visible_set(priv._fold_model, priv._fold_state));
+}
+/************************************************************
+*  Repaint the find's highlight over the `visible` set and publish
+*  the count. A no-op while no term is live, so the topic focus
+*  keeps the slot.
+************************************************************/
+function refresh_find(gobj, visible) {
+	let priv = gobj.priv;
+	if (!priv._find_term) return;
+	let found = find_matches(gobj, priv._find_term, visible);
+	apply_focus_ids(gobj, found.keys, "find", false);
+	if (priv._find_current && (priv._focus_ids || []).indexOf(priv._find_current) < 0) priv._find_current = "";
+	priv._find_found = found;
+	publish_find_result(gobj);
+}
+/************************************************************
+*  The records matching `term`: the keys ON SCREEN, and how many
+*  more match that are NOT -- folded away in the fold model, or in
+*  a hidden topic. Those two are only counted: "0" alone would read
+*  as "does not exist" when it means "is not on screen".
+************************************************************/
+function find_matches(gobj, term, visible) {
+	let priv = gobj.priv;
 	let model = priv._fold_model;
-	let state = priv._fold_state;
-	let keys = [];
-	let hidden_matches = 0;
-	if (!(0, _yuneta_gobj_js.empty_string)(term)) {
-		let needle = String(term).toLowerCase();
-		let matches = (topic_name, record) => {
-			let label = "";
-			try {
-				label = node_label(priv.descs[topic_name] || {}, record) || "";
-			} catch (e) {
-				label = "";
-			}
-			return [
-				label,
-				record.id,
-				topic_name
-			].filter((v) => typeof v === "string").join(" ").toLowerCase().includes(needle);
-		};
-		for (let node of model.nodes.values()) if (matches(node.topic_name, node.record || {})) keys.push(node.key);
-		for (let topic_name of model.hidden) for (let record of priv.records[topic_name] || []) if ((0, _yuneta_gobj_js.is_object)(record) && matches(topic_name, record)) hidden_matches++;
+	let found = {
+		keys: [],
+		folded: 0,
+		hidden: 0
+	};
+	if (!model || (0, _yuneta_gobj_js.empty_string)(term)) return found;
+	let needle = String(term).toLowerCase();
+	let matches = (topic_name, record) => {
+		let label = "";
+		try {
+			label = node_label(priv.descs[topic_name] || {}, record) || "";
+		} catch (e) {
+			label = "";
+		}
+		return [
+			label,
+			record.id,
+			topic_name
+		].filter((v) => typeof v === "string").join(" ").toLowerCase().includes(needle);
+	};
+	for (let node of model.nodes.values()) if (matches(node.topic_name, node.record || {})) {
+		if (visible.has(node.key)) found.keys.push(node.key);
+		else found.folded++;
 	}
-	priv._find_hidden_matches = hidden_matches;
-	let visible = fold_visible_set(model, state);
-	let revealed = 0;
-	for (let key of keys) {
-		if (visible.has(key)) continue;
-		if (revealed >= state.page_size) break;
-		fold_reveal(model, state, key);
-		revealed++;
+	for (let topic_name of model.hidden) for (let record of priv.records[topic_name] || []) if ((0, _yuneta_gobj_js.is_object)(record) && matches(topic_name, record)) found.hidden++;
+	return found;
+}
+/************************************************************
+*  The lit cards in reading order: top to bottom, then left to
+*  right. The order Enter walks, and the one the "k/N" counts in.
+************************************************************/
+function find_order(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let ids = (priv._focus_ids || []).slice();
+	if (!graph) return ids;
+	let pos = {};
+	for (let id of ids) {
+		let p = null;
+		try {
+			p = graph.getElementPosition(id);
+		} catch (e) {
+			p = null;
+		}
+		pos[id] = p || [0, 0];
 	}
-	priv._focus_topic = null;
-	reconcile_fold(gobj, {}).then(() => {
-		apply_focus_ids(gobj, keys, "find");
-	});
-	return keys.length;
+	ids.sort((a, b) => pos[a][1] - pos[b][1] || pos[a][0] - pos[b][0]);
+	return ids;
+}
+/************************************************************
+*  Enter in the find box: centre the next lit card (`back`: the
+*  previous one). The one camera move of the find, and the reader
+*  asks for it: the highlight alone cannot take anybody to a match
+*  that is outside the frame.
+************************************************************/
+function graph_find_step(gobj, back) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (!graph || !priv._find_term) return;
+	let ids = find_order(gobj);
+	if (ids.length === 0) return;
+	let i = ids.indexOf(priv._find_current);
+	if (i < 0) i = back ? ids.length - 1 : 0;
+	else i = (i + (back ? ids.length - 1 : 1)) % ids.length;
+	priv._find_current = ids[i];
+	try {
+		yui_graph_center_on(graph, ids[i]);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: find step failed: ${e}`);
+	}
+	publish_find_result(gobj);
 }
 async function graph_zoom_in(gobj) {
 	let graph = gobj.priv.graph;
@@ -62683,6 +62770,7 @@ async function reconcile_fold_now(gobj, opts) {
 		history_resume(gobj);
 	}
 	publish_legend_state(gobj, visible);
+	refresh_find(gobj, visible);
 	return changed;
 }
 /************************************************************
@@ -63064,11 +63152,6 @@ function ac_load_data(gobj, event, kw, src) {
 				priv._pending_focus_all = false;
 				graph_focus_topic(gobj, ft, all);
 			}
-			if (priv._pending_find !== null) {
-				let term = priv._pending_find;
-				priv._pending_find = null;
-				publish_find_result(gobj, term, graph_find_nodes(gobj, term));
-			}
 		});
 	}
 	return 0;
@@ -63637,23 +63720,45 @@ function ac_node_dblclick(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
-*  Tell whoever asked how many nodes the term matched. The count is
-*  the answer to the question the box asks; without it "nothing moved"
-*  and "nothing matched" look the same.
+*  Tell whoever asked how many cards the term lit. The count is the
+*  answer to the question the box asks; without it "nothing lit" and
+*  "nothing matched" look the same.
+*
+*      matches         lit cards (on screen)
+*      folded_matches  matches folded away, not on screen
+*      hidden_matches  matches in hidden topics
+*      current         1-based place of the card Enter centred on
+*                      among the lit ones (reading order), 0 = none
 ************************************************************/
-function publish_find_result(gobj, term, matches) {
+function publish_find_result(gobj) {
+	let priv = gobj.priv;
+	let found = priv._find_found || {
+		keys: [],
+		folded: 0,
+		hidden: 0
+	};
+	let current = 0;
+	if (priv._find_term && priv._find_current) current = find_order(gobj).indexOf(priv._find_current) + 1;
 	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_FIND_RESULT", {
-		term,
-		matches,
-		hidden_matches: gobj.priv._find_hidden_matches || 0
+		term: priv._find_term,
+		matches: priv._find_term ? (priv._focus_ids || []).length : 0,
+		folded_matches: found.folded,
+		hidden_matches: found.hidden,
+		current
 	});
 }
 /************************************************************
 *
 ************************************************************/
 function ac_find_nodes$1(gobj, event, kw, src) {
-	let term = kw && kw.text || "";
-	publish_find_result(gobj, term, graph_find_nodes(gobj, term));
+	graph_find_nodes(gobj, kw && kw.text || "");
+	return 0;
+}
+/************************************************************
+*  Enter in the find box: {back: true} for Shift+Enter.
+************************************************************/
+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) {
@@ -64114,6 +64219,11 @@ function create_gclass$4(gclass_name) {
 			ac_find_nodes$1,
 			null
 		],
+		[
+			"EV_FIND_NEXT",
+			ac_find_next$1,
+			null
+		],
 		[
 			"EV_TOGGLE_FOLD",
 			ac_toggle_fold,
@@ -64269,6 +64379,7 @@ function create_gclass$4(gclass_name) {
 		["EV_ZOOM_SELECTION", 0],
 		["EV_FOCUS_TOPIC", 0],
 		["EV_FIND_NODES", 0],
+		["EV_FIND_NEXT", 0],
 		["EV_FIND_RESULT", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_LAYOUT_AUTOSET", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_CAMERA_CHANGED", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
@@ -65061,19 +65172,34 @@ function make_toolbar(gobj) {
 			type: "text",
 			placeholder: (0, i18next.t)("search"),
 			"data-i18n-placeholder": "search",
-			"aria-label": (0, i18next.t)("search"),
-			"data-i18n-aria-label": "search"
+			title: (0, i18next.t)("find on screen"),
+			"data-i18n-title": "find on screen",
+			"aria-label": (0, i18next.t)("find on screen"),
+			"data-i18n-aria-label": "find on screen"
 		},
 		[],
-		{ input: (evt) => {
-			evt.stopPropagation();
-			let text = evt.target.value.trim();
-			if (priv.find_timer) clearTimeout(priv.find_timer);
-			priv.find_timer = setTimeout(function() {
-				priv.find_timer = null;
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text }, gobj);
-			}, 250);
-		} }
+		{
+			input: (evt) => {
+				evt.stopPropagation();
+				let text = evt.target.value.trim();
+				if (priv.find_timer) clearTimeout(priv.find_timer);
+				priv.find_timer = setTimeout(function() {
+					priv.find_timer = null;
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text }, gobj);
+				}, 250);
+			},
+			keydown: (evt) => {
+				if (evt.key !== "Enter" || evt.isComposing) return;
+				evt.preventDefault();
+				evt.stopPropagation();
+				if (priv.find_timer) {
+					clearTimeout(priv.find_timer);
+					priv.find_timer = null;
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text: evt.target.value.trim() }, gobj);
+				}
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NEXT", { back: evt.shiftKey }, gobj);
+			}
+		}
 	]);
 	let $find_control = (0, _yuneta_gobj_js.createElement2)([
 		"div",
@@ -66402,6 +66528,14 @@ function ac_find_nodes(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  Enter in the find box: forward the step down to the graph child.
+************************************************************/
+function ac_find_next(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.gobj_nodes_tree) (0, _yuneta_gobj_js.gobj_send_event)(priv.gobj_nodes_tree, "EV_FIND_NEXT", { back: !!(kw && kw.back) }, gobj);
+	return 0;
+}
+/************************************************************
 *  One press of the fold stepper (EV_EXPAND_LEVEL /
 *  EV_COLLAPSE_LEVEL): the level moves by one, is SAVED (the
 *  reader's, per treedb) and reaches the G6 child, which owns
@@ -66485,12 +66619,33 @@ function refresh_find_result(gobj) {
 		return 0;
 	}
 	let text = (0, i18next.t)("matches", { count: kw && kw.matches || 0 });
+	let current = kw && kw.current || 0;
+	if (current > 0) text = `${current}/${text}`;
+	let extra = [];
+	let folded = kw && kw.folded_matches || 0;
+	if (folded > 0) extra.push(`+${folded} ${(0, i18next.t)("not shown")}`);
 	let hidden = kw && kw.hidden_matches || 0;
-	if (hidden > 0) text += ` (+${hidden} ${(0, i18next.t)("hidden topics")})`;
+	if (hidden > 0) extra.push(`+${hidden} ${(0, i18next.t)("hidden topics")}`);
+	if (extra.length) text += ` (${extra.join(", ")})`;
 	$count.textContent = text;
 	$result.classList.remove("is-hidden");
 	return 0;
 }
+function clear_find_box(gobj) {
+	let priv = gobj.priv;
+	if (priv.find_timer) {
+		clearTimeout(priv.find_timer);
+		priv.find_timer = null;
+	}
+	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	let $input = $container ? $container.querySelector(".GRAPH_FIND_INPUT") : null;
+	if ($input) {
+		$input.value = "";
+		refresh_clear($input);
+	}
+	priv._find_result = null;
+	refresh_find_result(gobj);
+}
 function ac_set_focus_topic(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	priv.focus_topic = kw && kw.topic || "";
@@ -66501,6 +66656,7 @@ function ac_set_focus_topic(gobj, event, kw, src) {
 			set_legend_list_attr(gobj, "hidden_topics", "EV_SET_HIDDEN_TOPICS", hidden);
 		}
 	}
+	if (priv.focus_topic) clear_find_box(gobj);
 	if (priv.gobj_nodes_tree) (0, _yuneta_gobj_js.gobj_send_event)(priv.gobj_nodes_tree, "EV_FOCUS_TOPIC", {
 		topic: priv.focus_topic,
 		reveal: kw && kw.reveal || "page"
@@ -66678,6 +66834,11 @@ function create_gclass$3(gclass_name) {
 			ac_find_nodes,
 			null
 		],
+		[
+			"EV_FIND_NEXT",
+			ac_find_next,
+			null
+		],
 		[
 			"EV_EXPAND_LEVEL",
 			ac_fold_level_step,
@@ -66776,6 +66937,7 @@ function create_gclass$3(gclass_name) {
 		["EV_SET_OPERATION_MODE", 0],
 		["EV_SET_FOCUS_TOPIC", 0],
 		["EV_FIND_NODES", 0],
+		["EV_FIND_NEXT", 0],
 		["EV_EXPAND_LEVEL", 0],
 		["EV_COLLAPSE_LEVEL", 0],
 		["EV_SET_NODE_MODE", 0],