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

added grid snapping

This commit is contained in:
Patrick 2026-03-28 18:37:14 +01:00
parent 21f8096636
commit 3c54dc752a
1 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,11 @@ class ResizableBox {
this.resolution = resolution; this.resolution = resolution;
this.aspectRatio = aspectRatio; this.aspectRatio = aspectRatio;
this.scale = {
x: resolution.width / bounding.width,
y: resolution.height / bounding.height
}
this.mouseStart = { x: 0, y: 0 }; this.mouseStart = { x: 0, y: 0 };
this.maxDelta = { x: 0, y: 0 }; this.maxDelta = { x: 0, y: 0 };
this.minDelta = { x: 0, y: 0 }; this.minDelta = { x: 0, y: 0 };
@ -128,8 +133,6 @@ class ResizableBox {
resize(delta, direction, handle_aspect_ratio = true) { resize(delta, direction, handle_aspect_ratio = true) {
console.log(delta)
const sign = this.DIRECTIONS[direction].sign; const sign = this.DIRECTIONS[direction].sign;
const normalized = { const normalized = {
@ -137,10 +140,6 @@ class ResizableBox {
y: delta.y * sign.y y: delta.y * sign.y
}; };
console.log(normalized)
console.log(this.minDelta)
console.log(this.maxDelta);
if (handle_aspect_ratio) { if (handle_aspect_ratio) {
//delta = this._applyAspectRatio(delta.x, delta.y, direction) //delta = this._applyAspectRatio(delta.x, delta.y, direction)
@ -166,30 +165,43 @@ class ResizableBox {
delta.x = normalized.x * sign.x; delta.x = normalized.x * sign.x;
delta.y = normalized.y * sign.y; 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) { switch(this.direction) {
case 'nw': case 'nw':
this.element.style.left = (this.elemStart.left + delta.x) + "px"; left += delta.x;
this.element.style.top = (this.elemStart.top + delta.y) + "px"; top += delta.y;
this.element.style.width = (this.elemStart.width - delta.x) + "px";
this.element.style.height = (this.elemStart.height - delta.y) + "px";
break; break;
case 'ne': case 'ne':
this.element.style.top = (this.elemStart.top + delta.y) + "px"; right += delta.x;
this.element.style.width = (this.elemStart.width + delta.x) + "px"; top += delta.y;
this.element.style.height = (this.elemStart.height - delta.y) + "px";
break; break;
case 'sw': case 'sw':
this.element.style.left = (this.elemStart.left + delta.x) + "px"; left += delta.x;
this.element.style.width = (this.elemStart.width - delta.x) + "px"; bottom += delta.y;
this.element.style.height = (this.elemStart.height + delta.y) + "px";
break; break;
case 'se': case 'se':
this.element.style.width = (this.elemStart.width + delta.x) + "px"; right += delta.x;
this.element.style.height = (this.elemStart.height + delta.y) + "px"; bottom += delta.y;
break; 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) { _constructElement(parent) {
@ -307,7 +319,11 @@ class Editor {
this._imgElement.style.left = (this._editor.clientWidth - this._imgElement.offsetWidth) / 2 + "px"; 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._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"; document.querySelector("#theatergf-edit-save").style.visibility = "visible";
}); });