Is there an option for numbered annotations? (ie. footnotes/references)

Technical Support
1

Is there the ability to have annotations numbered? Adding a number to the actual PDF next to the annotation so that these can be referenced? I’m looking to export annotations/comments and correlate them back to the actual annotation on the PDF.

The blue line with arrow is super convenient while within the viewer, but having a number is helpful when exporting.

So something like a stamp perhaps but combined/grouped with any other annotation. Maybe that’s one way to go about it? Though the stamp or image in this case wouldn’t be a separate annotation itself. Or at least not present as one.

2

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:

3

Hi there!

Sorry for the delay here, I was away for a few days.

Just to be clear, you just want to display a number beside each annotation in the document? If you could explain your use case and what it looks like for the end user that would be helpful.

Thank you!
Logan

4

No problem, I appreciate your help here!

Yes, I just want to display a number along with each annotation. That way if exported the numbers (embedded images/svg at that point I guess) will be visible with the various annotations. I can export a separate sheet of comments that are all numbered as well. Now people looking at a printed copy can see all of the comments around each annotation.

Basically imagine a number to the bottom right of each annotation in terms of visuals. It need not be bottom right, but that’s where we were thinking.

5

Hi there,

I tried thinking about this for a bit and I do not think there is a good way to accomplish this use case. Each type of annotation has its own rendering method and you would essentially have to override each one of those and add the number drawing functionality (annotations are drawn on a canvas).

Sorry about this! This just isn’t a scenario we can easily accommodate at the moment.

Logan

6

Ok. How about just the Note annotation? Those have icons which can be customized correct?

I guess kinda like stamps. Do these icons need to be images? Or can they be SVGs where I could adjust text for the numbering?

I’m thinking if all annotations can’t easily be numbered, maybe at least specific ones can. So a user can decide to place a numbered pin on the PDF with comments.

So instead of the blue Note icon, maybe an SVG circle with number inside.

image
image1635×531 38.6 KB

7

Hi there,

Most annotations are actually drawn on a Canvas, so they can’t be easily adjusted with an SVG. We do provide an option to override the drawing function on annotations, but its on a per annotation type basis.

Something else to note:

  • Annotations are not rendered in a guaranteed order, so you would have to maintain the “number” of each annotation in your own external state.

That being said, here is how you can override the draw function:

  const { Annotations } = instance;

  Annotations.setCustomDrawHandler(Annotations.StickyAnnotation, function (ctx, pageMatrix, rotation, options) {
    options.originalDraw(ctx, pageMatrix)
    const number = 1;
    const annot = options.annotation;

    const width = annot.Width;
    const height = annot.Height;
    const padding = 10;

    ctx.font = "20px Arial";
    ctx.fillText(`${number}`, width + padding, height + padding);
  })

You will have to figure out how to dynamically assign number to each annotation. One potential solution is listening for new annotations and then assigning each new annotation a number in a cache somewhere (something like this works for me):

  const { Annotations } = instance;

  let lastIndex = 0;
  const annotMap = {};

  instance.annotManager.on('annotationChanged', (annots, action, e) => {
    annots.forEach(annot => {
      if (action === 'add' && !e.imported) {
        const id = annot.Id;
        lastIndex++;
        annotMap[id] = lastIndex;
      }
    })
  })

  Annotations.setCustomDrawHandler(Annotations.StickyAnnotation, function (ctx, pageMatrix, rotation, options) {
    options.originalDraw(ctx, pageMatrix)

    const annot = options.annotation;
    const number = annotMap[annot.Id];
    const width = annot.Width;
    const height = annot.Height;
    const padding = 10;

    if (number) {
      ctx.font = "20px Arial";
      ctx.fillText(`${number}`, width + padding, height + padding);
    }
  })

The last part of the equation is calling setCustomDrawHandler on all the annotation types you want to override.

I hope this helps!

Thanks,
Logan

1 Like
8

Thank you so much for taking the time to put this together! I’ll give it a shot. It makes sense and I think should work.

This can be done for any annotation?

originalDraw() will produce the original annotation? So this effectively “appends” to that? I think that’d be perfect if I’m understanding that correctly.

9

Hey!

Yes this should be doable with any annotation. And yes originalDraw will draw the original annotation, meaning this basically appends to it.

Thanks,
Logan