@yuneta/gobj-ui 7.20.0 → 7.21.0

package/dist/gobj-ui.es.js

@@ -10272,6 +10272,7 @@ function create_gclass$11(gclass_name) {
 *          Register GClass
 ***************************************************************/
 function register_c_yui_json_graph() {
+	if (gclass_find_by_name(GCLASS_NAME$11, false)) return 0;
 	return create_gclass$11(GCLASS_NAME$11);
 }
 /************************************************************
@@ -10472,19 +10473,32 @@ function json_text_dump(root, max_chars) {
 *  Only expanded containers are materialised in the DOM, so the tree
 *  stays bounded no matter how large the source document is.
 *
-*  TWO VIEWS over the same working document, chosen by the `view_mode`
-*  attr ("tree" | "text") and switched from the toolbar: the lazy tree
-*  above, and the raw `JSON.stringify(…, 4)` dump of what is currently
-*  loaded.  The text view is what you reach for to read a document as
-*  it is written, to select a slab of it, or to search it with the
-*  browser's own Ctrl+F; it shows the `__collapsed__` sentinels
-*  verbatim, because that is honestly what the client holds.  The
+*  THREE VIEWS over the same working document, chosen by the
+*  `view_mode` attr ("tree" | "text" | "graph") and switched from the
+*  toolbar.  They answer three different questions:
+*
+*      tree    where is this value, and what is around it — the lazy
+*              view above, the only one that can drill.
+*      text    what does this document SAY, verbatim — for reading it
+*              as written, selecting a slab of it, or searching it with
+*              the browser's own Ctrl+F.
+*      graph   what SHAPE is this — nesting as a hierarchy, drawn by a
+*              hosted C_YUI_JSON_GRAPH child (AntV/G6).
+*
+*  Neither text nor graph is lazy: both show what the client currently
+*  holds, `__collapsed__` sentinels included, because that is honestly
+*  what it has.  Drill in the tree and they grow with it.  The
 *  tree-only controls (search, expand/collapse) hide with the tree.
 *
+*  The graph child is built on FIRST entry into graph mode and not
+*  before: G6 measures its container, so a graph created behind
+*  `is-hidden` comes up 0x0, and a viewer nobody switches to graph
+*  should not pay for a canvas.
+*
 *  DOM is self-describing (UPPER_SNAKE logical classes): JSON_VIEWER /
-*  JSON_TOOLBAR / JSON_SEARCH / JSON_VIEW_MODE / JSON_TREE / JSON_TEXT /
-*  JSON_TEXT_BODY / JSON_ROW / JSON_KEY / JSON_VALUE / JSON_SUMMARY /
-*  JSON_COLLAPSED / JSON_TIME.
+*  JSON_TOOLBAR / JSON_SEARCH / JSON_VIEW_SWITCH / JSON_VIEW_MODE /
+*  JSON_TREE / JSON_TEXT / JSON_TEXT_BODY / JSON_GRAPH / JSON_ROW /
+*  JSON_KEY / JSON_VALUE / JSON_SUMMARY / JSON_COLLAPSED / JSON_TIME.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
@@ -10495,6 +10509,23 @@ function json_text_dump(root, max_chars) {
 var GCLASS_NAME$10 = "C_YUI_JSON";
 var MAX_RENDER_ROWS = 5e3;
 var MAX_TEXT_CHARS = 2e6;
+var VIEWS = [
+	{
+		mode: "tree",
+		icon: "yi-sitemap",
+		key: "tree view"
+	},
+	{
+		mode: "text",
+		icon: "yi-code",
+		key: "text view"
+	},
+	{
+		mode: "graph",
+		icon: "yi-hexagon-nodes",
+		key: "graph view"
+	}
+];
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -10502,7 +10533,7 @@ var attrs_table$10 = [
 	SDATA(data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
 	SDATA(data_type_t.DTP_STRING, "title", 0, "", "Optional header title (i18n key)"),
 	SDATA(data_type_t.DTP_JSON, "json_data", 0, null, "Initial JSON to render (usually already collapsed)"),
-	SDATA(data_type_t.DTP_STRING, "view_mode", 0, "tree", "View: 'tree' (lazy tree) or 'text' (raw JSON dump)"),
+	SDATA(data_type_t.DTP_STRING, "view_mode", 0, "tree", "View: 'tree' (lazy tree), 'text' (raw dump) or 'graph'"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "HTMLElement root, mounted by the parent"),
 	SDATA_END()
 ];
@@ -10515,11 +10546,13 @@ var PRIVATE_DATA$10 = {
 	$tree: null,
 	$text: null,
 	$text_body: null,
+	$graph: null,
+	graph_gobj: null,
 	$search: null,
 	$search_ctl: null,
 	$expand_btn: null,
 	$collapse_btn: null,
-	$mode_btn: null
+	$mode_btns: null
 };
 var __gclass__$10 = null;
 /******************************
@@ -10556,6 +10589,7 @@ function mt_stop$10(gobj) {}
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$10(gobj) {
+	teardown_graph_child(gobj);
 	destroy_ui$5(gobj);
 }
 /***************************
@@ -10594,6 +10628,14 @@ function build_ui$9(gobj) {
 					style: "flex:1 1 auto; min-height:0; overflow:auto;"
 				},
 				[]
+			],
+			[
+				"div",
+				{
+					class: "JSON_GRAPH is-flex-grow-1 is-hidden",
+					style: "flex:1 1 auto; overflow:hidden;"
+				},
+				[]
 			]
 		]
 	]);
@@ -10604,7 +10646,12 @@ function build_ui$9(gobj) {
 	priv.$search_ctl = $container.querySelector(".JSON_SEARCH_CONTROL");
 	priv.$expand_btn = $container.querySelector(".EV_EXPAND_ALL");
 	priv.$collapse_btn = $container.querySelector(".EV_COLLAPSE_ALL");
-	priv.$mode_btn = $container.querySelector(".JSON_VIEW_MODE");
+	priv.$graph = $container.querySelector(".JSON_GRAPH");
+	priv.$mode_btns = /* @__PURE__ */ new Map();
+	VIEWS.forEach(function(v) {
+		let $btn = $container.querySelector(".JSON_VIEW_MODE_" + v.mode.toUpperCase());
+		if ($btn) priv.$mode_btns.set(v.mode, $btn);
+	});
 	refresh_language($container, t);
 }
 /************************************************************
@@ -10620,11 +10667,12 @@ function destroy_ui$5(gobj) {
 	priv.$tree = null;
 	priv.$text = null;
 	priv.$text_body = null;
+	priv.$graph = null;
 	priv.$search = null;
 	priv.$search_ctl = null;
 	priv.$expand_btn = null;
 	priv.$collapse_btn = null;
-	priv.$mode_btn = null;
+	priv.$mode_btns = null;
 }
 /************************************************************
 *   Toolbar: search + tree/text switch + expand-all /
@@ -10636,7 +10684,7 @@ function make_toolbar$2(gobj) {
 	if (title) left_items.push([
 		"span",
 		{
-			class: "JSON_TITLE is-flex is-align-items-center px-2",
+			class: "JSON_TITLE is-flex is-align-items-center px-2 is-hidden-mobile",
 			style: "font-weight:600;",
 			"data-i18n": title
 		},
@@ -10669,7 +10717,7 @@ function make_toolbar$2(gobj) {
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
 	let right_items = [
-		view_mode_button(gobj),
+		view_mode_switch(gobj),
 		icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"),
 		icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"),
 		icon_button(gobj, "yi-copy", "EV_COPY_ALL", "copy json")
@@ -10726,74 +10774,174 @@ function icon_button(gobj, icon, event_name, label_key) {
 	];
 }
 /************************************************************
-*   The tree/text switch.
+*   The view switch: one button per view, the current one marked.
 *
-*   It shows the view it takes you TO — the `code` glyph while the
-*   tree is on screen, the `sitemap` glyph while the text is — and
-*   sends EV_SET_VIEW_MODE with no mode, which the action reads as
-*   "toggle".  apply_view_mode() keeps the icon and its i18n keys in
-*   step with the attr.
+*   Three views do not fit a toggle.  A button that CYCLES cannot be
+*   aimed — reaching the graph from the tree would mean passing
+*   through the text and rebuilding it on the way — so each view gets
+*   its own button and says where it goes.  apply_view_mode() moves
+*   the `is-active` mark.
 ************************************************************/
