Pause/resume for lawnmower

resources/assets/js/annotations/annotatorContainer.vue

@@ -23,6 +23,8 @@ import {CrossOriginTiffError} from './stores/images.js';
 import {debounce} from '@/core/utils.js';
 import {handleErrorResponse} from '@/core/messages/store.js';
 import {urlParams as UrlParams} from '@/core/utils.js';
+import {LawnmowerSaveState} from './components/annotationCanvas/lawnmower.vue';
+import {useVolareMode} from './components/annotationCanvas/volare.js';
 
 const asyncAnnotationCanvas = defineAsyncComponent({
     loader: function () {
@@ -73,7 +75,6 @@ export default {
             mapResolution: undefined,
             selectedLabel: null,
             annotationMode: 'default',
-            focussedAnnotationIndex: null,
             // For lawnmower and sampling modes: When switching images, this determines
             // if the first (0) or the last (Infinity) image section/sampling location
             // should be shown.
@@ -89,13 +90,15 @@ export default {
             preferredUnit: 'auto',
             imagesArea: null,
             openTab: null,
-            userUpdatedVolareResolution: false,
             userId: null,
             crossOriginError: false,
             maybeCorsTiffError: false,
             imageFilenames: {},
             labelTrees: [],
             projectIds: [],
+            lawnmowerSaveState: "",
+            volare: null,
+            pauseLawnmowerAutomatically: false,
         };
     },
     provide() {
@@ -131,14 +134,8 @@ export default {
         selectedAnnotations() {
             return this.filteredAnnotations.filter((a) => a.selected);
         },
-        focussedAnnotation() {
-            return this.filteredAnnotations[this.focussedAnnotationIndex];
-        },
         isDefaultAnnotationMode() {
-            return this.annotationMode === 'default';
-        },
-        isVolareAnnotationMode() {
-            return this.annotationMode === 'volare';
+            return this.annotationMode === 'default' || this.annotationMode === 'volarePaused' || this.annotationMode === 'lawnmowerPaused';
         },
         isLawnmowerAnnotationMode() {
             return this.annotationMode === 'lawnmower';
@@ -206,20 +203,8 @@ export default {
                 return;
             }
 
-            if (this.isVolareAnnotationMode) {
-                if (this.focussedAnnotationIndex < (this.filteredAnnotations.length - 1)) {
-                    this.focussedAnnotationIndex++;
-                    return;
-                } else if (this.focussedAnnotationIndex === Infinity) {
-                    // This may happen if the volume has only one image and we can't
-                    // switch to the next image. Here, we want to go to the second
-                    // annotation of the image.
-                    this.focussedAnnotationIndex = Math.min(1, this.filteredAnnotations.length - 1);
-                } else {
-                    // Show the first annotation of the next image in this case, so
-                    // don't return.
-                    this.focussedAnnotationIndex = -Infinity;
-                }
+            if (this.volare.handleNextAnnotation()) {
+                return;
             } else if (this.isLawnmowerAnnotationMode) {
                 // This returns false if the image section can't be advanced (i.e.
                 // the last section is shown).
@@ -246,20 +231,8 @@ export default {
                 return;
             }
 
-            if (this.isVolareAnnotationMode) {
-                if (this.focussedAnnotationIndex > 0) {
-                    this.focussedAnnotationIndex--;
-                    return;
-                } else if (this.focussedAnnotationIndex === -Infinity) {
-                    // This may happen if the volume has only one image and we can't
-                    // switch to the next image. Here, we want to go to the second to
-                    // last annotation of the image.
-                    this.focussedAnnotationIndex = Math.max(this.filteredAnnotations.length - 2, 0);
-                } else {
-                    // Show the last annotation of the previous image in this case,
-                    // so don't return.
-                    this.focussedAnnotationIndex = Infinity;
-                }
+            if (this.volare.handlePreviousAnnotation()) {
+                return;
             } else if (this.isLawnmowerAnnotationMode) {
                 // This returns false if the image section can't be reversed (i.e.
                 // the first section is shown).
@@ -282,26 +255,6 @@ export default {
             // Show previous image.
             this.imageIndex = this.getPreviousIndex(this.imageIndex);
         },
-        maybeUpdateFocussedAnnotation() {
-            if (this.isVolareAnnotationMode) {
-                if (this.filteredAnnotations.length > 0) {
-                    if (this.focussedAnnotationIndex === Infinity) {
-                        // Show the last annotation if the previous image is shown.
-                        this.focussedAnnotationIndex = this.filteredAnnotations.length - 1;
-                    } else {
-                        // Show the first annotation if the next image is shown or
-                        // the annotation filter changed.
-                        this.focussedAnnotationIndex = 0;
-                    }
-                } else {
-                    // Show the whole image if there are no annotations.
-                    this.focussedAnnotationIndex = null;
-                    this.$refs.canvas.fitImage();
-                }
-            } else {
-                this.focussedAnnotationIndex = null;
-            }
-        },
         maybeUpdateShownImageSection() {
             if (this.isLawnmowerAnnotationMode) {
                 if (this.annotationModeCarry === Infinity) {
@@ -325,7 +278,6 @@ export default {
             }
         },
         maybeUpdateAnnotationMode(data) {
-            this.maybeUpdateFocussedAnnotation();
             this.maybeUpdateShownImageSection();
             this.maybeUpdateShownSampling(data);
         },
@@ -338,6 +290,9 @@ export default {
                 y: Math.round(viewport.center[1]),
             });
         },
+        handleMapMovestart() {
+            this.pauseLawnmowerAfterViewportChanged();
+        },
         // Handler for the select event fired by the global event bus.
         handleSelectAnnotation(annotation, shift) {
             // Handle the case where the second argument is an event object for
@@ -370,9 +325,6 @@ export default {
                 });
             }
         },
-        focusAnnotation(annotation, fast, keepResolution) {
-            this.$refs.canvas.focusAnnotation(annotation, fast, keepResolution);
-        },
         handleDetachAnnotationLabel(annotation, annotationLabel) {
             if (this.isEditor) {
                 if (annotation.labels.length > 1) {
@@ -411,13 +363,6 @@ export default {
                     .catch(handleErrorResponse);
             }
         },
-        selectAndFocusAnnotation(annotation, keepResolution) {
-            this.selectedAnnotations.forEach(function (a) {
-                a.selected = false;
-            });
-            annotation.selected = true;
-            this.focusAnnotation(annotation, true, keepResolution);
-        },
         handleFilter(filter) {
             this.annotationFilter = filter;
         },
@@ -471,7 +416,7 @@ export default {
                     confidence: 1,
                 };
 
-                if (this.isVolareAnnotationMode) {
+                if (this.annotationMode === 'volare') {
                     this.$refs.canvas.blinkAnnotation(annotation);
                 }
 
@@ -596,6 +541,31 @@ export default {
                     break;
             }
         },
+        enableAutomaticLawnmowerPausing() {
+            this.pauseLawnmowerAutomatically = true;
+        },
+        disableAutomaticLawnmowerPausing() {
+            this.pauseLawnmowerAutomatically = false;
+        },
+        pauseLawnmowerAfterViewportChanged() {
+            if (!this.isLawnmowerAnnotationMode || !this.pauseLawnmowerAutomatically) {
+                return;
+            }
+
+            this.$refs.annotationModesTab.pauseLawnmower();
+        },
+        pauseLawnmower(timestamp) {
+            this.$refs.annotationModesTab.pauseLawnmower(timestamp);
+        },
+        pauseVolare(timestamp) {
+            this.$refs.annotationModesTab.pauseVolare(timestamp);
+        },
+        showImageWithId(imageId) {
+            const index = this.imagesIds.indexOf(imageId);
+            if (index !== -1) {
+                this.imageIndex = index;
+            }
+        },
         handleAnnotationModeChange(mode, data) {
             this.annotationMode = mode;
             this.annotationModeCarry = null;
@@ -663,6 +633,9 @@ export default {
         openSidebarLabels() {
             this.openTab = 'labels';
         },
+        focusAnnotation(annotation, fast, keepResolution) {
+            this.$refs.canvas.focusAnnotation(annotation, fast, keepResolution);
+        }
     },
     watch: {
         async imageId(id) {
@@ -677,6 +650,11 @@ export default {
                 let [image, annotations] = await Promise.all(this.getImageAndAnnotationsPromises(id));
                 this.image = image;
                 this.annotations = annotations;
+
+                // Wait for the canvas to be updated, otherwise lawnmower mode
+                // may compute the current section using the old viewport
+                await this.$nextTick();
+
                 this.maybeUpdateAnnotationMode();
                 this.maybeShowTilingInProgressMessage();
             } catch (e) {
@@ -702,14 +680,6 @@ export default {
             // Twice the count because the next and previous images are cached.
             ImagesStore.setMaxCacheSize(count * 2);
         },
-        focussedAnnotation(annotation) {
-            if (annotation) {
-                this.selectAndFocusAnnotation(annotation, this.userUpdatedVolareResolution);
-            }
-        },
-        annotationFilter() {
-            this.maybeUpdateFocussedAnnotation();
-        },
         showScaleLine(show) {
             if (show) {
                 this.fetchImagesArea();
@@ -720,16 +690,6 @@ export default {
                 this.fetchImagesArea();
             }
         },
-        isVolareAnnotationMode(enabled) {
-            if (!enabled) {
-                this.userUpdatedVolareResolution = false;
-            }
-        },
-        mapResolution() {
-            if (this.isVolareAnnotationMode) {
-                this.userUpdatedVolareResolution = true;
-            }
-        },
         image(image) {
             this.crossOriginError = image?.crossOrigin;
         },
@@ -738,6 +698,15 @@ export default {
                 this.openTab = '';
             }
         },
+        annotationMode(newMode, oldMode) {
+            if (newMode === 'lawnmowerPaused') {
+                this.lawnmowerSaveState = LawnmowerSaveState.SAVE;
+            } else if (oldMode === 'lawnmowerPaused' && newMode === 'lawnmower') {
+                this.lawnmowerSaveState = LawnmowerSaveState.LOAD;
+            } else {
+                this.lawnmowerSaveState = LawnmowerSaveState.DISCARD;
+            }
+        }
     },
     created() {
         this.allImagesIds = biigle.$require('annotations.imagesIds');
@@ -789,7 +758,7 @@ export default {
                         // Use $nextTick so the annotationCanvas component has time to
                         // render the image.
                         this.$nextTick(
-                            () => this.selectAndFocusAnnotation(annotations[i])
+                            () => this.volare.selectAndFocusAnnotation(annotations[i])
                         );
                         return;
                     }
@@ -813,6 +782,19 @@ export default {
         Keyboard.on('C', this.selectLastAnnotation, 0, this.listenerSet);
 
         this.initLabelBot();
+
+        this.volare = useVolareMode({
+            filteredAnnotations: computed(() => this.filteredAnnotations),
+            selectedAnnotations: computed(() => this.selectedAnnotations),
+            focusAnnotationInCanvas: this.focusAnnotation,
+            fitImageInCanvas: (...args) => this.$refs.canvas.fitImage(...args),
+            annotationFilter: this.annotationFilter,
+            image: computed(() => this.image),
+            mapResolution: computed(() => this.mapResolution),
+            showImageWithId: this.showImageWithId,
+            annotationMode: computed(() => this.annotationMode),
+            restoreVolarePauseState: (timestamp) => this.$refs.annotationModesTab.pauseVolare(timestamp)
+        });
     },
 };
 </script>

resources/assets/js/annotations/components/annotationCanvas.vue

@@ -60,6 +60,7 @@ export default {
     template: '#annotation-canvas-template',
     emits: [
         'moveend',
+        'movestart',
         'update',
         'select',
         'previous',
@@ -910,6 +911,7 @@ export default {
 
         this.map.on('change:size', this.updateMapSize);
         this.map.on('moveend', this.updateMapView);
+        this.map.on('movestart', () => this.$emit('movestart'));
         this.map.on('pointermove', this.updateMousePosition);
 
         this.selectInteraction.on('select', this.handleFeatureSelect);