How do I add clickable signature areas to a document?

[Justin Jung]

Q: How do I add clickable signature areas to a document?

A: You can add the following to config.js

$(document).on('documentLoaded', function() {

  // hide signature annotation tool button

  $('[data-toolmode="AnnotationCreateSignature"]').hide();

  // signature locations

  var rects = [

    { rect: new Annotations.Rect(0, 0, 200, 100), pageIndex: 0 },

    { rect: new Annotations.Rect(200, 200, 400, 300), pageIndex: 0 },

    { rect: new Annotations.Rect(400, 400, 600, 500), pageIndex: 0 },

    { rect: new Annotations.Rect(200, 200, 400, 300), pageIndex: 1 },

    { rect: new Annotations.Rect(400, 400, 600, 500), pageIndex: 1 },

  ];

  var annotManager = readerControl.docViewer.getAnnotationManager();

  var selectedRectData;

  // draw rectangle annotations to indicate the signature locations

  rects.forEach(function(data) {

    var rectAnnot = new Annotations.RectangleAnnotation();

    rectAnnot.PageNumber = data.pageIndex + 1;

    rectAnnot.setRect(data.rect);

    annotManager.addAnnotation(rectAnnot);

    annotManager.redrawAnnotation(rectAnnot);

  });

  readerControl.docViewer.on('mouseLeftDown', function(e, originalEvent) {

    var displayMode = readerControl.docViewer.getDisplayModeManager().getDisplayMode();

    var point = {

      x: originalEvent.pageX + $('#DocumentViewer').scrollLeft(),

      y: originalEvent.pageY + $('#DocumentViewer').scrollTop(),

    };

    var pageIndex = displayMode.getSelectedPages(point, point).first;

    var pageCoordinate = displayMode.windowToPage(point, pageIndex);

    for (var i=0; i<rects.length; i++) {

      var rectData = rects[i];

      var rect = rectData.rect;

      // if we are clicking on a signature box

      if (rectData.pageIndex === pageIndex && pageCoordinate.x > rect.x1 && pageCoordinate.x < rect.x2 && pageCoordinate.y > rect.y1 && pageCoordinate.y < rect.y2) {

        readerControl.setToolMode('AnnotationCreateSignature');

        var signatureTool = readerControl.docViewer.getToolMode();

        signatureTool.mouseLeftDown(originalEvent);

        signatureTool.mouseLeftUp(originalEvent);

        selectedRectData = rectData;

        break;

      }

    }

  });

  $('#signatureDialog').on('dialogclose', function( event, ui ) {

    readerControl.setToolMode('AnnotationEdit');

  });

  var signatureTool = readerControl.docViewer.getTool('AnnotationCreateSignature');

  signatureTool.on('annotationAdded', function(e, annotation) {

    var annotRect = annotation.getRect();

    var annotWidth = annotRect.x2 - annotRect.x1;

    var annotHeight = annotRect.y2 - annotRect.y1;

    var selectedRect = selectedRectData.rect;

    if (selectedRectData.annotation) {

      annotManager.deleteAnnotation(selectedRectData.annotation);

    }

    selectedRectData.annotation = annotation;

    // fit the signature to the signature box

    var boxWidth = selectedRect.x2 - selectedRect.x1;

    var boxHeight = selectedRect.y2 - selectedRect.y1;

    var hRatio = annotWidth / boxWidth;

    var vRatio = annotHeight / boxHeight;

    var ratio = Math.max(hRatio, vRatio);

    var newWidth = annotWidth / ratio;

    var newHeight = annotHeight / ratio;

    var x1 = selectedRect.x1 + ((boxWidth - newWidth) / 2);

    var y1 = selectedRect.y1 + ((boxHeight - newHeight) / 2);

    var x2 = x1 + newWidth;

    var y2 = y1 + newHeight;

    annotation.resize(new Annotations.Rect(x1, y1, x2, y2));

    annotManager.redrawAnnotation(annotation);

  });

});