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.
tabIndex=0 is now added on RW containers.

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.

Documentation/content/docs/gallery/KeyPresEvents.jpg

@@ -326,6 +326,7 @@ This will allow you to see the some live code running in your browser. Just pick
 [![InteractorStyleTrackballCamera Example][InteractorStyleTrackballCamera]](./InteractorStyleTrackballCamera.html "InteractorStyleTrackballCamera")
 [![InteractorStyleUnicam Example][InteractorStyleUnicam]](./InteractorStyleUnicam.html "InteractorStyleUnicam")
 [![KeyboardCameraManipulator Example][KeyboardCameraManipulator]](./KeyboardCameraManipulator.html "KeyboardCameraManipulator")
+[![KeyPressEvents Example][KeyPressEvents]](./KeyPressEvents.html "KeyPressEvents")
 [![MouseRangeManipulator Example][MouseRangeManipulator]](./MouseRangeManipulator.html "MouseRangeManipulator")
 [![PiecewiseGaussianWidget Example][PiecewiseGaussianWidget]](./PiecewiseGaussianWidget.html "PiecewiseGaussianWidget")
 [![TimeStepBasedAnimationHandler Example][TimeStepBasedAnimationHandler]](./TimeStepBasedAnimationHandler.html "TimeStepBasedAnimationHandler")

Documentation/content/examples/index.md

@@ -0,0 +1,51 @@
+<style>
+    #view-1:focus {
+      outline: none; /* remove default */
+      box-shadow: 0 0 20px 10px rgba(0, 255, 0, 0.6); /* red glow */
+      z-index: 1; /* move forward (works only if position!=static) */
+      position: relative;
+    }
+    #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>

Examples/Rendering/KeyPressEvents/controlPanel.html

@@ -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);

Examples/Rendering/KeyPressEvents/index.js

@@ -974,6 +974,12 @@ export interface vtkRenderWindowInteractor extends vtkObject {
   /**
    * Add an HTMLElement as the new container for the interactor.
    * All events will be bound to this new container.
+   * 
+   * container will gain the tabIndex=0 attribute to catch keyboard events.
+   * container must have focus (manually via click or tab, or programmatically
+   * via `.focus()`) to receive keypress events
+   * Outline on focus can be customized with CSS :focus pseudo-class.
+   * 
    * Any old container will be removed along with its listeners.
    */
   setContainer(container: Nullable<HTMLElement>): boolean;

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

@@ -237,15 +237,16 @@ 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(
       'pointerlockchange',
       publicAPI.handlePointerLockChange
     );
 
+    container.tabIndex = 0; // to receive key events
     // using touchAction is more performant than preventDefault
     // in a touchstart handler.
     container.style.touchAction = 'none';
@@ -307,9 +308,9 @@ function vtkRenderWindowInteractor(publicAPI, model) {
         publicAPI.handlePointerCancel
       );
     }
-    document.removeEventListener('keypress', publicAPI.handleKeyPress);
-    document.removeEventListener('keydown', publicAPI.handleKeyDown);
-    document.removeEventListener('keyup', publicAPI.handleKeyUp);
+    container.removeEventListener('keypress', publicAPI.handleKeyPress);
+    container.removeEventListener('keydown', publicAPI.handleKeyDown);
+    container.removeEventListener('keyup', publicAPI.handleKeyUp);
     document.removeEventListener(
       'pointerlockchange',
       publicAPI.handlePointerLockChange