fix(#4): 🐛 initially hide "Saved Point Coordinates" value and wait fo…

…r label placement to update

Before of this fix, whenever there was the creation of a new saved position, it had Placeholder values from potree's build, that were updated only after the creation/deletion of another position. Now plaeholder value is substituted by "---" and there is a eventListener that waits for the label to be placed before updating its values

src/AnnotationControl/annotationPanel.js

@@ -296,18 +296,34 @@ export function initAnnotationsPanel(viewer) {
           ann.cameraTarget || ann.camera_target || ann.cameraPivot
         )
 
-        const pointPos = vecToArray(
+        // Start with serialized position, then prefer the live object's current position
+        let pointPos = vecToArray(
           ann.position || ann.annotationPosition || ann.pos
         )
+        try {
+          const live = _findLiveAnnotationByUUID(ann.uuid)
+          if (live) {
+            const livePos = vecToArray(live.position || (live.data && live.data.position))
+            if (livePos) pointPos = livePos
+          }
+        } catch (e) {}
+
+        // Hide Potree's default placeholder coordinates until the annotation is actually placed
+        function approxEqual(a, b, eps = 1e-3) {
+          if (!a || !b || a.length !== b.length) return false
+          for (let i = 0; i < a.length; i++) if (Math.abs(Number(a[i]) - Number(b[i])) > eps) return false
+          return true
+        }
+        const PLACEHOLDER_POS = [589748.27, 231444.54, 753.675]
+        if (pointPos && approxEqual(pointPos, PLACEHOLDER_POS)) pointPos = null
 
         if (cam || camTarget || pointPos) {
           const info = document.createElement('div')
           info.className = 'annotation-info'
           info.style.fontSize = '0.8em'
           info.style.marginLeft = '8px'
-          const fmt = (v) =>
-            v ? v.map((c) => Number(c).toFixed(3)).join(', ') : '—'
-          info.innerHTML = `Camera coordinates: ${fmt(cam)}<br/>Pivot coordinates: ${fmt(camTarget)}<br/>Saved Point coordinates: ${fmt(pointPos)}`;
+          const fmt = (v) => (v ? v.map((c) => Number(c).toFixed(3)).join(', ') : '—')
+          info.innerHTML = `Camera coordinates: ${fmt(cam)}<br/>Pivot coordinates: ${fmt(camTarget)}<br/>Saved Point coordinates: ${fmt(pointPos)}`
           row.appendChild(info)
         }
       } catch (e) {
@@ -454,6 +470,25 @@ export function initAnnotationsPanel(viewer) {
       // Start Potree annotation insertion
       let annotation = viewer.annotationTool.startInsertion()
 
+      // Wait for the actual placement (left click) before updating the sidebar.
+      try {
+        const dom = viewer && viewer.renderer && viewer.renderer.domElement
+        if (dom) {
+          const onMouseUp = (ev) => {
+            try {
+              if (ev.button === 0) {
+                // left click = placement finished
+                setTimeout(() => updateAnnotationsList(), 50)
+                dom.removeEventListener('mouseup', onMouseUp, true)
+              }
+            } catch (e) {}
+          }
+          dom.addEventListener('mouseup', onMouseUp, true)
+        }
+      } catch (e) {
+        // ignore
+      }
+
       // Wait for annotation creation, then select in jsTree
       setTimeout(() => {
         let tree = $('#jstree_scene').jstree && $('#jstree_scene').jstree()