Merge pull request #2469 from pearcetm/placeholder-for-webgl

Support placeholderFillStyle in WebGLDrawer, and other fixes

src/canvasdrawer.js

@@ -382,9 +382,9 @@ class CanvasDrawer extends OpenSeadragon.DrawerBase{
             }
             usedClip = true;
         }
-
+        tiledImage._hasOpaqueTile = false;
         if ( tiledImage.placeholderFillStyle && tiledImage._hasOpaqueTile === false ) {
-            var placeholderRect = this.viewportToDrawerRectangle(tiledImage.getBounds(true));
+            let placeholderRect = this.viewportToDrawerRectangle(tiledImage.getBoundsNoRotate(true));
             if (sketchScale) {
                 placeholderRect = placeholderRect.times(sketchScale);
             }
@@ -392,7 +392,7 @@ class CanvasDrawer extends OpenSeadragon.DrawerBase{
                 placeholderRect = placeholderRect.translate(sketchTranslate);
             }
 
-            var fillStyle = null;
+            let fillStyle = null;
             if ( typeof tiledImage.placeholderFillStyle === "function" ) {
                 fillStyle = tiledImage.placeholderFillStyle(tiledImage, this.context);
             }

src/spring.js

@@ -212,7 +212,7 @@ $.Spring.prototype = {
     update: function() {
         this.current.time  = $.now();
 
-        var startValue, targetValue;
+        let startValue, targetValue;
         if (this._exponential) {
             startValue = this.start._logValue;
             targetValue = this.target._logValue;
@@ -221,9 +221,10 @@ $.Spring.prototype = {
             targetValue = this.target.value;
         }
 
-        var currentValue = (this.current.time >= this.target.time) ?
+        if(this.current.time >= this.target.time){
-            targetValue :
+            this.current.value = this.target.value;
-            startValue +
+        } else {
+            let currentValue = startValue +
                     ( targetValue - startValue ) *
                     transform(
                         this.springStiffness,
@@ -236,8 +237,9 @@ $.Spring.prototype = {
             } else {
                 this.current.value = currentValue;
             }
+        }
 
-        return currentValue !== targetValue;
+        return this.current.value !== this.target.value;
     },
 
     /**

src/webgldrawer.js

@@ -239,6 +239,10 @@
 
                 let tilesToDraw = tiledImage.getTilesToDraw();
 
+                if ( tiledImage.placeholderFillStyle && tiledImage._hasOpaqueTile === false ) {
+                     this._drawPlaceholder(tiledImage);
+                }
+
                 if(tilesToDraw.length === 0 || tiledImage.getOpacity() === 0){
                     return;
                 }
@@ -1077,6 +1081,30 @@
             context.restore();
         }
 
+        _drawPlaceholder(tiledImage){
+
+            const bounds = tiledImage.getBounds(true);
+            const rect = this.viewportToDrawerRectangle(tiledImage.getBounds(true));
+            const context = this._outputContext;
+
+            let fillStyle;
+            if ( typeof tiledImage.placeholderFillStyle === "function" ) {
+                fillStyle = tiledImage.placeholderFillStyle(tiledImage, context);
+            }
+            else {
+                fillStyle = tiledImage.placeholderFillStyle;
+            }
+
+            this._offsetForRotation({degrees: this.viewer.viewport.getRotation(true)});
+            context.fillStyle = fillStyle;
+            context.translate(rect.x, rect.y);
+            context.rotate(Math.PI / 180 * bounds.degrees);
+            context.translate(-rect.x, -rect.y);
+            context.fillRect(rect.x, rect.y, rect.width, rect.height);
+            this._restoreRotationChanges();
+
+        }
+
         // private
         _restoreRotationChanges() {
             var context = this._outputContext;

test/demo/tilesource-swap.html

@@ -32,17 +32,18 @@
                 type: 'legacy-image-pyramid',
                 levels: [
                     {
-                        url: 'http://openseadragon.github.io/example-images/duomo/duomo_files/8/0_0.jpg',
+                        url: 'https://openseadragon.github.io/example-images/duomo/duomo_files/8/0_0.jpg',
                         width: 218,
                         height: 160
                     }
-                ]
+                ],
+                degrees: 30,
             };
 
             var duomo = {
                 Image: {
                     xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
-                    Url: 'http://openseadragon.github.io/example-images/duomo/duomo_files/',
+                    Url: 'https://openseadragon.github.io/example-images/duomo/duomo_files/',
                     Format: 'jpg',
                     Overlap: '2',
                     TileSize: '256',
@@ -59,11 +60,14 @@
                 tileSources: duomoStandin,
                 minZoomImageRatio: 0.1,
                 defaultZoomLevel: 0.1,
-                zoomPerClick: 1
+                zoomPerClick: 1,
+                crossOriginPolicy: 'Anonymous'
             });
 
+            let swapped = false;
             viewer.addHandler('canvas-click', function(event) {
-                if (event.quick) {
+                if (event.quick && !swapped) {
+                    swapped = true;
                     var standin = viewer.world.getItemAt(0);
                     var standinBounds = standin.getBounds();
                     viewer.viewport.fitBounds(standinBounds);
@@ -76,13 +80,10 @@
                         index: 0, // Add the new image below the stand-in.
                         success: function(event) {
                             var fullImage = event.item;
-
+                            // The changeover will look better if we wait for the first draw after the changeover.
-                            // The changeover will look better if we wait for the first tile to be drawn.
                             var tileDrawnHandler = function(event) {
-                                if (event.tiledImage === fullImage) {
                                     viewer.removeHandler('update-viewport', tileDrawnHandler);
                                     viewer.world.removeItem(standin);
-                                }
                             };
 
                             viewer.addHandler('update-viewport', tileDrawnHandler);