remove mouse event details from global variables

Author: timonegk

imagetagger/imagetagger/annotations/static/annotations/js/annotations.js

@@ -4,12 +4,6 @@ globals = {
   imageScaleHeight: 1,
   moveSelectionStepSize: 2,
   drawAnnotations: true,
-  mouseUpX: undefined,
-  mouseUpY: undefined,
-  mouseClickX: undefined,
-  mouseClickY: undefined,
-  mouseDownX: undefined,
-  mouseDownY: undefined,
   currentAnnotationsOfSelectedType: undefined,
   stdColor: '#CC4444',
   mutColor: '#CC0000'
@@ -418,18 +412,12 @@ function calculateImageScale() {
     existingAnnotations.removeClass('hidden');
   }
 
-  /**
-   * Highlight one annotation in a different color
-   * @param annotationTypeId
-   * @param annotationId
-   */
-
   function handleMouseClick(e) {
     if (e && (e.target.id === 'image' || e.target.id === 'image_canvas')) {
       let position = globals.image.offset();
-      globals.mouseClickX = Math.round((e.pageX - position.left));
-      globals.mouseClickY = Math.round((e.pageY - position.top));
-      tool.handleMouseClick(e);
+      let x = Math.round((e.pageX - position.left));
+      let y = Math.round((e.pageY - position.top));
+      tool.handleMouseClick(e, x, y);
     }
 
     // remove any existing highlight
@@ -1047,9 +1035,9 @@ function calculateImageScale() {
         displayFeedback($('#feedback_annotation_type_missing'));
         return;
       }
-      globals.mouseDownX = Math.round((event.pageX - position.left) * globals.imageScaleWidth);
-      globals.mouseDownY = Math.round((event.pageY - position.top) * globals.imageScaleHeight);
-      tool.handleMouseDown(event);
+      let x = Math.round((event.pageX - position.left) * globals.imageScaleWidth);
+      let y = Math.round((event.pageY - position.top) * globals.imageScaleHeight);
+      tool.handleMouseDown(event, x, y);
     }
   }
 
@@ -1058,12 +1046,12 @@ function calculateImageScale() {
       return;
 
     let position = globals.image.offset();
-    globals.mouseUpX = Math.round((event.pageX - position.left)/* * globals.imageScaleWidth*/);
-    globals.mouseUpY = Math.round((event.pageY - position.top)/* * globals.imageScaleHeight*/);
+    let x = Math.round((event.pageX - position.left)/* * globals.imageScaleWidth*/);
+    let y = Math.round((event.pageY - position.top)/* * globals.imageScaleHeight*/);
 
     if (event.pageX > position.left && event.pageX < position.left + globals.image.width() &&
       event.pageY > position.top && event.pageY < position.top + globals.image.height()) {
-      tool.handleMouseUp(event);
+      tool.handleMouseUp(event, x, y);
     }
   }
 

imagetagger/imagetagger/annotations/static/annotations/js/boundingboxes.js

@@ -338,11 +338,11 @@ class BoundingBoxes {
     this.clear();
   }
 
-  handleMouseDown(event) { }
-  handleMouseUp(event) { }
+  handleMouseDown() { }
+  handleMouseUp() { }
   closeDrawing() { }
 
-  handleMouseClick(event) {
+  handleMouseClick(event, x, y) {
     // get current annotation type id
     let annotationType = parseInt($('#annotation_type_id').val());
 
@@ -363,7 +363,7 @@ class BoundingBoxes {
       let bottom = annotation.vector.y2 / globals.imageScaleHeight;
 
       // check if we clicked inside that annotation
-      if (globals.mouseClickX >= left && globals.mouseClickX <= right && globals.mouseClickY >= top && globals.mouseClickY <= bottom) {
+      if (x >= left && x <= right && y >= top && y <= bottom) {
         matchingAnnotations.push(annotation);
       }
     }

imagetagger/imagetagger/annotations/static/annotations/js/canvas.js

@@ -332,11 +332,11 @@ class Canvas {
     }
   }
 
-  mouseTooClose() {
+  mouseTooClose(x, y) {
     for (let drawing of this.drawings) {
       let points = drawing.getPointTuples();
       for (let point of points) {
-        if (Math.abs(point[0] * globals.imageScaleWidth - globals.mouseDownX) < threshold && Math.abs(point[1] * globals.imageScaleHeight - globals.mouseDownY) < threshold) {
+        if (Math.abs(point[0] * globals.imageScaleWidth - x) < threshold && Math.abs(point[1] * globals.imageScaleHeight - y) < threshold) {
           return true;
         }
       }
@@ -647,7 +647,7 @@ class Canvas {
   increaseSelectionSizeRight() {}
   increaseSelectionSizeUp() {}
 
-  handleMouseClick(event) {
+  handleMouseClick(event, x, y) {
     let position = globals.image.offset();
     if (!(event.pageX > position.left && event.pageX < position.left + globals.image.width() &&
       event.pageY > position.top && event.pageY < position.top + globals.image.height()) &&
@@ -656,20 +656,20 @@ class Canvas {
     }
   }
 
-  handleMouseDown() {
+  handleMouseDown(event, x, y) {
     // Check if we are close enough to move the point, not draw a new drawing
     // we use the variable locked which is checked when we can create a new line
-    if (this.mouseTooClose()) {
+    if (this.mouseTooClose(x, y)) {
       this.locked = true;
     }
   }
 
-  handleMouseUp() {
+  handleMouseUp(event, x, y) {
     if (this.inline && this.currentDrawing) {
       // We are currently drawing a drawing
       // and we clicked inside of the canvas:
       // add a point
-      this.currentDrawing.addPoint(globals.mouseUpX, globals.mouseUpY);
+      this.currentDrawing.addPoint(x, y);
     } else if (this.locked) {
       // we do not create a drawing because we are
       // only moving an existing one
@@ -683,19 +683,19 @@ class Canvas {
       this.inline = true;
       switch (this.vector_type) {
         case 2: // Point
-          this.drawPoint({x1: globals.mouseUpX, y1: globals.mouseUpY}, 0, true);
+          this.drawPoint({x1: x, y1: y}, 0, true);
           break;
         case 3: // Line
-          this.drawLine({x1: globals.mouseUpX, y1: globals.mouseUpY}, 0, true);
+          this.drawLine({x1: x, y1: y}, 0, true);
           break;
         case 4: // Multiline
-          this.drawMultiline({x1: globals.mouseUpX, y1: globals.mouseUpY}, 0, true);
+          this.drawMultiline({x1: x, y1: y}, 0, true);
           break;
         case 5: // Polygon
           if (this.node_count === 0) {
-            this.drawArbitraryPolygon({x1: globals.mouseUpX, y1: globals.mouseUpY}, 0, true, false);
+            this.drawArbitraryPolygon({x1: x, y1: y}, 0, true, false);
           } else {
-            this.drawPolygon({x1: globals.mouseUpX, y1: globals.mouseUpY}, 0, true, this.node_count, false);
+            this.drawPolygon({x1: x, y1: y}, 0, true, this.node_count, false);
           }
           break;
         default: