@helpdice/draggable 0.0.0-stage → 0.0.2

package/src/state/move-in-direction/move-cross-axis/get-best-cross-axis-droppable.ts

@@ -0,0 +1,169 @@
+// @flow
+import { type Position, type Rect } from 'css-box-model';
+import { invariant } from '../../../invariant';
+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';
+
+// Exact
+type GetBestDroppableArgs = {
+  isMovingForward: boolean,
+  // the current position of the dragging item
+  pageBorderBoxCenter: Position,
+  // the home of the draggable
+  source: DroppableDimension,
+  // all the droppables in the system
+  droppables: DroppableDimensionMap,
+  viewport: Viewport,
+};
+
+const getKnownActive = (droppable: DroppableDimension): Rect => {
+  const rect: Rect | null = droppable.subject.active;
+
+  invariant(rect, 'Cannot get clipped area from droppable');
+
+  return rect;
+};
+
+export default ({
+  isMovingForward,
+  pageBorderBoxCenter,
+  source,
+  droppables,
+  viewport,
+}: GetBestDroppableArgs): DroppableDimension | null => {
+  const active: Rect | null = source.subject.active;
+
+  if (!active) {
+    return null;
+  }
+
+  const axis: Axis = source.axis;
+  const isBetweenSourceClipped = isWithin(active[axis.start], active[axis.end]);
+  const candidates: DroppableDimension[] = toDroppableList(droppables)
+    // Remove the source droppable from the list
+    .filter((droppable: DroppableDimension): boolean => droppable !== source)
+    // Remove any options that are not enabled
+    .filter((droppable: DroppableDimension): boolean => droppable.isEnabled)
+    // Remove any droppables that do not have a visible subject
+    .filter((droppable: DroppableDimension): boolean =>
+      Boolean(droppable.subject.active),
+    )
+    // Remove any that are not visible in the window
+    .filter((droppable: DroppableDimension): boolean =>
+      isPartiallyVisibleThroughFrame(viewport.frame)(getKnownActive(droppable)),
+    )
+    .filter((droppable: DroppableDimension): boolean => {
+      const activeOfTarget: Rect = getKnownActive(droppable);
+
+      // is the target in front of the source on the cross axis?
+      if (isMovingForward) {
+        return active[axis.crossAxisEnd] < activeOfTarget[axis.crossAxisEnd];
+      }
+      // is the target behind the source on the cross axis?
+      return activeOfTarget[axis.crossAxisStart] < active[axis.crossAxisStart];
+    })
+    // Must have some overlap on the main axis
+    .filter((droppable: DroppableDimension): boolean => {
+      const activeOfTarget: Rect = getKnownActive(droppable);
+
+      const isBetweenDestinationClipped = isWithin(
+        activeOfTarget[axis.start],
+        activeOfTarget[axis.end],
+      );
+
+      return (
+        isBetweenSourceClipped(activeOfTarget[axis.start]) ||
+        isBetweenSourceClipped(activeOfTarget[axis.end]) ||
+        isBetweenDestinationClipped(active[axis.start]) ||
+        isBetweenDestinationClipped(active[axis.end])
+      );
+    })
+    // Sort on the cross axis
+    .sort((a: DroppableDimension, b: DroppableDimension) => {
+      const first: number = getKnownActive(a)[axis.crossAxisStart];
+      const second: number = getKnownActive(b)[axis.crossAxisStart];
+
+      if (isMovingForward) {
+        return first - second;
+      }
+      return second - first;
+    })
+    // Find the droppables that have the same cross axis value as the first item
+    .filter(
+      (
+        droppable: DroppableDimension,
+        _index: number,
+        array: DroppableDimension[],
+      ): boolean =>
+        getKnownActive(droppable)[axis.crossAxisStart] ===
+        getKnownActive(array[0])[axis.crossAxisStart],
+    );
+
+  // no possible candidates
+  if (!candidates.length) {
+    return null;
+  }
+
+  // only one result - all done!
+  if (candidates.length === 1) {
+    return candidates[0];
+  }
+
+  // At this point we have a number of candidates that
+  // all have the same axis.crossAxisStart value.
+
+  // Check to see if the center position is within the size of a Droppable on the main axis
+  const contains: DroppableDimension[] = candidates.filter(
+    (droppable: DroppableDimension) => {
+      const isWithinDroppable = isWithin(
+        getKnownActive(droppable)[axis.start],
+        getKnownActive(droppable)[axis.end],
+      );
+      return isWithinDroppable(pageBorderBoxCenter[axis.line]);
+    },
+  );
+
+  if (contains.length === 1) {
+    return contains[0];
+  }
+
+  // The center point of the draggable falls on the boundary between two droppables
+  if (contains.length > 1) {
+    // sort on the main axis and choose the first
+    return contains.sort(
+      (a: DroppableDimension, b: DroppableDimension): number =>
+        getKnownActive(a)[axis.start] - getKnownActive(b)[axis.start],
+    )[0];
+  }
+
+  // The center is not contained within any droppable
+  // 1. Find the candidate that has the closest corner
+  // 2. If there is a tie - choose the one that is first on the main axis
+  return candidates.sort(
+    (a: DroppableDimension, b: DroppableDimension): number => {
+      const first = closest(pageBorderBoxCenter, getCorners(getKnownActive(a)));
+      const second = closest(
+        pageBorderBoxCenter,
+        getCorners(getKnownActive(b)),
+      );
+
+      // if the distances are not equal - choose the shortest
+      if (first !== second) {
+        return first - second;
+      }
+
+      // They both have the same distance -
+      // choose the one that is first on the main axis
+      return getKnownActive(a)[axis.start] - getKnownActive(b)[axis.start];
+    },
+  )[0];
+};

