From f9fea572a593f75016fcb313da3daf67dfded0b6 Mon Sep 17 00:00:00 2001 From: gunmiosb Date: Wed, 29 Jul 2020 11:02:25 +0200 Subject: [PATCH 01/27] Removed unnecessary (style.display !== 'none') check Fixes issues 774 and 1861 --- src/overlay.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/overlay.js b/src/overlay.js index af22fa37..9fd1532c 100644 --- a/src/overlay.js +++ b/src/overlay.js @@ -288,10 +288,7 @@ style[transformProp] = ""; } } - - if (style.display !== 'none') { - style.display = 'block'; - } + style.display = 'block'; } }, From 39811d9300d9dc91a66d4b2b8645fd1cd315c2e0 Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Thu, 4 Feb 2021 12:24:01 +0100 Subject: [PATCH 02/27] fix: draw the level based on pixel density ratio --- src/tiledimage.js | 4 ++-- src/viewer.js | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index 74ffacef..ccc51601 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1018,7 +1018,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag ); var currentZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( this.source.getPixelRatio(0), true).x * - this._scaleSpring.current.value; + this._scaleSpring.current.value * $.pixelDensityRatio; var highestLevel = Math.min( Math.abs(this.source.maxLevel), Math.abs(Math.floor( @@ -1082,7 +1082,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag var currentRenderPixelRatio = viewport.deltaPixelsFromPointsNoRotate( this.source.getPixelRatio(level), true - ).x * this._scaleSpring.current.value; + ).x * this._scaleSpring.current.value * $.pixelDensityRatio; if (level === lowestLevel || (!haveDrawn && currentRenderPixelRatio >= this.minPixelRatio)) { diff --git a/src/viewer.js b/src/viewer.js index b5b24318..ff958e06 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -401,6 +401,13 @@ $.Viewer = function( options ) { debugGridColor: this.debugGridColor }); + function resize() { + console.log("Windows is resized..."); + _this.world.resetItems(); + _this.forceRedraw(); + } + $.addEvent( window, 'resize', resize ); + // Overlay container this.overlaysContainer = $.makeNeutralElement( "div" ); this.canvas.appendChild( this.overlaysContainer ); From c410b82e65ede9a733927b7c387069010182cebe Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Thu, 4 Feb 2021 13:39:26 +0100 Subject: [PATCH 03/27] fix: refresh $.pixelDensityRatio --- src/viewer.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/viewer.js b/src/viewer.js index ff958e06..03b018bc 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -403,6 +403,21 @@ $.Viewer = function( options ) { function resize() { console.log("Windows is resized..."); + $.pixelDensityRatio = (function () { + if ( $.supportsCanvas ) { + var context = document.createElement('canvas').getContext('2d'); + var devicePixelRatio = window.devicePixelRatio || 1; + var backingStoreRatio = context.webkitBackingStorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; + return Math.max(devicePixelRatio, 1) / backingStoreRatio; + } else { + return 1; + } + }()); + console.log("$.pixelDensityRatio", $.pixelDensityRatio); _this.world.resetItems(); _this.forceRedraw(); } From eb113662e86465f08b10bf2dbb37b5cd1cd7ed4f Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 5 Feb 2021 11:48:08 +0100 Subject: [PATCH 04/27] refactor: cleanup code --- src/openseadragon.js | 17 +++++++++++------ src/viewer.js | 40 ++++++++++++++++++---------------------- 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index f035c436..71fca779 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -918,12 +918,11 @@ function OpenSeadragon( options ){ }; /** - * A ratio comparing the device screen's pixel density to the canvas's backing store pixel density, - * clamped to a minimum of 1. Defaults to 1 if canvas isn't supported by the browser. - * @member {Number} pixelDensityRatio - * @memberof OpenSeadragon + * @returns {Number} Return a ratio comparing the device screen's pixel + * densityto the canvas's backing store pixel density, clamped to a + * minimum of 1. Defaults to 1 if canvas isn't supported by the browser. */ - $.pixelDensityRatio = (function () { + $.getCurrentPixelDensityRatio = function() { if ( $.supportsCanvas ) { var context = document.createElement('canvas').getContext('2d'); var devicePixelRatio = window.devicePixelRatio || 1; @@ -936,7 +935,13 @@ function OpenSeadragon( options ){ } else { return 1; } - }()); + }; + + /** + * @member {Number} pixelDensityRatio + * @memberof OpenSeadragon + */ + $.pixelDensityRatio = $.getCurrentPixelDensityRatio(); }( OpenSeadragon )); diff --git a/src/viewer.js b/src/viewer.js index 03b018bc..aba013d5 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -401,28 +401,6 @@ $.Viewer = function( options ) { debugGridColor: this.debugGridColor }); - function resize() { - console.log("Windows is resized..."); - $.pixelDensityRatio = (function () { - if ( $.supportsCanvas ) { - var context = document.createElement('canvas').getContext('2d'); - var devicePixelRatio = window.devicePixelRatio || 1; - var backingStoreRatio = context.webkitBackingStorePixelRatio || - context.mozBackingStorePixelRatio || - context.msBackingStorePixelRatio || - context.oBackingStorePixelRatio || - context.backingStorePixelRatio || 1; - return Math.max(devicePixelRatio, 1) / backingStoreRatio; - } else { - return 1; - } - }()); - console.log("$.pixelDensityRatio", $.pixelDensityRatio); - _this.world.resetItems(); - _this.forceRedraw(); - } - $.addEvent( window, 'resize', resize ); - // Overlay container this.overlaysContainer = $.makeNeutralElement( "div" ); this.canvas.appendChild( this.overlaysContainer ); @@ -442,6 +420,9 @@ $.Viewer = function( options ) { } } + // Add updatePixelDensityRatio to resize event + $.addEvent( window, 'resize', this.updatePixelDensityRatio.bind(this) ); + //Instantiate a navigator if configured if ( this.showNavigator){ this.navigator = new $.Navigator({ @@ -1620,6 +1601,21 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return this.world.removeItem(drawer); }, + + /** + * Update pixel density ration, clears all tiles and triggers updates for + * all items. + */ + updatePixelDensityRatio: function() { + var previusPixelDensityRatio = $.pixelDensityRatio; + var currentPixelDensityRatio = $.getCurrentPixelDensityRatio(); + if (previusPixelDensityRatio !== currentPixelDensityRatio) { + $.pixelDensityRatio = currentPixelDensityRatio; + this.world.resetItems(); + this.forceRedraw(); + } + }, + /** * Force the viewer to redraw its contents. * @returns {OpenSeadragon.Viewer} Chainable. From e7497272facc0c37bd3c73a9549399054d55182b Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 5 Feb 2021 12:32:13 +0100 Subject: [PATCH 05/27] fix: comment --- src/openseadragon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 71fca779..1a6eaa7a 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -919,7 +919,7 @@ function OpenSeadragon( options ){ /** * @returns {Number} Return a ratio comparing the device screen's pixel - * densityto the canvas's backing store pixel density, clamped to a + * density to the canvas's backing store pixel density, clamped to a * minimum of 1. Defaults to 1 if canvas isn't supported by the browser. */ $.getCurrentPixelDensityRatio = function() { From 4a51a4e47cf540a0b8124fcf9e1b73f56042c3bd Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 5 Feb 2021 12:39:10 +0100 Subject: [PATCH 06/27] refactor: removed empty line --- src/viewer.js | 1 - test/demo/iiif-tiled-sf1.html | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index aba013d5..397b4257 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1601,7 +1601,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return this.world.removeItem(drawer); }, - /** * Update pixel density ration, clears all tiles and triggers updates for * all items. diff --git a/test/demo/iiif-tiled-sf1.html b/test/demo/iiif-tiled-sf1.html index d1931e44..b73a05cc 100644 --- a/test/demo/iiif-tiled-sf1.html +++ b/test/demo/iiif-tiled-sf1.html @@ -25,7 +25,7 @@ // debugMode: true, id: "contentDiv", prefixUrl: "../../build/openseadragon/images/", - tileSources: "../data/iiif_2_0_tiled_sf1/info.json", + tileSources: "https://www.nb.no/services/image/resolver/URN:NBN:no-nb_digibok_2017060708028_0010/info.json", showNavigator: true }); From 38435faade95fa2301873380f575e11560b4844f Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 5 Feb 2021 12:39:58 +0100 Subject: [PATCH 07/27] revert: url --- test/demo/iiif-tiled-sf1.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/demo/iiif-tiled-sf1.html b/test/demo/iiif-tiled-sf1.html index b73a05cc..d1931e44 100644 --- a/test/demo/iiif-tiled-sf1.html +++ b/test/demo/iiif-tiled-sf1.html @@ -25,7 +25,7 @@ // debugMode: true, id: "contentDiv", prefixUrl: "../../build/openseadragon/images/", - tileSources: "https://www.nb.no/services/image/resolver/URN:NBN:no-nb_digibok_2017060708028_0010/info.json", + tileSources: "../data/iiif_2_0_tiled_sf1/info.json", showNavigator: true }); From 4b13cf32fd19a417054492a867c4e20270c300f5 Mon Sep 17 00:00:00 2001 From: Alistair Buxton Date: Fri, 30 Oct 2020 23:27:26 +0000 Subject: [PATCH 08/27] Introduce getTileBounds method for tiledImage This wraps the implementation in tileSource but provides support for wrapping. It does not support getting the source bounds. Using this function instead of the tileSource version allows the viewport clipping optimization to work with wrapping. --- src/tiledimage.js | 33 +++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index 74ffacef..b89a0d8e 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -392,6 +392,23 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag return bounds.rotate(this.getRotation(current), this._getRotationPoint(current)); }, + /** + * @function + * @param {Number} level + * @param {Number} x + * @param {Number} y + * @returns {OpenSeadragon.Rect} Where this tile fits (in normalized coordinates). + */ + getTileBounds: function( level, x, y ) { + var numTiles = this.source.getNumTiles(level); + var xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; + var yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; + var bounds = this.source.getTileBounds(level, xMod, yMod); + bounds.x += (x - xMod) / numTiles.x; + bounds.y += (this._worldHeightCurrent / this._worldWidthCurrent) * ((y - yMod) / numTiles.y); + return bounds; + }, + /** * @returns {OpenSeadragon.Point} This TiledImage's content size, in original pixels. */ @@ -1258,14 +1275,9 @@ function updateLevel(tiledImage, haveDrawn, drawLevel, level, levelOpacity, for (var x = topLeftTile.x; x <= bottomRightTile.x; x++) { for (var y = topLeftTile.y; y <= bottomRightTile.y; y++) { - // Optimisation disabled with wrapping because getTileBounds does not - // work correctly with x and y outside of the number of tiles - if (!tiledImage.wrapHorizontal && !tiledImage.wrapVertical) { - var tileBounds = tiledImage.source.getTileBounds(level, x, y); - if (drawArea.intersection(tileBounds) === null) { - // This tile is outside of the viewport, no need to draw it - continue; - } + if (drawArea.intersection(tiledImage.getTileBounds(level, x, y)) === null) { + // This tile is outside of the viewport, no need to draw it + continue; } best = updateTile( @@ -1450,7 +1462,7 @@ function getTile( if ( !tilesMatrix[ level ][ x ][ y ] ) { xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; - bounds = tileSource.getTileBounds( level, xMod, yMod ); + bounds = tiledImage.getTileBounds( level, x, y ); sourceBounds = tileSource.getTileBounds( level, xMod, yMod, true ); exists = tileSource.tileExists( level, xMod, yMod ); url = tileSource.getTileUrl( level, xMod, yMod ); @@ -1469,9 +1481,6 @@ function getTile( context2D = tileSource.getContext2D ? tileSource.getContext2D(level, xMod, yMod) : undefined; - bounds.x += ( x - xMod ) / numTiles.x; - bounds.y += (worldHeight / worldWidth) * (( y - yMod ) / numTiles.y); - tile = new $.Tile( level, x, From afa8c2d1bdced1c5ec2fdef5c92822f3b76b2314 Mon Sep 17 00:00:00 2001 From: Alistair Buxton Date: Thu, 29 Oct 2020 20:02:35 +0000 Subject: [PATCH 09/27] Store the flipped state in each tile and render it as such This will flip each individual tile on a per image bases. However the tiles are now drawn in the wrong locations. Clipping etc works. this is implemented for Canvas and HTML renderers. --- src/tile.js | 16 +++++++++++++++- src/tiledimage.js | 8 ++++++++ src/viewer.js | 2 ++ 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/tile.js b/src/tile.js index 1ea7c5d9..701db750 100644 --- a/src/tile.js +++ b/src/tile.js @@ -176,6 +176,12 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja * @memberof OpenSeadragon.Tile# */ this.size = null; + /** + * Whether to flip the tile when rendering. + * @member {Boolean} flipped + * @memberof OpenSeadragon.Tile# + */ + this.flipped = false; /** * The start time of this tile's blending. * @member {Number} blendStart @@ -296,6 +302,10 @@ $.Tile.prototype = { this.style.height = this.size.y + "px"; this.style.width = this.size.x + "px"; + if (this.flipped) { + this.style.transform = "scaleX(-1)"; + } + $.setElementOpacity( this.element, this.opacity ); }, @@ -376,13 +386,17 @@ $.Tile.prototype = { sourceHeight = rendered.canvas.height; } + context.translate(position.x + size.x / 2, 0); + if (this.flipped) { + context.scale(-1, 1); + } context.drawImage( rendered.canvas, 0, 0, sourceWidth, sourceHeight, - position.x, + -size.x / 2, position.y, size.x, size.y diff --git a/src/tiledimage.js b/src/tiledimage.js index b89a0d8e..2b9efd26 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -849,6 +849,13 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag this.raiseEvent('clip-change'); }, + /** + * @returns {Boolean} Whether the TiledImage should be flipped before rendering. + */ + getFlip: function() { + return !!this.flipped; + }, + /** * @returns {Number} The TiledImage's current opacity. */ @@ -1701,6 +1708,7 @@ function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility, tile.size = sizeC; tile.squaredDistance = tileSquaredDistance; tile.visibility = levelVisibility; + tile.flipped = tiledImage.getFlip(); } /** diff --git a/src/viewer.js b/src/viewer.js index 29b2054a..9592abf9 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1301,6 +1301,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * @param {Boolean} [options.preload=false] Default switch for loading hidden images (true loads, false blocks) * @param {Number} [options.degrees=0] Initial rotation of the tiled image around * its top left corner in degrees. + * @param {Boolean} [options.flipped=false] Whether to horizontally flip the image. * @param {String} [options.compositeOperation] How the image is composited onto other images. * @param {String} [options.crossOriginPolicy] The crossOriginPolicy for this specific image, * overriding viewer.crossOriginPolicy. @@ -1463,6 +1464,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, opacity: queueItem.options.opacity, preload: queueItem.options.preload, degrees: queueItem.options.degrees, + flipped: queueItem.options.flipped, compositeOperation: queueItem.options.compositeOperation, springStiffness: _this.springStiffness, animationTime: _this.animationTime, From 3c57063632dd56606ce4872170bf739533719bd5 Mon Sep 17 00:00:00 2001 From: Alistair Buxton Date: Sat, 31 Oct 2020 00:23:41 +0000 Subject: [PATCH 10/27] Render the flipped columns in reverse order This completes the per-image flip implementation. Tile bounds are re-positioned within the image. When rendering, the x ordinals are remapped to the flipped ones. To use, set "flipped" on the image instead of the viewer. The code is compatible with rotations and wrapping. Implements #1553 --- src/tiledimage.js | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index 2b9efd26..1e55b914 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -404,6 +404,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag var xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; var yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; var bounds = this.source.getTileBounds(level, xMod, yMod); + if (this.getFlip()) { + bounds.x = 1 - bounds.x - bounds.width; + } bounds.x += (x - xMod) / numTiles.x; bounds.y += (this._worldHeightCurrent / this._worldWidthCurrent) * ((y - yMod) / numTiles.y); return bounds; @@ -1279,10 +1282,32 @@ function updateLevel(tiledImage, haveDrawn, drawLevel, level, levelOpacity, var viewportCenter = tiledImage.viewport.pixelFromPoint( tiledImage.viewport.getCenter()); + + if (tiledImage.getFlip()) { + // The right-most tile can be narrower than the others. When flipped, + // this tile is now on the left. Because it is narrower than the normal + // left-most tile, the subsequent tiles may not be wide enough to completely + // fill the viewport. Fix this by rendering an extra column of tiles. If we + // are not wrapping, make sure we never render more than the number of tiles + // in the image. + bottomRightTile.x += 1; + if (!tiledImage.wrapHorizontal) { + bottomRightTile.x = Math.min(bottomRightTile.x, numberOfTiles.x - 1); + } + } + for (var x = topLeftTile.x; x <= bottomRightTile.x; x++) { for (var y = topLeftTile.y; y <= bottomRightTile.y; y++) { - if (drawArea.intersection(tiledImage.getTileBounds(level, x, y)) === null) { + var flippedX; + if (tiledImage.getFlip()) { + var xMod = ( numberOfTiles.x + ( x % numberOfTiles.x ) ) % numberOfTiles.x; + flippedX = x + numberOfTiles.x - xMod - xMod - 1; + } else { + flippedX = x; + } + + if (drawArea.intersection(tiledImage.getTileBounds(level, flippedX, y)) === null) { // This tile is outside of the viewport, no need to draw it continue; } @@ -1291,7 +1316,7 @@ function updateLevel(tiledImage, haveDrawn, drawLevel, level, levelOpacity, tiledImage, drawLevel, haveDrawn, - x, y, + flippedX, y, level, levelOpacity, levelVisibility, From b2b95e8556454a1831f45747f36722d95ed8603c Mon Sep 17 00:00:00 2001 From: Alistair Buxton Date: Sat, 31 Oct 2020 01:59:00 +0000 Subject: [PATCH 11/27] Correctly set the rightmost tile property when flipped This ensures that seams are not visible in Firefox and Safari when the image is wrapped horizontally and also flipped. --- src/tiledimage.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index 1e55b914..c3712aca 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1526,8 +1526,14 @@ function getTile( sourceBounds ); - if (xMod === numTiles.x - 1) { - tile.isRightMost = true; + if (tiledImage.getFlip()) { + if (xMod === 0) { + tile.isRightMost = true; + } + } else { + if (xMod === numTiles.x - 1) { + tile.isRightMost = true; + } } if (yMod === numTiles.y - 1) { From 53052c8c08eabaf73ac93a55771c593e9be8657e Mon Sep 17 00:00:00 2001 From: Alistair Buxton Date: Fri, 19 Mar 2021 15:45:21 +0000 Subject: [PATCH 12/27] Add flipping example This isn't complete - the flip toggles do not work as setFlip() is not implemented. The second image is currently always flipped. --- test/demo/flipping.html | 110 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 test/demo/flipping.html diff --git a/test/demo/flipping.html b/test/demo/flipping.html new file mode 100644 index 00000000..6d5f1469 --- /dev/null +++ b/test/demo/flipping.html @@ -0,0 +1,110 @@ + + + + OpenSeadragon Flipping Demo + + + + + +
+ Simple demo page to show image flipping. +
+
+ + +
+
+ First +
+ + +
+
+ + +
+
+ +
+ Second +
+ + +
+
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ + + From 3161808a9d0ad841072a08d1975784fda62702d3 Mon Sep 17 00:00:00 2001 From: Alistair Buxton Date: Fri, 19 Mar 2021 16:33:10 +0000 Subject: [PATCH 13/27] Add a basic setFlip method to TiledImage This doesn't fully work - even raising a bounds-change doesn't seem to be enough. --- src/tiledimage.js | 10 ++++++++++ test/demo/flipping.html | 4 ++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index c3712aca..61de4e08 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -859,6 +859,16 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag return !!this.flipped; }, + /** + * @param {Boolean} flip Whether the TiledImage should be flipped before rendering. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + setFlip: function(flip) { + this.flipped = !!flip; + this._needsDraw = true; + this._raiseBoundsChange(); + }, + /** * @returns {Number} The TiledImage's current opacity. */ diff --git a/test/demo/flipping.html b/test/demo/flipping.html index 6d5f1469..080d0f68 100644 --- a/test/demo/flipping.html +++ b/test/demo/flipping.html @@ -36,7 +36,7 @@ First
- +
@@ -48,7 +48,7 @@ Second
- +
From 7552806a4717f59aaf93b7d584b624228476a1cd Mon Sep 17 00:00:00 2001 From: Alistair Buxton Date: Mon, 22 Mar 2021 06:30:06 +0000 Subject: [PATCH 14/27] Force reload tiles when the tile's flip doesn't match the image Flipping an image changes the bounds of each tile. The existing code assumes that cannot happen. getTile() calculates the tile bounds the first time it is asked for a particular tile. It then caches and returns the same time on every subsequent call. getTile() has a check to test if a tile exists in the cache. If it does not, the tile is created and inserted. In order to make tiles be rebuilt after a flip, we only need to check if the tile's flip matches the image's flip. If not, we can recreate the tile as if it did not exist. To make this a bit clearer, the tile's flipped flag is now set in getTile() rather than positionTile(). This makes setFlip() work. --- src/tiledimage.js | 6 +++--- test/demo/flipping.html | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index 61de4e08..e2459660 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -866,7 +866,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag setFlip: function(flip) { this.flipped = !!flip; this._needsDraw = true; - this._raiseBoundsChange(); }, /** @@ -1501,7 +1500,7 @@ function getTile( tilesMatrix[ level ][ x ] = {}; } - if ( !tilesMatrix[ level ][ x ][ y ] ) { + if ( !tilesMatrix[ level ][ x ][ y ] || ((!!tilesMatrix[ level ][ x ][ y ].flipped) !== (!!tiledImage.flipped)) ) { xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; bounds = tiledImage.getTileBounds( level, x, y ); @@ -1550,6 +1549,8 @@ function getTile( tile.isBottomMost = true; } + tile.flipped = tiledImage.flipped; + tilesMatrix[ level ][ x ][ y ] = tile; } @@ -1749,7 +1750,6 @@ function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility, tile.size = sizeC; tile.squaredDistance = tileSquaredDistance; tile.visibility = levelVisibility; - tile.flipped = tiledImage.getFlip(); } /** diff --git a/test/demo/flipping.html b/test/demo/flipping.html index 080d0f68..f31b8ebc 100644 --- a/test/demo/flipping.html +++ b/test/demo/flipping.html @@ -36,7 +36,7 @@ First
- +
@@ -48,7 +48,7 @@ Second
- +
From 409620fa388c4c067e83964ee50b72117ecc01f7 Mon Sep 17 00:00:00 2001 From: Alistair Buxton Date: Tue, 23 Mar 2021 02:26:06 +0000 Subject: [PATCH 15/27] Tidy up the tile/image flip check Don't need double negation and brackets here. --- src/tiledimage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index e2459660..f6eb36f2 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1500,7 +1500,7 @@ function getTile( tilesMatrix[ level ][ x ] = {}; } - if ( !tilesMatrix[ level ][ x ][ y ] || ((!!tilesMatrix[ level ][ x ][ y ].flipped) !== (!!tiledImage.flipped)) ) { + if ( !tilesMatrix[ level ][ x ][ y ] || !tilesMatrix[ level ][ x ][ y ].flipped !== !tiledImage.flipped ) { xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; bounds = tiledImage.getTileBounds( level, x, y ); From eebfdc139135ec3ead2387059794d7732b856482 Mon Sep 17 00:00:00 2001 From: Alistair Buxton Date: Tue, 23 Mar 2021 03:12:58 +0000 Subject: [PATCH 16/27] Improve the flipping example Adds tiled images to the viewer at creation so that they are properly centred. This also checks the current state of the test checkboxes on loading. Some browsers, notably Firefox, will remember the value of checkboxes across reloads. This can lead to the checkboxes being out of sync with with viewer after a reload. An alternative is to set autocomplete="off" on each checkbox element. This will force the browser to reset the field to the default specified in the HTML. However I think checking the actual value is preferable as it means the defaults are only specified in one place. --- test/demo/flipping.html | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/test/demo/flipping.html b/test/demo/flipping.html index f31b8ebc..3d3eb99e 100644 --- a/test/demo/flipping.html +++ b/test/demo/flipping.html @@ -20,8 +20,6 @@ margin: 0.3em; } - - @@ -57,6 +55,7 @@
+ Viewport
@@ -73,21 +72,25 @@ // debugMode: true, id: "contentDiv", prefixUrl: "../../build/openseadragon/images/", - showNavigator:true + showNavigator:true, + tileSources: [ + { + tileSource: "../data/testpattern.dzi", + x: 0, + y: 0, + flipped: document.getElementById("ffirst").checked, + degrees: document.getElementById("rfirst").checked * 45, + }, { + tileSource: "../data/testpattern.dzi", + x: 1, + y: 0, + flipped: document.getElementById("fsecond").checked, + degrees: document.getElementById("rsecond").checked * 45, + } + ] }); - var first = viewer.addTiledImage({ - tileSource: "../data/testpattern.dzi", - x: 0, - y: 0, - }); - - var second = viewer.addTiledImage({ - tileSource: "../data/testpattern.dzi", - x: 1, - y: 0, - flipped: true, - }); + viewer.viewport.setFlip(document.getElementById("fview").checked); function debug(v) { viewer.setDebugMode(v); From 7ab493d18bab0322b2599338af0d83f5043b426e Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Thu, 25 Mar 2021 14:41:11 +0100 Subject: [PATCH 17/27] fix: made updatePixelDensityRatio private Prefixed it with a underscore and added @private annotation --- src/viewer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index d6bf83f3..1dc39124 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -427,7 +427,7 @@ $.Viewer = function( options ) { } // Add updatePixelDensityRatio to resize event - $.addEvent( window, 'resize', this.updatePixelDensityRatio.bind(this) ); + $.addEvent( window, 'resize', this._updatePixelDensityRatio.bind(this) ); //Instantiate a navigator if configured if ( this.showNavigator){ @@ -1614,8 +1614,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, /** * Update pixel density ration, clears all tiles and triggers updates for * all items. + * @private */ - updatePixelDensityRatio: function() { + _updatePixelDensityRatio: function() { var previusPixelDensityRatio = $.pixelDensityRatio; var currentPixelDensityRatio = $.getCurrentPixelDensityRatio(); if (previusPixelDensityRatio !== currentPixelDensityRatio) { From 99f87c0bc78bfbb3e775f5fe5fbdf5c80db7d146 Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Thu, 25 Mar 2021 14:54:42 +0100 Subject: [PATCH 18/27] docs: fixed typo and corrected the comment --- src/viewer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 1dc39124..98f8e484 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1612,8 +1612,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, }, /** - * Update pixel density ration, clears all tiles and triggers updates for - * all items. + * Update pixel density ratio, clears all tiles and triggers updates for + * all items if the ratio has changed. * @private */ _updatePixelDensityRatio: function() { From f0cf90df76693bc6f9ff039d5cfa9068ead60ddb Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 26 Mar 2021 09:43:30 +0100 Subject: [PATCH 19/27] fix: removes resize event on destroy --- src/viewer.js | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 98f8e484..f17621d6 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -220,6 +220,7 @@ $.Viewer = function( options ) { this._updateRequestId = null; this._loadQueue = []; this.currentOverlays = []; + this._updatePixelDensityRatioBind = null; this._lastScrollTime = $.now(); // variable used to help normalize the scroll event speed of different devices @@ -426,8 +427,7 @@ $.Viewer = function( options ) { } } - // Add updatePixelDensityRatio to resize event - $.addEvent( window, 'resize', this._updatePixelDensityRatio.bind(this) ); + this._addUpdatePixelDensityRatioEvent(); //Instantiate a navigator if configured if ( this.showNavigator){ @@ -751,6 +751,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return; } + this._removeUpdatePixelDensityRatioEvent(); + this.close(); this.clearOverlays(); @@ -2284,6 +2286,23 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, } else { $.console.warn('Attempting to display a reference strip while "sequenceMode" is off.'); } + }, + + /** + * Adds _updatePixelDensityRatio to the window resize event. + * @private + */ + _addUpdatePixelDensityRatioEvent: function() { + this._updatePixelDensityRatioBind = this._updatePixelDensityRatio.bind(this); + $.addEvent( window, 'resize', this._updatePixelDensityRatioBind ); + }, + + /** + * Removes _updatePixelDensityRatio from the window resize event. + * @private + */ + _removeUpdatePixelDensityRatioEvent: function() { + $.removeEvent( window, 'resize', this._updatePixelDensityRatioBind ); } }); From 47802c0bd75e45493e60d1778060d2607f5f1148 Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 26 Mar 2021 12:08:50 +0100 Subject: [PATCH 20/27] refactor: use pixelDensityRatio in getPixelRatio() --- src/tiledimage.js | 4 ++-- src/tilesource.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index ccc51601..74ffacef 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1018,7 +1018,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag ); var currentZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( this.source.getPixelRatio(0), true).x * - this._scaleSpring.current.value * $.pixelDensityRatio; + this._scaleSpring.current.value; var highestLevel = Math.min( Math.abs(this.source.maxLevel), Math.abs(Math.floor( @@ -1082,7 +1082,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag var currentRenderPixelRatio = viewport.deltaPixelsFromPointsNoRotate( this.source.getPixelRatio(level), true - ).x * this._scaleSpring.current.value * $.pixelDensityRatio; + ).x * this._scaleSpring.current.value; if (level === lowestLevel || (!haveDrawn && currentRenderPixelRatio >= this.minPixelRatio)) { diff --git a/src/tilesource.js b/src/tilesource.js index fcf2be82..aab7f134 100644 --- a/src/tilesource.js +++ b/src/tilesource.js @@ -313,8 +313,8 @@ $.TileSource.prototype = { */ getPixelRatio: function( level ) { var imageSizeScaled = this.dimensions.times( this.getLevelScale( level ) ), - rx = 1.0 / imageSizeScaled.x, - ry = 1.0 / imageSizeScaled.y; + rx = 1.0 / imageSizeScaled.x * $.pixelDensityRatio, + ry = 1.0 / imageSizeScaled.y * $.pixelDensityRatio; return new $.Point(rx, ry); }, From e6725871b8138e0c253ac8b177ddf6eefb1433c7 Mon Sep 17 00:00:00 2001 From: Alistair Buxton Date: Fri, 26 Mar 2021 11:18:21 +0000 Subject: [PATCH 21/27] Make setFlip() update the navigator Makes setFlip() raise a bounds change, and makes the navigator copy the image flip in addition to the other properties, when receiving the bounds signal. --- src/navigator.js | 1 + src/tiledimage.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/navigator.js b/src/navigator.js index 9b64d2bd..5414a53e 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -452,6 +452,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* myItem.setWidth(bounds.width, immediately); myItem.setRotation(theirItem.getRotation(), immediately); myItem.setClip(theirItem.getClip()); + myItem.setFlip(theirItem.getFlip()); }, // private diff --git a/src/tiledimage.js b/src/tiledimage.js index f6eb36f2..82e35ed7 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -866,6 +866,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag setFlip: function(flip) { this.flipped = !!flip; this._needsDraw = true; + this._raiseBoundsChange(); }, /** From 3fcd4aeee3da9371e1bc9866ccb2d62db811e29c Mon Sep 17 00:00:00 2001 From: ronnymikalsen Date: Fri, 26 Mar 2021 12:38:58 +0100 Subject: [PATCH 22/27] refactor: moved methods that belongs together closer --- src/viewer.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index f17621d6..612c753a 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1613,21 +1613,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, return this.world.removeItem(drawer); }, - /** - * Update pixel density ratio, clears all tiles and triggers updates for - * all items if the ratio has changed. - * @private - */ - _updatePixelDensityRatio: function() { - var previusPixelDensityRatio = $.pixelDensityRatio; - var currentPixelDensityRatio = $.getCurrentPixelDensityRatio(); - if (previusPixelDensityRatio !== currentPixelDensityRatio) { - $.pixelDensityRatio = currentPixelDensityRatio; - this.world.resetItems(); - this.forceRedraw(); - } - }, - /** * Force the viewer to redraw its contents. * @returns {OpenSeadragon.Viewer} Chainable. @@ -2303,6 +2288,21 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, */ _removeUpdatePixelDensityRatioEvent: function() { $.removeEvent( window, 'resize', this._updatePixelDensityRatioBind ); + }, + + /** + * Update pixel density ratio, clears all tiles and triggers updates for + * all items if the ratio has changed. + * @private + */ + _updatePixelDensityRatio: function() { + var previusPixelDensityRatio = $.pixelDensityRatio; + var currentPixelDensityRatio = $.getCurrentPixelDensityRatio(); + if (previusPixelDensityRatio !== currentPixelDensityRatio) { + $.pixelDensityRatio = currentPixelDensityRatio; + this.world.resetItems(); + this.forceRedraw(); + } } }); From 63f8f2e2a94f0c597c036ee3e739361b962f8279 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Fri, 26 Mar 2021 13:43:29 -0700 Subject: [PATCH 23/27] Changelog for #1903 --- changelog.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/changelog.txt b/changelog.txt index ac5324dd..2f976c5d 100644 --- a/changelog.txt +++ b/changelog.txt @@ -44,6 +44,7 @@ OPENSEADRAGON CHANGELOG * Fixed test "Events: Viewer: preventDefaultAction in dblClickHandler". Fixes #1372 (#1960 @msalsbery) * ReferenceStrip: Fixed issue where its element was being removed from its parent element twice on destroy, causing an exception (#1958 @msalsbery) * ReferenceStrip: Made its element focusable for keyboard navigation (#1958 @msalsbery) +* You can now flip individual images (not just the whole viewport) (#1903 @ali1234) 2.4.2: From 15f8e4c18650acd30564d9e51b1bcc808e47d737 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Fri, 26 Mar 2021 13:47:06 -0700 Subject: [PATCH 24/27] Changelog for #1937 --- changelog.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/changelog.txt b/changelog.txt index 2f976c5d..d5dc8794 100644 --- a/changelog.txt +++ b/changelog.txt @@ -45,6 +45,7 @@ OPENSEADRAGON CHANGELOG * ReferenceStrip: Fixed issue where its element was being removed from its parent element twice on destroy, causing an exception (#1958 @msalsbery) * ReferenceStrip: Made its element focusable for keyboard navigation (#1958 @msalsbery) * You can now flip individual images (not just the whole viewport) (#1903 @ali1234) +* Accessibility: we now take the browser's zoom into account when choosing what detail level to draw (#1937 @ronnymikalsen) 2.4.2: From a6792138814d1eff5ae4fca526b989fc917245be Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Thu, 8 Apr 2021 11:34:14 -0700 Subject: [PATCH 25/27] Changelog for #1865 --- changelog.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/changelog.txt b/changelog.txt index d5dc8794..de134b64 100644 --- a/changelog.txt +++ b/changelog.txt @@ -46,6 +46,7 @@ OPENSEADRAGON CHANGELOG * ReferenceStrip: Made its element focusable for keyboard navigation (#1958 @msalsbery) * You can now flip individual images (not just the whole viewport) (#1903 @ali1234) * Accessibility: we now take the browser's zoom into account when choosing what detail level to draw (#1937 @ronnymikalsen) +* Fixed a bug causing overlays to disappear in Sequence Mode (#1865 @gunmiosb) 2.4.2: From 60010628b4c00398c11498a1516f3f73004eaa1a Mon Sep 17 00:00:00 2001 From: Max Poshusta Date: Fri, 16 Apr 2021 06:06:27 -0500 Subject: [PATCH 26/27] Fixing issue where the ajaxHeaders were not being set for image requests --- src/viewer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/viewer.js b/src/viewer.js index 57b16e4f..ba3c1e2a 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2373,7 +2373,8 @@ function getTileSourceImplementation( viewer, tileSource, imgOptions, successCal crossOriginPolicy: imgOptions.crossOriginPolicy !== undefined ? imgOptions.crossOriginPolicy : viewer.crossOriginPolicy, ajaxWithCredentials: viewer.ajaxWithCredentials, - ajaxHeaders: viewer.ajaxHeaders, + ajaxHeaders: imgOptions.ajaxHeaders ? + imgOptions.ajaxHeaders : viewer.ajaxHeaders, useCanvas: viewer.useCanvas, success: function( event ) { successCallback( event.tileSource ); From dba9bcd76c2407ad7b856aba065389503c2db506 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Mon, 19 Apr 2021 11:30:13 -0700 Subject: [PATCH 27/27] Changelog for #1968 --- changelog.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/changelog.txt b/changelog.txt index de134b64..7ec30e54 100644 --- a/changelog.txt +++ b/changelog.txt @@ -47,6 +47,7 @@ OPENSEADRAGON CHANGELOG * You can now flip individual images (not just the whole viewport) (#1903 @ali1234) * Accessibility: we now take the browser's zoom into account when choosing what detail level to draw (#1937 @ronnymikalsen) * Fixed a bug causing overlays to disappear in Sequence Mode (#1865 @gunmiosb) +* Fixed a bug where the ajaxHeaders provided per-image were not being used for image requests (#1968 @maxshuty) 2.4.2: