@yuneta/gobj-ui 7.21.1 → 7.23.0

package/dist/gobj-ui.es.js

@@ -9468,6 +9468,12 @@ function ensure_drag_canvas_patch() {
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$11 = "C_YUI_JSON_GRAPH";
+var FOLD_SWALLOWED_EVENTS = [
+	"pointerdown",
+	"pointerup",
+	"mousedown",
+	"click"
+];
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -9487,7 +9493,15 @@ var PRIVATE_DATA$11 = {
 	theme: null,
 	theme_observer: null,
 	resize_observer: null,
-	_resize_raf: 0
+	_resize_raf: 0,
+	search: "",
+	collapsed: null,
+	match_count: 0,
+	find_timer: null,
+	fold_listener: null,
+	$find_input: null,
+	$find_result: null,
+	$find_count: null
 };
 var __gclass__$11 = null;
 var __layout_registered__$1 = false;
@@ -9556,6 +9570,8 @@ function type_color(type, dark) {
 ***************************************************************/
 function mt_create$11(gobj) {
 	let priv = gobj.priv;
+	priv.collapsed = /* @__PURE__ */ new Set();
+	priv.search = "";
 	priv.canvas_id = "json-canvas-" + clean_name(gobj_name(gobj));
 	gobj_write_str_attr(gobj, "canvas_id", priv.canvas_id);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
@@ -9585,6 +9601,10 @@ function mt_stop$11(gobj) {}
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$11(gobj) {
+	if (gobj.priv.find_timer) {
+		clearTimeout(gobj.priv.find_timer);
+		gobj.priv.find_timer = null;
+	}
 	let priv = gobj.priv;
 	if (priv.theme_observer) {
 		priv.theme_observer.disconnect();
@@ -9641,25 +9661,118 @@ function build_ui$10(gobj) {
 		]]
 	]);
 	gobj_write_attr(gobj, "$container", $container);
+	let $mount = $container.querySelector("#" + priv.canvas_id);
+	if ($mount) {
+		priv.fold_listener = function(evt) {
+			let $handle = evt.target && evt.target.closest ? evt.target.closest("[data-fold-path]") : null;
+			if (!$handle) return;
+			evt.stopPropagation();
+			evt.preventDefault();
+			if (evt.type !== "click") return;
+			gobj_send_event(gobj, "EV_TOGGLE_FOLD", { path: $handle.getAttribute("data-fold-path") }, gobj);
+		};
+		for (let type of FOLD_SWALLOWED_EVENTS) $mount.addEventListener(type, priv.fold_listener, true);
+	} else log_error(`${gobj_short_name(gobj)}: no canvas mount, fold handles are dead`);
+	priv.$find_input = $container.querySelector(".JSON_GRAPH_FIND_INPUT");
+	priv.$find_result = $container.querySelector(".JSON_GRAPH_FIND_RESULT");
+	priv.$find_count = $container.querySelector(".JSON_GRAPH_FIND_COUNT");
 	refresh_language($container, t);
 }
 /************************************************************
 *   Destroy UI
 ************************************************************/
 function destroy_ui$6(gobj) {
+	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
+	if (priv.fold_listener) {
+		let $mount = $container ? $container.querySelector("#" + priv.canvas_id) : null;
+		if ($mount) for (let type of FOLD_SWALLOWED_EVENTS) $mount.removeEventListener(type, priv.fold_listener, true);
+		priv.fold_listener = null;
+	}
 	if ($container) {
 		if ($container.parentNode) $container.parentNode.removeChild($container);
 		gobj_write_attr(gobj, "$container", null);
 	}
 }
 /************************************************************
+*   One fold button.  `open` rotates the chevron to the open
+*   state, mirroring the per-node toggle of the lazy tree.
+************************************************************/
+function graph_fold_button(gobj, event_name, label_key, open) {
+	let icon_style = "font-size:1.5em; color:inherit;" + (open ? " transform: rotate(90deg);" : "");
+	return [
+		"button",
+		{
+			class: `button ${event_name}`,
+			type: "button",
+			style: {
+				height: gobj_read_attr(gobj, "wide"),
+				width: "2.5em"
+			},
+			title: t(label_key),
+			"data-i18n-title": label_key,
+			"aria-label": t(label_key),
+			"data-i18n-aria-label": label_key
+		},
+		["i", {
+			style: icon_style,
+			class: "yi-chevron-right"
+		}],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, event_name, {}, gobj);
+		} }
+	];
+}
+/************************************************************
 *   Toolbar
 ************************************************************/
 function make_toolbar$3(gobj) {
-	gobj.priv;
+	let priv = gobj.priv;
 	let toolbar_wide = gobj_read_attr(gobj, "wide");
-	let left_items = [];
+	let left_items = [[
+		"div",
+		{
+			class: "JSON_GRAPH_FIND control has-icons-left",
+			style: "margin-right:.5rem; max-width:12rem; min-width:7rem;"
+		},
+		[["input", {
+			class: "JSON_GRAPH_FIND_INPUT input",
+			type: "text",
+			placeholder: t("search"),
+			"data-i18n-placeholder": "search",
+			"aria-label": t("search"),
+			"data-i18n-aria-label": "search"
+		}], [
+			"span",
+			{ class: "icon is-left" },
+			[["i", { class: "yi-magnifying-glass" }]]
+		]],
+		{ 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);
+		} }
+	], [
+		"div",
+		{
+			class: "JSON_GRAPH_FIND_RESULT is-hidden",
+			style: "display:flex; align-items:center; gap:.3rem; margin-right:.5rem; font-size:.85rem;"
+		},
+		[[
+			"span",
+			{ class: "JSON_GRAPH_FIND_COUNT" },
+			""
+		], [
+			"span",
+			{ i18n: "matches" },
+			"matches"
+		]]
+	]];
 	let center_items = [];
 	for (let item of [
 		[
@@ -9717,6 +9830,7 @@ function make_toolbar$3(gobj) {
 			} }
 		]);
 	}
