Skip to content

Commit a46fd5d

Browse files
adumesnyadumesny
committed
large layout saving tweaks
* for #2851 make sure to update the value and added some better testing (grid, not engine that behaves differently).
1 parent 328a205 commit a46fd5d

File tree

6 files changed

+108
-44
lines changed

6 files changed

+108
-44
lines changed

‎doc/CHANGES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ Change log
119119
## 11.0.1-dev (TBD)
120120
* fix: [#2859](https://github.com/gridstack/gridstack.js/pull/2859) re-enabled tests and fix numerous issues found (see CL). Also thank you [lmartorella](https://github.com/lmartorella) for getting me going and starting it.
121121
* fix: [#2851](https://github.com/gridstack/gridstack.js/pull/2851) added support for custom max layout saving - Thank you [lmartorella](https://github.com/lmartorella)
122+
* fix: [#2492](https://github.com/gridstack/gridstack.js/issues/2492) loading same layout with overlapping widget fix. v10.3.0 regression.
122123

123124
## 11.0.1 (2024-10-21)
124125
* fix: [#2834](https://github.com/gridstack/gridstack.js/pull/2834) v11 angular missing package.json

‎spec/gridstack-engine-spec.ts

Lines changed: 32 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ describe('gridstack engine:', function() {
1414
expect(typeof GridStackEngine).toBe('function');
1515
});
1616

17-
describe('test constructor,', function() {
17+
describe('test constructor >', function() {
1818

1919
it('should be setup properly', function() {
2020
ePriv = e = new GridStackEngine();
@@ -49,7 +49,7 @@ describe('gridstack engine:', function() {
4949
});
5050
});
5151

52-
describe('test prepareNode,', function() {
52+
describe('test prepareNode >', function() {
5353

5454
beforeAll(function() {
5555
ePriv = e = new GridStackEngine();
@@ -72,7 +72,7 @@ describe('gridstack engine:', function() {
7272
});
7373
});
7474

75-
describe('sorting of nodes,', function() {
75+
describe('sorting of nodes >', function() {
7676
beforeAll(function() {
7777
ePriv = e = new GridStackEngine();
7878
e.nodes = [{x: 7, y: 0}, {x: 4, y: 4}, {x: 9, y: 0}, {x: 0, y: 1}];
@@ -102,7 +102,7 @@ describe('gridstack engine:', function() {
102102

103103
});
104104

105-
describe('test isAreaEmpty,', function() {
105+
describe('test isAreaEmpty >', function() {
106106

107107
beforeAll(function() {
108108
ePriv = e = new GridStackEngine({float:true});
@@ -122,7 +122,7 @@ describe('gridstack engine:', function() {
122122
});
123123
});
124124

125-
describe('test cleanNodes/getDirtyNodes,', function() {
125+
describe('test cleanNodes/getDirtyNodes >', function() {
126126

127127
beforeAll(function() {
128128
ePriv = e = new GridStackEngine({float:true});
@@ -156,7 +156,7 @@ describe('gridstack engine:', function() {
156156
});
157157
});
158158

159-
describe('test batchUpdate/commit,', function() {
159+
describe('test batchUpdate/commit >', function() {
160160
beforeAll(function() {
161161
ePriv = e = new GridStackEngine();
162162
});
@@ -184,7 +184,7 @@ describe('gridstack engine:', function() {
184184
});
185185
});
186186

187-
describe('test batchUpdate/commit,', function() {
187+
describe('test batchUpdate/commit >', function() {
188188

189189
beforeAll(function() {
190190
ePriv = e = new GridStackEngine({float:true});
@@ -201,7 +201,7 @@ describe('gridstack engine:', function() {
201201
});
202202
});
203203

204-
describe('test _notify,', function() {
204+
describe('test _notify >', function() {
205205
let spy;
206206

207207
beforeEach(function() {
@@ -235,8 +235,8 @@ describe('gridstack engine:', function() {
235235
});
236236
});
237237

238-
describe('test _packNodes,', function() {
239-
describe('using float:false mode,', function() {
238+
describe('test _packNodes >', function() {
239+
describe('using float:false mode >', function() {
240240
beforeEach(function() {
241241
ePriv = e = new GridStackEngine({float:false});
242242
});
@@ -291,7 +291,7 @@ describe('gridstack engine:', function() {
291291
});
292292
});
293293

294-
describe('test changedPos,', function() {
294+
describe('test changedPos >', function() {
295295
beforeAll(function() {
296296
ePriv = e = new GridStackEngine();
297297
});
@@ -317,7 +317,7 @@ describe('gridstack engine:', function() {
317317
});
318318
});
319319

320-
describe('test locked widget,', function() {
320+
describe('test locked widget >', function() {
321321
beforeAll(function() {
322322
ePriv = e = new GridStackEngine();
323323
});
@@ -352,54 +352,48 @@ describe('gridstack engine:', function() {
352352
});
353353
});
354354

355-
describe('test columnChanged and save,', function() {
355+
describe('test columnChanged >', function() {
356356
beforeAll(function() {
357357
});
358-
it('wont\'t break layouts with 12 columns', function() {
358+
it('12 to 1 and back', function() {
359359
ePriv = e = new GridStackEngine({ column: 12 });
360360
// Add two side-by-side components 6+6 = 12 columns
361-
e.addNode({ x: 0, y: 0, w: 6, h: 1, id: 'left' });
362-
e.addNode({ x: 6, y: 0, w: 6, h: 1, id: 'right' });
363-
e.save().forEach(node => e.nodeBoundFix(findNode(node.id!)!));
364-
expect(findNode('left')).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6, h: 1}));
365-
expect(findNode('right')).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6, h: 1}));
361+
const left = e.addNode({ x: 0, y: 0, w: 6, h: 1, id: 'left' });
362+
const right = e.addNode({ x: 6, y: 0, w: 6, h: 1, id: 'right' });
363+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6, h: 1}));
364+
expect(right).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6, h: 1}));
366365
// Resize to 1 column
367366
e.column = 1;
368367
e.columnChanged(12, 1);
369-
e.save().forEach(node => e.nodeBoundFix(findNode(node.id!)!));
370-
expect(findNode('left')).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1, h: 1}));
371-
expect(findNode('right')).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1, h: 1}));
368+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1, h: 1}));
369+
expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1, h: 1}));
372370
// Resize back to 12 column
373371
e.column = 12;
374372
e.columnChanged(1, 12);
375-
e.save().forEach(node => e.nodeBoundFix(findNode(node.id!)!));
376-
expect(findNode('left')).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6, h: 1}));
377-
expect(findNode('right')).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6, h: 1}));
373+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6, h: 1}));
374+
expect(right).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6, h: 1}));
378375
});
379-
it('wont\'t break layouts with more than 12 columns', function() {
376+
it('24 column to 1 and back', function() {
380377
ePriv = e = new GridStackEngine({ column: 24 });
381378
// Add two side-by-side components 12+12 = 24 columns
382-
e.addNode({ x: 0, y: 0, w: 12, h: 1, id: 'left' });
383-
e.addNode({ x: 12, y: 0, w: 12, h: 1, id: 'right' });
384-
e.save().forEach(node => e.nodeBoundFix(findNode(node.id!)!));
385-
expect(findNode('left')).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12, h: 1}));
386-
expect(findNode('right')).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12, h: 1}));
379+
const left = e.addNode({ x: 0, y: 0, w: 12, h: 1, id: 'left' });
380+
const right = e.addNode({ x: 12, y: 0, w: 12, h: 1, id: 'right' });
381+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12, h: 1}));
382+
expect(right).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12, h: 1}));
387383
// Resize to 1 column
388384
e.column = 1;
389385
e.columnChanged(24, 1);
390-
e.save().forEach(node => e.nodeBoundFix(findNode(node.id!)!));
391-
expect(findNode('left')).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1, h: 1}));
392-
expect(findNode('right')).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1, h: 1}));
386+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1, h: 1}));
387+
expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1, h: 1}));
393388
// Resize back to 24 column
394389
e.column = 24;
395390
e.columnChanged(1, 24);
396-
e.save().forEach(node => e.nodeBoundFix(findNode(node.id!)!));
397-
expect(findNode('left')).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12, h: 1}));
398-
expect(findNode('right')).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12, h: 1}));
391+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12, h: 1}));
392+
expect(right).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12, h: 1}));
399393
});
400394
});
401395

