@babylonjs/gui 7.12.0 → 7.13.1

package/2D/advancedDynamicTexture.d.ts

@@ -10,7 +10,6 @@ import { Layer } from "@babylonjs/core/Layers/layer.js";
 import type { Scene } from "@babylonjs/core/scene.js";
 import { Container } from "./controls/container";
 import { Control } from "./controls/control";
-import type { IFocusableControl } from "./controls/focusableControl";
 import { Style } from "./style";
 import { Viewport } from "@babylonjs/core/Maths/math.viewport.js";
 /**
@@ -121,6 +120,11 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
      * Gets or sets a boolean indicating that the canvas must be reverted on Y when updating the texture
      */
     applyYInversionOnUpdate: boolean;
+    /**
+     * A boolean indicating whether or not the elements can be navigated to using the tab key.
+     * Defaults to false.
+     */
+    disableTabNavigation: boolean;
     /**
      * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger).
      * Useful when you want more antialiasing
@@ -198,8 +202,8 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
     /**
      * Gets or sets the current focused control
      */
-    get focusedControl(): Nullable<IFocusableControl>;
-    set focusedControl(control: Nullable<IFocusableControl>);
+    get focusedControl(): Nullable<Control>;
+    set focusedControl(control: Nullable<Control>);
     /**
      * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
      */
@@ -344,6 +348,7 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
     private _translateToPicking;
     /** Attach to all scene events required to support pointer events */
     attach(): void;
+    private _focusNextElement;
     /**
      * @internal
      */
@@ -380,7 +385,7 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
      * Move the focus to a specific control
      * @param control defines the control which will receive the focus
      */
-    moveFocusToControl(control: IFocusableControl): void;
+    moveFocusToControl(control: Control): void;
     private _manageFocus;
     private _attachPickingToSceneRender;
     private _attachToOnPointerOut;

package/2D/advancedDynamicTexture.js

@@ -316,6 +316,11 @@ export class AdvancedDynamicTexture extends DynamicTexture {
          * Gets or sets a boolean indicating that the canvas must be reverted on Y when updating the texture
          */
         this.applyYInversionOnUpdate = true;
+        /**
+         * A boolean indicating whether or not the elements can be navigated to using the tab key.
+         * Defaults to false.
+         */
+        this.disableTabNavigation = false;
         /**
          * If this is set, even when a control is pointer blocker, some events can still be passed through to the scene.
          * Options from values are PointerEventTypes
@@ -387,6 +392,12 @@ export class AdvancedDynamicTexture extends DynamicTexture {
             }
         });
         this._preKeyboardObserver = scene.onPreKeyboardObservable.add((info) => {
+            // check if tab is pressed
+            if (!this.disableTabNavigation && info.type === KeyboardEventTypes.KEYDOWN && info.event.code === "Tab") {
+                this._focusNextElement(!info.event.shiftKey);
+                info.event.preventDefault();
+                return;
+            }
             if (!this._focusedControl) {
                 return;
             }
@@ -923,6 +934,39 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         this._attachToOnPointerOut(scene);
         this._attachToOnBlur(scene);
     }
+    _focusNextElement(forward = true) {
+        // generate the order of tab-able controls
+        const sortedTabbableControls = [];
+        this.executeOnAllControls((control) => {
+            if (control.isFocusInvisible || !control.isVisible || control.tabIndex < 0) {
+                return;
+            }
+            sortedTabbableControls.push(control);
+        });
+        // if no control is tab-able, return
+        if (sortedTabbableControls.length === 0) {
+            return;
+        }
+        sortedTabbableControls.sort((a, b) => {
+            // if tabIndex is 0, put it in the end of the list, otherwise sort by tabIndex
+            return a.tabIndex === 0 ? 1 : b.tabIndex === 0 ? -1 : a.tabIndex - b.tabIndex;
+        });
+        // if no control is focused, focus the first one
+        if (!this._focusedControl) {
+            sortedTabbableControls[0].focus();
+        }
+        else {
+            const currentIndex = sortedTabbableControls.indexOf(this._focusedControl);
+            let nextIndex = currentIndex + (forward ? 1 : -1);
+            if (nextIndex < 0) {
+                nextIndex = sortedTabbableControls.length - 1;
+            }
+            else if (nextIndex >= sortedTabbableControls.length) {
+                nextIndex = 0;
+            }
+            sortedTabbableControls[nextIndex].focus();
+        }
+    }
     /**
      * Register the clipboard Events onto the canvas
      */