Make the dot grid follow canvas pan and zoom

[donovan-yohan]

Closes #43

What changed

• derive the dot-grid origin, spacing, and radius from the shared canvas camera
• render one pointer-inert grid behind both generic Mermaid and React Flow
• animate grid position, spacing, and typed radius with generic Mermaid Fit
• keep React Flow grid updates immediate to match its controlled viewport
• cover pan, zoom, Fit, and renderer transitions with deterministic and browser assertions

Exact-head evidence

• pnpm --filter @arielcharts/shared build
• pnpm lint
• pnpm typecheck
• pnpm test (shared 7, server 66, web 141)
• pnpm build
• pnpm test:e2e-workspace-ux
• git diff --check
• adversarial review plus focused P2 re-review: clear

Summary by CodeRabbit

• New Features

  • Added a responsive dot-grid background to the diagram canvas.
  • The grid now stays aligned with the canvas during zooming, panning, and renderer changes.
  • Added smooth grid transitions during canvas animations.

• Bug Fixes

  • Improved grid sizing and positioning across different zoom levels.

• Tests

  • Added coverage validating grid behavior during navigation, zoom, panning, and renderer transitions.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
arielcharts	Ready	Preview	Aug 9, 2026 6:44am

[coderabbitai]

Warning

Review limit reached

@donovan-yohan, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 55 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 2fd19aef-3eae-4795-a8ac-4357185e343a

📥 Commits

Reviewing files that changed from the base of the PR and between 4def072 and 82d9078.

📒 Files selected for processing (1)

• e2e-workspace-ux-validate.ts

📝 Walkthrough

Walkthrough

The canvas dot grid now follows shared camera pan and zoom state. A geometry utility computes CSS values, DiagramCanvas renders the grid beneath diagram content, and unit and end-to-end tests validate updates across renderer transitions.

Changes

Canvas dot-grid synchronization

Layer / File(s)	Summary
Camera-based grid geometry apps/web/src/lib/canvas-dot-grid.ts, apps/web/src/lib/canvas-dot-grid.test.ts	The new utility calculates background position, spacing, and dot radius from camera pan and zoom values. Unit tests cover zoom levels 1 and 1.5.
Canvas grid rendering apps/web/src/components/diagram-canvas.tsx, apps/web/src/app/globals.css	DiagramCanvas renders a non-interactive grid layer with camera-based styles and transition settings. CSS uses the registered dot-radius property for the radial gradient.
Renderer transition validation e2e-workspace-ux-validate.ts	End-to-end checks validate grid position, size, radius, transitions, pan, zoom, fit, and renderer changes.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Camera
  participant DiagramCanvas
  participant GridGeometry
  participant DotGrid
  participant E2ETests

  Camera->>DiagramCanvas: update pan or zoom
  DiagramCanvas->>GridGeometry: calculate grid geometry
  GridGeometry-->>DiagramCanvas: return position, spacing, and radius
  DiagramCanvas->>DotGrid: apply styles and transitions
  E2ETests->>DotGrid: read rendered grid styles
  E2ETests->>GridGeometry: calculate expected geometry
  GridGeometry-->>E2ETests: return expected values

Loading

Possibly related PRs

• donovan-yohan/arielcharts#9: Introduced the React Flow canvas extended by this dot-grid implementation.
• donovan-yohan/arielcharts#21: Modifies the shared canvas component for collaborative node-drag behavior.
• donovan-yohan/arielcharts#23: Shares canvas, CSS, and workspace E2E changes with this PR.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: synchronizing the dot grid with canvas pan and zoom.
Linked Issues check	✅ Passed	The changes implement shared camera-based grid positioning, scaling, renderer coverage, pointer inertness, and deterministic tests required by issue #43.
Out of Scope Changes check	✅ Passed	All changes support issue #43 by implementing, testing, and validating camera-synchronized dot-grid behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/grid-pan-zoom

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@e2e-workspace-ux-validate.ts`:
- Around line 273-277: Update triggerCanvasFit to use the existing verifiedClick
interaction on the “Fit diagram” button instead of invoking HTMLElement.click()
through evaluate, so the test validates the control’s user-level visibility and
hit-testing behavior.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a8f812e8-b4ab-4cb6-ac55-470221a8f128

📥 Commits

Reviewing files that changed from the base of the PR and between a2c06a4 and 4def072.

📒 Files selected for processing (5)

• apps/web/src/app/globals.css
• apps/web/src/components/diagram-canvas.tsx
• apps/web/src/lib/canvas-dot-grid.test.ts
• apps/web/src/lib/canvas-dot-grid.ts
• e2e-workspace-ux-validate.ts