Allow moving/dragging the crop boundary.

Currently unconstrained.

public/css/admin.css

@@ -183,6 +183,7 @@ body {
 #crop_boundary {
 	border: 1px dashed rgb(255, 255, 255);
 	background: rgba(255, 255, 255, 0.4);
+	cursor: move;
 	position: absolute;
 	z-index: 200;
 	width: 500px;

public/js/crop_editor.js

@@ -186,36 +186,44 @@ class CropEditor {
 	}
 
 	addEvents(event) {
-		let drag_target = this.image_container;
-		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));
+		let cropTarget = this.image_container;
+		cropTarget.addEventListener('mousedown', this.cropSelectionStart.bind(this));
+		cropTarget.addEventListener('mousemove', this.cropSelection.bind(this));
+		cropTarget.addEventListener('mouseup', this.cropSelectionEnd.bind(this));
+		// cropTarget.addEventListener('mouseout', this.cropSelectionEnd.bind(this));
 
 		this.original_image.addEventListener('mousedown', event => {return false});
 		this.original_image.addEventListener('dragstart', event => {return false});
+
+		let moveTarget = this.crop_boundary;
+		moveTarget.addEventListener('mousedown', this.moveSelectionStart.bind(this));
+		moveTarget.addEventListener('mousemove', this.moveSelection.bind(this));
+		moveTarget.addEventListener('mouseup', this.moveSelectionEnd.bind(this));
 	}
 
-	dragStart(event) {
+	cropSelectionStart(event) {
+		if (this.isMoving) {
+			return false;
+		}
 		this.isDragging = true;
 		this.dragStartX = event.x - this.image_container.offsetLeft;
 		this.dragStartY = event.y - this.image_container.offsetTop;
 	}
 
-	dragEnd(event) {
+	cropSelectionEnd(event) {
 		this.isDragging = false;
-		this.handleDragEvent(event);
+		this.handleCropSelectionEvent(event);
 	}
 
-	drag(event) {
-		this.handleDragEvent(event);
+	cropSelection(event) {
+		this.handleCropSelectionEvent(event);
 	}
 
 	getScaleFactor() {
 		return this.original_image.naturalWidth / this.original_image.clientWidth;
 	}
 
-	handleDragEvent(event) {
+	handleCropSelectionEvent(event) {
 		if (!this.isDragging) {
 			return;
 		}
@@ -237,6 +245,46 @@ class CropEditor {
 		this.positionBoundary();
 	}
 
+	handleCropMoveEvent(event) {
+		if (!this.isMoving) {
+			return;
+		}
+
+		this.dragEndX = event.x - this.crop_boundary.offsetLeft;
+		this.dragEndY = event.y - this.crop_boundary.offsetTop;
+
+		let scaleFactor = this.getScaleFactor();
+
+		this.source_x.value = parseInt(this.source_x.value) + Math.ceil((this.dragEndX - this.dragStartX) * scaleFactor);
+		this.source_y.value = parseInt(this.source_y.value) + Math.ceil((this.dragEndY - this.dragStartY) * scaleFactor);
+
+		// let width = Math.ceil(Math.abs(this.dragEndX - this.dragStartX) * scaleFactor);
+		// this.crop_width.value = Math.min(width, this.original_image.naturalWidth - this.source_x.value);
+
+		// let height = Math.ceil(Math.abs(this.dragEndY - this.dragStartY) * scaleFactor);
+		// this.crop_height.value = Math.min(height, this.original_image.naturalHeight - this.source_y.value);
+
+		this.positionBoundary();
+	}
+
+	moveSelectionStart(event) {
+		if (this.isDragging) {
+			return false;
+		}
+		this.isMoving = true;
+		this.dragStartX = event.x - this.crop_boundary.offsetLeft;
+		this.dragStartY = event.y - this.crop_boundary.offsetTop;
+	}
+
+	moveSelectionEnd(event) {
+		this.isMoving = false;
+		this.handleCropMoveEvent(event);
+	}
+
+	moveSelection(event) {
+		this.handleCropMoveEvent(event);
+	}
+
 	toggleCropButton() {
 		let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
 		this.edit_crop_button.style.display = typeof current.crop_method === "undefined" ? "none" : "";