added zones drop down in builder ouline and adjust width of displayZones

app/src/components/ui/componets/functions/determinePosition.ts

@@ -1,4 +1,3 @@
-
 export function determinePosition(
   canvasRect: DOMRect,
   relativeX: number,
@@ -12,6 +11,23 @@ export function determinePosition(
   const centerX = canvasRect.width / 2;
   const centerY = canvasRect.height / 2;
 
+  // Define a threshold for considering a point as "centered"
+  const centerThreshold = 10; // Adjust this value as needed
+
+  // Check if the point is within the center threshold
+  const isCenterX = Math.abs(relativeX - centerX) <= centerThreshold;
+  const isCenterY = Math.abs(relativeY - centerY) <= centerThreshold;
+
+  // If the point is centered, return a special "centered" position
+  if (isCenterX && isCenterY) {
+    return {
+      top: "auto",
+      left: "auto",
+      right: "auto",
+      bottom: "auto",
+    };
+  }
+
   let position: {
     top: number | "auto";
     left: number | "auto";
@@ -21,7 +37,7 @@ export function determinePosition(
 
   if (relativeY < centerY) {
     if (relativeX < centerX) {
-      
+      // Top-left quadrant
       position = {
         top: relativeY - 41.5,
         left: relativeX - 125,
@@ -29,7 +45,7 @@ export function determinePosition(
         bottom: "auto",
       };
     } else {
-      
+      // Top-right quadrant
       position = {
         top: relativeY - 41.5,
         right: canvasRect.width - relativeX - 125,
@@ -39,7 +55,7 @@ export function determinePosition(
     }
   } else {
     if (relativeX < centerX) {
-      
+      // Bottom-left quadrant
       position = {
         bottom: canvasRect.height - relativeY - 41.5,
         left: relativeX - 125,
@@ -47,7 +63,7 @@ export function determinePosition(
         top: "auto",
       };
     } else {
-      
+      // Bottom-right quadrant
       position = {
         bottom: canvasRect.height - relativeY - 41.5,
         right: canvasRect.width - relativeX - 125,
@@ -58,4 +74,4 @@ export function determinePosition(
   }
 
   return position;
-}
+}