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
NTNU-SmallSatLab · Apr 19, 2024 · 0e7fe53 · 0e7fe53
1 parent 1581701
commit 0e7fe53
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git 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
@@ -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,
         );