To replace Count tool icon by custom icon [Pdfjs-express 7.0]

Technical Support
1

Recently I have migrated Pdfjs-express from 6.0.2-beta to 7.0. Earlier I had created custom Count tool due to non availability of count tool in Pdfjs-express. But now it’s available as a ‘Checkmark’ icon
And I want to replace ‘red checkmark’ CountTool by my own custom icon to it… So I want to have a custom image[flag icon] instead of this ‘Checkmark’ icon like this type -

image

How can I do that ?
I have used this -

const tool = this.viewerInstance.docViewer.getTool(‘AnnotationCreateCountMeasurement’);
this.viewerInstance.docViewer.setToolMode(tool);

2

Hi there!

The PDF spec defines what icons a sticky annotation can have (the count annotation is just an extension of the sticky annotation), so changing the appearance to something custom would cause the annotation to render incorrectly once its saved and reloaded in a different viewer.

I recommend going through all the possible supported icons and seeing if there is something you like. You can change the icon by setting the Icon property on the annotation.

Webviewer({
  path: '/lib',
  enableMeasurement: true
}, document.getElementById('viewer')).then(instance => {
  const { Annotations, annotManager } = instance;
  annotManager.on('annotationChanged', ([annot], action) => {
    if (
      action === 'add' &&
      annot instanceof Annotations.StickyAnnotation &&
      !!annot.getCustomData('trn-is-count')
    ) {
      annot.Icon = 'Cross' // change the icon here
    }
  })
});

The list of supported PDF icons are as follows:

Insert
Circle
NewParagraph
Help
Key
Check
Checkmark
Cross
CrossHairs
Paragraph
RightArrow
RightPointer
Star
UpArrow
UpLeftArrow

If you are okay with going against the PDF spec, you can overwrite the draw function on the sticky annotation class like so:

Webviewer({
  path: '/lib',
  enableMeasurement: true
}, document.getElementById('viewer')).then(instance => {
  const { Annotations } = instance;

  const oldDraw = Annotations.StickyAnnotation.prototype.draw;
  Annotations.StickyAnnotation.prototype.draw = function(ctx, pageMatrix) {
    if (this.getCustomData('trn-is-count')) {
      // add your custom draw code here using the canvas context (ctx)
    } else {
      oldDraw.call(this, ctx, pageMatrix);
    }
  }
});

I hope this helps!

Thanks,
Logan

3

Why ‘Check’ icon is changing colour on -

viewerInstance.annotManager.selectAnnotation(annotation);

I want to highlight flag so I want its color in dark-blue when highlighted(selected) and when on de-highlight(de-selected) it should be in regular light blue. But it is changing color to red after reload.

image

Can I able to change icon color ?

4

Hi!

Would you be able to share the code you are currently using to change the annotations color? This will help us understand your problem a bit more.

Thanks,
Logan

5

Please let me know how to change this count tool checkmark icon color.
I don’t know how to change color of the icon. But for other annotations, I am using this -

const tool = this.viewerInstance.docViewer.getTool(annotation);
tool.setStyles(() => ({
Scale: [[1, ‘m’], [10, ‘m’]],
Precision: 0.01,
StrokeThickness: 2,
StrokeColor: new this.viewerInstance.Annotations.Color(92, 142, 184),
}));
this.viewerInstance.docViewer.setToolMode(tool);

6

Hi,

To change the color of the Icon you have to use the code I sent above and replace the draw function with your own canvas drawing instructions.

You can try something like this:

Webviewer({
  path: '/lib',
  enableMeasurement: true
}, document.getElementById('viewer')).then(instance => {
  const { Annotations } = instance;

  const oldDraw = Annotations.StickyAnnotation.prototype.draw;
  Annotations.StickyAnnotation.prototype.draw = function(ctx, pageMatrix) {
    if (this.getCustomData('trn-is-count')) {
      var thickness = 7.5;
      var size = defaultSize;
      var width = size;
      var height = size;
      var padding = 2;
      var minEdge = width < height ? width : height;
      var horizontalCenter = width * 0.5;
      var verticalCenter = width * 0.5;
      
      var middleDipX = padding + thickness + thickness * 0.507;
      ctx.beginPath();
      ctx.moveTo(padding, verticalCenter);
      ctx.lineTo(padding + thickness * 0.9, verticalCenter);
      ctx.lineTo(middleDipX, height - padding - thickness);
      ctx.lineTo(width - padding - thickness * 0.9, height * 0.2);
      ctx.lineTo(width - padding, height * 0.2);
      ctx.lineTo(middleDipX + thickness * 0.1, height - padding);
      ctx.closePath();
      ctx.fillStyle = '#666666'; // CHANGE THIS TO YOUR OWN COLOR
      ctx.fill();
    } else {
      oldDraw.call(this, ctx, pageMatrix);
    }
  }
});

However, we do not recommend doing this as it is against the PDF specification and your custom annotations will not save and display in other PDF viewers properly.

Thank you,
Logan