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

Proper dragging of the crop bounding rectangle/area.

This commit is contained in:
Aaron van Geffen 2020-11-23 19:00:42 +01:00
parent 5895f4faa6
commit 893d31af52
1 changed files with 13 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
public/js/crop_editor.js
View File

@ -198,35 +198,21 @@ class CropEditor {
dragStart(event) {
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}`);
this.dragStartX = event.x - this.image_container.offsetLeft;
this.dragStartY = event.y - this.image_container.offsetTop;
}
dragEnd(event) {
if (!this.isDragging) {
return;
}
this.isDragging = false;
console.log(`End @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
this.handleDragEvent(event);
}
drag(event) {
if (!this.isDragging) {
return;
}
// 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;
return this.original_image.naturalWidth / this.original_image.clientWidth;
}
handleDragEvent(event) {
@ -234,20 +220,15 @@ class CropEditor {
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);
this.dragEndX = event.x - this.image_container.offsetLeft;
this.dragEndY = event.y - this.image_container.offsetTop;
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.source_x.value = Math.ceil(Math.min(this.dragStartX, this.dragEndX) * scaleFactor);
this.source_y.value = Math.ceil(Math.min(this.dragStartY, this.dragEndY) * scaleFactor);
this.crop_width.value = Math.ceil(Math.abs(this.dragEndX - this.dragStartX) * scaleFactor);
this.crop_height.value = Math.ceil(Math.abs(this.dragEndY - this.dragStartY) * scaleFactor);
this.positionBoundary();
}
@ -259,9 +240,9 @@ class CropEditor {
positionBoundary(event) {
let scaleFactor = this.getScaleFactor();
crop_boundary.style.left = parseInt(this.source_x.value) * scaleFactor + "px";
crop_boundary.style.top = parseInt(this.source_y.value) * scaleFactor + "px";
crop_boundary.style.width = parseInt(this.crop_width.value) * scaleFactor + "px";
crop_boundary.style.height = parseInt(this.crop_height.value) * scaleFactor + "px";
crop_boundary.style.left = parseInt(this.source_x.value) / scaleFactor + "px";
crop_boundary.style.top = parseInt(this.source_y.value) / scaleFactor + "px";
crop_boundary.style.width = parseInt(this.crop_width.value) / scaleFactor + "px";
crop_boundary.style.height = parseInt(this.crop_height.value) / scaleFactor + "px";
}
}