feat: input support change listenering target

Author: cptbtptpbcptdtptp

packages/core/src/Engine.ts

@@ -1,4 +1,11 @@
-import { IHardwareRenderer, IPhysics, IPhysicsManager, IShaderLab, IXRDevice } from "@galacean/engine-design";
+import {
+  IHardwareRenderer,
+  IInputOptions,
+  IPhysics,
+  IPhysicsManager,
+  IShaderLab,
+  IXRDevice
+} from "@galacean/engine-design";
 import { Color } from "@galacean/engine-math";
 import { SpriteMaskInteraction } from "./2d";
 import { Font } from "./2d/text/Font";
@@ -256,7 +263,7 @@ export class Engine extends EventDispatcher {
     this._textDefaultFont = Font.createFromOS(this, "Arial");
     this._textDefaultFont.isGCIgnored = true;
 
-    this.inputManager = new InputManager(this);
+    this.inputManager = new InputManager(this, configuration.input);
 
     const { xrDevice } = configuration;
     if (xrDevice) {
@@ -752,6 +759,8 @@ export interface EngineConfiguration {
   xrDevice?: IXRDevice;
   /** Color space. */
   colorSpace?: ColorSpace;
-  /** Shader lab */
+  /** Shader lab. */
   shaderLab?: IShaderLab;
+  /** Input options. */
+  input?: IInputOptions;
 }

packages/core/src/input/InputManager.ts

@@ -1,12 +1,13 @@
+import { IInputOptions } from "@galacean/engine-design";
 import { Vector3 } from "@galacean/engine-math";
 import { Engine } from "../Engine";
+import { Scene } from "../Scene";
 import { Keys } from "./enums/Keys";
 import { PointerButton, _pointerBin2DecMap } from "./enums/PointerButton";
 import { KeyboardManager } from "./keyboard/KeyboardManager";
 import { Pointer } from "./pointer/Pointer";
 import { PointerManager } from "./pointer/PointerManager";
 import { WheelManager } from "./wheel/WheelManager";
-import { Scene } from "../Scene";
 
 /**
  * InputManager manages device input such as mouse, touch, keyboard, etc.
@@ -150,18 +151,14 @@ export class InputManager {
   /**
    * @internal
    */
-  constructor(engine: Engine) {
+  constructor(engine: Engine, inputOptions?: IInputOptions) {
     this._engine = engine;
     // @ts-ignore
     const canvas = engine._canvas._webCanvas;
     if (typeof OffscreenCanvas === "undefined" || !(canvas instanceof OffscreenCanvas)) {
-      this._wheelManager = new WheelManager(engine);
-      this._pointerManager = new PointerManager(engine);
-      this._keyboardManager = new KeyboardManager(engine);
-      this._onBlur = this._onBlur.bind(this);
-      window.addEventListener("blur", this._onBlur);
-      this._onFocus = this._onFocus.bind(this);
-      window.addEventListener("focus", this._onFocus);
+      this._wheelManager = new WheelManager(engine, inputOptions?.wheelTarget ?? canvas);
+      this._pointerManager = new PointerManager(engine, inputOptions?.pointerTarget ?? canvas);
+      this._keyboardManager = new KeyboardManager(engine, inputOptions?.keyboardTarget ?? window);
       this._initialized = true;
     }
   }
@@ -189,8 +186,6 @@ export class InputManager {
    */
   _destroy(): void {
     if (this._initialized) {
-      window.removeEventListener("blur", this._onBlur);
-      window.removeEventListener("focus", this._onFocus);
       this._wheelManager._destroy();
       this._wheelManager = null;
       this._pointerManager._destroy();
@@ -199,16 +194,4 @@ export class InputManager {
       this._keyboardManager = null;
     }
   }
-
-  private _onBlur(): void {
-    this._wheelManager._onBlur();
-    this._pointerManager._onBlur();
-    this._keyboardManager._onBlur();
-  }
-
-  private _onFocus(): void {
-    this._wheelManager._onFocus();
-    this._pointerManager._onFocus();
-    this._keyboardManager._onFocus();
-  }
 }

packages/core/src/input/interface/IInput.ts

@@ -7,12 +7,4 @@ export interface IInput {
    * Function called when the engine is destroyed.
    */
   _destroy(): void;
-  /**
-   * Function called when focused.
-   */
-  _onFocus(): void;
-  /**
-   * Function called when focus is lost.
-   */
-  _onBlur(): void;
 }

packages/core/src/input/keyboard/KeyboardManager.ts

@@ -1,5 +1,5 @@
-import { Engine } from "../../Engine";
 import { DisorderedArray } from "../../DisorderedArray";
+import { Engine } from "../../Engine";
 import { Platform } from "../../Platform";
 import { SystemInfo } from "../../SystemInfo";
 import { Keys } from "../enums/Keys";
@@ -24,25 +24,20 @@ export class KeyboardManager implements IInput {
   /** @internal */
   _curFrameUpList: DisorderedArray<Keys> = new DisorderedArray();
 
+  // @internal
+  _target: EventTarget;
   private _engine: Engine;
-  private _htmlCanvas: HTMLCanvasElement;
   private _nativeEvents: KeyboardEvent[] = [];
-  private _hadListener: boolean = false;
 
   /**
-   * Create a KeyboardManager.
+   * @internal
    */
-  constructor(engine: Engine) {
-    // @ts-ignore
-    const htmlCanvas = engine._canvas._webCanvas;
+  constructor(engine: Engine, target: EventTarget) {
     this._engine = engine;
-    this._htmlCanvas = htmlCanvas;
-    // Need to set tabIndex to make the canvas focus.
-    htmlCanvas.tabIndex = htmlCanvas.tabIndex;
+    this._onBlur = this._onBlur.bind(this);
     this._onKeyEvent = this._onKeyEvent.bind(this);
-    htmlCanvas.addEventListener("keydown", this._onKeyEvent);
-    htmlCanvas.addEventListener("keyup", this._onKeyEvent);
-    this._hadListener = true;
+    this._target = target;
+    this._addEventListener();
   }
 
   /**
@@ -101,42 +96,11 @@ export class KeyboardManager implements IInput {
     }
   }
 
-  /**
-   * @internal
-   */
-  _onFocus(): void {
-    if (!this._hadListener) {
-      this._htmlCanvas.addEventListener("keydown", this._onKeyEvent);
-      this._htmlCanvas.addEventListener("keyup", this._onKeyEvent);
-      this._hadListener = true;
-    }
-  }
-
-  /**
-   * @internal
-   */
-  _onBlur(): void {
-    if (this._hadListener) {
-      this._htmlCanvas.removeEventListener("keydown", this._onKeyEvent);
-      this._htmlCanvas.removeEventListener("keyup", this._onKeyEvent);
-      this._curHeldDownKeyToIndexMap.length = 0;
-      this._curFrameHeldDownList.length = 0;
-      this._curFrameDownList.length = 0;
-      this._curFrameUpList.length = 0;
-      this._nativeEvents.length = 0;
-      this._hadListener = false;
-    }
-  }
-
   /**
    * @internal
    */
   _destroy(): void {
-    if (this._hadListener) {
-      this._htmlCanvas.removeEventListener("keydown", this._onKeyEvent);
-      this._htmlCanvas.removeEventListener("keyup", this._onKeyEvent);
-      this._hadListener = false;
-    }
+    this._removeEventListener();
     this._curHeldDownKeyToIndexMap.length = 0;
     this._curHeldDownKeyToIndexMap = null;
     this._upKeyToFrameCountMap.length = 0;
@@ -151,11 +115,32 @@ export class KeyboardManager implements IInput {
     this._curFrameDownList = null;
     this._curFrameUpList.length = 0;
     this._curFrameUpList = null;
-    this._htmlCanvas = null;
     this._engine = null;
   }
 
+  private _onBlur() {
+    this._curHeldDownKeyToIndexMap.length = 0;
+    this._curFrameHeldDownList.length = 0;
+    this._curFrameDownList.length = 0;
+    this._curFrameUpList.length = 0;
+    this._nativeEvents.length = 0;
+  }
+
   private _onKeyEvent(evt: KeyboardEvent): void {
     this._nativeEvents.push(evt);
   }
+
+  private _addEventListener(): void {
+    const { _target: target } = this;
+    target.addEventListener("keydown", this._onKeyEvent);
+    target.addEventListener("keyup", this._onKeyEvent);
+    target.addEventListener("blur", this._onBlur);
+  }
+
+  private _removeEventListener(): void {
+    const { _target: target } = this;
+    target.removeEventListener("keydown", this._onKeyEvent);
+    target.removeEventListener("keyup", this._onKeyEvent);
+    target.removeEventListener("blur", this._onBlur);
+  }
 }

packages/core/src/input/pointer/Pointer.ts

@@ -24,6 +24,8 @@ export class Pointer {
   position: Vector2 = new Vector2();
   /** The change of the pointer. */
   deltaPosition: Vector2 = new Vector2();
+  /** The current target element of the pointer. */
+  currentTarget: EventTarget;
   /** @internal */
   _events: PointerEvent[] = [];
   /** @internal */