Skip to content

Commit 8500483

Browse files
adumesnyadumesny
authored
call batchUpdate() on init load (#1537)
* fix #1535 * make sure to call batchUpdate() on init load to preserve gs-y values
1 parent 604af16 commit 8500483

File tree

4 files changed

+99
-3
lines changed

4 files changed

+99
-3
lines changed

‎doc/CHANGES.md

Lines changed: 5 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+
- [3.1.2-dev](#312-dev)
89
- [3.1.2 (2020-12-7)](#312-2020-12-7)
910
- [3.1.0 (2020-12-4)](#310-2020-12-4)
1011
- [3.0.0 (2020-11-29)](#300-2020-11-29)
@@ -43,6 +44,10 @@ Change log
4344

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

47+
## 3.1.2-dev
48+
49+
- fix [1535](https://github.com/gridstack/gridstack.js/issues/1535) use batchUpdate() around grid init to make sure gs-y attributes are respected.
50+
4651
## 3.1.2 (2020-12-7)
4752

4853
- fix [1419](https://github.com/gridstack/gridstack.js/issues/1419) dragging into a fixed row grid works better (check if it will fit, else try to append, else won't insert)

‎spec/e2e/html/1017-items-no-x-y-for-autoPosition.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!--
22
grid items have no x,y position, just size. Used to come up with wrong size and overlap. https://github.com/gridstack/gridstack.js/issues/1017
3-
Now, will have element 5 (autoPosition but small x,y), 1,2,4, then 3 (too big to fit)
3+
Now, will have element 5 (position first with small x,y), 1,2,4, then 3 (too big to fit)
44
-->
55
<!DOCTYPE html>
66
<html lang="en">
@@ -35,7 +35,7 @@
3535
<div class="grid-stack-item" gs-w="3" gs-h="1" gs-id="4">
3636
<div class="grid-stack-item-content">item 4</div>
3737
</div>
38-
<div class="grid-stack-item" gs-x="1" gs-y="1" gs-w="1" gs-h="1" gs-id="5" gs-auto-position="false">
38+
<div class="grid-stack-item" gs-x="1" gs-y="1" gs-w="1" gs-h="1" gs-id="5">
3939
<div class="grid-stack-item-content">item 5 first</div>
4040
</div>
4141
</div>

‎spec/e2e/html/1535-out-of-order.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
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>Out of order</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>Out of order demo</h1>
16+
<div class="grid-stack">
17+
<div class="grid-stack-item" gs-x="0" gs-y="2" gs-w="12" gs-h="1">
18+
<div class="grid-stack-item-content">
19+
This should be at position <span class="order-number">2</span>
20+
</div>
21+
</div>
22+
<div class="grid-stack-item" gs-x="0" gs-y="1" gs-w="12" gs-h="1">
23+
<div class="grid-stack-item-content">
24+
This should be at position <span class="order-number">1</span>
25+
</div>
26+
</div>
27+
<div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="12" gs-h="1">
28+
<div class="grid-stack-item-content">
29+
This should be at position <span class="order-number">0</span>
30+
</div>
31+
</div>
32+
<div class="grid-stack-item" gs-x="0" gs-y="4" gs-w="12" gs-h="1">
33+
<div class="grid-stack-item-content">
34+
This should be at position <span class="order-number">4</span>
35+
</div>
36+
</div>
37+
<div class="grid-stack-item" gs-x="0" gs-y="5" gs-w="12" gs-h="1">
38+
<div class="grid-stack-item-content">
39+
This should be at position <span class="order-number">5</span>
40+
</div>
41+
</div>
42+
<div class="grid-stack-item" gs-x="0" gs-y="6" gs-w="12" gs-h="1">
43+
<div class="grid-stack-item-content">
44+
This should be at position <span class="order-number">6</span>
45+
</div>
46+
</div>
47+
<div class="grid-stack-item" gs-x="0" gs-y="7" gs-w="12" gs-h="1">
48+
<div class="grid-stack-item-content">
49+
This should be at position <span class="order-number">7</span>
50+
</div>
51+
</div>
52+
<div class="grid-stack-item" gs-x="0" gs-y="11" gs-w="12" gs-h="1">
53+
<div class="grid-stack-item-content">
54+
This should be at position <span class="order-number">11</span>
55+
</div>
56+
</div>
57+
<div class="grid-stack-item" gs-x="0" gs-y="8" gs-w="12" gs-h="1">
58+
<div class="grid-stack-item-content">
59+
This should be at position <span class="order-number">8</span>
60+
</div>
61+
</div>
62+
<div class="grid-stack-item" gs-x="0" gs-y="9" gs-w="12" gs-h="1">
63+
<div class="grid-stack-item-content">
64+
This should be at position <span class="order-number">9</span>
65+
</div>
66+
</div>
67+
<div class="grid-stack-item" gs-x="0" gs-y="12" gs-w="12" gs-h="1">
68+
<div class="grid-stack-item-content">
69+
This should be at position <span class="order-number">12</span>
70+
</div>
71+
</div>
72+
<div class="grid-stack-item" gs-x="0" gs-y="10" gs-w="12" gs-h="1">
73+
<div class="grid-stack-item-content">
74+
This should be at position <span class="order-number">10</span>
75+
</div>
76+
</div>
77+
<div class="grid-stack-item" gs-x="0" gs-y="3" gs-w="12" gs-h="1">
78+
<div class="grid-stack-item-content">
79+
This should be at position <span class="order-number">3</span>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
<script src="events.js"></script>
85+
<script type="text/javascript">
86+
GridStack.init({cellHeight: 70});
87+
</script>
88+
</body>
89+
</html>

‎src/gridstack.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,7 @@ export class GridStack {
312312
});
313313

314314
if (this.opts.auto) {
315+
this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
315316
let elements: {el: HTMLElement; i: number}[] = [];
316317
this.getGridItems().forEach(el => {
317318
let x = parseInt(el.getAttribute('gs-x'));
@@ -322,7 +323,8 @@ export class GridStack {
322323
i: (Number.isNaN(x) ? 1000 : x) + (Number.isNaN(y) ? 1000 : y) * this.opts.column
323324
});
324325
});
325-
elements.sort(e => e.i).forEach(item => { this._prepareElement(item.el) });
326+
elements.sort(e => e.i).forEach(e => this._prepareElement(e.el));
327+
this.commit();
326328
}
327329
this.engine.saveInitial(); // initial start of items
328330

0 commit comments

Comments
 (0)