Fix bug with unchanged label color after swap

resources/assets/js/annotations/annotatorContainer.vue

@@ -353,10 +353,10 @@ export default {
         handleDetachAnnotationLabel(annotation, annotationLabel) {
             if (this.isEditor) {
                 if (annotation.labels.length > 1) {
-                    AnnotationsStore.detachLabel(annotation, annotationLabel)
+                    return AnnotationsStore.detachLabel(annotation, annotationLabel)
                         .catch(handleErrorResponse);
                 } else if (confirm('Detaching the last label of an annotation deletes the whole annotation. Do you want to delete the annotation?')) {
-                    this.handleDeleteAnnotation(annotation);
+                    return this.handleDeleteAnnotation(annotation);
                 }
             }
         },
@@ -370,7 +370,7 @@ export default {
             // Mark for deletion so the annotation is immediately removed from
             // the canvas. See https://github.com/biigle/annotations/issues/70
             Vue.set(annotation, 'markedForDeletion', true);
-            AnnotationsStore.delete(annotation)
+            return AnnotationsStore.delete(annotation)
                 .catch(function (response) {
                     annotation.markedForDeletion = false;
                     handleErrorResponse(response);
@@ -443,12 +443,18 @@ export default {
                 this.handleAttachLabel(annotation, label)
                     .then(() => {
                         if (lastLabel) {
-                            this.handleDetachAnnotationLabel(annotation, lastLabel);
+                            this.handleDetachAnnotationLabel(annotation, lastLabel)
+                                .then(() => {
+                                    this.refreshAnnotation(annotation);
+                                });
                         }
                     })
                     .catch(handleErrorResponse);
             }
         },
+        refreshAnnotation(annotation){
+            this.$refs.canvas.refreshAnnotation(annotation);
+        },
         handleAttachAllSelected() {
             this.selectedAnnotations.forEach(this.handleAttachLabel);
         },

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

@@ -596,6 +596,17 @@ export default {
         },
         updateMousePosition(e) {
             this.mousePosition = e.coordinate;
+        },
+        refreshAnnotation(annotation) {
+            let source = this.annotationSource;
+
+            let newFeature = this.createFeature(annotation);
+            let oldFeature = source.getFeatureById(annotation.id)
+
+            source.removeFeature(oldFeature);
+            source.addFeature(newFeature);
+
+
         },
         refreshAnnotationSource(annotations, source) {
             let annotationsMap = {};

resources/assets/js/videos/components/videoScreen/annotationPlayback.vue

@@ -7,6 +7,7 @@ import Point from '@biigle/ol/geom/Point';
 import Polygon from '@biigle/ol/geom/Polygon';
 import Rectangle from '@biigle/ol/geom/Rectangle';
 import {getRoundToPrecision} from '../../utils';
+import Events from '../../../core/events';
 
 /**
  * Mixin for the videoScreen component that contains logic for the annotation playback.
@@ -125,6 +126,15 @@ export default {
                 this.updateGeometry(feature, time);
             });
         },
+        refreshAnnotation(annotation) {
+            let source = this.annotationSource;
+
+            let newFeature = this.createFeature(annotation);
+            let oldFeature = source.getFeatureById(annotation.id)
+
+            source.removeFeature(oldFeature);
+            source.addFeature(newFeature);
+        },
         createFeature(annotation) {
             let feature = new Feature(this.getGeometryFromPoints(annotation.shape, annotation.points[0]));
 
@@ -226,6 +236,7 @@ export default {
         },
     },
     created() {
+        Events.$on('video.swap', this.refreshAnnotation);
         this.$on('refresh', this.refreshAnnotations);
         this.$once('map-ready', () => {
             this.$watch('annotationsRevision', () => {

resources/assets/js/videos/videoContainer.vue

@@ -402,10 +402,10 @@ export default {
         },
         detachAnnotationLabel(annotation, annotationLabel) {
             if (annotation.labels.length > 1) {
-                annotation.detachAnnotationLabel(annotationLabel)
+                return annotation.detachAnnotationLabel(annotationLabel)
                     .catch(handleErrorResponse);
             } else if (confirm('Detaching the last label of an annotation deletes the whole annotation. Do you want to delete the annotation?')) {
-                annotation.delete()
+                return annotation.delete()
                     .then(() => this.removeAnnotation(annotation))
                     .catch(handleErrorResponse);
             }
@@ -425,7 +425,9 @@ export default {
             this.attachAnnotationLabel(annotation)
                 .then(() => {
                     if (lastLabel) {
-                        this.detachAnnotationLabel(annotation, lastLabel);
+                        this.detachAnnotationLabel(annotation, lastLabel)
+                            .then(Events.$emit('video.swap', annotation));
+
                     }
                 })
                 .catch(handleErrorResponse);