diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css index 96f735f..f22b094 100644 --- 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 index 6b70ac2..9051705 100644 --- 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')