Relates to #1270, cleaning up the interface

Signed-off-by: Jonathan Stichbury <2533428+nzjony@users.noreply.github.com>

@here/harp-mapview/lib/MapView.ts

@@ -750,7 +750,7 @@ export class MapView extends THREE.EventDispatcher {
     private m_enablePolarDataSource: boolean = true;
 
     // gestures
-    private readonly m_raycaster = new PickingRaycaster(this);
+    private readonly m_raycaster: PickingRaycaster;
     private readonly m_plane = new THREE.Plane(new THREE.Vector3(0, 0, 1));
     private readonly m_sphere = new THREE.Sphere(undefined, EarthConstants.EQUATORIAL_RADIUS);
 
@@ -958,6 +958,8 @@ export class MapView extends THREE.EventDispatcher {
         this.setupCamera(options);
         this.m_targetDistance = this.m_camera.position.distanceTo(this.m_targetWorldPos);
 
+        this.m_raycaster = new PickingRaycaster(this.m_camera, width, height);
+
         this.m_movementDetector = new CameraMovementDetector(
             this.m_options.movementThrottleTimeout,
             () => this.movementStarted(),

@here/harp-mapview/lib/MapViewPoints.ts

@@ -64,11 +64,10 @@ export abstract class MapViewPoints extends THREE.Points {
         const screenCoords = raycaster.ray.origin
             .clone()
             .add(raycaster.ray.direction)
-            .project(raycaster.mapView.camera);
-        const { clientWidth, clientHeight } = raycaster.mapView.canvas;
+            .project(raycaster.camera);
         const mouseCoords = new THREE.Vector2(
-            Math.ceil(((screenCoords.x + 1) / 2) * clientWidth),
-            Math.ceil(((1 - screenCoords.y) / 2) * clientHeight)
+            Math.ceil(((screenCoords.x + 1) / 2) * raycaster.width),
+            Math.ceil(((1 - screenCoords.y) / 2) * raycaster.height)
         );
 
         if (geometry instanceof THREE.BufferGeometry) {
@@ -81,13 +80,7 @@ export abstract class MapViewPoints extends THREE.Points {
                 for (let i = 0, il = indices.length; i < il; i++) {
                     const a = indices[i];
                     point.fromArray(positions as number[], a * 3);
-                    const pointInfo = getPointInfo(
-                        point,
-                        matrixWorld,
-                        raycaster,
-                        clientWidth,
-                        clientHeight
-                    );
+                    const pointInfo = getPointInfo(point, matrixWorld, raycaster);
                     if (pointInfo.pointIsOnScreen) {
                         this.testPoint(
                             point,
@@ -102,13 +95,7 @@ export abstract class MapViewPoints extends THREE.Points {
             } else {
                 for (let i = 0, l = positions.length / 3; i < l; i++) {
                     point.fromArray(positions as number[], i * 3);
-                    const pointInfo = getPointInfo(
-                        point,
-                        matrixWorld,
-                        raycaster,
-                        clientWidth,
-                        clientHeight
-                    );
+                    const pointInfo = getPointInfo(point, matrixWorld, raycaster);
                     if (pointInfo.pointIsOnScreen) {
                         this.testPoint(
                             point,
@@ -125,13 +112,7 @@ export abstract class MapViewPoints extends THREE.Points {
             const vertices = geometry.vertices;
             for (let index = 0; index < vertices.length; index++) {
                 const point = vertices[index];
-                const pointInfo = getPointInfo(
-                    point,
-                    matrixWorld,
-                    raycaster,
-                    clientWidth,
-                    clientHeight
-                );
+                const pointInfo = getPointInfo(point, matrixWorld, raycaster);
                 if (pointInfo.pointIsOnScreen) {
                     this.testPoint(
                         point,
@@ -150,9 +131,7 @@ export abstract class MapViewPoints extends THREE.Points {
 function getPointInfo(
     point: THREE.Vector3,
     matrixWorld: THREE.Matrix4,
-    raycaster: PickingRaycaster,
-    width: number,
-    height: number
+    raycaster: PickingRaycaster
 ): {
     pointIsOnScreen: boolean;
     absoluteScreenPosition?: THREE.Vector2;
@@ -161,16 +140,16 @@ function getPointInfo(
     const worldPosition = point.clone();
     worldPosition.applyMatrix4(matrixWorld);
     const distance = worldPosition.distanceTo(raycaster.ray.origin);
-    worldPosition.project(raycaster.mapView.camera);
+    worldPosition.project(raycaster.camera);
     const relativeScreenPosition = new THREE.Vector2(worldPosition.x, worldPosition.y);
     const pointIsOnScreen =
         relativeScreenPosition.x < 1 &&
         relativeScreenPosition.x > -1 &&
         relativeScreenPosition.y < 1 &&
         relativeScreenPosition.y > -1;
     if (pointIsOnScreen) {
-        worldPosition.x = ((worldPosition.x + 1) / 2) * width;
-        worldPosition.y = ((1 - worldPosition.y) / 2) * height;
+        worldPosition.x = ((worldPosition.x + 1) / 2) * raycaster.width;
+        worldPosition.y = ((1 - worldPosition.y) / 2) * raycaster.height;
         const absoluteScreenPosition = new THREE.Vector2(worldPosition.x, worldPosition.y);
         return {
             absoluteScreenPosition,

@here/harp-mapview/lib/PickingRaycaster.ts

@@ -5,21 +5,21 @@
  */
 
 import * as THREE from "three";
-import { MapView } from "./MapView";
 
 /**
  * Raycasting points is not supported as necessary in Three.js. This class extends a
- * [[THREE.Raycaster]] except that it holds a reference to [[MapView]] allowing to access the
- * camera and the renderer from [[MapViewPoints]], in order to project the points in screen space.
+ * [[THREE.Raycaster]] by holding a reference to [[Camera]] allowing to project the points in screen
+ * space, used for example in the [[MapViewPoints]].
  */
 export class PickingRaycaster extends THREE.Raycaster {
     /**
-     * Constructs a `MapViewRaycaster`. It keeps a reference to [[MapView]] in order to access the
-     * active camera when calling the custom method `raycastPoints`.
+     * Constructor.
      *
-     * @param m_mapView the active [[MapView]].
+     * @param camera the camera used for projection to screen.
+     * @param width the canvas width.
+     * @param height the canvas height.
      */
-    constructor(public mapView: MapView) {
+    constructor(public camera: THREE.Camera, public width: number, public height: number) {
         super();
     }
 }