@yuneta/gobj-ui 7.23.10 → 7.23.12

package/README.md

@@ -877,11 +877,24 @@ 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 looks **pressed** while it is on (`pressed_state`, an inverted
+neutral chip) rather than taking one of the palette's colours: each of those
+names a KIND of action, and `7.23.11` borrowed undo/redo's violet for it —
+which put the same colour on two neighbouring buttons for two different
+reasons, and carried the whole state change in the hairline of an outline
+glyph. 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 +941,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 |

package/dist/gobj-ui.cjs.js

@@ -20597,6 +20597,19 @@ function set_active_state($container, selector, set) {
 	if (set) addClasses($container, selector, "color_active_state");
 	else removeClasses($container, selector, "color_active_state");
 }
+/************************************************************
+*  Set or reset the 'pressed' state of a TOGGLE.
+*
+*  Not one of the colours above: each of those names a KIND of
+*  action (create, pending, history, destructive), and a toggle
+*  is not an action -- it is a state the control is IN. So it
+*  looks pressed instead of changing category, which also keeps
+*  it out of the way of a neighbour wearing the same hue.
+************************************************************/
+function set_pressed_state($container, selector, set) {
+	if (set) addClasses($container, selector, "pressed_state");
+	else removeClasses($container, selector, "pressed_state");
+}
 /**
 * Returns a smart stroke color in `rgba()` format based on:
 * - The given fill color (hex or rgb[a])
@@ -47493,6 +47506,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"/>
@@ -47742,6 +47768,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,
@@ -48065,6 +48092,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.
@@ -48279,7 +48307,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;
 	}
@@ -48298,6 +48327,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 ? " pressed_state" : ""),
+					title: (0, i18next.t)("selection mode")
+				},
 				{
 					id: "g6-icon-save",
 					value: "save",
@@ -48326,6 +48361,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;
@@ -48369,7 +48407,7 @@ function configure_behaviour(gobj) {
 					type: "drag-canvas",
 					key: "drag-canvas",
 					enable: (event) => {
-						if (event.shiftKey) return false;
+						if (event.shiftKey || priv.selection_mode) return false;
 						if ("targetType" in event) return event.targetType === "canvas";
 						return true;
 					}
@@ -48379,7 +48417,8 @@ function configure_behaviour(gobj) {
 				{
 					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) => {
@@ -48395,7 +48434,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);
 }
 /************************************************************
@@ -49721,6 +49763,23 @@ 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:
+*  a PRESSED toggle, not a button wearing one of the palette's
+*  action colours (see `pressed_state` in lib_graph.css).
+*
+*  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_pressed_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,
@@ -52323,6 +52382,40 @@ function ac_set_operation_mode$1(gobj, event, kw, src) {
 	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;
+}
+/************************************************************
 *  Node drag end
 ************************************************************/
 function ac_node_drag_end(gobj, event, kw, src) {
@@ -52387,7 +52480,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]);
@@ -52685,6 +52778,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,
@@ -52759,6 +52857,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],
@@ -63610,6 +63709,7 @@ exports.rolling_bounds = rolling_bounds;
 exports.safe_locale = safe_locale;
 exports.set_active_state = set_active_state;
 exports.set_cancel_state = set_cancel_state;
+exports.set_pressed_state = set_pressed_state;
 exports.set_submit_state = set_submit_state;
 exports.setup_dev = setup_dev;
 exports.setup_frontend_view = setup_frontend_view;

package/dist/gobj-ui.es.js

@@ -20584,6 +20584,19 @@ function set_active_state($container, selector, set) {
 	if (set) addClasses($container, selector, "color_active_state");
 	else removeClasses($container, selector, "color_active_state");
 }
