From c193ba17e77b390080e0d7889638212640bc4df6 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Thu, 20 Jun 2019 20:30:12 -0400 Subject: [PATCH] fix for broken CINE player --- .../src/ToolbarModule.js | 13 +++- src/App.js | 2 - .../ConnectedCineDialog.js | 14 ++-- src/connectedComponents/ToolbarRow.js | 64 +++++++++++++------ src/connectedComponents/ViewerMain.js | 8 ++- 5 files changed, 70 insertions(+), 31 deletions(-) rename {extensions/ohif-cornerstone-extension/src => src/connectedComponents}/ConnectedCineDialog.js (95%) diff --git a/extensions/ohif-cornerstone-extension/src/ToolbarModule.js b/extensions/ohif-cornerstone-extension/src/ToolbarModule.js index 405e767e8..ff659359a 100644 --- a/extensions/ohif-cornerstone-extension/src/ToolbarModule.js +++ b/extensions/ohif-cornerstone-extension/src/ToolbarModule.js @@ -21,7 +21,8 @@ const TOOLBAR_BUTTON_TYPES = { COMMAND: 'command', - SET_TOOL_ACTIVE: 'setToolActive' + SET_TOOL_ACTIVE: 'setToolActive', + BUILT_IN: 'builtIn' }; const definitions = [ @@ -86,6 +87,16 @@ const definitions = [ // type: TOOLBAR_BUTTON_TYPES.COMMAND, commandName: 'resetViewport' + }, + { + id: 'Cine', + label: 'CINE', + icon: 'youtube', + // + type: TOOLBAR_BUTTON_TYPES.BUILT_IN, + options: { + behavior: 'CINE' + } } ]; diff --git a/src/App.js b/src/App.js index e673b7e3d..3a124728f 100644 --- a/src/App.js +++ b/src/App.js @@ -13,7 +13,6 @@ import { } from './utils/index.js'; import { I18nextProvider } from 'react-i18next'; -// import ConnectedToolContextMenu from './connectedComponents/ConnectedToolContextMenu'; import OHIFCornerstoneExtension from '@ohif/extension-cornerstone'; import OHIFDicomHtmlExtension from '@ohif/extension-dicom-html'; import OHIFDicomMicroscopyExtension from '@ohif/extension-dicom-microscopy'; @@ -57,7 +56,6 @@ setupTools(store); /** TODO: extensions should be passed in as prop as soon as we have the extensions as separate packages and then registered by ExtensionsManager */ extensionManager.registerExtensions([ - // new OHIFCornerstoneExtension({ children }), OHIFCornerstoneExtension, OHIFVTKExtension, OHIFDicomPDFExtension, diff --git a/extensions/ohif-cornerstone-extension/src/ConnectedCineDialog.js b/src/connectedComponents/ConnectedCineDialog.js similarity index 95% rename from extensions/ohif-cornerstone-extension/src/ConnectedCineDialog.js rename to src/connectedComponents/ConnectedCineDialog.js index 6247f6bf2..761a79abe 100644 --- a/extensions/ohif-cornerstone-extension/src/ConnectedCineDialog.js +++ b/src/connectedComponents/ConnectedCineDialog.js @@ -20,14 +20,14 @@ const mapStateToProps = state => { const cineData = cine || { isPlaying: false, - cineFrameRate: 24 + cineFrameRate: 24, }; // New props we're creating? return { activeEnabledElement: dom, activeViewportCineData: cineData, - activeViewportIndex: state.viewports.activeViewportIndex + activeViewportIndex: state.viewports.activeViewportIndex, }; }; @@ -35,7 +35,7 @@ const mapDispatchToProps = dispatch => { return { dispatchSetViewportSpecificData: (viewportIndex, data) => { dispatch(setViewportSpecificData(viewportIndex, data)); - } + }, }; }; @@ -43,7 +43,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { const { activeEnabledElement, activeViewportCineData, - activeViewportIndex + activeViewportIndex, } = propsFromState; return { @@ -54,7 +54,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { cine.isPlaying = !cine.isPlaying; propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { - cine + cine, }); }, onFrameRateChanged: frameRate => { @@ -62,7 +62,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { cine.cineFrameRate = frameRate; propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { - cine + cine, }); }, onClickNextButton: () => { @@ -89,7 +89,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { if (!stackData || !stackData.data || !stackData.data.length) return; const lastIndex = stackData.data[0].imageIds.length - 1; scrollToIndex(activeEnabledElement, lastIndex); - } + }, }; }; diff --git a/src/connectedComponents/ToolbarRow.js b/src/connectedComponents/ToolbarRow.js index dc9cf7dc3..43a945c75 100644 --- a/src/connectedComponents/ToolbarRow.js +++ b/src/connectedComponents/ToolbarRow.js @@ -4,6 +4,7 @@ import React, { Component } from 'react'; import { RoundedButtonGroup, ToolbarButton } from 'react-viewerbase'; import { commandsManager, extensionManager } from './../App.js'; +import ConnectedCineDialog from './ConnectedCineDialog'; import ConnectedLayoutButton from './ConnectedLayoutButton'; import ConnectedPluginSwitch from './ConnectedPluginSwitch.js'; import { MODULE_TYPES } from 'ohif-core'; @@ -38,7 +39,10 @@ class ToolbarRow extends Component { this.state = { toolbarButtons: toolbarButtonDefinitions, activeButtons: [], + isCineDialogOpen: false, }; + + this._handleBuiltIn = _handleBuiltIn.bind(this); } componentDidUpdate(prevProps) { @@ -85,33 +89,47 @@ class ToolbarRow extends Component { ? rightSidebarToggle[0].value : null; - //const getButtonComponents = _getButtonComponents.bind(this); const buttonComponents = _getButtonComponents.call( this, this.state.toolbarButtons, this.state.activeButtons ); + const cineDialogContainerStyle = { + display: this.state.isCineDialogOpen ? 'block' : 'none', + position: 'absolute', + top: '82px', + zIndex: 999, + }; + return ( -
-
- + <> +
+
+ +
+ {buttonComponents} + + +
+ +
- {buttonComponents} - - -
- +
+
-
+ ); } } @@ -142,6 +160,8 @@ function _getButtonComponents(toolbarButtons, activeButtons) { this.setState({ activeButtons: [button.id], }); + } else if (button.type === 'builtIn') { + this._handleBuiltIn(button.options); } }} isActive={activeButtons.includes(button.id)} @@ -168,4 +188,12 @@ function _getVisibleToolbarButtons() { return toolbarButtonDefinitions; } +function _handleBuiltIn({ behavior } = {}) { + if (behavior === 'CINE') { + this.setState({ + isCineDialogOpen: !this.state.isCineDialogOpen, + }); + } +} + export default ToolbarRow; diff --git a/src/connectedComponents/ViewerMain.js b/src/connectedComponents/ViewerMain.js index dde93bdde..8e412def1 100644 --- a/src/connectedComponents/ViewerMain.js +++ b/src/connectedComponents/ViewerMain.js @@ -2,8 +2,7 @@ import './ViewerMain.css'; import { Component } from 'react'; import ConnectedLayoutManager from './ConnectedLayoutManager.js'; -// import { OHIF } from 'ohif-core'; -// +import ConnectedToolContextMenu from './ConnectedToolContextMenu.js'; import PropTypes from 'prop-types'; import React from 'react'; @@ -130,7 +129,10 @@ class ViewerMain extends Component { studies={this.props.studies} viewportData={this.getViewportData()} setViewportData={this.setViewportData} - /> + > + {/* Children to add to each viewport that support children */} + +
); }