Skip to content

feat: infinite canvas with pan, zoom & dot-grid background#19

Open
umohsamuel wants to merge 1 commit into
akinloluwami:mainfrom
umohsamuel:feat/infinite-canvas-with-zoom-and-dot-grid-bg
Open

feat: infinite canvas with pan, zoom & dot-grid background#19
umohsamuel wants to merge 1 commit into
akinloluwami:mainfrom
umohsamuel:feat/infinite-canvas-with-zoom-and-dot-grid-bg

Conversation

@umohsamuel
Copy link
Copy Markdown

Description

Adds Canva/Figma-style infinite canvas navigation to the editor. The artboard is now positioned freely in the viewport and can be panned and zoomed using mouse/trackpad gestures.

Updates

Pan & scroll

  1. Scroll wheel pans the canvas vertically (trackpad horizontal scroll also works)
  2. Shift + scroll wheel pans horizontally
  3. Viewport changed from overflow-auto (native browser scrollbars) to overflow-hidden with manual translate() positioning

Zoom

  1. Ctrl/Cmd + scroll wheel zooms toward the cursor position

  2. Trackpad pinch-to-zoom is supported

  3. Raw delta is clamped to ±25 before converting to a zoom factor, so mouse wheel ticks give ~20% per step while trackpad pinch gives fine-grained fractional zoom

  4. Max zoom raised from 100% to 500%

  5. Slider zoom and fit-to-view both re-center the artboard by computing matching pan values

Dot-grid background

  1. Infinite tiling dot pattern rendered via CSS radial-gradient behind the artboard
  2. Dots scale with zoom level (24 × scale px spacing) and track panning via backgroundPosition

Testing

  1. All 10 existing tests pass
  2. Build completes without errors

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 28, 2026

@umohsamuel is attempting to deploy a commit to the Akinkunmi Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 4 files

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant