pdfjs-dist 2.1.266 → 2.5.207

package/lib/display/annotation_layer.js

@@ -2,7 +2,7 @@
  * @licstart The following is the entire license notice for the
  * Javascript code in this page
  *
- * Copyright 2018 Mozilla Foundation
+ * Copyright 2020 Mozilla Foundation
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,130 +26,97 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AnnotationLayer = void 0;
 
-var _dom_utils = require("./dom_utils");
+var _display_utils = require("./display_utils.js");
 
-var _util = require("../shared/util");
+var _util = require("../shared/util.js");
 
-function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
+class AnnotationElementFactory {
+  static create(parameters) {
+    const subtype = parameters.data.annotationType;
 
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+    switch (subtype) {
+      case _util.AnnotationType.LINK:
+        return new LinkAnnotationElement(parameters);
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+      case _util.AnnotationType.TEXT:
+        return new TextAnnotationElement(parameters);
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+      case _util.AnnotationType.WIDGET:
+        const fieldType = parameters.data.fieldType;
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+        switch (fieldType) {
+          case "Tx":
+            return new TextWidgetAnnotationElement(parameters);
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+          case "Btn":
+            if (parameters.data.radioButton) {
+              return new RadioButtonWidgetAnnotationElement(parameters);
+            } else if (parameters.data.checkBox) {
+              return new CheckboxWidgetAnnotationElement(parameters);
+            }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+            return new PushButtonWidgetAnnotationElement(parameters);
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-var AnnotationElementFactory =
-/*#__PURE__*/
-function () {
-  function AnnotationElementFactory() {
-    _classCallCheck(this, AnnotationElementFactory);
-  }
-
-  _createClass(AnnotationElementFactory, null, [{
-    key: "create",
-    value: function create(parameters) {
-      var subtype = parameters.data.annotationType;
-
-      switch (subtype) {
-        case _util.AnnotationType.LINK:
-          return new LinkAnnotationElement(parameters);
-
-        case _util.AnnotationType.TEXT:
-          return new TextAnnotationElement(parameters);
-
-        case _util.AnnotationType.WIDGET:
-          var fieldType = parameters.data.fieldType;
-
-          switch (fieldType) {
-            case 'Tx':
-              return new TextWidgetAnnotationElement(parameters);
-
-            case 'Btn':
-              if (parameters.data.radioButton) {
-                return new RadioButtonWidgetAnnotationElement(parameters);
-              } else if (parameters.data.checkBox) {
-                return new CheckboxWidgetAnnotationElement(parameters);
-              }
+          case "Ch":
+            return new ChoiceWidgetAnnotationElement(parameters);
+        }
 
-              return new PushButtonWidgetAnnotationElement(parameters);
+        return new WidgetAnnotationElement(parameters);
 
-            case 'Ch':
-              return new ChoiceWidgetAnnotationElement(parameters);
-          }
+      case _util.AnnotationType.POPUP:
+        return new PopupAnnotationElement(parameters);
 
-          return new WidgetAnnotationElement(parameters);
+      case _util.AnnotationType.FREETEXT:
+        return new FreeTextAnnotationElement(parameters);
 
-        case _util.AnnotationType.POPUP:
-          return new PopupAnnotationElement(parameters);
+      case _util.AnnotationType.LINE:
+        return new LineAnnotationElement(parameters);
 
-        case _util.AnnotationType.LINE:
-          return new LineAnnotationElement(parameters);
+      case _util.AnnotationType.SQUARE:
+        return new SquareAnnotationElement(parameters);
 
-        case _util.AnnotationType.SQUARE:
-          return new SquareAnnotationElement(parameters);
+      case _util.AnnotationType.CIRCLE:
+        return new CircleAnnotationElement(parameters);
 
-        case _util.AnnotationType.CIRCLE:
-          return new CircleAnnotationElement(parameters);
+      case _util.AnnotationType.POLYLINE:
+        return new PolylineAnnotationElement(parameters);
 
-        case _util.AnnotationType.POLYLINE:
-          return new PolylineAnnotationElement(parameters);
+      case _util.AnnotationType.CARET:
+        return new CaretAnnotationElement(parameters);
 
-        case _util.AnnotationType.INK:
-          return new InkAnnotationElement(parameters);
+      case _util.AnnotationType.INK:
+        return new InkAnnotationElement(parameters);
 
-        case _util.AnnotationType.POLYGON:
-          return new PolygonAnnotationElement(parameters);
+      case _util.AnnotationType.POLYGON:
+        return new PolygonAnnotationElement(parameters);
 
-        case _util.AnnotationType.HIGHLIGHT:
-          return new HighlightAnnotationElement(parameters);
+      case _util.AnnotationType.HIGHLIGHT:
+        return new HighlightAnnotationElement(parameters);
 
-        case _util.AnnotationType.UNDERLINE:
-          return new UnderlineAnnotationElement(parameters);
+      case _util.AnnotationType.UNDERLINE:
+        return new UnderlineAnnotationElement(parameters);
 
-        case _util.AnnotationType.SQUIGGLY:
-          return new SquigglyAnnotationElement(parameters);
+      case _util.AnnotationType.SQUIGGLY:
+        return new SquigglyAnnotationElement(parameters);
 
-        case _util.AnnotationType.STRIKEOUT:
-          return new StrikeOutAnnotationElement(parameters);
+      case _util.AnnotationType.STRIKEOUT:
+        return new StrikeOutAnnotationElement(parameters);
 
-        case _util.AnnotationType.STAMP:
-          return new StampAnnotationElement(parameters);
+      case _util.AnnotationType.STAMP:
+        return new StampAnnotationElement(parameters);
 
-        case _util.AnnotationType.FILEATTACHMENT:
-          return new FileAttachmentAnnotationElement(parameters);
+      case _util.AnnotationType.FILEATTACHMENT:
+        return new FileAttachmentAnnotationElement(parameters);
 
-        default:
-          return new AnnotationElement(parameters);
-      }
+      default:
+        return new AnnotationElement(parameters);
     }
-  }]);
-
-  return AnnotationElementFactory;
-}();
-
-var AnnotationElement =
-/*#__PURE__*/
-function () {
-  function AnnotationElement(parameters) {
-    var isRenderable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var ignoreBorder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  }
 
-    _classCallCheck(this, AnnotationElement);
+}
 
+class AnnotationElement {
+  constructor(parameters, isRenderable = false, ignoreBorder = false) {
     this.isRenderable = isRenderable;
     this.data = parameters.data;
     this.layer = parameters.layer;
@@ -166,1117 +133,919 @@ function () {
     }
   }
 
-  _createClass(AnnotationElement, [{
-    key: "_createContainer",
-    value: function _createContainer() {
-      var ignoreBorder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var data = this.data,
+  _createContainer(ignoreBorder = false) {
+    const data = this.data,
           page = this.page,
           viewport = this.viewport;
-      var container = document.createElement('section');
-      var width = data.rect[2] - data.rect[0];
-      var height = data.rect[3] - data.rect[1];
-      container.setAttribute('data-annotation-id', data.id);
+    const container = document.createElement("section");
+    let width = data.rect[2] - data.rect[0];
+    let height = data.rect[3] - data.rect[1];
+    container.setAttribute("data-annotation-id", data.id);
 
-      var rect = _util.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]]);
+    const rect = _util.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]]);
 
-      container.style.transform = 'matrix(' + viewport.transform.join(',') + ')';
-      container.style.transformOrigin = -rect[0] + 'px ' + -rect[1] + 'px';
+    container.style.transform = `matrix(${viewport.transform.join(",")})`;
+    container.style.transformOrigin = `-${rect[0]}px -${rect[1]}px`;
 
-      if (!ignoreBorder && data.borderStyle.width > 0) {
-        container.style.borderWidth = data.borderStyle.width + 'px';
+    if (!ignoreBorder && data.borderStyle.width > 0) {
+      container.style.borderWidth = `${data.borderStyle.width}px`;
 
-        if (data.borderStyle.style !== _util.AnnotationBorderStyleType.UNDERLINE) {
-          width = width - 2 * data.borderStyle.width;
-          height = height - 2 * data.borderStyle.width;
-        }
-
-        var horizontalRadius = data.borderStyle.horizontalCornerRadius;
-        var verticalRadius = data.borderStyle.verticalCornerRadius;
+      if (data.borderStyle.style !== _util.AnnotationBorderStyleType.UNDERLINE) {
+        width = width - 2 * data.borderStyle.width;
+        height = height - 2 * data.borderStyle.width;
+      }
 
-        if (horizontalRadius > 0 || verticalRadius > 0) {
-          var radius = horizontalRadius + 'px / ' + verticalRadius + 'px';
-          container.style.borderRadius = radius;
-        }
+      const horizontalRadius = data.borderStyle.horizontalCornerRadius;
+      const verticalRadius = data.borderStyle.verticalCornerRadius;
 
-        switch (data.borderStyle.style) {
-          case _util.AnnotationBorderStyleType.SOLID:
-            container.style.borderStyle = 'solid';
-            break;
+      if (horizontalRadius > 0 || verticalRadius > 0) {
+        const radius = `${horizontalRadius}px / ${verticalRadius}px`;
+        container.style.borderRadius = radius;
+      }
 
-          case _util.AnnotationBorderStyleType.DASHED:
-            container.style.borderStyle = 'dashed';
-            break;
+      switch (data.borderStyle.style) {
+        case _util.AnnotationBorderStyleType.SOLID:
+          container.style.borderStyle = "solid";
+          break;
 
-          case _util.AnnotationBorderStyleType.BEVELED:
-            (0, _util.warn)('Unimplemented border style: beveled');
-            break;
+        case _util.AnnotationBorderStyleType.DASHED:
+          container.style.borderStyle = "dashed";
+          break;
 
-          case _util.AnnotationBorderStyleType.INSET:
-            (0, _util.warn)('Unimplemented border style: inset');
-            break;
+        case _util.AnnotationBorderStyleType.BEVELED:
+          (0, _util.warn)("Unimplemented border style: beveled");
+          break;
 
-          case _util.AnnotationBorderStyleType.UNDERLINE:
-            container.style.borderBottomStyle = 'solid';
-            break;
+        case _util.AnnotationBorderStyleType.INSET:
+          (0, _util.warn)("Unimplemented border style: inset");
+          break;
 
-          default:
-            break;
-        }
+        case _util.AnnotationBorderStyleType.UNDERLINE:
+          container.style.borderBottomStyle = "solid";
+          break;
 
-        if (data.color) {
-          container.style.borderColor = _util.Util.makeCssRgb(data.color[0] | 0, data.color[1] | 0, data.color[2] | 0);
-        } else {
-          container.style.borderWidth = 0;
-        }
+        default:
+          break;
       }
 
-      container.style.left = rect[0] + 'px';
-      container.style.top = rect[1] + 'px';
-      container.style.width = width + 'px';
-      container.style.height = height + 'px';
-      return container;
-    }
-  }, {
-    key: "_createPopup",
-    value: function _createPopup(container, trigger, data) {
-      if (!trigger) {
-        trigger = document.createElement('div');
-        trigger.style.height = container.style.height;
-        trigger.style.width = container.style.width;
-        container.appendChild(trigger);
+      if (data.color) {
+        container.style.borderColor = _util.Util.makeCssRgb(data.color[0] | 0, data.color[1] | 0, data.color[2] | 0);
+      } else {
+        container.style.borderWidth = 0;
       }
-
-      var popupElement = new PopupElement({
-        container: container,
-        trigger: trigger,
-        color: data.color,
-        title: data.title,
-        contents: data.contents,
-        hideWrapper: true
-      });
-      var popup = popupElement.render();
-      popup.style.left = container.style.width;
-      container.appendChild(popup);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      (0, _util.unreachable)('Abstract method `AnnotationElement.render` called');
+
+    container.style.left = `${rect[0]}px`;
+    container.style.top = `${rect[1]}px`;
+    container.style.width = `${width}px`;
+    container.style.height = `${height}px`;
+    return container;
+  }
+
+  _createPopup(container, trigger, data) {
+    if (!trigger) {
+      trigger = document.createElement("div");
+      trigger.style.height = container.style.height;
+      trigger.style.width = container.style.width;
+      container.appendChild(trigger);
     }
-  }]);
 
-  return AnnotationElement;
-}();
+    const popupElement = new PopupElement({
+      container,
+      trigger,
+      color: data.color,
+      title: data.title,
+      modificationDate: data.modificationDate,
+      contents: data.contents,
+      hideWrapper: true
+    });
+    const popup = popupElement.render();
+    popup.style.left = container.style.width;
+    container.appendChild(popup);
+  }
 
-var LinkAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement) {
-  _inherits(LinkAnnotationElement, _AnnotationElement);
+  render() {
+    (0, _util.unreachable)("Abstract method `AnnotationElement.render` called");
+  }
 
-  function LinkAnnotationElement(parameters) {
-    _classCallCheck(this, LinkAnnotationElement);
+}
 
-    var isRenderable = !!(parameters.data.url || parameters.data.dest || parameters.data.action);
-    return _possibleConstructorReturn(this, _getPrototypeOf(LinkAnnotationElement).call(this, parameters, isRenderable));
+class LinkAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.url || parameters.data.dest || parameters.data.action);
+    super(parameters, isRenderable);
   }
 
-  _createClass(LinkAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'linkAnnotation';
-      var data = this.data,
-          linkService = this.linkService;
-      var link = document.createElement('a');
-      (0, _dom_utils.addLinkAttributes)(link, {
+  render() {
+    this.container.className = "linkAnnotation";
+    const {
+      data,
+      linkService
+    } = this;
+    const link = document.createElement("a");
+
+    if (data.url) {
+      (0, _display_utils.addLinkAttributes)(link, {
         url: data.url,
-        target: data.newWindow ? _dom_utils.LinkTarget.BLANK : linkService.externalLinkTarget,
-        rel: linkService.externalLinkRel
+        target: data.newWindow ? _display_utils.LinkTarget.BLANK : linkService.externalLinkTarget,
+        rel: linkService.externalLinkRel,
+        enabled: linkService.externalLinkEnabled
       });
-
-      if (!data.url) {
-        if (data.action) {
-          this._bindNamedAction(link, data.action);
-        } else {
-          this._bindLink(link, data.dest);
-        }
-      }
-
-      this.container.appendChild(link);
-      return this.container;
+    } else if (data.action) {
+      this._bindNamedAction(link, data.action);
+    } else {
+      this._bindLink(link, data.dest);
     }
-  }, {
-    key: "_bindLink",
-    value: function _bindLink(link, destination) {
-      var _this = this;
 
-      link.href = this.linkService.getDestinationHash(destination);
-
-      link.onclick = function () {
-        if (destination) {
-          _this.linkService.navigateTo(destination);
-        }
+    this.container.appendChild(link);
+    return this.container;
+  }
 
-        return false;
-      };
+  _bindLink(link, destination) {
+    link.href = this.linkService.getDestinationHash(destination);
 
+    link.onclick = () => {
       if (destination) {
-        link.className = 'internalLink';
+        this.linkService.navigateTo(destination);
       }
-    }
-  }, {
-    key: "_bindNamedAction",
-    value: function _bindNamedAction(link, action) {
-      var _this2 = this;
 
-      link.href = this.linkService.getAnchorUrl('');
+      return false;
+    };
 
-      link.onclick = function () {
-        _this2.linkService.executeNamedAction(action);
-
-        return false;
-      };
-
-      link.className = 'internalLink';
+    if (destination) {
+      link.className = "internalLink";
     }
-  }]);
-
-  return LinkAnnotationElement;
-}(AnnotationElement);
-
-var TextAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement2) {
-  _inherits(TextAnnotationElement, _AnnotationElement2);
-
-  function TextAnnotationElement(parameters) {
-    _classCallCheck(this, TextAnnotationElement);
-
-    var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
-    return _possibleConstructorReturn(this, _getPrototypeOf(TextAnnotationElement).call(this, parameters, isRenderable));
   }
 
-  _createClass(TextAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'textAnnotation';
-      var image = document.createElement('img');
-      image.style.height = this.container.style.height;
-      image.style.width = this.container.style.width;
-      image.src = this.imageResourcesPath + 'annotation-' + this.data.name.toLowerCase() + '.svg';
-      image.alt = '[{{type}} Annotation]';
-      image.dataset.l10nId = 'text_annotation_type';
-      image.dataset.l10nArgs = JSON.stringify({
-        type: this.data.name
-      });
+  _bindNamedAction(link, action) {
+    link.href = this.linkService.getAnchorUrl("");
 
-      if (!this.data.hasPopup) {
-        this._createPopup(this.container, image, this.data);
-      }
+    link.onclick = () => {
+      this.linkService.executeNamedAction(action);
+      return false;
+    };
 
-      this.container.appendChild(image);
-      return this.container;
-    }
-  }]);
-
-  return TextAnnotationElement;
-}(AnnotationElement);
-
-var WidgetAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement3) {
-  _inherits(WidgetAnnotationElement, _AnnotationElement3);
+    link.className = "internalLink";
+  }
 
