display menu bugfix

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

@@ -7,7 +7,6 @@ import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";
 
-
 import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
 import {
   useAsset3dWidget,
@@ -24,7 +23,11 @@ import RenderOverlay from "../../templates/Overlay";
 import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
 import DroppedObjects from "./DroppedFloatingWidgets";
 import EditWidgetOption from "../menu/EditWidgetOption";
-import { useRightClickSelected } from "../../../store/useZone3DWidgetStore";
+import {
+  useRightClickSelected,
+  useRightSelected,
+  useEditWidgetOptionsStore,
+} from "../../../store/useZone3DWidgetStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -57,9 +60,9 @@ const RealTimeVisulization: React.FC = () => {
   const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
-
-
-  const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
+  
+  const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
+  const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
 
   const [floatingWidgets, setFloatingWidgets] = useState<
@@ -68,6 +71,7 @@ const RealTimeVisulization: React.FC = () => {
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
+  const { setRightSelect } = useRightSelected();
 
   useEffect(() => {
     async function GetZoneData() {
@@ -96,7 +100,7 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) { }
+      } catch (error) {}
     }
 
     GetZoneData();
@@ -142,8 +146,8 @@ const RealTimeVisulization: React.FC = () => {
       const relativeX = event.clientX - canvasRect.left;
       const relativeY = event.clientY - canvasRect.top;
 
-      const newPosition = determinePosition(canvasRect, relativeX, relativeY)
-      console.log('newPosition: ', newPosition);
+      const newPosition = determinePosition(canvasRect, relativeX, relativeY);
+      console.log("newPosition: ", newPosition);
       const newObject = {
         ...droppedData,
         id: generateUniqueId(),
@@ -162,12 +166,12 @@ const RealTimeVisulization: React.FC = () => {
       let addFloatingWidget = {
         organization: organization,
         widget: newObject,
-        zoneId: selectedZone.zoneId
-      }
-      console.log('newObject: ', newObject);
+        zoneId: selectedZone.zoneId,
+      };
+      console.log("newObject: ", newObject);
 
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-float:add", addFloatingWidget)
+        visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
       }
 
       // let response = await addingFloatingWidgets(
@@ -194,9 +198,30 @@ const RealTimeVisulization: React.FC = () => {
           ],
         },
       }));
-    } catch (error) { }
+    } catch (error) {}
   };
 
+  // Add this useEffect hook to your component
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const editWidgetOptions = document.querySelector(
+        ".editWidgetOptions-wrapper"
+      );
+      if (
+        editWidgetOptions &&
+        !editWidgetOptions.contains(event.target as Node)
+      ) {
+        setRightClickSelected(null);
+        setRightSelect(null);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [setRightClickSelected]);
+
   return (
     <div
       ref={containerRef}
@@ -230,12 +255,27 @@ const RealTimeVisulization: React.FC = () => {
       >
         <Scene />
       </div>
-      {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
+      {activeModule === "visualization" && selectedZone.zoneName !== "" && (
+        <DroppedObjects />
+      )}
       {activeModule === "visualization" && <SocketRealTimeViz />}
 
-      {activeModule === "visualization" && rightClickSelected && <EditWidgetOption
-        options={["Duplicate", "Vertical Move", "Horizontal Move", "RotateX", "RotateY", "RotateZ", "Delete"]}
-      />}
+      {activeModule === "visualization" &&
+        editWidgetOptions &&
+        rightClickSelected && (
+          <EditWidgetOption
+            setWidgetSelect={setWidgetSelect}
+            options={[
+              "Duplicate",
+              "Vertical Move",
+              "Horizontal Move",
+              "RotateX",
+              "RotateY",
+              "RotateZ",
+              "Delete",
+            ]}
+          />
+        )}
 
       {activeModule === "visualization" && (
         <>