Retrieve Coordinates for selected text

[Devanshi Bhagat]

Hello,

I search for particular text through my code using this:

var searchText = "children";

if(!readerControl.getShowSideWindow()){

readerControl.setShowSideWindow(true);

$("#searchView").show();

}

$(".search")[0].click();

$("#fullSearchBox").val(searchText);

$("#fullSearchButton").click();

And my text is searched and highlighted automatically, but I want to know the coordinates of that highlighted text.

Is there a way to get the coordinates of this highlighted text?

I can get the text selected using readerControl.docViewer.getSelectedText();, but I am not able to find any object which can help in retrieving coordinates of the highlighted text.

Any suggestions?

Thanks,

Devanshi Bhagat

[Matt Parizeau]

Hi Devanshi,

The quads are store on the search result element as jQuery data (you can see where they're set in the fullTextSearch function of ReaderControl.js). To get the selected search result item we can use $('.searchResultLine.ui-state-active') and call the data function with the property 'data' (since this is property the search results set in the fullTextSearch function). Then we can just access the quads property which will be an array of quads specifying the location of the selected text on the page.

For example:

var searchLocation = $('.searchResultLine.ui-state-active').data('data').quads;

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Devanshi Bhagat]

Thank you. It is working but I also want to retrieve coordinates of selected text by user. How can I do that? 

[Matt Parizeau]

You can use the textSelected event http://www.pdftron.com/webviewer/demo/lib/html5/doc/symbols/CoreControls.DocumentViewer.html#event:textSelected

For example:

$(document).on('viewerLoaded', function() {
  readerControl.docViewer.on('textSelected', function(e, quads) {
    console.log(quads);
  });
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Devanshi Bhagat]

Thank you. This is working as I expected.

But I have one more doubt, from the list of quads we got from "textSelected" method, how we can know if the selected text is divided in two different lines?

I want to create texthighlight annotation on this selected text area. So when I select text in just single line it works properly using following code:

var firstQuads = window.currentQuads[0].getPoints();

var lastQuads = window.currentQuads[window.currentQuads.length-1].getPoints();

annot.setRect(new Annotations.Rect(firstQuads.x4, firstQuads.y4, lastQuads.x2,lastQuads.y2));

But when I select text in multiple lines like this, 

it does not work. It leaves out some text like this:

Could you please help me resolve this issue?

[Matt Parizeau]

Instead of using setRect you should be able to use the setQuads function on the annotation and just set it to the array of quads you get back from the textSelected handler. For example:

annot.setQuads(currentQuads.map(function(quad) {

  return quad.getPoints();
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Devanshi Bhagat]

Annotation object does not have any method called setQuads. (https://www.pdftron.com/webviewer/demo/lib/html5/doc/symbols/Annotations.Annotation.html ) 

But only TextMarkupAnnotation has setQuads method (https://www.pdftron.com/webviewer/demo/lib/html5/doc/symbols/Annotations.TextMarkupAnnotation.html )

The object I get from readerControl.getDocumentViewer().getAnnotationManager() is of Annotation not TextMarkupAnnotation.

So how do I set coordinates for this?

[Matt Parizeau]

What type of annotation are you getting from the AnnotationManager? Looking closer at your screenshot it appears to be a rectangle annotation, so I would recommend using a TextHighlightAnnotation and calling setQuads on it. If you really wanted to use a rectangle then you would have to create a separate rectangle annotation for each of the quads.

Let me know if that makes sense!

Matt Parizeau

Software Developer

PDFTron Systems Inc.