Skip to content

Commit 127a6f9

Browse files
author
Alain Dumesny
committed
more 1 column editing tweaks
* editing in 1 column (or few columns) does a better job updating higher layout * track before and after and move items accordingly. * Tracking item swap would be even better still. more for fix #37 and part3 #1120
1 parent 0e362f8 commit 127a6f9

File tree

4 files changed

+61
-33
lines changed

4 files changed

+61
-33
lines changed

‎demo/column.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@ <h1>setColumn() grid demo</h1>
5353
}
5454

5555
var items = [
56-
/* match karma testing
56+
/* match karma testing */
5757
{x: 0, y: 0, width: 4, height: 2},
5858
{x: 4, y: 0, width: 4, height: 4},
5959
{text: ' auto'},
60-
*/
60+
6161
{x: 0, y: 0, width: 2, height: 2},
6262
{x: 2, y: 0, width: 2, height: 1},
6363
{x: 5, y: 1, width: 1, height: 1},
@@ -68,7 +68,7 @@ <h1>setColumn() grid demo</h1>
6868
];
6969
var count = 0;
7070
grid.batchUpdate();
71-
addWidget(); addWidget(); addWidget(); addWidget();
71+
addWidget(); addWidget(); //addWidget(); addWidget();
7272
grid.commit();
7373

