onHover for annotations

[Matt Parizeau]

Q:

Is it possible to have an onHover event for annotations?

A:

You could listen to the mouseMove event and then loop over the annotations to check if the mouse is currently over top of any of them.

$(document).on('viewerLoaded', function() {

    var docViewer = readerControl.docViewer;
    var annotManager = docViewer.GetAnnotationManager();
    var displayModeManager = docViewer.GetDisplayModeManager();
    var $scrollView = $('#DocumentViewer');

    docViewer.on('mouseMove', function(evt, originalEvt) {
        var point = {
            x: $scrollView.scrollLeft() + originalEvt.pageX,
            y: $scrollView.scrollTop() + originalEvt.pageY
        };

        var displayMode = displayModeManager.GetDisplayMode();
        // get the currently hovered page index
        var page = displayMode.GetSelectedPages(point, point);

        if (page.first === null) {
            return;
        }

        var pageCoordinate = displayMode.WindowToPage(point, page.first);

        // loop backwards so that the annotation that appears on top will be found first
        var annotations = annotManager.GetAnnotationsList();
        for (var i = annotations.length - 1; i >= 0; i--) {
            var annot = annotations[i];
            if (annot.GetPageNumber() - 1 === pageCoordinate.pageIndex) {

                var currentZoom = docViewer.GetPageZoom(docViewer.GetCurrentPage() - 1);
                if (annot.selectionModel.prototype.testSelection(annot, pageCoordinate.x, pageCoordinate.y, currentZoom)) {
                    console.log("hovering over " + annot.Id);
                    break;
                }
            }
        }
    });
});

[Matt Parizeau]

WebViewer(...).then(instance => {

    const { docViewer, annotManager } = instance;

    docViewer.on('mouseMove', function(evt) {

        var annot = annotManager.getAnnotationByMouseEvent(evt);

        if (annot) {

            console.log("hovering over " + annot.Id);

        }

    });

});