merged with main

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

@@ -7,10 +7,11 @@ import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";
 
-import DroppedObjects from "./DroppedFloatingWidgets";
+
 import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
 import {
   useAsset3dWidget,
+  useSocketStore,
   useWidgetSubOption,
   useZones,
 } from "../../../store/store";
@@ -18,9 +19,10 @@ import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/g
 import { generateUniqueId } from "../../../functions/generateUniqueId";
 import { determinePosition } from "./functions/determinePosition";
 import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
-import EditWidgetOption from "../menu/EditWidgetOption";
+import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.dev";
 import RenderOverlay from "../../templates/Overlay";
 import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
+import DroppedObjects from "./DroppedFloatingWidgets";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -62,6 +64,7 @@ const RealTimeVisulization: React.FC = () => {
   >({});
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
+  const { visualizationSocket } = useSocketStore();
 
   useEffect(() => {
     async function GetZoneData() {
@@ -136,6 +139,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 newObject = {
         ...droppedData,
         id: generateUniqueId(),
@@ -216,11 +221,10 @@ const RealTimeVisulization: React.FC = () => {
         onDrop={(event) => handleDrop(event)}
         onDragOver={(event) => event.preventDefault()}
       >
-        {/* <Scene /> */}
+        <Scene />
       </div>
-      {activeModule === "visualization" && selectedZone.zoneName !== "" && (
-        <DroppedObjects />
-      )}
+      {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
+      {activeModule === "visualization" && <SocketRealTimeViz />}
       {/* <DroppedObjects /> */}
       {activeModule === "visualization" && (
         <>