column('none') now ignores layouts

* fix gridstack#2576
adumesny · Dec 18, 2023 · 533ace0 · 533ace0
1 parent ba345f3
commit 533ace0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 23 deletions.
diff --git 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: [#2576](https://github.com/gridstack/gridstack.js/issues/2576) 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
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Column insert bug #2578</title>
+ <link rel="stylesheet" href="../../../demo/demo.css" />
+ <script src="../../../dist/gridstack-all.js"></script>
+ <link rel="stylesheet" href="../../../dist/gridstack-extra.css"/>
+</head>
+
+<body>
+ <button onClick="addColAtIndex(0)">Add column 0</button>
+ <button onClick="removeColAtIndex(0)">Remove column 0</button>
+ <div class="grid-stack"></div>
+ </div>
+ <script type="text/javascript">
+ var items = [
+ { content: 'Item 1', x: 0, y: 0 },
+ { content: 'Item 2', x: 1, y: 0 },
+ { content: 'Item 3', x: 2, y: 2 },
+ ];
+ var options = { float: true, column: 3, row: 3, cellHeight: 50, children: items};
+
+ var grid = GridStack.init(options);
+
+ const addColAtIndex = (colIndex) => {
+ grid.column(grid.getColumn() + 1, 'none');
+ grid.engine.nodes.filter(n => n.x >= colIndex).sort((a, b) => b.x - a.x).forEach(n =>
+ grid.update(n.el, {x: n.x+1})
+ )
+ };
+
+ const removeColAtIndex = (colIndex) => {
+ grid.engine.nodes.filter(n => n.x >= colIndex).sort((a, b) => a.x - b.x).forEach(n => {
+ if (n.x) grid.update(n.el, {x: n.x-1})
+ })
+ grid.column(grid.getColumn() - 1, 'none')
+ };
+
+ addColAtIndex(0)
+ addColAtIndex(0)
+ removeColAtIndex(0)
+ removeColAtIndex(0)
+ addColAtIndex(0)
+ addColAtIndex(0)
+ </script>
+</body>
+
+</html>
diff --git 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
@@ -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