Skip to content

Commit cc9043f

Browse files
author
Alain Dumesny
committed
more setColumn() tweaks
* restored `_updateNodeWidths()` which setColumn() calls (split code into GridStackEngine) * added `_layoutsNodesChange(nodes)` - called whenever a node is added or moved to update the cached layouts (clears lower one, update higher ones)
1 parent 30dc3d2 commit cc9043f

File tree

4 files changed

+177
-107
lines changed

4 files changed

+177
-107
lines changed

‎demo/column.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,20 +58,20 @@ <h1>setColumn() grid demo</h1>
5858
];
5959
var count = 0;
6060
grid.batchUpdate();
61-
for (count=0; count<3; count++) {
61+
for (count=0; count<3;) {
6262
var n = items[count];
63-
grid.addWidget($('<div><div class="grid-stack-item-content">' + count + (n.text ? n.text : '') + '</div></div>'), n);
63+
grid.addWidget($('<div><div class="grid-stack-item-content">' + count++ + (n.text ? n.text : '') + '</div></div>'), n);
6464
};
6565
grid.commit();
6666

6767
$('#add-widget').click(function() {
68-
var n = items[count++] || {
68+
var n = items[count] || {
6969
x: Math.round(12 * Math.random()),
7070
y: Math.round(5 * Math.random()),
7171
width: Math.round(1 + 3 * Math.random()),
7272
height: Math.round(1 + 3 * Math.random())
7373
};
74-
grid.addWidget($('<div><div class="grid-stack-item-content">' + count + (n.text ? n.text : '') + '</div></div>'), n);
74+
grid.addWidget($('<div><div class="grid-stack-item-content">' + count++ + (n.text ? n.text : '') + '</div></div>'), n);
7575
});
7676

7777
$('#1column').click(function() { grid.setColumn(1); });

‎demo/float.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,23 +32,24 @@ <h1>Float grid demo</h1>
3232

3333
new function () {
3434
this.items = [
35-
{x: 0, y: 6, width: 2, height: 2},
36-
{x: 3, y: 1, width: 1, height: 2},
37-
{x: 4, y: 2, width: 1, height: 1},
35+
{x: 2, y: 5, width: 1, height: 1},
3836
{x: 2, y: 3, width: 3, height: 1},
39-
{x: 2, y: 5, width: 1, height: 1}
37+
{x: 4, y: 2, width: 1, height: 1},
38+
{x: 3, y: 1, width: 1, height: 2},
39+
{x: 0, y: 6, width: 2, height: 2}
4040
];
41+
var count = 0;
4142

4243
this.grid = $('.grid-stack').data('gridstack');
4344

4445
this.addNewWidget = function() {
45-
var node = this.items.pop() || {
46+
var node = this.items[count] || {
4647
x: Math.round(12 * Math.random()),
4748
y: Math.round(5 * Math.random()),
4849
width: Math.round(1 + 3 * Math.random()),
4950
height: Math.round(1 + 3 * Math.random())
5051
};
51-
this.grid.addWidget($('<div><div class="grid-stack-item-content"></div></div>'), node);
52+
this.grid.addWidget($('<div><div class="grid-stack-item-content">' + count++ + '</div></div>'), node);
5253
return false;
5354
}.bind(this);
5455

‎spec/gridstack-spec.js‎

Lines changed: 94 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -328,84 +328,116 @@ describe('gridstack', function() {
328328
};
329329
$('.grid-stack').gridstack(options);
330330
var grid = $('.grid-stack').data('gridstack');
331-
var node1 = $('#item1').data('_gridstack_node');
332-
var node2 = $('#item2').data('_gridstack_node');
331+
var el1 = $('#item1')
332+
var el2 = $('#item2')
333+
333334
// items start at 4x2 and 4x4
334-
expect(node1.x).toBe(0);
335-
expect(node1.y).toBe(0);
336-
expect(node1.width).toBe(4);
337-
expect(node1.height).toBe(2);
338-
339-
expect(node2.x).toBe(4);
340-
expect(node2.y).toBe(0);
341-
expect(node2.width).toBe(4);
342-
expect(node2.height).toBe(4);
335+
expect(parseInt(el1.attr('data-gs-x'))).toBe(0);
336+
expect(parseInt(el1.attr('data-gs-y'))).toBe(0);
337+
expect(parseInt(el1.attr('data-gs-width'))).toBe(4);
338+
expect(parseInt(el1.attr('data-gs-height'))).toBe(2);
339+
340+
expect(parseInt(el2.attr('data-gs-x'))).toBe(4);
341+
expect(parseInt(el2.attr('data-gs-y'))).toBe(0);
342+
expect(parseInt(el2.attr('data-gs-width'))).toBe(4);
343+
expect(parseInt(el2.attr('data-gs-height'))).toBe(4);
343344

344345
// 1 column will have item1, item2
345346
grid.setColumn(1);
346-
node1 = $('#item1').data('_gridstack_node');
347-
node2 = $('#item2').data('_gridstack_node');
348347
expect(grid.opts.column).toBe(1);
349-
expect(node1.x).toBe(0);
350-
expect(node1.y).toBe(0);
351-
expect(node1.width).toBe(1);
352-
expect(node1.height).toBe(2);
348+
expect(parseInt(el1.attr('data-gs-x'))).toBe(0);
349+
expect(parseInt(el1.attr('data-gs-y'))).toBe(0);
350+
expect(parseInt(el1.attr('data-gs-width'))).toBe(1);
351+
expect(parseInt(el1.attr('data-gs-height'))).toBe(2);
353352

354-
expect(node2.x).toBe(0);
355-
expect(node2.y).toBe(2);
356-
expect(node2.width).toBe(1);
357-
expect(node2.height).toBe(4);
353+
expect(parseInt(el2.attr('data-gs-x'))).toBe(0);
354+
expect(parseInt(el2.attr('data-gs-y'))).toBe(2);
355+
expect(parseInt(el2.attr('data-gs-width'))).toBe(1);
356+
expect(parseInt(el2.attr('data-gs-height'))).toBe(4);
358357

359358
// add default 1x1 item to the end (1 column)
360359
var el3 = grid.addWidget(widgetHTML);
361360
expect(el3).not.toBe(null);
362-
var node3 = $(el3).data('_gridstack_node');
363-
expect(node3.x).toBe(0);
364-
expect(node3.y).toBe(6);
365-
expect(node3.width).toBe(1);
366-
expect(node3.height).toBe(1);
361+
expect(parseInt(el3.attr('data-gs-x'))).toBe(0);
362+
expect(parseInt(el3.attr('data-gs-y'))).toBe(6);
363+
expect(parseInt(el3.attr('data-gs-width'))).toBe(1);
364+
expect(parseInt(el3.attr('data-gs-height'))).toBe(1);
367365

368-
// 2 column will have item1, item2, item3 in 1 column still
369-
grid.setColumn(2);
370-
node1 = $('#item1').data('_gridstack_node');
371-
node2 = $('#item2').data('_gridstack_node');
372-
node3 = $('#item3').data('_gridstack_node');
373-
expect(grid.opts.column).toBe(2);
374-
expect(node1.x).toBe(0);
375-
expect(node1.y).toBe(0);
376-
expect(node1.width).toBe(1);
377-
expect(node1.height).toBe(2);
366+
// back to 12 column and initial layout (other than new item3)
367+
grid.setColumn(12);
368+
expect(grid.opts.column).toBe(12);
369+
expect(parseInt(el1.attr('data-gs-x'))).toBe(0);
370+
expect(parseInt(el1.attr('data-gs-y'))).toBe(0);
371+
expect(parseInt(el1.attr('data-gs-width'))).toBe(4);
372+
expect(parseInt(el1.attr('data-gs-height'))).toBe(2);
373+
374+
expect(parseInt(el2.attr('data-gs-x'))).toBe(4);
375+
expect(parseInt(el2.attr('data-gs-y'))).toBe(0);
376+
expect(parseInt(el2.attr('data-gs-width'))).toBe(4);
377+
expect(parseInt(el2.attr('data-gs-height'))).toBe(4);
378+
379+
expect(parseInt(el3.attr('data-gs-x'))).toBe(0);
380+
expect(parseInt(el3.attr('data-gs-y'))).toBe(6);
381+
expect(parseInt(el3.attr('data-gs-width'))).toBe(1); // ??? could take entire width if it did above
382+
expect(parseInt(el3.attr('data-gs-height'))).toBe(1);
383+
384+
// back to 1 column, move item2 to beginning to [3][1][2] vertically
385+
grid.setColumn(1);
386+
expect(grid.opts.column).toBe(1);
387+
grid.move(el3, 0, 0);
388+
389+
expect(parseInt(el3.attr('data-gs-x'))).toBe(0);
390+
expect(parseInt(el3.attr('data-gs-y'))).toBe(0);
391+
expect(parseInt(el3.attr('data-gs-width'))).toBe(1);
392+
expect(parseInt(el3.attr('data-gs-height'))).toBe(1);
378393

379-
expect(node2.x).toBe(1);
380-
expect(node2.y).toBe(0);
381-
expect(node2.width).toBe(1);
382-
expect(node2.height).toBe(4);
394+
expect(parseInt(el1.attr('data-gs-y'))).toBe(1);
395+
expect(parseInt(el1.attr('data-gs-width'))).toBe(1);
396+
expect(parseInt(el1.attr('data-gs-height'))).toBe(2);
383397

384-
expect(node3.x).toBe(0);
385-
expect(node3.y).toBe(6);
386-
expect(node3.width).toBe(1); // ??? could stay at 1 or take entire width still ?
387-
expect(node3.height).toBe(1);
398+
expect(parseInt(el2.attr('data-gs-x'))).toBe(0);
399+
expect(parseInt(el2.attr('data-gs-y'))).toBe(3);
400+
expect(parseInt(el2.attr('data-gs-width'))).toBe(1);
401+
expect(parseInt(el2.attr('data-gs-height'))).toBe(4);
388402

389-
// back to 12 column and initial layout (other than new item3)
403+
// back to 12 column, el3 to be beginning still, but [1][2] to be in 1 columns still but wide 4x2 and 4x still
390404
grid.setColumn(12);
391405
expect(grid.opts.column).toBe(12);
392-
node1 = $('#item1').data('_gridstack_node');
393-
node2 = $('#item2').data('_gridstack_node');
394-
node3 = $('#item3').data('_gridstack_node');
395-
expect(node1.x).toBe(0);
396-
expect(node1.y).toBe(0);
397-
expect(node1.width).toBe(4);
398-
expect(node1.height).toBe(2);
399-
400-
expect(node2.x).toBe(4);
401-
expect(node2.y).toBe(0);
402-
expect(node2.width).toBe(4);
403-
expect(node2.height).toBe(4);
404-
405-
expect(node3.x).toBe(0);
406-
expect(node3.y).toBe(6);
407-
expect(node3.width).toBe(6); // ??? could 6 or taken entire width if it did above
408-
expect(node3.height).toBe(1);
406+
407+
expect(parseInt(el3.attr('data-gs-x'))).toBe(0);
408+
expect(parseInt(el3.attr('data-gs-y'))).toBe(0);
409+
expect(parseInt(el3.attr('data-gs-width'))).toBe(1);
410+
expect(parseInt(el3.attr('data-gs-height'))).toBe(1);
411+
412+
expect(parseInt(el1.attr('data-gs-x'))).toBe(0);
413+
expect(parseInt(el1.attr('data-gs-y'))).toBe(1);
414+
expect(parseInt(el1.attr('data-gs-width'))).toBe(4);
415+
expect(parseInt(el1.attr('data-gs-height'))).toBe(2);
416+
417+
expect(parseInt(el2.attr('data-gs-x'))).toBe(0);
418+
expect(parseInt(el2.attr('data-gs-y'))).toBe(3);
419+
expect(parseInt(el2.attr('data-gs-width'))).toBe(4);
420+
expect(parseInt(el2.attr('data-gs-height'))).toBe(4);
421+
422+
// 2 column will have item1, item2, item3 in 1 column still but half the width
423+
grid.setColumn(1); // test convert from small, should use 12 layout still
424+
grid.setColumn(2);
425+
expect(grid.opts.column).toBe(2);
426+
427+
expect(parseInt(el3.attr('data-gs-x'))).toBe(0);
428+
expect(parseInt(el3.attr('data-gs-y'))).toBe(0);
429+
expect(parseInt(el3.attr('data-gs-width'))).toBe(1); // 1 as we scaled from 12 columns
430+
expect(parseInt(el3.attr('data-gs-height'))).toBe(1);
431+
432+
expect(parseInt(el1.attr('data-gs-x'))).toBe(0);
433+
expect(parseInt(el1.attr('data-gs-y'))).toBe(1);
434+
expect(parseInt(el1.attr('data-gs-width'))).toBe(1);
435+
expect(parseInt(el1.attr('data-gs-height'))).toBe(2);
436+
437+
expect(parseInt(el2.attr('data-gs-x'))).toBe(0);
438+
expect(parseInt(el2.attr('data-gs-y'))).toBe(3);
439+
expect(parseInt(el2.attr('data-gs-width'))).toBe(1);
440+
expect(parseInt(el2.attr('data-gs-height'))).toBe(4);
409441
});
410442
});
411443

0 commit comments

Comments
 (0)