@yuneta/gobj-ui 7.18.1 → 7.18.2

package/dist/gobj-ui.cjs.js

@@ -53934,7 +53934,8 @@ function mt_destroy$1(gobj) {
 		priv._on_language_changed = null;
 	}
 	if (priv._on_pointerdown_focus) {
-		priv.$container.removeEventListener("pointerdown", priv._on_pointerdown_focus);
+		priv.$container.removeEventListener("pointerdown", priv._on_pointerdown_focus, true);
+		priv.$container.removeEventListener("click", priv._on_pointerdown_focus, true);
 		priv._on_pointerdown_focus = null;
 	}
 	if (priv.theme_observer) {
@@ -54108,10 +54109,11 @@ function configure_events(gobj) {
 			if (target.closest("input, textarea, select, [contenteditable]")) return;
 			if (target.closest(".g6-confirm-popover, .g6-create-popover,.g6-node-popover, .g6-edge-popover")) return;
 		}
-		let $canvas = priv.$container.querySelector("canvas");
+		let $canvas = main_canvas_of(priv.$container);
 		if ($canvas && typeof $canvas.focus === "function") $canvas.focus({ preventScroll: true });
 	};
-	priv.$container.addEventListener("pointerdown", priv._on_pointerdown_focus);
+	priv.$container.addEventListener("pointerdown", priv._on_pointerdown_focus, true);
+	priv.$container.addEventListener("click", priv._on_pointerdown_focus, true);
 	graph.on("keydown", (evt) => {
 		let ctrl = !!(evt.ctrlKey || evt.metaKey);
 		if (ctrl && (evt.key === "a" || evt.key === "A")) {
@@ -55604,6 +55606,22 @@ function perform_history_op(gobj, is_redo) {
 	}
 }
 /************************************************************
+*  The canvas G6 listens on.
+*
+*  A G6 graph stacks four canvases and gives every one of them a
+*  `tabIndex`, so `querySelector("canvas")` finds a focusable
+*  element that receives nothing: only the MAIN layer carries the
+*  listeners, and it is the only one G6 leaves with pointer events
+*  (`configCanvasDom` sets `pointerEvents: none` on the rest).
+*  Focusing the wrong one looks exactly like focusing the right one
+*  and delivers no key.
+************************************************************/
+function main_canvas_of($container) {
+	let canvases = $container.querySelectorAll("canvas");
+	for (let i = 0; i < canvases.length; i++) if (window.getComputedStyle(canvases[i]).pointerEvents !== "none") return canvases[i];
+	return canvases[0] || null;
+}
+/************************************************************
 *  The selection.
 *
 *  G6's `selected` element state IS the selection: `drag-element`

package/dist/gobj-ui.es.js

@@ -53921,7 +53921,8 @@ function mt_destroy$1(gobj) {
 		priv._on_language_changed = null;
 	}
 	if (priv._on_pointerdown_focus) {
-		priv.$container.removeEventListener("pointerdown", priv._on_pointerdown_focus);
+		priv.$container.removeEventListener("pointerdown", priv._on_pointerdown_focus, true);
+		priv.$container.removeEventListener("click", priv._on_pointerdown_focus, true);
 		priv._on_pointerdown_focus = null;
 	}
 	if (priv.theme_observer) {
@@ -54095,10 +54096,11 @@ function configure_events(gobj) {
 			if (target.closest("input, textarea, select, [contenteditable]")) return;
 			if (target.closest(".g6-confirm-popover, .g6-create-popover,.g6-node-popover, .g6-edge-popover")) return;
 		}
-		let $canvas = priv.$container.querySelector("canvas");
+		let $canvas = main_canvas_of(priv.$container);
 		if ($canvas && typeof $canvas.focus === "function") $canvas.focus({ preventScroll: true });
 	};
-	priv.$container.addEventListener("pointerdown", priv._on_pointerdown_focus);
+	priv.$container.addEventListener("pointerdown", priv._on_pointerdown_focus, true);
+	priv.$container.addEventListener("click", priv._on_pointerdown_focus, true);
 	graph.on("keydown", (evt) => {
 		let ctrl = !!(evt.ctrlKey || evt.metaKey);
 		if (ctrl && (evt.key === "a" || evt.key === "A")) {
@@ -55591,6 +55593,22 @@ function perform_history_op(gobj, is_redo) {
 	}
 }
 /************************************************************
+*  The canvas G6 listens on.
+*
+*  A G6 graph stacks four canvases and gives every one of them a
+*  `tabIndex`, so `querySelector("canvas")` finds a focusable
+*  element that receives nothing: only the MAIN layer carries the
+*  listeners, and it is the only one G6 leaves with pointer events
+*  (`configCanvasDom` sets `pointerEvents: none` on the rest).
+*  Focusing the wrong one looks exactly like focusing the right one
+*  and delivers no key.
+************************************************************/
+function main_canvas_of($container) {
+	let canvases = $container.querySelectorAll("canvas");
+	for (let i = 0; i < canvases.length; i++) if (window.getComputedStyle(canvases[i]).pointerEvents !== "none") return canvases[i];
+	return canvases[0] || null;
+}
+/************************************************************
 *  The selection.
 *
 *  G6's `selected` element state IS the selection: `drag-element`

package/package.json

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

package/src/c_g6_nodes_tree.js

@@ -462,7 +462,10 @@ function mt_destroy(gobj)
 
     if(priv._on_pointerdown_focus) {
         priv.$container.removeEventListener(
-            "pointerdown", priv._on_pointerdown_focus
+            "pointerdown", priv._on_pointerdown_focus, true
+        );
+        priv.$container.removeEventListener(
+            "click", priv._on_pointerdown_focus, true
         );
         priv._on_pointerdown_focus = null;
     }
@@ -818,12 +821,22 @@ function configure_events(gobj)
                 return;
             }
         }
-        let $canvas = priv.$container.querySelector("canvas");
+        let $canvas = main_canvas_of(priv.$container);
         if($canvas && typeof $canvas.focus === "function") {
             $canvas.focus({preventScroll: true});
         }
     };
-    priv.$container.addEventListener("pointerdown", priv._on_pointerdown_focus);
+    /*  Capture, and on the click as well as the press. Capture because
+     *  the cards are DOM and may stop the press from bubbling; the
+     *  click too because the browser does its OWN focus handling on
+     *  mousedown, after ours, and it sends the focus to <body> when
+     *  what was pressed cannot take it -- which a card cannot.  */
+    priv.$container.addEventListener(
+        "pointerdown", priv._on_pointerdown_focus, true
+    );
+    priv.$container.addEventListener(
+        "click", priv._on_pointerdown_focus, true
+    );
 
     /*  The canvas carries a `tabIndex` of its own, so a keydown reaches
      *  us only while the GRAPH has focus. That is what keeps Ctrl+A in
@@ -3125,6 +3138,30 @@ function perform_history_op(gobj, is_redo)
     }
 }
 
+/************************************************************
+ *  The canvas G6 listens on.
+ *
+ *  A G6 graph stacks four canvases and gives every one of them a
+ *  `tabIndex`, so `querySelector("canvas")` finds a focusable
+ *  element that receives nothing: only the MAIN layer carries the
+ *  listeners, and it is the only one G6 leaves with pointer events
+ *  (`configCanvasDom` sets `pointerEvents: none` on the rest).
+ *  Focusing the wrong one looks exactly like focusing the right one
+ *  and delivers no key.
+ ************************************************************/
+function main_canvas_of($container)
+{
+    let canvases = $container.querySelectorAll("canvas");
+
+    for(let i = 0; i < canvases.length; i++) {
+        if(window.getComputedStyle(canvases[i]).pointerEvents !== "none") {
+            return canvases[i];
+        }
+    }
+
+    return canvases[0] || null;
+}
+
 /************************************************************
  *  The selection.
  *