From 9381c2183d98befa81ee5187800909c1377ebcff Mon Sep 17 00:00:00 2001
From: hamed-musallam <35760236+hamed-musallam@users.noreply.github.com>
Date: Tue, 2 Apr 2024 09:26:12 +0200
Subject: [PATCH] fix: crosshair label position (#3001)

---
 src/component/1d/tool/XLabelPointer.tsx   | 24 +++++++----------------
 src/component/2d/tools/XYLabelPointer.tsx | 11 ++---------
 2 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/src/component/1d/tool/XLabelPointer.tsx b/src/component/1d/tool/XLabelPointer.tsx
index 548a97083..c9027f5bc 100644
--- a/src/component/1d/tool/XLabelPointer.tsx
+++ b/src/component/1d/tool/XLabelPointer.tsx
@@ -1,5 +1,5 @@
 import { Spectrum1D } from 'nmr-load-save';
-import { useCallback, CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 
 import { useBrushTracker } from '../../EventsTrackers/BrushTracker';
 import { useMouseTracker } from '../../EventsTrackers/MouseTracker';
@@ -10,10 +10,8 @@ import useSpectrum from '../../hooks/useSpectrum';
 
 const style: CSSProperties = {
   cursor: 'crosshair',
-  transformOrigin: 'bottom right',
   position: 'absolute',
-  top: '-18px',
-  left: '-30px',
+  paddingRight: '5px',
   pointerEvents: 'none',
   overflow: 'visible',
   userSelect: 'none',
@@ -31,16 +29,6 @@ function XLabelPointer() {
     (activeSpectrum as Spectrum1D)?.info.nucleus,
   );
 
-  const getXValue = useCallback(
-    (xVal) => {
-      if (activeSpectrum) {
-        const xInvert = scaleX().invert(xVal);
-        return format(xInvert);
-      }
-    },
-    [activeSpectrum, format, scaleX],
-  );
-
   if (
     !activeSpectrum ||
     brushState.step === 'brushing' ||
@@ -52,15 +40,17 @@ function XLabelPointer() {
   ) {
     return null;
   }
+
+  const x = scaleX().invert(position.x);
+
   return (
     <div
-      key="xLabelPointer"
       style={{
         ...style,
-        transform: `translate(${position.x}px, ${position.y}px)`,
+        transform: `translate(${position.x}px, ${position.y}px) translate(-100%,-100%)`,
       }}
     >
-      <span>{getXValue(position.x)}</span>
+      <span>{format(x)}</span>
     </div>
   );
 }
diff --git a/src/component/2d/tools/XYLabelPointer.tsx b/src/component/2d/tools/XYLabelPointer.tsx
index 7040be9c5..9e3dfeb41 100644
--- a/src/component/2d/tools/XYLabelPointer.tsx
+++ b/src/component/2d/tools/XYLabelPointer.tsx
@@ -10,17 +10,12 @@ import { get1DYScale, useScale2DX, useScale2DY } from '../utilities/scale';
 
 const style: CSSProperties = {
   cursor: 'crosshair',
-  transformOrigin: 'bottom right',
   position: 'absolute',
-  top: '-18px',
-  left: '-88px',
+  paddingRight: '5px',
   fontWeight: 'bold',
   pointerEvents: 'none',
   overflow: 'visible',
   userSelect: 'none',
-  width: '85px',
-  textAlign: 'right',
-  zIndex: 9,
 };
 
 function XYLabelPointer({ layout, data1D }) {
@@ -46,7 +41,6 @@ function XYLabelPointer({ layout, data1D }) {
 
   const nuclei = activeTab.split(',');
   const [formatX, formatY] = useFormatNumberByNucleus(nuclei);
-  // const spectrum = useSpectrum();
   const scale2DX = useScale2DX();
   const scale2DY = useScale2DY();
 
@@ -140,10 +134,9 @@ function XYLabelPointer({ layout, data1D }) {
 
   return (
     <div
-      key="xLabelPointer"
       style={{
         ...style,
-        transform: `translate(${position.x}px, ${position.y}px)`,
+        transform: `translate(${position.x}px, ${position.y}px) translate(-100%,-100%)`,
       }}
     >
       <span>{formatY(getYValue())}</span>