Merge pull request #4981 from yurydelendik/svg1

Misc SVG Viewer example fixes

examples/svgviewer/viewer.js

@@ -7,10 +7,19 @@
 
 'use strict';
 
+// Parse query string to extract some parameters (it can fail for some input)
+var query = document.location.href.replace(/^[^?]*(\?([^#]*))?(#.*)?/, '$2');
+var queryParams = query ? JSON.parse('{' + query.split('&').map(function (a) {
+  return a.split('=').map(decodeURIComponent).map(JSON.stringify).join(': ');
+}).join(',') + '}') : {};
+
+var url = queryParams.file || '../../test/pdfs/liveprogramming.pdf';
+var scale = +queryParams.scale || 1.5;
+
 //
 // Fetch the PDF document from the URL using promises
 //
-PDFJS.getDocument('../../test/pdfs/liveprogramming.pdf').then(function(pdf) {
+PDFJS.getDocument(url).then(function(pdf) {
   var numPages = pdf.numPages;
   // Using promise to fetch the page
 
@@ -20,10 +29,14 @@ PDFJS.getDocument('../../test/pdfs/liveprogramming.pdf').then(function(pdf) {
   
   var promise = Promise.resolve();
   for (var i = 1; i <= ii; i++) {
-    // Using promise to fetch the page
-    promise = promise.then(function (pageNum) {
+    var anchor = document.createElement('a');
+    anchor.setAttribute('name', 'page=' + i);
+    anchor.setAttribute('title', 'Page ' + i);
+    document.body.appendChild(anchor);
+
+    // Using promise to fetch and render the next page
+    promise = promise.then(function (pageNum, anchor) {
       return pdf.getPage(pageNum).then(function (page) {
-        var scale = 1.5;
         var viewport = page.getViewport(scale);
 
         var container = document.createElement('div');
@@ -31,25 +44,23 @@ PDFJS.getDocument('../../test/pdfs/liveprogramming.pdf').then(function(pdf) {
         container.className = 'pageContainer';
         container.style.width = viewport.width + 'px';
         container.style.height = viewport.height + 'px';
-        document.body.appendChild(container);
+        anchor.appendChild(container);
 
         var renderContext = {
           viewport: viewport,
           pageNum: pageNum,
           container: container
         };
-        // run rendering only when all pages are loaded
-        promise.then(function () {
-          page.getOperatorList().then(function (opList) {
-            var svgGfx = new SVGGraphics(page.commonObjs);
-            svgGfx.loadDependencies(opList).then(function (values) {
-              svgGfx.beginDrawing(renderContext.viewport, renderContext.pageNum,
-                renderContext.container, opList);
-            });
+        // the next page fetch will start only after this page rendering is done
+        return page.getOperatorList().then(function (opList) {
+          var svgGfx = new SVGGraphics(page.commonObjs);
+          return svgGfx.loadDependencies(opList).then(function (values) {
+            return svgGfx.beginDrawing(renderContext.viewport,
+              renderContext.pageNum, renderContext.container, opList);
           });
         });
       });
-    }.bind(null, i));
+    }.bind(null, i, anchor));
   }
 });
 

src/display/svg.js

@@ -132,6 +132,12 @@ var SVGGraphics = (function SVGGraphicsClosure(ctx) {
     restore: function SVGGraphics_restore() {
       this.transformMatrix = this.transformStack.pop();
       this.current = this.extraStack.pop();
+
+      this.tgrp = document.createElementNS(NS, 'svg:g');
+      this.tgrp.setAttributeNS(null, 'id', 'transform');
+      this.tgrp.setAttributeNS(null, 'transform',
+          'matrix(' + this.transformMatrix + ')');
+      this.pgrp.appendChild(this.tgrp);
     },
 
     group: function SVGGraphics_group(items) {
@@ -669,7 +675,6 @@ var SVGGraphics = (function SVGGraphicsClosure(ctx) {
     },
 
     rectangle: function SVGGraphics_rectangle(x, y, width, height) {
-      this.save();
       var current = this.current;
       if (width < 0) {
         x = x + width;