Nutrient Web SDK

v0.0.0-dev

ReferenceNutrientViewerAnnotationsInkAnnotation

Class InkAnnotation

Ink annotations are used for free hand drawings on a page. They can contain multiple segments (see the definition of lines below). Points within the same segment are connected to a line.

Ink annotations are only selectable around their visible lines. This means that you can create a page full of line annotations while annotations behind the ink annotation are still selectable.

Right now, ink annotations are implemented using SVG images. This behavior is object to change.

Class

Example

Create an ink annotation that displays a cross

const annotation = new NutrientViewer.Annotations.InkAnnotation({
  pageIndex: 0,
  lines: NutrientViewer.Immutable.List([
    NutrientViewer.Immutable.List([
      new NutrientViewer.Geometry.DrawingPoint({ x: 5,  y: 5 }),
      new NutrientViewer.Geometry.DrawingPoint({ x: 95, y: 95}),
    ]),
    NutrientViewer.Immutable.List([
      new NutrientViewer.Geometry.DrawingPoint({ x: 95, y: 5 }),
      new NutrientViewer.Geometry.DrawingPoint({ x: 5,  y: 95}),
    ])
  ]),
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 0,
    top: 0,
    width: 100,
    height: 100,
  }),
});

See Also

Hierarchy

AnnotationInkAnnotation

Constructors

new InkAnnotation(options)

  • Parameters

    options
    Partial<{ … }>
    Optional

Properties

additionalActions

{ … } | null
PropertyDescription
onPageClose
onPageHidden
onPageOpen
onPageVisible
onPointerDown
onPointerEnter
onPointerLeave
onPointerUp

APStreamCache

Optional
{ cache: string } | { attach: string }

backgroundColor

NutrientViewer.Color | null

Optional background color that will fill the complete bounding box.

Default Value

null

blendMode


    | "normal"
    | "multiply"
    | "screen"
    | "overlay"
    | "darken"
    | "lighten"
    | "colorDodge"
    | "colorBurn"
    | "hardLight"
    | "softLight"
    | "difference"
    | "exclusion"

The blend mode defines how the color of the annotation will be applied to its background.

Default Value

"normal"

boundingBox

NutrientViewer.Geometry.Rect

Position of this annotation on the page. It's necessary that this spans all visible points of the annotation, otherwise hit testing and other features may not work.

canReply

Optional
boolean

canSetGroup

OptionalReadonly
boolean

This property defines whether the user has permission to edit the group of this annotation.

It is only available when collaboration permissions is enabled on Server-Backed deployments.

createdAt

Date

The date of the annotation creation.

creatorName

string | null

The name of the creator of the annotation. This is a general purpose string which can easily be spoofed and might not reflect the actual creator of the annotation.

customData

Record<string, unknown> | null

Annotations can store additional user-specified data.

NutrientViewer will not use or evaluate customData in the UI directly. You have full control over this property. For new annotations, this defaults to null.

customData will be stored as JSON through JSON.serialize() and JSON.parse(), and so must be a plain JSON-serializable object.

Example

Adding a new EllipseAnnotation with custom data attached:

const annotation = new NutrientViewer.Annotations.EllipseAnnotation({
  pageIndex: 0,
  boundingBox: new NutrientViewer.Geometry.Rect({
    top: 10,
    left: 10,
    width: 100,
    height: 100
  }),
  customData: {
    circleId: "my-circle"
  }
});

group

Optional
string | null

This property is used to define the permission scope for this annotation.

It is only available when collaboration permissions is enabled on Server-Backed deployments.

hidden

boolean

If set, do not display or print the annotation or allow it to interact with the user.

Default Value

false

id

string

A unique identifier to describe the annotation. When an annotation is created in the UI, the viewer has to generate a unique ID.

When changes are saved to the underlying annotation provider, we call Instance#ensureChangesSaved to make sure the annotation has been persisted from the provider.

isDeletable

OptionalReadonly
boolean

This property defines whether this annotation can be deleted or not. The value of this field depends on the set of collaboration permissions defined in the JWT token.

It is only available when collaboration permissions is enabled on Server-Backed deployments.

isDrawnNaturally

boolean

NutrientViewer's Natural Drawing mode. This value will currently not effect rendering on NutrientViewer for Web.

Default Value

false

isEditable

OptionalReadonly
boolean

