@helpdice/draggable 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,113 @@
+// @flow
+import { offset, type Position, type BoxModel } from 'css-box-model';
+import type {
+  Axis,
+  DragImpact,
+  DraggableId,
+  DraggableDimension,
+  DraggableDimensionMap,
+  DroppableDimension,
+  LiftEffect,
+} from '../../../types';
+import { goBefore, goAfter, goIntoStart } from '../move-relative-to';
+import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable';
+import { negate } from '../../position';
+import didStartAfterCritical from '../../did-start-after-critical';
+
+// Exact
+type NewHomeArgs = {
+  impact: DragImpact,
+  draggable: DraggableDimension,
+  draggables: DraggableDimensionMap,
+  droppable: DroppableDimension,
+  afterCritical: LiftEffect,
+};
+
+// Returns the client offset required to move an item from its
+// original client position to its final resting position
+export default ({
+  impact,
+  draggable,
+  draggables,
+  droppable,
+  afterCritical,
+}: NewHomeArgs): Position => {
+  const insideDestination: DraggableDimension[] = getDraggablesInsideDroppable(
+    droppable.descriptor.id,
+    draggables,
+  );
+
+  const draggablePage: BoxModel = draggable.page;
+  const axis: Axis = droppable.axis;
+
+  // this will only happen in a foreign list
+  if (!insideDestination.length) {
+    return goIntoStart({
+      axis,
+      moveInto: droppable.page,
+      isMoving: draggablePage,
+    });
+  }
+
+  const { displaced, displacedBy } = impact;
+  const closestAfter: DraggableId | null = displaced.all[0];
+
+  // go before the first displaced item
+  // items can only be displaced forwards
+  if (closestAfter) {
+    const closest: DraggableDimension = draggables[closestAfter];
+    // want to go before where it would be with the displacement
+
+    // target is displaced and is already in it's starting position
+    if (didStartAfterCritical(closestAfter, afterCritical)) {
+      return goBefore({
+        axis,
+        moveRelativeTo: closest.page,
+        isMoving: draggablePage,
+      });
+    }
+
+    // target has been displaced during the drag and it is not in its starting position
+    // we need to account for the displacement
+    const withDisplacement: BoxModel = offset(closest.page, displacedBy.point);
+
+    return goBefore({
+      axis,
+      moveRelativeTo: withDisplacement,
+      isMoving: draggablePage,
+    });
+  }
+
+  // Nothing in list is displaced, we should go after the last item
+
+  const last: DraggableDimension =
+    insideDestination[insideDestination.length - 1];
+
+  // we can just go into our original position if the last item
+  // is the dragging item
+  if (last.descriptor.id === draggable.descriptor.id) {
+    return draggablePage.borderBox.center;
+  }
+
+  if (didStartAfterCritical(last.descriptor.id, afterCritical)) {
+    // if the item started displaced and it is no longer displaced then
+    // we need to go after it it's non-displaced position
+
+    const page: BoxModel = offset(
+      last.page,
+      negate(afterCritical.displacedBy.point),
+    );
+    return goAfter({
+      axis,
+      moveRelativeTo: page,
+      isMoving: draggablePage,
+    });
+  }
+
+  // item is in its resting spot. we can go straight after it
+  return goAfter({
+    axis,
+    moveRelativeTo: last.page,
+    isMoving: draggablePage,
+  });
+};

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

