search

Eliav2 / react-xarrows

Draw arrows (or lines) between components in React!
https://codesandbox.io/embed/github/Eliav2/react-xarrows/tree/master/examples?fontsize=14&hidenavigation=1&theme=dark
MIT License
584 stars 75 forks source link

Issue with resizing "Start" node #24

Closed cole-robertson closed 4 years ago

cole-robertson commented 4 years ago

Hello, I have a problem when I resize one of my two endpoints for the arrow. The problem is shown below: arrowResizeIssue When I resize my start node, the arrows end up not adjusting correctly. This sometimes overlaps like you see in the Gif or sometimes the arrows do not stretch long enough to point to the endpoint item numbers.

I have tried monitorDomchanges={true} and that has not changed the behavior.

Eliav2 commented 4 years ago

please demonstrate your issue in codesandbox. you probably put xarrows components in the react tree where it's not being rerendered because of rerendering of the collapsible input element. from your animation, I assume the collapsable input element is brother(in the same level of hierarchy in DOM tree) of the arrows, so when he triggers an update for himself the xarrows are not being rerendered. you should trigger an update of the parent component of both the arrows and the input elements.

betCG commented 4 years ago

Hi @cole-robertson did you solve the issue? I'm having the same problem.

cole-robertson commented 4 years ago

Hi @cole-robertson did you solve the issue? I'm having the same problem.

I ended up refactoring my component to avoid this issue, but to directly solve it, what @Eliav2 stated makes sense to me. You should try to move the state that is controlling the change in element size one level above where your X-Arrow components are. Then when you update the state, this will cause a rerender of the X-Arrows as well.