From 893d31af520c725e50651c6db9d2a51949e14deb Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
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";
 	}
 }