-  function WidgetAnnotationElement() {
-    _classCallCheck(this, WidgetAnnotationElement);
+}
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(WidgetAnnotationElement).apply(this, arguments));
+class TextAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable);
   }
 
-  _createClass(WidgetAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      return this.container;
+  render() {
+    this.container.className = "textAnnotation";
+    const image = document.createElement("img");
+    image.style.height = this.container.style.height;
+    image.style.width = this.container.style.width;
+    image.src = this.imageResourcesPath + "annotation-" + this.data.name.toLowerCase() + ".svg";
+    image.alt = "[{{type}} Annotation]";
+    image.dataset.l10nId = "text_annotation_type";
+    image.dataset.l10nArgs = JSON.stringify({
+      type: this.data.name
+    });
+
+    if (!this.data.hasPopup) {
+      this._createPopup(this.container, image, this.data);
     }
-  }]);
-
-  return WidgetAnnotationElement;
-}(AnnotationElement);
 
-var TextWidgetAnnotationElement =
-/*#__PURE__*/
-function (_WidgetAnnotationElem) {
-  _inherits(TextWidgetAnnotationElement, _WidgetAnnotationElem);
+    this.container.appendChild(image);
+    return this.container;
+  }
 
-  function TextWidgetAnnotationElement(parameters) {
-    _classCallCheck(this, TextWidgetAnnotationElement);
+}
 
-    var isRenderable = parameters.renderInteractiveForms || !parameters.data.hasAppearance && !!parameters.data.fieldValue;
-    return _possibleConstructorReturn(this, _getPrototypeOf(TextWidgetAnnotationElement).call(this, parameters, isRenderable));
+class WidgetAnnotationElement extends AnnotationElement {
+  render() {
+    return this.container;
   }
 
-  _createClass(TextWidgetAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      var TEXT_ALIGNMENT = ['left', 'center', 'right'];
-      this.container.className = 'textWidgetAnnotation';
-      var element = null;
-
-      if (this.renderInteractiveForms) {
-        if (this.data.multiLine) {
-          element = document.createElement('textarea');
-          element.textContent = this.data.fieldValue;
-        } else {
-          element = document.createElement('input');
-          element.type = 'text';
-          element.setAttribute('value', this.data.fieldValue);
-        }
+}
 
-        element.disabled = this.data.readOnly;
+class TextWidgetAnnotationElement extends WidgetAnnotationElement {
+  constructor(parameters) {
+    const isRenderable = parameters.renderInteractiveForms || !parameters.data.hasAppearance && !!parameters.data.fieldValue;
+    super(parameters, isRenderable);
+  }
 
-        if (this.data.maxLen !== null) {
-          element.maxLength = this.data.maxLen;
-        }
+  render() {
+    const TEXT_ALIGNMENT = ["left", "center", "right"];
+    this.container.className = "textWidgetAnnotation";
+    let element = null;
 
-        if (this.data.comb) {
-          var fieldWidth = this.data.rect[2] - this.data.rect[0];
-          var combWidth = fieldWidth / this.data.maxLen;
-          element.classList.add('comb');
-          element.style.letterSpacing = 'calc(' + combWidth + 'px - 1ch)';
-        }
-      } else {
-        element = document.createElement('div');
+    if (this.renderInteractiveForms) {
+      if (this.data.multiLine) {
+        element = document.createElement("textarea");
         element.textContent = this.data.fieldValue;
-        element.style.verticalAlign = 'middle';
-        element.style.display = 'table-cell';
-        var font = null;
+      } else {
+        element = document.createElement("input");
+        element.type = "text";
+        element.setAttribute("value", this.data.fieldValue);
+      }
 
-        if (this.data.fontRefName && this.page.commonObjs.has(this.data.fontRefName)) {
-          font = this.page.commonObjs.get(this.data.fontRefName);
-        }
+      element.disabled = this.data.readOnly;
+      element.name = this.data.fieldName;
 
-        this._setTextStyle(element, font);
+      if (this.data.maxLen !== null) {
+        element.maxLength = this.data.maxLen;
       }
 
-      if (this.data.textAlignment !== null) {
-        element.style.textAlign = TEXT_ALIGNMENT[this.data.textAlignment];
+      if (this.data.comb) {
+        const fieldWidth = this.data.rect[2] - this.data.rect[0];
+        const combWidth = fieldWidth / this.data.maxLen;
+        element.classList.add("comb");
+        element.style.letterSpacing = `calc(${combWidth}px - 1ch)`;
       }
-
-      this.container.appendChild(element);
-      return this.container;
-    }
-  }, {
-    key: "_setTextStyle",
-    value: function _setTextStyle(element, font) {
-      var style = element.style;
-      style.fontSize = this.data.fontSize + 'px';
-      style.direction = this.data.fontDirection < 0 ? 'rtl' : 'ltr';
-
-      if (!font) {
-        return;
+    } else {
+      element = document.createElement("div");
+      element.textContent = this.data.fieldValue;
+      element.style.verticalAlign = "middle";
+      element.style.display = "table-cell";
+      let font = null;
+
+      if (this.data.fontRefName && this.page.commonObjs.has(this.data.fontRefName)) {
+        font = this.page.commonObjs.get(this.data.fontRefName);
       }
 
-      style.fontWeight = font.black ? font.bold ? '900' : 'bold' : font.bold ? 'bold' : 'normal';
-      style.fontStyle = font.italic ? 'italic' : 'normal';
-      var fontFamily = font.loadedName ? '"' + font.loadedName + '", ' : '';
-      var fallbackName = font.fallbackName || 'Helvetica, sans-serif';
-      style.fontFamily = fontFamily + fallbackName;
+      this._setTextStyle(element, font);
     }
-  }]);
 
-  return TextWidgetAnnotationElement;
-}(WidgetAnnotationElement);
-
-var CheckboxWidgetAnnotationElement =
-/*#__PURE__*/
-function (_WidgetAnnotationElem2) {
-  _inherits(CheckboxWidgetAnnotationElement, _WidgetAnnotationElem2);
-
-  function CheckboxWidgetAnnotationElement(parameters) {
-    _classCallCheck(this, CheckboxWidgetAnnotationElement);
+    if (this.data.textAlignment !== null) {
+      element.style.textAlign = TEXT_ALIGNMENT[this.data.textAlignment];
+    }
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(CheckboxWidgetAnnotationElement).call(this, parameters, parameters.renderInteractiveForms));
+    this.container.appendChild(element);
+    return this.container;
   }
 
-  _createClass(CheckboxWidgetAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'buttonWidgetAnnotation checkBox';
-      var element = document.createElement('input');
-      element.disabled = this.data.readOnly;
-      element.type = 'checkbox';
-
-      if (this.data.fieldValue && this.data.fieldValue !== 'Off') {
-        element.setAttribute('checked', true);
-      }
+  _setTextStyle(element, font) {
+    const style = element.style;
+    style.fontSize = `${this.data.fontSize}px`;
+    style.direction = this.data.fontDirection < 0 ? "rtl" : "ltr";
 
-      this.container.appendChild(element);
-      return this.container;
+    if (!font) {
+      return;
     }
-  }]);
-
-  return CheckboxWidgetAnnotationElement;
-}(WidgetAnnotationElement);
 
