fix(colorbar): Allow for AdvancedRenderingControls to be placed at the left or right of the viewport. (#5273)

extensions/cornerstone/src/components/AdvancedRenderingControls/AdvancedRenderingControls.tsx

@@ -1,13 +1,21 @@
 import { useToolbar, useViewportMousePosition } from '@ohif/core/src/hooks';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useViewportRendering } from '../../hooks';
 import { ButtonLocation } from '@ohif/core/src/services/ToolBarService/ToolbarService';
+import classNames from 'classnames';
 
 const mouseNearControlsRanges = {
   [ButtonLocation.TopMiddle]: { minX: 0, minY: 0, maxX: 1, maxY: 0.1 },
   [ButtonLocation.BottomMiddle]: { minX: 0, minY: 0.9, maxX: 1, maxY: 1 },
+  [ButtonLocation.LeftMiddle]: { minX: 0, minY: 0, maxX: 0.1, maxY: 1 },
+  [ButtonLocation.RightMiddle]: { minX: 0.9, minY: 0, maxX: 1, maxY: 1 },
 };
 
+const getFlexDirectionClassName = (location: ButtonLocation) =>
+  location === ButtonLocation.LeftMiddle || location === ButtonLocation.RightMiddle
+    ? 'flex-col'
+    : 'flex-row';
+
 function AdvancedRenderingControls({
   viewportId,
   location,
@@ -34,6 +42,7 @@ function AdvancedRenderingControls({
   const [showAllIcons, setShowAllIcons] = useState(true);
   const firstMountRef = useRef(true);
   const { hasColorbar } = useViewportRendering(viewportId);
+  const [isAnItemOpen, setIsAnItemOpen] = useState(false);
 
   useEffect(() => {
     if (firstMountRef.current) {
@@ -56,7 +65,23 @@ function AdvancedRenderingControls({
         setIsMouseNearControls(false);
       }
     }
-  }, [mousePosition, showAllIcons]);
+  }, [location, mousePosition, showAllIcons]);
+
+  const handleOnItemOpen = useCallback(
+    (id, viewportId) => {
+      openItem(id, viewportId);
+      setIsAnItemOpen(true);
+    },
+    [openItem, setIsAnItemOpen]
+  );
+
+  const handleOnItemClose = useCallback(
+    (id, viewportId) => {
+      closeItem(id, viewportId);
+      setIsAnItemOpen(false);
+    },
+    [closeItem, setIsAnItemOpen]
+  );
 
   if (!toolbarButtons?.length) {
     return null;
@@ -67,7 +92,7 @@ function AdvancedRenderingControls({
   }
 
   return (
-    <div className="flex flex-row gap-2">
+    <div className={classNames('flex gap-2', getFlexDirectionClassName(location))}>
       {toolbarButtons.map(toolDef => {
         if (!toolDef) {
           return null;
@@ -80,8 +105,8 @@ function AdvancedRenderingControls({
           ...componentProps,
           isOpen: isItemOpen(id, viewportId),
           isLocked: isItemLocked(id, viewportId),
-          onOpen: () => openItem(id, viewportId),
+          onOpen: () => handleOnItemOpen(id, viewportId),
-          onClose: () => closeItem(id, viewportId),
+          onClose: () => handleOnItemClose(id, viewportId),
           onToggleLock: () => toggleLock(id, viewportId),
           viewportId,
         };
@@ -104,7 +129,8 @@ function AdvancedRenderingControls({
 
         // Always show all icons on first mount for 3 seconds
         // After that, always show Colorbar, show others only when mouse is at bottom
-        const shouldBeVisible = showAllIcons || id === 'Colorbar' || isMouseNearControls;
+        const shouldBeVisible =
+          isAnItemOpen || showAllIcons || id === 'Colorbar' || isMouseNearControls;
 
         return (
           <div