Skip to content

Commit c2cfd03

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
996394: Annotation Revamp Distance-Free-Text-Highlight and Ink
1 parent 5dff017 commit c2cfd03

5 files changed

Lines changed: 895 additions & 3 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-images/free-text-annot.png‎

50.8 KB
Loading

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ N> When in pan mode, selecting a measurement annotation switches the viewer to t
3131

3232
#### Enable distance mode
3333

34-
The PDF Viewer library allows drawing Distance annotations programmatically after enabling Distance mode in button clicks.
34+
The PDF Viewer component allows drawing Distance annotations programmatically after enabling Distance mode in button clicks.
3535

3636
```html
3737
<button id="distanceMode">Distance</button>
@@ -188,7 +188,7 @@ pdfviewer.appendTo('#PdfViewer');
188188

189189
document.getElementById('editDistanceAnnotation')?.addEventListener('click', () => {
190190
for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
191-
if (pdfviewer.annotationCollection[i].subject === 'Distance') {
191+
if (pdfviewer.annotationCollection[i].subject === 'Distance calculation') {
192192
pdfviewer.annotationCollection[i].strokeColor = '#0000FF';
193193
pdfviewer.annotationCollection[i].thickness = 2;
194194
pdfviewer.annotationCollection[i].opacity = 0.8;
@@ -209,7 +209,7 @@ pdfviewer.appendTo('#PdfViewer');
209209

210210
document.getElementById('editDistanceAnnotation')?.addEventListener('click', () => {
211211
for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
212-
if (pdfviewer.annotationCollection[i].subject === 'Distance') {
212+
if (pdfviewer.annotationCollection[i].subject === 'Distance calculation') {
213213
pdfviewer.annotationCollection[i].strokeColor = '#0000FF';
214214
pdfviewer.annotationCollection[i].thickness = 2;
215215
pdfviewer.annotationCollection[i].opacity = 0.8;

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

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
---
2+
layout: post
3+
title: Free text annotation in TypeScript PDF Viewer | Syncfusion
4+
description: Learn to add, edit, delete, and customize Free Text annotations in Syncfusion TypeScript PDF Viewer, with UI and programmatic examples.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Free text annotation in TypeScript PDF Viewer
12+
13+
Free Text is a text box annotation used to place formatted text anywhere on the page for notes, labels, or callouts.
14+
15+
![Free text](../annotation-images/free-text-annot.png)
16+
17+
## Add Free Text annotation
18+
19+
### Add Free Text annotation via UI
20+
21+
Use the annotation toolbar:
22+
- Click the **Edit Annotation** button in the PDF Viewer toolbar.
23+
- Click the **Free Text Annotation** button to enable Free Text mode.
24+
- Click on the page to add text.
25+
26+
When in pan mode, selecting Free Text switches the viewer to text select mode.
27+
28+
![Free text tool in the annotation toolbar](../annotation-images/free-text-annot.png)
29+
30+
### Switch to Free Text mode
31+
32+
The PDF Viewer component allows drawing Distance annotations programmatically after enabling Distance mode in button clicks.
33+
34+
```html
35+
<button id="addFreeTextAnnotation">FreeText</button>
36+
```
37+
38+
{% tabs %}
39+
{% highlight ts tabtitle="Standalone" %}
40+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
41+
42+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
43+
44+
let pdfviewer: PdfViewer = new PdfViewer();
45+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
46+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
47+
pdfviewer.appendTo('#PdfViewer');
48+
49+
document.getElementById('addFreeTextAnnotation')?.addEventListener('click', () => {
50+
pdfviewer.annotationModule.setAnnotationMode('FreeText');
51+
});
52+
{% endhighlight %}
53+
{% highlight ts tabtitle="Server-Backed" %}
54+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
55+
56+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
57+
58+
let pdfviewer: PdfViewer = new PdfViewer();
59+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
60+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
61+
pdfviewer.appendTo('#PdfViewer');
62+
63+
document.getElementById('addFreeTextAnnotation')?.addEventListener('click', () => {
64+
pdfviewer.annotationModule.setAnnotationMode('FreeText');
65+
});
66+
{% endhighlight %}
67+
{% endtabs %}
68+
69+
### Add Free Text annotation programmatically
70+
71+
Use [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#annotation) to programmatically create Free Text.
72+
73+
```html
74+
<button id="addFreeTextProgram">Add FreeText Programmatically</button>
75+
```
76+
77+
{% tabs %}
78+
{% highlight ts tabtitle="Standalone" %}
79+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, FreeTextSettings } from '@syncfusion/ej2-pdfviewer';
80+
81+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
82+
83+
let pdfviewer: PdfViewer = new PdfViewer();
84+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
85+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
86+
87+
pdfviewer.appendTo('#PdfViewer');
88+
89+
document.getElementById('addFreeTextProgram')?.addEventListener('click', () => {
90+
pdfviewer.annotation.addAnnotation('FreeText', {
91+
offset: { x: 120, y: 80 },
92+
fontSize: 16,
93+
fontFamily: 'Helvetica',
94+
pageNumber: 1,
95+
width: 200,
96+
height: 40,
97+
isLock: false,
98+
defaultText: 'Syncfusion'
99+
} as FreeTextSettings);
100+
});
101+
{% endhighlight %}
102+
{% highlight ts tabtitle="Server-Backed" %}
103+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, FreeTextSettings } from '@syncfusion/ej2-pdfviewer';
104+
105+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
106+
107+
let pdfviewer: PdfViewer = new PdfViewer();
108+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
109+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
110+
111+
pdfviewer.appendTo('#PdfViewer');
112+
113+
document.getElementById('addFreeTextProgram')?.addEventListener('click', () => {
114+
pdfviewer.annotation.addAnnotation('FreeText', {
115+
offset: { x: 120, y: 80 },
116+
fontSize: 16,
117+
fontFamily: 'Helvetica',
118+
pageNumber: 1,
119+
width: 200,
120+
height: 40,
121+
isLock: false,
122+
defaultText: 'Syncfusion'
123+
} as FreeTextSettings);
124+
});
125+
{% endhighlight %}
126+
{% endtabs %}
127+
128+
## Edit Free Text annotation
129+
130+
### Edit Free Text Annotation in UI
131+
132+
You can select, move, and resize FreeText annotations directly in the viewer:
133+
- Select a Free Text annotation to display its bounding box and resize handles.
134+
- Move: drag the annotation box to reposition it on the page.
135+
- Resize: drag any corner or edge handle to adjust its size.
136+
- Delete: press the Delete key or use the context menu to remove the annotation.
137+
138+
Use the toolbar to change the appearance of the selected Free Text annotation:
139+
- Font Family, Font Size, Font Style (Bold, Italic, Underline)
140+
- Font Color and Text Alignment
141+
- Fill Color (background) and Stroke Color (border)
142+
- Border Thickness and Opacity
143+
144+
See the sections below for screenshots and details.
145+
146+
### Edit the properties of free text annotations
147+
148+
Font family, font size, styles, font color, text alignment, fill color, stroke color, border thickness, and opacity can be edited using the Font Family, Font Size, Font Color, Text Align, Font Style, Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
149+
150+
#### Edit font family
151+
152+
Edit the font family by selecting a font in the Font Family tool.
153+
154+
![Change font family](../../images/fontfamily.png)
155+
156+
#### Edit font size
157+
158+
Edit the font size by selecting a size in the Font Size tool.
159+
160+
![Change font size](../../images/fontsize.png)
161+
162+
#### Edit font color
163+
164+
Edit the font color using the color palette in the Font Color tool.
165+
166+
![Change font color](../../images/fontcolor.png)
167+
168+
#### Edit text alignment
169+
170+
Align text by selecting an option from the Text Align tool.
171+
172+
![Set text alignment](../../images/textalign.png)
173+
174+
#### Edit text styles
175+
176+
Edit text styles by selecting options in the Font Style tool.
177+
178+
![Change text styles](../../images/fontstyle.png)
179+
180+
#### Edit fill color
181+
182+
Edit the fill color using the color palette in the Edit Color tool.
183+
184+
![Change fill color](../../images/fillcolor.png)
185+
186+
#### Edit stroke color
187+
188+
Edit the stroke color using the color palette in the Edit Stroke Color tool.
189+
190+
![Change stroke color](../../images/fontstroke.png)
191+
192+
#### Edit thickness
193+
194+
Edit border thickness using the range slider in the Edit Thickness tool.
195+
196+
![Change border thickness](../../images/fontthickness.png)
197+
198+
#### Edit opacity
199+
200+
Edit opacity using the range slider in the Edit Opacity tool.
201+
202+
![Change opacity](../../images/fontopacity.png)
203+
204+
### Edit Free Text annotation programmatically
205+
206+
Use editAnnotation to update existing Free Text content.
207+
208+
```html
209+
<button id="changeContent">Change Content</button>
210+
```
211+
{% tabs %}
212+
{% highlight ts tabtitle="Standalone" %}
213+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
214+
215+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
216+
217+
let pdfviewer: PdfViewer = new PdfViewer();
218+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
219+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
220+
221+
pdfviewer.appendTo('#PdfViewer');
222+
223+
document.getElementById('changeContent')?.addEventListener('click', () => {
224+
for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
225+
if (pdfviewer.annotationCollection[i].subject === 'Text Box') {
226+
pdfviewer.annotationCollection[i].dynamicText = 'syncfusion';
227+
pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
228+
}
229+
}
230+
});
231+
{% endhighlight %}
232+
{% highlight ts tabtitle="Server-Backed" %}
233+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
234+
235+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
236+
237+
let pdfviewer: PdfViewer = new PdfViewer();
238+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
239+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
240+
241+
pdfviewer.appendTo('#PdfViewer');
242+
243+
document.getElementById('changeContent')?.addEventListener('click', () => {
244+
for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
245+
if (pdfviewer.annotationCollection[i].subject === 'Text Box') {
246+
pdfviewer.annotationCollection[i].dynamicText = 'syncfusion';
247+
pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
248+
}
249+
}
250+
});
251+
{% endhighlight %}
252+
{% endtabs %}
253+
254+
255+
256+
257+
258+
## Default Free Text settings during initialization
259+
260+
Set default Free Text properties before creating the control using freeTextSettings.
261+
262+
{% tabs %}
263+
{% highlight ts tabtitle="Standalone" %}
264+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
265+
266+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
267+
268+
let pdfviewer: PdfViewer = new PdfViewer();
269+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
270+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
271+
pdfviewer.freeTextSettings = { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' };
272+
pdfviewer.appendTo('#PdfViewer');
273+
{% endhighlight %}
274+
{% highlight ts tabtitle="Server-Backed" %}
275+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
276+
277+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
278+
279+
let pdfviewer: PdfViewer = new PdfViewer();
280+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
281+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
282+
pdfviewer.freeTextSettings = { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' };
283+
pdfviewer.appendTo('#PdfViewer');
284+
{% endhighlight %}
285+
{% endtabs %}
286+
287+
[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)

0 commit comments

Comments
 (0)