🐛 [BUG]: Wrapped Handle cannot be totally controlled by isValidConnection

[Fnxxxxo]

Is there an existing issue for this?

• [X] I have searched the existing issues and this is a new bug.

Current Behavior

If I wrap a Handle component in another custom component and use it in custom node, only edges with from it can be controlled by isValidConnection.

Expected Behavior

No matter as a source or target, the isValidConnection callback is called when create a new edges.

Steps To Reproduce

1. Open my demo
2. Drag and create two branch node
3. Click Add buttom to create some output handle.
4. Create any edges which use the output handle as source or target. Then check the result and console.

Relevant log output

No response

Anything else?

No response

[bcakmakoglu]

What exactly is the issue? The description is a vague and I'm not sure what it's trying to tell me besides that there supposedly is a problem with isValidConnection.

I assume, but I'm not sure if that's what you're talking about, that there is a misconception when isValidConnection is invoked. The callback is only invoked for the start handle. That means if you use a handle that doesn't have a isValidConnection callback as the start handle no callback would be invoked since none was available on the start handle. VueFlow does not execute the isValidConnection callback on the end handle of a connection.

If you want to use a more "global" handler for isValidConnection you can pass it as a prop to <VueFlow> and it will be executed on all handles (given that they do not have a isValidConnection callback passed to them as well, since that one would have priority).

<VueFlow :nodes="nodes" :edges="edges" :is-valid-connection="isValidConnectionHandler" ...>

[bcakmakoglu]

If there's still a problem that's not covered by my explanation above, feel free to comment again and, if necessary, I'll reopen the issue.

[Fnxxxxo]

If there's still a problem that's not covered by my explanation above, feel free to comment again and, if necessary, I'll reopen the issue.

Hi @bcakmakoglu , I have updated the demo and add a new Handle in right bottom corner of the BranchNode.vue. This time the isValidConnection is invoked and the Handle is disabled. But the edge is connected to the top Handle instead. The VueFlow do execute the isValidConnection sometimes, but I am not clear when and how. It is wired.

Previously, I wrapped a Handle in the Output.vue but this Handle can be connected as target regardless the result of its isValidConnection.

I am confused when isValidConnection on the Handle is invoked and where it affects.

[bcakmakoglu]

First off, never use a number as an id. You're using Math.random() as an id, which won't work. An id has to be a string.

As I explained above, isValidConnection is only invoked for the start handle of a connection.

If you use the handle on the right as the starting handle, whatever isValidConnection handler is passed to that handle will be invoked for the potential connection. Again, the end handle is irrelevant when invoking isValidConnection.