@yuneta/gobj-ui 7.18.1 → 7.18.3

package/dist/gobj-ui.cjs.js

@@ -53869,6 +53869,7 @@ var PRIVATE_DATA$1 = {
 	_focus_topic: null,
 	_focus_ids: [],
 	_on_pointerdown_focus: null,
+	_on_focusout_restore: null,
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_find: null,
@@ -53934,9 +53935,13 @@ 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._on_pointerdown_focus = null;
 	}
+	if (priv._on_focusout_restore) {
+		priv.$container.removeEventListener("focusout", priv._on_focusout_restore);
+		priv._on_focusout_restore = null;
+	}
 	if (priv.theme_observer) {
 		priv.theme_observer.disconnect();
 		priv.theme_observer = null;
@@ -54108,10 +54113,17 @@ 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._on_focusout_restore = (ev) => {
+		if (ev.relatedTarget) return;
+		if ((0, _yuneta_gobj_js.gobj_is_destroying)(gobj)) return;
+		let $canvas = main_canvas_of(priv.$container);
+		if ($canvas && $canvas.isConnected && document.activeElement !== $canvas) $canvas.focus({ preventScroll: true });
+	};
+	priv.$container.addEventListener("focusout", priv._on_focusout_restore);
 	graph.on("keydown", (evt) => {
 		let ctrl = !!(evt.ctrlKey || evt.metaKey);
 		if (ctrl && (evt.key === "a" || evt.key === "A")) {
@@ -55604,6 +55616,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

@@ -53856,6 +53856,7 @@ var PRIVATE_DATA$1 = {
 	_focus_topic: null,
 	_focus_ids: [],
 	_on_pointerdown_focus: null,
+	_on_focusout_restore: null,
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_find: null,
@@ -53921,9 +53922,13 @@ 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._on_pointerdown_focus = null;
 	}
+	if (priv._on_focusout_restore) {
+		priv.$container.removeEventListener("focusout", priv._on_focusout_restore);
+		priv._on_focusout_restore = null;
+	}
 	if (priv.theme_observer) {
 		priv.theme_observer.disconnect();
 		priv.theme_observer = null;
@@ -54095,10 +54100,17 @@ 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._on_focusout_restore = (ev) => {
+		if (ev.relatedTarget) return;
+		if (gobj_is_destroying(gobj)) return;
+		let $canvas = main_canvas_of(priv.$container);
+		if ($canvas && $canvas.isConnected && document.activeElement !== $canvas) $canvas.focus({ preventScroll: true });
+	};
+	priv.$container.addEventListener("focusout", priv._on_focusout_restore);
 	graph.on("keydown", (evt) => {
 		let ctrl = !!(evt.ctrlKey || evt.metaKey);
 		if (ctrl && (evt.key === "a" || evt.key === "A")) {
@@ -55591,6 +55603,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.3",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_g6_nodes_tree.js

@@ -37,6 +37,7 @@ import {
     gobj_parent,
     gobj_name,
     gobj_short_name,
+    gobj_is_destroying,
     gobj_subscribe_event,
     gobj_publish_event,
     gobj_send_event,
@@ -334,6 +335,7 @@ let PRIVATE_DATA = {
     _focus_topic:       null,       // topic currently focused (EV_FOCUS_TOPIC)
     _focus_ids:         [],         // node ids carrying the focus 'active' state
     _on_pointerdown_focus: null,    // listener keeping the keyboard on the canvas
+    _on_focusout_restore: null,     // ...and putting it back when it goes nowhere
     _selected_paint_ids: [],        // node ids whose card is PAINTED selected
                                     // (G6's 'selected' state is the selection
                                     //  itself; this is what is on screen, and
@@ -462,11 +464,18 @@ function mt_destroy(gobj)
 
     if(priv._on_pointerdown_focus) {
         priv.$container.removeEventListener(
-            "pointerdown", priv._on_pointerdown_focus
+            "pointerdown", priv._on_pointerdown_focus, true
         );
         priv._on_pointerdown_focus = null;
     }
 
+    if(priv._on_focusout_restore) {
+        priv.$container.removeEventListener(
+            "focusout", priv._on_focusout_restore
+        );
+        priv._on_focusout_restore = null;
+    }
+
     if(priv.theme_observer) {
         priv.theme_observer.disconnect();
         priv.theme_observer = null;
@@ -818,12 +827,43 @@ 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: the cards are DOM and may stop the press from
+     *  bubbling.  */
+    priv.$container.addEventListener(
+        "pointerdown", priv._on_pointerdown_focus, true
+    );
+
+    /*  And put it back when it is taken away to NOWHERE.
+     *
+     *  Focusing on pointerdown is not enough on its own, which is
+     *  measurable: the press does focus the canvas, and then the
+     *  browser runs its own focus handling for the mousedown -- after
+     *  ours -- and a card is not focusable, so it moves the focus to
+     *  <body>. The graph goes deaf right after the click that
+     *  selected something, which is the worst possible moment.
+     *
+     *  Only when it goes nowhere (`relatedTarget` null). A focus
+     *  moving to a REAL element -- the find box, a dialog, the next
+     *  tab stop -- is the user leaving, and is left alone.
+     */
+    priv._on_focusout_restore = (ev) => {
+        if(ev.relatedTarget) {
+            return;
+        }
+        if(gobj_is_destroying(gobj)) {
+            return;
+        }
+        let $canvas = main_canvas_of(priv.$container);
+        if($canvas && $canvas.isConnected && document.activeElement !== $canvas) {
+            $canvas.focus({preventScroll: true});
+        }
+    };
+    priv.$container.addEventListener("focusout", priv._on_focusout_restore);
 
     /*  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 +3165,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.
  *