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

Smoother thumbnail scrolling via lazy rendering

Browse Source
This commit is contained in:
Artur Adib 2011-11-30 14:19:07 -05:00
parent beb310708d
commit e316d78755
2 changed files with 78 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/viewer.html
View File

@ -28,7 +28,6 @@
<script type="text/javascript">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE --> <script type="text/javascript">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE -->
<script type="text/javascript" src="viewer.js"></script>
</head> </head>
<body> <body>
@ -119,6 +118,7 @@
<div id="loading">Loading... 0%</div> <div id="loading">Loading... 0%</div>
<div id="viewer"></div> <div id="viewer"></div>
<script type="text/javascript" src="viewer.js"></script>
</body> </body>
</html> </html>

113
web/viewer.js
View File

@ -13,19 +13,6 @@ var kMinScale = 0.25;
var kMaxScale = 4.0; var kMaxScale = 4.0;
var Cache = function cacheCache(size) {
var data = [];
this.push = function cachePush(view) {
var i = data.indexOf(view);
if (i >= 0)
data.splice(i);
data.push(view);
if (data.length > size)
data.shift().update();
};
};
var cache = new Cache(kCacheSize);
var currentPageNumber = 1; var currentPageNumber = 1;
var PDFView = { var PDFView = {
@ -294,6 +281,7 @@ var PDFView = {
outlineScrollView.setAttribute('hidden', 'true'); outlineScrollView.setAttribute('hidden', 'true');
thumbsSwitchButton.setAttribute('data-selected', true); thumbsSwitchButton.setAttribute('data-selected', true);
outlineSwitchButton.removeAttribute('data-selected'); outlineSwitchButton.removeAttribute('data-selected');
updateThumbViewArea();
break; break;
case 'outline': case 'outline':
thumbsScrollView.setAttribute('hidden', 'true'); thumbsScrollView.setAttribute('hidden', 'true');
@ -328,6 +316,34 @@ var PDFView = {
currentHeight += singlePage.height * singlePage.scale + kBottomMargin; currentHeight += singlePage.height * singlePage.scale + kBottomMargin;
} }
return visiblePages; return visiblePages;
},
getVisibleThumbs: function pdfViewGetVisibleThumbs() {
var thumbs = this.thumbnails;
var kBottomMargin = 5;
var visibleThumbs = [];
var view = document.getElementById('sidebarScrollView');
var currentHeight = kBottomMargin;
var top = view.scrollTop;
for (var i = 1; i <= thumbs.length; ++i) {
var thumb = thumbs[i - 1];
var thumbHeight = thumb.height * thumb.scaleY + kBottomMargin;
if (currentHeight + thumbHeight > top)
break;
currentHeight += thumbHeight;
}
var bottom = top + view.clientHeight;
for (; i <= thumbs.length && currentHeight < bottom; ++i) {
var singleThumb = thumbs[i - 1];
visibleThumbs.push({ id: singleThumb.id, y: currentHeight,
view: singleThumb });
currentHeight += singleThumb.height * singleThumb.scaleY + kBottomMargin;
}
return visibleThumbs;
} }
}; };
@ -510,6 +526,19 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
PDFView.page = id; PDFView.page = id;
return false; return false;
}; };
var view = page.view;
this.width = view.width;
this.height = view.height;
this.id = id;
var maxThumbSize = 134;
var canvasWidth = pageRatio >= 1 ? maxThumbSize :
maxThumbSize * pageRatio;
var canvasHeight = pageRatio <= 1 ? maxThumbSize :
maxThumbSize / pageRatio;
this.scaleX = (canvasWidth / this.width);
this.scaleY = (canvasHeight / this.height);
var div = document.createElement('div'); var div = document.createElement('div');
div.id = 'thumbnailContainer' + id; div.id = 'thumbnailContainer' + id;
@ -526,11 +555,8 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
canvas.id = 'thumbnail' + id; canvas.id = 'thumbnail' + id;
canvas.mozOpaque = true; canvas.mozOpaque = true;
var maxThumbSize = 134; canvas.width = canvasWidth;
canvas.width = pageRatio >= 1 ? maxThumbSize : canvas.height = canvasHeight;
maxThumbSize * pageRatio;
canvas.height = pageRatio <= 1 ? maxThumbSize :
maxThumbSize / pageRatio;
div.setAttribute('data-loaded', true); div.setAttribute('data-loaded', true);
div.appendChild(canvas); div.appendChild(canvas);
@ -542,8 +568,8 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
ctx.restore(); ctx.restore();
var view = page.view; var view = page.view;
var scaleX = (canvas.width / page.width); var scaleX = this.scaleX;
var scaleY = (canvas.height / page.height); var scaleY = this.scaleY;
ctx.translate(-view.x * scaleX, -view.y * scaleY); ctx.translate(-view.x * scaleX, -view.y * scaleY);
div.style.width = (view.width * scaleX) + 'px'; div.style.width = (view.width * scaleX) + 'px';
div.style.height = (view.height * scaleY) + 'px'; div.style.height = (view.height * scaleY) + 'px';
@ -613,8 +639,7 @@ function updateViewarea() {
var visiblePages = PDFView.getVisiblePages(); var visiblePages = PDFView.getVisiblePages();
for (var i = 0; i < visiblePages.length; i++) { for (var i = 0; i < visiblePages.length; i++) {
var page = visiblePages[i]; var page = visiblePages[i];
if (PDFView.pages[page.id - 1].draw()) PDFView.pages[page.id - 1].draw();
cache.push(page.view);
} }
if (!visiblePages.length) if (!visiblePages.length)
@ -641,6 +666,35 @@ window.addEventListener('scroll', function webViewerScroll(evt) {
updateViewarea(); updateViewarea();
}, true); }, true);
var sidebarScrollView = document.getElementById('sidebarScrollView');
var thumbnailTimer;
function updateThumbViewArea() {
// Only render thumbs after pausing scrolling for this amount of time
// (makes UI more responsive)
var delay = 50; // in ms
if (thumbnailTimer)
clearTimeout(thumbnailTimer);
thumbnailTimer = setTimeout(function(){
var visibleThumbs = PDFView.getVisibleThumbs();
for (var i = 0; i < visibleThumbs.length; i++) {
var thumb = visibleThumbs[i];
PDFView.thumbnails[thumb.id - 1].draw();
}
}, delay);
}
sidebarScrollView.addEventListener('scroll', function thumbViewScroll(evt) {
updateThumbViewArea();
}, true);
window.addEventListener('transitionend', function webViewerTransitionend(evt) {
updateThumbViewArea();
}, true);
window.addEventListener('resize', function webViewerResize(evt) { window.addEventListener('resize', function webViewerResize(evt) {
if (document.getElementById('pageWidthOption').selected || if (document.getElementById('pageWidthOption').selected ||
document.getElementById('pageFitOption').selected) document.getElementById('pageFitOption').selected)
@ -681,21 +735,6 @@ window.addEventListener('change', function webViewerChange(evt) {
document.getElementById('download').setAttribute('hidden', 'true'); document.getElementById('download').setAttribute('hidden', 'true');
}, true); }, true);
window.addEventListener('transitionend', function webViewerTransitionend(evt) {
var pageIndex = 0;
var pagesCount = PDFView.pages.length;
var container = document.getElementById('sidebarView');
container._interval = window.setInterval(function interval() {
if (pageIndex >= pagesCount) {
window.clearInterval(container._interval);
return;
}
PDFView.thumbnails[pageIndex++].draw();
}, 500);
}, true);
window.addEventListener('scalechange', function scalechange(evt) { window.addEventListener('scalechange', function scalechange(evt) {
var customScaleOption = document.getElementById('customScaleOption'); var customScaleOption = document.getElementById('customScaleOption');
customScaleOption.selected = false; customScaleOption.selected = false;