From ef1693ec8e663d598e4f70ce7461287ec42a94ff Mon Sep 17 00:00:00 2001 From: Vishnu Date: Thu, 22 May 2025 16:19:32 +0530 Subject: [PATCH 1/4] feat: update CommentThreads component to use creatorId and enhance comment details display --- .../ui/collaboration/CommentThreads.tsx | 47 ++++++++++++------- app/src/styles/scene/comments.scss | 8 ++-- app/src/types/collaborationTypes.d.ts | 4 +- 3 files changed, 36 insertions(+), 23 deletions(-) diff --git a/app/src/components/ui/collaboration/CommentThreads.tsx b/app/src/components/ui/collaboration/CommentThreads.tsx index 50b226e..2d41abc 100644 --- a/app/src/components/ui/collaboration/CommentThreads.tsx +++ b/app/src/components/ui/collaboration/CommentThreads.tsx @@ -3,16 +3,23 @@ import { getAvatarColor } from "../../../modules/collaboration/functions/getAvat const CommentThreads: React.FC = () => { const [expand, setExpand] = useState(false); - const commentsedUsers = [ - { - userId: "1", - userName: "user", - }, - { - userId: "2", - userName: "Admin", - }, - ]; + const commentsedUsers = [{ creatorId: "1" }]; + + const CommentDetails = { + state: "active", + commentId: "c-1", + creatorId: "12", + createdAt: "2 hours ago", + comment: "Thread check", + lastUpdatedAt: "string", + replies: [], + }; + + function getUsername(userId: string) { + console.log(userId); + const UserName = "username"; + return UserName; + } function getDetails(type?: "clicked") { if (type === "clicked") { @@ -36,20 +43,26 @@ const CommentThreads: React.FC = () => { {commentsedUsers.map((val, i) => (
- {val.userName[0]} + {getUsername(val.creatorId)[0]}
))}
-
user
-
4 mins, ago
+
+ {getUsername(CommentDetails.creatorId)} +
+
{CommentDetails.createdAt}
-
hello
-
0 replies
+
{CommentDetails.comment}
+ {CommentDetails.replies.length > 0 && ( +
{CommentDetails.replies.length}
+ )}
diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss index 84675c6..02ff683 100644 --- a/app/src/styles/scene/comments.scss +++ b/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} + 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; @@ -36,7 +36,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; diff --git a/app/src/types/collaborationTypes.d.ts b/app/src/types/collaborationTypes.d.ts index 445949a..26295d5 100644 --- a/app/src/types/collaborationTypes.d.ts +++ b/app/src/types/collaborationTypes.d.ts @@ -10,7 +10,7 @@ interface CommentSchema { replies: Reply[]; } -interface Reply { +export interface Reply { replyId: string; creatorId: string; createdAt: string; @@ -18,4 +18,4 @@ interface Reply { reply: string; } -type CommentsSchema = CommentSchema[]; \ No newline at end of file +type CommentsSchema = CommentSchema[]; From c2d952c190a824a1e29249bf542e02263cc22636 Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Thu, 22 May 2025 16:37:02 +0530 Subject: [PATCH 2/4] fix: update distance text calculation to include cone height in MeasurementTool --- .../geomentries/lines/updateDistanceText.ts | 2 +- .../commentInstance/commentInstance.tsx | 23 ++++--------------- .../modules/scene/tools/measurementTool.tsx | 2 +- 3 files changed, 6 insertions(+), 21 deletions(-) diff --git a/app/src/modules/builder/geomentries/lines/updateDistanceText.ts b/app/src/modules/builder/geomentries/lines/updateDistanceText.ts index 8a5a1cc..8d7fbe2 100644 --- a/app/src/modules/builder/geomentries/lines/updateDistanceText.ts +++ b/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; diff --git a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx index 5b5c145..1efff39 100644 --- a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx +++ b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx @@ -10,7 +10,6 @@ function CommentInstance({ comment }: { comment: CommentSchema }) { const [selectedComment, setSelectedComment] = useState(null); const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null); - useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { const keyCombination = detectModifierKeys(e); @@ -22,13 +21,13 @@ function CommentInstance({ comment }: { comment: CommentSchema }) { setTransformMode((prev) => (prev === "rotate" ? null : "rotate")); } }; - + window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [selectedComment]); - + if (comment.state === 'inactive' || isPlaying) return null; - + return ( <> @@ -37,26 +36,12 @@ function CommentInstance({ comment }: { comment: CommentSchema }) { zIndexRange={[1, 0]} prepend sprite - center + center position={comment.position} rotation={comment.rotation} className='comments-main-wrapper' > - {/*
{ - e.stopPropagation(); - setSelectedComment(comment); - console.log("down"); - }} - onPointerOver={(e) => { - e.stopPropagation(); - }}> -
- hii -
-
*/} {CommentRef.current && transformMode && ( { sprite >
- {startConePosition.distanceTo(endConePosition).toFixed(2)} m + {(startConePosition.distanceTo(endConePosition) + (coneSize.height)).toFixed(2)} m
)} From 07b98b92ee33d2c1dec59afc9f6ee0401b1ea00c Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Thu, 22 May 2025 17:02:48 +0530 Subject: [PATCH 3/4] feat: enhance CommentThreads component with commentClicked prop and update reply structure --- .../ui/collaboration/CommentThreads.tsx | 32 +++++++++++++++---- .../commentInstance/commentInstance.tsx | 9 ++++-- .../comments/instances/commentInstances.tsx | 2 +- app/src/types/collaborationTypes.d.ts | 2 +- 4 files changed, 34 insertions(+), 11 deletions(-) diff --git a/app/src/components/ui/collaboration/CommentThreads.tsx b/app/src/components/ui/collaboration/CommentThreads.tsx index 2d41abc..ed8d563 100644 --- a/app/src/components/ui/collaboration/CommentThreads.tsx +++ b/app/src/components/ui/collaboration/CommentThreads.tsx @@ -1,7 +1,11 @@ import React, { useState } from "react"; import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; -const CommentThreads: React.FC = () => { +interface CommentThreadsProps { + commentClicked: () => void; +} + +const CommentThreads: React.FC = ({ commentClicked }) => { const [expand, setExpand] = useState(false); const commentsedUsers = [{ creatorId: "1" }]; @@ -12,11 +16,25 @@ const CommentThreads: React.FC = () => { createdAt: "2 hours ago", comment: "Thread check", lastUpdatedAt: "string", - replies: [], + replies: [ + { + replyId: 'string', + creatorId: 'string', + createdAt: 'string', + lastUpdatedAt: 'string', + reply: 'string', + }, + { + replyId: 'string', + creatorId: 'string', + createdAt: 'string', + lastUpdatedAt: 'string', + reply: 'string', + } + ], }; function getUsername(userId: string) { - console.log(userId); const UserName = "username"; return UserName; } @@ -24,6 +42,7 @@ const CommentThreads: React.FC = () => { function getDetails(type?: "clicked") { if (type === "clicked") { setExpand(true); + commentClicked(); } else { setExpand((prev) => !prev); } @@ -35,9 +54,8 @@ const CommentThreads: React.FC = () => { onPointerEnter={() => getDetails()} onPointerLeave={() => getDetails()} onClick={() => getDetails("clicked")} - className={`comments-threads-container ${ - expand ? "open" : "closed" - } unread`} + className={`comments-threads-container ${expand ? "open" : "closed" + } unread`} >
{commentsedUsers.map((val, i) => ( @@ -61,7 +79,7 @@ const CommentThreads: React.FC = () => {
{CommentDetails.comment}
{CommentDetails.replies.length > 0 && ( -
{CommentDetails.replies.length}
+
{CommentDetails.replies.length} reply(s)
)} diff --git a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx index 1efff39..1b23a98 100644 --- a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx +++ b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx @@ -26,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 ( @@ -36,12 +41,12 @@ function CommentInstance({ comment }: { comment: CommentSchema }) { zIndexRange={[1, 0]} prepend sprite - center + center position={comment.position} rotation={comment.rotation} className='comments-main-wrapper' > - + {CommentRef.current && transformMode && ( { - console.log('comments: ', comments); + // console.log('comments: ', comments); }, [comments]) return ( diff --git a/app/src/types/collaborationTypes.d.ts b/app/src/types/collaborationTypes.d.ts index 26295d5..151ee58 100644 --- a/app/src/types/collaborationTypes.d.ts +++ b/app/src/types/collaborationTypes.d.ts @@ -10,7 +10,7 @@ interface CommentSchema { replies: Reply[]; } -export interface Reply { +interface Reply { replyId: string; creatorId: string; createdAt: string; From d4f6d5cbab873c1ec4fa6284a02b842da20a6e39 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Thu, 22 May 2025 17:35:12 +0530 Subject: [PATCH 4/4] refactor: update Messages and ThreadChat components to use Reply interface and improve data handling --- .../components/ui/collaboration/Messages.tsx | 22 ++++++++----------- .../ui/collaboration/ThreadChat.tsx | 16 ++++++-------- app/src/types/collaborationTypes.d.ts | 2 +- 3 files changed, 17 insertions(+), 23 deletions(-) diff --git a/app/src/components/ui/collaboration/Messages.tsx b/app/src/components/ui/collaboration/Messages.tsx index b0bfae4..69f9669 100644 --- a/app/src/components/ui/collaboration/Messages.tsx +++ b/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: { - userName: string; - userId: string; - message: string; - creationTime: string; - idEdited: boolean; - modifiedTime: string; - }; + val: Reply; i: number; } @@ -18,22 +11,25 @@ const Messages: React.FC = ({ val, i }) => { const [isEditing, setIsEditing] = useState(false); const [openOptions, setOpenOptions] = useState(false); const currentUser = "1"; + + const UserName = "username"; + return ( <> {isEditing ? ( <>
- {val.userName[0]} + {UserName[0]}
-
{val.userName}
-
{val.creationTime}
+
{UserName}
+
{val.createdAt}
- {val.userId === currentUser && ( + {val.creatorId === currentUser && (
{messages.map((val, i) => ( - + ))}
diff --git a/app/src/types/collaborationTypes.d.ts b/app/src/types/collaborationTypes.d.ts index 26295d5..151ee58 100644 --- a/app/src/types/collaborationTypes.d.ts +++ b/app/src/types/collaborationTypes.d.ts @@ -10,7 +10,7 @@ interface CommentSchema { replies: Reply[]; } -export interface Reply { +interface Reply { replyId: string; creatorId: string; createdAt: string;