feat(@ohif/extension-vtk): Update app to include basic MPR with VTK (#557)

src/connectedComponents/ConnectedLayoutButton.js

@@ -22,6 +22,7 @@ const mapDispatchToProps = dispatch => {
         viewports.push({
           height: `${100 / rows}%`,
           width: `${100 / columns}%`,
+          plugin: 'cornerstone', // Temporary because right now switching back from VTK breaks things
         });
       }
       const layout = {

src/connectedComponents/ConnectedPluginSwitch.js

@@ -5,10 +5,11 @@ import OHIF from 'ohif-core';
 const { setLayout } = OHIF.redux.actions;
 
 const mapStateToProps = state => {
-  const { activeViewportIndex, layout } = state.viewports;
+  const { activeViewportIndex, layout, viewportSpecificData } = state.viewports;
 
   return {
     activeViewportIndex,
+    viewportSpecificData,
     layout,
   };
 };
@@ -21,23 +22,23 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-function setSingleLayoutData(originalArray, viewportIndex, data) {
+/*function setSingleLayoutData(originalArray, viewportIndex, data) {
   const viewports = originalArray.slice();
   const layoutData = Object.assign({}, viewports[viewportIndex], data);
 
   viewports[viewportIndex] = layoutData;
 
   return viewports;
-}
+}*/
 
 const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
-  const { activeViewportIndex, layout } = propsFromState;
-  const { setLayout } = propsFromDispatch;
+  //const { activeViewportIndex, layout } = propsFromState;
+  //const { setLayout } = propsFromDispatch;
 
   // TODO: Do not display certain options if the current display set
   // cannot be displayed using these view types
   const buttons = [
-    {
+    /*{
       text: 'Acquired',
       type: 'command',
       icon: 'bars',
@@ -59,22 +60,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       icon: 'cube',
       active: false,
       onClick: () => {
-        console.warn('Axial');
-        const data = {
-          plugin: 'vtk',
-          vtk: {
-            mode: 'mpr',
-            sliceNormal: [0, 0, 1],
-          },
-        };
-
-        const layoutData = setSingleLayoutData(
-          layout.viewports,
-          activeViewportIndex,
-          data
-        );
-
-        setLayout({ viewports: layoutData });
+        window.commandsManager.runCommand('axial', {}, 'vtk');
       },
     },
     {
@@ -82,22 +68,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       icon: 'cube',
       active: false,
       onClick: () => {
-        console.warn('Sagittal');
-        const data = {
-          plugin: 'vtk',
-          vtk: {
-            mode: 'mpr',
-            sliceNormal: [1, 0, 0],
-          },
-        };
-
-        const layoutData = setSingleLayoutData(
-          layout.viewports,
-          activeViewportIndex,
-          data
-        );
-
-        setLayout({ viewports: layoutData });
+        window.commandsManager.runCommand('sagittal', {}, 'vtk');
       },
     },
     {
@@ -105,41 +76,17 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       icon: 'cube',
       active: false,
       onClick: () => {
-        console.warn('Coronal');
-        const data = {
-          plugin: 'vtk',
-          vtk: {
-            mode: 'mpr',
-            sliceNormal: [0, 1, 0],
-          },
-        };
-
-        const layoutData = setSingleLayoutData(
-          layout.viewports,
-          activeViewportIndex,
-          data
-        );
-
-        setLayout({ viewports: layoutData });
+        window.commandsManager.runCommand('coronal', {}, 'vtk');
+      },
+    },*/
+    {
+      text: '2D MPR',
+      icon: 'cube',
+      active: false,
+      onClick: () => {
+        window.commandsManager.runCommand('mpr2d', {}, 'vtk');
       },
     },
-    /*{
-      text: '3D',
-      icon: `#cube`,
-      onClick: (click) => {
-        console.warn('3D Perspective');
-        const data = {
-          plugin: 'vtk',
-          vtk: {
-            mode: '3d',
-          }
-        };
-
-        const layoutData = setSingleLayoutData(layout.viewports, activeViewportIndex, data);
-
-        setLayout({ viewports: layoutData });
-      }
-    }*/
   ];
 
   return {

src/connectedComponents/ViewerMain.js

@@ -10,8 +10,9 @@ import React from 'react';
 class ViewerMain extends Component {
   static propTypes = {
     activeViewportIndex: PropTypes.number.isRequired,
-    layout: PropTypes.object,
-    viewportSpecificData: PropTypes.object,
+    studies: PropTypes.array.isRequired,
+    viewportSpecificData: PropTypes.object.isRequired,
+    layout: PropTypes.object.isRequired,
     setViewportSpecificData: PropTypes.func.isRequired,
     clearViewportSpecificData: PropTypes.func.isRequired,
   };