> ## 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.

# createSheetRenderer

> createSheetRenderer makes the on-screen sheet view.

It shows a sheet with its viewports, and the user can move and add items.

## Import

```typescript theme={null}
import { createSheetRenderer } from '@opengeometry/floorkit';
```

## Example

```typescript theme={null}
import {
  createSheetRenderer,
  type PaperDocument,
  type PaperRenderDeps,
  type PaperEditEvent,
} from '@opengeometry/floorkit';

export async function mountSheets(
  container: HTMLElement,
  document: PaperDocument,
  deps: PaperRenderDeps,
  onEdit: (event: PaperEditEvent) => void,
): Promise<() => void> {
  const renderer = await createSheetRenderer();
  renderer.mount(container, document, deps);
  renderer.on('move', onEdit);
  renderer.on('create', onEdit);
  renderer.setTool('select');
  renderer.fitToPage();
  return () => {
    renderer.off('move', onEdit);
    renderer.off('create', onEdit);
    renderer.dispose();
  };
}
```

## Notes

* The renderer needs a browser.
* The renderer shows your document. It does not own it. On an edit event, update your document and call `update(document)`.
* When the panel changes size, call `resize(width, height)` in pixels.
* Sheet coordinates are in millimetres.
* `setNavigation` sets how the wheel and the mouse buttons move the view. See the notes on [`createModelRenderer`](/floorkit/api/views/create-model-renderer#notes).
* Call `dispose()` when you remove the view.

## Signature

```typescript theme={null}
function createSheetRenderer(): Promise<PaperScreenRenderer>;
```

## Parameters

This function takes no arguments.

## Returns

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

## Types

### PaperScreenRenderer

An interactive screen view of a `PaperDocument` (see .spec/debt.md, "Paper / drawing layer").

```typescript theme={null}
interface PaperScreenRenderer {
  mount(container: HTMLElement, doc: PaperDocument, deps: PaperRenderDeps): void;
  update(doc: PaperDocument): void;
  on(event: PaperEditKind, callback: (event: PaperEditEvent) => void): void;
  off(event: PaperEditKind, callback: (event: PaperEditEvent) => void): void;
  resize(width: number, height: number): void;
  fitToPage(): void;
  setSheet(sheetId: string): void;
  activeSheetId(): string | undefined;
  setTool(toolId: PaperToolId): void;
  readonly navigation: NavigationSettings;
  setNavigation(settings: Partial<NavigationSettings>): void;
  setToolData?(data: { imageSrc?: string }): void;
  setPaperStyle?(style?: PaperStyleInput): void;
  dispose(): void;
}
```

<ResponseField name="navigation" type="NavigationSettings" required>
  How the wheel and mouse buttons pan and zoom this view.
</ResponseField>

### PaperEditKind

```typescript theme={null}
type PaperEditKind = 'select' | 'move' | 'resize' | 'create';
```

### PaperEditEvent

```typescript theme={null}
interface PaperEditEvent {
  kind: PaperEditKind;
  targetId?: string;
  frame?: {
    x: number;
    y: number;
    width: number;
    height: number;
  };
  annotation?: Annotation;
}
```

<ResponseField name="kind" type="PaperEditKind" required />

<ResponseField name="targetId" type="string">
  Document id of the affected viewport/annotation; absent on deselect.
</ResponseField>

<ResponseField
  name="frame"
  type="{
x: number;
y: number;
width: number;
height: number;
}"
>
  The target's current transform (paper mm) after a move/resize.
</ResponseField>

<ResponseField name="annotation" type="Annotation">
  The newly created annotation (present when kind === 'create').
</ResponseField>

### PaperToolId

```typescript theme={null}
type PaperToolId =
  | 'select'
  | 'pan'
  | 'text'
  | 'dimension'
  | 'measure'
  | 'angular'
  | 'radial'
  | 'diameter'
  | 'leader'
  | 'line'
  | 'polyline'
  | 'rect'
  | 'circle'
  | 'image';
```

## Related

* [`Annotation`](/floorkit/api/drawings/sheet-documents#annotation)
* [`NavigationSettings`](/floorkit/api/views/create-model-renderer#navigationsettings)
* [`PaperDocument`](/floorkit/api/drawings/sheet-documents#paperdocument)
* [`PaperRenderDeps`](/floorkit/api/drawings/paper-styles#paperrenderdeps)
* [`PaperStyleInput`](/floorkit/api/drawings/paper-styles#paperstyleinput)


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