@yuneta/gobj-ui 7.23.8 → 7.23.9

package/dist/gobj-ui.cjs.js

@@ -9504,6 +9504,275 @@ function yui_graph_refresh_item(gobj, wide) {
 	return camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", wide);
 }
 //#endregion
+//#region src/g6_touch_gestures.js
+/***********************************************************************
+*          g6_touch_gestures.js
+*
+*          The two gestures a G6 graph needs on a touch screen and
+*          does not have: PINCH to zoom, and LONG PRESS to open the
+*          context menu.
+*
+*          Why this exists
+*          ----------------
+*          G6 v5 draws a graph that reads fine on a phone and cannot
+*          be OPERATED on one.  Two gaps, both structural:
+*
+*          1. `zoom-canvas` binds the WHEEL and nothing else
+*             (`trigger: []`).  There is no wheel on a phone, so the
+*             only zoom is the toolbar's +/- buttons.  G6 does ship a
+*             pinch recogniser, and `zoom-canvas` will use it -- with
+*             `trigger: ['pinch']`, which its `bindEvents` treats as
+*             an ALTERNATIVE to the wheel (`if pinch ... else wheel`),
+*             so opting in costs the mouse.  Worse, its `PinchHandler`
+*             keeps its instance and its callback list in STATICS: on
+*             a page with two graphs the second one registers its
+*             callback against the FIRST one's emitter, so pinching
+*             graph A zooms both and pinching graph B does nothing.
+*             We recognise the gesture ourselves, per graph.
+*
+*          2. The context menu is bound to `contextmenu`, and G6 does
+*             not take that from the DOM: its `BehaviorController`
+*             SYNTHESISES it from `pointerdown` with `button === 2`.
+*             A long press therefore never reaches the plugin on ANY
+*             platform, whatever the browser does with the gesture.
+*             So we synthesise it the same way G6 does, from the same
+*             forwarded event object -- which is why the plugin's
+*             `getItems(e)` receives exactly the shape it expects.
+*
+*          Both are built on ONE per-graph record of the fingers
+*          on the glass, read from the NATIVE touch events -- see
+*          `touch_state_of` for why the pointer stream, which looks
+*          like the right source, is not.  That record is also what
+*          tells `drag-canvas` to stop panning while two fingers are
+*          down (`is_pinching`), the guard G6's own drag-canvas has
+*          and our replacement dropped.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/***************************************************************
+*              Constants
+***************************************************************/
+var LONG_PRESS_MS = 500;
+var LONG_PRESS_SLOP = 10;
+/***************************************************************
+*      Per-graph record of the fingers on the glass
+***************************************************************/
+var __touch_state__ = /* @__PURE__ */ new WeakMap();
+/************************************************************
+*   The touch record of one graph, installing its listeners
+*   the first time it is asked for.
+*
+*   Read from the NATIVE touch events, not from G6's
+*   forwarded pointer stream.
+*
+*   The pointer stream looks like the right source and is
+*   not: @antv/g re-issues pointer ids in the middle of a
+*   two-finger gesture (measured: a pinch that started on
+*   ids 2 and 3 finished on id 1), so anything that keys a
+*   Map on `pointerId` loses one of the two fingers halfway
+*   and reads the gesture as a fraction of what it was.
+*   G6's own `PinchHandler` is built exactly that way.
+*
+*   `event.touches` needs no bookkeeping at all: it IS the
+*   list of fingers currently down, re-stated on every event.
+************************************************************/
+function touch_state_of(graph) {
+	let state = __touch_state__.get(graph);
+	if (state) return state;
+	state = {
+		count: 0,
+		container: null
+	};
+	__touch_state__.set(graph, state);
+	let container = graph.getCanvas?.()?.getContainer?.();
+	if (!container) return state;
+	state.container = container;
+	let read = (event) => {
+		state.count = event.touches ? event.touches.length : 0;
+	};
+	container.addEventListener("touchstart", read, { passive: true });
+	container.addEventListener("touchmove", read, { passive: true });
+	container.addEventListener("touchend", read, { passive: true });
+	container.addEventListener("touchcancel", read, { passive: true });
+	return state;
+}
+/************************************************************
+*   Is a two-finger gesture in progress on this graph?
+*
+*   Read by our `drag-canvas` replacement: panning and zooming
+*   the same drag at the same time fights the user for the
+*   camera.
+************************************************************/
+function is_pinching(graph) {
+	if (!graph) return false;
+	let state = __touch_state__.get(graph);
+	if (!state) return false;
+	return state.count >= 2;
+}
+/***************************
+*      Pinch to zoom
+***************************/
+/************************************************************
+*   `zoom-canvas` that also answers the pinch.
+*
+*   The base class keeps the wheel; the pinch is added on top
+*   instead of replacing it, so one build serves the mouse and
+*   the finger.  The scale is ABSOLUTE against the zoom the
+*   gesture started at -- G6's own pinch feeds `zoom()` an
+*   increment per frame, which drifts away from the fingers
+*   over a long gesture.
+************************************************************/
+var ZoomCanvasPinch = class extends _antv_g6.ZoomCanvas {
+	constructor(context, options) {
+		super(context, options);
+		this._pinch_dist0 = 0;
+		this._pinch_zoom0 = 1;
+		this._on_touch_move = null;
+		let { trigger } = this.options;
+		if (Array.isArray(trigger) && trigger.includes(_antv_g6.CommonEvent.PINCH)) return;
+		let graph = this.context.graph;
+		let state = touch_state_of(graph);
+		if (!state.container) return;
+		this._on_touch_move = (event) => {
+			let touches = event.touches;
+			if (!touches || touches.length !== 2) {
+				this._pinch_dist0 = 0;
+				return;
+			}
+			let dx = touches[0].clientX - touches[1].clientX;
+			let dy = touches[0].clientY - touches[1].clientY;
+			let dist = Math.sqrt(dx * dx + dy * dy);
+			if (dist <= 0) return;
+			if (this._pinch_dist0 === 0) {
+				this._pinch_dist0 = dist;
+				this._pinch_zoom0 = graph.getZoom();
+				return;
+			}
+			this._pinch_to(dist / this._pinch_dist0, touches, event);
+		};
+		state.container.addEventListener("touchmove", this._on_touch_move, { passive: true });
+	}
+	/************************************************************
+	*   Zoom to `scale` times the zoom the pinch started at,
+	*   about the midpoint between the two fingers.
+	*
+	*   ABSOLUTE against the start of the gesture, where G6's
+	*   own pinch feeds `zoom()` an increment per frame: an
+	*   increment drifts away from the fingers over a long
+	*   gesture, and cannot come back when they close again.
+	************************************************************/
+	_pinch_to(scale, touches, event) {
+		if (!this.validate(event)) return;
+		let graph = this.context.graph;
+		let state = touch_state_of(graph);
+		let origin = null;
+		let rect = state.container?.getBoundingClientRect();
+		if (rect) origin = [(touches[0].clientX + touches[1].clientX) / 2 - rect.left, (touches[0].clientY + touches[1].clientY) / 2 - rect.top];
+		graph.zoomTo(this._pinch_zoom0 * scale, false, origin);
+		this.options.onFinish?.();
+	}
+	destroy() {
+		if (this._on_touch_move) {
+			__touch_state__.get(this.context.graph)?.container?.removeEventListener("touchmove", this._on_touch_move);
+			this._on_touch_move = null;
+		}
+		super.destroy();
+	}
+};
+/************************************************************
+*   Register once, over the built-in `zoom-canvas`, so every
+*   graph (tree, json, treedb, editor) pinches without
+*   touching its behaviors list.
+************************************************************/
+var __zoom_canvas_patched__ = false;
+function ensure_pinch_zoom_patch() {
+	if (__zoom_canvas_patched__) return;
+	(0, _antv_g6.register)(_antv_g6.ExtensionCategory.BEHAVIOR, "zoom-canvas", ZoomCanvasPinch);
+	__zoom_canvas_patched__ = true;
+}
+/***************************
+*      Long press
+***************************/
+/************************************************************
+*   Make a long press open the context menu.
+*
+*   Returns the function that uninstalls it.
+*
+*   The menu the press opens is whatever the `contextmenu`
+*   plugin builds: we re-emit G6's own forwarded event under
+*   the name the plugin listens for, so `getItems(e)` and
+*   `enable(e)` see the same object a right-click would give
+*   them -- same `target`, same `targetType`, same `client`.
+************************************************************/
+function install_long_press_contextmenu(graph) {
+	if (!graph) return () => {};
+	let state = touch_state_of(graph);
+	let pending = null;
+	let cancel = () => {
+		if (pending) {
+			clearTimeout(pending.timer);
+			pending = null;
+		}
+	};
+	let fire = (event) => {
+		pending = null;
+		let swallow = (evt) => {
+			evt.stopPropagation();
+			document.removeEventListener("click", swallow, true);
+		};
+		document.addEventListener("click", swallow, true);
+		setTimeout(() => {
+			document.removeEventListener("click", swallow, true);
+		}, 1e3);
+		let container = graph.getCanvas?.()?.getContainer?.();
+		if (container) container.addEventListener("contextmenu", (evt) => {
+			evt.preventDefault();
+		}, {
+			once: true,
+			capture: true
+		});
+		graph.emit(`${event.targetType}:${_antv_g6.CommonEvent.CONTEXT_MENU}`, event);
+		graph.emit(_antv_g6.CommonEvent.CONTEXT_MENU, event);
+	};
+	let on_down = (event) => {
+		cancel();
+		if (event.pointerType !== "touch") return;
+		if (state.count > 1) return;
+		let x = event.client?.x;
+		let y = event.client?.y;
+		if (x === void 0 || y === void 0) return;
+		let frozen = Object.assign({}, event);
+		pending = {
+			x,
+			y,
+			timer: setTimeout(() => {
+				fire(frozen);
+			}, LONG_PRESS_MS)
+		};
+	};
+	let on_move = (event) => {
+		if (!pending) return;
+		if (state.count > 1) {
+			cancel();
+			return;
+		}
+		let x = event.client?.x;
+		let y = event.client?.y;
+		if (x === void 0 || y === void 0) return;
+		if (Math.abs(x - pending.x) > LONG_PRESS_SLOP || Math.abs(y - pending.y) > LONG_PRESS_SLOP) cancel();
+	};
+	graph.on(_antv_g6.CommonEvent.POINTER_DOWN, on_down);
+	graph.on(_antv_g6.CommonEvent.POINTER_MOVE, on_move);
+	graph.on(_antv_g6.CommonEvent.POINTER_UP, cancel);
+	return () => {
+		cancel();
+		graph.off(_antv_g6.CommonEvent.POINTER_DOWN, on_down);
+		graph.off(_antv_g6.CommonEvent.POINTER_MOVE, on_move);
+		graph.off(_antv_g6.CommonEvent.POINTER_UP, cancel);
+	};
+}
+//#endregion
 //#region src/g6_drag_canvas_touch.js
 /***********************************************************************
 *          g6_drag_canvas_touch.js
@@ -9548,6 +9817,12 @@ function yui_graph_refresh_item(gobj, wide) {
 *          every graph (tree, json, treedb, editor) is fixed without
 *          touching each consumer's behaviors list.
 *
+*          It also has to keep the ONE guard the base class has and
+*          this replacement dropped: G6's `onDrag` refuses to pan
+*          while a pinch is in progress. See `is_pinching` in
+*          `g6_touch_gestures.js`, which is where the pinch that
+*          matters is now recognised.
+*
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
@@ -9563,6 +9838,10 @@ var DragCanvasTouch = class extends _antv_g6.DragCanvas {
 				this._lastVP = null;
 				return;
 			}
+			if (is_pinching(this.context.graph)) {
+				this._lastVP = null;
+				return;
+			}
 			let vp = event.viewport;
 			if (!vp || typeof vp.x !== "number" || typeof vp.y !== "number") return;
 			if (this._lastVP === null) {
@@ -9792,6 +10071,7 @@ function mt_create$11(gobj) {
 	priv.theme_observer = yui_watch_theme(gobj);
 	build_ui$10(gobj);
 	ensure_drag_canvas_patch();
+	ensure_pinch_zoom_patch();
 	if (!__layout_registered__$1) {
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "json-tree-layout", JsonTreeLayout);
 		__layout_registered__$1 = true;
@@ -12420,6 +12700,7 @@ function mt_create$9(gobj) {
 	priv.theme_observer = yui_watch_theme(gobj);
 	build_ui$8(gobj);
 	ensure_drag_canvas_patch();
+	ensure_pinch_zoom_patch();
 	if (!__layout_registered__) {
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "gobj-tree-v", GobjTreeVLayout);
 		(0, _antv_g6.register)(_antv_g6.ExtensionCategory.LAYOUT, "gobj-tree-h", GobjTreeHLayout);
@@ -47198,6 +47479,20 @@ var ICONS = `<svg xmlns="http://www.w3.org/2000/svg">
     <symbol id="g6-icon-plus" viewBox="0 0 512 512">
         <path fill="currentColor" d="M316 32 L316 196 L480 196 L480 316 L316 316 L316 480 L196 480 L196 316 L32 316 L32 196 L196 196 L196 32 Z"/>
     </symbol>
+    <!-- ellipsis-vertical (unfold the floating toolbar).
+         The strip it stands for is a vertical stack, and a vertical
+         ellipsis is what "there is more of this here" is drawn as
+         everywhere else. -->
+    <symbol id="g6-icon-toolbar-show" viewBox="0 0 128 512">
+        <path fill="currentColor" d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"/>
+    </symbol>
+    <!-- xmark (fold the floating toolbar away).
+         Not a chevron: the two toolbars sit on OPPOSITE edges, so a
+         direction would point the wrong way on one of them. What the
+         button does is close an overlay, and that is an x. -->
+    <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>
     <!-- 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"/>
@@ -47270,6 +47565,7 @@ var YuiToolbar = class extends _antv_g6.Toolbar {
 };
 (0, _antv_g6.register)(_antv_g6.ExtensionCategory.PLUGIN, "yui-toolbar", YuiToolbar);
 ensure_drag_canvas_patch();
+ensure_pinch_zoom_patch();
 /***************************************************************
 *              Constants
 ***************************************************************/
