Skip to content

Commit 0466e45

Browse files
adumesnyadumesny
authored
Merge pull request #2581 from adumesny/master
column('none') now ignores layouts
2 parents fcbfd80 + acf87ef commit 0466e45

File tree

4 files changed

+62
-23
lines changed

4 files changed

+62
-23
lines changed

‎doc/CHANGES.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ Change log
110110
## 10.0.1-dev (TBD)
111111
* feat: [#2574](https://github.com/gridstack/gridstack.js/pull/2574) Allow cell height in cm and mm units
112112
* fix: [#2577](https://github.com/gridstack/gridstack.js/issues/2577) ui-resizable-s/-n style fix
113+
* fix: [#2578](https://github.com/gridstack/gridstack.js/issues/2578) column('none') now ignores layouts
113114

114115
## 10.0.1 (2023-12-10)
115116
* fix: [#2552](https://github.com/gridstack/gridstack.js/issues/2552) DOM init doesn't sizeToContent

‎spec/e2e/html/2576_insert_column_shift_content.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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>Column insert bug #2578</title>
9+
<link rel="stylesheet" href="../../../demo/demo.css" />
10+
<script src="../../../dist/gridstack-all.js"></script>
11+
<link rel="stylesheet" href="../../../dist/gridstack-extra.css"/>
12+
</head>
13+
14+
<body>
15+
<button onClick="addColAtIndex(0)">Add column 0</button>
16+
<button onClick="removeColAtIndex(0)">Remove column 0</button>
17+
<div class="grid-stack"></div>
18+
</div>
19+
<script type="text/javascript">
20+
var items = [
21+
{ content: 'Item 1', x: 0, y: 0 },
22+
{ content: 'Item 2', x: 1, y: 0 },
23+
{ content: 'Item 3', x: 2, y: 2 },
24+
];
25+
var options = { float: true, column: 3, row: 3, cellHeight: 50, children: items};
26+
27+
var grid = GridStack.init(options);
28+
29+
const addColAtIndex = (colIndex) => {
30+
grid.column(grid.getColumn() + 1, 'none');
31+
grid.engine.nodes.filter(n => n.x >= colIndex).sort((a, b) => b.x - a.x).forEach(n =>
32+
grid.update(n.el, {x: n.x+1})
33+
)
34+
};
35+
36+
const removeColAtIndex = (colIndex) => {
37+
grid.engine.nodes.filter(n => n.x >= colIndex).sort((a, b) => a.x - b.x).forEach(n => {
38+
if (n.x) grid.update(n.el, {x: n.x-1})
39+
})
40+
grid.column(grid.getColumn() - 1, 'none')
41+
};
42+
43+
addColAtIndex(0)
44+
addColAtIndex(0)
45+
removeColAtIndex(0)
46+
removeColAtIndex(0)
47+
addColAtIndex(0)
48+
addColAtIndex(0)
49+
</script>
50+
</body>
51+
52+
</html>

‎src/gridstack-engine.ts‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -797,13 +797,15 @@ export class GridStackEngine {
797797
*
798798
* @param prevColumn previous number of columns
799799
* @param column new column number
800-
* @param nodes different sorted list (ex: DOM order) instead of current list
801800
* @param layout specify the type of re-layout that will happen (position, size, etc...).
802801
* Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column
803802
*/
804-
public columnChanged(prevColumn: number, column: number, nodes: GridStackNode[], layout: ColumnOptions = 'moveScale'): GridStackEngine {
803+
public columnChanged(prevColumn: number, column: number, layout: ColumnOptions = 'moveScale'): GridStackEngine {
805804
if (!this.nodes.length || !column || prevColumn === column) return this;
806805

806+
// in this mode no layout is done whatsoever, up to the caller to handle it
807+
if (layout === 'none') return this;
808+
807809
// simpler shortcuts layouts
808810
const doCompact = layout === 'compact' || layout === 'list';
809811
if (doCompact) {
@@ -814,23 +816,7 @@ export class GridStackEngine {
814816
if (column < prevColumn) this.cacheLayout(this.nodes, prevColumn);
815817
this.batchUpdate(); // do this EARLY as it will call saveInitial() so we can detect where we started for _dirty and collision
816818
let newNodes: GridStackNode[] = [];
817-
818-
// if we're going to 1 column and using DOM order (item passed in) rather than default sorting, then generate that layout
819-
let domOrder = false;
820-
if (column === 1 && nodes?.length) {
821-
domOrder = true;
822-
let top = 0;
823-
nodes.forEach(n => {
824-
n.x = 0;
825-
n.w = 1;
826-
n.y = Math.max(n.y, top);
827-
top = n.y + n.h;
828-
});
829-
newNodes = nodes;
830-
nodes = [];
831-
} else {
832-
nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision)
833-
}
819+
let nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision)
834820

835821
// see if we have cached previous layout IFF we are going up in size (restore) otherwise always
836822
// generate next size down from where we are (looks more natural as you gradually size down).
@@ -887,8 +873,8 @@ export class GridStackEngine {
887873
if (nodes.length) {
888874
if (typeof layout === 'function') {
889875
layout(column, prevColumn, newNodes, nodes);
890-
} else if (!domOrder) {
891-
let ratio = (doCompact || layout === 'none') ? 1 : column / prevColumn;
876+
} else {
877+
let ratio = doCompact ? 1 : column / prevColumn;
892878
let move = (layout === 'move' || layout === 'moveScale');
893879
let scale = (layout === 'scale' || layout === 'moveScale');
894880
nodes.forEach(node => {
@@ -902,7 +888,7 @@ export class GridStackEngine {
902888
}
903889

904890
// finally re-layout them in reverse order (to get correct placement)
905-
if (!domOrder) newNodes = Utils.sort(newNodes, -1, column);
891+
newNodes = Utils.sort(newNodes, -1, column);
906892
this._inColumnResize = true; // prevent cache update
907893
this.nodes = []; // pretend we have no nodes to start with (add() will use same structures) to simplify layout
908894
newNodes.forEach(node => {

‎src/gridstack.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -954,7 +954,7 @@ export class GridStack {
954954
// update the items now, checking if we have a custom children layout
955955
/*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;
956956
if (newChildren) this.load(newChildren);
957-
else*/ this.engine.columnChanged(oldColumn, column, undefined, layout);
957+
else*/ this.engine.columnChanged(oldColumn, column, layout);
958958
if (this._isAutoCellHeight) this.cellHeight();
959959

960960
this.resizeToContentCheck(true); // wait for width resizing

0 commit comments

Comments
 (0)