Refactor canvas element references to use consistent ID for workspace

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);