@yuneta/gobj-ui 7.14.3 → 7.16.0

package/README.md

@@ -668,6 +668,96 @@ Two implementation notes worth keeping:
   still arrive from a keyboard path or a form that outlived the flag, and an
   ignored write is exactly the behaviour this whole change exists to stop.
 
+### The graph's viewport toolbar
+
+`C_G6_NODES_TREE` floats a vertical toolbar over the canvas:
+
+| control | what it does |
+|---|---|
+| zoom in / zoom out | one step of scale |
+| **the zoom level** | a readout, not a button — `85%` |
+| ── | |
+| fit | `fitView()`: the whole graph in the viewport |
+| **`1:1`** | `zoomTo(1)`: actual size |
+| ── | |
+| full screen | the container, not the camera |
+
+Two of those rows are the answer to a real complaint, and the reasoning
+generalises:
+
+- **`1:1` used to be a house**, and the house was the thing people reached for
+  when they wanted the graph back. It never gave it to them: the action is
+  `zoomTo(1)`, which sets the **scale** and leaves the camera where it was, so
+  from a corner of a large graph it answered with the same corner at 100%. A
+  house means *the initial extent* in a map and *the starting view* in an
+  editor — never a scale — and this one sat directly under `fit`, so the pair
+  read as two ways to do one thing. Actual size is **written** in every editor
+  that offers it, because there is no glyph anybody recognises for it.
+- **the zoom level is shown** because `1:1` is a jump to a number, and a jump
+  to a number is only meaningful next to the number you are on.
+
+The **separators are gaps, not lines**: every item already carries a hairline
+against its neighbour, so one more line would not group anything. Full screen
+is behind the second one because it is a window control that happens to live in
+a camera toolbar.
+
+Both toolbars (this one and the edit one) **follow the theme**. They used to be
+pinned to a light background in both themes, with the icon colour pinned dark
+so it survived that — two light islands over a dark canvas.
+
+**New keys for consumers: `actual size`, `zoom level`** (both tooltips, so a
+host that has not defined them shows the key on hover and nothing else breaks).
+
+### Selecting several nodes, and moving them together
+
+In **edition** mode the graph has a real selection, not just "the node you
+clicked":
+
+| gesture | what it does |
+|---|---|
+| click a node | selects it **and opens it**: resize handles, ports, popovers |
+| **shift + click** | adds that node to the selection, or takes it out |
+| **shift + drag on the canvas** | rubber band: the selection becomes what it enclosed |
+| drag any selected node | **moves the whole selection**, as one undo |
+| click the canvas | clears it |
+
+Three decisions are worth knowing, because each one is where this could have
+gone wrong:
+
+- **G6's `selected` element state IS the selection.** `drag-element` decides
+  what a drag moves by asking the graph for it
+  (`getElementDataByState('node', 'selected')`), so a set kept anywhere else
+  would be a second truth the drag never consults — the ring would say five and
+  one would move. It also batches the move, so a group drag is one history
+  entry rather than one per node.
+
+- **The ring is painted into the card's own html**, and it had to be. A state
+  style paints on a node's KEY SHAPE, and every node here is an `html` node
+  whose key shape is a DOM element — the same reason the amber highlight had
+  never appeared before `7.3.0`. Selecting with `brush-select` and nothing else
+  would have selected correctly and shown **nothing**. The ring is blue and
+  drawn OUTSIDE the amber halo, so a node that is both a find match and
+  selected wears both; one function composes them (`ring_shadow`), because
+  before it each repaint wrote its own flag and erased the other's.
+
+- **The gesture is G6's, the result is an event.** `brush-select` gets an
+  `onSelect` that sends `EV_BRUSH_SELECT` with the ids, and the action does the
+  work — so a marquee shows up in the `machine` trace like every other action.
+  Shift+click is not G6's `click-select` at all: this gclass already owns
+  `EV_NODE_CLICK`, and adding a second selection owner outside the FSM is how
+  the two end up disagreeing.
+
+Panning gives way while **Shift** is held (`drag-canvas` takes an `enable`
+predicate), or the canvas would pan under the rubber band — G6 binds
+`drag-canvas` straight to the drag events, and its own docs warn that the two
+gestures cannot both be a plain drag.
+
+**A marquee selects, it does not open.** Even when it encloses exactly one
+node, the handles and ports stay away: `_selected_node_id` means *the node
+opened for editing*, and only a click sets it. Everything that hangs off a
+single node reads that field, so a multiple selection puts all of it away by
+construction rather than by a check in twenty places.
+
 ### Finding a node in the graph
 
 `C_YUI_TREEDB_GRAPH` carries a find box in the middle of its toolbar. It

