Thumbnails annotations appear en wrong page

[Jérémy Guyenot]

Hi,

in PDF Tron 3.1.0 the annotations are visibles in thumbnails but in the thumbnail+1.

In the screen you can see that i add annotations into page 1 but they appears into the thumbnail 2.

[Justin Jung]

Hello,

We are having trouble reproducing the issue.

We simply tried annotating a document in an uncustomized WebViewer, and the annotations appeared on the correct pages.

Are you able to reproduce it in an uncustomized WebViewer? If not, could it be related to customizations you've made?

Justin Jung

Software Developer

PDFTron Systems Inc.

[Jérémy Guyenot]

Hi,

we solve the problem, it's due to a override of the createThumbnailContainer function to replace click with mousedown and mouseup.
The only line is making the difference is "thumbDiv.style.position = "relative";"

ReaderControl.prototype.createThumbnailContainer = function (pageIndex) {
    var me = this;
    var thumbContainer = document.createElement('div');
    thumbContainer.id = "thumbContainer" + pageIndex;
    thumbContainer.style.height = me.thumbContainerHeight + "px";
    thumbContainer.style.width = me.thumbContainerWidth + "px";
    thumbContainer.className = "thumbContainer ui-widget-content";

    var thumbDiv = document.createElement('div');
    thumbDiv.className = "thumbdiv";
    thumbDiv.style.position = "relative";
    $(thumbContainer).attr("draggable", "true");

    var span = document.createElement("span");
    span.style.height = "150px";
    span.style.display = "block";

    thumbDiv.appendChild(span);
    thumbContainer.appendChild(thumbDiv);

    var div = document.createElement('div');
    div.style.textAlign = "center";
    div.innerHTML = pageIndex + 1;
    thumbContainer.appendChild(div);

    thumbContainer.addEventListener('mousedown', function (e) {
        var $this = $(this);
        if($this.hasClass('ui-state-selected')){
            $this.attr('is-state-selected','1');
        }
        else{
            if($("#thumbnailView div.thumbContainer.ui-state-active").length==0){
                $this.addClass('ui-state-active');
          }
            $this.addClass('ui-state-selected');
        }
    });

    thumbContainer.addEventListener('mouseup', function (e) {
        var $this = $(this);
        if (me.clickedThumb !== -1 && !e.ctrlKey && !e.shiftKey) {
            $("#thumbContainer" + me.clickedThumb).removeClass('ui-state-active');
            $("#thumbnailView div.thumbContainer").removeClass('ui-state-selected');    //Ni 'ctrl' ni 'shift' enfoncee, on enleve toute selection
        }
        if (e.ctrlKey || e.shiftKey) {    //Selection
            if (e.ctrlKey && Number($this.attr('is-state-selected'))) {    //Si les deux touches sont enfoncees : la touche ctrl prend le pas sur la touche shift
                if($this.hasClass('ui-state-selected')) {
                    $this.removeClass('ui-state-selected').removeClass('lastSelected');
                }
            } else if (e.shiftKey) {
                //On calcule les vignettes a selectionner
                var clickedInd = $this.attr('id').replace('thumbContainer', '');
                me.actionShiftSelectThumbnails(clickedInd);
            }
        } else {    //Activation pour affichage dans la visionneuse ET Selection de la vignette
            $("#thumbnailView div.thumbContainer.lastSelected").removeClass('lastSelected');
            $this.addClass('ui-state-active').addClass('ui-state-selected').addClass('lastSelected');
            me.clickedThumb = pageIndex;    //Retient la derniere vignette activee
        }
        if (!e.ctrlKey && !e.shiftKey) {
            setTimeout(function () {
                me.docViewer.setCurrentPage(pageIndex + 1);
                me.trackPageHistory(pageIndex + 1);
            }, 0);
        }
        $this.removeAttr('is-state-selected');
        if($('#button_remove').length>0){
            if($("#thumbnailView div.thumbContainer.ui-state-selected").length>0){
                $('#button_remove').show();
            }
            else{
                $('#button_remove').hide();
            }
        }
    });

    return thumbContainer;
};

[Justin Jung]

That's great to hear!

Thanks for sharing the code.