add boundies for moving image around

src/pages/profile_page.html

@@ -197,6 +197,8 @@
     var x_start = 0,
         y_start = 0;
 
+    var bitmap;
+
     fileInput.addEventListener("change", async () => {
         document.getElementById("popup_background").classList.remove("hidden");
 
@@ -214,7 +216,7 @@
             .classList.remove("hidden");
 
         image = URL.createObjectURL(file);
-        const bitmap = await createImageBitmap(file);
+        bitmap = await createImageBitmap(file);
 
         new_profile_image.src = image;
 
@@ -257,21 +259,38 @@
         currentPreviewURL = image;
     });
 
+    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;
-        pos_difference_x = currentX - x_start;
-        pos_difference_y = currentY - y_start;
-        console.log(pos_difference_x, pos_difference_y);
 
-        // resize_photo_box.style.setProperty(
+        offsets = calculateOffsets();
-        //     "--x-offset",
+
-        //     pos_difference_x + "px",
+        y_top = new_profile_image.style.setProperty(
-        // );
+            "--x-offset",
-        // resize_photo_box.style.setProperty(
+            offsets.x + "px",
-        //     "--y-offset",
+        );
-        //     pos_difference_y + "px",
+        new_profile_image.style.setProperty("--y-offset", offsets.y + "px");
-        // );
     });
 
     resize_photo_box.addEventListener("mousedown", () => {
@@ -281,6 +300,13 @@
     });
 
     resize_photo_box.addEventListener("mouseup", () => {
+        offsets = calculateOffsets();
+
+        startXOffset = offsets.x;
+        startYOffset = offsets.y;
+    });
+
+    document.body.addEventListener("mouseup", () => {
         mouseClicked = false;
     });
 </script>