-function view_mode_button(gobj) {
+function view_mode_switch(gobj) {
 	return [
-		"button",
-		{
-			class: "button JSON_VIEW_MODE",
-			style: "width:2.5em;",
-			title: t("text view"),
-			"data-i18n-title": "text view",
-			"aria-label": t("text view"),
-			"data-i18n-aria-label": "text view"
-		},
-		[[
-			"span",
-			{ class: "icon" },
-			[["i", { class: "yi-code" }]]
-		]],
-		{ click: function(evt) {
-			evt.stopPropagation();
-			gobj_send_event(gobj, "EV_SET_VIEW_MODE", {}, gobj);
-		} }
+		"div",
+		{ class: "buttons has-addons is-flex-wrap-nowrap mb-0 JSON_VIEW_SWITCH" },
+		VIEWS.map(function(v) {
+			let label = view_label(v.mode);
+			return [
+				"button",
+				{
+					class: `button JSON_VIEW_MODE JSON_VIEW_MODE_${v.mode.toUpperCase()}`,
+					type: "button",
+					style: "width:2.5em;",
+					title: label,
+					"data-i18n-title": v.key,
+					"aria-label": label,
+					"data-i18n-aria-label": v.key
+				},
+				[[
+					"span",
+					{ class: "icon" },
+					[["i", { class: v.icon }]]
+				]],
+				{ click: function(evt) {
+					evt.stopPropagation();
+					gobj_send_event(gobj, "EV_SET_VIEW_MODE", { mode: v.mode }, gobj);
+				} }
+			];
+		})
 	];
 }
 /************************************************************
-*   The current view, normalised.  Anything but "text" is the tree.
+*   The label of a view, with every key SPELLED OUT inside t().
+*
+*   Never t(VIEWS[i].key): the apps' validate-locales scans for
+*   t("literal"), so a key reached through a variable is a key it
+*   cannot demand — and i18next answers an undefined key with the key
+*   ITSELF, which renders in lower-case English and never changes
+*   language.  That shipped once already (7.20.0, `tree view`); this
+*   table would have hidden all three.
+************************************************************/
+function view_label(mode) {
+	switch (mode) {
+		case "text": return t("text view");
+		case "graph": return t("graph view");
+		default: return t("tree view");
+	}
+}
+/************************************************************
+*   The current view, normalised.  Anything unknown is the tree.
 ************************************************************/
 function current_view_mode(gobj) {
-	return gobj_read_str_attr(gobj, "view_mode") === "text" ? "text" : "tree";
+	let mode = gobj_read_str_attr(gobj, "view_mode");
+	return VIEWS.some((v) => v.mode === mode) ? mode : "tree";
 }
 /************************************************************
 *   Show the chrome of the current view and hide the other's.
 ************************************************************/
 function apply_view_mode(gobj) {
 	let priv = gobj.priv;
-	let text_mode = current_view_mode(gobj) === "text";
-	if (priv.$tree) priv.$tree.classList.toggle("is-hidden", text_mode);
-	if (priv.$text) priv.$text.classList.toggle("is-hidden", !text_mode);
+	let mode = current_view_mode(gobj);
+	let bodies = {
+		tree: priv.$tree,
+		text: priv.$text,
+		graph: priv.$graph
+	};
+	for (let [m, $el] of Object.entries(bodies)) if ($el) $el.classList.toggle("is-hidden", m !== mode);
 	[
 		priv.$search_ctl,
 		priv.$expand_btn,
 		priv.$collapse_btn
 	].forEach(function($el) {
-		if ($el) $el.classList.toggle("is-hidden", text_mode);
+		if ($el) $el.classList.toggle("is-hidden", mode !== "tree");
 	});
-	if (priv.$mode_btn) {
-		let icon = text_mode ? "yi-sitemap" : "yi-code";
-		let key = text_mode ? "tree view" : "text view";
-		let $i = priv.$mode_btn.querySelector("i");
-		if ($i) $i.className = icon;
-		priv.$mode_btn.setAttribute("data-i18n-title", key);
-		priv.$mode_btn.setAttribute("data-i18n-aria-label", key);
-		priv.$mode_btn.setAttribute("title", t(key));
-		priv.$mode_btn.setAttribute("aria-label", t(key));
+	if (priv.$mode_btns) for (let [m, $btn] of priv.$mode_btns) {
+		$btn.classList.toggle("is-active", m === mode);
+		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
 /************************************************************
 *   Render whichever view is current.
 ************************************************************/
 function render_view(gobj) {
-	if (current_view_mode(gobj) === "text") render_text(gobj);
-	else render_tree(gobj);
+	switch (current_view_mode(gobj)) {
+		case "text":
+			render_text(gobj);
+			break;
+		case "graph":
+			render_graph(gobj);
+			break;
+		default: render_tree(gobj);
+	}
+}
+/************************************************************
+*   Render the graph view.
+*
+*   The C_YUI_JSON_GRAPH child is built HERE, on first entry, and
+*   never in build_ui: G6 sizes itself from its container, and a
+*   container behind `is-hidden` measures 0x0.  By the time this
+*   runs apply_view_mode() has already revealed the body.
+************************************************************/
+function render_graph(gobj) {
+	let priv = gobj.priv;
+	let $graph = priv.$graph;
+	if (!$graph) return;
+	if (priv.root === null || priv.root === void 0) {
+		teardown_graph_child(gobj);
+		$graph.textContent = "";
+		$graph.appendChild(createElement2([
+			"div",
+			{
+				class: "JSON_EMPTY has-text-grey p-3",
+				"data-i18n": "no data"
+			},
+			"no data"
+		]));
+		refresh_language($graph, t);
+		return;
+	}
+	if (!priv.graph_gobj) {
+		$graph.textContent = "";
+		if (!build_graph_child(gobj)) return;
+	}
+	gobj_send_event(priv.graph_gobj, "EV_LOAD_DATA", {
+		data: priv.root,
+		path: gobj_read_str_attr(gobj, "title") || ""
+	}, gobj);
+	gobj_send_event(priv.graph_gobj, "EV_RESIZE", {}, gobj);
+}
+/************************************************************
+*   Build and mount the hosted graph child.  Returns true on
+*   success; every failure path logs.
+************************************************************/
+function build_graph_child(gobj) {
+	let priv = gobj.priv;
+	let graph = gobj_create_pure_child("graph_" + clean_name(gobj_name(gobj)), "C_YUI_JSON_GRAPH", {}, gobj);
+	if (!graph) {
+		log_error(`${gobj_short_name(gobj)}: cannot create the graph viewer`);
+		return false;
+	}
+	let $box = gobj_read_attr(graph, "$container");
+	if (!$box) {
+		log_error(`${gobj_short_name(gobj)}: the graph viewer built no $container`);
+		gobj_destroy(graph);
+		return false;
+	}
+	priv.$graph.appendChild($box);
+	priv.graph_gobj = graph;
+	gobj_start(graph);
+	return true;
+}
+/************************************************************
+*   Destroy the hosted graph child, if any.
+************************************************************/
+function teardown_graph_child(gobj) {
+	let priv = gobj.priv;
+	if (priv.graph_gobj) {
+		if (gobj_is_running(priv.graph_gobj)) gobj_stop(priv.graph_gobj);
+		gobj_destroy(priv.graph_gobj);
+		priv.graph_gobj = null;
+	}
 }
 /************************************************************
 *   Render the text view: the whole loaded document, verbatim.
@@ -11284,23 +11432,36 @@ function ac_copy_all(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
-*   EV_SET_VIEW_MODE { mode } — "tree" | "text".
+*   EV_SET_VIEW_MODE { mode } — "tree" | "text" | "graph".
 *
-*   With no mode it toggles, which is what the toolbar button sends.
+*   With no mode it ADVANCES to the next view in VIEWS order, which
+*   is what the two-view toggle did when the list was two long.  The
+*   toolbar buttons always name their mode.
 ************************************************************/
 function ac_set_view_mode(gobj, event, kw, src) {
 	let mode = kw.mode;
-	if (mode === void 0 || mode === null || mode === "") mode = current_view_mode(gobj) === "text" ? "tree" : "text";
-	else if (mode !== "tree" && mode !== "text") {
+	if (mode === void 0 || mode === null || mode === "") mode = VIEWS[(VIEWS.findIndex((v) => v.mode === current_view_mode(gobj)) + 1) % VIEWS.length].mode;
+	else if (!VIEWS.some((v) => v.mode === mode)) {
 		log_error(`${GCLASS_NAME$10}: unknown view_mode '${mode}'`);
 		return -1;
 	}
+	if (mode === current_view_mode(gobj)) return 0;
 	gobj_write_attr(gobj, "view_mode", mode);
 	apply_view_mode(gobj);
 	render_view(gobj);
 	return 0;
 }
 /************************************************************
+*   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.
+************************************************************/
+function ac_json_item_clicked(gobj, event, kw, src) {
+	gobj_publish_event(gobj, "EV_JSON_ITEM_CLICKED", kw);
+	return 0;
+}
+/************************************************************
 *   EV_LANGUAGE_CHANGED — re-translate chrome + re-render
 ************************************************************/
 function ac_language_changed$3(gobj, event, kw, src) {
@@ -11388,6 +11549,11 @@ function create_gclass$10(gclass_name) {
 			ac_set_json,
 			null
 		],
+		[
+			"EV_JSON_ITEM_CLICKED",
+			ac_json_item_clicked,
+			null
+		],
 		[
 			"EV_SUBTREE_LOADED",
 			ac_subtree_loaded,
@@ -11465,6 +11631,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_LANGUAGE_CHANGED", 0],
 		["EV_REFRESH", 0],
 		["EV_SHOW", 0],
@@ -11480,6 +11647,7 @@ function create_gclass$10(gclass_name) {
 ***************************************************************/
 function register_c_yui_json() {
 	if (gclass_find_by_name(GCLASS_NAME$10, false)) return 0;
+	if (!gclass_find_by_name("C_YUI_JSON_GRAPH", false)) register_c_yui_json_graph();
 	return create_gclass$10(GCLASS_NAME$10);
 }
 //#endregion

package/package.json

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

package/src/c_yui_json.css

@@ -1,7 +1,7 @@
 /***********************************************************************
  *          c_yui_json.css
  *
- *      Styling for C_YUI_JSON (lazy JSON tree viewer + raw text view).
+ *      Styling for C_YUI_JSON (lazy tree + raw text + hosted graph).
  *      Monospace tree, type-coloured leaves, dark-aware.
  *      No transitions/animations by design (lib-yui convention).
  *
@@ -46,6 +46,31 @@
     border-bottom: 1px solid var(--bulma-border-weak, #e0e0e0);
 }
 
+/*
+ *  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.
+ *
+ *  Measured at 390px: without this the search took 294 of 320 visible
+ *  pixels and every button sat outside.
+ */
+.C_YUI_JSON .yui-horizontal-toolbar-section.left {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.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;
+}
+
 .C_YUI_JSON .JSON_TREE {
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
     font-size: 1em;
@@ -188,6 +213,58 @@
     user-select: text;
 }
 
+/*
+ *  Graph view: the hosted C_YUI_JSON_GRAPH fills the body.  No
+ *  overflow here — G6 owns its viewport and pans inside it; a scroller
+ *  on this box would compete with the canvas for the same drag.
+ */
+/*
+ *  The graph body carries a DEFINITE height, and that is the whole
+ *  trick.  The tree and the text push their own height; a canvas
+ *  pushes NOTHING, so in a host that does not constrain the viewer the
+ *  chain of `height:100%` down to G6's container resolved against auto
+ *  and the graph came up 1061x2 — a hairline.
+ *
+ *  It has to be `height`, not `min-height`: a percentage height does
+ *  not resolve against a box whose size comes from a minimum, so
+ *  `min-height` here left the container at 4px (its two borders).
+ *  Measured both ways in the browser.
+ *
+ *  `flex: 1 1 auto` keeps this a FLOOR and not a cage: in a host that
+ *  does constrain the viewer — a modal, a C_YUI_WINDOW — the item
+ *  grows past it and the graph follows the host.
+ */
+.C_YUI_JSON .JSON_GRAPH {
+    height: 24rem;
+}
+
+.C_YUI_JSON .JSON_GRAPH > .C_YUI_JSON_GRAPH {
+    height: 100%;
+}
+
+/*
+ *  The view switch.  Bulma's `.buttons` gives every child a
+ *  margin-bottom for the rows it expects to wrap; this strip never
+ *  wraps, so that margin is only a gap that pushes the toolbar taller.
+ */
+.C_YUI_JSON .JSON_VIEW_SWITCH {
+    margin-bottom: 0;
+}
+
+.C_YUI_JSON .JSON_VIEW_SWITCH .button {
+    margin-bottom: 0;
+}
+
+/*  Bulma's `.button.is-active` only borrows the :active border, which on a
+ *  three-way switch is not enough to say WHICH view you are looking at.
+ *  Fill it instead — the mark has to survive a glance. */
+.C_YUI_JSON .JSON_VIEW_MODE.is-active {
+    background-color: var(--bulma-link, #3273dc);
+    border-color: var(--bulma-link, #3273dc);
+    color: var(--bulma-link-invert, #fff);
+    z-index: 1;
+}
+
 /*
  *  Disable any transition a host stylesheet might inject.
  */