Merge branch 'v2-ui' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into v2-ui

app/src/components/ui/collaboration/CommentThreads.tsx

@@ -1,22 +1,48 @@
 import React, { useState } from "react";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 
-const CommentThreads: React.FC = () => {
+interface CommentThreadsProps {
+  commentClicked: () => void;
+}
+
+const CommentThreads: React.FC<CommentThreadsProps> = ({ commentClicked }) => {
   const [expand, setExpand] = useState(false);
-  const commentsedUsers = [
+  const commentsedUsers = [{ creatorId: "1" }];
+
+  const CommentDetails = {
+    state: "active",
+    commentId: "c-1",
+    creatorId: "12",
+    createdAt: "2 hours ago",
+    comment: "Thread check",
+    lastUpdatedAt: "string",
+    replies: [
       {
-      userId: "1",
+        replyId: 'string',
-      userName: "user",
+        creatorId: 'string',
+        createdAt: 'string',
+        lastUpdatedAt: 'string',
+        reply: 'string',
       },
       {
-      userId: "2",
+        replyId: 'string',
-      userName: "Admin",
+        creatorId: 'string',
-    },
+        createdAt: 'string',
-  ];
+        lastUpdatedAt: 'string',
+        reply: 'string',
+      }
+    ],
+  };
+
+  function getUsername(userId: string) {
+    const UserName = "username";
+    return UserName;
+  }
 
   function getDetails(type?: "clicked") {
     if (type === "clicked") {
       setExpand(true);
+      commentClicked();
     } else {
       setExpand((prev) => !prev);
     }
@@ -28,28 +54,33 @@ const CommentThreads: React.FC = () => {
         onPointerEnter={() => getDetails()}
         onPointerLeave={() => getDetails()}
         onClick={() => getDetails("clicked")}
-        className={`comments-threads-container ${
+        className={`comments-threads-container ${expand ? "open" : "closed"
-          expand ? "open" : "closed"
           } unread`}
       >
         <div className="users-commented">
           {commentsedUsers.map((val, i) => (
             <div
               className="users"
-              key={val.userId}
+              key={val.creatorId}
-              style={{ background: getAvatarColor(i, val.userName) }}
+              style={{
+                background: getAvatarColor(i, getUsername(val.creatorId)),
+              }}
             >
-              {val.userName[0]}
+              {getUsername(val.creatorId)[0]}
             </div>
           ))}
         </div>
         <div className={`last-comment-details ${expand ? "expand" : ""}`}>
           <div className="header">
-            <div className="user-name">user</div>
+            <div className="user-name">
-            <div className="time">4 mins, ago</div>
+              {getUsername(CommentDetails.creatorId)}
             </div>
-          <div className="message">hello</div>
+            <div className="time">{CommentDetails.createdAt}</div>
-          <div className="replies">0 replies</div>
+          </div>
+          <div className="message">{CommentDetails.comment}</div>
+          {CommentDetails.replies.length > 0 && (
+            <div className="replies">{CommentDetails.replies.length} reply(s)</div>
+          )}
         </div>
       </button>
     </div>

app/src/components/ui/collaboration/Messages.tsx

@@ -3,14 +3,7 @@ import { getAvatarColor } from "../../../modules/collaboration/functions/getAvat
 import { KebabIcon } from "../../icons/ExportCommonIcons";
 
 interface MessageProps {
-  val: {
+  val: Reply;
-    userName: string;
-    userId: string;
-    message: string;
-    creationTime: string;
-    idEdited: boolean;
-    modifiedTime: string;
-  };
   i: number;
 }
 
@@ -18,22 +11,25 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [openOptions, setOpenOptions] = useState(false);
   const currentUser = "1";
+
+  const UserName = "username";
+
   return (
     <>
       {isEditing ? (
         <>
           <div
             className="profile"
-            style={{ background: getAvatarColor(i, val.userName) }}
+            style={{ background: getAvatarColor(i, UserName) }}
           >
-            {val.userName[0]}
+            {UserName[0]}
           </div>
           <div className="content">
             <div className="user-details">
-              <div className="user-name">{val.userName}</div>
+              <div className="user-name">{UserName}</div>
-              <div className="time">{val.creationTime}</div>
+              <div className="time">{val.createdAt}</div>
             </div>
-            {val.userId === currentUser && (
+            {val.creatorId === currentUser && (
               <div className="more-options">
                 <button
                   className="more-options-button"

app/src/components/ui/collaboration/ThreadChat.tsx

@@ -6,20 +6,18 @@ import { ExpandIcon } from "../../icons/SimulationIcons";
 const ThreadChat: React.FC = () => {
   const messages = [
     {
-      userName: "user 1",
+      replyId: "user 1",
-      userId: "1",
+      creatorId: "1",
-      message: "hello, thread check",
+      createdAt: "hello, thread check",
-      creationTime: "2 hrs ago",
+      lastUpdatedAt: "2 hrs ago",
-      idEdited: true,
+      reply: "true",
-      modifiedTime: "5 mins ago",
     },
     {
       userName: "user 2",
       userId: "2",
       message: "hello, thread check",
       creationTime: "2 hrs ago",
-      idEdited: true,
+      idEdited: "true",
-      modifiedTime: "5 mins ago",
     },
   ];
 
@@ -44,7 +42,7 @@ const ThreadChat: React.FC = () => {
         </div>
         <div className="messages-wrapper">
           {messages.map((val, i) => (
-            <Messages val={val} i={i} key={val.userId} />
+            <Messages val={val as Reply} i={i} key={val.userId} />
           ))}
         </div>
         <div className="send-message-wrapper">

app/src/modules/builder/geomentries/lines/updateDistanceText.ts

@@ -10,7 +10,7 @@ function updateDistanceText(
 
     //////////  Updating the Distance Texts of the lines that are affected during drag //////////
 
-    const DistanceGroup = scene.children.find((child) => child.name === "Distance_Text") as THREE.Group;
+    const DistanceGroup = scene.getObjectByName('Distance_Text') as THREE.Group;
 
     affectedLines.forEach((lineIndex) => {
         const mesh = floorPlanGroupLine.current.children[lineIndex] as THREE.Mesh;

app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx

@@ -10,7 +10,6 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
     const [selectedComment, setSelectedComment] = useState<CommentSchema | null>(null);
     const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
 
-    
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
             const keyCombination = detectModifierKeys(e);
@@ -27,6 +26,11 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
         return () => window.removeEventListener("keydown", handleKeyDown);
     }, [selectedComment]);
 
+    const commentClicked = () => {
+        console.log('hii');
+        setSelectedComment(comment);
+    }
+
     if (comment.state === 'inactive' || isPlaying) return null;
 
     return (
@@ -42,21 +46,7 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
                 rotation={comment.rotation}
                 className='comments-main-wrapper'
             >
-                <CommentThreads />
+                <CommentThreads commentClicked={commentClicked} />
-                {/* <div
-                    className='outer'
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        setSelectedComment(comment);
-                        console.log("down");
-                    }}
-                    onPointerOver={(e) => {
-                        e.stopPropagation();
-                    }}>
-                    <div>
-                        hii
-                    </div>
-                </div> */}
             </Html>
             {CommentRef.current && transformMode && (
                 <TransformControls

app/src/modules/collaboration/comments/instances/commentInstances.tsx

@@ -6,7 +6,7 @@ function CommentInstances() {
     const { comments } = useCommentStore();
 
     useEffect(() => {
-        console.log('comments: ', comments);
+        // console.log('comments: ', comments);
     }, [comments])
 
     return (

app/src/modules/scene/tools/measurementTool.tsx

@@ -218,7 +218,7 @@ const MeasurementTool = () => {
                     sprite
                 >
                     <div>
-                        {startConePosition.distanceTo(endConePosition).toFixed(2)} m
+                        {(startConePosition.distanceTo(endConePosition) + (coneSize.height)).toFixed(2)} m
                     </div>
                 </Html>
             )}

app/src/styles/scene/comments.scss

@@ -1,22 +1,22 @@
 @use "../abstracts/variables" as *;
 @use "../abstracts/mixins" as *;
 
-.comments-main-wrapper{
+.comments-main-wrapper {
   position: relative;
 }
+
 .comments-threads-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   padding: 4px;
   background: var(--background-color);
-  border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large} 0;
+  border-radius: #{$border-radius-extra-large} #{$border-radius-extra-large} #{$border-radius-extra-large}
+    0;
   backdrop-filter: blur(12px);
   z-index: 1000;
   transform: translateY(-100%);
   outline: 1px solid var(--border-color);
-  transition: all 0.2s ease-out;
-
   .comments-threads-container {
     display: flex;
     align-items: start;
@@ -39,8 +39,7 @@
       align-items: start;
       flex-direction: column;
       overflow: hidden;
-      transition: all 0.2s;
+      transition: all 0.2s ease-in;
-
       .header {
         @include flex-center;
         gap: 10px;