-var RadioButtonWidgetAnnotationElement =
-/*#__PURE__*/
-function (_WidgetAnnotationElem3) {
-  _inherits(RadioButtonWidgetAnnotationElement, _WidgetAnnotationElem3);
+    let bold = "normal";
 
-  function RadioButtonWidgetAnnotationElement(parameters) {
-    _classCallCheck(this, RadioButtonWidgetAnnotationElement);
+    if (font.black) {
+      bold = "900";
+    } else if (font.bold) {
+      bold = "bold";
+    }
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(RadioButtonWidgetAnnotationElement).call(this, parameters, parameters.renderInteractiveForms));
+    style.fontWeight = bold;
+    style.fontStyle = font.italic ? "italic" : "normal";
+    const fontFamily = font.loadedName ? `"${font.loadedName}", ` : "";
+    const fallbackName = font.fallbackName || "Helvetica, sans-serif";
+    style.fontFamily = fontFamily + fallbackName;
   }
 
-  _createClass(RadioButtonWidgetAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'buttonWidgetAnnotation radioButton';
-      var element = document.createElement('input');
-      element.disabled = this.data.readOnly;
-      element.type = 'radio';
-      element.name = this.data.fieldName;
+}
 
-      if (this.data.fieldValue === this.data.buttonValue) {
-        element.setAttribute('checked', true);
-      }
+class CheckboxWidgetAnnotationElement extends WidgetAnnotationElement {
+  constructor(parameters) {
+    super(parameters, parameters.renderInteractiveForms);
+  }
 
-      this.container.appendChild(element);
-      return this.container;
-    }
-  }]);
+  render() {
+    this.container.className = "buttonWidgetAnnotation checkBox";
+    const element = document.createElement("input");
+    element.disabled = this.data.readOnly;
+    element.type = "checkbox";
+    element.name = this.data.fieldName;
 
-  return RadioButtonWidgetAnnotationElement;
-}(WidgetAnnotationElement);
+    if (this.data.fieldValue && this.data.fieldValue !== "Off") {
+      element.setAttribute("checked", true);
+    }
 
-var PushButtonWidgetAnnotationElement =
-/*#__PURE__*/
-function (_LinkAnnotationElemen) {
-  _inherits(PushButtonWidgetAnnotationElement, _LinkAnnotationElemen);
+    this.container.appendChild(element);
+    return this.container;
+  }
 
-  function PushButtonWidgetAnnotationElement() {
-    _classCallCheck(this, PushButtonWidgetAnnotationElement);
+}
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(PushButtonWidgetAnnotationElement).apply(this, arguments));
+class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
+  constructor(parameters) {
+    super(parameters, parameters.renderInteractiveForms);
   }
 
-  _createClass(PushButtonWidgetAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      var container = _get(_getPrototypeOf(PushButtonWidgetAnnotationElement.prototype), "render", this).call(this);
+  render() {
+    this.container.className = "buttonWidgetAnnotation radioButton";
+    const element = document.createElement("input");
+    element.disabled = this.data.readOnly;
+    element.type = "radio";
+    element.name = this.data.fieldName;
 
-      container.className = 'buttonWidgetAnnotation pushButton';
-      return container;
+    if (this.data.fieldValue === this.data.buttonValue) {
+      element.setAttribute("checked", true);
     }
-  }]);
 
-  return PushButtonWidgetAnnotationElement;
-}(LinkAnnotationElement);
+    this.container.appendChild(element);
+    return this.container;
+  }
+
+}
 
-var ChoiceWidgetAnnotationElement =
-/*#__PURE__*/
-function (_WidgetAnnotationElem4) {
-  _inherits(ChoiceWidgetAnnotationElement, _WidgetAnnotationElem4);
+class PushButtonWidgetAnnotationElement extends LinkAnnotationElement {
+  render() {
+    const container = super.render();
+    container.className = "buttonWidgetAnnotation pushButton";
+    return container;
+  }
 
-  function ChoiceWidgetAnnotationElement(parameters) {
-    _classCallCheck(this, ChoiceWidgetAnnotationElement);
+}
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(ChoiceWidgetAnnotationElement).call(this, parameters, parameters.renderInteractiveForms));
+class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
+  constructor(parameters) {
+    super(parameters, parameters.renderInteractiveForms);
   }
 
-  _createClass(ChoiceWidgetAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'choiceWidgetAnnotation';
-      var selectElement = document.createElement('select');
-      selectElement.disabled = this.data.readOnly;
+  render() {
+    this.container.className = "choiceWidgetAnnotation";
+    const selectElement = document.createElement("select");
+    selectElement.disabled = this.data.readOnly;
+    selectElement.name = this.data.fieldName;
 
-      if (!this.data.combo) {
-        selectElement.size = this.data.options.length;
+    if (!this.data.combo) {
+      selectElement.size = this.data.options.length;
 
-        if (this.data.multiSelect) {
-          selectElement.multiple = true;
-        }
+      if (this.data.multiSelect) {
+        selectElement.multiple = true;
       }
+    }
 
-      for (var i = 0, ii = this.data.options.length; i < ii; i++) {
-        var option = this.data.options[i];
-        var optionElement = document.createElement('option');
-        optionElement.textContent = option.displayValue;
-        optionElement.value = option.exportValue;
+    for (const option of this.data.options) {
+      const optionElement = document.createElement("option");
+      optionElement.textContent = option.displayValue;
+      optionElement.value = option.exportValue;
 
-        if (this.data.fieldValue.includes(option.displayValue)) {
-          optionElement.setAttribute('selected', true);
-        }
-
-        selectElement.appendChild(optionElement);
+      if (this.data.fieldValue.includes(option.displayValue)) {
+        optionElement.setAttribute("selected", true);
       }
 
-      this.container.appendChild(selectElement);
-      return this.container;
+      selectElement.appendChild(optionElement);
     }
-  }]);
-
-  return ChoiceWidgetAnnotationElement;
-}(WidgetAnnotationElement);
 
-var PopupAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement4) {
-  _inherits(PopupAnnotationElement, _AnnotationElement4);
+    this.container.appendChild(selectElement);
+    return this.container;
+  }
 
-  function PopupAnnotationElement(parameters) {
-    _classCallCheck(this, PopupAnnotationElement);
+}
 
-    var isRenderable = !!(parameters.data.title || parameters.data.contents);
-    return _possibleConstructorReturn(this, _getPrototypeOf(PopupAnnotationElement).call(this, parameters, isRenderable));
+class PopupAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable);
   }
 
-  _createClass(PopupAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      var IGNORE_TYPES = ['Line', 'Square', 'Circle', 'PolyLine', 'Polygon', 'Ink'];
-      this.container.className = 'popupAnnotation';
-
-      if (IGNORE_TYPES.includes(this.data.parentType)) {
-        return this.container;
-      }
+  render() {
+    const IGNORE_TYPES = ["Line", "Square", "Circle", "PolyLine", "Polygon", "Ink"];
+    this.container.className = "popupAnnotation";
 
-      var selector = '[data-annotation-id="' + this.data.parentId + '"]';
-      var parentElement = this.layer.querySelector(selector);
+    if (IGNORE_TYPES.includes(this.data.parentType)) {
+      return this.container;
+    }
 
-      if (!parentElement) {
-        return this.container;
-      }
+    const selector = `[data-annotation-id="${this.data.parentId}"]`;
+    const parentElement = this.layer.querySelector(selector);
 
-      var popup = new PopupElement({
-        container: this.container,
-        trigger: parentElement,
-        color: this.data.color,
-        title: this.data.title,
-        contents: this.data.contents
-      });
-      var parentLeft = parseFloat(parentElement.style.left);
-      var parentWidth = parseFloat(parentElement.style.width);
-      this.container.style.transformOrigin = -(parentLeft + parentWidth) + 'px -' + parentElement.style.top;
-      this.container.style.left = parentLeft + parentWidth + 'px';
-      this.container.appendChild(popup.render());
+    if (!parentElement) {
       return this.container;
     }
-  }]);
 
