improvement(canvas): cancel an in-flight edge drag with Escape

[waleedlatif1]

Summary

• Escape now cancels a connection drag while the edge is still attached to the cursor, not only after release once the block selector is up
• Cancelling dispatches a synthetic mouseup so React Flow runs its own teardown — stops auto-panning, clears the connection line and handle highlights, and detaches its document listeners
• The resulting onConnect/onConnectEnd are no-ops, so the drag leaves behind neither an edge nor the block selector, and the real mouseup that follows is inert
• The keydown listener is capture-phase and only armed for the duration of a drag, so Escape mid-drag cancels the edge and nothing else

Type of Change

• Bug fix

Testing

Type-check and lint pass. Not yet exercised in a browser — needs a manual pass on the canvas.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Aug 13, 2026 7:00pm

[cursor]

PR Summary

Low Risk
Canvas-only interaction wiring in workflow.tsx with no auth, persistence, or API changes; main caveat is reliance on synthetic mouseup for React Flow teardown.

Overview
Escape can cancel a connection drag while the line is still on the cursor, instead of only dismissing the block picker after release.

While a handle drag is active, a capture-phase keydown listener arms on onConnectStart and tears down on onConnectEnd. On Escape, the handler sets connectionCancelledRef, dispatches a synthetic mouseup so React Flow clears the connection line, auto-pan, and handle highlights, and stops propagation so other Escape handlers do not run mid-drag.

onConnect and onConnectEnd early-return when cancelled, so no edge is created and the connection block selector does not open; the follow-up real mouseup is harmless.

^{Reviewed by Cursor Bugbot for commit d969652. Configure here.}

[greptile-apps]

Greptile Summary

The PR adds Escape-key cancellation for active canvas connection drags.

• Arms a capture-phase key listener while a connection drag is active.
• Dispatches a synthetic mouseup so React Flow performs its normal teardown.
• Suppresses edge creation and block-selector behavior after cancellation.
• Removes the listener when the connection ends or the component unmounts.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	Adds scoped Escape handling and cancellation state to terminate an active connection drag without creating an edge or opening the block selector.

Sequence Diagram

sequenceDiagram
  participant User
  participant Workflow as Workflow Canvas
  participant RF as React Flow
  User->>Workflow: Start connection drag
  Workflow->>Workflow: Arm Escape listener
  User->>Workflow: Press Escape
  Workflow->>Workflow: Mark connection cancelled
  Workflow->>RF: Dispatch synthetic mouseup
  RF->>RF: Tear down connection drag
  RF->>Workflow: onConnect / onConnectEnd
  Workflow->>Workflow: Suppress edge and selector

Loading

_{Reviews (2): Last reviewed commit: "improvement(canvas): cancel an in-flight..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit d969652. Configure here.}