added pannel hide and EditWidgetOption component

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

@@ -21,6 +21,8 @@ import WarehouseThroughputComponent from "../realTimeVis/floating/WarehouseThrou
 import FleetEfficiencyComponent from "../realTimeVis/floating/FleetEfficiencyComponent";
 import { useWidgetStore } from "../../../store/useWidgetStore";
 import { useClickOutside } from "./functions/handleWidgetsOuterClick";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
 interface DraggingState {
   zone: string;
   index: number;
@@ -43,11 +45,14 @@ interface DraggingState {
   };
 }
 const DroppedObjects: React.FC = () => {
+  const { isPlaying } = usePlayButtonStore();
   const zones = useDroppedObjectsStore((state) => state.zones);
   const [openKebabId, setOpenKebabId] = useState<string | null>(null);
   const updateObjectPosition = useDroppedObjectsStore(
     (state) => state.updateObjectPosition
   );
+  const { setSelectedZone, selectedZone } = useSelectedZoneStore();
+
   const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
 
   const duplicateObject = useDroppedObjectsStore(
@@ -70,10 +75,9 @@ const DroppedObjects: React.FC = () => {
   } | null>(null); // State to track the current position during drag
   const animationRef = useRef<number | null>(null);
   const { activeModule } = useModuleStore();
-  const chartWidgetFloating = useRef<HTMLDivElement>(null);
-
-  // useClickOutside(chartWidgetFloating, () => {
+  const chartWidget = useRef<HTMLDivElement>(null);
 
+  // useClickOutside(chartWidget, () => {
   //   setSelectedChartId(null);
   // });
 
@@ -115,7 +119,7 @@ const DroppedObjects: React.FC = () => {
     ) {
       return;
     }
-
+    if (isPlaying === true) return;
     const obj = zone.objects[index];
     const element = event.currentTarget as HTMLElement;
 
@@ -283,7 +287,6 @@ const DroppedObjects: React.FC = () => {
           updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
         }
       } catch (error) {
-        console.error("Error in handlePointerUp:", error);
       } finally {
         setDraggingIndex(null);
         setOffset(null);
@@ -304,7 +307,7 @@ const DroppedObjects: React.FC = () => {
 
   const handlePointerMove = (event: React.PointerEvent) => {
     if (!draggingIndex || !offset) return;
-
+    if (isPlaying === true) return;
     const container = document.getElementById("real-time-vis-canvas");
     if (!container) return;
 
@@ -414,7 +417,6 @@ const DroppedObjects: React.FC = () => {
         updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
       }
     } catch (error) {
-      console.error("Error in handlePointerUp:", error);
     } finally {
       // Clean up regardless of success or failure
       setDraggingIndex(null);
@@ -447,29 +449,45 @@ const DroppedObjects: React.FC = () => {
           className={`${obj.className} ${
             selectedChartId?.id === obj.id && "activeChart"
           }`}
-          ref={chartWidgetFloating}
+          ref={chartWidget}
           style={{
             position: "absolute",
             top:
               typeof obj.position.top === "number"
-                ? `${obj.position.top}px`
+                ? `calc(${obj.position.top}px + ${
+                    isPlaying && selectedZone.activeSides.includes("top")
+                      ? 90
+                      : 0
+                  }px)`
                 : "auto",
             left:
               typeof obj.position.left === "number"
-                ? `${obj.position.left}px`
+                ? `calc(${obj.position.left}px + ${
+                    isPlaying && selectedZone.activeSides.includes("left")
+                      ? 90
+                      : 0
+                  }px)`
                 : "auto",
             right:
               typeof obj.position.right === "number"
-                ? `${obj.position.right}px`
+                ? `calc(${obj.position.right}px + ${
+                    isPlaying && selectedZone.activeSides.includes("right")
+                      ? 90
+                      : 0
+                  }px)`
                 : "auto",
             bottom:
               typeof obj.position.bottom === "number"
-                ? `${obj.position.bottom}px`
+                ? `calc(${obj.position.bottom}px + ${
+                    isPlaying && selectedZone.activeSides.includes("bottom")
+                      ? 90
+                      : 0
+                  }px)`
                 : "auto",
           }}
-          onPointerDown={(event) => handlePointerDown(event, index)}
-          onClick={() => {
+          onPointerDown={(event) => {
             setSelectedChartId(obj);
+            handlePointerDown(event, index);
           }}
         >
           {obj.className === "floating total-card" ? (
@@ -523,7 +541,8 @@ const DroppedObjects: React.FC = () => {
       ))}
 
       {/* Render DistanceLines component during drag */}
-      {draggingIndex !== null &&
+      {isPlaying === false &&
+        draggingIndex !== null &&
         activeEdges !== null &&
         currentPosition !== null && (
           <DistanceLines
@@ -555,3 +574,5 @@ const DroppedObjects: React.FC = () => {
 };
 
 export default DroppedObjects;
+
+// always place the mousePointer in the same point in the floatingCard even in pointerMove