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] 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