react-grid-layout 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # 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)
 
 Hey, it's been a long time! Taking a year and a half off is a pretty "open-source" thing to do, thanks for bearing with me.

package/build/GridItem.js

@@ -22,14 +22,11 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
   GridDragEvent,
   GridResizeEvent,
   DroppingPosition,
-  Position
+  Position,
+  ResizeHandleAxis
 } from "./utils";*/
 /*:: import type { PositionParams } from "./calculateUtils";*/
-/*:: import type {
-  ResizeHandleAxis,
-  ResizeHandle,
-  ReactRef
-} from "./ReactGridLayoutPropTypes";*/
+/*:: import type { ResizeHandle, ReactRef } from "./ReactGridLayoutPropTypes";*/
 /*:: type PartialPosition = { top: number, left: number };*/
 /*:: type GridItemCallback<Data: GridDragEvent | GridResizeEvent> = (
   i: string,
@@ -37,16 +34,16 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
   h: number,
   Data
 ) => void;*/
+/*:: type ResizeCallbackData = {
+  node: HTMLElement,
+  size: Position,
+  handle: ResizeHandleAxis
+};*/
 /*:: type GridItemResizeCallback = (
   e: Event,
   data: ResizeCallbackData,
   position: Position
 ) => void;*/
-/*:: type ResizeCallbackData = {
-  node: HTMLElement,
-  size: Position,
-  handle: string
-};*/
 /*:: type State = {
   resizing: ?{ top: number, left: number, width: number, height: number },
   dragging: ?{ top: number, left: number },
@@ -401,8 +398,8 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
    * Utility function to setup callback handler definitions for
    * similarily structured resize events.
    */
-  curryResizeHandler(position /*: Position*/, handler /*: function*/) /*: function*/{
-    return (e /*: Event*/, data /*: ResizeCallbackData*/) => /*: function*/handler(e, data, position);
+  curryResizeHandler(position /*: Position*/, handler /*: Function*/) /*: Function*/{
+    return (e /*: Event*/, data /*: ResizeCallbackData*/) => /*: Function*/handler(e, data, position);
   }
 
   /**
@@ -414,7 +411,6 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
   mixinResizable(child /*: ReactElement<any>*/, position /*: Position*/, isResizable /*: boolean*/) /*: ReactElement<any>*/{
     const {
       cols,
-      x,
       minW,
       minH,
       maxW,
@@ -453,11 +449,13 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
     }, child);
   }
   /**
-   * Wrapper around drag events to provide more useful data.
-   * All drag events call the function with the given handler name,
-   * with the signature (index, x, y).
+   * Wrapper around resize events to provide more useful data.
    */
