]> git.parisson.com Git - pdf.js.git/commitdiff
projects / pdf.js.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: beb3107)
Smoother thumbnail scrolling via lazy rendering
authorArtur Adib <arturadib@gmail.com>
Wed, 30 Nov 2011 19:19:07 +0000 (14:19 -0500)
committerArtur Adib <arturadib@gmail.com>
Wed, 30 Nov 2011 19:19:07 +0000 (14:19 -0500)
web/viewer.html patch | blob | history
web/viewer.js patch | blob | history

diff --git a/web/viewer.html b/web/viewer.html
index a72503eee62b933cec779afd0d2f6334b6c1c837..ebc0bcb0634098bc4792177aeee961b0390e613c 100644 (file)
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -28,7 +28,6 @@
 
         <script type="text/javascript">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE -->
 
-        <script type="text/javascript" src="viewer.js"></script>
   </head>
 
   <body>
@@ -119,6 +118,7 @@
 
     <div id="loading">Loading... 0%</div>
     <div id="viewer"></div>
+
+    <script type="text/javascript" src="viewer.js"></script>
   </body>
 </html>
-
diff --git a/web/viewer.js b/web/viewer.js
index bfb3a43033a7f4ba84db6a06f681b0ff6c9b70da..e945dc434d3edfb2d68c76abc4a0857b3e5bcb73 100644 (file)
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -13,19 +13,6 @@ var kMinScale = 0.25;
 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 PDFView = {
@@ -294,6 +281,7 @@ var PDFView = {
         outlineScrollView.setAttribute('hidden', 'true');
         thumbsSwitchButton.setAttribute('data-selected', true);
         outlineSwitchButton.removeAttribute('data-selected');
+        updateThumbViewArea();
         break;
       case 'outline':
         thumbsScrollView.setAttribute('hidden', 'true');
@@ -328,6 +316,34 @@ var PDFView = {
       currentHeight += singlePage.height * singlePage.scale + kBottomMargin;
     }
     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;
     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');
   div.id = 'thumbnailContainer' + id;
@@ -526,11 +555,8 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
     canvas.id = 'thumbnail' + id;
     canvas.mozOpaque = true;
 
-    var maxThumbSize = 134;
-    canvas.width = pageRatio >= 1 ? maxThumbSize :
-      maxThumbSize * pageRatio;
-    canvas.height = pageRatio <= 1 ? maxThumbSize :
-      maxThumbSize / pageRatio;
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
 
     div.setAttribute('data-loaded', true);
     div.appendChild(canvas);
@@ -542,8 +568,8 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) {
     ctx.restore();
 
     var view = page.view;
-    var scaleX = (canvas.width / page.width);
-    var scaleY = (canvas.height / page.height);
+    var scaleX = this.scaleX;
+    var scaleY = this.scaleY;
     ctx.translate(-view.x * scaleX, -view.y * scaleY);
     div.style.width = (view.width * scaleX) + 'px';
     div.style.height = (view.height * scaleY) + 'px';
@@ -613,8 +639,7 @@ function updateViewarea() {
   var visiblePages = PDFView.getVisiblePages();
   for (var i = 0; i < visiblePages.length; i++) {
     var page = visiblePages[i];
-    if (PDFView.pages[page.id - 1].draw())
-      cache.push(page.view);
+    PDFView.pages[page.id - 1].draw();
   }
 
   if (!visiblePages.length)
@@ -641,6 +666,35 @@ window.addEventListener('scroll', function webViewerScroll(evt) {
   updateViewarea();
 }, 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) {
   if (document.getElementById('pageWidthOption').selected ||
       document.getElementById('pageFitOption').selected)
@@ -681,21 +735,6 @@ window.addEventListener('change', function webViewerChange(evt) {
   document.getElementById('download').setAttribute('hidden', '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) {
   var customScaleOption = document.getElementById('customScaleOption');
   customScaleOption.selected = false;
Unnamed repository; edit this file 'description' to name the repository.