@yuneta/gobj-ui 7.23.23 → 7.23.25

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,18 +9695,35 @@ 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) {
+async function yui_graph_center_on(graph, node_id) {
 	if (!graph || !node_id) return false;
 	try {
 		if (typeof graph.getElementData === "function" && !graph.getElementData(node_id)) return false;
-		if (typeof graph.focusElement !== "function") return false;
-		graph.focusElement(node_id);
+		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;
@@ -10924,7 +10941,11 @@ function build_graph$3(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: ["drag-canvas", "zoom-canvas"]
+		behaviors: [
+			"drag-canvas",
+			"zoom-canvas",
+			"drag-element"
+		]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on(_antv_g6.NodeEvent.CLICK, (evt) => {
@@ -11592,6 +11613,14 @@ function reanchor$1(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$2(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;
+}
+/************************************************************
 *   Arm the anchor, or let it go.
 *
 *   Three states and one button, so a press ADVANCES: with no
@@ -11674,7 +11703,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);
-		yui_graph_center_on(graph, node_id);
+		(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", {
@@ -11815,6 +11844,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,
@@ -11846,6 +11880,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],
@@ -13423,7 +13458,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;"
+					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;"
 				},
 				[]
 			]]
@@ -13615,7 +13650,11 @@ function build_graph$2(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: ["drag-canvas", "zoom-canvas"]
+		behaviors: [
+			"drag-canvas",
+			"zoom-canvas",
+			"drag-element"
+		]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on("aftertransform", () => {
@@ -14479,6 +14518,14 @@ 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;
+}
+/************************************************************
 *   Arm the anchor, or let it go.
 *
 *   Three states and one button, so a press ADVANCES: with no
@@ -14563,7 +14610,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);
-		yui_graph_center_on(graph, node_id);
+		(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;
@@ -14647,6 +14694,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]
@@ -14711,6 +14759,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,
@@ -52923,6 +52976,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");
@@ -53141,7 +53202,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 {
@@ -53410,6 +53471,11 @@ function create_gclass$4(gclass_name) {
 			ac_toggle_anchor,
 			null
 		],
+		[
+			"EV_CENTER_ANCHOR",
+			ac_center_anchor,
+			null
+		],
 		[
 			"EV_TOGGLE_TOOLBARS",
 			ac_toggle_toolbars,
@@ -53524,6 +53590,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,18 +9690,35 @@ 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) {
+async function yui_graph_center_on(graph, node_id) {
 	if (!graph || !node_id) return false;
 	try {
 		if (typeof graph.getElementData === "function" && !graph.getElementData(node_id)) return false;
-		if (typeof graph.focusElement !== "function") return false;
-		graph.focusElement(node_id);
+		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;
@@ -10919,7 +10936,11 @@ function build_graph$3(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: ["drag-canvas", "zoom-canvas"]
+		behaviors: [
+			"drag-canvas",
+			"zoom-canvas",
+			"drag-element"
+		]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on(NodeEvent.CLICK, (evt) => {
@@ -11587,6 +11608,14 @@ function reanchor$1(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$2(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;
+}
+/************************************************************
 *   Arm the anchor, or let it go.
 *
 *   Three states and one button, so a press ADVANCES: with no
@@ -11669,7 +11698,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);
-		yui_graph_center_on(graph, node_id);
+		gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
 	if (nodedata && nodedata.data) gobj_publish_event(gobj, "EV_JSON_ITEM_CLICKED", {
@@ -11810,6 +11839,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,
@@ -11841,6 +11875,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],
@@ -13418,7 +13453,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;"
+					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;"
 				},
 				[]
 			]]
@@ -13610,7 +13645,11 @@ function build_graph$2(gobj) {
 			}
 		},
 		layout: layout_cfg.g6_layout,
-		behaviors: ["drag-canvas", "zoom-canvas"]
+		behaviors: [
+			"drag-canvas",
+			"zoom-canvas",
+			"drag-element"
+		]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on("aftertransform", () => {
@@ -14474,6 +14513,14 @@ 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;
+}
+/************************************************************
 *   Arm the anchor, or let it go.
 *
 *   Three states and one button, so a press ADVANCES: with no
@@ -14558,7 +14605,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);
-		yui_graph_center_on(graph, node_id);
+		gobj_post_event(gobj, "EV_CENTER_ANCHOR", {}, gobj);
 		return 0;
 	}
 	let client_x = kw.evt && kw.evt.client ? kw.evt.client.x : 0;
@@ -14642,6 +14689,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]
@@ -14706,6 +14754,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,
@@ -52918,6 +52971,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");
@@ -53136,7 +53197,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 {
@@ -53405,6 +53466,11 @@ function create_gclass$4(gclass_name) {
 			ac_toggle_anchor,
 			null
 		],
+		[
+			"EV_CENTER_ANCHOR",
+			ac_center_anchor,
+			null
+		],
 		[
 			"EV_TOGGLE_TOOLBARS",
 			ac_toggle_toolbars,
@@ -53519,6 +53585,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.23",
+  "version": "7.23.25",
   "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,
@@ -407,7 +408,13 @@ 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;'}, [
-                ['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` 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;'}, [
                 ]]
             ]]
         ]]
@@ -650,6 +657,13 @@ function build_graph(gobj)
         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',
         ],
     });
 
@@ -1987,6 +2001,19 @@ 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;
+}
+
 /************************************************************
  *   Arm the anchor, or let it go.
  *
@@ -2112,7 +2139,11 @@ 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);
+
+        /*  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;
     }
 
@@ -2242,6 +2273,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],
@@ -2264,6 +2296,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,33 @@
     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

@@ -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,
@@ -694,6 +695,20 @@ function build_graph(gobj)
         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',
         ],
     });
 
@@ -1805,6 +1820,19 @@ 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;
+}
+
 /************************************************************
  *   Arm the anchor, or let it go.
  *
@@ -1917,7 +1945,22 @@ 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);
+
+        /*
+         *  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;
     }
 
@@ -2043,6 +2086,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],
@@ -2067,6 +2111,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,28 @@
     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.
+ */
+.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,13 +218,22 @@ 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)
+export async function yui_graph_center_on(graph, node_id)
 {
     if(!graph || !node_id) {
         return false;
@@ -226,10 +242,50 @@ export function yui_graph_center_on(graph, node_id)
         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  */