@@ -0,0 +1,68 @@
+// @flow
+import type { Position, BoxModel, Rect } from 'css-box-model';
+import { patch } from '../position';
+import type { Axis } from '../../types';
+
+type Args = {
+  axis: Axis,
+  moveRelativeTo: BoxModel,
+  isMoving: BoxModel,
+};
+
+const distanceFromStartToBorderBoxCenter = (
+  axis: Axis,
+  box: BoxModel,
+): number => box.margin[axis.start] + box.borderBox[axis.size] / 2;
+
+const distanceFromEndToBorderBoxCenter = (axis: Axis, box: BoxModel): number =>
+  box.margin[axis.end] + box.borderBox[axis.size] / 2;
+
+// We align the moving item against the cross axis start of the target
+// We used to align the moving item cross axis center with the cross axis center of the target.
+// However, this leads to a bad experience when reordering columns
+const getCrossAxisBorderBoxCenter = (
+  axis: Axis,
+  target: Rect,
+  isMoving: BoxModel,
+): number =>
+  target[axis.crossAxisStart] +
+  isMoving.margin[axis.crossAxisStart] +
+  isMoving.borderBox[axis.crossAxisSize] / 2;
+
+export const goAfter = ({ axis, moveRelativeTo, isMoving }: Args): Position =>
+  patch(
+    axis.line,
+    // start measuring from the end of the target
+    moveRelativeTo.marginBox[axis.end] +
+      distanceFromStartToBorderBoxCenter(axis, isMoving),
+    getCrossAxisBorderBoxCenter(axis, moveRelativeTo.marginBox, isMoving),
+  );
+
+export const goBefore = ({ axis, moveRelativeTo, isMoving }: Args): Position =>
+  patch(
+    axis.line,
+    // start measuring from the start of the target
+    moveRelativeTo.marginBox[axis.start] -
+      distanceFromEndToBorderBoxCenter(axis, isMoving),
+    getCrossAxisBorderBoxCenter(axis, moveRelativeTo.marginBox, isMoving),
+  );
+
+// Exact
+type GoIntoArgs = {
+  axis: Axis,
+  moveInto: BoxModel,
+  isMoving: BoxModel,
+};
+
+// moves into the content box
+export const goIntoStart = ({
+  axis,
+  moveInto,
+  isMoving,
+}: GoIntoArgs): Position =>
+  patch(
+    axis.line,
+    moveInto.contentBox[axis.start] +
+      distanceFromStartToBorderBoxCenter(axis, isMoving),
+    getCrossAxisBorderBoxCenter(axis, moveInto.contentBox, isMoving),
+  );

package/src/state/get-combined-item-displacement.ts

@@ -0,0 +1,35 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DisplacementGroups,
+  LiftEffect,
+  DraggableId,
+  DisplacedBy,
+} from '../types';
+import { origin, negate } from './position';
+import didStartAfterCritical from './did-start-after-critical';
+
+// Exact
+type Args = {
+  displaced: DisplacementGroups,
+  afterCritical: LiftEffect,
+  combineWith: DraggableId,
+  displacedBy: DisplacedBy,
+};
+
+export default ({
+  displaced,
+  afterCritical,
+  combineWith,
+  displacedBy,
+}: Args): Position => {
+  const isDisplaced: boolean = Boolean(
+    displaced.visible[combineWith] || displaced.invisible[combineWith],
+  );
+
+  if (didStartAfterCritical(combineWith, afterCritical)) {
+    return isDisplaced ? origin : negate(displacedBy.point);
+  }
+
+  return isDisplaced ? displacedBy.point : origin;
+};

package/src/state/get-displaced-by.ts

@@ -0,0 +1,17 @@
+// @flow
+import memoizeOne from 'memoize-one';
+import { type Position } from 'css-box-model';
+import type { Axis, DisplacedBy } from '../types';
+import { patch } from './position';
+
+// TODO: memoization needed?
+export default memoizeOne(function getDisplacedBy(
+  axis: Axis,
+  displaceBy: Position,
+): DisplacedBy {
+  const displacement: number = displaceBy[axis.line];
+  return {
+    value: displacement,
+    point: patch(axis.line, displacement),
+  };
+});

package/src/state/get-displacement-groups.ts

