Sketch Lab: line connection improvements#73381
Open
molly-moen wants to merge 20 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors Sketchlab React Flow line-endpoint interactions to make line anchors easier to grab and to provide more consistent snapping/attachment behavior while dragging (mouse and keyboard), while removing the prior React Flow “reconnect” flow.
Changes:
- Add live snap preview for dragged line anchors and commit the previewed attachment on drop.
- Replace the old reconnect hook/context with a unified node-drag hook and updated edge-drag behavior.
- Increase snap radius and expand DOM hit-areas for handles/anchors; add unit tests for snapping utilities.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/test/unit/sketchlab/reactFlow/utils/lineAnchorsTest.ts | New unit tests for anchor creation and handle snap calculations. |
| apps/test/unit/sketchlab/reactFlow/utils/handleSnapTest.ts | New unit tests for nearest-handle search and endpoint attachment logic. |
| apps/test/unit/sketchlab/reactFlow/utils/connectionRulesTest.ts | Removes tests for reconnectability logic that was deleted. |
| apps/src/sketchlab/reactFlow/utils/lineAnchors.ts | Adds findAnchorHandleSnap helper for live-drag snap preview and attachment targeting. |
| apps/src/sketchlab/reactFlow/utils/handleSnap.ts | Refactors snapping/attachment primitives; adds self-loop prevention in endpoint attachment. |
| apps/src/sketchlab/reactFlow/utils/connectionRules.ts | Removes edge reconnectability API. |
| apps/src/sketchlab/reactFlow/nodes/line-anchor-node.module.scss | Expands draggable hit area around anchor node. |
| apps/src/sketchlab/reactFlow/hooks/useReconnect.ts | Deleted; reconnect flow removed. |
| apps/src/sketchlab/reactFlow/hooks/useNodeDrag.ts | New hook handling node drag (including direct anchor drag with live snap preview). |
| apps/src/sketchlab/reactFlow/hooks/useLineEdgeDrag.ts | Updates whole-line drag to use live snap preview + commit-on-drop attachments. |
| apps/src/sketchlab/reactFlow/hooks/useKeyboardNavigation.ts | Adds callback for keyboard-driven anchor moves; updates snapping exclusion rules. |
| apps/src/sketchlab/reactFlow/hooks/useDisplayElements.ts | Removes reconnectable edge display field. |
| apps/src/sketchlab/reactFlow/context.ts | Removes reconnecting-edge context. |
| apps/src/sketchlab/reactFlow/constants.ts | Increases reconnect snap radius; removes internal edge-updater class constant. |
| apps/src/sketchlab/reactFlow/components/ReactFlowCanvas.tsx | Wires new drag hook; removes reconnect props/context; tracks keyboard anchor moves as “dragging”. |
| apps/src/sketchlab/reactFlow/components/react-flow-canvas.module.scss | Expands handle clickable area; adjusts focus styling to exclude line-anchor nodes. |
| apps/src/sketchlab/reactFlow/components/ConnectionLine.tsx | Simplifies ghost connection styling to always mirror default new-line styling. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR fixes a grab bag of issues with lines/does some quality of life improvements around lines. It's best viewed with whitespace hidden, and has a lot of new tests which increases the line count 😅
Since I was increasing the size of the node drag event listeners (to support the new snap behavior), I moved them into their own hook rather than bloating ReactFlowCanvas further. The change to get rid of reconnect + the change to snap while dragging caused some refactoring to be needed to the utils as well.
Before
Screen.Recording.2026-06-22.at.3.55.04.PM.mov
After
Screen.Recording.2026-06-22.at.3.56.06.PM.mov
Links
Testing story
Tested locally and added unit tests.
Follow up work
I noticed that when you keyboard move a line/line anchor the other connection handles don't show up like they do when you are dragging. I will do that as a follow-up, this PR was big enough already 😄 I also might look into having a connection handle appear when you are hovering in the radius of it for creating an interactive line, to make that behavior more obvious. I'll keep using the same ticket to track this.