+/************************************************************
+*  Set or reset the 'pressed' state of a TOGGLE.
+*
+*  Not one of the colours above: each of those names a KIND of
+*  action (create, pending, history, destructive), and a toggle
+*  is not an action -- it is a state the control is IN. So it
+*  looks pressed instead of changing category, which also keeps
+*  it out of the way of a neighbour wearing the same hue.
+************************************************************/
+function set_pressed_state($container, selector, set) {
+	if (set) addClasses($container, selector, "pressed_state");
+	else removeClasses($container, selector, "pressed_state");
+}
 /**
 * Returns a smart stroke color in `rgba()` format based on:
 * - The given fill color (hex or rgb[a])
@@ -47480,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"/>
@@ -47729,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,
@@ -48052,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.
@@ -48266,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;
 	}
@@ -48285,6 +48314,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 ? " pressed_state" : ""),
+					title: t("selection mode")
+				},
 				{
 					id: "g6-icon-save",
 					value: "save",
@@ -48313,6 +48348,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;
@@ -48356,7 +48394,7 @@ function configure_behaviour(gobj) {
 					type: "drag-canvas",
 					key: "drag-canvas",
 					enable: (event) => {
-						if (event.shiftKey) return false;
+						if (event.shiftKey || priv.selection_mode) return false;
 						if ("targetType" in event) return event.targetType === "canvas";
 						return true;
 					}
@@ -48366,7 +48404,8 @@ function configure_behaviour(gobj) {
 				{
 					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) => {
@@ -48382,7 +48421,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);
 }
 /************************************************************
@@ -49708,6 +49750,23 @@ 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:
+*  a PRESSED toggle, not a button wearing one of the palette's
+*  action colours (see `pressed_state` in lib_graph.css).
+*
+*  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_pressed_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,
@@ -52310,6 +52369,40 @@ function ac_set_operation_mode$1(gobj, event, kw, src) {
 	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;
+}
+/************************************************************
 *  Node drag end
 ************************************************************/
 function ac_node_drag_end(gobj, event, kw, src) {
@@ -52374,7 +52467,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]);
@@ -52672,6 +52765,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,
@@ -52746,6 +52844,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],
@@ -63539,6 +63638,6 @@ function setup_frontend_view(self) {
 	return win;
 }
 //#endregion
