diff Applications/StoneWebViewer/WebApplication/pdf-viewer.js @ 1657:66e5fcdf5597

pdf viewer is working
author Sebastien Jodogne <s.jodogne@gmail.com>
date Wed, 18 Nov 2020 11:19:09 +0100
parents fa9e6bf84958
children e4589378ad8b
line wrap: on
line diff
--- a/Applications/StoneWebViewer/WebApplication/pdf-viewer.js	Tue Nov 17 11:18:53 2020 +0100
+++ b/Applications/StoneWebViewer/WebApplication/pdf-viewer.js	Wed Nov 18 11:19:09 2020 +0100
@@ -20,6 +20,30 @@
 
 
 
+/**
+ * This source file is an adaptation for Vue.js of the sample code
+ * "Previous/Next example" of PDF.js:
+ * https://mozilla.github.io/pdf.js/examples/
+ *
+ * =======================================================================
+ *
+ * Original license of the sample code:
+ *
+ * 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.
+ **/
+
 
 // Loaded via <script> tag, create shortcut to access PDF.js exports.
 var pdfjsLib = window['pdfjs-dist/build/pdf'];
@@ -30,16 +54,17 @@
 
 
 var ZOOM_FACTOR = 1.3;
-var FIT_MARGIN = 10;
+var FIT_MARGIN = 10;    // Additional margin for width/height fitting, in order to avoid spurious scrollbars
 
 Vue.component('pdf-viewer', {
-  props: [ 'prefix', 'pdf' ],  // "pdf" must correspond to a "Uint8Array"
+  props: [ 'prefix' ],
   template: '#pdf-viewer',
   data: function() {
     return {
       container: null,
       canvas: null,
       ctx: null,
+      pdf: null, // "pdf" must correspond to a "Uint8Array"
       
       scale: 1,
       countPages: 0,
@@ -49,11 +74,6 @@
       pageNumPending: null
     }
   },
-  watch: {
-    pdf: function(newVal, oldVal) {
-      this.LoadPdf();
-    }
-  },
   mounted: function() {
     this.container = document.getElementById(this.prefix + '-container');
     this.canvas = document.getElementById(this.prefix + '-canvas');
@@ -106,7 +126,6 @@
           // https://github.com/mozilla/pdf.js/issues/5628
           var scrollbarHeight = window.innerHeight - document.body.clientHeight + FIT_MARGIN;
           that.scale = (that.container.offsetHeight - scrollbarHeight) / page.getViewport({ scale: 1.0 }).height;
-          //that.scale = that.container.clientHeight / page.getViewport({ scale: 1.0 }).height;
           that.QueueRenderPage(that.currentPage);
         });
       }
@@ -120,18 +139,24 @@
       this.QueueRenderPage(this.currentPage);  
     },
     LoadPdf: function(pdf) {
-      var that = this;
-      pdfjsLib.getDocument(new Uint8Array(this.pdf)).promise.then(function(pdfDoc_) {
-        that.pdfDoc = pdfDoc_;
-        that.currentPage = 0;
-        that.countPages = pdfDoc_.numPages;
-        that.scale = 1;
-        that.isRendering = false;
-        that.pageNumPending = null;
-        
-        // Initial/first page rendering
-        that.RenderPage(1);
-      });
+      if (!this.isRendering &&
+          pdf.length > 0) {
+        this.pdf = pdf;
+        this.isRendering = true;
+
+        var that = this;
+        pdfjsLib.getDocument(this.pdf).promise.then(function(pdfDoc_) {
+          that.pdfDoc = pdfDoc_;
+          that.currentPage = 1;
+          that.countPages = pdfDoc_.numPages;
+          that.scale = 1;
+          that.isRendering = false;
+          that.pageNumPending = null;
+          
+          // Initial/first page rendering, after fitting the PDF to the available viewport
+          that.FitHeight();
+        });
+      }
     },
     RenderPage: function(pageNum) {
       var that = this;
@@ -187,11 +212,25 @@
       if (event.ctrlKey) {
         if (event.deltaY < 0) {
           this.ZoomIn();
+          event.preventDefault();
         } else if (event.deltaY > 0) {
           this.ZoomOut();
+          event.preventDefault();
         }
-        
-        event.preventDefault();
+      } else if (!event.shiftKey &&
+                 !event.altKey &&
+                 !event.metaKey) {
+        // Is the vertical scrollbar hidden?
+        // https://stackoverflow.com/a/4814526/881731
+        if (this.container.scrollHeight <= this.container.clientHeight) {
+          if (event.deltaY < 0) {
+            this.PreviousPage();
+            event.preventDefault();
+          } else if (event.deltaY > 0) {
+            this.NextPage();
+            event.preventDefault();
+          }
+        }
       }
     }
   }