Make crop editor usable #22
@ -198,35 +198,21 @@ class CropEditor {
|
|||||||
|
|
||||||
dragStart(event) {
|
dragStart(event) {
|
||||||
this.isDragging = true;
|
this.isDragging = true;
|
||||||
this.dragStartX = event.pageX - event.target.offsetLeft;
|
this.dragStartX = event.x - this.image_container.offsetLeft;
|
||||||
this.dragStartY = event.pageY - event.target.offsetTop;
|
this.dragStartY = event.y - this.image_container.offsetTop;
|
||||||
console.log(`Start @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
dragEnd(event) {
|
dragEnd(event) {
|
||||||
if (!this.isDragging) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.isDragging = false;
|
this.isDragging = false;
|
||||||
console.log(`End @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
|
|
||||||
this.handleDragEvent(event);
|
this.handleDragEvent(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
drag(event) {
|
drag(event) {
|
||||||
if (!this.isDragging) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// console.log(`Drag @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
|
|
||||||
this.handleDragEvent(event);
|
this.handleDragEvent(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
getScaleFactor() {
|
getScaleFactor() {
|
||||||
let real_width = this.original_image.naturalWidth,
|
return this.original_image.naturalWidth / this.original_image.clientWidth;
|
||||||
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) {
|
handleDragEvent(event) {
|
||||||
@ -234,20 +220,15 @@ class CropEditor {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let curX = event.pageX - event.target.offsetLeft,
|
this.dragEndX = event.x - this.image_container.offsetLeft;
|
||||||
curY = event.pageY - event.target.offsetTop;
|
this.dragEndY = event.y - this.image_container.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();
|
let scaleFactor = this.getScaleFactor();
|
||||||
|
|
||||||
this.source_x.value = this.dragStartX;
|
this.source_x.value = Math.ceil(Math.min(this.dragStartX, this.dragEndX) * scaleFactor);
|
||||||
this.source_y.value = this.dragStartY;
|
this.source_y.value = Math.ceil(Math.min(this.dragStartY, this.dragEndY) * scaleFactor);
|
||||||
this.crop_width.value = Math.ceil(this.dragEndX / scaleFactor);
|
this.crop_width.value = Math.ceil(Math.abs(this.dragEndX - this.dragStartX) * scaleFactor);
|
||||||
this.crop_height.value = Math.ceil(this.dragEndY / scaleFactor);
|
this.crop_height.value = Math.ceil(Math.abs(this.dragEndY - this.dragStartY) * scaleFactor);
|
||||||
|
|
||||||
this.positionBoundary();
|
this.positionBoundary();
|
||||||
}
|
}
|
||||||
@ -259,9 +240,9 @@ class CropEditor {
|
|||||||
|
|
||||||
positionBoundary(event) {
|
positionBoundary(event) {
|
||||||
let scaleFactor = this.getScaleFactor();
|
let scaleFactor = this.getScaleFactor();
|
||||||
crop_boundary.style.left = parseInt(this.source_x.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.top = parseInt(this.source_y.value) / scaleFactor + "px";
|
||||||
crop_boundary.style.width = parseInt(this.crop_width.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.height = parseInt(this.crop_height.value) / scaleFactor + "px";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user