Merge pull request #6714 from timvandermeij/annotation-web-to-src

[api-minor] Move annotation DOM manipulation logic to src/display/annotation_layer.js

examples/acroforms/index.html

@@ -12,7 +12,7 @@
   <script src="../../src/display/pattern_helper.js"></script>
   <script src="../../src/display/font_loader.js"></script>
   <script src="../../src/display/dom_utils.js"></script>
-  <script src="../../src/display/annotation_helper.js"></script>
+  <script src="../../src/display/annotation_layer.js"></script>
   <script src="../../src/display/text_layer.js"></script>
 
   <script>

examples/helloworld/index.html

@@ -12,7 +12,7 @@
   <script src="../../src/display/pattern_helper.js"></script>
   <script src="../../src/display/font_loader.js"></script>
   <script src="../../src/display/dom_utils.js"></script>
-  <script src="../../src/display/annotation_helper.js"></script>
+  <script src="../../src/display/annotation_layer.js"></script>
   <script src="../../src/display/text_layer.js"></script>
 
   <script>

make.js

@@ -531,7 +531,7 @@ target.bundle = function(args) {
     'display/pattern_helper.js',
     'display/font_loader.js',
     'display/dom_utils.js',
-    'display/annotation_helper.js',
+    'display/annotation_layer.js',
     'display/text_layer.js',
     'display/svg.js'
   ]);

src/display/annotation_layer.js

@@ -19,10 +19,9 @@
 
 var ANNOT_MIN_SIZE = 10; // px
 
