Merge pull request #6770 from timvandermeij/annotation-display-classes

Refactor annotation display layer code to use classes

src/display/annotation_layer.js

@@ -38,30 +38,68 @@ var CustomStyle = displayDOMUtils.CustomStyle;
 
 var ANNOT_MIN_SIZE = 10; // px
 
-var AnnotationLayer = (function AnnotationLayerClosure() {
+/**
-  // TODO(mack): This dupes some of the logic in CanvasGraphics.setFont()
+ * @typedef {Object} AnnotationElementParameters
-  function setTextStyles(element, item, fontObj) {
+ * @property {Object} data
-    var style = element.style;
+ * @property {PDFPage} page
-    style.fontSize = item.fontSize + 'px';
+ * @property {PageViewport} viewport
-    style.direction = item.fontDirection < 0 ? 'rtl': 'ltr';
+ * @property {IPDFLinkService} linkService
+ */
 
-    if (!fontObj) {
+/**
-      return;
+ * @class
+ * @alias AnnotationElementFactory
+ */
+function AnnotationElementFactory() {}
+AnnotationElementFactory.prototype =
+    /** @lends AnnotationElementFactory.prototype */ {
+  /**
+   * @param {AnnotationElementParameters} parameters
+   * @returns {AnnotationElement}
+   */
+  create: function AnnotationElementFactory_create(parameters) {
+    var subtype = parameters.data.annotationType;
+
+    switch (subtype) {
+      case AnnotationType.LINK:
+        return new LinkAnnotationElement(parameters);
+
+      case AnnotationType.TEXT:
+        return new TextAnnotationElement(parameters);
+
+      case AnnotationType.WIDGET:
+        return new WidgetAnnotationElement(parameters);
+
+      default:
+        throw new Error('Unimplemented annotation type "' + subtype + '"');
+    }
+  }
+};
+
+/**
+ * @class
+ * @alias AnnotationElement
+ */
+var AnnotationElement = (function AnnotationElementClosure() {
+  function AnnotationElement(parameters) {
+    this.data = parameters.data;
+    this.page = parameters.page;
+    this.viewport = parameters.viewport;
+    this.linkService = parameters.linkService;
+
+    this.container = this._createContainer();
   }
 
-    style.fontWeight = fontObj.black ?
+  AnnotationElement.prototype = /** @lends AnnotationElement.prototype */ {
-      (fontObj.bold ? 'bolder' : 'bold') :
+    /**
-      (fontObj.bold ? 'bold' : 'normal');
+     * Create an empty container for the annotation's HTML element.
-    style.fontStyle = fontObj.italic ? 'italic' : 'normal';
+     *
-
+     * @private
-    var fontName = fontObj.loadedName;
+     * @memberof AnnotationElement
-    var fontFamily = fontName ? '"' + fontName + '", ' : '';
+     * @returns {HTMLSectionElement}
-    // Use a reasonable default font if the font doesn't specify a fallback
+     */
-    var fallbackName = fontObj.fallbackName || 'Helvetica, sans-serif';
+    _createContainer: function AnnotationElement_createContainer() {
-    style.fontFamily = fontFamily + fallbackName;
+      var data = this.data, page = this.page, viewport = this.viewport;
-  }
-
-  function getContainer(data, page, viewport) {
       var container = document.createElement('section');
       var width = data.rect[2] - data.rect[0];
       var height = data.rect[3] - data.rect[1];
@@ -140,31 +178,136 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
       container.style.height = height + 'px';
 
       return container;
+    },
+
+    /**
+     * Render the annotation's HTML element in the empty container.
+     *
+     * @public
+     * @memberof AnnotationElement
+     */
+    render: function AnnotationElement_render() {
+      throw new Error('Abstract method AnnotationElement.render called');
+    }
+  };
+
+  return AnnotationElement;
+})();
+
+/**
+ * @class
+ * @alias LinkAnnotationElement
+ */
+var LinkAnnotationElement = (function LinkAnnotationElementClosure() {
+  function LinkAnnotationElement(parameters) {
+    AnnotationElement.call(this, parameters);
   }
 
-  function getHtmlElementForTextWidgetAnnotation(item, page, viewport) {
+  Util.inherit(LinkAnnotationElement, AnnotationElement, {
-    var container = getContainer(item, page, viewport);
+    /**
+     * Render the link annotation's HTML element in the empty container.
+     *
+     * @public
+     * @memberof LinkAnnotationElement
+     * @returns {HTMLSectionElement}
+     */
+    render: function LinkAnnotationElement_render() {
+      this.container.className = 'annotLink';
 
-    var content = document.createElement('div');
+      var link = document.createElement('a');
-    content.textContent = item.fieldValue;
+      link.href = link.title = this.data.url || '';
-    var textAlignment = item.textAlignment;
-    content.style.textAlign = ['left', 'center', 'right'][textAlignment];
-    content.style.verticalAlign = 'middle';
-    content.style.display = 'table-cell';
 
-    var fontObj = item.fontRefName ?
+      if (this.data.url && isExternalLinkTargetSet()) {
-      page.commonObjs.getData(item.fontRefName) : null;
+        link.target = LinkTargetStringMap[PDFJS.externalLinkTarget];
-    setTextStyles(content, item, fontObj);
-
-    container.appendChild(content);
-
-    return container;
       }
 
-  function getHtmlElementForTextAnnotation(item, page, viewport) {
+      // Strip referrer from the URL.
-    var rect = item.rect;
+      if (this.data.url) {
+        link.rel = PDFJS.externalLinkRel;
+      }
 
-    // sanity check because of OOo-generated PDFs
+      if (!this.data.url) {
+        if (this.data.action) {
+          this._bindNamedAction(link, this.data.action);
+        } else {
+          this._bindLink(link, ('dest' in this.data) ? this.data.dest : null);
+        }
+      }
+
+      this.container.appendChild(link);
+      return this.container;
+    },
+
+    /**
+     * Bind internal links to the link element.
+     *
+     * @private
+     * @param {Object} link
+     * @param {Object} destination
+     * @memberof LinkAnnotationElement
+     */
+    _bindLink: function LinkAnnotationElement_bindLink(link, destination) {
+      var self = this;
+
+      link.href = this.linkService.getDestinationHash(destination);
+      link.onclick = function() {
+        if (destination) {
+          self.linkService.navigateTo(destination);
+        }
+        return false;
+      };
+      if (destination) {
+        link.className = 'internalLink';
+      }
+    },
+
+    /**
+     * Bind named actions to the link element.
+     *
+     * @private
+     * @param {Object} link
+     * @param {Object} action
+     * @memberof LinkAnnotationElement
+     */
+    _bindNamedAction:
+        function LinkAnnotationElement_bindNamedAction(link, action) {
+      var self = this;
+
+      link.href = this.linkService.getAnchorUrl('');
+      link.onclick = function() {
+        self.linkService.executeNamedAction(action);
+        return false;
+      };
+      link.className = 'internalLink';
+    }
+  });
+
+  return LinkAnnotationElement;
+})();
+
+/**
+ * @class
+ * @alias TextAnnotationElement
+ */
+var TextAnnotationElement = (function TextAnnotationElementClosure() {
+  function TextAnnotationElement(parameters) {
+    AnnotationElement.call(this, parameters);
+
+    this.pinned = false;
+  }
+
+  Util.inherit(TextAnnotationElement, AnnotationElement, {
+    /**
+     * Render the text annotation's HTML element in the empty container.
+     *
+     * @public
+     * @memberof TextAnnotationElement
+     * @returns {HTMLSectionElement}
+     */
+    render: function TextAnnotationElement_render() {
+      var rect = this.data.rect, container = this.container;
+
+      // Sanity check because of OOo-generated PDFs.
       if ((rect[3] - rect[1]) < ANNOT_MIN_SIZE) {
         rect[3] = rect[1] + ANNOT_MIN_SIZE;
       }
@@ -172,13 +315,12 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
         rect[2] = rect[0] + (rect[3] - rect[1]); // make it square
       }
 
-    var container = getContainer(item, page, viewport);
       container.className = 'annotText';
 
       var image  = document.createElement('img');
       image.style.height = container.style.height;
       image.style.width = container.style.width;
-    var iconName = item.name;
+      var iconName = this.data.name;
       image.src = PDFJS.imageResourcesPath + 'annotation-' +
         iconName.toLowerCase() + '.svg';
       image.alt = '[{{type}} Annotation]';
@@ -190,15 +332,15 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
       contentWrapper.style.left = Math.floor(rect[2] - rect[0] + 5) + 'px';
       contentWrapper.style.top = '-10px';
 
-    var content = document.createElement('div');
+      var content = this.content = document.createElement('div');
       content.className = 'annotTextContent';
       content.setAttribute('hidden', true);
 
       var i, ii;
-    if (item.hasBgColor && item.color) {
+      if (this.data.hasBgColor && this.data.color) {
-      var color = item.color;
+        var color = this.data.color;
 
-      // Enlighten the color (70%)
+        // Enlighten the color (70%).
         var BACKGROUND_ENLIGHT = 0.7;
         var r = BACKGROUND_ENLIGHT * (255 - color[0]) + color[0];
         var g = BACKGROUND_ENLIGHT * (255 - color[1]) + color[1];
@@ -208,13 +350,13 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
 
       var title = document.createElement('h1');
       var text = document.createElement('p');
-    title.textContent = item.title;
+      title.textContent = this.data.title;
 
-    if (!item.content && !item.title) {
+      if (!this.data.content && !this.data.title) {
         content.setAttribute('hidden', true);
       } else {
         var e = document.createElement('span');
-      var lines = item.content.split(/(?:\r\n?|\n)/);
+        var lines = this.data.content.split(/(?:\r\n?|\n)/);
         for (i = 0, ii = lines.length; i < ii; ++i) {
           var line = lines[i];
           e.appendChild(document.createTextNode(line));
@@ -224,49 +366,10 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
         }
         text.appendChild(e);
 
-      var pinned = false;
+        image.addEventListener('click', this._toggle.bind(this));
-
+        image.addEventListener('mouseover', this._show.bind(this, false));
-      var showAnnotation = function showAnnotation(pin) {
+        image.addEventListener('mouseout', this._hide.bind(this, false));
-        if (pin) {
+        content.addEventListener('click', this._hide.bind(this, true));
-          pinned = true;
-        }
-        if (content.hasAttribute('hidden')) {
-          container.style.zIndex += 1;
-          content.removeAttribute('hidden');
-        }
-      };
-
-      var hideAnnotation = function hideAnnotation(unpin) {
-        if (unpin) {
-          pinned = false;
-        }
-        if (!content.hasAttribute('hidden') && !pinned) {
-          container.style.zIndex -= 1;
-          content.setAttribute('hidden', true);
-        }
-      };
-
-      var toggleAnnotation = function toggleAnnotation() {
-        if (pinned) {
-          hideAnnotation(true);
-        } else {
-          showAnnotation(true);
-        }
-      };
-
-      image.addEventListener('click', function image_clickHandler() {
-        toggleAnnotation();
-      }, false);
-      image.addEventListener('mouseover', function image_mouseOverHandler() {
-        showAnnotation();
-      }, false);
-      image.addEventListener('mouseout', function image_mouseOutHandler() {
-        hideAnnotation();
-      }, false);
-
-      content.addEventListener('click', function content_clickHandler() {
-        hideAnnotation(true);
-      }, false);
       }
 
       content.appendChild(title);
@@ -274,105 +377,192 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
       contentWrapper.appendChild(content);
       container.appendChild(image);
       container.appendChild(contentWrapper);
-
       return container;
-  }
+    },
 
-  function getHtmlElementForLinkAnnotation(item, page, viewport, linkService) {
+    /**
-    function bindLink(link, dest) {
+     * Toggle the visibility of the content box.
-      link.href = linkService.getDestinationHash(dest);
+     *
-      link.onclick = function annotationsLayerBuilderLinksOnclick() {
+     * @private
-        if (dest) {
+     * @memberof TextAnnotationElement
-          linkService.navigateTo(dest);
+     */
-        }
+    _toggle: function TextAnnotationElement_toggle() {
-        return false;
+      if (this.pinned) {
-      };
+        this._hide(true);
-      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');
-    link.href = link.title = item.url || '';
-
-    if (item.url && isExternalLinkTargetSet()) {
-      link.target = LinkTargetStringMap[PDFJS.externalLinkTarget];
-    }
-
-    // Strip referrer
-    if (item.url) {
-      link.rel = PDFJS.externalLinkRel;
-    }
-
-    if (!item.url) {
-      if (item.action) {
-        bindNamedAction(link, item.action);
       } else {
-        bindLink(link, ('dest' in item) ? item.dest : null);
+        this._show(true);
       }
+    },
+
+    /**
+     * Show the content box.
+     *
+     * @private
+     * @param {boolean} pin
+     * @memberof TextAnnotationElement
+     */
+    _show: function TextAnnotationElement_show(pin) {
+      if (pin) {
+        this.pinned = true;
+      }
+      if (this.content.hasAttribute('hidden')) {
+        this.container.style.zIndex += 1;
+        this.content.removeAttribute('hidden');
+      }
+    },
+
+    /**
+     * Hide the content box.
+     *
+     * @private
+     * @param {boolean} unpin
+     * @memberof TextAnnotationElement
+     */
+    _hide: function TextAnnotationElement_hide(unpin) {
+      if (unpin) {
+        this.pinned = false;
+      }
+      if (!this.content.hasAttribute('hidden') && !this.pinned) {
+        this.container.style.zIndex -= 1;
+        this.content.setAttribute('hidden', true);
+      }
+    }
+  });
+
+  return TextAnnotationElement;
+})();
+
+/**
+ * @class
+ * @alias WidgetAnnotationElement
+ */
+var WidgetAnnotationElement = (function WidgetAnnotationElementClosure() {
+  function WidgetAnnotationElement(parameters) {
+    AnnotationElement.call(this, parameters);
   }
 
-    container.appendChild(link);
+  Util.inherit(WidgetAnnotationElement, AnnotationElement, {
+    /**
+     * Render the widget annotation's HTML element in the empty container.
+     *
+     * @public
+     * @memberof WidgetAnnotationElement
+     * @returns {HTMLSectionElement}
+     */
+    render: function WidgetAnnotationElement_render() {
+      var content = document.createElement('div');
+      content.textContent = this.data.fieldValue;
+      var textAlignment = this.data.textAlignment;
+      content.style.textAlign = ['left', 'center', 'right'][textAlignment];
+      content.style.verticalAlign = 'middle';
+      content.style.display = 'table-cell';
 
-    return container;
+      var font = (this.data.fontRefName ?
+        this.page.commonObjs.getData(this.data.fontRefName) : null);
+      this._setTextStyle(content, font);
+
+      this.container.appendChild(content);
+      return this.container;
+    },
+
+    /**
+     * Apply text styles to the text in the element.
+     *
+     * @private
+     * @param {HTMLDivElement} element
+     * @param {Object} font
+     * @memberof WidgetAnnotationElement
+     */
+    _setTextStyle:
+        function WidgetAnnotationElement_setTextStyle(element, font) {
+      // TODO: This duplicates some of the logic in CanvasGraphics.setFont().
+      var style = element.style;
+      style.fontSize = this.data.fontSize + 'px';
+      style.direction = (this.data.fontDirection < 0 ? 'rtl': 'ltr');
+
+      if (!font) {
+        return;
       }
 
-  function getHtmlElement(data, page, viewport, linkService) {
+      style.fontWeight = (font.black ?
-    switch (data.annotationType) {
+        (font.bold ? '900' : 'bold') :
-      case AnnotationType.WIDGET:
+        (font.bold ? 'bold' : 'normal'));
-        return getHtmlElementForTextWidgetAnnotation(data, page, viewport);
+      style.fontStyle = (font.italic ? 'italic' : 'normal');
-      case AnnotationType.TEXT:
-        return getHtmlElementForTextAnnotation(data, page, viewport);
-      case AnnotationType.LINK:
-        return getHtmlElementForLinkAnnotation(data, page, viewport,
-                                               linkService);
-      default:
-        throw new Error('Unsupported annotationType: ' + data.annotationType);
-    }
-  }
 
-  function render(viewport, div, annotations, page, linkService) {
+      // Use a reasonable default font if the font doesn't specify a fallback.
-    for (var i = 0, ii = annotations.length; i < ii; i++) {
+      var fontFamily = font.loadedName ? '"' + font.loadedName + '", ' : '';
-      var data = annotations[i];
+      var fallbackName = font.fallbackName || 'Helvetica, sans-serif';
+      style.fontFamily = fontFamily + fallbackName;
+    }
+  });
+
+  return WidgetAnnotationElement;
+})();
+
+/**
+ * @typedef {Object} AnnotationLayerParameters
+ * @property {PageViewport} viewport
+ * @property {HTMLDivElement} div
+ * @property {Array} annotations
+ * @property {PDFPage} page
+ * @property {IPDFLinkService} linkService
+ */
+
+/**
+ * @class
+ * @alias AnnotationLayer
+ */
+var AnnotationLayer = (function AnnotationLayerClosure() {
+  return {
+    /**
+     * Render a new annotation layer with all annotation elements.
+     *
+     * @public
+     * @param {AnnotationLayerParameters} parameters
+     * @memberof AnnotationLayer
+     */
+    render: function AnnotationLayer_render(parameters) {
+      var annotationElementFactory = new AnnotationElementFactory();
+
+      for (var i = 0, ii = parameters.annotations.length; i < ii; i++) {
+        var data = parameters.annotations[i];
         if (!data || !data.hasHtml) {
           continue;
         }
 
-      var element = getHtmlElement(data, page, viewport, linkService);
+        var properties = {
-      div.appendChild(element);
+          data: data,
-    }
+          page: parameters.page,
+          viewport: parameters.viewport,
+          linkService: parameters.linkService
+        };
+        var element = annotationElementFactory.create(properties);
+        parameters.div.appendChild(element.render());
       }
+    },
 
-  function update(viewport, div, annotations) {
+    /**
-    for (var i = 0, ii = annotations.length; i < ii; i++) {
+     * Update the annotation elements on existing annotation layer.
-      var data = annotations[i];
+     *
-      var element = div.querySelector(
+     * @public
+     * @param {AnnotationLayerParameters} parameters
+     * @memberof AnnotationLayer
+     */
+    update: function AnnotationLayer_update(parameters) {
+      for (var i = 0, ii = parameters.annotations.length; i < ii; i++) {
+        var data = parameters.annotations[i];
+        var element = parameters.div.querySelector(
           '[data-annotation-id="' + data.id + '"]');
         if (element) {
           CustomStyle.setProp('transform', element,
-          'matrix(' + viewport.transform.join(',') + ')');
+            'matrix(' + parameters.viewport.transform.join(',') + ')');
         }
       }
-    div.removeAttribute('hidden');
+      parameters.div.removeAttribute('hidden');
     }
-
-  return {
-    render: render,
-    update: update
   };
 })();
+
 PDFJS.AnnotationLayer = AnnotationLayer;
 
 exports.AnnotationLayer = AnnotationLayer;

web/annotation_layer_builder.js

@@ -54,11 +54,18 @@ var AnnotationLayerBuilder = (function AnnotationLayerBuilderClosure() {
 
       this.pdfPage.getAnnotations(parameters).then(function (annotations) {
         viewport = viewport.clone({ dontFlip: true });
+        parameters = {
+          viewport: viewport,
+          div: self.div,
+          annotations: annotations,
+          page: self.pdfPage,
+          linkService: self.linkService
+        };
 
         if (self.div) {
           // If an annotationLayer already exists, refresh its children's
           // transformation matrices.
-          PDFJS.AnnotationLayer.update(viewport, self.div, annotations);
+          PDFJS.AnnotationLayer.update(parameters);
         } else {
           // Create an annotation layer div and render the annotations
           // if there is at least one annotation.
@@ -69,9 +76,9 @@ var AnnotationLayerBuilder = (function AnnotationLayerBuilderClosure() {
           self.div = document.createElement('div');
           self.div.className = 'annotationLayer';
           self.pageDiv.appendChild(self.div);
+          parameters.div = self.div;
 
-          PDFJS.AnnotationLayer.render(viewport, self.div, annotations,
+          PDFJS.AnnotationLayer.render(parameters);
-                                       self.pdfPage, self.linkService);
           if (typeof mozL10n !== 'undefined') {
             mozL10n.translate(self.div);
           }