diff --git a/app/src/components/Dashboard/SidePannel.tsx b/app/src/components/Dashboard/SidePannel.tsx index af495ab..b9a7756 100644 --- a/app/src/components/Dashboard/SidePannel.tsx +++ b/app/src/components/Dashboard/SidePannel.tsx @@ -1,14 +1,5 @@ import React from "react"; -import { - DocumentationIcon, - HelpIcon, - HomeIcon, - LogoutIcon, - NotificationIcon, - ProjectsIcon, - TrashIcon, - TutorialsIcon, -} from "../icons/DashboardIcon"; +import { DocumentationIcon, HelpIcon, HomeIcon, LogoutIcon, NotificationIcon, ProjectsIcon, TrashIcon, TutorialsIcon } from "../icons/DashboardIcon"; import { useNavigate } from "react-router-dom"; import darkThemeImage from "../../assets/image/darkThemeProject.png"; import lightThemeImage from "../../assets/image/lightThemeProject.png"; @@ -24,9 +15,9 @@ interface SidePannelProps { } const SidePannel: React.FC = ({ setActiveTab, activeTab }) => { - const { email, userName, userId, organization } = getUserData(); + const { userName, userId, organization } = getUserData(); const navigate = useNavigate(); - const { projectSocket, initializeSocket } = useSocketStore(); + const { projectSocket, initializeProjectSocket } = useSocketStore(); const savedTheme = localStorage.getItem("theme") ?? "light"; function generateProjectId() { @@ -44,7 +35,7 @@ const SidePannel: React.FC = ({ setActiveTab, activeTab }) => { } const projectId = generateProjectId(); - initializeSocket(email, organization, token, refreshToken); + initializeProjectSocket(token, refreshToken); if (projectSocket?.connected) { // SOCKET @@ -83,33 +74,16 @@ const SidePannel: React.FC = ({ setActiveTab, activeTab }) => {
- - -
diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx index 1c1c1c6..b3204e6 100644 --- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx @@ -33,7 +33,7 @@ const GlobalProperties: React.FC = () => { const { renderDistance, setRenderDistance } = useRenderDistance(); const { setPlaneValue, setGridValue, planeValue, gridValue } = useTileDistance(); const { fps, setFps, limitFps, setLimitFps } = useSceneStore(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { limitDistance, setLimitDistance } = useLimitDistance(); const [distance, setDistance] = useState(40); @@ -101,9 +101,9 @@ const GlobalProperties: React.FC = () => { // wallVisibility: wallVisibility, // roofVisibility: !roofVisibility, // shadowVisibility: shadows, - // socketId: socket.id + // socketId: builderSocket.id // }; - // socket.emit('v1:Environment:set', visData) + // builderSocket.emit('v1:Environment:set', visData) setRoofVisibility(!roofVisibility); // Toggle roof visibility }; @@ -121,9 +121,9 @@ const GlobalProperties: React.FC = () => { // wallVisibility: !wallVisibility, // roofVisibility: roofVisibility, // shadowVisibility: shadows, - // socketId: socket.id + // socketId: builderSocket.id // }; - // socket.emit('v1:Environment:set', visData) + // builderSocket.emit('v1:Environment:set', visData) setWallVisibility(!wallVisibility); // Toggle wall visibility }; @@ -141,9 +141,9 @@ const GlobalProperties: React.FC = () => { // wallVisibility: wallVisibility, // roofVisibility: roofVisibility, // shadowVisibility: !shadows, - // socketId: socket.id + // socketId: builderSocket.id // }; - // socket.emit('v1:Environment:set', visData) + // builderSocket.emit('v1:Environment:set', visData) setShadows(!shadows); }; diff --git a/app/src/components/layout/sidebarRight/properties/SelectedAisleProperties.tsx b/app/src/components/layout/sidebarRight/properties/SelectedAisleProperties.tsx index 40da752..a61dcb9 100644 --- a/app/src/components/layout/sidebarRight/properties/SelectedAisleProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/SelectedAisleProperties.tsx @@ -27,7 +27,7 @@ const SelectedAisleProperties: React.FC = () => { const { aisleStore, versionStore } = useSceneContext(); const { getAisleById, updateAisle, setDashedAisleProperties, setDottedAisleProperties, setArrowsAisleProperties, setArcAisleWidth, setColor } = aisleStore(); const { selectedVersion } = versionStore(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { userId, organization } = getUserData(); const { projectId } = useParams(); const [selectedAisleData, setSelectedAisleData] = useState(); @@ -44,7 +44,7 @@ const SelectedAisleProperties: React.FC = () => { const updateBackend = (updatedAisle: Aisle) => { if (updatedAisle && projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API @@ -64,7 +64,7 @@ const SelectedAisleProperties: React.FC = () => { type: updatedAisle.type } - socket.emit('v1:model-aisle:add', data); + builderSocket.emit('v1:model-aisle:add', data); } } } diff --git a/app/src/components/layout/sidebarRight/properties/SelectedDecalProperties.tsx b/app/src/components/layout/sidebarRight/properties/SelectedDecalProperties.tsx index 1e2d3f2..c9d6473 100644 --- a/app/src/components/layout/sidebarRight/properties/SelectedDecalProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/SelectedDecalProperties.tsx @@ -17,12 +17,12 @@ const SelectedDecalProperties = () => { const { userId, organization } = getUserData(); const { selectedVersion } = versionStore(); const { projectId } = useParams(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const updateBackend = (updatedData: Wall | Floor) => { if ('wallUuid' in updatedData) { if (projectId && updatedData) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || '', updatedData); @@ -38,12 +38,12 @@ const SelectedDecalProperties = () => { organization: organization } - socket.emit('v1:model-Wall:add', data); + builderSocket.emit('v1:model-Wall:add', data); } } } else if ('floorUuid' in updatedData) { if (projectId && updatedData) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || '', updatedData); @@ -59,7 +59,7 @@ const SelectedDecalProperties = () => { organization: organization } - socket.emit('v1:model-Floor:add', data); + builderSocket.emit('v1:model-Floor:add', data); } } } diff --git a/app/src/components/layout/sidebarRight/properties/SelectedFloorProperties.tsx b/app/src/components/layout/sidebarRight/properties/SelectedFloorProperties.tsx index 93432ff..04bfa01 100644 --- a/app/src/components/layout/sidebarRight/properties/SelectedFloorProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/SelectedFloorProperties.tsx @@ -18,7 +18,7 @@ const SelectedFloorProperties = () => { const { selectedFloor } = useBuilderStore(); const { floorStore, versionStore } = useSceneContext(); const { selectedVersion } = versionStore(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { userId, organization } = getUserData(); const { projectId } = useParams(); const { getFloorById, updateFloor } = floorStore(); @@ -41,7 +41,7 @@ const SelectedFloorProperties = () => { if (!isNaN(parsed) && floor) { const updatedFloor = updateFloor(floor.floorUuid, { floorDepth: parsed }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API @@ -58,7 +58,7 @@ const SelectedFloorProperties = () => { organization: organization } - socket.emit('v1:model-Floor:add', data); + builderSocket.emit('v1:model-Floor:add', data); } } } @@ -70,7 +70,7 @@ const SelectedFloorProperties = () => { if (!isNaN(parsed) && floor) { const updatedFloor = updateFloor(floor.floorUuid, { bevelStrength: parsed }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API @@ -87,7 +87,7 @@ const SelectedFloorProperties = () => { organization: organization } - socket.emit('v1:model-Floor:add', data); + builderSocket.emit('v1:model-Floor:add', data); } } } @@ -98,7 +98,7 @@ const SelectedFloorProperties = () => { if (!floor) return; const updatedFloor = updateFloor(floor.floorUuid, { isBeveled: !floor.isBeveled }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API @@ -115,7 +115,7 @@ const SelectedFloorProperties = () => { organization: organization } - socket.emit('v1:model-Floor:add', data); + builderSocket.emit('v1:model-Floor:add', data); } } @@ -126,7 +126,7 @@ const SelectedFloorProperties = () => { const key = activeSurface === "top" ? "topMaterial" : "sideMaterial"; const updatedFloor = updateFloor(floor.floorUuid, { [key]: material.textureId }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API @@ -143,7 +143,7 @@ const SelectedFloorProperties = () => { organization: organization } - socket.emit('v1:model-Floor:add', data); + builderSocket.emit('v1:model-Floor:add', data); } } diff --git a/app/src/components/layout/sidebarRight/properties/SelectedWallProperties.tsx b/app/src/components/layout/sidebarRight/properties/SelectedWallProperties.tsx index cd8c7c1..4825f40 100644 --- a/app/src/components/layout/sidebarRight/properties/SelectedWallProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/SelectedWallProperties.tsx @@ -18,7 +18,7 @@ const SelectedWallProperties = () => { const { selectedWall } = useBuilderStore(); const { wallStore, versionStore } = useSceneContext(); const { selectedVersion } = versionStore(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { userId, organization } = getUserData(); const { projectId } = useParams(); const { getWallById, updateWall } = wallStore(); @@ -45,7 +45,7 @@ const SelectedWallProperties = () => { if (!isNaN(height) && wall) { const updatedWall = updateWall(wall.wallUuid, { wallHeight: height }); if (updatedWall && projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API @@ -62,7 +62,7 @@ const SelectedWallProperties = () => { organization: organization } - socket.emit('v1:model-Wall:add', data); + builderSocket.emit('v1:model-Wall:add', data); } } } @@ -74,7 +74,7 @@ const SelectedWallProperties = () => { if (!isNaN(thickness) && wall) { const updatedWall = updateWall(wall.wallUuid, { wallThickness: thickness }); if (updatedWall && projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API @@ -91,7 +91,7 @@ const SelectedWallProperties = () => { organization: organization } - socket.emit('v1:model-Wall:add', data); + builderSocket.emit('v1:model-Wall:add', data); } } } @@ -103,7 +103,7 @@ const SelectedWallProperties = () => { const updated = (activeSide === "side1" ? { insideMaterial: material.textureId } : { outsideMaterial: material.textureId }) const updatedWall = updateWall(wall.wallUuid, updated); if (updatedWall && projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API @@ -120,7 +120,7 @@ const SelectedWallProperties = () => { organization: organization } - socket.emit('v1:model-Wall:add', data); + builderSocket.emit('v1:model-Wall:add', data); } } }; diff --git a/app/src/modules/builder/Decal/decalCreator/decalCreator.tsx b/app/src/modules/builder/Decal/decalCreator/decalCreator.tsx index bb25cec..697ef06 100644 --- a/app/src/modules/builder/Decal/decalCreator/decalCreator.tsx +++ b/app/src/modules/builder/Decal/decalCreator/decalCreator.tsx @@ -21,7 +21,7 @@ function DecalCreator() { const { userId, organization } = getUserData(); const { selectedVersion } = versionStore(); const { projectId } = useParams(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { controls, gl, pointer, camera, raycaster, scene } = useThree(); useEffect(() => { @@ -63,7 +63,7 @@ function DecalCreator() { const updatedWall = getWallById(wallIntersect.object.userData.wallUuid); if (updatedWall) { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || "", updatedWall); @@ -78,7 +78,7 @@ function DecalCreator() { organization: organization, }; - socket.emit("v1:model-Wall:add", data); + builderSocket.emit("v1:model-Wall:add", data); } } } @@ -108,7 +108,7 @@ function DecalCreator() { setTimeout(() => { const updatedFloor = getFloorById(floorIntersect.object.userData.floorUuid); if (projectId && updatedFloor) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || "", updatedFloor); @@ -123,7 +123,7 @@ function DecalCreator() { organization: organization, }; - socket.emit("v1:model-Floor:add", data); + builderSocket.emit("v1:model-Floor:add", data); } } }, 0); diff --git a/app/src/modules/builder/Decal/eventHandler/useDecalEventHandlers.ts b/app/src/modules/builder/Decal/eventHandler/useDecalEventHandlers.ts index 3e0c413..a3a4464 100644 --- a/app/src/modules/builder/Decal/eventHandler/useDecalEventHandlers.ts +++ b/app/src/modules/builder/Decal/eventHandler/useDecalEventHandlers.ts @@ -34,7 +34,7 @@ export function useDecalEventHandlers({ const { userId, organization } = getUserData(); const { selectedVersion } = versionStore(); const { projectId } = useParams(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const [keyEvent, setKeyEvent] = useState<"Ctrl" | "">(""); const { raycaster, pointer, camera, scene, gl, controls } = useThree(); @@ -146,7 +146,7 @@ export function useDecalEventHandlers({ const updatedWall = getWallById(parent.wallUuid); if (updatedWall) { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || '', updatedWall); @@ -162,7 +162,7 @@ export function useDecalEventHandlers({ organization: organization } - socket.emit('v1:model-Wall:add', data); + builderSocket.emit('v1:model-Wall:add', data); } } } @@ -172,7 +172,7 @@ export function useDecalEventHandlers({ const updatedFloor = parent; if (projectId && updatedFloor) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || '', updatedFloor); @@ -188,7 +188,7 @@ export function useDecalEventHandlers({ organization: organization } - socket.emit('v1:model-Floor:add', data); + builderSocket.emit('v1:model-Floor:add', data); } } }, 0) @@ -201,7 +201,7 @@ export function useDecalEventHandlers({ const updatedWall = removeDecalInWall(decalUuid); if (projectId && updatedWall) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || '', updatedWall); @@ -217,14 +217,14 @@ export function useDecalEventHandlers({ organization: organization } - socket.emit('v1:model-Wall:add', data); + builderSocket.emit('v1:model-Wall:add', data); } } } else if ('floorUuid' in parent) { const updatedFloor = removeDecalInFloor(decalUuid); if (projectId && updatedFloor) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || '', updatedFloor); @@ -240,7 +240,7 @@ export function useDecalEventHandlers({ organization: organization } - socket.emit('v1:model-Floor:add', data); + builderSocket.emit('v1:model-Floor:add', data); } } } diff --git a/app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx b/app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx index 70eaa9c..83c5d4c 100644 --- a/app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx +++ b/app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx @@ -17,7 +17,7 @@ function AisleCreator() { const { toggleView } = useToggleView(); const { toolMode } = useToolMode(); const { activeLayer } = useActiveLayer(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { aisleStore, undoRedo2DStore, versionStore } = useSceneContext(); const { addAisle, getAislePointById, getConnectedPoints } = aisleStore(); const { push2D } = undoRedo2DStore(); @@ -139,14 +139,14 @@ function AisleCreator() { const addAilseToBackend = (aisle: Aisle) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId, selectedVersion?.versionId || ""); } else { // SOCKET - socket.emit("v1:model-aisle:add", { + builderSocket.emit("v1:model-aisle:add", { projectId, versionId: selectedVersion?.versionId || "", userId, @@ -206,7 +206,7 @@ function AisleCreator() { toggleView, toolMode, activeLayer, - socket, + builderSocket, tempPoints, isCreating, addAisle, diff --git a/app/src/modules/builder/asset/assetsGroup.tsx b/app/src/modules/builder/asset/assetsGroup.tsx index 0fcfcae..e6e89dc 100644 --- a/app/src/modules/builder/asset/assetsGroup.tsx +++ b/app/src/modules/builder/asset/assetsGroup.tsx @@ -20,7 +20,7 @@ const gltfLoaderWorker = new Worker(new URL("../../../services/factoryBuilder/we function AssetsGroup({ plane }: { readonly plane: RefMesh }) { const { activeModule } = useModuleStore(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { controls, gl, pointer, camera, raycaster, scene } = useThree(); const { setLoadingProgress } = useLoadingProgress(); const { assetStore, eventStore, versionStore } = useSceneContext(); @@ -346,7 +346,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) { pointer.x = (event.clientX / window.innerWidth) * 2 - 1; pointer.y = -(event.clientY / window.innerHeight) * 2 + 1; - addAssetModel(scene, raycaster, camera, pointer, socket, selectedItem, setSelectedItem, addEvent, addAsset, plane, loader, selectedVersion, projectId, userId); + addAssetModel(scene, raycaster, camera, pointer, builderSocket, selectedItem, setSelectedItem, addEvent, addAsset, plane, loader, selectedVersion, projectId, userId); } }; diff --git a/app/src/modules/builder/asset/functions/addAssetModel.ts b/app/src/modules/builder/asset/functions/addAssetModel.ts index ffe5f9c..706ea86 100644 --- a/app/src/modules/builder/asset/functions/addAssetModel.ts +++ b/app/src/modules/builder/asset/functions/addAssetModel.ts @@ -14,7 +14,7 @@ async function addAssetModel( raycaster: THREE.Raycaster, camera: THREE.Camera, pointer: THREE.Vector2, - socket: Socket | null, + builderSocket: Socket | null, selectedItem: any, setSelectedItem: any, addEvent: (event: EventsSchema) => void, @@ -68,7 +68,7 @@ async function addAssetModel( } const cachedModel = THREE.Cache.get(selectedItem.id); if (cachedModel) { - handleModelLoad(cachedModel, intersectPoint!, selectedItem, addEvent, addAsset, socket, selectedVersion?.versionId || "", projectId, userId); + handleModelLoad(cachedModel, intersectPoint!, selectedItem, addEvent, addAsset, builderSocket, selectedVersion?.versionId || "", projectId, userId); return; } else { const cachedModelBlob = await retrieveGLTF(selectedItem.id); @@ -78,14 +78,14 @@ async function addAssetModel( URL.revokeObjectURL(blobUrl); THREE.Cache.remove(blobUrl); THREE.Cache.add(selectedItem.id, gltf); - handleModelLoad(gltf, intersectPoint!, selectedItem, addEvent, addAsset, socket, selectedVersion?.versionId || "", projectId, userId); + handleModelLoad(gltf, intersectPoint!, selectedItem, addEvent, addAsset, builderSocket, selectedVersion?.versionId || "", projectId, userId); }); } else { loader.load(`${url_Backend_dwinzo}/api/v2/AssetFile/${selectedItem.id}`, async (gltf) => { const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v2/AssetFile/${selectedItem.id}`).then((res) => res.blob()); await storeGLTF(selectedItem.id, modelBlob); THREE.Cache.add(selectedItem.id, gltf); - await handleModelLoad(gltf, intersectPoint!, selectedItem, addEvent, addAsset, socket, selectedVersion?.versionId || "", projectId, userId); + await handleModelLoad(gltf, intersectPoint!, selectedItem, addEvent, addAsset, builderSocket, selectedVersion?.versionId || "", projectId, userId); }); } } @@ -103,7 +103,7 @@ async function handleModelLoad( selectedItem: any, addEvent: (event: EventsSchema) => void, addAsset: (asset: Asset) => void, - socket: Socket | null, + builderSocket: Socket | null, versionId: string, projectId?: string, userId?: string @@ -426,14 +426,14 @@ async function handleModelLoad( rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z }, isLocked: false, isVisible: true, - socketId: socket?.id || "", + socketId: builderSocket?.id || "", eventData: eventData, versionId: versionId, projectId: projectId, userId: userId, }; - if (!socket?.connected) { + if (!builderSocket?.connected) { // API setAssetsApi({ @@ -451,7 +451,7 @@ async function handleModelLoad( } else { // SOCKET - socket.emit("v1:model-asset:add", completeData); + builderSocket.emit("v1:model-asset:add", completeData); } const asset: Asset = { @@ -478,13 +478,13 @@ async function handleModelLoad( rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z }, isLocked: false, isVisible: true, - socketId: socket?.id || "", + socketId: builderSocket?.id || "", versionId: versionId, projectId: projectId, userId: userId, }; - if (!socket?.connected) { + if (!builderSocket?.connected) { // API setAssetsApi({ @@ -501,7 +501,7 @@ async function handleModelLoad( } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } const asset = { diff --git a/app/src/modules/builder/asset/models/model/eventHandlers/useModelEventHandlers.ts b/app/src/modules/builder/asset/models/model/eventHandlers/useModelEventHandlers.ts index c3ca6f5..7a3e3e6 100644 --- a/app/src/modules/builder/asset/models/model/eventHandlers/useModelEventHandlers.ts +++ b/app/src/modules/builder/asset/models/model/eventHandlers/useModelEventHandlers.ts @@ -21,7 +21,7 @@ export function useModelEventHandlers({ boundingBox, groupRef, asset }: { boundi const { activeModule } = useModuleStore(); const { toggleView } = useToggleView(); const { subModule } = useSubModuleStore(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { eventStore, productStore, assetStore, undoRedo3DStore, versionStore } = useSceneContext(); const { push3D } = undoRedo3DStore(); const { removeAsset } = assetStore(); @@ -121,7 +121,7 @@ export function useModelEventHandlers({ boundingBox, groupRef, asset }: { boundi const handleClick = async (evt: ThreeEvent, asset: Asset) => { if (leftDrag.current || toggleView) return; if (activeTool === "delete" && deletableFloorAsset && deletableFloorAsset.uuid === asset.modelUuid) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST deleteFloorAssetApi({ @@ -137,13 +137,13 @@ export function useModelEventHandlers({ boundingBox, groupRef, asset }: { boundi organization, modelUuid: asset.modelUuid, modelName: asset.modelName, - socketId: socket.id, + socketId: builderSocket.id, userId, versionId: selectedVersion?.versionId || "", projectId, }; - socket.emit("v1:model-asset:delete", data); + builderSocket.emit("v1:model-asset:delete", data); } removeEvent(asset.modelUuid); diff --git a/app/src/modules/builder/dfx/LoadBlueprint.tsx b/app/src/modules/builder/dfx/LoadBlueprint.tsx index f99b2d3..efed451 100644 --- a/app/src/modules/builder/dfx/LoadBlueprint.tsx +++ b/app/src/modules/builder/dfx/LoadBlueprint.tsx @@ -19,7 +19,7 @@ const DxfFile = () => { // State management hooks const { dfxuploaded, dfxWallGenerate, setObjValue, objValue, setDfxUploaded } = useDfxUpload(); const { toggleView } = useToggleView(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { versionStore, wallStore } = useSceneContext(); const { selectedVersion } = versionStore(); const { addWall } = wallStore(); @@ -38,7 +38,7 @@ const DxfFile = () => { if (dfxWallGenerate) { dfxWallGenerate.map((wall: Wall) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || "", wall); @@ -53,7 +53,7 @@ const DxfFile = () => { organization: organization, }; addWall(wall); - socket.emit("v1:model-Wall:add", data); + builderSocket.emit("v1:model-Wall:add", data); } } }); diff --git a/app/src/modules/builder/floor/floorCreator/floorCreator.tsx b/app/src/modules/builder/floor/floorCreator/floorCreator.tsx index 6d73b23..57e7f34 100644 --- a/app/src/modules/builder/floor/floorCreator/floorCreator.tsx +++ b/app/src/modules/builder/floor/floorCreator/floorCreator.tsx @@ -17,7 +17,7 @@ function FloorCreator() { const { toggleView } = useToggleView(); const { toolMode } = useToolMode(); const { activeLayer } = useActiveLayer(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { floorStore, undoRedo2DStore, versionStore } = useSceneContext(); const { addFloor, getFloorPointById } = floorStore(); const { push2D } = undoRedo2DStore(); @@ -124,7 +124,7 @@ function FloorCreator() { }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || "", floor); @@ -139,7 +139,7 @@ function FloorCreator() { organization: organization, }; - socket.emit("v1:model-Floor:add", data); + builderSocket.emit("v1:model-Floor:add", data); } } setTempPoints([]); @@ -178,7 +178,7 @@ function FloorCreator() { }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || "", floor); @@ -193,7 +193,7 @@ function FloorCreator() { organization: organization, }; - socket.emit("v1:model-Floor:add", data); + builderSocket.emit("v1:model-Floor:add", data); } } setTempPoints([]); @@ -241,7 +241,7 @@ function FloorCreator() { }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || "", floor); @@ -256,7 +256,7 @@ function FloorCreator() { organization: organization, }; - socket.emit("v1:model-Floor:add", data); + builderSocket.emit("v1:model-Floor:add", data); } } } @@ -292,7 +292,7 @@ function FloorCreator() { canvasElement.removeEventListener("click", onMouseClick); canvasElement.removeEventListener("contextmenu", onContext); }; - }, [camera, raycaster, plane, toggleView, toolMode, activeLayer, socket, tempPoints, isCreating, floorDepth, isBeveled, bevelStrength, sideMaterial, topMaterial, snappedPosition, snappedPoint]); + }, [camera, raycaster, plane, toggleView, toolMode, activeLayer, builderSocket, tempPoints, isCreating, floorDepth, isBeveled, bevelStrength, sideMaterial, topMaterial, snappedPosition, snappedPoint]); return ( <> diff --git a/app/src/modules/builder/line/eventHandler/useLineEventHandler.ts b/app/src/modules/builder/line/eventHandler/useLineEventHandler.ts index bc7a657..44b9866 100644 --- a/app/src/modules/builder/line/eventHandler/useLineEventHandler.ts +++ b/app/src/modules/builder/line/eventHandler/useLineEventHandler.ts @@ -28,7 +28,7 @@ export function useLineEventHandler({ points }: Readonly) { const { raycaster, camera, pointer } = useThree(); const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []); const [isDeletable, setIsDeletable] = useState(false); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { toolMode } = useToolMode(); const { wallStore, floorStore, zoneStore, undoRedo2DStore, wallAssetStore, versionStore } = useSceneContext(); const { push2D } = undoRedo2DStore(); @@ -140,7 +140,7 @@ export function useLineEventHandler({ points }: Readonly) { }); if (projectId && updatedWallAsset) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallAssetApi(projectId, selectedVersion?.versionId || "", updatedWallAsset); @@ -155,13 +155,13 @@ export function useLineEventHandler({ points }: Readonly) { organization: organization, }; - socket.emit("v1:wall-asset:add", data); + builderSocket.emit("v1:wall-asset:add", data); } } }); } - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || "", updatedWall); @@ -176,7 +176,7 @@ export function useLineEventHandler({ points }: Readonly) { organization: organization, }; - socket.emit("v1:model-Wall:add", data); + builderSocket.emit("v1:model-Wall:add", data); } }); @@ -206,7 +206,7 @@ export function useLineEventHandler({ points }: Readonly) { if (updatedFloors.length > 0 && projectId) { updatedFloors.forEach((updatedFloor) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || "", updatedFloor); @@ -221,7 +221,7 @@ export function useLineEventHandler({ points }: Readonly) { organization: organization, }; - socket.emit("v1:model-Floor:add", data); + builderSocket.emit("v1:model-Floor:add", data); } }); @@ -251,7 +251,7 @@ export function useLineEventHandler({ points }: Readonly) { if (updatedZones.length > 0 && projectId) { updatedZones.forEach((updatedZone) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || "", updatedZone); @@ -266,7 +266,7 @@ export function useLineEventHandler({ points }: Readonly) { organization: organization, }; - socket.emit("v1:zone:add", data); + builderSocket.emit("v1:zone:add", data); } }); @@ -290,7 +290,7 @@ export function useLineEventHandler({ points }: Readonly) { } } } - }, [socket, points, toolMode, dragOffset, projectId, selectedVersion, userId, organization]); + }, [builderSocket, points, toolMode, dragOffset, projectId, selectedVersion, userId, organization]); const handleLineClick = useCallback(() => { if (toolMode === "2D-Delete") { @@ -302,7 +302,7 @@ export function useLineEventHandler({ points }: Readonly) { assetsOnWall.forEach((asset) => { if (projectId && asset) { removeWallAsset(asset.modelUuid); - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteWallAssetApi(projectId, selectedVersion?.versionId || "", asset.modelUuid, asset.wallUuid); @@ -318,11 +318,11 @@ export function useLineEventHandler({ points }: Readonly) { wallUuid: asset.wallUuid, }; - socket.emit("v1:wall-asset:delete", data); + builderSocket.emit("v1:wall-asset:delete", data); } } }); - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteWallApi(projectId, selectedVersion?.versionId || "", removedWall.wallUuid); @@ -337,7 +337,7 @@ export function useLineEventHandler({ points }: Readonly) { organization: organization, }; - socket.emit("v1:model-Wall:delete", data); + builderSocket.emit("v1:model-Wall:delete", data); } push2D({ @@ -363,7 +363,7 @@ export function useLineEventHandler({ points }: Readonly) { if (removedFloors.length > 0) { removedFloors.forEach((floor) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteFloorApi(projectId, selectedVersion?.versionId || "", floor.floorUuid); @@ -378,7 +378,7 @@ export function useLineEventHandler({ points }: Readonly) { organization: organization, }; - socket.emit("v1:model-Floor:delete", data); + builderSocket.emit("v1:model-Floor:delete", data); } } }); @@ -402,7 +402,7 @@ export function useLineEventHandler({ points }: Readonly) { if (updatedFloors.length > 0) { updatedFloors.forEach((floor) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || "", floor); @@ -417,7 +417,7 @@ export function useLineEventHandler({ points }: Readonly) { organization: organization, }; - socket.emit("v1:model-Floor:add", data); + builderSocket.emit("v1:model-Floor:add", data); } } }); @@ -448,7 +448,7 @@ export function useLineEventHandler({ points }: Readonly) { if (removedZones.length > 0) { removedZones.forEach((zone) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteZoneApi(projectId, selectedVersion?.versionId || "", zone.zoneUuid); @@ -463,7 +463,7 @@ export function useLineEventHandler({ points }: Readonly) { organization: organization, }; - socket.emit("v1:zone:delete", data); + builderSocket.emit("v1:zone:delete", data); } } }); @@ -487,7 +487,7 @@ export function useLineEventHandler({ points }: Readonly) { if (updatedZones.length > 0) { updatedZones.forEach((zone) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || "", zone); @@ -502,7 +502,7 @@ export function useLineEventHandler({ points }: Readonly) { organization: organization, }; - socket.emit("v1:zone:add", data); + builderSocket.emit("v1:zone:add", data); } } }); @@ -529,7 +529,7 @@ export function useLineEventHandler({ points }: Readonly) { } handleCanvasCursors("default"); } - }, [socket, points, toolMode, projectId, selectedVersion, userId, organization]); + }, [builderSocket, points, toolMode, projectId, selectedVersion, userId, organization]); const handlePointerOver = useCallback( (e: ThreeEvent) => { diff --git a/app/src/modules/builder/point/eventHandler/usePointEventHandler.ts b/app/src/modules/builder/point/eventHandler/usePointEventHandler.ts index 747747a..e6bd52b 100644 --- a/app/src/modules/builder/point/eventHandler/usePointEventHandler.ts +++ b/app/src/modules/builder/point/eventHandler/usePointEventHandler.ts @@ -30,7 +30,7 @@ export function usePointEventHandler({ point }: { point: Point }) { const [isDeleteHovered, setIsDeleteHovered] = useState(false); const [isSelected, setIsSelected] = useState(false); const [dragOffset, setDragOffset] = useState(null); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { toolMode } = useToolMode(); const { aisleStore, wallStore, floorStore, zoneStore, undoRedo2DStore, wallAssetStore, versionStore } = useSceneContext(); const { push2D } = undoRedo2DStore(); @@ -124,14 +124,14 @@ export function usePointEventHandler({ point }: { point: Point }) { const updatedAisles = getAislesByPointId(point.pointUuid); if (updatedAisles.length > 0 && projectId) { updatedAisles.forEach((updatedAisle) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertAisleApi(updatedAisle.aisleUuid, updatedAisle.points, updatedAisle.type, projectId, selectedVersion?.versionId || ""); } else { // SOCKET - socket.emit("v1:model-aisle:add", { + builderSocket.emit("v1:model-aisle:add", { projectId: projectId, versionId: selectedVersion?.versionId || "", userId: userId, @@ -180,7 +180,7 @@ export function usePointEventHandler({ point }: { point: Point }) { }); if (projectId && updatedWallAsset) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallAssetApi(projectId, selectedVersion?.versionId || "", updatedWallAsset); @@ -195,13 +195,13 @@ export function usePointEventHandler({ point }: { point: Point }) { organization: organization, }; - socket.emit("v1:wall-asset:add", data); + builderSocket.emit("v1:wall-asset:add", data); } } }); } - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || "", updatedWall); @@ -216,7 +216,7 @@ export function usePointEventHandler({ point }: { point: Point }) { organization: organization, }; - socket.emit("v1:model-Wall:add", data); + builderSocket.emit("v1:model-Wall:add", data); } }); } @@ -243,7 +243,7 @@ export function usePointEventHandler({ point }: { point: Point }) { const updatedFloors = getFloorsByPointId(point.pointUuid); if (updatedFloors && updatedFloors.length > 0 && projectId) { updatedFloors.forEach((updatedFloor) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || "", updatedFloor); @@ -258,7 +258,7 @@ export function usePointEventHandler({ point }: { point: Point }) { organization: organization, }; - socket.emit("v1:model-Floor:add", data); + builderSocket.emit("v1:model-Floor:add", data); } }); } @@ -285,7 +285,7 @@ export function usePointEventHandler({ point }: { point: Point }) { const updatedZones = getZonesByPointId(point.pointUuid); if (updatedZones && updatedZones.length > 0 && projectId) { updatedZones.forEach((updatedZone) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || "", updatedZone); @@ -300,7 +300,7 @@ export function usePointEventHandler({ point }: { point: Point }) { organization: organization, }; - socket.emit("v1:zone:add", data); + builderSocket.emit("v1:zone:add", data); } }); } @@ -326,7 +326,7 @@ export function usePointEventHandler({ point }: { point: Point }) { } setInitialStates({}); - }, [toolMode, projectId, socket, selectedVersion, userId, organization, initialStates, point]); + }, [toolMode, projectId, builderSocket, selectedVersion, userId, organization, initialStates, point]); const handlePointClick = useCallback( (e: ThreeEvent) => { @@ -338,7 +338,7 @@ export function usePointEventHandler({ point }: { point: Point }) { if (removedAisles.length > 0) { removedAisles.forEach((aisle) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteAisleApi(aisle.aisleUuid, projectId, selectedVersion?.versionId || ""); @@ -353,7 +353,7 @@ export function usePointEventHandler({ point }: { point: Point }) { aisleUuid: aisle.aisleUuid, }; - socket.emit("v1:model-aisle:delete", data); + builderSocket.emit("v1:model-aisle:delete", data); } } }); @@ -385,7 +385,7 @@ export function usePointEventHandler({ point }: { point: Point }) { assetsOnWall.forEach((asset) => { if (projectId && asset) { removeWallAsset(asset.modelUuid); - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteWallAssetApi(projectId, selectedVersion?.versionId || "", asset.modelUuid, asset.wallUuid); @@ -401,13 +401,13 @@ export function usePointEventHandler({ point }: { point: Point }) { wallUuid: asset.wallUuid, }; - socket.emit("v1:wall-asset:delete", data); + builderSocket.emit("v1:wall-asset:delete", data); } } }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteWallApi(projectId, selectedVersion?.versionId || "", wall.wallUuid); @@ -422,7 +422,7 @@ export function usePointEventHandler({ point }: { point: Point }) { organization: organization, }; - socket.emit("v1:model-Wall:delete", data); + builderSocket.emit("v1:model-Wall:delete", data); } } }); @@ -451,7 +451,7 @@ export function usePointEventHandler({ point }: { point: Point }) { if (removedFloors.length > 0) { removedFloors.forEach((floor) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteFloorApi(projectId, selectedVersion?.versionId || "", floor.floorUuid); @@ -466,7 +466,7 @@ export function usePointEventHandler({ point }: { point: Point }) { organization: organization, }; - socket.emit("v1:model-Floor:delete", data); + builderSocket.emit("v1:model-Floor:delete", data); } } }); @@ -490,7 +490,7 @@ export function usePointEventHandler({ point }: { point: Point }) { if (updatedFloors.length > 0) { updatedFloors.forEach((floor) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || "", floor); @@ -505,7 +505,7 @@ export function usePointEventHandler({ point }: { point: Point }) { organization: organization, }; - socket.emit("v1:model-Floor:add", data); + builderSocket.emit("v1:model-Floor:add", data); } } }); @@ -535,7 +535,7 @@ export function usePointEventHandler({ point }: { point: Point }) { if (removedZones.length > 0) { removedZones.forEach((zone) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteZoneApi(projectId, selectedVersion?.versionId || "", zone.zoneUuid); @@ -550,7 +550,7 @@ export function usePointEventHandler({ point }: { point: Point }) { organization: organization, }; - socket.emit("v1:zone:delete", data); + builderSocket.emit("v1:zone:delete", data); } } }); @@ -574,7 +574,7 @@ export function usePointEventHandler({ point }: { point: Point }) { if (updatedZones.length > 0) { updatedZones.forEach((zone) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || "", zone); @@ -589,7 +589,7 @@ export function usePointEventHandler({ point }: { point: Point }) { organization: organization, }; - socket.emit("v1:zone:add", data); + builderSocket.emit("v1:zone:add", data); } } }); @@ -615,7 +615,7 @@ export function usePointEventHandler({ point }: { point: Point }) { handleCanvasCursors("default"); } }, - [toolMode, projectId, socket, selectedVersion, userId, organization, point] + [toolMode, projectId, builderSocket, selectedVersion, userId, organization, point] ); const handlePointerOver = useCallback( diff --git a/app/src/modules/builder/wall/wallCreator/wallCreator.tsx b/app/src/modules/builder/wall/wallCreator/wallCreator.tsx index 620614d..9703d5d 100644 --- a/app/src/modules/builder/wall/wallCreator/wallCreator.tsx +++ b/app/src/modules/builder/wall/wallCreator/wallCreator.tsx @@ -20,7 +20,7 @@ function WallCreator() { const { toggleView } = useToggleView(); const { toolMode } = useToolMode(); const { activeLayer } = useActiveLayer(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { wallStore, undoRedo2DStore, versionStore } = useSceneContext(); const { addWall, getWallPointById, removeWall, getWallByPoints, getConnectedPoints } = wallStore(); const { push2D } = undoRedo2DStore(); @@ -92,7 +92,7 @@ function WallCreator() { removeWall(wall.wallUuid); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteWallApi(projectId, selectedVersion?.versionId || "", wall.wallUuid); @@ -107,7 +107,7 @@ function WallCreator() { organization: organization, }; - socket.emit("v1:model-Wall:delete", data); + builderSocket.emit("v1:model-Wall:delete", data); } } @@ -146,7 +146,7 @@ function WallCreator() { addWall(wall2); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || "", wall2); @@ -161,7 +161,7 @@ function WallCreator() { organization: organization, }; - socket.emit("v1:model-Wall:add", data); + builderSocket.emit("v1:model-Wall:add", data); } } @@ -207,7 +207,7 @@ function WallCreator() { }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || "", wall3); @@ -222,7 +222,7 @@ function WallCreator() { organization: organization, }; - socket.emit("v1:model-Wall:add", data2); + builderSocket.emit("v1:model-Wall:add", data2); } } @@ -242,7 +242,7 @@ function WallCreator() { addWall(wall1); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || "", wall1); @@ -257,7 +257,7 @@ function WallCreator() { organization: organization, }; - socket.emit("v1:model-Wall:add", data); + builderSocket.emit("v1:model-Wall:add", data); } } @@ -274,7 +274,7 @@ function WallCreator() { addWall(wall2); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || "", wall2); @@ -289,7 +289,7 @@ function WallCreator() { organization: organization, }; - socket.emit("v1:model-Wall:add", data1); + builderSocket.emit("v1:model-Wall:add", data1); } } @@ -340,7 +340,7 @@ function WallCreator() { }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || "", wall3); @@ -355,7 +355,7 @@ function WallCreator() { organization: organization, }; - socket.emit("v1:model-Wall:add", data3); + builderSocket.emit("v1:model-Wall:add", data3); } } @@ -429,7 +429,7 @@ function WallCreator() { }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || "", wall); @@ -444,7 +444,7 @@ function WallCreator() { organization: organization, }; - socket.emit("v1:model-Wall:add", data); + builderSocket.emit("v1:model-Wall:add", data); } } @@ -497,7 +497,7 @@ function WallCreator() { toggleView, toolMode, activeLayer, - socket, + builderSocket, tempPoints, isCreating, addWall, diff --git a/app/src/modules/builder/wallAsset/Instances/Instance/eventHandler/useWallAssetEventHandler.ts b/app/src/modules/builder/wallAsset/Instances/Instance/eventHandler/useWallAssetEventHandler.ts index e755515..1325914 100644 --- a/app/src/modules/builder/wallAsset/Instances/Instance/eventHandler/useWallAssetEventHandler.ts +++ b/app/src/modules/builder/wallAsset/Instances/Instance/eventHandler/useWallAssetEventHandler.ts @@ -1,26 +1,18 @@ -import * as THREE from 'three'; -import { useCallback, useEffect, useRef } from 'react'; -import { ThreeEvent, useThree } from '@react-three/fiber'; -import { useParams } from 'react-router-dom'; -import { useActiveTool, useSocketStore, useToggleView } from '../../../../../../store/builder/store'; -import useModuleStore from '../../../../../../store/ui/useModuleStore'; -import { useSceneContext } from '../../../../../scene/sceneContext'; -import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore'; -import { getUserData } from '../../../../../../functions/getUserData'; -import closestPointOnLineSegment from '../../../../line/helpers/getClosestPointOnLineSegment'; -import { upsertWallAssetApi } from '../../../../../../services/factoryBuilder/asset/wallAsset/upsertWallAssetApi'; -import { deleteWallAssetApi } from '../../../../../../services/factoryBuilder/asset/wallAsset/deleteWallAssetApi'; +import * as THREE from "three"; +import { useCallback, useEffect, useRef } from "react"; +import { ThreeEvent, useThree } from "@react-three/fiber"; +import { useParams } from "react-router-dom"; +import { useActiveTool, useSocketStore, useToggleView } from "../../../../../../store/builder/store"; +import useModuleStore from "../../../../../../store/ui/useModuleStore"; +import { useSceneContext } from "../../../../../scene/sceneContext"; +import { useBuilderStore } from "../../../../../../store/builder/useBuilderStore"; +import { getUserData } from "../../../../../../functions/getUserData"; +import closestPointOnLineSegment from "../../../../line/helpers/getClosestPointOnLineSegment"; +import { upsertWallAssetApi } from "../../../../../../services/factoryBuilder/asset/wallAsset/upsertWallAssetApi"; +import { deleteWallAssetApi } from "../../../../../../services/factoryBuilder/asset/wallAsset/deleteWallAssetApi"; -export function useWallAssetEventHandler({ - wallAsset, - groupRef, - wall, -}: { - wallAsset: WallAsset; - groupRef: React.RefObject; - wall: Wall | undefined; -}) { - const { socket } = useSocketStore(); +export function useWallAssetEventHandler({ wallAsset, groupRef, wall }: { wallAsset: WallAsset; groupRef: React.RefObject; wall: Wall | undefined }) { + const { builderSocket } = useSocketStore(); const { raycaster, pointer, camera, scene, controls, gl } = useThree(); const { wallAssetStore, versionStore } = useSceneContext(); const { updateWallAsset, removeWallAsset, getWallAssetById } = wallAssetStore(); @@ -48,23 +40,21 @@ export function useWallAssetEventHandler({ const updatedWallAsset = getWallAssetById(wallAsset.modelUuid); if (projectId && updatedWallAsset) { - if (!socket?.connected) { - + if (!builderSocket?.connected) { // API - upsertWallAssetApi(projectId, selectedVersion?.versionId || '', updatedWallAsset); + upsertWallAssetApi(projectId, selectedVersion?.versionId || "", updatedWallAsset); } else { - // SOCKET const data = { wallAssetData: updatedWallAsset, projectId: projectId, - versionId: selectedVersion?.versionId || '', + versionId: selectedVersion?.versionId || "", userId: userId, - organization: organization - } - socket.emit('v1:wall-asset:add', data); + organization: organization, + }; + builderSocket.emit("v1:wall-asset:add", data); } } } @@ -82,7 +72,7 @@ export function useWallAssetEventHandler({ raycaster.setFromCamera(pointer, camera); const intersects = raycaster.intersectObjects(scene.children, true); - const intersect = intersects.find((i: any) => i.object.name.includes('WallReference')); + const intersect = intersects.find((i: any) => i.object.name.includes("WallReference")); if (intersect?.object.userData.wallUuid) { const newPoint = closestPointOnLineSegment( @@ -95,104 +85,114 @@ export function useWallAssetEventHandler({ updateWallAsset(wallAsset.modelUuid, { wallUuid: intersect.object.userData.wallUuid, - position: [newPoint.x, wallAsset.wallAssetType === 'fixedMove' ? 0 : intersect.point.y, newPoint.z], + position: [newPoint.x, wallAsset.wallAssetType === "fixedMove" ? 0 : intersect.point.y, newPoint.z], rotation: [wallRotation.x, wallRotation.y, wallRotation.z], }); } }; - if (selectedWallAsset && !toggleView && activeModule === 'builder') { - canvasElement.addEventListener('mousemove', onPointerMove); - canvasElement.addEventListener('pointerup', onPointerUp); + if (selectedWallAsset && !toggleView && activeModule === "builder") { + canvasElement.addEventListener("mousemove", onPointerMove); + canvasElement.addEventListener("pointerup", onPointerUp); } return () => { - canvasElement.removeEventListener('mousemove', onPointerMove); - canvasElement.removeEventListener('pointerup', onPointerUp); + canvasElement.removeEventListener("mousemove", onPointerMove); + canvasElement.removeEventListener("pointerup", onPointerUp); }; - }, [gl, camera, toggleView, activeModule, selectedWallAsset, socket, wall, wallAsset]); + }, [gl, camera, toggleView, activeModule, selectedWallAsset, builderSocket, wall, wallAsset]); - const handlePointerEnter = useCallback((evt: ThreeEvent) => { - if (!toggleView) { - evt.stopPropagation(); - let currentObject = evt.object; - while (currentObject) { - if (currentObject.userData.wallUuid) { - break; - } - currentObject = currentObject.parent as THREE.Object3D; - } - if (activeTool === "delete" && activeModule === 'builder') { - if (deletableWallAsset && deletableWallAsset.userData.modelUuid === wallAsset.modelUuid) { - return; - } else { - setDeletableWallAsset(currentObject); - } - } - } - }, [activeTool, activeModule, deletableWallAsset, toggleView]); - - const handlePointerLeave = useCallback((evt: ThreeEvent) => { - if (!toggleView) { - evt.stopPropagation(); - if (evt.intersections.length === 0 && activeTool === "delete" && deletableWallAsset && deletableWallAsset.userData.modelUuid === wallAsset.modelUuid) { - setDeletableWallAsset(null); - } - } - }, [activeTool, deletableWallAsset, toggleView]); - - const handlePointerDown = useCallback((e: ThreeEvent) => { - if (!toggleView && activeModule === 'builder' && selectedWallAsset && selectedWallAsset.userData.modelUuid === wallAsset.modelUuid) { - draggingRef.current = true; - e.stopPropagation(); - setSelectedWallAsset(groupRef.current); - if (controls) { - (controls as any).enabled = false; - } - } - }, [toggleView, activeModule, selectedWallAsset, wallAsset]); - - const handleClick = useCallback((e: ThreeEvent) => { - if (!toggleView && activeModule === 'builder' && activeTool !== 'delete') { - if (e.object) { - e.stopPropagation(); - let currentObject = e.object; + const handlePointerEnter = useCallback( + (evt: ThreeEvent) => { + if (!toggleView) { + evt.stopPropagation(); + let currentObject = evt.object; while (currentObject) { if (currentObject.userData.wallUuid) { break; } currentObject = currentObject.parent as THREE.Object3D; } - setSelectedWallAsset(currentObject); - } - } else if (!toggleView && activeModule === 'builder' && activeTool === 'delete') { - if (activeTool === 'delete' && deletableWallAsset && deletableWallAsset.userData.modelUuid === wallAsset.modelUuid) { - const removedWallAsset = removeWallAsset(wallAsset.modelUuid); - - if (projectId && removedWallAsset) { - if (!socket?.connected) { - - // API - - deleteWallAssetApi(projectId, selectedVersion?.versionId || '', removedWallAsset.modelUuid, removedWallAsset.wallUuid); + if (activeTool === "delete" && activeModule === "builder") { + if (deletableWallAsset && deletableWallAsset.userData.modelUuid === wallAsset.modelUuid) { + return; } else { - - // SOCKET - - const data = { - projectId: projectId, - versionId: selectedVersion?.versionId || '', - userId: userId, - organization: organization, - modelUuid: removedWallAsset.modelUuid, - wallUuid: removedWallAsset.wallUuid - } - socket.emit('v1:wall-asset:delete', data); + setDeletableWallAsset(currentObject); } } } - } - }, [toggleView, activeModule, activeTool, wallAsset, deletableWallAsset, socket]); + }, + [activeTool, activeModule, deletableWallAsset, toggleView] + ); + + const handlePointerLeave = useCallback( + (evt: ThreeEvent) => { + if (!toggleView) { + evt.stopPropagation(); + if (evt.intersections.length === 0 && activeTool === "delete" && deletableWallAsset && deletableWallAsset.userData.modelUuid === wallAsset.modelUuid) { + setDeletableWallAsset(null); + } + } + }, + [activeTool, deletableWallAsset, toggleView] + ); + + const handlePointerDown = useCallback( + (e: ThreeEvent) => { + if (!toggleView && activeModule === "builder" && selectedWallAsset && selectedWallAsset.userData.modelUuid === wallAsset.modelUuid) { + draggingRef.current = true; + e.stopPropagation(); + setSelectedWallAsset(groupRef.current); + if (controls) { + (controls as any).enabled = false; + } + } + }, + [toggleView, activeModule, selectedWallAsset, wallAsset] + ); + + const handleClick = useCallback( + (e: ThreeEvent) => { + if (!toggleView && activeModule === "builder" && activeTool !== "delete") { + if (e.object) { + e.stopPropagation(); + let currentObject = e.object; + while (currentObject) { + if (currentObject.userData.wallUuid) { + break; + } + currentObject = currentObject.parent as THREE.Object3D; + } + setSelectedWallAsset(currentObject); + } + } else if (!toggleView && activeModule === "builder" && activeTool === "delete") { + if (activeTool === "delete" && deletableWallAsset && deletableWallAsset.userData.modelUuid === wallAsset.modelUuid) { + const removedWallAsset = removeWallAsset(wallAsset.modelUuid); + + if (projectId && removedWallAsset) { + if (!builderSocket?.connected) { + // API + + deleteWallAssetApi(projectId, selectedVersion?.versionId || "", removedWallAsset.modelUuid, removedWallAsset.wallUuid); + } else { + // SOCKET + + const data = { + projectId: projectId, + versionId: selectedVersion?.versionId || "", + userId: userId, + organization: organization, + modelUuid: removedWallAsset.modelUuid, + wallUuid: removedWallAsset.wallUuid, + }; + builderSocket.emit("v1:wall-asset:delete", data); + } + } + } + } + }, + [toggleView, activeModule, activeTool, wallAsset, deletableWallAsset, builderSocket] + ); const handlePointerMissed = useCallback(() => { if (selectedWallAsset && selectedWallAsset.userData.modelUuid === wallAsset.modelUuid) { @@ -206,6 +206,6 @@ export function useWallAssetEventHandler({ handlePointerMissed, handlePointerEnter, handlePointerLeave, - draggingRef + draggingRef, }; -} \ No newline at end of file +} diff --git a/app/src/modules/builder/wallAsset/wallAssetCreator.tsx b/app/src/modules/builder/wallAsset/wallAssetCreator.tsx index 8e6f0d6..3465565 100644 --- a/app/src/modules/builder/wallAsset/wallAssetCreator.tsx +++ b/app/src/modules/builder/wallAsset/wallAssetCreator.tsx @@ -11,7 +11,7 @@ import closestPointOnLineSegment from "../line/helpers/getClosestPointOnLineSegm import { upsertWallAssetApi } from "../../../services/factoryBuilder/asset/wallAsset/upsertWallAssetApi"; function WallAssetCreator() { - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { pointer, camera, raycaster, scene, gl } = useThree(); const { toggleView } = useToggleView(); const { activeModule } = useModuleStore(); @@ -56,7 +56,7 @@ function WallAssetCreator() { addWallAsset(newWallAsset); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallAssetApi(projectId, selectedVersion?.versionId || "", newWallAsset); @@ -71,7 +71,7 @@ function WallAssetCreator() { organization: organization, }; - socket.emit("v1:wall-asset:add", data); + builderSocket.emit("v1:wall-asset:add", data); } } } @@ -85,7 +85,7 @@ function WallAssetCreator() { return () => { canvasElement.removeEventListener("drop", onDrop); }; - }, [gl, camera, toggleView, activeModule, socket, selectedItem, setSelectedItem]); + }, [gl, camera, toggleView, activeModule, builderSocket, selectedItem, setSelectedItem]); return <>; } diff --git a/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx b/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx index f181d2a..3771a54 100644 --- a/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx +++ b/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx @@ -19,7 +19,7 @@ function ZoneCreator() { const { toggleView } = useToggleView(); const { toolMode } = useToolMode(); const { activeLayer } = useActiveLayer(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { zoneStore, undoRedo2DStore, versionStore } = useSceneContext(); const { addZone, getZonePointById } = zoneStore(); const { push2D } = undoRedo2DStore(); @@ -127,7 +127,7 @@ function ZoneCreator() { }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || "", zone); @@ -142,7 +142,7 @@ function ZoneCreator() { organization: organization, }; - socket.emit("v1:zone:add", data); + builderSocket.emit("v1:zone:add", data); } } setTempPoints([]); @@ -182,7 +182,7 @@ function ZoneCreator() { }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || "", zone); @@ -197,7 +197,7 @@ function ZoneCreator() { organization: organization, }; - socket.emit("v1:zone:add", data); + builderSocket.emit("v1:zone:add", data); } } setTempPoints([]); @@ -246,7 +246,7 @@ function ZoneCreator() { }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || "", zone); @@ -261,7 +261,7 @@ function ZoneCreator() { organization: organization, }; - socket.emit("v1:zone:add", data); + builderSocket.emit("v1:zone:add", data); } } } @@ -297,7 +297,7 @@ function ZoneCreator() { canvasElement.removeEventListener("click", onMouseClick); canvasElement.removeEventListener("contextmenu", onContext); }; - }, [gl, camera, scene, raycaster, plane, toggleView, toolMode, activeLayer, socket, tempPoints, isCreating, addZone, getZonePointById, zoneColor, zoneHeight, snappedPosition, snappedPoint]); + }, [gl, camera, scene, raycaster, plane, toggleView, toolMode, activeLayer, builderSocket, tempPoints, isCreating, addZone, getZonePointById, zoneColor, zoneHeight, snappedPosition, snappedPoint]); return ( <> diff --git a/app/src/modules/collaboration/camera/collabCams.tsx b/app/src/modules/collaboration/camera/collabCams.tsx index cb8f780..ca43803 100644 --- a/app/src/modules/collaboration/camera/collabCams.tsx +++ b/app/src/modules/collaboration/camera/collabCams.tsx @@ -21,7 +21,7 @@ const CamModelsGroup = () => { const groupRef = useRef(null); const { organization, email } = getUserData(); const { setActiveUsers } = useActiveUsers(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { activeModule } = useModuleStore(); const { selectedUser, setSelectedUser } = useSelectedUserStore(); const { isPlaying } = usePlayButtonStore(); @@ -83,18 +83,14 @@ const CamModelsGroup = () => { useEffect(() => { if (!email) navigate("/"); - if (!socket) return; + if (!builderSocket) return; - socket.on("userConnectResponse", (data: any) => { + builderSocket.on("userConnectResponse", (data: any) => { if (!groupRef.current) return; if (data.data.userData.email === email) return; - if (socket.id === data.socketId || organization !== data.organization) - return; + if (builderSocket.id === data.socketId || organization !== data.organization) return; - const model = groupRef.current.getObjectByProperty( - "uuid", - data.data.userData._id - ); + const model = groupRef.current.getObjectByProperty("uuid", data.data.userData._id); if (model) { groupRef.current.remove(model); } @@ -102,50 +98,26 @@ const CamModelsGroup = () => { loader.load(camModel, (gltf) => { const newModel = gltf.scene.clone(); newModel.uuid = data.data.userData._id; - newModel.position.set( - data.data.position.x, - data.data.position.y, - data.data.position.z - ); - newModel.rotation.set( - data.data.rotation.x, - data.data.rotation.y, - data.data.rotation.z - ); + newModel.position.set(data.data.position.x, data.data.position.y, data.data.position.z); + newModel.rotation.set(data.data.rotation.x, data.data.rotation.y, data.data.rotation.z); newModel.userData = data.data.userData; - newModel.userData.target = new THREE.Vector3( - data.data.target.x, - data.data.target.y, - data.data.target.z - ); + newModel.userData.target = new THREE.Vector3(data.data.target.x, data.data.target.y, data.data.target.z); setCams((prev) => dedupeCams([...prev, newModel])); - setActiveUsers((prev: any) => - dedupeUsers([...prev, data.data.userData]) - ); + setActiveUsers((prev: any) => dedupeUsers([...prev, data.data.userData])); }); }); - socket.on("userDisConnectResponse", (data: any) => { + builderSocket.on("userDisConnectResponse", (data: any) => { if (!groupRef.current) return; - if (socket.id === data.socketId || organization !== data.organization) - return; + if (builderSocket.id === data.socketId || organization !== data.organization) return; - setCams((prev) => - prev.filter((cam) => cam.uuid !== data.data.userData._id) - ); - setActiveUsers((prev: any) => - prev.filter((user: any) => user._id !== data.data.userData._id) - ); + setCams((prev) => prev.filter((cam) => cam.uuid !== data.data.userData._id)); + setActiveUsers((prev: any) => prev.filter((user: any) => user._id !== data.data.userData._id)); }); - socket.on("v1:camera:Response:update", (data: any) => { - if ( - !groupRef.current || - socket.id === data.socketId || - organization !== data.organization - ) - return; + builderSocket.on("v1:camera:Response:update", (data: any) => { + if (!groupRef.current || builderSocket.id === data.socketId || organization !== data.organization) return; if (selectedUser && selectedUser?.id === data.data.userId) { setSelectedUser({ @@ -162,32 +134,20 @@ const CamModelsGroup = () => { setModels((prev) => ({ ...prev, [data.data.userId]: { - targetPosition: new THREE.Vector3( - data.data.position.x, - data.data.position.y, - data.data.position.z - ), - targetRotation: new THREE.Euler( - data.data.rotation.x, - data.data.rotation.y, - data.data.rotation.z - ), - target: new THREE.Vector3( - data.data.target.x, - data.data.target.y, - data.data.target.z - ), + targetPosition: new THREE.Vector3(data.data.position.x, data.data.position.y, data.data.position.z), + targetRotation: new THREE.Euler(data.data.rotation.x, data.data.rotation.y, data.data.rotation.z), + target: new THREE.Vector3(data.data.target.x, data.data.target.y, data.data.target.z), }, })); }); return () => { - socket.off("userConnectResponse"); - socket.off("userDisConnectResponse"); - socket.off("v1:camera:Response:update"); + builderSocket.off("userConnectResponse"); + builderSocket.off("userDisConnectResponse"); + builderSocket.off("v1:camera:Response:update"); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [email, loader, navigate, setActiveUsers, socket]); + }, [email, loader, navigate, setActiveUsers, builderSocket]); useFrame(() => { if (!groupRef.current) return; @@ -197,63 +157,43 @@ const CamModelsGroup = () => { const { targetPosition, targetRotation } = models[uuid]; model.position.lerp(targetPosition, 0.1); - model.rotation.x = THREE.MathUtils.lerp( - model.rotation.x, - targetRotation.x, - 0.1 - ); - model.rotation.y = THREE.MathUtils.lerp( - model.rotation.y, - targetRotation.y, - 0.1 - ); - model.rotation.z = THREE.MathUtils.lerp( - model.rotation.z, - targetRotation.z, - 0.1 - ); + model.rotation.x = THREE.MathUtils.lerp(model.rotation.x, targetRotation.x, 0.1); + model.rotation.y = THREE.MathUtils.lerp(model.rotation.y, targetRotation.y, 0.1); + model.rotation.z = THREE.MathUtils.lerp(model.rotation.z, targetRotation.z, 0.1); }); }); useEffect(() => { if (!groupRef.current) return; - getActiveUsersData(organization).then((data) => { - const filteredData = data.cameraDatas.filter( - (camera: any) => camera.userData.email !== email - ); + getActiveUsersData(organization) + .then((data) => { + const filteredData = data.cameraDatas.filter((camera: any) => camera.userData.email !== email); - if (filteredData.length > 0) { - loader.load(camModel, (gltf) => { - const newCams = filteredData.map((cam: any) => { - const newModel = gltf.scene.clone(); - newModel.uuid = cam.userData._id; - newModel.position.set( - cam.position.x, - cam.position.y, - cam.position.z - ); - newModel.rotation.set( - cam.rotation.x, - cam.rotation.y, - cam.rotation.z - ); - newModel.userData = cam.userData; - cam.userData.position = newModel.position; - cam.userData.rotation = newModel.rotation; - newModel.userData.target = cam.target; + if (filteredData.length > 0) { + loader.load(camModel, (gltf) => { + const newCams = filteredData.map((cam: any) => { + const newModel = gltf.scene.clone(); + newModel.uuid = cam.userData._id; + newModel.position.set(cam.position.x, cam.position.y, cam.position.z); + newModel.rotation.set(cam.rotation.x, cam.rotation.y, cam.rotation.z); + newModel.userData = cam.userData; + cam.userData.position = newModel.position; + cam.userData.rotation = newModel.rotation; + newModel.userData.target = cam.target; - return newModel; + return newModel; + }); + + const users = filteredData.map((cam: any) => cam.userData); + setActiveUsers((prev: any) => dedupeUsers([...prev, ...users])); + setCams((prev) => dedupeCams([...prev, ...newCams])); }); - - const users = filteredData.map((cam: any) => cam.userData); - setActiveUsers((prev: any) => dedupeUsers([...prev, ...users])); - setCams((prev) => dedupeCams([...prev, ...newCams])); - }); - } - }).catch(() => { - console.log('Error fetching active users data') - }); + } + }) + .catch(() => { + console.log("Error fetching active users data"); + }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -264,11 +204,7 @@ const CamModelsGroup = () => { key={cam.uuid} //eslint-disable-next-line object={cam} - visible={ - selectedUser?.name !== cam.userData.userName && - activeModule !== "visualization" && - !isPlaying - } + visible={selectedUser?.name !== cam.userData.userName && activeModule !== "visualization" && !isPlaying} > { textAlign: "center", fontFamily: "Arial, sans-serif", display: `${activeModule !== "visualization" ? "" : "none"}`, - opacity: `${selectedUser?.name !== cam.userData.userName && !isPlaying - ? 1 - : 0 - }`, + opacity: `${selectedUser?.name !== cam.userData.userName && !isPlaying ? 1 : 0}`, transition: "opacity .2s ease", }} position={[-0.015, 0, 0.7]} diff --git a/app/src/modules/collaboration/socket/builderResponses.tsx b/app/src/modules/collaboration/socket/builderResponses.tsx index 31de19f..eb277e9 100644 --- a/app/src/modules/collaboration/socket/builderResponses.tsx +++ b/app/src/modules/collaboration/socket/builderResponses.tsx @@ -3,144 +3,144 @@ import { useSocketStore } from "../../../store/builder/store"; import useAssetResponseHandler from "../../builder/asset/responseHandler/useAssetResponseHandler"; function BuilderResponses() { - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { addAssetToScene, removeAssetFromScene } = useAssetResponseHandler(); //#region Asset useEffect(() => { - if (!socket) return; + if (!builderSocket) return; - socket.on("v1:model-asset:response:add", (data: any) => { + builderSocket.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) => { + builderSocket.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"); + if (builderSocket) { + builderSocket.off("v1:model-asset:response:add"); + builderSocket.off("v1:model-asset:response:delete"); } }; - }, [socket]); + }, [builderSocket]); //#endregion //#region WallAsset useEffect(() => { - if (!socket) return; + if (!builderSocket) return; - socket.on("v1:wall-asset:response:add", (data: any) => { + builderSocket.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) => { + builderSocket.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"); + if (builderSocket) { + builderSocket.off("v1:wall-asset:response:add"); + builderSocket.off("v1:wall-asset:response:delete"); } }; - }, [socket]); + }, [builderSocket]); //#endregion //#region Wall useEffect(() => { - if (!socket) return; + if (!builderSocket) return; - socket.on("v1:model-Wall:response:add", (data: any) => { + builderSocket.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) => { + builderSocket.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"); + if (builderSocket) { + builderSocket.off("v1:model-Wall:response:add"); + builderSocket.off("v1:model-Wall:response:delete"); } }; - }, [socket]); + }, [builderSocket]); //#endregion //#region Floor useEffect(() => { - if (!socket) return; + if (!builderSocket) return; - socket.on("v1:model-Floor:response:add", (data: any) => { + builderSocket.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) => { + builderSocket.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"); + if (builderSocket) { + builderSocket.off("v1:model-Floor:response:add"); + builderSocket.off("v1:model-Floor:response:delete"); } }; - }, [socket]); + }, [builderSocket]); //#endregion //#region Aisle useEffect(() => { - if (!socket) return; + if (!builderSocket) return; - socket.on("v1:model-aisle:response:add", (data: any) => { + builderSocket.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) => { + builderSocket.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"); + if (builderSocket) { + builderSocket.off("v1:model-aisle:response:add"); + builderSocket.off("v1:model-aisle:response:delete"); } }; - }, [socket]); + }, [builderSocket]); //#endregion //#region Zone useEffect(() => { - if (!socket) return; + if (!builderSocket) return; - socket.on("v1:zone:response:updates", (data: any) => { + builderSocket.on("v1:zone:response:updates", (data: any) => { console.log("data: ", data); if (!data.message) return; if (data.message === "zone created successfully") { @@ -148,7 +148,7 @@ function BuilderResponses() { } }); - socket.on("v1:zone:response:delete", (data: any) => { + builderSocket.on("v1:zone:response:delete", (data: any) => { console.log("data: ", data); if (!data.message) return; if (data.message === "zone deleted created successfully") { @@ -156,12 +156,12 @@ function BuilderResponses() { }); return () => { - if (socket) { - socket.off("v1:zone:response:updates"); - socket.off("v1:zone:response:delete"); + if (builderSocket) { + builderSocket.off("v1:zone:response:updates"); + builderSocket.off("v1:zone:response:delete"); } }; - }, [socket]); + }, [builderSocket]); //#endregion return null; diff --git a/app/src/modules/collaboration/socket/userResponses.tsx b/app/src/modules/collaboration/socket/userResponses.tsx index ec08755..280627f 100644 --- a/app/src/modules/collaboration/socket/userResponses.tsx +++ b/app/src/modules/collaboration/socket/userResponses.tsx @@ -2,13 +2,13 @@ import { useEffect } from "react"; import { useSocketStore } from "../../../store/builder/store"; function UserResponses() { - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); //#region Camera useEffect(() => { - if (!socket) return; + if (!builderSocket) return; - socket.on("v1:camera:Response:update", (data: any) => { + builderSocket.on("v1:camera:Response:update", (data: any) => { if (!data.message) return; if (data.message === "Model created successfully") { } else if (data.message === "Updated successfully") { @@ -16,11 +16,11 @@ function UserResponses() { }); return () => { - if (socket) { - socket.off("v1:camera:Response:update"); + if (builderSocket) { + builderSocket.off("v1:camera:Response:update"); } }; - }, [socket]); + }, [builderSocket]); //#endregion return null; diff --git a/app/src/modules/scene/camera/functions/updateCameraPosition.ts b/app/src/modules/scene/camera/functions/updateCameraPosition.ts index b0cc67a..3c3224f 100644 --- a/app/src/modules/scene/camera/functions/updateCameraPosition.ts +++ b/app/src/modules/scene/camera/functions/updateCameraPosition.ts @@ -6,7 +6,7 @@ import { setCameraApi } from "../../../../services/factoryBuilder/camera/setCame export default function updateCamPosition( controls: React.RefObject, - socket: Socket, + builderSocket: Socket, position: THREE.Vector3, rotation: THREE.Euler, projectId?: string @@ -15,7 +15,7 @@ export default function updateCamPosition( if (!controls.current || !projectId) return; const target = controls.current.getTarget(new THREE.Vector3()); - if (!socket?.connected) { + if (!builderSocket?.connected) { // API setCameraApi( @@ -33,9 +33,9 @@ export default function updateCamPosition( position: position, target: new THREE.Vector3(target.x, 0, target.z), rotation: new THREE.Vector3(rotation.x, rotation.y, rotation.z), - socketId: socket.id, + socketId: builderSocket.id, projectId, }; - socket.emit("v1:Camera:set", camData); + builderSocket.emit("v1:Camera:set", camData); } } diff --git a/app/src/modules/scene/controls/controls.tsx b/app/src/modules/scene/controls/controls.tsx index c349112..e7aace6 100644 --- a/app/src/modules/scene/controls/controls.tsx +++ b/app/src/modules/scene/controls/controls.tsx @@ -29,7 +29,7 @@ export default function Controls() { const { toggleView } = useToggleView(); const { resetCamera, setResetCamera } = useResetCamera(); const { camType } = useSceneStore(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { projectId } = useParams(); const { userId, organization } = getUserData(); @@ -59,7 +59,7 @@ export default function Controls() { controlsRef.current?.setTarget(...CONSTANTS.threeDimension.defaultTarget); controlsRef.current?.rotateAzimuthTo(CONSTANTS.threeDimension.defaultAzimuth); - if (!socket?.connected) { + if (!builderSocket?.connected) { setCameraApi( projectId, new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition), @@ -73,10 +73,10 @@ export default function Controls() { position: new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition), target: new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget), rotation: new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation), - socketId: socket.id, + socketId: builderSocket.id, projectId, }; - socket.emit("v1:Camera:set", camData); + builderSocket.emit("v1:Camera:set", camData); } setResetCamera(false); @@ -90,10 +90,10 @@ export default function Controls() { let intervalId: NodeJS.Timeout | null = null; const handleRest = () => { - if (hasInteracted && controlsRef.current && state.camera.position && !toggleView && socket && camType === "perspective") { + if (hasInteracted && controlsRef.current && state.camera.position && !toggleView && builderSocket && camType === "perspective") { const position = state.camera.position; if (position.x === 0 && position.y === 0 && position.z === 0) return; - updateCamPosition(controlsRef, socket, position, state.camera.rotation, projectId); + updateCamPosition(controlsRef, builderSocket, position, state.camera.rotation, projectId); stopInterval(); } }; @@ -131,7 +131,7 @@ export default function Controls() { } stopInterval(); }; - }, [toggleView, state, socket, camType]); + }, [toggleView, state, builderSocket, camType]); return ( <> diff --git a/app/src/modules/scene/controls/selectionControls/selection2D/moveControls2D.tsx b/app/src/modules/scene/controls/selectionControls/selection2D/moveControls2D.tsx index 231ff1e..2724b10 100644 --- a/app/src/modules/scene/controls/selectionControls/selection2D/moveControls2D.tsx +++ b/app/src/modules/scene/controls/selectionControls/selection2D/moveControls2D.tsx @@ -23,7 +23,7 @@ function MoveControls2D({ movedObjects, setMovedObjects, pastedObjects, setPaste const { toggleView } = useToggleView(); const { activeModule } = useModuleStore(); const { selectedPoints, clearSelectedPoints } = useSelectedPoints(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { userId, organization } = getUserData(); const { projectId } = useParams(); const { aisleStore, wallStore, floorStore, zoneStore, undoRedo2DStore, wallAssetStore, versionStore } = useSceneContext(); @@ -108,7 +108,7 @@ function MoveControls2D({ movedObjects, setMovedObjects, pastedObjects, setPaste canvasElement.removeEventListener("pointerup", onPointerUp); canvasElement.removeEventListener("keydown", onKeyDown); }; - }, [camera, controls, scene, toggleView, selectedPoints, socket, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects, initial]); + }, [camera, controls, scene, toggleView, selectedPoints, builderSocket, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects, initial]); useEffect(() => { if (toolMode !== "move" || !toggleView) { @@ -254,14 +254,14 @@ function MoveControls2D({ movedObjects, setMovedObjects, pastedObjects, setPaste const updatedAisles = getAislesByPointId(point.pointUuid); if (updatedAisles.length > 0 && projectId) { updatedAisles.forEach((updatedAisle) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertAisleApi(updatedAisle.aisleUuid, updatedAisle.points, updatedAisle.type, projectId, selectedVersion?.versionId || ""); } else { // SOCKET - socket.emit("v1:model-aisle:add", { + builderSocket.emit("v1:model-aisle:add", { projectId, versionId: selectedVersion?.versionId || "", userId, @@ -315,14 +315,14 @@ function MoveControls2D({ movedObjects, setMovedObjects, pastedObjects, setPaste }); } - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || "", updatedWall); } else { // SOCKET - socket.emit("v1:model-Wall:add", { + builderSocket.emit("v1:model-Wall:add", { wallData: updatedWall, projectId, versionId: selectedVersion?.versionId || "", @@ -357,14 +357,14 @@ function MoveControls2D({ movedObjects, setMovedObjects, pastedObjects, setPaste const updatedFloors = getFloorsByPointId(point.pointUuid); if (updatedFloors?.length && projectId) { updatedFloors.forEach((updatedFloor) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || "", updatedFloor); } else { // SOCKET - socket.emit("v1:model-Floor:add", { + builderSocket.emit("v1:model-Floor:add", { floorData: updatedFloor, projectId, versionId: selectedVersion?.versionId || "", @@ -397,14 +397,14 @@ function MoveControls2D({ movedObjects, setMovedObjects, pastedObjects, setPaste const updatedZones = getZonesByPointId(point.pointUuid); if (updatedZones?.length && projectId) { updatedZones.forEach((updatedZone) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || "", updatedZone); } else { // SOCKET - socket.emit("v1:zone:add", { + builderSocket.emit("v1:zone:add", { zoneData: updatedZone, projectId, versionId: selectedVersion?.versionId || "", @@ -446,7 +446,7 @@ function MoveControls2D({ movedObjects, setMovedObjects, pastedObjects, setPaste rotation: updatedWallAsset.rotation, }); - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallAssetApi(projectId, selectedVersion?.versionId || "", updatedWallAsset); @@ -461,7 +461,7 @@ function MoveControls2D({ movedObjects, setMovedObjects, pastedObjects, setPaste organization: organization, }; - socket.emit("v1:wall-asset:add", data); + builderSocket.emit("v1:wall-asset:add", data); } } }); diff --git a/app/src/modules/scene/controls/selectionControls/selection2D/selectionControls2D.tsx b/app/src/modules/scene/controls/selectionControls/selection2D/selectionControls2D.tsx index 72a29f9..1419f5f 100644 --- a/app/src/modules/scene/controls/selectionControls/selection2D/selectionControls2D.tsx +++ b/app/src/modules/scene/controls/selectionControls/selection2D/selectionControls2D.tsx @@ -31,7 +31,7 @@ const SelectionControls2D: React.FC = () => { const [pastedObjects, setPastedObjects] = useState([]); const [duplicatedObjects, setDuplicatedObjects] = useState([]); const { activeModule } = useModuleStore(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const selectionBox = useMemo(() => new SelectionBox(camera, scene), [camera, scene]); const { toolMode } = useToolMode(); const { projectId } = useParams(); @@ -165,7 +165,7 @@ const SelectionControls2D: React.FC = () => { helper.enabled = false; helper.dispose(); }; - }, [camera, controls, scene, toggleView, selectedPoints, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, rotatedObjects, toolMode, hoveredLine, hoveredPoint]); + }, [camera, controls, scene, toggleView, selectedPoints, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, builderSocket, rotatedObjects, toolMode, hoveredLine, hoveredPoint]); useEffect(() => { if (toolMode !== "move" || !toggleView) { @@ -236,7 +236,7 @@ const SelectionControls2D: React.FC = () => { if (removedAisles.length > 0) { removedAisles.forEach((aisle) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteAisleApi(aisle.aisleUuid, projectId, selectedVersion?.versionId || ""); @@ -251,7 +251,7 @@ const SelectionControls2D: React.FC = () => { aisleUuid: aisle.aisleUuid, }; - socket.emit("v1:model-aisle:delete", data); + builderSocket.emit("v1:model-aisle:delete", data); } } }); @@ -275,7 +275,7 @@ const SelectionControls2D: React.FC = () => { if (projectId && asset) { removeWallAsset(asset.modelUuid); - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteWallAssetApi(projectId, selectedVersion?.versionId || "", asset.modelUuid, asset.wallUuid); @@ -291,13 +291,13 @@ const SelectionControls2D: React.FC = () => { wallUuid: asset.wallUuid, }; - socket.emit("v1:wall-asset:delete", data); + builderSocket.emit("v1:wall-asset:delete", data); } } }); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteWallApi(projectId, selectedVersion?.versionId || "", wall.wallUuid); @@ -312,7 +312,7 @@ const SelectionControls2D: React.FC = () => { organization: organization, }; - socket.emit("v1:model-Wall:delete", data); + builderSocket.emit("v1:model-Wall:delete", data); } } }); @@ -332,7 +332,7 @@ const SelectionControls2D: React.FC = () => { if (removedFloors.length > 0) { removedFloors.forEach((floor) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteFloorApi(projectId, selectedVersion?.versionId || "", floor.floorUuid); @@ -347,7 +347,7 @@ const SelectionControls2D: React.FC = () => { organization: organization, }; - socket.emit("v1:model-Floor:delete", data); + builderSocket.emit("v1:model-Floor:delete", data); } } }); @@ -363,7 +363,7 @@ const SelectionControls2D: React.FC = () => { if (updatedFloors.length > 0) { updatedFloors.forEach((floor) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || "", floor); @@ -378,7 +378,7 @@ const SelectionControls2D: React.FC = () => { organization: organization, }; - socket.emit("v1:model-Floor:add", data); + builderSocket.emit("v1:model-Floor:add", data); } } }); @@ -399,7 +399,7 @@ const SelectionControls2D: React.FC = () => { if (removedZones.length > 0) { removedZones.forEach((zone) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteZoneApi(projectId, selectedVersion?.versionId || "", zone.zoneUuid); @@ -414,7 +414,7 @@ const SelectionControls2D: React.FC = () => { organization: organization, }; - socket.emit("v1:zone:delete", data); + builderSocket.emit("v1:zone:delete", data); } } }); @@ -430,7 +430,7 @@ const SelectionControls2D: React.FC = () => { if (updatedZones.length > 0) { updatedZones.forEach((zone) => { if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || "", zone); @@ -445,7 +445,7 @@ const SelectionControls2D: React.FC = () => { organization: organization, }; - socket.emit("v1:zone:add", data); + builderSocket.emit("v1:zone:add", data); } } }); diff --git a/app/src/modules/scene/controls/selectionControls/selection3D/copyPasteControls3D.tsx b/app/src/modules/scene/controls/selectionControls/selection3D/copyPasteControls3D.tsx index 2181a24..9dcd492 100644 --- a/app/src/modules/scene/controls/selectionControls/selection3D/copyPasteControls3D.tsx +++ b/app/src/modules/scene/controls/selectionControls/selection3D/copyPasteControls3D.tsx @@ -15,7 +15,7 @@ const CopyPasteControls3D = () => { const { camera, controls, gl, scene, pointer, raycaster } = useThree(); const { toggleView } = useToggleView(); const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { assetStore, eventStore, undoRedo3DStore, versionStore } = useSceneContext(); const { push3D } = undoRedo3DStore(); const { addEvent } = eventStore(); @@ -121,7 +121,7 @@ const CopyPasteControls3D = () => { canvasElement.removeEventListener("pointerup", onPointerUp); canvasElement.removeEventListener("keydown", onKeyDown); }; - }, [assets, camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, movedObjects, socket, rotatedObjects]); + }, [assets, camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, movedObjects, builderSocket, rotatedObjects]); useFrame(() => { if (!isPasting || pastedObjects.length === 0) return; @@ -476,14 +476,14 @@ const CopyPasteControls3D = () => { rotation: { x: pastedAsset.rotation.x, y: pastedAsset.rotation.y, z: pastedAsset.rotation.z }, isLocked: false, isVisible: true, - socketId: socket?.id, + socketId: builderSocket?.id, eventData: eventData, versionId: selectedVersion?.versionId || "", userId, projectId, }; - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST setAssetsApi({ @@ -501,7 +501,7 @@ const CopyPasteControls3D = () => { } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } const asset: Asset = { @@ -528,13 +528,13 @@ const CopyPasteControls3D = () => { rotation: { x: pastedAsset.rotation.x, y: pastedAsset.rotation.y, z: pastedAsset.rotation.z }, isLocked: false, isVisible: true, - socketId: socket?.id, + socketId: builderSocket?.id, versionId: selectedVersion?.versionId || "", projectId, userId, }; - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST setAssetsApi({ @@ -551,7 +551,7 @@ const CopyPasteControls3D = () => { } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } const asset: Asset = { diff --git a/app/src/modules/scene/controls/selectionControls/selection3D/duplicationControls3D.tsx b/app/src/modules/scene/controls/selectionControls/selection3D/duplicationControls3D.tsx index a6d0e65..c27dfa1 100644 --- a/app/src/modules/scene/controls/selectionControls/selection3D/duplicationControls3D.tsx +++ b/app/src/modules/scene/controls/selectionControls/selection3D/duplicationControls3D.tsx @@ -16,7 +16,7 @@ const DuplicationControls3D = () => { const { camera, controls, gl, scene, pointer, raycaster } = useThree(); const { toggleView } = useToggleView(); const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { assetStore, eventStore, undoRedo3DStore, versionStore } = useSceneContext(); const { push3D } = undoRedo3DStore(); const { addEvent } = eventStore(); @@ -156,7 +156,7 @@ const DuplicationControls3D = () => { canvasElement.removeEventListener("keydown", onKeyDown); canvasElement.addEventListener("keyup", onKeyUp); }; - }, [assets, camera, controls, scene, toggleView, selectedAssets, duplicatedObjects, movedObjects, socket, rotatedObjects, keyEvent]); + }, [assets, camera, controls, scene, toggleView, selectedAssets, duplicatedObjects, movedObjects, builderSocket, rotatedObjects, keyEvent]); useFrame(() => { if (!isDuplicating || duplicatedObjects.length === 0) return; @@ -540,14 +540,14 @@ const DuplicationControls3D = () => { rotation: { x: duplicatedAsset.rotation.x, y: duplicatedAsset.rotation.y, z: duplicatedAsset.rotation.z }, isLocked: false, isVisible: true, - socketId: socket?.id, + socketId: builderSocket?.id, eventData: eventData, versionId: selectedVersion?.versionId || "", userId, projectId, }; - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST setAssetsApi({ @@ -565,7 +565,7 @@ const DuplicationControls3D = () => { } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } const asset: Asset = { @@ -592,13 +592,13 @@ const DuplicationControls3D = () => { rotation: { x: duplicatedAsset.rotation.x, y: duplicatedAsset.rotation.y, z: duplicatedAsset.rotation.z }, isLocked: false, isVisible: true, - socketId: socket?.id, + socketId: builderSocket?.id, versionId: selectedVersion?.versionId || "", projectId, userId, }; - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST setAssetsApi({ @@ -615,7 +615,7 @@ const DuplicationControls3D = () => { } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } const asset: Asset = { modelUuid: data.modelUuid, diff --git a/app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx b/app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx index f8a8f12..0cf52b8 100644 --- a/app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx +++ b/app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx @@ -21,7 +21,7 @@ function MoveControls3D({ boundingBoxRef }: any) { const { toggleView } = useToggleView(); const { toolMode } = useToolMode(); const { activeModule } = useModuleStore(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { userId, organization } = getUserData(); const { projectId } = useParams(); const { assetStore, eventStore, productStore, undoRedo3DStore, versionStore } = useSceneContext(); @@ -169,7 +169,7 @@ function MoveControls3D({ boundingBoxRef }: any) { canvasElement?.removeEventListener("keyup", onKeyUp); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [camera, controls, scene, toggleView, toolMode, selectedAssets, socket, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects, keyEvent, initialStates, productStore]); + }, [camera, controls, scene, toggleView, toolMode, selectedAssets, builderSocket, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects, keyEvent, initialStates, productStore]); useEffect(() => { if (activeModule !== "builder" || toolMode !== "cursor" || toggleView) { @@ -379,13 +379,13 @@ function MoveControls3D({ boundingBoxRef }: any) { rotation: { x: movedAsset.rotation.x, y: movedAsset.rotation.y, z: movedAsset.rotation.z }, isLocked: false, isVisible: true, - socketId: socket?.id, + socketId: builderSocket?.id, versionId: selectedVersion?.versionId || "", projectId, userId, }; - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST setAssetsApi({ @@ -402,7 +402,7 @@ function MoveControls3D({ boundingBoxRef }: any) { } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } } }); diff --git a/app/src/modules/scene/controls/selectionControls/selection3D/rotateControls3D.tsx b/app/src/modules/scene/controls/selectionControls/selection3D/rotateControls3D.tsx index 468616f..59ad283 100644 --- a/app/src/modules/scene/controls/selectionControls/selection3D/rotateControls3D.tsx +++ b/app/src/modules/scene/controls/selectionControls/selection3D/rotateControls3D.tsx @@ -18,7 +18,7 @@ function RotateControls3D() { const { toggleView } = useToggleView(); const { toolMode } = useToolMode(); const { activeModule } = useModuleStore(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { userId, organization } = getUserData(); const { projectId } = useParams(); const { assetStore, eventStore, productStore, undoRedo3DStore, versionStore } = useSceneContext(); @@ -336,13 +336,13 @@ function RotateControls3D() { rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, isVisible: true, - socketId: socket?.id, + socketId: builderSocket?.id, versionId: selectedVersion?.versionId || "", projectId, userId, }; - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST setAssetsApi({ @@ -359,7 +359,7 @@ function RotateControls3D() { } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } } }); @@ -388,7 +388,7 @@ function RotateControls3D() { setIsRotating(false); setIsIndividualRotating(false); clearSelection(); - }, [rotatedObjects, eventStore, productStore, updateBackend, projectId, updateAsset, organization, socket, selectedVersion, userId, initialPositions, initialRotations]); + }, [rotatedObjects, eventStore, productStore, updateBackend, projectId, updateAsset, organization, builderSocket, selectedVersion, userId, initialPositions, initialRotations]); const clearSelection = () => { setPastedObjects([]); diff --git a/app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx b/app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx index 24abac8..2df6b40 100644 --- a/app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx +++ b/app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx @@ -25,7 +25,7 @@ const SelectionControls3D: React.FC = () => { const { activeModule } = useModuleStore(); const { toolMode } = useToolMode(); const boundingBoxRef = useRef(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { contextAction, setContextAction } = useContextActionStore(); const { assetStore, eventStore, productStore, undoRedo3DStore, versionStore } = useSceneContext(); const { selectedDecal, selectedWall, selectedAisle, selectedFloor, selectedFloorAsset, selectedWallAsset } = useBuilderStore(); @@ -203,7 +203,7 @@ const SelectionControls3D: React.FC = () => { helper.dispose(); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, rotatedObjects, activeModule, toolMode, selectedDecal, selectedWall, selectedAisle, selectedFloor, selectedFloorAsset, selectedWallAsset, productStore]); + }, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, builderSocket, rotatedObjects, activeModule, toolMode, selectedDecal, selectedWall, selectedAisle, selectedFloor, selectedFloorAsset, selectedWallAsset, productStore]); useEffect(() => { if (activeModule !== "builder" || (toolMode !== "cursor" && toolMode !== "Move-Asset" && toolMode !== "Rotate-Asset") || toggleView) { @@ -262,7 +262,7 @@ const SelectionControls3D: React.FC = () => { const asset = getAssetById(selectedMesh.userData.modelUuid); if (!asset) return; - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST deleteFloorAssetApi({ @@ -278,13 +278,13 @@ const SelectionControls3D: React.FC = () => { organization, modelUuid: selectedMesh.userData.modelUuid, modelName: selectedMesh.userData.modelName, - socketId: socket.id, + socketId: builderSocket.id, projectId, versionId: selectedVersion?.versionId || "", userId, }; - socket.emit("v1:model-asset:delete", data); + builderSocket.emit("v1:model-asset:delete", data); } eventStore.getState().removeEvent(selectedMesh.uuid); diff --git a/app/src/modules/scene/controls/selectionControls/selection3D/transformControls3D.tsx b/app/src/modules/scene/controls/selectionControls/selection3D/transformControls3D.tsx index 6b29879..39bef4a 100644 --- a/app/src/modules/scene/controls/selectionControls/selection3D/transformControls3D.tsx +++ b/app/src/modules/scene/controls/selectionControls/selection3D/transformControls3D.tsx @@ -17,7 +17,7 @@ function TransformControls3D() { const transformControlsRef = useRef(null); const [visible, setVisible] = useState(false); const [keyEvent, setKeyEvent] = useState<"Ctrl" | "Shift" | "Ctrl+Shift" | "">(""); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { assetStore, eventStore, productStore, undoRedo3DStore, versionStore } = useSceneContext(); const { push3D, subscribeUndoRedo } = undoRedo3DStore(); const { updateAsset, getAssetById, selectedAssets, setSelectedAssets } = assetStore(); @@ -111,7 +111,7 @@ function TransformControls3D() { } } - if (!socket?.connected) { + if (!builderSocket?.connected) { // API setAssetsApi({ @@ -137,16 +137,16 @@ function TransformControls3D() { rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z }, isLocked: false, isVisible: true, - socketId: socket.id, + socketId: builderSocket.id, versionId: selectedVersion?.versionId || "", userId, projectId, }; - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } }); - }, [selectedAssets, setSelectedAssets, getAssetById, updateAsset, eventStore, productStore, updateBackend, projectId, organization, socket, selectedVersion, userId, push3D]); + }, [selectedAssets, setSelectedAssets, getAssetById, updateAsset, eventStore, productStore, updateBackend, projectId, organization, builderSocket, selectedVersion, userId, push3D]); useEffect(() => { const temp = tempObjectRef.current; diff --git a/app/src/modules/scene/controls/transformControls/transformControls.tsx b/app/src/modules/scene/controls/transformControls/transformControls.tsx index ba85c00..2b5b842 100644 --- a/app/src/modules/scene/controls/transformControls/transformControls.tsx +++ b/app/src/modules/scene/controls/transformControls/transformControls.tsx @@ -20,7 +20,7 @@ export default function TransformControl() { const { setObjectPosition } = useObjectPosition(); const { setObjectRotation } = useObjectRotation(); const { activeTool } = useActiveTool(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { assetStore, eventStore, productStore, undoRedo3DStore, versionStore } = useSceneContext(); const { push3D } = undoRedo3DStore(); const { updateAsset, getAssetById } = assetStore(); @@ -89,7 +89,7 @@ export default function TransformControl() { rotation: [selectedFloorAsset.rotation.x, selectedFloorAsset.rotation.y, selectedFloorAsset.rotation.z] as [number, number, number], }); - if (!socket?.connected) { + if (!builderSocket?.connected) { // API setAssetsApi({ @@ -115,13 +115,13 @@ export default function TransformControl() { rotation: { x: selectedFloorAsset.rotation.x, y: selectedFloorAsset.rotation.y, z: selectedFloorAsset.rotation.z }, isLocked: false, isVisible: true, - socketId: socket.id, + socketId: builderSocket.id, versionId: selectedVersion?.versionId || "", userId, projectId, }; - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } push3D({ diff --git a/app/src/modules/scene/controls/undoRedoControls/handlers/use2DRedoHandler.ts b/app/src/modules/scene/controls/undoRedoControls/handlers/use2DRedoHandler.ts index 1cbf022..6d39c5d 100644 --- a/app/src/modules/scene/controls/undoRedoControls/handlers/use2DRedoHandler.ts +++ b/app/src/modules/scene/controls/undoRedoControls/handlers/use2DRedoHandler.ts @@ -25,7 +25,7 @@ function use2DRedoHandler() { const { selectedVersion } = versionStore(); const { userId, organization } = getUserData(); const { projectId } = useParams(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const handleRedo = () => { const redoData = peekRedo2D(); @@ -98,7 +98,7 @@ function use2DRedoHandler() { const createWallFromBackend = (wallData: Wall) => { addWall(wallData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || '', wallData); @@ -114,7 +114,7 @@ function use2DRedoHandler() { organization: organization } - socket.emit('v1:model-Wall:add', data); + builderSocket.emit('v1:model-Wall:add', data); } } }; @@ -122,7 +122,7 @@ function use2DRedoHandler() { const removeWallFromBackend = (wallUuid: string) => { removeWall(wallUuid); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteWallApi(projectId, selectedVersion?.versionId || '', wallUuid); @@ -138,7 +138,7 @@ function use2DRedoHandler() { organization: organization } - socket.emit('v1:model-Wall:delete', data); + builderSocket.emit('v1:model-Wall:delete', data); } } }; @@ -146,7 +146,7 @@ function use2DRedoHandler() { const updateWallFromBackend = (wallUuid: string, updatedData: Wall) => { updateWall(wallUuid, updatedData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || '', updatedData); @@ -162,7 +162,7 @@ function use2DRedoHandler() { organization: organization } - socket.emit('v1:model-Wall:add', data); + builderSocket.emit('v1:model-Wall:add', data); } } }; @@ -170,7 +170,7 @@ function use2DRedoHandler() { const createFloorFromBackend = (floorData: Floor) => { addFloor(floorData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || '', floorData); @@ -186,7 +186,7 @@ function use2DRedoHandler() { organization: organization } - socket.emit('v1:model-Floor:add', data); + builderSocket.emit('v1:model-Floor:add', data); } } }; @@ -194,7 +194,7 @@ function use2DRedoHandler() { const removeFloorFromBackend = (floorUuid: string) => { removeFloor(floorUuid); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteFloorApi(projectId, selectedVersion?.versionId || '', floorUuid); @@ -210,7 +210,7 @@ function use2DRedoHandler() { organization: organization } - socket.emit('v1:model-Floor:delete', data); + builderSocket.emit('v1:model-Floor:delete', data); } } }; @@ -218,7 +218,7 @@ function use2DRedoHandler() { const updateFloorFromBackend = (floorUuid: string, updatedData: Floor) => { updateFloor(floorUuid, updatedData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || '', updatedData); @@ -234,7 +234,7 @@ function use2DRedoHandler() { organization: organization } - socket.emit('v1:model-Floor:add', data); + builderSocket.emit('v1:model-Floor:add', data); } } }; @@ -242,7 +242,7 @@ function use2DRedoHandler() { const createZoneFromBackend = (zoneData: Zone) => { addZone(zoneData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || '', zoneData); @@ -258,7 +258,7 @@ function use2DRedoHandler() { organization: organization } - socket.emit('v1:zone:add', data); + builderSocket.emit('v1:zone:add', data); } } }; @@ -266,7 +266,7 @@ function use2DRedoHandler() { const removeZoneFromBackend = (zoneUuid: string) => { removeZone(zoneUuid); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteZoneApi(projectId, selectedVersion?.versionId || '', zoneUuid); @@ -282,7 +282,7 @@ function use2DRedoHandler() { organization }; - socket.emit('v1:zone:delete', data); + builderSocket.emit('v1:zone:delete', data); } } }; @@ -290,7 +290,7 @@ function use2DRedoHandler() { const updateZoneFromBackend = (zoneUuid: string, updatedData: Zone) => { updateZone(zoneUuid, updatedData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || '', updatedData); @@ -306,7 +306,7 @@ function use2DRedoHandler() { organization }; - socket.emit('v1:zone:add', data); + builderSocket.emit('v1:zone:add', data); } } }; @@ -314,7 +314,7 @@ function use2DRedoHandler() { const createAisleFromBackend = (aisleData: Aisle) => { addAisle(aisleData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertAisleApi(aisleData.aisleUuid, aisleData.points, aisleData.type, projectId, selectedVersion?.versionId || ''); @@ -330,7 +330,7 @@ function use2DRedoHandler() { organization }; - socket.emit('v1:model-aisle:add', data); + builderSocket.emit('v1:model-aisle:add', data); } } }; @@ -338,7 +338,7 @@ function use2DRedoHandler() { const removeAisleFromBackend = (aisleUuid: string) => { removeAisle(aisleUuid); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteAisleApi(projectId, selectedVersion?.versionId || '', aisleUuid); @@ -354,7 +354,7 @@ function use2DRedoHandler() { organization }; - socket.emit('v1:model-aisle:delete', data); + builderSocket.emit('v1:model-aisle:delete', data); } } }; @@ -362,7 +362,7 @@ function use2DRedoHandler() { const updateAisleFromBackend = (aisleUuid: string, updatedData: Aisle) => { updateAisle(aisleUuid, updatedData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertAisleApi(updatedData.aisleUuid, updatedData.points, updatedData.type, projectId, selectedVersion?.versionId || ''); @@ -378,7 +378,7 @@ function use2DRedoHandler() { organization }; - socket.emit('v1:model-aisle:add', data); + builderSocket.emit('v1:model-aisle:add', data); } } }; diff --git a/app/src/modules/scene/controls/undoRedoControls/handlers/use2DUndoHandler.ts b/app/src/modules/scene/controls/undoRedoControls/handlers/use2DUndoHandler.ts index 72760eb..185d0ad 100644 --- a/app/src/modules/scene/controls/undoRedoControls/handlers/use2DUndoHandler.ts +++ b/app/src/modules/scene/controls/undoRedoControls/handlers/use2DUndoHandler.ts @@ -25,7 +25,7 @@ function use2DUndoHandler() { const { selectedVersion } = versionStore(); const { userId, organization } = getUserData(); const { projectId } = useParams(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const handleUndo = () => { const unDoData = peekUndo2D(); @@ -98,7 +98,7 @@ function use2DUndoHandler() { const createWallToBackend = (wallData: Wall) => { addWall(wallData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || '', wallData); @@ -114,7 +114,7 @@ function use2DUndoHandler() { organization: organization } - socket.emit('v1:model-Wall:add', data); + builderSocket.emit('v1:model-Wall:add', data); } } }; @@ -122,7 +122,7 @@ function use2DUndoHandler() { const removeWallToBackend = (wallUuid: string) => { removeWall(wallUuid); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteWallApi(projectId, selectedVersion?.versionId || '', wallUuid); @@ -138,7 +138,7 @@ function use2DUndoHandler() { organization: organization } - socket.emit('v1:model-Wall:delete', data); + builderSocket.emit('v1:model-Wall:delete', data); } } }; @@ -146,7 +146,7 @@ function use2DUndoHandler() { const updateWallToBackend = (wallUuid: string, updatedData: Wall) => { updateWall(wallUuid, updatedData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertWallApi(projectId, selectedVersion?.versionId || '', updatedData); @@ -162,7 +162,7 @@ function use2DUndoHandler() { organization: organization } - socket.emit('v1:model-Wall:add', data); + builderSocket.emit('v1:model-Wall:add', data); } } }; @@ -170,7 +170,7 @@ function use2DUndoHandler() { const createFloorToBackend = (floorData: Floor) => { addFloor(floorData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || '', floorData); @@ -186,7 +186,7 @@ function use2DUndoHandler() { organization: organization } - socket.emit('v1:model-Floor:add', data); + builderSocket.emit('v1:model-Floor:add', data); } } }; @@ -194,7 +194,7 @@ function use2DUndoHandler() { const removeFloorToBackend = (floorUuid: string) => { removeFloor(floorUuid); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteFloorApi(projectId, selectedVersion?.versionId || '', floorUuid); @@ -210,7 +210,7 @@ function use2DUndoHandler() { organization: organization } - socket.emit('v1:model-Floor:delete', data); + builderSocket.emit('v1:model-Floor:delete', data); } } }; @@ -218,7 +218,7 @@ function use2DUndoHandler() { const updateFloorToBackend = (floorUuid: string, updatedData: Floor) => { updateFloor(floorUuid, updatedData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertFloorApi(projectId, selectedVersion?.versionId || '', updatedData); @@ -234,7 +234,7 @@ function use2DUndoHandler() { organization: organization } - socket.emit('v1:model-Floor:add', data); + builderSocket.emit('v1:model-Floor:add', data); } } }; @@ -242,7 +242,7 @@ function use2DUndoHandler() { const createZoneToBackend = (zoneData: Zone) => { addZone(zoneData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || '', zoneData); @@ -258,7 +258,7 @@ function use2DUndoHandler() { organization: organization } - socket.emit('v1:zone:add', data); + builderSocket.emit('v1:zone:add', data); } } }; @@ -266,7 +266,7 @@ function use2DUndoHandler() { const removeZoneToBackend = (zoneUuid: string) => { removeZone(zoneUuid); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteZoneApi(projectId, selectedVersion?.versionId || '', zoneUuid); @@ -282,7 +282,7 @@ function use2DUndoHandler() { organization }; - socket.emit('v1:zone:delete', data); + builderSocket.emit('v1:zone:delete', data); } } }; @@ -290,7 +290,7 @@ function use2DUndoHandler() { const updateZoneToBackend = (zoneUuid: string, updatedData: Zone) => { updateZone(zoneUuid, updatedData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertZoneApi(projectId, selectedVersion?.versionId || '', updatedData); @@ -306,7 +306,7 @@ function use2DUndoHandler() { organization }; - socket.emit('v1:zone:add', data); + builderSocket.emit('v1:zone:add', data); } } }; @@ -314,7 +314,7 @@ function use2DUndoHandler() { const createAisleToBackend = (aisleData: Aisle) => { addAisle(aisleData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertAisleApi(aisleData.aisleUuid, aisleData.points, aisleData.type, projectId, selectedVersion?.versionId || ''); @@ -330,7 +330,7 @@ function use2DUndoHandler() { organization }; - socket.emit('v1:model-aisle:add', data); + builderSocket.emit('v1:model-aisle:add', data); } } }; @@ -338,7 +338,7 @@ function use2DUndoHandler() { const removeAisleToBackend = (aisleUuid: string) => { removeAisle(aisleUuid); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API deleteAisleApi(projectId, selectedVersion?.versionId || '', aisleUuid); @@ -354,7 +354,7 @@ function use2DUndoHandler() { organization }; - socket.emit('v1:model-aisle:delete', data); + builderSocket.emit('v1:model-aisle:delete', data); } } }; @@ -362,7 +362,7 @@ function use2DUndoHandler() { const updateAisleToBackend = (aisleUuid: string, updatedData: Aisle) => { updateAisle(aisleUuid, updatedData); if (projectId) { - if (!socket?.connected) { + if (!builderSocket?.connected) { // API upsertAisleApi(updatedData.aisleUuid, updatedData.points, updatedData.type, projectId, selectedVersion?.versionId || ''); @@ -378,7 +378,7 @@ function use2DUndoHandler() { organization }; - socket.emit('v1:model-aisle:add', data); + builderSocket.emit('v1:model-aisle:add', data); } } }; diff --git a/app/src/modules/scene/controls/undoRedoControls/handlers/use3DRedoHandler.ts b/app/src/modules/scene/controls/undoRedoControls/handlers/use3DRedoHandler.ts index dbe07a3..3070bb9 100644 --- a/app/src/modules/scene/controls/undoRedoControls/handlers/use3DRedoHandler.ts +++ b/app/src/modules/scene/controls/undoRedoControls/handlers/use3DRedoHandler.ts @@ -17,7 +17,7 @@ function use3DRedoHandler() { const { selectedVersion } = versionStore(); const { userId, organization } = getUserData(); const { projectId } = useParams(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const updateBackend = (productName: string, productUuid: string, projectId: string, eventData: EventsSchema) => { upsertProductOrEventApi({ @@ -145,7 +145,7 @@ function use3DRedoHandler() { isLocked: false, isVisible: true, eventData: {}, - socketId: socket?.id, + socketId: builderSocket?.id, versionId: selectedVersion?.versionId || "", projectId, userId, @@ -156,7 +156,7 @@ function use3DRedoHandler() { addEvent(assetData.eventData as EventsSchema); } - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST setAssetsApi({ @@ -174,13 +174,13 @@ function use3DRedoHandler() { } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } } }; const deleteAssetToBackend = (assetData: Asset) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST deleteFloorAssetApi({ @@ -196,13 +196,13 @@ function use3DRedoHandler() { organization, modelUuid: assetData.modelUuid, modelName: assetData.modelName, - socketId: socket.id, + socketId: builderSocket.id, userId, versionId: selectedVersion?.versionId || "", projectId, }; - socket.emit("v1:model-asset:delete", data); + builderSocket.emit("v1:model-asset:delete", data); } removeEvent(assetData.modelUuid); @@ -227,13 +227,13 @@ function use3DRedoHandler() { rotation: { x: updatedData.rotation[0], y: updatedData.rotation[1], z: updatedData.rotation[2] }, isLocked: false, isVisible: true, - socketId: socket?.id, + socketId: builderSocket?.id, versionId: selectedVersion?.versionId || "", projectId, userId, }; - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST setAssetsApi({ @@ -250,7 +250,7 @@ function use3DRedoHandler() { } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } } }; @@ -268,7 +268,7 @@ function use3DRedoHandler() { isLocked: false, isVisible: true, eventData: {}, - socketId: socket?.id, + socketId: builderSocket?.id, versionId: selectedVersion?.versionId || "", projectId, userId, @@ -279,7 +279,7 @@ function use3DRedoHandler() { addEvent(assetData.eventData as EventsSchema); } - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST setAssetsApi({ @@ -297,7 +297,7 @@ function use3DRedoHandler() { } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } } }; @@ -315,7 +315,7 @@ function use3DRedoHandler() { isLocked: false, isVisible: true, eventData: {}, - socketId: socket?.id, + socketId: builderSocket?.id, versionId: selectedVersion?.versionId || "", projectId, userId, @@ -326,7 +326,7 @@ function use3DRedoHandler() { addEvent(assetData.eventData as EventsSchema); } - if (!socket?.connected) { + if (!builderSocket?.connected) { //REST setAssetsApi({ @@ -344,7 +344,7 @@ function use3DRedoHandler() { } else { //SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } } }; diff --git a/app/src/modules/scene/controls/undoRedoControls/handlers/use3DUndoHandler.ts b/app/src/modules/scene/controls/undoRedoControls/handlers/use3DUndoHandler.ts index 3fea0ee..81d6f92 100644 --- a/app/src/modules/scene/controls/undoRedoControls/handlers/use3DUndoHandler.ts +++ b/app/src/modules/scene/controls/undoRedoControls/handlers/use3DUndoHandler.ts @@ -17,7 +17,7 @@ function use3DUndoHandler() { const { selectedVersion } = versionStore(); const { userId, organization } = getUserData(); const { projectId } = useParams(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const updateBackend = (productName: string, productUuid: string, projectId: string, eventData: EventsSchema) => { upsertProductOrEventApi({ @@ -144,7 +144,7 @@ function use3DUndoHandler() { isLocked: false, isVisible: true, eventData: {}, - socketId: socket?.id, + socketId: builderSocket?.id, versionId: selectedVersion?.versionId || "", projectId, userId, @@ -155,7 +155,7 @@ function use3DUndoHandler() { addEvent(assetData.eventData as EventsSchema); } - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST setAssetsApi({ @@ -173,13 +173,13 @@ function use3DUndoHandler() { } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } } }; const deleteAssetToBackend = (assetData: Asset) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST deleteFloorAssetApi({ @@ -195,13 +195,13 @@ function use3DUndoHandler() { organization, modelUuid: assetData.modelUuid, modelName: assetData.modelName, - socketId: socket.id, + socketId: builderSocket.id, userId, versionId: selectedVersion?.versionId || "", projectId, }; - socket.emit("v1:model-asset:delete", data); + builderSocket.emit("v1:model-asset:delete", data); } removeEvent(assetData.modelUuid); @@ -226,13 +226,13 @@ function use3DUndoHandler() { rotation: { x: updatedData.rotation[0], y: updatedData.rotation[1], z: updatedData.rotation[2] }, isLocked: false, isVisible: true, - socketId: socket?.id, + socketId: builderSocket?.id, versionId: selectedVersion?.versionId || "", projectId, userId, }; - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST setAssetsApi({ @@ -249,13 +249,13 @@ function use3DUndoHandler() { } else { // SOCKET - socket.emit("v1:model-asset:add", data); + builderSocket.emit("v1:model-asset:add", data); } } }; const copyAssetToBackend = (assetData: Asset) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST deleteFloorAssetApi({ @@ -271,13 +271,13 @@ function use3DUndoHandler() { organization, modelUuid: assetData.modelUuid, modelName: assetData.modelName, - socketId: socket.id, + socketId: builderSocket.id, userId, versionId: selectedVersion?.versionId || "", projectId, }; - socket.emit("v1:model-asset:delete", data); + builderSocket.emit("v1:model-asset:delete", data); } removeEvent(assetData.modelUuid); @@ -291,7 +291,7 @@ function use3DUndoHandler() { }; const duplicateAssetToBackend = (assetData: Asset) => { - if (!socket?.connected) { + if (!builderSocket?.connected) { // REST deleteFloorAssetApi({ @@ -307,13 +307,13 @@ function use3DUndoHandler() { organization, modelUuid: assetData.modelUuid, modelName: assetData.modelName, - socketId: socket.id, + socketId: builderSocket.id, userId, versionId: selectedVersion?.versionId || "", projectId, }; - socket.emit("v1:model-asset:delete", data); + builderSocket.emit("v1:model-asset:delete", data); } removeEvent(assetData.modelUuid); diff --git a/app/src/modules/scene/controls/undoRedoControls/undoRedo2D/undoRedo2DControls.tsx b/app/src/modules/scene/controls/undoRedoControls/undoRedo2D/undoRedo2DControls.tsx index 4f1e0d0..7fb5336 100644 --- a/app/src/modules/scene/controls/undoRedoControls/undoRedo2D/undoRedo2DControls.tsx +++ b/app/src/modules/scene/controls/undoRedoControls/undoRedo2D/undoRedo2DControls.tsx @@ -12,7 +12,7 @@ function UndoRedo2DControls() { const { toggleView } = useToggleView(); const { handleUndo } = use2DUndoHandler(); const { handleRedo } = use2DRedoHandler(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { selectedVersion } = versionStore(); useEffect(() => { @@ -39,7 +39,7 @@ function UndoRedo2DControls() { return () => { window.removeEventListener("keydown", handleKeyDown); }; - }, [toggleView, undoStack, redoStack, socket, selectedVersion]); + }, [toggleView, undoStack, redoStack, builderSocket, selectedVersion]); return null; } diff --git a/app/src/modules/scene/controls/undoRedoControls/undoRedo3D/undoRedo3DControls.tsx b/app/src/modules/scene/controls/undoRedoControls/undoRedo3D/undoRedo3DControls.tsx index 4b23216..93882dc 100644 --- a/app/src/modules/scene/controls/undoRedoControls/undoRedo3D/undoRedo3DControls.tsx +++ b/app/src/modules/scene/controls/undoRedoControls/undoRedo3D/undoRedo3DControls.tsx @@ -14,7 +14,7 @@ function UndoRedo3DControls() { const { activeModule } = useModuleStore(); const { handleUndo } = use3DUndoHandler(); const { handleRedo } = use3DRedoHandler(); - const { socket } = useSocketStore(); + const { builderSocket } = useSocketStore(); const { selectedVersion } = versionStore(); useEffect(() => { @@ -41,7 +41,7 @@ function UndoRedo3DControls() { return () => { window.removeEventListener("keydown", handleKeyDown); }; - }, [toggleView, undoStack, redoStack, socket, selectedVersion, activeModule]); + }, [toggleView, undoStack, redoStack, builderSocket, selectedVersion, activeModule]); return null; } diff --git a/app/src/pages/Dashboard.tsx b/app/src/pages/Dashboard.tsx index 6e6a2a1..37665b2 100644 --- a/app/src/pages/Dashboard.tsx +++ b/app/src/pages/Dashboard.tsx @@ -7,23 +7,20 @@ import DashboardMain from "../components/Dashboard/DashboardMain"; const Dashboard: React.FC = () => { const [activeTab, setActiveTab] = useState("Home"); - const { socket } = useSocketStore(); const { organization, email } = getUserData(); useEffect(() => { const token = localStorage.getItem("token"); const refreshToken = localStorage.getItem("refreshToken"); if (token && refreshToken) { - useSocketStore.getState().initializeSocket(email, organization, token, refreshToken); + useSocketStore.getState().initializeDashBoardSocket(token, refreshToken); } - }, [socket, email, organization]); + }, [email, organization]); return (
- {["Home", "Projects", "Shared", "Trash"].includes(activeTab) && ( - - )} + {["Home", "Projects", "Shared", "Trash"].includes(activeTab) && } {activeTab === "Tutorials" && }
); diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index fab30e3..b273372 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -22,7 +22,7 @@ const Project: React.FC = () => { const { setActiveModule } = useModuleStore(); const { projectId } = useParams(); const { setProjectName } = useProjectName(); - const { userId, email, organization } = getUserData(); + const { userId, email } = getUserData(); const { selectedUser } = useSelectedUserStore(); const { isLogListVisible } = useLogger(); const { activeTool } = useActiveTool(); @@ -65,7 +65,7 @@ const Project: React.FC = () => { const refreshToken = localStorage.getItem("refreshToken"); echo.warn("Validating token"); if (token && refreshToken) { - useSocketStore.getState().initializeSocket(email, organization, token, refreshToken); + useSocketStore.getState().initializeBuilderSocket(token, refreshToken); } echo.success("Project initialized and loaded successfully"); } else { diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts index bb50b43..3bd6435 100644 --- a/app/src/store/builder/store.ts +++ b/app/src/store/builder/store.ts @@ -3,61 +3,117 @@ import { io, Socket } from "socket.io-client"; import * as CONSTANTS from "../../types/world/worldConstants"; interface SocketStore { - socket: Socket | null; + builderSocket: 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; + + initializeBuilderSocket: (token?: string, refreshToken?: string) => void; + initializeVisualizationSocket: (token?: string, refreshToken?: string) => void; + initializeDashBoardSocket: (token?: string, refreshToken?: string) => void; + initializeProjectSocket: (token?: string, refreshToken?: string) => void; + initializeThreadSocket: (token?: string, refreshToken?: string) => void; + + disconnectBuilderSocket: () => void; + disconnectVisualizationSocket: () => void; + disconnectDashBoardSocket: () => void; + disconnectProjectSocket: () => void; + disconnectThreadSocket: () => void; + + disconnectAll: () => void; } export const useSocketStore = create((set, get) => ({ - socket: null, + builderSocket: null, 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 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 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 } }); - - set({ - socket, - visualizationSocket, - dashBoardSocket, - projectSocket, - threadSocket, + initializeBuilderSocket: (token, refreshToken) => { + if (get().builderSocket) return; + const builderSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder_v1`, { + reconnection: true, + auth: { token, refreshToken }, }); + set({ builderSocket }); }, - disconnectSocket: () => { - set((state) => { - state.socket?.disconnect(); - state.visualizationSocket?.disconnect(); - state.dashBoardSocket?.disconnect(); - state.projectSocket?.disconnect(); - state.threadSocket?.disconnect(); - return { - socket: null, - visualizationSocket: null, - dashBoardSocket: null, - projectSocket: null, - threadSocket: null, - }; + initializeVisualizationSocket: (token, refreshToken) => { + if (get().visualizationSocket) return; + const visualizationSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization_v1`, { + reconnection: true, + auth: { token, refreshToken }, + }); + set({ visualizationSocket }); + }, + + initializeDashBoardSocket: (token, refreshToken) => { + if (get().dashBoardSocket) return; + const dashBoardSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/dashboard`, { + reconnection: true, + auth: { token, refreshToken }, + }); + set({ dashBoardSocket }); + }, + + initializeProjectSocket: (token, refreshToken) => { + if (get().projectSocket) return; + const projectSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/project`, { + reconnection: true, + auth: { token, refreshToken }, + }); + set({ projectSocket }); + }, + + initializeThreadSocket: (token, refreshToken) => { + if (get().threadSocket) return; + const threadSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/thread`, { + reconnection: true, + auth: { token, refreshToken }, + }); + set({ threadSocket }); + }, + + disconnectBuilderSocket: () => { + get().builderSocket?.disconnect(); + set({ builderSocket: null }); + }, + + disconnectVisualizationSocket: () => { + get().visualizationSocket?.disconnect(); + set({ visualizationSocket: null }); + }, + + disconnectDashBoardSocket: () => { + get().dashBoardSocket?.disconnect(); + set({ dashBoardSocket: null }); + }, + + disconnectProjectSocket: () => { + get().projectSocket?.disconnect(); + set({ projectSocket: null }); + }, + + disconnectThreadSocket: () => { + get().threadSocket?.disconnect(); + set({ threadSocket: null }); + }, + + disconnectAll: () => { + get().builderSocket?.disconnect(); + get().visualizationSocket?.disconnect(); + get().dashBoardSocket?.disconnect(); + get().projectSocket?.disconnect(); + get().threadSocket?.disconnect(); + + set({ + builderSocket: null, + visualizationSocket: null, + dashBoardSocket: null, + projectSocket: null, + threadSocket: null, }); }, }));