Work with Annotations Programmatically

The API offers methods to perform create, read, update and delete operations on annotations. Other API methods available are for selection/de-selection of marks, obtaining selected annotations, re-ordering of annotation mark objects (within a z-order of a page), and loading and saving of annotations.

In this topic:

Create & Update Annotations
Create Text-Based Mark from Search Result
Read Annotations Properties
Select Annotations
Deselect Annotations
Reorder Annotations
Delete Annotations
Save Annotations
Load Annotations

Create & Update Annotations

When adding annotations programmatically using the addMark method to distant pages of a large document, or if you are not sure if your annotation object will straddle the page width and height boundaries, it is recommended that you use the requestPageAttributes method to obtain width and height of a page. This will help you to remain within the confines of the image rectangle when specifying width and height of the annotation’s dimensions (rectangle or start point and end point).

Example	Copy Code
var pageNumber = 1; var promise = viewer1.requestPageAttributes(1); promise.then( function(pageAttributes){ try{ //create stamp annotation on page 1 var stampMark1 = viewer1.addMark(1, PCCViewer.Mark.Type.StampAnnotation); //update the created rectangle mark using the property setters //use width and height obtained in the promise object to place the stamp annotation object // assume the width obtained was 612 and height 792. stampMark1.setRectangle({x: 250, y: 50, width : pageAttributes.width - 300, height: pageAttributes.height - 500}); //provide the label for the stamp mark stampMark1.setLabel("Reviewed"); //set the color to red stampMark1.setColor("#ff0000"); // … add more annotations on this page 1 …. var rectangleMark1 = viewer1.addMark(1, PCCViewer.Mark.Type.RectangleAnnotation); rectangleMark1.setRectangle(x: 250, y: 50, width : pageAttributes.width - 300, height: pageAttributes.height - 500); //set fillcolor to blue rectangleMark1.setFillColor("0000ff"); } catch(e){ alert("ERROR: " + e); } }, function(rejectedReason) { alert("Unable to add annotations because page attributes promise was rejected, error = " + rejectedReason); } );

Example

Copy Code

var pageNumber = 1;
var promise = viewer1.requestPageAttributes(1);
promise.then(
     function(pageAttributes){
        try{
            //create stamp annotation on page 1
             var stampMark1 = viewer1.addMark(1,  PCCViewer.Mark.Type.StampAnnotation);
             //update the created rectangle mark using the property setters
             //use width and height obtained in the promise object to place the stamp annotation object
             // assume the width obtained was 612 and height 792.
            stampMark1.setRectangle({x: 250, y: 50,  width :      
                  pageAttributes.width - 300, height: pageAttributes.height - 500});
            //provide the label for the stamp mark
            stampMark1.setLabel("Reviewed");
           //set the color to red
           stampMark1.setColor("#ff0000");
           // … add more annotations on this page 1 ….
          var rectangleMark1 = viewer1.addMark(1,  PCCViewer.Mark.Type.RectangleAnnotation);
          rectangleMark1.setRectangle(x: 250, y:  50,  width :      
                 pageAttributes.width - 300, height: pageAttributes.height - 500);
         //set fillcolor to blue
         rectangleMark1.setFillColor("0000ff");
        }
        catch(e){
              alert("ERROR: " + e);
        }
      },
      function(rejectedReason) {
             alert("Unable to add annotations because page attributes promise was rejected, error = " + 
                   rejectedReason);
     }
);

Create Text-Based Mark from Search Result

You can create a text-based mark from a search result by using addMarkFromSearchResult.

Read Annotations Properties

Property getters can be used to obtain current property values. It is not necessary to use requestPageAttributes method for these operations.

Example	Copy Code
var label = stampMark1.getLabel(); var rectangle = stampMark1.getRectangle();

Select Annotations

The following example shows how to select annotations:

Example	Copy Code
//get all marks var marks = getAllMarks(); //select annotations returned by the above getAllMarks() call (marks is an array) viewer1.selectMarks(marks);

The graphic below shows the previously created marks are selected after selectMarks call:

Deselect Annotations

The following example shows how to deselect annotations:

Example	Copy Code
//Get theselected marks var selectedMarks = viewer1.getSelectedMarks(); if(selectedMarks.length > 0 ) { //deselect all the marks in all the pages viewer1.deselectMarks(); //programmatically check if all marks were deselected var checkSelectedMarks = viewer1.getSelectedMarks(); if(checkSelectedMarks.length === 0 ) { alert("All annotations marks were deselected"); }

Example

Copy Code

//Get theselected marks
var selectedMarks = viewer1.getSelectedMarks();
if(selectedMarks.length > 0 ) {
    //deselect all the marks in all the pages
    viewer1.deselectMarks(); 
   //programmatically check if all marks were deselected
    var checkSelectedMarks = viewer1.getSelectedMarks();
   if(checkSelectedMarks.length === 0 ) {
         alert("All annotations marks were deselected");
  }

Reorder Annotations

Reordering of marks applies to all marks on a single page. Reordering does not apply to Highlight annotations because these type of marks need to remain attached to the Text on the page.

Example	Copy Code
//use moveMarkToFront to bring mark to the front viewer1.moveMarkToFront(rectangleMark1); //use moveMarkToBack to the back viewer1.moveMarkToFront(stampMark1); //use moveMarkForward to bring the mark one slot forward viewer1.moveMarkForward(rectangleMark1); //use moveMarkBackward to move the mark one slot backward viewer1.moveMarkBackward(rectangleMark1);

Example

Copy Code

//use moveMarkToFront to bring mark to the front
viewer1.moveMarkToFront(rectangleMark1);

//use moveMarkToBack to the back
viewer1.moveMarkToFront(stampMark1);

//use moveMarkForward to bring the mark one slot forward
viewer1.moveMarkForward(rectangleMark1);

//use moveMarkBackward to move the mark one slot backward
viewer1.moveMarkBackward(rectangleMark1);

Delete Annotations

The following example shows how to delete annotations:

Example	Copy Code
//In this example we will delete all the marks that are selected //Get theselected marks var selectedMarks = viewer1.getSelectedMarks(); //delete if there were any selected if(selectedMarks.length > 0 ) { //delete all the selected marks viewer1.deleteMarks(selectedMarks); }

Example

Copy Code

//In this example we will delete all the marks that are selected
//Get theselected marks
var selectedMarks = viewer1.getSelectedMarks();
//delete if there were any selected
if(selectedMarks.length > 0 ) {
    //delete all the selected marks
    viewer1.deleteMarks(selectedMarks);
}

Save Annotations

You can save annotations created in the currently displayed document using saveMarkupLayer.

Load Annotations

Refer to the topic, Load Annotations from the Web Tier.