From 3c54dc752a16f3af57e891a135da93ab8f17f3b6 Mon Sep 17 00:00:00 2001
From: Patrick <patrick@maschek.info>
Date: Sat, 28 Mar 2026 18:37:14 +0100
Subject: [PATCH] added grid snapping

---
 src/admin/gallery/script.js | 56 ++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/admin/gallery/script.js b/src/admin/gallery/script.js
index 0e1b505..42f296c 100644
--- a/src/admin/gallery/script.js
+++ b/src/admin/gallery/script.js
@@ -38,6 +38,11 @@ class ResizableBox {
 		this.resolution  = resolution;
 		this.aspectRatio = aspectRatio;
 
+		this.scale       = {
+			x: resolution.width  / bounding.width,
+			y: resolution.height / bounding.height
+		}
+
 		this.mouseStart  = { x: 0, y: 0 };
 		this.maxDelta    = { x: 0, y: 0 };
 		this.minDelta    = { x: 0, y: 0 };
@@ -128,8 +133,6 @@ class ResizableBox {
 
 	resize(delta, direction, handle_aspect_ratio = true) {
 
-		console.log(delta)
-
 		const sign = this.DIRECTIONS[direction].sign;
 
 		const normalized = {
@@ -137,10 +140,6 @@ class ResizableBox {
 			y: delta.y * sign.y
 		};
 
-		console.log(normalized)
-		console.log(this.minDelta)
-		console.log(this.maxDelta);
-
 		if (handle_aspect_ratio) {
 			//delta = this._applyAspectRatio(delta.x, delta.y, direction)
 
@@ -166,30 +165,43 @@ class ResizableBox {
 		delta.x = normalized.x * sign.x;
 		delta.y = normalized.y * sign.y;
 
-		console.log(delta)
+		let left   = this.elemStart.left;
+		let top    = this.elemStart.top;
+		let right  = this.elemStart.right;
+		let bottom = this.elemStart.bottom;
 
 		switch(this.direction) {
 			case 'nw':
-				this.element.style.left   = (this.elemStart.left   + delta.x) + "px";
-				this.element.style.top    = (this.elemStart.top    + delta.y) + "px";
-				this.element.style.width  = (this.elemStart.width  - delta.x) + "px";
-				this.element.style.height = (this.elemStart.height - delta.y) + "px";
+				left += delta.x;
+				top  += delta.y;
 				break;
 			case 'ne':
-				this.element.style.top    = (this.elemStart.top    + delta.y) + "px";
-				this.element.style.width  = (this.elemStart.width  + delta.x) + "px";
-				this.element.style.height = (this.elemStart.height - delta.y) + "px";
+				right += delta.x;
+				top   += delta.y;
 				break;
 			case 'sw':
-				this.element.style.left   = (this.elemStart.left   + delta.x) + "px";
-				this.element.style.width  = (this.elemStart.width  - delta.x) + "px";
-				this.element.style.height = (this.elemStart.height + delta.y) + "px";
+				left   += delta.x;
+				bottom += delta.y;
 				break;
 			case 'se':
-				this.element.style.width  = (this.elemStart.width  + delta.x) + "px";
-				this.element.style.height = (this.elemStart.height + delta.y) + "px";
+				right  += delta.x;
+				bottom += delta.y;
 				break;
 		}
+
+		left   = floor(left,   this.scale.x);
+		top    = floor(top,    this.scale.y);
+		right  =  ceil(right,  this.scale.x);
+		bottom =  ceil(bottom, this.scale.y);
+
+		const width  = right  - left;
+		const height = bottom - top;
+
+		this.element.style.left   = left   + "px";
+		this.element.style.top    = top    + "px";
+		this.element.style.width  = width  + "px";
+		this.element.style.height = height + "px";
+
 	}
 
 	_constructElement(parent) {
@@ -307,7 +319,11 @@ 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._editor, getRelativeClientRect(this._imgElement), {}, 4/3);
+			this._cutArea = new ResizableBox(
+				this._editor,
+				getRelativeClientRect(this._imgElement),
+				{ width: this._imgElement.naturalWidth, height: this._imgElement.naturalHeight },
+				4/3);
 
 			document.querySelector("#theatergf-edit-save").style.visibility = "visible";
 		});