add offsets into handles

src/pages/profile_page.html

@@ -227,6 +227,7 @@
 
         new_profile_image.style.setProperty("--x-offset", "0px");
         new_profile_image.style.setProperty("--y-offset", "0px");
+        resize_photo_box.style.setProperty("--size", "350px");
     });
 
     confirm_change.addEventListener("click", async () => {

static/javascript/resize_photo_dialouge.js

@@ -39,7 +39,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 +50,34 @@ 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];
+for (var i = 0; i < resize_anchors.length; i++) {
+  const index = i;
+  resize_anchors[index].addEventListener("mousedown", (e) => {
+    e.stopPropagation();
+    handleBeingHeld[index] = true;
+  });
+
+  document.body.addEventListener("mouseup", () => {
+    handleBeingHeld[index] = false;
+  });
+
+  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;
+
+    resize_anchors[i].style.setProperty("--x-offset", "100px");
+    resize_anchors[i].style.setProperty("--y-offset", "100px");
+  }
+});

static/profile_page.css

@@ -180,18 +180,7 @@
 
 #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;
@@ -205,21 +194,40 @@
     width: 20px;
     height: 20px;
     position: absolute;
-    pointer-events: none;
 }
 
 #top_left_resize {
-    transform: translateX(-50%) translateY(-50%);
+    transform: translateX(calc(-50% + var(--x-offset)))
+        translateY(calc(-50% + var(--y-offset)));
+}
+
+#top_left_resize:hover {
+    cursor: nw-resize !important;
 }
 
 #top_right_resize {
-    transform: translateX(340px) translateY(-50%);
+    transform: translateX(calc(340px - var(--x-offset)))
+        translateY(calc(-50% + var(--y-offset)));
+}
+
+#top_right_resize:hover {
+    cursor: ne-resize !important;
 }
 
 #bottom_left_resize {
-    transform: translateY(340px) translateX(-50%);
+    transform: translateX(calc(-50% + var(--x-offset)))
+        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;
 }