From 06a4e9464f3cb419d60ad2723ea6edf5a247d307 Mon Sep 17 00:00:00 2001
From: Timon Engelke <timon.engelke@online.de>
Date: Tue, 30 Mar 2021 15:08:52 +0200
Subject: [PATCH] cleanup the mess of resetting/reloading the tool

---
 .../static/annotations/js/annotations.js      | 35 +++++++------------
 .../static/annotations/js/boundingboxes.js    |  8 ++---
 .../static/annotations/js/canvas.js           | 25 +++++++------
 3 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js b/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js
index 18cacc0c..37d8e980 100644
--- a/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js
+++ b/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js
@@ -110,6 +110,7 @@ function calculateImageScale() {
           restoreSelection: function() {},
           cancelSelection: function() {},
           reset: function() {},
+          clear: function() {},
           drawExistingAnnotations: function() {},
           closeDrawing: function() {},
           handleMousemove: function() {},
@@ -229,15 +230,12 @@ function calculateImageScale() {
             $('#annotation_edit_button_' + gEditAnnotationId).parent().parent().fadeOut().remove();
           } else {
             displayFeedback($('#feedback_annotation_updated'));
-            displayExistingAnnotations(data.annotations);
-            tool.drawExistingAnnotations(globals.currentAnnotationsOfSelectedType);
           }
         } else {
           displayFeedback($('#feedback_annotation_exists'));
         }
       } else if (response.status === 201) {
         displayFeedback($('#feedback_annotation_created'));
-        displayExistingAnnotations(data.annotations);
       }
       // update current annotations
       gCurrentAnnotations = data.annotations;
@@ -245,9 +243,6 @@ function calculateImageScale() {
         return e.annotation_type.id === gAnnotationType;
       });
 
