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 [