No way for client code to tell if a target handle is connectable

[snoozbuster]

I'm writing a custom connection line which allows users to drag edges directly onto a node and automatically have the edge connect to the input handle (in my project, there is only ever one). The code I've written for this looks like so:

const { connectionStartHandle, onConnectEnd, getNodes: nodes, addEdges } = useVueFlow();

onConnectEnd(() => {
  const insideRect = (rect: Rect) =>
    rect.x < props.targetX &&
    rect.x + rect.width > props.targetX &&
    rect.y < props.targetY &&
    rect.y + rect.height > props.targetY;

  const intersectingNodes = orderBy(
    unref(nodes).filter(node => insideRect(getRectOfNodes([node]))),
    'computedPosition.z',
    'desc'
  );
  const targetNode = intersectingNodes[0];
  if (
    targetNode &&
    unref(connectionStartHandle).nodeId !== targetNode.id &&
    targetNode.handleBounds.target?.length
    // I would like to put an additional check for "is target handle connectable" here
  ) {
    addEdges([
      {
        id: getEdgeId(
          unref(connectionStartHandle).nodeId,
          unref(connectionStartHandle).handleId as any
        ),
        type: 'step',
        source: unref(connectionStartHandle).nodeId,
        sourceHandle: unref(connectionStartHandle).handleId,
        target: targetNode.id,
        targetHandle: 'input',
      },
    ]);
  }
});

In the if statement where I decide if I should make the connection, all I can really do is check if the handle exists. I don't have any way to actually check if the handle is connectable or not. Ideally I would like to re-use something like isValidHandle, but that function isn't really useable as-is because it requires you to give it a mouse event and then derives the handle from that event. I already have the handle (or at least, its ID) and just want to check if the connection I'm about to make is valid, according to the handle props I've already passed to <Handle />.

[bcakmakoglu]

Connectable handles have a class name called connectable so you can just use something like

document.querySelector(`[data-handleid="${handleId}"].connectable`)

to find a handle element that's connectable.

Or if you just need to validate if that element is connectable this would do it as well

document.querySelector(`[data-handleid="${handleId}"]`).classList.contains('connectable')

[bcakmakoglu]

Have you actually tried it though?
The implementation of getClosestHandle is the same in React and Vue Flow. No difference.

[bcakmakoglu]

Here's a sandbox that reproduces the React Flow example.

Though it does use the latest 1.18.0 version.

[snoozbuster]

weird... I did try it but I wasn't seeing any effect in my project. I'll give it another shot.

[bcakmakoglu]

I was running into trouble with 1.17.6 as well for some reason I’m not 100% sure of 😅 but with ^1.18.0 it works fine

[snoozbuster]

Thanks @bcakmakoglu. my previous implementation had a visibility: hidden style on the input handle to hide it. It seems like for whatever reason this causes it to not work. I was able to get it working though!