Tests for direction movement

src/state/move-in-direction/index.js

@@ -0,0 +1,121 @@
+// @flow
+import type { Position } from 'css-box-model';
+import { subtract } from '../position';
+import getHomeLocation from '../get-home-location';
+import moveCrossAxis from './move-cross-axis';
+import type { Result as MoveCrossAxisResult } from './move-cross-axis/move-cross-axis-types';
+import moveToNextIndex from './move-to-next-index';
+import type { Result as MoveToNextIndexResult } from './move-to-next-index/move-to-next-index-types';
+import type {
+  DraggingState,
+  DragImpact,
+  DraggableLocation,
+  Direction,
+} from '../../types';
+
+type Args = {|
+  state: DraggingState,
+  action: 'MOVE_UP' | 'MOVE_RIGHT' | 'MOVE_DOWN' | 'MOVE_LEFT',
+|};
+
+export type Result = {|
+  clientSelection: Position,
+  impact: DragImpact,
+  scrollJumpRequest: ?Position,
+|};
+
+export default ({ state, action }: Args): ?Result => {
+  const { droppable, isMainAxisMovementAllowed } = (() => {
+    if (state.impact.destination) {
+      return {
+        droppable:
+          state.dimensions.droppables[state.impact.destination.droppableId],
+        isMainAxisMovementAllowed: true,
+      };
+    }
+
+    // No destination - this can happen when lifting an a disabled droppable
+    // In this case we want to allow movement out of the list with a keyboard
+    // but not within the list
+    return {
+      droppable: state.dimensions.droppables[state.critical.droppable.id],
+      isMainAxisMovementAllowed: false,
+    };
+  })();
+
+  const direction: Direction = droppable.axis.direction;
+  const isMovingOnMainAxis: boolean =
+    (direction === 'vertical' &&
+      (action === 'MOVE_UP' || action === 'MOVE_DOWN')) ||
+    (direction === 'horizontal' &&
+      (action === 'MOVE_LEFT' || action === 'MOVE_RIGHT'));
+
+  // This movement is not permitted right now
+  if (isMovingOnMainAxis && !isMainAxisMovementAllowed) {
+    return null;
+  }
+
+  const isMovingForward: boolean =
+    action === 'MOVE_DOWN' || action === 'MOVE_RIGHT';
+
+  if (isMovingOnMainAxis) {
+    const result: ?MoveToNextIndexResult = moveToNextIndex({
+      isMovingForward,
+      draggableId: state.critical.draggable.id,
+      droppable,
+      draggables: state.dimensions.draggables,
+      previousPageBorderBoxCenter: state.current.page.borderBoxCenter,
+      previousImpact: state.impact,
+      viewport: state.viewport,
+    });
+
+    // Cannot move (at the beginning or end of a list)
+    if (!result) {
+      return null;
+    }
+
+    const impact: DragImpact = result.impact;
+    const pageBorderBoxCenter: Position = result.pageBorderBoxCenter;
+    // TODO: not sure if this is correct
+    const clientBorderBoxCenter: Position = subtract(
+      pageBorderBoxCenter,
+      state.viewport.scroll.current,
+    );
+
+    return {
+      impact,
+      clientSelection: clientBorderBoxCenter,
+      scrollJumpRequest: result.scrollJumpRequest,
+    };
+  }
+
+  // moving on cross axis
+  const home: DraggableLocation = getHomeLocation(state.critical);
+
+  const result: ?MoveCrossAxisResult = moveCrossAxis({
+    isMovingForward,
+    pageBorderBoxCenter: state.current.page.borderBoxCenter,
+    draggableId: state.critical.draggable.id,
+    droppableId: droppable.descriptor.id,
+    home,
+    draggables: state.dimensions.draggables,
+    droppables: state.dimensions.droppables,
+    previousImpact: state.impact,
+    viewport: state.viewport,
+  });
+
+  if (!result) {
+    return null;
+  }
+
+  const clientSelection: Position = subtract(
+    result.pageBorderBoxCenter,
+    state.viewport.scroll.current,
+  );
+
+  return {
+    clientSelection,
+    impact: result.impact,
+    scrollJumpRequest: null,
+  };
+};

src/state/move-cross-axis/get-best-cross-axis-droppable.js → src/state/move-in-direction/move-cross-axis/get-best-cross-axis-droppable.js

@@ -1,17 +1,17 @@
 // @flow
 import invariant from 'tiny-invariant';
 import { type Position, type Rect } from 'css-box-model';
