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

index.html

@@ -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,9 @@
     >
       <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="coordinates"></p>
         </div>
       </div>
       <div id="potree_sidebar_container"></div>

src/CoordinateShowing/coordinateShowing.css

@@ -0,0 +1,33 @@
+#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;
+}
+#coordinates {
+  color: #cccccc;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 18px;
+  line-height: 0.75;
+  position: relative;
+  margin: 0;
+}

src/CoordinateShowing/coordinateShowing.js

@@ -0,0 +1,51 @@
+import { ecef } from '../config.js'
+import { wgs84 } from '../config.js'
+
+const coordinatesText = document.getElementById('coordinates')
+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('mousedown', (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'
+      coordinatesText.innerText = `Latitude = ${lat.toFixed(4)}˚
+        \n Longitude = ${lon.toFixed(4)}˚ 
+        \n 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,19 +16,15 @@ async function init() {
     POTREE_SETTINGS
   )
 
-  initCoordinateCanvases()
-
-  potreeViewer.addEventListener('update', updateCoordinateText)
-  potreeViewer.addEventListener('update', updateTargetElevation)
-
-  window.addEventListener('resize', initCoordinateCanvases)
+  setupRightClickListener(potreeViewer)
 
   function loop(timestamp) {
     requestAnimationFrame(loop)
     potreeViewer.update(potreeViewer.clock.getDelta(), timestamp)
     potreeViewer.render()
     syncCameras(potreeViewer, cesiumViewer)
     cesiumViewer.render()
+    updateText()
   }
 
   requestAnimationFrame(loop)