akira
/
pdfjs-dist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Convert the thumbnail view to ES6 syntax

Tim van der Meij 8 years ago
parent
a682d77e71
commit
733a58a315
No known key found for this signature in database
GPG Key ID: 8C3FD2925A5F2762
1 changed files with 257 additions and 273 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 530
      web/pdf_thumbnail_view.js

530
web/pdf_thumbnail_view.js
Unescape View File

@ -19,8 +19,9 @@ import {
import { getOutputScale, NullL10n } from './ui_utils'; import { getOutputScale, NullL10n } from './ui_utils';
import { RenderingStates } from './pdf_rendering_queue'; import { RenderingStates } from './pdf_rendering_queue';
var THUMBNAIL_WIDTH = 98; // px const MAX_NUM_SCALING_STEPS = 3;
var THUMBNAIL_CANVAS_BORDER_WIDTH = 1; // px const THUMBNAIL_CANVAS_BORDER_WIDTH = 1; // px
const THUMBNAIL_WIDTH = 98; // px
/** /**
* @typedef {Object} PDFThumbnailViewOptions * @typedef {Object} PDFThumbnailViewOptions
@ -31,7 +32,7 @@ var THUMBNAIL_CANVAS_BORDER_WIDTH = 1; // px
* @property {PDFRenderingQueue} renderingQueue - The rendering queue object. * @property {PDFRenderingQueue} renderingQueue - The rendering queue object.
* @property {boolean} disableCanvasToImageConversion - (optional) Don't convert * @property {boolean} disableCanvasToImageConversion - (optional) Don't convert
* the canvas thumbnails to images. This prevents `toDataURL` calls, * the canvas thumbnails to images. This prevents `toDataURL` calls,
* but increases the overall memory usage. The default value is false. * but increases the overall memory usage. The default value is `false`.
* @property {IL10n} l10n - Localization service. * @property {IL10n} l10n - Localization service.
*/ */
@ -77,23 +78,14 @@ const TempImageFactory = (function TempImageFactoryClosure() {
})(); })();
/** /**
* @class
* @implements {IRenderableView} * @implements {IRenderableView}
*/ */
var PDFThumbnailView = (function PDFThumbnailViewClosure() { class PDFThumbnailView {
/** /**
* @constructs PDFThumbnailView
* @param {PDFThumbnailViewOptions} options * @param {PDFThumbnailViewOptions} options
*/ */
function PDFThumbnailView(options) { constructor({ container, id, defaultViewport, linkService, renderingQueue,
var container = options.container; disableCanvasToImageConversion = false, l10n = NullL10n, }) {
var id = options.id;
var defaultViewport = options.defaultViewport;
var linkService = options.linkService;
var renderingQueue = options.renderingQueue;
var disableCanvasToImageConversion =
options.disableCanvasToImageConversion || false;
this.id = id; this.id = id;
this.renderingId = 'thumbnail' + id; this.renderingId = 'thumbnail' + id;
this.pageLabel = null; this.pageLabel = null;
@ -119,21 +111,21 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
this.canvasHeight = (this.canvasWidth / this.pageRatio) | 0; this.canvasHeight = (this.canvasWidth / this.pageRatio) | 0;
this.scale = this.canvasWidth / this.pageWidth; this.scale = this.canvasWidth / this.pageWidth;
this.l10n = options.l10n || NullL10n; this.l10n = l10n;
var anchor = document.createElement('a'); let anchor = document.createElement('a');
anchor.href = linkService.getAnchorUrl('#page=' + id); anchor.href = linkService.getAnchorUrl('#page=' + id);
this.l10n.get('thumb_page_title', { page: id, }, 'Page {{page}}'). this.l10n.get('thumb_page_title', { page: id, }, 'Page {{page}}').
then((msg) => { then((msg) => {
anchor.title = msg; anchor.title = msg;
}); });
anchor.onclick = function stopNavigation() { anchor.onclick = function() {
linkService.page = id; linkService.page = id;
return false; return false;
}; };
this.anchor = anchor; this.anchor = anchor;
var div = document.createElement('div'); let div = document.createElement('div');
div.className = 'thumbnail'; div.className = 'thumbnail';
div.setAttribute('data-page-number', this.id); div.setAttribute('data-page-number', this.id);
this.div = div; this.div = div;
@ -144,9 +136,9 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
div.classList.add('selected'); div.classList.add('selected');
} }
var ring = document.createElement('div'); let ring = document.createElement('div');
ring.className = 'thumbnailSelectionRing'; ring.className = 'thumbnailSelectionRing';
var borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH; let borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;
ring.style.width = this.canvasWidth + borderAdjustment + 'px'; ring.style.width = this.canvasWidth + borderAdjustment + 'px';
ring.style.height = this.canvasHeight + borderAdjustment + 'px'; ring.style.height = this.canvasHeight + borderAdjustment + 'px';
this.ring = ring; this.ring = ring;
@ -156,296 +148,288 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
container.appendChild(anchor); container.appendChild(anchor);
} }
PDFThumbnailView.prototype = { setPdfPage(pdfPage) {
setPdfPage: function PDFThumbnailView_setPdfPage(pdfPage) { this.pdfPage = pdfPage;
this.pdfPage = pdfPage; this.pdfPageRotate = pdfPage.rotate;
this.pdfPageRotate = pdfPage.rotate; let totalRotation = (this.rotation + this.pdfPageRotate) % 360;
var totalRotation = (this.rotation + this.pdfPageRotate) % 360; this.viewport = pdfPage.getViewport(1, totalRotation);
this.viewport = pdfPage.getViewport(1, totalRotation); this.reset();
this.reset(); }
},
reset: function PDFThumbnailView_reset() { reset() {
this.cancelRendering(); this.cancelRendering();
this.pageWidth = this.viewport.width; this.pageWidth = this.viewport.width;
this.pageHeight = this.viewport.height; this.pageHeight = this.viewport.height;
this.pageRatio = this.pageWidth / this.pageHeight; this.pageRatio = this.pageWidth / this.pageHeight;
this.canvasHeight = (this.canvasWidth / this.pageRatio) | 0; this.canvasHeight = (this.canvasWidth / this.pageRatio) | 0;
this.scale = (this.canvasWidth / this.pageWidth); this.scale = (this.canvasWidth / this.pageWidth);
this.div.removeAttribute('data-loaded'); this.div.removeAttribute('data-loaded');
var ring = this.ring; let ring = this.ring;
var childNodes = ring.childNodes; let childNodes = ring.childNodes;
for (var i = childNodes.length - 1; i >= 0; i--) { for (let i = childNodes.length - 1; i >= 0; i--) {
ring.removeChild(childNodes[i]); ring.removeChild(childNodes[i]);
} }
var borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH; let borderAdjustment = 2 * THUMBNAIL_CANVAS_BORDER_WIDTH;
ring.style.width = this.canvasWidth + borderAdjustment + 'px'; ring.style.width = this.canvasWidth + borderAdjustment + 'px';
ring.style.height = this.canvasHeight + borderAdjustment + 'px'; ring.style.height = this.canvasHeight + borderAdjustment + 'px';
if (this.canvas) { if (this.canvas) {
// 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.
this.canvas.width = 0; this.canvas.width = 0;
this.canvas.height = 0; this.canvas.height = 0;
delete this.canvas; delete this.canvas;
} }
if (this.image) { if (this.image) {
this.image.removeAttribute('src'); this.image.removeAttribute('src');
delete this.image; delete this.image;
} }
}, }
update: function PDFThumbnailView_update(rotation) { update(rotation) {
if (typeof rotation !== 'undefined') { 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: 1, scale: 1,
rotation: totalRotation, rotation: totalRotation,
}); });
this.reset(); this.reset();
}, }
cancelRendering: function PDFThumbnailView_cancelRendering() { cancelRendering() {
if (this.renderTask) { if (this.renderTask) {
this.renderTask.cancel(); this.renderTask.cancel();
this.renderTask = null; this.renderTask = null;
} }
this.renderingState = RenderingStates.INITIAL; this.renderingState = RenderingStates.INITIAL;
this.resume = null; this.resume = null;
}, }
/** /**
* @private * @private
*/ */
_getPageDrawContext: _getPageDrawContext(noCtxScale = false) {
function PDFThumbnailView_getPageDrawContext(noCtxScale) { let canvas = document.createElement('canvas');
var canvas = document.createElement('canvas'); // Keep the no-thumbnail outline visible, i.e. `data-loaded === false`,
// Keep the no-thumbnail outline visible, i.e. `data-loaded === false`, // until rendering/image conversion is complete, to avoid display issues.
// until rendering/image conversion is complete, to avoid display issues. this.canvas = canvas;
this.canvas = canvas;
if (typeof PDFJSDev === 'undefined' ||
PDFJSDev.test('MOZCENTRAL || FIREFOX || GENERIC')) {
canvas.mozOpaque = true;
}
let ctx = canvas.getContext('2d', { alpha: false, });
let outputScale = getOutputScale(ctx);
if (typeof PDFJSDev === 'undefined' || canvas.width = (this.canvasWidth * outputScale.sx) | 0;
PDFJSDev.test('MOZCENTRAL || FIREFOX || GENERIC')) { canvas.height = (this.canvasHeight * outputScale.sy) | 0;
canvas.mozOpaque = true; canvas.style.width = this.canvasWidth + 'px';
} canvas.style.height = this.canvasHeight + 'px';
var ctx = canvas.getContext('2d', { alpha: false, });
var outputScale = getOutputScale(ctx);
canvas.width = (this.canvasWidth * outputScale.sx) | 0; if (!noCtxScale && outputScale.scaled) {
canvas.height = (this.canvasHeight * outputScale.sy) | 0; ctx.scale(outputScale.sx, outputScale.sy);
canvas.style.width = this.canvasWidth + 'px'; }
canvas.style.height = this.canvasHeight + 'px'; return ctx;
}
if (!noCtxScale && outputScale.scaled) { /**
ctx.scale(outputScale.sx, outputScale.sy); * @private
} */
return ctx; _convertCanvasToImage() {
}, if (!this.canvas) {
return;
}
if (this.renderingState !== RenderingStates.FINISHED) {
return;
}
let id = this.renderingId;
let className = 'thumbnailImage';
/** if (this.disableCanvasToImageConversion) {
* @private this.canvas.id = id;
*/ this.canvas.className = className;
_convertCanvasToImage: function PDFThumbnailView_convertCanvasToImage() {
if (!this.canvas) {
return;
}
if (this.renderingState !== RenderingStates.FINISHED) {
return;
}
var id = this.renderingId;
var className = 'thumbnailImage';
if (this.disableCanvasToImageConversion) {
this.canvas.id = id;
this.canvas.className = className;
this.l10n.get('thumb_page_canvas', { page: this.pageId, },
'Thumbnail of Page {{page}}').then((msg) => {
this.canvas.setAttribute('aria-label', msg);
});
this.div.setAttribute('data-loaded', true);
this.ring.appendChild(this.canvas);
return;
}
var image = document.createElement('img');
image.id = id;
image.className = className;
this.l10n.get('thumb_page_canvas', { page: this.pageId, }, this.l10n.get('thumb_page_canvas', { page: this.pageId, },
'Thumbnail of Page {{page}}'). 'Thumbnail of Page {{page}}').then((msg) => {
then((msg) => { this.canvas.setAttribute('aria-label', msg);
image.setAttribute('aria-label', msg);
}); });
image.style.width = this.canvasWidth + 'px';
image.style.height = this.canvasHeight + 'px';
image.src = this.canvas.toDataURL();
this.image = image;
this.div.setAttribute('data-loaded', true); this.div.setAttribute('data-loaded', true);
this.ring.appendChild(image); this.ring.appendChild(this.canvas);
return;
}
let image = document.createElement('img');
image.id = id;
image.className = className;
this.l10n.get('thumb_page_canvas', { page: this.pageId, },
'Thumbnail of Page {{page}}').
then((msg) => {
image.setAttribute('aria-label', msg);
});
// Zeroing the width and height causes Firefox to release graphics image.style.width = this.canvasWidth + 'px';
// resources immediately, which can greatly reduce memory consumption. image.style.height = this.canvasHeight + 'px';
this.canvas.width = 0;
this.canvas.height = 0;
delete this.canvas;
},
draw() { image.src = this.canvas.toDataURL();
if (this.renderingState !== RenderingStates.INITIAL) { this.image = image;
console.error('Must be in new state before drawing');
return Promise.resolve(undefined);
}
this.renderingState = RenderingStates.RUNNING; this.div.setAttribute('data-loaded', true);
this.ring.appendChild(image);
let renderCapability = createPromiseCapability();
let finishRenderTask = (error) => {
// The renderTask may have been replaced by a new one, so only remove
// the reference to the renderTask if it matches the one that is
// triggering this callback.
if (renderTask === this.renderTask) {
this.renderTask = null;
}
if (((typeof PDFJSDev === 'undefined' ||
!PDFJSDev.test('PDFJS_NEXT')) && error === 'cancelled') ||
error instanceof RenderingCancelledException) {
renderCapability.resolve(undefined);
return;
}
this.renderingState = RenderingStates.FINISHED;
this._convertCanvasToImage();
if (!error) {
renderCapability.resolve(undefined);
} else {
renderCapability.reject(error);
}
};
let ctx = this._getPageDrawContext();
let drawViewport = this.viewport.clone({ scale: this.scale, });
let renderContinueCallback = (cont) => {
if (!this.renderingQueue.isHighestPriority(this)) {
this.renderingState = RenderingStates.PAUSED;
this.resume = () => {
this.renderingState = RenderingStates.RUNNING;
cont();
};
return;
}
cont();
};
let renderContext = {
canvasContext: ctx,
viewport: drawViewport,
};
let renderTask = this.renderTask = this.pdfPage.render(renderContext);
renderTask.onContinue = renderContinueCallback;
renderTask.promise.then(function() {
finishRenderTask(null);
}, function(error) {
finishRenderTask(error);
});
return renderCapability.promise;
},
setImage: function PDFThumbnailView_setImage(pageView) { // Zeroing the width and height causes Firefox to release graphics
if (this.renderingState !== RenderingStates.INITIAL) { // resources immediately, which can greatly reduce memory consumption.
return; this.canvas.width = 0;
this.canvas.height = 0;
delete this.canvas;
}
draw() {
if (this.renderingState !== RenderingStates.INITIAL) {
console.error('Must be in new state before drawing');
return Promise.resolve(undefined);
}
this.renderingState = RenderingStates.RUNNING;
let renderCapability = createPromiseCapability();
let finishRenderTask = (error) => {
// The renderTask may have been replaced by a new one, so only remove
// the reference to the renderTask if it matches the one that is
// triggering this callback.
if (renderTask === this.renderTask) {
this.renderTask = null;
} }
var img = pageView.canvas;
if (!img) { if (((typeof PDFJSDev === 'undefined' ||
!PDFJSDev.test('PDFJS_NEXT')) && error === 'cancelled') ||
error instanceof RenderingCancelledException) {
renderCapability.resolve(undefined);
return; return;
} }
if (!this.pdfPage) {
this.setPdfPage(pageView.pdfPage);
}
this.renderingState = RenderingStates.FINISHED; this.renderingState = RenderingStates.FINISHED;
this._convertCanvasToImage();
var ctx = this._getPageDrawContext(true); if (!error) {
var canvas = ctx.canvas; renderCapability.resolve(undefined);
} else {
renderCapability.reject(error);
}
};
if (img.width <= 2 * canvas.width) { let ctx = this._getPageDrawContext();
ctx.drawImage(img, 0, 0, img.width, img.height, let drawViewport = this.viewport.clone({ scale: this.scale, });
0, 0, canvas.width, canvas.height); let renderContinueCallback = (cont) => {
this._convertCanvasToImage(); if (!this.renderingQueue.isHighestPriority(this)) {
this.renderingState = RenderingStates.PAUSED;
this.resume = () => {
this.renderingState = RenderingStates.RUNNING;
cont();
};
return; return;
} }
// drawImage does an awful job of rescaling the image, doing it gradually. cont();
var MAX_NUM_SCALING_STEPS = 3; };
var reducedWidth = canvas.width << MAX_NUM_SCALING_STEPS;
var reducedHeight = canvas.height << MAX_NUM_SCALING_STEPS; let renderContext = {
var reducedImage = TempImageFactory.getCanvas(reducedWidth, canvasContext: ctx,
reducedHeight); viewport: drawViewport,
var reducedImageCtx = reducedImage.getContext('2d'); };
let renderTask = this.renderTask = this.pdfPage.render(renderContext);
while (reducedWidth > img.width || reducedHeight > img.height) { renderTask.onContinue = renderContinueCallback;
reducedWidth >>= 1;
reducedHeight >>= 1; renderTask.promise.then(function() {
} finishRenderTask(null);
reducedImageCtx.drawImage(img, 0, 0, img.width, img.height, }, function(error) {
0, 0, reducedWidth, reducedHeight); finishRenderTask(error);
while (reducedWidth > 2 * canvas.width) { });
reducedImageCtx.drawImage(reducedImage, return renderCapability.promise;
0, 0, reducedWidth, reducedHeight, }
0, 0, reducedWidth >> 1, reducedHeight >> 1);
reducedWidth >>= 1; setImage(pageView) {
reducedHeight >>= 1; if (this.renderingState !== RenderingStates.INITIAL) {
} return;
ctx.drawImage(reducedImage, 0, 0, reducedWidth, reducedHeight, }
let img = pageView.canvas;
if (!img) {
return;
}
if (!this.pdfPage) {
this.setPdfPage(pageView.pdfPage);
}
this.renderingState = RenderingStates.FINISHED;
let ctx = this._getPageDrawContext(true);
let canvas = ctx.canvas;
if (img.width <= 2 * canvas.width) {
ctx.drawImage(img, 0, 0, img.width, img.height,
0, 0, canvas.width, canvas.height); 0, 0, canvas.width, canvas.height);
this._convertCanvasToImage(); this._convertCanvasToImage();
}, return;
}
get pageId() { // drawImage does an awful job of rescaling the image, doing it gradually.
return (this.pageLabel !== null ? this.pageLabel : this.id); let reducedWidth = canvas.width << MAX_NUM_SCALING_STEPS;
}, let reducedHeight = canvas.height << MAX_NUM_SCALING_STEPS;
let reducedImage = TempImageFactory.getCanvas(reducedWidth,
reducedHeight);
let reducedImageCtx = reducedImage.getContext('2d');
/** while (reducedWidth > img.width || reducedHeight > img.height) {
* @param {string|null} label reducedWidth >>= 1;
*/ reducedHeight >>= 1;
setPageLabel: function PDFThumbnailView_setPageLabel(label) { }
this.pageLabel = (typeof label === 'string' ? label : null); reducedImageCtx.drawImage(img, 0, 0, img.width, img.height,
0, 0, reducedWidth, reducedHeight);
while (reducedWidth > 2 * canvas.width) {
reducedImageCtx.drawImage(reducedImage,
0, 0, reducedWidth, reducedHeight,
0, 0, reducedWidth >> 1, reducedHeight >> 1);
reducedWidth >>= 1;
reducedHeight >>= 1;
}
ctx.drawImage(reducedImage, 0, 0, reducedWidth, reducedHeight,
0, 0, canvas.width, canvas.height);
this._convertCanvasToImage();
}
this.l10n.get('thumb_page_title', { page: this.pageId, }, get pageId() {
'Page {{page}}').then((msg) => { return (this.pageLabel !== null ? this.pageLabel : this.id);
this.anchor.title = msg; }
});
if (this.renderingState !== RenderingStates.FINISHED) { /**
return; * @param {string|null} label
} */
setPageLabel(label) {
this.pageLabel = (typeof label === 'string' ? label : null);
this.l10n.get('thumb_page_canvas', { page: this.pageId, }, this.l10n.get('thumb_page_title', { page: this.pageId, },
'Thumbnail of Page {{page}}').then((ariaLabel) => { 'Page {{page}}').then((msg) => {
if (this.image) { this.anchor.title = msg;
this.image.setAttribute('aria-label', ariaLabel); });
} else if (this.disableCanvasToImageConversion && this.canvas) {
this.canvas.setAttribute('aria-label', ariaLabel);
}
});
},
};
PDFThumbnailView.cleanup = function() { if (this.renderingState !== RenderingStates.FINISHED) {
TempImageFactory.destroyCanvas(); return;
}; }
return PDFThumbnailView; this.l10n.get('thumb_page_canvas', { page: this.pageId, },
})(); 'Thumbnail of Page {{page}}').then((ariaLabel) => {
if (this.image) {
this.image.setAttribute('aria-label', ariaLabel);
} else if (this.disableCanvasToImageConversion && this.canvas) {
this.canvas.setAttribute('aria-label', ariaLabel);
}
});
}
static cleanup() {
TempImageFactory.destroyCanvas();
}
}
export { export {
PDFThumbnailView, PDFThumbnailView,

Write Preview
Loading…
Cancel
Save