Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Update event listener cleanup in DraggableSphere and DraggableLineSegment components

Browse Source
This commit is contained in:
Poovizhi99
2025-07-05 11:37:20 +05:30
parent dee0a96287
commit b957b609fa
2 changed files with 19 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
app/src/modules/simulation/vehicle/instances/animator/interactivePoint.tsx
View File

@@ -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

9
app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
View File

@@ -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]}