Throttle zoom, cleanup code.

Author: rtibbles

kolibri/plugins/document_pdf_render/assets/src/views/index.vue

@@ -42,8 +42,7 @@
         :defaultHeight="pageHeight"
         :defaultWidth="pageWidth"
         :scale="scale"
-        :pageNum="index + 1">
-      </page-component>
+        :pageNum="index + 1"/>
     </div>
   </div>
 
@@ -60,8 +59,8 @@
   import responsiveElement from 'kolibri.coreVue.mixins.responsiveElement';
   import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
   import { sessionTimeSpent } from 'kolibri.coreVue.vuex.getters';
-  import { debounce } from 'lodash';
-  import pageComponent from './pdfPage';
+  import { debounce, throttle } from 'lodash';
+  import pageComponent from './pageComponent';
 
   // Source from which PDFJS loads its service worker, this is based on the __publicPath
   // global that is defined in the Kolibri webpack pipeline, and the additional entry in the PDF renderer's
@@ -75,6 +74,8 @@
   // Minimum height of the PDF viewer in pixels
   const minViewerHeight = 400;
 
+  const scaleIncrement = 0.25;
+
   export default {
     name: 'documentPDFRender',
     mixins: [responsiveWindow, responsiveElement],
@@ -123,12 +124,12 @@
           this.isFullscreen = !this.isFullscreen;
         }
       },
-      zoomIn() {
-        this.scale += 0.1;
-      },
-      zoomOut() {
-        this.scale -= 0.1;
-      },
+      zoomIn: throttle(function() {
+        this.scale += scaleIncrement;
+      }, renderDebounceTime),
+      zoomOut: throttle(function() {
+        this.scale -= scaleIncrement;
+      }, renderDebounceTime),
       getPage(pageNum) {
         return this.pdfDocument.getPage(pageNum);
       },

kolibri/plugins/document_pdf_render/assets/src/views/pdfPage.vue renamed to kolibri/plugins/document_pdf_render/assets/src/views/pageComponent.vue

@@ -57,6 +57,13 @@
       },
     },
     methods: {
+      cancelRender() {
+        if (this.renderTask) {
+          this.renderTask.cancel();
+        }
+        delete this.renderTask;
+        this.rendered = false;
+      },
       clearPage() {
         const canvasContext = this.$refs.canvas.getContext('2d');
         // Clear canvas
@@ -67,19 +74,23 @@
         // Get viewport, which contains directions to be passed into render function
         return this.pdfPage.getViewport(this.scale);
       },
-      setPageDimensions(viewport) {
-        // Set height and width based on the viewport
-        this.height = viewport.height;
-        this.width = viewport.width;
+      setPageDimensions() {
+        // Set height and width based on the the pdfPage information and the scale
+        this.height = this.pdfPage.view[3] * this.scale;
+        this.width = this.pdfPage.view[2] * this.scale;
       },
-      renderPage() {
+      renderPage(newVal, oldVal) {
+        if (typeof newVal === 'number' && typeof oldVal === 'number' && newVal !== oldVal) {
+          // Change values are numeric, so we should assume it is a change in scale
+          this.cancelRender();
+        }
         if (this.pdfPage && this.active) {
           if (!this.renderTask && !this.rendered) {
             const canvasContext = this.$refs.canvas.getContext('2d');
 
             const viewport = this.getViewport();
 
-            this.setPageDimensions(viewport);
+            this.setPageDimensions();
 
             this.renderTask = this.pdfPage.render({
               canvasContext,
@@ -98,15 +109,12 @@
           }
         } else if (this.pdfPage && this.pdfPage.getViewport) {
           // We have a pdfPage, so use this opportunity to set the current page width and height
-          this.setPageDimensions(this.getViewport());
+          this.setPageDimensions();
         } else {
           // No pdfPage and not active, either we are not being asked to render a page yet, or it has been removed
           // so we should tear down any existing page
-          if (this.renderTask) {
-            this.renderTask.cancel();
-          } else {
-            this.clearPage();
-          }
+          this.cancelRender();
+          this.clearPage();
         }
       },
     },