Skip to content

Commit fcf8401

Browse files
adumesnyadumesny
authored
Merge pull request #2408 from adumesny/master
#2406 inf loop fix adding autoPosition in 1->2 column
2 parents 906f062 + aa585d4 commit fcf8401

File tree

4 files changed

+66
-11
lines changed

4 files changed

+66
-11
lines changed

‎doc/CHANGES.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ Change log
9595

9696
## 8.4.0-dev (TBD)
9797
- feat [#404](https://github.com/gridstack/gridstack.js/issues/404) added `GridStackOptions.fitToContent` and `GridStackWidget.fitToContent` to make gridItems size themselves to their content (no scroll bar), calling `GridStack.resizeToContent(el)` whenever the grid or item is resized.
98+
- fix [#2406](https://github.com/gridstack/gridstack.js/issues/2406) inf loop when autoPosition after loading into 1 column, then 2.
9899

99100
## 8.4.0 (2023-07-20)
100101
* feat [#2378](https://github.com/gridstack/gridstack.js/pull/2378) attribute `DDRemoveOpt.decline` to deny the removal of a specific class.

‎spec/e2e/html/2406_inf_loop_autoPosition_column1.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<title>Float grid demo</title>
9+
10+
<link rel="stylesheet" href="../../../demo/demo.css" />
11+
<link rel="stylesheet" href="../../../dist/gridstack-extra.css" />
12+
<script src="../../../dist/gridstack-all.js"></script>
13+
14+
</head>
15+
16+
<body>
17+
<h1>1 column, autoPosition bug</h1>
18+
<p>add a widget, switch to 2 column, add another widget</p>
19+
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div>
20+
<div><a class="btn btn-default" onClick="resizeColumns()" href="#">Resize Columns</a></div>
21+
<br />
22+
<div class="grid-stack"></div>
23+
<script src="events.js"></script>
24+
<script type="text/javascript">
25+
var options = {
26+
float: false,
27+
column: 1,
28+
cellHeight: 100
29+
};
30+
var grid = GridStack.init(options);
31+
var count = 0;
32+
33+
addNewWidget = function () {
34+
var node = {
35+
autoPosition: true,
36+
x: Math.round(12 * Math.random()),
37+
y: Math.round(5 * Math.random()),
38+
w: Math.round(1 + 3 * Math.random()),
39+
h: Math.round(1 + 3 * Math.random()),
40+
content: String(count++),
41+
};
42+
grid.addWidget(node);
43+
};
44+
45+
resizeColumns = function () {
46+
grid.column(2);
47+
}
48+
</script>
49+
</body>
50+
51+
</html>

‎src/gridstack-engine.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -844,11 +844,12 @@ export class GridStackEngine {
844844
let n = nodes.find(n => n._id === cacheNode._id);
845845
if (n) {
846846
// still current, use cache info positions
847-
if (!doCompact) {
848-
n.x = cacheNode.x;
849-
n.y = cacheNode.y;
847+
if (!doCompact && !cacheNode.autoPosition) {
848+
n.x = cacheNode.x ?? n.x;
849+
n.y = cacheNode.y ?? n.y;
850850
}
851-
n.w = cacheNode.w;
851+
n.w = cacheNode.w ?? n.w;
852+
if (cacheNode.x == undefined || cacheNode.y === undefined) n.autoPosition = true;
852853
}
853854
});
854855
}
@@ -857,19 +858,20 @@ export class GridStackEngine {
857858
cacheNodes.forEach(cacheNode => {
858859
let j = nodes.findIndex(n => n._id === cacheNode._id);
859860
if (j !== -1) {
861+
const n = nodes[j];
860862
// still current, use cache info positions
861863
if (doCompact) {
862-
nodes[j].w = cacheNode.w; // only w is used, and don't trim the list
864+
n.w = cacheNode.w; // only w is used, and don't trim the list
863865
return;
864866
}
865867
if (cacheNode.autoPosition || isNaN(cacheNode.x) || isNaN(cacheNode.y)) {
866868
this.findEmptyPosition(cacheNode, newNodes);
867869
}
868870
if (!cacheNode.autoPosition) {
869-
nodes[j].x = cacheNode.x;
870-
nodes[j].y = cacheNode.y;
871-
nodes[j].w = cacheNode.w;
872-
newNodes.push(nodes[j]);
871+
n.x = cacheNode.x ?? n.x;
872+
n.y = cacheNode.y ?? n.y;
873+
n.w = cacheNode.w ?? n.w;
874+
newNodes.push(n);
873875
}
874876
nodes.splice(j, 1);
875877
}

‎src/gridstack.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -833,7 +833,7 @@ export class GridStack {
833833
* Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column
834834
*/
835835
public column(column: number, layout: ColumnOptions = 'moveScale'): GridStack {
836-
if (column < 1 || this.opts.column === column) return this;
836+
if (!column || column < 1 || this.opts.column === column) return this;
837837
let oldColumn = this.getColumn();
838838

839839
// if we go into 1 column mode (which happens if we're sized less than minW unless disableOneColumnMode is on)
@@ -1592,7 +1592,8 @@ export class GridStack {
15921592
}
15931593
} else {
15941594
// else check for 1 column in/out behavior
1595-
let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize;
1595+
let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize ||
1596+
(this.opts.column === 1 && !this._prevColumn);
15961597
if ((this.opts.column === 1) !== oneColumn) {
15971598
// if (this.opts.animate) this.setAnimation(false); // 1 <-> 12 is too radical, turn off animation and we need it for fitToContent
15981599
this.column(oneColumn ? 1 : this._prevColumn);

0 commit comments

Comments
 (0)