@yuneta/gobj-ui 7.23.24 → 7.23.26

package/dist/gobj-ui.cjs.js

@@ -9679,7 +9679,7 @@ 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");
+	set_pressed_state($container, ".EV_TOGGLE_ANCHOR", state === "on");
 	$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";
@@ -9695,21 +9695,55 @@ function yui_graph_update_anchor($container, state) {
 *   the zoom is what the reader asked for, the centring is what
 *   keeps the thing they are reading under their eyes.
 *
+*   The translate is computed and applied HERE rather than
+*   delegated to `graph.focusElement()`, which is the obvious
+*   call and does NOT work on these graphs. Measured: it
+*   resolves, having computed the very offset wanted -- `[0,
+*   306]` for a card 306px above centre -- and the camera does
+*   not move. `getPosition()` reads the same before and after,
+*   and so does the card's box on screen. Three public calls do
+*   move it, so that is what is used.
+*
 *   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
+*   fold, a G6 missing one of these calls -- 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) {
+var __centring__ = /* @__PURE__ */ new WeakMap();
+async function yui_graph_center_on(graph, node_id) {
 	if (!graph || !node_id) return false;
+	let st = __centring__.get(graph);
+	if (st && st.running) {
+		st.again = node_id;
+		return true;
+	}
+	__centring__.set(graph, {
+		running: true,
+		again: null
+	});
 	try {
 		if (typeof graph.getElementData === "function" && !graph.getElementData(node_id)) return false;
-		if (typeof graph.focusElement !== "function") return false;
-		graph.focusElement(node_id);
+		if (typeof graph.getElementPosition !== "function" || typeof graph.getViewportByCanvas !== "function" || typeof graph.getCanvasCenter !== "function" || typeof graph.translateTo !== "function") return false;
+		for (let i = 0; i < 3; i++) {
+			let at = graph.getViewportByCanvas(graph.getElementPosition(node_id));
+			let want = graph.getCanvasCenter();
+			let dx = want[0] - at[0];
+			let dy = want[1] - at[1];
+			if (Math.abs(dx) < 1 && Math.abs(dy) < 1) break;
+			let pos = graph.getPosition();
+			await graph.translateTo([pos[0] + dx, pos[1] + dy]);
+		}
 		return true;
 	} catch (e) {
 		return false;
+	} finally {
+		let pending = __centring__.get(graph);
+		__centring__.set(graph, {
+			running: false,
+			again: null
+		});
+		if (pending && pending.again) yui_graph_center_on(graph, pending.again);
 	}
 }
 /************************************************************
@@ -10924,11 +10958,7 @@ function build_graph$3(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: [
-			"drag-canvas",
-			"zoom-canvas",
-			"drag-element"
-		]
+		behaviors: BEHAVIORS_READING$1.slice()
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on(_antv_g6.NodeEvent.CLICK, (evt) => {
@@ -11035,6 +11065,12 @@ function build_cell_html(key, value, type, dark, matched, fold) {
 *  forever.  `+3` and `−` need no language.
 ************************************************************/
 var FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
+var BEHAVIORS_READING$1 = [
+	"drag-canvas",
+	"zoom-canvas",
+	"drag-element"
+];
+var BEHAVIORS_PICKING$1 = ["drag-canvas", "zoom-canvas"];
 var CARD_HEADER_H$1 = 24;
 var CARD_ROW_H$1 = 22;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
@@ -11171,7 +11207,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 	let min_width = Math.max(180, label.length * 9);
 	let card_height = CARD_HEADER_H$1 + lines.length * CARD_ROW_H$1;
 	let node_html = `
-<div style="
+<div class="JSON_CARD" data-json-path="${(0, _yuneta_gobj_js.escapeHtml)(path)}" style="
     min-width: ${min_width}px;
     background: ${colors.bg};
     border: ${border_width}px ${is_dict ? "dashed" : "solid"} ${border_color};
@@ -11275,6 +11311,7 @@ function load_json(gobj) {
 		});
 		graph.render().then(() => {
 			reanchor$1(gobj);
+			paint_anchor_mark(gobj);
 			if (preserve_view) {
 				yui_graph_update_zoom((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), priv.graph);
 				return;
@@ -11596,6 +11633,52 @@ function reanchor$1(gobj) {
 	yui_graph_update_anchor((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), priv.anchor_state);
 }
 /************************************************************
+*   Reading, or picking the node to anchor.
+*
+*   Two visible consequences and one invisible: the cursor says
+*   a click is expected, the mount says which mode it is in for
+*   anyone reading the DOM, and node dragging stands aside so a
+*   click that drifts is still a click.
+************************************************************/
+function set_picking_mode$1(gobj, picking) {
+	let graph = gobj.priv.graph;
+	if (graph && typeof graph.setBehaviors === "function") graph.setBehaviors((picking ? BEHAVIORS_PICKING$1 : BEHAVIORS_READING$1).slice());
+	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	if ($container) {
+		let $mount = $container.querySelector(".json-graph-container");
+		if ($mount) $mount.classList.toggle("JSON_GRAPH_PICKING", !!picking);
+	}
+}
+/************************************************************
+*   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, so `setElementState`
+*   would select it correctly and show nothing.
+*
+*   Re-applied after every rebuild, because the cards are new DOM
+*   each time and the mark would otherwise survive only until the
+*   next fold.
+************************************************************/
+function paint_anchor_mark(gobj) {
+	let priv = gobj.priv;
+	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	if (!$container) return;
+	for (let $card of $container.querySelectorAll(".JSON_CARD_ANCHORED")) $card.classList.remove("JSON_CARD_ANCHORED");
+	if (priv.anchor_state !== "on" || !priv.anchor_path) return;
+	let $it = $container.querySelector(".JSON_CARD[data-json-path=\"" + CSS.escape(priv.anchor_path) + "\"]");
+	if ($it) $it.classList.add("JSON_CARD_ANCHORED");
+}
+/************************************************************
+*   Centre on the anchor, one cycle after it was chosen.
+************************************************************/
+function ac_center_anchor$2(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	paint_anchor_mark(gobj);
+	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
+	return 0;
+}
+/************************************************************
 *   Arm the anchor, or let it go.
 *
 *   Three states and one button, so a press ADVANCES: with no
@@ -11612,6 +11695,8 @@ function ac_toggle_anchor$2(gobj, event, kw, src) {
 		priv.anchor_path = "";
 	}
 	yui_graph_update_anchor((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), priv.anchor_state);
+	paint_anchor_mark(gobj);
+	set_picking_mode$1(gobj, priv.anchor_state === "arming");
 	return 0;
 }
 /************************************************************
@@ -11678,7 +11763,8 @@ function ac_node_click$4(gobj, event, kw, src) {
 		priv.anchor_path = nodedata && nodedata.data ? nodedata.data.path : "";
 		priv.anchor_state = "on";
 		yui_graph_update_anchor((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), priv.anchor_state);
-		yui_graph_center_on(graph, node_id);
+		set_picking_mode$1(gobj, false);
+		(0, _yuneta_gobj_js.gobj_post_event)(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
 	if (nodedata && nodedata.data) (0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_JSON_ITEM_CLICKED", {
@@ -11819,6 +11905,11 @@ function create_gclass$11(gclass_name) {
 			ac_toggle_anchor$2,
 			null
 		],
+		[
+			"EV_CENTER_ANCHOR",
+			ac_center_anchor$2,
+			null
+		],
 		[
 			"EV_RESIZE",
 			ac_resize$2,
@@ -11850,6 +11941,7 @@ function create_gclass$11(gclass_name) {
 		["EV_CENTER", 0],
 		["EV_NODE_CLICK", 0],
 		["EV_TOGGLE_ANCHOR", 0],
+		["EV_CENTER_ANCHOR", 0],
 		["EV_RESIZE", 0],
 		["EV_SHOW", 0],
 		["EV_HIDE", 0],
@@ -13138,6 +13230,12 @@ var attrs_table$9 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "collapse_threshold", 0, 10, "Auto-collapse a node whose direct children exceed this number. 0 disables auto-collapse."),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
+var BEHAVIORS_READING = [
+	"drag-canvas",
+	"zoom-canvas",
+	"drag-element"
+];
+var BEHAVIORS_PICKING = ["drag-canvas", "zoom-canvas"];
 var PRIVATE_DATA$9 = {
 	canvas_id: "",
 	graph: null,
@@ -13619,11 +13717,7 @@ function build_graph$2(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: [
-			"drag-canvas",
-			"zoom-canvas",
-			"drag-element"
-		]
+		behaviors: BEHAVIORS_READING.slice()
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on("aftertransform", () => {
@@ -14487,6 +14581,24 @@ function reanchor(gobj) {
 	yui_graph_update_anchor((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), priv.anchor_state);
 }
 /************************************************************
+*   Centre on the anchor, one cycle after it was chosen.
+************************************************************/
+function ac_center_anchor$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
+	return 0;
+}
+/************************************************************
+*   Reading, or picking the node to anchor.
+************************************************************/
+function set_picking_mode(gobj, picking) {
+	let graph = gobj.priv.graph;
+	if (graph && typeof graph.setBehaviors === "function") graph.setBehaviors((picking ? BEHAVIORS_PICKING : BEHAVIORS_READING).slice());
+	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	let $mount = $container ? $container.querySelector(".gobj-tree-container") : null;
+	if ($mount) $mount.classList.toggle("GOBJ_TREE_PICKING", !!picking);
+}
+/************************************************************
 *   Arm the anchor, or let it go.
 *
 *   Three states and one button, so a press ADVANCES: with no
@@ -14503,6 +14615,7 @@ function ac_toggle_anchor$1(gobj, event, kw, src) {
 		priv.anchor_name = "";
 	}
 	yui_graph_update_anchor((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), priv.anchor_state);
+	set_picking_mode(gobj, priv.anchor_state === "arming");
 	return 0;
 }
 /************************************************************
@@ -14571,7 +14684,8 @@ function ac_node_click$3(gobj, event, kw, src) {
 		priv.anchor_name = node_data.full_name || "";
 		priv.anchor_state = "on";
 		yui_graph_update_anchor((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"), priv.anchor_state);
-		yui_graph_center_on(graph, node_id);
+		set_picking_mode(gobj, false);
+		(0, _yuneta_gobj_js.gobj_post_event)(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
 	let client_x = kw.evt && kw.evt.client ? kw.evt.client.x : 0;
@@ -14655,6 +14769,7 @@ function create_gclass$9(gclass_name) {
 		["EV_CENTER", 0],
 		["EV_NODE_CLICK", 0],
 		["EV_TOGGLE_ANCHOR", 0],
+		["EV_CENTER_ANCHOR", 0],
 		["EV_RESIZE", 0],
 		["EV_SHOW", 0],
 		["EV_HIDE", 0]
@@ -14719,6 +14834,11 @@ function create_gclass$9(gclass_name) {
 			ac_toggle_anchor$1,
 			null
 		],
+		[
+			"EV_CENTER_ANCHOR",
+			ac_center_anchor$1,
+			null
+		],
 		[
 			"EV_RESIZE",
 			ac_resize$1,
@@ -37560,7 +37680,7 @@ Text.PARSED_STYLE_LIST = new Set([].concat(_toConsumableArray(DisplayObject.PARS
 * * register property @see https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty
 * * CSS Layout API
 */
-var CSS = {
+var CSS$1 = {
 	/**
 	* <number>
 	* @see https://drafts.csswg.org/css-values-4/#number-value
@@ -47609,7 +47729,7 @@ var e = 1e-4;
 		syntax: PropertySyntax.ANGLE
 	}
 ].forEach(function(property) {
-	CSS.registerProperty(property);
+	CSS$1.registerProperty(property);
 });
 var polarToCartesian = function polarToCartesian(centerX, centerY, radius, angleInRadian) {
 	return {
@@ -52931,6 +53051,14 @@ function ac_zoom_reset(gobj, event, kw, src) {
 /************************************************************
 *  What the anchor button says it will do next.
 ************************************************************/
+function ac_center_anchor(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
+	return 0;
+}
+/************************************************************
+*  What the anchor button says it will do next.
+************************************************************/
 function anchor_title(state) {
 	if (state === "arming") return (0, i18next.t)("click the element to centre on");
 	if (state === "on") return (0, i18next.t)("centred: click to release");
@@ -53149,7 +53277,7 @@ function ac_node_click$2(gobj, event, kw, src) {
 		priv.anchor_id = node_id;
 		priv.anchor_state = "on";
 		update_toolbar(gobj);
-		yui_graph_center_on(graph, node_id);
+		(0, _yuneta_gobj_js.gobj_post_event)(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
 	try {
@@ -53418,6 +53546,11 @@ function create_gclass$4(gclass_name) {
 			ac_toggle_anchor,
 			null
 		],
+		[
+			"EV_CENTER_ANCHOR",
+			ac_center_anchor,
+			null
+		],
 		[
 			"EV_TOGGLE_TOOLBARS",
 			ac_toggle_toolbars,
@@ -53532,6 +53665,7 @@ function create_gclass$4(gclass_name) {
 		["EV_ZOOM_OUT", 0],
 		["EV_ZOOM_RESET", 0],
 		["EV_TOGGLE_ANCHOR", 0],
+		["EV_CENTER_ANCHOR", 0],
 		["EV_TOGGLE_TOOLBARS", 0],
 		["EV_AUTO_FIT", 0],
 		["EV_ZOOM_SELECTION", 0],

package/dist/gobj-ui.es.js

@@ -1,4 +1,4 @@
-import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_change_state, gobj_command, gobj_create, gobj_create_pure_child, gobj_create_service, gobj_current_state, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_start_tree, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_console_log_enabled, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
+import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_change_state, gobj_command, gobj_create, gobj_create_pure_child, gobj_create_service, gobj_current_state, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_post_event, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_start_tree, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_console_log_enabled, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
 import i18next, { t } from "i18next";
 import TomSelect from "tom-select";
 import { createJSONEditor } from "vanilla-jsoneditor";
@@ -9674,7 +9674,7 @@ 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");
+	set_pressed_state($container, ".EV_TOGGLE_ANCHOR", state === "on");
 	$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";
@@ -9690,21 +9690,55 @@ function yui_graph_update_anchor($container, state) {
 *   the zoom is what the reader asked for, the centring is what
 *   keeps the thing they are reading under their eyes.
 *
+*   The translate is computed and applied HERE rather than
+*   delegated to `graph.focusElement()`, which is the obvious
+*   call and does NOT work on these graphs. Measured: it
+*   resolves, having computed the very offset wanted -- `[0,
+*   306]` for a card 306px above centre -- and the camera does
+*   not move. `getPosition()` reads the same before and after,
+*   and so does the card's box on screen. Three public calls do
+*   move it, so that is what is used.
+*
 *   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
+*   fold, a G6 missing one of these calls -- 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) {
+var __centring__ = /* @__PURE__ */ new WeakMap();
+async function yui_graph_center_on(graph, node_id) {
 	if (!graph || !node_id) return false;
+	let st = __centring__.get(graph);
+	if (st && st.running) {
+		st.again = node_id;
+		return true;
+	}
+	__centring__.set(graph, {
+		running: true,
+		again: null
+	});
 	try {
 		if (typeof graph.getElementData === "function" && !graph.getElementData(node_id)) return false;
-		if (typeof graph.focusElement !== "function") return false;
-		graph.focusElement(node_id);
+		if (typeof graph.getElementPosition !== "function" || typeof graph.getViewportByCanvas !== "function" || typeof graph.getCanvasCenter !== "function" || typeof graph.translateTo !== "function") return false;
+		for (let i = 0; i < 3; i++) {
+			let at = graph.getViewportByCanvas(graph.getElementPosition(node_id));
+			let want = graph.getCanvasCenter();
+			let dx = want[0] - at[0];
+			let dy = want[1] - at[1];
+			if (Math.abs(dx) < 1 && Math.abs(dy) < 1) break;
+			let pos = graph.getPosition();
+			await graph.translateTo([pos[0] + dx, pos[1] + dy]);
+		}
 		return true;
 	} catch (e) {
 		return false;
+	} finally {
+		let pending = __centring__.get(graph);
+		__centring__.set(graph, {
+			running: false,
+			again: null
+		});
+		if (pending && pending.again) yui_graph_center_on(graph, pending.again);
 	}
 }
 /************************************************************
@@ -10919,11 +10953,7 @@ function build_graph$3(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: [
-			"drag-canvas",
-			"zoom-canvas",
-			"drag-element"
-		]
+		behaviors: BEHAVIORS_READING$1.slice()
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on(NodeEvent.CLICK, (evt) => {
@@ -11030,6 +11060,12 @@ function build_cell_html(key, value, type, dark, matched, fold) {
 *  forever.  `+3` and `−` need no language.
 ************************************************************/
 var FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
+var BEHAVIORS_READING$1 = [
+	"drag-canvas",
+	"zoom-canvas",
+	"drag-element"
+];
+var BEHAVIORS_PICKING$1 = ["drag-canvas", "zoom-canvas"];
 var CARD_HEADER_H$1 = 24;
 var CARD_ROW_H$1 = 22;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
@@ -11166,7 +11202,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
 	let min_width = Math.max(180, label.length * 9);
 	let card_height = CARD_HEADER_H$1 + lines.length * CARD_ROW_H$1;
 	let node_html = `
-<div style="
+<div class="JSON_CARD" data-json-path="${escapeHtml(path)}" style="
     min-width: ${min_width}px;
     background: ${colors.bg};
     border: ${border_width}px ${is_dict ? "dashed" : "solid"} ${border_color};
@@ -11270,6 +11306,7 @@ function load_json(gobj) {
 		});
 		graph.render().then(() => {
 			reanchor$1(gobj);
+			paint_anchor_mark(gobj);
 			if (preserve_view) {
 				yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
 				return;
@@ -11591,6 +11628,52 @@ function reanchor$1(gobj) {
 	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
 }
 /************************************************************
+*   Reading, or picking the node to anchor.
+*
+*   Two visible consequences and one invisible: the cursor says
+*   a click is expected, the mount says which mode it is in for
+*   anyone reading the DOM, and node dragging stands aside so a
+*   click that drifts is still a click.
+************************************************************/
+function set_picking_mode$1(gobj, picking) {
+	let graph = gobj.priv.graph;
+	if (graph && typeof graph.setBehaviors === "function") graph.setBehaviors((picking ? BEHAVIORS_PICKING$1 : BEHAVIORS_READING$1).slice());
+	let $container = gobj_read_attr(gobj, "$container");
+	if ($container) {
+		let $mount = $container.querySelector(".json-graph-container");
+		if ($mount) $mount.classList.toggle("JSON_GRAPH_PICKING", !!picking);
+	}
+}
+/************************************************************
+*   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, so `setElementState`
+*   would select it correctly and show nothing.
+*
+*   Re-applied after every rebuild, because the cards are new DOM
+*   each time and the mark would otherwise survive only until the
+*   next fold.
+************************************************************/
+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(".JSON_CARD_ANCHORED")) $card.classList.remove("JSON_CARD_ANCHORED");
+	if (priv.anchor_state !== "on" || !priv.anchor_path) return;
+	let $it = $container.querySelector(".JSON_CARD[data-json-path=\"" + CSS.escape(priv.anchor_path) + "\"]");
+	if ($it) $it.classList.add("JSON_CARD_ANCHORED");
+}
+/************************************************************
+*   Centre on the anchor, one cycle after it was chosen.
+************************************************************/
+function ac_center_anchor$2(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	paint_anchor_mark(gobj);
+	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
+	return 0;
+}
+/************************************************************
 *   Arm the anchor, or let it go.
 *
 *   Three states and one button, so a press ADVANCES: with no
@@ -11607,6 +11690,8 @@ 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);
+	set_picking_mode$1(gobj, priv.anchor_state === "arming");
 	return 0;
 }
 /************************************************************
@@ -11673,7 +11758,8 @@ function ac_node_click$4(gobj, event, kw, src) {
 		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);
+		set_picking_mode$1(gobj, false);
+		gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
 	if (nodedata && nodedata.data) gobj_publish_event(gobj, "EV_JSON_ITEM_CLICKED", {
@@ -11814,6 +11900,11 @@ function create_gclass$11(gclass_name) {
 			ac_toggle_anchor$2,
 			null
 		],
+		[
+			"EV_CENTER_ANCHOR",
+			ac_center_anchor$2,
+			null
+		],
 		[
 			"EV_RESIZE",
 			ac_resize$2,
@@ -11845,6 +11936,7 @@ function create_gclass$11(gclass_name) {
 		["EV_CENTER", 0],
 		["EV_NODE_CLICK", 0],
 		["EV_TOGGLE_ANCHOR", 0],
+		["EV_CENTER_ANCHOR", 0],
 		["EV_RESIZE", 0],
 		["EV_SHOW", 0],
 		["EV_HIDE", 0],
@@ -13133,6 +13225,12 @@ var attrs_table$9 = [
 	SDATA(data_type_t.DTP_INTEGER, "collapse_threshold", 0, 10, "Auto-collapse a node whose direct children exceed this number. 0 disables auto-collapse."),
 	SDATA_END()
 ];
+var BEHAVIORS_READING = [
+	"drag-canvas",
+	"zoom-canvas",
+	"drag-element"
+];
+var BEHAVIORS_PICKING = ["drag-canvas", "zoom-canvas"];
 var PRIVATE_DATA$9 = {
 	canvas_id: "",
 	graph: null,
@@ -13614,11 +13712,7 @@ function build_graph$2(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: [
-			"drag-canvas",
-			"zoom-canvas",
-			"drag-element"
-		]
+		behaviors: BEHAVIORS_READING.slice()
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on("aftertransform", () => {
@@ -14482,6 +14576,24 @@ function reanchor(gobj) {
 	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
 }
 /************************************************************
+*   Centre on the anchor, one cycle after it was chosen.
+************************************************************/
+function ac_center_anchor$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
+	return 0;
+}
+/************************************************************
+*   Reading, or picking the node to anchor.
+************************************************************/
+function set_picking_mode(gobj, picking) {
+	let graph = gobj.priv.graph;
+	if (graph && typeof graph.setBehaviors === "function") graph.setBehaviors((picking ? BEHAVIORS_PICKING : BEHAVIORS_READING).slice());
+	let $container = gobj_read_attr(gobj, "$container");
+	let $mount = $container ? $container.querySelector(".gobj-tree-container") : null;
+	if ($mount) $mount.classList.toggle("GOBJ_TREE_PICKING", !!picking);
+}
+/************************************************************
 *   Arm the anchor, or let it go.
 *
 *   Three states and one button, so a press ADVANCES: with no
@@ -14498,6 +14610,7 @@ function ac_toggle_anchor$1(gobj, event, kw, src) {
 		priv.anchor_name = "";
 	}
 	yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+	set_picking_mode(gobj, priv.anchor_state === "arming");
 	return 0;
 }
 /************************************************************
@@ -14566,7 +14679,8 @@ function ac_node_click$3(gobj, event, kw, src) {
 		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);
+		set_picking_mode(gobj, false);
+		gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
 	let client_x = kw.evt && kw.evt.client ? kw.evt.client.x : 0;
@@ -14650,6 +14764,7 @@ function create_gclass$9(gclass_name) {
 		["EV_CENTER", 0],
 		["EV_NODE_CLICK", 0],
 		["EV_TOGGLE_ANCHOR", 0],
+		["EV_CENTER_ANCHOR", 0],
 		["EV_RESIZE", 0],
 		["EV_SHOW", 0],
 		["EV_HIDE", 0]
@@ -14714,6 +14829,11 @@ function create_gclass$9(gclass_name) {
 			ac_toggle_anchor$1,
 			null
 		],
+		[
+			"EV_CENTER_ANCHOR",
+			ac_center_anchor$1,
+			null
+		],
 		[
 			"EV_RESIZE",
 			ac_resize$1,
@@ -37555,7 +37675,7 @@ Text.PARSED_STYLE_LIST = new Set([].concat(_toConsumableArray(DisplayObject.PARS
 * * register property @see https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty
 * * CSS Layout API
 */
