Start connection with a single click

[thiagodeavila]

Hey Guys.
It would be nice if connections started with just one click (and a final click in the target node), instead of clicking and holding.

[siarheihuzarevich]

Hi! Thanks for the question 🙌

You can implement the “click to click” connection creation on the app side without any extra API from f-flow.

A simple approach:

1. On first click on a connector (for example an output), store it in your local state:

• pending = { outputId, nodeId }
• optionally highlight it so the user sees it’s “armed”.

2. On second click on another connector (for example an input), if pending exists and the pair is valid, just push a new connection into your own connections array:

• connections.push({ outputId: pending.outputId, inputId })
• then clear pending.

3. If the second click is not a connector (or it’s invalid like output to output), you can simply reset pending (or keep it, depending on the UX you want).

In Angular this is usually easiest by attaching (click) handlers to the elements where you have fNodeOutput / fNodeInput directives and calling event.stopPropagation() to avoid canvas/node click side effects.

If you like what we’re building with f-flow, consider starring the repo - it really helps the project. 🙌

[thiagodeavila]

Good idea, i'll try this aproach. But what about the connection path, there is no API for do that? I mean the path when dragging the connector.

[siarheihuzarevich]

This ships in v19.0.0 🙌

provideFFlow(withConnectionFlow('click')) adds click-to-connect exactly as described here: click a source connector, the preview line follows the cursor, click a target to commit - Escape or clicking elsewhere cancels, and drag-to-connect keeps working alongside.

Live demo: https://flow.foblex.com/examples/click-to-connect

Thanks for the request - it also pushed the internals in a good direction: both gestures now run on one gesture-independent connection engine, which is what later made keyboard-driven connection creation possible.