Performance fix for sluggish Pan & Zoom

openseadragon-fabricjs-overlay.js

@@ -1,6 +1,6 @@
 /**
  * OpenSeadragon canvas Overlay plugin based on svg overlay plugin and fabric.js
- * @version 0.0.2
+ * @version 0.6.0
  */
 (function () {
 
@@ -109,26 +109,20 @@
         });
 
         /**
-         * Update viewport
+         * Update Pan & Zoom accordingly on viewport-change
          */
-        this._viewer.addHandler('update-viewport', function () {
-            self.resize();
-            self.resizeCanvas();
-            self.render();
-
-        });
+        this._viewer.addHandler('viewport-change', self.OnViewportChange.bind(self));
 
         /**
          * Resize the fabric.js overlay when the viewer or window changes size
          */
-        this._viewer.addHandler('open', function () {
-            self.resize();
-            self.resizeCanvas();
-        });
-        window.addEventListener('resize', function () {
+        let doResizeAll = function (){
             self.resize();
             self.resizeCanvas();
-        });
+        };
+        this._viewer.addHandler('open', doResizeAll);
+        this._viewer.addHandler('resize', doResizeAll);
+        window.addEventListener('resize', doResizeAll);
 
     };
 
@@ -189,6 +183,21 @@
 
             this._fabricCanvas.absolutePan(new fabric.Point(canvasOffset.left - x + pageScroll.x, canvasOffset.top - y + pageScroll.y));
 
+        },
+        OnViewportChange: function(e) {
+            // Update view bounds this way to avoid reszing the canvas, since it's expensive to constantly resize the canvas...
+            // Currently no support for rotation since fabric does not support viewport rotation...
+
+            // get Zoom
+            let cSize = this._viewer.viewport._containerInnerSize;
+            let zoom = cSize.x * this._viewer.viewport.getZoom(true) / this._scale;
+
+            // get X,Y position
+            let b = this._viewer.viewport.getBounds(true);
+            let wPt = this._viewer.viewport.pixelFromPoint(new OpenSeadragon.Point(b), true);
+
+            // update the canvas viewport
+            this._fabricCanvas.setViewportTransform([zoom, 0, 0, zoom, wPt.x, wPt.y]);
         }
 
     };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openseadragon-fabricjs-overlay",
-  "version": "0.2.0",
+  "version": "0.6.0",
   "description": "An OpenSeadragon plugin that adds fabricjs canvas overlay capability.",
   "main": "openseadragon-fabricjs-overlay.js",
   "dependencies": {