diff --git a/changelog.txt b/changelog.txt index 866f0394..517a02ea 100644 --- a/changelog.txt +++ b/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: diff --git a/src/canvasdrawer.js b/src/canvasdrawer.js index b848c3ef..f6f37708 100644 --- a/src/canvasdrawer.js +++ b/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); } diff --git a/src/spring.js b/src/spring.js index f65f076e..77162188 100644 --- a/src/spring.js +++ b/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) ? - targetValue : - 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); + if(this.current.time >= this.target.time){ + this.current.value = this.target.value; } 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; }, /** diff --git a/src/tiledimage.js b/src/tiledimage.js index 84b852d9..65a83d76 100644 --- a/src/tiledimage.js +++ b/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; } } diff --git a/src/webgldrawer.js b/src/webgldrawer.js index af3ff198..e7a23fc9 100644 --- a/src/webgldrawer.js +++ b/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; diff --git a/src/world.js b/src/world.js index 5539d2bc..6049bb06 100644 --- a/src/world.js +++ b/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; }); }, diff --git a/test/demo/tilesource-swap.html b/test/demo/tilesource-swap.html index 5b1f6dee..d8da3dfb 100644 --- a/test/demo/tilesource-swap.html +++ b/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 tile to be drawn. + // The changeover will look better if we wait for the first draw after the changeover. var tileDrawnHandler = function(event) { - if (event.tiledImage === fullImage) { viewer.removeHandler('update-viewport', tileDrawnHandler); viewer.world.removeItem(standin); - } }; viewer.addHandler('update-viewport', tileDrawnHandler);