babylonjs-gui 7.12.0 → 7.13.1

package/babylon.gui.module.d.ts

@@ -67,7 +67,6 @@ import { Layer } from "babylonjs/Layers/layer";
 import { Scene } from "babylonjs/scene";
 import { Container } from "babylonjs-gui/2D/controls/container";
 import { Control } from "babylonjs-gui/2D/controls/control";
-import { IFocusableControl } from "babylonjs-gui/2D/controls/focusableControl";
 import { Style } from "babylonjs-gui/2D/style";
 import { Viewport } from "babylonjs/Maths/math.viewport";
 /**
@@ -178,6 +177,11 @@ export 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
@@ -255,8 +259,8 @@ export 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
      */
@@ -401,6 +405,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     private _translateToPicking;
     /** Attach to all scene events required to support pointer events */
     attach(): void;
+    private _focusNextElement;
     /**
      * @internal
      */
@@ -437,7 +442,7 @@ export 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;
@@ -1037,15 +1042,17 @@ import { Style } from "babylonjs-gui/2D/style";
 import { Matrix2D, Vector2WithInfo } from "babylonjs-gui/2D/math2D";
 import { ICanvasGradient, ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
 import { IAccessibilityTag } from "babylonjs/IAccessibilityTag";
+import { IKeyboardEvent } from "babylonjs/Events/deviceInputEvents";
 import { IAnimatable } from "babylonjs/Animations/animatable.interface";
 import { Animation } from "babylonjs/Animations/animation";
 import { BaseGradient } from "babylonjs-gui/2D/controls/gradient/BaseGradient";
 import { AbstractEngine } from "babylonjs/Engines/abstractEngine";
+import { IFocusableControl } from "babylonjs-gui/2D/controls/focusableControl";
 /**
  * Root class used for all 2D controls
  * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#controls
  */
-export class Control implements IAnimatable {
+export class Control implements IAnimatable, IFocusableControl {
     /** defines the name of the control */
     name?: string | undefined;
     /**
@@ -1267,6 +1274,10 @@ export class Control implements IAnimatable {
      * An event triggered when a control is clicked on
      */
     onPointerClickObservable: Observable<Vector2WithInfo>;
+    /**
+     * An event triggered when a control receives an ENTER key down event
+     */
+    onEnterPressedObservable: Observable<Control>;
     /**
      * An event triggered when pointer enters the control
      */
@@ -1587,6 +1598,52 @@ export class Control implements IAnimatable {
      * Array of animations
      */
     animations: Nullable<Animation[]>;
+    protected _focusedColor: Nullable<string>;
+    /**
+     * Border color when control is focused
+     * When not defined the ADT color will be used. If no ADT color is defined, focused state won't have any border
+     */
+    get focusedColor(): Nullable<string>;
+    set focusedColor(value: Nullable<string>);
+    /**
+     * The tab index of this control. -1 indicates this control is not part of the tab navigation.
+     * A positive value indicates the order of the control in the tab navigation.
+     * A value of 0 indicated the control will be focused after all controls with a positive index.
+     * More than one control can have the same tab index and the navigation would then go through all controls with the same value in an order defined by the layout or the hierarchy.
+     * The value can be changed at any time.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+     */
+    tabIndex: number;
+    protected _isFocused: boolean;
+    protected _unfocusedColor: Nullable<string>;
+    /** Observable raised when the control gets the focus */
+    onFocusObservable: Observable<Control>;
+    /** Observable raised when the control loses the focus */
+    onBlurObservable: Observable<Control>;
+    /** Observable raised when a key event was processed */
+    onKeyboardEventProcessedObservable: Observable<IKeyboardEvent>;
+    /** @internal */
+    onBlur(): void;
+    /** @internal */
+    onFocus(): void;
+    /**
+     * Function called to get the list of controls that should not steal the focus from this control
+     * @returns an array of controls
+     */
+    keepsFocusWith(): Nullable<Control[]>;
+    /**
+     * Function to focus a button programmatically
+     */
+    focus(): void;
+    /**
+     * Function to unfocus a button programmatically
+     */
+    blur(): void;
+    /**
+     * Handles the keyboard event
+     * @param evt Defines the KeyboardEvent
+     */
+    processKeyboard(evt: IKeyboardEvent): void;
     /**
      * Creates a new control
      * @param name defines the name of the control
@@ -2000,59 +2057,22 @@ export class Ellipse extends Container {
 
 }
 declare module "babylonjs-gui/2D/controls/focusableButton" {
-import { Nullable } from "babylonjs/types";
 import { Vector2 } from "babylonjs/Maths/math.vector";
 import { Button } from "babylonjs-gui/2D/controls/button";
 import { Control } from "babylonjs-gui/2D/controls/control";
 import { PointerInfoBase } from "babylonjs/Events/pointerEvents";
 import { IFocusableControl } from "babylonjs-gui/2D/controls/focusableControl";
-import { Observable } from "babylonjs/Misc/observable";
-import { IKeyboardEvent } from "babylonjs/Events/deviceInputEvents";
 /**
  * Class used to create a focusable button that can easily handle keyboard events
  * @since 5.0.0
  */
 export class FocusableButton extends Button implements IFocusableControl {
     name?: string | undefined;
-    /** Highlight color when button is focused */
-    focusedColor: Nullable<string>;
-    private _isFocused;
-    private _unfocusedColor;
-    /** Observable raised when the control gets the focus */
-    onFocusObservable: Observable<Button>;
-    /** Observable raised when the control loses the focus */
-    onBlurObservable: Observable<Button>;
-    /** Observable raised when a key event was processed */
-    onKeyboardEventProcessedObservable: Observable<IKeyboardEvent>;
     constructor(name?: string | undefined);
-    /** @internal */
-    onBlur(): void;
-    /** @internal */
-    onFocus(): void;
-    /**
-     * Function called to get the list of controls that should not steal the focus from this control
-     * @returns an array of controls
-     */
-    keepsFocusWith(): Nullable<Control[]>;
-    /**
-     * Function to focus a button programmatically
-     */
-    focus(): void;
-    /**
-     * Function to unfocus a button programmatically
-     */
-    blur(): void;
-    /**
-     * Handles the keyboard event
-     * @param evt Defines the KeyboardEvent
-     */
-    processKeyboard(evt: IKeyboardEvent): void;
     /**
      * @internal
      */
     _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean;
-    /** @internal */
-    dispose(): void;
 }
 
 }
@@ -2090,6 +2110,15 @@ export interface IFocusableControl {
      * Function to unfocus the control programmatically
      */
     blur(): void;
+    /**
+     * Gets or sets the tabIndex of the control
+     */
+    tabIndex?: number;
+    /**
+     * Gets or sets the color used to draw the focus border
+     * Defaults to "white"
+     */
+    focusBorderColor?: string;
 }
 
 }
@@ -2709,7 +2738,6 @@ import { Vector2 } from "babylonjs/Maths/math.vector";
 import { ClipboardInfo } from "babylonjs/Events/clipboardEvents";
 import { PointerInfo, PointerInfoBase } from "babylonjs/Events/pointerEvents";
 import { Control } from "babylonjs-gui/2D/controls/control";
-import { IFocusableControl } from "babylonjs-gui/2D/controls/focusableControl";
 import { ValueAndUnit } from "babylonjs-gui/2D/valueAndUnit";
 import { VirtualKeyboard } from "babylonjs-gui/2D/controls/virtualKeyboard";
 import { TextWrapper } from "babylonjs-gui/2D/controls/textWrapper";
@@ -2718,19 +2746,17 @@ import { ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
 /**
  * Class used to create input text control
  */
-export class InputText extends Control implements IFocusableControl {
+export class InputText extends Control {
     name?: string | undefined;
     protected _textWrapper: TextWrapper;
     protected _placeholderText: string;
     protected _background: string;
     protected _focusedBackground: string;
-    protected _focusedColor: string;
     protected _placeholderColor: string;
     protected _thickness: number;
     protected _margin: ValueAndUnit;
     protected _autoStretchWidth: boolean;
     protected _maxWidth: ValueAndUnit;
-    protected _isFocused: boolean;
     /** the type of device that most recently focused the input: "mouse", "touch" or "pen" */
     protected _focusedBy: string;
     protected _blinkTimeout: number;
@@ -2775,10 +2801,6 @@ export class InputText extends Control implements IFocusableControl {
     onTextChangedObservable: Observable<InputText>;
     /** Observable raised just before an entered character is to be added */
     onBeforeKeyAddObservable: Observable<InputText>;
-    /** Observable raised when the control gets the focus */
-    onFocusObservable: Observable<InputText>;
-    /** Observable raised when the control loses the focus */
-    onBlurObservable: Observable<InputText>;
     /** Observable raised when the text is highlighted */
     onTextHighlightObservable: Observable<InputText>;
     /** Observable raised when copy event is triggered */
@@ -2787,8 +2809,6 @@ export class InputText extends Control implements IFocusableControl {
     onTextCutObservable: Observable<InputText>;
     /** Observable raised when paste event is triggered */
     onTextPasteObservable: Observable<InputText>;
-    /** Observable raised when a key event was processed */
-    onKeyboardEventProcessedObservable: Observable<IKeyboardEvent>;
     /** Gets or sets the maximum width allowed by the control */
     get maxWidth(): string | number;
     /** Gets the maximum width allowed by the control in pixels */
@@ -2818,7 +2838,6 @@ export class InputText extends Control implements IFocusableControl {
     get focusedBackground(): string;
     set focusedBackground(value: string);
     /** Gets or sets the background color when focused */
-    get focusedColor(): string;
     set focusedColor(value: string);
     /** Gets or sets the background color */
     get background(): string;
@@ -2859,14 +2878,6 @@ export class InputText extends Control implements IFocusableControl {
     onBlur(): void;
     /** @internal */
     onFocus(): void;
-    /**
-     * Function to focus an inputText programmatically
-     */
-    focus(): void;
-    /**
-     * Function to unfocus an inputText programmatically
-     */
-    blur(): void;
     protected _getTypeName(): string;
     /**
      * Function called to get the list of controls that should not steal the focus from this control
@@ -9031,6 +9042,11 @@ declare module BABYLON.GUI {
          * 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
@@ -9108,8 +9124,8 @@ declare module BABYLON.GUI {
         /**
          * Gets or sets the current focused control
          */
-        get focusedControl(): BABYLON.Nullable<IFocusableControl>;
-        set focusedControl(control: BABYLON.Nullable<IFocusableControl>);
+        get focusedControl(): BABYLON.Nullable<Control>;
+        set focusedControl(control: BABYLON.Nullable<Control>);
         /**
          * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
          */
@@ -9254,6 +9270,7 @@ declare module BABYLON.GUI {
         private _translateToPicking;
         /** Attach to all scene events required to support pointer events */
         attach(): void;
+        private _focusNextElement;
         /**
          * @internal
          */
@@ -9290,7 +9307,7 @@ declare module BABYLON.GUI {
          * 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;
@@ -9843,7 +9860,7 @@ declare module BABYLON.GUI {
      * Root class used for all 2D controls
      * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#controls
      */
-    export class Control implements BABYLON.IAnimatable {
+    export class Control implements BABYLON.IAnimatable, IFocusableControl {
         /** defines the name of the control */
         name?: string | undefined;
         /**
@@ -10065,6 +10082,10 @@ declare module BABYLON.GUI {
          * An event triggered when a control is clicked on
          */
         onPointerClickObservable: BABYLON.Observable<Vector2WithInfo>;
+        /**
+         * An event triggered when a control receives an ENTER key down event
+         */
+        onEnterPressedObservable: BABYLON.Observable<Control>;
         /**
          * An event triggered when pointer enters the control
          */
@@ -10385,6 +10406,52 @@ declare module BABYLON.GUI {
          * Array of animations
          */
         animations: BABYLON.Nullable<BABYLON.Animation[]>;
+        protected _focusedColor: BABYLON.Nullable<string>;
+        /**
+         * Border color when control is focused
+         * When not defined the ADT color will be used. If no ADT color is defined, focused state won't have any border
+         */
+        get focusedColor(): BABYLON.Nullable<string>;
+        set focusedColor(value: BABYLON.Nullable<string>);
+        /**
+         * The tab index of this control. -1 indicates this control is not part of the tab navigation.
+         * A positive value indicates the order of the control in the tab navigation.
+         * A value of 0 indicated the control will be focused after all controls with a positive index.
+         * More than one control can have the same tab index and the navigation would then go through all controls with the same value in an order defined by the layout or the hierarchy.
+         * The value can be changed at any time.
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+         */
+        tabIndex: number;
+        protected _isFocused: boolean;
+        protected _unfocusedColor: BABYLON.Nullable<string>;
+        /** BABYLON.Observable raised when the control gets the focus */
+        onFocusObservable: BABYLON.Observable<Control>;
+        /** BABYLON.Observable raised when the control loses the focus */
+        onBlurObservable: BABYLON.Observable<Control>;
+        /** BABYLON.Observable raised when a key event was processed */
+        onKeyboardEventProcessedObservable: BABYLON.Observable<BABYLON.IKeyboardEvent>;
+        /** @internal */
+        onBlur(): void;
+        /** @internal */
+        onFocus(): void;
+        /**
+         * Function called to get the list of controls that should not steal the focus from this control
+         * @returns an array of controls
+         */
+        keepsFocusWith(): BABYLON.Nullable<Control[]>;
+        /**
+         * Function to focus a button programmatically
+         */
+        focus(): void;
+        /**
+         * Function to unfocus a button programmatically
+         */
+        blur(): void;
+        /**
+         * Handles the keyboard event
+         * @param evt Defines the KeyboardEvent
+         */
+        processKeyboard(evt: BABYLON.IKeyboardEvent): void;
         /**
          * Creates a new control
          * @param name defines the name of the control
@@ -10796,45 +10863,11 @@ declare module BABYLON.GUI {
      */
     export class FocusableButton extends Button implements IFocusableControl {
         name?: string | undefined;
-        /** Highlight color when button is focused */
-        focusedColor: BABYLON.Nullable<string>;
-        private _isFocused;
-        private _unfocusedColor;
-        /** BABYLON.Observable raised when the control gets the focus */
-        onFocusObservable: BABYLON.Observable<Button>;
-        /** BABYLON.Observable raised when the control loses the focus */
-        onBlurObservable: BABYLON.Observable<Button>;
-        /** BABYLON.Observable raised when a key event was processed */
-        onKeyboardEventProcessedObservable: BABYLON.Observable<BABYLON.IKeyboardEvent>;
         constructor(name?: string | undefined);
-        /** @internal */
-        onBlur(): void;
-        /** @internal */
-        onFocus(): void;
-        /**
-         * Function called to get the list of controls that should not steal the focus from this control
-         * @returns an array of controls
-         */
-        keepsFocusWith(): BABYLON.Nullable<Control[]>;
-        /**
-         * Function to focus a button programmatically
-         */
-        focus(): void;
-        /**
-         * Function to unfocus a button programmatically
-         */
-        blur(): void;
-        /**
-         * Handles the keyboard event
-         * @param evt Defines the KeyboardEvent
-         */
-        processKeyboard(evt: BABYLON.IKeyboardEvent): void;
         /**
          * @internal
          */
         _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, pi: BABYLON.PointerInfoBase): boolean;
-        /** @internal */
-        dispose(): void;
     }
 
 
@@ -10868,6 +10901,15 @@ declare module BABYLON.GUI {
          * Function to unfocus the control programmatically
          */
         blur(): void;
+        /**
+         * Gets or sets the tabIndex of the control
+         */
+        tabIndex?: number;
+        /**
+         * Gets or sets the color used to draw the focus border
+         * Defaults to "white"
+         */
+        focusBorderColor?: string;
     }
 
 
@@ -11422,19 +11464,17 @@ declare module BABYLON.GUI {
     /**
      * Class used to create input text control
      */
-    export class InputText extends Control implements IFocusableControl {
+    export class InputText extends Control {
         name?: string | undefined;
         protected _textWrapper: TextWrapper;
         protected _placeholderText: string;
         protected _background: string;
         protected _focusedBackground: string;
-        protected _focusedColor: string;
         protected _placeholderColor: string;
         protected _thickness: number;
         protected _margin: ValueAndUnit;
         protected _autoStretchWidth: boolean;
         protected _maxWidth: ValueAndUnit;
-        protected _isFocused: boolean;
         /** the type of device that most recently focused the input: "mouse", "touch" or "pen" */
         protected _focusedBy: string;
         protected _blinkTimeout: number;
@@ -11479,10 +11519,6 @@ declare module BABYLON.GUI {
         onTextChangedObservable: BABYLON.Observable<InputText>;
         /** BABYLON.Observable raised just before an entered character is to be added */
         onBeforeKeyAddObservable: BABYLON.Observable<InputText>;
-        /** BABYLON.Observable raised when the control gets the focus */
-        onFocusObservable: BABYLON.Observable<InputText>;
-        /** BABYLON.Observable raised when the control loses the focus */
-        onBlurObservable: BABYLON.Observable<InputText>;
         /** BABYLON.Observable raised when the text is highlighted */
         onTextHighlightObservable: BABYLON.Observable<InputText>;
         /** BABYLON.Observable raised when copy event is triggered */
@@ -11491,8 +11527,6 @@ declare module BABYLON.GUI {
         onTextCutObservable: BABYLON.Observable<InputText>;
         /** BABYLON.Observable raised when paste event is triggered */
         onTextPasteObservable: BABYLON.Observable<InputText>;
-        /** BABYLON.Observable raised when a key event was processed */
-        onKeyboardEventProcessedObservable: BABYLON.Observable<BABYLON.IKeyboardEvent>;
         /** Gets or sets the maximum width allowed by the control */
         get maxWidth(): string | number;
         /** Gets the maximum width allowed by the control in pixels */
@@ -11522,7 +11556,6 @@ declare module BABYLON.GUI {
         get focusedBackground(): string;
         set focusedBackground(value: string);
         /** Gets or sets the background color when focused */
-        get focusedColor(): string;
         set focusedColor(value: string);
         /** Gets or sets the background color */
         get background(): string;
@@ -11563,14 +11596,6 @@ declare module BABYLON.GUI {
         onBlur(): void;
         /** @internal */
         onFocus(): void;
-        /**
-         * Function to focus an inputText programmatically
-         */
-        focus(): void;
-        /**
-         * Function to unfocus an inputText programmatically
-         */
-        blur(): void;
         protected _getTypeName(): string;
         /**
          * Function called to get the list of controls that should not steal the focus from this control

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "babylonjs-gui",
-    "version": "7.12.0",
+    "version": "7.13.1",
     "main": "babylon.gui.js",
     "types": "babylon.gui.module.d.ts",
     "files": [
@@ -15,7 +15,7 @@
         "test:escheck": "es-check es6 ./babylon.gui.js"
     },
     "dependencies": {
-        "babylonjs": "^7.12.0"
+        "babylonjs": "^7.13.1"
     },
     "devDependencies": {
         "@dev/build-tools": "1.0.0",