@yuneta/gobj-ui 7.23.81 → 7.23.83

package/dist/gobj-ui.cjs.js

@@ -54530,11 +54530,31 @@ var SELECT_RING = "rgba(59,130,246,0.95)";
 var PORT_R_ENTITY = 14;
 var PORT_R_CHILD = 8;
 var PORT_LINE_WIDTH = 2;
-var COMPACT_SIZE = {
+var NODE_MODES$1 = [
+	"expanded",
+	"compact",
+	"shape"
+];
+var PILL_SIZE = {
+	hierarchical: [200, 30],
+	extended: [180, 28],
+	child: [160, 26]
+};
+var PORT_R_PILL = 6;
+var SHAPE_SIZE = {
 	hierarchical: 32,
 	extended: 28,
 	child: 22
 };
+var NODE_SHAPES = [
+	"square",
+	"circle",
+	"diamond",
+	"triangle",
+	"hexagon",
+	"star"
+];
+var DEFAULT_NODE_SHAPE = "square";
 /***************************************************************
 *  Internal layout and operation mode definitions
 ***************************************************************/
@@ -54615,8 +54635,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_STRING, "node_mode", 0, "expanded", "How a record is drawn: `expanded` = the card with its pills and ports; `compact` = a one-line pill with the name and small ports; `shape` = a figure of the topic's colour (square, circle, diamond... per node or topic, from the node properties), 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 `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_STRING, "wide", 0, "40px", "Height of header"),
@@ -55594,14 +55614,26 @@ function create_topic_node(gobj, desc, record) {
 *  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);
+	switch (node_mode_of(gobj, node_id)) {
+		case "shape": return figure_shape_of(gobj, desc, record, geometry, {});
+		case "compact": return pill_shape_of(gobj, desc, record, geometry);
+		default: return card_shape_of(gobj, desc, record, geometry, pills_html);
+	}
 }
-function node_is_compact(gobj, node_id) {
+function node_mode_of(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;
+	let mode = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "node_mode");
+	if (!mode || !(0, _yuneta_gobj_js.str_in_list)(NODE_MODES$1, mode)) mode = "expanded";
+	if (priv._open_nodes.has(node_id)) return mode === "expanded" ? "compact" : "expanded";
+	return mode;
+}
+function node_is_compact(gobj, node_id) {
+	return node_mode_of(gobj, node_id) !== "expanded";
+}
+function topic_defaults_of(gobj, topic_name) {
+	let topic_props = gobj.priv._graph_properties[topic_name];
+	return (0, _yuneta_gobj_js.is_object)(topic_props) && (0, _yuneta_gobj_js.is_object)(topic_props.defaults) ? topic_props.defaults : null;
 }
 /************************************************************
 *  The CARD: an html node, the tier's size, the ports, the
@@ -55647,55 +55679,107 @@ function card_shape_of(gobj, desc, record, geometry, pills_html) {
 		style.dy = -(saved_size.length > 1 ? saved_size[1] : saved_size[0]) / 2;
 	}
 	if (geometry.portR > 0) style.portR = geometry.portR;
-	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" ? 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;
-		if ((0, _yuneta_gobj_js.is_object)(port_sizes) || (0, _yuneta_gobj_js.is_object)(default_port_sizes)) for (let i = 0; i < style.ports.length; i++) {
-			let key = style.ports[i].key;
-			let r = (0, _yuneta_gobj_js.is_object)(port_sizes) ? port_sizes[key] : null;
-			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;
-		}
-		let port_shapes = geometry.port_shapes;
-		let default_port_shapes = topic_defaults ? topic_defaults.port_shapes : null;
-		let default_shape = topic_defaults ? topic_defaults.port_shape : null;
-		for (let i = 0; i < style.ports.length; i++) {
-			let key = style.ports[i].key;
-			let shape = (0, _yuneta_gobj_js.is_object)(port_shapes) ? port_shapes[key] : null;
-			if (!shape && (0, _yuneta_gobj_js.is_object)(default_port_shapes)) shape = default_port_shapes[key];
-			if (!shape) shape = default_shape;
-			if (shape && (0, _yuneta_gobj_js.str_in_list)(PORT_SHAPES, shape)) style.ports[i].shape = shape;
-		}
-	} else {
+	dress_ports(gobj, style, ports, geometry, topic_defaults, node_treedb_type === "child" ? PORT_R_CHILD : PORT_R_ENTITY, false);
+	return {
+		type: "treedb-card",
+		style
+	};
+}
+/************************************************************
+*  The ports of a card or a pill, dressed: the node-level radius
+*  (saved, topic default, or the tier's), each port's own radius
+*  and shape (saved first, then the topic's per-port defaults, then
+*  the topic's one shape for every port). `fixed_r` -- the pill --
+*  ignores every saved radius: a pill has one size of port.
+************************************************************/
+function dress_ports(gobj, style, ports, geometry, topic_defaults, r_default, fixed_r) {
+	if (!(0, _yuneta_gobj_js.json_size)(ports)) {
 		style.port = false;
 		style.ports = [];
+		return;
 	}
+	(0, _yuneta_gobj_js.json_object_update_missing)(style, {
+		port: true,
+		ports,
+		portR: r_default,
+		portLineWidth: PORT_LINE_WIDTH
+	});
+	if (fixed_r) style.portR = r_default;
+	let port_sizes = fixed_r ? null : geometry.port_sizes;
+	let default_port_sizes = !fixed_r && topic_defaults ? topic_defaults.port_sizes : null;
+	let port_shapes = geometry.port_shapes;
+	let default_port_shapes = topic_defaults ? topic_defaults.port_shapes : null;
+	let default_shape = topic_defaults ? topic_defaults.port_shape : null;
+	for (let i = 0; i < style.ports.length; i++) {
+		let key = style.ports[i].key;
+		let r = (0, _yuneta_gobj_js.is_object)(port_sizes) ? port_sizes[key] : null;
+		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;
+		let shape = (0, _yuneta_gobj_js.is_object)(port_shapes) ? port_shapes[key] : null;
+		if (!shape && (0, _yuneta_gobj_js.is_object)(default_port_shapes)) shape = default_port_shapes[key];
+		if (!shape) shape = default_shape;
+		if (shape && (0, _yuneta_gobj_js.str_in_list)(PORT_SHAPES, shape)) style.ports[i].shape = shape;
+	}
+}
+/************************************************************
+*  The PILL: one line with the name inside, the tint and the
+*  border of the topic, small ports on its edges -- the half-way
+*  house between the card and the figure, and the same one-line
+*  chip a leaf record already is, at the tier's width. No pills:
+*  a hook is opened from the card (expand the node).
+************************************************************/
+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 style = {
+		fill: desc.color,
+		stroke: getStrokeColor(desc.color),
+		lineWidth: 1,
+		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)
+	};
+	dress_ports(gobj, style, ports, geometry, topic_defaults_of(gobj, desc.topic_name), PORT_R_PILL, true);
 	return {
 		type: "treedb-card",
 		style
 	};
 }
