Highlight tool trigger as left click

Technical Support
1

Which product are you using?
PDF Express Js

PDF.js Express Version
8.X.X

Detailed description of issue
on left click of mouse is it possible to highlightToolbutton option to be triggered.

Expected behaviour
on left click of mouse is it possible to triggered the highlightToolbutton menu, and capture the highlighted text.

Does your issue happen with every document, or just one?
Yes

Link to document

Code snippet
annotationManager.addEventListener(‘annotationSelected’, (annotations, action) => {
if (action === ‘selected’) {
console.log(‘annotation selection action’, action);
const selectedAnnots = annotationManager.getSelectedAnnotations();
console.log(‘selected Content’, selectedAnnots);

            } else if (action === 'deselected') {
                console.log('annotation deselection', annotations);
               
            }
            if (annotations === null && action === 'deselected') {
                console.log('all annotations deselected');
            }
        })
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 there,

I am a bit confused by your question. Can you please be a bit more descriptive? Which menu/option do you want to trigger? What is the use case?

Logan

5

For example am having text paragraph consist of 10 lines, i need to select 2 lines out of 10, on left click of mouse , while selecting 2 lines i need to trigger highlightToolbutton menu function.

6

Hi there,

There is no good way to select the highlight tool when text is selected. However, you can edit the text select tool to highlight text which is pretty close to what you want I think. here’s some code:

  const { Tools } = instance.Core

  const textHighlight = new Tools.TextHighlightCreateTool(instance.Core.documentViewer);
  
  const textSelectDown = Tools.TextSelectTool.prototype.mouseLeftDown;
  Tools.TextSelectTool.prototype.mouseLeftDown = function() {
    textHighlight.mouseLeftDown(arguments[0])
    textSelectDown.apply(this, arguments);
  };
  
  const textSelectMove = Tools.TextSelectTool.prototype.mouseMove;
  Tools.TextSelectTool.prototype.mouseMove = function() {
    textHighlight.mouseMove(arguments[0])
    textSelectMove.apply(this, arguments);
  };
  
  const textSelectUp = Tools.TextSelectTool.prototype.mouseLeftUp;
  Tools.TextSelectTool.prototype.mouseLeftUp = function() {
    textHighlight.mouseLeftUp(arguments[0])
    textSelectUp.apply(this, arguments);
  };

Thanks!
Logan

7

Hi Logan,
Excellent it worked for me, highlightToolbutton is triggering when i select.
is it possible to capture highlighted text in some variable?

8

Hey!

In the mouseLeftUp event you could call documentViewer.getSelectedText() like so:

  const textSelectUp = Tools.TextSelectTool.prototype.mouseLeftUp;
  Tools.TextSelectTool.prototype.mouseLeftUp = function() {
    textHighlight.mouseLeftUp(arguments[0])
    textSelectUp.apply(this, arguments);

    const text = instance.Core.documentViewer.getSelectedText()
    console.log(text)
  };

Thanks,
Logan