fix: Add a new rotation interactor because the default trackball rota…

…tion is not appropriate for MPR (#24)

* add MPR Rotate support as an interactor  - based on Madison Dickson vue example -https://github.com/mix3d/vue-vtkjs-viewport

* fix  segmetnation pipline

* add gl-matrix dependency

* clear unneeded comments

* WIP - update example to use a range control for manual rotation with a DICOM CT stack

* WIP - update DCM4CHEE server URL

* setSliceNormal with an array (that can be spread by methods signature)

* from vtk-viewport

* feat(rotate on scroll): support rotation on mouse wheel

* WIP: fix rotation direction and add orientation cube widget

* Fix the mouse wheel rotation and rotation direction to match the rotation cubes

* Fix: initial display of the view and orientation cube. Clean all unneeded code in the rotation interactor

* Fix invalid slider rotation values and render rotation only when needed

* use existing camera view parameters -if exist- when setting slice normal

* Implement a sensetivity factor for the rotation to slow it down

* Refactored the rotation code into a viewportData object and created a manipulator for handling the mouse wheel rotation

* Fix initial display of slices and setting the corsshair scroll manipulator

* support setSliceNormal to be called externally and reverting mouse wheel to scroll

examples/App.js

@@ -6,6 +6,7 @@ import VTKFusionExample from './VTKFusionExample.js';
 import VTKMPRPaintingExample from './VTKMPRPaintingExample.js';
 import VTKCornerstonePaintingSyncExample from './VTKCornerstonePaintingSyncExample.js';
 import VTKCrosshairsExample from './VTKCrosshairsExample.js';
+import VTKMPRRotateExample from './VTKMPRRotateExample.js';
 
 function LinkOut({ href, text }) {
   return (
@@ -63,6 +64,11 @@ function Index() {
       text:
         'Demonstrates how to set up the Crosshairs interactor style and SVG Widget',
     },
+    {
+      title: 'MPR Rotate Example',
+      url: '/rotate',
+      text: 'Demonstrates how to set up the MPR Rotate interactor style',
+    },
   ];
 
   const exampleComponents = examples.map(e => {
@@ -122,6 +128,7 @@ function AppRouter() {
   const synced = () =>
     Example({ children: <VTKCornerstonePaintingSyncExample /> });
   const crosshairs = () => Example({ children: <VTKCrosshairsExample /> });
+  const rotateMPR = () => Example({ children: <VTKMPRRotateExample /> });
 
   return (
     <Router>
@@ -132,6 +139,7 @@ function AppRouter() {
         <Route exact path="/painting" render={painting} />
         <Route exact path="/cornerstone-sync-painting" render={synced} />
         <Route exact path="/crosshairs" render={crosshairs} />
+        <Route exact path="/rotate" render={rotateMPR} />
         <Route exact component={Index} />
       </Switch>
     </Router>

examples/VTKCrosshairsExample.js

@@ -73,11 +73,16 @@ class VTKCrosshairsExample extends Component {
 
     reader.setUrl('/vmhead2-large.vti', { loadData: true }).then(() => {
       const data = reader.getOutputData();
-      const range = data.getPointData().getScalars().getRange();
+      const range = data
+        .getPointData()
+        .getScalars()
+        .getRange();
 
-      const rgbTransferFunction = volumeActor.getProperty().getRGBTransferFunction(0);
+      const rgbTransferFunction = volumeActor
+        .getProperty()
+        .getRGBTransferFunction(0);
 
-      rgbTransferFunction.setRange(range[0], range[1])
+      rgbTransferFunction.setRange(range[0], range[1]);
 
       volumeMapper.setInputData(data);
 
@@ -129,19 +134,16 @@ class VTKCrosshairsExample extends Component {
         default:
         case 0:
           //Axial
-          istyle.setSliceNormal(0, 0, 1);
-          camera.setViewUp(0, -1, 0);
+          istyle.setSliceNormal([0, 0, 1], [0, -1, 0]);
 
           break;
         case 1:
           // sagittal
-          istyle.setSliceNormal(1, 0, 0);
-          camera.setViewUp(0, 0, 1);
+          istyle.setSliceNormal([1, 0, 0], [0, 0, 1]);
           break;
         case 2:
           // Coronal
-          istyle.setSliceNormal(0, 1, 0);
-          camera.setViewUp(0, 0, 1);
+          istyle.setSliceNormal([0, 1, 0], [0, 0, 1]);
           break;
       }