Class: ViewState

PSPDFKit.ViewState

new PSPDFKit.ViewState()

The current UI state of a document instance.

The ViewState holds information about the current UI representation of a specific document.

It is an Immutable.Record and thus can be updated using set(key, value), for example: viewState.set("showToolbar", false).

An initial ViewState can be set in PSPDFKit.Configuration.

Because the ViewState is an immutable data type, you must use PSPDFKit.Instance#setViewState on the PSPDFKit.Instance to update it.

To be notified when PSPDFKit updates the ViewState, you can use the dedicated PSPDFKit.Instance~ViewStateChangeEvent.

The following examples show you how to update the ViewState and how to get notified about ViewState changes

Adding a listener for the view state changed event:

instance.addEventListener("viewState.change", (viewState) => {
  console.log(viewState.toJS());
});

Update values for the immutable state object using PSPDFKit.Instance#setViewState:

const state = instance.viewState;
const newState = state.set("currentPageIndex", 2);
instance.setViewState(newState);

Extends

  • Immutable.Record

Members

Methods




Members

allowPrinting: boolean

Control whether or not the printing button in the toolbar should be disabled. If the user has insufficient permissions, the feature will automatically be disabled.

This feature requires the download permission in the JWT, because on some browsers we have to fall back to downloading the PDF in order to allow performant printing.

It is possible to remove the print button with the Toolbar API.

Type:
  • boolean
Default Value:
  • true

currentPageIndex: number

The page index of the page that's currently visible. If there is more than one page visible this will return the page that is using the most space in the viewport. The pageIndex is zero-based and has a maximum value of totalPageCount - 1.

Type:
  • number
Default Value:
  • 0

(nullable) interactionMode: PSPDFKit.InteractionMode

Controls the current interaction mode in the viewer. When this value is changed, we will make sure that the state is properly transformed.

If, for example, the user is currently creating an ink annotation and you change this value to PSPDFKit.InteractionMode.TEXT, we will delete the current in-memory ink annotation.

For a list of all available mode, please refer to PSPDFKit.InteractionMode.

If this value is null, no interaction mode will be enabled. This corresponds to the default mode that allows text selection and scrolling using the mouse wheel or scrollbars (and panning on mobile devices).

Type:
Default Value:
  • null
Example
instance.setViewState(viewState => (
   viewState.set("interactionMode", PSPDFKit.InteractionMode.PAN)
 ));

keepFirstSpreadAsSinglePage: boolean

When this is enabled, the first spread will always show a single page, even when PSPDFKit.LayoutMode.DOUBLE is enabled. This is useful for magazines that want to show a cover page before the regular content starts.

A spread is a container for either one or two pages, based on the configured PSPDFKit.ViewState#layoutMode.

Type:
  • boolean
Default Value:
  • false

layoutMode: PSPDFKit.LayoutMode

Controls how pages inside a view are displayed.

Type:

pageSpacing: number

The spacing between pages in pixels. This value will adjust to the current zoom level, so when you zoom in, it does not appear fixed to the viewport. This spacing only applies for PSPDFKit.LayoutMode.DOUBLE.

Type:
  • number
Default Value:
  • 0

pagesRotation: number

The current rotation of all pages. The value is in degree and describes the clockwise rotation.

Can either be 0°, 90°, 180°, or 270°. Multiple or negative values are normalized tho this interval.

When a page rotation is set, the values are never persisted.

Type:
  • number
Default Value:
  • 0
Example
instance.setViewState(viewState => viewState.set("pagesRotation", -450))
// ... later
instance.viewState.pagesRotation; // => 270

readOnly: boolean

When the read only mode is activated, the UI for creating, updating and deleting annotations will be completely hidden. In addition, the user will also no longer be able to select annotations.

If a read only mode is specified within the JWT itself, this option can not be unset.

Type:
  • boolean
Default Value:
  • false

scrollMode: PSPDFKit.ScrollMode

Controls how pages can be scrolled.

Type:

showAnnotations: boolean

When this is set to false, annotations will no longer be rendered.

This option can alo be set to false, when PSPDFKit.ViewState#readOnly mode is enabled.

Type:
  • boolean
Default Value:
  • true

showToolbar: boolean

Set this to true if you want a toolbar for navigation and annotation controls or false if you don't.

Type:
  • boolean
Default Value:
  • true

(nullable) sidebarMode: PSPDFKit.SidebarMode

Controls the current sidebar mode in the viewer.

For a list of all available mode, please refer to PSPDFKit.SidebarMode.

If this value is null, the sidebar is hidden. This corresponds to the default mode.

Type:
Default Value:
  • null
Example
instance.setViewState(viewState => (
  viewState.set("sidebarMode", PSPDFKit.SidebarMode.THUMBNAILS)
));

spreadSpacing: number

