app/src/components/layout/sidebarLeft/visualization/Templates.tsx

@@ -26,9 +26,14 @@ const Templates = () => {
     templateData();
   }, []);
 
-  const handleDeleteTemplate = async (id: string) => {
+  const handleDeleteTemplate = async (
+    e: React.MouseEvent<HTMLButtonElement>,
+    id: string
+  ) => {
     try {
+      e.stopPropagation();
       const email = localStorage.getItem("email") || "";
+
       const organization = email?.split("@")[1]?.split(".")[0];
       let deleteTemplate = {
         organization: organization,
@@ -49,7 +54,6 @@ const Templates = () => {
   const handleLoadTemplate = async (template: any) => {
     try {
       if (selectedZone.zoneName === "") return;
-
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
 
@@ -108,7 +112,7 @@ const Templates = () => {
               <RenameInput value={`Template ${index + 1}`} />
             </div>
             <button
-              onClick={() => handleDeleteTemplate(template.id)}
+              onClick={(e) => handleDeleteTemplate(e, template.id)}
               className="delete-button"
               aria-label="Delete template"
             >

app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx

@@ -33,7 +33,7 @@ const WidgetsFloating = () => {
   };
 
   return (
-    <div className="floatingWidgets-wrapper">
+    <div className="floatingWidgets-wrapper widgets-wrapper">
       {/* {widgets.map((widget) => (
         <div
           key={widget.id}

app/src/modules/collaboration/collabCams.tsx

@@ -10,13 +10,15 @@ import { useNavigate } from "react-router-dom";
 import { Html } from "@react-three/drei";
 import CollabUserIcon from "./collabUserIcon";
 import { getAvatarColor } from "./users/functions/getAvatarColor";
+import useModuleStore from "../../store/useModuleStore";
 
 const CamModelsGroup = () => {
   const navigate = useNavigate();
   const groupRef = useRef<THREE.Group>(null);
   const email = localStorage.getItem("email");
-	const { activeUsers, setActiveUsers } = useActiveUsers();
+  const { setActiveUsers } = useActiveUsers();
   const { socket } = useSocketStore();
+  const { activeModule } = useModuleStore();
 
   const loader = new GLTFLoader();
   const dracoLoader = new DRACOLoader();
@@ -24,7 +26,12 @@ const CamModelsGroup = () => {
   loader.setDRACOLoader(dracoLoader);
 
   const [cams, setCams] = useState<any[]>([]);
-	const [models, setModels] = useState<Record<string, { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }>>({});
+  const [models, setModels] = useState<
+    Record<
+      string,
+      { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }
+    >
+  >({});
 
   const dedupeCams = (cams: any[]) => {
     const seen = new Set();
@@ -53,9 +60,13 @@ const CamModelsGroup = () => {
     socket.on("userConnectResponse", (data: any) => {
       if (!groupRef.current) return;
       if (data.data.userData.email === email) return;
-			if (socket.id === data.socketId || organization !== data.organization) return;
+      if (socket.id === data.socketId || organization !== data.organization)
+        return;
 
-			const model = groupRef.current.getObjectByProperty("uuid", data.data.userData._id);
+      const model = groupRef.current.getObjectByProperty(
+        "uuid",
+        data.data.userData._id
+      );
       if (model) {
         groupRef.current.remove(model);
       }
@@ -84,7 +95,8 @@ const CamModelsGroup = () => {
 
     socket.on("userDisConnectResponse", (data: any) => {
       if (!groupRef.current) return;
-			if (socket.id === data.socketId || organization !== data.organization) return;
+      if (socket.id === data.socketId || organization !== data.organization)
+        return;
 
       setCams((prev) =>
         prev.filter((cam) => cam.uuid !== data.data.userData._id)
@@ -134,9 +146,21 @@ const CamModelsGroup = () => {
 
       const { targetPosition, targetRotation } = models[uuid];
       model.position.lerp(targetPosition, 0.1);
-			model.rotation.x = THREE.MathUtils.lerp(model.rotation.x, targetRotation.x, 0.1);
-			model.rotation.y = THREE.MathUtils.lerp(model.rotation.y, targetRotation.y, 0.1);
-			model.rotation.z = THREE.MathUtils.lerp(model.rotation.z, targetRotation.z, 0.1);
+      model.rotation.x = THREE.MathUtils.lerp(
+        model.rotation.x,
+        targetRotation.x,
+        0.1
+      );
+      model.rotation.y = THREE.MathUtils.lerp(
+        model.rotation.y,
+        targetRotation.y,
+        0.1
+      );
+      model.rotation.z = THREE.MathUtils.lerp(
+        model.rotation.z,
+        targetRotation.z,
+        0.1
+      );
     });
   });
 
@@ -154,8 +178,16 @@ const CamModelsGroup = () => {
           const newCams = filteredData.map((cam: any) => {
             const newModel = gltf.scene.clone();
             newModel.uuid = cam.userData._id;
-						newModel.position.set(cam.position.x, cam.position.y, cam.position.z);
-						newModel.rotation.set(cam.rotation.x, cam.rotation.y, cam.rotation.z);
+            newModel.position.set(
+              cam.position.x,
+              cam.position.y,
+              cam.position.z
+            );
+            newModel.rotation.set(
+              cam.rotation.x,
+              cam.rotation.y,
+              cam.rotation.z
+            );
             newModel.userData = cam.userData;
             return newModel;
           });
@@ -169,7 +201,11 @@ const CamModelsGroup = () => {
   }, []);
 
   return (
-		<group ref={groupRef} name="Cam-Model-Group">
+    <group
+      ref={groupRef}
+      name="Cam-Model-Group"
+      visible={activeModule !== "visualization" ? true : false}
+    >
       {cams.map((cam, index) => (
         <primitive key={cam.uuid} object={cam}>
           <Html
@@ -181,11 +217,12 @@ const CamModelsGroup = () => {
               color: "white",
               textAlign: "center",
               fontFamily: "Arial, sans-serif",
+              display: `${activeModule !== "visualization" ? "" : "none"}`,
             }}
             position={[-0.015, 0, 0.7]}
           >
             <CollabUserIcon
-							userImage={cam.userData.userImage ||""}
+              userImage={cam.userData.userImage || ""}
               userName={cam.userData.userName}
               color={getAvatarColor(index, cam.userData.userName)}
             />