I am actually working on a project where I need to "draw" rectangles on a PDF. This happens the same way you would select multiple files on your desktop. You hold down your click, "draw" a rectangle and once your rectangle has the size you want it to, you just release the click.

To do this, I use React-PDF-highlighter (find an example here: https://agentcooper.github.io/react-pdf-highlighter/ ---> Note that to draw said rectangle in this example, you need to be holding down option key on mac or Altkey on windows at the same time.)

For some reasons I would really like to let the user drag a square from some kind of left menu on the PDF. For the "drag and drop", I use React-dnd.

so from now on, just imagine a screen divided in 2. On the left side, you have the possibility to drag and drop a rectangle and on the right side, you have a PDF file that can contain multiple pages of course.

Problem is, when I drag and drop my square on my pdf highlighter component, I have no way to know what page I dropped my rectangle on. I do have the screen coordinates of the drop though.

Is there a way to SIMULATE a mouse mouvement? Not actually do it, I know that's impossible. But can I make the browser believe that the mouse clicked on a certain point (the coordinates of the released drop) and from there on make it believe the click has been released a bit further in diagonal to create a simple square that would be nicely added to the list?

If someone helps me out here, he or she would get my eternal gratitude!

Have a wonderful day, and all the best for 2022!!