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

modes/basic-test-mode/src/toolbarButtons.ts

@@ -1,14 +1,11 @@
 // TODO: torn, can either bake this here; or have to create a whole new button type
 // Only ways that you can pass in a custom React component for render :l
-import {
-  // ListMenu,
-  WindowLevelMenuItem,
-} from '@ohif/ui';
-import { defaults, ToolbarService } from '@ohif/core';
 import type { Button } from '@ohif/core/types';
+import { EVENTS } from '@cornerstonejs/core';
+import { ViewportGridService } from '@ohif/core';
 
+import { defaults } from '@ohif/core';
 const { windowLevelPresets } = defaults;
-const { createButton } = ToolbarService;
 
 /**
  *
@@ -18,18 +15,21 @@ const { createButton } = ToolbarService;
  */
 function _createWwwcPreset(preset, title, subtitle) {
   return {
-    id: preset.toString(),
-    title,
-    subtitle,
-    commands: [
-      {
-        commandName: 'setWindowLevel',
-        commandOptions: {
-          ...windowLevelPresets[preset],
+    id: title,
+    uiType: 'ohif.toolButton',
+    props: {
+      title,
+      subtitle,
+      commands: [
+        {
+          commandName: 'setWindowLevel',
+          commandOptions: {
+            ...windowLevelPresets[preset],
+          },
+          context: 'CORNERSTONE',
         },
-        context: 'CORNERSTONE',
-      },
-    ],
+      ],
+    },
   };
 }
 
@@ -40,92 +40,142 @@ export const setToolActiveToolbar = {
   },
 };
 
