feat(TransformControlsWidget): add select in example

Author: Jo-Byr

Sources/Widgets/Widgets3D/TransformControlsWidget/example/controller.html

@@ -0,0 +1,11 @@
+<table>
+  <tr>
+    <td>
+      <select class="mode" style="width: 100%">
+        <option data-mode="translate" value="0" selected>Translation</option>
+        <option data-mode="rotate" value="1">Rotation</option>
+        <option data-mode="scale" value="2">Scale</option>
+      </select>
+    </td>
+  </tr>
+</table>

Sources/Widgets/Widgets3D/TransformControlsWidget/example/index.js

@@ -10,6 +10,9 @@ import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 
 import vtkTransformControlsWidget from '@kitware/vtk.js/Widgets/Widgets3D/TransformControlsWidget';
+
+import controlPanel from './controller.html';
+
 const { TransformMode } = vtkTransformControlsWidget;
 
 // ----------------------------------------------------------------------------
@@ -82,19 +85,30 @@ global.r = renderer;
 global.rw = renderWindow;
 global.vw = viewWidget;
 
+function setTransformMode(mode) {
+  widget.setMode(mode);
+  renderWindow.render();
+}
+
+fullScreenRenderer.addController(controlPanel);
+
+const transformModeSelector = document.querySelector('.mode');
+transformModeSelector.addEventListener('change', (e) => {
+  const idx = Number(e.target.value);
+  const mode = e.target[idx].dataset.mode; // Retrieve mode from HTML
+  setTransformMode(mode);
+});
+
+const keyMap = {
+  t: TransformMode.TRANSLATE,
+  q: TransformMode.ROTATE,
+  x: TransformMode.SCALE,
+};
+
 window.onkeydown = (ev) => {
-  switch (ev.key) {
-    case 'q':
-      widget.setMode(TransformMode.ROTATE);
-      renderWindow.render();
-      break;
-    case 't':
-      widget.setMode(TransformMode.TRANSLATE);
-      renderWindow.render();
-      break;
-    case 'x':
-      widget.setMode(TransformMode.SCALE);
-      renderWindow.render();
-      break;
+  const mode = keyMap[ev.key];
+  if (mode !== undefined) {
+    transformModeSelector.value = Object.values(keyMap).indexOf(mode);
+    setTransformMode(keyMap[ev.key]);
   }
 };