This property defines whether this annotation can be edited or not. The value of this field depends on the set of collaboration permissions defined in the JWT token.

It is only available when collaboration permissions is enabled on Server-Backed deployments.

isSignature

boolean

When an ink annotation is created via the signature UI, this flag is set to true.

Default Value

false

lines

NutrientViewer.Immutable.List<
    NutrientViewer.Immutable.List<NutrientViewer.Geometry.DrawingPoint>,
>

A list of line segments. Every segment consists again of a list of points with additional intensity information.

The two nested lists are required since one ink annotation can consist of multiple lines. Within one segment, points will be connected using lines or curves.

We use NutrientViewer.Geometry.DrawingPoint for an additional intensity value (usually the pressure of a pointer device) that is used to reconstruct the naturally drawn image. If a device without intensity is used, the default intensity of 0.5 will be used.

If no lines are present, the annotation will not be visible.

Default Value

NutrientViewer.Immutable.List() Empty list

lineWidth

number

The width of the lines in page size pixels. Per default, we use values between 1 and 40 in the UI.

The line width will scale when you zoom in.

Default Value

5

locked

boolean

The annotation flag that prevents the annotation from being modified.

Default Value

false

lockedContents

boolean

The annotation flag that prevents the annotation content from being modified.

Default Value

false

name

string | null

An optional field that may be used to identify the annotation.

By default, we'll set that to the same value as the automatically generated Annotation#id.

noPrint

boolean

The annotation flag that prevents the annotation from being printed.

Default Value

false

noRotate

boolean

note

string | null

An optional note that can be set on any annotation.

This value is displayed in the Nutrient Web SDK UI for all annotations except NoteAnnotation, TextAnnotation, WidgetAnnotation and CommentMarkerAnnotation.

noView

boolean

The annotation flag that prevents the annotation from being rendered in the UI.

The annotation may still be part of the printed page, depending of the value of the Annotations.Annotation#noPrint flag.

Default Value

false

noZoom

boolean

opacity

number

A transparency value that is applied to the complete annotation. The value is capped between 0 and 1 inclusive.

Default Value

1

pageIndex

number

The page index on which the annotation is placed. It's important to notice that an annotation can only ever be on one page. If you create for example an ink annotation with lines on two pages, two annotation records will be created.

pageIndex is zero-based and has a maximum value of totalPageCount - 1.

pdfObjectId

number | null

When the annotation is extracted directly from a PDF file, the pdfObjectId refers to the identifier that was used in the PDF document.

This ID is optional since newly created annotations using the SYNCProvider annotation provider won't have a pdfObjectId assigned.

Default Value

null

readOnly

boolean

The annotation flag that makes the annotation read only.

Default Value

false

rotation

number

signatureFormFieldName

string | null

The name of the signature form field this signature annotation fills.

Default Value

null

strokeColor

NutrientViewer.Color | null

A NutrientViewer.Color for the visible line

Default Value

Color.BLUE

subject

string | null

An optional annotation subject, representing a short description of the subject being addressed by the annotation. This property has no effect on the annotation rendering.

updatedAt

Date

The date of last annotation update.

readableName

Static
string

Immutable Record API

24

asImmutable

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

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

    Returns

    { … }[K]

getIn

  • Parameters

    keyPathIterable<unknown>
    notSetValueunknown
    Optional

    Returns

    unknown

has

  • Parameters

    keyunknown

    Returns

    boolean

merge

  • Parameters

    ...collections
    Partial<{ … }>[]

    Returns

    this

mergeDeep

  • Parameters

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

    Returns

    this

mergeDeepIn

  • Parameters

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

    Returns

    this

mergeDeepWith

  • Parameters

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

    Returns

    this

mergeIn

  • Parameters

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

    Returns

    this

mergeWith

  • Parameters

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

    Returns

    this

removeIn

set

  • Type Parameters

    K
    extends keyof { … }

    Parameters

    keyK
    value
    { … }[K]

    Returns

    this

setIn

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

    { … }

toJSON

  • Shallowly converts this Record to equivalent native JavaScript Object.

    Returns

    { … }

toSeq

  • Returns

    Keyed<string, unknown>

update

  • Type Parameters

    K
    extends keyof { … }

    Parameters

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

    Returns

    this

updateIn

  • Parameters

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

    Returns

    this

  • Parameters

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

    Returns

    this

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