@planningcenter/react-beautiful-dnd 13.2.0

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

@@ -0,0 +1,130 @@
+// @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';
+
+type Args = {|
+  afterDragging: DraggableDimension[],
+  destination: DroppableDimension,
+  displacedBy: DisplacedBy,
+  last: ?DisplacementGroups,
+  viewport: Rect,
+  forceShouldAnimate?: boolean,
+|};
+
+const getShouldAnimate = (
+  id,
+  last: ?DisplacementGroups,
+  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 = 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.js

@@ -0,0 +1,130 @@
+// @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';
+
+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 => {
+  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 = 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.js

@@ -0,0 +1,143 @@
+// @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';
+
+type Args = {|
+  pageBorderBoxWithDroppableScroll: Rect,
+  draggable: DraggableDimension,
+  destination: DroppableDimension,
+  insideDestination: DraggableDimension[],
+  last: DisplacementGroups,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+|};
+
+type AtIndexArgs = {|
+  draggable: DraggableDimension,
+  closest: ?DraggableDimension,
+  inHomeList: boolean,
+|};
+
+function atIndex({ draggable, closest, inHomeList }: AtIndexArgs): ?number {
+  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 = 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 = 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,
+  });
+};

package/src/state/get-drag-impact/index.js

@@ -0,0 +1,93 @@
+// @flow
+import { type Position, type Rect } from 'css-box-model';
+import type {
+  DroppableId,
+  DraggableDimension,
+  DroppableDimension,
+  DraggableDimensionMap,
+  DroppableDimensionMap,
+  DragImpact,
+  Viewport,
+  LiftEffect,
+} from '../../types';
+import getDroppableOver from '../get-droppable-over';
+import getDraggablesInsideDroppable from '../get-draggables-inside-droppable';
+import withDroppableScroll from '../with-scroll-change/with-droppable-scroll';
+import getReorderImpact from './get-reorder-impact';
+import getCombineImpact from './get-combine-impact';
+import noImpact from '../no-impact';
+import { offsetRectByPosition } from '../rect';
+
+type Args = {|
+  pageOffset: Position,
+  draggable: DraggableDimension,
+  // all dimensions in system
+  draggables: DraggableDimensionMap,
+  droppables: DroppableDimensionMap,
+  previousImpact: DragImpact,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+|};
+
+export default ({
+  pageOffset,
+  draggable,
+  draggables,
+  droppables,
+  previousImpact,
+  viewport,
+  afterCritical,
+}: Args): DragImpact => {
+  const pageBorderBox: Rect = offsetRectByPosition(
+    draggable.page.borderBox,
+    pageOffset,
+  );
+
+  const destinationId: ?DroppableId = getDroppableOver({
+    pageBorderBox,
+    draggable,
+    droppables,
+  });
+
+  // not dragging over anything
+
+  if (!destinationId) {
+    // A big design decision was made here to collapse the home list
+    // when not over any list. This yielded the most consistently beautiful experience.
+    return noImpact;
+  }
+
+  const destination: DroppableDimension = droppables[destinationId];
+  const insideDestination: DraggableDimension[] = getDraggablesInsideDroppable(
+    destination.descriptor.id,
+    draggables,
+  );
+
+  // Where the element actually is now.
+  // Need to take into account the change of scroll in the droppable
+  const pageBorderBoxWithDroppableScroll: Rect = withDroppableScroll(
+    destination,
+    pageBorderBox,
+  );
+
+  // checking combine first so we combine before any reordering
+  return (
+    getCombineImpact({
+      pageBorderBoxWithDroppableScroll,
+      draggable,
+      previousImpact,
+      destination,
+      insideDestination,
+      afterCritical,
+    }) ||
+    getReorderImpact({
+      pageBorderBoxWithDroppableScroll,
+      draggable,
+      destination,
+      insideDestination,
+      last: previousImpact.displaced,
+      viewport,
+      afterCritical,
+    })
+  );
+};

package/src/state/get-draggables-inside-droppable.js

@@ -0,0 +1,31 @@
+// @flow
+import memoizeOne from 'memoize-one';
+import { toDraggableList } from './dimension-structures';
+import type {
+  DraggableDimension,
+  DroppableId,
+  DraggableDimensionMap,
+} from '../types';
+
+export default memoizeOne(
+  (
+    // using droppableId to avoid cache busted when we
+    // update the droppable (such as when it scrolls)
+    droppableId: DroppableId,
+    draggables: DraggableDimensionMap,
+  ): DraggableDimension[] => {
+    const result = toDraggableList(draggables)
+      .filter(
+        (draggable: DraggableDimension): boolean =>
+          droppableId === draggable.descriptor.droppableId,
+      )
+      // Dimensions are not guarenteed to be ordered in the same order as keys
+      // So we need to sort them so they are in the correct order
+      .sort(
+        (a: DraggableDimension, b: DraggableDimension): number =>
+          a.descriptor.index - b.descriptor.index,
+      );
+
+    return result;
+  },
+);

package/src/state/get-droppable-over.js

@@ -0,0 +1,158 @@
+// @flow
+import { type Position, type Rect } from 'css-box-model';
+import type {
+  DroppableDimension,
+  DroppableDimensionMap,
+  DroppableId,
+  DraggableDimension,
+  Axis,
+} from '../types';
+import { toDroppableList } from './dimension-structures';
+import isPositionInFrame from './visibility/is-position-in-frame';
+import { distance, patch } from './position';
+import isWithin from './is-within';
+
+// https://stackoverflow.com/questions/306316/determine-if-two-rectangles-overlap-each-other
+// https://silentmatt.com/rectangle-intersection/
+function getHasOverlap(first: Rect, second: Rect): boolean {
+  return (
+    first.left < second.right &&
+    first.right > second.left &&
+    first.top < second.bottom &&
+    first.bottom > second.top
+  );
+}
+
+type Args = {|
+  pageBorderBox: Rect,
+  draggable: DraggableDimension,
+  droppables: DroppableDimensionMap,
+|};
+
+type WithDistance = {|
+  distance: number,
+  id: DroppableId,
+|};
+
+type GetFurthestArgs = {|
+  pageBorderBox: Rect,
+  draggable: DraggableDimension,
+  candidates: DroppableDimension[],
+|};
+
+function getFurthestAway({
+  pageBorderBox,
+  draggable,
+  candidates,
+}: GetFurthestArgs): ?DroppableId {
+  // We are not comparing the center of the home list with the target list as it would
+  // give preference to giant lists
+
+  // We are measuring the distance from where the draggable started
+  // to where it is *hitting* the candidate
+  // Note: The hit point might technically not be in the bounds of the candidate
+
+  const startCenter: Position = draggable.page.borderBox.center;
+  const sorted: WithDistance[] = candidates
+    .map((candidate: DroppableDimension): WithDistance => {
+      const axis: Axis = candidate.axis;
+      const target: Position = patch(
+        candidate.axis.line,
+        // use the current center of the dragging item on the main axis
+        pageBorderBox.center[axis.line],
+        // use the center of the list on the cross axis
+        candidate.page.borderBox.center[axis.crossAxisLine],
+      );
+
+      return {
+        id: candidate.descriptor.id,
+        distance: distance(startCenter, target),
+      };
+    })
+    // largest value will be first
+    .sort((a: WithDistance, b: WithDistance) => b.distance - a.distance);
+
+  // just being safe
+  return sorted[0] ? sorted[0].id : null;
+}
+
+export default function getDroppableOver({
+  pageBorderBox,
+  draggable,
+  droppables,
+}: Args): ?DroppableId {
+  // We know at this point that some overlap has to exist
+  const candidates: DroppableDimension[] = toDroppableList(droppables).filter(
+    (item: DroppableDimension): boolean => {
+      // Cannot be a candidate when disabled
+      if (!item.isEnabled) {
+        return false;
+      }
+
+      // Cannot be a candidate when there is no visible area
+      const active: ?Rect = item.subject.active;
+      if (!active) {
+        return false;
+      }
+
+      // Cannot be a candidate when dragging item is not over the droppable at all
+      if (!getHasOverlap(pageBorderBox, active)) {
+        return false;
+      }
+
+      // 1. Candidate if the center position is over a droppable
+      if (isPositionInFrame(active)(pageBorderBox.center)) {
+        return true;
+      }
+
+      // 2. Candidate if an edge is over the cross axis half way point
+      // 3. Candidate if dragging item is totally over droppable on cross axis
+
+      const axis: Axis = item.axis;
+      const childCenter: number = active.center[axis.crossAxisLine];
+      const crossAxisStart: number = pageBorderBox[axis.crossAxisStart];
+      const crossAxisEnd: number = pageBorderBox[axis.crossAxisEnd];
+
+      const isContained = isWithin(
+        active[axis.crossAxisStart],
+        active[axis.crossAxisEnd],
+      );
+
+      const isStartContained: boolean = isContained(crossAxisStart);
+      const isEndContained: boolean = isContained(crossAxisEnd);
+
+      // Dragging item is totally covering the active area
+      if (!isStartContained && !isEndContained) {
+        return true;
+      }
+
+      /**
+       * edges must go beyond the center line in order to avoid
+       * cases were both conditions are satisfied.
+       */
+      if (isStartContained) {
+        return crossAxisStart < childCenter;
+      }
+
+      return crossAxisEnd > childCenter;
+    },
+  );
+
+  if (!candidates.length) {
+    return null;
+  }
+
+  // Only one candidate - use that!
+  if (candidates.length === 1) {
+    return candidates[0].descriptor.id;
+  }
+
+  // Multiple options returned
+  // Should only occur with really large items
+  // Going to use fallback: distance from home
+  return getFurthestAway({
+    pageBorderBox,
+    draggable,
+    candidates,
+  });
+}

package/src/state/get-frame.js

@@ -0,0 +1,10 @@
+// @flow
+import { invariant } from '../invariant';
+
+import type { DroppableDimension, Scrollable } from '../types';
+
+export default (droppable: DroppableDimension): Scrollable => {
+  const frame: ?Scrollable = droppable.frame;
+  invariant(frame, 'Expected Droppable to have a frame');
+  return frame;
+};

package/src/state/get-home-location.js

@@ -0,0 +1,7 @@
+// @flow
+import type { DraggableDescriptor, DraggableLocation } from '../types';
+
+export default (descriptor: DraggableDescriptor): DraggableLocation => ({
+  index: descriptor.index,
+  droppableId: descriptor.droppableId,
+});