From cc7a77f90874ff50416df455e626198c4d4d9820 Mon Sep 17 00:00:00 2001 From: Timon Engelke Date: Wed, 31 Mar 2021 00:44:06 +0200 Subject: [PATCH] remove mouse event details from global scope --- .../static/annotations/js/annotations.js | 30 ++++++------------- .../static/annotations/js/boundingboxes.js | 8 ++--- .../static/annotations/js/canvas.js | 24 +++++++-------- 3 files changed, 25 insertions(+), 37 deletions(-) diff --git a/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js b/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js index 2662adbe..e3724706 100644 --- a/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js +++ b/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); } } diff --git a/imagetagger/imagetagger/annotations/static/annotations/js/boundingboxes.js b/imagetagger/imagetagger/annotations/static/annotations/js/boundingboxes.js index 7cfb20b8..1b99154d 100644 --- a/imagetagger/imagetagger/annotations/static/annotations/js/boundingboxes.js +++ b/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); } } diff --git a/imagetagger/imagetagger/annotations/static/annotations/js/canvas.js b/imagetagger/imagetagger/annotations/static/annotations/js/canvas.js index 3327a9cc..31041543 100644 --- a/imagetagger/imagetagger/annotations/static/annotations/js/canvas.js +++ b/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: