Move most rendering logic to src/display/annotation_layer.js

src/display/annotation_layer.js

@@ -42,12 +42,28 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
     style.fontFamily = fontFamily + fallbackName;
   }
 
-  function getContainer(data) {
+  function getContainer(data, page, viewport) {
     var container = document.createElement('section');
-    var cstyle = container.style;
     var width = data.rect[2] - data.rect[0];
     var height = data.rect[3] - data.rect[1];
 
+    // ID
+    container.setAttribute('data-annotation-id', data.id);
+
+    // Normalize rectangle
+    data.rect = Util.normalizeRect([
+      data.rect[0],
+      page.view[3] - data.rect[1] + page.view[1],
+      data.rect[2],
+      page.view[3] - data.rect[3] + page.view[1]
+    ]);
+
+    // Transform
+    CustomStyle.setProp('transform', container,
+                        'matrix(' + viewport.transform.join(',') + ')');
+    CustomStyle.setProp('transformOrigin', container,
+                        -data.rect[0] + 'px ' + -data.rect[1] + 'px');
+
     // Border
     if (data.borderStyle.width > 0) {
       // Border width
@@ -106,12 +122,18 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
       }
     }
 
-    cstyle.width = width + 'px';
+    // Position
-    cstyle.height = height + 'px';
+    container.style.left = data.rect[0] + 'px';
+    container.style.top = data.rect[1] + 'px';
+
+    // Size
+    container.style.width = width + 'px';
+    container.style.height = height + 'px';
+
     return container;
   }
 
-  function getHtmlElementForTextWidgetAnnotation(item, commonObjs) {
+  function getHtmlElementForTextWidgetAnnotation(item, page) {
     var element = document.createElement('div');
     var width = item.rect[2] - item.rect[0];
     var height = item.rect[3] - item.rect[1];
@@ -127,7 +149,7 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
     content.style.display = 'table-cell';
 
     var fontObj = item.fontRefName ?
-      commonObjs.getData(item.fontRefName) : null;
+      page.commonObjs.getData(item.fontRefName) : null;
     setTextStyles(content, item, fontObj);
 
     element.appendChild(content);
@@ -135,7 +157,7 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
     return element;
   }
 
-  function getHtmlElementForTextAnnotation(item) {
+  function getHtmlElementForTextAnnotation(item, page, viewport) {
     var rect = item.rect;
 
     // sanity check because of OOo-generated PDFs
@@ -146,7 +168,7 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
       rect[2] = rect[0] + (rect[3] - rect[1]); // make it square
     }
 
-    var container = getContainer(item);
+    var container = getContainer(item, page, viewport);
     container.className = 'annotText';
 
     var image  = document.createElement('img');
@@ -252,8 +274,8 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
     return container;
   }
 
-  function getHtmlElementForLinkAnnotation(item) {
+  function getHtmlElementForLinkAnnotation(item, page, viewport) {
-    var container = getContainer(item);
+    var container = getContainer(item, page, viewport);
     container.className = 'annotLink';
 
     var link = document.createElement('a');
@@ -268,14 +290,14 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
     return container;
   }
 
-  function getHtmlElement(data, objs) {
+  function getHtmlElement(data, page, viewport) {
     switch (data.annotationType) {
       case AnnotationType.WIDGET:
-        return getHtmlElementForTextWidgetAnnotation(data, objs);
+        return getHtmlElementForTextWidgetAnnotation(data, page);
       case AnnotationType.TEXT:
-        return getHtmlElementForTextAnnotation(data);
+        return getHtmlElementForTextAnnotation(data, page, viewport);
       case AnnotationType.LINK:
-        return getHtmlElementForLinkAnnotation(data);
+        return getHtmlElementForLinkAnnotation(data, page, viewport);
       default:
         throw new Error('Unsupported annotationType: ' + data.annotationType);
     }

web/annotations_layer_builder.css

@@ -13,6 +13,10 @@
  * limitations under the License.
  */
 
+.annotationLayer section {
+  position: absolute;
+}
+
 .annotationLayer .annotLink > a:hover {
   opacity: 0.2;
   background: #ff0;

web/annotations_layer_builder.js

@@ -40,6 +40,7 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
 
     this.div = null;
   }
+
   AnnotationsLayerBuilder.prototype =
       /** @lends AnnotationsLayerBuilder.prototype */ {
 
@@ -81,8 +82,6 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
       pdfPage.getAnnotations(getAnnotationsParams).then(
           function (annotationsData) {
         viewport = viewport.clone({ dontFlip: true });
-        var transform = viewport.transform;
-        var transformStr = 'matrix(' + transform.join(',') + ')';
         var data, element, i, ii;
 
         if (self.div) {
@@ -91,9 +90,10 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
           for (i = 0, ii = annotationsData.length; i < ii; i++) {
             data = annotationsData[i];
             element = self.div.querySelector(
-                '[data-annotation-id="' + data.id + '"]');
+              '[data-annotation-id="' + data.id + '"]');
             if (element) {
-              CustomStyle.setProp('transform', element, transformStr);
+              CustomStyle.setProp('transform', element,
+                'matrix(' + viewport.transform.join(',') + ')');
             }
           }
           // See PDFPageView.reset()
@@ -105,29 +105,12 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
               continue;
             }
 
-            element = PDFJS.AnnotationLayer.getHtmlElement(data,
+            element = PDFJS.AnnotationLayer.getHtmlElement(data, pdfPage,
-              pdfPage.commonObjs);
+                                                           viewport);
-            element.setAttribute('data-annotation-id', data.id);
             if (typeof mozL10n !== 'undefined') {
               mozL10n.translate(element);
             }
 
-            var rect = data.rect;
-            var view = pdfPage.view;
-            rect = PDFJS.Util.normalizeRect([
-              rect[0],
-                view[3] - rect[1] + view[1],
-              rect[2],
-                view[3] - rect[3] + view[1]
-            ]);
-            element.style.left = rect[0] + 'px';
-            element.style.top = rect[1] + 'px';
-            element.style.position = 'absolute';
-
-            CustomStyle.setProp('transform', element, transformStr);
-            var transformOriginStr = -rect[0] + 'px ' + -rect[1] + 'px';
-            CustomStyle.setProp('transformOrigin', element, transformOriginStr);
-
             if (data.subtype === 'Link' && !data.url) {
               var link = element.getElementsByTagName('a')[0];
               if (link) {
@@ -159,6 +142,7 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
       this.div.setAttribute('hidden', 'true');
     }
   };
+
   return AnnotationsLayerBuilder;
 })();