@yuneta/gobj-ui 7.23.25 → 7.23.26

package/dist/gobj-ui.cjs.js

@@ -9710,8 +9710,18 @@ function yui_graph_update_anchor($container, state) {
 *   an error worth a log line per notch, they are all "there is
 *   nothing to centre right now".
 ************************************************************/
+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.getElementPosition !== "function" || typeof graph.getViewportByCanvas !== "function" || typeof graph.getCanvasCenter !== "function" || typeof graph.translateTo !== "function") return false;
@@ -9727,6 +9737,13 @@ async function yui_graph_center_on(graph, node_id) {
 		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);
 	}
 }
 /************************************************************
@@ -10941,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) => {
@@ -11052,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) {
@@ -11188,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};
@@ -11292,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;
@@ -11613,10 +11633,48 @@ 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;
 }
@@ -11637,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;
 }
 /************************************************************
@@ -11703,6 +11763,7 @@ 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);
+		set_picking_mode$1(gobj, false);
 		(0, _yuneta_gobj_js.gobj_post_event)(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
@@ -13169,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,
@@ -13650,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", () => {
@@ -14526,6 +14589,16 @@ function ac_center_anchor$1(gobj, event, kw, src) {
 	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
@@ -14542,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;
 }
 /************************************************************
@@ -14610,6 +14684,7 @@ 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);
+		set_picking_mode(gobj, false);
 		(0, _yuneta_gobj_js.gobj_post_event)(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
@@ -37605,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
@@ -47654,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 {

package/dist/gobj-ui.es.js

@@ -9705,8 +9705,18 @@ function yui_graph_update_anchor($container, state) {
 *   an error worth a log line per notch, they are all "there is
 *   nothing to centre right now".
 ************************************************************/
+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.getElementPosition !== "function" || typeof graph.getViewportByCanvas !== "function" || typeof graph.getCanvasCenter !== "function" || typeof graph.translateTo !== "function") return false;
@@ -9722,6 +9732,13 @@ async function yui_graph_center_on(graph, node_id) {
 		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);
 	}
 }
 /************************************************************
@@ -10936,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) => {
@@ -11047,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) {
@@ -11183,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};
@@ -11287,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;
@@ -11608,10 +11628,48 @@ 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;
 }
@@ -11632,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;
 }
 /************************************************************
@@ -11698,6 +11758,7 @@ 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);
+		set_picking_mode$1(gobj, false);
 		gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
@@ -13164,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,
@@ -13645,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", () => {
@@ -14521,6 +14584,16 @@ function ac_center_anchor$1(gobj, event, kw, src) {
 	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
@@ -14537,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;
 }
 /************************************************************
@@ -14605,6 +14679,7 @@ 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);
+		set_picking_mode(gobj, false);
 		gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
@@ -37600,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
@@ -47649,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 {

package/package.json

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

package/src/c_yui_gobj_tree_js.js

@@ -90,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,
@@ -654,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) {
@@ -2014,6 +2018,24 @@ function ac_center_anchor(gobj, event, kw, src)
     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.
  *
@@ -2035,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;
 }
 
@@ -2139,6 +2162,7 @@ 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);
+        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.

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

@@ -692,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) {
@@ -899,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.
  *
@@ -1152,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};
@@ -1348,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);
@@ -1820,6 +1834,65 @@ 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.
  ************************************************************/
@@ -1827,6 +1900,7 @@ 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);
     }
@@ -1854,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;
 }
 
@@ -1945,6 +2021,7 @@ 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);
+        set_picking_mode(gobj, false);
 
         /*
          *  The camera move is POSTED, not made here.

package/src/lib_graph.css

@@ -256,6 +256,14 @@
  *  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);

package/src/yui_graph_camera.js

@@ -233,11 +233,35 @@ export function yui_graph_update_anchor($container, state)
  *   an error worth a log line per notch, they are all "there is
  *   nothing to centre right now".
  ************************************************************/
+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;
@@ -289,6 +313,12 @@ export async function yui_graph_center_on(graph, node_id)
         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);
+        }
     }
 }