Simplify toolbar module to be config only for now; use new modules in extension

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

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

extensions/ohif-cornerstone-extension/src/OHIFCornerstoneExtension.js

@@ -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 <WrappedComponent {...mergedProps} />;
-  };
-}
-
-// 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;
-  }
-}

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';
+// TODO: `ohif-core` toolbar builder?
-import ConnectedToolbarSection from './ConnectedToolbarSection';
-import { ToolbarButton } from 'react-viewerbase';
 
-class ToolbarModule extends Component {
+// What KINDS of toolbar buttons do we have...
-  state = {
+// - One's that dispatch commands
-    cineDialogOpen: false
+// - One's that set tool's active
-  };
+// - More custom, like CINE
+//    - Built in for one's like this, or custom components?
 
-  onClickCineToolbarButton = () => {
+// Visible?
-    this.setState({
+// Disabled?
-      cineDialogOpen: !this.state.cineDialogOpen
+// 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 TOOLBAR_BUTTON_TYPES = {
-    const cineDialogContainerStyle = {
+  COMMAND: 'command',
-      display: this.state.cineDialogOpen ? 'block' : 'none',
+  SET_TOOL_ACTIVE: 'setToolActive'
-      position: 'absolute',
+};
-      top: '82px',
-      zIndex: 999
-    };
 
-    return (
+const definitions = [
-      <div className="ToolbarModule">
+  {
-        <ConnectedToolbarSection />
+    id: 'StackScroll',
-        <ToolbarButton
+    label: 'Stack Scroll',
-          active={this.state.cineDialogOpen}
+    icon: 'bars',
-          onClick={this.onClickCineToolbarButton}
+    //
-          text="CINE"
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
-          icon="youtube"
+    commandName: 'setToolActive',
-        />
+    commandOptions: { toolName: 'StackScroll' }
-        <div className="CineDialogContainer" style={cineDialogContainerStyle}>
+  },
-          <ConnectedCineDialog />
+  {
-        </div>
+    id: 'Zoom',
-      </div>
+    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
+};

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;