useHandleConnection appears not to be working

[hortegaalcalde]

Hello! First of all thanks for the repo, it's awesome!
I'm trying to to connect to the handler of an input node all the handlers that have no connections from my custom nodes. For that purpose I built this method inside of a class I use in my Vue Component (mapRoots.keys returns the nodes id's and the value of the map has information about where they are connected):

private instance: VueFlowStore = useVueFlow();

    connectNodesToEnd(): void {
        Array.from( this.mapRoots.value.keys() )
            .filter( key => this.mapRoots.value.get( key ) !== null )
            .forEach( element => {
                const node = this.instance.findNode( element );
                if ( node ) {
                    node.handleBounds.source.forEach( element => {
                        console.log("handler: ", element.id );
                        const arrayConn = useHandleConnections( { type : "source", nodeId : node.id, id : element.id } );
                        console.log("Node: ", node.id, " HandlerConn: ", arrayConn.value );

                    } );

                }
            } );
    }

However the ouput when I trigger the function is:

The image shows that even though the handlers and the nodes have connections and edges, the value of the array recieved from useHandleConnection({params}) is empty. I assume that if they have an edge, they also have the connection that the edge represents. Maybe I'm thinking wrong, however, I find it weird that I can correctly get the handler id's and not the connections that they have. thanks in advance!

[bcakmakoglu]

1. Never use a composable in a callback, that is bad practice.
   Composables are supposed to be called in the setup body of a component (same as React Hooks).
   Instead of what you're doing just use getConnectedEdges to receive all edges that are connected to a node.
   Afterwards you can still filter edges by direction if you need to.

const { getConnectedEdges } = useVueFlow()

function handleSomething() {
	for (const node of nodes) {
		const connectedEdges = getConnectedEdges(node.id)
		
		// now you can filter your edges by direction if you need to
	}
}

2. You are trying to pass a specific handle id to the composable but I am pretty sure you never specified any id on the handle, thus the relevant edges have sourceHandle and targetHandle set to null
   Now you're trying to enforce some handle-id even though the edge doesn't know about that id, resulting in the lookup going nowhere.
   Either specify a handle id for your <Handle> components and use that in the edges you create or simply omit the handle id you are looking for (which is only ever necessary if you have multiple handles of the same type)

[hortegaalcalde]

Hi! thanks for the fast response and the first advice, I'll correct it asap. However, about the second comment, I do assign a handler Id to every handler, that is why I found it weird. In the picture on my first message, the handler Id is in the console logs:

console.log("handler: ", element.id );

[bcakmakoglu]

That line only tells me that you try to use the internally assigned id (handlebounds.id) which is not the same as actually assining a handle id to an edge.

If your edge looks like this:

{
	id: 'e1->2',
	source: '1',
	target: '2',
}

Then your edge has no assigned handle ids, thus trying to force some id that is internally generated and used (which is subject to change as well, in the future there won't be any auto-generated handle ids, they will just default to null) won't work, your edge is not subject to those handle-ids.