template delete bug fix and floating display same icon for all floatin

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

@@ -7,7 +7,10 @@ import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";
 
-import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
+import {
+  useDroppedObjectsStore,
+  useFloatingWidget,
+} from "../../../store/useDroppedObjectsStore";
 import {
   useAsset3dWidget,
   useSocketStore,
@@ -29,6 +32,8 @@ import {
   useRightSelected,
 } from "../../../store/useZone3DWidgetStore";
 import Dropped3dWidgets from "./Dropped3dWidget";
+import OuterClick from "../../../utils/outerClick";
+import { useWidgetStore } from "../../../store/useWidgetStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -74,10 +79,22 @@ const RealTimeVisulization: React.FC = () => {
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
 
   // const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
-  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget();
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
+  const { setSelectedChartId } = useWidgetStore();
+
+  OuterClick({
+    contextClassName: [
+      "chart-container",
+      "floating",
+      "sidebar-right-wrapper",
+      "card",
+      "dropdown-menu",
+    ],
+    setMenuVisible: () => setSelectedChartId(null),
+  });
 
   useEffect(() => {
     async function GetZoneData() {
@@ -85,7 +102,7 @@ const RealTimeVisulization: React.FC = () => {
       const organization = email?.split("@")[1]?.split(".")[0];
       try {
         const response = await getZone2dData(organization);
-        console.log('response: ', response);
+        console.log("response: ", response);
 
         if (!Array.isArray(response)) {
           return;
@@ -107,7 +124,7 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) { }
+      } catch (error) {}
     }
 
     GetZoneData();
@@ -123,7 +140,7 @@ const RealTimeVisulization: React.FC = () => {
           activeSides: selectedZone.activeSides || [],
           panelOrder: selectedZone.panelOrder || [],
           lockedPanels: selectedZone.lockedPanels || [],
-          points:selectedZone.points||[],
+          points: selectedZone.points || [],
           zoneId: selectedZone.zoneId || "",
           zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
           zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
@@ -196,7 +213,7 @@ const RealTimeVisulization: React.FC = () => {
           `Objects for Zone ID: ${selectedZone.zoneId}`,
           currentZone.objects
         );
-        setFloatingWidget(currentZone.objects)
+        setFloatingWidget(currentZone.objects);
       } else {
         console.warn("Zone not found or mismatched zoneId");
       }
@@ -211,9 +228,7 @@ const RealTimeVisulization: React.FC = () => {
       // }
 
       // Update floating widgets state
-
-    } catch (error) { }
-
+    } catch (error) {}
   };
 
   useEffect(() => {