Skip to content

Commit aaf4773

Browse files
adumesnyadumesny
committed
better fix: nested grid size issue
* fix #2394] * better fix that makes sure we keep wanted size when an item is dropped on us (so we remember in case we change grid column) * also changed to not save x,y during dropping since the drag behavior will figure where to put it, and that means we don't cache that layout that might not apply to the new grid anyway. * added a running example showing issue.
1 parent 1ff1f42 commit aaf4773

File tree

4 files changed

+71
-9
lines changed

4 files changed

+71
-9
lines changed

‎doc/CHANGES.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ Change log
103103
## 9.2.1-dev (TBD)
104104
* fix - sub-grid styles now look for immediate correct parent, not any depth above.
105105
* fix [#2469](https://github.com/gridstack/gridstack.js/issues/2469) "Invalid height" error CSS minHeight
106+
* fix [#2394](https://github.com/gridstack/gridstack.js/issues/2394) nested grid size issue when sub-items moved up/down
106107

107108
## 9.2.1 (2023-09-20)
108109
* fix _updateContainerHeight() to use height rather than min-height again (apart for nested grids which need it) and partial getComputedStyle CSS minHeight support

‎spec/e2e/html/2394_save_sub_item_moved.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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>#2394 Save sub item moved</title>
8+
9+
<link rel="stylesheet" href="../../../demo/demo.css" />
10+
<link rel="stylesheet" href="../../../dist/gridstack-extra.min.css"/>
11+
<script src="../../../dist/gridstack-all.js"></script>
12+
13+
</head>
14+
<body>
15+
<h1>#2394 Save sub item moved</h1>
16+
<button onClick="print()">Save</button>
17+
<!-- <button onClick="reset()">Reset</button> -->
18+
<button onClick="load()">Load</button>
19+
<br><br>
20+
<div class="grid-stack"></div>
21+
22+
<script type="text/javascript">
23+
let subGridOpts = {
24+
cellHeight: 50,
25+
column: 3,
26+
padding: 5,
27+
minRow: 2, // don't collapse when empty
28+
disableOneColumnMode: true,
29+
acceptWidgets: true,
30+
children: [ {id:0, x:0, y:0, w:3, content:'move to parent grid col=2'}]
31+
};
32+
33+
var options = { // put in gridstack options here
34+
disableOneColumnMode: true, // for jfiddle small window size
35+
cellHeight: 70,
36+
column: 2,
37+
minRow: 3,
38+
acceptWidgets: true,
39+
children: [
40+
{id:1, x:0, y:0, w:2, h:2, content:'3 columns', subGridOpts: subGridOpts },
41+
{id:2, x:0, y:2, w:1, y:1, content:'widget' }
42+
]
43+
};
44+
var grid = GridStack.init(options);
45+
var layout;
46+
47+
print = function() {
48+
layout = grid.save(false, false);
49+
console.log(layout);
50+
}
51+
load = function() {
52+
grid.load(layout);
53+
}
54+
// reset = function() {
55+
// grid.removeAll();
56+
// }
57+
print()
58+
</script>
59+
</body>
60+
</html>

‎src/gridstack-engine.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -392,9 +392,9 @@ export class GridStackEngine {
392392
const saveOrig = (node.x || 0) + (node.w || 1) > this.column;
393393
if (saveOrig && this.column < 12 && !this._inColumnResize && node._id && this.findCacheLayout(node, 12) === -1) {
394394
let copy = {...node}; // need _id + positions
395-
if (copy.autoPosition) { delete copy.x; delete copy.y; }
395+
if (copy.autoPosition || copy.x === undefined) { delete copy.x; delete copy.y; }
396396
else copy.x = Math.min(11, copy.x);
397-
copy.w = Math.min(12, copy.w);
397+
copy.w = Math.min(12, copy.w || 1);
398398
this.cacheOneLayout(copy, 12);
399399
}
400400

@@ -744,9 +744,8 @@ export class GridStackEngine {
744744
this.sortNodes();
745745
this.nodes.forEach(n => {
746746
let wl = layout?.find(l => l._id === n._id);
747-
let w: GridStackNode = {...n};
748-
// use layout info instead if set
749-
if (wl) { w.x = wl.x; w.y = wl.y; w.w = wl.w; }
747+
// use layout info fields instead if set
748+
let w: GridStackNode = {...n, ...(wl || {})};
750749
Utils.removeInternalForSave(w, !saveElement);
751750
if (saveCB) saveCB(n, w);
752751
list.push(w);
@@ -943,7 +942,7 @@ export class GridStackEngine {
943942
public cacheOneLayout(n: GridStackNode, column: number): GridStackEngine {
944943
n._id = n._id ?? GridStackEngine._idSeq++;
945944
let l: GridStackNode = {x: n.x, y: n.y, w: n.w, _id: n._id}
946-
if (n.autoPosition) { delete l.x; delete l.y; l.autoPosition = true; }
945+
if (n.autoPosition || n.x === undefined) { delete l.x; delete l.y; if (n.autoPosition) l.autoPosition = true; }
947946
this._layouts = this._layouts || [];
948947
this._layouts[column] = this._layouts[column] || [];
949948
let index = this.findCacheLayout(n, column);

‎src/gridstack.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2042,12 +2042,14 @@ export class GridStack {
20422042
// console.log('dropover cloning node'); // TEST
20432043
if (!el._gridstackNodeOrig) el._gridstackNodeOrig = node; // shouldn't have multiple nested!
20442044
el.gridstackNode = node = {...node, w, h, grid: this};
2045+
delete node.x;
2046+
delete node.y;
20452047
this.engine.cleanupNode(node)
20462048
.nodeBoundFix(node);
20472049
// restore some internal fields we need after clearing them all
20482050
node._initDD =
2049-
node._isExternal = // DOM needs to be re-parented on a drop
2050-
node._temporaryRemoved = true; // so it can be inserted onDrag below
2051+
node._isExternal = // DOM needs to be re-parented on a drop
2052+
node._temporaryRemoved = true; // so it can be inserted onDrag below
20512053
} else {
20522054
node.w = w; node.h = h;
20532055
node._temporaryRemoved = true; // so we can insert it
@@ -2096,6 +2098,7 @@ export class GridStack {
20962098
delete el._gridstackNodeOrig;
20972099
if (wasAdded && origNode?.grid && origNode.grid !== this) {
20982100
let oGrid = origNode.grid;
2101+
oGrid.engine.removeNodeFromLayoutCache(origNode);
20992102
oGrid.engine.removedNodes.push(origNode);
21002103
oGrid._triggerRemoveEvent()._triggerChangeEvent();
21012104
// if it's an empty sub-grid that got auto-created, nuke it
@@ -2141,7 +2144,6 @@ export class GridStack {
21412144
this._updateContainerHeight();
21422145
this.engine.addedNodes.push(node);// @ts-ignore
21432146
this._triggerAddEvent();// @ts-ignore
2144-
this.engine.removeNodeFromLayoutCache(node);
21452147
this._triggerChangeEvent();
21462148

21472149
this.engine.endUpdate();

0 commit comments

Comments
 (0)