---
title: "Viewer | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Viewer-1/"
---

# Viewer

> - [`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer)

## Classes

### Viewer

#### Extends

#### Implements

- [`IViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewer.md#iviewer)

#### Constructors

##### Constructor

```ts
new Viewer(namedParameters): Viewer;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `namedParameters` | [`IOptions`](#ioptions) |

###### Returns

[`Viewer`](#viewer)

###### Overrides

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`constructor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#constructor)

#### Properties

##### containersFlatListChangedEvent

```ts
readonly containersFlatListChangedEvent: any;
```

##### frontEndTextRenderingEnabled

```ts
readonly frontEndTextRenderingEnabled: boolean;
```

##### preventClickHandleClass

```ts
static preventClickHandleClass: string = "preventCanvasClickHandle";
```

##### preventKeyHandleClass

```ts
static preventKeyHandleClass: string = "preventCanvasKeyHandle";
```

#### Accessors

##### actualRulerWidth

###### Get Signature

```ts
get actualRulerWidth(): number;
```

###### Returns

`number`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`actualRulerWidth`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#actualrulerwidth)

##### actualSizeHorizontalScale

###### Get Signature

```ts
get actualSizeHorizontalScale(): number;
```

Gets value which represents the ratio of screen horizontal resolution to the canvas resolution.

###### Returns

`number`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`actualSizeHorizontalScale`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#actualsizehorizontalscale)

##### actualSizeVerticalScale

###### Get Signature

```ts
get actualSizeVerticalScale(): number;
```

###### Returns

`number`

##### backendUrl

###### Get Signature

```ts
get backendUrl(): string;
```

###### Returns

`string`

###### Set Signature

```ts
set backendUrl(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns

`void`

##### bestFitWhiteSpacePc

###### Get Signature

```ts
get bestFitWhiteSpacePc(): number;
```

Gets or sets white space (in percent from 1 to 99) between content maximal demention and canvas

###### Returns

`number`

###### Set Signature

```ts
set bestFitWhiteSpacePc(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `number` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`bestFitWhiteSpacePc`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#bestfitwhitespacepc)

##### canvas

###### Get Signature

```ts
get canvas(): Canvas;
```

###### Returns

[`Canvas`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Canvas-1.md#canvas)

##### clearSelectionOnDocumentClick

###### Get Signature

```ts
get clearSelectionOnDocumentClick(): boolean;
```

###### Returns

`boolean`

###### Set Signature

```ts
set clearSelectionOnDocumentClick(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `boolean` |

###### Returns

`void`

##### clearSelectionOnViewerClick

###### Get Signature

```ts
get clearSelectionOnViewerClick(): boolean;
```

###### Returns

`boolean`

###### Set Signature

```ts
set clearSelectionOnViewerClick(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `boolean` |

###### Returns

`void`

##### clientSideOptions

###### Get Signature

```ts
get clientSideOptions(): object;
```

###### Deprecated

###### Returns

`object`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`clientSideOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#clientsideoptions)

##### colorParser

###### Get Signature

```ts
get colorParser(): IColorParser;
```

###### Returns

[`IColorParser`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorParser.md#icolorparser)

##### colorPreviewService

###### Get Signature

```ts
get colorPreviewService(): IListenableColorPreviewService;
```

###### Returns

[`IListenableColorPreviewService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#ilistenablecolorpreviewservice)

##### commandManager

###### Get Signature

```ts
get commandManager(): CommandManager;
```

###### Returns

[`CommandManager`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/CommandManager.md#commandmanager)

##### configuration

###### Get Signature

```ts
get configuration(): IViewerConfiguration;
```

###### Returns

[`IViewerConfiguration`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewerConfiguration.md#iviewerconfiguration)

###### Set Signature

```ts
set configuration(conf): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `conf` | [`IViewerConfiguration`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewerConfiguration.md#iviewerconfiguration) |

###### Returns

`void`

##### containersFlatList

###### Get Signature

```ts
get containersFlatList(): Container[];
```

###### Returns

`Container`[]

##### contentAngle

###### Get Signature

```ts
get contentAngle(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set contentAngle(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

###### Implementation of

[`IViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewer.md#iviewer).[`contentAngle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewer.md#contentangle)

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`contentAngle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#contentangle)

##### contentCtx

###### Get Signature

```ts
get contentCtx(): HTMLElement;
```

###### Returns

`HTMLElement`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`contentCtx`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#contentctx)

##### contentHeight

###### Get Signature

```ts
get contentHeight(): number;
```

Content height in css pixels

###### Returns

`number`

###### Overrides

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`contentHeight`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#contentheight)

##### contentWidth

###### Get Signature

```ts
get contentWidth(): number;
```

Content width in css pixels

###### Returns

`number`

###### Overrides

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`contentWidth`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#contentwidth)

##### currentItem

###### Get Signature

```ts
get currentItem(): any;
```

###### Returns

`any`

##### delayedRefreshTimeout

###### Get Signature

```ts
get delayedRefreshTimeout(): number;
```

Amount of milliseconds to wait before delayed refresh will be invoked

###### Returns

`number`

###### Set Signature

```ts
set delayedRefreshTimeout(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `number` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`delayedRefreshTimeout`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#delayedrefreshtimeout)

##### designAtomsApiClient

###### Get Signature

```ts
get designAtomsApiClient(): IDesignAtomsApiClient;
```

###### Returns

[`IDesignAtomsApiClient`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IDesignAtomsApiClient.md#idesignatomsapiclient)

##### element

###### Get Signature

```ts
get element(): HTMLDivElement;
```

###### Returns

`HTMLDivElement`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`element`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#element)

##### eventManager

###### Get Signature

```ts
get eventManager(): IEventManager;
```

###### Returns

[`IEventManager`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IEventManager.md#ieventmanager)

##### exceptionDescription

###### Get Signature

```ts
get exceptionDescription(): string;
```

The value which represents description of exception which was thrown during calling remote scripting method

###### Deprecated

###### Returns

`string`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`exceptionDescription`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#exceptiondescription)

##### gridHandler

###### Get Signature

```ts
get gridHandler(): GridHandler;
```

###### Returns

[`GridHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/GridHandler.md#gridhandler)

##### height

###### Get Signature

```ts
get height(): any;
```

Gets the height (in pixels) of the control area.

###### Returns

`any`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`height`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#height)

##### history

###### Get Signature

```ts
get history(): History;
```

###### Returns

[`History`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/History.md#history)

##### hitTestManager

###### Get Signature

```ts
get hitTestManager(): IHitTestManager;
```

###### Returns

[`IHitTestManager`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IHitTestManager.md#ihittestmanager)

##### holderBounds

###### Get Signature

```ts
get holderBounds(): object;
```

###### Returns

`object`

###### height

```ts
height: any;
```

###### offsetHeight

```ts
offsetHeight: any;
```

###### offsetLeft

```ts
offsetLeft: any;
```

###### offsetTop

```ts
offsetTop: any;
```

###### offsetWidth

```ts
offsetWidth: any;
```

###### width

```ts
width: any;
```

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`holderBounds`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#holderbounds)

##### id

###### Get Signature

```ts
get id(): string;
```

###### Returns

`string`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`id`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#id)

##### inputHandlerManager

###### Get Signature

```ts
get inputHandlerManager(): InputHandlerManager;
```

###### Returns

[`InputHandlerManager`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/InputHandlerManager.md#inputhandlermanager)

##### interactiveContainers

###### Get Signature

```ts
get interactiveContainers(): Container[];
```

ProductHandler.interactiveContainers

###### Returns

`Container`[]

###### Set Signature

```ts
set interactiveContainers(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `Container`[] |

###### Returns

`void`

##### interactiveZonesHandler

###### Get Signature

```ts
get interactiveZonesHandler(): IInteractiveZonesHandler;
```

###### Returns

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler)

##### itemsDataApplier

###### Get Signature

```ts
get itemsDataApplier(): ItemsDataApplier;
```

###### Returns

[`ItemsDataApplier`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemsDataApplier.md#itemsdataapplier)

##### licenseHandler

###### Get Signature

```ts
get licenseHandler(): LicenseHandler;
```

###### Returns

[`LicenseHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/License.md#licensehandler)

##### minZoom

###### Get Signature

```ts
get minZoom(): number;
```

Gets the minimum allowed zoom value

###### Remarks

Zoom values are measured in percents/100.
It means that value = 1 specify 100% zoom (i.e. actual size), value = 10 means 1000% zoom (10x), value = 0,5 means 50% zoom (half), etc.

###### Returns

`number`

###### Set Signature

```ts
set minZoom(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`minZoom`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#minzoom)

##### modalBgClass

###### Get Signature

```ts
get modalBgClass(): string;
```

Gets modal background class name.

###### Returns

`string`

###### Set Signature

```ts
set modalBgClass(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns

`void`

##### pinchZoomEnabled

###### Get Signature

```ts
get pinchZoomEnabled(): boolean;
```

###### Returns

`boolean`

###### Set Signature

```ts
set pinchZoomEnabled(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `boolean` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`pinchZoomEnabled`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#pinchzoomenabled)

##### previewMode

###### Get Signature

```ts
get previewMode(): boolean;
```

###### Returns

`boolean`

###### Set Signature

```ts
set previewMode(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `boolean` |

###### Returns

`void`

##### productHandler

###### Get Signature

```ts
get productHandler(): ProductHandler;
```

###### Returns

[`ProductHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ProductHandler.md#producthandler)

##### productThemeManager

###### Get Signature

```ts
get productThemeManager(): ProductThemeManager;
```

###### Returns

[`ProductThemeManager`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ProductThemeManager.md#productthememanager)

##### renderingConfig

###### Get Signature

```ts
get renderingConfig(): any;
```

###### Returns

`any`

##### renderingConfigProvider

###### Get Signature

```ts
get renderingConfigProvider(): IRenderingConfigProvider;
```

###### Returns

[`IRenderingConfigProvider`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IRenderingConfigProvider.md#irenderingconfigprovider)

##### returnValue

###### Get Signature

```ts
get returnValue(): string;
```

###### Returns

`string`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`returnValue`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#returnvalue)

##### rgbColorParser

###### Get Signature

```ts
get rgbColorParser(): IRgbColorParser;
```

###### Returns

[`IRgbColorParser`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorParser.md#irgbcolorparser)

##### rulerDivision

###### Get Signature

```ts
get rulerDivision(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set rulerDivision(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `number` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`rulerDivision`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#rulerdivision)

##### rulerEnabled

###### Get Signature

```ts
get rulerEnabled(): boolean;
```

###### Returns

`boolean`

###### Set Signature

```ts
set rulerEnabled(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `boolean` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`rulerEnabled`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#rulerenabled)

##### rulerOffsetX

###### Get Signature

```ts
get rulerOffsetX(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set rulerOffsetX(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `number` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`rulerOffsetX`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#ruleroffsetx)

##### rulerOffsetY

###### Get Signature

```ts
get rulerOffsetY(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set rulerOffsetY(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `number` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`rulerOffsetY`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#ruleroffsety)

##### rulerScale

###### Get Signature

```ts
get rulerScale(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set rulerScale(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `number` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`rulerScale`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#rulerscale)

##### rulerWidth

###### Get Signature

```ts
get rulerWidth(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set rulerWidth(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `number` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`rulerWidth`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#rulerwidth)

##### safetyLinesHandler

###### Get Signature

```ts
get safetyLinesHandler(): SafetyLinesHandler;
```

###### Returns

[`SafetyLinesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/SafetyLinesHandler.md#safetylineshandler)

##### screenXDpi

###### Get Signature

```ts
get screenXDpi(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set screenXDpi(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `number` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`screenXDpi`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#screenxdpi)

##### screenYDpi

###### Get Signature

```ts
get screenYDpi(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set screenYDpi(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `number` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`screenYDpi`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#screenydpi)

##### scrollBarsStyle

###### Get Signature

```ts
get scrollBarsStyle(): ScrollBarsStyle;
```

###### Returns

[`ScrollBarsStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ScrollBarsStyle.md#scrollbarsstyle)

###### Set Signature

```ts
set scrollBarsStyle(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`ScrollBarsStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ScrollBarsStyle.md#scrollbarsstyle) |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`scrollBarsStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#scrollbarsstyle)

##### scrollBarWidth

###### Get Signature

```ts
get scrollBarWidth(): number;
```

###### Returns

`number`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`scrollBarWidth`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#scrollbarwidth)

##### scrollingPosition

###### Get Signature

```ts
get scrollingPosition(): PointF;
```

Gets/sets the position of the scroll bars

###### Returns

`PointF`

###### Set Signature

```ts
set scrollingPosition(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `PointF` |

###### Returns

`void`

###### Implementation of

[`IViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewer.md#iviewer).[`scrollingPosition`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewer.md#scrollingposition)

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`scrollingPosition`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#scrollingposition)

##### scrollingSize

###### Get Signature

```ts
get scrollingSize(): any;
```

Gets a scroll bar length (in other words, the right-bottom point of the image fragment which is out of the visible area).

###### Returns

`any`

###### Implementation of

[`IViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewer.md#iviewer).[`scrollingSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IViewer.md#scrollingsize)

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`scrollingSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#scrollingsize)

##### selectedItems

###### Get Signature

```ts
get selectedItems(): Item[];
```

###### Returns

`Item`[]

###### Set Signature

```ts
set selectedItems(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `Item`[] |

###### Returns

`void`

##### status

###### Get Signature

```ts
get status(): UpdateStatus;
```

The value which represents current status of Viewer control

###### Returns

[`UpdateStatus`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/UpdateStatus.md#updatestatus)

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`status`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#status)

##### surface

###### Get Signature

```ts
get surface(): Surface;
```

###### Returns

`Surface`

###### Set Signature

```ts
set surface(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `Surface` |

###### Returns

`void`

##### surfaceHandler

###### Get Signature

```ts
get surfaceHandler(): SurfaceHandler;
```

###### Returns

[`SurfaceHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/SurfaceHandler.md#surfacehandler)

##### textEditorMode

###### Get Signature

```ts
get textEditorMode(): TextEditorMode;
```

###### Returns

[`TextEditorMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ITextParams.md#texteditormode)

###### Set Signature

```ts
set textEditorMode(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`TextEditorMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ITextParams.md#texteditormode) |

###### Returns

`void`

##### textFormattingEnabled

###### Get Signature

```ts
get textFormattingEnabled(): boolean;
```

###### Returns

`boolean`

###### Set Signature

```ts
set textFormattingEnabled(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | `boolean` |

###### Returns

`void`

##### userChanges

###### Get Signature

```ts
get userChanges(): UserChangesService;
```

###### Returns

[`UserChangesService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/UserChanges-1.md#userchangesservice)

##### userEditContainer

###### Get Signature

```ts
get userEditContainer(): Container;
```

###### Returns

`Container`

###### Set Signature

```ts
set userEditContainer(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `Container` |

###### Returns

`void`

##### variableItemHelper

###### Get Signature

```ts
get variableItemHelper(): VariableItemHelper;
```

###### Returns

[`VariableItemHelper`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/VariableItemHelper.md#variableitemhelper)

##### viewportAlignment

###### Get Signature

```ts
get viewportAlignment(): ViewportAlignment;
```

Gets/sets a value that specifies content alignment in the control.

###### Returns

[`ViewportAlignment`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ViewportAlignment.md#viewportalignment)

###### Set Signature

```ts
set viewportAlignment(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | [`ViewportAlignment`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ViewportAlignment.md#viewportalignment) |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`viewportAlignment`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#viewportalignment)

##### viewportDiv

###### Get Signature

```ts
get viewportDiv(): HTMLDivElement;
```

###### Returns

`HTMLDivElement`

##### violationService

###### Get Signature

```ts
get violationService(): ViolationService;
```

###### Returns

[`ViolationService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ViolationService-1.md#violationservice)

##### violationServiceFactory

###### Get Signature

```ts
get violationServiceFactory(): ViolationServiceFactory;
```

###### Returns

[`ViolationServiceFactory`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ViolationServiceFactory.md#violationservicefactory)

##### watermarkConfig

###### Get Signature

```ts
get watermarkConfig(): WatermarkConfig;
```

###### Returns

`WatermarkConfig`

###### Set Signature

```ts
set watermarkConfig(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `WatermarkConfig` |

###### Returns

`void`

##### whitespaceDiv

###### Get Signature

```ts
get whitespaceDiv(): HTMLDivElement;
```

###### Returns

`HTMLDivElement`

##### width

###### Get Signature

```ts
get width(): any;
```

Gets the width (in pixels) of the control area.

###### Returns

`any`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`width`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#width)

##### workspaceHeight

###### Get Signature

```ts
get workspaceHeight(): number;
```

Gets a value that represents the height (in points) of the associated with this

###### Returns

`number`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`workspaceHeight`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#workspaceheight)

##### workspaceWidth

###### Get Signature

```ts
get workspaceWidth(): number;
```

Gets a value that represents the width (in points) of the associated with this

###### Returns

`number`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`workspaceWidth`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#workspacewidth)

##### zoom

###### Get Signature

```ts
get zoom(): number;
```

###### Returns

`number`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`zoom`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#zoom)

##### zoomConfig

###### Get Signature

```ts
get zoomConfig(): IRangeParams;
```

###### Returns

[`IRangeParams`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IRangeParams.md#irangeparams)

###### Overrides

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`zoomConfig`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#zoomconfig)

##### zoomMode

###### Get Signature

```ts
get zoomMode(): ZoomMode;
```

###### Returns

[`ZoomMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ZoomMode.md#zoommode)

###### Set Signature

```ts
set zoomMode(v): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `v` | [`ZoomMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ZoomMode.md#zoommode) |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`zoomMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#zoommode)

##### zoomQuality

###### Get Signature

```ts
get zoomQuality(): ZoomQuality;
```

Gets a value that specifies a zoom quality.

###### Returns

[`ZoomQuality`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ZoomQuality.md#zoomquality)

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`zoomQuality`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#zoomquality)

#### Methods

##### abort()

```ts
abort(): void;
```

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`abort`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#abort)

##### calculateZoomByZoomMode()

```ts
calculateZoomByZoomMode(
   zoomMode, 
   size?, 
   bestFitWhiteSpacePcArg?): number;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `zoomMode` | [`ZoomMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ZoomMode.md#zoommode) | `undefined` |
| `size` | `SizeF` | `null` |
| `bestFitWhiteSpacePcArg` | `number` | `null` |

###### Returns

`number`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`calculateZoomByZoomMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#calculatezoombyzoommode)

##### clearRenderCtx()

```ts
clearRenderCtx(ctx): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `ctx` | `HTMLElement` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`clearRenderCtx`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#clearrenderctx)

##### delayedRefresh()

```ts
delayedRefresh(): void;
```

Indicates that the control needs to be refreshed. The actual refreshing is applied when the user does not update the control state (such as scroll position, zoom value) in one second.

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`delayedRefresh`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#delayedrefresh)

##### dispose()

```ts
dispose(): void;
```

Removes the current `Viewer` from the application.

###### Returns

`void`

###### Overrides

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`dispose`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#dispose)

##### ensureFocus()

```ts
ensureFocus(): void;
```

###### Returns

`void`

##### exitEditMode()

```ts
exitEditMode(): Promise<void>;
```

###### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`void`\>

##### getActualScrollPosition()

```ts
getActualScrollPosition(): any;
```

###### Returns

`any`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`getActualScrollPosition`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#getactualscrollposition)

##### getCurrentSurfacePreview()

```ts
getCurrentSurfacePreview(options?): Promise<Blob>;
```

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options?` | [`IPreviewOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IPreviewOptions.md#ipreviewoptions) | Preview rendering options |

###### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`Blob`\>

Blob containing the preview image of the current surface

##### getHandler()

###### Call Signature

```ts
getHandler(item): ItemHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `BaseItem` |

###### Returns

[`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler)

###### Call Signature

```ts
getHandler(item): PlainTextItemHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `PlainTextItem` |

###### Returns

[`PlainTextItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PlainTextItemHandler.md#plaintextitemhandler)

###### Call Signature

```ts
getHandler(item): ShapeItemHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `ShapeItem` |

###### Returns

[`ShapeItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ShapeItemHandler.md#shapeitemhandler)

###### Call Signature

```ts
getHandler(item): RectangleItemHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `RectangleItem` |

###### Returns

[`RectangleItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/RectangleItemHandler.md#rectangleitemhandler)

###### Call Signature

```ts
getHandler(item): PlaceholderItemHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `PlaceholderItem` |

###### Returns

[`PlaceholderItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PlaceholderItemHandler.md#placeholderitemhandler)

###### Call Signature

```ts
getHandler(item): BoundedTextItemHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `BoundedTextItem` |

###### Returns

[`BoundedTextItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BoundedTextItemHandler.md#boundedtextitemhandler)

###### Call Signature

```ts
getHandler(item): ImageItemHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `ImageItem` |

###### Returns

[`ImageItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ImageItemHandler.md#imageitemhandler)

###### Call Signature

```ts
getHandler(item): PlaceholderItemHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `PlaceholderItem` |

###### Returns

[`PlaceholderItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PlaceholderItemHandler.md#placeholderitemhandler)

###### Call Signature

```ts
getHandler(item): AutoScaledTextItemHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `AutoScaledTextItem` |

###### Returns

[`AutoScaledTextItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/AutoScaledTextItemHandler.md#autoscaledtextitemhandler)

###### Call Signature

```ts
getHandler(item): ArchedTextItemHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `ArchedTextItem` |

###### Returns

[`ArchedTextItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ArchedTextItemHandler.md#archedtextitemhandler)

###### Call Signature

```ts
getHandler<THandler>(item): THandler;
```

###### Type Parameters

| Type Parameter |
| ------ |
| `THandler` *extends* [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) |

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `Item` |

###### Returns

`THandler`

##### getMaxZoom()

```ts
getMaxZoom(): number;
```

Gets the maximum allowed zoom value.

###### Returns

`number`

###### Remarks

Zoom values are measured in percents/100.
It means that value = 1 specify 100% zoom (i.e. actual size), value = 10 means 1000% zoom (10x), value = 0,5 means 50% zoom (half), etc.

###### Overrides

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`getMaxZoom`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#getmaxzoom)

##### getScrollBars()

```ts
getScrollBars(): object;
```

###### Returns

`object`

###### horizontal

```ts
horizontal: number;
```

###### vertical

```ts
vertical: number;
```

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`getScrollBars`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#getscrollbars)

##### getSurfacePreview()

```ts
getSurfacePreview(surfaceIndex, options?): Promise<Blob>;
```

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `surfaceIndex` | `number` | Index of the surface to preview |
| `options?` | [`IPreviewOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IPreviewOptions.md#ipreviewoptions) | Preview rendering options |

###### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`Blob`\>

Blob containing the preview image of given surface

##### getUserEditPrintArea()

```ts
getUserEditPrintArea(): any;
```

###### Returns

`any`

##### getUserEditSurface()

```ts
getUserEditSurface(): Surface;
```

###### Returns

`Surface`

##### getViewportLocation()

```ts
getViewportLocation(): any;
```

###### Returns

`any`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`getViewportLocation`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#getviewportlocation)

##### ignoreDocumentClickOnce()

```ts
ignoreDocumentClickOnce(): void;
```

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`ignoreDocumentClickOnce`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#ignoredocumentclickonce)

##### ignoreSelectionClick()

```ts
ignoreSelectionClick(e): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `e` | `MouseEvent` |

###### Returns

`boolean`

##### initialize()

```ts
initialize(namedParameters?): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `namedParameters` | \{ `ignore?`: `boolean`; `intervalCheckLoop?`: `any`; `readonlyCanvasMode?`: `boolean`; \} |
| `namedParameters.ignore?` | `boolean` |
| `namedParameters.intervalCheckLoop?` | `any` |
| `namedParameters.readonlyCanvasMode?` | `boolean` |

###### Returns

`void`

###### Overrides

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`initialize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#initialize)

##### initTextEditor()

```ts
initTextEditor(
   fontService, 
   useSimpleFontList, 
   textEditor?, 
   textInputIssueUserConfirmationDelegate?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `fontService` | [`IFontService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IFontService.md#ifontservice) | `undefined` |
| `useSimpleFontList` | `boolean` | `undefined` |
| `textEditor` | [`TextEditorMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ITextParams.md#texteditormode) | `TextEditorMode.Default` |
| `textInputIssueUserConfirmationDelegate` | `Func`\<[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`boolean`\>, `string`\> | `null` |

###### Returns

`void`

##### lockViewer()

```ts
lockViewer(): void;
```

###### Returns

`void`

##### onDocumentClick()

```ts
onDocumentClick(e): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `e` | `MouseEvent` |

###### Returns

`void`

###### Overrides

```ts
BaseViewer._onDocumentClick
```

##### onResize()

```ts
onResize(sender, updateButtonGroup): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `sender` | `any` |
| `updateButtonGroup` | `any` |

###### Returns

`void`

###### Overrides

```ts
BaseViewer._onResize
```

##### onResize()

```ts
onResize(h): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`onResize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#onresize)

##### onResize()

```ts
onResize(h): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`onResize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#onresize-1)

##### queryItems()

```ts
queryItems(selectors, queryOptions?): Item[];
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `selectors` | `string` |
| `queryOptions?` | [IQueryOptions](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IQueryOptions.md) |

###### Returns

`Item`[]

##### refresh()

```ts
refresh(): void;
```

Refresh the control immediately

###### Returns

`void`

###### Overrides

```ts
BaseViewer._refresh
```

##### refresh()

```ts
refresh(): void;
```

Refreshes the control immediately.

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`refresh`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#refresh)

##### releaseHandler()

```ts
releaseHandler(itemHandler): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `itemHandler` | [`ItemHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ItemHandler.md#itemhandler) |

###### Returns

`void`

##### scrolled()

```ts
scrolled(h): void;
```

Fires when scroll position of the control is changed

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`scrolled`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#scrolled)

##### scrolled()

```ts
scrolled(h): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`scrolled`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#scrolled-1)

##### setCursor()

```ts
setCursor(cursor, onBody?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `cursor` | [`Cursor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Common.md#cursor) | `undefined` |
| `onBody` | `boolean` | `false` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`setCursor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#setcursor)

##### setInputHandlerType()

###### Call Signature

```ts
setInputHandlerType(
   type, 
   args, 
   options?): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `type` | [`Create`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/InputHandlerType.md#enumeration-member-create) |
| `args` | [`ICreateInputHandlerArgs`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/CreateInputHandler.md#icreateinputhandlerargs) |
| `options?` | [`ISetInputHandlerOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ISetInputHandlerOptions.md#isetinputhandleroptions) |

###### Returns

`any`

###### Call Signature

```ts
setInputHandlerType(type): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `type` | [`Default`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/InputHandlerType.md#enumeration-member-default) |

###### Returns

`any`

###### Call Signature

```ts
setInputHandlerType(type): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `type` | [`Locked`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/InputHandlerType.md#enumeration-member-locked) |

###### Returns

`any`

###### Call Signature

```ts
setInputHandlerType(
   type, 
   args, 
   options?): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `type` | [`SelectPixel`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/InputHandlerType.md#enumeration-member-selectpixel) |
| `args` | [`IInputHandlerArgs`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInputHandlerArgs.md#iinputhandlerargs) |
| `options?` | [`ISetInputHandlerOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ISetInputHandlerOptions.md#isetinputhandleroptions) |

###### Returns

`any`

##### setIntervalCheckLoop()

```ts
setIntervalCheckLoop(intervalCheckLoop): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `intervalCheckLoop` | [`IIntervalCheckLoop`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/StandardIntervalCheckLoop.md#iintervalcheckloop) |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`setIntervalCheckLoop`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#setintervalcheckloop)

##### setMaxZoom()

```ts
setMaxZoom(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`setMaxZoom`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#setmaxzoom)

##### setTextEditorMode()

```ts
setTextEditorMode(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

##### setTextWhizzModule()

```ts
setTextWhizzModule(textWhizz): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `textWhizz` | `any` |

###### Returns

`void`

##### setZoom()

```ts
setZoom(
   value, 
   params?, 
   ignoreZoomConfigRestrictions?, 
   withoutUpdate?): number;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `value` | `number` | `undefined` |
| `params?` | [`ZoomParams`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#zoomparams) | `undefined` |
| `ignoreZoomConfigRestrictions?` | `boolean` | `false` |
| `withoutUpdate?` | `boolean` | `false` |

###### Returns

`number`

###### Overrides

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`setZoom`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#setzoom)

##### statusChanged()

```ts
statusChanged(h): void;
```

Fires when status  is updated.

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`statusChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#statuschanged)

##### statusChanged()

```ts
statusChanged(h): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`statusChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#statuschanged-1)

##### unlockViewer()

```ts
unlockViewer(): void;
```

Hides the semi-transparent rectangle when it is shown over the `Viewer`

###### Returns

`void`

###### Remarks

To show this rectangle use the `Viewer.lockViewer` method.

##### updateWhitespace()

```ts
updateWhitespace(): void;
```

###### Returns

`void`

##### waitUpdate()

```ts
waitUpdate(): Promise<void>;
```

###### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`void`\>

##### zoomed()

```ts
zoomed(h): void;
```

Fires when the content is zoomed in the control

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`zoomed`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#zoomed)

##### zoomed()

```ts
zoomed(h): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`zoomed`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#zoomed-1)

##### zoomToItems()

```ts
zoomToItems(items?): void;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `items` | `BaseItem`[] | `[]` |

###### Returns

`void`

###### Inherited from

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`zoomToItems`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#zoomtoitems)

##### zoomToRectangle()

```ts
zoomToRectangle(rect): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rect` | `RectangleF` |

###### Returns

`void`

##### zoomToSelection()

```ts
zoomToSelection(): void;
```

###### Returns

`void`

###### Overrides

[`BaseViewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#baseviewer).[`zoomToSelection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer.md#zoomtoselection)

## Interfaces

### IOptions

#### Properties

##### backendUrl?

```ts
optional backendUrl?: string;
```

##### canvasBackground?

```ts
optional canvasBackground?: CanvasBackground;
```

##### frontEndTextRenderingEnabled?

```ts
optional frontEndTextRenderingEnabled?: boolean;
```

##### holderElement

```ts
holderElement: HTMLDivElement;
```

##### ignorePermissionsMode?

```ts
optional ignorePermissionsMode?: boolean;
```

##### keyInputElement?

```ts
optional keyInputElement?: HTMLDivElement;
```

##### productViewerPartId?

```ts
optional productViewerPartId?: string;
```

##### readonlyCanvasMode?

```ts
optional readonlyCanvasMode?: boolean;
```

##### rulerEnabled?

```ts
optional rulerEnabled?: boolean;
```

##### surface?

```ts
optional surface?: Surface;
```

##### zone?

```ts
optional zone?: any;
```

## Type Aliases

### CanvasBackground

```ts
type CanvasBackground = 
  | "chess"
  | {
  color: string;
};
```

***

### ContainersChangeData

```ts
type ContainersChangeData = object;
```

#### Properties

##### added

```ts
added: MultiSelectMode[];
```

##### removed

```ts
removed: MultiSelectMode[];
```

***

### ModuleOfTextWhizz

```ts
type ModuleOfTextWhizz = object;
```

#### Properties

##### module

```ts
module: typeof MultiSelectMode;
```