Brendan Dahl
10 years ago
21 changed files with 1098 additions and 937 deletions
@ -0,0 +1,46 @@
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html> |
||||
<!-- |
||||
Copyright 2014 Mozilla Foundation |
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
you may not use this file except in compliance with the License. |
||||
You may obtain a copy of the License at |
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
||||
Unless required by applicable law or agreed to in writing, software |
||||
distributed under the License is distributed on an "AS IS" BASIS, |
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
See the License for the specific language governing permissions and |
||||
limitations under the License. |
||||
--> |
||||
<html dir="ltr" mozdisallowselectionprint moznomarginboxes> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
||||
<meta name="google" content="notranslate"> |
||||
<title>PDF.js page viewer using built components</title> |
||||
|
||||
<style> |
||||
body { |
||||
background-color: #808080; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
</style> |
||||
|
||||
<link rel="stylesheet" href="../../build/components/pdf_viewer.css"> |
||||
|
||||
<!-- for legacy browsers --> |
||||
<script src="../../build/components/compatibility.js"></script> |
||||
<script src="../../build/pdf.js"></script> |
||||
<script src="../../build/components/pdf_viewer.js"></script> |
||||
</head> |
||||
|
||||
<body tabindex="1"> |
||||
<div id="pageContainer" class="pdfPage"></div> |
||||
|
||||
<script src="pageviewer.js"></script> |
||||
</body> |
||||
</html> |
||||
|
||||
@ -0,0 +1,58 @@
@@ -0,0 +1,58 @@
|
||||
/* Copyright 2014 Mozilla Foundation |
||||
* |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
'use strict'; |
||||
|
||||
if (!PDFJS.PDFViewer || !PDFJS.getDocument) { |
||||
alert('Please build the library and components using\n' + |
||||
' `node make generic components`'); |
||||
} |
||||
|
||||
// In cases when the pdf.worker.js is located at the different folder than the
|
||||
// pdf.js's one, or the pdf.js is executed via eval(), the workerSrc property
|
||||
// shall be specified.
|
||||
//
|
||||
// PDFJS.workerSrc = '../../build/pdf.worker.js';
|
||||
|
||||
// Some PDFs need external cmaps.
|
||||
//
|
||||
// PDFJS.cMapUrl = '../../external/bcmaps/';
|
||||
// PDFJS.cMapPacked = true;
|
||||
|
||||
var DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf'; |
||||
var PAGE_TO_VIEW = 1; |
||||
var SCALE = 1.0; |
||||
|
||||
var container = document.getElementById('pageContainer'); |
||||
|
||||
// Loading document.
|
||||
PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) { |
||||
// Document loaded, retrieving the page.
|
||||
return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) { |
||||
// Creating the page view with default parameters.
|
||||
var pdfPageView = new PDFJS.PDFPageView({ |
||||
container: container, |
||||
id: PAGE_TO_VIEW, |
||||
scale: SCALE, |
||||
defaultViewport: pdfPage.getViewport(SCALE), |
||||
// We can enable text/annotations layers, if needed
|
||||
textLayerFactory: new PDFJS.DefaultTextLayerFactory(), |
||||
annotationsLayerFactory: new PDFJS.DefaultAnnotationsLayerFactory() |
||||
}); |
||||
// Associates the actual page with the view, and drawing it
|
||||
pdfPageView.setPdfPage(pdfPage); |
||||
return pdfPageView.draw(); |
||||
}); |
||||
}); |
||||
@ -1,43 +0,0 @@
@@ -1,43 +0,0 @@
|
||||
body { |
||||
font-family: arial, verdana, sans-serif; |
||||
} |
||||
|
||||
/* Allow absolute positioning of the canvas and textLayer in the page. They |
||||
will be the same size and will be placed on top of each other. */ |
||||
.pdfPage { |
||||
position: relative; |
||||
overflow: visible; |
||||
border: 1px solid #000000; |
||||
} |
||||
|
||||
.pdfPage > canvas { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
/* CSS classes used by TextLayerBuilder to style the text layer divs */ |
||||
|
||||
/* This stuff is important! Otherwise when you select the text, |
||||
the text in the divs will show up! */ |
||||
::selection { background:rgba(0,0,255,0.3); } |
||||
::-moz-selection { background:rgba(0,0,255,0.3); } |
||||
|
||||
.textLayer { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
color: #000; |
||||
font-family: sans-serif; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.textLayer > div { |
||||
color: transparent; |
||||
position: absolute; |
||||
line-height: 1; |
||||
white-space: pre; |
||||
cursor: text; |
||||
} |
||||
@ -1,26 +0,0 @@
@@ -1,26 +0,0 @@
|
||||
<html> |
||||
<head> |
||||
<title>Minimal pdf.js text-selection demo</title> |
||||
<link href="css/minimal.css" rel="stylesheet" media="screen" /> |
||||
|
||||
<!-- you will need to run "node make generic" first before you can use this --> |
||||
<script src="../../build/generic/build/pdf.js"></script> |
||||
|
||||
<!-- These files are viewer components that you will need to get text-selection to work --> |
||||
<script src="../../web/ui_utils.js"></script> |
||||
<script src="../../web/text_layer_builder.js"></script> |
||||
|
||||
<script> |
||||
// Specify the main script used to create a new PDF.JS web worker. |
||||
// In production, change this to point to the combined `pdf.js` file. |
||||
</script> |
||||
|
||||
<script src="js/minimal.js"></script> |
||||
</head> |
||||
<body> |
||||
This is a minimal pdf.js text-selection demo. The existing minimal-example shows you how to render a PDF, but not |
||||
how to enable text-selection. This example shows you how to do both. <br /><br /> |
||||
<div id="pdfContainer"> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -1,97 +0,0 @@
@@ -1,97 +0,0 @@
|
||||
// Minimal PDF rendering and text-selection example using PDF.js by Vivin Suresh Paliath (http://vivin.net)
|
||||
// This example uses a built version of PDF.js that contains all modules that it requires.
|
||||
//
|
||||
// The problem with understanding text selection was that the text selection code has heavily intertwined
|
||||
// with viewer.html and viewer.js. I have extracted the parts I need out of viewer.js into a separate file
|
||||
// which contains the bare minimum required to implement text selection. The key component is TextLayerBuilder,
|
||||
// which is the object that handles the creation of text-selection divs. I have added this code as an external
|
||||
// resource.
|
||||
//
|
||||
// This demo uses a PDF that only has one page. You can render other pages if you wish, but the focus here is
|
||||
// just to show you how you can render a PDF with text selection. Hence the code only loads up one page.
|
||||
//
|
||||
// The CSS used here is also very important since it sets up the CSS for the text layer divs overlays that
|
||||
// you actually end up selecting.
|
||||
//
|
||||
// NOTE: The original example was changed to remove jQuery usage, re-structure and add more comments.
|
||||
|
||||
window.onload = function () { |
||||
if (typeof PDFJS === 'undefined') { |
||||
alert('Built version of pdf.js is not found\nPlease run `node make generic`'); |
||||
return; |
||||
} |
||||
|
||||
var scale = 1.5; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
|
||||
PDFJS.workerSrc = '../../build/generic/build/pdf.worker.js'; |
||||
|
||||
function loadPdf(pdfPath) { |
||||
var pdf = PDFJS.getDocument(pdfPath); |
||||
return pdf.then(renderPdf); |
||||
} |
||||
|
||||
function renderPdf(pdf) { |
||||
return pdf.getPage(1).then(renderPage); |
||||
} |
||||
|
||||
function renderPage(page) { |
||||
var viewport = page.getViewport(scale); |
||||
|
||||
// Create and append the 'pdf-page' div to the pdf container.
|
||||
var pdfPage = document.createElement('div'); |
||||
pdfPage.className = 'pdfPage'; |
||||
var pdfContainer = document.getElementById('pdfContainer'); |
||||
pdfContainer.appendChild(pdfPage); |
||||
|
||||
// Set the canvas height and width to the height and width of the viewport.
|
||||
var canvas = document.createElement('canvas'); |
||||
var context = canvas.getContext('2d'); |
||||
|
||||
// The following few lines of code set up scaling on the context, if we are
|
||||
// on a HiDPI display.
|
||||
var outputScale = getOutputScale(context); |
||||
canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0; |
||||
canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0; |
||||
context._scaleX = outputScale.sx; |
||||
context._scaleY = outputScale.sy; |
||||
if (outputScale.scaled) { |
||||
context.scale(outputScale.sx, outputScale.sy); |
||||
} |
||||
|
||||
// The page, canvas and text layer elements will have the same size.
|
||||
canvas.style.width = Math.floor(viewport.width) + 'px'; |
||||
canvas.style.height = Math.floor(viewport.height) + 'px'; |
||||
|
||||
pdfPage.style.width = canvas.style.width; |
||||
pdfPage.style.height = canvas.style.height; |
||||
pdfPage.appendChild(canvas); |
||||
|
||||
var textLayerDiv = document.createElement('div'); |
||||
textLayerDiv.className = 'textLayer'; |
||||
textLayerDiv.style.width = canvas.style.width; |
||||
textLayerDiv.style.height = canvas.style.height; |
||||
pdfPage.appendChild(textLayerDiv); |
||||
|
||||
// Painting the canvas...
|
||||
var renderContext = { |
||||
canvasContext: context, |
||||
viewport: viewport |
||||
}; |
||||
var renderTask = page.render(renderContext); |
||||
|
||||
// ... and at the same time, getting the text and creating the text layer.
|
||||
var textLayerPromise = page.getTextContent().then(function (textContent) { |
||||
var textLayerBuilder = new TextLayerBuilder({ |
||||
textLayerDiv: textLayerDiv, |
||||
viewport: viewport, |
||||
pageIndex: 0 |
||||
}); |
||||
textLayerBuilder.setTextContent(textContent); |
||||
}); |
||||
|
||||
// We might be interested when rendering complete and text layer is built.
|
||||
return Promise.all([renderTask.promise, textLayerPromise]); |
||||
} |
||||
|
||||
loadPdf('pdf/TestDocument.pdf'); |
||||
}; |
||||
|
||||
Binary file not shown.
@ -0,0 +1,177 @@
@@ -0,0 +1,177 @@
|
||||
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ |
||||
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */ |
||||
/* Copyright 2014 Mozilla Foundation |
||||
* |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
/*globals PDFJS, CustomStyle, mozL10n */ |
||||
|
||||
'use strict'; |
||||
|
||||
/** |
||||
* @typedef {Object} AnnotationsLayerBuilderOptions |
||||
* @property {HTMLDivElement} pageDiv |
||||
* @property {PDFPage} pdfPage |
||||
* @property {IPDFLinkService} linkService |
||||
*/ |
||||
|
||||
/** |
||||
* @class |
||||
*/ |
||||
var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() { |
||||
/** |
||||
* @param {AnnotationsLayerBuilderOptions} options |
||||
* @constructs AnnotationsLayerBuilder |
||||
*/ |
||||
function AnnotationsLayerBuilder(options) { |
||||
this.pageDiv = options.pageDiv; |
||||
this.pdfPage = options.pdfPage; |
||||
this.linkService = options.linkService; |
||||
|
||||
this.div = null; |
||||
} |
||||
AnnotationsLayerBuilder.prototype = |
||||
/** @lends AnnotationsLayerBuilder.prototype */ { |
||||
|
||||
/** |
||||
* @param {PageViewport} viewport |
||||
*/ |
||||
setupAnnotations: |
||||
function AnnotationsLayerBuilder_setupAnnotations(viewport) { |
||||
function bindLink(link, dest) { |
||||
link.href = linkService.getDestinationHash(dest); |
||||
link.onclick = function annotationsLayerBuilderLinksOnclick() { |
||||
if (dest) { |
||||
linkService.navigateTo(dest); |
||||
} |
||||
return false; |
||||
}; |
||||
if (dest) { |
||||
link.className = 'internalLink'; |
||||
} |
||||
} |
||||
|
||||
function bindNamedAction(link, action) { |
||||
link.href = linkService.getAnchorUrl(''); |
||||
link.onclick = function annotationsLayerBuilderNamedActionOnClick() { |
||||
linkService.executeNamedAction(action); |
||||
return false; |
||||
}; |
||||
link.className = 'internalLink'; |
||||
} |
||||
|
||||
var linkService = this.linkService; |
||||
var pdfPage = this.pdfPage; |
||||
var self = this; |
||||
|
||||
pdfPage.getAnnotations().then(function (annotationsData) { |
||||
viewport = viewport.clone({ dontFlip: true }); |
||||
var transform = viewport.transform; |
||||
var transformStr = 'matrix(' + transform.join(',') + ')'; |
||||
var data, element, i, ii; |
||||
|
||||
if (self.div) { |
||||
// If an annotationLayer already exists, refresh its children's
|
||||
// transformation matrices
|
||||
for (i = 0, ii = annotationsData.length; i < ii; i++) { |
||||
data = annotationsData[i]; |
||||
element = self.div.querySelector( |
||||
'[data-annotation-id="' + data.id + '"]'); |
||||
if (element) { |
||||
CustomStyle.setProp('transform', element, transformStr); |
||||
} |
||||
} |
||||
// See PDFPageView.reset()
|
||||
self.div.removeAttribute('hidden'); |
||||
} else { |
||||
for (i = 0, ii = annotationsData.length; i < ii; i++) { |
||||
data = annotationsData[i]; |
||||
if (!data || !data.hasHtml) { |
||||
continue; |
||||
} |
||||
|
||||
element = PDFJS.AnnotationUtils.getHtmlElement(data, |
||||
pdfPage.commonObjs); |
||||
element.setAttribute('data-annotation-id', data.id); |
||||
if (typeof mozL10n !== 'undefined') { |
||||
mozL10n.translate(element); |
||||
} |
||||
|
||||
var rect = data.rect; |
||||
var view = pdfPage.view; |
||||
rect = PDFJS.Util.normalizeRect([ |
||||
rect[0], |
||||
view[3] - rect[1] + view[1], |
||||
rect[2], |
||||
view[3] - rect[3] + view[1] |
||||
]); |
||||
element.style.left = rect[0] + 'px'; |
||||
element.style.top = rect[1] + 'px'; |
||||
element.style.position = 'absolute'; |
||||
|
||||
CustomStyle.setProp('transform', element, transformStr); |
||||
var transformOriginStr = -rect[0] + 'px ' + -rect[1] + 'px'; |
||||
CustomStyle.setProp('transformOrigin', element, transformOriginStr); |
||||
|
||||
if (data.subtype === 'Link' && !data.url) { |
||||
var link = element.getElementsByTagName('a')[0]; |
||||
if (link) { |
||||
if (data.action) { |
||||
bindNamedAction(link, data.action); |
||||
} else { |
||||
bindLink(link, ('dest' in data) ? data.dest : null); |
||||
} |
||||
} |
||||
} |
||||
|
||||
if (!self.div) { |
||||
var annotationLayerDiv = document.createElement('div'); |
||||
annotationLayerDiv.className = 'annotationLayer'; |
||||
self.pageDiv.appendChild(annotationLayerDiv); |
||||
self.div = annotationLayerDiv; |
||||
} |
||||
|
||||
self.div.appendChild(element); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
hide: function () { |
||||
if (!this.div) { |
||||
return; |
||||
} |
||||
this.div.setAttribute('hidden', 'true'); |
||||
} |
||||
}; |
||||
return AnnotationsLayerBuilder; |
||||
})(); |
||||
|
||||
/** |
||||
* @constructor |
||||
* @implements IPDFAnnotationsLayerFactory |
||||
*/ |
||||
function DefaultAnnotationsLayerFactory() {} |
||||
DefaultAnnotationsLayerFactory.prototype = { |
||||
/** |
||||
* @param {HTMLDivElement} pageDiv |
||||
* @param {PDFPage} pdfPage |
||||
* @returns {AnnotationsLayerBuilder} |
||||
*/ |
||||
createAnnotationsLayerBuilder: function (pageDiv, pdfPage) { |
||||
return new AnnotationsLayerBuilder({ |
||||
pageDiv: pageDiv, |
||||
pdfPage: pdfPage |
||||
}); |
||||
} |
||||
}; |
||||
@ -1,610 +0,0 @@
@@ -1,610 +0,0 @@
|
||||
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ |
||||
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */ |
||||
/* Copyright 2012 Mozilla Foundation |
||||
* |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
/* globals RenderingStates, PDFJS, mozL10n, CustomStyle, getOutputScale, Stats, |
||||
CSS_UNITS */ |
||||
|
||||
'use strict'; |
||||
|
||||
/** |
||||
* @constructor |
||||
* @param {HTMLDivElement} container - The viewer element. |
||||
* @param {number} id - The page unique ID (normally its number). |
||||
* @param {number} scale - The page scale display. |
||||
* @param {PageViewport} defaultViewport - The page viewport. |
||||
* @param {IPDFLinkService} linkService - The navigation/linking service. |
||||
* @param {PDFRenderingQueue} renderingQueue - The rendering queue object. |
||||
* @param {Cache} cache - The page cache. |
||||
* @param {PDFPageSource} pageSource |
||||
* @param {PDFViewer} viewer |
||||
* |
||||
* @implements {IRenderableView} |
||||
*/ |
||||
var PageView = function pageView(container, id, scale, defaultViewport, |
||||
linkService, renderingQueue, cache, |
||||
pageSource, viewer) { |
||||
this.id = id; |
||||
this.renderingId = 'page' + id; |
||||
|
||||
this.rotation = 0; |
||||
this.scale = scale || 1.0; |
||||
this.viewport = defaultViewport; |
||||
this.pdfPageRotate = defaultViewport.rotation; |
||||
this.hasRestrictedScaling = false; |
||||
|
||||
this.linkService = linkService; |
||||
this.renderingQueue = renderingQueue; |
||||
this.cache = cache; |
||||
this.pageSource = pageSource; |
||||
this.viewer = viewer; |
||||
|
||||
this.renderingState = RenderingStates.INITIAL; |
||||
this.resume = null; |
||||
|
||||
this.textLayer = null; |
||||
|
||||
this.zoomLayer = null; |
||||
|
||||
this.annotationLayer = null; |
||||
|
||||
var anchor = document.createElement('a'); |
||||
anchor.name = '' + this.id; |
||||
|
||||
var div = this.el = document.createElement('div'); |
||||
div.id = 'pageContainer' + this.id; |
||||
div.className = 'page'; |
||||
div.style.width = Math.floor(this.viewport.width) + 'px'; |
||||
div.style.height = Math.floor(this.viewport.height) + 'px'; |
||||
|
||||
container.appendChild(anchor); |
||||
container.appendChild(div); |
||||
|
||||
this.setPdfPage = function pageViewSetPdfPage(pdfPage) { |
||||
this.pdfPage = pdfPage; |
||||
this.pdfPageRotate = pdfPage.rotate; |
||||
var totalRotation = (this.rotation + this.pdfPageRotate) % 360; |
||||
this.viewport = pdfPage.getViewport(this.scale * CSS_UNITS, totalRotation); |
||||
this.stats = pdfPage.stats; |
||||
this.reset(); |
||||
}; |
||||
|
||||
this.destroy = function pageViewDestroy() { |
||||
this.zoomLayer = null; |
||||
this.reset(); |
||||
if (this.pdfPage) { |
||||
this.pdfPage.destroy(); |
||||
} |
||||
}; |
||||
|
||||
this.reset = function pageViewReset(keepAnnotations) { |
||||
if (this.renderTask) { |
||||
this.renderTask.cancel(); |
||||
} |
||||
this.resume = null; |
||||
this.renderingState = RenderingStates.INITIAL; |
||||
|
||||
div.style.width = Math.floor(this.viewport.width) + 'px'; |
||||
div.style.height = Math.floor(this.viewport.height) + 'px'; |
||||
|
||||
var childNodes = div.childNodes; |
||||
for (var i = div.childNodes.length - 1; i >= 0; i--) { |
||||
var node = childNodes[i]; |
||||
if ((this.zoomLayer && this.zoomLayer === node) || |
||||
(keepAnnotations && this.annotationLayer === node)) { |
||||
continue; |
||||
} |
||||
div.removeChild(node); |
||||
} |
||||
div.removeAttribute('data-loaded'); |
||||
|
||||
if (keepAnnotations) { |
||||
if (this.annotationLayer) { |
||||
// Hide annotationLayer until all elements are resized
|
||||
// so they are not displayed on the already-resized page
|
||||
this.annotationLayer.setAttribute('hidden', 'true'); |
||||
} |
||||
} else { |
||||
this.annotationLayer = null; |
||||
} |
||||
|
||||
if (this.canvas) { |
||||
// Zeroing the width and height causes Firefox to release graphics
|
||||
// resources immediately, which can greatly reduce memory consumption.
|
||||
this.canvas.width = 0; |
||||
this.canvas.height = 0; |
||||
delete this.canvas; |
||||
} |
||||
|
||||
this.loadingIconDiv = document.createElement('div'); |
||||
this.loadingIconDiv.className = 'loadingIcon'; |
||||
div.appendChild(this.loadingIconDiv); |
||||
}; |
||||
|
||||
this.update = function pageViewUpdate(scale, rotation) { |
||||
this.scale = scale || this.scale; |
||||
|
||||
if (typeof rotation !== 'undefined') { |
||||
this.rotation = rotation; |
||||
} |
||||
|
||||
var totalRotation = (this.rotation + this.pdfPageRotate) % 360; |
||||
this.viewport = this.viewport.clone({ |
||||
scale: this.scale * CSS_UNITS, |
||||
rotation: totalRotation |
||||
}); |
||||
|
||||
var isScalingRestricted = false; |
||||
if (this.canvas && PDFJS.maxCanvasPixels > 0) { |
||||
var ctx = this.canvas.getContext('2d'); |
||||
var outputScale = getOutputScale(ctx); |
||||
var pixelsInViewport = this.viewport.width * this.viewport.height; |
||||
var maxScale = Math.sqrt(PDFJS.maxCanvasPixels / pixelsInViewport); |
||||
if (((Math.floor(this.viewport.width) * outputScale.sx) | 0) * |
||||
((Math.floor(this.viewport.height) * outputScale.sy) | 0) > |
||||
PDFJS.maxCanvasPixels) { |
||||
isScalingRestricted = true; |
||||
} |
||||
} |
||||
|
||||
if (this.canvas && |
||||
(PDFJS.useOnlyCssZoom || |
||||
(this.hasRestrictedScaling && isScalingRestricted))) { |
||||
this.cssTransform(this.canvas, true); |
||||
return; |
||||
} else if (this.canvas && !this.zoomLayer) { |
||||
this.zoomLayer = this.canvas.parentNode; |
||||
this.zoomLayer.style.position = 'absolute'; |
||||
} |
||||
if (this.zoomLayer) { |
||||
this.cssTransform(this.zoomLayer.firstChild); |
||||
} |
||||
this.reset(true); |
||||
}; |
||||
|
||||
this.cssTransform = function pageCssTransform(canvas, redrawAnnotations) { |
||||
// Scale canvas, canvas wrapper, and page container.
|
||||
var width = this.viewport.width; |
||||
var height = this.viewport.height; |
||||
canvas.style.width = canvas.parentNode.style.width = div.style.width = |
||||
Math.floor(width) + 'px'; |
||||
canvas.style.height = canvas.parentNode.style.height = div.style.height = |
||||
Math.floor(height) + 'px'; |
||||
// The canvas may have been originally rotated, so rotate relative to that.
|
||||
var relativeRotation = this.viewport.rotation - canvas._viewport.rotation; |
||||
var absRotation = Math.abs(relativeRotation); |
||||
var 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) ' + |
||||
'scale(' + scaleX + ',' + scaleY + ')'; |
||||
CustomStyle.setProp('transform', canvas, cssTransform); |
||||
|
||||
if (this.textLayer) { |
||||
// 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 - |
||||
textLayerViewport.rotation; |
||||
var textAbsRotation = Math.abs(textRelativeRotation); |
||||
var scale = width / textLayerViewport.width; |
||||
if (textAbsRotation === 90 || textAbsRotation === 270) { |
||||
scale = width / textLayerViewport.height; |
||||
} |
||||
var textLayerDiv = this.textLayer.textLayerDiv; |
||||
var transX, transY; |
||||
switch (textAbsRotation) { |
||||
case 0: |
||||
transX = transY = 0; |
||||
break; |
||||
case 90: |
||||
transX = 0; |
||||
transY = '-' + textLayerDiv.style.height; |
||||
break; |
||||
case 180: |
||||
transX = '-' + textLayerDiv.style.width; |
||||
transY = '-' + textLayerDiv.style.height; |
||||
break; |
||||
case 270: |
||||
transX = '-' + textLayerDiv.style.width; |
||||
transY = 0; |
||||
break; |
||||
default: |
||||
console.error('Bad rotation value.'); |
||||
break; |
||||
} |
||||
CustomStyle.setProp('transform', textLayerDiv, |
||||
'rotate(' + textAbsRotation + 'deg) ' + |
||||
'scale(' + scale + ', ' + scale + ') ' + |
||||
'translate(' + transX + ', ' + transY + ')'); |
||||
CustomStyle.setProp('transformOrigin', textLayerDiv, '0% 0%'); |
||||
} |
||||
|
||||
if (redrawAnnotations && this.annotationLayer) { |
||||
setupAnnotations(div, this.pdfPage, this.viewport); |
||||
} |
||||
}; |
||||
|
||||
Object.defineProperty(this, 'width', { |
||||
get: function PageView_getWidth() { |
||||
return this.viewport.width; |
||||
}, |
||||
enumerable: true |
||||
}); |
||||
|
||||
Object.defineProperty(this, 'height', { |
||||
get: function PageView_getHeight() { |
||||
return this.viewport.height; |
||||
}, |
||||
enumerable: true |
||||
}); |
||||
|
||||
var self = this; |
||||
|
||||
function setupAnnotations(pageDiv, pdfPage, viewport) { |
||||
|
||||
function bindLink(link, dest) { |
||||
link.href = linkService.getDestinationHash(dest); |
||||
link.onclick = function pageViewSetupLinksOnclick() { |
||||
if (dest) { |
||||
linkService.navigateTo(dest); |
||||
} |
||||
return false; |
||||
}; |
||||
if (dest) { |
||||
link.className = 'internalLink'; |
||||
} |
||||
} |
||||
|
||||
function bindNamedAction(link, action) { |
||||
link.href = linkService.getAnchorUrl(''); |
||||
link.onclick = function pageViewSetupNamedActionOnClick() { |
||||
linkService.executeNamedAction(action); |
||||
return false; |
||||
}; |
||||
link.className = 'internalLink'; |
||||
} |
||||
|
||||
pdfPage.getAnnotations().then(function(annotationsData) { |
||||
viewport = viewport.clone({ dontFlip: true }); |
||||
var transform = viewport.transform; |
||||
var transformStr = 'matrix(' + transform.join(',') + ')'; |
||||
var data, element, i, ii; |
||||
|
||||
if (self.annotationLayer) { |
||||
// If an annotationLayer already exists, refresh its children's
|
||||
// transformation matrices
|
||||
for (i = 0, ii = annotationsData.length; i < ii; i++) { |
||||
data = annotationsData[i]; |
||||
element = self.annotationLayer.querySelector( |
||||
'[data-annotation-id="' + data.id + '"]'); |
||||
if (element) { |
||||
CustomStyle.setProp('transform', element, transformStr); |
||||
} |
||||
} |
||||
// See this.reset()
|
||||
self.annotationLayer.removeAttribute('hidden'); |
||||
} else { |
||||
for (i = 0, ii = annotationsData.length; i < ii; i++) { |
||||
data = annotationsData[i]; |
||||
if (!data || !data.hasHtml) { |
||||
continue; |
||||
} |
||||
|
||||
element = PDFJS.AnnotationUtils.getHtmlElement(data, |
||||
pdfPage.commonObjs); |
||||
element.setAttribute('data-annotation-id', data.id); |
||||
mozL10n.translate(element); |
||||
|
||||
var rect = data.rect; |
||||
var view = pdfPage.view; |
||||
rect = PDFJS.Util.normalizeRect([ |
||||
rect[0], |
||||
view[3] - rect[1] + view[1], |
||||
rect[2], |
||||
view[3] - rect[3] + view[1] |
||||
]); |
||||
element.style.left = rect[0] + 'px'; |
||||
element.style.top = rect[1] + 'px'; |
||||
element.style.position = 'absolute'; |
||||
|
||||
CustomStyle.setProp('transform', element, transformStr); |
||||
var transformOriginStr = -rect[0] + 'px ' + -rect[1] + 'px'; |
||||
CustomStyle.setProp('transformOrigin', element, transformOriginStr); |
||||
|
||||
if (data.subtype === 'Link' && !data.url) { |
||||
var link = element.getElementsByTagName('a')[0]; |
||||
if (link) { |
||||
if (data.action) { |
||||
bindNamedAction(link, data.action); |
||||
} else { |
||||
bindLink(link, ('dest' in data) ? data.dest : null); |
||||
} |
||||
} |
||||
} |
||||
|
||||
if (!self.annotationLayer) { |
||||
var annotationLayerDiv = document.createElement('div'); |
||||
annotationLayerDiv.className = 'annotationLayer'; |
||||
pageDiv.appendChild(annotationLayerDiv); |
||||
self.annotationLayer = annotationLayerDiv; |
||||
} |
||||
|
||||
self.annotationLayer.appendChild(element); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
this.getPagePoint = function pageViewGetPagePoint(x, y) { |
||||
return this.viewport.convertToPdfPoint(x, y); |
||||
}; |
||||
|
||||
this.draw = function pageviewDraw(callback) { |
||||
var pdfPage = this.pdfPage; |
||||
|
||||
if (this.pagePdfPromise) { |
||||
return; |
||||
} |
||||
if (!pdfPage) { |
||||
var promise = this.pageSource.getPage(); |
||||
promise.then(function(pdfPage) { |
||||
delete this.pagePdfPromise; |
||||
this.setPdfPage(pdfPage); |
||||
this.draw(callback); |
||||
}.bind(this)); |
||||
this.pagePdfPromise = promise; |
||||
return; |
||||
} |
||||
|
||||
if (this.renderingState !== RenderingStates.INITIAL) { |
||||
console.error('Must be in new state before drawing'); |
||||
} |
||||
|
||||
this.renderingState = RenderingStates.RUNNING; |
||||
|
||||
var viewport = this.viewport; |
||||
// Wrap the canvas so if it has a css transform for highdpi the overflow
|
||||
// will be hidden in FF.
|
||||
var canvasWrapper = document.createElement('div'); |
||||
canvasWrapper.style.width = div.style.width; |
||||
canvasWrapper.style.height = div.style.height; |
||||
canvasWrapper.classList.add('canvasWrapper'); |
||||
|
||||
var canvas = document.createElement('canvas'); |
||||
canvas.id = 'page' + this.id; |
||||
canvasWrapper.appendChild(canvas); |
||||
if (this.annotationLayer) { |
||||
// annotationLayer needs to stay on top
|
||||
div.insertBefore(canvasWrapper, this.annotationLayer); |
||||
} else { |
||||
div.appendChild(canvasWrapper); |
||||
} |
||||
this.canvas = canvas; |
||||
|
||||
var ctx = canvas.getContext('2d'); |
||||
var outputScale = getOutputScale(ctx); |
||||
|
||||
if (PDFJS.useOnlyCssZoom) { |
||||
var actualSizeViewport = viewport.clone({ scale: CSS_UNITS }); |
||||
// Use a scale that will make the canvas be the original intended size
|
||||
// of the page.
|
||||
outputScale.sx *= actualSizeViewport.width / viewport.width; |
||||
outputScale.sy *= actualSizeViewport.height / viewport.height; |
||||
outputScale.scaled = true; |
||||
} |
||||
|
||||
if (PDFJS.maxCanvasPixels > 0) { |
||||
var pixelsInViewport = viewport.width * viewport.height; |
||||
var maxScale = Math.sqrt(PDFJS.maxCanvasPixels / pixelsInViewport); |
||||
if (outputScale.sx > maxScale || outputScale.sy > maxScale) { |
||||
outputScale.sx = maxScale; |
||||
outputScale.sy = maxScale; |
||||
outputScale.scaled = true; |
||||
this.hasRestrictedScaling = true; |
||||
} else { |
||||
this.hasRestrictedScaling = false; |
||||
} |
||||
} |
||||
|
||||
canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0; |
||||
canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0; |
||||
canvas.style.width = Math.floor(viewport.width) + 'px'; |
||||
canvas.style.height = Math.floor(viewport.height) + 'px'; |
||||
// Add the viewport so it's known what it was originally drawn with.
|
||||
canvas._viewport = viewport; |
||||
|
||||
var textLayerDiv = null; |
||||
var textLayer = null; |
||||
if (!PDFJS.disableTextLayer) { |
||||
textLayerDiv = document.createElement('div'); |
||||
textLayerDiv.className = 'textLayer'; |
||||
textLayerDiv.style.width = canvas.style.width; |
||||
textLayerDiv.style.height = canvas.style.height; |
||||
if (this.annotationLayer) { |
||||
// annotationLayer needs to stay on top
|
||||
div.insertBefore(textLayerDiv, this.annotationLayer); |
||||
} else { |
||||
div.appendChild(textLayerDiv); |
||||
} |
||||
|
||||
textLayer = this.viewer.createTextLayerBuilder(textLayerDiv, this.id - 1, |
||||
this.viewport); |
||||
} |
||||
this.textLayer = textLayer; |
||||
|
||||
// TODO(mack): use data attributes to store these
|
||||
ctx._scaleX = outputScale.sx; |
||||
ctx._scaleY = outputScale.sy; |
||||
if (outputScale.scaled) { |
||||
ctx.scale(outputScale.sx, outputScale.sy); |
||||
} |
||||
|
||||
// Rendering area
|
||||
|
||||
var self = this; |
||||
function pageViewDrawCallback(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 === self.renderTask) { |
||||
self.renderTask = null; |
||||
} |
||||
|
||||
if (error === 'cancelled') { |
||||
return; |
||||
} |
||||
|
||||
self.renderingState = RenderingStates.FINISHED; |
||||
|
||||
if (self.loadingIconDiv) { |
||||
div.removeChild(self.loadingIconDiv); |
||||
delete self.loadingIconDiv; |
||||
} |
||||
|
||||
if (self.zoomLayer) { |
||||
div.removeChild(self.zoomLayer); |
||||
self.zoomLayer = null; |
||||
} |
||||
|
||||
self.error = error; |
||||
self.stats = pdfPage.stats; |
||||
self.updateStats(); |
||||
if (self.onAfterDraw) { |
||||
self.onAfterDraw(); |
||||
} |
||||
|
||||
var event = document.createEvent('CustomEvent'); |
||||
event.initCustomEvent('pagerender', true, true, { |
||||
pageNumber: pdfPage.pageNumber |
||||
}); |
||||
div.dispatchEvent(event); |
||||
|
||||
callback(); |
||||
} |
||||
|
||||
var renderContext = { |
||||
canvasContext: ctx, |
||||
viewport: this.viewport, |
||||
// intent: 'default', // === 'display'
|
||||
continueCallback: function pdfViewcContinueCallback(cont) { |
||||
if (!self.renderingQueue.isHighestPriority(self)) { |
||||
self.renderingState = RenderingStates.PAUSED; |
||||
self.resume = function resumeCallback() { |
||||
self.renderingState = RenderingStates.RUNNING; |
||||
cont(); |
||||
}; |
||||
return; |
||||
} |
||||
cont(); |
||||
} |
||||
}; |
||||
var renderTask = this.renderTask = this.pdfPage.render(renderContext); |
||||
|
||||
this.renderTask.promise.then( |
||||
function pdfPageRenderCallback() { |
||||
pageViewDrawCallback(null); |
||||
if (textLayer) { |
||||
self.pdfPage.getTextContent().then( |
||||
function textContentResolved(textContent) { |
||||
textLayer.setTextContent(textContent); |
||||
} |
||||
); |
||||
} |
||||
}, |
||||
function pdfPageRenderError(error) { |
||||
pageViewDrawCallback(error); |
||||
} |
||||
); |
||||
|
||||
setupAnnotations(div, pdfPage, this.viewport); |
||||
div.setAttribute('data-loaded', true); |
||||
|
||||
// Add the page to the cache at the start of drawing. That way it can be
|
||||
// evicted from the cache and destroyed even if we pause its rendering.
|
||||
cache.push(this); |
||||
}; |
||||
|
||||
this.beforePrint = function pageViewBeforePrint() { |
||||
var pdfPage = this.pdfPage; |
||||
|
||||
var viewport = pdfPage.getViewport(1); |
||||
// Use the same hack we use for high dpi displays for printing to get better
|
||||
// output until bug 811002 is fixed in FF.
|
||||
var PRINT_OUTPUT_SCALE = 2; |
||||
var canvas = document.createElement('canvas'); |
||||
canvas.width = Math.floor(viewport.width) * PRINT_OUTPUT_SCALE; |
||||
canvas.height = Math.floor(viewport.height) * PRINT_OUTPUT_SCALE; |
||||
canvas.style.width = (PRINT_OUTPUT_SCALE * viewport.width) + 'pt'; |
||||
canvas.style.height = (PRINT_OUTPUT_SCALE * viewport.height) + 'pt'; |
||||
var cssScale = 'scale(' + (1 / PRINT_OUTPUT_SCALE) + ', ' + |
||||
(1 / PRINT_OUTPUT_SCALE) + ')'; |
||||
CustomStyle.setProp('transform' , canvas, cssScale); |
||||
CustomStyle.setProp('transformOrigin' , canvas, '0% 0%'); |
||||
|
||||
var printContainer = document.getElementById('printContainer'); |
||||
var canvasWrapper = document.createElement('div'); |
||||
canvasWrapper.style.width = viewport.width + 'pt'; |
||||
canvasWrapper.style.height = viewport.height + 'pt'; |
||||
canvasWrapper.appendChild(canvas); |
||||
printContainer.appendChild(canvasWrapper); |
||||
|
||||
canvas.mozPrintCallback = function(obj) { |
||||
var ctx = obj.context; |
||||
|
||||
ctx.save(); |
||||
ctx.fillStyle = 'rgb(255, 255, 255)'; |
||||
ctx.fillRect(0, 0, canvas.width, canvas.height); |
||||
ctx.restore(); |
||||
ctx.scale(PRINT_OUTPUT_SCALE, PRINT_OUTPUT_SCALE); |
||||
|
||||
var renderContext = { |
||||
canvasContext: ctx, |
||||
viewport: viewport, |
||||
intent: 'print' |
||||
}; |
||||
|
||||
pdfPage.render(renderContext).promise.then(function() { |
||||
// Tell the printEngine that rendering this canvas/page has finished.
|
||||
obj.done(); |
||||
}, function(error) { |
||||
console.error(error); |
||||
// Tell the printEngine that rendering this canvas/page has failed.
|
||||
// This will make the print proces stop.
|
||||
if ('abort' in obj) { |
||||
obj.abort(); |
||||
} else { |
||||
obj.done(); |
||||
} |
||||
}); |
||||
}; |
||||
}; |
||||
|
||||
this.updateStats = function pageViewUpdateStats() { |
||||
if (!this.stats) { |
||||
return; |
||||
} |
||||
|
||||
if (PDFJS.pdfBug && Stats.enabled) { |
||||
var stats = this.stats; |
||||
Stats.add(this.id, stats); |
||||
} |
||||
}; |
||||
}; |
||||
@ -0,0 +1,542 @@
@@ -0,0 +1,542 @@
|
||||
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ |
||||
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */ |
||||
/* Copyright 2012 Mozilla Foundation |
||||
* |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
/* globals RenderingStates, PDFJS, CustomStyle, CSS_UNITS, getOutputScale, |
||||
TextLayerBuilder, AnnotationsLayerBuilder, Promise */ |
||||
|
||||
'use strict'; |
||||
|
||||
var TEXT_LAYER_RENDER_DELAY = 200; // ms
|
||||
|
||||
/** |
||||
* @typedef {Object} PDFPageViewOptions |
||||
* @property {HTMLDivElement} container - The viewer element. |
||||
* @property {number} id - The page unique ID (normally its number). |
||||
* @property {number} scale - The page scale display. |
||||
* @property {PageViewport} defaultViewport - The page viewport. |
||||
* @property {PDFRenderingQueue} renderingQueue - The rendering queue object. |
||||
* @property {IPDFTextLayerFactory} textLayerFactory |
||||
* @property {IPDFAnnotationsLayerFactory} annotationsLayerFactory |
||||
*/ |
||||
|
||||
/** |
||||
* @class |
||||
* @implements {IRenderableView} |
||||
*/ |
||||
var PDFPageView = (function PDFPageViewClosure() { |
||||
/** |
||||
* @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 annotationsLayerFactory = options.annotationsLayerFactory; |
||||
|
||||
this.id = id; |
||||
this.renderingId = 'page' + id; |
||||
|
||||
this.rotation = 0; |
||||
this.scale = scale || 1.0; |
||||
this.viewport = defaultViewport; |
||||
this.pdfPageRotate = defaultViewport.rotation; |
||||
this.hasRestrictedScaling = false; |
||||
|
||||
this.renderingQueue = renderingQueue; |
||||
this.textLayerFactory = textLayerFactory; |
||||
this.annotationsLayerFactory = annotationsLayerFactory; |
||||
|
||||
this.renderingState = RenderingStates.INITIAL; |
||||
this.resume = null; |
||||
|
||||
this.onBeforeDraw = null; |
||||
this.onAfterDraw = null; |
||||
|
||||
this.textLayer = null; |
||||
|
||||
this.zoomLayer = null; |
||||
|
||||
this.annotationLayer = null; |
||||
|
||||
var anchor = document.createElement('a'); |
||||
anchor.name = '' + this.id; |
||||
|
||||
var div = document.createElement('div'); |
||||
div.id = 'pageContainer' + this.id; |
||||
div.className = 'page'; |
||||
div.style.width = Math.floor(this.viewport.width) + 'px'; |
||||
div.style.height = Math.floor(this.viewport.height) + 'px'; |
||||
this.el = div; // TODO replace 'el' property usage
|
||||
this.div = div; |
||||
|
||||
container.appendChild(anchor); |
||||
container.appendChild(div); |
||||
} |
||||
|
||||
PDFPageView.prototype = { |
||||
setPdfPage: function PDFPageView_setPdfPage(pdfPage) { |
||||
this.pdfPage = pdfPage; |
||||
this.pdfPageRotate = pdfPage.rotate; |
||||
var 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() { |
||||
this.zoomLayer = null; |
||||
this.reset(); |
||||
if (this.pdfPage) { |
||||
this.pdfPage.destroy(); |
||||
} |
||||
}, |
||||
|
||||
reset: function PDFPageView_reset(keepAnnotations) { |
||||
if (this.renderTask) { |
||||
this.renderTask.cancel(); |
||||
} |
||||
this.resume = null; |
||||
this.renderingState = RenderingStates.INITIAL; |
||||
|
||||
var 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 currentZoomLayer = this.zoomLayer || null; |
||||
var currentAnnotationNode = (keepAnnotations && this.annotationLayer && |
||||
this.annotationLayer.div) || null; |
||||
for (var i = div.childNodes.length - 1; i >= 0; i--) { |
||||
var node = childNodes[i]; |
||||
if (currentZoomLayer === node || currentAnnotationNode === node) { |
||||
continue; |
||||
} |
||||
div.removeChild(node); |
||||
} |
||||
div.removeAttribute('data-loaded'); |
||||
|
||||
if (keepAnnotations) { |
||||
if (this.annotationLayer) { |
||||
// Hide annotationLayer until all elements are resized
|
||||
// so they are not displayed on the already-resized page
|
||||
this.annotationLayer.hide(); |
||||
} |
||||
} else { |
||||
this.annotationLayer = null; |
||||
} |
||||
|
||||
if (this.canvas) { |
||||
// Zeroing the width and height causes Firefox to release graphics
|
||||
// resources immediately, which can greatly reduce memory consumption.
|
||||
this.canvas.width = 0; |
||||
this.canvas.height = 0; |
||||
delete this.canvas; |
||||
} |
||||
|
||||
this.loadingIconDiv = document.createElement('div'); |
||||
this.loadingIconDiv.className = 'loadingIcon'; |
||||
div.appendChild(this.loadingIconDiv); |
||||
}, |
||||
|
||||
update: function PDFPageView_update(scale, rotation) { |
||||
this.scale = scale || this.scale; |
||||
|
||||
if (typeof rotation !== 'undefined') { |
||||
this.rotation = rotation; |
||||
} |
||||
|
||||
var totalRotation = (this.rotation + this.pdfPageRotate) % 360; |
||||
this.viewport = this.viewport.clone({ |
||||
scale: this.scale * CSS_UNITS, |
||||
rotation: totalRotation |
||||
}); |
||||
|
||||
var isScalingRestricted = false; |
||||
if (this.canvas && PDFJS.maxCanvasPixels > 0) { |
||||
var ctx = this.canvas.getContext('2d'); |
||||
var outputScale = getOutputScale(ctx); |
||||
var pixelsInViewport = this.viewport.width * this.viewport.height; |
||||
var maxScale = Math.sqrt(PDFJS.maxCanvasPixels / pixelsInViewport); |
||||
if (((Math.floor(this.viewport.width) * outputScale.sx) | 0) * |
||||
((Math.floor(this.viewport.height) * outputScale.sy) | 0) > |
||||
PDFJS.maxCanvasPixels) { |
||||
isScalingRestricted = true; |
||||
} |
||||
} |
||||
|
||||
if (this.canvas && |
||||
(PDFJS.useOnlyCssZoom || |
||||
(this.hasRestrictedScaling && isScalingRestricted))) { |
||||
this.cssTransform(this.canvas, true); |
||||
return; |
||||
} else if (this.canvas && !this.zoomLayer) { |
||||
this.zoomLayer = this.canvas.parentNode; |
||||
this.zoomLayer.style.position = 'absolute'; |
||||
} |
||||
if (this.zoomLayer) { |
||||
this.cssTransform(this.zoomLayer.firstChild); |
||||
} |
||||
this.reset(true); |
||||
}, |
||||
|
||||
/** |
||||
* Called when moved in the parent's container. |
||||
*/ |
||||
updatePosition: function PDFPageView_updatePosition() { |
||||
if (this.textLayer) { |
||||
this.textLayer.render(TEXT_LAYER_RENDER_DELAY); |
||||
} |
||||
}, |
||||
|
||||
cssTransform: function PDFPageView_transform(canvas, redrawAnnotations) { |
||||
// Scale canvas, canvas wrapper, and page container.
|
||||
var width = this.viewport.width; |
||||
var height = this.viewport.height; |
||||
var div = this.div; |
||||
canvas.style.width = canvas.parentNode.style.width = div.style.width = |
||||
Math.floor(width) + 'px'; |
||||
canvas.style.height = canvas.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 - canvas._viewport.rotation; |
||||
var absRotation = Math.abs(relativeRotation); |
||||
var 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) ' + |
||||
'scale(' + scaleX + ',' + scaleY + ')'; |
||||
CustomStyle.setProp('transform', canvas, cssTransform); |
||||
|
||||
if (this.textLayer) { |
||||
// 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 - |
||||
textLayerViewport.rotation; |
||||
var textAbsRotation = Math.abs(textRelativeRotation); |
||||
var scale = width / textLayerViewport.width; |
||||
if (textAbsRotation === 90 || textAbsRotation === 270) { |
||||
scale = width / textLayerViewport.height; |
||||
} |
||||
var textLayerDiv = this.textLayer.textLayerDiv; |
||||
var transX, transY; |
||||
switch (textAbsRotation) { |
||||
case 0: |
||||
transX = transY = 0; |
||||
break; |
||||
case 90: |
||||
transX = 0; |
||||
transY = '-' + textLayerDiv.style.height; |
||||
break; |
||||
case 180: |
||||
transX = '-' + textLayerDiv.style.width; |
||||
transY = '-' + textLayerDiv.style.height; |
||||
break; |
||||
case 270: |
||||
transX = '-' + textLayerDiv.style.width; |
||||
transY = 0; |
||||
break; |
||||
default: |
||||
console.error('Bad rotation value.'); |
||||
break; |
||||
} |
||||
CustomStyle.setProp('transform', textLayerDiv, |
||||
'rotate(' + textAbsRotation + 'deg) ' + |
||||
'scale(' + scale + ', ' + scale + ') ' + |
||||
'translate(' + transX + ', ' + transY + ')'); |
||||
CustomStyle.setProp('transformOrigin', textLayerDiv, '0% 0%'); |
||||
} |
||||
|
||||
if (redrawAnnotations && this.annotationLayer) { |
||||
this.annotationLayer.setupAnnotations(this.viewport); |
||||
} |
||||
}, |
||||
|
||||
get width() { |
||||
return this.viewport.width; |
||||
}, |
||||
|
||||
get height() { |
||||
return this.viewport.height; |
||||
}, |
||||
|
||||
getPagePoint: function PDFPageView_getPagePoint(x, y) { |
||||
return this.viewport.convertToPdfPoint(x, y); |
||||
}, |
||||
|
||||
draw: function PDFPageView_draw() { |
||||
if (this.renderingState !== RenderingStates.INITIAL) { |
||||
console.error('Must be in new state before drawing'); |
||||
} |
||||
|
||||
this.renderingState = RenderingStates.RUNNING; |
||||
|
||||
var pdfPage = this.pdfPage; |
||||
var viewport = this.viewport; |
||||
var div = this.div; |
||||
// Wrap the canvas so if it has a css transform for highdpi the overflow
|
||||
// will be hidden in FF.
|
||||
var canvasWrapper = document.createElement('div'); |
||||
canvasWrapper.style.width = div.style.width; |
||||
canvasWrapper.style.height = div.style.height; |
||||
canvasWrapper.classList.add('canvasWrapper'); |
||||
|
||||
var canvas = document.createElement('canvas'); |
||||
canvas.id = 'page' + this.id; |
||||
canvasWrapper.appendChild(canvas); |
||||
if (this.annotationLayer) { |
||||
// annotationLayer needs to stay on top
|
||||
div.insertBefore(canvasWrapper, this.annotationLayer.div); |
||||
} else { |
||||
div.appendChild(canvasWrapper); |
||||
} |
||||
this.canvas = canvas; |
||||
|
||||
var ctx = canvas.getContext('2d'); |
||||
var outputScale = getOutputScale(ctx); |
||||
|
||||
if (PDFJS.useOnlyCssZoom) { |
||||
var actualSizeViewport = viewport.clone({ scale: CSS_UNITS }); |
||||
// Use a scale that will make the canvas be the original intended size
|
||||
// of the page.
|
||||
outputScale.sx *= actualSizeViewport.width / viewport.width; |
||||
outputScale.sy *= actualSizeViewport.height / viewport.height; |
||||
outputScale.scaled = true; |
||||
} |
||||
|
||||
if (PDFJS.maxCanvasPixels > 0) { |
||||
var pixelsInViewport = viewport.width * viewport.height; |
||||
var maxScale = Math.sqrt(PDFJS.maxCanvasPixels / pixelsInViewport); |
||||
if (outputScale.sx > maxScale || outputScale.sy > maxScale) { |
||||
outputScale.sx = maxScale; |
||||
outputScale.sy = maxScale; |
||||
outputScale.scaled = true; |
||||
this.hasRestrictedScaling = true; |
||||
} else { |
||||
this.hasRestrictedScaling = false; |
||||
} |
||||
} |
||||
|
||||
canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0; |
||||
canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0; |
||||
canvas.style.width = Math.floor(viewport.width) + 'px'; |
||||
canvas.style.height = Math.floor(viewport.height) + 'px'; |
||||
// Add the viewport so it's known what it was originally drawn with.
|
||||
canvas._viewport = viewport; |
||||
|
||||
var textLayerDiv = null; |
||||
var textLayer = null; |
||||
if (this.textLayerFactory) { |
||||
textLayerDiv = document.createElement('div'); |
||||
textLayerDiv.className = 'textLayer'; |
||||
textLayerDiv.style.width = canvas.style.width; |
||||
textLayerDiv.style.height = canvas.style.height; |
||||
if (this.annotationLayer) { |
||||
// annotationLayer needs to stay on top
|
||||
div.insertBefore(textLayerDiv, this.annotationLayer.div); |
||||
} else { |
||||
div.appendChild(textLayerDiv); |
||||
} |
||||
|
||||
textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, |
||||
this.id - 1, |
||||
this.viewport); |
||||
} |
||||
this.textLayer = textLayer; |
||||
|
||||
// TODO(mack): use data attributes to store these
|
||||
ctx._scaleX = outputScale.sx; |
||||
ctx._scaleY = outputScale.sy; |
||||
if (outputScale.scaled) { |
||||
ctx.scale(outputScale.sx, outputScale.sy); |
||||
} |
||||
|
||||
var resolveRenderPromise, rejectRenderPromise; |
||||
var promise = new Promise(function (resolve, reject) { |
||||
resolveRenderPromise = resolve; |
||||
rejectRenderPromise = reject; |
||||
}); |
||||
|
||||
// Rendering area
|
||||
|
||||
var self = this; |
||||
function pageViewDrawCallback(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 === self.renderTask) { |
||||
self.renderTask = null; |
||||
} |
||||
|
||||
if (error === 'cancelled') { |
||||
rejectRenderPromise(error); |
||||
return; |
||||
} |
||||
|
||||
self.renderingState = RenderingStates.FINISHED; |
||||
|
||||
if (self.loadingIconDiv) { |
||||
div.removeChild(self.loadingIconDiv); |
||||
delete self.loadingIconDiv; |
||||
} |
||||
|
||||
if (self.zoomLayer) { |
||||
div.removeChild(self.zoomLayer); |
||||
self.zoomLayer = null; |
||||
} |
||||
|
||||
self.error = error; |
||||
self.stats = pdfPage.stats; |
||||
if (self.onAfterDraw) { |
||||
self.onAfterDraw(); |
||||
} |
||||
|
||||
var event = document.createEvent('CustomEvent'); |
||||
event.initCustomEvent('pagerender', true, true, { |
||||
pageNumber: pdfPage.pageNumber |
||||
}); |
||||
div.dispatchEvent(event); |
||||
|
||||
if (!error) { |
||||
resolveRenderPromise(undefined); |
||||
} else { |
||||
rejectRenderPromise(error); |
||||
} |
||||
} |
||||
|
||||
var renderContinueCallback = null; |
||||
if (this.renderingQueue) { |
||||
renderContinueCallback = function renderContinueCallback(cont) { |
||||
if (!self.renderingQueue.isHighestPriority(self)) { |
||||
self.renderingState = RenderingStates.PAUSED; |
||||
self.resume = function resumeCallback() { |
||||
self.renderingState = RenderingStates.RUNNING; |
||||
cont(); |
||||
}; |
||||
return; |
||||
} |
||||
cont(); |
||||
}; |
||||
} |
||||
|
||||
var renderContext = { |
||||
canvasContext: ctx, |
||||
viewport: this.viewport, |
||||
// intent: 'default', // === 'display'
|
||||
continueCallback: renderContinueCallback |
||||
}; |
||||
var renderTask = this.renderTask = this.pdfPage.render(renderContext); |
||||
|
||||
this.renderTask.promise.then( |
||||
function pdfPageRenderCallback() { |
||||
pageViewDrawCallback(null); |
||||
if (textLayer) { |
||||
self.pdfPage.getTextContent().then( |
||||
function textContentResolved(textContent) { |
||||
textLayer.setTextContent(textContent); |
||||
textLayer.render(TEXT_LAYER_RENDER_DELAY); |
||||
} |
||||
); |
||||
} |
||||
}, |
||||
function pdfPageRenderError(error) { |
||||
pageViewDrawCallback(error); |
||||
} |
||||
); |
||||
|
||||
if (this.annotationsLayerFactory) { |
||||
if (!this.annotationLayer) { |
||||
this.annotationLayer = this.annotationsLayerFactory. |
||||
createAnnotationsLayerBuilder(div, this.pdfPage); |
||||
} |
||||
this.annotationLayer.setupAnnotations(this.viewport); |
||||
} |
||||
div.setAttribute('data-loaded', true); |
||||
|
||||
if (self.onBeforeDraw) { |
||||
self.onBeforeDraw(); |
||||
} |
||||
return promise; |
||||
}, |
||||
|
||||
beforePrint: function PDFPageView_beforePrint() { |
||||
var pdfPage = this.pdfPage; |
||||
|
||||
var viewport = pdfPage.getViewport(1); |
||||
// Use the same hack we use for high dpi displays for printing to get
|
||||
// better output until bug 811002 is fixed in FF.
|
||||
var PRINT_OUTPUT_SCALE = 2; |
||||
var canvas = document.createElement('canvas'); |
||||
canvas.width = Math.floor(viewport.width) * PRINT_OUTPUT_SCALE; |
||||
canvas.height = Math.floor(viewport.height) * PRINT_OUTPUT_SCALE; |
||||
canvas.style.width = (PRINT_OUTPUT_SCALE * viewport.width) + 'pt'; |
||||
canvas.style.height = (PRINT_OUTPUT_SCALE * viewport.height) + 'pt'; |
||||
var cssScale = 'scale(' + (1 / PRINT_OUTPUT_SCALE) + ', ' + |
||||
(1 / PRINT_OUTPUT_SCALE) + ')'; |
||||
CustomStyle.setProp('transform' , canvas, cssScale); |
||||
CustomStyle.setProp('transformOrigin' , canvas, '0% 0%'); |
||||
|
||||
var printContainer = document.getElementById('printContainer'); |
||||
var canvasWrapper = document.createElement('div'); |
||||
canvasWrapper.style.width = viewport.width + 'pt'; |
||||
canvasWrapper.style.height = viewport.height + 'pt'; |
||||
canvasWrapper.appendChild(canvas); |
||||
printContainer.appendChild(canvasWrapper); |
||||
|
||||
canvas.mozPrintCallback = function(obj) { |
||||
var ctx = obj.context; |
||||
|
||||
ctx.save(); |
||||
ctx.fillStyle = 'rgb(255, 255, 255)'; |
||||
ctx.fillRect(0, 0, canvas.width, canvas.height); |
||||
ctx.restore(); |
||||
ctx.scale(PRINT_OUTPUT_SCALE, PRINT_OUTPUT_SCALE); |
||||
|
||||
var renderContext = { |
||||
canvasContext: ctx, |
||||
viewport: viewport, |
||||
intent: 'print' |
||||
}; |
||||
|
||||
pdfPage.render(renderContext).promise.then(function() { |
||||
// Tell the printEngine that rendering this canvas/page has finished.
|
||||
obj.done(); |
||||
}, function(error) { |
||||
console.error(error); |
||||
// Tell the printEngine that rendering this canvas/page has failed.
|
||||
// This will make the print proces stop.
|
||||
if ('abort' in obj) { |
||||
obj.abort(); |
||||
} else { |
||||
obj.done(); |
||||
} |
||||
}); |
||||
}; |
||||
}, |
||||
}; |
||||
|
||||
return PDFPageView; |
||||
})(); |
||||
Loading…
Reference in new issue