@yuneta/gobj-ui 7.23.17 → 7.23.19

package/dist/gobj-ui.es.js

@@ -9345,6 +9345,123 @@ function yui_toolbar(attrs = {}, items = []) {
 	return $toolbar;
 }
 //#endregion
+//#region src/lib_graph.js
+/************************************************************
+*  Add class to elements selected
+************************************************************/
+function addClasses($container, selector, ...classNames) {
+	$container.querySelectorAll(selector).forEach((el) => el.classList.add(...classNames));
+}
+/************************************************************
+*  Remove class from elements selected
+************************************************************/
+function removeClasses($container, selector, ...classNames) {
+	$container.querySelectorAll(selector).forEach((el) => el.classList.remove(...classNames));
+}
+/************************************************************
+*  Toggle class to elements selected
+************************************************************/
+function toggleClasses($container, selector, ...classNames) {
+	$container.querySelectorAll(selector).forEach((el) => classNames.forEach((cls) => el.classList.toggle(cls)));
+}
+/************************************************************
+*  Remove child elements
+************************************************************/
+function removeChildElements($element) {
+	$element.innerHTML = "";
+}
+/************************************************************
+*  Disable/Enable elements
+************************************************************/
+function disableElements($container, selector) {
+	$container.querySelectorAll(selector).forEach((el) => {
+		el.setAttribute("disabled", "");
+	});
+}
+function enableElements($container, selector) {
+	$container.querySelectorAll(selector).forEach((el) => {
+		if (el.hasAttribute("disabled")) el.removeAttribute("disabled");
+	});
+}
+/************************************************************
+*  Set or reset the color of 'enable submit action' state
+*  Color green
+************************************************************/
+function set_submit_state($container, selector, set) {
+	if (set) addClasses($container, selector, "color_submit_state");
+	else removeClasses($container, selector, "color_submit_state");
+}
+/************************************************************
+*  Set or reset the color of 'enable cancel action' state
+*  Color red
+************************************************************/
+function set_cancel_state($container, selector, set) {
+	if (set) addClasses($container, selector, "color_cancel_state");
+	else removeClasses($container, selector, "color_cancel_state");
+}
+/************************************************************
+*  Set or reset the color of 'enable actived' state
+*  Color orange
+************************************************************/
+function set_active_state($container, selector, set) {
+	if (set) addClasses($container, selector, "color_active_state");
+	else removeClasses($container, selector, "color_active_state");
+}
+/************************************************************
+*  Set or reset the 'pressed' state of a TOGGLE.
+*
+*  Not one of the colours above: each of those names a KIND of
+*  action (create, pending, history, destructive), and a toggle
+*  is not an action -- it is a state the control is IN. So it
+*  looks pressed instead of changing category, which also keeps
+*  it out of the way of a neighbour wearing the same hue.
+************************************************************/
+function set_pressed_state($container, selector, set) {
+	if (set) addClasses($container, selector, "pressed_state");
+	else removeClasses($container, selector, "pressed_state");
+}
+/**
+* Returns a smart stroke color in `rgba()` format based on:
+* - The given fill color (hex or rgb[a])
+* - The current theme ('light' or 'dark')
+* - The adjustment factor (default 0.2)
+*
+* @param {string} fillColor - Fill color string
+* @param {string} theme - 'light' or 'dark'
+* @param {number} factor - Lighten/darken factor (default 0.2)
+* @returns {string} rgba(r, g, b, a)
+*/
+function getStrokeColor(fillColor, theme = "light", factor = .2) {
+	let r, g, b, a = 1;
+	if (fillColor.startsWith("#")) {
+		let hex = fillColor.slice(1);
+		if (hex.length === 3 || hex.length === 4) hex = hex.split("").map((c) => c + c).join("");
+		if (hex.length === 6) {
+			r = parseInt(hex.slice(0, 2), 16);
+			g = parseInt(hex.slice(2, 4), 16);
+			b = parseInt(hex.slice(4, 6), 16);
+		} else if (hex.length === 8) {
+			r = parseInt(hex.slice(0, 2), 16);
+			g = parseInt(hex.slice(2, 4), 16);
+			b = parseInt(hex.slice(4, 6), 16);
+			a = parseInt(hex.slice(6, 8), 16) / 255;
+		} else throw new Error("Unsupported hex format");
+	} else if (fillColor.startsWith("rgb")) {
+		const match = fillColor.match(/rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)/);
+		if (!match) throw new Error("Invalid rgb()/rgba() format.");
+		r = parseInt(match[1], 10);
+		g = parseInt(match[2], 10);
+		b = parseInt(match[3], 10);
+		if (match[4] !== void 0) a = parseFloat(match[4]);
+	} else throw new Error("Unsupported color format.");
+	const luminance = (.299 * r + .587 * g + .114 * b) / 255;
+	let lighten;
+	if (theme === "dark") lighten = luminance < .7;
+	else lighten = luminance < .3;
+	const adjust = (v) => lighten ? Math.min(255, Math.floor(v + (255 - v) * factor)) : Math.max(0, Math.floor(v * (1 - factor)));
+	return `rgba(${adjust(r)}, ${adjust(g)}, ${adjust(b)}, ${a.toFixed(3)})`;
+}
+//#endregion
 //#region src/yui_graph_camera.js
 /***********************************************************************
 *          yui_graph_camera.js
@@ -9493,6 +9610,79 @@ function yui_graph_fold_items(gobj, wide) {
 	return [camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide, " transform: rotate(90deg);"), camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide)];
 }
 /************************************************************
+*   The ANCHOR toggle: pick one element and every camera move
+*   from then on leaves it in the MIDDLE.
+*
+*   Why it exists: a graph that fits on screen is unreadable at
+*   the zoom that makes it fit, and the zoom that makes it
+*   readable does not fit -- so the useful view is always a
+*   fraction of the document, and which fraction is the whole
+*   question.  Without an anchor, `1:1` lands wherever the
+*   layout's origin happens to be and the reader hunts for the
+*   node they were looking at.
+*
+*   Crosshairs and not a thumbtack.  A tack says "do not move
+*   this", which is what a pinned NODE would mean in a graph you
+*   can drag nodes around in; this pins the CAMERA to a target,
+*   which is what a crosshair says and what every map that
+*   offers it draws.  It is also in the icon set already, and a
+*   `yi-*` class that is not is a black square.
+*
+*   Three states, because two would not say what a press does:
+*
+*      off      no target; the camera behaves as it always did
+*      arming   waiting for you to click the element you mean
+*      on       locked; every zoom re-centres on it
+************************************************************/
+function yui_graph_anchor_item(gobj, wide) {
+	return camera_button(gobj, "yi-location-crosshairs", "EV_TOGGLE_ANCHOR", "anchor view", wide);
+}
+/************************************************************
+*   Paint the anchor button.  `state` is "off" | "arming" | "on".
+*
+*   Both live states look PRESSED, because both are states the
+*   control is IN rather than actions; what separates them is the
+*   colour, and only the waiting one takes a palette colour --
+*   it is the one that needs the reader to do something next.
+************************************************************/
+function yui_graph_update_anchor($container, state) {
+	if (!$container) return;
+	let $btn = $container.querySelector(".EV_TOGGLE_ANCHOR");
+	if (!$btn) return;
+	set_pressed_state($container, ".EV_TOGGLE_ANCHOR", state !== "off");
+	$btn.classList.toggle("color_pending_state", state === "arming");
+	$btn.setAttribute("aria-pressed", state === "on" ? "true" : "false");
+	let key = state === "arming" ? "click the element to centre on" : state === "on" ? "centred: click to release" : "anchor view";
+	$btn.setAttribute("title", t(key));
+	$btn.setAttribute("data-i18n-title", key);
+	$btn.setAttribute("aria-label", t(key));
+	$btn.setAttribute("data-i18n-aria-label", key);
+}
+/************************************************************
+*   Put `node_id` back in the middle of the viewport.
+*
+*   Called AFTER the camera moved, never instead of moving it:
+*   the zoom is what the reader asked for, the centring is what
+*   keeps the thing they are reading under their eyes.
+*
+*   Guarded on every side because it runs on every wheel notch:
+*   a graph mid-rebuild, an anchor whose node went away with a
+*   fold, a G6 version without `focusElement` -- none of those is
+*   an error worth a log line per notch, they are all "there is
+*   nothing to centre right now".
+************************************************************/
+function yui_graph_center_on(graph, node_id) {
+	if (!graph || !node_id) return false;
+	try {
+		if (typeof graph.getElementData === "function" && !graph.getElementData(node_id)) return false;
+		if (typeof graph.focusElement !== "function") return false;
+		graph.focusElement(node_id);
+		return true;
+	} catch (e) {
+		return false;
+	}
+}
+/************************************************************
 *   A refresh button, for the graphs that offer one.
 ************************************************************/
 function yui_graph_refresh_item(gobj, wide) {
@@ -10070,21 +10260,48 @@ var PRIVATE_DATA$11 = {
 	$layout_select: null,
 	$find_input: null,
 	$find_result: null,
-	$find_count: null
+	$find_count: null,
+	anchor_id: "",
+	anchor_path: "",
+	anchor_state: "off",
+	last_zoom: 1
 };
 var __gclass__$11 = null;
 var __layout_registered__$1 = false;
 /***************************************************************
-*  Type colors matching the original mx_json_viewer
-***************************************************************/
-var TYPE_COLORS = {
+*  Type colours, ONE EXPLICIT PALETTE PER THEME and not a
+*  derivation, for the same reason the tree keeps two sets of
+*  CSS tokens: a colour that reads on white is not the same
+*  colour lightened, and deriving one from the other made the
+*  two views of one document disagree about what a string is.
+*  These ARE the tree's tokens (`c_yui_json.css`), so the tree
+*  and the graph now say green with the same green.
+*
+*  The light values are darker than the `mx_json_viewer` ones
+*  they came from, because those could not be read: `#FF8C00`
+*  is mid-luminance, so it reaches at most **2.33:1 against any
+*  background that exists** -- no card colour and no highlight
+*  could have fixed it, only the colour itself. Orange and blue
+*  moved until every type clears 4.5:1 on all five surfaces this
+*  viewer paints (two light cards, the match chip, two dark
+*  cards); red and green were already there.
+***************************************************************/
+var TYPE_COLORS_LIGHT = {
 	string: "#006000",
-	number: "#EE422E",
-	boolean: "#FF8C00",
-	null: "#475ED0",
+	number: "#b5330b",
+	boolean: "#8C4D00",
+	null: "#4359C6",
 	list: "#4C0099",
 	dict: "#4C0099"
 };
+var TYPE_COLORS_DARK = {
+	string: "#7ec87e",
+	number: "#ff8a65",
+	boolean: "#ffb74d",
+	null: "#90a4f4",
+	list: "#B799D6",
+	dict: "#B799D6"
+};
 /***************************************************************
 *  Group (card) colours. `fill` is the light-theme card; `tint`
 *  is the hue that fill hints at, used to derive the dark card —
@@ -10138,21 +10355,15 @@ function json_card_style(group, dark) {
 	};
 }
 /***************************************************************
-*  A scalar's colour by type. The palette is tuned for a light
-*  card; on a dark one every one of them (dark green #006000,
-*  blue #475ED0, …) sinks into the background, so brighten it.
-*
-*  60% white and not the 45% it shipped with.  The number is a
-*  balance measured both ways: brighter reads better on the dark
-*  card (the worst type goes from 2.88:1 to 4.74:1) and washes the
-*  six types toward one pastel, and past this point red, orange
-*  and purple stop being tellable apart, which is the only reason
-*  they are coloured at all.
+*  A scalar's colour by type, straight out of the palette for
+*  the theme.  It used to be the light colour mixed with white,
+*  which is how a document ended up green in one view and a
+*  paler green in the other, and how the amount of white became
+*  a knob nobody could set: enough of it to read on a dark card
+*  washed the six types into one pastel.
 ***************************************************************/
 function type_color(type, dark) {
-	let color = TYPE_COLORS[type] || (dark ? "#e8eaed" : "black");
-	if (!dark) return color;
-	return `color-mix(in srgb, ${color} 40%, #ffffff)`;
+	return (dark ? TYPE_COLORS_DARK : TYPE_COLORS_LIGHT)[type] || (dark ? "#e8eaed" : "black");
 }
 /******************************
 *      Framework Methods
@@ -10346,6 +10557,7 @@ function make_toolbar$3(gobj) {
 	]]);
 	let center_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
+	center_items.push(yui_graph_anchor_item(gobj, toolbar_wide));
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let current_layout = gobj_read_str_attr(gobj, "layout") || DEFAULT_LAYOUT;
 	let options = Object.keys(LAYOUTS$1).map(function(key) {
@@ -10428,6 +10640,15 @@ function build_graph$3(gobj) {
 	});
 	graph.on("aftertransform", () => {
 		yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+		let z = priv.last_zoom;
+		try {
+			z = priv.graph.getZoom();
+		} catch (e) {
+			return;
+		}
+		if (z === priv.last_zoom) return;
+		priv.last_zoom = z;
+		if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	});
 	graph.on(CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
@@ -10606,14 +10827,17 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
 			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,
-			value
-		});
+		if (is_object(value) && json_object_size(value) > 0 || is_array(value) && value.length > 0) {
+			pending_complex.push({
+				key,
+				value
+			});
+			continue;
+		}
+		lines.push(build_cell_html(key, value, type, dark, matched));
 	}
 	let label = get_group_label(path) || (is_dict ? "{}" : "[]");
+	if (pending_complex.length > 0) label += is_dict ? ` {${pending_complex.length}}` : ` [${pending_complex.length}]`;
 	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);
@@ -10689,13 +10913,22 @@ function load_json(gobj) {
 	let preserve_view = !!priv.pending_preserve_view;
 	priv.pending_preserve_view = false;
 	if (nodes.length > 0) {
+		let root_id = nodes[0].id;
 		graph.setData({
 			nodes,
 			edges
 		});
 		graph.render().then(() => {
-			if (!preserve_view) graph.fitView();
-			yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+			reanchor$1(gobj);
+			if (preserve_view) {
+				yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+				return;
+			}
+			Promise.resolve(graph.zoomTo(1)).then(() => {
+				if (!yui_graph_center_on(graph, priv.anchor_id)) yui_graph_center_on(graph, root_id);
+				priv.last_zoom = 1;
+				yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+			});
 		});
 	}
 }
@@ -10958,13 +11191,79 @@ function ac_theme$3(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*   Every camera action ends the same way once an anchor is
+*   set: the thing you were reading goes back to the middle.
+*
+*   Chained on the promise G6 returns rather than run beside it
+*   -- centring before the zoom has finished centres the OLD
+*   view, and the reader watches the node slide away and come
+*   back.
+************************************************************/
+function after_camera$2(gobj, moved) {
+	let priv = gobj.priv;
+	if (priv.anchor_state !== "on" || !priv.anchor_id) return;
+	Promise.resolve(moved).then(function() {
+		yui_graph_center_on(priv.graph, priv.anchor_id);
+	}).catch(function() {});
+}
+/************************************************************
+*   Point the anchor back at its node after a rebuild.
+*
+*   Node ids are generated per build, so the id the reader
+*   chose does not survive a refresh, a fold or a layout
+*   change -- the PATH does, and it is what the anchor really
+*   means: "this place in the document", not "this card".
+*
+*   A path that is no longer drawn (its parent got folded)
+*   releases the anchor rather than leaving a button that says
+*   it is locked onto something invisible.
+************************************************************/
+function reanchor$1(gobj) {
+	let priv = gobj.priv;
+	if (priv.anchor_state !== "on" || !priv.anchor_path) return;
+	let found = "";
+	try {
+		for (let node of priv.graph.getNodeData()) if (node && node.data && node.data.path === priv.anchor_path) {
+			found = node.id;
+			break;
+		}
+	} catch (e) {
+		return;
+	}
+	priv.anchor_id = found;
+	if (!found) {
+		priv.anchor_state = "off";
+		priv.anchor_path = "";
+	}
+	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+}
+/************************************************************
+*   Arm the anchor, or let it go.
+*
+*   Three states and one button, so a press ADVANCES: with no
+*   target it starts waiting for one, and with a target it
+*   releases.  Pressing it while it waits is a cancel, which is
+*   what somebody who pressed it by mistake will try.
+************************************************************/
+function ac_toggle_anchor$2(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "off") priv.anchor_state = "arming";
+	else {
+		priv.anchor_state = "off";
+		priv.anchor_id = "";
+		priv.anchor_path = "";
+	}
+	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+	return 0;
+}
+/************************************************************
 *
 ************************************************************/
 function ac_zoom_in$2(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
-		graph.zoomTo(z * 1.2);
+		after_camera$2(gobj, graph.zoomTo(z * 1.2));
 	}
 	return 0;
 }
