first person bug fix

app/src/components/layout/scenes/MainScene.tsx

@@ -80,7 +80,7 @@ function MainScene() {
                 }
             })
         }
-    }, [setSelectedVersion, versionHistory])
+    }, [setSelectedVersion, versionHistory, projectId])
 
     const handleSelectVersion = (option: string) => {
         const version = versionHistory.find((version) => version.versionName === option);

app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx

@@ -1,10 +1,4 @@
-import {
+import { AddIcon, ArrowIcon, CloseIcon, KebabIcon, LocationIcon } from "../../../icons/ExportCommonIcons";
-    AddIcon,
-    ArrowIcon,
-    CloseIcon,
-    KebabIcon,
-    LocationIcon,
-} from "../../../icons/ExportCommonIcons";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import { useVersionHistoryStore } from "../../../../store/builder/useVersionHistoryStore";
 import { useSubModuleStore } from "../../../../store/useModuleStore";
@@ -30,9 +24,8 @@ const VersionHistory = () => {
 
         getVersionDataApi(projectId, version.versionId).then((versionData) => {
             setSelectedVersion(version);
-            // console.log(versionData);
         }).catch((err) => {
-            // console.log(err);
+            echo.error(err);
         })
     };
 

app/src/components/layout/sidebarRight/versionHisory/VersionSaved.tsx

@@ -1,8 +1,5 @@
 import { useEffect, useState } from "react";
-import {
+import { FinishEditIcon, RenameVersionIcon } from "../../../icons/ExportCommonIcons";
-  FinishEditIcon,
-  RenameVersionIcon,
-} from "../../../icons/ExportCommonIcons";
 import RenderOverlay from "../../../templates/Overlay";
 import { useVersionHistoryStore } from "../../../../store/builder/useVersionHistoryStore";
 import { createVersionApi } from "../../../../services/factoryBuilder/versionControl/addVersionApi";
@@ -11,144 +8,144 @@ import { getUserData } from "../../../../functions/getUserData";
 import { useVersionContext } from "../../../../modules/builder/version/versionContext";
 
 const VersionSaved = () => {
-  const { addVersion, createNewVersion, setCreateNewVersion } = useVersionHistoryStore();
+    const { addVersion, createNewVersion, setCreateNewVersion } = useVersionHistoryStore();
-  const { selectedVersionStore } = useVersionContext();
+    const { selectedVersionStore } = useVersionContext();
-  const { selectedVersion, setSelectedVersion } = selectedVersionStore();
+    const { selectedVersion, setSelectedVersion } = selectedVersionStore();
-  const [newName, setNewName] = useState(new Date().toLocaleString("en-US", {
+    const [newName, setNewName] = useState(new Date().toLocaleString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-  }));
-  const [description, setDescription] = useState("");
-  const [showSaveFinish, setSaveFinish] = useState(false);
-  const { projectId } = useParams();
-  const { userId } = getUserData();
-
-  useEffect(() => {
-    if (createNewVersion) {
-      const defaultName = new Date().toLocaleString("en-US", {
         month: "short",
         day: "numeric",
         year: "numeric",
         hour: "numeric",
         minute: "2-digit",
-      });
+    }));
-      setNewName(defaultName);
+    const [description, setDescription] = useState("");
-      setDescription("");
+    const [saveFinish, setSaveFinish] = useState(false);
-    }
+    const { projectId } = useParams();
-  }, [createNewVersion]);
+    const { userId } = getUserData();
 
-  const handleSave = () => {
+    useEffect(() => {
-    if (!selectedVersion || !projectId) return;
+        if (createNewVersion) {
+            const defaultName = new Date().toLocaleString("en-US", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+                hour: "numeric",
+                minute: "2-digit",
+            });
+            setNewName(defaultName);
+            setDescription("");
+        }
+    }, [createNewVersion]);
 
