Snapping and guides in the editor - #13
Merged
Merged
Conversation
While a widget or group is dragged, its box's start/centre/end lines are pulled onto the same lines of every other hitbox plus the canvas edges and centre, and the line that caught it is drawn across the canvas. ⌥ holds the drag off the guides. Thresholds are in screen pixels and converted at the use site: the canvas is drawn in 466-space but displayed much smaller, so a tolerance in canvas units shrinks to about two pixels of pointer slack and never catches. Closes #4 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011ZdiFtcW3mifwmYtspMcB7
Cosmetic only: prettier's 80-column default had broken up lines the repo's oxfmt keeps on one, so `oxfmt --check` failed on files nothing had touched. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011ZdiFtcW3mifwmYtspMcB7
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
1 participant
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.
Closes #4
Drag a widget or a group on the canvas and its box now snaps to the other elements: start/centre/end of the dragged box are pulled onto the same lines of every other hitbox, plus the canvas edges and centre. The line that caught it is drawn across the canvas while the pointer is down.
⌥holds the drag off the guides.Where things live
editor/lib/snap.ts— pure:snapTargets()(collect the lines, skipping the dragged subtree) andsnapAxis()(nearest line within the tolerance).editor/shared/constants.ts—SNAP_THRESHOLD,GUIDE_WIDTH,GUIDE_COLOR.pages/editor.svelte— the wiring: targets taken once on pointerdown, guides drawn after the selection box.Thresholds are in screen pixels and converted at the use site (
466 / canvas.getBoundingClientRect().width) — the canvas is drawn in 466-space but displayed much smaller, so a tolerance in canvas units shrinks to ~2 px of pointer slack and never catches.Tests
tests/editor-snap.test.ts(unit) — tolerance boundary, nearest-line wins, butting a box against a neighbour's edge.tests/editor-snap.browser.test.ts— the real path: mounts the editor page, drags with pointer events on the canvas, asserts the box lands flush and that the guide is actually painted.Not included: snapping on resize or on arrow-key moves, and equal-spacing / distance guides.
🤖 Generated with Claude Code
https://claude.ai/code/session_011ZdiFtcW3mifwmYtspMcB7