@@ -47389,6 +47685,9 @@ var PRIVATE_DATA$4 = {
 	_focus_topic: null,
 	_focus_ids: [],
 	_on_pointerdown_focus: null,
+	_uninstall_long_press: null,
+	toolbar_collapsed: true,
+	_toolbars_could_collapse: null,
 	_on_focusout_restore: null,
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
@@ -47474,6 +47773,10 @@ function mt_destroy$4(gobj) {
 		cancelAnimationFrame(priv._resize_raf);
 		priv._resize_raf = 0;
 	}
+	if (priv._uninstall_long_press) {
+		priv._uninstall_long_press();
+		priv._uninstall_long_press = null;
+	}
 	if (priv.graph) {
 		priv.graph.destroy();
 		priv.graph = null;
@@ -47688,6 +47991,8 @@ function configure_plugins(gobj) {
 			return e.targetType === "node" || e.targetType === "edge";
 		}
 	});
+	if (priv._uninstall_long_press) priv._uninstall_long_press();
+	priv._uninstall_long_press = install_long_press_contextmenu(priv.graph);
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_toolbar")) {
 		configure_toolbar(gobj);
 		configure_toolbar_edit(gobj);
@@ -47717,6 +48022,55 @@ function update_toolbar(gobj) {
 *  flipping now; the fallbacks are the old forced-light values, so
 *  a host without Bulma gets exactly what it had.
 ************************************************************/
+/************************************************************
+*  Is the canvas too narrow to give both floating toolbars a
+*  strip of it?
+*
+*  They are drawn INSIDE the canvas, one on each edge. On a
+*  desktop that is a corner; on a 356px-wide phone canvas the
+*  two of them take a third of the drawing area and stand on
+*  top of the nodes -- and a node under a toolbar cannot be
+*  read, tapped or dragged out from under it.
+*
+*  Measured on the CONTAINER, not on the window: the same
+*  graph is a full page in one app and a card in a column in
+*  another, and it is the box it actually got that decides.
+************************************************************/
+var TOOLBAR_COLLAPSE_WIDTH = 480;
+function toolbars_can_collapse(gobj) {
+	let $container = gobj.priv.$container;
+	if (!$container) return false;
+	let width = $container.getBoundingClientRect().width;
+	if (!width) return false;
+	return width < TOOLBAR_COLLAPSE_WIDTH;
+}
+/************************************************************
+*  Are they folded RIGHT NOW?  Wide enough and the question
+*  does not arise -- the desktop toolbar never grows a button
+*  it does not need.
+************************************************************/
+function toolbars_collapsed(gobj) {
+	if (!toolbars_can_collapse(gobj)) return false;
+	return gobj.priv.toolbar_collapsed !== false;
+}
+/************************************************************
+*  The one item a folded toolbar shows, and the one an
+*  unfolded narrow toolbar adds to fold itself again.
+************************************************************/
+function toolbar_fold_item(gobj) {
+	if (toolbars_collapsed(gobj)) return {
+		id: "g6-icon-toolbar-show",
+		value: "toolbar-toggle",
+		className: "EV_TOGGLE_TOOLBARS",
+		title: (0, i18next.t)("show toolbar")
+	};
+	return {
+		id: "g6-icon-toolbar-hide",
+		value: "toolbar-toggle",
+		className: "EV_TOGGLE_TOOLBARS",
+		title: (0, i18next.t)("hide toolbar")
+	};
+}
 function toolbar_style(extra) {
 	return Object.assign({
 		backgroundColor: "var(--bulma-scheme-main, #f5f5f5)",
@@ -47774,6 +48128,7 @@ function configure_toolbar(gobj) {
 			marginLeft: "12px"
 		}),
 		getItems: () => {
+			if (toolbars_collapsed(gobj)) return [toolbar_fold_item(gobj)];
 			let items = [
 				{
 					id: "g6-icon-zoom-in",
@@ -47829,6 +48184,10 @@ function configure_toolbar(gobj) {
 					title: (0, i18next.t)("enter full screen")
 				});
 			}
+			if (toolbars_can_collapse(gobj)) {
+				items.push({ separator: true });
+				items.push(toolbar_fold_item(gobj));
+			}
 			return items;
 		},
 		onClick: (value) => {
@@ -47854,7 +48213,10 @@ function configure_toolbar(gobj) {
 				case "request-fullscreen":
 					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_REQUEST_FULLSCREEN", {}, gobj);
 					break;
-				case "exit-fullscreen": (0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_EXIT_FULLSCREEN", {}, gobj);
+				case "exit-fullscreen":
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_EXIT_FULLSCREEN", {}, gobj);
+					break;
+				case "toolbar-toggle": (0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_TOOLBARS", {}, gobj);
 			}
 		}
 	});
@@ -47864,7 +48226,7 @@ function configure_toolbar(gobj) {
 *  Contains edit-mode buttons: Undo, Redo, Save
 ************************************************************/
 function configure_toolbar_edit(gobj) {
-	if (!gobj.priv.edit_mode) {
+	if (!gobj.priv.edit_mode || toolbars_collapsed(gobj)) {
 		graph_remove_plugin(gobj, "toolbar-edit");
 		return;
 	}
@@ -47972,6 +48334,7 @@ function configure_behaviour(gobj) {
 			break;
 		case "operation":
 			priv.edit_mode = false;
+			behaviors = ["drag-canvas", "zoom-canvas"];
 			break;
 		default: (0, _yuneta_gobj_js.log_error)(`operation mode unknown: ${operation_mode}`);
 	}
@@ -48934,6 +49297,14 @@ var ManualLayout = class extends _antv_g6.BaseLayout {
 ************************************************************/
 var RESIZE_HANDLE_SIZE = 8;
 var RESIZE_MIN_VP = 20;
+var RESIZE_HANDLE_VISUAL_COARSE = 14;
+var RESIZE_HANDLE_HIT_COARSE = 44;
+function resize_handle_visual() {
+	return coarse_pointer() ? RESIZE_HANDLE_VISUAL_COARSE : RESIZE_HANDLE_SIZE;
+}
+function resize_handle_hit() {
+	return coarse_pointer() ? RESIZE_HANDLE_HIT_COARSE : RESIZE_HANDLE_SIZE;
+}
 /************************************************************
 *  SVG icons for floating action buttons (28×28 circles).
 *  Each value is a raw SVG string sized 18×18 in a 24×24 viewBox.
@@ -48946,7 +49317,50 @@ var SVG_ICONS = {
 	plus: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>"
 };
 /************************************************************
-*  Create a 28×28 floating circular icon button.
+*  Is the primary pointer a FINGER?
+*
+*  Everything this gclass draws over the canvas is sized from
+*  this answer.  A mouse is a pixel and can hit an 8px square;
+*  a fingertip covers about 40, and the overlay it lands on
+*  decides between "open the properties" and "delete the node".
+*
+*  Asked per call, not cached: a tablet with a keyboard dock
+*  changes the answer without reloading the page.
+************************************************************/
+function coarse_pointer() {
+	if (typeof window.matchMedia !== "function") return false;
+	try {
+		return window.matchMedia("(pointer: coarse)").matches === true;
+	} catch (e) {
+		return false;
+	}
+}
+/************************************************************
+*  The size of the round floating buttons (properties,
+*  delete, link), and the GAP between two of them.
+*
+*  The gap matters as much as the size: `node properties` and
+*  `delete node` are drawn one under the other, and at 28px
+*  with 4px between them a fingertip covers both -- with the
+*  destructive one underneath.
+************************************************************/
+function floating_icon_size() {
+	return coarse_pointer() ? 44 : 28;
+}
+function floating_icon_gap() {
+	return coarse_pointer() ? 12 : 4;
+}
+function floating_icon_dy() {
+	return -floating_icon_size() / 2;
+}
+function floating_icon_step() {
+	return floating_icon_size() + floating_icon_gap();
+}
+function floating_popover_dx() {
+	return 4 + floating_icon_size() + 4;
+}
+/************************************************************
+*  Create a floating circular icon button.
 *  @param {string} svgKey   - key into SVG_ICONS
 *  @param {string} color    - border & text color (e.g. '#1890ff')
 *  @param {number} left     - CSS left in px
@@ -48956,10 +49370,18 @@ var SVG_ICONS = {
 *  @returns {HTMLElement}
 ************************************************************/
 function create_floating_icon(svgKey, color, left, top, title, onClick) {
+	const size = floating_icon_size();
 	const el = document.createElement("div");
 	el.title = title;
+	el.setAttribute("aria-label", title);
 	el.innerHTML = SVG_ICONS[svgKey] || "";
-	el.style.cssText = "position:absolute;left:" + left + "px;top:" + top + "px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid " + color + ";border-radius:50%;cursor:pointer;pointer-events:all;z-index:11;box-shadow:0 2px 6px rgba(0,0,0,0.15);color:" + color + ";";
+	el.style.cssText = "position:absolute;left:" + left + "px;top:" + top + "px;width:" + size + "px;height:" + size + "px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid " + color + ";border-radius:50%;cursor:pointer;pointer-events:all;z-index:11;touch-action:none;box-shadow:0 2px 6px rgba(0,0,0,0.15);color:" + color + ";";
+	const $svg = el.querySelector("svg");
+	if ($svg) {
+		const glyph = Math.round(size * .5);
+		$svg.setAttribute("width", String(glyph));
+		$svg.setAttribute("height", String(glyph));
+	}
 	el.addEventListener("click", (e) => {
 		e.stopPropagation();
 		onClick();
@@ -49005,7 +49427,7 @@ function show_dual_icons(gobj, x, y, gear_title, gear_click, trash_title, trash_
 	let priv = gobj.priv;
 	const icon_el = create_floating_icon("gear", "#1890ff", x, y, gear_title, gear_click);
 	priv.$container.appendChild(icon_el);
-	const delete_el = create_floating_icon("trash", "#ff4d4f", x, y + 32, trash_title, trash_click);
+	const delete_el = create_floating_icon("trash", "#ff4d4f", x, y + floating_icon_step(), trash_title, trash_click);
 	priv.$container.appendChild(delete_el);
 	return {
 		icon_el,
@@ -49023,6 +49445,21 @@ function create_popover_base(left, top, className, borderColor, minWidth) {
 	popover.addEventListener("pointerdown", (e) => e.stopPropagation());
 	return popover;
 }
+/************************************************************
+*  Extra CSS every control inside a popover carries on a
+*  touch screen.
+*
+*  A popover is where the graph is TYPED into -- a colour, a
+*  radius, an id -- and its controls were sized by their
+*  padding alone, which lands them at 25-30px.  A finger needs
+*  44, and the number is not ours: it is the floor both Apple
+*  and Google publish, and the one every native control on the
+*  device already meets.
+************************************************************/
+function touch_control_css() {
+	if (!coarse_pointer()) return "";
+	return "min-height:44px;font-size:16px;";
+}
 function create_form_label(parent, text) {
 	let label = document.createElement("label");
 	label.textContent = (0, i18next.t)(text);
@@ -49034,7 +49471,7 @@ function create_form_color_input(parent, value, onInput) {
 	let input = document.createElement("input");
 	input.type = "color";
 	input.value = value;
-	input.style.cssText = "width:100%;height:30px;padding:0;border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;cursor:pointer;margin-bottom:10px;";
+	input.style.cssText = "width:100%;height:30px;padding:0;border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;cursor:pointer;margin-bottom:10px;" + touch_control_css();
 	if (onInput) input.addEventListener("input", onInput);
 	parent.appendChild(input);
 	return input;
@@ -49045,14 +49482,14 @@ function create_form_number_input(parent, value, min, max, onInput) {
 	input.min = String(min);
 	input.max = String(max);
 	input.value = value;
-	input.style.cssText = "width:100%;padding:4px 6px;background:var(--bulma-scheme-main-bis, #fff);color:var(--bulma-text-strong, #333);border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;box-sizing:border-box;margin-bottom:10px;";
+	input.style.cssText = "width:100%;padding:4px 6px;background:var(--bulma-scheme-main-bis, #fff);color:var(--bulma-text-strong, #333);border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;box-sizing:border-box;margin-bottom:10px;" + touch_control_css();
 	if (onInput) input.addEventListener("input", onInput);
 	parent.appendChild(input);
 	return input;
 }
 function create_form_select(parent, options, marginBottom) {
 	let select = document.createElement("select");
-	select.style.cssText = "width:100%;padding:4px 6px;background:var(--bulma-scheme-main-bis, #fff);color:var(--bulma-text-strong, #333);border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;box-sizing:border-box;margin-bottom:" + (marginBottom || "12px") + ";";
+	select.style.cssText = "width:100%;padding:4px 6px;background:var(--bulma-scheme-main-bis, #fff);color:var(--bulma-text-strong, #333);border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;box-sizing:border-box;margin-bottom:" + (marginBottom || "12px") + ";" + touch_control_css();
 	for (let opt of options) {
 		let o = document.createElement("option");
 		o.value = opt.value;
@@ -49069,7 +49506,7 @@ function create_form_button_row(parent, buttons) {
 	for (let { text, style, onClick } of buttons) {
 		let btn = document.createElement("button");
 		btn.textContent = (0, i18next.t)(text);
-		btn.style.cssText = style;
+		btn.style.cssText = style + touch_control_css();
 		btn.addEventListener("click", (e) => {
 			e.stopPropagation();
 			onClick();
@@ -49307,7 +49744,7 @@ function show_resize_handles(gobj) {
 	container.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;";
 	const selRect = document.createElement("div");
 	container.appendChild(selRect);
-	const handle_defs = [
+	let handle_defs = [
 		{
 			cursor: "nw-resize",
 			mx: -1,
@@ -49349,10 +49786,16 @@ function show_resize_handles(gobj) {
 			my: 1
 		}
 	];
+	const hit = resize_handle_hit();
+	const visual = resize_handle_visual();
+	if (coarse_pointer()) handle_defs = handle_defs.filter((def) => def.mx !== 0 && def.my !== 0);
 	const handles = [];
 	for (const def of handle_defs) {
 		const el = document.createElement("div");
-		el.style.cssText = "position:absolute;width:8px;height:8px;background:#fff;border:1px solid #1890ff;cursor:" + def.cursor + ";pointer-events:all;box-sizing:border-box;";
+		el.style.cssText = "position:absolute;width:" + hit + "px;height:" + hit + "px;display:flex;align-items:center;justify-content:center;cursor:" + def.cursor + ";pointer-events:all;touch-action:none;box-sizing:border-box;";
+		const mark = document.createElement("div");
+		mark.style.cssText = "width:" + visual + "px;height:" + visual + "px;background:#fff;border:1px solid #1890ff;pointer-events:none;box-sizing:border-box;";
+		el.appendChild(mark);
 		el.addEventListener("pointerdown", (e) => {
 			start_node_resize(gobj, e, def.mx, def.my);
 		});
@@ -49392,52 +49835,18 @@ function update_resize_handles_position(gobj) {
 }
 function apply_handles_to_rect(gobj, rect) {
 	let priv = gobj.priv;
-	const HALF = RESIZE_HANDLE_SIZE / 2;
+	const HALF = resize_handle_hit() / 2;
 	const left = rect.left;
 	const top = rect.top;
 	const w = rect.right - rect.left;
 	const h = rect.bottom - rect.top;
 	const selRect = priv._resize_sel_rect;
 	if (selRect) selRect.style.cssText = "position:absolute;left:" + left + "px;top:" + top + "px;width:" + w + "px;height:" + h + "px;border:1px dashed #1890ff;pointer-events:none;box-sizing:border-box;";
-	const positions = [
-		{
-			x: left,
-			y: top
-		},
-		{
-			x: left + w / 2,
-			y: top
-		},
-		{
-			x: left + w,
-			y: top
-		},
-		{
-			x: left,
-			y: top + h / 2
-		},
-		{
-			x: left + w,
-			y: top + h / 2
-		},
-		{
-			x: left,
-			y: top + h
-		},
-		{
-			x: left + w / 2,
-			y: top + h
-		},
-		{
-			x: left + w,
-			y: top + h
-		}
-	];
-	for (let i = 0; i < priv._resize_handles.length; i++) {
-		const handle = priv._resize_handles[i];
-		const p = positions[i];
-		handle.el.style.left = p.x - HALF + "px";
-		handle.el.style.top = p.y - HALF + "px";
+	for (const handle of priv._resize_handles) {
+		const x = left + (handle.mx + 1) / 2 * w;
+		const y = top + (handle.my + 1) / 2 * h;
+		handle.el.style.left = x - HALF + "px";
+		handle.el.style.top = y - HALF + "px";
 	}
 }
 function start_node_resize(gobj, e, mx, my) {
@@ -49513,6 +49922,14 @@ function start_node_resize(gobj, e, mx, my) {
 *  Port selection and individual port resizing
 ************************************************************/
 var PORT_HANDLE_SIZE = 8;
+var PORT_HANDLE_VISUAL_COARSE = 12;
+var PORT_HANDLE_HIT_COARSE = 32;
+function port_handle_visual() {
+	return coarse_pointer() ? PORT_HANDLE_VISUAL_COARSE : PORT_HANDLE_SIZE;
+}
+function port_handle_hit() {
+	return coarse_pointer() ? PORT_HANDLE_HIT_COARSE : PORT_HANDLE_SIZE;
+}
 /************************************************************
 *  Compute the canvas (world) position of a port on a node.
 *  Returns {x, y} in world coordinates.
@@ -49545,6 +49962,26 @@ function get_port_radius(gobj, node_id, port_key) {
 	return style.portR || 6;
 }
 /************************************************************
+*  How much wider than the port itself its hit area is,
+*  measured on the SCREEN and converted to world units.
+*
+*  It used to be a flat `+4` in WORLD units, which is a
+*  different target on every zoom: at the 50% a phone lands on
+*  after fit, a 6-unit port plus 4 is a 5px radius -- one
+*  fifth of a fingertip, and picking a port is the first step
+*  of every link.
+************************************************************/
+function port_hit_slop_world(graph) {
+	let slop = coarse_pointer() ? 22 : 6;
+	let zoom = 1;
+	try {
+		zoom = graph.getZoom() || 1;
+	} catch (e) {
+		zoom = 1;
+	}
+	return slop / zoom;
+}
+/************************************************************
 *  Detect if a click in canvas coordinates hits a port.
 *  Returns the port key string, or null if no port hit.
 ************************************************************/
@@ -49557,6 +49994,7 @@ function detect_port_click(gobj, node_id, canvasX, canvasY) {
 	const defaultR = style.portR || 6;
 	let best_key = null;
 	let best_dist = Infinity;
+	let slop = port_hit_slop_world(graph);
 	for (let i = 0; i < ports.length; i++) {
 		let pl = ports[i].placement || [.5, .5];
 		let px = pos[0] + (pl[0] - .5) * w;
@@ -49565,7 +50003,7 @@ function detect_port_click(gobj, node_id, canvasX, canvasY) {
 		let dx = canvasX - px;
 		let dy = canvasY - py;
 		let dist = Math.sqrt(dx * dx + dy * dy);
-		if (dist <= r + 4 && dist < best_dist) {
+		if (dist <= r + slop && dist < best_dist) {
 			best_dist = dist;
 			best_key = ports[i].key;
 		}
@@ -49613,7 +50051,7 @@ function show_link_icon_if_fkey(gobj) {
 	let canvasPos = get_port_canvas_position(gobj, priv._selected_node_id, priv._selected_port_key);
 	if (!canvasPos) return;
 	let vp = graph.getViewportByCanvas([canvasPos.x, canvasPos.y]);
-	let icon = create_floating_icon("link", "#52c41a", vp[0] + 18, vp[1] - 14, (0, i18next.t)("link to hook"), () => {
+	let icon = create_floating_icon("link", "#52c41a", vp[0] + floating_icon_size() / 2 + 4, vp[1] + floating_icon_dy(), (0, i18next.t)("link to hook"), () => {
 		if (!priv._linking_mode) enter_linking_mode(gobj);
 	});
 	icon.addEventListener("pointerdown", (e) => {
@@ -49638,8 +50076,8 @@ function update_link_icon_position(gobj) {
 			return;
 		}
 		let vp = graph.getViewportByCanvas([canvasPos.x, canvasPos.y]);
-		priv._link_icon_el.style.left = vp[0] + 18 + "px";
-		priv._link_icon_el.style.top = vp[1] - 14 + "px";
+		priv._link_icon_el.style.left = vp[0] + floating_icon_size() / 2 + 4 + "px";
+		priv._link_icon_el.style.top = vp[1] + floating_icon_dy() + "px";
 	} catch (e) {
 		hide_link_icon(gobj);
 	}
@@ -49907,10 +50345,15 @@ function show_port_resize_handles(gobj) {
 			dy: 0
 		}
 	];
+	const hit = port_handle_hit();
+	const visual = port_handle_visual();
 	const handles = [];
 	for (const def of handle_defs) {
 		const el = document.createElement("div");
-		el.style.cssText = "position:absolute;width:8px;height:8px;background:#fff;border:1px solid #fa8c16;border-radius:50%;cursor:" + def.cursor + ";pointer-events:all;box-sizing:border-box;";
+		el.style.cssText = "position:absolute;width:" + hit + "px;height:" + hit + "px;display:flex;align-items:center;justify-content:center;cursor:" + def.cursor + ";pointer-events:all;touch-action:none;box-sizing:border-box;";
+		const mark = document.createElement("div");
+		mark.style.cssText = "width:" + visual + "px;height:" + visual + "px;background:#fff;border:1px solid #fa8c16;border-radius:50%;pointer-events:none;box-sizing:border-box;";
+		el.appendChild(mark);
 		el.addEventListener("pointerdown", (e) => {
 			start_port_resize(gobj, e);
 		});
@@ -49964,7 +50407,7 @@ function update_port_resize_handles_position(gobj) {
 ************************************************************/
 function apply_port_handles(gobj, cx, cy, vpR) {
 	let priv = gobj.priv;
-	const HALF = PORT_HANDLE_SIZE / 2;
+	const HALF = port_handle_hit() / 2;
 	const ring = priv._port_ring;
 	if (ring) {
 		const d = vpR * 2;
@@ -50109,7 +50552,7 @@ function show_edge_icon(gobj) {
 	if (!priv._selected_edge_id) return;
 	let mid = get_edge_viewport_midpoint(gobj, priv._selected_edge_id);
 	if (!mid) return;
-	let icons = show_dual_icons(gobj, mid.x + 4, mid.y - 14, (0, i18next.t)("edge properties"), () => toggle_edge_popover(gobj), (0, i18next.t)("unlink"), () => request_unlink_edge(gobj));
+	let icons = show_dual_icons(gobj, mid.x + 4, mid.y + floating_icon_dy(), (0, i18next.t)("edge properties"), () => toggle_edge_popover(gobj), (0, i18next.t)("unlink"), () => request_unlink_edge(gobj));
 	priv._edge_icon_el = icons.icon_el;
 	priv._edge_delete_el = icons.delete_el;
 }
@@ -50127,14 +50570,14 @@ function update_edge_icon_position(gobj) {
 			return;
 		}
 		priv._edge_icon_el.style.left = mid.x + 4 + "px";
-		priv._edge_icon_el.style.top = mid.y - 14 + "px";
+		priv._edge_icon_el.style.top = mid.y + floating_icon_dy() + "px";
 		if (priv._edge_delete_el) {
 			priv._edge_delete_el.style.left = mid.x + 4 + "px";
-			priv._edge_delete_el.style.top = mid.y + 18 + "px";
+			priv._edge_delete_el.style.top = mid.y + floating_icon_dy() + floating_icon_step() + "px";
 		}
 		if (priv._edge_popover_el) {
-			priv._edge_popover_el.style.left = mid.x + 36 + "px";
-			priv._edge_popover_el.style.top = mid.y - 14 + "px";
+			priv._edge_popover_el.style.left = mid.x + floating_popover_dx() + "px";
+			priv._edge_popover_el.style.top = mid.y + floating_icon_dy() + "px";
 			clamp_popover_position(gobj, priv._edge_popover_el);
 		}
 	} catch (e) {
@@ -50172,7 +50615,7 @@ function show_edge_popover(gobj) {
 	});
 	let mid = get_edge_viewport_midpoint(gobj, edge_id);
 	if (!mid) return;
-	const popover = create_popover_base(mid.x + 36, mid.y - 14, "g6-edge-popover", "#d9d9d9", 180);
+	const popover = create_popover_base(mid.x + floating_popover_dx(), mid.y + floating_icon_dy(), "g6-edge-popover", "#d9d9d9", 180);
 	function preview_edge() {
 		let lw = parseInt(lwInput.value) || 2;
 		let color = colorInput.value;
@@ -50259,7 +50702,7 @@ function show_node_icon(gobj) {
 	if (!priv._selected_node_id || priv._selected_port_key) return;
 	let rect = get_node_viewport_rect(gobj, priv._selected_node_id);
 	if (!rect) return;
-	let icons = show_dual_icons(gobj, rect.right + 4, rect.top - 14, (0, i18next.t)("node properties"), () => toggle_node_popover(gobj), (0, i18next.t)("delete node"), () => request_delete_node(gobj));
+	let icons = show_dual_icons(gobj, rect.right + 4, rect.top + floating_icon_dy(), (0, i18next.t)("node properties"), () => toggle_node_popover(gobj), (0, i18next.t)("delete node"), () => request_delete_node(gobj));
 	priv._node_icon_el = icons.icon_el;
 	priv._node_delete_el = icons.delete_el;
 }
@@ -50281,14 +50724,14 @@ function update_node_icon_position(gobj) {
 			return;
 		}
 		priv._node_icon_el.style.left = rect.right + 4 + "px";
-		priv._node_icon_el.style.top = rect.top - 14 + "px";
+		priv._node_icon_el.style.top = rect.top + floating_icon_dy() + "px";
 		if (priv._node_delete_el) {
 			priv._node_delete_el.style.left = rect.right + 4 + "px";
-			priv._node_delete_el.style.top = rect.top + 18 + "px";
+			priv._node_delete_el.style.top = rect.top + floating_icon_dy() + floating_icon_step() + "px";
 		}
 		if (priv._node_popover_el) {
-			priv._node_popover_el.style.left = rect.right + 36 + "px";
-			priv._node_popover_el.style.top = rect.top - 14 + "px";
+			priv._node_popover_el.style.left = rect.right + floating_popover_dx() + "px";
+			priv._node_popover_el.style.top = rect.top + floating_icon_dy() + "px";
 			clamp_popover_position(gobj, priv._node_popover_el);
 		}
 	} catch (e) {
@@ -50321,7 +50764,7 @@ function show_node_popover(gobj) {
 	let origLW = currentLW;
 	let rect = get_node_viewport_rect(gobj, node_id);
 	if (!rect) return;
-	const popover = create_popover_base(rect.right + 36, rect.top - 14, "g6-node-popover", "#d9d9d9", 180);
+	const popover = create_popover_base(rect.right + floating_popover_dx(), rect.top + floating_icon_dy(), "g6-node-popover", "#d9d9d9", 180);
 	let node_graph_type = nodeData.data && nodeData.data.desc ? nodeData.data.desc.node_treedb_type : null;
 	function preview_node() {
 		let fill = fillInput.value;
@@ -50952,7 +51395,7 @@ function show_create_popover(gobj) {
 	topicLabel.textContent = (0, i18next.t)("topic") + ":";
 	popover.appendChild(topicLabel);
 	let topicSelect = document.createElement("select");
-	topicSelect.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:8px;";
+	topicSelect.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:8px;" + touch_control_css();
 	for (let i = 0; i < topics.length; i++) {
 		let opt = document.createElement("option");
 		opt.value = topics[i].topic_name;
@@ -50985,7 +51428,7 @@ function show_create_popover(gobj) {
 	let idInput = document.createElement("input");
 	idInput.type = "text";
 	idInput.placeholder = (0, i18next.t)("node id");
-	idInput.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:10px;box-sizing:border-box;";
+	idInput.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:10px;box-sizing:border-box;" + touch_control_css();
 	popover.appendChild(idInput);
 	let errorEl = document.createElement("div");
 	errorEl.style.cssText = "color:#ff4d4f;font-size:12px;margin-bottom:8px;display:none;";
@@ -51675,6 +52118,11 @@ function ac_resize(gobj, event, kw, src) {
 		if (h < 0) h = 80;
 		graph_resize(gobj, rect.width, h);
 	}
+	let can_collapse = toolbars_can_collapse(gobj);
+	if (can_collapse !== priv._toolbars_could_collapse) {
+		priv._toolbars_could_collapse = can_collapse;
+		update_toolbar(gobj);
+	}
 	return 0;
 }
 /************************************************************
@@ -51713,6 +52161,19 @@ function ac_zoom_reset(gobj, event, kw, src) {
 	gobj.priv.graph.zoomTo(1);
 	return 0;
 }
+/************************************************************
+*  Fold / unfold the floating toolbars.
+*
+*  One flag for BOTH: they are one wall over the canvas, and
+*  the button that unfolds them has to be the same button
+*  whichever edge the user reaches for.
+************************************************************/
+function ac_toggle_toolbars(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	priv.toolbar_collapsed = !toolbars_collapsed(gobj);
+	update_toolbar(gobj);
+	return 0;
+}
 function ac_auto_fit(gobj, event, kw, src) {
 	graph_fitview(gobj);
 	return 0;
@@ -52097,6 +52558,11 @@ function create_gclass$4(gclass_name) {
 			ac_zoom_reset,
 			null
 		],
+		[
+			"EV_TOGGLE_TOOLBARS",
+			ac_toggle_toolbars,
+			null
+		],
 		[
 			"EV_AUTO_FIT",
 			ac_auto_fit,
@@ -52200,6 +52666,7 @@ function create_gclass$4(gclass_name) {
 		["EV_ZOOM_IN", 0],
 		["EV_ZOOM_OUT", 0],
 		["EV_ZOOM_RESET", 0],
+		["EV_TOGGLE_TOOLBARS", 0],
 		["EV_AUTO_FIT", 0],
 		["EV_ZOOM_SELECTION", 0],
 		["EV_FOCUS_TOPIC", 0],