Add layout tools based on mode.

extensions/cornerstone/src/toolbarModule.js

@@ -47,7 +47,7 @@ const definitions = [
   {
     id: 'Zoom',
     label: 'Zoom',
-    icon: 'search-plus',
+    icon: 'tool-zoom',
     //
     type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
     commandName: 'setToolActive',

extensions/default/src/getLayoutTemplateModule.js

@@ -18,7 +18,7 @@ export default function() {
   ];
 }
 
-const Header = () => {
+const Header = ({ tools, moreTools }) => {
   const [activeTool, setActiveTool] = useState('Zoom');
   const dropdownContent = [
     {
@@ -30,6 +30,7 @@ const Header = () => {
     { name: 'Bone', value: '2500 / 480' },
     { name: 'Brain', value: '80 / 40' },
   ];
+  /*
   const tools = [
     {
       id: 'Zoom',
@@ -90,6 +91,7 @@ const Header = () => {
       onClick: () => setActiveTool('Layout'),
     },
   ];
+  */
   return (
     <NavBar className="justify-between border-b-4 border-black">
       <div className="flex flex-1 justify-between">
@@ -106,7 +108,11 @@ const Header = () => {
           </div>
         </div>
         <div className="flex items-center">
-          <Toolbar tools={tools} activeTool={activeTool} moreTools={tools} />
+          <Toolbar
+            tools={tools}
+            activeTool={activeTool}
+            moreTools={moreTools}
+          />
         </div>
         <div className="flex items-center">
           <span className="mr-3 text-common-light text-lg">
@@ -128,45 +134,45 @@ const Header = () => {
   );
 };
 
-const ViewportToolbar = () => {
+const ViewportToolbar = ({ tools }) => {
-  const tools = [
+  // const tools = [
-    {
+  //   {
-      id: 'Annotate',
+  //     id: 'Annotate',
-      label: 'Annotate',
+  //     label: 'Annotate',
-      icon: 'tool-annotate',
+  //     icon: 'tool-annotate',
-      type: null,
+  //     type: null,
-      commandName: 'setToolActive',
+  //     commandName: 'setToolActive',
-      commandOptions: { toolName: 'Annotate' },
+  //     commandOptions: { toolName: 'Annotate' },
-      onClick: () => console.log('Activate Annotate'),
+  //     onClick: () => console.log('Activate Annotate'),
-    },
+  //   },
-    {
+  //   {
-      id: 'Bidirectional',
+  //     id: 'Bidirectional',
-      label: 'Bidirectional',
+  //     label: 'Bidirectional',
-      icon: 'tool-bidirectional',
+  //     icon: 'tool-bidirectional',
-      type: null,
+  //     type: null,
-      commandName: 'setToolActive',
+  //     commandName: 'setToolActive',
-      commandOptions: { toolName: 'Bidirectional' },
+  //     commandOptions: { toolName: 'Bidirectional' },
-      onClick: () => console.log('Activate Bidirectional'),
+  //     onClick: () => console.log('Activate Bidirectional'),
-    },
+  //   },
-    {
+  //   {
-      id: 'Elipse',
+  //     id: 'Elipse',
-      label: 'Elipse',
+  //     label: 'Elipse',
-      icon: 'tool-elipse',
+  //     icon: 'tool-elipse',
-      type: null,
+  //     type: null,
-      commandName: 'setToolActive',
+  //     commandName: 'setToolActive',
-      commandOptions: { toolName: 'Elipse' },
+  //     commandOptions: { toolName: 'Elipse' },
-      onClick: () => console.log('Activate Elipse'),
+  //     onClick: () => console.log('Activate Elipse'),
-    },
+  //   },
-    {
+  //   {
-      id: 'Length',
+  //     id: 'Length',
-      label: 'Length',
+  //     label: 'Length',
-      icon: 'tool-length',
+  //     icon: 'tool-length',
-      type: null,
+  //     type: null,
-      commandName: 'setToolActive',
+  //     commandName: 'setToolActive',
-      commandOptions: { toolName: 'Length' },
+  //     commandOptions: { toolName: 'Length' },
-      onClick: () => console.log('Activate Length'),
+  //     onClick: () => console.log('Activate Length'),
-    },
+  //   },
-  ];
+  // ];
   return <Toolbar type="secondary" tools={tools} />;
 };
 
@@ -197,9 +203,14 @@ function viewerLayout({
   console.warn(displaySetInstanceUids);
   console.warn(toolBarLayout);
 
+  const [primaryToolBarLayout, secondaryToolBarLayout] = toolBarLayout;
+
   return (
     <div>
-      <Header />
+      <Header
+        tools={primaryToolBarLayout.tools}
+        moreTools={primaryToolBarLayout.moreTools}
+      />
       <div
         className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
         style={{ height: 'calc(100vh - 57px' }}
@@ -211,7 +222,7 @@ function viewerLayout({
         />
         <div className="flex flex-col flex-1 h-full pb-2">
           <div className="flex flex-2 w-100 border-b border-transparent h-12">
-            <ViewportToolbar />
+            <ViewportToolbar tools={secondaryToolBarLayout.tools} />
           </div>
           <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
             {/*<ViewportGrid
@@ -287,3 +298,10 @@ function viewerLayout({
     </div>
   );
 }
+
+viewerLayout.defaultProps = {
+  toolBarLayout: [
+    { tools: [], moreTools: [] },
+    { tools: [], moreTools: [] },
+  ],
+};

modes/example/src/index.js

@@ -24,12 +24,19 @@ export default function mode({ modeConfiguration }) {
             },
           ]);
 
+          debugger;
+
           // Could import layout selector here from org.ohif.default (when it exists!)
           toolBarManager.setToolBarLayout([
             // Primary
-            ['StackScroll', { label: 'More', subMenu: ['Zoom'] }],
+            {
+              tools: ['Zoom'],
+              moreTools: ['Zoom'],
+            },
             // Secondary
-            ['StackScroll'],
+            {
+              tools: ['Zoom'],
+            },
           ]);
         },
         layoutTemplate: ({ routeProps }) => {

platform/core/src/ToolBarManager.js

@@ -2,7 +2,7 @@ export default class toolBarManager {
   constructor(extensionManager, setToolBarLayout) {
     this.buttons = {};
     this.extensionManager = extensionManager;
-    this.setToolBarLayout = setToolBarLayout;
+    this.viewModelContextSetToolBarLayout = setToolBarLayout;
   }
 
   addButtons(buttons) {
@@ -22,34 +22,34 @@ export default class toolBarManager {
   setToolBarLayout(layouts) {
     const toolBarLayout = [];
 
+    debugger;
+    console.log('setToolBarLayout');
+
     layouts.forEach(layout => {
-      const toolBarDefinitions = [];
+      const toolBarDefinitions = { tools: [], moreTools: [] };
 
-      layout.forEach(element => {
+      const { tools, moreTools } = layout;
-        if (typeof element === 'object') {
-          // process submenu.
 
-          const subMenuDefinition = { label: element.label, subMenu: [] };
+      tools &&
-
+        tools.forEach(element => {
-          element.subMenu.forEach(subMenuElement => {
-            const button = this.buttons[subMenuElement];
-
-            subMenuDefinition.subMenu.push(button);
-          });
-
-          toolBarDefinitions.push(subMenuDefinition);
-        } else {
           const button = this.buttons[element];
 
-          toolBarDefinitions.push(button);
+          toolBarDefinitions.tools.push(button);
-        }
+        });
+
+      moreTools &&
+        moreTools.forEach(element => {
+          const button = this.buttons[element];
+
+          toolBarDefinitions.moreTools.push(button);
         });
 
       toolBarLayout.push(toolBarDefinitions);
     });
 
+    console.log(`TOOLBAR LAYOUT`);
     console.log(toolBarLayout);
 
-    setToolBarLayout(toolBarLayout);
+    this.viewModelContextSetToolBarLayout(toolBarLayout);
   }
 }