fix(viewport): Fix active viewport by connecting to redux

Packages/ohif-cornerstone/main.js

@@ -1,9 +1,9 @@
 import Hammer from 'hammerjs';
-import * as cornerstone from 'cornerstone-core/dist/cornerstone.js';
+import cornerstone from 'cornerstone-core/dist/cornerstone.js';
-import * as cornerstoneMath from 'cornerstone-math/dist/cornerstoneMath.js';
+import cornerstoneMath from 'cornerstone-math/dist/cornerstoneMath.js';
-import * as cornerstoneTools from 'cornerstone-tools/dist/cornerstoneTools.js';
+import cornerstoneTools from 'cornerstone-tools/dist/cornerstoneTools.js';
-import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoader.js';
+import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoader.js';
-import * as dicomParser from 'dicom-parser'; // Importing from dist breaks instance reference of dicomParser.DataSet class
+import dicomParser from 'dicom-parser'; // Importing from dist breaks instance reference of dicomParser.DataSet class
 import * as dcmjs from 'dcmjs/build/dcmjs';
 
 cornerstoneTools.external.Hammer = Hammer;

Packages/ohif-viewerbase/client/components/viewer/ConnectedCornerstoneViewport.js

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import CornerstoneViewport from 'react-cornerstone-viewport';
+import { setViewportActive } from '../../lib/redux/actions.js';
+
+const mapStateToProps = state => {
+    return {
+        activeViewportIndex: state.viewports.activeViewportIndex,
+        activeTool: state.tools.buttons.find(tool => tool.active === true).command
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        setViewportActive: viewportIndex => {
+            console.log(`setViewportActive: ${viewportIndex}`);
+            dispatch(setViewportActive(viewportIndex))
+        }
+    };
+};
+
+const ConnectedCornerstoneViewport = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(CornerstoneViewport);
+
+export default ConnectedCornerstoneViewport;

Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js

@@ -2,10 +2,10 @@ import { Component } from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { OHIF } from 'meteor/ohif:core';
-import CornerstoneViewport from 'react-cornerstone-viewport';
+import { cornerstone, cornerstoneTools } from 'meteor/ohif:cornerstone';
+import ConnectedCornerstoneViewport from '../ConnectedCornerstoneViewport.js';
 import './GridLayout.styl';
 import StackManager from '../../../lib/StackManager.js';
-import { cornerstone, cornerstoneTools } from 'meteor/ohif:cornerstone';
 
 const TOP_CLASS = 'top';
 const BOTTOM_CLASS = 'bottom';
@@ -62,7 +62,7 @@ class GridLayout extends Component {
     }
 
     getActiveClass(index) {
-        if (this.props.activeViewport === index) {
+        if (this.props.activeViewportIndex === index) {
             return 'active';
         };
 
@@ -117,7 +117,7 @@ class GridLayout extends Component {
                     ...data
                 };
 
-                return (<CornerstoneViewport
+                return (<ConnectedCornerstoneViewport
                     viewportData={viewportData}
                     cornerstone={cornerstone}
                     cornerstoneTools={cornerstoneTools}

Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.js

@@ -12,6 +12,7 @@ import './ViewerMain.styl';
 import { Component } from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Provider } from 'react-redux';
 
 Meteor.startup(() => {
     window.ResizeViewportManager = window.ResizeViewportManager || new ResizeViewportManager();
@@ -21,6 +22,8 @@ Meteor.startup(() => {
     Session.set('OHIFViewerMainRendered', false);
 });
 
+import { connect } from 'react-redux';
+
 class ViewerMain extends Component {
     constructor(props) {
         super(props);
@@ -60,7 +63,19 @@ class ViewerMain extends Component {
     }
 
     setContents(Component, props) {
-        const contents = (<Component {...props}/>);
+        // TODO[react] Not sure I like this piece much
+        const mapStateToProps = state => {
+            return {
+                activeViewportIndex: state.viewports.activeViewportIndex,
+            };
+        };
+
+        const ConnectedComponent = connect(
+            mapStateToProps,
+            null
+        )(Component);
+
+        const contents = (<ConnectedComponent {...props}/>);
 
         this.setState({
             contents
@@ -69,9 +84,11 @@ class ViewerMain extends Component {
 
     render() {
         return (
+            <Provider store={window.store}>
                 <div className="viewerMain">
                     {this.state.contents}
                 </div>
+            </Provider>
         );
     }
 

Packages/ohif-viewerbase/client/lib/redux/reducers/tools.js

@@ -18,7 +18,7 @@ const defaultButtons = [
         type: 'tool',
         text: 'Bidirectional',
         svgUrl: '/icons.svg#icon-tools-measure-target',
-        active: true
+        active: false
     },
     {
         command: 'StackScroll',
@@ -39,7 +39,7 @@ const defaultButtons = [
         type: 'tool',
         text: 'Manual',
         svgUrl: '/icons.svg#icon-tools-levels',
-        active: false
+        active: true
     },
     {
         command: 'setWLPresetSoftTissue',

Packages/ohif-viewerbase/client/lib/redux/reducers/viewports.js

@@ -1,12 +1,12 @@
 const defaultState = {
-    activeViewport: 0
+    activeViewportIndex: 0
 }
 
 const viewports = (state = defaultState, action) => {
     console.warn(action);
     switch (action.type) {
         case 'SET_VIEWPORT_ACTIVE':
-            return Object.assign({}, state, { activeViewport: action.viewportIndex });
+            return Object.assign({}, state, { activeViewportIndex: action.viewportIndex });
         default:
             return state;
     }

Packages/ohif-viewerbase/package.js

@@ -12,6 +12,7 @@ Npm.depends({
     'cornerstone-math': '0.1.7',
     'dicom-parser': '1.8.3',
     'cornerstone-wado-image-loader': '2.2.3',
+    'react-redux': '6.0.0'
 });
 
 Package.onUse(function(api) {

StandaloneViewer/StandaloneViewer/client/config.js

@@ -10,7 +10,6 @@ OHIF.info = {
     version
 };
 
-Meteor.startup(function() {
 const maxWebWorkers = Math.max(navigator.hardwareConcurrency - 1, 1);
 const config = {
     maxWebWorkers: maxWebWorkers,
@@ -28,4 +27,4 @@ Meteor.startup(function() {
 
 cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
 cornerstoneWebImageLoader.external.cornerstone = cornerstone;
-});
+