[grid] Keep relevant items in viewport on size change

[tomivirkki]

When the grid's effective size changes dynamically (for example due to items in the viewport getting expanded or new items getting added)

• If there is an active item and it's in view, then it should be kept in the same visual location
• If not, and there are selected items in view, then as many as possible of them should stay in the same location
• If not, and we're scrolled to the bottom before, then we should remain scrolled to the bottom also afterwards
• If not, then keep the topmost visible item in the same visual position

[TatuLund]

One workaround is to post first visible index to server with JavaScript and programmatically scroll to that after some operation that jumps the Grid/TreeGrid back to top.

public MyView() {
        ...
        grid.getElement().executeJs(
                "function debounce(func, wait) {let timeout; return () => {if (timeout) {clearTimeout(timeout);} timeout = setTimeout(func, wait);}} const onScroll = debounce(() => $0.$server.firstIndex($1._firstVisibleIndex), 100); $1.$.table.addEventListener('scroll', onScroll);",
                getElement(), grid.getElement());
       ...
}

    @ClientCallable
    private void firstIndex(JsonValue index) {
        this.index = Integer.valueOf(index.toJson());
    }
}

Fully working demo here: https://gist.github.com/TatuLund/2cf890b9dd130bbcb9123bb3c7a5bbff