Pull in master

platform/core/src/extensions/ExtensionManager.js

@@ -105,9 +105,6 @@ export default class ExtensionManager {
             );
             break;
           case MODULE_TYPES.TOOLBAR:
-            this._initToolBarModule(extensionModule, extensionId);
-            break;
-
           case MODULE_TYPES.VIEWPORT:
           case MODULE_TYPES.PANEL:
           case MODULE_TYPES.SOP_CLASS_HANDLER:
@@ -115,7 +112,6 @@ export default class ExtensionManager {
           case MODULE_TYPES.LAYOUT_TEMPLATE:
             // Default for most extension points,
             // Just adds each entry ready for consumption by mode.
-
             extensionModule.forEach(element => {
               this.modulesMap[
                 `${extensionId}.${moduleType}.${element.name}`
@@ -148,27 +144,6 @@ export default class ExtensionManager {
     return this.dataSourceMap[dataSourceName];
   };
 
-  _initToolBarModule = (extensionModule, extensionId) => {
-    let { definitions, defaultContext } = extensionModule;
-    if (!definitions || Object.keys(definitions).length === 0) {
-      log.warn('Commands Module contains no command definitions');
-      return;
-    }
-
-    defaultContext = defaultContext || 'VIEWER';
-
-    definitions.forEach(definition => {
-      console.log(`${extensionId}.${MODULE_TYPES.TOOLBAR}.${definition.id}`);
-
-      // TODO -> Deep copy instead of mutation? We only do this once, but would be better.
-      definition.context = definition.context || defaultContext;
-
-      this.modulesMap[
-        `${extensionId}.${MODULE_TYPES.TOOLBAR}.${definition.id}`
-      ] = definition;
-    });
-  };
-
   /**
    * @private
    * @param {string} moduleType
@@ -185,13 +160,13 @@ export default class ExtensionManager {
 
     try {
       const extensionModule = getModuleFn({
-        getDataSources: this.getDataSources, // Why pass this in if we're passing in `extensionManager`?
-        servicesManager: this._servicesManager,
-        commandsManager: this._commandsManager,
         appConfig: this._appConfig,
+        getDataSources: this.getDataSources, // Why pass this in if we're passing in `extensionManager`?
+        commandsManager: this._commandsManager,
+        extensionManager: this,
+        servicesManager: this._servicesManager,
         configuration,
         api: this._api,
-        extensionManager: this,
       });
 
       if (!extensionModule) {

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

@@ -6,32 +6,116 @@ const EVENTS = {
 
 export default class ToolBarService {
   constructor() {
-    this.displaySets = {};
     this.EVENTS = EVENTS;
     this.listeners = {};
+    this.buttons = {};
+    this.buttonSections = {
+      /**
+       * primary: ['Zoom', 'Wwwc'],
+       * secondary: ['Length', 'RectangleRoi']
+       */
+    };
 
     Object.assign(this, pubSubServiceInterface);
   }
 
   init(extensionManager) {
-    this.buttons = {};
     this.extensionManager = extensionManager;
   }
 
-  addButtons(buttons) {
-    buttons.forEach(button => {
-      const buttonDefinition = this.extensionManager.getModuleEntry(
-        button.namespace
+  getButtons() {
+    return this.buttons;
+  }
+
+  setButtons(buttons) {
+    this.buttons = buttons;
+    this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {});
+  }
+
+  _buttonTypes() {
+    console.log(this.extensionManager.modules);
+    const buttonTypes = {};
+    const registeredToolbarModules = this.extensionManager.modules[
+      'toolbarModule'
+    ];
+
+    if (
+      Array.isArray(registeredToolbarModules) &&
+      registeredToolbarModules.length
+    ) {
+      registeredToolbarModules.forEach(toolbarModule =>
+        toolbarModule.module.forEach(def => {
+          buttonTypes[def.name] = def;
+        })
       );
+    }
 
-      const id = button.id || buttonDefinition.id;
+    return buttonTypes;
+  }
 
-      this.buttons[id] = buttonDefinition;
+
+  createButtonSection(key, buttons) {
+    // Maybe do this mapping at time of return, instead of time of create
+    // Props check important for validation here...
+
+    this.buttonSections[key] = buttons;
+    this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {});
+  }
+
+  getButtonSection(key) {
+    const buttonSectionIds = this.buttonSections[key];
+    const buttonsInSection = [];
+
+    if (!buttonSectionIds) {
+      return buttonsInSection;
+    }
+
+    buttonSectionIds.forEach(btnIdOrArray => {
+      const isNested = Array.isArray(btnIdOrArray);
+
+      if (isNested) {
+        const btnIds = btnIdOrArray;
+        const nestedButtons = [];
+
+        btnIds.forEach(nestedBtnId => {
+          const nestedBtn = this.buttons[nestedBtnId];
+          const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key);
+
+          nestedButtons.push(mappedNestedBtn);
+        });
+
+        if (nestedButtons.length) {
+          buttonsInSection.push(nestedButtons);
+        }
+      } else {
+        const btnId = btnIdOrArray;
+        const btn = this.buttons[btnId];
+        const mappedBtn = this._mapButtonToDisplay(btn, key);
+
+        buttonsInSection.push(mappedBtn);
+      }
     });
+
+    return buttonsInSection;
   }
 
   /**
-   * Broadcasts displaySetService changes.
+   *
+   * @param {object[]} buttons
+   * @param {string} buttons[].id
+   */
+  addButtons(buttons) {
+    buttons.forEach(button => {
+      if (!this.buttons[button.id]) {
+        this.buttons[button.id] = button;
+      }
+    });
+
+    this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {});
+  }
+
+  /**
+   * Broadcasts toolbarService changes.
    *
    * @param {string} eventName The event name
    * @return void
@@ -47,33 +131,35 @@ export default class ToolBarService {
     }
   };
 
-  setToolBarLayout(layouts) {
-    const toolBarLayout = [];
+  /**
+   *
+   * @param {*} btn
+   * @param {*} btnSection
+   */
+  _mapButtonToDisplay(btn, btnSection) {
+    const { id, type, component, props } = btn;
+    const buttonType = this._buttonTypes()[type];
 
-    layouts.forEach(layout => {
-      const toolBarDefinitions = { tools: [], moreTools: [] };
+    if (!buttonType) {
+      return;
+    }
 
-      const { tools, moreTools } = layout;
+    const onClick = evt => {
+      if (buttonType.clickHandler) {
+        buttonType.clickHandler(evt, btn, btnSection);
+      }
+      if (btn.props.onClick) {
+        btn.onClick(evt, btn, btnSection);
+      }
+      if (btn.props.clickHandler) {
+        btn.clickHandler(evt, btn, btnSection);
+      }
+    };
 
-      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);
-    });
-
-    this.toolBarLayout = toolBarLayout;
-
-    this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, toolBarLayout);
+    return {
+      id,
+      Component: component || buttonType.defaultComponent,
+      componentProps: Object.assign({}, props, { onClick }), //
+    };
   }
 }