ToolBarService

extensions/default/src/ViewerLayout/index.jsx

@@ -28,12 +28,9 @@ function ViewerLayout({
   rightPanels,
   viewports,
   children,
-  ViewportGridComp
+  ViewportGridComp,
 }) {
-  const [displaySets, setDisplaySets] = useState({});
+  const { ToolBarService } = servicesManager.services;
-
-  //const ViewportGrid = React.Children.only(children);
-
   /**
    * Set body classes (tailwindcss) that don't allow vertical
    * or horizontal overflow (no scrolling). Also guarantee window
@@ -47,6 +44,7 @@ function ViewerLayout({
       document.body.classList.remove('overflow-hidden');
     };
   }, []);
+
   const getPanelData = id => {
     const entry = extensionManager.getModuleEntry(id);
     // TODO, not sure why sidepanel content has to be JSX, and not a children prop?
@@ -70,27 +68,34 @@ function ViewerLayout({
     };
   };
 
+  const handleToolBarSubscription = newToolBarLayout => {
+    debugger;
+    setToolBarLayout(newToolBarLayout);
+  };
+
+  const [toolBarLayout, setToolBarLayout] = useState([
+    { tools: [], moreTools: [] },
+    { tools: [] },
+  ]);
+
+  useEffect(() => {
+    const { unsubscribe } = ToolBarService.subscribe(
+      ToolBarService.EVENTS.TOOL_BAR_MODIFIED,
+      handleToolBarSubscription
+    );
+
+    return unsubscribe;
+  }, []);
+
   const leftPanelComponents = leftPanels.map(getPanelData);
   const rightPanelComponents = rightPanels.map(getPanelData);
   const viewportComponents = viewports.map(getViewportComponentData);
 
-  // let { toolBarLayout } = useToolbarLayout();
-  // if (!toolBarLayout.length) {
-  //   return null;
-  // }
-
-  // TODO -> make toolbar service
-  const toolBarLayout = { tools: [], moreTools: [] };
-
-  //const [primaryToolBarLayout, secondaryToolBarLayout] = toolBarLayout;
-  const primaryToolBarLayout = toolBarLayout;
-  const secondaryToolBarLayout = toolBarLayout;
-
   return (
     <div>
       <Header
-        tools={primaryToolBarLayout.tools}
+        tools={toolBarLayout[0].tools}
-        moreTools={primaryToolBarLayout.moreTools}
+        moreTools={toolBarLayout[0].moreTools}
       />
       <div
         className="flex flex-row flex-no-wrap items-stretch overflow-hidden w-full"
@@ -105,7 +110,7 @@ function ViewerLayout({
         {/* TOOLBAR + GRID */}
         <div className="flex flex-col flex-1 h-full">
           <div className="flex flex-2 w-100 border-b border-transparent h-12">
-            <Toolbar type="secondary" tools={secondaryToolBarLayout.tools} />
+            <Toolbar type="secondary" tools={toolBarLayout[1].tools} />
           </div>
           <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
             <ViewportGridComp

modes/example/src/index.js

