diff --git a/OHIFViewer-react/package.json b/OHIFViewer-react/package.json index 77be91377..ce503745d 100644 --- a/OHIFViewer-react/package.json +++ b/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" diff --git a/OHIFViewer-react/src/config.js b/OHIFViewer-react/src/config.js index b17cfa2d1..3331f1abb 100644 --- a/OHIFViewer-react/src/config.js +++ b/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; diff --git a/OHIFViewer-react/src/connectedComponents/OHIFCornerstoneViewportPlugin/OHIFCornerstoneViewportPlugin.js b/OHIFViewer-react/src/connectedComponents/OHIFCornerstoneViewportPlugin/OHIFCornerstoneViewportPlugin.js index 09ec3e06e..4329b4535 100644 --- a/OHIFViewer-react/src/connectedComponents/OHIFCornerstoneViewportPlugin/OHIFCornerstoneViewportPlugin.js +++ b/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, diff --git a/OHIFViewer-react/src/connectedComponents/OHIFCornerstoneViewportPlugin/config.js b/OHIFViewer-react/src/connectedComponents/OHIFCornerstoneViewportPlugin/config.js new file mode 100644 index 000000000..3e75d2270 --- /dev/null +++ b/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; diff --git a/OHIFViewer-react/src/connectedComponents/ToolbarRow.css b/OHIFViewer-react/src/connectedComponents/ToolbarRow.css index 38100742f..ba6e38d41 100644 --- a/OHIFViewer-react/src/connectedComponents/ToolbarRow.css +++ b/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 { diff --git a/OHIFViewer-react/src/connectedComponents/ToolbarRow.js b/OHIFViewer-react/src/connectedComponents/ToolbarRow.js index 4fe60a8a9..2399cafc7 100644 --- a/OHIFViewer-react/src/connectedComponents/ToolbarRow.js +++ b/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 (
- {/* TODO: Putting cine dialog here for now */} -
- + +
+
{/* > roundedButtonGroup rightSidebarToggleButtonData */} diff --git a/OHIFViewer-react/src/connectedComponents/Viewer.js b/OHIFViewer-react/src/connectedComponents/Viewer.js index e31826822..037f67f53 100644 --- a/OHIFViewer-react/src/connectedComponents/Viewer.js +++ b/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 (<>
- {/**/}
diff --git a/OHIFViewer-react/src/connectedComponents/ViewerMain.js b/OHIFViewer-react/src/connectedComponents/ViewerMain.js index 9092cc8c7..ba9629cbe 100644 --- a/OHIFViewer-react/src/connectedComponents/ViewerMain.js +++ b/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: [], diff --git a/Packages-react/react-viewerbase b/Packages-react/react-viewerbase index 6baa2cc97..3e1c7a887 160000 --- a/Packages-react/react-viewerbase +++ b/Packages-react/react-viewerbase @@ -1 +1 @@ -Subproject commit 6baa2cc97f224cc2baef62436014385b9cc6ac4d +Subproject commit 3e1c7a887fc7043c43af4d79ef0361d94c3b7e67