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

extensions/cornerstone/package.json

@@ -38,7 +38,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^3.0.1",
+    "@cornerstonejs/dicom-image-loader": "^3.0.4",
     "@ohif/core": "3.10.0-beta.116",
     "@ohif/ui": "3.10.0-beta.116",
     "dcmjs": "*",
@@ -51,10 +51,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.0.1",
-    "@cornerstonejs/core": "^3.0.1",
+    "@cornerstonejs/adapters": "^3.0.4",
+    "@cornerstonejs/core": "^3.0.4",
     "@cornerstonejs/polymorphic-segmentation": "^3.0.1",
-    "@cornerstonejs/tools": "^3.0.1",
+    "@cornerstonejs/tools": "^3.0.4",
     "@itk-wasm/morphological-contour-interpolation": "1.1.0",
     "@kitware/vtk.js": "32.1.1",
     "html2canvas": "^1.4.1",

extensions/cornerstone/src/commandsModule.ts

@@ -388,7 +388,12 @@ function commandsModule({
     arrowTextCallback: ({ callback }) => {
       const labelConfig = customizationService.getCustomization('measurementLabels');
       const renderContent = customizationService.getCustomization('ui.labellingComponent');
-      callInputDialogAutoComplete(uiDialogService, callback, {}, labelConfig, renderContent);
+
+      callInputDialogAutoComplete({
+        uiDialogService,
+        labelConfig,
+        renderContent,
+      });
     },
     toggleCine: () => {
       const { viewports } = viewportGridService.getState();

extensions/cornerstone/src/components/WindowLevelActionMenu/getWindowLevelActionMenu.tsx

@@ -23,7 +23,6 @@ export function getWindowLevelActionMenu({
   const WindowLevelActionMenu = customizationService.getCustomization(
     'viewportActionMenu.windowLevelActionMenu'
   );
-  console.debug('🚀 ~ WindowLevelActionMenu:', WindowLevelActionMenu);
   const displaySetPresets = displaySets
     .filter(displaySet => presets[displaySet.Modality])
     .map(displaySet => {

extensions/cornerstone/src/getPanelModule.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Toolbox } from '@ohif/ui-next';
+import { Toolbox } from '@ohif/extension-default';
 import PanelSegmentation from './panels/PanelSegmentation';
 import ActiveViewportWindowLevel from './components/ActiveViewportWindowLevel';
 import PanelMeasurement from './panels/PanelMeasurement';
@@ -36,14 +36,8 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager }:
     return (
       <>
         <Toolbox
-          commandsManager={commandsManager}
-          servicesManager={servicesManager}
-          extensionManager={extensionManager}
           buttonSectionId="segmentationToolbox"
           title="Segmentation Tools"
-          configuration={{
-            ...configuration,
-          }}
         />
         <PanelSegmentation
           commandsManager={commandsManager}

extensions/cornerstone/src/getToolbarModule.tsx

@@ -87,61 +87,10 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
 
         return {
           disabled: false,
-          // Todo: isActive right now is used for nested buttons where the primary
-          // button needs to be fully rounded (vs partial rounded) when active
-          // otherwise it does not have any other use
           isActive: isPrimaryActive,
         };
       },
     },
-    {
-      name: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
-      evaluate: ({ viewportId, button, itemId }) => {
-        const { items } = button.props;
-
-        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-
-        if (!toolGroup) {
-          return {
-            primary: button.props.primary,
-            items,
-          };
-        }
-
-        const activeToolName = toolGroup.getActivePrimaryMouseButtonTool();
-
-        // check if the active toolName is part of the items then we need
-        // to move it to the primary button
-        const activeToolIndex = items.findIndex(item => {
-          const toolName = toolbarService.getToolNameForButton(item);
-          return toolName === activeToolName;
-        });
-
-        // if there is an active tool in the items dropdown bound to the primary mouse/touch
-        // we should show that no matter what
-        if (activeToolIndex > -1) {
-          return {
-            primary: items[activeToolIndex],
-            items,
-          };
-        }
-
-        if (!itemId) {
-          return {
-            primary: button.props.primary,
-            items,
-          };
-        }
-
-        // other wise we can move the clicked tool to the primary button
-        const clickedItemProps = items.find(item => item.id === itemId || item.itemId === itemId);
-
-        return {
-          primary: clickedItemProps,
-          items,
-        };
-      },
-    },
     {
       name: 'evaluate.action',
       evaluate: () => {

extensions/cornerstone/src/hooks/useSegmentations.ts

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import debounce from 'lodash.debounce';
 import { roundNumber } from '@ohif/core/src/utils';
 import { SegmentationData } from '../services/SegmentationService/SegmentationService';
+import { useSystem } from '@ohif/core';
 
 function mapSegmentationToDisplay(segmentation, customizationService) {
   const { label, segments } = segmentation;
@@ -83,11 +84,12 @@ function mapSegmentationToDisplay(segmentation, customizationService) {
  * @param options.debounceTime - Debounce time in milliseconds for updates.
  * @returns An array of segmentation data.
  */
-export function useSegmentations({
-  servicesManager,
-  subscribeToDataModified = false,
-  debounceTime = 0,
-}: withAppTypes<{ debounceTime?: number }>): SegmentationData[] {
+export function useSegmentations(options: {
+  subscribeToDataModified?: boolean;
+  debounceTime?: number;
+}): SegmentationData[] {
+  const { subscribeToDataModified = false, debounceTime = 0 } = options || {};
+  const { servicesManager } = useSystem();
   const { segmentationService, customizationService } = servicesManager.services;
 
   const [segmentations, setSegmentations] = useState<SegmentationData[]>([]);