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