diff --git a/extensions/ohif-cornerstone-extension/src/ConnectedCineDialog.js b/extensions/ohif-cornerstone-extension/src/ConnectedCineDialog.js index 94486ddd1..34b693b96 100644 --- a/extensions/ohif-cornerstone-extension/src/ConnectedCineDialog.js +++ b/extensions/ohif-cornerstone-extension/src/ConnectedCineDialog.js @@ -5,107 +5,113 @@ 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]; -} - +// Why do I need or care about any of this info? +// A dispatch action should be able to pull this at the time of an event? +// `isPlaying` and `cineFrameRate` might matter, but I think we can prop pass for those. 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); + // Get activeViewport's `cine` and `stack` + const { viewportSpecificData, activeViewportIndex } = state.viewports; + const { cine, stack } = viewportSpecificData[activeViewportIndex] || {}; - let stack = { - imageIds: [], - currentImageIdIndex: 0 - }; - if (activeViewportSpecificData && activeViewportSpecificData.stack) { - stack = activeViewportSpecificData.stack - } + const stackData = stack || { + imageIds: [], + currentImageIdIndex: 0 + }; - let cine = { - isPlaying: false, - cineFrameRate: 24 - }; - if (activeViewportSpecificData && activeViewportSpecificData.cine) { - cine = activeViewportSpecificData.cine - } + const cineData = cine || { + isPlaying: false, + cineFrameRate: 24 + }; + // 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. - // 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 - }; + // New props we're creating? + return { + activeViewportStackData: stackData, + activeViewportCineData: cineData, + activeViewportIndex: state.viewports.activeViewportIndex + }; }; const mapDispatchToProps = dispatch => { - return { - dispatchSetViewportSpecificData: (viewportIndex, data) => { - dispatch(setViewportSpecificData(viewportIndex, data)); - }, - }; + return { + dispatchSetViewportSpecificData: (viewportIndex, data) => { + dispatch(setViewportSpecificData(viewportIndex, data)); + } + }; }; const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { - const { activeViewportStackData, activeViewportCineData, activeViewportIndex } = propsFromState; + const { + activeViewportStackData, + activeViewportCineData, + activeViewportIndex + } = propsFromState; - return { - cineFrameRate: activeViewportCineData.cineFrameRate, - isPlaying: activeViewportCineData.isPlaying, - onPlayPauseChanged: isPlaying => { - const cine = cloneDeep(activeViewportCineData); - cine.isPlaying = !cine.isPlaying; + 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 + }); + }, + 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, { + 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 + }); + }, + 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 + }); + }, + 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 + }); + }, + onClickSkipToEnd: () => { + const stack = cloneDeep(activeViewportStackData); + stack.currentImageIdIndex = stack.imageIds.length; - propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { stack }); - } - }; + propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { + stack + }); + } + }; }; const ConnectedCineDialog = connect( - mapStateToProps, - mapDispatchToProps, - mergeProps + mapStateToProps, + mapDispatchToProps, + mergeProps )(CineDialog); export default ConnectedCineDialog; diff --git a/extensions/ohif-cornerstone-extension/src/ToolbarModule.js b/extensions/ohif-cornerstone-extension/src/ToolbarModule.js index 657441b60..c9ab12de8 100644 --- a/extensions/ohif-cornerstone-extension/src/ToolbarModule.js +++ b/extensions/ohif-cornerstone-extension/src/ToolbarModule.js @@ -6,7 +6,7 @@ import ConnectedCineDialog from './ConnectedCineDialog'; class ToolbarModule extends Component { state = { cineDialogOpen: false - } + }; onClickCineToolbarButton = () => { this.setState({ @@ -19,13 +19,14 @@ class ToolbarModule extends Component { display: this.state.cineDialogOpen ? 'inline-block' : 'none' }; - return (