From 04b01dbf2712c7a13105badadfee5987ab25f941 Mon Sep 17 00:00:00 2001
From: Gregory Wells <gawells@astraltech.xyz>
Date: Mon, 22 Jun 2026 17:42:09 -0400
Subject: [PATCH] move anchors around

---
 src/pages/profile_page.html                |  1 +
 static/javascript/helpers.js               | 13 +++++++++++++
 static/javascript/resize_photo_dialouge.js | 12 ++++++++++--
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 static/javascript/helpers.js

diff --git a/src/pages/profile_page.html b/src/pages/profile_page.html
index a699c5d..a255e0c 100644
--- a/src/pages/profile_page.html
+++ b/src/pages/profile_page.html
@@ -172,6 +172,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"
diff --git a/static/javascript/helpers.js b/static/javascript/helpers.js
new file mode 100644
index 0000000..9d6a4c4
--- /dev/null
+++ b/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;
+}
diff --git a/static/javascript/resize_photo_dialouge.js b/static/javascript/resize_photo_dialouge.js
index dabb87c..a809a70 100644
--- a/static/javascript/resize_photo_dialouge.js
+++ b/static/javascript/resize_photo_dialouge.js
@@ -58,11 +58,14 @@ 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", () => {
@@ -77,7 +80,12 @@ 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");
+    newX = startX - currentX;
+    newY = 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");
   }
 });