feat: Enhance camera control and user experience with improved key handling and speed adjustments

app/src/components/layout/sidebarRight/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { AppDockIcon } from "../../icons/HeaderIcons";
 import orgImg from "../../../assets/orgTemp.png";
 import { useActiveUsers } from "../../../store/store";
@@ -8,7 +8,7 @@ import { getAvatarColor } from "../../../modules/collaboration/functions/getAvat
 
 const Header: React.FC = () => {
   const { activeUsers } = useActiveUsers();
-  const userName = localStorage.getItem("userName") || "Anonymous";
+  const userName = localStorage.getItem("userName") ?? "Anonymous";
 
   const guestUsers: ActiveUser[] = activeUsers.filter(
     (user: ActiveUser) => user.userName !== userName
@@ -23,14 +23,14 @@ const Header: React.FC = () => {
       )}
       <div className="header-container">
         <div className="options-container">
-          <div
+          <button
             className="share-button"
             onClick={() => {
               setUserManagement(true);
             }}
           >
             Share
-          </div>
+          </button>
           {/* <div className="app-docker-button">
             <AppDockIcon />
           </div> */}

app/src/modules/builder/groups/zoneGroup.tsx

@@ -69,7 +69,9 @@ const ZoneGroup: React.FC = () => {
         },
         transparent: true,
         depthWrite: false,
-    }), []);
+      }),
+    []
+  );
 
   useEffect(() => {
     const fetchZones = async () => {
@@ -148,6 +150,7 @@ const ZoneGroup: React.FC = () => {
     }
   }, [toolMode, toggleView]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const addZoneToBackend = async (zone: {
     zoneId: string;
     zoneName: string;
@@ -503,6 +506,15 @@ const ZoneGroup: React.FC = () => {
     draggedSphere,
     movePoint,
     activeLayer,
+    raycaster,
+    pointer,
+    controls,
+    plane,
+    setZones,
+    setZonePoints,
+    addZoneToBackend,
+    handleDeleteZone,
+    updateZoneToBackend,
   ]);
 
   useFrame(() => {
@@ -551,6 +563,7 @@ const ZoneGroup: React.FC = () => {
                     key={index}
                     position={midpoint}
                     rotation={[0, -angle, 0]}
+                    // visible={false}
                   >
                     <planeGeometry args={[planeWidth, planeHeight]} />
                     <primitive

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

@@ -1,25 +1,26 @@
-import { useFrame, useThree } from '@react-three/fiber';
+import { useFrame, useThree } from "@react-three/fiber";
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import * as CONSTANTS from '../../../types/world/worldConstants';
+import * as CONSTANTS from "../../../types/world/worldConstants";
-import { useCamMode, useToggleView } from '../../../store/store';
+import { useCamMode, useToggleView } from "../../../store/store";
-import { useKeyboardControls } from '@react-three/drei';
+import { useKeyboardControls } from "@react-three/drei";
-import switchToThirdPerson from './switchToThirdPerson';
+import switchToThirdPerson from "./switchToThirdPerson";
-import switchToFirstPerson from './switchToFirstPerson';
+import switchToFirstPerson from "./switchToFirstPerson";
-import { detectModifierKeys } from '../../../utils/shortcutkeys/detectModifierKeys';
+import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys";
 
 const CamMode: React.FC = () => {
   const { camMode, setCamMode } = useCamMode();
-    const [, get] = useKeyboardControls()
+  const [, get] = useKeyboardControls();
   const [isTransitioning, setIsTransitioning] = useState(false);
   const state: any = useThree();
   const { toggleView } = useToggleView();
+  const [isShiftActive, setIsShiftActive] = useState(false);
 
   useEffect(() => {
     const handlePointerLockChange = async () => {
       if (document.pointerLockElement && !toggleView) {
-                // console.log('Pointer is locked');
+        // Pointer is locked
       } else {
-                // console.log('Pointer is unlocked');
+        // Pointer is unlocked
         if (camMode === "FirstPerson" && !toggleView) {
           setCamMode("ThirdPerson");
           await switchToThirdPerson(state.controls, state.camera);
@@ -27,27 +28,57 @@ const CamMode: React.FC = () => {
       }
     };
 
-        document.addEventListener('pointerlockchange', handlePointerLockChange);
+    document.addEventListener("pointerlockchange", handlePointerLockChange);
 
     return () => {
-            document.removeEventListener('pointerlockchange', handlePointerLockChange);
+      document.removeEventListener(
+        "pointerlockchange",
+        handlePointerLockChange
+      );
     };
   }, [camMode, toggleView, setCamMode, state.controls, state.camera]);
 
   useEffect(() => {
-        const handleKeyPress = async (event: any) => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Shift") {
+        setIsShiftActive(true);
+      }
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === "Shift") {
+        setIsShiftActive(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleKeyPress = async (event: KeyboardEvent) => {
       if (!state.controls) return;
 
       const keyCombination = detectModifierKeys(event);
 
       if (keyCombination === "/" && !isTransitioning && !toggleView) {
         setIsTransitioning(true);
-                state.controls.mouseButtons.left = CONSTANTS.controlsTransition.leftMouse;
-                state.controls.mouseButtons.right = CONSTANTS.controlsTransition.rightMouse;
-                state.controls.mouseButtons.wheel = CONSTANTS.controlsTransition.wheelMouse;
-                state.controls.mouseButtons.middle = CONSTANTS.controlsTransition.middleMouse;
 
-                if (camMode === 'ThirdPerson') {
+        state.controls.mouseButtons.left =
+          CONSTANTS.controlsTransition.leftMouse;
+        state.controls.mouseButtons.right =
+          CONSTANTS.controlsTransition.rightMouse;
+        state.controls.mouseButtons.wheel =
+          CONSTANTS.controlsTransition.wheelMouse;
+        state.controls.mouseButtons.middle =
+          CONSTANTS.controlsTransition.middleMouse;
+
+        if (camMode === "ThirdPerson") {
           setCamMode("FirstPerson");
           await switchToFirstPerson(state.controls, state.camera);
         } else if (camMode === "FirstPerson") {
@@ -63,24 +94,47 @@ const CamMode: React.FC = () => {
     return () => {
       window.removeEventListener("keydown", handleKeyPress);
     };
-    }, [camMode, isTransitioning, toggleView, state.controls, state.camera, setCamMode]);
+  }, [
+    camMode,
+    isTransitioning,
+    toggleView,
+    state.controls,
+    state.camera,
+    setCamMode,
+  ]);
 
   useFrame(() => {
     const { forward, backward, left, right } = get();
-        if (!state.controls) return
+    if (!state.controls) return;
-        if (!state.controls || camMode === "ThirdPerson" || !document.pointerLockElement) return;
+    if (camMode === "ThirdPerson" || !document.pointerLockElement) return;
+
+    const speedMultiplier = isShiftActive ? 4 : 1;
 
     if (forward) {
-            state.controls.forward(CONSTANTS.firstPersonControls.forwardSpeed, true)
+      state.controls.forward(
+        CONSTANTS.firstPersonControls.forwardSpeed * speedMultiplier,
+        true
+      );
     }
     if (backward) {
-            state.controls.forward(CONSTANTS.firstPersonControls.backwardSpeed, true)
+      state.controls.forward(
+        CONSTANTS.firstPersonControls.backwardSpeed * speedMultiplier,
+        true
+      );
     }
     if (left) {
-            state.controls.truck(CONSTANTS.firstPersonControls.leftSpeed, 0, true)
+      state.controls.truck(
+        CONSTANTS.firstPersonControls.leftSpeed * speedMultiplier,
+        0,
+        true
+      );
     }
     if (right) {
-            state.controls.truck(CONSTANTS.firstPersonControls.rightSpeed, 0, true)
+      state.controls.truck(
+        CONSTANTS.firstPersonControls.rightSpeed * speedMultiplier,
+        0,
+        true
+      );
     }
   });
 

app/src/types/world/worldConstants.ts

@@ -189,10 +189,10 @@ export const firstPersonControls: Controls = {
   maxDistance: 0, // Maximum distance from the target
   maxPolarAngle: Math.PI, // Maximum polar angle
   leftMouse: 1, // Mouse button for rotation (ROTATE)
-  forwardSpeed: 0.3, // Speed of forward movement
+  forwardSpeed: 0.1, // Speed of forward movement
-  backwardSpeed: -0.3, // Speed of backward movement
+  backwardSpeed: -0.1, // Speed of backward movement
-  leftSpeed: -0.3, // Speed of left movement
+  leftSpeed: -0.1, // Speed of left movement
-  rightSpeed: 0.3, // Speed of right movement
+  rightSpeed: 0.1, // Speed of right movement
 };
 
 export const thirdPersonControls: ThirdPersonControls = {

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -190,7 +190,7 @@ const KeyPressListener: React.FC = () => {
         return () => {
             window.removeEventListener("keydown", handleKeyPress);
         };
-    }, [activeModule, toggleUI, toggleView]); // Dependencies to reapply effect if these values change
+    }, [activeModule, setActiveModule, setActiveSubTool, setActiveTool, setAddAction, setDeleteTool, setIsPlaying, setSelectedWallItem, setToggleThreeD, setToggleUI, setToggleView, setToolMode, toggleUI, toggleView]); // Dependencies to reapply effect if these values change
 
     return null; // This component does not render any UI
 };