simple-dynamsoft-mcp 5.0.0 → 6.3.0

package/data/ddv-api-docs.json

@@ -1,1279 +0,0 @@
-{
-  "articles": [
-    
-    {
-      "title": null,
-      "url": "https://www.dynamsoft.com/document-viewer/docs/Hide_Tree_Page.html",
-      "content": "{%- if site.useJSVersionV3 -%}\n<div id=\"version_tree_list\">\n    <ul class=\"version-tree-container \" id=\"version_tree_latest_version\">\n        {%- include liquid_searchVersionTreeFile.html ver=\"latest version\" curPath=\"\" targetRelativePath=\"sidelist-full-tree.html\" -%}\n    </ul>\n    <span id=\"complete_loading_tree\"></span>\n</div>\n{%- elsif site.useVersionTree -%}\n    <div id=\"version_tree_list\">\n        {%- if site.edition -%}\n            {%- if site.edition == 'algorithm' -%}\n                {%- assign validVerInfo = site.data.product_version.version_info_list_algorithm -%}\n            {%- elsif site.edition == 'js' -%}\n                {%- assign validVerInfo = site.data.product_version.version_info_list_js -%}\n            {%- elsif site.edition == 'mobile' -%}\n                {%- assign validVerInfo = site.data.product_version.version_info_list_mobile -%}\n            {%- else -%}\n                {%- assign validVerInfo = site.data.product_version.version_info_list_desktop -%}\n            {%- endif -%}\n        {%- else -%}\n            {%- assign validVerInfo = site.data.product_version.version_info_list -%}\n        {%- endif -%}\n        {%- if site.data.product_version.useGroupedVersion -%}\n            {%- for verInfo in validVerInfo -%}\n                {%- if verInfo.child -%}\n                    {%- for childVersion in verInfo.child -%}\n                        {%- assign c_version = childVersion | downcase | strip -%}\n                        {%- if c_version contains '_' -%}\n                            {%- assign arr = childVersion | split: \"_\" -%}\n                            {%- assign c_version = arr.first -%}\n                        {%- endif -%}\n                        {%- if c_version contains 'latest version' -%}\n                            {%- assign c_version = 'latest version' -%}\n                        {%- endif -%}\n                        {%- assign curId = \"version_tree_\" | append: c_version | replace: \" \", \"_\" | downcase -%}\n                        <ul class=\"version-tree-container \" id=\"{{ curId }}\">\n                            {%- include liquid_searchVersionTreeFile.html ver=childVersion curPath=\"\" targetRelativePath=\"sidelist-full-tree.html\" -%}\n                        </ul>\n                    {%- endfor -%}\n                {%- else -%}\n                    {%- assign c_version = verInfo.value | downcase | strip -%}\n                    {%- if c_version contains 'latest version' -%}\n                        {%- assign c_version = 'latest version' -%}\n                    {%- endif -%}\n                    {%- assign curId = \"version_tree_\" | append: c_version | replace: \" \", \"_\" | downcase -%}\n                    <ul class=\"version-tree-container \" id=\"{{ curId }}\">\n                    {%- include liquid_searchVersionTreeFile.html ver=verInfo.value curPath=\"\" targetRelativePath=\"sidelist-full-tree.html\" -%}\n                    </ul>\n                {%- endif -%}\n            {%- endfor -%}\n        {%- else -%}\n            {%- for verInfo in validVerInfo -%}\n                {%- assign c_version = verInfo | downcase | strip -%}\n                {%- if c_version contains 'latest version' -%}\n                    {%- assign c_version = 'latest version' -%}\n                {%- endif -%}\n                {%- assign curId = \"version_tree_\" | append: c_version | replace: \" \", \"_\" | downcase -%}\n                <ul class=\"version-tree-container \" id=\"{{ curId }}\">\n                {%- include liquid_searchVersionTreeFile.html ver=verInfo curPath=\"\" targetRelativePath=\"sidelist-full-tree.html\" -%}\n                </ul>\n            {%- endfor -%}\n        {%- endif -%}\n        <span id=\"complete_loading_tree\"></span>\n    </div>\n{%- endif -%}\n",
-      "breadcrumb": null
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Getting Started - Adding the dependency",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/gettingstarted/add_dependency.html",
-      "content": "# Adding the dependency\n\nTo use the SDK, we need to include the package below.\n\n- `dynamsoft-document-viewer`: Required, it provides functions to create the viewers.\n\n\n## Use a CDN\n\nThe simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN.\n\n- jsDelivr\n\n  ```html\n  <script src=\"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.js\"></script>\n  <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.css\">\n  ```\n\n- UNPKG\n\n  ```html\n  <script src=\"https://unpkg.com/dynamsoft-document-viewer@latest/dist/ddv.js\"></script>\n  <link rel=\"stylesheet\" href=\"https://unpkg.com/dynamsoft-document-viewer@latest/dist/ddv.css\">\n  ```\n\n## Host the SDK yourself\n\nBesides using the CDN, you can also download the Solution and host related files on your own website/server before including it in your application.\n\nOptions to download the SDK:\n\n- From the website\n\n  [Download the JavaScript ZIP package](https://www.dynamsoft.com/document-viewer/downloads)\n\n- yarn\n\n  ```cmd\n  yarn add dynamsoft-document-viewer@latest\n  ```\n\n- npm\n\n  ```cmd\n  npm install dynamsoft-document-viewer@latest\n  ```\n\nDepending on how you downloaded the SDK and where you put it, you can typically include it like this:\n\n  ```html\n  <!-- Upon extracting the zip package into your project, you can generally include it in the following manner -->\n  <script src=\"./Your-Folder/dist/ddv.js\"></script>\n  <link rel=\"stylesheet\" href=\"./Your-Folder/dist/ddv.css\">\n  ```\n\nor\n\n  ```html\n  <script src=\"./node_modules/dynamsoft-document-viewer/dist/ddv.js\"></script>\n  <link rel=\"stylesheet\" href=\"./node_modules/dynamsoft-document-viewer/dist/ddv.css\">\n  ```\n\nor\n\n  ```typescript\n  import { DDV } from 'dynamsoft-document-viewer';\n  import \"dynamsoft-document-viewer/dist/ddv.css\";\n  ```",
-      "breadcrumb": "Adding the dependency"
-    },
-    
-    {
-      "title": "Angular Document Viewer - Dynamsoft Document Viewer Documentation",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/gettingstarted/angular.html",
-      "content": "# How to Integrate Document Viewer into an Angular Project\n\nThis guide will show you how to integrate Dynamsoft Document Viewer into an Angular project.\n\nYou can can download the sample on GitHub:\n\n![Download](/assets/imgs/download.png)[Angular Helloworld](https://github.com/Dynamsoft/document-viewer-samples/blob/main/hello-world/angular)\n\n## Preparation\n\nMake sure you have node and Angular CLI (v17 in this guide) installed.\n\n## New Project\n\nCreate a new Angular project.\n\n```bash\nng new ddv-angular\n```\n\n## Add Dependencies\n\n1. Install Dynamsoft Document Viewer.\n\n   ```bash\n   npm install dynamsoft-document-viewer\n   ```\n   \n2. Modify `angular.json` to copy the resources of Dynamsoft Document Viewer and import its CSS.\n\n\n   ```json\n   {\n     \"assets\": [\n       \"src/favicon.ico\",\n       \"src/assets\",\n       {\n         \"glob\": \"**/*\",\n         \"input\": \"node_modules/dynamsoft-document-viewer/dist\",\n         \"output\": \"/dynamsoft-document-viewer/dist\"\n       }\n     ],\n     \"styles\": [\n       \"src/styles.css\",\n       \"node_modules/dynamsoft-document-viewer/dist/ddv.css\"\n     ]\n   }\n   ```\n\n## Create a Document Viewer Component\n\n1. Generate a viewer component.\n\n   ```bash\n   ng generate component viewer\n   ```\n   \n2. Add the following HTML code to `viewer.component.html`.\n\n   ```html\n   <div id=\"container\"></div>\n   ```\n\n3. Add the following CSS code to `viewer.component.css`.\n\n   ```css\n   :host, #container {\n       width: 100%;\n       height: 100%;\n   }\n   ```\n\n4. Add the following JavaScript code to `viewer.component.ts`. It will bind Edit Viewer to a container. A license is set here. You can apply for a 30-day trial on [this page](https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv).\n\n   ```ts\n   import { Component } from '@angular/core';\n   import { DDV } from 'dynamsoft-document-viewer';\n\n   @Component({\n     selector: 'app-viewer',\n     standalone: true,\n     imports: [],\n     templateUrl: './viewer.component.html',\n     styleUrl: './viewer.component.css'\n   })\n\n   export class ViewerComponent {\n     async ngOnInit() {\n       DDV.on('error', (e) => {\n         alert(e.message)\n       })\n       \n       // Public trial license which is valid for 24 hours\n       DDV.Core.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';\n       DDV.Core.engineResourcePath = '/dynamsoft-document-viewer/dist/engine';\n       DDV.Core.loadWasm();\n       await DDV.Core.init();\n\n       const viewer = new DDV.EditViewer({\n         container: 'container'\n       });\n     }\n   }\n   ```\n\n## Use the Document Viewer Component\n\n\n1. Open `app.component.html` and add the viewer component.\n\n   ```html\n   <style></style>\n   <h1>Hello World for Angular</h1>\n   <app-viewer\n   ></app-viewer>\n   <router-outlet></router-outlet>\n   ```\n\n2. Import the viewer component in `app.component.ts`.\n\n   ```js\n   import { ViewerComponent } from './components/viewer/viewer.component';\n   \n   @Component({\n       selector: 'app-root',\n       standalone: true,\n       templateUrl: './app.component.html',\n       styleUrl: './app.component.css',\n       imports: [\n         CommonModule,\n         RouterOutlet,\n         ViewerComponent,\n       ],\n   })\n   ```\n   \n3. Add CSS in `app.component.css`.\n\n   ```css\n   :host {\n       width: 100%;\n       height: 100%;\n       display: flex;\n       flex-direction: column;\n   }\n   ```\n\nRun the app with the following command and you should see the viewer mounted in your application!\n\n```bash\nng serve\n```\n\n## Other Samples\n\nYou can find other samples on [this GitHub repo](https://github.com/Dynamsoft/document-viewer-samples/).\n\n\n\n",
-      "breadcrumb": "Angular"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features - Annotation",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/viewers/annotation.html",
-      "content": "# Annotation\n\nStarting from DDV 2.0, Annotation functionality is supported. This guide introduces some of the key Annotation features. The following functionalities can all be achieved through bulit-in Elements which are related to annotation functionality, this guide only focuses on programming methods.\n\nIt is important to note that annotations on the page can be displayed in the UI of either the EditViewer or the BrowseViewer, but they can only be processed through the UI in the EditViewer. Additionally, [built-in Elements related to annotation functionality]({{ site.ui }}default_elements.html#edit-viewer) can only be configured within the UiConfig of the EditViewer.\n\n## Supported annotation types\n\nUp to now, the annotation types supported by DDV are as follows:\n\n- [Rectangle]({{ site.api }}class/annotation/rectangle.html)\n- [Ellipse]({{ site.api }}class/annotation/ellipse.html)\n- [Polygon]({{ site.api }}class/annotation/polygon.html)\n- [Polyline]({{ site.api }}class/annotation/polyline.html)\n- [Line]({{ site.api }}class/annotation/line.html)\n- [Ink]({{ site.api }}class/annotation/ink.html)\n- [TextBox]({{ site.api }}class/annotation/textbox.html)\n- [TextTypewriter]({{ site.api }}class/annotation/texttypewriter.html)\n- [Stamp]({{ site.api }}class/annotation/stamp.html)\n\n## Create a specified type annotation instance\n\nTo add an annotation to the page, first of all, you need to create an annotation instance. Take the rectangle annotation as an example,\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst rect = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"rectangle\"); // Create a default Rectangle annotation instance.\n```\n\nThe following properties of the annotation can be accessed from the created instance.\n\n- Annotation Uid\n    \n    Each annotation possesses a unique annotation uid. \n    \n    ```typescript\n    const annotUid = rect.uid;\n    ```\n\n    if the annotation is deleted, the `uid` will return `''`.\n\n- Page uid where the annotation is located\n\n    ```typescript\n    const annotPageUid = rect.pageUid;\n    ```\n\n    if the annotation is deleted, the `pageUid` will return `''`.\n{% comment %}\n\n- Axis-aligned bounding box (AABB)\n\n    ```typescript\n    const annotAabb = rect.aabb;\n    ```\n{% endcomment %}\n\n- Creation date & Modification date\n\n    ```typescript\n    const creationDate = rect.creationDate; //D:YYYYMMDDHHmmSSOHH'mm'\n    const modificationDate = rect.modificationDate; //D:YYYYMMDDHHmmSSOHH'mm'\n    ```\n\n    if the annotation is deleted, the `creationDate` will return `''`.\n\n    If the annotation is not be modified after creating, `modificationDate` equals to `creationDate`.\n\n## Modify the annotation options while creating\n\nIf no specific options are passed during the creation of the annotation instance, the generated annotation will have default options.\n\nIf you wish to create a custom-configured annotation, you can pass in the specified configuration during creation.\n\nFor example, to create a rectangle annotation whose border color is red and background is green.\n\n```typescript\nconst rectOptions = {\n    borderColor: \"red\",\n    background: \"green\",\n};\n\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\n\nconst rect = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"rectangle\", rectOptions);\n```\n\n## Modify the annotation options dynamically after creating\n\nAfter creating the annotation, if you want to dynamically modify its configuration, you can use `updateOptions()` method.\n\nFor example, to modify an existing rectangle annotation. \n\n```typescript\nconst newRectOptions = {\n    borderWidth: 2.66,\n};\n\nrect.updateOptions(newRectOptions);\n```\n\nEven after the annotation has been created by [`createAnnotation()`]({{ site.api }}class/annotationmanager.html#createAnnotation), updating the options will lead to instant changes in the displayed annotation on the page.\n\n### Create an annotation instance after image cropping\n\nAfter cropping, if no specific options are passed during the creation of the annotation instance, the generated annotation will use default options, which might result in it being invisible.\n\nIf you want the annotation to be visible, you can pass specific configurations during its creation.\n\nFor example, after cropping an image, if you wish to create a rectangle annotation at position (10, 10) within the visible area.\n\n```typescript\nconst pageData = await editViewer.currentDocument.getPageData(editViewer.getCurrentPageUid());\n\nconst rectOptions = {\n    x: pageData.cropBox.left + 10,\n    y: pageData.cropBox.top + 10,\n};\n\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\n\nconst rect = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"rectangle\", rectOptions);\n```\n\n## More features\n\n### Add image to the page by using Stamp Annotation\n\nObserving the structure of [`StampAnnotationOptions`]({{ site.api }}interface/annotationinterface/stampannotationoptions.html), the data type of stamp is `EnumStampIcon` or `Blob`. When stamp is set to `EnumStampIcon`, it indicates that the generated annotation will be displayed as a standard business stamp icon, with the default value being `DRAFT`. When stamp is set to a Blob, such as the blob of a custom image, it means the annotation will be displayed as an image.\n\n\nThe supported types of standard business stamps are as follows:\n\n| EnumStampIcon | Corresponding stamp |\n| ------------- | ------------------- |\n| REJECTED      |                     |\n| ACCEPTED      |                     |\n| INITAL_HERE   |                     |\n| SIGN_HERE     |                     |\n| WITNESS       |                     |\n| APPROVED      |                     |\n| NOT_APPROVED  |                     |\n| DRAFT         |                     |\n| FINAL         |                     |\n| COMPLETED     |                     |\n| CONFIDENTIAL  |                     |\n| VOID          |                     |\n\n\n### Configure the styling for the part content of text within TextBox annotation or TextTypewriter annotation\n\nThe `textContents` attribute in the [`TextBoxAnnotationOptions`]({{ site.api }}interface/annotationinterface/textboxannotationoptions.html) and [`TextTypewriterAnnotationOptions`]({{ site.api }}interface/annotationinterface/texttypewriterannotationoptions.html) accepts an array of [`TextContent`]({{ site.api }}interface/annotationinterface/textcontent.html), which means that even within the same text annotation, you can configure specified text content with different styles.\n\nFor example,\n\n```typescript\nconst testTextContents = [\n    {\n        content: \"Dynamsoft Document Viewer \",\n        color: \"red\",\n    },\n    {\n        content: \"Annotation feature\",\n        color: \"green\",\n        underline: true,\n    }\n];\n\nconst textBoxAnnotationOptions = {\n    textContents: testTextContents,\n};\n\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\n\nconst textBox = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"textBox\", textBoxAnnotationOptions);\n```\n\n## Add the created annotation to the specified page\n\nPlease refer to [Annoatation management]({{ site.features }}datamanagement/annotmanagement.html).",
-      "breadcrumb": "Edit Viewer"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface AnnotationConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationconfig.html",
-      "content": "# AnnotationConfig\n\n## Syntax\n\n```typescript\ninterface AnnotationConfig {\n    toolbarConfig?: ToolbarConfig;\n    paletteConfig?: PaletteConfig;\n    annotationSelectionStyle?: AnnotationSelectionStyle;\n    inkCreateDelay?: number; \n    showOnTopWhenSelected?: boolean; \n    enableContinuousDrawing?: boolean;\n    defaultStyleConfig?: AnnotationDrawingStyleConfig;\n}\n```\n\n## Attributes\n\n### toolbarConfig\n\nThe configurations of floating toolbar for annotation, please refer to [`ToolbarConfig`]({{ site.api }}interface/annotationinterface/toolbarconfig.html).\n\n### paletteConfig\n\nThe configurations of floating palette for annotation, please refer to [`PaletteConfig`]({{ site.api }}interface/annotationinterface/paletteconfig.html).\n\n### annotationSelectionStyle\n\nThe style of annotation selection, please refer to [`AnnotationSelectionStyle`]({{ site.api }}interface/styleinterface/annotationselectionstyle.html).\n\n### inkCreateDelay\n\nSpecify the ink creation delay. The delay allows users to create the annotation with multiple strokes. Unit is millisecond.\n\nDefault value: 1000\n\n[`annotationsAdded`]({{ site.api }}class/annotationmanager.html#annotationsadded) event will be triggered delay.\n\nOnly works for the built-in UI.\n\n### showOnTopWhenSelected\n\nWhether to show the annotation(s) on top layer when it is selected. \n\nDefault value: `false`\n\n### enableContinuousDrawing\n\nWhether to continue drawing the annotation. This is invalid for the 'ink' type.\n\nDefault value: `false`\n\n### defaultStyleConfig\n\nThe initial style configurations for each type of annotation, please refer to [`AnnotationDrawingStyleConfig`](/api/interface/styleinterface/annotationdrawingstyleconfig.md)\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)\n",
-      "breadcrumb": "Interface AnnotationConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface AnnotationDrawingStyleConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/styleinterface/annotationdrawingstyleconfig.html",
-      "content": "# Interface\n\n```typescript\ninterface AnnotationDrawingStyleConfig {\n    rectangle?: RectangleStyle;\n    ellipse?: EllipseStyle;\n    polygon?: PolygonStyle;\n    polyline?: PolylineStyle;\n    line?: LineStyle;\n    ink?: InkStyle;\n    textBox?: TextBoxStyle;\n    textTypewriter?: TextTypewriterStyle;\n    stamp?: StampStyle;\n    highlight?: HighlightStyle;\n    underline?: UnderlineStyle;\n    strikeout?: StrikeoutStyle;\n}\n```\n\n## Attributes\n\n### rectangle\n\nThe default drawing style of rectangle annotation - see [`RectangleStyle`]({{ site.api }}interface/annotationinterface/rectanglestyle.html) for more details. If not set, this uses the default values of `RectangleStyle`.\n\n### ellipse\n\nThe default drawing style of ellipse annotation - see [`EllipseStyle`]({{ site.api }}interface/annotationinterface/ellipsestyle.html) for more details. If not set, this uses the default values of `EllipseStyle`.\n\n### polygon\n\nThe default drawing style of the polygon annotation - see [`PolygonStyle`]({{ site.api }}interface/annotationinterface/polygonstyle.html) for more details. If not set, this uses the default values of `PolygonStyle`.\n\n### polyline\n\nThe default drawing style of the polyline annotation - see [`PolylineStyle`]({{ site.api }}interface/annotationinterface/polylinestyle.html) for more details. If not set, this uses the default values of `PolylineStyle`.\n\n### line\n\nThe default drawing style of the line annotation - see [`LineStyle`]({{ site.api }}interface/annotationinterface/linestyle.html) for more details. If not set, this uses the default values of `LineStyle`.\n\n### textBox\n\nThe default drawing style of the textbox annotation - see [`TextBoxStyle`]({{ site.api }}interface/annotationinterface/textboxstyle.html) for more details. If not set, this uses the default values of `TextBoxStyle`.\n\n### textTypewriter\n\nThe default drawing style of the text typewriter annotation - see [`TextTypewriterStyle`]({{ site.api }}interface/annotationinterface/texttypewriterstyle.html) for more details. If not set, this uses the default values of `TextTypewriterStyle`.\n\n### stamp\n\nThe default drawing style of the stamp annotation - see [`StampStyle`]({{ site.api }}interface/annotationinterface/stampstyle.html) for more details. If not set, this uses the default values of `StampStyle`.\n\n### highlight\n\nThe default drawing style of the highlight annotation - see [`HighlightStyle`](/api/interface/annotationinterface/highlightstyle.md) for more details. If not set, this uses the default values of `HighlightStyle`.\n\n### underline\n\nThe default drawing style of the underline annotation - see [`UnderlineStyle`](/api/interface/annotationinterface/underlinestyle.md) for more details. If not set, this uses the default values of `UnderlineStyle`.\n\n### strikeout\n\nThe default drawing style of the strikeout annotation - see [`StrikeoutStyle`](/api/interface/annotationinterface/strikeoutstyle.md) for more details. If not set, this uses the default values of `StrikeoutStyle`.\n",
-      "breadcrumb": "Interface AnnotationDrawingStyleConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - AnnotationManager Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotationmanager.html",
-      "content": "# AnnotationManager Class\n\nThe `Dynamsoft.DDV.annotationManager` instance will be created automatically as soon as DDV is initialized. Please refer to [`annotationManager`]({{ site.api }}namespace/ddv.html#static-annotationmanager).\n\n## API Index\n\n**Methods**\n\n| API Name                       | Description                                                  |\n| ------------------------------ | ------------------------------------------------------------ |\n| [`createAnnotation()`](#createAnnotation)          | Create an annotation instance. |\n| [`getAnnotationsByUids()`](#getannotationsbyuids)   | Get annotations by annotation uids.                          |\n| [`getAnnotationsByPage()`](#getannotationsbypage)   | Get annotations in specified page.                           |\n| [`getAnnotationsByDoc()`](#getannotationsbydoc)    | Get all annotations in specified document.                   |\n| [`deleteAnnotations()`](#deleteannotations)      | Delete specified annotations.                                |\n| [`bringAnnotationForward()`](#bringannotationforward) | Bring the specified annotation forward.                      |\n| [`sendAnnotationBackward()`](#sendannotationbackward) | Send the specified annotation backward.                      |\n| [`bringAnnotationToFront()`](#bringannotationtofront) | Bring the specified annotation in front of all other annotations. |\n| [`sendAnnotationToBack()`](#sendannotationtoback)   | Send the specified annotation behind all other annotations.  |\n{% comment %}\n| [`importXfdf()`](#importxfdf)             | Import annotations in an XFDF(XML) string to the specified document. |\n| [`exportXfdf()`](#exportxfdf)             | Export all annotations from the specified document as an XFDF(XML) string. |\n{% endcomment %}\n\n\n**Events**\n\n| API Name | Description                                        |\n| -------- | -------------------------------------------------- |\n| [`on()`](#on)     | Bind a listener to the specified event.            |\n| [`off()`](#off)    | Unbind event listener(s) from the specified event. |\n\n\n***Integrated Events***\n\n| Event Name      | Description                               |\n| --------------- | ----------------------------------------- |\n| [`annotationsAdded`](#annotationsadded) | Triggered when new annotation(s) is added. |\n| [`annotationsDeleted`](#annotationsdeleted) | Triggered when annotation(s) is deleted.     |\n| [`annotationLayerChanged`](#annotationlayerchanged) | Triggered when annotation's layer is changed.     |\n| [`annotationsModified`](#annotationsmodified) | Triggered when annotation(s) is modified.     |\n\n\n## Methods\n\n### createAnnotation()\nCreate an annotation instance and add the created instance to the specified page.\n\n**Syntax**\n\n```typescript\ncreateAnnotation<K extends keyof AnnotationsTypeMapOuter>(pageUid: string, type: K, annotationOptions?: AnnotationsTypeMapOuter[K][\"options\"]): AnnotationsTypeMapOuter[K][\"return\"];\n```\n\n**Parameters**\n\n`pageUid`: Specify the page to add the annotation.\n\n`type`: Specify the type of annotation to create.\n```typescript\ntype AnnotationType = \"rectangle\" | \"ellipse\" | \"polygon\" | \"polyline\" | \"line\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\"| \"strikeout\";\n```\n\n`annotationOptions`: The annotation options. Please refer to [the options list](/api/interface/annotationinterface/index.md#options).\n\n**Return value**\n\nThe instance of annotation. Please refer to [Annotation](/api/class/annotation/index.md).\n\n**Code Snippet**\n\n- To creat new annotations.\n\n    ```typescript\n    // Given that editViewer is an existing instance of EditViewer and a document is currently open.\n    const pageUid = editViewer.indexToUid(0);\n\n    const rect = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"rectangle\");\n    const ellipse = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"ellipse\");\n    const polygon = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"polygon\");\n    const polyline = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"polyline\");\n    const line = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"line\");\n    const ink = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"ink\");\n    const textBox = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"textBox\");\n    const textTypewriter = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"textTypewriter\");\n    const stamp = await Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"stamp\");\n    ```\n\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------                                     \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                               \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match. \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license. \n -80050 | DDV.Core.init() has not been set up yet.  \n -80051 | DDV.Core.init() has not been completed.\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n -80105 | *XXX(API)*: The specified page(s) do not exist.   \n\n\n### getAnnotationsByUids()\n\nGet annotations by annotation uids.\n\n**Syntax**\n\n```typescript\ngetAnnotationsByUids(annotationUids: string[]): Annotation[];\n```\n\n**Parameters**\n\n`annotationUids`: The array of the annotation uids.\n\n**Return value**\n\nAn array of [Annotation](/api/class/annotation/index.md) objects.\n\n**Warning**\n\n Error Code  | Error Message                                        | API return value \n-------------|-----------------------------------------------------|---------------\n -80100      | *XXX(API)*: *XXX(ParameterName)* is invalid.   | []\n -80102      | *XXX(API)*: *XXX(ParameterName)* is missing.  | []\n -80106      | *XXX(API)*: The specified annotation does not exist.| []\n\n### getAnnotationsByPage()\n\nGet annotations in specified page.\n\n**Syntax**\n\n```typescript\ngetAnnotationsByPage(pageUid: string): Annotation[];\n```\n\n**Parameters**\n\n`pageUid`: Specify the page.\n\n**Return value**\n\nAn array of [Annotation](/api/class/annotation/index.md) object.\n\n**Warning**\n\n Error Code  | Error Message                                        | API return value  \n-------------|-----------------------------------------------------|---------------\n -80100      | *XXX(API)*: *XXX(ParameterName)* is invalid.   | []\n -80102      | *XXX(API)*: *XXX(ParameterName)* is missing.  | []\n -80105      | *XXX(API)*: The specified page(s) do not exist. | []\n\n### getAnnotationsByDoc()\n\nGet all annotations in specified document.\n\n**Syntax**\n\n```typescript\ngetAnnotationsByDoc(docUid: string): Annotation[];\n```\n\n`docUid`: Specify the doc.\n\n**Return value**\n\nAn array of [Annotation](/api/class/annotation/index.md) objects.\n\n**Warning**\n\n Error Code  | Error Message                                        | API return value     \n--------|-----------------------------------------------------|--------------- \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | []\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.   | []\n -80104 | *XXX(API)*: The specified document(s) do not exist.  | []\n\n\n### deleteAnnotations()\n\nDelete specified annotations.\n\n**Syntax**\n\n```typescript\ndeleteAnnotations(annotationUids: string[]): boolean;\n```\n\n**Parameters**\n\n`annotationUids`: Specify the array of annotation uids to delete.\n\n**Return value**\n\n`true`\n\n`false`\n\n**Warning**\n\n Error Code  | Error Message                                           | API return value     \n-------------|--------------------------------------------------------|---------------    \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.           | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.          | `false`\n -80106 | *XXX(API)*: The specified annotation does not exist.  | `false`\n\n### bringAnnotationForward()\n\nBring the specified annotation forward.\n\n**Syntax**\n\n```typescript\nbringAnnotationForward(annotationUid: string): boolean;\n```\n\n**Parameters**\n\n`annotationUid`: Specify the annotation uid to bring forward.\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Warning**\n\n Error Code  | Error Message                                           | API return value     \n-------------|--------------------------------------------------------|---------------    \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.           | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.          | `false`\n -80106 | *XXX(API)*: The specified annotation does not exist.  | `false`\n\n### sendAnnotationBackward()\n\nSend the specified annotation backward.\n\n**Syntax**\n\n```typescript\nsendAnnotationBackward(annotationUid: string): boolean;\n```\n\n**Parameters**\n\n`annotationUid`: Specify the annotation uid to send backward.\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Warning**\n\n Error Code  | Error Message                                           | API return value     \n-------------|--------------------------------------------------------|---------------    \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.           | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.          | `false`\n -80106 | *XXX(API)*: The specified annotation does not exist.  | `false`\n\n### bringAnnotationToFront()\n\nBring the specified annotation in front of all other annotations.\n\n**Syntax**\n\n```typescript\nbringAnnotationToFront(annotationUid: string): boolean;\n```\n\n**Parameters**\n\n`annotationUid`: Specify the annotation uid to bring to front.\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Warning**\n\n Error Code  | Error Message                                           | API return value     \n-------------|--------------------------------------------------------|---------------    \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.           | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.          | `false`\n -80106 | *XXX(API)*: The specified annotation does not exist.  | `false`\n\n### sendAnnotationToBack()\n\nSend the specified annotation behind all other annotations.\n\n**Syntax**\n\n```typescript\nsendAnnotationToBack(annotationUid: string): boolean;\n```\n\n**Parameters**\n\n`annotationUid`: Specify the annotation uid to send to back.\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Warning**\n\n Error Code  | Error Message                                           | API return value     \n-------------|--------------------------------------------------------|---------------    \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.           | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.          | `false`\n -80106 | *XXX(API)*: The specified annotation does not exist.  | `false`\n\n{% comment %}\n### importXfdf()\n\nImport annotations in an XFDF(XML) string to the specified document.\n\n**Syntax**\n\n```typescript\nimportXfdf(docUid: string, xfdf: string): Prmoise<Annotation[]>;\n```\n\n**Parameters**\n\n`docUid`: Specify the document.\n\n`xfdf`: The XFDF(XML) string to import.\n\n**Return value**\n\nAn array of imported [Annotation](/api/class/annotation/index.md) objects.\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------                                     \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                               \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match. \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license. \n -80050 | DDV.Core.init() has not been set up yet.  \n -80051 | DDV.Core.init() has not been completed.\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.       \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.\n -80104 | *XXX(API)*: The specified document(s) do not exist.\n\n **Warning**\n\n  Error Code  | Error Message                                        \n--------|-----------------------------------------------------  \n -80203 | Failed to read some annotations because they are not supported by Dynamsoft Document Viewer so far.\n\n### exportXfdf()\n\nExport all annotations from the specified document as an XFDF(XML) string.\n\n**Syntax**\n\n```typescript\nexportXfdf(docUid: string): Promise<string>;\n```\n\n**Parameters**\n\n`docUid`: Specify the document.\n\n**Return value**\n\nThe XFDF(XML) string. \n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------                                     \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                    \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match. \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license. \n -80050 | DDV.Core.init() has not been set up yet.  \n -80051 | DDV.Core.init() has not been completed.\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.       \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.\n -80104 | *XXX(API)*: The specified document(s) do not exist. \n\n{% endcomment %}\n\n## Events\n\n### on()\n\nBind a listener to the specified event. \n\n**Syntax**\n\n```typescript\non(eventName: EventName, listener:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It should be [an integrated event name](#integrated-events).\n\n`listener`: Specify the listener.\n\n**Code Snippet**\n\n```typescript\n// Bind a listener to the integrated event annotationsModified.\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.modifiedAnnotations[0].uid);\n    console.log(e.modifiedAnnotations[0].newOptions);\n    console.log(e.actions);\n};\n\nDynamsoft.DDV.annotationManager.on(\"annotationsModified\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n\n### off()\n\nUnbind event listener(s) from the specified event. \n\n**Syntax**\n\n```typescript\noff(eventName: EventName, listener?:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It should be [an integrated event name](#integrated-events).\n\n`listener`: Specify the listener. If no listener is specified, unbind all event listeners from the specified event\n\n**Code Snippet**\n\n```typescript\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.modifiedAnnotations[0].uid);\n    console.log(e.modifiedAnnotations[0].newOptions);\n    console.log(e.actions);\n};\n\nDynamsoft.DDV.annotationManager.on(\"annotationsModified\", eventFunc);\n\n// Unbind the specified event listener.\nDynamsoft.DDV.annotationManager.off(\"annotationsModified\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n\n### Integrated events\n\n#### annotationsAdded\n\nTriggered when new annotation(s) is added.\n\n**Callback**\n\nAn EventObject.\n\n**Attributes**\n\n`annotationUids`: The array of new added annotations uids.\n\n#### annotationsDeleted\n\nTriggered when annotation(s) is deleted.\n\n**Callback**\n\nAn EventObject.\n\n**Attributes**\n\n`annotationUids`: The array of deleted annotations uids.\n\n#### annotationLayerChanged\n\nTriggered when annotation's layer is changed.\n\n**Callback**\n\nAn EventObject.\n\n**Attributes**\n\n`oldAnnotationUidList `: The list of old annotation uids, arranged in hierarchical order from bottom to top for each page.\n\n`newAnnotationUidList`: The list of new annotation uids, arranged in hierarchical order from bottom to top for each page.\n\n#### annotationsModified\n\nTriggered when annotation(s) is modified.\n\n**Callback**\n\nAn EventObject.\n\n**Attributes**\n\n`modifiedAnnotations`: The array of the objects which include below properties.\n\n- `uid`: The modified annotation uid.\n- `oldOptions`: The modified annotation old options.\n- `newOptions`: The modified annotation new options.\n\n`actions`: The array of actions. Supported actions:\n\n- `moved`\n- `resized`\n- `rotated`\n- `flagsChanged`\n- `appearanceChanged`\n- `contentChanged`\n",
-      "breadcrumb": "AnnotationManager Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface AnnotationSelectionStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/styleinterface/annotationselectionstyle.html",
-      "content": "# AnnotationSelectionStyle\n\n## Syntax\n\n```typescript\ninterface AnnotationSelectionStyle {\n    border?: string; \n    background?: string; \n    ctrlBorderRadius?: string; \n    ctrlBorder?: string; \n    ctrlWidth?: string; \n    ctrlHeight?: string; \n    ctrlBackground?: string; \n}\n```\n\n## Attributes\n\n### border\n\nThe border style of selection.\n\nThe border style contains three parts, borderWidth, borderStyle and borderColor.\n\nOnly takes effect when set borderWidth, borderStyle and borderColor at the same time.\n\nborderWidth only supports `px` unit.\n\nborderStyle only supports `dashed`, `solid`.\n\n**Example**\n\n```typescript\nborder: \"2px dashed red\", \n```\n\n### background\n\nThe background style of selection.\n\n**Example**\n\n```typescript\nbackground: \"rgba(220, 220, 220, 0.5)\", \n```\n\n### ctrlBorderRadius\n\nThe border radius of Control Points. Supports `pt` and `%`.\n\n### ctrlBorder\n\nThe border style of Control Points.\n\n```typescript\nctrlBorder: \"1pt solid green\", \n```\n\n### ctrlWidth\n\nThe width of Control Points. Only supports `px` unit.\n\n### ctrlHeight\n\nThe height of Control Points. Only supports `px` unit.\n\n### ctrlBackground\n\nThe backgroud style of Control Points.",
-      "breadcrumb": "Interface AnnotationSelectionStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface AnnotationToolbarButton",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/annotationtoolbarbutton.html",
-      "content": "# AnnotationToolbarButton\n\n## Syntax\n\n```typescript\ninterface AnnotationToolbarButton {\n    id?: string; \n    className?: string; \n    style?: Partial<CSSStyleDeclaration>; \n    tooltip?: string; \n    displayText?: string;\n    label?: string; \n}\n```\n\n## Attributes\n\n### id\n\nThe id of Dom Element. If it is not specified, a random string will be generated.\n\n### className\n\nThe className of CSS.\n\n### style\n\nThe style which will cover CSS.\n\n### tooltip\n\nThe tooltip of the button. \n\n### displayText\n\nThe display text of the button.\n\n### label\n\nThe display text of the button. (use display text instead)\n\n## Related\n\n- [`ToolbarConfig`]({{ site.api }}interface/annotationinterface/toolbarconfig.html)",
-      "breadcrumb": "Interface AnnotationToolbarButton"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features - Annotation Management",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/datamanagement/annotmanagement.html",
-      "content": "# Annotation Management\n\nStarting from DDV 2.0, annotation is supported.\n\nAnnotations can be created using the built-in UI of Edit Viewer as well as code. This guide will focus on using the code.\n\n## Annotation creation\n\n### Supported annotation types\n\nUp to now, the annotation types supported by DDV are as follows:\n\n- [Rectangle]({{ site.api }}class/annotation/rectangle.html)\n- [Ellipse]({{ site.api }}class/annotation/ellipse.html)\n- [Polygon]({{ site.api }}class/annotation/polygon.html)\n- [Polyline]({{ site.api }}class/annotation/polyline.html)\n- [Line]({{ site.api }}class/annotation/line.html)\n- [Ink]({{ site.api }}class/annotation/ink.html)\n- [TextBox]({{ site.api }}class/annotation/textbox.html)\n- [TextTypewriter]({{ site.api }}class/annotation/texttypewriter.html)\n- [Stamp]({{ site.api }}class/annotation/stamp.html)\n- [Highlight]({{ site.api }}class/annotation/highlight.html)\n- [Underline]({{ site.api }}class/annotation/underline.html)\n- [Strikeout]({{ site.api }}class/annotation/strikeout.html)\n\n### Create a specified type annotation instance\n\nTo add an annotation to the page, first of all, you need to create an annotation instance. Take the rectangle annotation as an example,\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst rect = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"rectangle\"); // Create a default Rectangle annotation instance.\n```\n\nThe following properties of the annotation can be accessed from the created instance.\n\n- Annotation Uid\n    \n    Each annotation possesses a unique annotation uid. \n    \n    ```typescript\n    const annotUid = rect.uid;\n    ```\n\n- Page uid where the annotation is located\n\n    ```typescript\n    const annotPageUid = rect.pageUid;\n    ```\n\n    if the annotation is deleted, the `pageUid` will return `''`.\n\n{% comment %}\n\n- Axis-aligned bounding box (AABB)\n\n    ```typescript\n    const annotAabb = rect.aabb;\n    ```\n\n{% endcomment %}\n\n- Creation date & Modification date\n\n    ```typescript\n    const creationDate = rect.creationDate; //D:YYYYMMDDHHmmSSOHH'mm'\n    const modificationDate = rect.modificationDate; //D:YYYYMMDDHHmmSSOHH'mm'\n    ```\n\n    if the annotation is deleted, the `modificationDate` will return `''`.\n\n    If the annotation is created but not be modified after adding, `modificationDate` equals to `creationDate`. \n\n### Modify the annotation options while creating\n\nIf no specific options are passed during the creation of the annotation instance, the generated annotation will have default options.\n\nIf you wish to create a custom-configured annotation, you can pass in the specified configuration during creation.\n\nFor example, to create a rectangle annotation whose border color is red and background is green.\n\n```typescript\nconst rectOptions = {\n    borderColor: \"red\",\n    background: \"green\",\n};\n\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\n\nconst rect = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"rectangle\", rectOptions);\n```\n\n### Modify the annotation options dynamically after creating\n\nAfter creating the annotation, if you want to dynamically modify its configuration, you can use `updateOptions()` method.\n\nFor example, to modify an existing rectangle annotation. \n\n```typescript\nconst newRectOptions = {\n    borderWidth: 2.66,\n};\n\nrect.updateOptions(newRectOptions);\n```\n\nEven after the annotation has been created to the page by [`createAnnotation()`]({{ site.api }}class/annotationmanager.html#createAnnotation), updating the options will lead to instant changes in the displayed annotation on the page.\n\n### Create an annotation instance after image cropping\n\nAfter cropping, if no specific options are passed during the creation of the annotation instance, the generated annotation will use default options, which might result in it being invisible.\n\nIf you want the annotation to be visible, you can pass specific configurations during its creation.\n\nFor example, after cropping an image, if you wish to create a rectangle annotation at position (10, 10) within the visible area.\n\n```typescript\nconst pageData = await editViewer.currentDocument.getPageData(editViewer.getCurrentPageUid());\n\nconst rectOptions = {\n    x: pageData.cropBox.left + 10,\n    y: pageData.cropBox.top + 10,\n};\n\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\n\nconst rect = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"rectangle\", rectOptions);\n```\n\n### More features\n\n#### Add image to the page by using Stamp Annotation\n\nObserving the structure of [`StampAnnotationOptions`]({{ site.api }}interface/annotationinterface/stampannotationoptions.html), the data type of stamp is `EnumStampIcon` or `Blob`. When stamp is set to `EnumStampIcon`, it indicates that the generated annotation will be displayed as a standard business stamp icon, with the default value being `DRAFT`. When stamp is set to `EnumStampIcon`, it indicates that the generated annotation will be displayed as a standard business stamp icon, with the default value being `DRAFT`. When stamp is set to a Blob, such as the blob of a custom image, it means the annotation will be displayed as an image.\n\nThe supported types of standard business stamps are as follows:\n\n| EnumStampIcon | Corresponding stamp |\n| ------------- | ------------------- |\n| REJECTED      | ![Stamp Rejected](/assets/imgs/stampRejected.png)                    |\n| ACCEPTED      | ![Stamp Accepted](/assets/imgs/stampAccepted.png)                    |\n| INITAL_HERE   | ![Stamp InitalHere](/assets/imgs/stampInitalHere.png)                    |\n| SIGN_HERE     | ![Stamp SignHere](/assets/imgs/stampSignHere.png)                    |\n| WITNESS       | ![Stamp Witness](/assets/imgs/stampWitness.png)                    |\n| APPROVED      | ![Stamp Approved](/assets/imgs/stampApproved.png)                    |\n| NOT_APPROVED  | ![Stamp NotApproved](/assets/imgs/stampNotApproved.png)                    |\n| DRAFT         | ![Stamp Draft](/assets/imgs/stampDraft.png)                    |\n| FINAL         | ![Stamp Final](/assets/imgs/stampFinal.png)                    |\n| COMPLETED     | ![Stamp Completed](/assets/imgs/stampCompleted.png)                    |\n| CONFIDENTIAL  | ![Stamp Confidential](/assets/imgs/stampConfidential.png)                    |\n| VOID          | ![Stamp Void](/assets/imgs/stampVoid.png)                    |\n\nIf set to `blob`, the custom image will be added as the stamp.\n\n```typescript\nvar blob = /*Sample image blob*/;\n\nconst stampOptions = {\n    stamp: blob,\n};\n\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\n\nconst stamp = await Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"stamp\", stampOptions);\n```\n\n#### Configure the styling for the part content of text within TextBox annotation or TextTypewriter annotation\n\nThe `textContents` attribute in the [`TextBoxAnnotationOptions`]({{ site.api }}interface/annotationinterface/textboxannotationoptions.html) and [`TextTypewriterAnnotationOptions`]({{ site.api }}interface/annotationinterface/texttypewriterannotationoptions.html) accepts an array of [`TextContent`]({{ site.api }}interface/annotationinterface/textcontent.html), which means that even within the same text annotation, you can configure specified text content with different styles.\n\nFor example,\n\n```typescript\nconst testTextContents = [\n    {\n        content: \"Dynamsoft Document Viewer \",\n        color: \"red\",\n    },\n    {\n        content: \"Annotation feature\",\n        color: \"green\",\n        underline: true,\n    }\n];\n\nconst textBoxAnnotationOptions = {\n    textContents: testTextContents,\n};\n\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\n\nconst textBox = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"textBox\", textBoxAnnotationOptions);\n```\n\n## Delete annotation(s)\n\n- Delete all annotations which are located on the specified page using [`getAnnotationsByPage()`]({{ site.api }}class/annotationmanager.html#getannotationsbypage) and [`deleteAnnotations()`]({{ site.api }}class/annotationmanager.html#deleteannotations).\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst curPageUid = editViewer.getCurrentPageUid();; // Get the page uid of current page in the edit viewer\n\nconst annotations = Dynamsoft.DDV.annotationManager.getAnnotationsByPage(curPageUid);\n\nconst annotationUids = annotations.map(obj=>obj.uid);\n\nDynamsoft.DDV.annotationManager.deleteAnnotations(annotationUids);\n```\n\n- Delete all annotations which are located in the specified doc using [`getAnnotationsByDoc()`]({{ site.api }}class/annotationmanager.html#getannotationsbydoc) and [`deleteAnnotations()`]({{ site.api }}class/annotationmanager.html#deleteannotations).\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst curDocUid = editViewer.currentDocument.uid; // Get the doc uid of current document which is open in the edit viewer\n\nconst annotations = Dynamsoft.DDV.annotationManager.getAnnotationsByDoc(curDocUid);\n\nconst annotationUids = annotations.map(obj=>obj.uid);\n\nDynamsoft.DDV.annotationManager.deleteAnnotations(annotationUids);\n```\n\n- Delete selected annotations using [`getSelectedAnnotations`]({{ site.api }}class/editviewer.html#getselectedannotations) and [`deleteAnnotations()`]({{ site.api }}class/annotationmanager.html#deleteannotations).\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst annotations = editViewer.getSelectedAnnotations(); // Get the selected annotations\n\nconst annotationUids = annotations.map(obj=>obj.uid);\n\nDynamsoft.DDV.annotationManager.deleteAnnotations(annotationUids);\n```\n\n## Change layer of an annotation\n\nIn the same page, annotations maintain a hierarchical relationship with each other. If you intend to alter the hierarchical level of an annotation, you can employ the following methods.\n\n- Bring forward using [`bringAnnotationForward()`]({{ site.api }}class/annotationmanager.html#bringannotationforward)\n\n    ```typescript\n    Dynamsoft.DDV.annotationManager.bringAnnotationForward(rect.uid);\n    ```\n\n- Send backward using [`sendAnnotationBackward()`]({{ site.api }}class/annotationmanager.html#sendannotationbackward)\n\n    ```typescript\n    Dynamsoft.DDV.annotationManager.sendAnnotationBackward(rect.uid);\n    ```\n\n- Bring to front using [`bringAnnotationToFront()`]({{ site.api }}class/annotationmanager.html#bringannotationtofront)\n\n    ```typescript\n    Dynamsoft.DDV.annotationManager.bringAnnotationToFront(rect.uid);\n    ```\n\n- Send to back using [`sendAnnotationToBack()`]({{ site.api }}class/annotationmanager.html#sendannotationtoback)\n\n    ```typescript\n    Dynamsoft.DDV.annotationManager.sendAnnotationToBack(rect.uid);\n    ```\n",
-      "breadcrumb": "Annotation Management"
-    },
-    
-    {
-      "title": null,
-      "url": "https://www.dynamsoft.com/document-viewer/docs/articles.json",
-      "content": "{\n  \"articles\": [\n    {% for article in site.pages %}\n    {\n      \"title\": {{ article.title | jsonify }},\n      \"url\": \"https://www.dynamsoft.com{{ article.url | relative_url }}\",\n      \"content\": {{ article.raw_content | jsonify }},\n      \"breadcrumb\": {{ article.breadcrumbText | default: article.title | jsonify }}\n    }{% unless forloop.last %},{% endunless %}\n    {% endfor %}\n  ]\n}\n",
-      "breadcrumb": null
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface BaseStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/styleinterface/basestyle.html",
-      "content": "# BaseStyle\n\n## Syntax\n\n```typescript\ninterface BaseStyle {\n    border?: string; \n    background?: string;\n}\n```\n\n## Attributes\n\n### border\n\nThe border style contains three parts, borderWidth, borderStyle and borderColor.\n\nOnly takes effect when set borderWidth, borderStyle and borderColor at the same time.\n\nborderWidth only supports `px` unit.\n\nborderStyle only supports `dashed`, `solid`.\n\n**Example**\n\n```typescript\nborder: \"2px dashed red\", \n```\n\n### background\n\nThe background style.\n\n**Example**\n\n```typescript\nbackground: \"rgba(255,255,255,0)\", \n```",
-      "breadcrumb": "Interface BaseStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - BrowseViewer Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/browseviewer.html",
-      "content": "# BrowseViewer Class\n\nBrowse Viewer is used to display pages in multiple-mode, pages can be multiple selected in this viewer.\n\n## API Index\n\n**Create and Destroy Instances** \n\n| API Name       | Description                                   |\n| ------------ | --------------------------------------------- |\n| [`BrowseViewer()`](#browseviewer) | Default constructor of a `BrowseViewer` instance. |\n| [`destroy()`](#destroy)             | Destroy the `BrowseViewer` instance.                             |\n\n**Viewer Control**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`bindContainer()`](#bindcontainer)     | Bind the viewer to the specified container.                  |\n| [`unbindContainer()`](#unbindcontainer) | Unbind the viewer from the specified container.              |\n| [`isBoundContainer`](#isboundcontainer) | Return whether the viewer is bound to a container. |\n| [`getStyle()`](#getstyle)            | Get the style object of `BrowseViewer`.                        |\n| [`getVisiblePagesInfo()`](#getVisiblePagesInfo)               | Get the visible pages info                |\n| [`updateStyle()`](#updatestyle)        | Update the style object of `BrowseViewer`.                     |\n| [`getUiConfig()`](#getuiconfig)         | Get current `UiConfig` object.                               |\n| [`updateUiConfig()`](#updateuiconfig)     | Update `UiConfig` object.                                    |\n| [`show()`](#show)                | Show the viewer.                                             |\n| [`hide()`](#hide)                | Hide the viewer.                                             |\n| [`isVisible`](#isvisible)        | Return whether the viewer is shown or hidden.      |\n| [`multiselectMode`](#multiselectmode) | Specify or return whether to allow multiple pages to be selected at once. |\n\n**Document and Page Control**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`openDocument()`](#opendocument)        | Open the specified document by document uid.                 |\n| [`closeDocument()`](#closedocument)       | Close current document.                                      |\n| [`currentDocument`](#currentdocument)   | Return the object of the current document.         |\n| [`getPageCount()`](#getpagecount)        | Get the page count in the viewer.                            |\n| [`goToPage()`](#gotopage)            | Navigate to the specified page by index.                     |\n| [`getCurrentPageIndex()`](#getcurrentpageindex) | Get the index of current page.                               |\n| [`getCurrentPageUid()`](#getcurrentpageuid)   | Get the uid of the current page.                             |\n| [`indexToUid()`](#indextouid)          | Get the uid of the specified page by its index.                      |\n| [`uidToIndex()`](#uidtoindex)          | Get the index of the specified page by its uid. |\n| [`getSelectedPageIndices()`](#getselectedpageindices) | Get indices of selected pages.                               |\n| [`selectPages()`](#selectpages)            | Select pages by specified indices.                           |\n| [`selectAllPages()`](#selectallpages)         | Select all pages.                                            |\n\n\n**Display Control**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`setRowAndColumn()`](#setrowandcolumn)        | Set rows and columns of displayed pages.                     |\n\n**Edit Operations**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`rotate()`](#rotate)              | Rotate the specified pages.                                  |\n| [`saveOperations()`](#saveoperations)      | Save the edit operations in pages to document.               |\n\n**Events**\n\n| API Name | Description                                        |\n| -------- | -------------------------------------------------- |\n| [`on()`](#on)     | Bind a listener to the specified event.            |\n| [`off()`](#off)    | Unbind event listener(s) from the specified event. |\n\n***Integrated Events***\n\n| Event Name          |\n| ------------------- |\n| [`resized`](#resized)             |\n| [`pageRendered`](#pagerendered)        |\n| [`currentIndexChanged`](#currentindexchanged) |\n| [`currentPageChanged`](#currentpagechanged)  |\n| [`selectedPagesChanged`](#selectedpageschanged) |\n| [`scroll`](#scroll) |\n| [`pagesDragged`](#pagesdragged)         |\n| [`pagesDropped`](#pagesdropped)         |\n| [`click`](#click)               |\n| [`dblclick`](#dbclick)            |\n| [`rightclick`](#rightclick)          |\n| [`visibilityChanged`](#visibilitychanged)                   |\n| [`paginationChanged`](#paginationchanged)                   |\n| [`pointerdown`](#pointerdown)                   |\n| [`pointermove`](#pointermove)                   |\n| [`pointerup`](#pointerup)                   |\n| [`pageover`](#pageover)                   |\n| [`pageout`](#pageout)                   |\n\n## Create and Destroy Instances\n\n### BrowseViewer()\n\nDefault constructor of a `BrowseViewer` instance.\n\n**Syntax**\n\n```typescript\nnew Dynamsoft.DDV.BrowseViewer(options?: BrowseViewerConstructorOptions);\n```\n\n**Parameters**\n\n`options`: The constructor options for a `BrowseViewer` instance. Please refer to [`BrowseViewerConstructorOptions`](/api/interface/browseviewerconstructoroptions.md).\n\n**Code Snippet**\n\n```typescript\nconst browseViewer = new Dynamsoft.DDV.BrowseViewer({\n    container: document.getElementById(\"viewer\"),\n});\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                                     \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                           \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match.                                 \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license.  \n -80050 | DDV.Core.init() has not been set up yet.   \n -80051 | DDV.Core.init() has not been completed.   \n\n### destroy()\n\nDestroy the `BrowseViewer` instance.\n\n**Syntax**\n\n```typescript\ndestroy(): void;\n```\n\n**Code Snippet**\n\n```typescript\nbrowseViewer.destroy();\n```\n\n**Remark**\n\n- The editing operations (rotating) in pages will be saved to document automatically when destroy the viewer instance.\n\n**See Also**\n\n[saveOperations](#saveoperations)\n\n## Viewer Control\n\n### bindContainer()\n\nBind the viewer to the specified container.\n\n**Syntax**\n\n```typescript\nbindContainer(container: string | HTMLElement): void;\n```\n\n**Parameters**\n\n`container`: The container which is used to show the viewer. Its `id` or `HTMLElement` is acceppted.\n\n**Code Snippet**\n\n```typescript\n// Assume there is a container with id \"viewercontainer\" on the page.\nbrowseViewer.bindContainer(\"viewercontainer\");\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80301 | The specified container does not exist. \n\n**Remark**\n\n- A viewer can only be bound to one container at once. If you bind the viewer to another container when it has been bound to a container, the viewer will be bound to the new container and unbound from the old container automatically. \n\n### unbindContainer()\n\nUnbind the viewer from the specified container.\n\n**Syntax**\n\n```typescript\nunbindContainer(): void;\n```\n\n**Code Snippet**\n\n```typescript\nbrowseViewer.unbindContainer();\n```\n\n### isBoundContainer\n\nReturn whether the viewer is bound to a container.\n\n**Syntax**\n\n```typescript\nreadonly isBoundContainer: boolean;\n```\n\n### getStyle()\n\nGet the style object of `BrowseViewer`.\n\n**Syntax**\n\n```typescript\ngetStyle(browseViewerStyleName: BrowseViewerStyleName): BrowseViewerStyle | null;\n```\n\n**Parameters**\n\n`browseViewerStyleName`: A `BrowseViewerStyleName` can be one of eight types.\n\n```typescript\ntype BrowseViewerStyleName = \"canvasStyle\" | \"pageStyle\" | \"selectedPageStyle\" | \"currentPageStyle\" | \"hoveredPageStyle\" | \"placeholderStyle\" | \"pageNumberStyle\" | \"checkboxStyle\";\n```\n\n**Return values**\n\nThe style object. Please refer to [Style Interfaces]({{ site.api }}interface/styleinterface/index.html).\n\n**Code Snippet**\n\n```typescript\n// Get pageStyle object;\nconst pageStyle = browseViewer.getStyle(\"pageStyle\");\n```\n\n**Warning**\n\n Error Code  | Error Message                                                            | API Return Value\n--------|-------------------------------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `null`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `null`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `null`\n\n### getVisiblePagesInfo()\n\nGet the visible pages info.\n\n**Syntax**\n\n```typescript\ngetVisiblePagesInfo(): PageVisualInfo[];\n```\n\n**Return values**\n\nArray of the `PageVisualInfo` object. Please refer to [`PageVisualInfo`](/api/interface/pagevisualinfo.md).\n\n### updateStyle()\n\nUpdate the style object of `BrowseViewer`.\n\n**Syntax**\n\n```typescript\nupdateStyle(browseViewerStyleName: BrowseViewerStyleName, browseViewerStyle: BrowseViewerStyle): boolean;\n```\n\n**Parameters**\n\n`browseViewerStyleName`: A `BrowseViewerStyleName` can be one of eight types.\n\n```typescript\ntype BrowseViewerStyleName = \"canvasStyle\" | \"pageStyle\" | \"selectedPageStyle\" | \"currentPageStyle\" | \"hoveredPageStyle\" | \"placeholderStyle\" | \"pageNumberStyle\" | \"checkboxStyle\";\n```\n\n`browseViewerStyle`: The style object. Please refer to [Style Interfaces]({{ site.api }}interface/styleinterface/index.html).\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n- First method\n\n    ```typescript\n    // Get style object\n    const pageStyle = browseViewer.getStyle(\"pageStyle\");\n\n    // Modify the style object\n    pageStyle.background = \"red\";\n    pageStyle.border = \"1px solid green\";\n\n    // Update page style\n    browseViewer.updateStyle(\"pageStyle\", pageStyle);\n    ```\n\n- Second method\n\n    ```typescript\n    // Update the style object directly\n    browseViewer.updateStyle(\"pageStyle\", {\n        background: \"red\",\n        border: \"1px solid green\",\n    });\n    ```\n\n**Warning**\n\n Error Code  | Error Message                                                            | API Return Value\n--------|-------------------------------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `false`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `false`\n\n\n**Remark**\n\n- The updates are independent of whether the viewer is displayed and are updated in real time.\n\n### getUiConfig()\n\nGet current `UiConfig` object.\n\n**Syntax**\n\n```typescript\ngetUiConfig(): UiConfig;\n```\n\n**Return Value**\n\nThe [`UiConfig`]({{ site.api }}interface/uiconfig.html) object.\n\n**Code Snippet**\n\n```typescript\nconst viewerUi = browseViewer.getUiConfig();\n```\n\n### updateUiConfig()\n\nUpdate `UiConfig` object.\n\n**Syntax**\n\n```typescript\nupdateUiConfig(uiConfig: UiConfig): boolean;\n```\n\n**Parameters**\n\n`uiConfig`: The [`UiConfig`]({{ site.api }}interface/uiconfig.html) to update.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst sidebar = {\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"column\",\n    style: {\n        width: \"80px\",\n    },\n    children: [\n        Dynamsoft.DDV.Elements.Load,\n        Dynamsoft.DDV.Elements.DeleteAll,\n    ],\n};\n\nconst viewerUi = browseViewer.getUiConfig();\n\nviewerUi.children.splice(0,0,sidebar);\n\nbrowseViewer.updateUiConfig(viewerUi); // Configure a sidebar which includes \"Load\" and \"DeleteAll\" elements.\n```\nOr,\n\n```typescript\nconst header = {\n    type: Dynamsoft.DDV.Elements.Layout,\n    style: {\n        height: \"80px\",\n    },\n    children: [\n        Dynamsoft.DDV.Elements.Pagination,\n        Dynamsoft.DDV.Elements.DeleteAll,\n    ],\n};\n\nconst viewerUi =  {\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"column\",\n    children: [\n        header,\n        Dynamsoft.DDV.Elements.MainView,\n    ],\n}\n\nbrowseViewer.updateUiConfig(viewerUi); // Configure a header which includes \"Pagination\" and \"DeleteAll\" elements.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n -80313 | The element *XXX(ElementName)* is not supported in *XXX(ClassName)* class.      | `false`\n\n**Remark**\n\n- The updates are independent of whether the viewer is displayed and are updated in real time.\n\n### show()\n\nShow the viewer.\n\n**Syntax**\n\n```typescript\nshow(): void;\n```\n\n**Code Snippet**\n\n```typescript\nbrowseViewer.show();\n```\n\n**Remark**\n\n- The viewer is shown automatically when it is created.\n\n### hide()\n\nHide the viewer.\n\n**Syntax**\n\n```typescript\nhide(): void;\n```\n\n**Code Snippet**\n\n```typescript\nbrowseViewer.hide();\n```\n\n### isVisible\n\nReturn whether the viewer is shown or hidden.\n\n**Syntax**\n\n```typescript\nreadonly isVisible: boolean;\n```\n\n**Remark**\n\n- The viewer is shown automatically when it is created which means the default value of `isVisible` is `true`.\n\n### multiselectMode\n\nSpecify or return whether to allow multiple pages to be selected at once.\n\n**Syntax**\n\n```typescript\nmultiselectMode: boolean; \n```\n\n**Example**\n\n```typescript\nbrowseViewer.multiselectMode = true;\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n\n**Remark**\n\nIf it is not specified in [`viewerConfig`]({{ site.api }}interface/browseviewerconstructoroptions.html#viewerconfig) while creating the viewer additionally, its default value is `false`.\n\n## Document and Page Control\n\n### openDocument()\n\nOpen the specified document.\n\n**Syntax**\n\n```typescript\nopenDocument(docUid: string | doc: IDocument): void;\n```\n\n**Parameters**\n\n`docUid`: The uid of the specified document. \n\n`doc`: The object of the document to open. Please refer to [IDocument]({{ site.api }}interface/idocument/index.html).\n\n**Code Snippet**\n\n```typescript\n// Assume there is a document whose id is \"lnn0ll9o124\".\nbrowseViewer.openDocument(\"lnn0ll9o124\");\n\n// OR\n// Assume there is a document object firstDoc.\nconst docUid = firstDoc.uid;\nbrowseViewer.openDocument(docUid);\nbrowseViewer.openDocument(firstDoc);\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: docUid or doc is invalid.   \n -80102 | *XXX(API)*: docUid or doc is missing.   \n -80104 | *XXX(API)*: The specified document(s) do not exist.  \n\n**Remark**\n\n- If another ducument is opened when there is a document already opened, the opened document will be closed automatically.\n\n### closeDocument()\n\nClose current document.\n\n**Syntax**\n\n```typescript\ncloseDocument(): boolean; \n```\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nbrowseViewer.closeDocument();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `false`\n\n### currentDocument\n\nReturn the object of the current document.\n\n**Syntax**\n\n```typescript\nreadonly currentDocument: IDocument | null;\n```\n\n**Code Snippet**\n\n```typescript\nconst currentDoc = browseViewer.currentDocument;\n```\n\n**See Also**\n\n[IDocument]({{ site.api }}interface/idocument/index.html)\n\n### getPageCount()\n\nGet the page count in the viewer.\n\n**Syntax**\n\n```typescript\ngetPageCount(): number;\n```\n\n**Return Value**\n\nThe page count.\n\n**Code Snippet**\n\n```typescript\nconst pageCount = browseViewer.getPageCount();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `-1`\n\n### goToPage()\n\nNavigate to the specified page by index.\n\n**Syntax**\n\n```typescript\ngoToPage(index: number): number;\n```\n\n**Parameters**\n\n`index`: The index of the page which need to navigate to.\n\n**Return Value**\n\nThe index of the page which navigate to.\n\n**Code Snippet**\n\n```typescript\n// Navigate to page 4.\nbrowseViewer.goToPage(3);\n```\n\n**Warning**\n\n Error Code  | Error Message                                             | API Return Value\n--------|----------------------------------------------------------|------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.        | `-1`\n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.    | `-1`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.       | `-1`\n -80304 | No document opened.                                      | `-1`\n -80305 | There is no image in the current document.               | `-1`\n\n### getCurrentPageIndex()\n\nGet the index of the current page.\n\n**Syntax**\n\n```typescript\ngetCurrentPageIndex(): number; \n```\n\n**Return Value**\n\nThe index of the current page.\n\n**Code Snippet**\n\n```typescript\nconst currentIndex = browseViewer.getCurrentPageIndex();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `-1`\n -80305 | There is no image in the current document.          | `-1`\n\n### getCurrentPageUid()\n\nGet the uid of the current page.\n\n**Syntax**\n\n```typescript\ngetCurrentPageUid(): string;\n```\n\n**Return Value**\n\nThe uid of the current page.\n\n**Code Snippet**\n\n```typescript\nconst curPageUid = browseViewer.getCurrentPageUid();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `''`\n -80305 | There is no image in the current document.          | `''`\n\n### indexToUid()\n\nGet the uid of the specified page by its index.\n\n**Syntax**\n\n```typescript\nindexToUid(index: number): string;\n```\n\n**Parameters**\n\n`index`: The index of the specified page.\n\n**Return Value**\n\nThe uid of the page.\n\n**Code Snippet**\n\n```typescript\n// Get the first page's uid\nconst firstPageUid = browseViewer.indexToUid(0);\n```\n\n**Warning**\n\n Error Code  | Error Message                                             | API Return Value\n--------|----------------------------------------------------------|------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.        | `''`\n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.    | `''`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.       | `''`\n -80304 | No document opened.                                      | `''`\n -80305 | There is no image in the current document.               | `''`\n\n### uidToIndex()\n\nGet the index of the specified page by its uid.\n\n**Syntax**\n\n```typescript\nuidToIndex(pageUid: string): number;\n```\n\n**Parameters**\n\n`pageUid`: The uid of the specified page.\n\n**Return Value**\n\nThe index of the page.\n\n**Code Snippet**\n\n```typescript\nconst curPageUid = browseViewer.getCurrentPageUid();\nbrowseViewer.uidToIndex(curPageUid);\n```\n\n**Warning**\n\n Error Code  | Error Message                                             | API Return Value\n--------|----------------------------------------------------------|------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.        | `-1`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.       | `-1`\n -80105 | *XXX(API)*: The specified page(s) do not exist.  | `-1`\n -80304 | No document opened.                                      | `-1`\n -80305 | There is no image in the current document.               | `-1`\n\n### getSelectedPageIndices()\n\nGet indices of selected pages.\n\n**Syntax**\n\n```typescript\ngetSelectedPageIndices(): number[];\n```\n\n**Return Value**\n\nThe array of the selected pages' indices.\n\n**Example**\n\n```typescript\nconst selPages = browseViewer.getSelectedPageIndices();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `[]`\n\n**Remark**\n\n- If no page is selected in the viewer, returns [].\n- The order of the returned array elements is based on the order in which the pages are selected. For example, if select the pages with the index 6, 5, 2 in order, the returned array will be [6,5,2].\n\n### selectPages()\n\nSelect pages by specified indices.\n\n**Syntax**\n\n```typescript\nselectPages(indices: number[]): string[];\n```\n\n**Parameters**\n\n`indices`: Specify the indices of the pages to be selected. If set to an empty array `[]`, no pages will be selected.\n\n**Return Value**\n\nThe array of selected pages' uids.\n\n**Example**\n\n```typescript\n// Select the first and second pages.\nbrowseViewer.selectPages([0,1]);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `[]`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `[]`\n -80304 | No document opened.                                 | `[]`\n\n### selectAllPages()\n\nSelect all pages.\n\n**Syntax**\n\n```typescript\nselectAllPages(): string[];\n```\n\n**Return Value**\n\nThe array of selected pages' uids.\n\n**Example**\n\n```typescript\nbrowseViewer.selectAllPages();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `[]`\n -80305 | There is no image in the current document.          | `[]`\n\n\n## Display Control\n\n### setRowAndColumn()\n\nSet rows and columns of displayed pages.\n\n**Syntax**\n\n```typescript\nsetRowAndColumn(\n    rows: number, \n    columns: number \n): boolean;\n```\n**Parameters**\n\n`rows`: The number of rows. The maximum value is 20.\n\n`columns`: The number of columns. The maximum value is 20.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Example**\n\n```typescript\nbrowseViewer.setRowAndColumn(5,8); // Display the page in five rows and eight columns.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.     | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n\n**Remark**\n\n- If it is not specified in [`viewerConfig`]({{ site.api }}interface/browseviewerconstructoroptions.html#viewerconfig) while creating the viewer additionally, its default rows is 4 and columns is 6.\n\n## Edit Operations\n\n### rotate()\n\nRotate the specified pages.\n\n**Syntax**\n\n```typescript\nrotate(\n    angle: number,\n    indices?: number[] \n): boolean; \n```\n\n**Parameters**\n\n`angle`: Specify the angle. Only multiples of 90 degrees are supported. Clockwise rotation is positive, counterclockwise rotation is negative.\n\n`indices`: The array of the pages indices which will be rotated. If not set, the current page will be rotated.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Rotate the first and second pages 90 degrees clockwise.\nbrowseViewer.rotate(90, [0,1]);\n\n// Rotate current page 90 degrees counterclockwise.\nbrowseViewer.rotate(-90);\n```\n\n**Warning**\n\n Error Code  | Error Message                                                       | API Return Value\n--------|-------------------------------------------------------------------------|-------------------    \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `false`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `false`\n -80304 | No document opened.                                                     | `false`\n -80305 | There is no image in the current document.                              | `false`\n\n### saveOperations()\n\n> *This method takes effect only for [rotate](#rotate) operation.*\n\nSave the edit operations in pages to document.\n\n**Syntax**\n\n```typescript\nsaveOperations(): boolean;\n```\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nbrowseViewer.saveOperations();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|-----------------\n -80304 | No document opened.                                 | `false`\n\n## Events\n\n### on()\n\nBind a listener to the specified event. \n\n**Syntax**\n\n```typescript\non(eventName: EventName, listener:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It can be [an integrated event name](#integrated-events) or a custom event name configured through [`UiConfig`-`events`]({{ site.api }}interface/uiconfig.html#events).\n\n`listener`: Specify the listener.\n\n**Code Snippet**\n\n```typescript\n// Bind a listener to the integrated event resized.\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.oldWidth);\n    console.log(e.newWidth);\n};\n\nbrowseViewer.on(\"resized\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n\n### off()\n\nUnbind event listener(s) from the specified event. \n\n**Syntax**\n\n```typescript\noff(eventName: EventName, listener?:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It can be [an integrated event name](#integrated-events) or a custom event name configured through [`UiConfig`-`events`]({{ site.api }}interface/uiconfig.html#events).\n\n`listener`: Specify the listener. If no listener is specified, unbind all event listeners from the specified event.\n\n**Code Snippet**\n\n```typescript\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.oldWidth);\n    console.log(e.newWidth);\n};\n\nbrowseViewer.on(\"resized\", eventFunc);\n\n// Unbind the specified event listener.\nbrowseViewer.off(\"resized\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n### Integrated Events\n\n#### resized\n\nTriggered when the viewer is resized.\n\n**Callback**\n\n`ResizedEvent`: An EventObject.\n\n**Attributes**\n\n`oldWidth`: The old width of the viewer.\n\n`oldHeight`: The old height of the viewer.\n\n`newWidth`: The new width of the viewer.\n\n`newHeight`: The new height of the viewer.\n\n#### pageRendered\n\nTriggered when a page has been completely rendered. We only render the pages that are visible on the screen, so this event won't get fired for every page in the document at once. This event will get called when the user scrolls up and down the document, or when a page is rotated, or anything else that makes it rerender.\n\n**Callback**\n\n`PageRenderedEvent`: An EventObject.\n\n**Attributes**\n\n`index`: The index of the rendered page.\n\n`pageUid`: The pageUid of the rendered page.\n\n#### currentIndexChanged\n\nTriggered when currentIndex is changed.\n\n**Callback**  \n\n`CurrentindexChangedEvent`: An EventObject.\n\n**Attributes**\n\n`oldIndex`: The old current index.\n\n`newIndex`: The new current index. If there is no index in the viewer, return `-1`.\n\n#### currentPageChanged\n\nTriggered when current page is changed.\n\n**Callback**\n\n`CurrentPageChangedEvent`: An EventObject.\n\n**Attributes**\n\n`oldPageUid`: The uid of the page which is old current index. If the old page is removed, return `''`.\n\n`newPageUid`: The uid of the page which is new current index. If there is no index in the viewer, return `''`.\n\n#### selectedPagesChanged\n\nTriggered when the page(s) is selected.\n\n***Callback***\n\n `SelectedPagesChangedEvent`: An EventObject.\n\n***Attributes***\n\n`oldIndices[]`: The array of old selected pages indices.\n\n`oldPageUids[]`: The array of old selected pages uids.\n\n`newIndices[]`: The array of new selected pages indices.\n\n`newPageUids[]`: The array of new selected pages uids.\n\n#### scroll\n\nTriggered when the viewer is scrolled. It will return the native event object.\n\n#### pagesDragged\n\nTriggered when page(s) is dragged.\n\n***Callback***\n\n `PageDraggedEvent`: An EventObject.\n\n***Attributes***\n\n`indices[]` : The array of the dragged pages indices.\n\n`pageUids[]`: The array of the dragged pages uids.\n\n#### pagesDropped\n\nTriggered when page(s) is dropped.\n\n***Callback***\n\n `PageDroppedEvent`: An EventObject.\n\n***Attributes***\n\n`indicesBefore[]`: The array of the dropped pages indices before dropping.\n\n`indicesAfter[]`: The array of the dropped pages indices after dropping.\n\n`pageUids[]`: The array of the dropped pages uids.\n\n\n#### visibilityChanged\n\nTriggered when the viewer's visibility is changed. It will return an `isVisible` boolean value.\n\n#### paginationChanged\n\nTriggered when the viewer's current page number or the page count is changed. It will return an [`IPaginationChangedEvent`](/api/interface/ipaginationchangedevent.md) object.\n\n#### pointerdown\n\nTriggered when a pointer becomes active buttons state. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pointermove\n\nTriggered when a pointer changes coordinates. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pointerup\n\nTriggered when a pointer is no longer active buttons state. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pageover\n\nTriggered when a pointer is moved into a page's hit test boundaries. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pageout\n\nTriggered when a pointer is moved out of the hit test boundaries of a page. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### Mouse Events\n\n##### click\n\nTriggered when click in the viewer's viewing area. On mobile device, triggered when tap in the viewer's viewing area.\n\n##### dblclick\n\nTriggered when double click in the viewer's viewing area.\n\n##### rightclick\n\nTriggered when right click in the viewer's viewing area. On mobile device, triggered when long-tap in the viewer's viewing area.\n\n**Callback for mouse events**\n\n `IPointerEvent`: An EventObject.\n\n**Attributes**\n\n`index`: The page index.\n\n`pageUid`: The page uid.\n\n`imageX`: The relative x-coordinate of the click pointer on the image.\n\n`imageY`: The relative y-coordinate of the click pointer on the image.\n\n`canvasX`: The relative x-coordinate of the click pointer on the canvas.\n\n`canvasY`: The relative x-coordinate of the click pointer on the canvas.\n\n`nativeEvent`: [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)",
-      "breadcrumb": "BrowseViewer Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface BrowseViewerConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/browseviewerconfig.html",
-      "content": "# BrowseViewerConfig\n\n## Syntax\n\n```typescript\ninterface BrowseViewerConfig {\n    canvasStyle?: CanvasStyle;\n    pageStyle?: BaseStyle;\n    currentPageStyle?: BaseStyle;\n    selectedPageStyle?: BaseStyle;\n    hoveredPageStyle?: BaseStyle;\n    placeholderStyle?: BaseStyle;\n    pageNumberStyle?: PageNumberStyle;\n    checkboxStyle?: CheckboxStyle;\n    rows?: number;\n    columns?: number;\n    multiselectMode?: boolean; \n    scrollToLatest?: boolean;\n    enableDragPage?: boolean;\n    enableLoadSourceByDrag?: boolean;\n    enableAutoScrollForDragPages?: boolean;\n    scrollDirection?: string;\n}\n```\n\n## Attributes\n\n### canvasStyle\n\nThe style of canvas of the viewer. Please refer to [`CanvasStyle`]({{ site.api }}interface/styleinterface/canvasstyle.html).\n\n### pageStyle\n\nThe style of displayed page in the viewer. Please refer to [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html).\n\n### currentPageStyle\n\nThe style of current page in the viewer. Please refer to [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html).\n\n### selectedPageStyle\n\nThe style of selected page in the viewer. Please refer to [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html).\n\n### hoveredPageStyle\n\nThe style of the page which is hovered by mouse pointer in the viewer. Please refer to [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html).\n\n### placeholderStyle\n\nThe style of the placeholder when the page is dragged. Please refer to [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html).\n\n### pageNumberStyle\n\nThe style of page number. Please refer to [`PageNumberStyle`]({{ site.api }}interface/styleinterface/pagenumberstyle.html).\n\n### checkboxStyle\n\nThe style of checkbox. Please refer to [`CheckboxStyle`]({{ site.api }}interface/styleinterface/checkboxstyle.html).\n\n### rows\n\nThe number of rows. The maximum value is 20.\n\n### columns\n\nThe number of columns. The maximum value is 20.\n\n### multiselectMode\n\nSpecify whether to allow multiple pages to be selected at once.\n\nDefault value: `false`\n\n### scrollToLatest\n\nSpecify whether to scroll to latest page automatically when importing new pages.\n\nDefault value: `false`\n\n### enableDragPage\n\nSpecify whether to allow drag&drop page feature in the viewer.\n\nDefault value: `true`\n\n### enableLoadSourceByDrag\n\nEnables loading files by dragging them into the Viewer.\n\nDefault value: `true`\n\n### enableAutoScrollForDragPages\n\nSpecify whether to enable auto scrolling when dragging pages if the cursor is around the edges of the viewer. \n\nDefault value: `true`\n\n\n### scrollDirection\n\nSpecify the scroll direction, supported values are `vertical`, `horizontal`.\n\nDefault value: `vertical`\n\n![scrollDirection BrowseViewer](/assets/imgs/scrollDirection-browse.png)\n\n## Remark\n\n- If you see a blank display after importing images, it is because the container size is too small and rows&columns exceeds, please adjust the container size or [`rows`](#rows)&[`columns`](#columns).\n\n## Related\n\n- [`BrowseViewerConstructorOptions`]({{ site.api }}interface/browseviewerconstructoroptions.html)\n",
-      "breadcrumb": "Interface BrowseViewerConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface BrowseViewerConstructorOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/browseviewerconstructoroptions.html",
-      "content": "# BrowseViewerConstructorOptions\n\n## Syntax\n\n```typescript\ninterface BrowseViewerConstructorOptions {\n    container?: string | HTMLElement;\n    keyboardInteractionConfig?: KeyboardInteractionConfig;\n    viewerConfig?: BrowseViewerConfig;\n    uiConfig?: UiConfig; \n    groupUid?: string;\n}\n```\n\n## Attributes\n\n### container\n\nThe container which is used to show the viewer. Its `id` or `HTMLElement` is acceppted.\n\n### keyboardInteractionConfig\n\nThis configures the use of keyboard shortcuts for the viewer - please see [`KeyboardInteractionConfig`]({{ site.api }}interface/keyboardinteractionconfig.html) for details. If not specified, all keyboard shortcuts are disabled by default. **Note**: editing shortcuts do not have any effect on the Browse viewer.\n\n### viewerConfig\n\nThe configurations of viewer, please refer to [`BrowseViewerConfig`](/api/interface/browseviewerconfig.md). If it is not specified, the [default configuration]({{ site.viewer }}viewerconfig.html#browseviewerconfig) will be applied.\n\n### uiConfig\n\nThe UI layout configurations of viewer, please refer to [`UiConfig`]({{ site.api }}interface/uiconfig.html). If it is not specified, the [default UI]({{ site.ui }}default_ui.html#browse-viewer) will be applied.\n\n### groupUid\n\nThe uid of viewers' group. If it is not specified, a random groupUid will be generated.\n\n{% comment %} Please refer to [Data synchronisation between viewers]({{ site.features }}viewers/datasync.html). {% endcomment %}\n\n## Related\n\n- [`BrowseViewer()`]({{ site.api }}class/browseviewer.html#browseviewer)\n",
-      "breadcrumb": "Interface BrowseViewerConstructorOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface CanvasStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/styleinterface/canvasstyle.html",
-      "content": "# CanvasStyle\n\n## Syntax\n\n```typescript\ninterface CanvasStyle {\n    border?: string;\n    background?: string;\n    cursor?: Cursor;\n}\n```\n\n## Attributes\n\n### border\n\nThe border style of canvas.\n\nThe border style contains three parts, borderWidth, borderStyle and borderColor.\n\nOnly takes effect when set borderWidth, borderStyle and borderColor at the same time.\n\nborderWidth only supports `px` unit.\n\nborderStyle only supports `dashed`, `solid`.\n\n**Example**\n\n```typescript\nborder: \"2px dashed red\", \n```\n\n### background\n\nThe background style of canvas.\n\n**Example**\n\n```typescript\nbackground: \"rgba(255,255,255,0)\", \n```\n\n### cursor\n\nThe cursor style.\n\nA `Cursor` can be one of types below. For detailed info, please refer to [CSS-cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor).\n\n```typescript\ntype Cursor = \"auto\" | \"default\" | \"none\" | \"context-menu\" | \"help\" | \"pointer\" | \"progress\" | \"wait\" | \"cell\" | \"crosshair\" | \"text\" | \"vertical-text\" | \"alias\" | \"copy\" | \"move\" | \"no-drop\" | \"not-allowed\" | \"e-resize\" | \"n-resize\" | \"ne-resize\" | \"nw-resize\" | \"s-resize\" | \"se-resize\" | \"sw-resize\" | \"w-resize\" | \"ns-resize\" | \"ew-resize\" | \"nesw-resize\" | \"col-resize\" | \"nwse-resize\" | \"row-resize\" | \"all-scroll\" | \"zoom-in\" | \"zoom-out\" | \"grab\" | \"grabbing\";\n```",
-      "breadcrumb": "Interface CanvasStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features - Capture Viewer",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/viewers/captureviewer.html",
-      "content": "# Capture Viewer\n\nCapture Viewer is used to control camera, play video stream, and capture the images from camera.\n\n- [Default user interface]({{ site.ui }}default_ui.html#capture-viewer)\n- [Default viewer configuration]({{ site.viewer }}viewerconfig.html#capture-viewer)\n\n```typescript\nconst captureViewer = new Dynamsoft.DDV.CaptureViewer({\n    container: document.getElementById(\"viewer\"),\n});\n\n```\n\n## Control camera\n\n### Select camera\n\nDDV's built-in Camera Viewer will select the best camera device in the camera list as the default camera. The method [`selectCamera()`]({{ site.api }}class/captureviewer.html#selectcamera) can help to select the camera you would like to use.\n\n- Select the first camera in the camera list\n    ```typescript\n    const cameras = await captureViewer.getAllCameras();\n    if (cameras.length) {\n        await captureViewer.selectCamera(cameras[0]);\n    }\n    ```\n\n- Select the camera whose label is \"Dynamsoft camera\".\n\n    ```typescript\n    const cameras = await captureViewer.getAllCameras();\n    for (var i=0;i<cameras.length;i++)\n    { \n        if(cameras[i].label == \"Dynamsoft camera\"){\n            captureViewer.selectCamera(cameras[i]);\n            break;\n        }\n    }\n    ```\n\n### Play/stop video stream\n\nAfter selecting the specified camera, you need to call [`play()`]({{ site.api }}class/captureviewer.html#play) to play the video stream.\n\n```typescript\nawait captureViewer.play();\n```\n\nIf you want to stop the video stream, please call [`stop()`]({{ site.api }}class/captureviewer.html#stop) method.\n\n```typescript\ncaptureViewer.stop();\n```\n\n### Set resolution\n\nThe resolution of camera can be set when playing the video stream.\n\n```typescript\n// Set to 1080P\nawait captureViewer.play({\n    resolution: [1920,1080], \n});\n```\n\n### Turn on flashlight\n\nAfter playing the video stream, the flashlight can be opened by using [`turnOnTorch()`]({{ site.api }}class/captureviewer.html#turnontorch).\n\n```typescript\n// Turn on flashlight\nawait captureViewer.turnOnTorch();\n\n// Turn off flashlight\nawait captureViewer.turnOffTorch();\n```\n\n> Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. \n\n> Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported.\n\n## Capture\n\n### Real-time boundaries detection\n\nAfter configuring [Document Detection]({{ site.features }}advanced/documentdetect.html), if you set [`enableAutoDetect`]({{ site.api }}class/captureviewer.html#enableautodetect) to `true`, real-time border detection in video stream will be enabled.\n\n```typescript\ncaptureViewer.enableAutoDetect = true;\n```\n\n### Auto capture\n\nWhen [`enableAutoCapture`]({{ site.api }}class/captureviewer.html#enableautocapture) is set to `true`, the capture viewer will capture frame automatically.\n\n```typescript\ncaptureViewer.enableAutoCapture = true;\n```\n\n> If the auto detect is disabled, it will automatically capture a frame every 1 second by default. It can be set by [autoCaptureDelay]({{ site.api }}interface/captureviewerconfig.html#autocapturedelay).\n\n> If the auto detect is enabled, automatic capturing will only be performed when the detection result meets expectations. \n\n## FAQ\n\n### What cameras are supported?\n\nCapture Viewer uses the [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) API to access the camera. Normally, the device's built-in cameras and UVC cameras are supported.\n\n### Why can't I use my camera?\n\nThis feature is available only in secure contexts (HTTPS or localhost). In addition, if the user denies permission, or the matching media is not available, it will reject your request with `NotAllowedError` or `NotFoundError` DOMException respectively.\n",
-      "breadcrumb": "Capture Viewer"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - CaptureViewer Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/captureviewer.html",
-      "content": "# CaptureViewer Class\n\nCapture Viewer is used to control camera, play video stream, and capture the images from camera.\n\n## API Index\n\n**Create and Destroy Instances** \n\n| API Name       | Description                                   |\n| ------------ | --------------------------------------------- |\n| [`CaptureViewer()`](#captureviewer) | Default constructor of a `CaptureViewer` instance. |\n| [`destroy()`](#destroy)             | Destroy the `CaptureViewer` instance.                             |\n\n**Viewer Control**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`bindContainer()`](#bindcontainer)     | Bind the viewer to the specified container.                  |\n| [`unbindContainer()`](#unbindcontainer) | Unbind the viewer from the specified container.              |\n| [`isBoundContainer`](#isboundcontainer) | Return whether the viewer is bound to a container. |\n| [`getStyle()`](#getstyle)            | Get the style object of `CaptureViewer`.                        |\n| [`updateStyle()`](#updatestyle)        | Update the style object of `CaptureViewer`.                     |\n| [`getUiConfig()`](#getuiconfig)         | Get current `UiConfig` object.                               |\n| [`updateUiConfig()`](#updateuiconfig)     | Update `UiConfig` object.                                    |\n| [`show()`](#show)                | Show the viewer.                                             |\n| [`hide()`](#hide)                | Hide the viewer.                                             |\n| [`isVisible`](#isvisible)        | Return whether the viewer is shown or hidden.      |\n\n**Document Control**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`openDocument()`](#opendocument)        | Open the specified document by document uid.                 |\n| [`closeDocument()`](#closedocument)       | Close current document.                                      |\n| [`currentDocument`](#currentdocument)   | Return the object of the current document.         |\n\n**Camera Control**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`play()`](#play)                 | Play the camera video stream.                                |\n| [`stop()`](#stop)                 | Stop the camera video stream.                                |\n| [`capture()`](#capture)              | Capture a frame from video stream.                           |\n| [`getAllCameras()`](#getallcameras)        | Return information of all available cameras on the device.   |\n| [`selectCamera()`](#selectcamera)         | Select a camera as the video source.                         |\n| [`getCurrentCamera()`](#getcurrentcamera)     | Return information about the current camera.                 |\n| [`getCurrentResolution()`](#getcurrentresolution) | Return the resolution of the current video input.            |\n| [`turnOnTorch()`](#turnontorch)          | Turn on the torch/flashlight if the current camera supports it. |\n| [`turnOffTorch()`](#turnofftorch)         | Turn off the torch/flashlight.                               |\n| [`enableAutoCapture`](#enableautocapture)           | Specify or return whether to enable automatic capture.       |\n| [`enableAutoDetect`](#enableautodetect)            | Specify or return whether to enable automatic border detection in video stream. |\n| [`acceptedPolygonConfidence`](#acceptedpolygonconfidence)   | Specify or return the confidence when detecting the border.  |\n| [`maxFrameNumber`](#maxframenumber)              | Specify or return the maximum number of frames detected per second. |\n\n\n**Events**\n\n| API Name | Description                                        |\n| -------- | -------------------------------------------------- |\n| [`on()`](#on)     | Bind a listener to the specified event.            |\n| [`off()`](#off)    | Unbind event listener(s) from the specified event. |\n\n***Integrated Events***\n\n| Event Name    |\n| ------------- |\n| [`resized`](#resized)       |\n| [`played`](#played)         |\n| [`stopped`](#stopped)       |\n| [`captured`](#captured)     |\n| [`cameraChanged`](#camerachanged) |\n| [`click`](#click)           |\n| [`dblclick`](#dblclick)     |\n| [`rightclick`](#rightclick) |\n| [`visibilityChanged`](#visibilitychanged) |\n| [`paginationChanged`](#paginationchanged)                   |\n\n## Create and Destroy Instances\n\n### CaptureViewer()\n\nDefault constructor of a `CaptureViewer` instance.\n\n**Syntax**\n\n```typescript\nnew Dynamsoft.DDV.CaptureViewer(options?: CaptureViewerConstructorOptions);\n```\n\n**Parameters**\n\n`options`: The constructor options for a `CaptureViewer` instance. Please refer to [`CaptureViewerConstructorOptions`]({{ site.api }}interface/captureviewerconstructoroptions.html).\n\n**Code Snippet**\n\n```typescript\nconst captureViewer = new Dynamsoft.DDV.CaptureViewer({\n    container: document.getElementById(\"viewer\"),\n});\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                                     \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                           \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match.                                 \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license.  \n -80050 | DDV.Core.init() has not been set up yet.   \n -80051 | DDV.Core.init() has not been completed.   \n\n**Warning**\n\n Error Code | Error Message                                                 \n ---------- | ------------------------------------------------------------ \n -80315     | DocumentDetect needs to be configured by Dynamsoft.DDV.setProcessingHandler to enable the document detection feature. \n\n### destroy()\n\nDestroy the `CaptureViewer` instance.\n\n**Syntax**\n\n```typescript\ndestroy(): void;\n```\n\n**Code Snippet**\n\n```typescript\ncaptureViewer.destroy();\n```\n\n## Viewer Control\n\n### bindContainer()\n\nBind the viewer to the specified container.\n\n**Syntax**\n\n```typescript\nbindContainer(container: string | HTMLElement): void;\n```\n\n**Parameters**\n\n`container`: The container which is used to show the viewer. Its `id` or `HTMLElement` is acceppted.\n\n**Code Snippet**\n\n```typescript\n// Assume there is a container with id \"viewercontainer\" on the page.\ncaptureViewer.bindContainer(\"viewercontainer\");\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80301 | The specified container does not exist. \n\n**Remark**\n\n- A viewer can only be bound to one container at once. If you bind the viewer to another container when it has been bound to a container, the viewer will be bound to the new container and unbound from the old container automatically. \n\n### unbindContainer()\n\nUnbind the viewer from the specified container.\n\n**Syntax**\n\n```typescript\nunbindContainer(): void;\n```\n\n**Code Snippet**\n\n```typescript\ncaptureViewer.unbindContainer();\n```\n\n### isBoundContainer\n\nReturn whether the viewer is bound to a container.\n\n**Syntax**\n\n```typescript\nreadonly isBoundContainer: boolean;\n```\n\n### getStyle()\n\nGet the style object of `CaptureViewer`.\n\n**Syntax**\n\n```typescript\ngetStyle(captureViewerStyleName: CaptureViewerStyleName): CaptureViewerStyle | null;\n```\n\n**Parameters**\n\n`captureViewerStyleName`: A `CaptureViewerStyleName` can be one of two types.\n\n```typescript\ntype CaptureViewerStyleName = \"canvasStyle\" | \"quadSelectionStyle\";\n```\n\n**Return values**\n\nThe style object. Please refer to [Style Interfaces]({{ site.api }}interface/styleinterface/index.html).\n\n**Code Snippet**\n\n```typescript\n// Get canvasStyle object;\nconst canvasStyle = captureViewer.getStyle(\"canvasStyle\");\n```\n\n**Warning**\n\n Error Code  | Error Message                                                            | API Return Value\n--------|-------------------------------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `null`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `null`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `null`\n\n### updateStyle()\n\nUpdate the style object of `CaptureViewer`.\n\n**Syntax**\n\n```typescript\nupdateStyle(captureViewerStyleName: CaptureViewerStyleName, captureViewerStyle: CaptureViewerStyle): boolean;\n```\n\n**Parameters**\n\n`captureViewerStyleName`: A `CaptureViewerStyleName` can be one of two types.\n\n```typescript\ntype CaptureViewerStyleName = \"canvasStyle\" | \"quadSelectionStyle\";\n```\n\n`captureViewerStyle`: The style object. Please refer to [Style Interfaces]({{ site.api }}interface/styleinterface/index.html)..\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n- First method\n\n    ```typescript\n    // Get style object;\n    const canvasStyle = captureViewer.getStyle(\"canvasStyle\");\n\n    // Modify the style object.\n    canvasStyle.background = \"red\";\n    canvasStyle.border = \"1px solid green\";\n\n    // Update canvas style;\n    captureViewer.updateStyle(\"canvasStyle\", canvasStyle);\n    ```\n\n- Second method\n\n    ```typescript\n    // Update the style object directly\n    captureViewer.updateStyle(\"canvasStyle\", {\n        background: \"red\",\n        border: \"1px solid green\",\n    });\n    ```\n\n**Warning**\n\n Error Code  | Error Message                                                            | API Return Value\n--------|-------------------------------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `false`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `false`\n\n\n**Remark**\n\n- The updates are independent of whether the viewer is displayed and are updated in real time.\n\n### getUiConfig()\n\nGet current `UiConfig` object.\n\n**Syntax**\n\n```typescript\ngetUiConfig(): UiConfig;\n```\n\n**Return Value**\n\nThe [`UiConfig`]({{ site.api }}interface/uiconfig.html) object.\n\n**Code Snippet**\n\n```typescript\nconst viewerUi = captureViewer.getUiConfig();\n```\n\n### updateUiConfig()\n\nUpdate `UiConfig` object.\n\n**Syntax**\n\n```typescript\nupdateUiConfig(uiConfig: UiConfig): boolean;\n```\n\n**Parameters**\n\n`uiConfig`: The [`UiConfig`]({{ site.api }}interface/uiconfig.html) to update.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst viewerUi = Dynamsoft.DDV.getDefaultUiConfig(\"captureViewer\");\nconst header = viewerUi.children[0];\nheader.children.splice(0,1); //Remove Resolution element\ncaptureViewer.updateUiConfig(viewerUi);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n -80313 | The element *XXX(ElementName)* is not supported in *XXX(ClassName)* class.      | `false`\n\n**Remark**\n\n- The updates are independent of whether the viewer is displayed and are updated in real time.\n\n### show()\n\nShow the viewer.\n\n**Syntax**\n\n```typescript\nshow(): void;\n```\n\n**Code Snippet**\n\n```typescript\ncaptureViewer.show();\n```\n\n**Remark**\n\n- The viewer is shown automatically when it is created.\n\n### hide()\n\nHide the viewer.\n\n**Syntax**\n\n```typescript\nhide(): void;\n```\n\n**Code Snippet**\n\n```typescript\ncaptureViewer.hide();\n```\n\n### isVisible\n\nReturn whether the viewer is shown or hidden.\n\n**Syntax**\n\n```typescript\nreadonly isVisible: boolean;\n```\n\n**Remark**\n\n- The viewer is shown automatically when it is created which means the default value of `isVisible` is `true`.\n\n## Document Control\n\n### openDocument()\n\nOpen the specified document.\n\n**Syntax**\n\n```typescript\nopenDocument(docUid: string | doc: IDocument): void;\n```\n\n**Parameters**\n\n`docUid`: The uid of the specified document. \n\n`doc`: The object of the document to open. Please refer to [IDocument]({{ site.api }}interface/idocument/index.html).\n\n**Code Snippet**\n\n```typescript\n// Assume there is a document whose id is \"lnn0ll9o124\".\ncaptureViewer.openDocument(\"lnn0ll9o124\");\n\n// OR\n// Assume there is a document object firstDoc.\nconst docUid = firstDoc.uid;\ncaptureViewer.openDocument(docUid);\ncaptureViewer.openDocument(firstDoc);\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: docUid or doc is invalid.   \n -80102 | *XXX(API)*: docUid or doc is missing.   \n -80104 | *XXX(API)*: The specified document(s) do not exist.  \n\n**Remark**\n\n- If another ducument is opened when there is a document already opened, the opened document will be closed automatically.\n- If there are already pages in the opened document, the number of existing pages and the preview image of the last page will appear in the elements `Dynamsoft.DDV.Elements.ImagePreview`.\n\n### closeDocument()\n\nClose current document.\n\n**Syntax**\n\n```typescript\ncloseDocument(): boolean; \n```\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\ncaptureViewer.closeDocument();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `false`\n\n### currentDocument\n\nReturn the object of the current document.\n\n**Syntax**\n\n```typescript\nreadonly currentDocument: IDocument | null;\n```\n\n**Code Snippet**\n\n```typescript\nconst currentDoc = captureViewer.currentDocument;\n```\n\n**See Also**\n\n[IDocument]({{ site.api }}interface/idocument/index.html)\n\n## Camera Control\n\n### play()\n\nPlay the camera video stream.\n\n**Syntax**\n\n```typescript\nplay(videoConfig?: VideoConfig): Promise<void>;\n```\n\n**Parameter**\n\n`videoConfig`: The object [`VideoConfig`]({{ site.api }}interface/videoconfig.html) which can be used to set resolution, etc.\n\n**Code Snippet**\n\n```typescript\nconst captureViewer = new Dynamsoft.DDV.CaptureViewer({\n    container: document.getElementById(\"viewer\"),\n});\nawait captureViewer.play({\n     resolution: [1080, 720], \n     fill: true, \n});\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80401 | The specified camera is occupied.   \n -80403 | Not HTTPS, failed to play the video stream. \n -80405 | No camera available.\n -80406 | The selected camera is denied by browser.\n\n**Remark**\n\n- The value of `videoConfig` will be remembered and automatically applied the next time `play()` is called, unless another `videoConfig` is specified.\n\n### stop()\n\nStop the camera video stream.\n\n**Syntax**\n\n```typescript\nstop(): void;\n```\n\n**Code Snippet**\n\n```typescript\ncaptureViewer.stop();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80402 | No video stream is played.\n\n### capture()\n\nCapture a frame from video stream.\n\n**Syntax**\n\n```typescript\ncapture(): Promise<Blob>;\n```\n\n**Return value**\n\nThe Blob of the captured image.\n\n**Code Snippet**\n\n```typescript\nconst captureViewer = new Dynamsoft.DDV.CaptureViewer({\n    container: document.getElementById(\"viewer\"),\n});\nawait captureViewer.play( {\n     resolution: [1080, 720], \n     fill: true, \n});\n\nconst capturedPage = await captureViewer.capture();\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80402 | No video stream is played.\n -80407 | No bound container.\n\n**Remark**\n\n- If there is no document opened while capturing, a new document will be created and opened automatically.\n\n### getAllCameras()\n\nReturn information of all available cameras on the device.\n\n**Syntax**\n\n```typescript\ngetAllCameras(): Promise<VideoDeviceInfo[]>;\n```\n\n**Return value**\n\nA promise resolving to an array of [`VideoDeviceInfo`]({{ site.api }}interface/videodeviceinfo.html) objects.\n\n**Code Snippet**\n\n```typescript\nconst cameras = await captureViewer.getAllCameras();\n```\n\n### selectCamera()\n\nSelect a camera as the video source.\n\n**Syntax**\n\n```typescript\nselectCamera(cameraObjectOrDeviceID: VideoDeviceInfo | string): Promise<PlayCallbackInfo>;\n```\n\n**Parameters**\n\n`cameraObjectOrDeviceID`: Specify the camera by an object [`VideoDeviceInfo`]({{ site.api }}interface/videodeviceinfo.html) or the device id string.\n\n**Return value**\n\nA promise resolving to a [`PlayCallbackInfo`]({{ site.api }}interface/playcallbackinfo.html) object.\n\n**Code Snippet**\n\n```typescript\nconst cameras = await captureViewer.getAllCameras();\nif (cameras.length) {\n    await captureViewer.selectCamera(cameras[0]);\n}\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.   \n -80400 | The specified camera does not exist.         \n -80401 | The specified camera is occupied.            \n\n**Remark**\n\n- If called before [`play()`](#play), the selected camera will be used. Otherwise, the system will decide which one to use.\n\n### getCurrentCamera()\n\nReturn information about the current camera.\n\n**Syntax**\n\n```typescript\ngetCurrentCamera(): VideoDeviceInfo;\n```\n\n**Parameters**\n\nNone.\n\n**Return value**\n\nA [`VideoDeviceInfo`]({{ site.api }}interface/videodeviceinfo.html) object with details about the current camera.\n\n**Code Snippet**\n\n```typescript\nconst currentCamera = captureViewer.getCurrentCamera();\nconsole.log(\"Current camera is \"currentCamera.label);\n```\n\n### getCurrentResolution()\n\nReturn the resolution of the current video input.\n\n**Syntax**\n\n```typescript\ngetCurrentResolution(): [number, number]; //current resolution\n```\n\n**Parameters**\n\nNone.\n\n**Return value**\n\nAn array of two numbers representing the resolution in the sequence of `[width, height]`.\n\n**Code Snippet**\n\n```typescript\nconst currentRes = captureViewer.getCurrentResolution();\nconsole.log(\"Current resolution is \" + currentRes[0] + \" x \" + currentRes[1]);\n```\n\n### turnOnTorch()\n\nTurn on the torch/flashlight if the current camera supports it.\n\n**Syntax**\n\n```typescript\nturnOnTorch(): Promise<void>; \n```\n\n**Return value**\n\nA promise that resolves when the operation succeeds.\n\n**Code Snippet**\n\n```typescript\nawait captureViewer.turnOnTorch();\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80402  | No video stream is played.                  \n -80404 | The camera does not support a flashlight.\n\n**Remark**\n\n- This method should be called when the camera is played. \n- Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. \n- Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported.\n\n### turnOffTorch()\n\nTurn off the torch/flashlight.\n\n**Syntax**\n\n```typescript\nturnOffTorch(): Promise<void>;\n```\n\n**Return value**\n\nA promise that resolves when the operation succeeds.\n\n**Code Snippet**\n\n```typescript\nawait captureViewer.turnOffTorch();\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80402  | No video stream is played.                  \n -80404 | The camera does not support a flashlight.\n\n**Remark**\n\n- This method should be called when the camera is played. \n- Note that it only works with Chromium-based browsers such as Edge and Chrome on Windows or Android. Other browsers such as Firefox or Safari are not supported. \n- Note that all browsers on iOS (including Chrome) use WebKit as the rendering engine and are not supported.\n\n### enableAutoCapture\n\nSpecify or return whether to enable automatic capture. \n\n**Syntax**\n\n```typescript\nenableAutoCapture: boolean; \n```\n\n**Code Snippet**\n\n```typescript\ncaptureViewer.enableAutoCapture = true;\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n\n**Remark** \n\n- If it is not specified in [`viewerConfig`]({{ site.api }}interface/captureviewerconstructoroptions.html#viewerconfig) while creating the viewer additionally, the default value is `false`.\n- If the auto detect is disabled, it will automatically capture a frame every 1 second by default. It can be set by [autoCaptureDelay]({{ site.api }}interface/captureviewerconfig.html#autocapturedelay).\n- If the auto detect is enabled, automatic capturing will only be performed when the detection result meets expectations. See also [`enableAutoDetect`](#enableautodetect).\n\n### enableAutoDetect\n\nSpecify or return whether to enable automatic border detection in video stream.\n\n**Syntax**\n\n```typescript\nenableAutoDetect: boolean; \n```\n\n**Code Snippet**\n\n```typescript\ncaptureViewer.enableAutoDetect = true;\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80315      | DocumentDetect needs to be configured to enable the document detection feature.\n\n**Remark**\n\n- If it is not specified in [`viewerConfig`]({{ site.api }}interface/captureviewerconstructoroptions.html#viewerconfig) while creating the viewer additionally, the default value is `false`. \n- This API only takes effect when [`DocumentDetect`]({{ site.api }}class/advanced/documentdetect.html) is set by [`setProcessingHandler()`]({{ site.api }}namespace/ddv.html#static-setprocessinghandler).\n\n### acceptedPolygonConfidence\n\nSpecify or return the threshold confidence level when detecting boundaries.\n\n**Syntax**\n\n```typescript\nacceptedPolygonConfidence: number; \n```\n\n**Code Snippet**\n\n```typescript\ncaptureViewer.acceptedPolygonConfidence = 60;\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n\n**Remark**\n\n- If it is not specified in [`viewerConfig`]({{ site.api }}interface/captureviewerconstructoroptions.html#viewerconfig) while creating the viewer additionally, the default value is 80. \n- The range of available values is [0,100] on a percentage scale.\n- The higher the setting, the more accurate the automatic border detection.\n\n### maxFrameNumber\n\nSpecify or return the maximum number of frames detected per second.\n\n**Syntax**\n\n```typescript\nmaxFrameNumber: number; \n```\n\n**Code Snippet**\n\n```typescript\ncaptureViewer.maxFrameNumber = 3;\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n\n**Remark**\n\n- If it is not specified in [`viewerConfig`]({{ site.api }}interface/captureviewerconstructoroptions.html#viewerconfig) while creating the viewer additionally, the default value is 10. \n- The value range is (0,60].\n\n## Events\n\n### on()\n\nBind a listener to the specified event. \n\n**Syntax**\n\n```typescript\non(eventName: EventName, listener:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It can be [an integrated event name](#integrated-events) or a custom event name configured through [`UiConfig`-`events`]({{ site.api }}interface/uiconfig.html#events).\n\n`listener`: Specify the listener.\n\n**Code Snippet**\n\n```typescript\n// Bind a listener to the integrated event resized.\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.oldWidth);\n    console.log(e.newWidth);\n};\n\ncaptureViewer.on(\"resized\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n\n### off()\n\nUnbind event listener(s) from the specified event. \n\n**Syntax**\n\n```typescript\noff(eventName: EventName, listener?:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It can be [an integrated event name](#integrated-events) or a custom event name configured through [`UiConfig`-`events`]({{ site.api }}interface/uiconfig.html#events).\n\n`listener`: Specify the listener. If no listener is specified, unbind all event listeners from the specified event.\n\n**Code Snippet**\n\n```typescript\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.oldWidth);\n    console.log(e.newWidth);\n};\n\ncaptureViewer.on(\"resized\", eventFunc);\n\n// Unbind the specified event listener.\ncaptureViewer.off(\"resized\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n### Integrated Events\n\n#### resized\n\nTriggered when the viewer is resized.\n\n**Callback**\n\n`ResizedEvent`: An EventObject.\n\n**Attributes**\n\n`oldWidth`: The old width of the viewer.\n\n`oldHeight`: The old height of the viewer.\n\n`newWidth`: The new width of the viewer.\n\n`newHeight`: The new height of the viewer.\n\n#### played\n\nTriggered when the camera video stream is played.\n\n**Callback**\n\n`PlayedEvent`: An EventObject.\n\n**Attributes**\n\n`deviceId`: The camera device id.\n\n`resolution`: The resolution used.\n\n#### stopped\n\nTriggered when the camera video stream is stopped.\n\n**Callback**\n\n`StoppedEvent`: An EventObject.\n\n**Attributes**\n\n`deviceId`: The camera device id.\n\n#### captured\n\nTriggered when a frame is captured.\n\n**Callback**\n\n`CapturedEvent`: An EventObject.\n\n**Attributes**\n\n`pageUid`: The pageUid of the captured image.\n\n#### cameraChanged\n\nTriggered when the used camera is changed.\n\n**Callback**\n\n`CameraChangedEvent`: An EventObject.\n\n**Attributes**\n\n`oldDeviceId`: The old camera device id.\n\n`newDeviceId`: The new camera device id.\n\n#### paginationChanged\n\nTriggered when the viewer's current page number or the page count is changed. It will return an [`IPaginationChangedEvent`](/api/interface/ipaginationchangedevent.md) object.\n\n#### visibilityChanged\n\nTriggered when the viewer's visibility is changed. It will return an `isVisible` boolean value.\n\n\n#### Mouse Events\n\n##### click\n\nTriggered when click in the viewer's viewing area. On mobile device, triggered when tap in the viewer's viewing area.\n\n##### dblclick\n\nTriggered when double click in the viewer's viewing area.\n\n##### rightclick\n\nTriggered when right click in the viewer's viewing area. On mobile device, triggered when long-tap in the viewer's viewing area.\n\n\n**Callback for mouse events**\n\n `IPointerEvent`: An EventObject.\n\n**Attributes**\n\n`index`: The page index.\n\n`pageUid`: The page uid.\n\n`imageX`: The relative x-coordinate of the click pointer on the image.\n\n`imageY`: The relative y-coordinate of the click pointer on the image.\n\n`canvasX`: The relative x-coordinate of the click pointer on the canvas.\n\n`canvasY`: The relative x-coordinate of the click pointer on the canvas.\n\n`nativeEvent`: [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)",
-      "breadcrumb": "CaptureViewer Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface CaptureViewerConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/captureviewerconfig.html",
-      "content": "# CaptureViewerConfig\n\n## Syntax\n\n```typescript\ninterface CaptureViewerConfig {\n    canvasStyle?: CanvasStyle;\n    quadSelectionStyle?: QuadSelectionStyle;\n    enableTorch?: boolean; \n    enableAutoCapture?: boolean;\n    enableAutoDetect?: boolean;\n    acceptedPolygonConfidence?: number;\n    autoCaptureDelay?: number;\n    maxFrameNumber?: number;\n}\n```\n\n## Attributes\n\n### canvasStyle\n\nThe style of canvas of the viewer. Please refer to [`CanvasStyle`]({{ site.api }}interface/styleinterface/canvasstyle.html).\n\n### quadSelectionStyle\n\nThe style of rectangular selection. Please refer to [`QuadSelectionStyle`]({{ site.api }}interface/styleinterface/quadselectionstyle.html).\n\n### enableTorch\n\nSpecify whether to turn on the flashlight.\n\nDefault value: `false`\n\n### enableAutoCapture\n\nSpecify whether to enable automatic capture.\n\nDefault value: `false`\n\n### enableAutoDetect\n\nSpecify whether to enable automatic border detection in video stream.\n\nDefault value: `false`\n\n### acceptedPolygonConfidence\n\nSpecify the threshold confidence level when detecting boundaries. The value range is [0,100].\n\nDefault value: 80\n\n### autoCaptureDelay\n\nSpecify the delay for auto capture. The unit is millisecond.\n\nDefault value: 1000\n\n### maxFrameNumber\n\nSpecify the maximum number of frames detected per second.\n\nDefault value: 10\n\n## Related\n\n- [`CaptureViewerConstructorOptions`]({{ site.api }}interface/captureviewerconstructoroptions.html)\n",
-      "breadcrumb": "Interface CaptureViewerConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface CaptureViewerConstructorOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/captureviewerconstructoroptions.html",
-      "content": "# CaptureViewerConstructorOptions\n\n## Syntax\n\n```typescript\ninterface CaptureViewerConstructorOptions {\n    container?: string | HTMLElement;\n    keyboardInteractionConfig?: KeyboardInteractionConfig;\n    viewerConfig?: CaptureViewerConfig;\n    uiConfig?: UiConfig;\n    groupUid?: string;\n}\n```\n\n## Attributes\n\n### container\n\nThe container which is used to show the viewer. Its `id` or `HTMLElement` is accepted.\n\n### keyboardInteractionConfig\n\nThis configures the use of keyboard shortcuts for the viewer - please see [`KeyboardInteractionConfig`]({{ site.api }}interface/keyboardinteractionconfig.html) for details. If not specified, all keyboard shortcuts are disabled by default.\n\n### viewerConfig\n\nThe configurations of viewer, please refer to [`CaptureViewerConfig`]({{ site.api }}interface/captureviewerconfig.html). If it is not specified, the [default configuration]({{ site.viewer }}viewerconfig.html#captureviewerconfig) will be applied.\n\n### uiConfig\n\nThe UI layout configurations of viewer, please refer to [`UiConfig`]({{ site.api }}interface/uiconfig.html). If it is not specified, the [default UI]({{ site.ui }}default_ui.html#capture-viewer) will be applied.\n\n### groupUid\n\nThe uid of viewers' group. If it is not specified, a random groupUid will be generated.\n\n{% comment %} Please refer to [Data synchronisation between viewers]({{ site.features }}viewers/datasync.html). {% endcomment %}\n\n## Related\n\n- [`CaptureViewer()`]({{ site.api }}class/captureviewer.html#captureviewer)\n",
-      "breadcrumb": "Interface CaptureViewerConstructorOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface CheckboxStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/styleinterface/checkboxstyle.html",
-      "content": "# CheckboxStyle\n\n## Syntax\n\n```typescript\ninterface CheckboxStyle {\n    visibility?: string; \n    width?: string; \n    height?: string; \n    border?: string; \n    borderRadius?: string; \n    background?: string;\n    opacity?: number;\n    checkMarkColor?: string;\n    checkMarkLineWidth?: string; \n    left?: string; \n    top?: string; \n    right?: string; \n    bottom?: string; \n    translateX?: string; \n    translateY?: string; \n}\n```\n\n## Attributes\n\n### visibility\n\nSpecify whether to show the checkbox. \n\nSupported value: `hidden`, `visible`\n\n### width\n\nThe width of checkbox. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n### height\n\nThe height of checkbox. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n### border\n\nThe border style of checkbox. It contains three parts, borderWidth, borderStyle and borderColor.\n\nOnly takes effect when set borderWidth, borderStyle and borderColor at the same time.\n\nborderWidth only supports `px` unit.\n\nborderStyle only supports `dashed`, `solid`.\n\n**Example**\n\n```typescript\nborder: \"2px dashed red\", \n```\n\n### borderRadius\n\nThe border radius of checkbox. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n### background\n\nThe background style.\n\n**Example**\n\n```typescript\nbackground: \"rgba(255,255,255,0)\", \n```\n\n### opacity\n\nThe opacity of the whole checkbox. The value range is [0,1], value which is greater than 1 will default to 1.\n\n### checkMarkColor\n\nThe color of check mark.\n\n### checkMarkLineWidth\n\nThe width of check mark. For example, `\"1px\"`.\n\n![Checkbox](/assets/imgs/checkbox.png)\n\n### left, top, right, bottom\n\nPosition the checkbox. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n**Remark**\n\n- To position a checkbox, one of `left` and `right` and one of `top` and `bottom` must be set, with the remaining positioning attributes should be set to empty strings. For example, \n    ```typescript\n    left: \"10%\",\n    top: \"10%\",\n    right: \"\",\n    bottom: \"\",\n    ```\n    OR\n    ```typescript\n    left: \"\",\n    top: \"\",\n    right: \"10px\",\n    bottom: \"10px\",\n    ```\n    OR\n    ```typescript\n    left: \"10px\",\n    top: \"\",\n    right: \"\",\n    bottom: \"10px\",\n    ```\n    OR\n    ```typescript\n    left: \"\",\n    top: \"10%\",\n    right: \"10%\",\n    bottom: \"\",\n    ```\n- If both `left` and `right` are set, only `left` takes effect. If both `top` and `bottom` are set, only `top` takes effect.\n\n### translateX\n\nReposition the checkbox horizontally. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n| number in string                             | checkbox shifts along x-axis    |\n| -------------------------------------------- | ------------------------------- |\n| positive, for example, `\"10px\"` or `\"10%\"`   | →                               |\n| negative, for example, `\"-10px\"` or `\"-10%\"` | ←                               |\n\n### translateY\n\nReposition the checkbox vertically. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n| number in string                             | checkbox shifts along y-axis    |\n| -------------------------------------------- | ------------------------------- |\n| positive, for example, `\"10px\"` or `\"10%\"`   | ↓                               |\n| negative, for example, `\"-10px\"` or `\"-10%\"` | ↑                               |\n\n![Position Checkbox](/assets/imgs/positioncheckbox.png)",
-      "breadcrumb": "Interface CheckboxStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface ConfigResult",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/configresult.html",
-      "content": "# ConfigResult\n\n## Syntax\n\n```typescript\ninterface ConfigResult {\n    licenseInfo: any;\n    deviceUuid?: string;\n}\n```\n\n## Attributes\n\n### licenseInfo\n\nThe license info of the configured license string.\n\n### deviceUuid\n\nThe UUID of the client device. Please refer to [Client UUID](https://www.dynamsoft.com/license-server/docs/about/terms.html#client-uuid)\n\n## Related\n\n- [`init()`]({{ site.api }}namespace/ddv_core.html#init)\n",
-      "breadcrumb": "Interface ConfigResult"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface CreateDocumentOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/createdocumentoptions.html",
-      "content": "# CreateDocumentOptions\n\n## Syntax\n\n```typescript\ninterface CreateDocumentOptions {\n    name?: string; \n    author?: string; \n    creationDate?: string; \n}\n```\n\n## Attributes\n\n### name\n\nSpecify the name of the new document.\n\n### author\n\nSpecify the author of the new document.\n\n### creationDate\n\nSpecify the creation date of the new document. Please note that the argument should be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`. It also supports the older format `D:YYYYMMDDHHmmSS`. If this format is used (e.g., `D:20230101085959`), the system will automatically add the relevant time zone information, resulting in a complete representation like `D:20230101085959-08'00'`.\n\n## Related\n\n- [`createDocument()`]({{ site.api }}class/documentmanager.html#createdocument)\n",
-      "breadcrumb": "Interface CreateDocumentOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Viewer Style - Customize",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/viewer/customize.html",
-      "content": "# How to customize viewer \n\nAltough DDV has provided the [default ViewerConfig]({{ site.viewer }}viewerconfig.html#default-viewerconfig) for each type of viewer, developer can also customize it as needed.\n\nViewerConfig contains two parts of configuration, one is the configuration on the viewer style and the other is the configuration on the viewer properties.\n\n## Viewer Style\n\n### Customize styles while creating a viewer\n\nTake the edit viewer as an example, according to the structure [`EditViewerConfig`]({{ site.api }}interface/editviewerconfig.html), there are three styles which can be configured, [`canvasStyle`]({{ site.api }}interface/editviewerconfig.html#canvasstyle), [`pageStyle`]({{ site.api }}interface/editviewerconfig.html#pagestyle) and [`quadSelectionStyle`]({{ site.api }}interface/editviewerconfig.html#quadselectionstyle).\n\n**Use case**\n\nCustomize `pageStyle` while creating an edit viewer.\n \n - Step one: Create a `BaseStyle` object which meets the page style you want.\n    ```typescript\n    const newPageStyle = {\n        border: \"2px dashed red\",\n        background: \"grey\",\n    };\n    ```\n\n - Step two: Create the customized viewer config.\n    ```typescript\n    const newViewerConfig = {\n        pageStyle: newPageStyle,\n    };\n    ```\n\n - Step three: Configure the customized viewer config while creating the edit viewer.\n    ```typescript\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        viewerConfig: newViewerConfig,\n    });\n    ```\n\nPlease notice that only the customized style will be modified, and the remaining styles will remain in their default state.\n\n### Update styles dynamically\n\nBesides customize the initial viewer style, DDV also allows update the styles dynamically after the viewer is created by using [`getStyle()`]({{ site.api }}class/editviewer.html#getstyle) & [`updateStyle()`]({{ site.api }}class/editviewer.html#updatestyle).\n\n**Use case**\n\nUpdate the `CanvasStyle` after the edit viewer is created.\n\n```typescript\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"viewer\",\n});\n\nconst newCanvasStyle = editViewer.getStyle(\"canvasStyle\");\nnewCanvasStyle.border = \"2px dashed green\";\nnewCanvasStyle.background = \"white\";\nnewCanvasStyle.cursor = \"pointer\";\n\neditViewer.updateStyle(\"canvasStyle\", newCanvasStyle);\n```\n\n## Viewer Properties\n\nSome properties can also customized, for example, the values of [`minZoom`]({{ site.api }}interface/editviewerconfig.html#minzoom) and [`maxZoom`]({{ site.api }}interface/editviewerconfig.html#maxzoom) can be customized for a edit viewer.\n\n**Use case**\n\nCustomize the `minZoom` and `maxZoom` while creating an edit viewer.\n\n```typescript\nconst newViewerConfig = {\n    minZoom: 0.1, // Set the minimum zoom value to 10%\n    maxZoom: 32,  // Set the maximum zoom value to 3200%\n};\n\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"viewer\",\n    viewerConfig: newViewerConfig,\n});\n```\n\nPlease notice that only the customized properties will be modified, and the remaining properties will remain in their default state.\n\n## Annotation related properties(Edit Viewer-specific)\n\nThe related properties of the drawn annotations are determined by the attributes [`annotationConfig`]({{ site.api }}interface/editviewerconstructoroptions.html#annotationconfig) provided when creating the Edit Viewer.\n\n### Default annotation style \n\n{% comment %}\nWhen [`toolMode`]({{ site.api }}class/editviewer.html#toolmode) is set to `annotation`, you can use the mouse to draw corresponding annotations on the page which is displayed in the Edit Viewer if [`annotationMode`]({{ site.api }}class/editviewer.html#annotationmode) is set to `rectangle` or similar annotation type modes.\n{% endcomment %}\n\nSet a basic style for all annotation types uniformly, \n\n```typescript\nconst baseAnnotationStyle = {\n    borderColor: \"blue\",\n};\n\nconst newDefaultStyleConfig = {\n    rectangle: { ...baseAnnotationStyle,},\n    ellipse: { ...baseAnnotationStyle,},\n    polygon: { ...baseAnnotationStyle,},\n    polyline: { ...baseAnnotationStyle,},\n    line: { ...baseAnnotationStyle,},\n    ink: { ...baseAnnotationStyle,},\n    textBox: { ...baseAnnotationStyle,},\n};\n\nconst newAnnotationConfig = {\n    defaultStyleConfig: newDefaultStyleConfig,\n};\n\nconst defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"viewer\",\n    uiConfig: defaultEditUi,\n    annotationConfig: newAnnotationConfig,\n});\n```\n\n\nIf you want to specify the default style for a certain annotation type, taking the rectangle annotation type as an example,\n\n```typescript\nconst baseAnnotationStyle = {\n    borderColor: \"blue\",\n};\n\nconst newDefaultStyleConfig = {\n    rectangle: { borderColor: \"green\",},\n    ellipse: { ...baseAnnotationStyle,},\n    polygon: { ...baseAnnotationStyle,},\n    polyline: { ...baseAnnotationStyle,},\n    line: { ...baseAnnotationStyle,},\n    ink: { ...baseAnnotationStyle,},\n    textBox: { ...baseAnnotationStyle,},\n};\n\nconst newAnnotationConfig = {\n    defaultStyleConfig: newDefaultStyleConfig,\n\n};\n\nconst defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"viewer\",\n    uiConfig: defaultEditUi,\n    annotationConfig: newAnnotationConfig,\n});\n```\n\nThis way, the default style of the rectangle annotation will be based on the settings specified for `rectangle`, while the styles of other annotation types will still be based on the `baseAnnotationStyle`. Of course, it's possible to specify default values for each type of annotation.\n\n### Ink creation delay\n\nWhen creating an Ink annotation using Edit Viewer UI, intentional delay is applied to allow users to create a multi-stroke annotation. Strokes within a brief delay are considered part of the same annotation. Beyond the delay, strokes are treated as separate annotations. \n\n![InkCreationDelay](/assets/imgs/inkcreationdelay.gif)\n\nThe duration of this delay can be adjusted using the [`inkCreateDelay`]({{ site.api }}interface/annotationconfig.html#inkcreatedelay) attribute, which defaults to 1000ms.\n\n```typescript\nconst newAnnotationConfig = {\n    inkCreateDelay: 2000, // Set to 2000ms\n};\n\nconst defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"viewer\",\n    uiConfig: defaultEditUi,\n    annotationConfig: newAnnotationConfig,\n});\n```\n\n### Display the selected annotation on top of others\n\nBy default, when an annotation is selected, it remains displayed on its original layer. \n\n![DefaultAnnotationSelect](/assets/imgs/defaultannotationselect.gif)\n\nBy setting [`showOnTopWhenSelected`]({{ site.api }}interface/annotationconfig.html#showOnTopWhenSelected) to `true`, you can configure the selected annotation to be displayed on top.\n\n```typescript\nconst newAnnotationConfig = {\n    showOnTopWhenSelected: true,\n};\n\nconst defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"viewer\",\n    uiConfig: defaultEditUi,\n    annotationConfig: newAnnotationConfig,\n});\n```\n\n![TopAnnotationSelect](/assets/imgs/topannotationselect.gif)\n\n### Annotation selection style\n\nDefault annotation selection:\n\n![DefaultAnnotationSelection](/assets/imgs/defaultannotationselection.png)\n\nCustomize the selection style of annotation configuring [`annotationSelectionStyle`]({{ site.api }}interface/annotationconfig.html#annotationselectionstyle). For example,\n\n```typescript\nconst newAnnotationSelectionStyle = {\n    border: \"2px dashed red\", // Customize the border of selection\n};\n\nconst newAnnotationConfig = {\n    annotationSelectionStyle: newAnnotationSelectionStyle,\n};\n\nconst defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"viewer\",\n    uiConfig: defaultEditUi,\n    annotationConfig: newAnnotationConfig,\n});\n```\n\n![ChangeAnnotationSelection](/assets/imgs/changgeannotationselection.png)\n\nIt's worth noting that `annotationSelectionStyle` can also be customized dynamically using [`getStyle()`]({{ site.api }}class/editviewer.html#getstyle) & [`updateStyle()`]({{ site.api }}class/editviewer.html#updatestyle) after the edit viewer is created.\n\n### Toolbar of annnotation\n\nThe toolbar for the annotation appears when it is selected.\n\nDefault toolbar: ![DefaultToolbar](/assets/imgs/defaulttoolbar.png)\n\nAnd currently, the customizable contents are as follows:\n\n- Style of the toolbar, such as width, height, background and so on\n- Palette button\n- Delete button\n\nIt can be customized by the attribute [`toolbarConfig`]({{ site.api }}interface/annotationconfig.html#toolbarconfig).\n\n**Use cases**\n\n- Change the width, height and background of the toolbar\n\n    ```typescript\n    const newToolbar = {\n        style: {\n            width: \"100px\",\n            height: \"50px\",\n            background: \"silver\",\n        },\n    };\n\n    const newAnnotationConfig = {\n        toolbarConfig: newToolbar,\n    };\n\n    const defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        uiConfig: defaultEditUi,\n        annotationConfig: newAnnotationConfig,\n    });\n    ```\n\n    ![ChangeToolbarStyle](/assets/imgs/changetoolbarstyle.png)\n\n- Add tooltip to delete button\n\n    ```typescript\n    const newToolbar = {\n        deleteButton: {\n            tooltip: \"Delete Annotation\",\n        },\n    };\n\n    const newAnnotationConfig = {\n        toolbarConfig: newToolbar,\n    };\n\n    const defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        uiConfig: defaultEditUi,\n        annotationConfig: newAnnotationConfig,\n    });\n    ```\n\n    ![ToolbarButtonTooltip](/assets/imgs/toolbarbuttontooltip.png)\n\n- Add display text to palette and delete buttons\n\n    *In order to show the whole display text, the width of toolbar is also required to change.*\n\n    ```typescript\n    const newToolbar = {\n        style: {\n            width: \"150px\",\n        },\n        paletteButton: {\n            displayText: \"Edit\",\n        },\n        deleteButton: {\n            displayText: \"Delete\",\n        },\n    };\n\n    const newAnnotationConfig = {\n        toolbarConfig: newToolbar,\n    };\n\n    const defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        uiConfig: defaultEditUi,\n        annotationConfig: newAnnotationConfig,\n    });\n    ```\n\n    ![ToolbarButtonDisplayText](/assets/imgs/toolbarbuttondisplaytext.png)\n\n- Hide delete button\n\n    ```typescript\n    const newToolbar = {\n        deleteButton: {\n            style: {\n                display: \"none\",\n            },\n        },\n    };\n\n    const newAnnotationConfig = {\n        toolbarConfig: newToolbar,\n    };\n\n    const defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        uiConfig: defaultEditUi,\n        annotationConfig: newAnnotationConfig,\n    });\n    ```\n\n    ![ToolbarButtonDelete](/assets/imgs/toolbarbuttondelete.png)\n\n- Hide toolbar \n\n    ```typescript\n    const newToolbar = {\n        style: {\n            visibility: \"hidden\",\n        },\n    };\n\n    const newAnnotationConfig = {\n        toolbarConfig: newToolbar,\n    };\n\n    const defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        uiConfig: defaultEditUi,\n        annotationConfig: newAnnotationConfig,\n    });\n    ```\n\n- Swap the order of palette button and delete button\n\n    By default, the palette button is positioned in front of the delete button. If you wish to swap the order of the two buttons, you can refer to the following code:\n\n    ```typescript\n    const newToolbar = {\n        paletteButton: {\n            style:{\n                order: 1,\n            },\n        },\n        deleteButton: {\n            style: {\n                order: 0,\n            },\n        },\n    };\n\n    const newAnnotationConfig = {\n        toolbarConfig: newToolbar,\n    };\n\n    const defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        uiConfig: defaultEditUi,\n        annotationConfig: newAnnotationConfig,\n    });\n    ```\n\n    ![ChanageButtonOrder](/assets/imgs/changetoolbarbuttonorder.png)\n\n\n### Palette of annotation\n\nClicking on the relevant built-in elements or clicking the palette button on the toolbar will bring up the corresponding palette. \n\nDefault palette:\n\n| Annotation relevant built-in elements | Initial palette before drawing                               | Clicking palette button on toolbar                           |\n| ------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |\n| Rectangle/Ellipse/Polygon             | ![DefaultPaletteStroke](/assets/imgs/defaultshapepalettestroke.png)![DefaultPaletteFill](/assets/imgs/defaultshapepalettefill.png) | Same as initial palette                                      |\n| Line/Polyline                         | ![DefaultPaletteStroke](/assets/imgs/defaultlinepalettestroke.png)![DefaultPaletteFill](/assets/imgs/defaultlinepalettefill.png) | Same as initial palette                                      |\n| TextBox                               | ![DefaultPaletteText](/assets/imgs/defaulttextpalettetext.png)![DefaultPaletteStroke](/assets/imgs/defaulttextpalettestroke.png)![DefaultPaletteFill](/assets/imgs/defaulttextpalettefill.png) | Same as initial palette                                      |\n| TextTypewriter                        | ![DefaultPalette](/assets/imgs/defaulttypepalette.png) | Same as initial palette                                      |\n| Stamp Icon                            | ![DefaultPalette](/assets/imgs/defaultstampiconpalettebefore.png) | ![DefaultPalette](/assets/imgs/defaultstampiconpaletteafter.png) |\n| Highlight/Strikeout/Underline                            | ![DefaultPalette](/assets/imgs/default_text_annotation_palette.jpg) | Same as initial palette |\n| Image                                 | N/A                                                          | ![DefaultPalette](/assets/imgs/defaultimagepaletteafter.png) |\n\nCurrently, the customizable contents are as follows:\n\n- Style of the palette, such as width, height, background and so on\n- Color list on the palette\n- Display text on the palette\n\nIt can be customized by the attribute [`paletteConfig`]({{ site.api }}interface/annotationconfig.html#paletteconfig).\n\n**Use cases**\n\n- Change the width, height and background of the palette\n\n    ```typescript\n    const newPalette = {\n        style: {\n            width: \"300px\",\n            height: \"500px\",\n            background: \"silver\",\n        },\n    };\n\n    const newAnnotationConfig = {\n        paletteConfig: newPalette,\n    };\n\n    const defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        uiConfig: defaultEditUi,\n        annotationConfig: newAnnotationConfig,\n    });\n    ```\n\n    ![ChanageStyle](/assets/imgs/changepalettestyle.png)\n\n- Customize the color list\n\n    ```typescript\n    const newColorList = [\"red\", \"green\", \"#0000ff\", \"#ffff00\" , \"rgb(0, 0, 0)\", \"rgb(128, 128, 128)\", \"hsl(0, 0%, 100%)\", \"hsl(350, 100%, 88%)\"];\n\n    const newAnnotationConfig = {\n        paletteConfig: {\n            colorList: newColorList,\n        },\n    };\n\n    const defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        uiConfig: defaultEditUi,\n        annotationConfig: newAnnotationConfig,\n    });\n    ```\n\n    ![ChanageColorList](/assets/imgs/changepalettecolorlist.png)\n\n    - The palette's UI defaults to presenting 27 color circles for display. Consequently, only the first 27 values within the `colorList` array can be utilized and will appear in the UI in a sequential manner. The remaining values in the array will be disregarded.\n    - If the number of values in the `colorList` array are less than 27, after applying the values configured in the array, the remaining color circles will be replaced by custom color circles. \n    - Besides customizing the color list via programming, custom color circles can be set to a specified color by clicking on the circle via the user interface. Similarly, for color circles, the color can be modified by double-clicking on them through the user interface.\n    - Behind 27 the color circles and custom color circles in Fill tab, there is a no fill circle. \n\n    ![ColorList](/assets/imgs/colorlist.png)\n\n- Change the display text on the palette to another language, such as Spanish\n\n    ```typescript\n    const spanishText = {\n        text: \"Texto\",\n        stroke: \"Trazos\",\n        fill: \"Rellene\",\n        opacity: \"Opacidad\",\n        style: \"Estilo\",\n        standardBusiness: \"NegocioEstándar\",\n    };\n\n    const newAnnotationConfig = {\n        paletteConfig: {\n            labels: spanishText,\n        },\n    };\n\n    const defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        uiConfig: defaultEditUi,\n        annotationConfig: newAnnotationConfig,\n    });\n    ```\n\n    ![ChanageDisplayText](/assets/imgs/changepalettedisplaytext.png)",
-      "breadcrumb": "How to Customize UI"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface CustomTag",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/customtag.html",
-      "content": "# CustomTag\n\n## Syntax\n\n```typescript\ninterface CustomTag {\n    id?: number;\n    content?: string;\n    contentIsBase64?: boolean;\n}\n```\n\n## Attributes\n\n### id\n\nThe id of the custom tag.\n\n### content\n\nThe content of the tag. \n\n### contentIsBase64\n\nWhether the content is encoded by Base64. \n\n## Remark\n\nThe content of the tags can be plain text or a base64-encoded string. If it’s encoded, it’ll be decoded when generating the TIFF file.\n\n## Related\n\n- [`SaveTiffSettings`]({{ site.api }}interface/idocument/savetiffsettings.html)",
-      "breadcrumb": "Interface CustomTag"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - CustomViewer Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/customviewer.html",
-      "content": "# CustomViewer Class\n\nCustom Viewer does not have any built-in UI or functionality, it is used for creating your own viewer.\n\n## API Index\n\n**Create and Destroy Instances** \n\n| API Name       | Description                                   |\n| ------------ | --------------------------------------------- |\n| [`CustomViewer()`](#customviewer) | Default constructor of a `CustomViewer` instance. |\n| [`destroy()`](#destroy)             | Destroy the `CustomViewer` instance.                             |\n\n**Viewer Control**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`bindContainer()`](#bindcontainer)     | Bind the viewer to the specified container.                  |\n| [`unbindContainer()`](#unbindcontainer) | Unbind the viewer from the specified container.              |\n| [`isBoundContainer`](#isboundcontainer) | Return whether the viewer is bound to a container. |\n| [`getUiConfig()`](#getuiconfig)         | Get current `UiConfig` object.                               |\n| [`updateUiConfig()`](#updateuiconfig)     | Update `UiConfig` object.                                    |\n| [`show()`](#show)                | Show the viewer.                                             |\n| [`hide()`](#hide)                | Hide the viewer.                                             |\n| [`isVisible`](#isvisible)        | Return whether the viewer is shown or hidden.      |\n\n**Events**\n\n| API Name | Description                                        |\n| -------- | -------------------------------------------------- |\n| [`on()`](#on)     | Bind a listener to the specified event.            |\n| [`off()`](#off)    | Unbind event listener(s) from the specified event. |\n\n### CustomViewer()\n\nDefault constructor of a `CustomViewer` instance.\n\n**Syntax**\n\n```typescript\nnew Dynamsoft.DDV.CustomViewer(options?: CustomViewerConstructorOptions);\n```\n\n**Parameters**\n\n`options`: The constructor options for a `CustomViewer` instance. Please refer to [`CustomViewerConstructorOptions`]({{ site.api }}interface/customviewerconstructoroptions.html).\n\n**Code Snippet**\n\n```typescript\nconst customViewer = new Dynamsoft.DDV.CustomViewer({\n    container: document.getElementById(\"viewer\"),\n});\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                                     \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                           \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match.                                 \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license.  \n -80050 | DDV.Core.init() has not been set up yet.  \n -80051 | DDV.Core.init() has not been completed.   \n\n### destroy()\n\nDestroy the `CustomViewer` instance.\n\n**Syntax**\n\n```typescript\ndestroy(): void;\n```\n\n**Code Snippet**\n\n```typescript\ncustomViewer.destroy();\n```\n\n## Viewer Control\n\n### bindContainer()\n\nBind the viewer to the specified container.\n\n**Syntax**\n\n```typescript\nbindContainer(container: string | HTMLElement): void;\n```\n\n**Parameters**\n\n`container`: The container which is used to show the viewer. Its `id` or `HTMLElement` is acceppted.\n\n**Code Snippet**\n\n```typescript\n// Assume there is a container with id \"viewercontainer\" on the page.\ncustomViewer.bindContainer(\"viewercontainer\");\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80301 | The specified container does not exist. \n\n**Remark**\n\n- A viewer can only be bound to one container at once. If you bind the viewer to another container when it has been bound to a container, the viewer will be bound to the new container and unbound from the old container automatically. \n\n### unbindContainer()\n\nUnbind the viewer from the specified container.\n\n**Syntax**\n\n```typescript\nunbindContainer(): void;\n```\n\n**Code Snippet**\n\n```typescript\ncustomViewer.unbindContainer();\n```\n\n### isBoundContainer\n\nReturn whether the viewer is bound to a container.\n\n**Syntax**\n\n```typescript\nreadonly isBoundContainer: boolean;\n```\n\n### getUiConfig()\n\nGet current `UiConfig` object.\n\n**Syntax**\n\n```typescript\ngetUiConfig(): UiConfig;\n```\n\n**Return Value**\n\nThe [`UiConfig`]({{ site.api }}interface/uiconfig.html) object.\n\n**Code Snippet**\n\n```typescript\nconst viewerUi = customViewer.getUiConfig();\n```\n\n### updateUiConfig()\n\nUpdate `UiConfig` object.\n\n**Syntax**\n\n```typescript\nupdateUiConfig(uiConfig: UiConfig): boolean;\n```\n\n**Parameters**\n\n`uiConfig`: The [`UiConfig`]({{ site.api }}interface/uiconfig.html) to update.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n -80313 | The element *XXX(ElementName)* is not supported in *XXX(ClassName)* class.      | `false`\n\n**Remark**\n\n- The updates are independent of whether the viewer is displayed and are updated in real time.\n\n### show()\n\nShow the viewer.\n\n**Syntax**\n\n```typescript\nshow(): void;\n```\n\n**Code Snippet**\n\n```typescript\ncustomViewer.show();\n```\n\n**Remark**\n\n- The viewer is shown automatically when it is created.\n\n### hide()\n\nHide the viewer.\n\n**Syntax**\n\n```typescript\nhide(): void;\n```\n\n**Code Snippet**\n\n```typescript\ncustomViewer.hide();\n```\n\n### isVisible\n\nReturn whether the viewer is shown or hidden.\n\n**Syntax**\n\n```typescript\nreadonly isVisible: boolean;\n```\n\n**Remark**\n\n- The viewer is shown automatically when it is created which means the default value of `isVisible` is `true`.\n\n## Events\n\n### on()\n\nBind a listener to the specified event. \n\n**Syntax**\n\n```typescript\non(eventName: EventName, listener:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It can be a custom event name configured through [`UiConfig`-`events`]({{ site.api }}interface/uiconfig.html#events).\n\n`listener`: Specify the listener.\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n\n### off()\n\nUnbind event listener(s) from the specified event. \n\n**Syntax**\n\n```typescript\noff(eventName: EventName, listener?:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It can be a custom event name configured through [`UiConfig`-`events`]({{ site.api }}interface/uiconfig.html#events).\n\n`listener`: Specify the listener. If no listener is specified, unbind all event listeners from the specified event.\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  ",
-      "breadcrumb": "CustomViewer Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface CustomViewerConstructorOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/customviewerconstructoroptions.html",
-      "content": "# CustomViewerConstructorOptions\n\n## Syntax\n\n```typescript\ninterface CustomViewerConstructorOptions {\n    container?: string | HTMLElement;\n    uiConfig?: UiConfig;\n}\n```\n\n## Attributes\n\n### container\n\nThe container which is used to show the viewer. Its `id` or `HTMLElement` is acceppted.\n\n### uiConfig\n\nThe UI layout configurations of viewer, please refer to [`UiConfig`]({{ site.api }}interface/uiconfig.html).\n\n## Related\n\n- [`CustomViewer()`]({{ site.api }}class/customviewer.html#customviewer)\n",
-      "breadcrumb": "Interface CustomViewerConstructorOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features - Data Synchronisation between Viewers",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/viewers/datasync.html",
-      "content": "# Data Synchronisation between Viewers\n\n## How to achieve\n\nIf multiple viewers are used at the same time, how to ensure that the data in different viewers is synchronized? \n\nIn this case, you can set the same `groupUid` for each viewer when creating them. \n\n**Use Case**\n\nAfter an edit viewer is generated, the subsequently generated perspective viewer wants to achieve data synchronization with the first edit viewer.\n\n```typescript\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: document.getElementById(\"viewer\"),\n});\n\nconst perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({\n    container: document.getElementById(\"viewer\"),\n    groupUid: editViewer.groupUid, // Set to the same groupUid of the edit viewer\n});\n```\n\nThus, the data is synchronized in the viewers which have the same `groupUid`.\n\n## Data to synchronize\n\nWhich data will be synchronized in detail?\n\n- Current document: In data-synchronized viewers, the current document is always consistent. That is, when a document is opened or closed in a viewer, the opening and closing document operations of other viewers in the same group are synchronized with this viewer. For example, `editViewer` and `perspectiveViewer` are in the same group:\n\n    ```typescript\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: document.getElementById(\"viewer\"),\n    });\n\n    const perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({\n        container: document.getElementById(\"viewer\"),\n        groupUid: editViewer.groupUid, // Set to the same groupUid of the edit viewer\n    });\n\n    // Assume there is a document object firstDoc\n    const docUid = firstDoc.uid;\n    editViewer.openDocument(docUid);\n\n    perpectiveViewer.currentDocument; // Returns firDoc\n    ```\n\n- Current page: When the current page of a viewer changes, the current page of other viewers in the same group will also change synchronously.\n\n    ```typescript\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: document.getElementById(\"viewer\"),\n    });\n\n    const perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({\n        container: document.getElementById(\"viewer\"),\n        groupUid: editViewer.groupUid, // Set to the same groupUid of the edit viewer\n    });\n\n    // Assume there is a document object firstDoc\n    const docUid = firstDoc.uid;\n    editViewer.openDocument(docUid);\n\n    perpectiveViewer.currentDocument; // Returns firDoc\n\n    perspectiveViewer.goToPage(3);\n\n    editViewer.getCurrentPageIndex(); // Returns 3\n    ```\n\n{% comment %} - Page data: When data of a page in a viewer is edited or updated, for example, rotated 90 degrees clockwise, the data changes on this page are synchronized with other viewers in the same group. {% endcomment %}\n",
-      "breadcrumb": "Data Synchronisation between Viewers"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Namespace - Dynamsoft.DDV",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/namespace/ddv.html",
-      "content": "# Dynamsoft.DDV\n\n## Index\n\n**Handler Configuration**\n\n| API Name                        | Description                                       |\n| ------------------------------- | ------------------------------------------------- |\n| [`<static> setProcessingHandler()`](#static-setprocessinghandler) | Set a processing handler to the DDV system.       |\n\n**Members**\n\n| API Name                        | Description                                       |\n| ------------------------------- | ------------------------------------------------- |\n| [`<static> documentManager`](#static-documentmanager)   | [`DocumentManager`]({{ site.api }}class/documentmanager.html) instance.   |\n| [`<static> annotationManager`](#static-annotationmanager)   | [`AnnotationManager`]({{ site.api }}class/annotationmanager.html) instance. |\n\n**Classes**\n\n- [DocumentManager]({{ site.api }}class/documentmanager.html)\n- [AnnotationManager]({{ site.api }}class/annotationmanager.html)\n- [EditViewer]({{ site.api }}class/editviewer.html)\n- [CaptureViewer]({{ site.api }}class/captureviewer.html)\n- [PerspectiveViewer]({{ site.api }}class/perspectiveviewer.html)\n- [BrowseViewer]({{ site.api }}class/browseviewer.html)\n- [CustomViewer]({{ site.api }}class/customviewer.html)\n\n- Advanced\n    - [ImageFilter]({{ site.api }}class/advanced/imagefilter.html)\n    - [DocumentDetect]({{ site.api }}class/advanced/documentdetect.html)\n\n**Methods**\n\n| API Name                        | Description                                       |\n| ------------------------------- | ------------------------------------------------- |\n| [`<static> getDefaultUiConfig()`](#static-getdefaultuiconfig)   | Get default UiConfig object.                      |\n| [`<static> addFonts()`](#static-addfonts)                  | Add font to library.             |\n| [`<static> clearLastError()`](#static-clearlasterror)       | Clear the last error or warning.                  |\n| [`<static> unload()`](#static-unload)               | Unload all DDV resources.                         |\n\n**Properties**\n\n| API Name                        | Description                                       |\n| ------------------------------- | ------------------------------------------------- |\n| [`<static> lastError `](#static-lasterror)             | Return the last error or warning.                 |\n\n**Events**\n\n| API Name | Description                                        |\n| -------- | -------------------------------------------------- |\n| [`<static> on()`](#static-on)     | Bind a listener to the specified event.            |\n| [`<static> off()`](#static-off)    | Unbind event listener(s) from the specified event. |\n\n***Integrated Events***\n\n| Event Name            | Description                          |\n| --------------------- | ------------------------------------ |\n| [`error`](#error)     | Triggered when any error occurs.     |\n| [`warning`](#warning) | Triggered when any warning occurs .  |\n| [`verbose`](#verbose) | Triggered when DDV is running.       |\n| [`info`](#info)       | Triggered during various operations. |\n\n## Handler Configuration\n\n### `<static>` setProcessingHandler()\n\nSet a processing handler to the DDV system.\n\n**Syntax**\n\n```typescript\nstatic setProcessingHandler(handlerType: HandlerType, handler: any): void;\n```\n\n**Parameters**\n\n`handlerType`: The type of processing handler. \n\nA `HandlerType` can be one of two types.\n\n```typescript\ntype HandlerType = \"documentBoundariesDetect\"|\"imageFilter\";\n```\n\n`handler`: The handler to set. Please refer to [IDocumentDetect]({{ site.api }}interface/idocumentdetect.html) and [IImageFilter]({{ site.api }}interface/iimagefilter.html).\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n\n**Remark**\n\n- Please configure the handler before creating \n- If `documentBoundariesDetect` handler is not set, the default element `Dynamsoft.DDV.Elements.AutoDetect` will be disabled.\n- If `imageFilter` handler is not set, the default element `Dynamsoft.DDV.Elements.Filter` will be disabled.\n- [How to configure image filter]({{ site.features }}advanced/imagefilter.html)\n- [How to configure boundaries detection]({{ site.features }}advanced/documentdetect.html)\n\n## Member\n\n### `<static>` documentManager\n\n[`DocumentManager`]({{ site.api }}class/documentmanager.html) instance.\n\n**Code Snippet**\n\n```typescript\nDynamsoft.DDV.Core.license = \"Your-License-String\";\nDynamsoft.DDV.Core.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine\"; // lead to a folder containing the distributed WASM files\nawait Dynamsoft.DDV.Core.init(); \n\nconst docManager = Dynamsoft.DDV.documentManager;\n```\n\n### `<static>` annotationManager\n\n[`AnnotationManager`]({{ site.api }}class/annotationmanager.html) instance.\n\n**Code Snippet**\n\n```typescript\nDynamsoft.DDV.Core.license = \"Your-License-String\";\nDynamsoft.DDV.Core.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine\"; // lead to a folder containing the distributed WASM files\nawait Dynamsoft.DDV.Core.init(); \n\nconst annotManager = Dynamsoft.DDV.annotationManager;\n```\n\n\n## Methods\n\n| API Name                        | Description                                       |\n| ------------------------------- | ------------------------------------------------- |\n| [`<static> getDefaultUiConfig()`](#static-getdefaultuiconfig)   | Get default UiConfig object.                      |\n| [`<static> clearLastError()`](#static-clearlasterror)       | Clear the last error or warning.                  |\n| [`<static> unload()`](#static-unload)               | Unload all DDV resources.                         |\n\n### `<static>` getDefaultUiConfig()\n\nGet default UiConfig object.\n\n**Syntax**\n\n```typescript\nstatic getDefaultUiConfig(viewerType: ViewerType): UiConfig | null;\n```\n\n**Parameters**\n\n`viewerType`: A `ViewerType` can be one of four types.\n\n```typescript\ntype ViewerType = \"editViewer\"|\"captureViewer\"|\"perspectiveViewer\"|\"browseViewer\";\n```\n\n\n**Return Values**\n\nThe [default UiConfig]({{ site.ui }}default_ui.html) object for each kind of viewer.\n\n**Code Snippet**\n\n```typescript\nconst defaultEditUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n```\n\n**Warning**\n\n Error Code  | Error Message                                                           | API Return Value\n--------|------------------------------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                      | `null`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                     | `null`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.| `null`\n\n### `<static>` addFonts()\n\nAdd font to library. You can fetch a font via an URL or use the [`queryLocalFonts()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/queryLocalFonts) API to get the fonts installed on the local system.\n\n**Syntax**\n\n```typescript\naddFonts(fonts: Blob[]): Promise<string[]>;\n```\n\n**Parameters**\n\n`fonts`: Specify the fonts to add.\n\n**Return Values**\n\nArray of font names.\n\n**Exception**\n\n Error Code | Error Message                                               \n ---------- | ------------------------------------------------------------ \n -80100     | *XXX(API)*: *XXX(ParameterName)* is invalid.                \n -80102     | *XXX(API)*: *XXX(ParameterName)* is missing.                \n\n\n\n### `<static>` clearLastError()\n\nClear the last error or warning.\n\n**Syntax**\n\n```typescript\nstatic clearLastError(): void;\n```\n\n**Remark**\n\n- Once called this method, [`lastError`](#static-lasterror) will return `undefined`.\n\n### `<static>` unload()\n\nUnload all DDV resources.\n\n**Syntax**\n\n```typescript\nstatic unload(): void;\n```\n\n## Properties\n\n| API Name                        | Description                                       |\n| ------------------------------- | ------------------------------------------------- |\n| [`<static> lastError `](#static-lasterror)             | Return the last error or warning.                 |\n\n### `<static>` lastError\n\nReturn the last error or warning.\n\n**Syntax**\n\n```typescript\nstatic readonly lastError: DDVError;\n```\n\n**Return Values**\n\nA [`DDVError`]({{ site.api }}interface/ddverror.html) object.\n\n## Events\n\n| API Name | Description                                        |\n| -------- | -------------------------------------------------- |\n| [`<static> on()`](#static-on)     | Bind a listener to the specified event.            |\n| [`<static> off()`](#static-off)    | Unbind event listener(s) from the specified event. |\n\n### `<static>` on()\n\nBind a listener to the specified event. \n\n**Syntax**\n\n```typescript\nstatic on(eventName: EventName, listener:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It should be [an integrated event name](#integrated-events).\n\n`listener`: Specify the listener.\n\n**Code Snippet**\n\n```typescript\nDynamsoft.DDV.on(\"error\", (e)=>{\n    console.log(e.message, e.cause);\n});\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n\n### `<static>` off()\n\nUnbind event listener(s) from the specified event. \n\n**Syntax**\n\n```typescript\nstatic off(eventName: EventName, listener?:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It should be [an integrated event name](#integrated-events).\n\n`listener`: Specify the listener. If no listener is specified, unbind all event listeners from the specified event.\n\n**Code Snippet**\n\n```typescript\nDynamsoft.DDV.off(\"error\");\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n\n### Integrated Events\n\n| Event Name            | Description                          |\n| --------------------- | ------------------------------------ |\n| [`error`](#error)     | Triggered when any error occurs.     |\n| [`warning`](#warning) | Triggered when any warning occurs.   |\n| [`verbose`](#verbose) | Triggered when DDV is running.       |\n| [`info`](#info)       | Triggered during various operations. |\n\n#### error\n\nTriggered when any error occurs. \n\n**Callback**\n\nAn EventObject which contains the detailed error info.\n\n**Attributes**\n\n[`DDVError`]({{ site.api }}interface/ddverror.html): Detailed error info.\n\n#### warning\n\nTriggered when any warning occurs. \n\n**Callback**\n\nAn EventObject which contains the detailed warning info.\n\n**Attributes**\n\n[`DDVError`]({{ site.api }}interface/ddverror.html): Detailed warning info.\n\n#### verbose\n\nTriggered when DDV is running.\n\n**Callback**\n\nEventObject array which contain the detailed verbose info.\n\n**Example**\n\n```typescript\nDynamsoft.DDV.on(\"verbose\", (...args) => { \n    console.log(...args); \n    if (args[0].cause) { \n        console.error(args[0].cause); \n    } \n});\n```\n\n#### info\n\nTriggered for any of the following tasks:\n\n- `init`\n- `loadSource`\n- `save`\n- `filter`\n- `perspective`\n- `loadWasm`\n\nSee [`InfoObject`]({{ site.api }}interface/infoobject.html) for details.\n\n**Callback**\n\n[`InfoObject`]({{ site.api }}interface/infoobject.html) which contains different attributes depending on the type of event.\n\n**Example**\n\n```js\nDDV.on(\"info\", (event) => {\n    if(event.type === \"loadSource\" && event.status === \"Pending\"){\n        console.log(\"Begin loading file\")\n    }\n}) \n```",
-      "breadcrumb": "Dynamsoft.DDV"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Namespace - Dynamsoft.DDV.Core",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/namespace/ddv_core.html",
-      "content": "# Dynamsoft.DDV.Core\n\n## API Index\n\n**Properties**\n\n| API Name             | Description                                                  |\n| -------------------- | ------------------------------------------------------------ |\n| [`versionInfo` ](#versioninfo)           | Get the version info of the SDK.                                  |\n| [`license` ](#license)           | Specify the license string.                                  |\n| [`engineResourcePath`](#engineresourcepath) | Specify the path should lead to a folder containing the distributed WASM files. |\n| [`deviceFriendlyName`](#devicefriendlyname) | Specify a human-readable name for the device which corresponds to its UUID. |\n\n**Methods**\n\n| API Name     | Description                            |\n| ------------ | -------------------------------------- |\n| [`loadWasm()`](#loadwasm) | Load WASM modules before initializing. |\n| [`init()`](#init)     | Initialize DDV.                        |\n\n## Properties\n\n### versionInfo\n\nGet the version info of the SDK.\n\n**Syntax**\n\n```typescript\nversionInfo: DDVVersionInfo;\n```\n\nIt will return an object like the following example:\n\n```\n{\n  viewer: '3.0.0',\n  engine: '3.0.0'\n}\n```\n\n### license\n\nSpecify the license string.\n\n**Syntax**\n\n```typescript\nlicense: string;\n```\n\n**Code Snippet**\n\n```typescript\n// Public trial license which is valid for 24 hours\n// You can request a 30-day trial key from https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv\nDynamsoft.DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\";\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid. \n\n### engineResourcePath\n\nSpecify the path should lead to a folder containing the distributed WASM files.\n\n**Syntax**\n\n```typescript\nengineResourcePath: string;\n```\n\n**Code Snippet**\n\n```typescript\nDynamsoft.DDV.Core.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine\";\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid. \n\n\n### deviceFriendlyName\n\nSpecify a human-readable name for the device which corresponds to its UUID. This name will appear in the device details table when you check the statistics of the according license. \n\n**Syntax**\n\n```typescript\ndeviceFriendlyName: string;\n```\n\n**Code Snippet**\n\n```typescript\nDynamsoft.DDV.Core.deviceFriendlyName = \"xxxxxxx\";\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid. \n\n**Remark**\n\n- Default value is `''`.\n\n## Methods\n\n### loadWasm()\n\nLoad WASM modules before initializing.\n\n**Syntax**\n\n```typescript\nloadWasm():Promise<void>;  \n```\n\n**Code Snippet**\n\n```typescript\nDynamsoft.DDV.Core.loadWasm(); \n\n//OR\nawait Dynamsoft.DDV.Core.loadWasm(); \n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80052 | *XXX(API)*: Resource is not found from the specified engineResourcePath.\n\n\n### init()\n\nInitialize DDV.\n\n**Syntax**\n\n```typescript\ninit():Promise<ConfigResult>;\n```\n\n**Return values**\n\nA Promise [`ConfigResult`]({{ site.api }}interface/configresult.html) object. \n\n**Code Snippet**\n\n```typescript\n// Public trial license which is valid for 24 hours\n// You can request a 30-day trial key from https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv\nDynamsoft.DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\";\nDynamsoft.DDV.Core.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine\";\nDynamsoft.DDV.Core.loadWasm(); \nawait Dynamsoft.DDV.Core.init(); \n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80052 | *XXX(API)*: Resource is not found from the specified engineResourcePath.\n -80053 | *XXX(API)*: The resource version at the specified engineResourcePath does not match this version of Dynamsoft Document Viewer.\n",
-      "breadcrumb": "Dynamsoft.DDV.Core"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Namespace - Dynamsoft.DDV.Elements",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/namespace/ddv_elements.html",
-      "content": "# Dynamsoft.DDV.Elements\n\n## API Index\n\n**Methods**\n\n| API Name               | Description                                                  |\n| ---------------------- | ------------------------------------------------------------ |\n| [`<static>` `getTooltip()`](#static-gettooltip)           | Get tooltip object of built-in elements.                      |\n| [`<static>` `setTooltip()`](#static-settooltip)           | Set tooltip to built-in elements.                             |\n| [`<static>` `getDisplayTextConfig()`](#static-getdisplaytextconfig) | Get DisplayTextConfig object of built-in elements.            |\n| [`<static>` `setDisplayTextConfig()`](#static-setdisplaytextconfig) | Set display text of the default element to your own words or language. |\n\n**Members**\n\n- `Dynamsoft.DDV.Elements.Layout`\n- `Dynamsoft.DDV.Elements.Button`\n\n***Built-in Elements***\n\nBuilt-in elements have different availability in different types of viewers. They are listed in categories on [Built-in Elements]({{ site.ui }}default_elements.html) page, please refer to it.\n\n## Methods\n\n### `<static>` getTooltip()\n\nGet Tooltip object of built-in elements.\n\n**Syntax**\n\n```typescript\nstatic getTooltip(): Tooltip;\n```\n\n**Return value**\n\nA Tooltip object. Please refer to [`Tooltip`]({{ site.api }}interface/tooltip.html).\n\n**Example**\n\n```typescript\nconst mytooltips = Dynamsoft.DDV.Elements.getTooltip();\n```\n\n### `<static>` setTooltip()\n\nSet tooltip to built-in elements.\n\n**Syntax**\n\n```typescript\nstatic setTooltip(tooltip: Tooltip): boolean; \n```\n\n**Parameters**\n\n`tooltip`: A Tooltip object to set. Please refer to [`Tooltip`]({{ site.api }}interface/tooltip.html).\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code snippet**\n\n- First method\n    ```typescript\n    const mytooltips = Dynamsoft.DDV.Elements.getTooltip();\n    mytooltips.Capture = \"Capture\";\n    mytooltips.Flashlight = \"Flashlight\"；\n\n    Dynamsoft.DDV.Elements.setTooltip(mytooltips);\n    ```\n- Second method\n\n    ```typescript\n    Dynamsoft.DDV.Elements.setTooltip({\n        Capture: \"Capture\",\n        Flashlight: \"Flashlight\",\n    });\n    ```\n\n**Remark**\n\n- Need to be set before creating viewers.\n\n### `<static>` getDisplayTextConfig()\n\nGet DisplayTextConfig object of built-in elements.\n\n**Syntax**\n\n```typescript\nstatic getDisplayTextConfig(): DisplayTextConfig;\n```\n\n**Return value**\n\nA DisplayTextConfig object. Please refer to [`DisplayTextConfig`]({{ site.api }}interface/displaytextconfig.html).\n\n### `<static>` setDisplayTextConfig()\n\nSet display text of the default element to your own words or language.\n\n**Syntax**\n\n```typescript\nstatic setDisplayTextConfig(displaytextconfig: DisplayTextConfig): boolean; \n```\n\n**Parameters**\n\n`displaytextconfig`: The DisplayTextConfig object to set. Please refer to [`DisplayTextConfig`]({{ site.api }}interface/displaytextconfig.html).\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Example**\n\n- First method\n    ```typescript\n    const mytextconfig = Dynamsoft.DDV.Elements.getDisplayTextConfig();\n    mytextconfig.FitMode_FitWidth = \"Passform Breite\";\n    mytextconfig.FitMode_FitHeight = \"Passform Höhe\";\n\n    Dynamsoft.DDV.Elements.setDisplayTextConfig(mytextconfig);\n    ```\n\n- Second method\n    ```typescript\n    Dynamsoft.DDV.Elements.setDisplayTextConfig({\n        FitMode_FitWidth: \"Passform Breite\",\n        FitMode_FitHeight: \"Passform Höhe\",\n    });\n    ```\n\n**Remark**\n\n- Need to be set before creating viewers.\n\n## Members\n\n### Dynamsoft.DDV.Elements.Layout\n\nOne supported type of UiConfig which is used to configure the layout of user interface.\n\nPlease refer to [User Interface - Layout]({{ site.ui }}customize/layout.html).\n\n### Dynamsoft.DDV.Elements.Button\n\nOne supported type of UiConfig which is used to configure a custom button.\n\nPlease refer to [Create your own button]({{ site.ui }}customize/elements.html#create-your-own-button).",
-      "breadcrumb": "Dynamsoft.DDV.Elements"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface DDVError",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/ddverror.html",
-      "content": "# DDVError\n\n## Syntax\n\n```typescript\ninterface DDVError {\n    message: string;\n    cause: VError;\n}\n```\n\n## Attributes\n\n### message\n\nThe error or warning message.\n\n### cause\n\nThe specific original cause of the error or warning. Please refer to [`VError`]({{ site.api }}interface/verror.html).\n\n## Related\n\n- [`lastError`]({{ site.api }}namespace/ddv.html#static-lasterror)\n- [`clearLastError()`]({{ site.api }}namespace/ddv.html#static-clearlasterror)",
-      "breadcrumb": "Interface DDVError"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer User Interface - Built-in Elements",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/ui/default_elements.html",
-      "content": "# Built-in Elements\n\nDDV provides many built-in elements which have their own designed icons and bind to specific event to call the according APIs, have state interaction with viewer as well as between elements.\n\nSpecific Elements can only be applied to specific viewers. For example, `Dynamsoft.DDV.Elements.Zoom` can only be applied in `EditViewer`, and `Dynamsoft.DDV.Elements.Capture` can only be applied in `CaptureViewer`.\n\nThe following are lists of built-in elements as well as their default icons that are currently available for different viewer classes.\n\n<div class=\"multi-panel-switching-prefix\"></div>\n\n- [Edit viewer](#edit-viewer)\n- [Capture viewer](#capture-viewer)\n- [Perspective viewer](#perspective-viewer)\n- [Browse viewer](#browse-viewer)\n- [Common](#common)\n\n<div class=\"multi-panel-start\"></div>\n\n| Supported Elements                           | className of its default icon                               | More descriptions\n|------------------------------------|-------------------------------------------------------------|-------------------\n| Dynamsoft.DDV.Elements.Pagination            | ddv-first-page<br>ddv-prev-page<br>ddv-next-page<br>ddv-last-page | \n| Dynamsoft.DDV.Elements.RotateLeft            | ddv-rotate-left                                             | \n| Dynamsoft.DDV.Elements.RotateRight           | ddv-rotate-right                                            | \n| Dynamsoft.DDV.Elements.Delete                | ddv-delete-current                                          | Composite element contains DeleteCurrent and DeleteAll.\n| Dynamsoft.DDV.Elements.DeleteCurrent         | ddv-delete-current                                          |\n| Dynamsoft.DDV.Elements.DeleteAll             | ddv-delete-all                                              |\n| Dynamsoft.DDV.Elements.Zoom                  | N/A                                                         | Composite element contains ZoomIn and ZoomOut.\n| Dynamsoft.DDV.Elements.ZoomIn                | ddv-zoom-in                                                 |\n| Dynamsoft.DDV.Elements.ZoomOut               | ddv-zoom-out                                                |\n| Dynamsoft.DDV.Elements.ZoomByPercentage      | N/A                                                         |\n| Dynamsoft.DDV.Elements.ThumbnailSwitch       | ddv-thumbnail-switch                                        | Control the thumbnail to show or not.\n| Dynamsoft.DDV.Elements.FitMode               | N/A                                                         | Composite element contains FitWindow, FitHeight, FitWindow and ActualSize. \n| Dynamsoft.DDV.Elements.DisplayMode           | N/A                                                         | Composite element contains SinglePage and ContinuousPage. \n| Dynamsoft.DDV.Elements.Crop                  | N/A                                                         | \n| Dynamsoft.DDV.Elements.Filter                | ddv-filter                                                  | \n| Dynamsoft.DDV.Elements.Load                  | ddv-load-image                                              | Load file from local. If there is no document is opend when you click Load button, a new document (default name: doc-*timestamp*) will be created and opened automatically.\n| Dynamsoft.DDV.Elements.Undo                  | ddv-undo-page                                               |\n| Dynamsoft.DDV.Elements.Redo                  | ddv-redo-page                                               |\n| Dynamsoft.DDV.Elements.Pan                   | ddv-pan-mode                                                | \n| Dynamsoft.DDV.Elements.Print                 | ddv-print-page                                              | \n| Dynamsoft.DDV.Elements.FitWidth              | ddv-fit-width                                               |\n| Dynamsoft.DDV.Elements.FitHeight             | ddv-fit-height                                              |\n| Dynamsoft.DDV.Elements.FitWindow             | ddv-fit-window                                              |\n| Dynamsoft.DDV.Elements.ActualSize            | ddv-fit-actual                                              | \n| Dynamsoft.DDV.Elements.SinglePage            | ddv-single-mode                                             |\n| Dynamsoft.DDV.Elements.ContinuousPage        | ddv-continuous-mode                                         |\n| Dynamsoft.DDV.Elements.Download              | ddv-button-download                                         | Download pages in pdf format to local.                   |\n| Dynamsoft.DDV.Elements.TextSelectionMode              | ddv-text-selection-mode                                         |                    |\n| Dynamsoft.DDV.Elements.TextSearchPanelSwitch              | ddv-search-switch                                         |                    |\n| Dynamsoft.DDV.Elements.TextSearchPanel              | N/A                                |                    |\n\n|Annotation-related Elements                     | className of its default icon |\n| ----------------------------------------------- | ----------------------------- |\n| Dynamsoft.DDV.Elements.AnnotationSet            | ddv-annotation-mode           |\n| Dynamsoft.DDV.Elements.RectAnnotation           | ddv-rect                      |\n| Dynamsoft.DDV.Elements.EllipseAnnotation        | ddv-ellipse                   |\n| Dynamsoft.DDV.Elements.PolygonAnnotation        | ddv-polygon                   |\n| Dynamsoft.DDV.Elements.PolylineAnnotation       | ddv-polyline                  |\n| Dynamsoft.DDV.Elements.LineAnnotation           | ddv-line                      |\n| Dynamsoft.DDV.Elements.InkAnnotation            | ddv-ink                       |\n| Dynamsoft.DDV.Elements.TextBoxAnnotation        | ddv-text-box                  |\n| Dynamsoft.DDV.Elements.TextTypewriterAnnotation | ddv-typewriter                |\n| Dynamsoft.DDV.Elements.StampIconAnnotation      | ddv-stamp-icon                |\n| Dynamsoft.DDV.Elements.StampImageAnnotation     | ddv-stamp-image               |\n| Dynamsoft.DDV.Elements.HighlightAnnotation               | ddv-highlight-mode              |\n| Dynamsoft.DDV.Elements.UnderlineAnnotation               | ddv-underline-mode              |\n| Dynamsoft.DDV.Elements.StrikeoutAnnotation               | ddv-strikeout-mode              |\n| Dynamsoft.DDV.Elements.SelectAnnotation         | ddv-annot-select              |\n| Dynamsoft.DDV.Elements.EraseAnnotation          | ddv-annot-eraser              |\n| Dynamsoft.DDV.Elements.BringForward             | ddv-bring-forward             |\n| Dynamsoft.DDV.Elements.BringToFront             | ddv-bring-to-front            |\n| Dynamsoft.DDV.Elements.SendBackward             | ddv-send-backward             |\n| Dynamsoft.DDV.Elements.SendToBack               | ddv-send-to-back              |\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n| Supported Elements                       | className of default icon | More descriptions\n|--------------------------------|---------------------------|--------------------\n| Dynamsoft.DDV.Elements.Capture           | ddv-capture-image         | If there is no document opened when you click Capture button, a new document (default name: doc-*timestamp*) will be created and opened automatically.\n| Dynamsoft.DDV.Elements.Flashlight        | ddv-camera-flashlight     |\n| Dynamsoft.DDV.Elements.CameraConvert     | ddv-camera-convert        |\n| Dynamsoft.DDV.Elements.CameraResolution  | ddv-resolution            |\n| Dynamsoft.DDV.Elements.AutoDetect        | ddv-auto-detect           |\n| Dynamsoft.DDV.Elements.AutoCapture       | ddv-auto-capture          |\n| Dynamsoft.DDV.Elements.ImagePreview      | N/A                       |\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n| Supported Elements                          | className of default icon                                   | More descriptions\n|-----------------------------------|-------------------------------------------------------------|------------------\n| Dynamsoft.DDV.Elements.Pagination           | ddv-first-page<br>ddv-prev-page<br>ddv-next-page<br>ddv-last-page |\n| Dynamsoft.DDV.Elements.RotateLeft           | ddv-rotate-left                                             | \n| Dynamsoft.DDV.Elements.RotateRight          | ddv-rotate-right                                            | \n| Dynamsoft.DDV.Elements.Delete               | N/A                                                         | Composite element contains DeleteCurrent and DeleteAll.\n| Dynamsoft.DDV.Elements.DeleteCurrent        | ddv-delete-current                                          |\n| Dynamsoft.DDV.Elements.DeleteAll            | ddv-delete-all                                              |\n| Dynamsoft.DDV.Elements.PerspectiveAll          | ddv-perspective-all                                             |\n| Dynamsoft.DDV.Elements.FullQuad            | ddv-full-quad                                              |\n| Dynamsoft.DDV.Elements.Load                 | ddv-load-image                                              | Load file from local. If there is no document is opend when you click Load button, a new document (default name: doc-*timestamp*) will be created and opened automatically.\n| Dynamsoft.DDV.Elements.Download             | ddv-button-download                                         | Download pages in pdf format to local.\n| Dynamsoft.DDV.Elements.Print                | ddv-print-page                                              |\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n| Supported Elements                           | className of default icon                                   | More descriptions\n|------------------------------------|-------------------------------------------------------------|-------------------\n| Dynamsoft.DDV.Elements.Pagination            | ddv-first-page, ddv-prev-page, ddv-next-page, ddv-last-page |\n| Dynamsoft.DDV.Elements.RotateLeft            | ddv-rotate-left                                             | \n| Dynamsoft.DDV.Elements.RotateRight           | ddv-rotate-right                                            | \n| Dynamsoft.DDV.Elements.Delete                | ddv-delete-current                                          | Composite element contains DeleteCurrent and DeleteAll.\n| Dynamsoft.DDV.Elements.DeleteCurrent         | ddv-delete-current                                          |\n| Dynamsoft.DDV.Elements.DeleteAll             | ddv-delete-all                                              |\n| Dynamsoft.DDV.Elements.Print                 | ddv-print-page                                              |\n| Dynamsoft.DDV.Elements.Load                  | ddv-load-image                                              | Load file from local. If there is no document is opend when you click Load button, a new document (default name: doc-*timestamp*) will be created and opened automatically.\n| Dynamsoft.DDV.Elements.Download              | ddv-button-download                                         | Download pages in pdf format to local.\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\nThe following list shows the common elements which could be used within all viewer classes.\n\n| Elements                   | className of default icon | More descriptions\n|----------------------------|---------------------------|----------------\n| Dynamsoft.DDV.Elements.Blank         | N/A                       |\n| Dynamsoft.DDV.Elements.SeparatorLine | N/A                       |\n| Dynamsoft.DDV.Elements.MainView      | N/A                       | It cannot be used in CustomViewer.\n\nBesides, three designed icons are provided and can be used if you want to add the related buttons in order to unify the icon style.\n\n| Related Button   | className of default icon       \n|------------------|----------------------\n| Close            | ddv-button-close\n| Done             | ddv-button-done\n| Back             | ddv-button-back\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-switching-end\"></div>\n",
-      "breadcrumb": "Built-in Elements"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer User Interface - Default Elements",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/ui/default_ui.html",
-      "content": "# Default User Interface\n\nIt can be seen from Viewers part, DDV provides the default UI design for the edit viewer, capture viewer and perspective viewer. They basically contain the main features of each type of viewer. \n\n<div class=\"multi-panel-switching-prefix\"></div>\n\n- [Edit viewer](#edit-viewer)\n- [Capture viewer](#capture-viewer)\n- [Perspective viewer](#perspective-viewer)\n- [Browse viewer](#browse-viewer)\n\n<div class=\"multi-panel-start\"></div>\n\n## Edit viewer\n\n### Mobile\n\nDefault UiConfig:\n\n```typescript\n{\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"column\",\n    className: \"ddv-edit-viewer-mobile\",\n    children: [\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            className: \"ddv-edit-viewer-header-mobile\",\n            children: [\n                Dynamsoft.DDV.Elements.Blank,\n                Dynamsoft.DDV.Elements.AnnotationSet,\n                Dynamsoft.DDV.Elements.Pagination,\n                Dynamsoft.DDV.Elements.Download,\n                Dynamsoft.DDV.Elements.TextSearchPanelSwitch\n            ]\n        },\n        {\n        type: Dynamsoft.DDV.Elements.Layout,\n        flexDirection:\"column\",\n        children:[\n            Dynamsoft.DDV.Elements.MainView,\n            {\n                type: Dynamsoft.DDV.Elements.TextSearchPanel,\n                className: \"ddv-edit-viewer-search-mobile\"\n            }\n        ]\n        },\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            className: \"ddv-edit-viewer-footer-mobile\",\n            children: [\n                Dynamsoft.DDV.Elements.DisplayMode,\n                Dynamsoft.DDV.Elements.RotateLeft,\n                Dynamsoft.DDV.Elements.Crop,\n                Dynamsoft.DDV.Elements.Undo,\n                Dynamsoft.DDV.Elements.Delete,\n                Dynamsoft.DDV.Elements.Load\n            ]\n        }\n    ]\n}\n```\n\n![Default mobile EditViewer UI](/assets/imgs/edit-viewer-mobile-3.0.jpg)\n\n### Desktop\n\nDefault UiConfig:\n\n```typescript\n{\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"column\",\n    className: \"ddv-edit-viewer-desktop\",\n    children: [\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            className: \"ddv-edit-viewer-header-desktop\",\n            children: [{\n                    type: Dynamsoft.DDV.Elements.Layout,\n                    enableScroll:true,\n                    children: [\n                        Dynamsoft.DDV.Elements.ThumbnailSwitch,\n                        Dynamsoft.DDV.Elements.Zoom,\n                        Dynamsoft.DDV.Elements.FitMode,\n                        Dynamsoft.DDV.Elements.DisplayMode,\n                        Dynamsoft.DDV.Elements.RotateLeft,\n                        Dynamsoft.DDV.Elements.RotateRight,\n                        Dynamsoft.DDV.Elements.Crop,\n                        Dynamsoft.DDV.Elements.Undo,\n                        Dynamsoft.DDV.Elements.Redo,\n                        Dynamsoft.DDV.Elements.DeleteCurrent,\n                        Dynamsoft.DDV.Elements.DeleteAll,\n                        Dynamsoft.DDV.Elements.Pan,\n                        Dynamsoft.DDV.Elements.TextSelectionMode,\n                        Dynamsoft.DDV.Elements.SeparatorLine,\n                        Dynamsoft.DDV.Elements.AnnotationSet,\n                    ]\n                },\n                {\n                    type: Dynamsoft.DDV.Elements.Layout,\n                    children: [\n                        {\n                            type: Dynamsoft.DDV.Elements.Pagination,\n                            className: \"ddv-edit-viewer-pagination-desktop\",\n                        },\n                        Dynamsoft.DDV.Elements.Load,\n                        Dynamsoft.DDV.Elements.Download,\n                        Dynamsoft.DDV.Elements.Print,\n                        Dynamsoft.DDV.Elements.TextSearchPanelSwitch\n                    ]\n                }\n            ]\n        },\n        {\n            type:Dynamsoft.DDV.Elements.Layout,\n            flexDirection:\"row\",\n            children:[\n                Dynamsoft.DDV.Elements.MainView,\n                Dynamsoft.DDV.Elements.TextSearchPanel\n            ]\n        }\n    ]\n}\n```\n\n![Default desktop EditViewer UI](/assets/imgs/edit-viewer-3.0.jpg)\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n## Capture viewer\n\n### Mobile\n\nDefault UiConfig:\n\n```typescript\n{\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"column\",\n    children: [\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            className: \"ddv-capture-viewer-header-mobile\",\n            children: [\n                {\n                    type: Dynamsoft.DDV.Elements.CameraResolution,\n                    className: \"ddv-capture-viewer-resolution\",\n                },\n                Dynamsoft.DDV.Elements.Flashlight,\n            ],\n        },\n        Dynamsoft.DDV.Elements.MainView,\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            className: \"ddv-capture-viewer-footer-mobile\",\n            children: [\n                Dynamsoft.DDV.Elements.AutoDetect,\n                Dynamsoft.DDV.Elements.AutoCapture,\n                {\n                    type: Dynamsoft.DDV.Elements.Capture,\n                    className: \"ddv-capture-viewer-captureButton\",\n                },\n                Dynamsoft.DDV.Elements.ImagePreview,\n                Dynamsoft.DDV.Elements.CameraConvert,\n            ],\n        },\n    ],\n};\n```\n\n![Default mobile CaptureViewer UI](/assets/imgs/dmcaptureui.png)\n\n### Desktop\n\nDefault UiConfig:\n\n```typescript\n{\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"column\",\n    className: \"ddv-capture-viewer-desktop\",\n    children: [\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            className: \"ddv-capture-viewer-header-desktop\",\n            children: [\n                {\n                    type: Dynamsoft.DDV.Elements.CameraResolution,\n                    className: \"ddv-capture-viewer-resolution-desktop\",\n                },\n                Dynamsoft.DDV.Elements.AutoDetect,\n                {\n                    type: Dynamsoft.DDV.Elements.Capture,\n                    className: \"ddv-capture-viewer-capture-desktop\",\n                },\n                Dynamsoft.DDV.Elements.AutoCapture,\n            ],\n        },\n        Dynamsoft.DDV.Elements.MainView,\n        {\n            type: Dynamsoft.DDV.Elements.ImagePreview,\n            className: \"ddv-capture-viewer-image-preview-desktop\",\n        },\n    ],\n};\n```\n\n![Default desktop CaptureViewer UI](/assets/imgs/ddcaptureui.png)\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n## Perspective viewer\n\n### Mobile\n\nDefault UiConfig:\n\n```typescript\n{\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"column\",\n    children: [\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            className: \"ddv-perspective-viewer-header-mobile\",\n            children: [\n                Dynamsoft.DDV.Elements.Blank,\n                Dynamsoft.DDV.Elements.Pagination,\n                Dynamsoft.DDV.Elements.PerspectiveAll,\n            ],\n        },\n        Dynamsoft.DDV.Elements.MainView,\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            className: \"ddv-perspective-viewer-footer-mobile\",\n            children: [\n                Dynamsoft.DDV.Elements.FullQuad,\n                Dynamsoft.DDV.Elements.RotateLeft,\n                Dynamsoft.DDV.Elements.RotateRight,\n                Dynamsoft.DDV.Elements.DeleteCurrent,\n                Dynamsoft.DDV.Elements.DeleteAll,\n            ],\n        },\n    ],\n};\n```\n\n![Default mobile PerspectiveViewer UI](/assets/imgs/dmperui.png)\n\n### Desktop\n\nDefault UiConfig:\n\n```typescript\n{\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"column\",\n    children: [\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            className: \"ddv-perspective-viewer-header-desktop\",\n            children: [\n                Dynamsoft.DDV.Elements.FullQuad,\n                Dynamsoft.DDV.Elements.RotateLeft,\n                Dynamsoft.DDV.Elements.RotateRight,\n                Dynamsoft.DDV.Elements.DeleteCurrent,\n                Dynamsoft.DDV.Elements.DeleteAll,\n                {\n                    type: Dynamsoft.DDV.Elements.Pagination,\n                    className: \"ddv-perspective-viewer-pagination-desktop\",\n                },\n                {\n                    type: Dynamsoft.DDV.Elements.PerspectiveAll,\n                    className: \"ddv-perspective-viewer-perspective-desktop\",\n                },\n            ],\n        },\n        Dynamsoft.DDV.Elements.MainView,\n    ],\n};\n```\n\n![Default desktop PerspectiveViewer UI](/assets/imgs/ddperui.png)\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n## Browse viewer\n\nDefault UiConfig:\n\n```typescript\n{\n    type: Dynamsoft.DDV.Elements.Layout,\n    children: [\n        Dynamsoft.Dynamsoft.DDV.Elements.MainView,\n    ],\n};\n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-switching-end\"></div>\n\n\n\n\n\n\n\n",
-      "breadcrumb": "Default User Interface"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface DetectResult",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/detectresult.html",
-      "content": "# DetectResult\n\n## Syntax\n\n```typescript\ninterface DetectResult {\n    location: Quad;\n    width: number;\n    height: number;\n    config: DocumentDetectConfig;\n    confidence?: number;\n}\n```\n\n## Attributes\n\n### location\n\nThe result of boundaries quadrangle. Please refer to [`Quad`]({{ site.api }}enumeration-type/quad.html).\n\n### width\n\nThe width of image.\n\n### height\n\nThe height of image.\n\n### config\n\nThe configuration of document detect. Please refer to [`DocumentDetectConfig`]({{ site.api }}interface/documentdetectconfig.html).\n\n### confidence\n\nThe confidence of the result quadrangle.\n",
-      "breadcrumb": "Interface DetectResult"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface DisplayTextConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/displaytextconfig.html",
-      "content": "# DisplayTextConfig\n\n## Syntax\n\n```typescript\ninterface DisplayTextConfig {\n    FitMode_FitWidth?: string;\n    FitMode_FitHeight?: string;\n    FitMode_FitWindow?: string;\n    FitMode_ActualSize?: string;\n    DisplayMode_SinglePage?: string;\n    DisplayMode_ContinuousPage?: string;\n    Crop_CropAll?: string;\n    Crop_CropCurrent?: string;\n    Crop_CropCancel?: string;\n    Crop_CropApply?: string;\n    Filter_FilterAll?: string;\n    Delete_DeleteCurrent?: string;\n    Delete_DeleteAll?: string;\n    CameraResolution_720P?: string;\n    CameraResolution_1080P?: string;\n    CameraResolution_1440P?: string;\n    CameraResolution_2160P?: string;\n    CameraResolution?: string;\n    Capture?: string;\n    Flashlight?: string;\n    CameraConvert?: string;\n    AutoDetect?: string;\n    AutoCapture?: string;\n    Rotate?: string;\n    RotateLeft?: string;\n    RotateRight?: string;\n    Load?: string;\n    Download?: string;\n    Delete?: string;\n    DeleteCurrent?: string;\n    DeleteAll?: string;\n    Zoom?: string;\n    ZoomIn?: string;\n    ZoomOut?: string;\n    ZoomByPercentage?: string;\n    Crop?: string;\n    CropAll?: string;\n    CropCurrent?: string;\n    CropMode?: string;\n    PerspectiveAll?: string;\n    FullQuad?: string;\n    Undo?: string;\n    Redo?: string;\n    Restore?: string;\n    Pan?: string;\n    Filter?: string;\n    Print?: string;\n    ThumbnailSwitch?: string;\n    DisplayMode?: string;\n    ContinuousPage?: string;\n    MultiPage?: string;\n    SinglePage?: string;\n    FitMode?: string;\n    FitWidth?: string;\n    FitHeight?: string;\n    FitWindow?: string;\n    ActualSize?: string;\n    Back?: string;\n    Close?: string;\n    Done?: string;\n    FirstPage?: string;\n    LastPage?: string;\n    NextPage?: string;\n    PrevPage?: string;\n    ImagePreview?: string;\n    AnnotationSet?: string;\n    EllipseAnnotation?: string;\n    InkAnnotation?: string;\n    LineAnnotation?: string;\n    PolygonAnnotation?: string;\n    PolylineAnnotation?: string;\n    RectAnnotation?: string;\n    StampIconAnnotation?: string;\n    StampImageAnnotation?: string;\n    TextBoxAnnotation?: string;\n    TextTypewriterAnnotation?: string;\n    SelectAnnotation?: string;\n    EraseAnnotation?: string;\n    HighlightAnnotation?: string;\n    UnderlineAnnotation?: string;\n    StrikeoutAnnotation?: string;\n    BringForward?: string;\n    BringToFront?: string;\n    SendBackward?: string;\n    SendToBack?: string;\n    TextSearchPanelSwitch?: string;\n    TextSelectionMode?: string;\n}\n```\n\n## Remark\n\n- Some of built-in elements have default display texts.\n\n    Elements                    | Default Text         \n    ----------------------------|----------------------\n    FitMode_FitWidth            | \"Fit Width\"          \n    FitMode_FitHeight           | \"Fit Height\"         \n    FitMode_FitWindow           | \"Fit Window\"         \n    FitMode_ActualSize          | \"Actual Size\"        \n    DisplayMode_SinglePage      | \"Single Page\"            \n    DisplayMode_ContinuousPage  | \"Enable Scrolling\"   \n    Crop_CropAll                | \"Crop all pages\"     \n    Crop_CropCurrent            | \"Crop current page\"  \n    Crop_CropCancel             | \"Cancel\"             \n    Crop_CropApply              | \"Apply\"              \n    Filter_FilterAll            | \"Apply to all\"       \n    Delete_DeleteCurrent        | \"Delete current\"     \n    Delete_DeleteAll            | \"Delete all\"         \n    Capture                     | \"Capture\"  \n    CameraResolution_720P       | \"720P\"\n    CameraResolution_1080P      | \"1080P\"\n    CameraResolution_1440P      | \"1440P\"\n    CameraResolution_2160P      | \"2160P\"\n    AnnotationSet               | \"Annotation\"\n\n## Related\n\n- [`getDisplayTextConfig()`]({{ site.api }}namespace/ddv_elements.html#static-getdisplaytextconfig)\n- [`setDisplayTextConfig()`]({{ site.api }}namespace/ddv_elements.html#static-setdisplaytextconfig)\n",
-      "breadcrumb": "Interface DisplayTextConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features - Document Management",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/datamanagement/docmanagement.html",
-      "content": "# Document Management\n\nDDV manages document data through the [`DocumentManager`]({{ site.api }}class/documentmanager.html) class, which can implement functions such as creating, deleting, and merging documents.\n\nThe `Dynamsoft.DDV.documentManager` instance will be created automatically as soon as DDV is initialized.\n\n## Create a new document\n\nUse [`createDocument()`]({{ site.api }}class/documentmanager.html#createdocument) method to create a new document in DDV, can also specify the document's name, author and creationDate at the same time.\n\n```typescript\nconst docManager = Dynamsoft.DDV.documentManager;\n\n// Specify the name, author and creationDate\nconst firstDoc = docManager.createDocument({\n    name: \"first_document\",\n    author: \"DDV\",\n    creationDate: \"D:20230101085959-08'00'\",\n    });\n\n// Document's name and creationDate will be generated automatically, and author will be blank, if they are not specified\nconst secondDoc = docManager.createDocument();\n```\n\n`firstDoc` and `secondDoc` above are the document objects, please refer to [Page Management]({{ site.features }}datamanagement/pagemanagement.html) and see how to manage the page data in document.\n\n## Merge documents\n\nDDV provides the method [`mergeDocuments()`]({{ site.api }}class/documentmanager.html#mergedocuments) to merge the specified documents to a new document. \n\nTake two documents which are created above as an example and merge them to a new document `mergedDoc` and delete the original documents.\n\n```typescript\n// Get the documents' docUid\nconst docUid1 = firstDoc.uid;\nconst docUid2 = secondDoc.uid;\n\n// Merge options\nconst mergeOptions = {\n    name: \"mergedDoc\", // Specify the name of the new document.\n    author: \"DDV\", // Specify the author of the new document.\n    creationDate: \"D:20230101085959-08'00'\", // Specify the creation date of the new document.\n    deleteOriginal: true, // Delete the original documents after merging.\n};\n\n// const docManager = Dynamsoft.DDV.documentManager;\n// Merge two documents.\nconst mergedDoc = docManager.mergeDocuments([docUid1, docUid2], mergeOptions);\n```\n\n## Copy or move pages from a specified document to another\n\nSometimes, may need to copy or move some pages in specified document to another document. DDV has two methods [`copyPagesToDocument()`]({{ site.api }}class/documentmanager.html#copypagestodocument) and [`movePagesToDocument()`]({{ site.api }}class/documentmanager.html#movepagestodocument) which can achieve this scenario.\n\n**Use case**\n\n- Copy the first and second pages of `firstDoc` to `secondDoc` and put them before the first page in `secondDoc`.\n\n    ```typescript\n    // Get the documents' docUid\n    const docUid1 = firstDoc.uid;\n    const docUid2 = secondDoc.uid;\n\n    // Copy Options\n    const copyOptions = {\n        sourceIndices: [0,1], // Specify the first and second pages\n        insertBeforeIndex: 0, // Specify the location of the copied page in the new document\n    };\n\n    // const docManager = Dynamsoft.DDV.documentManager;\n    // Copy pages\n    docManager.copyPagesToDocument(docUid1, docUid2, copyOptions);\n    ```\n\n- Move the first and second pages of `firstDoc` to `secondDoc` and put them before the first page in `secondDoc`.\n\n    ```typescript\n    // Get the documents' docUid\n    const docUid1 = firstDoc.uid;\n    const docUid2 = secondDoc.uid;\n\n    // Move Options\n    const moveOptions = {\n        sourceIndices: [0,1], // Specify the first and second pages\n        insertBeforeIndex: 0, // Specify the location of the copied page in the new document\n    };\n\n    // const docManager = Dynamsoft.DDV.documentManager;\n    // Move pages\n    docManager.movePagesToDocument(docUid1, docUid2, moveOptions);\n    ```\n\n## Delete Documents\n\nUse [`deleteDocuments()`]({{ site.api }}class/documentmanager.html#deletedocuments) and [`deleteAllDocuments()`]({{ site.api }}class/documentmanager.html#deletealldocuments) methods to delete the existing documents.\n\n**Use case**\n\n- Delete the specified document(s), take `firstDoc` as an example.\n\n    ```typescript\n    // Get firstDoc's docUid\n    const docUid = firstDoc.uid; \n\n    // const docManager = Dynamsoft.DDV.documentManager;\n    // Delete firstDoc\n    docManager.deleteDocuments([docUid]);\n    ```\n\n- Delete all documents.\n\n    ```typescript\n    // const docManager = Dynamsoft.DDV.documentManager;\n    // Delete all documents\n    docManager.deleteAllDocuments();\n    ```\n\n\n## References\n\n- [`DocumentManage Class`]({{ site.api }}class/documentmanager.html)\n- [`Interface IDocument`]({{ site.api }}interface/idocument/index.html)",
-      "breadcrumb": "Document Management"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features - Document Detection",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/advanced/documentdetect.html",
-      "content": "# How to configure boundaries detection\n\nDDV provides [`setProcessingHandler()`]({{ site.api }}namespace/ddv.html#static-setprocessinghandler) method for developers to access the corresponding document boundaries detection and image filter algorithms. This article mainly introduces how to configure boundaries detection in the process of capturing documents.\n\nAs you may know, Dynamsoft has an SDK which is named [Dynamsoft Document Normalizer](https://www.dynamsoft.com/document-normalizer/docs/web/programming/javascript/user-guide/index.html#check-the-code) and it contains two main features, \"Detect the document boundaries\" and \"Normalize the document based on the detected boundaries\". Let us take its \"Detect the document boundaries\" feature as the example document boundaries detection algorithm.\n\n## Step one: Include and Initialize DDN\n\n### Include DDN\n\nTo include document boundaries detection feature, we need to include three packages.\n\nThe simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN.\n\n- jsDelivr\n\n    ```html\n    <script src=\"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/license.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/dynamsoft-document-normalizer@2.0.20/dist/ddn.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.30/dist/cvr.js\"></script>\n    ```\n\n- UNPKG\n\n    ```html\n    <script src=\"https://unpkg.com/npm/dynamsoft-core@3.0.30/dist/core.js\"></script>\n    <script src=\"https://unpkg.com/npm/dynamsoft-license@3.0.20/dist/license.js\"></script>\n    <script src=\"https://unpkg.com/npm/dynamsoft-document-normalizer@2.0.20/dist/ddn.js\"></script>\n    <script src=\"https://unpkg.com/npm/dynamsoft-capture-vision-router@2.0.30/dist/cvr.js\"></script>\n    ```\n\nYou can also download the SDK and host its files on your own website/server before including it in your application. Please refer to [Host the SDK yourself](https://www.dynamsoft.com/document-normalizer/docs/web/programming/javascript/user-guide/index.html#host-the-sdk-yourself).\n\n### Initialize DDN\n\n```typescript\n// Initializes the DDN license using a license key string.\nDynamsoft.License.LicenseManager.initLicense(\"**********\"); \n// Preloads the DocumentNormalizer module, saving time in preparing for document border detection.\nDynamsoft.Core.CoreModule.loadWasm([\"DDN\"]); \n// Initializes the router variable by creating an instance of the CaptureVisionRouter class.\nconst router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); \n```\n\n## Step two: Create document boundaries detection module\n\n```typescript\n// Inherit DocumentDetect class\nclass MyDocumentDetect extends Dynamsoft.DDV.DocumentDetect {\n    // Rewrite the detect method\n    async detect(image, detectConfig) {\n        if (!router) {\n            return Promise.resolve({\n                success: false,\n            });\n        }\n\n        // Use DDN document boundaries detection algorithm\n        const DSImageData = {\n            bytes: new Uint8Array(image.data.slice(0)),\n            width: image.width,\n            height: image.height,\n            stride: image.width * 4,\n            format: 10,\n        };\n\n        const results = await router.capture(DSImageData, \"detect-document-boundaries\");\n\n        // Filter DDN detection results\n        if (results.items.length <= 0) {\n            return Promise.resolve({\n                success: false,\n            });\n        }\n\n        // Use processDetectResult to obtain the comprehensive detection result DocumentDetectResult \n        //by passing in the detected points and other parameters (including confidence, status, etc.).\n        const quad= [];\n        results.items[0].location.points.forEach(p => {\n            quad.push([p.x, p.y]);\n        });\n\n        const ret = this.processDetectResult({\n                location: quad,\n                width: image.width,\n                height: image.height,\n                config: detectConfig,\n        });\n\n        // Return detection result\n        return Promise.resolve(ret);\n    }\n}\n\nconst detectHandler = new MyDocumentDetect();\n```\n\n## Step three: Set document boundaries detection handler\n\n```typescript\nDynamsoft.DDV.setProcessingHandler(\"documentBoundariesDetect\", detectHandler);\n```\n\n## Review the complete code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document Detect</title>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.css\">\n</head>\n<style>\n    html,body {\n        width:100%;\n        height:100%;\n        margin:0;\n        padding:0;\n    }\n    #viewer{\n        width: 1280px;\n        height: 860px;\n        margin: 10px;\n    }\n</style>\n<body>\n    <div id=\"viewer\"></div>\n</body>\n<script src=\"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/core.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/license.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/dynamsoft-document-normalizer@2.0.20/dist/ddn.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.30/dist/cvr.js\"></script>\n<script type=\"module\">\n    (async () => {\n        // Initializes DDV\n        Dynamsoft.DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\"; // Public trial license which is valid for 24 hours\n        Dynamsoft.DDV.Core.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine\";\n        await Dynamsoft.DDV.Core.init(); \n\n        // Initializes the DDN license using a license key string.\n        Dynamsoft.License.LicenseManager.initLicense(\"**********\"); \n\n        Dynamsoft.Core.CoreModule.loadWasm([\"DDN\"]); \n        // Initializes the router variable by creating an instance of the CaptureVisionRouter class.\n        const router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); \n\n        // Inherit DocumentDetect class\n        class MyDocumentDetect extends Dynamsoft.DDV.DocumentDetect {\n            // Rewrite the detect method\n            async detect(image, detectConfig) {\n                if (!router) {\n                    return Promise.resolve({\n                        success: false,\n                    });\n                }\n\n                // Use DDN document boundaries detection algorithm\n                const DSImageData = {\n                    bytes: new Uint8Array(image.data.slice(0)),\n                    width: image.width,\n                    height: image.height,\n                    stride: image.width * 4,\n                    format: 10,\n                };\n\n                const results = await router.capture(DSImageData, \"detect-document-boundaries\");\n\n                // Filter DDN detection results\n                if (results.items.length <= 0) {\n                    return Promise.resolve({\n                        success: false,\n                    });\n                }\n\n                // Use processDetectResult to obtain the comprehensive detection result DocumentDetectResult \n                //by passing in the detected points and other parameters (including confidence, status, etc.).\n                const quad = [];\n                results.items[0].location.points.forEach(p => {\n                    quad.push([p.x, p.y]);\n                });\n\n                const ret = this.processDetectResult({\n                        location: quad,\n                        width: image.width,\n                        height: image.height,\n                        config: detectConfig,\n                });\n\n                // Return detection result\n                return Promise.resolve(ret);\n            }\n        }\n\n        const detectHandler = new MyDocumentDetect();\n        \n        Dynamsoft.DDV.setProcessingHandler(\"documentBoundariesDetect\", detectHandler);\n\n        // Enable auto detect and auto capture when initializing capture viewer\n        const captureViewerConfig = {\n            enableAutoCapture: true,\n            enableAutoDetect: true,\n            maxFrameNumber: 10,\n        };\n        // Create the capture viewer\n        const captureViewer = new Dynamsoft.DDV.CaptureViewer({\n            container: \"viewer\",\n            viewerConfig: captureViewerConfig,\n        });\n        captureViewer.play();\n\n    })();\n</script>\n</html>\n```\n\n## Reference\n\n- [`DocumentDetect class`]({{ site.api }}class/advanced/documentdetect.html)",
-      "breadcrumb": "Document Detection"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - DocumentDetect Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/advanced/documentdetect.html",
-      "content": "# DocumentDetect Class\n\n`DocumentDetect` implements [`IDocumentDetect`]({{ site.api }}interface/idocumentdetect.html). \n\nThis class is used to configure document boundaries detection feature in capture viewer. Please refer to [How to configure boundaries detection]({{ site.features }}advanced/documentdetect.html).\n\nThe APIs for this class include:\n\n API Name                   | Description                                 \n----------------------------|---------------------------------------------\n [`detect()`](#detect)                   | Detect the boundaries quadrangle.                   \n [`processDetectResult()`](#processdetectresult)      | Process the detected result.                \n [`getStatusMsg()`](#getstatusmsg)             | Get the message of status during detection.             \n\n## detect()\n\nDetect the boundaries quadrangle.\n\n**Syntax**\n\n```typescript\ndetect(image: VImageData, config?: DocumentDetectConfig): Promise<DocumentDetectResult>;\n```\n\n**Parameters**\n\n`image`: The image to detect boundaries. Please refer to [`VImageData`]({{ site.api }}interface/vimagedata.html).\n\n`config`: The configuration of document detect. Please refer to [`DocumentDetectConfig`]({{ site.api }}interface/documentdetectconfig.html).\n\n**Return Value**\n\nA promise resolving to an [`DocumentDetectResult`]({{ site.api }}interface/documentdetectresult.html) object that contains the detected result.\n\n**Remark**\n\nThe border detection process will periodically call the custom detect method to obtain the detected result.\n\n## processDetectResult()\n\nProcess the detected result.\n\n**Syntax**\n\n```typescript\nprocessDetectResult(detectResult: DetectResult): DocumentDetectResult;\n```\n\n**Parameters**\n\n`detectResult`: The detected result. Please refer to [`DetectResult`]({{ site.api }}interface/detectresult.html).\n\n**Return Value**\n\nA promise resolving to an [`DocumentDetectResult`]({{ site.api }}interface/documentdetectresult.html) object that contains the detected result.\n\n## getStatusMsg()\n\nGet the message of status during detection. \n\n**Syntax**\n\n```typescript\ngetStatusMsg(status: EnumDocumentDetectionStatus): string;\n```\n\n**Parameters**\n\n`status`: The status during detection. Please refer to [`EnumDocumentDetectionStatus`]({{ site.api }}enumeration-type/enumdocumentdetectionstatus.html).\n\n**Return Value**\n\nThe status message string.\n\n\n\n",
-      "breadcrumb": "DocumentDetect Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface DocumentDetectConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/documentdetectconfig.html",
-      "content": "# DocumentDetectConfig\n\n## Syntax\n\n```typescript\ninterface DocumentDetectConfig {\n    acceptedPolygonConfidence?: number; \n    enableAutoCapture?: boolean; \n    autoCaptureDelay: number;  \n}\n```\n\n## Attributes\n\n### acceptedPolygonConfidence\n\nThe accepted confidence. Value range: [0, 100] in percentage.\n\nThe higher the setting, the more accurate the automatic boundaries detection.\n\nThe default value is the vaule which is set by [`CaptureViewerConfig`-`acceptedPolygonConfidence`]({{ site.api }}interface/captureviewerconfig.html#acceptedpolygonconfidence).\n\n### enableAutoCapture\n\nWheter to enable auto capture. The default value is the vaule which is set by [`CaptureViewerConfig`-`enableAutoCapture`]({{ site.api }}interface/captureviewerconfig.html#enableautocapture).\n\n### autoCaptureDelay\n\nThe delay for auto capture. The unit is millisecond. The default value is the vaule which is set by [`CaptureViewerConfig`-`autoCaptureDelay`]({{ site.api }}interface/captureviewerconfig.html#autocapturedelay).\n",
-      "breadcrumb": "Interface DocumentDetectConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface DocumentDetectResult",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/documentdetectresult.html",
-      "content": "# DocumentDetectResult\n\n## Syntax\n\n```typescript\ninterface DocumentDetectResult {\n    success: boolean;\n    location?: Quad;\n    confidence?: number;\n    status?: EnumDocumentDetectionStatus;\n    statusMsg?: string;\n}\n```\n\n## Attributes\n\n### success\n\nWhether to detect the quadrangle successfully.\n\n`true`: Successful.\n\n`false`: Failed.\n\n### location\n\nThe result of boundaries quadrangle. Please refer to [`Quad`]({{ site.api }}enumeration-type/quad.html).\n\n### confidence\n\nThe confidence of detection result. Value range: [0, 100] in percentage.\n\n### status\n\nThe status during detection. Please refer to [`EnumDocumentDetectionStatus`]({{ site.api }}enumeration-type/enumdocumentdetectionstatus.html).\n\n### statusMsg\n\nThe status message string.\n",
-      "breadcrumb": "Interface DocumentDetectResult"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - DocumentManager Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/documentmanager.html",
-      "content": "# DocumentManager Class\n\nThe `Dynamsoft.DDV.documentManager` instance will be created automatically as soon as DDV is initialized. Please refer to [`documentManager`]({{ site.api }}namespace/ddv.html#static-documentmanager).\n\n## API Index\n\n**Methods**\n\n| API Name              | Description                                               |\n| --------------------- | --------------------------------------------------------- |\n| [`createDocument()`](#createdocument)     | Create an empty document.                                 |\n| [`deleteDocuments()`](#deletedocuments)     | Delete the specified document(s) by the document uid(s).  |\n| [`deleteAllDocuments()`](#deletealldocuments)  | Delete all documents.                                     |\n| [`getDocument()`](#getdocument)         | Get the specified document object with the document uid.  |\n| [`getAllDocuments()`](#getalldocuments)     | Get all documents' objects.                               |\n| [`mergeDocuments()`](#mergedocuments)      | Merge specified documents to a new document.              |\n| [`copyPagesToDocument()`](#copypagestodocument) | Copy pages from a specified document to another document. |\n| [`movePagesToDocument()`](#movepagestodocument) | Move pages from a specified document to another document. |\n\n**Events**\n\n| API Name | Description                                        |\n| -------- | -------------------------------------------------- |\n| [`on()`](#on)     | Bind a listener to the specified event.            |\n| [`off()`](#off)    | Unbind event listener(s) from the specified event. |\n\n***Integrated Events***\n\n| Event Name      | Description                               |\n| --------------- | ----------------------------------------- |\n| [`documentCreated`](#documentcreated) | Triggered when a new document is created. |\n| [`documentDeleted`](#documentdeleted) | Triggered when a document is deleted.     |\n\n## Methods\n\n### createDocument()\n\nCreate an empty document.\n\n**Syntax**\n\n```typescript\ncreateDocument(createDocumentOptions?: CreateDocumentOptions): IDocument;\n```\n\n**Parameters**\n\n`createDocumentOptions`: The configuration used to create a document. Please refer to [`CreateDocumentOptions`]({{ site.api }}interface/createdocumentoptions.html).\n\n**Return value**\n\nThe object of the created document. Please refer to [`IDocument`]({{ site.api }}interface/idocument/index.html).\n\n**Code Snippet**\n\n```typescript\nconst firstDoc = Dynamsoft.DDV.documentManager.createDocument({\n    name: \"first_document\",\n    author: \"DDV\",\n    creationDate: \"D:20230101085959-08'00'\",\n    });\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n\n\n### deleteDocuments()\n\nDelete the specified document(s) by the document uid(s).\n\n**Syntax**\n\n```typescript\ndeleteDocuments(docUids: string[]): boolean;\n```\n\n**Parameters**\n\n`docUids`: The array of document uids for the specified docunments.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst firstDoc = Dynamsoft.DDV.documentManager.createDocument({\n    name: \"first_document\",\n    author: \"DDV\",\n    creationDate: \"D:20230101085959-08'00'\",\n    });\n\nconst docUid = firstDoc.uid;\n\nDynamsoft.DDV.documentManager.deleteDocuments([docUid]);\n```\n\n**Warning**\n\n Error Code  | Error Message                                           | API return value     \n-------------|--------------------------------------------------------|---------------    \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.           | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.          | `false`\n -80104 | *XXX(API)*: The specified document(s) do not exist.   | `false`\n\n### deleteAllDocuments()\n\nDelete all documents.\n\n**Syntax**\n\n```typescript\ndeleteAllDocuments(): boolean;\n```\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nDynamsoft.DDV.documentManager.deleteAllDocuments();\n```\n\n### getDocument()\n\nGet the document object with the document uid.\n\n**Syntax**\n\n```typescript\ngetDocument(docUid: string): IDocument;\n```\n\n**Parameters**\n\n`docUid`: The docUid of the specified document.\n\n**Return Value**\n\nThe object of the specified document. Please refer to [`IDocument`]({{ site.api }}interface/idocument/index.html).\n\n**Code Snippet**\n\n```typescript\nDynamsoft.DDV.documentManager.getDocument(\"lnn0ll9o124\");\n```\n\n### getAllDocuments()\n\nGet all documents' objects.\n\n**Syntax**\n\n```typescript\ngetAllDocuments(): IDocument[];\n```\n\n**Return Value**\n\nThe array of all documents' objects. Please refer to [`IDocument`]({{ site.api }}interface/idocument/index.html).\n\n**Code Snippet**\n\n```typescript\nDynamsoft.DDV.documentManager.getAllDocuments();\n```\n\n**Remark**\n\n- If there is no document, returns `[]`.\n\n\n### mergeDocuments()\n\nMerge specified documents to a new document.\n\n**Syntax**\n\n```typescript\nmergeDocuments(docUids: string[], mergeDocumentOptions?: MergeDocumentOptions): IDocument;\n```\n\n**Parameters**\n\n`docUids`: The array of specified documents' uids.\n\n`mergeDocumentOptions`: The merge document options. Please refer to [`MergeDocumentOptions`]({{ site.api }}interface/mergedocumentoptions.html).\n\n**Return Value**\n\nThe object of the new document. Please refer to [`IDocument`]({{ site.api }}interface/idocument/index.html).\n\n**Code Snippet**\n\n```typescript\nconst firstDoc = Dynamsoft.DDV.documentManager.createDocument({\n    name: \"first_document\",\n    author: \"DDV\",\n    creationDate: \"D:20230101085959-08'00'\",\n    });\n\nconst source1 = {\n    fileData: /*sampleBlob1*/;\n};\nawait firstDoc.loadSource([source1]);\n\nconst secondDoc = Dynamsoft.DDV.documentManager.createDocument({\n    name: \"second_document\",\n    });\n\nconst source2 = {\n    fileData: /*sampleBlob2*/;\n};\nawait secondDoc.loadSource([source2]);\n\nconst docUid1 = firstDoc.uid; //\"lnn0ll9o124\"\nconst docUid2 = secondDoc.uid; //\"lnn0iai110t\"\n\nconst mergeOptions = {\n    name: \"mergedDoc\", // Specify the name of the new document.\n    author: \"DDV\", // Specify the author of the new document.\n    creationDate: \"D:20230101085959-08'00'\", // Specify the creation date. Note that the argument should be D:YYYYMMDDHHmmSSOHH'mm', like D:20230101085959-08'00'.\n    deleteOriginal: true, // Whether to delete the original documents.\n};\n\n//Merge these two docs\nDynamsoft.DDV.documentManager.mergeDocuments([docUid1, docUid2], mergeOptions);\n\n//OR\nDynamsoft.DDV.documentManager.mergeDocuments([\"lnn0ll9o124\", \"lnn0iai110t\"], mergeOptions);\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.   \n -80104 | *XXX(API)*: The specified document(s) do not exist.  \n -80201 | docUid does not allow duplicate.     \n\n### copyPagesToDocument()\n\nCopy pages from a specified document to another document.\n\n**Syntax**\n\n```typescript\ncopyPagesToDocument(sourceDocUid: string, targetDocUid: string, transferOptions?: TransferOptions): void;\n```\n\n**Parameters**\n\n`sourceDocUid`: The uid of source document.\n\n`targetDocUid`: The uid of target document.\n\n`transferOptions`: The transfer options. Please refer to [`TransferOptions`]({{ site.api }}interface/transferoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Copy the first and second pages of doc \"lnn0ll9o124\" to doc \"lnn0iai110t\" and put them before the first page.\nconst copyOptions = {\n    sourceIndices: [0,1],\n    insertBeforeIndex: 0,\n};\n\nDynamsoft.DDV.documentManager.copyPagesToDocument(\"lnn0ll9o124\", \"lnn0iai110t\", copyOptions);\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.   \n -80104 | *XXX(API)*: The specified document(s) do not exist.  \n\n\n### movePagesToDocument()\n\nMove pages from a specified document to another document.\n\n**Syntax**\n\n```typescript\nmovePagesToDocument(sourceDocUid: string, targetDocUid: string, transferOptions?: TransferOptions): void;\n```\n\n**Parameters**\n\n`sourceDocUid`: The uid of source document.\n\n`targetDocUid`: The uid of target document.\n\n`transferOptions`: The transfer options. Please refer to [`TransferOptions`]({{ site.api }}interface/transferoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Move the first and second pages of doc \"lnn0ll9o124\" to doc \"lnn0iai110t\" and put them before the first page.\nconst moveOptions = {\n    sourceIndices: [0,1],\n    insertBeforeIndex: 0,\n}\nDynamsoft.DDV.documentManager.movePagesToDocument(\"lnn0ll9o124\", \"lnn0iai110t\", moveOptions);\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.   \n -80104 | *XXX(API)*: The specified document(s) do not exist.  \n\n## Events\n\n### on()\n\nBind a listener to the specified event. \n\n**Syntax**\n\n```typescript\non(eventName: EventName, listener:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It should be [an integrated event name](#integrated-events).\n\n`listener`: Specify the listener.\n\n**Code Snippet**\n\n```typescript\n// Bind a listener to the integrated event documentCreated.\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.docUid);\n    console.log(e.docName);\n};\n\nDynamsoft.DDV.documentManager.on(\"documentCreated\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n\n### off()\n\nUnbind event listener(s) from the specified event. \n\n**Syntax**\n\n```typescript\noff(eventName: EventName, listener?:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It should be [an integrated event name](#integrated-events).\n\n`listener`: Specify the listener. If no listener is specified, unbind all event listeners from the specified event\n\n**Code Snippet**\n\n```typescript\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.docUid);\n    console.log(e.docName);\n};\n\nDynamsoft.DDV.documentManager.on(\"documentCreated\", eventFunc);\n\n// Unbind the specified event listener.\nDynamsoft.DDV.documentManager.off(\"documentCreated\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n \n### Integrated Events\n\n#### documentCreated\n\nTriggered when a new document is created.\n\n**Callback**\n\n `DocumentEvent`: An EventObject.\n\n**Attributes**\n\n `docUid`: The docUid of the created document.\n\n `docName`: The name of the created document.\n\n#### documentDeleted\n\nTriggered when a document is deleted.\n\n**Callback**\n\n `DocumentEvent`: An EventObject.\n\n**Attributes**\n\n `docUid`: The docUid of the deleted document.\n\n `docName`: The name of the deleted document.\n\n{% comment %} \n\n#### pagesAdded\n\nTriggered when the page(s) are added.\n\n**Callback**\n\n `PageAddedEvent`: An EventObject.\n\n**Attributes**\n\n `docUid`: The uid of the document which adds page(s).\n\n `indices[]`: The array of the added page(s) index(ices).\n\n `pageUids[]`: The array of the added page(s) uids.\n\n#### pagesDeleted\n\nTriggered when the page(s) are deleted.\n\n**Callback**\n\n `PageDeletedEvent`: An EventObject.\n\n**Attributes**\n\n `docUid`: The uid of the document  which removes page(s).\n\n `indices[]`: The array of the deleted page(s) indices.\n\n `pageUids[]`: The array of the deleted page(s) uids. \n \n {% endcomment %}",
-      "breadcrumb": "DocumentManager Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer User Interface - Customize UI Dynamically",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/ui/customize/dynamically.html",
-      "content": "# Update UI dynamically after creating the viewer\n\nSometimes, dynamically changing the layout is required, such as hiding specified elements or modifying the available status of elements under certain conditions. `getUiConfig()` and `updateUiConfig()` can help to achieve these requirements.\n\n## Use case\n\nHide the header dynamically.\n\n- Step one: Get current `UiConfig` by using method `getUiConfig()`.\n    ```typescript\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n    });\n    const uiConfig = editViewer.getUiConfig();\n    ```\n- Step two: Remove the header from current `UiConfig`.\n    ```typescript\n    uiConfig.children.splice(0,1);\n    ```\n- Step three: Update the revised UiConfig by using method `updateUiConfig()`.\n    ```typescript\n    editViewer.updateUiConfig(uiConfig);\n    ``` \n\n![Update UI dynamically](/assets/imgs/uidynamically.png)\n\n## Related API\n\n- [`getDefaultUiConfig()`]({{ site.api }}namespace/ddv.html#static-getdefaultuiconfig)\n- `getUiConfig()` in \n    - [EditViewer Class]({{ site.api }}class/editviewer.html#getuiconfig)\n    - [CaptureViewer Class]({{ site.api }}class/captureviewer.html#getuiconfig)\n    - [PerspectiveViewer Class]({{ site.api }}class/perspectiveviewer.html#getuiconfig)\n    - [BrowseViewer Class]({{ site.api }}class/browseviewer.html#getuiconfig)\n    - [CustomViewer Class]({{ site.api }}class/customviewer.html#getuiconfig)\n- `updateUiConfig()` in\n    - [EditViewer Class]({{ site.api }}class/editviewer.html#updateuiconfig)\n    - [CaptureViewer Class]({{ site.api }}class/captureviewer.html#updateuiconfig)\n    - [PerspectiveViewer Class]({{ site.api }}class/perspectiveviewer.html#updateuiconfig)\n    - [BrowseViewer Class]({{ site.api }}class/browseviewer.html#updateuiconfig)\n    - [CustomViewer Class]({{ site.api }}class/customviewer.html#updateuiconfig)",
-      "breadcrumb": "Update UI Dynamically"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features - Edit Viewer",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/viewers/editviewer.html",
-      "content": "# Edit Viewer\n\nEdit Viewer is used to edit the pages in document, such as, rotating, cropping, filtering, annotating, etc. as well as adjust the layout of the display.\n\n- [Default user interface]({{ site.ui }}default_ui.html#edit-viewer)\n- [Default viewer configuration]({{ site.viewer }}viewerconfig.html#edit-viewer)\n\n```typescript\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: document.getElementById(\"viewer\"),\n});\neditViewer.openDocument(\"docUid\"); // Open a document which has pages\n```\n\n## Edit pages\n\n### Rotate\n\nThe method [`rotate()`]({{ site.api }}class/editviewer.html#rotate) is used to rotate the pages in the edit viewer.\n\n**Use cases**\n\n- Rotate the current page 90 degrees counterclockwise.\n\n    ```typescript\n    editViewer.rotate(-90);\n    ```\n\n- Rotate all pages 90 degrees clockwise.\n\n    ```typescript\n    const pageCount = editViewer.getPageCount();\n    editViewer.rotate(90,[...Array(pageCount).keys()]);\n    ```\n\n### Crop \n\nThe method [`crop()`]({{ site.api }}class/editviewer.html#crop) is used to crop the pages. If the rectangle selection is exceeds the bounds of the page, it won't take effect.\n\n**Use cases**\n\n- Crop the current page with the specified rectangle.\n\n    ```typescript\n    const rect = {\n        left: 100,\n        top: 100,\n        width: 200,\n        height: 200,\n    };\n    editViewer.crop(rect); \n    ```\n\n- Crop all pages with the specfied rectangle.\n\n    ```typescript\n    const pageCount = editViewer.getPageCount(); \n    const rect = {\n        left: 100,\n        top: 100,\n        width: 200,\n        height: 200,\n    };\n    editViewer.crop(rect,[...Array(pageCount).keys()]); \n    ```\n\n### Undo/redo\n\nRotating and cropping operations can be undone and redone in the edit viewer by using [`undo()`]({{ site.api }}class/editviewer.html#undo) and [`redo()`]({{ site.api }}class/editviewer.html#redo).\n\n```typescript\n// Undo\neditViewer.undo();\n\n// Redo\neditViewer.redo();\n```\n\n## Adjust display layout of pages\n\n### Zoom in/out\n\nTo zoom in or zoom out, the property [`zoom`]({{ site.api }}class/editviewer.html#zoom) can help.\n\n```typescript\n//Actual size\neditViewer.zoom = 1;\n\n//Twice the actual size\neditViewer.zoom = 2; \n\n//10% the actual size\neditViewer.zoom = 0.1;\n```\n\n### Display mode\n\nThe pages can be displayed in continous scrolling mode or page by page mode. [`displayMode`]({{ site.api }}class/editviewer.html#displaymode) is used to switch the different display modes.\n\n```typescript\n// Display the pages page by page\neditViewer.displayMode = \"single\";\n\n// Display the pages continuously\neditViewer.displayMode = \"continuous\";\n```\n\n### Fit mode\n\n[`fitMode`]({{ site.api }}class/editviewer.html#fitmode) can help to change the fit mode of the viewer.\n\n```typescript\n// Fit Width\neditViewer.fitMode = \"width\";\n\n// Fit Height\neditViewer.fitMode = \"height\";\n\n// Fit Window\neditViewer.fitMode = \"window\";\n\n// Actual Size\neditViewer.fitMode = \"actualSize\";\n```\n\n## Built-in thumbnail\n\nEach edit viewer has a built-in thumbnail, as you may know, an [`IBrowseViewer`]({{ site.api }}interface/ibrowseviewer.html) object represents the thumbnail object in edit viewer. When you create an `editViewer` instance, the `editViewer.thumbnail` object will be generated at meanwhile.\n\n**Use case**\n\nShow/hide thumbnail.\n\n```typescript\n// Show thumbnail\neditViewer.thumbnail.show();\n\n// Hide thumbnail\neditViewer.thumbnail.hide();\n```\n\n## Annotation feature\n\n### Create and edit annotation(s) via programming\n\nPlease refer to [Annotation Management]({{ site.features }}datamanagement/annotmanagement.html).\n\n### Create annotation(s) via UI\n\nWhen [`toolMode`]({{ site.api }}class/editviewer.html#toolmode) is set to `annotation`, you can use the mouse to draw corresponding annotations on the page which is displayed in the Edit Viewer if [`annotationMode`]({{ site.api }}class/editviewer.html#annotationmode) is set to `rectangle `or similar annotation type modes.\n\nFor example, if you set the code snippet below,\n\n```typescript\neditViewer.toolMode = \"annotation\";\neditViewer.annotationMode = \"rectangle\";\n```\nyou can draw a rectangle annotation via mouse pointer on page now.\n\nAfter completing an annotation drawing interaction, please note that the `toolMode` automatically switches to `pan`, unless the `annotationMode` is set to `select`, `erase`, or `ink` mode.\n\nAnnotations drawn through the UI come with predefined default styles. If you intend to customize these default styles, please refer to [how to customize the default annotation style]({{ site.viewer }}customize.html#default-annotation-style). \n\n### Select annotation(s) on the current page\n\n**Use cases**\n\n- Select all annotations on the current page using [`getAnnotationsByPage()`]({{ site.api }}class/annotationmanager.html#getannotationsbypage) and [`selectAnnotations()`]({{ site.api }}class/editviewer.html#selectannotations).\n\n    ```typescript\n    const curPageUid = editViewer.getCurrentPageUid();; // Get the page uid of current page in the edit viewer\n\n    const annotations = Dynamsoft.DDV.annotationManager.getAnnotationsByPage(curPageUid);\n\n    const annotationUids = annotations.map(obj=>obj.uid);\n\n    editViewer.selectAnnotations(annotationUids);\n    ```\n\n### Get selected annotation(s)\n\nUsing [`getSelectedAnnotations`]({{ site.api }}class/editviewer.html#getselectedannotations).\n\n```typescript\nconst annotations = editViewer.getSelectedAnnotations();\n```",
-      "breadcrumb": "Edit Viewer"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - EditViewer Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/editviewer.html",
-      "content": "# EditViewer Class\n\nEdit Viewer is used to edit the pages in document, such as, rotating, cropping, filtering, etc. as well as adjust the layout of the display.\n\n## API Index\n\n**Create and Destroy Instances** \n\n| API Name                      | Description                                      |\n| ----------------------------- | ------------------------------------------------ |\n| [`EditViewer()`](#editviewer) | Default constructor of an `EditViewer` instance. |\n| [`destroy()`](#destroy)       | Destroy the `EditViewer` instance.               |\n\n**Viewer Control**\n\n| API Name                                | Description                                          |\n| --------------------------------------- | ---------------------------------------------------- |\n| [`bindContainer()`](#bindcontainer)     | Bind the viewer to the specified container.          |\n| [`unbindContainer()`](#unbindcontainer) | Unbind the viewer from the specified container.      |\n| [`isBoundContainer`](#isboundcontainer) | Return whether the viewer is bound to a container.   |\n| [`getStyle()`](#getstyle)               | Get the style object of `EditViewer`.                |\n| [`getVisiblePagesInfo()`](#getVisiblePagesInfo)               | Get the visible pages info                |\n| [`updateStyle()`](#updatestyle)         | Update the style object of `EditViewer`.             |\n| [`getUiConfig()`](#getuiconfig)         | Get current `UiConfig` object.                       |\n| [`updateUiConfig()`](#updateuiconfig)   | Update `UiConfig` object.                            |\n| [`show()`](#show)                       | Show the viewer.                                     |\n| [`hide()`](#hide)                       | Hide the viewer.                                     |\n| [`isVisible`](#isvisible)               | Return whether the viewer is shown or hidden.        |\n| [`toolMode`](#toolmode)                 | Specify or return the tool mode of the viewer.       |\n| [`annotationMode`](#annotationmode)     | Specify or return the annotation mode of the viewer. |\n\n**Document and Page Control**\n\n| API Name                                        | Description                                     |\n| ----------------------------------------------- | ----------------------------------------------- |\n| [`openDocument()`](#opendocument)               | Open the specified document by document uid.    |\n| [`closeDocument()`](#closedocument)             | Close current document.                         |\n| [`currentDocument`](#currentdocument)           | Return the object of the current document.      |\n| [`getPageCount()`](#getpagecount)               | Get the page count in the viewer.               |\n| [`goToPage()`](#gotopage)                       | Navigate to the specified page by index.        |\n| [`getCurrentPageIndex()`](#getcurrentpageindex) | Get the index of current page.                  |\n| [`getCurrentPageUid()`](#getcurrentpageuid)     | Get the uid of the current page.                |\n| [`indexToUid()`](#indextouid)                   | Get the uid of the specified page by its index. |\n| [`uidToIndex()`](#uidtoindex)                   | Get the index of the specified page by its uid. |\n\n\n**Display Control**\n\n| API Name                                              | Description                                        |\n| ----------------------------------------------------- | -------------------------------------------------- |\n| [`displayMode`](#displaymode)                         | Specify or return the display mode of the viewer.  |\n| [`setParallelScrollCount()`](#setparallelscrollcount) | Specify the number of pages to scroll in parallel. |\n| [`fitMode`](#fitmode)                                 | Specify or return the fit mode of the viewer.      |\n| [`zoom`](#zoom)                                       | Specify or return zoom ratio.                      |\n| [`zoomOrigin`](#zoomorigin)                           | Specify or return the zoom origin of the viewer.   |\n\n**Annotation Control**\n\n| API Name                                                    | Description                                                      |\n| ----------------------------------------------------------- | ---------------------------------------------------------------- |\n| [`setAnnotationDrawingStyle()`](#setannotationdrawingstyle) | Set the default drawing style of annotations by annotation type. |\n| [`selectAnnotations()`](#selectannotations)                 | Select the specified annotation(s) on the current page.          |\n| [`getSelectedAnnotations()`](#getselectedannotations)       | Get selected annotation(s).                                      |\n| [`getAnnotationDrawingStyle()`](#getannotationdrawingstyle)       | Get the annotation drawing style(s).                                      |\n\n\n**Edit Operations**\n\n| API Name                              | Description                                                                                                                        |\n| ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |\n| [`rotate()`](#rotate)                 | Rotate the specified pages.                                                                                                        |\n| [`crop()`](#crop)                     | Crop the specified page(s) with the specified rectangle.                                                                           |\n| [`getCropRect()`](#getcroprect)       | Get the crop rectangular selection.                                                                                                |\n| [`setCropRect()`](#setcroprect)       | Set a crop rectangular selection on the current page. *This method is only available when [`toolMode`](#toolmode) is `crop` mode.* |\n| [`cropMode`](#cropmode)                     | Get the current mode for cropping: crop the current image or all the images                                    |\n| [`undo()`](#undo)                     | Undo the last editing operation.                                                                                                   |\n| [`redo()`](#redo)                     | Redo the last undo operation.                                                                                                      |\n| [`saveOperations()`](#saveoperations) | Save the edit operations in pages to document.                                                                                     |\n\n**Text Selection**\n\n| API Name        | Description                                        |\n| --------------- | -------------------------------------------------- |\n| [`getTextSelection()`](#gettextselection) | Get selected text's detailed info. |\n\n**Search**\n\n| API Name        | Description                                        |\n| --------------- | -------------------------------------------------- |\n| [`searchNextText()`](#searchnexttext)   | Search the next matched result. |\n| [`searchPrevText()`](#searchprevtext) | Search the previous matched result. |\n| [`searchFullText()`](#searchfulltext) | Search the full text to get all the matched results. |\n\n**Events**\n\n| API Name        | Description                                        |\n| --------------- | -------------------------------------------------- |\n| [`on()`](#on)   | Bind a listener to the specified event.            |\n| [`off()`](#off) | Unbind event listener(s) from the specified event. |\n\n***Integrated Events***\n\n| Event Name                                                  |\n| ----------------------------------------------------------- |\n| [`resized`](#resized)                                       |\n| [`pageRendered`](#pagerendered)                             |\n| [`currentIndexChanged`](#currentindexchanged)               |\n| [`currentPageChanged`](#currentpagechanged)                 |\n| [`displayModeChanged`](#displaymodechanged)                 |\n| [`fitModeChanged`](#fitmodechanged)                         |\n| [`zoomChanged`](#zoomchanged)                               |\n| [`toolModeChanged`](#toolmodechanged)                       |\n| [`cropRectDrawn`](#croprectdrawn)                           |\n| [`cropRectDeleted`](#croprectdeleted)                       |\n| [`cropRectModified`](#croprectmodified)                     |\n| [`annotationDrawingStyleChanged`](#annotationdrawingstylechanged)                     |\n| [`selectedAnnotationsChanged`](#selectedannotationschanged) |\n| [`click`](#click)                                           |\n| [`dblclick`](#dbclick)                                      |\n| [`rightclick`](#rightclick)                                 |\n| [`visibilityChanged`](#visibilitychanged)                   |\n| [`textUnselected`](#textunselected)                   |\n| [`textSelected`](#textselected)                   |\n| [`textSearchTriggered`](#textsearchtriggered)                   |\n| [`undoRedoStateChanged`](#undoredostatechanged)                   |\n| [`paginationChanged`](#paginationchanged)                   |\n| [`pointerdown`](#pointerdown)                   |\n| [`pointerdown`](#pointerdown)                   |\n| [`pointermove`](#pointermove)                   |\n| [`pointerup`](#pointerup)                   |\n| [`pageover`](#pageover)                   |\n| [`pageout`](#pageout)                   |\n| [`scroll`](#scroll) |\n\n## Create and Destroy Instances\n\n### EditViewer()\n\nDefault constructor of an `EditViewer` instance. \n\n**Syntax**\n\n```typescript\nnew Dynamsoft.DDV.EditViewer(options?: EditViewerConstructorOptions);\n```\n\n**Parameters**\n\n`options`: The constructor options for an `EditViewer` instance. Please refer to [`EditViewerConstructorOptions`](/api/interface/editviewerconstructoroptions.md).\n\n**Code Snippet**\n\n```typescript\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: document.getElementById(\"viewer\"),\n});\n\n// An IBrowseViewer object will be created at meanwhile. Please refer to Remark part.\nconst thumbnailObj = editViewer.thumbnail; \n```\n\n**Exception**\n\n | Error Code | Error Message                                                                          |\n | ---------- | -------------------------------------------------------------------------------------- |\n | -80100     | *XXX(API)*: *XXX(ParameterName)* is invalid.                                           |\n | -80001     | License string is invalid.                                                             |\n | -80002     | *XXX(LicenseModuleName)* module license has expired.                                   |\n | -80003     | *XXX(LicenseModuleName)* module license is missing.                                    |\n | -80004     | *XXX(LicenseModuleName)* module license version does not match.                        |\n | -80005     | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license. |\n | -80050     | DDV.Core.init() has not been set up yet.                                               |\n | -80051     | DDV.Core.init() has not been completed.                                                |\n | -80302     | minZoom value cannot be larger than maxZoom value.                                     |\n\n**Warning**\n\n | Error Code | Error Message                                                                                                |\n | ---------- | ------------------------------------------------------------------------------------------------------------ |\n | -80316     | ImageFilter needs to be configured by Dynamsoft.DDV.setProcessingHandler to enable the image filter feature. |\n\n**Remark**\n\n- An `IBrowseViewer` object, `editViewer.thumbnail`, will be created at meanwhile which represents the thumbnail object in edit viewer. Please refer to [`IBrowseViewer`]({{ site.api }}interface/ibrowseviewer.html).\n\n### destroy()\n\nDestroy the `EditViewer` instance.\n\n**Syntax**\n\n```typescript\ndestroy(): void;\n```\n\n**Code Snippet**\n\n```typescript\neditViewer.destroy();\n```\n\n**Remark**\n\n- The editing operations (rotating, cropping, filtering) in pages will be saved to document automatically when destroy the viewer instance.\n\n**See Also**\n\n[saveOperations](#saveoperations)\n\n## Viewer Control\n\n### bindContainer()\n\nBind the viewer to the specified container.\n\n**Syntax**\n\n```typescript\nbindContainer(container: string | HTMLElement): void;\n```\n\n**Parameters**\n\n`container`: The container which is used to show the viewer. Its `id` or `HTMLElement` is acceppted.\n\n**Code Snippet**\n\n```typescript\n// Assume there is a container with id \"viewercontainer\" on the page.\neditViewer.bindContainer(\"viewercontainer\");\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80301 | The specified container does not exist. \n\n**Remark**\n\n- A viewer can only be bound to one container at once. If you bind the viewer to another container when it has been bound to a container, the viewer will be bound to the new container and unbound from the old container automatically. \n\n### unbindContainer()\n\nUnbind the viewer from the specified container.\n\n**Syntax**\n\n```typescript\nunbindContainer(): void;\n```\n\n**Code Snippet**\n\n```typescript\neditViewer.unbindContainer();\n```\n\n### isBoundContainer\n\nReturn whether the viewer is bound to a container.\n\n**Syntax**\n\n```typescript\nreadonly isBoundContainer: boolean;\n```\n\n### getStyle()\n\nGet the style object of `EditViewer`.\n\n**Syntax**\n\n```typescript\ngetStyle(editViewerStyleName: EditViewerStyleName): EditViewerStyle | null;\n```\n\n**Parameters**\n\n`editViewerStyleName`: An `EditViewerStyleName` can be one of five types.\n\n```typescript\ntype EditViewerStyleName = \"canvasStyle\" | \"pageStyle\" | \"currentPageStyle\" | \"quadSelectionStyle\" | \"annotationSelectionStyle\";\n```\n\n**Return values**\n\nThe style object. Please refer to [Style Interfaces]({{ site.api }}interface/styleinterface/index.html)..\n\n**Code Snippet**\n\n```typescript\n// Get pageStyle object;\nconst pageStyle = editViewer.getStyle(\"pageStyle\");\n```\n\n**Warning**\n\n Error Code  | Error Message                                                            | API Return Value\n--------|-------------------------------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `null`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `null`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `null`\n\n### getVisiblePagesInfo()\n\nGet the visible pages info.\n\n**Syntax**\n\n```typescript\ngetVisiblePagesInfo(): PageVisualInfo[];\n```\n\n**Return values**\n\nArray of the `PageVisualInfo` object. Please refer to [`PageVisualInfo`](/api/interface/pagevisualinfo.md).\n\n### updateStyle()\n\nUpdate the style object of `EditViewer`.\n\n**Syntax**\n\n```typescript\nupdateStyle(editViewerStyleName: EditViewerStyleName, editViewerStyle: EditViewerStyle): boolean;\n```\n\n**Parameters**\n\n`editViewerStyleName`: An `EditViewerStyleName` can be one of five types.\n\n```typescript\ntype EditViewerStyleName = \"canvasStyle\" | \"pageStyle\" | \"currentPageStyle\" | \"quadSelectionStyle\" | \"annotationSelectionStyle\";\n```\n\n`editViewerStyle`: The style object. Please refer to [Style Interfaces]({{ site.api }}interface/styleinterface/index.html).\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n- First method\n\n    ```typescript\n    // Get style object\n    const pageStyle = editViewer.getStyle(\"pageStyle\");\n\n    // Modify the style object\n    pageStyle.background = \"red\";\n    pageStyle.border = \"1px solid green\";\n\n    // Update page style\n    editViewer.updateStyle(\"pageStyle\", pageStyle);\n    ```\n\n- Second method\n\n    ```typescript\n    // Update the style object directly\n    editViewer.updateStyle(\"pageStyle\", {\n        background: \"red\",\n        border: \"1px solid green\",\n    });\n    ```\n\n**Warning**\n\n Error Code  | Error Message                                                            | API Return Value\n--------|-------------------------------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `false`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `false`\n\n\n**Remark**\n\n- The updates are independent of whether the viewer is displayed and are updated in real time.\n\n### getUiConfig()\n\nGet current `UiConfig` object.\n\n**Syntax**\n\n```typescript\ngetUiConfig(): UiConfig;\n```\n\n**Return Value**\n\nThe [`UiConfig`]({{ site.api }}interface/uiconfig.html) object.\n\n**Code Snippet**\n\n```typescript\nconst viewerUi = editViewer.getUiConfig();\n```\n\n### updateUiConfig()\n\nUpdate `UiConfig` object.\n\n**Syntax**\n\n```typescript\nupdateUiConfig(uiConfig: UiConfig): boolean;\n```\n\n**Parameters**\n\n`uiConfig`: The [`UiConfig`]({{ site.api }}interface/uiconfig.html) to update.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst viewerUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\nconst header = viewerUi.children[0];\nheader.children.splice(0,0,Dynamsoft.DDV.Elements.Delete); //Add `Delete` element in header.\neditViewer.updateUiConfig(viewerUi);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n -80313 | The element *XXX(ElementName)* is not supported in *XXX(ClassName)* class.      | `false`\n\n**Remark**\n\n- The updates are independent of whether the viewer is displayed and are updated in real time.\n\n### show()\n\nShow the viewer.\n\n**Syntax**\n\n```typescript\nshow(): void;\n```\n\n**Code Snippet**\n\n```typescript\neditViewer.show();\n```\n\n**Remark**\n\n- The viewer is shown automatically when it is created.\n\n### hide()\n\nHide the viewer.\n\n**Syntax**\n\n```typescript\nhide(): void;\n```\n\n**Code Snippet**\n\n```typescript\neditViewer.hide();\n```\n\n### isVisible\n\nReturn whether the viewer is shown or hidden.\n\n**Syntax**\n\n```typescript\nreadonly isVisible: boolean;\n```\n\n**Remark**\n\n- The viewer is shown automatically when it is created which means the default value of `isVisible` is `true`.\n\n### toolMode\n\nSpecify or return the tool mode of the viewer. \n\n**Syntax**\n\n```typescript\ntoolMode: ToolMode; \n```\n\nA `ToolMode` can be one of following types.\n\n```typescript\ntype ToolMode = \"pan\" | \"crop\" | \"annotation\" | \"textSelection\";\n```\n\n`pan`: The default tool mode.\n\n`crop`: A mode what allows drawing a rectangle by [`setCropRect()`](#setcroprect).\n\n`annotation`: A mode that allows creating annotations to be manipulated via the UI.\n\n`textSelection`: A mode that allows selecting text to be manipulated via the UI. \n\n**Code Snippet**\n\n```typescript\neditViewer.toolMode = \"crop\";\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n\n**Remark**\n\n- If `toolMode` is set to `annotation`, can use [`annotationMode`](#annotationmode) to clarify the specific operation.\n\n### annotationMode\n\nSpecify or return the annotation mode of the viewer.\n\n**Syntax**\n\n```typescript\nannotationMode: AnnotationMode;\n```\n\nAn `AnnotationMode` can be one of following types.\n\n```typescript\ntype AnnotationMode = \"select\" | \"erase\" | \"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"strikeout\" | \"underline\";\n```\n\n**Code Snippet**\n\n```typescript\neditViewer.toolMode = \"annotation\";\neditViewer.annotationMode = \"select\";\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n\n**Remark**\n\n- It only take effect when [`toolMode`](#toolmode) is `annotation`.\n- Default value is `select`.\n- When `enableContinuousDrawing` is false, please note that the `toolMode` will automatically switch to `pan` after completing an annotation drawing interaction, unless the `annotationMode` is set to `select`, `erase`, or `ink` mode.\n\n## Document and Page Control\n\n### openDocument()\n\nOpen the specified document.\n\n**Syntax**\n\n```typescript\nopenDocument(docUid: string | doc: IDocument): void;\n```\n\n**Parameters**\n\n`docUid`: The uid of the specified document.\n\n`doc`: The object of the document to open. Please refer to [IDocument]({{ site.api }}interface/idocument/index.html).\n\n**Code Snippet**\n\n```typescript\n// Assume there is a document whose id is \"lnn0ll9o124\".\neditViewer.openDocument(\"lnn0ll9o124\");\n\n// OR\n// Assume there is a document object firstDoc.\nconst docUid = firstDoc.uid;\neditViewer.openDocument(docUid);\neditViewer.openDocument(firstDoc);\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: docUid or doc is invalid.\n -80102 | *XXX(API)*: docUid or doc is missing.\n -80104 | *XXX(API)*: The specified document(s) do not exist.  \n\n**Remark**\n\n- If another ducument is opened when there is a document already opened, the opened document will be closed automatically.\n\n### closeDocument()\n\nClose current document.\n\n**Syntax**\n\n```typescript\ncloseDocument(): boolean; \n```\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\neditViewer.closeDocument();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `false`\n\n### currentDocument\n\nReturn the object of the current document.\n\n**Syntax**\n\n```typescript\nreadonly currentDocument: IDocument | null;\n```\n\n**Code Snippet**\n\n```typescript\nconst currentDoc = editViewer.currentDocument;\n```\n\n**See Also**\n\n[IDocument]({{ site.api }}interface/idocument/index.html)\n\n### getPageCount()\n\nGet the page count in the viewer.\n\n**Syntax**\n\n```typescript\ngetPageCount(): number;\n```\n\n**Return Value**\n\nThe page count.\n\n**Code Snippet**\n\n```typescript\nconst pageCount = editViewer.getPageCount();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `-1`\n\n### goToPage()\n\nNavigate to the specified page by index.\n\n**Syntax**\n\n```typescript\ngoToPage(index: number): number;\n```\n\n**Parameters**\n\n`index`: The index of the page which need to navigate to.\n\n**Return Value**\n\nThe index of the page which navigate to.\n\n**Code Snippet**\n\n```typescript\n// Navigate to page 4.\neditViewer.goToPage(3);\n```\n\n**Warning**\n\n Error Code  | Error Message                                             | API Return Value\n--------|----------------------------------------------------------|------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.        | `-1`\n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.    | `-1`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.       | `-1`\n -80304 | No document opened.                                      | `-1`\n -80305 | There is no image in the current document.               | `-1`\n\n### getCurrentPageIndex()\n\nGet the index of the current page.\n\n**Syntax**\n\n```typescript\ngetCurrentPageIndex(): number; \n```\n\n**Return Value**\n\nThe index of the current page.\n\n**Code Snippet**\n\n```typescript\nconst currentIndex = editViewer.getCurrentPageIndex();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `-1`\n -80305 | There is no image in the current document.          | `-1`\n\n### getCurrentPageUid()\n\nGet the uid of the current page.\n\n**Syntax**\n\n```typescript\ngetCurrentPageUid(): string;\n```\n\n**Return Value**\n\nThe uid of the current page.\n\n**Code Snippet**\n\n```typescript\nconst curPageUid = editViewer.getCurrentPageUid();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `''`\n -80305 | There is no image in the current document.          | `''`\n\n### indexToUid()\n\nGet the uid of the specified page by its index.\n\n**Syntax**\n\n```typescript\nindexToUid(index: number): string;\n```\n\n**Parameters**\n\n`index`: The index of the specified page.\n\n**Return Value**\n\nThe uid of the page.\n\n**Code Snippet**\n\n```typescript\n// Get the first page's uid\nconst firstPageUid = editViewer.indexToUid(0);\n```\n\n**Warning**\n\n Error Code  | Error Message                                             | API Return Value\n--------|----------------------------------------------------------|------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.        | `''`\n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.    | `''`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.       | `''`\n -80304 | No document opened.                                      | `''`\n -80305 | There is no image in the current document.               | `''`\n\n### uidToIndex()\n\nGet the index of the specified page by its uid.\n\n**Syntax**\n\n```typescript\nuidToIndex(pageUid: string): number;\n```\n\n**Parameters**\n\n`pageUid`: The uid of the specified page.\n\n**Return Value**\n\nThe index of the page.\n\n**Code Snippet**\n\n```typescript\nconst curPageUid = editViewer.getCurrentPageUid();\neditViewer.uidToIndex(curPageUid);\n```\n\n**Warning**\n\n Error Code  | Error Message                                             | API Return Value\n--------|----------------------------------------------------------|------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.        | `-1`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.       | `-1`\n -80105 | *XXX(API)*: The specified page(s) do not exist.  | `-1`\n -80304 | No document opened.                                      | `-1`\n -80305 | There is no image in the current document.               | `-1`\n\n## Annotation Control\n\n### setAnnotationDrawingStyle()\n\nSet the default drawing style of annotations by annotation type.\n\n**Syntax**\n\n```typescript\nsetAnnotationDrawingStyle(config: AnnotationDrawingStyleConfig): boolean;\n```\n\n**Parameters**\n\n`config`: Specifies the default drawing style of each stamp type provided. See [`AnnotationDrawingStyleConfig`]({{ site.api }}interface/styleinterface/annotationdrawingstyleconfig.html) for details.\n\n**Return value**\n\n`true`: Successfully set the specified default drawing styles.\n\n`false`: Failed to set the specified default drawing styles.\n\n**Warning**\n\n | Error Code | Error Message                                | API return value |\n | ---------- | -------------------------------------------- | ---------------- |\n | -80100     | *XXX(API)*: *XXX(ParameterName)* is invalid. | `false`          |\n | -80102     | *XXX(API)*: *XXX(ParameterName)* is missing. | `false`          |\n\n### selectAnnotations()\n\nSelect the specified annotations on the current page.\n\n**Syntax**\n\n```typescript\nselectAnnotations(annotationUids: string[]): boolean;\n```\n\n**Parameters**\n\n`annotationUids`: Specify the array of annotation uids to select. If set to `[]`, no annotation will be selected.\n\n**Return value**\n\n`true`: Selected the specified annotations.\n\n`false`: Failed to select the specified annotations.\n\n\n**Warning**\n\n | Error Code | Error Message                                                             | API return value |\n | ---------- | ------------------------------------------------------------------------- | ---------------- |\n | -80100     | *XXX(API)*: *XXX(ParameterName)* is invalid.                              | `false`          |\n | -80102     | *XXX(API)*: *XXX(ParameterName)* is missing.                              | `false`          |\n | -80304     | No document opened.                                                       | `false`          |\n | -80305     | There is no image in the current document.                                | `false`          |\n | -80314     | *XXX(API)*: Not available in current toolMode.                            | `false`          |\n | -80317     | The specified annotation(s) is not on the current page or does not exist. | `false`          |\n | -80319     | ReadOnly annotation or noView annotation cannot be selected.              | `false`          |\n | -80320     | Unknown annotation or incomplete annotation cannot be selected.           | `false`          |\n | -80321     | Flattened annotation cannot be selected.                                  | `false`          |\n\n### getSelectedAnnotations()\n\nGet selected annotation(s).\n\n**Syntax**\n\n```typescript\ngetSelectedAnnotations(): Annotation[];\n```\n\n**Return value**\n\nAn array of selected `Annotation` object.\n\n**Code Snippet**\n\n```typescript\nconst selectAnnots = editViewer.getSelectAnnotations();\n```\n\n**Warning**\n\n Error Code | Error Message                                               | API return value\n ---------- | ------------------------------------------------------------|--------- \n -80304     | No document opened.                                         | `[]`\n -80305     | There is no image in the current document.                  | `[]`\n\n### getAnnotationDrawingStyle()\n\nGet the annotation drawing style.\n\n**Syntax**\n\n```typescript\ngetAnnotationDrawingStyle(): AnnotationDrawingStyleConfig;\n```\n\n**Return value**\n\nAn [`AnnotationDrawingStyleConfig`](/api/interface/styleinterface/annotationdrawingstyleconfig.md) object.\n\n\n## Display Control\n\n### displayMode\n\nSpecify or return the display mode of the viewer.\n\n**Syntax**\n\n```typescript\ndisplayMode: DisplayMode; \n```\n\nA `DisplayMode` can be one of two types. \n\n```typescript\ntype DisplayMode = \"single\" | \"continuous\";\n```\n\n`single`: The pages in the viewer is displayed page by page.\n\n`continuous`: The pages in the viewer is displayed continuously.\n\n**Code Snippet**\n\n```typescript\neditViewer.displayMode = \"single\";\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n\n**Remark**\n\n- Default `displayMode` is `continuous`.\n- When `displayMode` is `continuous`, the default number of pages to scroll in parallel is 1 and which can be configure by [`setParallelScrollCount`](#setparallelscrollcount).\n\n### setParallelScrollCount()\n\nSpecify the number of pages to scroll in parallel.\n\n**Syntax**\n\n```typescript\nsetParallelScrollCount(count: number): boolean;\n```\n**Parameters**\n\n`count`: The number of pages to scroll in parallel. The maximum value is 20.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Set three pages to scroll in parallel\neditViewer.setParallelScrollCount(3); \n```\n\n**Warning**\n\n Error Code  | Error Message                                                 | API Return Value\n--------|--------------------------------------------------------------|--------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.            | `false`\n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.        | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.           | `false`\n -80308 | EditViewer.setParallelScrollCount: Not available in current displayMode.       | `false`\n\n**Remark**\n\n- The setting will be applied when [`displayMode`](#displaymode) is `continuous` mode.\n\n### fitMode\n\nSpecify or return the fit mode of the viewer.\n\n**Syntax**\n\n```typescript\nfitMode: FitMode; \n```\n\nA `FitMode` can be one of four types. \n\n```typescript\ntype FitMode = \"width\" | \"height\" | \"window\" | \"actualSize\";\n```\n\n`width`: The page is displayed to fit the width.\n\n`height`: The page is displayed to fit the height.\n\n`window`: The page is displayed to fit the window.\n\n`actualSize`: The page is displayed at its actual size, equal to [`zoom`](#zoom) set to 1.\n\n**Code Snippet**\n\n```typescript\neditViewer.fitMode = \"width\";\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported.\n\n**Remark**\n\n- The default `fitMode` is `window`, which means fit window. \n- Since the specified `fitMode` is calculated by zoom ratio, if the zoom ratio which set by `zoom` does not match any of `fitMode`, the page will be displayed in specified zoom ratio and `fitMode` will return `none`.\n\n### zoom\n\nSpecify or return zoom ratio.\n\n**Syntax**\n\n```typescript\nzoom: number; \n```\n\n**Code Snippet**\n\n```typescript\n//Actual size\neditViewer.zoom = 1;\n\n//Twice the actual size\neditViewer.zoom = 2; \n\n//10% the actual size\neditViewer.zoom = 0.1;\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80306 | The value for zoom is larger than maxZoom value.                          \n -80307 | The value for zoom is smaller than minZoom value.\n\n**Remark**\n\n- The interval of available values depends on `minZoom` and `maxZoom` which is set in [EditViewerConfig](#editviewerconfig) when create `EditViewer` object.\n- 1 means actual size of the page and equals to `actualSize` in [`fitMode`](#fitmode).\n- Return value will be rounded to four decimal places.\n\n### zoomOrigin\n\nSpecify or return the zoom origin of the viewer.\n\n**Syntax**\n\n```typescript\nzoomOrigin: ZoomOrigin;\n```\n\n**Code Snippet**\n\n```typescript\n// Set the zoom origin to upper left\nconst newZoomOrigin = {\n    x: \"start\",\n    y: \"start\",\n};\n\neditViewer.zoomOrigin = newZoomOrigin;\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n\n**Remark**\n\n- The default zoomOrigin is center point of the viewer.\n\n**See Also**\n\n[`ZoomOrigin`]({{ site.api }}interface/zoomorigin.html)\n\n## Edit Operations\n\n### rotate()\n\nRotate the specified pages.\n\n**Syntax**\n\n```typescript\nrotate(\n    angle: number,\n    indices?: number[] \n): boolean; \n```\n\n**Parameters**\n\n`angle`: Specify the angle. Only multiples of 90 degrees are supported. Positive value means clockwise rotation, negative value means counterclockwise rotation.\n\n`indices`: The array of the pages indices which will be rotated. If not set, the current page will be rotated.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Rotate the first and second pages 90 degrees clockwise.\neditViewer.rotate(90, [0,1]);\n\n// Rotate current page 90 degrees counterclockwise.\neditViewer.rotate(-90);\n```\n\n**Warning**\n\n Error Code  | Error Message                                                       | API Return Value\n--------|-------------------------------------------------------------------------|-------------------    \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `false`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `false`\n -80304 | No document opened.                                                     | `false`\n -80305 | There is no image in the current document.                              | `false`\n\n### crop()\n\nCrop the specified page(s) with the specified rectangle.\n\n**Syntax**\n\n```typescript\ncrop(\n    rect: Rect, \n    indices?: number[]\n): boolean; \n```\n**Parameters**\n\n`rect`: Specify the rectangle. Please refer to [`Rect`]({{ site.api }}interface/rect.html).\n\n`indices`: Specify the indices of the pages to be cropped. If not set, it will crop based on [`cropMode`](#cropmode), which uses the current image if the mode is `current` and all the images if the mode is `all`.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst rect = {\n    left: 100,\n    top: 100,\n    width: 200,\n    height: 200,\n};\n\neditViewer.crop(rect, [0]); // Crop the first page\n```\n\n**Warning**\n\n Error Code  | Error Message                                          | API Return Value\n--------|------------------------------------------------------------|-------------------      \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.          | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.         | `false`\n -80304 | No document opened.                                        | `false`\n -80305 | There is no image in the current document.                 | `false`\n -80309 | The specified rect exceeds the bounds of page index *X(IndexNum)*.  | `false`\n\n**Remark**\n\nIf one of the points of the rectangle is out of page range, crop operation does not take effect in this page and report warning.\n\n\n### cropMode\n\nGet or set the current mode for cropping: crop the current image or all the images.\n\n**Syntax**\n\n```typescript\ncropMode: CropMode; \n```\n\nIt can be one of the two types. \n\n```typescript\ntype CropMode = \"current\" | \"all\";\n```\n\n### getCropRect()\n\nGet the crop rectangular selection.\n\n**Syntax**\n\n```typescript\ngetCropRect(): Rect | null;\n```\n\n**Return Value**\n\nThe rectangular selection. Please refer to [`Rect`]({{ site.api }}interface/rect.html).\n\n**Code Snippet**\n\n```typescript\neditViewer.getCropRect();\n```\n\n**Warning**\n\n Error Code  | Error Message                                              | API Return Value\n--------|-----------------------------------------------------------|---------------------\n-80304  | No document opened.                                       | `null`\n\n**Remark**\n\n- If there is no crop rectangular selection, returns `null`.\n\n### setCropRect()\n\n> *This method is only available when [`toolMode`](#toolmode) is `crop` mode.*\n\nSet a crop rectangular selection on the current page.\n\n**Syntax**\n\n```typescript\nsetCropRect(rect: Rect): boolean;\n```\n\n**Parameters**\n\n`rect`: Specify the rectangular selection. Please refer to [`Rect`]({{ site.api }}interface/rect.html).\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\neditViewer.toolMode = \"crop\"; // Set toolMode to \"crop\"\n\nconst rect = {\n    left: 100,\n    top: 100,\n    width: 200,\n    height: 200,\n};\n\neditViewer.setCropRect(rect); \n```\n\n**Warning**\n\n Error Code  | Error Message                                              | API Return Value\n--------|-----------------------------------------------------------|-------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.         | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.        | `false`\n -80304 | No document opened.                                       | `false`\n -80305 | There is no image in the current document.                | `false`\n -80309 | The specified rect exceeds the bounds of page index *X(IndexNum)*. | `false`\n -80314 | *XXX(API)*: Not available in current toolMode.    | `false`\n\n**Remark**\n\n- In the viewer, only one rectangular selection can exist on the page at a time, which means if there is a rectangular selection existed when a new selection is drawn, the old one will be clear automatically.\n- When [`toolMode`](#toolmode) is set to `pan`, the drawn rectangular selection will be clear.\n\n### undo()\n\n> *This method takes effect only for [crop](#crop), [rotate](#rotate) operations.*\n\nUndo the last editing operation.\n\n**Syntax**\n\n```typescript\nundo(): boolean;\n```\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\neditViewer.undo();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|-----------------\n -80304 | No document opened.                                 | `false`\n -80310 | No operations to undo.                              | `false`\n\n### redo()\n\n> *This method takes effect only for [crop](#crop), [rotate](#rotate) operations.*\n\nRedo the last undo operation.\n\n**Syntax**\n\n```typescript\nredo(): boolean;\n```\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\neditViewer.redo();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|-----------------\n -80304 | No document opened.                                 | `false`\n -80311 | No operations to redo.                              | `false`\n\n### saveOperations()\n\n> *This method takes effect only for [crop](#crop), [rotate](#rotate) & filter(which is operated by using UI Element) operations.*\n\nSave the edit operations in pages to document.\n\n**Syntax**\n\n```typescript\nsaveOperations(): boolean;\n```\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\neditViewer.saveOperations();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|-----------------\n -80304 | No document opened.                                 | `false`\n\n## Text Selection\n\n### getTextSelection()\n\nGet selected text's detailed info.\n\n**Syntax**\n\n```typescript\ngetTextSelection(): ITextSelectedInfo[];\n```\n\n**Return values**\n\nArray of the `ITextSelectedInfo` object. Please refer to [`ITextSelectedInfo`](/api/interface/itextselectedinfo.md).\n\n## Search\n\n### searchNextText()\n\nSearch the next matched result.\n\n**Syntax**\n\n```typescript\nsearchNextText(text: string, options?: SearchTextOptions): Promise<boolean>;\n```\n\n**Parameters**\n\n* `text`: text to search\n* `options`: Please refer to [`SearchTextOptions`](/api/interface/searchtextoptions.md)\n\n**Warnings**\n\n Error Code  | Error Message\n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80104 | *XXX(API)*: The specified document(s) do not exist.\n -80304 | No document opened.\n -80305 | There is no image in the current document.\n -80322 | No results found.\n\n### searchPrevText()\n\nSearch the previous matched result.\n\n**Syntax**\n\n```typescript\nsearchPrevText(text: string, options?: SearchTextOptions): Promise<boolean>;\n```\n\n**Parameters**\n\n* `text`: text to search\n* `options`: Please refer to [`SearchTextOptions`](/api/interface/searchtextoptions.md)\n\n**Warnings**\n\n Error Code  | Error Message\n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80104 | *XXX(API)*: The specified document(s) do not exist.\n -80304 | No document opened.\n -80305 | There is no image in the current document.\n -80322 | No results found.\n\n### searchFullText()\n\nSearch the full text to get all the matched results.\n\n**Syntax**\n\n```typescript\nsearchFullText(text: string, options?: SearchTextOptions): Promise<boolean>;\n```\n\n**Parameters**\n\n* `text`: text to search\n* `options`: Please refer to [`SearchTextOptions`](/api/interface/searchtextoptions.md)\n\n**Warnings**\n\n Error Code  | Error Message\n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80104 | *XXX(API)*: The specified document(s) do not exist.\n -80304 | No document opened.\n -80305 | There is no image in the current document.\n -80322 | No results found.\n\n## Events\n\n### on()\n\nBind a listener to the specified event. \n\n**Syntax**\n\n```typescript\non(eventName: EventName, listener:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It can be [an integrated event name](#integrated-events) or a custom event name configured through [`UiConfig`-`events`]({{ site.api }}interface/uiconfig.html#events).\n\n`listener`: Specify the listener.\n\n**Code Snippet**\n\n```typescript\n// Bind a listener to the integrated event resized.\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.oldWidth);\n    console.log(e.newWidth);\n};\n\neditViewer.on(\"resized\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n\n### off()\n\nUnbind event listener(s) from the specified event. \n\n**Syntax**\n\n```typescript\noff(eventName: EventName, listener?:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It can be [an integrated event name](#integrated-events) or a custom event name configured through [`UiConfig`-`events`]({{ site.api }}interface/uiconfig.html#events).\n\n`listener`: Specify the listener. If no listener is specified, unbind all event listeners from the specified event.\n\n**Code Snippet**\n\n```typescript\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.oldWidth);\n    console.log(e.newWidth);\n};\n\neditViewer.on(\"resized\", eventFunc);\n\n// Unbind the specified event listener.\neditViewer.off(\"resized\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n### Integrated Events\n\n#### resized\n\nTriggered when the viewer is resized.\n\n**Callback**\n\n`ResizedEvent`: An EventObject.\n\n**Attributes**\n\n`oldWidth`: The old width of the viewer.\n\n`oldHeight`: The old height of the viewer.\n\n`newWidth`: The new width of the viewer.\n\n`newHeight`: The new height of the viewer.\n\n#### pageRendered\n\nTriggered when a page has been completely rendered. We only render the pages that are visible on the screen, so this event won't get fired for every page in the document at once. This event will get called when the user scrolls up and down the document, or when a page is zoomed or rotated, or anything else that makes it rerender.\n\n**Callback**\n\n`PageRenderedEvent`: An EventObject.\n\n**Attributes**\n\n`index`: The index of the rendered page.\n\n`pageUid`: The pageUid of the rendered page.\n\n#### currentIndexChanged\n\nTriggered when currentIndex is changed.\n\n**Callback**  \n\n`CurrentindexChangedEvent`: An EventObject.\n\n**Attributes**\n\n`oldIndex`: The old current index.\n\n`newIndex`: The new current index. If there is no index in the viewer, return `-1`.\n\n#### currentPageChanged\n\nTriggered when current page is changed.\n\n**Callback**\n\n`CurrentPageChangedEvent`: An EventObject.\n\n**Attributes**\n\n`oldPageUid`: The uid of the page which is old current index. If the old page is removed, return `''`.\n\n`newPageUid`: The uid of the page which is new current index. If there is no index in the viewer, return `''`.\n\n#### displayModeChanged\n\nTriggered when the display mode is changed.\n\n**Callback**\n\n`DisplayModeChangedEvent`: An EventObject.\n\n**Attributes**\n\n`oldDisplayMode`: The old display mode.\n\n`newDisplayMode`: The new display mode.\n\n#### fitModeChanged\n\nTriggered when the fit mode has changed.\n\n**Callback**\n\n`FitModeChangedEvent`: An EventObject.\n\n**Attributes**\n\n`oldFitMode`: The old fit mode.\n\n`newFitmode`: The new fit mode.\n\n#### zoomChanged\n\nTriggered when the zoom ratio has been changed.\n\n**Callback**\n\n`ZoomChangedEvent`: An EventObject.\n\n**Attributes**\n\n`oldZoomRatio`: The old zoom ratio.\n\n`newZoomRatio`: The new zoom ratio.\n\n#### toolModeChanged\n\nTriggered when the tool mode has changed.\n\n**Callback**\n\n`ToolModeChangedEvent`: An EventObject.\n\n**Attributes**\n\n`oldToolMode`: The old tool mode.\n\n`newToolMode`: The new tool mode.\n\n#### cropRectDrawn\n\nTriggered when a rectangular selection is drawn.\n\n**Callback**\n\n`CropRectDrawnEvent`: An EventObject.\n\n**Attributes**\n\n`rect`: The drawn rectangle.\n\n#### cropRectDeleted\n\nTriggered when the rectangular selection is deleted.\n\n**Callback**\n\n`CropRectDeletedEvent`: An EventObject.\n\n**Attributes**\n\n`rect`: The deleted rectangle.\n\n#### cropRectModified\n\nTriggered when the crop rectangular selection is modified.\n\n**Callback**\n\n`CropRectModifiedEvent`: An EventObject.\n\n**Attributes**\n\n`oldRect`: The old rectangle.\n\n`newRect`: The new rectangle.\n\n#### annotationDrawingStyleChanged\n\nTriggered when the annotation drawing style is changed. It will return the old drawing style and the new drawing style of the selected annotation. See also [`AnnotationDrawingStyleConfig`](/api/interface/styleinterface/annotationdrawingstyleconfig.md).\n\n#### selectedAnnotationsChanged\n\nTriggered when selected annotation(s) is changed.\n\n**Callback**\n\n`SelectedAnnotationsChanged`: An EventObject.\n\n**Attributes**\n\n`oldAnnotationUids`: The array of old selected annotations uids.\n\n`newAnnotationUids`: The array of new selected annotations uids.\n\n#### visibilityChanged\n\nTriggered when the viewer's visibility is changed. It will return an `isVisible` boolean value.\n\n#### textSelected\n\nTriggered when text is selected. It will return an array of [`ITextSelectedInfo`](/api/interface/itextselectedinfo.md).\n\n#### textUnselected\n\nTriggered when text is unselected.\n\n#### textSearchTriggered\n\nTriggered when text search is performed. It will return an array of [`ITextSearchedInfo`](/api/interface/itextsearchedinfo.md).\n\n\n\n#### undoRedoStateChanged\n\nTriggered when the viewer's undo and redo state is changed. It will return an [`IUndoRedoStateChangedEvent`](/api/interface/iundoredostatechangedevent.md) object.\n\n#### paginationChanged\n\nTriggered when the viewer's current page number or the page count is changed. It will return an [`IPaginationChangedEvent`](/api/interface/ipaginationchangedevent.md) object.\n\n#### pointerdown\n\nTriggered when a pointer becomes active buttons state. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pointermove\n\nTriggered when a pointer changes coordinates. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pointerup\n\nTriggered when a pointer is no longer active buttons state. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pageover\n\nTriggered when a pointer is moved into a page's hit test boundaries. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pageout\n\nTriggered when a pointer is moved out of the hit test boundaries of a page. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### scroll\n\nTriggered when the viewer is scrolled. It will return the native event object.\n\n#### Mouse Events\n\n##### click\n\nTriggered when click in the viewer's viewing area. On mobile device, triggered when tap in the viewer's viewing area.\n\n##### dblclick\n\nTriggered when double click in the viewer's viewing area.\n\n##### rightclick\n\nTriggered when right click in the viewer's viewing area. On mobile device, triggered when long-tap in the viewer's viewing area.\n\n\n**Callback for mouse events**\n\n `IPointerEvent`: An EventObject.\n\n**Attributes**\n\n`index`: The page index.\n\n`pageUid`: The page uid.\n\n`imageX`: The relative x-coordinate of the click pointer on the image.\n\n`imageY`: The relative y-coordinate of the click pointer on the image.\n\n`canvasX`: The relative x-coordinate of the click pointer on the canvas.\n\n`canvasY`: The relative x-coordinate of the click pointer on the canvas.\n\n`nativeEvent`: [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)\n",
-      "breadcrumb": "EditViewer Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface EditViewerConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/editviewerconfig.html",
-      "content": "# EditViewerConfig\n\n## Syntax\n\n```typescript\ninterface EditViewerConfig {\n    canvasStyle?: CanvasStyle;\n    pageStyle?: BaseStyle;\n    currentPageStyle?: BaseStyle;\n    quadSelectionStyle?: QuadSelectionStyle;\n    enableLoadSourceByDrag?: boolean;\n    enableMagnifier?: boolean;\n    enableSlide?: boolean;\n    enableAutoScrollForTextSelection?: boolean;\n    scrollToLatest?: boolean; \n    scrollDirection?: string; \n    minZoom?: number; \n    maxZoom?: number;\n}\n```\n\n## Attributes\n\n### canvasStyle\n\nThe style of canvas of the viewer. Please refer to [`CanvasStyle`]({{ site.api }}interface/styleinterface/canvasstyle.html).\n\n### pageStyle\n\nThe style of displayed page in the viewer. Please refer to [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html).\n\n### currentPageStyle\n\nThe style of current page in the viewer. Please refer to [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html).\n\n### quadSelectionStyle\n\nThe style of rectangular selection. Please refer to [`QuadSelectionStyle`]({{ site.api }}interface/styleinterface/quadselectionstyle.html).\n\n### enableLoadSourceByDrag\n\nEnables loading files by dragging them into the Viewer.\n\nDefault value: `true`\n\n### enableMagnifier\n\nSpecify whether or not to display a corner magnifier on the canvas. This feature is primarily used to provide a zoomed-in preview of the selected area for more precise adjustments.\n\nDefault value: `true`\n\n### enableSlide\n\nSpecify whether allow to slide the pages.\n\nDefault value: `true`\n\n### enableAutoScrollForTextSelection\n\nSpecify whether to enable auto scrolling when selecting text if the cursor is around the edges of the viewer.\n\nDefault value: `true`\n\n### scrollToLatest\n\nSpecify whether to scroll to latest page automatically when importing new pages.\n\nDefault value: `false`\n\n### scrollDirection\n\nSpecify the scroll direction, supported values are `vertical`, `horizontal`.\n\nDefault value: `vertical`\n\n### minZoom\n\nThe mininum zoom ratio in the viewer. The value range is [0.01, 64]. \n\nDefault value: 0.01\n\nPlease notice `minZoom` cannot be larger than `maxZoom`.\n\n### maxZoom\n\nThe maxinum zoom ratio in the viewer. The value range is [0.01, 64]. \n\nDefault value: 64\n\nPlease notice `maxZoom` cannot be smaller than `minZoom`.\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)\n",
-      "breadcrumb": "Interface EditViewerConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface EditViewerConstructorOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/editviewerconstructoroptions.html",
-      "content": "# EditViewerConstructorOptions\n\n## Syntax\n\n```typescript\ninterface EditViewerConstructorOptions {\n    container?: string | HTMLElement;\n    viewerConfig?: EditViewerConfig;\n    uiConfig?: UiConfig;\n    thumbnailConfig?: ThumbnailConfig;\n    annotationConfig?: AnnotationConfig;\n    keyboardInteractionConfig?: KeyboardInteractionConfig;\n    groupUid?: string;\n}\n```\n\n## Attributes\n\n### container\n\nThe container which is used to show the viewer. Its `id` or `HTMLElement` is acceppted.\n\n### viewerConfig\n\nThe configurations of viewer, please refer to [`EditViewerConfig`](/api/interface/editviewerconfig.md). If it is not specified, the [default configuration]({{ site.viewer }}viewerconfig.html#editviewerconfig) will be applied.\n\n### uiConfig\n\nThe UI layout configurations of viewer, please refer to [`UiConfig`]({{ site.api }}interface/uiconfig.html). If it is not specified, the [default UI]({{ site.ui }}default_ui.html#edit-viewer) will be applied.\n\n### thumbnailConfig\n\nThe configurations of integrated thumbnail, please refer to [`ThumbnailConfig`]({{ site.api }}interface/thumbnailconfig.html). If it is not specified, the [default configuration]({{ site.viewer }}viewerconfig.html#thumbnailconfig) will be applied.\n\n### annotationConfig\n\nThe configurations of annotation part in the viewer, please refer to [`AnnotationConfig`]({{ site.api }}interface/annotationconfig.html). If it is not specified, the [default configuration]({{ site.viewer }}viewerconfig.html#annotationconfig) will be applied.\n\n### keyboardInteractionConfig\n\nThis configures the use of keyboard shortcuts for the viewer - please see [`KeyboardInteractionConfig`]({{ site.api }}interface/keyboardinteractionconfig.html) for details. If not specified, all keyboard shortcuts are disabled by default.\n\n### groupUid\n\nThe uid of viewers' group. If it is not specified, a random groupUid will be generated.\n\n{% comment %} Please refer to [Data synchronisation between viewers]({{ site.features }}viewers/datasync.html). {% endcomment %}\n\n## Related\n\n- [`EditViewer()`]({{ site.api }}class/editviewer.html#editviewer)\n",
-      "breadcrumb": "Interface EditViewerConstructorOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer User Interface - Customize Elements",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/ui/customize/elements.html",
-      "content": "# Elements\n\n## Customize default elements\n\nAlthough DDV provides many default elements, some customizations are also required, such as, to unify icon style with the original system, to add tooltips and so on.\n\n<div class=\"multi-panel-switching-prefix\"></div>\n\n- [Style & icon](#style-icon)\n- [Event](#event)\n- [Tooltip](#tooltip)\n- [Display text](#display-text)\n\n<div class=\"multi-panel-start\"></div>\n\nTo change the style and icon of the default elements, can use the properties `style` and `className` of [`UiConfig`]({{ site.api }}interface/uiconfig.html), please refer to the example below.\n\n**Use case**\n\n- Change style and icon of `Dynamsoft.DDV.Elements.DeleteCurrent`.\n\n    ```typescript\n    {\n        type: Dynamsoft.DDV.Elements.DeleteCurrent,\n        className: \"ddv-button-done\", // can change its icon to your own one\n        style: {\n            background: \"blue\", // change its background color\n        },\n    };\n    ```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\nMost of default elements have their own event, you may need to add new event(s) to them.\n\n**Use case**\n\nAdd an event to `Dynamsoft.DDV.Elements.Capture`.\n\n```typescript\n//Replace the original capture element in UiConfig with the object below.\n{\n    type: Dynamsoft.DDV.Elements.Capture,\n    events: {\n        click: \"myClick\";\n    },\n};\n\n/*\nconst uiConfig = {......};\n*/\n\n//Bind the event in the specified viewer.\nconst captureViewer = new Dynamsoft.DDV.CaptureViewer({\n        container: \"viewer\",\n        uiConfig: uiConfig,\n});\ncaptureViewer.on(\"myClick\", (e) => {\n            console.log(\"captured\");\n});\n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\nDDV does not provide the default tooptips to the default elements, developers can configure it by use [`getTooltip()`]({{ site.api }}namespace/ddv_elements.html#static-gettooltip) and [`setTooltip()`]({{ site.api }}namespace/ddv_elements.html#static-settooltip) easily. \n\n>It must be set before creating the viewer.\n\n**Use case**\n\nAdd tooltips to `Dynamsoft.DDV.Elements.RotateLeft` and `Dynamsoft.DDV.Elements.RotateRight`.\n\n```typescript\nconst newTooltip = Dynamsoft.DDV.Elements.getTooltip();\nnewTooltip.RotateLeft = \"Rotate left\";\nnewTooltip.RotateRight = \"Rotate right\";\n\nDynamsoft.DDV.Elements.setTooltip(newTooltip);\n\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"viewer\", \n});\n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\nIf any accompanying display texts are required to add or change of the default elements, DDV provides the methods [`getDisplayTextConfig()`]({{ site.api }}namespace/ddv_elements.html#static-getdisplaytextconfig) and [`setDisplayTextConfig()`]({{ site.api }}namespace/ddv_elements.html#static-setdisplaytextconfig) for this requirement. \n\n>It must be set before creating the viewer.\n\n**Use cases**\n\n- Change display texts which are in `Dynamsoft.DDV.Elements.DisplayMode`.\n\n    ![Change display text](/assets/imgs/changedistext.png)\n\n    ```typescript\n    const newDisplayText = Dynamsoft.DDV.Elements.getDisplayTextConfig();\n    newDisplayText.DisplayMode_ContinuousPage = \"Enable Scrolling\";\n    newDisplayText.DisplayMode_SinglePage = \"Page by page\";\n    Dynamsoft.DDV.Elements.setDisplayTextConfig(newDisplayText);\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\", \n    });\n    ```\n\n- Add display texts to default elements, take `Dynamsoft.DDV.Elements.Pan` as an example.\n\n    ![Add display text](/assets/imgs/adddistext.png)\n\n    ```typescript\n    const newDisplayText = Dynamsoft.DDV.Elements.getDisplayTextConfig();\n    newDisplayText.Pan = \"Pan\";\n    Dynamsoft.DDV.Elements.setDisplayTextConfig(newDisplayText);\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\", \n    });\n    ```\n\n- Change the position of the new-added display text relative to the icon. The default position of display text is on the right of the icon. \n\n    ![Change position of display text](/assets/imgs/positiondistext.png)\n\n    ```typescript\n    // Add display text firstly.\n    const newDisplayText = Dynamsoft.DDV.Elements.getDisplayTextConfig();\n    newDisplayText.Load = \"Load\";\n    newDisplayText.Download = \"Download\";\n    newDisplayText.Print = \"Print\";\n    Dynamsoft.DDV.Elements.setDisplayTextConfig(newDisplayText);\n\n    // Set the relative position by using style-flexDirection of the default element.\n    // \"column\" means below the icon\n    // \"row-reverse\" means on the left of the icon\n    // \"column-reverse\" means above the icon\n    const newElements = [\n        {\n            type: Dynamsoft.DDV.Elements.Load,\n            style: { flexDirection: \"column\" }, \n        },\n        {\n            type: Dynamsoft.DDV.Elements.Download,\n            style: { flexDirection: \"column\" }, \n        },\n        {            \n            type: Dynamsoft.DDV.Elements.Print,\n            style: { flexDirection: \"column\" },\n        }\n    ];\n\n    const viewerUi = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n    const headerPart2 = viewerUi.children[0].children[1]; \n\n    // Use newElements to replace the original ones.\n    headerPart2.children.splice(1, 3, ...newElements);\n\n    // Create the new viewer with updated uiConfig.\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\", \n        uiConfig: viewerUi,\n    });\n    ```\n    \n**See Also**\n\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-switching-end\"></div>\n\n\n-------\n\n## Create your own button\n\nBesides the default elements, you may need to create your own button to call other features or your own features. Then you can refer to the steps below to create a customized button.\n\n- Step one: Configure a button UiConfig.\n    ```typescript\n    const closeButton = {\n        type: Dynamsoft.DDV.Elements.Button, \n        className: \"ddv-button-close\", // Set the button's icon\n        tooltip: \"close viewer\", // Set tooltip for the button\n        events: {\n            click: \"close\", // Set the click event\n        }, \n    };\n    ```\n- Step two: Place the button in the corresponding positions of the UiConfig and configure the UiConfig when creating the edit viewer.\n    ```typescript\n    const uiConfig = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\"); // Get the default UiConfig of EditViewer\n    const header = uiConfig.children[0];\n    header.children[1].children.splice(4, 0, closeButton); // Add the close button to the header's right\n\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        uiConfig: uiConfig,\n    });\n    ```\n- Step three: Configure the button's event in the specified viewer.\n    ```typescript\n    editViewer.on(\"close\", e => {\n            editViewer.destroy();\n        }\n     );\n    ```\n\n![Create custom button](/assets/imgs/custombutton.png)",
-      "breadcrumb": "Customize Elements"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Ellipse Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/ellipse.html",
-      "content": "# Ellipse Class\n\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n{% comment %}\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n\n{% comment %}\n## aabb\n\nReturn Axis-aligned bounding box of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly aabb: Rect;\n```\n\n**Remark**\n\n![AABB-Ellipse](/assets/imgs/aabbellipse.png)\n\n{% endcomment %}\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `ellipse`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;   //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted.\n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate). \n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): EllipseAnnotationOptions;\n```\n\n**Return value**\n\nThe object of ellipse annotation options. Please refer to [`EllipseAnnotationOptions`]({{ site.api }}interface/annotationinterface/ellipseannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst ellipse = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"ellipse\"); // Create a default Ellipse annotation instance.\nconst ellipseOptions = ellipse.getOptions();\n```\n\n## updateOptions() \n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(ellipseAnnotationOptions: EllipseAnnotationOptions): boolean;\n```\n\n**Parameters**\n\n`ellipseAnnotationOptions`: The new ellipse annotation options. Please refer to [`EllipseAnnotationOptions`]({{ site.api }}interface/annotationinterface/ellipseannotationoptions.html).\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst ellipse = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"ellipse\"); // Create a default Ellipse annotation instance.\nconst ellipseOptions = {\n    background: \"red\",\n};\nellipse.updateOptions(ellipseOptions); // Update the background of the ellipse to red.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "Ellipse Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface EllipseAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/ellipseannotationoptions.html",
-      "content": "# EllipseAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface EllipseAnnotationOptions {\n    x?: number;\n    y?: number;\n    width?: number;\n    height?: number; \n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number; \n    lineDash?: number[];\n    flags?: Flags;\n    rotation?: number;\n}\n```\n\n## Attributes\n\n### x\n\nThe x-coordinate of the upper-left corner of the ellipse annotation to draw. The unit is point.\n\nDefault value: 10\n\n### y\n\nThe y-coordinate of the upper-left corner of the ellipse annotation to draw. The unit is point.\n\nDefault value: 10\n\n### width\n\nThe width of the ellipse annotation to draw. The unit is point.\n\nDefault value: 100\n\n### height\n\nThe height of the ellipse annotation to draw. The unit is point.\n\nDefault value: 80\n\n![Ellipse Location](/assets/imgs/ellipselocation.png)\n\n### borderWidth\n\nThe border width of annotation. The unit is point.\n\nDefault value: 1 \n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill.\n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n![Ellipse BorderStyle](/assets/imgs/ellipseborderstyle.png)\n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### lineDash\n\nThe style of ellipse annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n<!--\n### author\n\nThe author of annotation.\n\nDefault value: `''`\n\n### subject\n\nThe subject of annotation.\n\nDefault value: `''` -->\n\n### flags\n\nThe flags of annotation. \n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n### rotation\n\nThe rotation angle of annotation.\n\nDefault value: 0\n\n**Remark**\n\n- Positive value means clockwise rotation, negative value means counterclockwise rotation.\n\n## Related\n\n- [`Ellipse()`]({{ site.api }}class/annotation/ellipse.html#ellipse)\n- [`getOptions()`]({{ site.api }}class/annotation/ellipse.html#getoptions) under `Ellipse` class\n- [`updateOptions()`]({{ site.api }}class/annotation/ellipse.html#updateoptions) under `Ellipse` class",
-      "breadcrumb": "Interface EllipseAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface EllipseStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/ellipsestyle.html",
-      "content": "# EllipseStyle\n\n## Syntax\n\n```typescript\ninterface EllipseStyle {\n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number;\n    lineDash?: number[];\n}\n```\n\n## Attributes\n\n### borderWidth\n\nThe border width of annotation. The unit is point. \n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill.\n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### lineDash\n\nThe style of annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)",
-      "breadcrumb": "Interface EllipseStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Enumeration EnumAnnotationRenderMode",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/enumeration-type/enumannotationrendermode.html",
-      "content": "# EnumAnnotationRenderMode\n\n```typescript\nenum EnumAnnotationRenderMode {\n    NO_ANNOTATIONS = \"noAnnotations\", // default, means that the annotations in the PDF file will not be loaded\n    RENDER_ANNOTATIONS = \"renderAnnotations\", // means that the annotations in the PDF file will be rendered\n    LOAD_ANNOTATIONS = \"loadAnnotations\", // means that the annotations in the PDF file will be loaded normally, a valid PDF Annotation license is requested\n}\n```\n",
-      "breadcrumb": "Enumeration EnumAnnotationRenderMode"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Enumeration EnumConvertMode",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/enumeration-type/enumconvertmode.html",
-      "content": "# EnumConvertMode\n\n```typescript\nenum EnumConvertMode {\n    CM_RENDERALL = \"cm/renderall\",\n    CM_IMAGEONLY = \"cm/imageonly\",\n    CM_AUTO = \"cm/auto\",\n}\n```\n",
-      "breadcrumb": "Enumeration EnumConvertMode"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Enumeration EnumDocumentDetectionStatus",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/enumeration-type/enumdocumentdetectionstatus.html",
-      "content": "# EnumDocumentDetectionStatus\n\n```typescript\nenum EnumDocumentDetectionStatus {\n    AUTO_CAPTURE = \"AutoCaptured\",\n    GOOD = \"Good\",\n    SMALL_SIZE = \"SmallSize\",\n    OFF_CENTER = \"OffCenter\",\n    NOTHING_DETECTED = \"NothingDetected\"\n}\n```\n",
-      "breadcrumb": "Enumeration EnumDocumentDetectionStatus"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Enumeration EnumImageDataType",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/enumeration-type/enumimagedatatype.html",
-      "content": "# EnumImageDataType\n\n```typescript\nenum EnumImageDataType {\n    RGBA = 1,\n    BGRA = 2,\n    JPEG = 3,\n    PNG = 4\n}\n```\n",
-      "breadcrumb": "Enumeration EnumImageDataType"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Enumeration EnumImageFilterType",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/enumeration-type/enumimagefiltertype.html",
-      "content": "# EnumImageFilterType\n\nBulid-in image filter type.\n\n```typescript\nenum EnumImageFilterType {\n    NONE = \"none\", //default, original\n    BLACK_AND_WHITE = \"blackAndWhite\",\n    GRAY = \"gray\",\n    REMOVE_SHADOW = \"removeShadow\",\n    SAVE_INK = \"saveInk\",\n}\n```\n",
-      "breadcrumb": "Enumeration EnumImageFilterType"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Enumeration EnumLineEnding",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/enumeration-type/enumlineending.html",
-      "content": "# EnumLineEnding\n\n```typescript\nenum EnumLineEnding {\n    NONE = \"none\", \n    OPEN = \"open\",\n    OPEN_REVERSE = \"openReverse\",\n    CLOSED = \"closed\",\n    CLOSED_REVERSE = \"closedReverse\",\n    BUTT = \"butt\",\n    SLASH = \"slash\",\n    SQUARE = \"square\",\n    DIAMOND = \"diamond\",\n    CIRCLE = \"circle\",\n}\n```\n\n## Corresponding line endings\n\n| EnumLineEnding | Corresponding line ending |\n| -------------- | ------------------------- |\n| NONE           | ![LineEnding None](/assets/imgs/lineendNone.png)                          |\n| OPEN           | ![LineEnding Open](/assets/imgs/lineendOpen.png)    |\n| OPEN_REVERSE   | ![LineEnding OpenR](/assets/imgs/lineendOpenR.png)                          |\n| CLOSED         | ![LineEnding Closed](/assets/imgs/lineendClosed.png)                          |\n| CLOSED_REVERSE | ![LineEnding ClosedR](/assets/imgs/lineendClosedR.png)                          |\n| BUTT           | ![LineEnding Butt](/assets/imgs/lineendButt.png)                          |\n| SLASH          | ![LineEnding Slash](/assets/imgs/lineendSlash.png)                          |\n| SQUARE         | ![LineEnding Square](/assets/imgs/lineendSquare.png)                          |\n| DIAMOND        | ![LineEnding Diamond](/assets/imgs/lineendDiamond.png)                          |\n| CIRCLE         | ![LineEnding Circle](/assets/imgs/lineendCircle.png)                          |\n",
-      "breadcrumb": "Enumeration EnumLineEnding"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Enumeration EnumPdfCompressionType",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/enumeration-type/enumpdfcompressiontype.html",
-      "content": "# EnumPdfCompressionType\n\n```typescript\nenum EnumPDFCompressionType {\n    PDF_AUTO = \"pdf/auto\",\n    PDF_FAX4 = \"pdf/fax4\",\n    PDF_LZW = \"pdf/lzw\",\n    PDF_JPEG = \"pdf/jpeg\",\n    PDF_JP2000 = \"pdf/jp2000\",\n    PDF_JBIG2 = \"pdf/jbig2\"\n}\n```\n",
-      "breadcrumb": "Enumeration EnumPdfCompressionType"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Enumeration EnumPdfPageType",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/enumeration-type/enumpdfpagetype.html",
-      "content": "# EnumPdfPageType\n\n```typescript\nenum EnumPdfPageType {\n    PAGE_DEFAULT = \"page/default\",\n    PAGE_A4 = \"page/a4\",\n    PAGE_A4_REVERSE  = \"page/a4reverse\",\n    PAGE_A3 = \"page/a3\",\n    PAGE_A3_REVERSE = \"page/a3reverse\",\n    PAGE_LETTER = \"page/letter\",\n    PAGE_LETTER_REVERSE = \"page/letterreverse\",\n    PAGE_LEGAL = \"page/legal\",\n    PAGE_LEGAL_REVERSE = \"page/legalreverse\"\n}\n```\n",
-      "breadcrumb": "Enumeration EnumPdfPageType"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Enumeration EnumStampIcon",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/enumeration-type/enumstampicon.html",
-      "content": "# EnumStampIcon\n\n```typescript\nenum EnumStampIcon { \n    REJECTED = \"rejected\", \n    ACCEPTED = \"accepted\", \n    INIT_ALHERE = \"initalHere\",\n    SIGN_HERE = \"signHere\",\n    WITNESS = \"witness\",\n    APPROVED = \"approved\",\n    NOT_APPROVED = \"notApproved\",\n    DRAFT = \"draft\",\n    FINAL = \"final\",\n    COMPLETED = \"completed\",\n    CONFIDENTIAL = \"confidential\",\n    VOID = \"void\",\n}\n```\n\n## Corresponding standard business stamps\n\n| EnumStampIcon | Corresponding stamp |\n| ------------- | ------------------- |\n| REJECTED      | ![Stamp Rejected](/assets/imgs/stampRejected.png)                    |\n| ACCEPTED      | ![Stamp Accepted](/assets/imgs/stampAccepted.png)                    |\n| INITAL_HERE   | ![Stamp InitalHere](/assets/imgs/stampInitalHere.png)                    |\n| SIGN_HERE     | ![Stamp SignHere](/assets/imgs/stampSignHere.png)                    |\n| WITNESS       | ![Stamp Witness](/assets/imgs/stampWitness.png)                    |\n| APPROVED      | ![Stamp Approved](/assets/imgs/stampApproved.png)                    |\n| NOT_APPROVED  | ![Stamp NotApproved](/assets/imgs/stampNotApproved.png)                    |\n| DRAFT         | ![Stamp Draft](/assets/imgs/stampDraft.png)                    |\n| FINAL         | ![Stamp Final](/assets/imgs/stampFinal.png)                    |\n| COMPLETED     | ![Stamp Completed](/assets/imgs/stampCompleted.png)                    |\n| CONFIDENTIAL  | ![Stamp Confidential](/assets/imgs/stampConfidential.png)                    |\n| VOID          | ![Stamp Void](/assets/imgs/stampVoid.png)                    |\n",
-      "breadcrumb": "Enumeration EnumStampIcon"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Enumeration EnumTiffCompressionType",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/enumeration-type/enumtiffcompressiontype.html",
-      "content": "# EnumTiffCompressionType\n\n```typescript\nenum EnumTiffCompressionType {\n    TIFF_AUTO = \"tiff/auto\",\n    TIFF_FAX3 = \"tiff/fax3\",\n    TIFF_FAX4 = \"tiff/fax4\",\n    TIFF_LZW = \"tiff/lzw\",\n    TIFF_JPEG = \"tiff/jpeg\",\n}\n```\n",
-      "breadcrumb": "Enumeration EnumTiffCompressionType"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Error List",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/errorlist.html",
-      "content": "# Error List\n\n## License Related Errors\n\n Error Code | Error Message                                          \n ---------- | ------------------------------------------------------ \n -80001     | License string is invalid.                             \n -80002     | *XXX(LicenseModuleName)* module license has expired.                        \n -80003     | *XXX(LicenseModuleName)* module license is missing.                         \n -80004     | *XXX(LicenseModuleName)* module license version does not match.             \n -80005     | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license. \n\n## Initialize Related Errors\n\n Error Code | Error Message                                    \n ---------- | ------------------------------------------------ \n -80050     | DDV.Core.init() has not been set up yet. \n -80051     | DDV.Core.init() has not been completed.  \n -80052     | *XXX(API)*: Resource is not found from the specified engineResourcePath.\n -80053     | *XXX(API)*: The resource version at the specified engineResourcePath does not match this version of Dynamsoft Document Viewer.\n\n## Common Errors\n\n Error Code | Error Message                                                \n ---------- | ------------------------------------------------------------ \n -80100     | *XXX(API)*: *XXX(ParameterName)* is invalid.          \n -80101     | *XXX(API)*: *XXX(ParameterName)* is out of range.     \n -80102     | *XXX(API)*: *XXX(ParameterName)* is missing.          \n -80103     | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. \n -80104     | *XXX(API)*: The specified document(s) do not exist.  \n -80105     | *XXX(API)*: The specified page(s) do not exist.      \n -80106     | *XXX(API)*: The specified annotation does not exist.\n -80108     | *XXX(API)*: The document has been destroyed.\n -80109     | *XXX(API)*: The page has been destroyed.\n\n\n## Document Related Errors\n\n Error Code | Error Message                                 \n ---------- | --------------------------------------------- \n -80200     | File type is not supported.                   \n -80201     | docUid does not allow duplicate.              \n -80202     | Failed to read the PDF file because it's encrypted and the correct password is not provided. \n -80203     | Failed to read some annotations because they are not supported by Dynamsoft Document Viewer so far.\n -80204     | PDFs containing XFA (XML Forms Architecture) forms are not supported.\n -80205     | The pageData has been destroyed.\n -80206     | The DocTextSearcher has been destroyed.\n\n## Viewer Releated Errors\n\n Error Code | Error Message                                                \n ---------- | ------------------------------------------------------------ \n -80301     | The specified container does not exist.                      \n -80302     | minZoom value cannot be larger than maxZoom value.           \n -80304     | No document opened.                                          \n -80305     | There is no image in the current document.                   \n -80306     | The value for zoom is larger than maxZoom value.             \n -80307     | The value for zoom is smaller than minZoom value.            \n -80308     | EditViewer.setParallelScrollCount: Not available in current displayMode. \n -80309     | The specified rect exceeds the bounds of page index *X(IndexNum)*. \n -80310     | No operations to undo.                                       \n -80311     | No operations to redo.                                       \n -80312     | The specified quad exceeds the bounds of the current page.   \n -80313     | The element *XXX(ElementName)* is not supported in *XXX(ClassName)* class.               \n -80314     | *XXX(API)*: Not available in current toolMode.       \n -80315     | DocumentDetect needs to be configured by Dynamsoft.DDV.setProcessingHandler to enable the document detection feature. \n -80316     | ImageFilter needs to be configured by Dynamsoft.DDV.setProcessingHandler to enable the image filter feature. \n -80317     | The specified annotation(s) is not on the current page or does not exist.\n -80318     | The document contains unsupported fonts, which may result in font loss after saving.\n -80319     | ReadOnly annotation or noView annotation cannot be selected.\n -80320     | Unknown annotation or incomplete annotation cannot be selected.\n -80321     | Flattened annotation cannot be selected.\n -80322     | No results found.\n\n## Camera Releated Errors\n\n Error Code | Error Message                               \n ---------- | ------------------------------------------- \n -80400     | The specified camera does not exist.        \n -80401     | The specified camera is occupied.           \n -80402     | No video stream is played.                  \n -80403     | Not HTTPS, failed to play the video stream. \n -80404     | The camera does not support a flashlight.   \n -80405     | No camera available.                        \n -80406     | The selected camera is denied by browser.   \n -80407     | No bound container.                         \n\n\n## Wasm Error\n\n Error Code | Error Message  \n------------|----------------\n -81000     | *WASM Error*     \n\n## External Error\n\n Error Code | Error Message  \n------------|----------------\n -81100     | *External Error*     \n ",
-      "breadcrumb": "API Reference"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface Flags",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/flags.html",
-      "content": "# Flags\n\n## Syntax\n\n```typescript\ninterface Flags {\n    print?: boolean;\n    noMove?: boolean;\n    noView?: boolean;\n    noResize?: boolean;\n    noRotate?: boolean;\n    readOnly?: boolean;\n}\n```\n\n## Attributes\n\n### print\n\n<!--To print the annotation when printing the page, default value: `true`.-->\nIndicates whether the annotation is printable. Default value: `true`. Only printable annotations will be included when the page is printed.\n\n### noMove\n\nPrevents users from moving annotations.\n\nDefault value: `false`\n\nNote: \n\nFor the following annotations, it is not effective and the default value is `true`.\n\n* [`Highlight`](/api/class/annotation/highlight.md)\n* [`Strikeout`](/api/class/annotation/strikeout.md)\n* [`Underline`](/api/class/annotation/underline.md)\n\n### noView\n\nNot to display the annotation or allow a user to interact with the annotation.\n\nDefault value: `false`\n\n### noResize\n\nPrevents users from resizing annotations.\n\nDefault value: `false`.\n\nNote: \n\nFor [`TextTypeWriter`](/api/class/annotation/texttypewriter.md), it is not effective and the default value is `true`.\n\n### noRotate\n\nPrevents users from rotating annotations.\n\nDefault value: `false`\n\nNote: \n\nFor the following annotations, it is not effective and the default value is `true`.\n\n* [`TextTypeWriter`](/api/class/annotation/texttypewriter.md)\n* [`Polyline`](/api/class/annotation/polyline.md)\n* [`Polygon`](/api/class/annotation/polygon.md)\n* [`Line`](/api/class/annotation/line.md)\n* [`Highlight`](/api/class/annotation/highlight.md)\n* [`Strikeout`](/api/class/annotation/strikeout.md)\n* [`Underline`](/api/class/annotation/underline.md)\n\n\n### readOnly\n\nNot to allow a user to interact with the annotation, default value: `false`.\n\n## Related\n\n- [`RectAnnotationOptions`]({{ site.api }}interface/annotationinterface/rectannotationoptions.html)\n- [`EllipseAnnotationOptions`]({{ site.api }}interface/annotationinterface/ellipseannotationoptions.html)\n- [`PolygonAnnotationOptions`]({{ site.api }}interface/annotationinterface/polygonannotationoptions.html)\n- [`PolylineAnnotationOptions`]({{ site.api }}interface/annotationinterface/polylineannotationoptions.html)\n- [`LineAnnotationOptions`]({{ site.api }}interface/annotationinterface/lineannotationoptions.html)\n- [`InkAnnotationOptions`]({{ site.api }}interface/annotationinterface/inkannotationoptions.html)\n- [`TextBoxAnnotationOptions`]({{ site.api }}interface/annotationinterface/textboxannotationoptions.html)\n- [`TextTypewriterAnnotationOptions`]({{ site.api }}interface/annotationinterface/texttypewriterannotationoptions.html)\n- [`StampAnnotationOptions`]({{ site.api }}interface/annotationinterface/stampannotationoptions.html)\n- [`HighlightAnnotationOptions`](/api/interface/annotationinterface/highlightannotationoptions.md)\n- [`UnderlineAnnotationOptions`](/api/interface/annotationinterface/underlineannotationoptions.md)\n- [`StrikeoutAnnotationOptions`](/api/interface/annotationinterface/strikeoutannotationoptions.md)",
-      "breadcrumb": "Interface Flags"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Getting Started - Creating HelloWorld",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/gettingstarted/helloworld.html",
-      "content": "# Creating HelloWorld\n\nIn this section, we’ll break down and show all the steps needed to build the HelloWorld.\n\n### Mobile View Mockup\n\n![Hello World for Mobile](/assets/imgs/edit-viewer-mobile-3.0.jpg)\n\n### Desktop View Mockup\n\n![Hello World for Desktop](/assets/imgs/edit-viewer-3.0.jpg)\n\nWe’ll build on this skeleton page:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n    <title>DDV - HelloWorld</title>\n</head>\n<body>\n</body>\n<script type=\"module\">\n// Write your code here\n</script>\n</html>\n```\n\n## Adding the dependency\n\nPlease refer to [Adding the dependency]({{ site.gettingstarted }}add_dependency.html).\n\n## Define necessary HTML elements\n\nFor HelloWorld, we define below elements.\n\n- Container to hold the viewer\n\n```html\n<div id=\"container\"></div>\n```\n\n- Container's style\n\n```html\n<style>\n    html,body {\n        width: 100%;\n        height: 100%;\n        margin:0;\n        padding:0;\n        overscroll-behavior-y: none;\n        overflow: hidden;\n    }\n\n    #container {\n        width: 100%;\n        height: 100%;\n    }\n</style>\n```\n\n## SDK initialization\n\n```javascript\n// Public trial license which is valid for 24 hours\n// You can request a 30-day trial key from https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv\nDynamsoft.DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\";\nDynamsoft.DDV.Core.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine\";\n// Preload DDV Resource\nDynamsoft.DDV.Core.loadWasm();\nawait Dynamsoft.DDV.Core.init(); \n```\n\n## Create an edit viewer\n\n```javascript\n// Create an edit viewer\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"container\",\n    uiConfig: Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\"),\n});\n```\n\n## Review the complete code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n    <title>DDV - HelloWorld</title>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.css\">\n    <script src=\"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/ddv.js\"></script>\n</head>\n<style>\n    html,body {\n        width: 100%;\n        height: 100%;\n        margin:0;\n        padding:0;\n        overscroll-behavior-y: none;\n        overflow: hidden;\n    }\n\n    #container {\n        width: 100%;\n        height: 100%;\n    }\n</style>\n<body>\n    <div id=\"container\"></div>\n</body>\n<script type=\"module\">\n    (async () => {\n        // Public trial license which is valid for 24 hours\n        // You can request a 30-day trial key from https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv\n        Dynamsoft.DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\";\n        Dynamsoft.DDV.Core.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine\";\n        // Preload DDV Resource\n        Dynamsoft.DDV.Core.loadWasm();\n        await Dynamsoft.DDV.Core.init();\n        const editViewer = new Dynamsoft.DDV.EditViewer({\n            container: \"container\",\n            uiConfig: Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\"),\n        });\n    })();\n</script>\n</html>\n```\n",
-      "breadcrumb": "Creating HelloWorld"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Highlight Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/highlight.html",
-      "content": "# Highlight Class\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `highlight`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n\n- It will return `''`, if the annotation is deleted.\n\n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;  //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted.\n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate).\n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): HighlightAnnotationOptions;\n```\n\n**Return value**\n\nThe object of highlight annotation options. Please refer to [`HighlightAnnotationOptions`]({{ site.api }}interface/annotationinterface/highlightannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst options = { \n    rects: [{ \n        x: 10, \n        y: 10, \n        width: 100, \n        height: 100, \n    }], \n    background: \"red\"\n}\nconst highlight = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"highlight\", options); // Create a highlight annotation instance.\nconst highlightOptions = highlight.getOptions();\n```\n\n## updateOptions()\n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(highlightAnnotationOptions: HighlightAnnotationOptions): boolean;\n```\n\n**Parameters**\n\n`highlightAnnotationOptions`: The new highlight annotation options. Please refer to [`HighlightAnnotationOptions`]({{ site.api }}interface/annotationinterface/highlightannotationoptions.html).\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst newOptions = { \n    rects: [{ \n        x: 50, \n        y: 10, \n        width: 100, \n        height: 100, \n    }], \n    background: \"yellow\"\n}; \nhighlight.updateOptions(newOptions); // Update the annotation.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "Highlight Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface HighlightAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/highlightannotationoptions.html",
-      "content": "# HighlightAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface HighlightAnnotationOptions {\n    background?: string;\n    rects: RectXY[];\n    opacity?: number;\n    flags?: Flags;\n}\n```\n\n## Attributes\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `#FD7C10`.\n\n**Example**\n\n```typescript\nbackground: \"#FF0000\", \n```\n\n**Remark**\n\nSupported string value of `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### rects\n\nAn array of rectangles marking where to put the annotations.\n\nPlease refer to [`RectXY`](/api/interface/rectxy.md).\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### flags\n\nThe flags of annotation. \n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n## Related\n\n- [`getOptions()`](/api/class/annotation/highlight.md#getoptions) under `Highlight` class\n- [`updateOptions()`](/api/class/annotation/highlight.md#updateoptions) under `Highlight` class\n",
-      "breadcrumb": "Interface HighlightAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface HighlightStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/highlightstyle.html",
-      "content": "# HighlightStyle\n\n## Syntax\n\n```typescript\ninterface HighlightStyle {\n    opacity?: number;\n    background?: string;\n}\n```\n\n## Attributes\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `#FD7C10`.\n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n**Remark**\n\nSupported string value of `background`:\n\n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1.\n\nDefault value: 1\n",
-      "breadcrumb": "Interface HighlightStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface IBrowseViewer",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/ibrowseviewer.html",
-      "content": "# IBrowseViewer\n\nThis interface that defines a thumbnail object and this object will be created automatically as soon as an [`EditViewer`]({{ site.api }}class/editviewer.html#editviewer) instance is created.\n\n**Code Snippet**\n\n```typescript\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: document.getElementById(\"viewer\"),\n});\n\n// An IBrowseViewer object will be created at meanwhile which represents the thumbnail object in edit viewer.\nconst thumbnailObj = editViewer.thumbnail; \n```\n\n## Members\n\n| API Name            | Description                                                  |\n| ------------------- | ------------------------------------------------------------ |\n| [`getStyle()`](#getstyle)            | Get the style object of `BrowseViewer`.                        |\n| [`updateStyle()`](#updatestyle)        | Update the style object of `BrowseViewer`.                     |\n| [`getUiConfig()`](#getuiconfig)         | Get current `UiConfig` object.                               |\n| [`getVisiblePagesInfo()`](#getVisiblePagesInfo)               | Get the visible pages info                |\n| [`updateUiConfig()`](#updateuiconfig)     | Update `UiConfig` object.                                    |\n| [`show()`](#show)                | Show the viewer.                                             |\n| [`hide()`](#hide)                | Hide the viewer.                                             |\n| [`isVisible`](#isvisible)        | Return whether the viewer is shown or hidden.      |\n| [`multiselectMode`](#multiselectmode) | Specify or return whether to allow multiple pages to be selected at once. |\n| [`getSelectedPageIndices()`](#getselectedpageindices) | Get indices of selected pages.                               |\n| [`selectPages()`](#selectpages)            | Select pages by specified indices.                           |\n| [`selectAllPages()`](#selectallpages)         | Select all pages.                                            |\n| [`setRowAndColumn()`](#setrowandcolumn)        | Set rows and columns of displayed pages.                     |\n\n## Events\n\nPlease refer to [`BrowseViewer`-`Events`]({{ site.api }}class/browseviewer.html#events).\n\n### getStyle()\n\nGet the style object of `BrowseViewer`.\n\n**Syntax**\n\n```typescript\ngetStyle(browseViewerStyleName: BrowseViewerStyleName): BrowseViewerStyle | null;\n```\n\n**Parameters**\n\n`browseViewerStyleName`: A `BrowseViewerStyleName` can be one of eight types.\n\n```typescript\ntype BrowseViewerStyleName = \"canvasStyle\" | \"pageStyle\" | \"selectedPageStyle\" | \"currentPageStyle\" | \"hoveredPageStyle\" | \"placeholderStyle\" | \"pageNumberStyle\" | \"checkboxStyle\";\n```\n\n**Return values**\n\nThe style object. Please refer to [Style Interfaces]({{ site.api }}interface/styleinterface/index.html).\n\n**Code Snippet**\n\n```typescript\n// Get pageStyle object;\nconst pageStyle = thumbnailObj.getStyle(\"pageStyle\");\n```\n\n**Warning**\n\n Error Code  | Error Message                                                            | API Return Value\n--------|-------------------------------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `null`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `null`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `null`\n\n### updateStyle()\n\nUpdate the style object of `BrowseViewer`.\n\n**Syntax**\n\n```typescript\nupdateStyle(browseViewerStyleName: BrowseViewerStyleName, browseViewerStyle: BrowseViewerStyle): boolean;\n```\n\n**Parameters**\n\n`browseViewerStyleName`: A `BrowseViewerStyleName` can be one of eight types.\n\n```typescript\ntype BrowseViewerStyleName = \"canvasStyle\" | \"pageStyle\" | \"selectedPageStyle\" | \"currentPageStyle\" | \"hoveredPageStyle\" | \"placeholderStyle\" | \"pageNumberStyle\" | \"checkboxStyle\";\n```\n\n`browseViewerStyle`: The style object. Please refer to [Style Interfaces]({{ site.api }}interface/styleinterface/index.html).\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n- First method\n\n    ```typescript\n    // Get style object\n    const pageStyle = thumbnailObj.getStyle(\"pageStyle\");\n\n    // Modify the style object\n    pageStyle.background = \"red\";\n    pageStyle.border = \"1px solid green\";\n\n    // Update page style\n    thumbnailObj.updateStyle(\"pageStyle\", pageStyle);\n    ```\n\n- Second method\n\n    ```typescript\n    // Update the style object directly\n    thumbnailObj.updateStyle(\"pageStyle\", {\n        background: \"red\",\n        border: \"1px solid green\",\n    });\n    ```\n\n**Warning**\n\n Error Code  | Error Message                                                            | API Return Value\n--------|-------------------------------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `false`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `false`\n\n\n**Remark**\n\n- The updates are independent of whether the viewer is displayed and are updated in real time.\n\n### getUiConfig()\n\nGet current `UiConfig` object.\n\n**Syntax**\n\n```typescript\ngetUiConfig(): UiConfig;\n```\n\n**Return Value**\n\nThe [`UiConfig`]({{ site.api }}interface/uiconfig.html) object.\n\n**Code Snippet**\n\n```typescript\nconst viewerUi = thumbnailObj.getUiConfig();\n```\n\n### getVisiblePagesInfo()\n\nGet the visible pages info.\n\n**Syntax**\n\n```typescript\ngetVisiblePagesInfo(): PageVisualInfo[];\n```\n\n**Return values**\n\nArray of the `PageVisualInfo` object. Please refer to [`PageVisualInfo`](/api/interface/pagevisualinfo.md).\n\n### updateUiConfig()\n\nUpdate `UiConfig` object.\n\n**Syntax**\n\n```typescript\nupdateUiConfig(uiConfig: UiConfig): boolean;\n```\n\n**Parameters**\n\n`uiConfig`: The [`UiConfig`]({{ site.api }}interface/uiconfig.html) to update.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n -80313 | The element *XXX(ElementName)* is not supported in *XXX(ClassName)* class.      | `false`\n\n**Remark**\n\n- The updates are independent of whether the viewer is displayed and are updated in real time.\n\n### show()\n\nShow the viewer.\n\n**Syntax**\n\n```typescript\nshow(): void;\n```\n\n**Code Snippet**\n\n```typescript\nthumbnailObj.show();\n```\n\n### hide()\n\nHide the viewer.\n\n**Syntax**\n\n```typescript\nhide(): void;\n```\n\n**Code Snippet**\n\n```typescript\nthumbnailObj.hide();\n```\n\n### isVisible\n\nReturn whether the viewer is shown or hidden.\n\n**Syntax**\n\n```typescript\nreadonly isVisible: boolean;\n```\n\n**Remark**\n\n- If `visibility` is not specified in [`thumbnailConfig`]({{ site.api }}interface/editviewerconstructoroptions.html#thumbnailconfig) while creating the viewer additionally, its default value is `false`.\n\n### multiselectMode\n\nSpecify or return whether to allow multiple pages to be selected at once.\n\n**Syntax**\n\n```typescript\nmultiselectMode: boolean; \n```\n\n**Example**\n\n```typescript\nthumbnailObj.multiselectMode = true;\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n\n**Remark**\n\n- If it is not specified in [`thumbnailConfig`]({{ site.api }}interface/editviewerconstructoroptions.html#thumbnailconfig) while creating the viewer additionally, its default value is `false`.\n\n### getSelectedPageIndices()\n\nGet indices of selected pages.\n\n**Syntax**\n\n```typescript\ngetSelectedPageIndices(): number[];\n```\n\n**Return Value**\n\nThe array of the selected pages' indices.\n\n**Example**\n\n```typescript\nconst selPages = thumbnailObj.getSelectedPageIndices();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `[]`\n\n**Remark**\n\n- If no page is selected in the viewer, returns [].\n- The order of the returned array elements is based on the order in which the pages are selected. For example, if select the pages with the index 6, 5, 2 in order, the returned array will be [6,5,2].\n\n### selectPages()\n\nSelect pages by specified indices.\n\n**Syntax**\n\n```typescript\nselectPages(indices: number[]): string[];\n```\n\n**Parameters**\n\n`indices`: Specify the indices of the pages to be selected. If set to an empty array `[]`, no pages will be selected.\n\n**Return Value**\n\nThe array of selected pages' uids.\n\n**Example**\n\n```typescript\n// Select the first and second pages.\nthumbnailObj.selectPages([0,1]);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `[]`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `[]`\n -80304 | No document opened.                                 | `[]`\n\n### selectAllPages()\n\nSelect all pages.\n\n**Syntax**\n\n```typescript\nselectAllPages(): string[];\n```\n\n**Return Value**\n\nThe array of selected pages' uids.\n\n**Example**\n\n```typescript\nthumbnailObj.selectAllPages();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `[]`\n -80305 | There is no image in the current document.          | `[]`\n\n### setRowAndColumn()\n\nSet rows and columns of displayed pages.\n\n**Syntax**\n\n```typescript\nsetRowAndColumn(\n    rows: number, \n    columns: number \n): boolean;\n```\n\n**Parameters**\n\n`rows`: The number of rows. The maximum value is 20.\n\n`columns`: The number of columns. The maximum value is 20.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Example**\n\n```typescript\nthumbnailObj.setRowAndColumn(5,8); // Display the page in five rows and eight columns.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.     | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n\n**Remark**\n\n- If it is not specified in [`thumbnailConfig`]({{ site.api }}interface/editviewerconstructoroptions.html#thumbnailconfig) while creating the edit viewer additionally, its default rows is 4(3) and columns is 1(2) in desktop(mobile).\n",
-      "breadcrumb": "Interface IBrowseViewer"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface IDocTextSearcher",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/idoctextsearcher.html",
-      "content": "# IDocTextSearcher\n\n## Syntax\n\n```typescript\ninterface IDocTextSearcher {\n    docUid(): string;\n    getResults(pageIndex: number): Promise<TextSearchResult[]>;\n    destroy(): void;\n}\n```\n\n## Attributes\n\n### docUid\n\nThe uid of the doc.\n\n## Methods\n\n### getResults\n\nGet the text search result of a page.\n\n**Parameters**\n\n`pageIndex`: the index of the page to search\n\n**Return values**\n\nPromise of an array of the `TextSearchResult` object. Please refer to [`TextSearchResult`](/api/interface/textsearchresult.md).\n\n**Promise Exception**\n\n Error Code  | Error Message\n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80104 | *XXX(API)*: The specified document(s) do not exist.\n -80105 | *XXX(API)*: The specified page(s) do not exist.  \n -80206 | The DocTextSearcher has been destroyed.\n\n### destroy\n\nDestroy the instance of the doc searcher.\n\n## Related\n\n[`createTextSearcher()`](/api/interface/idocument/index.md#createtextsearcher)\n\n\n",
-      "breadcrumb": "Interface IDocTextSearcher"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface IDocumentDetect",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/idocumentdetect.html",
-      "content": "# IDocumentDetect\n\nIt is implemented by [`DocuemntDetect`]({{ site.api }}class/advanced/documentdetect.html) Class.\n\n## Members\n\n### detect()\n\n**Syntax**\n\n```typescript\ndetect(image: VImageData, config?: DocumentDetectConfig): Promise<DocumentDetectResult>;\n```\n\n**Parameters**\n\n`image`: The image which is used to detect boundaries. Please refer to [`VImageData`]({{ site.api }}interface/vimagedata.html).\n\n`config`: The configuration of document detect. Please refer to [`DocumentDetectConfig`]({{ site.api }}interface/documentdetectconfig.html).\n\n**Return Value**\n\nA promise resolving to an [`DocumentDetectResult`]({{ site.api }}interface/documentdetectresult.html) object that contains the detected result.\n\n### destory()\n\n**Syntax**\n\n```typescript\ndestory(): void;\n```\n",
-      "breadcrumb": "Interface IDocumentDetect"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface IImageFilter",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/iimagefilter.html",
-      "content": "# IImageFilter\n\nIt is implemented by [`ImageFilter`]({{ site.api }}class/advanced/imagefilter.html) Class.\n\n## Members\n\n### querySupported()\n\n**Syntax**\n\n```typescript\nquerySupported(): ImageFilterItem[];\n```\n\n**Return Value**\n\nPlease refer to [`ImageFilterItem`]({{ site.api }}interface/imagefilteritem.html).\n\n### `get` defaultFilterType()\n\n**Syntax**\n\n```typescript\nget defaultFilterType(): EnumImageFilterType;\n```\n\n**Return Value**\n\nPlease refer to [`EnumImageFilterType`]({{ site.api }}enumeration-type/enumimagefiltertype.html).\n\n### applyFilter()\n\n**Syntax**\n\n```typescript\napplyFilter(image: VImageData, type: EnumImageFilterType): Promise<Blob>;\n```\n\n**Parameters**\n\n`image`: The image which will be filtered. Please refer to [`VImageData`]({{ site.api }}interface/vimagedata.html).\n`type`: The image filter type. Please refer to [`EnumImageFilterType`]({{ site.api }}enumeration-type/enumimagefiltertype.html).\n\n**Return Value**\n\nA Promise object which will be resolved with `Blob` of the filtered image.\n\n### destroy()\n\n**Syntax**\n\n```typescript\ndestroy(): void;\n```\n",
-      "breadcrumb": "Interface IImageFilter"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features - Image Filter",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/advanced/imagefilter.html",
-      "content": "# How to configure image filter\n\nDDV provides [`setProcessingHandler()`]({{ site.api }}namespace/ddv.html#static-setprocessinghandler) method for developers to access the corresponding document boundaries detection and image filter algorithms. This article mainly introduces how to configure image filter.\n\n## Configure built-in image filter\n\nDDV has a built-in image filter handler. To configure it, please refer to the code below.\n\n```typescript\nconst imageFilter = new Dynamsoft.DDV.ImageFilter();\nDynamsoft.DDV.setProcessingHandler(\"imageFilter\", imageFilter);\n```\n\nThen, `Dynamsoft.DDV.Elements.Filter` will be enabled.\n\n![Built-in image filter](/assets/imgs/builtinimagefilter.png)\n\n### Customize built-in image filter \n\n#### Remove some filter items from built-in element\n\nIf you want to remove some filter items from the bulid-in Filter element, you can modify the return of [`querySupported()`]({{ site.api }}class/advanced/imagefilter.html#querysupported) accordingly.\n\n**Use case**\n\nRemove B&W from the bulid-in Filter element.\n\n```typescript\nclass MyImageFilter extends Dynamsoft.DDV.ImageFilter {\n    querySupported() {\n        const myFilterList = [\n            {type: \"none\", label: \"Original\"},\n            //{type: \"blackAndWhite\", label: \"B&W\"},\n            {type: \"gray\", label: \"Grayscale\"},\n            {type: \"saveInk\", label: \"SaveToner\"},\n        ];\n\n        return myFilterList;\n    }\n}\n\nconst imageFilter = new MyImageFilter();\nDynamsoft.DDV.setProcessingHandler(\"imageFilter\", imageFilter);\n```\n\n![Remove B&W](/assets/imgs/imagefilterremovebw.png)\n\n#### Modify the default filter type\n\nBy default, `none` is the default filter type which means original image. You can reset [`defaultFilterType`]({{ site.api }}class/advanced/imagefilter.html#defaultfiltertype) to your expected one. \n\nPlease note the default filter type will be applied to the image directly.\n\n**Use case**\n\nSet B&W as the default filter type.\n\n```typescript\nclass MyImageFilter extends Dynamsoft.DDV.ImageFilter {\n    get defaultFilterType() {\n        return \"blackAndWhite\";\n    }\n}\n\nconst imageFilter = new MyImageFilter();\nDynamsoft.DDV.setProcessingHandler(\"imageFilter\", imageFilter);\n```\n\n#### Customize the label string for each filter type\n\nLabel string for each filter type means the string which is displayed in the Filter element under each filter type. You can modify the return of [`querySupported()`]({{ site.api }}class/advanced/imagefilter.html#querysupported) accordingly.\n\n**Use case**\n\nChange label strings' language to Deutsch.\n\n```typescript\nclass MyImageFilter extends Dynamsoft.DDV.ImageFilter {\n    querySupported() {\n        const myFilterList = [\n            {type: \"none\", label: \"Original\"},\n            {type: \"blackAndWhite\", label: \"S/W\"},\n            {type: \"gray\", label: \"Graustufen\"},\n            {type: \"saveInk\", label: \"Tinte sparen\"},\n        ];\n        return myFilterList;\n    }\n}\n\nconst imageFilter = new MyImageFilter();\nDynamsoft.DDV.setProcessingHandler(\"imageFilter\", imageFilter);\n```\n\n![Change label strings](/assets/imgs/imagefilterchangelabel.png)\n\n## Configure your own image filter\n\nBesides use the built-in image filter handler, you can also configure your own image filter algorithm.\n\n**Example**\n\nAssume there are two image filter algorithms, blur and sepia.\n\n```typescript\nclass MyImageFilter extends Dynamsoft.DDV.ImageFilter {\n    async applyFilter(image, type) {\n        if (type == \"blur\") {\n            ///// \n            // Implement the blur filter here\n            // return blob\n            /////\n            // Example: Assume function blurImage returns blur image blob\n            return blurImage(image.data, image.width, image.height)\n        }\n        else if (type == \"sepia\") {\n            ///// \n            // Implement the sepia filter here\n            // return blob\n            /////\n            // Example: Assume function sepiaImage returns sepia image blob\n            return sepiaImage(image.data, image.width, image.height)\n        }\n        else { \n            // return original image\n            return new Promise((r, j) => {\n                r(image.data)\n            });\n        }\n    };\n    get defaultFilterType() {\n        return \"original\"\n    };\n    querySupported() {\n        return [\n            {\n                type: \"original\",\n                label: \"Original\"\n            },\n            {\n                type: \"blur\",\n                label: \"Blur\",\n            }, {\n                type: \"sepia\",\n                label: \"Retro\",\n            }]\n    };\n    destroy() {\n        super.destroy()\n    };\n}\n\nconst imageFilter = new MyImageFilter();\nDynamsoft.DDV.setProcessingHandler(\"imageFilter\", imageFilter);\n```\n\n![Own image filter](/assets/imgs/ownimagefilter.png)\n\n## Reference\n\n- [`ImageFilter class`]({{ site.api }}class/advanced/imagefilter.html)",
-      "breadcrumb": "Image Filter"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - ImageFilter Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/advanced/imagefilter.html",
-      "content": "# ImageFilter\n\n`ImageFilter` implements [`IImageFilter`]({{ site.api }}interface/iimagefilter.html). \n\nThis class is used to configure `Dynamsoft.DDV.Elements.Filter`. Please refer to [How to configure image filter]({{ site.features }}advanced/imagefilter.html).\n\nThe APIs for this class include:\n\n API Name            | Description                                             \n---------------------|-----------------------------------------------------------\n [`constuctor() `](#constuctor)       | Constuctor of `ImageFilter` instance.\n [`defaultFilterType`](#defaultfiltertype)   | Configure the default image filter type.\n [`querySupported()`](#querysupported)    | Query supported image filter types and their label string, then create the completed Filter Element.\n [`applyFilter()`](#applyfilter)       | Apply the specified image filter type to image(s).\n [`destroy()`](#destroy)           | Destroy the instance.\n\n## constuctor()\n\nConstuctor of `ImageFilter` instance.\n\n**Syntax**\n\n```typescript\nconstuctor(image?: VImageData);\n```\n\n**Parameters**\n\n`image`: The image which will be filtered. Please refer to [`VImageData`]({{ site.api }}interface/vimagedata.html).\n\n## defaultFilterType\n\nConfigure the default image filter type.\n\n```typescript\nreadonly defaultFilterType: string;\n```\n\n**Return Value**\n\nThe image filter type. Please refer to [`EnumImageFilterType`]({{ site.api }}enumeration-type/enumimagefiltertype.html).\n\n## querySupported()\n\nQuery supported image filter types and their label string, then create the completed Filter Element.\n\n**Syntax**\n\n```typescript\nquerySupported(): ImageFilterItem[];\n```\n**Return Value**\n\nThe array of image filter method. Please refer to [`ImageFilterItem`]({{ site.api }}interface/imagefilteritem.html).\n\n## applyFilter()\n\nApply the specified image filter type to image(s).\n\n**Syntax**\n\n```typescript\napplyFilter(type: string): Promise<Blob>;\napplyFilter(image: VImageData, type: string): Promise<Blob>;\n```\n\n**Parameters**\n\n`type`: The image filter type. Please refer to [`EnumImageFilterType`]({{ site.api }}enumeration-type/enumimagefiltertype.html).\n`image`: The image which will be filtered. Please refer to [`VImageData`]({{ site.api }}interface/vimagedata.html).\n\n**Return Value**\n\nA Promise object which will be resolved with `Blob` of the filtered image.\n\n## destroy()\n\nDestroy the instance.\n\n**Syntax**\n\n```typescript\ndestroy(): void;\n```\n",
-      "breadcrumb": "ImageFilter Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface ImageFilterItem",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/imagefilteritem.html",
-      "content": "# ImageFilterItem\n\n## Syntax\n\n```typescript\ninterface ImageFilterItem {\n    type: string; \n    label: string; \n}\n```\n\n## Attributes\n\n### type\n\nThe image filter type string.\n\n### label\n\nThe label string for the image filter type which will be displayed.\n",
-      "breadcrumb": "Interface ImageFilterItem"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Incomplete Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/incomplete.html",
-      "content": "# Incomplete Class\n\nThis type of annotation may not be supported by Dynamsoft Document Viewer so far.\n\n## API Index\n\n| API Name                        | Description                                                 |\n| ------------------------------- | ----------------------------------------------------------- |\n| [`uid`](#uid)                   | Return the uid of the annotation.                           |\n| [`pageUid`](#pageuid)           | Return the uid of the page where the annotation is located. |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate) | Return the creation date of the annotation.                 |\n| [`raw`](#raw)                   | Return the raw data of the annotation.                      |\n\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n{% comment %}\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `incomplete`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted. \n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate). \n\n## raw\n\nReturn the raw data of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly raw: any;\n```\n",
-      "breadcrumb": "Incomplete Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Viewer Configuration",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/viewer/index.html",
-      "content": "# Viewer Configuration\n\n- [ViewerConfig]({{ site.viewer }}viewerconfig.html)\n    - [Structure]({{ site.viewer }}viewerconfig.html#structure)\n    - [Default ViewerConfig]({{ site.viewer }}viewerconfig.html#default-viewerconfig)\n- [How to customize viewer]({{ site.viewer }}customize.html)\n    - [Viewer Style]({{ site.viewer }}customize.html#viewer-style)\n    - [Viewer properties]({{ site.viewer }}customize.html#viewer-properties)",
-      "breadcrumb": "Viewer Configuration"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/index.html",
-      "content": "# Features\n\nGenerally, the key features of DDV are shown as below.\n\n## Data Management\n\nData management is to manage the data which is imported into DDV. \n\nHow does DDV implement data management? First of all, there are two concepts which need to be introduced, document and page. \n\nPage can be understood as a page, currently an image, which is the smallest unit of managing data. Each page has a unique pageUid. \n\nAnd the pages are placed in the document. Each document also has its unique docUid, one document after another makes up the whole data. \n\n![Doc&Page](/assets/imgs/doc&page.png)\n\nSo manage data is to manage documents and pages.\n\n- [Document management]({{ site.features }}datamanagement/docmanagement.html)\n- [Page management]({{ site.features }}datamanagement/pagemanagement.html)\n\nActually, if you are using the default UI of DDV, the data has been processed and managed internally.\n\nStarting from version 2.0, DDV supports annotation functionalities, which means that annotation data also needs to be managed.\n\n- [Annotation management]({{ site.features }}datamanagement/annotmanagement.html)\n\n## Viewers\n\nViewers are used to display the data. According to the different uses of viewers, DDV provides five different viewer types, which are implemented through five viewer classes.\n\n- [Edit Viewer]({{ site.features }}viewers/editviewer.html)\n- [Capture Viewer]({{ site.features }}viewers/captureviewer.html)\n- [Perspective Viewer]({{ site.features }}viewers/perspectiveviewer.html)\n- [Browse Viewer]({{ site.features }}viewers/others.html#browse-viewer)\n- [Custom Viewer]({{ site.features }}viewers/others.html#custom-viewer)\n{% comment %}- [Data synchronisation between viewers]({{ site.features }}viewers/datasync.html){% endcomment %}\n\n## Advanced\n\n- [How to configure image filter]({{ site.features }}advanced/imagefilter.html)\n- [How to configure boundaries detection]({{ site.features }}advanced/documentdetect.html)",
-      "breadcrumb": "User Interface"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer User Interface - Customize",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/ui/customize/index.html",
-      "content": "# How to Customize user interface\n\nIn actual scenarios, the default UI may not meet all requirements. Developers will want to be able to customize the UI, whether it is based on the default UI or reorganizing the layout and buttons. This chapter will explain in detail how to simply customize the UI in DDV.\n\n- [How to customize UI]({{ site.ui }}customize/index.html)\n    - [Layout]({{ site.ui }}customize/layout.html)\n    - [Elements]({{ site.ui }}customize/elements.html)\n    - [Update UI dynamically]({{ site.ui }}customize/dynamically.html)",
-      "breadcrumb": "How to Customize UI"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer User Interface",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/ui/index.html",
-      "content": "# User Interface\n\n\n- [User Interface]({{ site.ui }}index.html)\n    - [UiConfig]({{ site.ui }}uiconfig.html)\n        - [Structure]({{ site.ui }}uiconfig.html#structure)\n        - [How to configure]({{ site.ui }}uiconfig.html#how-to-configure)\n        - [Reference]({{ site.ui }}uiconfig.html#reference)\n    - [Built-in Elements]({{ site.ui }}default_elements.html)\n    - [Default User Interface]({{ site.ui }}default_ui.html)\n        - [Edit viewer]({{ site.ui }}default_ui.html#edit-viewer)\n        - [Capture viewer]({{ site.ui }}default_ui.html#capture-viewer)\n        - [Perspective viewer]({{ site.ui }}default_ui.html#perspective-viewer)\n        - [Browse viewer]({{ site.ui }}default_ui.html#browse-viewer)\n    - [How to customize UI]({{ site.ui }}customize/index.html)\n        - [Layout]({{ site.ui }}customize/layout.html)\n        - [Elements]({{ site.ui }}customize/elements.html)\n        - [Update UI dynamically]({{ site.ui }}customize/dynamically.html)",
-      "breadcrumb": "User Interface"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer - Release Notes",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/releasenotes/index.html",
-      "content": "# Release Notes\n\n## 3.2 (01/13/2026)\n\n### Improvements\n\n* Improved the context of search results, which now display the word before the searched word.\n* Improved the rendering of selected annotations by reducing the number of items to draw.\n* Improved the performance of selecting multiple annotations.\n* Added a consistency check between the JavaScript and resource file versions.\n* Added support for pinch-to-zoom under `textSelection` mode of `EditViewer` for mobile.\n* Updated third-party libraries to enhance security. \n\n### Bug Fixes\n\nFixed the text overflow issue in custom stamps.\n\n\n## 3.1 (10/16/2025)\n\n### UX Changes\n\nFor Edit Viewer:\n\n* Added support for panning images in `textSelection` mode.\n* Text markup annotations can be modified after being cropped.\n* Return to `pan` mode if `textSelection` mode is turned off on mobile by clicking the icon.\n* Added support for returning to `pan` mode by pressing ESC.\n\nFor Edit Viewer and Browse Viewer:\n\nWhen the cursor is around the viewer's edges when selecting text or dragging the thumbnails, auto-scrolling will be triggered. It can be configured using the [`enableAutoScrollForTextSelection`](/api/interface/editviewerconfig.md#enableautoscrollfortextselection) property for Edit Viewer and the [`enableAutoScrollForDragPages`](/api/interface/browseviewerconfig.md#enableautoscrollfordragpages) property for Browse Viewer.\n\n### API Changes\n\nAdded interfaces for better UI customizability.\n\n* [`getAnnotationDrawingStyle()`](/api/class/editviewer.md#getannotationdrawingstyle) method for Edit Viewer\n* [`undoRedoStateChanged`](/api/class/editviewer.md#undoredostatechanged) event for Edit Viewer\n* [`annotationDrawingStyleChanged`](/api/class/editviewer.md#annotationdrawingstylechanged) event for Edit Viewer\n* [`scroll`](/api/class/editviewer.md#scroll) event for Edit Viewer and Browse Viewer\n* [`paginationChanged`](/api/class/editviewer.md#paginationchanged) event for all the viewers\n* [`cropMode`](/api/class/editviewer.md#cropmode) property for Edit Viewer. The [`crop()`](/api/class/editviewer.md#crop) method of Edit Viewer will choose which images to crop based on the `cropMode` if no image indices are passed.\n\n### Improvements\n\n* Increased the FPS of rendering documents, especially documents with lots of pages.\n* Optimized the performance of `updateOptions()`.\n* Moved the magnifier into a separate layer to improve the performance and avoid being blocked.\n\n### Bug Fixes\n\n* Fixed a bug where changes of the layout will reset the position of the current document page to its top-left.\n* Fixed a bug where the text is shifted if the PDF's media box has shifts.\n\n## 3.0 (07/08/2025)\n\n### Features Highlights\n\n* Added support for text selection. We can now copy and annotate selected text.\n* Added three text markup annotations: `highlight`, `strikeout` and `underline`.\n* Added support for text search.\n\n### API Changes\n\n* Added classes for text markup annotations.\n   * [`Highlight`](/api/class/annotation/highlight.md)\n   * [`Underline`](/api/class/annotation/underline.md)\n   * [`Strikeout`](/api/class/annotation/strikeout.md)\n* Added interfaces to set up text markup annotations.\n   * [`HighlightAnnotationOptions`](/api/interface/annotationinterface/highlightannotationoptions.md)\n   * [`UnderlineAnnotationOptions`](/api/interface/annotationinterface/underlineannotationoptions.md)\n   * [`StrikeoutAnnotationOptions`](/api/interface/annotationinterface/strikeoutannotationoptions.md)\n   * [`HighlightStyle`](/api/interface/annotationinterface/highlightstyle.md)\n   * [`UnderlineStyle`](/api/interface/annotationinterface/underlinestyle.md)\n   * [`StrikeoutStyle`](/api/interface/annotationinterface/strikeoutstyle.md)\n   * [`RectXY`](/api/interface/rectxy.md)\n* Added new [tool mode](/api/class/editviewer.md#toolmode) for `EditViewer`: `textSelection`.\n* Added new [annotation modes](/api/class/editviewer.md#annotationmode) for `EditViewer`: `highlight`, `strikeout` and `underline`.\n* Added new buttons in [`ToolbarConfig`](/api/interface/annotationinterface/toolbarconfig.md): `copy`, `highlight`, `strikeout` and `underline`.\n* Added new [elements](/ui/default_elements.md) for `EditViewer`:\n   * TextSelectionMode\n   * TextSearchPanelSwitch\n   * TextSearchPanel\n   * HighlightAnnotation\n   * UnderlineAnnotation\n   * StrikeoutAnnotation\n* Added text selection and search methods and events for [`EditViewer`](/api/class/editviewer.md).\n* Added an [`IDocTextSearcher`](/api/interface/idocument/idoctextsearcher.md) interface that can be created using [`createTextSearcher()`](/api/interface/idocument/index.md#createtextsearcher) of [`IDocument`](/api/interface/idocument/index.md).\n* Added [`isPageModified()`](/api/interface/idocument/index.md#ispagemodified) method to detect whether a page has been modified.\n* Added [`getVisiblePagesInfo()`](/api/class/editviewer.md#getvisiblepagesinfo) for viewers.\n* Added new events for viewers.\n* Updated [`IPageData`](/api/interface/ipagedata.md) to use Promise functions for computing-intensive operations.\n* Updated [`updatePage()`](/api/interface/idocument/index.md#updatepage) to allow updating a page with PDF page content that has annotations.\n* Updated [`addFonts()`](/api/namespace/ddv.md#static-addfonts) to return an array of the names of added fonts.\n* Updated [`DisplayTextConfig`](/api/interface/displaytextconfig.md) for new elements.\n* Removed the options parameter of [`getDefaultUiConfig()`](/api/namespace/ddv.md#static-getdefaultuiconfig).\n\n### Improvements\n\n* Fixed the ineffective quality parameter of [`saveToJpeg()`](/api/interface/idocument/index.md#savetojpeg) if a page is unmodified.\n* Improved cursor styles.\n* Improved the performance of resaving a large PDF file.\n   \n\n## 2.1 (12/03/2024)\n\nVersion 2.1 of Dynamsoft Document Viewer comes with a suite of exciting new features, improvements to existing features, and performance optimizations.\n\nDynamsoft Document Viewer now comes with **massively improved performance** for working with huge documents with a large number of high resolution images. Users can expect to load, edit, annotate, and export massive documents with ease.\n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/3OD6wJ60zaA?si=kfXo78tsRbTjhKYL\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>\n\n### New Features\n\n- Added `enableMagnifier`, which provides a corner magnifier in the [Edit Viewer]({{ site.api }}interface/editviewerconfig.html#enablemagnifier) and [Perspective Viewer]({{ site.api }}interface/perspectiveviewerconfig.html#enablemagnifier). This magnifier creates a zoomed-in view of the selected area to allow for more precise adjustments on touchscreen devices.\n\n- Added keyboard shortcuts for document management. These shortcuts are controlled by [`KeyboardInteractionConfig`]({{ site.api }}interface/keyboardinteractionconfig.html). All shortcuts are available for the Edit Viewer, and only the navigation and page selection shortcuts are available for the Browse Viewer:\n  - Undo/redo\n  - Copy/cut/paste\n  - Annotation/page selection\n  - Scrolling/navigation\n  - Cancel/delete\n\n- Added drag-and-drop image loading with the new `enableLoadSourceByDrag` configuration property for the [Edit]({{ site.api }}interface/editviewerconfig.html#enableloadsourcebydrag), [Browse]({{ site.api }}interface/browseviewerconfig.html#enableloadsourcebydrag), and [Perspective]({{ site.api }}interface/perspectiveviewerconfig.html#enableloadsourcebydrag) Viewers  (enabled by default).\n\n- The new [`setAnnotationDrawingStyle`]({{ site.api }}class/editviewer.html#setannotationdrawingstyle) method can now be used when creating annotations to set its default drawing style, for example, to set a custom image to use as the default stamp annotation.\n\n- Added the following flags to restrict annotation editing actions: [`noResize`]({{ site.api }}interface/annotationinterface/flags.html#noresize), [`noRotate`]({{ site.api }}interface/annotationinterface/flags.html#norotate), [`noMove`]({{ site.api }}interface/annotationinterface/flags.html#nomove). These flags are preserved when saving to PDF, and respected when importing into DDV from PDF.\n\n- Added a [`flattened`]({{ site.api }}class/annotation/rectangle.html#flattened) property getter/setter to annotation objects, which flattens the **individual** annotation onto the base image layer. This behavior is also preserved upon saving to PDF. For example, a rectangle annotation may be flattened with [`Rectangle.flattened = true`]({{ site.api }}class/annotation/rectangle.html#flattened).\n\n- Added informative task progression messaging using [`InfoObject`]({{ site.api }}interface/infoobject.html) for event listening. `InfoObject` provides different details for different types.\n\n### Improvements \n\n- Improved general performance.\n\n- Added support for processing much larger documents (over 1000 pages). See performance improvements compared to version 2.0:\n\n{% comment %}\n[Performance chart](/assets/imgs/version-2.1-release-performance-chart.png)\n\n\nWin10  i5-7400 CPU @ 3.00GHz\n\n| Document Type   | Number of Pages   | File Size   |    Load Time   |    Peak Memory Use for Loading  | Save Time  | Peak Memory Use for Saving                                            |\n| --------------- | ------------------| ------------|------------|------------|------------|------------------------------------------------------------ |\n|<td rowspan=\"3\">Image PDF[96DPI 2160x3840 convertMode ImageOnly]</td>| 100| 92.1MB  |1.3s |650MB|1.33s|780MB|\n|                                                  |500 |460MB  |4.5s|890MB|12.2s|1934MB|\n|                                                  |1000|921MB|9.7s|960MB|24.07s|4GB\n|<td rowspan=\"3\">Text PDF[A4 convertMode render]</td>                  |100|2.61MB|\t0.411s|330MB|0.290s|\t340MB|\n|                                                 |500|13.0MB|1.185s|446MB|\t2.427s|556MB|\n|                                                 |1000|26.1MB|2.777s|540MB|4.861s|590MB|\n{% endcomment %}\n  Win10  i5-7400 CPU @ 3.00GHz\n  <table>\n    <thead>\n      <tr>\n        <th>Document Type</th>\n        <th>Number of Pages</th>\n        <th>File Size</th>\n        <th>Load Time</th>\n        <th>Peak Memory Use for Loading</th>\n        <th>Save Time</th>\n        <th>Peak Memory Use for Saving</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td rowspan=\"3\">Image PDF[96DPI 2160x3840 convertMode ImageOnly]</td>\n        <td>100</td>\n        <td>92.1MB</td>\n        <td>1.3s</td>\n        <td>650MB</td>\n        <td>1.33s</td>\n        <td>780MB</td>\n      </tr>\n      <tr>\n        <td>500</td>\n        <td>460MB</td>\n        <td>4.5s</td>\n        <td>890MB</td>\n        <td>12.2s</td>\n        <td>1934MB</td>\n      </tr>\n      <tr>\n        <td>1000</td>\n        <td>921MB</td>\n        <td>9.7s</td>\n        <td>960MB</td>\n        <td>24.07s</td>\n        <td>4GB</td>\n      </tr>\n      <tr>\n        <td rowspan=\"3\">Text PDF[A4 convertMode render]</td>\n        <td>100</td>\n        <td>2.61MB</td>\n        <td>0.411s</td>\n        <td>330MB</td>\n        <td>0.290s</td>\n        <td>340MB</td>\n      </tr>\n      <tr>\n        <td>500</td>\n        <td>13.0MB</td>\n        <td>1.185s</td>\n        <td>446MB</td>\n        <td>2.427s</td>\n        <td>556MB</td>\n      </tr>\n      <tr>\n        <td>1000</td>\n        <td>26.1MB</td>\n        <td>2.777s</td>\n        <td>540MB</td>\n        <td>4.861s</td>\n        <td>590MB</td>\n      </tr>\n    </tbody>\n  </table>\n\n- The annotation toolbar and annotation palette in the Edit Viewer are now optional and can be toggled with [`toolbarConfig`]({{ site.api }}interface/annotationinterface/toolbarconfig.html) and [`paletteConfig`]({{ site.api }}interface/annotationinterface/paletteconfig.html) from [`annotationConfig`]({{ site.api }}interface/annotationconfig.html).\n\n- Removed page scrolling with mouse scroll wheel and touchscreen swiping in single page mode.\n\n- Improved page selection performance in the thumbnail gallery.\n\n## 2.0 (08/20/2024)\n\n**We are excited to introduce version 2.0, which focuses on adding a powerful new annotation feature. This release includes comprehensive support for various types of annotations, new APIs for managing annotations, and advanced UI capabilities for seamless interaction.**\n\nSupported Annotation Types:\n\n- [Rectangle]({{ site.api }}class/annotation/rectangle.html)\n- [Ellipse]({{ site.api }}class/annotation/ellipse.html)\n- [Polygon]({{ site.api }}class/annotation/polygon.html)\n- [Polyline]({{ site.api }}class/annotation/polyline.html)\n- [Line]({{ site.api }}class/annotation/line.html)\n- [Ink]({{ site.api }}class/annotation/ink.html)\n- [TextBox]({{ site.api }}class/annotation/textbox.html)\n- [TextTypewriter]({{ site.api }}class/annotation/texttypewriter.html)\n- [Stamp]({{ site.api }}class/annotation/stamp.html)\n\n### Built-in UI for Annotation\n\n#### Direct Annotation Operations in the UI\n\n- Add, select, and delete annotations\n- Drag, resize, and rotate selected annotations\n- Real-time editing of annotation styles using the palette\n\n#### New Built-in Elements\n\n- Added built-in elements to enhance UI configuration flexibility.\n\n### New APIs for Annotation\n\n- Added the namespace [Dynamsoft.DDV.annotationManager]({{ site.api }}class/annotationmanager.html) and APIs for annotation management:\n\n  - Create, delete, and retrieve annotations based on various conditions\n  - Adjust annotation hierarchy\n  - Handle events triggered by annotation operations\n\n- Added the property [annotationConfig]({{ site.api }}interface/editviewerconstructoroptions.html#annotationConfig) to EditViewerConstructorOptions for configuring the annotations in the viewer, including the toolbar, palette, and default annotation style:\n\n  - [annotationSelectionStyle]({{ site.api }}interface/annotationconfig.html#annotationSelectionStyle): Defines the style of annotation selection.\n  - [inkCreateDelay]({{ site.api }}interface/annotationconfig.html#inkCreateDelay): Specifies the delay for ink creation to support annotations created in multiple strokes.\n  - [showOnTopWhenSelected]({{ site.api }}interface/annotationconfig.html#showOnTopWhenSelected): Determines whether the selected annotation should be displayed on the top layer.\n\n- Added the method [`<static> addFonts()`]({{ site.api }}namespace/ddv.html#static-addfonts) to add fonts to the library.\n\n- Added the method [`selectAnnotations()`]({{ site.api }}class/editviewer.html#selectannotations) to select the specified annotation(s) on the current page.\n\n- Added the method [`getSelectedAnnotations()`]({{ site.api }}class/editviewer.html#getselectedannotations) to retrieve selected annotation(s).\n\n- Add properties [`mediaBox`]({{ site.api }}interface/idocument/pagedata.html#mediaBox) and [`cropBox`]({{ site.api }}interface/idocument/pagedata.html#cropBox) to [`PageData`]({{ site.api }}interface/idocument/pagedata.html) for accurate annotation position calculation.\n\n- Added the property [`annotationMode`]({{ site.api }}class/editviewer.html#annotationmode) to specify or return the annotation mode of the viewer.\n\n- Add the property `saveAnnotation` to the interfaces [`SavePngSettings`]({{ site.api }}interface/idocument/savepngsettings.html), [`SaveJpegSettings`]({{ site.api }}interface/idocument/savejpegsettings.html), or [`SaveTiffSettings`]({{ site.api }}interface/idocument/savetiffsettings.html) to determine whether annotations are saved as part of the image when calling [`document.saveToPng()`]({{ site.api }}interface/idocument/index.html#saveToPng), [`document.saveToJpeg()`]({{ site.api }}interface/idocument/index.html#saveToJpeg), or [`document.saveToTiff()`]({{ site.api }}interface/idocument/index.html#saveToTiff).\n\n- Added the property [`saveAnnotation`]({{ site.api }}interface/idocument/savepdfsettings.html#saveAnnotation) to the interface [`SavePdfSettings`]({{ site.api }}interface/idocument/savepdfsettings.html)  to configure whether annotations should be saved  when [`document.saveToPdf()`]({{ site.api }}interface/idocument/index.html#saveToPdf) is called.\n\n- Add the parameter [`defaultUiConfigOptions`]({{ site.api }}interface/defaultuiconfigoptions.html) to [`<static> getDefaultUiConfig()`]({{ site.api }}namespace/ddv.html#static-getdefaultuiconfig) to retrieve configurations including annotations.\n\n- Add the parameter [`printSettings`]({{ site.api }}interface/idocument/printsettings.html) to the [`document.print()`]({{ site.api }}interface/idocument/index.html#print)  to specify whether printable annotations should be included in the print.\n\n- Added the type `annotation` to [`ToolMode`]({{ site.api }}class/editviewer.html#toolMode) to enable a mode that allows annotations to be manipulated via the UI.\n\n- Added the type `annotationSelectionStyle` to [`EditViewerStyleName`]({{ site.api }}class/editviewer.html#getStyle) for retrieving or updating the annotation selection style.\n\n### Other New APIs\n\nAdditionally, we've optimized performance and added several new features to enhance the overall user experience.\n\n- Added the property [`password`]({{ site.api }}interface/idocument/savepdfsettings.html#password)  to the interface [`SavePdfSettings`]({{ site.api }}interface/idocument/savepdfsettings.html) for configuring the password of the PDF file to save when [`document.saveToPdf()`]({{ site.api }}interface/idocument/index.html#saveToPdf) is called.\n\n- Added the property [`imageScaleFactor`]({{ site.api }}interface/idocument/savepdfsettings.html#imageScaleFactor)  to the interface [`SavePdfSettings`]({{ site.api }}interface/idocument/savepdfsettings.html) for configuring the image scale factor of the PDF file to be saved when [`document.saveToPdf()`]({{ site.api }}interface/idocument/index.html#saveToPdf) is called.\n\n### Improved\n\n- Optimize the display effect of images in thumbnails.\n- Optimize the interactive experience of scaling.\n- Modified the type of [`PdfSource.renderOptions.renderAnnotations`]({{ site.api }}interface/idocument/pdfsource.html#renderAnnotations) to support reading annotations.\n- The method `openDocument()` supports the UID or the document object. This affects the `openDocument()` method in the [`EditViewer`]({{ site.api }}class/editviewer.html#openDocument), [`PerspectiveViewer`]({{ site.api }}class/perspectiveviewer.html#openDocument), [`CaptureViewer`]({{ site.api }}class/captureviewer.html#openDocument), and [`BrowseViewer`]({{ site.api }}class/browseviewer.html#openDocument) classes.\n\n### Changed\n\n- Change the length unit from pixel to point for functions and events related to cropping, for example, [`crop()`]({{ site.api }}class/editviewer.html#crop), [`getCropRect()`]({{ site.api }}class/editviewer.html#getCropRect), [`setCropRect()`]({{ site.api }}class/editviewer.html#setCropRect), [`cropRectDrawn`]({{ site.api }}class/editviewer.html#cropRectDrawn), [`cropRectDeleted`]({{ site.api }}class/editviewer.html#cropRectDeleted),[`cropRectModified`]({{ site.api }}class/editviewer.html#cropRectModified).\n- Change the units of the parameters pageWidth and pageHeight in the method [`insertBlankPage`]({{ site.api }}interface/idocument/index.html#insertblankpage) from inches to points.\n- The related date string format change shifts from format D:YYYYMMDDHHmmSS to D:YYYYMMDDHHmmSSOHH'mm'.\n\n## 1.1 (01/12/2024)\n\n### Improved\n\n- Optimized compatibility with browsers. [>> Detail]({{ site.gettingstarted }}sys_requirement.html#supported-browsers)\n\n### Added\n\n- Added the namespace [`Dynamsoft.DDV.Core`]({{ site.api }}namespace/ddv_core.html).\n\n- Added the property [`license`]({{ site.api }}namespace/ddv_core.html#license) to specify the license string.\n\n- Added the property [`engineResourcePath`]({{ site.api }}namespace/ddv_core.html#engineresourcepath) to specify the path leading to a folder containing the distributed WASM files.\n\n- Added the property [`deviceFriendlyName`]({{ site.api }}namespace/ddv_core.html#devicefriendlyname) to specify a human-readable name for the device which corresponds to its UUID.\n\n- Added the method [`loadWasm()`]({{ site.api }}namespace/ddv_core.html#loadwasm) to load WASM modules before initializing.\n\n- Added the method [`init()`]({{ site.api }}namespace/ddv_core.html#init) to initialize DDV.\n\n- Added the method [`insertBlankPage()`]({{ site.api }}interface/idocument/index.html#insertblankpage) to insert a blank page to the document.\n\n### Removed\n\nThe following API is removed.\n\n| API Name                  | Notes                                                        |\n| ------------------------- | ------------------------------------------------------------ |\n| `Dynamsoft.DDV.setConfig()` | Use [`Dynamsoft.DDV.Core.license`]({{ site.api }}namespace/ddv_core.html#license),  [`Dynamsoft.DDV.Core.engineResource`]({{ site.api }}namespace/ddv_core.html#engineresourcepath), [`Dynamsoft.DDV.Core.deviceFriendlyName`]({{ site.api }}namespace/ddv_core.html#devicefriendlyname), [`Dynamsoft.DDV.Core.init()`]({{ site.api }}namespace/ddv_core.html#init) instead. |\n\n## 1.0.0 (12/26/2023)\n\nDynamsoft Document Viewer (DDV) is a versatile SDK designed to offer a range of viewers for configuring and executing various document processing workflows.\n\n### Highlights\n\n#### Efficient Data Management\n\nOrganize, retrieve, and manage documents and pages efficiently: \n- Document Management: Document creation/deletion/merging, etc.\n- Page management: Pages in documents loading/saving/deleting/moving, etc.\n\n#### Various Viewers \n\nVarious kinds of viewers implement different document processing flows:\n- Edit Viewer: Edit the pages in document, such as, rotating, cropping, filtering, etc. and adjust the layout of the display.\n- Capture Viewer: Control camera, play video stream, and capture the images from camera.\n- Perspective Viewer: Do page boundaries manual adjustment & perspective transformation.\n- Browse Viewer: Display pages in multiple-mode, pages can be multiple selected.\n- Custom Viewer: No built-in UI or functionality, which is used for creating your own viewer.\n\n#### Flexible Customization\n\nBesides using the default user interface and viewer directly, developers can easily and flexibly customize them:\n- [User Interface](https://www.dynamsoft.com/document-viewer/docs/ui/index.html): Layout, elements\n- [Viewer](https://www.dynamsoft.com/document-viewer/docs/viewer/index.html): Styles, viewer properties\n\n#### Advanced Features\n\nDDV provides methods to access document boundaries detection and image filter algorithms.\n- [Image filter](https://www.dynamsoft.com/document-viewer/docs/features/advanced/imagefilter.html): Image filter algorithm which is used by Filter element in Edit Viewer.\n- [Document detection](https://www.dynamsoft.com/document-viewer/docs/features/advanced/documentdetect.html): Document boundaries detection algorithm which is used during capturing images. Recommend using [Dynamsoft Document Normalizer](https://www.dynamsoft.com/document-normalizer/docs/web/programming/javascript/api-reference/document-normalizer-module.html?lang=javascript).\n",
-      "breadcrumb": "Release Notes"
-    },
-    
-    {
-      "title": "Upgrade Guide Dynamsoft Document Viewer Documentation",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/upgrade-guide/",
-      "content": "# Upgrade Guide\n\nUpgrading Dynamsoft Document Viewer from an old version to the latest version (v3.x as of now) is straightforward. You need to pay attention to the following changes:\n\n* Changes of APIs\n* Changes of [`UIConfig`](/api/interface/uiconfig.md)\n\n\nThere are some code snippets that are frequently used and we will talk about the changes you have to make.\n\n## Initialization of Edit Viewer\n\nIn v2.x, you can use an additional options parameter to enable the annotation icon in the default UI.\n\n```js\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"container\",\n    uiConfig: Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\", {includeAnnotationSet: true}),\n});\n```\n\nIn v3.x, the option is removed and the annotation icon is included in the default UI. So you can just initialize it with the following code:\n\n```js\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"container\"\n});\n```\n\n## Default UI Config\n\nThe default UI elements may be different across different versions. Check out [this post](/ui/default_ui.md) to learn about the default configs.\n\nYou can try to unify the UI across versions by specifying the [`UIConfig`](/api/interface/uiconfig.md). But pay attention to supported [elements](/ui/default_elements.md) of different versions.\n\n## Getting the Page Data\n\nBefore v3.x, [`getPageData()`](/api/interface/idocument/index.md#getpagedata) returns a promise object, which was time consuming as it required getting all the image blobs. In v3.x, it directly returns an [`IPageData`](/api/interface/ipagedata.md) object and you can retrieve image blobs with its functions.\n",
-      "breadcrumb": "Upgrade Guide"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Annotation API Reference - Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/index.html",
-      "content": "## Annotation\n\nAnnotation has fourteen main classes:\n\n- [Rectangle](/api/class/annotation/rectangle.md)\n- [Ellipse](/api/class/annotation/ellipse.md)\n- [Polygon](/api/class/annotation/polygon.md)\n- [Polyline](/api/class/annotation/polyline.md)\n- [Line](/api/class/annotation/line.md)\n- [Ink](/api/class/annotation/ink.md)\n- [TextBox](/api/class/annotation/textbox.md)\n- [TextTypewriter](/api/class/annotation/texttypewriter.md)\n- [Stamp](/api/class/annotation/stamp.md)\n- [Highlight](/api/class/annotation/highlight.md)\n- [Underline](/api/class/annotation/underline.md)\n- [Strikeout](/api/class/annotation/strikeout.md)\n- [Incomplete](/api/class/annotation/incomplete.md)\n- [Unknown](/api/class/annotation/unknown.md)\n\n",
-      "breadcrumb": "EditViewer Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/",
-      "content": "# Class\n\nDynamsoft Document Viewer JavaScript library has two main categories of classes: one is under the namespace Dynamsoft.DDV, and the other is related to annotations.\n\n## Dynamsoft.DDV Classes\n\nUnder the namespace Dynamsoft.DDV, Dynamsoft Document Viewer JavaScript library contains seven primary classes:\n\n- [DocumentManager](/api/class/documentmanager.md)\n- [AnnotationManager](/api/class/annotationmanager.md)\n- [EditViewer](/api/class/editviewer.md)\n- [CaptureViewer](/api/class/captureviewer.md)\n- [PerspectiveViewer](/api/class/perspectiveviewer.md)\n- [BrowseViewer](/api/class/browseviewer.md)\n- [CustomViewer](/api/class/customviewer.md)\n\n## Annotation\n\nAnnotation has the following main classes:\n\n\n- [Rectangle](/api/class/annotation/rectangle.md)\n- [Ellipse](/api/class/annotation/ellipse.md)\n- [Polygon](/api/class/annotation/polygon.md)\n- [Polyline](/api/class/annotation/polyline.md)\n- [Line](/api/class/annotation/line.md)\n- [Ink](/api/class/annotation/ink.md)\n- [TextBox](/api/class/annotation/textbox.md)\n- [TextTypewriter](/api/class/annotation/texttypewriter.md)\n- [Highlight](/api/class/annotation/highlight.md)\n- [Underline](/api/class/annotation/underline.md)\n- [Strikeout](/api/class/annotation/strikeout.md)\n- [Stamp](/api/class/annotation/stamp.md)\n- [Incomplete](/api/class/annotation/incomplete.md)\n- [Unknown](/api/class/annotation/unknown.md)\n",
-      "breadcrumb": "EditViewer Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Annotation Interfaces",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/index.html",
-      "content": "# Annotation Interfaces\n\n## Options\n\n- [`RectAnnotationOptions`](/api/interface/annotationinterface/rectannotationoptions.md)\n- [`EllipseAnnotationOptions`](/api/interface/annotationinterface/ellipseannotationoptions.md)\n- [`PolygonAnnotationOptions`](/api/interface/annotationinterface/polygonannotationoptions.md)\n- [`PolylineAnnotationOptions`](/api/interface/annotationinterface/polylineannotationoptions.md)\n- [`LineAnnotationOptions`](/api/interface/annotationinterface/lineannotationoptions.md)\n- [`InkAnnotationOptions`](/api/interface/annotationinterface/inkannotationoptions.md)\n- [`TextBoxAnnotationOptions`](/api/interface/annotationinterface/textboxannotationoptions.md)\n- [`TextTypewriterAnnotationOptions`](/api/interface/annotationinterface/texttypewriterannotationoptions.md)\n- [`StampAnnotationOptions`](/api/interface/annotationinterface/stampannotationoptions.md)\n- [`HighlightAnnotationOptions`](/api/interface/annotationinterface/highlightannotationoptions.md)\n- [`UnderlineAnnotationOptions`](/api/interface/annotationinterface/underlineannotationoptions.md)\n- [`StrikeoutAnnotationOptions`](/api/interface/annotationinterface/strikeoutannotationoptions.md)\n\n## Styles\n\n- [`RectangleStyle`](/api/interface/annotationinterface/rectanglestyle.md)\n- [`EllipseStyle`](/api/interface/annotationinterface/ellipsestyle.md)\n- [`PolygonStyle`](/api/interface/annotationinterface/polygonstyle.md)\n- [`PolylineStyle`](/api/interface/annotationinterface/polylinestyle.md)\n- [`LineStyle`](/api/interface/annotationinterface/linestyle.md)\n- [`InkStyle`](/api/interface/annotationinterface/inkstyle.md)\n- [`TextBoxStyle`](/api/interface/annotationinterface/textboxstyle.md)\n- [`TextTypewriterStyle`](/api/interface/annotationinterface/texttypewriterstyle.md)\n- [`StampStyle`](/api/interface/annotationinterface/stampstyle.md)\n- [`HighlightStyle`](/api/interface/annotationinterface/highlightstyle.md)\n- [`UnderlineStyle`](/api/interface/annotationinterface/underlinestyle.md)\n- [`StrikeoutStyle`](/api/interface/annotationinterface/strikeoutstyle.md)\n\n## Other\n\n- [`Flags`](/api/interface/annotationinterface/flags.md)\n- [`Point`](/api/interface/annotationinterface/point.md)\n- [`TextContent`](/api/interface/annotationinterface/textcontent.md)\n- [`ToolbarConfig`](/api/interface/annotationinterface/toolbarconfig.md)\n- [`PaletteConfig`](/api/interface/annotationinterface/paletteconfig.md)\n- [`AnnotationToolbarButton`](/api/interface/annotationinterface/annotationtoolbarbutton.md)\n\n",
-      "breadcrumb": "Annotation Interfaces"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface IDocument",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/index.html",
-      "content": "# IDocument\n\nThis interface that defines a document object.\n\n## Members\n\n| API Name            | Description                                                  |\n| ------------------- | ------------------------------------------------------------ |\n| [`name`](#name)                | Return the name of current document.                         |\n| [`author`](#author)              | Return the author of current document.                       |\n| [`creationDate`](#creationdate)       | Return the creation date of current document.                |\n| [`uid`](#uid)                 | Return the docUid of current document.                       |\n| [`pages`](#pages)               | Return the array of pageUids of current document.                        |\n| [`loadSource()`](#loadsource)        | Load file(s) to current document.                            |\n| [`getPageData()`](#getpagedata)       | Get the data of specified page.                              |\n| [`updatePage()`](#updatepage)       | Update a page specified by the pageUid with the new data.    |\n| [`setPageCustomData()`](#setpagecustomdata) | Set the custom data to the specified page.                   |\n| [`getPageCustomData()`](#getpagecustomdata) | Get the custom data of the specified page.                   |\n| [`deletePages()`](#deletepages)       | Delete the specified pages from current document.            |\n| [`deleteAllPages()`](#deleteallpages)    | Delete all pages in current document.                        |\n| [`movePages()`](#movepages)         | Move specified page(s) to the target position in current document. |\n| [`switchPage()`](#switchpage)        | Swap the position of two pages in current document.          |\n| [`insertBlankPage()`](#insertblankpage)          | Insert a blank page to current document. |\n| [`isPageModified()`](#ispagemodified)          | Check if a page is modified. |\n| [`rename()`](#rename)            | Rename current document.                                     |\n| [`saveToPng()`](#savetopng)         | Save specified page or current page in current document to a PNG file. |\n| [`saveToJpeg()`](#savetojpeg)        | Save specified page or current page in current document to a JPEG file. |\n| [`saveToTiff()`](#savetotiff)        | Save specified page(s) or all pages in current document to a TIFF file. |\n| [`saveToPdf()`](#savetopdf)        | Save specified page(s) or all pages in current document to a PDF file. |\n| [`print()`](#print)             | Use the browser’s built-in print feature to print the specified image(s). |\n| [`createTextSearcher()`](#createtextsearcher)             | Create a text searcher. |\n\n### name\n\nReturn the name of current document.\n\n**Syntax**\n\n```typescript\nreadonly name: string;\n```\n\n**Remark**\n\n- It can be set while creating the document by using [`createDocument()`]({{ site.api }}class/documentmanager.html#createdocument). If it is not set, return the name which is auto generated.\n\n### author\n\nReturn the author of current document.\n\n**Syntax**\n\n```typescript\nreadonly author: string;\n```\n\n**Remark**\n\n- It can be set while creating the document by using [`createDocument()`]({{ site.api }}class/documentmanager.html#createdocument). If it is not set, return `''`.\n\n### creationDate\n\nReturn the creation date of current document.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- It can be set while creating the document by using [`createDocument()`]({{ site.api }}class/documentmanager.html#createdocument). If it is not set, return the actual creation date of the document.\n\n### uid\n\nReturn the docUid of current document.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n### pages\n\nReturn the array of pageUids of current document. \n\n**Syntax**\n\n```typescript\nreadonly pages: string[];\n```\n\n**Remark**\n\n- Returns an array of pageUids.\n\n**Code Snippet**\n\n```typescript\nconst firstDoc = Dynamsoft.DDV.documentManager.createDocument({\n    name: \"first_document\",\n    author: \"DDV\",\n    creationDate: \"D:20230101085959-08'00'\",\n    });\n\nconst docName = firstDoc.name;\nconst docAuthor = firstDoc.author;\nconst docCreationDate = firstDoc.creationDate;\nconst docUid = firstDoc.uid;\nconst docPages = firstDoc.pages;\n```\n\n\n### loadSource()\n\nLoad file(s) to current document.\n\n**Syntax**\n\n```typescript\nloadSource(fileData: Blob | Blob[], index?: number): Promise<string[]>;\nloadSource(sources: Source | PdfSource | (Source | PdfSource)[], index?: number): Promise<string[]>;\n```\n\n**Parameters**\n\n`fileData`: The blob of the file to be loaded.\n\n`sources`: The target files, it could be a file or a file array. Please refer to [`Source`]({{ site.api }}interface/idocument/source.html). `Source` can be extended to [`PdfSource`]({{ site.api }}interface/idocument/pdfsource.html).\n\n`index`: The position in the document where the file(s) will be loaded to. If not set or out of the maximum range, the loaded file(s) will be added from the end of the document.\n\n**Return Value**\n\nA Promise object which will be resolved with the page uids of the loaded pages when the file(s) are successfully loaded.\n\n**Code Snippet**\n\n```typescript\nconst firstDoc = Dynamsoft.DDV.documentManager.createDocument({\n    name: \"first_document\",\n    author: \"DDV\",\n    creationDate: \"D:20230101085959-08'00'\",\n    });\nconst source = {\n    fileData: /*sampleBlob*/;\n};\nawait firstDoc.loadSource([source]);\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------                               \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                               \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match.                                 \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license. \n -80050 | DDV.Core.init() has not been set up yet.  \n -80051 | DDV.Core.init() has not been completed.   \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80200 | File type is not supported. \n -80202 | Failed to read the PDF file because it's encrypted and the correct password is not provided.\n -80203 | Failed to read some annotations because they are not supported by Dynamsoft Document Viewer so far.\n -80204 | PDFs containing XFA (XML Forms Architecture) forms are not supported.\n\n### getPageData()\n\nGet the data of specified page.\n\n**Syntax**\n\n```typescript\ngetPageData(pageUid: string): IPageData;\n```\n\n**Parameters**\n\n`pageUid`: The uid of the page.\n\n**Return Value**\n\n[`IPageData`](/api/interface/ipagedata.md) object.\n\n**Code Snippet**\n\n```typescript\nconst pageData = firstDoc.getPageData(firstDoc.pages[0]);\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80105 | *XXX(API)*: The specified page(s) do not exist.\n\n\n### updatePage()\n\nUpdate a page specified by the pageUid with the new data.\n\n**Syntax**\n\n```typescript\nupdatePage(pageUid: string, source: UpdatedSource | UpdatedPdfSource): Promise<boolean>;\n```\n\n**Parameters**\n\n`pageUid`: The uid of the page to be updated.\n\n`source`: The new data. Please refer to [`UpdatedSource`](/api/interface/updatedsource.md) and [`UpdatedPdfSource`](/api/interface/updatedpdfsource.md).\n\n**Return Value**\n\nA Promise object which will be resolved with a boolean value.\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst source = {\n    fileIndex: 1, // Using the second page of the new multi-page file, such as PDF or TIFF.\n    fileData: /*sample blob*/\n};\n\nawait firstDoc.updatePage(firstDoc.pages[0], source);\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                               \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match.                                 \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license. \n -80050 | DDV.Core.init() has not been set up yet.  \n -80051 | DDV.Core.init() has not been completed.   \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80200 | File type is not supported. \n -80202 | Failed to read the PDF file because it's encrypted and the correct password is not provided.\n -80203 | Failed to read some annotations because they are not supported by Dynamsoft Document Viewer so far.\n -80204 | PDFs containing XFA (XML Forms Architecture) forms are not supported.\n\n\n### setPageCustomData()\n\nSet the custom data to the specified page.\n\n**Syntax**\n\n```typescript\nsetPageCustomData(pageUid: string, data: any): Promise<boolean>;\n```\n\n**Parameters**\n\n`pageUid`: The uid of the page.\n\n`data`: The custom data to set.\n\n**Return Value**\n\nA Promise object which will be resolved with a boolean value.\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst customData ={\n    hasBarcode: true; // sample custom data\n};\nawait firstDoc.setPageCustomData(firstDoc.pages[0], customData);\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80105 | *XXX(API)*: The specified page(s) do not exist.\n\n### getPageCustomData()\n\nGet the custom data of the specified page.\n\n**Syntax**\n\n```typescript\ngetPageCustomData(pageUid: string): Promise<any>;\n```\n\n**Parameters**\n\n`pageUid`: The uid of the page.\n\n**Return Value**\n\nA Promise object which will be resolved with the custom data.\n\n**Code Snippet**\n\n```typescript\nconst customdata = await firstDoc.getPageCutomData(firstDoc.pages[0]);\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80105 | *XXX(API)*: The specified page(s) do not exist.\n\n### deletePages()\n\nDelete the specified pages from current document.\n\n**Syntax**\n\n```typescript\ndeletePages(indices: number[]): boolean;\n```\n\n**Parameters**\n\n`indices`: The array of page indices which will be removed. \n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Delete the first and second page.\nfirstDoc.deletePages([0,1]);\n```\n\n**Warning**\n\n Error Code  | Error Message                                   | API return value     \n-------------|------------------------------------------------|---------------     \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n\n### deleteAllPages()\n\nDelete all pages in current document.\n\n**Syntax**\n\n```typescript\ndeleteAllPages(): boolean;\n```\n\n**Parameters**\n\nNone.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Delete all pages from the doc.\nfirstDoc.deleteAllPages();\n```\n\n### movePages()\n\nMove specified page(s) to the target position in current document.\n\n**Syntax**\n\n```typescript\nmovePages(indices: number[], insertBeforeIndex?: number): void;\n```\n\n**Parameters**\n\n`indices`: The array of page(s) indices to be moved.\n\n`insertBeforeIndex`: Moved pages will be placed before this index. If not set or out of the maximum range, the specified page(s) will be moved after the last page.\n\n**Code Snippet**\n\n```typescript\n// Move the second, fourth, sixth pages to the begining of the doc\n// The moved pages are in (original sixth, fourth, second) order.\nfirstDoc.movePages([5,3,1], 0);\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n\n### switchPage()\n\nSwap the position of two pages in current document.\n\n**Syntax**\n\n```typescript\nswitchPage(oneIndex: number, anotherIndex: number): void;\n```\n\n**Parameters**\n\n`oneIndex`: The index of one page.\n\n`anotherIndex`: The index of another page.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Switch the third and sixth pages.\nfirstDoc.switchPage(2, 5);\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.    \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n### insertBlankPage()\n\nInsert a blank page to current document.\n\n**Syntax**\n\n```typescript\ninsertBlankPage(\n  pageWidth: number;\n  pageHeight: number;\n  insertBeforeIndex?: number;\n):string;\n```\n\n**Parameters**\n\n`pageWidth`: The page width of the blank page to insert. The unit is point.\n\n`pageHeight`: The page height of the blank page to insert. The unit is point. \n\n`insertBeforeIndex`: The blank page will be inserted before this index. If not set or out of the maximum range, the blank page will be added after the last page.\n\n*Common page sizes:*\n\n Page size | pageWidth (pt) | pageHeight (pt) \n-----------|------------------|-------------------\n Letter    | 612              | 792                \n Legal     | 612              | 1008                \n A4        | 597.6              | 842.4              \n A3        | 842.4             | 1188             \n\n**Return value**\n\nThe page uid of the inserted blank page.\n\n**Exception**\n\n Error Code  | Error Message                                        \n-------------|-----------------------------------------------------\n -80050      | DDV.Core.init() has not been set up yet.  \n -80051      | DDV.Core.init() has not been completed.\n -80100      | *XXX(API)*: *XXX(ParameterName)* is invalid. \n -80101      | *XXX(API)*: *XXX(ParameterName)* is out of range. \n -80102      | *XXX(API)*: *XXX(ParameterName)* is missing.\n\n### isPageModified()\n\nCheck if a page is modified.\n\n**Syntax**\n\n```typescript\nisPageModified(index: number): boolean;\n```\n\n**Parameters**\n\n`index`: The page index.\n\n**Return value**\n\nA boolean value which indicates whether the page is modified.\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.    \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n### rename()\n\nRename current document.\n\n**Syntax**\n\n```typescript\nrename(name: string): boolean;\n```\n\n**Parameters**\n\n`name`: The new name of current document.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst firstDoc = Dynamsoft.DDV.documentManager.createDocument({\n    name: \"first_document\",\n    author: \"DDV\",\n    creationDate: \"D:20230101085959-08'00'\",\n    });\nfirstDoc.rename(\"my_doc\");\n```\n\n**Warning**\n\n Error Code  | Error Message                                  | API return value     \n--------|-----------------------------------------------------|---------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n\n### saveToPng()\n\nSave specified page or current page in current document to a PNG file.\n\n**Syntax**\n\n```typescript\nsaveToPng(index: number, savePngSettings?: SavePngSettings): Promise<Blob>;\n```\n\n**Parameters**\n\n`index`: Specify index of the page to be saved.\n\n`savePngSettings`: Specify the save settings. Please refer to [`SavePngSettings`]({{ site.api }}interface/idocument/savepngsettings.html).\n\n**Return Values**\n\nA Promise object which will be resolved with `Blob` of the saved image.\n\n**Code Snippet**\n\n```typescript\n// Save the first page to a PNG file.\nconst result = await firstDoc.saveToPng(0);\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------                                    \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                               \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match.                                 \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license.  \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.    \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n### saveToJpeg()\n\nSave specified page or current page in current document to a JPEG file.\n\n**Syntax**\n\n```typescript\nsaveToJpeg(index: number, saveJpegSettings?: SaveJpegSettings): Promise<Blob>;\n```\n\n**Parameters**\n\n`index`: Specify index of the page to be saved.\n\n`saveJpegSettings`: Specify the save settings. Please refer to [`SaveJpegSettings`]({{ site.api }}interface/idocument/savejpegsettings.html).\n\n**Return Values**\n\nA Promise object which will be resolved with `Blob` of the saved image.\n\n**Code Snippet**\n\n```typescript\n// Save the first page as a JPEG file with a JPEG compression quality of 100, and the annotations are saved as part of the JPEG.\nconst settings = {\n    quality: 100,\n    saveAnnotation: false,\n};\nconst result = await firstDoc.saveToJpeg(0, settings);\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------                                          \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                               \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match.                                 \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license.  \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.    \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n### saveToTiff()\n\nSave specified page(s) or all pages in current document to a TIFF file. \n\n**Syntax**\n\n```typescript\nsaveToTiff(indices: number[], saveTiffSettings?: SaveTiffSettings): Promise<Blob>;\nsaveToTiff(saveTiffSettings?: SaveTiffSettings): Promise<Blob>;\n```\n\n**Parameters**\n\n`indices`: The array of page indices which will be saved. If not set, will save all pages to a TIFF file by default.\n\n`saveTiffSettings`: Specify the save settings. Please refer to [`SaveTiffSettings`]({{ site.api }}interface/idocument/savetiffsettings.html). \n\n**Return Values**\n\nA Promise object which will be resolved with `Blob` of the saved TIFF file.\n\n**Code Snippet**\n\n```typescript\n// Set custom tag\nconst customTag1 = {\n    id: 700,\n    content: \"Created By Dynamsoft\",\n    contentIsBase64: false,\n}\n\n// Set SaveTiffSettings\nconst tiffSettings = {\n    customTag: [customTag1],\n    compression: \"tiff/auto\",\n}\n\n// Save the fifth, sixth, seventh pages to a multi-page TIFF file with the specified tiff settings.\nconst result1 = await firstDoc.saveToTiff([4,5,6], tiffSettings);\n\n// Save the whole document to a multi-page TIFF file with the specified tiff settings.\nconst result2 = await firstDoc.saveToTiff(tiffSettings);\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------                                      \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                               \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match.                                 \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license.  \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80305 | There is no image in the current document.\n\n### saveToPdf()\n\nSave specified page(s) or all pages in current document to a PDF file.\n\n**Syntax**\n\n```typescript\nsaveToPdf(indices: number[], savePdfSettings?: SavePdfSettings): Promise<Blob>;\nsaveToPdf(savePdfSettings?: SavePdfSettings): Promise<Blob>;\n```\n\n**Parameters**\n\n`indices`: The array of page indices which will be saved. \n\n`savePdfSettings`: Specify the save settings. Please refer to [`SavePdfSettings`]({{ site.api }}interface/idocument/savepdfsettings.html). If not set, will save all pages to a PDF file by default.\n\n**Return Values**\n\nA Promise object which will be resolved with `Blob` of the saved PDF file.\n\n**Code Snippet**\n\n```typescript\nconst pdfSettings = {\n    author: \"Dynamsoft\",\n    compression: \"pdf/jpeg\",\n    pageType: \"page/a4\",\n    creator: \"DDV\",\n    creationDate: \"D:20230101085959-08'00'\",\n    keyWords: \"samplepdf\",\n    modifiedDate: \"D:20230101090101-08'00'\",\n    producer: \"Dynamsoft Document Viewer\",\n    subject: \"SamplePdf\",\n    title: \"SamplePdf\",\n    version: \"1.5\",\n    quality: 90,\n    password: \"dynamsoft\",\n    saveAnnotation: \"annotation\",\n    imageScaleFactor: 1,\n};\n\n// Save the fifth, sixth, seventh pages to a multi-page PDF file with the specified pdf settings.\nconst result1 = await firstDoc.saveToPdf([4,5,6], pdfSettings);\n\n// Save the whole document to a multi-page PDF file with the specified pdf settings.\nconst result2 = await firstDoc.saveToPdf(pdfSettings);\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------                                     \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                               \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match.                                 \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license.  \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80305 | There is no image in the current document.\n -80318 | The document contains unsupported fonts, which may result in font loss after saving.\n\n### print()\n\nUse the browser’s built-in print feature to print the specified image(s) and whether printable annotations can be printed\n\n**Syntax**\n\n```typescript\nprint(printSettings?: PrintSettings);\nprint(indices: number[], printSettings?: PrintSettings);\n```\n\n**Parameters**\n\n`indices`: The array of page indices which will be printed. If not set, will export all pages to the browser’s built-in print window.\n\n`printSettings`: Specify the print settings. Please refer to [`PrintSettings`]({{ site.api }}interface/idocument/printsettings.html).\n\n**Return Values**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n---\n\n**Code Snippet**\n\n```typescript\n// To print the whole doc pages\nfirstDoc.print();\n\n// To print the second and third pages\nfirstDoc.print([1,2]);\n\n// To print the whole doc pages, including printable annotations.\nfirstDoc.print({\n    printAnnotation: true;\n});\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80305 | There is no image in the current document.\n\n### createTextSearcher()\n\nCreate a text searcher.\n\n**Syntax**\n\n```typescript\ncreateTextSearcher(text: string, options?: SearchTextOptions): IDocTextSearcher;\n```\n\n**Parameters**\n\n`text`: Text to search\n\n`options`: Please refer to [`SearchTextOptions`](/api/interface/searchtextoptions.md).\n\n**Return Values**\n\nAn [`IDocTextSearcher`](/api/interface/idocument/idoctextsearcher.md) object.\n\n---\n\n**Code Snippet**\n\n```typescript\nconst searcher = firstDoc.createTextSearcher(\"text\",{caseSensitive:false})\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n",
-      "breadcrumb": "Interface IDocument"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Style Interfaces",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/styleinterface/index.html",
-      "content": "# Style Interfaces\n\n| Style Name           | Style Interface                                              |\n| -------------------- | ------------------------------------------------------------ |\n| `pageStyle`          | [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html) |\n| `currentPageStyle`   | [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html) |\n| `selectedPageStyle`  | [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html) |\n| `hoveredPageStyle`   | [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html) |\n| `placeholderStyle`   | [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html) |\n| `pageNumberStyle`    | [`PageNumberStyle`]({{ site.api }}interface/styleinterface/pagenumberstyle.html) |\n| `checkboxStyle`      | [`CheckboxStyle`]({{ site.api }}interface/styleinterface/checkboxstyle.html) |\n| `canvasStyle`        | [`CanvasStyle`]({{ site.api }}interface/styleinterface/canvasstyle.html) |\n| `quadSelectionStyle` | [`QuadSelectionStyle`]({{ site.api }}interface/styleinterface/quadselectionstyle.html) |\n| `annotationSelectionStyle`| [`AnnotationSelectionStyle`]({{ site.api }}interface/styleinterface/annotationselectionstyle.html) |",
-      "breadcrumb": "Style Interfaces"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/index.html",
-      "content": "# API Reference\r\n\r\n## Namespaces\r\n\r\n- [`Dynamsoft.DDV`]({{ site.api }}namespace/ddv.html)\r\n- [`Dynamsoft.DDV.Core`]({{ site.api }}namespace/ddv_core.html)\r\n- [`Dynamsoft.DDV.Elements`]({{ site.api }}namespace/ddv_elements.html)\r\n\r\n## Classes\r\n\r\n- Dynamsoft.DDV\r\n    - [DocumentManager]({{ site.api }}class/documentmanager.html)\r\n    - [EditViewer]({{ site.api }}class/editviewer.html)\r\n    - [CaptureViewer]({{ site.api }}class/captureviewer.html)\r\n    - [PerspectiveViewer]({{ site.api }}class/perspectiveviewer.html)\r\n    - [BrowseViewer]({{ site.api }}class/browseviewer.html)\r\n    - [CustomViewer]({{ site.api }}class/customviewer.html)\r\n    - Advanced\r\n        - [ImageFilter]({{ site.api }}class/advanced/imagefilter.html)\r\n        - [DocumentDetect]({{ site.api }}class/advanced/documentdetect.html)\r\n\r\n- Annotation\r\n    - [Rectangle]({{ site.api }}class/annotation/rectangle.html)\r\n    - [Ellipse]({{ site.api }}class/annotation/ellipse.html)\r\n    - [Polygon]({{ site.api }}class/annotation/polygon.html)\r\n    - [Polyline]({{ site.api }}class/annotation/polyline.html)\r\n    - [Line]({{ site.api }}class/annotation/line.html)\r\n    - [Ink]({{ site.api }}class/annotation/ink.html)\r\n    - [TextBox]({{ site.api }}class/annotation/textbox.html)\r\n    - [TextTypewriter]({{ site.api }}class/annotation/texttypewriter.html)\r\n    - [Stamp]({{ site.api }}class/annotation/stamp.html) \r\n    - [Highlight](/api/class/annotation/highlight.md) \r\n    - [Underline](/api/class/annotation/underline.md)\r\n    - [Strikeout](/api/class/annotation/strikeout.md) \r\n    - [Incomplete]({{ site.api }}class/annotation/incomplete.html)\r\n    - [Unknown]({{ site.api }}class/annotation/unknown.html) \r\n\r\n\r\n## Interfaces\r\n\r\n- [`IDocument`]({{ site.api }}interface/idocument/index.html)\r\n    - [`Source`]({{ site.api }}interface/idocument/source.html)\r\n    - [`PdfSource`]({{ site.api }}interface/idocument/pdfsource.html)\r\n    - [`SavePngSettings`]({{ site.api }}interface/idocument/savepngsettings.html)\r\n    - [`SaveJpegSettings`]({{ site.api }}interface/idocument/savejpegsettings.html)\r\n    - [`SaveTiffSettings`]({{ site.api }}interface/idocument/savetiffsettings.html)\r\n    - [`SavePdfSettings`]({{ site.api }}interface/idocument/savepdfsettings.html)\r\n    - [`CustomTag`]({{ site.api }}interface/idocument/customtag.html)\r\n    - [`PrintSettings`]({{ site.api }}interface/idocument/printsettings.html)\r\n    - [`IDocTextSearcher`](/api/interface/idocument/idoctextsearcher.md)\r\n\r\n- Style Interfaces\r\n\r\n    | Style Name           | Style Interface                                              |\r\n    | -------------------- | ------------------------------------------------------------ |\r\n    | `pageStyle`          | [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html) |\r\n    | `currentPageStyle`     | [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html) |\r\n    | `selectedPageStyle`    | [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html) |\r\n    | `hoveredPageStyle`     | [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html) |\r\n    | `placeholderStyle`     | [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html) |\r\n    | `pageNumberStyle`      | [`PageNumberStyle`]({{ site.api }}interface/styleinterface/pagenumberstyle.html) |\r\n    | `checkboxStyle`        | [`CheckboxStyle`]({{ site.api }}interface/styleinterface/checkboxstyle.html) |\r\n    | `canvasStyle`        | [`CanvasStyle`]({{ site.api }}interface/styleinterface/canvasstyle.html) |\r\n    | `quadSelectionStyle` | [`QuadSelectionStyle`]({{ site.api }}interface/styleinterface/quadselectionstyle.html) |\r\n    | `annotationSelectionStyle`| [`AnnotationSelectionStyle`]({{ site.api }}interface/styleinterface/annotationselectionstyle.html) |\r\n\r\n- Annotation Interfaces\r\n    - [`RectAnnotationOptions`]({{ site.api }}interface/annotationinterface/rectannotationoptions.html)\r\n    - [`EllipseAnnotationOptions`]({{ site.api }}interface/annotationinterface/ellipseannotationoptions.html)\r\n    - [`PolygonAnnotationOptions`]({{ site.api }}interface/annotationinterface/polygonannotationoptions.html)\r\n    - [`PolylineAnnotationOptions`]({{ site.api }}interface/annotationinterface/polylineannotationoptions.html)\r\n    - [`LineAnnotationOptions`]({{ site.api }}interface/annotationinterface/lineannotationoptions.html)\r\n    - [`InkAnnotationOptions`]({{ site.api }}interface/annotationinterface/inkannotationoptions.html)\r\n    - [`TextBoxAnnotationOptions`]({{ site.api }}interface/annotationinterface/textboxannotationoptions.html)\r\n    - [`TextTypewriterAnnotationOptions`]({{ site.api }}interface/annotationinterface/texttypewriterannotationoptions.html)\r\n    - [`StampAnnotationOptions`]({{ site.api }}interface/annotationinterface/stampannotationoptions.html)\r\n    - [`HighlightAnnotationOptions`](/api/interface/annotationinterface/highlightannotationoptions.md)\r\n    - [`UnderlineAnnotationOptions`](/api/interface/annotationinterface/underlineannotationoptions.md)\r\n    - [`StrikeoutAnnotationOptions`](/api/interface/annotationinterface/strikeoutannotationoptions.md)\r\n    - [`Flags`]({{ site.api }}interface/annotationinterface/flags.html)\r\n    - [`Point`]({{ site.api }}interface/annotationinterface/point.html)\r\n    - [`TextContent`]({{ site.api }}interface/annotationinterface/textcontent.html)\r\n    - [`RectangleStyle`]({{ site.api }}interface/annotationinterface/rectanglestyle.html)\r\n    - [`EllipseStyle`]({{ site.api }}interface/annotationinterface/ellipsestyle.html)\r\n    - [`PolygonStyle`]({{ site.api }}interface/annotationinterface/polygonstyle.html)\r\n    - [`PolylineStyle`]({{ site.api }}interface/annotationinterface/polylinestyle.html)\r\n    - [`LineStyle`]({{ site.api }}interface/annotationinterface/linestyle.html)\r\n    - [`InkStyle`]({{ site.api }}interface/annotationinterface/inkstyle.html)\r\n    - [`TextBoxStyle`]({{ site.api }}interface/annotationinterface/textboxstyle.html)\r\n    - [`TextTypewriterStyle`]({{ site.api }}interface/annotationinterface/texttypewriterstyle.html)\r\n    - [`StampStyle`]({{ site.api }}interface/annotationinterface/stampstyle.html)\r\n    - [`HighlightStyle`](/api/interface/annotationinterface/highlightstyle.md)\r\n    - [`UnderlineStyle`](/api/interface/annotationinterface/underlinestyle.md)\r\n    - [`StrikeoutStyle`](/api/interface/annotationinterface/strikeoutstyle.md)\r\n    - [`ToolbarConfig`]({{ site.api }}interface/annotationinterface/toolbarconfig.html)\r\n    - [`PaletteConfig`]({{ site.api }}interface/annotationinterface/paletteconfig.html)\r\n    - [`AnnotationToolbarButton`]({{ site.api }}interface/annotationinterface/annotationtoolbarbutton.html)\r\n\r\n- [`ConfigResult`]({{ site.api }}interface/configresult.html)\r\n- [`CreateDocumentOptions`]({{ site.api }}interface/createdocumentoptions.html)\r\n- [`MergeDocumentOptions`]({{ site.api }}interface/mergedocumentoptions.html)\r\n- [`TransferOptions`]({{ site.api }}interface/transferoptions.html)\r\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)\r\n- [`EditViewerConfig`]({{ site.api }}interface/editviewerconfig.html)\r\n- [`ThumbnailConfig`]({{ site.api }}interface/thumbnailconfig.html)\r\n- [`AnnotationConfig`]({{ site.api }}interface/annotationconfig.html)\r\n- [`IBrowseViewer`]({{ site.api }}interface/ibrowseviewer.html)\r\n- [`Rect`]({{ site.api }}interface/rect.html)\r\n- [`RectXY`](/api/interface/rectxy.md)\r\n- [`ZoomOrigin`]({{ site.api }}interface/zoomorigin.html)\r\n- [`CaptureViewerConstructorOptions`]({{ site.api }}interface/captureviewerconstructoroptions.html)\r\n- [`CaptureViewerConfig`]({{ site.api }}interface/captureviewerconfig.html)\r\n- [`VideoDeviceInfo`]({{ site.api }}interface/videodeviceinfo.html)\r\n- [`PlayCallbackInfo`]({{ site.api }}interface/playcallbackinfo.html)\r\n- [`VideoConfig`]({{ site.api }}interface/videoconfig.html)\r\n- [`PerspectiveViewerConstructorOptions`]({{ site.api }}interface/perspectiveviewerconstructoroptions.html)\r\n- [`PerspectiveViewerConfig`]({{ site.api }}interface/perspectiveviewerconfig.html)\r\n- [`BrowseViewerConstructorOptions`]({{ site.api }}interface/browseviewerconstructoroptions.html)\r\n- [`BrowseViewerConfig`]({{ site.api }}interface/browseviewerconfig.html)\r\n- [`CustomViewerConstructorOptions`]({{ site.api }}interface/customviewerconstructoroptions.html)\r\n- [`Tooltip`]({{ site.api }}interface/tooltip.html)\r\n- [`DisplayTextConfig`]({{ site.api }}interface/displaytextconfig.html)\r\n- [`UiConfig`]({{ site.api }}interface/uiconfig.html)\r\n- [`DDVError`]({{ site.api }}interface/ddverror.html)\r\n- [`VError`]({{ site.api }}interface/verror.html)\r\n- [`VImageData`]({{ site.api }}interface/vimagedata.html)\r\n- [`IImageFilter`]({{ site.api }}interface/iimagefilter.html)\r\n- [`ImageFilterItem`]({{ site.api }}interface/imagefilteritem.html)\r\n- [`IDocumentDetect`]({{ site.api }}interface/idocumentdetect.html)\r\n- [`DetectResult`]({{ site.api }}interface/detectresult.html)\r\n- [`DocumentDetectConfig`]({{ site.api }}interface/documentdetectconfig.html)\r\n- [`DocumentDetectResult`]({{ site.api }}interface/documentdetectresult.html)\r\n- [`ITextSelectedInfo`](/api/interface/itextselectedinfo.md)\r\n- [`ITextSearchedInfo`](/api/interface/itextsearchedinfo.md)\r\n- [`TextSearchResult`](/api/interface/textsearchresult.md)\r\n- [`PageVisualInfo`](/api/interface/pagevisualinfo.md)\r\n- [`PageImageInfo`](/api/interface/pageimageinfo.md)\r\n- [`SearchTextOptions`](/api/interface/searchtextoptions.md)\r\n- [`UpdatedSource`](/api/interface/updatedsource.md)\r\n- [`UpdatedPdfSource`](/api/interface/updatedpdfsource.md)\r\n- [`IPointerEvent`](/api/interface/ipointerevent.md)\r\n- [`IQuadModifiedEvent`](/api/interface/iquadmodifiedevent.md)\r\n- [`IPageData`](/api/interface/ipagedata.md)\r\n\r\n## Enumeration & Type\r\n\r\n- [`EnumPdfPageType`]({{ site.api }}enumeration-type/enumpdfpagetype.html)\r\n- [`EnumPdfCompressionType`]({{ site.api }}enumeration-type/enumpdfcompressiontype.html)\r\n- [`EnumTiffCompressionType`]({{ site.api }}enumeration-type/enumtiffcompressiontype.html)\r\n- [`EnumConvertMode`]({{ site.api }}enumeration-type/enumconvertmode.html)\r\n- [`EnumAnnotationRenderMode`]({{ site.api }}enumeration-type/enumannotationrendermode.html)\r\n- [`EnumImageDataType`]({{ site.api }}enumeration-type/enumimagedatatype.html)\r\n- [`EnumImageFilterType`]({{ site.api }}enumeration-type/enumimagefiltertype.html)\r\n- [`EnumDocumentDetectionStatus`]({{ site.api }}enumeration-type/enumdocumentdetectionstatus.html)\r\n- [`EnumStampIcon`]({{ site.api }}enumeration-type/enumstampicon.html)\r\n- [`EnumLineEnding`]({{ site.api }}enumeration-type/enumlineending.html)\r\n- [`type Quad`]({{ site.api }}enumeration-type/quad.html)\r\n\r\n## Error\r\n\r\n- [Error List]({{ site.api }}errorlist.html)",
-      "breadcrumb": "API Reference"
-    },
-    
-    {
-      "title": "JavaScript PDF Viewer SDK | Dynamsoft Document Viewer",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/introduction/",
-      "content": "# Introduction to Dynamsoft Document Viewer\n\nDynamsoft Document Viewer is a browser-based JavaScript SDK designed for viewing and editing images and PDFs. It provides a wide range of functionalities, including PDF annotation, page manipulation, image quality enhancement, and document saving. To see it in action, please visit this [online demo](https://demo.dynamsoft.com/document-viewer/).\n\n## Security\n\nDynamsoft Document Viewer does not rely on any external third-party JavaScript library. All processing, such as rendering and editing, is securely performed within the browser. This architecture eliminates the need for a server-side backend, ensuring security compliance and scalability.\n\n## Browser and Platform Compatibility\n\nDynamsoft Document Viewer is designed to work seamlessly across different browsers and platforms. It is compatible with major browsers like Chrome, Firefox, Safari, and Edge, ensuring a consistent user experience. Additionally, it supports various operating systems, including Windows, macOS, Linux, iOS, and Android, allowing users to access documents from any device.\n\n## Supported File Types\n\nUsers can open, edit, and save PDFs, as well as images in various formats, such as JPEG, PNG, and TIFF.\n\n## Annotation Types\n\nDynamsoft Document Viewer supports a variety of annotation types to enhance document interaction and collaboration. Users can add, edit, and delete annotations such as:\n\n- text\n- highlight\n- underline\n- strikeout\n- shape\n- stamp\n- freehand drawing\n\n## Data Management Concepts\n\nDynamsoft Document Viewer organizes data using two main concepts: \"document\" and \"page.\" A document can contain one or multiple pages, and each page must belong to a single document.\n\n- Page: The smallest unit of data management. Each page has a unique page ID.\n- Document: A collection of pages, each with a unique doc ID. Documents collectively make up the entire data set.\n\nManaging data, therefore, involves managing documents and pages.\n\n- [Document Management]({{ site.features }}datamanagement/docmanagement.html)\n- [Page Management]({{ site.features }}datamanagement/pagemanagement.html)\n\nIf you are using the default UI of DDV, data processing and management are handled internally.\n\n## UI Customization\n\nThe SDK offers extensive customization options, enabling developers to tailor the UI to meet specific application needs and branding requirements.\n\n## Designed to Support Diverse Document Workflows\n\nDynamsoft Document Viewer is built to support a wide range of document-centric workflows with its document viewing, editing, and scanning features. It has four built-in viewer types to suit different use cases:\n\n* **Edit Viewer**: Enables viewing and editing of documents with annotation support.\n* **Capture Viewer**: Integrates camera controls for streamlined, continuous capture workflows.\n* **Perspective Viewer**: Allows document cropping with perspective transformation.\n* **Browse Viewer**: Suitable for previewing multi-page documents or navigating document collections.\n\n",
-      "breadcrumb": "Introduction"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer FAQ",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/faq/index.html",
-      "content": "# FAQ\n\n- [How to acquire scanned images from the scanner?](https://www.dynamsoft.com/web-twain/docs/faq/dwt-with-annotation.html)\n",
-      "breadcrumb": "FAQ"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Documentation",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/",
-      "content": "# Dynamsoft Document Viewer \r\n\r\n\r\n- [Introduction]({{site.introduction}}index.html) \r\n- Getting Started\r\n    - [System Requirements]({{ site.gettingstarted }}sys_requirement.html)\r\n    - [Adding the dependency]({{ site.gettingstarted }}add_dependency.html)\r\n    - [SDK Initialization]({{ site.gettingstarted }}sdk_init.html) \r\n    - [Creating HelloWorld]({{ site.gettingstarted }}helloworld.html)\r\n    - Libraries and Frameworks\r\n        - [Angular](/gettingstarted/angular.md)\r\n        - [React](/gettingstarted/react.md)\r\n        - [Vue](/gettingstarted/vue.md)\r\n- [Features]({{ site.features }}index.html)\r\n    - Data Management\r\n        - [Document Management]({{ site.features }}datamanagement/docmanagement.html)\r\n        - [Page Management]({{ site.features }}datamanagement/pagemanagement.html)\r\n        - [Annotation management]({{ site.features }}datamanagement/annotmanagement.html)\r\n    - Viewers\r\n        - [Edit Viewer]({{ site.features}}viewers/editviewer.html)\r\n        - [Capture Viewer]({{ site.features }}viewers/captureviewer.html)\r\n        - [Perspective Viewer]({{ site.features }}viewers/perspectiveviewer.html)\r\n        - [Browse Viewer]({{ site.features }}viewers/others.html#browse-viewer)\r\n        - [Custom Viewer]({{ site.features }}viewers/others.html#custom-viewer)\r\n        {% comment %} - [Data synchronisation between viewers]({{ site.features }}viewers/datasync.html){% endcomment %}\r\n    - Advanced\r\n        - [Image Filter]({{ site.features }}advanced/imagefilter.html)\r\n        - [Document Detection]({{ site.features }}advanced/documentdetect.html)\r\n- [Viewer Configuration]({{ site.viewer }}index.html)\r\n    - [ViewerConfig]({{ site.viewer }}viewerconfig.html)\r\n        - [Structure]({{ site.viewer }}viewerconfig.html#structure)\r\n        - [Default ViewerConfig]({{ site.viewer }}viewerconfig.html#default-viewerconfig)\r\n    - [How to customize viewer]({{ site.viewer }}customize.html)\r\n        - [Viewer Style]({{ site.viewer }}customize.html#viewer-style)\r\n        - [Viewer properties]({{ site.viewer }}customize.html#viewer-properties)\r\n- [User Interface]({{ site.ui }}index.html)\r\n    - [UiConfig]({{ site.ui }}uiconfig.html)\r\n        - [Structure]({{ site.ui }}uiconfig.html#structure)\r\n        - [How to configure]({{ site.ui }}uiconfig.html#how-to-configure)\r\n        - [Reference]({{ site.ui }}uiconfig.html#reference)\r\n    - [Default Elements]({{ site.ui }}default_elements.html)\r\n    - [Default User Interface]({{ site.ui }}default_ui.html)\r\n        - [Edit viewer]({{ site.ui }}default_ui.html#edit-viewer)\r\n        - [Capture viewer]({{ site.ui }}default_ui.html#capture-viewer)\r\n        - [Perspective viewer]({{ site.ui }}default_ui.html#perspective-viewer)\r\n        - [Browse viewer]({{ site.ui }}default_ui.html#browse-viewer)\r\n    - [How to customize UI]({{ site.ui }}customize/index.html)\r\n        - [Layout]({{ site.ui }}customize/layout.html)\r\n        - [Elements]({{ site.ui }}customize/elements.html)\r\n        - [Update UI dynamically]({{ site.ui }}customize/dynamically.html)\r\n- [API Reference]({{ site.api }}index.html)\r\n- [Release Notes]({{ site.releasenotes }}index.html)\r\n- [FAQ]({{ site.faq }}index.html)\r\n- [Upgrade Guide](/upgrade-guide/index.md)",
-      "breadcrumb": "Dynamsoft Document Viewer Documentation"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface InfoOjbect",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/infoobject.html",
-      "content": "# InfoObject\n\n```typescript\ninterface InitInfo {}\n\ninterface LoadWasmInfo {}\n\ninterface LoadSourceInfo {\n    docUid: string;\n    current: number;\n    total: number;\n}\n\ninterface SaveSourceInfo {\n    docUid: string;\n    pageUids: [];\n    current: number;\n    total: number;\n}\n\ninterface FilterInfo {\n    pageUid: string;\n    filterType: string;\n}\n\ninterface PerspectiveInfo {\n    pageUid: string;\n    perspectiveQuad: Quad;\n}\n\ninterface InfoDetailsMap {\n    init: InitInfo;\n    loadSource: LoadSourceInfo;\n    save: SaveSourceInfo;\n    filter: FilterInfo;\n    perspective: PerspectiveInfo;\n    loadWasm: LoadWasmInfo;\n}\n\ntype InfoStatus =\n    | \"Pending\"\n    | \"InProgress\"\n    | \"Completed\"\n    | \"Failed\"\n\ninterface InfoObject<K extends keyof InfoDetailsMap> {\n    id: number;\n    type: K;\n    status: InfoStatus;\n    timestamp: number;\n    details?: InfoDetailsMap[K];\n}\n```\n\n## Attributes\n\n### id\n\nNumeric event identifier.\n\n### type\n\nIndicates the task type of the event. Must be one of the following events, in one of its possible statuses:\n\n| Event \\ Status | `Pending` | `InProgress` | `Completed` | `Failed` |\n| -------------- | --------- | ------------ | ----------- | -------- |\n| `init`         | ✓         |              | ✓           | ✓        |\n| `loadSource`   | ✓         | ✓            | ✓           | ✓        |\n| `save`         | ✓         | ✓            | ✓           | ✓        |\n| `filter`       | ✓         |              | ✓           | ✓        |\n| `perspective`  | ✓         |              | ✓           | ✓        |\n| `loadWasm`     | ✓         |              | ✓           | ✓        |\n\n### status\n\nIndicates the status of the task. Can only be one of the following:\n\n- `Pending`\n- `InProgress`\n- `Completed`\n- `Failed`\n\n### details\n\nContains additional event type-specific info.",
-      "breadcrumb": "Interface InfoObject"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Ink Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/ink.html",
-      "content": "# Ink Class\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n{% comment %}\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n- It will return `''`, if the annotation is deleted. \n\n{% comment %}\n## aabb\n\nReturn Axis-aligned bounding box of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly aabb: Rect;\n```\n\n{% endcomment %}\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `ink`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;  //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted.\n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate). \n\n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): InkAnnotationOptions;\n```\n\n**Return value**\n\nThe object of ink annotation options. Please refer to [`InkAnnotationOptions`]({{ site.api }}interface/annotationinterface/inkannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst ink = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"ink\"); // Create a default Ink annotation instance.\nconst inkOptions = ink.getOptions();\n```\n\n## updateOptions() \n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(inkAnnotationOptions: InkAnnotationOptions): boolean;\n```\n\n**Parameters**\n\n`inkAnnotationOptions`: The new ink annotation options. Please refer to [`InkAnnotationOptions`]({{ site.api }}interface/annotationinterface/inkannotationoptions.html).\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst ink = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid,  \"ink\"); // Create a default Ink annotation instance.\nconst inkOptions = {\n    borderColor: \"red\",\n};\nink.updateOptions(inkOptions); // Update the border color of the ink to red.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "Ink Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface InkAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/inkannotationoptions.html",
-      "content": "# InkAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface InkAnnotationOptions {\n    points?: Point[][];\n    borderWidth?: number;\n    borderColor?: string;\n    opacity?: number;\n    flags?: Flags;\n    rotation?: number;\n}\n```\n\n### points\n\nThe points of the ink annotation to draw. An ink annotation can include multiple strokes. Please refer to [`Point`]({{ site.api }}interface/annotationinterface/point.html).\n\nDefault value: `[[{ x: 10, y: 10 }, { x: 110, y: 80 }], [{ x: 110, y: 10 }, { x: 10, y: 80 }]]`\n\n### borderWidth\n\nThe border width of annotation. The unit is point. \n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n<!--\n### author\n\nThe author of annotation.\n\nDefault value: `''`\n\n### subject\n\nThe subject of annotation.\n\nDefault value: `''`  -->\n\n### flags\n\nThe flags of annotation. \n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n### rotation\n\nThe rotation angle of annotation.\n\nDefault value: 0\n\n**Remark**\n\n- Positive value means clockwise rotation, negative value means counterclockwise rotation.\n\n## Related\n\n- [`Ink()`]({{ site.api }}class/annotation/ink.html#ink)\n- [`getOptions()`]({{ site.api }}class/annotation/ink.html#getoptions) under `Ink` class\n- [`updateOptions()`]({{ site.api }}class/annotation/ink.html#updateoptions) under `Ink` class",
-      "breadcrumb": "Interface InkAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface InkStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/inkstyle.html",
-      "content": "# InkStyle\n\n## Syntax\n\n```typescript\ninterface InkStyle {\n    borderWidth?: number;\n    borderColor?: string;\n    opacity?: number;\n}\n```\n\n## Attributes\n\n\n### borderWidth\n\nThe border width of annotation. The unit is point. \n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)",
-      "breadcrumb": "Interface InkStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface IPageData",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/ipagedata.html",
-      "content": "# IPageData\n\n## Syntax\n\n```typescript\ninterface IPageData {\n    get uid(): string;\n    get fileIndex(): number;\n    get filter(): string;\n    get perspectiveQuad(): Quad;\n    get rotation(): number;\n    get mediaBox(): Rect;\n    get cropBox(): Rect;\n    fileData(): Promise<Blob>;\n    raw(): Promise<PageImageInfo>;\n    display(): Promise<PageImageInfo>;\n    thumbnail(): Promise<PageImageInfo>;\n    destroy(): void;\n}\n```\n\n## Attributes\n\n### uid\n\nThe uid of the page.\n\n\n\n### fileIndex\n\nThe page index for the specified page in the original file.\n\n### filter\n\nThe filter type of the specified page. \n\n### perspectiveQuad\n\nThe quadangle for perspective transformation in specified page. Please refer to [`Quad`](/api/enumeration-type/quad.md).\n\n### rotation\n\nThe rotation angle of specified page. \n\n### mediaBox\nMediaBox in the specified page. Units for left, top, width, and height are in points.\n\n### cropBox\n\nThe crop area of the specified page. Units for left, top, width, and height are in points.\n\n## Methods\n\n### fileData()\n\nGet the blob of the original file.\n\n### raw()\n\nGet the raw width, height, data of the specified page.\n\n### thumbnail()\n\nGet the width, height, data of the specified page in thumbnail view.\n\n### display()\n\nGet the width, height, data of the specified page in display view.\n\n### destroy()\n\nDestroy the page data to avoid memory leak.\n\n## Related\n\n- [`getPageData()`]({{ site.api }}interface/idocument/index.html#getpagedata)\n- [`Rect`](/api/interface/rect.md)\n- [`PageImageInfo`](/api/interface/pageimageinfo.md)\n",
-      "breadcrumb": "Interface IPageData"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface IPointerEvent",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/ipaginationchangedevent.html",
-      "content": "# IPaginationChangedEvent\n\n## Syntax\n\n```typescript\nexport interface IPaginationChangedEvent {\n    currentPageNumber: number;\n    pageCount: number;\n}\n```\n\n",
-      "breadcrumb": "Interface IPaginationChangedEvent"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface IPointerEvent",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/ipointerevent.html",
-      "content": "# IPointerEvent\n\n## Syntax\n\n```typescript\nexport interface IPointerEvent {\n    index: number;\n    pageUid: string;\n    imageX: number;\n    imageY: number;\n    canvasX: number;\n    canvasY: number;\n    nativeEvent: PointerEvent;\n}\n```\n\n",
-      "breadcrumb": "Interface IPointerEvent"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface IQuadModifiedEvent",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/iquadmodifiedevent.html",
-      "content": "# IQuadModifiedEvent\n\n## Syntax\n\n```typescript\ninterface IQuadModifiedEvent {\n   oldQuad: Quad;\n   newQuad: Quad;\n}\n```\n\nSee also [`Quad`](/api/enumeration-type/quad.md)\n\n",
-      "breadcrumb": "Interface IQuadModifiedEvent"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface ITextSearchedInfo",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/itextsearchedinfo.html",
-      "content": "# ITextSearchedInfo\n\n## Syntax\n\n```typescript\nexport interface ITextSearchedInfo {\n    pageUid: string;\n    text: string;\n    rects: RectXY[];\n    context: string;\n}\n```\n\nSee also [`RectXY`](/api/interface/rectxy.md).\n\n",
-      "breadcrumb": "Interface ITextSearchedInfo"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface ITextSelectedInfo",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/itextselectedinfo.html",
-      "content": "# ITextSelectedInfo\n\n## Syntax\n\n```typescript\nexport interface ITextSelectedInfo {\n    pageUid: string;\n    text: string;\n    rects: RectXY[];\n}\n```\n\nSee also [`RectXY`](/api/interface/rectxy.md).\n\n",
-      "breadcrumb": "Interface ITextSelectedInfo"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface IUndoRedoStateChangedEvent",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/iundoredostatechangedevent.html",
-      "content": "# IUndoRedoStateChangedEvent\n\n## Syntax\n\n```typescript\nexport interface IUndoRedoStateChangedEvent {\n    undoCount: number;\n    redoCount: number;\n}\n```\n\n",
-      "breadcrumb": "Interface IUndoRedoStateChangedEvent"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface KeyboardInteractionConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/keyboardinteractionconfig.html",
-      "content": "# KeyboardInteractionConfig\n\n```typescript\ninterface KeyBoardInteractionConfig {\n    enableZoom?: boolean; // Ctrl + =/-\n    enableUndoRedo?: boolean; // Ctrl + z/y\n    enableAnnotationClipboard?: boolean; // Ctrl + c/x/v\n    enableMultipleAnnotationsSelection?: boolean; // Ctrl + click\n    enableMultiplePagesSelection?: boolean; // Ctrl/Shift + click \n    enableMoveAnnotation?: boolean; // Arrow\n    enableDeleteAnnotation?: boolean; // Backspace/Delete\n    enablePageNavigation?: boolean; // Home End ArrowLeft ArrowRight ArrowDown ArrowUp PageUP PageDown\n}\n```\n\n## Attributes\n\nAside from the shortcuts controlled by `KeyboardInteractionConfig`, the uncontrolled shortcuts are always available for use.\n- Esc: Deselects annotations or exits annotation editing mode.\n- Delete/Backspace: Deletes text content in text-based annotations while in editing mode.\n- Arrow keys: Moves the cursor within text-based annotations while in editing mode.\n- Ctrl+A: Selects all text in text-based annotations while in editing mode, or selects all pages in the document in browsing and editing modes.\n- Ctrl+C/X/V: Copies, cuts, or pastes text in text-based annotations while in editing mode.\n\n### enableZoom\n\nEnables using the `Ctrl(Cmd) + =/-` keyboard shortcuts to increase and decrease zoom level on the document, respectively. This is compatible with the Edit Viewers.\n\n### enableUndoRedo\n\nEnables using the `Ctrl(Cmd) + Z/Y` keyboard shortcuts to undo and redo changes to the document, respectively. This is compatible with the Edit Viewer.\n\n### enableAnnotationClipboard\n\nEnables using the `Ctrl(Cmd) + C/X/V` keyboard shortcuts to copy, cut, and paste the system clipboard to and from the document, respectively. This is compatible with the Edit Viewer.\n\n### enableMultipleAnnotationsSelection\n\nEnables using the `Ctrl(Cmd) + Left Click` keyboard shortcuts to select multiple annotations on the document. This is compatible with the Edit Viewer.\n\n### enableMultiplePagesSelection\n\nEnables using the `Ctrl(Cmd) + Left Click` or `Shift + Left Click` keyboard shortcuts to select multiple pages in the document. This is compatible with both Browse and Edit Viewers.\n\n### enableMoveAnnotation\n\nEnables using arrow keys to move selected annotations on the document. This is compatible with the Edit Viewers.\n\n### enableDeleteAnnotation\n\nEnables using the `Backspace/Delete` keys to delete annotations on the document. This is compatible with the Edit Viewer.\n\n### enablePageNavigation\n\nEnables document navigation with the following keys (compatible with the Browse and Edit Viewers):\n- `ArrowLeft`\n- `ArrowRight`\n- `ArrowUp`\n- `ArrowDown`\n- `PageUp`\n- `PageDown`\n- `Home`\n- `End`",
-      "breadcrumb": "Interface KeyboardInteractionConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer User Interface - Customize Layout",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/ui/customize/layout.html",
-      "content": "# Layout\n\nThe default UI provided by DDV is basically a top-down layout. Taking the default desktop UI of EditViewer as an example, the header serves as the toolbar, and the main view is located below the toolbar.\n\n![Header & main view](/assets/imgs/cuslayoutbefore.png)\n\n## Based on the default layout\n\nWithout changing the toolbar, only changing the relative position of the toolbar and the main view, you can refer to the following steps:\n\n- **Step one**: Refer to the default UiConfig which is listed on [Default user interface]({{ site.ui }}default_ui.html) section and reverse two elements in its children. Can use [`getDefaultUiConfig()`]({{ site.api }}namespace/ddv.html#static-getdefaultuiconfig) method,\n    ```typescript\n    const newUiConfig = Dynamsoft.DDV.getDefaultUiConfig(\"editViewer\");\n    newUiConfig.children.reverse();\n    ```\n\n    Or modify the default object directly.\n    ```typescript\n    const newUiConfig = {\n            type: Dynamsoft.DDV.Elements.Layout,\n            flexDirection: \"column\",\n            className: \"ddv-edit-viewer-desktop\",\n            children: [\n                Dynamsoft.DDV.Elements.MainView,\n                {\n                    type: Dynamsoft.DDV.Elements.Layout,\n                    className: \"ddv-edit-viewer-header-desktop\",\n                    children: [\n                        {\n                            type: Dynamsoft.DDV.Elements.Layout,\n                            children: [\n                                Dynamsoft.DDV.Elements.ThumbnailSwitch,\n                                Dynamsoft.DDV.Elements.Zoom,\n                                Dynamsoft.DDV.Elements.FitMode,\n                                Dynamsoft.DDV.Elements.DisplayMode,\n                                Dynamsoft.DDV.Elements.RotateLeft,\n                                Dynamsoft.DDV.Elements.RotateRight,\n                                Dynamsoft.DDV.Elements.Crop,\n                                Dynamsoft.DDV.Elements.Filter,\n                                Dynamsoft.DDV.Elements.Undo,\n                                Dynamsoft.DDV.Elements.Redo,\n                                Dynamsoft.DDV.Elements.DeleteCurrent,\n                                Dynamsoft.DDV.Elements.DeleteAll,\n                                Dynamsoft.DDV.Elements.Pan,\n                            ],\n                        },\n                        {\n                            type: Dynamsoft.DDV.Elements.Layout,\n                            children: [\n                                {\n                                    type: Dynamsoft.DDV.Elements.Pagination,\n                                    className: \"ddv-edit-viewer-pagination-desktop\",\n                                },\n                                Dynamsoft.DDV.Elements.Load,\n                                Dynamsoft.DDV.Elements.Download,\n                                Dynamsoft.DDV.Elements.Print,\n                            ],\n                        },\n                    ],\n                },\n            ],\n        };\n    ```\n- **Step two**: Configure it when creating the new viewer.\n    ```typescript\n    const editViewer = new Dynamsoft.DDV.EditViewer({\n        container: \"viewer\",\n        uiConfig: newUiConfig,\n    });\n    ```\n\n![Reverse header and main view](/assets/imgs/cusrevafter.png)\n\n\n## Customize as you wish\n\nSometimes the requirements don't match the default UI layout at all, then it's also possible to completely customize the UiConfig. For example, adjust the toolbar to a sidebar, the UiConfig would be,\n\n```typescript\nconst newUiConfig = {\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"row\", // Configure the layout to be left to right\n    className: \"ddv-edit-viewer-desktop\",\n    children: [\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            flexDirection: \"column\", // Configure Elements layout to be top-down.\n            style: {\n                width: \"46px\", // Set the width of toolbar, you can also set other style configurations here.\n            },\n            children: [\n                        Dynamsoft.DDV.Elements.ThumbnailSwitch,\n                        Dynamsoft.DDV.Elements.FitMode,\n                        Dynamsoft.DDV.Elements.DisplayMode,\n                        Dynamsoft.DDV.Elements.RotateLeft,\n                        Dynamsoft.DDV.Elements.RotateRight,\n                        Dynamsoft.DDV.Elements.Crop,\n                        Dynamsoft.DDV.Elements.Filter,\n                        Dynamsoft.DDV.Elements.Undo,\n                        Dynamsoft.DDV.Elements.Redo,\n                        Dynamsoft.DDV.Elements.DeleteCurrent,\n                        Dynamsoft.DDV.Elements.DeleteAll,\n                        Dynamsoft.DDV.Elements.Pan,\n                        Dynamsoft.DDV.Elements.Load,\n                        Dynamsoft.DDV.Elements.Download,\n                        Dynamsoft.DDV.Elements.Print,\n\n            ],\n        },\n        Dynamsoft.DDV.Elements.MainView,\n    ],\n}\n```\n\nAnd configure the UiConfig when creating the edit viewer.\n\n```typescript\nconst editViewer = new Dynamsoft.DDV.EditViewer({\n    container: \"viewer\",\n    uiConfig: newUiConfig,\n});\n```\n\nThen you will get a viewer which is shown as below.\n\n![Change toolbar to a sidebar](/assets/imgs/cussidebar.png)\n\n",
-      "breadcrumb": "Customize Layout"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Line Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/line.html",
-      "content": "# Line Class\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n{% comment %}\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n\n{% comment %}\n## aabb\n\nReturn Axis-aligned bounding box of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly aabb: Rect;\n```\n\n{% endcomment %}\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `line`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;  //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted. \n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate). \n\n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): LineAnnotationOptions;\n```\n\n**Return value**\n\nThe object of line annotation options. Please refer to [`LineAnnotationOptions`]({{ site.api }}interface/annotationinterface/lineannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst line = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid,  \"line\"); // Create a default Line annotation instance.\nconst lineOptions = line.getOptions();\n```\n\n## updateOptions() \n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(lineAnnotationOptions: LineAnnotationOptions): boolean;\n```\n\n**Parameters**\n\n`lineAnnotationOptions`: The new line annotation options. Please refer to [`LineAnnotationOptions`]({{ site.api }}interface/annotationinterface/lineannotationoptions.html).\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst line = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"line\"); // Create a default Line annotation instance.\nconst lineOptions = {\n    lineEnding: {\n        end: Dynamsoft.DDV.EnumLineEnding.OPEN,\n    },\n};\nline.updateOptions(lineOptions); // Update the line ending of the line to open.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "Line Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface LineAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/lineannotationoptions.html",
-      "content": "# LineAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface LineAnnotationOptions {\n    startPoint?:Point;\n    endPoint?: Point;\n    lineEnding?: {\n        start?: EnumLineEnding;\n        end?: EnumLineEnding;\n    };\n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number; \n    lineDash?: number[];\n    flags?: Flags;\n}\n```\n\n## Attributes\n\n### startPoint\n\nThe start point of the line annotation to draw. Please refer to [`Point`]({{ site.api }}interface/annotationinterface/point.html).\n\nDefault value: `{x: 10, y: 10}`\n\n### endPoint\n\nThe end point of the line annotation to draw. Please refer to [`Point`]({{ site.api }}interface/annotationinterface/point.html).\n\nDefault value: `{x: 110, y: 80}`\n\n![Line Location](/assets/imgs/linelocation.png)\n\n### lineEnding\n\nThe line ending style of the line annotation.\n\n#### start\n\nSpecify the start point style of the line annotation. Please refer to [`EnumLineEnding`]({{ site.api }}enumeration-type/enumlineending.html).\n\nDefault value: `Dynamsoft.DDV.EnumLineEnding.NONE`\n\n#### end\n\nSpecify the end point style of the line annotation. Please refer to [`EnumLineEnding`]({{ site.api }}enumeration-type/enumlineending.html).\n\nDefault value: `Dynamsoft.DDV.EnumLineEnding.NONE`\n\n### borderWidth\n\nThe border width of annotation. The unit is point. \n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill.  \n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n![Line BorderStyle](/assets/imgs/lineborderstyle.png)\n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### lineDash\n\nThe style of line annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n<!--\n### author\n\nThe author of annotation.\n\nDefault value: `''`\n\n### subject\n\nThe subject of annotation.\n\nDefault value: `''`  -->\n\n### flags\n\nThe flags of annotation. \n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n## Related\n\n- [`Line()`]({{ site.api }}class/annotation/line.html#line)\n- [`getOptions()`]({{ site.api }}class/annotation/line.html#getoptions) under `Line` class\n- [`updateOptions()`]({{ site.api }}class/annotation/line.html#updateoptions) under `Line` class",
-      "breadcrumb": "Interface LineAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface LineStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/linestyle.html",
-      "content": "# LineStyle\n\n## Syntax\n\n```typescript\ninterface LineStyle {\n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number;\n    lineDash?: number[];\n    lineEnding?: {\n        start?: EnumLineEnding;\n        end?: EnumLineEnding;\n    };\n}\n```\n\n## Attributes\n\n### borderWidth\n\nThe border width of annotation. The unit is point.\n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill.\n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### lineDash\n\nThe style of annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n\n### lineEnding\n\nThe line ending style of the line annotation.\n\n#### start\n\nSpecify the start point style of the line/polyline annotation. Please refer to [`EnumLineEnding`]({{ site.api }}enumeration-type/enumlineending.html).\n\nDefault value: `Dynamsoft.DDV.EnumLineEnding.NONE`\n\n#### end\n\nSpecify the end point style of the line/polyline annotation. Please refer to [`EnumLineEnding`]({{ site.api }}enumeration-type/enumlineending.html).\n\nDefault value: `Dynamsoft.DDV.EnumLineEnding.NONE`\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)",
-      "breadcrumb": "Interface LineStyle"
-    },
-    
-    {
-      "title": null,
-      "url": "https://www.dynamsoft.com/document-viewer/docs/llms-full.txt",
-      "content": "{% for article in site.pages %}{% if article.title %}<page>\n---\ntitle: {{article.title}}\ndescription: {{article.description}}\nsource_url:\n  html: https://www.dynamsoft.com{{ article.url | relative_url }}\n  md: {{ site.repositoryUrl }}/{{article.path}}\n---\n{{ article.raw_content }}\n</page>{% endif %}\n\n{% endfor %}\n\n",
-      "breadcrumb": null
-    },
-    
-    {
-      "title": null,
-      "url": "https://www.dynamsoft.com/document-viewer/docs/llms.txt",
-      "content": "# Dynamsoft Document Viewer Docs\n\n## Docs\n\n{% for article in site.pages %}{% if article.title %}- [{{article.title}}](https://www.dynamsoft.com{{ article.url | relative_url }}): {{ article.description }}{% endif %}\n{% endfor %}\n\n## Samples\n\n- [Samples](https://github.com/Dynamsoft/document-viewer-samples/): Samples of Dynamsoft Document Viewer\n",
-      "breadcrumb": null
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface MergeDocumentOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/mergedocumentoptions.html",
-      "content": "# MergeDocumentOptions\n\n## Syntax\n\n```typescript\ninterface MergeDocumentOptions {\n    name?: string; \n    author?: string; \n    creationDate?: string; \n    deleteOriginal?: boolean; \n}\n```\n\n## Attributes\n\n### name\n\nSpecify the name of the new merged document.\n\n### author\n\nSpecify the author of the new merged document.\n\n### creationDate\n\nSpecify the creation date of the new merged document. Please note that the argument should be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`. It also supports the older format `D:YYYYMMDDHHmmSS`. If this format is used (e.g., `D:20230101085959`), the system will automatically add the relevant time zone information, resulting in a complete representation like `D:20230101085959-08'00'`.\n\n### deleteOriginal\n\nSpecify whether to delete the original documents. \n\nDefault value: `false`\n\n## Related\n\n- [`mergeDocuments()`]({{ site.api }}class/documentmanager.html#mergedocuments)",
-      "breadcrumb": "Interface MergeDocumentOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features - Other Viewers",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/viewers/others.html",
-      "content": "# Other Viewers\n\n## Browse Viewer\n\nBrowse Viewer is used to display pages in multiple-mode, pages can be multiple selected in this viewer. \n\n- [Default user interface]({{ site.ui }}default_ui.html#browse-viewer)\n- [Default viewer configuration]({{ site.viewer }}viewerconfig.html#browse-viewer)\n\n```typescript\nconst browseViewer = new Dynamsoft.DDV.BrowseViewer({\n    container: document.getElementById(\"viewer\"),\n});\n\nbrowseViewer.openDocument(\"docUid\"); // Open a document which has pages\n```\n\n### Select page(s) via programming\n\n- Select the second and third pages by using [`selectPages()`]({{ site.api }}class/browseviewer.html#selectpages).\n\n    ```typescript\n    browseViewer.selectPages([1,2]);\n    ```\n\n- Select all pages by using [`selectAllPages()`]({{ site.api }}class/browseviewer.html#selectallpages).\n\n    ```typescript\n    browseViewer.selectAllPages();\n    ```\n\n### Multiple select via UI\n\nTo enable multiple select mode, you need to set [`multiselectMode`]({{ site.api }}class/browseviewer.html#multiselectmode) to `true`. \n\nIn this case, you can select multiple pages by clicking on them in the viewer without the need to additionally press the Ctrl key.\n\n```typescript\nbrowseViewer.multiselectMode = true;\n```\n\n## Custom Viewer\n\nCustom Viewer does not have any built-in UI or functionality, it is used for creating your own viewer.\n\n```typescript\nconst customViewer = new Dynamsoft.DDV.CustomViewer({\n    container: document.getElementById(\"viewer\"),\n});\n```",
-      "breadcrumb": "Other Viewers"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PageImageInfo",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/pageimageinfo.html",
-      "content": "# PageImageInfo\n\n## Syntax\n\n```typescript\ninterface PageImageInfo {\n    data: Blob;\n    width: number;\n    height: number;\n}\n```\n",
-      "breadcrumb": "Interface PageImageInfo"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features - Page Management",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/datamanagement/pagemanagement.html",
-      "content": "# Page Management\n\nDDV is using [`Interface IDocument`]({{ site.api }}interface/idocument/index.html) to manage the page data. \n\n## Load pages\n\n[`loadSource()`]({{ site.api }}interface/idocument/index.html#loadsource) is used to load file(s) into the document. \n\n**Use case**\n\n- Load an image file in order\n\n    ```typescript\n    // Create a document\n    const docManager = Dynamsoft.DDV.documentManager;\n    const firstDoc = docManager.createDocument({\n        name: \"first_document\",\n        author: \"DDV\",\n        creationDate: \"D:20230101085959-08'00'\",\n    });\n\n    //Load a file\n    var blob = /*Sample image blob*/;\n    await firstDoc.loadSource(blob);\n    ```\n\n- Load an image file and insert it into the specified order if there are pages in the document.\n\n    ```typescript\n    var blob = /*Sample image blob*/;\n\n    // Load and insert to the beginning of the document\n    await firstDoc.loadSource(blob, 0);\n    ```\n\n- Load multiple files at one time\n\n    ```typescript\n    var blobs = /*Sample image blob array*/;\n    await firstDoc.loadSource(blobs);\n    ```\n\n- Load an image file with [`ExtraPageData`]({{ site.api }}interface/idocument/extrapagedata.html)\n\n    ```typescript\n    const extraData = {\n        index: 0, // Extra data for the first page\n        rotation: 90,\n    };\n\n    const testSource = {\n        fileData: /*Sample image blob*/,\n        extraPageData: [extraData],\n    };\n\n    await firstDoc.loadSource(testSource);\n    ```\n\n- Load a PDF file and render its annotations using [`PDFSource`]({{ site.api }}interface/idocument/pdfsource.html)\n\n    ```typescript\n    const pdfSource = {\n        fileData: /*Sample pdf blob*/,\n        convertMode: Dynamsoft.DDV.EnumConvertMode.CM_RENDERALL,\n        renderOptions: {\n            renderAnnotations: Dynamsoft.DDV.EnumAnnotationRenderMode.RENDER_ANNOTATIONS,\n        },\n    };\n\n    await firstDoc.loadSource(pdfSource);\n    ```\n\n- Load a PDF file with it annotations using [`PDFSource`]({{ site.api }}interface/idocument/pdfsource.html)\n\n    ```typescript\n    const pdfSource = {\n        fileData: /*Sample pdf blob*/,\n        convertMode: Dynamsoft.DDV.EnumConvertMode.CM_RENDERALL,\n        renderOptions: {\n            renderAnnotations: Dynamsoft.DDV.EnumAnnotationRenderMode.LOAD_ANNOTATIONS,\n        },\n    };\n\n    await firstDoc.loadSource(pdfSource);\n    ```\n\n## Save pages\n\n**Use case**\n\n- Save page as a JPEG file using [`saveToJpeg()`]({{ site.api }}interface/idocument/index.html#savetojpeg)\n\n    ```typescript\n    // Save the first page in the doc to a JPEG file with JPEG compression quality 60.\n    const settings1 = {\n        quality: 60, // The default quality is 80.\n    };\n    const result1 = await firstDoc.saveToJpeg(0, settings1);\n\n    // Save the second page in the doc to a JPEG file with default JPEG compression quality\n    const result2 = await firstDoc.saveToJpeg(1);\n\n    // Save the first page with annotations\n    const settings2 = {\n        saveAnnotation: true, \n    };\n    const result3 = await firstDoc.saveToJpeg(0, settings2);\n    ```\n\n- Save page(s) as a TIFF file using [`saveToTiff()`]({{ site.api }}interface/idocument/index.html#savetotiff)\n\n    ```typescript\n    // Set custom Tag of the tiff file\n    const customTag1 = {\n    id: 700,\n    content: \"Created By Dynamsoft\",\n    contentIsBase64: false,\n    };\n\n    // Set SaveTiffSettings\n    const tiffSettings = {\n        customTag: [customTag1],\n        compression: \"tiff/auto\",\n    };\n\n    // Save the fifth, sixth, seventh pages to a multi-page TIFF file with the specified tiff settings.\n    const result1 = await firstDoc.saveToTiff([4,5,6], tiffSettings);\n\n    // Save the whole document to a multi-page TIFF file with the specified tiff settings.\n    const result2 = await firstDoc.saveToTiff(tiffSettings);\n\n    // Save the whole document to a multi-page TIFF file without any tiff settings.\n    const result2 = await firstDoc.saveToTiff();\n    ```\n\n- Save page(s) as a PDF file using [`saveToPdf()`]({{ site.api }}interface/idocument/index.html#savetopdf)\n\n    ```typescript\n    // Set SavePdfSettings\n    const pdfSettings = {\n        author: \"Dynamsoft\",\n        compression: \"pdf/jpeg\",\n        pageType: \"page/a4\",\n        creator: \"DDV\",\n        creationDate: \"D:20230101085959-08'00'\",\n        keyWords: \"samplepdf\",\n        modifiedDate: \"D:20230101090101-08'00'\",\n        producer: \"Dynamsoft Document Viewer\",\n        subject: \"SamplePdf\",\n        title: \"SamplePdf\",\n        version: \"1.5\",\n        quality: 90,\n    };\n\n    // Save the fifth, sixth, seventh pages to a multi-page PDF file with the specified pdf settings.\n    const result1 = await firstDoc.saveToPdf([4,5,6], pdfSettings);\n\n    // Save the whole document to a multi-page PDF file with the specified pdf settings.\n    const result2 = await firstDoc.saveToPdf(pdfSettings);\n\n    // Save the whole document to a multi-page PDF file without any pdf settings.\n    const result3 = await firstDoc.saveToPdf();\n    ```\n\n- Save page(s) as an encrypted PDF file using [`saveToPdf()`]({{ site.api }}interface/idocument/index.html#savetopdf)\n\n    ```typescript\n    // Set SavePdfSettings\n    const pdfSettings = {\n        password: \"Dynamsoft-1\",\n    };\n\n    // Save the whole document to a multi-page PDF file.\n    const result = await firstDoc.saveToPdf(pdfSettings);\n    ```\n\n- Save page(s) with annotations as a PDF file using [`saveToPdf()`]({{ site.api }}interface/idocument/index.html#savetopdf)\n\n    ```typescript  \n    const pdfSettings = {\n        saveAnnotation: \"annotation\",\n    };\n\n    // Save the whole document to a multi-page PDF file.\n    const result = await firstDoc.saveToPdf(pdfSettings);\n    ```\n\n## Move or switch pages\n\n**Use case**\n\n- Move pages to the specified order using [`movePages()`]({{ site.api }}interface/idocument/index.html#movepages)\n\n    ```typescript\n    // Move the second, fourth, sixth pages to the begining of the doc. \n    // The moved pages are in (original sixth, fourth, second) order.\n    firstDoc.movePages([5,3,1], 0);\n    ```\n\n    ![Move pages-1](/assets/imgs/movepages-1.png)\n\n- Move pages to the end\n\n    ```typescript\n    // Move the first and second page to the end of the doc.\n    firstDoc.movePages([0,1]);\n    ```\n  ![Move pages-2](/assets/imgs/movepages-2.png)\n\n- Switch the order of two pages using [`switchPage()`]({{ site.api }}interface/idocument/index.html#switchpage)\n\n    ```typescript\n    // Switch the order of the first page and third page \n    firstDoc.switchPage(0,2);\n    ```\n\n## Get/update page data\n\n**Use case**\n\n- Get [`PageData`]({{ site.api }}interface/idocument/pagedata.html) of the first page using [`getPageData()`]({{ site.api }}interface/idocument/index.html#getpagedata)\n\n    ```typescript\n    const pageData = await firstDoc.getPageData(firstDoc.pages[0]);\n    ```\n- Update the first page in the document with the new page, [`updatePage()`]({{ site.api }}interface/idocument/index.html#updatepage)\n\n    ```typescript\n    const updateFirstPage = {\n        fileIndex: 0, // using the first page of new file.\n    };\n\n    const fileData = /*Sample file blob*/,\n\n    await firstDoc.updatePage(firstDoc.pages[0], fileData, updateFirstPage);\n    ```\n## Set/get custom data to page\n\nSometimes, some custom data needs to be set with the specified page, [`setPageCustomData()`]({{ site.api }}interface/idocument/index.html#setpagecustomdata) & [`getPageCustomData()`]({{ site.api }}interface/idocument/index.html#getpagecustomdata) can be used in this case.\n\n**Use case**\n\n- Set custom data (whether has barcode in page) with the first page\n\n    ```typescript\n    const customData ={\n        hasBarcode: true; // sample custom data\n    };\n    await firstDoc.setPageCustomData(firstDoc.pages[0], customData);\n    ```\n\n- Get custom data from the first page\n\n    ```typescript\n    await firstDoc.getPageCustomData(firstDoc.pages[0]);\n    ```\n\n## Delete pages\n\n**Use case**\n\n- Delete specified page(s) using [`deletePages()`]({{ site.api }}interface/idocument/index.html#deletepages)\n\n    ```typescript\n    // Delete the second and third pages\n    firstDoc.deletePages([1,2]);\n    ```\n\n- Delete all pages using [`deleteAllPages()`]({{ site.api }}interface/idocument/index.html#deleteallpages)\n\n    ```typescript\n    firstDoc.deleteAllPages();\n    ```\n\n\n",
-      "breadcrumb": "Page Management"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PageNumberStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/styleinterface/pagenumberstyle.html",
-      "content": "# PageNumberStyle\n\n## Syntax\n\n```typescript\ninterface PageNumberStyle {\n    visibility?: string; \n    onPage?: boolean;\n    width?: string; \n    height?: string;\n    border?: string; \n    borderRadius?: string;\n    background?: string;\n    opacity?: number;\n    color?: string;\n    fontSize?: string;\n    fontFamily?: string; \n    left?: string;\n    top?: string; \n    right?: string; \n    bottom?: string; \n    translateX?: string; \n    translateY?: string;\n}\n```\n\n## Attributes\n\n### visibility\n\nSpecify whether to show the page number. \n\nSupported value: `hidden`, `visible`\n\n### onPage\n\nSpecify whether the page number is on page or not.\n\n### width\n\nThe width of page number. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n### height\n\nThe height of page number. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n### border\n\nThe border style of page number. It contains three parts, borderWidth, borderStyle and borderColor.\n\nOnly takes effect when set borderWidth, borderStyle and borderColor at the same time.\n\nborderWidth only supports `px` unit.\n\nborderStyle only supports `dashed`, `solid`.\n\n**Example**\n\n```typescript\nborder: \"2px dashed red\", \n```\n\n### borderRadius\n\nThe border radius of page number. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n### background\n\nThe background style.\n\n**Example**\n\n```typescript\nbackground: \"rgba(255,255,255,0)\", \n```\n\n### opacity\n\nThe opacity of the whole page number. The value range is [0,1], value which is greater than 1 will default to 1.\n\n### color\n\nThe color of page number font.\n\n### fontSize\n\nThe size of page number font.\n\n### fontFamily\n\nThe font-family of page number font.\n\n![Page Number](/assets/imgs/pagenumber-1.png)\n\n\n### left, top, right, bottom\n\nPosition the page number. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n**Remark**\n\n- To position a page number, one of `left` and `right` and one of `top` and `bottom` must be set, with the remaining positioning attributes should be set to empty strings. For example, \n    ```typescript\n    left: \"10%\",\n    top: \"10%\",\n    right: \"\",\n    bottom: \"\",\n    ```\n    OR\n    ```typescript\n    left: \"\",\n    top: \"\",\n    right: \"10px\",\n    bottom: \"10px\",\n    ```\n    OR\n    ```typescript\n    left: \"10px\",\n    top: \"\",\n    right: \"\",\n    bottom: \"10px\",\n    ```\n    OR\n    ```typescript\n    left: \"\",\n    top: \"10%\",\n    right: \"10%\",\n    bottom: \"\",\n    ```\n- If both `left` and `right` are set, only `left` takes effect. If both `top` and `bottom` are set, only `top` takes effect.\n\n### translateX\n\nReposition the page number horizontally. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n| number in string                             | page number shifts along x-axis |\n| -------------------------------------------- | ------------------------------- |\n| positive, for example, `\"10px\"` or `\"10%\"`   | →                               |\n| negative, for example, `\"-10px\"` or `\"-10%\"` | ←                               |\n\n### translateY\n\nReposition the page number vertically. Supports unit `px` or `%`, for example, `\"10px\"` or `\"10%\"`.\n\n| number in string                             | page number shifts along y-axis |\n| -------------------------------------------- | ------------------------------- |\n| positive, for example, `\"10px\"` or `\"10%\"`   | ↓                               |\n| negative, for example, `\"-10px\"` or `\"-10%\"` | ↑                               |\n\n\n![Position Page Number when onPage is true](/assets/imgs/positionpagenumber-1.png)\n\n![Position Page Number when onPage is false](/assets/imgs/positionpagenumber-2.png)",
-      "breadcrumb": "Interface PageNumberStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PageVisualInfo",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/pagevisualinfo.html",
-      "content": "# PageVisualInfo\n\n## Syntax\n\n```typescript\ninterface PageVisualInfo {\n    pageUid: string;\n    pageIndex: number;\n    isHovered: boolean;\n    isSelected: boolean;\n    width: number;\n    height: number;\n    canvasOffsetX: number;\n    canvasOffsetY: number;\n    containerOffsetX: number;\n    containerOffsetY: number;\n}\n```\n\n![PageVisualInfo](/assets/imgs/pagevisualinfo.png)\n\n",
-      "breadcrumb": "Interface PageVisualInfo"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PaletteConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/paletteconfig.html",
-      "content": "# PaletteConfig\n\n## Syntax\n\n```typescript\ninterface PaletteConfig {\n    enabled?: boolean;\n    id?: string;\n    className?: string;\n    style?: cssstyleDeclaration;\n    colorList?: string[];\n    labels?: {\n        text? : string;\n        stroke? : string;\n        fill?: string;\n        opacity?: string;\n        style?: string;\n        standardBusiness?: string;\n    }\n    }\n```\n\n## Attributes\n\n### enabled\n\nWhether or not the toolbar is enabled.\n\nDefault value: `true`\n\n### id\n\nThe id of Dom Element. If it is not specified, a random string will be generated.\n\n### className\n\nThe className of CSS.\n\n### style\n\nThe style which will cover CSS.\n\n### colorList\n\nThe color list in palette. Supported string value: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nDefault value: `[\"#F01314\", \"#FD7C10\", \"#FFEE5F\", \"#07C37F\", \"#0E68F5\", \"#9D3BFE\", \"#000000\",\"#FF9494\", \"#87440C\", \"#B7A514\", \"#046743\", \"#50C9FF\", \"#EBA3ED\", \"#FFFFFF\",\"#CECECE\"]`\n\n![ColorList](/assets/imgs/colorlist.png)\n\n\n**Example**\n\n```typescript\ncolorList: [\"red\", \"green\", \"#0000ff\", \"#ffff00\" , \"rgb(0, 0, 0)\", \"rgb(128, 128, 128)\", \"hsl(0, 0%, 100%)\", \"hsl(350, 100%, 88%)\"],\n```\n\n**Remarks**\n\n- The palette's UI defaults to presenting 27 color circles for display. Consequently, only the first 27 values within the `colorList` array can be utilized and will appear in the UI in a sequential manner. The remaining values in the array will be disregarded.\n- If the number of values in the `colorList` array are less than 27, after applying the values configured in the array, the remaining color circles will be replaced by custom color circles. \n- Custom color circles can be set to a specified color by clicking on the circle via the user interface. Similarly, for color circles, the color can be modified by double-clicking on them through the user interface.\n\n### displayText\n\nThe display text in palette.\n\n#### text\n\nDefault value: `Text`\n\n#### stroke\n\nDefault value: `Stroke`\n\n#### fill\n\nDefault value: `Fill`\n\n#### opacity\n\nDefault value: `Opacity`\n\n#### style\n\nDefault value: `Style`\n\n#### standardBusiness\n\nDefault value: `StandardBusiness`\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)\n",
-      "breadcrumb": "Interface PaletteConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PdfSource",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/pdfsource.html",
-      "content": "# PdfSource\n\n## Syntax\n\n```typescript\ninterface PdfSource extends Source {\n    convertMode: EnumConvertMode;   \n    password?: string;  \n    renderOptions?: {\n        renderAnnotations?: EnumAnnotationRenderMode; \n        resolution?: number;  \n        maxWidth?: number;\n        maxHeight?: number;\n        renderGrayscale?: boolean;  \n    };\n}\n```\n\n## Extends\n\n[`Source`]({{ site.api }}interface/idocument/source.html)\n\n## Attributes\n\n### convertMode\n\nSpecify PDF convert mode. Please refer to [`EnumConvertMode`]({{ site.api }}enumeration-type/enumconvertmode.html).\n\nDefault value: `Dynamsoft.DDV.EnumConvertMode.CM_AUTO`\n\n### password\n\nIf a password is required to open the PDF, please set it here. \n\nDefault value: `\"\"`.\n\n### renderOptions\n\n#### renderAnnotations\n\nSpecify how to load the annotations. Please refer to [`EnumAnnotationRenderMode`]({{ site.api }}enumeration-type/enumannotationrendermode.html).\n\nOnly take effects when [`convertMode`](#convertmode) is set to `Dynamsoft.DDV.EnumConvertMode.CM_RENDERALL` or `Dynamsoft.DDV.EnumConvertMode.CM_AUTO`(`Dynamsoft.DDV.EnumConvertMode.CM_RENDERALL` in fact).\n\nDefault value: `Dynamsoft.DDV.EnumAnnotationRenderMode.NO_ANNOTATIONS`\n\n#### resolution\n\nPDF DPI. Only affects rasterized text. Does not affect images which are extracted from the PDF file. \n\nDefault value: 200\n\n#### maxWidth\n\nMaximum width of the image to be rendered. \n\nIn pixels. 0 means no limit. Default value: 0\n\n#### maxHeight\n\nMaximum height of the image to be rendered. \n\nIn pixels. 0 means no limit. Default value: 0\n\n#### renderGrayscale\n\nWhether rasterize the PDF in grayscale.\n\nDefault value: `false`\n\nOnly take effects when [`convertMode`](#convertmode) is set to `Dynamsoft.DDV.EnumConvertMode.CM_RENDERALL` or `Dynamsoft.DDV.EnumConvertMode.CM_AUTO`(`Dynamsoft.DDV.EnumConvertMode.CM_RENDERALL` in fact).\n\n## Related\n\n- [`loadSource()`]({{ site.api }}interface/idocument/index.html#loadsource)",
-      "breadcrumb": "Interface PdfSource"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Features - Perspective Viewer",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/features/viewers/perspectiveviewer.html",
-      "content": "# Perspective Viewer\n\nPerspective Viewer is used to do page boundaries manual adjustment & perspective transformation. The page data displayed on this viewer is its original data.\n\n- [Default user interface]({{ site.ui }}default_ui.html#perspective-viewer)\n- [Default viewer configuration]({{ site.viewer }}viewerconfig.html#perspective-viewer)\n\n```typescript\nconst perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({\n    container: document.getElementById(\"viewer\"),\n});\n\nperspectiveViewer.openDocument(\"docUid\"); // Open a document which has pages\n```\n\n## Quadrilateral selection\n\nQuadrilateral Selection in the perspective viewer means the selection which will be perspective transformed.\n\n![Quad selection](/assets/imgs/quadselection.png)\n\nIn addition to drawing and adjusting the selection through the UI, DDV also provides some additional interfaces to operate the selection.\n\n- Set a quadrilateral selection on the current page by using [`setQuadSelection()`]({{ site.api }}class/perspectiveviewer.html#setquadselection). If the selection is exceeds the bounds of the current page, it won't take effect.\n\n    ```typescript\n    const quad = [\n        [314,518],\n        [2200,625],\n        [2204,3339],\n        [176,3048]\n    ];\n\n    perspectiveViewer.setQuadSelection(quad);\n    ```\n\n- Obtain the coordinates of the four vertices of the quadrilateral selection by using [`getQuadSelection()`]({{ site.api }}class/perspectiveviewer.html#getquadselection). It returns an array of the four corner coordinates of the quadrilateral selection.\n\n    ```typescript\n    const quad = perspectiveViewer.getQuadSelection();\n    ```\n\n- Reset the quadrilateral selection to the original one by using [`resetQuadSelection()`]({{ site.api }}class/perspectiveviewer.html#resetquadselection). The original selection on the page can be detected by [Document Detect]({{ site.features }}advanced/documentdetect.html) during capturing in the capture viewer or set by [`ExtraPageData`]({{ site.api }}interface/idocument/extrapagedata.html) in [`loadSource()`]({{ site.api }}interface/idocument/index.html#loadsource) when loading the page. If it is not detected or set before, the original selection would be the whole page range.\n\n    ```typescript\n    perspectiveViewer.resetQuadSelection();\n    ```\n\n## Perspective transformation\n\nPerspective transformation in the perspective viewer is to rectify the quadrilateral selection. It is implemented by the method [`applyPerspective()`]({{ site.api }}class/perspectiveviewer.html#applyperspective).\n\n```typescript\nconst quad = perspectiveViewer.getQuadSelection();\nawait perspectiveViewer.applyPerspective(quad);\n```\n\n",
-      "breadcrumb": "Perspective Viewer"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - PerspectiveViewer Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/perspectiveviewer.html",
-      "content": "# PerspectiveViewer Class\n\nPerspective Viewer is used to do page boundaries manual adjustment & perspective transformation. The page data displayed on this viewer is its original data.\n\n## API Index\n\n**Create and Destroy Instances** \n\n| API Name       | Description                                   |\n| ------------ | --------------------------------------------- |\n| [`PerspectiveViewer()`](#perspectiveviewer) | Default constructor of a `PerspectiveViewer` instance. |\n| [`destroy()`](#destroy)             | Destroy the `PerspectiveViewer` instance.                             |\n\n**Viewer Control**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`bindContainer()`](#bindcontainer)     | Bind the viewer to the specified container.                  |\n| [`unbindContainer()`](#unbindcontainer) | Unbind the viewer from the specified container.              |\n| [`isBoundContainer`](#isboundcontainer) | Return whether the viewer is bound to a container. |\n| [`getStyle()`](#getstyle)            | Get the style object of `PerspectiveViewer`.                        |\n| [`getVisiblePagesInfo()`](#getVisiblePagesInfo)               | Get the visible pages info                |\n| [`updateStyle()`](#updatestyle)        | Update the style object of `PerspectiveViewer`.                     |\n| [`getUiConfig()`](#getuiconfig)         | Get current `UiConfig` object.                               |\n| [`updateUiConfig()`](#updateuiconfig)     | Update `UiConfig` object.                                    |\n| [`show()`](#show)                | Show the viewer.                                             |\n| [`hide()`](#hide)                | Hide the viewer.                                             |\n| [`isVisible`](#isvisible)        | Return whether the viewer is shown or hidden.      |\n\n**Document and Page Control**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`openDocument()`](#opendocument)        | Open the specified document by document uid.                 |\n| [`closeDocument()`](#closedocument)       | Close current document.                                      |\n| [`currentDocument`](#currentdocument)   | Return the object of the current document.         |\n| [`getPageCount()`](#getpagecount)        | Get the page count in the viewer.                            |\n| [`goToPage()`](#gotopage)            | Navigate to the specified page by index.                     |\n| [`getCurrentPageIndex()`](#getcurrentpageindex) | Get the index of current page.                               |\n| [`getCurrentPageUid()`](#getcurrentpageuid)   | Get the uid of the current page.                             |\n| [`indexToUid()`](#indextouid)          | Get the uid of the specified page by its index.                      |\n| [`uidToIndex()`](#uidtoindex)          | Get the index of the specified page by its uid. |\n\n**Perspective Transformation**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`setQuadSelection()`](#setquadselection)    | Set a quadrilateral selection on the current page.              |\n| [`getQuadSelection()`](#getquadselection)    | Get the quadrilateral selection.                                |\n| [`resetQuadSelection()`](#resetquadselection)  | Reset the quadrilateral selection to the original one.          |\n| [`applyPerspective()`](#applyperspective)         | Performs a perspective transformation in current page based on the specified quadrangle. |\n\n**Edit Operations**\n\n| API Name              | Description                                                  |\n| --------------------- | ------------------------------------------------------------ |\n| [`rotate()`](#rotate)              | Rotate the specified pages.                                  |\n| [`saveOperations()`](#saveoperations)      | Save the edit operations in pages to document.               |\n\n**Events**\n\n| API Name | Description                                        |\n| -------- | -------------------------------------------------- |\n| [`on()`](#on)     | Bind a listener to the specified event.            |\n| [`off()`](#off)    | Unbind event listener(s) from the specified event. |\n\n***Integrated Events***\n\n| Event Name          |\n| ------------------- |\n| [`resized`](#resized)             |\n| [`pageRendered`](#pagerendered)        |\n| [`currentIndexChanged`](#currentindexchanged) |\n| [`currentPageChanged`](#currentpagechanged)  |\n| [`quadModified`](#quadmodified)    |\n| [`click`](#click)               |\n| [`dblclick`](#dbclick)            |\n| [`rightclick`](#rightclick)          |\n| [`visibilityChanged`](#visibilitychanged)                   |\n| [`paginationChanged`](#paginationchanged)                   |\n| [`pointerdown`](#pointerdown)                   |\n| [`pointermove`](#pointermove)                   |\n| [`pointerup`](#pointerup)                   |\n| [`pageover`](#pageover)                   |\n| [`pageout`](#pageout)                   |\n\n\n## Create and Destroy Instances\n\n### PerspectiveViewer()\n\nDefault constructor of a `PerspectiveViewer` instance.\n\n**Syntax**\n\n```typescript\nnew Dynamsoft.DDV.PerspectiveViewer(options?: PerspectiveViewerConstructorOptions);\n```\n\n**Parameters**\n\n`options`: The constructor options for a `PerspectiveViewer` instance. Please refer to [`PerspectiveViewerConstructorOptions`]({{ site.api }}interface/perspectiveviewerconstructoroptions.html).\n\n**Code Snippet**\n\n```typescript\nconst perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({\n    container: document.getElementById(\"viewer\"),\n});\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                                     \n -80001 | License string is invalid.                              \n -80002 | *XXX(LicenseModuleName)* module license has expired.                                                           \n -80003 | *XXX(LicenseModuleName)* module license is missing.                         \n -80004 | *XXX(LicenseModuleName)* module license version does not match.                                 \n -80005 | Domain does not match the domain bound to the *XXX(LicenseModuleName)* module license.  \n -80050 | DDV.Core.init() has not been set up yet.  \n -80051 | DDV.Core.init() has not been completed.   \n\n### destroy()\n\nDestroy the `PerspectiveViewer` instance.\n\n**Syntax**\n\n```typescript\ndestroy(): void;\n```\n\n**Code Snippet**\n\n```typescript\nperspectiveViewer.destroy();\n```\n\n**Remark**\n\n- The editing operations (rotating) in pages will be saved to document automatically when destroy the viewer instance.\n\n**See Also**\n\n[saveOperations](#saveoperations)\n\n## Viewer Control\n\n### bindContainer()\n\nBind the viewer to the specified container.\n\n**Syntax**\n\n```typescript\nbindContainer(container: string | HTMLElement): void;\n```\n\n**Parameters**\n\n`container`: The container which is used to show the viewer. Its `id` or `HTMLElement` is acceppted.\n\n**Code Snippet**\n\n```typescript\n// Assume there is a container with id \"viewercontainer\" on the page.\nperspectiveViewer.bindContainer(\"viewercontainer\");\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80301 | The specified container does not exist. \n\n**Remark**\n\n- A viewer can only be bound to one container at once. If you bind the viewer to another container when it has been bound to a container, the viewer will be bound to the new container and unbound from the old container automatically. \n\n### unbindContainer()\n\nUnbind the viewer from the specified container.\n\n**Syntax**\n\n```typescript\nunbindContainer(): void;\n```\n\n**Code Snippet**\n\n```typescript\nperspectiveViewer.unbindContainer();\n```\n\n### isBoundContainer\n\nReturn whether the viewer is bound to a container.\n\n**Syntax**\n\n```typescript\nreadonly isBoundContainer: boolean;\n```\n\n### getStyle()\n\nGet the style object of `PerspectiveViewer`.\n\n**Syntax**\n\n```typescript\ngetStyle(perspectiveViewerStyleName: PerspectiveViewerStyleName): PerspectiveViewerStyle | null;\n```\n\n**Parameters**\n\n`perspectiveViewerStyleName`: A `PerspectiveViewerStyleName` can be one of three types.\n\n```typescript\ntype PerspectiveViewerStyleName = \"canvasStyle\" | \"pageStyle\" | \"quadSelectionStyle\";\n```\n\n**Return values**\n\nThe style object. Please refer to [Style Interfaces]({{ site.api }}interface/styleinterface/index.html)..\n\n**Code Snippet**\n\n```typescript\n// Get pageStyle object;\nconst pageStyle = perspectiveViewer.getStyle(\"pageStyle\");\n```\n\n**Warning**\n\n Error Code  | Error Message                                                            | API Return Value\n--------|-------------------------------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `null`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `null`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `null`\n\n### getVisiblePagesInfo()\n\nGet the visible pages info.\n\n**Syntax**\n\n```typescript\ngetVisiblePagesInfo(): PageVisualInfo[];\n```\n\n**Return values**\n\nArray of the `PageVisualInfo` object. Please refer to [`PageVisualInfo`](/api/interface/pagevisualinfo.md).\n\n### updateStyle()\n\nUpdate the style object of `PerspectiveViewer`.\n\n**Syntax**\n\n```typescript\nupdateStyle(perspectiveViewerStyleName: PerspectiveViewerStyleName, perspectiveViewerStyle: PerspectiveViewerStyle): boolean;\n```\n\n**Parameters**\n\n`perspectiveViewerStyleName`: A `PerspectiveViewerStyleName` can be one of three types.\n\n```typescript\ntype PerspectiveViewerStyleName = \"canvasStyle\" | \"pageStyle\" | \"quadSelectionStyle\";\n```\n\n`perspectiveViewerStyle`: The style object. Please refer to [Style Interfaces]({{ site.api }}interface/styleinterface/index.html).\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n- First method\n\n    ```typescript\n    // Get style object\n    const pageStyle = perspectiveViewer.getStyle(\"pageStyle\");\n\n    // Modify the style object\n    pageStyle.background = \"red\";\n    pageStyle.border = \"1px solid green\";\n\n    // Update page style\n    perspectiveViewer.updateStyle(\"pageStyle\", pageStyle);\n    ```\n\n- Second method\n\n    ```typescript\n    // Update the style object directly\n    perspectiveViewer.updateStyle(\"pageStyle\", {\n        background: \"red\",\n        border: \"1px solid green\",\n    });\n    ```\n\n**Warning**\n\n Error Code  | Error Message                                                            | API Return Value\n--------|-------------------------------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `false`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `false`\n\n\n**Remark**\n\n- The updates are independent of whether the viewer is displayed and are updated in real time.\n\n### getUiConfig()\n\nGet current `UiConfig` object.\n\n**Syntax**\n\n```typescript\ngetUiConfig(): UiConfig;\n```\n\n**Return Value**\n\nThe [`UiConfig`]({{ site.api }}interface/uiconfig.html) object.\n\n**Code Snippet**\n\n```typescript\nconst viewerUi = perspectiveViewer.getUiConfig();\n```\n\n### updateUiConfig()\n\nUpdate `UiConfig` object.\n\n**Syntax**\n\n```typescript\nupdateUiConfig(uiConfig: UiConfig): boolean;\n```\n\n**Parameters**\n\n`uiConfig`: The [`UiConfig`]({{ site.api }}interface/uiconfig.html) to update.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst viewerUi = Dynamsoft.DDV.getDefaultUiConfig(\"perspectiveViewer\");\nconst header = viewerUi.children[0];\nheader.children.splice(0,0,Dynamsoft.DDV.Elements.Load); //Add Load element in header.\nperspectiveViewer.updateUiConfig(viewerUi);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n -80313 | The element *XXX(ElementName)* is not supported in *XXX(ClassName)* class.      | `false`\n\n**Remark**\n\n- The updates are independent of whether the viewer is displayed and are updated in real time.\n\n### show()\n\nShow the viewer.\n\n**Syntax**\n\n```typescript\nshow(): void;\n```\n\n**Code Snippet**\n\n```typescript\nperspectiveViewer.show();\n```\n\n**Remark**\n\n- The viewer is shown automatically when it is created.\n\n### hide()\n\nHide the viewer.\n\n**Syntax**\n\n```typescript\nhide(): void;\n```\n\n**Code Snippet**\n\n```typescript\nperspectiveViewer.hide();\n```\n\n### isVisible\n\nReturn whether the viewer is shown or hidden.\n\n**Syntax**\n\n```typescript\nreadonly isVisible: boolean;\n```\n\n**Remark**\n\n- The viewer is shown automatically when it is created which means the default value of `isVisible` is `true`.\n\n## Document and Page Control\n\n### openDocument()\n\nOpen the specified document.\n\n**Syntax**\n\n```typescript\nopenDocument(docUid: string | doc: IDocument): void;\n```\n\n**Parameters**\n\n`docUid`: The uid of the specified document. \n\n`doc`: The object of the document to open. Please refer to [IDocument]({{ site.api }}interface/idocument/index.html).\n\n**Code Snippet**\n\n```typescript\n// Assume there is a document whose id is \"lnn0ll9o124\".\nperspectiveViewer.openDocument(\"lnn0ll9o124\");\n\n// OR\n// Assume there is a document object firstDoc.\nconst docUid = firstDoc.uid;\nperspectiveViewer.openDocument(docUid);\nperspectiveViewer.openDocument(firstDoc);\n```\n\n**Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: docUid or doc is invalid.   \n -80102 | *XXX(API)*: docUid or doc is missing.   \n -80104 | *XXX(API)*: The specified document(s) do not exist.  \n\n**Remark**\n\n- If another ducument is opened when there is a document already opened, the opened document will be closed automatically.\n\n### closeDocument()\n\nClose current document.\n\n**Syntax**\n\n```typescript\ncloseDocument(): boolean; \n```\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nperspectiveViewer.closeDocument();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `false`\n\n### currentDocument\n\nReturn the object of the current document.\n\n**Syntax**\n\n```typescript\nreadonly currentDocument: IDocument | null;\n```\n\n**Code Snippet**\n\n```typescript\nconst currentDoc = perspectiveViewer.currentDocument;\n```\n\n**See Also**\n\n[IDocument]({{ site.api }}interface/idocument/index.html)\n\n### getPageCount()\n\nGet the page count in the viewer.\n\n**Syntax**\n\n```typescript\ngetPageCount(): number;\n```\n\n**Return Value**\n\nThe page count.\n\n**Code Snippet**\n\n```typescript\nconst pageCount = perspectiveViewer.getPageCount();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `-1`\n\n### goToPage()\n\nNavigate to the specified page by index.\n\n**Syntax**\n\n```typescript\ngoToPage(index: number): number;\n```\n\n**Parameters**\n\n`index`: The index of the page which need to navigate to.\n\n**Return Value**\n\nThe index of the page which navigate to.\n\n**Code Snippet**\n\n```typescript\n// Navigate to page 4.\nperspectiveViewer.goToPage(3);\n```\n\n**Warning**\n\n Error Code  | Error Message                                             | API Return Value\n--------|----------------------------------------------------------|------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.        | `-1`\n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.    | `-1`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.       | `-1`\n -80304 | No document opened.                                      | `-1`\n -80305 | There is no image in the current document.               | `-1`\n\n### getCurrentPageIndex()\n\nGet the index of the current page.\n\n**Syntax**\n\n```typescript\ngetCurrentPageIndex(): number; \n```\n\n**Return Value**\n\nThe index of the current page.\n\n**Code Snippet**\n\n```typescript\nconst currentIndex = perspectiveViewer.getCurrentPageIndex();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `-1`\n -80305 | There is no image in the current document.          | `-1`\n\n### getCurrentPageUid()\n\nGet the uid of the current page.\n\n**Syntax**\n\n```typescript\ngetCurrentPageUid(): string;\n```\n\n**Return Value**\n\nThe uid of the current page.\n\n**Code Snippet**\n\n```typescript\nconst curPageUid = perspectiveViewer.getCurrentPageUid();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|--------------------\n -80304 | No document opened.                                 | `''`\n -80305 | There is no image in the current document.          | `''`\n\n### indexToUid()\n\nGet the uid of the specified page by its index.\n\n**Syntax**\n\n```typescript\nindexToUid(index: number): string;\n```\n\n**Parameters**\n\n`index`: The index of the specified page.\n\n**Return Value**\n\nThe uid of the page.\n\n**Code Snippet**\n\n```typescript\n// Get the first page's uid\nconst firstPageUid = perspectiveViewer.indexToUid(0);\n```\n\n**Warning**\n\n Error Code  | Error Message                                             | API Return Value\n--------|----------------------------------------------------------|------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.        | `''`\n -80101 | *XXX(API)*: *XXX(ParameterName)* is out of range.    | `''`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.       | `''`\n -80304 | No document opened.                                      | `''`\n -80305 | There is no image in the current document.               | `''`\n\n### uidToIndex()\n\nGet the index of the specified page by its uid.\n\n**Syntax**\n\n```typescript\nuidToIndex(pageUid: string): number;\n```\n\n**Parameters**\n\n`pageUid`: The uid of the specified page.\n\n**Return Value**\n\nThe index of the page.\n\n**Code Snippet**\n\n```typescript\nconst curPageUid = perspectiveViewer.getCurrentPageUid();\nperspectiveViewer.uidToIndex(curPageUid);\n```\n\n**Warning**\n\n Error Code  | Error Message                                             | API Return Value\n--------|----------------------------------------------------------|------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.        | `-1`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.       | `-1`\n -80105 | *XXX(API)*: The specified page(s) do not exist.  | `-1`\n -80304 | No document opened.                                      | `-1`\n -80305 | There is no image in the current document.               | `-1`\n\n## Perspective Transformation\n\n### setQuadSelection()\n\nSet a quadrilateral selection on the current page.\n\n**Syntax**\n\n```typescript\nsetQuadSelection(quad: Quad): boolean;\n```\n\n**Parameters**\n\n`quad`: A quadrangle. Please refer to [`Quad`]({{ site.api }}enumeration-type/quad.html).\n\n**Example**\n\n```typescript\nconst quad = [\n    [80,200],\n    [180,120],\n    [115,340],\n    [70,330]\n];\n\nperspectiveViewer.setQuadSelection(quad);\n```\n\n**Warning**\n\n Error Code  | Error Message                                              | API Return Value\n--------|-----------------------------------------------------------|-------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.         | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.        | `false`\n -80304 | No document opened.                                       | `false`\n -80305 | There is no image in the current document.                | `false`\n -80312 | The specified quad exceeds the bounds of the current page.| `false`\n\n\n**Remark**\n\n- In the viewer, only one quadrilateral selection can exist on the page at a time, which means if there is a quadrilateral selection existed when a new selection is drawn, the old one will be clear automatically.\n\n### getQuadSelection()\n\nGet the quadrilateral selection.\n\n**Syntax**\n\n```typescript\ngetQuadSelection(): Quad | null;\n```\n\n**Return value**\n\nA quadrangle. Please refer to [`Quad`]({{ site.api }}enumeration-type/quad.html).\n\n**Example**\n\n```typescript\nconst quad = perspectiveViewer.getQuadSelection();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|---------------------\n -80304 | No document opened.                                 | `null`\n -80305 | There is no image in the current document.          | `null`\n\n### resetQuadSelection()\n\nReset the quadrilateral selection to the original one. The original selection means the last saved one.\n\n**Syntax**\n\n```typescript\nresetQuadSelection(indices?: number[]): boolean;\n```\n\n**Parameters**\n\n`indices`: The array of the pages indices which will be reset. If not set, the current page will be reset.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Example**\n\n```typescript\nperspectiveViewer.resetQuadSelection();\n```\n\n**Warning**\n\n Error Code  | Error Message                                              | API Return Value\n--------|-----------------------------------------------------------|-------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.         | `false`\n -80304 | No document opened.                                       | `false`\n -80305 | There is no image in the current document.                | `false`\n\n\n### applyPerspective()\n\nPerforms a perspective transformation in current page based on the specified quadrangle.\n\n**Syntax**\n\n```typescript\napplyPerspective(quad: Quad): Promise<Blob>;\n```\n\n**Parameters**\n\n`quad`: The quadrangle to be transferred. Please refer to [`Quad`]({{ site.api }}enumeration-type/quad.html).\n\n**Return value**\n\nThe Blob of the result image after perspective transformation.\n\n**Example**\n\n```typescript\nconst quad = perspectiveViewer.getQuadSelection();\n\nawait perspectiveViewer.applyPerspective(quad);\n```\n\n**Promise Exception**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n -80304 | No document opened.                                 \n -80305 | There is no image in the current document. \n -80312 | The specified quad exceeds the bounds of the current page.         \n\n## Edit Operations\n\n### rotate()\n\nRotate the specified pages.\n\n**Syntax**\n\n```typescript\nrotate(\n    angle: number,\n    indices?: number[] \n): boolean; \n```\n\n**Parameters**\n\n`angle`: Specify the angle. Only multiples of 90 degrees are supported. Clockwise rotation is positive, counterclockwise rotation is negative.\n\n`indices`: The array of the pages indices which will be rotated. If not set, the current page will be rotated.\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Rotate the first and second pages 90 degrees clockwise.\nperspectiveViewer.rotate(90, [0,1]);\n\n// Rotate current page 90 degrees counterclockwise.\nperspectiveViewer.rotate(-90);\n```\n\n**Warning**\n\n Error Code  | Error Message                                                       | API Return Value\n--------|-------------------------------------------------------------------------|-------------------    \n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.                       | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.                      | `false`\n -80103 | *XXX(API)*: The value for *XXX(ParameterName)* is not supported. | `false`\n -80304 | No document opened.                                                     | `false`\n -80305 | There is no image in the current document.                              | `false`\n\n### saveOperations()\n\n> *This method takes effect only for [rotate](#rotate) operation.*\n\nSave the edit operations in pages to document.\n\n**Syntax**\n\n```typescript\nsaveOperations(): boolean;\n```\n\n**Return Value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nperspectiveViewer.saveOperations();\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|-----------------\n -80304 | No document opened.                                 | `false`\n\n## Events\n\n### on()\n\nBind a listener to the specified event. \n\n**Syntax**\n\n```typescript\non(eventName: EventName, listener:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It can be [an integrated event name](#integrated-events) or a custom event name configured through [`UiConfig`-`events`]({{ site.api }}interface/uiconfig.html#events).\n\n`listener`: Specify the listener.\n\n**Code Snippet**\n\n```typescript\n// Bind a listener to the integrated event resized.\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.oldWidth);\n    console.log(e.newWidth);\n};\n\nperspectiveViewer.on(\"resized\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n\n### off()\n\nUnbind event listener(s) from the specified event. \n\n**Syntax**\n\n```typescript\noff(eventName: EventName, listener?:(event:EventObject)=>void): void;\n```\n\n**Parameters**\n\n`eventName`: Specify the event name. It can be [an integrated event name](#integrated-events) or a custom event name configured through [`UiConfig`-`events`]({{ site.api }}interface/uiconfig.html#events).\n\n`listener`: Specify the listener. If no listener is specified, unbind all event listeners from the specified event.\n\n**Code Snippet**\n\n```typescript\nconst eventFunc = (e)=>{\n    console.log(e);\n    console.log(e.oldWidth);\n    console.log(e.newWidth);\n};\n\nperspectiveViewer.on(\"resized\", eventFunc);\n\n// Unbind the specified event listener.\nperspectiveViewer.off(\"resized\", eventFunc);\n```\n\n**Warning**\n\n Error Code  | Error Message                                        \n--------|-----------------------------------------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   \n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  \n\n### Integrated Events\n\n#### resized\n\nTriggered when the viewer is resized.\n\n**Callback**\n\n`ResizedEvent`: An EventObject.\n\n**Attributes**\n\n`oldWidth`: The old width of the viewer.\n\n`oldHeight`: The old height of the viewer.\n\n`newWidth`: The new width of the viewer.\n\n`newHeight`: The new height of the viewer.\n\n#### pageRendered\n\nTriggered when a page has been completely rendered. We only render the pages that are visible on the screen, so this event won't get fired for every page in the document at once. This event will get called when the user scrolls up and down the document, or when a page is rotated, or anything else that makes it rerender.\n\n**Callback**\n\n`PageRenderedEvent`: An EventObject.\n\n**Attributes**\n\n`index`: The index of the rendered page.\n\n`pageUid`: The pageUid of the rendered page.\n\n#### currentIndexChanged\n\nTriggered when currentIndex is changed.\n\n**Callback**  \n\n`CurrentindexChangedEvent`: An EventObject.\n\n**Attributes**\n\n`oldIndex`: The old current index.\n\n`newIndex`: The new current index. If there is no index in the viewer, return `-1`.\n\n#### currentPageChanged\n\nTriggered when current page is changed.\n\n**Callback**\n\n`CurrentPageChangedEvent`: An EventObject.\n\n**Attributes**\n\n`oldPageUid`: The uid of the page which is old current index. If the old page is removed, return `''`.\n\n`newPageUid`: The uid of the page which is new current index. If there is no index in the viewer, return `''`.\n\n#### quadModified\n\nTriggered when the quadrilateral selection is modified. Please refer to [`IQuadModifiedEvent`](/api/interface/iquadmodifiedevent.md).\n\n#### paginationChanged\n\nTriggered when the viewer's current page number or the page count is changed. It will return an [`IPaginationChangedEvent`](/api/interface/ipaginationchangedevent.md) object.\n\n#### visibilityChanged\n\nTriggered when the viewer's visibility is changed. It will return an `isVisible` boolean value.\n\n#### pointerdown\n\nTriggered when a pointer becomes active buttons state. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pointermove\n\nTriggered when a pointer changes coordinates. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pointerup\n\nTriggered when a pointer is no longer active buttons state. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pageover\n\nTriggered when a pointer is moved into a page's hit test boundaries. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### pageout\n\nTriggered when a pointer is moved out of the hit test boundaries of a page. It will return an [`IPointerEvent`](/api/interface/ipointerevent.md) object.\n\n#### Mouse Events\n\n##### click\n\nTriggered when click in the viewer's viewing area. On mobile device, triggered when tap in the viewer's viewing area.\n\n##### dblclick\n\nTriggered when double click in the viewer's viewing area.\n\n##### rightclick\n\nTriggered when right click in the viewer's viewing area. On mobile device, triggered when long-tap in the viewer's viewing area.\n\n**Callback for mouse events**\n\n `IPointerEvent`: An EventObject.\n\n**Attributes**\n\n`index`: The page index.\n\n`pageUid`: The page uid.\n\n`imageX`: The relative x-coordinate of the click pointer on the image.\n\n`imageY`: The relative y-coordinate of the click pointer on the image.\n\n`canvasX`: The relative x-coordinate of the click pointer on the canvas.\n\n`canvasY`: The relative x-coordinate of the click pointer on the canvas.\n\n`nativeEvent`: [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)",
-      "breadcrumb": "PerspectiveViewer Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PerspectiveViewerConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/perspectiveviewerconfig.html",
-      "content": "# PerspectiveViewerConfig\n\n## Syntax\n\n```typescript\ninterface PerspectiveViewerConfig {\n    canvasStyle?: CanvasStyle;\n    pageStyle?: BaseStyle;\n    quadSelectionStyle?: QuadSelectionStyle;\n    enableLoadSourceByDrag?: boolean;\n    enableMagnifier?: boolean;\n    enableSlide?: boolean;\n    scrollToLatest?: boolean;\n}\n```\n\n## Attributes\n\n### canvasStyle\n\nThe style of canvas of the viewer. Please refer to [`CanvasStyle`]({{ site.api }}interface/styleinterface/canvasstyle.html).\n\n### pageStyle\n\nThe style of displayed page in the viewer. Please refer to [`BaseStyle`]({{ site.api }}interface/styleinterface/basestyle.html).\n\n### quadSelectionStyle\n\nThe style of quadrilateral selection. Please refer to [`QuadSelectionStyle`]({{ site.api }}interface/styleinterface/quadselectionstyle.html).\n\n### enableLoadSourceByDrag\n\nEnables loading files by dragging them into the Viewer.\n\nDefault value: `true`\n\n### enableMagnifier\n\nSpecifies whether or not to display a corner magnifier on the canvas. This feature is primarily used to provide a zoomed-in preview of the selected area for more precise adjustments.\n\nDefault value: `true`\n\n### enableSlide\n\nSpecifies whether or not to allow to slide the pages.\n\n### scrollToLatest\n\nSpecifies whether or not to scroll to latest page automatically when importing new pages.\n\nDefault value: `false`\n\n\n## Related\n\n- [`PerspectiveViewerConstructorOptions`]({{ site.api }}interface/perspectiveviewerconstructoroptions.html)",
-      "breadcrumb": "Interface PerspectiveViewerConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PerspectiveViewerConstructorOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/perspectiveviewerconstructoroptions.html",
-      "content": "# PerspectiveViewerConstructorOptions\n\n## Syntax\n\n```typescript\ninterface PerspectiveViewerConstructorOptions {\n    container?: string | HTMLElement;\n    viewerConfig?: PerspectiveViewerConfig; // The configurations of viewer, such as page style, minZoom, maxZoom and so on.\n    uiConfig?: UiConfig; // The UI layout configurations.\n    groupUid?: string; //The uid of viewer's group, if it is not set, a random groupUid will generate.\n}\n```\n\n## Attributes\n\n### container\n\nThe container which is used to show the viewer. Its `id` or `HTMLElement` is acceppted.\n\n### viewerConfig\n\nThe configurations of viewer, please refer to [`PerspectiveViewerConfig`]({{ site.api }}interface/perspectiveviewerconfig.html). If it is not specified, the [default configuration]({{ site.viewer }}viewerconfig.html#perspectiveviewerconfig) will be applied.\n\n### uiConfig\n\nThe UI layout configurations of viewer, please refer to [`UiConfig`]({{ site.api }}interface/uiconfig.html). If it is not specified, the [default UI]({{ site.ui }}default_ui.html#perspective-viewer) will be applied.\n\n### groupUid\n\nThe uid of viewers' group. If it is not specified, a random groupUid will be generated.\n\n{% comment %} Please refer to [Data synchronisation between viewers]({{ site.features }}viewers/datasync.html). {% endcomment %}\n\n## Related\n\n- [`PerspectiveViewer()`]({{ site.api }}class/perspectiveviewer.html#perspectiveviewer)",
-      "breadcrumb": "Interface PerspectiveViewerConstructorOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PlayCallbackInfo",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/playcallbackinfo.html",
-      "content": "# PlayCallbackInfo\n\n## Syntax\n\n```typescript\ninterface PlayCallbackInfo {\n    deviceId: string;\n    width: number;\n    height: number; \n}\n```\n\n## Attributes\n\n### deviceId\n\nThe ID of the currently used camera.\n\n### width\n\nThe width (in pixels) of the video input.\n\n### height\n\nThe height (in pixels) of the video input.\n\n## Related\n\n- [`selectCamera()`]({{ site.api }}class/captureviewer.html#selectcamera)",
-      "breadcrumb": "Interface PlayCallbackInfo"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface Point",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/point.html",
-      "content": "# Point\n\n## Syntax\n\n```typescript\ninterface Point {\n    x: number; \n    y: number; \n}\n```\n\n## Attributes\n\n### x\n\nThe x-coordinates of the point.\n\n### y\n\nThe y-coordinates of the point.\n\n## Related\n\n- [`PolygonAnnotationOptions`]({{ site.api }}interface/annotationinterface/polygonannotationoptions.html)\n- [`PolylineAnnotationOptions`]({{ site.api }}interface/annotationinterface/polylineannotationoptions.html)\n- [`LineAnnotationOptions`]({{ site.api }}interface/annotationinterface/lineannotationoptions.html)\n- [`InkAnnotationOptions`]({{ site.api }}interface/annotationinterface/inkannotationoptions.html)",
-      "breadcrumb": "Interface Point"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Polygon Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/polygon.html",
-      "content": "# Polygon Class\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n{% comment %}\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n\n{% comment %}\n## aabb\n\nReturn Axis-aligned bounding box of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly aabb: Rect;\n```\n\n**Remark**\n\n![AABB-Polygon](/assets/imgs/aabbpolygon.png)\n\n{% endcomment %}\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `polygon`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;  //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted. \n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate). \n\n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): PolygonAnnotationOptions;\n```\n\n**Return value**\n\nThe object of polygon annotation options. Please refer to [`PolygonAnnotationOptions`]({{ site.api }}interface/annotationinterface/polygonannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst polygon = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"polygon\"); // Create a default Polygon annotation instance.\nconst polygonOptions = polygon.getOptions();\n```\n\n## updateOptions() \n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(polygonAnnotationOptions: PolygonAnnotationOptions): boolean;\n```\n\n**Parameters**\n\n`polygonAnnotationOptions`: The new polygon annotation options. Please refer to [`PolygonAnnotationOptions`]({{ site.api }}interface/annotationinterface/polygonannotationoptions.html).\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst polygon = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"polygon\"); // Create a default Polygon annotation instance.\nconst polygonOptions = {\n    background: \"red\",\n};\npolygon.updateOptions(polygonOptions); // Update the background of the polygon to red.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "Polygon Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PolygonAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/polygonannotationoptions.html",
-      "content": "# PolygonAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface PolygonAnnotationOptions {\n    points?: Point[];\n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number;\n    lineDash?: number[];\n    flags?: Flags;\n}\n```\n\n## Attributes\n\n### points\n\nThe points of the polygon annotation to draw. Please refer to [`Point`]({{ site.api }}interface/annotationinterface/point.html).\n\nDefault value: `[{x: 60, y: 10}, {x: 10, y: 55}, {x: 30, y: 110}, {x: 90, y: 110}, {x: 110, y: 55}]`\n\n![Polygon Location](/assets/imgs/polygonlocation.png)\n\n**Remark**\n\nThe number of elements in the array must be greater than or equal to two.\n\n### borderWidth\n\nThe border width of annotation. The unit is point.\n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill.\n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n![Polygon BorderStyle](/assets/imgs/polygonborderstyle.png)\n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### lineDash\n\nThe style of polygon annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n\n<!--\n### author\n\nThe author of annotation.\n\nDefault value: `''`\n\n### subject\n\nThe subject of annotation.\n\nDefault value: `''`  -->\n\n### flags\n\nThe flags of annotation. \n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n## Related\n\n- [`Polygon()`]({{ site.api }}class/annotation/polygon.html#polygon)\n- [`getOptions()`]({{ site.api }}class/annotation/polygon.html#getoptions) under `Polygon` class\n- [`updateOptions()`]({{ site.api }}class/annotation/polygon.html#updateoptions) under `Polygon` class",
-      "breadcrumb": "Interface PolygonAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PolygonStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/polygonstyle.html",
-      "content": "# PolygonStyle\n\n## Syntax\n\n```typescript\ninterface PolygonStyle {\n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number;\n    lineDash?: number[];\n}\n```\n\n## Attributes\n\n### borderWidth\n\nThe border width of annotation. The unit is point.\n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill.\n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### lineDash\n\nThe style of annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)",
-      "breadcrumb": "Interface PolygonStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Polyline Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/polyline.html",
-      "content": "# Polyline Class\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n{% comment %}\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n{% endcomment %}\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n\n{% comment %}\n## aabb\n\nReturn Axis-aligned bounding box of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly aabb: Rect;\n```\n\n{% endcomment %}\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `polyline`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n- It will return `''`, if the annotation is deleted.\n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;  //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted. \n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate). \n\n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): PolylineAnnotationOptions;\n```\n\n**Return value**\n\nThe object of polyline annotation options. Please refer to [`PolylineAnnotationOptions`]({{ site.api }}interface/annotationinterface/polylineannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst polyline = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"polyline\"); // Create a default Polyline annotation instance.\nconst polylineOptions = polyline.getOptions();\n```\n\n## updateOptions() \n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(polylineannotationoptions: PolylineAnnotationOptions): boolean;\n```\n\n**Parameters**\n\n`polylineannotationoptions`: The new polyline annotation options. Please refer to [`PolylineAnnotationOptions`]({{ site.api }}interface/annotationinterface/polylineannotationoptions.html).\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst polyline = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"polyline\"); // Create a default Polyline annotation instance.\nconst polylineOptions = {\n    lineEnding: {\n        end: Dynamsoft.DDV.EnumLineEnding.OPEN,\n    },\n};\npolyline.updateOptions(polylineOptions); // Update the line ending of the polyline to open.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "Polyline Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PolylineAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/polylineannotationoptions.html",
-      "content": "# PolylineAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface PolylineAnnotationOptions {\n    points?: Point[];\n    lineEnding?: {\n        start?: EnumLineEnding;\n        end?: EnumLineEnding;\n    };\n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number; \n    lineDash?: number[];\n    flags?: Flags;\n}\n```\n\n## Attributes\n\n### points\n\nThe points of the polyline annotation to draw. Please refer to [`Point`]({{ site.api }}interface/annotationinterface/point.html).\n\nDefault value: `[{x: 10, y: 40}, {x: 50, y: 80}, {x: 110, y: 10}]`\n\n![Polyline Location](/assets/imgs/polylinelocation.png)\n\n**Remark**\n\nThe number of elements in the array must be greater than or equal to two.\n\n### lineEnding\n\nThe line ending style of the polyline annotation.\n\n#### start\n\nSpecify the start point style of the polyline annotation. Please refer to [`EnumLineEnding`]({{ site.api }}enumeration-type/enumlineending.html).\n\nDefault value: `Dynamsoft.DDV.EnumLineEnding.NONE`\n\n#### end\n\nSpecify the end point style of the polyline annotation. Please refer to [`EnumLineEnding`]({{ site.api }}enumeration-type/enumlineending.html).\n\nDefault value: `Dynamsoft.DDV.EnumLineEnding.NONE`\n\n### borderWidth\n\nThe border width of annotation. The unit is point.\n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill. \n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n![Polyine BorderStyle](/assets/imgs/polylineborderstyle.png)\n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### lineDash\n\nThe style of polyline annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n<!--\n### author\n\nThe author of annotation.\n\nDefault value: `''`\n\n### subject\n\nThe subject of annotation.\n\nDefault value: `''`  -->\n\n### flags\n\nThe flags of annotation. \n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n## Related\n\n- [`Polyline()`]({{ site.api }}class/annotation/polyline.html#polyline)\n- [`getOptions()`]({{ site.api }}class/annotation/polyline.html#getoptions) under `Polyline` class\n- [`updateOptions()`]({{ site.api }}class/annotation/polyline.html#updateoptions) under `Polyline` class",
-      "breadcrumb": "Interface PolylineAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PolylineStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/polylinestyle.html",
-      "content": "# PolylineStyle\n\n## Syntax\n\n```typescript\ninterface PolylineStyle {\n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number;\n    lineDash?: number[];\n    lineEnding?: {\n        start?: EnumLineEnding;\n        end?: EnumLineEnding;\n    };\n}\n```\n\n## Attributes\n\n### borderWidth\n\nThe border width of annotation. The unit is point.\n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill.\n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### lineDash\n\nThe style of annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n\n### lineEnding\n\nThe line ending style of the line annotation.\n\n#### start\n\nSpecify the start point style of the line/polyline annotation. Please refer to [`EnumLineEnding`]({{ site.api }}enumeration-type/enumlineending.html).\n\nDefault value: `Dynamsoft.DDV.EnumLineEnding.NONE`\n\n#### end\n\nSpecify the end point style of the line/polyline annotation. Please refer to [`EnumLineEnding`]({{ site.api }}enumeration-type/enumlineending.html).\n\nDefault value: `Dynamsoft.DDV.EnumLineEnding.NONE`\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)",
-      "breadcrumb": "Interface PolylineStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface PrintSettings",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/printsettings.html",
-      "content": "# PrintSettings\n\n## Syntax\n\n```typescript\ninterface PrintSettings{\n    printAnnotation?: boolean;\n}\n```\n\n## Attributes\n\n### printAnnotation\n\nWhether to print the printable annotation(s) as the part of image. Default vaule: `true`.\n\n## Related\n\n- [`print()`]({{ site.api }}interface/idocument/index.html#print)",
-      "breadcrumb": "Interface PrintSettings"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Type Quad",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/enumeration-type/quad.html",
-      "content": "# Quad\n\n## Syntax\n\n```typescript\ntype Quad = [\n    [ number,number ], // Point one. The unit is pixel.\n    [ number,number ], // Point two. The unit is pixel.\n    [ number,number ], // Point three. The unit is pixel.\n    [ number,number ], // Point four. The unit is pixel.\n];\n```\n\n**Remark**\n\nThe four points should be arranged in a clockwise or counterclockwise  order.\n\n![Quad](/assets/imgs/quad.png)\n",
-      "breadcrumb": "Type Quad"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface QuadSelectionStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/styleinterface/quadselectionstyle.html",
-      "content": "# QuadSelectionStyle\n\n## Syntax\n\n```typescript\ninterface QuadSelectionStyle {\n    border?: string; \n    background?: string; \n    ctrlBorderRadius?: string; \n    ctrlBorder?: string; \n    ctrlWidth?: string; \n    ctrlHeight?: string; \n    ctrlBackground?: string; \n    invalidCtrlBorderColor?: string; \n    invalidBorderColor?: string; \n}\n```\n\n## Attributes\n\n### border\n\nThe border style of selection.\n\nThe border style contains three parts, borderWidth, borderStyle and borderColor.\n\nOnly takes effect when set borderWidth, borderStyle and borderColor at the same time.\n\nborderWidth only supports `px` unit.\n\nborderStyle only supports `dashed`, `solid`.\n\n**Example**\n\n```typescript\nborder: \"2px dashed red\", \n```\n\n### background\n\nThe background style of selection.\n\n**Example**\n\n```typescript\nbackground: \"rgba(220, 220, 220,0.5)\", \n```\n\n> ***The following attributes do not apply to `CaptureViewer` so far.***\n\n### ctrlBorderRadius\n\nThe border radius of Control Points. Supports `px` and `%`.\n\n### ctrlBorder\n\nThe border style of Control Points.\n\n```typescript\nctrlBorder: \"1px solid green\", \n```\n\n### ctrlWidth\n\nThe width of Control Points. Only supports `px` unit.\n\n### ctrlHeight\n\nThe height of Control Points. Only supports `px` unit.\n\n### ctrlBackground\n\nThe backgroud style of Control Points.\n\n### invalidCtrlBorderColor\n\nThe border color of Control Points when the selection is invalid.\n\n### invalidBorderColor\n\nThe border color of Selection when the selection is invalid.",
-      "breadcrumb": "Interface QuadSelectionStyle"
-    },
-    
-    {
-      "title": "React Document Viewer - Dynamsoft Document Viewer Documentation",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/gettingstarted/react.html",
-      "content": "# How to Integrate Document Viewer into a React Project\n\nThis guide will show you how to integrate Dynamsoft Document Viewer into a React project.\n\nYou can can download the sample on GitHub:\n\n![Download](/assets/imgs/download.png)[React Helloworld](https://github.com/Dynamsoft/document-viewer-samples/blob/main/hello-world/react-vite)\n\n## Preparation\n\nMake sure you have node installed.\n\n## New Project\n\nCreate a new React project.\n\n```bash\nnpm create vite@latest ddv-react -- --template react\n```\n\n## Add Dependencies\n\n1. Install Dynamsoft Document Viewer.\n\n   ```bash\n   npm install dynamsoft-document-viewer\n   ```\n   \n2. Copy the resources of Dynamsoft Document Viewer into the public folder.\n\n   \n   1. Install `rollup-plugin-copy` as `devDependencies`.\n   \n      ```bash\n      npm install rollup-plugin-copy --save-dev\n      ```\n      \n   \n   2. Modify `vite.config.js` to copy the resources.\n   \n      ```js\n      import copy from \"rollup-plugin-copy\";\n      export default defineConfig({\n        plugins: [\n          copy({\n            targets: [\n              {\n                src: \"node_modules/dynamsoft-document-viewer/dist\",\n                dest: \"public/dynamsoft-document-viewer\",\n              },\n            ],\n            hook: \"buildStart\",\n          }),\n          react()\n        ],\n      })\n      ```\n      \n      \n## Create a Document Viewer Component\n\n1. Create a viewer component file under `src\\components\\Viewer.jsx`.\n   \n2. Add the following content in the component file. It will bind Edit Viewer to a container. A license is set here. You can apply for a 30-day trial on [this page](https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv).\n\n   ```jsx\n   import { useEffect } from 'react'\n   import { DDV } from 'dynamsoft-document-viewer'\n   import \"dynamsoft-document-viewer/dist/ddv.css\"\n   import \"./Viewer.css\"\n   export default function Viewer() {\n     const init = async () => {\n       DDV.on('error', (e) => {\n         alert(e.message)\n       })\n     \n       // Public trial license which is valid for 24 hours\n       DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\";\n       DDV.Core.engineResourcePath = \"/dynamsoft-document-viewer/dist/engine\";\n       // Preload DDV Resource\n       DDV.Core.loadWasm();\n       await DDV.Core.init();\n\n       const viewer = new DDV.EditViewer({\n         container: 'container'\n       });\n     }\n\n     useEffect(() => {\n       init();\n     },[])\n\n     return (\n       <div id=\"container\"></div>\n     )\n   }\n   ```\n   \n   `Viewer.css`:\n   \n   ```css\n   #container {\n     width: 100%;\n     height: 100%;\n   }\n   ```\n\n## Use the Document Viewer Component\n\nOpen `App.jsx` and add the viewer component.\n\n```jsx\nimport './App.css'\nimport Viewer from './components/Viewer'\n\nfunction App() {\n  return (\n    <>\n      <h1>Hello World for React + Vite</h1>\n      <Viewer />\n    </>\n  )\n}\n\nexport default App\n```\n\n`App.css`:\n\n```css\nhtml,\nbody {\n  width: 100%;\n  height: 100%;\n}\n\nbody {\n  margin: 0px;\n  padding: 0px 8px 8px 8px;\n  box-sizing: border-box;\n}\n\n#root {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n```\n\nRun the app using the following command and you should see the viewer mounted in your application!\n\n```bash\nnpm run dev\n```\n\n## Other Samples\n\nYou can find other samples on [this GitHub repo](https://github.com/Dynamsoft/document-viewer-samples/).\n\n",
-      "breadcrumb": "React"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface Rect",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/rect.html",
-      "content": "# Rect\n\n## Syntax\n\n```typescript\ninterface Rect {\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n}\n```\n\n## Attributes\n\n### left\n\nThe x-coordinate of the upper-left corner of the area.\n\n### top\n\nThe y-coordinate of the upper-left corner of the area.\n\n### width \n\nThe width of the rectangle area. The unit is point.\n\n### height\n\nThe height of the rectangle area. The unit is point.\n\n![Rect](/assets/imgs/rect.png)\n\n## Related\n\n- [`crop()`]({{ site.api }}class/editviewer.html#crop)\n- [`getCropRect()`]({{ site.api }}class/editviewer.html#getcroprect)\n- [`setCropRect()`]({{ site.api }}class/editviewer.html#setcroprect)",
-      "breadcrumb": "Interface Rect"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Rectangle Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/rectangle.html",
-      "content": "# Rectangle Class\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n{% comment %}\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n\n{% comment %}\n## aabb\n\nReturn Axis-aligned bounding box of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly aabb: Rect;\n```\n\n**Remark**\n\n![AABB-Rectangle](/assets/imgs/aabbrectangle.png)\n\n{% endcomment %}\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `rectangle`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;  //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted.\n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate). \n\n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): RectAnnotationOptions;\n```\n\n**Return value**\n\nThe object of rectangle annotation options. Please refer to [`RectAnnotationOptions`]({{ site.api }}interface/annotationinterface/rectannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst rect = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"rectangle\"); // Create a default Rectangle annotation instance.\nconst rectOptions = rect.getOptions();\n```\n\n## updateOptions() \n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(rectAnnotationOptions: RectAnnotationOptions): boolean;\n```\n\n**Parameters**\n\n`rectAnnotationOptions`: The new rectangle annotation options. Please refer to [`RectAnnotationOptions`]({{ site.api }}interface/annotationinterface/rectannotationoptions.html).\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst rect = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"rectangle\"); // Create a default Rectangle annotation instance.\nconst rectOptions = {\n    background: \"red\",\n};\nrect.updateOptions(rectOptions); // Update the background of the rectangle to red.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "Rectangle Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface RectangleStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/rectanglestyle.html",
-      "content": "# RectangleStyle\n\n## Syntax\n\n```typescript\ninterface RectangleStyle {\n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number;\n    lineDash?: number[];\n}\n```\n\n## Attributes\n\n### borderWidth\n\nThe border width of annotation. The unit is point.\n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill.\n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### lineDash\n\nThe style of annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)",
-      "breadcrumb": "Interface RectangleStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface RectAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/rectannotationoptions.html",
-      "content": "# RectAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface RectAnnotationOptions {\n    x?: number;\n    y?: number;\n    width?: number;\n    height?: number; \n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number; \n    lineDash?: number[];\n    flags?: Flags;\n    rotation?: number;\n}\n```\n\n## Attributes\n\n### x\n\nThe x-coordinate of the upper-left corner of the rectangle annotation to draw. The unit is point.\n\nDefault value: 10\n\n### y\n\nThe y-coordinate of the upper-left corner of the rectangle annotation to draw. The unit is point.\n\nDefault value: 10\n\n### width\n\nThe width of the rectangle annotation to draw. The unit is point.\n\nDefault value: 100\n\n### height\n\nThe height of the rectangle annotation to draw. The unit is point.\n\nDefault value: 100\n\n![Rectangle Location](/assets/imgs/rectlocation.png)\n\n### borderWidth\n\nThe border width of annotation. The unit is point.\n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)` \n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill.\n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n![Rectangle BorderStyle](/assets/imgs/rectborderstyle.png)\n\n**Remark**\n\nSupported string value of `borderColor` and `background`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### lineDash\n\nThe style of rectangle annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n<!--\n### author\n\nThe author of annotation.\n\nDefault value: `''`\n\n### subject\n\nThe subject of annotation.\n\nDefault value: `''`  -->\n\n### flags\n\nThe flags of annotation. \n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n### rotation\n\nThe rotation angle of annotation.\n\nDefault value: 0\n\n**Remark**\n\n- Positive value means clockwise rotation, negative value means counterclockwise rotation.\n\n## Related\n\n- [`Rectangle()`]({{ site.api }}class/annotation/rectangle.html#rectangle)\n- [`getOptions()`]({{ site.api }}class/annotation/rectangle.html#getoptions) under `Rectangle` class\n- [`updateOptions()`]({{ site.api }}class/annotation/rectangle.html#updateoptions) under `Rectangle` class",
-      "breadcrumb": "Interface RectAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface RectXY",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/rectxy.html",
-      "content": "# RectXY\n\n## Syntax\n\n```typescript\ninterface RectXY {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n```\n\n## Attributes\n\n### x\n\nThe x-coordinate of the upper-left corner of the area.\n\n### y\n\nThe y-coordinate of the upper-left corner of the area.\n\n### width \n\nThe width of the rectangle area. The unit is point.\n\n### height\n\nThe height of the rectangle area. The unit is point.\n",
-      "breadcrumb": "Interface RectXY"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface SaveJpegSettings",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/savejpegsettings.html",
-      "content": "# SaveJpegSettings\n\n## Syntax\n\n```typescript\ninterface SaveJpegSettings {\n    quality?: number; \n    saveAnnotation?: boolean; \n}\n```\n\n## Attributes\n\n### quality\n\nSpecify the quality for JPEG compression. The value range is [0, 100], default value is 80.\n\n### saveAnnotation\n\nWhether to save the annotation(s) as the part of image. Default vaule: `false`.\n\n## Related\n\n- [`saveToJpeg()`]({{ site.api }}interface/idocument/index.html#savetojpeg)",
-      "breadcrumb": "Interface SaveJpegSettings"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface SavePdfSettings",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/savepdfsettings.html",
-      "content": "# SavePdfSettings\n\n## Syntax\n\n```typescript\ninterface SavePdfSettings {\n    author?: string;\n    compression?: EnumPDFCompressionType;\n    pageType?: EnumPDFPageType; \n    creator?: string;\n    creationDate?: string;\n    keyWords?: string;\n    modifiedDate?: string;\n    producer?: string;\n    subject?: string;\n    title?: string;\n    version?: string;\n    quality?: number;\n    password?: string;\n    saveAnnotation?: SaveAnnotation;\n    imageScaleFactor?: number;\n}\n```\n\n## Attributes\n\n### author\n\nSpecify the author.\n\n### compression\n\nSpecify the pdf compression type. Please refer to [`EnumPdfCompressionType`]({{ site.api }}enumeration-type/enumpdfcompressiontype.html).\n\nDefault value: `PDF_AUTO`\n\n### pageType\n\nSpecify the pdf page type. Please refer to [`EnumPdfPageType`]({{ site.api }}enumeration-type/enumpdfpagetype.html).\n\nDefault value: `PAGE_DEFAULT`\n\n### creator\n\nSpecify the creator.\n\n### creationDate\n\nSpecify the creation date.\n\nPlease note that the parameter should be in the format `D:YYYYMMDDHHmmSSOHH'mm'`, such as `D:20230101085959-08'00'`. It also supports the older format `D:YYYYMMDDHHmmSS`, like `D:20230101085959`; in this case, the system will automatically add the corresponding time zone information, for example, `D:20230101085959-08'00'`.\n\n### keyWords\n\nSpecify the keywords.\n\n### modifiedDate\n\nSpecify the modified date.\n\nPlease note that the parameter should be in the format `D:YYYYMMDDHHmmSSOHH'mm'`, such as `D:20230101085959-08'00'`. It also supports the older format `D:YYYYMMDDHHmmSS`, like `D:20230101085959`; in this case, the system will automatically add the corresponding time zone information, for example, `D:20230101085959-08'00'`.\n\n### producer\n\nSpecify the producer.\n\n### subject\n\nSpecify the subject.\n\n### title\n\nSpecify the title.\n\n### version\n\nSpecify the PDF version. For example, 1.5. The allowed values are 1.1 ~ 1.7.\n\nIf the [`compression`] is set to `PDF_JBig2`, the lowest version is 1.4.\n\nIf the [`compression`] is set to `PDF_JP2000`, the lowest version is 1.5\n\n### quality\n\nSpecify the quality of the images in the file.\n\nThe value range is [0, 100], default value is 80.\n\nOnly takes effect when the [`compression`](#compression) is set to `PDF_JPEG` or `PDF_JP2000`.\n\n### password\n\nSpecify the saved PDF owner password. Default value: `''`.\n\nMaximum of 32 characters.\n\n### saveAnnotation\n\nSpecify how to save annotation(s) in pdf file. Default value: `none`.\n\nA `SaveAnnotation` can be one of four types.\n\n```typescript\ntype SaveAnnotation = \"none\" | \"image\" | \"annotation\" | \"flatten\";\n```\n- `none`: not saving annotations. \n\n- `image`: saving annotations as a part of image. \n\n- `annotation`: saving annotations as pdf annotations.\n\n- `flatten`: saving annotations as page content.\n\n### imageScaleFactor\n\nSpecify the scale factor of the images in the file.\n\nThe value ranges from greater than 0 to less than or equal to 1.\n\nDefault is 1.\n\n## Related\n\n- [`saveToPdf()`]({{ site.api }}interface/idocument/index.html#savetopdf)",
-      "breadcrumb": "Interface SavePdfSettings"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface SavePngSettings",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/savepngsettings.html",
-      "content": "# SavePngSettings\n\n## Syntax\n\n```typescript\ninterface SavePngSettings {\n    saveAnnotation?: boolean; \n}\n```\n\n## Attributes\n\n### saveAnnotation\n\nWhether to save the annotation(s) as the part of image. Default vaule: `false`.\n\n## Related\n\n- [`saveToPng()`]({{ site.api }}interface/idocument/index.html#savetopng)",
-      "breadcrumb": "Interface SavePngSettings"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface SaveTiffSettings",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/savetiffsettings.html",
-      "content": "# SaveTiffSettings\n\n## Syntax\n\n```typescript\ninterface SaveTiffSettings {\n    customTag?: CustomTag[];\n    compression?: EnumTIFFCompressionType;\n    quality?: number;\n    saveAnnotation?: boolean; \n}\n```\n\n## Attributes\n\n### customTag\n\nCustom tiff tag(s). Please refer to [CustomTag]({{ site.api }}interface/idocument/customtag.html)\n\n### compression\n\nSpecify the compression type. Please refer to [EnumTiffCompressionType]({{ site.api }}enumeration-type/enumtiffcompressiontype.html).\n\nDefault value: `TIFF_AUTO`\n\n### quality\n\nSpecify the quality of the images in the file. The value ranges from 0 to 100. Only valid when the [`compression`](#compression) is `TIFF_JPEG`.\n\n### saveAnnotation\n\nWhether to save the annotation(s) as the part of image. Default vaule: `false`.\n\n## Related\n\n- [`saveToTiff()`]({{ site.api }}interface/idocument/index.html#savetotiff)",
-      "breadcrumb": "Interface SaveTiffSettings"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Getting Started - SDK Initialization",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/gettingstarted/sdk_init.html",
-      "content": "# SDK Initialization\n\n## License\n\n### Get a trial key\n\n- A free public trial license is available for every new device for first use of Dynamsoft Document Viewer. The public trial license is the default key used in samples. You can also find the public trial license on the following parts of this page.\n- If your free key is expired, please visit <a href=\"https://www.dynamsoft.com/customer/license/trialLicense?product=ddv&source=docs\" target=\"_blank\">Private Trial License Page</a> to get a 30-day trial extension.\n\n### Get a full license\n\n- [Contact us](https://www.dynamsoft.com/company/contact/)  to purchase a full license\n\n## Initializiation\n\nThe following code snippets are using the public trial license to initialize the license. You can replace the public trial license with your own license key.\n\n<div class=\"multi-panel-switching-prefix\"></div>\n\n- [Use a CDN](#-)\n- [Host the SDK yourself](#--)\n\n<div class=\"multi-panel-start\"></div>\n\n<div style=\"height: 20px;\"></div>\n \n\n```javascript\nDynamsoft.DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\"; // Public trial license which is valid for 24 hours\nDynamsoft.DDV.Core.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine\";// Lead to a folder containing the distributed WASM files\nawait Dynamsoft.DDV.Core.loadWasm();\nawait Dynamsoft.DDV.Core.init(); \n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n<div style=\"height: 20px;\"></div>\n  \n\n```javascript\nDynamsoft.DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\"; // Public trial license which is valid for 24 hours\nDynamsoft.DDV.Core.engineResourcePath = \"./node_modules/dynamsoft-document-viewer/dist/engine\";// Lead to a folder containing the distributed WASM files\nawait Dynamsoft.DDV.Core.loadWasm();\nawait Dynamsoft.DDV.Core.init(); \n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-switching-end\"></div>\n\n### deviceFriendlyName\n\nA human-readable name for the device which corresponds to its UUID is able to set during initialization. This name will appear in the device details table when you check the statistics of the according license.\n\n\n<div class=\"multi-panel-switching-prefix\"></div>\n\n- [Use a CDN](#---)\n- [Host the SDK yourself](#----)\n\n<div class=\"multi-panel-start\"></div>\n\n<div style=\"height: 20px;\"></div>\n\n   \n\n```javascript\nDynamsoft.DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\";// Public trial license which is valid for 24 hours\nDynamsoft.DDV.Core.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine\"; // Lead to a folder containing the distributed WASM files\nDynamsoft.DDV.Core.deviceFriendlyName = \"Dynamsoft-iPhone\"; // A string representing the device which is easier to recognize than its UUID\nawait Dynamsoft.DDV.Core.loadWasm();\nawait Dynamsoft.DDV.Core.init(); \n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n<div style=\"height: 20px;\"></div>\n    \n\n```javascript\nDynamsoft.DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\";// Public trial license which is valid for 24 hours\nDynamsoft.DDV.Core.engineResourcePath = \"./node_modules/dynamsoft-document-viewer/dist/engine\"; // Lead to a folder containing the distributed WASM files\nDynamsoft.DDV.Core.deviceFriendlyName = \"Dynamsoft-iPhone\"; // A string representing the device which is easier to recognize than its UUID\nawait Dynamsoft.DDV.Core.loadWasm();\nawait Dynamsoft.DDV.Core.init(); \n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-switching-end\"></div>\n\n\n{% comment %}\n\n\n```javascript\nDynamsoft.DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\"; // Public trial license which is valid for 24 hours\nDynamsoft.DDV.Core.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine\";// Lead to a folder containing the distributed WASM files\nawait Dynamsoft.DDV.Core.loadWasm();\nawait Dynamsoft.DDV.Core.init(); \n```\n\n### deviceFriendlyName\n\nA human-readable name for the device which corresponds to its UUID is able to set during initialization. This name will appear in the device details table when you check the statistics of the according license.\n\n```javascript\nDynamsoft.DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\";// Public trial license which is valid for 24 hours\nDynamsoft.DDV.Core.engineResourcePath = \"https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@latest/dist/engine\"; // Lead to a folder containing the distributed WASM files\nDynamsoft.DDV.Core.deviceFriendlyName = \"Dynamsoft-iPhone\"; // A string representing the device which is easier to recognize than its UUID\nawait Dynamsoft.DDV.Core.loadWasm();\nawait Dynamsoft.DDV.Core.init(); \n```\n\n{% endcomment %}\n",
-      "breadcrumb": "SDK Initialization"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Documentation Search",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/search.html",
-      "content": "---\r\nlayout: search-layout\r\ntitle: Dynamsoft Document Viewer Documentation Search\r\ndescription: Dynamsoft Document Viewer Documentation Search\r\nh1: Dynamsoft Document Viewer Documentation Search\r\nindexName: Crawler-DDV-Docs\r\n---",
-      "breadcrumb": "Dynamsoft Document Viewer Documentation Search"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface SearchTextOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/searchtextoptions.html",
-      "content": "# SearchTextOptions\n\n## Syntax\n\n```typescript\ninterface SearchTextOptions {\n    caseSensitive?: boolean;\n    wholeWord?: boolean;\n}\n```\n\n## Attributes\n\n### caseSensitive\n\nWhether to match case. Default value is false.\n\n### wholeWord\n\nWhether to match whole word. Default value is false.\n",
-      "breadcrumb": "Interface SearchTextOptions"
-    },
-    
-    {
-      "title": null,
-      "url": "https://www.dynamsoft.com/document-viewer/docs/sitemap.xml",
-      "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<urlset xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd\" xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">\n{%- assign pages = site.html_pages | where_exp:'doc','doc.sitemap != false' | where_exp:'doc','doc.url != \"/Hide_Tree_Page.html\"' -%}\n{%- if site.docFullPath contains 'web-twain/docs' -%}\t\n\t{%- assign pages = site.documents | where_exp:'doc','doc.sitemap != false' | where_exp:'doc','doc.url != \"/Hide_Tree_Page.html\"' -%}\n{%- endif -%}\n{%- for page in pages -%}\n{%- assign excludeFlag = false -%}\n{%- if page.url contains '-v' -%}\n\t{%- assign candidateVersionStr = page.url |  split: '-v' -%}\n\t{%- for tmpStr in candidateVersionStr offset:1 -%}\n\t\t{%- assign tmpVer = tmpStr | split: '/' | first | replace: '.html', '' | strip -%}\n\t\t{%- capture firstChar -%}\n\t\t\t{{ tmpVer | truncate: 4 | replace:\"...\", \"\" }}\n\t\t{%- endcapture -%}\n\t\t{%- if firstChar >= \"0\" and firstChar <= \"9\" -%}\n      {%- assign excludeFlag = true -%}\n\t\t\t{%- break -%}\n\t\t{%- endif -%}\n\t{%- endfor -%}\n{%- endif -%}\n\n{%- if page.ignore -%}\n\t{%- assign excludeFlag = true -%}\n{%- endif -%}\n\n{%- if page.path contains 'programming-old/' -%}\n\t{%- assign excludeFlag = true -%}\n{%- endif -%}\n\n{%- if site.docFullPath contains 'license-server/docs' and page.url contains 'schedule/stable' -%}\n\t{%- assign excludeFlag = true -%}\n{%- endif -%}\n{%- if site.docFullPath contains 'web-twain/docs' and page.url contains 'indepth/faqs/develop' -%}\t\n\t{%- assign excludeFlag = true -%}\n{%- endif -%}\n{%- if page.url contains 'search.html' or page.url contains 'search-test.html' -%}\t\n\t{%- assign excludeFlag = true -%}\n{%- endif -%}\n\n{%- assign docFullPath = site.docFullPath -%}\n{%- assign docFullPathLastChar = docFullPath | split:'' | last -%}\n{%- if docFullPathLastChar contains '/' -%}\t\n\t{%- assign truncateDocHomePageSize = docFullPath | size | minus:1 -%}\n\t{%- assign docFullPath = docFullPath | slice: 0, truncateDocHomePageSize -%}\n{%- endif -%}\n\n{%- unless excludeFlag or page.layout == \"\" or page.layout == \"default\" -%}\n\t\t<url>\n\t\t\t<loc>{{ docFullPath }}{{page.url | replace:'/index.html','/' | xml_escape}}</loc> \n\t\t</url>\n{%- endunless -%}\n\n{%- endfor -%}\n</urlset>\n",
-      "breadcrumb": null
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface Source",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/idocument/source.html",
-      "content": "# Source\n\n## Syntax\n\n```typescript\ninterface Source {\n    fileData: Blob; \n}\n```\n\n## Attributes\n\n### fileData\n\nThe blob of the file to be loaded.\n\n## Remark\n\n- `Source` can be extended as [`PdfSource`](/api/interface/idocument/pdfsource.md).\n\n## Related\n\n- [`loadSource()`]({{ site.api }}interface/idocument/index.html#loadsource)",
-      "breadcrumb": "Interface Source"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Stamp Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/stamp.html",
-      "content": "# Stamp Class\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n{% comment %}\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n{% endcomment %}\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n\n{% comment %}\n\n## aabb\n\nReturn Axis-aligned bounding box of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly aabb: Rect;\n```\n\n{% endcomment %}\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `stamp`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n\n- It will return `''`, if the annotation is deleted.\n\n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;  //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted.\n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate).\n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): StampAnnotationOptions;\n```\n\n**Return value**\n\nThe object of stamp annotation options. Please refer to [`StampAnnotationOptions`]({{ site.api }}interface/annotationinterface/stampannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst stamp = await Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"stamp\"); // Create a default Stamp annotation instance.\nconst stampOptions = stamp.getOptions();\n```\n\n## updateOptions()\n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(stampAnnotationOptions: StampAnnotationOptions): Promise<void>;\n```\n\n**Parameters**\n\n`stampAnnotationOptions`: The new stamp annotation options. Please refer to [`StampAnnotationOptions`]({{ site.api }}interface/annotationinterface/stampannotationoptions.html).\n\n**Return value**\n\nA promise that resolves when the operation succeeds.\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst stamp = await Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"stamp\"); // Create a default Stamp annotation instance.\nconst stampOptions = {\n    stamp: Dynamsoft.DDV.EnumStampIcon.APPROVED,\n};\nawait stamp.updateOptions(stampOptions); // Update the stamp icon to 'APPROVED'.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "Stamp Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface StampAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/stampannotationoptions.html",
-      "content": "# StampAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface StampAnnotationOptions{\n    x?: number;\n    y?: number;\n    width?: number;\n    height?: number; \n    stamp?: EnumStampIcon | string | Blob; \n    opacity?: number; \n    flags?: Flags;\n    rotation?: number;\n}\n```\n\n## Attributes\n\n### x\n\nThe x-coordinate of the upper-left corner of the stamp annotation to draw. The unit is point.\n\nDefault value: 10\n\n### y\n\nThe y-coordinate of the upper-left corner of the stamp annotation to draw. The unit is point.\n\nDefault value: 10\n\n### width\n\nThe width of the stamp annotation to draw. The unit is point.\n\nDefault value: `undefined`, means the original width of the standard bussiness stamp or the custom image.\n\n### height\n\nThe height of the stamp annotation to draw. The unit is point.\n\nDefault value: `undefined`, means the original height of the standard bussiness stamp or the custom image.\n\n![Stamp Location](/assets/imgs/stamplocation.png)\n\n### stamp\n\nSpecify the standard business stamp or the blob of a custom image to be drawn. Please refer to [`EnumStampIcon`]({{ site.api }}enumeration-type/enumstampicon.html) for standard business stamp.\n\nDefault value: `Dynamsoft.DDV.EnumStampIcon.DRAFT`\n\nIf set to `blob`, the custom image will be added as the stamp.\n\nSupported image formats: PNG, JPEG\n\nThe value of type `string` is readonly and only suitable for incomplete annotation.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n<!--\n### author\n\nThe author of annotation.\n\nDefault value: `''`\n\n### subject\n\nThe subject of annotation.\n\nDefault value: `''` -->\n\n### flags\n\nThe flags of annotation. \n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n### rotation\n\nThe rotation angle of annotation.\n\nDefault value: 0\n\n**Remark**\n\n- Positive value means clockwise rotation, negative value means counterclockwise rotation.\n\n## Related\n\n- [`Stamp()`]({{ site.api }}class/annotation/stamp.html#stamp)\n- [`getOptions()`]({{ site.api }}class/annotation/stamp.html#getoptions) under `Stamp` class\n- [`updateOptions()`]({{ site.api }}class/annotation/stamp.html#updateoptions) under `Stamp` class",
-      "breadcrumb": "Interface StampAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface StampStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/stampstyle.html",
-      "content": "# StampStyle\n\n## Syntax\n\n```typescript\ninterface StampStyle {\n    opacity?: number;\n    stamp?: EnumStampIcon | Blob;\n}\n```\n\n## Attributes\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### stamp\n\nSpecify the standard business stamp or the blob of a custom image to be drawn. Please refer to [`EnumStampIcon`]({{ site.api }}enumeration-type/enumstampicon.html) for standard business stamp.\n\nDefault value: `Dynamsoft.DDV.EnumStampIcon.DRAFT`\n\nIf set to `blob`, the custom image will be added as the stamp.\n\nSupported image formats: PNG, JPEG\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)",
-      "breadcrumb": "Interface StampStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Strikeout Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/strikeout.html",
-      "content": "# Strikeout Class\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `strikeout`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n\n- It will return `''`, if the annotation is deleted.\n\n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;  //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted.\n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate).\n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): StrikeoutAnnotationOptions;\n```\n\n**Return value**\n\nThe object of strikeout annotation options. Please refer to [`StrikeoutAnnotationOptions`]({{ site.api }}interface/annotationinterface/strikeoutannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst options = { \n    rects: [{ \n        x: 10, \n        y: 10, \n        width: 100, \n        height: 100, \n    }], \n    borderColor: \"red\", \n}\nconst strikeout = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"strikeout\", options); // Create a strikeout annotation instance.\nconst strikeoutOptions = strikeout.getOptions();\n```\n\n## updateOptions()\n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(strikeoutAnnotationOptions: StrikeoutAnnotationOptions): boolean;\n```\n\n**Parameters**\n\n`strikeoutAnnotationOptions`: The new highlight annotation options. Please refer to [`StrikeoutAnnotationOptions`]({{ site.api }}interface/annotationinterface/strikeoutannotationoptions.html).\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst newOptions = { \n    rects: [{ \n        x: 50, \n        y: 10, \n        width: 100, \n        height: 100, \n    }], \n    borderColor: \"yellow\"\n}; \nstrikeout.updateOptions(newOptions); // Update the annotation.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "Strikeout Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface StrikeoutAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/strikeoutannotationoptions.html",
-      "content": "# StrikeoutAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface StrikeoutAnnotationOptions {\n    borderColor?: string;\n    rects: RectXY[];\n    opacity?: number;\n    flags?: Flags;\n}\n```\n\n## Attributes\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `#F01314` \n\n**Example**\n\n```typescript\nborderColor: \"rgb(255,0,0)\", \n```\n\n**Remark**\n\nSupported string value of `borderColor`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### rects\n\nAn array of rectangles marking where to put the annotations.\n\nPlease refer to [`RectXY`](/api/interface/rectxy.md).\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### flags\n\nThe flags of annotation. \n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n## Related\n\n- [`getOptions()`](/api/class/annotation/strikeout.md#getoptions) under `Strikeout` class\n- [`updateOptions()`](/api/class/annotation/strikeout.md#updateoptions) under `Strikeout` class\n",
-      "breadcrumb": "Interface StrikeoutAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface StrikeoutStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/strikeoutstyle.html",
-      "content": "# StrikeoutStyle\n\n## Syntax\n\n```typescript\ninterface StrikeoutStyle {\n    opacity?: number;\n    borderColor?: string;\n}\n```\n\n## Attributes\n\n### borderColor\n\nThe borderColor style of annotation.\n\nDefault value: `#F01314`.\n\n**Example**\n\n```typescript\nborderColor: \"rgb(255,255,255)\", \n```\n\n**Remark**\n\nSupported string value of `borderColor`:\n\n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1.\n\nDefault value: 1\n",
-      "breadcrumb": "Interface StrikeoutStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer Getting Started - System Requirements",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/gettingstarted/sys_requirement.html",
-      "content": "# System Requirements\n\nThe SDK requires the following features to work:\n\n- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers`\n\n  The above four features are required for the SDK to work.\n\n## Supported Browsers\n\nThe following table is a list of supported browsers based on the above requirements:\n\n  | Browser Name |             PC                   |   Mobile    |\n  | :----------: | :------------------------------: | :---------: |\n  |    Chrome    |             v75+                 |   v75+      |\n  |   Firefox    |             v69+                 |   v79+      |\n  |    Safari    |             v14+                 |   v15+      |\n  |     Edge     |             v79+                 |   v92+      |\n\nApart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDKs.",
-      "breadcrumb": "System Requirements"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - TextBox Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/textbox.html",
-      "content": "# TextBox Class\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n{% comment %}\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n{% endcomment %}\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n\n{% comment %}\n\n## aabb\n\nReturn Axis-aligned bounding box of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly aabb: Rect;\n```\n\n{% endcomment %}\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `textBox`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n\n- It will return `''`, if the annotation is deleted.\n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;   //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted.\n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate).\n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): TextBoxAnnotationOptions;\n```\n\n**Return value**\n\nThe object of text box annotation options. Please refer to [`TextBoxAnnotationOptions`]({{ site.api }}interface/annotationinterface/textboxannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst textBox = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"textBox\"); // Create a default TextBox annotation instance.\nconst textBoxOptions = textBox.getOptions();\n```\n\n## updateOptions()\n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(textBoxAnnotationOptions: TextBoxAnnotationOptions): boolean;\n```\n\n**Parameters**\n\n`textBoxAnnotationOptions`: The new text box annotation options. Please refer to [`TextBoxAnnotationOptions`]({{ site.api }}interface/annotationinterface/textboxannotationoptions.html).\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst textBox = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"textBox\"); // Create a default TextBox annotation instance.\nconst textBoxOptions = {\n    background: \"red\",\n};\ntextBox.updateOptions(textBoxOptions); // Update the background of the text box to red.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "TextBox Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface TextBoxAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/textboxannotationoptions.html",
-      "content": "# TextBoxAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface TextBoxAnnotationOptions {\n    x?: number;\n    y?: number;\n    width?: number;\n    height?: number; \n    textAlign?: string; \n    textContents?: TextContent[];\n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number; \n    lineDash?: number[];\n    flags?: Flags;\n    rotation?: number;\n}\n```\n\n## Attributes\n\n### x\n\nThe x-coordinate of the upper-left corner of the text box annotation to draw. The unit is point.\n\nDefault value: 10\n\n### y\n\nThe y-coordinate of the upper-left corner of the text box annotation to draw. The unit is point.\n\nDefault value: 10\n\n### width\n\nThe width of the text box annotation to draw. The unit is point.\n\nDefault value: 150\n\n### height\n\nThe height of the text box annotation to draw. The unit is point.\n\nDefault value: 80\n\n![TextBox Location](/assets/imgs/textboxlocation.png)\n\n### textAlign\n\nThe text alignment.\n\nSupported values: `left`, `right`, `center`, `justify`\n\nDefault value: `left`\n\n### textContents\n\nThe text contents of the text box annotation. Please refer to [`TextContent`]({{ site.api }}interface/annotationinterface/textcontent.html).\n\nDefault value: `[{content: \"Insert text here\",}]`\n\n### borderWidth\n\nThe border width of annotation. The unit is point.\n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)`\n\n**Remark**\n\nSupported string value of `borderColor` and `background`:\n\n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill.\n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n![TextBox BorderStyle](/assets/imgs/textboxborderstyle.png)\n\n**Remark**\n\nSupported string value of `borderColor` and `background`:\n\n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1.\n\nDefault value: 1\n\n### lineDash\n\nThe style of text box annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n<!--\n### author\n\nThe author of annotation.\n\nDefault value: `''`\n\n### subject\n\nThe subject of annotation.\n\nDefault value: `''`  -->\n\n### flags\n\nThe flags of annotation.\n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n### rotation\n\nThe rotation angle of annotation.\n\nDefault value: 0\n\n**Remark**\n\n- Positive value means clockwise rotation, negative value means counterclockwise rotation.\n\n## Related\n\n- [`TextBox()`]({{ site.api }}class/annotation/textbox.html#textbox)\n- [`getOptions()`]({{ site.api }}class/annotation/textbox.html#getoptions) under `TextBox` class\n- [`updateOptions()`]({{ site.api }}class/annotation/textbox.html#updateoptions) under `TextBox` class\n",
-      "breadcrumb": "Interface TextBoxAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface TextBoxStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/textboxstyle.html",
-      "content": "# TextBoxStyle\n\n## Syntax\n\n```typescript\ninterface TextBoxStyle {\n    borderWidth?: number;\n    borderColor?: string;\n    background?: string;\n    opacity?: number;\n    lineDash?: number[];\n    textAlign?: string; \n    textContent?: TextContent;\n}\n```\n\n## Attributes\n\n### borderWidth\n\nThe border width of annotation. The unit is point.\n\nDefault value: 1\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `rgb(0,0,0)`\n\n**Remark**\n\nSupported string value of `borderColor` and `background`:\n\n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### background\n\nThe backgroud style of annotation.\n\nDefault value: `''`, it means no fill.\n\n**Example**\n\n```typescript\nbackground: \"rgb(255,255,255)\", \n```\n\n**Remark**\n\nSupported string value of `borderColor` and `background`:\n\n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\nIf set to `''`, it means no fill.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1.\n\nDefault value: 1\n\n### lineDash\n\nThe style of annotation border. The unit is point.\n\nDefault value: `[0, 0]`\n\n**Example**\n\n```typescript\nlineDash: [10, 10], \n```\n\n### textAlign\n\nThe text alignment.\n\nSupported values: `left`, `right`, `center`, `justify`\n\nDefault value: `left`\n\n### textContent\n\nThe text content of the text box/text typewriter annotation. Please refer to [`TextContent`]({{ site.api }}interface/annotationinterface/textcontent.html).\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)",
-      "breadcrumb": "Interface TextBoxStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface TextContent",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/textcontent.html",
-      "content": "# TextContent\n\n## Syntax\n\n```typescript\ninterface TextContent {\n    content?: string;\n    color?: string;\n    underline?: boolean; \n    lineThrough?: boolean;\n    fontFamily?: string; \n    fontSize?: number; \n    fontStyle?: string; \n    fontWeight?: string; \n}\n```\n\n## Attributes\n\n### content\n\nThe text content string. \n\nDefault value: `''`\n\n**Example**\n\n```typescript\ncontent: \"Dynamsoft Document Viewer\",\n```\n\n### color\n\nThe color of text content string.\n\nDefault value: `rgb(0,0,0)`\n\n**Example**\n\n```typescript\ncolor: \"#000000\",\n```\n\n**Remark**\n\nSupported string value of `color`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### underline\n\nA line will be displayed under the text\n\nDefault value: `false`\n\n### lineThrough\n\nA line will be displayed through the text.\n\nDefault value: `false`\n\n### fontFamily\n\nThe font family of text content string.\n\nDefault value: `Helvetica`\n\n**Example**\n\n```typescript\nfontFamily: \"Times\",\n```\n\n### fontSize\n\nThe font size of text content string.\n\nDefault value: 16\n\n**Example**\n\n```typescript\nfontSize: 20,\n```\n\n### fontStyle\n\nThe font style of text content string.\n\nSupported values: `normal`, `italic`\n\nDefault value: `normal`\n\n**Example**\n\n```typescript\nfontStyle: \"italic\",\n```\n\n### fontWeight\n\nThe font weight of text content string.\n\nSupported values: `normal`, `bold`\n\nDefault value: `normal`\n\n**Example**\n\n```typescript\nfontWeight: \"bold\",\n```\n\n## Related\n\n- [`TextBoxAnnotationOptions`]({{ site.api }}interface/annotationinterface/textboxannotationoptions.html)\n- [`TextTypewriterAnnotationOptions`]({{ site.api }}interface/annotationinterface/texttypewriterannotationoptions.html)\n- [`TextBoxStyle`]({{ site.api }}interface/annotationinterface/textboxstyle.html)\n- [`TextTypewriterStyle`]({{ site.api }}interface/annotationinterface/texttypewriterstyle.html)",
-      "breadcrumb": "Interface TextContent"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface TextSearchResult",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/textsearchresult.html",
-      "content": "# TextSearchResult\n\n## Syntax\n\n```typescript\ninterface TextSearchResult {\n   pageUid: string;\n   text: string;\n   rects: RectXY[];\n   context: string;\n}\n```\n\nSee also [`RectXY`](/api/interface/rectxy.md).\n",
-      "breadcrumb": "Interface TextSearchResult"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - TextTypewriter Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/texttypewriter.html",
-      "content": "# TextTypewriter Class\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n{% comment %}\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n{% endcomment %}\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n\n{% comment %}\n## aabb\n\nReturn Axis-aligned bounding box of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly aabb: Rect;\n```\n\n{% endcomment %}\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `textTypewriter`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n\n- It will return `''`, if the annotation is deleted.\n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;   //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted.\n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate).\n\n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): TextTypewriterAnnotationOptions;\n```\n\n**Return value**\n\nThe object of text typewriter annotation options. Please refer to [`TextTypewriterAnnotationOptions`]({{ site.api }}interface/annotationinterface/texttypewriterannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst textTypewriter = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"textTypewriter\"); // Create a default TextTypewriter annotation instance.\nconst textTypewriterOptions = textTypewriter.getOptions();\n```\n\n## updateOptions()\n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(textTypewriterAnnotationOptions: TextTypewriterAnnotationOptions): boolean;\n```\n\n**Parameters**\n\n`textTypewriterAnnotationOptions`: The new text typewriter annotation options. Please refer to [`TextTypewriterAnnotationOptions`]({{ site.api }}interface/annotationinterface/texttypewriterannotationoptions.html).\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst textTypewriter = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"textTypewriter\"); // Create a default TextTypewriter annotation instance.\nconst textTypewriterOptions = {\n    background: \"red\",\n};\ntextTypewriter.updateOptions(textTypewriterOptions); // Update the background of the text typewriter to red.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "TextTypewriter Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface TextTypewriterAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/texttypewriterannotationoptions.html",
-      "content": "# TextTypewriterAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface TextTypewriterAnnotationOptions {\n    x?: number;\n    y?: number;\n    textContents?: TextContent[];\n    opacity?: number; // The value range is [0,1], value which is greater than 1 will default to 1.\n    flags?: Flags;\n}\n```\n\n## Attributes\n\n### x\n\nThe x-coordinate of the upper-left corner of the text typewriter annotation to draw.\n\nDefault value: 10\n\n### y\n\nThe y-coordinate of the upper-left corner of the text typewriter annotation to draw.\n\nDefault value: 10\n\n### textContents\n\nThe text contents of the text typewriter annotation. The content in the interface TextContent cannot be an empty string. Please refer to [`TextContent`]({{ site.api }}interface/annotationinterface/textcontent.html).\n\nDefault value: `[{content: \"Insert text here\",}]`\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1.\n\nDefault value: 1\n\n<!--\n### author\n\nThe author of annotation.\n\nDefault value: `''`\n\n### subject\n\nThe subject of annotation.\n\nDefault value: `''`  -->\n\n### flags\n\nThe flags of annotation.\n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n## Related\n\n- [`TextTypewriter()`]({{ site.api }}class/annotation/texttypewriter.html#texttypewriter)\n- [`getOptions()`]({{ site.api }}class/annotation/texttypewriter.html#getoptions) under `TextTypewriter` class\n- [`updateOptions()`]({{ site.api }}class/annotation/texttypewriter.html#updateoptions) under `TextTypewriter` class\n",
-      "breadcrumb": "Interface TextTypewriterAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface TextTypewriterStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/texttypewriterstyle.html",
-      "content": "# TextTypewriterStyle\n\n## Syntax\n\n```typescript\ninterface TextTypewriterStyle {\n    opacity?: number;\n    textContent?: TextContent;\n}\n```\n\n## Attributes\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1.\n\nDefault value: 1\n\n### textContent\n\nThe text content of the text typewriter annotation. The content in the interface TextContent cannot be an empty string. Please refer to [`TextContent`]({{ site.api }}interface/annotationinterface/textcontent.html).\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)\n",
-      "breadcrumb": "Interface TextTypewriterStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface ThumbnailConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/thumbnailconfig.html",
-      "content": "# ThumbnailConfig\n\n## Syntax\n\n```typescript\ninterface ThumbnailConfig extends BrowseViewerConfig {\n    position?: string; \n    size?: string; \n    visibility?: string; \n}\n```\n\n## Extends\n\n[`BrowseViewerConfig`]({{ site.api }}interface/browseviewerconfig.html)\n\n## Attributes\n\n### position\n\nSpecify the position of the thumbnail view box displayed on the main eidt viewer.\n\nSupported value: `left`, `right`, `top`, `bottom`\n\nDefault value: `left`\n\n**Remark**\n\nIf you see a blank display after importing images, it is because the size is too small and rows&columns exceeds, please adjust the [`size`](#size) or [`rows`]({{ site.api }}interface/browseviewerconfig.html#rows)&[`columns`]({{ site.api }}interface/browseviewerconfig.html#columns).\n\n### size\n\nSpecify the width or height of thumbnail. Supports unit `px` or `%`, for example, `\"100px\"` or `\"10%\"`.\n\n**Remark**\n\n- When `position` is set to `left` or `right`, `size` means the width of thumbnail.\n- When `position` is set to `top` or `bottom`, `size` means the height of thumbnail.\n\n### visibility\n\nSpecify whether to show the thumbnail when an edit viewer is created and shown. \n\nSupported value: `hidden`, `visible`\n\nDefault value: `hidden`\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)\n",
-      "breadcrumb": "Interface ThumbnailConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface ToolbarConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/toolbarconfig.html",
-      "content": "# ToolbarConfig\n\n## Syntax\n\n```typescript\ninterface ToolbarConfig {\n    enabled?: boolean;\n    id?: string; \n    className?: string; // the className of CSS\n    style?: CssStyleDeclaration; // the style of the toolbar\n    paletteButton?: AnnotationToolbarButton;\n    deleteButton?: AnnotationToolbarButton;\n    copyButton?: AnnotationToolbarButton;\n    highlightButton?: AnnotationToolbarButton;\n    underlineButton?: AnnotationToolbarButton;\n    strikeoutButton?: AnnotationToolbarButton;\n}\n```\n\n## Attributes\n\n### enabled\n\nWhether or not the toolbar is enabled.\n\nDefault value: `true`\n\n### id\n\nThe id of Dom Element. If it is not specified, a random string will be generated.\n\n### className\n\nThe className of CSS.\n\n### style\n\nThe style which will cover CSS.\n\n### paletteButton\n\nThe configuration of palette button in the toolbar. Please refer to [`AnnotationToolbarButton`]({{ site.api }}interface/annotationinterface/annotationtoolbarbutton.html).\n\n### deleteButton\n\nThe configuration of delete button in the toolbar. Please refer to [`AnnotationToolbarButton`]({{ site.api }}interface/annotationinterface/annotationtoolbarbutton.html).\n\n### copyButton\n\nThe configuration of copy button in the toolbar. Please refer to [`AnnotationToolbarButton`]({{ site.api }}interface/annotationinterface/annotationtoolbarbutton.html).\n\n### highlightButton\n\nThe configuration of highlight button in the toolbar. Please refer to [`AnnotationToolbarButton`]({{ site.api }}interface/annotationinterface/annotationtoolbarbutton.html).\n\n### underlineButton\n\nThe configuration of underline button in the toolbar. Please refer to [`AnnotationToolbarButton`]({{ site.api }}interface/annotationinterface/annotationtoolbarbutton.html).\n\n### strikeoutButton\n\nThe configuration of strikeout button in the toolbar. Please refer to [`AnnotationToolbarButton`]({{ site.api }}interface/annotationinterface/annotationtoolbarbutton.html).\n\n## Related\n\n- [`EditViewerConstructorOptions`]({{ site.api }}interface/editviewerconstructoroptions.html)",
-      "breadcrumb": "Interface ToolbarConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface Tooltip",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/tooltip.html",
-      "content": "# Tooltip\n\n## Syntax\n\n```typescript\ninterface Tooltip {\n    CameraResolution?: string;\n    Capture?: string;\n    Flashlight?: string;\n    CameraConvert?: string;\n    AutoDetect?: string;\n    AutoCapture?: string;\n    Rotate?: string;\n    RotateLeft?: string;\n    RotateRight?: string;\n    Load?: string;\n    Download?: string;\n    Delete?: string;\n    DeleteCurrent?: string;\n    DeleteAll?: string;\n    Zoom?: string;\n    ZoomIn?: string;\n    ZoomOut?: string;\n    ZoomByPercentage?: string;\n    Crop?: string;\n    CropAll?: string;\n    CropCurrent?: string;\n    CropMode?: string;\n    PerspectiveAll?: string;\n    FullQuad?: string;\n    Undo?: string;\n    Redo?: string;\n    Restore?: string;\n    Pan?: string;\n    Filter?: string;\n    Print?: string;\n    ThumbnailSwitch?: string;\n    DisplayMode?: string;\n    ContinuousPage?: string;\n    MultiPage?: string;\n    SinglePage?: string;\n    FitMode?: string;\n    FitWidth?: string;\n    FitHeight?: string;\n    FitWindow?: string;\n    ActualSize?: string;\n    Back?: string;\n    Close?: string;\n    Done?: string;\n    FirstPage?: string;\n    LastPage?: string;\n    NextPage?: string;\n    PrevPage?: string;\n    ImagePreview?: string;\n    AnnotationSet?: string;\n    EllipseAnnotation?: string;\n    InkAnnotation?: string;\n    LineAnnotation?: string;\n    PolygonAnnotation?: string;\n    PolylineAnnotation?: string;\n    RectAnnotation?: string;\n    StampIconAnnotation?: string;\n    StampImageAnnotation?: string;\n    TextBoxAnnotation?: string;\n    TextTypewriterAnnotation?: string;\n    SelectAnnotation?: string;\n    EraseAnnotation?: string;\n    HighlightAnnotation?: string;\n    UnderlineAnnotation?: string;\n    StrikeoutAnnotation?: string;\n    BringForward?: string;\n    BringToFront?: string;\n    SendBackward?: string;\n    SendToBack?: string;\n    TextSearchPanelSwitch?: string;\n    TextSelectionMode?: string;\n}\n```\n\n## Remark \n\n- The default tooltip is empty.\n\n## Related\n\n- [`getTooltip()`]({{ site.api }}namespace/ddv_elements.html#static-gettooltip)\n- [`setTooltip()`]({{ site.api }}namespace/ddv_elements.html#static-settooltip)",
-      "breadcrumb": "Interface Tooltip"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface TransferOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/transferoptions.html",
-      "content": "# TransferOptions\n\n## Syntax\n\n```typescript\ninterface TransferOptions {\n    sourceIndices? : number[];\n    insertBeforeIndex? : number;\n}\n```\n\n## Attributes\n\n### sourceIndices\n\nThe array of pages indices to be moved or copied. If it is not specified, all pages will be moved or copied.\n\n### insertBeforeIndex\n\nThe moved or copied pages will be placed before this index. If it is not specified or out of the maximum range, the specified page(s) will be moved or copied after the last page.\n\n\n## Related\n\n- [`copyPagesToDocument()`]({{ site.api }}class/documentmanager.html#copypagestodocument)\n- [`movePagesToDocument()`]({{ site.api }}class/documentmanager.html#movepagestodocument)",
-      "breadcrumb": "Interface TransferOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer User Interface - UiConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/ui/uiconfig.html",
-      "content": "# UiConfig\n\nFirst, we need to know how DDV creates the UI. DDV has an interface named `UiConfig`, which is used to configure the layout and the elements includes. And UiConfig can be nested to achieve a complex layout.\n\n## Structure\n\nPlease refer to Interface [`UiConfig`]({{ site.api }}interface/uiconfig.html).\n\n## How to configure\n\nTake the mobile edit viewer below as the example to learn how UiConfig is configured.\n\n![EditViewer mobile UiConfig](/assets/imgs/editmuiconfig.png)\n\nAs shown in the figure above, whole layout can be divided into three parts, header, main view and footer. \n\nSo simply speaking, the overall UiConfig framework is roughly as follows,\n\n```typescript\nconst mobileEditViewerUiConfig = {\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"column\",\n    className: \"ddv-edit-viewer-mobile\",\n    children: [\n        headerUiConfig,\n        Dynamsoft.DDV.Elements.MainView, // the view which is used to display the pages\n        footerUiConfig,\n    ],\n};\n```\n\n- When [`type`]({{ site.api }}interface/uiconfig.html#type) is set to `Dynamsoft.DDV.Elements.Layout` and flexDirection is `column`, it means the layout is from top to bottom.\n- `Dynamsoft.DDV.Elements.MainView` is one of the default elements DDV provides. Learn more about default elements.\n\nNext, the specific configuration of headerUiConfig, it can be seen that the icons are arranged from left to right, then\n\n\n![EditViewer mobile header UiConfig](/assets/imgs/editmhuiconfig.png)\n\n\n```typescript\n{\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"row\", // since the default value is \"row\", this line can be left out.\n    className: \"ddv-edit-viewer-header-mobile\",\n    children: [\n        Dynamsoft.DDV.Elements.ThumbnailSwitch,\n        Dynamsoft.DDV.Elements.Pagination,\n        Dynamsoft.DDV.Elements.Download,\n    ],\n}\n```\n\n\nAlso can know the footerUiConfig is as follows,\n\n![EditViewer mobile footer UiConfig](/assets/imgs/editmfuiconfig.png)\n\n```typescript\n{\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"row\", // since the default value is \"row\", this line can be left out.\n    className: \"ddv-edit-viewer-footer-mobile\",\n    children: [\n        Dynamsoft.DDV.Elements.DisplayMode,\n        Dynamsoft.DDV.Elements.RotateLeft,\n        Dynamsoft.DDV.Elements.Crop,\n        Dynamsoft.DDV.Elements.Filter,\n        Dynamsoft.DDV.Elements.Undo,\n        Dynamsoft.DDV.Elements.Delete,\n        Dynamsoft.DDV.Elements.Load,\n    ],\n}\n```\n\nCombining these three parts creates the overall user interface layout.\n\n```typescript\nconst mobileEditViewerUiConfig = {\n    type: Dynamsoft.DDV.Elements.Layout,\n    flexDirection: \"column\",\n    className: \"ddv-edit-viewer-mobile\",\n    children: [\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            className: \"ddv-edit-viewer-header-mobile\",\n            children: [\n                Dynamsoft.DDV.Elements.ThumbnailSwitch,\n                Dynamsoft.DDV.Elements.Pagination,\n                Dynamsoft.DDV.Elements.Download,\n            ],\n        },\n        Dynamsoft.DDV.Elements.MainView,\n        {\n            type: Dynamsoft.DDV.Elements.Layout,\n            className: \"ddv-edit-viewer-footer-mobile\",\n            children: [\n                Dynamsoft.DDV.Elements.DisplayMode,\n                Dynamsoft.DDV.Elements.RotateLeft,\n                Dynamsoft.DDV.Elements.Crop,\n                Dynamsoft.DDV.Elements.Filter,\n                Dynamsoft.DDV.Elements.Undo,\n                Dynamsoft.DDV.Elements.Delete,\n                Dynamsoft.DDV.Elements.Load,\n            ],\n        },\n    ],\n};\n```\n",
-      "breadcrumb": "UiConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface UiConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/uiconfig.html",
-      "content": "# UiConfig\n\n## Syntax\n\n```typescript\ninterface UiConfig {\n    type: string; \n    flexDirection?: string; \n    id?: string; \n    className?: string; \n    style?: CSSStyleDeclaration;  \n    tooltip?: string; \n    events?: Record<string, string>;\n    children?: (UiConfig | string)[]; \n}\n```\n\n## Attributes\n\n### type\n\nThe type of the element.\n\nSupported value: `Dynamsoft.DDV.Elements.Layout`, `Dynamsoft.DDV.Elements.Button` and [built-in elements]({{ site.ui }}default_elements.html).\n\n### flexDirection\n\nThe flexDirection of the element. Only takes effect when [`type`](#type) is `Dynamsoft.DDV.Elements.Layout`.\n\nSupported value: `column`, `row`\n\nDefault value is `row`.\n\n### id\n\nThe id of Dom Element. If it is not specified, a random string will be generated.\n\n### className\n\nThe className of CSS.\n\n### style\n\nThe style which will cover CSS.\n\n### tooltip\n\nThe tooltip of the element. Only takes effect when [`type`](#type) is `Dynamsoft.DDV.Elements.Button` and [built-in elements]({{ site.ui }}default_elements.html).\n\n### events\n\nThe event of the element. Only takes effect when [`type`](#type) is `Dynamsoft.DDV.Elements.Button` and [built-in elements]({{ site.ui }}default_elements.html).\n\n### children\n\nOnly takes effect when [`type`](#type) is `Dynamsoft.DDV.Elements.Layout`.\n\n## Related\n\n- [`getDefaultUiConfig()`]({{ site.api }}namespace/ddv.html#static-getdefaultuiconfig)\n- `getUiConfig()` in \n    - [EditViewer Class]({{ site.api }}class/editviewer.html#getuiconfig)\n    - [CaptureViewer Class]({{ site.api }}class/captureviewer.html#getuiconfig)\n    - [PerspectiveViewer Class]({{ site.api }}class/perspectiveviewer.html#getuiconfig)\n    - [BrowseViewer Class]({{ site.api }}class/browseviewer.html#getuiconfig)\n    - [CustomViewer Class]({{ site.api }}class/customviewer.html#getuiconfig)\n- `updateUiConfig()` in\n    - [EditViewer Class]({{ site.api }}class/editviewer.html#updateuiconfig)\n    - [CaptureViewer Class]({{ site.api }}class/captureviewer.html#updateuiconfig)\n    - [PerspectiveViewer Class]({{ site.api }}class/perspectiveviewer.html#updateuiconfig)\n    - [BrowseViewer Class]({{ site.api }}class/browseviewer.html#updateuiconfig)\n    - [CustomViewer Class]({{ site.api }}class/customviewer.html#updateuiconfig)",
-      "breadcrumb": "Interface UiConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Underline Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/underline.html",
-      "content": "# Underline Class\n\n## API Index\n\n| API Name                                | Description                                                                                 |\n| --------------------------------------- | ------------------------------------------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                                                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located.                                 |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                                                 |\n| [`flattened`](#flattened)               | Flattens the annotation onto the image layer, or inspect if the annotation is flattened. |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.                                             |\n| [`getOptions()`](#getoptions)           | Get the annotation options.                                                                 |\n| [`updateOptions()`](#updateoptions)     | Update the annotation options.                                                              |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `underline`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n{% comment %}\n\n- It will return `''`, if the annotation is deleted.\n\n{% endcomment %}\n\n## flattened\n\nFlattens the annotation onto the image layer, or inspect if the annotation is flattened.\n\n**Syntax**\n\n```typescript\nflattened: boolean;  //Default value is `false`.\n```\n\n**Remark**\n\nFlattened annotations move below all unflattened annotations on the page, and are stacked amongst themselves accordingly.\n\nFlattened annotations become part of the page layer upon file export and cease to be annotations.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted.\n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate).\n\n## getOptions()\n\nGet the annotation options.\n\n**Syntax**\n\n```typescript\ngetOptions(): UnderlineAnnotationOptions;\n```\n\n**Return value**\n\nThe object of underline annotation options. Please refer to [`UnderlineAnnotationOptions`]({{ site.api }}interface/annotationinterface/underlineannotationoptions.html).\n\n**Code Snippet**\n\n```typescript\n// Given that editViewer is an existing instance of EditViewer and a document is currently open.\nconst pageUid = editViewer.indexToUid(0);\nconst options = { \n    rects: [{ \n        x: 10, \n        y: 10, \n        width: 100, \n        height: 100, \n    }], \n    borderColor: \"red\"\n}\nconst underline = Dynamsoft.DDV.annotationManager.createAnnotation(pageUid, \"underline\", options); // Create an underline annotation instance.\nconst underlineOptions = underline.getOptions();\n```\n\n## updateOptions()\n\nUpdate the annotation options.\n\n**Syntax**\n\n```typescript\nupdateOptions(underlineAnnotationOptions: UnderlineAnnotationOptions): boolean;\n```\n\n**Parameters**\n\n`underlineAnnotationOptions`: The new highlight annotation options. Please refer to [`UnderlineAnnotationOptions`]({{ site.api }}interface/annotationinterface/underlineannotationoptions.html).\n\n**Return value**\n\n`true`: Successfully.\n\n`false`: Failed.\n\n**Code Snippet**\n\n```typescript\nconst newOptions = { \n    rects: [{ \n        x: 50, \n        y: 10, \n        width: 100, \n        height: 100, \n    }], \n    borderColor: \"yellow\"\n}; \nawait underline.updateOptions(newOptions); // Update the annotation.\n```\n\n**Warning**\n\n Error Code  | Error Message                                        | API Return Value\n--------|-----------------------------------------------------|----------------------\n -80100 | *XXX(API)*: *XXX(ParameterName)* is invalid.   | `false`\n -80102 | *XXX(API)*: *XXX(ParameterName)* is missing.  | `false`\n",
-      "breadcrumb": "Underline Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface UnderlineAnnotationOptions",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/underlineannotationoptions.html",
-      "content": "# UnderlineAnnotationOptions\n\n## Syntax\n\n```typescript\ninterface UnderlineAnnotationOptions {\n    borderColor?: string;\n    rects: RectXY[];\n    opacity?: number;\n    flags?: Flags;\n}\n```\n\n## Attributes\n\n### borderColor\n\nThe border color of annotation.\n\nDefault value: `#0E68F5` \n\n**Example**\n\n```typescript\nborderColor: \"rgb(255,0,0)\", \n```\n\n**Remark**\n\nSupported string value of `borderColor`: \n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n\n### rects\n\nAn array of rectangles marking where to put the annotations.\n\nPlease refer to [`RectXY`](/api/interface/rectxy.md).\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1. \n\nDefault value: 1\n\n### flags\n\nThe flags of annotation. \n\nPlease refer to [`Flags`]({{ site.api }}interface/annotationinterface/flags.html).\n\n## Related\n\n- [`getOptions()`](/api/class/annotation/underline.md#getoptions) under `Underline` class\n- [`updateOptions()`](/api/class/annotation/underline.md#updateoptions) under `Underline` class\n",
-      "breadcrumb": "Interface UnderlineAnnotationOptions"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface UnderlineStyle",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/annotationinterface/underlinestyle.html",
-      "content": "# UnderlineStyle\n\n## Syntax\n\n```typescript\ninterface UnderlineStyle {\n    opacity?: number;\n    borderColor?: string;\n}\n```\n\n## Attributes\n\n### borderColor\n\nThe borderColor style of annotation.\n\nDefault value: `#0E68F5`.\n\n**Example**\n\n```typescript\nborderColor: \"rgb(255,255,255)\", \n```\n\n**Remark**\n\nSupported string value of `borderColor`:\n\n- Named color, for example, `red`, `green`, etc.\n- HEX(`#RRGGBB`), for example, `#ff0000`, `#008000`, etc.\n- RGB(`rgb(red, green, blue)`), for example, `rgb(255, 0, 0)`, `rgb(0, 128, 0)`, etc.\n- HSL(`hsl(Hue, Saturation, Lightness)`), for example, `hsl(0, 100%, 50%)`, `hsl(120, 100%, 25%)` ,etc.\n\n### opacity\n\nThe opacity of the whole annotation. The value range is [0,1], value which is greater than 1 will default to 1.\n\nDefault value: 1\n",
-      "breadcrumb": "Interface UnderlineStyle"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Unknown Class",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/class/annotation/unknown.html",
-      "content": "# Unknown Class\n\nThis type of annotation may be cannot read by Dynamsoft Document Viewer so far.\n\n## API Index\n\n| API Name                                | Description                                                 |\n| --------------------------------------- | ----------------------------------------------------------- |\n| [`uid`](#uid)                           | Return the uid of the annotation.                           |\n| [`pageUid`](#pageuid)                   | Return the uid of the page where the annotation is located. |\n| [`source`](#source)                   | Return the source of the annotation.                               |\n| [`type`](#type)                   | Return the type of the annotation                               |\n| [`creationDate`](#creationdate)         | Return the creation date of the annotation.                 |\n| [`modificationDate`](#modificationdate) | Return the modification date of the annotation.             |\n\n## uid\n\nReturn the uid of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly uid: string;\n```\n\n{% comment %}\n**Remark**\n\n- It will return `''`, if the annotation is deleted. \n{% endcomment %}\n\n## pageUid\n\nReturn the uid of the page where the annotation is located.\n\n**Syntax**\n\n```typescript\nreadonly pageUid: string;\n```\n\n**Remark**\n\n- It will return `''`, if the annotation is deleted.\n\n## source\n\nReturn the source of the annotation. Possible values:\n\n* user: the annotation is created by the user's action\n* file: the annotation is created from a PDF file\n* api: the annotation is created with code\n\n**Remark**\n\nIt will return `''`, if the annotation is deleted.\n\n## type\n\nReturn the type of the annotation: `unknown`.\n\nAll annotation types:\n\n```ts\n\"rectangle\" | \"ellipse\" | \"line\" | \"polygon\" | \"polyline\" | \"ink\" | \"textBox\" | \"textTypewriter\" | \"stamp\" | \"highlight\" | \"underline\" | \"strikeout\" | \"incomplete\" | \"unknown\"\n```\n\n## creationDate\n\nReturn the creation date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly creationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n\n## modificationDate\n\nReturn the modification date of the annotation.\n\n**Syntax**\n\n```typescript\nreadonly modificationDate: string;\n```\n\n**Remark**\n\n- The string would be `D:YYYYMMDDHHmmSSOHH'mm'`, like `D:20230101085959-08'00'`.\n- It will return `''`, if the annotation is deleted. \n- If the annotation is created but not be modified after adding, it equals to [`creationDate`](#creationdate). \n\n{% comment %}\n\n- It will return `''`, if the annotation is deleted.\n{% endcomment %}\n",
-      "breadcrumb": "Unknown Class"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface UpdatedPdfSource",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/updatedpdfsource.html",
-      "content": "# UpdatedPdfSource\n\n## Syntax\n\n```typescript\ninterface UpdatedPdfSource {\n    fileData: Blob;\n    fileIndex?: number;\n    convertMode: EnumConvertMode;\n    password?: string;\n    renderOptions?: {\n      renderAnnotations?: EnumAnnotationRenderMode;\n      resolution?: number;\n      maxWidth?: number;\n      maxHeight?: number;\n      renderGrayscale?: boolean;\n    };\n}\n```\n",
-      "breadcrumb": "Interface UpdatedPdfSource"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface UpdatedSource",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/updatedsource.html",
-      "content": "# UpdatedSource\n\n## Syntax\n\n```typescript\ninterface UpdatedSource {\n    fileData: Blob;\n    fileIndex?: number;\n}\n```\n",
-      "breadcrumb": "Interface UpdatedSource"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface VError",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/verror.html",
-      "content": "# VError\n\n## Syntax\n\n```typescript\ninterface VError {\n    code: number;\n    message: string;\n    details?: string[];\n}\n```\n\n## Attributes\n\n### code\n\nThe error code. Please refer to [Error List]({{ site.api }}errorlist.html) for the whole error codes DDV has.\n\n### message\n\nThe error message.\n\n### details\n\nThe detailed error info.\n\n## Related\n\n- [`DDVError`]({{ site.api }}interface/ddverror.html)",
-      "breadcrumb": "Interface VError"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface VideoConfig",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/videoconfig.html",
-      "content": "# VideoConfig\n\n## Syntax\n\n```typescript\ninterface videoConfig {\n    resolution?: [number, number];\n    fill?: boolean; \n}\n```\n\n## Attributes\n\n### resolution\n\nThe resolution of the camera video input. If the specified resolution is not exactly supported, the closest resolution will be applied.\n\nDefault value: `[1280, 720]` which means 720P.\n\n### fill\n\nSpecify whether the video stream fills the viewer. \n\nDefault value: `false`\n\n## Related\n\n- [`play()`]({{ site.api }}class/captureviewer.html#play)\n",
-      "breadcrumb": "Interface VideoConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface VideoDeviceInfo",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/videodeviceinfo.html",
-      "content": "# VideoDeviceInfo\n\n## Syntax\n\n```typescript\ninterface VideoDeviceInfo {\n    deviceId: string; \n    label: string;\n}\n```\n\n## Attributes\n\n### deviceId\n\nAn alphanumeric string that uniquely identifies a camera.\n\n### label\n\nA human-readable string describing the camera.\n\n## Related\n\n- [`getAllCameras()`]({{ site.api }}class/captureviewer.html#getallcameras)\n- [`getCurrentCameras()`]({{ site.api }}class/captureviewer.html#getcurrentcamera)\n- [`selectCamera()`]({{ site.api }}class/captureviewer.html#selectcamera)",
-      "breadcrumb": "Interface VideoDeviceInfo"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer User Interface - Viewer Config",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/viewer/viewerconfig.html",
-      "content": "# Viewer Config\n\nThe viewer configurations and styles are configured by `viewerConfig` when creating the viewer.\n\n## Structure\n\nEach viewer class has its own `viewerConfig` structure. Please refer to the links below and check the details.\n\n- [`EditViewerConfig`]({{ site.api }}interface/editviewerconfig.html)\n- [`ThumbnailConfig`]({{ site.api }}interface/thumbnailconfig.html)\n- [`AnnotationConfig`]({{ site.api }}interface/annotationconfig.html)\n- [`CaptureViewerConfig`]({{ site.api }}interface/captureviewerconfig.html)\n- [`PerspectiveViewerConfig`]({{ site.api }}interface/perspectiveviewerconfig.html)\n- [`BrowseViewerConfig`]({{ site.api }}interface/browseviewerconfig.html)\n\n*`CustomViewer` does not have `viewerConfig`.*\n\n{% comment %} \nTake `EditViewerConfig` as example, we can configure some styles of the viewer and configurations of the viewer.\n\n```typescript\ninterface EditViewerConfig {\n    canvasStyle?: CanvasStyle;\n    pageStyle?: BaseStyle;\n    quadSelectionStyle?: QuadSelectionStyle;\n    enableSlide?: boolean; \n    scrollToLatest?: boolean; \n    scrollDirection?: string; \n    minZoom?: number; \n    maxZoom?: number; \n}\n```\n\n{% endcomment %}\n\n## Default viewerConfig\n\nDDV will provide the default viewerConfig for each viewer.\n\n<div class=\"multi-panel-switching-prefix\"></div>\n\n- [Edit viewer](#edit-viewer)\n- [Thumbnail](#thumbnail)\n- [Annotation](#annotation)\n- [Capture viewer](#capture-viewer)\n- [Perspective viewer](#perspective-viewer)\n- [Browse viewer](#browse-viewer)\n\n<div class=\"multi-panel-start\"></div>\n\n### EditViewerConfig\n\n```typescript\n{\n    canvasStyle: {\n        background: \"#e2e1de\",\n        cursor: \"default\",\n    },\n    pageStyle: {\n        background: \"#fff\",\n        border: \"1px solid #707070\",\n    },\n    currentPageStyle: {\n        background: \"\",\n        border: \"\",\n    },\n    quadSelectionStyle: {\n        background: \"rgba(255,255,255,0)\",\n        border: \"2px solid #fe8e14\",\n        ctrlBackground: \"#fe8e14\",\n        ctrlBorder: \"2px solid #fe8e14\",\n        ctrlBorderRadius: \"50%\",\n        ctrlHeight: \"15px\",\n        ctrlWidth: \"15px\",\n        invalidBorderColor: \"red\",\n        invalidCtrlBorderColor: \"red\",\n    },\n    minZoom: 0.01,\n    maxZoom: 64,\n    scrollDirection: \"vertical\",\n    enableSlide: true,\n    scrollToLatest: false,\n};\n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n### ThumbnailConfig\n\n#### Mobile\n\n```typescript\n{\n    canvasStyle: {\n        background: \"#4B4B4B\",\n        cursor: \"default\",\n    },\n    currentPageStyle: {\n        border: \"4px solid #fe8e14\",\n    },\n    pageStyle: {\n        border: \"8px solid rgba(0,0,0,0)\",\n        background: \"rgba(255,255,255,0)\",\n    },\n    selectedPageStyle: {\n        border: \"6px solid #AAAAAA\",\n        background: \"#AAAAAA\",\n    },\n    hoveredPageStyle: {\n        border: \"6px solid #AAAAAA\",\n        background: \"#AAAAAA\",\n    },\n    placeholderStyle: {\n        border: \"6px solid rgba(136,136,136,0.2)\",\n        background: \"rgba(136,136,136,0.2)\",\n    },\n    pageNumberStyle: {\n        background: \"rgba(255,255,255,0)\",\n        border: \"0px solid #000\",\n        borderRadius: \"0px\",\n        bottom: \"3px\",\n        color: \"white\",\n        fontFamily: \"Open Sans\",\n        fontSize: \"14px\",\n        height: \"24px\",\n        left: \"50%\",\n        onPage: false,\n        opacity: 1,\n        right: \"\",\n        top: \"\",\n        translateX: \"-50%\",\n        translateY: \"0px\",\n        visibility: \"visible\",\n        width: \"32px\",\n    },\n    checkboxStyle: {\n        background: \"#fff\",\n        border: \"2px solid #999999\",\n        borderRadius: \"0px\",\n        bottom: \"\",\n        checkMarkColor: \"#FE8E14\",\n        checkMarkLineWidth: \"2px\",\n        height: \"16px\",\n        left: \"2px\",\n        opacity: 1,\n        right: \"\",\n        top: \"2px\",\n        translateX: \"0px\",\n        translateY: \"0px\",\n        visibility: \"visible\",\n        width: \"16px\",\n    },\n\n    rows: 3,\n    columns: 2,\n    multiselectMode: false,\n    scrollToLatest: false,\n    enableDragPage: true,\n\n    scrollDirection: \"vertical\",\n    visibilty: \"hidden\",\n    size: \"100%\",\n    position: \"left\",\n};\n```\n\n#### Desktop\n\n```typescript\n{\n    canvasStyle: {\n        background: \"#DDDDDD\",\n        cursor: \"default\",\n    },\n    currentPageStyle: {\n        border: \"4px solid #fe8e14\",\n    },\n    pageStyle: {\n        border: \"8px solid rgba(0,0,0,0)\",\n        background: \"rgba(255,255,255,0)\",\n    },\n    selectedPageStyle: {\n        border: \"6px solid #AAAAAA\",\n        background: \"#AAAAAA\",\n    },\n    hoveredPageStyle: {\n        border: \"6px solid #AAAAAA\",\n        background: \"#AAAAAA\",\n    },\n    placeholderStyle: {\n        border: \"6px solid rgba(136,136,136,0.2)\",\n        background: \"rgba(136,136,136,0.2)\",\n    },\n    pageNumberStyle: {\n        background: \"rgba(255,255,255,0)\",\n        border: \"0px solid #000\",\n        borderRadius: \"0px\",\n        bottom: \"3px\",\n        color: \"#323234\",\n        fontFamily: \"Open Sans\",\n        fontSize: \"14px\",\n        height: \"24px\",\n        left: \"50%\",\n        onPage: false,\n        opacity: 1,\n        right: \"\",\n        top: \"\",\n        translateX: \"-50%\",\n        translateY: \"0px\",\n        visibility: \"visible\",\n        width: \"32px\",\n    },\n    checkboxStyle: {\n        background: \"#fff\",\n        border: \"2px solid #999999\",\n        borderRadius: \"0px\",\n        bottom: \"\",\n        checkMarkColor: \"#FE8E14\",\n        checkMarkLineWidth: \"2px\",\n        height: \"16px\",\n        left: \"2px\",\n        opacity: 1,\n        right: \"\",\n        top: \"2px\",\n        translateX: \"0px\",\n        translateY: \"0px\",\n        visibility: \"visible\",\n        width: \"16px\",\n    },\n\n    rows: 4,\n    columns: 1,\n    multiselectMode: false,\n    scrollToLatest: false,\n    enableDragPage: true,\n    scrollDirection: \"vertical\",\n    visibilty: \"hidden\",\n    size: \"180px\",\n    position: \"left\",\n};\n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n### AnnotationConfig\n\n#### Mobile\n\n```typescript\n{\n    toolbarConfig: {\n        style: {\n            height: \"40px\",\n            width: \"84px\",\n            background: \"#f5f5f5\",\n        },\n    },\n    paletteConfig: {\n        colorList: [\n            \"#F01314\", \"#FD7C10\", \"#FFEE5F\", \"#07C37F\", \"#0E68F5\", \"#9D3BFE\", \"#000000\",\n            \"#FF9494\", \"#87440C\", \"#B7A514\", \"#046743\", \"#50C9FF\", \"#EBA3ED\", \"#FFFFFF\",\n            \"#CECECE\",\n        ],\n        labels: {\n            text: \"Text\",\n            stroke: \"Stroke\",\n            fill: \"Fill\",\n            opacity: \"Opacity\",\n            style: \"Style\",\n            standardBusiness: \"StandardBusiness\",\n        },\n    },\n    annotationSelectionStyle: {\n        border: \"1px solid #59626A\",\n        background: \"\",\n        ctrlBorderRadius: \"6px\",\n        ctrlWidth: \"12px\",\n        ctrlHeight: \"12px\",\n        ctrlBorder: \"1px solid #59626A\",\n        ctrlBackground: \"white\",\n    },\n    inkCreateDelay: 1000, \n    showOnTopWhenSelected: false,\n    enableContinuousDrawing: false,\n    defaultStyleConfig: {\n        rectangle: defaultShapeStyle,\n        ellipse: defaultShapeStyle,\n        polygon: defaultShapeStyle,\n        polyline: {\n            ...defaultShapeStyle,\n            lineEnding: {\n                start: Dynamsoft.DDV.EnumLineEnding.NONE,\n                end: Dynamsoft.DDV.EnumLineEnding.NONE,\n            },\n        },\n        line: {\n            ...defaultShapeStyle,\n            lineEnding: {\n                start: Dynamsoft.DDV.EnumLineEnding.NONE,\n                end: Dynamsoft.DDV.EnumLineEnding.NONE,\n            },\n        },\n        ink: baseStyle,\n        textBox: {\n            ...defaultShapeStyle,\n            textAlign: \"left\",\n            textContent: defaultTextContent,\n        },\n        textTypewriter: {\n            opacity: 1,\n            textContent: defaultTextContent,\n        },\n        stamp: {\n            opacity: 1,\n            stamp: Dynamsoft.DDV.EnumStampIcon.DRAFT,\n        },\n    },\n};\n\nconst baseStyle = {\n    borderWidth: 3,  //The unit is point.\n    borderColor: rgb(0,0,0),\n    opacity: 1,\n};\n\nconst defaultShapeStyle = {\n    ...baseStyle,\n    background: '',\n    lineDash: [0, 0],\n};\n\nconst defaultTextContent = {\n    content: \"\",\n    color: rgb(0,0,0),\n    underline: false,\n    lineThrough: false,\n    fontFamily: \"Helvetica\",\n    fontSize: 72,\n    fontStyle: \"normal\",\n    fontWeight: \"normal\", \n};\n```\n\n#### Desktop\n\n```typescript\n{\n    toolbarConfig: {\n        style: {\n            height: \"40px\",\n            width: \"84px\",\n            background: \"#f5f5f5\",\n        },\n    },\n    paletteConfig: {\n        colorList: [\n            \"#F01314\", \"#FD7C10\", \"#FFEE5F\", \"#07C37F\", \"#0E68F5\", \"#9D3BFE\", \"#000000\",\n            \"#FF9494\", \"#87440C\", \"#B7A514\", \"#046743\", \"#50C9FF\", \"#EBA3ED\", \"#FFFFFF\",\n            \"#CECECE\",\n        ],\n        labels: {\n            text: \"Text\",\n            stroke: \"Stroke\",\n            fill: \"Fill\",\n            opacity: \"Opacity\",\n            style: \"Style\",\n            standardBusiness: \"StandardBusiness\",\n        },\n    },\n    annotationSelectionStyle: {\n        border: \"1px solid #59626A\",\n        background: \"\",\n        ctrlBorderRadius: \"6px\",\n        ctrlWidth: \"12px\",\n        ctrlHeight: \"12px\",\n        ctrlBorder: \"1px solid #59626A\",\n        ctrlBackground: \"white\",\n    },\n    inkCreateDelay: 1000, \n    showOnTopWhenSelected: false,\n    enableContinuousDrawing: false,\n    defaultStyleConfig: {\n        rectangle: defaultShapeStyle,\n        ellipse:defaultShapeStyle,\n        polygon: defaultShapeStyle,\n        polyline: {\n            ...defaultShapeStyle,\n            lineEnding: {\n                start: Dynamsoft.DDV.EnumLineEnding.NONE,\n                end: Dynamsoft.DDV.EnumLineEnding.NONE,\n            },\n        },\n        line: {\n            ...defaultShapeStyle,\n            lineEnding: {\n                start: Dynamsoft.DDV.EnumLineEnding.NONE,\n                end: Dynamsoft.DDV.EnumLineEnding.NONE,\n            },\n        },\n        ink: baseStyle,\n        textBox: {\n            ...defaultShapeStyle,\n            textAlign: \"left\",\n            textContent: defaultTextContent,\n        },\n        textTypewriter: {\n            opacity: 1,\n            textContent: defaultTextContent,\n        },\n        stamp: {\n            opacity: 1,\n            stamp: Dynamsoft.DDV.EnumStampIcon.DRAFT,\n        },\n    },\n};\n\nconst baseStyle = {\n    borderWidth: 1,  //The unit is point.\n    borderColor: rgb(0,0,0),\n    opacity: 1,\n};\n\nconst defaultShapeStyle = {\n    ...baseStyle,\n    background: '',\n    lineDash: [0, 0],\n};\n\nconst defaultTextContent = {\n    content: \"\",\n    color: rgb(0,0,0),\n    underline: false,\n    lineThrough: false,\n    fontFamily: \"Helvetica\",\n    fontSize: 16,\n    fontStyle: \"normal\",\n    fontWeight: \"normal\", \n};\n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n### CaptureViewerConfig\n\n```typescript\n{\n    canvasStyle: {\n        background: \"#e2e1de\",\n        cursor: \"default\",\n    },\n    quadSelectionStyle: {\n        border: \"2px solid #fe8e14\",\n        background: \"rgba(255,255,255,0)\",\n    },\n\n    enableAutoCapture: false,\n    enableAutoDetect: false,\n    enableTorch: false,\n    maxFrameNumber: 10,\n    autoCaptureDelay: 1000,\n    acceptedPolygonConfidence: 80,\n};\n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n### PerspectiveViewerConfig\n\n```typescript\n{\n    canvasStyle: {\n        background: \"#e2e1de\",\n        cursor: \"default\",\n    },\n    pageStyle: {\n        border: \"1px solid #707070\",\n        background: \"#fff\",\n    },\n    quadSelectionStyle: {\n        border: \"2px solid #fe8e14\",\n        background: \"rgba(255,255,255,0)\",\n        ctrlBorderRadius: \"50%\",\n        ctrlBackground: \"#fe8e14\",\n        ctrlBorder: \"2px solid #fe8e14\",\n        ctrlWidth: \"15px\",\n        ctrlHeight: \"15px\",\n        invalidCtrlBorderColor: \"red\",\n        invalidBorderColor: \"red\",\n    },\n    enableSlide: true,\n};\n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n### BrowseViewerConfig\n\n```typescript\n{\n    canvasStyle: {\n        background: \"#e2e1de\",\n        cursor: \"default\",\n    },\n    currentPageStyle: {\n        border: \"4px solid #fe8e14\",\n    },\n    pageStyle: {\n        border: \"8px solid rgba(0,0,0,0)\",\n        background: \"rgba(255,255,255,0)\",\n    },\n    selectedPageStyle: {\n        border: \"6px solid #AAAAAA\",\n        background: \"#AAAAAA\",\n    },\n    hoveredPageStyle: {\n        border: \"6px solid #AAAAAA\",\n        background: \"#AAAAAA\",\n    },\n    placeholderStyle: {\n        border: \"6px solid rgba(136,136,136,0.2)\",\n        background: \"rgba(136,136,136,0.2)\",\n    },\n    pageNumberStyle: {\n        background: \"rgba(255,255,255,0)\",\n        border: \"0px solid #000\",\n        borderRadius: \"0px\",\n        bottom: \"3px\",\n        color: \"#323234\",\n        fontFamily: \"Open Sans\",\n        fontSize: \"14px\",\n        height: \"24px\",\n        left: \"50%\",\n        onPage: false,\n        opacity: 1,\n        right: \"\",\n        top: \"\",\n        translateX: \"-50%\",\n        translateY: \"0px\",\n        visibility: \"visible\",\n        width: \"32px\",\n    },\n    checkboxStyle: {\n        background: \"#fff\",\n        border: \"2px solid #999999\",\n        borderRadius: \"0px\",\n        bottom: \"\",\n        checkMarkColor: \"#FE8E14\",\n        checkMarkLineWidth: 2,\n        height: \"16px\",\n        left: \"2px\",\n        opacity: 1,\n        right: \"\",\n        top: \"2px\",\n        translateX: \"0px\",\n        translateY: \"0px\",\n        visibility: \"visible\",\n        width: \"16px\",\n    },\n    rows: 2,\n    columns: 2,\n    multiselectMode: false,\n    scrollToLatest: false,\n    enableDragPage: true,\n    scrollDirection: \"vertical\",\n};\n```\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-switching-end\"></div>\n\nDevelopers can customize it to achieve their own requirement. Please refer to [How to customize viewer]({{ site.viewer }}customize.html).\n\n{% comment %} <div class=\"multi-panel-switching-prefix\"></div>\n\n- [Edit viewer](#edit-viewer)\n- [Capture viewer](#capture-viewer)\n- [Perspective viewer](#perspective-viewer)\n- [Browse viewer](#browse-viewer)\n\n<div class=\"multi-panel-start\"></div>\n\n### EditViewerConfig\n\n```typescript\ninterface EditViewerConfig {\n    canvasStyle?: CanvasStyle;\n    pageStyle?: BaseStyle;\n    quadSelectionStyle?: QuadSelectionStyle;\n    enableSlide?: boolean; // Whether allow to slide the pages, default: true\n    scrollToLatest?: boolean; // Auto set the latest loaded page as the current page, default: false\n    scrollDirection?: string; // The scroll direction, supports \"horizontal\", \"vertical\", default: \"vertical\"\n    minZoom?: number; // minvalue&default: 0.01\n    maxZoom?: number; // maxvalue&default: 128\n}\n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n### CaptureViewerConfig\n\n```typescript\ninterface CaptureViewerConfig {\n    canvasStyle?: CanvasStyle;\n    quadSelectionStyle?: QuadSelectionStyle;\n    enableTorch?: boolean; // default: false\n    enableAutoCapture?: boolean; // default: false\n    enableAutoDetect?: boolean; // default: false\n    acceptedPolygonConfidence?: number; // deafault: 80\n    maxFrameNumber?: number; // default: 10\n}\n```\n\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n### PerspectiveViewerConfig\n\n```typescript\ninterface PerspectiveViewerConfig {\n    canvasStyle?: CanvasStyle;\n    pageStyle?: BaseStyle;\n    quadSelectionStyle?: QuadSelectionStyle;    \n    enableSlide?: boolean; // Whether allow to slide the pages, default: true\n}\n```\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-start\"></div>\n\n### BrowseViewerConfig\n\n```typescript\ninterface BrowseViewerConfig {\n    canvasStyle?: CanvasStyle;\n    pageStyle?: BaseStyle;\n    currentPageStyle?: BaseStyle; // only border effective\n    selectedPageStyle?: BaseStyle;\n    hoveredPageStyle?: BaseStyle;\n    placeholderStyle?: BaseStyle;\n    pageNumberStyle?: PageNumberStyle;\n    checkboxStyle?: CheckboxStyle;\n    rows?: number; //The number of rows\n    columns?: number; //The number of columns\n    multiselectMode?: boolean; //Whether can select multiple pages at one time\n    scrollToLatest?: boolean; // Auto set the latest loaded page as the current page\n    enableDragPage?: boolean; // Whether to allow drag&drop pages\n    scrollDirection?: string; // The scroll direction, supports \"horizontal\", \"vertical\"\n}\n```\n<div class=\"multi-panel-end\"></div>\n\n<div class=\"multi-panel-switching-end\"></div> {% endcomment %}",
-      "breadcrumb": "UiConfig"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface VImageData",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/vimagedata.html",
-      "content": "# VImageData\n\n## Syntax\n\n```typescript\ninterface VImageData {\n    type: EnumImageDataType;\n    data: ArrayBuffer | Blob; \n    height?: number;\n    width?: number;\n}\n```\n\n## Attributes\n\n### type\n\nThe image data type. Please refer to [`EnumImageDataType`]({{ site.api }}enumeration-type/enumimagedatatype.html)\n\n### data\n\nThe image data. ***Do not destroy it.***\n\n### height\n\nThe image height. \n\n### width\n\nThe image width.",
-      "breadcrumb": "Interface VImageData"
-    },
-    
-    {
-      "title": "Vue Document Viewer - Dynamsoft Document Viewer Documentation",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/gettingstarted/vue.html",
-      "content": "# How to Integrate Document Viewer into a Vue Project\n\nThis guide will show you how to integrate Dynamsoft Document Viewer into a Vue project.\n\nYou can can download the sample on GitHub:\n\n![Download](/assets/imgs/download.png)[Vue Helloworld](https://github.com/Dynamsoft/document-viewer-samples/blob/main/hello-world/vue)\n\n## Preparation\n\nMake sure you have node installed.\n\n## New Project\n\nCreate a new Vue project.\n\n```bash\nnpm create vite@latest ddv-vue -- --template vue-ts\n```\n\n## Add Dependencies\n\n1. Install Dynamsoft Document Viewer.\n\n   ```bash\n   npm install dynamsoft-document-viewer\n   ```\n   \n2. Copy the resources of Dynamsoft Document Viewer into the public folder.\n\n   \n   1. Install `rollup-plugin-copy` as `devDependencies`.\n   \n      ```bash\n      npm install rollup-plugin-copy --save-dev\n      ```\n      \n   \n   2. Modify `vite.config.ts` to copy the resources.\n   \n      ```js\n      import copy from \"rollup-plugin-copy\";\n      export default defineConfig({\n        //...\n        plugins: [\n          copy({\n            targets: [\n              {\n                src: \"node_modules/dynamsoft-document-viewer/dist\",\n                dest: \"public/dynamsoft-document-viewer\",\n              },\n            ],\n            hook: \"buildStart\",\n          }),\n          vue(),\n        ],\n        //...\n      })\n      ```\n      \n      \n## Create a Document Viewer Component\n\n1. Create a viewer component file under `src/Component/viewer.vue`.\n   \n2. Add the following content in the component file. It will bind Edit Viewer to a container. A license is set here. You can apply for a 30-day trial on [this page](https://www.dynamsoft.com/customer/license/trialLicense/?product=ddv).\n\n   ```html\n   <!-- eslint-disable vue/multi-word-component-names -->\n   <script setup lang=\"ts\">\n   import { onMounted } from 'vue'\n   import { DDV } from 'dynamsoft-document-viewer'\n   import 'dynamsoft-document-viewer/dist/ddv.css'\n\n   onMounted(async () => {\n     DDV.on('error', (e) => {\n       alert(e.message)\n     })\n\n     // Public trial license which is valid for 24 hours\n     DDV.Core.license = \"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9\";\n     DDV.Core.engineResourcePath = \"/dynamsoft-document-viewer/dist/engine\";\n     // Preload DDV Resource\n     DDV.Core.loadWasm();\n     await DDV.Core.init();\n     \n     const viewer = new DDV.EditViewer({\n       container: 'container'\n     });\n   })\n   </script>\n\n   <template>\n     <div id=\"container\"></div>\n   </template>\n\n   <style scoped>\n   #container {\n     width: 100%;\n     height: 100%;\n   }\n   </style>\n   ```\n\n## Use the Document Viewer Component\n\nOpen `App.vue` and add the viewer component.\n\n```html\n<script setup lang=\"ts\">\nimport Viewer from './Component/Viewer.vue'\n</script>\n\n<template>\n  <h1>Hello World for Vue</h1>\n  <Viewer></Viewer>\n</template>\n\n<style>\nhtml,\nbody {\n  width: 100%;\n  height: 100%;\n}\n\nbody {\n  margin: 0px;\n  padding: 0px 8px 8px 8px;\n  box-sizing: border-box;\n}\n\n#app {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n</style>\n```\n\nRun the app using the following command and you should see the viewer mounted in your application!\n\n```bash\nnpm run dev\n```\n\n## Other Samples\n\nYou can find other samples on [this GitHub repo](https://github.com/Dynamsoft/document-viewer-samples/).\n",
-      "breadcrumb": "Vue"
-    },
-    
-    {
-      "title": "Dynamsoft Document Viewer API Reference - Interface ZoomOrigin",
-      "url": "https://www.dynamsoft.com/document-viewer/docs/api/interface/zoomorigin.html",
-      "content": "# ZoomOrigin\n\n## Syntax\n\n```typescript\ninterface ZoomOrigin {\n    x: string; \n    y: string; \n}\n```\n\n## Attributes\n\n### x\n\nSpecify the origin of x-coordinate.\n\nSupported value: `center`, `start`, `end`\n\nDefault value: `center`\n\n### y\n\nSpecify the origin of y-coordinate.\n\nSupported value: `center`, `start`, `end`\n\nDefault value: `center`\n\n\n![Zoom Origin](/assets/imgs/zoomorigin.png)    \n\n## Related APIs\n\n- [`zoom`]({{ site.api }}class/editviewer.html#zoom)",
-      "breadcrumb": "Interface ZoomOrigin"
-    },
-    
-    {
-      "title": null,
-      "url": "https://www.dynamsoft.com/document-viewer/docs/redirects.json",
-      "content": null,
-      "breadcrumb": null
-    },
-    
-    {
-      "title": null,
-      "url": "https://www.dynamsoft.com/document-viewer/docs/robots.txt",
-      "content": null,
-      "breadcrumb": null
-    }
-    
-  ]
-}