@yuneta/gobj-ui 7.23.157 → 7.23.158

package/dist/gobj-ui.es.js

@@ -56715,8 +56715,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,
@@ -58671,6 +58672,14 @@ function graph_focus_topic(gobj, topic, reveal_all) {
 	}
 	let model = priv._fold_model;
 	let state = priv._fold_state;
+	if (empty_string(topic) && priv._find_term) {
+		priv._focus_topic = null;
+		return;
+	}
+	if (!empty_string(topic)) {
+		priv._find_term = "";
+		priv._find_current = "";
+	}
 	let keys = [];
 	if (!empty_string(topic)) {
 		for (let node of model.nodes.values()) if (node.topic_name === topic) keys.push(node.key);
@@ -58686,17 +58695,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;
@@ -58721,7 +58730,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) {
 		log_error(`${gobj_short_name(gobj)}: ${what} apply failed: ${e}`);
 	}
@@ -58732,61 +58741,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 = 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 (!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 (is_object(record) && matches(topic_name, record)) hidden_matches++;
+	let found = {
+		keys: [],
+		folded: 0,
+		hidden: 0
+	};
+	if (!model || 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 (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) {
+		log_error(`${gobj_short_name(gobj)}: find step failed: ${e}`);
+	}
+	publish_find_result(gobj);
 }
 async function graph_zoom_in(gobj) {
 	let graph = gobj.priv.graph;
@@ -62678,6 +62765,7 @@ async function reconcile_fold_now(gobj, opts) {
 		history_resume(gobj);
 	}
 	publish_legend_state(gobj, visible);
+	refresh_find(gobj, visible);
 	return changed;
 }
 /************************************************************
@@ -63059,11 +63147,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;
@@ -63632,23 +63715,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;
 	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) {
@@ -64109,6 +64214,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,
@@ -64264,6 +64374,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", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_LAYOUT_AUTOSET", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_CAMERA_CHANGED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
@@ -65056,19 +65167,34 @@ function make_toolbar(gobj) {
 			type: "text",
 			placeholder: t("search"),
 			"data-i18n-placeholder": "search",
-			"aria-label": t("search"),
-			"data-i18n-aria-label": "search"
+			title: t("find on screen"),
+			"data-i18n-title": "find on screen",
+			"aria-label": 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;
-				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;
+					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;
+					gobj_send_event(gobj, "EV_FIND_NODES", { text: evt.target.value.trim() }, gobj);
+				}
+				gobj_send_event(gobj, "EV_FIND_NEXT", { back: evt.shiftKey }, gobj);
+			}
+		}
 	]);
 	let $find_control = createElement2([
 		"div",
@@ -66397,6 +66523,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) 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
@@ -66480,12 +66614,33 @@ function refresh_find_result(gobj) {
 		return 0;
 	}
 	let text = 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} ${t("not shown")}`);
 	let hidden = kw && kw.hidden_matches || 0;
-	if (hidden > 0) text += ` (+${hidden} ${t("hidden topics")})`;
+	if (hidden > 0) extra.push(`+${hidden} ${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 = 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 || "";
@@ -66496,6 +66651,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) gobj_send_event(priv.gobj_nodes_tree, "EV_FOCUS_TOPIC", {
 		topic: priv.focus_topic,
 		reveal: kw && kw.reveal || "page"
@@ -66673,6 +66829,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,
@@ -66771,6 +66932,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],

package/package.json

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