Working cornerstone tools buttons, needs UI updates + onClicks wrapped in 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/ToolbarLayoutContext.js

@@ -1,39 +0,0 @@
-import React, { Component, useContext } from 'react';
-
-/// TODO MAKE THIS PRETTY DANNY
-
-const ToolbarLayoutContext = React.createContext({
-  toolBarLayout: [],
-  setToolBarLayout: () => {},
-});
-
-ToolbarLayoutContext.displayName = 'ToolbarLayoutContext';
-
-class ToolbarLayoutProvider extends Component {
-  state = {
-    toolBarLayout: [],
-  };
-
-  render() {
-    const setToolBarLayout = toolBarLayout => {
-      this.setState({ toolBarLayout });
-    };
-
-    return (
-      <ToolbarLayoutContext.Provider
-        value={{
-          toolBarLayout: this.state.toolBarLayout,
-          setToolBarLayout,
-        }}
-      >
-        {this.props.children}
-      </ToolbarLayoutContext.Provider>
-    );
-  }
-}
-
-const useToolbarLayout = () => useContext(ToolbarLayoutContext);
-
-export default ToolbarLayoutContext;
-
-export { ToolbarLayoutProvider, useToolbarLayout };

platform/core/src/index.js

@@ -20,12 +20,7 @@ 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,
-  useToolbarLayout,
-} from './ToolbarLayoutContext';
 import utils, { hotkeys } from './utils/';
 
 import {
@@ -35,6 +30,7 @@ import {
   UINotificationService,
   UIViewportDialogService,
   DisplaySetService,
+  ToolBarSerivce,
 } from './services';
 
 import IWebApiDataSource from './DataSources/IWebApiDataSource';
@@ -73,10 +69,10 @@ const OHIF = {
   UIViewportDialogService,
   DisplaySetService,
   MeasurementService,
+  ToolBarSerivce,
   IWebApiDataSource,
   dicomMetadataStore,
   //
-  ToolBarManager,
   ViewModelProvider,
   useViewModel,
 };
@@ -114,13 +110,11 @@ export {
   UIViewportDialogService,
   DisplaySetService,
   MeasurementService,
+  ToolBarSerivce,
   IWebApiDataSource,
   dicomMetadataStore,
-  ToolBarManager,
   ViewModelProvider,
   useViewModel,
-  ToolbarLayoutProvider,
-  useToolbarLayout,
 };
 
 export { OHIF };

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,
 };