From fc53ab2e24a46f5a9e75c010608a87f4a45d4942 Mon Sep 17 00:00:00 2001 From: Poovizhi99 Date: Fri, 20 Jun 2025 09:23:23 +0530 Subject: [PATCH] feat: Enhance comment positioning and dragging functionality with improved state management and logging --- .../components/ui/collaboration/ThreadChat.tsx | 18 ++++++++++++------ .../collaboration/comments/commentsGroup.tsx | 2 ++ .../commentInstance/commentInstance.tsx | 13 +++++++++++-- 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/app/src/components/ui/collaboration/ThreadChat.tsx b/app/src/components/ui/collaboration/ThreadChat.tsx index 071e1b6..f67c60a 100644 --- a/app/src/components/ui/collaboration/ThreadChat.tsx +++ b/app/src/components/ui/collaboration/ThreadChat.tsx @@ -31,10 +31,11 @@ const ThreadChat: React.FC = () => { const [dragging, setDragging] = useState(false); const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 }); const [position, setPosition] = useState({ x: position2Dstate.x, y: position2Dstate.y }); + console.log('position2Dstate: ', position2Dstate); + console.log('position:Comment ', position); const { threadSocket } = useSocketStore(); const modeRef = useRef<'create' | 'edit' | null>(null); - useEffect(() => { modeRef.current = mode; }, [mode]); @@ -74,7 +75,6 @@ const ThreadChat: React.FC = () => { const handlePointerDown = (event: React.PointerEvent) => { if (event.button !== 0) return; - // Avoid dragging if a button, icon, textarea etc. was clicked const target = event.target as HTMLElement; if ( @@ -102,7 +102,8 @@ const ThreadChat: React.FC = () => { wrapper.setPointerCapture(event.pointerId); }; - const handlePointerMove = (event: React.PointerEvent) => { + const handlePointerMove = ({ clientX, clientY }: { clientX: number; clientY: number }) => { + if (!dragging) return; const container = document.getElementById("work-space-three-d-canvas"); @@ -112,8 +113,8 @@ const ThreadChat: React.FC = () => { const containerRect = container.getBoundingClientRect(); const wrapperRect = wrapper.getBoundingClientRect(); - let newX = event.clientX - containerRect.left - dragOffset.x; - let newY = event.clientY - containerRect.top - dragOffset.y; + let newX = clientX - containerRect.left - dragOffset.x; + let newY = clientY - containerRect.top - dragOffset.y; const maxX = containerRect.width - wrapper.offsetWidth; const maxY = containerRect.height - wrapper.offsetHeight; @@ -124,6 +125,11 @@ const ThreadChat: React.FC = () => { setPosition({ x: newX, y: newY }); }; + useEffect(() => { + // handlePointerMove({ clientX: position.x, clientY: position.y }) + // console.log('wrapperRef: ', wrapperRef.current); + }, [selectedComment]) + const handlePointerUp = (event: React.PointerEvent) => { if (!dragging) return; setDragging(false); @@ -259,7 +265,7 @@ const ThreadChat: React.FC = () => { ref={wrapperRef} className="thread-chat-wrapper" onPointerDown={handlePointerDown} - onPointerMove={handlePointerMove} + onPointerMove={(e) => handlePointerMove({ clientX: e.clientX, clientY: e.clientY })} onPointerUp={handlePointerUp} style={{ position: "absolute", diff --git a/app/src/modules/collaboration/comments/commentsGroup.tsx b/app/src/modules/collaboration/comments/commentsGroup.tsx index dc025ef..ac181ca 100644 --- a/app/src/modules/collaboration/comments/commentsGroup.tsx +++ b/app/src/modules/collaboration/comments/commentsGroup.tsx @@ -85,6 +85,8 @@ function CommentsGroup() { 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() }) + console.log('position.toArray() : ', position.toArray()); + console.log('position: ', position); position.project(camera); const x = (position.x * 0.5 + 0.5) * size.width; diff --git a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx index 2506c93..99b279d 100644 --- a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx +++ b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx @@ -4,15 +4,17 @@ 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 } from 'three'; +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 [selectedObject, setSelectedObject] = useState(null); - const { selectedComment, setSelectedComment } = useSelectedComment() + const { selectedComment, setSelectedComment, setPosition2Dstate } = useSelectedComment() const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null); const groupRef = useRef(null); + const { size, camera } = useThree(); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { const keyCombination = detectModifierKeys(e); @@ -31,6 +33,13 @@ function CommentInstance({ comment }: { comment: CommentSchema }) { const commentClicked = () => { 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.3) * size.height; + setPosition2Dstate({ x, y }) + if (groupRef.current) { setSelectedObject(groupRef.current); }