search

pierpo / react-archer

🏹 Draw arrows between React elements 🖋
https://pierpo.github.io/react-archer/
MIT License
1.15k stars 67 forks source link

Stickied ArcherElements don't redraw arrows when scrolling #154

Closed AdnanTheExcellent closed 2 years ago

AdnanTheExcellent commented 3 years ago

I am implementing React Archer in a 2 column view where there are groups of elements on one side pointing to the other. Each section has many elements pointing to 1 element. Sometimes the elements in one column can be a long list and go off the monitor. I implemented a sticky for the other sides element so when i scroll down the list that element stays on the screen. The ArcherElement is the sticky element and it successfully stickies when scrolling. However, the arrows do not redraw when i'm scrolling. When i resize the window or interact with something else on the screen after scrolling, the arrows redraw correctly. Screenshot example below of arrows not redrawing after scrolling:

MicrosoftTeams-image (10)

pierpo commented 3 years ago

Hi, thanks for reporting this.

As a workaround I think you can try to call refreshScreen() (that you can find in the ref of ArcherContainer) whenever you need (so, on scroll).

Tell me if it works or if you need further assistance 😉

I need to investigate whether this can be solved on the lib's side. I'm not sure we can have access to whether there's some scrolling happening!

pierpo commented 2 years ago

Hi!

Could you try again with 4.0.1?

If it's not solved yet, could you provide a codesandbox? It's too hard to work on the issue otherwise :blush:

Thanks!

AdnanTheExcellent commented 2 years ago

Hey, thanks for the update! i removed the sticky component in our code a while ago because i never got it working, so i can't exactly test this easily. On a side note, i tried upgrading and noticed that there's no classNames prop for the ArcherElement.

pierpo commented 2 years ago

Thank you for your answer! And thank you for trying 😊

About ArcherElement, it's normal actually. ArcherElement does not render anything in the DOM, it's purely a virtual component on React's side. So we can't attach any className to it!

You need to pass a className to the child of ArcherElement.

If it used to be a props to ArcherElement... then I guess it was a mistake 😄

pierpo commented 2 years ago

Anyway, I think I'll close this issue. Let's see if someone else faces it! If so, feel free to re-open!