Fixes for Layout button and CINE, move some stuff into Cornerstone plugin

OHIFViewer-react/package.json

@@ -27,7 +27,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.3",
-    "react-viewerbase": "^0.2.2",
+    "react-viewerbase": "^0.2.4",
     "react-vtkjs-viewport": "^0.0.1",
     "redux": "^4.0.1",
     "redux-oidc": "^3.1.0"

OHIFViewer-react/src/config.js

@@ -2,8 +2,6 @@ import dicomParser from 'dicom-parser';
 import cornerstone from 'cornerstone-core';
 import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
 import cornerstoneMath from 'cornerstone-math';
-import cornerstoneTools from 'cornerstone-tools';
-import Hammer from 'hammerjs';
 import OHIF from 'ohif-core';
 import sha from './sha.js';
 import version from './version.js';
@@ -17,19 +15,12 @@ window.info = {
 
 // For debugging
 window.cornerstone = cornerstone;
-window.cornerstoneTools = cornerstoneTools;
 window.cornerstoneWADOImageLoader = cornerstoneWADOImageLoader;
 
-cornerstoneTools.external.cornerstone = cornerstone;
-cornerstoneTools.external.Hammer = Hammer;
-cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
-cornerstoneTools.init();
-
 cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
 cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
 
 OHIF.external.cornerstone = cornerstone;
-OHIF.external.cornerstoneTools = cornerstoneTools;
 OHIF.external.cornerstoneMath = cornerstoneMath;
 OHIF.external.cornerstoneWADOImageLoader = cornerstoneWADOImageLoader;
 
@@ -80,19 +71,3 @@ cornerstoneWADOImageLoader.configure({
         }
     }
 });
-
-// Set the tool font and font size
-// context.font = "[style] [variant] [weight] [size]/[line height] [font family]";
-const fontFamily =
-    'Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif';
-cornerstoneTools.textStyle.setFont(`16px ${fontFamily}`);
-
-// Set the tool width
-cornerstoneTools.toolStyle.setToolWidth(2);
-// Set color for inactive tools
-cornerstoneTools.toolColors.setToolColor('rgb(255, 255, 0)');
-
-// Set color for active tools
-cornerstoneTools.toolColors.setActiveColor('rgb(0, 255, 0)');
-
-cornerstoneTools.store.state.touchProximity = 40;

OHIFViewer-react/src/connectedComponents/OHIFCornerstoneViewportPlugin/OHIFCornerstoneViewportPlugin.js

@@ -3,9 +3,22 @@ import PropTypes from "prop-types";
 import OHIF from 'ohif-core';
 import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
 import OHIFComponentPlugin from '../OHIFComponentPlugin.js';
+import cornerstoneTools from "cornerstone-tools";
+import cornerstone from "cornerstone-core";
+import './config';
 
 const { StackManager } = OHIF.utils;
 
