feat: Enhance comment positioning and dragging functionality with improved state management and logging

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<HTMLDivElement>) => {
         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<HTMLDivElement>) => {
+    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<HTMLDivElement>) => {
         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",

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;

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<Object3D | null>(null);
-    const { selectedComment, setSelectedComment } = useSelectedComment()
+    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);
@@ -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);
         }