refactor: ♻️ refactor Events to use enum and better type checking

src/common/enums/Events.ts

@@ -0,0 +1,17 @@
+/**
+ * Enum representing the various custom events used in the application.
+ *
+ * The string value MUST be lowercase.
+ */
+const enum Events {
+  satMovementChange = 'satmovementchange',
+  selectedSatChange = 'selectedsatchange',
+  satHover = 'sathover',
+  satDataLoaded = 'satdataloaded',
+  closeWindow = 'closewindow',
+  cruncherReady = 'cruncherready',
+  open = 'open',
+  close = 'close',
+}
+
+export default Events;

src/common/interfaces/EventData.ts

@@ -0,0 +1,27 @@
+import { SatelliteObject } from '@/common/interfaces/SatelliteObject';
+import Events from '../enums/Events';
+
+/**
+ * Represents the data structure for various events in the application.
+ *
+ * Based on the enum Events passed in, the data structure will change.
+ * This ensures that the data the listener is expecting is the same as
+ * the data the firing code is sending.
+ */
+type EventData = {
+  [Events.satHover]: {
+    satellite: SatelliteObject | undefined;
+    satId: number;
+    satX: number;
+    satY: number;
+  };
+  [Events.satMovementChange]: undefined;
+  [Events.selectedSatChange]: SatelliteObject | undefined;
+  [Events.satDataLoaded]: SatelliteObject[];
+  [Events.closeWindow]: undefined;
+  [Events.cruncherReady]: undefined;
+  [Events.open]: undefined;
+  [Events.close]: undefined;
+};
+
+export default EventData;

src/constants.ts

@@ -1,16 +1,4 @@
 /* eslint-disable import/prefer-default-export */
 const R2D = 80 / Math.PI;
 
-const Events = {
-  satMovementChange: 'satMovementChange',
-  selectedSatChange: 'selectedSatChange',
-  satHover: 'sathoverChange',
-  satDataLoaded: 'satdataloaded',
-  closeWindow: 'closeWindow',
-  cruncherReady: 'cruncherReady'
-};
-
-export {
-  R2D,
-  Events
-};
+export { R2D };

src/hud/HudWindow.ts