+// Create the synchronizer used to update reference lines
+OHIF.viewer.updateImageSynchronizer = new cornerstoneTools.Synchronizer('cornerstonenewimage', cornerstoneTools.updateImageSynchronizer);
+
+// Metadata configuration
+const metadataProvider = new OHIF.cornerstone.MetadataProvider();
+
+cornerstone.metaData.addProvider(metadataProvider.provider.bind(metadataProvider));
+
+StackManager.setMetadataProvider(metadataProvider);
+
 class OHIFCornerstoneViewportPlugin extends Component {
   static propTypes = {
     studies: PropTypes.object,

OHIFViewer-react/src/connectedComponents/OHIFCornerstoneViewportPlugin/config.js

@@ -0,0 +1,31 @@
+import cornerstone from 'cornerstone-core';
+import cornerstoneMath from 'cornerstone-math';
+import cornerstoneTools from 'cornerstone-tools';
+import Hammer from 'hammerjs';
+import OHIF from 'ohif-core';
+
+// For debugging
+window.cornerstoneTools = cornerstoneTools;
+
+cornerstoneTools.external.cornerstone = cornerstone;
+cornerstoneTools.external.Hammer = Hammer;
+cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
+cornerstoneTools.init();
+
+OHIF.external.cornerstoneTools = cornerstoneTools;
+
+// Set the tool font and font size
+// context.font = "[style] [variant] [weight] [size]/[line height] [font family]";
+const fontFamily =
+  'Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif';
+cornerstoneTools.textStyle.setFont(`16px ${fontFamily}`);
+
+// Set the tool width
+cornerstoneTools.toolStyle.setToolWidth(2);
+// Set color for inactive tools
+cornerstoneTools.toolColors.setToolColor('rgb(255, 255, 0)');
+
+// Set color for active tools
+cornerstoneTools.toolColors.setActiveColor('rgb(0, 255, 0)');
+
+cornerstoneTools.store.state.touchProximity = 40;

OHIFViewer-react/src/connectedComponents/ToolbarRow.css

@@ -2,12 +2,13 @@
     border-bottom: var(--ui-border-thickness) solid var(--ui-border-color);
     flex: 0 0 auto;
     height: var(--toolbar-height);
-    padding-top: 6px;
     padding-left: 1rem;
     padding-right: 1rem;
     position: relative;
     transition: height 300ms ease;
     width: 100%;
+    display: flex;
+    align-items: center;
 }
 
 ToolbarRow.expanded {

OHIFViewer-react/src/connectedComponents/ToolbarRow.js

@@ -3,13 +3,17 @@ import ConnectedToolbarSection from './ConnectedToolbarSection';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
 import ConnectedCineDialog from './ConnectedCineDialog.js';
 import PropTypes from 'prop-types';
-import { RoundedButtonGroup } from 'react-viewerbase';
+import { ToolbarButton, RoundedButtonGroup } from 'react-viewerbase';
 import './ToolbarRow.css';
 //import Icons from "../images/icons.svg"
 
 const Icons = '/icons.svg';
 
 class ToolbarRow extends Component {
+    state = {
+      cineDialogOpen: false
+    };
+
     static propTypes = {
         leftSidebarOpen: PropTypes.bool.isRequired,
         rightSidebarOpen: PropTypes.bool.isRequired,
@@ -19,13 +23,19 @@ class ToolbarRow extends Component {
 
     static defaultProps = {
         leftSidebarOpen: false,
-        rightSidebarOpen: false
+        rightSidebarOpen: false,
     };
 
     onLeftSidebarValueChanged = (value) => {
         this.props.setLeftSidebarOpen(!!value);
     }
 
+    onClickCineToolbarButton = () => {
+      this.setState({
+        cineDialogOpen: !this.state.cineDialogOpen
+      });
+    }
+
     render() {
         const leftSidebarToggle = [{
             value: 'studies',
@@ -37,15 +47,24 @@ class ToolbarRow extends Component {
 
         const leftSidebarValue = this.props.leftSidebarOpen ? leftSidebarToggle[0].value : null;
 
+        const cineDialogContainerStyle = {
+            display: this.state.cineDialogOpen ? 'inline-block' : 'none'
+        }
+
         return (<div className="ToolbarRow">
             <div className="pull-left m-t-1 p-y-1" style={{ padding: '10px' }}>
                 <RoundedButtonGroup options={leftSidebarToggle} value={leftSidebarValue} onValueChanged={this.onLeftSidebarValueChanged}/>
             </div>
             <ConnectedToolbarSection/>
             <ConnectedLayoutButton/>
-            {/* TODO: Putting cine dialog here for now */}
-            <div style={{ marginLeft: '100px', display: 'inline-block'}}>
-                <ConnectedCineDialog/>
+            <ToolbarButton
+              active={this.state.cineDialogOpen}
+              onClick={this.onClickCineToolbarButton}
+              text={'CINE'}
+              iconClasses={'fa fa-youtube'}
+              />
+            <div className='CineDialogContainer' style={cineDialogContainerStyle}>
+              <ConnectedCineDialog/>
             </div>
             <div className="pull-right m-t-1 rm-x-1">
                 {/* > roundedButtonGroup rightSidebarToggleButtonData */}

OHIFViewer-react/src/connectedComponents/Viewer.js

@@ -1,8 +1,5 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import cornerstone from 'cornerstone-core';
-import cornerstoneTools from 'cornerstone-tools';
-import OHIF from 'ohif-core';
 //import { CineDialog } from 'react-viewerbase';
 
 import Header from '../components/Header'
@@ -12,8 +9,6 @@ import ConnectedStudyLoadingMonitor from './ConnectedStudyLoadingMonitor.js';
 import StudyPrefetcher from '../components/StudyPrefetcher.js';
 import './Viewer.css';
 
-const { StackManager } = OHIF.utils;
-
 /**
  * Inits OHIF Hanging Protocol's onReady.
  * It waits for OHIF Hanging Protocol to be ready to instantiate the ProtocolEngine
@@ -40,15 +35,6 @@ const { StackManager } = OHIF.utils;
     });
 };*/
 
-
-OHIF.viewer.defaultTool = {
-    left: 'wwwc',
-    right: 'zoom',
-    middle: 'pan'
-};
-
-OHIF.viewer.refLinesEnabled = true;
-
 /*const viewportUtils = OHIF.viewerbase.viewportUtils;
 
 OHIF.viewer.functionList = {
@@ -59,15 +45,6 @@ OHIF.viewer.functionList = {
     invert: viewportUtils.invert
 };*/
 
-// Create the synchronizer used to update reference lines
-OHIF.viewer.updateImageSynchronizer = new cornerstoneTools.Synchronizer('cornerstonenewimage', cornerstoneTools.updateImageSynchronizer);
-
-// Metadata configuration
-const metadataProvider = new OHIF.cornerstone.MetadataProvider();
-cornerstone.metaData.addProvider(metadataProvider.provider.bind(metadataProvider));
-
-StackManager.setMetadataProvider(metadataProvider);
-
 class Viewer extends Component {
     static propTypes = {
         studies: PropTypes.array,
@@ -77,7 +54,6 @@ class Viewer extends Component {
         return (<>
             <Header home={false}/>
             <div className='viewerDialogs'>
-                {/*<CineDialog/>*/}
             </div>
             <div id="viewer" className='Viewer'>
                 <ConnectedToolbarRow />

OHIFViewer-react/src/connectedComponents/ViewerMain.js

@@ -1,17 +1,10 @@
 import { Component } from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
-import cornerstone from 'cornerstone-core';
-import cornerstoneTools from 'cornerstone-tools';
-import cornerstoneMath from "cornerstone-math";
 import { OHIF } from 'ohif-core';
 import ConnectedLayoutManager from './ConnectedLayoutManager.js';
 import './ViewerMain.css';
 
-// Attempt to fix weird undefined dep issue
-cornerstoneTools.external.cornerstone = cornerstone;
-cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
-
 class ViewerMain extends Component {
   state = {
     viewportData: [],

Packages-react/react-viewerbase

@@ -1 +1 @@
-Subproject commit 6baa2cc97f224cc2baef62436014385b9cc6ac4d
+Subproject commit 3e1c7a887fc7043c43af4d79ef0361d94c3b7e67