react-grid-layout 0.16.5 → 0.16.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+0.16.6 (Mar 8, 2018)
+----
+
+- Fixed collision issue where items below could rearrange on a move.
+  - The root cause was "teleportation", or practically the same bug that leads to Pac-Man going through
+    ghosts now and then. If a large element moves up by a few grid units, the space it vacates can suddenly
+    become occupiable by an element below it. Rather than the collision happening properly, they exchange spaces
+    atomically. The fix is to move items down one grid unit at a time to ensure
+    this rearrangement does not happen.
+  - Thanks @torkelo for your hard work on this for Grafana 5, which I very unfortunately managed to break
+    when refactoring for 0.16.1.
+  - Ref: #650, #739
+- Added a "Toolbox" demo (thanks @jhob)
+
 0.16.5 (Feb 26, 2018)
 ----
 

package/build/ReactGridLayout.js.flow

@@ -453,14 +453,17 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     // to find collisions faster
     let hasCollisions;
     if (preventCollision) {
-      const collisions = getAllCollisions(layout, { ...l, w, h }).filter((layoutItem) => layoutItem.i !== l.i);
+      const collisions = getAllCollisions(layout, { ...l, w, h }).filter(
+        layoutItem => layoutItem.i !== l.i
+      );
       hasCollisions = collisions.length > 0;
 
       // If we're colliding, we need adjust the placeholder.
       if (hasCollisions) {
         // adjust w && h to maximum allowed space
-        let leastX = Infinity, leastY = Infinity;
-        collisions.forEach((layoutItem) => {
+        let leastX = Infinity,
+          leastY = Infinity;
+        collisions.forEach(layoutItem => {
           if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
           if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
         });

package/build/utils.js

@@ -162,10 +162,13 @@ function resolveCompactionCollision(layout, item, moveToCoord, axis) {
   // Go through each item we collide with.
   for (var _i4 = itemIndex + 1; _i4 < layout.length; _i4++) {
     var otherItem = layout[_i4];
-
     // Ignore static items
     if (otherItem.static) continue;
 
+    // Optimization: we can break early if we know we're past this el
+    // We can do this b/c it's a sorted layout
+    if (otherItem.y > item.y + item.h) break;
+
     if (collides(item, otherItem)) {
       resolveCompactionCollision(layout, otherItem, moveToCoord + item[sizeProp], axis);
     }
@@ -296,17 +299,17 @@ function getStatics(layout) {
  */
 function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols) {
   if (l.static) return layout;
-  log("Moving element " + l.i + " to [" + x + "," + y + "] from [" + l.x + "," + l.y + "]");
 
   // Short-circuit if nothing to do.
   if (l.y === y && l.x === x) return layout;
 
+  log("Moving element " + l.i + " to [" + String(x) + "," + String(y) + "] from [" + l.x + "," + l.y + "]");
   var oldX = l.x;
   var oldY = l.y;
 
   // This is quite a bit faster than extending the object
-  l.x = x;
-  l.y = y;
+  if (typeof x === 'number') l.x = x;
+  if (typeof y === 'number') l.y = y;
   l.moved = true;
 
   // If this collides with anything, move it.
@@ -314,7 +317,7 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
   // to ensure, in the case of multiple collisions, that we're getting the
   // nearest collision.
   var sorted = sortLayoutItems(layout, compactType);
-  var movingUp = compactType === "vertical" ? oldY >= y : compactType === "horizontal" ? oldX >= x : false;
+  var movingUp = compactType === "vertical" && typeof y === 'number' ? oldY >= y : compactType === "horizontal" && typeof x === 'number' ? oldX >= x : false;
   if (movingUp) sorted = sorted.reverse();
   var collisions = getAllCollisions(sorted, l);
 
@@ -369,7 +372,7 @@ function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAc
     // Make a mock item so we don't modify the item here, only modify in moveElement.
     var fakeItem = {
       x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
-      y: !compactH ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
+      y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
       w: itemToMove.w,
       h: itemToMove.h,
       i: "-1"
@@ -378,11 +381,11 @@ function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAc
     // No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
     if (!getFirstCollision(layout, fakeItem)) {
       log("Doing reverse collision on " + itemToMove.i + " up to [" + fakeItem.x + "," + fakeItem.y + "].");
-      return moveElement(layout, itemToMove, fakeItem.x, fakeItem.y, isUserAction, preventCollision, compactType, cols);
+      return moveElement(layout, itemToMove, compactH ? fakeItem.x : undefined, compactV ? fakeItem.y : undefined, isUserAction, preventCollision, compactType, cols);
     }
   }
 
-  return moveElement(layout, itemToMove, compactH ? collidesWith.x + collidesWith.w : itemToMove.x, compactV ? collidesWith.y + collidesWith.h : itemToMove.y, isUserAction, preventCollision, compactType, cols);
+  return moveElement(layout, itemToMove, compactH ? itemToMove.x + 1 : undefined, compactV ? itemToMove.y + 1 : undefined, isUserAction, preventCollision, compactType, cols);
 }
 
 /**

package/build/utils.js.flow

@@ -190,10 +190,13 @@ function resolveCompactionCollision(
   // Go through each item we collide with.
   for (let i = itemIndex + 1; i < layout.length; i++) {
     const otherItem = layout[i];
-
     // Ignore static items
     if (otherItem.static) continue;
 
+    // Optimization: we can break early if we know we're past this el
+    // We can do this b/c it's a sorted layout
+    if (otherItem.y > (item.y + item.h)) break;
+
     if (collides(item, otherItem)) {
       resolveCompactionCollision(
         layout,
@@ -342,25 +345,25 @@ export function getStatics(layout: Layout): Array<LayoutItem> {
 export function moveElement(
   layout: Layout,
   l: LayoutItem,
-  x: number,
-  y: number,
+  x: ?number,
+  y: ?number,
   isUserAction: ?boolean,
   preventCollision: ?boolean,
   compactType: CompactType,
-  cols: number
+  cols: number,
 ): Layout {
   if (l.static) return layout;
-  log(`Moving element ${l.i} to [${x},${y}] from [${l.x},${l.y}]`);
 
   // Short-circuit if nothing to do.
   if (l.y === y && l.x === x) return layout;
 
+  log(`Moving element ${l.i} to [${String(x)},${String(y)}] from [${l.x},${l.y}]`);
   const oldX = l.x;
   const oldY = l.y;
 
   // This is quite a bit faster than extending the object
-  l.x = x;
-  l.y = y;
+  if (typeof x === 'number') l.x = x;
+  if (typeof y === 'number') l.y = y;
   l.moved = true;
 
   // If this collides with anything, move it.
@@ -369,9 +372,9 @@ export function moveElement(
   // nearest collision.
   let sorted = sortLayoutItems(layout, compactType);
   const movingUp =
-    compactType === "vertical"
-      ? oldY >= y
-      : compactType === "horizontal" ? oldX >= x : false;
+    compactType === "vertical" && typeof y === 'number' ? oldY >= y
+    : compactType === "horizontal" && typeof x === 'number' ? oldX >= x
+    : false;
   if (movingUp) sorted = sorted.reverse();
   const collisions = getAllCollisions(sorted, l);
 
@@ -451,7 +454,7 @@ export function moveElementAwayFromCollision(
     // Make a mock item so we don't modify the item here, only modify in moveElement.
     const fakeItem: LayoutItem = {
       x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
-      y: !compactH ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
+      y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
       w: itemToMove.w,
       h: itemToMove.h,
       i: "-1"
@@ -467,8 +470,8 @@ export function moveElementAwayFromCollision(
       return moveElement(
         layout,
         itemToMove,
-        fakeItem.x,
-        fakeItem.y,
+        compactH ? fakeItem.x : undefined,
+        compactV ? fakeItem.y : undefined,
         isUserAction,
         preventCollision,
         compactType,
@@ -480,8 +483,8 @@ export function moveElementAwayFromCollision(
   return moveElement(
     layout,
     itemToMove,
-    compactH ? collidesWith.x + collidesWith.w : itemToMove.x,
-    compactV ? collidesWith.y + collidesWith.h : itemToMove.y,
+    compactH ? itemToMove.x + 1 : undefined,
+    compactV ? itemToMove.y + 1 : undefined,
     isUserAction,
     preventCollision,
     compactType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "0.16.5",
+  "version": "0.16.6",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {