performant css transformations and position updates

[HFx6]

What's the recommended way to perform css transformations on the leader-line svgs in order to keep them consistent with their connected items?

My DOM hierarchy is similar to

- canvas
   -  node-wrapper
      - node 1
      - ...
      - node n
      - leader-wrapper
         - line 1
         - ...
         - line m

I have moved the svgs into their owner wrapper after line creation to make moving them easier. An example view can be seen here of how a setup could be constructed where the "canvas" is panned across (in reality is just moves the node-wrapper position as the user drags)

before transform	after transform

The issue is "solved" to call line.position() on pan, but its not performant and lags with only a handful of lines. Is there a better way to solve this with leader-line?

I'm using this in a react environment, I keep reference to all connections, nodes and line instances. I had made my own bezier connector line solution where each socket position used a reference offset{} based on the current "pan", which very efficient when moving many connections, can leader-line do something similar?

[anseki]

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.

[HFx6]

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.

[anseki]

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.

[HFx6]

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.

[anseki]

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".

[HFx6]

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.

[anseki]

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 (https://github.com/anseki/leader-line/issues/381#issuecomment-1327112487).

[anseki]

No reply came, then this abandoned issue is closed.