Public/pics
2
2
Fork 2
Code Issues 6 Pull Requests 2 Releases Wiki Activity

Make crop editor usable #22

Merged
Aaron merged 27 commits from crop-editor into master 2020-12-30 20:06:17 +01:00
Conversation 0 Commits 27 Files Changed 7 +19
1 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5599ff8d9b - Show all commits

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