ToolBarService

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
-
-    this._broadcastChange(EVENTS.DISPLAY_SETS_ADDED, displaySetsAdded);
+    if (displaySetsAdded.length) {
+      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
-    let toolBarManager = new ToolBarManager(extensionManager); //, setToolBarLayout);
-    route.init({ toolBarManager });
+    route.init({ servicesManager, extensionManager });
   }, [mode, dataSourceName, location]);
 
   const createDisplaySets = useCallback(() => {