-import { closest } from '../position';
-import isWithin from '../is-within';
-import { getCorners } from '../spacing';
-import isPartiallyVisibleThroughFrame from '../visibility/is-partially-visible-through-frame';
-import { toDroppableList } from '../dimension-structures';
+import { closest } from '../../position';
+import isWithin from '../../is-within';
+import { getCorners } from '../../spacing';
+import isPartiallyVisibleThroughFrame from '../../visibility/is-partially-visible-through-frame';
+import { toDroppableList } from '../../dimension-structures';
 import type {
   Axis,
   DroppableDimension,
   DroppableDimensionMap,
   Viewport,
-} from '../../types';
+} from '../../../types';
 
 type GetBestDroppableArgs = {|
   isMovingForward: boolean,
@@ -74,16 +74,16 @@ export default ({
       (droppable: DroppableDimension): boolean => {
         const targetClipped: Rect = getSafeClipped(droppable);
 
+        // is the target in front of the source on the cross axis?
         if (isMovingForward) {
-          // is the droppable in front of the source on the cross axis?
           return (
-            sourceClipped[axis.crossAxisEnd] <=
-            targetClipped[axis.crossAxisStart]
+            sourceClipped[axis.crossAxisEnd] < targetClipped[axis.crossAxisEnd]
           );
         }
-        // is the droppable behind the source on the cross axis?
+        // is the target behind the source on the cross axis?
         return (
-          targetClipped[axis.crossAxisEnd] <= sourceClipped[axis.crossAxisStart]
+          targetClipped[axis.crossAxisStart] <
+          sourceClipped[axis.crossAxisStart]
         );
       },
     )

src/state/move-cross-axis/get-closest-draggable.js → src/state/move-in-direction/move-cross-axis/get-closest-draggable.js

@@ -1,14 +1,14 @@
 // @flow
 import { type Position } from 'css-box-model';
-import { distance } from '../position';
-import { isTotallyVisible } from '../visibility/is-visible';
-import withDroppableDisplacement from '../with-droppable-displacement';
+import { distance } from '../../position';
+import { isTotallyVisible } from '../../visibility/is-visible';
+import withDroppableDisplacement from '../../with-droppable-displacement';
 import type {
   Viewport,
   Axis,
   DraggableDimension,
   DroppableDimension,
-} from '../../types';
+} from '../../../types';
 
 type Args = {|
   axis: Axis,

src/state/move-cross-axis/index.js → src/state/move-in-direction/move-cross-axis/index.js

@@ -3,8 +3,8 @@ import { type Position } from 'css-box-model';
 import getBestCrossAxisDroppable from './get-best-cross-axis-droppable';
 import getClosestDraggable from './get-closest-draggable';
 import moveToNewDroppable from './move-to-new-droppable';
-import noImpact from '../no-impact';
-import getDraggablesInsideDroppable from '../get-draggables-inside-droppable';
+import noImpact from '../../no-impact';
+import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable';
 import type { Result } from './move-cross-axis-types';
 import type {
   DraggableId,
@@ -16,7 +16,7 @@ import type {
   DraggableLocation,
   DragImpact,
   Viewport,
-} from '../../types';
+} from '../../../types';
 
 type Args = {|
   isMovingForward: boolean,

src/state/move-cross-axis/move-cross-axis-types.js → src/state/move-in-direction/move-cross-axis/move-cross-axis-types.js

@@ -1,6 +1,6 @@
 // @flow
 import { type Position } from 'css-box-model';
-import type { DragImpact } from '../../types';
+import type { DragImpact } from '../../../types';
 
 export type Result = {|
   // how far the draggable needs to move to be in its new home

src/state/move-cross-axis/move-to-new-droppable/index.js → src/state/move-in-direction/move-cross-axis/move-to-new-droppable/index.js

@@ -3,15 +3,15 @@ import invariant from 'tiny-invariant';
 import { type Position } from 'css-box-model';
 import toHomeList from './to-home-list';
 import toForeignList from './to-foreign-list';
-import { patch } from '../../position';
+import { patch } from '../../../position';
 import type { Result } from '../move-cross-axis-types';
 import type {
   DraggableDimension,
   DroppableDimension,
   DraggableLocation,
   DragImpact,
   Viewport,
-} from '../../../types';
+} from '../../../../types';
 
 type Args = {|
   // the current center position of the draggable

src/state/move-cross-axis/move-to-new-droppable/to-foreign-list.js → src/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-foreign-list.js

@@ -1,18 +1,18 @@
 // @flow
 import invariant from 'tiny-invariant';
 import { type Position } from 'css-box-model';
-import moveToEdge from '../../move-to-edge';
+import moveToEdge from '../../../move-to-edge';
 import type { Result } from '../move-cross-axis-types';
-import getDisplacement from '../../get-displacement';
-import withDroppableDisplacement from '../../with-droppable-displacement';
+import getDisplacement from '../../../get-displacement';
+import withDroppableDisplacement from '../../../with-droppable-displacement';
 import type {
   Axis,
   DragImpact,
   DraggableDimension,
   DroppableDimension,
   Displacement,
   Viewport,
-} from '../../../types';
+} from '../../../../types';
 
 type Args = {|
   amount: Position,

src/state/move-cross-axis/move-to-new-droppable/to-home-list.js → src/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-home-list.js

@@ -1,10 +1,10 @@
 // @flow
 import invariant from 'tiny-invariant';
 import { type Position } from 'css-box-model';
-import moveToEdge from '../../move-to-edge';
-import getDisplacement from '../../get-displacement';
-import withDroppableDisplacement from '../../with-droppable-displacement';
-import type { Edge } from '../../move-to-edge';
+import moveToEdge from '../../../move-to-edge';
+import getDisplacement from '../../../get-displacement';
+import withDroppableDisplacement from '../../../with-droppable-displacement';
+import type { Edge } from '../../../move-to-edge';
 import type { Result } from '../move-cross-axis-types';
 import type {
   Axis,
@@ -13,7 +13,7 @@ import type {
   DragImpact,
   DraggableDimension,
   DroppableDimension,
-} from '../../../types';
+} from '../../../../types';
 
 type Args = {|
   amount: Position,

src/state/move-to-next-index/get-forced-displacement.js → src/state/move-in-direction/move-to-next-index/get-forced-displacement.js

@@ -1,6 +1,6 @@
 // @flow
 import invariant from 'tiny-invariant';
-import getDisplacement from '../get-displacement';
+import getDisplacement from '../../get-displacement';
 import type {
   Viewport,
   Axis,
@@ -10,7 +10,7 @@ import type {
   DroppableDimension,
   DraggableDimension,
   Displacement,
-} from '../../types';
+} from '../../../types';
 
 type WithAdded = {|
   add: DraggableId,

src/state/move-to-next-index/in-foreign-list.js → src/state/move-in-direction/move-to-next-index/in-foreign-list.js

@@ -1,21 +1,21 @@
 // @flow
 import invariant from 'tiny-invariant';
 import { type Position } from 'css-box-model';
-import getDraggablesInsideDroppable from '../get-draggables-inside-droppable';
-import { patch, subtract } from '../position';
-import withDroppableDisplacement from '../with-droppable-displacement';
-import moveToEdge from '../move-to-edge';
+import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable';
+import { patch, subtract } from '../../position';
+import withDroppableDisplacement from '../../with-droppable-displacement';
+import moveToEdge from '../../move-to-edge';
 import isTotallyVisibleInNewLocation from './is-totally-visible-in-new-location';
 import { withFirstAdded, withFirstRemoved } from './get-forced-displacement';
-import type { Edge } from '../move-to-edge';
+import type { Edge } from '../../move-to-edge';
 import type { Args, Result } from './move-to-next-index-types';
 import type {
   DraggableLocation,
   DraggableDimension,
   Axis,
   DragImpact,
   Displacement,
-} from '../../types';
+} from '../../../types';
 
 export default ({
   isMovingForward,

src/state/move-to-next-index/in-home-list.js → src/state/move-in-direction/move-to-next-index/in-home-list.js

@@ -1,21 +1,21 @@
 // @flow
 import invariant from 'tiny-invariant';
 import { type Position } from 'css-box-model';
-import getDraggablesInsideDroppable from '../get-draggables-inside-droppable';
-import { patch, subtract } from '../position';
-import withDroppableDisplacement from '../with-droppable-displacement';
+import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable';
+import { patch, subtract } from '../../position';
+import withDroppableDisplacement from '../../with-droppable-displacement';
 import isTotallyVisibleInNewLocation from './is-totally-visible-in-new-location';
-import moveToEdge from '../move-to-edge';
+import moveToEdge from '../../move-to-edge';
 import { withFirstAdded, withFirstRemoved } from './get-forced-displacement';
-import type { Edge } from '../move-to-edge';
+import type { Edge } from '../../move-to-edge';
 import type { Args, Result } from './move-to-next-index-types';
 import type {
   DraggableLocation,
   DraggableDimension,
   Displacement,
   Axis,
   DragImpact,
-} from '../../types';
+} from '../../../types';
 
 export default ({
   isMovingForward,

src/state/move-to-next-index/index.js → src/state/move-in-direction/move-to-next-index/index.js

@@ -2,7 +2,7 @@
 import inHomeList from './in-home-list';
 import inForeignList from './in-foreign-list';
 import type { Args, Result } from './move-to-next-index-types';
-import type { DraggableDimension } from '../../types';
+import type { DraggableDimension } from '../../../types';
 
 export default (args: Args): ?Result => {
   const { draggableId, draggables, droppable } = args;

src/state/move-to-next-index/is-totally-visible-in-new-location.js → src/state/move-in-direction/move-to-next-index/is-totally-visible-in-new-location.js

@@ -1,9 +1,9 @@
 // @flow
 import { type Position, type Rect, type Spacing } from 'css-box-model';
-import { subtract } from '../position';
-import { offsetByPosition } from '../spacing';
-import { isTotallyVisible } from '../visibility/is-visible';
-import type { DraggableDimension, DroppableDimension } from '../../types';
+import { subtract } from '../../position';
+import { offsetByPosition } from '../../spacing';
+import { isTotallyVisible } from '../../visibility/is-visible';
+import type { DraggableDimension, DroppableDimension } from '../../../types';
 
 type Args = {|
   draggable: DraggableDimension,

src/state/move-to-next-index/move-to-next-index-types.js → src/state/move-in-direction/move-to-next-index/move-to-next-index-types.js

@@ -6,7 +6,7 @@ import type {
   DroppableDimension,
   DraggableDimensionMap,
   Viewport,
-} from '../../types';
+} from '../../../types';
 
 export type Args = {|
   isMovingForward: boolean,