bug fix

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -34,6 +34,7 @@ import {
 import Dropped3dWidgets from "./widgets/3d/Dropped3dWidget";
 import OuterClick from "../../utils/outerClick";
 import { useWidgetStore } from "../../store/useWidgetStore";
+import { getActiveProperties } from "./functions/getActiveProperties";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -166,60 +167,65 @@ const RealTimeVisulization: React.FC = () => {
       const canvasElement = document.getElementById("real-time-vis-canvas");
       if (!canvasElement) throw new Error("Canvas element not found");
   
-      // Get canvas dimensions and mouse position
       const rect = canvasElement.getBoundingClientRect();
-      let relativeX = (event.clientX - rect.left) ;
-      let relativeY = event.clientY - rect.top;
+      const relativeX = event.clientX - rect.left;
+      const relativeY = event.clientY - rect.top;
   
-      // Widget dimensions (with defaults)
-      const widgetWidth = droppedData.width || 125; // 250/2 as default
-      const widgetHeight = droppedData.height || 100; // 83/2 as default
+      // Widget dimensions
+      const widgetWidth = droppedData.width || 125;
+      const widgetHeight = droppedData.height || 100;
   
-      // Clamp to ensure widget stays fully inside canvas
-      const clampedX = Math.max(
-        0, // Prevent going beyond left edge
-        Math.min(
-          relativeX,
-          rect.width - widgetWidth // Prevent going beyond right edge
-        )
-      );
-      
-      console.log('clampedX: ', clampedX);
-      const clampedY = Math.max(
-        0, // Prevent going beyond top edge
-        Math.min(
-          relativeY,
-          rect.height - widgetHeight // Prevent going beyond bottom edge
-        )
-      );
+      // Center the widget at cursor
+      const centerOffsetX = widgetWidth / 2;
+      const centerOffsetY = widgetHeight / 2;
   
-      // Debug logging (optional)
-      console.log("Drop coordinates:", {
-        rawX: relativeX,
-        rawY: relativeY,
-        clampedX,
-        clampedY,
-        canvasWidth: rect.width,
-        canvasHeight: rect.height,
-        widgetWidth,
-        widgetHeight
-      });
+      const adjustedX = relativeX - centerOffsetX;
+      const adjustedY = relativeY - centerOffsetY;
   
-      const finalPosition = determinePosition(rect, clampedX, clampedY);
+      const finalPosition = determinePosition(rect, adjustedX, adjustedY);
+      const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
+  
+      let finalY = 0;
+      let finalX = 0;
+  
+      if (activeProp1 === "top") {
+        finalY = adjustedY;
+      } else {
+        finalY = rect.height - (adjustedY + widgetHeight);
+      }
+  
+      if (activeProp2 === "left") {
+        finalX = adjustedX;
+      } else {
+        finalX = rect.width - (adjustedX + widgetWidth);
+      }
+  
+      // Clamp to boundaries
+      finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
+      finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
+  
+      const boundedPosition = {
+        ...finalPosition,
+        [activeProp1]: finalY,
+        [activeProp2]: finalX,
+        [activeProp1 === "top" ? "bottom" : "top"]: "auto",
+        [activeProp2 === "left" ? "right" : "left"]: "auto",
+      };
   
       const newObject = {
         ...droppedData,
         id: generateUniqueId(),
-        position: finalPosition,
+        position: boundedPosition,
       };
   
-      // Zone management
-      const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
+      const existingZone =
+        useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
       if (!existingZone) {
-        useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
+        useDroppedObjectsStore
+          .getState()
+          .setZone(selectedZone.zoneName, selectedZone.zoneId);
       }
   
-      // Socket emission
       const addFloatingWidget = {
         organization,
         widget: newObject,
@@ -230,25 +236,27 @@ const RealTimeVisulization: React.FC = () => {
         visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
       }
   
-      // Store update
-      useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject);
+      useDroppedObjectsStore
+        .getState()
+        .addObject(selectedZone.zoneName, newObject);
   
-      // Post-drop verification
       const droppedObjectsStore = useDroppedObjectsStore.getState();
       const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
   
       if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
-        console.log(`Objects for Zone ${selectedZone.zoneId}:`, currentZone.objects);
+        console.log(
+          `Objects for Zone ${selectedZone.zoneId}:`,
+          currentZone.objects
+        );
         setFloatingWidget(currentZone.objects);
       } else {
         console.warn("Zone not found or zoneId mismatch");
       }
-  
     } catch (error) {
       console.error("Error in handleDrop:", error);
-      // Consider adding user feedback here (e.g., toast notification)
     }
   };
+  
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -270,8 +278,42 @@ const RealTimeVisulization: React.FC = () => {
     };
   }, [setRightClickSelected]);
 
+  const [canvasDimensions, setCanvasDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  useEffect(() => {
+    const canvas = document.getElementById("real-time-vis-canvas");
+    if (!canvas) return;
+
+    const updateCanvasDimensions = () => {
+      const rect = canvas.getBoundingClientRect();
+      setCanvasDimensions({
+        width: rect.width,
+        height: rect.height,
+      });
+    };
+
+    updateCanvasDimensions();
+    const resizeObserver = new ResizeObserver(updateCanvasDimensions);
+    resizeObserver.observe(canvas);
+
+    return () => resizeObserver.unobserve(canvas);
+  }, []);
+
+
   return (
     <>
+          <style>
+        {`
+    :root {
+      --realTimeViz-container-width: ${canvasDimensions.width}px;
+
+      --realTimeViz-container-height: ${canvasDimensions.height}px;
+      
+    }
+  `}
+      </style>
       <div
         ref={containerRef}
         id="real-time-vis-canvas"