Configure Annotation Selector Settings for Better User Interaction

23 Jul 20261 minute to read

Use the [annotationSelectorSettings] (https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationselectorsettings) property to configure the appearance and behavior of annotation selectors. These include selection handles and resizer (for example, handle shape and size), which determine how users interact with annotations during editing.

The example below changes the selector’s resizer handle shape to circular and opens an existing annotation for editing. Setting resizerShape updates the selector appearance to circular handles. Ensure an annotation exists before calling editAnnotation to avoid runtime errors.


 <button id="annotationSelector">annotationSelector</button>

document.getElementById('annotationSelector').addEventListener('click', () => {
  viewer.rectangleSettings.annotationSelectorSettings.resizerShape = 'Circle';
  viewer.annotationModule.editAnnotation(viewer.annotationCollection[0]);
});

Sample: How to customize the annotation selector