Skip to content

Commit 8c1c5ef

Browse files
adumesnyadumesny
committed
load() with collision fix
* make sure load() behaves the same as update() when dealing with collision. the issue was in batch mode we may no do collision in reverse order (to push items at the end first). * added unit test for it, and html test
1 parent 8e75b5c commit 8c1c5ef

File tree

4 files changed

+133
-2
lines changed

4 files changed

+133
-2
lines changed

‎doc/CHANGES.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Change log
55
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
66
**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*
77

8+
- [7.2.3-dev (TBD)](#723-dev-tbd)
89
- [7.2.3 (2023-02-02)](#723-2023-02-02)
910
- [7.2.2 (2023-01-16)](#722-2023-01-16)
1011
- [7.2.1 (2023-01-14)](#721-2023-01-14)
@@ -81,6 +82,9 @@ Change log
8182

8283
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
8384

85+
## 7.2.3-dev (TBD)
86+
* fix [#2206](https://github.com/gridstack/gridstack.js/issues/2206) `load()` with collision fix
87+
8488
## 7.2.3 (2023-02-02)
8589
* fix `addWidget()` to handle passing just {el} which was needed for Angular HMTL template demo
8690
* add `opts.draggable.scroll` back to disable scrolling. Thank you [@VincentMolinie](https://github.com/VincentMolinie)

‎spec/e2e/html/2206_load_collision.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Float grid demo</title>
8+
9+
<link rel="stylesheet" href="../../../demo/demo.css"/>
10+
<script src="../../../dist/gridstack-all.js"></script>
11+
12+
</head>
13+
<body>
14+
<div class="container-fluid">
15+
<h1>2208 layout</h1>
16+
<div>
17+
<a class="btn btn-primary" onClick="update()" href="#">Update 0</a>
18+
<a class="btn btn-primary" onClick="load()" href="#">load 0</a>
19+
<a class="btn btn-primary" onClick="loadFull()" href="#">load full 0</a>
20+
</div>
21+
<br><br>
22+
<div class="grid-stack"></div>
23+
</div>
24+
<script src="../../../demo/events.js"></script>
25+
<script type="text/javascript">
26+
let items = [
27+
{id: '0', x: 0, y: 0, w: 12, content: '0'},
28+
{id: '1', x: 0, y: 1, w: 12, content: '1'},
29+
{id: '2', x: 0, y: 2, w: 12, content: '2'},
30+
{id: '3', x: 0, y: 3, w: 12, content: '3'},
31+
];
32+
33+
let grid = GridStack.init({
34+
cellHeight: 70,
35+
children: items,
36+
});
37+
addEvents(grid);
38+
39+
// this is much better way, but testing original #2206 bug below too
40+
update = function() {
41+
const n = grid.engine.nodes[0];
42+
grid.update(n.el, {h: n.h === 5 ? 1 : 5});
43+
}
44+
45+
load = function() {
46+
items[0].h = items[0].h === 5 ? 1 : 5
47+
grid.load(items);
48+
}
49+
50+
loadFull = function() {
51+
grid.load(grid.engine.nodes.map((n, index) => {
52+
if (index === 0) return {...n, h: n.h === 5 ? 1 : 5}
53+
return n;
54+
}));
55+
}
56+
57+
</script>
58+
</body>
59+
</html>

‎spec/gridstack-spec.ts

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { GridStack, GridStackNode, DDGridStack } from '../src/gridstack';
1+
import { GridStack, GridStackNode, GridStackWidget } from '../src/gridstack';
22
import { Utils } from '../src/utils';
33
import '../dist/gridstack.css';
44

@@ -1839,7 +1839,75 @@ describe('gridstack', function() {
18391839
expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
18401840
expect(parseInt(el2.getAttribute('gs-h'))).toBe(2);
18411841
});
1842+
});
18421843

1844+
describe('load empty', function() {
1845+
let items: GridStackWidget[] = [
1846+
{id: '0', x: 0, y: 0},
1847+
{id: '1', x: 0, y: 1},
1848+
{id: '2', x: 0, y: 2},
1849+
{id: '3', x: 0, y: 3},
1850+
];
1851+
let grid: GridStack;
1852+
const test = () => {
1853+
items.forEach(i => {
1854+
const n = grid.engine.nodes.find(n => n.id === i.id);
1855+
expect(parseInt(n.el.getAttribute('gs-y'))).toBe(i.y);
1856+
});
1857+
}
1858+
beforeEach(function() {
1859+
document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);
1860+
});
1861+
afterEach(function() {
1862+
document.body.removeChild(document.getElementById('gs-cont'));
1863+
});
1864+
it('update collision', function() {
1865+
grid = GridStack.init({children: items});
1866+
const n = grid.engine.nodes[0];
1867+
test();
1868+
1869+
grid.update(n.el!, {h:5});
1870+
items[1].y = 5; items[2].y = 6; items[3].y = 7;
1871+
test();
1872+
1873+
grid.update(n.el!, {h:1});
1874+
items[1].y = 1; items[2].y = 2; items[3].y = 3;
1875+
test();
1876+
});
1877+
it('load collision 2208', function() {
1878+
grid = GridStack.init({children: items});
1879+
test();
1880+
1881+
items[0].h = 5;
1882+
grid.load(items);
1883+
items[1].y = 5; items[2].y = 6; items[3].y = 7;
1884+
test();
1885+
1886+
items[0].h = 1;
1887+
grid.load(items);
1888+
items[1].y = 1; items[2].y = 2; items[3].y = 3;
1889+
test();
1890+
});
1891+
it('load full collision 2208', function() {
1892+
grid = GridStack.init({children: items});
1893+
test();
1894+
1895+
items[0].h = 5;
1896+
grid.load(grid.engine.nodes.map((n, index) => {
1897+
if (index === 0) return {...n, h: 5}
1898+
return n;
1899+
}));
1900+
items[1].y = 5; items[2].y = 6; items[3].y = 7;
1901+
test();
1902+
1903+
items[0].h = 1;
1904+
grid.load(grid.engine.nodes.map((n, index) => {
1905+
if (index === 0) return {...n, h: 1}
1906+
return n;
1907+
}));
1908+
items[1].y = 1; items[2].y = 2; items[3].y = 3;
1909+
test();
1910+
});
18431911
});
18441912

18451913
// ..and finally track log warnings at the end, instead of displaying them....

‎src/gridstack-engine.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export class GridStackEngine {
7171

7272
// use entire row for hitting area (will use bottom reverse sorted first) if we not actively moving DOWN and didn't already skip
7373
protected _useEntireRowArea(node: GridStackNode, nn: GridStackPosition): boolean {
74-
return !this.float && !this._hasLocked && (!node._moving || node._skipDown || nn.y <= node.y);
74+
return (!this.float || this.batchMode && !this._prevFloat) && !this._hasLocked && (!node._moving || node._skipDown || nn.y <= node.y);
7575
}
7676

7777
/** @internal fix collision on given 'node', going to given new location 'nn', with optional 'collide' node already found.

0 commit comments

Comments
 (0)