Double rectangle annotations are being created if I convert text highlight into rectangle annotation

Technical Support
1

PDF.js Express Version
8.1.0

Detailed description of issue
Hey Logan,
I am facing this bug when I migrated to pdfjs version 8.1.0. So when I convert my text highlight into a rectangle annotation by clicking on it, a copy of the annotation is being created when I focus out of it.
Basically, I am deleting my highlight annotation and adding a rect annotation over it. When I try to manipulate the coordinates of the rect annotation I can see two boxes being formed over it. Let me know if you are able to replicate this on your end. I am attaching some code snippets for your reference.
Expected behaviour
When I click on my text highlight it should just add a new rectangle annotation over it and delete the text highlight.

Does your issue happen with every document, or just one?
Every time in the new pdfjs version
Link to document
{Provide a link to the document in question if possible}

Code snippet

 annotManager.on("annotationSelected", (annots) => {
        this.annotSelected == true;
        if (!this.is_hiddencard) {
          if (this.activeState != 'active') {
            if (!annots) return;

            annots.forEach((annot) => {
              // check that our custom 'IsCustomSearch' property is set
              if (
                annot instanceof Annotations.TextHighlightAnnotation && annot.IsCustomSearch
                && annot.autoHighlights
              ) {

                const { X, Y, Width, Height, PageNumber } = annot;

                annot.FillColor = new Annotations.Color(0, 0, 0, 0);
                annot.StrokeColor = new Annotations.Color(0, 0, 0, 0);
                const textQuad = annot.Quads[0];


                const annotNew = new Annotations.RectangleAnnotation();
                annotNew.StrokeColor = new Annotations.Color(this.test);

                annotNew.FillColor = new Annotations.Color(0, 0, 0, 0);

                annotNew.X = textQuad.x1;
                annotNew.Width = textQuad.x2 - textQuad.x1;

                annotNew.Y = textQuad.y4;

                annotNew.Height = textQuad.y1 - textQuad.y4;


                //edge cases for X coordinates
                if (textQuad.x1 <= 3) {
                  annotNew.X = textQuad.x1;
                }
                if (annotNew.Width == annot.getPageWidth) {
                  annotNew.Width = textQuad.x2 - textQuad.x1;
                }
                annotNew.Quads = [textQuad];
                annotNew.PageNumber = annot.PageNumber;

                annotManager.addAnnotation(annotNew);

                annot.setCustomData("IsHighlightDeleted", true);
                annot.deleteCustomData("IsCustomSearch");
                const adjustSelectedAnnot = (x, y, event) => {
                  annotManager.deleteAnnotation(annot, { force: true });
                  const selectedAnnots = annotManager.getSelectedAnnotations();

                  if (!selectedAnnots || selectedAnnots.length === 0) {
                    return;
                  }

                  event.preventDefault();

                  selectedAnnots.forEach((annot) => {
                    annot.X += x;
                    annot.Y += y;
                    annotManager.redrawAnnotation(annot);
                  });
                };
                // annotManager.deleteAnnotation(annot);
                this.wvInstance.iframeWindow.window.addEventListener(
                  "keydown",
                  (event) => {
                    switch (event.key) {
                      case "ArrowRight": {
                        adjustSelectedAnnot(1, 0, event);
                        break;
                      }
                      case "ArrowLeft": {
                        adjustSelectedAnnot(-1, 0, event);
                        break;
                      }
                      case "ArrowUp": {
                        adjustSelectedAnnot(0, -1, event);
                        break;
                      }
                      case "ArrowDown": {
                        adjustSelectedAnnot(0, 1, event);
                        break;
                      }
                    }
                  }
                );
                //  annotManager.deleteAnnotation(annot)
                // Here you can use X, Y, Width, Height
                // to create a new Rectangle Annotation!
              }
              else if (annot instanceof Annotations.TextHighlightAnnotation &&
                annot.IsCustomSearch) {

                const { X, Y, Width, Height, PageNumber } = annot;

                annot.FillColor = new Annotations.Color(0, 0, 0, 0);
                annot.StrokeColor = new Annotations.Color(0, 0, 0, 0);
                const textQuad = annot.Quads[0];


                const annotNew = new Annotations.RectangleAnnotation();
                annotNew.StrokeColor = new Annotations.Color(this.test);

                annotNew.FillColor = new Annotations.Color(0, 0, 0, 0);

                annotNew.X = textQuad.x1 - 3;
                annotNew.Width = textQuad.x2 - textQuad.x1 + 6;

                annotNew.Y = textQuad.y4 - 2;

                annotNew.Height = textQuad.y1 + 3 - textQuad.y4;


                //edge cases for X coordinates
                if (textQuad.x1 <= 3) {
                  annotNew.X = textQuad.x1;
                }
                if (annotNew.Width == annot.getPageWidth) {
                  annotNew.Width = textQuad.x2 - textQuad.x1;
                }
                annotNew.Quads = [textQuad];
                annotNew.PageNumber = annot.PageNumber;

                annotManager.addAnnotation(annotNew);

                annot.setCustomData("IsHighlightDeleted", true);
                annot.deleteCustomData("IsCustomSearch");
                const adjustSelectedAnnot = (x, y, event) => {
                  annotManager.deleteAnnotation(annot, { force: true });
                  const selectedAnnots = annotManager.getSelectedAnnotations();

                  if (!selectedAnnots || selectedAnnots.length === 0) {
                    return;
                  }

                  event.preventDefault();

                  selectedAnnots.forEach((annot) => {
                    annot.X += x;
                    annot.Y += y;
                    annotManager.redrawAnnotation(annot);
                  });
                };
                // annotManager.deleteAnnotation(annot);
                this.wvInstance.iframeWindow.window.addEventListener(
                  "keydown",
                  (event) => {
                    switch (event.key) {
                      case "ArrowRight": {
                        adjustSelectedAnnot(1, 0, event);
                        break;
                      }
                      case "ArrowLeft": {
                        adjustSelectedAnnot(-1, 0, event);
                        break;
                      }
                      case "ArrowUp": {
                        adjustSelectedAnnot(0, -1, event);
                        break;
                      }
                      case "ArrowDown": {
                        adjustSelectedAnnot(0, 1, event);
                        break;
                      }
                    }
                  }
                );
              }
            });
          }
        }
      });
2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

Hey there!

Yes I can reproduce this issue. It looks like two separate annotations are being added.

The reason this is happening is because when you delete the annotation, annotationSelected is called again with a deselected action (I did not design this API so don’t ask why it works this way :laughing:)

What you can do is check that the second parameter is equal to action

annotManager.on("annotationSelected", (annots, action) => {
   if(action === 'selected') {
      // your code
   }
}

Thanks,
Logan