feat(extensions): Toolbar module depends on plugin in active viewport

Packages-react/extensions/ohif-cornerstone-extension/src/ConnectedCineDialog.js

@@ -0,0 +1,111 @@
+import { connect } from 'react-redux';
+import { CineDialog } from 'react-viewerbase';
+import OHIF from 'ohif-core';
+import cloneDeep from 'lodash.clonedeep';
+
+const { setViewportSpecificData } = OHIF.redux.actions;
+
+// TODO: I'm guessing this function will be used in other connect locations
+// so we might want to put it somewhere shared
+function getActiveViewportSpecificData(state) {
+    const { viewportSpecificData, activeViewportIndex } = state.viewports;
+    return viewportSpecificData[activeViewportIndex];
+}
+
+const mapStateToProps = state => {
+    // TODO:
+    // - Test if including CineDialog in the toolbarRow will prevent it
+    // from hovering over the rest of the UI when visible.
+    //
+    // - Create custom ToolbarButton which just shows Play state
+    // - Connect this ToolbarButton to Redux
+    const activeViewportSpecificData = getActiveViewportSpecificData(state);
+
+    let stack = {
+        imageIds: [],
+        currentImageIdIndex: 0
+    };
+    if (activeViewportSpecificData && activeViewportSpecificData.stack) {
+        stack = activeViewportSpecificData.stack
+    }
+
+    let cine = {
+        isPlaying: false,
+        cineFrameRate: 24
+    };
+    if (activeViewportSpecificData && activeViewportSpecificData.cine) {
+        cine = activeViewportSpecificData.cine
+    }
+
+
+    // TODO: activeViewportStackData won't currently change anything on
+    // CornerstoneViewport. The updates are too frequent and it's killing
+    // performance. Need to revisit how we can do this.
+    return {
+        activeViewportStackData: stack,
+        activeViewportCineData: cine,
+        activeViewportIndex: state.viewports.activeViewportIndex
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        dispatchSetViewportSpecificData: (viewportIndex, data) => {
+            dispatch(setViewportSpecificData(viewportIndex, data));
+        },
+    };
+};
+
+const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
+    const { activeViewportStackData, activeViewportCineData, activeViewportIndex } = propsFromState;
+
+    return {
+        cineFrameRate: activeViewportCineData.cineFrameRate,
+        isPlaying: activeViewportCineData.isPlaying,
+        onPlayPauseChanged: isPlaying => {
+            const cine = cloneDeep(activeViewportCineData);
+            cine.isPlaying = !cine.isPlaying;
+
+            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { cine });
+        },
+        onFrameRateChanged: frameRate => {
+            const cine = cloneDeep(activeViewportCineData);
+            cine.cineFrameRate = frameRate;
+
+            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { cine });
+        },
+        onClickNextButton: () => {
+            const stack = cloneDeep(activeViewportStackData);
+            const largestPossibleIndex = stack.imageIds.length - 1;
+            stack.currentImageIdIndex = Math.min(stack.currentImageIdIndex + 1, largestPossibleIndex)
+
+            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { stack });
+        },
+        onClickBackButton: () => {
+            const stack = cloneDeep(activeViewportStackData);
+            stack.currentImageIdIndex = Math.max(stack.currentImageIdIndex - 1, 0);
+
+            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { stack });
+        },
+        onClickSkipToStart: () => {
+            const stack = cloneDeep(activeViewportStackData);
+            stack.currentImageIdIndex = 0;
+
+            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { stack });
+        },
+        onClickSkipToEnd: () => {
+            const stack = cloneDeep(activeViewportStackData);
+            stack.currentImageIdIndex = stack.imageIds.length;
+
+            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { stack });
+        }
+    };
+};
+
+const ConnectedCineDialog = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+    mergeProps
+)(CineDialog);
+
+export default ConnectedCineDialog;

Packages-react/extensions/ohif-cornerstone-extension/src/ConnectedToolbarSection.js

@@ -0,0 +1,29 @@
+import { connect } from 'react-redux';
+import { ToolbarSection } from 'react-viewerbase';
+import OHIF from 'ohif-core'
+
+const { setToolActive } = OHIF.redux.actions;
+
+const mapStateToProps = state => {
+  const activeButton = state.tools.buttons.find(tool => tool.active === true);
+
+  return {
+    buttons: state.tools.buttons,
+    activeCommand: activeButton && activeButton.command
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setToolActive: tool => {
+      dispatch(setToolActive(tool.command))
+    }
+  };
+};
+
+const ConnectedToolbarSection = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ToolbarSection);
+
+export default ConnectedToolbarSection;

Packages-react/extensions/ohif-cornerstone-extension/src/OHIFCornerstoneExtension.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import OHIFCornerstoneViewport from './OHIFCornerstoneViewport.js';
+import ToolbarModule from './ToolbarModule.js';
 
 /**
  * Pass in 'children' to a React component. The purpose of this is to
@@ -48,6 +49,6 @@ export default class OHIFCornerstoneExtension {
   }
 
   getToolbarModule() {
-    return null;
+    return ToolbarModule;
   }
 }

Packages-react/extensions/ohif-cornerstone-extension/src/ToolbarModule.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ConnectedToolbarSection from './ConnectedToolbarSection';
+import { ToolbarButton } from 'react-viewerbase';
+import ConnectedCineDialog from './ConnectedCineDialog';
+
+class ToolbarModule extends Component {
+  state = {
+    cineDialogOpen: false
+  }
+
+  onClickCineToolbarButton = () => {
+    this.setState({
+      cineDialogOpen: !this.state.cineDialogOpen
+    });
+  };
+
+  render() {
+    const cineDialogContainerStyle = {
+      display: this.state.cineDialogOpen ? 'inline-block' : 'none'
+    };
+
+    return (<div className="ToolbarModule">
+      <ConnectedToolbarSection />
+      <ToolbarButton
+        active={this.state.cineDialogOpen}
+        onClick={this.onClickCineToolbarButton}
+        text={'CINE'}
+        iconClasses={'fab fa-youtube'}
+        />
+        <div className="CineDialogContainer" style={cineDialogContainerStyle}>
+          <ConnectedCineDialog />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ToolbarModule;