Issue #37 resolve orbit hover bug

src/viewer/Orbits.ts

@@ -12,15 +12,14 @@ class Orbits implements SceneComponent, SelectableSatellite {
   config: Record<string, any> = {};
   segmentCount = 255;
   orbitWorker?: Worker;
-  // selectedSatelliteIdx: number = -1;
   selectedSatellites: number[] = [];
   hoverSatelliteIdx: number = -1;
   satelliteGroups?: SatelliteGroups;
   satelliteGroup?: SatelliteGroup;
   inProgress: boolean[] = [];
   scene?: SatelliteOrbitScene;
   selectColor = [0.0, 1.0, 0.0, 1.0];
-  hoverColor = [0.5, 0.5, 1.0, 1.0];
+  hoverColor = [1.0, 0.92, 0.23, 1.0];
   groupColor = [0.3, 0.5, 1.0, 0.4];
   orbitTracks: (Line | undefined)[] = [];
   satelliteStore?: SatelliteStore;
@@ -69,10 +68,10 @@ class Orbits implements SceneComponent, SelectableSatellite {
   private getTrackColor (satId: number): Color {
     let color = [1, 1, 0];
 
-    if (this.selectedSatellites.indexOf(satId) > -1) {
-      color = this.selectColor;
-    } else if (satId === this.hoverSatelliteIdx) {
+    if (satId === this.hoverSatelliteIdx) {
       color = this.hoverColor;
+    } else if (this.selectedSatellites.indexOf(satId) > -1) {
+      color = this.selectColor;
     } else if (this.satelliteGroup && this.satelliteGroup.hasSat(satId)) {
       color = this.groupColor;
     }
@@ -138,6 +137,27 @@ class Orbits implements SceneComponent, SelectableSatellite {
     this.inProgress[satId] = false;
   }
 
+  isHoverSatellite (satelliteIdx: number): boolean {
+    return this.hoverSatelliteIdx !== undefined && satelliteIdx !== -1 && this.hoverSatelliteIdx === satelliteIdx;
+  }
+
+  isSelectedSatellite (satelliteIdx: number): boolean {
+    if (this.selectedSatellites.length > 0) {
+      return this.selectedSatellites.indexOf(satelliteIdx) > -1;
+    }
+
+    return false;
+  }
+
+  refreshOrbits () {
+    if (this.satelliteGroup) {
+      const sats = this.satelliteGroup.sats;
+      for (let i = 0; i < sats.length; i++) {
+        this.updateOrbitTrack(sats[i].satId);
+      }
+    }
+  }
+
   setSelectedSatellites (selectedSatellites: number[]) {
     if (this.selectedSatellites.length > 0) {
       for (let i = 0; i < this.selectedSatellites.length; i++) {
@@ -154,23 +174,33 @@ class Orbits implements SceneComponent, SelectableSatellite {
 
     this.selectedSatellites = selectedSatellites;
     this.calculateOrbits(selectedSatellites);
+    this.refreshOrbits();
   }
 
   setSelectedSatellite (satelliteIdx: number) {
     this.setSelectedSatellites([satelliteIdx]);
   }
 
   setHoverSatellite (satelliteIdx: number) {
-    if (this.hoverSatelliteIdx !== undefined && this.hoverSatelliteIdx > -1 || satelliteIdx !== this.hoverSatelliteIdx) {
-      if (!this.satelliteGroup || !this.satelliteGroup.hasSat(this.hoverSatelliteIdx) || this.selectedSatellites.indexOf(this.hoverSatelliteIdx) < 0) {
-        this.removeOrbitTrack(this.hoverSatelliteIdx);
-      } else {
-        this.updateOrbitTrack(this.hoverSatelliteIdx);
-      }
+    // deal wth removing hover satellite, in such a away it doesn't remove
+    // groups satellite tracks or selected satellite tracks
+    let remove = false;
+    const previousHoverSatelliteIdx = this.hoverSatelliteIdx || -1;
+    if (this.hoverSatelliteIdx && this.hoverSatelliteIdx > -1) {
+      remove = this.selectedSatellites.indexOf(this.hoverSatelliteIdx) < 0;
+      remove = remove && (!this.satelliteGroup || !this.satelliteGroup.hasSat(this.hoverSatelliteIdx));
     }
 
     this.hoverSatelliteIdx = satelliteIdx;
+
+    if (remove) {
+      this.removeOrbitTrack(previousHoverSatelliteIdx);
+    } else {
+      this.updateOrbitTrack(previousHoverSatelliteIdx);
+    }
+
     this.calculateOrbits([satelliteIdx]);
+    this.refreshOrbits();
   }
 
   setSatelliteGroup (group: SatelliteGroup | undefined) {

src/viewer/SatelliteGroup.ts

@@ -65,11 +65,11 @@ class SatelliteGroup {
     }
   }
 
-  getSat (satId: number) {
+  getSat (satId: number): Record<string, any> | undefined {
     return this.satelliteStore.satData.find((satellite) => satellite.id === satId);
   }
 
-  hasSat (satId: number) {
+  hasSat (satId: number): boolean {
     const len = this.sats.length;
     for (let i = 0; i < len; i++) {
       if (this.sats[i].satId === satId) {

src/viewer/index.ts

@@ -42,6 +42,8 @@ class Viewer {
   satellites?: Satellites;
   orbits?: Orbits;
   earth?: Earth;
+  minZoom = 1;
+  maxZoom = 100;
 
   constructor (config?: Record<string, any>) {
     this.config = { ...config, ...this.config };
@@ -154,14 +156,16 @@ class Viewer {
       y: event.clientY
     });
 
+    let satIdx = -1;
+    let satellite;
     if (satelliteIds && satelliteIds.length > 0) {
-      const satelliteZero = satelliteIds[0];
-
-      const satellite = this.satelliteStore?.getSatellite(satelliteZero);
-      this.satellites?.setSelectedSatellite(satelliteZero);
-      this.orbits?.setSelectedSatellite(satelliteZero);
-      this.eventManager.fireEvent('selectedSatChange', satellite);
+      satIdx = satelliteIds[0];
+      satellite = this.satelliteStore?.getSatellite(satIdx);
     }
+
+    this.satellites?.setSelectedSatellite(satIdx);
+    this.orbits?.setSelectedSatellite(satIdx);
+    this.eventManager.fireEvent('selectedSatChange', satellite);
   }
 
   onHover (event: MouseEvent) {
@@ -176,14 +180,16 @@ class Viewer {
       y: event.clientY
     });
 
+    let satIdx = -1;
+    let satellite;
     if (satelliteIds && satelliteIds.length > 0) {
-      const satelliteZero = satelliteIds[0];
-
-      const satellite = this.satelliteStore?.getSatellite(satelliteZero);
-      this.satellites?.setHoverSatellite(satelliteZero);
-      this.orbits?.setHoverSatellite(satelliteZero);
-      this.eventManager.fireEvent('sathoverChange', satellite);
+      satIdx = satelliteIds[0];
+      satellite = this.satelliteStore?.getSatellite(satIdx);
     }
+
+    this.satellites?.setHoverSatellite(satIdx);
+    this.orbits?.setHoverSatellite(satIdx);
+    this.eventManager.fireEvent('sathoverChange', satellite);
   }
 
   async init () {
@@ -240,8 +246,8 @@ class Viewer {
       }
 
       this.camera.position.y = 42;
-      this.controls.minDistance = 4;
-      this.controls.maxDistance = 100;
+      this.controls.minDistance = this.minZoom;
+      this.controls.maxDistance = this.maxZoom;
       this.controls.enablePan = false;
       this.controls.zoomSpeed = 0.5;
       // this.controls.enableDamping = true;
@@ -287,7 +293,7 @@ class Viewer {
   zoomToSatellite (satelliteId: number) {
     const position = this.satelliteStore?.getSatellitePosition(satelliteId);
     if (position) {
-      // this.controls.zo
+      // TODO
     }
   }
 
@@ -300,6 +306,11 @@ class Viewer {
           return;
         }
 
+        // console.log('zoomIn', this.camera.zoom, this.minZoom);
+        if (this.camera.zoom > this.maxZoom) {
+          return;
+        }
+
         if (this.camera.zoom < targetZoom) {
           this.camera.zoom += 0.08;
           this.camera.updateProjectionMatrix();
@@ -313,16 +324,31 @@ class Viewer {
 
   zoomOut () {
     if (this.camera) {
-      const targetZoom = this.camera.zoom - 1.2;
+      let targetZoom = this.camera.zoom - 1.2;
       const timeout = 20;
 
+      // camera doesn't seem to like negative zoom levels
+      if (targetZoom < 0) {
+        targetZoom = 0;
+      }
+
       const zoomFn = () => {
         if (!this.camera) {
           return;
         }
 
+        // console.log('zoomOut', this.camera.zoom, this.maxZoom);
+        if (this.camera.zoom < this.minZoom) {
+          return;
+        }
+
         if (this.camera.zoom > targetZoom) {
-          this.camera.zoom -= 0.08;
+          this.camera.zoom = this.camera.zoom + -0.08;
+
+          if (this.camera.zoom < 0) {
+            this.camera.zoom = 0;
+          }
+
           this.camera.updateProjectionMatrix();
           setTimeout(zoomFn, timeout);
         }