updating types

src/debug/timings.js

@@ -11,7 +11,7 @@ const flag: string = '__react-beautiful-dnd-debug-timings-hook__';
 const isTimingsEnabled = (): boolean => Boolean(window[flag]);
 
 // Debug: uncomment to enable
-// window[flag] = true;
+window[flag] = true;
 
 export const start = (key: string) => {
   if (!isTimingsEnabled()) {

src/state/action-creators.js

@@ -50,32 +50,32 @@ export const initialPublish = (args: InitialPublishArgs): InitialPublishAction =
   payload: args,
 });
 
-export type BulkReplaceArgs = {|
-  dimensions: DimensionMap,
+export type PublishArgs = {|
+  additions: DimensionMap,
+  removals: {|
+    draggables: DraggableId[],
+    droppables: DroppableId[],
+  |},
   viewport: Viewport,
-  // optionally provide new critical dimensions
-  // if published then it is assumed that the dimensions
-  // map includes the new critical dimensions
-  critical: ?Critical,
 |}
 
-export type BulkReplaceAction = {|
-  type: 'BULK_REPLACE',
-  payload: BulkReplaceArgs
+export type PublishAction = {|
+  type: 'PUBLISH',
+  payload: PublishArgs
 |}
 
-export const bulkReplace = (args: BulkReplaceArgs): BulkReplaceAction => ({
-  type: 'BULK_REPLACE',
+export const bulkReplace = (args: PublishArgs): PublishAction => ({
+  type: 'PUBLISH',
   payload: args,
 });
 
-export type BulkCollectionStartingAction = {|
-  type: 'BULK_COLLECTION_STARTING',
+export type CollectionStartingAction = {|
+  type: 'COLLECTION_STARTING',
   payload: null
 |}
 
-export const bulkCollectionStarting = (): BulkCollectionStartingAction => ({
-  type: 'BULK_COLLECTION_STARTING',
+export const bulkCollectionStarting = (): CollectionStartingAction => ({
+  type: 'COLLECTION_STARTING',
   payload: null,
 });
 
@@ -259,7 +259,7 @@ export type Action =
   LiftAction |
   InitialPublishAction |
   BulkCollectionStartingAction |
-  BulkReplaceAction |
+  PublishAction |
   UpdateDroppableScrollAction |
   UpdateDroppableIsEnabledAction |
   MoveByWindowScrollAction |

src/state/bulk-replace/with-critical-replacement.js

@@ -50,7 +50,6 @@ export default ({
   const newClientBorderBoxCenter: Position = draggable.client.borderBox.center;
   // How much the dragging item is shifting
   const centerDiff: Position = subtract(newClientBorderBoxCenter, oldClientBorderBoxCenter);
-  console.warn('CENTER DIFF', centerDiff);
 
   const oldInitialClientSelection: Position = state.initial.client.selection;
   const newInitialClientSelection: Position = add(oldInitialClientSelection, centerDiff);
@@ -91,16 +90,6 @@ export default ({
     return { client, page };
   })();
 
-  console.group('critical replacement');
-  console.log('NEW START INDEX', critical.draggable.index);
-  console.log('PRE-UPDATE: initial page center', state.initial.page.borderBoxCenter);
-  console.log('PRE-UPDATE: current page center', state.current.page.borderBoxCenter);
-  console.warn('POST-UPDATE: initial page center', initial.page.borderBoxCenter);
-  console.warn('POST-UPDATE: current page center', current.page.borderBoxCenter);
-  // console.log('PRE (generated-1): page center', state.dimensions.draggables['generated-1'].page.borderBox.center)
-  // console.log('POST(generated-1):  page center', dimensions.draggables['generated-1'].page.borderBox.center)
-  console.log('home impact', getHomeImpact(critical, dimensions));
-
   const impact: DragImpact = getDragImpact({
     pageBorderBoxCenter: current.page.borderBoxCenter,
     draggable: dimensions.draggables[critical.draggable.id],
@@ -110,11 +99,6 @@ export default ({
     viewport,
   });
 
-  console.log('NEW IMPACT INDEX', impact.destination ? impact.destination.index : null);
-  console.log('isBeyondStartPosition', impact.movement.isBeyondStartPosition);
-  console.log('displaced', impact.movement.displaced.map(entry => entry.draggableId));
-  console.groupEnd();
-
   // stripping out any animations
   const forcedNoAnimations: DragImpact = {
     ...impact,

src/state/dimension-marshal/dimension-marshal.js

@@ -265,7 +265,8 @@ export default (callbacks: Callbacks) => {
 
   const getCritical = (windowScroll: Position): DimensionMap => {
     invariant(collection, 'Cannot get critical dimensions without a collection');
-    timings.start('initial collection and publish');
+    const timingKey: string = 'initial collection and publish';
+    timings.start(timingKey);
 
     const draggable: DraggableDescriptor = collection.critical.draggable;
     const droppable: DroppableDescriptor = collection.critical.droppable;
@@ -281,7 +282,7 @@ export default (callbacks: Callbacks) => {
       },
     };
 
-    timings.finish('initial collection and publish');
+    timings.finish(timingKey);
     return map;
   };
 

src/state/dimension-marshal/simple-collector.js

@@ -0,0 +1,81 @@
+// @flow
+import type {
+  DraggableId,
+  DroppableId,
+  DraggableDimensionMap,
+  DroppableDimensionMap,
+  DimensionMap,
+  DraggableDimension,
+  DroppableDimension,
+} from '../../types';
+
+type Args = {|
+  getDraggableDimension: (id: DraggableId) => DraggableDimension,
+  getDroppableDimension: (id: DroppableId) => DroppableDimension,
+  publish: (map: DimensionMap) => void,
+|}
+
+type Collector = {|
+  collectDraggable: (id: DraggableId) => void,
+  collectDroppable: (id: DroppableId) => void,
+|}
+
+type ToCollect = {|
+  draggables: DraggableId[],
+  droppables: DroppableId[],
+|}
+
+const toMap = array => array.reduce((previous, current) => {
+  previous[current.descriptor.id] = current;
+  return previous;
+}, {});
+
+export default ({
+  getDraggableDimension,
+  getDroppableDimension,
+  publish,
+}: Args): Collector => {
+  const toCollect: ToCollect = {
+    draggables: [],
+    droppables: [],
+  };
+  let frameId: ?AnimationFrameID = null;
+
+  const collect = () => {
+    if (frameId) {
+      return;
+    }
+
+    frameId = requestAnimationFrame(() => {
+      frameId = null;
+      const draggables: DraggableDimensionMap = toMap(
+        toCollect.draggables.map((id: DraggableId): DraggableDimension => getDraggableDimension(id))
+      );
+
+      const droppables: DroppableDimensionMap = toMap(
+        toCollect.droppables.map((id: DroppableId): DroppableDimension => getDroppableDimension(id))
+      );
+
+      const dimensions: DimensionMap = { draggables, droppables };
+
+      // reset toCollect
+      toCollect.draggables.length = 0;
+      toCollect.droppables.length = 0;
+
+      publish(dimensions);
+    });
+  };
+
+  const collectDraggable = (id: DraggableId) => {
+    toCollect.draggables.push(id);
+    collect();
+  };
+
+  const collectDroppable = (id: DroppableId) => {
+    toCollect.droppables.push(id);
+    collect();
+  };
+
+  return { collectDraggable, collectDroppable };
+};
+

src/state/get-drag-impact/in-home-list.js

@@ -33,18 +33,14 @@ export default ({
   previousImpact,
   viewport,
 }: Args): DragImpact => {
-  console.group('in home list');
   const axis: Axis = home.axis;
   // The starting center position
   const originalCenter: Position = draggable.page.borderBox.center;
-  console.log('original page center', originalCenter);
 
   // Where the element actually is now.
   // Need to take into account the change of scroll in the droppable
   const currentCenter: Position = withDroppableScroll(home, pageBorderBoxCenter);
 
-  console.log('current page center', currentCenter);
-
   // not considering margin so that items move based on visible edges
   const isBeyondStartPosition: boolean =
     currentCenter[axis.line] - originalCenter[axis.line] > 0;
@@ -54,8 +50,6 @@ export default ({
   // Amount to move needs to include the margins
   const amount: Position = patch(axis.line, draggable.client.marginBox[axis.size]);
 
-  console.groupEnd();
-
   const displaced: Displacement[] = insideHome
     .filter((child: DraggableDimension): boolean => {
       // do not want to move the item that is dragging
@@ -81,13 +75,6 @@ export default ({
         return false;
       }
 
-      console.group(child.descriptor.id);
-      console.log('original page center', originalCenter[axis.line]);
-      console.log('current page center', currentCenter[axis.line]);
-      console.log('comparing against borderBox', borderBox[axis.end]);
-      console.log('will displace', currentCenter[axis.line] < borderBox[axis.end]);
-      console.groupEnd();
-
       return currentCenter[axis.line] < borderBox[axis.end];
     })
     .map((dimension: DraggableDimension): Displacement => getDisplacement({