Items overlapping issue

[bourhaouta]

I'm trying to remake the https://bento.me grid using your package, so far so good

but I want to use variant buttons to resize instead of the resizer functionality, for example, a button on each item that will change the w: 1, h: 1 to w: 2, h: 2
so what happens is that the size changes but it doesn't adjust, it's like the adjustment happens before the size change because on the second click it pushed to touching blocks around, I tried to use gridHelp.adjust but it ruins the order and placements of all items and it removes the empty space, and normalize doesn't seem to do much, is there a way to trigger the adjust function but without having the order and such to be affected?

First size change click:

Second size change:

[vaheqelyan]

Can you send me a repl please?

[bourhaouta]

Can you send me a repl please?

This is kinda how I'm trying to work on it: https://svelte.dev/repl/33091a6496f6435085ed7c75a6cb8c17?version=4.2.0
and as you see once you click on the button it goes under the right item and it overlaps, and the second click it adjusts to the previous changes and not the current ones

[vaheqelyan]

Thanks for the repl

https://svelte.dev/repl/efc9e48ce68a4079a1c1d5a584660671?version=4.2.0 (forked)

I have slightly changed the addWidth function

const addWidth = (item) => {
  let newItems = items.map((value) => {
    if (value.id === item.id) {
      value[COLS] = { ...value[COLS], w: value[COLS].w + 1 }
    }

    return value
  })

  items = gridHelp.adjust(newItems, COLS)
}

I updated the array of items and then assigned it to a new variable called newItems
On the last line, I call adjust, passing newItems. It seems to work

[bourhaouta]

Thank you for your replay 🙌 the thing is that I'm trying to avoid using adjust because it resorts everything, I kinda want to leave other blocks in their own position and only move the ones are around the one I'm trying to make it bigger if it makes sense

[vaheqelyan]

I'm trying to avoid using adjust because it resorts everything

I know it's annoying. it shouldn't work like that

I'll fix it (#64)

[bourhaouta]

Thank you so much ❤️

[vaheqelyan]

I updated the adjust function and tried to keep the order of elements as much as possible. But, there will be cases when the order of elements is not guaranteed [email protected]

Try this and let me know if it fixes your issue or not. I think this may work the best

If you resize the element using the ui, the element might end up at the bottom position

[vasilppetrov]

Hello @vaheqelyan, in the new version 5.1.2 of the lib, I think there is bug with the 'adjust' helper.

In the previous version 5.1.1, I've used this helper function to align items after I manually sort them. The behaviour was what I was expected, the items adjust to fill the free spaces and keep the order of them. No matter how many times I trigger 'adjust'. If they are adjusted, they stays that way.
This is my current implementation

const adjustGrid = (items, columnWidth): void => {
  const sortedItems = [...items];

  sortedItems.sort((item, itemSec) => {
	  if (
		  item[columnWidth]['y'] === itemSec[columnWidth]['y'] &&
		  item[columnWidth]['x'] < itemSec[columnWidth]['x']
	  ) {
		  return -1;
	  }
  
	  if (item[columnWidth]['y'] < itemSec[columnWidth]['y']) {
		  return -1;
	  }
	  return 1;
  });

     return gridHelp.adjust(sortedItems, columnWidth);
};

Now in version 5.1.2 when I trigger 'adjust' first time items align and fill empty spaces. Then every time when I 'adjust' again, they are resorted and the items are messed up. Can you check it please. Does this is the behaviour we want.

If it would be helpful, here is updated version of 'adjust' helper from 5.1.1 with the sorting function that I'm using in my current implementation:

function adjust(items, col) {
  let matrix = makeMatrix(getRowsCount(items, col), col);

  let sortedItems = [...items];
  sortedItems.sort((item, itemSec) => {
    if (
      item[col]['y'] === itemSec[col]['y'] &&
      item[col]['x'] < itemSec[col]['x']
    ) {
      return -1;
    }

    if (item[col]['y'] < itemSec[col]['y']) {
      return -1;
    }
    return 1;
  });


  let res = []; 

  sortedItems.forEach((item) => {
    let position = findFreeSpaceForItem(matrix, item[col]);

    res.push({
      ...item,
      [col]: {
        ...item[col],
        ...position,
      },
    });

    matrix = makeMatrixFromItems(res, getRowsCount(res, col), col);
  });

  return res
}

Thank you so much, for the great lib and support