merged with main

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

@@ -80,6 +80,8 @@ const DroppedObjects: React.FC = () => {
   // useClickOutside(chartWidget, () => {
   //   setSelectedChartId(null);
   // });
+  const kebabRef = useRef<HTMLDivElement>(null);
+
 
   // Clean up animation frame on unmount
   useEffect(() => {
@@ -89,6 +91,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;
@@ -107,25 +124,18 @@ const DroppedObjects: React.FC = () => {
       let res = await deleteFloatingWidgetApi(id, organization);
 
       if (res.message === "FloatingWidget deleted successfully") {
-        deleteObject(zoneName, index); // Call the deleteObject method from the store
+        deleteObject(zoneName, id, index); // Call the deleteObject method from the store
       }
     } catch (error) {}
   }
 
   const handlePointerDown = (event: React.PointerEvent, index: number) => {
-    if (
-      (event.target as HTMLElement).closest(".kebab-options") ||
-      (event.target as HTMLElement).closest(".kebab")
-    ) {
-      return;
+    if ((event.target as HTMLElement).closest(".kebab-options") || (event.target as HTMLElement).closest(".kebab")) {
+      return; // Prevent dragging when clicking on the kebab menu or its options
     }
-    if (isPlaying === true) return;
     const obj = zone.objects[index];
     const element = event.currentTarget as HTMLElement;
-
-    // Set pointer capture to ensure we get all move events
     element.setPointerCapture(event.pointerId);
-
     const container = document.getElementById("real-time-vis-canvas");
     if (!container) return;
 
@@ -169,6 +179,7 @@ const DroppedObjects: React.FC = () => {
     // Add native event listeners for smoother tracking
     const handlePointerMoveNative = (e: PointerEvent) => {
       if (!draggingIndex || !offset) return;
+      if (isPlaying === true) return;
 
       const rect = container.getBoundingClientRect();
       const relativeX = e.clientX - rect.left;
@@ -356,14 +367,21 @@ 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;
+    //   });
+    // }
   };
 
   const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => {
     try {
       if (!draggingIndex || !offset) return;
+      if (isPlaying === true) return;
 
       const container = document.getElementById("real-time-vis-canvas");
       if (!container) return;
@@ -412,11 +430,23 @@ const DroppedObjects: React.FC = () => {
         ...zone.objects[draggingIndex.index],
         position: boundedPosition,
       });
+      console.log('response: ', response);
 
       if (response.message === "Widget updated successfully") {
         updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
       }
+
+      // // 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);
@@ -505,19 +535,20 @@ const DroppedObjects: React.FC = () => {
           ) : null}
           <div
             className="icon kebab"
-            onClick={(event) => handleKebabClick(obj.id, event)}
+            ref={kebabRef}
+            onClick={(event) => {
+              event.stopPropagation();
+              handleKebabClick(obj.id, event)
+            }}
           >
             <KebabIcon />
           </div>
           {openKebabId === obj.id && (
-            <div className="kebab-options">
-              <div
-                className="dublicate btn"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  handleDuplicate(zoneName, index); // Call the duplicate handler
-                }}
-              >
+            <div className="kebab-options" ref={kebabRef}>
+              <div className="dublicate btn" onClick={(event) => {
+                event.stopPropagation();
+                handleDuplicate(zoneName, index); // Call the duplicate handler
+              }}>
                 <div className="icon">
                   <DublicateIcon />
                 </div>
@@ -537,6 +568,7 @@ const DroppedObjects: React.FC = () => {
               </div>
             </div>
           )}
+
         </div>
       ))}