@yuneta/gobj-ui 7.23.131 → 7.23.133

package/README.md

@@ -2290,6 +2290,56 @@ too; the shell's stylesheet raises Bulma's 30% alpha to 70% (2.47:1 → 7.96 in
 dark) where Bulma declares the variable, since a `:root` override does not
 reach it.
 
+### A control without a name is a bug: `title` + `aria-label`, always
+
+**Every control this library draws — and every control an app draws with it —
+carries a `title` AND an `aria-label`, and both are translatable.** A control
+is any `input`, `select`, `textarea`, `button`, or anything that behaves as
+one. All four attributes are written where the control is built:
+
+```js
+['button', {class: 'FOO_SAVE button',
+            title: t('save'),        'data-i18n-title': 'save',
+            'aria-label': t('save'), 'data-i18n-aria-label': 'save'}, …]
+```
+
+It is a floor, not a preference. The ecosystem was swept against it — the
+deployed page of six SPAs, read control by control — and the target is **zero
+controls without a name**. Three things it exists to stop, each of which
+shipped:
+
+| What looks like a name | Why it is not |
+|---|---|
+| A `<label>` **beside** the control (Bulma's `field`) | No `for`, no wrapping: it names the box for the eye and for nothing else |
+| `<label for="x">` over a control carrying only `name="x"` | `for` matches an **`id`**, which the control does not have — correct-looking source, no association |
+| A `placeholder` | Gone the moment something is typed; a reader need not announce it |
+| The visible text | Disappears with `is-hidden-mobile`; and where the text is the STATE (`on`/`off`), it does not say what the control DOES |
+
+A `<label>` that **wraps** its control is the one shape that needs no
+`aria-label` — the label IS the accessible name. And a **literal**
+`aria-label` next to a visible `i18n` label is worse than none: it OVERRIDES
+the translated text for a reader.
+
+Two things carry no attribute anyone can set, and are named after the render
+instead — and again on every rebuild, because a name written onto a widget's
+DOM is a race with the next one:
+
+- **What a widget draws for itself**: Tabulator's header filters and its
+  row-selection checkbox (`yui_tabulator_name_filters` /
+  `yui_tabulator_name_row_selects`, hung off `columnsLoaded` and
+  `renderComplete`), Tom Select's box in front of the `<select>` it hides
+  (`name_form_control`).
+- **An `<option>`**, which is text like any other: it carries `data-i18n`,
+  with `value` kept explicit — a translated option with no value tells the FSM
+  to enter a mode that does not exist.
+
+**How to check it.** Not with a grep: dump `title`/`aria-label` from the
+DEPLOYED DOM, resolve each control's name the way a reader does (`aria-label`
+→ `label[for]` → a wrapping `<label>` → the text → `title` → `placeholder`),
+then switch language and diff. A key that arrives as a VARIABLE — from a data
+table, a helper's argument, a local alias of `t()` — is invisible to
+`validate-locales` and shows up only there.
+
 ### i18n: a string must be able to CHANGE language, not just be translated once
 
 Passing a string through `t()` is **not** enough. `refresh_language()` only

package/dist/gobj-ui.cjs.js

@@ -55080,7 +55080,7 @@ var NODE_SHAPES = [
 	"hexagon",
 	"star"
 ];
-var DEFAULT_NODE_SHAPE = "square";
+var DEFAULT_NODE_SHAPE = "circle";
 /***************************************************************
 *  Internal layout and operation mode definitions
 ***************************************************************/
