@yuneta/gobj-ui 7.23.13 → 7.23.14

package/README.md

@@ -854,6 +854,26 @@ structural rather than cosmetic — and none of them is visible in the CSS:
   slop) that re-emits G6's own forwarded event under the name the plugin
   listens for — so `getItems(e)` sees exactly what a right click gives it,
   including the port under the finger.
+- **One finger has to serve three commands, so the press is arbitrated — at
+  the RELEASE** (`press_arbiter.js`, pure and tested): moved → drag; still and
+  let go quickly → the element's own action; still and held past 500ms → the
+  context menu. Firing the menu on a TIMER instead cannot arbitrate anything,
+  because at the moment it fires the gesture is not over: it opened while
+  `drag-element` was already carrying the node, so one press meant both things
+  and the menu sat over a card running away underneath it. Two more things the
+  same press was doing, both fixed with it: `click` is not taken from the DOM
+  either (`@antv/g`'s `onPointerUp` synthesises one), so the press that opened
+  the menu went on to click the node it opened the menu on — the click
+  handlers ask `consume_long_press_click()` first; and the BROWSER's own menu,
+  which opens while the finger is still down, is refused for as long as there
+  is a finger on the glass.
+- **The browser was taking the gesture outright.** G6 puts `touch-action:
+  none` on its canvas and nothing on its HTML nodes, which are ordinary DIVs
+  over it — so a drag that started on a **card** was a page scroll: two
+  `pointermove`s through, then `pointercancel`, and the node stopped dead
+  about 20px in while the page slid. `.graph-container` refuses those gestures
+  whole now; the panels and the context menu keep `touch-action: auto`, so a
+  finger still scrolls what is meant to scroll.
 
 Everything a finger has to LAND on is sized off `(pointer: coarse)`, which
 means **a mouse sees no change at all**: node resize handles become a 14px
@@ -884,9 +904,9 @@ 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 —
+aside. It looks **pressed** while it is on (`7.23.12`, `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

package/dist/gobj-ui.cjs.js

@@ -9503,6 +9503,29 @@ function yui_graph_fold_items(gobj, wide) {
 function yui_graph_refresh_item(gobj, wide) {
 	return camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", wide);
 }
+/***************************************************************
+*              Arbitration
+***************************************************************/
+/************************************************************
+*   Did the finger travel far enough to mean a DRAG?
+*
+*   `press` is what the pointerdown recorded: {x, y, t0}.
+************************************************************/
+function press_moved(press, x, y) {
+	if (!press) return false;
+	return Math.abs(x - press.x) > 10 || Math.abs(y - press.y) > 10;
+}
+/************************************************************
+*   What the press meant, asked when the finger comes up.
+*
+*   Answers "none" when there was no press to arbitrate.
+************************************************************/
+function classify_press(press, x, y, t) {
+	if (!press) return "none";
+	if (press_moved(press, x, y)) return "drag";
+	if (t - press.t0 >= 500) return "long";
+	return "tap";
+}
 //#endregion
 //#region src/g6_touch_gestures.js
 /***********************************************************************
@@ -9539,6 +9562,21 @@ function yui_graph_refresh_item(gobj, wide) {
 *             forwarded event object -- which is why the plugin's
 *             `getItems(e)` receives exactly the shape it expects.
 *
+*             ONE finger has to serve three commands -- move the
+*             node, act on it, open its menu -- so the press is
+*             arbitrated, and arbitrated at the RELEASE:
+*
+*                 moved                -> drag
+*                 still, let go fast   -> the element's own action
+*                 still, held >= 500ms -> the context menu
+*
+*             A menu opened on a TIMER instead cannot be arbitrated
+*             at all: it opens while `drag-element` is already
+*             carrying the node, so the same press means both things
+*             and the user gets a menu over a card running away
+*             underneath it.  `classify_press` is where the three
+*             live, and it is pure.
+*
 *          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
@@ -9551,11 +9589,6 @@ function yui_graph_refresh_item(gobj, wide) {
 *          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();
@@ -9582,7 +9615,9 @@ function touch_state_of(graph) {
 	if (state) return state;
 	state = {
 		count: 0,
-		container: null
+		multi: false,
+		container: null,
+		long_press_click: false
 	};
 	__touch_state__.set(graph, state);
 	let container = graph.getCanvas?.()?.getContainer?.();
@@ -9590,11 +9625,16 @@ function touch_state_of(graph) {
 	state.container = container;
 	let read = (event) => {
 		state.count = event.touches ? event.touches.length : 0;
+		if (state.count >= 2) state.multi = true;
+		else if (state.count === 0) state.multi = false;
 	};
 	container.addEventListener("touchstart", read, { passive: true });
 	container.addEventListener("touchmove", read, { passive: true });
 	container.addEventListener("touchend", read, { passive: true });
 	container.addEventListener("touchcancel", read, { passive: true });
+	container.addEventListener("contextmenu", (event) => {
+		if (state.count > 0) event.preventDefault();
+	}, { capture: true });
 	return state;
 }
 /************************************************************
@@ -9695,6 +9735,24 @@ function ensure_pinch_zoom_patch() {
 *      Long press
 ***************************/
 /************************************************************
+*   Is the click being dispatched right now the tail of a long
+*   press?  Answers true ONCE, to the first asker.
+*
+*   @antv/g does not take `click` from the DOM either: it makes
+*   one out of the pointerdown/pointerup pair itself, inside
+*   the same `onPointerUp` that just fed us the release.  So
+*   the press that opened the menu goes on to click whatever it
+*   opened the menu ON -- selecting the node, or worse, dropping
+*   a selection of several -- unless the handler asks.
+************************************************************/
+function consume_long_press_click(graph) {
+	if (!graph) return false;
+	let state = __touch_state__.get(graph);
+	if (!state || !state.long_press_click) return false;
+	state.long_press_click = false;
+	return true;
+}
+/************************************************************
 *   Make a long press open the context menu.
 *
 *   Returns the function that uninstalls it.
@@ -9704,19 +9762,26 @@ function ensure_pinch_zoom_patch() {
 *   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`.
+*
+*   `options.enable(event)` decides, at the DOWN, whether this
+*   press is even a candidate.  Pass the plugin's own predicate:
+*   a press on the empty canvas would otherwise arm a menu the
+*   plugin then refuses to show, and swallow the click that
+*   would have cleared the selection.
 ************************************************************/
-function install_long_press_contextmenu(graph) {
+function install_long_press_contextmenu(graph, options) {
 	if (!graph) return () => {};
+	let enable = options?.enable;
 	let state = touch_state_of(graph);
 	let pending = null;
-	let cancel = () => {
-		if (pending) {
-			clearTimeout(pending.timer);
-			pending = null;
-		}
+	let disarm = () => {
+		pending = null;
 	};
 	let fire = (event) => {
-		pending = null;
+		state.long_press_click = true;
+		setTimeout(() => {
+			state.long_press_click = false;
+		}, 0);
 		let swallow = (evt) => {
 			evt.stopPropagation();
 			document.removeEventListener("click", swallow, true);
@@ -9725,51 +9790,60 @@ function install_long_press_contextmenu(graph) {
 		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();
+		disarm();
 		if (event.pointerType !== "touch") return;
-		if (state.count > 1) return;
+		if (state.count > 1 || state.multi) return;
+		if (enable && !enable(event)) 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)
+			t0: Date.now(),
+			event: Object.assign({}, event)
 		};
 	};
 	let on_move = (event) => {
 		if (!pending) return;
-		if (state.count > 1) {
-			cancel();
+		if (state.count > 1 || state.multi) {
+			disarm();
 			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();
+		if (press_moved(pending, x, y)) disarm();
 	};
+	let on_up = (event) => {
+		let press = pending;
+		pending = null;
+		if (!press) return;
+		if (state.multi) return;
+		let x = event.client?.x;
+		let y = event.client?.y;
+		if (x === void 0) x = press.x;
+		if (y === void 0) y = press.y;
+		if (classify_press(press, x, y, Date.now()) !== "long") return;
+		fire(press.event);
+	};
+	let on_touch_cancel = () => {
+		disarm();
+	};
+	state.container?.addEventListener("touchcancel", on_touch_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);
+	graph.on(_antv_g6.CommonEvent.POINTER_UP, on_up);
 	return () => {
-		cancel();
+		disarm();
+		state.container?.removeEventListener("touchcancel", on_touch_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);
+		graph.off(_antv_g6.CommonEvent.POINTER_UP, on_up);
 	};
 }
 //#endregion
@@ -47977,6 +48051,7 @@ function configure_events(gobj) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	graph.on(_antv_g6.CanvasEvent.CLICK, (evt) => {
+		if (consume_long_press_click(graph)) return;
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CANVAS_CLICK", { evt }, gobj);
 	});
 	graph.on(_antv_g6.NodeEvent.DRAG, (evt) => {
@@ -47990,12 +48065,14 @@ function configure_events(gobj) {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_DRAG_END", { evt }, gobj);
 	});
 	graph.on(_antv_g6.NodeEvent.CLICK, (evt) => {
+		if (consume_long_press_click(graph)) return;
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_CLICK", { evt }, gobj);
 	});
 	graph.on(_antv_g6.NodeEvent.CONTEXT_MENU, (evt) => {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_CONTEXT_MENU", { evt }, gobj);
 	});
 	graph.on(_antv_g6.EdgeEvent.CLICK, (evt) => {
+		if (consume_long_press_click(graph)) return;
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_EDGE_CLICK", { evt }, gobj);
 	});
 	graph.on("aftertransform", () => {
@@ -48059,6 +48136,9 @@ function configure_plugins(gobj) {
 			update_toolbar(gobj);
 		}
 	});
+	let menu_enable = (e) => {
+		return e.targetType === "node" || e.targetType === "edge";
+	};
 	graph_add_plugin(gobj, "contextmenu", {
 		trigger: "contextmenu",
 		onClick: (value) => {
@@ -48067,12 +48147,10 @@ function configure_plugins(gobj) {
 		getItems: (e) => {
 			return build_context_menu_items(gobj, e);
 		},
-		enable: (e) => {
-			return e.targetType === "node" || e.targetType === "edge";
-		}
+		enable: menu_enable
 	});
 	if (priv._uninstall_long_press) priv._uninstall_long_press();
-	priv._uninstall_long_press = install_long_press_contextmenu(priv.graph);
+	priv._uninstall_long_press = install_long_press_contextmenu(priv.graph, { enable: menu_enable });
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_toolbar")) {
 		configure_toolbar(gobj);
 		configure_toolbar_edit(gobj);

package/dist/gobj-ui.es.js

@@ -9498,6 +9498,29 @@ function yui_graph_fold_items(gobj, wide) {
 function yui_graph_refresh_item(gobj, wide) {
 	return camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", wide);
 }
+/***************************************************************
+*              Arbitration
+***************************************************************/
+/************************************************************
+*   Did the finger travel far enough to mean a DRAG?
+*
+*   `press` is what the pointerdown recorded: {x, y, t0}.
+************************************************************/
+function press_moved(press, x, y) {
+	if (!press) return false;
+	return Math.abs(x - press.x) > 10 || Math.abs(y - press.y) > 10;
+}
+/************************************************************
+*   What the press meant, asked when the finger comes up.
+*
+*   Answers "none" when there was no press to arbitrate.
+************************************************************/
+function classify_press(press, x, y, t) {
+	if (!press) return "none";
+	if (press_moved(press, x, y)) return "drag";
+	if (t - press.t0 >= 500) return "long";
+	return "tap";
+}
 //#endregion
 //#region src/g6_touch_gestures.js
 /***********************************************************************
@@ -9534,6 +9557,21 @@ function yui_graph_refresh_item(gobj, wide) {
 *             forwarded event object -- which is why the plugin's
 *             `getItems(e)` receives exactly the shape it expects.
 *
+*             ONE finger has to serve three commands -- move the
+*             node, act on it, open its menu -- so the press is
+*             arbitrated, and arbitrated at the RELEASE:
+*
+*                 moved                -> drag
+*                 still, let go fast   -> the element's own action
+*                 still, held >= 500ms -> the context menu
+*
+*             A menu opened on a TIMER instead cannot be arbitrated
+*             at all: it opens while `drag-element` is already
+*             carrying the node, so the same press means both things
+*             and the user gets a menu over a card running away
+*             underneath it.  `classify_press` is where the three
+*             live, and it is pure.
+*
 *          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
@@ -9546,11 +9584,6 @@ function yui_graph_refresh_item(gobj, wide) {
 *          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();
@@ -9577,7 +9610,9 @@ function touch_state_of(graph) {
 	if (state) return state;
 	state = {
 		count: 0,
-		container: null
+		multi: false,
+		container: null,
+		long_press_click: false
 	};
 	__touch_state__.set(graph, state);
 	let container = graph.getCanvas?.()?.getContainer?.();
@@ -9585,11 +9620,16 @@ function touch_state_of(graph) {
 	state.container = container;
 	let read = (event) => {
 		state.count = event.touches ? event.touches.length : 0;
+		if (state.count >= 2) state.multi = true;
+		else if (state.count === 0) state.multi = false;
 	};
 	container.addEventListener("touchstart", read, { passive: true });
 	container.addEventListener("touchmove", read, { passive: true });
 	container.addEventListener("touchend", read, { passive: true });
 	container.addEventListener("touchcancel", read, { passive: true });
+	container.addEventListener("contextmenu", (event) => {
+		if (state.count > 0) event.preventDefault();
+	}, { capture: true });
 	return state;
 }
 /************************************************************
@@ -9690,6 +9730,24 @@ function ensure_pinch_zoom_patch() {
 *      Long press
 ***************************/
 /************************************************************
+*   Is the click being dispatched right now the tail of a long
+*   press?  Answers true ONCE, to the first asker.
+*
+*   @antv/g does not take `click` from the DOM either: it makes
+*   one out of the pointerdown/pointerup pair itself, inside
+*   the same `onPointerUp` that just fed us the release.  So
+*   the press that opened the menu goes on to click whatever it
+*   opened the menu ON -- selecting the node, or worse, dropping
+*   a selection of several -- unless the handler asks.
+************************************************************/
+function consume_long_press_click(graph) {
+	if (!graph) return false;
+	let state = __touch_state__.get(graph);
+	if (!state || !state.long_press_click) return false;
+	state.long_press_click = false;
+	return true;
+}
+/************************************************************
 *   Make a long press open the context menu.
 *
 *   Returns the function that uninstalls it.
@@ -9699,19 +9757,26 @@ function ensure_pinch_zoom_patch() {
 *   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`.
+*
+*   `options.enable(event)` decides, at the DOWN, whether this
+*   press is even a candidate.  Pass the plugin's own predicate:
+*   a press on the empty canvas would otherwise arm a menu the
+*   plugin then refuses to show, and swallow the click that
+*   would have cleared the selection.
 ************************************************************/
-function install_long_press_contextmenu(graph) {
+function install_long_press_contextmenu(graph, options) {
 	if (!graph) return () => {};
+	let enable = options?.enable;
 	let state = touch_state_of(graph);
 	let pending = null;
-	let cancel = () => {
-		if (pending) {
-			clearTimeout(pending.timer);
-			pending = null;
-		}
+	let disarm = () => {
+		pending = null;
 	};
 	let fire = (event) => {
-		pending = null;
+		state.long_press_click = true;
+		setTimeout(() => {
+			state.long_press_click = false;
+		}, 0);
 		let swallow = (evt) => {
 			evt.stopPropagation();
 			document.removeEventListener("click", swallow, true);
@@ -9720,51 +9785,60 @@ function install_long_press_contextmenu(graph) {
 		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}:${CommonEvent.CONTEXT_MENU}`, event);
 		graph.emit(CommonEvent.CONTEXT_MENU, event);
 	};
 	let on_down = (event) => {
-		cancel();
+		disarm();
 		if (event.pointerType !== "touch") return;
-		if (state.count > 1) return;
+		if (state.count > 1 || state.multi) return;
+		if (enable && !enable(event)) 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)
+			t0: Date.now(),
+			event: Object.assign({}, event)
 		};
 	};
 	let on_move = (event) => {
 		if (!pending) return;
-		if (state.count > 1) {
-			cancel();
+		if (state.count > 1 || state.multi) {
+			disarm();
 			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();
+		if (press_moved(pending, x, y)) disarm();
 	};
+	let on_up = (event) => {
+		let press = pending;
+		pending = null;
+		if (!press) return;
+		if (state.multi) return;
+		let x = event.client?.x;
+		let y = event.client?.y;
+		if (x === void 0) x = press.x;
+		if (y === void 0) y = press.y;
+		if (classify_press(press, x, y, Date.now()) !== "long") return;
+		fire(press.event);
+	};
+	let on_touch_cancel = () => {
+		disarm();
+	};
+	state.container?.addEventListener("touchcancel", on_touch_cancel);
 	graph.on(CommonEvent.POINTER_DOWN, on_down);
 	graph.on(CommonEvent.POINTER_MOVE, on_move);
-	graph.on(CommonEvent.POINTER_UP, cancel);
+	graph.on(CommonEvent.POINTER_UP, on_up);
 	return () => {
-		cancel();
+		disarm();
+		state.container?.removeEventListener("touchcancel", on_touch_cancel);
 		graph.off(CommonEvent.POINTER_DOWN, on_down);
 		graph.off(CommonEvent.POINTER_MOVE, on_move);
-		graph.off(CommonEvent.POINTER_UP, cancel);
+		graph.off(CommonEvent.POINTER_UP, on_up);
 	};
 }
 //#endregion
@@ -47964,6 +48038,7 @@ function configure_events(gobj) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	graph.on(CanvasEvent.CLICK, (evt) => {
+		if (consume_long_press_click(graph)) return;
 		gobj_send_event(gobj, "EV_CANVAS_CLICK", { evt }, gobj);
 	});
 	graph.on(NodeEvent.DRAG, (evt) => {
@@ -47977,12 +48052,14 @@ function configure_events(gobj) {
 		gobj_send_event(gobj, "EV_NODE_DRAG_END", { evt }, gobj);
 	});
 	graph.on(NodeEvent.CLICK, (evt) => {
+		if (consume_long_press_click(graph)) return;
 		gobj_send_event(gobj, "EV_NODE_CLICK", { evt }, gobj);
 	});
 	graph.on(NodeEvent.CONTEXT_MENU, (evt) => {
 		gobj_send_event(gobj, "EV_NODE_CONTEXT_MENU", { evt }, gobj);
 	});
 	graph.on(EdgeEvent.CLICK, (evt) => {
+		if (consume_long_press_click(graph)) return;
 		gobj_send_event(gobj, "EV_EDGE_CLICK", { evt }, gobj);
 	});
 	graph.on("aftertransform", () => {
@@ -48046,6 +48123,9 @@ function configure_plugins(gobj) {
 			update_toolbar(gobj);
 		}
 	});
+	let menu_enable = (e) => {
+		return e.targetType === "node" || e.targetType === "edge";
+	};
 	graph_add_plugin(gobj, "contextmenu", {
 		trigger: "contextmenu",
 		onClick: (value) => {
@@ -48054,12 +48134,10 @@ function configure_plugins(gobj) {
 		getItems: (e) => {
 			return build_context_menu_items(gobj, e);
 		},
-		enable: (e) => {
-			return e.targetType === "node" || e.targetType === "edge";
-		}
+		enable: menu_enable
 	});
 	if (priv._uninstall_long_press) priv._uninstall_long_press();
-	priv._uninstall_long_press = install_long_press_contextmenu(priv.graph);
+	priv._uninstall_long_press = install_long_press_contextmenu(priv.graph, { enable: menu_enable });
 	if (gobj_read_bool_attr(gobj, "with_toolbar")) {
 		configure_toolbar(gobj);
 		configure_toolbar_edit(gobj);

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -111,6 +111,7 @@ import {
 import {
     ensure_pinch_zoom_patch,
     install_long_press_contextmenu,
+    consume_long_press_click,
 } from "./g6_touch_gestures.js";
 import {yui_theme_now, yui_watch_theme} from "./yui_theme.js";
 
@@ -784,7 +785,14 @@ function configure_events(gobj)
     let priv = gobj.priv;
     let graph = priv.graph;
 
+    /*  @antv/g makes a `click` out of every pointerdown/pointerup
+     *  pair, this one included -- so the press that just opened the
+     *  context menu goes on to click what it opened the menu ON. One
+     *  press, one meaning: the press was already spent.  */
     graph.on(CanvasEvent.CLICK, (evt) => {
+        if(consume_long_press_click(graph)) {
+            return;
+        }
         gobj_send_event(gobj, "EV_CANVAS_CLICK", {evt: evt}, gobj);
     });
 
@@ -801,6 +809,9 @@ function configure_events(gobj)
     });
 
     graph.on(NodeEvent.CLICK, (evt) => {
+        if(consume_long_press_click(graph)) {
+            return;
+        }
         gobj_send_event(gobj, "EV_NODE_CLICK", {evt: evt}, gobj);
     });
 
@@ -809,6 +820,9 @@ function configure_events(gobj)
     });
 
     graph.on(EdgeEvent.CLICK, (evt) => {
+        if(consume_long_press_click(graph)) {
+            return;
+        }
         gobj_send_event(gobj, "EV_EDGE_CLICK", {evt: evt}, gobj);
     });
 
@@ -948,6 +962,13 @@ function configure_plugins(gobj)
         );
     }
 
+    /*  What the menu is FOR: a node or an edge. Shared with the long
+     *  press below, so the gesture arms itself on exactly what the
+     *  menu would agree to open on.  */
+    let menu_enable = (e) => {
+        return e.targetType === 'node' || e.targetType === 'edge';
+    };
+
     graph_add_plugin(
         gobj,
         'contextmenu',
@@ -959,9 +980,7 @@ function configure_plugins(gobj)
             getItems: (e) => {
                 return build_context_menu_items(gobj, e);
             },
-            enable: (e) => {
-                return e.targetType === 'node' || e.targetType === 'edge';
-            },
+            enable: menu_enable,
         }
     );
 
@@ -976,7 +995,9 @@ function configure_plugins(gobj)
     if(priv._uninstall_long_press) {
         priv._uninstall_long_press();
     }
-    priv._uninstall_long_press = install_long_press_contextmenu(priv.graph);
+    priv._uninstall_long_press = install_long_press_contextmenu(
+        priv.graph, {enable: menu_enable}
+    );
 
     if(gobj_read_bool_attr(gobj, "with_toolbar")) {
         configure_toolbar(gobj);

package/src/g6_touch_gestures.js

@@ -32,6 +32,21 @@
  *             forwarded event object -- which is why the plugin's
  *             `getItems(e)` receives exactly the shape it expects.
  *
+ *             ONE finger has to serve three commands -- move the
+ *             node, act on it, open its menu -- so the press is
+ *             arbitrated, and arbitrated at the RELEASE:
+ *
+ *                 moved                -> drag
+ *                 still, let go fast   -> the element's own action
+ *                 still, held >= 500ms -> the context menu
+ *
+ *             A menu opened on a TIMER instead cannot be arbitrated
+ *             at all: it opens while `drag-element` is already
+ *             carrying the node, so the same press means both things
+ *             and the user gets a menu over a card running away
+ *             underneath it.  `classify_press` is where the three
+ *             live, and it is pure.
+ *
  *          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
@@ -50,19 +65,7 @@ import {
     register,
 } from '@antv/g6';
 
-
-/***************************************************************
- *              Constants
- ***************************************************************/
-
-/*
- *  How long a finger must stay put to mean "context menu", and how
- *  far it may wander first.  500ms is what Android and iOS both use
- *  for their own long press; a shorter one fires while the user is
- *  still deciding whether to pan.
- */
-const LONG_PRESS_MS   = 500;
-const LONG_PRESS_SLOP = 10;     /* CSS px */
+import {press_moved, classify_press} from "./press_arbiter.js";
 
 
 /***************************************************************
@@ -97,7 +100,11 @@ function touch_state_of(graph)
 
     state = {
         count:     0,       /* fingers on the glass right now  */
+        multi:     false,   /* two or more were down in THIS gesture */
         container: null,
+        /*  A long press fired, and the click that @antv/g makes out
+         *  of the same pointerup has not been answered yet.  */
+        long_press_click: false,
     };
     __touch_state__.set(graph, state);
 
@@ -109,6 +116,14 @@ function touch_state_of(graph)
 
     let read = (event) => {
         state.count = event.touches? event.touches.length: 0;
+        if(state.count >= 2) {
+            /*  Sticky until the LAST finger goes: a pinch releases its
+             *  two fingers one at a time, and the release of the first
+             *  one must not be read as the end of a press.  */
+            state.multi = true;
+        } else if(state.count === 0) {
+            state.multi = false;
+        }
     };
 
     /*  Passive: we never preventDefault here -- the canvas already
@@ -119,6 +134,24 @@ function touch_state_of(graph)
     container.addEventListener("touchend",    read, {passive: true});
     container.addEventListener("touchcancel", read, {passive: true});
 
+    /*
+     *  The browser opens its OWN menu on a long press, and it opens it
+     *  while the finger is still down -- on top of whatever the graph
+     *  is about to do with the same press.  Refuse it for as long as
+     *  there is a finger on the glass.
+     *
+     *  This costs the graph nothing: G6 reads no `contextmenu` from
+     *  the DOM at all (it synthesises its own from `pointerdown` with
+     *  `button === 2`), so a real right click keeps working with its
+     *  DOM event refused -- and it is not refused here anyway, because
+     *  a mouse leaves `count` at zero.
+     */
+    container.addEventListener("contextmenu", (event) => {
+        if(state.count > 0) {
+            event.preventDefault();
+        }
+    }, {capture: true});
+
     return state;
 }
 
@@ -290,6 +323,30 @@ export function ensure_pinch_zoom_patch()
 
 
 
+/************************************************************
+ *   Is the click being dispatched right now the tail of a long
+ *   press?  Answers true ONCE, to the first asker.
+ *
+ *   @antv/g does not take `click` from the DOM either: it makes
+ *   one out of the pointerdown/pointerup pair itself, inside
+ *   the same `onPointerUp` that just fed us the release.  So
+ *   the press that opened the menu goes on to click whatever it
+ *   opened the menu ON -- selecting the node, or worse, dropping
+ *   a selection of several -- unless the handler asks.
+ ************************************************************/
+export function consume_long_press_click(graph)
+{
+    if(!graph) {
+        return false;
+    }
+    let state = __touch_state__.get(graph);
+    if(!state || !state.long_press_click) {
+        return false;
+    }
+    state.long_press_click = false;
+    return true;
+}
+
 /************************************************************
  *   Make a long press open the context menu.
  *
@@ -300,33 +357,45 @@ export function ensure_pinch_zoom_patch()
  *   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`.
+ *
+ *   `options.enable(event)` decides, at the DOWN, whether this
+ *   press is even a candidate.  Pass the plugin's own predicate:
+ *   a press on the empty canvas would otherwise arm a menu the
+ *   plugin then refuses to show, and swallow the click that
+ *   would have cleared the selection.
  ************************************************************/
-export function install_long_press_contextmenu(graph)
+export function install_long_press_contextmenu(graph, options)
 {
     if(!graph) {
         return () => {};
     }
 
-    let state = touch_state_of(graph);
-    let pending = null;         /* {timer, x, y, event} */
+    let enable  = options?.enable;
+    let state   = touch_state_of(graph);
+    let pending = null;         /* {x, y, t0, event} */
 
-    let cancel = () => {
-        if(pending) {
-            clearTimeout(pending.timer);
-            pending = null;
-        }
+    let disarm = () => {
+        pending = null;
     };
 
     let fire = (event) => {
-        pending = null;
+        /*
+         *  The click @antv/g is about to make out of this same
+         *  pointerup belongs to the press, and the press has already
+         *  been spent on the menu.
+         */
+        state.long_press_click = true;
+        setTimeout(() => {
+            state.long_press_click = false;
+        }, 0);
 
         /*
-         *  The tap that ENDS the long press would reach the plugin's
-         *  own `document` click listener and hide the menu the press
-         *  just opened -- a right click never produces a `click`, so
-         *  the plugin has no reason to guard against it.  Swallow
-         *  that one click in the CAPTURE phase, where document sees
-         *  it before anything else does.
+         *  That click also reaches the plugin's own `document`
+         *  listener, which hides the menu the press just opened -- a
+         *  right click never produces a `click`, so the plugin has no
+         *  reason to guard against it.  Swallow that one click in the
+         *  CAPTURE phase, where document sees it before anything else
+         *  does.
          */
         let swallow = (evt) => {
             evt.stopPropagation();
@@ -337,30 +406,21 @@ export function install_long_press_contextmenu(graph)
             document.removeEventListener("click", swallow, true);
         }, 1000);
 
-        /*
-         *  And the browser's own long-press menu, which would open on
-         *  top of ours.  One shot: a later right click must keep
-         *  reaching the plugin.
-         */
-        let container = graph.getCanvas?.()?.getContainer?.();
-        if(container) {
-            container.addEventListener("contextmenu", (evt) => {
-                evt.preventDefault();
-            }, {once: true, capture: true});
-        }
-
         graph.emit(`${event.targetType}:${CommonEvent.CONTEXT_MENU}`, event);
         graph.emit(CommonEvent.CONTEXT_MENU, event);
     };
 
     let on_down = (event) => {
-        cancel();
+        disarm();
         if(event.pointerType !== "touch") {
             return;     /*  a mouse holding its button is not a menu  */
         }
-        if(state.count > 1) {
+        if(state.count > 1 || state.multi) {
             return;     /*  two fingers: that is the pinch  */
         }
+        if(enable && !enable(event)) {
+            return;     /*  nothing here has a menu to open  */
+        }
         let x = event.client?.x;
         let y = event.client?.y;
         if(x === undefined || y === undefined) {
@@ -368,16 +428,15 @@ export function install_long_press_contextmenu(graph)
         }
         /*
          *  The event object is reused by @antv/g between dispatches,
-         *  so what the timer must carry is a COPY -- by the time it
-         *  fires, the live object describes the pointerup.
+         *  so what the release must answer with is a COPY -- by then
+         *  the live object describes the pointerup, and the menu is
+         *  about what was PRESSED.
          */
-        let frozen = Object.assign({}, event);
         pending = {
-            x: x,
-            y: y,
-            timer: setTimeout(() => {
-                fire(frozen);
-            }, LONG_PRESS_MS),
+            x:     x,
+            y:     y,
+            t0:    Date.now(),
+            event: Object.assign({}, event),
         };
     };
 
@@ -385,8 +444,8 @@ export function install_long_press_contextmenu(graph)
         if(!pending) {
             return;
         }
-        if(state.count > 1) {
-            cancel();
+        if(state.count > 1 || state.multi) {
+            disarm();
             return;
         }
         let x = event.client?.x;
@@ -394,20 +453,51 @@ export function install_long_press_contextmenu(graph)
         if(x === undefined || y === undefined) {
             return;
         }
-        if(Math.abs(x - pending.x) > LONG_PRESS_SLOP ||
-                Math.abs(y - pending.y) > LONG_PRESS_SLOP) {
-            cancel();
+        if(press_moved(pending, x, y)) {
+            disarm();   /*  the finger is carrying the node  */
+        }
+    };
+
+    let on_up = (event) => {
+        let press = pending;
+        pending = null;
+        if(!press) {
+            return;
+        }
+        if(state.multi) {
+            return;     /*  a finger of a pinch, not a press  */
+        }
+        let x = event.client?.x;
+        let y = event.client?.y;
+        if(x === undefined) {
+            x = press.x;
+        }
+        if(y === undefined) {
+            y = press.y;
         }
+        if(classify_press(press, x, y, Date.now()) !== "long") {
+            return;     /*  a drag, or a tap: both are already served  */
+        }
+        fire(press.event);
+    };
+
+    /*  The gesture can also end without a release: the browser takes
+     *  the touch away (a system gesture, a call), and the press must
+     *  not survive it into the next one.  */
+    let on_touch_cancel = () => {
+        disarm();
     };
+    state.container?.addEventListener("touchcancel", on_touch_cancel);
 
     graph.on(CommonEvent.POINTER_DOWN, on_down);
     graph.on(CommonEvent.POINTER_MOVE, on_move);
-    graph.on(CommonEvent.POINTER_UP,   cancel);
+    graph.on(CommonEvent.POINTER_UP,   on_up);
 
     return () => {
-        cancel();
+        disarm();
+        state.container?.removeEventListener("touchcancel", on_touch_cancel);
         graph.off(CommonEvent.POINTER_DOWN, on_down);
         graph.off(CommonEvent.POINTER_MOVE, on_move);
-        graph.off(CommonEvent.POINTER_UP,   cancel);
+        graph.off(CommonEvent.POINTER_UP,   on_up);
     };
 }

package/src/lib_graph.css

@@ -52,6 +52,27 @@
 .graph-container {
     -webkit-user-select: none;
     user-select: none;
+
+    /*
+     *  And the finger's half of the same problem: on a touch screen
+     *  the browser owns the gesture until something says otherwise.
+     *
+     *  G6 puts `touch-action: none` on its CANVAS, so dragging from
+     *  the background pans the graph -- and it puts nothing on the
+     *  HTML nodes, which are ordinary DIVs layered on top of it. So
+     *  a finger that lands on a CARD was making a page scroll:
+     *  Chrome let two `pointermove`s through, decided the gesture
+     *  was a scroll, and killed the pointer stream with a
+     *  `pointercancel`.  The node followed the finger for about 20px
+     *  and then stopped dead while the page slid -- which is what
+     *  "I only want to move a node" looked like on a phone.
+     *
+     *  The whole container, not the cards: every layer G6 stacks in
+     *  here (nodes, plugin containers, the ones it adds next) is a
+     *  DIV over a canvas that already refuses the browser's
+     *  gestures, and they have to agree.
+     */
+    touch-action: none;
 }
 .graph-container input,
 .graph-container textarea,
@@ -66,6 +87,19 @@
     user-select: text;
 }
 
+/*
+ *  What a finger must still be able to SCROLL: the panels, and the
+ *  context menu, which is as long as the impact of a delete.
+ */
+.graph-container .g6-confirm-popover,
+.graph-container .g6-create-popover,
+.graph-container .g6-node-popover,
+.graph-container .g6-edge-popover,
+.graph-container .g6-node-detail,
+.graph-container .g6-contextmenu {
+    touch-action: auto;
+}
+
 .graph-container:fullscreen {
     background-color: var(--bulma-background, #fff);
 }

package/src/press_arbiter.js

@@ -0,0 +1,84 @@
+/***********************************************************************
+ *          press_arbiter.js
+ *
+ *          What ONE finger meant.
+ *
+ *          A graph gives a single finger three commands -- move the
+ *          node, act on it, open its menu -- and nothing in the press
+ *          says which one until the finger either moves or lets go.
+ *          So the press is arbitrated, and arbitrated at the RELEASE:
+ *
+ *              moved                -> "drag"   (the node followed it)
+ *              still, let go fast   -> "tap"    (the element's action)
+ *              still, held >= 500ms -> "long"   (the context menu)
+ *
+ *          Deciding earlier is what breaks it.  A menu opened on a
+ *          TIMER opens while `drag-element` is already carrying the
+ *          node: the same press then means two things at once, and
+ *          the user gets a menu over a card running away underneath
+ *          it.  A timer cannot arbitrate, because at the moment it
+ *          fires the gesture is not over.
+ *
+ *          Pure, and separate from `g6_touch_gestures.js` for that
+ *          reason: the rule can be read and tested without a graph,
+ *          a canvas or a finger.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+/***************************************************************
+ *              Constants
+ ***************************************************************/
+
+/*
+ *  How long a finger must stay put to mean "context menu", and how
+ *  far it may wander first.  500ms is what Android and iOS both use
+ *  for their own long press.
+ *
+ *  The 10px is not a taste: it is the `dragstartDistanceThreshold`
+ *  G6 gives the dragndrop plugin of its main canvas.  Keeping the
+ *  two equal is what makes "still" mean the same thing to both --
+ *  a press held inside the slop has NOT moved the node, so a menu
+ *  it opens does not open over a card that quietly shifted.
+ */
+export const LONG_PRESS_MS   = 500;
+export const LONG_PRESS_SLOP = 10;     /* CSS px */
+
+
+/***************************************************************
+ *              Arbitration
+ ***************************************************************/
+
+/************************************************************
+ *   Did the finger travel far enough to mean a DRAG?
+ *
+ *   `press` is what the pointerdown recorded: {x, y, t0}.
+ ************************************************************/
+export function press_moved(press, x, y)
+{
+    if(!press) {
+        return false;
+    }
+    return Math.abs(x - press.x) > LONG_PRESS_SLOP ||
+           Math.abs(y - press.y) > LONG_PRESS_SLOP;
+}
+
+/************************************************************
+ *   What the press meant, asked when the finger comes up.
+ *
+ *   Answers "none" when there was no press to arbitrate.
+ ************************************************************/
+export function classify_press(press, x, y, t)
+{
+    if(!press) {
+        return "none";
+    }
+    if(press_moved(press, x, y)) {
+        return "drag";
+    }
+    if(t - press.t0 >= LONG_PRESS_MS) {
+        return "long";
+    }
+    return "tap";
+}

package/src/press_arbiter.test.js

@@ -0,0 +1,63 @@
+/***********************************************************************
+ *          press_arbiter.test.js
+ ***********************************************************************/
+import {describe, it, expect} from "vitest";
+import {
+    LONG_PRESS_MS,
+    LONG_PRESS_SLOP,
+    press_moved,
+    classify_press,
+} from "./press_arbiter.js";
+
+const at = (x, y, t0) => ({x: x, y: y, t0: t0});
+
+describe("press_moved", () => {
+    it("a finger that stays inside the slop has not moved", () => {
+        let p = at(100, 100, 0);
+        expect(press_moved(p, 100, 100)).toBe(false);
+        expect(press_moved(p, 100 + LONG_PRESS_SLOP, 100)).toBe(false);
+        expect(press_moved(p, 100, 100 - LONG_PRESS_SLOP)).toBe(false);
+    });
+
+    it("one pixel past the slop, in either axis, is a move", () => {
+        let p = at(100, 100, 0);
+        expect(press_moved(p, 100 + LONG_PRESS_SLOP + 1, 100)).toBe(true);
+        expect(press_moved(p, 100, 100 + LONG_PRESS_SLOP + 1)).toBe(true);
+    });
+
+    it("no press, no move", () => {
+        expect(press_moved(null, 100, 100)).toBe(false);
+    });
+});
+
+describe("classify_press", () => {
+    it("a press that moved is a drag, however long it was held", () => {
+        let p = at(100, 100, 0);
+        expect(classify_press(p, 400, 100, 10)).toBe("drag");
+        expect(classify_press(p, 400, 100, 10 * LONG_PRESS_MS)).toBe("drag");
+    });
+
+    it("still and let go quickly is a tap", () => {
+        let p = at(100, 100, 1000);
+        expect(classify_press(p, 100, 100, 1000)).toBe("tap");
+        expect(classify_press(p, 105, 103, 1000 + LONG_PRESS_MS - 1)).toBe("tap");
+    });
+
+    it("still and held to the threshold is the menu", () => {
+        let p = at(100, 100, 1000);
+        expect(classify_press(p, 100, 100, 1000 + LONG_PRESS_MS)).toBe("long");
+        expect(classify_press(p, 108, 100, 9000)).toBe("long");
+    });
+
+    it("a long hold that ends somewhere else is still a drag", () => {
+        /*  The finger that thought about the menu and then carried the
+         *  node is carrying the node: the release is what decides, and
+         *  the release is far away.  */
+        let p = at(100, 100, 0);
+        expect(classify_press(p, 260, 340, 3000)).toBe("drag");
+    });
+
+    it("no press to arbitrate", () => {
+        expect(classify_press(null, 0, 0, 0)).toBe("none");
+    });
+});