Advanced operations with WebViewer

[Mirko Lugano]

Hi, I am extensively testing the component because we have to perform some advanced operations. I have therefore a few questions (they may sound a bit weird but it's just to understand what's possible and what isn't):
- Can you combine multiple text selections? Like holding CTRL and select multiple ‘blocks’ of text in some way?
- I have tried creating an annotation out of a text selection (getting the quads of the selection when the select event fires), but it doesn’t work as expected (see attachments: code and result): Is there a better way to accomplish this? (yes, I know there is the appropriate tool for creating annotations, it’s just to have a ‘custom’ alternative)
- Within a text selection/annotation can you detect (in case of multiple columns layout) in which column is the selected text?
- Can I create an annotation that spans over 2 or more pages (with the text highlight tool)?
- When I perform a text search, the ‘SearchUp’ mode doesn’t seem to work, here is my code:
    myWebViewer.searchText(query);                  //this works fine
    myWebViewer.searchText(query, 'SearchUp');      //this doesn’t
From the docs I read ‘searchMode must one or a combination of the above search modes. To combine search modes, simply pass them as comma separated values in one string. i.e. "CaseSensitive,WholeWord"’. Am I doing something wrong?
- I know I can create custom annotations, I know this is an extreme case, but is there a component that creates a ‘screenshot’ annotation? Like drawing a selection with the mouse and, onMouseUp, getting a screenshot of what’s inside the selection and setting it as the annotation (if not possible, no big deal).
Thanx a lot
Mirko

[Matt Parizeau]

Hi Mirko,

-We don't currently support multiple text selections.

-One issue is that you're continually pushing the quads to your currentQuads variable when they should actually be reset each time the textSelected event happens. To fix this just have currentQuads = []; at the top of the textSelected handler.

It also looks like you're basing the code off of WebViewer's text position sample which is a good start, however there is a difference in the quads in that case and the quads in your case. In the text position sample there is one quad for each character and in your case there will be one quad for each line. So in the character case it might make sense to average the x values of the first and last quad, but if you only have one line then it won't highlight anything since the first and last quad are the same! Also for multiple lines you'll want to have different first and final y values.

So you could change it to something like:

var firstx = firstChar.x1;
var finalx = lastChar.x2;
var firsty = firstChar.y1;
var finaly = lastChar.y4;

var topLeft = { x: firstx, y: firsty, pageIndex: pageNum };
var bottomRight = { x: finalx, y: finaly, pageIndex: pageNum };

-For multiple columns maybe you could use the coordinates to determine what part of the page and therefore what column is selected, but there isn't anything that WebViewer gives explicitly to detect this.

-Annotations can only be associated with a single page which the text tools enforce. In theory you could create your own custom tool that allows a custom annotation to span across pages, however there may be some issues with how this is handled in WebViewer with drawing and updating. For example when overriding the draw function for the annotation it only provides you with the context of the single page the annotation is associated with.

-It looks like there is a bug in the searchText function where it isn't handling strings split up by commas correctly. If you pass it as an array (e.g. ["CaseSensitive", "WholeWorld"]) then it should work. The issue will be fixed for the next version. Also note that the default searchText adds the ProvideQuads and PageStop modes so if you want to search up and see it in the viewer you should use ["SearchUp", "ProvideQuads", "PageStop"].

-Getting a screenshot would be a bit tricky but might be doable. You can get access to the canvas for the document page as well as the canvas for the annotations. The custom tool would get coordinates for where the annotation is being created and then when the mouse is released it could copy the correct part of the page canvas onto a new canvas and then copy the annotation canvas over top of that. You could then call canvas.toDataURL() on the new canvas to get the image data and save that inside the annotation. In the annotation's draw function it would just draw the image object associated with the data URL.

What's a bit tricky about this is that at higher zoom levels WebViewer will split up the page canvas into more than one canvas because browsers impose size limits on individual canvases. So you would have to grab all of the canvases and then calculate what parts to grab from each. WebViewer just splits up the canvases into horizontal slices so this wouldn't be too difficult.

Matt Parizeau

Software Developer

PDFTron Systems Inc.