@@ -0,0 +1,131 @@
+// @flow
+import { type Rect, type Spacing, expand, getRect } from 'css-box-model';
+import type {
+  DraggableId,
+  Displacement,
+  DraggableDimension,
+  DroppableDimension,
+  DisplacementGroups,
+  DisplacedBy,
+} from '../types';
+import { isPartiallyVisible } from './visibility/is-visible';
+
+// Exact
+type Args = {
+  afterDragging: DraggableDimension[],
+  destination: DroppableDimension,
+  displacedBy: DisplacedBy,
+  last: DisplacementGroups | null,
+  viewport: Rect,
+  forceShouldAnimate?: boolean,
+};
+
+const getShouldAnimate = (
+  id: any,
+  last: DisplacementGroups | null,
+  forceShouldAnimate?: boolean,
+) => {
+  // Use a forced value if provided
+  if (typeof forceShouldAnimate === 'boolean') {
+    return forceShouldAnimate;
+  }
+
+  // nothing to gauge animation from
+  if (!last) {
+    return true;
+  }
+
+  const { invisible, visible } = last;
+
+  // it was previously invisible - no animation
+  if (invisible[id]) {
+    return false;
+  }
+
+  const previous: Displacement | null = visible[id];
+
+  return previous ? previous.shouldAnimate : true;
+};
+
+// Note: it is also an optimisation to not render the displacement on
+// items when they are not longer visible.
+// This prevents a lot of .render() calls when leaving / entering a list
+
+function getTarget(
+  draggable: DraggableDimension,
+  displacedBy: DisplacedBy,
+): Rect {
+  const marginBox: Rect = draggable.page.marginBox;
+
+  // ## Visibility overscanning
+  // We are expanding rather than offsetting the marginBox.
+  // In some cases we want
+  // - the target based on the starting position (such as when dropping outside of any list)
+  // - the target based on the items position without starting displacement (such as when moving inside a list)
+  // To keep things simple we just expand the whole area for this check
+  // The worst case is some minor redundant offscreen movements
+  const expandBy: Spacing = {
+    // pull backwards into viewport
+    top: displacedBy.point.y,
+    right: 0,
+    bottom: 0,
+    // pull backwards into viewport
+    left: displacedBy.point.x,
+  };
+
+  return getRect(expand(marginBox, expandBy));
+}
+
+export default function getDisplacementGroups({
+  afterDragging,
+  destination,
+  displacedBy,
+  viewport,
+  forceShouldAnimate,
+  last,
+}: Args): DisplacementGroups {
+  return afterDragging.reduce(
+    function process(
+      groups: DisplacementGroups,
+      draggable: DraggableDimension,
+    ): DisplacementGroups {
+      const target: Rect = getTarget(draggable, displacedBy);
+      const id: DraggableId = draggable.descriptor.id;
+
+      groups.all.push(id);
+
+      const isVisible: boolean = isPartiallyVisible({
+        target,
+        destination,
+        viewport,
+        withDroppableDisplacement: true,
+      });
+
+      if (!isVisible) {
+        groups.invisible[draggable.descriptor.id] = true;
+        return groups;
+      }
+
+      // item is visible
+
+      const shouldAnimate: boolean = getShouldAnimate(
+        id,
+        last,
+        forceShouldAnimate,
+      );
+
+      const displacement: Displacement = {
+        draggableId: id,
+        shouldAnimate,
+      };
+
+      groups.visible[id] = displacement;
+      return groups;
+    },
+    {
+      all: [],
+      visible: {},
+      invisible: {},
+    },
+  );
+}

package/src/state/get-drag-impact/get-combine-impact.ts

