From b24f3aaa4ca4790b26a55fd8dc8bf1d3ca9ea215 Mon Sep 17 00:00:00 2001
From: Kleinc <kleinc@stud.ntnu.no>
Date: Mon, 6 Oct 2025 11:54:56 +0200
Subject: [PATCH] refactor(#10): Refactored code according to comments

---
 index.html                                  |  6 ++++--
 src/config.js                               |  3 +++
 src/coordinateShowing/coordinateShowing.css | 18 +++++++++++-------
 src/coordinateShowing/coordinateShowing.js  | 10 +++++-----
 src/main.js                                 | 12 ++++++------
 src/potreeViewer.js                         |  3 ++-
 6 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index 73306f0..695a3bc 100644
--- a/index.html
+++ b/index.html
@@ -67,8 +67,10 @@
     >
       <div id="potree_render_area">
         <div id="cesiumContainer"></div>
-        <canvas id="posCanvas" width="200" height="30"></canvas>
-        <canvas id="elevationCanvas" width="200" height="30"></canvas>
+        <div id ="canvasContainer">
+          <canvas id="elevationCanvas" width="200" height="30"></canvas>
+          <canvas id="posCanvas" width="200" height="30"></canvas>
+        </div>
       </div>
       <div id="potree_sidebar_container"></div>
     </div>
diff --git a/src/config.js b/src/config.js
index fa55e71..16ac6ec 100644
--- a/src/config.js
+++ b/src/config.js
@@ -5,3 +5,6 @@ export const POTREE_SETTINGS = {
   fov: 60,
   pointBudget: 1_000_000
 }
+
+export const ecef = '+proj=geocent +datum=WGS84 +units=m +no_defs' // EPSG:4978 (geocentric coordinates)
+export const wgs84 = '+proj=longlat +datum=WGS84 +no_defs' // EPSG:4326 (geographic coordinates)
\ No newline at end of file
diff --git a/src/coordinateShowing/coordinateShowing.css b/src/coordinateShowing/coordinateShowing.css
index 07f2133..dd46e72 100644
--- a/src/coordinateShowing/coordinateShowing.css
+++ b/src/coordinateShowing/coordinateShowing.css
@@ -1,23 +1,27 @@
-#posCanvas {
+#canvasContainer {
+  display: flex;
+  flex-direction: column;
   position: absolute;
-  left: 10px;
+  right: 10px;
   bottom: 10px;
+}
+
+#posCanvas {
+  position: relative;
   width: 300px;
   height: 50px;
-  pointer-events: none;
   background-color: #19282c;
   z-index: 10;
   border-radius: 5px;
 }
 
 #elevationCanvas {
-  position: absolute;
-  right: 100px;
-  top: 15px;
+  position: relative;
   width: 300px;
   height: 50px;
-  pointer-events: none;
   background-color: #19282c;
   z-index: 10;
+  margin-bottom: 10px;
   border-radius: 5px;
 }
+
diff --git a/src/coordinateShowing/coordinateShowing.js b/src/coordinateShowing/coordinateShowing.js
index 7019138..bb7f360 100644
--- a/src/coordinateShowing/coordinateShowing.js
+++ b/src/coordinateShowing/coordinateShowing.js
@@ -1,5 +1,5 @@
-const ecef = '+proj=geocent +datum=WGS84 +units=m +no_defs' // EPSG:4978 (geocentric coordinates)
-const wgs84 = '+proj=longlat +datum=WGS84 +no_defs' // EPSG:4326 (geographic coordinates)
+import { ecef } from "../config.js";
+import { wgs84 } from "../config.js";
 
 const posCanvas = document.getElementById('posCanvas') // lat/lon
 const elevationCanvas = document.getElementById('elevationCanvas')
@@ -10,7 +10,7 @@ export let elevationCtx
 /**
  * Initializes the canvases and their contexts.
  */
-export function initCanvases() {
+export function initCoordinateCanvases() {
   posCtx = resizeCanvas(posCanvas)
   elevationCtx = resizeCanvas(elevationCanvas)
 }
@@ -47,9 +47,9 @@ function drawText(ctx, text, canvas) {
 }
 
 /**
- * Updates the lat/lon position.
+ * Updates the lat/lon coordinates.
  */
-export function updatePosition() {
+export function updateCoordinateText() {
   const cam = window.potreeViewer.scene.view.position
   const [lon, lat] = proj4(ecef, wgs84, [cam.x, cam.y, cam.z])
   drawText(
diff --git a/src/main.js b/src/main.js
index e1670e1..af6efff 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,10 +3,10 @@ import { createCesiumViewer } from './cesiumViewer.js'
 import { createPotreeViewer } from './potreeViewer.js'
 import { syncCameras } from './cameraSync.js'
 import {
-  initCanvases,
-  updatePosition,
+  initCoordinateCanvases,
+  updateCoordinateText,
   updateTargetElevation
-} from './coordinateShowing/coordinateShowing.js'
+} from "./CoordinateShowing/coordinateShowing.js";
 
 async function init() {
   window.cesiumViewer = createCesiumViewer('cesiumContainer')
@@ -17,12 +17,12 @@ async function init() {
     POTREE_SETTINGS
   )
 
-  initCanvases()
+  initCoordinateCanvases()
 
-  potreeViewer.addEventListener('update', updatePosition)
+  potreeViewer.addEventListener('update', updateCoordinateText)
   potreeViewer.addEventListener('update', updateTargetElevation)
 
-  window.addEventListener('resize', initCanvases)
+  window.addEventListener('resize', initCoordinateCanvases)
 
   function loop(timestamp) {
     requestAnimationFrame(loop)
diff --git a/src/potreeViewer.js b/src/potreeViewer.js
index 3f04686..4644388 100644
--- a/src/potreeViewer.js
+++ b/src/potreeViewer.js
@@ -1,4 +1,5 @@
 import { initElevationControls } from './ElevationControl/elevationControl.js'
+import { ecef } from './config.js'
 
 /**
  * Initializes the Potree viewer used to visualize the point cloud.
@@ -55,7 +56,7 @@ export async function createPotreeViewer(containerId, pointcloudUrl, settings) {
   pc.material.activeAttributeName = 'elevation'
   pc.material.gradient = Potree.Gradients['VIRIDIS']
 
-  e.pointcloud.projection = '+proj=geocent +datum=WGS84 +units=m +no_defs'
+  e.pointcloud.projection = ecef
 
   // Initialize camera position and target point (manually chosen)
   viewer.scene.view.setView(