7474
function addWidget() {

‎doc/CHANGES.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ Change log
3131

3232
- add `oneColumnModeDomSort` true|false to let you specify a custom layout (use dom order instead of x,y) for oneColumnMode `setColumn(1)` [#713](https://github.com/gridstack/gridstack.js/issues/713)
3333
- fix oneColumnMode to only restore if we auto went to it as window sizes up [#1125](https://github.com/gridstack/gridstack.js/pull/1125)
34-
- re-order in 1 column no longer affect other layouts (hard to predict). only resize/add/remove carry over [#1127](https://github.com/gridstack/gridstack.js/pull/1127)
34+
- editing in 1 column (or few columns) does a better job updating higher layout (track before and after and move items accordingly).
35+
Tracking item swap would be even better still. [#1127](https://github.com/gridstack/gridstack.js/pull/1127)
3536

3637
## v0.6.1 (2020-02-02)
3738

‎spec/gridstack-spec.js‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -383,12 +383,11 @@ describe('gridstack', function() {
383383
expect(parseInt(el2.attr('data-gs-height'))).toBe(4);
384384

385385
expect(parseInt(el3.attr('data-gs-x'))).toBe(0);
386-
expect(parseInt(el3.attr('data-gs-y'))).toBe(6); // ??? kept one column row 6 which is not ideal maybe.
386+
expect(parseInt(el3.attr('data-gs-y'))).toBe(6); // ??? keep same row, but might more intuitive higher
387387
expect(parseInt(el3.attr('data-gs-width'))).toBe(1); // ??? could take entire width if it did above
388388
expect(parseInt(el3.attr('data-gs-height'))).toBe(1);
389389

390390
// back to 1 column, move item2 to beginning to [3][1][2] vertically
391-
// NOTE: MOVE will have NO EFFECT on other layouts (see #1127)
392391
grid.setColumn(1);
393392
expect(grid.opts.column).toBe(1);
394393
grid.move(el3, 0, 0);
@@ -398,6 +397,7 @@ describe('gridstack', function() {
398397
expect(parseInt(el3.attr('data-gs-width'))).toBe(1);
399398
expect(parseInt(el3.attr('data-gs-height'))).toBe(1);
400399

400+
expect(parseInt(el1.attr('data-gs-x'))).toBe(0);
401401
expect(parseInt(el1.attr('data-gs-y'))).toBe(1);
402402
expect(parseInt(el1.attr('data-gs-width'))).toBe(1);
403403
expect(parseInt(el1.attr('data-gs-height'))).toBe(2);
@@ -407,43 +407,44 @@ describe('gridstack', function() {
407407
expect(parseInt(el2.attr('data-gs-width'))).toBe(1);
408408
expect(parseInt(el2.attr('data-gs-height'))).toBe(4);
409409

410-
// back to 12 column, SAME as before 1 column change (move in 1 column don't effect others)
410+
// back to 12 column, el3 to be beginning still, but [1][2] to be in 1 columns still but wide 4x2 and 4x still
411411
grid.setColumn(12);
412412
expect(grid.opts.column).toBe(12);
413+
414+
expect(parseInt(el3.attr('data-gs-x'))).toBe(0);
415+
expect(parseInt(el3.attr('data-gs-y'))).toBe(0);
416+
expect(parseInt(el3.attr('data-gs-width'))).toBe(1);
417+
expect(parseInt(el3.attr('data-gs-height'))).toBe(1);
418+
413419
expect(parseInt(el1.attr('data-gs-x'))).toBe(0);
414-
expect(parseInt(el1.attr('data-gs-y'))).toBe(0);
420+
expect(parseInt(el1.attr('data-gs-y'))).toBe(1);
415421
expect(parseInt(el1.attr('data-gs-width'))).toBe(4);
416422
expect(parseInt(el1.attr('data-gs-height'))).toBe(2);
417423

418424
expect(parseInt(el2.attr('data-gs-x'))).toBe(4);
419-
expect(parseInt(el2.attr('data-gs-y'))).toBe(0);
425+
expect(parseInt(el2.attr('data-gs-y'))).toBe(1);
420426
expect(parseInt(el2.attr('data-gs-width'))).toBe(4);
421427
expect(parseInt(el2.attr('data-gs-height'))).toBe(4);
422428

423-
expect(parseInt(el3.attr('data-gs-x'))).toBe(0);
424-
expect(parseInt(el3.attr('data-gs-y'))).toBe(6);
425-
expect(parseInt(el3.attr('data-gs-width'))).toBe(1); // ??? could take entire width if it did above
426-
expect(parseInt(el3.attr('data-gs-height'))).toBe(1);
427-
428-
// 2 column will generate from scaled down 12
429+
// 2 column will have item1, item2, item3 in 1 column still but half the width
429430
grid.setColumn(1); // test convert from small, should use 12 layout still
430431
grid.setColumn(2);
431432
expect(grid.opts.column).toBe(2);
432433

434+
expect(parseInt(el3.attr('data-gs-x'))).toBe(0);
435+
expect(parseInt(el3.attr('data-gs-y'))).toBe(0);
436+
expect(parseInt(el3.attr('data-gs-width'))).toBe(1); // 1 as we scaled from 12 columns
437+
expect(parseInt(el3.attr('data-gs-height'))).toBe(1);
438+
433439
expect(parseInt(el1.attr('data-gs-x'))).toBe(0);
434-
expect(parseInt(el1.attr('data-gs-y'))).toBe(0);
440+
expect(parseInt(el1.attr('data-gs-y'))).toBe(1);
435441
expect(parseInt(el1.attr('data-gs-width'))).toBe(1);
436442
expect(parseInt(el1.attr('data-gs-height'))).toBe(2);
437443

438444
expect(parseInt(el2.attr('data-gs-x'))).toBe(1);
439-
expect(parseInt(el2.attr('data-gs-y'))).toBe(0);
445+
expect(parseInt(el2.attr('data-gs-y'))).toBe(1);
440446
expect(parseInt(el2.attr('data-gs-width'))).toBe(1);
441447
expect(parseInt(el2.attr('data-gs-height'))).toBe(4);
442-
443-
expect(parseInt(el3.attr('data-gs-x'))).toBe(0);
444-
expect(parseInt(el3.attr('data-gs-y'))).toBe(6);
445-
expect(parseInt(el3.attr('data-gs-width'))).toBe(1);
446-
expect(parseInt(el3.attr('data-gs-height'))).toBe(1);
447448
});
448449
});
449450

‎src/gridstack.js‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -355,12 +355,12 @@
355355

356356
if (this.float) {
357357
this.nodes.forEach(function(n, i) {
358-
if (n._updating || n._origY === undefined || n.y === n._origY) {
358+
if (n._updating || n._packY === undefined || n.y === n._packY) {
359359
return;
360360
}
361361

362362
var newY = n.y;
363-
while (newY >= n._origY) {
363+
while (newY >= n._packY) {
364364
var collisionNode = this.nodes
365365
.slice(0, i)
366366
.find(Utils._didCollide, {n: n, newY: newY});
@@ -653,14 +653,14 @@
653653
GridStackEngine.prototype.beginUpdate = function(node) {
654654
if (node._updating) return;
655655
node._updating = true;
656-
this.nodes.forEach(function(n) { n._origY = n.y; });
656+
this.nodes.forEach(function(n) { n._packY = n.y; });
657657
};
658658

659659
GridStackEngine.prototype.endUpdate = function() {
660660
var n = this.nodes.find(function(n) { return n._updating; });
661661
if (n) {
662662
n._updating = false;
663-
this.nodes.forEach(function(n) { delete n._origY; });
663+
this.nodes.forEach(function(n) { delete n._packY; });
664664
}
665665
};
666666

@@ -1806,19 +1806,32 @@
18061806
if (column < this.column) {
18071807
this._layouts[column] = undefined;
18081808
}
1809-
// move in 1 column don't propagate (hard to do right thing). height are re-used and add/remove carry over
1810-
else if (this.column !== 1) {
1811-
// TODO: save the original x,y,w (h isn't cached) and see what actually changed to propagate correctly ?
1809+
else {
1810+
// we save the original x,y,w (h isn't cached) to see what actually changed to propagate better.
1811+
// Note: we don't need to check against out of bound scaling/moving as that will be done when using those cache values.
18121812
nodes.forEach(function(node) {
18131813
var n = layout.find(function(l) { return l._id === node._id });
1814-
if (!n) return;
1814+
if (!n) return; // no cache for new nodes. Will use those values.
18151815
var ratio = column / this.column;
1816-
n.y = node.y;
1817-
n.x = Math.round(node.x * ratio);
1818-
n.width = Math.round(node.width * ratio);
1816+
// Y changed, push down same amount
1817+
// TODO: detect doing item 'swaps' will help instead of move (especially in 1 column mode)
1818+
if (node.y !== node._origY) {
1819+
n.y += (node.y - node._origY);
1820+
}
1821+
// X changed, scale from new position
1822+
if (node.x !== node._origX) {
1823+
n.x = Math.round(node.x * ratio);
1824+
}
1825+
// width changed, scale from new width
1826+
if (node.width !== node._origW) {
1827+
n.width = Math.round(node.width * ratio);
1828+
}
1829+
// ...height always carries over from cache
18191830
}, this);
18201831
}
18211832
}, this);
1833+
1834+
this._saveInitial(); // reset current value now that we diffed.
18221835
}
18231836

18241837
/**
@@ -1907,6 +1920,19 @@
19071920
}, this);
19081921
this.commit();
19091922
delete this._ignoreLayoutsNodeChange;
1923+
1924+
// save this initial layout so we can see what changed and apply changes to other layouts better (diff)
1925+
this._saveInitial();
1926+
}
1927+
1928+
/** called to save initial position/size */
1929+
GridStackEngine.prototype._saveInitial = function() {
1930+
this.nodes.forEach(function(n) {
1931+
n._origX = n.x;
1932+
n._origY = n.y;
1933+
n._origW = n.width;
1934+
n._origH = n.height;
1935+
});
19101936
}
19111937

19121938
/**

0 commit comments

Comments
 (0)