-  onResizeHandler(e /*: Event*/, _ref4 /*:: */, position /*: Position*/, handlerName /*: string*/) /*: void*/{
+  onResizeHandler(e /*: Event*/, _ref4 /*:: */,
+  // 'size' is updated position
+  position /*: Position*/,
+  // existing position
+  handlerName /*: string*/) /*: void*/{
     let {
       node,
       size,
@@ -470,122 +468,33 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
       y,
       i,
       maxH,
-      minH
+      minH,
+      containerWidth
     } = this.props;
-    let {
+    const {
       minW,
       maxW
     } = this.props;
 
-    // Get new XY
-    let {
-      w,
-      h
-    } = (0, _calculateUtils.calcWH)(this.getPositionParams(), size.width, size.height, x, y, handle);
-
-    // minW should be at least 1 (TODO propTypes validation?)
-    minW = Math.max(minW, 1);
-
-    // Min/max capping
-    w = (0, _calculateUtils.clamp)(w, minW, maxW);
-    h = (0, _calculateUtils.clamp)(h, minH, maxH);
+    // Clamping of dimensions based on resize direction
     let updatedSize = size;
     if (node) {
-      const currentLeft = position.left;
-      const currentTop = position.top;
-      const currentWidth = position.width;
-      const currentHeight = position.height;
-      const resizeNorth = _ref5 => {
-        let {
-          left,
-          height,
-          width
-        } = _ref5;
-        const top = currentTop - (height - currentHeight);
-        return {
-          top,
-          left,
-          width,
-          height: this.constrainHeight(top, currentHeight, height),
-          top: this.constrainTop(top)
-        };
-      };
-      const resizeEast = _ref6 => {
-        let {
-          top,
-          left,
-          height,
-          width
-        } = _ref6;
-        return {
-          top,
-          height,
-          width: this.constrainWidth(currentLeft, currentWidth, width),
-          left: this.constrainLeft(left)
-        };
-      };
-      const resizeWest = _ref7 => {
-        let {
-          top,
-          height,
-          width
-        } = _ref7;
-        const left = currentLeft - (width - currentWidth);
-        return {
-          height,
-          width: left <= 0 ? currentWidth : this.constrainWidth(currentLeft, currentWidth, width),
-          top: this.constrainTop(top),
-          left: this.constrainLeft(left)
-        };
-      };
-      const resizeSouth = _ref8 => {
-        let {
-          top,
-          left,
-          height,
-          width
-        } = _ref8;
-        return {
-          width,
-          left,
-          height: this.constrainHeight(top, currentHeight, height),
-          top: this.constrainTop(top)
-        };
-      };
-      const resizeNorthEast = function () {
-        return resizeNorth(resizeEast(...arguments));
-      };
-      const resizeNorthWest = function () {
-        return resizeNorth(resizeWest(...arguments));
-      };
-      const resizeSouthEast = function () {
-        return resizeSouth(resizeEast(...arguments));
-      };
-      const resizeSouthWest = function () {
-        return resizeSouth(resizeWest(...arguments));
-      };
-      const ordinalResizeHandlerMap = {
-        n: resizeNorth,
-        ne: resizeNorthEast,
-        e: resizeEast,
-        se: resizeSouthEast,
-        s: resizeSouth,
-        sw: resizeSouthWest,
-        w: resizeWest,
-        nw: resizeNorthWest
-      };
-      const resizeHandler = ordinalResizeHandlerMap[handle];
-      updatedSize = resizeHandler ? resizeHandler({
-        top: currentTop,
-        left: currentLeft,
-        height: currentHeight,
-        width: currentWidth,
-        ...size
-      }) : size;
+      updatedSize = (0, _utils.resizeItemInDirection)(handle, position, size, containerWidth);
       this.setState({
         resizing: handlerName === "onResizeStop" ? null : updatedSize
       });
     }
+
+    // Get new XY based on pixel size
+    let {
+      w,
+      h
+    } = (0, _calculateUtils.calcWH)(this.getPositionParams(), updatedSize.width, updatedSize.height, x, y, handle);
+
+    // Min/max capping.
+    // minW should be at least 1 (TODO propTypes validation?)
+    w = (0, _calculateUtils.clamp)(w, Math.max(minW, 1), maxW);
+    h = (0, _calculateUtils.clamp)(h, minH, maxH);
     handler.call(this, i, w, h, {
       e,
       node,
@@ -593,22 +502,6 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
       handle
     });
   }
-
-  /**
-   * Helper functions to constrain dimensions of a GridItem
-   */
-  constrainWidth(left /*: number*/, currentWidth /*: number*/, newWidth /*: number*/) /*: number*/{
-    return left + newWidth > this.props.containerWidth ? currentWidth : newWidth;
-  }
-  constrainHeight(top /*: number*/, currentHeight /*: number*/, newHeight /*: number*/) /*: number*/{
-    return top <= 0 ? currentHeight : newHeight;
-  }
-  constrainLeft(left /*: number*/) /*: number*/{
-    return Math.max(0, left);
-  }
-  constrainTop(top /*: number*/) /*: number*/{
-    return Math.max(0, top);
-  }
   render() /*: ReactNode*/{
     const {
       x,

package/build/ReactGridLayout.js

@@ -230,59 +230,62 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
         preventCollision,
         allowOverlap
       } = 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) {
           const collisions = (0, _utils.getAllCollisions)(layout, {
             ...l,
             w,
-            h
+            h,
+            x,
+            y
           }).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 => {
-              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;
       });
 
       // Shouldn't ever happen, but typechecking makes it necessary
       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;
       }
 
       // Create placeholder element (display only)

package/build/ReactGridLayoutPropTypes.js

@@ -17,21 +17,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   EventCallback,
   CompactType,
   Layout,
-  LayoutItem
+  LayoutItem,
+  ResizeHandleAxis
 } from "./utils";*/
 /*:: export type ReactRef<T: HTMLElement> = {|
   +current: T | null
 |};*/
 // util
-/*:: export type ResizeHandleAxis =
-  | "s"
-  | "w"
-  | "e"
-  | "n"
-  | "sw"
-  | "nw"
-  | "se"
-  | "ne";*/
 /*:: export type ResizeHandle =
   | ReactElement<any>
   | ((

package/build/utils.js

@@ -23,6 +23,7 @@ exports.moveElement = moveElement;
 exports.moveElementAwayFromCollision = moveElementAwayFromCollision;
 exports.noop = void 0;
 exports.perc = perc;
+exports.resizeItemInDirection = resizeItemInDirection;
 exports.setTopLeft = setTopLeft;
 exports.setTransform = setTransform;
 exports.sortLayoutItems = sortLayoutItems;
@@ -38,6 +39,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   ChildrenArray as ReactChildrenArray,
   Element as ReactElement
 } from "react";*/
+/*:: export type ResizeHandleAxis =
+  | "s"
+  | "w"
+  | "e"
+  | "n"
+  | "sw"
+  | "nw"
+  | "se"
+  | "ne";*/
 /*:: export type LayoutItem = {
   w: number,
   h: number,
@@ -52,7 +62,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   static?: boolean,
   isDraggable?: ?boolean,
   isResizable?: ?boolean,
-  resizeHandles?: Array<"s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne">,
+  resizeHandles?: Array<ResizeHandleAxis>,
   isBounded?: ?boolean
 };*/
 /*:: export type Layout = $ReadOnlyArray<LayoutItem>;*/
