public/js/crop_editor.js

@@ -34,6 +34,8 @@ class CropEditor {
 		this.position.appendChild(source_x_label);
 
 		this.source_x = document.createElement("input");
+		this.source_x.type = 'number';
+		this.source_x.addEventListener("change", this.positionBoundary.bind(this));
 		this.source_x.addEventListener("keyup", this.positionBoundary.bind(this));
 		this.position.appendChild(this.source_x);
 
@@ -41,6 +43,8 @@ class CropEditor {
 		this.position.appendChild(source_y_label);
 
 		this.source_y = document.createElement("input");
+		this.source_y.type = 'number';
+		this.source_y.addEventListener("change", this.positionBoundary.bind(this));
 		this.source_y.addEventListener("keyup", this.positionBoundary.bind(this));
 		this.position.appendChild(this.source_y);
 
@@ -48,6 +52,8 @@ class CropEditor {
 		this.position.appendChild(crop_width_label);
 
 		this.crop_width = document.createElement("input");
+		this.crop_width.type = 'number';
+		this.crop_width.addEventListener("change", this.positionBoundary.bind(this));
 		this.crop_width.addEventListener("keyup", this.positionBoundary.bind(this));
 		this.position.appendChild(this.crop_width);
 
@@ -55,6 +61,8 @@ class CropEditor {
 		this.position.appendChild(crop_height_label);
 
 		this.crop_height = document.createElement("input");
+		this.crop_height.type = 'number';
+		this.crop_height.addEventListener("change", this.positionBoundary.bind(this));
 		this.crop_height.addEventListener("keyup", this.positionBoundary.bind(this));
 		this.position.appendChild(this.crop_height);
 
@@ -140,6 +148,17 @@ class CropEditor {
 			this.source_x.value = region[2];
 			this.source_y.value = region[3];
 		}
+
+		this.crop_width.min = 1;
+		this.crop_height.min = 1;
+		this.source_x.min = 0;
+		this.source_y.min = 0;
+
+		let source = this.original_image;
+		this.crop_width.max = source.naturalWidth;
+		this.crop_height.max = source.naturalHeight;
+		this.source_x.max = source.naturalWidth - 1;
+		this.source_y.max = source.naturalHeight - 1;
 	}
 
 	showContainer() {