@@ -0,0 +1,131 @@
+// @flow
+import type { Rect } from 'css-box-model';
+import type {
+  DraggableId,
+  Axis,
+  DraggableDimension,
+  DroppableDimension,
+  DragImpact,
+  LiftEffect,
+  DisplacedBy,
+} from '../../types';
+import { find } from '../../native-with-fallback';
+import getDidStartAfterCritical from '../did-start-after-critical';
+import getDisplacedBy from '../get-displaced-by';
+import getIsDisplaced from '../get-is-displaced';
+import removeDraggableFromList from '../remove-draggable-from-list';
+
+// Exact
+type Args = {
+  draggable: DraggableDimension,
+  pageBorderBoxWithDroppableScroll: Rect,
+  previousImpact: DragImpact,
+  destination: DroppableDimension,
+  insideDestination: DraggableDimension[],
+  afterCritical: LiftEffect,
+};
+
+// exported for testing
+export const combineThresholdDivisor: number = 4;
+
+export default ({
+  draggable,
+  pageBorderBoxWithDroppableScroll: targetRect,
+  previousImpact,
+  destination,
+  insideDestination,
+  afterCritical,
+}: Args): DragImpact | null => {
+  if (!destination.isCombineEnabled) {
+    return null;
+  }
+  const axis: Axis = destination.axis;
+  const displacedBy: DisplacedBy = getDisplacedBy(
+    destination.axis,
+    draggable.displaceBy,
+  );
+  const displacement: number = displacedBy.value;
+
+  const targetStart: number = targetRect[axis.start];
+  const targetEnd: number = targetRect[axis.end];
+
+  const withoutDragging: DraggableDimension[] = removeDraggableFromList(
+    draggable,
+    insideDestination,
+  );
+
+  const combineWith: DraggableDimension | null | undefined = find(
+    withoutDragging,
+    (child: DraggableDimension): boolean => {
+      const id: DraggableId = child.descriptor.id;
+      const childRect: Rect = child.page.borderBox;
+      const childSize: number = childRect[axis.size];
+      const threshold: number = childSize / combineThresholdDivisor;
+
+      const didStartAfterCritical: boolean = getDidStartAfterCritical(
+        id,
+        afterCritical,
+      );
+
+      const isDisplaced: boolean = getIsDisplaced({
+        displaced: previousImpact.displaced,
+        id,
+      });
+
+      /*
+        Only combining when in the combine region
+        As soon as a boundary is hit then no longer combining
+      */
+
+      if (didStartAfterCritical) {
+        // In original position
+        // Will combine with item when inside a band
+        if (isDisplaced) {
+          return (
+            targetEnd > childRect[axis.start] + threshold &&
+            targetEnd < childRect[axis.end] - threshold
+          );
+        }
+
+        // child is now 'displaced' backwards from where it started
+        // want to combine when we move backwards onto it
+        return (
+          targetStart > childRect[axis.start] - displacement + threshold &&
+          targetStart < childRect[axis.end] - displacement - threshold
+        );
+      }
+
+      // item has moved forwards
+      if (isDisplaced) {
+        return (
+          targetEnd > childRect[axis.start] + displacement + threshold &&
+          targetEnd < childRect[axis.end] + displacement - threshold
+        );
+      }
+
+      // is in resting position - being moved backwards on to
+      return (
+        targetStart > childRect[axis.start] + threshold &&
+        targetStart < childRect[axis.end] - threshold
+      );
+    },
+  );
+
+  if (!combineWith) {
+    return null;
+  }
+
+  const impact: DragImpact = {
+    // no change to displacement when combining
+    displacedBy,
+    displaced: previousImpact.displaced,
+    at: {
+      type: 'COMBINE',
+      combine: {
+        draggableId: combineWith.descriptor.id,
+        droppableId: destination.descriptor.id,
+      },
+    },
+  };
+  return impact;
+};

package/src/state/get-drag-impact/get-reorder-impact.ts

