Nutrient Web SDK

ReferenceNutrientViewerViewState

Class ViewState

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

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

An initial ViewState can be set in 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

RecordViewState

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
"AUTO" | "SINGLE" | "DOUBLE"

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
"AUTO" | "SINGLE" | "DOUBLE"

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
"CONTINUOUS" | "PER_SPREAD" | "DISABLED"

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

    | "CUSTOM"
    | "ANNOTATIONS"
    | "BOOKMARKS"
    | "DOCUMENT_OUTLINE"
    | "THUMBNAILS"
    | "SIGNATURES"
    | "LAYERS"
    | "ATTACHMENTS"
    | 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

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

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
    | ZoomConfiguration
    | "AUTO"
    | "CUSTOM"
    | "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

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

31

displayName

Static
string

The name provided to Record(values, name) can be accessed with displayName.

[iterator]

  • Returns

    IterableIterator<
    [
    keyof { … },
    | number
    | boolean
    | { [key: string]: any }
    | NutrientViewer.Instance
    | "NOTE"
    | ZoomConfiguration
    | "AUTO"
    | "CUSTOM"
    | "FIT_TO_WIDTH"
    | "FIT_TO_VIEWPORT"
    | "FITTING"
    | "POPOVER"
    | "FLOATING"
    | "SINGLE"
    | "DOUBLE"
    | "CONTINUOUS"
    | "PER_SPREAD"
    | "DISABLED"
    | "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"
    | { … }
    | "ANNOTATIONS"
    | "BOOKMARKS"
    | "DOCUMENT_OUTLINE"
    | "THUMBNAILS"
    | "SIGNATURES"
    | "LAYERS"
    | "ATTACHMENTS"
    | { ANNOTATIONS: AnnotationsSidebarOptions }
    | { LAYERS: LayersSidebarOptions }
    | { ATTACHMENTS: AttachmentsSidebarOptions }
    | "START"
    | "END"
    | { … }
    | "IF_SIGNED"
    | "HAS_WARNINGS"
    | "HAS_ERRORS"
    | "NEVER"
    | null
    | undefined
    ]
    >

asImmutable

  • Returns

    this

    See Also

    • Map#asImmutable

asMutable

  • Returns

    this

    See Also

    • Map#asMutable

clear

  • Returns a new instance of this Record type with all values set to their default values.

    Returns

    this

delete

  • Returns a new instance of this Record type with the value for the specific key set to its default value.

    Type Parameters

    K
    extends keyof { … }

    Parameters

    keyK

    Returns

    this

deleteIn

  • Parameters

    keyPathIterable<unknown>

    Returns

    this

equals

  • Parameters

    otherunknown

    Returns

    boolean

get

  • Returns the value associated with the provided key, which may be the default value defined when creating the Record factory function.

    If the requested key is not defined by this Record type, then notSetValue will be returned if provided. Note that this scenario would produce an error when using Flow or TypeScript.

    Type Parameters

    K
    extends keyof { … }

    Parameters

    keyK
    notSetValueunknown
    Optional

    Returns

    { … }[K]

  • Type Parameters

    T

    Parameters

    keystring
    notSetValueT

    Returns

    T

getIn

  • Parameters

    keyPathIterable<unknown>

    Returns

    unknown

has

  • Parameters

    keystring

    Returns

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

hashCode

  • Returns

    number

hasIn

  • Parameters

    keyPathIterable<unknown>

    Returns

    boolean

merge

  • Parameters

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

    Returns

    this

mergeDeep

  • Parameters

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

    Returns

    this

mergeDeepIn

  • Parameters

    keyPathIterable<unknown>
    ...collectionsunknown[]

    Returns

    this

mergeDeepWith

  • Parameters

    merger(oldVal: unknown, newVal: unknown, key: unknown) => unknown
    ...collections
    (Iterable<[string, unknown], any, any> | Partial<{ … }>)[]

    Returns

    this

mergeIn

  • Parameters

    keyPathIterable<unknown>
    ...collectionsunknown[]

    Returns

    this

mergeWith

  • Parameters

    merger
    (oldVal: unknown, newVal: unknown, key: keyof { … }) => unknown
    ...collections
    (Iterable<[string, unknown], any, any> | Partial<{ … }>)[]

    Returns

    this

remove

  • Type Parameters

    K
    extends keyof { … }

    Parameters

    keyK

    Returns

    this

removeIn

  • Parameters

    keyPathIterable<unknown>

    Returns

    this

