Merge branch 'master' into canvas-fallback

changelog.txt

@@ -5,7 +5,7 @@ OPENSEADRAGON CHANGELOG
 
 * BREAKING CHANGE: Dropped support for IE11 (#2300, #2361 @AndrewADev)
 * DEPRECATION: The OpenSeadragon.createCallback function is no longer recommended (#2367 @akansjain)
-* The viewer now uses WebGL when available (#2310, #2462, #2466 @pearcetm, @Aiosa)
+* The viewer now uses WebGL when available (#2310, #2462, #2466, #2468, #2469 @pearcetm, @Aiosa, @thec0keman)
 * Added webp to supported image formats (#2455 @BeebBenjamin)
 * Introduced maxTilesPerFrame option to allow loading more tiles simultaneously (#2387 @jetic83)
 * Now when creating a viewer or navigator, we leave its position style alone if possible (#2393 @VIRAT9358)
@@ -15,6 +15,8 @@ OPENSEADRAGON CHANGELOG
 * Fixed: Strange behavior if IIIF sizes were not in ascending order (#2416 @lutzhelm)
 * Fixed: Two-finger tap on a Mac trackpad would zoom you out (#2431 @cavenel)
 * Fixed: dragToPan gesture could not be disabled when flickEnabled was activated (#2464 @jonasengelmann)
+* Fixed: placeholderFillStyle didn't work properly when the image was rotated (#2469 @pearcetm)
+* Fixed: Sometimes exponential springs wouldn't ever settle (#2469 @pearcetm)
 
 4.1.0:
 

src/canvasdrawer.js

@@ -383,9 +383,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);
             }
@@ -393,7 +393,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,23 +221,25 @@ $.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 +
-                ( targetValue - startValue ) *
-                transform(
-                    this.springStiffness,
-                    ( this.current.time - this.start.time ) /
-                    ( this.target.time - this.start.time )
-                );
-
-        if (this._exponential) {
-            this.current.value = Math.exp(currentValue);
         } else {
-            this.current.value = currentValue;
+            let currentValue = startValue +
+                    ( targetValue - startValue ) *
+                    transform(
+                        this.springStiffness,
+                        ( this.current.time - this.start.time ) /
+                        ( this.target.time - this.start.time )
+                    );
+
+            if (this._exponential) {
+                this.current.value = Math.exp(currentValue);
+            } else {
+                this.current.value = currentValue;
+            }
         }
 
-        return currentValue !== targetValue;
+        return this.current.value !== this.target.value;
     },
 
     /**

src/tiledimage.js

@@ -1476,7 +1476,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
                     lowestLevel
                 );
                 _this._isBlending = _this._isBlending || tileIsBlending;
-                _this._needsDraw = _this._needsDraw || tileIsBlending || this._wasBlending;
+                _this._needsDraw = _this._needsDraw || tileIsBlending || _this._wasBlending;
             }
         }
 

src/webgldrawer.js

@@ -287,6 +287,10 @@
                 } else {
                     let tilesToDraw = tiledImage.getTilesToDraw();
 
+                    if ( tiledImage.placeholderFillStyle && tiledImage._hasOpaqueTile === false ) {
+                        this._drawPlaceholder(tiledImage);
+                    }
+
                     if(tilesToDraw.length === 0 || tiledImage.getOpacity() === 0){
                         return;
                     }
@@ -1157,6 +1161,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;

src/world.js

@@ -261,7 +261,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
     draw: function() {
         this.viewer.drawer.draw(this._items);
         this._needsDraw = false;
-        this._items.forEach(function(item){
+        this._items.forEach((item) => {
             this._needsDraw = item.setDrawn() || this._needsDraw;
         });
     },

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);