fix(#5): 🐛 better display of distance measurement

TDT4290-group-4 · Sep 24, 2025 · 6f4ed05 · 6f4ed05
1 parent f5ce5f5
commit 6f4ed05
Showing 1 changed file with 20 additions and 19 deletions.
diff --git 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 = `