make things look nicer and work on image change

This commit is contained in:
2026-06-30 14:24:03 -04:00
parent d2b0955303
commit 2ba179a62b
3 changed files with 28 additions and 12 deletions
+6 -9
View File
@@ -23,21 +23,18 @@ function calculateOffsets() {
return { x: xOffset + left + right, y: yOffset + top + bottom };
}
function calculateBoxBoundsOnImage() {
offsets = calculateOffsets();
function calculateBoxBoundsOnImage(offsets) {
const x_overspill = image_width - 360;
const left_overspill = x_overspill / 2 - offsets.x;
// const right_overspill = x_overspill / 2 - offsets.y;
const y_overspill = image_height - 360;
const top_overspill = y_overspill / 2 - offsets.y;
return {
left: left_overspill + 5,
right: left_overspill + 5 + 350,
top: top_overspill + 5,
bottom: top_overspill + 350 + 5,
left: left_overspill,
right: left_overspill + 360,
top: top_overspill,
bottom: top_overspill + 360,
};
}
@@ -53,7 +50,7 @@ resize_photo_box.addEventListener("mousemove", () => {
image_dark_overlay.style.setProperty("--x-offset", offsets.x + "px");
image_dark_overlay.style.setProperty("--y-offset", offsets.y + "px");
bounds = calculateBoxBoundsOnImage();
bounds = calculateBoxBoundsOnImage(offsets);
image_dark_overlay.style.setProperty("--left-edge", bounds.left + "px");
image_dark_overlay.style.setProperty("--right-edge", bounds.right + "px");