> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tsdraw.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Viewport

> API reference for viewport and camera utilities

## Viewport

```typescript theme={null}
interface Viewport {
  x: number
  y: number
  zoom: number
}
```

Represents the camera position and zoom level.

## ZoomRange

```typescript theme={null}
interface ZoomRange {
  min: number
  max: number
}

const DEFAULT_ZOOM_RANGE: ZoomRange = { min: 0.1, max: 8 }
```

## Functions

### createViewport

```typescript theme={null}
function createViewport(): Viewport
```

Returns a viewport at the origin with zoom `1`.

### screenToPage

```typescript theme={null}
function screenToPage(viewport: Viewport, screenX: number, screenY: number): { x: number; y: number }
```

Converts screen (pixel) coordinates to page (world) coordinates.

### pageToScreen

```typescript theme={null}
function pageToScreen(viewport: Viewport, pageX: number, pageY: number): { x: number; y: number }
```

Converts page coordinates to screen coordinates.

### setViewport

```typescript theme={null}
function setViewport(viewport: Viewport, next: Partial<Viewport>): Viewport
```

Returns a new viewport with the specified properties merged in.

### panViewport

```typescript theme={null}
function panViewport(viewport: Viewport, deltaX: number, deltaY: number): Viewport
```

Returns a new viewport translated by the given deltas.

### zoomViewport

```typescript theme={null}
function zoomViewport(viewport: Viewport, factor: number, centerX: number, centerY: number): Viewport
```

Returns a new viewport zoomed by the given factor, centered on the given screen point.

### clampZoom

```typescript theme={null}
function clampZoom(viewport: Viewport, range: ZoomRange): Viewport
```

Clamps the viewport zoom to the given range.

## Camera pan session

```typescript theme={null}
function beginCameraPan(viewport: Viewport): CameraPanSession
function moveCameraPan(session: CameraPanSession, deltaX: number, deltaY: number): Viewport
```

## Camera slide

```typescript theme={null}
function startCameraSlide(viewport: Viewport, velocityX: number, velocityY: number, options?: CameraSlideOptions): CameraSlideAnimation
```

Creates a momentum-based slide animation that decelerates over time.