TTGF
/
theatergf-gallery
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

basics of image rest endpoints

This commit is contained in:
Patrick 2026-03-28 18:54:59 +01:00
parent 3c54dc752a
commit ee4591e60a
3 changed files with 23 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/admin/gallery/script.js
View File

@ -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',
@ -355,10 +351,10 @@ class Editor {
},
body: JSON.stringify({
img_id: 53,
x: mapped_region.x,
y: mapped_region.y,
width: mapped_region.width,
height: mapped_region.height
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));
}

2
src/backend/backend.php
View File

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

7
src/backend/endpoints/crop.php
View File

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