Repository navigation
Object snapping: moves and resizes line up with other objects and the canvas - #21
Merged
Merged
Conversation
… canvas, with guides The edges and centre of what a Move-tool drag moves or resizes snap, each axis on its own, to the nearest edge or centre of an object in view or of the canvas, within 8 screen px (as tldraw and Excalidraw). Magenta guides show what lines up. Command (Ctrl elsewhere) held suspends it, also pressed or released mid-drag. Shift: a move keeps its axis lock and snaps the other one; a resize that keeps its aspect or a line's 45 degrees doesn't snap. Arrow nudges never snap. Core.snapLines / snapMove / snapResize / snapGuides are pure and unit-tested; objects.js section 35 checks it end to end (it fails on master).
…n centre to centre; docs and help Guides now pass through points (a frame's corners and centre, a line's end), as tldraw and Excalidraw draw them: an edge guide through the corners on it, a centre guide from centre to centre. A small × marks each point, so a guide stays readable where it lies along a black outline. Help, README, task.md (decision), CLAUDE.md and docs/objects.md describe snapping. The options bar's per-tool hints now go through keyLabel(), which also turns a lone ⌘ into Ctrl elsewhere (the shapes hint said ⌘E on Windows). objects.js also checks a group box's handle snapping and that a Shift resize doesn't.
… hints use Windows key names
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.
What
Moving or resizing an object (Move tool, or a shape tool on its own selected shape) now snaps it to the other objects in view and to the canvas.
Follows tldraw and Excalidraw (8 px threshold, nearest match per axis, only objects in view) and Figma (on by default). The defaults (on by default, no permanent off switch, ⌘ to suspend) are recorded in task.md as not yet confirmed.
Code
core.js:snapLines,snapMove,snapResize,snapGuides, pure and unit-tested.pointer.js:objDragUpdate()snaps the raw pointer delta on every update. The targets are worked out once per drag (frameOf()cached inscene.js,visible()fromview.js).view.js+style.css:#guideslines and × marks, placed in device px.keyboard.js: ⌘ / Ctrl pressed or released mid-drag.keyLabel(): a lone ⌘ becomes "Ctrl" off a Mac, and the options bar's hints now go through it (the shapes hint showed "⌘E" on Windows).Testing
npm test: 91 pass (4 new).objects.jssection 35 covers: snapping to an edge, ⌘ mid-drag, the canvas centre with Shift, a resize handle, a group move, a group box resize, no snapping on a Shift-resize, an ⌥ copy, a line end, Esc, and undo/redo.parity.js: all 23 steps equal to master.history.jsin Chrome on an M4: 3 pixel-exact checks fail ("undo of paste that grows", "redo of pencil after crop", "second undo of paste that grows"). They fail on master too, and CI passes them.bench.js --only 5k: no regressions ("move one in 5k" +2–4%, within the ±15% noise).navigator.platformfaked as Win32 in macOS Chrome. This PR's Linux CI is its first real run.Not done: equal-spacing (gap) snaps, snapping a new shape while it's drawn, a permanent off switch.