3d editoption api added and rotation functionality added

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

@@ -23,11 +23,8 @@ import RenderOverlay from "../../templates/Overlay";
 import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
 import DroppedObjects from "./DroppedFloatingWidgets";
 import EditWidgetOption from "../menu/EditWidgetOption";
-import {
-  useRightClickSelected,
-  useRightSelected,
-  useEditWidgetOptionsStore,
-} from "../../../store/useZone3DWidgetStore";
+import { useEditWidgetOptionsStore, useRightClickSelected, useRightSelected } from "../../../store/useZone3DWidgetStore";
+
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -60,9 +57,11 @@ const RealTimeVisulization: React.FC = () => {
   const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
-  
-  const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
-  const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
+
+
+  const { rightSelect, setRightSelect } = useRightSelected()
+  const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore()
+  const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
 
   const [floatingWidgets, setFloatingWidgets] = useState<
@@ -71,7 +70,7 @@ const RealTimeVisulization: React.FC = () => {
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
-  const { setRightSelect } = useRightSelected();
+
 
   useEffect(() => {
     async function GetZoneData() {
@@ -100,7 +99,7 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) {}
+      } catch (error) { }
     }
 
     GetZoneData();
@@ -198,8 +197,27 @@ const RealTimeVisulization: React.FC = () => {
           ],
         },
       }));
-    } catch (error) {}
+    } catch (error) { }
   };
+  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]);
 
   // Add this useEffect hook to your component
   useEffect(() => {
@@ -264,14 +282,12 @@ const RealTimeVisulization: React.FC = () => {
         editWidgetOptions &&
         rightClickSelected && (
           <EditWidgetOption
-            setWidgetSelect={setWidgetSelect}
             options={[
               "Duplicate",
               "Vertical Move",
               "Horizontal Move",
               "RotateX",
               "RotateY",
-              "RotateZ",
               "Delete",
             ]}
           />