feat(toolbox): Refactor Toolbar and Toolbox to enable sections (#4825)

modes/microscopy/src/index.tsx

@@ -38,8 +38,6 @@ const extensionDependencies = {
 
 function modeFactory({ modeConfiguration }) {
   return {
-    // TODO: We're using this as a route segment
-    // We should not be.
     id,
     routeName: 'microscopy',
     displayName: i18n.t('Modes:Microscopy'),
@@ -47,11 +45,21 @@ function modeFactory({ modeConfiguration }) {
     /**
      * Lifecycle hooks
      */
-    onModeEnter: ({ servicesManager, extensionManager, commandsManager }: withAppTypes) => {
+    onModeEnter: ({ servicesManager }: withAppTypes) => {
       const { toolbarService } = servicesManager.services;
 
       toolbarService.addButtons(toolbarButtons);
       toolbarService.createButtonSection('primary', ['MeasurementTools', 'dragPan', 'TagBrowser']);
+
+      toolbarService.createButtonSection('measurementSection', [
+        'line',
+        'point',
+        'polygon',
+        'circle',
+        'box',
+        'freehandpolygon',
+        'freehandline',
+      ]);
     },
 
     onModeExit: ({ servicesManager }: withAppTypes) => {
@@ -79,9 +87,6 @@ function modeFactory({ modeConfiguration }) {
     routes: [
       {
         path: 'microscopy',
-        /*init: ({ servicesManager, extensionManager }) => {
-          //defaultViewerRouteInit
-        },*/
         layoutTemplate: ({ location, servicesManager }) => {
           return {
             id: ohif.layout,

modes/microscopy/src/toolbarButtons.js

@@ -1,164 +0,0 @@
-import { ToolbarService } from '@ohif/core';
-
-const toolbarButtons = [
-  {
-    id: 'MeasurementTools',
-    uiType: 'ohif.toolButtonList',
-    props: {
-      groupId: 'MeasurementTools',
-      // group evaluate to determine which item should move to the top
-      evaluate: 'evaluate.group.promoteToPrimary',
-      primary: ToolbarService.createButton({
-        id: 'line',
-        icon: 'tool-length',
-        label: 'Line',
-        tooltip: 'Line',
-        commands: [
-          {
-            commandName: 'setToolActive',
-            commandOptions: { toolName: 'line' },
-            context: 'MICROSCOPY',
-          },
-        ],
-        evaluate: 'evaluate.microscopyTool',
-      }),
-      secondary: {
-        icon: 'chevron-down',
-        tooltip: 'More Measure Tools',
-      },
-      items: [
-        ToolbarService.createButton({
-          id: 'line',
-          icon: 'tool-length',
-          label: 'Line',
-          tooltip: 'Line',
-          commands: [
-            {
-              commandName: 'setToolActive',
-              commandOptions: { toolName: 'line' },
-              context: 'MICROSCOPY',
-            },
-          ],
-          evaluate: 'evaluate.microscopyTool',
-        }),
-        ToolbarService.createButton({
-          id: 'point',
-          icon: 'tool-point',
-          label: 'Point',
-          tooltip: 'Point Tool',
-          commands: [
-            {
-              commandName: 'setToolActive',
-              commandOptions: { toolName: 'point' },
-              context: 'MICROSCOPY',
-            },
-          ],
-          evaluate: 'evaluate.microscopyTool',
-        }),
-        // Point Tool was previously defined
-        ToolbarService.createButton({
-          id: 'polygon',
-          icon: 'tool-polygon',
-          label: 'Polygon',
-          tooltip: 'Polygon Tool',
-          commands: [
-            {
-              commandName: 'setToolActive',
-              commandOptions: { toolName: 'polygon' },
-              context: 'MICROSCOPY',
-            },
-          ],
-          evaluate: 'evaluate.microscopyTool',
-        }),
-        ToolbarService.createButton({
-          id: 'circle',
-          icon: 'tool-circle',
-          label: 'Circle',
-          tooltip: 'Circle Tool',
-          commands: [
-            {
-              commandName: 'setToolActive',
-              commandOptions: { toolName: 'circle' },
-              context: 'MICROSCOPY',
-            },
-          ],
-          evaluate: 'evaluate.microscopyTool',
-        }),
-        ToolbarService.createButton({
-          id: 'box',
-          icon: 'tool-rectangle',
-          label: 'Box',
-          tooltip: 'Box Tool',
-          commands: [
-            {
-              commandName: 'setToolActive',
-              commandOptions: { toolName: 'box' },
-              context: 'MICROSCOPY',
-            },
-          ],
-          evaluate: 'evaluate.microscopyTool',
-        }),
-        ToolbarService.createButton({
-          id: 'freehandpolygon',
-          icon: 'tool-freehand-polygon',
-          label: 'Freehand Polygon',
-          tooltip: 'Freehand Polygon Tool',
-          commands: [
-            {
-              commandName: 'setToolActive',
-              commandOptions: { toolName: 'freehandpolygon' },
-              context: 'MICROSCOPY',
-            },
-          ],
-          evaluate: 'evaluate.microscopyTool',
-        }),
-        ToolbarService.createButton({
-          id: 'freehandline',
-          icon: 'tool-freehand-line',
-          label: 'Freehand Line',
-          tooltip: 'Freehand Line Tool',
-          commands: [
-            {
-              commandName: 'setToolActive',
-              commandOptions: { toolName: 'freehandline' },
-              context: 'MICROSCOPY',
-            },
-          ],
-          evaluate: 'evaluate.microscopyTool',
-        }),
-      ],
-    },
-  },
-  {
-    id: 'dragPan',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'tool-move',
-      label: 'Pan',
-      commands: [
-        {
-          commandName: 'setToolActive',
-          commandOptions: { toolName: 'dragPan' },
-          context: 'MICROSCOPY',
-        },
-      ],
-      evaluate: 'evaluate.microscopyTool',
-    },
-  },
-  {
-    id: 'TagBrowser',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'dicom-tag-browser',
-      label: 'Dicom Tag Browser',
-      commands: [
-        {
-          commandName: 'openDICOMTagViewer',
-        },
-      ],
-      evaluate: 'evaluate.action',
-    },
-  },
-];
-
-export default toolbarButtons;

modes/microscopy/src/toolbarButtons.ts

@@ -0,0 +1,141 @@
+import type { Button } from '@ohif/core/types';
+
+export const setToolActiveToolbar = {
+  commandName: 'setToolActive',
+  commandOptions: {
+    toolName: 'line',
+  },
+  context: 'MICROSCOPY',
+};
+
+const toolbarButtons: Button[] = [
+  {
+    id: 'MeasurementTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      buttonSection: 'measurementSection',
+      groupId: 'MeasurementTools',
+    },
+  },
+  {
+    id: 'line',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-length',
+      label: 'Line',
+      tooltip: 'Line',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.microscopyTool',
+    },
+  },
+  {
+    id: 'point',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-point',
+      label: 'Point',
+      tooltip: 'Point Tool',
+      commands: {
+        ...setToolActiveToolbar,
+        commandOptions: { toolName: 'point' },
+      },
+      evaluate: 'evaluate.microscopyTool',
+    },
+  },
+  {
+    id: 'polygon',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-polygon',
+      label: 'Polygon',
+      tooltip: 'Polygon Tool',
+      commands: {
+        ...setToolActiveToolbar,
+        commandOptions: { toolName: 'polygon' },
+      },
+      evaluate: 'evaluate.microscopyTool',
+    },
+  },
+  {
+    id: 'circle',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-circle',
+      label: 'Circle',
+      tooltip: 'Circle Tool',
+      commands: {
+        ...setToolActiveToolbar,
+        commandOptions: { toolName: 'circle' },
+      },
+      evaluate: 'evaluate.microscopyTool',
+    },
+  },
+  {
+    id: 'box',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-rectangle',
+      label: 'Box',
+      tooltip: 'Box Tool',
+      commands: {
+        ...setToolActiveToolbar,
+        commandOptions: { toolName: 'box' },
+      },
+      evaluate: 'evaluate.microscopyTool',
+    },
+  },
+  {
+    id: 'freehandpolygon',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-freehand-polygon',
+      label: 'Freehand Polygon',
+      tooltip: 'Freehand Polygon Tool',
+      commands: {
+        ...setToolActiveToolbar,
+        commandOptions: { toolName: 'freehandpolygon' },
+      },
+      evaluate: 'evaluate.microscopyTool',
+    },
+  },
+  {
+    id: 'freehandline',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-freehand-line',
+      label: 'Freehand Line',
+      tooltip: 'Freehand Line Tool',
+      commands: {
+        ...setToolActiveToolbar,
+        commandOptions: { toolName: 'freehandline' },
+      },
+      evaluate: 'evaluate.microscopyTool',
+    },
+  },
+  {
+    id: 'dragPan',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-move',
+      label: 'Pan',
+      commands: {
+        ...setToolActiveToolbar,
+        commandOptions: { toolName: 'dragPan' },
+      },
+      evaluate: 'evaluate.microscopyTool',
+    },
+  },
+  {
+    id: 'TagBrowser',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'dicom-tag-browser',
+      label: 'Dicom Tag Browser',
+      tooltip: 'Dicom Tag Browser',
+      commands: 'openDICOMTagViewer',
+      evaluate: 'evaluate.action',
+    },
+  },
+];
+
+export default toolbarButtons;