@@ -55233,6 +55233,7 @@ var PRIVATE_DATA$4 = {
 	_focus_topic: null,
 	_focus_ids: [],
 	_on_pointerdown_focus: null,
+	_on_native_contextmenu: null,
 	_uninstall_long_press: null,
 	toolbar_collapsed: true,
 	_toolbars_could_collapse: null,
@@ -55330,6 +55331,10 @@ function mt_destroy$4(gobj) {
 		priv.$container.removeEventListener("focusout", priv._on_focusout_restore);
 		priv._on_focusout_restore = null;
 	}
+	if (priv._on_native_contextmenu) {
+		priv.$container.removeEventListener("contextmenu", priv._on_native_contextmenu, true);
+		priv._on_native_contextmenu = null;
+	}
 	if (priv.theme_observer) {
 		priv.theme_observer.disconnect();
 		priv.theme_observer = null;
@@ -55533,6 +55538,13 @@ function configure_events(gobj) {
 		if ($canvas && $canvas.isConnected && document.activeElement !== $canvas) $canvas.focus({ preventScroll: true });
 	};
 	priv.$container.addEventListener("focusout", priv._on_focusout_restore);
+	if (priv._on_native_contextmenu) priv.$container.removeEventListener("contextmenu", priv._on_native_contextmenu, true);
+	priv._on_native_contextmenu = (ev) => {
+		let target = ev.target;
+		if (target && typeof target.closest === "function" && target.closest("input, textarea, select, [contenteditable]")) return;
+		ev.preventDefault();
+	};
+	priv.$container.addEventListener("contextmenu", priv._on_native_contextmenu, true);
 	graph.on("keydown", (evt) => {
 		let ctrl = !!(evt.ctrlKey || evt.metaKey);
 		if (ctrl && (evt.key === "a" || evt.key === "A")) {
@@ -55566,7 +55578,8 @@ function configure_plugins(gobj) {
 		}
 	});
 	let menu_enable = (e) => {
-		return e.targetType === "node" || e.targetType === "edge";
+		if (e.targetType === "node") return true;
+		return e.targetType === "edge" && !!priv.edit_mode;
 	};
 	graph_add_plugin(gobj, "contextmenu", {
 		trigger: "contextmenu",
@@ -56402,11 +56415,8 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 	let paint = node_paint_of(gobj, desc, geometry);
 	let fill = dark ? mix_colors(paint.fill, .25, "#2c3542") : mix_colors(paint.fill, .1, "#ffffff");
 	let stroke = dark ? mix_colors(paint.fill, .85, "#ffffff") : paint.fill;
-	let line_width = 2;
-	if (paint.stroke !== getStrokeColor(paint.fill)) {
-		stroke = paint.stroke;
-		line_width = Math.max(paint.lineWidth, 2);
-	}
+	let line_width = paint.lineWidth;
+	if (paint.stroke !== getStrokeColor(paint.fill)) stroke = paint.stroke;
 	if (f.selected) {
 		stroke = SELECT_RING;
 		line_width = 3;
@@ -59358,6 +59368,7 @@ function show_node_popover(gobj) {
 		};
 	}));
 	shapeSelect.value = nodeData.data && nodeData.data.desc ? node_figure_of(gobj, nodeData.data.desc, nodeData.data.graph_props || {}) : DEFAULT_NODE_SHAPE;
+	let orig_figure = shapeSelect.value;
 	create_form_label(popover, "apply to");
 	let scopeSelect = create_form_select(popover, [
 		{
@@ -59384,7 +59395,7 @@ function show_node_popover(gobj) {
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_node_preview_undo");
-			apply_node_properties(gobj, node_id, fillInput.value, strokeInput.value, parseInt(lwInput.value) || 1, scopeSelect.value, shapeSelect.value);
+			apply_node_properties(gobj, node_id, fillInput.value, strokeInput.value, parseInt(lwInput.value) || 1, scopeSelect.value, shapeSelect.value !== orig_figure ? shapeSelect.value : "");
 		}
 	}]);
 	priv.$container.appendChild(popover);
@@ -60317,7 +60328,7 @@ function build_context_menu_items(gobj, e) {
 		let containerRect = priv.$container.getBoundingClientRect();
 		let canvasPoint = graph.getCanvasByViewport([e.client.x - containerRect.left, e.client.y - containerRect.top]);
 		let port_key = detect_port_click(gobj, node_id, canvasPoint[0], canvasPoint[1]);
-		if (port_key) {
+		if (port_key && priv.edit_mode) {
 			priv._context_port_key = port_key;
 			return build_port_context_menu(gobj, node_id, port_key);
 		} else return build_node_context_menu(gobj, node_id);
@@ -60362,14 +60373,24 @@ function build_port_context_menu(gobj, node_id, port_key) {
 		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"));
+		items.push(ctx_item("g6-icon-undo", (0, i18next.t)("reset port"), "reset_port"));
+		items.push(ctx_item("g6-icon-undo", (0, i18next.t)("reset topic ports"), "reset_topic_ports"));
+		items.push(ctx_item("g6-icon-undo", (0, i18next.t)("reset all ports"), "reset_all_ports"));
 	}
 	return items;
 }
 /************************************************************
-*  Build edge context menu items (prepared for expansion).
+*  Build edge context menu items: the two floating icons of a
+*  selected edge, for a right click and for a finger.
 ************************************************************/
 function build_edge_context_menu(gobj) {
-	return [];
+	let items = [];
+	if (gobj.priv.edit_mode) {
+		inject_svg_icons();
+		items.push(ctx_item("g6-icon-edit", (0, i18next.t)("edge properties"), "edge_properties"));
+		items.push(ctx_item("g6-icon-delete", (0, i18next.t)("unlink"), "unlink_edge"));
+	}
+	return items;
 }
 /************************************************************
 *  Handle context menu click: dispatch by value.
@@ -60401,7 +60422,33 @@ function handle_context_menu_click(gobj, value) {
 		case "resize_all_ports":
 			copy_size_to_ports(gobj, false);
 			break;
-		case "resize_topic_ports": copy_size_to_ports(gobj, true);
+		case "resize_topic_ports":
+			copy_size_to_ports(gobj, true);
+			break;
+		case "reset_port":
+			reset_ports(gobj, "this");
+			break;
+		case "reset_topic_ports":
+			reset_ports(gobj, "same_topic");
+			break;
+		case "reset_all_ports":
+			reset_ports(gobj, "all");
+			break;
+		case "edge_properties":
+			if (priv._context_edge_id) {
+				deselect_node(gobj);
+				select_edge(gobj, priv._context_edge_id);
+				show_edge_popover(gobj);
+			}
+			break;
+		case "unlink_edge":
+			if (priv._context_edge_id) {
+				deselect_node(gobj);
+				select_edge(gobj, priv._context_edge_id);
+				request_unlink_edge(gobj);
+			}
+			break;
+		default: (0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: unknown context menu item: ${value}`);
 	}
 }
 /************************************************************
@@ -60509,6 +60556,70 @@ function reset_sizes(gobj, same_topic_only) {
 	});
 }
 /************************************************************
+*  Forget the saved SHAPE and RADIUS of ports, back to the
+*  library's own:
+*      'this'          the port of the menu, on its node only
+*      'same_topic'    every port of the node's topic, with the
+*                      topic's port defaults
+*      'all'           every port of every topic, likewise
+*  The node sizes are not touched: that is `reset sizes`.
+************************************************************/
+function reset_ports(gobj, scope) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let node_id = priv._context_node_id;
+	let port_key = priv._context_port_key;
+	let nd = node_id ? graph.getNodeData(node_id) : null;
+	if (!nd || !nd.data || !nd.data.topic_name || !port_key) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: reset ports without a port`);
+		return;
+	}
+	const PORT_KEYS = [
+		"portR",
+		"port_sizes",
+		"port_shapes",
+		"port_shape"
+	];
+	let strip_port = (props) => {
+		if (!(0, _yuneta_gobj_js.is_object)(props)) return;
+		for (let k of ["port_sizes", "port_shapes"]) if ((0, _yuneta_gobj_js.is_object)(props[k])) {
+			delete props[k][port_key];
+			if (Object.keys(props[k]).length === 0) delete props[k];
+		}
+	};
+	let strip_all = (props) => {
+		if (!(0, _yuneta_gobj_js.is_object)(props)) return;
+		for (let k of PORT_KEYS) delete props[k];
+	};
+	let ids = [];
+	if (scope === "this") {
+		strip_port(node_props_entry(gobj, nd));
+		strip_port(nd.data.graph_props);
+		if (nd.data.record) strip_port(nd.data.record._geometry);
+		ids.push(node_id);
+	} else {
+		let topic = scope === "same_topic" ? nd.data.topic_name : "";
+		for (const [topic_name, props] of Object.entries(priv._graph_properties || {})) {
+			if (topic && topic_name !== topic) continue;
+			if ((0, _yuneta_gobj_js.is_object)(props.nodes)) for (let node_props of Object.values(props.nodes)) strip_all(node_props);
+			strip_all(props.defaults);
+		}
+		for (let n of graph.getNodeData() || []) {
+			if (!n || !n.data || !n.data.desc || is_more_node(n)) continue;
+			if (topic && n.data.topic_name !== topic) continue;
+			strip_all(n.data.graph_props);
+			if (n.data.record) strip_all(n.data.record._geometry);
+			ids.push(n.id);
+		}
+	}
+	reshape_nodes(gobj, ids);
+	graph.draw().then(() => {
+		update_port_resize_handles_position(gobj);
+		update_port_icon_position(gobj);
+		mark_graph_dirty(gobj);
+	});
+}
+/************************************************************
 *  Copy the selected port's radius to matching ports.
 *  If same_topic_only=true, only ports in same-topic nodes.
 *  If same_topic_only=false, matching ports in all nodes.

package/dist/gobj-ui.es.js

@@ -55075,7 +55075,7 @@ var NODE_SHAPES = [
 	"hexagon",
 	"star"
 ];
-var DEFAULT_NODE_SHAPE = "square";
+var DEFAULT_NODE_SHAPE = "circle";
 /***************************************************************
 *  Internal layout and operation mode definitions
 ***************************************************************/
@@ -55228,6 +55228,7 @@ var PRIVATE_DATA$4 = {
 	_focus_topic: null,
 	_focus_ids: [],
 	_on_pointerdown_focus: null,
+	_on_native_contextmenu: null,
 	_uninstall_long_press: null,
 	toolbar_collapsed: true,
 	_toolbars_could_collapse: null,
@@ -55325,6 +55326,10 @@ function mt_destroy$4(gobj) {
 		priv.$container.removeEventListener("focusout", priv._on_focusout_restore);
 		priv._on_focusout_restore = null;
 	}
+	if (priv._on_native_contextmenu) {
+		priv.$container.removeEventListener("contextmenu", priv._on_native_contextmenu, true);
+		priv._on_native_contextmenu = null;
+	}
 	if (priv.theme_observer) {
 		priv.theme_observer.disconnect();
 		priv.theme_observer = null;
@@ -55528,6 +55533,13 @@ function configure_events(gobj) {
 		if ($canvas && $canvas.isConnected && document.activeElement !== $canvas) $canvas.focus({ preventScroll: true });
 	};
 	priv.$container.addEventListener("focusout", priv._on_focusout_restore);
+	if (priv._on_native_contextmenu) priv.$container.removeEventListener("contextmenu", priv._on_native_contextmenu, true);
+	priv._on_native_contextmenu = (ev) => {
+		let target = ev.target;
+		if (target && typeof target.closest === "function" && target.closest("input, textarea, select, [contenteditable]")) return;
+		ev.preventDefault();
+	};
+	priv.$container.addEventListener("contextmenu", priv._on_native_contextmenu, true);
 	graph.on("keydown", (evt) => {
 		let ctrl = !!(evt.ctrlKey || evt.metaKey);
 		if (ctrl && (evt.key === "a" || evt.key === "A")) {
@@ -55561,7 +55573,8 @@ function configure_plugins(gobj) {
 		}
 	});
 	let menu_enable = (e) => {
-		return e.targetType === "node" || e.targetType === "edge";
+		if (e.targetType === "node") return true;
+		return e.targetType === "edge" && !!priv.edit_mode;
 	};
 	graph_add_plugin(gobj, "contextmenu", {
 		trigger: "contextmenu",
@@ -56397,11 +56410,8 @@ function figure_shape_of(gobj, desc, record, geometry, flags) {
 	let paint = node_paint_of(gobj, desc, geometry);
 	let fill = dark ? mix_colors(paint.fill, .25, "#2c3542") : mix_colors(paint.fill, .1, "#ffffff");
 	let stroke = dark ? mix_colors(paint.fill, .85, "#ffffff") : paint.fill;
-	let line_width = 2;
-	if (paint.stroke !== getStrokeColor(paint.fill)) {
-		stroke = paint.stroke;
-		line_width = Math.max(paint.lineWidth, 2);
-	}
+	let line_width = paint.lineWidth;
+	if (paint.stroke !== getStrokeColor(paint.fill)) stroke = paint.stroke;
 	if (f.selected) {
 		stroke = SELECT_RING;
 		line_width = 3;
@@ -59353,6 +59363,7 @@ function show_node_popover(gobj) {
 		};
 	}));
 	shapeSelect.value = nodeData.data && nodeData.data.desc ? node_figure_of(gobj, nodeData.data.desc, nodeData.data.graph_props || {}) : DEFAULT_NODE_SHAPE;
+	let orig_figure = shapeSelect.value;
 	create_form_label(popover, "apply to");
 	let scopeSelect = create_form_select(popover, [
 		{
@@ -59379,7 +59390,7 @@ function show_node_popover(gobj) {
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_node_preview_undo");
-			apply_node_properties(gobj, node_id, fillInput.value, strokeInput.value, parseInt(lwInput.value) || 1, scopeSelect.value, shapeSelect.value);
+			apply_node_properties(gobj, node_id, fillInput.value, strokeInput.value, parseInt(lwInput.value) || 1, scopeSelect.value, shapeSelect.value !== orig_figure ? shapeSelect.value : "");
 		}
 	}]);
 	priv.$container.appendChild(popover);
@@ -60312,7 +60323,7 @@ function build_context_menu_items(gobj, e) {
 		let containerRect = priv.$container.getBoundingClientRect();
 		let canvasPoint = graph.getCanvasByViewport([e.client.x - containerRect.left, e.client.y - containerRect.top]);
 		let port_key = detect_port_click(gobj, node_id, canvasPoint[0], canvasPoint[1]);
-		if (port_key) {
+		if (port_key && priv.edit_mode) {
 			priv._context_port_key = port_key;
 			return build_port_context_menu(gobj, node_id, port_key);
 		} else return build_node_context_menu(gobj, node_id);
@@ -60357,14 +60368,24 @@ function build_port_context_menu(gobj, node_id, port_key) {
 		items.push(ctx_item("g6-icon-edit", t("port properties"), "port_properties"));
 		items.push(ctx_item("g6-icon-resize", t("resize all ports"), "resize_all_ports"));
 		items.push(ctx_item("g6-icon-resize", t("resize topic ports"), "resize_topic_ports"));
+		items.push(ctx_item("g6-icon-undo", t("reset port"), "reset_port"));
+		items.push(ctx_item("g6-icon-undo", t("reset topic ports"), "reset_topic_ports"));
+		items.push(ctx_item("g6-icon-undo", t("reset all ports"), "reset_all_ports"));
 	}
 	return items;
 }
 /************************************************************
-*  Build edge context menu items (prepared for expansion).
+*  Build edge context menu items: the two floating icons of a
+*  selected edge, for a right click and for a finger.
 ************************************************************/
 function build_edge_context_menu(gobj) {
-	return [];
+	let items = [];
+	if (gobj.priv.edit_mode) {
+		inject_svg_icons();
+		items.push(ctx_item("g6-icon-edit", t("edge properties"), "edge_properties"));
+		items.push(ctx_item("g6-icon-delete", t("unlink"), "unlink_edge"));
+	}
+	return items;
 }
 /************************************************************
 *  Handle context menu click: dispatch by value.
@@ -60396,7 +60417,33 @@ function handle_context_menu_click(gobj, value) {
 		case "resize_all_ports":
 			copy_size_to_ports(gobj, false);
 			break;
-		case "resize_topic_ports": copy_size_to_ports(gobj, true);
+		case "resize_topic_ports":
+			copy_size_to_ports(gobj, true);
+			break;
+		case "reset_port":
+			reset_ports(gobj, "this");
+			break;
+		case "reset_topic_ports":
+			reset_ports(gobj, "same_topic");
+			break;
+		case "reset_all_ports":
+			reset_ports(gobj, "all");
+			break;
+		case "edge_properties":
+			if (priv._context_edge_id) {
+				deselect_node(gobj);
+				select_edge(gobj, priv._context_edge_id);
+				show_edge_popover(gobj);
+			}
+			break;
+		case "unlink_edge":
+			if (priv._context_edge_id) {
+				deselect_node(gobj);
+				select_edge(gobj, priv._context_edge_id);
+				request_unlink_edge(gobj);
+			}
+			break;
+		default: log_error(`${gobj_short_name(gobj)}: unknown context menu item: ${value}`);
 	}
 }
 /************************************************************
@@ -60504,6 +60551,70 @@ function reset_sizes(gobj, same_topic_only) {
 	});
 }
 /************************************************************
+*  Forget the saved SHAPE and RADIUS of ports, back to the
+*  library's own:
+*      'this'          the port of the menu, on its node only
+*      'same_topic'    every port of the node's topic, with the
+*                      topic's port defaults
+*      'all'           every port of every topic, likewise
+*  The node sizes are not touched: that is `reset sizes`.
+************************************************************/
+function reset_ports(gobj, scope) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let node_id = priv._context_node_id;
+	let port_key = priv._context_port_key;
+	let nd = node_id ? graph.getNodeData(node_id) : null;
+	if (!nd || !nd.data || !nd.data.topic_name || !port_key) {
+		log_error(`${gobj_short_name(gobj)}: reset ports without a port`);
+		return;
+	}
+	const PORT_KEYS = [
+		"portR",
+		"port_sizes",
+		"port_shapes",
+		"port_shape"
+	];
+	let strip_port = (props) => {
+		if (!is_object(props)) return;
+		for (let k of ["port_sizes", "port_shapes"]) if (is_object(props[k])) {
+			delete props[k][port_key];
+			if (Object.keys(props[k]).length === 0) delete props[k];
+		}
+	};
+	let strip_all = (props) => {
+		if (!is_object(props)) return;
+		for (let k of PORT_KEYS) delete props[k];
+	};
+	let ids = [];
+	if (scope === "this") {
+		strip_port(node_props_entry(gobj, nd));
+		strip_port(nd.data.graph_props);
+		if (nd.data.record) strip_port(nd.data.record._geometry);
+		ids.push(node_id);
+	} else {
+		let topic = scope === "same_topic" ? nd.data.topic_name : "";
+		for (const [topic_name, props] of Object.entries(priv._graph_properties || {})) {
+			if (topic && topic_name !== topic) continue;
+			if (is_object(props.nodes)) for (let node_props of Object.values(props.nodes)) strip_all(node_props);
+			strip_all(props.defaults);
+		}
+		for (let n of graph.getNodeData() || []) {
+			if (!n || !n.data || !n.data.desc || is_more_node(n)) continue;
+			if (topic && n.data.topic_name !== topic) continue;
+			strip_all(n.data.graph_props);
+			if (n.data.record) strip_all(n.data.record._geometry);
+			ids.push(n.id);
+		}
+	}
+	reshape_nodes(gobj, ids);
+	graph.draw().then(() => {
+		update_port_resize_handles_position(gobj);
+		update_port_icon_position(gobj);
+		mark_graph_dirty(gobj);
+	});
+}
+/************************************************************
 *  Copy the selected port's radius to matching ports.
 *  If same_topic_only=true, only ports in same-topic nodes.
 *  If same_topic_only=false, matching ports in all nodes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.131",
+  "version": "7.23.133",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_g6_nodes_tree.js

@@ -290,7 +290,7 @@ const PORT_LINE_WIDTH = 2;
  *  gobj tree view has: `expanded` is the card with its pills and
  *  its ports; `compact` is a one-line pill with the name inside
  *  and small ports, the half-way house; `shape` is a figure of the
- *  topic's colour -- a square, a circle, a diamond... chosen in the
+ *  topic's colour -- a circle, a square, a diamond... chosen in the
  *  node's properties -- no ports, no text, topology and nothing
  *  else. The three tiers keep their order of size in every view,
  *  so a root is still bigger than a leaf when nothing says which
@@ -311,9 +311,11 @@ const SHAPE_SIZE = {
     child:        22,
 };
 /*  The figures a `shape` node can be, by G6's own node types
- *  (`square` is G6's `rect` with rounded corners).  */
+ *  (`square` is G6's `rect` with rounded corners). A circle by
+ *  default: a figure is a POINT of the topology, and a circle is
+ *  the one figure that says nothing more than that.  */
 const NODE_SHAPES = ['square', 'circle', 'diamond', 'triangle', 'hexagon', 'star'];
-const DEFAULT_NODE_SHAPE = 'square';
+const DEFAULT_NODE_SHAPE = 'circle';
 
 /***************************************************************
  *  Internal layout and operation mode definitions
@@ -519,6 +521,7 @@ let PRIVATE_DATA = {
     _focus_topic:       null,       // topic currently focused (EV_FOCUS_TOPIC)
     _focus_ids:         [],         // node ids carrying the focus 'active' state
     _on_pointerdown_focus: null,    // listener keeping the keyboard on the canvas
+    _on_native_contextmenu: null,   // listener keeping the browser's menu out
     _uninstall_long_press: null,    // touch door to the context menu
     toolbar_collapsed:  true,       // floating toolbars folded (narrow only)
     _toolbars_could_collapse: null, // last answer, to notice it changed
@@ -704,6 +707,13 @@ function mt_destroy(gobj)
         priv._on_focusout_restore = null;
     }
 
+    if(priv._on_native_contextmenu) {
+        priv.$container.removeEventListener(
+            "contextmenu", priv._on_native_contextmenu, true
+        );
+        priv._on_native_contextmenu = null;
+    }
+
     if(priv.theme_observer) {
         priv.theme_observer.disconnect();
         priv.theme_observer = null;
@@ -1141,6 +1151,32 @@ function configure_events(gobj)
     };
     priv.$container.addEventListener("focusout", priv._on_focusout_restore);
 
+    /*  The browser's own menu never opens over the graph.
+     *
+     *  The context-menu plugin calls preventDefault() on the event
+     *  it is handed, and that event is the one @antv/g SYNTHESISES
+     *  from `pointerdown` with `button === 2` -- not the DOM's
+     *  `contextmenu`, which nobody cancelled. So a right click opened
+     *  both menus, and where ours had nothing to show (an edge, the
+     *  empty canvas) it opened the browser's alone. A form field of a
+     *  popover keeps it: that is where cut and paste live.  */
+    if(priv._on_native_contextmenu) {
+        priv.$container.removeEventListener(
+            "contextmenu", priv._on_native_contextmenu, true
+        );
+    }
+    priv._on_native_contextmenu = (ev) => {
+        let target = ev.target;
+        if(target && typeof target.closest === "function" &&
+                target.closest("input, textarea, select, [contenteditable]")) {
+            return;
+        }
+        ev.preventDefault();
+    };
+    priv.$container.addEventListener(
+        "contextmenu", priv._on_native_contextmenu, true
+    );
+
     /*  The canvas carries a `tabIndex` of its own, so a keydown reaches
      *  us only while the GRAPH has focus. That is what keeps Ctrl+A in
      *  the find box a text selection and not a selection of every node:
@@ -1205,7 +1241,12 @@ function configure_plugins(gobj)
      *  press below, so the gesture arms itself on exactly what the
      *  menu would agree to open on.  */
     let menu_enable = (e) => {
-        return e.targetType === 'node' || e.targetType === 'edge';
+        if(e.targetType === 'node') {
+            return true;
+        }
+        /*  An edge's commands (its properties, unlink) are edition
+         *  commands: in reading mode it has nothing to offer.  */
+        return e.targetType === 'edge' && !!priv.edit_mode;
     };
 
     graph_add_plugin(
@@ -2400,7 +2441,7 @@ function pill_innerHTML_of(gobj, nd, theme, highlight, selected, anchored)
 
 /*  The figure a `shape` node wears: the node's own, then the
  *  topic's default (the node properties popover writes both), then
- *  a square.  */
+ *  a circle.  */
 function node_figure_of(gobj, desc, geometry)
 {
     let shape = geometry? geometry.node_shape : null;
@@ -2447,13 +2488,14 @@ function figure_shape_of(gobj, desc, record, geometry, flags)
     let fill = dark? mix_colors(paint.fill, 0.25, "#2c3542")
                    : mix_colors(paint.fill, 0.10, "#ffffff");
     let stroke = dark? mix_colors(paint.fill, 0.85, "#ffffff") : paint.fill;
-    let line_width = 2;
+    /*  The card's and the pill's line width, 1 unless somebody chose
+     *  another: the three views of a record wear the same outline.  */
+    let line_width = paint.lineWidth;
     /*  A paint somebody CHOSE (a node's or a topic's own, saved in
      *  `__graphs__`) is not ours to reinterpret: it comes through as
      *  it was chosen.  */
     if(paint.stroke !== getStrokeColor(paint.fill)) {
         stroke = paint.stroke;
-        line_width = Math.max(paint.lineWidth, 2);
     }
     if(f.selected) {
         stroke = SELECT_RING;
@@ -6804,6 +6846,7 @@ function show_node_popover(gobj)
     shapeSelect.value = nodeData.data && nodeData.data.desc
         ? node_figure_of(gobj, nodeData.data.desc, nodeData.data.graph_props || {})
         : DEFAULT_NODE_SHAPE;
+    let orig_figure = shapeSelect.value;
 
     // Apply-to scope
     create_form_label(popover, 'apply to');
@@ -6832,7 +6875,10 @@ function show_node_popover(gobj)
                     strokeInput.value,
                     parseInt(lwInput.value) || 1,
                     scopeSelect.value,
-                    shapeSelect.value
+                    /*  Only a figure somebody CHOSE is written: the
+                     *  one the select opened on is today's default,
+                     *  and saving it would freeze it on the node.  */
+                    (shapeSelect.value !== orig_figure)? shapeSelect.value : ""
                 );
             },
         },
@@ -8341,7 +8387,9 @@ function build_context_menu_items(gobj, e)
             gobj, node_id, canvasPoint[0], canvasPoint[1]
         );
 
-        if(port_key) {
+        /*  A port's commands are edition commands; out of edition a
+         *  port is part of its node, and gets the node's menu.  */
+        if(port_key && priv.edit_mode) {
             priv._context_port_key = port_key;
             return build_port_context_menu(gobj, node_id, port_key);
         } else {
@@ -8411,18 +8459,30 @@ function build_port_context_menu(gobj, node_id, port_key)
         items.push(ctx_item('g6-icon-edit', t('port properties'), 'port_properties'));
         items.push(ctx_item('g6-icon-resize', t('resize all ports'), 'resize_all_ports'));
         items.push(ctx_item('g6-icon-resize', t('resize topic ports'), 'resize_topic_ports'));
+        /*  The way back from the popover and the two above: the
+         *  library's own shape and radius.  */
+        items.push(ctx_item('g6-icon-undo', t('reset port'), 'reset_port'));
+        items.push(ctx_item('g6-icon-undo', t('reset topic ports'), 'reset_topic_ports'));
+        items.push(ctx_item('g6-icon-undo', t('reset all ports'), 'reset_all_ports'));
     }
 
     return items;
 }
 
 /************************************************************
- *  Build edge context menu items (prepared for expansion).
+ *  Build edge context menu items: the two floating icons of a
+ *  selected edge, for a right click and for a finger.
  ************************************************************/
 function build_edge_context_menu(gobj)
 {
     let items = [];
-    // Future: add edge-specific actions here
+
+    if(gobj.priv.edit_mode) {
+        inject_svg_icons();
+        items.push(ctx_item('g6-icon-edit', t('edge properties'), 'edge_properties'));
+        items.push(ctx_item('g6-icon-delete', t('unlink'), 'unlink_edge'));
+    }
+
     return items;
 }
 
@@ -8463,6 +8523,32 @@ function handle_context_menu_click(gobj, value)
         case 'resize_topic_ports':
             copy_size_to_ports(gobj, true);
             break;
+        case 'reset_port':
+            reset_ports(gobj, 'this');
+            break;
+        case 'reset_topic_ports':
+            reset_ports(gobj, 'same_topic');
+            break;
+        case 'reset_all_ports':
+            reset_ports(gobj, 'all');
+            break;
+        case 'edge_properties':
+            if(priv._context_edge_id) {
+                deselect_node(gobj);
+                select_edge(gobj, priv._context_edge_id);
+                show_edge_popover(gobj);
+            }
+            break;
+        case 'unlink_edge':
+            if(priv._context_edge_id) {
+                deselect_node(gobj);
+                select_edge(gobj, priv._context_edge_id);
+                request_unlink_edge(gobj);
+            }
+            break;
+        default:
+            log_error(`${gobj_short_name(gobj)}: unknown context menu item: ${value}`);
+            break;
     }
 }
 
@@ -8630,6 +8716,99 @@ function reset_sizes(gobj, same_topic_only)
     });
 }
 
+/************************************************************
+ *  Forget the saved SHAPE and RADIUS of ports, back to the
+ *  library's own:
+ *      'this'          the port of the menu, on its node only
+ *      'same_topic'    every port of the node's topic, with the
+ *                      topic's port defaults
+ *      'all'           every port of every topic, likewise
+ *  The node sizes are not touched: that is `reset sizes`.
+ ************************************************************/
+function reset_ports(gobj, scope)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
+    let node_id = priv._context_node_id;
+    let port_key = priv._context_port_key;
+    let nd = node_id? graph.getNodeData(node_id) : null;
+    if(!nd || !nd.data || !nd.data.topic_name || !port_key) {
+        log_error(`${gobj_short_name(gobj)}: reset ports without a port`);
+        return;
+    }
+
+    const PORT_KEYS = ["portR", "port_sizes", "port_shapes", "port_shape"];
+    let strip_port = (props) => {
+        if(!is_object(props)) {
+            return;
+        }
+        for(let k of ["port_sizes", "port_shapes"]) {
+            if(is_object(props[k])) {
+                delete props[k][port_key];
+                if(Object.keys(props[k]).length === 0) {
+                    delete props[k];
+                }
+            }
+        }
+    };
+    let strip_all = (props) => {
+        if(!is_object(props)) {
+            return;
+        }
+        for(let k of PORT_KEYS) {
+            delete props[k];
+        }
+    };
+
+    let ids = [];
+    if(scope === 'this') {
+        strip_port(node_props_entry(gobj, nd));
+        strip_port(nd.data.graph_props);
+        if(nd.data.record) {
+            strip_port(nd.data.record._geometry);
+        }
+        ids.push(node_id);
+    } else {
+        let topic = (scope === 'same_topic')? nd.data.topic_name : "";
+
+        /*  The saved entries, on screen or folded away.  */
+        for(const [topic_name, props] of Object.entries(priv._graph_properties || {})) {
+            if(topic && topic_name !== topic) {
+                continue;
+            }
+            if(is_object(props.nodes)) {
+                for(let node_props of Object.values(props.nodes)) {
+                    strip_all(node_props);
+                }
+            }
+            strip_all(props.defaults);
+        }
+
+        /*  The nodes on screen: their own copy of the entry.  */
+        for(let n of (graph.getNodeData() || [])) {
+            if(!n || !n.data || !n.data.desc || is_more_node(n)) {
+                continue;
+            }
+            if(topic && n.data.topic_name !== topic) {
+                continue;
+            }
+            strip_all(n.data.graph_props);
+            if(n.data.record) {
+                strip_all(n.data.record._geometry);
+            }
+            ids.push(n.id);
+        }
+    }
+
+    reshape_nodes(gobj, ids);
+    graph.draw().then(() => {
+        update_port_resize_handles_position(gobj);
+        update_port_icon_position(gobj);
+        mark_graph_dirty(gobj);
+    });
+}
+
 /************************************************************
  *  Copy the selected port's radius to matching ports.
  *  If same_topic_only=true, only ports in same-topic nodes.