@planningcenter/react-beautiful-dnd 13.2.0

package/src/state/post-reducer/when-moving/update.js

@@ -0,0 +1,120 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DraggableDimension,
+  DraggingState,
+  ClientPositions,
+  PagePositions,
+  DragPositions,
+  DragImpact,
+  Viewport,
+  DimensionMap,
+  StateWhenUpdatesAllowed,
+  DroppableDimensionMap,
+} from '../../../types';
+import getDragImpact from '../../get-drag-impact';
+import { add, subtract } from '../../position';
+import recomputePlaceholders from '../../recompute-placeholders';
+
+type Args = {|
+  state: StateWhenUpdatesAllowed,
+  clientSelection?: Position,
+  dimensions?: DimensionMap,
+  viewport?: Viewport,
+  // force a custom drag impact
+  impact?: ?DragImpact,
+  // provide a scroll jump request (optionally provided - and can be null)
+  scrollJumpRequest?: ?Position,
+|};
+
+export default ({
+  state,
+  clientSelection: forcedClientSelection,
+  dimensions: forcedDimensions,
+  viewport: forcedViewport,
+  impact: forcedImpact,
+  scrollJumpRequest,
+}: Args): StateWhenUpdatesAllowed => {
+  // DRAGGING: can update position and impact
+  // COLLECTING: can update position but cannot update impact
+
+  const viewport: Viewport = forcedViewport || state.viewport;
+  const dimensions: DimensionMap = forcedDimensions || state.dimensions;
+  const clientSelection: Position =
+    forcedClientSelection || state.current.client.selection;
+
+  const offset: Position = subtract(
+    clientSelection,
+    state.initial.client.selection,
+  );
+
+  const client: ClientPositions = {
+    offset,
+    selection: clientSelection,
+    borderBoxCenter: add(state.initial.client.borderBoxCenter, offset),
+  };
+
+  const page: PagePositions = {
+    selection: add(client.selection, viewport.scroll.current),
+    borderBoxCenter: add(client.borderBoxCenter, viewport.scroll.current),
+    offset: add(client.offset, viewport.scroll.diff.value),
+  };
+
+  const current: DragPositions = {
+    client,
+    page,
+  };
+
+  // Not updating impact while bulk collecting
+  if (state.phase === 'COLLECTING') {
+    return {
+      // adding phase to appease flow (even though it will be overwritten by spread)
+      phase: 'COLLECTING',
+      ...state,
+      dimensions,
+      viewport,
+      current,
+    };
+  }
+
+  const draggable: DraggableDimension =
+    dimensions.draggables[state.critical.draggable.id];
+
+  const newImpact: DragImpact =
+    forcedImpact ||
+    getDragImpact({
+      pageOffset: page.offset,
+      draggable,
+      draggables: dimensions.draggables,
+      droppables: dimensions.droppables,
+      previousImpact: state.impact,
+      viewport,
+      afterCritical: state.afterCritical,
+    });
+
+  const withUpdatedPlaceholders: DroppableDimensionMap = recomputePlaceholders({
+    draggable,
+    impact: newImpact,
+    previousImpact: state.impact,
+    draggables: dimensions.draggables,
+    droppables: dimensions.droppables,
+  });
+  // dragging!
+  const result: DraggingState = {
+    ...state,
+    current,
+    dimensions: {
+      draggables: dimensions.draggables,
+      droppables: withUpdatedPlaceholders,
+    },
+    impact: newImpact,
+    viewport,
+    scrollJumpRequest: scrollJumpRequest || null,
+    // client updates can be applied as a part of a jump scroll
+    // this can be to immediately reverse movement to allow for a nice animation
+    // into the final position
+    forceShouldAnimate: scrollJumpRequest ? false : null,
+  };
+
+  return result;
+};

package/src/state/publish-while-dragging-in-virtual/adjust-additions-for-scroll-changes.js

@@ -0,0 +1,58 @@
+// @flow
+import { type Position } from 'css-box-model';
+import type {
+  Viewport,
+  DraggableDimension,
+  DroppableDimension,
+  Scrollable,
+  DroppableDimensionMap,
+  DroppableId,
+} from '../../types';
+import { add } from '../position';
+import offsetDraggable from './offset-draggable';
+import getFrame from '../get-frame';
+
+type Args = {|
+  additions: DraggableDimension[],
+  updatedDroppables: DroppableDimensionMap,
+  viewport: Viewport,
+|};
+
+export default ({
+  additions,
+  updatedDroppables,
+  viewport,
+}: Args): DraggableDimension[] => {
+  // We need to adjust collected draggables so that they
+  // match the model we had when the drag started.
+  // When a draggable is dynamically collected it does not have
+  // the same relative client position. We need to unwind
+  // any changes in window scroll and droppable scroll so that
+  // the newly collected draggables fit in with our other draggables
+  // and give the same dimensions that would have had if they were
+  // collected at the start of the drag.
+
+  // Need to undo the displacement caused by window scroll changes
+  const windowScrollChange: Position = viewport.scroll.diff.value;
+  // These modified droppables have already had their scroll changes correctly updated
+
+  return additions.map((draggable: DraggableDimension): DraggableDimension => {
+    const droppableId: DroppableId = draggable.descriptor.droppableId;
+    const modified: DroppableDimension = updatedDroppables[droppableId];
+    const frame: Scrollable = getFrame(modified);
+    const droppableScrollChange: Position = frame.scroll.diff.value;
+
+    const totalChange: Position = add(
+      windowScrollChange,
+      droppableScrollChange,
+    );
+
+    const moved: DraggableDimension = offsetDraggable({
+      draggable,
+      offset: totalChange,
+      initialWindowScroll: viewport.scroll.initial,
+    });
+
+    return moved;
+  });
+};

