Nutrient Web SDK

ReferenceNutrientViewerViewState

Class ViewState

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

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

An initial ViewState can be set in Configuration.

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

To be notified when NutrientViewer updates the ViewState, you can use the dedicated "viewState.change".

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

Class

Example

Adding a listener for the "viewState.change" event

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

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

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

See Also

Hierarchy

ReadonlyImmutableRecordViewState

Constructors

new ViewState(props)

  • Parameters

    props
    Partial<{ … }>
    Optional

Properties

allowExport

Readonly
boolean

Control whether or not the export PDF 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.

It is possible to remove the export PDF button with the Toolbar API.

Default Value

true

allowPrinting

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

Default Value

true

canScrollWhileDrawing

Readonly
boolean

This flag controls whether to enable/disable finger scrolling during Ink Drawing and Ink Erasing using a pen.

  • When set to false, (default), scrolling with the finger in drawing mode is disabled.
  • When set to true, once a pen input has been detected, finger input will result in scrolling the document. The pen detection state is shared across all pages, so switching pages does not reset the behavior.

Example

instance.setViewState(viewState => (
   viewState.set("canScrollWhileDrawing", true)
 ));

Default Value

false

commentDisplay

Readonly
"FITTING" | "POPOVER" | "FLOATING"

Controls how comments are displayed in the viewer in desktop and tablet modes. In mobile devices, comments are always displayed in a drawer a the bottom of the viewport:

  • NutrientViewer.CommentDisplay.FITTING: Comments are displayed in a dialog or floating depending on the available viewport space. This is the default value.
  • NutrientViewer.CommentDisplay.POPOVER: Comments are displayed in a dialog next to their reference annotation marker.
  • NutrientViewer.CommentDisplay.FLOATING: Comments are displayed floating next to the page side, at the same height as their reference annotation marker, except when ViewState#zoom is set to .ZoomeMode#FIT_TO_WIDTH`, in which case they are displayed in a popover dialog instead.

Default Value

CommentDisplay#FITTING

currentPageIndex

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

Default Value

0

disablePointSnapping

Readonly
boolean

Snapping to the nearest point is enabled by default in ur SDK for measurement tools. It can be disabled by this API.

Example

instance.setViewState(viewState =>
  viewState.set("disablePointSnapping", true)
);

Default Value

false

enableAnnotationToolbar

Readonly
boolean

Set this to false if you want NutrientViewer to disable the annotation toolbar when an annotation is being created or modified.

Default Value

true

formDesignMode

Readonly
boolean

This flag controls what kind of UI interaction is active for widget annotations.

  • When set to false, (default), clicking on a widget annotation will allow to modify its value.
  • When set to true, clicking on a widget annotation will select it and allow moving, resizing and deleting it using the annotation toolbar.

This flag can only be set to true if the Form Creator component is included in the license and the current backend supports it.

Example

instance.setViewState(viewState => (
   viewState.set("formDesignMode", true)
 ));

Default Value

false

instance

Readonly
NutrientViewer.Instance | null

