fix(core): make raycaster compatible with thouch screens

Author: agviegas

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thatopen/components",
   "description": "Collection of core functionalities to author BIM apps.",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "author": "That Open Company",
   "contributors": [
     "Antonio Gonzalez Viegas (https://github.com/agviegas)",

packages/core/src/core/Components/index.ts

@@ -14,7 +14,7 @@ export class Components implements Disposable {
   /**
    * The version of the @thatopen/components library.
    */
-  static readonly release = "2.3.6";
+  static readonly release = "2.3.7";
 
   /** {@link Disposable.onDisposed} */
   readonly onDisposed = new Event<void>();

packages/core/src/core/Raycasters/src/mouse.ts

@@ -5,7 +5,7 @@ import { Disposable, Event } from "../../Types";
  * A helper to easily get the real position of the mouse in the Three.js canvas to work with tools like the [raycaster](https://threejs.org/docs/#api/en/core/Raycaster), even if it has been transformed through CSS or doesn't occupy the whole screen.
  */
 export class Mouse implements Disposable {
-  private _event?: MouseEvent;
+  private _event?: MouseEvent | TouchEvent;
   private _position = new THREE.Vector2();
 
   /** {@link Disposable.onDisposed} */
@@ -34,23 +34,31 @@ export class Mouse implements Disposable {
     this.onDisposed.reset();
   }
 
-  private getPositionY(bound: DOMRect, event: MouseEvent) {
-    return -((event.clientY - bound.top) / (bound.bottom - bound.top)) * 2 + 1;
+  private getPositionY(bound: DOMRect, event: MouseEvent | TouchEvent) {
+    const data = this.getDataObject(event);
+    return -((data.clientY - bound.top) / (bound.bottom - bound.top)) * 2 + 1;
   }
 
-  private getPositionX(bound: DOMRect, event: MouseEvent) {
-    return ((event.clientX - bound.left) / (bound.right - bound.left)) * 2 - 1;
+  private getPositionX(bound: DOMRect, event: MouseEvent | TouchEvent) {
+    const data = this.getDataObject(event);
+    return ((data.clientX - bound.left) / (bound.right - bound.left)) * 2 - 1;
   }
 
-  private updateMouseInfo = (event: MouseEvent) => {
+  private updateMouseInfo = (event: MouseEvent | TouchEvent) => {
     this._event = event;
   };
 
+  private getDataObject(event: MouseEvent | TouchEvent) {
+    return event instanceof MouseEvent ? event : event.touches[0];
+  }
+
   private setupEvents(active: boolean) {
     if (active) {
       this.dom.addEventListener("pointermove", this.updateMouseInfo);
+      this.dom.addEventListener("touchstart", this.updateMouseInfo);
     } else {
       this.dom.removeEventListener("pointermove", this.updateMouseInfo);
+      this.dom.removeEventListener("touchstart", this.updateMouseInfo);
     }
   }
 }