Merge pull request gridstack#2209 from adumesny/master

`load()` with collision fix
adumesny · Feb 11, 2023 · c6e00a0 · c6e00a0
2 parents 1357012 + 8c1c5ef
commit c6e00a0
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 2 deletions.
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [7.2.3-dev (TBD)](#723-dev-tbd)
 - [7.2.3 (2023-02-02)](#723-2023-02-02)
 - [7.2.2 (2023-01-16)](#722-2023-01-16)
 - [7.2.1 (2023-01-14)](#721-2023-01-14)
@@ -81,6 +82,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 7.2.3-dev (TBD)
+* fix [#2206](https://github.com/gridstack/gridstack.js/issues/2206) `load()` with collision fix
+
 ## 7.2.3 (2023-02-02)
 * fix `addWidget()` to handle passing just {el} which was needed for Angular HMTL template demo
 * add `opts.draggable.scroll` back to disable scrolling. Thank you [@VincentMolinie](https://github.com/VincentMolinie)

diff --git a/spec/e2e/html/2206_load_collision.html b/spec/e2e/html/2206_load_collision.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Float grid demo</title>
+
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+  <script src="../../../dist/gridstack-all.js"></script>
+
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>2208 layout</h1>
+    <div>
+      <a class="btn btn-primary" onClick="update()" href="#">Update 0</a>
+      <a class="btn btn-primary" onClick="load()" href="#">load 0</a>
+      <a class="btn btn-primary" onClick="loadFull()" href="#">load full 0</a>
+    </div>
+    <br><br>
+    <div class="grid-stack"></div>
+  </div>
+  <script src="../../../demo/events.js"></script>
+  <script type="text/javascript">
+    let items = [
+      {id: '0', x: 0, y: 0, w: 12, content: '0'},
+      {id: '1', x: 0, y: 1, w: 12, content: '1'},
+      {id: '2', x: 0, y: 2, w: 12, content: '2'},
+      {id: '3', x: 0, y: 3, w: 12, content: '3'},
+    ];
+
+    let grid = GridStack.init({
+      cellHeight: 70,
+      children: items,
+    });
+    addEvents(grid);
+
+    // this is much better way, but testing original #2206 bug below too
+    update = function() {
+      const n = grid.engine.nodes[0];
+	    grid.update(n.el, {h: n.h === 5 ? 1 : 5});
+    }
+
+    load = function() {
+      items[0].h = items[0].h === 5 ? 1 : 5
+      grid.load(items);
+    }
+
+    loadFull = function() {
+      grid.load(grid.engine.nodes.map((n, index) => {
+        if (index === 0) return {...n, h: n.h === 5 ? 1 : 5}
+        return n;
+      }));
+    }
+
+  </script>
+</body>
+</html>
diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts
@@ -1,4 +1,4 @@
-import { GridStack, GridStackNode, DDGridStack } from '../src/gridstack';
+import { GridStack, GridStackNode, GridStackWidget } from '../src/gridstack';
 import { Utils } from '../src/utils';
 import '../dist/gridstack.css';
 
@@ -1839,7 +1839,75 @@ describe('gridstack', function() {
       expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
       expect(parseInt(el2.getAttribute('gs-h'))).toBe(2);
     });
+  });
 
+  describe('load empty', function() {
+    let items: GridStackWidget[] = [
+      {id: '0', x: 0, y: 0},
+      {id: '1', x: 0, y: 1},
+      {id: '2', x: 0, y: 2},
+      {id: '3', x: 0, y: 3},
+    ];
+    let grid: GridStack;
+    const test = () => {
+      items.forEach(i => {
+        const n = grid.engine.nodes.find(n => n.id === i.id);
+        expect(parseInt(n.el.getAttribute('gs-y'))).toBe(i.y);
+      });
+    }
+    beforeEach(function() {
+      document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);
+    });
+    afterEach(function() {
+      document.body.removeChild(document.getElementById('gs-cont'));
+    });
+    it('update collision', function() {
+      grid = GridStack.init({children: items});
+      const n = grid.engine.nodes[0];
+      test();
+
+      grid.update(n.el!, {h:5});
+      items[1].y = 5; items[2].y = 6; items[3].y = 7;
+      test();
+
+      grid.update(n.el!, {h:1});
+      items[1].y = 1; items[2].y = 2; items[3].y = 3;
+      test();
+    });
+    it('load collision 2208', function() {
+      grid = GridStack.init({children: items});
+      test();
+
+      items[0].h = 5;
+      grid.load(items);
+      items[1].y = 5; items[2].y = 6; items[3].y = 7;
+      test();
+
+      items[0].h = 1;
+      grid.load(items);
+      items[1].y = 1; items[2].y = 2; items[3].y = 3;
+      test();
+    });
+    it('load full collision 2208', function() {
+      grid = GridStack.init({children: items});
+      test();
+
+      items[0].h = 5;
+      grid.load(grid.engine.nodes.map((n, index) => {
+        if (index === 0) return {...n, h: 5}
+        return n;
+      }));
+      items[1].y = 5; items[2].y = 6; items[3].y = 7;
+      test();
+
+      items[0].h = 1;
+      grid.load(grid.engine.nodes.map((n, index) => {
+        if (index === 0) return {...n, h: 1}
+        return n;
+      }));
+      items[1].y = 1; items[2].y = 2; items[3].y = 3;
+      test();
+    });
   });
 
  // ..and finally track log warnings at the end, instead of displaying them....

diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
@@ -71,7 +71,7 @@ export class GridStackEngine {
 
   // use entire row for hitting area (will use bottom reverse sorted first) if we not actively moving DOWN and didn't already skip
   protected _useEntireRowArea(node: GridStackNode, nn: GridStackPosition): boolean {
-    return !this.float && !this._hasLocked && (!node._moving || node._skipDown || nn.y <= node.y);
+    return (!this.float || this.batchMode && !this._prevFloat) && !this._hasLocked && (!node._moving || node._skipDown || nn.y <= node.y);
   }
 
   /** @internal fix collision on given 'node', going to given new location 'nn', with optional 'collide' node already found.