Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added response handlers

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-09-15 14:25:12 +05:30
parent b6c9d3b57d
commit f9311ee296
11 changed files with 298 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/ui/collaboration/threads/ThreadChat.tsx
View File

@@ -153,7 +153,7 @@ const ThreadChat: React.FC = () => {
addReply(selectedComment?.threadId, commentData);
}
});
} else if (mode === "create") {
} else if (threadSocket?.connected && mode === "create") {
// SOCKET
const addComment = {

36
app/src/modules/builder/asset/responseHandler/useAssetResponseHandler.ts Normal file
View File

@@ -0,0 +1,36 @@
import { useCallback } from "react";
function useAssetResponseHandler() {
const addAssetToScene = useCallback((asset: Asset, callback?: () => void) => {
console.log("Adding asset:", asset);
if (callback) callback();
}, []);
const removeAssetFromScene = useCallback((assetId: string, callback?: () => void) => {
console.log("Removing asset with id:", assetId);
if (callback) callback();
}, []);
const duplicateAssetInScene = useCallback((assetId: string, callback?: () => void) => {
console.log("Duplicating asset with id:", assetId);
if (callback) callback();
}, []);
const pasteAssetToScene = useCallback((asset: Asset, callback?: () => void) => {
console.log("Pasting asset:", asset);
if (callback) callback();
}, []);
return {
addAssetToScene,
removeAssetFromScene,
duplicateAssetInScene,
pasteAssetToScene,
};
}
export default useAssetResponseHandler;

7
app/src/modules/builder/builder.tsx
View File

@@ -13,7 +13,6 @@ import { useToggleView, useWallVisibility, useRoofVisibility, useShadows, useToo
import * as Types from "../../types/world/worldTypes";
import SocketResponses from "../collaboration/socket/socketResponses.dev";
import Ground from "../scene/environment/ground";
import MeasurementTool from "../scene/tools/measurementTool";
import NavMesh from "../simulation/vehicle/navMesh/navMesh";
@@ -44,7 +43,7 @@ export default function Builder() {
const { setRenderDistance } = useRenderDistance();
const { setLimitDistance } = useLimitDistance();
const { projectId } = useParams();
const { setHoveredPoint, setHoveredLine, selectedWallAsset } = useBuilderStore();
const { setHoveredPoint, setHoveredLine } = useBuilderStore();
useEffect(() => {
if (!toggleView) {
@@ -68,7 +67,7 @@ export default function Builder() {
}, [projectId]);
useFrame(() => {
if (csgRef.current && selectedWallAsset) {
if (csgRef.current) {
csgRef.current.update();
}
});
@@ -77,8 +76,6 @@ export default function Builder() {
<>
<Ground plane={plane} />
<SocketResponses />
<AssetsGroup plane={plane} />
<mesh name="Walls-And-WallAssets-Group">

4
app/src/modules/collaboration/collaboration.tsx
View File

@@ -1,16 +1,16 @@
import React from "react";
import CamModelsGroup from "./camera/collabCams";
import ThreadsGroup from "./threads/threadsGroup";
import SocketResponses from "./socket/socketResponses";
const Collaboration: React.FC = () => {
return (
<>
<CamModelsGroup />
<ThreadsGroup />
<SocketResponses />
</>
);
};

170
app/src/modules/collaboration/socket/builderResponses.tsx Normal file
View File

@@ -0,0 +1,170 @@
import { useEffect } from "react";
import { useSocketStore } from "../../../store/builder/store";
import useAssetResponseHandler from "../../builder/asset/responseHandler/useAssetResponseHandler";
function BuilderResponses() {
const { socket } = useSocketStore();
const { addAssetToScene, removeAssetFromScene } = useAssetResponseHandler();
//#region Asset
useEffect(() => {
if (!socket) return;
socket.on("v1:model-asset:response:add", (data: any) => {
if (!data.message) return;
if (data.message === "Model created successfully") {
} else if (data.message === "Updated successfully") {
}
});
socket.on("v1:model-asset:response:delete", (data: any) => {
if (!data.message) return;
if (data.message === "Model deleted successfully") {
}
});
return () => {
if (socket) {
socket.off("v1:model-asset:response:add");
socket.off("v1:model-asset:response:delete");
}
};
}, [socket]);
//#endregion
//#region WallAsset
useEffect(() => {
if (!socket) return;
socket.on("v1:wall-asset:response:add", (data: any) => {
if (!data.message) return;
if (data.message === "WallAsset Created Successfully") {
} else if (data.message === "WallAsset Updated Successfully") {
}
});
socket.on("v1:wall-asset:response:delete", (data: any) => {
if (!data.message) return;
if (data.message === "WallAsset Created Successfully") {
}
});
return () => {
if (socket) {
socket.off("v1:wall-asset:response:add");
socket.off("v1:wall-asset:response:delete");
}
};
}, [socket]);
//#endregion
//#region Wall
useEffect(() => {
if (!socket) return;
socket.on("v1:model-Wall:response:add", (data: any) => {
if (!data.message) return;
if (data.message === "Wall Created Successfully") {
} else if (data.message === "Wall Updated Successfully") {
}
});
socket.on("v1:model-Wall:response:delete", (data: any) => {
if (!data.message) return;
if (data.message === "Wall Deleted Successfully") {
}
});
return () => {
if (socket) {
socket.off("v1:model-Wall:response:add");
socket.off("v1:model-Wall:response:delete");
}
};
}, [socket]);
//#endregion
//#region Floor
useEffect(() => {
if (!socket) return;
socket.on("v1:model-Floor:response:add", (data: any) => {
if (!data.message) return;
if (data.message === "Floor Created Successfully") {
} else if (data.message === "Floor Updated Successfully") {
}
});
socket.on("v1:model-Floor:response:delete", (data: any) => {
if (!data.message) return;
if (data.message === "Floor Deleted Successfully") {
}
});
return () => {
if (socket) {
socket.off("v1:model-Floor:response:add");
socket.off("v1:model-Floor:response:delete");
}
};
}, [socket]);
//#endregion
//#region Aisle
useEffect(() => {
if (!socket) return;
socket.on("v1:model-aisle:response:add", (data: any) => {
if (!data.message) return;
if (data.message === "Aisle Created Successfully") {
} else if (data.message === "Aisle Updated Successfully") {
}
});
socket.on("v1:model-aisle:response:delete", (data: any) => {
if (!data.message) return;
if (data.message === "Aisle Deleted Successfully") {
}
});
return () => {
if (socket) {
socket.off("v1:model-aisle:response:add");
socket.off("v1:model-aisle:response:delete");
}
};
}, [socket]);
//#endregion
//#region Zone
useEffect(() => {
if (!socket) return;
socket.on("v1:zone:response:updates", (data: any) => {
console.log("data: ", data);
if (!data.message) return;
if (data.message === "zone created successfully") {
} else if (data.message === "zone updated") {
}
});
socket.on("v1:zone:response:delete", (data: any) => {
console.log("data: ", data);
if (!data.message) return;
if (data.message === "zone deleted created successfully") {
}
});
return () => {
if (socket) {
socket.off("v1:zone:response:updates");
socket.off("v1:zone:response:delete");
}
};
}, [socket]);
//#endregion
return null;
}
export default BuilderResponses;

25
app/src/modules/collaboration/socket/socketResponses.dev.tsx
View File

@@ -1,25 +0,0 @@
import { useEffect } from 'react';
import { useSocketStore } from '../../../store/builder/store';
export default function SocketResponses() {
const { socket } = useSocketStore();
useEffect(() => {
if (socket) {
socket.on("v1:model-asset:response:add", (data: any) => {
// console.log('data: ', data);
});
}
return () => {
if (socket) {
socket.off("v1:model-asset:response:add");
}
}
}, [socket])
return (
<>
</>
);
}

12
app/src/modules/collaboration/socket/socketResponses.tsx Normal file
View File

@@ -0,0 +1,12 @@
import UserResponses from "./userResponses";
import BuilderResponses from "./builderResponses";
export default function SocketResponses() {
return (
<>
<UserResponses />
<BuilderResponses />
</>
);
}

29
app/src/modules/collaboration/socket/userResponses.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { useEffect } from "react";
import { useSocketStore } from "../../../store/builder/store";
function UserResponses() {
const { socket } = useSocketStore();
//#region Camera
useEffect(() => {
if (!socket) return;
socket.on("v1:camera:Response:update", (data: any) => {
if (!data.message) return;
if (data.message === "Model created successfully") {
} else if (data.message === "Updated successfully") {
}
});
return () => {
if (socket) {
socket.off("v1:camera:Response:update");
}
};
}, [socket]);
//#endregion
return null;
}
export default UserResponses;

14
app/src/modules/scene/controls/selectionControls/selection3D/transformControls3D.tsx
View File

@@ -186,6 +186,7 @@ function TransformControls3D() {
useEffect(() => {
const controls = transformControlsRef.current;
if (!controls || !visible) return;
controls.setSize(0.6);
controls.attach(tempObjectRef.current);
controls.setMode(toolMode === "Move-Asset" ? "translate" : "rotate");
@@ -340,7 +341,18 @@ function TransformControls3D() {
return null;
}
return <TransformControls space="world" translationSnap={keyEvent === "Ctrl" ? 0.5 : keyEvent === "Ctrl+Shift" ? 0.1 : 0} rotationSnap={keyEvent === "Ctrl" ? THREE.MathUtils.degToRad(15) : keyEvent === "Ctrl+Shift" ? THREE.MathUtils.degToRad(5) : 0} ref={transformControlsRef} camera={camera} showX showY showZ />;
return (
<TransformControls
space="world"
translationSnap={keyEvent === "Ctrl" ? 0.5 : keyEvent === "Ctrl+Shift" ? 0.1 : 0}
rotationSnap={keyEvent === "Ctrl" ? THREE.MathUtils.degToRad(15) : keyEvent === "Ctrl+Shift" ? THREE.MathUtils.degToRad(5) : 0}
ref={transformControlsRef}
camera={camera}
showX
showY
showZ
/>
);
}
export default TransformControls3D;

57
app/src/store/builder/store.ts
View File

@@ -1,39 +1,39 @@
import { create } from "zustand";
import { io } from "socket.io-client";
import { io, Socket } from "socket.io-client";
import * as CONSTANTS from "../../types/world/worldConstants";
export const useSocketStore = create<any>((set: any, get: any) => ({
interface SocketStore {
socket: Socket | null;
visualizationSocket: Socket | null;
dashBoardSocket: Socket | null;
projectSocket: Socket | null;
threadSocket: Socket | null;
initializeSocket: (email?: string, organization?: string, token?: string, refreshToken?: string) => void;
disconnectSocket: () => void;
}
export const useSocketStore = create<SocketStore>((set, get) => ({
socket: null,
initializeSocket: (email?: string, organization?: string, token?: string, refreshToken?: string) => {
visualizationSocket: null,
dashBoardSocket: null,
projectSocket: null,
threadSocket: null,
initializeSocket: (email, organization, token, refreshToken) => {
const existingSocket = get().socket;
if (existingSocket) {
return;
}
const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder_v1`, {
reconnection: true,
auth: { token, refreshToken },
});
const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder_v1`, { reconnection: true, auth: { token, refreshToken } });
const visualizationSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization_v1`, {
reconnection: true,
auth: { token, refreshToken },
});
const visualizationSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization_v1`, { reconnection: true, auth: { token, refreshToken } });
const dashBoardSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/dashboard`, {
reconnection: true,
auth: { token, refreshToken },
});
const dashBoardSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/dashboard`, { reconnection: true, auth: { token, refreshToken } });
const projectSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/project`, {
reconnection: true,
auth: { token, refreshToken },
});
const projectSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/project`, { reconnection: true, auth: { token, refreshToken } });
const threadSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/thread`, {
reconnection: true,
auth: { token, refreshToken },
});
const threadSocket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/thread`, { reconnection: true, auth: { token, refreshToken } });
set({
socket,
@@ -43,14 +43,21 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
threadSocket,
});
},
disconnectSocket: () => {
set((state: any) => {
set((state) => {
state.socket?.disconnect();
state.visualizationSocket?.disconnect();
state.dashBoardSocket?.disconnect();
state.projectSocket?.disconnect();
state.threadSocket?.disconnect();
return { socket: null };
return {
socket: null,
visualizationSocket: null,
dashBoardSocket: null,
projectSocket: null,
threadSocket: null,
};
});
},
}));

1
app/src/styles/scene/_scene.scss
View File

@@ -127,6 +127,7 @@
left: 12px !important;
border-radius: 6px;
backdrop-filter: blur(4px);
height: fit-content;
svg {
display: none;
}