@@ -1,8 +1,10 @@
+import Events from '@/common/enums/Events';
+
 class Window {
   element?: HTMLElement;
   id: string;
   options?: Record<string, any>;
-  listeners: Record<string, Set<(data: any) => void>>  ={};
+  listeners: Record<string, Set<(data: any) => void>> = {};
   firstOpen = true;
   windowManager: any;
 
@@ -29,7 +31,7 @@ class Window {
     this.element.classList.add('visible');
     this.element.classList.remove('hidden');
     this.windowManager.bringWindowToFront(this);
-    this.fireEvent('open', {});
+    this.fireEvent(Events.open);
   }
 
   close () {
@@ -40,7 +42,7 @@ class Window {
     this.element.classList.remove('active');
     this.element.classList.remove('visible');
     this.element.classList.add('hidden');
-    this.fireEvent('close', {});
+    this.fireEvent(Events.close);
   }
 
   isOpen () {
@@ -106,7 +108,7 @@ class Window {
     }
   }
 
-  fireEvent (eventName: string, data: any) {
+  fireEvent (eventName: Events, data?: any) {
     if (this.listeners[eventName]) {
       const listenerSet = this.listeners[eventName];
       listenerSet.forEach((listener) => {

src/hud/index.ts

@@ -1,9 +1,11 @@
-/* eslint-disable no-loop-func */
-import { R2D, Events } from '@/constants';
+import { R2D } from '@/constants';
 import SatelliteGroup from '@satellite-viewer/SatelliteGroup';
 import { Viewer } from '@satellite-viewer/index';
 import HudWindowManager from './HudWindowManager';
 import searchBox from './SearchBox';
+import { SatelliteObject } from '@/common/interfaces/SatelliteObject';
+import Events from '@/common/enums/Events';
+import EventData from '@/common/interfaces/EventData';
 
 const supporteEvents: string[] = [];
 const windowManager = new HudWindowManager();
@@ -67,7 +69,7 @@ function setHtml (selector: string, html: string) {
   }
 }
 
-function onSelectedSatChange (satellite: Record<string, any>) {
+function onSelectedSatChange (satellite: SatelliteObject | undefined) {
   if (satellite) {
     document.querySelector('#sat-infobox')?.classList.add('visible');
     setHtml('#sat-info-title', satellite.OBJECT_NAME);
@@ -82,12 +84,13 @@ function onSelectedSatChange (satellite: Record<string, any>) {
   }
 }
 
-function onSatHover (event: any) {
-  const {
-    satId, satX, satY, satellite
-  } = event || {};
-
-  if (!satId || satId === -1) {
+function onSatHover ({
+  satId,
+  satX,
+  satY,
+  satellite,
+}: EventData[Events.satHover] = {} as EventData[Events.satHover]) {
+  if (!satellite || !satId || satId === -1) {
     setHtml('#sat-hoverbox', '(none)');
     let element = document.querySelector('#sat-hoverbox') as HTMLElement;
     if (element) {
@@ -100,9 +103,11 @@ function onSatHover (event: any) {
   } else {
     const satHoverBox = document.querySelector('#sat-hoverbox') as HTMLElement;
     if (satHoverBox) {
-      satHoverBox.innerHTML = satellite.OBJECT_NAME;
+      satHoverBox.innerHTML = satellite?.OBJECT_NAME || '';
       satHoverBox.style.display = 'block';
       satHoverBox.style.position = 'absolute';
+      satX ??= 0;
+      satY ??= 0;
       satHoverBox.style.left = `${satX + 20}px`;
       satHoverBox.style.top = `${satY - 10}px`;
     }
@@ -321,5 +326,5 @@ export default {
   setLoading,
   init,
   getSupportedEvents,
-  getCurrentSearch
+  getCurrentSearch,
 };

src/utils/event-manager.ts

@@ -1,3 +1,6 @@
+import EventData from '@/common/interfaces/EventData';
+import Events from '@/common/enums/Events';
+
 class EventManager {
   listeners: Record<string, Set<any>> = {};
   supportedEvents: string[] | undefined;
@@ -28,13 +31,11 @@ class EventManager {
     }
   }
 
-  fireEvent (eventName: string, data: any) {
+  fireEvent<E extends Events> (eventName: E, data: EventData[E]) {
     if (!eventName) {
       throw new Error('undefined eventName');
     }
 
-    eventName = eventName.toLowerCase();
-
     if (this.listeners[eventName]) {
       const listenerSet = this.listeners[eventName];
       listenerSet.forEach((listener) => {

src/viewer/SatelliteStore.ts

@@ -1,7 +1,8 @@
 import axios from 'axios';
 import EventManager from '../utils/event-manager';
 import logger from '../utils/logger';
-import { SatelliteObject } from './interfaces/SatelliteObject';
+import { SatelliteObject } from '../common/interfaces/SatelliteObject';
+import Events from '@/common/enums/Events';
 
 const config = {
   baseUrl: import.meta.env.BASE_URL
@@ -58,7 +59,7 @@ class SatelliteStore {
         }
       }
 
-      this.eventManager.fireEvent('satdataloaded', this.satData);
+      this.eventManager.fireEvent(Events.satDataLoaded, this.satData);
       this.loaded = true;
     } catch (error) {
       logger.error('error loading TLE data', error);
@@ -78,7 +79,7 @@ class SatelliteStore {
     this.gotExtraData = includesExtraData;
 
     if (includesExtraData) {
-      this.eventManager.fireEvent('satextradataloaded', this.satData);
+      this.eventManager.fireEvent(Events.satDataLoaded, this.satData);
     }
   }
 

src/viewer/index.ts

@@ -16,6 +16,8 @@ import SatelliteGroup from './SatelliteGroup';
 import ShaderStore from './ShaderStore';
 import logger from '@/utils/logger';
 import { ArrowHelper, Raycaster, Vector2, Vector3 } from 'three';
+import { SatelliteObject } from '../common/interfaces/SatelliteObject';
+import Events from '@/common/enums/Events';
 
 class Viewer {
   config: Record<string, any> = {
@@ -82,8 +84,8 @@ class Viewer {
     }
   }
 
-  private onSatDataLoaded (satData: Record<string, any>) {
-    this.eventManager.fireEvent('satdataloaded', satData);
+  private onSatDataLoaded (satData: SatelliteObject[]) {
+    this.eventManager.fireEvent(Events.satDataLoaded, satData);
     this.ready = true;
   }
 
@@ -153,7 +155,8 @@ class Viewer {
   }
 
   private isValidTarget (satelliteIdx: number): boolean {
-    const satelliteGroup = this.satellites?.getSatellitegroup() as SatelliteGroup;
+    const satelliteGroup =
+      this.satellites?.getSatellitegroup() as SatelliteGroup;
 
     if (satelliteGroup) {
       return satelliteGroup.hasSat(satelliteIdx);
@@ -175,7 +178,7 @@ class Viewer {
     });
 
     let satIdx = -1;
-    let satellite;
+    let satellite: SatelliteObject | undefined;
     if (satelliteIds && satelliteIds.length > 0) {
       // This is the first possible satellite, it is the closest to the camera
       satIdx = satelliteIds[0];
@@ -185,7 +188,7 @@ class Viewer {
     this.selectedSatelliteIdx = satIdx;
     this.satellites?.setSelectedSatellite(satIdx);
     this.orbits?.setSelectedSatellite(satIdx);
-    this.eventManager.fireEvent('selectedSatChange', satellite);
+    this.eventManager.fireEvent(Events.selectedSatChange, satellite);
   }
 
   onMouseMove () {
@@ -229,7 +232,12 @@ class Viewer {
 
     this.satellites?.setHoverSatellite(satIdx);
     this.orbits?.setHoverSatellite(satIdx);
-    this.eventManager.fireEvent('sathoverChange', satellite);
+    this.eventManager.fireEvent(Events.satHover, {
+      satellite,
+      satId: satIdx,
+      satX: event.clientX,
+      satY: event.clientY,
+    });
     this.mouseMoved = true;
   }
 
@@ -281,7 +289,7 @@ class Viewer {
       this.context.satelliteStore = this.satelliteStore;
       this.context.shaderStore = this.shaderStore;
 
-      this.satelliteStore.addEventListener('satdataloaded', this.onSatDataLoaded.bind(this));
+      this.satelliteStore.addEventListener(Events.satDataLoaded, this.onSatDataLoaded.bind(this));
 
       this.earth = new Earth();
       await this.registerSceneComponent('earth', this.earth);