diff --git a/src/components/Photo.vue b/src/components/Photo.vue index d4e96a02..ecc5b284 100644 --- a/src/components/Photo.vue +++ b/src/components/Photo.vue @@ -154,9 +154,7 @@ export default { this.day.fiOrigIds = newIds; // Remove deleted files from details - this.day.detail = this.day.detail.filter(f => !remIds.has(f.fileid)); - this.day.count = this.day.detail.length; - this.$emit('reprocess', this.day); + this.$emit('reprocess', remIds, new Set([this.day])); }, toggleSelect() { diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index 44b4d430..aa718e04 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -26,7 +26,7 @@ @@ -444,7 +444,7 @@ export default { const day = this.days.find(d => d.dayid === dayId); day.detail = data; day.count = data.length; - this.processDay(day); + this.processDay(day, true); } catch (e) { console.error(e); head.loadedImages = false; @@ -501,8 +501,14 @@ export default { } }, - /** Process items from day response */ - processDay(day) { + /** + * Process items from day response. + * Do not auto reflow if you plan to cal the reflow function later. + * + * @param {any} day Day object + * @param {boolean} autoReflowTimeline Whether to reflow timeline if row changed + */ + processDay(day, autoReflowTimeline = false) { const dayId = day.dayid; const data = day.detail; @@ -571,7 +577,7 @@ export default { // This will be true even if the head is being spliced // because one row is always removed in that case // So just reflow the timeline here - if (addedRow || spliceCount > 0) { + if (autoReflowTimeline && (addedRow || spliceCount > 0)) { this.reflowTimeline(); this.handleViewSizeChange(); } @@ -724,14 +730,39 @@ export default { await Promise.allSettled(promises); this.loading = false; + await this.deleteFromViewWithAnimation(delIds, updatedDays); + this.clearSelection(); + }, + + /** + * Delete elements from main view with some animation + * This function looks horribly slow, probably isn't that bad + * in all practical scenarios. + * + * This is also going to update day.detail for you and make + * a call to processDay so just pass it the list of ids to + * delete and the days that were updated. + * + * @param {Set} delIds Set of file ids to delete + * @param {Set} updatedDays of days that MAY be affected + */ + async deleteFromViewWithAnimation(delIds, updatedDays) { + if (delIds.size === 0 || updatedDays.size === 0) { + return; + } + // Animate the deletion - for (const photo of this.selection) { - if (delIds.has(photo.fileid)) { - photo.flag |= constants.FLAG_LEAVING; + for (const day of updatedDays) { + for (const row of day.rows) { + for (const photo of row.photos) { + if (delIds.has(photo.fileid)) { + photo.flag |= constants.FLAG_LEAVING; + } + } } } - // wait for 250ms + // wait for 200ms await new Promise(resolve => setTimeout(resolve, 200)); // Speculate day reflow for animation @@ -783,7 +814,7 @@ export default { } } - this.clearSelection(); + // Reflow timeline this.reflowTimeline(); this.handleViewSizeChange(); },