search

dash14 / v-network-graph

An interactive network graph visualization component for Vue 3
https://dash14.github.io/v-network-graph/
MIT License
495 stars 44 forks source link

Dynamically Calculate Edge Margin for Source and Target [feature request] #155

Closed dam90 closed 1 month ago

dam90 commented 1 month ago

The power AND extensibility of vng is amazing! Thank you so much for all your work.

I use the graph to render arbitrary node components as svg foreignObjects, so my nodes can end up being various shapes/sizes. For example, they can all be divs with dynamically updating data, resulting in rectangles with unique dimensions.

It would be nice to be able to compute the "margin" property of each edge independently, and for each each to compute the margin of the source- and target edges independently. This would allow me to move the starting/terminating points of the edge to a location that makes sense for my various nodes.

In the example above, I'd probably use the "max radius" of each node (so from the node center to it's corner) as the margin value. But I could also make it more complex, taking into account the angle of the edge and causing the margin to adjust accordingly. Either way, if could specify the margin is a function, it could be left to my own design.

Thanks again!

dam90 commented 1 month ago

Oh, maybe this isn't necessary.... I just noticed that when I click on a node, vng seems to update the marker positions to move out to the edge of the rendered div. Maybe I have some poorly designed reactivity going on somewhere.

dam90 commented 1 month ago

Yep... found it. :P