diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 1f871925e..ffa9c5ca0 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -110,6 +110,7 @@ Change log
## 10.0.1-dev (TBD)
* feat: [#2574](https://github.com/gridstack/gridstack.js/pull/2574) Allow cell height in cm and mm units
* fix: [#2577](https://github.com/gridstack/gridstack.js/issues/2577) ui-resizable-s/-n style fix
+* fix: [#2578](https://github.com/gridstack/gridstack.js/issues/2578) column('none') now ignores layouts
## 10.0.1 (2023-12-10)
* fix: [#2552](https://github.com/gridstack/gridstack.js/issues/2552) DOM init doesn't sizeToContent
diff --git a/spec/e2e/html/2576_insert_column_shift_content.html b/spec/e2e/html/2576_insert_column_shift_content.html
new file mode 100644
index 000000000..3ccc51111
--- /dev/null
+++ b/spec/e2e/html/2576_insert_column_shift_content.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+ Column insert bug #2578
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
index 87122436b..e4d1569d7 100644
--- a/src/gridstack-engine.ts
+++ b/src/gridstack-engine.ts
@@ -797,13 +797,15 @@ export class GridStackEngine {
*
* @param prevColumn previous number of columns
* @param column new column number
- * @param nodes different sorted list (ex: DOM order) instead of current list
* @param layout specify the type of re-layout that will happen (position, size, etc...).
* Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column
*/
- public columnChanged(prevColumn: number, column: number, nodes: GridStackNode[], layout: ColumnOptions = 'moveScale'): GridStackEngine {
+ public columnChanged(prevColumn: number, column: number, layout: ColumnOptions = 'moveScale'): GridStackEngine {
if (!this.nodes.length || !column || prevColumn === column) return this;
+ // in this mode no layout is done whatsoever, up to the caller to handle it
+ if (layout === 'none') return this;
+
// simpler shortcuts layouts
const doCompact = layout === 'compact' || layout === 'list';
if (doCompact) {
@@ -814,23 +816,7 @@ export class GridStackEngine {
if (column < prevColumn) this.cacheLayout(this.nodes, prevColumn);
this.batchUpdate(); // do this EARLY as it will call saveInitial() so we can detect where we started for _dirty and collision
let newNodes: GridStackNode[] = [];
-
- // if we're going to 1 column and using DOM order (item passed in) rather than default sorting, then generate that layout
- let domOrder = false;
- if (column === 1 && nodes?.length) {
- domOrder = true;
- let top = 0;
- nodes.forEach(n => {
- n.x = 0;
- n.w = 1;
- n.y = Math.max(n.y, top);
- top = n.y + n.h;
- });
- newNodes = nodes;
- nodes = [];
- } else {
- nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision)
- }
+ let nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision)
// see if we have cached previous layout IFF we are going up in size (restore) otherwise always
// generate next size down from where we are (looks more natural as you gradually size down).
@@ -887,8 +873,8 @@ export class GridStackEngine {
if (nodes.length) {
if (typeof layout === 'function') {
layout(column, prevColumn, newNodes, nodes);
- } else if (!domOrder) {
- let ratio = (doCompact || layout === 'none') ? 1 : column / prevColumn;
+ } else {
+ let ratio = doCompact ? 1 : column / prevColumn;
let move = (layout === 'move' || layout === 'moveScale');
let scale = (layout === 'scale' || layout === 'moveScale');
nodes.forEach(node => {
@@ -902,7 +888,7 @@ export class GridStackEngine {
}
// finally re-layout them in reverse order (to get correct placement)
- if (!domOrder) newNodes = Utils.sort(newNodes, -1, column);
+ newNodes = Utils.sort(newNodes, -1, column);
this._inColumnResize = true; // prevent cache update
this.nodes = []; // pretend we have no nodes to start with (add() will use same structures) to simplify layout
newNodes.forEach(node => {
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 4ae779737..d0618bb5f 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -954,7 +954,7 @@ export class GridStack {
// update the items now, checking if we have a custom children layout
/*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;
if (newChildren) this.load(newChildren);
- else*/ this.engine.columnChanged(oldColumn, column, undefined, layout);
+ else*/ this.engine.columnChanged(oldColumn, column, layout);
if (this._isAutoCellHeight) this.cellHeight();
this.resizeToContentCheck(true); // wait for width resizing