Skip to content

Commit 9057e36

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1010724: Updated Shape Annotation using Diataxis
1 parent c19a310 commit 9057e36

6 files changed

Lines changed: 1424 additions & 0 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -971,6 +971,11 @@
971971
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/underline-annotation">Underline</a></li>
972972
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/strikethrough-annotation">Strikethrough</a></li>
973973
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/squiggly-annotation">Squiggly</a></li>
974+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/line-annotation">Line</a></li>
975+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/arrow-annotation">Arrow</a></li>
976+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/rectangle-annotation">Rectangle</a></li>
977+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/circle-annotation">Circle</a></li>
978+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/polygon-annotation">Polygon</a></li>
974979
</ul>
975980
</li>
976981
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/text-markup-annotation">Text Markup Annotation</a></li>

‎Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/arrow-annotation.md‎

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
---
2+
layout: post
3+
title: Arrow Annotation (Shape) in React PDF Viewer | Syncfusion
4+
description: Learn how to enable, apply, customize, and manage Arrow annotations in the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Arrow Annotation (Shape) in React PDF Viewer
12+
Arrow annotations let users point, direct attention, or indicate flow on PDFs—useful for callouts, direction markers, and connectors during reviews. You can add arrows from the toolbar, switch to arrow mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.
13+
14+
![Arrow overview](../../../javascript-es6/annotations/annotation-images/arrow-annot.png)
15+
16+
---
17+
18+
## Enable Arrow Annotation in the Viewer
19+
20+
To enable Arrow annotations, inject the following modules into the React PDF Viewer:
21+
22+
- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
23+
- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
24+
25+
{% tabs %}
26+
{% highlight js tabtitle="Standalone" %}
27+
{% raw %}
28+
import * as React from 'react';
29+
import * as ReactDOM from 'react-dom/client';
30+
import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
31+
32+
function App() {
33+
return (
34+
<PdfViewerComponent
35+
id="container"
36+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
37+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
38+
style={{ height: '650px' }}
39+
>
40+
<Inject services={[Toolbar, Annotation]} />
41+
</PdfViewerComponent>
42+
);
43+
}
44+
45+
ReactDOM.createRoot(document.getElementById('sample')).render(<App />);
46+
{% endraw %}
47+
{% endhighlight %}
48+
{% endtabs %}
49+
50+
---
51+
52+
## Apply Arrow Annotation
53+
54+
### Apply Arrow Annotation Using the Toolbar
55+
1. Open the **Annotation Toolbar**.
56+
2. Select **Shapes** → **Arrow**.
57+
3. Click and drag on the PDF page to draw the arrow.
58+
59+
![Shape toolbar](../../images/shape_toolbar.png)
60+
61+
N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
62+
63+
---
64+
65+
### Enable Arrow Mode
66+
Switch the viewer into highlight mode using `setAnnotationMode('Arrow')`.
67+
68+
{% tabs %}
69+
{% highlight js tabtitle="Standalone" %}
70+
{% raw %}
71+
function enableArrowMode() {
72+
const viewer = document.getElementById('container').ej2_instances[0];
73+
viewer.annotation.setAnnotationMode('Arrow');
74+
}
75+
{% endraw %}
76+
{% endhighlight %}
77+
{% endtabs %}
78+
79+
#### Exit Arrow Mode
80+
{% tabs %}
81+
{% highlight js tabtitle="Standalone" %}
82+
{% raw %}
83+
function exitArrowMode() {
84+
const viewer = document.getElementById('container').ej2_instances[0];
85+
viewer.annotation.setAnnotationMode('None');
86+
}
87+
{% endraw %}
88+
{% endhighlight %}
89+
{% endtabs %}
90+
91+
---
92+
93+
### Add Arrow Programmatically
94+
Use the [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) API to draw an arrow at a specific location (defined by two **vertexPoints**).
95+
96+
{% tabs %}
97+
{% highlight js tabtitle="Standalone" %}
98+
{% raw %}
99+
function addArrow() {
100+
const viewer = document.getElementById('container').ej2_instances[0];
101+
viewer.annotation.addAnnotation('Arrow', {
102+
offset: { x: 200, y: 370 },
103+
pageNumber: 1,
104+
vertexPoints: [
105+
{ x: 200, y: 370 },
106+
{ x: 350, y: 370 }
107+
]
108+
});
109+
}
110+
{% endraw %}
111+
{% endhighlight %}
112+
{% endtabs %}
113+
114+
---
115+
116+
## Customize Arrow Appearance
117+
Configure default arrow appearance (fill color, stroke color, thickness, opacity) using the [`arrowSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#arrowsettings) property.
118+
119+
{% tabs %}
120+
{% highlight js tabtitle="Standalone" %}
121+
{% raw %}
122+
<PdfViewerComponent
123+
id="container"
124+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
125+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
126+
arrowSettings={{ fillColor: '#ffff00', strokeColor: '#0066ff', thickness: 2, opacity: 0.9 }}
127+
style={{ height: '650px' }}
128+
>
129+
<Inject services={[Toolbar, Annotation]} />
130+
</PdfViewerComponent>
131+
{% endraw %}
132+
{% endhighlight %}
133+
{% endtabs %}
134+
135+
N> For **Line** and **Arrow** annotations, **Fill Color** is available only when an arrowhead style is applied at the **Start** or **End**. If both are `None`, lines do not render fill and the Fill option remains disabled.
136+
137+
---
138+
139+
## Manage Arrow (Edit, Move, Resize, Delete)
140+
### Edit Arrow
141+
142+
#### Edit Arrow (UI)
143+
- Select a Arrow to view resize handles.
144+
- Drag endpoints to adjust length/angle.
145+
- Edit stroke color, opacity, and thickness using the annotation toolbar.
146+
147+
![Shape tools](../../images/shape_toolbar.png)
148+
149+
Use the annotation toolbar:
150+
- **Edit Color** tool
151+
![Edit color](../../../javascript-es6/images/edit_color.png)
152+
153+
- **Edit Opacity** slider
154+
![Edit opacity](../../../javascript-es6/images/edit_opacity.png)
155+
156+
- **Line Properties**
157+
Open the Line Properties dialog via **Right Click → Properties**.
158+
159+
![Line properties dialog](../../../javascript-es6/images/shape_lineprty.png)
160+
161+
#### Edit Arrow Programmatically
162+
163+
Modify an existing Arrow programmatically using `editAnnotation()`.
164+
165+
{% tabs %}
166+
{% highlight js tabtitle="Standalone" %}
167+
{% raw %}
168+
function editArrowProgrammatically() {
169+
const viewer = document.getElementById('container').ej2_instances[0];
170+
for (const annot of viewer.annotationCollection) {
171+
if (annot.subject === 'Arrow') {
172+
annot.strokeColor = '#0000ff';
173+
annot.thickness = 2;
174+
annot.fillColor = '#ffff00';
175+
viewer.annotation.editAnnotation(annot);
176+
break;
177+
}
178+
}
179+
}
180+
{% endraw %}
181+
{% endhighlight %}
182+
{% endtabs %}
183+
184+
---
185+
186+
### Delete Arrow
187+
188+
The PDF Viewer supports deleting existing annotations through the UI and API.
189+
See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
190+
191+
---
192+
193+
### Comments
194+
195+
Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to arrow annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
196+
197+
---
198+
199+
## Set properties while adding Individual Annotation
200+
201+
Set properties for individual arrow annotations by passing values directly during [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
202+
203+
{% tabs %}
204+
{% highlight js tabtitle="Standalone" %}
205+
{% raw %}
206+
function addMultipleArrows() {
207+
const viewer = document.getElementById('container').ej2_instances[0];
208+
209+
// Arrow 1
210+
viewer.annotation.addAnnotation('Arrow', {
211+
offset: { x: 200, y: 230 },
212+
pageNumber: 1,
213+
vertexPoints: [
214+
{ x: 200, y: 230 },
215+
{ x: 350, y: 230 }
216+
],
217+
fillColor: '#ffff00',
218+
strokeColor: '#0066ff',
219+
thickness: 2,
220+
opacity: 0.9,
221+
author: 'User 1'
222+
});
223+
224+
// Arrow 2
225+
viewer.annotation.addAnnotation('Arrow', {
226+
offset: { x: 220, y: 300 },
227+
pageNumber: 1,
228+
vertexPoints: [
229+
{ x: 220, y: 300 },
230+
{ x: 400, y: 300 }
231+
],
232+
fillColor: '#ffef00',
233+
strokeColor: '#ff1010',
234+
thickness: 3,
235+
opacity: 0.9,
236+
author: 'User 2'
237+
});
238+
}
239+
{% endraw %}
240+
{% endhighlight %}
241+
{% endtabs %}
242+
243+
---
244+
245+
## Disable Arrow Annotation
246+
247+
Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
248+
249+
{% tabs %}
250+
{% highlight js tabtitle="Standalone" %}
251+
{% raw %}
252+
<PdfViewerComponent
253+
id="container"
254+
enableShapeAnnotation={false}
255+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
256+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
257+
style={{ height: '650px' }}
258+
>
259+
<Inject services={[Toolbar, Annotation]} />
260+
</PdfViewerComponent>
261+
{% endraw %}
262+
{% endhighlight %}
263+
{% endtabs %}
264+
265+
---
266+
267+
## Handle Arrow Events
268+
269+
The PDF viewer provides annotation life-cycle events that notify when Arrow annotations are added, modified, selected, or removed.
270+
For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
271+
272+
---
273+
274+
## Export and Import
275+
The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
276+
277+
---
278+
279+
## See Also
280+
- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
281+
- [Customize Context Menu](../../context-menu/custom-context-menu)
282+
- [Comments Panel](../comments)
283+
- [Annotation Events](../annotation-event)
284+
- [Export and Import annotations](../export-import-annotations)
285+
- [Delete Annotations](../remove-annotations)

0 commit comments

Comments
 (0)