@yuneta/gobj-ui 7.15.0 → 7.16.0

package/README.md

@@ -708,6 +708,56 @@ 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

@@ -53747,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
 ***************************************************************/
@@ -53858,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: "",
@@ -54378,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":
@@ -55495,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;
@@ -55504,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(() => {
@@ -55519,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);
 		});
@@ -56811,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 }
@@ -56848,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 }
@@ -56890,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"})`;
@@ -56914,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;
@@ -56940,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";
@@ -56982,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;
@@ -57903,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) {
@@ -57917,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]);
@@ -58144,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,
@@ -58252,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],

package/dist/gobj-ui.es.js

@@ -53734,6 +53734,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
 ***************************************************************/
@@ -53845,6 +53846,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: "",
@@ -54365,9 +54367,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"));
+						gobj_send_event(gobj, "EV_BRUSH_SELECT", { ids }, gobj);
+					}
+				}
 			];
 			break;
 		case "operation":
@@ -55482,6 +55499,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) {
+		log_error(`${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;
@@ -55491,6 +55583,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(() => {
@@ -55506,12 +55599,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);
 		});
@@ -56798,33 +56896,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 }
@@ -56835,19 +56936,32 @@ function apply_node_highlight(gobj, prev_ids, next_ids) {
 		graph.updateNodeData(updates);
 		graph.draw();
 	} catch (e) {
-		log_error(`${gobj_short_name(gobj)}: cannot repaint the highlight: ${e}`);
+		log_error(`${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 }
@@ -56877,12 +56991,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"})`;
@@ -56901,7 +57032,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;
@@ -56927,7 +57058,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";
@@ -56969,7 +57100,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;
@@ -57890,6 +58021,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) {
@@ -57904,7 +58046,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]);
@@ -58131,6 +58274,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,
@@ -58239,6 +58387,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],

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -184,6 +184,15 @@ const GCLASS_NAME = "C_G6_NODES_TREE";
 const HIGHLIGHT_COLOR = "#f0a020";
 const HIGHLIGHT_HALO  = "rgba(240,160,32,0.35)";
 
+/*
+ *  The selection ring. Deliberately NOT the amber of the highlight:
+ *  a node can be a find match AND be selected, and two amber rings
+ *  would say nothing about either. Blue is what a selection is in
+ *  every editor, and the ring is drawn OUTSIDE the highlight's halo
+ *  so the two compose instead of overwriting one another.
+ */
+const SELECT_RING = "rgba(59,130,246,0.95)";
+
 /***************************************************************
  *  Internal layout and operation mode definitions
  ***************************************************************/
@@ -324,6 +333,10 @@ let PRIVATE_DATA = {
     _link_saved_styles: [],         // saved port styles to restore on cancel
     _focus_topic:       null,       // topic currently focused (EV_FOCUS_TOPIC)
     _focus_ids:         [],         // node ids carrying the focus 'active' state
+    _selected_paint_ids: [],        // node ids whose card is PAINTED selected
+                                    // (G6's 'selected' state is the selection
+                                    //  itself; this is what is on screen, and
+                                    //  it exists to diff the repaint)
     _pending_focus_topic: null,     // focus requested before data was loaded
     _pending_find:      null,       // find requested before data was loaded
     _layout_asked:      "",         // layout the host asked for at create (see mt_create)
@@ -1182,9 +1195,46 @@ function configure_behaviour(gobj)
         case "edition":
             priv.edit_mode = true;
             behaviors = [
-                "drag-canvas",
+                /*  Panning gives way while Shift is held: that is the
+                 *  marquee's gesture, and G6 binds drag-canvas straight
+                 *  to the drag events, so without this the canvas pans
+                 *  under the rubber band.  */
+                {
+                    type: "drag-canvas",
+                    key: "drag-canvas",
+                    enable: (event) => !event.shiftKey,
+                },
                 "zoom-canvas",
+                /*  Moves EVERY node in the `selected` state, not just
+                 *  the one under the pointer, and wraps the whole move
+                 *  in one history batch -- so a group move is one drag
+                 *  and one undo. Nothing to configure: `selected` is
+                 *  already its default `state`.  */
                 "drag-element",
+                /*  Shift+drag on the canvas: the rubber band. The
+                 *  GESTURE is G6's, its RESULT enters the machine --
+                 *  `onSelect` fires before G6 writes the state, so the
+                 *  ids travel with the event and the action does not
+                 *  have to race it.  */
+                {
+                    type: "brush-select",
+                    key: "brush-select",
+                    trigger: ["shift"],
+                    enableElements: ["node"],
+                    /*  Left at G6's default (false): the set is read at
+                     *  pointerup, not on every pointermove. Each answer
+                     *  repaints the cards it touches, and doing that per
+                     *  frame of a rubber band over a hundred nodes is
+                     *  paid for nothing -- the band already shows what
+                     *  it covers.  */
+                    immediately: false,
+                    onSelect: (states) => {
+                        let ids = Object.keys(states || {}).filter(
+                            (id) => (states[id] || []).includes("selected")
+                        );
+                        gobj_send_event(gobj, "EV_BRUSH_SELECT", {ids: ids}, gobj);
+                    },
+                },
             ];
             break;
         case "operation":
@@ -2948,6 +2998,126 @@ function perform_history_op(gobj, is_redo)
     }
 }
 