+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);
+}
+function node_figure_of(gobj, desc, geometry) {
+	let shape = geometry ? geometry.node_shape : null;
+	if (!shape) {
+		let defaults = topic_defaults_of(gobj, desc.topic_name);
+		shape = defaults ? defaults.node_shape : null;
+	}
+	return shape && (0, _yuneta_gobj_js.str_in_list)(NODE_SHAPES, shape) ? shape : DEFAULT_NODE_SHAPE;
+}
 /************************************************************
-*  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.
+*  The FIGURE: a native G6 node of the topic's colour -- a square,
+*  a circle, a diamond, a triangle, a hexagon, a star -- no ports,
+*  the name as a label under it when `node_labels` says so. Native
+*  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) {
+function figure_shape_of(gobj, desc, record, geometry, 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 side = SHAPE_SIZE[tier] || SHAPE_SIZE.hierarchical;
 	let labels = (0, _yuneta_gobj_js.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;
 	if (f.selected) {
@@ -55712,34 +55796,35 @@ function compact_shape_of(gobj, desc, record, flags) {
 		dash = [2, 2];
 		line_width = Math.max(line_width, 2.5);
 	}
+	let style = {
+		size: [side, side],
+		radius: figure === "square" ? Math.round(side / 5) : 0,
+		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]
+	};
 	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]
-		}
+		type: figure === "square" ? "rect" : figure,
+		style
 	};
 }
 /************************************************************
@@ -58505,6 +58590,14 @@ function show_node_popover(gobj) {
 	let strokeInput = create_form_color_input(popover, currentStroke, preview_node);
 	create_form_label(popover, "line width");
 	let lwInput = create_form_number_input(popover, currentLW, 1, 20, preview_node);
+	create_form_label(popover, "shape");
+	let shapeSelect = create_form_select(popover, NODE_SHAPES.map((shape) => {
+		return {
+			value: shape,
+			label: (0, i18next.t)(shape)
+		};
+	}));
+	shapeSelect.value = nodeData.data && nodeData.data.desc ? node_figure_of(gobj, nodeData.data.desc, nodeData.data.graph_props || {}) : DEFAULT_NODE_SHAPE;
 	create_form_label(popover, "apply to");
 	let scopeSelect = create_form_select(popover, [
 		{
@@ -58544,7 +58637,7 @@ function show_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: () => {
-			apply_node_properties(gobj, node_id, fillInput.value, strokeInput.value, parseInt(lwInput.value) || 1, scopeSelect.value);
+			apply_node_properties(gobj, node_id, fillInput.value, strokeInput.value, parseInt(lwInput.value) || 1, scopeSelect.value, shapeSelect.value);
 		}
 	}]);
 	priv.$container.appendChild(popover);
@@ -58775,10 +58868,11 @@ function repaint_cards(gobj, ids) {
 			continue;
 		}
 		let anchored = priv.anchor_state === "on" && id === priv.anchor_id;
-		if (nd && nd.data && nd.data.desc && node_is_compact(gobj, id)) {
+		let mode = nd && nd.data && nd.data.desc ? node_mode_of(gobj, id) : "expanded";
+		if (mode === "shape") {
 			updates.push({
 				id,
-				style: compact_shape_of(gobj, nd.data.desc, nd.data.record || {}, {
+				style: figure_shape_of(gobj, nd.data.desc, nd.data.record || {}, nd.data.graph_props || {}, {
 					highlight: focus.has(id),
 					selected: selected.has(id),
 					anchored
@@ -58786,7 +58880,7 @@ function repaint_cards(gobj, ids) {
 			});
 			continue;
 		}
-		let html = node_innerHTML_of(nd, priv.theme, focus.has(id), selected.has(id), anchored, pills_html_of(gobj, nd));
+		let html = mode === "compact" ? pill_innerHTML_of(gobj, nd, priv.theme, focus.has(id), selected.has(id), anchored) : 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 }
@@ -58824,10 +58918,11 @@ function refresh_html_nodes_theme(gobj, theme) {
 		let id = nodes[i].id;
 		let nd = graph.getNodeData(id);
 		let anchored = priv.anchor_state === "on" && id === priv.anchor_id;
-		if (nd && nd.data && nd.data.desc && node_is_compact(gobj, id)) {
+		let mode = nd && nd.data && nd.data.desc ? node_mode_of(gobj, id) : "expanded";
+		if (mode === "shape") {
 			updates.push({
 				id,
-				style: compact_shape_of(gobj, nd.data.desc, nd.data.record || {}, {
+				style: figure_shape_of(gobj, nd.data.desc, nd.data.record || {}, nd.data.graph_props || {}, {
 					highlight: highlighted.has(id),
 					selected: selected.has(id),
 					anchored
@@ -58835,7 +58930,7 @@ function refresh_html_nodes_theme(gobj, theme) {
 			});
 			continue;
 		}
-		let html = node_innerHTML_of(nd, theme, highlighted.has(id), selected.has(id), anchored, pills_html_of(gobj, nd));
+		let html = mode === "compact" ? pill_innerHTML_of(gobj, nd, theme, highlighted.has(id), selected.has(id), anchored) : 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,
@@ -59293,7 +59388,7 @@ function hide_unlink_confirm(gobj) {
 *  Apply node properties to one or more nodes.
 *  scope: 'this', 'same_topic', 'all'
 ************************************************************/
