From ee4591e60a7b43560b8063deb58e3eb5b2d080da Mon Sep 17 00:00:00 2001
From: Patrick <patrick@maschek.info>
Date: Sat, 28 Mar 2026 18:54:59 +0100
Subject: [PATCH] basics of image rest endpoints

---
 src/admin/gallery/script.js    | 40 +++++++++++++++-------------------
 src/backend/backend.php        |  2 --
 src/backend/endpoints/crop.php |  7 ++++--
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/admin/gallery/script.js b/src/admin/gallery/script.js
index 42f296c..eb82971 100644
--- a/src/admin/gallery/script.js
+++ b/src/admin/gallery/script.js
@@ -141,7 +141,6 @@ class ResizableBox {
 		};
 
 		if (handle_aspect_ratio) {
-			//delta = this._applyAspectRatio(delta.x, delta.y, direction)
 
 			if (Math.abs(normalized.x) > Math.abs(normalized.y * this.aspectRatio)) {
 				normalized.x = clamp(normalized.x,
@@ -201,7 +200,17 @@ class ResizableBox {
 		this.element.style.top    = top    + "px";
 		this.element.style.width  = width  + "px";
 		this.element.style.height = height + "px";
+	}
 
+	getMappedPosition() {
+		const rect = getRelativeClientRect(this.element);
+
+		return new DOMRect(
+			Math.floor(rect.x      * this.scale.x),
+			Math.floor(rect.y      * this.scale.y),
+			Math.floor(rect.width  * this.scale.x),
+			Math.floor(rect.height * this.scale.y)
+		);
 	}
 
 	_constructElement(parent) {
@@ -319,7 +328,7 @@ class Editor {
 			this._imgElement.style.left = (this._editor.clientWidth - this._imgElement.offsetWidth)   / 2 + "px";
 			this._imgElement.style.top  = (this._editor.clientHeight - this._imgElement.offsetHeight) / 2 + "px";
 
-			this._cutArea = new ResizableBox(
+			this._cutSelector = new ResizableBox(
 				this._editor,
 				getRelativeClientRect(this._imgElement),
 				{ width: this._imgElement.naturalWidth, height: this._imgElement.naturalHeight },
@@ -330,22 +339,9 @@ class Editor {
 	}
 
 	save() {
+		const region = this._cutSelector.getMappedPosition();
 
-		const relative_position = {
-			x: (this._cutSelector.offsetLeft + 1 - this._imgElement.offsetLeft) / this._imgElement.clientWidth,
-			y: (this._cutSelector.offsetTop + 1 - this._imgElement.offsetTop) / this._imgElement.clientHeight,
-			width: (this._cutSelector.clientWidth - 2) / this._imgElement.clientWidth,
-			height: (this._cutSelector.clientHeight - 2) / this._imgElement.clientHeight
-		}
-
-		const mapped_region = {
-			x: relative_position.x * this._imgElement.naturalWidth,
-			y: relative_position.y * this._imgElement.naturalHeight,
-			width: relative_position.width * this._imgElement.naturalWidth,
-			height: relative_position.height * this._imgElement.naturalHeight
-		}
-
-		console.log(mapped_region)
+		console.log(region)
 
 		fetch(wpAPISettings.root + 'theatergf/gallery/v1/crop/new', {
 			method: 'POST',
@@ -354,11 +350,11 @@ class Editor {
 				'Content-Type': 'application/json'
 			},
 			body: JSON.stringify({
-				img_id: 53,
-				x: mapped_region.x,
-				y: mapped_region.y,
-				width: mapped_region.width,
-				height: mapped_region.height
+				img_id:  53,
+				x:       region.x,
+				y:       region.y,
+				width:   region.width,
+				height:  region.height
 			})
 		}).then((response) => response.json().then((json) => console.log(json))).catch((error) => console.log(error));
 	}
diff --git a/src/backend/backend.php b/src/backend/backend.php
index df67658..0a485c4 100644
--- a/src/backend/backend.php
+++ b/src/backend/backend.php
@@ -2,8 +2,6 @@
 
 namespace TheaterGF\Gallery\Backend;
 
-require_once __DIR__ . '/util.php';
-
 require_once __DIR__ . '/endpoints/crop.php';
 
 add_action( 'rest_api_init', function () {
diff --git a/src/backend/endpoints/crop.php b/src/backend/endpoints/crop.php
index f253d0c..d10e692 100644
--- a/src/backend/endpoints/crop.php
+++ b/src/backend/endpoints/crop.php
@@ -22,11 +22,11 @@ class CROP_Endpoints extends \WP_REST_Controller {
 				],
 				'x' => [
 					'required' => true,
-					'validate_callback' => function ( $param, $request, $key) { return is_numeric($param) && $param > 0; }
+					'validate_callback' => function ( $param, $request, $key) { return is_numeric($param) && $param >= 0; }
 				],
 				'y' => [
 					'required' => true,
-					'validate_callback' => function ( $param, $request, $key) { return is_numeric($param) && $param > 0; }
+					'validate_callback' => function ( $param, $request, $key) { return is_numeric($param) && $param >= 0; }
 				],
 				'width' => [
 					'required' => true,
@@ -54,6 +54,9 @@ class CROP_Endpoints extends \WP_REST_Controller {
 	}
 
 	public function create_item( $request ) {
+
+		//$image = get_attached_file()
+
 		return true;
 	}