refactor(#10): moved init function to main

TDT4290-group-4 · Oct 6, 2025 · cbe01f8 · cbe01f8
1 parent fd23c74
commit cbe01f8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
       href="/libs/jstree/themes/mixed/style.css"
     />
     <link rel="stylesheet" type="text/css" href="src/style.css" />
-    <link rel="stylesheet" type="text/css" href="src/coordinateShowing.css" />
+    <link rel="stylesheet" type="text/css" href="src/coordinateShowing/coordinateShowing.css" />
   </head>
 
   <body>
@@ -97,6 +97,5 @@
       })
     </script>
     <script type="module" src="src/main.js"></script>
-    <script type="module" src="src/coordinateShowing.js"></script>
   </body>
 </html>
diff --git a/src/coordinateShowing.css → src/coordinateShowing/coordinateShowing.css b/src/coordinateShowing.css → src/coordinateShowing/coordinateShowing.css
diff --git a/src/coordinateShowing.js → src/coordinateShowing/coordinateShowing.js b/src/coordinateShowing.js → src/coordinateShowing/coordinateShowing.js
@@ -4,8 +4,16 @@ const wgs84 = "+proj=longlat +datum=WGS84 +no_defs";         // EPSG:4326 (geogr
 const posCanvas = document.getElementById('posCanvas'); // lat/lon
 const elevationCanvas = document.getElementById('elevationCanvas');
 
-let posCtx;
-let elevationCtx;
+export let posCtx;
+export let elevationCtx;
+
+/** 
+ * Initializes the canvases and their contexts.
+ */
+export function initCanvases() {
+    posCtx = resizeCanvas(posCanvas);
+    elevationCtx = resizeCanvas(elevationCanvas);
+}
 
 /**
  * Resizes the canvas and its context to account for device pixel ratio.
@@ -41,7 +49,7 @@ function drawText(ctx, text, canvas) {
 /**
  * Updates the lat/lon position.
  */
-function updatePosition() {
+export function updatePosition() {
     const cam = window.viewer.scene.view.position;
     const [lon, lat] = proj4(ecef, wgs84, [cam.x, cam.y, cam.z]);
     drawText(posCtx, `lat = ${lat.toFixed(2)}˚ lon = ${lon.toFixed(2)}˚`, posCanvas);
@@ -50,7 +58,7 @@ function updatePosition() {
 /**
  * Shows target elevations if camera is in orbit mode.
  */
-function updateTargetElevation() {
+export function updateTargetElevation() {
     const pivot = window.viewer.scene.view.getPivot();
     const controls = window.viewer.getControls();
     const height = proj4(ecef, wgs84, [pivot.x, pivot.y, pivot.z])[2];
@@ -64,20 +72,7 @@ function updateTargetElevation() {
 }
 
 
-function init() {
-    posCtx = resizeCanvas(posCanvas);
-    elevationCtx = resizeCanvas(elevationCanvas);
-
-    viewer.addEventListener("update", updatePosition);
-    viewer.addEventListener("update", updateTargetElevation);
-
-    window.addEventListener('resize', () => {
-        posCtx = resizeCanvas(posCanvas);
-        elevationCtx = resizeCanvas(elevationCanvas);
-    });
-}
 
-init();
 
 
 
diff --git a/src/main.js b/src/main.js
@@ -1 +1,13 @@
+import { initCanvases, updatePosition, updateTargetElevation } from "./coordinateShowing/coordinateShowing.js";
+
+function init() {
+    initCanvases();
+
+    viewer.addEventListener("update", updatePosition);
+    viewer.addEventListener("update", updateTargetElevation);
+
+    window.addEventListener('resize', initCanvases);
+}
+
+init();