feat(ui-next): Adds toggle state for ToolButton and Crosshair example (#5914)

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

modes/basic/src/initToolGroups.ts

@@ -239,6 +239,9 @@ function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
     disabled: [
       {
         toolName: toolNames.Crosshairs,
+        bindings: [
+          { mouseButton: Enums.MouseBindings.Primary, modifierKey: Enums.KeyboardBindings.Shift },
+        ],
         configuration: {
           viewportIndicators: true,
           viewportIndicatorsConfig: {
@@ -246,7 +249,6 @@ function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
             xOffset: 0.95,
             yOffset: 0.05,
           },
-          disableOnPassive: true,
           autoPan: {
             enabled: false,
             panSize: 10,

modes/basic/src/toolbarButtons.ts

@@ -647,15 +647,18 @@ const toolbarButtons: Button[] = [
       type: 'tool',
       icon: 'tool-crosshair',
       label: i18n.t('Buttons:Crosshairs'),
+      tooltip: i18n.t('Buttons:Click to toggle on or off'),
       commands: {
-        commandName: 'setToolActiveToolbar',
+        commandName: 'toggleActiveDisabledToolbar',
         commandOptions: {
           toolGroupIds: ['mpr'],
         },
       },
       evaluate: {
-        name: 'evaluate.cornerstoneTool',
+        name: 'evaluate.cornerstoneTool.toggleWithModifier',
         disabledText: i18n.t('Buttons:Select an MPR viewport to enable this tool'),
+        toggledOnIcon: 'tool-crosshair-checked',
+        defaultIcon: 'tool-crosshair',
       },
     },
   },