Skip to content

Commit

Permalink
style(#8): 💡 Update the comments and clean the code
Browse files Browse the repository at this point in the history
  • Loading branch information
@mariewah
mariewah committed Oct 14, 2025
1 parent eae6463 commit 3b79c44
Show file tree
Hide file tree
Showing 6 changed files with 255 additions and 214 deletions.
9 changes: 2 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,8 @@
rel="stylesheet"
href="/src/MeasurementControl/measurementsPanel.css"
/>
<link
rel = "stylesheet"
href = "src/Accepted/accepted.css"
/>
<link
rel = "stylesheet"
href = "src/ElevationControl/elevationControl.css"/>
<link rel="stylesheet" href="src/Accepted/accepted.css" />
<link rel="stylesheet" href="src/ElevationControl/elevationControl.css" />
</head>

<body>
Expand Down
58 changes: 29 additions & 29 deletions src/Accepted/accepted.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,32 +25,32 @@

/* 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;
}
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;
}
197 changes: 114 additions & 83 deletions src/Accepted/accepted.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/**
* Creates the panel for the Accepted Filter
*
*/
function createAcceptedPanel() {
const container = document.getElementById('accepted_list')
if (container) return
Expand All @@ -13,7 +17,7 @@ function createAcceptedPanel() {
panel.className = 'pv-menu-list'
panel.innerHTML = '<div id="accepted_list" class="auto"></div>'

// Place above Appearance if possible (same as Elevation)
// Place above Appearance if possible
const appearance = document.getElementById('menu_appearance')
if (appearance) {
menu.insertBefore(panel, appearance)
Expand All @@ -35,6 +39,12 @@ function createAcceptedPanel() {
})
}

/**
* Creates the activation button in the panel
* Activated by 'click'
*
* @param {*} hooks
*/
function ensureActivationButton(hooks) {
const list = document.getElementById('accepted_list')
if (!list) return
Expand All @@ -46,25 +56,31 @@ function ensureActivationButton(hooks) {
btn.textContent = 'Activate accepted filter'
btn.addEventListener('click', () => {
if (hooks && typeof hooks.onActivateAccepted === 'function') {
hooks.onActivateAccepted();
hooks.onActivateAccepted()
}
const legend = document.getElementById('accepted_legend');
if (legend) legend.style.display = 'block'; // ensure legend shows
});
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' // hidden until button click
legend.innerHTML = `
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 = `
<div class="legend-row">
<div class="legend-color accepted"></div>
<span>Accepted points</span>
Expand All @@ -74,18 +90,26 @@ function ensureAcceptedLegend() {
<span>Not accepted points</span>
</div>
`
list.appendChild(legend)
}
return legend
}

// Show/hide legend (called from viewer hook)
export function toggleAcceptedLegend(show) {
const legend = document.getElementById('accepted_legend')
if (legend) legend.style.display = show ? 'block' : 'none'
list.appendChild(legend)
}
return legend
}

// Ensure our list wrapper exists inside the Accepted panel
/**
* 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
Expand All @@ -101,53 +125,60 @@ function ensureAcceptedListUL() {
}

// 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
// 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'
)
// // 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
// if (nodes.length === 0) return false

for (const n of nodes) {
targetUL.appendChild(n) // moving preserves event listeners
}
return true
}
// 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 <li> 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
}
// 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 <li> 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()
Expand All @@ -156,24 +187,24 @@ export function initAcceptedControls(viewer, hooks = {}) {
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()
// }
// })
// 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 })
}
37 changes: 20 additions & 17 deletions src/ElevationControl/elevationControl.css
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
#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;
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 {
Expand All @@ -24,11 +24,14 @@
background-color: #c1c1c1;
}

#elevation_ui { list-style: none; margin: 0; padding: 0; }
#elevation_ui {
list-style: none;
margin: 0;
padding: 0;
}
#elevation_list .divider {
height: 1px;
margin: 6px 0;
background: rgba(255,255,255,0.08);
background: rgba(255, 255, 255, 0.08);
border: 0;
}

Loading

0 comments on commit 3b79c44

Please sign in to comment.