diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx index 3e29112..d3700f4 100644 --- a/app/src/components/layout/sidebarRight/Header.tsx +++ b/app/src/components/layout/sidebarRight/Header.tsx @@ -5,18 +5,22 @@ import CollaborationPopup from "../../templates/CollaborationPopup"; import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore"; import { useToggleStore } from "../../../store/ui/useUIToggleStore"; -import { ToggleSidebarIcon } from "../../icons/HeaderIcons"; -import useModuleStore from "../../../store/ui/useModuleStore"; -import { getUserData } from "../../../functions/getUserData"; +import { useSocketStore } from "../../../store/socket/useSocketStore"; import { useSceneContext } from "../../../modules/scene/sceneContext"; +import useModuleStore from "../../../store/ui/useModuleStore"; +import { ToggleSidebarIcon } from "../../icons/HeaderIcons"; +import { getUserData } from "../../../functions/getUserData"; +import { useParams } from "react-router-dom"; const Header: React.FC = () => { + const { builderSocket } = useSocketStore(); const { collabUsersStore } = useSceneContext(); const { collabUsers } = collabUsersStore(); - const { userId, userName } = getUserData(); + const { userId, userName, organization } = getUserData(); const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore(); const { activeModule } = useModuleStore(); const { toggleView } = useToggleView(); + const { projectId } = useParams(); const guestUsers = collabUsers.filter((user) => user.userId !== userId); @@ -27,6 +31,7 @@ const Header: React.FC = () => { useEffect(() => { if ((activeModule !== "builder" && activeModule !== "simulation") || (toggleView && selectedUser)) { clearSelectedUser(); + setCamMode("ThirdPerson"); } }, [toggleView, activeModule, selectedUser]); @@ -50,7 +55,7 @@ const Header: React.FC = () => { }; // retun on no data - if (!position || !target || !rotation) return; + if (!position || !target || !rotation || !builderSocket?.connected || !organization || !projectId) return; // Set the selected user in the store setSelectedUser({ @@ -60,6 +65,8 @@ const Header: React.FC = () => { location: { position, rotation, target }, }); setCamMode("FollowPerson"); + + builderSocket.emit("v1:room:userdata:set", { followingUser: user.userId, organization, projectId }); } return ( diff --git a/app/src/components/templates/FollowPerson.tsx b/app/src/components/templates/FollowPerson.tsx index 47e3234..934e56f 100644 --- a/app/src/components/templates/FollowPerson.tsx +++ b/app/src/components/templates/FollowPerson.tsx @@ -16,7 +16,7 @@ const FollowPerson: React.FC = () => { className="follow-person-container" onPointerDown={() => { clearSelectedUser(); - setCamMode("FirstPerson"); + setCamMode("FollowPerson"); }} style={{ "--user-color": selectedUser.color } as React.CSSProperties} > diff --git a/app/src/modules/collaboration/responseHandler/useAisleResponseHandler.ts b/app/src/modules/collaboration/responseHandler/useAisleResponseHandler.ts new file mode 100644 index 0000000..1c1b004 --- /dev/null +++ b/app/src/modules/collaboration/responseHandler/useAisleResponseHandler.ts @@ -0,0 +1,56 @@ +import { useCallback } from "react"; +import { useSceneContext } from "../../scene/sceneContext"; + +function useAisleResponseHandler() { + const { aisleStore } = useSceneContext(); + const { addAisle, updateAisle, removeAisle } = aisleStore(); + + const addAisleToScene = useCallback( + (aisle: Aisle, callback?: () => void) => { + addAisle(aisle); + + if (callback) callback(); + }, + [addAisle] + ); + + const updateAisleInScene = useCallback( + (aisle: Aisle, callback?: () => void) => { + updateAisle(aisle.aisleUuid, aisle); + + if (callback) callback(); + }, + [updateAisle] + ); + + const removeAisleFromScene = useCallback( + (aisleUuid: string, callback?: () => void) => { + removeAisle(aisleUuid); + + if (callback) callback(); + }, + [removeAisle] + ); + + const duplicateAisleInScene = useCallback((aisleUuid: string, callback?: () => void) => { + console.log("Duplicating aisle: ", aisleUuid); + + if (callback) callback(); + }, []); + + const pasteAssetAisleToScene = useCallback((aisle: Aisle, callback?: () => void) => { + console.log("Pasting aisle: ", aisle); + + if (callback) callback(); + }, []); + + return { + addAisleToScene, + updateAisleInScene, + removeAisleFromScene, + duplicateAisleInScene, + pasteAssetAisleToScene, + }; +} + +export default useAisleResponseHandler; diff --git a/app/src/modules/collaboration/responseHandler/useAssetResponseHandler.ts b/app/src/modules/collaboration/responseHandler/useAssetResponseHandler.ts index 75b93e8..21cb2d9 100644 --- a/app/src/modules/collaboration/responseHandler/useAssetResponseHandler.ts +++ b/app/src/modules/collaboration/responseHandler/useAssetResponseHandler.ts @@ -5,23 +5,32 @@ function useAssetResponseHandler() { const { assetStore } = useSceneContext(); const { addAsset, updateAsset, removeAsset } = assetStore(); - const addAssetToScene = useCallback((asset: Asset, callback?: () => void) => { - addAsset(asset); + const addAssetToScene = useCallback( + (asset: Asset, callback?: () => void) => { + addAsset(asset); - if (callback) callback(); - }, []); + if (callback) callback(); + }, + [addAsset] + ); - const updateAssetInScene = useCallback((asset: Asset, callback?: () => void) => { - updateAsset(asset.modelUuid, asset); + const updateAssetInScene = useCallback( + (asset: Asset, callback?: () => void) => { + updateAsset(asset.modelUuid, asset); - if (callback) callback(); - }, []); + if (callback) callback(); + }, + [updateAsset] + ); - const removeAssetFromScene = useCallback((modelUuid: string, callback?: () => void) => { - removeAsset(modelUuid); + const removeAssetFromScene = useCallback( + (modelUuid: string, callback?: () => void) => { + removeAsset(modelUuid); - if (callback) callback(); - }, []); + if (callback) callback(); + }, + [removeAsset] + ); const duplicateAssetInScene = useCallback((modelUuid: string, callback?: () => void) => { console.log("Duplicating asset: ", modelUuid); diff --git a/app/src/modules/collaboration/responseHandler/useFloorResponseHandler.ts b/app/src/modules/collaboration/responseHandler/useFloorResponseHandler.ts new file mode 100644 index 0000000..23f1bbd --- /dev/null +++ b/app/src/modules/collaboration/responseHandler/useFloorResponseHandler.ts @@ -0,0 +1,56 @@ +import { useCallback } from "react"; +import { useSceneContext } from "../../scene/sceneContext"; + +function useFloorResponseHandler() { + const { floorStore } = useSceneContext(); + const { addFloor, updateFloor, removeFloor } = floorStore(); + + const addFloorToScene = useCallback( + (floor: Floor, callback?: () => void) => { + addFloor(floor); + + if (callback) callback(); + }, + [addFloor] + ); + + const updateFloorInScene = useCallback( + (floor: Floor, callback?: () => void) => { + updateFloor(floor.floorUuid, floor); + + if (callback) callback(); + }, + [updateFloor] + ); + + const removeFloorFromScene = useCallback( + (floorUuid: string, callback?: () => void) => { + removeFloor(floorUuid); + + if (callback) callback(); + }, + [removeFloor] + ); + + const duplicateFloorInScene = useCallback((floorUuid: string, callback?: () => void) => { + console.log("Duplicating floor: ", floorUuid); + + if (callback) callback(); + }, []); + + const pasteAssetFloorToScene = useCallback((floor: Floor, callback?: () => void) => { + console.log("Pasting floor: ", floor); + + if (callback) callback(); + }, []); + + return { + addFloorToScene, + updateFloorInScene, + removeFloorFromScene, + duplicateFloorInScene, + pasteAssetFloorToScene, + }; +} + +export default useFloorResponseHandler; diff --git a/app/src/modules/collaboration/responseHandler/useWallAssetResponseHandler.ts b/app/src/modules/collaboration/responseHandler/useWallAssetResponseHandler.ts index e555f55..c3420ec 100644 --- a/app/src/modules/collaboration/responseHandler/useWallAssetResponseHandler.ts +++ b/app/src/modules/collaboration/responseHandler/useWallAssetResponseHandler.ts @@ -5,23 +5,32 @@ function useWallAssetResponseHandler() { const { wallAssetStore } = useSceneContext(); const { addWallAsset, updateWallAsset, removeWallAsset } = wallAssetStore(); - const addWallAssetToScene = useCallback((asset: WallAsset, callback?: () => void) => { - addWallAsset(asset); + const addWallAssetToScene = useCallback( + (asset: WallAsset, callback?: () => void) => { + addWallAsset(asset); - if (callback) callback(); - }, []); + if (callback) callback(); + }, + [addWallAsset] + ); - const updateWallAssetInScene = useCallback((asset: WallAsset, callback?: () => void) => { - updateWallAsset(asset.modelUuid, asset); + const updateWallAssetInScene = useCallback( + (asset: WallAsset, callback?: () => void) => { + updateWallAsset(asset.modelUuid, asset); - if (callback) callback(); - }, []); + if (callback) callback(); + }, + [updateWallAsset] + ); - const removeWallAssetFromScene = useCallback((modelUuid: string, callback?: () => void) => { - removeWallAsset(modelUuid); + const removeWallAssetFromScene = useCallback( + (modelUuid: string, callback?: () => void) => { + removeWallAsset(modelUuid); - if (callback) callback(); - }, []); + if (callback) callback(); + }, + [removeWallAsset] + ); const duplicateWallAssetInScene = useCallback((modelUuid: string, callback?: () => void) => { console.log("Duplicating wallAsset: ", modelUuid); diff --git a/app/src/modules/collaboration/responseHandler/useWallResponseHandler.ts b/app/src/modules/collaboration/responseHandler/useWallResponseHandler.ts index 52f3846..0fac3c1 100644 --- a/app/src/modules/collaboration/responseHandler/useWallResponseHandler.ts +++ b/app/src/modules/collaboration/responseHandler/useWallResponseHandler.ts @@ -5,23 +5,32 @@ function useWallResponseHandler() { const { wallStore } = useSceneContext(); const { addWall, updateWall, removeWall } = wallStore(); - const addWallToScene = useCallback((wall: Wall, callback?: () => void) => { - addWall(wall); + const addWallToScene = useCallback( + (wall: Wall, callback?: () => void) => { + addWall(wall); - if (callback) callback(); - }, []); + if (callback) callback(); + }, + [addWall] + ); - const updateWallInScene = useCallback((wall: Wall, callback?: () => void) => { - updateWall(wall.wallUuid, wall); + const updateWallInScene = useCallback( + (wall: Wall, callback?: () => void) => { + updateWall(wall.wallUuid, wall); - if (callback) callback(); - }, []); + if (callback) callback(); + }, + [updateWall] + ); - const removeWallFromScene = useCallback((modelUuid: string, callback?: () => void) => { - removeWall(modelUuid); + const removeWallFromScene = useCallback( + (modelUuid: string, callback?: () => void) => { + removeWall(modelUuid); - if (callback) callback(); - }, []); + if (callback) callback(); + }, + [removeWall] + ); const duplicateWallInScene = useCallback((modelUuid: string, callback?: () => void) => { console.log("Duplicating wall: ", modelUuid); diff --git a/app/src/modules/collaboration/responseHandler/useZoneResponseHandler.ts b/app/src/modules/collaboration/responseHandler/useZoneResponseHandler.ts new file mode 100644 index 0000000..fc488a3 --- /dev/null +++ b/app/src/modules/collaboration/responseHandler/useZoneResponseHandler.ts @@ -0,0 +1,56 @@ +import { useCallback } from "react"; +import { useSceneContext } from "../../scene/sceneContext"; + +function useZoneResponseHandler() { + const { zoneStore } = useSceneContext(); + const { addZone, updateZone, removeZone } = zoneStore(); + + const addZoneToScene = useCallback( + (zone: Zone, callback?: () => void) => { + addZone(zone); + + if (callback) callback(); + }, + [addZone] + ); + + const updateZoneInScene = useCallback( + (zone: Zone, callback?: () => void) => { + updateZone(zone.zoneUuid, zone); + + if (callback) callback(); + }, + [updateZone] + ); + + const removeZoneFromScene = useCallback( + (zoneUuid: string, callback?: () => void) => { + removeZone(zoneUuid); + + if (callback) callback(); + }, + [removeZone] + ); + + const duplicateZoneInScene = useCallback((zoneUuid: string, callback?: () => void) => { + console.log("Duplicating zone: ", zoneUuid); + + if (callback) callback(); + }, []); + + const pasteAssetZoneToScene = useCallback((zone: Zone, callback?: () => void) => { + console.log("Pasting zone: ", zone); + + if (callback) callback(); + }, []); + + return { + addZoneToScene, + updateZoneInScene, + removeZoneFromScene, + duplicateZoneInScene, + pasteAssetZoneToScene, + }; +} + +export default useZoneResponseHandler; diff --git a/app/src/types/collaborationTypes.d.ts b/app/src/types/collaborationTypes.d.ts index 644e5e9..a45ba1c 100644 --- a/app/src/types/collaborationTypes.d.ts +++ b/app/src/types/collaborationTypes.d.ts @@ -10,6 +10,8 @@ interface CollabUsersScheme { rotation: { x: number; y: number; z: number }; target: { x: number; y: number; z: number }; }; + + followingUser: string | null; } //#endregion