From b957b609fa242cd8efcb0ad44bf5d08ddeab50a1 Mon Sep 17 00:00:00 2001
From: Poovizhi99 <poovizhi@hexrfactory.com>
Date: Sat, 5 Jul 2025 11:37:20 +0530
Subject: [PATCH] fix: Update event listener cleanup in DraggableSphere and
 DraggableLineSegment components

---
 .../instances/animator/interactivePoint.tsx   | 116 ++----------------
 .../instances/animator/vehicleAnimator.tsx    |   9 +-
 2 files changed, 19 insertions(+), 106 deletions(-)

diff --git a/app/src/modules/simulation/vehicle/instances/animator/interactivePoint.tsx b/app/src/modules/simulation/vehicle/instances/animator/interactivePoint.tsx
index d6174e3..5705cc5 100644
--- a/app/src/modules/simulation/vehicle/instances/animator/interactivePoint.tsx
+++ b/app/src/modules/simulation/vehicle/instances/animator/interactivePoint.tsx
@@ -16,7 +16,6 @@ export default function InteractivePoints({ agvUuid }: InteractivePointsProps) {
     const { isPaused } = usePauseButtonStore();
     const { isPlaying } = usePlayButtonStore();
     const { speed } = useAnimationPlaySpeed();
-    // const raycaster = useRef(new THREE.Raycaster());
     const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // XZ plane
     const progressRef = useRef<number>(0);
     const { selectedPath } = useSelectedPath();
@@ -82,28 +81,6 @@ export default function InteractivePoints({ agvUuid }: InteractivePointsProps) {
 
     const downPosition = useRef<{ x: number; y: number } | null>(null);
 
-    // const handleMouseDown = (e: MouseEvent) => {
-    //     downPosition.current = { x: e.clientX, y: e.clientY };
-    // };
-
-    // const handleClick = useCallback((e: MouseEvent) => {
-    //     if (
-    //         !downPosition.current ||
-    //         Math.abs(downPosition.current.x - e.clientX) > 2 ||
-    //         Math.abs(downPosition.current.y - e.clientY) > 2
-    //     ) {
-    //         return;
-    //     }
-
-    //     const intersection = new THREE.Vector3();
-    //     if (raycaster.ray.intersectPlane(plane.current, intersection) && activeTool !== "pen") {
-    //         const pointArray = intersection.toArray() as [number, number, number];
-    //         console.log('pointArray: ', pointArray);
-    //         setPoints((prev) => [...prev, pointArray]);
-    //         console.log("points created");
-    //     }
-    // }, [activeTool, raycaster]);
-
     const handleMouseDown = useCallback((e: MouseEvent) => {
         hasClicked.current = false;
         downPosition.current = { x: e.clientX, y: e.clientY };
@@ -141,25 +118,6 @@ export default function InteractivePoints({ agvUuid }: InteractivePointsProps) {
     }, [activeTool, raycaster, points]);
 
 
-
-    // const handleClick = useCallback((e: MouseEvent) => {
-    //     if (
-    //         !downPosition.current ||
-    //         Math.abs(downPosition.current.x - e.clientX) > 2 ||
-    //         Math.abs(downPosition.current.y - e.clientY) > 2
-    //     ) {
-    //         return;
-    //     }
-
-    //     const intersection = new THREE.Vector3();
-    //     if (raycaster.ray.intersectPlane(plane.current, intersection) && activeTool !== "pen") {
-    //         const pointArray = intersection.toArray() as [number, number, number];
-    //         console.log('pointArray: ', pointArray);
-    //         setPoints((prev) => [...prev, pointArray]);
-    //         console.log("points created");
-    //     }
-    // }, [activeTool, raycaster]);
-
     useEffect(() => {
         if (isPlaying) return;
         const domElement = gl.domElement;
@@ -238,68 +196,6 @@ export default function InteractivePoints({ agvUuid }: InteractivePointsProps) {
 
 
 
-
-// function DraggableSphere({
-//     index,
-//     position,
-//     onMove,
-// }: {
-//     index: number;
-//     position: THREE.Vector3;
-//     onMove: (index: number, pos: THREE.Vector3) => void;
-// }) {
-//     const meshRef = useRef<THREE.Mesh>(null);
-//     const { gl, controls, raycaster } = useThree();
-//     const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); // XZ plane
-//     const isDragging = useRef(false);
-//     const { activeTool } = useActiveTool();
-
-//     const onPointerDown = (e: ThreeEvent<PointerEvent>) => {
-//         if (activeTool !== 'pen') return;
-
-//         isDragging.current = true;
-//         gl.domElement.style.cursor = 'grabbing';
-
-//         if (controls) {
-//             (controls as any).enabled = false;
-//         }
-//     };
-
-//     const onPointerMove = (e: ThreeEvent<PointerEvent>) => {
-//         if (!isDragging.current || activeTool !== 'pen') return;
-
-//         const intersect = new THREE.Vector3();
-//         if (raycaster.ray.intersectPlane(plane, intersect)) {
-//             meshRef.current!.position.copy(intersect);
-//             onMove(index, intersect);
-//         }
-//     };
-
-//     const onPointerUp = () => {
-//         if (activeTool !== 'pen') return;
-
-//         isDragging.current = false;
-//         gl.domElement.style.cursor = 'default';
-//         if (controls) {
-//             (controls as any).enabled = true;
-//         }
-//     };
-
-//     return (
-//         <mesh
-//             ref={meshRef}
-//             position={position}
-//             onPointerDown={onPointerDown}
-//             onPointerMove={onPointerMove}
-//             onPointerUp={onPointerUp}
-//             onPointerMissed={onPointerUp}
-//         >
-//             <sphereGeometry args={[0.2, 16, 16]} />
-//             <meshStandardMaterial color="red" />
-//         </mesh>
-//     );
-// }
-
 function DraggableSphere({
     index,
     position,
@@ -342,6 +238,12 @@ function DraggableSphere({
         gl.domElement.style.cursor = 'default';
         if (controls) (controls as any).enabled = true;
     };
+    useEffect(() => {
+        gl.domElement.addEventListener("pointerup", onPointerUp);
+        return (() => {
+            gl.domElement.removeEventListener("pointerup", onPointerUp);
+        })
+    }, [activeTool])
 
     return (
         <mesh
@@ -405,6 +307,12 @@ function DraggableLineSegment({
         gl.domElement.style.cursor = 'default';
         if (controls) (controls as any).enabled = true;
     };
+    useEffect(() => {
+        gl.domElement.addEventListener("pointerup", onPointerUp);
+        return (() => {
+            gl.domElement.removeEventListener("pointerup", onPointerUp);
+        })
+    }, [activeTool])
 
     return (
         <Line
diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
index 954beec..171cb5f 100644
--- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
+++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
@@ -265,7 +265,7 @@ function DraggableSphere({
         return (() => {
             gl.domElement.removeEventListener("pointerup", onPointerUp);
         })
-    }, [])
+    }, [activeTool])
 
     return (
         <mesh
@@ -330,7 +330,12 @@ function DraggableLineSegment({
         gl.domElement.style.cursor = 'default';
         if (controls) (controls as any).enabled = true;
     };
-
+    useEffect(() => {
+        gl.domElement.addEventListener("pointerup", onPointerUp);
+        return (() => {
+            gl.domElement.removeEventListener("pointerup", onPointerUp);
+        })
+    }, [activeTool])
     return (
         <Line
             points={[start, end]}