-  return PopupAnnotationElement;
-}(AnnotationElement);
+    const popup = new PopupElement({
+      container: this.container,
+      trigger: parentElement,
+      color: this.data.color,
+      title: this.data.title,
+      modificationDate: this.data.modificationDate,
+      contents: this.data.contents
+    });
+    const parentLeft = parseFloat(parentElement.style.left);
+    const parentWidth = parseFloat(parentElement.style.width);
+    this.container.style.transformOrigin = `-${parentLeft + parentWidth}px -${parentElement.style.top}`;
+    this.container.style.left = `${parentLeft + parentWidth}px`;
+    this.container.appendChild(popup.render());
+    return this.container;
+  }
 
-var PopupElement =
-/*#__PURE__*/
-function () {
-  function PopupElement(parameters) {
-    _classCallCheck(this, PopupElement);
+}
 
+class PopupElement {
+  constructor(parameters) {
     this.container = parameters.container;
     this.trigger = parameters.trigger;
     this.color = parameters.color;
     this.title = parameters.title;
+    this.modificationDate = parameters.modificationDate;
     this.contents = parameters.contents;
     this.hideWrapper = parameters.hideWrapper || false;
     this.pinned = false;
   }
 
-  _createClass(PopupElement, [{
-    key: "render",
-    value: function render() {
-      var BACKGROUND_ENLIGHT = 0.7;
-      var wrapper = document.createElement('div');
-      wrapper.className = 'popupWrapper';
-      this.hideElement = this.hideWrapper ? wrapper : this.container;
-      this.hideElement.setAttribute('hidden', true);
-      var popup = document.createElement('div');
-      popup.className = 'popup';
-      var color = this.color;
-
-      if (color) {
-        var r = BACKGROUND_ENLIGHT * (255 - color[0]) + color[0];
-        var g = BACKGROUND_ENLIGHT * (255 - color[1]) + color[1];
-        var b = BACKGROUND_ENLIGHT * (255 - color[2]) + color[2];
-        popup.style.backgroundColor = _util.Util.makeCssRgb(r | 0, g | 0, b | 0);
-      }
-
-      var contents = this._formatContents(this.contents);
-
-      var title = document.createElement('h1');
-      title.textContent = this.title;
-      this.trigger.addEventListener('click', this._toggle.bind(this));
-      this.trigger.addEventListener('mouseover', this._show.bind(this, false));
-      this.trigger.addEventListener('mouseout', this._hide.bind(this, false));
-      popup.addEventListener('click', this._hide.bind(this, true));
-      popup.appendChild(title);
-      popup.appendChild(contents);
-      wrapper.appendChild(popup);
-      return wrapper;
+  render() {
+    const BACKGROUND_ENLIGHT = 0.7;
+    const wrapper = document.createElement("div");
+    wrapper.className = "popupWrapper";
+    this.hideElement = this.hideWrapper ? wrapper : this.container;
+    this.hideElement.setAttribute("hidden", true);
+    const popup = document.createElement("div");
+    popup.className = "popup";
+    const color = this.color;
+
+    if (color) {
+      const r = BACKGROUND_ENLIGHT * (255 - color[0]) + color[0];
+      const g = BACKGROUND_ENLIGHT * (255 - color[1]) + color[1];
+      const b = BACKGROUND_ENLIGHT * (255 - color[2]) + color[2];
+      popup.style.backgroundColor = _util.Util.makeCssRgb(r | 0, g | 0, b | 0);
     }
-  }, {
-    key: "_formatContents",
-    value: function _formatContents(contents) {
-      var p = document.createElement('p');
-      var lines = contents.split(/(?:\r\n?|\n)/);
-
-      for (var i = 0, ii = lines.length; i < ii; ++i) {
-        var line = lines[i];
-        p.appendChild(document.createTextNode(line));
-
-        if (i < ii - 1) {
-          p.appendChild(document.createElement('br'));
-        }
-      }
 
-      return p;
-    }
-  }, {
-    key: "_toggle",
-    value: function _toggle() {
-      if (this.pinned) {
-        this._hide(true);
-      } else {
-        this._show(true);
-      }
-    }
-  }, {
-    key: "_show",
-    value: function _show() {
-      var pin = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    const title = document.createElement("h1");
+    title.textContent = this.title;
+    popup.appendChild(title);
 
-      if (pin) {
-        this.pinned = true;
-      }
+    const dateObject = _display_utils.PDFDateString.toDateObject(this.modificationDate);
 
-      if (this.hideElement.hasAttribute('hidden')) {
-        this.hideElement.removeAttribute('hidden');
-        this.container.style.zIndex += 1;
-      }
+    if (dateObject) {
+      const modificationDate = document.createElement("span");
+      modificationDate.textContent = "{{date}}, {{time}}";
+      modificationDate.dataset.l10nId = "annotation_date_string";
+      modificationDate.dataset.l10nArgs = JSON.stringify({
+        date: dateObject.toLocaleDateString(),
+        time: dateObject.toLocaleTimeString()
+      });
+      popup.appendChild(modificationDate);
     }
-  }, {
-    key: "_hide",
-    value: function _hide() {
-      var unpin = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
 
-      if (unpin) {
-        this.pinned = false;
-      }
+    const contents = this._formatContents(this.contents);
 
-      if (!this.hideElement.hasAttribute('hidden') && !this.pinned) {
-        this.hideElement.setAttribute('hidden', true);
-        this.container.style.zIndex -= 1;
-      }
-    }
-  }]);
+    popup.appendChild(contents);
+    this.trigger.addEventListener("click", this._toggle.bind(this));
+    this.trigger.addEventListener("mouseover", this._show.bind(this, false));
+    this.trigger.addEventListener("mouseout", this._hide.bind(this, false));
+    popup.addEventListener("click", this._hide.bind(this, true));
+    wrapper.appendChild(popup);
+    return wrapper;
+  }
 
-  return PopupElement;
-}();
+  _formatContents(contents) {
+    const p = document.createElement("p");
+    const lines = contents.split(/(?:\r\n?|\n)/);
 
-var LineAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement5) {
-  _inherits(LineAnnotationElement, _AnnotationElement5);
+    for (let i = 0, ii = lines.length; i < ii; ++i) {
+      const line = lines[i];
+      p.appendChild(document.createTextNode(line));
 
-  function LineAnnotationElement(parameters) {
-    _classCallCheck(this, LineAnnotationElement);
+      if (i < ii - 1) {
+        p.appendChild(document.createElement("br"));
+      }
+    }
 
-    var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
-    return _possibleConstructorReturn(this, _getPrototypeOf(LineAnnotationElement).call(this, parameters, isRenderable, true));
+    return p;
   }
 
-  _createClass(LineAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'lineAnnotation';
-      var data = this.data;
-      var width = data.rect[2] - data.rect[0];
-      var height = data.rect[3] - data.rect[1];
-      var svg = this.svgFactory.create(width, height);
-      var line = this.svgFactory.createElement('svg:line');
-      line.setAttribute('x1', data.rect[2] - data.lineCoordinates[0]);
-      line.setAttribute('y1', data.rect[3] - data.lineCoordinates[1]);
-      line.setAttribute('x2', data.rect[2] - data.lineCoordinates[2]);
-      line.setAttribute('y2', data.rect[3] - data.lineCoordinates[3]);
-      line.setAttribute('stroke-width', data.borderStyle.width);
-      line.setAttribute('stroke', 'transparent');
-      svg.appendChild(line);
-      this.container.append(svg);
-
-      this._createPopup(this.container, line, data);
+  _toggle() {
+    if (this.pinned) {
+      this._hide(true);
+    } else {
+      this._show(true);
+    }
+  }
 
-      return this.container;
+  _show(pin = false) {
+    if (pin) {
+      this.pinned = true;
+    }
+
+    if (this.hideElement.hasAttribute("hidden")) {
+      this.hideElement.removeAttribute("hidden");
+      this.container.style.zIndex += 1;
     }
-  }]);
+  }
 
-  return LineAnnotationElement;
-}(AnnotationElement);
+  _hide(unpin = true) {
+    if (unpin) {
+      this.pinned = false;
+    }
 
-var SquareAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement6) {
-  _inherits(SquareAnnotationElement, _AnnotationElement6);
+    if (!this.hideElement.hasAttribute("hidden") && !this.pinned) {
+      this.hideElement.setAttribute("hidden", true);
+      this.container.style.zIndex -= 1;
+    }
+  }
 
-  function SquareAnnotationElement(parameters) {
-    _classCallCheck(this, SquareAnnotationElement);
+}
 
-    var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
-    return _possibleConstructorReturn(this, _getPrototypeOf(SquareAnnotationElement).call(this, parameters, isRenderable, true));
+class FreeTextAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
   }
 
