Getting error while creating custom annotaion

Technical Support
1

Detailed description of issue
I followed this documentation for custom annotation
https://pdfjs.express/documentation/annotation/custom-annotations
But I get the following error:

image
image953×316 29.8 KB

Code snippet
this code is in my myConfig.js file
WebViewer({

path: '../public'

})

.then((instance) => {

const {

  Annotations,

  Tools,

  annotManager,

  docViewer

} = instance;



const TriangleAnnotation = () => {

  Annotations.MarkupAnnotation.call(this);

  this.Subject = 'Triangle';

}

TriangleAnnotation.prototype = new Annotations.MarkupAnnotation();

TriangleAnnotation.prototype.elementName = 'triangle';



TriangleAnnotation.prototype.draw = (ctx, pageMatrix) => {

  this.setStyles(ctx, pageMatrix);

  ctx.translate(this.X, this.Y);

  ctx.beginPath();

  ctx.moveTo(this.Width / 2, 0);

  ctx.lineTo(this.Width, this.Height);

  ctx.lineTo(0, this.Height);

  ctx.closePath();

  ctx.fill();

  ctx.stroke();

}

const TriangleCreateTool = docViewer => {

    Tools.GenericAnnotationCreatetool.call(this, docViewer, RedactionAnnotation);

  }



  TriangleCreateTool.prototype = new Tools.GenericAnnotationCreatetool();

const triangleToolName = 'AnnotationCreateTriangle';

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

const triangleTool = new RedactCreateTool(docViewer);

instance.registerTool({

  toolName: triangleToolName,

  toolObject: triangleTool,

  buttonImage: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">' +

    '<path d="M12 7.77L18.39 18H5.61L12 7.77M12 4L2 20h20L12 4z"/>' +

    '<path fill="none" d="M0 0h24v24H0V0z"/>' +

    '</svg>',

  buttonName: 'triangleToolButton',

  tooltip: 'Triangle'

}, TriangleAnnotation);

instance.setHeaderItems(header => {

  const triangleButton = {

    type: 'toolButton',

    toolName: triangleButton

  };

  header.get('freeHandToolGroupButton').insertBefore(triangleButton);

});

docViewer.on('documentLoaded', () => {

  // set the tool mode to our tool so that we can start using it right away

  instance.setToolMode(triangleToolName);

});

})

2

Hi,

This means that WebViewer is not getting loaded, or you are calling this code before the script has finished loading.

Can you please verify that webviewer.min.js is getting loaded correctly, and you are calling your code after it is done loading.

Thanks,
Logan

3

myConfig.zip (992 Bytes)

Here is my config file. Am I doing this right? And I am using Angular to call this config file like this

WebViewer(
{
path: “…/public”,
config: “…/assets/myConfig.js”,
},
this.viewer.nativeElement
);

Is there any sample on how to create a config file for Angular?

4

Hi!

You don’t need to re-call the WebViewer constructor inside the config file. You can just directly start calling APIs.

Can I ask why you opted to use the config file? Odds are it’s probably not necessary for your use case.

Logan

5

I just followed the documentation.

It said " Code snippets in this guide should run in a config file. See config files guide for details."

Is there a sample of custom-annotations for Angular?

6

Hi,

Angular (or any framework) has nothing to do with custom annotations or Express in general, so we do not have specific guides for this. PDF.js Express is framework agnostic.

That documentation about the code snippets should be run in a config file is mistake on our part and we will fix that. You do not need to use a config file for custom annotations.

Thanks,
Logan