Skip to content

Commit 13a6f1b

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1002609: Annotations Review and Corrections JS ES5
1 parent fd0053b commit 13a6f1b

27 files changed

Lines changed: 1746 additions & 495 deletions

‎Document-Processing-toc.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1246,9 +1246,11 @@
12461246
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/annotation-types/volume-annotation">Volume Annotation</a></li>
12471247
</ul>
12481248
</li>
1249+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/toolbar-customization/annotation-toolbar">Annotation Toolbar</a></li>
12491250
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/create-modify-annotation">Create and modify Annotation</a></li>
12501251
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/customize-annotation">Customize Annotation</a></li>
12511252
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/delete-annotation">Remove Annotation</a></li>
1253+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/annotations-undo-redo">Undo or Redo Annotation Changes</a></li>
12521254
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/annotation-permission">Annotation Permission</a></li>
12531255
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/signature-annotation">Handwritten Signature</a></li>
12541256
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/line-angle-constraints">Line Angle Constraint</a></li>

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

Lines changed: 61 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,20 @@ You can add squiggly annotations in two ways:
2424
* Select text in the PDF document and right-click it.
2525
* Choose **Squiggly** in the context menu.
2626

27-
![Squiggly context](../../images/squiggly_context.png)
27+
![Squiggly context](../../../javascript-es6/annotations/annotation-images/squiggle-context.gif)
2828

2929
2. Using the annotation toolbar
3030
* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
3131
* Select **Squiggly** to enable squiggly mode.
3232
* Select text to add the squiggly annotation.
3333
* Alternatively, select text first and then click **Squiggly**.
3434

35-
![Squiggly toolbar](../../images/squiggly_button.png)
35+
![Squiggly toolbar](../../../javascript-es6/annotations/annotation-images/squiggle-tool.gif)
3636

3737
N> When in pan mode, selecting a text markup annotation switches the PDF Viewer to text select mode.
3838

39+
### Enable Squiggly Mode
40+
3941
Enable/exit squiggly mode using the following code:
4042

