Fix calcXY calculation (react-grid-layout#2059)

Author: MaxMusing

lib/GridItem.jsx

@@ -519,14 +519,7 @@ export default class GridItem extends React.Component<Props, State> {
     this.setState({ dragging: newPosition });
 
     // Call callback with this data
-    const { containerPadding } = this.props;
-    const { x, y } = calcXY(
-      positionParams,
-      top - containerPadding[1],
-      left - containerPadding[0],
-      w,
-      h
-    );
+    const { x, y } = calcXY(positionParams, top, left, w, h);
     return onDrag.call(this, i, x, y, {
       e,
       node,
@@ -546,18 +539,12 @@ export default class GridItem extends React.Component<Props, State> {
     if (!this.state.dragging) {
       throw new Error("onDragEnd called before onDragStart.");
     }
-    const { w, h, i, containerPadding } = this.props;
+    const { w, h, i } = this.props;
     const { left, top } = this.state.dragging;
     const newPosition: PartialPosition = { top, left };
     this.setState({ dragging: null });
 
-    const { x, y } = calcXY(
-      this.getPositionParams(),
-      top - containerPadding[1],
-      left - containerPadding[0],
-      w,
-      h
-    );
+    const { x, y } = calcXY(this.getPositionParams(), top, left, w, h);
 
     return onDragStop.call(this, i, x, y, {
       e,

lib/calculateUtils.js

@@ -105,18 +105,14 @@ export function calcXY(
   w: number,
   h: number
 ): { x: number, y: number } {
-  const { margin, cols, rowHeight, maxRows } = positionParams;
+  const { margin, containerPadding, cols, rowHeight, maxRows } = positionParams;
   const colWidth = calcGridColWidth(positionParams);
 
-  // left = colWidth * x + margin * (x + 1)
-  // l = cx + m(x+1)
-  // l = cx + mx + m
-  // l - m = cx + mx
-  // l - m = x(c + m)
-  // (l - m) / (c + m) = x
-  // x = (left - margin) / (coldWidth + margin)
-  let x = Math.round((left - margin[0]) / (colWidth + margin[0]));
-  let y = Math.round((top - margin[1]) / (rowHeight + margin[1]));
+  // left = containerPaddingX + x * (colWidth + marginX)
+  // x * (colWidth + marginX) = left - containerPaddingX
+  // x = (left - containerPaddingX) / (colWidth + marginX)
+  let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));
+  let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));
 
   // Capping
   x = clamp(x, 0, cols - w);

test/spec/lifecycle-test.js

@@ -375,14 +375,14 @@ describe("Lifecycle tests", function () {
         expect(gridLayout.state("droppingDOMNode")).toEqual(null);
 
         // Drag the droppable over the grid layout.
-        dragDroppableTo(wrapper, 200, 150);
+        dragDroppableTo(wrapper, 200, 140);
 
         // We should have the position in our state.
         expect(gridLayout.state("droppingPosition")).toHaveProperty(
           "left",
           200
         );
-        expect(gridLayout.state("droppingPosition")).toHaveProperty("top", 150);
+        expect(gridLayout.state("droppingPosition")).toHaveProperty("top", 140);
         // We should now have the placeholder element in our state.
         expect(gridLayout.state("droppingDOMNode")).toHaveProperty(
           "type",

test/spec/utils-test.js

@@ -657,35 +657,38 @@ describe("calcWH", () => {
 
 describe("calcXY", () => {
   const mockPositionParams = {
-    margin: [0, 0],
-    containerPadding: [0, 0],
-    containerWidth: 500,
+    margin: [20, 20],
+    containerPadding: [50, 50],
+    containerWidth: 560,
     cols: 4,
     rowHeight: 100,
     maxRows: 3
   };
 
   it("return {x:0, y:0}", () => {
-    const TOP = 10;
-    const LEFT = 10;
-    const W = 300;
-    const H = 100;
+    // Midpoint between x=0 and x=1 is at 110
+    const LEFT = 109;
+    const TOP = 100;
+    const W = 1;
+    const H = 1;
     const res = calcXY(mockPositionParams, TOP, LEFT, W, H);
     expect(JSON.stringify(res)).toBe(JSON.stringify({ x: 0, y: 0 }));
   });
   it("return {x:1, y:0}", () => {
+    // Midpoint between x=0 and x=1 is at 110
+    const LEFT = 111;
     const TOP = 0;
-    const LEFT = 100;
-    const W = 0;
-    const H = 0;
+    const W = 1;
+    const H = 1;
     const res = calcXY(mockPositionParams, TOP, LEFT, W, H);
     expect(JSON.stringify(res)).toBe(JSON.stringify({ x: 1, y: 0 }));
   });
   it("return {x:0, y:1}", () => {
-    const TOP = 110;
-    const LEFT = 0;
-    const W = 0;
-    const H = 0;
+    // Midpoint of x=0, y=1 is at (100, 220)
+    const LEFT = 50;
+    const TOP = 170;
+    const W = 1;
+    const H = 1;
     const res = calcXY(mockPositionParams, TOP, LEFT, W, H);
     expect(JSON.stringify(res)).toBe(JSON.stringify({ x: 0, y: 1 }));
   });