refactor(#10): Fix merge conflict and apply new changes

TDT4290-group-4 · Oct 6, 2025 · 74016ea · 74016ea
1 parent 9ed3eec
commit 74016ea
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 55 deletions.
diff --git a/src/coordinateShowing/coordinateShowing.css b/src/coordinateShowing/coordinateShowing.css
@@ -1,12 +1,11 @@
-
 #posCanvas {
   position: absolute;
   left: 10px;
   bottom: 10px;
   width: 300px;
   height: 50px;
-  pointer-events: none; 
-  background-color: #19282C;
+  pointer-events: none;
+  background-color: #19282c;
   z-index: 10;
   border-radius: 5px;
 }
@@ -17,8 +16,8 @@
   top: 15px;
   width: 300px;
   height: 50px;
-  pointer-events: none; 
-  background-color: #19282C;
+  pointer-events: none;
+  background-color: #19282c;
   z-index: 10;
   border-radius: 5px;
-}
+}
diff --git a/src/coordinateShowing/coordinateShowing.js b/src/coordinateShowing/coordinateShowing.js
@@ -1,18 +1,18 @@
-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)
+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)
 
-const posCanvas = document.getElementById('posCanvas'); // lat/lon
-const elevationCanvas = document.getElementById('elevationCanvas');
+const posCanvas = document.getElementById('posCanvas') // lat/lon
+const elevationCanvas = document.getElementById('elevationCanvas')
 
-export let posCtx;
-export let elevationCtx;
+export let posCtx
+export let elevationCtx
 
-/** 
+/**
  * Initializes the canvases and their contexts.
  */
 export function initCanvases() {
-    posCtx = resizeCanvas(posCanvas);
-    elevationCtx = resizeCanvas(elevationCanvas);
+  posCtx = resizeCanvas(posCanvas)
+  elevationCtx = resizeCanvas(elevationCanvas)
 }
 
 /**
@@ -21,58 +21,60 @@ export function initCanvases() {
  * @returns {*} - The resized canvas context.
  */
 function resizeCanvas(canvas) {
-    const dpr = window.devicePixelRatio || 1;
-    const ctx = canvas.getContext('2d');
+  const dpr = window.devicePixelRatio || 1
+  const ctx = canvas.getContext('2d')
 
-    canvas.width = canvas.clientWidth * dpr;
-    canvas.height = canvas.clientHeight * dpr;
+  canvas.width = canvas.clientWidth * dpr
+  canvas.height = canvas.clientHeight * dpr
 
-    // Scale context so drawing uses CSS pixels
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    return ctx; 
+  // Scale context so drawing uses CSS pixels
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  return ctx
 }
 
 /**
  * Draw the text on a given canvas.
  */
 function drawText(ctx, text, canvas) {
-    const centerX = canvas.clientWidth / 2;
-    const centerY = canvas.clientHeight / 2;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = '#cccccc';
-    ctx.font = '20px Arial';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(text, centerX, centerY);
+  const centerX = canvas.clientWidth / 2
+  const centerY = canvas.clientHeight / 2
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  ctx.fillStyle = '#cccccc'
+  ctx.font = '20px Arial'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText(text, centerX, centerY)
 }
 
 /**
  * Updates the lat/lon position.
  */
 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(5)}˚ lon = ${lon.toFixed(5)}˚`, posCanvas);
+  const cam = window.potreeViewer.scene.view.position
+  const [lon, lat] = proj4(ecef, wgs84, [cam.x, cam.y, cam.z])
+  drawText(
+    posCtx,
+    `lat = ${lat.toFixed(5)}˚ lon = ${lon.toFixed(5)}˚`,
+    posCanvas
+  )
 }
 
 /**
  * Shows target elevations if camera is in orbit mode.
  */
 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];
-
-    if (controls === window.viewer.orbitControls) {
-        elevationCanvas.style.display = 'inline';
-        drawText(elevationCtx, `Target elevation = ${height.toFixed(4)}m`, elevationCanvas);
-    } else {
-        elevationCanvas.style.display = 'none';
-    }
+  const pivot = window.potreeViewer.scene.view.getPivot()
+  const controls = window.potreeViewer.getControls()
+  const height = proj4(ecef, wgs84, [pivot.x, pivot.y, pivot.z])[2]
+
+  if (controls === window.potreeViewer.orbitControls) {
+    elevationCanvas.style.display = 'inline'
+    drawText(
+      elevationCtx,
+      `Target elevation = ${height.toFixed(4)}m`,
+      elevationCanvas
+    )
+  } else {
+    elevationCanvas.style.display = 'none'
+  }
 }
-
-
-
-
-
-
diff --git a/src/main.js b/src/main.js
@@ -2,8 +2,11 @@ import { POTREE_POINTCLOUD_URL, POTREE_SETTINGS } from './config.js'
 import { createCesiumViewer } from './cesiumViewer.js'
 import { createPotreeViewer } from './potreeViewer.js'
 import { syncCameras } from './cameraSync.js'
-import { initCanvases, updatePosition, updateTargetElevation } from "./coordinateShowing/coordinateShowing.js";
-
+import {
+  initCanvases,
+  updatePosition,
+  updateTargetElevation
+} from './coordinateShowing/coordinateShowing.js'
 
 async function init() {
   window.cesiumViewer = createCesiumViewer('cesiumContainer')
@@ -14,12 +17,12 @@ async function init() {
     POTREE_SETTINGS
   )
 
-  initCanvases();
+  initCanvases()
 
-    viewer.addEventListener("update", updatePosition);
-    viewer.addEventListener("update", updateTargetElevation);
+  potreeViewer.addEventListener('update', updatePosition)
+  potreeViewer.addEventListener('update', updateTargetElevation)
 
-    window.addEventListener('resize', initCanvases);
+  window.addEventListener('resize', initCanvases)
 
   function loop(timestamp) {
     requestAnimationFrame(loop)