402-
describe('test compact,', function() {
396+
describe('test compact >', function() {
403397
beforeAll(function() {
404398
ePriv = e = new GridStackEngine();
405399
});

‎spec/gridstack-spec.ts

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@ describe('gridstack >', function() {
66

77
let grid: GridStack;
88
let grids: GridStack[];
9+
let find = function(id: string): GridStackNode {
10+
return grid.engine.nodes.find(n => n.id === id)!;
11+
};
912
let findEl = function(id: string): GridItemHTMLElement {
10-
return grid.engine.nodes.find(n => n.id === id)!.el!;
13+
return find(id).el!;
1114
};
1215

1316
// grid has 4x2 and 4x4 top-left aligned - used on most test cases
@@ -429,6 +432,69 @@ describe('gridstack >', function() {
429432
});
430433
});
431434

435+
describe('grid.column larger layout >', function() {
436+
beforeEach(function() {
437+
document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);
438+
});
439+
afterEach(function() {
440+
document.body.removeChild(document.getElementById('gs-cont'));
441+
});
442+
443+
it('24 layout in 12 column to 1 back 12 then 24 >', function() {
444+
const children: GridStackWidget[] = [{ x: 0, y: 0, w: 12, h: 1, id: 'left' }, { x: 12, y: 0, w: 12, h: 1, id: 'right' }];
445+
children.forEach(c => c.content = c.id);
446+
447+
grid = GridStack.init({children});
448+
const left = find('left');
449+
const right = find('right');
450+
451+
// side-by-side components 12+12 = 24 columns but only have 12!
452+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12}));
453+
expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 12}));
454+
// Resize to 1 column
455+
grid.column(1);
456+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1}));
457+
expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1}));
458+
// Resize back to 12 column
459+
grid.column(12);
460+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12}));
461+
expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 12}));
462+
// Resize to 24 column
463+
grid.column(24);
464+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12}));
465+
expect(right).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12}));
466+
});
467+
it('24 column to 12, 1 back 12,24 >', function() {
468+
const children: GridStackWidget[] = [{ x: 0, y: 0, w: 12, h: 1, id: 'left' }, { x: 12, y: 0, w: 12, h: 1, id: 'right' }];
469+
children.forEach(c => c.content = c.id);
470+
471+
grid = GridStack.init({column:24, children});
472+
const left = find('left');
473+
const right = find('right');
474+
475+
// side-by-side components 12+12 = 24 columns
476+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12}));
477+
expect(right).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12}));
478+
// Resize to 12 column
479+
grid.column(12);
480+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6}));
481+
expect(right).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6}));
482+
// Resize to 1 column
483+
grid.column(1);
484+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1}));
485+
expect(right).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1}));
486+
// back to 12 column
487+
grid.column(12);
488+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6}));
489+
expect(right).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6}));
490+
// back to 24 column
491+
grid.column(24);
492+
expect(left).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12}));
493+
expect(right).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12}));
494+
});
495+
496+
});
497+
432498
// describe('oneColumnModeDomSort >', function() {
433499
// beforeEach(function() {
434500
// document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);

