Snap to Nearest Point Is Not Snap to Alignment. Most Editors Implement the Wrong One.

TLDR

Many open-source canvas editors implement Euclidean "nearest point" snapping (Math.hypot) and call it alignment snapping. In reality, nearest-point snap finds the single closest point in 2D space, whereas alignment snap evaluates independent X and Y layout constraints. If your users frequently use snapping but still have to type manual coordinates into an inspector panel to fix secondary axes, your editor is running the wrong snapping algorithm.

Snapping Concept	Math Foundation	Target Use Case	User UX Signal
Nearest-Point Snap	Math.hypot Euclidean 2D distance	Wire-to-pin, vertex locking	Fails dual-axis alignment
Alignment Snap	Per-axis Math.abs scalar search	Canvas layout, bounding box align	Dual alignment in one drag

---

Problem statement: the algorithmic mismatch in diagram editors

When users lay out diagrams, circuit schematics, or mockups, they don't think in terms of single 2D Euclidean points. They think in terms of spatial constraints: "Align my left edge to Component A, and align my top edge to Component B."

When an editor implements nearest-point snapping (Math.hypot), it forces a single winning target. If Component A is 3px away horizontally and Component B is 2px away vertically, B wins both axes. The horizontal alignment to A is completely discarded.

---

Technical failure mode: the manual coordinate fallback

When an editor uses nearest-point snap for layout alignment, users experience a recognizable workflow degradation:

1. They drag an element to align to Target A.
2. They drag again to align to Target B, which breaks the alignment to Target A.
3. They give up on dragging and manually type coordinates into the property panel.

If your analytics show users frequently falling back to manual coordinate inputs after dragging, your snapping engine is solving the wrong geometric problem.

---

The fix: independent per-axis alignment searches

Replace Euclidean point distance calculations with independent X and Y candidate searches:

// Each axis finds its own best alignment target independently
let bestX = x, bestY = y;
let minDx = threshold, minDy = threshold;
candidates.forEach(bb => {   // Horizontal Candidates (Left, Center, Right)   [bb.x, bb.x + bb.width / 2, bb.x + bb.width].forEach(cx => {     const d = Math.abs(x - cx);     if (d < minDx) { minDx = d; bestX = cx; }   });
// Vertical Candidates (Top, Center, Bottom)   [bb.y, bb.y + bb.height / 2, bb.y + bb.height].forEach(cy => {     const d = Math.abs(y - cy);     if (d < minDy) { minDy = d; bestY = cy; }   }); });

Pair this with visible alignment guide lines (e.g., pink bounding lines extending to both reference elements) so users immediately understand which targets triggered each axis.

Rule of thumb: Use Euclidean Math.hypot for point-to-point snapping (pins, vertices, nodes). Use independent Math.abs per axis for spatial layout alignment.