@@ -0,0 +1,145 @@
+// @flow
+import { type Rect } from 'css-box-model';
+import type {
+  DraggableId,
+  DraggableDimension,
+  DroppableDimension,
+  DragImpact,
+  Axis,
+  DisplacementGroups,
+  Viewport,
+  DisplacedBy,
+  LiftEffect,
+} from '../../types';
+import getDisplacedBy from '../get-displaced-by';
+import removeDraggableFromList from '../remove-draggable-from-list';
+import isHomeOf from '../droppable/is-home-of';
+import { find } from '../../native-with-fallback';
+import getDidStartAfterCritical from '../did-start-after-critical';
+import calculateReorderImpact from '../calculate-drag-impact/calculate-reorder-impact';
+import getIsDisplaced from '../get-is-displaced';
+
+// Exact
+type Args = {
+  pageBorderBoxWithDroppableScroll: Rect,
+  draggable: DraggableDimension,
+  destination: DroppableDimension,
+  insideDestination: DraggableDimension[],
+  last: DisplacementGroups,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+};
+
+// Exact
+type AtIndexArgs = {
+  draggable: DraggableDimension,
+  closest?: DraggableDimension | null,
+  inHomeList: boolean,
+};
+
+function atIndex({ draggable, closest, inHomeList }: AtIndexArgs): number | null {
+  if (!closest) {
+    return null;
+  }
+
+  if (!inHomeList) {
+    return closest.descriptor.index;
+  }
+
+  if (closest.descriptor.index > draggable.descriptor.index) {
+    return closest.descriptor.index - 1;
+  }
+
+  return closest.descriptor.index;
+}
+
+export default ({
+  pageBorderBoxWithDroppableScroll: targetRect,
+  draggable,
+  destination,
+  insideDestination,
+  last,
+  viewport,
+  afterCritical,
+}: Args): DragImpact => {
+  const axis: Axis = destination.axis;
+  const displacedBy: DisplacedBy = getDisplacedBy(
+    destination.axis,
+    draggable.displaceBy,
+  );
+  const displacement: number = displacedBy.value;
+
+  const targetStart: number = targetRect[axis.start];
+  const targetEnd: number = targetRect[axis.end];
+
+  const withoutDragging: DraggableDimension[] = removeDraggableFromList(
+    draggable,
+    insideDestination,
+  );
+
+  const closest: DraggableDimension | null | undefined = find(
+    withoutDragging,
+    (child: DraggableDimension): boolean => {
+      const id: DraggableId = child.descriptor.id;
+      const childCenter: number = child.page.borderBox.center[axis.line];
+
+      const didStartAfterCritical: boolean = getDidStartAfterCritical(
+        id,
+        afterCritical,
+      );
+
+      const isDisplaced: boolean = getIsDisplaced({ displaced: last, id });
+
+      /*
+      Note: we change things when moving *past* the child center - not when it hits the center
+      If we make it when we *hit* the child center then there can be
+      a hit on the next update causing a flicker.
+
+      - Update 1: targetBottom hits center => displace backwards
+      - Update 2: targetStart is now hitting the displaced center => displace forwards
+      - Update 3: goto 1 (boom)
+    */
+
+      if (didStartAfterCritical) {
+        // Continue to displace while targetEnd before the childCenter
+        // Move once we *move forward past* the childCenter
+        if (isDisplaced) {
+          return targetEnd <= childCenter;
+        }
+
+        // Has been moved backwards from where it started
+        // Displace forwards when targetStart *moves backwards past* the displaced childCenter
+        return targetStart < childCenter - displacement;
+      }
+
+      // Item has been shifted forward.
+      // Remove displacement when targetEnd moves forward past the displaced center
+      if (isDisplaced) {
+        return targetEnd <= childCenter + displacement;
+      }
+
+      // Item is behind the dragging item
+      // We want to displace it if the targetStart goes *backwards past* the childCenter
+      return targetStart < childCenter;
+    },
+  );
+
+  const newIndex: number | null = atIndex({
+    draggable,
+    closest,
+    inHomeList: isHomeOf(draggable, destination),
+  });
+
+  // TODO: index cannot be null?
+  // otherwise return null from there and return empty impact
+  // that was calculate reorder impact does not need to account for a null index
+  return calculateReorderImpact({
+    draggable,
+    insideDestination,
+    destination,
+    viewport,
+    last,
+    displacedBy,
+    index: newIndex,
+  });
+};