Leader Line Inside Scrolling Div

First of all, this library is pretty amazing. Really good work! Well documented and the arrows/lines are highly customizable. Im developing an online editor with ‘nodes’, which are connected with ‘leader-lines’ and this library helped me a lot.

Im just facing a problem, I wasn’t able to solve myself. The body has 100% width and height and I have a bigger inner div which is the “editor area”. It is scrollable (and later dragable) so the user can navigate though it. The arrows are connecting different divs (nodes) the user can create and drag around. For repositioning I use the .position() function. At the moment I just reposition all arrows if I detect a scroll on my inner div but this is pretty inefficient and it’s getting jerky.

So I tried to move the arrows to my editor div, like you mentioned in Issue #159 document.getElementById('container').appendChild(document.querySelector('.leader-line')); The arrows scrolls with the div, thats good but now the positions are not calculated correctly. It would be pretty awesome if this library can support appending the leader-lines to another div so they move with them without the need of new calculations (scrolling divs…dragable elements etc.) I think this might be a nice and usefull feature. If this feature is to complex in general, I would be glad if you can help me finding a way to solve the position calculation problem in my case.

Its a web application based on angular but I made a minimalistic pure html/css/js example for you. Just scroll in the div and an click the reposition button https://jsfiddle.net/2um5caLn/52/

Best regards, Christian