Animate after viewer file delete

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.$emit('reprocess', remIds, new Set([this.day]));
-            this.day.count = this.day.detail.length;
-            this.$emit('reprocess', this.day);
         },
 
         toggleSelect() {

src/components/Timeline.vue

@@ -26,7 +26,7 @@
                     <Photo v-else
                             :data="photo" :rowHeight="rowHeight" :day="item.day"
                             @select="selectPhoto"
-                            @reprocess="processDay"
+                            @reprocess="deleteFromViewWithAnimation"
                             @clickImg="clickPhoto" />
                 </div>
             </div>
@@ -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) {
+            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();
         },