From 5e0d4df2f75f12cca6a5841360f99c62ff1b5fc3 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Mon, 23 Nov 2020 20:36:46 +0100 Subject: [PATCH] Allow moving/dragging the crop boundary. Currently unconstrained. --- public/css/admin.css | 1 + public/js/crop_editor.js | 70 +++++++++++++++++++++++++++++++++------- 2 files changed, 60 insertions(+), 11 deletions(-) diff --git a/public/css/admin.css b/public/css/admin.css index 36534d2..34a56b4 100644 --- a/public/css/admin.css +++ b/public/css/admin.css @@ -183,6 +183,7 @@ body { #crop_boundary { border: 1px dashed rgb(255, 255, 255); background: rgba(255, 255, 255, 0.4); + cursor: move; position: absolute; z-index: 200; width: 500px; diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js index 9f4a6ca..e603210 100644 --- a/public/js/crop_editor.js +++ b/public/js/crop_editor.js @@ -186,36 +186,44 @@ class CropEditor { } addEvents(event) { - let drag_target = this.image_container; - drag_target.addEventListener('mousedown', this.dragStart.bind(this)); - drag_target.addEventListener('mousemove', this.drag.bind(this)); - drag_target.addEventListener('mouseup', this.dragEnd.bind(this)); - // drag_target.addEventListener('mouseout', this.dragEnd.bind(this)); + let cropTarget = this.image_container; + cropTarget.addEventListener('mousedown', this.cropSelectionStart.bind(this)); + cropTarget.addEventListener('mousemove', this.cropSelection.bind(this)); + cropTarget.addEventListener('mouseup', this.cropSelectionEnd.bind(this)); + // cropTarget.addEventListener('mouseout', this.cropSelectionEnd.bind(this)); this.original_image.addEventListener('mousedown', event => {return false}); this.original_image.addEventListener('dragstart', event => {return false}); + + let moveTarget = this.crop_boundary; + moveTarget.addEventListener('mousedown', this.moveSelectionStart.bind(this)); + moveTarget.addEventListener('mousemove', this.moveSelection.bind(this)); + moveTarget.addEventListener('mouseup', this.moveSelectionEnd.bind(this)); } - dragStart(event) { + cropSelectionStart(event) { + if (this.isMoving) { + return false; + } this.isDragging = true; this.dragStartX = event.x - this.image_container.offsetLeft; this.dragStartY = event.y - this.image_container.offsetTop; } - dragEnd(event) { + cropSelectionEnd(event) { this.isDragging = false; - this.handleDragEvent(event); + this.handleCropSelectionEvent(event); } - drag(event) { - this.handleDragEvent(event); + cropSelection(event) { + this.handleCropSelectionEvent(event); } getScaleFactor() { return this.original_image.naturalWidth / this.original_image.clientWidth; } - handleDragEvent(event) { + handleCropSelectionEvent(event) { if (!this.isDragging) { return; } @@ -237,6 +245,46 @@ class CropEditor { this.positionBoundary(); } + handleCropMoveEvent(event) { + if (!this.isMoving) { + return; + } + + this.dragEndX = event.x - this.crop_boundary.offsetLeft; + this.dragEndY = event.y - this.crop_boundary.offsetTop; + + let scaleFactor = this.getScaleFactor(); + + this.source_x.value = parseInt(this.source_x.value) + Math.ceil((this.dragEndX - this.dragStartX) * scaleFactor); + this.source_y.value = parseInt(this.source_y.value) + Math.ceil((this.dragEndY - this.dragStartY) * scaleFactor); + + // let width = Math.ceil(Math.abs(this.dragEndX - this.dragStartX) * scaleFactor); + // this.crop_width.value = Math.min(width, this.original_image.naturalWidth - this.source_x.value); + + // let height = Math.ceil(Math.abs(this.dragEndY - this.dragStartY) * scaleFactor); + // this.crop_height.value = Math.min(height, this.original_image.naturalHeight - this.source_y.value); + + this.positionBoundary(); + } + + moveSelectionStart(event) { + if (this.isDragging) { + return false; + } + this.isMoving = true; + this.dragStartX = event.x - this.crop_boundary.offsetLeft; + this.dragStartY = event.y - this.crop_boundary.offsetTop; + } + + moveSelectionEnd(event) { + this.isMoving = false; + this.handleCropMoveEvent(event); + } + + moveSelection(event) { + this.handleCropMoveEvent(event); + } + toggleCropButton() { let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset; this.edit_crop_button.style.display = typeof current.crop_method === "undefined" ? "none" : "";