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

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

Browse Source 
Convert the page view to ES6 syntax
This commit is contained in:
Tim van der Meij 2017-05-31 00:55:36 +02:00 committed by GitHub
commit 6b098898d2
1 changed files with 519 additions and 535 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
web/pdf_page_view.js
View File

@ -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;
constructor(options) {
let container = options.container;
let defaultViewport = options.defaultViewport;
this.id = options.id;
this.renderingId = 'page' + this.id;
this.id = id;
this.renderingId = 'page' + 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,