Fixes #73 - Use a combination of Tube and Line for tracks

src/app/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html

@@ -1,6 +1,7 @@
 <!-- Show objects -->
 <app-overlay title="Collections Info" icon="info" [resizable]="true" [active]="showObjectsInfo">
-  <div class="collectionsInfo m-2">
+  <!-- Using ngIf to remove it from DOM since this panel requires heavy computing -->
+  <div *ngIf="showObjectsInfo" class="collectionsInfo m-2">
     <div class="collectionSelector mb-2 d-flex align-items-center" *ngIf="collections!=null">
       <span>Choose a collection: </span>
       <div class="eventSelector">

src/app/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { EventdisplayService } from 'src/app/services/eventdisplay.service';
 
 @Component({

src/app/services/loaders/objects/phoenix-objects.ts

@@ -55,19 +55,31 @@ export class PhoenixObjects {
 
     // attributes
     const curve = new THREE.CatmullRomCurve3(points);
-    const vertices = curve.getPoints(50);
-    // geometry
+
+    // TubeGeometry
     const geometry = new THREE.TubeBufferGeometry(curve, undefined, 2);
-    // material
     const material = new THREE.MeshToonMaterial({ color: objectColor });
-    // material.linewidth = 2;
-    // object
-    const splineObject = new THREE.Mesh(geometry, material);
-    splineObject.userData = trackParams;
-    splineObject.userData.uuid = splineObject.uuid;
-    splineObject.name = 'Track';
+    const tubeObject = new THREE.Mesh(geometry, material);
+    // Setting info to the tubeObject since it will be used for selection
+    tubeObject.userData = trackParams;
+    tubeObject.userData.uuid = tubeObject.uuid;
+    tubeObject.name = 'Track';
+
+    // Line - Creating a Line to put inside the tube to show tracks even on zoom out
+    const vertices = curve.getPoints(50);
+    const lineGeometry = new THREE.BufferGeometry().setFromPoints(vertices);
+    const lineMaterial = new THREE.LineBasicMaterial({
+      color: objectColor,
+      linewidth: 2
+    });
+    const lineObject = new THREE.Line(lineGeometry, lineMaterial);
+
+    // Creating a group to add both the Tube curve and the Line
+    const trackObject = new THREE.Object3D();
+    trackObject.add(tubeObject);
+    trackObject.add(lineObject);
 
-    return splineObject;
+    return trackObject;
   }
 
   /**

src/app/services/three/controls-manager.ts

@@ -305,7 +305,7 @@ export class ControlsManager {
      * Initialize the zoom controls by setting up the camera and their animations as pairs.
      */
     private initializeZoomControls() {
-        const allCameras: any[] = [this.getMainCamera(), this.getOverlayCamera()];
+        const allCameras: any[] = this.getAllCameras();
         this.zoomCameraAnimPairs = [];
         for (const camera of allCameras) {
             const animation = camera.isOrthographicCamera

src/app/services/three/scene-manager.ts

@@ -1,4 +1,4 @@
-import { Scene, Object3D, Color, LineSegments, Mesh, MeshPhongMaterial, LineBasicMaterial, Vector3, Group, AxesHelper, AmbientLight, DirectionalLight, Line, MeshBasicMaterial, Material, Points, PointsMaterial } from 'three';
+import { Scene, Object3D, Color, LineSegments, Mesh, MeshPhongMaterial, LineBasicMaterial, Vector3, Group, AxesHelper, AmbientLight, DirectionalLight, Line, MeshBasicMaterial, Material, Points, PointsMaterial, MeshToonMaterial } from 'three';
 import { Cut } from '../extras/cut.model';
 
 /**
@@ -216,7 +216,8 @@ export class SceneManager {
                         object.material instanceof MeshBasicMaterial ||
                         object.material instanceof MeshBasicMaterial ||
                         object.material instanceof PointsMaterial ||
-                        object.material instanceof MeshPhongMaterial
+                        object.material instanceof MeshPhongMaterial ||
+                        object.material instanceof MeshToonMaterial
                     ) {
                         object.material.color.set(color);