@@ -543,13 +553,116 @@ function moveElementAwayFromCollision(layout /*: Layout*/, collidesWith /*: Layo
 function perc(num /*: number*/) /*: string*/{
   return num * 100 + "%";
 }
-function setTransform(_ref /*:: */) /*: Object*/{
+
+/**
+ * Helper functions to constrain dimensions of a GridItem
+ */
+const constrainWidth = (left /*: number*/, currentWidth /*: number*/, newWidth /*: number*/, containerWidth /*: number*/) => {
+  return left + newWidth > containerWidth ? currentWidth : newWidth;
+};
+const constrainHeight = (top /*: number*/, currentHeight /*: number*/, newHeight /*: number*/) => {
+  return top < 0 ? currentHeight : newHeight;
+};
+const constrainLeft = (left /*: number*/) => Math.max(0, left);
+const constrainTop = (top /*: number*/) => Math.max(0, top);
+const resizeNorth = (currentSize, _ref, _containerWidth) => {
+  let {
+    left,
+    height,
+    width
+  } = _ref;
+  const top = currentSize.top - (height - currentSize.height);
+  return {
+    left,
+    width,
+    height: constrainHeight(top, currentSize.height, height),
+    top: constrainTop(top)
+  };
+};
+const resizeEast = (currentSize, _ref2, containerWidth) => {
+  let {
+    top,
+    left,
+    height,
+    width
+  } = _ref2;
+  return {
+    top,
+    height,
+    width: constrainWidth(currentSize.left, currentSize.width, width, containerWidth),
+    left: constrainLeft(left)
+  };
+};
+const resizeWest = (currentSize, _ref3, containerWidth) => {
+  let {
+    top,
+    height,
+    width
+  } = _ref3;
+  const left = currentSize.left - (width - currentSize.width);
+  return {
+    height,
+    width: left < 0 ? currentSize.width : constrainWidth(currentSize.left, currentSize.width, width, containerWidth),
+    top: constrainTop(top),
+    left: constrainLeft(left)
+  };
+};
+const resizeSouth = (currentSize, _ref4, containerWidth) => {
+  let {
+    top,
+    left,
+    height,
+    width
+  } = _ref4;
+  return {
+    width,
+    left,
+    height: constrainHeight(top, currentSize.height, height),
+    top: constrainTop(top)
+  };
+};
+const resizeNorthEast = function () {
+  return resizeNorth(arguments.length <= 0 ? undefined : arguments[0], resizeEast(...arguments), arguments.length <= 2 ? undefined : arguments[2]);
+};
+const resizeNorthWest = function () {
+  return resizeNorth(arguments.length <= 0 ? undefined : arguments[0], resizeWest(...arguments), arguments.length <= 2 ? undefined : arguments[2]);
+};
+const resizeSouthEast = function () {
+  return resizeSouth(arguments.length <= 0 ? undefined : arguments[0], resizeEast(...arguments), arguments.length <= 2 ? undefined : arguments[2]);
+};
+const resizeSouthWest = function () {
+  return resizeSouth(arguments.length <= 0 ? undefined : arguments[0], resizeWest(...arguments), arguments.length <= 2 ? undefined : arguments[2]);
+};
+const ordinalResizeHandlerMap = {
+  n: resizeNorth,
+  ne: resizeNorthEast,
+  e: resizeEast,
+  se: resizeSouthEast,
+  s: resizeSouth,
+  sw: resizeSouthWest,
+  w: resizeWest,
+  nw: resizeNorthWest
+};
+
+/**
+ * Helper for clamping width and position when resizing an item.
+ */
+function resizeItemInDirection(direction /*: ResizeHandleAxis*/, currentSize /*: Position*/, newSize /*: Position*/, containerWidth /*: number*/) /*: Position*/{
+  const ordinalHandler = ordinalResizeHandlerMap[direction];
+  // Shouldn't be possible given types; that said, don't fail hard
+  if (!ordinalHandler) return newSize;
+  return ordinalHandler(currentSize, {
+    ...currentSize,
+    ...newSize
+  }, containerWidth);
+}
+function setTransform(_ref5 /*:: */) /*: Object*/{
   let {
     top,
     left,
     width,
     height
-  } /*: Position*/ = _ref /*: Position*/;
+  } /*: Position*/ = _ref5 /*: Position*/;
   // Replace unitless items with px
   const translate = "translate(".concat(left, "px,").concat(top, "px)");
   return {
@@ -563,13 +676,13 @@ function setTransform(_ref /*:: */) /*: Object*/{
     position: "absolute"
   };
 }
-function setTopLeft(_ref2 /*:: */) /*: Object*/{
+function setTopLeft(_ref6 /*:: */) /*: Object*/{
   let {
     top,
     left,
     width,
     height
-  } /*: Position*/ = _ref2 /*: Position*/;
+  } /*: Position*/ = _ref6 /*: Position*/;
   return {
     top: "".concat(top, "px"),
     left: "".concat(left, "px"),