Creating redactions

Redactions can be created using the WebViewer UI or programmatically.

To create a new redaction in WebViewer, click on the redaction tool icon to enter redaction mode. Next click and drag on the document to create a new redaction. Note that when creating a redaction on top of text, multiple rectangles are created, similar to when highlighting text.

Redactions can be added to a document similarly to other annotations, by adding them to the AnnotationManager and redrawing. Redaction annotations have two differences compared to other annotation types.

1. setRect() should be used instead of setting X,Y,Height, or Width directly
2. The redaction annotation constructor can take an options object that can be used to configure the annotation. There are a number of properties that can be set using the constructor:
   • StrokeColor: This is the border color of the redaction before it been applied. Defaults to red.
   • FillColor: This is the fill color of the redaction after it been applied. Defaults to black.
   • PageNumber: The page that the redaction should appear on.
   • Rect: An Annotation.Rect object of the redaction area.
   • Quads: An array of Annotation.Quad objects of to specify multiple redaction areas. If Quads are provided then Rect is not needed.

WebViewer(...)
  .then(instance => {
    const {
      documentViewer,
      annotationManager,
      Annotations
    } = instance.Core;

    documentViewer.addEventListener('documentLoaded', () => {
      const redactAnnot1 = new Annotations.RedactionAnnotation({
          PageNumber: 1,
          Rect: new Annotations.Rect(100, 100, 300, 200) // Rect are in the form x1,y1,x2,y2
      });

      const redactAnnot2 = new Annotations.RedactionAnnotation({
          PageNumber: 1,
          StrokeColor: new Annotations.Color(0, 255, 0),
          FillColor: new Annotations.Color(0, 0, 255),
          Quads: [
              // Quads are in the form x1,y1,x2,y2,x3,y3,x4,y4
              new Annotations.Quad(100, 290, 300, 210, 300, 210, 100, 290),
              new Annotations.Quad(100, 390, 300, 310, 300, 310, 100, 390)
          ]
      });

      // can still create redactions without options and set them afterward
      const redactAnnot3 = new Annotations.RedactionAnnotation();
      redactAnnot3.PageNumber = 1;
      // using 'setRect' instead of setting 'X','Y','Width', or 'Height' directly
      redactAnnot3.setRect(new Annotations.Rect(100, 100, 300, 200));
      // set border color
      redactAnnot3.StrokeColor = new Annotations.Color(0, 255, 0);
      // set redacted color
      redactAnnot3.FillColor = new Annotations.Color(0, 0, 255);

      const redactAnnotations = [redactAnnot1, redactAnnot2, redactAnnot3];

      annotationManager.addAnnotations(redactAnnotations);

      // need to draw the annotations otherwise they won't show up until the page is refreshed
      annotationManager.drawAnnotationsFromList(redactAnnotations);
    });
  });