refactor(dropping): minor tweaks

Rename DroppingPosition properties to "left,top" to reflect other places
where "x,y" denote grid units and "left,top" denote px

Minor fixes for example 15

lib/GridItem.jsx

@@ -154,8 +154,8 @@ export default class GridItem extends React.Component<Props, State> {
     // Current position of a dropping element
     droppingPosition: PropTypes.shape({
       e: PropTypes.object.isRequired,
-      x: PropTypes.number.isRequired,
-      y: PropTypes.number.isRequired
+      left: PropTypes.number.isRequired,
+      top: PropTypes.number.isRequired
     })
   };
 
@@ -179,16 +179,17 @@ export default class GridItem extends React.Component<Props, State> {
   currentNode: HTMLElement;
 
   componentDidUpdate(prevProps: Props) {
-    if (this.props.droppingPosition && prevProps.droppingPosition) {
-      this.moveDroppingItem(prevProps);
-    }
+    this.moveDroppingItem(prevProps);
   }
 
+  // When a droppingPosition is present, this means we should fire a move event, as if we had moved
+  // this element by `x, y` pixels.
   moveDroppingItem(prevProps: Props) {
     const { droppingPosition } = this.props;
+    const prevDroppingPosition = prevProps.droppingPosition;
     const { dragging } = this.state;
 
-    if (!droppingPosition || !prevProps.droppingPosition) {
+    if (!droppingPosition || !prevDroppingPosition) {
       return;
     }
 
@@ -198,18 +199,18 @@ export default class GridItem extends React.Component<Props, State> {
     }
 
     const shouldDrag =
-      (dragging && droppingPosition.x !== prevProps.droppingPosition.x) ||
-      droppingPosition.y !== prevProps.droppingPosition.y;
+      (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
+      droppingPosition.top !== prevDroppingPosition.top;
 
     if (!dragging) {
       this.onDragStart(droppingPosition.e, {
         node: this.currentNode,
-        deltaX: droppingPosition.x,
-        deltaY: droppingPosition.y
+        deltaX: droppingPosition.left,
+        deltaY: droppingPosition.top
       });
     } else if (shouldDrag) {
-      const deltaX = droppingPosition.x - dragging.left;
-      const deltaY = droppingPosition.y - dragging.top;
+      const deltaX = droppingPosition.left - dragging.left;
+      const deltaY = droppingPosition.top - dragging.top;
 
       this.onDrag(droppingPosition.e, {
         node: this.currentNode,
@@ -371,9 +372,10 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {Object} callbackData  an object with node, delta and position information
    */
   onDrag = (e: Event, { node, deltaX, deltaY }: ReactDraggableCallbackData) => {
-    if (!this.props.onDrag) return;
-    deltaX /= this.props.transformScale;
-    deltaY /= this.props.transformScale;
+    const { onDrag, transformScale } = this.props;
+    if (!onDrag) return;
+    deltaX /= transformScale;
+    deltaY /= transformScale;
 
     const newPosition: PartialPosition = { top: 0, left: 0 };
 
@@ -392,8 +394,8 @@ export default class GridItem extends React.Component<Props, State> {
     );
 
     return (
-      this.props.onDrag &&
-      this.props.onDrag.call(this, this.props.i, x, y, {
+      onDrag &&
+      onDrag.call(this, this.props.i, x, y, {
         e,
         node,
         newPosition

lib/ReactGridLayout.jsx

@@ -721,9 +721,12 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     );
   }
 
+  // Called while dragging an element. Part of browser native drag/drop API.
+  // Native event target might be the layout itself, or an element within the layout.
   onDragOver = (e: DragOverEvent) => {
     // we should ignore events from layout's children in Firefox
     // to avoid unpredictable jumping of a dropping placeholder
+    // FIXME remove this hack
     if (
       isFirefox &&
       e.nativeEvent.target.className.indexOf(layoutClassName) === -1
@@ -741,8 +744,9 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       containerPadding
     } = this.props;
     const { layout } = this.state;
+    // This is relative to the DOM element that this event fired for.
     const { layerX, layerY } = e.nativeEvent;
-    const droppingPosition = { x: layerX, y: layerY, e };
+    const droppingPosition = { left: layerX, top: layerY, e };
 
     if (!this.state.droppingDOMNode) {
       const positionParams: PositionParams = {
@@ -777,10 +781,11 @@ export default class ReactGridLayout extends React.Component<Props, State> {
         ]
       });
     } else if (this.state.droppingPosition) {
-      const shouldUpdatePosition =
-        this.state.droppingPosition.x != layerX ||
-        this.state.droppingPosition.y != layerY;
-      shouldUpdatePosition && this.setState({ droppingPosition });
+      const { left, top } = this.state.droppingPosition;
+      const shouldUpdatePosition = left != layerX || top != layerY;
+      if (shouldUpdatePosition) {
+        this.setState({ droppingPosition });
+      }
     }
 
     e.stopPropagation();

lib/utils.js

@@ -38,7 +38,7 @@ export type ReactDraggableCallbackData = {
 };
 
 export type PartialPosition = { left: number, top: number };
-export type DroppingPosition = { x: number, y: number, e: Event };
+export type DroppingPosition = { left: number, top: number, e: Event };
 export type Size = { width: number, height: number };
 export type GridDragEvent = {
   e: Event,

test/examples/15-drag-from-outside.jsx

@@ -70,7 +70,7 @@ export default class DragFromOutsideLayout extends React.Component {
   };
 
   onDrop = elemParams => {
-    alert(`Element parameters: ${JSON.stringify(elemParams)}`);
+    alert(`Element parameters:\n${JSON.stringify(elemParams, ['x', 'y', 'w', 'h'], 2)}`);
   };
 
   render() {

test/test-hook.jsx

@@ -14,9 +14,11 @@ export default function makeLayout(Layout) {
 
     stringifyLayout() {
       return this.state.layout.map(function(l) {
+        const name = l.i === "__dropping-elem__" ? "drop" : l.i;
         return (
           <div className="layoutItem" key={l.i}>
-            <b>{l.i}</b>: [{l.x}, {l.y}, {l.w}, {l.h}]
+            <b>{name}</b>
+            {`: [${l.x}, ${l.y}, ${l.w}, ${l.h}]`}
           </div>
         );
       });