How to detect if we draw annotation on another annotation or overlapping a annotation

Technical Support
,
1

Product: WebViewer

Product Version: ^12.0.0

I am creating annotation using below code. berfore drawing i want to check if this annotation is overlapping on any other annotation or not.

createStamp(stamData:any){

const { Annotations, annotationManager, documentViewer } = this.viewerInstance.Core;    

// 🔹 create a rectangle annotation

const freeText = new Annotations.FreeTextAnnotation();

 // Set a custom ID for the annotation

 freeText.Id = stamData.TaskID; // <-- Add this line

 

freeText.PageNumber = 1;

freeText.X = stamData.X;

 freeText.Y = stamData.Y;

 freeText.Width = stamData.Width;

 freeText.Height = stamData.Height;

 freeText.setContents(stamData.TaskName);

 freeText.TextAlign = 'center';        

  freeText.TextVerticalAlign = 'center';

  let color = this.argbIntToRgba(stamData.TaskColor)

 freeText.TextColor = new Annotations.Color(color.r, color.g, color.b);

 freeText.FontSize = '32pt';

 freeText.StrokeColor = new Annotations.Color(color.r, color.g, color.b);

 freeText.FillColor = new Annotations.Color(color.r, color.g, color.b, 0.2);

 freeText.ReadOnly = true;

 freeText.Locked = true; 

 freeText.NoDelete = true; 

 freeText.ReplyType = true; 

 // Adding metadata (non-visible)

//  freeText.setCustomData('userInfo', "w4234234");

 // Add the annotation to the annotation manager

 this.stampCreated = true;

 annotationManager.addAnnotation(freeText);

 // Redraw annotation to make sure it appears

 annotationManager.redrawAnnotation(freeText);

 setTimeout(() => {

  this.stampCreated = false;

}, 0);

}

1 Like
3

Hi Stlokesh,

You could use the event listener “annotationChanged”:

annotationManager.addEventListener('annotationChanged', (annotations, action) => {
    if (action === 'add') {
        // Annotations have been added
        annotations.forEach(annotation => {
            console.log('Added annotation:', annotation);
        });
    }
});

Once you are in the added annotation, you can retrieve its coordinates and compare them to all of the annotations on the page to see if there is an intersection:

// Get all annotations on the same page
const existingAnnots = annotationManager.getAnnotationsList().filter(
  annot => annot.PageNumber === 1 && !(annot instanceof Annotations.WidgetAnnotation)
);

Let us know if you have any questions.

Best Regards,
Mickaël.

1 Like