refactor: position 'move peaks' popup near cursor @hamed-musallam

src/component/1d/peaks/PeakAnnotationsSpreadMode.tsx

@@ -116,11 +116,12 @@ function PeakAnnotationsSpreadMode(props: PeakAnnotationsSpreadModeProps) {
     <ActionsButtonsPopover
       targetTagName="g"
       buttons={actionsButtons}
-      positioningStrategy="fixed"
-      position="top"
       direction="row"
       {...(isDragActive && { isOpen: true })}
       y={y}
+      offsetY={-20}
+      offsetXMode="cursor"
+      autoFlip={false}
     >
       <g className="peaks">
         <g

src/component/2d/zones/Signal.tsx

@@ -7,8 +7,6 @@ import { useHighlight, useHighlightData } from '../../highlight/index.js';
 import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZonesViewState.js';
 import { useScale2DX, useScale2DY } from '../utilities/scale.js';
 
-import SignalCrosshair from './SignalCrosshair.js';
-
 interface SignalProps {
   signal: Signal2D;
 }
@@ -52,24 +50,21 @@ function Signal({ signal }: SignalProps) {
   return (
     <g className="zone-signal">
       {showSignals && (
-        <g>
-          <SignalCrosshair signal={signal} />
-          <circle
-            onMouseEnter={() => {
-              assignment?.highlight();
-              highlight.show();
-            }}
-            onMouseLeave={() => {
-              assignment?.clearHighlight();
-              highlight.hide();
-            }}
-            key={signal.id}
-            cx={scaleX(signal.x.delta || 0)}
-            cy={scaleY(signal.y.delta || 0)}
-            r={isHighlighted ? 6 : 4}
-            fill={isHighlighted ? 'green' : 'darkgreen'}
-          />
-        </g>
+        <circle
+          onMouseEnter={() => {
+            assignment?.highlight();
+            highlight.show();
+          }}
+          onMouseLeave={() => {
+            assignment?.clearHighlight();
+            highlight.hide();
+          }}
+          key={signal.id}
+          cx={scaleX(signal.x.delta || 0)}
+          cy={scaleY(signal.y.delta || 0)}
+          r={isHighlighted ? 6 : 4}
+          fill={isHighlighted ? 'green' : 'darkgreen'}
+        />
       )}
       <g className="zone-signal-peak" style={{ pointerEvents: 'none' }}>
         {showPeaks &&

src/component/2d/zones/SignalCrosshair.tsx

@@ -9,7 +9,7 @@ interface SignalCrosshairProps {
   signal: Signal2D;
 }
 
-function SignalCrosshair({ signal }: SignalCrosshairProps) {
+export function SignalCrosshair({ signal }: SignalCrosshairProps) {
   const highlightIDsX = useMemo(() => {
     return [buildID(signal.id, 'Crosshair'), buildID(signal.id, 'Crosshair_X')];
   }, [signal.id]);
@@ -39,5 +39,3 @@ function SignalCrosshair({ signal }: SignalCrosshairProps) {
     </g>
   );
 }
-
-export default SignalCrosshair;

src/component/2d/zones/Zone.tsx

@@ -12,6 +12,7 @@ import { useActiveSpectrumZonesViewState } from '../../hooks/useActiveSpectrumZo
 import { useScale2DX, useScale2DY } from '../utilities/scale.js';
 
 import Signal from './Signal.js';
+import { SignalCrosshair } from './SignalCrosshair.tsx';
 
 interface ZoneProps {
   zoneData: ZoneType;
@@ -54,21 +55,25 @@ function Zone({ zoneData }: ZoneProps) {
   ];
 
   return (
-    <ActionsButtonsPopover
-      buttons={actionButtons}
-      targetTagName="g"
-      {...(assignment && { isOpen: false })}
+    <g
+      key={id}
+      onMouseEnter={() => {
+        assignmentZone.highlight();
+        highlightZone.show();
+      }}
+      onMouseLeave={() => {
+        assignmentZone.clearHighlight();
+        highlightZone.hide();
+      }}
     >
-      <g
-        key={id}
-        onMouseEnter={() => {
-          assignmentZone.highlight();
-          highlightZone.show();
-        }}
-        onMouseLeave={() => {
-          assignmentZone.clearHighlight();
-          highlightZone.hide();
-        }}
+      {signals.map((signal) => (
+        <SignalCrosshair key={signal.id} signal={signal} />
+      ))}
+
+      <ActionsButtonsPopover
+        buttons={actionButtons}
+        targetTagName="g"
+        {...(assignment && { isOpen: false })}
       >
         {showZones && (
           <g transform={`translate(${scaleX(x2)},${scaleY(y1)})`}>
@@ -87,8 +92,8 @@ function Zone({ zoneData }: ZoneProps) {
           // eslint-disable-next-line react/no-array-index-key
           <Signal key={id + i} signal={_signal} />
         ))}
-      </g>
-    </ActionsButtonsPopover>
+      </ActionsButtonsPopover>
+    </g>
   );
 }
 

src/component/elements/ActionsButtonsPopover.tsx

@@ -63,8 +63,10 @@ export interface ActionsButtonsPopoverProps
   offsetX?: number;
   offsetY?: number;
   offsetYMode?: 'fixed' | 'cursor';
+  offsetXMode?: 'fixed' | 'cursor';
   x?: number;
   y?: number;
+  autoFlip?: boolean;
 }
 
 function ActionButton(props: ButtonProps) {
@@ -80,30 +82,37 @@ export function ActionsButtonsPopover(props: ActionsButtonsPopoverProps) {
     space,
     direction = 'column',
     contentStyle = {},
-    offsetX = 0,
+    offsetX: externalOffsetX = 0,
     offsetY: externalOffsetY = 0,
     x,
     y,
     offsetYMode = 'fixed',
+    offsetXMode = 'fixed',
+    autoFlip = true,
     ...otherProps
   } = props;
 
-  const [cursorY, setCursorY] = useState(0);
+  const [cursor, setCursor] = useState({ x: 0, y: 0 });
   const Wrapper = targetTagName as any;
 
   const visibleButtons = buttons.filter(
     (button) => isSeparator(button) || button?.visible !== false,
   );
 
-  const offsetY = offsetYMode === 'fixed' ? externalOffsetY : cursorY;
+  const offsetY = offsetYMode === 'fixed' ? externalOffsetY : cursor.y;
+  const offsetX = offsetXMode === 'fixed' ? externalOffsetX : cursor.x;
 
   function handleMouseEnter(event) {
-    const { clientY, target } = event;
-    if (!target || offsetYMode !== 'cursor') return;
-    const targetElementRect = (target as HTMLElement)?.getBoundingClientRect();
-    const y = clientY - targetElementRect.y;
-    setCursorY(y);
+    const { clientX, clientY, currentTarget } = event;
+    if (!(currentTarget instanceof Element)) return;
+    const rect = currentTarget.getBoundingClientRect();
+
+    setCursor((prev) => ({
+      x: offsetXMode === 'cursor' ? clientX - rect.left : prev.x,
+      y: offsetYMode === 'cursor' ? clientY - rect.top : prev.y,
+    }));
   }
+
   return (
     <Popover
       minimal
@@ -133,6 +142,8 @@ export function ActionsButtonsPopover(props: ActionsButtonsPopoverProps) {
               direction === 'column' ? [offsetY, offsetX] : [offsetX, offsetY],
           },
         },
+
+        flip: { enabled: autoFlip },
       }}
       content={
         <Container style={contentStyle} flexDirection={direction} gap={space}>