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

app/src/components/ui/componets/Panel.tsx

@@ -124,8 +124,8 @@ const Panel: React.FC<PanelProps> = ({
     selectedZone.widgets.filter((w) => w.panel === panel).length;
 
   const calculatePanelCapacity = (panel: Side) => {
-    const CHART_WIDTH = 150;
-    const CHART_HEIGHT = 150;
+    const CHART_WIDTH = 170;
+    const CHART_HEIGHT = 170;
     const FALLBACK_HORIZONTAL_CAPACITY = 5;
     const FALLBACK_VERTICAL_CAPACITY = 3;
 

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -231,7 +231,7 @@ const RealTimeVisulization: React.FC = () => {
         onDrop={(event) => handleDrop(event)}
         onDragOver={(event) => event.preventDefault()}
       >
-        <Scene />
+        {/* <Scene /> */}
       </div>
       {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
       {activeModule === "visualization" && <SocketRealTimeViz />}

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;
-}
+}