basics of image rest endpoints

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 = {
+		console.log(region)
-			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)
 
 		fetch(wpAPISettings.root + 'theatergf/gallery/v1/crop/new', {
 			method: 'POST',
@@ -355,10 +351,10 @@ class Editor {
 			},
 			body: JSON.stringify({
 				img_id:  53,
-				x: mapped_region.x,
+				x:       region.x,
-				y: mapped_region.y,
+				y:       region.y,
-				width: mapped_region.width,
+				width:   region.width,
-				height: mapped_region.height
+				height:  region.height
 			})
 		}).then((response) => response.json().then((json) => console.log(json))).catch((error) => console.log(error));
 	}

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 () {

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;
 	}