package/src/state/move-in-direction/move-cross-axis/get-closest-draggable.ts

@@ -0,0 +1,80 @@
+// @flow
+import { type Position } from 'css-box-model';
+import type {
+  Viewport,
+  DraggableDimension,
+  DroppableDimension,
+  LiftEffect,
+} from '../../../types';
+import { distance } from '../../position';
+import { isTotallyVisible } from '../../visibility/is-visible';
+import withDroppableDisplacement from '../../with-scroll-change/with-droppable-displacement';
+import {
+  getCurrentPageBorderBox,
+  getCurrentPageBorderBoxCenter,
+} from './without-starting-displacement';
+
+// Exact
+type Args = {
+  pageBorderBoxCenter: Position,
+  viewport: Viewport,
+  // the droppable that is being moved to
+  destination: DroppableDimension,
+  // the droppables inside the destination
+  insideDestination: DraggableDimension[],
+  afterCritical: LiftEffect,
+};
+
+export default ({
+  pageBorderBoxCenter,
+  viewport,
+  destination,
+  insideDestination,
+  afterCritical,
+}: Args): DraggableDimension | null => {
+  const sorted: DraggableDimension[] = insideDestination
+    .filter((draggable: DraggableDimension): boolean =>
+      // Allowing movement to draggables that are not visible in the viewport
+      // but must be visible in the droppable
+      // We can improve this, but this limitation is easier for now
+      isTotallyVisible({
+        target: getCurrentPageBorderBox(draggable, afterCritical),
+        destination,
+        viewport: viewport.frame,
+        withDroppableDisplacement: true,
+      }),
+    )
+    .sort((a: DraggableDimension, b: DraggableDimension): number => {
+      // Need to consider the change in scroll in the destination
+      const distanceToA = distance(
+        pageBorderBoxCenter,
+        withDroppableDisplacement(
+          destination,
+          getCurrentPageBorderBoxCenter(a, afterCritical),
+        ),
+      );
+      const distanceToB = distance(
+        pageBorderBoxCenter,
+        withDroppableDisplacement(
+          destination,
+          getCurrentPageBorderBoxCenter(b, afterCritical),
+        ),
+      );
+
+      // if a is closer - return a
+      if (distanceToA < distanceToB) {
+        return -1;
+      }
+
+      // if b is closer - return b
+      if (distanceToB < distanceToA) {
+        return 1;
+      }
+
+      // if the distance to a and b are the same:
+      // return the one with the lower index (it will be higher on the main axis)
+      return a.descriptor.index - b.descriptor.index;
+    });
+
+  return sorted[0] || null;
+};

