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

Prevent deletion glitches

old-stable24
Varun Patil 2022-10-16 14:08:15 -07:00
parent 208797dd11
commit 4ca809d7b2
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Timeline.vue
View File

@ -639,8 +639,9 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
* *
* @param dayId id of day * @param dayId id of day
* @param data photos * @param data photos
* @param isAnimating prevents glitches due to height changes
*/ */
processDay(dayId: number, data: IPhoto[]) { processDay(dayId: number, data: IPhoto[], isAnimating=false) {
const head = this.heads[dayId]; const head = this.heads[dayId];
const day = head.day; const day = head.day;
this.loadedDays.add(dayId); this.loadedDays.add(dayId);
@ -717,8 +718,8 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
const jH = Math.round(jbox.height); const jH = Math.round(jbox.height);
const delta = jH - row.size; const delta = jH - row.size;
// If the difference is too small, it's not worth risking an adjustment // If the difference is too small, it's not worth risking an adjustment
// especially on square layouts on mobile // especially on square layouts on mobile. Also don't do this if animating.
if (Math.abs(delta) > 5) { if (Math.abs(delta) > 5 && !isAnimating) {
rowSizeDelta += delta; rowSizeDelta += delta;
row.size = jH; row.size = jH;
} }
@ -785,11 +786,13 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
} }
// Scroll to the same actual position if the added rows // Scroll to the same actual position if the added rows
// were above the current scroll position // were above the current scroll position, unless animating
const recycler: any = this.$refs.recycler; if (!isAnimating) {
const midIndex = (recycler.$_startIndex + recycler.$_endIndex) / 2; const recycler: any = this.$refs.recycler;
if (midIndex > headIdx) { const midIndex = (recycler.$_startIndex + recycler.$_endIndex) / 2;
this.setScrollY(scrollY + rowSizeDelta); if (midIndex > headIdx) {
this.setScrollY(scrollY + rowSizeDelta);
}
} }
} }
} }
@ -878,7 +881,8 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
// Reflow all touched days // Reflow all touched days
for (const day of updatedDays) { for (const day of updatedDays) {
this.processDay(day.dayid, day.detail.filter(p => !delPhotosSet.has(p))); const newDetail = day.detail.filter(p => !delPhotosSet.has(p));
this.processDay(day.dayid, newDetail, true);
} }
// Enter from right all photos that exited left // Enter from right all photos that exited left
@ -927,6 +931,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
cursor: pointer; cursor: pointer;
vertical-align: top; vertical-align: top;
height: 100%; height: 100%;
transition: width 0.2s ease-in-out; // reflow justification
} }
.head-row { .head-row {