Pan and zoom

A component that supports dragging and scrolling with the mouse to pan and zoom.

Component

The component constists of a Viewport that contains a "content box":

╔═════════════════════════╗
║                         ║
║    ┌─────────┐          ║
║    │         │          ║
║    │ content │          ║
║    │         │          ║
║    └─────────┘          ║
║                         ║
╚═════════════════════════╝

╔═══╗
║   ║ = viewport
╚═══╝

┌───┐
│   │ = content box
└───┘

Mouse interactions

Panning

The content box can be moved by dragging anywhere in the viewport with the mouse.

x = mouse pointer

╔═════════════════════════╗
║                  x-->   ║
║    ┌─────────┐-->       ║
║    │         │-->       ║
║    │         │-->       ║
║    │         │-->       ║
║    └─────────┘-->       ║
║                         ║
╚═════════════════════════╝
╔═════════════════════════╗
║                      x  ║
║        ┌─────────┐      ║
║        │         │      ║
║        │         │      ║
║        │         │      ║
║        └─────────┘      ║
║                         ║
╚═════════════════════════╝

The content box can also be moved by dragging the box itself.

╔═════════════════════════╗
║                         ║
║  <-┌─────────┐          ║
║  <-│<------x │          ║
║  <-│         │          ║
║  <-│         │          ║
║  <-└─────────┘          ║
║                         ║
╚═════════════════════════╝
╔═════════════════════════╗
║                         ║
║──────┐                  ║
║    x │                  ║
║      │                  ║
║      │                  ║
║──────┘                  ║
║                         ║
╚═════════════════════════╝

Zooming

The content box can be scaled by scrolling the mouse wheel anywhere in the viewport.

╔═════════════════════════╗
║                         ║
║    ┌─────────┐          ║
║    │x        │          ║
║    │         │          ║
║    │         │          ║
║    └─────────┘          ║
║                         ║
╚═════════════════════════╝
╔═════════════════════════╗
║                         ║
║    ┌────────────┐       ║
║    │x           │       ║
║    │            │       ║
║    │            │       ║
║    │            │       ║
║    └────────────┘       ║
╚═════════════════════════╝

Zooming by scrolling will always be relative to the mouse pointer.

╔═════════════════════════╗
║                         ║
║    ┌─────────┐          ║
║    │         │          ║
║    │         │       x  ║
║    │         │          ║
║    └─────────┘          ║
║                         ║
╚═════════════════════════╝
╔═════════════════════════╗
║                         ║
║                         ║
║          ┌────┐         ║
║          │    │      x  ║
║          └────┘         ║
║                         ║
║                         ║
╚═════════════════════════╝

Programmatic interaction

It is possible to programatically apply transformations with

and access the internal state with

JohanWinther/elm-pan-and-zoom/1.0.0