@yuneta/gobj-ui 7.23.102 → 7.23.104

package/README.md

@@ -947,6 +947,38 @@ Two things a host does not have to think about but a maintainer does:
 **New keys for consumers: `anchor view`, `click the element to centre on`,
 `centred: click to release`.**
 
+### The camera belongs to the reader
+
+Once somebody has chosen a zoom, nothing changes it but a camera command. Not a
+**refresh**, not a change of **node mode**, not a new **main topic**: those
+rebuild the CONTENT, and content moving is no reason to move the reader. The
+opening frame is the only one the graph picks — a fit, and only for a graph
+nobody has arranged.
+
+Two mechanisms, because the question is not the same in the two cases:
+
+- **Across a rebuild in the same view**, a NODE is held at the pixel it was on:
+  `yui_graph_viewport_of()` before, `yui_graph_place_at()` after — the pair the
+  folds have always used. It keeps the zoom because it only translates, and it
+  survives a relayout that moves everything, which restoring raw coordinates
+  would not.
+- **Across a RELOAD** there is no node to hold on to yet, so the viewport itself
+  is restored: `{zoom, x, y}` as G6 reports them (`getZoom()` + `getPosition()`,
+  the documented pair of `zoomTo()` + `translateTo()`).
+
+Wiring: `C_G6_NODES_TREE` takes a `camera` attr — the viewport to restore on its
+FIRST draw, empty meaning *open fitted* — and publishes **`EV_CAMERA_CHANGED
+{zoom, x, y}`** once a move has settled. The settle is a real time (700 ms of
+the browser's `setTimeout`, not a `C_TIMER`): a wheel notch, a pinch and a drag
+each fire `aftertransform` many times, and what is worth saving is where the
+gesture ENDED. It fires for a PAN as well as a zoom — a pan is the reader's just
+as much. `C_YUI_TREEDB_GRAPH` holds the other half: `camera` is one more
+`SDF_PERSIST` attr of the view, saved under its name like `main_topic`, so the
+graph opens where that treedb was left.
+
+A host that does not care persists nothing and loses nothing: the event carries
+`EVF_NO_WARN_SUBS`, and the attr defaults to empty.
+
 ### Moving the cards, and folding without losing your place
 
 The JSON graph and the gobj tree take `drag-element`: a card can be dragged.

package/dist/gobj-ui.cjs.js

@@ -13420,12 +13420,11 @@ function icon_button$1(gobj, icon, event_name, label_key) {
 *   aimed — reaching the graph from the tree would mean passing
 *   through the text and rebuilding it on the way — so each view gets
 *   its own button and says where it goes.  apply_view_mode() moves
-*   the `pressed_state` mark -- the library's one way of saying a
-*   toggle is ON, the same the graph toolbars and the treedb legend
-*   use.  It used to be `is-active` with a blue fill of its own: a
-*   STATE wearing a palette colour, which is what the palette does
-*   NOT mean (it names kinds of ACTION), and a third spelling of a
-*   thing the library already had a name for.
+*   the `selected_state` mark -- the library's one way of saying
+*   WHICH segment of a selector is chosen, filled with the link
+*   colour.  It used to be `is-active` with a fill written here: the
+*   right idea, spelled a third time.  A toggle, which has no "which
+*   one" to answer, wears the neutral `pressed_state` pill instead.
 ************************************************************/
 function view_mode_switch$1(gobj) {
 	return [
@@ -13522,7 +13521,7 @@ function apply_view_mode$1(gobj) {
 		if ($el) $el.classList.toggle("is-hidden", mode !== "tree");
 	});
 	if (priv.$mode_btns) for (let [m, $btn] of priv.$mode_btns) {
-		$btn.classList.toggle("pressed_state", m === mode);
+		$btn.classList.toggle("selected_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -15829,7 +15828,7 @@ function apply_view_mode(gobj) {
 	};
 	for (let [m, $el] of Object.entries(bodies)) if ($el) $el.classList.toggle("is-hidden", m !== mode);
 	if (priv.$mode_btns) for (let [m, $btn] of priv.$mode_btns) {
-		$btn.classList.toggle("pressed_state", m === mode);
+		$btn.classList.toggle("selected_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -16582,7 +16581,7 @@ function machine_view_switch(gobj) {
 			return [
 				"button",
 				{
-					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " pressed_state" : ""),
+					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " selected_state" : ""),
 					type: "button",
 					"aria-pressed": on ? "true" : "false",
 					title: (0, i18next.t)(v.key),
@@ -54826,6 +54825,7 @@ var attrs_table$4 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "node_labels", 0, true, "A `shape` node says its name under the figure. Off, it is a coloured figure and nothing else"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "confirm_delete_node", 0, true, "Ask confirmation before deleting a node"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "confirm_unlink_edge", 0, true, "Ask confirmation before unlinking an edge"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_DICT, "camera", 0, "{}", "Where the reader left the viewport: {zoom, x, y}. Empty = the graph opens fitted. Restored on the FIRST draw and published back as EV_CAMERA_CHANGED once a move settles, so a host can persist it"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "wide", 0, "40px", "Height of header"),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
@@ -54833,6 +54833,9 @@ var PRIVATE_DATA$4 = {
 	anchor_id: "",
 	anchor_state: "off",
 	last_zoom: 1,
+	_camera_placed: false,
+	_camera_restoring: false,
+	_camera_timer: null,
 	_xy: 100,
 	_edge_seq: 0,
 	_history_paused: false,
@@ -54964,8 +54967,13 @@ function mt_start$4(gobj) {
 *          Framework Method: Stop
 ***************************************************************/
 function mt_stop$4(gobj) {
+	let priv = gobj.priv;
 	let shell = yui_shell_of(gobj);
 	if (shell) (0, _yuneta_gobj_js.gobj_unsubscribe_event)(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+	if (priv._camera_timer) {
+		clearTimeout(priv._camera_timer);
+		priv._camera_timer = null;
+	}
 	return 0;
 }
 /***************************************************************
@@ -55157,6 +55165,7 @@ function configure_events(gobj) {
 		update_link_icon_position(gobj);
 		update_port_icon_position(gobj);
 		update_zoom_readout(gobj);
+		publish_camera_later(gobj);
 		let z = priv.last_zoom;
 		try {
 			z = priv.graph.getZoom();
@@ -56682,6 +56691,80 @@ async function graph_fitview(gobj) {
 }
 var MIN_READABLE_ZOOM = .5;
 /************************************************************
+*  THE CAMERA IS THE READER'S.
+*
+*  Once somebody has chosen a zoom, nothing but a camera
+*  command may change it -- not a refresh, not a change of node
+*  mode, not a new main topic. Those rebuild the CONTENT, and
+*  the content moving is no reason to move the reader.
+*
+*  Two mechanisms, because they answer two different questions:
+*
+*    - across a rebuild in the same view, the anchor pair
+*      (`yui_graph_viewport_of` / `yui_graph_place_at`) keeps a
+*      NODE at the pixel it was on, which survives a relayout
+*      that moves everything;
+*    - across a RELOAD there is no node to hold on to yet, so
+*      the viewport itself is restored -- zoom and position, as
+*      G6 reports them.
+************************************************************/
+var CAMERA_SETTLE_MS = 700;
+function read_camera(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph || typeof graph.getZoom !== "function" || typeof graph.getPosition !== "function") return null;
+	try {
+		let z = graph.getZoom();
+		let p = graph.getPosition();
+		if (!(0, _yuneta_gobj_js.is_number)(z) || !p || !(0, _yuneta_gobj_js.is_number)(p[0]) || !(0, _yuneta_gobj_js.is_number)(p[1])) return null;
+		return {
+			zoom: z,
+			x: p[0],
+			y: p[1]
+		};
+	} catch (e) {
+		return null;
+	}
+}
+async function restore_camera(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let cam = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "camera");
+	if (!graph || (0, _yuneta_gobj_js.empty_json)(cam) || !(0, _yuneta_gobj_js.is_number)(cam.zoom)) return false;
+	priv._camera_restoring = true;
+	try {
+		await graph.zoomTo(cam.zoom);
+		if ((0, _yuneta_gobj_js.is_number)(cam.x) && (0, _yuneta_gobj_js.is_number)(cam.y)) await graph.translateTo([cam.x, cam.y]);
+		return true;
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot restore the camera: ${e}`);
+		return false;
+	} finally {
+		priv._camera_restoring = false;
+	}
+}
+/************************************************************
+*  A move settled: tell whoever persists it.
+*
+*  Debounced on a REAL time and with the browser's timer: a
+*  wheel notch, a pinch and a drag each fire `aftertransform`
+*  many times, and what is worth saving is where the gesture
+*  ENDED. (`set_timeout` from gobj-js is a C_TIMER and shadows
+*  the global -- this module imports neither.)
+************************************************************/
+function publish_camera_later(gobj) {
+	let priv = gobj.priv;
+	if (priv._camera_restoring || !priv._camera_placed) return;
+	if (priv._camera_timer) clearTimeout(priv._camera_timer);
+	priv._camera_timer = setTimeout(() => {
+		priv._camera_timer = null;
+		if ((0, _yuneta_gobj_js.gobj_is_destroying)(gobj)) return;
+		let cam = read_camera(gobj);
+		if (!cam) return;
+		(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "camera", cam);
+		(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_CAMERA_CHANGED", cam);
+	}, CAMERA_SETTLE_MS);
+}
+/************************************************************
 *  Fit the graph in the viewport, but never zoom out past the point
 *  where nothing on a card can be read.
 *
@@ -60625,8 +60708,11 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 	}
 	await graph_draw(gobj);
 	if (changed || opts.relayout) await graph_layout(gobj);
-	if (opts.fit) await graph_fit_readable(gobj);
-	else if (opts.keep && opts.keep_vp) await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
+	if (!(opts.restore && await restore_camera(gobj))) {
+		if (opts.fit) await graph_fit_readable(gobj);
+		else if (opts.keep && opts.keep_vp) await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
+	}
+	priv._camera_placed = true;
 	update_resize_handles_position(gobj);
 	update_port_resize_handles_position(gobj);
 	update_edge_icon_position(gobj);
@@ -60778,10 +60864,19 @@ function ac_load_data(gobj, event, kw, src) {
 			(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: auto_layout failed: ${e}`);
 		}
 		apply_layout_direction(gobj);
-		reconcile_fold(gobj, {
-			relayout: true,
+		let vp_opts;
+		if (!priv._camera_placed) vp_opts = {
+			restore: true,
 			fit: auto_laid
-		}).then(() => {
+		};
+		else {
+			let keep = fold_keep_node(gobj);
+			vp_opts = {
+				keep,
+				keep_vp: yui_graph_viewport_of(priv.graph, keep)
+			};
+		}
+		reconcile_fold(gobj, Object.assign({ relayout: true }, vp_opts)).then(() => {
 			sync_history_plugin(gobj);
 			if (priv._pending_focus_topic !== null) {
 				let ft = priv._pending_focus_topic;
@@ -61241,11 +61336,14 @@ function ac_set_main_topic(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	(0, _yuneta_gobj_js.gobj_write_str_attr)(gobj, "main_topic", kw && kw.topic || "");
 	if (!priv._fold_model) return 0;
+	let keep = fold_keep_node(gobj);
+	let vp = yui_graph_viewport_of(priv.graph, keep);
 	rebuild_fold_model(gobj);
 	fold_expand_to_depth(priv._fold_model, priv._fold_state, (0, _yuneta_gobj_js.gobj_read_integer_attr)(gobj, "expand_depth"));
 	reconcile_fold(gobj, {
 		relayout: true,
-		fit: true
+		keep,
+		keep_vp: vp
 	});
 	return 0;
 }
@@ -61271,11 +61369,14 @@ function ac_set_node_mode$1(gobj, event, kw, src) {
 	(0, _yuneta_gobj_js.gobj_write_str_attr)(gobj, "node_mode", mode);
 	priv._open_nodes = /* @__PURE__ */ new Set();
 	if (!priv.graph || !priv._fold_model) return 0;
+	let keep = fold_keep_node(gobj);
+	let vp = yui_graph_viewport_of(priv.graph, keep);
 	reshape_nodes(gobj, all_record_node_ids(gobj));
 	reshape_more_chips(gobj);
 	reconcile_fold(gobj, {
 		relayout: true,
-		fit: true
+		keep,
+		keep_vp: vp
 	});
 	return 0;
 }
@@ -61945,6 +62046,7 @@ function create_gclass$4(gclass_name) {
 		["EV_FIND_NODES", 0],
 		["EV_FIND_RESULT", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_LAYOUT_AUTOSET", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
+		["EV_CAMERA_CHANGED", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_TOGGLE_FOLD", 0],
 		["EV_SHOW_MORE", 0],
 		["EV_EXPAND_ALL", 0],
@@ -62031,6 +62133,7 @@ var attrs_table$3 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_LIST, "loose_topics", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "[]", "Topics whose LOOSE records (no parent) are shown. User preference, per treedb"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "node_mode", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "expanded", "How the records are drawn: `expanded` = the cards with their pills and ports, `compact` = one-line pills with the name, `shape` = coloured figures, the topology alone. User preference"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "node_labels", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, true, "A `shape` node says its name under its figure. User preference"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_DICT, "camera", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "{}", "Where the reader left the viewport: {zoom, x, y}. Handed to the engine on creation and written back when a move settles, so the graph opens where it was left. User preference, per treedb"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "gobj_remote_yuno", 0, null, "Remote Yuno to request data"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "treedb_name", 0, null, "Remote service treedb name"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_DICT, "descs", 0, null, "Descriptions of topics obtained"),
@@ -62118,7 +62221,8 @@ function mt_create$3(gobj) {
 		main_topic: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "main_topic") || "",
 		loose_topics: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "loose_topics") || [],
 		node_mode: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "node_mode") || "expanded",
-		node_labels: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels")
+		node_labels: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels"),
+		camera: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "camera") || {}
 	}, gobj);
 	populate_nodes_tree_options(gobj);
 	if (priv.with_treedb_tables) {}
@@ -62402,7 +62506,7 @@ function refresh_node_shape_buttons(gobj, $root) {
 	let labels = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels");
 	for (let $btn of $root.querySelectorAll(".GRAPH_NODE_MODE_BTN")) {
 		let on = $btn.getAttribute("data-mode") === mode;
-		$btn.classList.toggle("pressed_state", on);
+		$btn.classList.toggle("selected_state", on);
 		$btn.setAttribute("aria-pressed", on ? "true" : "false");
 	}
 	set_pressed_state($root, ".GRAPH_NODE_LABELS", labels);
@@ -63802,6 +63906,23 @@ function ac_layout_autoset(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The reader moved the camera, and it has settled.
+*
+*  Persisted like every other choice of this toolbar, and for the
+*  same reason: a zoom is a decision, and a decision that dies with
+*  the tab has to be taken again every morning. The engine debounces,
+*  so this runs once per gesture and not once per wheel notch.
+************************************************************/
+function ac_camera_changed(gobj, event, kw, src) {
+	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "camera", {
+		zoom: kw.zoom,
+		x: kw.x,
+		y: kw.y
+	});
+	(0, _yuneta_gobj_js.gobj_save_persistent_attrs)(gobj, "camera");
+	return 0;
+}
+/************************************************************
 *  Forward the find down to the graph child.
 ************************************************************/
 function ac_find_nodes(gobj, event, kw, src) {
@@ -64081,6 +64202,11 @@ function create_gclass$3(gclass_name) {
 			ac_layout_autoset,
 			null
 		],
+		[
+			"EV_CAMERA_CHANGED",
+			ac_camera_changed,
+			null
+		],
 		[
 			"EV_LEGEND_TOPIC",
 			ac_legend_topic,
@@ -64149,6 +64275,7 @@ function create_gclass$3(gclass_name) {
 		["EV_TOGGLE_NODE_LABELS", 0],
 		["EV_FIND_RESULT", 0],
 		["EV_LAYOUT_AUTOSET", 0],
+		["EV_CAMERA_CHANGED", 0],
 		["EV_LEGEND_TOPIC", 0],
 		["EV_LEGEND_STATE", 0],
 		["EV_TOPIC_SELECTED", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
@@ -71061,12 +71188,12 @@ function repaint(gobj) {
 			if (on) m.$btn.setAttribute("aria-current", "true");
 			else m.$btn.removeAttribute("aria-current");
 		} else {
-			m.$btn.classList.toggle("pressed_state", on);
+			m.$btn.classList.toggle("selected_state", on);
 			m.$btn.setAttribute("aria-pressed", on ? "true" : "false");
 		}
 	}
 	if (mode && mode.$btn) scroll_mode_into_view(gobj, mode.$btn);
-	if (priv.$more) priv.$more.classList.toggle("pressed_state", !!(mode && mode.overflow));
+	if (priv.$more) priv.$more.classList.toggle("selected_state", !!(mode && mode.overflow));
 	let is_bucket = !!(mode && mode.kind === "bucket");
 	priv.$nav.classList.toggle("yui-period-nav-off", !is_bucket);
 	priv.$label.disabled = !is_bucket;
@@ -71257,7 +71384,7 @@ function cell_button(gobj, label, anchor_ms, selected, logical, aria) {
 	let $btn = (0, _yuneta_gobj_js.createElement2)([
 		"button",
 		{
-			class: `button is-small ${selected ? "pressed_state" : "is-ghost"} ${logical}`,
+			class: `button is-small ${selected ? "selected_state" : "is-ghost"} ${logical}`,
 			type: "button",
 			style: "width:100%;",
 			...selected ? { "aria-current": "date" } : {},

package/dist/gobj-ui.es.js

@@ -1,5 +1,5 @@
 import * as gobj_js from "@yuneta/gobj-js";
-import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, delete_from_list, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_bottom_gobj, 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, gobj_yuno_name, 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, delete_from_list, duplicate_objects, empty_json, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_bottom_gobj, 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, gobj_yuno_name, 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";
@@ -13415,12 +13415,11 @@ function icon_button$1(gobj, icon, event_name, label_key) {
 *   aimed — reaching the graph from the tree would mean passing
 *   through the text and rebuilding it on the way — so each view gets
 *   its own button and says where it goes.  apply_view_mode() moves
-*   the `pressed_state` mark -- the library's one way of saying a
-*   toggle is ON, the same the graph toolbars and the treedb legend
-*   use.  It used to be `is-active` with a blue fill of its own: a
-*   STATE wearing a palette colour, which is what the palette does
-*   NOT mean (it names kinds of ACTION), and a third spelling of a
-*   thing the library already had a name for.
+*   the `selected_state` mark -- the library's one way of saying
+*   WHICH segment of a selector is chosen, filled with the link
+*   colour.  It used to be `is-active` with a fill written here: the
+*   right idea, spelled a third time.  A toggle, which has no "which
+*   one" to answer, wears the neutral `pressed_state` pill instead.
 ************************************************************/
 function view_mode_switch$1(gobj) {
 	return [
@@ -13517,7 +13516,7 @@ function apply_view_mode$1(gobj) {
 		if ($el) $el.classList.toggle("is-hidden", mode !== "tree");
 	});
 	if (priv.$mode_btns) for (let [m, $btn] of priv.$mode_btns) {
-		$btn.classList.toggle("pressed_state", m === mode);
+		$btn.classList.toggle("selected_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -15824,7 +15823,7 @@ function apply_view_mode(gobj) {
 	};
 	for (let [m, $el] of Object.entries(bodies)) if ($el) $el.classList.toggle("is-hidden", m !== mode);
 	if (priv.$mode_btns) for (let [m, $btn] of priv.$mode_btns) {
-		$btn.classList.toggle("pressed_state", m === mode);
+		$btn.classList.toggle("selected_state", m === mode);
 		$btn.setAttribute("aria-pressed", m === mode ? "true" : "false");
 	}
 }
@@ -16577,7 +16576,7 @@ function machine_view_switch(gobj) {
 			return [
 				"button",
 				{
-					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " pressed_state" : ""),
+					class: `button is-small GCLASS_MACHINE_VIEW GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` + (on ? " selected_state" : ""),
 					type: "button",
 					"aria-pressed": on ? "true" : "false",
 					title: t(v.key),
@@ -54821,6 +54820,7 @@ var attrs_table$4 = [
 	SDATA(data_type_t.DTP_BOOLEAN, "node_labels", 0, true, "A `shape` node says its name under the figure. Off, it is a coloured figure and nothing else"),
 	SDATA(data_type_t.DTP_BOOLEAN, "confirm_delete_node", 0, true, "Ask confirmation before deleting a node"),
 	SDATA(data_type_t.DTP_BOOLEAN, "confirm_unlink_edge", 0, true, "Ask confirmation before unlinking an edge"),
+	SDATA(data_type_t.DTP_DICT, "camera", 0, "{}", "Where the reader left the viewport: {zoom, x, y}. Empty = the graph opens fitted. Restored on the FIRST draw and published back as EV_CAMERA_CHANGED once a move settles, so a host can persist it"),
 	SDATA(data_type_t.DTP_STRING, "wide", 0, "40px", "Height of header"),
 	SDATA_END()
 ];
@@ -54828,6 +54828,9 @@ var PRIVATE_DATA$4 = {
 	anchor_id: "",
 	anchor_state: "off",
 	last_zoom: 1,
+	_camera_placed: false,
+	_camera_restoring: false,
+	_camera_timer: null,
 	_xy: 100,
 	_edge_seq: 0,
 	_history_paused: false,
@@ -54959,8 +54962,13 @@ function mt_start$4(gobj) {
 *          Framework Method: Stop
 ***************************************************************/
 function mt_stop$4(gobj) {
+	let priv = gobj.priv;
 	let shell = yui_shell_of(gobj);
 	if (shell) gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+	if (priv._camera_timer) {
+		clearTimeout(priv._camera_timer);
+		priv._camera_timer = null;
+	}
 	return 0;
 }
 /***************************************************************
@@ -55152,6 +55160,7 @@ function configure_events(gobj) {
 		update_link_icon_position(gobj);
 		update_port_icon_position(gobj);
 		update_zoom_readout(gobj);
+		publish_camera_later(gobj);
 		let z = priv.last_zoom;
 		try {
 			z = priv.graph.getZoom();
@@ -56677,6 +56686,80 @@ async function graph_fitview(gobj) {
 }
 var MIN_READABLE_ZOOM = .5;
 /************************************************************
+*  THE CAMERA IS THE READER'S.
+*
+*  Once somebody has chosen a zoom, nothing but a camera
+*  command may change it -- not a refresh, not a change of node
+*  mode, not a new main topic. Those rebuild the CONTENT, and
+*  the content moving is no reason to move the reader.
+*
+*  Two mechanisms, because they answer two different questions:
+*
+*    - across a rebuild in the same view, the anchor pair
+*      (`yui_graph_viewport_of` / `yui_graph_place_at`) keeps a
+*      NODE at the pixel it was on, which survives a relayout
+*      that moves everything;
+*    - across a RELOAD there is no node to hold on to yet, so
+*      the viewport itself is restored -- zoom and position, as
+*      G6 reports them.
+************************************************************/
+var CAMERA_SETTLE_MS = 700;
+function read_camera(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph || typeof graph.getZoom !== "function" || typeof graph.getPosition !== "function") return null;
+	try {
+		let z = graph.getZoom();
+		let p = graph.getPosition();
+		if (!is_number(z) || !p || !is_number(p[0]) || !is_number(p[1])) return null;
+		return {
+			zoom: z,
+			x: p[0],
+			y: p[1]
+		};
+	} catch (e) {
+		return null;
+	}
+}
+async function restore_camera(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let cam = gobj_read_attr(gobj, "camera");
+	if (!graph || empty_json(cam) || !is_number(cam.zoom)) return false;
+	priv._camera_restoring = true;
+	try {
+		await graph.zoomTo(cam.zoom);
+		if (is_number(cam.x) && is_number(cam.y)) await graph.translateTo([cam.x, cam.y]);
+		return true;
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: cannot restore the camera: ${e}`);
+		return false;
+	} finally {
+		priv._camera_restoring = false;
+	}
+}
+/************************************************************
+*  A move settled: tell whoever persists it.
+*
+*  Debounced on a REAL time and with the browser's timer: a
+*  wheel notch, a pinch and a drag each fire `aftertransform`
+*  many times, and what is worth saving is where the gesture
+*  ENDED. (`set_timeout` from gobj-js is a C_TIMER and shadows
+*  the global -- this module imports neither.)
+************************************************************/
+function publish_camera_later(gobj) {
+	let priv = gobj.priv;
+	if (priv._camera_restoring || !priv._camera_placed) return;
+	if (priv._camera_timer) clearTimeout(priv._camera_timer);
+	priv._camera_timer = setTimeout(() => {
+		priv._camera_timer = null;
+		if (gobj_is_destroying(gobj)) return;
+		let cam = read_camera(gobj);
+		if (!cam) return;
+		gobj_write_attr(gobj, "camera", cam);
+		gobj_publish_event(gobj, "EV_CAMERA_CHANGED", cam);
+	}, CAMERA_SETTLE_MS);
+}
+/************************************************************
 *  Fit the graph in the viewport, but never zoom out past the point
 *  where nothing on a card can be read.
 *
@@ -60620,8 +60703,11 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 	}
 	await graph_draw(gobj);
 	if (changed || opts.relayout) await graph_layout(gobj);
-	if (opts.fit) await graph_fit_readable(gobj);
-	else if (opts.keep && opts.keep_vp) await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
+	if (!(opts.restore && await restore_camera(gobj))) {
+		if (opts.fit) await graph_fit_readable(gobj);
+		else if (opts.keep && opts.keep_vp) await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
+	}
+	priv._camera_placed = true;
 	update_resize_handles_position(gobj);
 	update_port_resize_handles_position(gobj);
 	update_edge_icon_position(gobj);
@@ -60773,10 +60859,19 @@ function ac_load_data(gobj, event, kw, src) {
 			log_error(`${gobj_short_name(gobj)}: auto_layout failed: ${e}`);
 		}
 		apply_layout_direction(gobj);
-		reconcile_fold(gobj, {
-			relayout: true,
+		let vp_opts;
+		if (!priv._camera_placed) vp_opts = {
+			restore: true,
 			fit: auto_laid
-		}).then(() => {
+		};
+		else {
+			let keep = fold_keep_node(gobj);
+			vp_opts = {
+				keep,
+				keep_vp: yui_graph_viewport_of(priv.graph, keep)
+			};
+		}
+		reconcile_fold(gobj, Object.assign({ relayout: true }, vp_opts)).then(() => {
 			sync_history_plugin(gobj);
 			if (priv._pending_focus_topic !== null) {
 				let ft = priv._pending_focus_topic;
@@ -61236,11 +61331,14 @@ function ac_set_main_topic(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	gobj_write_str_attr(gobj, "main_topic", kw && kw.topic || "");
 	if (!priv._fold_model) return 0;
+	let keep = fold_keep_node(gobj);
+	let vp = yui_graph_viewport_of(priv.graph, keep);
 	rebuild_fold_model(gobj);
 	fold_expand_to_depth(priv._fold_model, priv._fold_state, gobj_read_integer_attr(gobj, "expand_depth"));
 	reconcile_fold(gobj, {
 		relayout: true,
-		fit: true
+		keep,
+		keep_vp: vp
 	});
 	return 0;
 }
@@ -61266,11 +61364,14 @@ function ac_set_node_mode$1(gobj, event, kw, src) {
 	gobj_write_str_attr(gobj, "node_mode", mode);
 	priv._open_nodes = /* @__PURE__ */ new Set();
 	if (!priv.graph || !priv._fold_model) return 0;
+	let keep = fold_keep_node(gobj);
+	let vp = yui_graph_viewport_of(priv.graph, keep);
 	reshape_nodes(gobj, all_record_node_ids(gobj));
 	reshape_more_chips(gobj);
 	reconcile_fold(gobj, {
 		relayout: true,
-		fit: true
+		keep,
+		keep_vp: vp
 	});
 	return 0;
 }
@@ -61940,6 +62041,7 @@ function create_gclass$4(gclass_name) {
 		["EV_FIND_NODES", 0],
 		["EV_FIND_RESULT", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_LAYOUT_AUTOSET", event_flag_t.EVF_OUTPUT_EVENT],
+		["EV_CAMERA_CHANGED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_TOGGLE_FOLD", 0],
 		["EV_SHOW_MORE", 0],
 		["EV_EXPAND_ALL", 0],
@@ -62026,6 +62128,7 @@ var attrs_table$3 = [
 	SDATA(data_type_t.DTP_LIST, "loose_topics", sdata_flag_t.SDF_PERSIST, "[]", "Topics whose LOOSE records (no parent) are shown. User preference, per treedb"),
 	SDATA(data_type_t.DTP_STRING, "node_mode", sdata_flag_t.SDF_PERSIST, "expanded", "How the records are drawn: `expanded` = the cards with their pills and ports, `compact` = one-line pills with the name, `shape` = coloured figures, the topology alone. User preference"),
 	SDATA(data_type_t.DTP_BOOLEAN, "node_labels", sdata_flag_t.SDF_PERSIST, true, "A `shape` node says its name under its figure. User preference"),
+	SDATA(data_type_t.DTP_DICT, "camera", sdata_flag_t.SDF_PERSIST, "{}", "Where the reader left the viewport: {zoom, x, y}. Handed to the engine on creation and written back when a move settles, so the graph opens where it was left. User preference, per treedb"),
 	SDATA(data_type_t.DTP_POINTER, "gobj_remote_yuno", 0, null, "Remote Yuno to request data"),
 	SDATA(data_type_t.DTP_STRING, "treedb_name", 0, null, "Remote service treedb name"),
 	SDATA(data_type_t.DTP_DICT, "descs", 0, null, "Descriptions of topics obtained"),
@@ -62113,7 +62216,8 @@ function mt_create$3(gobj) {
 		main_topic: gobj_read_str_attr(gobj, "main_topic") || "",
 		loose_topics: gobj_read_attr(gobj, "loose_topics") || [],
 		node_mode: gobj_read_str_attr(gobj, "node_mode") || "expanded",
-		node_labels: gobj_read_bool_attr(gobj, "node_labels")
+		node_labels: gobj_read_bool_attr(gobj, "node_labels"),
+		camera: gobj_read_attr(gobj, "camera") || {}
 	}, gobj);
 	populate_nodes_tree_options(gobj);
 	if (priv.with_treedb_tables) {}
@@ -62397,7 +62501,7 @@ function refresh_node_shape_buttons(gobj, $root) {
 	let labels = gobj_read_bool_attr(gobj, "node_labels");
 	for (let $btn of $root.querySelectorAll(".GRAPH_NODE_MODE_BTN")) {
 		let on = $btn.getAttribute("data-mode") === mode;
-		$btn.classList.toggle("pressed_state", on);
+		$btn.classList.toggle("selected_state", on);
 		$btn.setAttribute("aria-pressed", on ? "true" : "false");
 	}
 	set_pressed_state($root, ".GRAPH_NODE_LABELS", labels);
@@ -63797,6 +63901,23 @@ function ac_layout_autoset(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The reader moved the camera, and it has settled.
+*
+*  Persisted like every other choice of this toolbar, and for the
+*  same reason: a zoom is a decision, and a decision that dies with
+*  the tab has to be taken again every morning. The engine debounces,
+*  so this runs once per gesture and not once per wheel notch.
+************************************************************/
+function ac_camera_changed(gobj, event, kw, src) {
+	gobj_write_attr(gobj, "camera", {
+		zoom: kw.zoom,
+		x: kw.x,
+		y: kw.y
+	});
+	gobj_save_persistent_attrs(gobj, "camera");
+	return 0;
+}
+/************************************************************
 *  Forward the find down to the graph child.
 ************************************************************/
 function ac_find_nodes(gobj, event, kw, src) {
@@ -64076,6 +64197,11 @@ function create_gclass$3(gclass_name) {
 			ac_layout_autoset,
 			null
 		],
+		[
+			"EV_CAMERA_CHANGED",
+			ac_camera_changed,
+			null
+		],
 		[
 			"EV_LEGEND_TOPIC",
 			ac_legend_topic,
@@ -64144,6 +64270,7 @@ function create_gclass$3(gclass_name) {
 		["EV_TOGGLE_NODE_LABELS", 0],
 		["EV_FIND_RESULT", 0],
 		["EV_LAYOUT_AUTOSET", 0],
+		["EV_CAMERA_CHANGED", 0],
 		["EV_LEGEND_TOPIC", 0],
 		["EV_LEGEND_STATE", 0],
 		["EV_TOPIC_SELECTED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
@@ -71056,12 +71183,12 @@ function repaint(gobj) {
 			if (on) m.$btn.setAttribute("aria-current", "true");
 			else m.$btn.removeAttribute("aria-current");
 		} else {
-			m.$btn.classList.toggle("pressed_state", on);
+			m.$btn.classList.toggle("selected_state", on);
 			m.$btn.setAttribute("aria-pressed", on ? "true" : "false");
 		}
 	}
 	if (mode && mode.$btn) scroll_mode_into_view(gobj, mode.$btn);
-	if (priv.$more) priv.$more.classList.toggle("pressed_state", !!(mode && mode.overflow));
+	if (priv.$more) priv.$more.classList.toggle("selected_state", !!(mode && mode.overflow));
 	let is_bucket = !!(mode && mode.kind === "bucket");
 	priv.$nav.classList.toggle("yui-period-nav-off", !is_bucket);
 	priv.$label.disabled = !is_bucket;
@@ -71252,7 +71379,7 @@ function cell_button(gobj, label, anchor_ms, selected, logical, aria) {
 	let $btn = createElement2([
 		"button",
 		{
-			class: `button is-small ${selected ? "pressed_state" : "is-ghost"} ${logical}`,
+			class: `button is-small ${selected ? "selected_state" : "is-ghost"} ${logical}`,
 			type: "button",
 			style: "width:100%;",
 			...selected ? { "aria-current": "date" } : {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.102",
+  "version": "7.23.104",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",
@@ -24,6 +24,7 @@
   "scripts": {
     "build": "vite build",
     "test": "vitest run",
+    "deploy-round": "node scripts/deploy-round.mjs",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {

package/src/c_g6_nodes_tree.js

@@ -70,6 +70,7 @@ import {
     empty_string,
     is_object,
     is_number,
+    empty_json,
     kw_get_int,
     kw_get_str,
     kw_get_dict_value,
@@ -442,6 +443,9 @@ SDATA(data_type_t.DTP_BOOLEAN,  "node_labels",          0,  true,   "A `shape` n
 SDATA(data_type_t.DTP_BOOLEAN,  "confirm_delete_node",  0,  true,   "Ask confirmation before deleting a node"),
 SDATA(data_type_t.DTP_BOOLEAN,  "confirm_unlink_edge",  0,  true,   "Ask confirmation before unlinking an edge"),
 
+/*---------------- Camera ----------------*/
+SDATA(data_type_t.DTP_DICT,     "camera",               0,  "{}",   "Where the reader left the viewport: {zoom, x, y}. Empty = the graph opens fitted. Restored on the FIRST draw and published back as EV_CAMERA_CHANGED once a move settles, so a host can persist it"),
+
 SDATA(data_type_t.DTP_STRING,   "wide",                 0,  "40px", "Height of header"),
 
 SDATA_END()
@@ -452,6 +456,9 @@ let PRIVATE_DATA = {
     anchor_id:      "",     // the node the camera keeps in the middle
     anchor_state:   "off",  // "off" | "arming" | "on"
     last_zoom:      1,      // tells a wheel zoom from a drag in aftertransform
+    _camera_placed: false,  // the first draw has decided the viewport
+    _camera_restoring: false,   // a move WE made: not the reader's, do not publish it
+    _camera_timer:  null,   // browser timer: the gesture has to END before it is saved
 
     _xy:                100,
     _edge_seq:          0,
@@ -657,11 +664,19 @@ function mt_start(gobj)
  ***************************************************************/
 function mt_stop(gobj)
 {
+    let priv = gobj.priv;
     let shell = yui_shell_of(gobj);
     if(shell) {
         gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
     }
 
+    /*  A camera move that settles after the view is gone has nobody
+     *  to tell and a graph that is no longer there to read.  */
+    if(priv._camera_timer) {
+        clearTimeout(priv._camera_timer);
+        priv._camera_timer = null;
+    }
+
     return 0;
 }
 
@@ -1036,6 +1051,11 @@ function configure_events(gobj)
         update_port_icon_position(gobj);
         update_zoom_readout(gobj);
 
+        /*  Before the zoom/pan test below and not inside it: a PAN is
+         *  a camera move too, and it is the reader's just as much as
+         *  a zoom is.  */
+        publish_camera_later(gobj);
+
         /*
          *  A ZOOM re-centres on the anchor; a PAN does not.
          *  `aftertransform` fires for both, and an anchor that also
@@ -3329,6 +3349,106 @@ async function graph_fitview(gobj)
 /*  Below this the cards carry no readable text at all. */
 const MIN_READABLE_ZOOM = 0.5;
 
+
+/************************************************************
+ *  THE CAMERA IS THE READER'S.
+ *
+ *  Once somebody has chosen a zoom, nothing but a camera
+ *  command may change it -- not a refresh, not a change of node
+ *  mode, not a new main topic. Those rebuild the CONTENT, and
+ *  the content moving is no reason to move the reader.
+ *
+ *  Two mechanisms, because they answer two different questions:
+ *
+ *    - across a rebuild in the same view, the anchor pair
+ *      (`yui_graph_viewport_of` / `yui_graph_place_at`) keeps a
+ *      NODE at the pixel it was on, which survives a relayout
+ *      that moves everything;
+ *    - across a RELOAD there is no node to hold on to yet, so
+ *      the viewport itself is restored -- zoom and position, as
+ *      G6 reports them.
+ ************************************************************/
+const CAMERA_SETTLE_MS = 700;
+
+function read_camera(gobj)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
+    if(!graph || typeof graph.getZoom !== "function" || typeof graph.getPosition !== "function") {
+        return null;
+    }
+    try {
+        let z = graph.getZoom();
+        let p = graph.getPosition();
+        if(!is_number(z) || !p || !is_number(p[0]) || !is_number(p[1])) {
+            return null;
+        }
+        return {zoom: z, x: p[0], y: p[1]};
+    } catch(e) {
+        return null;    /*  between renders: there is no camera to read  */
+    }
+}
+
+/*  Returns true when it placed the viewport, so the caller knows
+ *  not to fit.  */
+async function restore_camera(gobj)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+    let cam = gobj_read_attr(gobj, "camera");
+
+    if(!graph || empty_json(cam) || !is_number(cam.zoom)) {
+        return false;
+    }
+    priv._camera_restoring = true;
+    try {
+        await graph.zoomTo(cam.zoom);
+        if(is_number(cam.x) && is_number(cam.y)) {
+            await graph.translateTo([cam.x, cam.y]);
+        }
+        return true;
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: cannot restore the camera: ${e}`);
+        return false;
+    } finally {
+        priv._camera_restoring = false;
+    }
+}
+
+/************************************************************
+ *  A move settled: tell whoever persists it.
+ *
+ *  Debounced on a REAL time and with the browser's timer: a
+ *  wheel notch, a pinch and a drag each fire `aftertransform`
+ *  many times, and what is worth saving is where the gesture
+ *  ENDED. (`set_timeout` from gobj-js is a C_TIMER and shadows
+ *  the global -- this module imports neither.)
+ ************************************************************/
+function publish_camera_later(gobj)
+{
+    let priv = gobj.priv;
+
+    if(priv._camera_restoring || !priv._camera_placed) {
+        return;     /*  our own move, or the opening one  */
+    }
+    if(priv._camera_timer) {
+        clearTimeout(priv._camera_timer);
+    }
+    priv._camera_timer = setTimeout(() => {
+        priv._camera_timer = null;
+        if(gobj_is_destroying(gobj)) {
+            return;
+        }
+        let cam = read_camera(gobj);
+        if(!cam) {
+            return;     /*  Error already logged, or nothing to read  */
+        }
+        gobj_write_attr(gobj, "camera", cam);
+        gobj_publish_event(gobj, "EV_CAMERA_CHANGED", cam);
+    }, CAMERA_SETTLE_MS);
+}
+
 /************************************************************
  *  Fit the graph in the viewport, but never zoom out past the point
  *  where nothing on a card can be read.
@@ -9241,11 +9361,26 @@ async function reconcile_fold_apply(gobj, opts, visible)
         await graph_layout(gobj);
     }
 
-    if(opts.fit) {
-        await graph_fit_readable(gobj);
-    } else if(opts.keep && opts.keep_vp) {
-        await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
-    }
+    /*  THE VIEWPORT, and only here.
+     *
+     *  `restore` is the reader's saved camera coming back on the
+     *  first draw after a reload; `fit` is the opening frame of a
+     *  graph nobody has looked at yet; `keep` holds a node at the
+     *  pixel it was on across a rebuild. Anything else leaves the
+     *  camera alone, which is the default on purpose: a rebuild of
+     *  the CONTENT is not a reason to move the reader.  */
+    if(!(opts.restore && await restore_camera(gobj))) {
+        if(opts.fit) {
+            await graph_fit_readable(gobj);
+        } else if(opts.keep && opts.keep_vp) {
+            await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
+        }
+    }
+    /*  Whichever branch ran -- including none of them, which is a
+     *  graph somebody had arranged and left where it was -- the
+     *  opening viewport is decided from here on, and every move after
+     *  it is the reader's and worth remembering.  */
+    priv._camera_placed = true;
 
     update_resize_handles_position(gobj);
     update_port_resize_handles_position(gobj);
@@ -9484,10 +9619,23 @@ function ac_load_data(gobj, event, kw, src)
          *  nodes are about to be built: settle it first.  */
         apply_layout_direction(gobj);
 
-        /*  A graph laid out by us opens WHOLE (fit). Only when WE laid
-         *  it out — a saved arrangement includes where its owner was
-         *  looking. */
-        reconcile_fold(gobj, {relayout: true, fit: auto_laid}).then(() => {
+        /*  THE FIRST load decides the viewport: the reader's saved
+         *  camera if there is one, else the opening fit -- and only
+         *  when WE laid the graph out, since a saved arrangement
+         *  includes where its owner was looking.
+         *
+         *  Every load AFTER that is a REFRESH, and a refresh must not
+         *  move the camera: the reader asked for fresh data, not for a
+         *  new viewport. It holds a node instead, so the graph does not
+         *  jump even if the layout changed under it.  */
+        let vp_opts;
+        if(!priv._camera_placed) {
+            vp_opts = {restore: true, fit: auto_laid};
+        } else {
+            let keep = fold_keep_node(gobj);
+            vp_opts = {keep: keep, keep_vp: yui_graph_viewport_of(priv.graph, keep)};
+        }
+        reconcile_fold(gobj, Object.assign({relayout: true}, vp_opts)).then(() => {
             sync_history_plugin(gobj);
             /*  Nodes exist and are positioned now: apply a focus
              *  requested before the data was ready (deep link). */
@@ -10160,12 +10308,18 @@ function ac_set_main_topic(gobj, event, kw, src)
     if(!priv._fold_model) {
         return 0;
     }
+    /*  Read BEFORE the model is rebuilt: the node is looked up in the
+     *  tree that is on screen. If the new trunk leaves it out,
+     *  `yui_graph_place_at` finds nothing and the camera simply stays
+     *  where it was -- which is still not a refit.  */
+    let keep = fold_keep_node(gobj);
+    let vp = yui_graph_viewport_of(priv.graph, keep);
     rebuild_fold_model(gobj);
     fold_expand_to_depth(
         priv._fold_model, priv._fold_state,
         gobj_read_integer_attr(gobj, "expand_depth")
     );
-    reconcile_fold(gobj, {relayout: true, fit: true});
+    reconcile_fold(gobj, {relayout: true, keep: keep, keep_vp: vp});
     return 0;
 }
 
@@ -10200,9 +10354,15 @@ function ac_set_node_mode(gobj, event, kw, src)
     if(!priv.graph || !priv._fold_model) {
         return 0;       /*  applied when the records arrive  */
     }
+    /*  The camera is the reader's: a square and a card do not occupy
+     *  the same room, so the graph is laid out again -- and the node
+     *  being read stays at its pixel, at the zoom it was chosen at,
+     *  instead of the whole graph being fitted from scratch.  */
+    let keep = fold_keep_node(gobj);
+    let vp = yui_graph_viewport_of(priv.graph, keep);
     reshape_nodes(gobj, all_record_node_ids(gobj));
     reshape_more_chips(gobj);
-    reconcile_fold(gobj, {relayout: true, fit: true});
+    reconcile_fold(gobj, {relayout: true, keep: keep, keep_vp: vp});
     return 0;
 }
 
@@ -10898,6 +11058,9 @@ function create_gclass(gclass_name)
         ["EV_FIND_NODES",               0],
         ["EV_FIND_RESULT",              event_flag_t.EVF_OUTPUT_EVENT],
         ["EV_LAYOUT_AUTOSET",           event_flag_t.EVF_OUTPUT_EVENT],
+        /*  Optional: a host that does not persist the viewport is not
+         *  doing anything wrong, so no "publish without subscribers".  */
+        ["EV_CAMERA_CHANGED",           event_flag_t.EVF_OUTPUT_EVENT|event_flag_t.EVF_NO_WARN_SUBS],
         ["EV_TOGGLE_FOLD",              0],
         ["EV_SHOW_MORE",                0],
         ["EV_EXPAND_ALL",               0],

package/src/c_yui_gclass.js

@@ -404,7 +404,7 @@ function apply_view_mode(gobj)
 
     if(priv.$mode_btns) {
         for(let [m, $btn] of priv.$mode_btns) {
-            $btn.classList.toggle('pressed_state', m === mode);
+            $btn.classList.toggle('selected_state', m === mode);
             $btn.setAttribute("aria-pressed", (m === mode)? "true": "false");
         }
     }
@@ -983,7 +983,7 @@ function machine_view_switch(gobj)
         let on = (priv.machine_view === v.mode);
         return ['button', {class: 'button is-small GCLASS_MACHINE_VIEW ' +
                                   `GCLASS_MACHINE_VIEW_${v.mode.toUpperCase()}` +
-                                  (on? ' pressed_state': ''),
+                                  (on? ' selected_state': ''),
                            type: 'button',
                            'aria-pressed': on? 'true': 'false',
                            title: t(v.key), 'data-i18n-title': v.key,

package/src/c_yui_json.css

@@ -283,14 +283,14 @@
     margin-bottom: 0;
 }
 
-/*  The current view is marked with `pressed_state` (`yui_toolbar.css`),
- *  which is the library's one way of saying a toggle is ON. This switch
- *  used to fill itself with `--bulma-link`: right about Bulma's own
- *  `is-active` being too weak to say WHICH view you are looking at, and
- *  wrong about the answer -- a colour names a kind of ACTION, and this
- *  is a STATE. `z-index` is all that is left, so the marked button's
- *  border wins over its neighbours' in the `has-addons` group.  */
-.C_YUI_JSON .JSON_VIEW_MODE.pressed_state {
+/*  The current view is marked with `selected_state` (`yui_toolbar.css`):
+ *  the library's one way of saying WHICH segment of a selector is
+ *  chosen. This switch used to write that fill here itself -- the right
+ *  idea in the wrong place, since the same question is answered by the
+ *  graph's node modes, the map's modes and the period's granularities.
+ *  `z-index` is all that is left, so the marked button's border wins
+ *  over its neighbours' in the `has-addons` group.  */
+.C_YUI_JSON .JSON_VIEW_MODE.selected_state {
     z-index: 1;
 }
 

package/src/c_yui_json.js

@@ -442,12 +442,11 @@ function icon_button(gobj, icon, event_name, label_key)
  *   aimed — reaching the graph from the tree would mean passing
  *   through the text and rebuilding it on the way — so each view gets
  *   its own button and says where it goes.  apply_view_mode() moves
- *   the `pressed_state` mark -- the library's one way of saying a
- *   toggle is ON, the same the graph toolbars and the treedb legend
- *   use.  It used to be `is-active` with a blue fill of its own: a
- *   STATE wearing a palette colour, which is what the palette does
- *   NOT mean (it names kinds of ACTION), and a third spelling of a
- *   thing the library already had a name for.
+ *   the `selected_state` mark -- the library's one way of saying
+ *   WHICH segment of a selector is chosen, filled with the link
+ *   colour.  It used to be `is-active` with a fill written here: the
+ *   right idea, spelled a third time.  A toggle, which has no "which
+ *   one" to answer, wears the neutral `pressed_state` pill instead.
  ************************************************************/
 function view_mode_switch(gobj)
 {
@@ -558,7 +557,7 @@ function apply_view_mode(gobj)
 
     if(priv.$mode_btns) {
         for(let [m, $btn] of priv.$mode_btns) {
-            $btn.classList.toggle('pressed_state', m === mode);
+            $btn.classList.toggle('selected_state', m === mode);
             $btn.setAttribute("aria-pressed", (m === mode)? "true": "false");
         }
     }

package/src/c_yui_period.js

@@ -96,8 +96,9 @@ import {
 
 import i18next, {t} from "i18next";
 
-/*  `yui_toolbar.css` for `pressed_state`: the mark of a toggle that
- *  is ON lives with the toolbar, and a stylesheet rides its import.  */
+/*  `yui_toolbar.css` for `selected_state`: the mark of the chosen
+ *  segment of a selector lives with the toolbar, and a stylesheet
+ *  rides its import.  */
 import "./yui_toolbar.css";
 import "./c_yui_period.css";
 
@@ -702,13 +703,12 @@ function repaint(gobj)
     let priv = gobj.priv;
     let mode = cur_mode(gobj);
 
-    /*  The granularity in use looks PRESSED, like every other toggle of
-     *  the library (`pressed_state`, `yui_toolbar.css`). It used to be
-     *  `is-active` plus an `is-link` fill: a STATE painted with a colour,
-     *  and colours here name kinds of ACTION. An overflow granularity is
-     *  a `dropdown-item` and not a button, and there `is-active` is
-     *  Bulma's own mark for the current item of a menu -- which is
-     *  exactly what it is.  */
+    /*  This is a SELECTOR -- one granularity of several -- so the
+     *  chosen segment is FILLED (`selected_state`, `yui_toolbar.css`),
+     *  the same mark the graph's node modes and the map's modes wear.
+     *  An overflow granularity is a `dropdown-item` and not a button,
+     *  and there `is-active` is Bulma's own mark for the current item
+     *  of a menu -- which is exactly what it is.  */
     for(let m of priv.modes) {
         if(!m.$btn) {
             continue;
@@ -724,7 +724,7 @@ function repaint(gobj)
                 m.$btn.removeAttribute("aria-current");
             }
         } else {
-            m.$btn.classList.toggle("pressed_state", on);
+            m.$btn.classList.toggle("selected_state", on);
             m.$btn.setAttribute("aria-pressed", on? "true" : "false");
         }
     }
@@ -735,7 +735,7 @@ function repaint(gobj)
         /*  An overflow granularity in use must SAY so on the trigger: the
          *  control shows no active segment otherwise, and the user cannot
          *  tell a quarter from a month by the arrows alone.  */
-        priv.$more.classList.toggle("pressed_state", !!(mode && mode.overflow));
+        priv.$more.classList.toggle("selected_state", !!(mode && mode.overflow));
     }
 
     /*  The navigator STAYS, disabled, in the modes with nothing to walk: it
@@ -1013,10 +1013,10 @@ function cell_button(gobj, label, anchor_ms, selected, logical, aria)
      *  year around it.  */
     let $btn = createElement2(
         /*  The ONE place `is-small` is earned: 42 cells in a popover.  */
-        /*  The picked instant is PRESSED, like every other mark of the
-         *  library -- it used to be an `is-link` fill, a colour on a
-         *  state. `aria-current="date"` is the same fact for a reader.  */
-        ["button", {class: `button is-small ${selected? "pressed_state" : "is-ghost"} ${logical}`,
+        /*  The picked instant is the chosen one of a grid of 42, which
+         *  is the selector's question and not a toggle's, so it takes
+         *  the same fill. `aria-current="date"` says it to a reader.  */
+        ["button", {class: `button is-small ${selected? "selected_state" : "is-ghost"} ${logical}`,
                     type: "button", style: "width:100%;",
                     ...(selected? {"aria-current": "date"} : {}),
                     title: aria || "", "aria-label": aria || ""}, String(label)]);

package/src/c_yui_treedb_graph.js

@@ -136,6 +136,7 @@ SDATA(data_type_t.DTP_STRING,   "main_topic",       sdata_flag_t.SDF_PERSIST, ""
 SDATA(data_type_t.DTP_LIST,     "loose_topics",     sdata_flag_t.SDF_PERSIST, "[]", "Topics whose LOOSE records (no parent) are shown. User preference, per treedb"),
 SDATA(data_type_t.DTP_STRING,   "node_mode",        sdata_flag_t.SDF_PERSIST, "expanded", "How the records are drawn: `expanded` = the cards with their pills and ports, `compact` = one-line pills with the name, `shape` = coloured figures, the topology alone. User preference"),
 SDATA(data_type_t.DTP_BOOLEAN,  "node_labels",      sdata_flag_t.SDF_PERSIST, true, "A `shape` node says its name under its figure. User preference"),
+SDATA(data_type_t.DTP_DICT,     "camera",           sdata_flag_t.SDF_PERSIST, "{}", "Where the reader left the viewport: {zoom, x, y}. Handed to the engine on creation and written back when a move settles, so the graph opens where it was left. User preference, per treedb"),
 
 /*---------------- Remote Connection ----------------*/
 SDATA(data_type_t.DTP_POINTER,  "gobj_remote_yuno", 0,  null,   "Remote Yuno to request data"),
@@ -281,6 +282,7 @@ function mt_create(gobj)
             loose_topics: gobj_read_attr(gobj, "loose_topics") || [],
             node_mode: gobj_read_str_attr(gobj, "node_mode") || "expanded",
             node_labels: gobj_read_bool_attr(gobj, "node_labels"),
+            camera: gobj_read_attr(gobj, "camera") || {},
         },
         gobj
     );
@@ -652,9 +654,13 @@ function refresh_node_shape_buttons(gobj, $root)
         mode = 'expanded';
     }
     let labels = gobj_read_bool_attr(gobj, "node_labels");
+    /*  A SELECTOR, not a toggle: it picks one of three views, so the
+     *  chosen segment is FILLED (`selected_state`) and not drawn as a
+     *  pressed pill. The labels button below IS a toggle -- on or off,
+     *  no "which one" -- and keeps the pill.  */
     for(let $btn of $root.querySelectorAll('.GRAPH_NODE_MODE_BTN')) {
         let on = ($btn.getAttribute('data-mode') === mode);
-        $btn.classList.toggle('pressed_state', on);
+        $btn.classList.toggle('selected_state', on);
         $btn.setAttribute('aria-pressed', on? 'true' : 'false');
     }
     set_pressed_state($root, '.GRAPH_NODE_LABELS', labels);
@@ -2884,6 +2890,23 @@ function ac_layout_autoset(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  The reader moved the camera, and it has settled.
+ *
+ *  Persisted like every other choice of this toolbar, and for the
+ *  same reason: a zoom is a decision, and a decision that dies with
+ *  the tab has to be taken again every morning. The engine debounces,
+ *  so this runs once per gesture and not once per wheel notch.
+ ************************************************************/
+function ac_camera_changed(gobj, event, kw, src)
+{
+    gobj_write_attr(gobj, "camera", {
+        zoom: kw.zoom, x: kw.x, y: kw.y
+    });
+    gobj_save_persistent_attrs(gobj, "camera");
+    return 0;
+}
+
 /************************************************************
  *  Forward the find down to the graph child.
  ************************************************************/
@@ -3124,6 +3147,7 @@ function create_gclass(gclass_name)
             ["EV_SET_NODE_MODE",            ac_set_node_mode,           null],
             ["EV_TOGGLE_NODE_LABELS",       ac_toggle_node_labels,      null],
             ["EV_LAYOUT_AUTOSET",           ac_layout_autoset,          null],
+            ["EV_CAMERA_CHANGED",           ac_camera_changed,          null],
             ["EV_LEGEND_TOPIC",             ac_legend_topic,            null],
             ["EV_LEGEND_STATE",             ac_legend_state,            null],
             ["EV_FIND_RESULT",              ac_find_result,             null],
@@ -3169,6 +3193,7 @@ function create_gclass(gclass_name)
         ["EV_TOGGLE_NODE_LABELS",       0],
         ["EV_FIND_RESULT",              0],
         ["EV_LAYOUT_AUTOSET",           0],
+        ["EV_CAMERA_CHANGED",           0],
         ["EV_LEGEND_TOPIC",             0],
         ["EV_LEGEND_STATE",             0],
         ["EV_TOPIC_SELECTED",

package/src/yui_toolbar.css

@@ -110,3 +110,36 @@ a.flex-horizontal-section { /* To make flex any <a> */
     color: var(--bulma-background, #ffffff);
     border-color: var(--bulma-text, #2e333d);
 }
+
+/*********************************************************
+ *      The CHOSEN segment of a selector is FILLED
+ *
+ *  Two different controls, two different marks, and telling them apart
+ *  is the whole point:
+ *
+ *    - a TOGGLE is on or off, and looks PRESSED (above) -- a neutral
+ *      pill, no hue, because there is no "which one" to answer;
+ *    - a SELECTOR picks ONE of N, and the chosen segment is FILLED with
+ *      the link colour. A hue is what the eye finds in a row of
+ *      identical grey buttons: measured against the button's own ground
+ *      the fill is 5.14:1 in light and 3.53:1 in dark -- less luminance
+ *      than the pressed pill (9.44 / 8.46) and a different HUE, which
+ *      is what says "this one, of these".
+ *
+ *  The raw `--bulma-link` and not `-on-scheme`: this is a FILL. The
+ *  `-on-scheme` variants exist for a brand colour used as INK -- they
+ *  darken it on a light scheme so text can sit on the page -- and a
+ *  darkened fill under `link-invert` text is a button nobody asked for.
+ *  Ink takes `-on-scheme`; a background takes the raw token and pairs
+ *  it with `-invert`.
+ *
+ *  `:hover` for the same reason as the pressed rule: without it, Bulma's
+ *  `.button:hover` takes the fill back and the chosen segment appears to
+ *  come unchosen under the pointer.
+ *********************************************************/
+.button.selected_state,
+.button.selected_state:hover {
+    background-color: var(--bulma-link, #3273dc);
+    border-color: var(--bulma-link, #3273dc);
+    color: var(--bulma-link-invert, #fff);
+}

package/src/yui_toolbar.js

@@ -186,4 +186,25 @@ function set_pressed_state($container, selector, set)
     });
 }
 
-export {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE, set_pressed_state};
+/************************************************************
+ *  Set or reset the CHOSEN state of one segment of a selector.
+ *
+ *  Not the same control as a toggle, and not the same mark: a
+ *  toggle is on or off and looks pressed (a neutral pill, no
+ *  hue, because there is no "which one" to answer); a selector
+ *  picks ONE of N and fills the chosen segment with the link
+ *  colour, which is what the eye finds in a row of identical
+ *  grey buttons. See `yui_toolbar.css` for the measurements.
+ ************************************************************/
+function set_selected_state($container, selector, set)
+{
+    if(!$container) {
+        return;
+    }
+    $container.querySelectorAll(selector).forEach(($el) => {
+        $el.classList.toggle("selected_state", !!set);
+    });
+}
+
+export {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE,
+        set_pressed_state, set_selected_state};