@@ -10975,7 +11274,7 @@ function ac_zoom_out$2(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
-		graph.zoomTo(z * .8);
+		after_camera$2(gobj, graph.zoomTo(z * .8));
 	}
 	return 0;
 }
@@ -10983,10 +11282,14 @@ function ac_zoom_out$2(gobj, event, kw, src) {
 *
 ************************************************************/
 function ac_zoom_reset$2(gobj, event, kw, src) {
-	let graph = gobj.priv.graph;
+	let priv = gobj.priv;
+	let graph = priv.graph;
 	if (graph && graph.rendered) {
-		graph.zoomTo(1);
-		graph.translateTo([0, 0]);
+		if (priv.anchor_state === "on" && priv.anchor_id) after_camera$2(gobj, graph.zoomTo(1));
+		else {
+			graph.zoomTo(1);
+			graph.translateTo([0, 0]);
+		}
 	}
 	return 0;
 }
@@ -11005,12 +11308,21 @@ function ac_center$2(gobj, event, kw, src) {
 *
 ************************************************************/
 function ac_node_click$4(gobj, event, kw, src) {
-	let graph = gobj.priv.graph;
+	let priv = gobj.priv;
+	let graph = priv.graph;
 	let node_id = kw.evt.target.id;
 	let nodedata;
 	try {
 		nodedata = graph.getNodeData(node_id);
 	} catch (e) {}
+	if (priv.anchor_state === "arming") {
+		priv.anchor_id = node_id;
+		priv.anchor_path = nodedata && nodedata.data ? nodedata.data.path : "";
+		priv.anchor_state = "on";
+		yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+		yui_graph_center_on(graph, node_id);
+		return 0;
+	}
 	if (nodedata && nodedata.data) gobj_publish_event(gobj, "EV_JSON_ITEM_CLICKED", {
 		path: nodedata.data.path,
 		id: node_id
@@ -11144,6 +11456,11 @@ function create_gclass$11(gclass_name) {
 			ac_node_click$4,
 			null
 		],
+		[
+			"EV_TOGGLE_ANCHOR",
+			ac_toggle_anchor$2,
+			null
+		],
 		[
 			"EV_RESIZE",
 			ac_resize$2,
@@ -11174,6 +11491,7 @@ function create_gclass$11(gclass_name) {
 		["EV_ZOOM_RESET", 0],
 		["EV_CENTER", 0],
 		["EV_NODE_CLICK", 0],
+		["EV_TOGGLE_ANCHOR", 0],
 		["EV_RESIZE", 0],
 		["EV_SHOW", 0],
 		["EV_HIDE", 0],
@@ -12695,7 +13013,11 @@ var PRIVATE_DATA$9 = {
 	node_by_id: null,
 	collapse_state: null,
 	resize_observer: null,
-	_resize_raf: 0
+	_resize_raf: 0,
+	anchor_id: "",
+	anchor_name: "",
+	anchor_state: "off",
+	last_zoom: 1
 };
 var __gclass__$9 = null;
 var __layout_registered__ = false;
@@ -13088,6 +13410,7 @@ function make_toolbar$1(gobj) {
 	let center_items = [];
 	let right_items = [];
 	center_items = yui_graph_camera_items(gobj, priv.graph, toolbar_wide);
+	center_items.push(yui_graph_anchor_item(gobj, toolbar_wide));
 	center_items.push(yui_graph_refresh_item(gobj, toolbar_wide));
 	let options = [];
 	for (let key of Object.keys(LAYOUTS)) {
@@ -13163,6 +13486,15 @@ function build_graph$2(gobj) {
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on("aftertransform", () => {
 		yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+		let z = priv.last_zoom;
+		try {
+			z = priv.graph.getZoom();
+		} catch (e) {
+			return;
+		}
+		if (z === priv.last_zoom) return;
+		priv.last_zoom = z;
+		if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	});
 	graph.on(NodeEvent.CLICK, (evt) => {
 		gobj_send_event(gobj, "EV_NODE_CLICK", { evt }, gobj);
@@ -13450,13 +13782,23 @@ function load_tree(gobj) {
 	let edges = [];
 	build_gobj_nodes(gobj, yuno, nodes, edges, null, true, layout_cfg.compact);
 	if (nodes.length > 0) {
+		let root_id = nodes[0].id;
 		graph.setData({
 			nodes,
 			edges
 		});
 		graph.render().then(() => {
-			if (anchor) restore_view_anchored(gobj, anchor);
-			else if (!preserve_view) graph.fitView();
+			reanchor(gobj);
+			if (anchor) {
+				restore_view_anchored(gobj, anchor);
+				return;
+			}
+			if (preserve_view) return;
+			Promise.resolve(graph.zoomTo(1)).then(() => {
+				if (!yui_graph_center_on(graph, priv.anchor_id)) yui_graph_center_on(graph, root_id);
+				priv.last_zoom = 1;
+				yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+			});
 		});
 	}
 }
@@ -13958,13 +14300,77 @@ function ac_collapse_all(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*   Every camera action ends the same way once an anchor is
+*   set: the thing you were reading goes back to the middle.
+*
+*   Chained on the promise G6 returns rather than run beside it
+*   -- centring before the zoom has finished centres the OLD
+*   view, and the reader watches the node slide away and come
+*   back.
+************************************************************/
+function after_camera$1(gobj, moved) {
+	let priv = gobj.priv;
+	if (priv.anchor_state !== "on" || !priv.anchor_id) return;
+	Promise.resolve(moved).then(function() {
+		yui_graph_center_on(priv.graph, priv.anchor_id);
+	}).catch(function() {});
+}
+/************************************************************
+*   Point the anchor back at its node after a rebuild.
+*
+*   Node ids are generated per build, so the id the reader chose
+*   does not survive an expand, a collapse or a refresh -- the
+*   `full_name` does, and it is what the anchor really means:
+*   "this gobj", not "this card".
+*
+*   A gobj no longer drawn (its branch got collapsed, or it went
+*   away) releases the anchor rather than leaving a button that
+*   claims to be locked onto something invisible.
+************************************************************/
+function reanchor(gobj) {
+	let priv = gobj.priv;
+	if (priv.anchor_state !== "on" || !priv.anchor_name) return;
+	let found = "";
+	if (priv.node_by_id) {
+		for (let id of Object.keys(priv.node_by_id)) if (priv.node_by_id[id].full_name === priv.anchor_name) {
+			found = id;
+			break;
+		}
+	}
+	priv.anchor_id = found;
+	if (!found) {
+		priv.anchor_state = "off";
+		priv.anchor_name = "";
+	}
+	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+}
+/************************************************************
+*   Arm the anchor, or let it go.
+*
+*   Three states and one button, so a press ADVANCES: with no
+*   target it starts waiting for one, and with a target it
+*   releases.  Pressing it while it waits is a cancel, which is
+*   what somebody who pressed it by mistake will try.
+************************************************************/
+function ac_toggle_anchor$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "off") priv.anchor_state = "arming";
+	else {
+		priv.anchor_state = "off";
+		priv.anchor_id = "";
+		priv.anchor_name = "";
+	}
+	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+	return 0;
+}
+/************************************************************
 *
 ************************************************************/
 function ac_zoom_in$1(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
-		graph.zoomTo(z * 1.2);
+		after_camera$1(gobj, graph.zoomTo(z * 1.2));
 	}
 	return 0;
 }
@@ -13975,7 +14381,7 @@ function ac_zoom_out$1(gobj, event, kw, src) {
 	let graph = gobj.priv.graph;
 	if (graph) {
 		let z = graph.getZoom();
-		graph.zoomTo(z * .8);
+		after_camera$1(gobj, graph.zoomTo(z * .8));
 	}
 	return 0;
 }
@@ -13983,10 +14389,14 @@ function ac_zoom_out$1(gobj, event, kw, src) {
 *
 ************************************************************/
 function ac_zoom_reset$1(gobj, event, kw, src) {
-	let graph = gobj.priv.graph;
+	let priv = gobj.priv;
+	let graph = priv.graph;
 	if (graph && graph.rendered) {
-		graph.zoomTo(1);
-		graph.translateTo([0, 0]);
+		if (priv.anchor_state === "on" && priv.anchor_id) after_camera$1(gobj, graph.zoomTo(1));
+		else {
+			graph.zoomTo(1);
+			graph.translateTo([0, 0]);
+		}
 	}
 	return 0;
 }
@@ -14014,6 +14424,14 @@ function ac_node_click$3(gobj, event, kw, src) {
 		if (nd && nd.data) node_data = nd.data;
 	} catch (e) {}
 	if (!node_data) return 0;
+	if (priv.anchor_state === "arming") {
+		priv.anchor_id = node_id;
+		priv.anchor_name = node_data.full_name || "";
+		priv.anchor_state = "on";
+		yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+		yui_graph_center_on(graph, node_id);
+		return 0;
+	}
 	let client_x = kw.evt && kw.evt.client ? kw.evt.client.x : 0;
 	let client_y = kw.evt && kw.evt.client ? kw.evt.client.y : 0;
 	show_popover(gobj, node_data, client_x, client_y);
@@ -14094,6 +14512,7 @@ function create_gclass$9(gclass_name) {
 		["EV_ZOOM_RESET", 0],
 		["EV_CENTER", 0],
 		["EV_NODE_CLICK", 0],
+		["EV_TOGGLE_ANCHOR", 0],
 		["EV_RESIZE", 0],
 		["EV_SHOW", 0],
 		["EV_HIDE", 0]
@@ -14153,6 +14572,11 @@ function create_gclass$9(gclass_name) {
 			ac_node_click$3,
 			null
 		],
+		[
+			"EV_TOGGLE_ANCHOR",
+			ac_toggle_anchor$1,
+			null
+		],
 		[
 			"EV_RESIZE",
 			ac_resize$1,
@@ -20715,123 +21139,6 @@ function register_c_yui_treedb_topic_with_form() {
 	return create_gclass$5(GCLASS_NAME$5);
 }
 //#endregion
-//#region src/lib_graph.js
-/************************************************************
-*  Add class to elements selected
-************************************************************/
-function addClasses($container, selector, ...classNames) {
-	$container.querySelectorAll(selector).forEach((el) => el.classList.add(...classNames));
-}
-/************************************************************
-*  Remove class from elements selected
-************************************************************/
-function removeClasses($container, selector, ...classNames) {
-	$container.querySelectorAll(selector).forEach((el) => el.classList.remove(...classNames));
-}
-/************************************************************
-*  Toggle class to elements selected
-************************************************************/
-function toggleClasses($container, selector, ...classNames) {
-	$container.querySelectorAll(selector).forEach((el) => classNames.forEach((cls) => el.classList.toggle(cls)));
-}
-/************************************************************
-*  Remove child elements
-************************************************************/
-function removeChildElements($element) {
-	$element.innerHTML = "";
-}
-/************************************************************
-*  Disable/Enable elements
-************************************************************/
-function disableElements($container, selector) {
-	$container.querySelectorAll(selector).forEach((el) => {
-		el.setAttribute("disabled", "");
-	});
-}
-function enableElements($container, selector) {
-	$container.querySelectorAll(selector).forEach((el) => {
-		if (el.hasAttribute("disabled")) el.removeAttribute("disabled");
-	});
-}
-/************************************************************
-*  Set or reset the color of 'enable submit action' state
-*  Color green
-************************************************************/
-function set_submit_state($container, selector, set) {
-	if (set) addClasses($container, selector, "color_submit_state");
-	else removeClasses($container, selector, "color_submit_state");
-}
-/************************************************************
-*  Set or reset the color of 'enable cancel action' state
-*  Color red
-************************************************************/
-function set_cancel_state($container, selector, set) {
-	if (set) addClasses($container, selector, "color_cancel_state");
-	else removeClasses($container, selector, "color_cancel_state");
-}
-/************************************************************
-*  Set or reset the color of 'enable actived' state
-*  Color orange
-************************************************************/
-function set_active_state($container, selector, set) {
-	if (set) addClasses($container, selector, "color_active_state");
-	else removeClasses($container, selector, "color_active_state");
-}
-/************************************************************
-*  Set or reset the 'pressed' state of a TOGGLE.
-*
-*  Not one of the colours above: each of those names a KIND of
-*  action (create, pending, history, destructive), and a toggle
-*  is not an action -- it is a state the control is IN. So it
-*  looks pressed instead of changing category, which also keeps
-*  it out of the way of a neighbour wearing the same hue.
-************************************************************/
-function set_pressed_state($container, selector, set) {
-	if (set) addClasses($container, selector, "pressed_state");
-	else removeClasses($container, selector, "pressed_state");
-}
-/**
-* Returns a smart stroke color in `rgba()` format based on:
-* - The given fill color (hex or rgb[a])
-* - The current theme ('light' or 'dark')
-* - The adjustment factor (default 0.2)
-*
-* @param {string} fillColor - Fill color string
-* @param {string} theme - 'light' or 'dark'
-* @param {number} factor - Lighten/darken factor (default 0.2)
-* @returns {string} rgba(r, g, b, a)
-*/
-function getStrokeColor(fillColor, theme = "light", factor = .2) {
-	let r, g, b, a = 1;
-	if (fillColor.startsWith("#")) {
-		let hex = fillColor.slice(1);
-		if (hex.length === 3 || hex.length === 4) hex = hex.split("").map((c) => c + c).join("");
-		if (hex.length === 6) {
-			r = parseInt(hex.slice(0, 2), 16);
-			g = parseInt(hex.slice(2, 4), 16);
-			b = parseInt(hex.slice(4, 6), 16);
-		} else if (hex.length === 8) {
-			r = parseInt(hex.slice(0, 2), 16);
-			g = parseInt(hex.slice(2, 4), 16);
-			b = parseInt(hex.slice(4, 6), 16);
-			a = parseInt(hex.slice(6, 8), 16) / 255;
-		} else throw new Error("Unsupported hex format");
-	} else if (fillColor.startsWith("rgb")) {
-		const match = fillColor.match(/rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)/);
-		if (!match) throw new Error("Invalid rgb()/rgba() format.");
-		r = parseInt(match[1], 10);
-		g = parseInt(match[2], 10);
-		b = parseInt(match[3], 10);
-		if (match[4] !== void 0) a = parseFloat(match[4]);
-	} else throw new Error("Unsupported color format.");
-	const luminance = (.299 * r + .587 * g + .114 * b) / 255;
-	let lighten;
-	if (theme === "dark") lighten = luminance < .7;
-	else lighten = luminance < .3;
-	const adjust = (v) => lighten ? Math.min(255, Math.floor(v + (255 - v) * factor)) : Math.max(0, Math.floor(v * (1 - factor)));
-	return `rgba(${adjust(r)}, ${adjust(g)}, ${adjust(b)}, ${a.toFixed(3)})`;
-}
-//#endregion
 //#region src/treedb_node_label.js
 /***********************************************************************
 *          treedb_node_label.js
@@ -47699,6 +48006,13 @@ var ICONS = `<svg xmlns="http://www.w3.org/2000/svg">
             stroke="currentColor" stroke-width="40"
             stroke-dasharray="59 36"/>
     </symbol>
+    <!-- location-crosshairs (anchor the camera on one element).
+         The SAME path as the DOM toolbars and their yi-location-crosshairs
+         mask: the two toolbars sit in one console, and a control that
+         does one thing has to be drawn one way. -->
+    <symbol id="g6-icon-anchor" viewBox="0 0 576 512">
+        <path fill="currentColor" d="M288-16c17.7 0 32 14.3 32 32l0 18.3c98.1 14 175.7 91.6 189.7 189.7l18.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-18.3 0c-14 98.1-91.6 175.7-189.7 189.7l0 18.3c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-18.3C157.9 463.7 80.3 386.1 66.3 288L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l18.3 0C80.3 125.9 157.9 48.3 256 34.3L256 16c0-17.7 14.3-32 32-32zM128 256a160 160 0 1 0 320 0 160 160 0 1 0 -320 0zm160-96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/>
+    </symbol>
     <!-- floppy-disk (save) -->
     <symbol id="g6-icon-save" viewBox="0 0 448 512">
         <path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32L64 32zm32 96c0-17.7 14.3-32 32-32l160 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-160 0c-17.7 0-32-14.3-32-32l0-64zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>
@@ -47892,6 +48206,9 @@ var attrs_table$4 = [
 	SDATA_END()
 ];
 var PRIVATE_DATA$4 = {
+	anchor_id: "",
+	anchor_state: "off",
+	last_zoom: 1,
 	_xy: 100,
 	_edge_seq: 0,
 	_history_paused: false,
@@ -48188,6 +48505,15 @@ function configure_events(gobj) {
 		update_node_icon_position(gobj);
 		update_link_icon_position(gobj);
 		update_zoom_readout(gobj);
+		let z = priv.last_zoom;
+		try {
+			z = priv.graph.getZoom();
+		} catch (e) {
+			return;
+		}
+		if (z === priv.last_zoom) return;
+		priv.last_zoom = z;
+		if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	});
 	priv._on_language_changed = () => {
 		update_toolbar(gobj);
@@ -48425,6 +48751,12 @@ function configure_toolbar(gobj) {
 					value: "reset",
 					className: "EV_ZOOM_RESET",
 					title: t("actual size")
+				},
+				{
+					id: "g6-icon-anchor",
+					value: "anchor",
+					className: "EV_TOGGLE_ANCHOR" + (priv.anchor_state !== "off" ? " pressed_state" : "") + (priv.anchor_state === "arming" ? " color_pending_state" : ""),
+					title: anchor_title(priv.anchor_state)
 				}
 			];
 			if (priv.edit_mode) items.push({
@@ -48466,6 +48798,9 @@ function configure_toolbar(gobj) {
 				case "reset":
 					gobj_send_event(gobj, "EV_ZOOM_RESET", {}, gobj);
 					break;
+				case "anchor":
+					gobj_send_event(gobj, "EV_TOGGLE_ANCHOR", {}, gobj);
+					break;
 				case "auto-fit":
 					gobj_send_event(gobj, "EV_AUTO_FIT", {}, gobj);
 					break;
@@ -49476,12 +49811,12 @@ function graph_find_nodes(gobj, term) {
 async function graph_zoom_in(gobj) {
 	let graph = gobj.priv.graph;
 	const z = graph.getZoom();
-	await graph.zoomTo(z * 1.1);
+	after_camera(gobj, graph.zoomTo(z * 1.1));
 }
 async function graph_zoom_out(gobj) {
 	let graph = gobj.priv.graph;
 	const z = graph.getZoom();
-	await graph.zoomTo(z * .9);
+	after_camera(gobj, graph.zoomTo(z * .9));
 }
 async function graph_render(gobj) {
 	await gobj.priv.graph.render();
@@ -52482,7 +52817,56 @@ function ac_zoom_out(gobj, event, kw, src) {
 	return 0;
 }
 function ac_zoom_reset(gobj, event, kw, src) {
-	gobj.priv.graph.zoomTo(1);
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (priv.anchor_state === "on" && priv.anchor_id) after_camera(gobj, graph.zoomTo(1));
+	else graph.zoomTo(1);
+	return 0;
+}
+/************************************************************
+*  What the anchor button says it will do next.
+************************************************************/
+function anchor_title(state) {
+	if (state === "arming") return t("click the element to centre on");
+	if (state === "on") return t("centred: click to release");
+	return t("anchor view");
+}
+/************************************************************
+*  Every camera action ends the same way once an anchor is
+*  set: the thing you were reading goes back to the middle.
+*
+*  Chained on the promise G6 returns rather than run beside it
+*  -- centring before the zoom has finished centres the OLD
+*  view, and the reader watches the node slide away and come
+*  back.
+************************************************************/
+function after_camera(gobj, moved) {
+	let priv = gobj.priv;
+	if (priv.anchor_state !== "on" || !priv.anchor_id) return;
+	Promise.resolve(moved).then(function() {
+		yui_graph_center_on(priv.graph, priv.anchor_id);
+	}).catch(function() {});
+}
+/************************************************************
+*  Arm the anchor, or let it go.
+*
+*  Three states and one button, so a press ADVANCES: with no
+*  target it starts waiting for one, and with a target it
+*  releases.  Pressing it while it waits is a cancel, which is
+*  what somebody who pressed it by mistake will try.
+*
+*  Unlike the DOM toolbars, the button is not repainted in
+*  place: this toolbar is a G6 plugin that rebuilds its whole
+*  item list, and the pressed classes are baked into that list.
+************************************************************/
+function ac_toggle_anchor(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "off") priv.anchor_state = "arming";
+	else {
+		priv.anchor_state = "off";
+		priv.anchor_id = "";
+	}
+	update_toolbar(gobj);
 	return 0;
 }
 /************************************************************
@@ -52656,6 +53040,13 @@ function ac_node_click$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	let node_id = kw.evt.target.id;
+	if (priv.anchor_state === "arming") {
+		priv.anchor_id = node_id;
+		priv.anchor_state = "on";
+		update_toolbar(gobj);
+		yui_graph_center_on(graph, node_id);
+		return 0;
+	}
 	try {
 		let nodedata = graph.getNodeData(node_id);
 		if (nodedata && nodedata.data && nodedata.data.desc) {
@@ -52917,6 +53308,11 @@ function create_gclass$4(gclass_name) {
 			ac_zoom_reset,
 			null
 		],
+		[
+			"EV_TOGGLE_ANCHOR",
+			ac_toggle_anchor,
+			null
+		],
 		[
 			"EV_TOGGLE_TOOLBARS",
 			ac_toggle_toolbars,
@@ -53030,6 +53426,7 @@ function create_gclass$4(gclass_name) {
 		["EV_ZOOM_IN", 0],
 		["EV_ZOOM_OUT", 0],
 		["EV_ZOOM_RESET", 0],
+		["EV_TOGGLE_ANCHOR", 0],
 		["EV_TOGGLE_TOOLBARS", 0],
 		["EV_AUTO_FIT", 0],
 		["EV_ZOOM_SELECTION", 0],