From 893d31af520c725e50651c6db9d2a51949e14deb Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Mon, 23 Nov 2020 19:00:42 +0100 Subject: [PATCH] Proper dragging of the crop bounding rectangle/area. --- public/js/crop_editor.js | 45 ++++++++++++---------------------------- 1 file changed, 13 insertions(+), 32 deletions(-) diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js index 172733f..9fb700e 100644 --- a/public/js/crop_editor.js +++ b/public/js/crop_editor.js @@ -198,35 +198,21 @@ class CropEditor { dragStart(event) { this.isDragging = true; - this.dragStartX = event.pageX - event.target.offsetLeft; - this.dragStartY = event.pageY - event.target.offsetTop; - console.log(`Start @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`); + this.dragStartX = event.x - this.image_container.offsetLeft; + this.dragStartY = event.y - this.image_container.offsetTop; } dragEnd(event) { - if (!this.isDragging) { - return; - } this.isDragging = false; - console.log(`End @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`); this.handleDragEvent(event); } drag(event) { - if (!this.isDragging) { - return; - } - // console.log(`Drag @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`); this.handleDragEvent(event); } getScaleFactor() { - let real_width = this.original_image.naturalWidth, - real_height = this.original_image.naturalHeight, - scaled_width = this.original_image.clientWidth, - scaled_height = this.original_image.clientHeight; - - return scaled_width / real_width; + return this.original_image.naturalWidth / this.original_image.clientWidth; } handleDragEvent(event) { @@ -234,20 +220,15 @@ class CropEditor { return; } - let curX = event.pageX - event.target.offsetLeft, - curY = event.pageY - event.target.offsetTop; - - this.dragEndX = Math.max(curX, this.dragStartX); - this.dragEndY = Math.max(curY, this.dragStartY); - this.dragStartX = Math.min(curX, this.dragStartX); - this.dragStartY = Math.min(curY, this.dragStartY); + this.dragEndX = event.x - this.image_container.offsetLeft; + this.dragEndY = event.y - this.image_container.offsetTop; let scaleFactor = this.getScaleFactor(); - this.source_x.value = this.dragStartX; - this.source_y.value = this.dragStartY; - this.crop_width.value = Math.ceil(this.dragEndX / scaleFactor); - this.crop_height.value = Math.ceil(this.dragEndY / scaleFactor); + this.source_x.value = Math.ceil(Math.min(this.dragStartX, this.dragEndX) * scaleFactor); + this.source_y.value = Math.ceil(Math.min(this.dragStartY, this.dragEndY) * scaleFactor); + this.crop_width.value = Math.ceil(Math.abs(this.dragEndX - this.dragStartX) * scaleFactor); + this.crop_height.value = Math.ceil(Math.abs(this.dragEndY - this.dragStartY) * scaleFactor); this.positionBoundary(); } @@ -259,9 +240,9 @@ class CropEditor { positionBoundary(event) { let scaleFactor = this.getScaleFactor(); - crop_boundary.style.left = parseInt(this.source_x.value) * scaleFactor + "px"; - crop_boundary.style.top = parseInt(this.source_y.value) * scaleFactor + "px"; - crop_boundary.style.width = parseInt(this.crop_width.value) * scaleFactor + "px"; - crop_boundary.style.height = parseInt(this.crop_height.value) * scaleFactor + "px"; + crop_boundary.style.left = parseInt(this.source_x.value) / scaleFactor + "px"; + crop_boundary.style.top = parseInt(this.source_y.value) / scaleFactor + "px"; + crop_boundary.style.width = parseInt(this.crop_width.value) / scaleFactor + "px"; + crop_boundary.style.height = parseInt(this.crop_height.value) / scaleFactor + "px"; } }