From 9d95df81fe68ee12f48275eea4f28b9c7f79527d Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Mon, 23 Nov 2020 12:35:42 +0100
Subject: [PATCH] WIP: finally implement drag events.

---
 public/js/crop_editor.js    | 28 ++++++++++++++++++++--------
 templates/EditAssetForm.php |  2 +-
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js
index ec1511a..f272e9d 100644
--- a/public/js/crop_editor.js
+++ b/public/js/crop_editor.js
@@ -71,6 +71,7 @@ class CropEditor {
 		this.image_container.appendChild(this.crop_boundary);
 
 		this.original_image = document.createElement("img");
+		this.original_image.draggable = false;
 		this.original_image.id = "original_image";
 		this.original_image.src = this.opt.original_image_src;
 		this.image_container.appendChild(this.original_image);
@@ -134,6 +135,7 @@ class CropEditor {
 		this.container.style.display = '';
 		this.setInputValues();
 		this.positionBoundary();
+		this.addEvents();
 	}
 
 	save() {
@@ -175,23 +177,33 @@ class CropEditor {
 	}
 
 	addEvents(event) {
-		let drag_target = document.getElementById(opt.drag_target);
-		drag_target.addEventListener('dragstart', this.dragStart);
-		drag_target.addEventListener('drag', this.drag);
-		drag_target.addEventListener('dragend', this.dragEnd);
+		let drag_target = this.image_container;
+		drag_target.addEventListener('mousedown', this.dragStart);
+		drag_target.addEventListener('mousemove', this.drag);
+		drag_target.addEventListener('mouseup', this.dragEnd);
+		drag_target.addEventListener('mouseout', this.dragEnd);
+
+		this.original_image.addEventListener('mousedown', event => {return false});
 	}
 
 	dragStart(event) {
-		console.log(event);
-		event.preventDefault();
+		this.isDragging = true;
+		console.log(`Start @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
 	}
 
 	dragEnd(event) {
-		console.log(event);
+		if (!this.isDragging) {
+			return;
+		}
+		this.isDragging = false;
+		console.log(`End @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
 	}
 
 	drag(event) {
-		console.log(event);
+		if (!this.isDragging) {
+			return;
+		}
+		console.log(`Drag @ x=${event.pageX}, y=${event.pageY}, which=${event.which}`);
 	}
 
 	toggleCropButton() {
diff --git a/templates/EditAssetForm.php b/templates/EditAssetForm.php
index 1dd3ed6..55911d7 100644
--- a/templates/EditAssetForm.php
+++ b/templates/EditAssetForm.php
@@ -200,7 +200,7 @@ class EditAssetForm extends SubTemplate
 							original_image_src: "', $this->asset->getUrl(), '",
 							editor_container_parent_id: "asset_form",
 							thumbnail_select_id: "thumbnail_src",
-							drag_target: "drag_target",
+							drag_target: ".crop_image_container",
 							asset_id: ', $this->asset->getId(), ',
 							after_save: function(data) {
 								// Update thumbnail