feat(#5): ✨ Moved some files, added some styling and features

Added title for the measurement list, and for the data display. Moved some options from scene to measurements tab. Added opening and closing transition to the tab
TDT4290-group-4 · Oct 1, 2025 · 6644426 · 6644426
1 parent d028b7e
commit 6644426
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
       href="/libs/jstree/themes/mixed/style.css"
     />
     <link rel="stylesheet" type="text/css" href="src/style.css" />
-    <link rel="stylesheet" href="/src/measurementsPanel.css" />
+    <link rel="stylesheet" href="/src/MeasurementControl/measurementsPanel.css" />
   </head>
 
   <body>
@@ -56,7 +56,7 @@
     </div>
 
     <script src="src/ElevationControl/elevationControl.js"></script>
-    <script src="/src/measurementsPanel.js"></script>
+    <script src="/src/MeasurementControl/measurementsPanel.js"></script>
 
     <script type="module">
       window.viewer = new Potree.Viewer(

diff --git a/src/measurementsPanel.css → src/MeasurementControl/measurementsPanel.css b/src/measurementsPanel.css → src/MeasurementControl/measurementsPanel.css
@@ -226,3 +226,18 @@
   background: #5a2d2d;
   color: #fff;
 }
+
+.m-list-title, .m-data-title {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: .5px;
+  text-transform: uppercase;
+  padding: 6px 8px 4px 14px;
+  margin-left: 2px;
+  color: #c7d4d9;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.m-list-title { margin: 6px 0 4px; }
+.m-data-title { margin: 10px 0 8px; border-top:1px solid #303a3f; padding-top:10px; }
diff --git a/src/measurementsPanel.js → src/MeasurementControl/measurementsPanel.js b/src/measurementsPanel.js → src/MeasurementControl/measurementsPanel.js
@@ -5,6 +5,8 @@
  * dynamically mounts the native properties panel when a measurement is active.
  */
 window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
+  // Track last selected measurement label for dynamic data title
+  const lastSelection = { uuid: null, label: '' }
   // Resolve or create measurements container in Potree menu
   const existingListContainer = document.getElementById('measurements_list')
   let targetContainer = existingListContainer
@@ -18,10 +20,10 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
       panel.className = 'pv-menu-list'
       panel.innerHTML =
         '<div style="margin-bottom:6px" id="measurement_tools_host"></div><div id="measurements_list" class="auto"></div>'
-      // Insert before filters/about if possible, else append at end
-      const about = document.getElementById('menu_about')
-      if (about) {
-        menu.insertBefore(panel, about)
+      // Insert before filters/tools if possible, else append at end
+      const tools = document.getElementById('menu_tools')
+      if (tools) {
+        menu.insertBefore(panel, tools)
         menu.insertBefore(header, panel)
       } else {
         menu.appendChild(header)
@@ -33,12 +35,14 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
           $(menu).accordion('refresh')
         } catch (e) {}
       }
-      // Toggle on header click if not managed by accordion refresh
-      header.addEventListener(
-        'click',
-        () =>
-          (panel.style.display = panel.style.display === 'none' ? '' : 'none')
-      )
+      header.addEventListener('click', () => {
+        if ($(menu).accordion && $(menu).data('uiAccordion')) return
+        if (window.jQuery) {
+          const $p = window.jQuery(panel)
+            ;($p.is(':visible') ? $p.slideUp(350) : $p.slideDown(350))
+          return
+        }
+      })
       targetContainer = panel.querySelector('#measurements_list')
     }
   }
@@ -53,8 +57,13 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
   listRoot.id = 'measurement_items'
   listRoot.style.cssText =
     'max-height:260px; overflow:auto; margin-bottom:6px; border:1px solid #333; border-radius:4px;'
-  targetContainer.parentElement &&
+  const listTitle = document.createElement('div')
+  listTitle.className = 'm-list-title'
+  listTitle.textContent = 'List of measurements'
+  if (targetContainer.parentElement) {
+    targetContainer.parentElement.insertBefore(listTitle, targetContainer)
     targetContainer.parentElement.insertBefore(listRoot, targetContainer)
+  }
 
   // Creating an incremental number for each measurment type
   const creationOrder = []
@@ -134,9 +143,20 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
   function showPanelInMeasurements() {
     ensurePlaceholder()
     if (!originalPropertiesPanel) return
+    const desiredTitle = lastSelection.label
+      ? `Data for ${lastSelection.label}`
+      : 'Measurement Data'
     if (originalPropertiesPanel.parentElement !== targetContainer) {
       targetContainer.innerHTML = ''
+      const titleEl = document.createElement('div')
+      titleEl.id = 'measurement_data_title'
+      titleEl.className = 'm-data-title'
+      titleEl.textContent = desiredTitle
+      targetContainer.appendChild(titleEl)
       targetContainer.appendChild(originalPropertiesPanel)
+    } else {
+      const titleEl = targetContainer.querySelector('#measurement_data_title')
+      if (titleEl) titleEl.textContent = desiredTitle
     }
   }
   function restorePanelToOriginal() {
@@ -331,6 +351,11 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
       ;[...listRoot.querySelectorAll('.m-row[data-uuid]')].forEach((el) => {
         el.classList.toggle('active', el.dataset.uuid === uuid)
       })
+      const thisRow = listRoot.querySelector(`.m-row[data-uuid="${uuid}"] .m-row-label`)
+      if (thisRow) {
+        lastSelection.uuid = uuid
+        lastSelection.label = thisRow.textContent.trim()
+      }
       showPanelInMeasurements()
     }
   })
@@ -347,6 +372,11 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
         ;[...listRoot.querySelectorAll('.m-row[data-uuid]')].forEach((el) => {
           el.classList.toggle('active', el.dataset.uuid === uuid)
         })
+        const activeRow = listRoot.querySelector(`.m-row[data-uuid="${uuid}"] .m-row-label`)
+        if (activeRow) {
+          lastSelection.uuid = uuid
+          lastSelection.label = activeRow.textContent.trim()
+        }
         // Determine if selected node is a measurement-like object; if not, restore.
         const isMeasurement =
           sel && sel.data && isMeasurementUUID(sel.data.uuid)
@@ -365,4 +395,23 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
   if (toolsHost && existingTools) {
     toolsHost.appendChild(existingTools)
   }
+
+  // Move measurement options UI into our tools host
+  if (toolsHost) {
+    const measOptions = document.getElementById('measurement_options_show')
+    if (measOptions) {
+      const measLi = measOptions.closest('li') || measOptions
+      let prev = measLi.previousElementSibling
+      for (let i = 0; i < 3 && prev; i++) {
+        if (prev.classList && prev.classList.contains('divider') && /Measurement/i.test(prev.textContent || '')) {
+          prev.remove()
+          break
+        }
+        prev = prev.previousElementSibling
+      }
+      if (measLi && measLi.parentElement !== toolsHost) {
+        toolsHost.appendChild(measLi)
+      }
+    }
+  }
 }