diff --git a/index.html b/index.html
index c32c195..85732a9 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,10 @@
href="/libs/jstree/themes/mixed/style.css"
/>
-
+
diff --git a/src/ElevationControl/elevationControl.js b/src/ElevationControl/elevationControl.js
index 276456b..a8f4ebb 100644
--- a/src/ElevationControl/elevationControl.js
+++ b/src/ElevationControl/elevationControl.js
@@ -82,7 +82,6 @@ function moveElevationContainer() {
//initiate and orchestrate all funcitons to render the Evelation control section of the sidebar propperly
window.initElevationControls = function initElevationControls(viewer) {
-
//Creates the section
createElevationPanel(viewer)
diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css
index 18af527..f227535 100644
--- a/src/MeasurementControl/measurementsPanel.css
+++ b/src/MeasurementControl/measurementsPanel.css
@@ -227,10 +227,30 @@
color: #fff;
}
-.m-list-title, .m-data-title {
+.measurements-panel {
+ position: relative;
+}
+.measurement-tools-host {
+ margin-bottom: 6px;
+}
+.measurement-items-root {
+ max-height: 260px;
+ overflow: auto;
+ margin-bottom: 6px;
+ border: 1px solid #333;
+ border-radius: 4px;
+}
+.measurement-info-message {
+ padding: 4px 8px;
+ font-size: 12px;
+ opacity: 0.6;
+}
+
+.m-list-title,
+.m-data-title {
font-size: 12px;
font-weight: 600;
- letter-spacing: .5px;
+ letter-spacing: 0.5px;
text-transform: uppercase;
padding: 6px 8px 4px 14px;
margin-left: 2px;
@@ -239,5 +259,11 @@
align-items: center;
gap: 6px;
}
-.m-list-title { margin: 6px 0 4px; }
-.m-data-title { margin: 10px 0 8px; border-top:1px solid #303a3f; padding-top:10px; }
+.m-list-title {
+ margin: 6px 0 4px;
+}
+.m-data-title {
+ margin: 10px 0 8px;
+ border-top: 1px solid #303a3f;
+ padding-top: 10px;
+}
diff --git a/src/MeasurementControl/measurementsPanel.js b/src/MeasurementControl/measurementsPanel.js
index e6b32f7..c834839 100644
--- a/src/MeasurementControl/measurementsPanel.js
+++ b/src/MeasurementControl/measurementsPanel.js
@@ -15,11 +15,19 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
if (menu) {
const header = document.createElement('h3')
header.id = 'menu_point_measurements'
- header.innerHTML = 'Measurements'
+ const headerSpan = document.createElement('span')
+ headerSpan.textContent = 'Measurements'
+ header.appendChild(headerSpan)
const panel = document.createElement('div')
- panel.className = 'pv-menu-list'
- panel.innerHTML =
- ''
+ panel.className = 'pv-menu-list measurements-panel'
+ const toolsHostDiv = document.createElement('div')
+ toolsHostDiv.id = 'measurement_tools_host'
+ toolsHostDiv.className = 'measurement-tools-host'
+ const listContainerDiv = document.createElement('div')
+ listContainerDiv.id = 'measurements_list'
+ listContainerDiv.className = 'auto'
+ panel.appendChild(toolsHostDiv)
+ panel.appendChild(listContainerDiv)
// Insert before filters/tools if possible, else append at end
const tools = document.getElementById('menu_tools')
if (tools) {
@@ -39,7 +47,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
if ($(menu).accordion && $(menu).data('uiAccordion')) return
if (window.jQuery) {
const $p = window.jQuery(panel)
- ;($p.is(':visible') ? $p.slideUp(350) : $p.slideDown(350))
+ $p.is(':visible') ? $p.slideUp(350) : $p.slideDown(350)
return
}
})
@@ -55,8 +63,7 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
let listRoot = document.createElement('div')
listRoot.id = 'measurement_items'
- listRoot.style.cssText =
- 'max-height:260px; overflow:auto; margin-bottom:6px; border:1px solid #333; border-radius:4px;'
+ listRoot.className = 'measurement-items-root'
const listTitle = document.createElement('div')
listTitle.className = 'm-list-title'
listTitle.textContent = 'List of measurements'
@@ -168,14 +175,20 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
)
}
if (targetContainer && targetContainer.children.length === 0) {
- targetContainer.innerHTML =
- 'Select a measurement to view its properties here
'
+ targetContainer.innerHTML = ''
+ const msg = document.createElement('div')
+ msg.className = 'measurement-info-message'
+ msg.textContent = 'Select a measurement to view its properties here'
+ targetContainer.appendChild(msg)
}
}
if (targetContainer) {
- targetContainer.innerHTML =
- 'Select a measurement to view its properties here
'
+ targetContainer.innerHTML = ''
+ const msg2 = document.createElement('div')
+ msg2.className = 'measurement-info-message'
+ msg2.textContent = 'Select a measurement to view its properties here'
+ targetContainer.appendChild(msg2)
}
// Helper to decide if a uuid is a measurement-like object
@@ -223,16 +236,38 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
const order = Array.from(groups.keys()).sort()
listRoot.innerHTML = ''
if (itemsRaw.length === 0) {
- listRoot.innerHTML = 'No measurements
'
+ const emptyEl = document.createElement('div')
+ emptyEl.className = 'm-empty'
+ emptyEl.textContent = 'No measurements'
+ listRoot.appendChild(emptyEl)
return
}
order.forEach((type) => {
const section = document.createElement('div')
section.className = 'm-group'
const gid = 'g_' + type.toLowerCase()
- section.innerHTML = `\n \n `
+ const header = document.createElement('div')
+ header.className = 'm-group-header'
+ header.dataset.group = gid
+ header.dataset.open = 'true'
+ const caret = document.createElement('span')
+ caret.className = 'm-group-caret'
+ caret.textContent = '▾'
+ const titleSpan = document.createElement('span')
+ titleSpan.className = 'm-group-title'
+ titleSpan.textContent = type
+ const countSpan = document.createElement('span')
+ countSpan.className = 'm-group-count'
+ countSpan.id = gid + '_count'
+ header.appendChild(caret)
+ header.appendChild(titleSpan)
+ header.appendChild(countSpan)
+ const body = document.createElement('div')
+ body.className = 'm-group-body'
+ body.id = gid + '_body'
+ section.appendChild(header)
+ section.appendChild(body)
listRoot.appendChild(section)
- const body = section.querySelector('.m-group-body')
groups.get(type).forEach((entry) => {
const m = entry.obj
const num = perTypeNumbers.get(type)?.get(m.uuid) || 0
@@ -240,14 +275,24 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
const row = document.createElement('div')
row.className = 'm-row'
row.dataset.uuid = m.uuid
- const icon = TYPE_ICONS[type] || TYPE_ICONS['Measurement']
- row.innerHTML =
- `${icon}${baseName}` +
- ''
+ const iconSpan = document.createElement('span')
+ iconSpan.className = 'm-row-icon'
+ iconSpan.textContent = TYPE_ICONS[type] || TYPE_ICONS['Measurement']
+ const labelSpan = document.createElement('span')
+ labelSpan.className = 'm-row-label'
+ labelSpan.title = baseName
+ labelSpan.textContent = baseName
+ const delBtn = document.createElement('button')
+ delBtn.className = 'm-row-delete'
+ delBtn.dataset.act = 'delete'
+ delBtn.title = 'Delete'
+ delBtn.textContent = '×'
+ row.appendChild(iconSpan)
+ row.appendChild(labelSpan)
+ row.appendChild(delBtn)
body.appendChild(row)
})
- section.querySelector('#' + gid + '_count').textContent =
- groups.get(type).length
+ countSpan.textContent = groups.get(type).length
})
}
@@ -351,7 +396,9 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
;[...listRoot.querySelectorAll('.m-row[data-uuid]')].forEach((el) => {
el.classList.toggle('active', el.dataset.uuid === uuid)
})
- const thisRow = listRoot.querySelector(`.m-row[data-uuid="${uuid}"] .m-row-label`)
+ const thisRow = listRoot.querySelector(
+ `.m-row[data-uuid="${uuid}"] .m-row-label`
+ )
if (thisRow) {
lastSelection.uuid = uuid
lastSelection.label = thisRow.textContent.trim()
@@ -372,7 +419,9 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
;[...listRoot.querySelectorAll('.m-row[data-uuid]')].forEach((el) => {
el.classList.toggle('active', el.dataset.uuid === uuid)
})
- const activeRow = listRoot.querySelector(`.m-row[data-uuid="${uuid}"] .m-row-label`)
+ const activeRow = listRoot.querySelector(
+ `.m-row[data-uuid="${uuid}"] .m-row-label`
+ )
if (activeRow) {
lastSelection.uuid = uuid
lastSelection.label = activeRow.textContent.trim()
@@ -403,7 +452,11 @@ window.initMeasurementsPanel = function initMeasurementsPanel(viewer) {
const measLi = measOptions.closest('li') || measOptions
let prev = measLi.previousElementSibling
for (let i = 0; i < 3 && prev; i++) {
- if (prev.classList && prev.classList.contains('divider') && /Measurement/i.test(prev.textContent || '')) {
+ if (
+ prev.classList &&
+ prev.classList.contains('divider') &&
+ /Measurement/i.test(prev.textContent || '')
+ ) {
prev.remove()
break
}