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

Initial version of crop boundary dragging.

Browse Source
This commit is contained in:
Aaron van Geffen 2020-11-23 18:13:38 +01:00
parent 837c92db44
commit 8e7a09f3f3
1 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
public/js/crop_editor.js
View File

@ -187,16 +187,19 @@ class CropEditor {
addEvents(event) { addEvents(event) {
let drag_target = this.image_container; let drag_target = this.image_container;
drag_target.addEventListener('mousedown', this.dragStart); drag_target.addEventListener('mousedown', this.dragStart.bind(this));
drag_target.addEventListener('mousemove', this.drag); drag_target.addEventListener('mousemove', this.drag.bind(this));
drag_target.addEventListener('mouseup', this.dragEnd); drag_target.addEventListener('mouseup', this.dragEnd.bind(this));
drag_target.addEventListener('mouseout', this.dragEnd); // drag_target.addEventListener('mouseout', this.dragEnd.bind(this));
this.original_image.addEventListener('mousedown', event => {return false}); this.original_image.addEventListener('mousedown', event => {return false});
this.original_image.addEventListener('dragstart', event => {return false});
} }
dragStart(event) { dragStart(event) {
this.isDragging = true; this.isDragging = true;
this.dragStartX = event.pageX - event.target.offsetLeft;
this.dragStartY = event.pageY - event.target.offsetTop;
console.log(`Start @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`); console.log(`Start @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
} }
@ -206,13 +209,47 @@ class CropEditor {
} }
this.isDragging = false; this.isDragging = false;
console.log(`End @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`); console.log(`End @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
this.handleDragEvent(event);
} }
drag(event) { drag(event) {
if (!this.isDragging) { if (!this.isDragging) {
return; return;
} }
console.log(`Drag @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`); // console.log(`Drag @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
this.handleDragEvent(event);
}
getScaleFactor() {
let real_width = this.original_image.naturalWidth,
real_height = this.original_image.naturalHeight,
scaled_width = this.original_image.clientWidth,
scaled_height = this.original_image.clientHeight;
return scaled_width / real_width;
}
handleDragEvent(event) {
if (!this.isDragging) {
return;
}
let curX = event.pageX - event.target.offsetLeft,
curY = event.pageY - event.target.offsetTop;
this.dragEndX = Math.max(curX, this.dragStartX);
this.dragEndY = Math.max(curY, this.dragStartY);
this.dragStartX = Math.min(curX, this.dragStartX);
this.dragStartY = Math.min(curY, this.dragStartY);
let scaleFactor = this.getScaleFactor();
this.source_x.value = this.dragStartX;
this.source_y.value = this.dragStartY;
this.crop_width.value = Math.ceil(this.dragEndX / scaleFactor);
this.crop_height.value = Math.ceil(this.dragEndY / scaleFactor);
this.positionBoundary();
} }
toggleCropButton() { toggleCropButton() {