From 7c1155ff7d2fbce1e245000a753a3dea44a181d6 Mon Sep 17 00:00:00 2001
From: Marco Vettorello <vettorello.marco@gmail.com>
Date: Thu, 28 Mar 2019 14:33:33 +0100
Subject: [PATCH] fix(crosshair): use offsetX/Y instead of clientX/Y (#128)

This commit correct the behaviour of using clientX and clientY instead of offsetX and offsetY. The
previous behavious used the synthetic position of the mouse cursor, this commit change it to use the
native event value that already take care of the border box.

fix #123
---
 src/components/chart_resizer.tsx               | 6 ++----
 src/components/react_canvas/reactive_chart.tsx | 8 ++------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/chart_resizer.tsx b/src/components/chart_resizer.tsx
index 2414333046..6a91962460 100644
--- a/src/components/chart_resizer.tsx
+++ b/src/components/chart_resizer.tsx
@@ -26,10 +26,8 @@ class Resizer extends React.Component<ResizerProps> {
   }
 
   onResize = (entries: ResizeObserverEntry[]) => {
-    entries.forEach((entry) => {
-      const { width, height } = entry.contentRect;
-      const { top, left } = entry.target.getBoundingClientRect();
-      this.props.chartStore!.updateParentDimensions(width, height, top, left);
+    entries.forEach(({ contentRect: { width, height } }) => {
+      this.props.chartStore!.updateParentDimensions(width, height, 0, 0);
     });
   }
 
diff --git a/src/components/react_canvas/reactive_chart.tsx b/src/components/react_canvas/reactive_chart.tsx
index e8442f00d8..5cdbbd1825 100644
--- a/src/components/react_canvas/reactive_chart.tsx
+++ b/src/components/react_canvas/reactive_chart.tsx
@@ -278,12 +278,8 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
           left: 0,
           boxSizing: 'border-box',
         }}
-        onMouseMove={({ clientX, clientY }) => {
-          // this cause a layout reflow on the browser https://gist.github.com/paulirish/5d52fb081b3570c81e3a
-          const { left, top } = this.props.chartStore!.parentDimensions;
-          const x = clientX - left;
-          const y = clientY - top;
-          setCursorPosition(x, y);
+        onMouseMove={({ nativeEvent: { offsetX, offsetY } }) => {
+          setCursorPosition(offsetX, offsetY);
         }}
         onMouseLeave={() => {
           setCursorPosition(-1, -1);