Skip to content

Commit 5a42d09

Browse files
adumesnyadumesny
committed
collision: load after init() fix
* fix #1693 * broke in 4.x. load() now correctly works again (batch mode saving initial values multiple times) * added unit test and demo as well, so this shouldn't happen again.
1 parent ed7e0cb commit 5a42d09

File tree

6 files changed

+103
-12
lines changed

6 files changed

+103
-12
lines changed

‎doc/CHANGES.md

Lines changed: 6 additions & 1 deletion
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+
- [4.0.2-dev](#402-dev)
89
- [4.0.2 (2021-3-27)](#402-2021-3-27)
910
- [4.0.1 (2021-3-20)](#401-2021-3-20)
1011
- [4.0.0 (2021-3-19)](#400-2021-3-19)
@@ -50,9 +51,13 @@ Change log
5051
- [v0.1.0 (2014-11-18)](#v010-2014-11-18)
5152

5253
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
54+
## 4.0.2-dev
55+
56+
- fix [#1693](https://github.com/gridstack/gridstack.js/issues/1693) `load` after `init()` broken in 4.x
57+
5358
## 4.0.2 (2021-3-27)
5459

55-
- fix [#1679](https://github.com/gridstack/gridstack.js/issues/1679) `Resizable: {handles:'w/sw'}` work again in 4.x
60+
- fix [#1679](https://github.com/gridstack/gridstack.js/issues/1679) `Resizable: {handles:'w/sw'}` broken in 4.x
5661
- fix [#1658](https://github.com/gridstack/gridstack.js/issues/1658) `enableMove(T/F)` not working correctly
5762
- fix `helper: myFunction` now working for H5 case for `dragInOptions` & `setupDragIn()`
5863
- fix prevent `addGrid()` from creating nested div grid if container already is a '.grid-stack' div

‎spec/e2e/html/1693_load_after.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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>load after init</title>
8+
9+
<link rel="stylesheet" href="../../../demo/demo.css"/>
10+
<script src="../../../dist/gridstack-h5.js"></script>
11+
12+
</head>
13+
<body>
14+
<div class="container-fluid">
15+
<h1>load after init</h1>
16+
<div class="grid-stack">
17+
<div class="grid-stack-item" gs-id="id1">
18+
<div class="grid-stack-item-content">
19+
widget 1
20+
</div>
21+
</div>
22+
<div class="grid-stack-item" gs-id="id2" >
23+
<div class="grid-stack-item-content">
24+
widget 2
25+
</div>
26+
</div>
27+
</div> </div>
28+
<script src="../../../demo/events.js"></script>
29+
<script type="text/javascript">
30+
var data = [{id: "id1",x:0,y:0,w:2,h:1}, {id: "id2",x:3,y:0,w:3,h:2} ];
31+
var grid = GridStack.init();
32+
grid.load(data);
33+
</script>
34+
</body>
35+
</html>

‎spec/gridstack-spec.ts

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1770,6 +1770,55 @@ describe('gridstack', function() {
17701770
});
17711771
});
17721772

1773+
describe('load', function() {
1774+
beforeEach(function() {
1775+
document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
1776+
});
1777+
afterEach(function() {
1778+
document.body.removeChild(document.getElementById('gs-cont'));
1779+
});
1780+
it('after init #1693', function() {
1781+
let grid = GridStack.init();
1782+
grid.load([{id:'gsItem1',x:0,y:0,w:5,h:1},{id:'gsItem2',x:6,y:0,w:2,h:2}]);
1783+
1784+
let el1 = document.getElementById('item1')
1785+
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
1786+
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
1787+
expect(parseInt(el1.getAttribute('gs-w'))).toBe(5);
1788+
expect(parseInt(el1.getAttribute('gs-h'))).toBe(1);
1789+
1790+
let el2 = document.getElementById('item2')
1791+
expect(parseInt(el2.getAttribute('gs-x'))).toBe(6);
1792+
expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
1793+
expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
1794+
expect(parseInt(el2.getAttribute('gs-h'))).toBe(2);
1795+
});
1796+
it('after init replace nodes', function() {
1797+
let grid = GridStack.init();
1798+
expect(document.getElementById('item1')).not.toBe(null);
1799+
expect(document.getElementById('item2')).not.toBe(null);
1800+
1801+
// this will replace with 2 new nodes
1802+
grid.load([{id:'new1',x:0,y:0,w:5,h:1},{id:'new2',x:6,y:0,w:2,h:2}]);
1803+
expect(grid.engine.nodes.length).toBe(2);
1804+
1805+
expect(document.getElementById('item1')).toBe(null);
1806+
let el1 = grid.engine.nodes.find(n => n.id === 'new1').el;
1807+
expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
1808+
expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
1809+
expect(parseInt(el1.getAttribute('gs-w'))).toBe(5);
1810+
expect(parseInt(el1.getAttribute('gs-h'))).toBe(1);
1811+
1812+
expect(document.getElementById('item2')).toBe(null);
1813+
let el2 = grid.engine.nodes.find(n => n.id === 'new2').el;
1814+
expect(parseInt(el2.getAttribute('gs-x'))).toBe(6);
1815+
expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
1816+
expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
1817+
expect(parseInt(el2.getAttribute('gs-h'))).toBe(2);
1818+
});
1819+
1820+
});
1821+
17731822
// ..and finally track log warnings at the end, instead of displaying them....
17741823
describe('obsolete warnings', function() {
17751824
console.warn = jasmine.createSpy('log'); // track warnings instead of displaying them

‎src/gridstack-dd.ts

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ GridStack.prototype._setupAcceptWidget = function(): GridStack {
193193
// restore some internal fields we need after clearing them all
194194
node._initDD =
195195
node._isExternal = // DOM needs to be re-parented on a drop
196-
node._temporaryRemoved = true;
196+
node._temporaryRemoved = true; // so it can be insert onDrag below
197197
} else {
198198
node.w = w; node.h = h;
199199
node._temporaryRemoved = true; // so we can insert it
@@ -326,6 +326,15 @@ GridStack.prototype._setupRemoveDrop = function(): GridStack {
326326
* is dynamically create and needs to change later.
327327
**/
328328
GridStack.setupDragIn = function(_dragIn?: string, _dragInOptions?: DDDragInOpt) {
329+
let dragIn: string;
330+
let dragInOptions: DDDragInOpt;
331+
const dragInDefaultOptions: DDDragInOpt = {
332+
revert: 'invalid',
333+
handle: '.grid-stack-item-content',
334+
scroll: false,
335+
appendTo: 'body'
336+
};
337+
329338
// cache in the passed in values (form grid init?) so they don't have to resend them each time
330339
if (_dragIn) {
331340
dragIn = _dragIn;
@@ -337,14 +346,6 @@ GridStack.setupDragIn = function(_dragIn?: string, _dragInOptions?: DDDragInOpt)
337346
if (!dd.isDraggable(el)) dd.dragIn(el, dragInOptions);
338347
});
339348
}
340-
let dragIn: string;
341-
let dragInOptions: DDDragInOpt;
342-
const dragInDefaultOptions: DDDragInOpt = {
343-
revert: 'invalid',
344-
handle: '.grid-stack-item-content',
345-
scroll: false,
346-
appendTo: 'body'
347-
};
348349

349350
/** @internal prepares the element for drag&drop **/
350351
GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): GridStack {

‎src/gridstack-ddi.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export class GridStackDDI {
2424
}
2525

2626
/** removes any drag&drop present (called during destroy) */
27-
public remove(el: GridItemHTMLElement): GridStackDDI {
27+
public remove(_el: GridItemHTMLElement): GridStackDDI {
2828
return this; // no-op for static grids
2929
}
3030
}

‎src/gridstack-engine.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export class GridStackEngine {
5656
this.batchMode = true;
5757
this._prevFloat = this._float;
5858
this._float = true; // let things go anywhere for now... commit() will restore and possibly reposition
59+
this.saveInitial(); // since begin update (which is called multiple times) won't do this
5960
return this;
6061
}
6162

@@ -658,7 +659,7 @@ export class GridStackEngine {
658659
if (!node._updating) {
659660
node._updating = true;
660661
delete node._skipDown;
661-
this.saveInitial();
662+
if (!this.batchMode) this.saveInitial();
662663
}
663664
return this;
664665
}

0 commit comments

Comments
 (0)