@yuneta/gobj-ui 7.23.38 → 7.23.40

package/dist/gobj-ui.es.js

@@ -10916,10 +10916,6 @@ function make_toolbar$5(gobj) {
 			"span",
 			{ class: "JSON_GRAPH_FIND_COUNT" },
 			""
-		], [
-			"span",
-			{ i18n: "matches" },
-			"matches"
 		]]
 	]]);
 	let center_items = [];
@@ -11437,7 +11433,7 @@ function collect_foldable_paths(value, path, out, is_root) {
 *  move looks the same whether nothing matched or the match
 *  was already on screen.
 ************************************************************/
-function update_find_result(gobj) {
+function update_find_result$1(gobj) {
 	let priv = gobj.priv;
 	if (!priv.$find_result || !priv.$find_count) return;
 	if (empty_string(priv.search)) {
@@ -11445,7 +11441,7 @@ function update_find_result(gobj) {
 		priv.$find_count.textContent = "";
 		return;
 	}
-	priv.$find_count.textContent = String(priv.match_count);
+	priv.$find_count.textContent = t("matches", { count: priv.match_count });
 	priv.$find_result.classList.remove("is-hidden");
 }
 /************************************************************
@@ -11702,7 +11698,7 @@ function ac_change_layout$2(gobj, event, kw, src) {
 		edge: { type: cfg.edge_type }
 	});
 	refresh_json(gobj);
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11731,7 +11727,7 @@ function ac_toggle_fold(gobj, event, kw, src) {
 	}
 	priv.pending_keep = keep_of(gobj, kw && kw.keep || path);
 	refresh_json(gobj, { preserve_view: true });
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11742,11 +11738,11 @@ function ac_toggle_fold(gobj, event, kw, src) {
 *  keystroke is unusable.  The count says whether there is
 *  anything to look for elsewhere.
 ************************************************************/
-function ac_find_nodes$2(gobj, event, kw, src) {
+function ac_find_nodes$3(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	priv.search = (kw && kw.text || "").trim().toLowerCase();
 	refresh_json(gobj, { preserve_view: true });
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11758,7 +11754,7 @@ function ac_expand_all$2(gobj, event, kw, src) {
 	priv.collapsed.clear();
 	priv.reserved.clear();
 	refresh_json(gobj);
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -11775,7 +11771,7 @@ function ac_collapse_all$2(gobj, event, kw, src) {
 	priv.collapsed = new Set(paths);
 	priv.reserved.clear();
 	refresh_json(gobj);
-	update_find_result(gobj);
+	update_find_result$1(gobj);
 	return 0;
 }
 /************************************************************
@@ -12049,7 +12045,7 @@ function create_gclass$13(gclass_name) {
 		],
 		[
 			"EV_FIND_NODES",
-			ac_find_nodes$2,
+			ac_find_nodes$3,
 			null
 		],
 		[
@@ -16127,6 +16123,21 @@ function node_status(d) {
 	if (!d || !d.running) return "stopped";
 	return d.playing ? "playing" : "running";
 }
+var STATUS_SYMBOLS = {
+	"playing": "▶︎",
+	"running": "‖",
+	"stopped": "■︎"
+};
+var DISABLED_SYMBOL = "⊘";
+/************************************************************
+*  The symbol of a node's status, which is what the reader
+*  actually sees first. `disabled` overrides the rest: a
+*  disabled gobj is not going to run whatever it is doing now.
+************************************************************/
+function node_status_symbol(d) {
+	if (d && d.disabled) return DISABLED_SYMBOL;
+	return STATUS_SYMBOLS[node_status(d)] || STATUS_SYMBOLS.stopped;
+}
 /************************************************************
 *  The i18n key of the status, which is NOT the status itself:
 *  a gobj that runs and does not play is PAUSED to the reader,
@@ -16255,7 +16266,7 @@ function node_labels(t) {
 			full_name: t("full name"),
 			role: t("role"),
 			status: t("status"),
-			state: t("state"),
+			fsm_state: t("fsm state"),
 			disabled: t("disabled"),
 			parent: t("parent"),
 			bottom_gobj: t("bottom gobj"),
@@ -16284,8 +16295,8 @@ function node_info_rows(d, t) {
 	rows.push([f.name, d.name || "—"]);
 	if (d.fullname && d.fullname !== d.shortname) rows.push([f.full_name, d.fullname]);
 	rows.push([f.role, L.role[role_i18n_key(node_role(d))]]);
-	rows.push([f.status, L.status[node_status_key(d)]]);
-	rows.push([f.state, d.state || "—"]);
+	rows.push([f.status, node_status_symbol(d) + " " + L.status[node_status_key(d)]]);
+	rows.push([f.fsm_state, d.state || "—"]);
 	if (d.disabled) rows.push([f.disabled, f.yes]);
 	if (d.parent) rows.push([f.parent, d.parent]);
 	if (d.bottom_gobj) rows.push([f.bottom_gobj, d.bottom_gobj]);
@@ -16767,6 +16778,12 @@ var PRIVATE_DATA$9 = {
 	theme: null,
 	theme_observer: null,
 	$layout_select: null,
+	search: "",
+	match_count: 0,
+	find_timer: null,
+	$find_input: null,
+	$find_result: null,
+	$find_count: null,
 	$popover: null,
 	$popover_title: null,
 	$popover_body: null,
@@ -16912,6 +16929,7 @@ var NODE_SIZES = {
 /***************************************************************
 *  Shared card typography.
 ***************************************************************/
+var FIND_MATCH_COLOR = "#D9A23F";
 var GT_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
 /***************************************************************
 *  Theme-aware card palette derived from the role colour.
@@ -17284,11 +17302,103 @@ function destroy_ui$4(gobj) {
 /************************************************************
 *   Toolbar
 ************************************************************/
+/************************************************************
+*  The find box and its count.
+*
+*  A tree of a real yuno is a hundred cards, and the only way
+*  to locate one was to read them all. The COUNT is what makes
+*  it honest: a graph that did not move looks the same whether
+*  nothing matched or the match was already on screen -- the
+*  same reason the JSON graph carries one, and the same
+*  drawing, because the two sit in the same console.
+************************************************************/
+function make_find_items(gobj) {
+	let priv = gobj.priv;
+	let $find_input = createElement2([
+		"input",
+		{
+			class: "GOBJ_TREE_FIND_INPUT input",
+			type: "text",
+			placeholder: t("search"),
+			"data-i18n-placeholder": "search",
+			"aria-label": t("search"),
+			"data-i18n-aria-label": "search"
+		},
+		[],
+		{ 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);
+		} }
+	]);
+	let $find_control = createElement2([
+		"div",
+		{
+			class: "GOBJ_TREE_FIND control has-icons-left",
+			style: "margin-left:.5rem; margin-right:.5rem; max-width:12rem; min-width:7rem;"
+		},
+		[$find_input, [
+			"span",
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
+		]]
+	]);
+	attach_clear($find_control, $find_input);
+	priv.$find_input = $find_input;
+	return [$find_control, [
+		"div",
+		{
+			class: "GOBJ_TREE_FIND_RESULT is-hidden",
+			style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+		},
+		[[
+			"span",
+			{ class: "GOBJ_TREE_FIND_COUNT" },
+			""
+		]]
+	]];
+}
+/************************************************************
+*  Does this node answer the current find term?
+*
+*  What a reader types is a gclass, a name or a state -- the
+*  three things a card shows. The full name is searched too,
+*  because it is what the popover shows and what a log line
+*  carries.
+************************************************************/
+function node_matches(d, term) {
+	if (!term) return false;
+	return [
+		d.gclass,
+		d.name,
+		d.fullname,
+		d.state
+	].filter((x) => typeof x === "string").join(" ").toLowerCase().indexOf(term) >= 0;
+}
+/************************************************************
+*  Repaint the count chip. Hidden while nothing is typed:
+*  "0 matches" beside an empty box says nothing.
+************************************************************/
+function update_find_result(gobj) {
+	let priv = gobj.priv;
+	if (!priv.$find_result || !priv.$find_count) return;
+	if (!priv.search) {
+		priv.$find_result.classList.add("is-hidden");
+		priv.$find_count.textContent = "";
+		return;
+	}
+	priv.$find_count.textContent = t("matches", { count: priv.match_count });
+	priv.$find_result.classList.remove("is-hidden");
+}
 function make_toolbar$1(gobj) {
 	let priv = gobj.priv;
 	let toolbar_wide = gobj_read_attr(gobj, "wide");
 	let current_layout = gobj_read_str_attr(gobj, "layout");
-	let left_items = yui_graph_fold_items(gobj, toolbar_wide);
+	let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat(make_find_items(gobj));
 	let center_items = [];
 	let right_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
@@ -17339,6 +17449,8 @@ function make_toolbar$1(gobj) {
 			right_items
 		]
 	]);
+	priv.$find_result = $toolbar.querySelector(".GOBJ_TREE_FIND_RESULT");
+	priv.$find_count = $toolbar.querySelector(".GOBJ_TREE_FIND_COUNT");
 	refresh_language($toolbar, t);
 	return $toolbar;
 }
@@ -17514,26 +17626,32 @@ function render_toggle_html(node_id, collapsed, num_children, cs) {
 /************************************************************
 *  HTML for the status pill: what the gobj is DOING.
 *
-*  A dot plus a word, and the word is dropped in the compact
-*  card where there is no room for it -- the colour still
-*  carries it, and the `title` says it in full either way.
+*  A SYMBOL plus a word, and the word is dropped in the
+*  compact card where there is no room for it.
+*
+*  The symbol carries the state on its own, which a dot never
+*  did: a dot has one shape, so telling running from stopped
+*  meant telling green from red at 10 pixels -- and stopped is
+*  the one that has to be seen. Play, pause and stop are also
+*  the framework's own three verbs, not a borrowed metaphor.
 ************************************************************/
 function render_status_html(d, ss, labels, with_label) {
 	let full = d.disabled ? labels.field.disabled : labels.status[node_status_key(d)] || node_status_key(d);
 	let label = d.disabled ? labels.field.disabled : labels.status_short[node_status(d)] || node_status(d);
+	let symbol = node_status_symbol(d);
 	if (!with_label) return `<span title="${escapeHtml(full)}" style="
             flex: 0 0 auto;
-            width: 10px; height: 10px; border-radius: 50%;
-            background: ${ss.dot};
-            box-shadow: 0 0 0 2px ${ss.bg};
             margin-left: 6px;
-        "></span>`;
+            color: ${ss.dot};
+            font-size: 11px;
+            line-height: 1;
+        ">${escapeHtml(symbol)}</span>`;
 	return `<span title="${escapeHtml(full)}" style="
         flex: 0 0 auto;
         display: inline-flex;
         align-items: center;
         gap: 4px;
-        padding: 1px 7px 1px 5px;
+        padding: 1px 7px 1px 6px;
         background: ${ss.bg};
         color: ${ss.fg};
         border-radius: 9px;
@@ -17541,7 +17659,8 @@ function render_status_html(d, ss, labels, with_label) {
         font-weight: 700;
         line-height: 1.45;
         white-space: nowrap;
-    "><span style="width:7px; height:7px; border-radius:50%; background:${ss.dot};"></span>${escapeHtml(label)}</span>`;
+    "><span style="color:${ss.dot}; font-size:11px; line-height:1;"
+    >${escapeHtml(symbol)}</span>${escapeHtml(label)}</span>`;
 }
 /************************************************************
 *  HTML for the badges: what the gobj IS, besides its colour.
@@ -17588,6 +17707,12 @@ function build_gobj_nodes(gobj, d, nodes, edges, parent_id, compact, labels) {
 	let height = size.h;
 	let border_width = category === "yuno" || category === "service" ? 2 : 1;
 	let border_style = d.disabled ? "dashed" : "solid";
+	if (node_matches(d, priv.search)) {
+		priv.match_count++;
+		border_width = 3;
+		border_style = "solid";
+		cs = Object.assign({}, cs, { border: FIND_MATCH_COLOR });
+	}
 	let children = d.children || [];
 	let num_children = children.length;
 	let has_children = num_children > 0;
@@ -17712,6 +17837,7 @@ function load_tree(gobj) {
 	}
 	let layout_cfg = get_layout_cfg(gobj_read_str_attr(gobj, "layout"));
 	let labels = node_labels(t);
+	priv.match_count = 0;
 	let anchor = priv.pending_anchor || null;
 	let preserve_view = !!priv.pending_preserve_view;
 	priv.pending_anchor = null;
@@ -18141,6 +18267,23 @@ var GobjLanesHLayout = class extends BaseLayout {
 /************************************************************
 *
 ************************************************************/
+/************************************************************
+*  EV_FIND_NODES {text}
+*
+*  The cards carry the highlight in their own markup (an html
+*  node paints no G6 state), so finding is a REBUILD -- which
+*  is also why the box is rate-limited. The view is preserved:
+*  a reader who typed a letter did not ask to be moved.
+************************************************************/
+function ac_find_nodes$2(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let text = String(kw && kw.text || "").trim().toLowerCase();
+	if (text === priv.search) return 0;
+	priv.search = text;
+	refresh_tree(gobj, { preserve_view: true });
+	update_find_result(gobj);
+	return 0;
+}
 function ac_refresh$3(gobj, event, kw, src) {
 	save_view_state(gobj);
 	refresh_tree(gobj);
@@ -18494,6 +18637,7 @@ function ac_language_changed$3(gobj, event, kw, src) {
 	if ($container) refresh_language($container, t);
 	hide_popover(gobj);
 	refresh_tree(gobj);
+	update_find_result(gobj);
 	return 0;
 }
 /***************************
@@ -18514,6 +18658,7 @@ function create_gclass$9(gclass_name) {
 		return -1;
 	}
 	__gclass__$9 = gclass_create(gclass_name, [
+		["EV_FIND_NODES", 0],
 		["EV_REFRESH", 0],
 		["EV_THEME", 0],
 		["EV_CHANGE_LAYOUT", 0],
@@ -18534,6 +18679,11 @@ function create_gclass$9(gclass_name) {
 		["EV_GCLASS_CLOSED", 0],
 		["EV_LANGUAGE_CHANGED", 0]
 	], [["ST_IDLE", [
+		[
+			"EV_FIND_NODES",
+			ac_find_nodes$2,
+			null
+		],
 		[
 			"EV_REFRESH",
 			ac_refresh$3,
@@ -20002,11 +20152,7 @@ function build_body(shell, t) {
 	let $count = createElement2([
 		"span",
 		{ class: "ROUTEMAP_COUNT is-size-7 has-text-grey is-hidden" },
-		[$count_n, [
-			"span",
-			{ i18n: "matches" },
-			"matches"
-		]]
+		[$count_n]
 	]);
 	let $refs_input = createElement2(["input", {
 		class: "ROUTEMAP_REFS_INPUT",
@@ -20044,7 +20190,7 @@ function build_body(shell, t) {
 		if ($root_li) filter_li($root_li, q, false, __show_refs__);
 		if (q === "") $count.classList.add("is-hidden");
 		else {
-			$count_n.textContent = $tree.querySelectorAll(".ROUTEMAP_MATCH").length;
+			$count_n.textContent = t("matches", { count: $tree.querySelectorAll(".ROUTEMAP_MATCH").length });
 			$count.classList.remove("is-hidden");
 		}
 	};
@@ -57978,10 +58124,6 @@ function make_toolbar(gobj) {
 					"span",
 					{ class: "GRAPH_FIND_COUNT" },
 					""
-				], [
-					"span",
-					{ i18n: "matches" },
-					"matches"
 				]]
 			]]
 		],
@@ -59037,7 +59179,7 @@ function ac_find_result(gobj, event, kw, src) {
 		$count.textContent = "";
 		return 0;
 	}
-	$count.textContent = String(kw && kw.matches || 0);
+	$count.textContent = t("matches", { count: kw && kw.matches || 0 });
 	$result.classList.remove("is-hidden");
 	return 0;
 }

package/package.json

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