+	let right_items = [graph_fold_button(gobj, "EV_EXPAND_ALL", "expand all", true), graph_fold_button(gobj, "EV_COLLAPSE_ALL", "collapse all", false)];
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -9731,7 +9845,7 @@ function make_toolbar$3(gobj) {
 		[
 			"div",
 			{ class: "yui-horizontal-toolbar-section right" },
-			[]
+			right_items
 		]
 	]);
 	refresh_language($toolbar, t);
@@ -9782,7 +9896,7 @@ function build_graph$3(gobj) {
 /************************************************************
 *  Build cell value HTML (matching old mx_json_viewer colors)
 ************************************************************/
-function build_cell_html(key, value, type, dark) {
+function build_cell_html(key, value, type, dark, matched) {
 	let color = type_color(type, dark);
 	let key_color = json_card_style(GROUP_COLORS.dict, dark).key;
 	let display_value = "";
@@ -9807,7 +9921,48 @@ function build_cell_html(key, value, type, dark) {
 			break;
 		default: display_value = String(value);
 	}
-	return `<span style="color:${key_color}">• ${escapeHtml(String(key))}: </span><span style="color:${color}">${display_value}</span>`;
+	let row = `<span style="color:${key_color}">• ${escapeHtml(String(key))}: </span><span style="color:${color}">${display_value}</span>`;
+	if (matched) row = `<span style="background:${dark ? "#7a5d00" : "#ffe082"}; border-radius:2px; padding:0 2px;">${row}</span>`;
+	return row;
+}
+/************************************************************
+*  The per-node fold handle, drawn in the card's header.
+*
+*  Only a card with a BRANCH gets one — a leaf has nothing to
+*  fold, and a handle that does nothing is worse than none.
+*  It carries the path in `data-fold-path`, which is what the
+*  delegated listener in build_ui reads; the card is an
+*  innerHTML string, so there is no other way to hang a
+*  handler on it.
+*
+*  Folded it shows the glyph AND the count of branches hidden
+*  under it; open, just the glyph.  No word, no title: a word
+*  inside this string could carry no i18n key.
+************************************************************/
+function fold_toggle_html(path, foldable, folded, branches) {
+	if (!foldable) return `<span style="width:1.1em; flex:0 0 auto;"></span>`;
+	let glyph = folded ? "&#9656;" : "&#9662;";
+	let text = folded ? `${glyph} ${branches}` : glyph;
+	return `<span data-fold-path="${escapeHtml(path)}" style="flex:0 0 auto; cursor:pointer; user-select:none; padding:0 .2em; min-width:1.1em; text-align:left;">${text}</span>`;
+}
+/************************************************************
+*  Does this key/value pair match the find term?
+*
+*  Scalars are matched on what the card SHOWS.  A complex value
+*  is not: its contents are a card of their own and match there,
+*  so matching the `{3}` summary too would light up every
+*  ancestor of every hit.
+************************************************************/
+function cell_matches(key, value, type, needle) {
+	if (empty_string(needle)) return false;
+	if (String(key).toLowerCase().includes(needle)) return true;
+	switch (type) {
+		case "string":
+		case "number":
+		case "boolean": return String(value).toLowerCase().includes(needle);
+		case "null": return "null".includes(needle);
+		default: return false;
+	}
 }
 /************************************************************
 *  Get JSON type string
@@ -9853,12 +10008,21 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 	let is_dict = is_object(kw);
 	let is_list = is_array(kw);
 	if (!is_dict && !is_list) return null;
+	let priv = gobj.priv;
+	let needle = priv.search || "";
 	let dark = yui_is_dark();
 	let lines = [];
 	let pending_complex = [];
+	let card_matched = false;
 	let entries = is_dict ? Object.entries(kw) : kw.map((v, i) => [i, v]);
 	for (let [key, value] of entries) {
-		let html = build_cell_html(key, value, get_json_type(value), dark);
+		let type = get_json_type(value);
+		let matched = cell_matches(key, value, type, needle);
+		if (matched) {
+			card_matched = true;
+			priv.match_count++;
+		}
+		let html = build_cell_html(key, value, type, dark, matched);
 		lines.push(html);
 		if (is_object(value) && json_object_size(value) > 0 || is_array(value) && value.length > 0) pending_complex.push({
 			key,
@@ -9866,14 +10030,18 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 		});
 	}
 	let label = get_group_label(path) || (is_dict ? "{}" : "[]");
+	let foldable = pending_complex.length > 0;
+	let folded = foldable && priv.collapsed.has(path);
 	let colors = json_card_style(is_dict ? GROUP_COLORS.dict : GROUP_COLORS.list, dark);
+	let border_color = card_matched ? dark ? "#ffb300" : "#ff8f00" : colors.border;
+	let border_width = card_matched ? 2 : 1;
 	let content_html = lines.map((line) => `<div style="font-family:monospace; font-size:13px; padding:1px 6px; white-space:nowrap;">${line}</div>`).join("");
 	let min_width = Math.max(180, label.length * 9);
 	let node_html = `
 <div style="
     min-width: ${min_width}px;
     background: ${colors.bg};
-    border: 1px ${is_dict ? "dashed" : "solid"} ${colors.border};
+    border: ${border_width}px ${is_dict ? "dashed" : "solid"} ${border_color};
     border-radius: ${is_dict ? "6px" : "0"};
     opacity: 0.9;
     overflow: hidden;
@@ -9884,8 +10052,10 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
         font-weight: bold;
         font-size: 12px;
         padding: 3px 8px;
-        text-align: center;
-    ">${escapeHtml(label)}</div>
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    ">${fold_toggle_html(path, foldable, folded, pending_complex.length)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
     ${content_html}
 </div>`;
 	let node = {
@@ -9911,6 +10081,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 			lineWidth: 1
 		}
 	});
+	if (folded) return group_id;
 	for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, group_id);
 	return group_id;
 }
@@ -9927,6 +10098,7 @@ function load_json(gobj) {
 	let path = gobj_read_str_attr(gobj, "path") || "`";
 	if (empty_string(path)) path = "`";
 	priv.node_counter = 0;
+	priv.match_count = 0;
 	let nodes = [];
 	let edges = [];
 	build_json_nodes(gobj, path, json, nodes, edges, null);
@@ -9943,6 +10115,42 @@ function load_json(gobj) {
 	}
 }
 /************************************************************
+*  Every path that HAS a branch to fold, in the same recursion
+*  build_json_nodes uses — so "collapse all" can never name a
+*  card that does not exist.  The root is excluded: folding it
+*  would leave an empty canvas.
+************************************************************/
+function collect_foldable_paths(value, path, out, is_root) {
+	let is_dict = is_object(value);
+	let is_list = is_array(value);
+	if (!is_dict && !is_list) return false;
+	let has_branch = false;
+	let entries = is_dict ? Object.entries(value) : value.map((v, i) => [i, v]);
+	for (let [key, child] of entries) if (is_object(child) && json_object_size(child) > 0 || is_array(child) && child.length > 0) {
+		has_branch = true;
+		collect_foldable_paths(child, add_segment(path, key), out, false);
+	}
+	if (has_branch && !is_root) out.push(path);
+	return has_branch;
+}
+/************************************************************
+*  Show the find count, or hide the chip when there is no
+*  term.  Zero is a RESULT and must show: a graph that did not
+*  move looks the same whether nothing matched or the match
+*  was already on screen.
+************************************************************/
+function update_find_result(gobj) {
+	let priv = gobj.priv;
+	if (!priv.$find_result || !priv.$find_count) return;
+	if (empty_string(priv.search)) {
+		priv.$find_result.classList.add("is-hidden");
+		priv.$find_count.textContent = "";
+		return;
+	}
+	priv.$find_count.textContent = String(priv.match_count);
+	priv.$find_result.classList.remove("is-hidden");
+}
+/************************************************************
 *  Clear and reload.
 *      {preserve_view: true}
 *          keep the current zoom and translate (no fitView) —
@@ -10064,6 +10272,70 @@ function ac_refresh$5(gobj, event, kw, src) {
 }
 /************************************************************
 *  {theme: "dark"|"light"} — the app switched theme.
+*  EV_TOGGLE_FOLD { path } — fold or unfold ONE card.
+*
+*  The camera does not move: folding one branch is a local
+*  edit of the picture, and refitting the whole graph for it
+*  would throw away where the reader was looking.  The toolbar
+*  pair, which changes everything at once, does refit.
+************************************************************/
+function ac_toggle_fold(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let path = kw && kw.path || "";
+	if (empty_string(path)) {
+		log_error(`${gobj_short_name(gobj)}: EV_TOGGLE_FOLD with no path`);
+		return -1;
+	}
+	if (priv.collapsed.has(path)) priv.collapsed.delete(path);
+	else priv.collapsed.add(path);
+	refresh_json(gobj, { preserve_view: true });
+	update_find_result(gobj);
+	return 0;
+}
+/************************************************************
+*  EV_FIND_NODES { text }
+*
+*  The camera does NOT move: a find is a way of reading what is
+*  already on screen, and a viewport that jumps on every
+*  keystroke is unusable.  The count says whether there is
+*  anything to look for elsewhere.
+************************************************************/
+function ac_find_nodes$2(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);
+	return 0;
+}
+/************************************************************
+*  EV_EXPAND_ALL
+************************************************************/
+function ac_expand_all$2(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.collapsed.size === 0) return 0;
+	priv.collapsed.clear();
+	refresh_json(gobj);
+	update_find_result(gobj);
+	return 0;
+}
+/************************************************************
+*  EV_COLLAPSE_ALL — fold every card but the root.
+************************************************************/
+function ac_collapse_all$2(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let json_data = gobj_read_attr(gobj, "json_data");
+	if (!json_data) return 0;
+	let paths = [];
+	let path = gobj_read_str_attr(gobj, "path") || "`";
+	if (empty_string(path)) path = "`";
+	collect_foldable_paths(json_data, path, paths, true);
+	priv.collapsed = new Set(paths);
+	refresh_json(gobj);
+	update_find_result(gobj);
+	return 0;
+}
+/************************************************************
+*
 ************************************************************/
 function ac_theme$3(gobj, event, kw, src) {
 	let priv = gobj.priv;
@@ -10204,6 +10476,26 @@ function create_gclass$11(gclass_name) {
 			ac_refresh$5,
 			null
 		],
+		[
+			"EV_FIND_NODES",
+			ac_find_nodes$2,
+			null
+		],
+		[
+			"EV_TOGGLE_FOLD",
+			ac_toggle_fold,
+			null
+		],
+		[
+			"EV_EXPAND_ALL",
+			ac_expand_all$2,
+			null
+		],
+		[
+			"EV_COLLAPSE_ALL",
+			ac_collapse_all$2,
+			null
+		],
 		[
 			"EV_THEME",
 			ac_theme$3,
@@ -10253,6 +10545,10 @@ function create_gclass$11(gclass_name) {
 	const event_types = [
 		["EV_LOAD_DATA", 0],
 		["EV_REFRESH", 0],
+		["EV_FIND_NODES", 0],
+		["EV_TOGGLE_FOLD", 0],
+		["EV_EXPAND_ALL", 0],
+		["EV_COLLAPSE_ALL", 0],
 		["EV_THEME", 0],
 		["EV_ZOOM_IN", 0],
 		["EV_ZOOM_OUT", 0],
@@ -11454,11 +11750,20 @@ function ac_set_view_mode(gobj, event, kw, src) {
 /************************************************************
 *   EV_JSON_ITEM_CLICKED — from the hosted graph child.
 *
-*   Republished under this gclass's own name so the host has ONE
-*   contract and never has to know the child exists.
+*   It STOPS here, and that is deliberate.  7.21.0 republished
+*   it "so the host has one contract", which got the framework
+*   backwards: this viewer is a CHILD of its host and subscribes
+*   it to everything it publishes, so a new output event is a
+*   new MANDATORY declaration in every host's FSM.  None of the
+*   six that mount this viewer asked for node clicks, and every
+*   one of them answered a click on a graph card with
+*   "Event NOT DEFINED in state".
+*
+*   A host that wants node clicks mounts C_YUI_JSON_GRAPH
+*   itself — that gclass publishes them, and a host that mounts
+*   it has declared them.
 ************************************************************/
 function ac_json_item_clicked(gobj, event, kw, src) {
-	gobj_publish_event(gobj, "EV_JSON_ITEM_CLICKED", kw);
 	return 0;
 }
 /************************************************************
@@ -11631,7 +11936,7 @@ function create_gclass$10(gclass_name) {
 		["EV_COLLAPSE_ALL", 0],
 		["EV_COPY_ALL", 0],
 		["EV_SET_VIEW_MODE", 0],
-		["EV_JSON_ITEM_CLICKED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
+		["EV_JSON_ITEM_CLICKED", 0],
 		["EV_LANGUAGE_CHANGED", 0],
 		["EV_REFRESH", 0],
 		["EV_SHOW", 0],

package/package.json

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

package/src/c_yui_json.css

@@ -47,28 +47,34 @@
 }
 
 /*
- *  Who YIELDS when the toolbar runs out of room.  The search box does:
- *  it grows to `max-width` when there is space and shrinks to nothing
- *  when there is not, while the buttons keep their size.  A narrow
- *  search box still accepts what you type; a button pushed past the
- *  edge can only be reached by scrolling the toolbar, and the view
- *  switch is the last control that should be hiding.
+ *  Who YIELDS when the toolbar runs out of room — and how far.
  *
- *  Measured at 390px: without this the search took 294 of 320 visible
- *  pixels and every button sat outside.
+ *  The search box yields, and the buttons keep their size: a button
+ *  pushed past the edge is harder to reach than a narrower input.  But
+ *  it yields down to a FLOOR, not to nothing.  Letting it shrink freely
+ *  did make everything fit on a phone, and the result was worse than
+ *  the overflow it cured: the box collapsed to 58px — the magnifier and
+ *  no room to read what you typed — and, because nothing overflowed any
+ *  more, `yui_toolbar` stopped offering its scroll arrows, so the row
+ *  had no way to show you anything else either.
+ *
+ *  With the floor the toolbar overflows again on a narrow screen, which
+ *  is the state yui_toolbar is built for: the container is
+ *  `overflow-x: auto` and the arrows appear.
  */
-.C_YUI_JSON .yui-horizontal-toolbar-section.left {
-    flex: 1 1 auto;
-    min-width: 0;
+/*  Neither section shrinks below its content.  With `min-width: 0` here
+ *  the left section shrank to 70px while the search box inside it kept
+ *  its floor — so the input was painted UNDERNEATH the buttons, and the
+ *  container, whose own children all fitted, reported no overflow to
+ *  scroll.  Sized to content, the container overflows honestly. */
+.C_YUI_JSON .yui-horizontal-toolbar-section.left,
+.C_YUI_JSON .yui-horizontal-toolbar-section.right {
+    flex: 0 0 auto;
 }
 
 .C_YUI_JSON .JSON_SEARCH_CONTROL {
     flex: 1 1 auto;
-    min-width: 0;
-}
-
-.C_YUI_JSON .yui-horizontal-toolbar-section.right {
-    flex: 0 0 auto;
+    min-width: 11rem;
 }
 
 .C_YUI_JSON .JSON_TREE {

package/src/c_yui_json.js

@@ -1175,12 +1175,21 @@ function ac_set_view_mode(gobj, event, kw, src)
 /************************************************************
  *   EV_JSON_ITEM_CLICKED — from the hosted graph child.
  *
- *   Republished under this gclass's own name so the host has ONE
- *   contract and never has to know the child exists.
+ *   It STOPS here, and that is deliberate.  7.21.0 republished
+ *   it "so the host has one contract", which got the framework
+ *   backwards: this viewer is a CHILD of its host and subscribes
+ *   it to everything it publishes, so a new output event is a
+ *   new MANDATORY declaration in every host's FSM.  None of the
+ *   six that mount this viewer asked for node clicks, and every
+ *   one of them answered a click on a graph card with
+ *   "Event NOT DEFINED in state".
+ *
+ *   A host that wants node clicks mounts C_YUI_JSON_GRAPH
+ *   itself — that gclass publishes them, and a host that mounts
+ *   it has declared them.
  ************************************************************/
 function ac_json_item_clicked(gobj, event, kw, src)
 {
-    gobj_publish_event(gobj, "EV_JSON_ITEM_CLICKED", kw);
     return 0;
 }
 
@@ -1307,7 +1316,7 @@ function create_gclass(gclass_name)
         ["EV_COLLAPSE_ALL",     0],
         ["EV_COPY_ALL",         0],
         ["EV_SET_VIEW_MODE",    0],
-        ["EV_JSON_ITEM_CLICKED", event_flag_t.EVF_OUTPUT_EVENT|event_flag_t.EVF_NO_WARN_SUBS],
+        ["EV_JSON_ITEM_CLICKED", 0],
         ["EV_LANGUAGE_CHANGED", 0],
         ["EV_REFRESH",          0],
         ["EV_SHOW",             0],