diff --git a/app/src/components/ui/collaboration/threads/ThreadChat.tsx b/app/src/components/ui/collaboration/threads/ThreadChat.tsx index 90283ef..116e368 100644 --- a/app/src/components/ui/collaboration/threads/ThreadChat.tsx +++ b/app/src/components/ui/collaboration/threads/ThreadChat.tsx @@ -153,7 +153,7 @@ const ThreadChat: React.FC = () => { addReply(selectedComment?.threadId, commentData); } }); - } else if (mode === "create") { + } else if (threadSocket?.connected && mode === "create") { // SOCKET const addComment = { diff --git a/app/src/modules/builder/asset/responseHandler/useAssetResponseHandler.ts b/app/src/modules/builder/asset/responseHandler/useAssetResponseHandler.ts new file mode 100644 index 0000000..2926e1e --- /dev/null +++ b/app/src/modules/builder/asset/responseHandler/useAssetResponseHandler.ts @@ -0,0 +1,36 @@ +import { useCallback } from "react"; + +function useAssetResponseHandler() { + const addAssetToScene = useCallback((asset: Asset, callback?: () => void) => { + console.log("Adding asset:", asset); + + if (callback) callback(); + }, []); + + const removeAssetFromScene = useCallback((assetId: string, callback?: () => void) => { + console.log("Removing asset with id:", assetId); + + if (callback) callback(); + }, []); + + const duplicateAssetInScene = useCallback((assetId: string, callback?: () => void) => { + console.log("Duplicating asset with id:", assetId); + + if (callback) callback(); + }, []); + + const pasteAssetToScene = useCallback((asset: Asset, callback?: () => void) => { + console.log("Pasting asset:", asset); + + if (callback) callback(); + }, []); + + return { + addAssetToScene, + removeAssetFromScene, + duplicateAssetInScene, + pasteAssetToScene, + }; +} + +export default useAssetResponseHandler; diff --git a/app/src/modules/builder/builder.tsx b/app/src/modules/builder/builder.tsx index 5aa0921..24a277c 100644 --- a/app/src/modules/builder/builder.tsx +++ b/app/src/modules/builder/builder.tsx @@ -13,7 +13,6 @@ import { useToggleView, useWallVisibility, useRoofVisibility, useShadows, useToo import * as Types from "../../types/world/worldTypes"; -import SocketResponses from "../collaboration/socket/socketResponses.dev"; import Ground from "../scene/environment/ground"; import MeasurementTool from "../scene/tools/measurementTool"; import NavMesh from "../simulation/vehicle/navMesh/navMesh"; @@ -44,7 +43,7 @@ export default function Builder() { const { setRenderDistance } = useRenderDistance(); const { setLimitDistance } = useLimitDistance(); const { projectId } = useParams(); - const { setHoveredPoint, setHoveredLine, selectedWallAsset } = useBuilderStore(); + const { setHoveredPoint, setHoveredLine } = useBuilderStore(); useEffect(() => { if (!toggleView) { @@ -68,7 +67,7 @@ export default function Builder() { }, [projectId]); useFrame(() => { - if (csgRef.current && selectedWallAsset) { + if (csgRef.current) { csgRef.current.update(); } }); @@ -77,8 +76,6 @@ export default function Builder() { <> - - diff --git a/app/src/modules/collaboration/collaboration.tsx b/app/src/modules/collaboration/collaboration.tsx index 92d23cc..828e242 100644 --- a/app/src/modules/collaboration/collaboration.tsx +++ b/app/src/modules/collaboration/collaboration.tsx @@ -1,16 +1,16 @@ import React from "react"; import CamModelsGroup from "./camera/collabCams"; import ThreadsGroup from "./threads/threadsGroup"; +import SocketResponses from "./socket/socketResponses"; const Collaboration: React.FC = () => { - return ( <> - + ); }; diff --git a/app/src/modules/collaboration/socket/builderResponses.tsx b/app/src/modules/collaboration/socket/builderResponses.tsx new file mode 100644 index 0000000..31de19f --- /dev/null +++ b/app/src/modules/collaboration/socket/builderResponses.tsx @@ -0,0 +1,170 @@ +import { useEffect } from "react"; +import { useSocketStore } from "../../../store/builder/store"; +import useAssetResponseHandler from "../../builder/asset/responseHandler/useAssetResponseHandler"; + +function BuilderResponses() { + const { socket } = useSocketStore(); + const { addAssetToScene, removeAssetFromScene } = useAssetResponseHandler(); + + //#region Asset + useEffect(() => { + if (!socket) return; + + socket.on("v1:model-asset:response:add", (data: any) => { + if (!data.message) return; + if (data.message === "Model created successfully") { + } else if (data.message === "Updated successfully") { + } + }); + + socket.on("v1:model-asset:response:delete", (data: any) => { + if (!data.message) return; + if (data.message === "Model deleted successfully") { + } + }); + + return () => { + if (socket) { + socket.off("v1:model-asset:response:add"); + socket.off("v1:model-asset:response:delete"); + } + }; + }, [socket]); + //#endregion + + //#region WallAsset + useEffect(() => { + if (!socket) return; + + socket.on("v1:wall-asset:response:add", (data: any) => { + if (!data.message) return; + if (data.message === "WallAsset Created Successfully") { + } else if (data.message === "WallAsset Updated Successfully") { + } + }); + + socket.on("v1:wall-asset:response:delete", (data: any) => { + if (!data.message) return; + if (data.message === "WallAsset Created Successfully") { + } + }); + + return () => { + if (socket) { + socket.off("v1:wall-asset:response:add"); + socket.off("v1:wall-asset:response:delete"); + } + }; + }, [socket]); + //#endregion + + //#region Wall + useEffect(() => { + if (!socket) return; + + socket.on("v1:model-Wall:response:add", (data: any) => { + if (!data.message) return; + if (data.message === "Wall Created Successfully") { + } else if (data.message === "Wall Updated Successfully") { + } + }); + + socket.on("v1:model-Wall:response:delete", (data: any) => { + if (!data.message) return; + if (data.message === "Wall Deleted Successfully") { + } + }); + + return () => { + if (socket) { + socket.off("v1:model-Wall:response:add"); + socket.off("v1:model-Wall:response:delete"); + } + }; + }, [socket]); + //#endregion + + //#region Floor + useEffect(() => { + if (!socket) return; + + socket.on("v1:model-Floor:response:add", (data: any) => { + if (!data.message) return; + if (data.message === "Floor Created Successfully") { + } else if (data.message === "Floor Updated Successfully") { + } + }); + + socket.on("v1:model-Floor:response:delete", (data: any) => { + if (!data.message) return; + if (data.message === "Floor Deleted Successfully") { + } + }); + + return () => { + if (socket) { + socket.off("v1:model-Floor:response:add"); + socket.off("v1:model-Floor:response:delete"); + } + }; + }, [socket]); + //#endregion + + //#region Aisle + useEffect(() => { + if (!socket) return; + + socket.on("v1:model-aisle:response:add", (data: any) => { + if (!data.message) return; + if (data.message === "Aisle Created Successfully") { + } else if (data.message === "Aisle Updated Successfully") { + } + }); + + socket.on("v1:model-aisle:response:delete", (data: any) => { + if (!data.message) return; + if (data.message === "Aisle Deleted Successfully") { + } + }); + + return () => { + if (socket) { + socket.off("v1:model-aisle:response:add"); + socket.off("v1:model-aisle:response:delete"); + } + }; + }, [socket]); + //#endregion + + //#region Zone + useEffect(() => { + if (!socket) return; + + socket.on("v1:zone:response:updates", (data: any) => { + console.log("data: ", data); + if (!data.message) return; + if (data.message === "zone created successfully") { + } else if (data.message === "zone updated") { + } + }); + + socket.on("v1:zone:response:delete", (data: any) => { + console.log("data: ", data); + if (!data.message) return; + if (data.message === "zone deleted created successfully") { + } + }); + + return () => { + if (socket) { + socket.off("v1:zone:response:updates"); + socket.off("v1:zone:response:delete"); + } + }; + }, [socket]); + //#endregion + + return null; +} + +export default BuilderResponses; diff --git a/app/src/modules/collaboration/socket/socketResponses.dev.tsx b/app/src/modules/collaboration/socket/socketResponses.dev.tsx deleted file mode 100644 index 5ac1e79..0000000 --- a/app/src/modules/collaboration/socket/socketResponses.dev.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useEffect } from 'react'; -import { useSocketStore } from '../../../store/builder/store'; - -export default function SocketResponses() { - const { socket } = useSocketStore(); - - useEffect(() => { - if (socket) { - socket.on("v1:model-asset:response:add", (data: any) => { - // console.log('data: ', data); - }); - } - - return () => { - if (socket) { - socket.off("v1:model-asset:response:add"); - } - } - }, [socket]) - - return ( - <> - - ); -} diff --git a/app/src/modules/collaboration/socket/socketResponses.tsx b/app/src/modules/collaboration/socket/socketResponses.tsx new file mode 100644 index 0000000..e47f186 --- /dev/null +++ b/app/src/modules/collaboration/socket/socketResponses.tsx @@ -0,0 +1,12 @@ +import UserResponses from "./userResponses"; +import BuilderResponses from "./builderResponses"; + +export default function SocketResponses() { + return ( + <> + + + + + ); +} diff --git a/app/src/modules/collaboration/socket/userResponses.tsx b/app/src/modules/collaboration/socket/userResponses.tsx new file mode 100644 index 0000000..ec08755 --- /dev/null +++ b/app/src/modules/collaboration/socket/userResponses.tsx @@ -0,0 +1,29 @@ +import { useEffect } from "react"; +import { useSocketStore } from "../../../store/builder/store"; + +function UserResponses() { + const { socket } = useSocketStore(); + + //#region Camera + useEffect(() => { + if (!socket) return; + + socket.on("v1:camera:Response:update", (data: any) => { + if (!data.message) return; + if (data.message === "Model created successfully") { + } else if (data.message === "Updated successfully") { + } + }); + + return () => { + if (socket) { + socket.off("v1:camera:Response:update"); + } + }; + }, [socket]); + //#endregion + + return null; +} + +export default UserResponses; diff --git a/app/src/modules/scene/controls/selectionControls/selection3D/transformControls3D.tsx b/app/src/modules/scene/controls/selectionControls/selection3D/transformControls3D.tsx index fbca87e..6b29879 100644 --- a/app/src/modules/scene/controls/selectionControls/selection3D/transformControls3D.tsx +++ b/app/src/modules/scene/controls/selectionControls/selection3D/transformControls3D.tsx @@ -186,6 +186,7 @@ function TransformControls3D() { useEffect(() => { const controls = transformControlsRef.current; if (!controls || !visible) return; + controls.setSize(0.6); controls.attach(tempObjectRef.current); controls.setMode(toolMode === "Move-Asset" ? "translate" : "rotate"); @@ -340,7 +341,18 @@ function TransformControls3D() { return null; } - return ; + return ( + + ); } export default TransformControls3D; diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts index da0a2ae..bb50b43 100644 --- a/app/src/store/builder/store.ts +++ b/app/src/store/builder/store.ts @@ -1,39 +1,39 @@ import { create } from "zustand"; -import { io } from "socket.io-client"; +import { io, Socket } from "socket.io-client"; import * as CONSTANTS from "../../types/world/worldConstants"; -export const useSocketStore = create((set: any, get: any) => ({ +interface SocketStore { + socket: Socket | null; + visualizationSocket: Socket | null; + dashBoardSocket: Socket | null; + projectSocket: Socket | null; + threadSocket: Socket | null; + initializeSocket: (email?: string, organization?: string, token?: string, refreshToken?: string) => void; + disconnectSocket: () => void; +} + +export const useSocketStore = create((set, get) => ({ socket: null, - initializeSocket: (email?: string, organization?: string, token?: string, refreshToken?: string) => { + visualizationSocket: null, + dashBoardSocket: null, + projectSocket: null, + threadSocket: null, + + initializeSocket: (email, organization, token, refreshToken) => { const existingSocket = get().socket; if (existingSocket) { return; } - const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder_v1`, { - reconnection: true, - auth: { token, refreshToken }, - }); + const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder_v1`, { reconnection: true, auth: { token, refreshToken } }); - const visualizationSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization_v1`, { - reconnection: true, - auth: { token, refreshToken }, - }); + const visualizationSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization_v1`, { reconnection: true, auth: { token, refreshToken } }); - const dashBoardSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/dashboard`, { - reconnection: true, - auth: { token, refreshToken }, - }); + const dashBoardSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/dashboard`, { reconnection: true, auth: { token, refreshToken } }); - const projectSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/project`, { - reconnection: true, - auth: { token, refreshToken }, - }); + const projectSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/project`, { reconnection: true, auth: { token, refreshToken } }); - const threadSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/thread`, { - reconnection: true, - auth: { token, refreshToken }, - }); + const threadSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/thread`, { reconnection: true, auth: { token, refreshToken } }); set({ socket, @@ -43,14 +43,21 @@ export const useSocketStore = create((set: any, get: any) => ({ threadSocket, }); }, + disconnectSocket: () => { - set((state: any) => { + set((state) => { state.socket?.disconnect(); state.visualizationSocket?.disconnect(); state.dashBoardSocket?.disconnect(); state.projectSocket?.disconnect(); state.threadSocket?.disconnect(); - return { socket: null }; + return { + socket: null, + visualizationSocket: null, + dashBoardSocket: null, + projectSocket: null, + threadSocket: null, + }; }); }, })); diff --git a/app/src/styles/scene/_scene.scss b/app/src/styles/scene/_scene.scss index dee2536..a683e61 100644 --- a/app/src/styles/scene/_scene.scss +++ b/app/src/styles/scene/_scene.scss @@ -127,6 +127,7 @@ left: 12px !important; border-radius: 6px; backdrop-filter: blur(4px); + height: fit-content; svg { display: none; }