package/src/state/publish-while-dragging-in-virtual/index.js

@@ -0,0 +1,158 @@
+// @flow
+import type {
+  DimensionMap,
+  DraggingState,
+  CollectingState,
+  DropPendingState,
+  Published,
+  DraggableId,
+  DraggableDimension,
+  DroppableDimensionMap,
+  DraggableDimensionMap,
+  DroppableDimension,
+  DragImpact,
+  DroppablePublish,
+  DroppableId,
+} from '../../types';
+import * as timings from '../../debug/timings';
+import getDragImpact from '../get-drag-impact';
+import adjustAdditionsForScrollChanges from './adjust-additions-for-scroll-changes';
+import { toDraggableMap, toDroppableMap } from '../dimension-structures';
+import getLiftEffect from '../get-lift-effect';
+import scrollDroppable from '../droppable/scroll-droppable';
+import whatIsDraggedOver from '../droppable/what-is-dragged-over';
+
+type Args = {|
+  state: CollectingState | DropPendingState,
+  published: Published,
+|};
+
+const timingsKey: string = 'Processing dynamic changes';
+
+export default ({
+  state,
+  published,
+}: Args): DraggingState | DropPendingState => {
+  timings.start(timingsKey);
+
+  // TODO: update window scroll (needs to be a part of the published object)
+  // TODO: validate.
+  // - Check that all additions / removals have a droppable
+  // - Check that all droppables are virtual
+
+  // The scroll might be different to what is currently in the state
+  // We want to ensure the new draggables are in step with the state
+  const withScrollChange: DroppableDimension[] = published.modified.map(
+    (update: DroppablePublish): DroppableDimension => {
+      const existing: DroppableDimension =
+        state.dimensions.droppables[update.droppableId];
+
+      const scrolled: DroppableDimension = scrollDroppable(
+        existing,
+        update.scroll,
+      );
+      return scrolled;
+    },
+  );
+
+  const droppables: DroppableDimensionMap = {
+    ...state.dimensions.droppables,
+    ...toDroppableMap(withScrollChange),
+  };
+
+  const updatedAdditions: DraggableDimensionMap = toDraggableMap(
+    adjustAdditionsForScrollChanges({
+      additions: published.additions,
+      updatedDroppables: droppables,
+      viewport: state.viewport,
+    }),
+  );
+
+  const draggables: DraggableDimensionMap = {
+    ...state.dimensions.draggables,
+    ...updatedAdditions,
+  };
+
+  // remove all the old ones (except for the critical)
+  // we do this so that list operations remain fast
+  // TODO: need to test the impact of this like crazy
+  published.removals.forEach((id: DraggableId) => {
+    delete draggables[id];
+  });
+
+  const dimensions: DimensionMap = {
+    droppables,
+    draggables,
+  };
+
+  const wasOverId: ?DroppableId = whatIsDraggedOver(state.impact);
+  const wasOver: ?DroppableDimension = wasOverId
+    ? dimensions.droppables[wasOverId]
+    : null;
+
+  const draggable: DraggableDimension =
+    dimensions.draggables[state.critical.draggable.id];
+  const home: DroppableDimension =
+    dimensions.droppables[state.critical.droppable.id];
+
+  const { impact: onLiftImpact, afterCritical } = getLiftEffect({
+    draggable,
+    home,
+    draggables,
+    viewport: state.viewport,
+  });
+
+  const previousImpact: DragImpact =
+    wasOver && wasOver.isCombineEnabled
+      ? // Cheating here
+        // TODO: pursue a more robust approach
+        state.impact
+      : onLiftImpact;
+
+  const impact: DragImpact = getDragImpact({
+    pageOffset: state.current.page.offset,
+    draggable: dimensions.draggables[state.critical.draggable.id],
+    draggables: dimensions.draggables,
+    droppables: dimensions.droppables,
+    previousImpact,
+    viewport: state.viewport,
+    afterCritical,
+  });
+
+  timings.finish(timingsKey);
+
+  const draggingState: DraggingState = {
+    // appeasing flow
+    phase: 'DRAGGING',
+    ...state,
+    // eslint-disable-next-line
+    phase: 'DRAGGING',
+    impact,
+    onLiftImpact,
+    dimensions,
+    afterCritical,
+    // not animating this movement
+    forceShouldAnimate: false,
+  };
+
+  if (state.phase === 'COLLECTING') {
+    return draggingState;
+  }
+
+  // There was a DROP_PENDING
+  // Staying in the DROP_PENDING phase
+  // setting isWaiting for false
+
+  const dropPending: DropPendingState = {
+    // appeasing flow
+    phase: 'DROP_PENDING',
+    ...draggingState,
+    // eslint-disable-next-line
+    phase: 'DROP_PENDING',
+    // No longer waiting
+    reason: state.reason,
+    isWaiting: false,
+  };
+
+  return dropPending;
+};

