lets see how we go

src/debug/timings.js

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

src/state/action-creators.js

@@ -85,44 +85,56 @@ export const completeLift = (
   },
 });
 
-export type PublishDraggableDimensionAction = {|
-  type: 'PUBLISH_DRAGGABLE_DIMENSION',
-  payload: DraggableDimension,
-|}
-
-export const publishDraggableDimension =
-  (dimension: DraggableDimension): PublishDraggableDimensionAction => ({
-    type: 'PUBLISH_DRAGGABLE_DIMENSION',
-    payload: dimension,
-  });
-
-export type PublishDroppableDimensionAction = {|
-  type: 'PUBLISH_DROPPABLE_DIMENSION',
-  payload: DroppableDimension,
+export type InitialPublishAction = {|
+  type: 'INITIAL_PUBLISH',
+  payload: {|
+    home: DroppableDimension,
+    draggable: DraggableDimension,
+    viewport: Viewport,
+  |}
 |}
 
-export const publishDroppableDimension =
-  (dimension: DroppableDimension): PublishDroppableDimensionAction => ({
-    type: 'PUBLISH_DROPPABLE_DIMENSION',
-    payload: dimension,
-  });
+export const initialPublish = (
+  home: DroppableDimension,
+  draggable: DraggableDimension,
+  viewport: Viewport,
+): InitialPublishAction => ({
+  type: 'INITIAL_PUBLISH',
+  payload: {
+    home,
+    draggable,
+    viewport,
+  },
+});
 
-export type BulkPublishDimensionsAction = {|
-  type: 'BULK_DIMENSION_PUBLISH',
+export type BulkReplaceAction = {|
+  type: 'BULK_REPLACE',
   payload: {|
     droppables: DroppableDimension[],
     draggables: DraggableDimension[],
+    viewport: Viewport,
+    replaceCritical: boolean,
   |}
 |}
 
-export const bulkPublishDimensions = (
+type BulkReplaceArgs = {|
   droppables: DroppableDimension[],
   draggables: DraggableDimension[],
-): BulkPublishDimensionsAction => ({
-  type: 'BULK_DIMENSION_PUBLISH',
+  viewport: Viewport,
+  replaceCritical: boolean,
+|}
+export const bulkReplace = ({
+  droppables,
+  draggables,
+  viewport,
+  replaceCritical,
+}: BulkReplaceArgs): BulkReplaceAction => ({
+  type: 'BULK_REPLACE',
   payload: {
     droppables,
     draggables,
+    viewport,
+    replaceCritical,
   },
 });
 
@@ -522,9 +534,8 @@ export const lift = (id: DraggableId,
 export type Action =
   CompleteLiftAction |
   RequestDimensionsAction |
-  PublishDraggableDimensionAction |
-  PublishDroppableDimensionAction |
-  BulkPublishDimensionsAction |
+  InitialPublishAction |
+  BulkPublishAction |
   UpdateDroppableDimensionScrollAction |
   UpdateDroppableDimensionIsEnabledAction |
   MoveByWindowScrollAction |

src/state/dimension-marshal/collector.js

@@ -1,6 +1,8 @@
 // @flow
 import invariant from 'tiny-invariant';
+import { type Position } from 'css-box-model';
 import * as timings from '../../debug/timings';
+import getViewport from '../../view/window/get-viewport';
 import type {
   DraggableId,
   DroppableId,
@@ -9,6 +11,7 @@ import type {
   DroppableDescriptor,
   DraggableDescriptor,
   ScrollOptions,
+  Viewport,
 } from '../../types';
 import type {
   Entries,
@@ -34,7 +37,11 @@ type InternalOptions = {|
 
 type Args = {|
   getEntries: () => Entries,
-  publish: (droppables: DroppableDimension[], draggables: DraggableDimension[]) => void,
+  publish: (
+    droppables: DroppableDimension[],
+    draggables: DraggableDimension[],
+    viewport: Viewport,
+  ) => void,
 |}
 
 const defaultOptions: InternalOptions = {
@@ -51,7 +58,7 @@ export default ({
   let isQueued: boolean = false;
   let isRunning: boolean = false;
 
-  const collectFromDOM = (options: InternalOptions): Collected => {
+  const collectFromDOM = (windowScroll: Position, options: InternalOptions): Collected => {
     invariant(isActive, 'Should not collect when not active');
     invariant(collection, 'Need collection options to pull from DOM');
 
@@ -109,10 +116,11 @@ export default ({
 
     const droppableDimensions: DroppableDimension[] =
       droppables.map((entry: DroppableEntry): DroppableDimension =>
-        entry.callbacks.getDimensionAndWatchScroll(scrollOptions));
+        entry.callbacks.getDimensionAndWatchScroll(windowScroll, scrollOptions));
 
     const draggableDimensions: DraggableDimension[] =
-      draggables.map((entry: DraggableEntry): DraggableDimension => entry.getDimension());
+      draggables.map((entry: DraggableEntry): DraggableDimension =>
+        entry.getDimension(windowScroll));
 
     // 4. Tell all the droppables to show their placeholders
     droppables.forEach((entry: DroppableEntry) => entry.callbacks.showPlaceholder());
@@ -131,13 +139,14 @@ export default ({
     // Perform DOM collection in next frame
     frameId = requestAnimationFrame(() => {
       timings.start('DOM collection');
-      const collected: Collected = collectFromDOM(options);
+      const viewport: Viewport = getViewport();
+      const collected: Collected = collectFromDOM(viewport.scroll, options);
       timings.finish('DOM collection');
 
       // Perform publish in next frame
       frameId = requestAnimationFrame(() => {
         timings.start('Bulk dimension publish');
-        publish(collected.droppables, collected.draggables);
+        publish(collected.droppables, collected.draggables, viewport);
         timings.finish('Bulk dimension publish');
 
         // TODO: what if publish caused collection?

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

@@ -9,10 +9,11 @@ import type {
   DroppableId,
   State,
   ScrollOptions,
+  Viewport,
 } from '../../types';
 
-export type GetDraggableDimensionFn = () => DraggableDimension;
-export type GetDroppableDimensionFn = (options: ScrollOptions) => DroppableDimension;
+export type GetDraggableDimensionFn = (windowScroll: Position) => DraggableDimension;
+export type GetDroppableDimensionFn = (windowScroll: Position, options: ScrollOptions) => DroppableDimension;
 
 export type DroppableCallbacks = {|
   getDimensionAndWatchScroll: GetDroppableDimensionFn,
@@ -92,9 +93,15 @@ export type Callbacks = {|
   cancel: () => void,
   publishDraggable: (DraggableDimension) => void,
   publishDroppable: (DroppableDimension) => void,
+  initialPublish: (
+    home: DroppableDimension,
+    draggable: DraggableDimension,
+    viewport: Viewport,
+  ) => void,
   bulkPublish: (
     droppables: DroppableDimension[],
     draggables: DraggableDimension[],
+    viewport: Viewport,
   ) => void,
   updateDroppableScroll: (id: DroppableId, newScroll: Position) => void,
   updateDroppableIsEnabled: (id: DroppableId, isEnabled: boolean) => void,

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

@@ -2,6 +2,8 @@
 import { type Position } from 'css-box-model';
 import invariant from 'tiny-invariant';
 import createCollector, { type Collector } from './collector';
+// TODO: state folder reaching into view
+import getViewport from '../../view/window/get-viewport';
 import * as timings from '../../debug/timings';
 import type {
   DraggableId,
@@ -13,6 +15,7 @@ import type {
   State as AppState,
   Phase,
   LiftRequest,
+  Viewport,
 } from '../../types';
 import type {
   DimensionMarshal,
@@ -249,13 +252,16 @@ export default (callbacks: Callbacks) => {
       },
     };
 
+    const viewport: Viewport = getViewport();
+
     // Get the minimum dimensions to start a drag
     timings.start('initial collection and publish');
     const home: DroppableDimension =
-    homeEntry.callbacks.getDimensionAndWatchScroll(request.scrollOptions);
-    const draggable: DraggableDimension = draggableEntry.getDimension();
-    callbacks.publishDroppable(home);
-    callbacks.publishDraggable(draggable);
+    homeEntry.callbacks.getDimensionAndWatchScroll(viewport.scroll, request.scrollOptions);
+    const draggable: DraggableDimension = draggableEntry.getDimension(viewport.scroll);
+    callbacks.initialPublish(home, draggable, viewport);
+    // callbacks.publishDroppable(home);
+    // callbacks.publishDraggable(draggable);
     timings.finish('initial collection and publish');
   };