fix(#25): 🐛 Fix issue with copying target point text

index.html

@@ -71,7 +71,9 @@
         <div id="cesiumContainer"></div>
         <div id="coordinatesContainer">
           <p id="coordinatesHeader">Target point:</p>
-          <p id="coordinates"></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

@@ -23,11 +23,12 @@
   padding-bottom: 20px;
   font-weight: bold;
 }
-#coordinates {
+#latitude,
+#longitude,
+#elevation {
   color: #cccccc;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
-  line-height: 0.75;
   position: relative;
   margin: 0;
 }

src/CoordinateShowing/coordinateShowing.js

@@ -1,7 +1,9 @@
 import { ecef } from '../config.js'
 import { wgs84 } from '../config.js'
 
-const coordinatesText = document.getElementById('coordinates')
+const latitudeText = document.getElementById('latitude')
+const longitudeText = document.getElementById('longitude')
+const elevationText = document.getElementById('elevation')
 const coordinatesContainer = document.getElementById('coordinatesContainer')
 
 let isRightClick = false
@@ -41,9 +43,9 @@ export function updateText() {
 
     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`
+      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

@@ -16,6 +16,7 @@ async function init() {
     POTREE_SETTINGS
   )
 
+  potreeViewer.addEventListener('camera_changed', updateText)
   setupRightClickListener(potreeViewer)
 
   function loop(timestamp) {
@@ -24,7 +25,6 @@ async function init() {
     potreeViewer.render()
     syncCameras(potreeViewer, cesiumViewer)
     cesiumViewer.render()
-    updateText()
   }
 
   requestAnimationFrame(loop)