Merge pull request #8455 from timvandermeij/es6-page-view

Convert the page view to ES6 syntax

web/pdf_page_view.js

@@ -24,7 +24,7 @@ import {
 import { getGlobalEventBus } from './dom_events';
 import { RenderingStates } from './pdf_rendering_queue';
 
-var TEXT_LAYER_RENDER_DELAY = 200; // ms
+const TEXT_LAYER_RENDER_DELAY = 200; // ms
 
 /**
  * @typedef {Object} PDFPageViewOptions
@@ -44,41 +44,32 @@ var TEXT_LAYER_RENDER_DELAY = 200; // ms
  */
 
 /**
- * @class
  * @implements {IRenderableView}
  */
-var PDFPageView = (function PDFPageViewClosure() {
+class PDFPageView {
   /**
-   * @constructs PDFPageView
    * @param {PDFPageViewOptions} options
    */
-  function PDFPageView(options) {
-    var container = options.container;
-    var id = options.id;
-    var scale = options.scale;
-    var defaultViewport = options.defaultViewport;
-    var renderingQueue = options.renderingQueue;
-    var textLayerFactory = options.textLayerFactory;
-    var annotationLayerFactory = options.annotationLayerFactory;
-    var enhanceTextSelection = options.enhanceTextSelection || false;
-    var renderInteractiveForms = options.renderInteractiveForms || false;
-
-    this.id = id;
-    this.renderingId = 'page' + id;
-    this.pageLabel = null;
+  constructor(options) {
+    let container = options.container;
+    let defaultViewport = options.defaultViewport;
+
+    this.id = options.id;
+    this.renderingId = 'page' + this.id;
 
+    this.pageLabel = null;
     this.rotation = 0;
-    this.scale = scale || DEFAULT_SCALE;
+    this.scale = options.scale || DEFAULT_SCALE;
     this.viewport = defaultViewport;
     this.pdfPageRotate = defaultViewport.rotation;
     this.hasRestrictedScaling = false;
-    this.enhanceTextSelection = enhanceTextSelection;
-    this.renderInteractiveForms = renderInteractiveForms;
+    this.enhanceTextSelection = options.enhanceTextSelection || false;
+    this.renderInteractiveForms = options.renderInteractiveForms || false;
 
     this.eventBus = options.eventBus || getGlobalEventBus();
-    this.renderingQueue = renderingQueue;
-    this.textLayerFactory = textLayerFactory;
-    this.annotationLayerFactory = annotationLayerFactory;
+    this.renderingQueue = options.renderingQueue;
+    this.textLayerFactory = options.textLayerFactory;
+    this.annotationLayerFactory = options.annotationLayerFactory;
     this.renderer = options.renderer || RendererType.CANVAS;
 
     this.paintTask = null;
@@ -90,13 +81,11 @@ var PDFPageView = (function PDFPageViewClosure() {
     this.onBeforeDraw = null;
     this.onAfterDraw = null;
 
+    this.annotationLayer = null;
     this.textLayer = null;
-
     this.zoomLayer = null;
 
-    this.annotationLayer = null;
-
-    var div = document.createElement('div');
+    let div = document.createElement('div');
     div.className = 'page';
     div.style.width = Math.floor(this.viewport.width) + 'px';
     div.style.height = Math.floor(this.viewport.height) + 'px';
@@ -106,23 +95,23 @@ var PDFPageView = (function PDFPageViewClosure() {
     container.appendChild(div);
   }
 
-  PDFPageView.prototype = {
-    setPdfPage: function PDFPageView_setPdfPage(pdfPage) {
+  setPdfPage(pdfPage) {
     this.pdfPage = pdfPage;
     this.pdfPageRotate = pdfPage.rotate;
-      var totalRotation = (this.rotation + this.pdfPageRotate) % 360;
+
+    let totalRotation = (this.rotation + this.pdfPageRotate) % 360;
     this.viewport = pdfPage.getViewport(this.scale * CSS_UNITS,
                                         totalRotation);
     this.stats = pdfPage.stats;
     this.reset();
-    },
+  }
 
-    destroy: function PDFPageView_destroy() {
+  destroy() {
     this.reset();
     if (this.pdfPage) {
       this.pdfPage.cleanup();
     }
-    },
+  }
 
   /**
    * @private
@@ -131,7 +120,7 @@ var PDFPageView = (function PDFPageViewClosure() {
     if (!this.zoomLayer) {
       return;
     }
-      var zoomLayerCanvas = this.zoomLayer.firstChild;
+    let zoomLayerCanvas = this.zoomLayer.firstChild;
     this.paintedViewportMap.delete(zoomLayerCanvas);
     // Zeroing the width and height causes Firefox to release graphics
     // resources immediately, which can greatly reduce memory consumption.
@@ -139,25 +128,25 @@ var PDFPageView = (function PDFPageViewClosure() {
     zoomLayerCanvas.height = 0;
 
     if (removeFromDOM) {
-        // Note: ChildNode.remove doesn't throw if the parentNode is undefined.
+      // Note: `ChildNode.remove` doesn't throw if the parent node is undefined.
       this.zoomLayer.remove();
     }
     this.zoomLayer = null;
-    },
+  }
 
-    reset: function PDFPageView_reset(keepZoomLayer, keepAnnotations) {
+  reset(keepZoomLayer = false, keepAnnotations = false) {
     this.cancelRendering();
 
-      var div = this.div;
+    let div = this.div;
     div.style.width = Math.floor(this.viewport.width) + 'px';
     div.style.height = Math.floor(this.viewport.height) + 'px';
 
-      var childNodes = div.childNodes;
-      var currentZoomLayerNode = (keepZoomLayer && this.zoomLayer) || null;
-      var currentAnnotationNode = (keepAnnotations && this.annotationLayer &&
+    let childNodes = div.childNodes;
+    let currentZoomLayerNode = (keepZoomLayer && this.zoomLayer) || null;
+    let currentAnnotationNode = (keepAnnotations && this.annotationLayer &&
                                  this.annotationLayer.div) || null;
-      for (var i = childNodes.length - 1; i >= 0; i--) {
-        var node = childNodes[i];
+    for (let i = childNodes.length - 1; i >= 0; i--) {
+      let node = childNodes[i];
       if (currentZoomLayerNode === node || currentAnnotationNode === node) {
         continue;
       }
@@ -166,8 +155,8 @@ var PDFPageView = (function PDFPageViewClosure() {
     div.removeAttribute('data-loaded');
 
     if (currentAnnotationNode) {
-        // Hide annotationLayer until all elements are resized
-        // so they are not displayed on the already-resized page
+      // Hide the annotation layer until all elements are resized
+      // so they are not displayed on the already resized page.
       this.annotationLayer.hide();
     } else {
       this.annotationLayer = null;
@@ -192,19 +181,18 @@ var PDFPageView = (function PDFPageViewClosure() {
     this.loadingIconDiv = document.createElement('div');
     this.loadingIconDiv.className = 'loadingIcon';
     div.appendChild(this.loadingIconDiv);
-    },
+  }
 
-    update: function PDFPageView_update(scale, rotation) {
+  update(scale, rotation) {
     this.scale = scale || this.scale;
-
-      if (typeof rotation !== 'undefined') {
+    if (typeof rotation !== 'undefined') { // The rotation may be zero.
       this.rotation = rotation;
     }
 
-      var totalRotation = (this.rotation + this.pdfPageRotate) % 360;
+    let totalRotation = (this.rotation + this.pdfPageRotate) % 360;
     this.viewport = this.viewport.clone({
       scale: this.scale * CSS_UNITS,
-        rotation: totalRotation
+      rotation: totalRotation,
     });
 
     if (this.svg) {
@@ -218,9 +206,9 @@ var PDFPageView = (function PDFPageViewClosure() {
       return;
     }
 
-      var isScalingRestricted = false;
+    let isScalingRestricted = false;
     if (this.canvas && PDFJS.maxCanvasPixels > 0) {
-        var outputScale = this.outputScale;
+      let outputScale = this.outputScale;
       if (((Math.floor(this.viewport.width) * outputScale.sx) | 0) *
           ((Math.floor(this.viewport.height) * outputScale.sy) | 0) >
           PDFJS.maxCanvasPixels) {
@@ -249,9 +237,9 @@ var PDFPageView = (function PDFPageViewClosure() {
       this.cssTransform(this.zoomLayer.firstChild);
     }
     this.reset(/* keepZoomLayer = */ true, /* keepAnnotations = */ true);
-    },
+  }
 
-    cancelRendering: function PDFPageView_cancelRendering() {
+  cancelRendering() {
     if (this.paintTask) {
       this.paintTask.cancel();
       this.paintTask = null;
@@ -263,37 +251,37 @@ var PDFPageView = (function PDFPageViewClosure() {
       this.textLayer.cancel();
       this.textLayer = null;
     }
-    },
+  }
 
   /**
    * Called when moved in the parent's container.
    */
-    updatePosition: function PDFPageView_updatePosition() {
+  updatePosition() {
     if (this.textLayer) {
       this.textLayer.render(TEXT_LAYER_RENDER_DELAY);
     }
-    },
+  }
 
-    cssTransform: function PDFPageView_transform(target, redrawAnnotations) {
-      // Scale target (canvas or svg), its wrapper, and page container.
-      var width = this.viewport.width;
-      var height = this.viewport.height;
-      var div = this.div;
+  cssTransform(target, redrawAnnotations = false) {
+    // Scale target (canvas or svg), its wrapper and page container.
+    let width = this.viewport.width;
+    let height = this.viewport.height;
+    let div = this.div;
     target.style.width = target.parentNode.style.width = div.style.width =
       Math.floor(width) + 'px';
     target.style.height = target.parentNode.style.height = div.style.height =
       Math.floor(height) + 'px';
-      // The canvas may have been originally rotated, rotate relative to that.
-      var relativeRotation = this.viewport.rotation -
+    // The canvas may have been originally rotated; rotate relative to that.
+    let relativeRotation = this.viewport.rotation -
                            this.paintedViewportMap.get(target).rotation;
-      var absRotation = Math.abs(relativeRotation);
-      var scaleX = 1, scaleY = 1;
+    let absRotation = Math.abs(relativeRotation);
+    let scaleX = 1, scaleY = 1;
     if (absRotation === 90 || absRotation === 270) {
       // Scale x and y because of the rotation.
       scaleX = height / width;
       scaleY = width / height;
     }
-      var cssTransform = 'rotate(' + relativeRotation + 'deg) ' +
+    let cssTransform = 'rotate(' + relativeRotation + 'deg) ' +
       'scale(' + scaleX + ',' + scaleY + ')';
     CustomStyle.setProp('transform', target, cssTransform);
 
@@ -301,17 +289,17 @@ var PDFPageView = (function PDFPageViewClosure() {
       // Rotating the text layer is more complicated since the divs inside the
       // the text layer are rotated.
       // TODO: This could probably be simplified by drawing the text layer in
-        // one orientation then rotating overall.
-        var textLayerViewport = this.textLayer.viewport;
-        var textRelativeRotation = this.viewport.rotation -
+      // one orientation and then rotating overall.
+      let textLayerViewport = this.textLayer.viewport;
+      let textRelativeRotation = this.viewport.rotation -
         textLayerViewport.rotation;
-        var textAbsRotation = Math.abs(textRelativeRotation);
-        var scale = width / textLayerViewport.width;
+      let textAbsRotation = Math.abs(textRelativeRotation);
+      let scale = width / textLayerViewport.width;
       if (textAbsRotation === 90 || textAbsRotation === 270) {
         scale = width / textLayerViewport.height;
       }
-        var textLayerDiv = this.textLayer.textLayerDiv;
-        var transX, transY;
+      let textLayerDiv = this.textLayer.textLayerDiv;
+      let transX, transY;
       switch (textAbsRotation) {
         case 0:
           transX = transY = 0;
@@ -342,19 +330,19 @@ var PDFPageView = (function PDFPageViewClosure() {
     if (redrawAnnotations && this.annotationLayer) {
       this.annotationLayer.render(this.viewport, 'display');
     }
-    },
+  }
 
   get width() {
     return this.viewport.width;
-    },
+  }
 
   get height() {
     return this.viewport.height;
-    },
+  }
 
-    getPagePoint: function PDFPageView_getPagePoint(x, y) {
+  getPagePoint(x, y) {
     return this.viewport.convertToPdfPoint(x, y);
-    },
+  }
 
   draw() {
     if (this.renderingState !== RenderingStates.INITIAL) {
@@ -366,15 +354,15 @@ var PDFPageView = (function PDFPageViewClosure() {
 
     let pdfPage = this.pdfPage;
     let div = this.div;
-      // Wrap the canvas so if it has a css transform for highdpi the overflow
-      // will be hidden in FF.
+    // Wrap the canvas so that if it has a CSS transform for high DPI the
+    // overflow will be hidden in Firefox.
     let canvasWrapper = document.createElement('div');
     canvasWrapper.style.width = div.style.width;
     canvasWrapper.style.height = div.style.height;
     canvasWrapper.classList.add('canvasWrapper');
 
     if (this.annotationLayer && this.annotationLayer.div) {
-        // annotationLayer needs to stay on top
+      // The annotation layer needs to stay on top.
       div.insertBefore(canvasWrapper, this.annotationLayer.div);
     } else {
       div.appendChild(canvasWrapper);
@@ -387,7 +375,7 @@ var PDFPageView = (function PDFPageViewClosure() {
       textLayerDiv.style.width = canvasWrapper.style.width;
       textLayerDiv.style.height = canvasWrapper.style.height;
       if (this.annotationLayer && this.annotationLayer.div) {
-          // annotationLayer needs to stay on top
+        // The annotation layer needs to stay on top.
         div.insertBefore(textLayerDiv, this.annotationLayer.div);
       } else {
         div.appendChild(textLayerDiv);
@@ -489,29 +477,29 @@ var PDFPageView = (function PDFPageViewClosure() {
       this.onBeforeDraw();
     }
     return resultPromise;
-    },
+  }
 
   paintOnCanvas(canvasWrapper) {
-      var renderCapability = createPromiseCapability();
-
-      var result = {
+    let renderCapability = createPromiseCapability();
+    let result = {
       promise: renderCapability.promise,
       onRenderContinue(cont) {
         cont();
       },
       cancel() {
         renderTask.cancel();
-        }
+      },
     };
 
-      var viewport = this.viewport;
-      var canvas = document.createElement('canvas');
-      canvas.id = 'page' + this.id;
+    let viewport = this.viewport;
+    let canvas = document.createElement('canvas');
+    canvas.id = this.renderingId;
+
     // Keep the canvas hidden until the first draw callback, or until drawing
     // is complete when `!this.renderingQueue`, to prevent black flickering.
     canvas.setAttribute('hidden', 'hidden');
-      var isCanvasHidden = true;
-      var showCanvas = function () {
+    let isCanvasHidden = true;
+    let showCanvas = function () {
       if (isCanvasHidden) {
         canvas.removeAttribute('hidden');
         isCanvasHidden = false;
@@ -526,13 +514,13 @@ var PDFPageView = (function PDFPageViewClosure() {
       canvas.mozOpaque = true;
     }
 
-      var ctx = canvas.getContext('2d', {alpha: false});
-      var outputScale = getOutputScale(ctx);
+    let ctx = canvas.getContext('2d', { alpha: false, });
+    let outputScale = getOutputScale(ctx);
     this.outputScale = outputScale;
 
     if (PDFJS.useOnlyCssZoom) {
-        var actualSizeViewport = viewport.clone({scale: CSS_UNITS});
-        // Use a scale that will make the canvas be the original intended size
+      let actualSizeViewport = viewport.clone({ scale: CSS_UNITS, });
+      // Use a scale that makes the canvas have the originally intended size
       // of the page.
       outputScale.sx *= actualSizeViewport.width / viewport.width;
       outputScale.sy *= actualSizeViewport.height / viewport.height;
@@ -540,8 +528,8 @@ var PDFPageView = (function PDFPageViewClosure() {
     }
 
     if (PDFJS.maxCanvasPixels > 0) {
-        var pixelsInViewport = viewport.width * viewport.height;
-        var maxScale = Math.sqrt(PDFJS.maxCanvasPixels / pixelsInViewport);
+      let pixelsInViewport = viewport.width * viewport.height;
+      let maxScale = Math.sqrt(PDFJS.maxCanvasPixels / pixelsInViewport);
       if (outputScale.sx > maxScale || outputScale.sy > maxScale) {
         outputScale.sx = maxScale;
         outputScale.sy = maxScale;
@@ -552,8 +540,8 @@ var PDFPageView = (function PDFPageViewClosure() {
       }
     }
 
-      var sfx = approximateFraction(outputScale.sx);
-      var sfy = approximateFraction(outputScale.sy);
+    let sfx = approximateFraction(outputScale.sx);
+    let sfy = approximateFraction(outputScale.sy);
     canvas.width = roundToDivide(viewport.width * outputScale.sx, sfx[0]);
     canvas.height = roundToDivide(viewport.height * outputScale.sy, sfy[0]);
     canvas.style.width = roundToDivide(viewport.width, sfx[1]) + 'px';
@@ -562,16 +550,15 @@ var PDFPageView = (function PDFPageViewClosure() {
     this.paintedViewportMap.set(canvas, viewport);
 
     // Rendering area
-      var transform = !outputScale.scaled ? null :
+    let transform = !outputScale.scaled ? null :
       [outputScale.sx, 0, 0, outputScale.sy, 0, 0];
-      var renderContext = {
+    let renderContext = {
       canvasContext: ctx,
       transform,
       viewport: this.viewport,
       renderInteractiveForms: this.renderInteractiveForms,
-        // intent: 'default', // === 'display'
     };
-      var renderTask = this.pdfPage.render(renderContext);
+    let renderTask = this.pdfPage.render(renderContext);
     renderTask.onContinue = function (cont) {
       showCanvas();
       if (result.onRenderContinue) {
@@ -589,7 +576,7 @@ var PDFPageView = (function PDFPageViewClosure() {
       renderCapability.reject(error);
     });
     return result;
-    },
+  }
 
   paintOnSvg(wrapper) {
     if (typeof PDFJSDev !== 'undefined' &&
@@ -620,7 +607,7 @@ var PDFPageView = (function PDFPageViewClosure() {
     let actualSizeViewport = this.viewport.clone({ scale: CSS_UNITS, });
     let promise = pdfPage.getOperatorList().then((opList) => {
       ensureNotCancelled();
-        var svgGfx = new SVGGraphics(pdfPage.commonObjs, pdfPage.objs);
+      let svgGfx = new SVGGraphics(pdfPage.commonObjs, pdfPage.objs);
       return svgGfx.getSVG(opList, actualSizeViewport).then((svg) => {
         ensureNotCancelled();
         this.svg = svg;
@@ -640,14 +627,14 @@ var PDFPageView = (function PDFPageViewClosure() {
       },
       cancel() {
         cancelled = true;
-        }
-      };
       },
+    };
+  }
 
   /**
    * @param {string|null} label
    */
-    setPageLabel: function PDFView_setPageLabel(label) {
+  setPageLabel(label) {
     this.pageLabel = (typeof label === 'string' ? label : null);
 
     if (this.pageLabel !== null) {
@@ -655,11 +642,8 @@ var PDFPageView = (function PDFPageViewClosure() {
     } else {
       this.div.removeAttribute('data-page-label');
     }
-    },
-  };
-
-  return PDFPageView;
-})();
+  }
+}
 
 export {
   PDFPageView,