package/dist/gobj-ui.cjs.js

@@ -53702,11 +53702,22 @@ function inject_svg_icons() {
 ***********************************************************************/
 /***************************************************************
 *  YuiToolbar — G6 Toolbar subclass that adds per-item className
-*  and disabled support.
+*  and disabled support, plus three item kinds G6 does not have.
 *
 *  Each item in getItems() may carry:
 *    className  — CSS class added to the div (e.g. 'EV_SAVE_GRAPH')
 *    disabled   — boolean; sets the 'disabled' attribute initially
+*    text       — render this text instead of a sprite symbol; a
+*                 label is the only readable way to say `1:1`, and
+*                 every editor that offers actual-size writes it
+*    readout    — a text item that REPORTS instead of acting (the
+*                 zoom level); it is not a button
+*    separator  — a group divider, not an item
+*
+*  The base class fires onClick only for elements whose class list
+*  contains `g6-toolbar-item`, so a separator and a readout carry
+*  their own class and are inert by construction, with no guard in
+*  the click handler.
 *
 *  With className set to the event name, the lib_graph.js state
 *  functions (set_submit_state, disableElements, …) work on toolbar
@@ -53716,9 +53727,15 @@ function inject_svg_icons() {
 var YuiToolbar = class extends _antv_g6.Toolbar {
 	async getDOMContent() {
 		return (await this.options.getItems()).map((item) => {
+			if (item.separator) return `<div class="g6-toolbar-sep" aria-hidden="true"></div>`;
 			const extra_class = item.className ? ` ${item.className}` : "";
+			const title = item.title ?? "";
+			if (item.readout) return `<div class="g6-toolbar-readout${extra_class}" title="${title}" aria-label="${title}">${item.text ?? ""}</div>`;
 			const disabled = item.disabled ? " disabled" : "";
-			return `<div class="g6-toolbar-item${extra_class}" value="${item.value}" title="${item.title ?? ""}"${disabled}><svg aria-hidden="true" focusable="false"><use xlink:href="#${item.id}"></use></svg></div>`;
+			const is_text = item.text !== void 0;
+			const kind_class = is_text ? " g6-toolbar-item-text" : "";
+			const body = is_text ? `<span class="g6-toolbar-text">${item.text}</span>` : `<svg aria-hidden="true" focusable="false"><use xlink:href="#${item.id}"></use></svg>`;
+			return `<div class="g6-toolbar-item${kind_class}${extra_class}" value="${item.value}" title="${title}" aria-label="${title}"${disabled}>${body}</div>`;
 		}).join("");
 	}
 };
@@ -53730,6 +53747,7 @@ ensure_drag_canvas_patch();
 var GCLASS_NAME$1 = "C_G6_NODES_TREE";
 var HIGHLIGHT_COLOR = "#f0a020";
 var HIGHLIGHT_HALO = "rgba(240,160,32,0.35)";
+var SELECT_RING = "rgba(59,130,246,0.95)";
 /***************************************************************
 *  Internal layout and operation mode definitions
 ***************************************************************/
@@ -53841,6 +53859,7 @@ var PRIVATE_DATA$1 = {
 	_link_saved_styles: [],
 	_focus_topic: null,
 	_focus_ids: [],
+	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_find: null,
 	_layout_asked: "",
@@ -54063,6 +54082,7 @@ function configure_events(gobj) {
 		update_edge_icon_position(gobj);
 		update_node_icon_position(gobj);
 		update_link_icon_position(gobj);
+		update_zoom_readout(gobj);
 	});
 	priv._on_language_changed = () => {
 		update_toolbar(gobj);
@@ -54128,6 +54148,59 @@ function update_toolbar(gobj) {
 	configure_toolbar_edit(gobj);
 	if (graph_get_plugin(gobj, "toolbar-edit")) graph.updatePlugin({ key: "toolbar-edit" });
 }
+/************************************************************
+*  The floating toolbars follow the theme.
+*
+*  They used to be pinned to a light background in BOTH themes,
+*  with the icon colour pinned dark so it survived that -- two
+*  light islands sitting over a dark canvas. The tokens do the
+*  flipping now; the fallbacks are the old forced-light values, so
+*  a host without Bulma gets exactly what it had.
+************************************************************/
+function toolbar_style(extra) {
+	return Object.assign({
+		backgroundColor: "var(--bulma-scheme-main, #f5f5f5)",
+		color: "var(--bulma-text-strong, #333)",
+		padding: "8px",
+		boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+		borderRadius: "8px",
+		border: "1px solid var(--bulma-border-weak, #e8e8e8)",
+		opacity: "0.85"
+	}, extra || {});
+}
+/************************************************************
+*  The zoom level as a percentage, the way every editor that
+*  shows one writes it. Empty while the graph cannot be asked --
+*  the toolbar is built before the first draw, and a viewport
+*  that does not exist yet has no zoom to report.
+************************************************************/
+function zoom_percent_text(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph || typeof graph.getZoom !== "function") return "";
+	let zoom;
+	try {
+		zoom = graph.getZoom();
+	} catch (e) {
+		return "";
+	}
+	if (!zoom) return "";
+	return `${Math.round(zoom * 100)}%`;
+}
+/************************************************************
+*  Repaint the zoom readout in place.
+*
+*  The text node is patched instead of re-rendering the plugin:
+*  the readout follows the wheel, and updatePlugin() rebuilds the
+*  whole toolbar's innerHTML -- which would also drop the disabled
+*  state of the edit buttons on every notch of the wheel.
+************************************************************/
+function update_zoom_readout(gobj) {
+	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	if (!$container) return;
+	let $readout = $container.querySelector(".G6_ZOOM_LEVEL");
+	if (!$readout) return;
+	$readout.textContent = zoom_percent_text(gobj);
+}
 function configure_toolbar(gobj) {
 	let priv = gobj.priv;
 	let toolbar_position = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "toolbar_position") || "top-left";
@@ -54136,17 +54209,10 @@ function configure_toolbar(gobj) {
 		type: "yui-toolbar",
 		className: "g6-toolbar-large",
 		position: toolbar_position,
-		style: {
-			backgroundColor: "#f5f5f5",
-			color: "#333",
-			padding: "8px",
-			boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-			borderRadius: "8px",
-			border: "1px solid #e8e8e8",
-			opacity: "0.85",
+		style: toolbar_style({
 			marginTop: "12px",
 			marginLeft: "12px"
-		},
+		}),
 		getItems: () => {
 			let items = [
 				{
@@ -54161,6 +54227,13 @@ function configure_toolbar(gobj) {
 					className: "EV_ZOOM_OUT",
 					title: (0, i18next.t)("zoom out")
 				},
+				{
+					readout: true,
+					className: "G6_ZOOM_LEVEL",
+					text: zoom_percent_text(gobj),
+					title: (0, i18next.t)("zoom level")
+				},
+				{ separator: true },
 				{
 					id: "g6-icon-fit",
 					value: "auto-fit",
@@ -54168,13 +54241,14 @@ function configure_toolbar(gobj) {
 					title: (0, i18next.t)("auto fit")
 				},
 				{
-					id: "g6-icon-home",
+					text: "1:1",
 					value: "reset",
 					className: "EV_ZOOM_RESET",
-					title: (0, i18next.t)("reset zoom")
+					title: (0, i18next.t)("actual size")
 				}
 			];
 			if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_fullscreen")) {
+				items.push({ separator: true });
 				if (priv.is_fullscreen) items.push({
 					id: "g6-icon-fullscreen-exit",
 					value: "exit-fullscreen",
@@ -54230,15 +54304,7 @@ function configure_toolbar_edit(gobj) {
 		type: "yui-toolbar",
 		className: "g6-toolbar-large",
 		position: "left-top",
-		style: {
-			backgroundColor: "#f5f5f5",
-			color: "#333",
-			padding: "8px",
-			boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-			borderRadius: "8px",
-			border: "1px solid #e8e8e8",
-			opacity: "0.85"
-		},
+		style: toolbar_style(),
 		getItems: () => {
 			return [
 				{
@@ -54314,9 +54380,24 @@ function configure_behaviour(gobj) {
 		case "edition":
 			priv.edit_mode = true;
 			behaviors = [
-				"drag-canvas",
+				{
+					type: "drag-canvas",
+					key: "drag-canvas",
+					enable: (event) => !event.shiftKey
+				},
 				"zoom-canvas",
-				"drag-element"
+				"drag-element",
+				{
+					type: "brush-select",
+					key: "brush-select",
+					trigger: ["shift"],
+					enableElements: ["node"],
+					immediately: false,
+					onSelect: (states) => {
+						let ids = Object.keys(states || {}).filter((id) => (states[id] || []).includes("selected"));
+						(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_BRUSH_SELECT", { ids }, gobj);
+					}
+				}
 			];
 			break;
 		case "operation":
@@ -55431,6 +55512,81 @@ function perform_history_op(gobj, is_redo) {
 		sync_history_to_backend(gobj, cmd ? cmd.original : null);
 	}
 }
+/************************************************************
+*  The selection.
+*
+*  G6's `selected` element state IS the selection: `drag-element`
+*  reads it (`getElementDataByState`) to decide what a drag moves,
+*  so keeping the set anywhere else would be a second truth the
+*  drag does not consult. What this gclass keeps is what is
+*  PAINTED -- an html node draws no state style at all (its key
+*  shape is a DOM element), so the ring lives in the card's own
+*  html, exactly like the find highlight, and the painted set
+*  exists to diff the repaint.
+************************************************************/
+function selected_node_ids(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph) return [];
+	let data;
+	try {
+		data = graph.getElementDataByState("node", "selected") || [];
+	} catch (e) {
+		return [];
+	}
+	return data.map((nd) => nd.id);
+}
+/************************************************************
+*  Move the ring to these nodes and off the ones that had it.
+************************************************************/
+function paint_selection(gobj, ids) {
+	let priv = gobj.priv;
+	let prev = priv._selected_paint_ids || [];
+	let next = ids || [];
+	priv._selected_paint_ids = next;
+	repaint_cards(gobj, /* @__PURE__ */ new Set([...prev, ...next]));
+}
+/************************************************************
+*  Select a SET of nodes: what a marquee and a shift-click do.
+*
+*  It leaves `_selected_node_id` null even for a set of one,
+*  because that field is not "the selection", it is "the node
+*  opened for editing" -- the resize handles, the ports and the
+*  popovers hang off it, and none of them means anything over a
+*  set. Clicking a node is what opens one (`select_node`); a
+*  marquee selects, it does not open.
+************************************************************/
+function set_selection(gobj, ids) {
+	let graph = gobj.priv.graph;
+	let next = [];
+	for (let id of ids || []) try {
+		if (graph.getNodeData(id)) next.push(id);
+	} catch (e) {}
+	deselect_node(gobj);
+	if (!next.length) return;
+	history_pause(gobj);
+	try {
+		let states = {};
+		for (let id of next) states[id] = ["selected"];
+		graph.setElementState(states);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot set the selection: ${e}`);
+	}
+	paint_selection(gobj, next);
+	graph_draw(gobj).then(() => {
+		history_resume(gobj);
+	});
+}
+/************************************************************
+*  Add a node to the selection, or take it out of it.
+************************************************************/
+function toggle_in_selection(gobj, node_id) {
+	let priv = gobj.priv;
+	let current = new Set(selected_node_ids(gobj));
+	for (let id of priv._selected_paint_ids || []) current.add(id);
+	if (current.has(node_id)) current.delete(node_id);
+	else current.add(node_id);
+	set_selection(gobj, [...current]);
+}
 function select_node(gobj, node_id) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
@@ -55440,6 +55596,7 @@ function select_node(gobj, node_id) {
 		graph.setElementState(node_id, ["selected"]);
 	} catch (e) {}
 	priv._selected_node_id = node_id;
+	paint_selection(gobj, [node_id]);
 	show_resize_handles(gobj);
 	show_node_icon(gobj);
 	graph_draw(gobj).then(() => {
@@ -55455,12 +55612,17 @@ function deselect_node(gobj) {
 	hide_node_popover(gobj);
 	hide_delete_confirm(gobj);
 	hide_unlink_confirm(gobj);
-	if (priv._selected_node_id) {
+	let clearing = /* @__PURE__ */ new Set([...selected_node_ids(gobj), ...priv._selected_paint_ids || []]);
+	if (priv._selected_node_id) clearing.add(priv._selected_node_id);
+	if (clearing.size) {
 		history_pause(gobj);
 		try {
-			graph.setElementState(priv._selected_node_id, []);
+			let states = {};
+			for (let id of clearing) states[id] = [];
+			graph.setElementState(states);
 		} catch (e) {}
 		priv._selected_node_id = null;
+		paint_selection(gobj, []);
 		graph_draw(gobj).then(() => {
 			history_resume(gobj);
 		});
@@ -56747,33 +56909,36 @@ function refresh_minimap(gobj) {
 *  same three-way choice — it lived inline in the theme refresh and is
 *  shared now. Returns null for a node that carries no desc.
 ************************************************************/
-function node_innerHTML_of(nd, theme, highlight) {
+function node_innerHTML_of(nd, theme, highlight, selected) {
 	if (!nd || !nd.data || !nd.data.desc) return null;
 	let desc = nd.data.desc;
 	let record = nd.data.record || {};
 	let label = node_label(desc, record);
 	switch (desc.node_treedb_type) {
-		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight);
-		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight);
-		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight);
+		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight, selected);
+		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected);
+		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected);
 	}
 	return null;
 }
 /************************************************************
-*  Repaint the cards whose highlight state CHANGES: the ones that had it
-*  and lose it, plus the ones that gain it. Only those — a treedb graph
-*  is redrawn per keystroke of the find box otherwise.
+*  Repaint these cards with the flags they carry RIGHT NOW.
+*
+*  One place, because the flags are independent and each used to
+*  be written by whoever repainted last: a find that repainted its
+*  matches erased the selection ring off them, and a selection
+*  repainted over a match erased the amber. Both are read here
+*  from where they live.
 ************************************************************/
-function apply_node_highlight(gobj, prev_ids, next_ids) {
+function repaint_cards(gobj, ids) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
-	if (!graph) return;
-	let next = new Set(next_ids || []);
-	let touched = /* @__PURE__ */ new Set([...prev_ids || [], ...next]);
-	if (touched.size === 0) return;
+	if (!graph || !ids || !ids.size) return;
+	let focus = new Set(priv._focus_ids || []);
+	let selected = new Set(priv._selected_paint_ids || []);
 	let updates = [];
-	for (let id of touched) {
-		let html = node_innerHTML_of(graph.getNodeData(id), priv.theme, next.has(id));
+	for (let id of ids) {
+		let html = node_innerHTML_of(graph.getNodeData(id), priv.theme, focus.has(id), selected.has(id));
 		if (html !== null) updates.push({
 			id,
 			style: { innerHTML: html }
@@ -56784,19 +56949,32 @@ function apply_node_highlight(gobj, prev_ids, next_ids) {
 		graph.updateNodeData(updates);
 		graph.draw();
 	} catch (e) {
-		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot repaint the highlight: ${e}`);
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot repaint the cards: ${e}`);
 	}
 }
+/************************************************************
+*  Repaint the cards whose highlight state CHANGES: the ones that had it
+*  and lose it, plus the ones that gain it. Only those — a treedb graph
+*  is redrawn per keystroke of the find box otherwise.
+************************************************************/
+function apply_node_highlight(gobj, prev_ids, next_ids) {
+	if (!gobj.priv.graph) return;
+	let next = new Set(next_ids || []);
+	let touched = /* @__PURE__ */ new Set([...prev_ids || [], ...next]);
+	if (touched.size === 0) return;
+	repaint_cards(gobj, touched);
+}
 function refresh_html_nodes_theme(gobj, theme) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	if (!graph) return;
 	let nodes = graph.getData().nodes || [];
 	let highlighted = new Set(priv._focus_ids || []);
+	let selected = new Set(priv._selected_paint_ids || []);
 	let updates = [];
 	for (let i = 0; i < nodes.length; i++) {
 		let id = nodes[i].id;
-		let html = node_innerHTML_of(graph.getNodeData(id), theme, highlighted.has(id));
+		let html = node_innerHTML_of(graph.getNodeData(id), theme, highlighted.has(id), selected.has(id));
 		if (html !== null) updates.push({
 			id,
 			style: { innerHTML: html }
@@ -56826,12 +57004,29 @@ function refresh_default_edges_theme(gobj, theme) {
 	if (updates.length > 0) graph.updateEdgeData(updates);
 }
 /************************************************************
+*  The rings a card can wear, composed into one `box-shadow`.
+*
+*  A node can be a find match and be selected at the same time, so
+*  neither ring may be written by overwriting the other: the amber
+*  halo hugs the card and the blue selection ring is drawn outside
+*  it, which is also the order that reads correctly when only one
+*  of them is on.
+************************************************************/
+function ring_shadow(highlight, selected, base_shadow) {
+	let rings = [];
+	if (highlight) rings.push(`0 0 0 4px ${HIGHLIGHT_HALO}`);
+	if (selected) rings.push(`0 0 0 ${highlight ? "7px" : "3px"} ${SELECT_RING}`);
+	if (base_shadow) rings.push(base_shadow);
+	if (!rings.length) return "";
+	return `box-shadow: ${rings.join(", ")};`;
+}
+/************************************************************
 *  Build innerHTML for pure-child (leaf) nodes: a compact
 *  chip-card. Same colour/typography family as the entity card
 *  but lighter (1px border, no shadow, single line). The name is
 *  always legible (ellipsis + native title tooltip on overflow).
 ************************************************************/
-function build_chip_innerHTML(color, theme, icon, label, key, highlight) {
+function build_chip_innerHTML(color, theme, icon, label, key, highlight, selected) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let bg = dark ? `color-mix(in srgb, ${color} 30%, #2c3542)` : `color-mix(in srgb, ${color} 10%, ${dark ? "#1b2230" : "#ffffff"})`;
@@ -56850,7 +57045,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight) {
     height: 100%;
     background: ${bg};
     border: ${highlight ? "3px" : "1px"} solid ${border};
-    ${highlight ? `box-shadow: 0 0 0 4px ${HIGHLIGHT_HALO};` : ""}
+    ${ring_shadow(highlight, selected, "")}
     border-radius: 8px;
     color: ${text_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -56876,7 +57071,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight) {
 *  colour is kept (per-topic differentiation) but softened via
 *  color-mix instead of a harsh saturated fill. Theme-aware.
 ************************************************************/
-function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight) {
+function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight, selected) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let surface = dark ? "#1b2230" : "#ffffff";
@@ -56918,7 +57113,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
     background: ${bg};
     border: ${highlight ? "3px" : "1.5px"} ${border_style} ${border};
     border-radius: 10px;
-    box-shadow: ${highlight ? `0 0 0 4px ${HIGHLIGHT_HALO}, ${shadow}` : shadow};
+    ${ring_shadow(highlight, selected, shadow)}
     color: ${title_color};
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     display: flex;
@@ -57839,6 +58034,17 @@ function ac_node_drag_end(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The rubber band let go: these are the nodes it enclosed.
+*
+*  They arrive in the kw because `onSelect` runs BEFORE G6 writes
+*  the state, so asking the graph here would answer the previous
+*  selection.
+************************************************************/
+function ac_brush_select(gobj, event, kw, src) {
+	set_selection(gobj, kw && kw.ids || []);
+	return 0;
+}
+/************************************************************
 *  Node click - publish vertex clicked event
 ************************************************************/
 function ac_node_click(gobj, event, kw, src) {
@@ -57853,7 +58059,8 @@ function ac_node_click(gobj, event, kw, src) {
 				topic_name: nodedata.data.desc.topic_name,
 				record: nodedata.data.record
 			});
-			if (priv.edit_mode) {
+			if (priv.edit_mode && kw.evt.shiftKey) toggle_in_selection(gobj, node_id);
+			else if (priv.edit_mode) {
 				let containerRect = priv.$container.getBoundingClientRect();
 				let canvasPoint = graph.getCanvasByViewport([kw.evt.client.x - containerRect.left, kw.evt.client.y - containerRect.top]);
 				let port_key = detect_port_click(gobj, node_id, canvasPoint[0], canvasPoint[1]);
@@ -58080,6 +58287,11 @@ function create_gclass$1(gclass_name) {
 			ac_node_drag_end,
 			null
 		],
+		[
+			"EV_BRUSH_SELECT",
+			ac_brush_select,
+			null
+		],
 		[
 			"EV_ZOOM_IN",
 			ac_zoom_in,
@@ -58188,6 +58400,7 @@ function create_gclass$1(gclass_name) {
 		["EV_NODE_CONTEXT_MENU", 0],
 		["EV_CANVAS_CLICK", 0],
 		["EV_NODE_DRAG_END", 0],
+		["EV_BRUSH_SELECT", 0],
 		["EV_ZOOM_IN", 0],
 		["EV_ZOOM_OUT", 0],
 		["EV_ZOOM_RESET", 0],