4143
```html
@@ -189,19 +191,19 @@ Delete the selected annotation in the following ways:
189191
* Select the annotation.
190192
* Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed.
191193

192-
![Delete button](../../images/delete_button.png)
194+
![Delete button](../../../javascript-es6/images/delete_button.png)
193195

194196
#### Edit squiggly annotation properties in UI
195197

196198
The color and opacity of the squiggly annotation can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar.
197199

198200
- Edit color: Use the color palette in the Edit Color tool to change the annotation color.
199201

200-
![Edit color](../../images/edit_color.png)
202+
![Edit color](../../../javascript-es6/images/edit_color.png)
201203

202204
- Edit opacity: Use the range slider in the Edit Opacity tool to change annotation opacity.
203205

204-
![Edit opacity](../../images/edit_opacity.png)
206+
![Edit opacity](../../../javascript-es6/images/edit_opacity.png)
205207

206208
### Edit a squiggly annotation programmatically
207209

@@ -328,81 +330,97 @@ pdfviewer.appendTo('#PdfViewer');
328330
{% endhighlight %}
329331
{% endtabs %}
330332

331-
## Perform undo and redo
332-
333-
The PDF Viewer supports undo and redo for squiggly annotations:
333+
## Set properties while adding Individual Annotation
334334

335-
* Adding squiggly annotations
336-
* Deleting squiggly annotations
337-
* Changing color or opacity
335+
Set properties for individual annotation before creating the control using `SquigglySettings`.
338336

339-
Undo and redo actions can be performed in the following ways:
337+
> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
340338
341-
1. Using keyboard shortcuts:
342-
After a squiggly annotation action, press Ctrl+Z to undo and Ctrl+Y to redo.
343-
2. Using the toolbar:
344-
Use the **Undo** and **Redo** tools in the toolbar.
339+
Refer to the following code snippet to set the default highlight settings.
345340

341+
```html
342+
<button id="squiggly">Add Squiggly</button>
343+
```
346344
{% tabs %}
347345
{% highlight js tabtitle="Standalone" %}
348-
var PdfViewer = ej.pdfviewer.PdfViewer;
349-
PdfViewer.Inject(
346+
ej.pdfviewer.PdfViewer.Inject(
350347
ej.pdfviewer.Toolbar,
351348
ej.pdfviewer.Magnification,
352349
ej.pdfviewer.Navigation,
350+
ej.pdfviewer.Annotation,
353351
ej.pdfviewer.LinkAnnotation,
354352
ej.pdfviewer.ThumbnailView,
355353
ej.pdfviewer.BookmarkView,
356354
ej.pdfviewer.TextSelection,
357-
ej.pdfviewer.Annotation,
355+
ej.pdfviewer.TextSearch,
356+
ej.pdfviewer.FormFields,
358357
ej.pdfviewer.FormDesigner,
359-
ej.pdfviewer.FormFields
358+
ej.pdfviewer.PageOrganizer
360359
);
361360

362-
var pdfviewer = new PdfViewer({
363-
documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
364-
resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
365-
});
361+
var pdfviewer = new ej.pdfviewer.PdfViewer();
362+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
363+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
366364
pdfviewer.appendTo('#PdfViewer');
367365

368-
document.getElementById('undo').addEventListener('click', function () {
369-
pdfviewer.undo();
370-
});
366+
//Apply Squiggly Settings while adding individual Annotation
367+
document.getElementById('squiggly')?.addEventListener('click', function () {
368+
pdfviewer.annotation.addAnnotation('Squiggly', {
369+
bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
370+
pageNumber: 1,
371+
author: 'User 1',
372+
color: '#ffff00',
373+
opacity: 0.9
374+
});
371375

372-
document.getElementById('redo').addEventListener('click', function () {
373-
pdfviewer.redo();
376+
pdfviewer.annotation.addAnnotation('Squiggly', {
377+
bounds: [{ x: 107, y: 220, width: 350, height: 14 }],
378+
pageNumber: 1,
379+
author: 'User 2',
380+
color: '#ff1010ff',
381+
opacity: 0.9
382+
});
374383
});
375384
{% endhighlight %}
376385
{% highlight js tabtitle="Server-Backed" %}
377-
var PdfViewer = ej.pdfviewer.PdfViewer;
378-
PdfViewer.Inject(
386+
ej.pdfviewer.PdfViewer.Inject(
379387
ej.pdfviewer.Toolbar,
380388
ej.pdfviewer.Magnification,
381389
ej.pdfviewer.Navigation,
390+
ej.pdfviewer.Annotation,
382391
ej.pdfviewer.LinkAnnotation,
383392
ej.pdfviewer.ThumbnailView,
384393
ej.pdfviewer.BookmarkView,
385394
ej.pdfviewer.TextSelection,
386-
ej.pdfviewer.Annotation,
395+
ej.pdfviewer.TextSearch,
396+
ej.pdfviewer.FormFields,
387397
ej.pdfviewer.FormDesigner,
388-
ej.pdfviewer.FormFields
398+
ej.pdfviewer.PageOrganizer
389399
);
390400

391-
var pdfviewer = new PdfViewer({
392-
documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
393-
});
401+
var pdfviewer = new ej.pdfviewer.PdfViewer();
402+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
394403
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
395404
pdfviewer.appendTo('#PdfViewer');
396405

397-
document.getElementById('undo').addEventListener('click', function () {
398-
pdfviewer.undo();
399-
});
406+
//Apply Squiggly Settings while adding individual Annotation
407+
document.getElementById('squiggly')?.addEventListener('click', function () {
408+
pdfviewer.annotation.addAnnotation('Squiggly', {
409+
bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
410+
pageNumber: 1,
411+
author: 'User 1',
412+
color: '#ffff00',
413+
opacity: 0.9
414+
});
400415

401-
document.getElementById('redo').addEventListener('click', function () {
402-
pdfviewer.redo();
416+
pdfviewer.annotation.addAnnotation('Squiggly', {
417+
bounds: [{ x: 107, y: 220, width: 350, height: 14 }],
418+
pageNumber: 1,
419+
author: 'User 2',
420+
color: '#ff1010ff',
421+
opacity: 0.9
422+
});
403423
});
404-
{% endhighlight %}
405-
{% endtabs %}
406424

407425
## Disable squiggly annotation
408426

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

Lines changed: 85 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@ N> When in pan mode, selecting a measurement annotation switches the viewer to t
2727

2828
![Measurement toolbar](../../images/calibrate_tool.png)
2929

30-
### Add an area annotation programmatically
31-
32-
#### Enable area mode
30+
### Enable area mode
3331

3432
The PDF Viewer library allows drawing measurement annotations programmatically after enabling area mode in button clicks.
3533

@@ -89,7 +87,7 @@ document.getElementById('areaMode').addEventListener('click', function () {
8987
{% endhighlight %}
9088
{% endtabs %}
9189

92-
#### Add Area Annotation
90+
### Add an area annotation programmatically
9391

9492
The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) method.
9593

@@ -178,7 +176,7 @@ Use the toolbar to change appearance:
178176

179177
See the sections below for screenshots and details.
180178

181-
### Edit the properties of area annotations
179+
#### Edit the properties of area annotations
182180

183181
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.
184182

@@ -348,6 +346,88 @@ pdfviewer.appendTo('#PdfViewer');
348346
{% endhighlight %}
349347
{% endtabs %}
350348

349+
## Set properties while adding Individual Annotation
350+
351+
Set properties for individual annotation before creating the control using `AreaSettings`.
352+
353+
> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
354+
355+
Refer to the following code snippet to set the default Area settings.
356+
357+
```html
358+
<button id="Area">Add Area</button>
359+
```
360+
{% tabs %}
361+
{% highlight js tabtitle="Standalone" %}
362+
ej.pdfviewer.PdfViewer.Inject(
363+
ej.pdfviewer.Toolbar,
364+
ej.pdfviewer.Magnification,
365+
ej.pdfviewer.Navigation,
366+
ej.pdfviewer.Annotation,
367+
ej.pdfviewer.LinkAnnotation,
368+
ej.pdfviewer.ThumbnailView,
369+
ej.pdfviewer.BookmarkView,
370+
ej.pdfviewer.TextSelection,
371+
ej.pdfviewer.TextSearch,
372+
ej.pdfviewer.FormFields,
373+
ej.pdfviewer.FormDesigner,
374+
ej.pdfviewer.PageOrganizer
375+
);
376+
377+
var pdfviewer = new ej.pdfviewer.PdfViewer();
378+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
379+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
380+
pdfviewer.appendTo('#PdfViewer');
381+
// Apply Area settings while adding individual annotation
382+
document.getElementById('Area')?.addEventListener('click', function () {
383+
pdfviewer.annotation.addAnnotation('Area', {
384+
offset: { x: 200, y: 500 },
385+
pageNumber: 1,
386+
vertexPoints: [
387+
{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }
388+
],
389+
fillColor: 'yellow',
390+
opacity: 0.6,
391+
strokeColor: 'orange'
392+
});
393+
});
394+
{% endhighlight %}
395+
{% highlight js tabtitle="Server-Backed" %}
396+
ej.pdfviewer.PdfViewer.Inject(
397+
ej.pdfviewer.Toolbar,
398+
ej.pdfviewer.Magnification,
399+
ej.pdfviewer.Navigation,
400+
ej.pdfviewer.Annotation,
401+
ej.pdfviewer.LinkAnnotation,
402+
ej.pdfviewer.ThumbnailView,
403+
ej.pdfviewer.BookmarkView,
404+
ej.pdfviewer.TextSelection,
405+
ej.pdfviewer.TextSearch,
406+
ej.pdfviewer.FormFields,
407+
ej.pdfviewer.FormDesigner,
408+
ej.pdfviewer.PageOrganizer
409+
);
410+
411+
var pdfviewer = new ej.pdfviewer.PdfViewer();
412+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
413+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
414+
pdfviewer.appendTo('#PdfViewer');
415+
// Apply Area settings while adding individual annotation
416+
document.getElementById('Area')?.addEventListener('click', function () {
417+
pdfviewer.annotation.addAnnotation('Area', {
418+
offset: { x: 200, y: 500 },
419+
pageNumber: 1,
420+
vertexPoints: [
421+
{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }
422+
],
423+
fillColor: 'yellow',
424+
opacity: 0.6,
425+
strokeColor: 'orange'
426+
});
427+
});
428+
{% endhighlight %}
429+
{% endtabs %}
430+
351431
## Editing scale ratio and unit of the area measurement annotation
352432

353433
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.

0 commit comments

Comments
 (0)