Implement annotation layer rendering and updating in src/display/annotation_layer.js

src/display/annotation_layer.js

@@ -324,8 +324,34 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
     }
   }
 
+  function render(viewport, div, annotations, page, linkService) {
+    for (var i = 0, ii = annotations.length; i < ii; i++) {
+      var data = annotations[i];
+      if (!data || !data.hasHtml) {
+        continue;
+      }
+
+      var element = getHtmlElement(data, page, viewport, linkService);
+      div.appendChild(element);
+    }
+  }
+
+  function update(viewport, div, annotations) {
+    for (var i = 0, ii = annotations.length; i < ii; i++) {
+      var data = annotations[i];
+      var element = div.querySelector(
+        '[data-annotation-id="' + data.id + '"]');
+      if (element) {
+        CustomStyle.setProp('transform', element,
+          'matrix(' + viewport.transform.join(',') + ')');
+      }
+    }
+    div.removeAttribute('hidden');
+  }
+
   return {
-    getHtmlElement: getHtmlElement
+    render: render,
+    update: update
   };
 })();
 

web/annotations_layer_builder.js

@@ -27,8 +27,6 @@
  * @class
  */
 var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
-  var CustomStyle = PDFJS.CustomStyle;
-
   /**
    * @param {AnnotationsLayerBuilderOptions} options
    * @constructs AnnotationsLayerBuilder
@@ -56,22 +54,14 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
 
       this.pdfPage.getAnnotations(parameters).then(function (annotations) {
         viewport = viewport.clone({ dontFlip: true });
-        var data, element, i, ii;
 
         if (self.div) {
           // If an annotationLayer already exists, refresh its children's
           // transformation matrices.
-          for (i = 0, ii = annotations.length; i < ii; i++) {
+          PDFJS.AnnotationLayer.update(viewport, self.div, annotations);
-            data = annotations[i];
-            element = self.div.querySelector(
-              '[data-annotation-id="' + data.id + '"]');
-            if (element) {
-              CustomStyle.setProp('transform', element,
-                'matrix(' + viewport.transform.join(',') + ')');
-            }
-          }
-          self.div.removeAttribute('hidden');
         } else {
+          // Create an annotation layer div and render the annotations
+          // if there is at least one annotation.
           if (annotations.length === 0) {
             return;
           }
@@ -80,19 +70,10 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
           self.div.className = 'annotationLayer';
           self.pageDiv.appendChild(self.div);
 
-          for (i = 0, ii = annotations.length; i < ii; i++) {
+          PDFJS.AnnotationLayer.render(viewport, self.div, annotations,
-            data = annotations[i];
+                                       self.pdfPage, self.linkService);
-            if (!data || !data.hasHtml) {
+          if (typeof mozL10n !== 'undefined') {
-              continue;
+            mozL10n.translate(self.div);
-            }
-
-            element = PDFJS.AnnotationLayer.getHtmlElement(data, self.pdfPage,
-                                                           viewport,
-                                                           self.linkService);
-            if (typeof mozL10n !== 'undefined') {
-              mozL10n.translate(element);
-            }
-            self.div.appendChild(element);
           }
         }
       });