@yuneta/gobj-ui 7.23.28 → 7.23.29

package/dist/gobj-ui.es.js

@@ -9706,6 +9706,42 @@ function yui_graph_update_anchor($container, state) {
 *   nothing to centre right now".
 ************************************************************/
 var __centring__ = /* @__PURE__ */ new WeakMap();
+/************************************************************
+*   Put `node_id` at a GIVEN point of the viewport.
+*
+*   What "the graph does not jump when I fold something" is
+*   made of: read where the card is, rebuild the layout, put
+*   that card back where it was. Everything that did not move
+*   in the layout stays put with it.
+************************************************************/
+async function yui_graph_place_at(graph, node_id, viewport_xy) {
+	if (!graph || !node_id || !viewport_xy) return false;
+	try {
+		if (typeof graph.getElementPosition !== "function" || typeof graph.getCanvasCenter !== "function" || typeof graph.translateTo !== "function") return false;
+		let z = graph.getZoom() || 1;
+		let c = graph.getCanvasCenter();
+		let n = graph.getElementPosition(node_id);
+		await graph.translateTo([(c[0] - n[0]) * z + (viewport_xy[0] - c[0]), (c[1] - n[1]) * z + (viewport_xy[1] - c[1])]);
+		return true;
+	} catch (e) {
+		return false;
+	}
+}
+/************************************************************
+*   Where `node_id` is right now, in viewport pixels.
+*
+*   The pair of the call above: read it before a rebuild, hand
+*   it back after, and the node has not moved on screen even
+*   though the layout under it changed.
+************************************************************/
+function yui_graph_viewport_of(graph, node_id) {
+	if (!graph || !node_id) return null;
+	try {
+		return graph.getViewportByCanvas(graph.getElementPosition(node_id));
+	} catch (e) {
+		return null;
+	}
+}
 async function yui_graph_center_on(graph, node_id) {
 	if (!graph || !node_id) return false;
 	let st = __centring__.get(graph);
@@ -10576,6 +10612,7 @@ var PRIVATE_DATA$11 = {
 	_resize_raf: 0,
 	search: "",
 	collapsed: null,
+	reserved: null,
 	match_count: 0,
 	find_timer: null,
 	fold_listener: null,
@@ -10587,7 +10624,8 @@ var PRIVATE_DATA$11 = {
 	anchor_path: "",
 	anchor_state: "off",
 	last_zoom: 1,
-	center_posted: false
+	center_posted: false,
+	pending_keep: null
 };
 var __gclass__$11 = null;
 var __layout_registered__$1 = false;
@@ -10697,6 +10735,7 @@ function type_color(type, dark) {
 function mt_create$11(gobj) {
 	let priv = gobj.priv;
 	priv.collapsed = /* @__PURE__ */ new Set();
+	priv.reserved = /* @__PURE__ */ new Map();
 	priv.search = "";
 	priv.canvas_id = "json-canvas-" + clean_name(gobj_name(gobj));
 	gobj_write_str_attr(gobj, "canvas_id", priv.canvas_id);
@@ -10796,7 +10835,11 @@ function build_ui$10(gobj) {
 			evt.stopPropagation();
 			evt.preventDefault();
 			if (evt.type !== "click") return;
-			gobj_send_event(gobj, "EV_TOGGLE_FOLD", { path: $handle.getAttribute("data-fold-path") }, gobj);
+			let $card = $handle.closest ? $handle.closest(".JSON_CARD") : null;
+			gobj_send_event(gobj, "EV_TOGGLE_FOLD", {
+				path: $handle.getAttribute("data-fold-path"),
+				keep: $card ? $card.getAttribute("data-json-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`);
@@ -11077,6 +11120,8 @@ var BEHAVIORS_READING$1 = [
 var BEHAVIORS_PICKING$1 = ["drag-canvas", ZOOM_CANVAS$1];
 var CARD_HEADER_H$1 = 24;
 var CARD_ROW_H$1 = 22;
+var H_GAP = 60;
+var V_GAP = 50;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
 	if (!foldable) return FOLD_SPACER;
 	let label = folded ? "+" + branches : "−";
@@ -11198,7 +11243,10 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 		lines.push(build_cell_html(key, value, type, dark, matched, fold));
 	}
 	if (parent_id && is_pure_collection(kw)) {
-		if (priv.collapsed.has(path)) return parent_id;
+		if (priv.collapsed.has(path)) {
+			push_fold_phantom(gobj, path, parent_id, parent_port, nodes, edges);
+			return parent_id;
+		}
 		for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, parent_id, parent_port);
 		return parent_id;
 	}
@@ -11284,7 +11332,10 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 		if (parent_port) edge.style.sourcePort = parent_port;
 		edges.push(edge);
 	}
-	if (folded) return group_id;
+	if (folded) {
+		push_fold_phantom(gobj, path, group_id, "", nodes, edges);
+		return group_id;
+	}
 	for (let pending of pending_complex) build_json_nodes(gobj, add_segment(path, pending.key), pending.value, nodes, edges, group_id, pending.port);
 	return group_id;
 }
@@ -11315,8 +11366,16 @@ function load_json(gobj) {
 		});
 		graph.render().then(() => {
 			reanchor$1(gobj);
-			paint_anchor_mark(gobj);
+			paint_anchor_mark$1(gobj);
 			if (preserve_view) {
+				let keep = priv.pending_keep;
+				priv.pending_keep = null;
+				if (keep) {
+					for (let n of nodes) if (n.data && n.data.path === keep.path) {
+						yui_graph_place_at(graph, n.id, [keep.x, keep.y]);
+						break;
+					}
+				}
 				yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
 				return;
 			}
@@ -11368,6 +11427,108 @@ function update_find_result(gobj) {
 	priv.$find_result.classList.remove("is-hidden");
 }
 /************************************************************
+*  The invisible child a fold leaves behind.
+*
+*  It is the whole of "nothing moves when I fold": the layout
+*  is a plain tree that centres a parent over its children, so
+*  the only way to keep the survivors still is to leave the
+*  space where it was, in the order it was, as a CHILD. A width
+*  reserved as a number would still have to be placed, and
+*  appending it moves every sibling by half of it.
+*
+*  A `rect` and not an `html` node: nothing is drawn, and a
+*  DOM element per fold would be a card nobody can see but the
+*  Inspector would show.
+************************************************************/
+function push_fold_phantom(gobj, path, parent_id, parent_port, nodes, edges) {
+	let width = gobj.priv.reserved.get(path) || 0;
+	if (!(width > 0) || !parent_id) return;
+	let id = gen_node_id$1(gobj);
+	nodes.push({
+		id,
+		type: "rect",
+		data: {
+			path,
+			phantom: true
+		},
+		style: {
+			size: [width, 1],
+			fill: "transparent",
+			stroke: "transparent",
+			opacity: 0,
+			pointerEvents: "none"
+		}
+	});
+	edges.push({
+		source: parent_id,
+		target: id,
+		style: {
+			opacity: 0,
+			endArrow: false,
+			sourcePort: parent_port || void 0
+		}
+	});
+}
+/************************************************************
+*  The width the children a fold is about to hide are taking
+*  RIGHT NOW, measured with the layout's own numbers.
+*
+*  `card_path` is the card that will lose them; `under` limits
+*  it to the ones hanging from one key of that card, which is
+*  the case of a container that has no card of its own -- its
+*  children hang from the parent, so its fold is a hole in the
+*  PARENT.
+************************************************************/
+function group_width_of(gobj, card_path, under) {
+	let priv = gobj.priv;
+	if (!priv.graph) return 0;
+	try {
+		let by_id = {};
+		let card_id = "";
+		for (let node of priv.graph.getNodeData()) {
+			if (!node || !node.data) continue;
+			by_id[node.id] = node;
+			if (node.data.path === card_path) card_id = node.id;
+		}
+		if (!card_id) return 0;
+		let prefix = under ? under + "`" : "";
+		let sum = 0;
+		let n = 0;
+		for (let edge of priv.graph.getEdgeData()) {
+			if (!edge || edge.source !== card_id) continue;
+			let kid = by_id[edge.target];
+			if (!kid) continue;
+			if (prefix && String(kid.data.path).indexOf(prefix) !== 0) continue;
+			sum += kid.data.subtree_width || 0;
+			n++;
+		}
+		return n ? sum + H_GAP * (n - 1) : 0;
+	} catch (e) {
+		return 0;
+	}
+}
+/************************************************************
+*  The screen spot of the card at `path`, to be given back
+*  after the rebuild. Null when it has no card of its own --
+*  a pure collection -- and then nothing anchors and the
+*  camera simply stays where it was.
+************************************************************/
+function keep_of(gobj, path) {
+	let priv = gobj.priv;
+	if (empty_string(path) || !priv.graph) return null;
+	try {
+		for (let node of priv.graph.getNodeData()) if (node && node.data && node.data.path === path) {
+			let vp = yui_graph_viewport_of(priv.graph, node.id);
+			return vp ? {
+				path,
+				x: vp[0],
+				y: vp[1]
+			} : null;
+		}
+	} catch (e) {}
+	return null;
+}
+/************************************************************
 *  Clear and reload.
 *      {preserve_view: true}
 *          keep the current zoom and translate (no fitView) —
@@ -11409,8 +11570,6 @@ var JsonTreeLayout = class extends BaseLayout {
 				h
 			};
 		}
-		const H_GAP = 60;
-		const V_GAP = 50;
 		let subtree_widths = {};
 		function calc_subtree_width(node_id) {
 			let kids = children_map[node_id] || [];
@@ -11427,6 +11586,7 @@ var JsonTreeLayout = class extends BaseLayout {
 			return subtree_widths[node_id];
 		}
 		for (let root of roots) calc_subtree_width(root.id);
+		for (let node of nodes) if (node.data) node.data.subtree_width = subtree_widths[node.id];
 		let positions = {};
 		function position_node(node_id, x, y) {
 			positions[node_id] = {
@@ -11474,9 +11634,16 @@ var JsonTreeLayout = class extends BaseLayout {
 /************************************************************
 *
 ************************************************************/
+function priv_reset_folds(gobj) {
+	gobj.priv.collapsed.clear();
+	gobj.priv.reserved.clear();
+}
 function ac_load_data$1(gobj, event, kw, src) {
 	if (kw.path !== void 0) gobj_write_str_attr(gobj, "path", kw.path);
-	if (kw.data !== void 0) gobj_write_attr(gobj, "json_data", kw.data);
+	if (kw.data !== void 0) {
+		gobj_write_attr(gobj, "json_data", kw.data);
+		priv_reset_folds(gobj);
+	}
 	refresh_json(gobj);
 	return 0;
 }
@@ -11531,8 +11698,16 @@ function ac_toggle_fold(gobj, event, kw, src) {
 		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);
+	let card = kw && kw.keep || path;
+	if (priv.collapsed.has(path)) {
+		priv.collapsed.delete(path);
+		priv.reserved.delete(path);
+	} else {
+		let w = group_width_of(gobj, card, card === path ? "" : path);
+		priv.collapsed.add(path);
+		if (w > 0) priv.reserved.set(path, w);
+	}
+	priv.pending_keep = keep_of(gobj, kw && kw.keep || path);
 	refresh_json(gobj, { preserve_view: true });
 	update_find_result(gobj);
 	return 0;
@@ -11559,6 +11734,7 @@ function ac_expand_all$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	if (priv.collapsed.size === 0) return 0;
 	priv.collapsed.clear();
+	priv.reserved.clear();
 	refresh_json(gobj);
 	update_find_result(gobj);
 	return 0;
@@ -11575,6 +11751,7 @@ function ac_collapse_all$2(gobj, event, kw, src) {
 	if (empty_string(path)) path = "`";
 	collect_foldable_paths(json_data, path, paths, true);
 	priv.collapsed = new Set(paths);
+	priv.reserved.clear();
 	refresh_json(gobj);
 	update_find_result(gobj);
 	return 0;
@@ -11664,7 +11841,7 @@ function set_picking_mode$1(gobj, picking) {
 *   each time and the mark would otherwise survive only until the
 *   next fold.
 ************************************************************/
-function paint_anchor_mark(gobj) {
+function paint_anchor_mark$1(gobj) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$container) return;
@@ -11679,7 +11856,7 @@ function paint_anchor_mark(gobj) {
 function ac_center_anchor$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	priv.center_posted = false;
-	paint_anchor_mark(gobj);
+	paint_anchor_mark$1(gobj);
 	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	return 0;
 }
@@ -11700,7 +11877,7 @@ function ac_toggle_anchor$2(gobj, event, kw, src) {
 		priv.anchor_path = "";
 	}
 	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
-	paint_anchor_mark(gobj);
+	paint_anchor_mark$1(gobj);
 	set_picking_mode$1(gobj, priv.anchor_state === "arming");
 	return 0;
 }
@@ -13245,6 +13422,71 @@ var BEHAVIORS_READING = [
 	"drag-element"
 ];
 var BEHAVIORS_PICKING = ["drag-canvas", ZOOM_CANVAS];
+var VIEW_STORE_PREFIX = "yui_gobj_tree_view:";
+function view_store_key(gobj) {
+	return VIEW_STORE_PREFIX + gobj_name(gobj);
+}
+function restore_view_shape(gobj) {
+	let priv = gobj.priv;
+	let state = load_view_state(gobj);
+	if (!state) return;
+	if (state.layout && LAYOUTS[state.layout]) {
+		gobj_write_str_attr(gobj, "layout", state.layout);
+		if (priv.$layout_select) priv.$layout_select.value = state.layout;
+	}
+	if (state.collapsed && typeof state.collapsed === "object") priv.collapse_state = Object.assign({}, state.collapsed);
+}
+function restore_view_state(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let state = load_view_state(gobj);
+	if (!graph || !state) return false;
+	let done = false;
+	priv.restoring = true;
+	try {
+		if (typeof state.zoom === "number" && state.zoom > 0) {
+			graph.zoomTo(state.zoom);
+			priv.last_zoom = state.zoom;
+			done = true;
+		}
+		if (Array.isArray(state.position) && state.position.length >= 2) {
+			graph.translateTo([state.position[0], state.position[1]]);
+			done = true;
+		}
+		if (state.anchor) {
+			priv.anchor_name = state.anchor;
+			priv.anchor_state = "on";
+			reanchor(gobj);
+			yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+			paint_anchor_mark(gobj);
+		}
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: cannot restore the saved view: ${e}`);
+	} finally {
+		priv.restoring = false;
+	}
+	yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
+	return done;
+}
+function save_view_state(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (!graph || priv.restoring) return;
+	let state = {
+		layout: gobj_read_str_attr(gobj, "layout"),
+		collapsed: priv.collapse_state || {},
+		anchor: priv.anchor_state === "on" ? priv.anchor_name : ""
+	};
+	try {
+		state.zoom = graph.getZoom();
+		state.position = graph.getPosition();
+	} catch (e) {}
+	kw_set_local_storage_value(view_store_key(gobj), state);
+}
+function load_view_state(gobj) {
+	let state = kw_get_local_storage_value(view_store_key(gobj), null, false);
+	return state && typeof state === "object" ? state : null;
+}
 var PRIVATE_DATA$9 = {
 	canvas_id: "",
 	graph: null,
@@ -13262,6 +13504,8 @@ var PRIVATE_DATA$9 = {
 	anchor_id: "",
 	anchor_name: "",
 	anchor_state: "off",
+	restoring: false,
+	restored: false,
 	last_zoom: 1
 };
 var __gclass__$9 = null;
@@ -13468,6 +13712,7 @@ function mt_create$9(gobj) {
 *          Framework Method: Start
 ***************************************************************/
 function mt_start$9(gobj) {
+	restore_view_shape(gobj);
 	build_graph$2(gobj);
 	load_tree(gobj);
 }
@@ -13605,8 +13850,12 @@ function build_popover(gobj, $container) {
 	$header.appendChild($title);
 	let $close = document.createElement("button");
 	$close.type = "button";
+	$close.className = "GOBJ_TREE_POPOVER_CLOSE";
 	$close.textContent = "×";
 	$close.title = t("close");
+	$close.setAttribute("data-i18n-title", "close");
+	$close.setAttribute("aria-label", t("close"));
+	$close.setAttribute("data-i18n-aria-label", "close");
 	$close.style.cssText = `
         background: transparent;
         border: none;
@@ -13740,6 +13989,7 @@ function build_graph$2(gobj) {
 		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);
+		save_view_state(gobj);
 	});
 	graph.on(NodeEvent.CLICK, (evt) => {
 		gobj_send_event(gobj, "EV_NODE_CLICK", { evt }, gobj);
@@ -13889,7 +14139,7 @@ function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, c
 	if (compact) {
 		let compact_label = escapeHtml(instance_name ? gclass_name + "^" + instance_name : gclass_name);
 		node_html = `
-<div style="
+<div class="GOBJ_CARD" data-gobj-name="${escapeHtml(full_name)}" style="
     width: ${width}px;
     height: ${height}px;
     background: ${cs.bg};
@@ -13926,7 +14176,7 @@ function build_gobj_nodes(gobj, target_gobj, nodes, edges, parent_id, is_root, c
 		}
 		let badges_html = badges.map((b) => `<span style="font-size:10px; padding:0 5px; margin-right:4px; background:${cs.tagbg}; color:${cs.border}; border:1px solid ${cs.border}; border-radius:6px; white-space:nowrap;">${b}</span>`).join("");
 		node_html = `
-<div style="
+<div class="GOBJ_CARD" data-gobj-name="${escapeHtml(full_name)}" style="
     width: ${width}px;
     height: ${height}px;
     background: ${cs.bg};
@@ -14034,11 +14284,16 @@ function load_tree(gobj) {
 		});
 		graph.render().then(() => {
 			reanchor(gobj);
+			paint_anchor_mark(gobj);
 			if (anchor) {
 				restore_view_anchored(gobj, anchor);
 				return;
 			}
 			if (preserve_view) return;
+			if (!priv.restored) {
+				priv.restored = true;
+				if (restore_view_state(gobj)) 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;
@@ -14469,6 +14724,7 @@ var GobjLanesHLayout = class extends BaseLayout {
 *
 ************************************************************/
 function ac_refresh$3(gobj, event, kw, src) {
+	save_view_state(gobj);
 	refresh_tree(gobj);
 	return 0;
 }
@@ -14496,6 +14752,8 @@ function ac_change_layout(gobj, event, kw, src) {
 	gobj_write_str_attr(gobj, "layout", new_key);
 	if (priv.$layout_select && priv.$layout_select.value !== new_key) priv.$layout_select.value = new_key;
 	apply_layout(gobj);
+	save_view_state(gobj);
+	save_view_state(gobj);
 	refresh_tree(gobj);
 	return 0;
 }
@@ -14515,6 +14773,7 @@ function ac_toggle_collapse(gobj, event, kw, src) {
 		priv.collapse_state[node_data.full_name] = "expanded";
 		for (let child_info of node_data.direct_children || []) if (child_info.has_grandchildren) priv.collapse_state[child_info.full_name] = "collapsed";
 	} else priv.collapse_state[node_data.full_name] = "collapsed";
+	save_view_state(gobj);
 	refresh_tree(gobj, { anchor });
 	return 0;
 }
@@ -14594,10 +14853,31 @@ function reanchor(gobj) {
 ************************************************************/
 function ac_center_anchor$1(gobj, event, kw, src) {
 	let priv = gobj.priv;
+	paint_anchor_mark(gobj);
+	save_view_state(gobj);
 	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	return 0;
 }
 /************************************************************
+*   Mark the card the camera is holding.
+*
+*   A class on the card's own element and not a G6 node state:
+*   G6 paints no state style on an html node.
+*
+*   Re-applied after every rebuild, because the cards are new
+*   DOM each time and the mark would otherwise last until the
+*   next expand.
+************************************************************/
+function paint_anchor_mark(gobj) {
+	let priv = gobj.priv;
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return;
+	for (let $card of $container.querySelectorAll(".GOBJ_CARD_ANCHORED")) $card.classList.remove("GOBJ_CARD_ANCHORED");
+	if (priv.anchor_state !== "on" || !priv.anchor_name) return;
+	let $it = $container.querySelector(".GOBJ_CARD[data-gobj-name=\"" + CSS.escape(priv.anchor_name) + "\"]");
+	if ($it) $it.classList.add("GOBJ_CARD_ANCHORED");
+}
+/************************************************************
 *   Reading, or picking the node to anchor.
 ************************************************************/
 function set_picking_mode(gobj, picking) {
@@ -14625,6 +14905,8 @@ function ac_toggle_anchor$1(gobj, event, kw, src) {
 	}
 	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
 	set_picking_mode(gobj, priv.anchor_state === "arming");
+	paint_anchor_mark(gobj);
+	save_view_state(gobj);
 	return 0;
 }
 /************************************************************
@@ -14708,6 +14990,7 @@ function ac_node_click$3(gobj, event, kw, src) {
 function ac_show$6(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
+	save_view_state(gobj);
 	refresh_tree(gobj);
 	if (graph) {
 		let $canvas = document.getElementById(priv.canvas_id);
@@ -49026,7 +49309,7 @@ function configure_toolbar(gobj) {
 				{
 					id: "g6-icon-anchor",
 					value: "anchor",
-					className: "EV_TOGGLE_ANCHOR" + (priv.anchor_state !== "off" ? " pressed_state" : "") + (priv.anchor_state === "arming" ? " color_pending_state" : ""),
+					className: "EV_TOGGLE_ANCHOR" + (priv.anchor_state === "on" ? " pressed_state" : "") + (priv.anchor_state === "arming" ? " color_pending_state" : ""),
 					title: anchor_title(priv.anchor_state)
 				}
 			];
@@ -51935,15 +52218,15 @@ function refresh_minimap(gobj) {
 *  same three-way choice — it lived inline in the theme refresh and is
 *  shared now. Returns null for a node that carries no desc.
 ************************************************************/
-function node_innerHTML_of(nd, theme, highlight, selected) {
+function node_innerHTML_of(nd, theme, highlight, selected, anchored) {
 	if (!nd || !nd.data || !nd.data.desc) return null;
 	let desc = nd.data.desc;
 	let record = nd.data.record || {};
 	let label = node_label(desc, record);
 	switch (desc.node_treedb_type) {
-		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight, selected);
-		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected);
-		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected);
+		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight, selected, anchored);
+		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected, anchored);
+		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected, anchored);
 	}
 	return null;
 }
@@ -51964,7 +52247,7 @@ function repaint_cards(gobj, ids) {
 	let selected = new Set(priv._selected_paint_ids || []);
 	let updates = [];
 	for (let id of ids) {
-		let html = node_innerHTML_of(graph.getNodeData(id), priv.theme, focus.has(id), selected.has(id));
+		let html = node_innerHTML_of(graph.getNodeData(id), priv.theme, focus.has(id), selected.has(id), priv.anchor_state === "on" && id === priv.anchor_id);
 		if (html !== null) updates.push({
 			id,
 			style: { innerHTML: html }
@@ -52038,6 +52321,23 @@ function refresh_default_edges_theme(gobj, theme) {
 *  it, which is also the order that reads correctly when only one
 *  of them is on.
 ************************************************************/
+/************************************************************
+*  The mark of the card the CAMERA is holding.
+*
+*  An outline and not another ring, and DASHED: the two rings
+*  already mean things here -- amber is a find match or a
+*  focused topic, blue is the selection -- and a third solid
+*  ring would be a third thing to learn in the same channel.
+*  A dash is a different channel, so it reads beside either of
+*  them, and it says "provisional" the way a camera state is.
+*
+*  The same dash the other two viewers draw: this is one
+*  feature with one control, and it should not be three
+*  drawings.
+************************************************************/
+function anchor_outline(anchored) {
+	return anchored ? "outline: 3px dashed #fa8c16; outline-offset: 2px;" : "";
+}
 function ring_shadow(highlight, selected, base_shadow) {
 	let rings = [];
 	if (highlight) rings.push(`0 0 0 4px ${HIGHLIGHT_HALO}`);
@@ -52052,7 +52352,7 @@ function ring_shadow(highlight, selected, base_shadow) {
 *  but lighter (1px border, no shadow, single line). The name is
 *  always legible (ellipsis + native title tooltip on overflow).
 ************************************************************/
-function build_chip_innerHTML(color, theme, icon, label, key, highlight, selected) {
+function build_chip_innerHTML(color, theme, icon, label, key, highlight, selected, anchored) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let bg = dark ? `color-mix(in srgb, ${color} 30%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${dark ? "#1b2230" : "#ffffff"})`;
@@ -52065,13 +52365,14 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
         margin-right: 6px; flex: 0 0 auto;
     "/>`;
 	return `
-<div title="${escapeHtml(title)}" style="
+<div class="TREEDB_CARD" title="${escapeHtml(title)}" style="
     box-sizing: border-box;
     width: 100%;
     height: 100%;
     background: ${bg};
     border: ${highlight ? "3px" : "1px"} solid ${border};
     ${ring_shadow(highlight, selected, "")}
+    ${anchor_outline(anchored)}
     border-radius: 8px;
     color: ${text_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -52097,7 +52398,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
 *  colour is kept (per-topic differentiation) but softened via
 *  color-mix instead of a harsh saturated fill. Theme-aware.
 ************************************************************/
-function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight, selected) {
+function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight, selected, anchored) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let surface = dark ? "#1b2230" : "#ffffff";
@@ -52132,7 +52433,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     ">${escapeHtml(topic_name)}</div>`;
 	return `
-<div title="${escapeHtml(title)}" style="
+<div class="TREEDB_CARD" title="${escapeHtml(title)}" style="
     box-sizing: border-box;
     width: 100%;
     height: 100%;
@@ -52140,6 +52441,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     border: ${highlight ? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
     ${ring_shadow(highlight, selected, shadow)}
+    ${anchor_outline(anchored)}
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     display: flex;
@@ -53123,12 +53425,14 @@ function after_camera(gobj, moved) {
 ************************************************************/
 function ac_toggle_anchor(gobj, event, kw, src) {
 	let priv = gobj.priv;
+	let was = priv.anchor_id;
 	if (priv.anchor_state === "off") priv.anchor_state = "arming";
 	else {
 		priv.anchor_state = "off";
 		priv.anchor_id = "";
 	}
 	update_toolbar(gobj);
+	if (was) repaint_cards(gobj, /* @__PURE__ */ new Set([was]));
 	return 0;
 }
 /************************************************************
@@ -53306,6 +53610,7 @@ function ac_node_click$2(gobj, event, kw, src) {
 		priv.anchor_id = node_id;
 		priv.anchor_state = "on";
 		update_toolbar(gobj);
+		repaint_cards(gobj, /* @__PURE__ */ new Set([node_id]));
 		gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}

package/package.json

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