From a3c4875f465193e6807898900d033dd67aa87c84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Wahlstr=C3=B8m?= Date: Thu, 30 Oct 2025 11:09:15 +0100 Subject: [PATCH 1/6] fix(#46): :bug: Fixed display bug (I think) --- src/AcceptedFiltering/threePanels.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/AcceptedFiltering/threePanels.js b/src/AcceptedFiltering/threePanels.js index 249df0f..0b751ee 100644 --- a/src/AcceptedFiltering/threePanels.js +++ b/src/AcceptedFiltering/threePanels.js @@ -88,7 +88,7 @@ function ensurePanelScaffold(listId) { * @param {'elevation'|'accepted'} key */ function showOnly(key) { - const elevBody = byId('elevation2_list')?.querySelector('.panel-body') + const elevBody = byId('elevation_list')?.querySelector('.panel-body') const accBody = byId('accepted_list_host')?.querySelector('.panel-body') if (elevBody) elevBody.style.display = key === 'elevation' ? '' : 'none' @@ -150,7 +150,7 @@ function selectCloudNode(hooks) { * @param {number} pollEvery * @returns {Promise} */ -async function waitForOrPoll(id, softMs = 1400, pollEvery = 120) { +async function waitForOrPoll(id, softMs = 1400, pollEvery = 10) { const start = performance.now() while (performance.now() - start < softMs) { const el = byId(id) @@ -168,9 +168,9 @@ function createElevationPanel() { insertSection({ headerId: 'menu_elevation', headerText: 'Elevation Control', - listId: 'elevation2_list' + listId: 'elevation_list' }) - ensurePanelScaffold('elevation2_list') + ensurePanelScaffold('elevation_list') } /** @@ -178,7 +178,7 @@ function createElevationPanel() { * @param {{onActivateElevation?:Function}} hooks */ function ensureElevationButton(hooks) { - const { btns } = ensurePanelScaffold('elevation2_list') + const { btns } = ensurePanelScaffold('elevation_list') if (!btns || byId('btnDoElevationControl')) return const btn = document.createElement('button') @@ -219,7 +219,7 @@ function setUpElevationSlider(hooks) { * @returns {boolean} true if moved or already in place */ function moveElevationContainer(hooks) { - const { body } = ensurePanelScaffold('elevation2_list') + const { body } = ensurePanelScaffold('elevation_list') const src = byId('materials.elevation_container') if (!body || !src) return false @@ -228,6 +228,7 @@ function moveElevationContainer(hooks) { setUpElevationSlider(hooks) accordionRefresh() } + src.style.removeProperty('display') return true } @@ -412,7 +413,7 @@ function attachSelfHealing(activeGetter, hooks) { const mode = activeGetter() if (mode === 'elevation') { const src = byId('materials.elevation_container') - const { body } = ensurePanelScaffold('elevation2_list') + const { body } = ensurePanelScaffold('elevation_list') if (src && body && src.parentNode !== body) moveElevationContainer(hooks) } }) From a016ed7ae0c564fb1a19bafaeb99bd030eb4452d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Wahlstr=C3=B8m?= Date: Thu, 30 Oct 2025 12:45:43 +0100 Subject: [PATCH 2/6] refactor(#48): :truck: Updated elevation and acepted code to be more descriptic --- index.html | 2 +- .../threePanels.css => Filter/filter.css} | 48 +++++-------------- .../threePanels.js => Filter/filter.js} | 13 +++-- src/potreeViewer.js | 4 +- 4 files changed, 22 insertions(+), 45 deletions(-) rename src/{AcceptedFiltering/threePanels.css => Filter/filter.css} (75%) rename src/{AcceptedFiltering/threePanels.js => Filter/filter.js} (96%) diff --git a/index.html b/index.html index 2f98510..2c4e868 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@ href="/src/MeasurementControl/measurementsPanel.css" /> - + diff --git a/src/AcceptedFiltering/threePanels.css b/src/Filter/filter.css similarity index 75% rename from src/AcceptedFiltering/threePanels.css rename to src/Filter/filter.css index e83b9e6..8f7b24c 100644 --- a/src/AcceptedFiltering/threePanels.css +++ b/src/Filter/filter.css @@ -1,10 +1,7 @@ /* ---------- Buttons (shared look) ---------- */ /* Reuse your accepted button style for all four */ #btnDoElevationControl, -#doAcceptedFiltering, -#btnTHU, -#btnTVU, -#btnTHUFilter { +#doAcceptedFiltering { display: flex; width: 100%; margin: 6px 0 10px; @@ -22,55 +19,34 @@ } #btnDoElevationControl:hover, -#doAcceptedFiltering:hover, -#btnTHU:hover, -#btnTVU:hover, -#btnTHUFilter:hover { +#doAcceptedFiltering:hover { background-color: #8f8f8f; } #btnDoElevationControl:active, -#doAcceptedFiltering:active, -#btnTHU:active, -#btnTVU:active, -#btnTHUFilter:active { +#doAcceptedFiltering:active { transform: scale(0.97); background-color: #a8a6a6; } /* Optional: “active mode” outline if you toggle a class via JS */ #btnDoElevationControl.active, -#doAcceptedFiltering.active, -#btnTHU.active, -#btnTVU.active, -#btnTHUFilter:active { +#doAcceptedFiltering.active{ outline: 2px solid #7ba8ff; outline-offset: 1px; } -/* THU/TVU side-by-side */ -#thu_tvu_list .thu-tvu-row { - display: flex; - gap: 6px; -} -#thu_tvu_list .thu-tvu-row > button { - flex: 1 1 50%; - margin: 0; -} - /* ---------- Panels / moved containers ---------- */ /* Keep Potree’s moved subtrees neat and full-width inside our panels */ -#elevation2_list [id='materials.elevation_container'], -#thu_tvu_list [id='materials.extra_container'] { +#elevation_list [id='materials.elevation_container']{ width: 100%; box-sizing: border-box; padding: 6px 8px; /* small breathing room since we moved it out of Appearance */ } /* Slight spacing inside our panel lists (under the button) */ -#elevation2_list, -#accepted_list_host, -#thu_tvu_list { +#elevation_list, +#accepted_list_host{ display: block; padding: 4px 0; } @@ -101,16 +77,14 @@ /* ---------- Accordions / headers (light touch) ---------- */ /* Don’t fight jQuery-UI’s theme. Just small spacing adjustments. */ -#menu_elevation2 + .pv-menu-list, -#menu_accepted + .pv-menu-list, -#menu_thu_tvu + .pv-menu-list { +#menu_elevation + .pv-menu-list, +#menu_accepted + .pv-menu-list{ padding-top: 6px; } /* Optional: header label color alignment with dark UI */ -#menu_elevation2 span, -#menu_accepted span, -#menu_thu_tvu span { +#menu_elevation span, +#menu_accepted span { color: #e6e6e6; font-weight: 600; letter-spacing: 0.2px; diff --git a/src/AcceptedFiltering/threePanels.js b/src/Filter/filter.js similarity index 96% rename from src/AcceptedFiltering/threePanels.js rename to src/Filter/filter.js index 0b751ee..3bbfd08 100644 --- a/src/AcceptedFiltering/threePanels.js +++ b/src/Filter/filter.js @@ -1,7 +1,10 @@ -// Three Potree sidebar sections with buttons + panel bodies: -// • Elevation → moves #materials.elevation_container into our Elevation body -// • Accepted → custom UI fully defined here (no external module) - +/** Two Potree sidebar sections with buttons + panel bodies: + * + * • Elevation → moves #materials.elevation_container into our Elevation body + * Used for controlling the elevation gradient with a slider and altering between different gradient schemes + * • Accepted → custom UI fully defined here (no external module) + * Used for indicating which points/surveys are accepted as the seabed and which are not +*/ const byId = (id) => document.getElementById(id) /** @@ -427,7 +430,7 @@ function attachSelfHealing(activeGetter, hooks) { * @param {object} viewer Potree viewer (not used directly here but available to hooks) * @param {{onActivateElevation?:Function, onActivateAccepted?:Function, selectCloudOnce?:Function, onElevationRangeChange?:Function}} hooks */ -export function initThreePanels(viewer, hooks = {}) { +export function initFilterPanels(viewer, hooks = {}) { // Build sections initElevationControls(hooks) initAcceptedControlsInline(hooks) diff --git a/src/potreeViewer.js b/src/potreeViewer.js index 8041580..bfe1736 100644 --- a/src/potreeViewer.js +++ b/src/potreeViewer.js @@ -4,7 +4,7 @@ import { initMiniMap } from './MiniMap/miniMap.js' import { initThreePanels, toggleAcceptedLegend -} from './AcceptedFiltering/threePanels.js' +} from './Filter/filter.js' import { ecef } from './config.js' /** @@ -90,7 +90,7 @@ export async function createPotreeViewer( }) } - initThreePanels(viewer, { + initFilterPanels(viewer, { onActivateElevation: () => { const $ = window.jQuery || window.$ const slider = $ ? $('#sldHeightRange') : null From 02f7d20e6cb399d8b49c122eb42eddb8cfc86b99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Wahlstr=C3=B8m?= Date: Thu, 30 Oct 2025 12:47:45 +0100 Subject: [PATCH 3/6] refactor: :adhesive_bandage: One file name changes --- src/potreeViewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/potreeViewer.js b/src/potreeViewer.js index bfe1736..876c007 100644 --- a/src/potreeViewer.js +++ b/src/potreeViewer.js @@ -2,7 +2,7 @@ import { initAnnotationsPanel } from './AnnotationControl/annotationPanel.js' import { initMeasurementsPanel } from './MeasurementControl/measurementsPanel.js' import { initMiniMap } from './MiniMap/miniMap.js' import { - initThreePanels, + initFilterPanels, toggleAcceptedLegend } from './Filter/filter.js' import { ecef } from './config.js' From dbc178233a895b3c0dce2e8f4d57b4ec4a534157 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Wahlstr=C3=B8m?= Date: Thu, 30 Oct 2025 12:51:20 +0100 Subject: [PATCH 4/6] style: :art: Ran prettier --- src/potreeViewer.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/potreeViewer.js b/src/potreeViewer.js index 876c007..d14378e 100644 --- a/src/potreeViewer.js +++ b/src/potreeViewer.js @@ -1,10 +1,7 @@ import { initAnnotationsPanel } from './AnnotationControl/annotationPanel.js' import { initMeasurementsPanel } from './MeasurementControl/measurementsPanel.js' import { initMiniMap } from './MiniMap/miniMap.js' -import { - initFilterPanels, - toggleAcceptedLegend -} from './Filter/filter.js' +import { initFilterPanels, toggleAcceptedLegend } from './Filter/filter.js' import { ecef } from './config.js' /** @@ -85,7 +82,7 @@ export async function createPotreeViewer( // Helper function to update all point clouds for Accepted filtering function updateAllCloudsAccepted(gradientName) { pointclouds.forEach((pc) => { - pc.material.activeAttributeName = 'Accepted' + pc.material.activeAttributeName = 'accepted' pc.material.gradient = Potree.Gradients[gradientName] }) } From 3d90cb340cdb46ac5f094d31fd7944a49bcec326 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Wahlstr=C3=B8m?= Date: Thu, 30 Oct 2025 12:52:01 +0100 Subject: [PATCH 5/6] style(#46): :art: Ran prettier --- src/Filter/filter.css | 8 ++++---- src/Filter/filter.js | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/Filter/filter.css b/src/Filter/filter.css index 8f7b24c..be09a06 100644 --- a/src/Filter/filter.css +++ b/src/Filter/filter.css @@ -31,14 +31,14 @@ /* Optional: “active mode” outline if you toggle a class via JS */ #btnDoElevationControl.active, -#doAcceptedFiltering.active{ +#doAcceptedFiltering.active { outline: 2px solid #7ba8ff; outline-offset: 1px; } /* ---------- Panels / moved containers ---------- */ /* Keep Potree’s moved subtrees neat and full-width inside our panels */ -#elevation_list [id='materials.elevation_container']{ +#elevation_list [id='materials.elevation_container'] { width: 100%; box-sizing: border-box; padding: 6px 8px; /* small breathing room since we moved it out of Appearance */ @@ -46,7 +46,7 @@ /* Slight spacing inside our panel lists (under the button) */ #elevation_list, -#accepted_list_host{ +#accepted_list_host { display: block; padding: 4px 0; } @@ -78,7 +78,7 @@ /* ---------- Accordions / headers (light touch) ---------- */ /* Don’t fight jQuery-UI’s theme. Just small spacing adjustments. */ #menu_elevation + .pv-menu-list, -#menu_accepted + .pv-menu-list{ +#menu_accepted + .pv-menu-list { padding-top: 6px; } diff --git a/src/Filter/filter.js b/src/Filter/filter.js index 3bbfd08..40c5d56 100644 --- a/src/Filter/filter.js +++ b/src/Filter/filter.js @@ -1,10 +1,10 @@ /** Two Potree sidebar sections with buttons + panel bodies: - * + * * • Elevation → moves #materials.elevation_container into our Elevation body - * Used for controlling the elevation gradient with a slider and altering between different gradient schemes + * Used for controlling the elevation gradient with a slider and altering between different gradient schemes * • Accepted → custom UI fully defined here (no external module) * Used for indicating which points/surveys are accepted as the seabed and which are not -*/ + */ const byId = (id) => document.getElementById(id) /** From 1703cb76f5e6c4b42a1ba20e5eb6364b0cfa9dd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Wahlstr=C3=B8m?= Date: Thu, 30 Oct 2025 15:42:14 +0100 Subject: [PATCH 6/6] Update src/potreeViewer.js Fix typo in comment Co-authored-by: Adrian Haabpiht Solberg --- src/potreeViewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/potreeViewer.js b/src/potreeViewer.js index c86df2f..2e2dd5e 100644 --- a/src/potreeViewer.js +++ b/src/potreeViewer.js @@ -205,7 +205,7 @@ function overrideShaderForGradient(pc) { } } -// Prevent overlapping scroll freezes when activating filters quickly +// Prevent overlapping scroll freezing when activating filters quickly let suppressionActive = false /**