set

  • Type Parameters

    K
    extends keyof { … }

    Parameters

    keyK
    value
    { … }[K]

    Returns

    this

setIn

  • Parameters

    keyPathIterable<unknown>
    valueunknown

    Returns

    this

toJS

  • Deeply converts this Record to equivalent native JavaScript Object.

    Note: This method may not be overridden. Objects with custom serialization to plain JS may override toJSON() instead.

    Returns

    { … }
    • 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: unknown

      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: "AUTO" | "SINGLE" | "DOUBLE"

      Controls how pages inside a view are displayed.

      Default Value

      LayoutMode.SINGLE

    • pageCursor: unknown

      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 }) }
    • 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: "AUTO" | "SINGLE" | "DOUBLE"

      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: "CONTINUOUS" | "PER_SPREAD" | "DISABLED"

      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:
          | "CUSTOM"
          | "ANNOTATIONS"
          | "BOOKMARKS"
          | "DOCUMENT_OUTLINE"
          | "THUMBNAILS"
          | "SIGNATURES"
          | "LAYERS"
          | "ATTACHMENTS"
          | 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: unknown

      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: unknown

      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 }
    • zoom: unknown

      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

toJSON

  • Shallowly converts this Record to equivalent native JavaScript Object.

    Returns

    { … }
    • 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: "AUTO" | "SINGLE" | "DOUBLE"

      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: "AUTO" | "SINGLE" | "DOUBLE"

      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: "CONTINUOUS" | "PER_SPREAD" | "DISABLED"

      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:
          | "CUSTOM"
          | "ANNOTATIONS"
          | "BOOKMARKS"
          | "DOCUMENT_OUTLINE"
          | "THUMBNAILS"
          | "SIGNATURES"
          | "LAYERS"
          | "ATTACHMENTS"
          | 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:
          | { [key: string]: any }
          | { ANNOTATIONS: AnnotationsSidebarOptions }
          | { LAYERS: LayersSidebarOptions }
          | { ATTACHMENTS: AttachmentsSidebarOptions }

      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],
          >;
          asImmutable(): this;
          asMutable(): this;
          clear(): this;
          delete<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
          ): this;
          deleteIn(keyPath: Iterable<unknown>): this;
          equals(other: unknown): boolean;
          get<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              notSetValue?: unknown,
          ): { horizontal: number; vertical: number }[K];
          get<T>(key: string, notSetValue: T): T;
          getIn(keyPath: Iterable<unknown>): unknown;
          has(key: string): key is "horizontal" | "vertical";
          hashCode(): number;
          hasIn(keyPath: Iterable<unknown>): boolean;
          merge(
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this;
          mergeDeep(
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this;
          mergeDeepIn(keyPath: Iterable<unknown>, ...collections: unknown[]): this;
          mergeDeepWith(
              merger: (oldVal: unknown, newVal: unknown, key: unknown) => unknown,
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this;
          mergeIn(keyPath: Iterable<unknown>, ...collections: unknown[]): this;
          mergeWith(
              merger: (
                  oldVal: unknown,
                  newVal: unknown,
                  key: keyof { horizontal: number; vertical: number },
              ) => unknown,
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this;
          remove<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
          ): this;
          removeIn(keyPath: Iterable<unknown>): this;
          set<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              value: { horizontal: number; vertical: number }[K],
          ): this;
          setIn(keyPath: Iterable<unknown>, value: unknown): this;
          toJS(): { horizontal: number; vertical: number };
          toJSON(): { horizontal: number; vertical: number };
          toObject(): { horizontal: number; vertical: number };
          toSeq(): Keyed<keyof { horizontal: number; vertical: number }, number>;
          update<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              updater: (
                  value: { horizontal: number; vertical: number }[K],
              ) => { horizontal: number; vertical: number }[K],
          ): this;
          updateIn(
              keyPath: Iterable<unknown>,
              updater: (value: unknown) => unknown,
          ): this;
          wasAltered(): boolean;
          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],
          >

          Returns

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

          Returns

          this

          See Also

          • Map#asImmutable

      • asMutable: function
        • asMutable(): this

          Returns

          this

          See Also

          • Map#asMutable

      • clear: function
        • clear(): this

          Returns a new instance of this Record type with all values set to their default values.

          Returns

          this
      • delete: function
        • delete<K extends keyof { horizontal: number; vertical: number }>(key: K): this

          Returns a new instance of this Record type with the value for the specific key set to its default value.

          Type Parameters

          Kextends keyof { horizontal: number; vertical: number }

          Parameters

          keyK

          Returns

          this
      • deleteIn: function
        • deleteIn(keyPath: Iterable<unknown>): this

          Parameters

          keyPathIterable<unknown>

          Returns

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

          Parameters

          otherunknown

          Returns

          boolean
      • get: function
        • get<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              notSetValue?: unknown,
          ): { horizontal: number; vertical: number }[K]

          Returns the value associated with the provided key, which may be the default value defined when creating the Record factory function.

          If the requested key is not defined by this Record type, then notSetValue will be returned if provided. Note that this scenario would produce an error when using Flow or TypeScript.

          Type Parameters

          Kextends keyof { horizontal: number; vertical: number }

          Parameters

          keyK
          notSetValueunknown
          Optional

          Returns

          { horizontal: number; vertical: number }[K]
        • get<T>(key: string, notSetValue: T): T

          Type Parameters

          T

          Parameters

          keystring
          notSetValueT

          Returns

          T
      • getIn: function
        • getIn(keyPath: Iterable<unknown>): unknown

          Parameters

          keyPathIterable<unknown>

          Returns

          unknown
      • has: function
        • has(key: string): key is "horizontal" | "vertical"

          Parameters

          keystring

          Returns

          key is "horizontal" | "vertical"
      • hashCode: function
        • hashCode(): number

          Returns

          number
      • hasIn: function
        • hasIn(keyPath: Iterable<unknown>): boolean

          Parameters

          keyPathIterable<unknown>

          Returns

          boolean
      • merge: function
        • merge(
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this

          Parameters

          ...collections(
          | Iterable<[string, unknown], any, any>
          | Partial<{ horizontal: number; vertical: number }>
          )[]

          Returns

          this
      • mergeDeep: function
        • mergeDeep(
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this

          Parameters

          ...collections(
          | Iterable<[string, unknown], any, any>
          | Partial<{ horizontal: number; vertical: number }>
          )[]

          Returns

          this
      • mergeDeepIn: function
        • mergeDeepIn(keyPath: Iterable<unknown>, ...collections: unknown[]): this

          Parameters

          keyPathIterable<unknown>
          ...collectionsunknown[]

          Returns

          this
      • mergeDeepWith: function
        • mergeDeepWith(
              merger: (oldVal: unknown, newVal: unknown, key: unknown) => unknown,
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this

          Parameters

          merger(oldVal: unknown, newVal: unknown, key: unknown) => unknown
          ...collections(
          | Iterable<[string, unknown], any, any>
          | Partial<{ horizontal: number; vertical: number }>
          )[]

          Returns

          this
      • mergeIn: function
        • mergeIn(keyPath: Iterable<unknown>, ...collections: unknown[]): this

          Parameters

          keyPathIterable<unknown>
          ...collectionsunknown[]

          Returns

          this
      • mergeWith: function
        • mergeWith(
              merger: (
                  oldVal: unknown,
                  newVal: unknown,
                  key: keyof { horizontal: number; vertical: number },
              ) => unknown,
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this

          Parameters

          merger(
          oldVal: unknown,
          newVal: unknown,
          key: keyof { horizontal: number; vertical: number }
          ) => unknown
          ...collections(
          | Iterable<[string, unknown], any, any>
          | Partial<{ horizontal: number; vertical: number }>
          )[]

          Returns

          this
      • remove: function
        • remove<K extends keyof { horizontal: number; vertical: number }>(key: K): this

          Type Parameters

          Kextends keyof { horizontal: number; vertical: number }

          Parameters

          keyK

          Returns

          this
      • removeIn: function
        • removeIn(keyPath: Iterable<unknown>): this

          Parameters

          keyPathIterable<unknown>

          Returns

          this
      • set: function
        • set<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              value: { horizontal: number; vertical: number }[K],
          ): this

          Type Parameters

          Kextends keyof { horizontal: number; vertical: number }

          Parameters

          keyK
          value{ horizontal: number; vertical: number }[K]

          Returns

          this
      • setIn: function
        • setIn(keyPath: Iterable<unknown>, value: unknown): this

          Parameters

          keyPathIterable<unknown>
          valueunknown

          Returns

          this
      • toJS: function
        • toJS(): { horizontal: number; vertical: number }

          Deeply converts this Record to equivalent native JavaScript Object.

          Note: This method may not be overridden. Objects with custom serialization to plain JS may override toJSON() instead.

          Returns

          { horizontal: number; vertical: number }
          • horizontal: number

            The horizontal padding for left and right in pixel.

          • vertical: number

            The vertical padding for top and bottom in pixel.

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

          Shallowly converts this Record to equivalent native JavaScript Object.

          Returns

          { horizontal: number; vertical: number }
          • 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 }

          Shallowly converts this Record to equivalent JavaScript Object.

          Returns

          { horizontal: number; vertical: number }
          • horizontal: number

            The horizontal padding for left and right in pixel.

          • vertical: number

            The vertical padding for top and bottom in pixel.

      • toSeq: function
        • toSeq(): Keyed<keyof { horizontal: number; vertical: number }, number>

          Returns

          Keyed<keyof { horizontal: number; vertical: number }, number>
      • update: function
        • update<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              updater: (
                  value: { horizontal: number; vertical: number }[K],
              ) => { horizontal: number; vertical: number }[K],
          ): this

          Type Parameters

          Kextends keyof { horizontal: number; vertical: number }

          Parameters

          keyK
          updater(
          value: { horizontal: number; vertical: number }[K]
          ) => { horizontal: number; vertical: number }[K]

          Returns

          this
      • updateIn: function
        • updateIn(keyPath: Iterable<unknown>, updater: (value: unknown) => unknown): this

          Parameters

          keyPathIterable<unknown>
          updater(value: unknown) => unknown

          Returns

          this
      • wasAltered: function
        • wasAltered(): boolean

          Returns

          boolean

          See Also

          • Map#wasAltered

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

          Note: Not all methods can be used on a mutable collection or within withMutations! Only set may be used mutatively.

          Parameters

          mutator(mutable: this) => unknown

          Returns

          this

          See Also

          • Map#withMutations

    • zoom:
          | number
          | ZoomConfiguration
          | "AUTO"
          | "CUSTOM"
          | "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

  • Shallowly converts this Record to equivalent JavaScript Object.

    Returns

    { … }
    • 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: "AUTO" | "SINGLE" | "DOUBLE"

      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: "AUTO" | "SINGLE" | "DOUBLE"

      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: "CONTINUOUS" | "PER_SPREAD" | "DISABLED"

      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:
          | "CUSTOM"
          | "ANNOTATIONS"
          | "BOOKMARKS"
          | "DOCUMENT_OUTLINE"
          | "THUMBNAILS"
          | "SIGNATURES"
          | "LAYERS"
          | "ATTACHMENTS"
          | 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:
          | { [key: string]: any }
          | { ANNOTATIONS: AnnotationsSidebarOptions }
          | { LAYERS: LayersSidebarOptions }
          | { ATTACHMENTS: AttachmentsSidebarOptions }

      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],
          >;
          asImmutable(): this;
          asMutable(): this;
          clear(): this;
          delete<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
          ): this;
          deleteIn(keyPath: Iterable<unknown>): this;
          equals(other: unknown): boolean;
          get<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              notSetValue?: unknown,
          ): { horizontal: number; vertical: number }[K];
          get<T>(key: string, notSetValue: T): T;
          getIn(keyPath: Iterable<unknown>): unknown;
          has(key: string): key is "horizontal" | "vertical";
          hashCode(): number;
          hasIn(keyPath: Iterable<unknown>): boolean;
          merge(
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this;
          mergeDeep(
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this;
          mergeDeepIn(keyPath: Iterable<unknown>, ...collections: unknown[]): this;
          mergeDeepWith(
              merger: (oldVal: unknown, newVal: unknown, key: unknown) => unknown,
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this;
          mergeIn(keyPath: Iterable<unknown>, ...collections: unknown[]): this;
          mergeWith(
              merger: (
                  oldVal: unknown,
                  newVal: unknown,
                  key: keyof { horizontal: number; vertical: number },
              ) => unknown,
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this;
          remove<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
          ): this;
          removeIn(keyPath: Iterable<unknown>): this;
          set<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              value: { horizontal: number; vertical: number }[K],
          ): this;
          setIn(keyPath: Iterable<unknown>, value: unknown): this;
          toJS(): { horizontal: number; vertical: number };
          toJSON(): { horizontal: number; vertical: number };
          toObject(): { horizontal: number; vertical: number };
          toSeq(): Keyed<keyof { horizontal: number; vertical: number }, number>;
          update<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              updater: (
                  value: { horizontal: number; vertical: number }[K],
              ) => { horizontal: number; vertical: number }[K],
          ): this;
          updateIn(
              keyPath: Iterable<unknown>,
              updater: (value: unknown) => unknown,
          ): this;
          wasAltered(): boolean;
          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],
          >

          Returns

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

          Returns

          this

          See Also

          • Map#asImmutable

      • asMutable: function
        • asMutable(): this

          Returns

          this

          See Also

          • Map#asMutable

      • clear: function
        • clear(): this

          Returns a new instance of this Record type with all values set to their default values.

          Returns

          this
      • delete: function
        • delete<K extends keyof { horizontal: number; vertical: number }>(key: K): this

          Returns a new instance of this Record type with the value for the specific key set to its default value.

          Type Parameters

          Kextends keyof { horizontal: number; vertical: number }

          Parameters

          keyK

          Returns

          this
      • deleteIn: function
        • deleteIn(keyPath: Iterable<unknown>): this

          Parameters

          keyPathIterable<unknown>

          Returns

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

          Parameters

          otherunknown

          Returns

          boolean
      • get: function
        • get<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              notSetValue?: unknown,
          ): { horizontal: number; vertical: number }[K]

          Returns the value associated with the provided key, which may be the default value defined when creating the Record factory function.

          If the requested key is not defined by this Record type, then notSetValue will be returned if provided. Note that this scenario would produce an error when using Flow or TypeScript.

          Type Parameters

          Kextends keyof { horizontal: number; vertical: number }

          Parameters

          keyK
          notSetValueunknown
          Optional

          Returns

          { horizontal: number; vertical: number }[K]
        • get<T>(key: string, notSetValue: T): T

          Type Parameters

          T

          Parameters

          keystring
          notSetValueT

          Returns

          T
      • getIn: function
        • getIn(keyPath: Iterable<unknown>): unknown

          Parameters

          keyPathIterable<unknown>

          Returns

          unknown
      • has: function
        • has(key: string): key is "horizontal" | "vertical"

          Parameters

          keystring

          Returns

          key is "horizontal" | "vertical"
      • hashCode: function
        • hashCode(): number

          Returns

          number
      • hasIn: function
        • hasIn(keyPath: Iterable<unknown>): boolean

          Parameters

          keyPathIterable<unknown>

          Returns

          boolean
      • merge: function
        • merge(
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this

          Parameters

          ...collections(
          | Iterable<[string, unknown], any, any>
          | Partial<{ horizontal: number; vertical: number }>
          )[]

          Returns

          this
      • mergeDeep: function
        • mergeDeep(
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this

          Parameters

          ...collections(
          | Iterable<[string, unknown], any, any>
          | Partial<{ horizontal: number; vertical: number }>
          )[]

          Returns

          this
      • mergeDeepIn: function
        • mergeDeepIn(keyPath: Iterable<unknown>, ...collections: unknown[]): this

          Parameters

          keyPathIterable<unknown>
          ...collectionsunknown[]

          Returns

          this
      • mergeDeepWith: function
        • mergeDeepWith(
              merger: (oldVal: unknown, newVal: unknown, key: unknown) => unknown,
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this

          Parameters

          merger(oldVal: unknown, newVal: unknown, key: unknown) => unknown
          ...collections(
          | Iterable<[string, unknown], any, any>
          | Partial<{ horizontal: number; vertical: number }>
          )[]

          Returns

          this
      • mergeIn: function
        • mergeIn(keyPath: Iterable<unknown>, ...collections: unknown[]): this

          Parameters

          keyPathIterable<unknown>
          ...collectionsunknown[]

          Returns

          this
      • mergeWith: function
        • mergeWith(
              merger: (
                  oldVal: unknown,
                  newVal: unknown,
                  key: keyof { horizontal: number; vertical: number },
              ) => unknown,
              ...collections: (
                  | Iterable<[string, unknown], any, any>
                  | Partial<{ horizontal: number; vertical: number }>
              )[],
          ): this

          Parameters

          merger(
          oldVal: unknown,
          newVal: unknown,
          key: keyof { horizontal: number; vertical: number }
          ) => unknown
          ...collections(
          | Iterable<[string, unknown], any, any>
          | Partial<{ horizontal: number; vertical: number }>
          )[]

          Returns

          this
      • remove: function
        • remove<K extends keyof { horizontal: number; vertical: number }>(key: K): this

          Type Parameters

          Kextends keyof { horizontal: number; vertical: number }

          Parameters

          keyK

          Returns

          this
      • removeIn: function
        • removeIn(keyPath: Iterable<unknown>): this

          Parameters

          keyPathIterable<unknown>

          Returns

          this
      • set: function
        • set<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              value: { horizontal: number; vertical: number }[K],
          ): this

          Type Parameters

          Kextends keyof { horizontal: number; vertical: number }

          Parameters

          keyK
          value{ horizontal: number; vertical: number }[K]

          Returns

          this
      • setIn: function
        • setIn(keyPath: Iterable<unknown>, value: unknown): this

          Parameters

          keyPathIterable<unknown>
          valueunknown

          Returns

          this
      • toJS: function
        • toJS(): { horizontal: number; vertical: number }

          Deeply converts this Record to equivalent native JavaScript Object.

          Note: This method may not be overridden. Objects with custom serialization to plain JS may override toJSON() instead.

          Returns

          { horizontal: number; vertical: number }
          • horizontal: number

            The horizontal padding for left and right in pixel.

          • vertical: number

            The vertical padding for top and bottom in pixel.

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

          Shallowly converts this Record to equivalent native JavaScript Object.

          Returns

          { horizontal: number; vertical: number }
          • 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 }

          Shallowly converts this Record to equivalent JavaScript Object.

          Returns

          { horizontal: number; vertical: number }
          • horizontal: number

            The horizontal padding for left and right in pixel.

          • vertical: number

            The vertical padding for top and bottom in pixel.

      • toSeq: function
        • toSeq(): Keyed<keyof { horizontal: number; vertical: number }, number>

          Returns

          Keyed<keyof { horizontal: number; vertical: number }, number>
      • update: function
        • update<K extends keyof { horizontal: number; vertical: number }>(
              key: K,
              updater: (
                  value: { horizontal: number; vertical: number }[K],
              ) => { horizontal: number; vertical: number }[K],
          ): this

          Type Parameters

          Kextends keyof { horizontal: number; vertical: number }

          Parameters

          keyK
          updater(
          value: { horizontal: number; vertical: number }[K]
          ) => { horizontal: number; vertical: number }[K]

          Returns

          this
      • updateIn: function
        • updateIn(keyPath: Iterable<unknown>, updater: (value: unknown) => unknown): this

          Parameters

          keyPathIterable<unknown>
          updater(value: unknown) => unknown

          Returns

          this
      • wasAltered: function
        • wasAltered(): boolean

          Returns

          boolean

          See Also

          • Map#wasAltered

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

          Note: Not all methods can be used on a mutable collection or within withMutations! Only set may be used mutatively.

          Parameters

          mutator(mutable: this) => unknown

          Returns

          this

          See Also

          • Map#withMutations

    • zoom:
          | number
          | ZoomConfiguration
          | "AUTO"
          | "CUSTOM"
          | "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

toSeq

  • Returns

    Keyed<
    keyof { … },
    | number
    | boolean
    | { [key: string]: any }
    | NutrientViewer.Instance
    | "NOTE"
    | ZoomConfiguration
    | "AUTO"
    | "CUSTOM"
    | "FIT_TO_WIDTH"
    | "FIT_TO_VIEWPORT"
    | "FITTING"
    | "POPOVER"
    | "FLOATING"
    | "SINGLE"
    | "DOUBLE"
    | "CONTINUOUS"
    | "PER_SPREAD"
    | "DISABLED"
    | "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"
    | { … }
    | "ANNOTATIONS"
    | "BOOKMARKS"
    | "DOCUMENT_OUTLINE"
    | "THUMBNAILS"
    | "SIGNATURES"
    | "LAYERS"
    | "ATTACHMENTS"
    | { ANNOTATIONS: AnnotationsSidebarOptions }
    | { LAYERS: LayersSidebarOptions }
    | { ATTACHMENTS: AttachmentsSidebarOptions }
    | "START"
    | "END"
    | { … }
    | "IF_SIGNED"
    | "HAS_WARNINGS"
    | "HAS_ERRORS"
    | "NEVER"
    | null
    | undefined
    >

update

  • Type Parameters

    K
    extends keyof { … }

    Parameters

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

    Returns

    this

updateIn

  • Parameters

    keyPathIterable<unknown>
    updater(value: unknown) => unknown

    Returns

    this

wasAltered

  • Returns

    boolean

    See Also

    • Map#wasAltered

withMutations

  • Note: Not all methods can be used on a mutable collection or within withMutations! Only set may be used mutatively.

    Parameters

    mutator(mutable: this) => unknown

    Returns

    this

    See Also

    • Map#withMutations