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

…d to show target point, don't update target point if right-clicking

Did a complete refactor of the coordinate showing logic, to use text element. Also made sure that the lat/lon coordinates are those of the target point. The coordinates won't change when right-clicking. Did some changes in styling as well.

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

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

src/coordinateShowing/coordinateShowing.js

@@ -1,80 +1,51 @@
 import { ecef } from '../config.js'
 import { wgs84 } from '../config.js'
 
-const posCanvas = document.getElementById('posCanvas') // lat/lon
-const elevationCanvas = document.getElementById('elevationCanvas')
+const coordinatesText = document.getElementById('coordinates')
+const coordinatesContainer = document.getElementById('coordinatesContainer')
 
-export let posCtx
-export let elevationCtx
+let isRightClick = false
 
-/**
- * Initializes the canvases and their contexts.
- */
-export function initCoordinateCanvases() {
-  posCtx = resizeCanvas(posCanvas)
-  elevationCtx = resizeCanvas(elevationCanvas)
-}
-
-/**
- * Resizes the canvas and its context to account for device pixel ratio.
- * @param {*} canvas - The canvas element to resize.
- * @returns {*} - The resized canvas context.
- */
-function resizeCanvas(canvas) {
-  const dpr = window.devicePixelRatio || 1
-  const ctx = canvas.getContext('2d')
-
-  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
-}
-
-/**
- * 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)
-}
-
-/**
- * Updates the lat/lon coordinates.
+/** 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 updateCoordinateText() {
-  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
-  )
+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
+    }
+  })
 }
 
 /**
- * Shows target elevations if camera is in orbit mode.
+ * Updates the displayed target point coordinates based on the point
  */
-export function updateTargetElevation() {
-  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'
+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)