diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index 8fa95a9..5938aa3 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -115,17 +115,10 @@ const Tools: React.FC = () => { setOpenDrop(false); // Close the dropdown } }; - const handleEscKeyPress = (event: KeyboardEvent) => { - if (event.key === "Escape") { - setIsPlaying(false); // Set isPlaying to false when Escape key is pressed - } - }; document.addEventListener("mousedown", handleOutsideClick); - document.addEventListener("keydown", handleEscKeyPress); // Listen for ESC key return () => { document.removeEventListener("mousedown", handleOutsideClick); - document.removeEventListener("keydown", handleEscKeyPress); // Clean up the event listener }; }, []); useEffect(() => { diff --git a/app/src/modules/scene/camera/camMode.tsx b/app/src/modules/scene/camera/camMode.tsx index ba1aa0f..b4a59b0 100644 --- a/app/src/modules/scene/camera/camMode.tsx +++ b/app/src/modules/scene/camera/camMode.tsx @@ -5,6 +5,7 @@ import { useCamMode, useToggleView } from '../../../store/store'; import { useKeyboardControls } from '@react-three/drei'; import switchToThirdPerson from './switchToThirdPerson'; import switchToFirstPerson from './switchToFirstPerson'; +import { detectModifierKeys } from '../../../utils/shortcutkeys/detectModifierKeys'; const CamMode: React.FC = () => { const { camMode, setCamMode } = useCamMode(); @@ -37,7 +38,9 @@ const CamMode: React.FC = () => { const handleKeyPress = async (event: any) => { if (!state.controls) return; - if (event.key === "/" && !isTransitioning && !toggleView) { + const keyCombination = detectModifierKeys(event); + + if (keyCombination === "/" && !isTransitioning && !toggleView) { setIsTransitioning(true); state.controls.mouseButtons.left = CONSTANTS.controlsTransition.leftMouse; state.controls.mouseButtons.right = CONSTANTS.controlsTransition.rightMouse; @@ -81,9 +84,7 @@ const CamMode: React.FC = () => { } }); - return ( - <> - ); + return null; // This component does not render any UI }; export default CamMode; \ No newline at end of file diff --git a/app/src/modules/scene/controls/selection/copyPasteControls.tsx b/app/src/modules/scene/controls/selection/copyPasteControls.tsx index 5af10c0..0c68da3 100644 --- a/app/src/modules/scene/controls/selection/copyPasteControls.tsx +++ b/app/src/modules/scene/controls/selection/copyPasteControls.tsx @@ -5,6 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore, import { toast } from "react-toastify"; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; import * as Types from "../../../../types/world/worldTypes"; +import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, selectionGroup, setDuplicatedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => { const { camera, controls, gl, scene, pointer, raycaster } = useThree(); @@ -38,10 +39,12 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas }; const onKeyDown = (event: KeyboardEvent) => { - if (event.ctrlKey && event.key.toLowerCase() === "c" && movedObjects.length === 0 && rotatedObjects.length === 0) { + const keyCombination = detectModifierKeys(event); + + if (keyCombination === "Ctrl+C" && movedObjects.length === 0 && rotatedObjects.length === 0) { copySelection(); } - if (event.ctrlKey && event.key.toLowerCase() === "v" && copiedObjects.length > 0 && pastedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) { + if (keyCombination === "Ctrl+V" && copiedObjects.length > 0 && pastedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) { pasteCopiedObjects(); } }; @@ -570,9 +573,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas setSelectedAssets([]); } - return ( - <> - ); + return null; // No visible output, but the component handles copy-paste functionality }; export default CopyPasteControls; \ No newline at end of file diff --git a/app/src/modules/scene/controls/selection/duplicationControls.tsx b/app/src/modules/scene/controls/selection/duplicationControls.tsx index 2964181..dbd0b34 100644 --- a/app/src/modules/scene/controls/selection/duplicationControls.tsx +++ b/app/src/modules/scene/controls/selection/duplicationControls.tsx @@ -6,6 +6,7 @@ import { toast } from "react-toastify"; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; import * as Types from "../../../../types/world/worldTypes"; import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; +import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedObjects, setpastedObjects, selectionGroup, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => { const { camera, controls, gl, scene, pointer, raycaster } = useThree(); @@ -39,12 +40,11 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb }; const onKeyDown = (event: KeyboardEvent) => { - if (event.key.toLowerCase() === "d") { - event.preventDefault(); - if (event.ctrlKey && event.key.toLowerCase() === "d" && selectedAssets.length > 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) { + const keyCombination = detectModifierKeys(event); + + if (keyCombination === "Ctrl+D" && selectedAssets.length > 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) { duplicateSelection(); } - } }; if (!toggleView) { @@ -552,9 +552,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb setSelectedAssets([]); } - return ( - <> - ); + return null; // This component does not render any UI }; export default DuplicationControls; \ No newline at end of file diff --git a/app/src/modules/scene/controls/selection/moveControls.tsx b/app/src/modules/scene/controls/selection/moveControls.tsx index 2a11c53..47a3747 100644 --- a/app/src/modules/scene/controls/selection/moveControls.tsx +++ b/app/src/modules/scene/controls/selection/moveControls.tsx @@ -5,6 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore, // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; import { toast } from "react-toastify"; import * as Types from "../../../../types/world/worldTypes"; +import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) { const { camera, controls, gl, scene, pointer, raycaster } = useThree(); @@ -56,14 +57,16 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje }; const onKeyDown = (event: KeyboardEvent) => { + const keyCombination = detectModifierKeys(event); + if (pastedObjects.length > 0 || duplicatedObjects.length > 0 || rotatedObjects.length > 0) return; - if (event.key.toLowerCase() === "g") { + if (keyCombination === "G") { if (selectedAssets.length > 0) { moveAssets(); itemsData.current = floorItems.filter((item: { modeluuid: string }) => selectedAssets.some((asset: any) => asset.uuid === item.modeluuid)); } } - if (event.key.toLowerCase() === "escape") { + if (keyCombination === "ESCAPE") { event.preventDefault(); clearSelection(); @@ -453,9 +456,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje setSelectedAssets([]); } - return ( - <> - ) + return null; // No need to return anything, as this component is used for its side effects } export default MoveControls \ No newline at end of file diff --git a/app/src/modules/scene/controls/selection/rotateControls.tsx b/app/src/modules/scene/controls/selection/rotateControls.tsx index 90143ca..bef64a2 100644 --- a/app/src/modules/scene/controls/selection/rotateControls.tsx +++ b/app/src/modules/scene/controls/selection/rotateControls.tsx @@ -457,9 +457,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo setSelectedAssets([]); } - return ( - <> - ) + return null; // No need to return anything, as this component is used for its side effects } export default RotateControls \ No newline at end of file diff --git a/app/src/modules/scene/controls/selection/selectionControls.tsx b/app/src/modules/scene/controls/selection/selectionControls.tsx index 11c2dfb..acaed3a 100644 --- a/app/src/modules/scene/controls/selection/selectionControls.tsx +++ b/app/src/modules/scene/controls/selection/selectionControls.tsx @@ -14,6 +14,7 @@ import CopyPasteControls from "./copyPasteControls"; import MoveControls from "./moveControls"; import RotateControls from "./rotateControls"; import useModuleStore from "../../../../store/useModuleStore"; +import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; const SelectionControls: React.FC = () => { const { camera, controls, gl, scene, pointer } = useThree(); @@ -101,12 +102,13 @@ const SelectionControls: React.FC = () => { }; const onKeyDown = (event: KeyboardEvent) => { + const keyCombination = detectModifierKeys(event); if (movedObjects.length > 0 || rotatedObjects.length > 0) return; - if (event.key.toLowerCase() === "escape") { + if (keyCombination === "ESCAPE") { event.preventDefault(); clearSelection(); } - if (event.key.toLowerCase() === "delete") { + if (keyCombination === "DELETE") { event.preventDefault(); deleteSelection(); } diff --git a/app/src/modules/simulation/path/pathCreation.tsx b/app/src/modules/simulation/path/pathCreation.tsx index 839cf39..c31da9b 100644 --- a/app/src/modules/simulation/path/pathCreation.tsx +++ b/app/src/modules/simulation/path/pathCreation.tsx @@ -16,6 +16,7 @@ import { useFrame, useThree } from "@react-three/fiber"; import { useSubModuleStore } from "../../../store/useModuleStore"; import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { setEventApi } from "../../../services/factoryBuilder/assest/floorAsset/setEventsApt"; +import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys"; function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObject; }) { const { isPlaying } = usePlayButtonStore(); @@ -40,11 +41,12 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec useEffect(() => { setTransformMode(null); const handleKeyDown = (e: KeyboardEvent) => { + const keyCombination = detectModifierKeys(e); if (!selectedActionSphere) return; - if (e.key === "g") { + if (keyCombination === "G") { setTransformMode((prev) => (prev === "translate" ? null : "translate")); } - if (e.key === "r") { + if (keyCombination === "R") { setTransformMode((prev) => (prev === "rotate" ? null : "rotate")); } };