Spacing fix

src/state/get-center-from-impact/get-page-border-box-center/when-reordering.js

@@ -67,6 +67,7 @@ export default ({
       axis,
       moveRelativeTo: moveRelativeTo.page,
       isMoving: draggablePage,
+      isOverHome,
     });
   }
 
@@ -78,6 +79,7 @@ export default ({
       axis,
       moveRelativeTo: displacedClosest,
       isMoving: draggablePage,
+      isOverHome,
     });
   }
 
@@ -86,5 +88,6 @@ export default ({
     axis,
     moveRelativeTo: displacedClosest,
     isMoving: draggablePage,
+    isOverHome,
   });
 };

src/state/get-center-from-impact/move-relative-to.js

@@ -7,6 +7,7 @@ type Args = {|
   axis: Axis,
   moveRelativeTo: BoxModel,
   isMoving: BoxModel,
+  isOverHome: boolean,
 |};
 
 const distanceFromStartToCenter = (axis: Axis, box: BoxModel): number =>
@@ -21,24 +22,51 @@ const distanceFromEndToCenter = (axis: Axis, box: BoxModel): number =>
   box.padding[axis.end] +
   box.contentBox[axis.size] / 2;
 
-export const goAfter = ({ axis, moveRelativeTo, isMoving }: Args): Position =>
+const getCrossAxisCenter = ({
+  axis,
+  moveRelativeTo,
+  isMoving,
+  isOverHome,
+}: Args): number => {
+  // Sometimes we can be in a home list that has items of different sizes.
+  // Eg: columns in a horizontal list
+
+  // home list: use the center from the moving item
+  // foreign list: use the center from the box we are moving relative to
+
+  // TODO: what if a foreign list has items of different sizes?
+
+  const target: BoxModel = isOverHome ? isMoving : moveRelativeTo;
+
+  return target.borderBox.center[axis.crossAxisLine];
+};
+
+export const goAfter = ({
+  axis,
+  moveRelativeTo,
+  isMoving,
+  isOverHome,
+}: Args): Position =>
   patch(
     axis.line,
     // start measuring from the bottom of the target
     moveRelativeTo.marginBox[axis.end] +
       distanceFromStartToCenter(axis, isMoving),
-    // align the moving item to the visual center of the target
-    moveRelativeTo.borderBox.center[axis.crossAxisLine],
+    getCrossAxisCenter({ axis, moveRelativeTo, isMoving, isOverHome }),
   );
 
-export const goBefore = ({ axis, moveRelativeTo, isMoving }: Args): Position =>
+export const goBefore = ({
+  axis,
+  moveRelativeTo,
+  isMoving,
+  isOverHome,
+}: Args): Position =>
   patch(
     axis.line,
     // start measuring from the top of the target
     moveRelativeTo.marginBox[axis.start] -
       distanceFromEndToCenter(axis, isMoving),
-    // align the moving item to the visual center of the target
-    moveRelativeTo.borderBox.center[axis.crossAxisLine],
+    getCrossAxisCenter({ axis, moveRelativeTo, isMoving, isOverHome }),
   );
 
 type GoIntoArgs = {|

test/unit/state/get-center-from-impact/get-page-border-box-center.spec.js

@@ -104,6 +104,7 @@ const getDisplacement = (draggable: DraggableDimension): Displacement => ({
         axis,
         moveRelativeTo: displacedInHome3,
         isMoving: preset.inHome1.page,
+        isOverHome: true,
       });
       expect(result).toEqual(expectedCenter);
     });
@@ -152,6 +153,7 @@ const getDisplacement = (draggable: DraggableDimension): Displacement => ({
         axis,
         moveRelativeTo: displacedInHome1,
         isMoving: preset.inHome3.page,
+        isOverHome: true,
       });
       expect(result).toEqual(expectedCenter);
     });
@@ -192,6 +194,7 @@ const getDisplacement = (draggable: DraggableDimension): Displacement => ({
         axis,
         moveRelativeTo: preset.inForeign4.page,
         isMoving: preset.inHome1.page,
+        isOverHome: false,
       });
       expect(result).toEqual(expectedCenter);
     });

test/unit/state/get-center-from-impact/move-relative-to.spec.js

@@ -47,64 +47,126 @@ const isMoving: BoxModel = createBox({
   padding: getAssortedSpacing(),
 });
 
