Merge remote-tracking branch 'origin/main' into 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;
@@ -96,7 +113,7 @@ const DroppedObjects: React.FC = () => {
       console.log('res: ', res);
 
       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) {
       console.error("Error deleting floating widget:", error);
@@ -105,7 +122,12 @@ const DroppedObjects: React.FC = () => {
 
 
   const handlePointerDown = (event: React.PointerEvent, index: number) => {
+    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
+    }
     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;
 
@@ -198,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>) => {
@@ -246,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
@@ -255,22 +282,35 @@ 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
+      // // 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);
     }
   };
 
@@ -279,66 +319,6 @@ const DroppedObjects: React.FC = () => {
     setOpenKebabId((prevId) => (prevId === id ? null : id));
   };
 
-  const renderObjectContent = (obj: any) => {
-    switch (obj.className) {
-      case "floating total-card":
-        return (
-          <>
-            <div className="header-wrapper">
-              <div className="header">{obj.header}</div>
-              <div className="data-values">
-                <div className="value">{obj.value}</div>
-                <div className="per">{obj.per}</div>
-              </div>
-            </div>
-            <div className="icon">
-              <WalletIcon />
-            </div>
-          </>
-        );
-      case "warehouseThroughput floating":
-        return (
-          <>
-            <div className="header">
-              <h2>Warehouse Throughput</h2>
-              <p>
-                <span>(+5) more</span> in 2025
-              </p>
-            </div>
-            <div className="lineGraph" style={{ height: "100%" }}>
-              {/* <Line data={lineGraphData} options={lineGraphOptions} /> */}
-            </div>
-          </>
-        );
-      case "fleetEfficiency floating":
-        return (
-          <>
-            <h2 className="header">Fleet Efficiency</h2>
-            <div className="progressContainer">
-              <div className="progress">
-                <div className="barOverflow">
-                  <div
-                    className="bar"
-                    style={{ transform: `rotate(${obj.value}deg)` }}
-                  ></div>
-                </div>
-              </div>
-            </div>
-            <div className="scaleLabels">
-              <span>0%</span>
-              <div className="centerText">
-                <div className="percentage">{obj.per}%</div>
-                <div className="status">Optimal</div>
-              </div>
-              <span>100%</span>
-            </div>
-          </>
-        );
-      default:
-        return null;
-    }
-  };
-
   return (
     <div
       onPointerMove={handlePointerMove}
@@ -388,12 +368,16 @@ 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="kebab-options" ref={kebabRef}>
               <div className="dublicate btn" onClick={(event) => {
                 event.stopPropagation();
                 handleDuplicate(zoneName, index); // Call the duplicate handler
@@ -414,6 +398,7 @@ const DroppedObjects: React.FC = () => {
               </div>
             </div>
           )}
+
         </div>
       ))}