From 4be56cdb524fed468f0acb36e1df147856ad265c Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <ant.vand@gmail.com>
Date: Thu, 20 Mar 2014 15:39:31 -0400
Subject: [PATCH] Overlays performance optimization. See #359

---
 src/overlay.js | 39 +++++++++++++++++++++++++--------------
 src/viewer.js  |  3 ++-
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/overlay.js b/src/overlay.js
index accb6ea4..c59d8c35 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -78,7 +78,11 @@
      * @param {OpenSeadragon.OverlayPlacement} [options.placement=OpenSeadragon.OverlayPlacement.TOP_LEFT]
      * Relative position to the viewport.
      * Only used if location is a {@link OpenSeadragon.Point}.
-     * @param {OpenSeadragon.Overlay.OnDrawCallback} options.onDraw
+     * @param {OpenSeadragon.Overlay.OnDrawCallback} [options.onDraw]
+     * @param {Boolean} [options.checkResize=true] Set to false to avoid to
+     * check the size of the overlay everytime it is drawn when using a
+     * {@link OpenSeadragon.Point} as options.location. It will improve
+     * performances but will cause a misalignment if the overlay size changes.
      */
     $.Overlay = function( element, location, placement ) {
 
@@ -125,6 +129,8 @@
             options.placement :
             $.OverlayPlacement.TOP_LEFT;
         this.onDraw = options.onDraw;
+        this.checkResize = options.checkResize === undefined ?
+            true : options.checkResize;
     };
 
     $.Overlay.prototype = /** @lends OpenSeadragon.Overlay.prototype */{
@@ -212,19 +218,12 @@
             var element = this.element,
                 style   = this.style,
                 scales  = this.scales,
-                drawerCenter = new $.Point(
-                    viewport.viewer.drawer.canvas.width / 2,
-                    viewport.viewer.drawer.canvas.height / 2
-                ),
                 degrees  = viewport.degrees,
                 position = viewport.pixelFromPoint(
                     this.bounds.getTopLeft(),
                     true
                 ),
-                size     = viewport.deltaPixelsFromPoints(
-                    this.bounds.getSize(),
-                    true
-                ),
+                size,
                 overlayCenter;
 
             if ( element.parentNode != container ) {
@@ -232,10 +231,18 @@
                 element.prevElementParent  = element.parentNode;
                 element.prevNextSibling    = element.nextSibling;
                 container.appendChild( element );
+                this.size = $.getElementSize( element );
             }
 
-            if ( !scales ) {
-                this.size = $.getElementSize( element );
+            if ( scales ) {
+                size = viewport.deltaPixelsFromPoints(
+                    this.bounds.getSize(),
+                    true
+                );
+            } else if ( this.checkResize ) {
+                size = $.getElementSize( element );
+            } else {
+                size = this.size;
             }
 
             this.position = position;
@@ -254,6 +261,10 @@
             if( degrees !== 0 && this.scales ) {
                 overlayCenter = new $.Point( size.x / 2, size.y / 2 );
 
+                var drawerCenter = new $.Point(
+                    viewport.viewer.drawer.canvas.width / 2,
+                    viewport.viewer.drawer.canvas.height / 2
+                );
                 position = position.plus( overlayCenter ).rotate(
                     degrees,
                     drawerCenter
@@ -263,10 +274,10 @@
                 size = new $.Point( Math.abs( size.x ), Math.abs( size.y ) );
             }
 
-            // call the onDraw callback if there is one to allow, this allows someone to overwrite
+            // call the onDraw callback if it exists to allow one to overwrite
             // the drawing/positioning/sizing of the overlay
-            if (this.onDraw) {
-                this.onDraw(position, size, element);
+            if ( this.onDraw ) {
+                this.onDraw( position, size, element );
             } else {
                 style.left     = position.x + "px";
                 style.top      = position.y + "px";
diff --git a/src/viewer.js b/src/viewer.js
index 157e6ef1..afd7881f 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -1811,7 +1811,8 @@ function getOverlayObject( viewer, overlay ) {
         element: element,
         location: location,
         placement: placement,
-        onDraw: overlay.onDraw
+        onDraw: overlay.onDraw,
+        checkResize: overlay.checkResize
     });
 }