From 4de5fa2d0e9e35a6a8deee701ad3b51d1c81bcdf Mon Sep 17 00:00:00 2001 From: dannyrb Date: Sun, 16 Jun 2019 13:56:24 -0400 Subject: [PATCH] Simplify toolbar module to be config only for now; use new modules in extension --- .../src/ConnectedToolbarSection.js | 29 ----- .../src/OHIFCornerstoneExtension.js | 65 --------- .../src/ToolbarModule.js | 123 +++++++++++++----- .../ohif-cornerstone-extension/src/index.js | 4 +- 4 files changed, 89 insertions(+), 132 deletions(-) delete mode 100644 extensions/ohif-cornerstone-extension/src/ConnectedToolbarSection.js delete mode 100644 extensions/ohif-cornerstone-extension/src/OHIFCornerstoneExtension.js diff --git a/extensions/ohif-cornerstone-extension/src/ConnectedToolbarSection.js b/extensions/ohif-cornerstone-extension/src/ConnectedToolbarSection.js deleted file mode 100644 index 0f388535f..000000000 --- a/extensions/ohif-cornerstone-extension/src/ConnectedToolbarSection.js +++ /dev/null @@ -1,29 +0,0 @@ -import { connect } from 'react-redux'; -import { ToolbarSection } from 'react-viewerbase'; -import OHIF from 'ohif-core' - -const { setToolActive } = OHIF.redux.actions; - -const mapStateToProps = state => { - const activeButton = state.tools.buttons.find(tool => tool.active === true); - - return { - buttons: state.tools.buttons, - activeCommand: activeButton && activeButton.command - }; -}; - -const mapDispatchToProps = dispatch => { - return { - setToolActive: tool => { - dispatch(setToolActive(tool.command)) - } - }; -}; - -const ConnectedToolbarSection = connect( - mapStateToProps, - mapDispatchToProps -)(ToolbarSection); - -export default ConnectedToolbarSection; diff --git a/extensions/ohif-cornerstone-extension/src/OHIFCornerstoneExtension.js b/extensions/ohif-cornerstone-extension/src/OHIFCornerstoneExtension.js deleted file mode 100644 index 91be065e1..000000000 --- a/extensions/ohif-cornerstone-extension/src/OHIFCornerstoneExtension.js +++ /dev/null @@ -1,65 +0,0 @@ -import OHIFCornerstoneViewport from './OHIFCornerstoneViewport.js'; -import React from 'react'; -import ToolbarModule from './ToolbarModule.js'; - -/** - * Pass in 'children' to a React component. The purpose of this is to - * allow end users of this extension to pass in components which will - * be rendered on top of the base components. - * - * @param WrappedComponent - * @param children - * @return {function(*): *} - */ -function componentWithProps(WrappedComponent, children, customProps) { - return function(props) { - const extraProps = { - customProps - }; - if (children.viewport) { - extraProps.children = children.viewport; - } - - const mergedProps = Object.assign({}, props, extraProps); - - return ; - }; -} - -// Note: If you are authoring extensions which use stateful libraries (e.g. cornerstone-core, react-redux) as peerDependencies and are also duplicated at the application level, try using 'yalc' to link it to the application, rather than yarn link. This can help fix 'module not found' issues. -// https://github.com/whitecolor/yalc - -export default class OHIFCornerstoneExtension { - constructor(props) { - const { children = {}, customProps = {} } = props; - this.children = children; - this.customProps = customProps; - } - - /** - * Extension ID is a unique id, might be used for namespacing extension specific redux actions/reducers (?) - */ - getExtensionId() { - return 'cornerstone'; - } - - getViewportModule() { - return componentWithProps( - OHIFCornerstoneViewport, - this.children, - this.customProps - ); - } - - getSopClassHandler() { - return null; - } - - getPanelModule() { - return null; - } - - getToolbarModule() { - return ToolbarModule; - } -} diff --git a/extensions/ohif-cornerstone-extension/src/ToolbarModule.js b/extensions/ohif-cornerstone-extension/src/ToolbarModule.js index ddb5ea30a..fd5d97b4a 100644 --- a/extensions/ohif-cornerstone-extension/src/ToolbarModule.js +++ b/extensions/ohif-cornerstone-extension/src/ToolbarModule.js @@ -1,43 +1,94 @@ -import React, { Component } from 'react'; +// TODO: A way to add Icons that don't already exist? +// - Register them and add +// - Include SVG Source/Inline? +// - By URL, or own component? -import ConnectedCineDialog from './ConnectedCineDialog'; -import ConnectedToolbarSection from './ConnectedToolbarSection'; -import { ToolbarButton } from 'react-viewerbase'; +// TODO: `ohif-core` toolbar builder? -class ToolbarModule extends Component { - state = { - cineDialogOpen: false - }; +// What KINDS of toolbar buttons do we have... +// - One's that dispatch commands +// - One's that set tool's active +// - More custom, like CINE +// - Built in for one's like this, or custom components? - onClickCineToolbarButton = () => { - this.setState({ - cineDialogOpen: !this.state.cineDialogOpen - }); - }; +// Visible? +// Disabled? +// Based on contexts or misc. criteria? +// -- ACTIVE_ROUTE::VIEWER +// -- ACTIVE_VIEWPORT::CORNERSTONE +// setToolActive commands should receive the button event that triggered +// so we can do the "bind to this butyon" magic - render() { - const cineDialogContainerStyle = { - display: this.state.cineDialogOpen ? 'block' : 'none', - position: 'absolute', - top: '82px', - zIndex: 999 - }; +const TOOLBAR_BUTTON_TYPES = { + COMMAND: 'command', + SET_TOOL_ACTIVE: 'setToolActive' +}; - return ( -
- - -
- -
-
- ); +const definitions = [ + { + id: 'StackScroll', + label: 'Stack Scroll', + icon: 'bars', + // + type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE, + commandName: 'setToolActive', + commandOptions: { toolName: 'StackScroll' } + }, + { + id: 'Zoom', + label: 'Zoom', + icon: 'search-plus', + // + type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE, + commandName: 'setToolActive', + commandOptions: { toolName: 'Zoom' } + }, + { + id: 'Wwwc', + label: 'Levels', + icon: 'level', + // + type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE, + commandName: 'setToolActive', + commandOptions: { toolName: 'Wwwc' } + }, + { + id: 'Pan', + label: 'Pan', + icon: 'arrows', + // + type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE, + commandName: 'setToolActive', + commandOptions: { toolName: 'Pan' } + }, + { + id: 'Length', + label: 'Length', + icon: 'measure-temp', + // + type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE, + commandName: 'setToolActive', + commandOptions: { toolName: 'Length' } + }, + { + id: 'Angle', + label: 'Angle', + icon: 'angle-left', + // + type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE, + commandName: 'setToolActive', + commandOptions: { toolName: 'Angle' } + }, + { + id: 'Reset', + label: 'Reset', + icon: 'reset', + // + type: TOOLBAR_BUTTON_TYPES.COMMAND, + commandName: 'resetViewport' } -} +]; -export default ToolbarModule; +export default { + definitions +}; diff --git a/extensions/ohif-cornerstone-extension/src/index.js b/extensions/ohif-cornerstone-extension/src/index.js index 1ad87a9c2..a47f211e5 100644 --- a/extensions/ohif-cornerstone-extension/src/index.js +++ b/extensions/ohif-cornerstone-extension/src/index.js @@ -1,6 +1,6 @@ import OHIFCornerstoneViewport from './OHIFCornerstoneViewport.js'; -import ToolbarModule from './ToolbarModule.js'; import commandsModule from './commandsModule.js'; +import toolbarModule from './toolbarModule.js'; /** * @@ -15,7 +15,7 @@ export default { return OHIFCornerstoneViewport; }, getToolbarModule() { - return ToolbarModule; + return toolbarModule; }, getCommandsModule() { return commandsModule;