diff --git a/src/App.js b/src/App.js index 7c5a42e38..dfc7bdb6c 100644 --- a/src/App.js +++ b/src/App.js @@ -4,16 +4,15 @@ import { CommandsManager, ExtensionManager, HotkeysManager, - redux, utils, } from 'ohif-core'; import React, { Component } from 'react'; import { - getDefaultToolbarButtons, getUserManagerForOpenIdConnectClient, initWebWorkers, } from './utils/index.js'; +import { I18nextProvider } from 'react-i18next'; // import ConnectedToolContextMenu from './connectedComponents/ConnectedToolContextMenu'; import OHIFCornerstoneExtension from '@ohif/extension-cornerstone'; // import OHIFDicomHtmlExtension from 'ohif-dicom-html-extension'; @@ -27,9 +26,8 @@ import { Provider } from 'react-redux'; import { BrowserRouter as Router } from 'react-router-dom'; import WhiteLabellingContext from './WhiteLabellingContext'; import appCommands from './appCommands'; -import setupTools from './setupTools'; import i18n from '@ohif/i18n'; -import { I18nextProvider } from 'react-i18next'; +import setupTools from './setupTools'; import store from './store'; // ~~~~ APP SETUP diff --git a/src/connectedComponents/ToolbarRow.js b/src/connectedComponents/ToolbarRow.js index a9b7b2f19..25d720bab 100644 --- a/src/connectedComponents/ToolbarRow.js +++ b/src/connectedComponents/ToolbarRow.js @@ -1,13 +1,13 @@ import './ToolbarRow.css'; import React, { Component } from 'react'; +import { RoundedButtonGroup, ToolbarButton } from 'react-viewerbase'; +import { commandsManager, extensionManager } from './../App.js'; import ConnectedLayoutButton from './ConnectedLayoutButton'; import ConnectedPluginSwitch from './ConnectedPluginSwitch.js'; import { MODULE_TYPES } from 'ohif-core'; import PropTypes from 'prop-types'; -import { RoundedButtonGroup } from 'react-viewerbase'; -import { extensionManager } from './../App.js'; class ToolbarRow extends Component { static propTypes = { @@ -23,6 +23,31 @@ class ToolbarRow extends Component { rightSidebarOpen: false, }; + constructor(props) { + super(props); + + const toolbarModules = extensionManager.modules[MODULE_TYPES.TOOLBAR]; + const toolbarButtonDefinitions = toolbarModules[0].module.definitions; + + // TODO: + // ToolbarSection for Each ToolbarButton + // Render buttons + // On click, depending on Type, pass props to registered command in commands manager? + // If it's a tool that can be active... Mark it as active? + // - Tools that are on/off? + // - Tools that can be bound to multiple buttons? + + // Normal ToolbarButtons... + // Maybe filtered by the active context(s)? + // Buttons can handle their own clicks. No reason for the container to do it? + // Just how high do we need to hoist this state? + // Why ToolbarRow instead of just Toolbar? Do we have any others? + this.state = { + toolbarButtons: toolbarButtonDefinitions, + activeButtons: [], + }; + } + onLeftSidebarValueChanged = value => { this.props.setLeftSidebarOpen(!!value); }; @@ -56,19 +81,13 @@ class ToolbarRow extends Component { ? rightSidebarToggle[0].value : null; - const availableToolbarModules = - extensionManager.modules[MODULE_TYPES.TOOLBAR]; - const toolbarModuleDefinition = availableToolbarModules.find( - moduleDefinition => moduleDefinition.extensionId === this.props.pluginId + //const getButtonComponents = _getButtonComponents.bind(this); + const buttonComponents = _getButtonComponents.call( + this, + this.state.toolbarButtons, + this.state.activeButtons ); - let pluginComp; - if (toolbarModuleDefinition) { - const PluginComponent = toolbarModuleDefinition.module; - - pluginComp = ; - } - return (
@@ -78,7 +97,7 @@ class ToolbarRow extends Component { onValueChanged={this.onLeftSidebarValueChanged} />
- {pluginComp} + {buttonComponents}
@@ -93,4 +112,38 @@ class ToolbarRow extends Component { } } +/** + * Determine which extension buttons should be showing, if they're + * active, and what their onClick behavior should be. + */ +function _getButtonComponents(toolbarButtons, activeButtons) { + return toolbarButtons.map((button, index) => { + // TODO: If `button.buttons`, use `ExpandedToolMenu` + // I don't believe any extensions currently leverage this + return ( + { + if (button.commandName) { + const options = Object.assign({ evt }, button.commandOptions); + commandsManager.runCommand(button.commandName, options); + } + + // TODO: Use Types ENUM + // TODO: We can update this to be a `getter` on the extension to query + // For the active tools after we apply our updates? + if (button.type === 'setToolActive') { + this.setState({ + activeButtons: [button.id], + }); + } + }} + isActive={activeButtons.includes(toolbarButtons.id)} + /> + ); + }); +} + export default ToolbarRow; diff --git a/src/utils/index.js b/src/utils/index.js index 22478739a..efcc1628c 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,9 +1,4 @@ -import getDefaultToolbarButtons from './getDefaultToolbarButtons.js'; import getUserManagerForOpenIdConnectClient from './getUserManagerForOpenIdConnectClient.js'; import initWebWorkers from './initWebWorkers.js'; -export { - getDefaultToolbarButtons, - getUserManagerForOpenIdConnectClient, - initWebWorkers, -}; +export { getUserManagerForOpenIdConnectClient, initWebWorkers };