Improving box model (#471)

.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 402551,
-    "minified": 150440,
-    "gzipped": 42949
+    "bundled": 403525,
+    "minified": 151063,
+    "gzipped": 43057
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 360867,
-    "minified": 133520,
-    "gzipped": 37980
+    "bundled": 361852,
+    "minified": 134155,
+    "gzipped": 38068
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 179282,
-    "minified": 90441,
-    "gzipped": 22922,
+    "bundled": 176835,
+    "minified": 89457,
+    "gzipped": 22544,
     "treeshaked": {
-      "rollup": 78671,
-      "webpack": 80293
+      "rollup": 77939,
+      "webpack": 79710
     }
   }
 }

package.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
+    "css-box-model": "^0.0.12",
     "memoize-one": "^3.1.1",
     "prop-types": "^15.6.0",
     "raf-schd": "^2.1.1",

src/state/action-creators.js

@@ -1,4 +1,5 @@
 // @flow
+import { type Position } from 'css-box-model';
 import type {
   DraggableId,
   DroppableId,
@@ -8,7 +9,6 @@ import type {
   DroppableDimension,
   InitialDragPositions,
   DraggableLocation,
-  Position,
   Dispatch,
   State,
   CurrentDrag,
@@ -21,7 +21,7 @@ import type {
 } from '../types';
 import noImpact from './no-impact';
 import withDroppableDisplacement from './with-droppable-displacement';
-import getNewHomeClientCenter from './get-new-home-client-center';
+import getNewHomeClientBorderBoxCenter from './get-new-home-client-border-box-center';
 import { add, subtract, isEqual } from './position';
 import * as timings from '../debug/timings';
 
@@ -344,14 +344,14 @@ export const drop = () =>
       reason: 'DROP',
     };
 
-    const newCenter: Position = getNewHomeClientCenter({
+    const newBorderBoxCenter: Position = getNewHomeClientBorderBoxCenter({
       movement: impact.movement,
       draggable,
       draggables: state.dimension.draggable,
       destination,
     });
 
-    const clientOffset: Position = subtract(newCenter, draggable.client.marginBox.center);
+    const clientOffset: Position = subtract(newBorderBoxCenter, draggable.client.borderBox.center);
     const scrollDiff: Position = getScrollDiff({
       initial,
       current,

src/state/auto-scroller/can-scroll.js

@@ -1,9 +1,9 @@
 // @flow
+import { type Position } from 'css-box-model';
 import { add, apply, isEqual } from '../position';
 import type {
-  ClosestScrollable,
+  Scrollable,
   DroppableDimension,
-  Position,
   Viewport,
 } from '../../types';
 
@@ -102,7 +102,7 @@ export const canScrollDroppable = (
   droppable: DroppableDimension,
   change: Position,
 ): boolean => {
-  const closestScrollable: ?ClosestScrollable = droppable.viewport.closestScrollable;
+  const closestScrollable: ?Scrollable = droppable.viewport.closestScrollable;
   // Cannot scroll when there is no scroll container!
   if (!closestScrollable) {
     return false;
@@ -135,7 +135,7 @@ export const getDroppableOverlap = (droppable: DroppableDimension, change: Posit
     return null;
   }
 
-  const closestScrollable: ?ClosestScrollable = droppable.viewport.closestScrollable;
+  const closestScrollable: ?Scrollable = droppable.viewport.closestScrollable;
   // Cannot scroll when there is no scroll container!
   if (!closestScrollable) {
     return null;

src/state/auto-scroller/fluid-scroller.js

@@ -1,5 +1,6 @@
 // @flow
 import rafSchd from 'raf-schd';
+import type { Rect, Position, Spacing } from 'css-box-model';
 import { add, apply, isEqual, patch } from '../position';
 import getBestScrollableDroppable from './get-best-scrollable-droppable';
 import { horizontal, vertical } from '../axis';
@@ -8,16 +9,13 @@ import {
   canPartiallyScroll,
 } from './can-scroll';
 import type {
-  Area,
   Axis,
-  Spacing,
   DroppableId,
   DragState,
   DroppableDimension,
-  Position,
   State,
   DraggableDimension,
-  ClosestScrollable,
+  Scrollable,
   Viewport,
 } from '../../types';
 
@@ -47,7 +45,7 @@ export type PixelThresholds = {|
 |}
 
 // converts the percentages in the config into actual pixel values
-export const getPixelThresholds = (container: Area, axis: Axis): PixelThresholds => {
+export const getPixelThresholds = (container: Rect, axis: Axis): PixelThresholds => {
   const startFrom: number = container[axis.size] * config.startFrom;
   const maxSpeedAt: number = container[axis.size] * config.maxSpeedAt;
   const accelerationPlane: number = startFrom - maxSpeedAt;
@@ -85,8 +83,8 @@ const getSpeed = (distance: number, thresholds: PixelThresholds): number => {
 };
 
 type AdjustForSizeLimitsArgs = {|
-  container: Area,
-  subject: Area,
+  container: Rect,
+  subject: Rect,
   proposedScroll: Position,
 |}
 
@@ -117,8 +115,8 @@ const adjustForSizeLimits = ({
 };
 
 type GetRequiredScrollArgs = {|
-  container: Area,
-  subject: Area,
+  container: Rect,
+  subject: Rect,
   center: Position,
 |}
 
@@ -195,7 +193,7 @@ const withPlaceholder = (
   droppable: DroppableDimension,
   draggable: DraggableDimension,
 ): ?WithPlaceholderResult => {
-  const closest: ?ClosestScrollable = droppable.viewport.closestScrollable;
+  const closest: ?Scrollable = droppable.viewport.closestScrollable;
 
   if (!closest) {
     return null;
@@ -212,7 +210,7 @@ const withPlaceholder = (
 
   const spaceForPlaceholder: Position = patch(
     droppable.axis.line,
-    draggable.placeholder.borderBox[droppable.axis.size]
+    draggable.placeholder.client.borderBox[droppable.axis.size]
   );
 
   const newMax: Position = add(max, spaceForPlaceholder);
@@ -255,12 +253,12 @@ export default ({
       return;
     }
 
-    const center: Position = drag.current.page.center;
+    const center: Position = drag.current.page.borderBoxCenter;
 
     // 1. Can we scroll the viewport?
 
     const draggable: DraggableDimension = state.dimension.draggable[drag.initial.descriptor.id];
-    const subject: Area = draggable.page.marginBox;
+    const subject: Rect = draggable.page.marginBox;
     const viewport: Viewport = drag.current.viewport;
     const requiredWindowScroll: ?Position = getRequiredScroll({
       container: viewport.subject,
@@ -287,15 +285,15 @@ export default ({
     }
 
     // We know this has a closestScrollable
-    const closestScrollable: ?ClosestScrollable = droppable.viewport.closestScrollable;
+    const closestScrollable: ?Scrollable = droppable.viewport.closestScrollable;
 
     // this should never happen - just being safe
     if (!closestScrollable) {
       return;
     }
 
     const requiredFrameScroll: ?Position = getRequiredScroll({
-      container: closestScrollable.frame,
+      container: closestScrollable.framePageMarginBox,
       subject,
       center,
     });

src/state/auto-scroller/get-best-scrollable-droppable.js

@@ -1,9 +1,9 @@
 // @flow
 import memoizeOne from 'memoize-one';
 import invariant from 'tiny-invariant';
+import { type Position } from 'css-box-model';
 import isPositionInFrame from '../visibility/is-position-in-frame';
 import type {
-  Position,
   DroppableId,
   DroppableDimension,
   DroppableDimensionMap,
@@ -38,7 +38,7 @@ const getScrollableDroppableOver = (
     getScrollableDroppables(droppables)
       .find((droppable: DroppableDimension): boolean => {
         invariant(droppable.viewport.closestScrollable, 'Invalid result');
-        return isPositionInFrame(droppable.viewport.closestScrollable.frame)(target);
+        return isPositionInFrame(droppable.viewport.closestScrollable.framePageMarginBox)(target);
       });
 
   return maybe;

src/state/auto-scroller/index.js

@@ -1,11 +1,11 @@
 // @flow
+import { type Position } from 'css-box-model';
 import createFluidScroller, { type FluidScroller } from './fluid-scroller';
 import createJumpScroller, { type JumpScroller } from './jump-scroller';
 import type { AutoScroller } from './auto-scroller-types';
 import type {
   DraggableId,
   DroppableId,
-  Position,
   State,
   Viewport,
 } from '../../types';

src/state/auto-scroller/jump-scroller.js

@@ -1,4 +1,5 @@
 // @flow
+import { type Position } from 'css-box-model';
 import { add, subtract } from '../position';
 import {
   canScrollDroppable,
@@ -11,7 +12,6 @@ import type {
   DroppableId,
   DragState,
   DroppableDimension,
-  Position,
   State,
   DraggableLocation,
   Viewport,

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

@@ -1,4 +1,5 @@
 // @flow
+import { type Position } from 'css-box-model';
 import type {
   DraggableDescriptor,
   DroppableDescriptor,
@@ -7,7 +8,6 @@ import type {
   DraggableId,
   DroppableId,
   State,
-  Position,
   ScrollOptions,
 } from '../../types';
 

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

@@ -1,4 +1,5 @@
 // @flow
+import { type Position } from 'css-box-model';
 import type {
   DraggableId,
   DroppableId,
@@ -9,7 +10,6 @@ import type {
   DroppableDimension,
   State as AppState,
   Phase,
-  Position,
   LiftRequest,
   ScrollOptions,
 } from '../../types';