-export { EditControl, MarkerControl, YUI_PERIODS, YUI_PERIODS_DEFAULT, YUI_ROLLING, addClasses, apply_dev_traces, attach_clear, build_dev_panel, dev_window_was_open, disableElements, enableElements, epoch_to_local_input, epoch_to_ms, expose_view_container, fmt_epoch, getStrokeColor, infer_period, info_traffic, inject_svg_icons, is_current_period, iso_week, local_input_to_epoch, ms_to_epoch, period_bounds, period_bounds_epoch, period_label, period_name, period_shift, period_spec, period_start, refresh_clear, register_c_g6_nodes_tree, register_c_yui_form, register_c_yui_gobj_tree_js, register_c_yui_json, register_c_yui_json_graph, register_c_yui_map, register_c_yui_nav, register_c_yui_pager, register_c_yui_period, register_c_yui_schema_editor, register_c_yui_service_view, register_c_yui_shell, register_c_yui_treedb_graph, register_c_yui_treedb_schema, register_c_yui_treedb_topic_with_form, register_c_yui_treedb_topics, register_c_yui_uplot, register_c_yui_window, register_c_yui_window_manager, register_c_yui_wizard, removeChildElements, removeClasses, rolling_bounds, safe_locale, set_active_state, set_cancel_state, set_submit_state, setup_dev, setup_frontend_view, toggleClasses, yui_is_dark, yui_mount_service_view, yui_shell_close_drawer, yui_shell_close_dropdown, yui_shell_confirm_danger, yui_shell_confirm_ok, yui_shell_confirm_yesno, yui_shell_confirm_yesnocancel, yui_shell_navigate, yui_shell_open_drawer, yui_shell_overlay_dismissed, yui_shell_pop_escape, yui_shell_push_escape, yui_shell_refresh_avatars, yui_shell_register_event_handler, yui_shell_register_overlay, yui_shell_set_avatar_provider, yui_shell_set_connection_state, yui_shell_set_sub_routes, yui_shell_set_toolbar_item_badge, yui_shell_set_toolbar_item_icon, yui_shell_set_translator, yui_shell_show_error, yui_shell_show_info, yui_shell_show_modal, yui_shell_show_route_map, yui_shell_show_warning, yui_shell_toggle_drawer, yui_shell_unpark_route, yui_theme_now, yui_toolbar, yui_watch_theme };
+export { EditControl, MarkerControl, YUI_PERIODS, YUI_PERIODS_DEFAULT, YUI_ROLLING, addClasses, apply_dev_traces, attach_clear, build_dev_panel, dev_window_was_open, disableElements, enableElements, epoch_to_local_input, epoch_to_ms, expose_view_container, fmt_epoch, getStrokeColor, infer_period, info_traffic, inject_svg_icons, is_current_period, iso_week, local_input_to_epoch, ms_to_epoch, period_bounds, period_bounds_epoch, period_label, period_name, period_shift, period_spec, period_start, refresh_clear, register_c_g6_nodes_tree, register_c_yui_form, register_c_yui_gobj_tree_js, register_c_yui_json, register_c_yui_json_graph, register_c_yui_map, register_c_yui_nav, register_c_yui_pager, register_c_yui_period, register_c_yui_schema_editor, register_c_yui_service_view, register_c_yui_shell, register_c_yui_treedb_graph, register_c_yui_treedb_schema, register_c_yui_treedb_topic_with_form, register_c_yui_treedb_topics, register_c_yui_uplot, register_c_yui_window, register_c_yui_window_manager, register_c_yui_wizard, removeChildElements, removeClasses, rolling_bounds, safe_locale, set_active_state, set_cancel_state, set_pressed_state, set_submit_state, setup_dev, setup_frontend_view, toggleClasses, yui_is_dark, yui_mount_service_view, yui_shell_close_drawer, yui_shell_close_dropdown, yui_shell_confirm_danger, yui_shell_confirm_ok, yui_shell_confirm_yesno, yui_shell_confirm_yesnocancel, yui_shell_navigate, yui_shell_open_drawer, yui_shell_overlay_dismissed, yui_shell_pop_escape, yui_shell_push_escape, yui_shell_refresh_avatars, yui_shell_register_event_handler, yui_shell_register_overlay, yui_shell_set_avatar_provider, yui_shell_set_connection_state, yui_shell_set_sub_routes, yui_shell_set_toolbar_item_badge, yui_shell_set_toolbar_item_icon, yui_shell_set_translator, yui_shell_show_error, yui_shell_show_info, yui_shell_show_modal, yui_shell_show_route_map, yui_shell_show_warning, yui_shell_toggle_drawer, yui_shell_unpark_route, yui_theme_now, yui_toolbar, yui_watch_theme };
 
 //# sourceMappingURL=gobj-ui.es.js.map

package/index.js

