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

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 (
-            <div className="viewerMain">
-                {this.state.contents}
-            </div>
+            <Provider store={window.store}>
+                <div className="viewerMain">
+                    {this.state.contents}
+                </div>
+            </Provider>
         );
     }