WIP, wrap command manager controls so we can pass these to the UI component.

extensions/default/src/ViewerLayout/index.jsx

@@ -1,28 +1,14 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { SidePanel, Toolbar } from '@ohif/ui';
-import { useToolbarLayout } from '@ohif/core';
 //
 import Header from './Header.jsx';
-import { displaySetManager } from '@ohif/core';
-
-// function ViewportDataCreator({ setViewportData }) {
-//   const { displaySetInstanceUIDs } = useViewModel();
-//   console.log(displaySetInstanceUIDs);
-
-//   useEffect(() => {
-//     setViewportData([
-//       displaySetManager.getDisplaySetByUID(displaySetInstanceUIDs[0]),
-//     ]);
-//   }, [displaySetInstanceUIDs, setViewportData]);
-
-//   return null;
-// }
 
 function ViewerLayout({
   // From Extension Module Params
   extensionManager,
   servicesManager,
+  commandsManager,
   // From Modes
   leftPanels,
   rightPanels,
@@ -69,8 +55,56 @@ function ViewerLayout({
   };
 
   const handleToolBarSubscription = newToolBarLayout => {
+    // Get buttons to pass to toolbars.
+    console.log(commandsManager);
+
+    const firstTool = newToolBarLayout[0].tools[0];
+
+    const toolBarLayout = [];
+
+    newToolBarLayout.forEach(newToolBar => {
+      const toolBar = { tools: [], moreTools: [] };
+
+      Object.keys(newToolBar).forEach(key => {
+        if (newToolBar[key].length) {
+          newToolBar[key].forEach(tool => {
+            const commandOptions = tool.commandOptions || {};
+
+            toolBar[key].push({
+              context: tool.context,
+              icon: tool.icon,
+              id: tool.id,
+              label: tool.label,
+              type: 'setToolActive',
+              onClick: () =>
+                commandsManager.runCommand(tool.commandName, commandOptions),
+            });
+          });
+        }
+      });
+
+      toolBarLayout.push(toolBar);
+
+      // if (newToolBar.moreTools && newToolBar.moreTools.length) {
+      //   newToolBar.moreTools.forEach(tool => {
+      //     const commandOptions = tool.commandOptions || {};
+
+      //     toolBar.push({
+      //       context: tool.context,
+      //       icon: tool.icon,
+      //       id: tool.id,
+      //       label: tool.label,
+      //       type: 'setToolActive',
+      //       command: () =>
+      //         commandsManager.runCommand(tool.commandName, commandOptions),
+      //     });
+      //   });
+      // }
+    });
+
     debugger;
-    setToolBarLayout(newToolBarLayout);
+
+    setToolBarLayout(toolBarLayout);
   };
 
   const [toolBarLayout, setToolBarLayout] = useState([
@@ -188,6 +222,7 @@ ViewerLayout.propTypes = {
   extensionManager: PropTypes.shape({
     getModuleEntry: PropTypes.func.isRequired,
   }).isRequired,
+  commandsManager: PropTypes.object,
   // From modes
   // TODO: Not in love with this shape,
   toolBarLayout: PropTypes.arrayOf(
@@ -203,11 +238,4 @@ ViewerLayout.propTypes = {
   children: PropTypes.oneOfType(PropTypes.node, PropTypes.func).isRequired,
 };
 
-ViewerLayout.defaultProps = {
-  toolBarLayout: [
-    { tools: [], moreTools: [] },
-    { tools: [], moreTools: [] },
-  ],
-};
-
 export default ViewerLayout;

extensions/default/src/getLayoutTemplateModule.js

@@ -5,9 +5,18 @@ import ViewerLayout from './ViewerLayout';
 - Init layout based on the displaySets and the objects.
 */
 
-export default function({ servicesManager, extensionManager }) {
+export default function({
+  servicesManager,
+  extensionManager,
+  commandsManager,
+}) {
   function ViewerLayoutWithServices(props) {
-    return ViewerLayout({ servicesManager, extensionManager, ...props });
+    return ViewerLayout({
+      servicesManager,
+      extensionManager,
+      commandsManager,
+      ...props,
+    });
   }
 
   return [

platform/core/src/ToolbarLayoutContext.js

@@ -1,39 +0,0 @@
-import React, { Component, useContext } from 'react';
-
-/// TODO MAKE THIS PRETTY DANNY
-
-const ToolbarLayoutContext = React.createContext({
-  toolBarLayout: [],
-  setToolBarLayout: () => {},
-});
-
-ToolbarLayoutContext.displayName = 'ToolbarLayoutContext';
-
-class ToolbarLayoutProvider extends Component {
-  state = {
-    toolBarLayout: [],
-  };
-
-  render() {
-    const setToolBarLayout = toolBarLayout => {
-      this.setState({ toolBarLayout });
-    };
-
-    return (
-      <ToolbarLayoutContext.Provider
-        value={{
-          toolBarLayout: this.state.toolBarLayout,
-          setToolBarLayout,
-        }}
-      >
-        {this.props.children}
-      </ToolbarLayoutContext.Provider>
-    );
-  }
-}
-
-const useToolbarLayout = () => useContext(ToolbarLayoutContext);
-
-export default ToolbarLayoutContext;
-
-export { ToolbarLayoutProvider, useToolbarLayout };

platform/core/src/index.js

@@ -21,10 +21,6 @@ import ui from './ui';
 import user from './user.js';
 import dicomMetadataStore from './dicomMetadataStore';
 import { ViewModelProvider, useViewModel } from './ViewModelContext';
-import {
-  ToolbarLayoutProvider,
-  useToolbarLayout,
-} from './ToolbarLayoutContext';
 import utils, { hotkeys } from './utils/';
 
 import {
@@ -119,8 +115,6 @@ export {
   dicomMetadataStore,
   ViewModelProvider,
   useViewModel,
-  ToolbarLayoutProvider,
-  useToolbarLayout,
 };
 
 export { OHIF };