@yuneta/gobj-ui 7.23.9 → 7.23.11

package/README.md

@@ -877,11 +877,19 @@ a card with a border sitting on the graph). Above that width nothing changes.
 
 **New keys for consumers: `show toolbar`, `hide toolbar`.**
 
-What is still desktop-only, deliberately: **multi-selection**. `brush-select`
-is bound to `shift`, and `drag-canvas` stands aside for the same key — there
-is no shift on a phone, and giving the rubber band a touch gesture means
-taking one away from panning. Selecting nodes one at a time works on a phone;
-selecting a region does not.
+**Multi-selection reaches a finger through a MODE, not through a gesture**
+(`7.23.11`). Both halves of it — shift+click to add a card, shift+drag for the
+rubber band — hang off a key a phone does not have, and there is no spare
+gesture to give them: G6 binds panning and the band to the same plain drag, so
+one of the two has to stand aside. The edit toolbar carries a **selection
+mode** toggle (the dashed marquee, next to `+`): while it is on, a tap picks a
+card and a drag on the background draws the band, and panning is what stands
+aside. It is deliberately a button and not a heuristic — the toolbar says which
+of the two the graph is listening for, and turning it off gives the camera
+back. It is not device-specific: the same button spares a desktop reader the
+key. Leaving edition turns it off, and it is not persisted.
+
+**New key for consumers: `selection mode`.**
 
 ### Tabs opened at runtime, and the two decisions their url costs
 
@@ -928,6 +936,7 @@ clicked":
 | 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 |
+| the **selection mode** button | makes those two the PLAIN gestures — a tap picks, a canvas drag is the band — for as long as it is on (panning stands aside meanwhile) |
 | **ctrl/cmd + A** | every node |
 | the **fit-to-selection** button | puts the viewport on what is selected |
 | drag any selected node | **moves the whole selection**, as one undo |
@@ -964,12 +973,28 @@ gone wrong:
   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.
+  the two end up disagreeing. The band comes from `g6_brush_select_owned.js`,
+  a `brush-select` under our own id with ONE half removed: the built-in also
+  rewrites the `selected` state of every node and every edge on each canvas
+  click, behind the gclass and outside the history pause with which it sets
+  and clears the selection — a recorded command whose before and after are
+  identical, which is a lit Save on a graph nobody has touched (`7.23.10`).
+
+Panning gives way while **Shift** is held AND while the pointer is on a card
+(`drag-canvas` takes an `enable` predicate) — the first because the canvas
+would otherwise pan under the rubber band, the second because it would
+otherwise pan under the node being dragged. That second half is G6's own
+default, and an `enable` REPLACES the default rather than adding to it: while
+it was missing, a drag moved the card at twice the pointer and slid the whole
+graph underneath it (`7.23.10`).
+
+**Undo, Redo and Save are the history plugin, and it follows the MODE.** It is
+installed on entering edition and removed on leaving it — including when
+edition is reached through the mode selector on a graph whose data is already
+loaded, which is the ordinary way in. Before `7.23.10` it was installed at the
+arrival of the last topic of the load and only if the graph was in edition
+right then, so that ordinary way left the graph with dead Undo/Redo buttons
+and a `history_pause()` nothing answered, while Save still lit on its own.
 
 **A delete says what it takes, whether it is one or twenty.** The Delete key
 asks the same question the per-node delete icon asks, built by the same

package/dist/gobj-ui.cjs.js

