* Overlays appear in the DOM immediately on open or addOverlay (#507)

changelog.txt

@@ -37,6 +37,7 @@ OPENSEADRAGON CHANGELOG
     * Viewport.open supports positioning config properties
 * Margins option to push the home region in from the edges of the Viewer (#505)
 * Rect and Point toString() functions are now consistent: rounding values to nearest hundredth
+* Overlays appear in the DOM immediately on open or addOverlay (#507)
 
 1.2.0: (in progress)
 

src/viewer.js

@@ -622,6 +622,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                         _this.currentOverlays[ i ] = getOverlayObject( _this, _this.overlays[ i ] );
                     }
 
+                    _this._drawOverlays();
+
                     /**
                      * Raised when the viewer has opened and loaded one or more TileSources.
                      *
@@ -1776,8 +1778,11 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             // they're trying to add a duplicate overlay
             return this;
         }
-        this.currentOverlays.push( getOverlayObject( this, options ) );
+
-        THIS[ this.hash ].forceRedraw = true;
+        var overlay = getOverlayObject( this, options);
+        this.currentOverlays.push(overlay);
+        overlay.drawHTML( this.overlaysContainer, this.viewport );
+
         /**
          * Raised when an overlay is added to the viewer (see {@link OpenSeadragon.Viewer#addOverlay}).
          *
@@ -1984,8 +1989,16 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             default:
                 return this.gestureSettingsUnknown;
         }
-    }
+    },
 
+    // private
+    _drawOverlays: function() {
+        var i,
+            length = this.currentOverlays.length;
+        for ( i = 0; i < length; i++ ) {
+            this.currentOverlays[ i ].drawHTML( this.overlaysContainer, this.viewport );
+        }
+    }
 });
 
 
@@ -2143,14 +2156,6 @@ function getOverlayIndex( overlays, element ) {
     return -1;
 }
 
-function drawOverlays( viewport, overlays, container ) {
-    var i,
-        length = overlays.length;
-    for ( i = 0; i < length; i++ ) {
-        overlays[ i ].drawHTML( container, viewport );
-    }
-}
-
 ///////////////////////////////////////////////////////////////////////////////
 // Schedulers provide the general engine for animation
 ///////////////////////////////////////////////////////////////////////////////
@@ -2674,7 +2679,7 @@ function updateOnce( viewer ) {
 
     if ( animated || THIS[ viewer.hash ].forceRedraw || viewer.world.needsUpdate() ) {
         updateWorld( viewer );
-        drawOverlays( viewer.viewport, viewer.currentOverlays, viewer.overlaysContainer );
+        viewer._drawOverlays();
         if( viewer.navigator ){
             viewer.navigator.update( viewer.viewport );
         }

test/demo/collections/main.js

@@ -92,14 +92,6 @@
 
             if (testInitialOpen) {
                 this.viewer.addHandler( "open", function() {
-                    // setTimeout(function() {
-                    //     // console.log(self.viewer.viewport.contentSize);
-                    //     var $el = $('#overlay1').click(function() {
-                    //         console.log('foo');
-                    //     });
-
-                    //     console.log($el.length, $el.css('background'));
-                    // }, 1000);
                 });
             }
 

test/modules/overlays.js

@@ -1,4 +1,4 @@
-/* global QUnit, module, Util, $, console, test, asyncTest, start, ok, equal */
+/* global QUnit, module, Util, $, console, test, asyncTest, start, ok, equal, testLog */
 
 ( function() {
     var viewer;
@@ -532,4 +532,35 @@
 
     } );
 
+    // ----------
+    asyncTest('overlays appear immediately', function() {
+        equal($('#immediate-overlay0').length, 0, 'overlay 0 does not exist');
+        equal($('#immediate-overlay1').length, 0, 'overlay 1 does not exist');
+
+        viewer = OpenSeadragon( {
+            id: 'example-overlays',
+            prefixUrl: '/build/openseadragon/images/',
+            tileSources: '/test/data/testpattern.dzi',
+            springStiffness: 100, // Faster animation = faster tests
+            overlays: [ {
+                    x: 0,
+                    y: 0,
+                    id: "immediate-overlay0"
+                } ]
+        } );
+
+        viewer.addHandler('open', function() {
+            equal($('#immediate-overlay0').length, 1, 'overlay 0 exists');
+
+            viewer.addOverlay( {
+                x: 0,
+                y: 0,
+                id: "immediate-overlay1"
+            } );
+
+            equal($('#immediate-overlay1').length, 1, 'overlay 1 exists');
+            start();
+        });
+    });
+
 } )( );