refactor(#48): ♻️ Make measurements tools more intuitive

Write out name of each measurement tool and move measurements and saved positions above appearance
TDT4290-group-4 · Oct 29, 2025 · 02fc74b · 02fc74b
1 parent 1315491
commit 02fc74b
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 1 deletion.
diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css
@@ -271,3 +271,33 @@
   border-top: 1px solid #303a3f;
   padding-top: 10px;
 }
+
+.tool-with-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 10px;
+  cursor: pointer;  
+  border-radius: 4px;
+}
+.tool-with-label:hover {
+  box-shadow: 0 0 5px #fff8;
+}
+
+.tool-with-label:hover img {
+  filter: brightness(1.7); 
+}
+
+.tool-with-label:hover .tool-label {
+  color: #fff;
+}
+
+.tool-label {
+  font-size: 14px;
+  margin-top: 2px;
+  margin-left: 4px;
+  color: #aaa;
+  pointer-events: none; 
+}
+
+
diff --git a/src/MeasurementControl/measurementsPanel.js b/src/MeasurementControl/measurementsPanel.js
@@ -29,7 +29,7 @@ export function initMeasurementsPanel(viewer) {
       panel.appendChild(toolsHostDiv)
       panel.appendChild(listContainerDiv)
       // Insert before filters/tools if possible, else append at end
-      const tools = document.getElementById('menu_tools')
+      const tools = document.getElementById('menu_appearance')
       if (tools) {
         menu.insertBefore(panel, tools)
         menu.insertBefore(header, panel)
@@ -650,6 +650,46 @@ export function initMeasurementsPanel(viewer) {
     toolsHost.appendChild(existingTools)
   }
 
+  // After tools are moved into `toolsHost`
+  const toolDescriptions = {
+    'angle.png': 'Measure angle',
+    'point.svg': 'Add point',
+    'distance.svg': 'Measure distance',
+    'height.svg': 'Measure height',
+    'circle.svg': 'Circle',
+    'azimuth.svg': 'Azimuth',
+    'area.svg': 'Area',
+    'volume.svg': 'Volume',
+    'sphere_distances.svg': 'Sphere volume',
+    'profile.svg': '2D height profile',
+    'reset_tools.svg': 'Remove all'
+  };
+
+  const toolIcons = existingTools.querySelectorAll('img');
+  toolIcons.forEach(img => {
+    const src = img.getAttribute('src');
+    const file = src.split('/').pop(); // extract icon name
+    const baseName = file.replace(/\.[^/.]+$/, '');
+
+    if (toolDescriptions[file]) {
+      const wrapper = document.createElement('div');
+      wrapper.className = 'tool-with-label';
+      wrapper.id = `tool-wrapper-${baseName}`;
+
+      wrapper.addEventListener('click', () => img.click());
+
+      img.parentNode.insertBefore(wrapper, img);
+      wrapper.appendChild(img);
+
+      const label = document.createElement('span');
+      label.className = 'tool-label';
+      label.textContent = toolDescriptions[file];
+      label.id = `label-${file.replace(/\.[^/.]+$/, '')}`;
+      wrapper.appendChild(label);
+    }
+  });
+
+
   // Move measurement options UI into our tools host
   if (toolsHost) {
     const measOptions = document.getElementById('measurement_options_show')