@@ -47493,6 +47493,19 @@ var ICONS = `<svg xmlns="http://www.w3.org/2000/svg">
     <symbol id="g6-icon-toolbar-hide" viewBox="0 0 384 512">
         <path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
     </symbol>
+    <!-- dashed marquee (selection mode).
+         The band ITSELF, because that is what the button turns on: a
+         drag on the canvas draws one and a tap picks a card. Not the
+         fit-to-selection glyph next to it in the other toolbar -- that
+         one is solid brackets around a solid object and means "put the
+         camera on what is picked", which is the opposite end of the
+         gesture. Dashes: 16 segments of 59 with gaps of 36 over a
+         perimeter of 1520, so they land on the corners. -->
+    <symbol id="g6-icon-select-mode" viewBox="0 0 512 512">
+        <rect x="46" y="86" width="420" height="340" fill="none"
+            stroke="currentColor" stroke-width="40"
+            stroke-dasharray="59 36"/>
+    </symbol>
     <!-- floppy-disk (save) -->
     <symbol id="g6-icon-save" viewBox="0 0 448 512">
         <path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32L64 32zm32 96c0-17.7 14.3-32 32-32l160 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-160 0c-17.7 0-32-14.3-32-32l0-64zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>
@@ -47507,6 +47520,58 @@ function inject_svg_icons() {
 	document.body.appendChild(div);
 }
 //#endregion
+//#region src/g6_brush_select_owned.js
+/***********************************************************************
+*          g6_brush_select_owned.js
+*
+*          The rubber band, for a graph whose FSM owns the selection.
+*
+*          Why this exists
+*          ----------------
+*          G6 v5 `brush-select` does two things: it draws the band and
+*          it keeps the `selected` element state.  The second one is
+*          not ours to give away -- `C_G6_NODES_TREE` owns the
+*          selection, sets it in `set_selection()` and clears it in
+*          `deselect_node()`, both with the history recorder paused,
+*          because a selection is not an edit.
+*
+*          The built-in disagrees on one path: on EVERY canvas click
+*          it calls `clearElementsStates()`, which writes the state of
+*          every node and every edge of the graph -- whether or not
+*          any of them carried it -- outside our pause.  G6's history
+*          then records the redraw as a command whose `original` and
+*          `current` are identical: an undo entry that undoes nothing,
+*          and a Save button lit on a graph nobody has touched.  One
+*          click on the background was enough.
+*
+*          So this subclass drops that half and keeps the band.  The
+*          selection still clears on a canvas click -- through
+*          `EV_CANVAS_CLICK`, where the gclass has always cleared it.
+*
+*          Registered under its OWN id: the built-in `brush-select` is
+*          right for a graph that does not own its selection, and no
+*          other consumer of this library asked for this.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/************************************************************
+*  Same band, no state bookkeeping behind the gclass's back
+************************************************************/
+var BrushSelectOwned = class extends _antv_g6.BrushSelect {
+	clearElementsStates() {}
+};
+/************************************************************
+*  Register once, under our own id
+************************************************************/
+var BRUSH_SELECT_OWNED = "yui-brush-select";
+var __brush_select_registered__ = false;
+function ensure_brush_select_owned() {
+	if (__brush_select_registered__) return;
+	(0, _antv_g6.register)(_antv_g6.ExtensionCategory.BEHAVIOR, BRUSH_SELECT_OWNED, BrushSelectOwned);
+	__brush_select_registered__ = true;
+}
+//#endregion
 //#region src/c_g6_nodes_tree.js
 /***********************************************************************
 *          c_g6_nodes_tree.js
@@ -47565,6 +47630,7 @@ var YuiToolbar = class extends _antv_g6.Toolbar {
 };
 (0, _antv_g6.register)(_antv_g6.ExtensionCategory.PLUGIN, "yui-toolbar", YuiToolbar);
 ensure_drag_canvas_patch();
+ensure_brush_select_owned();
 ensure_pinch_zoom_patch();
 /***************************************************************
 *              Constants
@@ -47689,6 +47755,7 @@ var PRIVATE_DATA$4 = {
 	toolbar_collapsed: true,
 	_toolbars_could_collapse: null,
 	_on_focusout_restore: null,
+	selection_mode: false,
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_find: null,
@@ -48012,6 +48079,7 @@ function update_toolbar(gobj) {
 	configure_toolbar_edit(gobj);
 	if (graph_get_plugin(gobj, "toolbar-edit")) graph.updatePlugin({ key: "toolbar-edit" });
 	update_zoom_selection_button(gobj);
+	update_selection_mode_button(gobj);
 }
 /************************************************************
 *  The floating toolbars follow the theme.
@@ -48226,7 +48294,8 @@ function configure_toolbar(gobj) {
 *  Contains edit-mode buttons: Undo, Redo, Save
 ************************************************************/
 function configure_toolbar_edit(gobj) {
-	if (!gobj.priv.edit_mode || toolbars_collapsed(gobj)) {
+	let priv = gobj.priv;
+	if (!priv.edit_mode || toolbars_collapsed(gobj)) {
 		graph_remove_plugin(gobj, "toolbar-edit");
 		return;
 	}
@@ -48245,6 +48314,12 @@ function configure_toolbar_edit(gobj) {
 					className: "EV_CREATE_NODE_BTN color_create_state",
 					title: (0, i18next.t)("create node")
 				},
+				{
+					id: "g6-icon-select-mode",
+					value: "selection-mode",
+					className: "EV_TOGGLE_SELECTION_MODE" + (priv.selection_mode ? " color_active_state" : ""),
+					title: (0, i18next.t)("selection mode")
+				},
 				{
 					id: "g6-icon-save",
 					value: "save",
@@ -48273,6 +48348,9 @@ function configure_toolbar_edit(gobj) {
 				case "create-node":
 					toggle_create_popover(gobj);
 					break;
+				case "selection-mode":
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_SELECTION_MODE", {}, gobj);
+					break;
 				case "undo":
 					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_HISTORY_UNDO", {}, gobj);
 					break;
@@ -48315,14 +48393,19 @@ function configure_behaviour(gobj) {
 				{
 					type: "drag-canvas",
 					key: "drag-canvas",
-					enable: (event) => !event.shiftKey
+					enable: (event) => {
+						if (event.shiftKey || priv.selection_mode) return false;
+						if ("targetType" in event) return event.targetType === "canvas";
+						return true;
+					}
 				},
 				"zoom-canvas",
 				"drag-element",
 				{
-					type: "brush-select",
+					type: BRUSH_SELECT_OWNED,
 					key: "brush-select",
-					trigger: ["shift"],
+					trigger: priv.selection_mode ? [] : ["shift"],
+					enable: (event) => event.targetType === "canvas",
 					enableElements: ["node"],
 					immediately: false,
 					onSelect: (states) => {
@@ -48338,7 +48421,10 @@ function configure_behaviour(gobj) {
 			break;
 		default: (0, _yuneta_gobj_js.log_error)(`operation mode unknown: ${operation_mode}`);
 	}
-	if (!priv.edit_mode) deselect_node(gobj);
+	if (!priv.edit_mode) {
+		priv.selection_mode = false;
+		deselect_node(gobj);
+	}
 	graph_write_behaviors(gobj, behaviors);
 }
 /************************************************************
@@ -48904,6 +48990,30 @@ function history_resume(gobj) {
 	gobj.priv._history_paused = false;
 }
 /************************************************************
+*  The history plugin exists while the graph is in EDITION,
+*  and only there.
+*
+*  It used to be installed at one MOMENT -- the arrival of the
+*  last topic of the load -- and only if the graph happened to
+*  be in edition right then. Entering edition afterwards, which
+*  is the ordinary way in (the graph opens in reading and the
+*  mode selector is next to it), left no history at all: Undo
+*  and Redo were dead buttons that never even lit, `history_
+*  pause()` had no `beforeAddCommand` to answer, and the Save
+*  button was told the graph was dirty by `mark_graph_dirty()`
+*  alone -- which is why a move offered Save without Undo.
+*
+*  So it follows the MODE, and every place that changes the
+*  mode calls this.
+************************************************************/
+function sync_history_plugin(gobj) {
+	let priv = gobj.priv;
+	if (!priv.graph || !priv.graph_rendered) return;
+	if (priv.edit_mode) graph_add_plugin(gobj, "history");
+	else graph_remove_plugin(gobj, "history");
+	update_history_buttons(gobj);
+}
+/************************************************************
 *
 ************************************************************/
 function update_history_buttons(gobj) {
@@ -49194,6 +49304,7 @@ function graph_add_plugin(gobj, plugin_key, options) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	let plugin = graph_get_plugin(gobj, plugin_key);
+	let existed = !!plugin;
 	if (!plugin) {
 		let plugin_def = {
 			key: plugin_key,
@@ -49204,7 +49315,7 @@ function graph_add_plugin(gobj, plugin_key, options) {
 	}
 	plugin = graph_get_plugin(gobj, plugin_key);
 	switch (plugin_key) {
-		case "history": if (plugin) {
+		case "history": if (plugin && !existed) {
 			plugin.on(_antv_g6.HistoryEvent.CHANGE, () => {
 				update_history_buttons(gobj);
 			});
@@ -49639,6 +49750,21 @@ function update_zoom_selection_button(gobj) {
 	else disableElements($container, ".EV_ZOOM_SELECTION");
 }
 /************************************************************
+*  The selection mode is a state, so it has to LOOK like one.
+*
+*  Toggled on the element rather than re-rendered with the
+*  toolbar, for the same reason as the button above: a
+*  re-render rebuilds the innerHTML and drops what every OTHER
+*  button was told.
+************************************************************/
+function update_selection_mode_button(gobj) {
+	let priv = gobj.priv;
+	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	if (!$container) return;
+	if (!$container.querySelector(".EV_TOGGLE_SELECTION_MODE")) return;
+	set_active_state($container, ".EV_TOGGLE_SELECTION_MODE", priv.selection_mode);
+}
+/************************************************************
 *  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,
@@ -51935,8 +52061,7 @@ function ac_load_data(gobj, event, kw, src) {
 					if (auto_laid) graph_fit_readable(gobj).catch((e) => {
 						(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot fit the graph: ${e}`);
 					});
