@yuneta/gobj-ui 7.23.0 → 7.23.2

package/dist/gobj-ui.es.js

@@ -3513,7 +3513,7 @@ function composed_title(gobj) {
 *   Below the mobile breakpoint the window is a full-screen
 *   sheet (no float / drag / resize).
 ************************************************************/
-function is_mobile$2() {
+function is_mobile$3() {
 	return (window.innerWidth || document.documentElement.offsetWidth) <= MOBILE_MAX;
 }
 /************************************************************
@@ -3546,7 +3546,7 @@ function do_minimize(gobj) {
 ************************************************************/
 function build_ui$15(gobj) {
 	ensure_window_style();
-	let mobile = is_mobile$2();
+	let mobile = is_mobile$3();
 	let header = gobj_read_attr(gobj, "header");
 	if (is_gobj(header)) header = gobj_read_attr(header, "$container");
 	if (!header) header = build_default_header(gobj);
@@ -3884,7 +3884,7 @@ function min$1(gobj) {
 *  handlers moving
 ************************************************************/
 function mvStart(gobj, evt) {
-	if (is_mobile$2()) return;
+	if (is_mobile$3()) return;
 	let $container = gobj_read_attr(gobj, "$container");
 	let window_rect = $container.getBoundingClientRect();
 	let x = evt.screenX;
@@ -4043,7 +4043,7 @@ function do_center(gobj, x, y, width, height) {
 function handleResize(gobj) {
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$container) return;
-	if (is_mobile$2()) {
+	if (is_mobile$3()) {
 		$container.classList.add("is-mobile-sheet");
 		let vw = window.innerWidth || document.documentElement.offsetWidth;
 		let vh = window.innerHeight || document.documentElement.offsetHeight;
@@ -9474,6 +9474,56 @@ var FOLD_SWALLOWED_EVENTS = [
 	"mousedown",
 	"click"
 ];
+var LAYOUTS$1 = {
+	"json-tree": {
+		label: "vertical tree",
+		g6_layout: { type: "json-tree-layout" },
+		edge_type: "cubic-vertical"
+	},
+	"dagre-tb": {
+		label: "dagre top-down",
+		g6_layout: {
+			type: "antv-dagre",
+			rankdir: "TB",
+			nodesep: 20,
+			ranksep: 40
+		},
+		edge_type: "polyline"
+	},
+	"dagre-lr": {
+		label: "dagre left-right",
+		g6_layout: {
+			type: "antv-dagre",
+			rankdir: "LR",
+			nodesep: 20,
+			ranksep: 40
+		},
+		edge_type: "polyline"
+	}
+};
+var DEFAULT_LAYOUT = "json-tree";
+function get_layout_cfg$1(key) {
+	return LAYOUTS$1[key] || LAYOUTS$1[DEFAULT_LAYOUT];
+}
+/************************************************************
+*  A layout's label, with every key SPELLED OUT inside t().
+*
+*  Never t(LAYOUTS[key].label) nor a `data-i18n` fed from that
+*  table: 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.  Twice already in this component's
+*  history (7.20.0 `tree view`, and this table on its first
+*  draft).
+************************************************************/
+function layout_label(key) {
+	switch (key) {
+		case "dagre-tb": return t("dagre top-down");
+		case "dagre-lr": return t("dagre left-right");
+		default: return t("vertical tree");
+	}
+}
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -9484,6 +9534,7 @@ var attrs_table$11 = [
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Container element"),
 	SDATA(data_type_t.DTP_STRING, "canvas_id", 0, "", "Canvas ID"),
 	SDATA(data_type_t.DTP_STRING, "wide", 0, "36px", "Height of header"),
+	SDATA(data_type_t.DTP_STRING, "layout", 0, "json-tree", "Layout key (see LAYOUTS)"),
 	SDATA_END()
 ];
 var PRIVATE_DATA$11 = {
@@ -9499,6 +9550,7 @@ var PRIVATE_DATA$11 = {
 	match_count: 0,
 	find_timer: null,
 	fold_listener: null,
+	$layout_select: null,
 	$find_input: null,
 	$find_result: null,
 	$find_count: null
@@ -9673,6 +9725,7 @@ function build_ui$10(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.$layout_select = $container.querySelector(".JSON_GRAPH_LAYOUT");
 	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");
@@ -9830,7 +9883,42 @@ 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)];
+	let current_layout = gobj_read_str_attr(gobj, "layout") || DEFAULT_LAYOUT;
+	let options = Object.keys(LAYOUTS$1).map(function(key) {
+		let attrs = {
+			value: key,
+			"data-i18n": LAYOUTS$1[key].label
+		};
+		if (key === current_layout) attrs.selected = "selected";
+		return [
+			"option",
+			attrs,
+			layout_label(key)
+		];
+	});
+	let right_items = [
+		createElement2([
+			"select",
+			{
+				class: "JSON_GRAPH_LAYOUT select",
+				style: {
+					height: toolbar_wide,
+					"margin-left": "0.5em"
+				},
+				title: t("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": t("layout"),
+				"data-i18n-aria-label": "layout"
+			},
+			options,
+			{ change: (evt) => {
+				evt.stopPropagation();
+				gobj_send_event(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
+			} }
+		]),
+		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",
@@ -9856,6 +9944,7 @@ function make_toolbar$3(gobj) {
 ************************************************************/
 function build_graph$3(gobj) {
 	let priv = gobj.priv;
+	let layout_cfg = get_layout_cfg$1(gobj_read_str_attr(gobj, "layout"));
 	const graph = priv.graph = new Graph({
 		container: priv.canvas_id,
 		animation: false,
@@ -9863,14 +9952,14 @@ function build_graph$3(gobj) {
 		zoomRange: [.1, 4],
 		node: { style: { labelPlacement: "center" } },
 		edge: {
-			type: "cubic-vertical",
+			type: layout_cfg.edge_type,
 			style: {
 				stroke: "#999",
 				lineWidth: 1,
 				endArrow: true
 			}
 		},
-		layout: { type: "json-tree-layout" },
+		layout: layout_cfg.g6_layout,
 		behaviors: ["drag-canvas", "zoom-canvas"]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
@@ -9935,15 +10024,40 @@ function build_cell_html(key, value, type, dark, matched) {
 *  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>`;
+*  A filled CHIP, the same one the gobj tree draws
+*  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
+*  border, radius, and `+N` / `−` rather than a triangle.  It
+*  shipped once as a bare `▾` and on a phone it was invisible —
+*  a glyph is a couple of pixels of ink at the zoom that fits a
+*  document on screen, while a filled chip stays a visible blob
+*  and reads as something you press.  `+N` also carries the
+*  count of what is hidden, which the open state does not need.
+*
+*  No `title`: it would be a word inside an innerHTML string,
+*  where it could carry no i18n key and would sit in English
+*  forever.  `+3` and `−` need no language.
+************************************************************/
+function fold_toggle_html(path, foldable, folded, branches, colors) {
+	if (!foldable) return `<span style="width:24px; flex:0 0 auto;"></span>`;
+	let label = folded ? "+" + branches : "&#8722;";
+	return `<span data-fold-path="${escapeHtml(path)}" style="
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 22px;
+        height: 16px;
+        padding: 0 5px;
+        background: ${colors.bg};
+        color: ${colors.border};
+        border: 1px solid ${colors.bg};
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: 700;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+    ">${label}</span>`;
 }
 /************************************************************
 *  Does this key/value pair match the find term?
@@ -10055,7 +10169,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
         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>
+    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
     ${content_html}
 </div>`;
 	let node = {
@@ -10272,6 +10386,34 @@ function ac_refresh$5(gobj, event, kw, src) {
 }
 /************************************************************
 *  {theme: "dark"|"light"} — the app switched theme.
+*  EV_CHANGE_LAYOUT { layout }
+*
+*  The layout AND the edge type move together — a vertical
+*  layout with horizontal cubics draws every edge the wrong way
+*  round — and then the graph is rebuilt and refitted, because a
+*  new layout is a new shape and the old camera framed the old
+*  one.
+************************************************************/
+function ac_change_layout$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let key = kw && kw.layout || "";
+	if (!LAYOUTS$1[key]) {
+		log_error(`${gobj_short_name(gobj)}: unknown layout '${key}'`);
+		return -1;
+	}
+	if (key === gobj_read_str_attr(gobj, "layout")) return 0;
+	gobj_write_str_attr(gobj, "layout", key);
+	if (priv.$layout_select && priv.$layout_select.value !== key) priv.$layout_select.value = key;
+	let cfg = get_layout_cfg$1(key);
+	if (priv.graph) priv.graph.setOptions({
+		layout: cfg.g6_layout,
+		edge: { type: cfg.edge_type }
+	});
+	refresh_json(gobj);
+	update_find_result(gobj);
+	return 0;
+}
+/************************************************************
 *  EV_TOGGLE_FOLD { path } — fold or unfold ONE card.
 *
 *  The camera does not move: folding one branch is a local
@@ -10486,6 +10628,11 @@ function create_gclass$11(gclass_name) {
 			ac_toggle_fold,
 			null
 		],
+		[
+			"EV_CHANGE_LAYOUT",
+			ac_change_layout$1,
+			null
+		],
 		[
 			"EV_EXPAND_ALL",
 			ac_expand_all$2,
@@ -10547,6 +10694,7 @@ function create_gclass$11(gclass_name) {
 		["EV_REFRESH", 0],
 		["EV_FIND_NODES", 0],
 		["EV_TOGGLE_FOLD", 0],
+		["EV_CHANGE_LAYOUT", 0],
 		["EV_EXPAND_ALL", 0],
 		["EV_COLLAPSE_ALL", 0],
 		["EV_THEME", 0],
@@ -10880,12 +11028,13 @@ function mt_start$10(gobj) {
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
-function mt_stop$10(gobj) {}
+function mt_stop$10(gobj) {
+	teardown_graph_child(gobj);
+}
 /***************************************************************
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$10(gobj) {
-	teardown_graph_child(gobj);
 	destroy_ui$5(gobj);
 }
 /***************************
@@ -16185,7 +16334,7 @@ function treedb_delete_node$1(gobj, treedb_name, topic_name, record, options) {
 /************************************************************
 *  True on a phone-width viewport (Bulma's mobile breakpoint).
 ************************************************************/
-function is_mobile$1() {
+function is_mobile$2() {
 	return typeof window !== "undefined" && window.innerWidth <= 768;
 }
 /************************************************************
@@ -16204,7 +16353,7 @@ function open_json_viewer$1(gobj) {
 		yui_shell_show_error(yui_shell_of(gobj), "raw json viewer unavailable", { t });
 		return;
 	}
-	let mobile = is_mobile$1();
+	let mobile = is_mobile$2();
 	let shell = yui_shell_of(gobj);
 	let jv = gobj_create_service(`treedb-topics-json-${clean_name(gobj_name(gobj))}`, "C_YUI_JSON", { subscriber: gobj }, gobj);
 	if (!jv) {
@@ -17417,10 +17566,102 @@ var PRIVATE_DATA$5 = {
 	form_modal: null,
 	schema_gobj: null,
 	schema_modal: null,
+	schema_win: null,
 	cell_json_gobj: null,
-	cell_json_modal: null
+	cell_json_modal: null,
+	cell_json_win: null
 };
 var __gclass__$5 = null;
+function is_mobile$1() {
+	return typeof window !== "undefined" && window.innerWidth <= 768;
+}
+/************************************************************
+*  Present a JSON viewer's $container.
+*
+*  On a LAPTOP a floating C_YUI_WINDOW: a JSON document is
+*  something you read WHILE looking at the table behind it —
+*  you move it, you resize it, you maximise it when the
+*  document is big.  A modal can do none of that, and it
+*  darkens exactly the rows you opened the cell from.
+*
+*  On a phone the modal sheet stays: there is no room to
+*  arrange anything, and the sheet already carries the shell's
+*  Escape / Back handling.
+*
+*  Returns {win, modal} — exactly one of them is set.
+************************************************************/
+function present_json_popup(gobj, $box, opts) {
+	let shell = yui_shell_of(gobj);
+	if (!shell) {
+		log_error(`${gobj_short_name(gobj)}: no shell, cannot present the json`);
+		return null;
+	}
+	if (is_mobile$1()) return {
+		modal: yui_shell_show_modal(shell, $box, {
+			dialog: true,
+			logical_class: opts.logical_class + "_SHEET",
+			title_prefix: opts.title_prefix,
+			title: opts.title,
+			t,
+			on_close: opts.on_close
+		}),
+		win: null
+	};
+	let win = gobj_create_service(opts.name, "C_YUI_WINDOW", {
+		$parent: popup_mount_layer(gobj),
+		subscriber: null,
+		modal: false,
+		showMax: true,
+		showFooter: false,
+		resizable: true,
+		center: true,
+		auto_save_size_and_position: true,
+		width: 720,
+		height: 620,
+		logical_class: opts.logical_class + "_WINDOW",
+		title_prefix: opts.title_prefix,
+		title: opts.title,
+		icon: opts.icon,
+		body: $box,
+		manager: null,
+		on_close: function() {
+			if (gobj_is_destroying(gobj)) return;
+			opts.forget_window();
+			opts.on_close();
+		}
+	}, gobj);
+	if (!win) {
+		log_error(`${gobj_short_name(gobj)}: cannot create the json window`);
+		return null;
+	}
+	gobj_start(win);
+	return {
+		win,
+		modal: null
+	};
+}
+/************************************************************
+*  Retire a presenting window: reference cleared FIRST, then
+*  stop, then destroy.
+*
+*  The order is the whole content of this function.  The ✕ of
+*  the window calls back into the teardown that calls this, so
+*  clearing the reference first is what stops the recursion.
+*  And it is STOP then destroy because the window was started
+*  on open: handing a running gobj to gobj_destroy() makes the
+*  framework rescue it and say so — "Destroying a RUNNING
+*  gobj" — which is a caller's bug, not a framework message.
+*  Same lesson `c_tranger_view.close_json_viewer` carries.
+************************************************************/
+function retire_popup_window(win) {
+	if (!win) return;
+	try {
+		if (gobj_is_running(win)) gobj_stop(win);
+		gobj_destroy(win);
+	} catch (e) {
+		log_warning(`${GCLASS_NAME$5}: json window already gone: ${e}`);
+	}
+}
 function popup_mount_layer(gobj) {
 	let $layer = yui_shell_popup_layer(yui_shell_of(gobj));
 	if ($layer) return $layer;
@@ -18591,8 +18832,7 @@ function open_schema_dialog(gobj) {
 		log_error(`${gobj_short_name(gobj)}: no desc, no schema to show`);
 		return;
 	}
-	let shell = yui_shell_of(gobj);
-	if (!shell) {
+	if (!yui_shell_of(gobj)) {
 		log_error(`${gobj_short_name(gobj)}: no shell, cannot open the schema view`);
 		return;
 	}
@@ -18609,16 +18849,25 @@ function open_schema_dialog(gobj) {
 		teardown_schema_child(gobj);
 		return;
 	}
-	priv.schema_modal = yui_shell_show_modal(shell, $box, {
-		dialog: true,
-		logical_class: "TREEDB_SCHEMA_SHEET",
+	let presented = present_json_popup(gobj, $box, {
+		name: "schemawin_" + clean_name(gobj_name(gobj)),
+		logical_class: "TREEDB_SCHEMA",
 		title_prefix: gobj_read_str_attr(gobj, "topic_name"),
 		title: "schema",
-		t,
+		icon: "yi-table",
+		forget_window: function() {
+			priv.schema_win = null;
+		},
 		on_close: function() {
 			teardown_schema_child(gobj);
 		}
 	});
+	if (!presented) {
+		teardown_schema_child(gobj);
+		return;
+	}
+	priv.schema_modal = presented.modal;
+	priv.schema_win = presented.win;
 	gobj_send_event(json_view, "EV_SET_JSON", { json: desc }, gobj);
 }
 /************************************************************
@@ -18633,6 +18882,9 @@ function teardown_schema_child(gobj) {
 		gobj_destroy(priv.schema_gobj);
 		priv.schema_gobj = null;
 	}
+	let win = priv.schema_win;
+	priv.schema_win = null;
+	retire_popup_window(win);
 	priv.schema_modal = null;
 }
 /************************************************************
@@ -18679,8 +18931,7 @@ function open_cell_json_dialog(gobj, row_id, col_id) {
 		log_error(`${gobj_short_name(gobj)}: row '${row_id}' has no col '${col_id}'`);
 		return;
 	}
-	let shell = yui_shell_of(gobj);
-	if (!shell) {
+	if (!yui_shell_of(gobj)) {
 		log_error(`${gobj_short_name(gobj)}: no shell, cannot open the cell json`);
 		return;
 	}
@@ -18697,16 +18948,25 @@ function open_cell_json_dialog(gobj, row_id, col_id) {
 		teardown_cell_json_child(gobj);
 		return;
 	}
-	priv.cell_json_modal = yui_shell_show_modal(shell, $box, {
-		dialog: true,
-		logical_class: "TREEDB_CELL_JSON_SHEET",
+	let presented = present_json_popup(gobj, $box, {
+		name: "cellwin_" + clean_name(gobj_name(gobj)),
+		logical_class: "TREEDB_CELL_JSON",
 		title_prefix: String(row_id),
 		title: col_id,
-		t,
+		icon: "yi-js-square",
+		forget_window: function() {
+			priv.cell_json_win = null;
+		},
 		on_close: function() {
 			teardown_cell_json_child(gobj);
 		}
 	});
+	if (!presented) {
+		teardown_cell_json_child(gobj);
+		return;
+	}
+	priv.cell_json_modal = presented.modal;
+	priv.cell_json_win = presented.win;
 	gobj_send_event(json_view, "EV_SET_JSON", { json: value }, gobj);
 }
 /************************************************************
@@ -18721,6 +18981,9 @@ function teardown_cell_json_child(gobj) {
 		gobj_destroy(priv.cell_json_gobj);
 		priv.cell_json_gobj = null;
 	}
+	let win = priv.cell_json_win;
+	priv.cell_json_win = null;
+	retire_popup_window(win);
 	priv.cell_json_modal = null;
 }
 /************************************************************

package/package.json

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

package/src/c_yui_json.js

@@ -227,6 +227,21 @@ function mt_start(gobj)
  ***************************************************************/
 function mt_stop(gobj)
 {
+    /*
+     *  The graph child dies with the parent's RUNNING state, not with
+     *  its destruction, and the difference is not cosmetic:
+     *  gobj_destroy() destroys the children BEFORE calling mt_destroy(),
+     *  so tearing it down there arrived after the framework had already
+     *  destroyed it — while it was still running.  Closing the window
+     *  logged "Destroying a RUNNING gobj" for the child and then
+     *  "gobj NULL or DESTROYED" for this gobj's own attempt to stop it.
+     *
+     *  Here it is stopped and destroyed while everything is still whole,
+     *  and gobj_destroy() finds no child left to rescue.  A later
+     *  gobj_start + a switch back to the graph rebuilds it, which is the
+     *  same lazy path a first entry takes.
+     */
+    teardown_graph_child(gobj);
 }
 
 /***************************************************************
@@ -234,7 +249,6 @@ function mt_stop(gobj)
  ***************************************************************/
 function mt_destroy(gobj)
 {
-    teardown_graph_child(gobj);
     destroy_ui(gobj);
 }