Add item to responsive layout

[frantic0]

Hi @vaheqelyan

in your responsive layout example, to add a new item you use a constant COLS = 6 to find space and add the right COLS object to the item.

        let findOutPosition = gridHelp.findSpace(newItem, $items, COLS);
        grid.
        newItem = {
          ...newItem,
          [COLS]: {
            ...newItem[COLS],
            ...findOutPosition,
          },
        };

This seems to be working well only under the assumption that the layout dimensions do not change and that you have only one COLS layout. If we resize the window/grid container object to a different [width, cols] config and add an item after, the example won't add the item correctly.

That means when adding a new item, finding out a position needs to be calculated per [COLS] object, correct?

The property that allow access to the number of current cols doesn't seem to be accessible in runtime. What is the best way to do this?

[vaheqelyan]

can i reproduce with this example https://github.com/vaheqelyan/svelte-grid/blob/master/www/src/routes/examples/add_remove.svx ?

[frantic0]

Here is an example

https://svelte.dev/repl/29c56b4b1ac34174890bef008cb6d580?version=3.35.0

Note the following:

1. I added the following COLS configs

const cols = [
    [2880, 12]
    [1600, 12],
    [1440, 8],
    [1280, 6],
    [1024, 3],
    [800, 2],
];

2. I added a ResizeObserver to the grid container to measure its current width. Check the console as you drag the vertical splitter editor/renderer.

3. I extended add() to add [8] COL property every time you add a new item.

What can we observe

a. default items are only visible in 1024 < width < 1280

b. when width > 1280 and you add(), new items are incorrectly overlaid to the first position rather appended.

I conclude that

1. I am not managing well the addition of new items because I need to create COL props and apply findOutPosition for every COL that I initially defined in cols

  newItem = {
    ...newItem,
    [COLS]: {
      ...newItem[COLS],
      ...findOutPosition,
    },
  }; 

2. grid is not managing well the addition of new items between different COLS after there has been a resize?

3. am I missing a current COL exposed by the component? if so, this might be useful and can be exposed with the ResizeObserver?

4. this mechanism is under-documented

[vaheqelyan]

if I get you right understood your problem is the next. You added a new item to column 8 or 6 or no matter where, but the created item is not displayed when you change the breakpoint. This is a good point, this is not documented and there are not even demos for this problem.

[frantic0]

Yes, that is correct. Check the PR that I made here, https://github.com/vaheqelyan/svelte-grid/pull/81, it sorts the problem in the demo add_remove.svx

[vaheqelyan]

thank you very much, I'll take a look

[vaheqelyan]

I think v4.1.0 fixes this. Although I will need to add a little thing