Skip to content

Commit c6e00a0

Browse files
author
Alain Dumesny
authored
Merge pull request #2209 from adumesny/master
`load()` with collision fix
2 parents 1357012 + 8c1c5ef commit c6e00a0

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)