Hybrid handles

[nrayann]

Thank you for this nice library.

I am building a diagram that have multiple connections between nodes, and ciruclar connections.

So I need more flexible handles, where the same handle can be target or source, to avoid things like that:

If it is possible, I would like to know how to create a custom hybrid handle with a custom position.

Thank you :D

[bcakmakoglu]

By default VueFlow uses ConnectionMode.Loose which allows you to do connection from any type of handle to another.
Although if you don't specify what handle is used for an edge (by using sourceHandle and targetHandle) VueFlow will assume you want to do a source <---> target edge.

What you can do:
Set all handle types to source (optional tbh) and set a unique handle id (this is the important part)

<Handle
	id="left"
	type="source"
	...
/>

<Handle
	id="right"
	type="source"
	...
/>

Now all you need to do is specify what handle id you want the edge to connect to:

{
	id: 'e1->2',
	source: '1',
	target: '2',
	// assuming you want to do an edge from a right side handle to another right side handle
	sourceHandle: 'right',
	targetHandle: 'right',
}

[nrayann]

Thank you for your response, I managed it using the node positions to decide where to connect the edge

const setUpHandles = () => {
    if (edge.targetNode.position.x < edge.sourceNode.position.x) {
        edge.targetHandle = `${edge.target}${edgeRightSufixId}`
        edge.sourceHandle = `${edge.source}${edgeLeftSufixId}`
    } else {
        edge.targetHandle = `${edge.target}${edgeLeftSufixId}`
        edge.sourceHandle = `${edge.source}${edgeRightSufixId}`
    }
}