@yuneta/gobj-ui 7.23.25 → 7.23.27

package/dist/gobj-ui.cjs.js

@@ -9710,23 +9710,41 @@ 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;
 		for (let i = 0; i < 3; i++) {
+			let z = graph.getZoom() || 1;
 			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]);
+			let n = graph.getElementPosition(node_id);
+			await graph.translateTo([(want[0] - n[0]) * z, (want[1] - n[1]) * z]);
 		}
 		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);
 	}
 }
 /************************************************************
@@ -10573,7 +10591,8 @@ var PRIVATE_DATA$11 = {
 	anchor_id: "",
 	anchor_path: "",
 	anchor_state: "off",
-	last_zoom: 1
+	last_zoom: 1,
+	center_posted: false
 };
 var __gclass__$11 = null;
 var __layout_registered__$1 = false;
@@ -10941,11 +10960,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) => {
@@ -10961,7 +10976,10 @@ function build_graph$3(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);
+		if (priv.anchor_state === "on" && priv.anchor_id && !priv.center_posted) {
+			priv.center_posted = true;
+			(0, _yuneta_gobj_js.gobj_post_event)(gobj, "EV_CENTER_ANCHOR", {}, gobj);
+		}
 	});
 	graph.on(_antv_g6.CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
@@ -11052,6 +11070,16 @@ 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 ZOOM_CANVAS$1 = {
+	type: "zoom-canvas",
+	animation: false
+};
+var BEHAVIORS_READING$1 = [
+	"drag-canvas",
+	ZOOM_CANVAS$1,
+	"drag-element"
+];
+var BEHAVIORS_PICKING$1 = ["drag-canvas", ZOOM_CANVAS$1];
 var CARD_HEADER_H$1 = 24;
 var CARD_ROW_H$1 = 22;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
@@ -11188,7 +11216,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 +11320,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 +11642,49 @@ 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;
+	priv.center_posted = false;
+	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 +11705,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 +11773,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 +13240,16 @@ 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 ZOOM_CANVAS = {
+	type: "zoom-canvas",
+	animation: false
+};
+var BEHAVIORS_READING = [
+	"drag-canvas",
+	ZOOM_CANVAS,
+	"drag-element"
+];
+var BEHAVIORS_PICKING = ["drag-canvas", ZOOM_CANVAS];
 var PRIVATE_DATA$9 = {
 	canvas_id: "",
 	graph: null,
@@ -13458,7 +13539,7 @@ function build_ui$8(gobj) {
 				{
 					id: priv.canvas_id,
 					class: "gobj-tree-container",
-					style: "height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem; touch-action:none; -webkit-user-select:none; user-select:none;"
+					style: "height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem;"
 				},
 				[]
 			]]
@@ -13650,11 +13731,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 +14603,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 +14629,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 +14698,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 +37694,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 +47743,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,23 +9705,41 @@ 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;
 		for (let i = 0; i < 3; i++) {
+			let z = graph.getZoom() || 1;
 			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]);
+			let n = graph.getElementPosition(node_id);
+			await graph.translateTo([(want[0] - n[0]) * z, (want[1] - n[1]) * z]);
 		}
 		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);
 	}
 }
 /************************************************************
@@ -10568,7 +10586,8 @@ var PRIVATE_DATA$11 = {
 	anchor_id: "",
 	anchor_path: "",
 	anchor_state: "off",
-	last_zoom: 1
+	last_zoom: 1,
+	center_posted: false
 };
 var __gclass__$11 = null;
 var __layout_registered__$1 = false;
@@ -10936,11 +10955,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) => {
@@ -10956,7 +10971,10 @@ function build_graph$3(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);
+		if (priv.anchor_state === "on" && priv.anchor_id && !priv.center_posted) {
+			priv.center_posted = true;
+			gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
+		}
 	});
 	graph.on(CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
@@ -11047,6 +11065,16 @@ 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 ZOOM_CANVAS$1 = {
+	type: "zoom-canvas",
+	animation: false
+};
+var BEHAVIORS_READING$1 = [
+	"drag-canvas",
+	ZOOM_CANVAS$1,
+	"drag-element"
+];
+var BEHAVIORS_PICKING$1 = ["drag-canvas", ZOOM_CANVAS$1];
 var CARD_HEADER_H$1 = 24;
 var CARD_ROW_H$1 = 22;
 function fold_toggle_html(path, foldable, folded, branches, colors) {
@@ -11183,7 +11211,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 +11315,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 +11637,49 @@ 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;
+	priv.center_posted = false;
+	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 +11700,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 +11768,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 +13235,16 @@ 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 ZOOM_CANVAS = {
+	type: "zoom-canvas",
+	animation: false
+};
+var BEHAVIORS_READING = [
+	"drag-canvas",
+	ZOOM_CANVAS,
+	"drag-element"
+];
+var BEHAVIORS_PICKING = ["drag-canvas", ZOOM_CANVAS];
 var PRIVATE_DATA$9 = {
 	canvas_id: "",
 	graph: null,
@@ -13453,7 +13534,7 @@ function build_ui$8(gobj) {
 				{
 					id: priv.canvas_id,
 					class: "gobj-tree-container",
-					style: "height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem; touch-action:none; -webkit-user-select:none; user-select:none;"
+					style: "height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem;"
 				},
 				[]
 			]]
@@ -13645,11 +13726,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 +14598,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 +14624,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 +14693,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 +37689,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 +47738,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.27",
   "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,36 @@ 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.
+ */
+/*
+ *  `zoom-canvas` with NO animation, and that is two rules at once.
+ *
+ *  The house rule first: nothing in this GUI slides or fades, and G6's
+ *  200ms zoom easing is a transition nobody chose -- it comes with the
+ *  behavior's defaults.
+ *
+ *  And it is what makes an anchor possible on the WHEEL. `aftertransform`
+ *  fires while that easing is still running, so the re-centring measured
+ *  a camera that was still moving: measured, its passes went -272, then
+ *  +411 the other side, then +183 -- oscillating, because between two
+ *  reads the easing had moved the ground. With the zoom instantaneous
+ *  the camera is still by the time anything measures it.
+ */
+const ZOOM_CANVAS = {type: 'zoom-canvas', animation: false};
+
+const BEHAVIORS_READING = ['drag-canvas', ZOOM_CANVAS, 'drag-element'];
+const BEHAVIORS_PICKING = ['drag-canvas', ZOOM_CANVAS];
+
 let PRIVATE_DATA = {
     canvas_id: "",
     graph: null,
@@ -408,13 +438,7 @@ function build_ui(gobj)
         ['div', {class: 'C_YUI_GOBJ_TREE_JS', style: 'height:100%; display:flex; flex-direction:column; position:relative;'}, [
             ['div', {class: 'is-flex-grow-0 is-flex toolbar_yui_gobj_tree'}, $toolbar],
             ['div', {class: 'is-flex-grow-1', style: 'height:100%; min-height:0; overflow:hidden;'}, [
-                /*  `touch-action` and `user-select` inline because this gclass loads no
- *  stylesheet of its own: G6 puts `touch-action: none` on its canvas and
- *  nothing on the html nodes over it, so without this a finger dragging a
- *  card makes a page scroll and stops dead after ~20px; and a card is
- *  text, so a mouse drag would start a selection. Same two rules
- *  `lib_graph.css` carries for the treedb graph.  */
-                ['div', {id: priv.canvas_id, class: 'gobj-tree-container', style: 'height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem; touch-action:none; -webkit-user-select:none; user-select:none;'}, [
+                                ['div', {id: priv.canvas_id, class: 'gobj-tree-container', style: 'height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem;'}, [
                 ]]
             ]]
         ]]
@@ -654,17 +678,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 +2028,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 +2067,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 +2172,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,33 +293,6 @@
     z-index: 1;
 }
 
-/*
- *  The graph mount, once its cards can be DRAGGED.
- *
- *  Two problems, both of them the browser's rather than G6's, and both
- *  already paid for once in the treedb graph (`lib_graph.css`):
- *
- *  G6 puts `touch-action: none` on its CANVAS and NOTHING on the html
- *  nodes, which are ordinary DIVs layered over it. So a finger landing
- *  on a card made a page scroll: two `pointermove`s through, then the
- *  browser decided the gesture was a scroll and killed the stream with
- *  `pointercancel` -- the card followed for about 20px and stopped dead
- *  while the page slid.
- *
- *  And a card is text: dragging one starts a text selection, and the
- *  wash stays until the next click somewhere else. Nothing on this
- *  canvas is prose.
- *
- *  On the CONTAINER and not the cards: every layer G6 stacks in here is
- *  a DIV over a canvas that already refuses the browser's gestures, and
- *  they have to agree.
- */
-.C_YUI_JSON .json-graph-container {
-    touch-action: none;
-    -webkit-user-select: none;
-    user-select: none;
-}
-
 /*
  *  Disable any transition a host stylesheet might inject.
  */

package/src/c_yui_json_graph.js

@@ -205,6 +205,7 @@ let PRIVATE_DATA = {
     anchor_path:    "",     // its path, so a rebuild can find it again
     anchor_state:   "off",  // "off" | "arming" | "on"
     last_zoom:      1,      // tells a wheel zoom from a drag in aftertransform
+    center_posted:  false,  // one re-centring in flight, never a queue of them
 };
 
 let __gclass__ = null;
@@ -692,24 +693,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) {
@@ -748,8 +732,22 @@ function build_graph(gobj)
             return;
         }
         priv.last_zoom = z;
-        if(priv.anchor_state === "on" && priv.anchor_id) {
-            yui_graph_center_on(priv.graph, priv.anchor_id);
+
+        /*
+         *  POSTED, like the pick. This runs inside G6's own transform
+         *  emit, and a camera move made there behaves the way one made
+         *  inside its click dispatch does: measured, the centring runs,
+         *  its three passes each fire back here, and the card still ends
+         *  up hundreds of pixels off -- while the same call from a zoom
+         *  BUTTON, which lands after the zoom promise resolved, centres
+         *  exactly. One turn later is out of that stack.
+         *
+         *  At most one in flight: a wheel gesture is a burst of notches,
+         *  and the queue is not a work queue.
+         */
+        if(priv.anchor_state === "on" && priv.anchor_id && !priv.center_posted) {
+            priv.center_posted = true;
+            gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
         }
     });
 
