refactor(#10): Refactored code according to comments

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>

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)

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;
 }
+

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(

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)

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(