fix(renderwindowinteractor): observe KeyPress events on RW container instead of document

Observing on document produces many false positives. For example, a key press event was for an
<input> element but RWI was also processing it.

BREAKING CHANGE: This may break key press event current behavior. Use tabIndex=0 on RW containers to
fix it.

fix #1856

Author: finetjul

BREAKING_CHANGES.md

@@ -1,3 +1,8 @@
+## From 32.x to 33
+
+- **vtkRenderWindowInteractor**: KeyPress, KeyDown and KeyUp events are now observed on the container and no longer on the document. You may have to add "tabIndex" on your containers to give focus on your render windows and catch
+key events. Check the RenderWindowInteractor example.
+
 ## From 31.x to 32
 
 - **vtkMapper**: remove `mapScalarsToTexture` from the public API. The function becomes protected and its API changes. This shouldn't cause any issue in most cases.

Sources/Rendering/Core/RenderWindowInteractor/example/controlPanel.html

@@ -0,0 +1,49 @@
+<style>
+    #view-1:focus {
+      outline: none; /* remove default */
+      box-shadow: 0 0 20px 10px rgba(0, 255, 0, 0.6); /* red glow */
+    }
+    #view-2:focus, #view-2:focus-visible {
+      outline: none; /* remove default */
+    }
+
+    input:focus {
+      outline: none;
+      border: 2px solid teal;
+      box-shadow: 0 0 4px teal;
+    }
+
+    /* Optional: Use focus-visible for keyboard-only styling */
+    select:focus-visible {
+      outline: 3px dashed orange;
+    }
+  </style>
+<h3>Click or press tab until you "focus" a render window, then type keys (e.g. r, w, s)</h3>
+<table>
+  <tr>
+    <td>Click with mouse then press space key:</td>
+    <td>
+      <input type="checkbox" id="checkboxTranslation" checked>
+    </td>
+  </tr>
+  <tr>
+    <td>Click then key up and down :</td>
+    <td><input id='slider' type="range" min="0" max="255" step="1" value="255" style="width: 100px;"/></td>
+  </tr>
+  <tr>
+    <td>Use key up and down to browse through:</td>
+    <td>
+      <select id="select">
+        <option>One</option>
+        <option>Two</option>
+        <option selected="selected">Three</option>
+        <option>Four</option>
+      </select>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <button id="buttonReset">Click and press space key</button>
+    </td>
+  </tr>
+</table>

Sources/Rendering/Core/RenderWindowInteractor/example/index.js

@@ -0,0 +1,65 @@
+import '@kitware/vtk.js/favicon';
+
+// Load the rendering pieces we want to use (for both WebGL and WebGPU)
+import '@kitware/vtk.js/Rendering/Profiles/Geometry';
+
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
+import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+
+import controlPanel from './controlPanel.html';
+
+// ----------------------------------------------------------------------------
+// Standard rendering code setup
+// ----------------------------------------------------------------------------
+
+const container = document.querySelector('body');
+const controlContainer = document.createElement('div');
+controlContainer.innerHTML = controlPanel;
+container.appendChild(controlContainer);
+
+global.RWIs = [];
+
+const logs = document.createElement('pre');
+
+const cone = vtkConeSource.newInstance();
+
+for (let i = 0; i < 3; ++i) {
+  const elementParent = document.createElement('div');
+  elementParent.style.width = '33%';
+  elementParent.style.height = '300px';
+  elementParent.style.display = 'inline-block';
+
+  const element = document.createElement('div');
+  element.setAttribute('id', `view-${i}`);
+  element.style.width = '100%';
+  element.style.height = '100%';
+  element.tabIndex = 0;
+  elementParent.appendChild(element);
+
+  container.appendChild(elementParent);
+
+  const grw = vtkGenericRenderWindow.newInstance();
+
+  const color = [0, 0, 0];
+  color[i % 3] = 1;
+  grw.getRenderer().setBackground(color);
+
+  const mapper = vtkMapper.newInstance();
+  mapper.setInputConnection(cone.getOutputPort());
+  const actor = vtkActor.newInstance();
+  actor.setMapper(mapper);
+  grw.getRenderer().addActor(actor);
+  grw.getRenderer().resetCamera();
+
+  grw.setContainer(element);
+  grw.resize();
+
+  global.RWIs.push(grw.getInteractor());
+  // Pick on mouse right click
+  grw.getInteractor().onKeyDown((callData) => {
+    logs.textContent += `Pressed ${callData.key} on RWI #${i}\n`;
+  });
+}
+container.appendChild(logs);

Sources/Rendering/Core/RenderWindowInteractor/index.js

@@ -237,11 +237,11 @@ function vtkRenderWindowInteractor(publicAPI, model) {
     });
     container.addEventListener('pointerup', publicAPI.handlePointerUp);
     container.addEventListener('pointercancel', publicAPI.handlePointerCancel);
-    document.addEventListener('keypress', publicAPI.handleKeyPress);
-    document.addEventListener('keydown', publicAPI.handleKeyDown);
-    document.addEventListener('keyup', publicAPI.handleKeyUp);
+    container.addEventListener('keypress', publicAPI.handleKeyPress);
+    container.addEventListener('keydown', publicAPI.handleKeyDown);
+    container.addEventListener('keyup', publicAPI.handleKeyUp);
 
-    document.addEventListener(
+    container.addEventListener(
       'pointerlockchange',
       publicAPI.handlePointerLockChange
     );
@@ -307,10 +307,10 @@ function vtkRenderWindowInteractor(publicAPI, model) {
         publicAPI.handlePointerCancel
       );
     }
-    document.removeEventListener('keypress', publicAPI.handleKeyPress);
-    document.removeEventListener('keydown', publicAPI.handleKeyDown);
-    document.removeEventListener('keyup', publicAPI.handleKeyUp);
-    document.removeEventListener(
+    container.removeEventListener('keypress', publicAPI.handleKeyPress);
+    container.removeEventListener('keydown', publicAPI.handleKeyDown);
+    container.removeEventListener('keyup', publicAPI.handleKeyUp);
+    container.removeEventListener(
       'pointerlockchange',
       publicAPI.handlePointerLockChange
     );