fix(colorbar): Allow for AdvancedRenderingControls to be placed at the top or bottom of the viewport. (#5270)

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

@@ -1,6 +1,12 @@
 import { useToolbar, useViewportMousePosition } from '@ohif/core/src/hooks';
 import React, { useState, useEffect, useRef } from 'react';
 import { useViewportRendering } from '../../hooks';
+import { ButtonLocation } from '@ohif/core/src/services/ToolBarService/ToolbarService';
+
+const mouseNearControlsRanges = {
+  [ButtonLocation.TopMiddle]: { minX: 0, minY: 0, maxX: 1, maxY: 0.1 },
+  [ButtonLocation.BottomMiddle]: { minX: 0, minY: 0.9, maxX: 1, maxY: 1 },
+};
 
 function AdvancedRenderingControls({
   viewportId,
@@ -24,7 +30,7 @@ function AdvancedRenderingControls({
   });
 
   const mousePosition = useViewportMousePosition(viewportId);
-  const [isAtBottom, setIsAtBottom] = useState(false);
+  const [isMouseNearControls, setIsMouseNearControls] = useState(false);
   const [showAllIcons, setShowAllIcons] = useState(true);
   const firstMountRef = useRef(true);
   const { hasColorbar } = useViewportRendering(viewportId);
@@ -43,10 +49,11 @@ function AdvancedRenderingControls({
 
   useEffect(() => {
     if (!showAllIcons && mousePosition.isInViewport) {
-      if (mousePosition.isInBottomPercentage(10)) {
-        setIsAtBottom(true);
+      const mouseHoverLocation = mouseNearControlsRanges[location];
+      if (mousePosition.isWithinNormalizedBox(mouseHoverLocation)) {
+        setIsMouseNearControls(true);
       } else {
-        setIsAtBottom(false);
+        setIsMouseNearControls(false);
       }
     }
   }, [mousePosition, showAllIcons]);
@@ -97,7 +104,7 @@ 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' || isAtBottom;
+        const shouldBeVisible = showAllIcons || id === 'Colorbar' || isMouseNearControls;
 
         return (
           <div

extensions/cornerstone/src/components/ViewportColorbar/ViewportColorbar.tsx

@@ -27,6 +27,9 @@ type ColorbarProps = {
   numColorbars: number;
 };
 
+export const isHorizontal = (position: ColorbarPositionType): boolean =>
+  position === 'top' || position === 'bottom';
+
 /**
  * ViewportColorbar Component
  * A React wrapper for the cornerstone ViewportColorbar that adds a close button
@@ -143,8 +146,9 @@ const ViewportColorbar = memo(function ViewportColorbar({
         display: 'flex',
         alignItems: 'center',
         pointerEvents: 'auto',
-        minWidth: position === 'bottom' ? width / 2.5 : '17px',
-        minHeight: position === 'bottom' ? '20px' : numColorbars === 1 ? height / 3 : height / 4,
+        minWidth: isHorizontal(position) ? width / 2.5 : '17px',
+        minHeight: isHorizontal(position) ? '20px' : numColorbars === 1 ? height / 3 : height / 4,
+        height: '1px', // sometimes flex items with min-height need a starting point for its height calculation
         ...positionStylesFromConfig,
       }}
     ></div>

extensions/cornerstone/src/components/ViewportColorbar/ViewportColorbarsContainer.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useMemo, memo, useCallback } from 'react';
 import { useSystem } from '@ohif/core';
 import { ColorbarCustomization } from '../../types/Colorbar';
 import type { ColorMapPreset } from '../../types/Colormap';
-import ViewportColorbar from './ViewportColorbar';
+import ViewportColorbar, { isHorizontal } from './ViewportColorbar';
 import useViewportRendering from '../../hooks/useViewportRendering';
 import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
 type ViewportColorbarsContainerProps = {
@@ -74,10 +74,8 @@ const ViewportColorbarsContainer = memo(function ViewportColorbarsContainer({
     return null;
   }
 
-  const isBottom = position === 'bottom';
-
   const isSingleViewport = viewportDisplaySets.length === 1;
-  const showFullList = isSingleViewport || !isBottom;
+  const showFullList = isSingleViewport || !isHorizontal(position);
 
   const colorbarsToUse = showFullList
     ? colorbars