Merge branch 'master' of https://github.com/andreasgal/pdf.js

fonts.js

@@ -34,31 +34,55 @@ var kDisableFonts = false;
  *      http://cgit.freedesktop.org/poppler/poppler/tree/poppler/GfxFont.cc#n65
  */
 
-var kScalePrecision = 40;
-var Fonts = {
-  _active: null,
+var Fonts = (function () {
+  var kScalePrecision = 40;
+  var fonts = Object.create(null);
+  var ctx = document.createElement("canvas").getContext("2d");
+  ctx.scale(1 / kScalePrecision, 1);
 
-  get active() {
-    return this._active;
-  },
+  function Font(name, data, properties) {
+    this.name = name;
+    this.data = data;
+    this.properties = properties;
+    this.loading = true;
+    this.charsCache = Object.create(null);
+    this.sizes = [];
+  }
 
-  setActive: function fonts_setActive(name, size) {
-    this._active = this[name];
-    this.ctx.font = (size * kScalePrecision) + 'px "' + name + '"';
-  },
+  var current;
+  var charsCache;
+  var measureCache;
 
+  return {
+    registerFont: function fonts_registerFont(fontName, data, properties) {
+      fonts[fontName] = new Font(fontName, data, properties);
+    },
+    blacklistFont: function fonts_blacklistFont(fontName) {
+      registerFont(fontName, null, {});
+      markLoaded(fontName);
+    },
+    lookup: function fonts_lookup(fontName) {
+      return fonts[fontName];
+    },
+    setActive: function fonts_setActive(fontName, size) {
+      current = fonts[fontName];
+      charsCache = current.charsCache;
+      var sizes = current.sizes;
+      if (!(measureCache = sizes[size]))
+        measureCache = sizes[size] = Object.create(null);
+      ctx.font = (size * kScalePrecision) + 'px "' + fontName + '"';
+    },
     charsToUnicode: function fonts_chars2Unicode(chars) {
-    var active = this._active;
-    if (!active)
+      if (!charsCache)
         return chars;
 
       // if we translated this string before, just grab it from the cache
-    var str = active.cache[chars];
+      var str = charsCache[chars];
       if (str)
         return str;
 
       // translate the string using the font's encoding
-    var encoding = active.properties.encoding;
+      var encoding = current.properties.encoding;
       if (!encoding)
         return chars;
 
@@ -80,19 +104,19 @@ var Fonts = {
       }
 
       // Enter the translated string into the cache
-    return active.cache[chars] = str;
+      return charsCache[chars] = str;
     },
-
-  get ctx() {
-    var ctx = document.createElement("canvas").getContext("2d");
-    ctx.scale(1 / kScalePrecision, 1);
-    return shadow(this, "ctx", ctx);
-  },
-
     measureText: function fonts_measureText(text) {
-    return this.ctx.measureText(text).width / kScalePrecision;
+      var width;
+      if (measureCache && (width = measureCache[text]))
+        return width;
+      width = ctx.measureText(text).width / kScalePrecision;
+      if (measureCache)
+        measureCache[text] = width;
+      return width;
     }
-};
+  }
+})();
 
 var FontLoader = {
   bind: function(fonts) {
@@ -101,8 +125,8 @@ var FontLoader = {
 
     for (var i = 0; i < fonts.length; i++) {
       var font = fonts[i];
-      if (Fonts[font.name]) {
-        ready = ready && !Fonts[font.name].loading;
+      if (Fonts.lookup(font.name)) {
+        ready = ready && !Fonts.lookup(font.name).loading;
         continue;
       }
 
@@ -111,7 +135,7 @@ var FontLoader = {
       var obj = new Font(font.name, font.file, font.properties);
 
       var str = "";
-      var data = Fonts[font.name].data;
+      var data = Fonts.lookup(font.name).data;
       var length = data.length;
       for (var j = 0; j < length; j++)
         str += String.fromCharCode(data[j]);
@@ -272,8 +296,8 @@ var Font = (function () {
     this.encoding = properties.encoding;
 
     // If the font has already been decoded simply return it
-    if (Fonts[name]) {
-      this.font = Fonts[name].data;
+    if (Fonts.lookup(name)) {
+      this.font = Fonts.lookup(name).data;
       return;
     }
     fontCount++;
@@ -282,12 +306,7 @@ var Font = (function () {
     // If the font is to be ignored, register it like an already loaded font
     // to avoid the cost of waiting for it be be loaded by the platform.
     if (properties.ignore || kDisableFonts) {
-      Fonts[name] = {
-        data: file,
-        loading: false,
-        properties: {},
-        cache: Object.create(null)
-      }
+      Fonts.blacklistFont(name);
       return;
     }
 
@@ -314,13 +333,7 @@ var Font = (function () {
         break;
     }
     this.data = data;
-
-    Fonts[name] = {
-      data: data,
-      properties: properties,
-      loading: true,
-      cache: Object.create(null)
-    };
+    Fonts.registerFont(name, data, properties);
   };
 
   function stringToArray(str) {
@@ -1027,7 +1040,7 @@ var Font = (function () {
         }
 
         window.clearInterval(interval);
-        Fonts[fontName].loading = false;
+        Fonts.lookup(fontName).loading = false;
         this.start = 0;
         if (callback) {
           callback();

multi_page_viewer.css

@@ -181,7 +181,7 @@ span {
   width: 200px;
   top: 62px;
   bottom: 18px;
-  left: -170px;
+  left: -140px;
   transition: left 0.25s ease-in-out 1s;
   -moz-transition: left 0.25s ease-in-out 1s;
   -webkit-transition: left 0.25s ease-in-out 1s;

multi_page_viewer.js

@@ -29,11 +29,15 @@ var PDFViewer = {
   scale: 1.0,
   
   pageWidth: function(page) {
-    return page.mediaBox[2] * PDFViewer.scale;
+    var pdfToCssUnitsCoef = 96.0 / 72.0;
+    var width = (page.mediaBox[2] - page.mediaBox[0]);
+    return width * PDFViewer.scale * pdfToCssUnitsCoef;
   },
   
   pageHeight: function(page) {
-    return page.mediaBox[3] * PDFViewer.scale;
+    var pdfToCssUnitsCoef = 96.0 / 72.0;
+    var height = (page.mediaBox[3] - page.mediaBox[1]);
+    return height * PDFViewer.scale * pdfToCssUnitsCoef;
   },
   
   lastPagesDrawn: [],
@@ -106,10 +110,11 @@ var PDFViewer = {
       canvas.id = 'thumbnail' + num;
       canvas.mozOpaque = true;
 
-      // Canvas dimensions must be specified in CSS pixels. CSS pixels
-      // are always 96 dpi. These dimensions are 8.5in x 11in at 96dpi.
-      canvas.width = 104;
-      canvas.height = 134;
+      var pageWidth = PDFViewer.pageWidth(page);
+      var pageHeight = PDFViewer.pageHeight(page);
+      var thumbScale = Math.min(104 / pageWidth, 134 / pageHeight);
+      canvas.width = pageWidth * thumbScale;
+      canvas.height = pageHeight * thumbScale;
       div.appendChild(canvas);
 
       var ctx = canvas.getContext('2d');
@@ -175,8 +180,6 @@ var PDFViewer = {
       canvas.id = 'page' + num;
       canvas.mozOpaque = true;
 
-      // Canvas dimensions must be specified in CSS pixels. CSS pixels
-      // are always 96 dpi. These dimensions are 8.5in x 11in at 96dpi.
       canvas.width = PDFViewer.pageWidth(page);
       canvas.height = PDFViewer.pageHeight(page);
       div.appendChild(canvas);
@@ -216,7 +219,6 @@ var PDFViewer = {
     
     if (PDFViewer.pdf) {
       for (i = 1; i <= PDFViewer.numberOfPages; i++) {
-        PDFViewer.createThumbnail(i);
         PDFViewer.createPage(i);
       }
     }
@@ -250,6 +252,9 @@ var PDFViewer = {
       PDFViewer.pageNumberInput.value = PDFViewer.pageNumber;
       PDFViewer.willJumpToPage = true;
 
+      if (document.location.hash.substr(1) == PDFViewer.pageNumber)
+        // Force a "scroll event" to redraw
+        setTimeout(window.onscroll, 0);
       document.location.hash = PDFViewer.pageNumber;
       
       PDFViewer.previousPageButton.className = (PDFViewer.pageNumber === 1) ? 'disabled' : '';
@@ -273,6 +278,12 @@ var PDFViewer = {
     PDFViewer.url = url;
     document.title = url;
 
+    if (this.thumbsLoadingInterval) {
+      // cancel thumbs loading operations
+      clearInterval(this.thumbsLoadingInterval);
+      this.thumbsLoadingInterval = null;
+    }
+    
     var req = new XMLHttpRequest();
     req.open('GET', url);
     req.mozResponseType = req.responseType = 'arraybuffer';
@@ -289,6 +300,8 @@ var PDFViewer = {
     req.send(null);
   },
 
+  thumbsLoadingInterval: null,
+
   readPDF: function(data) {
     while (PDFViewer.element.hasChildNodes()) {
       PDFViewer.element.removeChild(PDFViewer.element.firstChild);
@@ -310,12 +323,22 @@ var PDFViewer = {
       PDFViewer.drawPage(1);
       document.location.hash = 1;
       
-      setTimeout(function() {
-        for (var i = 1; i <= PDFViewer.numberOfPages; i++) {
-          PDFViewer.createThumbnail(i);
-          PDFViewer.drawThumbnail(i);
+      // slowly loading the thumbs (few per second)
+      // first time we are loading more images than subsequent
+      var currentPageIndex = 1, imagesToLoad = 15;
+      this.thumbsLoadingInterval = setInterval((function() {
+        while (imagesToLoad-- > 0) {
+          if (currentPageIndex > PDFViewer.numberOfPages) {
+            clearInterval(this.thumbsLoadingInterval);
+            this.thumbsLoadingInterval = null;
+            return;
+          }
+          PDFViewer.createThumbnail(currentPageIndex);
+          PDFViewer.drawThumbnail(currentPageIndex);
+          ++currentPageIndex;
         }
-      }, 500);
+        imagesToLoad = 3; // next time loading less images
+      }).bind(this), 500);
     }
     
     PDFViewer.previousPageButton.className = (PDFViewer.pageNumber === 1) ? 'disabled' : '';

pdf.js

@@ -3811,23 +3811,21 @@ var CanvasGraphics = (function() {
             if (fontDescriptor && fontDescriptor.num) {
                 var fontDescriptor = this.xref.fetchIfRef(fontDescriptor);
                 fontName = fontDescriptor.get("FontName").name.replace("+", "_");
-                Fonts.setActive(fontName, size);
             }
 
             if (!fontName) {
                 // TODO: fontDescriptor is not available, fallback to default font
-                this.current.fontSize = size;
-                this.ctx.font = this.current.fontSize + 'px sans-serif';
-                Fonts.setActive("sans-serif", this.current.fontSize);
-                return;
+                fontName = "sans-serif";
             }
 
             this.current.fontName = fontName;
             this.current.fontSize = size;
 
-            this.ctx.font = this.current.fontSize + 'px "' + fontName + '"';
             if (this.ctx.$setFont) {
-              this.ctx.$setFont(fontName);
+              this.ctx.$setFont(fontName, size);
+            } else {
+              this.ctx.font = size + 'px "' + fontName + '"';
+              Fonts.setActive(fontName, size);
             }
         },
         setTextRenderingMode: function(mode) {

test/test_slave.html

@@ -4,6 +4,7 @@
   <style type="text/css"></style>
   <script type="text/javascript" src="/pdf.js"></script>
   <script type="text/javascript" src="/fonts.js"></script>
+  <script type="text/javascript" src="/crypto.js"></script>
   <script type="text/javascript" src="/glyphlist.js"></script>
   <script type="application/javascript">
 var appPath, browser, canvas, currentTask, currentTaskIdx, failure, manifest, numPages, pdfDoc, stdout;
@@ -103,11 +104,12 @@ function nextPage() {
   }
 
   try {
+    var pdfToCssUnitsCoef = 96.0 / 72.0;
     // using mediaBox for the canvas size
-    var wTwips = (currentPage.mediaBox[2] - currentPage.mediaBox[0]);
-    var hTwips = (currentPage.mediaBox[3] - currentPage.mediaBox[1]);
-    canvas.width = wTwips * 96.0 / 72.0;
-    canvas.height = hTwips * 96.0 / 72.0;
+    var pageWidth = (currentPage.mediaBox[2] - currentPage.mediaBox[0]);
+    var pageHeight = (currentPage.mediaBox[3] - currentPage.mediaBox[1]);
+    canvas.width = pageWidth * pdfToCssUnitsCoef;
+    canvas.height = pageHeight * pdfToCssUnitsCoef;
     clear(ctx);
   } catch(e) {
     failure = 'page setup: '+ e.toString();

viewer.css

@@ -24,10 +24,11 @@ span#info {
 }
 
 #viewer {
+}
+
+#canvas {
     margin: auto;
-    border: 1px solid black;
-    width: 12.75in;
-    height: 16.5in;
+    display: block;
 }
 
 #pageNumber {

viewer.html

@@ -25,9 +25,7 @@
     </div>
 
     <div id="viewer">
-      <!-- Canvas dimensions must be specified in CSS pixels.  CSS pixels
-           are always 96 dpi.  816x1056 is 8.5x11in at 96dpi. -->
-      <canvas id="canvas" width="816" height="1056" defaultwidth="816" defaultheight="1056"></canvas>
+      <canvas id="canvas"></canvas>
     </div>
   </body>
 </html>

viewer.js

@@ -60,12 +60,12 @@ function displayPage(num) {
     var t0 = Date.now();
 
     var page = pdfDocument.getPage(pageNum = num);
-    canvas.width = parseInt(canvas.getAttribute("defaultwidth")) * pageScale;
-    canvas.height = parseInt(canvas.getAttribute("defaultheight")) * pageScale;
 
-    // scale canvas by 2
-    canvas.width = 2 * page.mediaBox[2];
-    canvas.hieght = 2 * page.mediaBox[3];
+    var pdfToCssUnitsCoef = 96.0 / 72.0;
+    var pageWidth = (page.mediaBox[2] - page.mediaBox[0]);
+    var pageHeight = (page.mediaBox[3] - page.mediaBox[1]);
+    canvas.width = pageScale * pageWidth * pdfToCssUnitsCoef;
+    canvas.height = pageScale * pageHeight * pdfToCssUnitsCoef;
 
     var t1 = Date.now();
     var ctx = canvas.getContext("2d");

viewer_worker.html

@@ -39,10 +39,7 @@ window.onload = function() {
     </div>
 
     <div id="viewer">
-      <!-- Canvas dimensions must be specified in CSS pixels.  CSS pixels
-           are always 96 dpi.  816x1056 is 8.5x11in at 96dpi. -->
-      <!-- We're rendering here at 1.5x scale. -->
-      <canvas id="canvas" width="1224" height="1584"></canvas>
+      <canvas id="canvas"></canvas>
     </div>
   </body>
 </html>

worker/client.js

@@ -251,8 +251,9 @@ function WorkerPDFDoc(canvas) {
       this.strokeStyle = pattern;
     },
 
-    "$setFont": function(name) {
-      Fonts.active = name;
+    "$setFont": function(name, size) {
+      this.font = size + 'px "' + name + '"';
+      Fonts.setActive(name, size);
     }
   }
 
@@ -305,6 +306,13 @@ function WorkerPDFDoc(canvas) {
       document.body.appendChild(div);
     },
     
+    "setup_page": function(data) {
+      var size = data.split(",");
+      var canvas = this.canvas, ctx = this.ctx;
+      canvas.width = parseInt(size[0]);
+      canvas.height = parseInt(size[1]);
+    },
+
     "fonts": function(data) {
       this.waitingForFonts = true;
       this.fontWorker.ensureFonts(data, function() {

worker/pdf.js

@@ -31,6 +31,7 @@ importScripts("console.js")
 importScripts("canvas.js");
 importScripts("../pdf.js");
 importScripts("../fonts.js");
+importScripts("../crypto.js");
 importScripts("../glyphlist.js")
 
 // Use the JpegStreamProxy proxy.
@@ -59,6 +60,18 @@ onmessage = function(event) {
     // Let's try to render the first page...
     var page = pdfDocument.getPage(parseInt(data));
 
+    var pdfToCssUnitsCoef = 96.0 / 72.0;
+    var pageWidth = (page.mediaBox[2] - page.mediaBox[0]) * pdfToCssUnitsCoef;
+    var pageHeight = (page.mediaBox[3] - page.mediaBox[1]) * pdfToCssUnitsCoef;
+    postMessage({
+      action: "setup_page",
+      data: pageWidth + "," + pageHeight
+    });
+
+    // Set canvas size.
+    canvas.width = pageWidth;
+    canvas.height = pageHeight;
+
     // page.compile will collect all fonts for us, once we have loaded them
     // we can trigger the actual page rendering with page.display
     var fonts = [];