Example
Create a text annotation
const annotation = new NutrientViewer.Annotations.TextAnnotation({
pageIndex: 0,
text: { format: "plain", value : "Welcome to\nNutrientViewer" },
font: "Helvetica",
isBold: true,
horizontalAlign: "center",
boundingBox: new NutrientViewer.Geometry.Rect({ left: 10, top: 20, width: 30, height: 40 }),
fontColor: NutrientViewer.Color.RED
});
See Also
Hierarchy
Constructors
Parameters
Properties
{ … } | null
| Property | Description |
|---|---|
| onPageClose | |
| onPageHidden | |
| onPageOpen | |
| onPageVisible | |
| onPointerDown | |
| onPointerEnter | |
| onPointerLeave | |
| onPointerUp |
APStreamCache
Optional background color that will fill the complete bounding box.
Default Value
null| "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"Optional border color that will be used for the text border and the line for text annotations
of type callout. It will be not be rendered if the callout property is not set.
Default Value
nullPosition 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
canSetGroup
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.
The ID of the user who created the annotation, as determined by the
authenticated user (the user_id claim of the JWT) that created it.
Unlike creatorName, which the client supplies, this is assigned by Document Engine from the authenticated session, so a client cannot cause a different author to be recorded. Setting it on an annotation you construct yourself only affects your own copy: it is not serialized, so it never reaches Document Engine or the underlying document.
It requires Instant sync against Document Engine 1.18 or later, and is null on Standalone,
on the deprecated REST provider, against earlier Document Engine versions, and for annotations
created without an authenticated user. It is also null when the server holds an author it
can no longer resolve to an upstream user id, which is indistinguishable from the cases above.
Setting isAnonymous does not
clear it. With Collaboration Permissions configured it is hidden from other users only;
without them it is not hidden at all, which matches how creatorName already behaves.
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.
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"
}
});
The name of the font family that should be used.
Fonts are client specific and determined during runtime. If a font is not found, we will automatically fall back to 'sans-serif'.
We test the following list at runtime. The first available font will be used as the default for all new text annotations: Helvetica, Arial, Calibri, Century Gothic, Consolas, Courier, Dejavu Sans, Dejavu Serif, Georgia, Gill Sans, Impact, Lucida Sans, Myriad Pro, Open Sans, Palatino, Tahoma, Times New Roman, Trebuchet, Verdana, Zapfino, Comic Sans.
Default Value
"Helvetica"A NutrientViewer.Color for the visible glyphs, or null for transparent color.
Default Value
Color.BLACKThe font size in page size pixels. Per default, we use values between 10 and 192 inclusive in the UI.
The text will scale when you zoom in.
Default Value
18group
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.
The horizontal alignment of the text inside the bounding box. Can be either one of:
leftcenterright
This is equal to the CSS text-align property.
Default Value
"left"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
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.
isEditable
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.
When the annotation is modified through Nutrient Web SDK, we will set this flag whenever the whole text fits the bounds of the annotation without overflowing.
Default Value
If true, the font will be italic if the font family supports this.
Default Value
falselineSpacing
The spacing between lines of text, in PDF points. This is the total line height (baseline to baseline), independent of the font size.
Default Value
nullThe annotation flag that prevents the annotation from being modified.
Default Value
falseThe annotation flag that prevents the annotation content from being modified.
Default Value
falseAn 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.
The annotation flag that prevents the annotation from being printed.
Default Value
falseAn 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.
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 noPrint flag.
Default Value
falseWhen set, the annotation will not scale up in the page when it's zoomed in.
The flag doesn't have an effect when the page is zoomed out to a zoom level less than 1.
The flag is not currently supported when the callout property is set.
Default Value
falseA transparency value that is applied to the complete annotation. The value is capped between 0 and 1 inclusive.
Default Value
1The 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.
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
nullThe counter-clockwise rotation value in degrees relative to the rotated PDF page. Inserting an
annotation with a rotation value of 0 will make it appear in the same direction as the UI
appears, when no NutrientViewer.ViewState#pagesRotation is set.
Text annotations support free rotation using integers between 0° and 359°. Negative values or values above 359 are normalized to this interval. Attempting to use non-integer values will result in an error.
Default Value
0An optional annotation subject, representing a short description of the subject being addressed by the annotation. This property has no effect on the annotation rendering.
The visible contents in plain text/xhtml formats.
We use a simple newline delimiter \n for multi
line texts in case of plain text. A trailing newline (e.g. foobar\n) will result in an additional line.
In case of XHTML, we support the following tags:
<b>: Bold<i>: Italic<span>: Font color, background color and underline using thestyleattribute (e.g.<span style="color: red; background-color: blue; text-decoration: underline">Hello</span>)p: Paragraph. You can use this to add a newline between paragraphs.
| Property | Description |
|---|---|
| format | |
| value |
Example
Get the text value of a text annotation
const { value, format } = annotation.text;
Default Value
{ format: "plain", value: "" }The vertical alignment of the text inside the bounding box. Can be either one of:
topcenterbottom
Default Value
"top"fontSizePresets
isEditable
readableName
Immutable Record API
24
asImmutable
- Deprecated
Returns
thisDeprecated
Not part of the collection API the Nutrient Web SDK supports. Build the value once, or use withMutations().
See Also
Map#asImmutable
asMutable
- Deprecated
Returns
thisDeprecated
Not part of the collection API the Nutrient Web SDK supports. Use withMutations().
See Also
Map#asMutable
Returns a new instance of this Record type with all values set to their default values.
Returns
this
delete<K extends keyof { … }>(key: K): this
Returns a new instance of this Record type with the value for the specific key set to its default value.
Returns a new instance of this Record type with the value at the given key path removed.
Also available as
removeIn.Parameters
keyPathIterable<unknown>Returns
this
Parameters
otherunknownReturns
boolean
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.
Parameters
keyPathIterable<unknown>notSetValueunknownOptionalReturns
unknown
Parameters
keyunknownReturns
boolean
mergeIn
removeIn
- Deprecated
Parameters
keyPathIterable<unknown>Returns
thisDeprecated
Not part of the collection API the Nutrient Web SDK supports. Use deleteIn(), or update() followed by delete().
Parameters
keyPathIterable<unknown>valueunknownReturns
this
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
{ … }
[key: string]: unknown
action: NutrientViewer.Actions.Action | null
additionalActions:
| {
onPageClose?: NutrientViewer.Actions.Action;
onPageHidden?: NutrientViewer.Actions.Action;
onPageOpen?: NutrientViewer.Actions.Action;
onPageVisible?: NutrientViewer.Actions.Action;
onPointerDown?: NutrientViewer.Actions.Action;
onPointerEnter?: NutrientViewer.Actions.Action;
onPointerLeave?: NutrientViewer.Actions.Action;
onPointerUp?: NutrientViewer.Actions.Action;
}
| nullAPStreamCache: { cache: string } | { attach: string } | undefined
backgroundColor: NutrientViewer.Color | null
blendMode:
| "normal"
| "multiply"
| "screen"
| "overlay"
| "darken"
| "lighten"
| "colorDodge"
| "colorBurn"
| "hardLight"
| "softLight"
| "difference"
| "exclusion"borderColor: NutrientViewer.Color | null
borderStyle: "solid" | "dashed" | "beveled" | "inset" | "underline" | null
borderWidth: number | null
boundingBox: NutrientViewer.Geometry.Rect | null
callout: Callout | null
canReply: boolean | undefined
canSetGroup: boolean | undefined
createdAt: Date | null
createdBy: string | null
creatorName: string | null
customData: Record<string, unknown> | null
enrichment: AnnotationEnrichmentJSON | null | undefined
font: string
fontColor: NutrientViewer.Color | null
fontSize: number | null
group: string | null | undefined
hidden: boolean | null
horizontalAlign: "left" | "center" | "right"
id: string | null
isAnonymous: boolean
isBold: boolean | null
isCommentThreadRoot: boolean
isDeletable: boolean | undefined
isEditable: boolean | undefined
isFitting: boolean
isItalic: boolean | null
isUnderline: boolean | null
lineSpacing: number | null
The spacing between lines of text, in PDF points. This is the total line height (baseline to baseline), independent of the font size.
Default Value
nulllocked: boolean | null
lockedContents: boolean | null
name: string | null
noPrint: boolean | null
noRotate: boolean
note: string | null
noView: boolean | null
noZoom: boolean
opacity: number | null
pageIndex: number | null
pdfObjectId: number | null
readOnly: boolean | null
rotation: number
subject: string | null
text: { format: "xhtml" | "plain"; value: string | null }
updatedAt: Date | null
verticalAlign: "center" | "top" | "bottom"
Shallowly converts this Record to equivalent native JavaScript Object.
Returns
{ … }
[key: string]: unknown
action: NutrientViewer.Actions.Action | null
additionalActions:
| {
onPageClose?: NutrientViewer.Actions.Action;
onPageHidden?: NutrientViewer.Actions.Action;
onPageOpen?: NutrientViewer.Actions.Action;
onPageVisible?: NutrientViewer.Actions.Action;
onPointerDown?: NutrientViewer.Actions.Action;
onPointerEnter?: NutrientViewer.Actions.Action;
onPointerLeave?: NutrientViewer.Actions.Action;
onPointerUp?: NutrientViewer.Actions.Action;
}
| nullAPStreamCache: { cache: string } | { attach: string } | undefined
backgroundColor: NutrientViewer.Color | null
blendMode:
| "normal"
| "multiply"
| "screen"
| "overlay"
| "darken"
| "lighten"
| "colorDodge"
| "colorBurn"
| "hardLight"
| "softLight"
| "difference"
| "exclusion"borderColor: NutrientViewer.Color | null
borderStyle: "solid" | "dashed" | "beveled" | "inset" | "underline" | null
borderWidth: number | null
boundingBox: NutrientViewer.Geometry.Rect | null
callout: Callout | null
canReply: boolean | undefined
canSetGroup: boolean | undefined
createdAt: Date | null
createdBy: string | null
creatorName: string | null
customData: Record<string, unknown> | null
enrichment: AnnotationEnrichmentJSON | null | undefined
font: string
fontColor: NutrientViewer.Color | null
fontSize: number | null
group: string | null | undefined
hidden: boolean | null
horizontalAlign: "left" | "center" | "right"
id: string | null
isAnonymous: boolean
isBold: boolean | null
isCommentThreadRoot: boolean
isDeletable: boolean | undefined
isEditable: boolean | undefined
isFitting: boolean
isItalic: boolean | null
isUnderline: boolean | null
lineSpacing: number | null
The spacing between lines of text, in PDF points. This is the total line height (baseline to baseline), independent of the font size.
Default Value
nulllocked: boolean | null
lockedContents: boolean | null
name: string | null
noPrint: boolean | null
noRotate: boolean
note: string | null
noView: boolean | null
noZoom: boolean
opacity: number | null
pageIndex: number | null
pdfObjectId: number | null
readOnly: boolean | null
rotation: number
subject: string | null
text: { format: "xhtml" | "plain"; value: string | null }
updatedAt: Date | null
verticalAlign: "center" | "top" | "bottom"
toSeq
- Deprecated
Returns
Keyed<string, unknown>Deprecated
Not part of the collection API the Nutrient Web SDK supports. Use entries().
Note: Not all methods can be used on a mutable collection or within
withMutations! Onlysetmay be used mutatively.Parameters
mutator(mutable: this) => unknownReturns
thisSee Also
Map#withMutations
A free form text that will be rendered inside the bounding box. It has no open or closed state - instead of being displayed in a pop-up window, the text is always visible.
Fonts are client specific and determined during runtime. If a font is not found, we will automatically fall back to a sans serif font.