feat(actions): simplify action corner api through the toolbarService (#5033)

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

@@ -1,114 +1,55 @@
-import React, { ReactElement, useCallback, useEffect, useState } from 'react';
+import React, { ReactElement, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AllInOneMenu, cn } from '@ohif/ui-next';
-import { useViewportGrid } from '@ohif/ui-next';
+import { AllInOneMenu } from '@ohif/ui-next';
 import { Colormap } from './Colormap';
 import { Colorbar } from './Colorbar';
-import { setViewportColorbar } from './Colorbar';
-import { WindowLevelPreset } from '../../types/WindowLevel';
-import { ColorbarProperties } from '../../types/Colorbar';
-import { VolumeRenderingQualityRange } from '../../types/ViewportPresets';
 import { WindowLevel } from './WindowLevel';
 import { VolumeRenderingPresets } from './VolumeRenderingPresets';
 import { VolumeRenderingOptions } from './VolumeRenderingOptions';
-import { ViewportPreset } from '../../types/ViewportPresets';
-import { VolumeViewport3D } from '@cornerstonejs/core';
-import { utilities } from '@cornerstonejs/core';
-import { useSystem } from '@ohif/core';
+import { useViewportRendering } from '../../hooks/useViewportRendering';
 
 export type WindowLevelActionMenuProps = {
   viewportId: string;
-  element: HTMLElement;
-  presets: Array<Record<string, Array<WindowLevelPreset>>>;
-  colorbarProperties: ColorbarProperties;
-  displaySets: Array<any>;
-  volumeRenderingPresets: Array<ViewportPreset>;
-  volumeRenderingQualityRange: VolumeRenderingQualityRange;
-  location: string;
+  element?: HTMLElement;
+  align?: 'start' | 'end' | 'center';
+  side?: 'top' | 'bottom' | 'left' | 'right';
 };
 
 export function WindowLevelActionMenu({
   viewportId,
   element,
-  presets,
-  verticalDirection,
-  horizontalDirection,
-  colorbarProperties,
-  displaySets,
-  volumeRenderingPresets,
-  volumeRenderingQualityRange,
-}: withAppTypes<WindowLevelActionMenuProps>): ReactElement {
-  const { commandsManager, servicesManager } = useSystem();
-  const {
-    colormaps,
-    colorbarContainerPosition,
-    colorbarInitialColormap,
-    colorbarTickPosition,
-    width: colorbarWidth,
-  } = colorbarProperties;
-
-  const { colorbarService, cornerstoneViewportService } = servicesManager.services;
-  const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-  const backgroundColor = viewportInfo?.getViewportOptions().background;
-  const isLight = backgroundColor ? utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
+  align,
+  side,
+}: WindowLevelActionMenuProps): ReactElement {
+  return (
+    <WindowLevelActionMenuContent
+      viewportId={viewportId}
+      align={align}
+      side={side}
+    />
+  );
+}
 
