Refactor vtk extension; re-add to app

extensions/ohif-vtk-extension/src/ConnectedToolbarSection.js

@@ -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;

extensions/ohif-vtk-extension/src/OHIFVTKExtension.js

@@ -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 <WrappedComponent children={children} {...props} />;
-  };
-}
-
-// 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
-    );
-  });
-}

extensions/ohif-vtk-extension/src/ToolbarModule.js

@@ -1,15 +1,41 @@
-import React, { Component } from 'react';
+const TOOLBAR_BUTTON_TYPES = {
-import PropTypes from 'prop-types';
+  COMMAND: 'command',
-import ConnectedToolbarSection from './ConnectedToolbarSection';
+  SET_TOOL_ACTIVE: 'setToolActive'
+};
 
-class ToolbarModule extends Component {
+const definitions = [
-  render() {
+  {
-    return (
+    id: 'Crosshairs',
-      <div className="ToolbarModule">
+    label: 'Crosshairs',
-        <ConnectedToolbarSection />
+    icon: 'crosshairs',
-      </div>
+    //
-    );
+    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
+};

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 = {};
 

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;

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(),