startSocket endSocket position 'auto' not working properly

[zakk616]

startSocket: 'right',
endSocket: 'left',

Works fine!

Problem

startSocket: 'auto',
endSocket: 'auto',

facing issue with line position.

[anseki]

Hi @zakk616, thank you for the comment.
You have to specify {startSocket: 'bottom', endSocket: 'top'} to the line, because nobody knows where is a problem and nobody knows a correct line for you.

[zakk616]

Hi @zakk616, thank you for the comment. You have to specify {startSocket: 'bottom', endSocket: 'top'} to the line, because nobody knows where is a problem and nobody knows a correct line for you.

actually these cards are being produced dynamically and the screen size is also responsive, I can not specify {startSocket: 'bottom', endSocket: 'top'} but {startSocket: 'auto', endSocket: 'auto'} so the line should be drawn and redirected automaticaly.

{startSocket: 'bottom', endSocket: 'top'} works fine when on desktop and mobile screen.
Desktop Screen:

Mobile Screen:

but when cards are shown on medium screens the line direction does not work properly.

[anseki]

Sorry, we don't know what the "properly" mean for you.
You can get coordinates of elements easily by using e.g. getBoundingClientRect, to choose a socket that you want.

[zakk616]

to provide startSocket endSocket dynamicaly when the page resizes, one needs to implement getBoundingClientRect to grab new position of the element first and then draw the line on new position and provide startSocket endSocket.

[anseki]

Yes. 😄