Initial version of crop boundary dragging.

public/js/crop_editor.js

@@ -187,16 +187,19 @@ class CropEditor {
 
 	addEvents(event) {
 		let drag_target = this.image_container;
-		drag_target.addEventListener('mousedown', this.dragStart);
-		drag_target.addEventListener('mousemove', this.drag);
-		drag_target.addEventListener('mouseup', this.dragEnd);
-		drag_target.addEventListener('mouseout', this.dragEnd);
+		drag_target.addEventListener('mousedown', this.dragStart.bind(this));
+		drag_target.addEventListener('mousemove', this.drag.bind(this));
+		drag_target.addEventListener('mouseup', this.dragEnd.bind(this));
+		// drag_target.addEventListener('mouseout', this.dragEnd.bind(this));
 
 		this.original_image.addEventListener('mousedown', event => {return false});
+		this.original_image.addEventListener('dragstart', event => {return false});
 	}
 
 	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}`);
 	}
 
@@ -206,13 +209,47 @@ class CropEditor {
 		}
 		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}`);
+		// 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;
+	}
+
+	handleDragEvent(event) {
+		if (!this.isDragging) {
+			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);
+
+		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.positionBoundary();
 	}
 
 	toggleCropButton() {