From d5b4cb7b07ce251d90654d8669a6fbc71f817239 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Sun, 16 Jun 2019 23:11:43 -0400 Subject: [PATCH] Refactor vtk extension; re-add to app --- .../src/ConnectedToolbarSection.js | 57 -------------- .../src/OHIFVTKExtension.js | 75 ------------------- .../ohif-vtk-extension/src/ToolbarModule.js | 50 ++++++++++--- .../src/{commands.js => commandsModule.js} | 9 +-- extensions/ohif-vtk-extension/src/index.js | 23 +++++- src/App.js | 6 +- 6 files changed, 64 insertions(+), 156 deletions(-) delete mode 100644 extensions/ohif-vtk-extension/src/ConnectedToolbarSection.js delete mode 100644 extensions/ohif-vtk-extension/src/OHIFVTKExtension.js rename extensions/ohif-vtk-extension/src/{commands.js => commandsModule.js} (97%) diff --git a/extensions/ohif-vtk-extension/src/ConnectedToolbarSection.js b/extensions/ohif-vtk-extension/src/ConnectedToolbarSection.js deleted file mode 100644 index 3b8f17835..000000000 --- a/extensions/ohif-vtk-extension/src/ConnectedToolbarSection.js +++ /dev/null @@ -1,57 +0,0 @@ -import OHIF from 'ohif-core'; -import { ToolbarSection } from 'react-viewerbase'; -import { connect } from 'react-redux'; - -const mapStateToProps = state => { - return { - buttons: [ - { - command: 'Crosshairs', - type: 'tool', - text: 'Crosshairs', - icon: 'crosshairs', - active: true, - onClick: () => { - // TODO: Make these use setToolActive instead - window.commandsManager.runCommand('enableCrosshairsTool', {}, 'vtk'); - } - }, - { - command: 'WWWC', - type: 'tool', - text: 'WWWC', - icon: 'level', - active: true, - onClick: () => { - // TODO: Make these use setToolActive instead - window.commandsManager.runCommand('enableLevelTool', {}, 'vtk'); - } - }, - { - command: 'Rotate', - type: 'tool', - text: 'Rotate', - icon: '3d-rotate', - active: false, - onClick: () => { - // TODO: Make these use setToolActive instead - window.commandsManager.runCommand('enableRotateTool', {}, 'vtk'); - } - } - ] - }; -}; - -const mapDispatchToProps = dispatch => { - return { - setToolActive: tool => {}, - activeCommand: 'Crosshairs' - }; -}; - -const ConnectedToolbarSection = connect( - mapStateToProps, - mapDispatchToProps -)(ToolbarSection); - -export default ConnectedToolbarSection; diff --git a/extensions/ohif-vtk-extension/src/OHIFVTKExtension.js b/extensions/ohif-vtk-extension/src/OHIFVTKExtension.js deleted file mode 100644 index d0eda51a5..000000000 --- a/extensions/ohif-vtk-extension/src/OHIFVTKExtension.js +++ /dev/null @@ -1,75 +0,0 @@ -import React, { Component } from 'react'; -import OHIFVTKViewport from './OHIFVTKViewport.js'; -import ToolbarModule from './ToolbarModule.js'; -import { definitions } from './commands'; - -/** - * 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 withChildren(WrappedComponent, children) { - return function(props) { - 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 OHIFVTKExtension { - constructor({ children, commandsManager }) { - this.children = children; - - _registerCommands(commandsManager, definitions, this.getExtensionId()); - } - - /** - * Extension ID is a unique id, might be used for namespacing extension specific redux actions/reducers (?) - */ - getExtensionId() { - return 'vtk'; - } - - getViewportModule() { - if (this.children && this.children.viewport) { - return withChildren(OHIFVTKViewport, this.children.viewport); - } - - return OHIFVTKViewport; - } - - getSopClassHandler() { - return null; - } - - getPanelModule() { - return null; - } - - getToolbarModule() { - return ToolbarModule; - } -} - -/** - * Register all Viewer commands - * - * @private - */ -function _registerCommands(commandsManager, definitions, commandContext) { - commandsManager.createContext(commandContext); - Object.keys(definitions).forEach(commandName => { - const commandDefinition = definitions[commandName]; - - commandsManager.registerCommand( - commandContext, - commandName, - commandDefinition - ); - }); -} diff --git a/extensions/ohif-vtk-extension/src/ToolbarModule.js b/extensions/ohif-vtk-extension/src/ToolbarModule.js index 447abcab9..5bf6bdece 100644 --- a/extensions/ohif-vtk-extension/src/ToolbarModule.js +++ b/extensions/ohif-vtk-extension/src/ToolbarModule.js @@ -1,15 +1,41 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import ConnectedToolbarSection from './ConnectedToolbarSection'; +const TOOLBAR_BUTTON_TYPES = { + COMMAND: 'command', + SET_TOOL_ACTIVE: 'setToolActive' +}; -class ToolbarModule extends Component { - render() { - return ( -
- -
- ); +const definitions = [ + { + id: 'Crosshairs', + label: 'Crosshairs', + icon: 'crosshairs', + // + type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE, + commandName: 'enableCrosshairsTool', + commandOptions: {} + // window.commandsManager.runCommand('enableCrosshairsTool', {}, 'vtk'); + }, + { + id: 'WWWC', + label: 'WWWC', + icon: 'level', + // + type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE, + commandName: 'enableLevelTool', + commandOptions: {} + // window.commandsManager.runCommand('enableLevelTool', {}, 'vtk'); + }, + { + id: 'Rotate', + label: 'Rotate', + icon: '3d-rotate', + // + type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE, + commandName: 'enableRotateTool', + commandOptions: {} + // window.commandsManager.runCommand('enableRotateTool', {}, 'vtk'); } -} +]; -export default ToolbarModule; +export default { + definitions +}; diff --git a/extensions/ohif-vtk-extension/src/commands.js b/extensions/ohif-vtk-extension/src/commandsModule.js similarity index 97% rename from extensions/ohif-vtk-extension/src/commands.js rename to extensions/ohif-vtk-extension/src/commandsModule.js index 52a7042aa..1647bac41 100644 --- a/extensions/ohif-vtk-extension/src/commands.js +++ b/extensions/ohif-vtk-extension/src/commandsModule.js @@ -1,17 +1,14 @@ import { - vtkInteractorStyleMPRWindowLevel, + vtkInteractorStyleMPRCrosshairs, vtkInteractorStyleMPRSlice, - vtkInteractorStyleMPRCrosshairs + vtkInteractorStyleMPRWindowLevel } from 'react-vtkjs-viewport'; -import setViewportToVTK from './utils/setViewportToVTK.js'; import setMPRLayout from './utils/setMPRLayout.js'; +import setViewportToVTK from './utils/setViewportToVTK.js'; import vtkMath from 'vtk.js/Sources/Common/Core/Math'; import vtkMatrixBuilder from 'vtk.js/Sources/Common/Core/MatrixBuilder'; -// TODO: Should be another way to get this -const commandsManager = window.commandsManager; - // TODO: Put this somewhere else let apis = {}; diff --git a/extensions/ohif-vtk-extension/src/index.js b/extensions/ohif-vtk-extension/src/index.js index 95116b66c..6b8a16472 100644 --- a/extensions/ohif-vtk-extension/src/index.js +++ b/extensions/ohif-vtk-extension/src/index.js @@ -1,7 +1,24 @@ +import OHIFVTKViewport from './OHIFVTKViewport.js'; +import commandsModule from './commandsModule.js'; +// This feels weird import loadLocales from './loadLocales'; +import toolbarModule from './toolbarModule.js'; -import OHIFVTKExtension from './OHIFVTKExtension.js'; +export default { + /** + * Only required property. Should be a unique value across all extensions. + */ + id: 'vtk', + + getViewportModule() { + return OHIFVTKViewport; + }, + getToolbarModule() { + return toolbarModule; + }, + getCommandsModule() { + return commandsModule; + } +}; loadLocales(); - -export default OHIFVTKExtension; diff --git a/src/App.js b/src/App.js index f0e4e3cf1..710bb9a22 100644 --- a/src/App.js +++ b/src/App.js @@ -19,7 +19,7 @@ import OHIFCornerstoneExtension from '@ohif/extension-cornerstone'; // import OHIFDicomMicroscopyExtension from '@ohif/extension-dicom-microscopy'; // import OHIFDicomPDFExtension from 'ohif-dicom-pdf-extension'; import OHIFStandaloneViewer from './OHIFStandaloneViewer'; -// import OHIFVTKExtension from '@ohif/extension-vtk'; +import OHIFVTKExtension from '@ohif/extension-vtk'; import { OidcProvider } from 'redux-oidc'; import PropTypes from 'prop-types'; import { Provider } from 'react-redux'; @@ -70,9 +70,9 @@ 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([ - OHIFCornerstoneExtension, // new OHIFCornerstoneExtension({ children }), - // new OHIFVTKExtension(), // { commandsManager } + OHIFCornerstoneExtension, + OHIFVTKExtension, // new OHIFDicomPDFExtension(), // new OHIFDicomHtmlExtension(), // new OHIFDicomMicroscopyExtension(),