+/************************************************************
+ *  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 [];      /* asked before there is a graph to ask */
+    }
+
+    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, 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 priv = gobj.priv;
+    let graph = priv.graph;
+
+    let next = [];
+    for(let id of (ids || [])) {
+        try {
+            if(graph.getNodeData(id)) {
+                next.push(id);
+            }
+        } catch(e) {
+            /*  An id the graph does not have: a brush answers with what
+             *  it enclosed, and a node can be gone by the time we ask.  */
+        }
+    }
+
+    deselect_node(gobj);        /* the state, the paint and the affordances */
+
+    if(!next.length) {
+        return;
+    }
+
+    history_pause(gobj);
+    try {
+        let states = {};
+        for(let id of next) {
+            states[id] = ['selected'];
+        }
+        graph.setElementState(states);
+    } catch(e) {
+        log_error(`${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;
+
+    /*  The union of the two views of the same thing. A brush clears
+     *  G6's state on pointerdown without telling anybody, so reading
+     *  only the state could drop a card that is on screen wearing a
+     *  ring.  */
+    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;
@@ -2962,6 +3132,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 and properties icon
     show_resize_handles(gobj);
@@ -2984,12 +3155,28 @@ function deselect_node(gobj)
     hide_delete_confirm(gobj);
     hide_unlink_confirm(gobj);
 
+    /*  Both views of the selection, because either can hold an id the
+     *  other lost: G6's state is what a drag moves, the painted set is
+     *  what the reader can see.  */
+    let clearing = 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);
@@ -4793,7 +4980,7 @@ 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;
@@ -4805,45 +4992,49 @@ function node_innerHTML_of(nd, theme, highlight)
     switch(desc.node_treedb_type) {
         case 'child':
             return build_chip_innerHTML(
-                desc.color, theme, record.icon, label, record.id, highlight
+                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
+                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
+                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 = new Set([...(prev_ids || []), ...next]);
-    if(touched.size === 0) {
+    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 nd = graph.getNodeData(id);
-        let html = node_innerHTML_of(nd, 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: id, style: {innerHTML: html}});
         }
@@ -4851,14 +5042,37 @@ function apply_node_highlight(gobj, prev_ids, next_ids)
     if(!updates.length) {
         return;
     }
+
     try {
         graph.updateNodeData(updates);
         graph.draw();
     } catch(e) {
-        log_error(`${gobj_short_name(gobj)}: cannot repaint the highlight: ${e}`);
+        log_error(`${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)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+    if(!graph) {
+        return;
+    }
+
+    let next = new Set(next_ids || []);
+    let touched = 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;
@@ -4871,10 +5085,13 @@ function refresh_html_nodes_theme(gobj, theme)
      *  rebuilt every card without it would silently CLEAR the focus or the
      *  find that is on screen. Carry it across. */
     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: id, style: {innerHTML: html}});
         }
@@ -4913,13 +5130,42 @@ function refresh_default_edges_theme(gobj, theme)
     }
 }
 
+/************************************************************
+ *  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");
@@ -4950,7 +5196,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;
@@ -4977,7 +5223,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");
@@ -5040,7 +5286,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;
@@ -6477,6 +6723,20 @@ 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
  ************************************************************/
@@ -6495,7 +6755,13 @@ function ac_node_click(gobj, event, kw, src)
                 record: nodedata.data.record
             });
 
-            if(priv.edit_mode) {
+            if(priv.edit_mode && kw.evt.shiftKey) {
+                /*  Shift+click extends the selection, the way it does
+                 *  everywhere. It never looks for a port: a port is a
+                 *  one-node affordance, and this gesture is about the
+                 *  set.  */
+                toggle_in_selection(gobj, node_id);
+            } else if(priv.edit_mode) {
                 // Check if click hits a port
                 // Convert client coords to viewport (container-relative) then to canvas
                 let containerRect = priv.$container.getBoundingClientRect();
@@ -6782,6 +7048,7 @@ function create_gclass(gclass_name)
             ["EV_NODE_CONTEXT_MENU",        ac_node_context_menu,   null],
             ["EV_CANVAS_CLICK",             ac_canvas_click,        null],
             ["EV_NODE_DRAG_END",            ac_node_drag_end,       null],
+            ["EV_BRUSH_SELECT",             ac_brush_select,        null],
 
             /*--- Toolbar events ---*/
             ["EV_ZOOM_IN",                  ac_zoom_in,             null],
@@ -6826,6 +7093,7 @@ function create_gclass(gclass_name)
         ["EV_NODE_CONTEXT_MENU",        0],
         ["EV_CANVAS_CLICK",             0],
         ["EV_NODE_DRAG_END",            0],
+        ["EV_BRUSH_SELECT",             0],
 
         /*--- Toolbar (internal) ---*/
         ["EV_ZOOM_IN",                  0],