Crop editor: use numeric input boxes with appropriate constraints.
This commit is contained in:
parent
e7490e40dd
commit
5599ff8d9b
@ -34,6 +34,8 @@ class CropEditor {
|
|||||||
this.position.appendChild(source_x_label);
|
this.position.appendChild(source_x_label);
|
||||||
|
|
||||||
this.source_x = document.createElement("input");
|
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.source_x.addEventListener("keyup", this.positionBoundary.bind(this));
|
||||||
this.position.appendChild(this.source_x);
|
this.position.appendChild(this.source_x);
|
||||||
|
|
||||||
@ -41,6 +43,8 @@ class CropEditor {
|
|||||||
this.position.appendChild(source_y_label);
|
this.position.appendChild(source_y_label);
|
||||||
|
|
||||||
this.source_y = document.createElement("input");
|
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.source_y.addEventListener("keyup", this.positionBoundary.bind(this));
|
||||||
this.position.appendChild(this.source_y);
|
this.position.appendChild(this.source_y);
|
||||||
|
|
||||||
@ -48,6 +52,8 @@ class CropEditor {
|
|||||||
this.position.appendChild(crop_width_label);
|
this.position.appendChild(crop_width_label);
|
||||||
|
|
||||||
this.crop_width = document.createElement("input");
|
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.crop_width.addEventListener("keyup", this.positionBoundary.bind(this));
|
||||||
this.position.appendChild(this.crop_width);
|
this.position.appendChild(this.crop_width);
|
||||||
|
|
||||||
@ -55,6 +61,8 @@ class CropEditor {
|
|||||||
this.position.appendChild(crop_height_label);
|
this.position.appendChild(crop_height_label);
|
||||||
|
|
||||||
this.crop_height = document.createElement("input");
|
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.crop_height.addEventListener("keyup", this.positionBoundary.bind(this));
|
||||||
this.position.appendChild(this.crop_height);
|
this.position.appendChild(this.crop_height);
|
||||||
|
|
||||||
@ -140,6 +148,17 @@ class CropEditor {
|
|||||||
this.source_x.value = region[2];
|
this.source_x.value = region[2];
|
||||||
this.source_y.value = region[3];
|
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() {
|
showContainer() {
|
||||||
|
Loading…
Reference in New Issue
Block a user