package/src/state/move-in-direction/move-cross-axis/index.ts

@@ -0,0 +1,110 @@
+// @flow
+import { type Position } from 'css-box-model';
+import type { PublicResult } from '../move-in-direction-types';
+import type {
+  DroppableDimension,
+  DraggableDimension,
+  DraggableDimensionMap,
+  DroppableDimensionMap,
+  DragImpact,
+  Viewport,
+  LiftEffect,
+} from '../../../types';
+import getBestCrossAxisDroppable from './get-best-cross-axis-droppable';
+import getClosestDraggable from './get-closest-draggable';
+// import moveToNewDroppable from './move-to-new-droppable';
+import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable';
+import getClientFromPageBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center';
+import getPageBorderBoxCenter from '../../get-center-from-impact/get-page-border-box-center';
+import moveToNewDroppable from './move-to-new-droppable';
+
+// Exact
+type Args = {
+  isMovingForward: boolean,
+  // the current page center of the dragging item
+  previousPageBorderBoxCenter: Position,
+  // the dragging item
+  draggable: DraggableDimension,
+  // the droppable the dragging item is in
+  isOver: DroppableDimension,
+  // all the dimensions in the system
+  draggables: DraggableDimensionMap,
+  droppables: DroppableDimensionMap,
+  // the current viewport
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+};
+
+export default ({
+  isMovingForward,
+  previousPageBorderBoxCenter,
+  draggable,
+  isOver,
+  draggables,
+  droppables,
+  viewport,
+  afterCritical,
+}: Args): PublicResult | null => {
+  // not considering the container scroll changes as container scrolling cancels a keyboard drag
+
+  const destination: DroppableDimension | null = getBestCrossAxisDroppable({
+    isMovingForward,
+    pageBorderBoxCenter: previousPageBorderBoxCenter,
+    source: isOver,
+    droppables,
+    viewport,
+  });
+
+  // nothing available to move to
+  if (!destination) {
+    return null;
+  }
+
+  const insideDestination: DraggableDimension[] = getDraggablesInsideDroppable(
+    destination.descriptor.id,
+    draggables,
+  );
+
+  const moveRelativeTo: DraggableDimension | null= getClosestDraggable({
+    pageBorderBoxCenter: previousPageBorderBoxCenter,
+    viewport,
+    destination,
+    insideDestination,
+    afterCritical,
+  });
+
+  const impact: DragImpact | null = moveToNewDroppable({
+    previousPageBorderBoxCenter,
+    destination,
+    draggable,
+    draggables,
+    moveRelativeTo,
+    insideDestination,
+    viewport,
+    afterCritical,
+  });
+
+  if (!impact) {
+    return null;
+  }
+
+  const pageBorderBoxCenter: Position = getPageBorderBoxCenter({
+    impact,
+    draggable,
+    droppable: destination,
+    draggables,
+    afterCritical,
+  });
+
+  const clientSelection: Position = getClientFromPageBorderBoxCenter({
+    pageBorderBoxCenter,
+    draggable,
+    viewport,
+  });
+
+  return {
+    clientSelection,
+    impact,
+    scrollJumpRequest: null,
+  };
+};

package/src/state/move-in-direction/move-cross-axis/move-to-new-droppable.ts

