refactor(#25): ♻️ Changed from canvas to text element, lat/lon…

index.html

@@ -27,7 +27,7 @@
     <link
       rel="stylesheet"
       type="text/css"
-      href="src/coordinateShowing/coordinateShowing.css"
+      href="src/CoordinateShowing/coordinateShowing.css"
     />
     <link
       rel="stylesheet"
@@ -54,7 +54,6 @@
     <script src="/build/potree/potree.js"></script>
     <script src="/libs/plasio/js/laslaz.js"></script>
     <script src="/libs/three.js/build/three.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.6/proj4.js"></script>
     <script src="/libs/Cesium/Cesium.js"></script>
 
     <div
@@ -70,9 +69,11 @@
     >
       <div id="potree_render_area">
         <div id="cesiumContainer"></div>
-        <div id="canvasContainer">
-          <canvas id="elevationCanvas" width="200" height="30"></canvas>
-          <canvas id="posCanvas" width="200" height="30"></canvas>
+        <div id="coordinatesContainer">
+          <p id="coordinatesHeader">Target point:</p>
+          <p id="latitude">Latitude:</p>
+          <p id="longitude">Longitude:</p>
+          <p id="elevation">Elevation:</p>
         </div>
       </div>
       <div id="potree_sidebar_container"></div>

src/CoordinateShowing/coordinateShowing.css

@@ -0,0 +1,34 @@
+#coordinatesContainer {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  right: 10px;
+  bottom: 10px;
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 10;
+  background-color: #19282c;
+  width: auto;
+  height: auto;
+}
+
+#coordinatesHeader {
+  color: #cccccc;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 20px;
+  line-height: 0.75;
+  position: relative;
+  height: min-content;
+  margin: 0;
+  padding-bottom: 20px;
+  font-weight: bold;
+}
+#latitude,
+#longitude,
+#elevation {
+  color: #cccccc;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 18px;
+  position: relative;
+  margin: 0;
+}

src/CoordinateShowing/coordinateShowing.js

@@ -0,0 +1,53 @@
+import { ecef } from '../config.js'
+import { wgs84 } from '../config.js'
+
+const latitudeText = document.getElementById('latitude')
+const longitudeText = document.getElementById('longitude')
+const elevationText = document.getElementById('elevation')
+const coordinatesContainer = document.getElementById('coordinatesContainer')
+
+let isRightClick = false
+
+/** Sets up a right-click listener on the Potree viewer to toggle updates of coordinate display.
+ * Makes sure coordinates are only updated when not right-clicking.
+ * @param potreeViewer - The Potree viewer instance
+ */
+export function setupRightClickListener(potreeViewer) {
+  const viewerElement = potreeViewer.renderer.domElement
+
+  viewerElement.addEventListener('mousedown', (event) => {
+    if (event.button === 2) {
+      isRightClick = true
+    }
+  })
+
+  viewerElement.addEventListener('dblclick', (event) => {
+    if (event.button === 0) {
+      isRightClick = false
+    }
+  })
+}
+
+/**
+ * Updates the displayed target point coordinates based on the point
+ */
+export function updateText() {
+  if (!isRightClick) {
+    const pivot = window.potreeViewer.scene.view.getPivot()
+    const controls = window.potreeViewer.getControls()
+    const [lon, lat, elevation] = proj4(ecef, wgs84, [
+      pivot.x,
+      pivot.y,
+      pivot.z
+    ])
+
+    if (controls === window.potreeViewer.orbitControls) {
+      coordinatesContainer.style.display = 'inline'
+      latitudeText.textContent = `Latitude = ${lat.toFixed(4)}˚`
+      longitudeText.textContent = `Longitude = ${lon.toFixed(4)}˚`
+      elevationText.textContent = `Elevation = ${elevation.toFixed(4)}m`
+    } else {
+      coordinatesContainer.style.display = 'none'
+    }
+  }
+}

src/main.js

@@ -3,9 +3,8 @@ import { createCesiumViewer } from './cesiumViewer.js'
 import { createPotreeViewer } from './potreeViewer.js'
 import { syncCameras } from './cameraSync.js'
 import {
-  initCoordinateCanvases,
-  updateCoordinateText,
-  updateTargetElevation
+  updateText,
+  setupRightClickListener
 } from './CoordinateShowing/coordinateShowing.js'
 
 async function init() {
@@ -17,12 +16,8 @@ async function init() {
     POTREE_SETTINGS
   )
 
-  initCoordinateCanvases()
-
-  potreeViewer.addEventListener('update', updateCoordinateText)
-  potreeViewer.addEventListener('update', updateTargetElevation)
-
-  window.addEventListener('resize', initCoordinateCanvases)
+  potreeViewer.addEventListener('camera_changed', updateText)
+  setupRightClickListener(potreeViewer)
 
   function loop(timestamp) {
     requestAnimationFrame(loop)