@yuneta/gobj-ui 7.23.83 → 7.23.85

package/dist/gobj-ui.es.js

@@ -13982,7 +13982,7 @@ function ac_json_item_clicked(gobj, event, kw, src) {
 /************************************************************
 *   EV_LANGUAGE_CHANGED — re-translate chrome + re-render
 ************************************************************/
-function ac_language_changed$6(gobj, event, kw, src) {
+function ac_language_changed$8(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
 	if ($container) {
@@ -14043,7 +14043,7 @@ function create_gclass$12(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$6,
+			ac_language_changed$8,
 			null
 		],
 		[
@@ -14119,7 +14119,7 @@ function create_gclass$12(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$6,
+			ac_language_changed$8,
 			null
 		],
 		[
@@ -15058,7 +15058,7 @@ function ac_theme_changed(gobj, event, kw, src) {
 *   inside an innerHTML string, where refresh_language()
 *   cannot reach.
 ************************************************************/
-function ac_language_changed$5(gobj, event, kw, src) {
+function ac_language_changed$7(gobj, event, kw, src) {
 	let $container = gobj_read_attr(gobj, "$container");
 	if ($container) refresh_language($container, t);
 	load_fsm(gobj);
@@ -15165,7 +15165,7 @@ function create_gclass$11(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$5,
+			ac_language_changed$7,
 			null
 		],
 		[
@@ -16722,7 +16722,7 @@ function ac_copy_all(gobj, event, kw, src) {
 *   is. Re-rendering is the only way both end up in the same
 *   language.
 ************************************************************/
-function ac_language_changed$4(gobj, event, kw, src) {
+function ac_language_changed$6(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
 	if ($container) {
@@ -16814,7 +16814,7 @@ function create_gclass$10(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$4,
+			ac_language_changed$6,
 			null
 		],
 		[
@@ -19398,7 +19398,7 @@ function ac_gclass_closed(gobj, event, kw, src) {
 *  A rebuild, not a re-translation: the words live inside the
 *  innerHTML of G6 nodes, where refresh_language() cannot go.
 ************************************************************/
-function ac_language_changed$3(gobj, event, kw, src) {
+function ac_language_changed$5(gobj, event, kw, src) {
 	let $container = gobj_read_attr(gobj, "$container");
 	if ($container) refresh_language($container, t);
 	hide_popover(gobj);
@@ -19542,7 +19542,7 @@ function create_gclass$9(gclass_name) {
 		],
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$3,
+			ac_language_changed$5,
 			null
 		]
 	]]], gmt$9, 0, attrs_table$9, PRIVATE_DATA$9, 0, 0, 0, 0);
@@ -25730,7 +25730,7 @@ function refuse_if_readonly$2(gobj, event) {
 *  placeholder, its loading/error notices — drawn once, from its own lang
 *  dict. Re-apply it in the new language.
 ***************************************************************/
-function ac_language_changed$2(gobj, event, kw, src) {
+function ac_language_changed$4(gobj, event, kw, src) {
 	let bar = gobj_read_attr(gobj, "selection_bar");
 	if (bar) bar.refresh();
 	let tabulator = gobj_read_attr(gobj, "tabulator");
@@ -26568,7 +26568,7 @@ function create_gclass$5(gclass_name) {
 	const states = [["ST_IDLE", [
 		[
 			"EV_LANGUAGE_CHANGED",
-			ac_language_changed$2,
+			ac_language_changed$4,
 			null
 		],
 		[
@@ -27415,8 +27415,10 @@ function fold_reveal(model, state, node_key) {
 *
 *      `radial`: the root in the middle and a ring per depth, each
 *      subtree owning a sector proportional to its leaves; the radius
-*      of a ring grows until its neighbours sit side by side, so
-*      nothing overlaps by construction (see `layout_radial`).
+*      of a ring grows until its neighbours sit side by side AND
+*      until it clears the ring inside it, so nothing overlaps by
+*      construction, across the ring or along the radius (see
+*      `layout_radial`).
 *
 *      Pure: takes plain nodes and edges, returns positions. The G6
 *      classes in c_g6_nodes_tree.js are two thin adapters over it.
@@ -27596,6 +27598,10 @@ function tidy_tree_lr(nodes, edges, o) {
 	}
 	return pos;
 }
+function extent_at(n, a) {
+	if (!n) return 0;
+	return Math.abs(n.w * Math.cos(a)) + Math.abs(n.h * Math.sin(a));
+}
 /************************************************************
 *  The radial tree: the root in the middle, a ring per depth.
 *
@@ -27638,14 +27644,15 @@ function layout_radial(nodes, edges, opts) {
 	let ring_of = (id) => t.depth.get(id) + (single ? 0 : 1);
 	let angle = /* @__PURE__ */ new Map();
 	let rings = [];
-	let sector = (root_id, root_from, root_span) => {
+	let sector = (root_id, root_from, root_span, root_parent) => {
 		let stack = [{
 			id: root_id,
 			from: root_from,
-			span: root_span
+			span: root_span,
+			parent: root_parent
 		}];
 		while (stack.length) {
-			let { id, from, span } = stack.pop();
+			let { id, from, span, parent } = stack.pop();
 			let a = from + span / 2;
 			angle.set(id, a);
 			let ring = ring_of(id);
@@ -27654,7 +27661,9 @@ function layout_radial(nodes, edges, opts) {
 			rings[ring].push({
 				id,
 				angle: a,
-				diag: Math.hypot(n.w, n.h)
+				diag: Math.hypot(n.w, n.h),
+				ext: extent_at(n, a),
+				parent_ext: parent ? extent_at(t.by_id.get(parent), a) : 0
 			});
 			let cursor = from;
 			for (let kid of t.children.get(id) || []) {
@@ -27662,7 +27671,8 @@ function layout_radial(nodes, edges, opts) {
 				stack.push({
 					id: kid,
 					from: cursor,
-					span: part
+					span: part,
+					parent: id
 				});
 				cursor += part;
 			}
@@ -27674,20 +27684,21 @@ function layout_radial(nodes, edges, opts) {
 		let cursor = -Math.PI / 2;
 		for (let kid of t.children.get(root) || []) {
 			let part = 2 * Math.PI * leaves.get(kid) / leaves.get(root);
-			sector(kid, cursor, part);
+			sector(kid, cursor, part, root);
 			cursor += part;
 		}
 	} else {
 		let cursor = -Math.PI / 2;
 		for (let root of t.roots) {
 			let part = 2 * Math.PI * leaves.get(root) / total;
-			sector(root, cursor, part);
+			sector(root, cursor, part, null);
 			cursor += part;
 		}
 	}
 	let radius = [0];
 	for (let ring = 1; ring < rings.length; ring++) {
 		let r = radius[ring - 1] + o.ranksep;
+		for (let n of rings[ring] || []) r = Math.max(r, radius[ring - 1] + (n.parent_ext + n.ext) / 2 + o.nodesep);
 		let list = (rings[ring] || []).slice().sort((a, b) => a.angle - b.angle);
 		for (let i = 0; i < list.length && list.length > 1; i++) {
 			let a = list[i];
@@ -54673,11 +54684,14 @@ var PRIVATE_DATA$4 = {
 	_edge_icon_el: null,
 	_edge_delete_el: null,
 	_edge_popover_el: null,
+	_edge_preview_undo: null,
 	_port_icon_el: null,
 	_port_popover_el: null,
+	_port_preview_undo: null,
 	_node_icon_el: null,
 	_node_delete_el: null,
 	_node_popover_el: null,
+	_node_preview_undo: null,
 	_node_detail_el: null,
 	_detail_node_id: null,
 	_delete_confirm_el: null,
@@ -54761,12 +54775,16 @@ function mt_writing$1(gobj, path) {
 *          Framework Method: Start
 ***************************************************************/
 function mt_start$4(gobj) {
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_subscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
 	return 0;
 }
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
 function mt_stop$4(gobj) {
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
 	return 0;
 }
 /***************************************************************
@@ -54774,10 +54792,6 @@ function mt_stop$4(gobj) {
 ***************************************************************/
 function mt_destroy$4(gobj) {
 	let priv = gobj.priv;
-	if (priv._on_language_changed) {
-		i18next.off("languageChanged", priv._on_language_changed);
-		priv._on_language_changed = null;
-	}
 	uninstall_fold_listener(gobj);
 	if (priv._on_pointerdown_focus) {
 		priv.$container.removeEventListener("pointerdown", priv._on_pointerdown_focus, true);
@@ -54972,11 +54986,6 @@ function configure_events(gobj) {
 		priv.last_zoom = z;
 		if (priv.anchor_state === "on" && priv.anchor_id) yui_graph_center_on(priv.graph, priv.anchor_id);
 	});
-	priv._on_language_changed = () => {
-		update_toolbar(gobj);
-		repaint_more_chips(gobj);
-	};
-	i18next.on("languageChanged", priv._on_language_changed);
 	priv._on_pointerdown_focus = (ev) => {
 		let target = ev.target;
 		if (target && typeof target.closest === "function") {
@@ -55494,12 +55503,23 @@ var LR_LAYOUTS = ["dagre"];
 *  toolbar's +/-, and the two-finger pinch of g6_touch_gestures.
 *  `enable` on the scroll keeps the two apart: a Ctrl wheel is
 *  the zoom's, so the scroll stands aside for it.
+*
+*  And the two have to name the SAME key, or the gesture falls
+*  between them: the scroll stood aside for Meta as well, while
+*  the zoom listened for Control alone, so Cmd + wheel neither
+*  scrolled nor zoomed. It is ONE key and not two because a G6
+*  `trigger` is a CHORD, not a list of alternatives -- its
+*  `Shortcut.match()` compares the held keys to the bound ones
+*  as a SET, so ["Control", "Meta"] means both keys down at
+*  once. Control it is, on every platform: it is what a
+*  trackpad pinch arrives as, so a Mac keeps its pinch and
+*  gains nothing to press by mistake.
 ************************************************************/
 function camera_behaviors() {
 	return [{
 		type: "scroll-canvas",
 		key: "scroll-canvas",
-		enable: (event) => !(event && (event.ctrlKey || event.metaKey))
+		enable: (event) => !(event && event.ctrlKey)
 	}, {
 		type: "zoom-canvas",
 		key: "zoom-canvas",
@@ -55631,6 +55651,52 @@ function topic_defaults_of(gobj, topic_name) {
 	return is_object(topic_props) && is_object(topic_props.defaults) ? topic_props.defaults : null;
 }
 /************************************************************
+*  What a node is PAINTED with: its own colours, then the
+*  topic's default, then the topic's colour.
+*
+*  A card is html, and its html was built with `desc.color`
+*  every time it was repainted -- so a colour chosen in the node
+*  properties popover lasted until the next selection, focus,
+*  theme or pill change, and was never written to `__graphs__`
+*  at all. Only the `shape` view kept it, because a figure is a
+*  native G6 node and `style.fill` is what paints it. The FIGURE
+*  was already remembered (`node_shape`); this is the wiring the
+*  colour was missing.
+************************************************************/
+function node_paint_of(gobj, desc, geometry) {
+	let defaults = topic_defaults_of(gobj, desc.topic_name);
+	let g = is_object(geometry) ? geometry : {};
+	let fill = g.fill || defaults && defaults.fill || desc.color;
+	return {
+		fill,
+		stroke: g.stroke || defaults && defaults.stroke || getStrokeColor(fill),
+		lineWidth: g.lineWidth || defaults && defaults.lineWidth || 1
+	};
+}
+/************************************************************
+*  Write a chosen paint into an entry of `__graphs__` -- a
+*  node's or a topic's defaults.
+*
+*  A colour nobody chose is not saved: the topic's own colour,
+*  with the stroke and the line width that go with it, is what a
+*  card wears anyway, and writing it down would freeze today's
+*  palette on that card -- the trap the SIZES fell into in
+*  7.23.80, and the palette is assigned by POSITION (`ac_descs`),
+*  so it moves when a topic is added. Choosing it back MEANS
+*  forgetting the entry.
+************************************************************/
+function paint_into(entry, desc, fill, stroke, line_width) {
+	if (fill === desc.color && stroke === getStrokeColor(desc.color) && line_width === 1) {
+		delete entry.fill;
+		delete entry.stroke;
+		delete entry.lineWidth;
+		return;
+	}
+	entry.fill = fill;
+	entry.stroke = stroke;
+	entry.lineWidth = line_width;
+}
+/************************************************************
 *  The CARD: an html node, the tier's size, the ports, the
 *  saved geometry on top. The flags (focus, selection, anchor)
 *  are not painted here: repaint_cards() reads them where they
@@ -55641,10 +55707,11 @@ function card_shape_of(gobj, desc, record, geometry, pills_html) {
 	let node_treedb_type = desc.node_treedb_type;
 	let label = node_label(desc, record);
 	let ports = build_ports(gobj, desc);
+	let paint = node_paint_of(gobj, desc, geometry);
 	let style = {
-		fill: desc.color,
-		stroke: getStrokeColor(desc.color),
-		lineWidth: 1,
+		fill: paint.fill,
+		stroke: paint.stroke,
+		lineWidth: paint.lineWidth,
 		lineDash: [],
 		halo: false,
 		labelText: ""
@@ -55653,9 +55720,9 @@ function card_shape_of(gobj, desc, record, geometry, pills_html) {
 	style.size = size;
 	style.dx = -size[0] / 2;
 	style.dy = -size[1] / 2;
-	if (node_treedb_type === "child") style.innerHTML = build_chip_innerHTML(desc.color, priv.theme, record.icon, label, record.id);
-	else if (node_treedb_type === "extended") style.innerHTML = build_node_innerHTML(desc.color, priv.theme, record.icon, label, desc.topic_name, true, record.id, false, false, false, pills_html);
-	else style.innerHTML = build_node_innerHTML(desc.color, priv.theme, record.icon, label, desc.topic_name, false, record.id, false, false, false, pills_html);
+	if (node_treedb_type === "child") style.innerHTML = build_chip_innerHTML(paint.fill, priv.theme, record.icon, label, record.id);
+	else if (node_treedb_type === "extended") style.innerHTML = build_node_innerHTML(paint.fill, priv.theme, record.icon, label, desc.topic_name, true, record.id, false, false, false, pills_html);
+	else style.innerHTML = build_node_innerHTML(paint.fill, priv.theme, record.icon, label, desc.topic_name, false, record.id, false, false, false, pills_html);
 	let topic_props = priv._graph_properties[desc.topic_name];
 	let topic_defaults = is_object(topic_props) && is_object(topic_props.defaults) ? topic_props.defaults : null;
 	if (topic_defaults) {
@@ -55727,17 +55794,18 @@ function pill_shape_of(gobj, desc, record, geometry) {
 	let priv = gobj.priv;
 	let size = PILL_SIZE[desc.node_treedb_type] || PILL_SIZE.hierarchical;
 	let ports = build_ports(gobj, desc);
+	let paint = node_paint_of(gobj, desc, geometry);
 	let style = {
-		fill: desc.color,
-		stroke: getStrokeColor(desc.color),
-		lineWidth: 1,
+		fill: paint.fill,
+		stroke: paint.stroke,
+		lineWidth: paint.lineWidth,
 		lineDash: [],
 		halo: false,
 		labelText: "",
 		size: [...size],
 		dx: -size[0] / 2,
 		dy: -size[1] / 2,
-		innerHTML: build_chip_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), record.id)
+		innerHTML: build_chip_innerHTML(paint.fill, priv.theme, record.icon, node_label(desc, record), record.id)
 	};
 	dress_ports(gobj, style, ports, geometry, topic_defaults_of(gobj, desc.topic_name), PORT_R_PILL, true);
 	return {
@@ -55748,7 +55816,7 @@ function pill_shape_of(gobj, desc, record, geometry) {
 function pill_innerHTML_of(gobj, nd, theme, highlight, selected, anchored) {
 	let desc = nd.data.desc;
 	let record = nd.data.record || {};
-	return build_chip_innerHTML(desc.color, theme, record.icon, node_label(desc, record), record.id, highlight, selected, anchored);
+	return build_chip_innerHTML(node_fill_of(nd), theme, record.icon, node_label(desc, record), record.id, highlight, selected, anchored);
 }
 function node_figure_of(gobj, desc, geometry) {
 	let shape = geometry ? geometry.node_shape : null;
@@ -55775,8 +55843,9 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 	let side = SHAPE_SIZE[tier] || SHAPE_SIZE.hierarchical;
 	let labels = gobj_read_bool_attr(gobj, "node_labels");
 	let figure = node_figure_of(gobj, desc, geometry || {});
-	let stroke = getStrokeColor(desc.color);
-	let line_width = 1.5;
+	let paint = node_paint_of(gobj, desc, geometry);
+	let stroke = paint.stroke;
+	let line_width = Math.max(paint.lineWidth, 1.5);
 	if (f.selected) {
 		stroke = SELECT_RING;
 		line_width = 3;
@@ -55794,7 +55863,7 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 	let style = {
 		size: [side, side],
 		radius: figure === "square" ? Math.round(side / 5) : 0,
-		fill: desc.color,
+		fill: paint.fill,
 		stroke,
 		lineWidth: line_width,
 		lineDash: dash,
@@ -56967,6 +57036,34 @@ function hide_overlay(gobj, ...keys) {
 /************************************************************
 *  Enable the save button (mark graph as dirty).
 ************************************************************/
+/************************************************************
+*  A popover that PREVIEWS its changes owes an undo.
+*
+*  What the preview writes is not the reader's answer until
+*  `apply` is pressed, and `cancel` used to be the only way
+*  back: every other way out of the popover -- a click on the
+*  canvas, the icon pressed again, the element going away --
+*  left the preview standing on the element, and the next Save
+*  wrote it to `__graphs__`. So the undo is kept beside the
+*  popover and run by whoever hides it; `apply` drops it first,
+*  because then the preview IS the answer.
+************************************************************/
+function set_preview_undo(gobj, key, undo) {
+	gobj.priv[key] = undo;
+}
+function drop_preview_undo(gobj, key) {
+	gobj.priv[key] = null;
+}
+function run_preview_undo(gobj, key) {
+	let undo = gobj.priv[key];
+	gobj.priv[key] = null;
+	if (!undo || gobj_is_destroying(gobj)) return;
+	try {
+		undo();
+	} catch (e) {
+		log_error(`${gobj_short_name(gobj)}: cannot undo the preview: ${e}`);
+	}
+}
 function mark_graph_dirty(gobj) {
 	let $container = gobj_read_attr(gobj, "$container");
 	enableElements($container, ".EV_SAVE_GRAPH");
@@ -57564,6 +57661,26 @@ function port_hit_slop_world(graph) {
 	return slop / zoom;
 }
 /************************************************************
+*  Whether a point landed on a port, by the port's SHAPE.
+*
+*  A port was a circle and the test was a radius; since 7.23.81
+*  it can be a square, a diamond or a triangle too, and a circle
+*  around a diamond answers for the air off its corners while
+*  missing the middle of its edges. `r` is the drawn radius with
+*  the hit slop already added, and the shapes are the ones
+*  TreedbCard.drawPortShapes() draws from it.
+*
+*      dx, dy  the point, relative to the port's centre
+************************************************************/
+function port_shape_hit(shape, dx, dy, r) {
+	switch (shape) {
+		case "square": return Math.abs(dx) <= r && Math.abs(dy) <= r;
+		case "diamond": return Math.abs(dx) + Math.abs(dy) <= r;
+		case "triangle": return dy <= r && 2 * Math.abs(dx) - dy <= r;
+		default: return Math.hypot(dx, dy) <= r;
+	}
+}
+/************************************************************
 *  Detect if a click in canvas coordinates hits a port.
 *  Returns the port key string, or null if no port hit.
 ************************************************************/
@@ -57585,7 +57702,7 @@ function detect_port_click(gobj, node_id, canvasX, canvasY) {
 		let dx = canvasX - px;
 		let dy = canvasY - py;
 		let dist = Math.sqrt(dx * dx + dy * dy);
-		if (dist <= r + slop && dist < best_dist) {
+		if (port_shape_hit(ports[i].shape, dx, dy, r + slop) && dist < best_dist) {
 			best_dist = dist;
 			best_key = ports[i].key;
 		}
@@ -57726,6 +57843,7 @@ function toggle_port_popover(gobj) {
 	else show_port_popover(gobj);
 }
 function hide_port_popover(gobj) {
+	run_preview_undo(gobj, "_port_preview_undo");
 	hide_overlay(gobj, "_port_popover_el");
 }
 function ports_with(ports, port_key, changes) {
@@ -57747,6 +57865,18 @@ function show_port_popover(gobj) {
 	let xy = port_icon_xy(gobj);
 	if (!xy) return;
 	const popover = create_popover_base(xy.x + floating_popover_dx(), xy.y, "g6-port-popover", "#d9d9d9", 180);
+	let undo_port = () => {
+		graph.updateNodeData([{
+			id: node_id,
+			style: { ports: ports_with(nodeData.style.ports, port_key, {
+				shape: orig_shape,
+				r: orig_r
+			}) }
+		}]);
+		graph.draw().then(() => {
+			update_port_resize_handles_position(gobj);
+		});
+	};
 	function preview_port() {
 		let r = parseInt(rInput.value) || orig_r;
 		graph.updateNodeData([{
@@ -57790,27 +57920,19 @@ function show_port_popover(gobj) {
 		text: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
-			graph.updateNodeData([{
-				id: node_id,
-				style: { ports: ports_with(nodeData.style.ports, port_key, {
-					shape: orig_shape,
-					r: orig_r
-				}) }
-			}]);
-			graph.draw().then(() => {
-				update_port_resize_handles_position(gobj);
-			});
 			hide_port_popover(gobj);
 		}
 	}, {
 		text: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
+			drop_preview_undo(gobj, "_port_preview_undo");
 			apply_port_properties(gobj, node_id, port_key, shapeSelect.value, parseInt(rInput.value) || orig_r, scopeSelect.value);
 		}
 	}]);
 	priv.$container.appendChild(popover);
 	priv._port_popover_el = popover;
+	set_preview_undo(gobj, "_port_preview_undo", undo_port);
 	clamp_popover_position(gobj, popover);
 }
 /************************************************************
@@ -58412,6 +58534,16 @@ function show_edge_popover(gobj) {
 	let mid = get_edge_viewport_midpoint(gobj, edge_id);
 	if (!mid) return;
 	const popover = create_popover_base(mid.x + floating_popover_dx(), mid.y + floating_icon_dy(), "g6-edge-popover", "#d9d9d9", 180);
+	let undo_edge = () => {
+		graph.updateEdgeData([{
+			id: edge_id,
+			style: {
+				lineWidth: origLW,
+				stroke: origStroke
+			}
+		}]);
+		graph.draw();
+	};
 	function preview_edge() {
 		let lw = parseInt(lwInput.value) || 2;
 		let color = colorInput.value;
@@ -58447,25 +58579,19 @@ function show_edge_popover(gobj) {
 		text: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
-			graph.updateEdgeData([{
-				id: edge_id,
-				style: {
-					lineWidth: origLW,
-					stroke: origStroke
-				}
-			}]);
-			graph.draw();
 			deselect_edge(gobj);
 		}
 	}, {
 		text: "apply",
 		style: "flex:1;padding:6px;background:#52c41a;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
+			drop_preview_undo(gobj, "_edge_preview_undo");
 			apply_edge_properties(gobj, edge_id, parseInt(lwInput.value) || 2, colorInput.value, scopeSelect.value);
 		}
 	}]);
 	priv.$container.appendChild(popover);
 	priv._edge_popover_el = popover;
+	set_preview_undo(gobj, "_edge_preview_undo", undo_edge);
 	clamp_popover_position(gobj, popover);
 }
 /************************************************************
@@ -58487,6 +58613,7 @@ function clamp_popover_position(gobj, popover) {
 	popover.style.top = top + "px";
 }
 function hide_edge_popover(gobj) {
+	run_preview_undo(gobj, "_edge_preview_undo");
 	hide_overlay(gobj, "_edge_popover_el");
 }
 /************************************************************
@@ -58561,23 +58688,23 @@ function show_node_popover(gobj) {
 	let rect = get_node_viewport_rect(gobj, node_id);
 	if (!rect) return;
 	const popover = create_popover_base(rect.right + floating_popover_dx(), rect.top + floating_icon_dy(), "g6-node-popover", "#d9d9d9", 180);
-	let node_graph_type = nodeData.data && nodeData.data.desc ? nodeData.data.desc.node_treedb_type : null;
-	function preview_node() {
-		let fill = fillInput.value;
-		let updateStyle = {
-			fill,
-			stroke: strokeInput.value,
-			lineWidth: parseInt(lwInput.value) || 1
-		};
-		if (node_graph_type === "hierarchical") {
-			let record = nodeData.data.record || {};
-			updateStyle.innerHTML = build_node_innerHTML(fill, priv.theme, record.icon, node_label(nodeData.data.desc, record), nodeData.data.desc.topic_name, false, record.id, false, false, false, pills_html_of(gobj, nodeData));
-		}
+	let paint_node = (fill, stroke, lw) => {
 		graph.updateNodeData([{
 			id: node_id,
-			style: updateStyle
+			style: {
+				fill,
+				stroke,
+				lineWidth: lw
+			}
 		}]);
+		repaint_cards(gobj, /* @__PURE__ */ new Set([node_id]));
 		graph.draw();
+	};
+	let undo_node = () => {
+		paint_node(origFill, origStroke, origLW);
+	};
+	function preview_node() {
+		paint_node(fillInput.value, strokeInput.value, parseInt(lwInput.value) || 1);
 	}
 	create_form_label(popover, "fill color");
 	let fillInput = create_form_color_input(popover, currentFill, preview_node);
@@ -58612,34 +58739,23 @@ function show_node_popover(gobj) {
 		text: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
-			let restoreStyle = {
-				fill: origFill,
-				stroke: origStroke,
-				lineWidth: origLW
-			};
-			if (node_graph_type === "hierarchical") {
-				let record = nodeData.data.record || {};
-				restoreStyle.innerHTML = build_node_innerHTML(origFill, priv.theme, record.icon, node_label(nodeData.data.desc, record), nodeData.data.desc.topic_name, false, record.id, false, false, false, pills_html_of(gobj, nodeData));
-			}
-			graph.updateNodeData([{
-				id: node_id,
-				style: restoreStyle
-			}]);
-			graph.draw();
 			hide_node_popover(gobj);
 		}
 	}, {
 		text: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
+			drop_preview_undo(gobj, "_node_preview_undo");
 			apply_node_properties(gobj, node_id, fillInput.value, strokeInput.value, parseInt(lwInput.value) || 1, scopeSelect.value, shapeSelect.value);
 		}
 	}]);
 	priv.$container.appendChild(popover);
 	priv._node_popover_el = popover;
+	set_preview_undo(gobj, "_node_preview_undo", undo_node);
 	clamp_popover_position(gobj, popover);
 }
 function hide_node_popover(gobj) {
+	run_preview_undo(gobj, "_node_preview_undo");
 	hide_overlay(gobj, "_node_popover_el");
 }
 /************************************************************
@@ -58827,15 +58943,19 @@ function refresh_minimap(gobj) {
 *  same three-way choice — it lived inline in the theme refresh and is
 *  shared now. Returns null for a node that carries no desc.
 ************************************************************/
+function node_fill_of(nd) {
+	return nd && nd.style && nd.style.fill || nd.data.desc.color;
+}
 function node_innerHTML_of(nd, theme, highlight, selected, anchored, pills_html) {
 	if (!nd || !nd.data || !nd.data.desc) return null;
 	let desc = nd.data.desc;
 	let record = nd.data.record || {};
 	let label = node_label(desc, record);
+	let fill = node_fill_of(nd);
 	switch (desc.node_treedb_type) {
-		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight, selected, anchored);
-		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected, anchored, pills_html);
-		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected, anchored, pills_html);
+		case "child": return build_chip_innerHTML(fill, theme, record.icon, label, record.id, highlight, selected, anchored);
+		case "extended": return build_node_innerHTML(fill, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected, anchored, pills_html);
+		case "hierarchical": return build_node_innerHTML(fill, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected, anchored, pills_html);
 	}
 	return null;
 }
@@ -59390,15 +59510,19 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope, sh
 	if (!nodeData || !nodeData.data) return;
 	let source_topic = nodeData.data.desc ? nodeData.data.desc.topic_name : null;
 	let updates = [];
+	let repaint = /* @__PURE__ */ new Set();
 	const nodes = graph.getData().nodes;
 	let figure = shape && str_in_list(NODE_SHAPES, shape) ? shape : "";
 	let reshaped = [];
-	if (figure && scope !== "this") {
+	if (scope !== "this") {
 		let topics = scope === "same_topic" ? [source_topic] : Object.keys(priv.descs || {});
 		for (let topic_name of topics) {
+			let desc = priv.descs[topic_name];
+			if (!desc) continue;
 			if (!is_object(priv._graph_properties[topic_name])) priv._graph_properties[topic_name] = {};
 			let defaults = priv._graph_properties[topic_name].defaults || {};
-			defaults.node_shape = figure;
+			if (figure) defaults.node_shape = figure;
+			paint_into(defaults, desc, fill, stroke, lineWidth);
 			priv._graph_properties[topic_name].defaults = defaults;
 		}
 	}
@@ -59407,27 +59531,27 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope, sh
 		if (!nd || !nd.data || !nd.data.desc) continue;
 		if (scope === "this" && nodes[i].id !== node_id) continue;
 		if (scope === "same_topic" && nd.data.desc.topic_name !== source_topic) continue;
+		let entry = node_props_entry(gobj, nd);
 		if (figure) {
-			node_props_entry(gobj, nd).node_shape = figure;
+			entry.node_shape = figure;
 			if (node_mode_of(gobj, nodes[i].id) === "shape") reshaped.push(nodes[i].id);
 		}
+		paint_into(entry, nd.data.desc, fill, stroke, lineWidth);
 		let updateStyle = {
 			fill,
 			stroke,
 			lineWidth
 		};
-		if (nd.data.desc.node_treedb_type === "hierarchical") {
-			let record = nd.data.record || {};
-			updateStyle.innerHTML = build_node_innerHTML(fill, priv.theme, record.icon, node_label(nd.data.desc, record), nd.data.desc.topic_name, false, record.id, false, false, false, pills_html_of(gobj, nd));
-		}
 		updates.push({
 			id: nodes[i].id,
 			style: updateStyle
 		});
+		repaint.add(nodes[i].id);
 	}
 	if (updates.length > 0) {
 		graph.updateNodeData(updates);
 		if (reshaped.length) reshape_nodes(gobj, reshaped);
+		repaint_cards(gobj, repaint);
 		graph.draw().then(() => {
 			mark_graph_dirty(gobj);
 		});
@@ -60282,6 +60406,17 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 	return changed;
 }
 /************************************************************
+*  The application changed language: what this gclass DRAWS has
+*  to be drawn again. `refresh_language()` reaches what carries
+*  an i18n key in the DOM; a G6 toolbar and the html of a chip
+*  are built here and carry none.
+************************************************************/
+function ac_language_changed$3(gobj, event, kw, src) {
+	update_toolbar(gobj);
+	repaint_more_chips(gobj);
+	return 0;
+}
+/************************************************************
 *  Repaint the `+N` chips (theme or language changed).
 ************************************************************/
 function repaint_more_chips(gobj) {
@@ -61517,6 +61652,11 @@ function create_gclass$4(gclass_name) {
 			"EV_THEME",
 			ac_theme$1,
 			null
+		],
+		[
+			"EV_LANGUAGE_CHANGED",
+			ac_language_changed$3,
+			null
 		]
 	]]];
 	const event_types = [
@@ -61577,7 +61717,8 @@ function create_gclass$4(gclass_name) {
 		["EV_SHOW", 0],
 		["EV_HIDE", 0],
 		["EV_RESIZE", 0],
-		["EV_THEME", 0]
+		["EV_THEME", 0],
+		["EV_LANGUAGE_CHANGED", 0]
 	];
 	__gclass__$4 = gclass_create(gclass_name, event_types, states, gmt$4, 0, attrs_table$4, PRIVATE_DATA$4, 0, 0, 0, gclass_flag_t.gcflag_manual_start);
 	if (!__gclass__$4) return -1;
@@ -61665,6 +61806,7 @@ var PRIVATE_DATA$3 = {
 	layout: null,
 	_topics_subscribed: {},
 	_legend_state: null,
+	_find_result: null,
 	_links_subscribed: false,
 	is_pinhold_window: false
 };
@@ -61718,6 +61860,8 @@ function mt_writing(gobj, path) {
 ***************************************************************/
 function mt_start$3(gobj) {
 	let priv = gobj.priv;
+	let shell = yui_shell_of(gobj);
+	if (shell) gobj_subscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
 	if (priv.gobj_nodes_tree) gobj_start(priv.gobj_nodes_tree);
 	if (priv.gobj_treedb_tables) gobj_start(priv.gobj_treedb_tables);
 	request_treedb_descs(gobj);
@@ -61728,7 +61872,10 @@ function mt_start$3(gobj) {
 ***************************************************************/
 function mt_stop$3(gobj) {
 	let shell = yui_shell_of(gobj);
-	if (shell) yui_shell_set_sub_routes(shell, gobj_read_str_attr(gobj, "base_route"), null);
+	if (shell) {
+		yui_shell_set_sub_routes(shell, gobj_read_str_attr(gobj, "base_route"), null);
+		gobj_unsubscribe_event(shell, "EV_LANGUAGE_CHANGED", {}, gobj);
+	}
 	close_json_viewer(gobj);
 	gobj_stop_children(gobj);
 }
@@ -63130,11 +63277,13 @@ function refresh_legend(gobj) {
 			},
 			hidden ? `${entry.total}` : `${entry.visible}/${entry.total}`
 		]);
+		let body_key = is_main ? "main topic" : hidden ? "show topic" : "hide topic";
 		let body_attrs = {
 			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " GRAPH_LEGEND_FOCUSED" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
 			type: "button",
 			style: "gap:0; flex:0 0 auto;" + (focused ? " box-shadow: inset 0 0 0 2px var(--bulma-text, #2e333d);" : ""),
-			title: is_main ? t("main topic") : hidden ? t("show topic") : t("hide topic"),
+			title: t(body_key),
+			"data-i18n-title": body_key,
 			"aria-label": topic_name,
 			"aria-pressed": hidden ? "false" : "true"
 		};
@@ -63161,6 +63310,7 @@ function refresh_legend(gobj) {
 				title: t("main topic"),
 				"data-i18n-title": "main topic",
 				"aria-label": t("main topic"),
+				"data-i18n-aria-label": "main topic",
 				"aria-pressed": "true"
 			},
 			[[
@@ -63198,7 +63348,8 @@ function refresh_legend(gobj) {
 				style: "padding:0 .4rem;",
 				title: t("main topic"),
 				"data-i18n-title": "main topic",
-				"aria-label": t("main topic")
+				"aria-label": t("main topic"),
+				"data-i18n-aria-label": "main topic"
 			},
 			[[
 				"span",
@@ -63222,6 +63373,7 @@ function refresh_legend(gobj) {
 				title: t("loose records"),
 				"data-i18n-title": "loose records",
 				"aria-label": t("loose records"),
+				"data-i18n-aria-label": "loose records",
 				"aria-pressed": entry.loose_shown ? "true" : "false"
 			},
 			`+${entry.loose}`,
@@ -63242,6 +63394,7 @@ function refresh_legend(gobj) {
 				title: t("highlight topic"),
 				"data-i18n-title": "highlight topic",
 				"aria-label": t("highlight topic"),
+				"data-i18n-aria-label": "highlight topic",
 				"aria-pressed": focused ? "true" : "false"
 			},
 			[["i", {
@@ -63268,6 +63421,18 @@ function refresh_legend(gobj) {
 	}
 }
 /************************************************************
+*  The application changed language. `refresh_language()` has
+*  already been over the document by now (the shell runs it
+*  before publishing), so what is left is what carries no key:
+*  the legend, whose chips say an ACTION that depends on the
+*  state, and the find box's counted line.
+************************************************************/
+function ac_language_changed$2(gobj, event, kw, src) {
+	refresh_legend(gobj);
+	refresh_find_result(gobj);
+	return 0;
+}
+/************************************************************
 *  The engine said what is drawn: repaint the strip.
 ************************************************************/
 function ac_legend_state(gobj, event, kw, src) {
@@ -63409,6 +63574,12 @@ function ac_toggle_node_labels(gobj, event, kw, src) {
 *  term typed is an ANSWER and is shown; an empty box shows nothing.
 ************************************************************/
 function ac_find_result(gobj, event, kw, src) {
+	gobj.priv._find_result = kw || null;
+	refresh_find_result(gobj);
+	return 0;
+}
+function refresh_find_result(gobj) {
+	let kw = gobj.priv._find_result;
 	let $container = gobj_read_attr(gobj, "$container");
 	if (!$container) return 0;
 	let $result = $container.querySelector(".GRAPH_FIND_RESULT");
@@ -63662,6 +63833,11 @@ function create_gclass$3(gclass_name) {
 			"EV_TRANSPORT_STATE",
 			ac_transport_state$1,
 			null
+		],
+		[
+			"EV_LANGUAGE_CHANGED",
+			ac_language_changed$2,
+			null
 		]
 	]]];
 	const event_types = [
@@ -63703,6 +63879,7 @@ function create_gclass$3(gclass_name) {
 		["EV_RECORD_WRITTEN", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_SHOW", 0],
 		["EV_HIDE", 0],
+		["EV_LANGUAGE_CHANGED", 0],
 		["EV_TRANSPORT_STATE", 0]
 	];
 	__gclass__$3 = gclass_create(gclass_name, event_types, states, gmt$3, 0, attrs_table$3, PRIVATE_DATA$3, 0, 0, 0, 0);