updated

2025-06-23 09:37:53 +05:30
parent 2fbdf8ab61
commit 54b02541c1
278 changed files with 10134 additions and 7904 deletions
--- a/app/src/modules/collaboration/camera/collabCams.tsx
+++ b/app/src/modules/collaboration/camera/collabCams.tsx
@@ -14,17 +14,17 @@ import { getAvatarColor } from "../functions/getAvatarColor";
 import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import setCameraView from "../functions/setCameraView";
+import { getUserData } from "../../../functions/getUserData";

 const CamModelsGroup = () => {
  const navigate = useNavigate();
  const groupRef = useRef<THREE.Group>(null);
-  const email = localStorage.getItem("email");
+  const { userId, organization, email } = getUserData();
  const { setActiveUsers } = useActiveUsers();
  const { socket } = useSocketStore();
  const { activeModule } = useModuleStore();
  const { selectedUser, setSelectedUser } = useSelectedUserStore();
  const { isPlaying } = usePlayButtonStore();
-
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const loader = new GLTFLoader();
  const dracoLoader = new DRACOLoader();
@@ -87,7 +87,6 @@ const CamModelsGroup = () => {
    if (!email) navigate("/");

    if (!socket) return;
-    const organization = email!.split("@")[1].split(".")[0];

    socket.on("userConnectResponse", (data: any) => {
      if (!groupRef.current) return;
@@ -222,7 +221,6 @@ const CamModelsGroup = () => {

  useEffect(() => {
    if (!groupRef.current) return;
-    const organization = email!.split("@")[1].split(".")[0];

    getActiveUsersData(organization).then((data) => {
      const filteredData = data.cameraDatas.filter(
--- a/app/src/modules/collaboration/comments/commentsGroup.tsx
+++ b/app/src/modules/collaboration/comments/commentsGroup.tsx
@@ -1,18 +1,17 @@
 import { useEffect, useState } from "react";
-import { useActiveTool } from "../../../store/builder/store"
 import { useThree } from "@react-three/fiber";
 import { MathUtils, Vector3 } from "three";
-import { useCommentStore } from "../../../store/collaboration/useCommentStore";
 import CommentInstances from "./instances/commentInstances";
 import { Sphere } from "@react-three/drei";
+import { useActiveTool, useSelectedComment } from "../../../store/builder/store";
+

 function CommentsGroup() {
-    const { gl, raycaster, camera, scene, pointer } = useThree();
+    const { gl, raycaster, camera, scene, pointer, size } = useThree();
    const { activeTool } = useActiveTool();
-    const { addComment } = useCommentStore();
    const [hoverPos, setHoverPos] = useState<Vector3 | null>(null);
+    const { setSelectedComment, setCommentPositionState, setPosition2Dstate } = useSelectedComment();

-    const userId = localStorage.getItem('userId') ?? '';

    useEffect(() => {
        const canvasElement = gl.domElement;
@@ -64,7 +63,7 @@ function CommentsGroup() {
            }
        };

-        const onMouseClick = () => {
+        const onMouseClick = async () => {
            if (drag) return;

            const intersects = raycaster
@@ -83,23 +82,16 @@ function CommentsGroup() {
                        !intersect.object.name.includes("SelectionGroupBoundingLine") &&
                        intersect.object.type !== "GridHelper"
                );
-            console.log('intersects: ', intersects);
            if (intersects.length > 0) {
                const position = new Vector3(intersects[0].point.x, Math.max(intersects[0].point.y, 0), intersects[0].point.z);
+                setSelectedComment(null);
+                setCommentPositionState({ position: position.toArray() })

-                const comment: CommentSchema = {
-                    state: 'active',
-                    commentId: MathUtils.generateUUID(),
-                    creatorId: userId,
-                    createdAt: new Date().toISOString(),
-                    comment: '',
-                    lastUpdatedAt: new Date().toISOString(),
-                    position: position.toArray(),
-                    rotation: [0, 0, 0],
-                    replies: []
-                }

-                addComment(comment);
+                position.project(camera);
+                const x = (position.x * 0.5 + 0.5) * size.width;
+                const y = (-(position.y * 0.5) + 0.5) * size.height;
+                setPosition2Dstate({ x, y })
                setHoverPos(null);
            }
        }
@@ -124,7 +116,6 @@ function CommentsGroup() {
    return (
        <>
            <CommentInstances />
-
            {hoverPos && (
                <Sphere name={'commentHolder'} args={[0.1, 16, 16]} position={hoverPos}>
                    <meshStandardMaterial color="orange" />
--- a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
+++ b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
@@ -1,64 +1,90 @@
 import { Html, TransformControls } from '@react-three/drei';
 import { useEffect, useRef, useState } from 'react'
 import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
-import { detectModifierKeys } from '../../../../../utils/shortcutkeys/detectModifierKeys';
 import CommentThreads from '../../../../../components/ui/collaboration/CommentThreads';
+import { useSelectedComment } from '../../../../../store/builder/store';
+import { Group, Object3D, Vector2, Vector3 } from 'three';
+import { useThree } from '@react-three/fiber';

 function CommentInstance({ comment }: { comment: CommentSchema }) {
    const { isPlaying } = usePlayButtonStore();
    const CommentRef = useRef(null);
-    const [selectedComment, setSelectedComment] = useState<CommentSchema | null>(null);
+    const [selectedObject, setSelectedObject] = useState<Object3D | null>(null);
+    const { selectedComment, setSelectedComment, setPosition2Dstate } = useSelectedComment()
    const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
+    const groupRef = useRef<Group>(null);
+    const { size, camera } = useThree();
+    // useEffect(() => {
+    //     const handleKeyDown = (e: KeyboardEvent) => {
+    //         const keyCombination = detectModifierKeys(e);
+    //         if (!selectedComment) return;
+    //         if (keyCombination === "G") {
+    //             setTransformMode((prev) => (prev === "translate" ? null : "translate"));
+    //         }
+    //         if (keyCombination === "R") {
+    //             setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
+    //         }
+    //     };

-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            const keyCombination = detectModifierKeys(e);
-            if (!selectedComment) return;
-            if (keyCombination === "G") {
-                setTransformMode((prev) => (prev === "translate" ? null : "translate"));
-            }
-            if (keyCombination === "R") {
-                setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
-            }
-        };
-
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [selectedComment]);
+    //     window.addEventListener("keydown", handleKeyDown);
+    //     return () => window.removeEventListener("keydown", handleKeyDown);
+    // }, [selectedComment]);

    const commentClicked = () => {
-        console.log('hii');
        setSelectedComment(comment);
+        const position = new Vector3(comment.position[0], comment.position[1], comment.position[2])
+
+        position.project(camera);
+        const x = (position.x * 0.5 + 0.5) * size.width;
+        const y = (-(position.y * 0.5) + 0.2) * size.height;
+        setPosition2Dstate({ x, y })
+
+        if (groupRef.current) {
+            setSelectedObject(groupRef.current);
+        }
    }

-    if (comment.state === 'inactive' || isPlaying) return null;
+    useEffect(() => {
+        if (!selectedComment || selectedComment.threadId !== comment.threadId) {
+            setSelectedObject(null)
+        }
+    }, [selectedComment])

+
+    if (comment.state === 'inactive' || isPlaying) return null;
    return (

        <>
-            <Html
-                ref={CommentRef}
-                zIndexRange={[1, 0]}
-                prepend
-                sprite
-                center
-                position={comment.position}
-                rotation={comment.rotation}
-                className='comments-main-wrapper'
-            >
-                <CommentThreads commentClicked={commentClicked} />
-            </Html>
-            {CommentRef.current && transformMode && (
+            <group ref={groupRef} position={comment.position} rotation={comment.rotation}>
+                <Html
+                    ref={CommentRef}
+                    zIndexRange={[1, 0]}
+                    prepend
+                    sprite
+                    center
+                    // position={comment.position}
+                    // rotation={comment.rotation}
+                    className='comments-main-wrapper'
+                >
+                    <CommentThreads commentClicked={commentClicked} comment={comment} />
+                </Html>
+            </group>
+            {/* {selectedObject && transformMode && (
                <TransformControls
-                    object={CommentRef.current}
+                    object={selectedObject}
                    mode={transformMode}
                    onMouseUp={(e) => {
-
+                        console.log("sad");
                    }}
+
                />
-            )}
+            )} */}
        </>
    )
 }

-export default CommentInstance;
+export default CommentInstance;
+
+
+
+
--- a/app/src/modules/collaboration/comments/instances/commentInstances.tsx
+++ b/app/src/modules/collaboration/comments/instances/commentInstances.tsx
@@ -1,18 +1,56 @@
 import React, { useEffect } from 'react'
 import CommentInstance from './commentInstance/commentInstance'
 import { useCommentStore } from '../../../../store/collaboration/useCommentStore'
+import { getAllThreads } from '../../../../services/factoryBuilder/comments/getAllThreads';
+import { useParams } from 'react-router-dom';
+import { getUserData } from '../../../../functions/getUserData';
+import { getRelativeTime } from '../../../../components/ui/collaboration/function/getRelativeTime';
+

 function CommentInstances() {
-    const { comments } = useCommentStore();
+    const { comments, setComments } = useCommentStore();
+    const { projectId } = useParams();
+    const { userId } = getUserData()
+    const getThreads = async () => {
+        if (!projectId) return;
+        try {
+            const getComments = await getAllThreads(projectId);
+
+
+            const formattedThreads = Array.isArray(getComments.data)
+                ? getComments.data.map((thread: any) => ({
+                    ...thread,
+                    comments: Array.isArray(thread.comments)
+                        ? thread.comments.map((val: any) => ({
+                            replyId: val._id ?? "",
+                            creatorId: userId,
+                            createdAt: getRelativeTime(val.createdAt),
+                            lastUpdatedAt: "1 hr ago",
+                            comment: val.comment,
+                            _id: val._id ?? "",
+                        }))
+                        : [],
+                }))
+                : [];
+            // console.log('formattedThreads: ', formattedThreads);
+            setComments(formattedThreads);
+        } catch (err) {
+            // console.error("Failed to fetch threads:", err);
+        }
+    }
+

    useEffect(() => {
-        // console.log('comments: ', comments);
-    }, [comments])
+        getThreads();
+    }, []);

+    useEffect(() => {
+        // console.log("comments", comments);
+    }, [comments])
    return (
        <>
-            {comments.map((comment: CommentSchema) => (
-                <React.Fragment key={comment.commentId}>
+            {comments?.map((comment: CommentSchema) => (
+                <React.Fragment key={comment.threadId}>
                    <CommentInstance comment={comment} />
                </React.Fragment>
            ))}
--- a/app/src/modules/collaboration/socket/socketResponses.dev.tsx
+++ b/app/src/modules/collaboration/socket/socketResponses.dev.tsx
@@ -32,9 +32,9 @@ import Layer2DVisibility from "../../builder/geomentries/layers/layer2DVisibilit
 import { retrieveGLTF, storeGLTF } from "../../../utils/indexDB/idbUtils";
 import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";
 import { useParams } from "react-router-dom";
-import { useAssetsStore } from "../../../store/builder/useAssetStore";
-import { useEventsStore } from "../../../store/simulation/useEventsStore";
-import { useProductStore } from "../../../store/simulation/useProductStore";
+import { getUserData } from "../../../functions/getUserData";
+import { useSceneContext } from "../../scene/sceneContext";
+import { useVersionContext } from "../../builder/version/versionContext";

 export default function SocketResponses({
    floorPlanGroup,
@@ -57,12 +57,14 @@ export default function SocketResponses({
    const { setNewLines } = useNewLines();
    const { zones, setZones } = useZones();
    const { zonePoints, setZonePoints } = useZonePoints();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();
-    const { addAsset, updateAsset, removeAsset } = useAssetsStore();
+    const { assetStore, eventStore, productStore } = useSceneContext();
+    const { addAsset, updateAsset, removeAsset } = assetStore();
+    const { organization } = getUserData();

    useEffect(() => {
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];

        if (!socket) return;

@@ -154,8 +156,8 @@ export default function SocketResponses({
                try {
                    const deletedUUID = data.data.modelUuid;

-                    useEventsStore.getState().removeEvent(deletedUUID);
-                    useProductStore.getState().deleteEvent(deletedUUID);
+                    eventStore.getState().removeEvent(deletedUUID);
+                    productStore.getState().deleteEvent(deletedUUID);

                    removeAsset(deletedUUID);

@@ -437,7 +439,7 @@ export default function SocketResponses({
                    floorGroup.current?.remove(meshToRemove);
                }

-                const zonesData = await getZonesApi(organization, projectId);
+                const zonesData = await getZonesApi(organization, projectId, selectedVersion?.versionId || '');
                const highestLayer = Math.max(
                    1,
                    lines.current.reduce(
@@ -460,12 +462,24 @@ export default function SocketResponses({
                echo.success("Layer Removed!");
            }
        });
-    }, [socket]);
+
+        return () => {
+            socket.off("cameraCreateResponse");
+            socket.off("userConnectRespones");
+            socket.off("userDisConnectRespones");
+            socket.off("v1:camera:Response:update");
+            socket.off("EnvironmentUpdateResponse");
+            socket.off("v1:model-asset:response:add");
+            socket.off("v1:model-asset:response:delete");
+            socket.off("v1:Line:response:update");
+            socket.off("v1:Line:response:delete");
+            socket.off("v1:Line:response:delete:point");
+            socket.off("v1:Line:response:delete:layer");
+        }
+    }, [socket, selectedVersion?.versionId]);

    useEffect(() => {
        if (!socket) return;
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];
        let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;

        socket.on("v1:wallItem:Response:Delete", (data: any) => {
@@ -630,7 +644,7 @@ export default function SocketResponses({
            socket.off("v1:wallItem:Response:Delete");
            socket.off("v1:wallItems:Response:Update");
        };
-    }, [wallItems]);
+    }, [socket, wallItems]);

    function getPointColor(lineType: string | undefined): string {
        switch (lineType) {
@@ -660,8 +674,6 @@ export default function SocketResponses({

    useEffect(() => {
        if (!socket) return;
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];

        socket.on("v1:Line:response:create", async (data: any) => {
            // 
@@ -740,7 +752,7 @@ export default function SocketResponses({
                );
                lines.current.push(line);

-                const zonesData = await getZonesApi(organization, projectId);
+                const zonesData = await getZonesApi(organization, projectId, selectedVersion?.versionId || '');
                const highestLayer = Math.max(
                    1,
                    lines.current.reduce(
@@ -774,12 +786,10 @@ export default function SocketResponses({
        return () => {
            socket.off("v1:Line:response:create");
        };
-    }, [socket, activeLayer]);
+    }, [socket, activeLayer, selectedVersion?.versionId]);

    useEffect(() => {
        if (!socket) return;
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];

        socket.on("v1:zone:response:updates", (data: any) => {
            // console.log('data: ', data);
--- a/app/src/modules/collaboration/socket/threadSocketResponses.dev.tsx
+++ b/app/src/modules/collaboration/socket/threadSocketResponses.dev.tsx
@@ -0,0 +1,168 @@
+import React, { useEffect } from 'react';
+import { useSelectedComment, useSocketStore } from '../../../store/builder/store';
+import { useCommentStore } from '../../../store/collaboration/useCommentStore';
+import { getUserData } from '../../../functions/getUserData';
+import { getRelativeTime } from '../../../components/ui/collaboration/function/getRelativeTime';
+
+interface ThreadSocketProps {
+    setMessages: React.Dispatch<React.SetStateAction<Reply[]>>;
+    // mode: 'create' | 'edit' | null
+    modeRef: React.RefObject<'create' | 'edit' | null>;
+    messages: Reply[]
+}
+
+const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSocketProps) => {
+    const { threadSocket } = useSocketStore();
+    const { selectedComment, setSelectedComment, setCommentPositionState, commentPositionState } = useSelectedComment();
+    const { comments, addComment, addReply, updateComment, updateReply } = useCommentStore();
+    const { userId } = getUserData();
+
+    useEffect(() => {
+        if (!threadSocket) return;
+
+        // --- Add Comment Handler ---
+        // const handleAddComment = (data: any) => {
+        //     
+        //     
+        //     const commentData = {
+        //         replyId: data.data?._id,
+        //         creatorId: data.data?.userId,
+        //         createdAt: getRelativeTime(data.data?.createdAt),
+        //         lastUpdatedAt: '2 hrs ago',
+        //         comment: data.data.comment,
+        //     };
+        //     // 
+        //     
+        //     if (mode == "create") {
+        //         addReply(selectedComment?.threadId, commentData);
+        //         
+        //         setMessages(prevMessages => [...prevMessages, commentData]);
+        //     } else if (mode == "edit") {
+        //         updateReply(selectedComment?.threadId, data.data?._id, commentData);
+        //         setMessages((prev) =>
+        //             prev.map((message) => {
+        //                  // 👈 log each message
+        //                 return (message.replyId || message._id) === data.data?._id
+        //                     ? { ...message, comment: data.data?.comment }
+        //                     : message;
+        //             })
+        //         );
+        //         
+        //     } else {
+        //         
+        //     }
+        //     threadSocket.off('v1-Comment:response:add', handleAddComment);
+        // };
+        // threadSocket.on('v1-Comment:response:add', handleAddComment);
+        const handleAddComment = (data: any) => {
+            // console.log('Add: ', data);
+
+            const commentData = {
+                replyId: data.data?._id,
+                creatorId: data.data?.userId,
+                createdAt: getRelativeTime(data.data?.createdAt),
+                lastUpdatedAt: "2 hrs ago",
+                comment: data.data.comment,
+            };
+
+            if (modeRef.current === "create") {
+
+
+                addReply(selectedComment?.threadId, commentData);
+                setMessages((prevMessages) => [...prevMessages, commentData]);
+            } else if (modeRef.current === "edit") {
+
+                updateReply(selectedComment?.threadId, data.data?._id, commentData);
+                setMessages((prev) =>
+                    prev.map((message) => {
+                        // 👈 log each message
+                        return message.replyId === data.data?._id
+                            ? { ...message, comment: data.data?.comment }
+                            : message;
+                    })
+                );
+                // console.log('data.data?.comment: ', data.data?.comment);
+            } else {
+
+            }
+
+            threadSocket.off("v1-Comment:response:add", handleAddComment);
+        };
+        threadSocket.on('v1-Comment:response:add', handleAddComment);
+        // --- Delete Comment Handler ---
+
+        const handleDeleteComment = (data: any) => {
+            // console.log('delete: ', data);
+
+            threadSocket.off('v1-Comment:response:delete', handleDeleteComment);
+        };
+        threadSocket.on('v1-Comment:response:delete', handleDeleteComment);
+
+        // --- Create Thread Handler ---
+        const handleCreateThread = (data: any) => {
+            // console.log('createThread: ', data);
+
+            const comment: CommentSchema = {
+                state: 'active',
+                threadId: data.data?._id,
+                creatorId: userId || data.data?.userId,
+                createdAt: data.data?.createdAt,
+                threadTitle: data.data?.threadTitle,
+                lastUpdatedAt: new Date().toISOString(),
+                position: commentPositionState.position,
+                rotation: [0, 0, 0],
+                comments: [],
+            };
+            setSelectedComment(comment)
+            addComment(comment);
+            setCommentPositionState(null);
+            // setSelectedComment(null);
+            threadSocket.off('v1-thread:response:create', handleCreateThread);
+        };
+        threadSocket.on('v1-thread:response:create', handleCreateThread);
+
+        // --- Delete Thread Handler ---
+        const handleDeleteThread = (data: any) => {
+
+            threadSocket.off('v1-thread:response:delete', handleDeleteThread);
+        };
+        threadSocket.on('v1-thread:response:delete', handleDeleteThread);
+
+
+        const handleEditThread = (data: any) => {
+
+            const editedThread: CommentSchema = {
+                state: 'active',
+                threadId: data.data?._id,
+                creatorId: userId,
+                createdAt: data.data?.createdAt,
+                threadTitle: data.data?.threadTitle,
+                lastUpdatedAt: new Date().toISOString(),
+                position: data.data.position,
+                rotation: [0, 0, 0],
+                comments: data.data.comments,
+            };
+
+            // console.log('data.data?._id: ', data.data?._id);
+            updateComment(data.data?._id, editedThread);
+            setSelectedComment(editedThread)
+
+            // setSelectedComment(null);
+
+        };
+        threadSocket.on('v1-thread:response:updateTitle', handleEditThread);
+
+        // Cleanup on unmount
+        return () => {
+            threadSocket.off('v1-Comment:response:add', handleAddComment);
+            threadSocket.off('v1-Comment:response:delete', handleDeleteComment);
+            threadSocket.off('v1-thread:response:create', handleCreateThread);
+            threadSocket.off('v1-thread:response:delete', handleDeleteThread);
+            threadSocket.off('v1-thread:response:updateTitle', handleEditThread);
+        };
+    }, [threadSocket, selectedComment, commentPositionState, userId, setMessages, addReply, addComment, setSelectedComment, setCommentPositionState, updateComment, comments, modeRef.current, messages]);
+
+    return null;
+};
+
+export default ThreadSocketResponsesDev;