Fix having vkeyboard on a different host than inputText

http://www.html5gamedevs.com/topic/39754-virtual-keyboard-different-plane/

dist/preview release/gui/babylon.gui.d.ts

@@ -1,6 +1,6 @@
 /*BabylonJS GUI*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../tools/Gulp/babylonjs
 declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
@@ -27,6 +27,12 @@ declare module BABYLON.GUI {
                 * @param evt defines the current keyboard event
                 */
             processKeyboard(evt: KeyboardEvent): void;
+            /**
+                * Function called to let the current focused control keeps the focus
+                * @param pointerId defines the unique id of the current pointer
+                * @returns a boolean indicating if the control wants to keep the focus
+                */
+            keepFocus(pointerId: number): boolean;
     }
     /**
         * Class used to create texture to support 2D GUI elements
@@ -1076,6 +1082,12 @@ declare module BABYLON.GUI {
             /** @hidden */
             _resetFontCache(): void;
             /**
+                * Determines if a container is an ascendant of the current control
+                * @param container defines the container to look for
+                * @returns true if the container is one of the ascendant of the control
+                */
+            IsAscendant(container: Container): boolean;
+            /**
                 * Gets coordinates in local control space
                 * @param globalCoordinates defines the coordinates to transform
                 * @returns the new coordinates in local space
@@ -1365,6 +1377,8 @@ declare module BABYLON.GUI {
         */
     export class InputText extends Control implements IFocusableControl {
             name?: string | undefined;
+            /** @hidden */
+            _connectedVirtualKeyboard: BABYLON.Nullable<VirtualKeyboard>;
             /** Gets or sets a string representing the message displayed on mobile when the control gets the focus */
             promptMessage: string;
             /** BABYLON.Observable raised when the text changes */
@@ -1416,6 +1430,12 @@ declare module BABYLON.GUI {
             /** @hidden */
             onFocus(): void;
             protected _getTypeName(): string;
+            /**
+                * Function called to let the current focused control keeps the focus
+                * @param pointerId defines the unique id of the current pointer
+                * @returns a boolean indicating if the control wants to keep the focus
+                */
+            keepFocus(pointerId: number): boolean;
             /** @hidden */
             processKey(keyCode: number, key?: string): void;
             /** @hidden */

dist/preview release/gui/babylon.gui.module.d.ts

@@ -1,6 +1,6 @@
 /*BabylonJS GUI*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../tools/Gulp/babylonjs
 
 declare module 'babylonjs-gui' {
     export * from "babylonjs-gui/2D";
@@ -70,6 +70,12 @@ declare module 'babylonjs-gui/2D/advancedDynamicTexture' {
                 * @param evt defines the current keyboard event
                 */
             processKeyboard(evt: KeyboardEvent): void;
+            /**
+                * Function called to let the current focused control keeps the focus
+                * @param pointerId defines the unique id of the current pointer
+                * @returns a boolean indicating if the control wants to keep the focus
+                */
+            keepFocus(pointerId: number): boolean;
     }
     /**
         * Class used to create texture to support 2D GUI elements
@@ -1179,6 +1185,12 @@ declare module 'babylonjs-gui/2D/controls/control' {
             /** @hidden */
             _resetFontCache(): void;
             /**
+                * Determines if a container is an ascendant of the current control
+                * @param container defines the container to look for
+                * @returns true if the container is one of the ascendant of the control
+                */
+            IsAscendant(container: Container): boolean;
+            /**
                 * Gets coordinates in local control space
                 * @param globalCoordinates defines the coordinates to transform
                 * @returns the new coordinates in local space
@@ -1477,13 +1489,16 @@ declare module 'babylonjs-gui/2D/controls/image' {
 declare module 'babylonjs-gui/2D/controls/inputText' {
     import { Control } from "babylonjs-gui/2D/controls/control";
     import { IFocusableControl } from "babylonjs-gui/2D/advancedDynamicTexture";
-    import { Observable, Vector2 } from "babylonjs";
+    import { Nullable, Observable, Vector2 } from "babylonjs";
     import { Measure } from "babylonjs-gui/2D/measure";
+    import { VirtualKeyboard } from "babylonjs-gui/2D/controls/virtualKeyboard";
     /**
         * Class used to create input text control
         */
     export class InputText extends Control implements IFocusableControl {
             name?: string | undefined;
+            /** @hidden */
+            _connectedVirtualKeyboard: Nullable<VirtualKeyboard>;
             /** Gets or sets a string representing the message displayed on mobile when the control gets the focus */
             promptMessage: string;
             /** Observable raised when the text changes */
@@ -1535,6 +1550,12 @@ declare module 'babylonjs-gui/2D/controls/inputText' {
             /** @hidden */
             onFocus(): void;
             protected _getTypeName(): string;
+            /**
+                * Function called to let the current focused control keeps the focus
+                * @param pointerId defines the unique id of the current pointer
+                * @returns a boolean indicating if the control wants to keep the focus
+                */
+            keepFocus(pointerId: number): boolean;
             /** @hidden */
             processKey(keyCode: number, key?: string): void;
             /** @hidden */
@@ -2787,7 +2808,7 @@ declare module 'babylonjs-gui/3D/materials/fluentMaterial' {
 
 /*BabylonJS GUI*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../tools/Gulp/babylonjs
 declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
@@ -2814,6 +2835,12 @@ declare module BABYLON.GUI {
                 * @param evt defines the current keyboard event
                 */
             processKeyboard(evt: KeyboardEvent): void;
+            /**
+                * Function called to let the current focused control keeps the focus
+                * @param pointerId defines the unique id of the current pointer
+                * @returns a boolean indicating if the control wants to keep the focus
+                */
+            keepFocus(pointerId: number): boolean;
     }
     /**
         * Class used to create texture to support 2D GUI elements
@@ -3863,6 +3890,12 @@ declare module BABYLON.GUI {
             /** @hidden */
             _resetFontCache(): void;
             /**
+                * Determines if a container is an ascendant of the current control
+                * @param container defines the container to look for
+                * @returns true if the container is one of the ascendant of the control
+                */
+            IsAscendant(container: Container): boolean;
+            /**
                 * Gets coordinates in local control space
                 * @param globalCoordinates defines the coordinates to transform
                 * @returns the new coordinates in local space
@@ -4152,6 +4185,8 @@ declare module BABYLON.GUI {
         */
     export class InputText extends Control implements IFocusableControl {
             name?: string | undefined;
+            /** @hidden */
+            _connectedVirtualKeyboard: BABYLON.Nullable<VirtualKeyboard>;
             /** Gets or sets a string representing the message displayed on mobile when the control gets the focus */
             promptMessage: string;
             /** BABYLON.Observable raised when the text changes */
@@ -4203,6 +4238,12 @@ declare module BABYLON.GUI {
             /** @hidden */
             onFocus(): void;
             protected _getTypeName(): string;
+            /**
+                * Function called to let the current focused control keeps the focus
+                * @param pointerId defines the unique id of the current pointer
+                * @returns a boolean indicating if the control wants to keep the focus
+                */
+            keepFocus(pointerId: number): boolean;
             /** @hidden */
             processKey(keyCode: number, key?: string): void;
             /** @hidden */

dist/preview release/inspector/babylon.inspector.d.ts

@@ -1,6 +1,6 @@
 /*BabylonJS Inspector*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../tools/Gulp/babylonjs
 declare module INSPECTOR {
 }
 declare module INSPECTOR {

dist/preview release/inspector/babylon.inspector.module.d.ts

@@ -1,6 +1,6 @@
 /*BabylonJS Inspector*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../tools/Gulp/babylonjs
 
 declare module 'babylonjs-inspector' {
     export * from 'babylonjs-inspector/adapters';
@@ -1340,7 +1340,7 @@ declare module 'babylonjs-inspector/treetools/SoundInteractions' {
 
 /*BabylonJS Inspector*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../tools/Gulp/babylonjs
 declare module INSPECTOR {
 }
 declare module INSPECTOR {

dist/preview release/viewer/babylon.viewer.d.ts

@@ -4,8 +4,8 @@
 declare module "babylonjs-loaders"{ export=BABYLON;}
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
-//   ../../../../../Tools/Gulp/babylonjs
-//   ../../../../../Tools/Gulp/babylonjs-loaders
+//   ../../../../../tools/Gulp/babylonjs
+//   ../../../../../tools/Gulp/babylonjs-loaders
 declare module BabylonViewer {
     /**
         * BabylonJS Viewer
@@ -924,7 +924,7 @@ declare module BabylonViewer {
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
@@ -1558,20 +1558,6 @@ declare module BabylonViewer {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 declare module BabylonViewer {
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-declare module BabylonViewer {
 }
 declare module BabylonViewer {
     export interface IEnvironmentMapConfiguration {

dist/preview release/viewer/babylon.viewer.module.d.ts

@@ -5,8 +5,8 @@ declare module "babylonjs-loaders"{ export=BABYLON;}
 
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
-//   ../../../../../Tools/Gulp/babylonjs
-//   ../../../../../Tools/Gulp/babylonjs-loaders
+//   ../../../../../tools/Gulp/babylonjs
+//   ../../../../../tools/Gulp/babylonjs-loaders
 
 declare module 'babylonjs-viewer' {
     import { mapperManager } from 'babylonjs-viewer/configuration/mappers';
@@ -985,14 +985,13 @@ declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
-    import { extendedUpgrade } from "babylonjs-viewer/optimizer/custom/extended";
     import { SceneManager } from "babylonjs-viewer/managers/sceneManager";
     /**
       *
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 
@@ -1663,22 +1662,6 @@ declare module 'babylonjs-viewer/loader/plugins' {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 
-declare module 'babylonjs-viewer/optimizer/custom/extended' {
-    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces' {
     export * from 'babylonjs-viewer/configuration/interfaces/cameraConfiguration';
     export * from 'babylonjs-viewer/configuration/interfaces/colorGradingConfiguration';

gui/src/2D/advancedDynamicTexture.ts

@@ -21,6 +21,13 @@ export interface IFocusableControl {
      * @param evt defines the current keyboard event
      */
     processKeyboard(evt: KeyboardEvent): void;
+
+    /**
+     * Function called to let the current focused control keeps the focus
+     * @param pointerId defines the unique id of the current pointer
+     * @returns a boolean indicating if the control wants to keep the focus
+     */
+    keepFocus(pointerId: number): boolean;
 }
 
 /**
@@ -658,7 +665,11 @@ export class AdvancedDynamicTexture extends DynamicTexture {
                 }
                 delete this._lastControlDown[pointerId];
 
-                this.focusedControl = null;
+                if (this.focusedControl) {
+                    if (!this.focusedControl.keepFocus(pointerId)) {
+                        this.focusedControl = null;
+                    }
+                }
             } else if (pi.type === PointerEventTypes.POINTERMOVE) {
                 if (this._lastControlOver[pointerId]) {
                     this._lastControlOver[pointerId]._onPointerOut(this._lastControlOver[pointerId]);

gui/src/2D/controls/control.ts

@@ -745,6 +745,23 @@ export class Control {
         this._markAsDirty();
     }
 
+    /**
+     * Determines if a container is an ascendant of the current control
+     * @param container defines the container to look for
+     * @returns true if the container is one of the ascendant of the control
+     */
+    public IsAscendant(container: Container): boolean {
+        if (!this.parent) {
+            return false;
+        }
+
+        if (this.parent === container) {
+            return true;
+        }
+
+        return this.parent.IsAscendant(container);
+    }
+
     /** 
      * Gets coordinates in local control space 
      * @param globalCoordinates defines the coordinates to transform

gui/src/2D/controls/inputText.ts

@@ -3,6 +3,7 @@ import { IFocusableControl } from "../advancedDynamicTexture";
 import { ValueAndUnit } from "../valueAndUnit";
 import { Nullable, Observable, Vector2 } from "babylonjs";
 import { Measure } from "../measure";
+import { VirtualKeyboard } from "./virtualKeyboard";
 
 /**
  * Class used to create input text control
@@ -28,6 +29,9 @@ export class InputText extends Control implements IFocusableControl {
     private _addKey = true;
     private _currentKey = "";
 
+    /** @hidden */
+    public _connectedVirtualKeyboard: Nullable<VirtualKeyboard>;
+
     /** Gets or sets a string representing the message displayed on mobile when the control gets the focus */
     public promptMessage = "Please enter text:";
 
@@ -272,6 +276,31 @@ export class InputText extends Control implements IFocusableControl {
         return "InputText";
     }
 
+    /**
+     * Function called to let the current focused control keeps the focus
+     * @param pointerId defines the unique id of the current pointer generating the focus change
+     * @returns a boolean indicating if the control wants to keep the focus
+     */
+    public keepFocus(pointerId: number): boolean {
+        if (!this._connectedVirtualKeyboard) {
+            return false;
+        }
+
+        // Same host, no need to keep the focus
+        if (this._host === this._connectedVirtualKeyboard._host) {
+            return false;
+        }
+
+        // Different hosts
+        const otherHost = this._connectedVirtualKeyboard._host;
+
+        if (otherHost._lastControlOver[pointerId] && otherHost._lastControlOver[pointerId].IsAscendant(this._connectedVirtualKeyboard)) {
+            return true;
+        }
+
+        return false;
+    }
+
     /** @hidden */
     public processKey(keyCode: number, key?: string) {
         // Specific cases

gui/src/2D/controls/virtualKeyboard.ts

@@ -182,6 +182,9 @@ export class VirtualKeyboard extends StackPanel {
                 if (!this._currentlyConnectedInputText) {
                     return;
                 }
+
+                this._currentlyConnectedInputText._host.focusedControl = this._currentlyConnectedInputText;
+
                 switch (key) {
                     case "\u21E7":
                         this.shiftState++;
@@ -208,14 +211,17 @@ export class VirtualKeyboard extends StackPanel {
 
         this.isVisible = false;
         this._currentlyConnectedInputText = input;
+        input._connectedVirtualKeyboard = this;
         
         // Events hooking
         const onFocusObserver: Nullable<Observer<InputText>> = input.onFocusObservable.add(() => {
             this._currentlyConnectedInputText = input;
+            input._connectedVirtualKeyboard = this;
             this.isVisible = true;
         });
 
         const onBlurObserver: Nullable<Observer<InputText>> = input.onBlurObservable.add(() => {
+            input._connectedVirtualKeyboard = null;
             this._currentlyConnectedInputText = null;
             this.isVisible = false;
         });
@@ -259,6 +265,7 @@ export class VirtualKeyboard extends StackPanel {
     }
 
     private _removeConnectedInputObservables(connectedInputText: ConnectedInputText) : void {
+        connectedInputText.input._connectedVirtualKeyboard = null;
         connectedInputText.input.onFocusObservable.remove(connectedInputText.onFocusObserver);
         connectedInputText.input.onBlurObservable.remove(connectedInputText.onBlurObserver);
     }