@yuneta/gobj-ui 7.23.80 → 7.23.82

package/dist/gobj-ui.cjs.js

@@ -43159,7 +43159,7 @@ var _excluded$5 = ["style"];
 * HTML container
 * @see https://github.com/pmndrs/drei#html
 */
-var HTML = /*#__PURE__*/ function(_DisplayObject) {
+var HTML$1 = /*#__PURE__*/ function(_DisplayObject) {
 	function HTML() {
 		var _this;
 		var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, style = _ref.style, rest = _objectWithoutProperties(_ref, _excluded$5);
@@ -43207,7 +43207,7 @@ var HTML = /*#__PURE__*/ function(_DisplayObject) {
 		}
 	]);
 }(DisplayObject);
-HTML.PARSED_STYLE_LIST = new Set([].concat(_toConsumableArray(DisplayObject.PARSED_STYLE_LIST), [
+HTML$1.PARSED_STYLE_LIST = new Set([].concat(_toConsumableArray(DisplayObject.PARSED_STYLE_LIST), [
 	"x",
 	"y",
 	"$el",
@@ -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"),
@@ -54658,6 +54678,8 @@ var PRIVATE_DATA$4 = {
 	_edge_icon_el: null,
 	_edge_delete_el: null,
 	_edge_popover_el: null,
+	_port_icon_el: null,
+	_port_popover_el: null,
 	_node_icon_el: null,
 	_node_delete_el: null,
 	_node_popover_el: null,
@@ -54848,6 +54870,7 @@ function register_layouts(gobj) {
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-tree", TreedbTreeLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "treedb-radial", TreedbRadialLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.NODE, "light", LightNode);
+		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.NODE, "treedb-card", TreedbCard);
 	}
 }
 /************************************************************
@@ -54917,6 +54940,7 @@ function configure_events(gobj) {
 		update_edge_icon_position(gobj);
 		update_node_icon_position(gobj);
 		update_link_icon_position(gobj);
+		update_port_icon_position(gobj);
 	});
 	graph.on(_antv_g6.NodeEvent.DRAG_END, (evt) => {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_DRAG_END", { evt }, gobj);
@@ -54941,6 +54965,7 @@ function configure_events(gobj) {
 		update_edge_icon_position(gobj);
 		update_node_icon_position(gobj);
 		update_link_icon_position(gobj);
+		update_port_icon_position(gobj);
 		update_zoom_readout(gobj);
 		let z = priv.last_zoom;
 		try {
@@ -55589,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
@@ -55642,45 +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;
-		}
-	} 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: "html",
+		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) {
@@ -55697,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
 	};
 }
 /************************************************************
@@ -56086,6 +56186,10 @@ function update_geometry(gobj, node_id) {
 		for (let i = 0; i < ports.length; i++) if (ports[i].r != null) port_sizes[ports[i].key] = ports[i].r;
 		if (Object.keys(port_sizes).length > 0) node_props.port_sizes = port_sizes;
 		else delete node_props.port_sizes;
+		let port_shapes = {};
+		for (let i = 0; i < ports.length; i++) if (ports[i].shape && ports[i].shape !== "circle") port_shapes[ports[i].key] = ports[i].shape;
+		if (Object.keys(port_shapes).length > 0) node_props.port_shapes = port_shapes;
+		else delete node_props.port_shapes;
 	}
 	topic_props.nodes[record.id] = node_props;
 	nodedata.data.graph_props = node_props;
@@ -56568,11 +56672,74 @@ function graph_resize(gobj, width, height) {
 	update_port_resize_handles_position(gobj);
 	update_node_icon_position(gobj);
 	update_link_icon_position(gobj);
+	update_port_icon_position(gobj);
 }
 function graph_write_behaviors(gobj, behaviors) {
 	gobj.priv.graph.setOptions({ behaviors });
 }
 /************************************************************
+*  Custom G6 node: TreedbCard -- G6's html node with ports that
+*  have a SHAPE.
+*
+*  G6 draws every port as a circle (`drawPortShapes` upserts a
+*  `Circle`, nothing in the port style says otherwise). A port's
+*  `shape` -- `circle`, `square`, `diamond`, `triangle` -- picks
+*  the G shape here, by the names G6 registers itself, and `r`
+*  stays the one size: the half-side of the square, the half-
+*  diagonal of the diamond, the half-height of the triangle. The
+*  hit test, the resize handles and the edge's landing point all
+*  read `r` and none of them care about the outline.
+************************************************************/
+var PORT_SHAPES = [
+	"circle",
+	"square",
+	"diamond",
+	"triangle"
+];
+var TreedbCard = class extends _antv_g6.HTML {
+	drawPortShapes(attributes, container) {
+		const portsStyle = this.getPortsStyle(attributes);
+		Object.keys(portsStyle).forEach((key) => {
+			const style = portsStyle[key];
+			const shapeKey = `port-${key}`;
+			if (style === false) {
+				this.upsert(shapeKey, "circle", false, container);
+				return;
+			}
+			let r = Number(style.r) || 0;
+			switch (style.shape) {
+				case "square":
+					this.upsert(shapeKey, "rect", Object.assign({}, style, {
+						x: -r,
+						y: -r,
+						width: 2 * r,
+						height: 2 * r
+					}), container);
+					break;
+				case "diamond":
+					this.upsert(shapeKey, "polygon", Object.assign({}, style, { points: [
+						[0, -r],
+						[r, 0],
+						[0, r],
+						[-r, 0]
+					] }), container);
+					break;
+				case "triangle":
+					this.upsert(shapeKey, "polygon", Object.assign({}, style, { points: [
+						[0, -r],
+						[r, r],
+						[-r, r]
+					] }), container);
+					break;
+				default: this.upsert(shapeKey, "circle", style, container);
+			}
+		});
+	}
+};
+function is_card_type(type) {
+	return type === "treedb-card" || type === "html";
+}
+/************************************************************
 *  Custom G6 node: LightNode (circle with status indicator)
 ************************************************************/
 var LightNode = class extends _antv_g6.Circle {
@@ -57318,7 +57485,7 @@ function start_node_resize(gobj, e, mx, my) {
 		};
 		if (nodeType === "circle") updateStyle.size = [Math.max(newW, newH)];
 		else updateStyle.size = [newW, newH];
-		if (nodeType === "html") {
+		if (is_card_type(nodeType)) {
 			updateStyle.dx = -newW / 2;
 			updateStyle.dy = -newH / 2;
 		}
@@ -57443,6 +57610,7 @@ function select_port(gobj, node_id, port_key) {
 	priv._selected_port_key = port_key;
 	show_port_resize_handles(gobj);
 	show_link_icon_if_fkey(gobj);
+	show_port_icon(gobj);
 }
 /************************************************************
 *  Deselect port: clear port state, return to node selection.
@@ -57451,6 +57619,8 @@ function deselect_port(gobj) {
 	let priv = gobj.priv;
 	exit_linking_mode(gobj);
 	hide_link_icon(gobj);
+	hide_port_icon(gobj);
+	hide_port_popover(gobj);
 	hide_port_resize_handles(gobj);
 	priv._selected_port_key = null;
 }
@@ -57503,6 +57673,217 @@ function update_link_icon_position(gobj) {
 	}
 }
 /************************************************************
+*  Port properties icon and popover: the gear beside a selected
+*  port, as the node has its own. The popover has the two things
+*  a port IS on screen -- its shape and its radius -- and the
+*  scope: this port, the same port of every card of the topic
+*  (the hook or fkey column), or every port there is.
+************************************************************/
+function port_icon_xy(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let canvasPos = get_port_canvas_position(gobj, priv._selected_node_id, priv._selected_port_key);
+	if (!canvasPos) return null;
+	let vp = graph.getViewportByCanvas([canvasPos.x, canvasPos.y]);
+	let below = priv._link_icon_el ? floating_icon_step() : 0;
+	return {
+		x: vp[0] + floating_icon_size() / 2 + 4,
+		y: vp[1] + floating_icon_dy() + below
+	};
+}
+function show_port_icon(gobj) {
+	hide_port_icon(gobj);
+	let priv = gobj.priv;
+	if (!priv._selected_node_id || !priv._selected_port_key) return;
+	let xy = port_icon_xy(gobj);
+	if (!xy) return;
+	let icon = create_floating_icon("gear", "#1890ff", xy.x, xy.y, (0, i18next.t)("port properties"), () => toggle_port_popover(gobj));
+	priv.$container.appendChild(icon);
+	priv._port_icon_el = icon;
+}
+function hide_port_icon(gobj) {
+	hide_overlay(gobj, "_port_icon_el");
+}
+function update_port_icon_position(gobj) {
+	let priv = gobj.priv;
+	if (!priv._port_icon_el || !priv._selected_node_id || !priv._selected_port_key) return;
+	try {
+		let xy = port_icon_xy(gobj);
+		if (!xy) {
+			hide_port_icon(gobj);
+			hide_port_popover(gobj);
+			return;
+		}
+		priv._port_icon_el.style.left = xy.x + "px";
+		priv._port_icon_el.style.top = xy.y + "px";
+		if (priv._port_popover_el) {
+			priv._port_popover_el.style.left = xy.x + floating_popover_dx() + "px";
+			priv._port_popover_el.style.top = xy.y + "px";
+			clamp_popover_position(gobj, priv._port_popover_el);
+		}
+	} catch (e) {
+		hide_port_icon(gobj);
+		hide_port_popover(gobj);
+	}
+}
+function toggle_port_popover(gobj) {
+	if (gobj.priv._port_popover_el) hide_port_popover(gobj);
+	else show_port_popover(gobj);
+}
+function hide_port_popover(gobj) {
+	hide_overlay(gobj, "_port_popover_el");
+}
+function ports_with(ports, port_key, changes) {
+	return (ports || []).map((p) => p.key === port_key ? Object.assign({}, p, changes) : p);
+}
+function show_port_popover(gobj) {
+	hide_port_popover(gobj);
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let node_id = priv._selected_node_id;
+	let port_key = priv._selected_port_key;
+	if (!node_id || !port_key) return;
+	let nodeData = graph.getNodeData(node_id);
+	if (!nodeData || !nodeData.style) return;
+	let port = (nodeData.style.ports || []).find((p) => p.key === port_key);
+	if (!port) return;
+	let orig_shape = port.shape || "circle";
+	let orig_r = get_port_radius(gobj, node_id, port_key);
+	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);
+	function preview_port() {
+		let r = parseInt(rInput.value) || orig_r;
+		graph.updateNodeData([{
+			id: node_id,
+			style: { ports: ports_with(nodeData.style.ports, port_key, {
+				shape: shapeSelect.value,
+				r
+			}) }
+		}]);
+		graph.draw().then(() => {
+			update_port_resize_handles_position(gobj);
+		});
+	}
+	create_form_label(popover, "shape");
+	let shapeSelect = create_form_select(popover, PORT_SHAPES.map((shape) => {
+		return {
+			value: shape,
+			label: (0, i18next.t)(shape)
+		};
+	}));
+	shapeSelect.value = orig_shape;
+	shapeSelect.addEventListener("change", preview_port);
+	create_form_label(popover, "radius");
+	let rInput = create_form_number_input(popover, orig_r, 2, 40, preview_port);
+	create_form_label(popover, "apply to");
+	let scopeSelect = create_form_select(popover, [
+		{
+			value: "this",
+			label: (0, i18next.t)("this port")
+		},
+		{
+			value: "same_topic",
+			label: (0, i18next.t)("same port in topic")
+		},
+		{
+			value: "all",
+			label: (0, i18next.t)("all ports")
+		}
+	]);
+	create_form_button_row(popover, [{
+		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: () => {
+			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;
+	clamp_popover_position(gobj, popover);
+}
+/************************************************************
+*  Apply a port's shape and radius to one port, to the same port
+*  of every card of the topic, or to every port -- and remember
+*  the choice as the topic's default, the way `resize all ports`
+*  does, so a card that arrives later is born with it.
+*      scope: 'this', 'same_topic', 'all'
+************************************************************/
+function apply_port_properties(gobj, node_id, port_key, shape, r, scope) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let nodeData = graph.getNodeData(node_id);
+	if (!nodeData || !nodeData.data) return;
+	let source_topic = nodeData.data.topic_name;
+	if (scope === "same_topic") {
+		if (!(0, _yuneta_gobj_js.is_object)(priv._graph_properties[source_topic])) priv._graph_properties[source_topic] = {};
+		let defaults = priv._graph_properties[source_topic].defaults || {};
+		defaults.port_sizes = Object.assign({}, defaults.port_sizes, { [port_key]: r });
+		defaults.port_shapes = Object.assign({}, defaults.port_shapes, { [port_key]: shape });
+		priv._graph_properties[source_topic].defaults = defaults;
+	} else if (scope === "all") for (const topic_name of Object.keys(priv.descs || {})) {
+		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.portR = r;
+		defaults.port_shape = shape;
+		delete defaults.port_sizes;
+		delete defaults.port_shapes;
+		priv._graph_properties[topic_name].defaults = defaults;
+	}
+	let updates = [];
+	for (let nd of graph.getNodeData() || []) {
+		if (!nd || !nd.data || !nd.data.desc || !nd.style || !(0, _yuneta_gobj_js.is_array)(nd.style.ports)) continue;
+		let new_ports;
+		if (scope === "this") {
+			if (nd.id !== node_id) continue;
+			new_ports = ports_with(nd.style.ports, port_key, {
+				shape,
+				r
+			});
+		} else if (scope === "same_topic") {
+			if (nd.data.topic_name !== source_topic) continue;
+			new_ports = ports_with(nd.style.ports, port_key, {
+				shape,
+				r
+			});
+		} else new_ports = nd.style.ports.map((p) => Object.assign({}, p, {
+			shape,
+			r
+		}));
+		let upd = { ports: new_ports };
+		if (scope === "all") upd.portR = r;
+		updates.push({
+			id: nd.id,
+			style: upd
+		});
+	}
+	if (updates.length > 0) {
+		graph.updateNodeData(updates);
+		graph.draw().then(() => {
+			update_port_resize_handles_position(gobj);
+			update_port_icon_position(gobj);
+			mark_graph_dirty(gobj);
+		});
+	}
+	hide_port_popover(gobj);
+}
+/************************************************************
 *  Get a column descriptor by field id from a topic desc.
 ************************************************************/
 function get_col_by_id(desc, col_id) {
@@ -58209,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, [
 		{
@@ -58248,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);
@@ -58479,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
@@ -58490,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 }
@@ -58528,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
@@ -58539,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,
@@ -58997,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);
@@ -59005,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,
@@ -59026,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);
 		});
@@ -59033,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'
 ************************************************************/
@@ -59160,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"));
@@ -59177,6 +59601,7 @@ function build_port_context_menu(gobj, node_id, port_key) {
 	let items = [];
 	if (gobj.priv.edit_mode) {
 		inject_svg_icons();
+		items.push(ctx_item("g6-icon-edit", (0, i18next.t)("port properties"), "port_properties"));
 		items.push(ctx_item("g6-icon-resize", (0, i18next.t)("resize all ports"), "resize_all_ports"));
 		items.push(ctx_item("g6-icon-resize", (0, i18next.t)("resize topic ports"), "resize_topic_ports"));
 	}
@@ -59209,6 +59634,12 @@ function handle_context_menu_click(gobj, value) {
 		case "reset_topic_sizes":
 			reset_sizes(gobj, true);
 			break;
+		case "port_properties":
+			if (priv._context_node_id && priv._context_port_key) {
+				select_port(gobj, priv._context_node_id, priv._context_port_key);
+				show_port_popover(gobj);
+			}
+			break;
 		case "resize_all_ports":
 			copy_size_to_ports(gobj, false);
 			break;
@@ -59252,7 +59683,7 @@ function copy_size_to_nodes(gobj, same_topic_only) {
 		if (nodes[i].id === node_id) continue;
 		let updateStyle = { size: [...source_size] };
 		if (source_portR != null) updateStyle.portR = source_portR;
-		if (nd.type === "html") {
+		if (is_card_type(nd.type)) {
 			updateStyle.dx = -source_size[0] / 2;
 			updateStyle.dy = -(source_size.length > 1 ? source_size[1] : source_size[0]) / 2;
 		}
@@ -59393,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);
@@ -59852,6 +60283,7 @@ async function reconcile_fold_apply(gobj, opts, visible) {
 	update_edge_icon_position(gobj);
 	update_node_icon_position(gobj);
 	update_link_icon_position(gobj);
+	update_port_icon_position(gobj);
 	return changed;
 }
 /************************************************************
@@ -60443,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;
@@ -60458,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;
 }
 /************************************************************
@@ -60474,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) {
@@ -61003,7 +61435,7 @@ function create_gclass$4(gclass_name) {
 		],
 		[
 			"EV_SET_NODE_MODE",
-			ac_set_node_mode,
+			ac_set_node_mode$1,
 			null
 		],
 		[
@@ -61013,7 +61445,7 @@ function create_gclass$4(gclass_name) {
 		],
 		[
 			"EV_TOGGLE_NODE_MODE",
-			ac_toggle_node_mode$1,
+			ac_toggle_node_mode,
 			null
 		],
 		[
@@ -61194,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"),
@@ -61479,44 +61911,92 @@ 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 [
+	let options = NODE_MODES.map((mode) => [
+		"option",
+		{
+			value: mode,
+			"data-i18n": NODE_MODE_LABELS[mode]
+		},
+		(0, i18next.t)(NODE_MODE_LABELS[mode])
+	]);
+	return [
+		[
+			"span",
+			{
+				class: "GRAPH_NODE_MODE_LABEL is-hidden-mobile",
+				style: "padding-left:10px; padding-right:5px;",
+				i18n: "nodes"
+			},
+			"nodes"
+		],
+		[
+			"div",
+			{ class: "select" },
+			[[
+				"select",
+				{
+					class: "GRAPH_NODE_MODE_SELECT",
+					title: (0, i18next.t)("nodes"),
+					"data-i18n-title": "nodes",
+					"aria-label": (0, i18next.t)("nodes"),
+					"data-i18n-aria-label": "nodes"
+				},
+				options
+			]],
+			{ change: (evt) => {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_NODE_MODE", { node_mode: evt.target.value }, gobj);
+			} }
+		],
+		[
 			"button",
 			{
-				class: `${cls} button`,
+				class: "GRAPH_NODE_LABELS 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,
+				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: icon
+				class: "yi-font"
 			}],
 			{ click: (evt) => {
 				evt.stopPropagation();
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, {}, gobj);
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_LABELS", {}, 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")];
+		]
+	];
 }
+var NODE_MODES = [
+	"expanded",
+	"compact",
+	"shape"
+];
+var NODE_MODE_LABELS = {
+	expanded: "full",
+	compact: "compact",
+	shape: "shape"
+};
 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);
+	let $mode = $root.querySelector(".GRAPH_NODE_MODE_SELECT");
+	if ($mode) $mode.value = mode;
 	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;
@@ -62903,13 +63383,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);
@@ -63140,8 +63620,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
 		],
 		[
@@ -63213,7 +63693,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],