RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use nextTick for reflow

pull/37/head
Varun Patil 2022-09-13 00:18:24 -07:00
parent 361b6660b0
commit 149ce2ad12
1 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Timeline.vue
View File

@ -172,7 +172,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
/** Resizing timer */ /** Resizing timer */
private resizeTimer = null as number | null; private resizeTimer = null as number | null;
/** View size reflow timer */ /** View size reflow timer */
private reflowTimelineTimer = null as number | null; private reflowTimelineReq = false;
/** Is mobile layout */ /** Is mobile layout */
private isMobile = false; private isMobile = false;
@ -203,11 +203,13 @@ export default class Timeline extends Mixins(GlobalMixin) {
// Wait for one tick before doing anything // Wait for one tick before doing anything
await this.$nextTick(); await this.$nextTick();
// Fit to window
this.handleResize();
// Get data // Get data
this.fetchDays(); await this.fetchDays();
// Timeline recycler init // Timeline recycler init
this.handleResize();
(this.$refs.recycler as any).$el.addEventListener('scroll', this.scrollPositionChange, false); (this.$refs.recycler as any).$el.addEventListener('scroll', this.scrollPositionChange, false);
this.scrollPositionChange(); this.scrollPositionChange();
} }
@ -277,10 +279,8 @@ export default class Timeline extends Mixins(GlobalMixin) {
* the pixel position of the recycler has changed. * the pixel position of the recycler has changed.
*/ */
scrollPositionChange(event?: any) { scrollPositionChange(event?: any) {
if (event) { this.timelineCursorY = event ? event.target.scrollTop * this.timelineHeight / this.viewHeight : 0;
this.timelineCursorY = event.target.scrollTop * this.timelineHeight / this.viewHeight; this.timelineMoveHoverCursor(this.timelineCursorY);
this.timelineMoveHoverCursor(this.timelineCursorY);
}
if (this.scrollTimer) { if (this.scrollTimer) {
window.clearTimeout(this.scrollTimer); window.clearTimeout(this.scrollTimer);
@ -420,11 +420,11 @@ export default class Timeline extends Mixins(GlobalMixin) {
const res = await axios.get<IDay[]>(generateUrl(this.appendQuery(url), params)); const res = await axios.get<IDay[]>(generateUrl(this.appendQuery(url), params));
const data = res.data; const data = res.data;
if (this.state !== startState) return; if (this.state !== startState) return;
this.processDays(data); await this.processDays(data);
} }
/** Process the data for days call including folders */ /** Process the data for days call including folders */
processDays(data: IDay[]) { async processDays(data: IDay[]) {
const list: IRow[] = []; const list: IRow[] = [];
const heads: {[dayId: number]: IRow} = {}; const heads: {[dayId: number]: IRow} = {};
@ -494,9 +494,10 @@ export default class Timeline extends Mixins(GlobalMixin) {
this.processDay(preload.day); this.processDay(preload.day);
} }
// Fix view height variable
this.reflowTimeline();
this.loading = false; this.loading = false;
// Fix view height variable
await this.reflowTimeline();
} }
/** Fetch image data for one dayId */ /** Fetch image data for one dayId */
@ -528,15 +529,15 @@ export default class Timeline extends Mixins(GlobalMixin) {
} }
/** Re-create timeline tick data in the next frame */ /** Re-create timeline tick data in the next frame */
reflowTimeline() { async reflowTimeline() {
if (this.reflowTimelineTimer) { if (this.reflowTimelineReq) {
return; return;
} }
this.reflowTimelineTimer = window.setTimeout(() => { this.reflowTimelineReq = true;
this.reflowTimelineTimer = null; await this.$nextTick();
this.reflowTimelineNow(); this.reflowTimelineNow();
}, 0); this.reflowTimelineReq = false;
} }
/** Re-create timeline tick data */ /** Re-create timeline tick data */