The spacing between spreads in pixels. This value will adjust to the current zoom level, so when you zoom in, it does not appear fixed to the viewport. This spacing only applies for PSPDFKit.ScrollMode.CONTINUOUS.

A spread is a container for either one or two pages, based on the configured PSPDFKit.ViewState#layoutMode.

Type:
  • number
Default Value:
  • 20

viewportPadding: Object

The padding between the viewport and the document in pixels. This value will not increase, when you zoom in.

The horizontal value will be used as padding-left and padding-right and the vertical value for padding-top and padding-bottom. The same value for both sides will be used, this means that horizontal: 20 is equal to padding-left: 20px; padding-right: 20px;.

When you set those values to zero, there will be no space between the viewport and the document.

The object must always have the horizontal and vertical key with a positive number value.

Type:
  • Object
Properties:
Name Type Description
horizontal number

The horizontal padding for left and right in pixel.

vertical number

The vertical padding for top and bottom in pixel.

Default Value:
  • { horizontal: 20, vertical: 20 }

zoom: PSPDFKit.ZoomMode|number

Controls the current zoom factor. This could either be a number multiplier or a distinct zoom mode

Type:
Default Value:

Methods

goToNextPage() → {PSPDFKit.ViewState}

Creates a new PSPDFKit.ViewState with a currentPageIndex increased by one.

This method cannot be called on an instance of PSPDFKit.ViewState without an PSPDFKit.Instance assigned. You can use this method on all view states returned by PSPDFKit.Instance#viewState and PSPDFKit.Instance#setViewState.

When you hit PSPDFKit.Instance#totalPageCount - 1, it will not update the state.

Throws:

When this method is called on a self-constructed instance of PSPDFKit.ViewState.

Type
PSPDFKit.Error
Returns:

New PSPDFKit.ViewState with an updated zoom property.

Type
PSPDFKit.ViewState
Example
instance.setViewState(viewState => viewState.goToNextPage());

goToPreviousPage() → {PSPDFKit.ViewState}

Creates a new PSPDFKit.ViewState with a currentPageIndex decreased by one.

When you hit 0, it will not update the state.

Throws:

When this method is called on a self-constructed instance of PSPDFKit.ViewState.

Type
PSPDFKit.Error
Returns:

New PSPDFKit.ViewState with an updated zoom property.

Type
PSPDFKit.ViewState
Example
instance.setViewState(viewState => viewState.goToPreviousPage());

rotateLeft() → {PSPDFKit.ViewState}

Creates a new PSPDFKit.ViewState where all pages are rotated by 90° counterclockwise.

Returns:

New PSPDFKit.ViewState with an updated pagesRotation property.

Type
PSPDFKit.ViewState
Example
instance.setViewState(viewState => viewState.rotateLeft())

rotateRight() → {PSPDFKit.ViewState}

Creates a new PSPDFKit.ViewState where all pages are rotated by 90° clockwise.

Returns:

New PSPDFKit.ViewState with an updated pagesRotation property.

Type
PSPDFKit.ViewState
Example
instance.setViewState(viewState => viewState.rotateRight())

zoomIn() → {PSPDFKit.ViewState}

Creates a new PSPDFKit.ViewState with a specific zoom level that is 25% greater than the current zoom level.

If a PSPDFKit.ZoomMode is set, it will overwrite it with a number value (which will no longer adopt when you resize the window).

This method cannot be called on an instance of PSPDFKit.ViewState without an PSPDFKit.Instance assigned. You can use this method on all view states returned by PSPDFKit.Instance#viewState and PSPDFKit.Instance#setViewState.

When the new zoom level would exceed the maximum zoom level, it will be capped at the maximum value.

Throws:

When this method is called on a self-constructed instance of PSPDFKit.ViewState.

Type
PSPDFKit.Error
Returns:

New PSPDFKit.ViewState with an updated zoom property.

Type
PSPDFKit.ViewState
Example
instance.setViewState(viewState => viewState.zoomIn())

zoomOut() → {PSPDFKit.ViewState}

Creates a new PSPDFKit.ViewState with a specific zoom level that is 25% lower than the current zoom level.

If a PSPDFKit.ZoomMode is set, it will overwrite it with a number value (which will no longer adopt when you resize the window).

This method cannot be called on an instance of PSPDFKit.ViewState without an PSPDFKit.Instance assigned. You can use this method on all view states returned by PSPDFKit.Instance#viewState and PSPDFKit.Instance#setViewState.

When the new zoom level would undercut the minimum zoom level, it will be capped at the minimum value.

Throws:

When this method is called on a self-constructed instance of PSPDFKit.ViewState.

Type
PSPDFKit.Error
Returns:

New PSPDFKit.ViewState with an updated zoom property.

Type
PSPDFKit.ViewState
Example
instance.setViewState(viewState => viewState.zoomOut())