Option to keep ConnectionLine visible after dropping on pane

Please describe the feature that you want to propose

Hi! First of all, thank you for the amazing work on xyflow — it's been a pleasure to build with.

I'd like to suggest a small enhancement that I think could benefit many users building node-based editors.

Use Case

A very common UX pattern in node editors is:

1. User drags from a source handle
2. Drops on an empty area of the pane
3. A context menu appears to select a node type
4. A new node is created and automatically connected to the source

This works great with the existing onconnectend + isDropOnPane pattern (thank you for that!). However, there's a small UX gap: when the user releases the mouse, the ConnectionLine disappears immediately, even though the context menu is still open. The user loses the visual context of where the connection is coming from while browsing the menu options.

It would be wonderful if there were an option to keep the ConnectionLine visible until the developer explicitly dismisses it — for example, after the node is created or the menu is cancelled.

Current Behavior

Drag from handle → Drop on pane → ConnectionLine disappears → Context menu opens

Desired Behavior

Drag from handle → Drop on pane → ConnectionLine stays visible → Context menu opens
→ User selects node type → Node created + edge connected → ConnectionLine dismissed via API

Proposed API

Core: Expose cancelConnection() via useSvelteFlow()

I noticed that cancelConnection() already exists on the internal store (SvelteFlowStoreActions) but is not exposed through the public useSvelteFlow() hook.

If this were exposed, developers could take full control over when the ConnectionLine is dismissed — not just for this use case, but for any scenario that needs manual connection state management.

Usage example:

const { cancelConnection } = useSvelteFlow();

// In onconnectend: keep connection alive when dropping on pane
function handleConnectEnd(event, params) {
  if (params.isDropOnPane) {
    showContextMenu(params); // connection line stays because we don't reset it
    return;
  }
}

// Dismiss when context menu closes (node created or cancelled)
function onContextMenuClose() {
  cancelConnection(); // ConnectionLine disappears
}

// Also dismiss on Escape key
function onKeyDown(e) {
  if (e.key === 'Escape') cancelConnection();
}

Optional enhancement: persistConnectionOnPaneDrop prop

For a more declarative approach, a prop could tell xyflow to skip the automatic connection reset when the user drops on the pane:

<SvelteFlow persistConnectionOnPaneDrop={true}>
  ...
</SvelteFlow>

This way, the ConnectionLine would automatically persist on pane drops, and the developer would use cancelConnection() to dismiss it when ready. Without this prop, xyflow's current behavior would be unchanged (fully backward-compatible).

Notes on Internal Implementation

From looking at the source, it seems like this could be a relatively small change:

1. store._connection holds the connection state (inProgress, from, to, etc.)
2. cancelConnection() resets it to initialConnection
3. The ConnectionLine component renders when store.connection.inProgress === true

The change would likely involve conditionally skipping the _connection reset in XYHandle's pointer-up handler when the drop target is the pane, and exposing cancelConnection() through useSvelteFlow().

Related

• #2751 - Keep ConnectionLine visible when user is doing a connection by click — a different use case (click-to-connect), but touches on a similar need.
• Add Node On Edge Drop example — demonstrates the drop-on-pane → create node pattern beautifully. This feature request would complement that pattern.
• Discussion #3710 — related discussion about connection line visibility.

Environment

• @xyflow/svelte: 1.5.2
• @xyflow/system: 0.0.76

Thank you for considering this! Happy to provide more context or a PR if this direction makes sense.