resize image to fit bounds

src/pages/profile_page.html

@@ -93,14 +93,37 @@
 
 <div id="resize_photo_dialouge" class="card static_center hidden">
     <div id="image_container">
-        <img id="new_profile_image" alt="new-profile-image" />
+        <img
-        <div id="darken_part"></div>
+            id="new_profile_image"
+            alt="new-profile-image"
+            class="noselect"
+            draggable="false"
+        />
     </div>
-    <div id="resize_photo_box">
+    <div id="grab-area" draggable="false">
-        <div id="top_left_resize" class="resize_anchor"></div>
+        <div id="box-scale-holder">
-        <div id="top_right_resize" class="resize_anchor"></div>
+            <div
-        <div id="bottom_left_resize" class="resize_anchor"></div>
+                draggable="false"
-        <div id="bottom_right_resize" class="resize_anchor"></div>
+                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" draggable="false"></div>
     </div>
     <button id="confirm_change">Confirm Change</button>
 </div>
@@ -172,6 +195,7 @@
     </div>
 </div>
 
+<script src="/static/javascript/helpers.js" type="text/javascript"></script>
 <script src="/static/javascript/cursor.js" type="text/javascript"></script>
 <script
     src="/static/javascript/resize_photo_dialouge.js"
@@ -197,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");
@@ -216,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/helpers.js

@@ -0,0 +1,13 @@
+function min(a, b) {
+  if (a < b) {
+    return a;
+  }
+  return b;
+}
+
+function max(a, b) {
+  if (a > b) {
+    return a;
+  }
+  return b;
+}

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 };
 }
@@ -58,15 +58,23 @@ document.body.addEventListener("mouseup", () => {
 // handle anchors
 resize_anchors = document.getElementsByClassName("resize_anchor");
 var handleBeingHeld = [false, false, false, false];
+var startX, startY;
 for (var i = 0; i < resize_anchors.length; i++) {
   const index = i;
   resize_anchors[index].addEventListener("mousedown", (e) => {
     e.stopPropagation();
     handleBeingHeld[index] = true;
+    startX = currentX;
+    startY = currentY;
   });
 
   document.body.addEventListener("mouseup", () => {
     handleBeingHeld[index] = false;
+    resize_anchors[index].style.setProperty("--x-offset", "0px");
+    resize_anchors[index].style.setProperty("--y-offset", "0px");
+    resize_photo_box.style.setProperty("--size", "350px");
+    resize_photo_box.style.setProperty("--box-x-offset", "0px");
+    resize_photo_box.style.setProperty("--box-y-offset", "0px");
   });
 
   resize_anchors[i].style.setProperty("--x-offset", "0px");
@@ -77,7 +85,24 @@ document.body.addEventListener("mousemove", () => {
   for (var i = 0; i < handleBeingHeld.length; i++) {
     if (!handleBeingHeld[i]) continue;
 
-    resize_anchors[i].style.setProperty("--x-offset", "100px");
+    newX = Math.abs(startX - currentX);
-    resize_anchors[i].style.setProperty("--y-offset", "100px");
+    newY = Math.abs(currentY - startY);
+
+    moveAmount = max(min(newX, newY), 0);
+
+    resize_anchors[i].style.setProperty("--x-offset", moveAmount + "px");
+    resize_anchors[i].style.setProperty("--y-offset", moveAmount + "px");
+    resize_photo_box.style.setProperty("--size", 350 - moveAmount + "px");
+
+    if (i == 0) {
+      resize_photo_box.style.setProperty("--box-x-offset", moveAmount + "px");
+      resize_photo_box.style.setProperty("--box-y-offset", moveAmount + "px");
+    }
+    if (i == 1) {
+      resize_photo_box.style.setProperty("--box-y-offset", moveAmount + "px");
+    }
+    if (i == 2) {
+      resize_photo_box.style.setProperty("--box-x-offset", moveAmount + "px");
+    }
   }
 });

static/profile_page.css

@@ -171,11 +171,22 @@
 
 #new_profile_image {
     z-index: 1;
-    transform: translateX(calc(-50% + var(--x-offset)))
+    transform: translateX(calc(-50% + var(--x-offset) + 5px))
-        translateY(calc(-50% + var(--y-offset)));
+        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 {
+    display: grid;
+}
+
+#grab-area > * {
+    grid-column-start: 1;
+    grid-row-start: 1;
 }
 
 #resize_photo_box {
@@ -187,6 +198,8 @@
     border-color: black;
     border-width: 5px;
     z-index: 4;
+
+    transform: translateX(var(--box-x-offset)) translateY(var(--box-y-offset));
 }
 
 .resize_anchor {
@@ -194,11 +207,12 @@
     width: 20px;
     height: 20px;
     position: absolute;
+    z-index: 5;
 }
 
 #top_left_resize {
-    transform: translateX(calc(-50% + var(--x-offset)))
+    transform: translateX(calc(-50% + var(--x-offset) + 10px))
-        translateY(calc(-50% + var(--y-offset)));
+        translateY(calc(-50% + var(--y-offset) + 10px));
 }
 
 #top_left_resize:hover {
@@ -206,8 +220,8 @@
 }
 
 #top_right_resize {
-    transform: translateX(calc(340px - var(--x-offset)))
+    transform: translateX(calc(350px - var(--x-offset) - 10px))
-        translateY(calc(-50% + var(--y-offset)));
+        translateY(calc(-50% + var(--y-offset) + 10px));
 }
 
 #top_right_resize:hover {
@@ -215,7 +229,7 @@
 }
 
 #bottom_left_resize {
-    transform: translateX(calc(-50% + var(--x-offset)))
+    transform: translateX(calc(-50% + var(--x-offset) + 10px))
         translateY(calc(340px - var(--x-offset)));
 }
 
@@ -231,3 +245,9 @@
 #bottom_right_resize:hover {
     cursor: se-resize !important;
 }
+
+#box-scale-holder {
+    position: relative;
+    width: 360px;
+    height: 360px;
+}

static/style.css

@@ -140,3 +140,12 @@ input::placeholder {
 .subtext {
     color: var(--text-muted);
 }
+
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}