diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx index f9f48fb..a449500 100644 --- a/app/src/components/layout/sidebarRight/Header.tsx +++ b/app/src/components/layout/sidebarRight/Header.tsx @@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react"; import { AppDockIcon } from "../../icons/HeaderIcons"; import orgImg from "../../../assets/orgTemp.png"; import { useActiveUsers } from "../../../store/store"; -import { getAvatarColor } from "../../../functions/users/functions/getAvatarColor"; import { ActiveUser } from "../../../types/users"; import CollaborationPopup from "../../templates/CollaborationPopup"; +import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; const Header: React.FC = () => { const { activeUsers } = useActiveUsers(); diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index cb9b5dc..b2f25eb 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -49,6 +49,9 @@ const SideBarRight: React.FC = () => { setSubModule("simulations"); } } + if (activeModule !== "simulation") { + setSubModule("properties"); + } }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]); return ( diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx index 568783c..251ada3 100644 --- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx @@ -282,8 +282,7 @@ const GlobalProperties: React.FC = () => { key={"6"} /> -
- + {/*
{ max={5} onChange={(value: number) => updateGridDistance(value)} onPointerUp={updatedGrid} - /> + /> */} ); }; diff --git a/app/src/components/templates/FollowPerson.tsx b/app/src/components/templates/FollowPerson.tsx new file mode 100644 index 0000000..a85d0c9 --- /dev/null +++ b/app/src/components/templates/FollowPerson.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import RenderOverlay from "./Overlay"; +import { useSelectedUserStore } from "../../store/useCollabStore"; +import { useCamMode } from "../../store/store"; + +const FollowPerson: React.FC = () => { + // Get the selected user from the store + const { selectedUser, clearSelectedUser } = useSelectedUserStore(); + const { setCamMode } = useCamMode(); + return ( + + {selectedUser && ( + // eslint-disable-next-line +
{ + clearSelectedUser(); + setCamMode("FirstPerson"); + }} + style={{ "--user-color": selectedUser.color } as React.CSSProperties} + > +
{selectedUser.name}
+
+ )} + + ); +}; + +export default FollowPerson; diff --git a/app/src/functions/collabUserIcon.tsx b/app/src/functions/collabUserIcon.tsx deleted file mode 100644 index 9e6802b..0000000 --- a/app/src/functions/collabUserIcon.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react"; -import CustomAvatar from "./users/Avatar"; - -interface CollabUserIconProps { - userName: string; - userImage?: string; - color: string; -} - -const CollabUserIcon: React.FC = ({ - userImage, - userName, - color, -}) => { - return ( -
-
- {userImage ? ( - {userName} - ) : ( - - )} -
-
- {userName} -
-
- ); -}; - -export default CollabUserIcon; diff --git a/app/src/modules/collaboration/camera/collabCams.tsx b/app/src/modules/collaboration/camera/collabCams.tsx index 1347a2a..461cb7f 100644 --- a/app/src/modules/collaboration/camera/collabCams.tsx +++ b/app/src/modules/collaboration/camera/collabCams.tsx @@ -8,9 +8,9 @@ import { useActiveUsers, useSocketStore } from "../../../store/store"; import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"; import { useNavigate } from "react-router-dom"; import { Html } from "@react-three/drei"; -import CollabUserIcon from "../../../functions/collabUserIcon"; -import { getAvatarColor } from "../../../functions/users/functions/getAvatarColor"; +import CollabUserIcon from "./collabUserIcon"; import useModuleStore from "../../../store/useModuleStore"; +import { getAvatarColor } from "../functions/getAvatarColor"; const CamModelsGroup = () => { const navigate = useNavigate(); @@ -20,13 +20,14 @@ const CamModelsGroup = () => { const { socket } = useSocketStore(); const { activeModule } = useModuleStore(); + // eslint-disable-next-line react-hooks/exhaustive-deps const loader = new GLTFLoader(); const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/"); loader.setDRACOLoader(dracoLoader); const [cams, setCams] = useState([]); - const [models, setModels] = useState>({}); + const [models, setModels] = useState>({}); const dedupeCams = (cams: any[]) => { const seen = new Set(); @@ -102,6 +103,7 @@ const CamModelsGroup = () => { }); socket.on("cameraUpdateResponse", (data: any) => { + if ( !groupRef.current || socket.id === data.socketId || @@ -122,6 +124,11 @@ const CamModelsGroup = () => { data.data.rotation.y, data.data.rotation.z ), + target: new THREE.Vector3( + data.data.target.x, + data.data.target.y, + data.data.target.z + ), }, })); }); @@ -131,7 +138,7 @@ const CamModelsGroup = () => { socket.off("userDisConnectResponse"); socket.off("cameraUpdateResponse"); }; - }, [socket]); + }, [email, loader, navigate, setActiveUsers, socket]); useFrame(() => { if (!groupRef.current) return; @@ -217,9 +224,11 @@ const CamModelsGroup = () => { position={[-0.015, 0, 0.7]} > diff --git a/app/src/modules/collaboration/camera/collabUserIcon.tsx b/app/src/modules/collaboration/camera/collabUserIcon.tsx new file mode 100644 index 0000000..dcdb73b --- /dev/null +++ b/app/src/modules/collaboration/camera/collabUserIcon.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import CustomAvatar from "../users/Avatar"; +import { useSelectedUserStore } from "../../../store/useCollabStore"; +import { useCamMode } from "../../../store/store"; + +interface CollabUserIconProps { + userName: string; + userImage?: string; + color: string; + position?: { + x: number; + y: number; + z: number; + }; + rotation?: { + x: number; + y: number; + z: number; + }; +} + +const CollabUserIcon: React.FC = ({ + userImage, + userName, + color, + position, + rotation, +}) => { + const { setSelectedUser } = useSelectedUserStore(); + const { setCamMode } = useCamMode(); + return ( +
+ +
+ {userName} +
+
+ ); +}; + +export default CollabUserIcon; diff --git a/app/src/modules/collaboration/collaboration.tsx b/app/src/modules/collaboration/collaboration.tsx index 84d3ab1..8835185 100644 --- a/app/src/modules/collaboration/collaboration.tsx +++ b/app/src/modules/collaboration/collaboration.tsx @@ -1,14 +1,32 @@ -import React from 'react' -import CamModelsGroup from './camera/collabCams' +import React, { useEffect } from "react"; +import CamModelsGroup from "./camera/collabCams"; +import { useSelectedUserStore } from "../../store/useCollabStore"; +import { useThree } from "@react-three/fiber"; +import setCameraView from "./functions/setCameraView"; +import { useCamMode } from "../../store/store"; -const Collaboration = () => { - return ( - <> +const Collaboration: React.FC = () => { + const { selectedUser } = useSelectedUserStore(); + const { camMode } = useCamMode(); + const { camera, controls } = useThree(); // Access R3F camera and controls - + useEffect(() => { + if(camMode !== "FollowPerson") return; + // If a user is selected, set the camera view to their location + // and update the camera and controls accordingly + if (selectedUser?.location) { + const { position, rotation } = selectedUser.location; + setCameraView({ + controls, + camera, + position, + rotation, + username: selectedUser.name, + }); + } + }, [selectedUser, camera, controls, camMode]); - - ) -} + return ; +}; -export default Collaboration \ No newline at end of file +export default Collaboration; diff --git a/app/src/functions/users/functions/getAvatarColor.ts b/app/src/modules/collaboration/functions/getAvatarColor.ts similarity index 98% rename from app/src/functions/users/functions/getAvatarColor.ts rename to app/src/modules/collaboration/functions/getAvatarColor.ts index d9a5d37..6d34edc 100644 --- a/app/src/functions/users/functions/getAvatarColor.ts +++ b/app/src/modules/collaboration/functions/getAvatarColor.ts @@ -27,7 +27,7 @@ export function getAvatarColor(index: number, name?: string): string { const localStorageKey = "userAvatarColors"; // Check if local storage is available if (name) { - let userColors = JSON.parse(localStorage.getItem(localStorageKey) || "{}"); + let userColors = JSON.parse(localStorage.getItem(localStorageKey) ?? "{}"); // Check if the user already has an assigned color if (userColors[name]) { diff --git a/app/src/functions/users/functions/getInitials.ts b/app/src/modules/collaboration/functions/getInitials.ts similarity index 100% rename from app/src/functions/users/functions/getInitials.ts rename to app/src/modules/collaboration/functions/getInitials.ts diff --git a/app/src/modules/collaboration/functions/setCameraView.ts b/app/src/modules/collaboration/functions/setCameraView.ts new file mode 100644 index 0000000..af05181 --- /dev/null +++ b/app/src/modules/collaboration/functions/setCameraView.ts @@ -0,0 +1,46 @@ +import * as THREE from 'three'; + +interface SetCameraViewProps { + controls: any; + camera: THREE.Camera; + position: THREE.Vector3 | { x: number; y: number; z: number }; + rotation: THREE.Euler | { x: number; y: number; z: number }; + username?: string; +} + +export default async function setCameraView({ + controls, + camera, + position, + rotation, + username, +}: SetCameraViewProps) { + if (!controls || !camera) return; + + // Normalize position + const newPosition = position instanceof THREE.Vector3 + ? position + : new THREE.Vector3(position.x, position.y, position.z); + + // Normalize rotation + const newRotation = rotation instanceof THREE.Euler + ? rotation + : new THREE.Euler(rotation.x, rotation.y, rotation.z); + + // Update camera position and rotation + // camera.position.copy(newPosition); + // camera.rotation.copy(newRotation); + + // If your controls need to update the target, you can optionally adjust it too + if (controls.setTarget) { + // Setting a basic target slightly forward from new position based on rotation + const cameraDirection = new THREE.Vector3(0, 0, -1).applyEuler(newRotation); + const targetPosition = new THREE.Vector3().copy(newPosition).add(cameraDirection); + + // controls.setTarget(targetPosition.x, targetPosition.y, targetPosition.z); + controls?.setLookAt(...newPosition.toArray(), newPosition.x, 0, newPosition.z, true); + } + + // Optionally you can log + console.log(`Camera view updated by ${username ?? 'unknown user'}`); +} diff --git a/app/src/functions/users/Avatar.tsx b/app/src/modules/collaboration/users/Avatar.tsx similarity index 87% rename from app/src/functions/users/Avatar.tsx rename to app/src/modules/collaboration/users/Avatar.tsx index d3e5dca..899ecb4 100644 --- a/app/src/functions/users/Avatar.tsx +++ b/app/src/modules/collaboration/users/Avatar.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from "react"; -import { getInitials } from "./functions/getInitials"; -import { getAvatarColor } from "./functions/getAvatarColor"; +import { getInitials } from "../functions/getInitials"; interface AvatarProps { name: string; // Name can be a full name or initials @@ -26,7 +25,7 @@ const CustomAvatar: React.FC = ({ const initials = getInitials(name); // Convert name to initials if needed // Draw background - ctx.fillStyle = color || "#323232"; // Use color prop or generate color based on index + ctx.fillStyle = color ?? "#323232"; // Use color prop or generate color based on index ctx.fillRect(0, 0, size, size); // Draw initials @@ -40,7 +39,7 @@ const CustomAvatar: React.FC = ({ const dataURL = canvas.toDataURL("image/png"); setImageSrc(dataURL); } - }, [name, size, textColor]); + }, [color, name, size, textColor]); if (!imageSrc) { return null; // Return null while the image is being generated diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index 3f6b4cc..bae83cc 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -1,11 +1,10 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import ModuleToggle from "../components/ui/ModuleToggle"; import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft"; import SideBarRight from "../components/layout/sidebarRight/SideBarRight"; import useModuleStore, { useThreeDStore } from "../store/useModuleStore"; import RealTimeVisulization from "../modules/visualization/RealTimeVisulization"; import Tools from "../components/ui/Tools"; -// import Scene from "../modules/scene/scene"; import { useSocketStore, useFloorItems, @@ -20,12 +19,9 @@ import { usePlayButtonStore } from "../store/usePlayButtonStore"; import MarketPlace from "../modules/market/MarketPlace"; import LoadingPage from "../components/templates/LoadingPage"; import SimulationPlayer from "../components/ui/simulation/simulationPlayer"; -import RenderOverlay from "../components/templates/Overlay"; -import MenuBar from "../components/ui/menu/menu"; import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys"; -import ProductionCapacity from "../components/ui/analysis/ProductionCapacity"; -import ThroughputSummary from "../components/ui/analysis/ThroughputSummary"; -import ROISummary from "../components/ui/analysis/ROISummary"; +import { useSelectedUserStore } from "../store/useCollabStore"; +import FollowPerson from "../components/templates/FollowPerson"; const Project: React.FC = () => { let navigate = useNavigate(); @@ -44,7 +40,7 @@ const Project: React.FC = () => { setActiveModule("builder"); const email = localStorage.getItem("email"); if (email) { - const Organization = email!.split("@")[1].split(".")[0]; + const Organization = email.split("@")[1].split(".")[0]; useSocketStore.getState().initializeSocket(email, Organization); const name = localStorage.getItem("userName"); if (Organization && name) { @@ -55,8 +51,10 @@ const Project: React.FC = () => { navigate("/"); } }, []); + const { isPlaying } = usePlayButtonStore(); const { toggleThreeD } = useThreeDStore(); + const { selectedUser } = useSelectedUserStore(); return (
@@ -81,6 +79,7 @@ const Project: React.FC = () => { {activeModule !== "market" && } {isPlaying && activeModule === "simulation" && } + {selectedUser && }
); }; diff --git a/app/src/store/useCollabStore.ts b/app/src/store/useCollabStore.ts new file mode 100644 index 0000000..3fe1497 --- /dev/null +++ b/app/src/store/useCollabStore.ts @@ -0,0 +1,30 @@ +import { create } from 'zustand'; + +interface SelectedUser { + color: string; + name: string; + location?: { + position: { + x: number; + y: number; + z: number; + }; + rotation: { + x: number; + y: number; + z: number; + }; + } +} + +interface SelectedUserStore { + selectedUser: SelectedUser | null; + setSelectedUser: (user: SelectedUser) => void; + clearSelectedUser: () => void; +} + +export const useSelectedUserStore = create((set) => ({ + selectedUser: null, + setSelectedUser: (user) => set({ selectedUser: user }), + clearSelectedUser: () => set({ selectedUser: null }), +})); diff --git a/app/src/styles/components/templates.scss b/app/src/styles/components/templates.scss index e69de29..bd28d94 100644 --- a/app/src/styles/components/templates.scss +++ b/app/src/styles/components/templates.scss @@ -0,0 +1,22 @@ +.follow-person-container{ + height: 100vh; + width: 100vw; + position: fixed; + top: 0; + left: 0; + outline: 8px solid var(--user-color); + outline-offset: -3px; + border-radius: 16px; + .follower-name{ + background-color: var(--user-color); + color: #FFFFFF; + padding: 4px 8px; + padding-top: 16px; + text-align: center; + position: absolute; + top: -10px; + left: 50%; + transform: translate(-50%, 0); + border-radius: 8px; + } +} diff --git a/app/src/styles/layout/popup.scss b/app/src/styles/layout/popup.scss index a354c10..b92d8cc 100644 --- a/app/src/styles/layout/popup.scss +++ b/app/src/styles/layout/popup.scss @@ -137,6 +137,7 @@ width: 100%; object-fit: cover; vertical-align: top; + pointer-events: none; } } .user-name{