Add option to atach to random dom element

src/Inputs/scene.inputManager.ts

@@ -444,12 +444,16 @@ export class InputManager {
     * @param attachUp defines if you want to attach events to pointerup
     * @param attachDown defines if you want to attach events to pointerdown
     * @param attachMove defines if you want to attach events to pointermove
+    * @param elementToAttachTo defines the target DOM element to attach to (will use the canvas by default)
     */
-    public attachControl(attachUp = true, attachDown = true, attachMove = true): void {
+    public attachControl(attachUp = true, attachDown = true, attachMove = true, elementToAttachTo: Nullable<HTMLElement> = null): void {
         let scene = this._scene;
-        var canvas = scene.getEngine().getInputElement();
 
-        if (!canvas) {
+        if (!elementToAttachTo) {
+            elementToAttachTo = scene.getEngine().getInputElement();
+        }
+
+        if (!elementToAttachTo) {
             return;
         }
 
@@ -625,9 +629,9 @@ export class InputManager {
 
             this._updatePointerPosition(evt);
 
-            if (scene.preventDefaultOnPointerDown && canvas) {
+            if (scene.preventDefaultOnPointerDown && elementToAttachTo) {
                 evt.preventDefault();
-                canvas.focus();
+                elementToAttachTo.focus();
             }
 
             this._startingPointerPosition.x = this._pointerX;
@@ -669,9 +673,9 @@ export class InputManager {
 
             this._updatePointerPosition(evt);
 
-            if (scene.preventDefaultOnPointerUp && canvas) {
+            if (scene.preventDefaultOnPointerUp && elementToAttachTo) {
                 evt.preventDefault();
-                canvas.focus();
+                elementToAttachTo.focus();
             }
 
             this._initClickEvent(scene.onPrePointerObservable, scene.onPointerObservable, evt, (clickInfo: _ClickInfo, pickResult: Nullable<PickingInfo>) => {
@@ -768,42 +772,42 @@ export class InputManager {
         // Keyboard events
         this._onCanvasFocusObserver = engine.onCanvasFocusObservable.add((() => {
             let fn = () => {
-                if (!canvas) {
+                if (!elementToAttachTo) {
                     return;
                 }
-                canvas.addEventListener("keydown", this._onKeyDown, false);
-                canvas.addEventListener("keyup", this._onKeyUp, false);
+                elementToAttachTo.addEventListener("keydown", this._onKeyDown, false);
+                elementToAttachTo.addEventListener("keyup", this._onKeyUp, false);
             };
-            if (document.activeElement === canvas) {
+            if (document.activeElement === elementToAttachTo) {
                 fn();
             }
             return fn;
         })());
 
         this._onCanvasBlurObserver = engine.onCanvasBlurObservable.add(() => {
-            if (!canvas) {
+            if (!elementToAttachTo) {
                 return;
             }
-            canvas.removeEventListener("keydown", this._onKeyDown);
-            canvas.removeEventListener("keyup", this._onKeyUp);
+            elementToAttachTo.removeEventListener("keydown", this._onKeyDown);
+            elementToAttachTo.removeEventListener("keyup", this._onKeyUp);
         });
 
         // Pointer events
         var eventPrefix = Tools.GetPointerPrefix();
 
         if (attachMove) {
-            canvas.addEventListener(eventPrefix + "move", <any>this._onPointerMove, false);
+            elementToAttachTo.addEventListener(eventPrefix + "move", <any>this._onPointerMove, false);
 
             // Wheel
             this._wheelEventName = "onwheel" in document.createElement("div") ? "wheel" :       // Modern browsers support "wheel"
                 (<any>document).onmousewheel !== undefined ? "mousewheel" :                     // Webkit and IE support at least "mousewheel"
                     "DOMMouseScroll";                                                           // let's assume that remaining browsers are older Firefox
 
-            canvas.addEventListener(this._wheelEventName, <any>this._onPointerMove, false);
+                    elementToAttachTo.addEventListener(this._wheelEventName, <any>this._onPointerMove, false);
         }
 
         if (attachDown) {
-            canvas.addEventListener(eventPrefix + "down", <any>this._onPointerDown, false);
+            elementToAttachTo.addEventListener(eventPrefix + "down", <any>this._onPointerDown, false);
         }
 
         if (attachUp) {