-    const updatedName = (newName.trim() || selectedVersion.versionName) ?? selectedVersion.timeStamp;
+    const handleSave = () => {
-    const updatedDescription = (description.trim() || selectedVersion.versionName) ?? selectedVersion.timeStamp;
+        if (!selectedVersion || !projectId) return;
 
-    createVersionApi(projectId, userId, selectedVersion.versionId, updatedName, updatedDescription).then((data) => {
+        const updatedName = (newName.trim() || selectedVersion.versionName) ?? selectedVersion.timeStamp;
-      setSaveFinish(true);
+        const updatedDescription = (description.trim() || selectedVersion.versionName) ?? selectedVersion.timeStamp;
-      setCreateNewVersion(false);
 
-      addVersion({
+        createVersionApi(projectId, userId, selectedVersion.versionId, updatedName, updatedDescription).then((data) => {
-        version: data.version,
+            setSaveFinish(true);
-        versionId: data.versionId,
+            setCreateNewVersion(false);
-        versionName: data.versionName,
-        versionDescription: data.description,
-        timeStamp: data.createdAt,
-        createdBy: data.createdBy.userName
-      })
 
-      setSelectedVersion({
+            addVersion({
-        version: data.version,
+                version: data.version,
-        versionId: data.versionId,
+                versionId: data.versionId,
-        versionName: data.versionName,
+                versionName: data.versionName,
-        versionDescription: data.description,
+                versionDescription: data.description,
-        timeStamp: data.createdAt,
+                timeStamp: data.createdAt,
-        createdBy: data.createdBy.userName
+                createdBy: data.createdBy.userName
-      })
+            })
 
-      setTimeout(() => {
+            setSelectedVersion({
+                version: data.version,
+                versionId: data.versionId,
+                versionName: data.versionName,
+                versionDescription: data.description,
+                timeStamp: data.createdAt,
+                createdBy: data.createdBy.userName
+            })
+
+            setTimeout(() => {
+                setSaveFinish(false);
+            }, 3000);
+        }).catch((err) => {
+            setSaveFinish(false);
+            setCreateNewVersion(false);
+        })
+    };
+
+    const handleCancel = () => {
         setSaveFinish(false);
-      }, 3000);
+        setCreateNewVersion(false);
-    }).catch((err) => {
+    };
-      setSaveFinish(false);
-      setCreateNewVersion(false);
-    })
-  };
 
-  const handleCancel = () => {
+    if (!selectedVersion) return null;
-    setSaveFinish(false);
-    setCreateNewVersion(false);
-  };
 
-  if (!selectedVersion) return null;
+    return (
+        <div className={`versionSaved`}>
+            {createNewVersion &&
+                <RenderOverlay>
+                    <div className="edit-version-popup-wrapper">
+                        <div className="details-wrapper-popup-container">
+                            <div className="header-wrapper">
+                                <RenameVersionIcon />
+                                <div className="label">Create Version</div>
+                            </div>
+                            <div className="details-wrapper">
+                                <div className="version-name">
+                                    <input
+                                        type="text"
+                                        value={newName}
+                                        onChange={(e) => setNewName(e.target.value)}
+                                        placeholder="Enter new version name"
+                                    />
+                                    <div className="label">
+                                        by @{selectedVersion.createdBy}{" "}{new Date(selectedVersion.timeStamp).toLocaleDateString("en-US", {
+                                            year: "numeric",
+                                            month: "long",
+                                            day: "2-digit",
+                                        })}
+                                    </div>
+                                </div>
+                                <div className="version-description">
+                                    <textarea
+                                        value={description}
+                                        onChange={(e) => setDescription(e.target.value)}
+                                        placeholder="Add description"
+                                        style={{ resize: "none" }}
+                                    />
+                                </div>
+                            </div>
+                            <div className="btn-wrapper">
+                                <button className="cancel" onClick={handleCancel}>
+                                    Cancel
+                                </button>
+                                <button className="save" onClick={handleSave}>
+                                    Save
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </RenderOverlay>
+            }
 
-  return (
+            {saveFinish && (
-    <div className={`versionSaved`}>
+                <RenderOverlay>
-      {createNewVersion &&
+                    <div className="finishEdit-version-popup-wrapper">
-        <RenderOverlay>
+                        <div className="finishEdit-wrapper-popup-container">
-          <div className="edit-version-popup-wrapper">
+                            <div className="icon">
-            <div className="details-wrapper-popup-container">
+                                <FinishEditIcon />
-              <div className="header-wrapper">
+                            </div>
-                <RenameVersionIcon />
+                            <div className="versionname">
-                <div className="label">Create Version</div>
+                                {newName.trim()}
-              </div>
+                            </div>
-              <div className="details-wrapper">
+                            <div className="success-message">Saved Successfully!</div>
-                <div className="version-name">
+                        </div>
-                  <input
+                    </div>
-                    type="text"
+                </RenderOverlay>
-                    value={newName}
+            )}
-                    onChange={(e) => setNewName(e.target.value)}
+        </div>
-                    placeholder="Enter new version name"
+    );
-                  />
-                  <div className="label">
-                    by @{selectedVersion.createdBy}{" "}{new Date(selectedVersion.timeStamp).toLocaleDateString("en-US", {
-                      year: "numeric",
-                      month: "long",
-                      day: "2-digit",
-                    })}
-                  </div>
-                </div>
-                <div className="version-description">
-                  <textarea
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
-                    placeholder="Add description"
-                    style={{ resize: "none" }}
-                  />
-                </div>
-              </div>
-              <div className="btn-wrapper">
-                <button className="cancel" onClick={handleCancel}>
-                  Cancel
-                </button>
-                <button className="save" onClick={handleSave}>
-                  Save
-                </button>
-              </div>
-            </div>
-          </div>
-        </RenderOverlay>
-      }
-
-      {showSaveFinish && (
-        <RenderOverlay>
-          <div className="finishEdit-version-popup-wrapper">
-            <div className="finishEdit-wrapper-popup-container">
-              <div className="icon">
-                <FinishEditIcon />
-              </div>
-              <div className="versionname">
-                {newName.trim()}
-              </div>
-              <div className="success-message">Saved Successfully!</div>
-            </div>
-          </div>
-        </RenderOverlay>
-      )}
-    </div>
-  );
 };
 
 export default VersionSaved;

