From 38e8ebf362bd76bc47607ffc7a59848eca7eee6b Mon Sep 17 00:00:00 2001
From: Gregory Wells <gawells@astraltech.xyz>
Date: Fri, 26 Jun 2026 16:00:22 -0400
Subject: [PATCH] resize the box when anchors are resized

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

diff --git a/src/pages/profile_page.html b/src/pages/profile_page.html
index a255e0c..0828971 100644
--- a/src/pages/profile_page.html
+++ b/src/pages/profile_page.html
@@ -96,11 +96,14 @@
         <img id="new_profile_image" alt="new-profile-image" />
         <div id="darken_part"></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">
+        <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>
+        <div id="resize_photo_box"></div>
     </div>
     <button id="confirm_change">Confirm Change</button>
 </div>
diff --git a/static/javascript/resize_photo_dialouge.js b/static/javascript/resize_photo_dialouge.js
index a730fc3..a27a07d 100644
--- a/static/javascript/resize_photo_dialouge.js
+++ b/static/javascript/resize_photo_dialouge.js
@@ -72,6 +72,9 @@ for (var i = 0; i < resize_anchors.length; i++) {
     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");
@@ -89,5 +92,17 @@ document.body.addEventListener("mousemove", () => {
 
     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");
+    }
   }
 });
diff --git a/static/profile_page.css b/static/profile_page.css
index 2aa3f9c..5ec2768 100644
--- a/static/profile_page.css
+++ b/static/profile_page.css
@@ -178,6 +178,15 @@
     top: calc(350px / 2);
 }
 
+#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: var(--size);
@@ -187,6 +196,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 +205,12 @@
     width: 20px;
     height: 20px;
     position: absolute;
+    z-index: 5;
 }
 
 #top_left_resize {
-    transform: translateX(calc(-50% + var(--x-offset)))
-        translateY(calc(-50% + var(--y-offset)));
+    transform: translateX(calc(-50% + var(--x-offset) + 10px))
+        translateY(calc(-50% + var(--y-offset) + 10px));
 }
 
 #top_left_resize:hover {
@@ -206,8 +218,8 @@
 }
 
 #top_right_resize {
-    transform: translateX(calc(340px - var(--x-offset)))
-        translateY(calc(-50% + var(--y-offset)));
+    transform: translateX(calc(350px - var(--x-offset) - 10px))
+        translateY(calc(-50% + var(--y-offset) + 10px));
 }
 
 #top_right_resize:hover {
@@ -215,7 +227,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 +243,9 @@
 #bottom_right_resize:hover {
     cursor: se-resize !important;
 }
+
+#box-scale-holder {
+    position: relative;
+    width: 360px;
+    height: 360px;
+}