-var AnnotationUtils = (function AnnotationUtilsClosure() {
+var AnnotationLayer = (function AnnotationLayerClosure() {
   // TODO(mack): This dupes some of the logic in CanvasGraphics.setFont()
   function setTextStyles(element, item, fontObj) {
-
     var style = element.style;
     style.fontSize = item.fontSize + 'px';
     style.direction = item.fontDirection < 0 ? 'rtl': 'ltr';
@@ -43,34 +42,43 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
     style.fontFamily = fontFamily + fallbackName;
   }
 
-  function initContainer(item) {
+  function getContainer(data, page, viewport) {
     var container = document.createElement('section');
-    var cstyle = container.style;
+    var width = data.rect[2] - data.rect[0];
-    var width = item.rect[2] - item.rect[0];
+    var height = data.rect[3] - data.rect[1];
-    var height = item.rect[3] - item.rect[1];
 
-    // Border
+    container.setAttribute('data-annotation-id', data.id);
-    if (item.borderStyle.width > 0) {
+
-      // Border width
+    data.rect = Util.normalizeRect([
-      container.style.borderWidth = item.borderStyle.width + 'px';
+      data.rect[0],
-      if (item.borderStyle.style !== AnnotationBorderStyleType.UNDERLINE) {
+      page.view[3] - data.rect[1] + page.view[1],
+      data.rect[2],
+      page.view[3] - data.rect[3] + page.view[1]
+    ]);
+
+    CustomStyle.setProp('transform', container,
+                        'matrix(' + viewport.transform.join(',') + ')');
+    CustomStyle.setProp('transformOrigin', container,
+                        -data.rect[0] + 'px ' + -data.rect[1] + 'px');
+
+    if (data.borderStyle.width > 0) {
+      container.style.borderWidth = data.borderStyle.width + 'px';
+      if (data.borderStyle.style !== AnnotationBorderStyleType.UNDERLINE) {
         // Underline styles only have a bottom border, so we do not need
         // to adjust for all borders. This yields a similar result as
         // Adobe Acrobat/Reader.
-        width = width - 2 * item.borderStyle.width;
+        width = width - 2 * data.borderStyle.width;
-        height = height - 2 * item.borderStyle.width;
+        height = height - 2 * data.borderStyle.width;
       }
 
-      // Horizontal and vertical border radius
+      var horizontalRadius = data.borderStyle.horizontalCornerRadius;
-      var horizontalRadius = item.borderStyle.horizontalCornerRadius;
+      var verticalRadius = data.borderStyle.verticalCornerRadius;
-      var verticalRadius = item.borderStyle.verticalCornerRadius;
       if (horizontalRadius > 0 || verticalRadius > 0) {
         var radius = horizontalRadius + 'px / ' + verticalRadius + 'px';
         CustomStyle.setProp('borderRadius', container, radius);
       }
 
-      // Border style
+      switch (data.borderStyle.style) {
-      switch (item.borderStyle.style) {
         case AnnotationBorderStyleType.SOLID:
           container.style.borderStyle = 'solid';
           break;
@@ -95,24 +103,27 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
           break;
       }
 
-      // Border color
+      if (data.color) {
-      if (item.color) {
         container.style.borderColor =
-          Util.makeCssRgb(item.color[0] | 0,
+          Util.makeCssRgb(data.color[0] | 0,
-                          item.color[1] | 0,
+                          data.color[1] | 0,
-                          item.color[2] | 0);
+                          data.color[2] | 0);
       } else {
         // Transparent (invisible) border, so do not draw it at all.
         container.style.borderWidth = 0;
       }
     }
 
-    cstyle.width = width + 'px';
+    container.style.left = data.rect[0] + 'px';
-    cstyle.height = height + 'px';
+    container.style.top = data.rect[1] + 'px';
+
+    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];
@@ -128,7 +139,7 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
     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);
@@ -136,7 +147,7 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
     return element;
   }
 
-  function getHtmlElementForTextAnnotation(item) {
+  function getHtmlElementForTextAnnotation(item, page, viewport) {
     var rect = item.rect;
 
     // sanity check because of OOo-generated PDFs
@@ -147,7 +158,7 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
       rect[2] = rect[0] + (rect[3] - rect[1]); // make it square
     }
 
-    var container = initContainer(item);
+    var container = getContainer(item, page, viewport);
     container.className = 'annotText';
 
     var image  = document.createElement('img');
@@ -253,8 +264,30 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
     return container;
   }
 
-  function getHtmlElementForLinkAnnotation(item) {
+  function getHtmlElementForLinkAnnotation(item, page, viewport, linkService) {
-    var container = initContainer(item);
+    function bindLink(link, dest) {
+      link.href = linkService.getDestinationHash(dest);
+      link.onclick = function annotationsLayerBuilderLinksOnclick() {
+        if (dest) {
+          linkService.navigateTo(dest);
+        }
+        return false;
+      };
+      if (dest) {
+        link.className = 'internalLink';
+      }
+    }
+
+    function bindNamedAction(link, action) {
+      link.href = linkService.getAnchorUrl('');
+      link.onclick = function annotationsLayerBuilderNamedActionOnClick() {
+        linkService.executeNamedAction(action);
+        return false;
+      };
+      link.className = 'internalLink';
+    }
+
+    var container = getContainer(item, page, viewport);
     container.className = 'annotLink';
 
     var link = document.createElement('a');
@@ -264,26 +297,62 @@ var AnnotationUtils = (function AnnotationUtilsClosure() {
       link.target = LinkTargetStringMap[PDFJS.externalLinkTarget];
     }
 
+    if (!item.url) {
+      if (item.action) {
+        bindNamedAction(link, item.action);
+      } else {
+        bindLink(link, ('dest' in item) ? item.dest : null);
+      }
+    }
+
     container.appendChild(link);
 
     return container;
   }
 
-  function getHtmlElement(data, objs) {
+  function getHtmlElement(data, page, viewport, linkService) {
     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,
+                                               linkService);
       default:
         throw new Error('Unsupported annotationType: ' + data.annotationType);
     }
   }
 
+  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
   };
 })();
-PDFJS.AnnotationUtils = AnnotationUtils;
+
+PDFJS.AnnotationLayer = AnnotationLayer;

test/font/font_test.html

@@ -36,7 +36,7 @@
   <script src="../../src/core/parser.js"></script>
   <script src="../../src/core/ps_parser.js"></script>
   <script src="../../src/display/pattern_helper.js"></script>
-  <script src="../../src/display/annotation_helper.js"></script>
+  <script src="../../src/display/annotation_layer.js"></script>
   <script src="../../src/display/text_layer.js"></script>
   <script src="../../src/core/stream.js"></script>
   <script src="../../src/core/worker.js"></script>

test/test_slave.html

@@ -26,7 +26,7 @@ limitations under the License.
     <script src="../src/display/pattern_helper.js"></script>
     <script src="../src/display/font_loader.js"></script>
     <script src="../src/display/dom_utils.js"></script>
-    <script src="../src/display/annotation_helper.js"></script>
+    <script src="../src/display/annotation_layer.js"></script>
     <script src="../src/display/text_layer.js"></script>
     <script src="driver.js"></script>
   </head>

test/unit/unit_test.html

@@ -37,7 +37,7 @@
   <script src="../../src/display/pattern_helper.js"></script>
   <script src="../../src/display/font_loader.js"></script>
   <script src="../../src/display/dom_utils.js"></script>
-  <script src="../../src/display/annotation_helper.js"></script>
+  <script src="../../src/display/annotation_layer.js"></script>
   <script src="../../src/display/text_layer.js"></script>
   <script src="../../src/core/stream.js"></script>
   <script src="../../src/core/worker.js"></script>

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

@@ -27,8 +27,6 @@
  * @class
  */
 var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
-  var CustomStyle = PDFJS.CustomStyle;
-
   /**
    * @param {AnnotationsLayerBuilderOptions} options
    * @constructs AnnotationsLayerBuilder
@@ -40,6 +38,7 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
 
     this.div = null;
   }
+
   AnnotationsLayerBuilder.prototype =
       /** @lends AnnotationsLayerBuilder.prototype */ {
 
@@ -47,118 +46,47 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
      * @param {PageViewport} viewport
      * @param {string} intent (default value is 'display')
      */
-    setupAnnotations:
+    render: function AnnotationsLayerBuilder_render(viewport, intent) {
-        function AnnotationsLayerBuilder_setupAnnotations(viewport, intent) {
-      function bindLink(link, dest) {
-        link.href = linkService.getDestinationHash(dest);
-        link.onclick = function annotationsLayerBuilderLinksOnclick() {
-          if (dest) {
-            linkService.navigateTo(dest);
-          }
-          return false;
-        };
-        if (dest) {
-          link.className = 'internalLink';
-        }
-      }
-
-      function bindNamedAction(link, action) {
-        link.href = linkService.getAnchorUrl('');
-        link.onclick = function annotationsLayerBuilderNamedActionOnClick() {
-          linkService.executeNamedAction(action);
-          return false;
-        };
-        link.className = 'internalLink';
-      }
-
-      var linkService = this.linkService;
-      var pdfPage = this.pdfPage;
       var self = this;
-      var getAnnotationsParams = {
+      var parameters = {
         intent: (intent === undefined ? 'display' : intent),
       };
 
-      pdfPage.getAnnotations(getAnnotationsParams).then(
+      this.pdfPage.getAnnotations(parameters).then(function (annotations) {
-          function (annotationsData) {
         viewport = viewport.clone({ dontFlip: true });
-        var transform = viewport.transform;
-        var transformStr = 'matrix(' + transform.join(',') + ')';
-        var data, element, i, ii;
 
         if (self.div) {
           // If an annotationLayer already exists, refresh its children's
-          // transformation matrices
+          // transformation matrices.
-          for (i = 0, ii = annotationsData.length; i < ii; i++) {
+          PDFJS.AnnotationLayer.update(viewport, self.div, annotations);
-            data = annotationsData[i];
-            element = self.div.querySelector(
-                '[data-annotation-id="' + data.id + '"]');
-            if (element) {
-              CustomStyle.setProp('transform', element, transformStr);
-            }
-          }
-          // See PDFPageView.reset()
-          self.div.removeAttribute('hidden');
         } else {
-          for (i = 0, ii = annotationsData.length; i < ii; i++) {
+          // Create an annotation layer div and render the annotations
-            data = annotationsData[i];
+          // if there is at least one annotation.
-            if (!data || !data.hasHtml) {
+          if (annotations.length === 0) {
-              continue;
+            return;
-            }
+          }
 
-            element = PDFJS.AnnotationUtils.getHtmlElement(data,
+          self.div = document.createElement('div');
-              pdfPage.commonObjs);
+          self.div.className = 'annotationLayer';
-            element.setAttribute('data-annotation-id', data.id);
+          self.pageDiv.appendChild(self.div);
-            if (typeof mozL10n !== 'undefined') {
-              mozL10n.translate(element);
-            }
 
-            var rect = data.rect;
+          PDFJS.AnnotationLayer.render(viewport, self.div, annotations,
-            var view = pdfPage.view;
+                                       self.pdfPage, self.linkService);
-            rect = PDFJS.Util.normalizeRect([
+          if (typeof mozL10n !== 'undefined') {
-              rect[0],
+            mozL10n.translate(self.div);
-                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) {
-                if (data.action) {
-                  bindNamedAction(link, data.action);
-                } else {
-                  bindLink(link, ('dest' in data) ? data.dest : null);
-                }
-              }
-            }
-
-            if (!self.div) {
-              var annotationLayerDiv = document.createElement('div');
-              annotationLayerDiv.className = 'annotationLayer';
-              self.pageDiv.appendChild(annotationLayerDiv);
-              self.div = annotationLayerDiv;
-            }
-
-            self.div.appendChild(element);
           }
         }
       });
     },
 
-    hide: function () {
+    hide: function AnnotationsLayerBuilder_hide() {
       if (!this.div) {
         return;
       }
       this.div.setAttribute('hidden', 'true');
     }
   };
+
   return AnnotationsLayerBuilder;
 })();
 

web/pdf_page_view.js

@@ -275,7 +275,7 @@ var PDFPageView = (function PDFPageViewClosure() {
       }
 
       if (redrawAnnotations && this.annotationLayer) {
-        this.annotationLayer.setupAnnotations(this.viewport, 'display');
+        this.annotationLayer.render(this.viewport, 'display');
       }
     },
 
@@ -507,7 +507,7 @@ var PDFPageView = (function PDFPageViewClosure() {
           this.annotationLayer = this.annotationsLayerFactory.
             createAnnotationsLayerBuilder(div, this.pdfPage);
         }
-        this.annotationLayer.setupAnnotations(this.viewport, 'display');
+        this.annotationLayer.render(this.viewport, 'display');
       }
       div.setAttribute('data-loaded', true);
 

web/viewer.html

@@ -61,7 +61,7 @@ See https://github.com/adobe-type-tools/cmap-resources
     <script src="../src/display/pattern_helper.js"></script>
     <script src="../src/display/font_loader.js"></script>
     <script src="../src/display/dom_utils.js"></script>
-    <script src="../src/display/annotation_helper.js"></script>
+    <script src="../src/display/annotation_layer.js"></script>
     <script src="../src/display/text_layer.js"></script>
     <script>PDFJS.workerSrc = '../src/worker_loader.js';</script>
 <!--#endif-->