1003205: Updated Pending Review Corrections Annotations

Author: SF4524LogeshKumar

Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-images/line-angle-constraint.gif

@@ -27,9 +27,7 @@ N> When in pan mode, selecting a measurement annotation switches the viewer to t
 
 ![Measurement toolbar](../../images/calibrate_tool.png)
 
-### Add an area annotation programmatically
-
-#### Enable area mode
+### Enable area mode
 
 The PDF Viewer library allows drawing measurement annotations programmatically after enabling area mode in button clicks.
 
@@ -67,7 +65,7 @@ document.getElementById('areaMode')?.addEventListener('click', function () {
 {% endhighlight %}
 {% endtabs %}
 
-#### Add Area Annotation
+### Add an area annotation programmatically
 
 The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method.
 
@@ -134,7 +132,7 @@ Use the toolbar to change appearance:
 
 See the sections below for screenshots and details.
 
-### Edit the properties of area annotations
+#### 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.
 
@@ -264,6 +262,62 @@ pdfviewer.appendTo('#PdfViewer');
 {% endhighlight %}
 {% endtabs %}
 
+## Set properties while adding Individual Annotation
+
+Set properties for individual annotation before creating the control using `AreaSettings`.
+
+> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+
+Refer to the following code snippet to set the default Area settings.
+
+```html
+<button id="Area">Add Area</button>
+```
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, AreaSettings} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+//Apply Area Settings while adding individual Annotation
+document.getElementById('Area')?.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 }
+        ],
+        fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'
+    } as AreaSettings);
+});
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, AreaSettings} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+//Apply Area Settings while adding individual Annotation
+document.getElementById('Area')?.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 }
+        ],
+        fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'
+    } as AreaSettings);
+});
+{% 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.

Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/area-annotation.md

@@ -27,9 +27,7 @@ N> When in pan mode, selecting a shape annotation switches the viewer to text se
 
 ![Shape toolbar](../../images/shape_toolbar.png)
 
-### Add an arrow annotation programmatically
-
-#### Enable arrow mode
+### Enable arrow mode
 
 The PDF Viewer library allows drawing shape annotations programmatically after enabling arrow mode in button clicks.
 
@@ -67,7 +65,7 @@ document.getElementById('arrowMode')?.addEventListener('click', () => {
 {% endhighlight %}
 {% endtabs %}
 
-#### Add Arrow Annotation
+### Add an arrow annotation programmatically
 
 The PDF Viewer library allows adding shape annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method.
 
@@ -125,7 +123,7 @@ You can select, move, and resize Arrow annotations directly in the viewer:
 - Resize/reshape: drag start/end handles to adjust its length and direction.
 - Delete or access more options from the context menu.
 
-### Editing the properties of the arrow annotation
+#### Editing the properties of the arrow annotation
 
 The fill color, stroke color, thickness, and opacity of arrow shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
 
@@ -247,6 +245,66 @@ pdfviewer.appendTo('#PdfViewer');
 {% endhighlight %}
 {% endtabs %}
 
+## Set properties while adding Individual Annotation
+
+Set properties for individual annotation before creating the control using `ArrowSettings`.
+
+> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+
+Refer to the following code snippet to set the default arrow settings.
+
+```html
+<button id="arrow">Add Arrow</button>
+```
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, ArrowSettings} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+//Apply Arrow Settings while adding individual Annotation
+document.getElementById('arrow')?.addEventListener('click', function () {
+    pdfviewer.annotation.addAnnotation('Arrow', {
+        offset: { x: 200, y: 230 },
+        pageNumber: 1,
+        vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }],
+        fillColor:'#ff1010ff',
+        strokeColor:'#fff000',
+        opacity:0.9,
+        author: 'User 1',
+        thickness: 1
+    } as ArrowSettings);
+});
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, ArrowSettings} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+//Apply Arrow Settings while adding individual Annotation
+document.getElementById('arrow')?.addEventListener('click', function () {
+    pdfviewer.annotation.addAnnotation('Arrow', {
+        offset: { x: 200, y: 230 },
+        pageNumber: 1,
+        vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }],
+        fillColor:'#ff1010ff',
+        strokeColor:'#fff000',
+        opacity:0.9,
+        author: 'User 1',
+        thickness: 1
+    } as ArrowSettings);
+});
+{% endhighlight %}
+{% endtabs %}
+
 N> In both [Arrow](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#arrowsettings) and [Line](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#linesettings) annotations Settings, the Fill Color option is available only when an arrowhead style is applied at the Start or End. If both Start and End arrowhead styles are set to None, lines do not support fill rendering and the Fill Color option remains disabled.
 
 [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)

Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/arrow-annotation.md

@@ -27,9 +27,7 @@ N> When in pan mode, selecting a shape annotation switches the viewer to text se
 
 ![Shape toolbar](../../images/shape_toolbar.png)
 
-### Add a circle annotation programmatically
-
-#### Enable circle mode
+### Enable circle mode
 
 The PDF Viewer library allows drawing Circle annotations programmatically after enabling Circle mode in button clicks.
 
@@ -82,7 +80,7 @@ document.getElementById('setNone')?.addEventListener('click', () => {
 {% endhighlight %}
 {% endtabs %}
 
-#### Add circle annotation
+### Add a circle annotation programmatically
 
 Add shape annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method.
 
@@ -141,7 +139,7 @@ You can select, move, and resize Circle annotations directly in the viewer:
 - Resize: drag the corner handles to adjust its diameter.
 - Delete or access more options from the context menu.
 
-### Editing the properties of the circle annotation
+#### Editing the properties of the circle annotation
 
 The fill color, stroke color, thickness, and opacity of circle shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
 
@@ -253,6 +251,66 @@ pdfviewer.appendTo('#PdfViewer');
 {% endhighlight %}
 {% endtabs %}
 
+## Set properties while adding Individual Annotation
+
+Set properties for individual annotation before creating the control using `CircleSettings`.
+
+> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+
+Refer to the following code snippet to set the default Circle settings.
+
+```html
+<button id="Circle">Add Circle</button>
+```
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CircleSettings} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+//Apply Circle Settings while adding individual Annotation
+document.getElementById('Circle')?.addEventListener('click', function () {
+    pdfviewer.annotation.addAnnotation('Circle', {
+        offset: { x: 200, y: 480 },
+        pageNumber: 1,
+        width: 150,
+        height: 75,
+        opacity: 0.5,
+        strokeColor: '#FF0000',
+        fillColor: '#000fff#',
+        author: 'User1'
+    } as CircleSettings);
+});
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CircleSettings} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+pdfviewer.appendTo('#PdfViewer');
+//Apply Circle Settings while adding individual Annotation
+document.getElementById('Circle')?.addEventListener('click', function () {
+    pdfviewer.annotation.addAnnotation('Circle', {
+        offset: { x: 200, y: 480 },
+        pageNumber: 1,
+        width: 150,
+        height: 75,
+        opacity: 0.5,
+        strokeColor: '#FF0000',
+        fillColor: '#000fff#',
+        author: 'User1'
+    } as CircleSettings);
+});
+{% endhighlight %}
+{% endtabs %}
+
 [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
 
 ## See also

Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/circle-annotation.md

@@ -27,9 +27,7 @@ N> When in pan mode, selecting a measurement annotation switches the viewer to t
 
 ![Measurement toolbar](../../images/calibrate_tool.png)
 
-### Add a distance annotation programmatically
-
-#### Enable distance mode
+### Enable distance mode
 
 The PDF Viewer component allows drawing Distance annotations programmatically after enabling Distance mode in button clicks.
 
@@ -82,7 +80,7 @@ document.getElementById('setNone')?.addEventListener('click', () => {
 {% endhighlight %}
 {% endtabs %}
 
-#### Add distance annotation
+### Add a distance annotation programmatically
 
 Add measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method.
 
@@ -139,7 +137,7 @@ You can select, move, and resize Distance annotations directly in the viewer:
 - Resize: drag the end handles to adjust its length.
 - Delete or access more options from the context menu.
 
-### Edit the properties of area annotations
+#### 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.
 
@@ -249,6 +247,58 @@ pdfviewer.appendTo('#PdfViewer');
 {% endhighlight %}
 {% endtabs %}
 
+## Set properties while adding Individual Annotation
+
+Set properties for individual annotation before creating the control using `DistanceSettings`.
+
+> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+
+Refer to the following code snippet to set the default Distance settings.
+
+```html
+<button id="Distance">Add Distance</button>
+```
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DistanceSettings} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+//Apply Distance Settings while adding individual Annotation
+document.getElementById('Ink')?.addEventListener('click', function () {
+    pdfviewer.annotation.addAnnotation('Distance', {
+        offset: { x: 200, y: 230 },
+        pageNumber: 1,
+        vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }],
+        fillColor: 'blue', opacity: 0.6, strokeColor: 'green'
+    } as DistanceSettings);
+});
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DistanceSettings} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+//Apply Distance Settings while adding individual Annotation
+document.getElementById('Ink')?.addEventListener('click', function () {
+    pdfviewer.annotation.addAnnotation('Distance', {
+        offset: { x: 200, y: 230 },
+        pageNumber: 1,
+        vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }],
+        fillColor: 'blue', opacity: 0.6, strokeColor: 'green'
+    } as DistanceSettings);
+});
+{% endhighlight %}
+{% endtabs %}
+
 ## Scale ratio and units
 
 You can modify scale ratio and units using the Scale Ratio option in the context menu.