fix(#40): fix elevation control for multiple clouds

src/AcceptedFiltering/threePanels.js

@@ -181,10 +181,10 @@ function ensureElevationButton(hooks) {
 }
 
 /**
- * Reconnects the Elevation slider label to reflect the current range.
- * Assumes #sldHeightRange and #lblHeightRange exist.
+ * Sets up a elevation range slider for interactive updates
+ * @param hooks - Callback object with onElevationRangeChange method
  */
-function rebindElevationLabel() {
+function setUpElevationSlider(hooks) {
   const $ = window.jQuery || window.$
   const slider = $ ? $('#sldHeightRange') : null
   const label = byId('lblHeightRange')
@@ -194,26 +194,27 @@ function rebindElevationLabel() {
     const low = slider.slider('values', 0)
     const high = slider.slider('values', 1)
     label.textContent = `${low.toFixed(2)} to ${high.toFixed(2)}`
+    hooks?.onElevationRangeChange([low, high])
   }
 
   slider.slider({ min: -10000, max: 0, values: [-10000, 0] })
   slider.off('slide.custom slidestop.custom change.custom')
-  slider.on('slide.custom', 'slidestop.custom change.custom', update)
+  slider.on('slide.custom slidestop.custom change.custom', update)
   update()
 }
 
 /**
  * Moves Potree's Elevation container under the Elevation panel body and rebinds label.
  * @returns {boolean} true if moved or already in place
  */
-function moveElevationContainer() {
+function moveElevationContainer(hooks) {
   const { body } = ensurePanelScaffold('elevation2_list')
   const src = byId('materials.elevation_container')
   if (!body || !src) return false
 
   if (src.parentNode !== body) {
     body.appendChild(src)
-    rebindElevationLabel()
+    setUpElevationSlider(hooks)
     accordionRefresh()
   }
   return true
@@ -229,7 +230,7 @@ function initElevationControls(hooks) {
 
   const root = byId('potree_menu') || document.body
   const obs = new MutationObserver(() => {
-    if (byId('materials.elevation_container')) moveElevationContainer()
+    if (byId('materials.elevation_container')) moveElevationContainer(hooks)
   })
   obs.observe(root, { childList: true, subtree: true })
 }
@@ -362,7 +363,7 @@ async function ensurePanelCaptured(mode, hooks) {
       selectCloudNode(hooks)
       src = await waitForOrPoll('materials.elevation_container', 1800)
     }
-    if (src) moveElevationContainer()
+    if (src) moveElevationContainer(hooks)
     return
   }
 }
@@ -401,7 +402,7 @@ function attachSelfHealing(activeGetter) {
     if (mode === 'elevation') {
       const src = byId('materials.elevation_container')
       const { body } = ensurePanelScaffold('elevation2_list')
-      if (src && body && src.parentNode !== body) moveElevationContainer()
+      if (src && body && src.parentNode !== body) moveElevationContainer(hooks)
     }
   })
   obs.observe(root, { childList: true, subtree: true })
@@ -433,7 +434,7 @@ export function initThreePanels(viewer, hooks = {}) {
     setActive('accepted')
   )
 
-  attachSelfHealing(getActive)
+  attachSelfHealing(getActive, hooks)
 
   // Default: auto-activate Elevation once
   clickOnce('btnDoElevationControl')

src/potreeViewer.js

@@ -43,6 +43,21 @@ export async function createPotreeViewer(
     $('#menu_filters').next().show()
     viewer.toggleSidebar()
 
+    // Helper function to update all point clouds' elevation range
+    function updateAllCloudsElevation(range) {
+      pointclouds.forEach(pc => {
+        pc.material.activeAttributeName = 'elevation'
+        pc.material.elevationRange = range
+      })
+    }
+
+    // Helper function to update all point clouds' gradient
+    function updateAllCloudsGradient(gradientName) {
+      pointclouds.forEach(pc => {
+        pc.material.gradient = Potree.Gradients[gradientName]
+      })
+    }
+
     // Helper function to update all point clouds for Accepted filtering
     function updateAllCloudsAccepted(gradientName) {
       pointclouds.forEach(pc => {
@@ -53,25 +68,34 @@ export async function createPotreeViewer(
 
     initThreePanels(viewer, {
       onActivateElevation: () => {
-        if (!pc) return
-        pc.material.activeAttributeName = 'elevation'
-        pc.material.gradient = Potree.Gradients['VIRIDIS']
+        const $ = window.jQuery || window.$
+        const slider = $ ? $('#sldHeightRange') : null
+        const values = slider?.slider('values') ?? []
+        const low = typeof values[0] === 'number' ? values[0] : -10000
+        const high = typeof values[1] === 'number' ? values[1] : 0
+
+        updateAllCloudsElevation([low, high])
+        updateAllCloudsGradient('VIRIDIS')
         suppressSidebarAutoScroll(clickCloudIconOnce)
       },
       onActivateAccepted: () => {
         updateAllCloudsAccepted('GRAYSCALE')
         toggleAcceptedLegend(true)
         suppressSidebarAutoScroll(clickCloudIconOnce)
-      }
+      },
+      onElevationRangeChange: updateAllCloudsElevation
     })
-    // // // helper
+
+    // helper
     function clickCloudIconOnce() {
       const icon = document.querySelector(
         '#scene_objects i.jstree-themeicon-custom'
       )
       if (icon) icon.dispatchEvent(new MouseEvent('click', { bubbles: true }))
     }
 
+    overrideGradientSchemeClick(pointclouds);
+
     initMeasurementsPanel(viewer)
     initAnnotationsPanel(viewer)
   })
@@ -276,3 +300,28 @@ function suppressSidebarAutoScroll(action, holdMs = 350) {
     requestAnimationFrame(restoreLoop)
   }
 }
+
+
+/**
+ * Overrides the click event handlers for gradient scheme selection to apply
+ * gradients to multiple point clouds.
+ *
+ * @param pointclouds - Array of point cloud objects
+ */
+function overrideGradientSchemeClick(pointclouds) {
+  const gradientContainer = document.getElementById('elevation_gradient_scheme_selection');
+  const spans = gradientContainer.querySelectorAll('span');
+  if (spans.length) {
+    spans.forEach((span, idx) => {
+      span.onclick = () => {
+        const gradientNames = Object.keys(Potree.Gradients);
+        const gradientName = gradientNames[idx];
+        if (gradientName) {
+          pointclouds.forEach(pc => {
+            pc.material.gradient = Potree.Gradients[gradientName];
+          });
+        }
+      };
+    });
+  }
+}