• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

256
Views
¿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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error