package/src/state/publish-while-dragging-in-virtual/offset-draggable.js

@@ -0,0 +1,35 @@
+// @flow
+import {
+  withScroll,
+  offset as offsetBox,
+  type Position,
+  type BoxModel,
+} from 'css-box-model';
+import type { DraggableDimension } from '../../types';
+
+type Args = {|
+  draggable: DraggableDimension,
+  offset: Position,
+  initialWindowScroll: Position,
+|};
+
+export default ({
+  draggable,
+  offset,
+  initialWindowScroll,
+}: Args): DraggableDimension => {
+  const client: BoxModel = offsetBox(draggable.client, offset);
+  const page: BoxModel = withScroll(client, initialWindowScroll);
+
+  const moved: DraggableDimension = {
+    ...draggable,
+    placeholder: {
+      ...draggable.placeholder,
+      client,
+    },
+    client,
+    page,
+  };
+
+  return moved;
+};

package/src/state/recompute-placeholders.js

@@ -0,0 +1,99 @@
+// @flow
+import {
+  addPlaceholder,
+  removePlaceholder,
+} from './droppable/with-placeholder';
+import whatIsDraggedOver from './droppable/what-is-dragged-over';
+import type {
+  DroppableDimension,
+  DraggableDimensionMap,
+  DroppableDimensionMap,
+  DraggableDimension,
+  DragImpact,
+  DroppableId,
+} from '../types';
+import patchDroppableMap from './patch-droppable-map';
+import isHomeOf from './droppable/is-home-of';
+
+type ClearArgs = {|
+  previousImpact: DragImpact,
+  impact: DragImpact,
+  droppables: DroppableDimensionMap,
+|};
+
+const clearUnusedPlaceholder = ({
+  previousImpact,
+  impact,
+  droppables,
+}: ClearArgs): DroppableDimensionMap => {
+  const last: ?DroppableId = whatIsDraggedOver(previousImpact);
+  const now: ?DroppableId = whatIsDraggedOver(impact);
+
+  if (!last) {
+    return droppables;
+  }
+
+  // no change - can keep the last state
+  if (last === now) {
+    return droppables;
+  }
+
+  const lastDroppable: DroppableDimension = droppables[last];
+
+  // nothing to clear
+  if (!lastDroppable.subject.withPlaceholder) {
+    return droppables;
+  }
+
+  const updated: DroppableDimension = removePlaceholder(lastDroppable);
+  return patchDroppableMap(droppables, updated);
+};
+
+type Args = {|
+  draggable: DraggableDimension,
+  draggables: DraggableDimensionMap,
+  droppables: DroppableDimensionMap,
+  impact: DragImpact,
+  previousImpact: DragImpact,
+|};
+
+export default ({
+  draggable,
+  draggables,
+  droppables,
+  previousImpact,
+  impact,
+}: Args): DroppableDimensionMap => {
+  const cleaned: DroppableDimensionMap = clearUnusedPlaceholder({
+    previousImpact,
+    impact,
+    droppables,
+  });
+
+  const isOver: ?DroppableId = whatIsDraggedOver(impact);
+
+  if (!isOver) {
+    return cleaned;
+  }
+
+  const droppable: DroppableDimension = droppables[isOver];
+
+  // no need to add additional space to home droppable
+  if (isHomeOf(draggable, droppable)) {
+    return cleaned;
+  }
+
+  // already have a placeholder - nothing to do here!
+  if (droppable.subject.withPlaceholder) {
+    return cleaned;
+  }
+
+  // Need to patch the existing droppable
+  const patched: DroppableDimension = addPlaceholder(
+    droppable,
+    draggable,
+    draggables,
+  );
+
+  return patchDroppableMap(cleaned, patched);
+};

package/src/state/rect.js

@@ -0,0 +1,7 @@
+// @flow
+import { getRect } from 'css-box-model';
+import type { Rect, Position } from 'css-box-model';
+import { offsetByPosition } from './spacing';
+
+export const offsetRectByPosition = (rect: Rect, point: Position): Rect =>
+  getRect(offsetByPosition(rect, point));