@yuneta/gobj-ui 7.23.12 → 7.23.14

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);
@@ -53123,6 +53201,40 @@ function destroy_ui$1(gobj) {
 	}
 }
 /************************************************************
+*  The label of an option of the two selects of the toolbar.
+*
+*  Both of them used to render their RAW names -- `reading`,
+*  `edition`, `dagre`, `manual` -- in every language, because
+*  neither went through `t()` at all. Not a missing key: a
+*  missing call.
+*
+*  Written as one literal per case, and deliberately not as
+*  `t(name)`: a consumer's `validate-locales.mjs` reads
+*  LITERALS, so a variable key is invisible to it -- the app
+*  ships without the entry and nothing says so, because
+*  i18next answers an unknown key with the key itself, which
+*  is exactly the English word that was there before. The
+*  same reason the keys are listed in the README.
+*
+*  The default is what a host that adds a layout of its own
+*  gets: the name it chose, which is what all of them got
+*  until now.
+************************************************************/
+function option_label(name) {
+	switch (name) {
+		case "reading": return t("reading");
+		case "operation": return t("operation");
+		case "writing": return t("writing");
+		case "edition": return t("edition");
+		case "manual": return t("manual");
+		case "dagre": return t("dagre");
+		case "antv-dagre": return t("antv-dagre");
+		case "d3-force": return t("d3-force");
+		case "force-atlas2": return t("force-atlas2");
+		default: return name;
+	}
+}
+/************************************************************
 *
 ************************************************************/
 function make_toolbar(gobj) {
@@ -53165,8 +53277,11 @@ function make_toolbar(gobj) {
 				{ class: "GRAPH_MODE_SELECT" },
 				modes.map((item) => [
 					"option",
-					{},
-					item
+					{
+						value: item,
+						"data-i18n": item
+					},
+					option_label(item)
 				])
 			]],
 			{ change: (evt) => {
@@ -53505,7 +53620,8 @@ function populate_nodes_tree_options(gobj) {
 		for (let name of layout_names) {
 			let option = document.createElement("option");
 			option.value = name;
-			option.textContent = name;
+			option.setAttribute("data-i18n", name);
+			option.textContent = option_label(name);
 			$layout_select.appendChild(option);
 		}
 		let current_layout = gobj_read_str_attr(priv.gobj_nodes_tree, "layout");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.12",
+  "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/c_yui_treedb_graph.js

@@ -452,6 +452,56 @@ function destroy_ui(gobj)
     }
 }
 
+/************************************************************
+ *  The label of an option of the two selects of the toolbar.
+ *
+ *  Both of them used to render their RAW names -- `reading`,
+ *  `edition`, `dagre`, `manual` -- in every language, because
+ *  neither went through `t()` at all. Not a missing key: a
+ *  missing call.
+ *
+ *  Written as one literal per case, and deliberately not as
+ *  `t(name)`: a consumer's `validate-locales.mjs` reads
+ *  LITERALS, so a variable key is invisible to it -- the app
+ *  ships without the entry and nothing says so, because
+ *  i18next answers an unknown key with the key itself, which
+ *  is exactly the English word that was there before. The
+ *  same reason the keys are listed in the README.
+ *
+ *  The default is what a host that adds a layout of its own
+ *  gets: the name it chose, which is what all of them got
+ *  until now.
+ ************************************************************/
+function option_label(name)
+{
+    switch(name) {
+        /*  Operation modes (`operation_modes` attr).  */
+        case "reading":
+            return t("reading");
+        case "operation":
+            return t("operation");
+        case "writing":
+            return t("writing");
+        case "edition":
+            return t("edition");
+
+        /*  Layouts (`layout_names` of the G6 child).  */
+        case "manual":
+            return t("manual");
+        case "dagre":
+            return t("dagre");
+        case "antv-dagre":
+            return t("antv-dagre");
+        case "d3-force":
+            return t("d3-force");
+        case "force-atlas2":
+            return t("force-atlas2");
+
+        default:
+            return name;
+    }
+}
+
 /************************************************************
  *
  ************************************************************/
@@ -468,7 +518,14 @@ function make_toolbar(gobj)
          *  one that draws the create / delete / link affordances.  */
         modes = modes.filter(mode => mode !== "edition");
     }
-    let mode_options = modes.map(item => ['option', {}, item]);
+    /*  `value` EXPLICIT, and that is not decoration: an <option>
+     *  with no value attribute answers with its own TEXT, so the
+     *  moment the label is translated `evt.target.value` becomes
+     *  "Edición" and the mode the FSM is told to enter is a word
+     *  no `switch` of this gclass knows.  */
+    let mode_options = modes.map(item =>
+        ['option', {value: item, 'data-i18n': item}, option_label(item)]
+    );
 
     /*
      *  Left: layout and mode selectors
@@ -876,7 +933,12 @@ function populate_nodes_tree_options(gobj)
         for(let name of layout_names) {
             let option = document.createElement('option');
             option.value = name;
-            option.textContent = name;
+            /*  The key travels in the attribute so a language change
+             *  re-translates it: `refresh_language()` only touches a
+             *  node that carries its own key, and this select is built
+             *  once, after the child answers with its layouts.  */
+            option.setAttribute('data-i18n', name);
+            option.textContent = option_label(name);
             $layout_select.appendChild(option);
         }
         // Restore persisted layout selection