65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
const resize_photo_box = document.getElementById("resize_photo_box");
|
|
|
|
// Drag handling
|
|
var startXOffset = 0,
|
|
startYOffset = 0;
|
|
|
|
function calculateOffsets() {
|
|
const yOffset = startYOffset + (currentY - y_start);
|
|
const xOffset = startXOffset + (currentX - x_start);
|
|
|
|
var top = bitmap.height / 2 - yOffset - 175;
|
|
if (top > 0) top = 0;
|
|
|
|
var bottom = -(bitmap.height / 2) - yOffset + 10 + 175;
|
|
if (bottom < 0) bottom = 0;
|
|
|
|
var left = bitmap.width / 2 - xOffset - 175;
|
|
if (left > 0) left = 0;
|
|
|
|
var right = -(bitmap.width / 2) - xOffset + 10 + 175;
|
|
if (right < 0) right = 0;
|
|
return { x: xOffset + left + right, y: yOffset + top + bottom };
|
|
}
|
|
|
|
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("--y-offset", offsets.y + "px");
|
|
});
|
|
|
|
resize_photo_box.addEventListener("mousedown", () => {
|
|
x_start = currentX;
|
|
y_start = currentY;
|
|
mouseClicked = true;
|
|
set_cursor_state(CURSOR_GRABBING);
|
|
});
|
|
|
|
let unclickedMouse = false;
|
|
resize_photo_box.addEventListener("mouseup", () => {
|
|
if (!unclickedMouse) return;
|
|
unclickedMouse = false;
|
|
offsets = calculateOffsets();
|
|
|
|
startXOffset = offsets.x;
|
|
startYOffset = offsets.y;
|
|
});
|
|
|
|
document.body.addEventListener("mouseup", () => {
|
|
if (mouseClicked) unclickedMouse = true;
|
|
mouseClicked = false;
|
|
set_cursor_state(CURSOR_NORMAL);
|
|
});
|
|
|
|
// handle anchors
|
|
resize_anchors = document.getElementsByClassName("resize_anchor");
|
|
for (var i = 0; i < resize_anchors.length; i++) {
|
|
resize_anchors[i].addEventListener("mousedown", (e) => {
|
|
e.stopPropagation();
|
|
});
|
|
}
|