Merge pull request #19 from Cohereum/fix-offset-coordinates

Fix for inconsistent values from nativeEvent.offsetX and Y

src/hocs/OvalSelector.js

@@ -1,9 +1,6 @@
-const square = n => Math.pow(n, 2)
+import { getCoordPercentage } from '../utils/offsetCoordinates';
 
-const getCoordPercentage = (e) => ({
-  x: e.nativeEvent.offsetX / e.currentTarget.offsetWidth * 100,
-  y: e.nativeEvent.offsetY / e.currentTarget.offsetHeight * 100
-})
+const square = n => Math.pow(n, 2)
 
 export const TYPE = 'OVAL'
 

src/hocs/PointSelector.js

@@ -1,10 +1,6 @@
+import { getCoordPercentage } from '../utils/offsetCoordinates';
 const MARGIN = 6
 
-const getCoordPercentage = (e) => ({
-  x: e.nativeEvent.offsetX / e.currentTarget.offsetWidth * 100,
-  y: e.nativeEvent.offsetY / e.currentTarget.offsetHeight * 100
-})
-
 const marginToPercentage = (container) => ({
   marginX: MARGIN / container.width * 100,
   marginY: MARGIN / container.height * 100

src/hocs/RectangleSelector.js

@@ -1,7 +1,4 @@
-const getCoordPercentage = (e) => ({
-  x: e.nativeEvent.offsetX / e.currentTarget.offsetWidth * 100,
-  y: e.nativeEvent.offsetY / e.currentTarget.offsetHeight * 100
-})
+import { getCoordPercentage } from '../utils/offsetCoordinates';
 
 export const TYPE = 'RECTANGLE'
 

src/utils/offsetCoordinates.js

@@ -0,0 +1,23 @@
+function getOffsetCoordPercentage(e, container) {
+    // nativeEvent.offsetX gives inconsistent results when dragging
+    // up and to the left rather than the more natural down and to the
+    // right. The reason could be browser implementation (it is still experimental)
+    // or it could be that nativeEvent offsets are based on target rather than
+    // currentTarget.
+    // To keep consistent behavior of the selector use the bounding client rect.
+    const rect = container.getBoundingClientRect();
+    const offsetX = e.clientX - rect.x;
+    const offsetY = e.clientY - rect.y;
+
+    return {
+        x: offsetX / rect.width * 100,
+        y: offsetY / rect.height * 100
+    };
+}
+
+function getCoordPercentage(e) {
+    return getOffsetCoordPercentage(e, e.currentTarget);
+}
+
+
+export { getOffsetCoordPercentage, getCoordPercentage };

src/utils/withRelativeMousePos.js

@@ -1,4 +1,5 @@
 import React, { PureComponent as Component } from 'react'
+import { getOffsetCoordPercentage } from './offsetCoordinates';
 
 const withRelativeMousePos = (key = 'relativeMousePos') => DecoratedComponent => {
   class WithRelativeMousePos extends Component {
@@ -9,10 +10,8 @@ const withRelativeMousePos = (key = 'relativeMousePos') => DecoratedComponent =>
     }
 
     onMouseMove = (e) => {
-      this.setState({
-        x: (e.nativeEvent.offsetX / this.container.width) * 100,
-        y: (e.nativeEvent.offsetY / this.container.height) * 100,
-      })
+      const xystate = getOffsetCoordPercentage(e, this.container);
+      this.setState(xystate);
     }
 
     onMouseLeave = (e) => {