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

platform/core/src/hooks/useViewportMousePosition.ts

@@ -2,24 +2,33 @@ import { useState, useEffect } from 'react';
 import { useViewportRef } from './useViewportRef';
 import { useViewportSize } from './useViewportSize';
 
+interface NormalizedBox {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+}
+
 interface MousePosition {
   x: number;
   y: number;
   isInViewport: boolean;
+  relativeX: number;
   relativeY: number; // Position as percentage from top (0-1)
-  isInBottomPercentage: (percentage: number) => boolean;
+  isWithinNormalizedBox?: (normalizedBox: NormalizedBox) => boolean;
 }
 
 function useViewportMousePosition(viewportId: string): MousePosition {
   const viewportRef = useViewportRef(viewportId);
-  const { height, clientRect } = useViewportSize(viewportId);
+  const { width, height, clientRect } = useViewportSize(viewportId);
 
   const [mousePosition, setMousePosition] = useState<MousePosition>({
     x: 0,
     y: 0,
     isInViewport: false,
     relativeY: 0,
-    isInBottomPercentage: (percentage: number) => false,
+    relativeX: 0,
+    isWithinNormalizedBox: (normalizedBox: NormalizedBox) => false,
   });
 
   useEffect(() => {
@@ -38,18 +47,25 @@ function useViewportMousePosition(viewportId: string): MousePosition {
 
       const isInViewport = x >= 0 && x <= clientRect.width && y >= 0 && y <= clientRect.height;
 
+      const relativeX = Math.max(0, Math.min(1, x / width));
       const relativeY = Math.max(0, Math.min(1, y / height));
 
-      const isInBottomPercentage = (percentage: number) => {
-        return relativeY >= 1 - percentage / 100;
+      const isWithinNormalizedBox = (normalizedBox: NormalizedBox) => {
+        return (
+          relativeX >= normalizedBox.minX &&
+          relativeX <= normalizedBox.maxX &&
+          relativeY >= normalizedBox.minY &&
+          relativeY <= normalizedBox.maxY
+        );
       };
 
       setMousePosition({
         x,
         y,
         isInViewport,
+        relativeX,
         relativeY,
-        isInBottomPercentage,
+        isWithinNormalizedBox,
       });
     };
 
@@ -58,7 +74,7 @@ function useViewportMousePosition(viewportId: string): MousePosition {
     return () => {
       document.removeEventListener('mousemove', handleMouseMove);
     };
-  }, [viewportRef, height, clientRect]);
+  }, [viewportRef, height, clientRect, width]);
 
   return mousePosition;
 }