Sample code for annotation tools?

[Donald Gordon]

Hi

I need to create a custom annotation tool that displays a sticky note, a bit like the current tool, but with a separate text editing window like the Signature tool.  The notes will not be resizable so the sample custom annotation tool examples don't really apply.

Is there unobfuscated source for the bundled annotation tools (signature, ink, freetext, etc) available that I can use as a guide to the annotation API?  Or some documentation a bit easier to follow than the class reference?

Regards

Donald GOrdon

[Matt Bojey]

Hi,

We have a tutorial on creating custom annotations that you can find here https://www.pdftron.com/webviewer/demo/tutorials/custom-annotations.html that should still help you get everything set up.  The UI for the signature dialog can be found in AnnotationEdit.js and the HTML for it can be found in ReaderControl.html .

Matt

[Donald Gordon]

Hi

I've got a bit further along.  Now I want to customise the "Done/Delete/Style/Note" buttons.  In particular, I'd like to enable the "Edit Text" button and remove the "Style" button.  Currently these are enabled by instanceof checks on the annotation (lines 393 and 405 of AnnotationEdit.js).  I can hack up AnnotationEdit.js to add extra checks but it would be great if an API was provided to modify this part of the UI.

Regards

Donald

[Donald Gordon]

Hi

I've had a look.  I'm trying to create a fixed-size annotation.  Using that triangle example, I've got a creation tool like so:

var TriangleCreateTool = function(docViewer) {

    Tools.GenericAnnotationCreateTool.call(this, docViewer, TriangleAnnotation);

};

TriangleCreateTool.prototype = new Tools.GenericAnnotationCreateTool();

TriangleCreateTool.prototype.mouseLeftDown = function(e) {

  Tools.GenericAnnotationCreateTool.prototype.mouseLeftDown.call(this, e);

  if (this.annotation) {

      this.annotation.X = this.annotation.X - this.annotation.Width/2;

      this.annotation.Y = this.annotation.Y - this.annotation.Height/2;

      // update the annotation appearance

      this.docViewer.getAnnotationManager().redrawAnnotation(this.annotation);

  }

}

TriangleCreateTool.prototype.mouseMove = function(e) {}

TriangleCreateTool.prototype.mouseLeftUp = function(e) {

  Tools.GenericAnnotationCreateTool.prototype.mouseLeftUp.call(this, e);

}

But this creates an annotation on mousedown.  I want behaviour like other tools - click on an existing annotation and that is selected, otherwise create a new one.

If I move the if (this.annotation) {} block into the beginning of mouseLeftUp(), then the annotation where the mouse is gets selected, but a new annotation is created as well.

How do I get the behaviour:

  If existing annotation, of any type, is clicked on, select that.

  Otherwise, create a new TriangleAnnotation.

Thanks

Donald

On Thursday, December 17, 2015 at 7:04:11 AM UTC+13, Matt Bojey wrote:

[Matt Parizeau]

Hi Donald,

You're right, you'll currently have to edit AnnotationEdit.js to make it work with a custom annotation. We can consider making it easier to modify this in a future version.

To get annotation selection to work like other tools you'll need to make a couple small modifications.

In your mouseLeftDown function you should check if there are any annotations under the mouse and if so you should unset the annotation:

TriangleCreateTool.prototype.mouseLeftDown = function(e) {
  Tools.GenericAnnotationCreateTool.prototype.mouseLeftDown.call(this, e);

  if (readerControl.docViewer.getAnnotationManager().getAnnotationByMouseEvent(e)) {
    this.annotation = null;
    return;
  }

  if (this.annotation) {
      this.annotation.X = this.annotation.X - this.annotation.Width/2;
      this.annotation.Y = this.annotation.Y - this.annotation.Height/2;
      // update the annotation appearance
      this.docViewer.getAnnotationManager().redrawAnnotation(this.annotation);
  }
}

Then for the mouseMove function you just shouldn't override it, or you can override like you did with mouseLeftUp, either way will have the same end behavior. This is because if you override mouseMove to do nothing with your tool then you won't be able to resize selected annotations while your tool is active.

Let me know if that works for you.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Donald Gordon]

Hi

I'm back at this again -- and rereading the documentation and wondering if there's a simpler way.

What I want to do is replace the default sticky note annotation -- I want to draw the sticky note myself to match the style used by our legacy application.  I note that AnnotationManager has a method disableDefaultStickyNotes(), and there is already a StickyCreateTool.

How would I go about doing this?  I've got code from my custom annotation to draw the sticky note, I know the dimensions, and as the note display includes text I'd need to redraw the sticky when the note data changes.  I'd just need to get StickyCreateTool to create and edit my notes, rather than the ones the system supplies.

I'd love to use your existing annotation code as a reference on how to do this, but it's all obfuscated...

Regards

Donald

[Matt Parizeau]

Hi Donald,

If you just want to draw sticky notes differently you could override the draw function on the StickyAnnotation. For example you could use the following code in a config file:

Annotations.StickyAnnotation.prototype.draw = function(ctx) {
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, 30, 30);
};

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Donald Gordon]

Thanks!  How could I change the default size of new StickyAnnotations?

[Matt Parizeau]

Unfortunately there isn't a straightforward way to modify it. What you could do is listen for newly created sticky annotations and set the width and height there. For example:

$(document).on('documentLoaded', function() {
  var annotManager = readerControl.docViewer.getAnnotationManager();
  annotManager.on('annotationChanged', function(e, annotations, action) {
    if (e.imported || action !== 'add') {
      return;
    }

    for (var i = 0; i < annotations.length; ++i) {
      var annotation = annotations[i];
      if (annotation instanceof Annotations.StickyAnnotation) {
        annotation.Width = 50;
        annotation.Height = 50;
      }
    }
  });
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.