From 2ea2c33cc3564a8d7a50f83c33654721c4f56a1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marie=20Wahlstr=C3=B8m?= Date: Thu, 23 Oct 2025 13:34:21 +0200 Subject: [PATCH] revert(#8): :fire: Remove elevation control and accepted filtering files as they now exist in new joined file --- src/Accepted/accepted.css | 56 ------ src/Accepted/accepted.js | 210 ---------------------- src/ElevationControl/elevationControl.css | 37 ---- src/ElevationControl/elevationControl.js | 127 ------------- 4 files changed, 430 deletions(-) delete mode 100644 src/Accepted/accepted.css delete mode 100644 src/Accepted/accepted.js delete mode 100644 src/ElevationControl/elevationControl.css delete mode 100644 src/ElevationControl/elevationControl.js diff --git a/src/Accepted/accepted.css b/src/Accepted/accepted.css deleted file mode 100644 index c0e6d25..0000000 --- a/src/Accepted/accepted.css +++ /dev/null @@ -1,56 +0,0 @@ -/* Accepted Filter: action button */ -#doAcceptedFilter { - display: flex; - width: 100%; - margin: 6px 0 10px; - padding: 10px 10px; - font-size: 13px; - font-weight: 500; - background-color: #636262; - color: #ffffff; - border: 1px solid #555; - border-radius: 4px; - cursor: pointer; - transition: - background-color 0.2s ease, - transform 0.1s ease; -} -#doAcceptedFilter:hover { - background-color: #8f8f8f; -} -#doAcceptedFilter:active { - transform: scale(0.97); - background-color: #a8a6a6; -} - -/* Legend container */ -#accepted_legend { - margin-top: 10px; - padding-left: 4px; -} - -/* Legend rows */ -#accepted_legend .legend-row { - display: flex; - align-items: center; - margin: 3px 0; - font-size: 13px; - color: #ddd; /* visible text */ -} - -/* Color boxes */ -#accepted_legend .legend-color { - width: 16px; - height: 16px; - border: 1px solid #777; - margin-right: 8px; - border-radius: 2px; -} - -#accepted_legend .legend-color.accepted { - background-color: #fff; -} - -#accepted_legend .legend-color.not-accepted { - background-color: #000; -} diff --git a/src/Accepted/accepted.js b/src/Accepted/accepted.js deleted file mode 100644 index 34d9780..0000000 --- a/src/Accepted/accepted.js +++ /dev/null @@ -1,210 +0,0 @@ -/** - * Creates the panel for the Accepted Filter - * - */ -function createAcceptedPanel() { - const container = document.getElementById('accepted_list') - if (container) return - - const menu = document.getElementById('potree_menu') - if (!menu) return - - const header = document.createElement('h3') - header.id = 'menu_accepted' - header.innerHTML = 'Accepted Filter' - - const panel = document.createElement('div') - panel.className = 'pv-menu-list' - panel.innerHTML = '
' - - // Place above Appearance if possible - const appearance = document.getElementById('menu_appearance') - if (appearance) { - menu.insertBefore(panel, appearance) - menu.insertBefore(header, panel) - } else { - menu.appendChild(header) - menu.appendChild(panel) - } - - if (window.$ && window.$(menu).accordion) { - try { - window.$(menu).accordion('refresh') - } catch (e) {} - } - - // Simple toggle if accordion doesn’t manage it - header.addEventListener('click', () => { - panel.style.display = panel.style.display === 'none' ? '' : 'none' - }) -} - -/** - * Creates the activation button in the panel - * Activated by 'click' - * - * @param {*} hooks - */ -function ensureActivationButton(hooks) { - const list = document.getElementById('accepted_list') - if (!list) return - if (list.querySelector('#doAcceptedFilter')) return - - const btn = document.createElement('button') - btn.id = 'doAcceptedFilter' - btn.type = 'button' - btn.textContent = 'Activate accepted filter' - btn.addEventListener('click', () => { - if (hooks && typeof hooks.onActivateAccepted === 'function') { - hooks.onActivateAccepted() - } - const legend = document.getElementById('accepted_legend') - if (legend) legend.style.display = 'block' - }) - - list.insertBefore(btn, list.firstChild) -} - -/** - * Creates the legend containing information about accepted and not accepted points - * Hidden until the activation-button is clicked - * - * @returns legend - */ -function ensureAcceptedLegend() { - const list = document.getElementById('accepted_list') - if (!list) return null - - let legend = list.querySelector('#accepted_legend') - if (!legend) { - legend = document.createElement('div') - legend.id = 'accepted_legend' - legend.style.display = 'none' - legend.innerHTML = ` -
-
- Accepted points -
-
-
- Not accepted points -
- ` - list.appendChild(legend) - } - return legend -} - -/** - * Shows/hides legend based on the hook (if the button is clicked or not) - * - * @param {*} show - */ -export function toggleAcceptedLegend(show) { - const legend = document.getElementById('accepted_legend') - if (legend) legend.style.display = show ? 'block' : 'none' -} - -/** - * Function to render that the list wrapper is inside the accepted panel. - * Needed this because the accepted_list was difficult to render propperly - * - */ -function ensureAcceptedListUL() { - const host = document.getElementById('accepted_list') - if (!host) return null - - let ul = host.querySelector('#accepted_ui') - if (!ul) { - ul = document.createElement('ul') - ul.id = 'accepted_ui' - ul.className = 'pv-menu-list' - host.appendChild(ul) - } - return ul -} - -// Move ALL current children from Potree's extra_container into our UL -// function moveAcceptedChildrenOnce() { -// const source = document.querySelector('#materials\\.extra_container') -// const targetUL = ensureAcceptedListUL() -// if (!source || !targetUL) return false - -// // Move only the elements that should be visible in a pv-menu-list (divider + li) -// const nodes = [...source.children].filter( -// (n) => n.classList.contains('divider') || n.tagName.toLowerCase() === 'li' -// ) - -// if (nodes.length === 0) return false - -// for (const n of nodes) { -// targetUL.appendChild(n) // moving preserves event listeners -// } -// return true -// } - -// Observe Potree's extra_container for FUTURE children; move them as they arrive -// function observeAndMirrorExtraContainer() { -// const source = document.querySelector('#materials\\.extra_container') -// if (!source) return null - -// const targetUL = ensureAcceptedListUL() -// if (!targetUL) return null - -// const childObserver = new MutationObserver((mutations) => { -// for (const m of mutations) { -// if (m.type !== 'childList') -// continue -// // On added nodes, move any
  • or .divider into our list -// ;[...m.addedNodes].forEach((node) => { -// if (!(node instanceof HTMLElement)) return -// const isLi = node.tagName && node.tagName.toLowerCase() === 'li' -// const isDivider = node.classList && node.classList.contains('divider') -// if (isLi || isDivider) { -// targetUL.appendChild(node) -// } -// }) -// } -// }) - -// // Only watch direct children; Potree appends li/divider at this level -// childObserver.observe(source, { childList: true }) -// return childObserver -// } - -/** - * initiates the builting of the panel, the button, and - * the additional materials needed to filter based on accepted/not accepted points - * - * @param {*} viewer - * @param {*} hooks - */ -export function initAcceptedControls(viewer, hooks = {}) { - // 1) Always render panel + button - createAcceptedPanel() - ensureActivationButton(hooks) - ensureAcceptedListUL() - ensureAcceptedLegend() - - // 2) Wait for Potree to create extra_container, then move children & keep mirroring - // const menu = - // document.getElementById('potree_menu') || - // document.getElementById('menu') || - // document.body - - // const onceObserver = new MutationObserver(() => { - // const source = document.querySelector('#materials\\.extra_container') - // if (source) { - // // stop the "finder" observer - // onceObserver.disconnect() - - // // Move whatever is present right now - // moveAcceptedChildrenOnce() - - // // Keep mirroring anything Potree adds later - // observeAndMirrorExtraContainer() - // } - // }) - - //onceObserver.observe(menu, { childList: true, subtree: true }) -} diff --git a/src/ElevationControl/elevationControl.css b/src/ElevationControl/elevationControl.css deleted file mode 100644 index 552bfe2..0000000 --- a/src/ElevationControl/elevationControl.css +++ /dev/null @@ -1,37 +0,0 @@ -#btnDoElevationControl { - display: flex; - width: 100%; - margin: 6px 0 10px; - padding: 10px 10px; - font-size: 13px; - font-weight: 500; - background-color: #636262; - color: #ffffff; - border: 1px solid #555; - border-radius: 4px; - cursor: pointer; - transition: - background-color 0.2s ease, - transform 0.1s ease; -} - -#btnDoElevationControl:hover { - background-color: #aeaeae; -} - -#btnDoElevationControl:active { - transform: scale(0.97); - background-color: #c1c1c1; -} - -#elevation_ui { - list-style: none; - margin: 0; - padding: 0; -} -#elevation_list .divider { - height: 1px; - margin: 6px 0; - background: rgba(255, 255, 255, 0.08); - border: 0; -} diff --git a/src/ElevationControl/elevationControl.js b/src/ElevationControl/elevationControl.js deleted file mode 100644 index da1cdbd..0000000 --- a/src/ElevationControl/elevationControl.js +++ /dev/null @@ -1,127 +0,0 @@ -//Cerating a customized section "Elevation Control" -window.createElevationPanel = function createElevationPanel(viewer) { - const container = document.getElementById('elevation_list') - let targetContainer = container - if (!targetContainer) { - // Create a new accordion section for Elevation Control - const menu = document.getElementById('potree_menu') - if (menu) { - const header = document.createElement('h3') - header.id = 'menu_elevation' - header.innerHTML = 'Elevation Control' - const panel = document.createElement('div') - panel.className = 'pv-menu-list' - panel.innerHTML = '
    ' - const about = document.getElementById('menu_appearance') - if (about) { - menu.insertBefore(panel, about) - menu.insertBefore(header, panel) - } else { - menu.appendChild(header) - menu.appendChild(panel) - } - // Activate accordion behavior if jQuery UI accordion already initialized - if ($(menu).accordion) { - try { - $(menu).accordion('refresh') - } catch (e) {} - } - // Toggle on header click if not managed by accordion refresh - header.addEventListener( - 'click', - () => - (panel.style.display = panel.style.display === 'none' ? '' : 'none') - ) - targetContainer = panel.querySelector('#elevation_list') - } - } -} - -function ensureActivationButton(hooks) { - const list = document.getElementById('elevation_list') - if (!list) return - if (list.querySelector('#btnDoElevationControl')) return - - const btn = document.createElement('button') - btn.id = 'btnDoElevationControl' - btn.type = 'button' - btn.textContent = 'Activate elevation control' - - btn.addEventListener('click', () => { - if (hooks && typeof hooks.onActivateElevation === 'function') { - hooks.onActivateElevation() - } - }) - - // put the button at the very top of the elevation list - list.insertBefore(btn, list.firstChild) -} - -// (re)connect the elevation labels to the slider after the container is moved -function rebindElevationLabel() { - const slider = window.jQuery ? window.jQuery('#sldHeightRange') : null - const label = document.getElementById('lblHeightRange') - if (!slider || !slider.length || !label) return - - const update = () => { - const low = slider.slider('values', 0) - const high = slider.slider('values', 1) - label.textContent = `${low.toFixed(2)} to ${high.toFixed(2)}` - } - - slider.slider({ - min: -10000, - max: 0, - values: [-10000, 0] - }) - - slider.off('slide.custom slidestop.custom change.custom') - slider.on('slide.custom', update) - slider.on('slidestop.custom change.custom', update) - update() -} - -//Move the elevation range section to the customised "Elevation Control" section -function moveElevationContainer() { - const target = document.getElementById('elevation_list') - const elevationContainer = document.querySelector( - '#materials\\.elevation_container' - ) - if (!elevationContainer || !target) return false - target.appendChild(elevationContainer) - rebindElevationLabel() - return true -} - -//initiate and orchestrate all funcitons to render the Evelation control section of the sidebar propperly -export function initElevationControls(viewer, hooks = {}) { - // 1) Ensure the panel exists - createElevationPanel(viewer) - - // 2) Add the activation button (top of list) - ensureActivationButton(hooks) - - // 3) Observe and move Potree’s internal elevation UI when it appears - const menu = - document.getElementById('potree_menu') || - document.getElementById('menu') || - document.body - - const observer = new MutationObserver(() => { - const found = document.querySelector('#materials\\.elevation_container') - if (found) { - observer.disconnect() - const ok = moveElevationContainer() - if (!ok) console.warn('[Elevation] moveElevationContainer failed') - } - }) - observer.observe(menu, { childList: true, subtree: true }) - - - //Automatically activate Elevation Control once upon initiation - const btn = document.getElementById('btnDoElevationControl') - if (btn && !btn.dataset.autoClicked) { - btn.dataset.autoClicked = 'true' // prevents double-activation - btn.click() - } -}