resize image to fit bounds

src/pages/profile_page.html

@@ -99,16 +99,31 @@
             class="noselect"
             draggable="false"
         />
-        <!--<div id="darken_part"></div>-->
     </div>
-    <div id="grab-area">
+    <div id="grab-area" draggable="false">
         <div id="box-scale-holder">
-            <div id="top_left_resize" class="resize_anchor"></div>
-            <div id="top_right_resize" class="resize_anchor"></div>
-            <div id="bottom_left_resize" class="resize_anchor"></div>
-            <div id="bottom_right_resize" class="resize_anchor"></div>
+            <div
+                draggable="false"
+                id="top_left_resize"
+                class="resize_anchor"
+            ></div>
+            <div
+                draggable="false"
+                id="top_right_resize"
+                class="resize_anchor"
+            ></div>
+            <div
+                draggable="false"
+                id="bottom_left_resize"
+                class="resize_anchor"
+            ></div>
+            <div
+                draggable="false"
+                id="bottom_right_resize"
+                class="resize_anchor"
+            ></div>
         </div>
-        <div id="resize_photo_box"></div>
+        <div id="resize_photo_box" draggable="false"></div>
     </div>
     <button id="confirm_change">Confirm Change</button>
 </div>
@@ -206,7 +221,8 @@
     var x_start = 0,
         y_start = 0;
 
-    var bitmap;
+    var image_width = 0,
+        image_height = 0;
 
     fileInput.addEventListener("change", async () => {
         document.getElementById("popup_background").classList.remove("hidden");
@@ -225,17 +241,25 @@
             .classList.remove("hidden");
 
         image = URL.createObjectURL(file);
-        bitmap = await createImageBitmap(file);
+        var bitmap = await createImageBitmap(file);
 
         new_profile_image.src = image;
 
-        resize_photo_box.style.setProperty(
-            "--image-width",
-            bitmap.width + "px",
-        );
-
         new_profile_image.style.setProperty("--x-offset", "0px");
         new_profile_image.style.setProperty("--y-offset", "0px");
+
+        x_dimension = max(bitmap.width, 360);
+        y_dimension = max(bitmap.height, 360);
+
+        smaller_dimension = min(x_dimension, y_dimension);
+        diff_to_350 = 360 / smaller_dimension;
+
+        image_width = bitmap.width * diff_to_350;
+        image_height = bitmap.height * diff_to_350;
+
+        new_profile_image.style.setProperty("--x-size", image_width + "px");
+        new_profile_image.style.setProperty("--y-size", image_height + "px");
+
         resize_photo_box.style.setProperty("--size", "350px");
     });
 

static/javascript/resize_photo_dialouge.js

@@ -8,16 +8,16 @@ function calculateOffsets() {
   const yOffset = startYOffset + (currentY - y_start);
   const xOffset = startXOffset + (currentX - x_start);
 
-  var top = bitmap.height / 2 - yOffset - 175;
+  var top = image_height / 2 - yOffset - 175 - 5;
   if (top > 0) top = 0;
 
-  var bottom = -(bitmap.height / 2) - yOffset + 10 + 175;
+  var bottom = -(image_height / 2) - yOffset + 5 + 175;
   if (bottom < 0) bottom = 0;
 
-  var left = bitmap.width / 2 - xOffset - 175;
+  var left = image_width / 2 - xOffset - 175 - 5;
   if (left > 0) left = 0;
 
-  var right = -(bitmap.width / 2) - xOffset + 10 + 175;
+  var right = -(image_width / 2) - xOffset + 5 + 175;
   if (right < 0) right = 0;
   return { x: xOffset + left + right, y: yOffset + top + bottom };
 }

static/profile_page.css

@@ -171,11 +171,13 @@
 
 #new_profile_image {
     z-index: 1;
-    transform: translateX(calc(-50% + var(--x-offset)))
-        translateY(calc(-50% + var(--y-offset)));
+    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);
 }
 
 #grab-area {