-  _createClass(SquareAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'squareAnnotation';
-      var data = this.data;
-      var width = data.rect[2] - data.rect[0];
-      var height = data.rect[3] - data.rect[1];
-      var svg = this.svgFactory.create(width, height);
-      var borderWidth = data.borderStyle.width;
-      var square = this.svgFactory.createElement('svg:rect');
-      square.setAttribute('x', borderWidth / 2);
-      square.setAttribute('y', borderWidth / 2);
-      square.setAttribute('width', width - borderWidth);
-      square.setAttribute('height', height - borderWidth);
-      square.setAttribute('stroke-width', borderWidth);
-      square.setAttribute('stroke', 'transparent');
-      square.setAttribute('fill', 'none');
-      svg.appendChild(square);
-      this.container.append(svg);
-
-      this._createPopup(this.container, square, data);
+  render() {
+    this.container.className = "freeTextAnnotation";
 
-      return this.container;
+    if (!this.data.hasPopup) {
+      this._createPopup(this.container, null, this.data);
     }
-  }]);
-
-  return SquareAnnotationElement;
-}(AnnotationElement);
 
-var CircleAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement7) {
-  _inherits(CircleAnnotationElement, _AnnotationElement7);
+    return this.container;
+  }
 
-  function CircleAnnotationElement(parameters) {
-    _classCallCheck(this, CircleAnnotationElement);
+}
 
-    var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
-    return _possibleConstructorReturn(this, _getPrototypeOf(CircleAnnotationElement).call(this, parameters, isRenderable, true));
+class LineAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
   }
 
-  _createClass(CircleAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'circleAnnotation';
-      var data = this.data;
-      var width = data.rect[2] - data.rect[0];
-      var height = data.rect[3] - data.rect[1];
-      var svg = this.svgFactory.create(width, height);
-      var borderWidth = data.borderStyle.width;
-      var circle = this.svgFactory.createElement('svg:ellipse');
-      circle.setAttribute('cx', width / 2);
-      circle.setAttribute('cy', height / 2);
-      circle.setAttribute('rx', width / 2 - borderWidth / 2);
-      circle.setAttribute('ry', height / 2 - borderWidth / 2);
-      circle.setAttribute('stroke-width', borderWidth);
-      circle.setAttribute('stroke', 'transparent');
-      circle.setAttribute('fill', 'none');
-      svg.appendChild(circle);
-      this.container.append(svg);
-
-      this._createPopup(this.container, circle, data);
-
-      return this.container;
-    }
-  }]);
+  render() {
+    this.container.className = "lineAnnotation";
+    const data = this.data;
+    const width = data.rect[2] - data.rect[0];
+    const height = data.rect[3] - data.rect[1];
+    const svg = this.svgFactory.create(width, height);
+    const line = this.svgFactory.createElement("svg:line");
+    line.setAttribute("x1", data.rect[2] - data.lineCoordinates[0]);
+    line.setAttribute("y1", data.rect[3] - data.lineCoordinates[1]);
+    line.setAttribute("x2", data.rect[2] - data.lineCoordinates[2]);
+    line.setAttribute("y2", data.rect[3] - data.lineCoordinates[3]);
+    line.setAttribute("stroke-width", data.borderStyle.width || 1);
+    line.setAttribute("stroke", "transparent");
+    svg.appendChild(line);
+    this.container.append(svg);
+
+    this._createPopup(this.container, line, data);
+
+    return this.container;
+  }
 
-  return CircleAnnotationElement;
-}(AnnotationElement);
+}
 
-var PolylineAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement8) {
-  _inherits(PolylineAnnotationElement, _AnnotationElement8);
+class SquareAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
+  }
 
-  function PolylineAnnotationElement(parameters) {
-    var _this3;
+  render() {
+    this.container.className = "squareAnnotation";
+    const data = this.data;
+    const width = data.rect[2] - data.rect[0];
+    const height = data.rect[3] - data.rect[1];
+    const svg = this.svgFactory.create(width, height);
+    const borderWidth = data.borderStyle.width;
+    const square = this.svgFactory.createElement("svg:rect");
+    square.setAttribute("x", borderWidth / 2);
+    square.setAttribute("y", borderWidth / 2);
+    square.setAttribute("width", width - borderWidth);
+    square.setAttribute("height", height - borderWidth);
+    square.setAttribute("stroke-width", borderWidth || 1);
+    square.setAttribute("stroke", "transparent");
+    square.setAttribute("fill", "none");
+    svg.appendChild(square);
+    this.container.append(svg);
+
+    this._createPopup(this.container, square, data);
+
+    return this.container;
+  }
 
-    _classCallCheck(this, PolylineAnnotationElement);
+}
 
-    var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
-    _this3 = _possibleConstructorReturn(this, _getPrototypeOf(PolylineAnnotationElement).call(this, parameters, isRenderable, true));
-    _this3.containerClassName = 'polylineAnnotation';
-    _this3.svgElementName = 'svg:polyline';
-    return _this3;
+class CircleAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
   }
 
-  _createClass(PolylineAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = this.containerClassName;
-      var data = this.data;
-      var width = data.rect[2] - data.rect[0];
-      var height = data.rect[3] - data.rect[1];
-      var svg = this.svgFactory.create(width, height);
-      var vertices = data.vertices;
-      var points = [];
-
-      for (var i = 0, ii = vertices.length; i < ii; i++) {
-        var x = vertices[i].x - data.rect[0];
-        var y = data.rect[3] - vertices[i].y;
-        points.push(x + ',' + y);
-      }
+  render() {
+    this.container.className = "circleAnnotation";
+    const data = this.data;
+    const width = data.rect[2] - data.rect[0];
+    const height = data.rect[3] - data.rect[1];
+    const svg = this.svgFactory.create(width, height);
+    const borderWidth = data.borderStyle.width;
+    const circle = this.svgFactory.createElement("svg:ellipse");
+    circle.setAttribute("cx", width / 2);
+    circle.setAttribute("cy", height / 2);
+    circle.setAttribute("rx", width / 2 - borderWidth / 2);
+    circle.setAttribute("ry", height / 2 - borderWidth / 2);
+    circle.setAttribute("stroke-width", borderWidth || 1);
+    circle.setAttribute("stroke", "transparent");
+    circle.setAttribute("fill", "none");
+    svg.appendChild(circle);
+    this.container.append(svg);
+
+    this._createPopup(this.container, circle, data);
+
+    return this.container;
+  }
 
-      points = points.join(' ');
-      var borderWidth = data.borderStyle.width;
-      var polyline = this.svgFactory.createElement(this.svgElementName);
-      polyline.setAttribute('points', points);
-      polyline.setAttribute('stroke-width', borderWidth);
-      polyline.setAttribute('stroke', 'transparent');
-      polyline.setAttribute('fill', 'none');
-      svg.appendChild(polyline);
-      this.container.append(svg);
+}
 