An optional reference to a mounted Instance. This is required to call the following methods on ViewState:

  • {@link ViewState#zoomIn}
  • {@link ViewState#zoomOut}
  • {@link ViewState#nextZoomLevel}

interactionMode

Readonly

    | "NOTE"
    | "TEXT"
    | "TEXT_HIGHLIGHTER"
    | "INK"
    | "INK_SIGNATURE"
    | "SIGNATURE"
    | "STAMP_PICKER"
    | "STAMP_CUSTOM"
    | "SHAPE_LINE"
    | "SHAPE_RECTANGLE"
    | "SHAPE_ELLIPSE"
    | "SHAPE_POLYGON"
    | "SHAPE_POLYLINE"
    | "INK_ERASER"
    | "COMMENT_MARKER"
    | "CALLOUT"
    | "PAN"
    | "SEARCH"
    | "DOCUMENT_EDITOR"
    | "MARQUEE_ZOOM"
    | "REDACT_TEXT_HIGHLIGHTER"
    | "REDACT_SHAPE_RECTANGLE"
    | "DOCUMENT_CROP"
    | "BUTTON_WIDGET"
    | "TEXT_WIDGET"
    | "RADIO_BUTTON_WIDGET"
    | "CHECKBOX_WIDGET"
    | "COMBO_BOX_WIDGET"
    | "LIST_BOX_WIDGET"
    | "SIGNATURE_WIDGET"
    | "DATE_WIDGET"
    | "FORM_CREATOR"
    | "LINK"
    | "DISTANCE"
    | "PERIMETER"
    | "RECTANGLE_AREA"
    | "ELLIPSE_AREA"
    | "POLYGON_AREA"
    | "CONTENT_EDITOR"
    | "MULTI_ANNOTATIONS_SELECTION"
    | "MEASUREMENT"
    | "MEASUREMENT_SETTINGS"
    | "ATTACHMENT_PREVIEW"
    | null

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 InteractionMode.TEXT, we will delete the current in-memory ink annotation.

For a list of all available mode, please refer to 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).

Example

instance.setViewState(viewState => (
   viewState.set("interactionMode", NutrientViewer.InteractionMode.PAN)
 ));

Default Value

null

keepFirstSpreadAsSinglePage

Readonly
boolean

When this is enabled, the first spread will always show a single page, even when 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 ViewState#layoutMode.

Default Value

false

keepSelectedTool

Readonly
boolean

This flag controls whether a selected tool should maintain its selected state after an annotation is created

  • When set to false, (default), after an annotation has been created the tool is not selected anymore.
  • When set to true, the tool used to create the annotation will still be selected and so it'll be possible to keep adding annotations.

This feature is available for Note Annotation, Text Annotation, Redaction Annotation, Shape Annotation and Comments. Ink Annotation behaves like this by default, the ink tool stays selected until its deselected either programmatically or via the UI.

Example

instance.setViewState(viewState => (
   viewState.set("keepSelectedTool", true)
 ));

Default Value

false

layoutMode

Readonly
"SINGLE" | "DOUBLE" | "AUTO"

Controls how pages inside a view are displayed.

Default Value

LayoutMode.SINGLE

pageCursor

Readonly
{ … }

Configuration for cursor behavior keyed by input modality.

The keyboard property is a function that receives the current InteractionMode and returns configuration for that mode. This allows per-mode configuration.

When keyboard returns { enabled: true } for a mode:

  • NOTE, TEXT, CALLOUT - single point placement
  • SHAPE_LINE, SHAPE_RECTANGLE, SHAPE_ELLIPSE - 2 point placement
  • SHAPE_POLYGON, SHAPE_POLYLINE - multi-point (Shift+Enter to complete)
PropertyDescription
keyboard

Function that returns keyboard modality configuration for the given InteractionMode.

This allows per-mode configuration (e.g., disable keyboard for some modes).

Example

// Disable keyboard for all modes
instance.setViewState(viewState => (
  viewState.set("pageCursor", { keyboard: () => ({ enabled: false }) })
));

// Disable keyboard only for INK mode
instance.setViewState(viewState => (
  viewState.set("pageCursor", {
    keyboard: (mode) => ({ enabled: mode !== InteractionMode.INK })
  })
));

Default Value

{ keyboard: () => ({ enabled: true }) }

pageSpacing

Readonly
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 LayoutMode.DOUBLE.

Default Value

0

pagesRotation

Readonly
0 | 90 | 180 | 270

The current rotation of all pages. The value is in degrees and describes a clockwise rotation.

Can either be 0°, 90°, 180°, or 270°. Negative values and values above 270 are normalized to one of the valid rotations.

When a page rotation is set, the values are not persisted in the PDF. This setting only affects how the PDF is viewed in the application.

Example

instance.setViewState(viewState => viewState.set("pagesRotation", -450))
// ... later
instance.viewState.pagesRotation; // => 270

Default Value

0

prerenderedPageSpreads

Readonly
number | null

Number of page spreads to prerender.

Apart from the current page, Nutrient Web SDK prerenders a specific number of page spreads before and after the current page to improve the user experience when scrolling through the document.

A page spread is a container for either one or two pages, based on the configured layout mode. The number of prerendered page spreads is set to 5 by default, which means that Nutrient Web SDK will prerender 5 page spreads before and after the current page.

If set to null, all the page spreads in the document will be prerendered. This setting is not recommended for large documents, as it may lead to performance issues.

Example

// Prerender 10 page spreads
instance.setViewState(viewState =>
 viewState.set("prerenderedPageSpreads", 10)
);
// Prerender all page spreads
instance.setViewState(viewState =>
 viewState.set("prerenderedPageSpreads", null)
);

Default Value

5

previewRedactionMode

Readonly
boolean

This flag controls whether to show the marked state or redacted state for redaction annotations.

  • When set to false, (default), the marked state of redaction annotations will be shown.
  • When set to true, the redacted state of redaction annotations will be used.

This flag can only be set to true if the Redactions component is included in the license.

Example

instance.setViewState(viewState => (
   viewState.set("previewRedactionMode", true)
 ));

Default Value

false

readOnly

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 or modify form field values.

However, it is still possible to add annotations programmatically.

If a read only mode is specified within the JWT itself or in the PDF document permissions, and NutrientViewer.Options.IGNORE_DOCUMENT_PERMISSIONS is not set, this option cannot be unset.

Default Value

false

resolvedLayoutMode

Readonly
"SINGLE" | "DOUBLE" | "AUTO"

When in LayoutMode.AUTO mode, this property is set to the actual rendered layout mode, which can either be LayoutMode.SINGLE or LayoutMode.DOUBLE. It can be used to be notified when the layout mode changes while still being in LayoutMode.AUTO mode: if the rendered layout mode changes while in NutrientViewer.LayoutMode.AUTO (because of user UI interactions, for example), the viewState.change event will be dispatched, and this property will hold the updated value.

Example

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

scrollMode

Readonly
"DISABLED" | "CONTINUOUS" | "PER_SPREAD"

Controls how pages can be scrolled.

Default Value

ScrollMode.CONTINUOUS

showAIAssistant

Readonly
boolean

When this is enabled, the AI Assistant chat dialog will be shown. If this is disabled, the chat dialog will not be shown.

Example

NutrientViewer.load({
  initialViewState: new NutrientViewer.ViewState({
    showAIAssistant: true,
  }),
});

Default Value

false

showAnnotationNotes

Readonly
boolean

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

Default Value

true

showAnnotations

Readonly
boolean

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

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

Default Value

true

showComments

Readonly
boolean

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

NutrientViewer ignores this value when you haven't purchased the comments component.

Default Value

true

showSignatureValidationStatus

Readonly
"IF_SIGNED" | "HAS_WARNINGS" | "HAS_ERRORS" | "NEVER"

Controls when the digital signature validation UI will be shown.

Example

instance.setViewState(viewState => (
  viewState.set("showSignatureValidationStatus", NutrientViewer.ShowSignatureValidationStatusMode.IF_SIGNED)
));

Default Value

ShowSignatureValidationStatusMode.NEVER

showToolbar

Readonly
boolean

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

Default Value

true

sidebarMode

Readonly

    | "ANNOTATIONS"
    | "BOOKMARKS"
    | "DOCUMENT_OUTLINE"
    | "THUMBNAILS"
    | "SIGNATURES"
    | "LAYERS"
    | "ATTACHMENTS"
    | "CUSTOM"
    | null
    | undefined

Controls the current sidebar mode in the viewer.

For a list of all available mode, please refer to SidebarMode. This can also be set to a custom sidebar ID corresponding to a sidebar passed in ui.sidebar.

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

Example

instance.setViewState(viewState => (
  viewState.set("sidebarMode", NutrientViewer.SidebarMode.THUMBNAILS)
));

Default Value

null

sidebarOptions

Readonly

    | { ANNOTATIONS: AnnotationsSidebarOptions }
    | { LAYERS: LayersSidebarOptions }
    | { ATTACHMENTS: AttachmentsSidebarOptions }
    | { [key: string]: any }

Defines specific options that affect each individual sidebar.

For a list of all available options, please refer to SidebarOptions.

Example

Customizing the annotations sidebar to include only Text and Highlight annotations

instance.setViewState(viewState => (
  viewState.set("sidebarOptions",  {
      [NutrientViewer.SidebarMode.ANNOTATIONS]: {
        includeContent: [
          NutrientViewer.Annotations.TextAnnotation,
          NutrientViewer.Annotations.HighlightAnnotation,
        ],
      },
    }
  )
));

Customizing the annotations sidebar to include Comments

instance.setViewState(viewState => (
  viewState.set("sidebarOptions",  {
      [NutrientViewer.SidebarMode.ANNOTATIONS]: {
        includeContent: [
          ...NutrientViewer.defaultAnnotationsSidebarContent,
          NutrientViewer.Comment,
        ],
      },
    }
  )
));

sidebarPlacement

Readonly
"START" | "END"

Controls the current sidebar placement in the viewer.

Example

instance.setViewState(viewState => (
  viewState.set("sidebarPlacement", NutrientViewer.SidebarPlacement.END)
));

Default Value

null

sidebarWidth

Readonly
number

Controls the width of the sidebar in client, pixel units. Changing the ViewState.sidebarMode does not affect this value.

The default value depends on the current viewport width: if the viewport width is less than 768px, the sidebar will take 100% of the viewport width by default. If the viewport width is greater, the sidebar will take 300px by default.

Example

instance.setViewState(viewState => (
  viewState.set("sidebarWidth", 400)
));

spreadSpacing

Readonly
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 ScrollMode.CONTINUOUS.

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

Default Value

20

viewportPadding

Readonly
{ … }

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.

PropertyDescription
horizontal

The horizontal padding for left and right in pixel.

vertical

The vertical padding for top and bottom in pixel.

Default Value

{ horizontal: 20, vertical: 20 }

zoom

Readonly

    | number
    | "CUSTOM"
    | "AUTO"
    | ZoomConfiguration
    | "FIT_TO_WIDTH"
    | "FIT_TO_VIEWPORT"

Controls the current zoom factor. This could either be a number multiplier or a ZoomConfiguration or a ZoomMode.

If a number value is used, it must be between Instance#minimumZoomLevel and Instance#maximumZoomLevel.

Note: Using a ZoomMode} will override the padding set using ViewState#viewportPadding

Default Value

{
   *   zoomMode: NutrientViewer.ZoomMode.AUTO,
   *   wheelZoomMode: NutrientViewer.WheelZoomMode.WITH_CTRL,
   *   options: {
   *     enableKeyboardZoom: true,
   *     enableGestureZoom: true,
   *   },
   * }

zoomStep

Readonly
number

Controls the zoom step when zooming in or out using the toolbar buttons.

Example

instance.setViewState(viewState => (
  viewState.set("zoomStep", 1.1)
));

Default Value

1.25

Methods

entries

  • Returns the record's [key, value] pairs, in the order its fields were defined.

    Returns

    IterableIterator<[string, unknown]>

    An iterator over the record's fields.

goToNextPage

goToPreviousPage

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

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

    Returns

    NutrientViewer.ViewState

    New ViewState with an updated zoom property.

    Example

    instance.setViewState(viewState => viewState.goToPreviousPage());

    Errors

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

rotateLeft

rotateRight

zoomIn

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

    If a 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 ViewState without an Instance assigned. You can use this method on all view states returned by Instance#viewState and Instance#setViewState.

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

    Returns

    NutrientViewer.ViewState

    New ViewState with an updated zoom property.

    Example

    instance.setViewState(viewState => viewState.zoomIn())

    Errors

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

zoomOut

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

    If a 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 ViewState without an Instance assigned. You can use this method on all view states returned by Instance#viewState and Instance#setViewState.

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

    Returns

    NutrientViewer.ViewState

    New ViewState with an updated zoom property.

    Example

    instance.setViewState(viewState => viewState.zoomOut())

    Errors

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

Immutable Record API

27

[iterator]

  • Iterates the [key, value] pairs, in the order the fields were defined.

    Returns

    IterableIterator<
    [
    keyof { … },
    | number
    | boolean
    | NutrientViewer.Instance
    | "NOTE"
    | "ANNOTATIONS"
    | "BOOKMARKS"
    | "DOCUMENT_OUTLINE"
    | "THUMBNAILS"
    | "SIGNATURES"
    | "LAYERS"
    | "ATTACHMENTS"
    | "CUSTOM"
    | "TEXT"
    | "TEXT_HIGHLIGHTER"
    | "INK"
    | "INK_SIGNATURE"
    | "SIGNATURE"
    | "STAMP_PICKER"
    | "STAMP_CUSTOM"
    | "SHAPE_LINE"
    | "SHAPE_RECTANGLE"
    | "SHAPE_ELLIPSE"
    | "SHAPE_POLYGON"
    | "SHAPE_POLYLINE"
    | "INK_ERASER"
    | "COMMENT_MARKER"
    | "CALLOUT"
    | "PAN"
    | "SEARCH"
    | "DOCUMENT_EDITOR"
    | "MARQUEE_ZOOM"
    | "REDACT_TEXT_HIGHLIGHTER"
    | "REDACT_SHAPE_RECTANGLE"
    | "DOCUMENT_CROP"
    | "BUTTON_WIDGET"
    | "TEXT_WIDGET"
    | "RADIO_BUTTON_WIDGET"
    | "CHECKBOX_WIDGET"
    | "COMBO_BOX_WIDGET"
    | "LIST_BOX_WIDGET"
    | "SIGNATURE_WIDGET"
    | "DATE_WIDGET"
    | "FORM_CREATOR"
    | "LINK"
    | "DISTANCE"
    | "PERIMETER"
    | "RECTANGLE_AREA"
    | "ELLIPSE_AREA"
    | "POLYGON_AREA"
    | "CONTENT_EDITOR"
    | "MULTI_ANNOTATIONS_SELECTION"
    | "MEASUREMENT"
    | "MEASUREMENT_SETTINGS"
    | "ATTACHMENT_PREVIEW"
    | { … }
    | "SINGLE"
    | "DOUBLE"
    | "AUTO"
    | "DISABLED"
    | "CONTINUOUS"
    | "PER_SPREAD"
    | { ANNOTATIONS: AnnotationsSidebarOptions }
    | { LAYERS: LayersSidebarOptions }
    | { ATTACHMENTS: AttachmentsSidebarOptions }
    | { [key: string]: any }
    | "START"
    | "END"
    | { … }
    | ZoomConfiguration
    | "FIT_TO_WIDTH"
    | "FIT_TO_VIEWPORT"
    | "FITTING"
    | "POPOVER"
    | "FLOATING"
    | "IF_SIGNED"
    | "HAS_WARNINGS"
    | "HAS_ERRORS"
    | "NEVER"
    | null
    | undefined
    ]
    >

clear

  • Returns a record with every key reset to the default it was defined with.

    Returns

    this

    A new record holding only default values.

delete

  • Returns a record with key reset to the default it was defined with.

    Type Parameters

    K
    extends keyof { … }

    Parameters

    keyK & (
    | "allowPrinting"
    | "allowExport"
    | "currentPageIndex"
    | "instance"
    | "interactionMode"
    | "pageCursor"
    | "keepFirstSpreadAsSinglePage"
    | "layoutMode"
    | "pageSpacing"
    | "pagesRotation"
    | "readOnly"
    | "scrollMode"
    | "showAnnotations"
    | "showComments"
    | "showAnnotationNotes"
    | "showToolbar"
    | "enableAnnotationToolbar"
    | "sidebarMode"
    | "sidebarOptions"
    | "sidebarPlacement"
    | "spreadSpacing"
    | "viewportPadding"
    | "zoom"
    | "commentDisplay"
    | "zoomStep"
    | "formDesignMode"
    | "showSignatureValidationStatus"
    | "previewRedactionMode"
    | "canScrollWhileDrawing"
    | "keepSelectedTool"
    | "resolvedLayoutMode"
    | "sidebarWidth"
    | "disablePointSnapping"
    | "prerenderedPageSpreads"
    | "showAIAssistant"
    )

    One of the keys this record was defined with.

    Returns

    this

    A new record, or this one when the value already equals the default.

deleteIn

  • Returns a record with the value at keyPath removed. A field of this record is reset to its default; a key of a nested collection or plain object is deleted.

    Parameters

    keyPathIterable<unknown>

    The keys to follow, outermost first.

    Returns

    this

    A new record, or this one when nothing was removed.

equals

Deprecated

  • Reports whether other is a record holding the same keys with equal values, whatever its class.

    Parameters

    otherunknown

    The value to compare against.

    Returns

    boolean

    true when both hold the same keys and every value matches.

    Deprecated

    Records of different classes with identical values compare equal. Use isEqual(), which also requires both records to be of the same class.

get

  • Returns the value stored under key.

    Type Parameters

    K
    extends keyof { … }
    N = never

    Parameters

    keyK & (
    | "allowPrinting"
    | "allowExport"
    | "currentPageIndex"
    | "instance"
    | "interactionMode"
    | "pageCursor"
    | "keepFirstSpreadAsSinglePage"
    | "layoutMode"
    | "pageSpacing"
    | "pagesRotation"
    | "readOnly"
    | "scrollMode"
    | "showAnnotations"
    | "showComments"
    | "showAnnotationNotes"
    | "showToolbar"
    | "enableAnnotationToolbar"
    | "sidebarMode"
    | "sidebarOptions"
    | "sidebarPlacement"
    | "spreadSpacing"
    | "viewportPadding"
    | "zoom"
    | "commentDisplay"
    | "zoomStep"
    | "formDesignMode"
    | "showSignatureValidationStatus"
    | "previewRedactionMode"
    | "canScrollWhileDrawing"
    | "keepSelectedTool"
    | "resolvedLayoutMode"
    | "sidebarWidth"
    | "disablePointSnapping"
    | "prerenderedPageSpreads"
    | "showAIAssistant"
    )

    One of the keys this record was defined with.

    notSetValueN
    Optional

    Returned when the record does not define key.

    Returns

    N | { … }[K]

    The current value for that key.

getIn

  • Returns the value at keyPath, walking nested records and collections.

    A literal key path is checked against the record's fields and gives the value's type; a computed one gives unknown.

    Parameters

    keyPathIterable<unknown>

    The keys to follow, outermost first.

    Returns

    unknown

    The value at that path, or undefined when it does not resolve.

  • Returns the value at keyPath, walking nested records and collections.

    A literal key path is checked against the record's fields and gives the value's type; a computed one gives unknown.

    Type Parameters

    N

    Parameters

    keyPathIterable<unknown>

    The keys to follow, outermost first.

    notSetValueN

    Returned when the path does not resolve.

    Returns

    unknown

    The value at that path, or notSetValue.

has

  • Reports whether key is one of the keys this record was defined with.

    A literal key must name a field; a key typed as string is narrowed to the field names.

    Parameters

    keystring

    The key to look for.

    Returns

    key is
    | "allowPrinting"
    | "allowExport"
    | "currentPageIndex"
    | "instance"
    | "interactionMode"
    | "pageCursor"
    | "keepFirstSpreadAsSinglePage"
    | "layoutMode"
    | "pageSpacing"
    | "pagesRotation"
    | "readOnly"
    | "scrollMode"
    | "showAnnotations"
    | "showComments"
    | "showAnnotationNotes"
    | "showToolbar"
    | "enableAnnotationToolbar"
    | "sidebarMode"
    | "sidebarOptions"
    | "sidebarPlacement"
    | "spreadSpacing"
    | "viewportPadding"
    | "zoom"
    | "commentDisplay"
    | "zoomStep"
    | "formDesignMode"
    | "showSignatureValidationStatus"
    | "previewRedactionMode"
    | "canScrollWhileDrawing"
    | "keepSelectedTool"
    | "resolvedLayoutMode"
    | "sidebarWidth"
    | "disablePointSnapping"
    | "prerenderedPageSpreads"
    | "showAIAssistant"

    true when the record defines that key, even if its value is null.

hashCode

  • Computes a hash of this record from its contents, the same way Immutable.js does. Equal records have equal hashes; records with equal hashes are not necessarily equal. Plain objects, functions and symbols hash by identity, so a hash is only meaningful within the page that computed it.

    Returns

    number

    An integer hash.

hasIn

  • Reports whether keyPath resolves, walking nested records and collections.

    Parameters

    keyPathIterable<unknown>

    The keys to follow, outermost first.

    Returns

    boolean

    true when every key along the path is present.

isEqual

  • Reports whether other is a record of the same class holding equal values. Only the two records' own classes are compared; nested records compare as equals() does.

    Parameters

    otherunknown

    The value to compare against.

    Returns

    boolean

    true when both are the same class and every value matches.

merge

  • Returns a record with the entries of each collection applied in order.

    Keys the record was not defined with are ignored.

    Parameters

    ...collections
    (Partial<{ … }> | Iterable<readonly [string, unknown]>)[]

    Plain objects or key/value iterables to apply.

    Returns

    this

    A new record, or this one when no value changed.

mergeDeep

  • Returns a record with the entries of each collection merged in, recursing into nested collections and plain objects instead of replacing them.

    Keys the record was not defined with are ignored.

    Parameters

    ...collections
    (Partial<{ … }> | Iterable<readonly [string, unknown]>)[]

    Plain objects or key/value iterables to merge in.

    Returns

    this

    A new record, or this one when no value changed.

mergeDeepIn

  • Returns a record with each collection merged deeply into the value at keyPath.

    Parameters

    keyPathIterable<unknown>

    The keys to follow, outermost first.

    ...collectionsunknown[]

    Collections or plain objects to merge into the value there.

    Returns

    this

    A new record, or this one when the value is unchanged.

mergeDeepWith

  • Returns a record with the entries of each collection merged in deeply, calling merger where a nested value is not a collection to decide the value that is kept.

    Keys the record was not defined with are ignored.

    Parameters

    merger(previous: unknown, next: unknown, key: unknown) => unknown

    Receives the current value, the incoming value and the key.

    ...collections
    (Partial<{ … }> | Iterable<readonly [string, unknown]>)[]

    Plain objects or key/value iterables to merge in.

    Returns

    this

    A new record, or this one when no value changed.

mergeIn

  • Returns a record with each collection merged into the value at keyPath, one level at a time.

    Parameters

    keyPathIterable<unknown>

    The keys to follow, outermost first.

    ...collectionsunknown[]

    Collections or plain objects to merge into the value there.

    Returns

    this

    A new record, or this one when the value is unchanged.

mergeWith

  • Returns a record with the entries of each collection merged in, calling merger for each key the record already holds to decide the value that is kept.

    Keys the record was not defined with are ignored.

    Parameters

    merger
    <K extends string | number | symbol>(
    previous: { … }[K],
    next: { … }[K],
    key: K
    ) => { … }[K]

    Receives the current value, the incoming value and the key.

    ...collections
    (Partial<{ … }> | Iterable<readonly [string, unknown]>)[]

    Plain objects or key/value iterables to merge in.

    Returns

    this

    A new record, or this one when no value changed.

remove

  • An alias for delete.

    Type Parameters

    K
    extends keyof { … }

    Parameters

    keyK & (
    | "allowPrinting"
    | "allowExport"
    | "currentPageIndex"
    | "instance"
    | "interactionMode"
    | "pageCursor"
    | "keepFirstSpreadAsSinglePage"
    | "layoutMode"
    | "pageSpacing"
    | "pagesRotation"
    | "readOnly"
    | "scrollMode"
    | "showAnnotations"
    | "showComments"
    | "showAnnotationNotes"
    | "showToolbar"
    | "enableAnnotationToolbar"
    | "sidebarMode"
    | "sidebarOptions"
    | "sidebarPlacement"
    | "spreadSpacing"
    | "viewportPadding"
    | "zoom"
    | "commentDisplay"
    | "zoomStep"
    | "formDesignMode"
    | "showSignatureValidationStatus"
    | "previewRedactionMode"
    | "canScrollWhileDrawing"
    | "keepSelectedTool"
    | "resolvedLayoutMode"
    | "sidebarWidth"
    | "disablePointSnapping"
    | "prerenderedPageSpreads"
    | "showAIAssistant"
    )

    One of the keys this record was defined with.

    Returns

    this

    A new record, or this one when the value already equals the default.

removeIn

  • An alias for deleteIn.

    Parameters

    keyPathIterable<unknown>

    The keys to follow, outermost first.

    Returns

    this

    A new record, or this one when nothing was removed.

set

  • Returns a record with key set to value.

    Setting a key to the value it already holds returns the same instance, so a record can be compared by reference to detect a change.

    Type Parameters

    K
    extends keyof { … }

    Parameters

    keyK & (
    | "allowPrinting"
    | "allowExport"
    | "currentPageIndex"
    | "instance"
    | "interactionMode"
    | "pageCursor"
    | "keepFirstSpreadAsSinglePage"
    | "layoutMode"
    | "pageSpacing"
    | "pagesRotation"
    | "readOnly"
    | "scrollMode"
    | "showAnnotations"
    | "showComments"
    | "showAnnotationNotes"
    | "showToolbar"
    | "enableAnnotationToolbar"
    | "sidebarMode"
    | "sidebarOptions"
    | "sidebarPlacement"
    | "spreadSpacing"
    | "viewportPadding"
    | "zoom"
    | "commentDisplay"
    | "zoomStep"
    | "formDesignMode"
    | "showSignatureValidationStatus"
    | "previewRedactionMode"
    | "canScrollWhileDrawing"
    | "keepSelectedTool"
    | "resolvedLayoutMode"
    | "sidebarWidth"
    | "disablePointSnapping"
    | "prerenderedPageSpreads"
    | "showAIAssistant"
    )

    One of the keys this record was defined with.

    value
    { … }[K]

    The value to store.

    Returns

    this

    A new record, or this one when the value is unchanged or the key is not defined.

setIn

  • Returns a record with value written at keyPath.

    Parameters

    keyPathIterable<unknown>

    The keys to follow, outermost first.

    valueunknown

    The value to store.

    Returns

    this

    A new record, or this one when the value is unchanged.

toJS

  • Converts this record and everything nested inside it to plain JavaScript values.

    Returns

    { … }

    A plain object holding this record's values, converted all the way down.

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

      Default Value

      true
    • allowExport: boolean

      Control whether or not the export PDF 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.

      It is possible to remove the export PDF button with the Toolbar API.

      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.

      Default Value

      0
    • instance: NutrientViewer.Instance | null

      An optional reference to a mounted Instance. This is required to call the following methods on ViewState:

      • {@link ViewState#zoomIn}
      • {@link ViewState#zoomOut}
      • {@link ViewState#nextZoomLevel}
    • interactionMode:
          | "NOTE"
          | "TEXT"
          | "TEXT_HIGHLIGHTER"
          | "INK"
          | "INK_SIGNATURE"
          | "SIGNATURE"
          | "STAMP_PICKER"
          | "STAMP_CUSTOM"
          | "SHAPE_LINE"
          | "SHAPE_RECTANGLE"
          | "SHAPE_ELLIPSE"
          | "SHAPE_POLYGON"
          | "SHAPE_POLYLINE"
          | "INK_ERASER"
          | "COMMENT_MARKER"
          | "CALLOUT"
          | "PAN"
          | "SEARCH"
          | "DOCUMENT_EDITOR"
          | "MARQUEE_ZOOM"
          | "REDACT_TEXT_HIGHLIGHTER"
          | "REDACT_SHAPE_RECTANGLE"
          | "DOCUMENT_CROP"
          | "BUTTON_WIDGET"
          | "TEXT_WIDGET"
          | "RADIO_BUTTON_WIDGET"
          | "CHECKBOX_WIDGET"
          | "COMBO_BOX_WIDGET"
          | "LIST_BOX_WIDGET"
          | "SIGNATURE_WIDGET"
          | "DATE_WIDGET"
          | "FORM_CREATOR"
          | "LINK"
          | "DISTANCE"
          | "PERIMETER"
          | "RECTANGLE_AREA"
          | "ELLIPSE_AREA"
          | "POLYGON_AREA"
          | "CONTENT_EDITOR"
          | "MULTI_ANNOTATIONS_SELECTION"
          | "MEASUREMENT"
          | "MEASUREMENT_SETTINGS"
          | "ATTACHMENT_PREVIEW"
          | null

      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 InteractionMode.TEXT, we will delete the current in-memory ink annotation.

      For a list of all available mode, please refer to 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).

      Example

      instance.setViewState(viewState => (
         viewState.set("interactionMode", NutrientViewer.InteractionMode.PAN)
       ));

      Default Value

      null
    • pageCursor: {
          keyboard?: (
              mode:
                  | "NOTE"
                  | "TEXT"
                  | "TEXT_HIGHLIGHTER"
                  | "INK"
                  | "INK_SIGNATURE"
                  | "SIGNATURE"
                  | "STAMP_PICKER"
                  | "STAMP_CUSTOM"
                  | "SHAPE_LINE"
                  | "SHAPE_RECTANGLE"
                  | "SHAPE_ELLIPSE"
                  | "SHAPE_POLYGON"
                  | "SHAPE_POLYLINE"
                  | "INK_ERASER"
                  | "COMMENT_MARKER"
                  | "CALLOUT"
                  | "PAN"
                  | "SEARCH"
                  | "DOCUMENT_EDITOR"
                  | "MARQUEE_ZOOM"
                  | "REDACT_TEXT_HIGHLIGHTER"
                  | "REDACT_SHAPE_RECTANGLE"
                  | "DOCUMENT_CROP"
                  | "BUTTON_WIDGET"
                  | "TEXT_WIDGET"
                  | "RADIO_BUTTON_WIDGET"
                  | "CHECKBOX_WIDGET"
                  | "COMBO_BOX_WIDGET"
                  | "LIST_BOX_WIDGET"
                  | "SIGNATURE_WIDGET"
                  | "DATE_WIDGET"
                  | "FORM_CREATOR"
                  | "LINK"
                  | "DISTANCE"
                  | "PERIMETER"
                  | "RECTANGLE_AREA"
                  | "ELLIPSE_AREA"
                  | "POLYGON_AREA"
                  | "CONTENT_EDITOR"
                  | "MULTI_ANNOTATIONS_SELECTION"
                  | "MEASUREMENT"
                  | "MEASUREMENT_SETTINGS"
                  | "ATTACHMENT_PREVIEW"
                  | null,
          ) => { enabled?: boolean };
      }

      Configuration for cursor behavior keyed by input modality.

      The keyboard property is a function that receives the current InteractionMode and returns configuration for that mode. This allows per-mode configuration.

      When keyboard returns { enabled: true } for a mode:

      • NOTE, TEXT, CALLOUT - single point placement
      • SHAPE_LINE, SHAPE_RECTANGLE, SHAPE_ELLIPSE - 2 point placement
      • SHAPE_POLYGON, SHAPE_POLYLINE - multi-point (Shift+Enter to complete)

      Example

      // Disable keyboard for all modes
      instance.setViewState(viewState => (
        viewState.set("pageCursor", { keyboard: () => ({ enabled: false }) })
      ));

      // Disable keyboard only for INK mode
      instance.setViewState(viewState => (
        viewState.set("pageCursor", {
          keyboard: (mode) => ({ enabled: mode !== InteractionMode.INK })
        })
      ));

      Default Value

      { keyboard: () => ({ enabled: true }) }
      • Optional
        keyboard?: (
            mode:
                | "NOTE"
                | "TEXT"
                | "TEXT_HIGHLIGHTER"
                | "INK"
                | "INK_SIGNATURE"
                | "SIGNATURE"
                | "STAMP_PICKER"
                | "STAMP_CUSTOM"
                | "SHAPE_LINE"
                | "SHAPE_RECTANGLE"
                | "SHAPE_ELLIPSE"
                | "SHAPE_POLYGON"
                | "SHAPE_POLYLINE"
                | "INK_ERASER"
                | "COMMENT_MARKER"
                | "CALLOUT"
                | "PAN"
                | "SEARCH"
                | "DOCUMENT_EDITOR"
                | "MARQUEE_ZOOM"
                | "REDACT_TEXT_HIGHLIGHTER"
                | "REDACT_SHAPE_RECTANGLE"
                | "DOCUMENT_CROP"
                | "BUTTON_WIDGET"
                | "TEXT_WIDGET"
                | "RADIO_BUTTON_WIDGET"
                | "CHECKBOX_WIDGET"
                | "COMBO_BOX_WIDGET"
                | "LIST_BOX_WIDGET"
                | "SIGNATURE_WIDGET"
                | "DATE_WIDGET"
                | "FORM_CREATOR"
                | "LINK"
                | "DISTANCE"
                | "PERIMETER"
                | "RECTANGLE_AREA"
                | "ELLIPSE_AREA"
                | "POLYGON_AREA"
                | "CONTENT_EDITOR"
                | "MULTI_ANNOTATIONS_SELECTION"
                | "MEASUREMENT"
                | "MEASUREMENT_SETTINGS"
                | "ATTACHMENT_PREVIEW"
                | null,
        ) => { enabled?: boolean }

        Function that returns keyboard modality configuration for the given InteractionMode.

        This allows per-mode configuration (e.g., disable keyboard for some modes).

    • keepFirstSpreadAsSinglePage: boolean

      When this is enabled, the first spread will always show a single page, even when 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 ViewState#layoutMode.

      Default Value

      false
    • layoutMode: "SINGLE" | "DOUBLE" | "AUTO"

      Controls how pages inside a view are displayed.

      Default Value

      LayoutMode.SINGLE

    • 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 LayoutMode.DOUBLE.

      Default Value

      0
    • pagesRotation: 0 | 90 | 180 | 270

      The current rotation of all pages. The value is in degrees and describes a clockwise rotation.

      Can either be 0°, 90°, 180°, or 270°. Negative values and values above 270 are normalized to one of the valid rotations.

      When a page rotation is set, the values are not persisted in the PDF. This setting only affects how the PDF is viewed in the application.

      Example

      instance.setViewState(viewState => viewState.set("pagesRotation", -450))
      // ... later
      instance.viewState.pagesRotation; // => 270

      Default Value

      0
    • 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 or modify form field values.

      However, it is still possible to add annotations programmatically.

      If a read only mode is specified within the JWT itself or in the PDF document permissions, and NutrientViewer.Options.IGNORE_DOCUMENT_PERMISSIONS is not set, this option cannot be unset.

      Default Value

      false
    • scrollMode: "DISABLED" | "CONTINUOUS" | "PER_SPREAD"

      Controls how pages can be scrolled.

      Default Value

      ScrollMode.CONTINUOUS

    • showAnnotations: boolean

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

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

      Default Value

      true
    • showComments: boolean

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

      NutrientViewer ignores this value when you haven't purchased the comments component.

      Default Value

      true
    • showAnnotationNotes: boolean

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

      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.

      Default Value

      true
    • enableAnnotationToolbar: boolean

      Set this to false if you want NutrientViewer to disable the annotation toolbar when an annotation is being created or modified.

      Default Value

      true
    • sidebarMode:
          | "ANNOTATIONS"
          | "BOOKMARKS"
          | "DOCUMENT_OUTLINE"
          | "THUMBNAILS"
          | "SIGNATURES"
          | "LAYERS"
          | "ATTACHMENTS"
          | "CUSTOM"
          | null
          | undefined

      Controls the current sidebar mode in the viewer.

      For a list of all available mode, please refer to SidebarMode. This can also be set to a custom sidebar ID corresponding to a sidebar passed in ui.sidebar.

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

      Example

      instance.setViewState(viewState => (
        viewState.set("sidebarMode", NutrientViewer.SidebarMode.THUMBNAILS)
      ));

      Default Value

      null
    • sidebarOptions:
          | { ANNOTATIONS: AnnotationsSidebarOptions }
          | { LAYERS: LayersSidebarOptions }
          | { ATTACHMENTS: AttachmentsSidebarOptions }
          | { [key: string]: any }

      Defines specific options that affect each individual sidebar.

      For a list of all available options, please refer to SidebarOptions.

      Example

      Customizing the annotations sidebar to include only Text and Highlight annotations

      instance.setViewState(viewState => (
        viewState.set("sidebarOptions",  {
            [NutrientViewer.SidebarMode.ANNOTATIONS]: {
              includeContent: [
                NutrientViewer.Annotations.TextAnnotation,
                NutrientViewer.Annotations.HighlightAnnotation,
              ],
            },
          }
        )
      ));

      Customizing the annotations sidebar to include Comments

      instance.setViewState(viewState => (
        viewState.set("sidebarOptions",  {
            [NutrientViewer.SidebarMode.ANNOTATIONS]: {
              includeContent: [
                ...NutrientViewer.defaultAnnotationsSidebarContent,
                NutrientViewer.Comment,
              ],
            },
          }
        )
      ));
    • sidebarPlacement: "START" | "END"

      Controls the current sidebar placement in the viewer.

      Example

      instance.setViewState(viewState => (
        viewState.set("sidebarPlacement", NutrientViewer.SidebarPlacement.END)
      ));

      Default Value

      null
    • 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 ScrollMode.CONTINUOUS.

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

      Default Value

      20
    • viewportPadding: {
          "[iterator]": any;
          get: any;
          has: any;
          set: any;
          delete: any;
          remove: any;
          clear: any;
          update: any;
          merge: any;
          mergeWith: any;
          mergeDeep: any;
          mergeDeepWith: any;
          getIn: any;
          hasIn: any;
          setIn: any;
          deleteIn: any;
          removeIn: any;
          updateIn: any;
          mergeIn: any;
          mergeDeepIn: any;
          entries: any;
          toObject: any;
          toJSON: any;
          toJS: any;
          withMutations: any;
          hashCode: any;
          equals: any;
          isEqual: any;
          horizontal: number;
          vertical: number;
      }

      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.

      Default Value

      { horizontal: 20, vertical: 20 }
      • Readonly
        horizontal: number

        The horizontal padding for left and right in pixel.

      • Readonly
        vertical: number

        The vertical padding for top and bottom in pixel.

    • zoom:
          | number
          | "CUSTOM"
          | "AUTO"
          | ZoomConfiguration
          | "FIT_TO_WIDTH"
          | "FIT_TO_VIEWPORT"

      Controls the current zoom factor. This could either be a number multiplier or a ZoomConfiguration or a ZoomMode.

      If a number value is used, it must be between Instance#minimumZoomLevel and Instance#maximumZoomLevel.

      Note: Using a ZoomMode} will override the padding set using ViewState#viewportPadding

      Default Value

      {
         *   zoomMode: NutrientViewer.ZoomMode.AUTO,
         *   wheelZoomMode: NutrientViewer.WheelZoomMode.WITH_CTRL,
         *   options: {
         *     enableKeyboardZoom: true,
         *     enableGestureZoom: true,
         *   },
         * }
    • commentDisplay: "FITTING" | "POPOVER" | "FLOATING"

      Controls how comments are displayed in the viewer in desktop and tablet modes. In mobile devices, comments are always displayed in a drawer a the bottom of the viewport:

      • NutrientViewer.CommentDisplay.FITTING: Comments are displayed in a dialog or floating depending on the available viewport space. This is the default value.
      • NutrientViewer.CommentDisplay.POPOVER: Comments are displayed in a dialog next to their reference annotation marker.
      • NutrientViewer.CommentDisplay.FLOATING: Comments are displayed floating next to the page side, at the same height as their reference annotation marker, except when ViewState#zoom is set to .ZoomeMode#FIT_TO_WIDTH`, in which case they are displayed in a popover dialog instead.

      Default Value

      CommentDisplay#FITTING

    • zoomStep: number

      Controls the zoom step when zooming in or out using the toolbar buttons.

      Example

      instance.setViewState(viewState => (
        viewState.set("zoomStep", 1.1)
      ));

      Default Value

      1.25
    • formDesignMode: boolean

      This flag controls what kind of UI interaction is active for widget annotations.

      • When set to false, (default), clicking on a widget annotation will allow to modify its value.
      • When set to true, clicking on a widget annotation will select it and allow moving, resizing and deleting it using the annotation toolbar.

      This flag can only be set to true if the Form Creator component is included in the license and the current backend supports it.

      Example

      instance.setViewState(viewState => (
         viewState.set("formDesignMode", true)
       ));

      Default Value

      false
    • showSignatureValidationStatus: "IF_SIGNED" | "HAS_WARNINGS" | "HAS_ERRORS" | "NEVER"

      Controls when the digital signature validation UI will be shown.

      Example

      instance.setViewState(viewState => (
        viewState.set("showSignatureValidationStatus", NutrientViewer.ShowSignatureValidationStatusMode.IF_SIGNED)
      ));

      Default Value

      ShowSignatureValidationStatusMode.NEVER

    • previewRedactionMode: boolean

      This flag controls whether to show the marked state or redacted state for redaction annotations.

      • When set to false, (default), the marked state of redaction annotations will be shown.
      • When set to true, the redacted state of redaction annotations will be used.

      This flag can only be set to true if the Redactions component is included in the license.

      Example

      instance.setViewState(viewState => (
         viewState.set("previewRedactionMode", true)
       ));

      Default Value

      false
    • canScrollWhileDrawing: boolean

      This flag controls whether to enable/disable finger scrolling during Ink Drawing and Ink Erasing using a pen.

      • When set to false, (default), scrolling with the finger in drawing mode is disabled.
      • When set to true, once a pen input has been detected, finger input will result in scrolling the document. The pen detection state is shared across all pages, so switching pages does not reset the behavior.

      Example

      instance.setViewState(viewState => (
         viewState.set("canScrollWhileDrawing", true)
       ));

      Default Value

      false
    • keepSelectedTool: boolean

      This flag controls whether a selected tool should maintain its selected state after an annotation is created

      • When set to false, (default), after an annotation has been created the tool is not selected anymore.
      • When set to true, the tool used to create the annotation will still be selected and so it'll be possible to keep adding annotations.

      This feature is available for Note Annotation, Text Annotation, Redaction Annotation, Shape Annotation and Comments. Ink Annotation behaves like this by default, the ink tool stays selected until its deselected either programmatically or via the UI.

      Example

      instance.setViewState(viewState => (
         viewState.set("keepSelectedTool", true)
       ));

      Default Value

      false
    • resolvedLayoutMode: "SINGLE" | "DOUBLE" | "AUTO"

      When in LayoutMode.AUTO mode, this property is set to the actual rendered layout mode, which can either be LayoutMode.SINGLE or LayoutMode.DOUBLE. It can be used to be notified when the layout mode changes while still being in LayoutMode.AUTO mode: if the rendered layout mode changes while in NutrientViewer.LayoutMode.AUTO (because of user UI interactions, for example), the viewState.change event will be dispatched, and this property will hold the updated value.

      Example

      instance.addEventListener("viewState.change", (viewState) => {
      console.log(viewState.resolvedLayoutMode);
      });
    • sidebarWidth: number

      Controls the width of the sidebar in client, pixel units. Changing the ViewState.sidebarMode does not affect this value.

      The default value depends on the current viewport width: if the viewport width is less than 768px, the sidebar will take 100% of the viewport width by default. If the viewport width is greater, the sidebar will take 300px by default.

      Example

      instance.setViewState(viewState => (
        viewState.set("sidebarWidth", 400)
      ));
    • disablePointSnapping: boolean

      Snapping to the nearest point is enabled by default in ur SDK for measurement tools. It can be disabled by this API.

      Example

      instance.setViewState(viewState =>
        viewState.set("disablePointSnapping", true)
      );

      Default Value

      false
    • prerenderedPageSpreads: number | null

      Number of page spreads to prerender.

      Apart from the current page, Nutrient Web SDK prerenders a specific number of page spreads before and after the current page to improve the user experience when scrolling through the document.

      A page spread is a container for either one or two pages, based on the configured layout mode. The number of prerendered page spreads is set to 5 by default, which means that Nutrient Web SDK will prerender 5 page spreads before and after the current page.

      If set to null, all the page spreads in the document will be prerendered. This setting is not recommended for large documents, as it may lead to performance issues.

      Example

      // Prerender 10 page spreads
      instance.setViewState(viewState =>
       viewState.set("prerenderedPageSpreads", 10)
      );
      // Prerender all page spreads
      instance.setViewState(viewState =>
       viewState.set("prerenderedPageSpreads", null)
      );

      Default Value

      5
    • showAIAssistant: boolean

      When this is enabled, the AI Assistant chat dialog will be shown. If this is disabled, the chat dialog will not be shown.

      Example

      NutrientViewer.load({
        initialViewState: new NutrientViewer.ViewState({
          showAIAssistant: true,
        }),
      });

      Default Value

      false

toJSON

  • An alias for toObject, called by JSON.stringify.

    Returns

    { … }

    A plain object holding this record's values.

    • allowExport: boolean

      Control whether or not the export PDF 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.

      It is possible to remove the export PDF button with the Toolbar API.

      Default Value

      true
    • 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.

      Default Value

      true
    • canScrollWhileDrawing: boolean

      This flag controls whether to enable/disable finger scrolling during Ink Drawing and Ink Erasing using a pen.

      • When set to false, (default), scrolling with the finger in drawing mode is disabled.
      • When set to true, once a pen input has been detected, finger input will result in scrolling the document. The pen detection state is shared across all pages, so switching pages does not reset the behavior.

      Example

      instance.setViewState(viewState => (
         viewState.set("canScrollWhileDrawing", true)
       ));

      Default Value

      false
    • commentDisplay: "FITTING" | "POPOVER" | "FLOATING"

      Controls how comments are displayed in the viewer in desktop and tablet modes. In mobile devices, comments are always displayed in a drawer a the bottom of the viewport:

      • NutrientViewer.CommentDisplay.FITTING: Comments are displayed in a dialog or floating depending on the available viewport space. This is the default value.
      • NutrientViewer.CommentDisplay.POPOVER: Comments are displayed in a dialog next to their reference annotation marker.
      • NutrientViewer.CommentDisplay.FLOATING: Comments are displayed floating next to the page side, at the same height as their reference annotation marker, except when ViewState#zoom is set to .ZoomeMode#FIT_TO_WIDTH`, in which case they are displayed in a popover dialog instead.

      Default Value

      CommentDisplay#FITTING

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

      Default Value

      0
    • disablePointSnapping: boolean

      Snapping to the nearest point is enabled by default in ur SDK for measurement tools. It can be disabled by this API.

      Example

      instance.setViewState(viewState =>
        viewState.set("disablePointSnapping", true)
      );

      Default Value

      false
    • enableAnnotationToolbar: boolean

      Set this to false if you want NutrientViewer to disable the annotation toolbar when an annotation is being created or modified.

      Default Value

      true
    • formDesignMode: boolean

      This flag controls what kind of UI interaction is active for widget annotations.

      • When set to false, (default), clicking on a widget annotation will allow to modify its value.
      • When set to true, clicking on a widget annotation will select it and allow moving, resizing and deleting it using the annotation toolbar.

      This flag can only be set to true if the Form Creator component is included in the license and the current backend supports it.

      Example

      instance.setViewState(viewState => (
         viewState.set("formDesignMode", true)
       ));

      Default Value

      false
    • instance: NutrientViewer.Instance | null

      An optional reference to a mounted Instance. This is required to call the following methods on ViewState:

      • {@link ViewState#zoomIn}
      • {@link ViewState#zoomOut}
      • {@link ViewState#nextZoomLevel}
    • interactionMode:
          | "NOTE"
          | "TEXT"
          | "TEXT_HIGHLIGHTER"
          | "INK"
          | "INK_SIGNATURE"
          | "SIGNATURE"
          | "STAMP_PICKER"
          | "STAMP_CUSTOM"
          | "SHAPE_LINE"
          | "SHAPE_RECTANGLE"
          | "SHAPE_ELLIPSE"
          | "SHAPE_POLYGON"
          | "SHAPE_POLYLINE"
          | "INK_ERASER"
          | "COMMENT_MARKER"
          | "CALLOUT"
          | "PAN"
          | "SEARCH"
          | "DOCUMENT_EDITOR"
          | "MARQUEE_ZOOM"
          | "REDACT_TEXT_HIGHLIGHTER"
          | "REDACT_SHAPE_RECTANGLE"
          | "DOCUMENT_CROP"
          | "BUTTON_WIDGET"
          | "TEXT_WIDGET"
          | "RADIO_BUTTON_WIDGET"
          | "CHECKBOX_WIDGET"
          | "COMBO_BOX_WIDGET"
          | "LIST_BOX_WIDGET"
          | "SIGNATURE_WIDGET"
          | "DATE_WIDGET"
          | "FORM_CREATOR"
          | "LINK"
          | "DISTANCE"
          | "PERIMETER"
          | "RECTANGLE_AREA"
          | "ELLIPSE_AREA"
          | "POLYGON_AREA"
          | "CONTENT_EDITOR"
          | "MULTI_ANNOTATIONS_SELECTION"
          | "MEASUREMENT"
          | "MEASUREMENT_SETTINGS"
          | "ATTACHMENT_PREVIEW"
          | null

      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 InteractionMode.TEXT, we will delete the current in-memory ink annotation.

      For a list of all available mode, please refer to 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).

      Example

      instance.setViewState(viewState => (
         viewState.set("interactionMode", NutrientViewer.InteractionMode.PAN)
       ));

      Default Value

      null
    • keepFirstSpreadAsSinglePage: boolean

      When this is enabled, the first spread will always show a single page, even when 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 ViewState#layoutMode.

      Default Value

      false
    • keepSelectedTool: boolean

      This flag controls whether a selected tool should maintain its selected state after an annotation is created

      • When set to false, (default), after an annotation has been created the tool is not selected anymore.
      • When set to true, the tool used to create the annotation will still be selected and so it'll be possible to keep adding annotations.

      This feature is available for Note Annotation, Text Annotation, Redaction Annotation, Shape Annotation and Comments. Ink Annotation behaves like this by default, the ink tool stays selected until its deselected either programmatically or via the UI.

      Example

      instance.setViewState(viewState => (
         viewState.set("keepSelectedTool", true)
       ));

      Default Value

      false
    • layoutMode: "SINGLE" | "DOUBLE" | "AUTO"

      Controls how pages inside a view are displayed.

      Default Value

      LayoutMode.SINGLE

    • pageCursor: {
          keyboard?: (
              mode:
                  | "NOTE"
                  | "TEXT"
                  | "TEXT_HIGHLIGHTER"
                  | "INK"
                  | "INK_SIGNATURE"
                  | "SIGNATURE"
                  | "STAMP_PICKER"
                  | "STAMP_CUSTOM"
                  | "SHAPE_LINE"
                  | "SHAPE_RECTANGLE"
                  | "SHAPE_ELLIPSE"
                  | "SHAPE_POLYGON"
                  | "SHAPE_POLYLINE"
                  | "INK_ERASER"
                  | "COMMENT_MARKER"
                  | "CALLOUT"
                  | "PAN"
                  | "SEARCH"
                  | "DOCUMENT_EDITOR"
                  | "MARQUEE_ZOOM"
                  | "REDACT_TEXT_HIGHLIGHTER"
                  | "REDACT_SHAPE_RECTANGLE"
                  | "DOCUMENT_CROP"
                  | "BUTTON_WIDGET"
                  | "TEXT_WIDGET"
                  | "RADIO_BUTTON_WIDGET"
                  | "CHECKBOX_WIDGET"
                  | "COMBO_BOX_WIDGET"
                  | "LIST_BOX_WIDGET"
                  | "SIGNATURE_WIDGET"
                  | "DATE_WIDGET"
                  | "FORM_CREATOR"
                  | "LINK"
                  | "DISTANCE"
                  | "PERIMETER"
                  | "RECTANGLE_AREA"
                  | "ELLIPSE_AREA"
                  | "POLYGON_AREA"
                  | "CONTENT_EDITOR"
                  | "MULTI_ANNOTATIONS_SELECTION"
                  | "MEASUREMENT"
                  | "MEASUREMENT_SETTINGS"
                  | "ATTACHMENT_PREVIEW"
                  | null,
          ) => { enabled?: boolean };
      }

      Configuration for cursor behavior keyed by input modality.

      The keyboard property is a function that receives the current InteractionMode and returns configuration for that mode. This allows per-mode configuration.

      When keyboard returns { enabled: true } for a mode:

      • NOTE, TEXT, CALLOUT - single point placement
      • SHAPE_LINE, SHAPE_RECTANGLE, SHAPE_ELLIPSE - 2 point placement
      • SHAPE_POLYGON, SHAPE_POLYLINE - multi-point (Shift+Enter to complete)

      Example

      // Disable keyboard for all modes
      instance.setViewState(viewState => (
        viewState.set("pageCursor", { keyboard: () => ({ enabled: false }) })
      ));

      // Disable keyboard only for INK mode
      instance.setViewState(viewState => (
        viewState.set("pageCursor", {
          keyboard: (mode) => ({ enabled: mode !== InteractionMode.INK })
        })
      ));

      Default Value

      { keyboard: () => ({ enabled: true }) }
      • Optional
        keyboard?: (
            mode:
                | "NOTE"
                | "TEXT"
                | "TEXT_HIGHLIGHTER"
                | "INK"
                | "INK_SIGNATURE"
                | "SIGNATURE"
                | "STAMP_PICKER"
                | "STAMP_CUSTOM"
                | "SHAPE_LINE"
                | "SHAPE_RECTANGLE"
                | "SHAPE_ELLIPSE"
                | "SHAPE_POLYGON"
                | "SHAPE_POLYLINE"
                | "INK_ERASER"
                | "COMMENT_MARKER"
                | "CALLOUT"
                | "PAN"
                | "SEARCH"
                | "DOCUMENT_EDITOR"
                | "MARQUEE_ZOOM"
                | "REDACT_TEXT_HIGHLIGHTER"
                | "REDACT_SHAPE_RECTANGLE"
                | "DOCUMENT_CROP"
                | "BUTTON_WIDGET"
                | "TEXT_WIDGET"
                | "RADIO_BUTTON_WIDGET"
                | "CHECKBOX_WIDGET"
                | "COMBO_BOX_WIDGET"
                | "LIST_BOX_WIDGET"
                | "SIGNATURE_WIDGET"
                | "DATE_WIDGET"
                | "FORM_CREATOR"
                | "LINK"
                | "DISTANCE"
                | "PERIMETER"
                | "RECTANGLE_AREA"
                | "ELLIPSE_AREA"
                | "POLYGON_AREA"
                | "CONTENT_EDITOR"
                | "MULTI_ANNOTATIONS_SELECTION"
                | "MEASUREMENT"
                | "MEASUREMENT_SETTINGS"
                | "ATTACHMENT_PREVIEW"
                | null,
        ) => { enabled?: boolean }

        Function that returns keyboard modality configuration for the given InteractionMode.

        This allows per-mode configuration (e.g., disable keyboard for some modes).

    • 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 LayoutMode.DOUBLE.

      Default Value

      0
    • pagesRotation: 0 | 90 | 180 | 270

      The current rotation of all pages. The value is in degrees and describes a clockwise rotation.

      Can either be 0°, 90°, 180°, or 270°. Negative values and values above 270 are normalized to one of the valid rotations.

      When a page rotation is set, the values are not persisted in the PDF. This setting only affects how the PDF is viewed in the application.

      Example

      instance.setViewState(viewState => viewState.set("pagesRotation", -450))
      // ... later
      instance.viewState.pagesRotation; // => 270

      Default Value

      0
    • prerenderedPageSpreads: number | null

      Number of page spreads to prerender.

      Apart from the current page, Nutrient Web SDK prerenders a specific number of page spreads before and after the current page to improve the user experience when scrolling through the document.

      A page spread is a container for either one or two pages, based on the configured layout mode. The number of prerendered page spreads is set to 5 by default, which means that Nutrient Web SDK will prerender 5 page spreads before and after the current page.

      If set to null, all the page spreads in the document will be prerendered. This setting is not recommended for large documents, as it may lead to performance issues.

      Example

      // Prerender 10 page spreads
      instance.setViewState(viewState =>
       viewState.set("prerenderedPageSpreads", 10)
      );
      // Prerender all page spreads
      instance.setViewState(viewState =>
       viewState.set("prerenderedPageSpreads", null)
      );

      Default Value

      5
    • previewRedactionMode: boolean

      This flag controls whether to show the marked state or redacted state for redaction annotations.

      • When set to false, (default), the marked state of redaction annotations will be shown.
      • When set to true, the redacted state of redaction annotations will be used.

      This flag can only be set to true if the Redactions component is included in the license.

      Example

      instance.setViewState(viewState => (
         viewState.set("previewRedactionMode", true)
       ));

      Default Value

      false
    • 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 or modify form field values.

      However, it is still possible to add annotations programmatically.

      If a read only mode is specified within the JWT itself or in the PDF document permissions, and NutrientViewer.Options.IGNORE_DOCUMENT_PERMISSIONS is not set, this option cannot be unset.

      Default Value

      false
    • resolvedLayoutMode: "SINGLE" | "DOUBLE" | "AUTO"

      When in LayoutMode.AUTO mode, this property is set to the actual rendered layout mode, which can either be LayoutMode.SINGLE or LayoutMode.DOUBLE. It can be used to be notified when the layout mode changes while still being in LayoutMode.AUTO mode: if the rendered layout mode changes while in NutrientViewer.LayoutMode.AUTO (because of user UI interactions, for example), the viewState.change event will be dispatched, and this property will hold the updated value.

      Example

      instance.addEventListener("viewState.change", (viewState) => {
      console.log(viewState.resolvedLayoutMode);
      });
    • scrollMode: "DISABLED" | "CONTINUOUS" | "PER_SPREAD"

      Controls how pages can be scrolled.

      Default Value

      ScrollMode.CONTINUOUS

    • showAIAssistant: boolean

      When this is enabled, the AI Assistant chat dialog will be shown. If this is disabled, the chat dialog will not be shown.

      Example

      NutrientViewer.load({
        initialViewState: new NutrientViewer.ViewState({
          showAIAssistant: true,
        }),
      });

      Default Value

      false
    • showAnnotationNotes: boolean

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

      Default Value

      true
    • showAnnotations: boolean

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

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

      Default Value

      true
    • showComments: boolean

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

      NutrientViewer ignores this value when you haven't purchased the comments component.

      Default Value

      true
    • showSignatureValidationStatus: "IF_SIGNED" | "HAS_WARNINGS" | "HAS_ERRORS" | "NEVER"

      Controls when the digital signature validation UI will be shown.

      Example

      instance.setViewState(viewState => (
        viewState.set("showSignatureValidationStatus", NutrientViewer.ShowSignatureValidationStatusMode.IF_SIGNED)
      ));

      Default Value

      ShowSignatureValidationStatusMode.NEVER

    • showToolbar: boolean

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

      Default Value

      true
    • sidebarMode:
          | "ANNOTATIONS"
          | "BOOKMARKS"
          | "DOCUMENT_OUTLINE"
          | "THUMBNAILS"
          | "SIGNATURES"
          | "LAYERS"
          | "ATTACHMENTS"
          | "CUSTOM"
          | null
          | undefined

      Controls the current sidebar mode in the viewer.

      For a list of all available mode, please refer to SidebarMode. This can also be set to a custom sidebar ID corresponding to a sidebar passed in ui.sidebar.

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

      Example

      instance.setViewState(viewState => (
        viewState.set("sidebarMode", NutrientViewer.SidebarMode.THUMBNAILS)
      ));

      Default Value

      null
    • sidebarOptions:
          | { ANNOTATIONS: AnnotationsSidebarOptions }
          | { LAYERS: LayersSidebarOptions }
          | { ATTACHMENTS: AttachmentsSidebarOptions }
          | { [key: string]: any }

      Defines specific options that affect each individual sidebar.

      For a list of all available options, please refer to SidebarOptions.

      Example

      Customizing the annotations sidebar to include only Text and Highlight annotations

      instance.setViewState(viewState => (
        viewState.set("sidebarOptions",  {
            [NutrientViewer.SidebarMode.ANNOTATIONS]: {
              includeContent: [
                NutrientViewer.Annotations.TextAnnotation,
                NutrientViewer.Annotations.HighlightAnnotation,
              ],
            },
          }
        )
      ));

      Customizing the annotations sidebar to include Comments

      instance.setViewState(viewState => (
        viewState.set("sidebarOptions",  {
            [NutrientViewer.SidebarMode.ANNOTATIONS]: {
              includeContent: [
                ...NutrientViewer.defaultAnnotationsSidebarContent,
                NutrientViewer.Comment,
              ],
            },
          }
        )
      ));
    • sidebarPlacement: "START" | "END"

      Controls the current sidebar placement in the viewer.

      Example

      instance.setViewState(viewState => (
        viewState.set("sidebarPlacement", NutrientViewer.SidebarPlacement.END)
      ));

      Default Value

      null
    • sidebarWidth: number

      Controls the width of the sidebar in client, pixel units. Changing the ViewState.sidebarMode does not affect this value.

      The default value depends on the current viewport width: if the viewport width is less than 768px, the sidebar will take 100% of the viewport width by default. If the viewport width is greater, the sidebar will take 300px by default.

      Example

      instance.setViewState(viewState => (
        viewState.set("sidebarWidth", 400)
      ));
    • 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 ScrollMode.CONTINUOUS.

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

      Default Value

      20
    • viewportPadding: {
          horizontal: number;
          vertical: number;
          "[iterator]"(): IterableIterator<
              [keyof { horizontal: number; vertical: number }, number],
          >;
          clear(): this;
          delete<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
          ): this;
          deleteIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): this;
          entries(): IterableIterator<[string, unknown]>;
          equals(other: unknown): boolean;
          get<R extends FieldSource, K extends string | number | symbol, N = never>(
              this: R,
              key: K,
              notSetValue?: N,
          ): N | ReturnType<R["toObject"]>[K];
          getIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): ValueAt<{ horizontal: number; vertical: number }, P>;
          getIn<const P extends Iterable<unknown, any, any>, N>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              notSetValue: N,
          ): ValueAt<{ horizontal: number; vertical: number }, P, N>;
          has<R extends FieldSource, K extends string>(
              this: R,
              key: K & (string extends K ? unknown : FieldNameOf<R>),
          ): key is K & FieldNameOf<R>;
          hashCode(): number;
          hasIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): boolean;
          isEqual(other: unknown): boolean;
          merge<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              ...collections: FieldValuesIn<SharedFieldsOf<R>, C> & C,
          ): this;
          mergeDeep<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              ...collections: FieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C,
          ): this;
          mergeDeepIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              ...collections: MergeableInto<
                  ValueAt<{ horizontal: number; vertical: number }, P, never>,
              >[],
          ): this;
          mergeDeepWith<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              merger: (previous: unknown, next: unknown, key: unknown) => unknown,
              ...collections: FieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C,
          ): this;
          mergeIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              ...collections: MergeableInto<
                  ValueAt<{ horizontal: number; vertical: number }, P, never>,
              >[],
          ): this;
          mergeWith<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              merger: <K extends string | number | symbol>(
                  previous: SharedFieldsOf<R>[K],
                  next: SharedFieldsOf<R>[K],
                  key: K,
              ) => SharedFieldsOf<R>[K],
              ...collections: FieldValuesIn<SharedFieldsOf<R>, C> & C,
          ): this;
          remove<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
          ): this;
          removeIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): this;
          set<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
              value: ReturnType<R["toObject"]>[K],
          ): this;
          setIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              value: ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this;
          toJS(): PlainFields<TProps>;
          toJSON(): { horizontal: number; vertical: number };
          toObject(): { horizontal: number; vertical: number };
          update<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
              updater: (
                  value: ReturnType<R["toObject"]>[K],
              ) => ReturnType<R["toObject"]>[K],
          ): this;
          updateIn<const P extends Iterable<unknown, any, any>, N>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              notSetValue: N,
              updater: (
                  value: ValueAt<{ horizontal: number; vertical: number }, P, N>,
              ) => ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this;
          updateIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              updater: (
                  value: ValueAt<{ horizontal: number; vertical: number }, P>,
              ) => ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this;
          withMutations(mutator: (mutable: this) => unknown): this;
      }

      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.

      Default Value

      { horizontal: 20, vertical: 20 }
      • Readonly
        horizontal: number

        The horizontal padding for left and right in pixel.

      • Readonly
        vertical: number

        The vertical padding for top and bottom in pixel.

      • [iterator]: function
        • "[iterator]"(): IterableIterator<
              [keyof { horizontal: number; vertical: number }, number],
          >

          Iterates the [key, value] pairs, in the order the fields were defined.

          Returns

          IterableIterator<[keyof { horizontal: number; vertical: number }, number]>
      • clear: function
        • clear(): this

          Returns a record with every key reset to the default it was defined with.

          Returns

          this

          A new record holding only default values.

      • delete: function
        • delete<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
          ): this

          Returns a record with key reset to the default it was defined with.

          Type Parameters

          Rextends FieldSource
          Kextends string | number | symbol

          Parameters

          thisR
          keyK

          One of the keys this record was defined with.

          Returns

          this

          A new record, or this one when the value already equals the default.

      • deleteIn: function
        • deleteIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): this

          Returns a record with the value at keyPath removed. A field of this record is reset to its default; a key of a nested collection or plain object is deleted.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          Returns

          this

          A new record, or this one when nothing was removed.

      • entries: function
        • entries(): IterableIterator<[string, unknown]>

          Returns the record's [key, value] pairs, in the order its fields were defined.

          Returns

          IterableIterator<[string, unknown]>

          An iterator over the record's fields.

      • equals: function
        • equals(other: unknown): boolean
          Deprecated

          Reports whether other is a record holding the same keys with equal values, whatever its class.

          Parameters

          otherunknown

          The value to compare against.

          Returns

          boolean

          true when both hold the same keys and every value matches.

          Deprecated

          Records of different classes with identical values compare equal. Use isEqual(), which also requires both records to be of the same class.

      • get: function
        • get<R extends FieldSource, K extends string | number | symbol, N = never>(
              this: R,
              key: K,
              notSetValue?: N,
          ): N | ReturnType<R["toObject"]>[K]

          Returns the value stored under key.

          Type Parameters

          Rextends FieldSource
          Kextends string | number | symbol
          N = never

          Parameters

          thisR
          keyK

          One of the keys this record was defined with.

          notSetValueN
          Optional

          Returned when the record does not define key.

          Returns

          N | ReturnType<R["toObject"]>[K]

          The current value for that key.

      • getIn: function
        • getIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): ValueAt<{ horizontal: number; vertical: number }, P>

          Returns the value at keyPath, walking nested records and collections.

          A literal key path is checked against the record's fields and gives the value's type; a computed one gives unknown.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          Returns

          ValueAt<{ horizontal: number; vertical: number }, P>

          The value at that path, or undefined when it does not resolve.

        • getIn<const P extends Iterable<unknown, any, any>, N>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              notSetValue: N,
          ): ValueAt<{ horizontal: number; vertical: number }, P, N>

          Returns the value at keyPath, walking nested records and collections.

          A literal key path is checked against the record's fields and gives the value's type; a computed one gives unknown.

          Type Parameters

          Pextends Iterable<unknown, any, any>
          N

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          notSetValueN

          Returned when the path does not resolve.

          Returns

          ValueAt<{ horizontal: number; vertical: number }, P, N>

          The value at that path, or notSetValue.

      • has: function
        • has<R extends FieldSource, K extends string>(
              this: R,
              key: K & (string extends K ? unknown : FieldNameOf<R>),
          ): key is K & FieldNameOf<R>

          Reports whether key is one of the keys this record was defined with.

          A literal key must name a field; a key typed as string is narrowed to the field names.

          Type Parameters

          Rextends FieldSource
          Kextends string

          Parameters

          thisR
          keyK & (string extends K ? unknown : FieldNameOf<R>)

          The key to look for.

          Returns

          key is K & FieldNameOf<R>

          true when the record defines that key, even if its value is null.

      • hashCode: function
        • hashCode(): number

          Computes a hash of this record from its contents, the same way Immutable.js does. Equal records have equal hashes; records with equal hashes are not necessarily equal. Plain objects, functions and symbols hash by identity, so a hash is only meaningful within the page that computed it.

          Returns

          number

          An integer hash.

      • hasIn: function
        • hasIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): boolean

          Reports whether keyPath resolves, walking nested records and collections.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          Returns

          boolean

          true when every key along the path is present.

      • isEqual: function
        • isEqual(other: unknown): boolean

          Reports whether other is a record of the same class holding equal values. Only the two records' own classes are compared; nested records compare as equals() does.

          Parameters

          otherunknown

          The value to compare against.

          Returns

          boolean

          true when both are the same class and every value matches.

      • merge: function
        • merge<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              ...collections: FieldValuesIn<SharedFieldsOf<R>, C> & C,
          ): this

          Returns a record with the entries of each collection applied in order.

          Keys the record was not defined with are ignored.

          Type Parameters

          Rextends FieldSource
          Cextends readonly unknown[]

          Parameters

          thisR
          ...collectionsFieldValuesIn<SharedFieldsOf<R>, C> & C

          Plain objects or key/value iterables to apply.

          Returns

          this

          A new record, or this one when no value changed.

      • mergeDeep: function
        • mergeDeep<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              ...collections: FieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C,
          ): this

          Returns a record with the entries of each collection merged in, recursing into nested collections and plain objects instead of replacing them.

          Keys the record was not defined with are ignored.

          Type Parameters

          Rextends FieldSource
          Cextends readonly unknown[]

          Parameters

          thisR
          ...collectionsFieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C

          Plain objects or key/value iterables to merge in.

          Returns

          this

          A new record, or this one when no value changed.

      • mergeDeepIn: function
        • mergeDeepIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              ...collections: MergeableInto<
                  ValueAt<{ horizontal: number; vertical: number }, P, never>,
              >[],
          ): this

          Returns a record with each collection merged deeply into the value at keyPath.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          ...collectionsMergeableInto<ValueAt<{ horizontal: number; vertical: number }, P, never>>[]

          Collections or plain objects to merge into the value there.

          Returns

          this

          A new record, or this one when the value is unchanged.

      • mergeDeepWith: function
        • mergeDeepWith<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              merger: (previous: unknown, next: unknown, key: unknown) => unknown,
              ...collections: FieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C,
          ): this

          Returns a record with the entries of each collection merged in deeply, calling merger where a nested value is not a collection to decide the value that is kept.

          Keys the record was not defined with are ignored.

          Type Parameters

          Rextends FieldSource
          Cextends readonly unknown[]

          Parameters

          thisR
          merger(previous: unknown, next: unknown, key: unknown) => unknown

          Receives the current value, the incoming value and the key.

          ...collectionsFieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C

          Plain objects or key/value iterables to merge in.

          Returns

          this

          A new record, or this one when no value changed.

      • mergeIn: function
        • mergeIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              ...collections: MergeableInto<
                  ValueAt<{ horizontal: number; vertical: number }, P, never>,
              >[],
          ): this

          Returns a record with each collection merged into the value at keyPath, one level at a time.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          ...collectionsMergeableInto<ValueAt<{ horizontal: number; vertical: number }, P, never>>[]

          Collections or plain objects to merge into the value there.

          Returns

          this

          A new record, or this one when the value is unchanged.

      • mergeWith: function
        • mergeWith<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              merger: <K extends string | number | symbol>(
                  previous: SharedFieldsOf<R>[K],
                  next: SharedFieldsOf<R>[K],
                  key: K,
              ) => SharedFieldsOf<R>[K],
              ...collections: FieldValuesIn<SharedFieldsOf<R>, C> & C,
          ): this

          Returns a record with the entries of each collection merged in, calling merger for each key the record already holds to decide the value that is kept.

          Keys the record was not defined with are ignored.

          Type Parameters

          Rextends FieldSource
          Cextends readonly unknown[]

          Parameters

          thisR
          merger<K extends string | number | symbol>(
          previous: SharedFieldsOf<R>[K],
          next: SharedFieldsOf<R>[K],
          key: K
          ) => SharedFieldsOf<R>[K]

          Receives the current value, the incoming value and the key.

          ...collectionsFieldValuesIn<SharedFieldsOf<R>, C> & C

          Plain objects or key/value iterables to merge in.

          Returns

          this

          A new record, or this one when no value changed.

      • remove: function
        • remove<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
          ): this

          An alias for delete.

          Type Parameters

          Rextends FieldSource
          Kextends string | number | symbol

          Parameters

          thisR
          keyK

          One of the keys this record was defined with.

          Returns

          this

          A new record, or this one when the value already equals the default.

      • removeIn: function
        • removeIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): this

          An alias for deleteIn.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          Returns

          this

          A new record, or this one when nothing was removed.

      • set: function
        • set<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
              value: ReturnType<R["toObject"]>[K],
          ): this

          Returns a record with key set to value.

          Setting a key to the value it already holds returns the same instance, so a record can be compared by reference to detect a change.

          Type Parameters

          Rextends FieldSource
          Kextends string | number | symbol

          Parameters

          thisR
          keyK

          One of the keys this record was defined with.

          valueReturnType<R["toObject"]>[K]

          The value to store.

          Returns

          this

          A new record, or this one when the value is unchanged or the key is not defined.

      • setIn: function
        • setIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              value: ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this

          Returns a record with value written at keyPath.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          valueValueAt<{ horizontal: number; vertical: number }, P, never>

          The value to store.

          Returns

          this

          A new record, or this one when the value is unchanged.

      • toJS: function
        • toJS(): PlainFields<TProps>

          Converts this record and everything nested inside it to plain JavaScript values.

          Returns

          PlainFields<TProps>

          A plain object holding this record's values, converted all the way down.

      • toJSON: function
        • toJSON(): { horizontal: number; vertical: number }

          An alias for toObject, called by JSON.stringify.

          Returns

          { horizontal: number; vertical: number }

          A plain object holding this record's values.

          • horizontal: number

            The horizontal padding for left and right in pixel.

          • vertical: number

            The vertical padding for top and bottom in pixel.

      • toObject: function
        • toObject(): { horizontal: number; vertical: number }

          Converts this record to a plain object, one level deep. Nested records are left as they are.

          Returns

          { horizontal: number; vertical: number }

          A plain object holding this record's values.

          • horizontal: number

            The horizontal padding for left and right in pixel.

          • vertical: number

            The vertical padding for top and bottom in pixel.

      • update: function
        • update<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
              updater: (
                  value: ReturnType<R["toObject"]>[K],
              ) => ReturnType<R["toObject"]>[K],
          ): this

          Returns a record with key replaced by the result of applying updater to its current value.

          Type Parameters

          Rextends FieldSource
          Kextends string | number | symbol

          Parameters

          thisR
          keyK

          One of the keys this record was defined with.

          updater(value: ReturnType<R["toObject"]>[K]) => ReturnType<R["toObject"]>[K]

          Receives the current value and returns the new one.

          Returns

          this

          A new record, or this one when the value is unchanged.

      • updateIn: function
        • updateIn<const P extends Iterable<unknown, any, any>, N>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              notSetValue: N,
              updater: (
                  value: ValueAt<{ horizontal: number; vertical: number }, P, N>,
              ) => ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this

          Returns a record with the value at keyPath replaced by the result of updater.

          Type Parameters

          Pextends Iterable<unknown, any, any>
          N

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          notSetValueN
          updater(
          value: ValueAt<{ horizontal: number; vertical: number }, P, N>
          ) => ValueAt<{ horizontal: number; vertical: number }, P, never>

          Receives the current value and returns the new one.

          Returns

          this

          A new record, or this one when the value is unchanged.

        • updateIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              updater: (
                  value: ValueAt<{ horizontal: number; vertical: number }, P>,
              ) => ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this

          Returns a record with the value at keyPath replaced by the result of updater.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          updater(
          value: ValueAt<{ horizontal: number; vertical: number }, P>
          ) => ValueAt<{ horizontal: number; vertical: number }, P, never>

          Receives the current value and returns the new one.

          Returns

          this

          A new record, or this one when the value is unchanged.

      • withMutations: function
        • withMutations(mutator: (mutable: this) => unknown): this

          Applies several changes as one, so only a single new record is allocated.

          The record handed to mutator may be written to with set; it is frozen again once mutator returns.

          Parameters

          mutator(mutable: this) => unknown

          Receives a temporarily writable copy of this record.

          Returns

          this

          A new record holding the applied changes, or this one when nothing changed.

    • zoom:
          | number
          | "CUSTOM"
          | "AUTO"
          | ZoomConfiguration
          | "FIT_TO_WIDTH"
          | "FIT_TO_VIEWPORT"

      Controls the current zoom factor. This could either be a number multiplier or a ZoomConfiguration or a ZoomMode.

      If a number value is used, it must be between Instance#minimumZoomLevel and Instance#maximumZoomLevel.

      Note: Using a ZoomMode} will override the padding set using ViewState#viewportPadding

      Default Value

      {
         *   zoomMode: NutrientViewer.ZoomMode.AUTO,
         *   wheelZoomMode: NutrientViewer.WheelZoomMode.WITH_CTRL,
         *   options: {
         *     enableKeyboardZoom: true,
         *     enableGestureZoom: true,
         *   },
         * }
    • zoomStep: number

      Controls the zoom step when zooming in or out using the toolbar buttons.

      Example

      instance.setViewState(viewState => (
        viewState.set("zoomStep", 1.1)
      ));

      Default Value

      1.25