‎spec/test.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,21 @@ <h1>Grid Spec test</h1>
1313
<a class="btn btn-primary" onClick="step1()" href="#">step1</a>
1414
<a class="btn btn-primary" onClick="step2()" href="#">step2</a>
1515
<div class="grid-stack">
16-
<div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="4" gs-h="2" gs-id="gsItem1" id="item1">
16+
<!-- <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="4" gs-h="2" gs-id="gsItem1" id="item1">
1717
<div class="grid-stack-item-content">item 1 text</div>
1818
</div>
1919
<div class="grid-stack-item" gs-x="4" gs-y="0" gs-w="4" gs-h="4" gs-id="gsItem2" id="item2">
2020
<div class="grid-stack-item-content">item 2 text</div>
21-
</div>
22-
</div>
21+
</div> -->
22+
</div>
2323
<script type="text/javascript">
2424
// test for spec file debugging
25-
let grid = GridStack.init({float: true, cellHeight:50, margin:5});
25+
let items = [{ x:0, y:0, w:12, h:1, id:'left', content:'left' }, { x:12, y:0, w:12, h:1, id:'right', content:'right' }];
26+
27+
let grid = GridStack.init({cellHeight:50, margin:5, children:items});
2628

2729
step1 = function() {
2830
grid.column(1);
29-
grid.addWidget({content:'new'});
3031
}
3132
step2 = function() {
3233
grid.column(12);

‎src/gridstack-engine.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export class GridStackEngine {
5151

5252
public constructor(opts: GridStackEngineOptions = {}) {
5353
this.column = opts.column || this.defaultColumn;
54+
if (this.column > this.defaultColumn) this.defaultColumn = this.column;
5455
this.maxRow = opts.maxRow;
5556
this._float = opts.float;
5657
this.nodes = opts.nodes || [];

‎src/gridstack.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -691,6 +691,7 @@ export class GridStack {
691691
// the original wanted layout so we can scale back up correctly #1471
692692
let maxColumn = 0;
693693
items.forEach(n => { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w) });
694+
if (maxColumn > this.engine.defaultColumn) this.engine.defaultColumn = maxColumn;
694695
if (maxColumn > column) {
695696
this._ignoreLayoutsNodeChange = true; // skip layout update
696697
this.engine.cacheLayout(items, maxColumn, true);

0 commit comments

Comments
 (0)