diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css index f227535..96f735f 100644 --- a/src/MeasurementControl/measurementsPanel.css +++ b/src/MeasurementControl/measurementsPanel.css @@ -231,7 +231,7 @@ position: relative; } .measurement-tools-host { - margin-bottom: 6px; + margin-bottom: 32px; } .measurement-items-root { max-height: 260px; @@ -259,6 +259,10 @@ align-items: center; gap: 6px; } +.measurement-options-block { + margin-top: 12px !important; + display: block; +} .m-list-title { margin: 6px 0 4px; } diff --git a/src/MeasurementControl/measurementsPanel.js b/src/MeasurementControl/measurementsPanel.js index d9cdb46..66cc769 100644 --- a/src/MeasurementControl/measurementsPanel.js +++ b/src/MeasurementControl/measurementsPanel.js @@ -64,11 +64,13 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { let listRoot = document.createElement('div') listRoot.id = 'measurement_items' listRoot.className = 'measurement-items-root' - const listTitle = document.createElement('div') - listTitle.className = 'm-list-title' - listTitle.textContent = 'List of measurements' + const listDivider = document.createElement('div') + listDivider.className = 'divider' + const dividerSpan = document.createElement('span') + dividerSpan.textContent = 'List of Measurements' + listDivider.appendChild(dividerSpan) if (targetContainer.parentElement) { - targetContainer.parentElement.insertBefore(listTitle, targetContainer) + targetContainer.parentElement.insertBefore(listDivider, targetContainer) targetContainer.parentElement.insertBefore(listRoot, targetContainer) } @@ -150,20 +152,49 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { function showPanelInMeasurements() { ensurePlaceholder() if (!originalPropertiesPanel) return - const desiredTitle = lastSelection.label - ? `Data for ${lastSelection.label}` - : 'Measurement Data' + const hasSelection = !!lastSelection.label 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) + if (hasSelection) { + const titleEl = document.createElement('div') + titleEl.id = 'measurement_data_title' + titleEl.className = 'm-data-title' + titleEl.textContent = `Data for ${lastSelection.label}` + targetContainer.appendChild(titleEl) + } else { + const msg = document.createElement('div') + msg.className = 'measurement-info-message' + msg.textContent = 'Select a measurement to view its properties here' + targetContainer.appendChild(msg) + } targetContainer.appendChild(originalPropertiesPanel) } else { - const titleEl = targetContainer.querySelector('#measurement_data_title') - if (titleEl) titleEl.textContent = desiredTitle + const existingTitle = targetContainer.querySelector( + '#measurement_data_title' + ) + const existingInfo = targetContainer.querySelector( + '.measurement-info-message' + ) + if (hasSelection) { + if (!existingTitle) { + if (existingInfo) existingInfo.remove() + const titleEl = document.createElement('div') + titleEl.id = 'measurement_data_title' + titleEl.className = 'm-data-title' + titleEl.textContent = `Data for ${lastSelection.label}` + targetContainer.insertBefore(titleEl, originalPropertiesPanel) + } else { + existingTitle.textContent = `Data for ${lastSelection.label}` + } + } else { + if (existingTitle) existingTitle.remove() + if (!existingInfo) { + const msg = document.createElement('div') + msg.className = 'measurement-info-message' + msg.textContent = 'Select a measurement to view its properties here' + targetContainer.insertBefore(msg, originalPropertiesPanel) + } + } } } function restorePanelToOriginal() { @@ -325,19 +356,16 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { (selectedUUID = sel.data.uuid) } } catch (_e) {} - - const titleEl = targetContainer.querySelector('#measurement_data_title') if ( selectedUUID && listRoot.querySelector(`.m-row[data-uuid="${selectedUUID}"]`) ) { - // Update lastSelection + active row highlight updateActiveSelection(selectedUUID) - if (titleEl) titleEl.textContent = `Data for ${lastSelection.label}` + lastSelection.label && showPanelInMeasurements() } else { lastSelection.uuid = null lastSelection.label = '' - if (titleEl) titleEl.textContent = 'Measurement Data' + showPanelInMeasurements() } } } @@ -439,8 +467,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { if (removed && removed.uuid && removed.uuid === lastSelection.uuid) { lastSelection.uuid = null lastSelection.label = '' - const titleEl = targetContainer.querySelector('#measurement_data_title') - if (titleEl) titleEl.textContent = 'Measurement Data' + showPanelInMeasurements() } }) viewer.scene.addEventListener('volume_removed', (e) => { @@ -449,8 +476,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { if (removed && removed.uuid && removed.uuid === lastSelection.uuid) { lastSelection.uuid = null lastSelection.label = '' - const titleEl = targetContainer.querySelector('#measurement_data_title') - if (titleEl) titleEl.textContent = 'Measurement Data' + showPanelInMeasurements() } }) viewer.scene.addEventListener('profile_removed', (e) => { @@ -459,8 +485,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { if (removed && removed.uuid && removed.uuid === lastSelection.uuid) { lastSelection.uuid = null lastSelection.label = '' - const titleEl = targetContainer.querySelector('#measurement_data_title') - if (titleEl) titleEl.textContent = 'Measurement Data' + showPanelInMeasurements() } }) @@ -560,6 +585,9 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) { const measOptions = document.getElementById('measurement_options_show') if (measOptions) { const measLi = measOptions.closest('li') || measOptions + if (measLi && !measLi.classList.contains('measurement-options-block')) { + measLi.classList.add('measurement-options-block') + } let prev = measLi.previousElementSibling for (let i = 0; i < 3 && prev; i++) { if (