From 6f4ed05f5c6ae1fe6d629bfbcb279548fe7f10ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gaute=20Fl=C3=A6gstad?= <gautegf@stud.ntnu.no>
Date: Wed, 24 Sep 2025 13:34:20 +0200
Subject: [PATCH] fix(#5): :bug: better display of distance measurement

---
 src/measurementsPanel.js | 39 ++++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/measurementsPanel.js b/src/measurementsPanel.js
index 5c76af7..88a55ea 100644
--- a/src/measurementsPanel.js
+++ b/src/measurementsPanel.js
@@ -34,11 +34,6 @@ export function initMeasurementsPanel(viewer){
     needsRender = true;
   }
 
-  function markDirty(m){
-    const entry = state.get(m.uuid);
-    if(entry){ entry.dirty = true; needsRender = true; }
-  }
-
   function collectAttributes(point){
     if(!point) return [];
     const attrs = [];
@@ -66,22 +61,28 @@ export function initMeasurementsPanel(viewer){
       card.className='mcard';
 
       let body = '<table>';
-      for(const pt of points){
-        const vec = pt.position || pt;
-        body += `<tr><td colspan="3">${formatNumber(vec.x)}, ${formatNumber(vec.y)}, ${formatNumber(vec.z)}</td></tr>`;
-        const attrs = collectAttributes(pt);
-        for(const [k,v] of attrs){
-          body += `<tr class="attrRow"><td colspan="3">${k}: ${v}</td></tr>`;
-        }
-      }
-      if(points.length>1){
+      if(points.length>0){
         let total=0;
-        for(let i=0;i<points.length-1;i++){
-          const seg = distance(points[i], points[i+1]);
-            total+=seg;
-            body += `<tr class="valueRow"><td colspan="3">${formatNumber(seg)}</td></tr>`;
+        const isDistance = points.length>1;
+        for(let i=0;i<points.length;i++){
+          const pt = points[i];
+          const vec = pt.position || pt;
+          body += `<tr class="coordRow"><td colspan="3">${formatNumber(vec.x)}, ${formatNumber(vec.y)}, ${formatNumber(vec.z)}</td></tr>`;
+          if(!isDistance){
+            const attrs = collectAttributes(pt);
+            for(const [k,v] of attrs){
+              body += `<tr class="attrRow"><td colspan="3">${k}: ${v}</td></tr>`;
+            }
+          }
+          if(i < points.length -1){
+            const seg = distance(points[i], points[i+1]);
+            total += seg;
+            body += `<tr class="segmentRow"><td colspan="3"><div class="segmentConnector"></div><div class="segmentPill">${formatNumber(seg)} m</div></td></tr>`;
+          }
+        }
+        if(points.length>1){
+          body += `<tr class="totalRow"><td colspan="3">${formatNumber(total)} m</td></tr>`;
         }
-        body += `<tr class="valueRow"><td colspan="3">${formatNumber(total)}</td></tr>`;
       }
       body += '</table>';
       card.innerHTML = `