server api changed for RealTimeVisulization

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

@@ -68,6 +68,8 @@ const DroppedObjects: React.FC = () => {
   } | null>(null); // State to track the current position during drag
   const animationRef = useRef<number | null>(null);
   const { activeModule } = useModuleStore();
+  const kebabRef = useRef<HTMLDivElement>(null);
+
 
   // Clean up animation frame on unmount
   useEffect(() => {
@@ -77,6 +79,21 @@ const DroppedObjects: React.FC = () => {
       }
     };
   }, []);
+  // useEffect(() => {
+  //   const handleClickOutside = (event: MouseEvent) => {
+  //     if (kebabRef.current && !kebabRef.current.contains(event.target as Node)) {
+  //       setOpenKebabId(null);
+  //     }
+  //   };
+  
+  //   // Add event listener when component mounts
+  //   document.addEventListener("mousedown", handleClickOutside);
+    
+  //   // Clean up event listener when component unmounts
+  //   return () => {
+  //     document.removeEventListener("mousedown", handleClickOutside);
+  //   };
+  // }, []);
 
   const zoneEntries = Object.entries(zones);
   if (zoneEntries.length === 0) return null;
@@ -109,6 +126,8 @@ const DroppedObjects: React.FC = () => {
       return; // Prevent dragging when clicking on the kebab menu or its options
     }
     const obj = zone.objects[index];
+    const element = event.currentTarget as HTMLElement;
+    element.setPointerCapture(event.pointerId);
     const container = document.getElementById("real-time-vis-canvas");
     if (!container) return;
 
@@ -201,13 +220,15 @@ const DroppedObjects: React.FC = () => {
 
     // Update the current position state for DistanceLines
     setCurrentPosition(newPosition);
+    // Update position immediately without animation frame
+    updateObjectPosition(zoneName, draggingIndex.index, newPosition);
 
-    if (!animationRef.current) {
-      animationRef.current = requestAnimationFrame(() => {
-        updateObjectPosition(zoneName, draggingIndex.index, newPosition);
-        animationRef.current = null;
-      });
-    }
+    // if (!animationRef.current) {
+    //   animationRef.current = requestAnimationFrame(() => {
+    //     updateObjectPosition(zoneName, draggingIndex.index, newPosition);
+    //     animationRef.current = null;
+    //   });
+    // }
   };
 
   const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => {
@@ -249,6 +270,9 @@ const DroppedObjects: React.FC = () => {
         ...finalPosition,
         [activeProp1]: finalY,
         [activeProp2]: finalX,
+        // Clear opposite properties
+        [activeProp1 === "top" ? "bottom" : "top"]: "auto",
+        [activeProp2 === "left" ? "right" : "left"]: "auto",
       };
 
       // Save to backend
@@ -264,17 +288,29 @@ const DroppedObjects: React.FC = () => {
         updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
       }
 
-      // Clean up
+      // // Clean up
+      // setDraggingIndex(null);
+      // setOffset(null);
+      // setActiveEdges(null); // Clear active edges
+      // setCurrentPosition(null); // Reset current position
+      // if (animationRef.current) {
+      //   cancelAnimationFrame(animationRef.current);
+      //   animationRef.current = null;
+      // }
+    } catch (error) {
+      console.error("Error in handlePointerUp:", error);
+    } finally {
+      // Clean up regardless of success or failure
       setDraggingIndex(null);
       setOffset(null);
-      setActiveEdges(null); // Clear active edges
-      setCurrentPosition(null); // Reset current position
+      setActiveEdges(null);
+      setCurrentPosition(null);
+
+      // Cancel any pending animation frame
       if (animationRef.current) {
         cancelAnimationFrame(animationRef.current);
         animationRef.current = null;
       }
-    } catch (error) {
-      console.error("Error in handlePointerUp:", error);
     }
   };
 
@@ -333,6 +369,7 @@ const DroppedObjects: React.FC = () => {
 
           <div
             className="icon kebab"
+            ref={kebabRef}
             onClick={(event) => {
               event.stopPropagation();
               handleKebabClick(obj.id, event)
@@ -362,6 +399,7 @@ const DroppedObjects: React.FC = () => {
               </div>
             </div>
           )}
+
         </div>
       ))}