react-grid-layout 1.2.1 → 1.2.2

package/lib/ReactGridLayout.jsx

@@ -9,13 +9,14 @@ import {
   childrenEqual,
   cloneLayoutItem,
   compact,
+  compactType,
+  fastRGLPropsEqual,
+  getAllCollisions,
   getLayoutItem,
   moveElement,
-  synchronizeLayoutWithChildren,
-  getAllCollisions,
-  compactType,
   noop,
-  fastRGLPropsEqual
+  synchronizeLayoutWithChildren,
+  withLayoutItem
 } from "./utils";
 
 import { calcXY } from "./calculateUtils";
@@ -255,7 +256,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     { e, node }: GridDragEvent
   ): void {
     const { layout } = this.state;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
     if (!l) return;
 
     this.setState({
@@ -278,11 +279,11 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     const { oldDragItem } = this.state;
     let { layout } = this.state;
     const { cols } = this.props;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
     if (!l) return;
 
     // Create placeholder (display only)
-    var placeholder = {
+    const placeholder = {
       w: l.w,
       h: l.h,
       x: l.x,
@@ -372,7 +373,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
 
   onResizeStart(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
     const { layout } = this.state;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
     if (!l) return;
 
     this.setState({
@@ -386,44 +387,46 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   onResize(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
     const { layout, oldResizeItem } = this.state;
     const { cols, preventCollision } = this.props;
-    const originalLayoutItem: ?LayoutItem = getLayoutItem(layout, i);
-    if (!originalLayoutItem) return;
-
-    // We're going to modify this object now, so clone it first.
-    const l = cloneLayoutItem(originalLayoutItem);
-
-    // Something like quad tree should be used
-    // to find collisions faster
-    let hasCollisions;
-    if (preventCollision) {
-      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 => {
-          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;
+
+    const [newLayout, l] = withLayoutItem(layout, i, l => {
+      // Something like quad tree should be used
+      // to find collisions faster
+      let hasCollisions;
+      if (preventCollision) {
+        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 => {
+            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;
+        }
       }
-    }
 
-    if (!hasCollisions) {
-      // Set new width and height.
-      l.w = w;
-      l.h = h;
-    }
+      if (!hasCollisions) {
+        // Set new width and height.
+        l.w = w;
+        l.h = h;
+      }
+
+      return l;
+    });
+
+    // Shouldn't ever happen, but typechecking makes it necessary
+    if (!l) return;
 
     // Create placeholder element (display only)
-    var placeholder = {
+    const placeholder = {
       w: l.w,
       h: l.h,
       x: l.x,
@@ -432,11 +435,11 @@ export default class ReactGridLayout extends React.Component<Props, State> {
       i: i
     };
 
-    this.props.onResize(layout, oldResizeItem, l, placeholder, e, node);
+    this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node);
 
-    // Re-compact the layout and set the drag placeholder.
+    // Re-compact the newLayout and set the drag placeholder.
     this.setState({
-      layout: compact(layout, compactType(this.props), cols),
+      layout: compact(newLayout, compactType(this.props), cols),
       activeDrag: placeholder
     });
   }
@@ -444,7 +447,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
   onResizeStop(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
     const { layout, oldResizeItem } = this.state;
     const { cols } = this.props;
-    var l = getLayoutItem(layout, i);
+    const l = getLayoutItem(layout, i);
 
     this.props.onResizeStop(layout, oldResizeItem, l, null, e, node);
 

package/lib/utils.js

@@ -102,6 +102,35 @@ export function cloneLayout(layout: Layout): Layout {
   return newLayout;
 }
 
+// Modify a layoutItem inside a layout. Returns a new Layout,
+// does not mutate. Carries over all other LayoutItems unmodified.
+export function modifyLayout(layout: Layout, layoutItem: LayoutItem): Layout {
+  const newLayout = Array(layout.length);
+  for (let i = 0, len = layout.length; i < len; i++) {
+    if (layoutItem.i === layout[i].i) {
+      newLayout[i] = layoutItem;
+    } else {
+      newLayout[i] = layout[i];
+    }
+  }
+  return newLayout;
+}
+
+// Function to be called to modify a layout item.
+// Does defensive clones to ensure the layout is not modified.
+export function withLayoutItem(
+  layout: Layout,
+  itemKey: string,
+  cb: LayoutItem => LayoutItem
+): [Layout, ?LayoutItem] {
+  let item = getLayoutItem(layout, itemKey);
+  if (!item) return [layout, null];
+  item = cb(cloneLayoutItem(item)); // defensive clone then modify
+  // FIXME could do this faster if we already knew the index
+  layout = modifyLayout(layout, item);
+  return [layout, item];
+}
+
 // Fast path to cloning, since this is monomorphic
 export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
   return {
@@ -667,9 +696,11 @@ export function synchronizeLayoutWithChildren(
         if (!isProduction) {
           validateLayout([g], "ReactGridLayout.children");
         }
+        // FIXME clone not really necessary here
         layout[i] = cloneLayoutItem({ ...g, i: child.key });
       } else {
         // Nothing provided: ensure this is added to the bottom
+        // FIXME clone not really necessary here
         layout[i] = cloneLayoutItem({
           w: 1,
           h: 1,

package/package.json

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