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

# createModelRenderer

> Create the interactive 2D plan renderer.

`createModelRenderer` makes the on-screen 2D plan view. The user can pan, zoom and edit the plan in it.

## Import

```typescript theme={null}
import {
  createModelRenderer,
  wheelNavigation,
  TRACKPAD_NAVIGATION,
  MOUSE_NAVIGATION,
} from '@opengeometry/floorkit';
```

## Example

```typescript theme={null}
import {
  MOUSE_NAVIGATION,
  PanButton,
  WheelAction,
  createModelRenderer,
  type VectorDrawing,
} from '@opengeometry/floorkit';

export async function mountPlan(container: HTMLElement, drawing: VectorDrawing, mouse: boolean) {
  const renderer = await createModelRenderer();
  if (mouse) renderer.setNavigation(MOUSE_NAVIGATION);
  else renderer.setNavigation({ wheel: WheelAction.Pan, panButtons: [PanButton.Middle] });
  renderer.mount(container, drawing);
  return renderer;
}
```

## Notes

* The renderer needs a browser.
* `setNavigation` sets how the wheel and the mouse buttons move the view. The sheet view from [`createSheetRenderer`](/floorkit/api/views/create-sheet-renderer) has the same method and the same settings.
* The default is `TRACKPAD_NAVIGATION`: a two-finger scroll pans, and a pinch zooms. Ctrl or Cmd with the wheel also zooms.
* With `MOUSE_NAVIGATION` the wheel zooms at the pointer.
* `panButtons` lists the mouse buttons that pan by a drag. `PanButton.Left` pans only from empty space. The other buttons pan from any place.
* In version 1.0.0 the wheel always zoomed. Call `setNavigation(MOUSE_NAVIGATION)` to keep that.
* Two fingers on a touch screen do not pan or zoom.

## Signature

```typescript theme={null}
function createModelRenderer(): Promise<ModelScreenRenderer>;
```

## Parameters

This function takes no arguments.

## Returns

```typescript theme={null}
Promise<ModelScreenRenderer>;
```

## wheelNavigation

Resolve one wheel event to a pan in screen pixels or a zoom factor.

```typescript theme={null}
function wheelNavigation(wheel: WheelInput, settings: NavigationSettings): WheelNavigation;
```

## TRACKPAD\_NAVIGATION

Two-finger scroll pans, pinch or Ctrl/Cmd with the wheel zooms.

```typescript theme={null}
const TRACKPAD_NAVIGATION: NavigationSettings;
```

## MOUSE\_NAVIGATION

The wheel zooms about the cursor; left and middle drag pan.

```typescript theme={null}
const MOUSE_NAVIGATION: NavigationSettings;
```

## Types

### WheelInput

The wheel event fields navigation reads.

```typescript theme={null}
interface WheelInput {
  deltaX: number;
  deltaY: number;
  deltaMode: number;
  ctrlKey: boolean;
  metaKey: boolean;
}
```

### NavigationSettings

How pointer input navigates the 2D plan editor and the sheet editor.

```typescript theme={null}
interface NavigationSettings {
  wheel: WheelAction;
  panButtons: readonly PanButton[];
  zoomSpeed: number;
}
```

<ResponseField name="wheel" type="WheelAction" required>
  What an unmodified wheel or two-finger scroll does.
</ResponseField>

<ResponseField name="panButtons" type="readonly PanButton[]" required>
  Buttons that pan by dragging. `PanButton.Left` pans from empty space only; the other buttons pan
  from anywhere.
</ResponseField>

<ResponseField name="zoomSpeed" type="number" required>
  Multiplier on zoom speed. Must be a finite number above zero.
</ResponseField>

### WheelNavigation type

The result of wheelNavigation: a pan in pixels or a zoom factor.

```typescript theme={null}
type WheelNavigation =
  | {
      action: NavigationAction.Pan;
      dx: number;
      dy: number;
    }
  | {
      action: NavigationAction.Zoom;
      factor: number;
    };
```

### WheelAction

What an unmodified wheel or two-finger scroll does in a 2D view.

```typescript theme={null}
enum WheelAction {
  Pan = 0,
  Zoom = 1,
}
```

### PanButton

A mouse button that pans by dragging.

```typescript theme={null}
enum PanButton {
  Left = 0,
  Middle = 1,
  Right = 2,
}
```

### NavigationAction

The navigation a wheel event resolves to.

```typescript theme={null}
enum NavigationAction {
  Pan = 0,
  Zoom = 1,
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.