toObject

  • Converts this record to a plain object, one level deep. Nested records are left as they are.

    Returns

    { … }

    A plain object holding this record's values.

    • allowExport: boolean

      Control whether or not the export PDF 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.

      It is possible to remove the export PDF button with the Toolbar API.

      Default Value

      true
    • 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.

      Default Value

      true
    • canScrollWhileDrawing: boolean

      This flag controls whether to enable/disable finger scrolling during Ink Drawing and Ink Erasing using a pen.

      • When set to false, (default), scrolling with the finger in drawing mode is disabled.
      • When set to true, once a pen input has been detected, finger input will result in scrolling the document. The pen detection state is shared across all pages, so switching pages does not reset the behavior.

      Example

      instance.setViewState(viewState => (
         viewState.set("canScrollWhileDrawing", true)
       ));

      Default Value

      false
    • commentDisplay: "FITTING" | "POPOVER" | "FLOATING"

      Controls how comments are displayed in the viewer in desktop and tablet modes. In mobile devices, comments are always displayed in a drawer a the bottom of the viewport:

      • NutrientViewer.CommentDisplay.FITTING: Comments are displayed in a dialog or floating depending on the available viewport space. This is the default value.
      • NutrientViewer.CommentDisplay.POPOVER: Comments are displayed in a dialog next to their reference annotation marker.
      • NutrientViewer.CommentDisplay.FLOATING: Comments are displayed floating next to the page side, at the same height as their reference annotation marker, except when ViewState#zoom is set to .ZoomeMode#FIT_TO_WIDTH`, in which case they are displayed in a popover dialog instead.

      Default Value

      CommentDisplay#FITTING

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

      Default Value

      0
    • disablePointSnapping: boolean

      Snapping to the nearest point is enabled by default in ur SDK for measurement tools. It can be disabled by this API.

      Example

      instance.setViewState(viewState =>
        viewState.set("disablePointSnapping", true)
      );

      Default Value

      false
    • enableAnnotationToolbar: boolean

      Set this to false if you want NutrientViewer to disable the annotation toolbar when an annotation is being created or modified.

      Default Value

      true
    • formDesignMode: boolean

      This flag controls what kind of UI interaction is active for widget annotations.

      • When set to false, (default), clicking on a widget annotation will allow to modify its value.
      • When set to true, clicking on a widget annotation will select it and allow moving, resizing and deleting it using the annotation toolbar.

      This flag can only be set to true if the Form Creator component is included in the license and the current backend supports it.

      Example

      instance.setViewState(viewState => (
         viewState.set("formDesignMode", true)
       ));

      Default Value

      false
    • instance: NutrientViewer.Instance | null

      An optional reference to a mounted Instance. This is required to call the following methods on ViewState:

      • {@link ViewState#zoomIn}
      • {@link ViewState#zoomOut}
      • {@link ViewState#nextZoomLevel}
    • interactionMode:
          | "NOTE"
          | "TEXT"
          | "TEXT_HIGHLIGHTER"
          | "INK"
          | "INK_SIGNATURE"
          | "SIGNATURE"
          | "STAMP_PICKER"
          | "STAMP_CUSTOM"
          | "SHAPE_LINE"
          | "SHAPE_RECTANGLE"
          | "SHAPE_ELLIPSE"
          | "SHAPE_POLYGON"
          | "SHAPE_POLYLINE"
          | "INK_ERASER"
          | "COMMENT_MARKER"
          | "CALLOUT"
          | "PAN"
          | "SEARCH"
          | "DOCUMENT_EDITOR"
          | "MARQUEE_ZOOM"
          | "REDACT_TEXT_HIGHLIGHTER"
          | "REDACT_SHAPE_RECTANGLE"
          | "DOCUMENT_CROP"
          | "BUTTON_WIDGET"
          | "TEXT_WIDGET"
          | "RADIO_BUTTON_WIDGET"
          | "CHECKBOX_WIDGET"
          | "COMBO_BOX_WIDGET"
          | "LIST_BOX_WIDGET"
          | "SIGNATURE_WIDGET"
          | "DATE_WIDGET"
          | "FORM_CREATOR"
          | "LINK"
          | "DISTANCE"
          | "PERIMETER"
          | "RECTANGLE_AREA"
          | "ELLIPSE_AREA"
          | "POLYGON_AREA"
          | "CONTENT_EDITOR"
          | "MULTI_ANNOTATIONS_SELECTION"
          | "MEASUREMENT"
          | "MEASUREMENT_SETTINGS"
          | "ATTACHMENT_PREVIEW"
          | null

      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 InteractionMode.TEXT, we will delete the current in-memory ink annotation.

      For a list of all available mode, please refer to 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).

      Example

      instance.setViewState(viewState => (
         viewState.set("interactionMode", NutrientViewer.InteractionMode.PAN)
       ));

      Default Value

      null
    • keepFirstSpreadAsSinglePage: boolean

      When this is enabled, the first spread will always show a single page, even when 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 ViewState#layoutMode.

      Default Value

      false
    • keepSelectedTool: boolean

      This flag controls whether a selected tool should maintain its selected state after an annotation is created

      • When set to false, (default), after an annotation has been created the tool is not selected anymore.
      • When set to true, the tool used to create the annotation will still be selected and so it'll be possible to keep adding annotations.

      This feature is available for Note Annotation, Text Annotation, Redaction Annotation, Shape Annotation and Comments. Ink Annotation behaves like this by default, the ink tool stays selected until its deselected either programmatically or via the UI.

      Example

      instance.setViewState(viewState => (
         viewState.set("keepSelectedTool", true)
       ));

      Default Value

      false
    • layoutMode: "SINGLE" | "DOUBLE" | "AUTO"

      Controls how pages inside a view are displayed.

      Default Value

      LayoutMode.SINGLE

    • pageCursor: {
          keyboard?: (
              mode:
                  | "NOTE"
                  | "TEXT"
                  | "TEXT_HIGHLIGHTER"
                  | "INK"
                  | "INK_SIGNATURE"
                  | "SIGNATURE"
                  | "STAMP_PICKER"
                  | "STAMP_CUSTOM"
                  | "SHAPE_LINE"
                  | "SHAPE_RECTANGLE"
                  | "SHAPE_ELLIPSE"
                  | "SHAPE_POLYGON"
                  | "SHAPE_POLYLINE"
                  | "INK_ERASER"
                  | "COMMENT_MARKER"
                  | "CALLOUT"
                  | "PAN"
                  | "SEARCH"
                  | "DOCUMENT_EDITOR"
                  | "MARQUEE_ZOOM"
                  | "REDACT_TEXT_HIGHLIGHTER"
                  | "REDACT_SHAPE_RECTANGLE"
                  | "DOCUMENT_CROP"
                  | "BUTTON_WIDGET"
                  | "TEXT_WIDGET"
                  | "RADIO_BUTTON_WIDGET"
                  | "CHECKBOX_WIDGET"
                  | "COMBO_BOX_WIDGET"
                  | "LIST_BOX_WIDGET"
                  | "SIGNATURE_WIDGET"
                  | "DATE_WIDGET"
                  | "FORM_CREATOR"
                  | "LINK"
                  | "DISTANCE"
                  | "PERIMETER"
                  | "RECTANGLE_AREA"
                  | "ELLIPSE_AREA"
                  | "POLYGON_AREA"
                  | "CONTENT_EDITOR"
                  | "MULTI_ANNOTATIONS_SELECTION"
                  | "MEASUREMENT"
                  | "MEASUREMENT_SETTINGS"
                  | "ATTACHMENT_PREVIEW"
                  | null,
          ) => { enabled?: boolean };
      }

      Configuration for cursor behavior keyed by input modality.

      The keyboard property is a function that receives the current InteractionMode and returns configuration for that mode. This allows per-mode configuration.

      When keyboard returns { enabled: true } for a mode:

      • NOTE, TEXT, CALLOUT - single point placement
      • SHAPE_LINE, SHAPE_RECTANGLE, SHAPE_ELLIPSE - 2 point placement
      • SHAPE_POLYGON, SHAPE_POLYLINE - multi-point (Shift+Enter to complete)

      Example

      // Disable keyboard for all modes
      instance.setViewState(viewState => (
        viewState.set("pageCursor", { keyboard: () => ({ enabled: false }) })
      ));

      // Disable keyboard only for INK mode
      instance.setViewState(viewState => (
        viewState.set("pageCursor", {
          keyboard: (mode) => ({ enabled: mode !== InteractionMode.INK })
        })
      ));

      Default Value

      { keyboard: () => ({ enabled: true }) }
      • Optional
        keyboard?: (
            mode:
                | "NOTE"
                | "TEXT"
                | "TEXT_HIGHLIGHTER"
                | "INK"
                | "INK_SIGNATURE"
                | "SIGNATURE"
                | "STAMP_PICKER"
                | "STAMP_CUSTOM"
                | "SHAPE_LINE"
                | "SHAPE_RECTANGLE"
                | "SHAPE_ELLIPSE"
                | "SHAPE_POLYGON"
                | "SHAPE_POLYLINE"
                | "INK_ERASER"
                | "COMMENT_MARKER"
                | "CALLOUT"
                | "PAN"
                | "SEARCH"
                | "DOCUMENT_EDITOR"
                | "MARQUEE_ZOOM"
                | "REDACT_TEXT_HIGHLIGHTER"
                | "REDACT_SHAPE_RECTANGLE"
                | "DOCUMENT_CROP"
                | "BUTTON_WIDGET"
                | "TEXT_WIDGET"
                | "RADIO_BUTTON_WIDGET"
                | "CHECKBOX_WIDGET"
                | "COMBO_BOX_WIDGET"
                | "LIST_BOX_WIDGET"
                | "SIGNATURE_WIDGET"
                | "DATE_WIDGET"
                | "FORM_CREATOR"
                | "LINK"
                | "DISTANCE"
                | "PERIMETER"
                | "RECTANGLE_AREA"
                | "ELLIPSE_AREA"
                | "POLYGON_AREA"
                | "CONTENT_EDITOR"
                | "MULTI_ANNOTATIONS_SELECTION"
                | "MEASUREMENT"
                | "MEASUREMENT_SETTINGS"
                | "ATTACHMENT_PREVIEW"
                | null,
        ) => { enabled?: boolean }

        Function that returns keyboard modality configuration for the given InteractionMode.

        This allows per-mode configuration (e.g., disable keyboard for some modes).

    • 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 LayoutMode.DOUBLE.

      Default Value

      0
    • pagesRotation: 0 | 90 | 180 | 270

      The current rotation of all pages. The value is in degrees and describes a clockwise rotation.

      Can either be 0°, 90°, 180°, or 270°. Negative values and values above 270 are normalized to one of the valid rotations.

      When a page rotation is set, the values are not persisted in the PDF. This setting only affects how the PDF is viewed in the application.

      Example

      instance.setViewState(viewState => viewState.set("pagesRotation", -450))
      // ... later
      instance.viewState.pagesRotation; // => 270

      Default Value

      0
    • prerenderedPageSpreads: number | null

      Number of page spreads to prerender.

      Apart from the current page, Nutrient Web SDK prerenders a specific number of page spreads before and after the current page to improve the user experience when scrolling through the document.

      A page spread is a container for either one or two pages, based on the configured layout mode. The number of prerendered page spreads is set to 5 by default, which means that Nutrient Web SDK will prerender 5 page spreads before and after the current page.

      If set to null, all the page spreads in the document will be prerendered. This setting is not recommended for large documents, as it may lead to performance issues.

      Example

      // Prerender 10 page spreads
      instance.setViewState(viewState =>
       viewState.set("prerenderedPageSpreads", 10)
      );
      // Prerender all page spreads
      instance.setViewState(viewState =>
       viewState.set("prerenderedPageSpreads", null)
      );

      Default Value

      5
    • previewRedactionMode: boolean

      This flag controls whether to show the marked state or redacted state for redaction annotations.

      • When set to false, (default), the marked state of redaction annotations will be shown.
      • When set to true, the redacted state of redaction annotations will be used.

      This flag can only be set to true if the Redactions component is included in the license.

      Example

      instance.setViewState(viewState => (
         viewState.set("previewRedactionMode", true)
       ));

      Default Value

      false
    • 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 or modify form field values.

      However, it is still possible to add annotations programmatically.

      If a read only mode is specified within the JWT itself or in the PDF document permissions, and NutrientViewer.Options.IGNORE_DOCUMENT_PERMISSIONS is not set, this option cannot be unset.

      Default Value

      false
    • resolvedLayoutMode: "SINGLE" | "DOUBLE" | "AUTO"

      When in LayoutMode.AUTO mode, this property is set to the actual rendered layout mode, which can either be LayoutMode.SINGLE or LayoutMode.DOUBLE. It can be used to be notified when the layout mode changes while still being in LayoutMode.AUTO mode: if the rendered layout mode changes while in NutrientViewer.LayoutMode.AUTO (because of user UI interactions, for example), the viewState.change event will be dispatched, and this property will hold the updated value.

      Example

      instance.addEventListener("viewState.change", (viewState) => {
      console.log(viewState.resolvedLayoutMode);
      });
    • scrollMode: "DISABLED" | "CONTINUOUS" | "PER_SPREAD"

      Controls how pages can be scrolled.

      Default Value

      ScrollMode.CONTINUOUS

    • showAIAssistant: boolean

      When this is enabled, the AI Assistant chat dialog will be shown. If this is disabled, the chat dialog will not be shown.

      Example

      NutrientViewer.load({
        initialViewState: new NutrientViewer.ViewState({
          showAIAssistant: true,
        }),
      });

      Default Value

      false
    • showAnnotationNotes: boolean

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

      Default Value

      true
    • showAnnotations: boolean

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

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

      Default Value

      true
    • showComments: boolean

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

      NutrientViewer ignores this value when you haven't purchased the comments component.

      Default Value

      true
    • showSignatureValidationStatus: "IF_SIGNED" | "HAS_WARNINGS" | "HAS_ERRORS" | "NEVER"

      Controls when the digital signature validation UI will be shown.

      Example

      instance.setViewState(viewState => (
        viewState.set("showSignatureValidationStatus", NutrientViewer.ShowSignatureValidationStatusMode.IF_SIGNED)
      ));

      Default Value

      ShowSignatureValidationStatusMode.NEVER

    • showToolbar: boolean

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

      Default Value

      true
    • sidebarMode:
          | "ANNOTATIONS"
          | "BOOKMARKS"
          | "DOCUMENT_OUTLINE"
          | "THUMBNAILS"
          | "SIGNATURES"
          | "LAYERS"
          | "ATTACHMENTS"
          | "CUSTOM"
          | null
          | undefined

      Controls the current sidebar mode in the viewer.

      For a list of all available mode, please refer to SidebarMode. This can also be set to a custom sidebar ID corresponding to a sidebar passed in ui.sidebar.

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

      Example

      instance.setViewState(viewState => (
        viewState.set("sidebarMode", NutrientViewer.SidebarMode.THUMBNAILS)
      ));

      Default Value

      null
    • sidebarOptions:
          | { ANNOTATIONS: AnnotationsSidebarOptions }
          | { LAYERS: LayersSidebarOptions }
          | { ATTACHMENTS: AttachmentsSidebarOptions }
          | { [key: string]: any }

      Defines specific options that affect each individual sidebar.

      For a list of all available options, please refer to SidebarOptions.

      Example

      Customizing the annotations sidebar to include only Text and Highlight annotations

      instance.setViewState(viewState => (
        viewState.set("sidebarOptions",  {
            [NutrientViewer.SidebarMode.ANNOTATIONS]: {
              includeContent: [
                NutrientViewer.Annotations.TextAnnotation,
                NutrientViewer.Annotations.HighlightAnnotation,
              ],
            },
          }
        )
      ));

      Customizing the annotations sidebar to include Comments

      instance.setViewState(viewState => (
        viewState.set("sidebarOptions",  {
            [NutrientViewer.SidebarMode.ANNOTATIONS]: {
              includeContent: [
                ...NutrientViewer.defaultAnnotationsSidebarContent,
                NutrientViewer.Comment,
              ],
            },
          }
        )
      ));
    • sidebarPlacement: "START" | "END"

      Controls the current sidebar placement in the viewer.

      Example

      instance.setViewState(viewState => (
        viewState.set("sidebarPlacement", NutrientViewer.SidebarPlacement.END)
      ));

      Default Value

      null
    • sidebarWidth: number

      Controls the width of the sidebar in client, pixel units. Changing the ViewState.sidebarMode does not affect this value.

      The default value depends on the current viewport width: if the viewport width is less than 768px, the sidebar will take 100% of the viewport width by default. If the viewport width is greater, the sidebar will take 300px by default.

      Example

      instance.setViewState(viewState => (
        viewState.set("sidebarWidth", 400)
      ));
    • 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 ScrollMode.CONTINUOUS.

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

      Default Value

      20
    • viewportPadding: {
          horizontal: number;
          vertical: number;
          "[iterator]"(): IterableIterator<
              [keyof { horizontal: number; vertical: number }, number],
          >;
          clear(): this;
          delete<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
          ): this;
          deleteIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): this;
          entries(): IterableIterator<[string, unknown]>;
          equals(other: unknown): boolean;
          get<R extends FieldSource, K extends string | number | symbol, N = never>(
              this: R,
              key: K,
              notSetValue?: N,
          ): N | ReturnType<R["toObject"]>[K];
          getIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): ValueAt<{ horizontal: number; vertical: number }, P>;
          getIn<const P extends Iterable<unknown, any, any>, N>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              notSetValue: N,
          ): ValueAt<{ horizontal: number; vertical: number }, P, N>;
          has<R extends FieldSource, K extends string>(
              this: R,
              key: K & (string extends K ? unknown : FieldNameOf<R>),
          ): key is K & FieldNameOf<R>;
          hashCode(): number;
          hasIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): boolean;
          isEqual(other: unknown): boolean;
          merge<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              ...collections: FieldValuesIn<SharedFieldsOf<R>, C> & C,
          ): this;
          mergeDeep<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              ...collections: FieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C,
          ): this;
          mergeDeepIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              ...collections: MergeableInto<
                  ValueAt<{ horizontal: number; vertical: number }, P, never>,
              >[],
          ): this;
          mergeDeepWith<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              merger: (previous: unknown, next: unknown, key: unknown) => unknown,
              ...collections: FieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C,
          ): this;
          mergeIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              ...collections: MergeableInto<
                  ValueAt<{ horizontal: number; vertical: number }, P, never>,
              >[],
          ): this;
          mergeWith<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              merger: <K extends string | number | symbol>(
                  previous: SharedFieldsOf<R>[K],
                  next: SharedFieldsOf<R>[K],
                  key: K,
              ) => SharedFieldsOf<R>[K],
              ...collections: FieldValuesIn<SharedFieldsOf<R>, C> & C,
          ): this;
          remove<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
          ): this;
          removeIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): this;
          set<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
              value: ReturnType<R["toObject"]>[K],
          ): this;
          setIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              value: ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this;
          toJS(): PlainFields<TProps>;
          toJSON(): { horizontal: number; vertical: number };
          toObject(): { horizontal: number; vertical: number };
          update<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
              updater: (
                  value: ReturnType<R["toObject"]>[K],
              ) => ReturnType<R["toObject"]>[K],
          ): this;
          updateIn<const P extends Iterable<unknown, any, any>, N>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              notSetValue: N,
              updater: (
                  value: ValueAt<{ horizontal: number; vertical: number }, P, N>,
              ) => ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this;
          updateIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              updater: (
                  value: ValueAt<{ horizontal: number; vertical: number }, P>,
              ) => ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this;
          withMutations(mutator: (mutable: this) => unknown): this;
      }

      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.

      Default Value

      { horizontal: 20, vertical: 20 }
      • Readonly
        horizontal: number

        The horizontal padding for left and right in pixel.

      • Readonly
        vertical: number

        The vertical padding for top and bottom in pixel.

      • [iterator]: function
        • "[iterator]"(): IterableIterator<
              [keyof { horizontal: number; vertical: number }, number],
          >

          Iterates the [key, value] pairs, in the order the fields were defined.

          Returns

          IterableIterator<[keyof { horizontal: number; vertical: number }, number]>
      • clear: function
        • clear(): this

          Returns a record with every key reset to the default it was defined with.

          Returns

          this

          A new record holding only default values.

      • delete: function
        • delete<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
          ): this

          Returns a record with key reset to the default it was defined with.

          Type Parameters

          Rextends FieldSource
          Kextends string | number | symbol

          Parameters

          thisR
          keyK

          One of the keys this record was defined with.

          Returns

          this

          A new record, or this one when the value already equals the default.

      • deleteIn: function
        • deleteIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): this

          Returns a record with the value at keyPath removed. A field of this record is reset to its default; a key of a nested collection or plain object is deleted.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          Returns

          this

          A new record, or this one when nothing was removed.

      • entries: function
        • entries(): IterableIterator<[string, unknown]>

          Returns the record's [key, value] pairs, in the order its fields were defined.

          Returns

          IterableIterator<[string, unknown]>

          An iterator over the record's fields.

      • equals: function
        • equals(other: unknown): boolean
          Deprecated

          Reports whether other is a record holding the same keys with equal values, whatever its class.

          Parameters

          otherunknown

          The value to compare against.

          Returns

          boolean

          true when both hold the same keys and every value matches.

          Deprecated

          Records of different classes with identical values compare equal. Use isEqual(), which also requires both records to be of the same class.

      • get: function
        • get<R extends FieldSource, K extends string | number | symbol, N = never>(
              this: R,
              key: K,
              notSetValue?: N,
          ): N | ReturnType<R["toObject"]>[K]

          Returns the value stored under key.

          Type Parameters

          Rextends FieldSource
          Kextends string | number | symbol
          N = never

          Parameters

          thisR
          keyK

          One of the keys this record was defined with.

          notSetValueN
          Optional

          Returned when the record does not define key.

          Returns

          N | ReturnType<R["toObject"]>[K]

          The current value for that key.

      • getIn: function
        • getIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): ValueAt<{ horizontal: number; vertical: number }, P>

          Returns the value at keyPath, walking nested records and collections.

          A literal key path is checked against the record's fields and gives the value's type; a computed one gives unknown.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          Returns

          ValueAt<{ horizontal: number; vertical: number }, P>

          The value at that path, or undefined when it does not resolve.

        • getIn<const P extends Iterable<unknown, any, any>, N>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              notSetValue: N,
          ): ValueAt<{ horizontal: number; vertical: number }, P, N>

          Returns the value at keyPath, walking nested records and collections.

          A literal key path is checked against the record's fields and gives the value's type; a computed one gives unknown.

          Type Parameters

          Pextends Iterable<unknown, any, any>
          N

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          notSetValueN

          Returned when the path does not resolve.

          Returns

          ValueAt<{ horizontal: number; vertical: number }, P, N>

          The value at that path, or notSetValue.

      • has: function
        • has<R extends FieldSource, K extends string>(
              this: R,
              key: K & (string extends K ? unknown : FieldNameOf<R>),
          ): key is K & FieldNameOf<R>

          Reports whether key is one of the keys this record was defined with.

          A literal key must name a field; a key typed as string is narrowed to the field names.

          Type Parameters

          Rextends FieldSource
          Kextends string

          Parameters

          thisR
          keyK & (string extends K ? unknown : FieldNameOf<R>)

          The key to look for.

          Returns

          key is K & FieldNameOf<R>

          true when the record defines that key, even if its value is null.

      • hashCode: function
        • hashCode(): number

          Computes a hash of this record from its contents, the same way Immutable.js does. Equal records have equal hashes; records with equal hashes are not necessarily equal. Plain objects, functions and symbols hash by identity, so a hash is only meaningful within the page that computed it.

          Returns

          number

          An integer hash.

      • hasIn: function
        • hasIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): boolean

          Reports whether keyPath resolves, walking nested records and collections.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          Returns

          boolean

          true when every key along the path is present.

      • isEqual: function
        • isEqual(other: unknown): boolean

          Reports whether other is a record of the same class holding equal values. Only the two records' own classes are compared; nested records compare as equals() does.

          Parameters

          otherunknown

          The value to compare against.

          Returns

          boolean

          true when both are the same class and every value matches.

      • merge: function
        • merge<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              ...collections: FieldValuesIn<SharedFieldsOf<R>, C> & C,
          ): this

          Returns a record with the entries of each collection applied in order.

          Keys the record was not defined with are ignored.

          Type Parameters

          Rextends FieldSource
          Cextends readonly unknown[]

          Parameters

          thisR
          ...collectionsFieldValuesIn<SharedFieldsOf<R>, C> & C

          Plain objects or key/value iterables to apply.

          Returns

          this

          A new record, or this one when no value changed.

      • mergeDeep: function
        • mergeDeep<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              ...collections: FieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C,
          ): this

          Returns a record with the entries of each collection merged in, recursing into nested collections and plain objects instead of replacing them.

          Keys the record was not defined with are ignored.

          Type Parameters

          Rextends FieldSource
          Cextends readonly unknown[]

          Parameters

          thisR
          ...collectionsFieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C

          Plain objects or key/value iterables to merge in.

          Returns

          this

          A new record, or this one when no value changed.

      • mergeDeepIn: function
        • mergeDeepIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              ...collections: MergeableInto<
                  ValueAt<{ horizontal: number; vertical: number }, P, never>,
              >[],
          ): this

          Returns a record with each collection merged deeply into the value at keyPath.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          ...collectionsMergeableInto<ValueAt<{ horizontal: number; vertical: number }, P, never>>[]

          Collections or plain objects to merge into the value there.

          Returns

          this

          A new record, or this one when the value is unchanged.

      • mergeDeepWith: function
        • mergeDeepWith<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              merger: (previous: unknown, next: unknown, key: unknown) => unknown,
              ...collections: FieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C,
          ): this

          Returns a record with the entries of each collection merged in deeply, calling merger where a nested value is not a collection to decide the value that is kept.

          Keys the record was not defined with are ignored.

          Type Parameters

          Rextends FieldSource
          Cextends readonly unknown[]

          Parameters

          thisR
          merger(previous: unknown, next: unknown, key: unknown) => unknown

          Receives the current value, the incoming value and the key.

          ...collectionsFieldValuesIn<DeepFields<SharedFieldsOf<R>>, C> & C

          Plain objects or key/value iterables to merge in.

          Returns

          this

          A new record, or this one when no value changed.

      • mergeIn: function
        • mergeIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              ...collections: MergeableInto<
                  ValueAt<{ horizontal: number; vertical: number }, P, never>,
              >[],
          ): this

          Returns a record with each collection merged into the value at keyPath, one level at a time.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          ...collectionsMergeableInto<ValueAt<{ horizontal: number; vertical: number }, P, never>>[]

          Collections or plain objects to merge into the value there.

          Returns

          this

          A new record, or this one when the value is unchanged.

      • mergeWith: function
        • mergeWith<R extends FieldSource, const C extends readonly unknown[]>(
              this: R,
              merger: <K extends string | number | symbol>(
                  previous: SharedFieldsOf<R>[K],
                  next: SharedFieldsOf<R>[K],
                  key: K,
              ) => SharedFieldsOf<R>[K],
              ...collections: FieldValuesIn<SharedFieldsOf<R>, C> & C,
          ): this

          Returns a record with the entries of each collection merged in, calling merger for each key the record already holds to decide the value that is kept.

          Keys the record was not defined with are ignored.

          Type Parameters

          Rextends FieldSource
          Cextends readonly unknown[]

          Parameters

          thisR
          merger<K extends string | number | symbol>(
          previous: SharedFieldsOf<R>[K],
          next: SharedFieldsOf<R>[K],
          key: K
          ) => SharedFieldsOf<R>[K]

          Receives the current value, the incoming value and the key.

          ...collectionsFieldValuesIn<SharedFieldsOf<R>, C> & C

          Plain objects or key/value iterables to merge in.

          Returns

          this

          A new record, or this one when no value changed.

      • remove: function
        • remove<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
          ): this

          An alias for delete.

          Type Parameters

          Rextends FieldSource
          Kextends string | number | symbol

          Parameters

          thisR
          keyK

          One of the keys this record was defined with.

          Returns

          this

          A new record, or this one when the value already equals the default.

      • removeIn: function
        • removeIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
          ): this

          An alias for deleteIn.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          Returns

          this

          A new record, or this one when nothing was removed.

      • set: function
        • set<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
              value: ReturnType<R["toObject"]>[K],
          ): this

          Returns a record with key set to value.

          Setting a key to the value it already holds returns the same instance, so a record can be compared by reference to detect a change.

          Type Parameters

          Rextends FieldSource
          Kextends string | number | symbol

          Parameters

          thisR
          keyK

          One of the keys this record was defined with.

          valueReturnType<R["toObject"]>[K]

          The value to store.

          Returns

          this

          A new record, or this one when the value is unchanged or the key is not defined.

      • setIn: function
        • setIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              value: ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this

          Returns a record with value written at keyPath.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          valueValueAt<{ horizontal: number; vertical: number }, P, never>

          The value to store.

          Returns

          this

          A new record, or this one when the value is unchanged.

      • toJS: function
        • toJS(): PlainFields<TProps>

          Converts this record and everything nested inside it to plain JavaScript values.

          Returns

          PlainFields<TProps>

          A plain object holding this record's values, converted all the way down.

      • toJSON: function
        • toJSON(): { horizontal: number; vertical: number }

          An alias for toObject, called by JSON.stringify.

          Returns

          { horizontal: number; vertical: number }

          A plain object holding this record's values.

          • horizontal: number

            The horizontal padding for left and right in pixel.

          • vertical: number

            The vertical padding for top and bottom in pixel.

      • toObject: function
        • toObject(): { horizontal: number; vertical: number }

          Converts this record to a plain object, one level deep. Nested records are left as they are.

          Returns

          { horizontal: number; vertical: number }

          A plain object holding this record's values.

          • horizontal: number

            The horizontal padding for left and right in pixel.

          • vertical: number

            The vertical padding for top and bottom in pixel.

      • update: function
        • update<R extends FieldSource, K extends string | number | symbol>(
              this: R,
              key: K,
              updater: (
                  value: ReturnType<R["toObject"]>[K],
              ) => ReturnType<R["toObject"]>[K],
          ): this

          Returns a record with key replaced by the result of applying updater to its current value.

          Type Parameters

          Rextends FieldSource
          Kextends string | number | symbol

          Parameters

          thisR
          keyK

          One of the keys this record was defined with.

          updater(value: ReturnType<R["toObject"]>[K]) => ReturnType<R["toObject"]>[K]

          Receives the current value and returns the new one.

          Returns

          this

          A new record, or this one when the value is unchanged.

      • updateIn: function
        • updateIn<const P extends Iterable<unknown, any, any>, N>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              notSetValue: N,
              updater: (
                  value: ValueAt<{ horizontal: number; vertical: number }, P, N>,
              ) => ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this

          Returns a record with the value at keyPath replaced by the result of updater.

          Type Parameters

          Pextends Iterable<unknown, any, any>
          N

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          notSetValueN
          updater(
          value: ValueAt<{ horizontal: number; vertical: number }, P, N>
          ) => ValueAt<{ horizontal: number; vertical: number }, P, never>

          Receives the current value and returns the new one.

          Returns

          this

          A new record, or this one when the value is unchanged.

        • updateIn<const P extends Iterable<unknown, any, any>>(
              keyPath: P & KeyPathIn<{ horizontal: number; vertical: number }, P>,
              updater: (
                  value: ValueAt<{ horizontal: number; vertical: number }, P>,
              ) => ValueAt<{ horizontal: number; vertical: number }, P, never>,
          ): this

          Returns a record with the value at keyPath replaced by the result of updater.

          Type Parameters

          Pextends Iterable<unknown, any, any>

          Parameters

          keyPathP & KeyPathIn<{ horizontal: number; vertical: number }, P>

          The keys to follow, outermost first.

          updater(
          value: ValueAt<{ horizontal: number; vertical: number }, P>
          ) => ValueAt<{ horizontal: number; vertical: number }, P, never>

          Receives the current value and returns the new one.

          Returns

          this

          A new record, or this one when the value is unchanged.

      • withMutations: function
        • withMutations(mutator: (mutable: this) => unknown): this

          Applies several changes as one, so only a single new record is allocated.

          The record handed to mutator may be written to with set; it is frozen again once mutator returns.

          Parameters

          mutator(mutable: this) => unknown

          Receives a temporarily writable copy of this record.

          Returns

          this

          A new record holding the applied changes, or this one when nothing changed.

    • zoom:
          | number
          | "CUSTOM"
          | "AUTO"
          | ZoomConfiguration
          | "FIT_TO_WIDTH"
          | "FIT_TO_VIEWPORT"

      Controls the current zoom factor. This could either be a number multiplier or a ZoomConfiguration or a ZoomMode.

      If a number value is used, it must be between Instance#minimumZoomLevel and Instance#maximumZoomLevel.

      Note: Using a ZoomMode} will override the padding set using ViewState#viewportPadding

      Default Value

      {
         *   zoomMode: NutrientViewer.ZoomMode.AUTO,
         *   wheelZoomMode: NutrientViewer.WheelZoomMode.WITH_CTRL,
         *   options: {
         *     enableKeyboardZoom: true,
         *     enableGestureZoom: true,
         *   },
         * }
    • zoomStep: number

      Controls the zoom step when zooming in or out using the toolbar buttons.

      Example

      instance.setViewState(viewState => (
        viewState.set("zoomStep", 1.1)
      ));

      Default Value

      1.25

