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

extensions/cornerstone/src/commandsModule.ts

@@ -1041,6 +1041,26 @@ function commandsModule({
         }
       }
     },
+    togglePassiveDisabledToolbar({ value, itemId, toolGroupIds = ['mpr'] }) {
+      const toolName = itemId || value;
+
+      toolGroupIds.forEach(toolGroupId => {
+        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
+        if (!toolGroup || !toolGroup.hasTool(toolName)) {
+          return;
+        }
+
+        const currentMode = toolGroup.getToolOptions(toolName).mode;
+        const isOn = currentMode === Enums.ToolModes.Passive ||
+                     currentMode === Enums.ToolModes.Enabled;
+
+        if (isOn) {
+          toolGroup.setToolDisabled(toolName);
+        } else {
+          toolGroup.setToolPassive(toolName);
+        }
+      });
+    },
     setToolActiveToolbar: ({ value, itemId, toolName, toolGroupIds = [], bindings }) => {
       // Sometimes it is passed as value (tools with options), sometimes as itemId (toolbar buttons)
       toolName = toolName || itemId || value;
@@ -2639,6 +2659,9 @@ function commandsModule({
     toggleActiveDisabledToolbar: {
       commandFn: actions.toggleActiveDisabledToolbar,
     },
+    togglePassiveDisabledToolbar: {
+      commandFn: actions.togglePassiveDisabledToolbar,
+    },
     updateStoredPositionPresentation: {
       commandFn: actions.updateStoredPositionPresentation,
     },

extensions/cornerstone/src/getToolbarModule.tsx

@@ -1,5 +1,6 @@
 import { Enums } from '@cornerstonejs/tools';
 import i18n from '@ohif/i18n';
+import { utils as coreUtils } from '@ohif/core';
 import { utils } from '@ohif/ui-next';
 import { ViewportDataOverlayMenuWrapper } from './components/ViewportDataOverlaySettingMenu/ViewportDataOverlayMenuWrapper';
 import { ViewportOrientationMenuWrapper } from './components/ViewportOrientationMenu/ViewportOrientationMenuWrapper';
@@ -13,6 +14,8 @@ import TrackingStatus from './components/TrackingStatus/TrackingStatus';
 import ViewportColorbarsContainer from './components/ViewportColorbar';
 import AdvancedRenderingControls from './components/AdvancedRenderingControls';
 
+const { ModifierKeyCodeToName } = coreUtils;
+
 const getDisabledState = (disabledText?: string) => ({
   disabled: true,
   disabledText: disabledText ?? i18n.t('Buttons:Not available on the current viewport'),
@@ -429,6 +432,50 @@ export default function getToolbarModule({ servicesManager, extensionManager }:
         };
       },
     },
+    {
+      name: 'evaluate.cornerstoneTool.crosshairToggle',
+      evaluate: ({ viewportId, button, disabledText }) => {
+        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+        if (!toolGroup) {
+          return;
+        }
+
+        const toolName = toolbarService.getToolNameForButton(button);
+        if (!toolGroup.hasTool(toolName)) {
+          return getDisabledState(disabledText);
+        }
+
+        const currentMode = toolGroup.getToolOptions(toolName).mode;
+        // Matches the isOn check in toggleCrosshairsToolbar (commandsModule.ts).
+        // Both must agree on which modes count as "on" — this evaluator uses it to show the
+        // toggled button state, the command uses it to decide whether to disable or enable.
+        // If adding Active mode support (e.g. modifier key), update both.
+        const isOn = currentMode === Enums.ToolModes.Passive ||
+                     currentMode === Enums.ToolModes.Enabled;
+
+        if (isOn) {
+          const toolInstance = toolGroup.getToolInstance(toolName);
+          const jumpOnClick = toolInstance?.configuration?.jumpOnClick;
+          if (jumpOnClick?.enabled && jumpOnClick.modifierKey != null) {
+            const modifierName = ModifierKeyCodeToName[jumpOnClick.modifierKey] || 'Modifier';
+            return {
+              disabled: false,
+              isActive: false,
+              isToggled: true,
+              icon: 'tool-crosshair-checked',
+              tooltip: `Press ${modifierName} + Click to jump`,
+            };
+          }
+        }
+
+        return {
+          disabled: false,
+          isActive: false,
+          isToggled: isOn,
+          icon: isOn ? 'tool-crosshair-checked' : 'tool-crosshair',
+        };
+      },
+    },
     {
       name: 'evaluate.action',
       evaluate: () => {

extensions/default/src/customizations/userPreferencesCustomization.tsx

@@ -18,8 +18,16 @@ interface HotkeyDefinitions {
 }
 
 function UserPreferencesModalDefault({ hide }: { hide: () => void }) {
-  const { hotkeysManager } = useSystem();
+  const { hotkeysManager, servicesManager } = useSystem();
   const { t, i18n: i18nextInstance } = useTranslation('UserPreferencesModal');
+  const { customizationService, toolbarService, viewportGridService } =
+    servicesManager.services;
+  const rawMouseShortcuts =
+    customizationService.getCustomization('ohif.hotkeyBindings.mouseShortcuts') || [];
+  const initialMouseShortcuts = rawMouseShortcuts.map(shortcut => ({
+    ...shortcut,
+    keys: typeof shortcut.keys === 'function' ? shortcut.keys() : shortcut.keys,
+  }));
 
   const { hotkeyDefinitions = {}, hotkeyDefaults = {} } = hotkeysManager;
 
@@ -54,6 +62,7 @@ function UserPreferencesModalDefault({ hide }: { hide: () => void }) {
   const [state, setState] = useState({
     hotkeyDefinitions: initialHotkeyDefinitions,
     languageValue: currentLanguage.value,
+    mouseShortcuts: initialMouseShortcuts,
   });
 
   const onLanguageChangeHandler = (value: string) => {
@@ -73,11 +82,21 @@ function UserPreferencesModalDefault({ hide }: { hide: () => void }) {
     }));
   };
 
+  const onMouseShortcutChangeHandler = (index: number, newKeys: string) => {
+    setState(prev => ({
+      ...prev,
+      mouseShortcuts: prev.mouseShortcuts.map((shortcut, i) =>
+        i === index ? { ...shortcut, keys: newKeys } : shortcut
+      ),
+    }));
+  };
+
   const onResetHandler = () => {
     setState(state => ({
       ...state,
       languageValue: defaultLanguage.value,
       hotkeyDefinitions: resolvedHotkeyDefaults,
+      mouseShortcuts: initialMouseShortcuts,
     }));
 
     hotkeysManager.restoreDefaultBindings();
@@ -152,6 +171,23 @@ function UserPreferencesModalDefault({ hide }: { hide: () => void }) {
           </Select>
         </div>
 
+        {state.mouseShortcuts.length > 0 && (
+          <>
+            <UserPreferencesModal.SubHeading>{t('Mouse Shortcuts')}</UserPreferencesModal.SubHeading>
+            <UserPreferencesModal.HotkeysGrid>
+              {state.mouseShortcuts.map((shortcut, index) => (
+                <UserPreferencesModal.MouseShortcut
+                  key={index}
+                  label={t(shortcut.label)}
+                  value={shortcut.keys}
+                  onChange={newKeys => onMouseShortcutChangeHandler(index, newKeys)}
+                  hotkeys={hotkeysModule}
+                />
+              ))}
+            </UserPreferencesModal.HotkeysGrid>
+          </>
+        )}
+
         <UserPreferencesModal.SubHeading>{t('Hotkeys')}</UserPreferencesModal.SubHeading>
         <UserPreferencesModal.HotkeysGrid>
           {Object.entries(state.hotkeyDefinitions).map(([id, definition]) => (
@@ -186,11 +222,20 @@ function UserPreferencesModalDefault({ hide }: { hide: () => void }) {
             onClick={() => {
               if (state.languageValue !== currentLanguage.value) {
                 i18n.changeLanguage(state.languageValue);
-                // Force page reload after language change to ensure all translations are applied
                 window.location.reload();
-                return; // Exit early since we're reloading
+                return;
               }
               hotkeysManager.setHotkeys(state.hotkeyDefinitions);
+
+              for (const shortcut of state.mouseShortcuts) {
+                shortcut.onChange?.(shortcut.keys);
+              }
+
+              if (state.mouseShortcuts.length > 0) {
+                const viewportId = viewportGridService.getActiveViewportId();
+                toolbarService.refreshToolbarState({ viewportId });
+              }
+
               hotkeysModule.stopRecord();
               hotkeysModule.unpause();
               hide();

modes/basic/src/index.tsx

@@ -146,6 +146,35 @@ export function onModeEnter({
   // Init Default and SR ToolGroups
   initToolGroups(extensionManager, toolGroupService, commandsManager);
 
+  customizationService.setCustomizations({
+    'ohif.hotkeyBindings.mouseShortcuts': [
+      {
+        label: 'Crosshairs Jump to Click',
+        keys: () => {
+          const config = toolGroupService.getToolConfiguration('mpr', 'Crosshairs');
+          const code = config?.jumpOnClick?.modifierKey;
+          return code != null
+            ? utils.ModifierKeyCodeToName[code]?.toLowerCase()
+            : undefined;
+        },
+        onChange: (newKeys: string) => {
+          const config = toolGroupService.getToolConfiguration('mpr', 'Crosshairs');
+          if (!config) {
+            return;
+          }
+          toolGroupService.setToolConfiguration('mpr', 'Crosshairs', {
+            ...config,
+            jumpOnClick: {
+              ...config.jumpOnClick,
+              modifierKey:
+                utils.ModifierKeyNameToCode[newKeys] ?? config.jumpOnClick?.modifierKey,
+            },
+          });
+        },
+      },
+    ],
+  });
+
   toolbarService.register(this.toolbarButtons);
 
   for (const [key, section] of Object.entries(this.toolbarSections)) {

modes/basic/src/initToolGroups.ts

@@ -246,11 +246,15 @@ function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
             xOffset: 0.95,
             yOffset: 0.05,
           },
-          disableOnPassive: true,
+          disableOnPassive: false,
           autoPan: {
             enabled: false,
             panSize: 10,
           },
+          jumpOnClick: {
+            enabled: true,
+            modifierKey: Enums.KeyboardBindings.Ctrl,
+          },
           getReferenceLineColor: viewportId => {
             const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
             const viewportOptions = viewportInfo?.viewportOptions;

modes/basic/src/toolbarButtons.ts

@@ -647,14 +647,15 @@ 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: 'togglePassiveDisabledToolbar',
         commandOptions: {
           toolGroupIds: ['mpr'],
         },
       },
       evaluate: {
-        name: 'evaluate.cornerstoneTool',
+        name: 'evaluate.cornerstoneTool.crosshairToggle',
         disabledText: i18n.t('Buttons:Select an MPR viewport to enable this tool'),
       },
     },

platform/core/src/utils/index.ts

@@ -49,6 +49,7 @@ import { structuredCloneWithFunctions } from './structuredCloneWithFunctions';
 import { buildButtonCommands } from './buildButtonCommands';
 
 import { downloadBlob, downloadUrl, downloadCsv, downloadDicom } from './downloadBlob';
+import { ModifierKeyCodeToName, ModifierKeyNameToCode } from './modifierKeyUtils';
 
 // Commented out unused functionality.
 // Need to implement new mechanism for derived displaySets using the displaySetManager.
@@ -105,6 +106,8 @@ const utils = {
   downloadUrl,
   downloadCsv,
   downloadDicom,
+  ModifierKeyCodeToName,
+  ModifierKeyNameToCode,
 };
 
 export {
@@ -147,6 +150,8 @@ export {
   downloadUrl,
   downloadCsv,
   downloadDicom,
+  ModifierKeyCodeToName,
+  ModifierKeyNameToCode,
 };
 
 export default utils;

platform/core/src/utils/modifierKeyUtils.ts

@@ -0,0 +1,26 @@
+/**
+ * Bidirectional mapping between modifier-key names and their numeric key-code
+ * values.  These values mirror the `KeyboardBindings` enum from
+ * `@cornerstonejs/tools` (packages/tools/src/enums/ToolBindings.ts).
+ *
+ * @ohif/core cannot depend on @cornerstonejs/tools directly, so the canonical
+ * values are duplicated here.  If KeyboardBindings ever changes, update this
+ * file to match.
+ */
+
+/** Modifier key-code → display name (e.g. 17 → 'Ctrl') */
+const ModifierKeyCodeToName: Record<number, string> = {
+  16: 'Shift',
+  17: 'Ctrl',
+  18: 'Alt',
+  91: 'Cmd',
+};
+
+/** Lowercase key name → modifier key-code (e.g. 'ctrl' → 17) */
+const ModifierKeyNameToCode: Record<string, number> = Object.fromEntries(
+  Object.entries(ModifierKeyCodeToName).map(([code, name]) => [name.toLowerCase(), Number(code)])
+);
+// 'cmd' → 91 but preferences store 'meta' for the Meta/Cmd key
+ModifierKeyNameToCode.meta = ModifierKeyNameToCode.cmd;
+
+export { ModifierKeyCodeToName, ModifierKeyNameToCode };

platform/ui-next/src/components/Icons/Icons.tsx

@@ -99,6 +99,7 @@ import {
   ToolCobbAngle,
   ToolCreateThreshold,
   ToolCrosshair,
+  ToolCrosshairChecked,
   ToolDicomTagBrowser,
   ToolFlipHorizontal,
   ToolFreehandPolygon,
@@ -436,6 +437,7 @@ export const Icons = {
   ToolCobbAngle,
   ToolCreateThreshold,
   ToolCrosshair,
+  ToolCrosshairChecked,
   ToolDicomTagBrowser,
   ToolFlipHorizontal,
   ToolFreehandPolygon,
@@ -703,6 +705,7 @@ export const Icons = {
   'tool-cobb-angle': (props: IconProps) => ToolCobbAngle(props),
   'tool-create-threshold': (props: IconProps) => ToolCreateThreshold(props),
   'tool-crosshair': (props: IconProps) => ToolCrosshair(props),
+  'tool-crosshair-checked': (props: IconProps) => ToolCrosshairChecked(props),
   'dicom-tag-browser': (props: IconProps) => ToolDicomTagBrowser(props),
   'tool-flip-horizontal': (props: IconProps) => ToolFlipHorizontal(props),
   'tool-freehand-polygon': (props: IconProps) => ToolFreehandPolygon(props),