mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
WIP-ish, batch visible range requests, allow setting empty ranges and...
don't try to notify when the tile becomes invisible again, we don't need it currently
This commit is contained in:
parent
98678b991b
commit
d0f122a2be
@ -46,36 +46,51 @@ export class TimelineViewModel extends ViewModel {
|
|||||||
this._endTile = null;
|
this._endTile = null;
|
||||||
this._topLoadingPromise = null;
|
this._topLoadingPromise = null;
|
||||||
this._bottomLoadingPromise = null;
|
this._bottomLoadingPromise = null;
|
||||||
|
this._requestedStartTile = null;
|
||||||
|
this._requestedEndTile = null;
|
||||||
|
this._requestScheduled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
setVisibleTileRange(startTile, endTile, isViewportFilled) {
|
/** if this.tiles is empty, call this with undefined for both startTile and endTile */
|
||||||
// we should async batch things here?
|
setVisibleTileRange(startTile, endTile) {
|
||||||
|
this._requestedStartTile = startTile;
|
||||||
|
this._requestedEndTile = endTile;
|
||||||
|
if (!this._requestScheduled) {
|
||||||
|
Promise.resolve().then(() => {
|
||||||
|
this._setVisibleTileRange(this._requestedStartTile, this._requestedEndTile);
|
||||||
|
this._requestScheduled = false;
|
||||||
|
});
|
||||||
|
this._requestScheduled = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// this will prevent a (small) inserted tile from being marked visible, won't it?
|
/** if this.tiles is empty, call this with undefined for both startTile and endTile */
|
||||||
if (this._startTile === startTile && this._endTile === endTile) {
|
_setVisibleTileRange(startTile, endTile) {
|
||||||
return;
|
let loadTop;
|
||||||
|
if (startTile && endTile) {
|
||||||
|
// old tiles could have been removed from tilescollection once we support unloading
|
||||||
|
this._startTile = startTile;
|
||||||
|
this._endTile = endTile;
|
||||||
|
const startIndex = this._tiles.getTileIndex(this._startTile);
|
||||||
|
const endIndex = this._tiles.getTileIndex(this._endTile);
|
||||||
|
for (const tile of this._tiles.sliceIterator(startIndex, endIndex)) {
|
||||||
|
tile.notifyVisible();
|
||||||
|
}
|
||||||
|
loadTop = startIndex < 5;
|
||||||
|
console.log("got tiles", startIndex, endIndex, loadTop);
|
||||||
|
} else {
|
||||||
|
loadTop = true;
|
||||||
|
console.log("no tiles, load more at top");
|
||||||
}
|
}
|
||||||
|
|
||||||
// old tiles could have been removed from tilescollection once we support unloading
|
if (loadTop && !this._topLoadingPromise) {
|
||||||
const oldStartIndex = this._startTile ? this._tiles.getTileIndex(this._startTile) : Number.MAX_SAFE_INTEGER;
|
|
||||||
const oldEndIndex = this._endTile ? this._tiles.getTileIndex(this._endTile) : Number.MIN_SAFE_INTEGER;
|
|
||||||
const newStartIndex = this._tiles.getTileIndex(startTile);
|
|
||||||
const newEndIndex = this._tiles.getTileIndex(endTile);
|
|
||||||
|
|
||||||
const minIndex = Math.min(oldStartIndex, newStartIndex);
|
|
||||||
const maxIndex = Math.max(oldEndIndex, newEndIndex);
|
|
||||||
|
|
||||||
let index = minIndex;
|
|
||||||
for (const tile of this._tiles.sliceIterator(minIndex, maxIndex)) {
|
|
||||||
const isVisible = index >= newStartIndex && index <= newEndIndex;
|
|
||||||
tile.setVisible(isVisible);
|
|
||||||
index += 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isViewportFilled || (newStartIndex < 5 && !this._topLoadingPromise)) {
|
|
||||||
this._topLoadingPromise = this._timeline.loadAtTop(10).then(() => {
|
this._topLoadingPromise = this._timeline.loadAtTop(10).then(() => {
|
||||||
this._topLoadingPromise = null;
|
this._topLoadingPromise = null;
|
||||||
|
// check if more items need to be loaded by recursing
|
||||||
|
this.setVisibleTileRange(this._startTile, this._endTile);
|
||||||
});
|
});
|
||||||
|
} else if (loadTop) {
|
||||||
|
console.log("loadTop is true but already loading");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -44,10 +44,8 @@ export class GapTile extends SimpleTile {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setVisible(isVisible) {
|
notifyVisible() {
|
||||||
if (isVisible) {
|
this.fill();
|
||||||
this.fill();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
updateEntry(entry, params) {
|
updateEntry(entry, params) {
|
||||||
|
@ -123,9 +123,7 @@ export class SimpleTile extends ViewModel {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setVisible(isVisible) {
|
notifyVisible() {}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
dispose() {
|
dispose() {
|
||||||
this.setUpdateEmit(null);
|
this.setUpdateEmit(null);
|
||||||
|
@ -132,11 +132,12 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private updateVisibleRange(startIndex: number, endIndex: number, isViewportFilled: boolean) {
|
private updateVisibleRange(startIndex: number, endIndex: number, isViewportFilled: boolean) {
|
||||||
|
// can be undefined, meaning the tiles collection is still empty
|
||||||
const firstVisibleChild = this.tilesView!.getChildInstanceByIndex(startIndex);
|
const firstVisibleChild = this.tilesView!.getChildInstanceByIndex(startIndex);
|
||||||
const lastVisibleChild = this.tilesView!.getChildInstanceByIndex(endIndex);
|
const lastVisibleChild = this.tilesView!.getChildInstanceByIndex(endIndex);
|
||||||
if (firstVisibleChild && lastVisibleChild) {
|
//if (firstVisibleChild && lastVisibleChild) {
|
||||||
this.value.setVisibleTileRange(firstVisibleChild.value, lastVisibleChild.value, isViewportFilled);
|
this.value.setVisibleTileRange(firstVisibleChild?.value, lastVisibleChild?.value, isViewportFilled);
|
||||||
}
|
//}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user