Using too many leader lines makes the browser laggy

[AshutoshViramgama]

i am using the database structure to create a web structure of connection between database and also all are drag-gable if there are 10 tables connected to each other all the connections are redrawn again on drag change and the lag is only happening in chrome browser.

[anseki]

Hi @AshutoshViramgama, thank you for the comment.
How many lines did you add to the page?

[AshutoshViramgama]

Around 20 lines are drawn each time on drag

[anseki]

There are 116 lines in https://anseki.github.io/leader-line/ .
If this page works fine in your computer, it seems that your code has a bug.
If so, to reproduce that, could you show an example by using e.g. https://jsfiddle.net/ ?

[AshutoshViramgama]

@anseki i got your point but they are not changing or redrawing lines on each event.

I mean to say that on drag event on each mouse pointer changes each time 20 lines are removed and redrawn. for eg there are 20 lines at present on the page and if i change the mouse cursor on screen then at each mouse changing postion 20 lines are removed and redrawn again.

did you got my point?

[anseki]

Your report means that the code that removes and redraws lines has a bug. The example page that I indicated also has draggable lines. Therefore your code may have a bug.
Nobody can find a bug in your code without reading your code.

[ahmedshaaban00]

@anseki I'm facing same problem too with only 3 lines. I've 3 lines that are connected between 3 elements. when i keep dragging one of them, i have to re-draw/ call line.position() for all 3 lines. this causes laggy performance and a it's really noticeable. It'd be nice if you can provide several lines connected to one draggable item with a better performance.

my example is line that:

const lines = [<more than 3 line instances>];

const onDrag = ()=>{ // this is being called every 350ms (based on browser's drag event listener)
lines.forEach(line=>{
line.position();
})
}

[christian-iron60]

hi @ahmedshaaban00
I can't reproduce your problem. I'm using more then 3 arrows and its still good.
Is your code working fine with only one arrow? Because if you call position only every 350ms this can't be smooth as it results in about 3 updates per second. You need much more I think. Normally your Browser updates with 60 frames per second.

Anseki has 2 nice repositories that might help you.
https://github.com/anseki/anim-event ...to add event listener with better perfomance by using requestAnimationFrame.
https://github.com/anseki/plain-draggable ...create draggable elements with onMove event and more. I think these events are also optimized by requestAnimationFrame

[anseki]

@christian-iron60, thank you for your help. 😄

@ahmedshaaban00, I also can't reproduce that problem.
Your code maybe have a bug. But we didn't read your code, i.e. the example that you shew is not enough. Nobody can find a bug in your code without reading your code.
Also, try to use AnimEvent.

[yuleiQ]

https://jsfiddle.net/

i meet same questions， please tell me how to fix。thanks

[anseki]

No reply came from @yuleiQ but the issue seems to have been already solved by solving of @yuleiQ's another issue. 😄