updated realTimeViz panel style

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 {
+  useEditWidgetOptionsStore,
+  useRightClickSelected,
+  useRightSelected,
+} from "../../../store/useZone3DWidgetStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -58,8 +61,10 @@ const RealTimeVisulization: React.FC = () => {
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
 
-
-  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<
@@ -69,6 +74,7 @@ const RealTimeVisulization: React.FC = () => {
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
 
+
   useEffect(() => {
     async function GetZoneData() {
       const email = localStorage.getItem("email") || "";
@@ -96,7 +102,7 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) { }
+      } catch (error) {}
     }
 
     GetZoneData();
@@ -142,8 +148,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 +168,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,76 +200,134 @@ 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(() => {
+    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]);
 
-  function handleRightClickSel(){}
   return (
-    <div
-      ref={containerRef}
-      id="real-time-vis-canvas"
-      className={`realTime-viz canvas ${isPlaying ? "playingFlase" : ""}`}
-      style={{
-        height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
-        width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
-        left: isPlaying || activeModule !== "visualization" ? "0%" : "",
-      }}
-    >
-      {openConfirmationPopup && (
-        <RenderOverlay>
-          <ConfirmationPopup
-            message={"Are you sure want to delete?"}
-            onConfirm={() => console.log("confirm")}
-            onCancel={() => setOpenConfirmationPopup(false)}
-          />
-        </RenderOverlay>
-      )}
+    <>
+
+
       <div
+        ref={containerRef}
+        id="real-time-vis-canvas"
+        className={`realTime-viz canvas ${isPlaying ? "playingFlase" : ""}`}
+        style={{
+          height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
+          width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
+          left: isPlaying || activeModule !== "visualization" ? "0%" : "",
+        }}
+      >
+        <div className="realTime-viz-wrapper">
+          {openConfirmationPopup && (
+            <RenderOverlay>
+              <ConfirmationPopup
+                message={"Are you sure want to delete?"}
+                onConfirm={() => console.log("confirm")}
+                onCancel={() => setOpenConfirmationPopup(false)}
+              />
+            </RenderOverlay>
+          )}
+          {/* <div
         className="scene-container"
         style={{
           height: "100%",
           width: "100%",
           borderRadius:
-            isPlaying || activeModule !== "visualization" ? "" : "6px",
-        }}
-        onDrop={(event) => handleDrop(event)}
-        onDragOver={(event) => event.preventDefault()}
-      >
-        <Scene />
-      </div>
-      {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
-      {activeModule === "visualization" && <SocketRealTimeViz />}
-
-      {activeModule === "visualization" && widgetSubOption === "3D" && rightClickSelected && <EditWidgetOption
-        options={["Duplicate", "Vertical Move", "Horizontal Move", "Delete"]} 
-      />}
-
-      {activeModule === "visualization" && (
-        <>
-          <DisplayZone
-            zonesData={zonesData}
-            selectedZone={selectedZone}
-            setSelectedZone={setSelectedZone}
-          />
-
-          {!isPlaying && selectedZone?.zoneName !== "" && (
-            <AddButtons
-              hiddenPanels={hiddenPanels}
-              setHiddenPanels={setHiddenPanels}
-              selectedZone={selectedZone}
-              setSelectedZone={setSelectedZone}
-            />
+          isPlaying || activeModule !== "visualization" ? "" : "6px",
+          }}
+          onDrop={(event) => handleDrop(event)}
+          onDragOver={(event) => event.preventDefault()}
+          >
+          <Scene />
+          </div> */}
+          {activeModule === "visualization" && selectedZone.zoneName !== "" && (
+            <DroppedObjects />
           )}
+          {activeModule === "visualization" && <SocketRealTimeViz />}
 
-          <Panel
-            selectedZone={selectedZone}
-            setSelectedZone={setSelectedZone}
-            hiddenPanels={hiddenPanels}
-            setZonesData={setZonesData}
-          />
-        </>
-      )}
-    </div>
+          {activeModule === "visualization" &&
+            editWidgetOptions &&
+            rightClickSelected && (
+              <EditWidgetOption
+                options={[
+                  "Duplicate",
+                  "Vertical Move",
+                  "Horizontal Move",
+                  "RotateX",
+                  "RotateY",
+                  "Delete",
+                ]}
+              />
+            )}
+
+          {activeModule === "visualization" && (
+            <>
+              <DisplayZone
+                zonesData={zonesData}
+                selectedZone={selectedZone}
+                setSelectedZone={setSelectedZone}
+              />
+
+              {!isPlaying && selectedZone?.zoneName !== "" && (
+                <AddButtons
+                  hiddenPanels={hiddenPanels}
+                  setHiddenPanels={setHiddenPanels}
+                  selectedZone={selectedZone}
+                  setSelectedZone={setSelectedZone}
+                />
+              )}
+
+              <Panel
+                selectedZone={selectedZone}
+                setSelectedZone={setSelectedZone}
+                hiddenPanels={hiddenPanels}
+                setZonesData={setZonesData}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </>
   );
 };