+export function WindowLevelActionMenuContent({
+  viewportId,
+  align,
+  side,
+}: {
+  viewportId: string;
+  align?: string;
+  side?: string;
+}): ReactElement {
   const { t } = useTranslation('WindowLevelActionMenu');
+  // Use a stable key for the menu to avoid infinite re-renders
+  const menuKey = useMemo(() => `${viewportId}`, [viewportId]);
 
-  const [viewportGrid] = useViewportGrid();
-  const { activeViewportId } = viewportGrid;
-
-  const [vpHeight, setVpHeight] = useState(element?.clientHeight);
-  const [menuKey, setMenuKey] = useState(0);
-  const [is3DVolume, setIs3DVolume] = useState(false);
-
-  const onSetColorbar = useCallback(() => {
-    setViewportColorbar(viewportId, commandsManager, servicesManager, {
-      colormaps,
-      ticks: {
-        position: colorbarTickPosition,
-      },
-      width: colorbarWidth,
-      position: colorbarContainerPosition,
-      activeColormapName: colorbarInitialColormap,
-    });
-  }, [commandsManager]);
-
-  useEffect(() => {
-    const newVpHeight = element?.clientHeight;
-    if (vpHeight !== newVpHeight) {
-      setVpHeight(newVpHeight);
-    }
-  }, [element, vpHeight]);
-
-  useEffect(() => {
-    if (!colorbarService.hasColorbar(viewportId)) {
-      return;
-    }
-    window.setTimeout(() => {
-      colorbarService.removeColorbar(viewportId);
-      onSetColorbar();
-    }, 0);
-  }, [viewportId, displaySets, viewport]);
-
-  useEffect(() => {
-    setMenuKey(menuKey + 1);
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    if (viewport instanceof VolumeViewport3D) {
-      setIs3DVolume(true);
-    } else {
-      setIs3DVolume(false);
-    }
-  }, [
-    displaySets,
-    viewportId,
-    presets,
-    volumeRenderingQualityRange,
-    volumeRenderingPresets,
+  const {
+    is3DVolume,
     colorbarProperties,
-    activeViewportId,
-    viewportGrid,
-  ]);
+    windowLevelPresets,
+    volumeRenderingPresets,
+    volumeRenderingQualityRange,
+  } = useViewportRendering(viewportId);
 
   return (
     <AllInOneMenu.Menu
@@ -116,60 +57,38 @@ export function WindowLevelActionMenu({
       key={menuKey}
       // the visibility is handled by the parent component
       isVisible={true}
-      horizontalDirection={horizontalDirection}
-      verticalDirection={verticalDirection}
+      align={align}
+      side={side}
     >
       <AllInOneMenu.ItemPanel>
-        {!is3DVolume && (
-          <Colorbar
-            viewportId={viewportId}
-            displaySets={displaySets.filter(ds => ds.supportsWindowLevel === true)}
-            colorbarProperties={colorbarProperties}
-          />
-        )}
+        {!is3DVolume && <Colorbar viewportId={viewportId} />}
 
-        {colormaps && !is3DVolume && (
+        {colorbarProperties?.colormaps && !is3DVolume && (
           <AllInOneMenu.SubMenu
             key="colorLUTPresets"
             itemLabel="Color LUT"
             itemIcon="icon-color-lut"
             className="flex h-[calc(100%-32px)] flex-col"
           >
-            <Colormap
-              className="flex h-full w-full flex-col"
-              colormaps={colormaps}
-              viewportId={viewportId}
-              displaySets={displaySets.filter(ds => ds.supportsWindowLevel === true)}
-            />
+            <Colormap viewportId={viewportId} />
           </AllInOneMenu.SubMenu>
         )}
 
-        {presets && presets.length > 0 && !is3DVolume && (
+        {windowLevelPresets?.length > 0 && !is3DVolume && (
           <AllInOneMenu.SubMenu
             key="windowLevelPresets"
             itemLabel={t('Modality Window Presets')}
             itemIcon="viewport-window-level"
           >
-            <WindowLevel
-              viewportId={viewportId}
-              presets={presets}
-            />
+            <WindowLevel viewportId={viewportId} />
           </AllInOneMenu.SubMenu>
         )}
 
-        {volumeRenderingPresets && is3DVolume && (
-          <VolumeRenderingPresets
-            viewportId={viewportId}
-            volumeRenderingPresets={volumeRenderingPresets}
-          />
-        )}
+        {volumeRenderingPresets && is3DVolume && <VolumeRenderingPresets viewportId={viewportId} />}
 
         {volumeRenderingQualityRange && is3DVolume && (
           <AllInOneMenu.SubMenu itemLabel="Rendering Options">
-            <VolumeRenderingOptions
-              viewportId={viewportId}
-              volumeRenderingQualityRange={volumeRenderingQualityRange}
-            />
+            <VolumeRenderingOptions viewportId={viewportId} />
           </AllInOneMenu.SubMenu>
         )}
       </AllInOneMenu.ItemPanel>