Merge pull request #2431 from Kitware/pointer-events

Use pointer events (and pointer capture)

Author: floryst

Examples/Rendering/ManyRenderers/index.js

@@ -2,6 +2,7 @@ import 'vtk.js/Sources/favicon';
 
 // Load the rendering pieces we want to use (for both WebGL and WebGPU)
 import 'vtk.js/Sources/Rendering/Profiles/Geometry';
+import 'vtk.js/Sources/Rendering/Misc/RenderingAPIs';
 
 import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
 import vtkConeSource from 'vtk.js/Sources/Filters/Sources/ConeSource';
@@ -14,8 +15,6 @@ import vtkRenderWindowInteractor from 'vtk.js/Sources/Rendering/Core/RenderWindo
 import vtkRenderer from 'vtk.js/Sources/Rendering/Core/Renderer';
 import vtkInteractorStyleTrackballCamera from 'vtk.js/Sources/Interaction/Style/InteractorStyleTrackballCamera';
 
-import vtkOpenGLRenderWindow from 'vtk.js/Sources/Rendering/OpenGL/RenderWindow';
-
 // ----------------------------------------------------------------------------
 // Meshes
 // ----------------------------------------------------------------------------
@@ -85,8 +84,8 @@ const colors = [
 const RENDERERS = {};
 
 const renderWindow = vtkRenderWindow.newInstance();
-const openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
-renderWindow.addView(openglRenderWindow);
+const renderWindowView = renderWindow.newAPISpecificView();
+renderWindow.addView(renderWindowView);
 
 const rootContainer = document.createElement('div');
 rootContainer.style.position = 'fixed';
@@ -96,12 +95,11 @@ rootContainer.style.top = 0;
 rootContainer.style.pointerEvents = 'none';
 document.body.appendChild(rootContainer);
 
-openglRenderWindow.setContainer(rootContainer);
+renderWindowView.setContainer(rootContainer);
 
 const interactor = vtkRenderWindowInteractor.newInstance();
-interactor.setView(openglRenderWindow);
+interactor.setView(renderWindowView);
 interactor.initialize();
-interactor.bindEvents(document.body);
 interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
 
 function updateViewPort(element, renderer) {
@@ -129,12 +127,11 @@ function recomputeViewports() {
 
 function resize() {
   rootContainer.style.width = `${window.innerWidth}px`;
-  openglRenderWindow.setSize(window.innerWidth, window.innerHeight);
+  renderWindowView.setSize(window.innerWidth, window.innerHeight);
   recomputeViewports();
-  // Object.values(RENDERERS).forEach((r) => r.resetCamera());
 }
 
-window.addEventListener('resize', resize);
+new ResizeObserver(resize).observe(document.body);
 document.addEventListener('scroll', recomputeViewports);
 
 // ----------------------------------------------------------------------------
@@ -155,15 +152,36 @@ function applyStyle(element) {
   element.style.display = 'inline-block';
   element.style.boxSizing = 'border';
   element.style.textAlign = 'center';
+  element.style.color = 'white';
   return element;
 }
 
-function enterCurrentRenderer(e) {
-  interactor.setCurrentRenderer(RENDERERS[e.target.id]);
+let captureCurrentRenderer = false;
+
+function setCaptureCurrentRenderer(yn) {
+  captureCurrentRenderer = yn;
+  if (yn && interactor.getCurrentRenderer()) {
+    // fix the current renderer to, well, the current renderer
+    interactor.setCurrentRenderer(interactor.getCurrentRenderer());
+  } else {
+    // remove the fixed current renderer
+    interactor.setCurrentRenderer(null);
+  }
 }
 
-function exitCurrentRenderer(e) {
-  interactor.setCurrentRenderer(null);
+function bindInteractor(renderer, el) {
+  // only change the interactor's container if needed
+  if (interactor.getContainer() !== el) {
+    if (interactor.getContainer()) {
+      interactor.unbindEvents();
+    }
+    if (captureCurrentRenderer) {
+      interactor.setCurrentRenderer(renderer);
+    }
+    if (el) {
+      interactor.bindEvents(el);
+    }
+  }
 }
 
 function addRenderer() {
@@ -188,8 +206,10 @@ function addRenderer() {
   const renderer = vtkRenderer.newInstance({ background });
   container.innerHTML = `${mesh.name} ${prop.name}`;
 
-  container.addEventListener('mouseenter', enterCurrentRenderer);
-  container.addEventListener('mouseleave', exitCurrentRenderer);
+  container.addEventListener('pointerenter', () =>
+    bindInteractor(renderer, container)
+  );
+  container.addEventListener('pointerleave', () => bindInteractor(null, null));
 
   renderer.addActor(actor);
   renderWindow.addRenderer(renderer);
@@ -204,14 +224,29 @@ function addRenderer() {
 // Fill up page
 // ----------------------------------------------------------------------------
 
+const checkbox = document.createElement('input');
+checkbox.type = 'checkbox';
+checkbox.name = 'singleRendererCapture';
+const label = document.createElement('label');
+label.for = checkbox.name;
+label.innerText = 'Enable single renderer capture';
+
+checkbox.addEventListener('input', (ev) => {
+  setCaptureCurrentRenderer(ev.target.checked);
+});
+
+document.body.appendChild(checkbox);
+document.body.appendChild(label);
+document.body.appendChild(document.createElement('br'));
+
 for (let i = 0; i < 64; i++) {
   addRenderer();
 }
 resize();
 
 function updateCamera(renderer) {
   const camera = renderer.getActiveCamera();
-  camera.azimuth(2);
+  camera.azimuth(0.5);
   renderer.resetCameraClippingRange();
 }
 
@@ -228,5 +263,5 @@ window.requestAnimationFrame(animate);
 // ----------------------------------------------------------------------------
 
 global.rw = renderWindow;
-global.glrw = openglRenderWindow;
+global.glrw = renderWindowView;
 global.renderers = RENDERERS;

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

@@ -173,6 +173,16 @@ export interface vtkRenderWindowInteractor extends vtkObject {
 	 * 
 	 * @param {IRenderWindowInteractorEvent} callData 
 	 */
+	invokePointerEnter(callData: IRenderWindowInteractorEvent): void;
+
+	/**
+	 *
+	 */
+	invokePointerLeave(callData: IRenderWindowInteractorEvent): void;
+
+	/**
+	 *
+	 */
 	invokeMouseEnter(callData: IRenderWindowInteractorEvent): void;
 
 	/**
@@ -392,6 +402,18 @@ export interface vtkRenderWindowInteractor extends vtkObject {
 	 * @param {InteractorEventCallback} cb The callback to be called.
 	 * @param {Number} [priority] The priority of the event.
 	 */
+	onPointerEnter(cb: InteractorEventCallback, priority?: number): Readonly<vtkSubscription>;
+
+	/**
+	 *
+	 * @param cb The callback to be called
+	 */
+	onPointerLeave(cb: InteractorEventCallback, priority?: number): Readonly<vtkSubscription>;
+
+	/**
+	 *
+	 * @param cb The callback to be called
+	 */
 	onMouseEnter(cb: InteractorEventCallback, priority?: number): Readonly<vtkSubscription>;
 
 	/**
@@ -949,11 +971,35 @@ export interface vtkRenderWindowInteractor extends vtkObject {
 	 */
 	handleKeyUp(event: KeyboardEvent): void;
 
+	/**
+	 * 
+	 * @param {PointerEvent} event 
+	 */
+	handlePointerDown(event: PointerEvent): void;
+
+	/**
+	 * 
+	 * @param {PointerEvent} event 
+	 */
+	handlePointerUp(event: PointerEvent): void;
+
+	/**
+	 * 
+	 * @param {PointerEvent} event 
+	 */
+	handlePointerCancel(event: PointerEvent): void;
+
+	/**
+	 * 
+	 * @param {PointerEvent} event 
+	 */
+	handlePointerMove(event: PointerEvent): void;
+
 	/**
 	 *
-	 * @param {MouseEvent} event 
+	 * @param {PointerEvent} event 
 	 */
-	handleMouseDown(event: MouseEvent): void;
+	handleMouseDown(event: PointerEvent): void;
 
 	/**
 	 *
@@ -1011,9 +1057,9 @@ export interface vtkRenderWindowInteractor extends vtkObject {
 
 	/**
 	 *
-	 * @param {MouseEvent} event 
+	 * @param {PointerEvent} event 
 	 */
-	handleMouseMove(event: MouseEvent): void;
+	handleMouseMove(event: PointerEvent): void;
 
 	/**
 	 *
@@ -1028,39 +1074,39 @@ export interface vtkRenderWindowInteractor extends vtkObject {
 
 	/**
 	 *
-	 * @param {MouseEvent} event 
+	 * @param {PointerEvent} event 
 	 */
-	handleMouseEnter(event: MouseEvent): void;
+	handlePointerEnter(event: PointerEvent): void;
 
 	/**
 	 *
-	 * @param {MouseEvent} event 
+	 * @param {PointerEvent} event 
 	 */
-	handleMouseLeave(event: MouseEvent): void;
+	handlePointerLeave(event: PointerEvent): void;
 
 	/**
 	 *
-	 * @param {MouseEvent} event 
+	 * @param {PointerEvent} event 
 	 */
-	handleMouseUp(event: MouseEvent): void;
+	handleMouseUp(event: PointerEvent): void;
 
 	/**
 	 *
-	 * @param {TouchEvent} event 
+	 * @param {PointerEvent} event 
 	 */
-	handleTouchStart(event: TouchEvent): void;
+	handleTouchStart(event: PointerEvent): void;
 
 	/**
 	 *
-	 * @param {TouchEvent} event 
+	 * @param {PointerEvent} event 
 	 */
-	handleTouchMove(event: TouchEvent): void;
+	handleTouchMove(event: PointerEvent): void;
 
 	/**
 	 *
-	 * @param {TouchEvent} event 
+	 * @param {PointerEvent} event 
 	 */
-	handleTouchEnd(event: TouchEvent): void;
+	handleTouchEnd(event: PointerEvent): void;
 
 	/**
 	 *
@@ -1093,7 +1139,7 @@ export interface vtkRenderWindowInteractor extends vtkObject {
 	 * @param event
 	 * @param positions
 	 */
-	recognizeGesture(event: 'TouchStart' | 'TouchMouve' | 'TouchEnd', positions: IPosition): void;
+	recognizeGesture(event: 'TouchStart' | 'TouchMove' | 'TouchEnd', positions: IPosition): void;
 
 	/**
 	 *