View state in our JavaScript PDF viewer
Nutrient Web SDK encapsulates the entire view state inside an immutable data structure. This is accessible for you via the ViewState
. This object is a snapshot representation of the current state of the PDF viewer and can be updated using the Instance#setViewState
method. Since it’s an immutable data structure, it’s not possible to alter the view state without going through this setter:
// You can update the `ViewState` by calling `setViewState` with the new view state.const viewState = instance.viewState;instance.setViewState(viewState.set("showToolbar", false));
// Or by passing in an updater that receives the current `ViewState` as an argument.instance.setViewState((viewState) => viewState.zoomIn());
// This will NOT work because the `ViewState` is immutable.instance.viewState.showToolbar = true;instance.viewState.showToolbar; // => false
// You can update the `ViewState` by calling `setViewState` with the new view state.const viewState = instance.viewState;instance.setViewState(viewState.set("showToolbar", false));
// Or by passing in an updater that receives the current `ViewState` as an argument.instance.setViewState(function (viewState) { return viewState.zoomIn();});
// This will NOT work because the `ViewState` is immutable.instance.viewState.showToolbar = true;instance.viewState.showToolbar; // => false
The ViewState
is implemented using the Immutable.js(opens in a new tab) library. You can refer to the Immutable.Map
(opens in a new tab) documentation to find out how to update the record. Here’s a list of common methods:
set()
Set a specific property:viewState.set("currentPageIndex", 2);merge()
Update multiple properties at once:viewState.merge({showToolbar: false,viewportPadding: { horizontal: 0, vertical: 0 },scrollMode: PSPDFKit.ScrollMode.CONTINUOUS});
The benefit of having the complete application state encapsulated into a single data store is that it makes reasoning about the current state very easy; there’s no hidden state you need to be aware of. You can always snapshot the state and apply it at a different point in time to have the exact same visual representation of your document.
You can observe state changes using the ViewStateChangeEvent
. This event will be emitted whenever the current view state changes either by the user (via clicking the UI) or via Instance#setViewState
. Please refer to the API documentation to learn more about the emitting order of this ViewStateChangeEvent
and other more specific events.