diff --git a/src/AcceptedFiltering/threePanels.css b/src/AcceptedFiltering/threePanels.css index e83b9e6..8dbde01 100644 --- a/src/AcceptedFiltering/threePanels.css +++ b/src/AcceptedFiltering/threePanels.css @@ -128,22 +128,24 @@ align-items: center; margin: 3px 0; font-size: 13px; - color: #ddd; /* visible text */ + color: #ddd; } -/* Color boxes */ +/* Color boxes → now circles */ #accepted_legend .legend-color { - width: 16px; - height: 16px; - border: 1px solid #777; - margin-right: 8px; - border-radius: 2px; + width: 20px; + height: 8px; + border-radius: 4px; /* pill shape */ + margin-left: 6px; } #accepted_legend .legend-color.accepted { background-color: #fff; + border: #0008; + box-shadow: 0 0 4px 1px #fff8; } #accepted_legend .legend-color.not-accepted { background-color: #000; + box-shadow: 0 0 4px 1px #fff8; } diff --git a/src/AcceptedFiltering/threePanels.js b/src/AcceptedFiltering/threePanels.js index 249df0f..e39cf65 100644 --- a/src/AcceptedFiltering/threePanels.js +++ b/src/AcceptedFiltering/threePanels.js @@ -299,12 +299,12 @@ function ensureAcceptedLegend() { legend.style.display = 'none' legend.innerHTML = `
+ Accepted points displayed as:
- Accepted points
+ Not accepted points displayed as:
- Not accepted points
` list.appendChild(legend) diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css index d5fa999..e767c65 100644 --- a/src/MeasurementControl/measurementsPanel.css +++ b/src/MeasurementControl/measurementsPanel.css @@ -276,3 +276,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 a64202f..d8c59c0 100644 --- a/src/MeasurementControl/measurementsPanel.js +++ b/src/MeasurementControl/measurementsPanel.js @@ -31,7 +31,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) @@ -914,6 +914,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') diff --git a/src/potreeViewer.js b/src/potreeViewer.js index ad7a0dc..86e1d1b 100644 --- a/src/potreeViewer.js +++ b/src/potreeViewer.js @@ -58,10 +58,10 @@ export async function createPotreeViewer( viewer.loadGUI(() => { viewer.setLanguage('en') - $('#menu_appearance').next().show() - $('#menu_tools').next().show() - $('#menu_scene').next().show() - $('#menu_filters').next().show() + $('#menu_appearance').next().hide() + $('#menu_tools').next().hide() + $('#menu_scene').next().hide() + $('#menu_filters').remove() viewer.toggleSidebar() // Store the last used elevation gradient