make things look nicer and work on image change

src/pages/profile_page.html

@@ -91,18 +91,48 @@
     <button id="final_change_password_button">Change Password</button>
 </div>
 
-<div id="resize_photo_dialouge" class="card static_center hidden">
-    <div id="image_container">
-        <img id="new_profile_image" alt="new-profile-image" />
-        <div id="darken_part"></div>
+<div
+    id="resize_photo_dialouge"
+    class="card static_center hidden"
+    draggable="false"
+>
+    <div id="image_container" draggable="false">
+        <img
+            id="new_profile_image"
+            alt="new-profile-image"
+            class="noselect"
+            draggable="false"
+        />
+        <div id="image_dark_overlay" draggable="false"></div>
     </div>
-    <div id="resize_photo_box">
-        <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 id="grab-area" draggable="false">
+        <div id="box-scale-holder">
+            <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" draggable="false">
+            <div id="circle-display"></div>
+        </div>
     </div>
-    <button id="confirm_change">Confirm Change</button>
+    <button id="confirm_change" draggable="false">Confirm Change</button>
 </div>
 
 <img id="logo_image" alt="logo" src="/logo" />
@@ -172,6 +202,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 +228,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 +248,45 @@
             .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");
+
+        smaller_dimension = min(bitmap.width, bitmap.height);
+        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");
+
+        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");
+
+        bounds = calculateBoxBoundsOnImage({
+            x: 0,
+            y: 0,
+        });
+        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.style.setProperty("--size", "350px");
     });
 
     confirm_change.addEventListener("click", async () => {

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

@@ -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,
@@ -8,28 +9,53 @@ 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 };
 }
 
+function calculateBoxBoundsOnImage(offsets) {
+  const x_overspill = image_width - 360;
+  const left_overspill = x_overspill / 2 - offsets.x;
+
+  const y_overspill = image_height - 360;
+  const top_overspill = y_overspill / 2 - offsets.y;
+
+  return {
+    left: left_overspill,
+    right: left_overspill + 360,
+    top: top_overspill,
+    bottom: top_overspill + 360,
+  };
+}
+
 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(offsets);
+  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", () => {
@@ -39,7 +65,10 @@ resize_photo_box.addEventListener("mousedown", () => {
   set_cursor_state(CURSOR_GRABBING);
 });
 
+let unclickedMouse = false;
 resize_photo_box.addEventListener("mouseup", () => {
+  if (!unclickedMouse) return;
+  unclickedMouse = false;
   offsets = calculateOffsets();
 
   startXOffset = offsets.x;
@@ -47,6 +76,59 @@ resize_photo_box.addEventListener("mouseup", () => {
 });
 
 document.body.addEventListener("mouseup", () => {
+  if (mouseClicked) unclickedMouse = true;
   mouseClicked = false;
   set_cursor_state(CURSOR_NORMAL);
 });
+
+// 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");
+  resize_anchors[i].style.setProperty("--y-offset", "0px");
+}
+
+document.body.addEventListener("mousemove", () => {
+  for (var i = 0; i < handleBeingHeld.length; i++) {
+    if (!handleBeingHeld[i]) continue;
+
+    newX = Math.abs(startX - currentX);
+    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

@@ -156,6 +156,7 @@
 
 #image_container {
     position: absolute;
+    display: inline-block;
 }
 
 #darken_part {
@@ -171,33 +172,36 @@
 
 #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);
+    image-rendering: pixelated;
+}
+
+#grab-area {
+    display: grid;
+}
+
+#grab-area > * {
+    grid-column-start: 1;
+    grid-row-start: 1;
 }
 
 #resize_photo_box {
     background-color: rgba(0, 0, 0, 0);
-    width: 350px;
+    width: var(--size);
     aspect-ratio: 1 / 1;
 
     border-style: dashed;
     border-color: black;
     border-width: 5px;
     z-index: 4;
-}
 
-#resize_photo_box:hover {
-    background-color: rgba(0, 0, 0, 0);
-    width: 350px;
-    aspect-ratio: 1 / 1;
-
-    border-style: dashed;
-    border-color: black;
-    border-width: 5px;
-    z-index: 4;
+    transform: translateX(var(--box-x-offset)) translateY(var(--box-y-offset));
 }
 
 .resize_anchor {
@@ -205,21 +209,89 @@
     width: 20px;
     height: 20px;
     position: absolute;
-    pointer-events: none;
+    z-index: 5;
 }
 
 #top_left_resize {
-    transform: translateX(-50%) translateY(-50%);
+    transform: translateX(calc(-50% + var(--x-offset) + 10px))
+        translateY(calc(-50% + var(--y-offset) + 10px));
+}
+
+#top_left_resize:hover {
+    cursor: nw-resize !important;
 }
 
 #top_right_resize {
-    transform: translateX(340px) translateY(-50%);
+    transform: translateX(calc(350px - var(--x-offset) - 10px))
+        translateY(calc(-50% + var(--y-offset) + 10px));
+}
+
+#top_right_resize:hover {
+    cursor: ne-resize !important;
 }
 
 #bottom_left_resize {
-    transform: translateY(340px) translateX(-50%);
+    transform: translateX(calc(-50% + var(--x-offset) + 10px))
+        translateY(calc(340px - var(--x-offset)));
+}
+
+#bottom_left_resize:hover {
+    cursor: sw-resize !important;
 }
 
 #bottom_right_resize {
-    transform: translateX(340px) translateY(340px);
+    transform: translateX(calc(340px - var(--x-offset)))
+        translateY(calc(340px - var(--y-offset)));
+}
+
+#bottom_right_resize:hover {
+    cursor: se-resize !important;
+}
+
+#box-scale-holder {
+    position: relative;
+    width: 360px;
+    height: 360px;
+}
+
+#circle-display {
+    position: absolute;
+    width: calc(100% + 10px);
+    height: calc(100% + 10px);
+    transform: translateX(-5px) translateY(-5px);
+    transform: scale(10px);
+    background: radial-gradient(
+        circle closest-side,
+        transparent 99%,
+        rgba(0, 0, 0, 0.5) 100%
+    );
+    /*dispalt*/
+}
+
+#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%
+    );
 }

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;
+}