Add toolbar layout to context.

extensions/default/src/getLayoutTemplateModule.js

@@ -174,6 +174,7 @@ function viewerLayout({
   leftPanels,
   rightPanels,
   extensionManager,
+  toolBarLayout,
   displaySetInstanceUids,
 }) {
   const getPanelData = id => {
@@ -194,6 +195,7 @@ function viewerLayout({
   const rightPanelComponents = rightPanels.map(getPanelData);
 
   console.warn(displaySetInstanceUids);
+  console.warn(toolBarLayout);
 
   return (
     <div>

modes/example/src/index.js

@@ -12,8 +12,8 @@ export default function mode({ modeConfiguration }) {
     routes: [
       {
         path: 'viewer',
-        init: ({ toolbarManager }) => {
-          toolbarManager.addButtons([
+        init: ({ toolBarManager }) => {
+          toolBarManager.addButtons([
             {
               id: 'StackScroll', // If id not given will use default in button definition.
               namespace: 'org.ohif.cornerstone.toolbarModule.StackScroll',
@@ -25,7 +25,7 @@ export default function mode({ modeConfiguration }) {
           ]);
 
           // Could import layout selector here from org.ohif.default (when it exists!)
-          toolbarManager.setToolBarLayout([
+          toolBarManager.setToolBarLayout([
             // Primary
             ['StackScroll', { label: 'More', subMenu: ['Zoom'] }],
             // Secondary

platform/core/src/ToolBarManager.js

@@ -1,8 +1,8 @@
 export default class toolBarManager {
-  constructor(extensionManager) {
-    this.toolBarLayout = [];
+  constructor(extensionManager, setToolBarLayout) {
     this.buttons = {};
     this.extensionManager = extensionManager;
+    this.setToolBarLayout = setToolBarLayout;
   }
 
   addButtons(buttons) {
@@ -48,8 +48,8 @@ export default class toolBarManager {
       toolBarLayout.push(toolBarDefinitions);
     });
 
-    this.toolBarLayout = toolBarLayout;
+    console.log(toolBarLayout);
 
-    console.log(this.toolBarLayout);
+    setToolBarLayout(toolBarLayout);
   }
 }

platform/viewer/src/routes/ModeRoute.js

@@ -12,22 +12,29 @@ export default function ModeRoute({
   const { routes, sopClassHandlers, extensions, init } = mode;
   const dataSources = extensionManager.getDataSources(dataSourceName);
 
-  const toolbarManager = new ToolBarManager(extensionManager);
+  // Add toolbar state to the view model context?
+  const {
+    toolBarLayout,
+    setToolBarLayout,
+    displaySetInstanceUids,
+    setDisplaySetInstanceUids,
+  } = useContext(ViewModelContext);
 
   // TODO: For now assume one unique datasource.
 
   const dataSource = dataSources[0];
   const route = routes[0];
 
-  route.init({ toolbarManager });
+  let toolBarManager;
+
+  useEffect(() => {
+    debugger;
+    toolBarManager = new ToolBarManager(extensionManager, setToolBarLayout);
+    route.init({ toolBarManager });
+  }, [mode, dataSourceName, location]);
 
   console.log(dataSource);
 
-  // Add toolbar state to the view model context?
-  const { displaySetInstanceUids, setDisplaySetInstanceUids } = useContext(
-    ViewModelContext
-  );
-
   const createDisplaySets = useCallback(() => {
     // Add SOPClassHandlers to a new SOPClassManager.
     displaySetManager.init(extensionManager, sopClassHandlers, {
@@ -82,6 +89,7 @@ export default function ModeRoute({
       <LayoutComponent
         extensionManager={extensionManager}
         displaySetInstanceUids={displaySetInstanceUids}
+        toolBarLayout={toolBarLayout}
         {...layoutTemplateData.props}
       />
     </CombinedContextProvider>

platform/viewer/src/routes/ViewModelContext.js

@@ -3,6 +3,8 @@ import React, { Component } from 'react';
 const ViewModelContext = React.createContext({
   displaySetInstanceUids: [],
   setDisplaySetInstanceUids: () => {},
+  toolBarLayout: [],
+  setToolBarLayout: () => {},
 });
 
 ViewModelContext.displayName = 'ViewModelContext';
@@ -17,11 +19,17 @@ class ViewModelProvider extends Component {
       this.setState({ displaySetInstanceUids });
     };
 
+    const setToolBarLayout = toolBarLayout => {
+      this.setState({ toolBarLayout });
+    };
+
     return (
       <ViewModelContext.Provider
         value={{
           displaySetInstanceUids: this.state.displaySetInstanceUids,
           setDisplaySetInstanceUids,
+          toolBarLayout: this.state.toolBarLayout,
+          setToolBarLayout,
         }}
       >
         {this.props.children}