--- title: "BaseViewer | Customer's Canvas On-Premises" canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/BaseViewer/" --- # BaseViewer > - [`Viewer`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Viewer-1.md#viewer) ## Classes ### BaseViewer #### Extended by #### Constructors ##### Constructor ```ts new BaseViewer(): BaseViewer; ``` ###### Returns [`BaseViewer`](#baseviewer) #### Properties ##### onDocumentClick ```ts onDocumentClick: (e) => void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `e` | `MouseEvent` | ###### Returns `void` #### Accessors ##### actualRulerWidth ###### Get Signature ```ts get actualRulerWidth(): number; ``` ###### Returns `number` ##### actualSizeHorizontalScale ###### Get Signature ```ts get actualSizeHorizontalScale(): number; ``` Gets value which represents the ratio of screen horizontal resolution to the canvas resolution. ###### Returns `number` ##### 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` ##### clientSideOptions ###### Get Signature ```ts get clientSideOptions(): object; ``` ###### Deprecated ###### Returns `object` ##### contentAngle ###### Get Signature ```ts get contentAngle(): number; ``` ###### Returns `number` ###### Set Signature ```ts set contentAngle(value): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `value` | `number` | ###### Returns `void` ##### contentCtx ###### Get Signature ```ts get contentCtx(): HTMLElement; ``` ###### Returns `HTMLElement` ##### contentHeight ###### Get Signature ```ts get contentHeight(): any; ``` Gets a value that represents the height of the control's content taking into account its vertical resolution and zoom value ###### Returns `any` ##### contentWidth ###### Get Signature ```ts get contentWidth(): any; ``` Gets a value that represents the width of the control's content taking into account its horizontal resolution and zoom value ###### 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` ##### element ###### Get Signature ```ts get element(): HTMLDivElement; ``` ###### Returns `HTMLDivElement` ##### 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` ##### height ###### Get Signature ```ts get height(): any; ``` Gets the height (in pixels) of the control area. ###### Returns `any` ##### 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; ``` ##### id ###### Get Signature ```ts get id(): string; ``` ###### Returns `string` ##### 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` ##### pinchZoomEnabled ###### Get Signature ```ts get pinchZoomEnabled(): boolean; ``` ###### Returns `boolean` ###### Set Signature ```ts set pinchZoomEnabled(v): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `v` | `boolean` | ###### Returns `void` ##### returnValue ###### Get Signature ```ts get returnValue(): string; ``` ###### Returns `string` ##### rulerDivision ###### Get Signature ```ts get rulerDivision(): number; ``` ###### Returns `number` ###### Set Signature ```ts set rulerDivision(v): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `v` | `number` | ###### Returns `void` ##### rulerEnabled ###### Get Signature ```ts get rulerEnabled(): boolean; ``` ###### Returns `boolean` ###### Set Signature ```ts set rulerEnabled(v): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `v` | `boolean` | ###### Returns `void` ##### rulerOffsetX ###### Get Signature ```ts get rulerOffsetX(): number; ``` ###### Returns `number` ###### Set Signature ```ts set rulerOffsetX(v): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `v` | `number` | ###### Returns `void` ##### rulerOffsetY ###### Get Signature ```ts get rulerOffsetY(): number; ``` ###### Returns `number` ###### Set Signature ```ts set rulerOffsetY(v): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `v` | `number` | ###### Returns `void` ##### rulerScale ###### Get Signature ```ts get rulerScale(): number; ``` ###### Returns `number` ###### Set Signature ```ts set rulerScale(v): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `v` | `number` | ###### Returns `void` ##### rulerWidth ###### Get Signature ```ts get rulerWidth(): number; ``` ###### Returns `number` ###### Set Signature ```ts set rulerWidth(v): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `v` | `number` | ###### Returns `void` ##### screenXDpi ###### Get Signature ```ts get screenXDpi(): number; ``` ###### Returns `number` ###### Set Signature ```ts set screenXDpi(v): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `v` | `number` | ###### Returns `void` ##### screenYDpi ###### Get Signature ```ts get screenYDpi(): number; ``` ###### Returns `number` ###### Set Signature ```ts set screenYDpi(v): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `v` | `number` | ###### Returns `void` ##### 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` ##### scrollBarWidth ###### Get Signature ```ts get scrollBarWidth(): number; ``` ###### Returns `number` ##### 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` ##### 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` ##### 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) ##### 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` ##### width ###### Get Signature ```ts get width(): any; ``` Gets the width (in pixels) of the control area. ###### Returns `any` ##### workspaceHeight ###### Get Signature ```ts get workspaceHeight(): number; ``` Gets a value that represents the height (in points) of the associated with this ###### Returns `number` ##### workspaceWidth ###### Get Signature ```ts get workspaceWidth(): number; ``` Gets a value that represents the width (in points) of the associated with this ###### Returns `number` ##### zoom ###### Get Signature ```ts get zoom(): number; ``` ###### Returns `number` ##### zoomConfig ###### Get Signature ```ts get zoomConfig(): IRangeParams; ``` ###### Returns [`IRangeParams`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IRangeParams.md#irangeparams) ##### 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` ##### 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) #### Methods ##### abort() ```ts abort(): void; ``` ###### Returns `void` ##### 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` ##### clearRenderCtx() ```ts clearRenderCtx(ctx): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `ctx` | `HTMLElement` | ###### Returns `void` ##### 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` ##### dispose() ```ts dispose(): void; ``` Releases all resources ###### Returns `void` ##### getActualScrollPosition() ```ts getActualScrollPosition(): any; ``` ###### Returns `any` ##### 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. ##### getScrollBars() ```ts getScrollBars(): object; ``` ###### Returns `object` ###### horizontal ```ts horizontal: number; ``` ###### vertical ```ts vertical: number; ``` ##### getViewportLocation() ```ts getViewportLocation(): any; ``` ###### Returns `any` ##### ignoreDocumentClickOnce() ```ts ignoreDocumentClickOnce(): void; ``` ###### Returns `void` ##### initialize() ```ts initialize(intervalCheckLoop?): void; ``` ###### Parameters | Parameter | Type | Default value | | ------ | ------ | ------ | | `intervalCheckLoop` | `any` | `null` | ###### Returns `void` ##### onResize() ```ts onResize(h): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `h` | `any` | ###### Returns `void` ##### onResize() ```ts onResize(h): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `h` | `any` | ###### Returns `void` ##### refresh() ```ts refresh(): void; ``` Refreshes the control immediately. ###### Returns `void` ##### scrolled() ```ts scrolled(h): void; ``` Fires when scroll position of the control is changed ###### Parameters | Parameter | Type | | ------ | ------ | | `h` | `any` | ###### Returns `void` ##### scrolled() ```ts scrolled(h): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `h` | `any` | ###### Returns `void` ##### 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` ##### 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` ##### setMaxZoom() ```ts setMaxZoom(value): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `value` | `number` | ###### Returns `void` ##### setZoom() ```ts setZoom( zoom, params, ignoreZoomConfigRestrictions?, withoutUpdate?): number; ``` ###### Parameters | Parameter | Type | Default value | | ------ | ------ | ------ | | `zoom` | `number` | `undefined` | | `params` | [`ZoomParams`](#zoomparams) | `undefined` | | `ignoreZoomConfigRestrictions` | `boolean` | `false` | | `withoutUpdate` | `boolean` | `false` | ###### Returns `number` ##### statusChanged() ```ts statusChanged(h): void; ``` Fires when status is updated. ###### Parameters | Parameter | Type | | ------ | ------ | | `h` | `any` | ###### Returns `void` ##### statusChanged() ```ts statusChanged(h): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `h` | `any` | ###### Returns `void` ##### zoomed() ```ts zoomed(h): void; ``` Fires when the content is zoomed in the control ###### Parameters | Parameter | Type | | ------ | ------ | | `h` | `any` | ###### Returns `void` ##### zoomed() ```ts zoomed(h): void; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `h` | `any` | ###### Returns `void` ##### zoomToItems() ```ts zoomToItems(items?): void; ``` ###### Parameters | Parameter | Type | Default value | | ------ | ------ | ------ | | `items` | `BaseItem`[] | `[]` | ###### Returns `void` ##### zoomToSelection() ```ts zoomToSelection(): void; ``` ###### Returns `void` *** ### ZoomParams #### Constructors ##### Constructor ```ts new ZoomParams(): ZoomParams; ``` ###### Returns [`ZoomParams`](#zoomparams) #### Properties ##### centerPageX? ```ts optional centerPageX?: number; ``` ##### centerPageY? ```ts optional centerPageY?: number; ``` ##### preventEvent? ```ts optional preventEvent?: boolean; ``` ##### skipZoomToCenter? ```ts optional skipZoomToCenter?: boolean; ``` ##### workspaceX? ```ts optional workspaceX?: number; ``` ##### workspaceY? ```ts optional workspaceY?: number; ```