@@ -899,6 +897,39 @@ 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.
+ */
+/*
+ *  `zoom-canvas` with NO animation, and that is two rules at once.
+ *
+ *  The house rule first: nothing in this GUI slides or fades, and G6's
+ *  200ms zoom easing is a transition nobody chose -- it comes with the
+ *  behavior's defaults.
+ *
+ *  And it is what makes an anchor possible on the WHEEL. `aftertransform`
+ *  fires while that easing is still running, so the re-centring measured
+ *  a camera that was still moving: measured, its passes went -272, then
+ *  +411 the other side, then +183 -- oscillating, because between two
+ *  reads the easing had moved the ground. With the zoom instantaneous
+ *  the camera is still by the time anything measures it.
+ */
+const ZOOM_CANVAS = {type: 'zoom-canvas', animation: false};
+
+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 +1183,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 +1392,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 +1865,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 +1931,8 @@ function ac_center_anchor(gobj, event, kw, src)
 {
     let priv = gobj.priv;
 
+    priv.center_posted = false;
+    paint_anchor_mark(gobj);
     if(priv.anchor_state === "on" && priv.anchor_id) {
         yui_graph_center_on(priv.graph, priv.anchor_id);
     }
@@ -1854,6 +1960,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 +2053,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,73 @@
  *  pressed button hands it back to Bulma's rule and the toggle appears
  *  to switch off under the pointer.
  */
+/*
+ *  THE OTHER TWO GRAPHS' MOUNTS.
+ *
+ *  They live here, unscoped, and that is the point: these rules first
+ *  shipped inside `c_yui_json.css` under a `.C_YUI_JSON` ancestor, and
+ *  a host that mounts `C_YUI_JSON_GRAPH` DIRECTLY -- which the demo
+ *  does, and any host wanting only the graph -- has no such ancestor.
+ *  Every one of them silently did nothing there: no crosshair while
+ *  picking, no mark on the anchored card, and no `touch-action`, so a
+ *  finger dragging a card made a page scroll. A gclass's stylesheet
+ *  cannot assume the gclass that usually hosts it.
+ *
+ *  `lib_graph.css` is reached through `lib_graph.js`, which the camera
+ *  module imports and every one of these graphs uses, so it is loaded
+ *  wherever a graph is.
+ */
+
+/*
+ *  Picking the node to anchor: the pointer says a click is expected,
+ *  which is otherwise announced only by a button at the far end of a
+ *  toolbar. `!important` because G6 writes `cursor` onto its own
+ *  elements from its style props, and a mode has to win over a default.
+ */
+.json-graph-container.JSON_GRAPH_PICKING,
+.json-graph-container.JSON_GRAPH_PICKING *,
+.gobj-tree-container.GOBJ_TREE_PICKING,
+.gobj-tree-container.GOBJ_TREE_PICKING * {
+    cursor: crosshair !important;
+}
+
+/*
+ *  The card the camera is holding.
+ *
+ *  It has to say so ON THE CARD: the toolbar knows an anchor is set,
+ *  and knowing WHICH node it is was left to the reader remembering
+ *  what they clicked -- not a mark, a memory test.
+ *
+ *  An outline and not a fill: the card's own colours already mean
+ *  things (a dashed border is a dict, a solid one a list, the header
+ *  carries the group's hue), so repainting any of them would say two
+ *  things down one channel. `outline` draws OUTSIDE the box, so it
+ *  cannot move a single row.
+ *
+ *  Amber, the same "this one, right now" the toolbar's arming state
+ *  uses, and not one of the palette's action colours -- it is not an
+ *  action.
+ */
+.JSON_CARD_ANCHORED {
+    outline: 3px solid #fa8c16;
+    outline-offset: 2px;
+}
+
+/*
+ *  Once the cards can be DRAGGED. Two problems, both the browser's:
+ *  G6 puts `touch-action: none` on its CANVAS and nothing on the html
+ *  nodes, which are ordinary DIVs layered over it, so a finger landing
+ *  on a card made a page scroll -- two `pointermove`s, then
+ *  `pointercancel`, the card dead after ~20px while the page slid. And
+ *  a card is text, so a mouse drag started a selection.
+ */
+.json-graph-container,
+.gobj-tree-container {
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
 .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;
@@ -250,7 +274,7 @@ export async function yui_graph_center_on(graph, node_id)
         }
 
         /*
-         *  MEASURE, MOVE, MEASURE AGAIN -- up to three times.
+         *  MOVE BY THE CLOSED FORM, then check -- up to three times.
          *
          *  Not the arithmetic anybody would write first, and the reason
          *  is worth keeping. The obvious call is `graph.focusElement()`,
@@ -263,18 +287,26 @@ export async function yui_graph_center_on(graph, node_id)
          *  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.
+         *  Guessing at that factor does not work: stepping by the
+         *  measured pixel gap OSCILLATES -- measured, its passes went
+         *  -272, then +411 the other side, then +183, with the zoom
+         *  stable throughout, so it is not an animation racing the
+         *  reads. The factor is read off G6's own
+         *  `getTranslateOptions()` instead: an absolute translate puts
+         *  the camera at `canvasCentre - T/zoom`, and the camera is
+         *  what lands on the viewport centre, so
+         *
+         *      T = (canvasCentre - nodeWorldPosition) * zoom
          *
-         *  The 1px floor is what stops it converging forever on the
-         *  rounding.
+         *  which lands exactly, in one pass, at any zoom.
+         *
+         *  The loop stays as a guard: it costs one measurement when the
+         *  first move was right, and it is what would catch this going
+         *  wrong again rather than shipping a graph that drifts. The
+         *  1px floor stops it chasing the rounding.
          */
         for(let i = 0; i < 3; i++) {
+            let z = graph.getZoom() || 1;
             let at = graph.getViewportByCanvas(graph.getElementPosition(node_id));
             let want = graph.getCanvasCenter();
             let dx = want[0] - at[0];
@@ -283,12 +315,22 @@ export async function yui_graph_center_on(graph, node_id)
             if(Math.abs(dx) < 1 && Math.abs(dy) < 1) {
                 break;
             }
-            let pos = graph.getPosition();
-            await graph.translateTo([pos[0] + dx, pos[1] + dy]);
+            /*  Closed form, read off G6's own `getTranslateOptions()`:
+             *  an ABSOLUTE translate puts the camera at
+             *  `canvasCentre - T/zoom`, and the camera is what lands on
+             *  the viewport centre. So T = (centre - node) * zoom.  */
+            let n = graph.getElementPosition(node_id);
+            await graph.translateTo([(want[0] - n[0]) * z, (want[1] - n[1]) * z]);
         }
         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);
+        }
     }
 }