Gridstack.js issue incorrect shifting

Use this as a base for examples for gridstack.js issues.

by Alain Dumesny

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-extra.min.css">
<h1>Gridstack.js incorrect shifting bug</h1>
<ul>
<li>Click add column <b>twice</b></li>
<li>Click remove column <b>twice</b></li>
<li>Click add column</li>
<li>Watch <b>Item 2</b> while click add column again</li>

</ul>
<button onClick="addColAtIndex(0)">Add column</button>
<button onClick="removeColAtIndex(0)">Remove column</button>
<div class="grid-stack"></div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

TypeScript

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)
grid.column(grid.getColumn() + 1, 'none') // issue