@@ -114,7 +114,7 @@ export {
 /*
  *  Libraries and utilities
  */
-export { addClasses, removeClasses, toggleClasses, removeChildElements, disableElements, enableElements, set_submit_state, set_cancel_state, set_active_state, getStrokeColor } from "./src/lib_graph.js";
+export { addClasses, removeClasses, toggleClasses, removeChildElements, disableElements, enableElements, set_submit_state, set_cancel_state, set_active_state, set_pressed_state, getStrokeColor } from "./src/lib_graph.js";
 export { inject_svg_icons } from "./src/lib_icons.js";
 export { EditControl, MarkerControl } from "./src/lib_maplibre.js";
 export { yui_toolbar } from "./src/yui_toolbar.js";

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -79,6 +79,7 @@ import {
     set_submit_state,
     set_cancel_state,
     set_active_state,
+    set_pressed_state,
     getStrokeColor,
 } from "./lib_graph.js";
 
@@ -350,6 +351,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
@@ -1026,6 +1030,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);
 }
 
 /************************************************************
@@ -1326,6 +1331,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? ' pressed_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 },
@@ -1336,6 +1354,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;
@@ -1429,7 +1450,7 @@ function configure_behaviour(gobj)
                     type: "drag-canvas",
                     key: "drag-canvas",
                     enable: (event) => {
-                        if(event.shiftKey) {
+                        if(event.shiftKey || priv.selection_mode) {
                             return false;
                         }
                         if('targetType' in event) {
@@ -1458,7 +1479,18 @@ function configure_behaviour(gobj)
                      *  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
@@ -1494,6 +1526,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);
@@ -3573,6 +3608,32 @@ function update_zoom_selection_button(gobj)
     }
 }
 
+/************************************************************
+ *  The selection mode is a state, so it has to LOOK like one:
+ *  a PRESSED toggle, not a button wearing one of the palette's
+ *  action colours (see `pressed_state` in lib_graph.css).
+ *
+ *  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_pressed_state($container, ".EV_TOGGLE_SELECTION_MODE", priv.selection_mode);
+}
+
 /************************************************************
  *  Select a SET of nodes: what a marquee and a shift-click do.
  *
@@ -7533,6 +7594,51 @@ function ac_set_operation_mode(gobj, event, kw, src)
     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;
+}
+
 /************************************************************
  *  Node drag end
  ************************************************************/
@@ -7632,11 +7738,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
@@ -7941,6 +8049,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],
@@ -7991,6 +8100,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/lib_graph.css

@@ -177,6 +177,32 @@
     background-color: var(--bulma-background, #f0f0f0);
 }
 
+/*
+ *  A TOGGLE that is on looks PRESSED, it does not take a colour from
+ *  the palette at the top of this file: each of those names a kind of
+ *  ACTION, and "the graph is listening for a selection" is not one --
+ *  borrowing undo/redo's violet for it put the same colour on two
+ *  neighbouring buttons for two different reasons.
+ *
+ *  Inverted neutral, and deliberately hue-free: it cannot be mistaken
+ *  for the hover tint declared just above (a much lighter wash of the
+ *  same surface), it reads at a glance even when the glyph is a thin
+ *  outline rather than a solid silhouette, and it says what it says
+ *  without a hue -- which is the same reason the palette above is
+ *  documented as colour-blind safe.
+ *
+ *  The `:hover` half is not decoration: without it, hovering a pressed
+ *  button would hand it back to the rule above (equal specificity,
+ *  declared earlier, so this one wins only where both match) and the
+ *  toggle would appear to switch off under the pointer.
+ */
+.g6-toolbar.g6-toolbar-large .g6-toolbar-item.pressed_state,
+.g6-toolbar.g6-toolbar-large .g6-toolbar-item.pressed_state:hover {
+    background-color: var(--bulma-text, #2e333d);
+    color: var(--bulma-background, #ffffff);
+    border-radius: 4px;
+}
+
 /*
  *  Touch: the context menu is a LIST OF COMMANDS, and G6 sizes its
  *  rows with `padding: 8px 12px` -- 34px, which is a mouse row. The

package/src/lib_graph.js

@@ -109,6 +109,24 @@ function set_active_state($container, selector, set)
     }
 }
 
+/************************************************************
+ *  Set or reset the 'pressed' state of a TOGGLE.
+ *
+ *  Not one of the colours above: each of those names a KIND of
+ *  action (create, pending, history, destructive), and a toggle
+ *  is not an action -- it is a state the control is IN. So it
+ *  looks pressed instead of changing category, which also keeps
+ *  it out of the way of a neighbour wearing the same hue.
+ ************************************************************/
+function set_pressed_state($container, selector, set)
+{
+    if(set) {
+        addClasses($container, selector, "pressed_state");
+    } else {
+        removeClasses($container, selector, "pressed_state");
+    }
+}
+
 /**
  * Returns a smart stroke color in `rgba()` format based on:
  * - The given fill color (hex or rgb[a])
@@ -187,5 +205,6 @@ export {
     set_submit_state,
     set_cancel_state,
     set_active_state,
+    set_pressed_state,
     getStrokeColor,
 };

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"/>