added zones drop down in builder ouline and adjust width of displayZones

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

@@ -17,6 +17,7 @@ import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneD
 import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
 import { useClickOutside } from "./functions/handleWidgetsOuterClick";
 import { useSocketStore } from "../../../store/store";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -243,6 +244,7 @@ export const DraggableWidget = ({
   // useClickOutside(chartWidget, () => {
   //   setSelectedChartId(null);
   // });
+  const { isPlaying } = usePlayButtonStore();
 
   console.log('isPanelHidden: ', isPanelHidden);
   return (
@@ -250,9 +252,8 @@ export const DraggableWidget = ({
       <div
         draggable
         key={widget.id}
-        className={`chart-container ${
-          selectedChartId?.id === widget.id && "activeChart"
-        }`}
+        className={`chart-container ${(selectedChartId?.id === widget.id) && !isPlaying && "activeChart"
+          }`}
         onPointerDown={handlePointerDown}
         onDragStart={handleDragStart}
         onDragEnter={handleDragEnter}
@@ -273,9 +274,8 @@ export const DraggableWidget = ({
         {openKebabId === widget.id && (
           <div className="kebab-options" ref={widgetRef}>
             <div
-              className={`edit btn ${
-                isPanelFull(widget.panel) ? "btn-blur" : ""
-              }`}
+              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
+                }`}
               onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
             >
               <div className="icon">

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

@@ -1,5 +1,5 @@
 import { useThree } from "@react-three/fiber";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
 import useModuleStore from "../../../store/useModuleStore";
 import { ThreeState } from "../../../types/world/worldTypes";
@@ -13,30 +13,43 @@ import { generateUniqueId } from "../../../functions/generateUniqueId";
 import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
 import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
 import { use3DWidget } from "../../../store/useDroppedObjectsStore";
-import { useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
+import { useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
+import { useWidgetStore } from "../../../store/useWidgetStore";
+import EditWidgetOption from "../menu/EditWidgetOption";
 
 export default function Dropped3dWidgets() {
     const { widgetSelect } = useAsset3dWidget();
     const { activeModule } = useModuleStore();
-    const { raycaster, gl, scene }: ThreeState = useThree();
+    const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
     const { widgetSubOption } = useWidgetSubOption();
     const { selectedZone } = useSelectedZoneStore();
+    const { top, setTop } = useTopData()
+    const { left, setLeft } = useLeftData()
+    const { rightSelect, setRightSelect } = useRightSelected()
 
     // ✅ Use Zustand Store instead of useState
-    const { zoneWidgetData, setZoneWidgetData, addWidget } = useZoneWidgetStore();
+    const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition } = useZoneWidgetStore();
     const { setWidgets3D } = use3DWidget();
     const { visualizationSocket } = useSocketStore();
+    const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
+
+    const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Floor plane for horizontal move
+    const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)); // Vertical plane for vertical move
+    const planeIntersect = useRef(new THREE.Vector3());
+    // let [verticalPlane, setFloorPlanesVertical] = useState(
+    //     new THREE.Plane(new THREE.Vector3(0, 1, 0))
+    // );
 
     useEffect(() => {
         if (activeModule !== "visualization") return;
         if (!selectedZone.zoneId) return;
 
-    const email = localStorage.getItem("email") || "";
-    const organization = email?.split("@")[1]?.split(".")[0];
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
 
         async function get3dWidgetData() {
             let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
-            console.log('result: ', result);
+
             setWidgets3D(result);
 
             const formattedWidgets = result.map((widget: any) => ({
@@ -89,13 +102,13 @@ export default function Dropped3dWidgets() {
                     widget: newWidget,
                     zoneId: selectedZone.zoneId
                 }
-                console.log('add3dWidget: ', add3dWidget);
+
                 if (visualizationSocket) {
                     visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget)
                 }
 
                 // let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget);
-                // console.log('response: ', response);
+                // 
 
                 // if (response.message === "Widget created successfully") {
                 addWidget(selectedZone.zoneId, newWidget);
@@ -111,23 +124,142 @@ export default function Dropped3dWidgets() {
 
     const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
 
+    useEffect(() => {
+        if (!rightClickSelected) return;
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+        if (rightSelect === "Duplicate") {
+            const widgetToDuplicate = activeZoneWidgets.find(w => w.id === rightClickSelected);
+            if (!widgetToDuplicate) return;
+            const newWidget = {
+                id: generateUniqueId(),
+                type: widgetToDuplicate.type,
+                position: [
+                    widgetToDuplicate.position[0] + 0.5, // Slightly shift position
+                    widgetToDuplicate.position[1],
+                    widgetToDuplicate.position[2] + 0.5,
+                ] as [number, number, number],
+            };
+            let add3dWidget = {
+                organization,
+                widget: newWidget,
+                zoneId: selectedZone.zoneId
+            };
+            // if (visualizationSocket) {
+            //     visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
+            // }
+            addWidget(selectedZone.zoneId, newWidget);
+            setRightSelect(null);
+            setRightClickSelected(null);
+        }
+        if (rightSelect === "Delete") {
+            let deleteWidget = {
+                organization,
+                widgetId: rightClickSelected,
+                zoneId: selectedZone.zoneId
+            };
+            // if (visualizationSocket) {
+            //     visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget);
+            // }
+            setZoneWidgetData(selectedZone.zoneId, activeZoneWidgets.filter(w => w.id !== rightClickSelected));
+            setRightClickSelected(null);
+            setRightSelect(null);
+        }
+        if (rightSelect === "Horizontal Move") {
+
+        }
+        if (rightSelect === "Vertical Move") {
+
+        }
+
+    }, [rightSelect, rightClickSelected]);
+
+    useEffect(() => {
+        const handleMouseMove = (event: MouseEvent) => {
+            if (!rightClickSelected || !rightSelect) return;
+
+
+            const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
+                zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
+            );
+            if (!selectedZone) return;
+
+            const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected);
+            if (!selectedWidget) return;
+
+            const rect = gl.domElement.getBoundingClientRect();
+            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+            raycaster.setFromCamera(mouse, camera);
+
+            if (rightSelect === "Horizontal Move" && raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
+
+                updateWidgetPosition(selectedZone, rightClickSelected, [
+                    planeIntersect.current.x,
+                    selectedWidget.position[1],
+                    planeIntersect.current.z
+                ]);
+            }
+
+            if (rightSelect === "Vertical Move") {
+                if (raycaster.ray.intersectPlane(verticalPlane.current, planeIntersect.current)) {
+                    updateWidgetPosition(selectedZone, rightClickSelected, [
+                        selectedWidget.position[0],
+                        planeIntersect.current.y, // Ensure Y value updates correctly
+                        selectedWidget.position[2]
+                    ]);
+                } else {
+                    console.log("No Intersection with Vertical Plane");
+                }
+            }
+        };
+
+        const handleMouseUp = () => {
+
+            if (rightClickSelected && (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move")) {
+
+                setTimeout(() => {
+                    setRightClickSelected(null);
+                    setRightSelect(null);
+                }, 50);
+            }
+        };
+
+        // Attach events to window instead of gl.domElement
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
+
+
+
+
     return (
         <>
             {activeZoneWidgets.map(({ id, type, position }) => {
-                console.log('Typeeeeeeeeeeee',type);
+                const handleRightClick = (event: React.MouseEvent) => {
+                    event.preventDefault();
+                    setRightClickSelected(id)
+                };
                 switch (type) {
                     case "ui-Widget 1":
-                        return <ProductionCapacity key={id} id={id} type={type} position={position} />;
+                        return <ProductionCapacity key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
                     case "ui-Widget 2":
-                        return <ReturnOfInvestment key={id} id={id} type={type} position={position} />;
+                        return <ReturnOfInvestment key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
                     case "ui-Widget 3":
-                        return <StateWorking key={id} id={id} type={type} position={position} />;
+                        return <StateWorking key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
                     case "ui-Widget 4":
-                        return <Throughput key={id} id={id} type={type} position={position} />;
+                        return <Throughput key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
                     default:
                         return null;
                 }
             })}
+
         </>
     );
 }

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

@@ -23,6 +23,8 @@ import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.
 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";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -55,8 +57,9 @@ const RealTimeVisulization: React.FC = () => {
   const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
-  const { zones } = useZones();
 
+
+  const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
 
   const [floatingWidgets, setFloatingWidgets] = useState<
@@ -93,7 +96,7 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) {}
+      } catch (error) { }
     }
 
     GetZoneData();
@@ -178,7 +181,6 @@ const RealTimeVisulization: React.FC = () => {
         .getState()
         .addObject(selectedZone.zoneName, newObject);
       // }
-
       // Update floating widgets state
       setFloatingWidgets((prevWidgets) => ({
         ...prevWidgets,
@@ -192,9 +194,10 @@ const RealTimeVisulization: React.FC = () => {
           ],
         },
       }));
-    } catch (error) {}
+    } catch (error) { }
   };
 
+  function handleRightClickSel(){}
   return (
     <div
       ref={containerRef}
@@ -206,11 +209,6 @@ const RealTimeVisulization: React.FC = () => {
         left: isPlaying || activeModule !== "visualization" ? "0%" : "",
       }}
     >
-      {/* <RenderOverlay>
-        <EditWidgetOption
-          options={["Dublicate", "Vertical Move", "Horizontal Move", "Delete"]}
-        />
-      </RenderOverlay> */}
       {openConfirmationPopup && (
         <RenderOverlay>
           <ConfirmationPopup
@@ -231,16 +229,15 @@ const RealTimeVisulization: React.FC = () => {
         onDrop={(event) => handleDrop(event)}
         onDragOver={(event) => event.preventDefault()}
       >
-        {/* <Scene /> */}
+        <Scene />
       </div>
       {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
       {activeModule === "visualization" && <SocketRealTimeViz />}
-      {/* <DroppedObjects /> */}
-      {/* <RenderOverlay>
-        <EditWidgetOption
-          options={["Dublicate", "Vertical Move", "Horizontal Move", "Delete"]}
-        />
-      </RenderOverlay> */}
+
+      {activeModule === "visualization" && widgetSubOption === "3D" && rightClickSelected && <EditWidgetOption
+        options={["Duplicate", "Vertical Move", "Horizontal Move", "Delete"]} 
+      />}
+
       {activeModule === "visualization" && (
         <>
           <DisplayZone

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

@@ -1,29 +0,0 @@
-// import { useSelectedZoneStore } from "../../../store/useZoneStore";
-
-
-// type HandleDropTemplateProps = {
-//   templateId: string;
-// };
-
-// export const handleDropTemplate = ({ templateId }: HandleDropTemplateProps): void => {
-//   const { getTemplate } = useTemplateStore.getState();
-//   const { setSelectedZone } = useSelectedZoneStore.getState();
-
-//   // Find the template by ID
-//   const template: Template | undefined = getTemplate(templateId);
-
-//   if (!template) {
-//     console.error("Template not found!");
-//     return;
-//   }
-
-//   // Update the selected zone with the template data
-//   setSelectedZone((prev) => ({
-//     ...prev,
-//     panelOrder: template.panelOrder,
-//     activeSides: Array.from(new Set([...prev.activeSides, ...template.panelOrder])),
-//     widgets: template.widgets, // Keep widget structure the same
-//   }));
-
-//   console.log("Dropped template applied:", template);
-// };