chore(InteractorStyleManipulatorRotateWorld): create example

closes #3309

Author: PaulHax

Sources/Interaction/Style/InteractorStyleManipulatorRotateWorld/example/index.js

@@ -0,0 +1,192 @@
+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 macro from '@kitware/vtk.js/macros';
+import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import vtkMouseCameraTrackballRotateManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballRotateManipulator';
+import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
+import vtkMouseCameraTrackballZoomManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomManipulator';
+import vtkGestureCameraManipulator from '@kitware/vtk.js/Interaction/Manipulators/GestureCameraManipulator';
+
+// No external HTML file needed - using inline controls
+
+// ----------------------------------------------------------------------------
+// Custom InteractorStyle that Rotates Around World Center
+// ----------------------------------------------------------------------------
+
+function vtkInteractorStyleRotateWorld(publicAPI, model) {
+  model.classHierarchy.push('vtkInteractorStyleRotateWorld');
+
+  // For pre-v34.7.0 behavior: just prevent center update during pan
+
+  // Override handleMouseMove to NOT update center during pan
+  publicAPI.handleMouseMove = (callData) => {
+    model.cachedMousePosition = callData.position;
+    if (model.currentManipulator && model.currentManipulator.onMouseMove) {
+      model.currentManipulator.onMouseMove(
+        model._interactor,
+        model.getRenderer(callData),
+        callData.position
+      );
+      // Don't update centerOfRotation here (v34.7.0+ does this)
+      publicAPI.invokeInteractionEvent({ type: 'InteractionEvent' });
+    }
+  };
+
+  // Override handlePan for gesture-based panning
+  publicAPI.handlePan = (callData) => {
+    const renderer = model.getRenderer(callData);
+
+    let count = model.gestureManipulators.length;
+    let actionCount = 0;
+    while (count--) {
+      const manipulator = model.gestureManipulators[count];
+      if (manipulator && manipulator.isPanEnabled()) {
+        manipulator.onPan(model._interactor, renderer, callData.translation);
+        actionCount++;
+      }
+    }
+
+    if (actionCount) {
+      // Don't update centerOfRotation here (v34.7.0+ does this)
+      publicAPI.invokeInteractionEvent({ type: 'InteractionEvent' });
+    }
+  };
+}
+
+// ----------------------------------------------------------------------------
+// Factory function for custom interactor style
+// ----------------------------------------------------------------------------
+
+function extendInteractorStyle(publicAPI, model, initialValues = {}) {
+  Object.assign(model, initialValues);
+
+  // Extend the base InteractorStyleManipulator
+  vtkInteractorStyleManipulator.extend(publicAPI, model, initialValues);
+
+  // Add our custom methods
+  vtkInteractorStyleRotateWorld(publicAPI, model);
+}
+
+const newInteractorStyleRotateWorld = macro.newInstance(
+  extendInteractorStyle,
+  'vtkInteractorStyleRotateWorld'
+);
+
+// ----------------------------------------------------------------------------
+// Standard rendering code setup
+// ----------------------------------------------------------------------------
+
+const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
+const renderer = fullScreenRenderer.getRenderer();
+const renderWindow = fullScreenRenderer.getRenderWindow();
+
+// ----------------------------------------------------------------------------
+// Example code
+// ----------------------------------------------------------------------------
+
+// Use our custom interactor style
+const interactorStyle = newInteractorStyleRotateWorld();
+fullScreenRenderer.getInteractor().setInteractorStyle(interactorStyle);
+
+// ----------------------------------------------------------------------------
+// Create cone (main object)
+// ----------------------------------------------------------------------------
+
+const coneSource = vtkConeSource.newInstance({ height: 1.0 });
+const coneMapper = vtkMapper.newInstance();
+coneMapper.setInputConnection(coneSource.getOutputPort());
+
+const coneActor = vtkActor.newInstance();
+coneActor.setMapper(coneMapper);
+coneActor.getProperty().setColor(0.5, 0.5, 1.0);
+
+// ----------------------------------------------------------------------------
+// Add actors and setup camera
+// ----------------------------------------------------------------------------
+
+renderer.addActor(coneActor);
+renderer.resetCamera();
+
+// Set the center of rotation (this will stay fixed due to our overrides)
+const coneCenter = [0, 0, 0];
+interactorStyle.setCenterOfRotation(coneCenter);
+
+// ----------------------------------------------------------------------------
+// Setup manipulators
+// ----------------------------------------------------------------------------
+
+// Rotate with left button
+const rotateManipulator =
+  vtkMouseCameraTrackballRotateManipulator.newInstance();
+rotateManipulator.setButton(1); // Left button
+interactorStyle.addMouseManipulator(rotateManipulator);
+
+// Zoom with middle button
+const middleZoomManipulator =
+  vtkMouseCameraTrackballZoomManipulator.newInstance();
+middleZoomManipulator.setButton(2); // Middle button
+interactorStyle.addMouseManipulator(middleZoomManipulator);
+
+// Also allow pan with shift + left button
+const shiftPanManipulator = vtkMouseCameraTrackballPanManipulator.newInstance();
+shiftPanManipulator.setButton(1);
+shiftPanManipulator.setShift(true);
+interactorStyle.addMouseManipulator(shiftPanManipulator);
+
+// Pan with right button
+const rightPanManipulator = vtkMouseCameraTrackballPanManipulator.newInstance();
+rightPanManipulator.setButton(3); // Right button
+interactorStyle.addMouseManipulator(rightPanManipulator);
+
+// Zoom with mouse wheel
+const wheelZoomManipulator =
+  vtkMouseCameraTrackballZoomManipulator.newInstance();
+wheelZoomManipulator.setScrollEnabled(true);
+wheelZoomManipulator.setDragEnabled(false);
+interactorStyle.addMouseManipulator(wheelZoomManipulator);
+
+// Add gesture manipulator for touch devices
+interactorStyle.addGestureManipulator(
+  vtkGestureCameraManipulator.newInstance()
+);
+
+renderWindow.render();
+
+const infoDiv = document.createElement('div');
+infoDiv.style.position = 'absolute';
+infoDiv.style.top = '10px';
+infoDiv.style.left = '10px';
+infoDiv.style.padding = '10px';
+infoDiv.style.background = 'rgba(255, 255, 255, 0.9)';
+infoDiv.style.borderRadius = '5px';
+infoDiv.style.fontFamily = 'monospace';
+infoDiv.innerHTML = `
+  <h3>Rotate Around World Center Example</h3>
+  <p>This example demonstrates rotation around a fixed world point instead of the camera center.</p>
+  <p><strong>Controls:</strong></p>
+  <ul>
+    <li>Left Mouse: Rotate around cone center (world center)</li>
+    <li>Middle Mouse: Zoom</li>
+    <li>Right Mouse or Shift+Left: Pan (rotation center stays fixed)</li>
+    <li>Mouse Wheel: Zoom</li>
+  </ul>
+  <p>Notice: After panning, rotation still occurs around the same world point (cone center).</p>
+`;
+document.body.appendChild(infoDiv);
+
+// -----------------------------------------------------------
+// Make some variables global for debugging
+// -----------------------------------------------------------
+
+global.coneSource = coneSource;
+global.coneActor = coneActor;
+global.renderer = renderer;
+global.renderWindow = renderWindow;
+global.interactorStyle = interactorStyle;