-      this._createPopup(this.container, polyline, data);
+class PolylineAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
+    this.containerClassName = "polylineAnnotation";
+    this.svgElementName = "svg:polyline";
+  }
 
-      return this.container;
+  render() {
+    this.container.className = this.containerClassName;
+    const data = this.data;
+    const width = data.rect[2] - data.rect[0];
+    const height = data.rect[3] - data.rect[1];
+    const svg = this.svgFactory.create(width, height);
+    let points = [];
+
+    for (const coordinate of data.vertices) {
+      const x = coordinate.x - data.rect[0];
+      const y = data.rect[3] - coordinate.y;
+      points.push(x + "," + y);
     }
-  }]);
 
-  return PolylineAnnotationElement;
-}(AnnotationElement);
+    points = points.join(" ");
+    const polyline = this.svgFactory.createElement(this.svgElementName);
+    polyline.setAttribute("points", points);
+    polyline.setAttribute("stroke-width", data.borderStyle.width || 1);
+    polyline.setAttribute("stroke", "transparent");
+    polyline.setAttribute("fill", "none");
+    svg.appendChild(polyline);
+    this.container.append(svg);
 
-var PolygonAnnotationElement =
-/*#__PURE__*/
-function (_PolylineAnnotationEl) {
-  _inherits(PolygonAnnotationElement, _PolylineAnnotationEl);
+    this._createPopup(this.container, polyline, data);
 
-  function PolygonAnnotationElement(parameters) {
-    var _this4;
+    return this.container;
+  }
 
-    _classCallCheck(this, PolygonAnnotationElement);
+}
 
-    _this4 = _possibleConstructorReturn(this, _getPrototypeOf(PolygonAnnotationElement).call(this, parameters));
-    _this4.containerClassName = 'polygonAnnotation';
-    _this4.svgElementName = 'svg:polygon';
-    return _this4;
+class PolygonAnnotationElement extends PolylineAnnotationElement {
+  constructor(parameters) {
+    super(parameters);
+    this.containerClassName = "polygonAnnotation";
+    this.svgElementName = "svg:polygon";
   }
 
-  return PolygonAnnotationElement;
-}(PolylineAnnotationElement);
+}
 
-var InkAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement9) {
-  _inherits(InkAnnotationElement, _AnnotationElement9);
+class CaretAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
+  }
 
-  function InkAnnotationElement(parameters) {
-    var _this5;
+  render() {
+    this.container.className = "caretAnnotation";
 
-    _classCallCheck(this, InkAnnotationElement);
+    if (!this.data.hasPopup) {
+      this._createPopup(this.container, null, this.data);
+    }
 
-    var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
-    _this5 = _possibleConstructorReturn(this, _getPrototypeOf(InkAnnotationElement).call(this, parameters, isRenderable, true));
-    _this5.containerClassName = 'inkAnnotation';
-    _this5.svgElementName = 'svg:polyline';
-    return _this5;
+    return this.container;
   }
 
-  _createClass(InkAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = this.containerClassName;
-      var data = this.data;
-      var width = data.rect[2] - data.rect[0];
-      var height = data.rect[3] - data.rect[1];
-      var svg = this.svgFactory.create(width, height);
-      var inkLists = data.inkLists;
-
-      for (var i = 0, ii = inkLists.length; i < ii; i++) {
-        var inkList = inkLists[i];
-        var points = [];
-
-        for (var j = 0, jj = inkList.length; j < jj; j++) {
-          var x = inkList[j].x - data.rect[0];
-          var y = data.rect[3] - inkList[j].y;
-          points.push(x + ',' + y);
-        }
+}
 
-        points = points.join(' ');
-        var borderWidth = data.borderStyle.width;
-        var polyline = this.svgFactory.createElement(this.svgElementName);
-        polyline.setAttribute('points', points);
-        polyline.setAttribute('stroke-width', borderWidth);
-        polyline.setAttribute('stroke', 'transparent');
-        polyline.setAttribute('fill', 'none');
+class InkAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
+    this.containerClassName = "inkAnnotation";
+    this.svgElementName = "svg:polyline";
+  }
 
-        this._createPopup(this.container, polyline, data);
+  render() {
+    this.container.className = this.containerClassName;
+    const data = this.data;
+    const width = data.rect[2] - data.rect[0];
+    const height = data.rect[3] - data.rect[1];
+    const svg = this.svgFactory.create(width, height);
 
-        svg.appendChild(polyline);
-      }
+    for (const inkList of data.inkLists) {
+      let points = [];
 
-      this.container.append(svg);
-      return this.container;
-    }
-  }]);
+      for (const coordinate of inkList) {
+        const x = coordinate.x - data.rect[0];
+        const y = data.rect[3] - coordinate.y;
+        points.push(`${x},${y}`);
+      }
 
-  return InkAnnotationElement;
-}(AnnotationElement);
+      points = points.join(" ");
+      const polyline = this.svgFactory.createElement(this.svgElementName);
+      polyline.setAttribute("points", points);
+      polyline.setAttribute("stroke-width", data.borderStyle.width || 1);
+      polyline.setAttribute("stroke", "transparent");
+      polyline.setAttribute("fill", "none");
 
-var HighlightAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement10) {
-  _inherits(HighlightAnnotationElement, _AnnotationElement10);
+      this._createPopup(this.container, polyline, data);
 
-  function HighlightAnnotationElement(parameters) {
-    _classCallCheck(this, HighlightAnnotationElement);
+      svg.appendChild(polyline);
+    }
 
-    var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
-    return _possibleConstructorReturn(this, _getPrototypeOf(HighlightAnnotationElement).call(this, parameters, isRenderable, true));
+    this.container.append(svg);
+    return this.container;
   }
 
-  _createClass(HighlightAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'highlightAnnotation';
+}
 
-      if (!this.data.hasPopup) {
-        this._createPopup(this.container, null, this.data);
-      }
+class HighlightAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
+  }
 
-      return this.container;
-    }
-  }]);
+  render() {
+    this.container.className = "highlightAnnotation";
 
-  return HighlightAnnotationElement;
-}(AnnotationElement);
+    if (!this.data.hasPopup) {
+      this._createPopup(this.container, null, this.data);
+    }
 
-var UnderlineAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement11) {
-  _inherits(UnderlineAnnotationElement, _AnnotationElement11);
+    return this.container;
+  }
 
-  function UnderlineAnnotationElement(parameters) {
-    _classCallCheck(this, UnderlineAnnotationElement);
+}
 
-    var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
-    return _possibleConstructorReturn(this, _getPrototypeOf(UnderlineAnnotationElement).call(this, parameters, isRenderable, true));
+class UnderlineAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
   }
 
-  _createClass(UnderlineAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'underlineAnnotation';
-
-      if (!this.data.hasPopup) {
-        this._createPopup(this.container, null, this.data);
-      }
+  render() {
+    this.container.className = "underlineAnnotation";
 
-      return this.container;
+    if (!this.data.hasPopup) {
+      this._createPopup(this.container, null, this.data);
     }
-  }]);
-
-  return UnderlineAnnotationElement;
-}(AnnotationElement);
 
-var SquigglyAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement12) {
-  _inherits(SquigglyAnnotationElement, _AnnotationElement12);
+    return this.container;
+  }
 
-  function SquigglyAnnotationElement(parameters) {
-    _classCallCheck(this, SquigglyAnnotationElement);
+}
 
-    var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
-    return _possibleConstructorReturn(this, _getPrototypeOf(SquigglyAnnotationElement).call(this, parameters, isRenderable, true));
+class SquigglyAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
   }
 
-  _createClass(SquigglyAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'squigglyAnnotation';
-
-      if (!this.data.hasPopup) {
-        this._createPopup(this.container, null, this.data);
-      }
+  render() {
+    this.container.className = "squigglyAnnotation";
 
-      return this.container;
+    if (!this.data.hasPopup) {
+      this._createPopup(this.container, null, this.data);
     }
-  }]);
 
