ui(components): migrates to new toolbar ui components and Numeric for Input InputRange and InputDoubleRange (#4728)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

modes/segmentation/src/segmentationButtons.ts

@@ -3,9 +3,10 @@ import type { Button } from '@ohif/core/types';
 const toolbarButtons: Button[] = [
   {
     id: 'BrushTools',
-    uiType: 'ohif.buttonGroup',
+    uiType: 'ohif.toolBoxButtonGroup',
     props: {
       groupId: 'BrushTools',
+      evaluate: 'evaluate.cornerstone.hasSegmentation',
       items: [
         {
           id: 'Brush',
@@ -172,14 +173,16 @@ const toolbarButtons: Button[] = [
   },
   {
     id: 'Shapes',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolBoxButton',
     props: {
+      id: 'Shapes',
+      icon: 'icon-tool-shape',
       label: 'Shapes',
       evaluate: {
         name: 'evaluate.cornerstone.segmentation',
         toolNames: ['CircleScissor', 'SphereScissor', 'RectangleScissor'],
+        disabledText: 'Create new segmentation to enable shapes tool.',
       },
-      icon: 'icon-tool-shape',
       options: [
         {
           name: 'Shape',

modes/segmentation/src/toolbarButtons.ts

@@ -20,7 +20,7 @@ export const setToolActiveToolbar = {
 const toolbarButtons: Button[] = [
   {
     id: 'Zoom',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       icon: 'tool-zoom',
       label: 'Zoom',
@@ -30,7 +30,7 @@ const toolbarButtons: Button[] = [
   },
   {
     id: 'WindowLevel',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       icon: 'tool-window-level',
       label: 'Window Level',
@@ -40,7 +40,7 @@ const toolbarButtons: Button[] = [
   },
   {
     id: 'Pan',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       icon: 'tool-move',
       label: 'Pan',
@@ -50,7 +50,7 @@ const toolbarButtons: Button[] = [
   },
   {
     id: 'TrackballRotate',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       type: 'tool',
       icon: 'tool-3d-rotate',
@@ -64,7 +64,7 @@ const toolbarButtons: Button[] = [
   },
   {
     id: 'Capture',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       icon: 'tool-capture',
       label: 'Capture',
@@ -90,7 +90,7 @@ const toolbarButtons: Button[] = [
   },
   {
     id: 'Crosshairs',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       icon: 'tool-crosshair',
       label: 'Crosshairs',
@@ -108,7 +108,7 @@ const toolbarButtons: Button[] = [
   },
   {
     id: 'MoreTools',
-    uiType: 'ohif.splitButton',
+    uiType: 'ohif.toolButtonList',
     props: {
       groupId: 'MoreTools',
       evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
@@ -192,14 +192,6 @@ const toolbarButtons: Button[] = [
           commands: 'invertViewport',
           evaluate: 'evaluate.viewportProperties.toggle',
         }),
-        createButton({
-          id: 'Probe',
-          icon: 'tool-probe',
-          label: 'Probe',
-          tooltip: 'Probe',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
         createButton({
           id: 'Cine',
           icon: 'tool-cine',
@@ -214,14 +206,6 @@ const toolbarButtons: Button[] = [
             },
           ],
         }),
-        createButton({
-          id: 'Angle',
-          icon: 'tool-angle',
-          label: 'Angle',
-          tooltip: 'Angle',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
         createButton({
           id: 'Magnify',
           icon: 'tool-magnify',
@@ -230,22 +214,6 @@ const toolbarButtons: Button[] = [
           commands: setToolActiveToolbar,
           evaluate: 'evaluate.cornerstoneTool',
         }),
-        createButton({
-          id: 'RectangleROI',
-          icon: 'tool-rectangle',
-          label: 'Rectangle',
-          tooltip: 'Rectangle',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
-        createButton({
-          id: 'CalibrationLine',
-          icon: 'tool-calibration',
-          label: 'Calibration',
-          tooltip: 'Calibration Line',
-          commands: setToolActiveToolbar,
-          evaluate: 'evaluate.cornerstoneTool',
-        }),
         createButton({
           id: 'TagBrowser',
           icon: 'dicom-tag-browser',