calculate cropping boxes for the image

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,
@@ -22,14 +23,42 @@ function calculateOffsets() {
   return { x: xOffset + left + right, y: yOffset + top + bottom };
 }
 
+function calculateBoxBoundsOnImage() {
+  offsets = calculateOffsets();
+
+  const x_overspill = image_width - 360;
+  const left_overspill = x_overspill / 2 - offsets.x;
+  // const right_overspill = x_overspill / 2 - offsets.y;
+
+  const y_overspill = image_height - 360;
+  const top_overspill = y_overspill / 2 - offsets.y;
+
+  return {
+    left: left_overspill + 5,
+    right: left_overspill + 5 + 350,
+    top: top_overspill + 5,
+    bottom: top_overspill + 350 + 5,
+  };
+}
+
 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();
+  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", () => {