Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use more ES6 syntax in src/display/annotation_layer.js

Browse Source 
`let` is converted to `const` where possible, `var` usage is disabled
and template strings are used where possible.
This commit is contained in:
Tim van der Meij 2019-08-31 16:40:39 +02:00
parent d1e6d427cd
commit 49018482dc
No known key found for this signature in database
GPG Key ID: 8C3FD2925A5F2762
1 changed files with 123 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
src/display/annotation_layer.js
View File

@ -12,6 +12,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
/* eslint no-var: error */
import { import {
addLinkAttributes, DOMSVGFactory, getFilenameFromUrl, LinkTarget, addLinkAttributes, DOMSVGFactory, getFilenameFromUrl, LinkTarget,
@ -42,7 +43,7 @@ class AnnotationElementFactory {
* @returns {AnnotationElement} * @returns {AnnotationElement}
*/ */
static create(parameters) { static create(parameters) {
let subtype = parameters.data.annotationType; const subtype = parameters.data.annotationType;
switch (subtype) { switch (subtype) {
case AnnotationType.LINK: case AnnotationType.LINK:
@ -52,7 +53,7 @@ class AnnotationElementFactory {
return new TextAnnotationElement(parameters); return new TextAnnotationElement(parameters);
case AnnotationType.WIDGET: case AnnotationType.WIDGET:
let fieldType = parameters.data.fieldType; const fieldType = parameters.data.fieldType;
switch (fieldType) { switch (fieldType) {
case 'Tx': case 'Tx':
@ -147,8 +148,8 @@ class AnnotationElement {
* @returns {HTMLSectionElement} * @returns {HTMLSectionElement}
*/ */
_createContainer(ignoreBorder = false) { _createContainer(ignoreBorder = false) {
let data = this.data, page = this.page, viewport = this.viewport; const data = this.data, page = this.page, viewport = this.viewport;
let container = document.createElement('section'); const container = document.createElement('section');
let width = data.rect[2] - data.rect[0]; let width = data.rect[2] - data.rect[0];
let height = data.rect[3] - data.rect[1]; let height = data.rect[3] - data.rect[1];
@ -156,18 +157,18 @@ class AnnotationElement {
// Do *not* modify `data.rect`, since that will corrupt the annotation // Do *not* modify `data.rect`, since that will corrupt the annotation
// position on subsequent calls to `_createContainer` (see issue 6804). // position on subsequent calls to `_createContainer` (see issue 6804).
let rect = Util.normalizeRect([ const rect = Util.normalizeRect([
data.rect[0], data.rect[0],
page.view[3] - data.rect[1] + page.view[1], page.view[3] - data.rect[1] + page.view[1],
data.rect[2], data.rect[2],
page.view[3] - data.rect[3] + page.view[1] page.view[3] - data.rect[3] + page.view[1]
]); ]);
container.style.transform = 'matrix(' + viewport.transform.join(',') + ')'; container.style.transform = `matrix(${viewport.transform.join(',')})`;
container.style.transformOrigin = -rect[0] + 'px ' + -rect[1] + 'px'; container.style.transformOrigin = `-${rect[0]}px -${rect[1]}px`;
if (!ignoreBorder && data.borderStyle.width > 0) { if (!ignoreBorder && data.borderStyle.width > 0) {
container.style.borderWidth = data.borderStyle.width + 'px'; container.style.borderWidth = `${data.borderStyle.width}px`;
if (data.borderStyle.style !== AnnotationBorderStyleType.UNDERLINE) { if (data.borderStyle.style !== AnnotationBorderStyleType.UNDERLINE) {
// Underline styles only have a bottom border, so we do not need // Underline styles only have a bottom border, so we do not need
// to adjust for all borders. This yields a similar result as // to adjust for all borders. This yields a similar result as
@ -176,10 +177,10 @@ class AnnotationElement {
height = height - 2 * data.borderStyle.width; height = height - 2 * data.borderStyle.width;
} }
let horizontalRadius = data.borderStyle.horizontalCornerRadius; const horizontalRadius = data.borderStyle.horizontalCornerRadius;
let verticalRadius = data.borderStyle.verticalCornerRadius; const verticalRadius = data.borderStyle.verticalCornerRadius;
if (horizontalRadius > 0 || verticalRadius > 0) { if (horizontalRadius > 0 || verticalRadius > 0) {
let radius = horizontalRadius + 'px / ' + verticalRadius + 'px'; const radius = `${horizontalRadius}px / ${verticalRadius}px`;
container.style.borderRadius = radius; container.style.borderRadius = radius;
} }
@ -218,12 +219,10 @@ class AnnotationElement {
} }
} }
container.style.left = rect[0] + 'px'; container.style.left = `${rect[0]}px`;
container.style.top = rect[1] + 'px'; container.style.top = `${rect[1]}px`;
container.style.width = `${width}px`;
container.style.width = width + 'px'; container.style.height = `${height}px`;
container.style.height = height + 'px';
return container; return container;
} }
@ -247,7 +246,7 @@ class AnnotationElement {
container.appendChild(trigger); container.appendChild(trigger);
} }
let popupElement = new PopupElement({ const popupElement = new PopupElement({
container, container,
trigger, trigger,
color: data.color, color: data.color,
@ -256,7 +255,7 @@ class AnnotationElement {
contents: data.contents, contents: data.contents,
hideWrapper: true, hideWrapper: true,
}); });
let popup = popupElement.render(); const popup = popupElement.render();
// Position the popup next to the annotation's container. // Position the popup next to the annotation's container.
popup.style.left = container.style.width; popup.style.left = container.style.width;
@ -277,8 +276,8 @@ class AnnotationElement {
class LinkAnnotationElement extends AnnotationElement { class LinkAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.url || parameters.data.dest || const isRenderable = !!(parameters.data.url || parameters.data.dest ||
parameters.data.action); parameters.data.action);
super(parameters, isRenderable); super(parameters, isRenderable);
} }
@ -292,8 +291,8 @@ class LinkAnnotationElement extends AnnotationElement {
render() { render() {
this.container.className = 'linkAnnotation'; this.container.className = 'linkAnnotation';
let { data, linkService, } = this; const { data, linkService, } = this;
let link = document.createElement('a'); const link = document.createElement('a');
addLinkAttributes(link, { addLinkAttributes(link, {
url: data.url, url: data.url,
@ -356,8 +355,8 @@ class LinkAnnotationElement extends AnnotationElement {
class TextAnnotationElement extends AnnotationElement { class TextAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.hasPopup || const isRenderable = !!(parameters.data.hasPopup ||
parameters.data.title || parameters.data.contents); parameters.data.title || parameters.data.contents);
super(parameters, isRenderable); super(parameters, isRenderable);
} }
@ -371,7 +370,7 @@ class TextAnnotationElement extends AnnotationElement {
render() { render() {
this.container.className = 'textAnnotation'; this.container.className = 'textAnnotation';
let image = document.createElement('img'); const image = document.createElement('img');
image.style.height = this.container.style.height; image.style.height = this.container.style.height;
image.style.width = this.container.style.width; image.style.width = this.container.style.width;
image.src = this.imageResourcesPath + 'annotation-' + image.src = this.imageResourcesPath + 'annotation-' +
@ -405,7 +404,7 @@ class WidgetAnnotationElement extends AnnotationElement {
class TextWidgetAnnotationElement extends WidgetAnnotationElement { class TextWidgetAnnotationElement extends WidgetAnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = parameters.renderInteractiveForms || const isRenderable = parameters.renderInteractiveForms ||
(!parameters.data.hasAppearance && !!parameters.data.fieldValue); (!parameters.data.hasAppearance && !!parameters.data.fieldValue);
super(parameters, isRenderable); super(parameters, isRenderable);
} }
@ -443,11 +442,11 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
} }
if (this.data.comb) { if (this.data.comb) {
let fieldWidth = this.data.rect[2] - this.data.rect[0]; const fieldWidth = this.data.rect[2] - this.data.rect[0];
let combWidth = fieldWidth / this.data.maxLen; const combWidth = fieldWidth / this.data.maxLen;
element.classList.add('comb'); element.classList.add('comb');
element.style.letterSpacing = 'calc(' + combWidth + 'px - 1ch)'; element.style.letterSpacing = `calc(${combWidth}px - 1ch)`;
} }
} else { } else {
element = document.createElement('div'); element = document.createElement('div');
@ -481,8 +480,8 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
*/ */
_setTextStyle(element, font) { _setTextStyle(element, font) {
// TODO: This duplicates some of the logic in CanvasGraphics.setFont(). // TODO: This duplicates some of the logic in CanvasGraphics.setFont().
let style = element.style; const style = element.style;
style.fontSize = this.data.fontSize + 'px'; style.fontSize = `${this.data.fontSize}px`;
style.direction = (this.data.fontDirection < 0 ? 'rtl' : 'ltr'); style.direction = (this.data.fontDirection < 0 ? 'rtl' : 'ltr');
if (!font) { if (!font) {
@ -495,8 +494,8 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
style.fontStyle = (font.italic ? 'italic' : 'normal'); style.fontStyle = (font.italic ? 'italic' : 'normal');
// Use a reasonable default font if the font doesn't specify a fallback. // Use a reasonable default font if the font doesn't specify a fallback.
let fontFamily = font.loadedName ? '"' + font.loadedName + '", ' : ''; const fontFamily = font.loadedName ? `"${font.loadedName}", ` : '';
let fallbackName = font.fallbackName || 'Helvetica, sans-serif'; const fallbackName = font.fallbackName || 'Helvetica, sans-serif';
style.fontFamily = fontFamily + fallbackName; style.fontFamily = fontFamily + fallbackName;
} }
} }
@ -517,7 +516,7 @@ class CheckboxWidgetAnnotationElement extends WidgetAnnotationElement {
render() { render() {
this.container.className = 'buttonWidgetAnnotation checkBox'; this.container.className = 'buttonWidgetAnnotation checkBox';
let element = document.createElement('input'); const element = document.createElement('input');
element.disabled = this.data.readOnly; element.disabled = this.data.readOnly;
element.type = 'checkbox'; element.type = 'checkbox';
if (this.data.fieldValue && this.data.fieldValue !== 'Off') { if (this.data.fieldValue && this.data.fieldValue !== 'Off') {
@ -545,7 +544,7 @@ class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
render() { render() {
this.container.className = 'buttonWidgetAnnotation radioButton'; this.container.className = 'buttonWidgetAnnotation radioButton';
let element = document.createElement('input'); const element = document.createElement('input');
element.disabled = this.data.readOnly; element.disabled = this.data.readOnly;
element.type = 'radio'; element.type = 'radio';
element.name = this.data.fieldName; element.name = this.data.fieldName;
@ -571,7 +570,7 @@ class PushButtonWidgetAnnotationElement extends LinkAnnotationElement {
// The rendering and functionality of a push button widget annotation is // The rendering and functionality of a push button widget annotation is
// equal to that of a link annotation, but may have more functionality, such // equal to that of a link annotation, but may have more functionality, such
// as performing actions on form fields (resetting, submitting, et cetera). // as performing actions on form fields (resetting, submitting, et cetera).
let container = super.render(); const container = super.render();
container.className = 'buttonWidgetAnnotation pushButton'; container.className = 'buttonWidgetAnnotation pushButton';
return container; return container;
} }
@ -593,30 +592,25 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
render() { render() {
this.container.className = 'choiceWidgetAnnotation'; this.container.className = 'choiceWidgetAnnotation';
let selectElement = document.createElement('select'); const selectElement = document.createElement('select');
selectElement.disabled = this.data.readOnly; selectElement.disabled = this.data.readOnly;
if (!this.data.combo) { if (!this.data.combo) {
// List boxes have a size and (optionally) multiple selection. // List boxes have a size and (optionally) multiple selection.
selectElement.size = this.data.options.length; selectElement.size = this.data.options.length;
if (this.data.multiSelect) { if (this.data.multiSelect) {
selectElement.multiple = true; selectElement.multiple = true;
} }
} }
// Insert the options into the choice field. // Insert the options into the choice field.
for (let i = 0, ii = this.data.options.length; i < ii; i++) { for (const option of this.data.options) {
let option = this.data.options[i]; const optionElement = document.createElement('option');
let optionElement = document.createElement('option');
optionElement.textContent = option.displayValue; optionElement.textContent = option.displayValue;
optionElement.value = option.exportValue; optionElement.value = option.exportValue;
if (this.data.fieldValue.includes(option.displayValue)) { if (this.data.fieldValue.includes(option.displayValue)) {
optionElement.setAttribute('selected', true); optionElement.setAttribute('selected', true);
} }
selectElement.appendChild(optionElement); selectElement.appendChild(optionElement);
} }
@ -627,7 +621,7 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
class PopupAnnotationElement extends AnnotationElement { class PopupAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.title || parameters.data.contents); const isRenderable = !!(parameters.data.title || parameters.data.contents);
super(parameters, isRenderable); super(parameters, isRenderable);
} }
@ -656,13 +650,13 @@ class PopupAnnotationElement extends AnnotationElement {
return this.container; return this.container;
} }
let selector = '[data-annotation-id="' + this.data.parentId + '"]'; const selector = `[data-annotation-id="${this.data.parentId}"]`;
let parentElement = this.layer.querySelector(selector); const parentElement = this.layer.querySelector(selector);
if (!parentElement) { if (!parentElement) {
return this.container; return this.container;
} }
let popup = new PopupElement({ const popup = new PopupElement({
container: this.container, container: this.container,
trigger: parentElement, trigger: parentElement,
color: this.data.color, color: this.data.color,
@ -673,11 +667,11 @@ class PopupAnnotationElement extends AnnotationElement {
// Position the popup next to the parent annotation's container. // Position the popup next to the parent annotation's container.
// PDF viewers ignore a popup annotation's rectangle. // PDF viewers ignore a popup annotation's rectangle.
let parentLeft = parseFloat(parentElement.style.left); const parentLeft = parseFloat(parentElement.style.left);
let parentWidth = parseFloat(parentElement.style.width); const parentWidth = parseFloat(parentElement.style.width);
this.container.style.transformOrigin = this.container.style.transformOrigin =
-(parentLeft + parentWidth) + 'px -' + parentElement.style.top; `-${parentLeft + parentWidth}px -${parentElement.style.top}`;
this.container.style.left = (parentLeft + parentWidth) + 'px'; this.container.style.left = `${parentLeft + parentWidth}px`;
this.container.appendChild(popup.render()); this.container.appendChild(popup.render());
return this.container; return this.container;
@ -707,7 +701,7 @@ class PopupElement {
render() { render() {
const BACKGROUND_ENLIGHT = 0.7; const BACKGROUND_ENLIGHT = 0.7;
let wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.className = 'popupWrapper'; wrapper.className = 'popupWrapper';
// For Popup annotations we hide the entire section because it contains // For Popup annotations we hide the entire section because it contains
@ -717,19 +711,19 @@ class PopupElement {
this.hideElement = (this.hideWrapper ? wrapper : this.container); this.hideElement = (this.hideWrapper ? wrapper : this.container);
this.hideElement.setAttribute('hidden', true); this.hideElement.setAttribute('hidden', true);
let popup = document.createElement('div'); const popup = document.createElement('div');
popup.className = 'popup'; popup.className = 'popup';
let color = this.color; const color = this.color;
if (color) { if (color) {
// Enlighten the color. // Enlighten the color.
let r = BACKGROUND_ENLIGHT * (255 - color[0]) + color[0]; const r = BACKGROUND_ENLIGHT * (255 - color[0]) + color[0];
let g = BACKGROUND_ENLIGHT * (255 - color[1]) + color[1]; const g = BACKGROUND_ENLIGHT * (255 - color[1]) + color[1];
let b = BACKGROUND_ENLIGHT * (255 - color[2]) + color[2]; const b = BACKGROUND_ENLIGHT * (255 - color[2]) + color[2];
popup.style.backgroundColor = Util.makeCssRgb(r | 0, g | 0, b | 0); popup.style.backgroundColor = Util.makeCssRgb(r | 0, g | 0, b | 0);
} }
let title = document.createElement('h1'); const title = document.createElement('h1');
title.textContent = this.title; title.textContent = this.title;
popup.appendChild(title); popup.appendChild(title);
@ -748,7 +742,7 @@ class PopupElement {
popup.appendChild(modificationDate); popup.appendChild(modificationDate);
} }
let contents = this._formatContents(this.contents); const contents = this._formatContents(this.contents);
popup.appendChild(contents); popup.appendChild(contents);
// Attach the event listeners to the trigger element. // Attach the event listeners to the trigger element.
@ -770,10 +764,10 @@ class PopupElement {
* @returns {HTMLParagraphElement} * @returns {HTMLParagraphElement}
*/ */
_formatContents(contents) { _formatContents(contents) {
let p = document.createElement('p'); const p = document.createElement('p');
let lines = contents.split(/(?:\r\n?|\n)/); const lines = contents.split(/(?:\r\n?|\n)/);
for (let i = 0, ii = lines.length; i < ii; ++i) { for (let i = 0, ii = lines.length; i < ii; ++i) {
let line = lines[i]; const line = lines[i];
p.appendChild(document.createTextNode(line)); p.appendChild(document.createTextNode(line));
if (i < (ii - 1)) { if (i < (ii - 1)) {
p.appendChild(document.createElement('br')); p.appendChild(document.createElement('br'));
@ -857,8 +851,8 @@ class FreeTextAnnotationElement extends AnnotationElement {
class LineAnnotationElement extends AnnotationElement { class LineAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.hasPopup || const isRenderable = !!(parameters.data.hasPopup ||
parameters.data.title || parameters.data.contents); parameters.data.title || parameters.data.contents);
super(parameters, isRenderable, /* ignoreBorder = */ true); super(parameters, isRenderable, /* ignoreBorder = */ true);
} }
@ -875,14 +869,14 @@ class LineAnnotationElement extends AnnotationElement {
// Create an invisible line with the same starting and ending coordinates // Create an invisible line with the same starting and ending coordinates
// that acts as the trigger for the popup. Only the line itself should // that acts as the trigger for the popup. Only the line itself should
// trigger the popup, not the entire container. // trigger the popup, not the entire container.
let data = this.data; const data = this.data;
let width = data.rect[2] - data.rect[0]; const width = data.rect[2] - data.rect[0];
let height = data.rect[3] - data.rect[1]; const height = data.rect[3] - data.rect[1];
let svg = this.svgFactory.create(width, height); const svg = this.svgFactory.create(width, height);
// PDF coordinates are calculated from a bottom left origin, so transform // PDF coordinates are calculated from a bottom left origin, so transform
// the line coordinates to a top left origin for the SVG element. // the line coordinates to a top left origin for the SVG element.
let line = this.svgFactory.createElement('svg:line'); const line = this.svgFactory.createElement('svg:line');
line.setAttribute('x1', data.rect[2] - data.lineCoordinates[0]); line.setAttribute('x1', data.rect[2] - data.lineCoordinates[0]);
line.setAttribute('y1', data.rect[3] - data.lineCoordinates[1]); line.setAttribute('y1', data.rect[3] - data.lineCoordinates[1]);
line.setAttribute('x2', data.rect[2] - data.lineCoordinates[2]); line.setAttribute('x2', data.rect[2] - data.lineCoordinates[2]);
@ -903,8 +897,8 @@ class LineAnnotationElement extends AnnotationElement {
class SquareAnnotationElement extends AnnotationElement { class SquareAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.hasPopup || const isRenderable = !!(parameters.data.hasPopup ||
parameters.data.title || parameters.data.contents); parameters.data.title || parameters.data.contents);
super(parameters, isRenderable, /* ignoreBorder = */ true); super(parameters, isRenderable, /* ignoreBorder = */ true);
} }
@ -921,16 +915,16 @@ class SquareAnnotationElement extends AnnotationElement {
// Create an invisible square with the same rectangle that acts as the // Create an invisible square with the same rectangle that acts as the
// trigger for the popup. Only the square itself should trigger the // trigger for the popup. Only the square itself should trigger the
// popup, not the entire container. // popup, not the entire container.
let data = this.data; const data = this.data;
let width = data.rect[2] - data.rect[0]; const width = data.rect[2] - data.rect[0];
let height = data.rect[3] - data.rect[1]; const height = data.rect[3] - data.rect[1];
let svg = this.svgFactory.create(width, height); const svg = this.svgFactory.create(width, height);
// The browser draws half of the borders inside the square and half of // The browser draws half of the borders inside the square and half of
// the borders outside the square by default. This behavior cannot be // the borders outside the square by default. This behavior cannot be
// changed programmatically, so correct for that here. // changed programmatically, so correct for that here.
let borderWidth = data.borderStyle.width; const borderWidth = data.borderStyle.width;
let square = this.svgFactory.createElement('svg:rect'); const square = this.svgFactory.createElement('svg:rect');
square.setAttribute('x', borderWidth / 2); square.setAttribute('x', borderWidth / 2);
square.setAttribute('y', borderWidth / 2); square.setAttribute('y', borderWidth / 2);
square.setAttribute('width', width - borderWidth); square.setAttribute('width', width - borderWidth);
@ -952,8 +946,8 @@ class SquareAnnotationElement extends AnnotationElement {
class CircleAnnotationElement extends AnnotationElement { class CircleAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.hasPopup || const isRenderable = !!(parameters.data.hasPopup ||
parameters.data.title || parameters.data.contents); parameters.data.title || parameters.data.contents);
super(parameters, isRenderable, /* ignoreBorder = */ true); super(parameters, isRenderable, /* ignoreBorder = */ true);
} }
@ -970,16 +964,16 @@ class CircleAnnotationElement extends AnnotationElement {
// Create an invisible circle with the same ellipse that acts as the // Create an invisible circle with the same ellipse that acts as the
// trigger for the popup. Only the circle itself should trigger the // trigger for the popup. Only the circle itself should trigger the
// popup, not the entire container. // popup, not the entire container.
let data = this.data; const data = this.data;
let width = data.rect[2] - data.rect[0]; const width = data.rect[2] - data.rect[0];
let height = data.rect[3] - data.rect[1]; const height = data.rect[3] - data.rect[1];
let svg = this.svgFactory.create(width, height); const svg = this.svgFactory.create(width, height);
// The browser draws half of the borders inside the circle and half of // The browser draws half of the borders inside the circle and half of
// the borders outside the circle by default. This behavior cannot be // the borders outside the circle by default. This behavior cannot be
// changed programmatically, so correct for that here. // changed programmatically, so correct for that here.
let borderWidth = data.borderStyle.width; const borderWidth = data.borderStyle.width;
let circle = this.svgFactory.createElement('svg:ellipse'); const circle = this.svgFactory.createElement('svg:ellipse');
circle.setAttribute('cx', width / 2); circle.setAttribute('cx', width / 2);
circle.setAttribute('cy', height / 2); circle.setAttribute('cy', height / 2);
circle.setAttribute('rx', (width / 2) - (borderWidth / 2)); circle.setAttribute('rx', (width / 2) - (borderWidth / 2));
@ -1001,8 +995,8 @@ class CircleAnnotationElement extends AnnotationElement {
class PolylineAnnotationElement extends AnnotationElement { class PolylineAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.hasPopup || const isRenderable = !!(parameters.data.hasPopup ||
parameters.data.title || parameters.data.contents); parameters.data.title || parameters.data.contents);
super(parameters, isRenderable, /* ignoreBorder = */ true); super(parameters, isRenderable, /* ignoreBorder = */ true);
this.containerClassName = 'polylineAnnotation'; this.containerClassName = 'polylineAnnotation';
@ -1022,28 +1016,26 @@ class PolylineAnnotationElement extends AnnotationElement {
// Create an invisible polyline with the same points that acts as the // Create an invisible polyline with the same points that acts as the
// trigger for the popup. Only the polyline itself should trigger the // trigger for the popup. Only the polyline itself should trigger the
// popup, not the entire container. // popup, not the entire container.
let data = this.data; const data = this.data;
let width = data.rect[2] - data.rect[0]; const width = data.rect[2] - data.rect[0];
let height = data.rect[3] - data.rect[1]; const height = data.rect[3] - data.rect[1];
let svg = this.svgFactory.create(width, height); const svg = this.svgFactory.create(width, height);
// Convert the vertices array to a single points string that the SVG // Convert the vertices array to a single points string that the SVG
// polyline element expects ("x1,y1 x2,y2 ..."). PDF coordinates are // polyline element expects ("x1,y1 x2,y2 ..."). PDF coordinates are
// calculated from a bottom left origin, so transform the polyline // calculated from a bottom left origin, so transform the polyline
// coordinates to a top left origin for the SVG element. // coordinates to a top left origin for the SVG element.
let vertices = data.vertices;
let points = []; let points = [];
for (let i = 0, ii = vertices.length; i < ii; i++) { for (const coordinate of data.vertices) {
let x = vertices[i].x - data.rect[0]; const x = coordinate.x - data.rect[0];
let y = data.rect[3] - vertices[i].y; const y = data.rect[3] - coordinate.y;
points.push(x + ',' + y); points.push(x + ',' + y);
} }
points = points.join(' '); points = points.join(' ');
let borderWidth = data.borderStyle.width; const polyline = this.svgFactory.createElement(this.svgElementName);
let polyline = this.svgFactory.createElement(this.svgElementName);
polyline.setAttribute('points', points); polyline.setAttribute('points', points);
polyline.setAttribute('stroke-width', borderWidth); polyline.setAttribute('stroke-width', data.borderStyle.width);
polyline.setAttribute('stroke', 'transparent'); polyline.setAttribute('stroke', 'transparent');
polyline.setAttribute('fill', 'none'); polyline.setAttribute('fill', 'none');
@ -1094,8 +1086,8 @@ class CaretAnnotationElement extends AnnotationElement {
class InkAnnotationElement extends AnnotationElement { class InkAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.hasPopup || const isRenderable = !!(parameters.data.hasPopup ||
parameters.data.title || parameters.data.contents); parameters.data.title || parameters.data.contents);
super(parameters, isRenderable, /* ignoreBorder = */ true); super(parameters, isRenderable, /* ignoreBorder = */ true);
this.containerClassName = 'inkAnnotation'; this.containerClassName = 'inkAnnotation';
@ -1117,32 +1109,27 @@ class InkAnnotationElement extends AnnotationElement {
// Create an invisible polyline with the same points that acts as the // Create an invisible polyline with the same points that acts as the
// trigger for the popup. // trigger for the popup.
let data = this.data; const data = this.data;
let width = data.rect[2] - data.rect[0]; const width = data.rect[2] - data.rect[0];
let height = data.rect[3] - data.rect[1]; const height = data.rect[3] - data.rect[1];
let svg = this.svgFactory.create(width, height); const svg = this.svgFactory.create(width, height);
let inkLists = data.inkLists;
for (let i = 0, ii = inkLists.length; i < ii; i++) {
let inkList = inkLists[i];
let points = [];
for (const inkList of data.inkLists) {
// Convert the ink list to a single points string that the SVG // Convert the ink list to a single points string that the SVG
// polyline element expects ("x1,y1 x2,y2 ..."). PDF coordinates are // polyline element expects ("x1,y1 x2,y2 ..."). PDF coordinates are
// calculated from a bottom left origin, so transform the polyline // calculated from a bottom left origin, so transform the polyline
// coordinates to a top left origin for the SVG element. // coordinates to a top left origin for the SVG element.
for (let j = 0, jj = inkList.length; j < jj; j++) { let points = [];
let x = inkList[j].x - data.rect[0]; for (const coordinate of inkList) {
let y = data.rect[3] - inkList[j].y; const x = coordinate.x - data.rect[0];
points.push(x + ',' + y); const y = data.rect[3] - coordinate.y;
points.push(`${x},${y}`);
} }
points = points.join(' '); points = points.join(' ');
let borderWidth = data.borderStyle.width; const polyline = this.svgFactory.createElement(this.svgElementName);
let polyline = this.svgFactory.createElement(this.svgElementName);
polyline.setAttribute('points', points); polyline.setAttribute('points', points);
polyline.setAttribute('stroke-width', borderWidth); polyline.setAttribute('stroke-width', data.borderStyle.width);
polyline.setAttribute('stroke', 'transparent'); polyline.setAttribute('stroke', 'transparent');
polyline.setAttribute('fill', 'none'); polyline.setAttribute('fill', 'none');
@ -1154,15 +1141,14 @@ class InkAnnotationElement extends AnnotationElement {
} }
this.container.append(svg); this.container.append(svg);
return this.container; return this.container;
} }
} }
class HighlightAnnotationElement extends AnnotationElement { class HighlightAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.hasPopup || const isRenderable = !!(parameters.data.hasPopup ||
parameters.data.title || parameters.data.contents); parameters.data.title || parameters.data.contents);
super(parameters, isRenderable, /* ignoreBorder = */ true); super(parameters, isRenderable, /* ignoreBorder = */ true);
} }
@ -1185,8 +1171,8 @@ class HighlightAnnotationElement extends AnnotationElement {
class UnderlineAnnotationElement extends AnnotationElement { class UnderlineAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.hasPopup || const isRenderable = !!(parameters.data.hasPopup ||
parameters.data.title || parameters.data.contents); parameters.data.title || parameters.data.contents);
super(parameters, isRenderable, /* ignoreBorder = */ true); super(parameters, isRenderable, /* ignoreBorder = */ true);
} }
@ -1209,8 +1195,8 @@ class UnderlineAnnotationElement extends AnnotationElement {
class SquigglyAnnotationElement extends AnnotationElement { class SquigglyAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.hasPopup || const isRenderable = !!(parameters.data.hasPopup ||
parameters.data.title || parameters.data.contents); parameters.data.title || parameters.data.contents);
super(parameters, isRenderable, /* ignoreBorder = */ true); super(parameters, isRenderable, /* ignoreBorder = */ true);
} }
@ -1233,8 +1219,8 @@ class SquigglyAnnotationElement extends AnnotationElement {
class StrikeOutAnnotationElement extends AnnotationElement { class StrikeOutAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.hasPopup || const isRenderable = !!(parameters.data.hasPopup ||
parameters.data.title || parameters.data.contents); parameters.data.title || parameters.data.contents);
super(parameters, isRenderable, /* ignoreBorder = */ true); super(parameters, isRenderable, /* ignoreBorder = */ true);
} }
@ -1257,8 +1243,8 @@ class StrikeOutAnnotationElement extends AnnotationElement {
class StampAnnotationElement extends AnnotationElement { class StampAnnotationElement extends AnnotationElement {
constructor(parameters) { constructor(parameters) {
let isRenderable = !!(parameters.data.hasPopup || const isRenderable = !!(parameters.data.hasPopup ||
parameters.data.title || parameters.data.contents); parameters.data.title || parameters.data.contents);
super(parameters, isRenderable, /* ignoreBorder = */ true); super(parameters, isRenderable, /* ignoreBorder = */ true);
} }
@ -1308,7 +1294,7 @@ class FileAttachmentAnnotationElement extends AnnotationElement {
render() { render() {
this.container.className = 'fileAttachmentAnnotation'; this.container.className = 'fileAttachmentAnnotation';
let trigger = document.createElement('div'); const trigger = document.createElement('div');
trigger.style.height = this.container.style.height; trigger.style.height = this.container.style.height;
trigger.style.width = this.container.style.width; trigger.style.width = this.container.style.width;
trigger.addEventListener('dblclick', this._download.bind(this)); trigger.addEventListener('dblclick', this._download.bind(this));
@ -1358,12 +1344,11 @@ class AnnotationLayer {
* @memberof AnnotationLayer * @memberof AnnotationLayer
*/ */
static render(parameters) { static render(parameters) {
for (let i = 0, ii = parameters.annotations.length; i < ii; i++) { for (const data of parameters.annotations) {
let data = parameters.annotations[i];
if (!data) { if (!data) {
continue; continue;
} }
let element = AnnotationElementFactory.create({ const element = AnnotationElementFactory.create({
data, data,
layer: parameters.div, layer: parameters.div,
page: parameters.page, page: parameters.page,
@ -1388,13 +1373,12 @@ class AnnotationLayer {
* @memberof AnnotationLayer * @memberof AnnotationLayer
*/ */
static update(parameters) { static update(parameters) {
for (let i = 0, ii = parameters.annotations.length; i < ii; i++) { for (const data of parameters.annotations) {
let data = parameters.annotations[i]; const element = parameters.div.querySelector(
let element = parameters.div.querySelector( `[data-annotation-id="${data.id}"]`);
'[data-annotation-id="' + data.id + '"]');
if (element) { if (element) {
element.style.transform = element.style.transform =
'matrix(' + parameters.viewport.transform.join(',') + ')'; `matrix(${parameters.viewport.transform.join(',')})`;
} }
} }
parameters.div.removeAttribute('hidden'); parameters.div.removeAttribute('hidden');