Emit layoutUpdated event when adding or removing items from grid

[vlaca99]

When implementing adding or removing items in grid, layoutUpdated event is not emitted and x and y values are not updated accordingly. Is there a way to trigger layoutUpdated event on add/remove?

[kova98]

I had the same issue, see removeItem and addItemToLayout in the playground example.

Just recalculate the y afterwards if you're going to use the value anywhere else.

removeItem(item: KtdGridLayoutItem & { id: string }) {
  this.layout = this.layout.filter(
    (layoutItem) => layoutItem.id !== item.id,
  );

  // recalculate y position of all items
  this.layout.forEach((layoutItem, index) => {
    const previousItem = this.layout[index - 1];
    if (previousItem && layoutItem.y - previousItem.y > 1) {
      layoutItem.y = previousItem.y + 1;
    }
  });
}

On add, make sure to create a new variable rather than changing the existing one

  addItem(x: number, y: number, width: number, height: number, id: string) {
    const item: KtdGridLayoutItem = {
      x: x,
      y: y,
      w: width,
      h: height,
      id: id,
    };
    
    this.layout = [...this.layout, item];
  }