From 8abe79b256d8912c868ef3e62f903829d4713c07 Mon Sep 17 00:00:00 2001 From: yannik131 Date: Wed, 17 Jun 2026 13:17:05 +0200 Subject: [PATCH 01/34] Fixed lawnmower center section first bug --- resources/assets/js/annotations/annotatorContainer.vue | 5 +++++ .../assets/js/annotations/components/annotationCanvas.vue | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index ff5596dcf2..fde6ec2e9c 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -676,6 +676,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 + // could compute the current section using the old viewport + await this.$nextTick(); + this.maybeUpdateAnnotationMode(); this.maybeShowTilingInProgressMessage(); } catch (e) { diff --git a/resources/assets/js/annotations/components/annotationCanvas.vue b/resources/assets/js/annotations/components/annotationCanvas.vue index 884d9ae1b8..60d2b5f7e9 100644 --- a/resources/assets/js/annotations/components/annotationCanvas.vue +++ b/resources/assets/js/annotations/components/annotationCanvas.vue @@ -155,7 +155,7 @@ export default { }, draftAnnotationUsesLabelColor: { type: Boolean, - default: true, + default: true, }, }, data() { From 319d081d08cc66672f0587af887368e9612f20b9 Mon Sep 17 00:00:00 2001 From: yannik131 Date: Wed, 17 Jun 2026 16:57:20 +0200 Subject: [PATCH 02/34] Added playPause widget --- .../components/annotationModesTab.vue | 7 ++ .../assets/js/core/components/playPause.vue | 84 +++++++++++++++++++ .../show/tabs/annotationModes.blade.php | 9 +- 3 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 resources/assets/js/core/components/playPause.vue diff --git a/resources/assets/js/annotations/components/annotationModesTab.vue b/resources/assets/js/annotations/components/annotationModesTab.vue index 975d55f655..ce77cb528c 100644 --- a/resources/assets/js/annotations/components/annotationModesTab.vue +++ b/resources/assets/js/annotations/components/annotationModesTab.vue @@ -2,6 +2,8 @@ import Events from '@/core/events.js'; import Keyboard from '@/core/keyboard.js'; import PowerToggle from '@/core/components/powerToggle.vue'; +import PlayPause from '@/core/components/playPause.vue'; +import { PlayPauseState } from '@/core/components/playPause.vue'; import Settings from '../stores/settings.js'; import {urlParams as UrlParams} from '@/core/utils.js'; @@ -19,6 +21,7 @@ export default { ], components: { powerToggle: PowerToggle, + playPause: PlayPause }, data() { return { @@ -38,6 +41,7 @@ export default { randomSamplingNumber: 9, regularSamplingRows: 3, regularSamplingColumns: 3, + playPauseState: PlayPauseState.STOPPED, }; }, computed: { @@ -81,6 +85,9 @@ export default { emitCreateSample() { this.$emit('create-sample'); }, + handlePlayPauseStateTransition(target) { + this.playPauseState = target; + } }, watch: { mode(mode, oldMode) { diff --git a/resources/assets/js/core/components/playPause.vue b/resources/assets/js/core/components/playPause.vue new file mode 100644 index 0000000000..f4d5a74529 --- /dev/null +++ b/resources/assets/js/core/components/playPause.vue @@ -0,0 +1,84 @@ + + + \ No newline at end of file diff --git a/resources/views/annotations/show/tabs/annotationModes.blade.php b/resources/views/annotations/show/tabs/annotationModes.blade.php index 3b61240737..dedbe4219a 100644 --- a/resources/views/annotations/show/tabs/annotationModes.blade.php +++ b/resources/views/annotations/show/tabs/annotationModes.blade.php @@ -15,7 +15,14 @@
Lawnmower Mode
cycle through image sections
- + +
@can('add-annotation', $image)
From f2ddc1f94802b8bbc5a5274e6b573217b32a2bee Mon Sep 17 00:00:00 2001 From: yannik131 Date: Thu, 18 Jun 2026 15:30:56 +0200 Subject: [PATCH 03/34] Wiring of lawnmower states --- .../js/annotations/annotatorContainer.vue | 24 +++++++++++++ .../components/annotationCanvas/lawnmower.vue | 34 +++++++++++++++++++ .../components/annotationModesTab.vue | 19 +++++++++-- resources/views/annotations/show.blade.php | 2 ++ .../show/tabs/annotationModes.blade.php | 16 +++++---- 5 files changed, 86 insertions(+), 9 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index fde6ec2e9c..82ff10d828 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/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 { PlayPauseState } from '../core/components/playPause.vue'; +import { LawnmowerSaveState } from './components/annotationCanvas/lawnmower.vue'; const asyncAnnotationCanvas = defineAsyncComponent({ loader: function () { @@ -95,6 +97,8 @@ export default { imageFilenames: {}, labelTrees: [], projectIds: [], + currentLawnmowerState: PlayPauseState.STOPPED, + lawnmowerSaveState: "" }; }, provide() { @@ -595,7 +599,27 @@ export default { break; } }, + handleLawnmowerStateTransitionRequest(targetState) { + const transition = `${this.currentLawnmowerState}->${targetState}`; + + switch(transition) { + case 'playing->paused': + this.lawnmowerSaveState = LawnmowerSaveState.SAVE; + break; + case 'paused->playing': + this.lawnmowerSaveState = LawnmowerSaveState.LOAD; + break; + case 'paused->stopped': + this.lawnmowerSaveState = LawnmowerSaveState.DISCARD; + break; + } + + this.currentLawnmowerState = targetState; + }, handleAnnotationModeChange(mode, data) { + if (mode !== 'default' && mode !== 'lawnmower') { + this.handleLawnmowerStateTransitionRequest(PlayPauseState.STOPPED); + } this.annotationMode = mode; this.annotationModeCarry = null; this.maybeUpdateAnnotationMode(data); diff --git a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue index 3127c28636..45ce734ca3 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue +++ b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue @@ -1,10 +1,24 @@ diff --git a/resources/assets/js/annotations/components/annotationModesTab.vue b/resources/assets/js/annotations/components/annotationModesTab.vue index ce77cb528c..d43ffb2f2c 100644 --- a/resources/assets/js/annotations/components/annotationModesTab.vue +++ b/resources/assets/js/annotations/components/annotationModesTab.vue @@ -13,11 +13,18 @@ import {urlParams as UrlParams} from '@/core/utils.js'; * @type {Object} */ export default { + props: { + currentLawnmowerState: { + type: String, + required: true + }, + }, template: '#annotation-modes-tab-template', emits: [ 'attach-label', 'change', 'create-sample', + 'lawnmowerStateTransitionRequested' ], components: { powerToggle: PowerToggle, @@ -41,7 +48,6 @@ export default { randomSamplingNumber: 9, regularSamplingRows: 3, regularSamplingColumns: 3, - playPauseState: PlayPauseState.STOPPED, }; }, computed: { @@ -85,8 +91,8 @@ export default { emitCreateSample() { this.$emit('create-sample'); }, - handlePlayPauseStateTransition(target) { - this.playPauseState = target; + handleLawnmowerStateTransitionRequest(targetState) { + this.$emit('lawnmowerStateTransitionRequested', targetState); } }, watch: { @@ -132,6 +138,13 @@ export default { regularSamplingColumns(number) { Settings.set('regularSamplingColumns', number); }, + currentLawnmowerState(newState) { + if (newState === PlayPauseState.PLAYING) { + this.startLawnmower(); + } else if (newState === PlayPauseState.PAUSED) { + this.resetMode(); + } + } }, created() { this.restoreKeys.forEach((key) => this[key] = Settings.get(key)); diff --git a/resources/views/annotations/show.blade.php b/resources/views/annotations/show.blade.php index 18ec249ce4..a603b56c07 100644 --- a/resources/views/annotations/show.blade.php +++ b/resources/views/annotations/show.blade.php @@ -100,6 +100,7 @@ :focused-popup-key="focusedPopupKey" :labelbot-timeout="labelbotTimeout" :draft-annotation-uses-label-color="draftAnnotationUsesLabelColor" + :lawnmower-save-state="lawnmowerSaveState" v-on:change-labelbot-focused-popup="changeLabelbotFocusedPopup" v-on:close-labelbot-popup="closeLabelbotPopup" v-on:moveend="handleMapMoveend" @@ -115,6 +116,7 @@ v-on:measuring="fetchImagesArea" v-on:requires-selected-label="handleRequiresSelectedLabel" v-on:is-invalid-shape="handleInvalidShape" + v-on:lawnmower-state-transition-requested="handleLawnmowerStateTransitionRequest" ref="canvas" >
diff --git a/resources/views/annotations/show/tabs/annotationModes.blade.php b/resources/views/annotations/show/tabs/annotationModes.blade.php index dedbe4219a..ada270b087 100644 --- a/resources/views/annotations/show/tabs/annotationModes.blade.php +++ b/resources/views/annotations/show/tabs/annotationModes.blade.php @@ -1,5 +1,10 @@ - + @push('scripts') @@ -16,13 +21,12 @@
Lawnmower Mode
cycle through image sections
-
@can('add-annotation', $image)
From e179513dda26505c7c7abcc360faa45b27c89dba Mon Sep 17 00:00:00 2001 From: yannik131 Date: Thu, 18 Jun 2026 16:46:12 +0200 Subject: [PATCH 04/34] play/pause for lawnmower works --- .../js/annotations/annotatorContainer.vue | 6 ++ .../components/annotationCanvas/lawnmower.vue | 59 ++++++++++++++++++- resources/views/annotations/show.blade.php | 1 + 3 files changed, 64 insertions(+), 2 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index 82ff10d828..842505cbd0 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -616,6 +616,12 @@ export default { this.currentLawnmowerState = targetState; }, + restoreLawnmowerImage(imageId) { + const index = this.imagesIds.indexOf(imageId); + if (index !== -1) { + this.imageIndex = index; + } + }, handleAnnotationModeChange(mode, data) { if (mode !== 'default' && mode !== 'lawnmower') { this.handleLawnmowerStateTransitionRequest(PlayPauseState.STOPPED); diff --git a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue index 45ce734ca3..6226e07b10 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue +++ b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue @@ -13,6 +13,9 @@ export const LawnmowerSaveState = Object.freeze({ * @type {Object} */ export default { + emits: [ + 'restore-lawnmower-image', + ], props: { lawnmowerSaveState: { type: String, @@ -26,7 +29,8 @@ export default { imageSection: [0, 0], // Actual center point of the current image section. imageSectionCenter: [0, 0], - lawnmowerState: PlayPauseState.STOPPED + lawnmowerState: PlayPauseState.STOPPED, + pendingLawnmowerState: null }; }, computed: { @@ -133,11 +137,57 @@ export default { return this.showImageSection([0, this.imageSection[1] + 1]); } }, + getLawnmowerStorageKey() { + const volumeId = biigle.$require('annotations.volumeId'); + return `lawnmower-state-${volumeId}`; + }, saveCurrentLawnmowerState() { + const view = this.map.getView(); + const state = { + imageId: this.image.id, + imageSection: [...this.imageSection], + resolution: view.getResolution(), + }; + + localStorage.setItem( + this.getLawnmowerStorageKey(), + JSON.stringify(state) + ); }, loadSavedLawnmowerState() { + const raw = localStorage.getItem(this.getLawnmowerStorageKey()); + if (!raw) { + return; + } + + try { + this.pendingLawnmowerState = JSON.parse(raw); + } catch { + this.discardSavedLawnmowerState(); + return; + } + + if (this.pendingLawnmowerState.imageId !== this.image?.id) { + this.$emit('restore-lawnmower-image', this.pendingLawnmowerState.imageId); + return; + } + + this.applyPendingLawnmowerState(); + }, + applyPendingLawnmowerState() { + const state = this.pendingLawnmowerState; + if (!state || !this.image || state.imageId !== this.image.id) { + return; + } + + const view = this.map.getView(); + view.setResolution(state.resolution); + this.showImageSection(state.imageSection); + this.pendingLawnmowerState = null; }, discardSavedLawnmowerState() { + localStorage.removeItem(this.getLawnmowerStorageKey()); + this.pendingLawnmowerState = null; } }, watch: { @@ -167,6 +217,11 @@ export default { this.showImageSection(nearestStep); }, + image() { + if (this.pendingLawnmowerState) { + this.$nextTick(() => this.applyPendingLawnmowerState()); + } + }, lawnmowerSaveState(newState) { switch(newState) { case LawnmowerSaveState.SAVE: @@ -176,7 +231,7 @@ export default { this.loadSavedLawnmowerState(); break; case LawnmowerSaveState.DISCARD: - this.discardSavedLawnmowerState; + this.discardSavedLawnmowerState(); break; } } diff --git a/resources/views/annotations/show.blade.php b/resources/views/annotations/show.blade.php index a603b56c07..cc8c666b07 100644 --- a/resources/views/annotations/show.blade.php +++ b/resources/views/annotations/show.blade.php @@ -117,6 +117,7 @@ v-on:requires-selected-label="handleRequiresSelectedLabel" v-on:is-invalid-shape="handleInvalidShape" v-on:lawnmower-state-transition-requested="handleLawnmowerStateTransitionRequest" + v-on:restore-lawnmower-image="restoreLawnmowerImage" ref="canvas" >
From 5f732cbdb643c7ffedf93015137e518a2cf17088 Mon Sep 17 00:00:00 2001 From: yannik131 Date: Thu, 18 Jun 2026 16:47:35 +0200 Subject: [PATCH 05/34] Renamed play/pause states --- .../js/annotations/annotatorContainer.vue | 4 ++-- .../components/annotationCanvas/lawnmower.vue | 2 +- .../components/annotationModesTab.vue | 2 +- .../assets/js/core/components/playPause.vue | 20 +++++++++---------- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index 842505cbd0..fa570d42c6 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -97,7 +97,7 @@ export default { imageFilenames: {}, labelTrees: [], projectIds: [], - currentLawnmowerState: PlayPauseState.STOPPED, + currentLawnmowerState: PlayPauseState.INACTIVE, lawnmowerSaveState: "" }; }, @@ -624,7 +624,7 @@ export default { }, handleAnnotationModeChange(mode, data) { if (mode !== 'default' && mode !== 'lawnmower') { - this.handleLawnmowerStateTransitionRequest(PlayPauseState.STOPPED); + this.handleLawnmowerStateTransitionRequest(PlayPauseState.INACTIVE); } this.annotationMode = mode; this.annotationModeCarry = null; diff --git a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue index 6226e07b10..bbc7e76503 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue +++ b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue @@ -29,7 +29,7 @@ export default { imageSection: [0, 0], // Actual center point of the current image section. imageSectionCenter: [0, 0], - lawnmowerState: PlayPauseState.STOPPED, + lawnmowerState: PlayPauseState.INACTIVE, pendingLawnmowerState: null }; }, diff --git a/resources/assets/js/annotations/components/annotationModesTab.vue b/resources/assets/js/annotations/components/annotationModesTab.vue index d43ffb2f2c..07c7cae6fd 100644 --- a/resources/assets/js/annotations/components/annotationModesTab.vue +++ b/resources/assets/js/annotations/components/annotationModesTab.vue @@ -139,7 +139,7 @@ export default { Settings.set('regularSamplingColumns', number); }, currentLawnmowerState(newState) { - if (newState === PlayPauseState.PLAYING) { + if (newState === PlayPauseState.ACTIVE) { this.startLawnmower(); } else if (newState === PlayPauseState.PAUSED) { this.resetMode(); diff --git a/resources/assets/js/core/components/playPause.vue b/resources/assets/js/core/components/playPause.vue index f4d5a74529..a7c1b16481 100644 --- a/resources/assets/js/core/components/playPause.vue +++ b/resources/assets/js/core/components/playPause.vue @@ -19,13 +19,13 @@ diff --git a/resources/assets/js/annotations/components/annotationCanvas/volare.js b/resources/assets/js/annotations/components/annotationCanvas/volare.js new file mode 100644 index 0000000000..576a86d434 --- /dev/null +++ b/resources/assets/js/annotations/components/annotationCanvas/volare.js @@ -0,0 +1,119 @@ +import { ref, computed, watch } from 'vue'; +import { required } from '@/utils.js'; + + +export function useVolareMode({ + filteredAnnotations = required('filteredAnnotations'), + selectedAnnotations = required('selectedAnnotations'), + focusAnnotationInCanvas = required('focusAnnotationInCanvas'), + fitImageInCanvas = required('fitImageInCanvas'), + volareModeIsActive = required('volareModeIsActive'), + annotationFilter = required('annotationFilter') +}) { + const focussedAnnotationIndex = ref(null); + const userUpdateVolareResolution = ref(false); + + const focussedAnnotation = computed(() => { + return filteredAnnotations.value[focussedAnnotationIndex.value]; + }); + + function focusAnnotation(annotation, fast, keepResolution) { + focusAnnotationInCanvas(annotation, fast, keepResolution); + } + + function selectAndFocusAnnotation(annotation, keepResolution = false) { + selectedAnnotations.value.forEach(a => { + a.selected = false; + }); + annotation.selected = true; + focusAnnotationInCanvas(annotation, true, keepResolution); + } + + function updateFocussedAnnotation() { + if (!volareModeIsActive.value) { + focussedAnnotationIndex.value = null; + return; + } else if (filteredAnnotations.value.length === 0) { + // Show the whole image if there are no annotations. + focussedAnnotationIndex.value = null; + fitImageInCanvas(); + return; + } + + if (focussedAnnotationIndex.value === Infinity) { + // Show the last annotation if the previous image is shown. + focussedAnnotationIndex.value = filteredAnnotations.value.length - 1; + } else { + // Show the first annotation if the next image is shown or + // the annotation filter changed. + focussedAnnotationIndex.value = 0; + } + } + + function handleNextAnnotation() { + if (!volareModeIsActive.value) { + return false; + } + + if (focussedAnnotationIndex.value < (filteredAnnotations.value.length - 1)) { + focussedAnnotationIndex.value++; + return true; + } else if (focussedAnnotationIndex.value === 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. + focussedAnnotationIndex.value = Math.min(1, filteredAnnotations.value.length - 1); + } else { + // Show the first annotation of the next image in this case, so + // don't return. + focussedAnnotationIndex.value = -Infinity; + } + + return false; + } + + function handlePreviousAnnotation() { + if (!volareModeIsActive.value) { + return false; + } + + if (focussedAnnotationIndex.value > 0) { + focussedAnnotationIndex.value--; + return true; + } else if (focussedAnnotationIndex.value === -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. + focussedAnnotationIndex.value = Math.max(filteredAnnotations.value.length - 2, 0); + } else { + // Show the last annotation of the previous image in this case, + // so don't return. + focussedAnnotationIndex.value = Infinity; + } + + return false; + } + + watch(focussedAnnotation, (annotation) => { + if (annotation) { + selectAndFocusAnnotation(annotation, userUpdateVolareResolution.value); + } + }); + watch(() => annotationFilter?.value, updateFocussedAnnotation); + watch(volareModeIsActive, (enabled) => { + if (!enabled) { + userUpdateVolareResolution.value = false; + } + }) + + return { + focussedAnnotationIndex, + focussedAnnotation, + focusAnnotation, + userUpdateVolareResolution, + selectAndFocusAnnotation, + updateFocussedAnnotation, + handleNextAnnotation, + handlePreviousAnnotation, + }; +} \ No newline at end of file diff --git a/resources/assets/js/utils.js b/resources/assets/js/utils.js index da7b47efdc..1c639dc7aa 100644 --- a/resources/assets/js/utils.js +++ b/resources/assets/js/utils.js @@ -62,4 +62,8 @@ let declare = function (namespace, object) { return object; }; -export {mount, require, declare}; +function required(name) { + throw new Error(`Missing required parameter '${name}'`); +} + +export {mount, require, declare, required}; From 1f6e23516dff1ea312ac00d7d05623be8ff2b633 Mon Sep 17 00:00:00 2001 From: yannik131 Date: Fri, 19 Jun 2026 17:37:48 +0200 Subject: [PATCH 17/34] Moved more code to volare component --- .../js/annotations/annotatorContainer.vue | 20 +------------- .../components/annotationCanvas/volare.js | 27 ++++++++++++++----- 2 files changed, 22 insertions(+), 25 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index d94ef6f100..45dddd2c2b 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -777,25 +777,7 @@ export default { volareModeIsActive: computed(() => this.isVolareAnnotationMode), annotationFilter: this.annotationFilter }); - - Events.on('annotations.focus', this.volare.focusAnnotation); - - if (UrlParams.get('annotation')) { - let id = parseInt(UrlParams.get('annotation')); - Events.once('images.change', () => { - let annotations = this.annotations; - for (let i = annotations.length - 1; i >= 0; i--) { - if (annotations[i].id === id) { - // Use $nextTick so the annotationCanvas component has time to - // render the image. - this.$nextTick( - () => this.volare.selectAndFocusAnnotation(annotations[i]) - ); - return; - } - } - }); - } + this.volare.registerEvents(this.annotations); } }; diff --git a/resources/assets/js/annotations/components/annotationCanvas/volare.js b/resources/assets/js/annotations/components/annotationCanvas/volare.js index 576a86d434..e3f921ce01 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/volare.js +++ b/resources/assets/js/annotations/components/annotationCanvas/volare.js @@ -1,5 +1,7 @@ import { ref, computed, watch } from 'vue'; import { required } from '@/utils.js'; +import { urlParams as UrlParams } from '@/core/utils.js'; +import Events from '@/core/events.js'; export function useVolareMode({ @@ -17,10 +19,6 @@ export function useVolareMode({ return filteredAnnotations.value[focussedAnnotationIndex.value]; }); - function focusAnnotation(annotation, fast, keepResolution) { - focusAnnotationInCanvas(annotation, fast, keepResolution); - } - function selectAndFocusAnnotation(annotation, keepResolution = false) { selectedAnnotations.value.forEach(a => { a.selected = false; @@ -94,6 +92,23 @@ export function useVolareMode({ return false; } + function registerEvents(annotations) { + if (UrlParams.get('annotation')) { + const id = parseInt(UrlParams.get('annotation')); + Events.once('images.change', () => { + const annotation = annotations.value.find(a => a.id === id); + if (!annotation) { + return; + } + nextTick(() => { + selectAndFocusAnnotation(annotation); + }); + }); + } + + Events.on('annotations.focus', focusAnnotationInCanvas); + } + watch(focussedAnnotation, (annotation) => { if (annotation) { selectAndFocusAnnotation(annotation, userUpdateVolareResolution.value); @@ -104,16 +119,16 @@ export function useVolareMode({ if (!enabled) { userUpdateVolareResolution.value = false; } - }) + }); return { focussedAnnotationIndex, focussedAnnotation, - focusAnnotation, userUpdateVolareResolution, selectAndFocusAnnotation, updateFocussedAnnotation, handleNextAnnotation, handlePreviousAnnotation, + registerEvents }; } \ No newline at end of file From f866ab56d2ef19af76538ed178d6994015d8be00 Mon Sep 17 00:00:00 2001 From: yannik131 Date: Fri, 19 Jun 2026 18:14:58 +0200 Subject: [PATCH 18/34] Implemented load/save for volare --- .../js/annotations/annotatorContainer.vue | 29 ++++++++++-- .../components/annotationCanvas/volare.js | 46 ++++++++++++------- resources/views/annotations/show.blade.php | 2 +- 3 files changed, 56 insertions(+), 21 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index 45dddd2c2b..41e265c312 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -18,7 +18,7 @@ import SettingsTab from './components/settingsTab.vue'; import Sidebar from '@/core/components/sidebar.vue'; import SidebarTab from '@/core/components/sidebarTab.vue'; import VolumeImageAreaApi from './api/volumes.js'; -import {computed, defineAsyncComponent} from 'vue' +import {computed, defineAsyncComponent, watch} from 'vue' import {CrossOriginTiffError} from './stores/images.js'; import {debounce} from '@/core/utils.js'; import {handleErrorResponse} from '@/core/messages/store.js'; @@ -559,7 +559,7 @@ export default { this.currentLawnmowerState = targetState; }, - restoreLawnmowerImage(imageId) { + loadImageWithId(imageId) { const index = this.imagesIds.indexOf(imageId); if (index !== -1) { this.imageIndex = index; @@ -750,6 +750,26 @@ export default { Events.on('annotations.deselect', this.handleDeselectAnnotation); Events.on('annotations.detachLabel', this.handleDetachAnnotationLabel); Events.on('annotations.delete', this.handleDeleteAnnotation); + Events.on('annotations.focus', this.focusAnnotation); + + // TODO Are these necessary? Should they be moved to the new volare composable? + + if (UrlParams.get('annotation')) { + let id = parseInt(UrlParams.get('annotation')); + Events.once('images.change', () => { + let annotations = this.annotations; + for (let i = annotations.length - 1; i >= 0; i--) { + if (annotations[i].id === id) { + // Use $nextTick so the annotationCanvas component has time to + // render the image. + this.$nextTick( + () => this.volare.selectAndFocusAnnotation(annotations[i]) + ); + return; + } + } + }); + } if (Settings.has('openTab')) { let openTab = Settings.get('openTab'); @@ -775,9 +795,10 @@ export default { focusAnnotationInCanvas: this.focusAnnotation, fitImageInCanvas: (...args) => this.$refs.canvas.fitImage(...args), volareModeIsActive: computed(() => this.isVolareAnnotationMode), - annotationFilter: this.annotationFilter + annotationFilter: this.annotationFilter, + image: computed(() => this.image) }); - this.volare.registerEvents(this.annotations); + watch(this.volare.requestedImageId, this.loadImageWithId); } }; diff --git a/resources/assets/js/annotations/components/annotationCanvas/volare.js b/resources/assets/js/annotations/components/annotationCanvas/volare.js index e3f921ce01..29d5b6601f 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/volare.js +++ b/resources/assets/js/annotations/components/annotationCanvas/volare.js @@ -1,4 +1,4 @@ -import { ref, computed, watch } from 'vue'; +import { ref, computed, watch, nextTick } from 'vue'; import { required } from '@/utils.js'; import { urlParams as UrlParams } from '@/core/utils.js'; import Events from '@/core/events.js'; @@ -10,10 +10,14 @@ export function useVolareMode({ focusAnnotationInCanvas = required('focusAnnotationInCanvas'), fitImageInCanvas = required('fitImageInCanvas'), volareModeIsActive = required('volareModeIsActive'), - annotationFilter = required('annotationFilter') + annotationFilter = required('annotationFilter'), + image = required('image') }) { const focussedAnnotationIndex = ref(null); const userUpdateVolareResolution = ref(false); + const requestedImageId = ref(null); + let pendingVolareState = null; + let savedState = null; const focussedAnnotation = computed(() => { return filteredAnnotations.value[focussedAnnotationIndex.value]; @@ -92,21 +96,26 @@ export function useVolareMode({ return false; } - function registerEvents(annotations) { - if (UrlParams.get('annotation')) { - const id = parseInt(UrlParams.get('annotation')); - Events.once('images.change', () => { - const annotation = annotations.value.find(a => a.id === id); - if (!annotation) { - return; - } - nextTick(() => { - selectAndFocusAnnotation(annotation); - }); - }); + function saveState() { + savedState = { + imageId: image.value.id, + focussedAnnotationIndex: focussedAnnotationIndex.value, + }; + } + + function loadState() { + if (!savedState) { + return; + } else if (savedState.imageId !== image.value.id) { + requestedImageId.value = savedState.imageId; + return; } - Events.on('annotations.focus', focusAnnotationInCanvas); + focussedAnnotationIndex.value = null; + nextTick(() => { + focussedAnnotationIndex.value = savedState.focussedAnnotationIndex; + savedState = null; + }); } watch(focussedAnnotation, (annotation) => { @@ -120,6 +129,9 @@ export function useVolareMode({ userUpdateVolareResolution.value = false; } }); + watch(() => image?.value, () => { + nextTick(loadState); + }); return { focussedAnnotationIndex, @@ -129,6 +141,8 @@ export function useVolareMode({ updateFocussedAnnotation, handleNextAnnotation, handlePreviousAnnotation, - registerEvents + requestedImageId, + saveState, + loadState, }; } \ No newline at end of file diff --git a/resources/views/annotations/show.blade.php b/resources/views/annotations/show.blade.php index e353a4c75c..3ccd61c4bd 100644 --- a/resources/views/annotations/show.blade.php +++ b/resources/views/annotations/show.blade.php @@ -116,7 +116,7 @@ v-on:measuring="fetchImagesArea" v-on:requires-selected-label="handleRequiresSelectedLabel" v-on:is-invalid-shape="handleInvalidShape" - v-on:restore-lawnmower-image="restoreLawnmowerImage" + v-on:restore-lawnmower-image="loadImageWithId" ref="canvas" > From b27e065d53a9642ad4e169400583846d402ded83 Mon Sep 17 00:00:00 2001 From: yannik131 Date: Fri, 19 Jun 2026 18:18:37 +0200 Subject: [PATCH 19/34] TODO for removing watchers maybe --- .../assets/js/annotations/components/annotationCanvas/volare.js | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/assets/js/annotations/components/annotationCanvas/volare.js b/resources/assets/js/annotations/components/annotationCanvas/volare.js index 29d5b6601f..5a3b1584fe 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/volare.js +++ b/resources/assets/js/annotations/components/annotationCanvas/volare.js @@ -111,6 +111,7 @@ export function useVolareMode({ return; } + // TODO Instead of this hack to trigger the watcher maybe use direct calls and don't use watchers in this composable focussedAnnotationIndex.value = null; nextTick(() => { focussedAnnotationIndex.value = savedState.focussedAnnotationIndex; From befcb4be5f35f9124f281e5eb44cd8ea69e8dffb Mon Sep 17 00:00:00 2001 From: yannik131 Date: Sat, 20 Jun 2026 14:15:20 +0200 Subject: [PATCH 20/34] Fixing volare pause/resume bugs --- .../js/annotations/annotatorContainer.vue | 38 ++----- .../components/annotationCanvas/volare.js | 104 ++++++++++++------ .../components/annotationModesTab.vue | 42 ++++++- resources/views/annotations/show.blade.php | 2 +- .../show/tabs/annotationModes.blade.php | 19 ++-- 5 files changed, 129 insertions(+), 76 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index 41e265c312..129d254a3c 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -90,7 +90,6 @@ export default { draftAnnotationUsesLabelColor: true, imagesArea: null, openTab: null, - userUpdatedVolareResolution: false, userId: null, crossOriginError: false, maybeCorsTiffError: false, @@ -98,7 +97,8 @@ export default { labelTrees: [], projectIds: [], currentLawnmowerState: PlayPauseState.INACTIVE, - lawnmowerSaveState: "" + lawnmowerSaveState: "", + volare: null, }; }, provide() { @@ -137,9 +137,6 @@ export default { isDefaultAnnotationMode() { return this.annotationMode === 'default'; }, - isVolareAnnotationMode() { - return this.annotationMode === 'volare'; - }, isLawnmowerAnnotationMode() { return this.annotationMode === 'lawnmower'; }, @@ -281,7 +278,6 @@ export default { } }, maybeUpdateAnnotationMode(data) { - this.volare.updateFocussedAnnotation(); this.maybeUpdateShownImageSection(); this.maybeUpdateShownSampling(data); }, @@ -417,7 +413,7 @@ export default { confidence: 1, }; - if (this.isVolareAnnotationMode) { + if (this.volare.volareModeIsActive) { this.$refs.canvas.blinkAnnotation(annotation); } @@ -545,7 +541,7 @@ export default { setLawnmowerState(targetState) { const transition = `${this.currentLawnmowerState}->${targetState}`; - switch(transition) { + switch (transition) { case 'active->paused': this.lawnmowerSaveState = LawnmowerSaveState.SAVE; break; @@ -559,21 +555,13 @@ export default { this.currentLawnmowerState = targetState; }, - loadImageWithId(imageId) { + showImageWithId(imageId) { const index = this.imagesIds.indexOf(imageId); if (index !== -1) { this.imageIndex = index; } }, - updateLawnmowerState(oldMode, newMode) { - // Switching from lawnmower to default is caused by pausing, - // switching to a different mode inactivates lawnmower - if (oldMode === "lawnmower" && newMode !== 'default') { - this.setLawnmowerState(PlayPauseState.INACTIVE); - } - }, handleAnnotationModeChange(mode, data) { - this.updateLawnmowerState(this.annotationMode, mode); this.annotationMode = mode; this.annotationModeCarry = null; this.maybeUpdateAnnotationMode(data); @@ -697,11 +685,6 @@ export default { this.fetchImagesArea(); } }, - mapResolution() { - if (this.isVolareAnnotationMode) { - this.userUpdatedVolareResolution = true; - } - }, image(image) { this.crossOriginError = image?.crossOrigin; }, @@ -787,18 +770,17 @@ export default { Keyboard.on('C', this.selectLastAnnotation, 0, this.listenerSet); this.initLabelBot(); - }, - mounted() { + this.volare = useVolareMode({ filteredAnnotations: computed(() => this.filteredAnnotations), selectedAnnotations: computed(() => this.selectedAnnotations), focusAnnotationInCanvas: this.focusAnnotation, fitImageInCanvas: (...args) => this.$refs.canvas.fitImage(...args), - volareModeIsActive: computed(() => this.isVolareAnnotationMode), annotationFilter: this.annotationFilter, - image: computed(() => this.image) + image: computed(() => this.image), + mapResolution: computed(() => this.mapResolution), + showImageWithId: this.showImageWithId, }); - watch(this.volare.requestedImageId, this.loadImageWithId); - } + }, }; diff --git a/resources/assets/js/annotations/components/annotationCanvas/volare.js b/resources/assets/js/annotations/components/annotationCanvas/volare.js index 5a3b1584fe..97f6eb59ad 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/volare.js +++ b/resources/assets/js/annotations/components/annotationCanvas/volare.js @@ -1,7 +1,8 @@ -import { ref, computed, watch, nextTick } from 'vue'; +import { ref, computed, watch, nextTick, readonly } from 'vue'; import { required } from '@/utils.js'; import { urlParams as UrlParams } from '@/core/utils.js'; import Events from '@/core/events.js'; +import { PlayPauseState } from '@/core/components/playPause.vue'; export function useVolareMode({ @@ -9,20 +10,25 @@ export function useVolareMode({ selectedAnnotations = required('selectedAnnotations'), focusAnnotationInCanvas = required('focusAnnotationInCanvas'), fitImageInCanvas = required('fitImageInCanvas'), - volareModeIsActive = required('volareModeIsActive'), annotationFilter = required('annotationFilter'), - image = required('image') + image = required('image'), + mapResolution = required('mapResolution'), + showImageWithId = required('showImageWithId'), }) { const focussedAnnotationIndex = ref(null); - const userUpdateVolareResolution = ref(false); - const requestedImageId = ref(null); - let pendingVolareState = null; - let savedState = null; + const resolutionWasChangedByUser = ref(false); + const state = ref(PlayPauseState.INACTIVE); + let resumeContext = null; + let resuming = false; const focussedAnnotation = computed(() => { return filteredAnnotations.value[focussedAnnotationIndex.value]; }); + const volareModeIsActive = computed(() => { + return state.value === PlayPauseState.ACTIVE; + }); + function selectAndFocusAnnotation(annotation, keepResolution = false) { selectedAnnotations.value.forEach(a => { a.selected = false; @@ -32,7 +38,9 @@ export function useVolareMode({ } function updateFocussedAnnotation() { - if (!volareModeIsActive.value) { + if (resumeContext) { + return; + } else if (!volareModeIsActive.value) { focussedAnnotationIndex.value = null; return; } else if (filteredAnnotations.value.length === 0) { @@ -66,8 +74,7 @@ export function useVolareMode({ // annotation of the image. focussedAnnotationIndex.value = Math.min(1, filteredAnnotations.value.length - 1); } else { - // Show the first annotation of the next image in this case, so - // don't return. + // Show the first annotation of the next image in this case focussedAnnotationIndex.value = -Infinity; } @@ -88,62 +95,93 @@ export function useVolareMode({ // last annotation of the image. focussedAnnotationIndex.value = Math.max(filteredAnnotations.value.length - 2, 0); } else { - // Show the last annotation of the previous image in this case, - // so don't return. + // Show the last annotation of the previous image in this case focussedAnnotationIndex.value = Infinity; } return false; } - function saveState() { - savedState = { + function setState(targetState) { + const transition = `${state.value}->${targetState}`; + + switch (transition) { + case 'active->paused': + pause(); + break; + case 'paused->active': + resume(); + break; + default: + resumeContext = null; + } + + state.value = targetState; + } + + function pause() { + resumeContext = { imageId: image.value.id, focussedAnnotationIndex: focussedAnnotationIndex.value, }; } - function loadState() { - if (!savedState) { + function resume() { + if (!resumeContext) { return; - } else if (savedState.imageId !== image.value.id) { - requestedImageId.value = savedState.imageId; + } + + resuming = true; + if (resumeContext.imageId !== image.value.id) { + showImageWithId(resumeContext.imageId); return; } - // TODO Instead of this hack to trigger the watcher maybe use direct calls and don't use watchers in this composable + const savedIndex = resumeContext.focussedAnnotationIndex; + resumeContext = null; + resuming = false; + focussedAnnotationIndex.value = null; nextTick(() => { - focussedAnnotationIndex.value = savedState.focussedAnnotationIndex; - savedState = null; - }); + // TODO Handle changes of filtered annotations while volare is active or paused + if (savedIndex !== null && savedIndex < filteredAnnotations.value.length) { + focussedAnnotationIndex.value = savedIndex; + } + }) } watch(focussedAnnotation, (annotation) => { - if (annotation) { - selectAndFocusAnnotation(annotation, userUpdateVolareResolution.value); + if (volareModeIsActive.value && annotation) { + selectAndFocusAnnotation(annotation, resolutionWasChangedByUser.value); } }); watch(() => annotationFilter?.value, updateFocussedAnnotation); watch(volareModeIsActive, (enabled) => { if (!enabled) { - userUpdateVolareResolution.value = false; + resolutionWasChangedByUser.value = false; + } else { + updateFocussedAnnotation(); } }); watch(() => image?.value, () => { - nextTick(loadState); + if (resuming) { + nextTick(resume); + } else if (volareModeIsActive.value) { + nextTick(updateFocussedAnnotation); + } + }); + watch(mapResolution, () => { + if (volareModeIsActive.value) { + resolutionWasChangedByUser.value = true; + } }); return { - focussedAnnotationIndex, - focussedAnnotation, - userUpdateVolareResolution, selectAndFocusAnnotation, - updateFocussedAnnotation, handleNextAnnotation, handlePreviousAnnotation, - requestedImageId, - saveState, - loadState, + setState, + volareModeIsActive, + state: readonly(state), }; } \ No newline at end of file diff --git a/resources/assets/js/annotations/components/annotationModesTab.vue b/resources/assets/js/annotations/components/annotationModesTab.vue index f6b95c187f..643ec6e52c 100644 --- a/resources/assets/js/annotations/components/annotationModesTab.vue +++ b/resources/assets/js/annotations/components/annotationModesTab.vue @@ -18,13 +18,18 @@ export default { type: String, required: true }, + currentVolareState: { + type: String, + required: true + }, }, template: '#annotation-modes-tab-template', emits: [ 'attach-label', 'change', 'create-sample', - 'lawnmowerStateRequested' + 'lawnmowerStateRequested', + 'volare-state-requested', ], components: { powerToggle: PowerToggle, @@ -77,13 +82,30 @@ export default { startRegularSampling() { this.setMode('regularSampling'); }, - setMode(mode) { - if (this.modes.indexOf(mode) !== -1) { - this.mode = mode; + deactivateResumableModes(oldMode, newMode) { + // Switching from lawnmower/volare to default is caused by pausing and does not deactivate the mode + if (newMode === 'default') { + return; + } + + if (oldMode === 'lawnmower' || this.currentLawnmowerState === PlayPauseState.PAUSED && newMode !== 'lawnmower') { + this.emitLawnmowerStateRequested(PlayPauseState.INACTIVE); + } else if (oldMode === 'volare' || this.currentVolareState === PlayPauseState.PAUSED && newMode !== 'volare') { + this.emitVolareStateRequested(PlayPauseState.INACTIVE); } }, + setMode(newMode) { + if (this.modes.indexOf(newMode) === -1) { + return; + } + + const oldMode = this.mode; + this.mode = newMode; + + this.deactivateResumableModes(oldMode, newMode); + }, resetMode() { - this.mode = 'default'; + this.setMode('default'); }, emitAttachLabel() { this.$emit('attach-label'); @@ -93,6 +115,9 @@ export default { }, emitLawnmowerStateRequested(targetState) { this.$emit('lawnmowerStateRequested', targetState); + }, + emitVolareStateRequested(targetState) { + this.$emit('volare-state-requested', targetState); } }, watch: { @@ -144,6 +169,13 @@ export default { } else if (newState === PlayPauseState.PAUSED) { this.resetMode(); } + }, + currentVolareState(newState) { + if (newState === PlayPauseState.ACTIVE) { + this.startVolare(); + } else if (newState === PlayPauseState.PAUSED) { + this.resetMode(); + } } }, created() { diff --git a/resources/views/annotations/show.blade.php b/resources/views/annotations/show.blade.php index 3ccd61c4bd..ce2b616f0c 100644 --- a/resources/views/annotations/show.blade.php +++ b/resources/views/annotations/show.blade.php @@ -116,7 +116,7 @@ v-on:measuring="fetchImagesArea" v-on:requires-selected-label="handleRequiresSelectedLabel" v-on:is-invalid-shape="handleInvalidShape" - v-on:restore-lawnmower-image="loadImageWithId" + v-on:restore-lawnmower-image="showImageWithId" ref="canvas" > diff --git a/resources/views/annotations/show/tabs/annotationModes.blade.php b/resources/views/annotations/show/tabs/annotationModes.blade.php index 6798ef6bcb..836f91d8fa 100644 --- a/resources/views/annotations/show/tabs/annotationModes.blade.php +++ b/resources/views/annotations/show/tabs/annotationModes.blade.php @@ -4,7 +4,9 @@ v-on:change="handleAnnotationModeChange" v-on:create-sample="createSampledAnnotation" v-on:lawnmower-state-requested="setLawnmowerState" - :current-lawnmower-state="currentLawnmowerState"> + v-on:volare-state-requested="volare.setState" + :current-lawnmower-state="currentLawnmowerState" + :current-volare-state="volare.state"> @push('scripts') @@ -12,14 +14,13 @@
Volume Label Review
cycle through annotations
- + @can('add-annotation', $image) @endcan From dfc92ad192de85d8f3627f3e531465003c9f431d Mon Sep 17 00:00:00 2001 From: yannik131 Date: Sat, 20 Jun 2026 14:36:09 +0200 Subject: [PATCH 21/34] Use ID instead of index for resuming volare --- .../assets/js/annotations/annotatorContainer.vue | 2 +- .../components/annotationCanvas/volare.js | 12 +++++------- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index 129d254a3c..3da0e6e097 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -647,7 +647,7 @@ export default { this.annotations = annotations; // Wait for the canvas to be updated, otherwise lawnmower mode - // could compute the current section using the old viewport + // may compute the current section using the old viewport await this.$nextTick(); this.maybeUpdateAnnotationMode(); diff --git a/resources/assets/js/annotations/components/annotationCanvas/volare.js b/resources/assets/js/annotations/components/annotationCanvas/volare.js index 97f6eb59ad..aca01d7a1d 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/volare.js +++ b/resources/assets/js/annotations/components/annotationCanvas/volare.js @@ -122,7 +122,7 @@ export function useVolareMode({ function pause() { resumeContext = { imageId: image.value.id, - focussedAnnotationIndex: focussedAnnotationIndex.value, + focussedAnnotationId: focussedAnnotation.value?.id }; } @@ -137,17 +137,15 @@ export function useVolareMode({ return; } - const savedIndex = resumeContext.focussedAnnotationIndex; + const savedID = resumeContext.focussedAnnotationId; resumeContext = null; resuming = false; focussedAnnotationIndex.value = null; nextTick(() => { - // TODO Handle changes of filtered annotations while volare is active or paused - if (savedIndex !== null && savedIndex < filteredAnnotations.value.length) { - focussedAnnotationIndex.value = savedIndex; - } - }) + const index = filteredAnnotations.value.findIndex(a => a.id === savedID); + focussedAnnotationIndex.value = index === -1 ? 0 : index; + }); } watch(focussedAnnotation, (annotation) => { From 4dba4c3b061c3bba19d03fa0303edab8a8415a8a Mon Sep 17 00:00:00 2001 From: yannik131 Date: Sat, 20 Jun 2026 14:37:36 +0200 Subject: [PATCH 22/34] Fixed linter errors --- resources/assets/js/annotations/annotatorContainer.vue | 8 ++++---- .../annotations/components/annotationCanvas/lawnmower.vue | 2 -- .../js/annotations/components/annotationCanvas/volare.js | 2 -- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index 3da0e6e097..bd3e69c328 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -18,14 +18,14 @@ import SettingsTab from './components/settingsTab.vue'; import Sidebar from '@/core/components/sidebar.vue'; import SidebarTab from '@/core/components/sidebarTab.vue'; import VolumeImageAreaApi from './api/volumes.js'; -import {computed, defineAsyncComponent, watch} from 'vue' +import {computed, defineAsyncComponent} from 'vue' 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 { PlayPauseState } from '../core/components/playPause.vue'; -import { LawnmowerSaveState } from './components/annotationCanvas/lawnmower.vue'; -import { useVolareMode } from './components/annotationCanvas/volare.js'; +import {PlayPauseState} from '../core/components/playPause.vue'; +import {LawnmowerSaveState} from './components/annotationCanvas/lawnmower.vue'; +import {useVolareMode} from './components/annotationCanvas/volare.js'; const asyncAnnotationCanvas = defineAsyncComponent({ loader: function () { diff --git a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue index 418ab5c117..6787b1d1ec 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue +++ b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue @@ -1,6 +1,4 @@ From 6a4dac98d0f407d7aa525e3021b728025854d323 Mon Sep 17 00:00:00 2001 From: yannik131 Date: Mon, 27 Jul 2026 18:03:37 +0200 Subject: [PATCH 27/34] Muted text for lawnmower, playPause works for lawnmower --- .../js/annotations/annotatorContainer.vue | 5 +- .../components/annotationCanvas/lawnmower.vue | 51 ++++++++++++---- .../components/annotationModesTab.vue | 59 +++++++++++++++++-- .../sass/annotations/sidebar/_main.scss | 5 ++ resources/views/annotations/show.blade.php | 1 + .../show/tabs/annotationModes.blade.php | 4 +- 6 files changed, 104 insertions(+), 21 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index 571ee8f67c..bd1fd454da 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -290,7 +290,7 @@ export default { x: Math.round(viewport.center[0]), y: Math.round(viewport.center[1]), }); - + }, handleMapMovestart() { this.pauseLawnmowerAfterViewportChanged(); @@ -556,6 +556,9 @@ export default { this.$refs.annotationModesTab.pauseLawnmower(); }, + pauseLawnmower(timestamp) { + this.$refs.annotationModesTab.pauseLawnmower(timestamp); + }, showImageWithId(imageId) { const index = this.imagesIds.indexOf(imageId); if (index !== -1) { diff --git a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue index 2aae01298b..dc069c49fd 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue +++ b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue @@ -15,6 +15,7 @@ export default { 'restore-lawnmower-image', 'lawnmower-pre-viewport-change', 'lawnmower-post-viewport-change', + 'restore-lawnmower-pause-state', ], props: { lawnmowerSaveState: { @@ -29,8 +30,8 @@ export default { imageSection: [0, 0], // Actual center point of the current image section. imageSectionCenter: [0, 0], - savedLawnmowerState: null, restoringLawnmowerImageInProgress: false, + pageReloaded: true, }; }, computed: { @@ -147,28 +148,45 @@ export default { }, saveCurrentLawnmowerState() { const view = this.map.getView(); - this.savedLawnmowerState = { + const state = { imageId: this.image.id, center: view.getCenter(), resolution: view.getResolution(), - imageSection: [...this.imageSection] + imageSection: [...this.imageSection], + timestamp: Date.now(), }; + + localStorage.setItem( + this.getLawnmowerStorageKey(), + JSON.stringify(state) + ); + }, + discardSavedLawnmowerState() { + localStorage.removeItem(this.getLawnmowerStorageKey()); + }, + getSavedLawnmowerState() { + const raw = localStorage.getItem(this.getLawnmowerStorageKey()); + if (!raw) { + return null; + } + return JSON.parse(raw); }, loadSavedLawnmowerState() { - if (!this.savedLawnmowerState) { + const state = this.getSavedLawnmowerState(); + if (!state) { return; } - if (this.savedLawnmowerState.imageId !== this.image?.id) { + if (state.imageId !== this.image?.id) { this.restoringLawnmowerImageInProgress = true; - this.$emit('restore-lawnmower-image', this.savedLawnmowerState.imageId); + this.$emit('restore-lawnmower-image', state.imageId); return; } this.applySavedLawnmowerState(); }, applySavedLawnmowerState() { - const state = this.savedLawnmowerState; + const state = this.getSavedLawnmowerState(); if (!state || !this.image || state.imageId !== this.image.id) { return; } @@ -182,20 +200,27 @@ export default { this.imageSectionCenter = state.center; this.imageSection = state.imageSection; view.setCenter(state.center); - this.savedLawnmowerState = null; + this.discardSavedLawnmowerState(); this.map.once('rendercomplete', () => { this.$emit('lawnmower-post-viewport-change'); }); }); - - }, - discardSavedLawnmowerState() { - this.savedLawnmowerState = null; + }, }, watch: { image() { - if (this.savedLawnmowerState && this.restoringLawnmowerImageInProgress) { + const state = this.getSavedLawnmowerState(); + if (this.pageReloaded) { + if (state) { + this.$emit('restore-lawnmower-pause-state', state.timestamp); + } + this.pageReloaded = false; + + return; + } + + if (state && this.restoringLawnmowerImageInProgress) { this.$nextTick(() => this.applySavedLawnmowerState()); this.restoringLawnmowerImageInProgress = false; } diff --git a/resources/assets/js/annotations/components/annotationModesTab.vue b/resources/assets/js/annotations/components/annotationModesTab.vue index 5be9c7b162..b0ad45e5a2 100644 --- a/resources/assets/js/annotations/components/annotationModesTab.vue +++ b/resources/assets/js/annotations/components/annotationModesTab.vue @@ -43,8 +43,8 @@ export default { randomSamplingNumber: 9, regularSamplingRows: 3, regularSamplingColumns: 3, - currentLawnmowerState: PlayPauseState.INACTIVE, - currentVolareState: PlayPauseState.INACTIVE, + lawnmowerPausedAt: null, + volarePausedAt: null, }; }, computed: { @@ -60,6 +60,30 @@ export default { isRegularSamplingActive() { return this.mode === 'regularSampling'; }, + lawnmowerPausedAtText() { + return this.lawnmowerPausedAt ? this.timeAgo(this.lawnmowerPausedAt) : null; + }, + volarePausedAtText() { + return this.volarePausedAt ? this.timeAgo(this.volarePausedAt) : null; + }, + currentLawnmowerState() { + if (this.mode === 'lawnmower') { + return PlayPauseState.ACTIVE; + } else if (this.mode === 'lawnmowerPaused') { + return PlayPauseState.PAUSED; + } else { + return PlayPauseState.INACTIVE; + } + }, + currentVolareState() { + if (this.mode === 'volare') { + return PlayPauseState.ACTIVE; + } else if (this.mode === 'volarePaused') { + return PlayPauseState.PAUSED; + } else { + return PlayPauseState.INACTIVE; + } + } }, methods: { startVolare() { @@ -71,9 +95,9 @@ export default { startLawnmower() { this.setMode('lawnmower'); }, - pauseLawnmower() { + pauseLawnmower(timestamp) { this.setMode('lawnmowerPaused'); - this.currentLawnmowerState = PlayPauseState.PAUSED; + this.lawnmowerPausedAt = timestamp; }, startRandomSampling() { this.setMode('randomSampling'); @@ -110,7 +134,10 @@ export default { this.pauseLawnmower(); break; } - this.currentLawnmowerState = targetState; + }, + onLawnmowerPlayPauseTransitionRequested(targetState) { + this.updateLawnmowerState(targetState); + this.lawnmowerPausedAt = null; }, updateVolareState(targetState) { switch (targetState) { @@ -124,7 +151,6 @@ export default { this.pauseVolare(); break; } - this.currentVolareState = targetState; }, updateKeyBinds(newMode, oldMode) { switch (oldMode) { @@ -159,6 +185,27 @@ export default { this.$emit('annotation-mode-changed', newMode); } }, + timeAgo(timestamp) { + const seconds = Math.floor((Date.now() - timestamp) / 1000); + const secondsPerDay = 86400; + + const units = [ + { name: 'y', seconds: secondsPerDay * 365}, + { name: 'd', seconds: secondsPerDay }, + { name: 'h', seconds: 3600 }, + { name: 'min', seconds: 60 }, + { name: 's', seconds: 1 }, + ]; + + for (const unit of units) { + if (seconds >= unit.seconds) { + const value = Math.round(seconds / unit.seconds); + return `${value}${unit.name} ago`; + } + } + + return '0s ago'; + }, }, watch: { mode(newMode, oldMode) { diff --git a/resources/assets/sass/annotations/sidebar/_main.scss b/resources/assets/sass/annotations/sidebar/_main.scss index 7032e658dc..67a75a09eb 100644 --- a/resources/assets/sass/annotations/sidebar/_main.scss +++ b/resources/assets/sass/annotations/sidebar/_main.scss @@ -14,6 +14,11 @@ margin-top: 0; } } + + .sidebar-tab__timestamp { + padding-left: 2px; + color: $text-muted; + } } @import "labels"; diff --git a/resources/views/annotations/show.blade.php b/resources/views/annotations/show.blade.php index f36f68a6bc..6aa4d36463 100644 --- a/resources/views/annotations/show.blade.php +++ b/resources/views/annotations/show.blade.php @@ -120,6 +120,7 @@ v-on:restore-lawnmower-image="showImageWithId" v-on:lawnmower-pre-viewport-change="disableAutomaticLawnmowerPausing" v-on:lawnmower-post-viewport-change="enableAutomaticLawnmowerPausing" + v-on:restore-lawnmower-pause-state="pauseLawnmower" ref="canvas" >
diff --git a/resources/views/annotations/show/tabs/annotationModes.blade.php b/resources/views/annotations/show/tabs/annotationModes.blade.php index 90f3dad8e1..b1b0df3d59 100644 --- a/resources/views/annotations/show/tabs/annotationModes.blade.php +++ b/resources/views/annotations/show/tabs/annotationModes.blade.php @@ -18,6 +18,7 @@ :state="currentVolareState" @transitionRequested="updateVolareState" > + @can('add-annotation', $image) @endcan @@ -30,8 +31,9 @@ stopButtonTitleText="Stop cycling through image sections 𝗘𝘀𝗰" pauseButtonTitleText="Pause Lawnmower" :state="currentLawnmowerState" - @transitionRequested="updateLawnmowerState" + @transitionRequested="onLawnmowerPlayPauseTransitionRequested" > +
@can('add-annotation', $image)
From 1a001dce3978707cb81a8150a5b2d216f8ddb39e Mon Sep 17 00:00:00 2001 From: yannik131 Date: Mon, 27 Jul 2026 18:50:43 +0200 Subject: [PATCH 28/34] Volare pause stated muted text --- .../js/annotations/annotatorContainer.vue | 5 +- .../components/annotationCanvas/volare.js | 78 +++++++++++++------ .../components/annotationModesTab.vue | 10 ++- .../show/tabs/annotationModes.blade.php | 4 +- 4 files changed, 66 insertions(+), 31 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index bd1fd454da..e2bec66ac0 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -290,7 +290,6 @@ export default { x: Math.round(viewport.center[0]), y: Math.round(viewport.center[1]), }); - }, handleMapMovestart() { this.pauseLawnmowerAfterViewportChanged(); @@ -559,6 +558,9 @@ export default { 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) { @@ -794,6 +796,7 @@ export default { mapResolution: computed(() => this.mapResolution), showImageWithId: this.showImageWithId, annotationMode: computed(() => this.annotationMode), + restoreVolarePauseState: (timestamp) => this.$refs.annotationModesTab.pauseVolare(timestamp) }); }, }; diff --git a/resources/assets/js/annotations/components/annotationCanvas/volare.js b/resources/assets/js/annotations/components/annotationCanvas/volare.js index 04dae3e40f..4491ac2d1b 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/volare.js +++ b/resources/assets/js/annotations/components/annotationCanvas/volare.js @@ -1,6 +1,5 @@ import { ref, computed, watch, nextTick, readonly } from 'vue'; import { required } from '@/utils.js'; -import { PlayPauseState } from '@/core/components/playPause.vue'; export function useVolareMode({ @@ -13,12 +12,12 @@ export function useVolareMode({ mapResolution = required('mapResolution'), showImageWithId = required('showImageWithId'), annotationMode = required('annotationMode'), + restoreVolarePauseState = required('restoreVolarePauseState'), }) { const focussedAnnotationIndex = ref(null); const resolutionWasChangedByUser = ref(false); - const state = ref(PlayPauseState.INACTIVE); - let resumeContext = null; let resuming = false; + let pageReloaded = true; const focussedAnnotation = computed(() => { return filteredAnnotations.value[focussedAnnotationIndex.value]; @@ -28,6 +27,36 @@ export function useVolareMode({ return annotationMode.value === 'volare'; }); + function getVolareStorageKey() { + const volumeId = biigle.$require('annotations.volumeId'); + return `volare-state-${volumeId}`; + } + + function saveCurrentVolareState() { + const state = { + imageId: image.value.id, + focussedAnnotationId: focussedAnnotation.value?.id, + timestamp: Date.now(), + }; + + localStorage.setItem( + getVolareStorageKey(), + JSON.stringify(state) + ); + } + + function discardSavedVolareState() { + localStorage.removeItem(getVolareStorageKey()); + } + + function getSavedVolareState() { + const raw = localStorage.getItem(getVolareStorageKey()); + if (!raw) { + return null; + } + return JSON.parse(raw); + } + function selectAndFocusAnnotation(annotation, keepResolution = false) { selectedAnnotations.value.forEach(a => { a.selected = false; @@ -37,7 +66,7 @@ export function useVolareMode({ } function updateFocussedAnnotation() { - if (resumeContext) { + if (getSavedVolareState()) { return; } else if (!volareModeIsActive.value) { focussedAnnotationIndex.value = null; @@ -101,26 +130,20 @@ export function useVolareMode({ return false; } - function saveContext() { - resumeContext = { - imageId: image.value.id, - focussedAnnotationId: focussedAnnotation.value?.id - }; - } - - function resumeFromContext() { - if (!resumeContext) { + function loadSavedVolareState() { + const state = getSavedVolareState(); + if (!state) { return; } resuming = true; - if (resumeContext.imageId !== image.value.id) { - showImageWithId(resumeContext.imageId); + if (state.imageId !== image.value.id) { + showImageWithId(state.imageId); return; } - const savedID = resumeContext.focussedAnnotationId; - resumeContext = null; + const savedID = state.focussedAnnotationId; + discardSavedVolareState(); resuming = false; focussedAnnotationIndex.value = null; @@ -130,10 +153,6 @@ export function useVolareMode({ }); } - function discardContext() { - resumeContext = null; - } - watch(focussedAnnotation, (annotation) => { if (volareModeIsActive.value && annotation) { selectAndFocusAnnotation(annotation, resolutionWasChangedByUser.value); @@ -142,11 +161,11 @@ export function useVolareMode({ watch(() => annotationFilter?.value, updateFocussedAnnotation); watch(annotationMode, (newMode, oldMode) => { if (newMode === 'volarePaused') { - saveContext(); + saveCurrentVolareState(); } else if (oldMode === 'volarePaused' && newMode === 'volare') { - resumeFromContext(); + loadSavedVolareState(); } else { - discardContext(); + discardSavedVolareState(); } }); watch(volareModeIsActive, (enabled) => { @@ -157,8 +176,17 @@ export function useVolareMode({ } }); watch(() => image?.value, () => { + const state = getSavedVolareState(); + if (pageReloaded) { + if (state) { + restoreVolarePauseState(state.timestamp); + } + pageReloaded = false; + return; + } + if (resuming) { - nextTick(resumeFromContext); + nextTick(loadSavedVolareState); } else if (volareModeIsActive.value) { nextTick(updateFocussedAnnotation); } diff --git a/resources/assets/js/annotations/components/annotationModesTab.vue b/resources/assets/js/annotations/components/annotationModesTab.vue index b0ad45e5a2..e6809d8179 100644 --- a/resources/assets/js/annotations/components/annotationModesTab.vue +++ b/resources/assets/js/annotations/components/annotationModesTab.vue @@ -89,8 +89,9 @@ export default { startVolare() { this.setMode('volare'); }, - pauseVolare() { + pauseVolare(timestamp) { this.setMode('volarePaused'); + this.volarePausedAt = timestamp; }, startLawnmower() { this.setMode('lawnmower'); @@ -110,8 +111,9 @@ export default { return; } - const oldMode = this.mode; this.mode = newMode; + this.lawnmowerPausedAt = null; + this.volarePausedAt = null; }, resetMode() { this.setMode('default'); @@ -137,7 +139,6 @@ export default { }, onLawnmowerPlayPauseTransitionRequested(targetState) { this.updateLawnmowerState(targetState); - this.lawnmowerPausedAt = null; }, updateVolareState(targetState) { switch (targetState) { @@ -152,6 +153,9 @@ export default { break; } }, + onVolarePlayPauseTransitionRequested(targetState) { + this.updateVolareState(targetState); + }, updateKeyBinds(newMode, oldMode) { switch (oldMode) { case 'volare': diff --git a/resources/views/annotations/show/tabs/annotationModes.blade.php b/resources/views/annotations/show/tabs/annotationModes.blade.php index b1b0df3d59..9d8f2b1da5 100644 --- a/resources/views/annotations/show/tabs/annotationModes.blade.php +++ b/resources/views/annotations/show/tabs/annotationModes.blade.php @@ -16,12 +16,12 @@ stopButtonTitleText="Stop cycling through all annotations 𝗘𝘀𝗰" pauseButtonTitleText="Pause Volare" :state="currentVolareState" - @transitionRequested="updateVolareState" + @transitionRequested="onVolarePlayPauseTransitionRequested" > - @can('add-annotation', $image) @endcan +
From 424ce7d9c09d05496f2b3dd48357e2637e6cc3b4 Mon Sep 17 00:00:00 2001 From: Yannik Schroeder Date: Tue, 28 Jul 2026 13:49:47 +0200 Subject: [PATCH 29/34] linter fixes, don't overwrite saved state --- resources/assets/js/annotations/annotatorContainer.vue | 1 - .../annotations/components/annotationCanvas/lawnmower.vue | 3 +++ .../js/annotations/components/annotationCanvas/volare.js | 6 +++++- resources/assets/sass/annotations/sidebar/_main.scss | 7 ++++--- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index e2bec66ac0..d6c7d4620d 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -23,7 +23,6 @@ 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 {PlayPauseState} from '../core/components/playPause.vue'; import {LawnmowerSaveState} from './components/annotationCanvas/lawnmower.vue'; import {useVolareMode} from './components/annotationCanvas/volare.js'; diff --git a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue index dc069c49fd..da04e9a2de 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue +++ b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue @@ -147,6 +147,9 @@ export default { return `lawnmower-state-${volumeId}`; }, saveCurrentLawnmowerState() { + if (this.getSavedLawnmowerState()) { + return; + } const view = this.map.getView(); const state = { imageId: this.image.id, diff --git a/resources/assets/js/annotations/components/annotationCanvas/volare.js b/resources/assets/js/annotations/components/annotationCanvas/volare.js index 4491ac2d1b..c979bdc80a 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/volare.js +++ b/resources/assets/js/annotations/components/annotationCanvas/volare.js @@ -1,4 +1,4 @@ -import { ref, computed, watch, nextTick, readonly } from 'vue'; +import { ref, computed, watch, nextTick } from 'vue'; import { required } from '@/utils.js'; @@ -33,6 +33,10 @@ export function useVolareMode({ } function saveCurrentVolareState() { + if (getSavedVolareState()) { + return; + } + const state = { imageId: image.value.id, focussedAnnotationId: focussedAnnotation.value?.id, diff --git a/resources/assets/sass/annotations/sidebar/_main.scss b/resources/assets/sass/annotations/sidebar/_main.scss index 67a75a09eb..e39af8708a 100644 --- a/resources/assets/sass/annotations/sidebar/_main.scss +++ b/resources/assets/sass/annotations/sidebar/_main.scss @@ -1,5 +1,5 @@ .annotator-tab { - > h4 { + >h4 { &:first-child { margin-top: 0; } @@ -10,7 +10,7 @@ padding-top: 10px; } - > h5 { + >h5 { margin-top: 0; } } @@ -18,10 +18,11 @@ .sidebar-tab__timestamp { padding-left: 2px; color: $text-muted; + font-size: $font-size-small; } } @import "labels"; @import "annotation-modes"; @import "image-labels"; -@import "settingsTab"; +@import "settingsTab"; \ No newline at end of file From a12106bebda65c01b299d006c99de6b0aa3589f5 Mon Sep 17 00:00:00 2001 From: Yannik Schroeder Date: Tue, 28 Jul 2026 13:52:55 +0200 Subject: [PATCH 30/34] Undid auto formatting --- resources/assets/sass/annotations/sidebar/_main.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/assets/sass/annotations/sidebar/_main.scss b/resources/assets/sass/annotations/sidebar/_main.scss index e39af8708a..ab97ea6395 100644 --- a/resources/assets/sass/annotations/sidebar/_main.scss +++ b/resources/assets/sass/annotations/sidebar/_main.scss @@ -1,5 +1,5 @@ .annotator-tab { - >h4 { + > h4 { &:first-child { margin-top: 0; } @@ -10,7 +10,7 @@ padding-top: 10px; } - >h5 { + > h5 { margin-top: 0; } } From 1d6521440d5578bc4c60f689ba73d4b37fe7c1b8 Mon Sep 17 00:00:00 2001 From: yannik131 Date: Sun, 23 Aug 2026 18:29:00 +0200 Subject: [PATCH 31/34] kebab-case for vue signals --- resources/assets/js/core/components/playPause.vue | 6 +++--- .../views/annotations/show/tabs/annotationModes.blade.php | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/resources/assets/js/core/components/playPause.vue b/resources/assets/js/core/components/playPause.vue index c1cd037317..486d231277 100644 --- a/resources/assets/js/core/components/playPause.vue +++ b/resources/assets/js/core/components/playPause.vue @@ -30,7 +30,7 @@ const PAUSED = PlayPauseState.PAUSED; export default { emits: [ - 'transitionRequested' + 'transition-requested' ], props: { state: { @@ -73,11 +73,11 @@ export default { }, playButtonClicked() { const targetState = this.is(ACTIVE) ? INACTIVE : ACTIVE; - this.$emit('transitionRequested', targetState); + this.$emit('transition-requested', targetState); }, pauseButtonClicked() { const targetState = this.is(ACTIVE) ? PAUSED : INACTIVE; - this.$emit('transitionRequested', targetState); + this.$emit('transition-requested', targetState); } } } diff --git a/resources/views/annotations/show/tabs/annotationModes.blade.php b/resources/views/annotations/show/tabs/annotationModes.blade.php index 9d8f2b1da5..d42eacc01c 100644 --- a/resources/views/annotations/show/tabs/annotationModes.blade.php +++ b/resources/views/annotations/show/tabs/annotationModes.blade.php @@ -16,7 +16,7 @@ stopButtonTitleText="Stop cycling through all annotations 𝗘𝘀𝗰" pauseButtonTitleText="Pause Volare" :state="currentVolareState" - @transitionRequested="onVolarePlayPauseTransitionRequested" + @transition-requested="onVolarePlayPauseTransitionRequested" > @can('add-annotation', $image) @@ -31,7 +31,7 @@ stopButtonTitleText="Stop cycling through image sections 𝗘𝘀𝗰" pauseButtonTitleText="Pause Lawnmower" :state="currentLawnmowerState" - @transitionRequested="onLawnmowerPlayPauseTransitionRequested" + @transition-requested="onLawnmowerPlayPauseTransitionRequested" >
From a95884a643dfaec081f645b9e06f5f2b9b90e777 Mon Sep 17 00:00:00 2001 From: yannik131 Date: Sun, 23 Aug 2026 18:33:37 +0200 Subject: [PATCH 32/34] fixed volare mode check --- resources/assets/js/annotations/annotatorContainer.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index d6c7d4620d..3fe598a8ec 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -416,7 +416,7 @@ export default { confidence: 1, }; - if (this.volare.volareModeIsActive) { + if (this.annotationMode === 'volare') { this.$refs.canvas.blinkAnnotation(annotation); } From f4cad92cdc6c244d33b4c7567b50aa9dff431dcb Mon Sep 17 00:00:00 2001 From: yannik131 Date: Sun, 23 Aug 2026 18:49:54 +0200 Subject: [PATCH 33/34] Removed todo comment --- resources/assets/js/annotations/annotatorContainer.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index 3fe598a8ec..5b4b42f7fd 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -557,7 +557,7 @@ export default { pauseLawnmower(timestamp) { this.$refs.annotationModesTab.pauseLawnmower(timestamp); }, - pauseVolare(timestamp) { + pauseVolare() { this.$refs.annotationModesTab.pauseVolare(timestamp); }, showImageWithId(imageId) { @@ -749,8 +749,6 @@ export default { Events.on('annotations.delete', this.handleDeleteAnnotation); Events.on('annotations.focus', this.focusAnnotation); - // TODO Are these necessary? Should they be moved to the new volare composable? - if (UrlParams.get('annotation')) { let id = parseInt(UrlParams.get('annotation')); Events.once('images.change', () => { From 3bba13c85284511c31acdb9cba855551aafcac13 Mon Sep 17 00:00:00 2001 From: yannik131 Date: Sun, 23 Aug 2026 18:55:56 +0200 Subject: [PATCH 34/34] fixed timestamp typo --- resources/assets/js/annotations/annotatorContainer.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue index 5b4b42f7fd..ade05d6de9 100644 --- a/resources/assets/js/annotations/annotatorContainer.vue +++ b/resources/assets/js/annotations/annotatorContainer.vue @@ -557,7 +557,7 @@ export default { pauseLawnmower(timestamp) { this.$refs.annotationModesTab.pauseLawnmower(timestamp); }, - pauseVolare() { + pauseVolare(timestamp) { this.$refs.annotationModesTab.pauseVolare(timestamp); }, showImageWithId(imageId) {