@ohif/app 3.8.0-beta.63 → 3.8.0-beta.65

package/dist/{963.bundle.874395d7b2d80f9e5831.js → 701.bundle.bc40f1a7d5d6b1a4dd38.js}

@@ -1,7 +1,7 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[963],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[701],{
 
-/***/ 34963:
+/***/ 20701:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -39,8 +39,8 @@ var react = __webpack_require__(41766);
 var esm = __webpack_require__(50719);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 16 modules
 var dist_esm = __webpack_require__(20767);
-// EXTERNAL MODULE: ../../core/src/index.ts + 66 modules
-var src = __webpack_require__(14283);
+// EXTERNAL MODULE: ../../core/src/index.ts + 67 modules
+var src = __webpack_require__(78198);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/streaming-image-volume-loader/dist/esm/index.js + 13 modules
 var streaming_image_volume_loader_dist_esm = __webpack_require__(23722);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js
@@ -119,8 +119,8 @@ function destroy() {
   }
   webWorkers.length = 0;
 }
-// EXTERNAL MODULE: ../../ui/src/index.js + 489 modules
-var ui_src = __webpack_require__(6804);
+// EXTERNAL MODULE: ../../ui/src/index.js + 497 modules
+var ui_src = __webpack_require__(58046);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/callInputDialog.tsx
 
 
@@ -3563,7 +3563,6 @@ function imageRenderedListener(evt) {
 
 
 
-
 // TODO: Cypress tests are currently grabbing this from the window?
 window.cornerstone = esm;
 window.cornerstoneTools = dist_esm;
@@ -3574,7 +3573,6 @@ async function init({
   servicesManager,
   commandsManager,
   extensionManager,
-  configuration,
   appConfig
 }) {
   // Note: this should run first before initializing the cornerstone
@@ -3623,12 +3621,14 @@ async function init({
     cineService,
     cornerstoneViewportService,
     hangingProtocolService,
-    toolGroupService,
     toolbarService,
     viewportGridService,
     stateSyncService,
-    syncGroupService
+    segmentationService
   } = servicesManager.services;
+  toolbarService.registerEventForToolbarUpdate(cornerstoneViewportService, [cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED]);
+  toolbarService.registerEventForToolbarUpdate(segmentationService, [segmentationService.EVENTS.SEGMENTATION_ADDED, segmentationService.EVENTS.SEGMENTATION_REMOVED, segmentationService.EVENTS.SEGMENTATION_UPDATED]);
+  toolbarService.registerEventForToolbarUpdate(esm.eventTarget, [dist_esm.Enums.Events.TOOL_ACTIVATED]);
   window.services = servicesManager.services;
   window.extensionManager = extensionManager;
   window.commandsManager = commandsManager;
@@ -3732,52 +3732,6 @@ async function init({
     commandsManager
   });
 
-  /**
-   * When a viewport gets a new display set, this call will go through all the
-   * active tools in the toolbar, and call any commands registered in the
-   * toolbar service with a callback to re-enable on displaying the viewport.
-   */
-  const toolbarEventListener = evt => {
-    const {
-      element
-    } = evt.detail;
-    const activeTools = toolbarService.getActiveTools();
-    activeTools.forEach(tool => {
-      const toolData = toolbarService.getNestedButton(tool);
-      const commands = toolData?.listeners?.[evt.type];
-      commandsManager.run(commands, {
-        element,
-        evt
-      });
-    });
-  };
-
-  /** Listens for active viewport events and fires the toolbar listeners */
-  const activeViewportEventListener = evt => {
-    const {
-      viewportId
-    } = evt;
-    const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-    const activeTools = toolbarService.getActiveTools();
-    activeTools.forEach(tool => {
-      if (!toolGroup?._toolInstances?.[tool]) {
-        return;
-      }
-
-      // check if tool is active on the new viewport
-      const toolEnabled = toolGroup._toolInstances[tool].mode === dist_esm.Enums.ToolModes.Enabled;
-      if (!toolEnabled) {
-        return;
-      }
-      const button = toolbarService.getNestedButton(tool);
-      const commands = button?.listeners?.[evt.type];
-      commandsManager.run(commands, {
-        viewportId,
-        evt
-      });
-    });
-  };
-
   /**
    * Runs error handler for failed requests.
    * @param event
@@ -3788,27 +3742,6 @@ async function init({
     const handler = src/* errorHandler */.r_.getHTTPErrorHandler();
     handler(detail.error);
   };
-  const resetCrosshairs = evt => {
-    const {
-      element
-    } = evt.detail;
-    const {
-      viewportId,
-      renderingEngineId
-    } = esm.getEnabledElement(element);
-    const toolGroup = dist_esm.ToolGroupManager.getToolGroupForViewport(viewportId, renderingEngineId);
-    if (!toolGroup || !toolGroup._toolInstances?.['Crosshairs']) {
-      return;
-    }
-    const mode = toolGroup._toolInstances['Crosshairs'].mode;
-    if (mode === dist_esm.Enums.ToolModes.Active) {
-      toolGroup.setToolActive('Crosshairs');
-    } else if (mode === dist_esm.Enums.ToolModes.Passive) {
-      toolGroup.setToolPassive('Crosshairs');
-    } else if (mode === dist_esm.Enums.ToolModes.Enabled) {
-      toolGroup.setToolEnabled('Crosshairs');
-    }
-  };
   esm.eventTarget.addEventListener(esm.EVENTS.STACK_VIEWPORT_NEW_STACK, evt => {
     const {
       element
@@ -3821,18 +3754,30 @@ async function init({
     const {
       element
     } = evt.detail;
-    element.addEventListener(esm.EVENTS.CAMERA_RESET, resetCrosshairs);
-    esm.eventTarget.addEventListener(esm.EVENTS.STACK_VIEWPORT_NEW_STACK, toolbarEventListener);
+    element.addEventListener(esm.EVENTS.CAMERA_RESET, evt => {
+      const {
+        element
+      } = evt.detail;
+      const {
+        viewportId
+      } = (0,esm.getEnabledElement)(element);
+      commandsManager.runCommand('resetCrosshairs', {
+        viewportId
+      });
+    });
+
+    // eventTarget.addEventListener(EVENTS.STACK_VIEWPORT_NEW_STACK, toolbarEventListener);
+
     initViewTiming({
-      element,
-      eventTarget: esm.eventTarget
+      element
     });
   }
   function elementDisabledHandler(evt) {
     const {
       element
     } = evt.detail;
-    element.removeEventListener(esm.EVENTS.CAMERA_RESET, resetCrosshairs);
+
+    // element.removeEventListener(EVENTS.CAMERA_RESET, resetCrosshairs);
 
     // TODO - consider removing the callback when all elements are gone
     // eventTarget.removeEventListener(
@@ -3842,7 +3787,11 @@ async function init({
   }
   esm.eventTarget.addEventListener(esm.EVENTS.ELEMENT_ENABLED, elementEnabledHandler.bind(null));
   esm.eventTarget.addEventListener(esm.EVENTS.ELEMENT_DISABLED, elementDisabledHandler.bind(null));
-  viewportGridService.subscribe(viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED, activeViewportEventListener);
+
+  // viewportGridService.subscribe(
+  //   viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED,
+  //   activeViewportEventListener
+  // );
 }
 function CPUModal() {
   return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("p", null, "Your computer does not have enough GPU power to support the default GPU rendering mode. OHIF has switched to CPU rendering mode. Please note that CPU rendering does not support all features such as Volume Rendering, Multiplanar Reconstruction, and Segmentation Overlays."));
@@ -4699,7 +4648,7 @@ const CornerstoneViewportDownloadForm = ({
 
     // add the viewport to the toolGroup
     toolGroup.addViewport(downloadViewportId, renderingEngineId);
-    Object.keys(toolGroup._toolInstances).forEach(toolName => {
+    Object.keys(toolGroup.getToolInstances()).forEach(toolName => {
       // make all tools Enabled so that they can not be interacted with
       // in the download viewport
       if (toggle && toolName !== 'Crosshairs') {
@@ -4745,21 +4694,31 @@ CornerstoneViewportDownloadForm.propTypes = {
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/imageSliceSync/toggleImageSliceSync.ts
 const IMAGE_SLICE_SYNC_NAME = 'IMAGE_SLICE_SYNC';
 function toggleImageSliceSync({
-  toggledState,
   servicesManager,
-  viewports: providedViewports
+  viewports: providedViewports,
+  syncId
 }) {
-  if (!toggledState) {
-    return disableSync(IMAGE_SLICE_SYNC_NAME, servicesManager);
-  }
   const {
     syncGroupService,
     viewportGridService,
     displaySetService,
     cornerstoneViewportService
   } = servicesManager.services;
+  syncId ||= IMAGE_SLICE_SYNC_NAME;
   const viewports = providedViewports || getReconstructableStackViewports(viewportGridService, displaySetService);
 
+  // Todo: right now we don't have a proper way to define specific
+  // viewports to add to synchronizers, and right now it is global or not
+  // after we do that, we should do fine grained control of the synchronizers
+  const someViewportHasSync = viewports.some(viewport => {
+    const syncStates = syncGroupService.getSynchronizersForViewport(viewport.viewportOptions.viewportId);
+    const imageSync = syncStates.find(syncState => syncState.id === syncId);
+    return !!imageSync;
+  });
+  if (someViewportHasSync) {
+    return disableSync(syncId, servicesManager);
+  }
+
   // create synchronization group and add the viewports to it.
   viewports.forEach(gridViewport => {
     const {
@@ -4770,8 +4729,8 @@ function toggleImageSliceSync({
       return;
     }
     syncGroupService.addViewportToSyncGroup(viewportId, viewport.getRenderingEngine().id, {
-      type: 'stackimage',
-      id: IMAGE_SLICE_SYNC_NAME,
+      type: 'imageSlice',
+      id: syncId,
       source: true,
       target: true
     });
@@ -4826,6 +4785,95 @@ function getReconstructableStackViewports(viewportGridService, displaySetService
   });
   return viewports;
 }
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/toggleVOISliceSync.ts
+const VOI_SYNC_NAME = 'VOI_SYNC';
+const getSyncId = modality => `${VOI_SYNC_NAME}_${modality}`;
+function toggleVOISliceSync({
+  servicesManager,
+  viewports: providedViewports,
+  syncId
+}) {
+  const {
+    syncGroupService,
+    viewportGridService,
+    displaySetService,
+    cornerstoneViewportService
+  } = servicesManager.services;
+  const viewports = providedViewports || groupViewportsByModality(viewportGridService, displaySetService);
+
+  // Todo: right now we don't have a proper way to define specific
+  // viewports to add to synchronizers, and right now it is global or not
+  // after we do that, we should do fine grained control of the synchronizers
+
+  // we can apply voi sync within each modality group
+  for (const [modality, modalityViewports] of Object.entries(viewports)) {
+    const syncIdToUse = syncId || getSyncId(modality);
+    const someViewportHasSync = modalityViewports.some(viewport => {
+      const syncStates = syncGroupService.getSynchronizersForViewport(viewport.viewportOptions.viewportId);
+      const imageSync = syncStates.find(syncState => syncState.id === syncIdToUse);
+      return !!imageSync;
+    });
+    if (someViewportHasSync) {
+      return toggleVOISliceSync_disableSync(modalityViewports, syncIdToUse, servicesManager);
+    }
+
+    // create synchronization group and add the modalityViewports to it.
+    modalityViewports.forEach(gridViewport => {
+      const {
+        viewportId
+      } = gridViewport.viewportOptions;
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+      if (!viewport) {
+        return;
+      }
+      syncGroupService.addViewportToSyncGroup(viewportId, viewport.getRenderingEngine().id, {
+        type: 'voi',
+        id: syncIdToUse,
+        source: true,
+        target: true
+      });
+    });
+  }
+}
+function toggleVOISliceSync_disableSync(modalityViewports, syncId, servicesManager) {
+  const {
+    syncGroupService,
+    cornerstoneViewportService
+  } = servicesManager.services;
+  const viewports = modalityViewports;
+  viewports.forEach(gridViewport => {
+    const {
+      viewportId
+    } = gridViewport.viewportOptions;
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    if (!viewport) {
+      return;
+    }
+    syncGroupService.removeViewportFromSyncGroup(viewport.id, viewport.getRenderingEngine().id, syncId);
+  });
+}
+function groupViewportsByModality(viewportGridService, displaySetService) {
+  let {
+    viewports
+  } = viewportGridService.getState();
+  viewports = [...viewports.values()];
+
+  // group the viewports by modality
+  return viewports.reduce((acc, viewport) => {
+    const {
+      displaySetInstanceUIDs
+    } = viewport;
+    // Todo: add proper fusion support
+    const displaySetInstanceUID = displaySetInstanceUIDs[0];
+    const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+    const modality = displaySet.Modality;
+    if (!acc[modality]) {
+      acc[modality] = [];
+    }
+    acc[modality].push(viewport);
+    return acc;
+  }, {});
+}
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/commandsModule.ts
 
 
@@ -4835,6 +4883,11 @@ function getReconstructableStackViewports(viewportGridService, displaySetService
 
 
 
+
+const toggleSyncFunctions = {
+  imageSlice: toggleImageSliceSync,
+  voi: toggleVOISliceSync
+};
 function commandsModule({
   servicesManager,
   commandsManager
@@ -4843,11 +4896,11 @@ function commandsModule({
     viewportGridService,
     toolGroupService,
     cineService,
-    toolbarService,
     uiDialogService,
     cornerstoneViewportService,
     uiNotificationService,
-    measurementService
+    measurementService,
+    syncGroupService
   } = servicesManager.services;
   const {
     measurementServiceSource
@@ -5040,22 +5093,6 @@ function commandsModule({
     }) => {
       utils_callInputDialog(uiDialogService, data, callback);
     },
-    cleanUpCrosshairs: () => {
-      // if the crosshairs tool is active, deactivate it and set window level active
-      // since we are going back to main non-mpr HP
-      const activeViewportToolGroup = toolGroupService.getToolGroup(null);
-      if (activeViewportToolGroup._toolInstances?.Crosshairs?.mode === dist_esm.Enums.ToolModes.Active) {
-        actions.toolbarServiceRecordInteraction({
-          interactionType: 'tool',
-          commands: [{
-            commandOptions: {
-              toolName: 'WindowLevel'
-            },
-            context: 'CORNERSTONE'
-          }]
-        });
-      }
-    },
     toggleCine: () => {
       const {
         viewports
@@ -5064,11 +5101,6 @@ function commandsModule({
         isCineEnabled
       } = cineService.getState();
       cineService.setIsCineEnabled(!isCineEnabled);
-      toolbarService.setButton('Cine', {
-        props: {
-          isActive: !isCineEnabled
-        }
-      });
       viewports.forEach((_, index) => cineService.setCine({
         id: index,
         isPlaying: false
@@ -5105,34 +5137,48 @@ function commandsModule({
       });
       viewport.render();
     },
-    // Just call the toolbar service record interaction - allows
-    // executing a toolbar command as a full toolbar command with side affects
-    // coming from the ToolbarService itself.
-    toolbarServiceRecordInteraction: props => {
-      toolbarService.recordInteraction(props);
+    setToolEnabled: ({
+      toolName,
+      toggle
+    }) => {
+      const {
+        viewports
+      } = viewportGridService.getState();
+      if (!viewports.size) {
+        return;
+      }
+      const toolGroup = toolGroupService.getToolGroup(null);
+      if (!toolGroup) {
+        return;
+      }
+      const toolIsEnabled = toolGroup.getToolOptions(toolName).mode === dist_esm.Enums.ToolModes.Enabled;
+
+      // Toggle the tool's state only if the toggle is true
+      if (toggle) {
+        toolIsEnabled ? toolGroup.setToolDisabled(toolName) : toolGroup.setToolEnabled(toolName);
+      }
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
     },
-    // Enable or disable a toggleable command, without calling the activation
-    // Used to setup already active tools from hanging protocols
-    setToolbarToggled: props => {
-      toolbarService.setToggled(props.toolId, props.isActive ?? true);
+    setToolActiveToolbar: ({
+      value,
+      itemId,
+      toolGroupIds = []
+    }) => {
+      // Sometimes it is passed as value (tools with options), sometimes as itemId (toolbar buttons)
+      const toolName = itemId || value;
+      toolGroupIds = toolGroupIds.length ? toolGroupIds : toolGroupService.getToolGroupIds();
+      toolGroupIds.forEach(toolGroupId => {
+        actions.setToolActive({
+          toolName,
+          toolGroupId
+        });
+      });
     },
     setToolActive: ({
       toolName,
-      toolGroupId = null,
-      toggledState
+      toolGroupId = null
     }) => {
-      if (toolName === 'Crosshairs') {
-        const activeViewportToolGroup = toolGroupService.getToolGroup(null);
-        if (!activeViewportToolGroup._toolInstances.Crosshairs) {
-          uiNotificationService.show({
-            title: 'Crosshairs',
-            message: 'You need to be in a MPR view to use Crosshairs. Click on MPR button in the toolbar to activate it.',
-            type: 'info',
-            duration: 3000
-          });
-          throw new Error('Crosshairs tool is not available in this viewport');
-        }
-      }
       const {
         viewports
       } = viewportGridService.getState();
@@ -5143,31 +5189,13 @@ function commandsModule({
       if (!toolGroup) {
         return;
       }
-      if (!toolGroup.getToolInstance(toolName)) {
-        uiNotificationService.show({
-          title: `${toolName} tool`,
-          message: `The ${toolName} tool is not available in this viewport.`,
-          type: 'info',
-          duration: 3000
-        });
-        throw new Error(`ToolGroup ${toolGroup.id} does not have this tool.`);
+      if (!toolGroup.hasTool(toolName)) {
+        return;
       }
       const activeToolName = toolGroup.getActivePrimaryMouseButtonTool();
       if (activeToolName) {
-        // Todo: this is a hack to prevent the crosshairs to stick around
-        // after another tool is selected. We should find a better way to do this
-        if (activeToolName === 'Crosshairs') {
-          toolGroup.setToolDisabled(activeToolName);
-        } else {
-          toolGroup.setToolPassive(activeToolName);
-        }
-      }
-
-      // If there is a toggle state, then simply set the enabled/disabled state without
-      // setting the tool active.
-      if (toggledState != null) {
-        toggledState ? toolGroup.setToolEnabled(toolName) : toolGroup.setToolDisabled(toolName);
-        return;
+        const activeToolOptions = toolGroup.getToolConfiguration(activeToolName);
+        activeToolOptions?.disableOnPassive ? toolGroup.setToolDisabled(activeToolName) : toolGroup.setToolPassive(activeToolName);
       }
 
       // Set the new toolName to be active
@@ -5419,29 +5447,54 @@ function commandsModule({
       const nextViewportIndex = (currentIndex + direction + viewportIds.length) % viewportIds.length;
       viewportGridService.setActiveViewportId(viewportIds[nextViewportIndex]);
     },
-    toggleImageSliceSync: ({
-      toggledState
+    /**
+     * If the syncId is given and a synchronizer with that ID already exists, it will
+     * toggle it on/off for the provided viewports. If not, it will attempt to create
+     * a new synchronizer using the given syncId and type for the specified viewports.
+     * If no viewports are provided, you may notice some default behavior.
+     * - 'voi' type, we will aim to synchronize all viewports with the same modality
+     * -'imageSlice' type, we will aim to synchronize all viewports with the same orientation.
+     *
+     * @param options
+     * @param options.viewports - The viewports to synchronize
+     * @param options.syncId - The synchronization group ID
+     * @param options.type - The type of synchronization to perform
+     */
+    toggleSynchronizer: ({
+      type,
+      viewports,
+      syncId
     }) => {
-      toggleImageSliceSync({
-        servicesManager,
-        toggledState
-      });
+      const synchronizer = syncGroupService.getSynchronizer(syncId);
+      if (synchronizer) {
+        synchronizer.isDisabled() ? synchronizer.setEnabled(true) : synchronizer.setEnabled(false);
+        return;
+      }
+      const fn = toggleSyncFunctions[type];
+      if (fn) {
+        fn({
+          servicesManager,
+          viewports,
+          syncId
+        });
+      }
     },
     setSourceViewportForReferenceLinesTool: ({
-      toggledState,
       viewportId
     }) => {
       if (!viewportId) {
         const {
           activeViewportId
         } = viewportGridService.getState();
-        viewportId = activeViewportId;
+        viewportId = activeViewportId ?? 'default';
       }
       const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-      toolGroup.setToolConfiguration(dist_esm.ReferenceLinesTool.toolName, {
+      toolGroup?.setToolConfiguration(dist_esm.ReferenceLinesTool.toolName, {
         sourceViewportId: viewportId
       }, true // overwrite
       );
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
     },
     storePresentation: ({
       viewportId
@@ -5469,6 +5522,25 @@ function commandsModule({
           unsubscribe(EVENT);
         }
       });
+    },
+    resetCrosshairs: ({
+      viewportId
+    }) => {
+      const crosshairInstances = [];
+      const getCrosshairInstances = toolGroupId => {
+        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
+        crosshairInstances.push(toolGroup.getToolInstance('Crosshairs'));
+      };
+      if (!viewportId) {
+        const toolGroupIds = toolGroupService.getToolGroupIds();
+        toolGroupIds.forEach(getCrosshairInstances);
+      } else {
+        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+        getCrosshairInstances(toolGroup.id);
+      }
+      crosshairInstances.forEach(ins => {
+        ins.resetCrosshairs();
+      });
     }
   };
   const definitions = {
@@ -5476,7 +5548,6 @@ function commandsModule({
     // context menu
     showCornerstoneContextMenu: {
       commandFn: actions.showCornerstoneContextMenu,
-      storeContexts: [],
       options: {
         menuCustomizationId: 'measurementsContextMenu',
         commands: [{
@@ -5488,9 +5559,7 @@ function commandsModule({
       commandFn: actions.getNearbyToolData
     },
     getNearbyAnnotation: {
-      commandFn: actions.getNearbyAnnotation,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.getNearbyAnnotation
     },
     deleteMeasurement: {
       commandFn: actions.deleteMeasurement
@@ -5504,12 +5573,15 @@ function commandsModule({
     setWindowLevel: {
       commandFn: actions.setWindowLevel
     },
-    toolbarServiceRecordInteraction: {
-      commandFn: actions.toolbarServiceRecordInteraction
-    },
     setToolActive: {
       commandFn: actions.setToolActive
     },
+    setToolActiveToolbar: {
+      commandFn: actions.setToolActiveToolbar
+    },
+    setToolEnabled: {
+      commandFn: actions.setToolEnabled
+    },
     rotateViewportCW: {
       commandFn: actions.rotateViewport,
       options: {
@@ -5612,14 +5684,14 @@ function commandsModule({
     storePresentation: {
       commandFn: actions.storePresentation
     },
-    setToolbarToggled: {
-      commandFn: actions.setToolbarToggled
-    },
-    cleanUpCrosshairs: {
-      commandFn: actions.cleanUpCrosshairs
-    },
     attachProtocolViewportDataListener: {
       commandFn: actions.attachProtocolViewportDataListener
+    },
+    resetCrosshairs: {
+      commandFn: actions.resetCrosshairs
+    },
+    toggleSynchronizer: {
+      commandFn: actions.toggleSynchronizer
     }
   };
   return {
@@ -5633,7 +5705,9 @@ function commandsModule({
 const fourUp = {
   id: 'fourUp',
   locked: true,
-  name: 'fourUp',
+  name: '3D four up',
+  icon: 'layout-advanced-3d-four-up',
+  isPreset: true,
   createdDate: '2023-03-15T10:29:44.894Z',
   modifiedDate: '2023-03-15T10:29:44.894Z',
   availableTo: {},
@@ -5741,7 +5815,9 @@ const fourUp = {
 const main3D = {
   id: 'main3D',
   locked: true,
-  name: 'main3D',
+  name: '3D main',
+  icon: 'layout-advanced-3d-main',
+  isPreset: true,
   createdDate: '2023-03-15T10:29:44.894Z',
   modifiedDate: '2023-03-15T10:29:44.894Z',
   availableTo: {},
@@ -5869,8 +5945,10 @@ const main3D = {
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/hps/mpr.ts
 const mpr = {
   id: 'mpr',
-  name: 'Multi-Planar Reconstruction',
+  name: 'MPR',
   locked: true,
+  icon: 'layout-advanced-mpr',
+  isPreset: true,
   createdDate: '2021-02-23',
   modifiedDate: '2023-08-15',
   availableTo: {},
@@ -5887,11 +5965,8 @@ const mpr = {
         protocolId: 'mpr'
       },
       context: 'DEFAULT'
-    }],
-    // Turns off crosshairs when switching out of MPR mode
-    onProtocolExit: [{
-      commandName: 'cleanUpCrosshairs'
     }]
+    // Turns off crosshairs when switching out of MPR mode
   },
   displaySetSelectors: {
     activeDisplaySet: {
@@ -6111,7 +6186,9 @@ const mprAnd3DVolumeViewport = {
 const only3D = {
   id: 'only3D',
   locked: true,
-  name: 'only3D',
+  name: '3D only',
+  icon: 'layout-advanced-3d-only',
+  isPreset: true,
   createdDate: '2023-03-15T10:29:44.894Z',
   modifiedDate: '2023-03-15T10:29:44.894Z',
   availableTo: {},
@@ -6165,7 +6242,9 @@ const only3D = {
 const primary3D = {
   id: 'primary3D',
   locked: true,
-  name: 'primary3D',
+  name: '3D primary',
+  icon: 'layout-advanced-3d-primary',
+  isPreset: true,
   createdDate: '2023-03-15T10:29:44.894Z',
   modifiedDate: '2023-03-15T10:29:44.894Z',
   availableTo: {},
@@ -6294,7 +6373,9 @@ const primary3D = {
 const primaryAxial = {
   id: 'primaryAxial',
   locked: true,
-  name: 'primaryAxial',
+  name: 'Axial Primary',
+  icon: 'layout-advanced-axial-primary',
+  isPreset: true,
   createdDate: '2023-03-15T10:29:44.894Z',
   modifiedDate: '2023-03-15T10:29:44.894Z',
   availableTo: {},
@@ -6431,6 +6512,250 @@ function getHangingProtocolModule() {
   }];
 }
 /* harmony default export */ const src_getHangingProtocolModule = (getHangingProtocolModule);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/getToolbarModule.tsx
+
+const getToggledClassName = isToggled => {
+  return isToggled ? '!text-primary-active' : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light';
+};
+function getToolbarModule({
+  commandsManager,
+  servicesManager
+}) {
+  const {
+    toolGroupService,
+    syncGroupService,
+    cornerstoneViewportService,
+    hangingProtocolService,
+    displaySetService,
+    viewportGridService
+  } = servicesManager.services;
+  return [
+  // functions/helpers to be used by the toolbar buttons to decide if they should
+  // enabled or not
+  {
+    name: 'evaluate.cornerstoneTool',
+    evaluate: ({
+      viewportId,
+      button
+    }) => {
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+      if (!toolGroup) {
+        return;
+      }
+      const toolName = getToolNameForButton(button);
+      if (!toolGroup || !toolGroup.hasTool(toolName)) {
+        return {
+          disabled: true,
+          className: '!text-common-bright ohif-disabled'
+        };
+      }
+      const isPrimaryActive = toolGroup.getActivePrimaryMouseButtonTool() === toolName;
+      return {
+        disabled: false,
+        className: isPrimaryActive ? '!text-black bg-primary-light' : '!text-common-bright hover:!bg-primary-dark hover:!text-primary-light',
+        // 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 = 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: ({
+      viewportId,
+      button
+    }) => {
+      return {
+        className: '!text-common-bright hover:!bg-primary-dark hover:text-primary-light'
+      };
+    }
+  }, {
+    name: 'evaluate.cornerstoneTool.toggle',
+    evaluate: ({
+      viewportId,
+      button
+    }) => {
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+      if (!toolGroup) {
+        return;
+      }
+      const toolName = getToolNameForButton(button);
+      if (!toolGroup || !toolGroup.hasTool(toolName)) {
+        return {
+          disabled: true,
+          className: '!text-common-bright ohif-disabled'
+        };
+      }
+      const isOff = [dist_esm.Enums.ToolModes.Disabled, dist_esm.Enums.ToolModes.Passive].includes(toolGroup.getToolOptions(toolName).mode);
+      return {
+        className: getToggledClassName(!isOff)
+      };
+    }
+  }, {
+    name: 'evaluate.cornerstone.synchronizer',
+    evaluate: ({
+      viewportId,
+      button
+    }) => {
+      let synchronizers = syncGroupService.getSynchronizersForViewport(viewportId);
+      if (!synchronizers?.length) {
+        return {
+          className: getToggledClassName(false)
+        };
+      }
+      const synchronizerType = button?.commands?.[0]?.commandOptions?.type;
+      synchronizers = syncGroupService.getSynchronizersOfType(synchronizerType);
+      if (!synchronizers?.length) {
+        return {
+          className: getToggledClassName(false)
+        };
+      }
+
+      // Todo: we need a better way to find the synchronizers based on their
+      // type, but for now we just check the first one and see if it is
+      // enabled
+      const synchronizer = synchronizers[0];
+      const isEnabled = synchronizer?._enabled;
+      return {
+        className: getToggledClassName(isEnabled)
+      };
+    }
+  }, {
+    name: 'evaluate.not3D',
+    evaluate: ({
+      viewportId,
+      button
+    }) => {
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+      if (viewport?.type === 'volume3d') {
+        return {
+          disabled: true,
+          className: '!text-common-bright ohif-disabled'
+        };
+      }
+    }
+  }, {
+    name: 'evaluate.viewportProperties.toggle',
+    evaluate: ({
+      viewportId,
+      button
+    }) => {
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+      if (!viewport || viewport.isDisabled) {
+        return;
+      }
+      const propId = button.id;
+      const properties = viewport.getProperties();
+      const camera = viewport.getCamera();
+      const prop = camera?.[propId] || properties?.[propId];
+      if (!prop) {
+        return {
+          disabled: false,
+          className: '!text-common-bright hover:!bg-primary-dark hover:text-primary-light'
+        };
+      }
+      const isToggled = prop;
+      return {
+        className: getToggledClassName(isToggled)
+      };
+    }
+  }, {
+    name: 'evaluate.mpr',
+    evaluate: ({
+      viewportId,
+      button
+    }) => {
+      const {
+        protocol
+      } = hangingProtocolService.getActiveProtocol();
+      const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
+      if (!displaySetUIDs?.length) {
+        return;
+      }
+      const displaySets = displaySetUIDs.map(displaySetService.getDisplaySetByUID);
+      const areReconstructable = displaySets.every(displaySet => {
+        return displaySet.isReconstructable;
+      });
+      if (!areReconstructable) {
+        return {
+          disabled: true,
+          className: '!text-common-bright ohif-disabled'
+        };
+      }
+      const isMpr = protocol?.id === 'mpr';
+      return {
+        disabled: false,
+        className: getToggledClassName(isMpr)
+      };
+    }
+  }];
+}
+function getToolNameForButton(button) {
+  const {
+    props
+  } = button;
+  const commands = props?.commands || button.commands;
+  const commandsArray = Array.isArray(commands) ? commands : [commands];
+  const firstCommand = commandsArray[0];
+  if (typeof firstCommand === 'string') {
+    // likely not a cornerstone tool
+    return null;
+  }
+  if ('commandOptions' in firstCommand) {
+    return firstCommand.commandOptions.toolName ?? props?.id ?? button.id;
+  }
+
+  // use id as a fallback for toolName
+  return props?.id ?? button.id;
+}
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/services/ToolGroupService/ToolGroupService.ts
 var _class;
 
@@ -6567,19 +6892,6 @@ class ToolGroupService {
     this.addToolsToToolGroup(toolGroupId, tools);
     return toolGroup;
   }
-
-  /**
-  private changeConfigurationIfNecessary(toolGroup, volumeUID) {
-    // handle specific assignment for volumeUID (e.g., fusion)
-    const toolInstances = toolGroup._toolInstances;
-    // Object.values(toolInstances).forEach(toolInstance => {
-    //   if (toolInstance.configuration) {
-    //     toolInstance.configuration.volumeUID = volumeUID;
-    //   }
-    // });
-  }
-  */
-
   /**
    * Get the tool's configuration based on the tool name and tool group id
    * @param toolGroupId - The id of the tool group that the tool instance belongs to.
@@ -6698,6 +7010,7 @@ ToolGroupService.REGISTRATION = {
 var SyncGroupService_class;
 
 
+
 const SyncGroupService_EVENTS = {
   TOOL_GROUP_CREATED: 'event::cornerstone::syncgroupservice:toolgroupcreated'
 };
@@ -6711,6 +7024,7 @@ const POSITION = 'cameraposition';
 const VOI = 'voi';
 const ZOOMPAN = 'zoompan';
 const STACKIMAGE = 'stackimage';
+const IMAGE_SLICE = 'imageslice';
 const asSyncGroup = syncGroup => typeof syncGroup === 'string' ? {
   type: syncGroup
 } : syncGroup;
@@ -6723,8 +7037,12 @@ class SyncGroupService {
       [POSITION]: dist_esm.synchronizers.createCameraPositionSynchronizer,
       [VOI]: dist_esm.synchronizers.createVOISynchronizer,
       [ZOOMPAN]: dist_esm.synchronizers.createZoomPanSynchronizer,
-      [STACKIMAGE]: dist_esm.synchronizers.createImageSliceSynchronizer
+      // todo: remove stack image since it is legacy now and the image_slice
+      // handles both stack and volume viewports
+      [STACKIMAGE]: dist_esm.synchronizers.createImageSliceSynchronizer,
+      [IMAGE_SLICE]: dist_esm.synchronizers.createImageSliceSynchronizer
     };
+    this.synchronizersByType = {};
     this.servicesManager = serviceManager;
     this.listeners = {};
     this.EVENTS = SyncGroupService_EVENTS;
@@ -6732,13 +7050,22 @@ class SyncGroupService {
     Object.assign(this, src/* pubSubServiceInterface */.Ml);
   }
   _createSynchronizer(type, id, options) {
+    // Initialize if not already done
+    this.synchronizersByType[type] = this.synchronizersByType[type] || [];
     const syncCreator = this.synchronizerCreators[type.toLowerCase()];
     if (syncCreator) {
-      return syncCreator(id, options);
+      const synchronizer = syncCreator(id, options);
+      if (synchronizer) {
+        this.synchronizersByType[type].push(synchronizer);
+        return synchronizer;
+      }
     } else {
-      console.warn('Unknown synchronizer type', type, id);
+      console.warn(`Unknown synchronizer type: ${type}, id: ${id}`);
     }
   }
+  getSyncCreatorForType(type) {
+    return this.synchronizerCreators[type.toLowerCase()];
+  }
 
   /**
    * Creates a synchronizer type.
@@ -6751,6 +7078,15 @@ class SyncGroupService {
   getSynchronizer(id) {
     return dist_esm.SynchronizerManager.getSynchronizer(id);
   }
+
+  /**
+   * Retrieves an array of synchronizers of a specific type.
+   * @param type - The type of synchronizers to retrieve.
+   * @returns An array of synchronizers of the specified type.
+   */
+  getSynchronizersOfType(type) {
+    return this.synchronizersByType[type];
+  }
   _getOrCreateSynchronizer(type, id, options) {
     let synchronizer = dist_esm.SynchronizerManager.getSynchronizer(id);
     if (!synchronizer) {
@@ -6791,8 +7127,12 @@ class SyncGroupService {
   destroy() {
     dist_esm.SynchronizerManager.destroy();
   }
-  getSynchronizersForViewport(viewportId, renderingEngineId) {
-    return dist_esm.SynchronizerManager.getAllSynchronizers().filter(s => s.hasSourceViewport(renderingEngineId, viewportId) || s.hasTargetViewport(renderingEngineId, viewportId));
+  getSynchronizersForViewport(viewportId) {
+    const renderingEngine = (0,esm.getRenderingEngines)().find(re => {
+      return re.getViewports().find(vp => vp.id === viewportId);
+    }) || (0,esm.getRenderingEngines)()[0];
+    const synchronizers = dist_esm.SynchronizerManager.getAllSynchronizers();
+    return synchronizers.filter(s => s.hasSourceViewport(renderingEngine.id, viewportId) || s.hasTargetViewport(renderingEngine.id, viewportId));
   }
   removeViewportFromSyncGroup(viewportId, renderingEngineId, syncGroupId) {
     const synchronizers = dist_esm.SynchronizerManager.getAllSynchronizers();
@@ -7065,7 +7405,7 @@ class SegmentationService extends src/* PubSubService */.Rc {
 
       // Force use of a Uint8Array SharedArrayBuffer for the segmentation to save space and so
       // it is easily compressible in worker thread.
-      await esm.volumeLoader.createAndCacheDerivedVolume(volumeId, {
+      await esm.volumeLoader.createAndCacheDerivedSegmentationVolume(volumeId, {
         volumeId: segmentationId,
         targetBuffer: {
           type: 'Uint8Array',
@@ -7229,8 +7569,6 @@ class SegmentationService extends src/* PubSubService */.Rc {
     };
     this.setConfiguration = configuration => {
       const {
-        brushSize,
-        brushThresholdGate,
         fillAlpha,
         fillAlphaInactive,
         outlineWidthActive,
@@ -8168,7 +8506,6 @@ class SegmentationService extends src/* PubSubService */.Rc {
     }
     segmentInfo.label = label;
     if (suppressEvents === false) {
-      // this._setSegmentationModified(segmentationId);
       this._broadcastEvent(this.EVENTS.SEGMENTATION_UPDATED, {
         segmentation
       });
@@ -9105,7 +9442,7 @@ class CornerstoneViewportService extends src/* PubSubService */.Rc {
       viewPlaneNormal,
       viewUp
     } = csViewport.getCamera();
-    const initialImageIndex = csViewport.getCurrentImageIdIndex();
+    const initialImageIndex = csViewport.getCurrentImageIdIndex() || 0;
     const zoom = csViewport.getZoom();
     const pan = csViewport.getPan();
     return {
@@ -9208,7 +9545,7 @@ class CornerstoneViewportService extends src/* PubSubService */.Rc {
       stateSyncService,
       syncGroupService
     } = this.servicesManager.services;
-    const synchronizers = syncGroupService.getSynchronizersForViewport(viewportId, this.renderingEngine.id);
+    const synchronizers = syncGroupService.getSynchronizersForViewport(viewportId);
     const {
       positionPresentationStore,
       synchronizersStore,
@@ -10034,6 +10371,7 @@ function src_extends() { src_extends = Object.assign ? Object.assign.bind() : fu
 
 
 
+
 
 
 const Component = /*#__PURE__*/react.lazy(() => {
@@ -10078,6 +10416,7 @@ const cornerstoneExtension = {
     servicesManager.registerService(services_CornerstoneCacheService.REGISTRATION);
     return init.call(this, props);
   },
+  getToolbarModule: getToolbarModule,
   getHangingProtocolModule: src_getHangingProtocolModule,
   getViewportModule({
     servicesManager,