gawells/Self-Service-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

calculate cropping boxes for the image

Browse Source
This commit is contained in:
gawells
2026-06-30 14:16:32 -04:00
parent 1426164dc4
commit d2b0955303
3 changed files with 80 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/profile_page.html
+10 -1
View File
@@ -103,6 +103,7 @@
class="noselect"
draggable="false"
/>
<div id="image_dark_overlay" draggable="false"></div>
</div>
<div id="grab-area" draggable="false">
<div id="box-scale-holder">
@@ -127,7 +128,9 @@
class="resize_anchor"
></div>
</div>
<div id="resize_photo_box" draggable="false"></div>
<div id="resize_photo_box" draggable="false">
<div id="circle-display"></div>
</div>
</div>
<button id="confirm_change" draggable="false">Confirm Change</button>
</div>
@@ -261,6 +264,12 @@
new_profile_image.style.setProperty("--x-size", image_width + "px");
new_profile_image.style.setProperty("--y-size", image_height + "px");
image_dark_overlay.style.setProperty("--x-size", image_width + "px");
image_dark_overlay.style.setProperty("--y-size", image_height + "px");
image_dark_overlay.style.setProperty("--x-offset", "0px");
image_dark_overlay.style.setProperty("--y-offset", "0px");
resize_photo_box.style.setProperty("--size", "350px");
});
static/javascript/resize_photo_dialouge.js
+30 -1
View File
@@ -1,4 +1,5 @@
const resize_photo_box = document.getElementById("resize_photo_box");
const image_dark_overlay = document.getElementById("image_dark_overlay");
// Drag handling
var startXOffset = 0,
@@ -22,14 +23,42 @@ function calculateOffsets() {
return { x: xOffset + left + right, y: yOffset + top + bottom };
}
function calculateBoxBoundsOnImage() {
offsets = calculateOffsets();
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,
};
}
var mouseClicked = false;
resize_photo_box.addEventListener("mousemove", () => {
if (!mouseClicked) return;
offsets = calculateOffsets();
y_top = new_profile_image.style.setProperty("--x-offset", offsets.x + "px");
new_profile_image.style.setProperty("--x-offset", offsets.x + "px");
new_profile_image.style.setProperty("--y-offset", offsets.y + "px");
image_dark_overlay.style.setProperty("--x-offset", offsets.x + "px");
image_dark_overlay.style.setProperty("--y-offset", offsets.y + "px");
bounds = calculateBoxBoundsOnImage();
image_dark_overlay.style.setProperty("--left-edge", bounds.left + "px");
image_dark_overlay.style.setProperty("--right-edge", bounds.right + "px");
image_dark_overlay.style.setProperty("--top-edge", bounds.top + "px");
image_dark_overlay.style.setProperty("--bottom-edge", bounds.bottom + "px");
});
resize_photo_box.addEventListener("mousedown", () => {
static/profile_page.css
+40
View File
@@ -156,6 +156,7 @@
#image_container {
position: absolute;
display: inline-block;
}
#darken_part {
@@ -252,3 +253,42 @@
width: 360px;
height: 360px;
}
#circle-display {
width: 100%;
height: 100%;
background: radial-gradient(
circle closest-side,
transparent 99%,
rgba(0, 0, 0, 0.5) 100%
);
display: none;
}
#image_dark_overlay {
background-color: rgba(0, 0, 0, 0.5);
pointer-events: none;
z-index: 2;
transform: translateX(calc(-50% + var(--x-offset) + 5px))
translateY(calc(-50% + var(--y-offset) + 5px));
position: absolute;
left: calc(350px / 2);
top: calc(350px / 2);
width: var(--x-size);
height: var(--y-size);
clip-path: polygon(
0% 0%,
0% 100%,
var(--left-edge) 100%,
var(--left-edge) var(--top-edge),
var(--right-edge) var(--top-edge),
var(--right-edge) var(--bottom-edge),
var(--left-edge) var(--bottom-edge),
var(--left-edge) 100%,
100% 100%,
100% 0%
);
}