Inserting a node on an existing link... automatically

I want to know how it would be possible to do the following: say we have three nodes in the diagram, A, B and C
Say that A and B are linked.

Now, I want to drag and drop C over the existing “A-to-B” link, and when I do that, I want the link to automatically convert into something like: an “A-to-C” link and a “C-to-B” link. Basically, I want the action of dropping a node over an existing link to insert the node in the middle and split the link in two.

I could not find any such example. It is possible, and if so, how would you do it?


It’s pretty straight-forward – implement a GraphObject.mouseDrop event handler on your Link template, maybe disconnect the selected/dragged Node, reconnect the Link to the Node, add a new link from the node to the original target. Extra credit: implement GraphObject.mouseEnter and mouseLeave event handlers to give user feedback.

A slightly more complicated example is implemented in the Flowgrammer sample: Flowgrammer

Oh, here’s another sample: Reordering Nodes

Thank you for your swift reply - I had success with your first example, and could extend the link template as you described.