+const distanceFromStartToCenter = (axis: Axis, box: BoxModel): number =>
+  box.margin[axis.start] +
+  box.border[axis.start] +
+  box.padding[axis.start] +
+  box.contentBox[axis.size] / 2;
+
+const distanceFromEndToCenter = (axis: Axis, box: BoxModel): number =>
+  box.margin[axis.end] +
+  box.border[axis.end] +
+  box.padding[axis.end] +
+  box.contentBox[axis.size] / 2;
+
 [vertical, horizontal].forEach((axis: Axis) => {
-  it('should align before the target', () => {
-    const newCenter: Position = goBefore({
-      axis,
-      moveRelativeTo,
-      isMoving,
-    });
+  describe(`on ${axis.direction} axis`, () => {
+    it('should move into the start of the context box of the target', () => {
+      const newCenter: Position = goIntoStart({
+        axis,
+        moveInto: moveRelativeTo,
+        isMoving,
+      });
 
-    const expected: Position = patch(
-      axis.line,
-      moveRelativeTo.marginBox[axis.start] -
-        (isMoving.margin[axis.end] +
-          isMoving.border[axis.end] +
-          isMoving.padding[axis.end] +
-          isMoving.contentBox[axis.size] / 2),
-      moveRelativeTo.borderBox.center[axis.crossAxisLine],
-    );
-
-    expect(newCenter).toEqual(expected);
-  });
+      const expected: Position = patch(
+        axis.line,
+        // start from the start of the context box of the target
+        moveRelativeTo.contentBox[axis.start] +
+          // add the distance from the start to the center of the moving item
+          distanceFromStartToCenter(axis, isMoving),
+        // move on the same cross axis as the list we are moving into
+        moveRelativeTo.contentBox.center[axis.crossAxisLine],
+      );
 
-  it('should align after the target', () => {
-    const newCenter: Position = goAfter({
-      axis,
-      moveRelativeTo,
-      isMoving,
+      expect(newCenter).toEqual(expected);
     });
 
-    const expected: Position = patch(
-      axis.line,
-      moveRelativeTo.marginBox[axis.end] +
-        isMoving.margin[axis.start] +
-        isMoving.border[axis.start] +
-        isMoving.padding[axis.start] +
-        isMoving.contentBox[axis.size] / 2,
-      moveRelativeTo.borderBox.center[axis.crossAxisLine],
-    );
-
-    expect(newCenter).toEqual(expected);
-  });
+    describe('is over home list', () => {
+      it('should align before the target', () => {
+        const newCenter: Position = goBefore({
+          axis,
+          moveRelativeTo,
+          isMoving,
+          isOverHome: true,
+        });
+
+        const expected: Position = patch(
+          axis.line,
+          // start at the start of the item we are moving relative to
+          moveRelativeTo.marginBox[axis.start] -
+            // add the space from the end of the dragging item to its center
+            distanceFromEndToCenter(axis, isMoving),
+          // move on the same cross axis as where the item started
+          isMoving.borderBox.center[axis.crossAxisLine],
+        );
+
+        expect(newCenter).toEqual(expected);
+      });
+
+      it('should align after the target', () => {
+        const newCenter: Position = goAfter({
+          axis,
+          moveRelativeTo,
+          isMoving,
+          isOverHome: true,
+        });
 
-  it('should move into the start of the context box of the target', () => {
-    const newCenter: Position = goIntoStart({
-      axis,
-      moveInto: moveRelativeTo,
-      isMoving,
+        const expected: Position = patch(
+          axis.line,
+          // start at the end of the margin box
+          moveRelativeTo.marginBox[axis.end] +
+            // add the distance to the start of the target center
+            distanceFromStartToCenter(axis, isMoving),
+          // move on the same cross axis as where the item started
+          isMoving.borderBox.center[axis.crossAxisLine],
+        );
+
+        expect(newCenter).toEqual(expected);
+      });
     });
 
-    const expected: Position = patch(
-      axis.line,
-      moveRelativeTo.contentBox[axis.start] +
-        isMoving.margin[axis.start] +
-        isMoving.border[axis.start] +
-        isMoving.padding[axis.start] +
-        isMoving.contentBox[axis.size] / 2,
-      moveRelativeTo.contentBox.center[axis.crossAxisLine],
-    );
-
-    expect(newCenter).toEqual(expected);
+    describe('is over foreign list', () => {
+      it('should align before the target', () => {
+        const newCenter: Position = goBefore({
+          axis,
+          moveRelativeTo,
+          isMoving,
+          isOverHome: false,
+        });
+
+        const expected: Position = patch(
+          axis.line,
+          // start at the start of the target
+          moveRelativeTo.marginBox[axis.start] -
+            // subtract the space from end of the moving item to its center
+            distanceFromEndToCenter(axis, isMoving),
+          // move on the cross axis of the target
+          moveRelativeTo.borderBox.center[axis.crossAxisLine],
+        );
+
+        expect(newCenter).toEqual(expected);
+      });
+
+      it('should align after the target', () => {
+        const newCenter: Position = goAfter({
+          axis,
+          moveRelativeTo,
+          isMoving,
+          isOverHome: false,
+        });
+
+        const expected: Position = patch(
+          axis.line,
+          // start at the end of the target
+          moveRelativeTo.marginBox[axis.end] +
+            // add the space from the start of the moving item to its center
+            distanceFromStartToCenter(axis, isMoving),
+          // move on the cross axis of the target
+          moveRelativeTo.borderBox.center[axis.crossAxisLine],
+        );
+
+        expect(newCenter).toEqual(expected);
+      });
+    });
   });
 });