@yuneta/gobj-ui 7.18.0 → 7.18.2

package/dist/gobj-ui.cjs.js

@@ -53868,6 +53868,7 @@ var PRIVATE_DATA$1 = {
 	_link_saved_styles: [],
 	_focus_topic: null,
 	_focus_ids: [],
+	_on_pointerdown_focus: null,
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_find: null,
@@ -53932,6 +53933,11 @@ function mt_destroy$1(gobj) {
 		i18next.default.off("languageChanged", priv._on_language_changed);
 		priv._on_language_changed = null;
 	}
+	if (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) {
 		priv.theme_observer.disconnect();
 		priv.theme_observer = null;
@@ -54097,6 +54103,17 @@ function configure_events(gobj) {
 		update_toolbar(gobj);
 	};
 	i18next.default.on("languageChanged", priv._on_language_changed);
+	priv._on_pointerdown_focus = (ev) => {
+		let target = ev.target;
+		if (target && typeof target.closest === "function") {
+			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 = main_canvas_of(priv.$container);
+		if ($canvas && typeof $canvas.focus === "function") $canvas.focus({ preventScroll: true });
+	};
+	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")) {
@@ -55589,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`
@@ -58224,7 +58257,7 @@ function ac_key_down(gobj, event, kw, src) {
 		let fullscreen = graph_get_plugin(gobj, "fullscreen");
 		if (fullscreen) {
 			if (key === "F" || key === "f") fullscreen.request();
-			else if (key === "Escape") fullscreen.exit();
+			else if (key === "Escape" && priv.is_fullscreen) fullscreen.exit();
 		}
 	}
 	if (!priv.edit_mode) return 0;

package/dist/gobj-ui.es.js

@@ -53855,6 +53855,7 @@ var PRIVATE_DATA$1 = {
 	_link_saved_styles: [],
 	_focus_topic: null,
 	_focus_ids: [],
+	_on_pointerdown_focus: null,
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_find: null,
@@ -53919,6 +53920,11 @@ function mt_destroy$1(gobj) {
 		i18next.off("languageChanged", priv._on_language_changed);
 		priv._on_language_changed = null;
 	}
+	if (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) {
 		priv.theme_observer.disconnect();
 		priv.theme_observer = null;
@@ -54084,6 +54090,17 @@ function configure_events(gobj) {
 		update_toolbar(gobj);
 	};
 	i18next.on("languageChanged", priv._on_language_changed);
+	priv._on_pointerdown_focus = (ev) => {
+		let target = ev.target;
+		if (target && typeof target.closest === "function") {
+			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 = main_canvas_of(priv.$container);
+		if ($canvas && typeof $canvas.focus === "function") $canvas.focus({ preventScroll: true });
+	};
+	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")) {
@@ -55576,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`
@@ -58211,7 +58244,7 @@ function ac_key_down(gobj, event, kw, src) {
 		let fullscreen = graph_get_plugin(gobj, "fullscreen");
 		if (fullscreen) {
 			if (key === "F" || key === "f") fullscreen.request();
-			else if (key === "Escape") fullscreen.exit();
+			else if (key === "Escape" && priv.is_fullscreen) fullscreen.exit();
 		}
 	}
 	if (!priv.edit_mode) return 0;

package/package.json

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

@@ -333,6 +333,7 @@ let PRIVATE_DATA = {
     _link_saved_styles: [],         // saved port styles to restore on cancel
     _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
     _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
@@ -459,6 +460,16 @@ function mt_destroy(gobj)
         priv._on_language_changed = null;
     }
 
+    if(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) {
         priv.theme_observer.disconnect();
         priv.theme_observer = null;
@@ -787,6 +798,46 @@ function configure_events(gobj)
     };
     i18next.on('languageChanged', priv._on_language_changed);
 
+    /*  Clicking a CARD is clicking a DOM element inside the container,
+     *  and that takes the keyboard away from G6's canvas -- the only
+     *  element that receives keydown. Selecting two nodes by clicking
+     *  them and then pressing Escape did nothing, which is the most
+     *  ordinary way there is to reach for it. The focus goes back on
+     *  every press inside the graph.
+     *
+     *  Except on what is there to be typed into: the popovers this
+     *  gclass appends to its own container carry inputs, and stealing
+     *  their focus on pointerdown would make them impossible to fill
+     *  in.
+     */
+    priv._on_pointerdown_focus = (ev) => {
+        let target = ev.target;
+        if(target && typeof target.closest === "function") {
+            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 = main_canvas_of(priv.$container);
+        if($canvas && typeof $canvas.focus === "function") {
+            $canvas.focus({preventScroll: true});
+        }
+    };
+    /*  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
      *  the find box a text selection and not a selection of every node:
@@ -3087,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.
  *
@@ -6998,11 +7073,17 @@ function ac_key_down(gobj, event, kw, src)
         if(fullscreen) {
             if(key === "F" || key === "f") {
                 fullscreen.request();
-            } else if(key === "Escape") {
-                /*  Escape also clears the selection below, and both are
-                 *  right: the browser exits full screen on Escape
-                 *  whatever we do, so refusing to clear as well would
-                 *  only make the key do less than it appears to.  */
+            } else if(key === "Escape" && priv.is_fullscreen) {
+                /*  Only while actually IN full screen. Asking to leave
+                 *  a full screen nobody entered throws, and since this
+                 *  is now an action rather than a listener, that throw
+                 *  takes the rest of the key with it -- which is how
+                 *  Escape stopped clearing the selection.
+                 *
+                 *  Escape does both when both apply, and that is right:
+                 *  the browser leaves full screen on Escape whatever we
+                 *  do, so refusing to clear as well would only make the
+                 *  key do less than it appears to.  */
                 fullscreen.exit();
             }
         }