From f04a9956ffe21b58ad31724bc92d19ae85bb69ae Mon Sep 17 00:00:00 2001
From: Gregory Wells <gawells@astraltech.xyz>
Date: Sun, 14 Jun 2026 16:55:04 -0400
Subject: [PATCH] detect which handle is being held

---
 src/pages/profile_page.html                |  1 +
 static/javascript/resize_photo_dialouge.js | 15 ++++++++++++++-
 static/profile_page.css                    | 13 +------------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/pages/profile_page.html b/src/pages/profile_page.html
index 75460be..a699c5d 100644
--- a/src/pages/profile_page.html
+++ b/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 () => {
diff --git a/static/javascript/resize_photo_dialouge.js b/static/javascript/resize_photo_dialouge.js
index 48feb81..8dede25 100644
--- a/static/javascript/resize_photo_dialouge.js
+++ b/static/javascript/resize_photo_dialouge.js
@@ -57,8 +57,21 @@ document.body.addEventListener("mouseup", () => {
 
 // handle anchors
 resize_anchors = document.getElementsByClassName("resize_anchor");
+var handleBeingHeld = [false, false, false, false];
 for (var i = 0; i < resize_anchors.length; i++) {
-  resize_anchors[i].addEventListener("mousedown", (e) => {
+  const index = i;
+  resize_anchors[index].addEventListener("mousedown", (e) => {
     e.stopPropagation();
+    handleBeingHeld[index] = true;
+  });
+
+  document.body.addEventListener("mouseup", () => {
+    handleBeingHeld[index] = false;
   });
 }
+
+document.body.addEventListener("mousemove", () => {
+  for (var i = 0; i < handleBeingHeld.length; i++) {
+    if (!handleBeingHeld[i]) continue;
+  }
+});
diff --git a/static/profile_page.css b/static/profile_page.css
index 8fd1351..ae4afd8 100644
--- a/static/profile_page.css
+++ b/static/profile_page.css
@@ -180,18 +180,7 @@
 
 #resize_photo_box {
     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;
-}
-
-#resize_photo_box:hover {
-    background-color: rgba(0, 0, 0, 0);
-    width: 350px;
+    width: var(--size);
     aspect-ratio: 1 / 1;
 
     border-style: dashed;