MasonryInfiniteGrid: item remove doesn't work

[minkky]

Description

When I try to delete visibleItems, it seems that the height calculation does not work well.

This is my test code. https://svelte.dev/repl/7c671ae987cc495dab9e1b50cad90c50?version=3.46.4

When there are 3 items in one line, if you keep deleting the 2nd(0, 1) item, the items at the top are not aligned well.

Is there any possible method to recalculate the height?

Thank you for your consideration.

+)When deleting, only the items within one page(in my case 10 items) seem to be reordered. ~If you keep deleting, the next page(10 items) are sorted and behave the same for each page.~

[daybrush]

@minkky

• @egjs/infinitegrid 4.2.0
• @egjs/ngx-infinitegrid 4.2.0
• @egjs/react-infinitegrid 4.2.0
• @egjs/vue-infinitegrid 4.2.0
• @egjs/vue3-infinitegrid 4.2.0
• @egjs/svelte-infinitegrid 4.2.0

infinitegrid's new version is released. Try it again. Thank you :)

[minkky]

@daybrush

I applied it and confirmed that it works well in the demo.

But I have question about height recalculating. Is there any way to forcefully recalculate the height?

In my case, most items are pre-loaded and the height is well calculated, but some items are called late and the pre-caclulated height does not fit. Therefore, the item was deleted based on the initially miscalculated height, so the entire layout seems to be misaligned.

[daybrush]

@minkky

When the container is later resized

<MasonryInfiniteGrid useResizeObserver={true}>...</MasonryInfiniteGrid>
// or
ig.renderItems({ useResize: true });

Call the updateItems method to find out the timing when the item's size will change later.

ig.updateItems();
// or resize with container
ig.renderItems({ useResize: true });

[minkky]

@daybrush Thanks. I will try it.

[stale[bot]]

This issue/PR has been automatically marked as stale because it has not had any update (including commits, comments, labels, milestones, etc) for 30 days. It will be closed automatically if no further update occurs in 7 day. Thank you for your contributions!

한글

이 이슈/PR은 commits, comments, labels, milestones 등 30일간 활동이 없어 자동으로 stale 상태로 전환되었습니다. 이후 7일간 활동이 없다면 자동으로 닫힐 예정입니다. 프로젝트 개선에 기여해주셔서 감사합니다.

[igorlanko]

Hey @daybrush, I'm actually still noticing this issue on 4.11.0 too. Could you please give a hint? I'm listening to a Svelte store with the items change, and calling renderItems({ useResize: true }), but after deleting an item the grid is still miffed. Though adding to the store works fine without explicit re-render call!

Here's a REPL: https://svelte.dev/repl/2d45d758814e4b908fc7e19d58895a3e?version=4.2.18. If you delete at least 6 items, you can see the grid gets broken at around 3rd or 4th row.

Thanks!