-function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope) {
+function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope, shape) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	let nodeData = graph.getNodeData(node_id);
@@ -59301,11 +59396,26 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope) {
 	let source_topic = nodeData.data.desc ? nodeData.data.desc.topic_name : null;
 	let updates = [];
 	const nodes = graph.getData().nodes;
+	let figure = shape && (0, _yuneta_gobj_js.str_in_list)(NODE_SHAPES, shape) ? shape : "";
+	let reshaped = [];
+	if (figure && scope !== "this") {
+		let topics = scope === "same_topic" ? [source_topic] : Object.keys(priv.descs || {});
+		for (let topic_name of topics) {
+			if (!(0, _yuneta_gobj_js.is_object)(priv._graph_properties[topic_name])) priv._graph_properties[topic_name] = {};
+			let defaults = priv._graph_properties[topic_name].defaults || {};
+			defaults.node_shape = figure;
+			priv._graph_properties[topic_name].defaults = defaults;
+		}
+	}
 	for (let i = 0; i < nodes.length; i++) {
 		let nd = graph.getNodeData(nodes[i].id);
 		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;
+		if (figure) {
+			node_props_entry(gobj, nd).node_shape = figure;
+			if (node_mode_of(gobj, nodes[i].id) === "shape") reshaped.push(nodes[i].id);
+		}
 		let updateStyle = {
 			fill,
 			stroke,
@@ -59322,6 +59432,7 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope) {
 	}
 	if (updates.length > 0) {
 		graph.updateNodeData(updates);
+		if (reshaped.length) reshape_nodes(gobj, reshaped);
 		graph.draw().then(() => {
 			mark_graph_dirty(gobj);
 		});
@@ -59329,6 +59440,23 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope) {
 	hide_node_popover(gobj);
 }
 /************************************************************
+*  The node's entry in `_graph_properties` -- the object Save
+*  reads and writes -- created if it has none yet, and the node's
+*  `data.graph_props` pointed at it, so a key written here is
+*  read by the next reshape and survives the next Save.
+************************************************************/
+function node_props_entry(gobj, nd) {
+	let priv = gobj.priv;
+	let topic_name = nd.data.topic_name;
+	let record = nd.data.record || {};
+	if (!(0, _yuneta_gobj_js.is_object)(priv._graph_properties[topic_name])) priv._graph_properties[topic_name] = {};
+	let topic_props = priv._graph_properties[topic_name];
+	if (!(0, _yuneta_gobj_js.is_object)(topic_props.nodes)) topic_props.nodes = {};
+	if (!(0, _yuneta_gobj_js.is_object)(topic_props.nodes[record.id])) topic_props.nodes[record.id] = (0, _yuneta_gobj_js.is_object)(nd.data.graph_props) ? nd.data.graph_props : {};
+	nd.data.graph_props = topic_props.nodes[record.id];
+	return nd.data.graph_props;
+}
+/************************************************************
 *  Apply edge properties to one or more edges.
 *  scope: 'this', 'same_type', 'all'
 ************************************************************/
@@ -59456,8 +59584,8 @@ function ctx_item(icon_id, label, value) {
 function build_node_context_menu(gobj, node_id) {
 	let items = [];
 	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 (node_is_compact(gobj, node_id)) items.push(ctx_item("g6-icon-fullscreen", (0, i18next.t)("expand node"), "toggle_node_mode"));
+	else items.push(ctx_item("g6-icon-fullscreen-exit", (0, i18next.t)("collapse 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"));
@@ -59696,7 +59824,7 @@ var MORE_CHIP_SIZE_COMPACT = [40, 22];
 function more_chip_is_compact(gobj, nd) {
 	let parent_id = nd && nd.data ? nd.data.parent_node : "";
 	if (parent_id) return node_is_compact(gobj, parent_id);
-	return (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "node_mode") === "compact";
+	return (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "node_mode") !== "expanded";
 }
 function more_chip_style(gobj, nd, color, rest) {
 	let compact = more_chip_is_compact(gobj, nd);
@@ -60747,9 +60875,9 @@ function ac_set_loose_topics(gobj, event, kw, src) {
 *  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) {
+function ac_set_node_mode$1(gobj, event, kw, src) {
 	let priv = gobj.priv;
-	let mode = kw && kw.node_mode === "compact" ? "compact" : "expanded";
+	let mode = kw && kw.node_mode && (0, _yuneta_gobj_js.str_in_list)(NODE_MODES$1, kw.node_mode) ? kw.node_mode : "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;
@@ -60762,15 +60890,15 @@ function ac_set_node_mode(gobj, event, kw, src) {
 	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.
+*  The name under a figure, on or off. Only the `shape` nodes
+*  change, and nothing moves: the label hangs outside the figure
+*  and the layout measures the figure.
 ************************************************************/
 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)));
+	reshape_nodes(gobj, all_record_node_ids(gobj).filter((id) => node_mode_of(gobj, id) === "shape"));
 	return 0;
 }
 /************************************************************
@@ -60778,7 +60906,7 @@ function ac_set_node_labels(gobj, event, kw, src) {
 *  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) {
+function ac_toggle_node_mode(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let node_id = kw && kw.id || "";
 	if (!priv.graph || !node_id) {
@@ -61307,7 +61435,7 @@ function create_gclass$4(gclass_name) {
 		],
 		[
 			"EV_SET_NODE_MODE",
-			ac_set_node_mode,
+			ac_set_node_mode$1,
 			null
 		],
 		[
@@ -61317,7 +61445,7 @@ function create_gclass$4(gclass_name) {
 		],
 		[
 			"EV_TOGGLE_NODE_MODE",
-			ac_toggle_node_mode$1,
+			ac_toggle_node_mode,
 			null
 		],
 		[
@@ -61498,8 +61626,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_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_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"),
@@ -61783,44 +61911,96 @@ function option_label(name) {
 *  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"
+	return [[
+		"div",
+		{
+			class: "GRAPH_NODE_MODE buttons has-addons",
+			style: "margin:0 0 0 .5rem; flex:0 0 auto; flex-wrap:nowrap;"
+		},
+		NODE_MODES.map((mode) => {
+			let key = NODE_MODE_LABELS[mode];
+			return [
+				"button",
+				{
+					class: "GRAPH_NODE_MODE_BTN button",
+					type: "button",
+					"data-mode": mode,
+					style: {
+						height: wide,
+						width: "2.5em"
+					},
+					title: (0, i18next.t)(key),
+					"data-i18n-title": key,
+					"aria-label": (0, i18next.t)(key),
+					"data-i18n-aria-label": key,
+					"aria-pressed": "false"
 				},
-				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: NODE_MODE_ICONS[mode]
+				}],
+				{ click: (evt) => {
+					evt.stopPropagation();
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
+				} }
+			];
+		})
+	], [
+		"button",
+		{
+			class: "GRAPH_NODE_LABELS button",
+			type: "button",
+			style: {
+				height: wide,
+				width: "2.5em"
 			},
-			["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")];
+			title: (0, i18next.t)("node labels"),
+			"data-i18n-title": "node labels",
+			"aria-label": (0, i18next.t)("node labels"),
+			"data-i18n-aria-label": "node labels",
+			"aria-pressed": "false"
+		},
+		["i", {
+			style: "font-size:1.5em; color:inherit;",
+			class: "yi-font"
+		}],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
+		} }
+	]];
 }
+var NODE_MODES = [
+	"expanded",
+	"compact",
+	"shape"
+];
+var NODE_MODE_LABELS = {
+	expanded: "full",
+	compact: "compact",
+	shape: "shape"
+};
+var NODE_MODE_ICONS = {
+	expanded: "yi-square",
+	compact: "yi-bars",
+	shape: "yi-hexagon-nodes"
+};
 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 mode = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "node_mode");
+	if (!NODE_MODES.includes(mode)) mode = "expanded";
 	let labels = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels");
-	set_pressed_state($root, ".GRAPH_NODE_MODE", compact);
+	for (let $btn of $root.querySelectorAll(".GRAPH_NODE_MODE_BTN")) {
+		let on = $btn.getAttribute("data-mode") === mode;
+		$btn.classList.toggle("pressed_state", on);
+		$btn.setAttribute("aria-pressed", on ? "true" : "false");
+	}
 	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");
+	if ($labels) {
+		$labels.setAttribute("aria-pressed", labels ? "true" : "false");
+		$labels.disabled = mode !== "shape";
+	}
 }
 function make_toolbar(gobj) {
 	let priv = gobj.priv;
@@ -63207,13 +63387,13 @@ 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.
+*  The view of the nodes and the labels toggle of the toolbar:
+*  the attr changes, persists, shows on the control, and reaches
+*  the G6 child, which owns the nodes.
 ************************************************************/
-function ac_toggle_node_mode(gobj, event, kw, src) {
+function ac_set_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";
+	let mode = kw && NODE_MODES.includes(kw.node_mode) ? kw.node_mode : "expanded";
 	(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);
@@ -63444,8 +63624,8 @@ function create_gclass$3(gclass_name) {
 			null
 		],
 		[
-			"EV_TOGGLE_NODE_MODE",
-			ac_toggle_node_mode,
+			"EV_SET_NODE_MODE",
+			ac_set_node_mode,
 			null
 		],
 		[
@@ -63517,7 +63697,7 @@ function create_gclass$3(gclass_name) {
 		["EV_FIND_NODES", 0],
 		["EV_EXPAND_ALL", 0],
 		["EV_COLLAPSE_ALL", 0],
-		["EV_TOGGLE_NODE_MODE", 0],
+		["EV_SET_NODE_MODE", 0],
 		["EV_TOGGLE_NODE_LABELS", 0],
 		["EV_FIND_RESULT", 0],
 		["EV_LAYOUT_AUTOSET", 0],