From af5c60992c5283edb3fdc41b718af7dc94371621 Mon Sep 17 00:00:00 2001
From: Damian Pieczynski <piecyk@gmail.com>
Date: Wed, 18 Nov 2020 20:48:01 +0100
Subject: [PATCH] feat: add `roundOffsets` option to computeStyles modifier

---
 src/modifiers/computeStyles.js      | 17 +++++++++++++----
 src/modifiers/computeStyles.test.js |  5 +++++
 src/utils/computeOffsets.js         |  6 ++----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/modifiers/computeStyles.js b/src/modifiers/computeStyles.js
index 5295890638..22f0729914 100644
--- a/src/modifiers/computeStyles.js
+++ b/src/modifiers/computeStyles.js
@@ -18,6 +18,7 @@ import getBasePlacement from '../utils/getBasePlacement';
 export type Options = {
   gpuAcceleration: boolean,
   adaptive: boolean,
+  roundOffsets: boolean,
 };
 
 const unsetSides = {
@@ -30,7 +31,7 @@ const unsetSides = {
 // Round the offsets to the nearest suitable subpixel based on the DPR.
 // Zooming can change the DPR, but it seems to report a value that will
 // cleanly divide the values into the appropriate subpixels.
-function roundOffsets({ x, y }): Offsets {
+function roundOffsetsByDPR({ x, y }): Offsets {
   const win: Window = window;
   const dpr = win.devicePixelRatio || 1;
 
@@ -48,6 +49,7 @@ export function mapToStyles({
   position,
   gpuAcceleration,
   adaptive,
+  roundOffsets,
 }: {
   popper: HTMLElement,
   popperRect: Rect,
@@ -56,8 +58,9 @@ export function mapToStyles({
   position: PositioningStrategy,
   gpuAcceleration: boolean,
   adaptive: boolean,
+  roundOffsets: boolean,
 }) {
-  let { x, y } = roundOffsets(offsets);
+  let { x = 0, y = 0 } = roundOffsets ? roundOffsetsByDPR(offsets) : offsets;
 
   const hasX = offsets.hasOwnProperty('x');
   const hasY = offsets.hasOwnProperty('y');
@@ -118,7 +121,11 @@ export function mapToStyles({
 }
 
 function computeStyles({ state, options }: ModifierArguments<Options>) {
-  const { gpuAcceleration = true, adaptive = true } = options;
+  const {
+    gpuAcceleration = true,
+    adaptive = true,
+    roundOffsets = true,
+  } = options;
 
   if (__DEV__) {
     const transitionProperty =
@@ -127,7 +134,7 @@ function computeStyles({ state, options }: ModifierArguments<Options>) {
     if (
       adaptive &&
       ['transform', 'top', 'right', 'bottom', 'left'].some(
-        property => transitionProperty.indexOf(property) >= 0
+        (property) => transitionProperty.indexOf(property) >= 0
       )
     ) {
       console.warn(
@@ -162,6 +169,7 @@ function computeStyles({ state, options }: ModifierArguments<Options>) {
         offsets: state.modifiersData.popperOffsets,
         position: state.options.strategy,
         adaptive,
+        roundOffsets,
       }),
     };
   }
@@ -174,6 +182,7 @@ function computeStyles({ state, options }: ModifierArguments<Options>) {
         offsets: state.modifiersData.arrow,
         position: 'absolute',
         adaptive: false,
+        roundOffsets,
       }),
     };
   }
diff --git a/src/modifiers/computeStyles.test.js b/src/modifiers/computeStyles.test.js
index 296670b3a9..da5470aff4 100644
--- a/src/modifiers/computeStyles.test.js
+++ b/src/modifiers/computeStyles.test.js
@@ -13,6 +13,7 @@ it('computes the popper styles', () => {
       position: 'absolute',
       gpuAcceleration: true,
       adaptive: true,
+      roundOffsets: true,
     })
   ).toMatchSnapshot();
 
@@ -25,6 +26,7 @@ it('computes the popper styles', () => {
       position: 'absolute',
       gpuAcceleration: false,
       adaptive: true,
+      roundOffsets: true,
     })
   ).toMatchSnapshot();
 
@@ -37,6 +39,7 @@ it('computes the popper styles', () => {
       position: 'absolute',
       gpuAcceleration: false,
       adaptive: true,
+      roundOffsets: true,
     })
   ).toMatchSnapshot();
 
@@ -49,6 +52,7 @@ it('computes the popper styles', () => {
       position: 'absolute',
       gpuAcceleration: false,
       adaptive: true,
+      roundOffsets: true,
     })
   ).toMatchSnapshot();
 
@@ -65,6 +69,7 @@ it('computes the arrow styles', () => {
       position: 'absolute',
       gpuAcceleration: true,
       adaptive: false,
+      roundOffsets: true,
     })
   ).toMatchSnapshot();
 });
diff --git a/src/utils/computeOffsets.js b/src/utils/computeOffsets.js
index ed286ee6f0..404b56a573 100644
--- a/src/utils/computeOffsets.js
+++ b/src/utils/computeOffsets.js
@@ -68,13 +68,11 @@ export default function computeOffsets({
     switch (variation) {
       case start:
         offsets[mainAxis] =
-          Math.floor(offsets[mainAxis]) -
-          Math.floor(reference[len] / 2 - element[len] / 2);
+          offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
         break;
       case end:
         offsets[mainAxis] =
-          Math.floor(offsets[mainAxis]) +
-          Math.ceil(reference[len] / 2 - element[len] / 2);
+          offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
         break;
       default:
     }