@@ -0,0 +1,122 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DragImpact,
+  DraggableDimension,
+  DraggableDimensionMap,
+  DroppableDimension,
+  Viewport,
+  DisplacedBy,
+  LiftEffect,
+} from '../../../types';
+import getDisplacedBy from '../../get-displaced-by';
+import { emptyGroups, noDisplacedBy } from '../../no-impact';
+import getPageBorderBoxCenter from '../../get-center-from-impact/get-page-border-box-center';
+import isTotallyVisibleInNewLocation from '../move-to-next-place/is-totally-visible-in-new-location';
+import { addPlaceholder } from '../../droppable/with-placeholder';
+import isHomeOf from '../../droppable/is-home-of';
+import calculateReorderImpact from '../../calculate-drag-impact/calculate-reorder-impact';
+
+// Exact
+type Args = {
+  previousPageBorderBoxCenter: Position,
+  moveRelativeTo: DraggableDimension | null,
+  insideDestination: DraggableDimension[],
+  draggable: DraggableDimension,
+  draggables: DraggableDimensionMap,
+  destination: DroppableDimension,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+};
+
+export default ({
+  previousPageBorderBoxCenter,
+  moveRelativeTo,
+  insideDestination,
+  draggable,
+  draggables,
+  destination,
+  viewport,
+  afterCritical,
+}: Args): DragImpact | null => {
+  if (!moveRelativeTo) {
+    // Draggables available, but none are candidates for movement
+    if (insideDestination.length) {
+      return null;
+    }
+
+    // Try move to top of empty list if it is visible
+    const proposed: DragImpact = {
+      displaced: emptyGroups,
+      displacedBy: noDisplacedBy,
+      at: {
+        type: 'REORDER',
+        destination: {
+          droppableId: destination.descriptor.id,
+          index: 0,
+        },
+      },
+    };
+    const proposedPageBorderBoxCenter: Position = getPageBorderBoxCenter({
+      impact: proposed,
+      draggable,
+      droppable: destination,
+      draggables,
+      afterCritical,
+    });
+
+    // need to add room for a placeholder in a foreign list
+    const withPlaceholder: DroppableDimension = isHomeOf(draggable, destination)
+      ? destination
+      : addPlaceholder(destination, draggable, draggables);
+
+    const isVisibleInNewLocation: boolean = isTotallyVisibleInNewLocation({
+      draggable,
+      destination: withPlaceholder,
+      newPageBorderBoxCenter: proposedPageBorderBoxCenter,
+      viewport: viewport.frame,
+      // already taken into account by getPageBorderBoxCenter
+      withDroppableDisplacement: false,
+      onlyOnMainAxis: true,
+    });
+
+    return isVisibleInNewLocation ? proposed : null;
+  }
+
+  const isGoingBeforeTarget: boolean = Boolean(
+    // Using <= as we optimise slightly for moving before items in a new list
+    // This is nicer in lists with fixed height items
+    previousPageBorderBoxCenter[destination.axis.line] <=
+      moveRelativeTo.page.borderBox.center[destination.axis.line],
+  );
+
+  const proposedIndex: number = (() => {
+    const relativeTo: number = moveRelativeTo.descriptor.index;
+
+    if (moveRelativeTo.descriptor.id === draggable.descriptor.id) {
+      return relativeTo;
+    }
+
+    if (isGoingBeforeTarget) {
+      return relativeTo;
+    }
+
+    return relativeTo + 1;
+  })();
+
+  const displacedBy: DisplacedBy = getDisplacedBy(
+    destination.axis,
+    draggable.displaceBy,
+  );
+
+  return calculateReorderImpact({
+    draggable,
+    insideDestination,
+    destination,
+    viewport,
+    displacedBy,
+    // last groups won't be relevant
+    last: emptyGroups,
+    index: proposedIndex,
+  });
+};

package/src/state/move-in-direction/move-cross-axis/without-starting-displacement.ts

@@ -0,0 +1,31 @@
+// @flow
+import type { Position, Rect, Spacing } from 'css-box-model';
+import type { DraggableDimension, LiftEffect } from '../../../types';
+import { negate, subtract } from '../../position';
+import { offsetByPosition } from '../../spacing';
+import didStartAfterCritical from '../../did-start-after-critical';
+
+export const getCurrentPageBorderBoxCenter = (
+  draggable: DraggableDimension,
+  afterCritical: LiftEffect,
+): Position => {
+  // If an item started displaced it is now resting
+  // in a non-displaced location
+  const original: Position = draggable.page.borderBox.center;
+  return didStartAfterCritical(draggable.descriptor.id, afterCritical)
+    ? subtract(original, afterCritical.displacedBy.point)
+    : original;
+};
+
+export const getCurrentPageBorderBox = (
+  draggable: DraggableDimension,
+  afterCritical: LiftEffect,
+): Spacing => {
+  // If an item started displaced it is now resting
+  // in a non-displaced location
+  const original: Rect = draggable.page.borderBox;
+
+  return didStartAfterCritical(draggable.descriptor.id, afterCritical)
+    ? offsetByPosition(original, negate(afterCritical.displacedBy.point))
+    : original;
+};