update

  • Returns a record with key replaced by the result of applying updater to its current value.

    Type Parameters

    K
    extends keyof { … }

    Parameters

    keyK & (
    | "allowPrinting"
    | "allowExport"
    | "currentPageIndex"
    | "instance"
    | "interactionMode"
    | "pageCursor"
    | "keepFirstSpreadAsSinglePage"
    | "layoutMode"
    | "pageSpacing"
    | "pagesRotation"
    | "readOnly"
    | "scrollMode"
    | "showAnnotations"
    | "showComments"
    | "showAnnotationNotes"
    | "showToolbar"
    | "enableAnnotationToolbar"
    | "sidebarMode"
    | "sidebarOptions"
    | "sidebarPlacement"
    | "spreadSpacing"
    | "viewportPadding"
    | "zoom"
    | "commentDisplay"
    | "zoomStep"
    | "formDesignMode"
    | "showSignatureValidationStatus"
    | "previewRedactionMode"
    | "canScrollWhileDrawing"
    | "keepSelectedTool"
    | "resolvedLayoutMode"
    | "sidebarWidth"
    | "disablePointSnapping"
    | "prerenderedPageSpreads"
    | "showAIAssistant"
    )

    One of the keys this record was defined with.

    updater
    (value: { … }[K]) => { … }[K]

    Receives the current value and returns the new one.

    Returns

    this

    A new record, or this one when the value is unchanged.

updateIn

  • Returns a record with the value at keyPath replaced by the result of updater.

    Type Parameters

    N

    Parameters

    keyPathIterable<unknown>

    The keys to follow, outermost first.

    notSetValueN
    updater(value: unknown) => unknown

    Receives the current value and returns the new one.

    Returns

    this

    A new record, or this one when the value is unchanged.

  • Returns a record with the value at keyPath replaced by the result of updater.

    Parameters

    keyPathIterable<unknown>

    The keys to follow, outermost first.

    updater(value: unknown) => unknown

    Receives the current value and returns the new one.

    Returns

    this

    A new record, or this one when the value is unchanged.

withMutations

  • Applies several changes as one, so only a single new record is allocated.

    The record handed to mutator may be written to with set; it is frozen again once mutator returns.

    Parameters

    mutator(mutable: this) => unknown

    Receives a temporarily writable copy of this record.

    Returns

    this

    A new record holding the applied changes, or this one when nothing changed.