Use custom annotation tool icon on custom annotation in notes panel

Technical Support
1

PDF.js Express Version
7.2.0

Detailed description of issue
I’m trying to create a custom annotation and annotation tool which extends the TextHighlightAnnotation.

I’m able to add the custom tool and annotation and it works ok.

But the annotations display in the notes panel with the highlight icon (icon-tool-text-manipulation-highlight) instead of the icon I supplied for the tool button.

Expected behaviour
When registering the tool I was expecting the icon to be set from the button image:

Then when the icon is looked up in the NoteContent compoennt:
__https://github.com/PDFTron/webviewer-ui/blob/d3e7c21b195f5d50246d19a70f68121815d5e24d/src/components/NoteContent/NoteContent.js#L124

It should find the key corresponding to my tool registration by using annotCheck function:

But my custom annotations have the icon for the ‘highlight’ entry in the map instead. I.e. they display with the same icon as the TextHighlightAnnotationTool.

I tried supplying a function for the customAnnotationCheckFunc parameter of registerTool __https://github.com/PDFTron/webviewer-ui/blob/d3e7c21b195f5d50246d19a70f68121815d5e24d/src/apis/registerTool.js#L13

But the annotationCheck function always seems to get a ‘null’ parameter instead of the annotation.

Code snippet

const {Annotations, Tools, annotManager, docViewer} =
  this.webViewerInstance;

const MyCustomAnnotation = function () {
  Annotations.TextHighlightAnnotation.call(this);
  this.Subject = 'MyCustom'
};

MyCustomAnnotation.prototype = new Annotations.TextHighlightAnnotation();
MyCustomAnnotation.prototype.elementName = "myCustom";

const MyCustomCreateTool = function (docViewer) {
  Tools.TextAnnotationCreateTool.call(this, docViewer, MyCustomAnnotation);
  this.defaults.StrokeColor = new Annotations.Color(0, 255, 0);
};

MyCustomCreateTool.prototype = new Tools.TextHighlightCreateTool();
const myCustomToolName = 'AnnotationCreateMyCustom';

annotManager.registerAnnotationType(
  MyCustomAnnotation.prototype.elementName,
  MyCustomAnnotation
);

const myCustomCreateTool = new MyCustomCreateTool(docViewer);
this.webViewerInstance.registerTool(
  {
    toolName: myCustomToolName,
    toolObject: myCustomCreateTool,
    buttonImage: 'ic_pan_black_24px',
    buttonName: 'myCustomToolButton',
    tooltip: 'My Custom'
  },
  MyCustomAnnotation,
  annotation => {
    console.log(annotation)  // 'null'
  }
);

PS - I had to put underscores in front of a couple of the github links to prevent the parsing as links as there appears to be a restriction on new users creating a post with more than two links.

2

Hi there!

Thank you for the very detailed message.

The issue is actually right where you pointed us:

Object.keys(map).find(key => {
    const { annotationCheck } = map[key];
    return annotationCheck && annotationCheck(annotation);
  });

This function is returning early since it’s matching the super class before your custom class, meaning your icon isn’t getting picked up.

We added this to our backlog and this will be fixed soon.

Thank you!
Logan

1 Like