• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

259
Vistas
¿Cómo puedo configurar el cursor para 'agarrar' al desplazarme en el flujo de reacción?

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 ):

Editar esperanzador-ellis-nr675y

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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} >
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda