@yuneta/gobj-ui 7.23.73 → 7.23.75

package/dist/gobj-ui.cjs.js

@@ -27373,7 +27373,7 @@ function fold_reveal(model, state, node_key) {
 *      Two layouts made for a treedb, and nothing else.
 *
 *      What a treedb graph IS, once it is folded (treedb_fold_model.js):
-*      a forest read left to right. A main topic is a tree (places:
+*      a forest read top to bottom. A main topic is a tree (places:
 *      country, region, site, hall), the other topics hang from its
 *      nodes through hooks (devices, users, controllers), a record may
 *      hang from two parents (a device from its place AND its
@@ -27394,8 +27394,8 @@ function fold_reveal(model, state, node_key) {
 *      - the force family scatters a tree, which is the pile with
 *        physics.
 *
-*      So: a tidy tree (`tree`) and an outline (`outline`), both fed by
-*      the SAME spanning tree, chosen deterministically:
+*      So: a tidy tree (`tree`) and a radial tree (`radial`), both fed
+*      by the SAME spanning tree, chosen deterministically:
 *
 *      - roots are the nodes with no incoming edge, in node order;
 *      - a node belongs to the FIRST parent that reaches it in a
@@ -27407,16 +27407,21 @@ function fold_reveal(model, state, node_key) {
 *        and then by node order (record order, the pages' order);
 *      - a node nothing reaches (a cycle) is a root too.
 *
-*      `tree`: the classic tidy tree, left to right. Each depth is a
-*      column as wide as its widest card; a node is centred on the
-*      block of its children; siblings stack with `nodesep` between
-*      them. O(n), and opening a hook moves NOTHING that is not below
-*      or beside it -- the cards keep their order, the eye keeps its
-*      place.
-*
-*      `outline`: one node per row, indented by depth -- what a JSON
-*      viewer draws, and what a treedb is when read as one. Tall, but
-*      nothing is ever beside anything: the reader scrolls a list.
+*      `tree`: the classic tidy tree, top to bottom. Each depth is a
+*      row as tall as its tallest card; a node is centred over the
+*      block of its children; siblings sit side by side with `nodesep`
+*      between them. O(n), and opening a hook moves NOTHING that is
+*      not below or beside it -- the cards keep their order, the eye
+*      keeps its place. It reads DOWN because that is the direction a
+*      tree with many children has room in: a hall with a hundred
+*      devices is a wide row, not a tall column beside a card. (The
+*      left-to-right reading is `direction: "LR"`, kept for a host
+*      that wants it; `dagre` reads that way in the graph.)
+*
+*      `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`).
 *
 *      Pure: takes plain nodes and edges, returns positions. The G6
 *      classes in c_g6_nodes_tree.js are two thin adapters over it.
@@ -27426,8 +27431,8 @@ function fold_reveal(model, state, node_key) {
 ***********************************************************************/
 var DEFAULTS = {
 	nodesep: 18,
-	ranksep: 110,
-	indent: 48
+	ranksep: 90,
+	direction: "TB"
 };
 /************************************************************
 *  The spanning tree of a graph, deterministic.
@@ -27514,13 +27519,33 @@ function walk_order(t) {
 	return order;
 }
 /************************************************************
-*  The tidy tree, left to right.
+*  The tidy tree.
 *
 *  Returns Map<id, {x, y}> with the CENTRE of each node, the way G6
 *  positions a node.
+*
+*  The algorithm is written ONCE, reading left to right (depths are
+*  columns, siblings stack down). Top to bottom -- the default -- is
+*  the same tree with the axes swapped: every card is fed in
+*  transposed (its height as its width), and every position comes
+*  back transposed. That is the whole difference, and it is the
+*  reason the code is not duplicated for a second direction.
 ************************************************************/
 function layout_tree(nodes, edges, opts) {
 	let o = Object.assign({}, DEFAULTS, opts || {});
+	if (o.direction === "LR") return tidy_tree_lr(nodes, edges, o);
+	let lr = tidy_tree_lr(nodes.map((n) => Object.assign({}, n, {
+		w: n.h,
+		h: n.w
+	})), edges, o);
+	let pos = /* @__PURE__ */ new Map();
+	for (let [id, p] of lr) pos.set(id, {
+		x: p.y,
+		y: p.x
+	});
+	return pos;
+}
+function tidy_tree_lr(nodes, edges, o) {
 	let t = spanning_tree(nodes, edges);
 	let pos = /* @__PURE__ */ new Map();
 	let col_w = [];
@@ -27686,37 +27711,6 @@ function layout_radial(nodes, edges, opts) {
 	}
 	return pos;
 }
-/************************************************************
-*  The outline: one node per row, indented by depth, in the
-*  pre-order of the spanning tree. Rows are left-aligned on
-*  their indent, so a column of chips reads as a list.
-************************************************************/
-function layout_outline(nodes, edges, opts) {
-	let o = Object.assign({}, DEFAULTS, opts || {});
-	let t = spanning_tree(nodes, edges);
-	let pos = /* @__PURE__ */ new Map();
-	let y = 0;
-	let visit = (root_id) => {
-		let stack = [root_id];
-		while (stack.length) {
-			let id = stack.pop();
-			let n = t.by_id.get(id);
-			let d = t.depth.get(id);
-			pos.set(id, {
-				x: d * o.indent + n.w / 2,
-				y: y + n.h / 2
-			});
-			y += n.h + o.nodesep;
-			let kids = t.children.get(id) || [];
-			for (let i = kids.length - 1; i >= 0; i--) stack.push(kids[i]);
-		}
-	};
-	for (let root of t.roots) {
-		visit(root);
-		y += o.nodesep;
-	}
-	return pos;
-}
 //#endregion
 //#region node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -54533,6 +54527,14 @@ var GCLASS_NAME$4 = "C_G6_NODES_TREE";
 var HIGHLIGHT_COLOR = "#f0a020";
 var HIGHLIGHT_HALO = "rgba(240,160,32,0.35)";
 var SELECT_RING = "rgba(59,130,246,0.95)";
+var PORT_R_ENTITY = 10;
+var PORT_R_CHILD = 5;
+var PORT_LINE_WIDTH = 2;
+var COMPACT_SIZE = {
+	hierarchical: 32,
+	extended: 28,
+	child: 22
+};
 /***************************************************************
 *  Internal layout and operation mode definitions
 ***************************************************************/
@@ -54540,13 +54542,9 @@ var _layouts = {
 	"manual": { type: "manual" },
 	"treedb-tree": {
 		type: "treedb-tree",
+		direction: "TB",
 		nodesep: 18,
-		ranksep: 110
-	},
-	"treedb-outline": {
-		type: "treedb-outline",
-		nodesep: 12,
-		indent: 48
+		ranksep: 90
 	},
 	"dagre": {
 		type: "dagre",
@@ -54617,6 +54615,8 @@ var attrs_table$4 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_LIST, "hidden_topics", 0, "[]", "Topics left out of the tree: no card, no pill counts them, no edge reaches them"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "main_topic", 0, "", "The topic the tree hangs from; empty = deduced (the one whose hooks reach the most others). Its parentless records are the roots; a parentless record of a topic linked to it is LOOSE and shown only on request"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_LIST, "loose_topics", 0, "[]", "Topics whose loose records (no parent, in a topic the schema hangs from the main one) are shown as roots"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "node_mode", 0, "expanded", "How a record is drawn: `expanded` = the card with its ports (the only shape a link can be edited on); `compact` = a rounded square of the topic's colour, no ports, no text -- the topology alone. One node can be toggled against it (EV_TOGGLE_NODE_MODE)"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "node_labels", 0, true, "A compact node says its name under the square. Off, it is a coloured square 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_STRING, "wide", 0, "40px", "Height of header"),
@@ -54700,6 +54700,7 @@ var PRIVATE_DATA$4 = {
 	_fold_state: null,
 	_fold_listener: null,
 	_pill_sig: null,
+	_open_nodes: null,
 	_fold_busy: false
 };
 var __gclass__$4 = null;
@@ -54845,7 +54846,6 @@ function register_layouts(gobj) {
 		_g6_extensions_registered = true;
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "manual", ManualLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-tree", TreedbTreeLayout);
-		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-outline", TreedbOutlineLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-radial", TreedbRadialLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.NODE, "light", LightNode);
 	}
@@ -54928,6 +54928,9 @@ function configure_events(gobj) {
 	graph.on(_antv_g6.NodeEvent.CONTEXT_MENU, (evt) => {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_CONTEXT_MENU", { evt }, gobj);
 	});
+	graph.on(_antv_g6.NodeEvent.DBLCLICK, (evt) => {
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_DBLCLICK", { evt }, gobj);
+	});
 	graph.on(_antv_g6.EdgeEvent.CLICK, (evt) => {
 		if (consume_long_press_click(graph)) return;
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_EDGE_CLICK", { evt }, gobj);
@@ -55352,7 +55355,7 @@ function configure_behaviour(gobj) {
 		case "writing":
 		case "reading":
 			priv.edit_mode = false;
-			behaviors = ["drag-canvas", "zoom-canvas"];
+			behaviors = ["drag-canvas", ...camera_behaviors()];
 			break;
 		case "edition":
 			priv.edit_mode = true;
@@ -55366,7 +55369,7 @@ function configure_behaviour(gobj) {
 						return true;
 					}
 				},
-				"zoom-canvas",
+				...camera_behaviors(),
 				"drag-element",
 				{
 					type: BRUSH_SELECT_OWNED,
@@ -55384,7 +55387,7 @@ function configure_behaviour(gobj) {
 			break;
 		case "operation":
 			priv.edit_mode = false;
-			behaviors = ["drag-canvas", "zoom-canvas"];
+			behaviors = ["drag-canvas", ...camera_behaviors()];
 			break;
 		default: (0, _yuneta_gobj_js.log_error)(`operation mode unknown: ${operation_mode}`);
 	}
@@ -55456,13 +55459,33 @@ function build_ports(gobj, desc) {
 *  Which way the graph reads. `dagre` is the left-to-right
 *  layout; everything else keeps the top-down reading, `manual`
 *  included, because the saved arrangements were made with the
-*  ports on the top and bottom edges.
-************************************************************/
-var LR_LAYOUTS = [
-	"dagre",
-	"treedb-tree",
-	"treedb-outline"
-];
+*  ports on the top and bottom edges. The treedb tree reads down
+*  too, since 7.23.75: read right it was dagre's twin.
+************************************************************/
+var LR_LAYOUTS = ["dagre"];
+/************************************************************
+*  The camera behaviors every operation mode shares.
+*
+*  The wheel SCROLLS, as it does on a map and on every page: a
+*  graph of many nodes is taller than the screen, and a wheel
+*  that zoomed instead made it a thing to be looked at from afar
+*  or read through a keyhole -- never scrolled. Zoom is Ctrl +
+*  wheel (which is also what a trackpad pinch arrives as), the
+*  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.
+************************************************************/
+function camera_behaviors() {
+	return [{
+		type: "scroll-canvas",
+		key: "scroll-canvas",
+		enable: (event) => !(event && (event.ctrlKey || event.metaKey))
+	}, {
+		type: "zoom-canvas",
+		key: "zoom-canvas",
+		trigger: ["Control"]
+	}];
+}
 function layout_direction(gobj) {
 	return (0, _yuneta_gobj_js.str_in_list)(LR_LAYOUTS, gobj.priv.layout) ? "LR" : "TB";
 }
@@ -55530,83 +55553,101 @@ function apply_layout_direction(gobj) {
 *  Create a topic node in the G6 graph
 ************************************************************/
 function create_topic_node(gobj, desc, record) {
-	let priv = gobj.priv;
-	const graph = priv.graph;
+	const graph = gobj.priv.graph;
 	let node_name = build_node_name(gobj, desc.topic_name, record.id);
 	let xy = get_default_ne_xy(gobj);
 	let geometry = get_node_graph_props(gobj, desc.topic_name, record.id, record);
 	let x = (0, _yuneta_gobj_js.kw_get_int)(gobj, geometry, "x", xy, _yuneta_gobj_js.kw_flag_t.KW_CREATE);
 	let y = (0, _yuneta_gobj_js.kw_get_int)(gobj, geometry, "y", xy, _yuneta_gobj_js.kw_flag_t.KW_CREATE);
-	let ports = build_ports(gobj, desc);
-	let node_graph_type = null;
+	let shape = node_shape_of(gobj, node_name, desc, record, geometry, pills_html_of_key(gobj, fold_node_key(desc.topic_name, String(record.id))));
+	let node_def = {
+		id: node_name,
+		type: shape.type,
+		style: Object.assign({
+			x,
+			y
+		}, shape.style),
+		data: {
+			topic_name: desc.topic_name,
+			desc,
+			record,
+			graph_props: geometry,
+			port_keys: build_ports(gobj, desc).map((p) => p.key)
+		}
+	};
+	graph.addNodeData([node_def]);
+}
+/************************************************************
+*  The shape of a record node: OPEN (the card, with its ports)
+*  or CLOSED (a coloured square), by `node_mode` and the nodes
+*  toggled against it.
+*
+*  Both answer {type, style} WITHOUT x/y, which belong to the node
+*  and not to its shape, and a node moves between the two on the
+*  fly: G6 rebuilds the element when `type` changes, and the
+*  style is MERGED, which is why each shape also writes the keys
+*  the other one would leave behind (`labelText`, `ports`).
+************************************************************/
+function node_shape_of(gobj, node_id, desc, record, geometry, pills_html) {
+	if (node_is_compact(gobj, node_id)) return compact_shape_of(gobj, desc, record, {});
+	return card_shape_of(gobj, desc, record, geometry, pills_html);
+}
+function node_is_compact(gobj, node_id) {
+	let priv = gobj.priv;
+	if (!priv._open_nodes) priv._open_nodes = /* @__PURE__ */ new Set();
+	let compact = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "node_mode") === "compact";
+	return priv._open_nodes.has(node_id) ? !compact : compact;
+}
+/************************************************************
+*  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
+*  live and rebuilds the html.
+************************************************************/
+function card_shape_of(gobj, desc, record, geometry, pills_html) {
+	let priv = gobj.priv;
 	let node_treedb_type = desc.node_treedb_type;
+	let label = node_label(desc, record);
+	let ports = build_ports(gobj, desc);
 	let style = {
-		x,
-		y,
 		fill: desc.color,
 		stroke: getStrokeColor(desc.color),
-		lineWidth: 1
+		lineWidth: 1,
+		lineDash: [],
+		halo: false,
+		labelText: ""
 	};
-	let pills_html = pills_html_of_key(gobj, fold_node_key(desc.topic_name, String(record.id)));
 	let size = card_size_for(node_treedb_type, !!pills_html);
-	if (node_treedb_type === "child") {
-		node_graph_type = "html";
-		style.size = size;
-		style.dx = -size[0] / 2;
-		style.dy = -size[1] / 2;
-		style.innerHTML = build_chip_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), record.id);
-	} else if (node_treedb_type === "extended") {
-		node_graph_type = "html";
-		style.size = size;
-		style.dx = -size[0] / 2;
-		style.dy = -size[1] / 2;
-		style.innerHTML = build_node_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), desc.topic_name, true, record.id, false, false, false, pills_html);
-	} else {
-		node_graph_type = "html";
-		style.size = size;
-		style.dx = -size[0] / 2;
-		style.dy = -size[1] / 2;
-		style.innerHTML = build_node_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), desc.topic_name, false, record.id, false, false, false, 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);
 	let topic_props = priv._graph_properties[desc.topic_name];
 	let topic_defaults = (0, _yuneta_gobj_js.is_object)(topic_props) && (0, _yuneta_gobj_js.is_object)(topic_props.defaults) ? topic_props.defaults : null;
 	if (topic_defaults) {
 		let def_size = topic_defaults.size;
 		if (!geometry.size && Array.isArray(def_size) && def_size.length > 0) {
 			style.size = [...def_size];
-			if (node_graph_type === "html") {
-				style.dx = -def_size[0] / 2;
-				style.dy = -(def_size.length > 1 ? def_size[1] : def_size[0]) / 2;
-			}
+			style.dx = -def_size[0] / 2;
+			style.dy = -(def_size.length > 1 ? def_size[1] : def_size[0]) / 2;
 		}
 		if (!geometry.portR && topic_defaults.portR > 0) style.portR = topic_defaults.portR;
 	}
 	let saved_size = geometry.size;
 	if (Array.isArray(saved_size) && saved_size.length > 0) {
 		style.size = saved_size;
-		if (node_graph_type === "html") {
-			style.dx = -saved_size[0] / 2;
-			style.dy = -(saved_size.length > 1 ? saved_size[1] : saved_size[0]) / 2;
-		}
+		style.dx = -saved_size[0] / 2;
+		style.dy = -(saved_size.length > 1 ? saved_size[1] : saved_size[0]) / 2;
 	}
 	if (geometry.portR > 0) style.portR = geometry.portR;
-	let node_def = {
-		id: node_name,
-		type: node_graph_type,
-		style,
-		data: {
-			topic_name: desc.topic_name,
-			desc,
-			record,
-			graph_props: geometry
-		}
-	};
 	if ((0, _yuneta_gobj_js.json_size)(ports)) {
 		(0, _yuneta_gobj_js.json_object_update_missing)(style, {
 			port: true,
 			ports,
-			portR: node_treedb_type === "child" ? 2 : 6,
-			portLineWidth: 1
+			portR: node_treedb_type === "child" ? PORT_R_CHILD : PORT_R_ENTITY,
+			portLineWidth: PORT_LINE_WIDTH
 		});
 		let port_sizes = geometry.port_sizes;
 		let default_port_sizes = topic_defaults ? topic_defaults.port_sizes : null;
@@ -55616,8 +55657,117 @@ function create_topic_node(gobj, desc, record) {
 			if (r == null && (0, _yuneta_gobj_js.is_object)(default_port_sizes)) r = default_port_sizes[key];
 			if (r != null) style.ports[i].r = r;
 		}
+	} else {
+		style.port = false;
+		style.ports = [];
+	}
+	return {
+		type: "html",
+		style
+	};
+}
+/************************************************************
+*  The SQUARE: a G6 `rect` of the topic's colour, no ports, the
+*  name as a label under it when `node_labels` says so. A native
+*  shape and not html on purpose: G6's own stroke and halo paint
+*  on it, so the focus, the selection and the anchor are three
+*  keys of the style instead of a rebuilt innerHTML.
+*
+*      flags   {highlight, selected, anchored}
+************************************************************/
+function compact_shape_of(gobj, desc, record, flags) {
+	let dark = gobj.priv.theme === "dark";
+	let f = flags || {};
+	let tier = desc.node_treedb_type;
+	let side = COMPACT_SIZE[tier] || COMPACT_SIZE.hierarchical;
+	let labels = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels");
+	let stroke = getStrokeColor(desc.color);
+	let line_width = 1.5;
+	if (f.selected) {
+		stroke = SELECT_RING;
+		line_width = 3;
+	}
+	if (f.highlight) {
+		stroke = HIGHLIGHT_COLOR;
+		line_width = 3;
+	}
+	let dash = [];
+	if (tier === "extended") dash = [4, 3];
+	if (f.anchored) {
+		dash = [2, 2];
+		line_width = Math.max(line_width, 2.5);
+	}
+	return {
+		type: "rect",
+		style: {
+			size: [side, side],
+			radius: Math.round(side / 5),
+			fill: desc.color,
+			stroke,
+			lineWidth: line_width,
+			lineDash: dash,
+			halo: !!f.highlight,
+			haloStroke: HIGHLIGHT_HALO,
+			haloLineWidth: 8,
+			port: false,
+			ports: [],
+			labelText: labels ? node_label(desc, record) : "",
+			labelPlacement: "bottom",
+			labelFontSize: 11,
+			labelFill: dark ? "#e6e9ef" : "#2e333d",
+			labelMaxWidth: 150,
+			labelWordWrap: true,
+			labelMaxLines: 1,
+			labelTextOverflow: "ellipsis",
+			labelBackground: true,
+			labelBackgroundFill: dark ? "#1b2230" : "#ffffff",
+			labelBackgroundOpacity: .85,
+			labelBackgroundRadius: 3,
+			labelPadding: [1, 3]
+		}
+	};
+}
+/************************************************************
+*  Give these record nodes the shape their mode says, then
+*  repaint them with the flags they carry. A `+N` chip is not a
+*  record and keeps its own shape.
+************************************************************/
+function reshape_nodes(gobj, ids) {
+	let graph = gobj.priv.graph;
+	if (!graph) return;
+	let updates = [];
+	let touched = /* @__PURE__ */ new Set();
+	for (let id of ids) {
+		let nd;
+		try {
+			nd = graph.getNodeData(id);
+		} catch (e) {
+			continue;
+		}
+		if (!nd || !nd.data || !nd.data.desc || is_more_node(nd)) continue;
+		let geometry = nd.data.graph_props || {};
+		let shape = node_shape_of(gobj, id, nd.data.desc, nd.data.record || {}, geometry, pills_html_of(gobj, nd));
+		updates.push({
+			id,
+			type: shape.type,
+			style: shape.style
+		});
+		touched.add(id);
+	}
+	if (!updates.length) return;
+	try {
+		graph.updateNodeData(updates);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot reshape the nodes: ${e}`);
+		return;
 	}
-	if (node_graph_type) graph.addNodeData([node_def]);
+	repaint_cards(gobj, touched);
+}
+function all_record_node_ids(gobj) {
+	let graph = gobj.priv.graph;
+	let ids = [];
+	for (let nd of graph && graph.getNodeData() || []) if (nd && nd.data && nd.data.desc && !is_more_node(nd)) ids.push(nd.id);
+	return ids;
 }
 /************************************************************
 *  Update topic node data
@@ -56464,7 +56614,7 @@ var ManualLayout = class extends _antv_g6.BaseLayout {
 	}
 };
 /************************************************************
-*  Custom G6 layouts: TreedbTreeLayout / TreedbOutlineLayout.
+*  Custom G6 layouts: TreedbTreeLayout / TreedbRadialLayout.
 *
 *  Thin adapters over treedb_layout.js: the nodes with their sizes,
 *  the edges with the RANK of the hook they leave by (the position
@@ -56482,7 +56632,8 @@ function treedb_layout_input(data) {
 			let w = (0, _yuneta_gobj_js.is_array)(size) ? size[0] : size;
 			let h = (0, _yuneta_gobj_js.is_array)(size) ? size.length > 1 ? size[1] : size[0] : size;
 			let ports = node.style && (0, _yuneta_gobj_js.is_array)(node.style.ports) ? node.style.ports : [];
-			ports_of.set(node.id, ports.map((p) => p.key));
+			let keys = node.data && (0, _yuneta_gobj_js.is_array)(node.data.port_keys) ? node.data.port_keys : ports.map((p) => p.key);
+			ports_of.set(node.id, keys);
 			return {
 				id: node.id,
 				w,
@@ -56518,12 +56669,6 @@ var TreedbTreeLayout = class extends _antv_g6.BaseLayout {
 		return treedb_layout_output(layout_tree(input.nodes, input.edges, options));
 	}
 };
-var TreedbOutlineLayout = class extends _antv_g6.BaseLayout {
-	async execute(data, options) {
-		let input = treedb_layout_input(data);
-		return treedb_layout_output(layout_outline(input.nodes, input.edges, options));
-	}
-};
 var TreedbRadialLayout = class extends _antv_g6.BaseLayout {
 	async execute(data, options) {
 		let input = treedb_layout_input(data);
@@ -57215,7 +57360,7 @@ function get_port_radius(gobj, node_id, port_key) {
 		if (ports[i].r != null) return ports[i].r;
 		break;
 	}
-	return style.portR || 6;
+	return style.portR || PORT_R_ENTITY;
 }
 /************************************************************
 *  How much wider than the port itself its hit area is,
@@ -57247,7 +57392,7 @@ function detect_port_click(gobj, node_id, canvasX, canvasY) {
 	const style = graph.getNodeData(node_id).style || {};
 	const { w, h } = extract_size(style);
 	const ports = style.ports || [];
-	const defaultR = style.portR || 6;
+	const defaultR = style.portR || PORT_R_ENTITY;
 	let best_key = null;
 	let best_dist = Infinity;
 	let slop = port_hit_slop_world(graph);
@@ -57404,7 +57549,7 @@ function enter_linking_mode(gobj) {
 			p.stroke = "#52c41a";
 			p.lineWidth = 3;
 			if (p.r != null) p.r = p.r + 4;
-			else p.r = (style.portR || 6) + 4;
+			else p.r = (style.portR || PORT_R_ENTITY) + 4;
 		}
 		graph.updateNodeData([{
 			id: vh.node_id,
@@ -57556,7 +57701,7 @@ function find_hook_at_point(gobj, canvasX, canvasY) {
 			let pl = p.placement || [.5, .5];
 			let px = pos[0] + (pl[0] - .5) * w;
 			let py = pos[1] + (pl[1] - .5) * h;
-			let r = p.r != null ? p.r : style.portR || 6;
+			let r = p.r != null ? p.r : style.portR || PORT_R_ENTITY;
 			let dx = canvasX - px;
 			let dy = canvasY - py;
 			if (Math.sqrt(dx * dx + dy * dy) <= r + 6) return {
@@ -58314,7 +58459,19 @@ function repaint_cards(gobj, ids) {
 		} catch (e) {
 			continue;
 		}
-		let html = node_innerHTML_of(nd, priv.theme, focus.has(id), selected.has(id), priv.anchor_state === "on" && id === priv.anchor_id, pills_html_of(gobj, nd));
+		let anchored = priv.anchor_state === "on" && id === priv.anchor_id;
+		if (nd && nd.data && nd.data.desc && node_is_compact(gobj, id)) {
+			updates.push({
+				id,
+				style: compact_shape_of(gobj, nd.data.desc, nd.data.record || {}, {
+					highlight: focus.has(id),
+					selected: selected.has(id),
+					anchored
+				}).style
+			});
+			continue;
+		}
+		let html = node_innerHTML_of(nd, priv.theme, focus.has(id), selected.has(id), anchored, pills_html_of(gobj, nd));
 		if (html !== null) updates.push({
 			id,
 			style: { innerHTML: html }
@@ -58351,7 +58508,19 @@ function refresh_html_nodes_theme(gobj, theme) {
 	for (let i = 0; i < nodes.length; i++) {
 		let id = nodes[i].id;
 		let nd = graph.getNodeData(id);
-		let html = node_innerHTML_of(nd, theme, highlighted.has(id), selected.has(id), priv.anchor_state === "on" && id === priv.anchor_id, pills_html_of(gobj, nd));
+		let anchored = priv.anchor_state === "on" && id === priv.anchor_id;
+		if (nd && nd.data && nd.data.desc && node_is_compact(gobj, id)) {
+			updates.push({
+				id,
+				style: compact_shape_of(gobj, nd.data.desc, nd.data.record || {}, {
+					highlight: highlighted.has(id),
+					selected: selected.has(id),
+					anchored
+				}).style
+			});
+			continue;
+		}
+		let html = node_innerHTML_of(nd, theme, highlighted.has(id), selected.has(id), anchored, pills_html_of(gobj, nd));
 		if (html === null) html = more_innerHTML_of(gobj, nd, theme);
 		if (html !== null) updates.push({
 			id,
@@ -58971,8 +59140,10 @@ function ctx_item(icon_id, label, value) {
 ************************************************************/
 function build_node_context_menu(gobj, node_id) {
 	let items = [];
-	if (gobj.priv.edit_mode) {
-		inject_svg_icons();
+	inject_svg_icons();
+	if (node_is_compact(gobj, node_id)) items.push(ctx_item("g6-icon-fullscreen", (0, i18next.t)("open node"), "toggle_node_mode"));
+	else items.push(ctx_item("g6-icon-fullscreen-exit", (0, i18next.t)("close node"), "toggle_node_mode"));
+	if (gobj.priv.edit_mode && !node_is_compact(gobj, node_id)) {
 		items.push(ctx_item("g6-icon-resize", (0, i18next.t)("resize all"), "resize_all_nodes"));
 		items.push(ctx_item("g6-icon-resize", (0, i18next.t)("resize topic nodes"), "resize_topic_nodes"));
 	}
@@ -59000,8 +59171,11 @@ function build_edge_context_menu(gobj) {
 *  Handle context menu click: dispatch by value.
 ************************************************************/
 function handle_context_menu_click(gobj, value) {
-	gobj.priv;
+	let priv = gobj.priv;
 	switch (value) {
+		case "toggle_node_mode":
+			if (priv._context_node_id) (0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_MODE", { id: priv._context_node_id }, gobj);
+			break;
 		case "resize_all_nodes":
 			copy_size_to_nodes(gobj, false);
 			break;
@@ -59532,7 +59706,7 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 			let nd = graph.getNodeData(id);
 			let desc = nd && nd.data && nd.data.desc;
 			let geometry = nd && nd.data && nd.data.graph_props || {};
-			if (desc && !(0, _yuneta_gobj_js.is_array)(geometry.size)) {
+			if (desc && !(0, _yuneta_gobj_js.is_array)(geometry.size) && !node_is_compact(gobj, id)) {
 				let size = card_size_for(desc.node_treedb_type, !!sig);
 				resize.push({
 					id,
@@ -59617,6 +59791,7 @@ function ac_clear_data(gobj, event, kw, src) {
 	priv._fold_model = null;
 	priv._fold_state = null;
 	priv._pill_sig = null;
+	priv._open_nodes = null;
 	graph_remove_plugin(gobj, "history");
 	update_history_buttons(gobj);
 	graph_clear(gobj);
@@ -60115,6 +60290,79 @@ function ac_set_loose_topics(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The shape of every record: open cards or closed squares.
+*  A change of mode forgets the nodes toggled against the old
+*  one -- they were exceptions to a rule that no longer holds --
+*  and lays the graph out again, because a square and a card
+*  do not occupy the same room.
+************************************************************/
+function ac_set_node_mode(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let mode = kw && kw.node_mode === "compact" ? "compact" : "expanded";
+	(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;
+	reshape_nodes(gobj, all_record_node_ids(gobj));
+	reconcile_fold(gobj, {
+		relayout: true,
+		fit: true
+	});
+	return 0;
+}
+/************************************************************
+*  The name under a closed square, on or off. Only the closed
+*  nodes change, and nothing moves: the label hangs outside the
+*  square and the layout measures the square.
+************************************************************/
+function ac_set_node_labels(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "node_labels", !!(kw && kw.node_labels));
+	if (!priv.graph) return 0;
+	reshape_nodes(gobj, all_record_node_ids(gobj).filter((id) => node_is_compact(gobj, id)));
+	return 0;
+}
+/************************************************************
+*  ONE node opened or closed against the mode (a double click,
+*  or the context menu). It holds still on screen while the
+*  rest of the graph makes room, as a fold does.
+************************************************************/
+function ac_toggle_node_mode$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let node_id = kw && kw.id || "";
+	if (!priv.graph || !node_id) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: toggle node mode without a node`);
+		return -1;
+	}
+	if (!priv._open_nodes) priv._open_nodes = /* @__PURE__ */ new Set();
+	if (priv._open_nodes.has(node_id)) priv._open_nodes.delete(node_id);
+	else priv._open_nodes.add(node_id);
+	let vp = yui_graph_viewport_of(priv.graph, node_id);
+	reshape_nodes(gobj, [node_id]);
+	if (priv._fold_model) reconcile_fold(gobj, {
+		relayout: true,
+		keep: node_id,
+		keep_vp: vp
+	});
+	return 0;
+}
+/************************************************************
+*  A double click on a node: open it if closed, close it if open.
+*  A `+N` chip is not a record and has no shape to toggle.
+************************************************************/
+function ac_node_dblclick(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let node_id = kw && kw.evt && kw.evt.target ? kw.evt.target.id : "";
+	let nd = null;
+	try {
+		nd = priv.graph.getNodeData(node_id);
+	} catch (e) {
+		nd = null;
+	}
+	if (!nd || !nd.data || !nd.data.desc || is_more_node(nd)) return 0;
+	(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_MODE", { id: node_id }, gobj);
+	return 0;
+}
+/************************************************************
 *  Tell whoever asked how many nodes the term matched. The count is
 *  the answer to the question the box asks; without it "nothing moved"
 *  and "nothing matched" look the same.
@@ -60604,6 +60852,26 @@ function create_gclass$4(gclass_name) {
 			ac_set_loose_topics,
 			null
 		],
+		[
+			"EV_SET_NODE_MODE",
+			ac_set_node_mode,
+			null
+		],
+		[
+			"EV_SET_NODE_LABELS",
+			ac_set_node_labels,
+			null
+		],
+		[
+			"EV_TOGGLE_NODE_MODE",
+			ac_toggle_node_mode$1,
+			null
+		],
+		[
+			"EV_NODE_DBLCLICK",
+			ac_node_dblclick,
+			null
+		],
 		[
 			"EV_CENTER",
 			ac_center,
@@ -60708,6 +60976,10 @@ function create_gclass$4(gclass_name) {
 		["EV_SET_HIDDEN_TOPICS", 0],
 		["EV_SET_MAIN_TOPIC", 0],
 		["EV_SET_LOOSE_TOPICS", 0],
+		["EV_SET_NODE_MODE", 0],
+		["EV_SET_NODE_LABELS", 0],
+		["EV_TOGGLE_NODE_MODE", 0],
+		["EV_NODE_DBLCLICK", 0],
 		["EV_LEGEND_STATE", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_CENTER", 0],
 		["EV_FULLSCREEN", 0],
@@ -60773,6 +61045,8 @@ var attrs_table$3 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_LIST, "hidden_topics", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "[]", "Topics hidden from the graph (legend). User preference, per treedb"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "main_topic", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "", "The topic the tree hangs from; empty = deduced by the graph. User preference, per treedb"),
 	(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 ports, `compact` = coloured squares, 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 compact node says its name under its square. User preference"),
 	(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"),
@@ -60850,7 +61124,9 @@ function mt_create$3(gobj) {
 		fold_page_size: (0, _yuneta_gobj_js.gobj_read_integer_attr)(gobj, "fold_page_size"),
 		hidden_topics: (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "hidden_topics") || [],
 		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") || []
+		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")
 	}, gobj);
 	populate_nodes_tree_options(gobj);
 	if (priv.with_treedb_tables) {}
@@ -60901,6 +61177,7 @@ function build_ui$3(gobj) {
 	let priv = gobj.priv;
 	let padding = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "padding");
 	let $toolbar = make_toolbar(gobj);
+	refresh_node_shape_buttons(gobj, $toolbar);
 	let $back = make_back_to_topics(gobj);
 	let $container = (0, _yuneta_gobj_js.createElement2)([
 		"div",
@@ -61042,6 +61319,57 @@ function option_label(name) {
 /************************************************************
 *
 ************************************************************/
+/************************************************************
+*  The two toggles of the nodes' shape.
+*
+*  Closed nodes: every record a rounded square of its topic's
+*  colour, no ports, no text -- the topology of a graph of many
+*  nodes, which the cards hide behind their own size. Labels:
+*  the name under each square, when the squares alone do not say
+*  enough. Both persist, both are forwarded to the G6 child, and
+*  one node can be opened against the rule with a double click or
+*  its context menu (the child's business).
+************************************************************/
+function node_shape_items(gobj, wide) {
+	let toggle = (cls, icon, event_name, label_key) => {
+		return [
+			"button",
+			{
+				class: `${cls} button`,
+				type: "button",
+				style: {
+					height: wide,
+					width: "2.5em"
+				},
+				title: (0, i18next.t)(label_key),
+				"data-i18n-title": label_key,
+				"aria-label": (0, i18next.t)(label_key),
+				"data-i18n-aria-label": label_key,
+				"aria-pressed": "false"
+			},
+			["i", {
+				style: "font-size:1.5em; color:inherit;",
+				class: icon
+			}],
+			{ click: (evt) => {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, {}, gobj);
+			} }
+		];
+	};
+	return [toggle("GRAPH_NODE_MODE", "yi-hexagon-nodes", "EV_TOGGLE_NODE_MODE", "closed nodes"), toggle("GRAPH_NODE_LABELS", "yi-font", "EV_TOGGLE_NODE_LABELS", "node labels")];
+}
+function refresh_node_shape_buttons(gobj, $root) {
+	if (!$root) return;
+	let compact = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "node_mode") === "compact";
+	let labels = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels");
+	set_pressed_state($root, ".GRAPH_NODE_MODE", compact);
+	set_pressed_state($root, ".GRAPH_NODE_LABELS", labels);
+	let $mode = $root.querySelector(".GRAPH_NODE_MODE");
+	if ($mode) $mode.setAttribute("aria-pressed", compact ? "true" : "false");
+	let $labels = $root.querySelector(".GRAPH_NODE_LABELS");
+	if ($labels) $labels.setAttribute("aria-pressed", labels ? "true" : "false");
+}
 function make_toolbar(gobj) {
 	let priv = gobj.priv;
 	let modes = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "operation_modes");
@@ -61112,6 +61440,7 @@ function make_toolbar(gobj) {
 			} }
 		],
 		...yui_graph_fold_items(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "wide")),
+		...node_shape_items(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "wide")),
 		[
 			"button",
 			{
@@ -62175,9 +62504,9 @@ function refresh_legend(gobj) {
 			hidden ? `${entry.total}` : `${entry.visible}/${entry.total}`
 		]);
 		let body_attrs = {
-			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " pressed_state" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
+			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;",
+			style: "gap:0; flex:0 0 auto;" + (focused ? " box-shadow: inset 0 0 0 2px var(--bulma-text, #2e333d);" : ""),
 			title: is_main ? (0, i18next.t)("main topic") : hidden ? (0, i18next.t)("show topic") : (0, i18next.t)("hide topic"),
 			"aria-label": topic_name,
 			"aria-pressed": hidden ? "false" : "true"
@@ -62426,6 +62755,29 @@ function ac_collapse_all(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The shape pair of the toolbar: the attr flips, persists,
+*  shows on the button, and reaches the G6 child, which owns
+*  the nodes.
+************************************************************/
+function ac_toggle_node_mode(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let mode = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "node_mode") === "compact" ? "expanded" : "compact";
+	(0, _yuneta_gobj_js.gobj_write_str_attr)(gobj, "node_mode", mode);
+	(0, _yuneta_gobj_js.gobj_save_persistent_attrs)(gobj, "node_mode");
+	refresh_node_shape_buttons(gobj, priv.$container);
+	if (priv.gobj_nodes_tree) (0, _yuneta_gobj_js.gobj_send_event)(priv.gobj_nodes_tree, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
+	return 0;
+}
+function ac_toggle_node_labels(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let labels = !(0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels");
+	(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "node_labels", labels);
+	(0, _yuneta_gobj_js.gobj_save_persistent_attrs)(gobj, "node_labels");
+	refresh_node_shape_buttons(gobj, priv.$container);
+	if (priv.gobj_nodes_tree) (0, _yuneta_gobj_js.gobj_send_event)(priv.gobj_nodes_tree, "EV_SET_NODE_LABELS", { node_labels: labels }, gobj);
+	return 0;
+}
+/************************************************************
 *  How many nodes the term matched, from the graph child. Zero with a
 *  term typed is an ANSWER and is shown; an empty box shows nothing.
 ************************************************************/
@@ -62639,6 +62991,16 @@ function create_gclass$3(gclass_name) {
 			ac_collapse_all,
 			null
 		],
+		[
+			"EV_TOGGLE_NODE_MODE",
+			ac_toggle_node_mode,
+			null
+		],
+		[
+			"EV_TOGGLE_NODE_LABELS",
+			ac_toggle_node_labels,
+			null
+		],
 		[
 			"EV_LAYOUT_AUTOSET",
 			ac_layout_autoset,
@@ -62703,6 +63065,8 @@ function create_gclass$3(gclass_name) {
 		["EV_FIND_NODES", 0],
 		["EV_EXPAND_ALL", 0],
 		["EV_COLLAPSE_ALL", 0],
+		["EV_TOGGLE_NODE_MODE", 0],
+		["EV_TOGGLE_NODE_LABELS", 0],
 		["EV_FIND_RESULT", 0],
 		["EV_LAYOUT_AUTOSET", 0],
 		["EV_LEGEND_TOPIC", 0],