Reposition the Note sticky annotation relative to the cursor

Technical Support
1

PDF.js Express Version
Core version 7.3.2
UI version 7.3.0

Detailed description of issue
By default, the note type annotation is placed on the PDF with its icon’s upper left corner touching where the user had clicked. Is there a way to reposition the icon so that its lower LEFT corner is placed where the user clicks? Even better would be if I could set it to be positioned precisely at the bottom point of the speech bubble “spike”.

Assuming this is possible, will the icon positioning translate to the downloaded PDFs as well?

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Answer here}

Link to document
{Provide a link to the document in question if possible}

Code snippet
{Provide a relevant code snippet}

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!

This code should do the trick:

  const appendOffsetToTool = (tool) => {
    tool.addEventListener('annotationCreated', annot => {
      annot.X = annot.X - 5.5;
      annot.Y = annot.Y - 17;
    })
  }

  const tools = [
    instance.Core.documentViewer.getTool(instance.Core.Tools.ToolNames.STICKY),
    instance.Core.documentViewer.getTool(instance.Core.Tools.ToolNames.STICKY2),
    instance.Core.documentViewer.getTool(instance.Core.Tools.ToolNames.STICKY3),
    instance.Core.documentViewer.getTool(instance.Core.Tools.ToolNames.STICKY4)
  ]

  appendOffsetToTool(tools)

All i’m doing here is moving the annotation a bit as soon as its created (theres a million ways to accomplish this but I think this is the easiest).

Also note that you need to call it once for each sticky tool (there are 4 by default), hence the array.

Yes, the position will be preserved when downloading the document.

Thanks!
Logan

5

Hi Logan, thanks for the response!

We actually thought of the solution you presented and gave it a try yesterday. Unfortunately it seems that it doesn’t scale properly when zooming in or out, as the offset stays the same while the document gets bigger or smaller.

Instead of intercepting the coordinates and adjusting them slightly, do you know of a way we can dynamically set the anchor point to be bottom left corner to begin with?

6

Hey there! Sorry for the delay - I was away for 4 days.

We do not have a way to set the anchor point unfortunately.

However, all you need to do is adjust for the zoom level like so:

    tool.addEventListener('annotationCreated', annot => {
      const zoom = instance.Core.documentViewer.getZoom();
      annot.X = annot.X - (5.5 * (1/zoom));
      annot.Y = annot.Y - (17 * (1/zoom));
    })

Thanks!
Logan