+const ReferenceLinesListeners = [
+  {
+    commandName: 'setSourceViewportForReferenceLinesTool',
+    context: 'CORNERSTONE',
+  },
+];
+
 const toolbarButtons: Button[] = [
   {
     id: 'MeasurementTools',
     uiType: 'ohif.toolButtonList',
     props: {
+      buttonSection: 'measurementSection',
       groupId: 'MeasurementTools',
-      // group evaluate to determine which item should move to the top
-      evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
-      primary: createButton({
-        id: 'Length',
-        icon: 'tool-length',
-        label: 'Length',
-        tooltip: 'Length Tool',
-        commands: setToolActiveToolbar,
-        evaluate: 'evaluate.cornerstoneTool',
-      }),
-      secondary: {
-        icon: 'chevron-down',
-        tooltip: 'More Measure Tools',
-      },
-      items: [
-        createButton({
-          id: 'Length',
-          icon: 'tool-length',
-          label: 'Length',
-          tooltip: 'Length Tool',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
-        createButton({
-          id: 'Bidirectional',
-          icon: 'tool-bidirectional',
-          label: 'Bidirectional',
-          tooltip: 'Bidirectional Tool',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
-        createButton({
-          id: 'ArrowAnnotate',
-          icon: 'tool-annotate',
-          label: 'Annotation',
-          tooltip: 'Arrow Annotate',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
-        createButton({
-          id: 'EllipticalROI',
-          icon: 'tool-ellipse',
-          label: 'Ellipse',
-          tooltip: 'Ellipse ROI',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
-        createButton({
-          id: 'CircleROI',
-          icon: 'tool-circle',
-          label: 'Circle',
-          tooltip: 'Circle Tool',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
-        createButton({
-          id: 'PlanarFreehandROI',
-          icon: 'icon-tool-freehand-roi',
-          label: 'Freehand ROI',
-          tooltip: 'Freehand ROI',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
-        createButton({
-          id: 'SplineROI',
-          icon: 'icon-tool-spline-roi',
-          label: 'Spline ROI',
-          tooltip: 'Spline ROI',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
-        createButton({
-          id: 'LivewireContour',
-          icon: 'icon-tool-livewire',
-          label: 'Livewire tool',
-          tooltip: 'Livewire tool',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
-      ],
+    },
+  },
+  {
+    id: 'MoreTools',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      buttonSection: 'moreToolsSection',
+      groupId: 'MoreTools',
+    },
+  },
+  {
+    id: 'WindowLevelGroup',
+    uiType: 'ohif.toolButtonList',
+    props: {
+      groupId: 'WindowLevelGroup',
+      buttonSection: 'windowLevelSection',
+    },
+  },
+
+  // tool defs
+  _createWwwcPreset(1, 'Soft tissue', '400 / 40'),
+  _createWwwcPreset(2, 'Lung', '1500 / -600'),
+  _createWwwcPreset(3, 'Liver', '150 / 90'),
+  _createWwwcPreset(4, 'Bone', '2500 / 480'),
+  _createWwwcPreset(5, 'Brain', '80 / 40'),
+  {
+    id: 'WindowLevel',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-window-level',
+      label: 'Window Level',
+      tooltip: 'Window Level',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'Length',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-length',
+      label: 'Length',
+      tooltip: 'Length Tool',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'Bidirectional',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-bidirectional',
+      label: 'Bidirectional',
+      tooltip: 'Bidirectional Tool',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'ArrowAnnotate',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-annotate',
+      label: 'Annotation',
+      tooltip: 'Arrow Annotate',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'EllipticalROI',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-ellipse',
+      label: 'Ellipse',
+      tooltip: 'Ellipse ROI',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'CircleROI',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-circle',
+      label: 'Circle',
+      tooltip: 'Circle Tool',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'PlanarFreehandROI',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'icon-tool-freehand-roi',
+      label: 'Freehand ROI',
+      tooltip: 'Freehand ROI',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'SplineROI',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'icon-tool-spline-roi',
+      label: 'Spline ROI',
+      tooltip: 'Spline ROI',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'LivewireContour',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'icon-tool-livewire',
+      label: 'Livewire tool',
+      tooltip: 'Livewire tool',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
     },
   },
   {
@@ -134,40 +184,11 @@ const toolbarButtons: Button[] = [
     props: {
       icon: 'tool-zoom',
       label: 'Zoom',
+      tooltip: 'Zoom',
       commands: setToolActiveToolbar,
       evaluate: 'evaluate.cornerstoneTool',
     },
   },
-  // Window Level
-  {
-    id: 'WindowLevel',
-    uiType: 'ohif.toolButtonList',
-    props: {
-      groupId: 'WindowLevel',
-      primary: createButton({
-        id: 'WindowLevel',
-        icon: 'tool-window-level',
-        label: 'Window Level',
-        tooltip: 'Window Level',
-        commands: setToolActiveToolbar,
-        evaluate: 'evaluate.cornerstoneTool',
-      }),
-      secondary: {
-        icon: 'chevron-down',
-        label: 'W/L Manual',
-        tooltip: 'W/L Presets',
-      },
-      renderer: WindowLevelMenuItem,
-      items: [
-        _createWwwcPreset(1, 'Soft tissue', '400 / 40'),
-        _createWwwcPreset(2, 'Lung', '1500 / -600'),
-        _createWwwcPreset(3, 'Liver', '150 / 90'),
-        _createWwwcPreset(4, 'Bone', '2500 / 480'),
-        _createWwwcPreset(5, 'Brain', '80 / 40'),
-      ],
-    },
-  },
-  // Pan...
   {
     id: 'Pan',
     uiType: 'ohif.toolButton',
@@ -175,6 +196,7 @@ const toolbarButtons: Button[] = [
       type: 'tool',
       icon: 'tool-move',
       label: 'Pan',
+      tooltip: 'Pan',
       commands: setToolActiveToolbar,
       evaluate: 'evaluate.cornerstoneTool',
     },
@@ -185,24 +207,24 @@ const toolbarButtons: Button[] = [
     props: {
       icon: 'icon-mpr',
       label: 'MPR',
-      commands: [
-        {
-          commandName: 'toggleHangingProtocol',
-          commandOptions: {
-            protocolId: 'mpr',
-          },
+      tooltip: 'MPR',
+      commands: {
+        commandName: 'toggleHangingProtocol',
+        commandOptions: {
+          protocolId: 'mpr',
         },
-      ],
+      },
       evaluate: 'evaluate.mpr',
     },
   },
   {
     id: 'TrackBallRotate',
-    type: 'ohif.toolButton',
+    uiType: 'ohif.toolButton',
     props: {
       type: 'tool',
       icon: 'tool-3d-rotate',
       label: '3D Rotate',
+      tooltip: '3D Rotate',
       commands: setToolActiveToolbar,
     },
   },
@@ -212,6 +234,7 @@ const toolbarButtons: Button[] = [
     props: {
       icon: 'tool-capture',
       label: 'Capture',
+      tooltip: 'Capture',
       commands: 'showDownloadViewportModal',
       evaluate: [
         'evaluate.action',
@@ -239,6 +262,7 @@ const toolbarButtons: Button[] = [
       type: 'tool',
       icon: 'tool-crosshair',
       label: 'Crosshairs',
+      tooltip: 'Crosshairs',
       commands: {
         commandName: 'setToolActiveToolbar',
         commandOptions: {
@@ -248,6 +272,236 @@ const toolbarButtons: Button[] = [
       evaluate: 'evaluate.cornerstoneTool',
     },
   },
+
+  {
+    id: 'Reset',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-reset',
+      label: 'Reset View',
+      tooltip: 'Reset View',
+      commands: 'resetViewport',
+      evaluate: 'evaluate.action',
+    },
+  },
+  {
+    id: 'rotate-right',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-rotate-right',
+      label: 'Rotate Right',
+      tooltip: 'Rotate +90',
+      commands: 'rotateViewportCW',
+      evaluate: 'evaluate.action',
+    },
+  },
+  {
+    id: 'flipHorizontal',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-flip-horizontal',
+      label: 'Flip Horizontal',
+      tooltip: 'Flip Horizontally',
+      commands: 'flipViewportHorizontal',
+      evaluate: 'evaluate.viewportProperties.toggle',
+    },
+  },
+  {
+    id: 'ImageSliceSync',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'link',
+      label: 'Image Slice Sync',
+      tooltip: 'Enable position synchronization on stack viewports',
+      commands: {
+        commandName: 'toggleSynchronizer',
+        commandOptions: {
+          type: 'imageSlice',
+        },
+      },
+      listeners: {
+        [EVENTS.VIEWPORT_NEW_IMAGE_SET]: {
+          commandName: 'toggleImageSliceSync',
+          commandOptions: { toggledState: true },
+        },
+      },
+      evaluate: 'evaluate.cornerstone.synchronizer',
+    },
+  },
+  {
+    id: 'ReferenceLines',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-referenceLines',
+      label: 'Reference Lines',
+      tooltip: 'Show Reference Lines',
+      commands: 'toggleEnabledDisabledToolbar',
+      listeners: {
+        [ViewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED]: ReferenceLinesListeners,
+        [ViewportGridService.EVENTS.VIEWPORTS_READY]: ReferenceLinesListeners,
+      },
+      evaluate: 'evaluate.cornerstoneTool.toggle',
+    },
+  },
+  {
+    id: 'ImageOverlayViewer',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'toggle-dicom-overlay',
+      label: 'Image Overlay',
+      tooltip: 'Toggle Image Overlay',
+      commands: 'toggleEnabledDisabledToolbar',
+      evaluate: 'evaluate.cornerstoneTool.toggle',
+    },
+  },
+  {
+    id: 'StackScroll',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-stack-scroll',
+      label: 'Stack Scroll',
+      tooltip: 'Stack Scroll',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'invert',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-invert',
+      label: 'Invert',
+      tooltip: 'Invert Colors',
+      commands: 'invertViewport',
+      evaluate: 'evaluate.viewportProperties.toggle',
+    },
+  },
+  {
+    id: 'Probe',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-probe',
+      label: 'Probe',
+      tooltip: 'Probe',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'Cine',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-cine',
+      label: 'Cine',
+      tooltip: 'Cine',
+      commands: 'toggleCine',
+      evaluate: 'evaluate.cine',
+    },
+  },
+  {
+    id: 'Angle',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-angle',
+      label: 'Angle',
+      tooltip: 'Angle',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'CobbAngle',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'icon-tool-cobb-angle',
+      label: 'Cobb Angle',
+      tooltip: 'Cobb Angle',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'Magnify',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-magnify',
+      label: 'Zoom-in',
+      tooltip: 'Zoom-in',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'RectangleROI',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-rectangle',
+      label: 'Rectangle',
+      tooltip: 'Rectangle',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'CalibrationLine',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'tool-calibration',
+      label: 'Calibration',
+      tooltip: 'Calibration Line',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
+  {
+    id: 'TagBrowser',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'dicom-tag-browser',
+      label: 'Dicom Tag Browser',
+      tooltip: 'Dicom Tag Browser',
+      commands: 'openDICOMTagViewer',
+    },
+  },
+  {
+    id: 'AdvancedMagnify',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'icon-tool-loupe',
+      label: 'Magnify Probe',
+      tooltip: 'Magnify Probe',
+      commands: 'toggleActiveDisabledToolbar',
+      evaluate: 'evaluate.cornerstoneTool.toggle.ifStrictlyDisabled',
+    },
+  },
+  {
+    id: 'UltrasoundDirectionalTool',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'icon-tool-ultrasound-bidirectional',
+      label: 'Ultrasound Directional',
+      tooltip: 'Ultrasound Directional',
+      commands: setToolActiveToolbar,
+      evaluate: [
+        'evaluate.cornerstoneTool',
+        {
+          name: 'evaluate.modality.supported',
+          supportedModalities: ['US'],
+        },
+      ],
+    },
+  },
+  {
+    id: 'WindowLevelRegion',
+    uiType: 'ohif.toolButton',
+    props: {
+      icon: 'icon-tool-window-region',
+      label: 'Window Level Region',
+      tooltip: 'Window Level Region',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
 ];
 
-export default toolbarButtons;
+export default toolbarButtons;