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

Arrow lose start point #18

Closed map82top closed 4 years ago

map82top commented 4 years ago

Hello! I want connect my elements in Droppable containers with help arrows. As drop containers I use react-beautiful-dnd. All work great, except case when I drop start element of arrow in other drop container. In this case arrow lose start point. I don't now how solve this problem. Please, tell me how can do it?

Sandbox: https://codesandbox.io/s/arrowlosestartpoint-4jfem

Eliav2 commented 4 years ago

first - thanks for opening the first issue. I'm on at my friend. from first glimpse at seems like a problem related to a unique key (or key matching)assignment(in your code,not the lib), I've encountered such problems when testing the lib my self(see here). I will give it a look and try to figure out what is the source of this bug.

Eliav2 commented 4 years ago

Found the Problem the problem: I've decided to skip anchors refs check when updating because of performance considerations because i thought the anchors will change rarely if at all. but you showed a case where it is happening(when 'drag and drop' a container you actually change the position of the anchor in the DOM tree - but the id of the prop do not changes so i do not update him. this is why it is good idea you use react refs and not id's).

the solution: I've added I simple check(in my lib) which fixed the problem. i will run few tests and will upload a 1.2.2 patch soon after finishing last tests. however - i think that if you will change the anchors refs to React refs and not id's it will work.

Eliav2 commented 4 years ago

1.2.2 was published and this bug do not happen anymore. thanks for showing me this bug. any farther questions? if not please close this issue.

map82top commented 4 years ago

Hello, the problem really solved for a example, however in my project nothing changed: I have some droppabble containers. When I'll droping first element from a first container on a element from a second container then this first element place into a third container and creating arrow from first element to a element on which this first element was dropped. But when I do it with seconde element from a first container first arrow lose its coorditantes (start and end). If do same with third element from a first container then a second arrow lose its coordiantes as well as the first. I'll try use refs instead ids. If I will not success with solve this problem, I upload on github my project for you can look at my problem.

Eliav2 commented 4 years ago

Hey, this again sound like key related issue. I would like to see the bug for myself(with id's) . You can upload your entire project files to code sandbox and shere the link privetly if you want. Github also ok (By the way you're are welcomed to try locate the bug by yourself and open a pull request with a fix or just give me a suggestion where you think it is)

Eliav2 commented 4 years ago

Hey friend. Did you solve the problem? @map82top

map82top commented 4 years ago

Hello, I don't understand how, but my arrows on ids starting work. I something changed in my code and it starting work! Unfortunately, I don't know what( If I find out what solved my problem I tell you. Thank you!

Eliav2 commented 4 years ago

If so it's not a problem with the lib.(or maybe you did not updated correctly react-xarrows 1.2.2 in your project). Please close the issue then.

map82top commented 4 years ago

Maybe