996394: UG Update for Annotation Revamp Part-1

Author: SF4524LogeshKumar

Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-images/area-annot.png

@@ -0,0 +1,317 @@
+---
+layout: post
+title: Area annotation in TypeScript PDF Viewer | Syncfusion
+description: Learn to add, edit, and customize Area measurement annotations in Syncfusion TypeScript PDF Viewer with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Area annotation in TypeScript PDF Viewer
+
+Area is a measurement annotation used to measure the surface of a closed region in the PDF.
+
+![Area annotations overview](../annotation-images/area-annot.png)
+
+## Add Area Annotation
+
+### Add area annotation via UI
+
+Use the annotation toolbar:
+- Click the **Edit Annotation** button in the PDF Viewer toolbar.
+- Click the **Measurement Annotation** dropdown.
+- Choose **Area**, then draw the region on the page.
+
+N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode.
+
+![Measurement toolbar](../../images/calibrate_tool.png)
+
+### Add an area annotation programmatically
+
+#### Enable area mode
+
+The PDF Viewer library allows drawing measurement annotations programmatically after enabling area mode in button clicks.
+
+```html
+<button id="areaMode">Area</button>
+```
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+
+document.getElementById('areaMode')?.addEventListener('click', function () {
+    pdfviewer.annotationModule.setAnnotationMode('Area');
+});
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.appendTo('#PdfViewer');
+
+document.getElementById('areaMode')?.addEventListener('click', function () {
+    pdfviewer.annotationModule.setAnnotationMode('Area');
+});
+{% endhighlight %}
+{% endtabs %}
+
+#### Add Area Annotation
+
+The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method.
+
+```html
+<button id="addAreaAnnotation">Add Area annotation Programmatically</button>
+```
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, AreaSettings } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+
+pdfviewer.appendTo('#PdfViewer');
+
+document.getElementById('addAreaAnnotation')?.addEventListener('click', function () {
+    pdfviewer.annotation.addAnnotation('Area', {
+        offset: { x: 200, y: 500 },
+        pageNumber: 1,
+        vertexPoints: [
+            { x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }
+        ]
+    } as AreaSettings);
+});
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, AreaSettings } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+
+pdfviewer.appendTo('#PdfViewer');
+
+document.getElementById('addAreaAnnotation')?.addEventListener('click', function () {
+    pdfviewer.annotation.addAnnotation('Area', {
+        offset: { x: 200, y: 500 },
+        pageNumber: 1,
+        vertexPoints: [
+            { x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }
+        ]
+    } as AreaSettings);
+});
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Area Annotation
+
+### Edit Area Annotation in UI
+
+You can select, move, and resize Area annotations directly in the viewer:
+- Select an Area to show its vertex handles.
+- Move: drag inside the shape to reposition it on the page.
+- Resize/reshape: drag any vertex handle to adjust the polygon points and size.
+- Delete or access more options from the context menu.
+
+Use the toolbar to change appearance:
+- Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools.
+
+See the sections below for screenshots and details.
+
+### Edit the properties of area annotations
+
+The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+#### Edit fill color
+
+The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+
+![CalibrateFillColor](../../images/calibrate_fillcolor.png)
+
+#### Edit stroke color
+
+The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+
+![CalibrateStrokeColor](../../images/calibrate_stroke.png)
+
+#### Edit thickness
+
+Edit border thickness using the range slider provided in the Edit Thickness tool.
+
+![CalibrateThickness](../../images/calibrate_thickness.png)
+
+#### Edit opacity
+
+The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+
+![CalibrateOpacity](../../images/calibrate_opacity.png)
+
+### Edit an existing area annotation programmatically
+
+To modify an existing area annotation programmatically, use the editAnnotation() method.
+
+Here is an example of using editAnnotation():
+
+```html
+<button id="editAreaAnnotation">Edit Area annotation Programmatically</button>
+```
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+
+let editAreaAnnotation = document.getElementById('editAreaAnnotation');
+if (editAreaAnnotation) {
+    editAreaAnnotation.addEventListener('click', function () {
+        if (pdfviewer) {
+            for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
+                if (pdfviewer.annotationCollection[i].subject === "Area calculation") {
+                    pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle";
+                    pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
+                    pdfviewer.annotationCollection[i].thickness = 2;
+                    pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
+                    pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
+                }
+            }
+        }
+    });
+}
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.appendTo('#PdfViewer');
+
+let editAreaAnnotation = document.getElementById('editAreaAnnotation');
+if (editAreaAnnotation) {
+    editAreaAnnotation.addEventListener('click', function () {
+        if (pdfviewer) {
+            for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
+                if (pdfviewer.annotationCollection[i].subject === "Area calculation") {
+                    pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle";
+                    pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
+                    pdfviewer.annotationCollection[i].thickness = 2;
+                    pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
+                    pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
+                }
+            }
+        }
+    });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Default area settings during initialization
+
+Set default [areaSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#areasettings) before creating the control.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+
+pdfviewer.areaSettings = { fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange' };
+pdfviewer.appendTo('#PdfViewer');
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+
+pdfviewer.areaSettings = { fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange' };
+pdfviewer.appendTo('#PdfViewer');
+{% endhighlight %}
+{% endtabs %}
+
+## Editing scale ratio and unit of the area measurement annotation
+
+The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control.
+
+  ![CalibrateScaleRatio](../../images/calibrate_scaleratio.png)
+
+The Units of measurements support for the measurement annotations in the PDF Viewer are
+
+* Inch
+* Millimeter
+* Centimeter
+* Point
+* Pica
+* Feet
+
+![CalibrateScaleDialog](../../images/calibrate_scaledialog.png)
+
+## Setting default scale ratio settings during control initialization
+
+The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet,
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.measurementSettings={scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'};
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+pdfviewer.measurementSettings={scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'};
+pdfviewer.appendTo('#PdfViewer');
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)