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