diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index a857a0bd..7e5f63e2 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -60,8 +60,8 @@
();
+ /** Set of dayIds for which image size is calculated */
+ private sizedDays = new Set();
/** Days to load in the next call */
private fetchDayQueue = [] as number[];
/** Timer to load day call */
@@ -255,6 +257,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
this.scrollerManager.reset();
this.state = Math.random();
this.loadedDays.clear();
+ this.sizedDays.clear();
this.fetchDayQueue = [];
window.clearTimeout(this.fetchDayTimer);
window.clearTimeout(this.resizeTimer);
@@ -342,7 +345,13 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
// Reflow if there are elements (this isn't an init call)
// An init call reaches here when the top matter size changes
if (this.list.length > 0) {
+ // At this point we're sure the size has changed, so we need
+ // to invalidate everything related to sizes
+ this.sizedDays.clear();
this.scrollerManager.adjust();
+
+ // Explicitly request a scroll event
+ this.loadScrollChanges(this.currentStart, this.currentEnd);
}
}
@@ -377,8 +386,8 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
row.photos[j] = {
flag: this.c.FLAG_PLACEHOLDER,
fileid: Math.random(),
- dispWp: utils.round(1 / this.numCols, 4, true),
- dispXp: utils.round(j / this.numCols, 4, true),
+ dispW: utils.roundHalf(this.rowWidth / this.numCols),
+ dispX: utils.roundHalf(j * this.rowWidth / this.numCols) ,
dispY: 0,
};
}
@@ -421,11 +430,15 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
// Fetch all visible days
for (let i = startIndex; i <= endIndex; i++) {
let item = this.list[i];
- if (!item || this.loadedDays.has(item.dayId)) {
+ if (!item) continue;
+ if (this.loadedDays.has(item.dayId)) {
+ if (!this.sizedDays.has(item.dayId)) {
+ // Just quietly reflow without refetching
+ this.processDay(item.dayId, item.day.detail);
+ }
continue;
}
- this.loadedDays.add(item.dayId);
this.fetchDay(item.dayId);
}
}
@@ -661,6 +674,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
this.list = list;
this.heads = heads;
this.loadedDays.clear();
+ this.sizedDays.clear();
// Iterate the preload map
// Now the inner detail objects are reactive
@@ -687,6 +701,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
// Do this in advance to prevent duplicate requests
this.loadedDays.add(dayId);
+ this.sizedDays.add(dayId);
// Look for cache
this.processDay(dayId, await utils.getCachedData(this.getDayUrl(dayId)));
@@ -766,6 +781,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
const head = this.heads[dayId];
const day = head.day;
this.loadedDays.add(dayId);
+ this.sizedDays.add(dayId);
// Filter out items we don't want to show at all
// Note: flags are not converted yet
@@ -853,13 +869,13 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
// Get aspect ratio
const setPos = () => {
- photo.dispWp = utils.round(jbox.width / this.rowWidth, 4, true);
- photo.dispXp = utils.round(jbox.left / this.rowWidth, 4, true);
+ photo.dispW = utils.roundHalf(jbox.width);
+ photo.dispX = utils.roundHalf(jbox.left);
photo.dispH = this.squareMode ? utils.roundHalf(jbox.height) : 0;
photo.dispY = 0;
photo.dispRowNum = row.num;
};
- if (photo.dispWp !== undefined) { // photo already displayed: animate
+ if (photo.dispW !== undefined) { // photo already displayed: animate
window.setTimeout(setPos, 50);
if (photo.dispRowNum !== undefined &&
diff --git a/src/types.ts b/src/types.ts
index 98db049f..cbf50e29 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -42,12 +42,12 @@ export type IPhoto = {
/** Height of full image */
h?: number;
- /** Grid display width percentage */
- dispWp?: number;
- /** Grid display height (forced) */
+ /** Grid display width px */
+ dispW?: number;
+ /** Grid display height px */
dispH?: number;
- /** Grid display X percentage */
- dispXp?: number;
+ /** Grid display X px */
+ dispX?: number;
/** Grid display Y px */
dispY?: number;
/** Grid display row id (relative to head) */