react-grid-layout - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

build/ReactGridLayout.js

@@ -233,6 +233,26 @@ "use strict";
       } = this.props;
+      let shouldMoveItem = false;
+      let finalLayout;
+      let x;
+      let y;
       const [newLayout, l] = (0, _utils.withLayoutItem)(layout, i, l => {
+        let hasCollisions;
+        x = l.x;
+        y = l.y;
+        if (["sw", "w", "nw", "n", "ne"].indexOf(handle) !== -1) {
+          if (["sw", "nw", "w"].indexOf(handle) !== -1) {
+            x = l.x + (l.w - w);
+            w = l.x !== x && x < 0 ? l.w : w;
+            x = x < 0 ? 0 : x;
+          }
+          if (["ne", "n", "nw"].indexOf(handle) !== -1) {
+            y = l.y + (l.h - h);
+            h = l.y !== y && y < 0 ? l.h : h;
+            y = y < 0 ? 0 : y;
+          }
+          shouldMoveItem = true;
+        }
+
         // Something like quad tree should be used
         // to find collisions faster
-        let hasCollisions;
         if (preventCollision && !allowOverlap) {
@@ -242,3 +262,5 @@ const collisions = (0, _utils.getAllCollisions)(layout, {
             w,
-            h
+            h,
+            x,
+            y
           }).filter(layoutItem => layoutItem.i !== l.i);
@@ -249,13 +271,12 @@ hasCollisions = collisions.length > 0;
           if (hasCollisions) {
-            // adjust w && h to maximum allowed space
-            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);
-            });
-            if (Number.isFinite(leastX)) l.w = leastX - l.x;
-            if (Number.isFinite(leastY)) l.h = leastY - l.y;
+            // Reset layoutItem dimensions if there were collisions
+            y = l.y;
+            h = l.h;
+            x = l.x;
+            w = l.w;
+            shouldMoveItem = false;
           }
         }
+        l.w = w;
+        l.h = h;
         return l;
@@ -266,25 +287,7 @@ });
       if (!l) return;
-      let finalLayout;
-      if (["sw", "w", "nw", "n", "ne"].indexOf(handle) !== -1) {
-        let x = l.x;
-        let y = l.y;
-        if (["sw", "nw", "w"].indexOf(handle) !== -1) {
-          x = l.x + (l.w - w);
-          w = l.x !== x && x < 0 ? l.w : w;
-          x = x < 0 ? 0 : x;
-        }
-        if (["ne", "n", "nw"].indexOf(handle) !== -1) {
-          y = l.y + (l.h - h);
-          h = l.y !== y && y < 0 ? l.h : h;
-          y = y < 0 ? 0 : y;
-        }
-        l.w = w;
-        l.h = h;
+      finalLayout = newLayout;
+      if (shouldMoveItem) {
         // Move the element to the new position.
         const isUserAction = true;
         finalLayout = (0, _utils.moveElement)(newLayout, l, x, y, isUserAction, this.props.preventCollision, (0, _utils.compactType)(this.props), cols, allowOverlap);
-      } else {
-        l.w = w;
-        l.h = h;
-        finalLayout = newLayout;
       }
@@ -291,0 +294,0 @@

CHANGELOG.md

 # Changelog
 
+## 1.4.2 (Sep 22, 2023)
+
+### Bugfixes
+
+- Resizing in every directionnow obeys preventCollision restrictions [#1937](https://github.com/react-grid-layout/react-grid-layout/pull/1937)
+
+## 1.4.1 (Sep 12, 2023)
+
+### Bugfixes
+
+- Fixed bug where height/width could not be resized if `h = 0` or `w = 0` and 0 `containerPadding`. [#1931](https://github.com/react-grid-layout/react-grid-layout/pull/1931)
+- Revert `fast-equals` to @4. Fixes incompatibility with `Create-React-App@5`.
+
 ## 1.4.0 (Sep 11, 2023)
@@ -4,0 +17,0 @@

lib/ReactGridLayout.jsx

@@ -408,10 +408,37 @@ // @flow
 
+    let shouldMoveItem = false;
+    let finalLayout;
+    let x;
+    let y;
+
     const [newLayout, l] = withLayoutItem(layout, i, l => {
+      let hasCollisions;
+      x = l.x;
+      y = l.y;
+      if (["sw", "w", "nw", "n", "ne"].indexOf(handle) !== -1) {
+        if (["sw", "nw", "w"].indexOf(handle) !== -1) {
+          x = l.x + (l.w - w);
+          w = l.x !== x && x < 0 ? l.w : w;
+          x = x < 0 ? 0 : x;
+        }
+
+        if (["ne", "n", "nw"].indexOf(handle) !== -1) {
+          y = l.y + (l.h - h);
+          h = l.y !== y && y < 0 ? l.h : h;
+          y = y < 0 ? 0 : y;
+        }
+
+        shouldMoveItem = true;
+      }
+
       // Something like quad tree should be used
       // to find collisions faster
-      let hasCollisions;
       if (preventCollision && !allowOverlap) {
-        const collisions = getAllCollisions(layout, { ...l, w, h }).filter(
-          layoutItem => layoutItem.i !== l.i
-        );
+        const collisions = getAllCollisions(layout, {
+          ...l,
+          w,
+          h,
+          x,
+          y
+        }).filter(layoutItem => layoutItem.i !== l.i);
         hasCollisions = collisions.length > 0;
@@ -421,15 +448,14 @@
         if (hasCollisions) {
-          // adjust w && h to maximum allowed space
-          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);
-          });
-
-          if (Number.isFinite(leastX)) l.w = leastX - l.x;
-          if (Number.isFinite(leastY)) l.h = leastY - l.y;
+          // Reset layoutItem dimensions if there were collisions
+          y = l.y;
+          h = l.h;
+          x = l.x;
+          w = l.w;
+          shouldMoveItem = false;
         }
       }
 
+      l.w = w;
+      l.h = h;
+
       return l;
@@ -441,20 +467,4 @@ });
 
-    let finalLayout;
-    if (["sw", "w", "nw", "n", "ne"].indexOf(handle) !== -1) {
-      let x = l.x;
-      let y = l.y;
-      if (["sw", "nw", "w"].indexOf(handle) !== -1) {
-        x = l.x + (l.w - w);
-        w = l.x !== x && x < 0 ? l.w : w;
-        x = x < 0 ? 0 : x;
-      }
-
-      if (["ne", "n", "nw"].indexOf(handle) !== -1) {
-        y = l.y + (l.h - h);
-        h = l.y !== y && y < 0 ? l.h : h;
-        y = y < 0 ? 0 : y;
-      }
-
-      l.w = w;
-      l.h = h;
+    finalLayout = newLayout;
+    if (shouldMoveItem) {
       // Move the element to the new position.
@@ -473,6 +483,2 @@ const isUserAction = true;
       );
-    } else {
-      l.w = w;
-      l.h = h;
-      finalLayout = newLayout;
     }
@@ -479,0 +485,0 @@

package.json

 {
   "name": "react-grid-layout",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
@@ -125,7 +125,9 @@ "main": "index.js",
   "lint-staged": {
-    "*.{js,jsx,css}": [
-      "eslint --ext .js,.jsx --fix",
-      "yarn fmt"
+    "*.{js,jsx}": [
+      "eslint --ext .js,.jsx --fix"
+    ],
+    "*": [
+      "prettier --ignore-unknown --write"
     ]
   }
 }

No alert changes

Improved metrics

Lines of code

6601

increased by0.08%

Worsened metrics

Total package byte prevSize

490482

decreased by-0.03%

No dependency changes