app/src/modules/builder/Decal/eventHandler/useDecalEventHandlers.ts

@@ -338,6 +338,8 @@ export function useDecalEventHandlers({
             canvasElement.addEventListener('pointerup', handlePointerUp);
             canvasElement?.addEventListener("keyup", onKeyUp);
             canvasElement.addEventListener("keydown", onKeyDown);
+        } else {
+            setKeyEvent("");
         }
 
         return () => {

app/src/modules/builder/builder.tsx

@@ -30,7 +30,6 @@ import Decal from "./Decal/decal";
 
 import { useParams } from "react-router-dom";
 import { useBuilderStore } from "../../store/builder/useBuilderStore";
-import { getUserData } from "../../functions/getUserData";
 import { findEnvironment } from "../../services/factoryBuilder/environment/findEnvironment";
 
 export default function Builder() {
@@ -46,8 +45,7 @@ export default function Builder() {
     const { setRenderDistance } = useRenderDistance();
     const { setLimitDistance } = useLimitDistance();
     const { projectId } = useParams();
-    const { setHoveredPoint, setHoveredLine } = useBuilderStore();
+    const { setHoveredPoint, setHoveredLine, selectedWallAsset } = useBuilderStore();
-    const { userId, organization } = getUserData();
 
     useEffect(() => {
         if (!toggleView) {
@@ -71,7 +69,7 @@ export default function Builder() {
     }, [projectId]);
 
     useFrame(() => {
-        if (csgRef.current) {
+        if (csgRef.current && selectedWallAsset) {
             csgRef.current.update();
         }
     })

app/src/modules/scene/camera/camMode.tsx

@@ -19,7 +19,9 @@ const CamMode: React.FC = () => {
 
     useEffect(() => {
         const handlePointerLockChange = async () => {
-            if (camMode === "FirstPerson" && !toggleView) {
+            if (document.pointerLockElement && !toggleView) {
+                return;
+            } else if (camMode === "FirstPerson" && !toggleView) {
                 setCamMode("ThirdPerson");
                 await switchToThirdPerson(state.controls, state.camera);
             }

app/src/modules/scene/clouds/clouds.tsx

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { useRef, useState } from 'react';
 import { useFrame } from '@react-three/fiber';
-import { Clouds, Cloud } from '@react-three/drei';
+import { Clouds as DreiClouds, Cloud } from '@react-three/drei';
 
 interface CloudGroupProps {
     initialX: number;
@@ -26,7 +26,7 @@ function CloudGroup({ initialX, initialZ, speed, height }: Readonly<CloudGroupPr
 
     return (
         <group ref={group} position={[initialX, height, initialZ]}>
-            <Clouds material={THREE.MeshBasicMaterial} frustumCulled={false} limit={10000}>
+            <DreiClouds material={THREE.MeshBasicMaterial} frustumCulled={false} limit={10000}>
                 <Cloud
                     seed={Math.random() * 100}
                     bounds={[100, 15, 100]}
@@ -51,12 +51,12 @@ function CloudGroup({ initialX, initialZ, speed, height }: Readonly<CloudGroupPr
                     fade={10000}
                     color="#f0f0f0"
                 />
-            </Clouds>
+            </DreiClouds>
         </group>
     );
 }
 
-export function MovingClouds() {
+export default function Clouds() {
 
     const savedTheme: string | null = localStorage.getItem("theme");
     const [theme, setTheme] = useState(savedTheme || "light");
@@ -72,19 +72,15 @@ export function MovingClouds() {
 
     return (
         <>
-            {theme === 'light' &&
+            {cloudGroups.map((group, index) => (
-                <>
+                <CloudGroup
-                    {cloudGroups.map((group, index) => (
+                    key={index}
-                        <CloudGroup
+                    initialX={group.initialX}
-                            key={index}
+                    initialZ={group.initialZ}
-                            initialX={group.initialX}
+                    speed={group.speed}
-                            initialZ={group.initialZ}
+                    height={group.height}
-                            speed={group.speed}
+                />
-                            height={group.height}
+            ))}
-                        />
-                    ))}
-                </>
-            }
         </>
     );
 }

app/src/modules/scene/setup/setup.tsx

@@ -1,5 +1,6 @@
 import Sun from '../environment/sky'
 import Shadows from '../environment/shadow'
+// import Clouds from '../clouds/clouds';
 import PostProcessing from '../postProcessing/postProcessing'
 import StatsHelper from '../helpers/StatsHelper';
 import Controls from '../controls/controls';
@@ -18,7 +19,7 @@ function Setup() {
 
             <PostProcessing />
 
-            {/* <MovingClouds /> */}
+            {/* <Clouds /> */}
 
             <Environment files={background} environmentIntensity={1.5} />