@yuneta/gobj-ui 7.23.38 → 7.23.40

package/README.md

@@ -1381,14 +1381,32 @@ because opening a popover per node to learn it is not reading a tree:
 | On the card | Says |
 |---|---|
 | Colour (border + left bar) | the ROLE: sky = the yuno, emerald = a service, amber = a pure child, pink = a volatil one, violet = a plain child |
-| Status pill | `stopped` / `running` / `playing`, coloured. `running` and `playing` are not the same thing: a gobj that runs and does not play is PAUSED, which is what the popover calls it in full |
+| Status pill | a SYMBOL and, where there is room, the word: `▶` playing, `‖` running but not playing (PAUSED, which is what the popover calls it in full), `■` stopped, `⊘` disabled. The symbol and not only a colour, because a dot has one shape and stopped is the state that has to be seen |
 | Badges | `service`, `pure child`, `volatil child`, `disabled`, `bottom` (it has a bottom gobj), `commands` (its gclass exposes commands) |
 | Its own line | the FSM state |
 | Dashed border, dimmed | disabled — that branch is out of the game |
 
 The popover adds the rest (`full name`, `parent`, `bottom gobj`, `traces`,
 `flags`, how many children a fold is hiding) and shows only the rows that have
-an answer.
+an answer. Its two state rows are `status` and **`fsm state`** — different
+keys on purpose: they used to be `status` and `state`, which every Spanish app
+translated to the same word, so the popover showed *Estado: Parado* directly
+above *Estado: ST_IDLE*.
+
+**The find box** matches gclass, name, full name and FSM state; a match wears
+an amber ring over its role colour (the card still has to say what it IS) and
+the chip counts them, because a graph that did not move looks the same whether
+nothing matched or the match was already on screen. A find is a REBUILD — an
+html node paints no G6 state, so the highlight lives in the card's own markup —
+which is why the box is rate-limited, and why the view is preserved: somebody
+who typed a letter did not ask to be moved.
+
+**A service the app creates is the app's to START.** `c_yuno`'s `mt_play` starts
+only the DEFAULT service, so anything else stays stopped unless its creator
+starts it — and a gclass with no `mt_start` (`C_YUI_WINDOW_MANAGER` builds its
+dock in `mt_create` and runs off events) WORKS stopped, which is how one shipped
+that way in two apps: nothing failed, it just read `!!C_YUI_WINDOW_MANAGER` in
+every trace line and *stopped* in this view.
 
 **It draws DESCRIPTORS, not gobjs** (`gobj_tree_model.js`), which is what lets
 this same view show a **backend** yuno. A descriptor is plain data whose field

package/dist/gobj-ui.cjs.js

@@ -10921,10 +10921,6 @@ function make_toolbar$5(gobj) {
 			"span",
 			{ class: "JSON_GRAPH_FIND_COUNT" },
 			""
-		], [
-			"span",
-			{ i18n: "matches" },
-			"matches"
 		]]
 	]]);
 	let center_items = [];