-					if (priv.edit_mode) graph_add_plugin(gobj, "history");
-					else graph_remove_plugin(gobj, "history");
+					sync_history_plugin(gobj);
 					if (priv._pending_focus_topic !== null) {
 						let ft = priv._pending_focus_topic;
 						priv._pending_focus_topic = null;
@@ -52238,6 +52363,41 @@ function ac_set_operation_mode$1(gobj, event, kw, src) {
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "operation_mode", kw.operation_mode);
 	configure_behaviour(gobj);
 	update_toolbar(gobj);
+	sync_history_plugin(gobj);
+	return 0;
+}
+/************************************************************
+*  Selection mode on/off, from the edit toolbar.
+*
+*  Shift is what the selection is built on, and a telephone has
+*  no Shift: the marquee and the add-to-selection click were a
+*  desktop feature by construction. This makes that key a MODE
+*  -- while it is on, a tap picks a card and a drag on the
+*  background draws the band, so the same two gestures are
+*  reachable with one finger.
+*
+*  It costs panning while it is on, and deliberately: G6 binds
+*  both to a plain drag, and a gesture cannot be two things.
+*  That is why it is a button and not a heuristic -- the reader
+*  turns it off to move the camera, and the toolbar says which
+*  of the two the graph is listening for.
+************************************************************/
+function ac_toggle_selection_mode(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (!priv.edit_mode) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: selection mode asked outside edition`);
+		return 0;
+	}
+	priv.selection_mode = !priv.selection_mode;
+	if (priv.selection_mode) {
+		deselect_port(gobj);
+		hide_node_icon(gobj);
+		hide_node_popover(gobj);
+		hide_resize_handles(gobj);
+		priv._selected_node_id = null;
+	}
+	configure_behaviour(gobj);
+	update_selection_mode_button(gobj);
 	return 0;
 }
 /************************************************************
@@ -52305,7 +52465,7 @@ function ac_node_click$2(gobj, event, kw, src) {
 				topic_name: nodedata.data.desc.topic_name,
 				record: nodedata.data.record
 			});
-			if (priv.edit_mode && kw.evt.shiftKey) toggle_in_selection(gobj, node_id);
+			if (priv.edit_mode && (kw.evt.shiftKey || priv.selection_mode)) 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]);
@@ -52603,6 +52763,11 @@ function create_gclass$4(gclass_name) {
 			ac_set_operation_mode$1,
 			null
 		],
+		[
+			"EV_TOGGLE_SELECTION_MODE",
+			ac_toggle_selection_mode,
+			null
+		],
 		[
 			"EV_SAVE_GRAPH",
 			ac_save_graph,
@@ -52677,6 +52842,7 @@ function create_gclass$4(gclass_name) {
 		["EV_FULLSCREEN", 0],
 		["EV_SET_LAYOUT", 0],
 		["EV_SET_OPERATION_MODE", 0],
+		["EV_TOGGLE_SELECTION_MODE", 0],
 		["EV_HISTORY_UNDO", 0],
 		["EV_HISTORY_REDO", 0],
 		["EV_SAVE_GRAPH", 0],

package/dist/gobj-ui.es.js

@@ -5,7 +5,7 @@ import { createJSONEditor } from "vanilla-jsoneditor";
 import { TabulatorFull } from "tabulator-tables";
 import * as maplibregl from "maplibre-gl";
 import uPlot from "uplot";
-import { BaseLayout, CanvasEvent, Circle, CommonEvent, DragCanvas, EdgeEvent, ExtensionCategory, Graph, HistoryEvent, NodeEvent, Toolbar, ZoomCanvas, register } from "@antv/g6";
+import { BaseLayout, BrushSelect, CanvasEvent, Circle, CommonEvent, DragCanvas, EdgeEvent, ExtensionCategory, Graph, HistoryEvent, NodeEvent, Toolbar, ZoomCanvas, register } from "@antv/g6";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -47480,6 +47480,19 @@ var ICONS = `<svg xmlns="http://www.w3.org/2000/svg">
     <symbol id="g6-icon-toolbar-hide" viewBox="0 0 384 512">
         <path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
     </symbol>
+    <!-- dashed marquee (selection mode).
+         The band ITSELF, because that is what the button turns on: a
+         drag on the canvas draws one and a tap picks a card. Not the
+         fit-to-selection glyph next to it in the other toolbar -- that
+         one is solid brackets around a solid object and means "put the
+         camera on what is picked", which is the opposite end of the
+         gesture. Dashes: 16 segments of 59 with gaps of 36 over a
+         perimeter of 1520, so they land on the corners. -->
+    <symbol id="g6-icon-select-mode" viewBox="0 0 512 512">
+        <rect x="46" y="86" width="420" height="340" fill="none"
+            stroke="currentColor" stroke-width="40"
+            stroke-dasharray="59 36"/>
+    </symbol>
     <!-- floppy-disk (save) -->
     <symbol id="g6-icon-save" viewBox="0 0 448 512">
         <path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32L64 32zm32 96c0-17.7 14.3-32 32-32l160 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-160 0c-17.7 0-32-14.3-32-32l0-64zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>
@@ -47494,6 +47507,58 @@ function inject_svg_icons() {
 	document.body.appendChild(div);
 }
 //#endregion
+//#region src/g6_brush_select_owned.js
+/***********************************************************************
+*          g6_brush_select_owned.js
+*
+*          The rubber band, for a graph whose FSM owns the selection.
+*
+*          Why this exists
+*          ----------------
+*          G6 v5 `brush-select` does two things: it draws the band and
+*          it keeps the `selected` element state.  The second one is
+*          not ours to give away -- `C_G6_NODES_TREE` owns the
+*          selection, sets it in `set_selection()` and clears it in
+*          `deselect_node()`, both with the history recorder paused,
+*          because a selection is not an edit.
+*
+*          The built-in disagrees on one path: on EVERY canvas click
+*          it calls `clearElementsStates()`, which writes the state of
+*          every node and every edge of the graph -- whether or not
+*          any of them carried it -- outside our pause.  G6's history
+*          then records the redraw as a command whose `original` and
+*          `current` are identical: an undo entry that undoes nothing,
+*          and a Save button lit on a graph nobody has touched.  One
+*          click on the background was enough.
+*
+*          So this subclass drops that half and keeps the band.  The
+*          selection still clears on a canvas click -- through
+*          `EV_CANVAS_CLICK`, where the gclass has always cleared it.
+*
+*          Registered under its OWN id: the built-in `brush-select` is
+*          right for a graph that does not own its selection, and no
+*          other consumer of this library asked for this.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/************************************************************
+*  Same band, no state bookkeeping behind the gclass's back
+************************************************************/
+var BrushSelectOwned = class extends BrushSelect {
+	clearElementsStates() {}
+};
+/************************************************************
+*  Register once, under our own id
+************************************************************/
+var BRUSH_SELECT_OWNED = "yui-brush-select";
+var __brush_select_registered__ = false;
+function ensure_brush_select_owned() {
+	if (__brush_select_registered__) return;
+	register(ExtensionCategory.BEHAVIOR, BRUSH_SELECT_OWNED, BrushSelectOwned);
+	__brush_select_registered__ = true;
+}
+//#endregion
 //#region src/c_g6_nodes_tree.js
 /***********************************************************************
 *          c_g6_nodes_tree.js
@@ -47552,6 +47617,7 @@ var YuiToolbar = class extends Toolbar {
 };
 register(ExtensionCategory.PLUGIN, "yui-toolbar", YuiToolbar);
 ensure_drag_canvas_patch();
+ensure_brush_select_owned();
 ensure_pinch_zoom_patch();
 /***************************************************************
 *              Constants
@@ -47676,6 +47742,7 @@ var PRIVATE_DATA$4 = {
 	toolbar_collapsed: true,
 	_toolbars_could_collapse: null,
 	_on_focusout_restore: null,
+	selection_mode: false,
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_find: null,
@@ -47999,6 +48066,7 @@ function update_toolbar(gobj) {
 	configure_toolbar_edit(gobj);
 	if (graph_get_plugin(gobj, "toolbar-edit")) graph.updatePlugin({ key: "toolbar-edit" });
 	update_zoom_selection_button(gobj);
+	update_selection_mode_button(gobj);
 }
 /************************************************************
 *  The floating toolbars follow the theme.
@@ -48213,7 +48281,8 @@ function configure_toolbar(gobj) {
 *  Contains edit-mode buttons: Undo, Redo, Save
 ************************************************************/
 function configure_toolbar_edit(gobj) {
-	if (!gobj.priv.edit_mode || toolbars_collapsed(gobj)) {
+	let priv = gobj.priv;
+	if (!priv.edit_mode || toolbars_collapsed(gobj)) {
 		graph_remove_plugin(gobj, "toolbar-edit");
 		return;
 	}
@@ -48232,6 +48301,12 @@ function configure_toolbar_edit(gobj) {
 					className: "EV_CREATE_NODE_BTN color_create_state",
 					title: t("create node")
 				},
+				{
+					id: "g6-icon-select-mode",
+					value: "selection-mode",
+					className: "EV_TOGGLE_SELECTION_MODE" + (priv.selection_mode ? " color_active_state" : ""),
+					title: t("selection mode")
+				},
 				{
 					id: "g6-icon-save",
 					value: "save",
@@ -48260,6 +48335,9 @@ function configure_toolbar_edit(gobj) {
 				case "create-node":
 					toggle_create_popover(gobj);
 					break;
+				case "selection-mode":
+					gobj_send_event(gobj, "EV_TOGGLE_SELECTION_MODE", {}, gobj);
+					break;
 				case "undo":
 					gobj_send_event(gobj, "EV_HISTORY_UNDO", {}, gobj);
 					break;
@@ -48302,14 +48380,19 @@ function configure_behaviour(gobj) {
 				{
 					type: "drag-canvas",
 					key: "drag-canvas",
-					enable: (event) => !event.shiftKey
+					enable: (event) => {
+						if (event.shiftKey || priv.selection_mode) return false;
+						if ("targetType" in event) return event.targetType === "canvas";
+						return true;
+					}
 				},
 				"zoom-canvas",
 				"drag-element",
 				{
-					type: "brush-select",
+					type: BRUSH_SELECT_OWNED,
 					key: "brush-select",
-					trigger: ["shift"],
+					trigger: priv.selection_mode ? [] : ["shift"],
+					enable: (event) => event.targetType === "canvas",
 					enableElements: ["node"],
 					immediately: false,
 					onSelect: (states) => {
@@ -48325,7 +48408,10 @@ function configure_behaviour(gobj) {
 			break;
 		default: log_error(`operation mode unknown: ${operation_mode}`);
 	}
-	if (!priv.edit_mode) deselect_node(gobj);
+	if (!priv.edit_mode) {
+		priv.selection_mode = false;
+		deselect_node(gobj);
+	}
 	graph_write_behaviors(gobj, behaviors);
 }
 /************************************************************
@@ -48891,6 +48977,30 @@ function history_resume(gobj) {
 	gobj.priv._history_paused = false;
 }
 /************************************************************
+*  The history plugin exists while the graph is in EDITION,
+*  and only there.
+*
+*  It used to be installed at one MOMENT -- the arrival of the
+*  last topic of the load -- and only if the graph happened to
+*  be in edition right then. Entering edition afterwards, which
+*  is the ordinary way in (the graph opens in reading and the
+*  mode selector is next to it), left no history at all: Undo
+*  and Redo were dead buttons that never even lit, `history_
+*  pause()` had no `beforeAddCommand` to answer, and the Save
+*  button was told the graph was dirty by `mark_graph_dirty()`
+*  alone -- which is why a move offered Save without Undo.
+*
+*  So it follows the MODE, and every place that changes the
+*  mode calls this.
+************************************************************/
+function sync_history_plugin(gobj) {
+	let priv = gobj.priv;
+	if (!priv.graph || !priv.graph_rendered) return;
+	if (priv.edit_mode) graph_add_plugin(gobj, "history");
+	else graph_remove_plugin(gobj, "history");
+	update_history_buttons(gobj);
+}
+/************************************************************
 *
 ************************************************************/
 function update_history_buttons(gobj) {
@@ -49181,6 +49291,7 @@ function graph_add_plugin(gobj, plugin_key, options) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	let plugin = graph_get_plugin(gobj, plugin_key);
+	let existed = !!plugin;
 	if (!plugin) {
 		let plugin_def = {
 			key: plugin_key,
@@ -49191,7 +49302,7 @@ function graph_add_plugin(gobj, plugin_key, options) {
 	}
 	plugin = graph_get_plugin(gobj, plugin_key);
 	switch (plugin_key) {
-		case "history": if (plugin) {
+		case "history": if (plugin && !existed) {
 			plugin.on(HistoryEvent.CHANGE, () => {
 				update_history_buttons(gobj);
 			});
@@ -49626,6 +49737,21 @@ function update_zoom_selection_button(gobj) {
 	else disableElements($container, ".EV_ZOOM_SELECTION");
 }
 /************************************************************
+*  The selection mode is a state, so it has to LOOK like one.
+*
+*  Toggled on the element rather than re-rendered with the
+*  toolbar, for the same reason as the button above: a
+*  re-render rebuilds the innerHTML and drops what every OTHER
+*  button was told.
+************************************************************/
+function update_selection_mode_button(gobj) {
+	let priv = gobj.priv;
+	let $container = gobj_read_attr(gobj, "$container");
+	if (!$container) return;
+	if (!$container.querySelector(".EV_TOGGLE_SELECTION_MODE")) return;
+	set_active_state($container, ".EV_TOGGLE_SELECTION_MODE", priv.selection_mode);
+}
+/************************************************************
 *  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,
@@ -51922,8 +52048,7 @@ function ac_load_data(gobj, event, kw, src) {
 					if (auto_laid) graph_fit_readable(gobj).catch((e) => {
 						log_error(`${gobj_short_name(gobj)}: cannot fit the graph: ${e}`);
 					});
-					if (priv.edit_mode) graph_add_plugin(gobj, "history");
-					else graph_remove_plugin(gobj, "history");
+					sync_history_plugin(gobj);
 					if (priv._pending_focus_topic !== null) {
 						let ft = priv._pending_focus_topic;
 						priv._pending_focus_topic = null;
@@ -52225,6 +52350,41 @@ function ac_set_operation_mode$1(gobj, event, kw, src) {
 	gobj_write_attr(gobj, "operation_mode", kw.operation_mode);
 	configure_behaviour(gobj);
 	update_toolbar(gobj);
+	sync_history_plugin(gobj);
+	return 0;
+}
+/************************************************************
+*  Selection mode on/off, from the edit toolbar.
+*
+*  Shift is what the selection is built on, and a telephone has
+*  no Shift: the marquee and the add-to-selection click were a
+*  desktop feature by construction. This makes that key a MODE
+*  -- while it is on, a tap picks a card and a drag on the
+*  background draws the band, so the same two gestures are
+*  reachable with one finger.
+*
+*  It costs panning while it is on, and deliberately: G6 binds
+*  both to a plain drag, and a gesture cannot be two things.
+*  That is why it is a button and not a heuristic -- the reader
+*  turns it off to move the camera, and the toolbar says which
+*  of the two the graph is listening for.
+************************************************************/
+function ac_toggle_selection_mode(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (!priv.edit_mode) {
+		log_error(`${gobj_short_name(gobj)}: selection mode asked outside edition`);
+		return 0;
+	}
+	priv.selection_mode = !priv.selection_mode;
+	if (priv.selection_mode) {
+		deselect_port(gobj);
+		hide_node_icon(gobj);
+		hide_node_popover(gobj);
+		hide_resize_handles(gobj);
+		priv._selected_node_id = null;
+	}
+	configure_behaviour(gobj);
+	update_selection_mode_button(gobj);
 	return 0;
 }
 /************************************************************
@@ -52292,7 +52452,7 @@ function ac_node_click$2(gobj, event, kw, src) {
 				topic_name: nodedata.data.desc.topic_name,
 				record: nodedata.data.record
 			});
-			if (priv.edit_mode && kw.evt.shiftKey) toggle_in_selection(gobj, node_id);
+			if (priv.edit_mode && (kw.evt.shiftKey || priv.selection_mode)) 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]);
@@ -52590,6 +52750,11 @@ function create_gclass$4(gclass_name) {
 			ac_set_operation_mode$1,
 			null
 		],
+		[
+			"EV_TOGGLE_SELECTION_MODE",
+			ac_toggle_selection_mode,
+			null
+		],
 		[
 			"EV_SAVE_GRAPH",
 			ac_save_graph,
@@ -52664,6 +52829,7 @@ function create_gclass$4(gclass_name) {
 		["EV_FULLSCREEN", 0],
 		["EV_SET_LAYOUT", 0],
 		["EV_SET_OPERATION_MODE", 0],
+		["EV_TOGGLE_SELECTION_MODE", 0],
 		["EV_HISTORY_UNDO", 0],
 		["EV_HISTORY_REDO", 0],
 		["EV_SAVE_GRAPH", 0],

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -103,6 +103,10 @@ import i18next, {t} from "i18next";
 
 import {inject_svg_icons} from "./lib_icons.js";
 import {ensure_drag_canvas_patch} from "./g6_drag_canvas_touch.js";
+import {
+    ensure_brush_select_owned,
+    BRUSH_SELECT_OWNED,
+} from "./g6_brush_select_owned.js";
 import {
     ensure_pinch_zoom_patch,
     install_long_press_contextmenu,
@@ -176,6 +180,7 @@ class YuiToolbar extends Toolbar
 }
 register(ExtensionCategory.PLUGIN, 'yui-toolbar', YuiToolbar);
 ensure_drag_canvas_patch();
+ensure_brush_select_owned();
 ensure_pinch_zoom_patch();
 
 /***************************************************************
@@ -345,6 +350,9 @@ let PRIVATE_DATA = {
     toolbar_collapsed:  true,       // floating toolbars folded (narrow only)
     _toolbars_could_collapse: null, // last answer, to notice it changed
     _on_focusout_restore: null,     // ...and putting it back when it goes nowhere
+    selection_mode:     false,      // taps pick cards, a canvas drag is the band
+                                    // (edition only, transient: a mode nobody
+                                    //  can see is a mode nobody can leave)
     _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
@@ -1021,6 +1029,7 @@ function update_toolbar(gobj)
     /*  A re-render rebuilds the innerHTML, so a button whose enabled
      *  state is not part of getItems() has to be told again.  */
     update_zoom_selection_button(gobj);
+    update_selection_mode_button(gobj);
 }
 
 /************************************************************
@@ -1321,6 +1330,19 @@ function configure_toolbar_edit(gobj)
             getItems: () => {
                 return [
                     { id: 'g6-icon-plus',  value: 'create-node', className: 'EV_CREATE_NODE_BTN color_create_state', title: t('create node') },
+                    /*  The mode is carried in the class getItems()
+                     *  returns, not only pushed onto the element after
+                     *  the fact: this toolbar is rebuilt whole (a fold,
+                     *  a language change), and the rebuilt DOM is not
+                     *  there yet when the rebuild returns -- so a
+                     *  button told afterwards came back OFF while the
+                     *  graph was still listening for a selection.  */
+                    {
+                        id: 'g6-icon-select-mode', value: 'selection-mode',
+                        className: 'EV_TOGGLE_SELECTION_MODE' +
+                            (priv.selection_mode? ' color_active_state' : ''),
+                        title: t('selection mode')
+                    },
                     { id: 'g6-icon-save', value: 'save', className: 'EV_SAVE_GRAPH',   title: t('save'), disabled: true },
                     { id: 'g6-icon-undo', value: 'undo', className: 'EV_HISTORY_UNDO', title: t('undo'), disabled: true },
                     { id: 'g6-icon-redo', value: 'redo', className: 'EV_HISTORY_REDO', title: t('redo'), disabled: true },
@@ -1331,6 +1353,9 @@ function configure_toolbar_edit(gobj)
                     case 'create-node':
                         toggle_create_popover(gobj);
                         break;
+                    case 'selection-mode':
+                        gobj_send_event(gobj, "EV_TOGGLE_SELECTION_MODE", {}, gobj);
+                        break;
                     case 'undo':
                         gobj_send_event(gobj, "EV_HISTORY_UNDO", {}, gobj);
                         break;
@@ -1410,11 +1435,28 @@ function configure_behaviour(gobj)
                 /*  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.  */
+                 *  under the rubber band.
+                 *
+                 *  And it gives way to a NODE drag, which is what G6's
+                 *  own default `enable` says and what this one has to
+                 *  repeat: `enable` REPLACES it, it does not add to it.
+                 *  Dropping the `targetType` half made every drag of a
+                 *  card pan the canvas as well as move the card -- the
+                 *  card ran at twice the pointer and the whole graph
+                 *  slid underneath it, on a move whose RESULT was
+                 *  right, because a pan writes nothing.  */
                 {
                     type: "drag-canvas",
                     key: "drag-canvas",
-                    enable: (event) => !event.shiftKey,
+                    enable: (event) => {
+                        if(event.shiftKey || priv.selection_mode) {
+                            return false;
+                        }
+                        if('targetType' in event) {
+                            return event.targetType === 'canvas';
+                        }
+                        return true;    /* a key, not a pointer */
+                    },
                 },
                 "zoom-canvas",
                 /*  Moves EVERY node in the `selected` state, not just
@@ -1429,9 +1471,25 @@ function configure_behaviour(gobj)
                  *  ids travel with the event and the action does not
                  *  have to race it.  */
                 {
-                    type: "brush-select",
+                    /*  Ours: the built-in also rewrites the state of
+                     *  EVERY element on a canvas click, behind the
+                     *  gclass's back and outside its history pause --
+                     *  a command that changed nothing, and a Save
+                     *  button lit on a graph nobody had touched.  */
+                    type: BRUSH_SELECT_OWNED,
                     key: "brush-select",
-                    trigger: ["shift"],
+                    /*  There is no Shift on a phone. The toolbar's
+                     *  selection mode is that key made into a state:
+                     *  with it on, the band needs no modifier -- and
+                     *  panning stands aside above, because the two
+                     *  cannot both be a plain drag.  */
+                    trigger: priv.selection_mode ? [] : ["shift"],
+                    /*  A band starts on the BACKGROUND. G6's default
+                     *  (`enable: true`) does not look at what is under
+                     *  the pointer, so a drag that begins on a card
+                     *  drew a band and moved the card at the same
+                     *  time.  */
+                    enable: (event) => event.targetType === 'canvas',
                     enableElements: ["node"],
                     /*  Left at G6's default (false): the set is read at
                      *  pointerup, not on every pointermove. Each answer
@@ -1467,6 +1525,9 @@ function configure_behaviour(gobj)
             break;
     }
     if(!priv.edit_mode) {
+        /*  The selection and the mode that picks it both belong to
+         *  edition, and neither survives leaving it.  */
+        priv.selection_mode = false;
         deselect_node(gobj);
     }
     graph_write_behaviors(gobj, behaviors);
@@ -2370,6 +2431,42 @@ function history_resume(gobj)
     gobj.priv._history_paused = false;
 }
 
+/************************************************************
+ *  The history plugin exists while the graph is in EDITION,
+ *  and only there.
+ *
+ *  It used to be installed at one MOMENT -- the arrival of the
+ *  last topic of the load -- and only if the graph happened to
+ *  be in edition right then. Entering edition afterwards, which
+ *  is the ordinary way in (the graph opens in reading and the
+ *  mode selector is next to it), left no history at all: Undo
+ *  and Redo were dead buttons that never even lit, `history_
+ *  pause()` had no `beforeAddCommand` to answer, and the Save
+ *  button was told the graph was dirty by `mark_graph_dirty()`
+ *  alone -- which is why a move offered Save without Undo.
+ *
+ *  So it follows the MODE, and every place that changes the
+ *  mode calls this.
+ ************************************************************/
+function sync_history_plugin(gobj)
+{
+    let priv = gobj.priv;
+
+    if(!priv.graph || !priv.graph_rendered) {
+        /*  Nothing to hang a plugin on yet: the load path calls
+         *  this again once the graph is drawn.  */
+        return;
+    }
+
+    if(priv.edit_mode) {
+        graph_add_plugin(gobj, "history");
+    } else {
+        graph_remove_plugin(gobj, "history");
+    }
+
+    update_history_buttons(gobj);
+}
+
 /************************************************************
  *
  ************************************************************/
@@ -2775,6 +2872,7 @@ function graph_add_plugin(gobj, plugin_key, options)
     let graph = priv.graph;
 
     let plugin = graph_get_plugin(gobj, plugin_key);
+    let existed = !!plugin;
     if(!plugin) {
         let plugin_def = {
             key: plugin_key,
@@ -2790,7 +2888,11 @@ function graph_add_plugin(gobj, plugin_key, options)
 
     switch(plugin_key) {
         case "history":
-            if(plugin) {
+            /*  Wired once per INSTANCE: this is called again on every
+             *  load and on every entry into edition, and a second
+             *  listener on the same emitter is a second repaint of the
+             *  same two buttons.  */
+            if(plugin && !existed) {
                 plugin.on(HistoryEvent.CHANGE, () => {
                     update_history_buttons(gobj);
                 });
@@ -3505,6 +3607,30 @@ function update_zoom_selection_button(gobj)
     }
 }
 
+/************************************************************
+ *  The selection mode is a state, so it has to LOOK like one.
+ *
+ *  Toggled on the element rather than re-rendered with the
+ *  toolbar, for the same reason as the button above: a
+ *  re-render rebuilds the innerHTML and drops what every OTHER
+ *  button was told.
+ ************************************************************/
+function update_selection_mode_button(gobj)
+{
+    let priv = gobj.priv;
+    let $container = gobj_read_attr(gobj, "$container");
+
+    if(!$container) {
+        return;
+    }
+
+    if(!$container.querySelector(".EV_TOGGLE_SELECTION_MODE")) {
+        return;     /* no edit toolbar: not in edition, or folded away */
+    }
+
+    set_active_state($container, ".EV_TOGGLE_SELECTION_MODE", priv.selection_mode);
+}
+
 /************************************************************
  *  Select a SET of nodes: what a marquee and a shift-click do.
  *
@@ -3563,10 +3689,10 @@ 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.  */
+    /*  The union of the two views of the same thing: 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 -- and a card on screen
+     *  wearing a ring belongs to the selection whichever view has it.  */
     let current = new Set(selected_node_ids(gobj));
     for(let id of (priv._selected_paint_ids || [])) {
         current.add(id);
@@ -7000,11 +7126,7 @@ function ac_load_data(gobj, event, kw, src)
                             log_error(`${gobj_short_name(gobj)}: cannot fit the graph: ${e}`);
                         });
                     }
-                    if(priv.edit_mode) {
-                        graph_add_plugin(gobj, "history");
-                    } else {
-                        graph_remove_plugin(gobj, "history");
-                    }
+                    sync_history_plugin(gobj);
                     /*  Nodes exist and are positioned now: apply a focus
                      *  requested before the data was ready (deep link). */
                     if(priv._pending_focus_topic !== null) {
@@ -7462,6 +7584,55 @@ function ac_set_operation_mode(gobj, event, kw, src)
     gobj_write_attr(gobj, "operation_mode", kw.operation_mode);
     configure_behaviour(gobj);
     update_toolbar(gobj);
+
+    /*  `configure_behaviour` is what decides `edit_mode`, and the
+     *  history plugin belongs to that decision.  */
+    sync_history_plugin(gobj);
+    return 0;
+}
+
+/************************************************************
+ *  Selection mode on/off, from the edit toolbar.
+ *
+ *  Shift is what the selection is built on, and a telephone has
+ *  no Shift: the marquee and the add-to-selection click were a
+ *  desktop feature by construction. This makes that key a MODE
+ *  -- while it is on, a tap picks a card and a drag on the
+ *  background draws the band, so the same two gestures are
+ *  reachable with one finger.
+ *
+ *  It costs panning while it is on, and deliberately: G6 binds
+ *  both to a plain drag, and a gesture cannot be two things.
+ *  That is why it is a button and not a heuristic -- the reader
+ *  turns it off to move the camera, and the toolbar says which
+ *  of the two the graph is listening for.
+ ************************************************************/
+function ac_toggle_selection_mode(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+
+    if(!priv.edit_mode) {
+        log_error(`${gobj_short_name(gobj)}: selection mode asked outside edition`);
+        return 0;
+    }
+
+    priv.selection_mode = !priv.selection_mode;
+
+    if(priv.selection_mode) {
+        /*  A set has no handles, no ports and no popover: those hang
+         *  off `_selected_node_id`, the node OPENED for editing, and
+         *  in this mode a tap no longer opens one. The selection
+         *  itself stays -- entering the mode is not a way to lose it.  */
+        deselect_port(gobj);
+        hide_node_icon(gobj);
+        hide_node_popover(gobj);
+        hide_resize_handles(gobj);
+        priv._selected_node_id = null;
+    }
+
+    configure_behaviour(gobj);
+    update_selection_mode_button(gobj);
+
     return 0;
 }
 
@@ -7564,11 +7735,13 @@ function ac_node_click(gobj, event, kw, src)
                 record: nodedata.data.record
             });
 
-            if(priv.edit_mode && kw.evt.shiftKey) {
+            if(priv.edit_mode && (kw.evt.shiftKey || priv.selection_mode)) {
                 /*  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.  */
+                 *  everywhere -- and so does a plain tap while the
+                 *  toolbar's selection mode is on, which is that key
+                 *  for a finger. 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
@@ -7873,6 +8046,7 @@ function create_gclass(gclass_name)
             ["EV_FULLSCREEN",               ac_fullscreen,          null],
             ["EV_SET_LAYOUT",               ac_set_layout,          null],
             ["EV_SET_OPERATION_MODE",       ac_set_operation_mode,  null],
+            ["EV_TOGGLE_SELECTION_MODE",    ac_toggle_selection_mode, null],
             ["EV_SAVE_GRAPH",               ac_save_graph,          null],
             ["EV_HISTORY_UNDO",             ac_history_undo,        null],
             ["EV_HISTORY_REDO",             ac_history_redo,        null],
@@ -7923,6 +8097,7 @@ function create_gclass(gclass_name)
         ["EV_FULLSCREEN",               0],
         ["EV_SET_LAYOUT",               0],
         ["EV_SET_OPERATION_MODE",       0],
+        ["EV_TOGGLE_SELECTION_MODE",    0],
         ["EV_HISTORY_UNDO",             0],
         ["EV_HISTORY_REDO",             0],
         ["EV_SAVE_GRAPH",               0],

package/src/g6_brush_select_owned.js

@@ -0,0 +1,69 @@
+/***********************************************************************
+ *          g6_brush_select_owned.js
+ *
+ *          The rubber band, for a graph whose FSM owns the selection.
+ *
+ *          Why this exists
+ *          ----------------
+ *          G6 v5 `brush-select` does two things: it draws the band and
+ *          it keeps the `selected` element state.  The second one is
+ *          not ours to give away -- `C_G6_NODES_TREE` owns the
+ *          selection, sets it in `set_selection()` and clears it in
+ *          `deselect_node()`, both with the history recorder paused,
+ *          because a selection is not an edit.
+ *
+ *          The built-in disagrees on one path: on EVERY canvas click
+ *          it calls `clearElementsStates()`, which writes the state of
+ *          every node and every edge of the graph -- whether or not
+ *          any of them carried it -- outside our pause.  G6's history
+ *          then records the redraw as a command whose `original` and
+ *          `current` are identical: an undo entry that undoes nothing,
+ *          and a Save button lit on a graph nobody has touched.  One
+ *          click on the background was enough.
+ *
+ *          So this subclass drops that half and keeps the band.  The
+ *          selection still clears on a canvas click -- through
+ *          `EV_CANVAS_CLICK`, where the gclass has always cleared it.
+ *
+ *          Registered under its OWN id: the built-in `brush-select` is
+ *          right for a graph that does not own its selection, and no
+ *          other consumer of this library asked for this.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {
+    BrushSelect,
+    ExtensionCategory,
+    register,
+} from '@antv/g6';
+
+/************************************************************
+ *  Same band, no state bookkeeping behind the gclass's back
+ ************************************************************/
+class BrushSelectOwned extends BrushSelect {
+    clearElementsStates() {
+        /*
+         *  Deliberately empty. The gclass clears the selection from
+         *  its own EV_CANVAS_CLICK action, with history paused.
+         */
+    }
+}
+
+/************************************************************
+ *  Register once, under our own id
+ ************************************************************/
+const BRUSH_SELECT_OWNED = 'yui-brush-select';
+
+let __brush_select_registered__ = false;
+
+function ensure_brush_select_owned()
+{
+    if(__brush_select_registered__) {
+        return;
+    }
+    register(ExtensionCategory.BEHAVIOR, BRUSH_SELECT_OWNED, BrushSelectOwned);
+    __brush_select_registered__ = true;
+}
+
+export { ensure_brush_select_owned, BRUSH_SELECT_OWNED };

package/src/lib_icons.js

@@ -127,6 +127,19 @@ const ICONS = `<svg xmlns="http://www.w3.org/2000/svg">
     <symbol id="g6-icon-toolbar-hide" viewBox="0 0 384 512">
         <path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
     </symbol>
+    <!-- dashed marquee (selection mode).
+         The band ITSELF, because that is what the button turns on: a
+         drag on the canvas draws one and a tap picks a card. Not the
+         fit-to-selection glyph next to it in the other toolbar -- that
+         one is solid brackets around a solid object and means "put the
+         camera on what is picked", which is the opposite end of the
+         gesture. Dashes: 16 segments of 59 with gaps of 36 over a
+         perimeter of 1520, so they land on the corners. -->
+    <symbol id="g6-icon-select-mode" viewBox="0 0 512 512">
+        <rect x="46" y="86" width="420" height="340" fill="none"
+            stroke="currentColor" stroke-width="40"
+            stroke-dasharray="59 36"/>
+    </symbol>
     <!-- floppy-disk (save) -->
     <symbol id="g6-icon-save" viewBox="0 0 448 512">
         <path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32L64 32zm32 96c0-17.7 14.3-32 32-32l160 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-160 0c-17.7 0-32-14.3-32-32l0-64zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>