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.
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" }} ...
No puedo hacer que el cursor esté 'agarrando' mientras se mantiene presionado el botón del mouse sobre el fondo.
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
):
en su lugar, agregue el oyente a la ventana, ¿qué tal si usa la API de eventos de flujo de reacción en su lugar? su código funciona perfectamente si hace clic derecho. tal vez el flujo de reacción haga stopPropagation () para el mouse izquierdo
<ReactFlow style={{ cursor: mouseDown ? "grabbing" : "grab" }} nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} onInit={onInit} fitView onMoveStart={handleMouseDown} onMoveEnd={handleMouseUp} >