Camera pan/zoom on graph

Area: Cross-References Milestone: v2

Context

Problem: As the cross-reference graph grows with many nodes, users need to navigate the visual space — zooming in to read labels on specific nodes, zooming out to see the full network structure, and panning to different areas.

Solution: Mouse/trackpad-based pan and zoom controls for the graph canvas. Drag to pan, scroll wheel to zoom.

Not included: Minimap, fit-to-screen button, or keyboard-based camera controls (WASD). Just mouse/trackpad interaction.

Functional

Expected behavior:

Drag on empty canvas area → pans the view
Scroll wheel → zooms in/out (centered on cursor position)
Zoom range: 0.2× to 4.0×

Note: Basic pan/zoom may already be partially implemented in the Canvas interaction handler.

UX & Design

Zoom range: 0.2× (zoomed way out) to 4.0× (zoomed way in) Pan: Cursor changes to grab/grabbing during pan

TODO: Verify what's already implemented in CrossRefGraph.svelte

Technical

Implementation: Canvas transform matrix — translate for pan, scale for zoom. Applied before rendering all nodes and edges.

Reference: BibleGame used WASD + scroll wheel with 0.2×–4.0× range.

Files:

apps/web/src/lib/components/bible/CrossRefGraph.svelte (modify)

Status

Current: PLANNED Milestone: v2 Priority: Medium — needed as graphs grow larger

Dependencies:

Requires: cross-reference graph (DONE)

← Back to Cross-References features