From 0e7fe539ed49cdc3862096a61b2e71ebdfd815ed Mon Sep 17 00:00:00 2001
From: Lukas Thrane <76877975+Windove@users.noreply.github.com>
Date: Fri, 19 Apr 2024 13:16:19 +0200
Subject: [PATCH] fix by disabling pan (#338)

* fix by disabling pan

* fix globe responsiveness

* fix globe canvas size

* fix globe resize function

* make globe size equal to div next to it
---
 frontend/src/app/page.tsx                            |  6 +++---
 frontend/src/components/homeComponents/homeGlobe.tsx | 11 +++++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 4d10a75..12bdbe1 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -25,14 +25,14 @@ export default async function Home() {
         <>
             <div className="flex min-h-[calc(100vh-73px)] flex-col gap-0 sm:flex-row">
                 {/* Stats Container */}
-                <div className="z-10 flex w-full flex-col  border-b-2 border-l-2 border-r-2 border-t-2 border-gray-600 bg-black md:min-w-[500px] xl:w-1/3">
+                <div className="z-10 flex w-full flex-col border-b-2 border-l-2 border-r-2 border-t-2 border-gray-600 bg-black md:min-w-[500px] xl:w-1/3">
                     <SatelliteSelector />
                     <SatelliteDataHome />
                 </div>
 
                 {/* Globe Container */}
-                <div className="z-0 w-full overflow-x-hidden border-b-2  border-l-2 border-r-2 border-t-0 border-gray-600 sm:border-l-0 sm:border-t-2 xl:w-2/3">
-                    <div className="flex h-full items-center justify-center ">
+                <div className="z-0 h-full w-full overflow-x-hidden  border-b-2 border-l-2 border-r-2 border-t-0 border-gray-600 sm:border-l-0 sm:border-t-2 xl:w-2/3">
+                    <div className="flex h-[70vh] items-center justify-center sm:h-full">
                         <SatelliteGlobeNoSSR />
                     </div>
                 </div>
diff --git a/frontend/src/components/homeComponents/homeGlobe.tsx b/frontend/src/components/homeComponents/homeGlobe.tsx
index f42a814..71c9c4f 100644
--- a/frontend/src/components/homeComponents/homeGlobe.tsx
+++ b/frontend/src/components/homeComponents/homeGlobe.tsx
@@ -25,9 +25,10 @@ export default function SatelliteGlobe() {
             globeRef.current = Globe()(chart.current)
                 .globeImageUrl(
                     "//unpkg.com/three-globe/example/img/earth-blue-marble.jpg",
-                ) /*.backgroundImageUrl(
+                )
+                .backgroundImageUrl(
                     "//unpkg.com/three-globe/example/img/night-sky.png",
-                )*/
+                )
                 .objectLat("lat")
                 .objectLng("lng")
                 .objectAltitude("alt")
@@ -54,13 +55,15 @@ export default function SatelliteGlobe() {
 
             globeRef.current.controls().enabled = true;
             globeRef.current.controls().enableZoom = false;
+            globeRef.current.controls().enablePan = false;
+            globeRef.current.controls().enableRotate = true;
 
             const setGlobeSize = () => {
                 if (globeRef.current && chart.current) {
                     const { width, height } =
                         chart.current.getBoundingClientRect();
                     globeRef.current.width(width);
-                    globeRef.current.height(height / 1.5);
+                    globeRef.current.height(height - 76);
                 }
             };
 
@@ -145,7 +148,7 @@ export default function SatelliteGlobe() {
                 lat: Number(targetPosition.latitudeDeg),
                 lng: Number(targetPosition.longitudeDeg),
                 altitude:
-                    Number(targetPosition.altitude) / EARTH_RADIUS_KM + 2.5,
+                    Number(targetPosition.altitude) / EARTH_RADIUS_KM + 3.5,
             },
             1700,
         );