From c7d168da5c837568d59341c847df338780a9a64d Mon Sep 17 00:00:00 2001 From: Andre-John Mas Date: Wed, 20 Dec 2023 22:48:14 -0500 Subject: [PATCH] issue #37 resolve orbit hover bug --- src/viewer/Orbits.ts | 52 ++++++++++++++++++++++++------- src/viewer/SatelliteGroup.ts | 4 +-- src/viewer/index.ts | 60 ++++++++++++++++++++++++++---------- 3 files changed, 86 insertions(+), 30 deletions(-) diff --git a/src/viewer/Orbits.ts b/src/viewer/Orbits.ts index 3bca280..4808d2e 100644 --- a/src/viewer/Orbits.ts +++ b/src/viewer/Orbits.ts @@ -12,7 +12,6 @@ class Orbits implements SceneComponent, SelectableSatellite { config: Record = {}; segmentCount = 255; orbitWorker?: Worker; - // selectedSatelliteIdx: number = -1; selectedSatellites: number[] = []; hoverSatelliteIdx: number = -1; satelliteGroups?: SatelliteGroups; @@ -20,7 +19,7 @@ class Orbits implements SceneComponent, SelectableSatellite { 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,6 +174,7 @@ class Orbits implements SceneComponent, SelectableSatellite { this.selectedSatellites = selectedSatellites; this.calculateOrbits(selectedSatellites); + this.refreshOrbits(); } setSelectedSatellite (satelliteIdx: number) { @@ -161,16 +182,25 @@ class Orbits implements SceneComponent, SelectableSatellite { } 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) { diff --git a/src/viewer/SatelliteGroup.ts b/src/viewer/SatelliteGroup.ts index 17ac21c..f0c0c17 100644 --- a/src/viewer/SatelliteGroup.ts +++ b/src/viewer/SatelliteGroup.ts @@ -65,11 +65,11 @@ class SatelliteGroup { } } - getSat (satId: number) { + getSat (satId: number): Record | 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) { diff --git a/src/viewer/index.ts b/src/viewer/index.ts index cb16862..e0e4bf3 100644 --- a/src/viewer/index.ts +++ b/src/viewer/index.ts @@ -42,6 +42,8 @@ class Viewer { satellites?: Satellites; orbits?: Orbits; earth?: Earth; + minZoom = 1; + maxZoom = 100; constructor (config?: Record) { 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); }