Make node handles larger, but visually the same size (transparent body with dot). Easier to grab and drag, also nice because it looks like its floating.
Add node silhouette when dragging out from an edge
When the above completes, react flow fires the onConnectEnd event. We capture this and drop a selector (placeholder) node in which you can browse UDFs. On selection (click/hit enter), the selector node then replaces itself with the selected node type
Add esc keybind to remove ephemeral nodes
Remarks
I call these kinds of non-concrete nodes "ephemeral nodes". We do not persist their state, and whenever we update the backend graph we defensively filter out any ephermeral nodes.
The backend doesn't need to know about the existence of ephermeral nodes
Features
onConnectEnd
event. We capture this and drop a selector (placeholder) node in which you can browse UDFs. On selection (click/hit enter), the selector node then replaces itself with the selected node typeRemarks