Offscreen canvas requires no input interaction. (#689)

* fix:InputManager when use OffScreenCanvas
galacean · Mar 16, 2022 · 4146574 · 4146574
1 parent 9c042e6
commit 4146574
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/packages/core/src/input/InputManager.ts b/packages/core/src/input/InputManager.ts
@@ -6,45 +6,55 @@ import { PointerManager } from "./pointer/PointerManager";
  * InputManager manages device input such as mouse, touch, keyboard, etc.
  */
 export class InputManager {
+  /** Disable input for offscreen rendering. */
+  private _enabled: boolean = true;
   private _pointerManager: PointerManager;
 
   /**
    * Pointer List.
    */
   get pointers(): Readonly<Pointer[]> {
-    return this._pointerManager._pointers;
+    return this._enabled ? this._pointerManager._pointers : null;
   }
 
   /**
    *  Whether to handle multi-pointer.
    */
   get multiPointerEnabled(): boolean {
-    return this._pointerManager._multiPointerEnabled;
+    return this._enabled ? this._pointerManager._multiPointerEnabled : false;
   }
 
   set multiPointerEnabled(enabled: boolean) {
-    this._pointerManager._multiPointerEnabled = enabled;
+    this._enabled && (this._pointerManager._multiPointerEnabled = enabled);
   }
 
   /**
    * @internal
    */
   constructor(engine: Engine) {
     // @ts-ignore
-    this._pointerManager = new PointerManager(engine, engine.canvas._webCanvas);
+    const canvas = engine._canvas._webCanvas;
+    if (canvas instanceof HTMLCanvasElement) {
+      this._enabled = true;
+      this._pointerManager = new PointerManager(engine, canvas);
+    } else {
+      this._enabled = false;
+    }
   }
 
   /**
    * @internal
    */
   _update(): void {
-    this._pointerManager._update();
+    if (this._enabled) {
+      this._pointerManager._update();
+    }
   }
 
   /**
    * @internal
    */
   _destroy(): void {
-    this._pointerManager._destroy();
+    this._enabled && this._pointerManager._destroy();
   }
 }
diff --git a/packages/core/src/input/pointer/PointerManager.ts b/packages/core/src/input/pointer/PointerManager.ts
@@ -37,15 +37,14 @@ export class PointerManager {
   /**
    * Create a PointerManager.
    * @param engine - The current engine instance
+   * @param htmlCanvas - HTMLCanvasElement
    */
-  constructor(engine: Engine) {
+  constructor(engine: Engine, htmlCanvas: HTMLCanvasElement) {
     this._engine = engine;
     this._canvas = engine.canvas;
-    // @ts-ignore
-    const htmlCanvas = this._canvas._webCanvas as HTMLCanvasElement;
     htmlCanvas.style.touchAction = "none";
     // prettier-ignore
-    htmlCanvas.onpointerdown = htmlCanvas.onpointerup = htmlCanvas.onpointerout = htmlCanvas.onpointermove = (evt:PointerEvent)=>{
+    htmlCanvas.onpointerdown = htmlCanvas.onpointerup = htmlCanvas.onpointerout = htmlCanvas.onpointermove = (evt: PointerEvent) => {
       this._nativeEvents.push(evt);
     };
     // If there are no compatibility issues, navigator.maxTouchPoints should be used here.