1009405: UG Revamp in JS II

Author: SF4524LogeshKumar

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md

@@ -7,9 +7,9 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Annotations Events in JavaScript Pdf viewer control
+# Annotation events in JavaScript PDF Viewer
 
-The PDF Viewer component triggers various events based on user interactions and changes in the component's state. These events can be used to perform actions when a specific event occurs. This section describes the events available in the PDF Viewer component.
+This page documents annotation-related events for the JavaScript PDF Viewer and when to use them. The PDF Viewer triggers events for user interactions and component state changes; use these events to run handlers that respond to specific occurrences. The sections below list each event, the associated event-args type, and an example handler.
 
 | Event                                                              | Description                                                                        |
 | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------- |

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-permission.md

@@ -10,13 +10,15 @@ domainurl: ##DomainURL##
 
 # Annotation permissions in JavaScript PDF Viewer
 
-Use [annotationSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#annotationsettings) to control creation-time permissions and behavior of annotations in the PDF Viewer.
+Use [annotationSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#annotationsettings) to control creation-time permissions and default behavior for annotations in the PDF Viewer. These settings establish defaults for annotations created through the UI and programmatic flows.
 
 ## Common permissions
 
-- isLock: Locks the annotation so it cannot be moved, resized, edited, or deleted.
-- skipPrint: Excludes annotations from the print output when the document is printed from the viewer.
-- skipDownload: Excludes annotations from the exported/downloaded document.
+- `isLock`: Lock an annotation so it cannot be moved, resized, edited, or deleted.
+- `skipPrint`: Exclude annotations from the print output when printing from the viewer.
+- `skipDownload`: Exclude annotations from the exported/downloaded PDF.
+
+Example: inject modules and create a viewer instance with default `annotationSettings`.
 
 ```js
 // Ensure you have included the required EJ2 PDF Viewer scripts and styles via CDN before this script
@@ -61,8 +63,10 @@ viewer.appendTo('#pdfViewer');
 
 ## Individual permissions
 
-- isPrint: Controls whether a specific annotation participates in printing. Set to false to prevent just that annotation from printing.
-- isLock: You can also lock/unlock a specific annotation instance programmatically.
+- `isPrint`: Controls whether a specific annotation participates in printing. Set to `false` to exclude only that annotation from print output.
+- `isLock`: Lock or unlock a specific annotation instance programmatically.
+
+Example: create a viewer instance with per-annotation defaults for text markup, shapes, and measurements.
 
 ```js
 // Ensure you have included the required EJ2 PDF Viewer scripts and styles via CDN before this script

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/Squiggly-annotation.md

@@ -27,18 +27,18 @@ You can add squiggly annotations in two ways:
 ![Squiggly context](../../../javascript-es6/annotations/annotation-images/squiggle-context.gif)
 
 2. Using the annotation toolbar
-* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
-* Select **Squiggly** to enable squiggly mode.
-* Select text to add the squiggly annotation.
-* Alternatively, select text first and then click **Squiggly**.
+- Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
+- Select **Squiggly** to enable squiggly mode.
+- Select text to add a squiggly annotation.
+- Alternatively, select text first and then click **Squiggly**.
 
 ![Squiggly toolbar](../../../javascript-es6/annotations/annotation-images/squiggle-tool.gif)
 
 N> When in pan mode, selecting a text markup annotation switches the PDF Viewer to text select mode.
 
-### Enable Squiggly Mode 
+### Enable squiggly mode 
 
-Enable/exit squiggly mode using the following code:
+Enable or exit squiggly mode using the following code:
 
 ```html
 <button id="squigglyMode">Squiggly</button>
@@ -107,7 +107,7 @@ document.getElementById('setNone').addEventListener('click', function () {
 {% endhighlight %}
 {% endtabs %}
 
-### Add squiggly annotation programmatically
+### Add squiggly annotations programmatically
 
 Add squiggly annotations programmatically using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method.
 
@@ -175,11 +175,11 @@ document.getElementById('addSquiggly').addEventListener('click', function () {
 {% endhighlight %}
 {% endtabs %}
 
-## Edit Squiggly Annotation
+## Edit Squiggly Annotations
 
-### Edit squiggly annotation in UI
+### Edit squiggly annotations in UI
 
-You can select and delete squiggly annotations directly in the viewer. Use the context menu or toolbar options as needed.
+Use the viewer to select and delete squiggly annotations. Use the context menu or toolbar options as needed.
 
 Delete the selected annotation in the following ways:
 
@@ -195,7 +195,7 @@ Delete the selected annotation in the following ways:
 
 #### Edit squiggly annotation properties in UI
 
-The color and opacity of the squiggly annotation can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar.
+The color and opacity of squiggly annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar.
 
 - Edit color: Use the color palette in the Edit Color tool to change the annotation color.
 
@@ -286,7 +286,7 @@ document.getElementById('editSquiggly').addEventListener('click', function () {
 
 Set default properties before creating the control using `squigglySettings`.
 
-> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
@@ -332,11 +332,11 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotation before creating the control using `SquigglySettings`.
+Set properties for individual annotations before creating the control using `SquigglySettings`.
 
-> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+N> 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 highlight settings.
+Refer to the following code snippet to set the default squiggly settings.
 
 ```html
 <button id="squiggly">Add Squiggly</button>

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

@@ -18,7 +18,7 @@ Area is a measurement annotation used to measure the surface of a closed region
 
 ### Add area annotation via UI
 
-Use the annotation toolbar:
+- Use the annotation toolbar to:
 - Click the **Edit Annotation** button in the PDF Viewer toolbar.
 - Click the **Measurement Annotation** dropdown.
 - Choose **Area**, then draw the region on the page.
@@ -348,9 +348,9 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotation before creating the control using `AreaSettings`.
+Set properties for individual annotations 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.
+N> 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.
 
@@ -434,7 +434,7 @@ The scale ratio and unit of measurement can be modified using the scale ratio op
 
   ![CalibrateScaleRatio](../../images/calibrate_scaleratio.png)
 
-The Units of measurements support for the measurement annotations in the PDF Viewer are
+Supported units for measurement annotations are
 
 * Inch
 * Millimeter

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

@@ -18,9 +18,9 @@ Arrow is a shape annotation used to point, direct attention, or indicate flow. C
 
 ### Add arrow annotation via UI
 
-Use the annotation toolbar:
+Use the annotation toolbar to:
 - Click the **Edit Annotation** button in the PDF Viewer toolbar.
-- Open the **Shape Annotation**** dropdown.
+- Open the **Shape Annotation** dropdown.
 - Choose **Arrow**, then draw on the page.
 
 N> When in pan mode, selecting a shape annotation switches the viewer to text select mode.
@@ -335,9 +335,9 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotation before creating the control using `ArrowSettings`.
+Set properties for individual annotations 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.
+N> 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.
 

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

@@ -18,7 +18,7 @@ Circle is a shape annotation used to highlight circular regions or draw emphasis
 
 ### Add circle annotation via UI
 
-Use the annotation toolbar:
+Use the annotation toolbar to:
 - Click the **Edit Annotation** button in the PDF Viewer toolbar.
 - Open the **Shape Annotation** dropdown.
 - Choose **Circle**, then draw on the page.
@@ -29,7 +29,7 @@ N> When in pan mode, selecting a shape annotation switches the viewer to text se
 
 ### Enable circle mode
 
-The PDF Viewer library allows drawing Circle annotations programmatically after enabling Circle mode in button clicks.
+The PDF Viewer library allows drawing circle annotations programmatically after enabling circle mode via button clicks.
 
 ```html
 <button id="circleMode">Circle</button>
@@ -350,9 +350,9 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotation before creating the control using `CircleSettings`.
+Set properties for individual annotations 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.
+N> 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.
 

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/distance-annotation.md

@@ -18,7 +18,7 @@ Distance is a measurement annotation used to measure the length between two poin
 
 ### Add distance annotation via UI
 
-Use the annotation toolbar:
+Use the annotation toolbar to:
 - Click the **Edit Annotation** button in the PDF Viewer toolbar.
 - Open the **Measurement Annotation** dropdown.
 - Choose **Distance**, then draw on the page.
@@ -29,7 +29,7 @@ N> When in pan mode, selecting a measurement annotation switches the viewer to t
 
 ### Enable distance mode
 
-The PDF Viewer component allows drawing Distance annotations programmatically after enabling Distance mode in button clicks.
+The PDF Viewer component allows drawing distance annotations programmatically after enabling distance mode via button clicks.
 
 ```html
 <button id="distanceMode">Distance</button>
@@ -181,7 +181,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 distance 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.
 
@@ -337,9 +337,9 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotation before creating the control using `DistanceSettings`.
+Set properties for individual annotations 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.
+N> 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.
 

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/free-text-annotation.md

@@ -18,18 +18,18 @@ Free Text is a text box annotation used to place formatted text anywhere on the
 
 ### Add Free Text annotation via UI
 
-Use the annotation toolbar:
+Use the annotation toolbar to:
 - Click the **Edit Annotation** button in the PDF Viewer toolbar.
 - Click the **Free Text Annotation** button to enable Free Text mode.
 - Click on the page to add text.
 
-When in pan mode, selecting Free Text switches the viewer to text select mode.
+N> When in pan mode, selecting Free Text switches the viewer to text select mode.
 
 ![Free text tool in the annotation toolbar](../annotation-images/free-text-annot.png)
 
 ### Switch to Free Text mode
 
-The PDF Viewer component allows drawing Distance annotations programmatically after enabling Distance mode in button clicks.
+The PDF Viewer component allows drawing free text annotations programmatically after enabling Free Text mode via button clicks.
 
 ```html
 <button id="addFreeTextAnnotation">FreeText</button>
@@ -374,9 +374,9 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotation before creating the control using `FreeTextSettings`.
+Set properties for individual annotations before creating the control using `FreeTextSettings`.
 
-> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+N> 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 FreeText settings.
 

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/highlight-annotation.md

@@ -18,7 +18,7 @@ The PDF Viewer provides options to add, edit, and delete Highlight annotations o
 
 ### Add highlight annotation via UI
 
-You can add highlights in two ways:
+Add highlights in two ways:
 
 1. Using the context menu
 - Select text in the PDF document and right-click it.
@@ -27,17 +27,18 @@ You can add highlights in two ways:
 ![Alt text](../../../javascript-es6/annotations/annotation-images/highlight-context.gif)
 
 2. Using the annotation toolbar
+Use the annotation toolbar to:
 - Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
 - Select **Highlight** to enable highlight mode.
-- Select text to add the highlight annotation. Alternatively, select text first and then click **Highlight**.
+- Select text to add the highlight annotation, or select text first and then click **Highlight**.
 
 ![Alt text](../../../javascript-es6/annotations/annotation-images/highlight-tool.gif)
 
 N> When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection.
 
 ### Switch to Highlight Mode
 
-The PDF Viewer component allows add highlight annotations programmatically after enabling Highlight mode in button clicks.
+The PDF Viewer component allows adding highlight annotations programmatically after enabling Highlight mode via button clicks.
 
 ```html
     <!--Element to set text markup annotation mode-->
@@ -187,7 +188,7 @@ document.getElementById('highlight').addEventListener('click', function () {
 
 ### Edit highlight annotation in UI
 
-You can select a highlight to change its appearance or remove it:
+Select a highlight to change its appearance or remove it:
 - Change appearance using the annotation toolbar: Edit Color and Edit Opacity.
 - Delete using Delete/Backspace keys or the Delete Annotation button in the annotation toolbar.
 
@@ -288,7 +289,7 @@ document.getElementById('editHighlight').addEventListener('click', function () {
 
 Set default properties before creating the control using `highlightSettings`.
 
-> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+N> 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 highlight settings.
 
@@ -335,9 +336,9 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotation before creating the control using `highlightSettings`.
+Set properties for individual annotations before creating the control using `highlightSettings`.
 
-> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+N> 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 highlight settings.
 

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/ink-annotation.md

@@ -18,16 +18,16 @@ Ink is a freehand drawing annotation used to sketch, sign, or mark up content.
 
 ### Add ink annotation via UI
 
-Use the annotation toolbar:
-- Click the Edit Annotation button in the PDF Viewer toolbar.
-- Click the Draw Ink button to enable ink mode.
+Use the annotation toolbar to:
+- Click the **Edit Annotation** button in the PDF Viewer toolbar.
+- Click the **Draw Ink** button to enable ink mode.
 - Draw on any page of the PDF document.
 
 ![Ink tool in the annotation toolbar](../../images/ink_tool.png)
 
 ### Enable ink mode
 
-The PDF Viewer component allows add ink annotations programmatically after enabling ink mode in button clicks.
+The PDF Viewer component allows adding ink annotations programmatically after enabling ink mode via button clicks.
 
 ```html
 <button id="addInkAnnotation">Ink Annotation</button>
@@ -157,7 +157,7 @@ document.getElementById('addInkAnnotationProgram').addEventListener('click', fun
 
 ### Edit ink annotation in UI
 
-You can select, move, and resize Ink annotations directly in the viewer:
+Select, move, and resize ink annotations directly in the viewer:
 - Select an Ink annotation to show its handles.
 - Move: drag inside the stroke to reposition it on the page.
 - Resize: drag the selector handles to adjust its bounds.
@@ -323,9 +323,9 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotation before creating the control using `InkSettings`.
+Set properties for individual annotations before creating the control using `InkSettings`.
 
-> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+N> 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 Ink settings.