@@ -11442,7 +11438,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 ((0, _yuneta_gobj_js.empty_string)(priv.search)) {
@@ -11450,7 +11446,7 @@ function update_find_result(gobj) {
 		priv.$find_count.textContent = "";
 		return;
 	}
-	priv.$find_count.textContent = String(priv.match_count);
+	priv.$find_count.textContent = (0, i18next.t)("matches", { count: priv.match_count });
 	priv.$find_result.classList.remove("is-hidden");
 }
 /************************************************************
@@ -11707,7 +11703,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;
 }
 /************************************************************
@@ -11736,7 +11732,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;
 }
 /************************************************************
@@ -11747,11 +11743,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;
 }
 /************************************************************
@@ -11763,7 +11759,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;
 }
 /************************************************************
@@ -11780,7 +11776,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;
 }
 /************************************************************
@@ -12054,7 +12050,7 @@ function create_gclass$13(gclass_name) {
 		],
 		[
 			"EV_FIND_NODES",
-			ac_find_nodes$2,
+			ac_find_nodes$3,
 			null
 		],
 		[
@@ -16132,6 +16128,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,
@@ -16260,7 +16271,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"),
@@ -16289,8 +16300,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]);
@@ -16772,6 +16783,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,
@@ -16917,6 +16934,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.
@@ -17289,11 +17307,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 = (0, _yuneta_gobj_js.createElement2)([
+		"input",
+		{
+			class: "GOBJ_TREE_FIND_INPUT input",
+			type: "text",
+			placeholder: (0, i18next.t)("search"),
+			"data-i18n-placeholder": "search",
+			"aria-label": (0, i18next.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;
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text }, gobj);
+			}, 250);
+		} }
+	]);
+	let $find_control = (0, _yuneta_gobj_js.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 = (0, i18next.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 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "wide");
 	let current_layout = (0, _yuneta_gobj_js.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);
@@ -17344,6 +17454,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");
 	(0, _yuneta_gobj_js.refresh_language)($toolbar, i18next.t);
 	return $toolbar;
 }
@@ -17519,26 +17631,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="${(0, _yuneta_gobj_js.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;
+        ">${(0, _yuneta_gobj_js.escapeHtml)(symbol)}</span>`;
 	return `<span title="${(0, _yuneta_gobj_js.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;
@@ -17546,7 +17664,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>${(0, _yuneta_gobj_js.escapeHtml)(label)}</span>`;
+    "><span style="color:${ss.dot}; font-size:11px; line-height:1;"
+    >${(0, _yuneta_gobj_js.escapeHtml)(symbol)}</span>${(0, _yuneta_gobj_js.escapeHtml)(label)}</span>`;
 }
 /************************************************************
 *  HTML for the badges: what the gobj IS, besides its colour.
@@ -17593,6 +17712,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;
@@ -17717,6 +17842,7 @@ function load_tree(gobj) {
 	}
 	let layout_cfg = get_layout_cfg((0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout"));
 	let labels = node_labels(i18next.t);
+	priv.match_count = 0;
 	let anchor = priv.pending_anchor || null;
 	let preserve_view = !!priv.pending_preserve_view;
 	priv.pending_anchor = null;
@@ -18146,6 +18272,23 @@ var GobjLanesHLayout = class extends _antv_g6.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);
@@ -18499,6 +18642,7 @@ function ac_language_changed$3(gobj, event, kw, src) {
 	if ($container) (0, _yuneta_gobj_js.refresh_language)($container, i18next.t);
 	hide_popover(gobj);
 	refresh_tree(gobj);
+	update_find_result(gobj);
 	return 0;
 }
 /***************************
@@ -18519,6 +18663,7 @@ function create_gclass$9(gclass_name) {
 		return -1;
 	}
 	__gclass__$9 = (0, _yuneta_gobj_js.gclass_create)(gclass_name, [
+		["EV_FIND_NODES", 0],
 		["EV_REFRESH", 0],
 		["EV_THEME", 0],
 		["EV_CHANGE_LAYOUT", 0],
@@ -18539,6 +18684,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,
@@ -20007,11 +20157,7 @@ function build_body(shell, t) {
 	let $count = (0, _yuneta_gobj_js.createElement2)([
 		"span",
 		{ class: "ROUTEMAP_COUNT is-size-7 has-text-grey is-hidden" },
-		[$count_n, [
-			"span",
-			{ i18n: "matches" },
-			"matches"
-		]]
+		[$count_n]
 	]);
 	let $refs_input = (0, _yuneta_gobj_js.createElement2)(["input", {
 		class: "ROUTEMAP_REFS_INPUT",
@@ -20049,7 +20195,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");
 		}
 	};
@@ -57983,10 +58129,6 @@ function make_toolbar(gobj) {
 					"span",
 					{ class: "GRAPH_FIND_COUNT" },
 					""
-				], [
-					"span",
-					{ i18n: "matches" },
-					"matches"
 				]]
 			]]
 		],
@@ -59042,7 +59184,7 @@ function ac_find_result(gobj, event, kw, src) {
 		$count.textContent = "";
 		return 0;
 	}
-	$count.textContent = String(kw && kw.matches || 0);
+	$count.textContent = (0, i18next.t)("matches", { count: kw && kw.matches || 0 });
 	$result.classList.remove("is-hidden");
 	return 0;
 }