-var CSS = {
+var CSS$1 = {
 	/**
 	* <number>
 	* @see https://drafts.csswg.org/css-values-4/#number-value
@@ -47604,7 +47724,7 @@ var e = 1e-4;
 		syntax: PropertySyntax.ANGLE
 	}
 ].forEach(function(property) {
-	CSS.registerProperty(property);
+	CSS$1.registerProperty(property);
 });
 var polarToCartesian = function polarToCartesian(centerX, centerY, radius, angleInRadian) {
 	return {
@@ -52926,6 +53046,14 @@ function ac_zoom_reset(gobj, event, kw, src) {
 /************************************************************
 *  What the anchor button says it will do next.
 ************************************************************/
+function ac_center_anchor(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
+	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");
@@ -53144,7 +53272,7 @@ function ac_node_click$2(gobj, event, kw, src) {
 		priv.anchor_id = node_id;
 		priv.anchor_state = "on";
 		update_toolbar(gobj);
-		yui_graph_center_on(graph, node_id);
+		gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
 	try {
@@ -53413,6 +53541,11 @@ function create_gclass$4(gclass_name) {
 			ac_toggle_anchor,
 			null
 		],
+		[
+			"EV_CENTER_ANCHOR",
+			ac_center_anchor,
+			null
+		],
 		[
 			"EV_TOGGLE_TOOLBARS",
 			ac_toggle_toolbars,
@@ -53527,6 +53660,7 @@ function create_gclass$4(gclass_name) {
 		["EV_ZOOM_OUT", 0],
 		["EV_ZOOM_RESET", 0],
 		["EV_TOGGLE_ANCHOR", 0],
+		["EV_CENTER_ANCHOR", 0],
 		["EV_TOGGLE_TOOLBARS", 0],
 		["EV_AUTO_FIT", 0],
 		["EV_ZOOM_SELECTION", 0],

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -42,6 +42,7 @@ import {
     gobj_subscribe_event,
     gobj_publish_event,
     gobj_send_event,
+    gobj_post_event,
     gobj_save_persistent_attrs,
     clean_name,
     sprintf,
@@ -7505,6 +7506,19 @@ function ac_zoom_reset(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  What the anchor button says it will do next.
+ ************************************************************/
+function ac_center_anchor(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+
+    if(priv.anchor_state === "on" && priv.anchor_id) {
+        yui_graph_center_on(priv.graph, priv.anchor_id);
+    }
+    return 0;
+}
+
 /************************************************************
  *  What the anchor button says it will do next.
  ************************************************************/
@@ -7824,7 +7838,11 @@ function ac_node_click(gobj, event, kw, src)
         priv.anchor_id = node_id;
         priv.anchor_state = "on";
         update_toolbar(gobj);
-        yui_graph_center_on(graph, node_id);
+
+        /*  POSTED, not made here: a camera move issued inside G6's click
+         *  dispatch is swallowed -- see the note in yui_graph_center_on.
+         *  An event to itself and not a timer: a deferral is not a TIME.  */
+        gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
         return 0;
     }
 
@@ -8140,6 +8158,7 @@ function create_gclass(gclass_name)
             ["EV_ZOOM_OUT",                 ac_zoom_out,            null],
             ["EV_ZOOM_RESET",               ac_zoom_reset,          null],
             ["EV_TOGGLE_ANCHOR",            ac_toggle_anchor,       null],
+            ["EV_CENTER_ANCHOR",            ac_center_anchor,       null],
             ["EV_TOGGLE_TOOLBARS",          ac_toggle_toolbars,     null],
             ["EV_AUTO_FIT",                 ac_auto_fit,            null],
             ["EV_ZOOM_SELECTION",           ac_zoom_selection,      null],
@@ -8190,6 +8209,7 @@ function create_gclass(gclass_name)
         ["EV_ZOOM_OUT",                 0],
         ["EV_ZOOM_RESET",               0],
         ["EV_TOGGLE_ANCHOR",            0],
+        ["EV_CENTER_ANCHOR",            0],
         ["EV_TOGGLE_TOOLBARS",          0],
         ["EV_AUTO_FIT",                 0],
         ["EV_ZOOM_SELECTION",           0],

package/src/c_yui_gobj_tree_js.js

@@ -21,6 +21,7 @@ import {
     gobj_read_attr,
     gobj_write_attr,
     gobj_send_event,
+    gobj_post_event,
     gobj_write_str_attr,
     gobj_read_str_attr,
     gobj_publish_event,
@@ -89,6 +90,20 @@ SDATA(data_type_t.DTP_INTEGER,  "collapse_threshold", 0, 10, "Auto-collapse a no
 SDATA_END()
 ];
 
+/*
+ *  What the graph listens for while you are READING it, and while you
+ *  are PICKING the node to anchor.
+ *
+ *  The difference is `drag-element`: with it on, a click that drifts
+ *  two pixels -- which is every click a hand makes -- becomes a drag,
+ *  G6 fires no `node:click`, and the pick silently does not happen.
+ *  Swapped with `setBehaviors()` and not with a behavior's `enable`,
+ *  which REPLACES the behavior's own default test rather than adding
+ *  to it.
+ */
+const BEHAVIORS_READING = ['drag-canvas', 'zoom-canvas', 'drag-element'];
+const BEHAVIORS_PICKING = ['drag-canvas', 'zoom-canvas'];
+
 let PRIVATE_DATA = {
     canvas_id: "",
     graph: null,
@@ -653,17 +668,7 @@ function build_graph(gobj)
 
         layout: layout_cfg.g6_layout,
 
-        behaviors: [
-            'drag-canvas',
-            'zoom-canvas',
-            /*  Move a card by dragging it. The position is not kept --
-             *  this tree is rebuilt from the live gobj tree on every
-             *  refresh -- and it is still worth having: pulling two
-             *  cards apart to read the lines between them is the whole
-             *  use of it. `enable` REPLACES a behavior's default rather
-             *  than adding to it, so it is not passed.  */
-            'drag-element',
-        ],
+        behaviors: BEHAVIORS_READING.slice(),
     });
 
     if(priv.theme) {
@@ -2000,6 +2005,37 @@ function reanchor(gobj)
     yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
 }
 
+/************************************************************
+ *   Centre on the anchor, one cycle after it was chosen.
+ ************************************************************/
+function ac_center_anchor(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+
+    if(priv.anchor_state === "on" && priv.anchor_id) {
+        yui_graph_center_on(priv.graph, priv.anchor_id);
+    }
+    return 0;
+}
+
+/************************************************************
+ *   Reading, or picking the node to anchor.
+ ************************************************************/
+function set_picking_mode(gobj, picking)
+{
+    let graph = gobj.priv.graph;
+
+    if(graph && typeof graph.setBehaviors === "function") {
+        graph.setBehaviors((picking? BEHAVIORS_PICKING: BEHAVIORS_READING).slice());
+    }
+
+    let $container = gobj_read_attr(gobj, "$container");
+    let $mount = $container? $container.querySelector('.gobj-tree-container'): null;
+    if($mount) {
+        $mount.classList.toggle('GOBJ_TREE_PICKING', !!picking);
+    }
+}
+
 /************************************************************
  *   Arm the anchor, or let it go.
  *
@@ -2021,6 +2057,7 @@ function ac_toggle_anchor(gobj, event, kw, src)
     }
 
     yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+    set_picking_mode(gobj, priv.anchor_state === "arming");
     return 0;
 }
 
@@ -2125,7 +2162,12 @@ function ac_node_click(gobj, event, kw, src)
         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);
+        set_picking_mode(gobj, false);
+
+        /*  POSTED, not made here: a camera move issued inside G6's click
+         *  dispatch is swallowed -- see the note in yui_graph_center_on.
+         *  An event to itself and not a timer: a deferral is not a TIME.  */
+        gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
         return 0;
     }
 
@@ -2255,6 +2297,7 @@ function create_gclass(gclass_name)
             ["EV_CENTER",               ac_center,              null],
             ["EV_NODE_CLICK",           ac_node_click,          null],
             ["EV_TOGGLE_ANCHOR",        ac_toggle_anchor,       null],
+            ["EV_CENTER_ANCHOR",        ac_center_anchor,       null],
             ["EV_RESIZE",               ac_resize,              null],
             ["EV_SHOW",                 ac_show,                null],
             ["EV_HIDE",                 ac_hide,                null],
@@ -2277,6 +2320,7 @@ function create_gclass(gclass_name)
         ["EV_CENTER",               0],
         ["EV_NODE_CLICK",           0],
         ["EV_TOGGLE_ANCHOR",        0],
+        ["EV_CENTER_ANCHOR",        0],
         ["EV_RESIZE",               0],
         ["EV_SHOW",                 0],
         ["EV_HIDE",                 0],

package/src/c_yui_json.css

@@ -293,6 +293,38 @@
     z-index: 1;
 }
 
+/*
+ *  Picking the node to anchor. The pointer says a click is expected --
+ *  without it the only sign the graph is waiting for one is a button
+ *  at the far end of a toolbar.
+ */
+.C_YUI_JSON .json-graph-container.JSON_GRAPH_PICKING,
+.C_YUI_JSON .json-graph-container.JSON_GRAPH_PICKING * {
+    cursor: crosshair;
+}
+
+/*
+ *  The card the camera is holding.
+ *
+ *  It has to say so ON THE CARD: the toolbar button knows an anchor is
+ *  set, and knowing WHICH node it is was left to the reader remembering
+ *  what they clicked -- which is not a mark, it is a memory test.
+ *
+ *  An outline and not a fill: the card's own colours mean things (a
+ *  dashed border is a dict, a solid one a list, the header carries the
+ *  group's hue), and a mark that repaints any of them would be saying
+ *  two things with one channel. `outline` also draws OUTSIDE the box,
+ *  so it cannot move a single row.
+ *
+ *  Amber, the same "this one, right now" the toolbar's arming state
+ *  uses. It is not one of the palette's action colours because it is
+ *  not an action.
+ */
+.C_YUI_JSON .JSON_CARD_ANCHORED {
+    outline: 3px solid #fa8c16;
+    outline-offset: 2px;
+}
+
 /*
  *  The graph mount, once its cards can be DRAGGED.
  *

package/src/c_yui_json_graph.js

@@ -25,6 +25,7 @@ import {
     gobj_read_attr,
     gobj_write_attr,
     gobj_send_event,
+    gobj_post_event,
     gobj_find_service,
     gobj_short_name,
     gobj_read_str_attr,
@@ -691,24 +692,7 @@ function build_graph(gobj)
 
         layout: layout_cfg.g6_layout,
 
-        behaviors: [
-            'drag-canvas',
-            'zoom-canvas',
-            /*
-             *  Move a card by dragging it. The position is NOT kept:
-             *  the graph is rebuilt from the document on every refresh,
-             *  fold and layout change, and there is nothing here to
-             *  save it to -- this is a viewer over a value somebody
-             *  handed it, not a document of its own. Deliberate: being
-             *  able to pull two cards apart to read the lines between
-             *  them is worth having even when it lasts one session.
-             *
-             *  No `enable`: a behavior's `enable` REPLACES the default,
-             *  it does not add to it, and the default here is exactly
-             *  what is wanted.
-             */
-            'drag-element',
-        ],
+        behaviors: BEHAVIORS_READING.slice(),
     });
 
     if(priv.theme) {
@@ -898,6 +882,23 @@ function build_cell_html(key, value, type, dark, matched, fold)
  ************************************************************/
 const FOLD_SPACER = `<span style="width:24px; flex:0 0 auto;"></span>`;
 
+/*
+ *  What the graph listens for while you are READING it, and while you
+ *  are PICKING the node to anchor.
+ *
+ *  The difference is `drag-element`, and dropping it is not a detail:
+ *  with it on, a click that drifts two pixels -- which is every click a
+ *  hand makes -- becomes a drag, G6 fires no `node:click`, and the pick
+ *  silently does not happen. Measured: an instant click anchors, the
+ *  same click with 2px of movement does not.
+ *
+ *  Swapped with `setBehaviors()` and not with a behavior's `enable`,
+ *  which REPLACES the behavior's own default test rather than adding to
+ *  it -- the trap that made a card drag pan the canvas in 7.23.10.
+ */
+const BEHAVIORS_READING = ['drag-canvas', 'zoom-canvas', 'drag-element'];
+const BEHAVIORS_PICKING = ['drag-canvas', 'zoom-canvas'];
+
 /*
  *  The card's geometry, in ONE place.
  *
@@ -1151,8 +1152,21 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id, parent_port)
     let min_width = Math.max(180, label.length * 9);
     let card_height = CARD_HEADER_H + lines.length * CARD_ROW_H;
 
+    /*
+     *  The card carries its NAME and its PLACE in the document.
+     *
+     *  `JSON_CARD` because a gclass that builds DOM has to leave a tree
+     *  somebody can read in the Inspector, and until now every card here
+     *  was an anonymous `<div>` among the anonymous `<div>`s G6 stacks.
+     *
+     *  `data-json-path` because the anchor has to be able to find the
+     *  card it is holding: G6 paints no state style on an html node, so
+     *  the mark cannot be a node state and has to be a class on this
+     *  element -- and the path is what survives a rebuild, where the
+     *  node id does not.
+     */
     let node_html = `
-<div style="
+<div class="JSON_CARD" data-json-path="${escapeHtml(path)}" style="
     min-width: ${min_width}px;
     background: ${colors.bg};
     border: ${border_width}px ${is_dict ? 'dashed' : 'solid'} ${border_color};
@@ -1347,6 +1361,7 @@ function load_json(gobj)
             /*  Ids are generated per build: point the anchor at its path
              *  again before anybody asks the camera to go there.  */
             reanchor(gobj);
+            paint_anchor_mark(gobj);
 
             if(preserve_view) {
                 yui_graph_update_zoom(gobj_read_attr(gobj, "$container"), priv.graph);
@@ -1819,6 +1834,79 @@ function reanchor(gobj)
     yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
 }
 
+/************************************************************
+ *   Reading, or picking the node to anchor.
+ *
+ *   Two visible consequences and one invisible: the cursor says
+ *   a click is expected, the mount says which mode it is in for
+ *   anyone reading the DOM, and node dragging stands aside so a
+ *   click that drifts is still a click.
+ ************************************************************/
+function set_picking_mode(gobj, picking)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
+    if(graph && typeof graph.setBehaviors === "function") {
+        graph.setBehaviors((picking? BEHAVIORS_PICKING: BEHAVIORS_READING).slice());
+    }
+
+    let $container = gobj_read_attr(gobj, "$container");
+    if($container) {
+        let $mount = $container.querySelector('.json-graph-container');
+        if($mount) {
+            $mount.classList.toggle('JSON_GRAPH_PICKING', !!picking);
+        }
+    }
+}
+
+/************************************************************
+ *   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, so `setElementState`
+ *   would select it correctly and show nothing.
+ *
+ *   Re-applied after every rebuild, because the cards are new DOM
+ *   each time and the mark would otherwise survive only until the
+ *   next fold.
+ ************************************************************/
+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('.JSON_CARD_ANCHORED')) {
+        $card.classList.remove('JSON_CARD_ANCHORED');
+    }
+    if(priv.anchor_state !== "on" || !priv.anchor_path) {
+        return;
+    }
+    let $it = $container.querySelector(
+        '.JSON_CARD[data-json-path="' + CSS.escape(priv.anchor_path) + '"]'
+    );
+    if($it) {
+        $it.classList.add('JSON_CARD_ANCHORED');
+    }
+}
+
+/************************************************************
+ *   Centre on the anchor, one cycle after it was chosen.
+ ************************************************************/
+function ac_center_anchor(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+
+    paint_anchor_mark(gobj);
+    if(priv.anchor_state === "on" && priv.anchor_id) {
+        yui_graph_center_on(priv.graph, priv.anchor_id);
+    }
+    return 0;
+}
+
 /************************************************************
  *   Arm the anchor, or let it go.
  *
@@ -1840,6 +1928,8 @@ function ac_toggle_anchor(gobj, event, kw, src)
     }
 
     yui_graph_update_anchor(gobj_read_attr(gobj, "$container"), priv.anchor_state);
+    paint_anchor_mark(gobj);
+    set_picking_mode(gobj, priv.anchor_state === "arming");
     return 0;
 }
 
@@ -1931,7 +2021,23 @@ function ac_node_click(gobj, event, kw, src)
         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);
+        set_picking_mode(gobj, false);
+
+        /*
+         *  The camera move is POSTED, not made here.
+         *
+         *  A translate issued inside G6's click dispatch is swallowed:
+         *  measured, the call computes the right offset, resolves, and
+         *  the camera reads the same before and after -- while the very
+         *  same call from a zoom action centres the node exactly. So the
+         *  first thing an anchor did was nothing, which is what "I don't
+         *  see how it works" looks like.
+         *
+         *  An event to itself and not a timer: a deferral is not a TIME,
+         *  and writing it as one costs the name of what happens next in
+         *  the trace.
+         */
+        gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
         return 0;
     }
 
@@ -2057,6 +2163,7 @@ function create_gclass(gclass_name)
             ["EV_CENTER",               ac_center,              null],
             ["EV_NODE_CLICK",           ac_node_click,          null],
             ["EV_TOGGLE_ANCHOR",        ac_toggle_anchor,       null],
+            ["EV_CENTER_ANCHOR",        ac_center_anchor,       null],
             ["EV_RESIZE",               ac_resize,              null],
             ["EV_SHOW",                 ac_show,                null],
             ["EV_HIDE",                 ac_hide,                null],
@@ -2081,6 +2188,7 @@ function create_gclass(gclass_name)
         ["EV_CENTER",               0],
         ["EV_NODE_CLICK",           0],
         ["EV_TOGGLE_ANCHOR",        0],
+        ["EV_CENTER_ANCHOR",        0],
         ["EV_RESIZE",               0],
         ["EV_SHOW",                 0],
         ["EV_HIDE",                 0],

package/src/lib_graph.css

@@ -14,7 +14,11 @@
 .color_create_state {
     color: #1890ff !important;
 }
-.color_submit_state {
+/*  Orange is "needs attention, waiting on you". A toggle that is armed
+ *  and waiting for its target is exactly that and not a submit, so it
+ *  takes the same colour under a name that says so.  */
+.color_submit_state,
+.color_pending_state {
     color: #fa8c16 !important;
 }
 .color_active_state {
@@ -237,6 +241,36 @@
     border-radius: 4px;
 }
 
+/*
+ *  The same pressed look for a toggle in a DOM toolbar.
+ *
+ *  `pressed_state` was written for the G6 plugin toolbar and styled ONLY
+ *  there, so the two toolbars built by `yui_graph_camera.js` were given
+ *  the class and no rule: pressing the button changed nothing on screen,
+ *  which from the outside is indistinguishable from a button that does
+ *  not work.
+ *
+ *  `border-color` as well as the fill, or Bulma's own border stays and
+ *  the button reads as outlined-and-filled, which is neither state.
+ *  The `:hover` half is the same guard as above: without it, hovering a
+ *  pressed button hands it back to Bulma's rule and the toggle appears
+ *  to switch off under the pointer.
+ */
+/*  Picking the node to anchor, in the gobj tree: the pointer says a
+ *  click is expected, which is otherwise only announced by a button at
+ *  the far end of a toolbar.  */
+.gobj-tree-container.GOBJ_TREE_PICKING,
+.gobj-tree-container.GOBJ_TREE_PICKING * {
+    cursor: crosshair;
+}
+
+.button.pressed_state,
+.button.pressed_state:hover {
+    background-color: var(--bulma-text, #2e333d);
+    color: var(--bulma-background, #ffffff);
+    border-color: var(--bulma-text, #2e333d);
+}
+
 /*
  *  Touch: the context menu is a LIST OF COMMANDS, and G6 sizes its
  *  rows with `padding: 8px 12px` -- 34px, which is a mouse row. The

package/src/yui_graph_camera.js

@@ -191,7 +191,14 @@ export function yui_graph_update_anchor($container, state)
     if(!$btn) {
         return;     /*  a toolbar without the control: nothing to paint  */
     }
-    set_pressed_state($container, '.EV_TOGGLE_ANCHOR', state !== "off");
+    /*
+     *  PRESSED is "on", and only "on": pressed is the state the control
+     *  is IN, and while it is arming it is not in that state yet, it is
+     *  asking for something. That gets the attention colour instead --
+     *  which also keeps the two off each other, since an orange glyph on
+     *  the pressed fill is orange on near-white in dark and unreadable.
+     */
+    set_pressed_state($container, '.EV_TOGGLE_ANCHOR', state === "on");
     $btn.classList.toggle('color_pending_state', state === "arming");
     $btn.setAttribute("aria-pressed", (state === "on")? "true": "false");
 
@@ -211,28 +218,107 @@ export function yui_graph_update_anchor($container, state)
  *   the zoom is what the reader asked for, the centring is what
  *   keeps the thing they are reading under their eyes.
  *
+ *   The translate is computed and applied HERE rather than
+ *   delegated to `graph.focusElement()`, which is the obvious
+ *   call and does NOT work on these graphs. Measured: it
+ *   resolves, having computed the very offset wanted -- `[0,
+ *   306]` for a card 306px above centre -- and the camera does
+ *   not move. `getPosition()` reads the same before and after,
+ *   and so does the card's box on screen. Three public calls do
+ *   move it, so that is what is used.
+ *
  *   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
+ *   fold, a G6 missing one of these calls -- none of those is
  *   an error worth a log line per notch, they are all "there is
  *   nothing to centre right now".
  ************************************************************/
-export function yui_graph_center_on(graph, node_id)
+const __centring__ = new WeakMap();
+
+export async function yui_graph_center_on(graph, node_id)
 {
     if(!graph || !node_id) {
         return false;
     }
+
+    /*
+     *  ONE centring at a time, per graph.
+     *
+     *  This runs on every zoom notch, and one run is several awaited
+     *  camera moves. A wheel gesture is a BURST of notches, so without
+     *  this the runs overlap: each one measures a position another one
+     *  is in the middle of changing, and they walk the camera around
+     *  instead of converging -- which reads as a graph that pans and
+     *  never centres.
+     *
+     *  A request that arrives mid-run is not dropped, it is remembered:
+     *  the last one wins and runs once at the end, which is the only
+     *  one whose answer is still true.
+     */
+    let st = __centring__.get(graph);
+    if(st && st.running) {
+        st.again = node_id;
+        return true;
+    }
+    __centring__.set(graph, {running: true, again: null});
+
     try {
         if(typeof graph.getElementData === "function" && !graph.getElementData(node_id)) {
             return false;
         }
-        if(typeof graph.focusElement !== "function") {
+        if(typeof graph.getElementPosition !== "function" ||
+                typeof graph.getViewportByCanvas !== "function" ||
+                typeof graph.getCanvasCenter !== "function" ||
+                typeof graph.translateTo !== "function") {
             return false;
         }
-        graph.focusElement(node_id);
+
+        /*
+         *  MEASURE, MOVE, MEASURE AGAIN -- up to three times.
+         *
+         *  Not the arithmetic anybody would write first, and the reason
+         *  is worth keeping. The obvious call is `graph.focusElement()`,
+         *  which computes the very offset wanted and then does not move
+         *  the camera at all: measured on the JSON graph it resolves
+         *  with `getPosition()` reading identical before and after.
+         *  `translateBy()` (a RELATIVE transform) behaves the same way.
+         *  `translateTo()` (ABSOLUTE) does move it -- and the units of
+         *  its argument are not viewport pixels at any zoom but 1, so
+         *  one shot lands short or long by a factor nobody should have
+         *  to name.
+         *
+         *  Probing for that factor gives noise: the camera settles
+         *  asynchronously, so a position read straight after a
+         *  translate is a value halfway through. AWAITING each move and
+         *  measuring again needs no factor at all -- the direction is
+         *  right, so the residual falls to nothing in two or three
+         *  passes, and a graph whose maths change under us keeps
+         *  working.
+         *
+         *  The 1px floor is what stops it converging forever on the
+         *  rounding.
+         */
+        for(let i = 0; i < 3; i++) {
+            let at = graph.getViewportByCanvas(graph.getElementPosition(node_id));
+            let want = graph.getCanvasCenter();
+            let dx = want[0] - at[0];
+            let dy = want[1] - at[1];
+
+            if(Math.abs(dx) < 1 && Math.abs(dy) < 1) {
+                break;
+            }
+            let pos = graph.getPosition();
+            await graph.translateTo([pos[0] + dx, pos[1] + dy]);
+        }
         return true;
     } catch(e) {
         return false;   /*  the element is gone, or the graph is between renders  */
+    } finally {
+        let pending = __centring__.get(graph);
+        __centring__.set(graph, {running: false, again: null});
+        if(pending && pending.again) {
+            yui_graph_center_on(graph, pending.again);
+        }
     }
 }