connectors between elements
Hi everyone, I have no idea how to implement lines that connect elements on the left to only one element on the right. Can anyone help me?
11 Replies
I'd use svg for this
I would guess this will require a language that can handle some degree of logic and dynamic updates. Perhaps a mix of gsap.com and SVG lines/paths – maybe there is an other dedicated library for this type of requirement.
This could be done with vanilla JS. and, as has been suggested, SVG paths.
1. Get the current checked radio button and it's parent container left-hand edge (to know where to end the line)
2. Loop through the checkboxes to get the "checked" ones.
3. For each checked checkbox, find it's parents right-hand edge and draw an SVG path, with curve, between this edge and the edge of the radio button parent.
It's definitely not a trivial job. There's many ways to do this. Especially if you intend to make this interactive (like dragging connections around) that'll add a lot of complexity
yeah, dragging woult be a nightmare. I'd probably just update it on drop and hide it during drag
I'll try to use svg. Thanks
It would also be awesome though
Very good advanced exercise
bonus points if the dragging isn't just vertical, and the line sticks with the dragged item regardless
Yeah a full node editor
I might consider using canvas at that point though, but not sure
Hi everyone, the SVG seems to be working fine, but since all elements are expandable, they push the elements below them, causing the SVG to display in the wrong position. Does anyone have any ideas on how to fix this issue?
you'll have to redraw the SVGs when expanding