electricdusk/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects Releases Wiki Activity

Crop editor: use numeric input boxes with appropriate constraints.

Browse Source
This commit is contained in:
Aaron van Geffen 2020-11-29 17:28:52 +01:00
parent e7490e40dd
commit 5599ff8d9b
1 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/js/crop_editor.js
View File

@ -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() {