refactor(code): add slider in VolumePicker example

Author: rodrigobasilio2022

Examples/Volume/VolumePicker/controlPanel.html

@@ -25,4 +25,8 @@
           </td>
         </tr>
     </tr>
+    <tr>
+      <label id="opacityLabel">Opacity (0.0001)</label>
+      <input id='opacity' type="range" min="0.001" max="0.8" step="0.005" value="0.001" />
+    </tr>
 </table>

Examples/Volume/VolumePicker/index.js

@@ -219,6 +219,18 @@ renderWindow.getInteractor().onRightButtonPress((callData) => {
   renderWindow.render();
 });
 
+function setOpacityFromSlider(opacityValue) {
+  picker.setOpacityThreshold(opacityValue);
+}
+
+const opacity = document.getElementById('opacity');
+const opacityLabel = document.getElementById('opacityLabel');
+
+opacity.addEventListener('input', () => {
+  setOpacityFromSlider(Number.parseFloat(opacity.value, 10));
+  opacityLabel.innerHTML = `Opacity ( ${opacity.value} )`;
+});
+
 // -----------------------------------------------------------
 // Make some variables global so that you can inspect and
 // modify objects in your browser's developer console:

Sources/Rendering/Core/CellPicker/index.d.ts

@@ -46,7 +46,12 @@ export interface vtkCellPicker extends vtkPicker {
 	/**
 	 * Get the opacity threshold for volume picking
 	 */
-	getOpacityThreshold(): number[];
+	getOpacityThreshold(): number;
+
+	/**
+	 * Get the opacity threshold for volume picking
+	 */
+	setOpacityThreshold(value: number);
 
 	/**
 	 * Get the parametric coordinates of the picked cell.

Sources/Rendering/Core/CellPicker/index.js

@@ -571,8 +571,10 @@ export function extend(publicAPI, model, initialValues = {}) {
     'mapperNormal',
     'pCoords',
     'cellIJK',
-    'opacityThreshold',
   ]);
+
+  macro.setGet(publicAPI, model, ['opacityThreshold']);
+
   macro.get(publicAPI, model, ['cellId']);
 
   // Object methods