-      tool.drawExistingAnnotations(globals.currentAnnotationsOfSelectedType);
-
-      resetSelection();
     } catch (e) {
       console.log(e);
       displayFeedback($('#feedback_connection_error'));
@@ -513,8 +508,6 @@ function calculateImageScale() {
     currentImage.replaceWith(newImage);
     globals.image = newImage;
     calculateImageScale();
-    tool.initSelection();
-    resetSelection();
 
     if (currentImage.data('imageid') !== undefined) {
       // add previous image to cache
@@ -612,9 +605,6 @@ function calculateImageScale() {
     $('#edit_active').removeClass('hidden');
 
     $('.js_feedback').stop().addClass('hidden');
-    let params = {
-      annotation_id: annotationId
-    };
 
     let annotationData = annotationElem.data('vector');
     if (annotationData === undefined) {
@@ -636,7 +626,6 @@ function calculateImageScale() {
 
     notInImage.prop('checked', false).change();
 
-
     tool.reloadSelection(annotationId, annotationData);
     $('#concealed').prop('checked', annotationElem.data('concealed')).change();
     $('#blurred').prop('checked', annotationElem.data('blurred')).change();
@@ -849,9 +838,6 @@ function calculateImageScale() {
     loading.removeClass('hidden');
     $('#annotation_type_id').val(gAnnotationType);
 
-    if (tool instanceof BoundingBoxes) {
-      tool.cancelSelection();
-    }
     let loadImage = displayImage(imageId).then(scrollImageList);
 
     if (!$('#keep_selection').prop('checked')) {
@@ -869,7 +855,13 @@ function calculateImageScale() {
     }
     $('#next-image-id').attr('value', next_image_id || '');
     $('#delete-image-form').attr('action', DELETE_IMAGE_URL.replace('%s', imageId));
-    tool.restoreSelection(false);
+
+    tool.clear();
+    if (globals.restoreSelection !== undefined) {
+      tool.restoreSelection();
+    } else {
+      resetSelection();
+    }
 
     if (fromHistory !== true) {
       history.pushState({
@@ -884,12 +876,6 @@ function calculateImageScale() {
       loading.addClass('hidden');
       displayExistingAnnotations(gCurrentAnnotations);
       tool.drawExistingAnnotations(globals.currentAnnotationsOfSelectedType);
-
-      if (globals.restoreSelection !== undefined) {
-        tool.restoreSelection();
-      } else {
-        resetSelection();
-      }
     } catch {
       console.log("Unable to load annotations for image" + imageId);
     }
@@ -1151,7 +1137,6 @@ function calculateImageScale() {
     // it from window (this should wait for all external sources including images)
     $(window).on('load', function() {
       setTool();
-      tool.initSelection();
       loadAnnotateView(gImageId);
       preloadImages();
     }());
@@ -1180,7 +1165,11 @@ function calculateImageScale() {
       event.preventDefault();
       try {
         let annotation = getValidAnnotation()
+        tool.clear();
+        resetSelection();
         await createAnnotation(annotation);
+        tool.drawExistingAnnotations(globals.currentAnnotationsOfSelectedType);
+        displayExistingAnnotations(gCurrentAnnotations);
       } catch (e) {
         console.log(e);
       }
diff --git a/imagetagger/imagetagger/annotations/static/annotations/js/boundingboxes.js b/imagetagger/imagetagger/annotations/static/annotations/js/boundingboxes.js
index 475f9102..5ff32cc1 100644
--- a/imagetagger/imagetagger/annotations/static/annotations/js/boundingboxes.js
+++ b/imagetagger/imagetagger/annotations/static/annotations/js/boundingboxes.js
@@ -117,7 +117,8 @@ class BoundingBoxes {
     this.setHighlightColor(annotationId);
     this.selection = globals.image.imgAreaSelect({
       instance: true,
-      show: true
+      show: true,
+      onSelectChange: this.updateAnnotationFields,
     });
     if (!annotationData) {
       annotationData = {
@@ -158,7 +159,7 @@ class BoundingBoxes {
   /**
    * Restore the selection.
    */
-  restoreSelection(reset) {
+  restoreSelection() {
     if (!$('#keep_selection').prop('checked')) {
       return;
     }
@@ -174,9 +175,6 @@ class BoundingBoxes {
         this.reloadSelection(0, globals.restoreSelection);
       }
     }
-    if (reset !== false) {
-      globals.restoreSelection = undefined;
-    }
   }
 
   moveSelectionUp() {
diff --git a/imagetagger/imagetagger/annotations/static/annotations/js/canvas.js b/imagetagger/imagetagger/annotations/static/annotations/js/canvas.js
index e440f81a..5b363a7a 100644
--- a/imagetagger/imagetagger/annotations/static/annotations/js/canvas.js
+++ b/imagetagger/imagetagger/annotations/static/annotations/js/canvas.js
@@ -381,6 +381,7 @@ class Canvas {
         this.updateAnnotationFields({x1: 0, x2: 0, y1: 0, y2: 0});
         break;
     }
+    this.currentDrawing = undefined;
   }
 
   reset() {
@@ -425,7 +426,8 @@ class Canvas {
   }
 
   drawExistingAnnotations(annotations, color) {
-    this.clear();
+    let currentDrawing = this.currentDrawing;
+    this.currentDrawing = undefined;
     color = color || globals.stdColor;
     let colors = [];
     if (color.constructor === Array) {
@@ -445,8 +447,6 @@ class Canvas {
     for (let i in annotations) {
       let annotation = annotations[i];
       let color = colors[i];
-      console.log(annotation);
-      console.log(color);
       if (annotation.annotation_type.id !== this.annotationTypeId) {
         continue;
       }
@@ -485,7 +485,12 @@ class Canvas {
           console.log("Unknown vector type: " + annotation.annotation_type.vector_type);
       }
     }
-    this.currentDrawing = undefined;
+    // completely restore the drawing from before drawing the existing annotations,
+    // especially the annotation fields are overwritten during the drawing
+    this.currentDrawing = currentDrawing;
+    if (currentDrawing) {
+      this.updateAnnotationFields(currentDrawing);
+    }
   }
 
   updateAnnotationFields(drawing) {
@@ -545,12 +550,12 @@ class Canvas {
       drawing.setMutable(false);
     }
     if (this.old && this.currentDrawing) {
-        this.currentDrawing.setPoints(this.old);
-        this.old = undefined;
-      } else if (this.currentDrawing) {
-        this.currentDrawing.remove();
-      }
-      this.currentDrawing = undefined;
+      this.currentDrawing.setPoints(this.old);
+      this.old = undefined;
+    } else if (this.currentDrawing) {
+      this.currentDrawing.remove();
+    }
+    this.currentDrawing = undefined;
   }
 
   cancelSelection() {