package/src/state/move-in-direction/move-in-direction-types.ts

@@ -0,0 +1,10 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type { DragImpact } from '../../types';
+
+// Exact
+export type PublicResult = {
+  clientSelection: Position,
+  impact: DragImpact,
+  scrollJumpRequest: Position | null,
+};

package/src/state/move-in-direction/move-to-next-place/index.ts

@@ -0,0 +1,133 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DroppableDimension,
+  DraggableDimension,
+  DraggableDimensionMap,
+  DragImpact,
+  Viewport,
+  LiftEffect,
+} from '../../../types';
+import type { PublicResult } from '../move-in-direction-types';
+import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable';
+import moveToNextCombine from './move-to-next-combine';
+import moveToNextIndex from './move-to-next-index';
+import isHomeOf from '../../droppable/is-home-of';
+import getPageBorderBoxCenter from '../../get-center-from-impact/get-page-border-box-center';
+import speculativelyIncrease from '../../update-displacement-visibility/speculatively-increase';
+import getClientFromPageBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center';
+import { subtract } from '../../position';
+import isTotallyVisibleInNewLocation from './is-totally-visible-in-new-location';
+
+// Exact
+type Args = {
+  isMovingForward: boolean,
+  draggable: DraggableDimension,
+  destination: DroppableDimension,
+  draggables: DraggableDimensionMap,
+  previousImpact: DragImpact,
+  viewport: Viewport,
+  previousClientSelection: Position,
+  previousPageBorderBoxCenter: Position,
+  afterCritical: LiftEffect,
+};
+
+export default ({
+  isMovingForward,
+  draggable,
+  destination,
+  draggables,
+  previousImpact,
+  viewport,
+  previousPageBorderBoxCenter,
+  previousClientSelection,
+  afterCritical,
+}: Args): PublicResult | null => {
+  if (!destination.isEnabled) {
+    return null;
+  }
+
+  const insideDestination: DraggableDimension[] = getDraggablesInsideDroppable(
+    destination.descriptor.id,
+    draggables,
+  );
+  const isInHomeList: boolean = isHomeOf(draggable, destination);
+
+  const impact: DragImpact | null =
+    moveToNextCombine({
+      isMovingForward,
+      draggable,
+      destination,
+      insideDestination,
+      previousImpact,
+    }) ||
+    moveToNextIndex({
+      isMovingForward,
+      isInHomeList,
+      draggable,
+      draggables,
+      destination,
+      insideDestination,
+      previousImpact,
+      viewport,
+      afterCritical,
+    });
+
+  if (!impact) {
+    return null;
+  }
+
+  const pageBorderBoxCenter: Position = getPageBorderBoxCenter({
+    impact,
+    draggable,
+    droppable: destination,
+    draggables,
+    afterCritical,
+  });
+
+  const isVisibleInNewLocation: boolean = isTotallyVisibleInNewLocation({
+    draggable,
+    destination,
+    newPageBorderBoxCenter: pageBorderBoxCenter,
+    viewport: viewport.frame,
+    // already taken into account by getPageBorderBoxCenter
+    withDroppableDisplacement: false,
+    // we only care about it being visible relative to the main axis
+    // this is important with dynamic changes as scroll bar and toggle
+    // on the cross axis during a drag
+    onlyOnMainAxis: true,
+  });
+
+  if (isVisibleInNewLocation) {
+    // using the client center as the selection point
+    const clientSelection: Position = getClientFromPageBorderBoxCenter({
+      pageBorderBoxCenter,
+      draggable,
+      viewport,
+    });
+    return {
+      clientSelection,
+      impact,
+      scrollJumpRequest: null,
+    };
+  }
+
+  const distance: Position = subtract(
+    pageBorderBoxCenter,
+    previousPageBorderBoxCenter,
+  );
+
+  const cautious: DragImpact = speculativelyIncrease({
+    impact,
+    viewport,
+    destination,
+    draggables,
+    maxScrollChange: distance,
+  });
+
+  return {
+    clientSelection: previousClientSelection,
+    impact: cautious,
+    scrollJumpRequest: distance,
+  };
+};