Refactor canvas element references to use consistent ID for workspace

app/src/modules/collaboration/camera/collabCams.tsx

@@ -12,7 +12,6 @@ import CollabUserIcon from "./collabUserIcon";
 import useModuleStore from "../../../store/useModuleStore";
 import { getAvatarColor } from "../functions/getAvatarColor";
 import { useSelectedUserStore } from "../../../store/useCollabStore";
-import { opacity } from "html2canvas/dist/types/css/property-descriptors/opacity";
 
 const CamModelsGroup = () => {
   const navigate = useNavigate();
@@ -166,6 +165,7 @@ const CamModelsGroup = () => {
       socket.off("userDisConnectResponse");
       socket.off("cameraUpdateResponse");
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [email, loader, navigate, setActiveUsers, socket]);
 
   useFrame(() => {
@@ -232,30 +232,9 @@ const CamModelsGroup = () => {
         });
       }
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // collide validate
-  const collisionThreshold = 0.001;
-
-  const collidedCamUUIDs = new Set<string>();
-
-  for (let i = 0; i < cams.length; i++) {
-    for (let j = i + 1; j < cams.length; j++) {
-      const posA = cams[i].position;
-      const posB = cams[j].position;
-
-      const distSquared =
-        Math.pow(posA.x - posB.x, 2) +
-        Math.pow(posA.y - posB.y, 2) +
-        Math.pow(posA.z - posB.z, 2);
-
-      if (distSquared < collisionThreshold ** 2) {
-        collidedCamUUIDs.add(cams[i].uuid);
-        collidedCamUUIDs.add(cams[j].uuid);
-      }
-    }
-  }
-
   return (
     <group ref={groupRef} name="Cam-Model-Group">
       {cams.map((cam, index) => (

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -155,7 +155,7 @@ const RealTimeVisulization: React.FC = () => {
     height: 0,
   });
   useEffect(() => {
-    const canvas = document.getElementById("real-time-vis-canvas");
+    const canvas = document.getElementById("work-space-three-d-canvas");
     if (!canvas) return;
 
     const updateCanvasDimensions = () => {

app/src/modules/visualization/functions/captureVisualization.ts

@@ -1,7 +1,7 @@
 import html2canvas from "html2canvas";
 
 export const captureVisualization = async (): Promise<string | null> => {
-  const container = document.getElementById("real-time-vis-canvas");
+  const container = document.getElementById("work-space-three-d-canvas");
   if (!container) {
     console.error("Container element not found");
     return null;

app/src/modules/visualization/functions/handleUiDrop.ts

@@ -28,7 +28,7 @@ export const createHandleDrop = ({
         if (!data || selectedZone.zoneName === "") return;
 
         const droppedData = JSON.parse(data);
-        const canvasElement = document.getElementById("real-time-vis-canvas");
+        const canvasElement = document.getElementById("work-space-three-d-canvas");
         if (!canvasElement) throw new Error("Canvas element not found");
 
         const rect = canvasElement.getBoundingClientRect();

app/src/modules/visualization/widgets/2d/DraggableWidget.tsx

@@ -269,7 +269,7 @@ export const DraggableWidget = ({
   // Current: Two identical useEffect hooks for canvas dimensions
   // Remove the duplicate and keep only one
   useEffect(() => {
-    const canvas = document.getElementById("real-time-vis-canvas");
+    const canvas = document.getElementById("work-space-three-d-canvas");
     if (!canvas) return;
 
     const updateCanvasDimensions = () => {

app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx

@@ -89,7 +89,7 @@ export default function Dropped3dWidgets() {
         if (widgetSubOption === "Floating" || widgetSubOption === "2D") return;
         if (selectedZone.zoneName === "") return;
 
-        const canvasElement = document.getElementById("real-time-vis-canvas");
+        const canvasElement = document.getElementById("work-space-three-d-canvas");
 
         if (!canvasElement) return;
 
@@ -601,7 +601,7 @@ export default function Dropped3dWidgets() {
     const handleRightClick3d = (event: React.MouseEvent, id: string) => {
         event.preventDefault();
 
-        const canvasElement = document.getElementById("real-time-vis-canvas");
+        const canvasElement = document.getElementById("work-space-three-d-canvas");
         if (!canvasElement) throw new Error("Canvas element not found");
 
         const canvasRect = canvasElement.getBoundingClientRect();
@@ -654,7 +654,7 @@ export default function Dropped3dWidgets() {
                         setSelectedChartId({ id: id, type: type })
                         event.preventDefault();
                         const canvasElement = document.getElementById(
-                            "real-time-vis-canvas"
+                            "work-space-three-d-canvas"
                         );
                         if (!canvasElement) throw new Error("Canvas element not found");
                         const canvasRect = canvasElement.getBoundingClientRect();

app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx

@@ -1,8 +1,6 @@
-import { WalletIcon } from "../../../../components/icons/3dChartIcons";
 import { useEffect, useRef, useState } from "react";
 import {
   useDroppedObjectsStore,
-  Zones,
 } from "../../../../store/visualization/useDroppedObjectsStore";
 import useModuleStore from "../../../../store/useModuleStore";
 import { determinePosition } from "../../functions/determinePosition";
@@ -14,14 +12,12 @@ import {
   DeleteIcon,
 } from "../../../../components/icons/ExportCommonIcons";
 import DistanceLines from "./DistanceLines"; // Import the DistanceLines component
-import { deleteFloatingWidgetApi } from "../../../../services/visulization/zone/deleteFloatingWidget";
 
 import TotalCardComponent from "./cards/TotalCardComponent";
 import WarehouseThroughputComponent from "./cards/WarehouseThroughputComponent";
 import FleetEfficiencyComponent from "./cards/FleetEfficiencyComponent";
 import { useWidgetStore } from "../../../../store/useWidgetStore";
 import { useSocketStore } from "../../../../store/store";
-import { useClickOutside } from "../../functions/handleWidgetsOuterClick";
 import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
 import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
 interface DraggingState {
@@ -54,7 +50,7 @@ const DroppedObjects: React.FC = () => {
   const updateObjectPosition = useDroppedObjectsStore(
     (state) => state.updateObjectPosition
   );
-  const { setSelectedZone, selectedZone } = useSelectedZoneStore();
+  const { selectedZone } = useSelectedZoneStore();
 
   const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
 
@@ -79,12 +75,8 @@ const DroppedObjects: React.FC = () => {
     bottom: number | "auto";
   } | null>(null); // State to track the current position during drag
   const animationRef = useRef<number | null>(null);
-  const { activeModule } = useModuleStore();
   const chartWidget = useRef<HTMLDivElement>(null);
 
-  // useClickOutside(chartWidget, () => {
-  //   setSelectedChartId(null);
-  // });
   const kebabRef = useRef<HTMLDivElement>(null);
 
   // Clean up animation frame on unmount
@@ -141,12 +133,6 @@ const DroppedObjects: React.FC = () => {
       }
       deleteObject(zoneName, id);
 
-      // let res = await deleteFloatingWidgetApi(id, organization);
-      // s
-
-      // if (res.message === "FloatingWidget deleted successfully") {
-      //   deleteObject(zoneName, id, index); // Call the deleteObject method from the store
-      // }
     } catch (error) {}
   }
 
@@ -160,7 +146,7 @@ const DroppedObjects: React.FC = () => {
     const obj = zone.objects[index];
     const element = event.currentTarget as HTMLElement;
     element.setPointerCapture(event.pointerId);
-    const container = document.getElementById("real-time-vis-canvas");
+    const container = document.getElementById("work-space-three-d-canvas");
     if (!container) return;
 
     const rect = container.getBoundingClientRect();
@@ -322,6 +308,7 @@ const DroppedObjects: React.FC = () => {
           updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
         }
       } catch (error) {
+        console.log(error);
       } finally {
         setDraggingIndex(null);
         setOffset(null);
@@ -343,7 +330,7 @@ const DroppedObjects: React.FC = () => {
   const handlePointerMove = (event: React.PointerEvent) => {
     if (!draggingIndex || !offset) return;
     if (isPlaying === true) return;
-    const container = document.getElementById("real-time-vis-canvas");
+    const container = document.getElementById("work-space-three-d-canvas");
     if (!container) return;
 
     const rect = container.getBoundingClientRect();
@@ -394,12 +381,6 @@ const DroppedObjects: React.FC = () => {
     // Update position immediately without animation frame
     updateObjectPosition(zoneName, draggingIndex.index, newPosition);
 
-    // if (!animationRef.current) {
-    //   animationRef.current = requestAnimationFrame(() => {
-    //     updateObjectPosition(zoneName, draggingIndex.index, newPosition);
-    //     animationRef.current = null;
-    //   });
-    // }
   };
 
   const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => {
@@ -407,7 +388,7 @@ const DroppedObjects: React.FC = () => {
       if (!draggingIndex || !offset) return;
       if (isPlaying === true) return;
 
-      const container = document.getElementById("real-time-vis-canvas");
+      const container = document.getElementById("work-space-three-d-canvas");
       if (!container) return;
 
       const rect = container.getBoundingClientRect();
@@ -450,11 +431,6 @@ const DroppedObjects: React.FC = () => {
       // Save to backend
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-      // const response = await addingFloatingWidgets(zone.zoneId, organization, {
-      //   ...zone.objects[draggingIndex.index],
-      //   position: boundedPosition,
-      // });
-
       let updateFloatingWidget = {
         organization: organization,
         widget: {
@@ -468,21 +444,9 @@ const DroppedObjects: React.FC = () => {
         visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget);
       }
 
-      // if (response.message === "Widget updated successfully") {
-
       updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
-      // }
-
-      // // Clean up
-      // setDraggingIndex(null);
-      // setOffset(null);
-      // setActiveEdges(null); // Clear active edges
-      // setCurrentPosition(null); // Reset current position
-      // if (animationRef.current) {
-      //   cancelAnimationFrame(animationRef.current);
-      //   animationRef.current = null;
-      // }
     } catch (error) {
+      console.log(error);
     } finally {
       // Clean up regardless of success or failure
       setDraggingIndex(null);

app/src/modules/visualization/widgets/panel/Panel.tsx

@@ -56,7 +56,6 @@ const Panel: React.FC<PanelProps> = ({
   setZonesData,
   waitingPanels,
 }) => {
-  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
   const [panelDimensions, setPanelDimensions] = useState<{
     [side in Side]?: { width: number; height: number };
@@ -71,7 +70,7 @@ const Panel: React.FC<PanelProps> = ({
 
   // Track canvas dimensions
   useEffect(() => {
-    const canvas = document.getElementById("real-time-vis-canvas");
+    const canvas = document.getElementById("work-space-three-d-canvas");
     if (!canvas) return;
 
     const updateCanvasDimensions = () => {
@@ -183,7 +182,7 @@ const Panel: React.FC<PanelProps> = ({
 
   // Add widget to panel
   const addWidgetToPanel = async (asset: any, panel: Side) => {
-    const email = localStorage.getItem("email") || "";
+    const email = localStorage.getItem("email") ?? "";
     const organization = email?.split("@")[1]?.split(".")[0];
 
     const newWidget = {

app/src/pages/Project.tsx

@@ -102,7 +102,7 @@ const Project: React.FC = () => {
       )}
       <div
         className="scene-container"
-        id="real-time-vis-canvas"
+        id="work-space-three-d-canvas"
         style={{
           height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
           width: isPlaying || activeModule !== "visualization" ? "100vw" : "",