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

extensions/cornerstone/src/components/VOIManualControlMenu/VOIManualControlMenuWrapper.tsx

@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+import { useSystem } from '@ohif/core';
+import {
+  Button,
+  Icons,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  useIconPresentation,
+} from '@ohif/ui-next';
+import VOIManualControlMenu from './VOIManualControlMenu';
+
+type VOIManualControlMenuWrapperProps = {
+  viewportId: string;
+  location: string;
+  isOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  disabled?: boolean;
+};
+
+export function VOIManualControlMenuWrapper(props: VOIManualControlMenuWrapperProps): ReactNode {
+  const { viewportId, location, isOpen = false, onOpen, onClose, disabled, ...rest } = props;
+  const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
+
+  const handleOpenChange = (openState: boolean) => {
+    if (openState) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  };
+
+  const { servicesManager } = useSystem();
+  const { toolbarService } = servicesManager.services;
+
+  const { align, side } = toolbarService.getAlignAndSide(location);
+
+  const Icon = <Icons.WindowLevelAdvanced className={iconClassName} />;
+
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <PopoverTrigger
+        asChild
+        className="flex items-center justify-center"
+      >
+        <div>
+          {IconContainer ? (
+            <IconContainer
+              disabled={disabled}
+              icon="WindowLevelAdvanced"
+              {...rest}
+              {...containerProps}
+            >
+              {Icon}
+            </IconContainer>
+          ) : (
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={disabled}
+            >
+              {Icon}
+            </Button>
+          )}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className="border-none bg-transparent p-0 shadow-none"
+        side={side}
+        align={align}
+        alignOffset={0}
+        sideOffset={5}
+      >
+        <VOIManualControlMenu
+          className="w-full"
+          viewportId={viewportId}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}