@@ -12,8 +12,10 @@ export default function mode({ modeConfiguration }) {
     routes: [
       {
         path: 'viewer',
-        init: ({ toolBarManager }) => {
+        init: ({ servicesManager, extensionManager }) => {
-          toolBarManager.addButtons([
+          const { ToolBarService } = servicesManager.services;
+          ToolBarService.init(extensionManager);
+          ToolBarService.addButtons([
             {
               id: 'Zoom',
               namespace: 'org.ohif.cornerstone.toolbarModule.Zoom',
@@ -53,7 +55,7 @@ export default function mode({ modeConfiguration }) {
           ]);
 
           // Could import layout selector here from org.ohif.default (when it exists!)
-          toolBarManager.setToolBarLayout([
+          ToolBarService.setToolBarLayout([
             // Primary
             {
               tools: ['Zoom', 'Levels', 'Pan', 'Capture', 'Layout'],

platform/core/src/ToolBarManager.js

@@ -1,46 +0,0 @@
-export default class toolBarManager {
-  constructor(extensionManager) {
-    this.buttons = {};
-    this.extensionManager = extensionManager;
-  }
-
-  addButtons(buttons) {
-    buttons.forEach(button => {
-      const buttonDefinition = this.extensionManager.getModuleEntry(
-        button.namespace
-      );
-
-      const id = button.id || buttonDefinition.id;
-
-      this.buttons[id] = buttonDefinition;
-    });
-  }
-
-  setToolBarLayout(layouts) {
-    const toolBarLayout = [];
-
-    layouts.forEach(layout => {
-      const toolBarDefinitions = { tools: [], moreTools: [] };
-
-      const { tools, moreTools } = layout;
-
-      tools &&
-        tools.forEach(element => {
-          const button = this.buttons[element];
-
-          toolBarDefinitions.tools.push(button);
-        });
-
-      moreTools &&
-        moreTools.forEach(element => {
-          const button = this.buttons[element];
-
-          toolBarDefinitions.moreTools.push(button);
-        });
-
-      toolBarLayout.push(toolBarDefinitions);
-    });
-
-    // TODO -> Change this to a service. => emit an event to subscribers to update the toolbar layout.
-  }
-}

platform/core/src/index.js

@@ -20,7 +20,6 @@ import studies from './studies/';
 import ui from './ui';
 import user from './user.js';
 import dicomMetadataStore from './dicomMetadataStore';
-import ToolBarManager from './ToolBarManager';
 import { ViewModelProvider, useViewModel } from './ViewModelContext';
 import {
   ToolbarLayoutProvider,
@@ -35,6 +34,7 @@ import {
   UINotificationService,
   UIViewportDialogService,
   DisplaySetService,
+  ToolBarSerivce,
 } from './services';
 
 import IWebApiDataSource from './DataSources/IWebApiDataSource';
@@ -73,10 +73,10 @@ const OHIF = {
   UIViewportDialogService,
   DisplaySetService,
   MeasurementService,
+  ToolBarSerivce,
   IWebApiDataSource,
   dicomMetadataStore,
   //
-  ToolBarManager,
   ViewModelProvider,
   useViewModel,
 };
@@ -114,9 +114,9 @@ export {
   UIViewportDialogService,
   DisplaySetService,
   MeasurementService,
+  ToolBarSerivce,
   IWebApiDataSource,
   dicomMetadataStore,
-  ToolBarManager,
   ViewModelProvider,
   useViewModel,
   ToolbarLayoutProvider,

platform/core/src/services/DisplaySetService/DisplaySetService.js

@@ -98,9 +98,9 @@ export default class DisplaySetService {
       displaySetsAdded = displaySets;
     }
 
-    // If array of array of instances
+    if (displaySetsAdded.length) {
-
+      this._broadcastChange(EVENTS.DISPLAY_SETS_ADDED, displaySetsAdded);
-    this._broadcastChange(EVENTS.DISPLAY_SETS_ADDED, displaySetsAdded);
+    }
   };
 
   makeDisplaySetForInstances(instances) {

platform/core/src/services/ToolBarService/ToolBarService.js

@@ -1,5 +1,9 @@
 import pubSubServiceInterface from '../pubSubServiceInterface';
 
+const EVENTS = {
+  TOOL_BAR_MODIFIED: 'event::toolBarService:toolBarModified',
+};
+
 export default class ToolBarService {
   constructor() {
     this.displaySets = {};
@@ -26,6 +30,23 @@ export default class ToolBarService {
     });
   }
 
+  /**
+   * Broadcasts displaySetService changes.
+   *
+   * @param {string} eventName The event name
+   * @return void
+   */
+  _broadcastChange = (eventName, callbackProps) => {
+    const hasListeners = Object.keys(this.listeners).length > 0;
+    const hasCallbacks = Array.isArray(this.listeners[eventName]);
+
+    if (hasListeners && hasCallbacks) {
+      this.listeners[eventName].forEach(listener => {
+        listener.callback(callbackProps);
+      });
+    }
+  };
+
   setToolBarLayout(layouts) {
     const toolBarLayout = [];
 
@@ -51,6 +72,8 @@ export default class ToolBarService {
       toolBarLayout.push(toolBarDefinitions);
     });
 
-    // TODO -> Change this to a service. => emit an event to subscribers to update the toolbar layout.
+    this.toolBarLayout = toolBarLayout;
+
+    this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, toolBarLayout);
   }
 }

platform/core/src/services/ToolBarService/index.js

@@ -0,0 +1,8 @@
+import ToolBarService from './ToolBarService';
+
+export default {
+  name: 'ToolBarService',
+  create: ({ configuration = {} }) => {
+    return new ToolBarService();
+  },
+};

platform/core/src/services/index.js

@@ -5,6 +5,7 @@ import UIModalService from './UIModalService';
 import UINotificationService from './UINotificationService';
 import UIViewportDialogService from './UIViewportDialogService';
 import DisplaySetService from './DisplaySetService';
+import ToolBarSerivce from './ToolBarService';
 
 export {
   MeasurementService,
@@ -14,4 +15,5 @@ export {
   UINotificationService,
   UIViewportDialogService,
   DisplaySetService,
+  ToolBarSerivce,
 };

platform/viewer/src/appInit.js

@@ -8,6 +8,7 @@ import {
   UIDialogService,
   MeasurementService,
   DisplaySetService,
+  ToolBarSerivce,
   // utils,
   // redux as reduxOHIF,
 } from '@ohif/core';
@@ -45,6 +46,7 @@ function appInit(appConfigOrFunc, defaultExtensions) {
     UIDialogService,
     MeasurementService,
     DisplaySetService,
+    ToolBarSerivce,
   ]);
 
   /**

platform/viewer/src/routes/Mode/DisplaySetCreator.jsx

@@ -1,55 +0,0 @@
-import { useEffect, useCallback } from 'react';
-import {
-  displaySetManager,
-  ToolBarManager,
-  useViewModel,
-  useToolbarLayout,
-} from '@ohif/core';
-
-export default function DisplaySetCreator({
-  location,
-  mode,
-  dataSourceName,
-  extensionManager,
-  DisplaySetService,
-}) {
-  console.warn('DisplaySetCreator rerendering');
-  const { routes, sopClassHandlers } = mode;
-  const dataSources = extensionManager.getDataSources(dataSourceName);
-  // TODO: For now assume one unique datasource.
-
-  const dataSource = dataSources[0];
-  const route = routes[0];
-
-  // Add toolbar state to the view model context?
-  const { displaySetInstanceUIDs, setDisplaySetInstanceUIDs } = useViewModel();
-
-  const { toolBarLayout, setToolBarLayout } = useToolbarLayout();
-
-  useEffect(() => {
-    let toolBarManager = new ToolBarManager(extensionManager, setToolBarLayout);
-    route.init({ toolBarManager });
-  }, [mode, dataSourceName, location]);
-
-  const createDisplaySets = useCallback(() => {
-    // Add SOPClassHandlers to a new SOPClassManager.
-    displaySetManager.init(extensionManager, sopClassHandlers, {
-      displaySetInstanceUIDs,
-      setDisplaySetInstanceUIDs,
-    });
-
-    const queryParams = location.search;
-
-    // Call the data source to start building the view model?
-    dataSource.retrieve.series.metadata(
-      queryParams,
-      displaySetManager.makeDisplaySets
-    );
-  }, [displaySetInstanceUIDs, location]);
-
-  useEffect(() => {
-    createDisplaySets();
-  }, [mode, dataSourceName, location]);
-
-  return null;
-}

platform/viewer/src/routes/Mode/Mode.jsx

@@ -1,12 +1,10 @@
 import React, { useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 //
-import { ToolBarManager } from '@ohif/core';
 import { DragAndDropProvider } from '@ohif/ui';
 //
 import ViewportGrid from '@components/ViewportGrid';
 import Compose from './Compose';
-//import DisplaySetCreator from './DisplaySetCreator';
 
 export default function ModeRoute({
   location,
@@ -58,9 +56,7 @@ export default function ModeRoute({
   }
 
   useEffect(() => {
-    // TODO -> Make this into a service
+    route.init({ servicesManager, extensionManager });
-    let toolBarManager = new ToolBarManager(extensionManager); //, setToolBarLayout);
-    route.init({ toolBarManager });
   }, [mode, dataSourceName, location]);
 
   const createDisplaySets = useCallback(() => {