Estoy usando react-flow y el usuario puede desplazarse haciendo clic y arrastrando el fondo. Me gustaría que el cursor sea "agarrar" cuando se desplaza sobre el fondo, y que el cursor sea "agarrar" mientras el usuario tiene el botón del mouse presionado y está arrastrando/panorámica.

Qué esta trabajando:

Pude hacer que el cursor se 'agarrara' mientras se desplazaba sobre el fondo configurando el estilo en ReactFlow de esta manera:

 <ReactFlow style={{ cursor: "grab" }} ...

Lo que no funciona:

No puedo hacer que el cursor esté 'agarrando' mientras se mantiene presionado el botón del mouse sobre el fondo.

Lo que he probado:

Intenté configurar el cursor condicionalmente en función de una variable de estado mouseDown como esta: style={{ cursor: mouseDown ? 'grabbing' : 'grab' }}

Pero, por alguna razón, los eventos mouseDown/mouseUp no se activan con el mouse sobre el fondo, aunque se activan al hacer clic en otros elementos. Así es como he tratado de hacer eso:

 const [mouseDown, setMouseDown] = useState(false); const handleMouseDown = () => { setMouseDown(true); console.log('mouse down'); }; const handleMouseUp = () => { setMouseDown(false); console.log('mouse up'); }; useEffect(() => { window.addEventListener('mousedown', handleMouseDown); window.addEventListener('mouseup', handleMouseUp); return () => { window.removeEventListener('mousedown', handleMouseDown); window.removeEventListener('mouseup', handleMouseUp); }; }, []);

Aquí hay un ejemplo de codesandbox donde el cursor está configurado correctamente para 'agarrar', pero no se configura para 'agarrar' (consulte el archivo src/Flow.js ):