v2-ui #94
|
@ -1,7 +1,11 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
|
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 [expand, setExpand] = useState(false);
|
||||||
const commentsedUsers = [{ creatorId: "1" }];
|
const commentsedUsers = [{ creatorId: "1" }];
|
||||||
|
|
||||||
|
@ -12,11 +16,25 @@ const CommentThreads: React.FC = () => {
|
||||||
createdAt: "2 hours ago",
|
createdAt: "2 hours ago",
|
||||||
comment: "Thread check",
|
comment: "Thread check",
|
||||||
lastUpdatedAt: "string",
|
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) {
|
function getUsername(userId: string) {
|
||||||
console.log(userId);
|
|
||||||
const UserName = "username";
|
const UserName = "username";
|
||||||
return UserName;
|
return UserName;
|
||||||
}
|
}
|
||||||
|
@ -24,6 +42,7 @@ const CommentThreads: React.FC = () => {
|
||||||
function getDetails(type?: "clicked") {
|
function getDetails(type?: "clicked") {
|
||||||
if (type === "clicked") {
|
if (type === "clicked") {
|
||||||
setExpand(true);
|
setExpand(true);
|
||||||
|
commentClicked();
|
||||||
} else {
|
} else {
|
||||||
setExpand((prev) => !prev);
|
setExpand((prev) => !prev);
|
||||||
}
|
}
|
||||||
|
@ -35,9 +54,8 @@ const CommentThreads: React.FC = () => {
|
||||||
onPointerEnter={() => getDetails()}
|
onPointerEnter={() => getDetails()}
|
||||||
onPointerLeave={() => getDetails()}
|
onPointerLeave={() => getDetails()}
|
||||||
onClick={() => getDetails("clicked")}
|
onClick={() => getDetails("clicked")}
|
||||||
className={`comments-threads-container ${
|
className={`comments-threads-container ${expand ? "open" : "closed"
|
||||||
expand ? "open" : "closed"
|
} unread`}
|
||||||
} unread`}
|
|
||||||
>
|
>
|
||||||
<div className="users-commented">
|
<div className="users-commented">
|
||||||
{commentsedUsers.map((val, i) => (
|
{commentsedUsers.map((val, i) => (
|
||||||
|
@ -61,7 +79,7 @@ const CommentThreads: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
<div className="message">{CommentDetails.comment}</div>
|
<div className="message">{CommentDetails.comment}</div>
|
||||||
{CommentDetails.replies.length > 0 && (
|
{CommentDetails.replies.length > 0 && (
|
||||||
<div className="replies">{CommentDetails.replies.length}</div>
|
<div className="replies">{CommentDetails.replies.length} reply(s)</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -10,7 +10,7 @@ function updateDistanceText(
|
||||||
|
|
||||||
////////// Updating the Distance Texts of the lines that are affected during drag //////////
|
////////// 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) => {
|
affectedLines.forEach((lineIndex) => {
|
||||||
const mesh = floorPlanGroupLine.current.children[lineIndex] as THREE.Mesh;
|
const mesh = floorPlanGroupLine.current.children[lineIndex] as THREE.Mesh;
|
||||||
|
|
|
@ -10,7 +10,6 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
|
||||||
const [selectedComment, setSelectedComment] = useState<CommentSchema | null>(null);
|
const [selectedComment, setSelectedComment] = useState<CommentSchema | null>(null);
|
||||||
const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
|
const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
const keyCombination = detectModifierKeys(e);
|
const keyCombination = detectModifierKeys(e);
|
||||||
|
@ -22,13 +21,18 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
|
||||||
setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
|
setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
window.addEventListener("keydown", handleKeyDown);
|
window.addEventListener("keydown", handleKeyDown);
|
||||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||||
}, [selectedComment]);
|
}, [selectedComment]);
|
||||||
|
|
||||||
|
const commentClicked = () => {
|
||||||
|
console.log('hii');
|
||||||
|
setSelectedComment(comment);
|
||||||
|
}
|
||||||
|
|
||||||
if (comment.state === 'inactive' || isPlaying) return null;
|
if (comment.state === 'inactive' || isPlaying) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<>
|
<>
|
||||||
|
@ -42,21 +46,7 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
|
||||||
rotation={comment.rotation}
|
rotation={comment.rotation}
|
||||||
className='comments-main-wrapper'
|
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>
|
</Html>
|
||||||
{CommentRef.current && transformMode && (
|
{CommentRef.current && transformMode && (
|
||||||
<TransformControls
|
<TransformControls
|
||||||
|
|
|
@ -6,7 +6,7 @@ function CommentInstances() {
|
||||||
const { comments } = useCommentStore();
|
const { comments } = useCommentStore();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('comments: ', comments);
|
// console.log('comments: ', comments);
|
||||||
}, [comments])
|
}, [comments])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -218,7 +218,7 @@ const MeasurementTool = () => {
|
||||||
sprite
|
sprite
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
{startConePosition.distanceTo(endConePosition).toFixed(2)} m
|
{(startConePosition.distanceTo(endConePosition) + (coneSize.height)).toFixed(2)} m
|
||||||
</div>
|
</div>
|
||||||
</Html>
|
</Html>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue