Need to highlight annotation on mouse hover

Technical Support
1

Which product are you using?
PDF.js Express Viewer
PDF.js Express Version
8.1.0

Detailed description of issue
Hey there,I want to highlight my annotation with some background color on hover. Is there an api which can be used for that?

Expected behaviour
When I hover over an annotation it should be highlighted and when the mouse is removed from the annotation it should be disappeared. I dont want to add an extra highlightannotation over it. Is there some overlay property that can be used for it? Just to indicate that there is an annotation over there.

3

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:

4

Hey!

We do not have a nice API for this, however it is possible by listening to a mouse move event and changing the color of the annotation when its hovered:

  let highlightedAnnot = null;
  let lastHighlightedColor = null;

  // Change this to change the highlight color
  const highlightColor = new instance.Core.Annotations.Color(255,0,0,1);

  instance.Core.documentViewer.addEventListener('mouseMove', (e) => {

    // Check if an annotation is under the mouse
    const annot = instance.Core.annotationManager.getAnnotationByMouseEvent(e)
    if(annot) {

     // Break early if its already highlighted
      if(highlightedAnnot) return;

      // Make sure its a highlight annotation
      if(annot instanceof instance.Core.Annotations.TextHighlightAnnotation) {
        const {R,G,B,A} = annot.StrokeColor

        // Store the original color of the annotation so we can revert back to it when its unhovered
        lastHighlightedColor = new instance.Core.Annotations.Color(R,G,B,A);

       // Store the instnace of the annot so we can revert it when its unhovered
        highlightedAnnot = annot;

        // Set the color and redraw
        annot.StrokeColor = highlightColor;
        instance.Core.annotationManager.redrawAnnotation(annot)
      }
    } else if(highlightedAnnot) {
     // Revert the annotation back to its original state when unhovered
      highlightedAnnot.StrokeColor = lastHighlightedColor;
      instance.Core.annotationManager.redrawAnnotation(highlightedAnnot)
      highlightedAnnot = null;
      lastHighlightedColor = null;
    }
  })

Thanks!
Logan