Add grid snapping feature with toggle button (default ON)

[Copilot]

Overview

Implements grid snapping functionality for the SVG Path Editor. Points now automatically snap to the grid when placing or moving them, making it easier to create precise, aligned paths. The feature can be toggled on/off via a new toolbar button and is enabled by default.

Changes

Grid Snapping Logic

• Added snapPoint() method that rounds coordinates to the nearest grid intersection
• Snaps to 10px intervals (half of the 20px grid size, aligning with visible grid dots)
• Applied to both:
  • Creating new anchor points (onCreatePathDown)
  • Moving existing points and handles (onPointerMove)

UI Toggle Button

• New toolbar button with grid icon (4-square pattern) next to the Pen Mode button
• Visual feedback: Active state shows black background, inactive shows white with border
• Tooltip: "Snap to Grid"
• Default state: ON (as requested in the issue)

Technical Details

The snapping algorithm uses Math.round(coordinate / 10) * 10 to snap coordinates:

• Grid size: 20px (matches existing visual grid pattern)
• Snap interval: 10px (centers of grid cells where dots appear)
• Performance: O(1) operation with no performance impact

Benefits

• ✅ Precise alignment with visible grid
• ✅ Easier to create symmetric and aligned shapes
• ✅ Better control over point placement
• ✅ Can be toggled off for free-form drawing when needed
• ✅ Minimal code changes (26 lines) - surgical implementation
• ✅ No breaking changes to existing functionality

Screenshots

New toggle button in toolbar (default active state):

Toggle button inactive (snap OFF):

Point snapped to grid alignment:

Testing

• ✅ TypeScript compilation successful
• ✅ Production build successful
• ✅ Manual testing: Snap ON correctly aligns points to grid
• ✅ Manual testing: Snap OFF allows free placement
• ✅ Manual testing: Toggle button works correctly with visual feedback
• ✅ Manual testing: Default state verified as ON

Fixes the requirement: グリッド・サブグリッドにスナップできるようにする。デフォルトON

Original prompt

グリッド・サブグリッドにスナップできるようにする。デフォルトON

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.