-  return SquigglyAnnotationElement;
-}(AnnotationElement);
-
-var StrikeOutAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement13) {
-  _inherits(StrikeOutAnnotationElement, _AnnotationElement13);
+    return this.container;
+  }
 
-  function StrikeOutAnnotationElement(parameters) {
-    _classCallCheck(this, StrikeOutAnnotationElement);
+}
 
-    var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
-    return _possibleConstructorReturn(this, _getPrototypeOf(StrikeOutAnnotationElement).call(this, parameters, isRenderable, true));
+class StrikeOutAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
   }
 
-  _createClass(StrikeOutAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'strikeoutAnnotation';
+  render() {
+    this.container.className = "strikeoutAnnotation";
 
-      if (!this.data.hasPopup) {
-        this._createPopup(this.container, null, this.data);
-      }
-
-      return this.container;
+    if (!this.data.hasPopup) {
+      this._createPopup(this.container, null, this.data);
     }
-  }]);
-
-  return StrikeOutAnnotationElement;
-}(AnnotationElement);
 
-var StampAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement14) {
-  _inherits(StampAnnotationElement, _AnnotationElement14);
+    return this.container;
+  }
 
-  function StampAnnotationElement(parameters) {
-    _classCallCheck(this, StampAnnotationElement);
+}
 
-    var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
-    return _possibleConstructorReturn(this, _getPrototypeOf(StampAnnotationElement).call(this, parameters, isRenderable, true));
+class StampAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    const isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);
+    super(parameters, isRenderable, true);
   }
 
-  _createClass(StampAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'stampAnnotation';
-
-      if (!this.data.hasPopup) {
-        this._createPopup(this.container, null, this.data);
-      }
+  render() {
+    this.container.className = "stampAnnotation";
 
-      return this.container;
+    if (!this.data.hasPopup) {
+      this._createPopup(this.container, null, this.data);
     }
-  }]);
 
-  return StampAnnotationElement;
-}(AnnotationElement);
+    return this.container;
+  }
 
-var FileAttachmentAnnotationElement =
-/*#__PURE__*/
-function (_AnnotationElement15) {
-  _inherits(FileAttachmentAnnotationElement, _AnnotationElement15);
+}
+
+class FileAttachmentAnnotationElement extends AnnotationElement {
+  constructor(parameters) {
+    super(parameters, true);
+    const {
+      filename,
+      content
+    } = this.data.file;
+    this.filename = (0, _display_utils.getFilenameFromUrl)(filename);
+    this.content = content;
+
+    if (this.linkService.eventBus) {
+      this.linkService.eventBus.dispatch("fileattachmentannotation", {
+        source: this,
+        id: (0, _util.stringToPDFString)(filename),
+        filename,
+        content
+      });
+    }
+  }
 
-  function FileAttachmentAnnotationElement(parameters) {
-    var _this6;
+  render() {
+    this.container.className = "fileAttachmentAnnotation";
+    const trigger = document.createElement("div");
+    trigger.style.height = this.container.style.height;
+    trigger.style.width = this.container.style.width;
+    trigger.addEventListener("dblclick", this._download.bind(this));
 
-    _classCallCheck(this, FileAttachmentAnnotationElement);
+    if (!this.data.hasPopup && (this.data.title || this.data.contents)) {
+      this._createPopup(this.container, trigger, this.data);
+    }
 
-    _this6 = _possibleConstructorReturn(this, _getPrototypeOf(FileAttachmentAnnotationElement).call(this, parameters, true));
-    var _this6$data$file = _this6.data.file,
-        filename = _this6$data$file.filename,
-        content = _this6$data$file.content;
-    _this6.filename = (0, _dom_utils.getFilenameFromUrl)(filename);
-    _this6.content = content;
+    this.container.appendChild(trigger);
+    return this.container;
+  }
 
-    if (_this6.linkService.eventBus) {
-      _this6.linkService.eventBus.dispatch('fileattachmentannotation', {
-        source: _assertThisInitialized(_assertThisInitialized(_this6)),
-        id: (0, _util.stringToPDFString)(filename),
-        filename: filename,
-        content: content
-      });
+  _download() {
+    if (!this.downloadManager) {
+      (0, _util.warn)("Download cannot be started due to unavailable download manager");
+      return;
     }
 
-    return _this6;
+    this.downloadManager.downloadData(this.content, this.filename, "");
   }
 
-  _createClass(FileAttachmentAnnotationElement, [{
-    key: "render",
-    value: function render() {
-      this.container.className = 'fileAttachmentAnnotation';
-      var trigger = document.createElement('div');
-      trigger.style.height = this.container.style.height;
-      trigger.style.width = this.container.style.width;
-      trigger.addEventListener('dblclick', this._download.bind(this));
-
-      if (!this.data.hasPopup && (this.data.title || this.data.contents)) {
-        this._createPopup(this.container, trigger, this.data);
+}
+
+class AnnotationLayer {
+  static render(parameters) {
+    const sortedAnnotations = [],
+          popupAnnotations = [];
+
+    for (const data of parameters.annotations) {
+      if (!data) {
+        continue;
       }
 
-      this.container.appendChild(trigger);
-      return this.container;
-    }
-  }, {
-    key: "_download",
-    value: function _download() {
-      if (!this.downloadManager) {
-        (0, _util.warn)('Download cannot be started due to unavailable download manager');
-        return;
+      if (data.annotationType === _util.AnnotationType.POPUP) {
+        popupAnnotations.push(data);
+        continue;
       }
 
-      this.downloadManager.downloadData(this.content, this.filename, '');
+      sortedAnnotations.push(data);
+    }
+
+    if (popupAnnotations.length) {
+      sortedAnnotations.push(...popupAnnotations);
     }
-  }]);
 
-  return FileAttachmentAnnotationElement;
-}(AnnotationElement);
+    for (const data of sortedAnnotations) {
+      const element = AnnotationElementFactory.create({
+        data,
+        layer: parameters.div,
+        page: parameters.page,
+        viewport: parameters.viewport,
+        linkService: parameters.linkService,
+        downloadManager: parameters.downloadManager,
+        imageResourcesPath: parameters.imageResourcesPath || "",
+        renderInteractiveForms: parameters.renderInteractiveForms || false,
+        svgFactory: new _display_utils.DOMSVGFactory()
+      });
 
-var AnnotationLayer =
-/*#__PURE__*/
-function () {
-  function AnnotationLayer() {
-    _classCallCheck(this, AnnotationLayer);
+      if (element.isRenderable) {
+        parameters.div.appendChild(element.render());
+      }
+    }
   }
 
-  _createClass(AnnotationLayer, null, [{
-    key: "render",
-    value: function render(parameters) {
-      for (var i = 0, ii = parameters.annotations.length; i < ii; i++) {
-        var data = parameters.annotations[i];
+  static update(parameters) {
+    for (const data of parameters.annotations) {
+      const element = parameters.div.querySelector(`[data-annotation-id="${data.id}"]`);
 
-        if (!data) {
-          continue;
-        }
-
-        var element = AnnotationElementFactory.create({
-          data: data,
-          layer: parameters.div,
-          page: parameters.page,
-          viewport: parameters.viewport,
-          linkService: parameters.linkService,
-          downloadManager: parameters.downloadManager,
-          imageResourcesPath: parameters.imageResourcesPath || '',
-          renderInteractiveForms: parameters.renderInteractiveForms || false,
-          svgFactory: new _dom_utils.DOMSVGFactory()
-        });
-
-        if (element.isRenderable) {
-          parameters.div.appendChild(element.render());
-        }
+      if (element) {
+        element.style.transform = `matrix(${parameters.viewport.transform.join(",")})`;
       }
     }
-  }, {
-    key: "update",
-    value: function 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) {
-          element.style.transform = 'matrix(' + parameters.viewport.transform.join(',') + ')';
-        }
-      }
 
-      parameters.div.removeAttribute('hidden');
-    }
-  }]);
+    parameters.div.removeAttribute("hidden");
+  }
 
-  return AnnotationLayer;
-}();
+}
 
 exports.AnnotationLayer = AnnotationLayer;