performant css transformations and position updates about leader-line HOT 8 CLOSED

Hi @HFx6, thank you for the comment.
Sorry, my English is poor.
Do you mean that LeaderLine is slow?
If so, your better way to solve the issue is the using another library as helper drawing. If you want to draw lines by using SVG, there are great libraries such as Snap.svg to help handling SVG.
Because the LeaderLine is a library for beginners that allow to draw lines easily. Therefore, the library is too big and it has many method. Also, it creates many elements that might be unused.
Then, it is unsuitable for an app that requires high performance.

from leader-line.

Thanks for the quick response @anseki

Do you mean that LeaderLine is slow?

Sorry if I my explanation wasn't very clear 😅, calling position() on every pointermove event is quite slow when you have more than a couple LeaderLines displayed. The alternative is to set an offset to the anchor or socket automatically that matches the transform of the element(s), but i'm not sure if LeaderLine supports this. Could there be another way i am missing?

if it helps, this fiddle you made https://jsfiddle.net/y35sc1th/ is similar to what I have in my environment, however, the wrapping div of the "nodes" allows you to pan around infinitely.

from leader-line.

calling position() on every pointermove event is quite slow when you have more than a couple LeaderLines displayed.

Do you mean that LeaderLine is slow?
If so, your better way to solve the issue is the using another library as helper drawing.
Typically, an animation is performance degradation regardless of the LeaderLine if your code does something in an event handler that is fired too frequently (e.g. pointermove).
This may help you: https://github.com/anseki/anim-event/
You should see that the example in JSFiddle is not slow. The example uses AnimEvent above.

from leader-line.

Thanks for the link, ill see if can call position more efficiently that way.

Do you mean that LeaderLine is slow?

You're right that its not LeaderLine specifically slow, but for example if i move a collection of 4 items all connected via a LeaderLine (like my image), the CSS transform is extremely degraded and consumes a large amount of memory. I was hoping you'd had run into this case before and found an elegant solution (e.g. passing in offset references to the anchor point).

the example in JSFiddle is not slow

Yup, LeaderLine and PlainDraggable are excellent libraries and I switched to them due to your use of efficient animation handling. the issue doesn't exist in that example, but if you were to "pan" in the canvas while calling position(), there would be some significant performance drops.

from leader-line.

if i move a collection of 4 items all connected via a LeaderLine (like my image), the CSS transform is extremely degraded and consumes a large amount of memory.

Could you show me an example to reproduce that?
If large memory is really consumed, your code may have bugs. It might have a big problem about "memory leaking".

from leader-line.

I will try a couple more attempts using your anim-event lib, and try some more performant management of the LeaderLines first. Bit of a hassle to reduce my react code to jsfiddle to show off this specific thing; because of many things that could be causing this, i will try and investigate more to see how I can I best replicate this node editor.

from leader-line.

Sorry, I couldn't understand your words well.
I think that you try to fix your code because it might have a problem about "memory leaking" regardless of the LeaderLine.
When you fixed the bug, the issue that make LeaderLine slow should be solved.
If your app is still slow nevertheless, you had better use another library as I said first (#381 (comment)).

from leader-line.

No reply came, then this abandoned issue is closed.

from leader-line.