import React, { useEffect, useState, useRef } from "react";
import { Html } from "@react-three/drei";
import { useThree } from "@react-three/fiber";
export function CloseButton({
isActive,
position,
onClose,
}) {
const { gl } = useThree();
const [shouldShow, setShouldShow] = useState(false);
const timerRef = useRef(null);
const canvasRef = useRef(null);
useEffect(() => {
canvasRef.current = gl.domElement;
}, [gl]);
// 250ms delay before showing
useEffect(() => {
// Clear any existing timer
if (timerRef.current) {
clearTimeout(timerRef.current);
timerRef.current = null;
}
if (!isActive) {
// Use setTimeout(0) to avoid synchronous setState
timerRef.current = setTimeout(() => {
setShouldShow(false);
}, 0);
return () => {
if (timerRef.current)
clearTimeout(timerRef.current);
};
}
timerRef.current = setTimeout(() => {
setShouldShow(true);
}, 250);
return () => {
if (timerRef.current) {
clearTimeout(timerRef.current);
timerRef.current = null;
}
};
}, [isActive]);
if (!isActive) return null;
// Convert 3D position to screen coordinates for Html
// Html centers by default, so we need to adjust
const [x, y, z] = position;
return (
);
}