From 8d66acde530fb7289ab4ff34aea2edaa9d4ceeac Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Mon, 29 Apr 2024 10:50:35 -0700 Subject: [PATCH 01/32] Changelog for #2521 --- changelog.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog.txt b/changelog.txt index d49699cb..fd03a346 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, #2468, #2469, #2472, #2478, #2488, #2492 @pearcetm, @Aiosa, @thec0keman) +* The viewer now uses WebGL when available (#2310, #2462, #2466, #2468, #2469, #2472, #2478, #2488, #2492, #2521 @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) From 5be44521b514184a1b170da95fc8c319448b78cd Mon Sep 17 00:00:00 2001 From: Tom Date: Tue, 21 May 2024 04:30:17 -0400 Subject: [PATCH 02/32] Fix sorting logic for best tiles to load --- src/tiledimage.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index 20fa2ebf..cf7075a7 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1651,8 +1651,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag } var result = this._updateTile( - drawLevel, haveDrawn, + drawLevel, flippedX, y, level, levelVisibility, @@ -2183,9 +2183,11 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag return -1; } if (a.visibility === b.visibility) { + // sort by smallest squared distance return (a.squaredDistance - b.squaredDistance); } else { - return (a.visibility - b.visibility); + // sort by largest visibility value + return (b.visibility - a.visibility); } }); }, From 9ef1c5952e1ac6801a5ac358a53e68999eff6968 Mon Sep 17 00:00:00 2001 From: Tom Date: Tue, 21 May 2024 16:33:48 -0400 Subject: [PATCH 03/32] revert swapping order of arguments in _updateTile call to fix behavior of canvas drawer --- src/tiledimage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index cf7075a7..0bb34b69 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1651,8 +1651,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag } var result = this._updateTile( - haveDrawn, drawLevel, + haveDrawn, flippedX, y, level, levelVisibility, From 3f03bd6e20324a3d7772f5655a512d3148eaddee Mon Sep 17 00:00:00 2001 From: Tom Date: Wed, 22 May 2024 17:36:16 -0400 Subject: [PATCH 04/32] swap logic of haveDrawn and drawLevel within _updateTile --- src/tiledimage.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index 0bb34b69..545ec5a1 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1651,8 +1651,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag } var result = this._updateTile( - drawLevel, haveDrawn, + drawLevel, flippedX, y, level, levelVisibility, @@ -1784,15 +1784,15 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag if (tile.loaded && tile.opacity === 1){ this._setCoverage( this.coverage, level, x, y, true ); } - if ( haveDrawn && !drawTile ) { + if ( drawTile && !haveDrawn ) { if ( this._isCovered( this.coverage, level, x, y ) ) { this._setCoverage( this.coverage, level, x, y, true ); } else { - drawTile = true; + haveDrawn = true; } } - if ( !drawTile ) { + if ( !haveDrawn ) { return { bestTiles: best, tile: tile From be30b429f8961eb08ee858a698866efbbf487bf7 Mon Sep 17 00:00:00 2001 From: Tom Date: Wed, 22 May 2024 18:54:29 -0400 Subject: [PATCH 05/32] remove unused code paths --- src/tiledimage.js | 4337 ++++++++++++++++++++++----------------------- 1 file changed, 2152 insertions(+), 2185 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index 545ec5a1..6a2d7253 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -34,2278 +34,2245 @@ (function( $ ){ -/** - * You shouldn't have to create a TiledImage instance directly; get it asynchronously by - * using {@link OpenSeadragon.Viewer#open} or {@link OpenSeadragon.Viewer#addTiledImage} instead. - * @class TiledImage - * @memberof OpenSeadragon - * @extends OpenSeadragon.EventSource - * @classdesc Handles rendering of tiles for an {@link OpenSeadragon.Viewer}. - * A new instance is created for each TileSource opened. - * @param {Object} options - Configuration for this TiledImage. - * @param {OpenSeadragon.TileSource} options.source - The TileSource that defines this TiledImage. - * @param {OpenSeadragon.Viewer} options.viewer - The Viewer that owns this TiledImage. - * @param {OpenSeadragon.TileCache} options.tileCache - The TileCache for this TiledImage to use. - * @param {OpenSeadragon.Drawer} options.drawer - The Drawer for this TiledImage to draw onto. - * @param {OpenSeadragon.ImageLoader} options.imageLoader - The ImageLoader for this TiledImage to use. - * @param {Number} [options.x=0] - Left position, in viewport coordinates. - * @param {Number} [options.y=0] - Top position, in viewport coordinates. - * @param {Number} [options.width=1] - Width, in viewport coordinates. - * @param {Number} [options.height] - Height, in viewport coordinates. - * @param {OpenSeadragon.Rect} [options.fitBounds] The bounds in viewport coordinates - * to fit the image into. If specified, x, y, width and height get ignored. - * @param {OpenSeadragon.Placement} [options.fitBoundsPlacement=OpenSeadragon.Placement.CENTER] - * How to anchor the image in the bounds if options.fitBounds is set. - * @param {OpenSeadragon.Rect} [options.clip] - An area, in image pixels, to clip to - * (portions of the image outside of this area will not be visible). Only works on - * browsers that support the HTML5 canvas. - * @param {Number} [options.springStiffness] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.animationTime] - See {@link OpenSeadragon.Options}. - * @param {Number} [options.minZoomImageRatio] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.wrapHorizontal] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.wrapVertical] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.immediateRender] - See {@link OpenSeadragon.Options}. - * @param {Number} [options.blendTime] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.alwaysBlend] - See {@link OpenSeadragon.Options}. - * @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}. - * @param {Number} [options.smoothTileEdgesMinZoom] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.iOSDevice] - See {@link OpenSeadragon.Options}. - * @param {Number} [options.opacity=1] - Set to draw at proportional opacity. If zero, images will not draw. - * @param {Boolean} [options.preload=false] - Set true to load even when the image is hidden by zero opacity. - * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible - values. - * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. - * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. - * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.ajaxWithCredentials] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.loadTilesWithAjax] - * Whether to load tile data using AJAX requests. - * Defaults to the setting in {@link OpenSeadragon.Options}. - * @param {Object} [options.ajaxHeaders={}] - * A set of headers to include when making tile AJAX requests. - */ -$.TiledImage = function( options ) { - this._initialized = false; /** - * The {@link OpenSeadragon.TileSource} that defines this TiledImage. - * @member {OpenSeadragon.TileSource} source - * @memberof OpenSeadragon.TiledImage# - */ - $.console.assert( options.tileCache, "[TiledImage] options.tileCache is required" ); - $.console.assert( options.drawer, "[TiledImage] options.drawer is required" ); - $.console.assert( options.viewer, "[TiledImage] options.viewer is required" ); - $.console.assert( options.imageLoader, "[TiledImage] options.imageLoader is required" ); - $.console.assert( options.source, "[TiledImage] options.source is required" ); - $.console.assert(!options.clip || options.clip instanceof $.Rect, - "[TiledImage] options.clip must be an OpenSeadragon.Rect if present"); - - $.EventSource.call( this ); - - this._tileCache = options.tileCache; - delete options.tileCache; - - this._drawer = options.drawer; - delete options.drawer; - - this._imageLoader = options.imageLoader; - delete options.imageLoader; - - if (options.clip instanceof $.Rect) { - this._clip = options.clip.clone(); - } - - delete options.clip; - - var x = options.x || 0; - delete options.x; - var y = options.y || 0; - delete options.y; - - // Ratio of zoomable image height to width. - this.normHeight = options.source.dimensions.y / options.source.dimensions.x; - this.contentAspectX = options.source.dimensions.x / options.source.dimensions.y; - - var scale = 1; - if ( options.width ) { - scale = options.width; - delete options.width; - - if ( options.height ) { - $.console.error( "specifying both width and height to a tiledImage is not supported" ); - delete options.height; - } - } else if ( options.height ) { - scale = options.height / this.normHeight; - delete options.height; - } - - var fitBounds = options.fitBounds; - delete options.fitBounds; - var fitBoundsPlacement = options.fitBoundsPlacement || OpenSeadragon.Placement.CENTER; - delete options.fitBoundsPlacement; - - var degrees = options.degrees || 0; - delete options.degrees; - - var ajaxHeaders = options.ajaxHeaders; - delete options.ajaxHeaders; - - $.extend( true, this, { - - //internal state properties - viewer: null, - tilesMatrix: {}, // A '3d' dictionary [level][x][y] --> Tile. - coverage: {}, // A '3d' dictionary [level][x][y] --> Boolean; shows what areas have been drawn. - loadingCoverage: {}, // A '3d' dictionary [level][x][y] --> Boolean; shows what areas are loaded or are being loaded/blended. - lastDrawn: [], // An unordered list of Tiles drawn last frame. - lastResetTime: 0, // Last time for which the tiledImage was reset. - _needsDraw: true, // Does the tiledImage need to be drawn again? - _needsUpdate: true, // Does the tiledImage need to update the viewport again? - _hasOpaqueTile: false, // Do we have even one fully opaque tile? - _tilesLoading: 0, // The number of pending tile requests. - _tilesToDraw: [], // info about the tiles currently in the viewport, two deep: array[level][tile] - _lastDrawn: [], // array of tiles that were last fetched by the drawer - _isBlending: false, // Are any tiles still being blended? - _wasBlending: false, // Were any tiles blending before the last draw? - _isTainted: false, // Has a Tile been found with tainted data? - //configurable settings - springStiffness: $.DEFAULT_SETTINGS.springStiffness, - animationTime: $.DEFAULT_SETTINGS.animationTime, - minZoomImageRatio: $.DEFAULT_SETTINGS.minZoomImageRatio, - wrapHorizontal: $.DEFAULT_SETTINGS.wrapHorizontal, - wrapVertical: $.DEFAULT_SETTINGS.wrapVertical, - immediateRender: $.DEFAULT_SETTINGS.immediateRender, - blendTime: $.DEFAULT_SETTINGS.blendTime, - alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend, - minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio, - smoothTileEdgesMinZoom: $.DEFAULT_SETTINGS.smoothTileEdgesMinZoom, - iOSDevice: $.DEFAULT_SETTINGS.iOSDevice, - debugMode: $.DEFAULT_SETTINGS.debugMode, - crossOriginPolicy: $.DEFAULT_SETTINGS.crossOriginPolicy, - ajaxWithCredentials: $.DEFAULT_SETTINGS.ajaxWithCredentials, - placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, - opacity: $.DEFAULT_SETTINGS.opacity, - preload: $.DEFAULT_SETTINGS.preload, - compositeOperation: $.DEFAULT_SETTINGS.compositeOperation, - subPixelRoundingForTransparency: $.DEFAULT_SETTINGS.subPixelRoundingForTransparency, - maxTilesPerFrame: $.DEFAULT_SETTINGS.maxTilesPerFrame - }, options ); - - this._preload = this.preload; - delete this.preload; - - this._fullyLoaded = false; - - this._xSpring = new $.Spring({ - initial: x, - springStiffness: this.springStiffness, - animationTime: this.animationTime - }); - - this._ySpring = new $.Spring({ - initial: y, - springStiffness: this.springStiffness, - animationTime: this.animationTime - }); - - this._scaleSpring = new $.Spring({ - initial: scale, - springStiffness: this.springStiffness, - animationTime: this.animationTime - }); - - this._degreesSpring = new $.Spring({ - initial: degrees, - springStiffness: this.springStiffness, - animationTime: this.animationTime - }); - - this._updateForScale(); - - if (fitBounds) { - this.fitBounds(fitBounds, fitBoundsPlacement, true); - } - - this._ownAjaxHeaders = {}; - this.setAjaxHeaders(ajaxHeaders, false); - this._initialized = true; -}; - -$.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.TiledImage.prototype */{ - /** - * @returns {Boolean} Whether the TiledImage needs to be drawn. - */ - needsDraw: function() { - return this._needsDraw; - }, - - /** - * Mark the tiled image as needing to be (re)drawn - */ - redraw: function() { - this._needsDraw = true; - }, - - /** - * @returns {Boolean} Whether all tiles necessary for this TiledImage to draw at the current view have been loaded. - */ - getFullyLoaded: function() { - return this._fullyLoaded; - }, - - // private - _setFullyLoaded: function(flag) { - if (flag === this._fullyLoaded) { - return; - } - - this._fullyLoaded = flag; - - /** - * Fired when the TiledImage's "fully loaded" flag (whether all tiles necessary for this TiledImage - * to draw at the current view have been loaded) changes. - * - * @event fully-loaded-change - * @memberof OpenSeadragon.TiledImage - * @type {object} - * @property {Boolean} fullyLoaded - The new "fully loaded" value. - * @property {OpenSeadragon.TiledImage} eventSource - A reference to the TiledImage which raised the event. - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.raiseEvent('fully-loaded-change', { - fullyLoaded: this._fullyLoaded - }); - }, - - /** - * Clears all tiles and triggers an update on the next call to - * {@link OpenSeadragon.TiledImage#update}. - */ - reset: function() { - this._tileCache.clearTilesFor(this); - this.lastResetTime = $.now(); - this._needsDraw = true; - }, - - /** - * Updates the TiledImage's bounds, animating if needed. Based on the new - * bounds, updates the levels and tiles to be drawn into the viewport. - * @param viewportChanged Whether the viewport changed meaning tiles need to be updated. - * @returns {Boolean} Whether the TiledImage needs to be drawn. - */ - update: function(viewportChanged) { - let xUpdated = this._xSpring.update(); - let yUpdated = this._ySpring.update(); - let scaleUpdated = this._scaleSpring.update(); - let degreesUpdated = this._degreesSpring.update(); - - let updated = (xUpdated || yUpdated || scaleUpdated || degreesUpdated || this._needsUpdate); - - if (updated || viewportChanged || !this._fullyLoaded){ - let fullyLoadedFlag = this._updateLevelsForViewport(); - this._setFullyLoaded(fullyLoadedFlag); - } - - this._needsUpdate = false; - - if (updated) { - this._updateForScale(); - this._raiseBoundsChange(); - this._needsDraw = true; - return true; - } - - return false; - }, - - /** - * Mark this TiledImage as having been drawn, so that it will only be drawn - * again if something changes about the image. If the image is still blending, - * this will have no effect. - * @returns {Boolean} whether the item still needs to be drawn due to blending - */ - setDrawn: function(){ - this._needsDraw = this._isBlending || this._wasBlending; - return this._needsDraw; - }, - - /** - * Set the internal _isTainted flag for this TiledImage. Lazy loaded - not - * checked each time a Tile is loaded, but can be set if a consumer of the - * tiles (e.g. a Drawer) discovers a Tile to have tainted data so that further - * checks are not needed and alternative rendering strategies can be used. - * @private - */ - setTainted(isTainted){ - this._isTainted = isTainted; - }, - - /** - * @private - * @returns {Boolean} whether the TiledImage has been marked as tainted - */ - isTainted(){ - return this._isTainted; - }, - - /** - * Destroy the TiledImage (unload current loaded tiles). - */ - destroy: function() { - this.reset(); - - if (this.source.destroy) { - this.source.destroy(this.viewer); - } - }, - - /** - * Get this TiledImage's bounds in viewport coordinates. - * @param {Boolean} [current=false] - Pass true for the current location; - * false for target location. - * @returns {OpenSeadragon.Rect} This TiledImage's bounds in viewport coordinates. - */ - getBounds: function(current) { - return this.getBoundsNoRotate(current) - .rotate(this.getRotation(current), this._getRotationPoint(current)); - }, - - /** - * Get this TiledImage's bounds in viewport coordinates without taking - * rotation into account. - * @param {Boolean} [current=false] - Pass true for the current location; - * false for target location. - * @returns {OpenSeadragon.Rect} This TiledImage's bounds in viewport coordinates. - */ - getBoundsNoRotate: function(current) { - return current ? - new $.Rect( - this._xSpring.current.value, - this._ySpring.current.value, - this._worldWidthCurrent, - this._worldHeightCurrent) : - new $.Rect( - this._xSpring.target.value, - this._ySpring.target.value, - this._worldWidthTarget, - this._worldHeightTarget); - }, - - // deprecated - getWorldBounds: function() { - $.console.error('[TiledImage.getWorldBounds] is deprecated; use TiledImage.getBounds instead'); - return this.getBounds(); - }, - - /** - * Get the bounds of the displayed part of the tiled image. - * @param {Boolean} [current=false] Pass true for the current location, - * false for the target location. - * @returns {$.Rect} The clipped bounds in viewport coordinates. - */ - getClippedBounds: function(current) { - var bounds = this.getBoundsNoRotate(current); - if (this._clip) { - var worldWidth = current ? - this._worldWidthCurrent : this._worldWidthTarget; - var ratio = worldWidth / this.source.dimensions.x; - var clip = this._clip.times(ratio); - bounds = new $.Rect( - bounds.x + clip.x, - bounds.y + clip.y, - clip.width, - clip.height); - } - 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); - if (this.getFlip()) { - bounds.x = Math.max(0, 1 - bounds.x - bounds.width); - } - 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. - */ - getContentSize: function() { - return new $.Point(this.source.dimensions.x, this.source.dimensions.y); - }, - - /** - * @returns {OpenSeadragon.Point} The TiledImage's content size, in window coordinates. - */ - getSizeInWindowCoordinates: function() { - var topLeft = this.imageToWindowCoordinates(new $.Point(0, 0)); - var bottomRight = this.imageToWindowCoordinates(this.getContentSize()); - return new $.Point(bottomRight.x - topLeft.x, bottomRight.y - topLeft.y); - }, - - // private - _viewportToImageDelta: function( viewerX, viewerY, current ) { - var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value); - return new $.Point(viewerX * (this.source.dimensions.x / scale), - viewerY * ((this.source.dimensions.y * this.contentAspectX) / scale)); - }, - - /** - * Translates from OpenSeadragon viewer coordinate system to image coordinate system. - * This method can be called either by passing X,Y coordinates or an {@link OpenSeadragon.Point}. - * @param {Number|OpenSeadragon.Point} viewerX - The X coordinate or point in viewport coordinate system. - * @param {Number} [viewerY] - The Y coordinate in viewport coordinate system. - * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. - * @returns {OpenSeadragon.Point} A point representing the coordinates in the image. - */ - viewportToImageCoordinates: function(viewerX, viewerY, current) { - var point; - if (viewerX instanceof $.Point) { - //they passed a point instead of individual components - current = viewerY; - point = viewerX; - } else { - point = new $.Point(viewerX, viewerY); - } - - point = point.rotate(-this.getRotation(current), this._getRotationPoint(current)); - return current ? - this._viewportToImageDelta( - point.x - this._xSpring.current.value, - point.y - this._ySpring.current.value) : - this._viewportToImageDelta( - point.x - this._xSpring.target.value, - point.y - this._ySpring.target.value); - }, - - // private - _imageToViewportDelta: function( imageX, imageY, current ) { - var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value); - return new $.Point((imageX / this.source.dimensions.x) * scale, - (imageY / this.source.dimensions.y / this.contentAspectX) * scale); - }, - - /** - * Translates from image coordinate system to OpenSeadragon viewer coordinate system - * This method can be called either by passing X,Y coordinates or an {@link OpenSeadragon.Point}. - * @param {Number|OpenSeadragon.Point} imageX - The X coordinate or point in image coordinate system. - * @param {Number} [imageY] - The Y coordinate in image coordinate system. - * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. - * @returns {OpenSeadragon.Point} A point representing the coordinates in the viewport. - */ - imageToViewportCoordinates: function(imageX, imageY, current) { - if (imageX instanceof $.Point) { - //they passed a point instead of individual components - current = imageY; - imageY = imageX.y; - imageX = imageX.x; - } - - var point = this._imageToViewportDelta(imageX, imageY, current); - if (current) { - point.x += this._xSpring.current.value; - point.y += this._ySpring.current.value; - } else { - point.x += this._xSpring.target.value; - point.y += this._ySpring.target.value; - } - - return point.rotate(this.getRotation(current), this._getRotationPoint(current)); - }, - - /** - * Translates from a rectangle which describes a portion of the image in - * pixel coordinates to OpenSeadragon viewport rectangle coordinates. - * This method can be called either by passing X,Y,width,height or an {@link OpenSeadragon.Rect}. - * @param {Number|OpenSeadragon.Rect} imageX - The left coordinate or rectangle in image coordinate system. - * @param {Number} [imageY] - The top coordinate in image coordinate system. - * @param {Number} [pixelWidth] - The width in pixel of the rectangle. - * @param {Number} [pixelHeight] - The height in pixel of the rectangle. - * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. - * @returns {OpenSeadragon.Rect} A rect representing the coordinates in the viewport. - */ - imageToViewportRectangle: function(imageX, imageY, pixelWidth, pixelHeight, current) { - var rect = imageX; - if (rect instanceof $.Rect) { - //they passed a rect instead of individual components - current = imageY; - } else { - rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight); - } - - var coordA = this.imageToViewportCoordinates(rect.getTopLeft(), current); - var coordB = this._imageToViewportDelta(rect.width, rect.height, current); - - return new $.Rect( - coordA.x, - coordA.y, - coordB.x, - coordB.y, - rect.degrees + this.getRotation(current) - ); - }, - - /** - * Translates from a rectangle which describes a portion of - * the viewport in point coordinates to image rectangle coordinates. - * This method can be called either by passing X,Y,width,height or an {@link OpenSeadragon.Rect}. - * @param {Number|OpenSeadragon.Rect} viewerX - The left coordinate or rectangle in viewport coordinate system. - * @param {Number} [viewerY] - The top coordinate in viewport coordinate system. - * @param {Number} [pointWidth] - The width in viewport coordinate system. - * @param {Number} [pointHeight] - The height in viewport coordinate system. - * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. - * @returns {OpenSeadragon.Rect} A rect representing the coordinates in the image. - */ - viewportToImageRectangle: function( viewerX, viewerY, pointWidth, pointHeight, current ) { - var rect = viewerX; - if (viewerX instanceof $.Rect) { - //they passed a rect instead of individual components - current = viewerY; - } else { - rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight); - } - - var coordA = this.viewportToImageCoordinates(rect.getTopLeft(), current); - var coordB = this._viewportToImageDelta(rect.width, rect.height, current); - - return new $.Rect( - coordA.x, - coordA.y, - coordB.x, - coordB.y, - rect.degrees - this.getRotation(current) - ); - }, - - /** - * Convert pixel coordinates relative to the viewer element to image - * coordinates. - * @param {OpenSeadragon.Point} pixel - * @returns {OpenSeadragon.Point} - */ - viewerElementToImageCoordinates: function( pixel ) { - var point = this.viewport.pointFromPixel( pixel, true ); - return this.viewportToImageCoordinates( point ); - }, - - /** - * Convert pixel coordinates relative to the image to - * viewer element coordinates. - * @param {OpenSeadragon.Point} pixel - * @returns {OpenSeadragon.Point} - */ - imageToViewerElementCoordinates: function( pixel ) { - var point = this.imageToViewportCoordinates( pixel ); - return this.viewport.pixelFromPoint( point, true ); - }, - - /** - * Convert pixel coordinates relative to the window to image coordinates. - * @param {OpenSeadragon.Point} pixel - * @returns {OpenSeadragon.Point} - */ - windowToImageCoordinates: function( pixel ) { - var viewerCoordinates = pixel.minus( - OpenSeadragon.getElementPosition( this.viewer.element )); - return this.viewerElementToImageCoordinates( viewerCoordinates ); - }, - - /** - * Convert image coordinates to pixel coordinates relative to the window. - * @param {OpenSeadragon.Point} pixel - * @returns {OpenSeadragon.Point} - */ - imageToWindowCoordinates: function( pixel ) { - var viewerCoordinates = this.imageToViewerElementCoordinates( pixel ); - return viewerCoordinates.plus( - OpenSeadragon.getElementPosition( this.viewer.element )); - }, - - // private - // Convert rectangle in viewport coordinates to this tiled image point - // coordinates (x in [0, 1] and y in [0, aspectRatio]) - _viewportToTiledImageRectangle: function(rect) { - var scale = this._scaleSpring.current.value; - rect = rect.rotate(-this.getRotation(true), this._getRotationPoint(true)); - return new $.Rect( - (rect.x - this._xSpring.current.value) / scale, - (rect.y - this._ySpring.current.value) / scale, - rect.width / scale, - rect.height / scale, - rect.degrees); - }, - - /** - * Convert a viewport zoom to an image zoom. - * Image zoom: ratio of the original image size to displayed image size. - * 1 means original image size, 0.5 half size... - * Viewport zoom: ratio of the displayed image's width to viewport's width. - * 1 means identical width, 2 means image's width is twice the viewport's width... - * @function - * @param {Number} viewportZoom The viewport zoom - * @returns {Number} imageZoom The image zoom - */ - viewportToImageZoom: function( viewportZoom ) { - var ratio = this._scaleSpring.current.value * - this.viewport._containerInnerSize.x / this.source.dimensions.x; - return ratio * viewportZoom; - }, - - /** - * Convert an image zoom to a viewport zoom. - * Image zoom: ratio of the original image size to displayed image size. - * 1 means original image size, 0.5 half size... - * Viewport zoom: ratio of the displayed image's width to viewport's width. - * 1 means identical width, 2 means image's width is twice the viewport's width... - * Note: not accurate with multi-image. - * @function - * @param {Number} imageZoom The image zoom - * @returns {Number} viewportZoom The viewport zoom - */ - imageToViewportZoom: function( imageZoom ) { - var ratio = this._scaleSpring.current.value * - this.viewport._containerInnerSize.x / this.source.dimensions.x; - return imageZoom / ratio; - }, - - /** - * Sets the TiledImage's position in the world. - * @param {OpenSeadragon.Point} position - The new position, in viewport coordinates. - * @param {Boolean} [immediately=false] - Whether to animate to the new position or snap immediately. - * @fires OpenSeadragon.TiledImage.event:bounds-change - */ - setPosition: function(position, immediately) { - var sameTarget = (this._xSpring.target.value === position.x && - this._ySpring.target.value === position.y); - - if (immediately) { - if (sameTarget && this._xSpring.current.value === position.x && - this._ySpring.current.value === position.y) { - return; - } - - this._xSpring.resetTo(position.x); - this._ySpring.resetTo(position.y); - this._needsDraw = true; - this._needsUpdate = true; - } else { - if (sameTarget) { - return; - } - - this._xSpring.springTo(position.x); - this._ySpring.springTo(position.y); - this._needsDraw = true; - this._needsUpdate = true; - } - - if (!sameTarget) { - this._raiseBoundsChange(); - } - }, - - /** - * Sets the TiledImage's width in the world, adjusting the height to match based on aspect ratio. - * @param {Number} width - The new width, in viewport coordinates. - * @param {Boolean} [immediately=false] - Whether to animate to the new size or snap immediately. - * @fires OpenSeadragon.TiledImage.event:bounds-change - */ - setWidth: function(width, immediately) { - this._setScale(width, immediately); - }, - - /** - * Sets the TiledImage's height in the world, adjusting the width to match based on aspect ratio. - * @param {Number} height - The new height, in viewport coordinates. - * @param {Boolean} [immediately=false] - Whether to animate to the new size or snap immediately. - * @fires OpenSeadragon.TiledImage.event:bounds-change - */ - setHeight: function(height, immediately) { - this._setScale(height / this.normHeight, immediately); - }, - - /** - * Sets an array of polygons to crop the TiledImage during draw tiles. - * The render function will use the default non-zero winding rule. - * @param {OpenSeadragon.Point[][]} polygons - represented in an array of point object in image coordinates. - * Example format: [ - * [{x: 197, y:172}, {x: 226, y:172}, {x: 226, y:198}, {x: 197, y:198}], // First polygon - * [{x: 328, y:200}, {x: 330, y:199}, {x: 332, y:201}, {x: 329, y:202}] // Second polygon - * [{x: 321, y:201}, {x: 356, y:205}, {x: 341, y:250}] // Third polygon - * ] - */ - setCroppingPolygons: function( polygons ) { - var isXYObject = function(obj) { - return obj instanceof $.Point || (typeof obj.x === 'number' && typeof obj.y === 'number'); - }; - - var objectToSimpleXYObject = function(objs) { - return objs.map(function(obj) { - try { - if (isXYObject(obj)) { - return { x: obj.x, y: obj.y }; - } else { - throw new Error(); - } - } catch(e) { - throw new Error('A Provided cropping polygon point is not supported'); - } - }); - }; - - try { - if (!$.isArray(polygons)) { - throw new Error('Provided cropping polygon is not an array'); - } - this._croppingPolygons = polygons.map(function(polygon){ - return objectToSimpleXYObject(polygon); - }); - this._needsDraw = true; - } catch (e) { - $.console.error('[TiledImage.setCroppingPolygons] Cropping polygon format not supported'); - $.console.error(e); - this.resetCroppingPolygons(); - } - }, - - /** - * Resets the cropping polygons, thus next render will remove all cropping - * polygon effects. - */ - resetCroppingPolygons: function() { - this._croppingPolygons = null; - this._needsDraw = true; - }, - - /** - * Positions and scales the TiledImage to fit in the specified bounds. - * Note: this method fires OpenSeadragon.TiledImage.event:bounds-change - * twice - * @param {OpenSeadragon.Rect} bounds The bounds to fit the image into. - * @param {OpenSeadragon.Placement} [anchor=OpenSeadragon.Placement.CENTER] - * How to anchor the image in the bounds. - * @param {Boolean} [immediately=false] Whether to animate to the new size - * or snap immediately. - * @fires OpenSeadragon.TiledImage.event:bounds-change - */ - fitBounds: function(bounds, anchor, immediately) { - anchor = anchor || $.Placement.CENTER; - var anchorProperties = $.Placement.properties[anchor]; - var aspectRatio = this.contentAspectX; - var xOffset = 0; - var yOffset = 0; - var displayedWidthRatio = 1; - var displayedHeightRatio = 1; - if (this._clip) { - aspectRatio = this._clip.getAspectRatio(); - displayedWidthRatio = this._clip.width / this.source.dimensions.x; - displayedHeightRatio = this._clip.height / this.source.dimensions.y; - if (bounds.getAspectRatio() > aspectRatio) { - xOffset = this._clip.x / this._clip.height * bounds.height; - yOffset = this._clip.y / this._clip.height * bounds.height; - } else { - xOffset = this._clip.x / this._clip.width * bounds.width; - yOffset = this._clip.y / this._clip.width * bounds.width; - } - } - - if (bounds.getAspectRatio() > aspectRatio) { - // We will have margins on the X axis - var height = bounds.height / displayedHeightRatio; - var marginLeft = 0; - if (anchorProperties.isHorizontallyCentered) { - marginLeft = (bounds.width - bounds.height * aspectRatio) / 2; - } else if (anchorProperties.isRight) { - marginLeft = bounds.width - bounds.height * aspectRatio; - } - this.setPosition( - new $.Point(bounds.x - xOffset + marginLeft, bounds.y - yOffset), - immediately); - this.setHeight(height, immediately); - } else { - // We will have margins on the Y axis - var width = bounds.width / displayedWidthRatio; - var marginTop = 0; - if (anchorProperties.isVerticallyCentered) { - marginTop = (bounds.height - bounds.width / aspectRatio) / 2; - } else if (anchorProperties.isBottom) { - marginTop = bounds.height - bounds.width / aspectRatio; - } - this.setPosition( - new $.Point(bounds.x - xOffset, bounds.y - yOffset + marginTop), - immediately); - this.setWidth(width, immediately); - } - }, - - /** - * @returns {OpenSeadragon.Rect|null} The TiledImage's current clip rectangle, - * in image pixels, or null if none. - */ - getClip: function() { - if (this._clip) { - return this._clip.clone(); - } - - return null; - }, - - /** - * @param {OpenSeadragon.Rect|null} newClip - An area, in image pixels, to clip to + * You shouldn't have to create a TiledImage instance directly; get it asynchronously by + * using {@link OpenSeadragon.Viewer#open} or {@link OpenSeadragon.Viewer#addTiledImage} instead. + * @class TiledImage + * @memberof OpenSeadragon + * @extends OpenSeadragon.EventSource + * @classdesc Handles rendering of tiles for an {@link OpenSeadragon.Viewer}. + * A new instance is created for each TileSource opened. + * @param {Object} options - Configuration for this TiledImage. + * @param {OpenSeadragon.TileSource} options.source - The TileSource that defines this TiledImage. + * @param {OpenSeadragon.Viewer} options.viewer - The Viewer that owns this TiledImage. + * @param {OpenSeadragon.TileCache} options.tileCache - The TileCache for this TiledImage to use. + * @param {OpenSeadragon.Drawer} options.drawer - The Drawer for this TiledImage to draw onto. + * @param {OpenSeadragon.ImageLoader} options.imageLoader - The ImageLoader for this TiledImage to use. + * @param {Number} [options.x=0] - Left position, in viewport coordinates. + * @param {Number} [options.y=0] - Top position, in viewport coordinates. + * @param {Number} [options.width=1] - Width, in viewport coordinates. + * @param {Number} [options.height] - Height, in viewport coordinates. + * @param {OpenSeadragon.Rect} [options.fitBounds] The bounds in viewport coordinates + * to fit the image into. If specified, x, y, width and height get ignored. + * @param {OpenSeadragon.Placement} [options.fitBoundsPlacement=OpenSeadragon.Placement.CENTER] + * How to anchor the image in the bounds if options.fitBounds is set. + * @param {OpenSeadragon.Rect} [options.clip] - An area, in image pixels, to clip to * (portions of the image outside of this area will not be visible). Only works on * browsers that support the HTML5 canvas. - * @fires OpenSeadragon.TiledImage.event:clip-change + * @param {Number} [options.springStiffness] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.animationTime] - See {@link OpenSeadragon.Options}. + * @param {Number} [options.minZoomImageRatio] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.wrapHorizontal] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.wrapVertical] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.immediateRender] - See {@link OpenSeadragon.Options}. + * @param {Number} [options.blendTime] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.alwaysBlend] - See {@link OpenSeadragon.Options}. + * @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}. + * @param {Number} [options.smoothTileEdgesMinZoom] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.iOSDevice] - See {@link OpenSeadragon.Options}. + * @param {Number} [options.opacity=1] - Set to draw at proportional opacity. If zero, images will not draw. + * @param {Boolean} [options.preload=false] - Set true to load even when the image is hidden by zero opacity. + * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible + values. + * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. + * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. + * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.ajaxWithCredentials] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.loadTilesWithAjax] + * Whether to load tile data using AJAX requests. + * Defaults to the setting in {@link OpenSeadragon.Options}. + * @param {Object} [options.ajaxHeaders={}] + * A set of headers to include when making tile AJAX requests. */ - setClip: function(newClip) { - $.console.assert(!newClip || newClip instanceof $.Rect, - "[TiledImage.setClip] newClip must be an OpenSeadragon.Rect or null"); - - if (newClip instanceof $.Rect) { - this._clip = newClip.clone(); - } else { - this._clip = null; - } - - this._needsDraw = true; + $.TiledImage = function( options ) { + this._initialized = false; /** - * Raised when the TiledImage's clip is changed. - * @event clip-change - * @memberOf OpenSeadragon.TiledImage - * @type {object} - * @property {OpenSeadragon.TiledImage} eventSource - A reference to the - * TiledImage which raised the event. - * @property {?Object} userData - Arbitrary subscriber-defined object. + * The {@link OpenSeadragon.TileSource} that defines this TiledImage. + * @member {OpenSeadragon.TileSource} source + * @memberof OpenSeadragon.TiledImage# */ - this.raiseEvent('clip-change'); - }, + $.console.assert( options.tileCache, "[TiledImage] options.tileCache is required" ); + $.console.assert( options.drawer, "[TiledImage] options.drawer is required" ); + $.console.assert( options.viewer, "[TiledImage] options.viewer is required" ); + $.console.assert( options.imageLoader, "[TiledImage] options.imageLoader is required" ); + $.console.assert( options.source, "[TiledImage] options.source is required" ); + $.console.assert(!options.clip || options.clip instanceof $.Rect, + "[TiledImage] options.clip must be an OpenSeadragon.Rect if present"); - /** - * @returns {Boolean} Whether the TiledImage should be flipped before rendering. - */ - getFlip: function() { - return this.flipped; - }, + $.EventSource.call( this ); - /** - * @param {Boolean} flip Whether the TiledImage should be flipped before rendering. - * @fires OpenSeadragon.TiledImage.event:bounds-change - */ - setFlip: function(flip) { - this.flipped = flip; - }, + this._tileCache = options.tileCache; + delete options.tileCache; - get flipped(){ - return this._flipped; - }, - set flipped(flipped){ - let changed = this._flipped !== !!flipped; - this._flipped = !!flipped; - if(changed){ - this.update(true); - this._needsDraw = true; - this._raiseBoundsChange(); - } - }, + this._drawer = options.drawer; + delete options.drawer; - get wrapHorizontal(){ - return this._wrapHorizontal; - }, - set wrapHorizontal(wrap){ - let changed = this._wrapHorizontal !== !!wrap; - this._wrapHorizontal = !!wrap; - if(this._initialized && changed){ - this.update(true); - this._needsDraw = true; - // this._raiseBoundsChange(); - } - }, + this._imageLoader = options.imageLoader; + delete options.imageLoader; - get wrapVertical(){ - return this._wrapVertical; - }, - set wrapVertical(wrap){ - let changed = this._wrapVertical !== !!wrap; - this._wrapVertical = !!wrap; - if(this._initialized && changed){ - this.update(true); - this._needsDraw = true; - // this._raiseBoundsChange(); - } - }, - - get debugMode(){ - return this._debugMode; - }, - set debugMode(debug){ - this._debugMode = !!debug; - this._needsDraw = true; - }, - - /** - * @returns {Number} The TiledImage's current opacity. - */ - getOpacity: function() { - return this.opacity; - }, - - /** - * @param {Number} opacity Opacity the tiled image should be drawn at. - * @fires OpenSeadragon.TiledImage.event:opacity-change - */ - setOpacity: function(opacity) { - this.opacity = opacity; - }, - - get opacity() { - return this._opacity; - }, - - set opacity(opacity) { - if (opacity === this.opacity) { - return; + if (options.clip instanceof $.Rect) { + this._clip = options.clip.clone(); } - this._opacity = opacity; - this._needsDraw = true; - /** - * Raised when the TiledImage's opacity is changed. - * @event opacity-change - * @memberOf OpenSeadragon.TiledImage - * @type {object} - * @property {Number} opacity - The new opacity value. - * @property {OpenSeadragon.TiledImage} eventSource - A reference to the - * TiledImage which raised the event. - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.raiseEvent('opacity-change', { - opacity: this.opacity + delete options.clip; + + var x = options.x || 0; + delete options.x; + var y = options.y || 0; + delete options.y; + + // Ratio of zoomable image height to width. + this.normHeight = options.source.dimensions.y / options.source.dimensions.x; + this.contentAspectX = options.source.dimensions.x / options.source.dimensions.y; + + var scale = 1; + if ( options.width ) { + scale = options.width; + delete options.width; + + if ( options.height ) { + $.console.error( "specifying both width and height to a tiledImage is not supported" ); + delete options.height; + } + } else if ( options.height ) { + scale = options.height / this.normHeight; + delete options.height; + } + + var fitBounds = options.fitBounds; + delete options.fitBounds; + var fitBoundsPlacement = options.fitBoundsPlacement || OpenSeadragon.Placement.CENTER; + delete options.fitBoundsPlacement; + + var degrees = options.degrees || 0; + delete options.degrees; + + var ajaxHeaders = options.ajaxHeaders; + delete options.ajaxHeaders; + + $.extend( true, this, { + + //internal state properties + viewer: null, + tilesMatrix: {}, // A '3d' dictionary [level][x][y] --> Tile. + coverage: {}, // A '3d' dictionary [level][x][y] --> Boolean; shows what areas have been drawn. + loadingCoverage: {}, // A '3d' dictionary [level][x][y] --> Boolean; shows what areas are loaded or are being loaded/blended. + lastDrawn: [], // An unordered list of Tiles drawn last frame. + lastResetTime: 0, // Last time for which the tiledImage was reset. + _needsDraw: true, // Does the tiledImage need to be drawn again? + _needsUpdate: true, // Does the tiledImage need to update the viewport again? + _hasOpaqueTile: false, // Do we have even one fully opaque tile? + _tilesLoading: 0, // The number of pending tile requests. + _tilesToDraw: [], // info about the tiles currently in the viewport, two deep: array[level][tile] + _lastDrawn: [], // array of tiles that were last fetched by the drawer + _isBlending: false, // Are any tiles still being blended? + _wasBlending: false, // Were any tiles blending before the last draw? + _isTainted: false, // Has a Tile been found with tainted data? + //configurable settings + springStiffness: $.DEFAULT_SETTINGS.springStiffness, + animationTime: $.DEFAULT_SETTINGS.animationTime, + minZoomImageRatio: $.DEFAULT_SETTINGS.minZoomImageRatio, + wrapHorizontal: $.DEFAULT_SETTINGS.wrapHorizontal, + wrapVertical: $.DEFAULT_SETTINGS.wrapVertical, + immediateRender: $.DEFAULT_SETTINGS.immediateRender, + blendTime: $.DEFAULT_SETTINGS.blendTime, + alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend, + minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio, + smoothTileEdgesMinZoom: $.DEFAULT_SETTINGS.smoothTileEdgesMinZoom, + iOSDevice: $.DEFAULT_SETTINGS.iOSDevice, + debugMode: $.DEFAULT_SETTINGS.debugMode, + crossOriginPolicy: $.DEFAULT_SETTINGS.crossOriginPolicy, + ajaxWithCredentials: $.DEFAULT_SETTINGS.ajaxWithCredentials, + placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, + opacity: $.DEFAULT_SETTINGS.opacity, + preload: $.DEFAULT_SETTINGS.preload, + compositeOperation: $.DEFAULT_SETTINGS.compositeOperation, + subPixelRoundingForTransparency: $.DEFAULT_SETTINGS.subPixelRoundingForTransparency, + maxTilesPerFrame: $.DEFAULT_SETTINGS.maxTilesPerFrame + }, options ); + + this._preload = this.preload; + delete this.preload; + + this._fullyLoaded = false; + + this._xSpring = new $.Spring({ + initial: x, + springStiffness: this.springStiffness, + animationTime: this.animationTime }); - }, - /** - * @returns {Boolean} whether the tiledImage can load its tiles even when it has zero opacity. - */ - getPreload: function() { - return this._preload; - }, + this._ySpring = new $.Spring({ + initial: y, + springStiffness: this.springStiffness, + animationTime: this.animationTime + }); - /** - * Set true to load even when hidden. Set false to block loading when hidden. - */ - setPreload: function(preload) { - this._preload = !!preload; - this._needsDraw = true; - }, + this._scaleSpring = new $.Spring({ + initial: scale, + springStiffness: this.springStiffness, + animationTime: this.animationTime + }); - /** - * Get the rotation of this tiled image in degrees. - * @param {Boolean} [current=false] True for current rotation, false for target. - * @returns {Number} the rotation of this tiled image in degrees. - */ - getRotation: function(current) { - return current ? - this._degreesSpring.current.value : - this._degreesSpring.target.value; - }, + this._degreesSpring = new $.Spring({ + initial: degrees, + springStiffness: this.springStiffness, + animationTime: this.animationTime + }); - /** - * Set the current rotation of this tiled image in degrees. - * @param {Number} degrees the rotation in degrees. - * @param {Boolean} [immediately=false] Whether to animate to the new angle - * or rotate immediately. - * @fires OpenSeadragon.TiledImage.event:bounds-change - */ - setRotation: function(degrees, immediately) { - if (this._degreesSpring.target.value === degrees && - this._degreesSpring.isAtTargetValue()) { - return; + this._updateForScale(); + + if (fitBounds) { + this.fitBounds(fitBounds, fitBoundsPlacement, true); } - if (immediately) { - this._degreesSpring.resetTo(degrees); - } else { - this._degreesSpring.springTo(degrees); - } - this._needsDraw = true; - this._needsUpdate = true; - this._raiseBoundsChange(); - }, - /** - * Get the region of this tiled image that falls within the viewport. - * @returns {OpenSeadragon.Rect} the region of this tiled image that falls within the viewport. - * Returns false for images with opacity==0 unless preload==true - */ - getDrawArea: function(){ + this._ownAjaxHeaders = {}; + this.setAjaxHeaders(ajaxHeaders, false); + this._initialized = true; + }; + + $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.TiledImage.prototype */{ + /** + * @returns {Boolean} Whether the TiledImage needs to be drawn. + */ + needsDraw: function() { + return this._needsDraw; + }, + + /** + * Mark the tiled image as needing to be (re)drawn + */ + redraw: function() { + this._needsDraw = true; + }, + + /** + * @returns {Boolean} Whether all tiles necessary for this TiledImage to draw at the current view have been loaded. + */ + getFullyLoaded: function() { + return this._fullyLoaded; + }, + + // private + _setFullyLoaded: function(flag) { + if (flag === this._fullyLoaded) { + return; + } + + this._fullyLoaded = flag; + + /** + * Fired when the TiledImage's "fully loaded" flag (whether all tiles necessary for this TiledImage + * to draw at the current view have been loaded) changes. + * + * @event fully-loaded-change + * @memberof OpenSeadragon.TiledImage + * @type {object} + * @property {Boolean} fullyLoaded - The new "fully loaded" value. + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('fully-loaded-change', { + fullyLoaded: this._fullyLoaded + }); + }, + + /** + * Clears all tiles and triggers an update on the next call to + * {@link OpenSeadragon.TiledImage#update}. + */ + reset: function() { + this._tileCache.clearTilesFor(this); + this.lastResetTime = $.now(); + this._needsDraw = true; + }, + + /** + * Updates the TiledImage's bounds, animating if needed. Based on the new + * bounds, updates the levels and tiles to be drawn into the viewport. + * @param viewportChanged Whether the viewport changed meaning tiles need to be updated. + * @returns {Boolean} Whether the TiledImage needs to be drawn. + */ + update: function(viewportChanged) { + let xUpdated = this._xSpring.update(); + let yUpdated = this._ySpring.update(); + let scaleUpdated = this._scaleSpring.update(); + let degreesUpdated = this._degreesSpring.update(); + + let updated = (xUpdated || yUpdated || scaleUpdated || degreesUpdated || this._needsUpdate); + + if (updated || viewportChanged || !this._fullyLoaded){ + let fullyLoadedFlag = this._updateLevelsForViewport(); + this._setFullyLoaded(fullyLoadedFlag); + } + + this._needsUpdate = false; + + if (updated) { + this._updateForScale(); + this._raiseBoundsChange(); + this._needsDraw = true; + return true; + } - if( this._opacity === 0 && !this._preload){ return false; - } + }, - var drawArea = this._viewportToTiledImageRectangle( - this.viewport.getBoundsWithMargins(true)); - - if (!this.wrapHorizontal && !this.wrapVertical) { - var tiledImageBounds = this._viewportToTiledImageRectangle( - this.getClippedBounds(true)); - drawArea = drawArea.intersection(tiledImageBounds); - } - - return drawArea; - }, - - /** - * - * @returns {Array} Array of Tiles that make up the current view - */ - getTilesToDraw: function(){ - // start with all the tiles added to this._tilesToDraw during the most recent - // call to this.update. Then update them so the blending and coverage properties - // are updated based on the current time - let tileArray = this._tilesToDraw.flat(); - - // update all tiles, which can change the coverage provided - this._updateTilesInViewport(tileArray); - - // _tilesToDraw might have been updated by the update; refresh it - tileArray = this._tilesToDraw.flat(); - - // mark the tiles as being drawn, so that they won't be discarded from - // the tileCache - tileArray.forEach(tileInfo => { - tileInfo.tile.beingDrawn = true; - }); - this._lastDrawn = tileArray; - return tileArray; - }, - - /** - * Get the point around which this tiled image is rotated - * @private - * @param {Boolean} current True for current rotation point, false for target. - * @returns {OpenSeadragon.Point} - */ - _getRotationPoint: function(current) { - return this.getBoundsNoRotate(current).getCenter(); - }, - - get compositeOperation(){ - return this._compositeOperation; - }, - - set compositeOperation(compositeOperation){ - - if (compositeOperation === this._compositeOperation) { - return; - } - this._compositeOperation = compositeOperation; - this._needsDraw = true; /** - * Raised when the TiledImage's opacity is changed. - * @event composite-operation-change - * @memberOf OpenSeadragon.TiledImage - * @type {object} - * @property {String} compositeOperation - The new compositeOperation value. - * @property {OpenSeadragon.TiledImage} eventSource - A reference to the - * TiledImage which raised the event. - * @property {?Object} userData - Arbitrary subscriber-defined object. + * Mark this TiledImage as having been drawn, so that it will only be drawn + * again if something changes about the image. If the image is still blending, + * this will have no effect. + * @returns {Boolean} whether the item still needs to be drawn due to blending */ - this.raiseEvent('composite-operation-change', { - compositeOperation: this._compositeOperation - }); + setDrawn: function(){ + this._needsDraw = this._isBlending || this._wasBlending; + return this._needsDraw; + }, - }, + /** + * Set the internal _isTainted flag for this TiledImage. Lazy loaded - not + * checked each time a Tile is loaded, but can be set if a consumer of the + * tiles (e.g. a Drawer) discovers a Tile to have tainted data so that further + * checks are not needed and alternative rendering strategies can be used. + * @private + */ + setTainted(isTainted){ + this._isTainted = isTainted; + }, - /** - * @returns {String} The TiledImage's current compositeOperation. - */ - getCompositeOperation: function() { - return this._compositeOperation; - }, + /** + * @private + * @returns {Boolean} whether the TiledImage has been marked as tainted + */ + isTainted(){ + return this._isTainted; + }, - /** - * @param {String} compositeOperation the tiled image should be drawn with this globalCompositeOperation. - * @fires OpenSeadragon.TiledImage.event:composite-operation-change - */ - setCompositeOperation: function(compositeOperation) { - this.compositeOperation = compositeOperation; //invokes setter - }, + /** + * Destroy the TiledImage (unload current loaded tiles). + */ + destroy: function() { + this.reset(); - /** - * Update headers to include when making AJAX requests. - * - * Unless `propagate` is set to false (which is likely only useful in rare circumstances), - * the updated headers are propagated to all tiles and queued image loader jobs. - * - * Note that the rules for merging headers still apply, i.e. headers returned by - * {@link OpenSeadragon.TileSource#getTileAjaxHeaders} take precedence over - * the headers here in the tiled image (`TiledImage.ajaxHeaders`). - * - * @function - * @param {Object} ajaxHeaders Updated AJAX headers, which will be merged over any headers specified in {@link OpenSeadragon.Options}. - * @param {Boolean} [propagate=true] Whether to propagate updated headers to existing tiles and queued image loader jobs. - */ - setAjaxHeaders: function(ajaxHeaders, propagate) { - if (ajaxHeaders === null) { - ajaxHeaders = {}; - } - if (!$.isPlainObject(ajaxHeaders)) { - console.error('[TiledImage.setAjaxHeaders] Ignoring invalid headers, must be a plain object'); - return; - } + if (this.source.destroy) { + this.source.destroy(this.viewer); + } + }, - this._ownAjaxHeaders = ajaxHeaders; - this._updateAjaxHeaders(propagate); - }, + /** + * Get this TiledImage's bounds in viewport coordinates. + * @param {Boolean} [current=false] - Pass true for the current location; + * false for target location. + * @returns {OpenSeadragon.Rect} This TiledImage's bounds in viewport coordinates. + */ + getBounds: function(current) { + return this.getBoundsNoRotate(current) + .rotate(this.getRotation(current), this._getRotationPoint(current)); + }, - /** - * Update headers to include when making AJAX requests. - * - * This function has the same effect as calling {@link OpenSeadragon.TiledImage#setAjaxHeaders}, - * except that the headers for this tiled image do not change. This is especially useful - * for propagating updated headers from {@link OpenSeadragon.TileSource#getTileAjaxHeaders} - * to existing tiles. - * - * @private - * @function - * @param {Boolean} [propagate=true] Whether to propagate updated headers to existing tiles and queued image loader jobs. - */ - _updateAjaxHeaders: function(propagate) { - if (propagate === undefined) { - propagate = true; - } + /** + * Get this TiledImage's bounds in viewport coordinates without taking + * rotation into account. + * @param {Boolean} [current=false] - Pass true for the current location; + * false for target location. + * @returns {OpenSeadragon.Rect} This TiledImage's bounds in viewport coordinates. + */ + getBoundsNoRotate: function(current) { + return current ? + new $.Rect( + this._xSpring.current.value, + this._ySpring.current.value, + this._worldWidthCurrent, + this._worldHeightCurrent) : + new $.Rect( + this._xSpring.target.value, + this._ySpring.target.value, + this._worldWidthTarget, + this._worldHeightTarget); + }, - // merge with viewer's headers - if ($.isPlainObject(this.viewer.ajaxHeaders)) { - this.ajaxHeaders = $.extend({}, this.viewer.ajaxHeaders, this._ownAjaxHeaders); - } else { - this.ajaxHeaders = this._ownAjaxHeaders; - } + // deprecated + getWorldBounds: function() { + $.console.error('[TiledImage.getWorldBounds] is deprecated; use TiledImage.getBounds instead'); + return this.getBounds(); + }, - // propagate header updates to all tiles and queued image loader jobs - if (propagate) { - var numTiles, xMod, yMod, tile; + /** + * Get the bounds of the displayed part of the tiled image. + * @param {Boolean} [current=false] Pass true for the current location, + * false for the target location. + * @returns {$.Rect} The clipped bounds in viewport coordinates. + */ + getClippedBounds: function(current) { + var bounds = this.getBoundsNoRotate(current); + if (this._clip) { + var worldWidth = current ? + this._worldWidthCurrent : this._worldWidthTarget; + var ratio = worldWidth / this.source.dimensions.x; + var clip = this._clip.times(ratio); + bounds = new $.Rect( + bounds.x + clip.x, + bounds.y + clip.y, + clip.width, + clip.height); + } + return bounds.rotate(this.getRotation(current), this._getRotationPoint(current)); + }, - for (var level in this.tilesMatrix) { - numTiles = this.source.getNumTiles(level); + /** + * @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); + if (this.getFlip()) { + bounds.x = Math.max(0, 1 - bounds.x - bounds.width); + } + bounds.x += (x - xMod) / numTiles.x; + bounds.y += (this._worldHeightCurrent / this._worldWidthCurrent) * ((y - yMod) / numTiles.y); + return bounds; + }, - for (var x in this.tilesMatrix[level]) { - xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; + /** + * @returns {OpenSeadragon.Point} This TiledImage's content size, in original pixels. + */ + getContentSize: function() { + return new $.Point(this.source.dimensions.x, this.source.dimensions.y); + }, - for (var y in this.tilesMatrix[level][x]) { - yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; - tile = this.tilesMatrix[level][x][y]; + /** + * @returns {OpenSeadragon.Point} The TiledImage's content size, in window coordinates. + */ + getSizeInWindowCoordinates: function() { + var topLeft = this.imageToWindowCoordinates(new $.Point(0, 0)); + var bottomRight = this.imageToWindowCoordinates(this.getContentSize()); + return new $.Point(bottomRight.x - topLeft.x, bottomRight.y - topLeft.y); + }, - tile.loadWithAjax = this.loadTilesWithAjax; - if (tile.loadWithAjax) { - var tileAjaxHeaders = this.source.getTileAjaxHeaders( level, xMod, yMod ); - tile.ajaxHeaders = $.extend({}, this.ajaxHeaders, tileAjaxHeaders); + // private + _viewportToImageDelta: function( viewerX, viewerY, current ) { + var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value); + return new $.Point(viewerX * (this.source.dimensions.x / scale), + viewerY * ((this.source.dimensions.y * this.contentAspectX) / scale)); + }, + + /** + * Translates from OpenSeadragon viewer coordinate system to image coordinate system. + * This method can be called either by passing X,Y coordinates or an {@link OpenSeadragon.Point}. + * @param {Number|OpenSeadragon.Point} viewerX - The X coordinate or point in viewport coordinate system. + * @param {Number} [viewerY] - The Y coordinate in viewport coordinate system. + * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. + * @returns {OpenSeadragon.Point} A point representing the coordinates in the image. + */ + viewportToImageCoordinates: function(viewerX, viewerY, current) { + var point; + if (viewerX instanceof $.Point) { + //they passed a point instead of individual components + current = viewerY; + point = viewerX; + } else { + point = new $.Point(viewerX, viewerY); + } + + point = point.rotate(-this.getRotation(current), this._getRotationPoint(current)); + return current ? + this._viewportToImageDelta( + point.x - this._xSpring.current.value, + point.y - this._ySpring.current.value) : + this._viewportToImageDelta( + point.x - this._xSpring.target.value, + point.y - this._ySpring.target.value); + }, + + // private + _imageToViewportDelta: function( imageX, imageY, current ) { + var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value); + return new $.Point((imageX / this.source.dimensions.x) * scale, + (imageY / this.source.dimensions.y / this.contentAspectX) * scale); + }, + + /** + * Translates from image coordinate system to OpenSeadragon viewer coordinate system + * This method can be called either by passing X,Y coordinates or an {@link OpenSeadragon.Point}. + * @param {Number|OpenSeadragon.Point} imageX - The X coordinate or point in image coordinate system. + * @param {Number} [imageY] - The Y coordinate in image coordinate system. + * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. + * @returns {OpenSeadragon.Point} A point representing the coordinates in the viewport. + */ + imageToViewportCoordinates: function(imageX, imageY, current) { + if (imageX instanceof $.Point) { + //they passed a point instead of individual components + current = imageY; + imageY = imageX.y; + imageX = imageX.x; + } + + var point = this._imageToViewportDelta(imageX, imageY, current); + if (current) { + point.x += this._xSpring.current.value; + point.y += this._ySpring.current.value; + } else { + point.x += this._xSpring.target.value; + point.y += this._ySpring.target.value; + } + + return point.rotate(this.getRotation(current), this._getRotationPoint(current)); + }, + + /** + * Translates from a rectangle which describes a portion of the image in + * pixel coordinates to OpenSeadragon viewport rectangle coordinates. + * This method can be called either by passing X,Y,width,height or an {@link OpenSeadragon.Rect}. + * @param {Number|OpenSeadragon.Rect} imageX - The left coordinate or rectangle in image coordinate system. + * @param {Number} [imageY] - The top coordinate in image coordinate system. + * @param {Number} [pixelWidth] - The width in pixel of the rectangle. + * @param {Number} [pixelHeight] - The height in pixel of the rectangle. + * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. + * @returns {OpenSeadragon.Rect} A rect representing the coordinates in the viewport. + */ + imageToViewportRectangle: function(imageX, imageY, pixelWidth, pixelHeight, current) { + var rect = imageX; + if (rect instanceof $.Rect) { + //they passed a rect instead of individual components + current = imageY; + } else { + rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight); + } + + var coordA = this.imageToViewportCoordinates(rect.getTopLeft(), current); + var coordB = this._imageToViewportDelta(rect.width, rect.height, current); + + return new $.Rect( + coordA.x, + coordA.y, + coordB.x, + coordB.y, + rect.degrees + this.getRotation(current) + ); + }, + + /** + * Translates from a rectangle which describes a portion of + * the viewport in point coordinates to image rectangle coordinates. + * This method can be called either by passing X,Y,width,height or an {@link OpenSeadragon.Rect}. + * @param {Number|OpenSeadragon.Rect} viewerX - The left coordinate or rectangle in viewport coordinate system. + * @param {Number} [viewerY] - The top coordinate in viewport coordinate system. + * @param {Number} [pointWidth] - The width in viewport coordinate system. + * @param {Number} [pointHeight] - The height in viewport coordinate system. + * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. + * @returns {OpenSeadragon.Rect} A rect representing the coordinates in the image. + */ + viewportToImageRectangle: function( viewerX, viewerY, pointWidth, pointHeight, current ) { + var rect = viewerX; + if (viewerX instanceof $.Rect) { + //they passed a rect instead of individual components + current = viewerY; + } else { + rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight); + } + + var coordA = this.viewportToImageCoordinates(rect.getTopLeft(), current); + var coordB = this._viewportToImageDelta(rect.width, rect.height, current); + + return new $.Rect( + coordA.x, + coordA.y, + coordB.x, + coordB.y, + rect.degrees - this.getRotation(current) + ); + }, + + /** + * Convert pixel coordinates relative to the viewer element to image + * coordinates. + * @param {OpenSeadragon.Point} pixel + * @returns {OpenSeadragon.Point} + */ + viewerElementToImageCoordinates: function( pixel ) { + var point = this.viewport.pointFromPixel( pixel, true ); + return this.viewportToImageCoordinates( point ); + }, + + /** + * Convert pixel coordinates relative to the image to + * viewer element coordinates. + * @param {OpenSeadragon.Point} pixel + * @returns {OpenSeadragon.Point} + */ + imageToViewerElementCoordinates: function( pixel ) { + var point = this.imageToViewportCoordinates( pixel ); + return this.viewport.pixelFromPoint( point, true ); + }, + + /** + * Convert pixel coordinates relative to the window to image coordinates. + * @param {OpenSeadragon.Point} pixel + * @returns {OpenSeadragon.Point} + */ + windowToImageCoordinates: function( pixel ) { + var viewerCoordinates = pixel.minus( + OpenSeadragon.getElementPosition( this.viewer.element )); + return this.viewerElementToImageCoordinates( viewerCoordinates ); + }, + + /** + * Convert image coordinates to pixel coordinates relative to the window. + * @param {OpenSeadragon.Point} pixel + * @returns {OpenSeadragon.Point} + */ + imageToWindowCoordinates: function( pixel ) { + var viewerCoordinates = this.imageToViewerElementCoordinates( pixel ); + return viewerCoordinates.plus( + OpenSeadragon.getElementPosition( this.viewer.element )); + }, + + // private + // Convert rectangle in viewport coordinates to this tiled image point + // coordinates (x in [0, 1] and y in [0, aspectRatio]) + _viewportToTiledImageRectangle: function(rect) { + var scale = this._scaleSpring.current.value; + rect = rect.rotate(-this.getRotation(true), this._getRotationPoint(true)); + return new $.Rect( + (rect.x - this._xSpring.current.value) / scale, + (rect.y - this._ySpring.current.value) / scale, + rect.width / scale, + rect.height / scale, + rect.degrees); + }, + + /** + * Convert a viewport zoom to an image zoom. + * Image zoom: ratio of the original image size to displayed image size. + * 1 means original image size, 0.5 half size... + * Viewport zoom: ratio of the displayed image's width to viewport's width. + * 1 means identical width, 2 means image's width is twice the viewport's width... + * @function + * @param {Number} viewportZoom The viewport zoom + * @returns {Number} imageZoom The image zoom + */ + viewportToImageZoom: function( viewportZoom ) { + var ratio = this._scaleSpring.current.value * + this.viewport._containerInnerSize.x / this.source.dimensions.x; + return ratio * viewportZoom; + }, + + /** + * Convert an image zoom to a viewport zoom. + * Image zoom: ratio of the original image size to displayed image size. + * 1 means original image size, 0.5 half size... + * Viewport zoom: ratio of the displayed image's width to viewport's width. + * 1 means identical width, 2 means image's width is twice the viewport's width... + * Note: not accurate with multi-image. + * @function + * @param {Number} imageZoom The image zoom + * @returns {Number} viewportZoom The viewport zoom + */ + imageToViewportZoom: function( imageZoom ) { + var ratio = this._scaleSpring.current.value * + this.viewport._containerInnerSize.x / this.source.dimensions.x; + return imageZoom / ratio; + }, + + /** + * Sets the TiledImage's position in the world. + * @param {OpenSeadragon.Point} position - The new position, in viewport coordinates. + * @param {Boolean} [immediately=false] - Whether to animate to the new position or snap immediately. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + setPosition: function(position, immediately) { + var sameTarget = (this._xSpring.target.value === position.x && + this._ySpring.target.value === position.y); + + if (immediately) { + if (sameTarget && this._xSpring.current.value === position.x && + this._ySpring.current.value === position.y) { + return; + } + + this._xSpring.resetTo(position.x); + this._ySpring.resetTo(position.y); + this._needsDraw = true; + this._needsUpdate = true; + } else { + if (sameTarget) { + return; + } + + this._xSpring.springTo(position.x); + this._ySpring.springTo(position.y); + this._needsDraw = true; + this._needsUpdate = true; + } + + if (!sameTarget) { + this._raiseBoundsChange(); + } + }, + + /** + * Sets the TiledImage's width in the world, adjusting the height to match based on aspect ratio. + * @param {Number} width - The new width, in viewport coordinates. + * @param {Boolean} [immediately=false] - Whether to animate to the new size or snap immediately. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + setWidth: function(width, immediately) { + this._setScale(width, immediately); + }, + + /** + * Sets the TiledImage's height in the world, adjusting the width to match based on aspect ratio. + * @param {Number} height - The new height, in viewport coordinates. + * @param {Boolean} [immediately=false] - Whether to animate to the new size or snap immediately. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + setHeight: function(height, immediately) { + this._setScale(height / this.normHeight, immediately); + }, + + /** + * Sets an array of polygons to crop the TiledImage during draw tiles. + * The render function will use the default non-zero winding rule. + * @param {OpenSeadragon.Point[][]} polygons - represented in an array of point object in image coordinates. + * Example format: [ + * [{x: 197, y:172}, {x: 226, y:172}, {x: 226, y:198}, {x: 197, y:198}], // First polygon + * [{x: 328, y:200}, {x: 330, y:199}, {x: 332, y:201}, {x: 329, y:202}] // Second polygon + * [{x: 321, y:201}, {x: 356, y:205}, {x: 341, y:250}] // Third polygon + * ] + */ + setCroppingPolygons: function( polygons ) { + var isXYObject = function(obj) { + return obj instanceof $.Point || (typeof obj.x === 'number' && typeof obj.y === 'number'); + }; + + var objectToSimpleXYObject = function(objs) { + return objs.map(function(obj) { + try { + if (isXYObject(obj)) { + return { x: obj.x, y: obj.y }; } else { - tile.ajaxHeaders = null; + throw new Error(); } + } catch(e) { + throw new Error('A Provided cropping polygon point is not supported'); + } + }); + }; + + try { + if (!$.isArray(polygons)) { + throw new Error('Provided cropping polygon is not an array'); + } + this._croppingPolygons = polygons.map(function(polygon){ + return objectToSimpleXYObject(polygon); + }); + this._needsDraw = true; + } catch (e) { + $.console.error('[TiledImage.setCroppingPolygons] Cropping polygon format not supported'); + $.console.error(e); + this.resetCroppingPolygons(); + } + }, + + /** + * Resets the cropping polygons, thus next render will remove all cropping + * polygon effects. + */ + resetCroppingPolygons: function() { + this._croppingPolygons = null; + this._needsDraw = true; + }, + + /** + * Positions and scales the TiledImage to fit in the specified bounds. + * Note: this method fires OpenSeadragon.TiledImage.event:bounds-change + * twice + * @param {OpenSeadragon.Rect} bounds The bounds to fit the image into. + * @param {OpenSeadragon.Placement} [anchor=OpenSeadragon.Placement.CENTER] + * How to anchor the image in the bounds. + * @param {Boolean} [immediately=false] Whether to animate to the new size + * or snap immediately. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + fitBounds: function(bounds, anchor, immediately) { + anchor = anchor || $.Placement.CENTER; + var anchorProperties = $.Placement.properties[anchor]; + var aspectRatio = this.contentAspectX; + var xOffset = 0; + var yOffset = 0; + var displayedWidthRatio = 1; + var displayedHeightRatio = 1; + if (this._clip) { + aspectRatio = this._clip.getAspectRatio(); + displayedWidthRatio = this._clip.width / this.source.dimensions.x; + displayedHeightRatio = this._clip.height / this.source.dimensions.y; + if (bounds.getAspectRatio() > aspectRatio) { + xOffset = this._clip.x / this._clip.height * bounds.height; + yOffset = this._clip.y / this._clip.height * bounds.height; + } else { + xOffset = this._clip.x / this._clip.width * bounds.width; + yOffset = this._clip.y / this._clip.width * bounds.width; + } + } + + if (bounds.getAspectRatio() > aspectRatio) { + // We will have margins on the X axis + var height = bounds.height / displayedHeightRatio; + var marginLeft = 0; + if (anchorProperties.isHorizontallyCentered) { + marginLeft = (bounds.width - bounds.height * aspectRatio) / 2; + } else if (anchorProperties.isRight) { + marginLeft = bounds.width - bounds.height * aspectRatio; + } + this.setPosition( + new $.Point(bounds.x - xOffset + marginLeft, bounds.y - yOffset), + immediately); + this.setHeight(height, immediately); + } else { + // We will have margins on the Y axis + var width = bounds.width / displayedWidthRatio; + var marginTop = 0; + if (anchorProperties.isVerticallyCentered) { + marginTop = (bounds.height - bounds.width / aspectRatio) / 2; + } else if (anchorProperties.isBottom) { + marginTop = bounds.height - bounds.width / aspectRatio; + } + this.setPosition( + new $.Point(bounds.x - xOffset, bounds.y - yOffset + marginTop), + immediately); + this.setWidth(width, immediately); + } + }, + + /** + * @returns {OpenSeadragon.Rect|null} The TiledImage's current clip rectangle, + * in image pixels, or null if none. + */ + getClip: function() { + if (this._clip) { + return this._clip.clone(); + } + + return null; + }, + + /** + * @param {OpenSeadragon.Rect|null} newClip - An area, in image pixels, to clip to + * (portions of the image outside of this area will not be visible). Only works on + * browsers that support the HTML5 canvas. + * @fires OpenSeadragon.TiledImage.event:clip-change + */ + setClip: function(newClip) { + $.console.assert(!newClip || newClip instanceof $.Rect, + "[TiledImage.setClip] newClip must be an OpenSeadragon.Rect or null"); + + if (newClip instanceof $.Rect) { + this._clip = newClip.clone(); + } else { + this._clip = null; + } + + this._needsDraw = true; + /** + * Raised when the TiledImage's clip is changed. + * @event clip-change + * @memberOf OpenSeadragon.TiledImage + * @type {object} + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the + * TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('clip-change'); + }, + + /** + * @returns {Boolean} Whether the TiledImage should be flipped before rendering. + */ + getFlip: function() { + 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; + }, + + get flipped(){ + return this._flipped; + }, + set flipped(flipped){ + let changed = this._flipped !== !!flipped; + this._flipped = !!flipped; + if(changed){ + this.update(true); + this._needsDraw = true; + this._raiseBoundsChange(); + } + }, + + get wrapHorizontal(){ + return this._wrapHorizontal; + }, + set wrapHorizontal(wrap){ + let changed = this._wrapHorizontal !== !!wrap; + this._wrapHorizontal = !!wrap; + if(this._initialized && changed){ + this.update(true); + this._needsDraw = true; + // this._raiseBoundsChange(); + } + }, + + get wrapVertical(){ + return this._wrapVertical; + }, + set wrapVertical(wrap){ + let changed = this._wrapVertical !== !!wrap; + this._wrapVertical = !!wrap; + if(this._initialized && changed){ + this.update(true); + this._needsDraw = true; + // this._raiseBoundsChange(); + } + }, + + get debugMode(){ + return this._debugMode; + }, + set debugMode(debug){ + this._debugMode = !!debug; + this._needsDraw = true; + }, + + /** + * @returns {Number} The TiledImage's current opacity. + */ + getOpacity: function() { + return this.opacity; + }, + + /** + * @param {Number} opacity Opacity the tiled image should be drawn at. + * @fires OpenSeadragon.TiledImage.event:opacity-change + */ + setOpacity: function(opacity) { + this.opacity = opacity; + }, + + get opacity() { + return this._opacity; + }, + + set opacity(opacity) { + if (opacity === this.opacity) { + return; + } + + this._opacity = opacity; + this._needsDraw = true; + /** + * Raised when the TiledImage's opacity is changed. + * @event opacity-change + * @memberOf OpenSeadragon.TiledImage + * @type {object} + * @property {Number} opacity - The new opacity value. + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the + * TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('opacity-change', { + opacity: this.opacity + }); + }, + + /** + * @returns {Boolean} whether the tiledImage can load its tiles even when it has zero opacity. + */ + getPreload: function() { + return this._preload; + }, + + /** + * Set true to load even when hidden. Set false to block loading when hidden. + */ + setPreload: function(preload) { + this._preload = !!preload; + this._needsDraw = true; + }, + + /** + * Get the rotation of this tiled image in degrees. + * @param {Boolean} [current=false] True for current rotation, false for target. + * @returns {Number} the rotation of this tiled image in degrees. + */ + getRotation: function(current) { + return current ? + this._degreesSpring.current.value : + this._degreesSpring.target.value; + }, + + /** + * Set the current rotation of this tiled image in degrees. + * @param {Number} degrees the rotation in degrees. + * @param {Boolean} [immediately=false] Whether to animate to the new angle + * or rotate immediately. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + setRotation: function(degrees, immediately) { + if (this._degreesSpring.target.value === degrees && + this._degreesSpring.isAtTargetValue()) { + return; + } + if (immediately) { + this._degreesSpring.resetTo(degrees); + } else { + this._degreesSpring.springTo(degrees); + } + this._needsDraw = true; + this._needsUpdate = true; + this._raiseBoundsChange(); + }, + + /** + * Get the region of this tiled image that falls within the viewport. + * @returns {OpenSeadragon.Rect} the region of this tiled image that falls within the viewport. + * Returns false for images with opacity==0 unless preload==true + */ + getDrawArea: function(){ + + if( this._opacity === 0 && !this._preload){ + return false; + } + + var drawArea = this._viewportToTiledImageRectangle( + this.viewport.getBoundsWithMargins(true)); + + if (!this.wrapHorizontal && !this.wrapVertical) { + var tiledImageBounds = this._viewportToTiledImageRectangle( + this.getClippedBounds(true)); + drawArea = drawArea.intersection(tiledImageBounds); + } + + return drawArea; + }, + + /** + * + * @returns {Array} Array of Tiles that make up the current view + */ + getTilesToDraw: function(){ + // start with all the tiles added to this._tilesToDraw during the most recent + // call to this.update. Then update them so the blending and coverage properties + // are updated based on the current time + let tileArray = this._tilesToDraw.flat(); + + // update all tiles, which can change the coverage provided + this._updateTilesInViewport(tileArray); + + // _tilesToDraw might have been updated by the update; refresh it + tileArray = this._tilesToDraw.flat(); + + // mark the tiles as being drawn, so that they won't be discarded from + // the tileCache + tileArray.forEach(tileInfo => { + tileInfo.tile.beingDrawn = true; + }); + this._lastDrawn = tileArray; + return tileArray; + }, + + /** + * Get the point around which this tiled image is rotated + * @private + * @param {Boolean} current True for current rotation point, false for target. + * @returns {OpenSeadragon.Point} + */ + _getRotationPoint: function(current) { + return this.getBoundsNoRotate(current).getCenter(); + }, + + get compositeOperation(){ + return this._compositeOperation; + }, + + set compositeOperation(compositeOperation){ + + if (compositeOperation === this._compositeOperation) { + return; + } + this._compositeOperation = compositeOperation; + this._needsDraw = true; + /** + * Raised when the TiledImage's opacity is changed. + * @event composite-operation-change + * @memberOf OpenSeadragon.TiledImage + * @type {object} + * @property {String} compositeOperation - The new compositeOperation value. + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the + * TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('composite-operation-change', { + compositeOperation: this._compositeOperation + }); + + }, + + /** + * @returns {String} The TiledImage's current compositeOperation. + */ + getCompositeOperation: function() { + return this._compositeOperation; + }, + + /** + * @param {String} compositeOperation the tiled image should be drawn with this globalCompositeOperation. + * @fires OpenSeadragon.TiledImage.event:composite-operation-change + */ + setCompositeOperation: function(compositeOperation) { + this.compositeOperation = compositeOperation; //invokes setter + }, + + /** + * Update headers to include when making AJAX requests. + * + * Unless `propagate` is set to false (which is likely only useful in rare circumstances), + * the updated headers are propagated to all tiles and queued image loader jobs. + * + * Note that the rules for merging headers still apply, i.e. headers returned by + * {@link OpenSeadragon.TileSource#getTileAjaxHeaders} take precedence over + * the headers here in the tiled image (`TiledImage.ajaxHeaders`). + * + * @function + * @param {Object} ajaxHeaders Updated AJAX headers, which will be merged over any headers specified in {@link OpenSeadragon.Options}. + * @param {Boolean} [propagate=true] Whether to propagate updated headers to existing tiles and queued image loader jobs. + */ + setAjaxHeaders: function(ajaxHeaders, propagate) { + if (ajaxHeaders === null) { + ajaxHeaders = {}; + } + if (!$.isPlainObject(ajaxHeaders)) { + console.error('[TiledImage.setAjaxHeaders] Ignoring invalid headers, must be a plain object'); + return; + } + + this._ownAjaxHeaders = ajaxHeaders; + this._updateAjaxHeaders(propagate); + }, + + /** + * Update headers to include when making AJAX requests. + * + * This function has the same effect as calling {@link OpenSeadragon.TiledImage#setAjaxHeaders}, + * except that the headers for this tiled image do not change. This is especially useful + * for propagating updated headers from {@link OpenSeadragon.TileSource#getTileAjaxHeaders} + * to existing tiles. + * + * @private + * @function + * @param {Boolean} [propagate=true] Whether to propagate updated headers to existing tiles and queued image loader jobs. + */ + _updateAjaxHeaders: function(propagate) { + if (propagate === undefined) { + propagate = true; + } + + // merge with viewer's headers + if ($.isPlainObject(this.viewer.ajaxHeaders)) { + this.ajaxHeaders = $.extend({}, this.viewer.ajaxHeaders, this._ownAjaxHeaders); + } else { + this.ajaxHeaders = this._ownAjaxHeaders; + } + + // propagate header updates to all tiles and queued image loader jobs + if (propagate) { + var numTiles, xMod, yMod, tile; + + for (var level in this.tilesMatrix) { + numTiles = this.source.getNumTiles(level); + + for (var x in this.tilesMatrix[level]) { + xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; + + for (var y in this.tilesMatrix[level][x]) { + yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; + tile = this.tilesMatrix[level][x][y]; + + tile.loadWithAjax = this.loadTilesWithAjax; + if (tile.loadWithAjax) { + var tileAjaxHeaders = this.source.getTileAjaxHeaders( level, xMod, yMod ); + tile.ajaxHeaders = $.extend({}, this.ajaxHeaders, tileAjaxHeaders); + } else { + tile.ajaxHeaders = null; + } + } + } + } + + for (var i = 0; i < this._imageLoader.jobQueue.length; i++) { + var job = this._imageLoader.jobQueue[i]; + job.loadWithAjax = job.tile.loadWithAjax; + job.ajaxHeaders = job.tile.loadWithAjax ? job.tile.ajaxHeaders : null; + } + } + }, + + // private + _setScale: function(scale, immediately) { + var sameTarget = (this._scaleSpring.target.value === scale); + if (immediately) { + if (sameTarget && this._scaleSpring.current.value === scale) { + return; + } + + this._scaleSpring.resetTo(scale); + this._updateForScale(); + this._needsDraw = true; + this._needsUpdate = true; + } else { + if (sameTarget) { + return; + } + + this._scaleSpring.springTo(scale); + this._updateForScale(); + this._needsDraw = true; + this._needsUpdate = true; + } + + if (!sameTarget) { + this._raiseBoundsChange(); + } + }, + + // private + _updateForScale: function() { + this._worldWidthTarget = this._scaleSpring.target.value; + this._worldHeightTarget = this.normHeight * this._scaleSpring.target.value; + this._worldWidthCurrent = this._scaleSpring.current.value; + this._worldHeightCurrent = this.normHeight * this._scaleSpring.current.value; + }, + + // private + _raiseBoundsChange: function() { + /** + * Raised when the TiledImage's bounds are changed. + * Note that this event is triggered only when the animation target is changed; + * not for every frame of animation. + * @event bounds-change + * @memberOf OpenSeadragon.TiledImage + * @type {object} + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the + * TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('bounds-change'); + }, + + // private + _isBottomItem: function() { + return this.viewer.world.getItemAt(0) === this; + }, + + // private + _getLevelsInterval: function() { + var lowestLevel = Math.max( + this.source.minLevel, + Math.floor(Math.log(this.minZoomImageRatio) / Math.log(2)) + ); + var currentZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( + this.source.getPixelRatio(0), true).x * + this._scaleSpring.current.value; + var highestLevel = Math.min( + Math.abs(this.source.maxLevel), + Math.abs(Math.floor( + Math.log(currentZeroRatio / this.minPixelRatio) / Math.log(2) + )) + ); + + // Calculations for the interval of levels to draw + // can return invalid intervals; fix that here if necessary + highestLevel = Math.max(highestLevel, this.source.minLevel || 0); + lowestLevel = Math.min(lowestLevel, highestLevel); + return { + lowestLevel: lowestLevel, + highestLevel: highestLevel + }; + }, + + // returns boolean flag of whether the image should be marked as fully loaded + _updateLevelsForViewport: function(){ + var levelsInterval = this._getLevelsInterval(); + var lowestLevel = levelsInterval.lowestLevel; // the lowest level we should draw at our current zoom + var highestLevel = levelsInterval.highestLevel; // the highest level we should draw at our current zoom + var bestTiles = []; + var drawArea = this.getDrawArea(); + var currentTime = $.now(); + + // reset each tile's beingDrawn flag + this._lastDrawn.forEach(tileinfo => { + tileinfo.tile.beingDrawn = false; + }); + // clear the list of tiles to draw + this._tilesToDraw = []; + this._tilesLoading = 0; + this.loadingCoverage = {}; + + if(!drawArea){ + this._needsDraw = false; + return this._fullyLoaded; + } + + // make a list of levels to use for the current zoom level + var levelList = new Array(highestLevel - lowestLevel + 1); + // go from highest to lowest resolution + for(let i = 0, level = highestLevel; level >= lowestLevel; level--, i++){ + levelList[i] = level; + } + + // if a single-tile level is loaded, add that to the end of the list + // as a fallback to use during zooming out, until a lower-res tile is + // loaded + for(let level = highestLevel + 1; level <= this.source.maxLevel; level++){ + var tile = ( + this.tilesMatrix[level] && + this.tilesMatrix[level][0] && + this.tilesMatrix[level][0][0] + ); + if(tile && tile.isBottomMost && tile.isRightMost && tile.loaded){ + levelList.push(level); + break; + } + } + + + // Update any level that will be drawn. + // We are iterating from highest resolution to lowest resolution + // Once a level fully covers the viewport the loop is halted and + // lower-resolution levels are skipped + for (let i = 0; i < levelList.length; i++) { + let level = levelList[i]; + + var currentRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( + this.source.getPixelRatio(level), + true + ).x * this._scaleSpring.current.value; + + var targetRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( + this.source.getPixelRatio(level), + false + ).x * this._scaleSpring.current.value; + + var targetZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( + this.source.getPixelRatio( + Math.max( + this.source.getClosestLevel(), + 0 + ) + ), + false + ).x * this._scaleSpring.current.value; + + var optimalRatio = this.immediateRender ? 1 : targetZeroRatio; + var levelOpacity = Math.min(1, (currentRenderPixelRatio - 0.5) / 0.5); + var levelVisibility = optimalRatio / Math.abs( + optimalRatio - targetRenderPixelRatio + ); + + // Update the level and keep track of 'best' tiles to load + var result = this._updateLevel( + level, + levelOpacity, + levelVisibility, + drawArea, + currentTime, + bestTiles + ); + + bestTiles = result.bestTiles; + var tiles = result.updatedTiles.filter(tile => tile.loaded); + var makeTileInfoObject = (function(level, levelOpacity, currentTime){ + return function(tile){ + return { + tile: tile, + level: level, + levelOpacity: levelOpacity, + currentTime: currentTime + }; + }; + })(level, levelOpacity, currentTime); + + this._tilesToDraw[level] = tiles.map(makeTileInfoObject); + + // Stop the loop if lower-res tiles would all be covered by + // already drawn tiles + if (this._providesCoverage(this.coverage, level)) { + break; + } + } + + + // Load the new 'best' n tiles + if (bestTiles && bestTiles.length > 0) { + bestTiles.forEach(function (tile) { + if (tile && !tile.context2D) { + this._loadTile(tile, currentTime); + } + }, this); + + this._needsDraw = true; + return false; + } else { + return this._tilesLoading === 0; + } + + // Update + + }, + + /** + * Update all tiles that contribute to the current view + * @private + * + */ + _updateTilesInViewport: function(tiles) { + let currentTime = $.now(); + let _this = this; + this._tilesLoading = 0; + this._wasBlending = this._isBlending; + this._isBlending = false; + this.loadingCoverage = {}; + let lowestLevel = tiles.length ? tiles[0].level : 0; + + let drawArea = this.getDrawArea(); + if(!drawArea){ + return; + } + + function updateTile(info){ + let tile = info.tile; + if(tile && tile.loaded){ + let tileIsBlending = _this._blendTile( + tile, + tile.x, + tile.y, + info.level, + info.levelOpacity, + currentTime, + lowestLevel + ); + _this._isBlending = _this._isBlending || tileIsBlending; + _this._needsDraw = _this._needsDraw || tileIsBlending || _this._wasBlending; + } + } + + // Update each tile in the list of tiles. As the tiles are updated, + // the coverage provided is also updated. If a level provides coverage + // as part of this process, discard tiles from lower levels + let level = 0; + for(let i = 0; i < tiles.length; i++){ + let tile = tiles[i]; + updateTile(tile); + if(this._providesCoverage(this.coverage, tile.level)){ + level = Math.max(level, tile.level); + } + } + if(level > 0){ + for( let levelKey in this._tilesToDraw ){ + if( levelKey < level ){ + delete this._tilesToDraw[levelKey]; } } } - for (var i = 0; i < this._imageLoader.jobQueue.length; i++) { - var job = this._imageLoader.jobQueue[i]; - job.loadWithAjax = job.tile.loadWithAjax; - job.ajaxHeaders = job.tile.loadWithAjax ? job.tile.ajaxHeaders : null; - } - } - }, + }, - // private - _setScale: function(scale, immediately) { - var sameTarget = (this._scaleSpring.target.value === scale); - if (immediately) { - if (sameTarget && this._scaleSpring.current.value === scale) { - return; - } - - this._scaleSpring.resetTo(scale); - this._updateForScale(); - this._needsDraw = true; - this._needsUpdate = true; - } else { - if (sameTarget) { - return; - } - - this._scaleSpring.springTo(scale); - this._updateForScale(); - this._needsDraw = true; - this._needsUpdate = true; - } - - if (!sameTarget) { - this._raiseBoundsChange(); - } - }, - - // private - _updateForScale: function() { - this._worldWidthTarget = this._scaleSpring.target.value; - this._worldHeightTarget = this.normHeight * this._scaleSpring.target.value; - this._worldWidthCurrent = this._scaleSpring.current.value; - this._worldHeightCurrent = this.normHeight * this._scaleSpring.current.value; - }, - - // private - _raiseBoundsChange: function() { /** - * Raised when the TiledImage's bounds are changed. - * Note that this event is triggered only when the animation target is changed; - * not for every frame of animation. - * @event bounds-change - * @memberOf OpenSeadragon.TiledImage - * @type {object} - * @property {OpenSeadragon.TiledImage} eventSource - A reference to the - * TiledImage which raised the event. - * @property {?Object} userData - Arbitrary subscriber-defined object. + * Updates the opacity of a tile according to the time it has been on screen + * to perform a fade-in. + * Updates coverage once a tile is fully opaque. + * Returns whether the fade-in has completed. + * @private + * + * @param {OpenSeadragon.Tile} tile + * @param {Number} x + * @param {Number} y + * @param {Number} level + * @param {Number} levelOpacity + * @param {Number} currentTime + * @param {Boolean} lowestLevel + * @returns {Boolean} true if blending did not yet finish */ - this.raiseEvent('bounds-change'); - }, + _blendTile: function(tile, x, y, level, levelOpacity, currentTime, lowestLevel ){ + let blendTimeMillis = 1000 * this.blendTime, + deltaTime, + opacity; - // private - _isBottomItem: function() { - return this.viewer.world.getItemAt(0) === this; - }, - - // private - _getLevelsInterval: function() { - var lowestLevel = Math.max( - this.source.minLevel, - Math.floor(Math.log(this.minZoomImageRatio) / Math.log(2)) - ); - var currentZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( - this.source.getPixelRatio(0), true).x * - this._scaleSpring.current.value; - var highestLevel = Math.min( - Math.abs(this.source.maxLevel), - Math.abs(Math.floor( - Math.log(currentZeroRatio / this.minPixelRatio) / Math.log(2) - )) - ); - - // Calculations for the interval of levels to draw - // can return invalid intervals; fix that here if necessary - highestLevel = Math.max(highestLevel, this.source.minLevel || 0); - lowestLevel = Math.min(lowestLevel, highestLevel); - return { - lowestLevel: lowestLevel, - highestLevel: highestLevel - }; - }, - - // returns boolean flag of whether the image should be marked as fully loaded - _updateLevelsForViewport: function(){ - var levelsInterval = this._getLevelsInterval(); - var lowestLevel = levelsInterval.lowestLevel; - var highestLevel = levelsInterval.highestLevel; - var bestTiles = []; - var haveDrawn = false; - var drawArea = this.getDrawArea(); - var currentTime = $.now(); - - // reset each tile's beingDrawn flag - this._lastDrawn.forEach(tileinfo => { - tileinfo.tile.beingDrawn = false; - }); - // clear the list of tiles to draw - this._tilesToDraw = []; - this._tilesLoading = 0; - this.loadingCoverage = {}; - - if(!drawArea){ - this._needsDraw = false; - return this._fullyLoaded; - } - - // make a list of levels to use for the current zoom level - var levelList = new Array(highestLevel - lowestLevel + 1); - // go from highest to lowest resolution - for(let i = 0, level = highestLevel; level >= lowestLevel; level--, i++){ - levelList[i] = level; - } - // if a single-tile level is loaded, add that to the end of the list - // as a fallback to use during zooming out, until a lower-res tile is - // loaded - for(let level = highestLevel + 1; level <= this.source.maxLevel; level++){ - var tile = ( - this.tilesMatrix[level] && - this.tilesMatrix[level][0] && - this.tilesMatrix[level][0][0] - ); - if(tile && tile.isBottomMost && tile.isRightMost && tile.loaded){ - levelList.push(level); - levelList.hasHigherResolutionFallback = true; - break; - } - } - - - // Update any level that will be drawn - for (let i = 0; i < levelList.length; i++) { - let level = levelList[i]; - var drawLevel = false; - - //Avoid calculations for draw if we have already drawn this - var currentRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( - this.source.getPixelRatio(level), - true - ).x * this._scaleSpring.current.value; - - if (i === levelList.length - 1 || - (!haveDrawn && currentRenderPixelRatio >= this.minPixelRatio) ) { - drawLevel = true; - haveDrawn = true; - } else if (!haveDrawn) { - continue; + if ( !tile.blendStart ) { + tile.blendStart = currentTime; } - //Perform calculations for draw if we haven't drawn this - var targetRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( - this.source.getPixelRatio(level), - false - ).x * this._scaleSpring.current.value; + deltaTime = currentTime - tile.blendStart; + opacity = blendTimeMillis ? Math.min( 1, deltaTime / ( blendTimeMillis ) ) : 1; - var targetZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( - this.source.getPixelRatio( - Math.max( - this.source.getClosestLevel(), - 0 - ) - ), - false - ).x * this._scaleSpring.current.value; - - var optimalRatio = this.immediateRender ? 1 : targetZeroRatio; - var levelOpacity = Math.min(1, (currentRenderPixelRatio - 0.5) / 0.5); - var levelVisibility = optimalRatio / Math.abs( - optimalRatio - targetRenderPixelRatio - ); - - // Update the level and keep track of 'best' tiles to load - // the bestTiles - var result = this._updateLevel( - haveDrawn, - drawLevel, - level, - levelOpacity, - levelVisibility, - drawArea, - currentTime, - bestTiles - ); - - bestTiles = result.bestTiles; - var tiles = result.updatedTiles.filter(tile => tile.loaded); - var makeTileInfoObject = (function(level, levelOpacity, currentTime){ - return function(tile){ - return { - tile: tile, - level: level, - levelOpacity: levelOpacity, - currentTime: currentTime - }; - }; - })(level, levelOpacity, currentTime); - - this._tilesToDraw[level] = tiles.map(makeTileInfoObject); - - // Stop the loop if lower-res tiles would all be covered by - // already drawn tiles - if (this._providesCoverage(this.coverage, level)) { - break; - } - } - - - // Load the new 'best' n tiles - if (bestTiles && bestTiles.length > 0) { - bestTiles.forEach(function (tile) { - if (tile && !tile.context2D) { - this._loadTile(tile, currentTime); - } - }, this); - - this._needsDraw = true; - return false; - } else { - return this._tilesLoading === 0; - } - - // Update - - }, - - /** - * Update all tiles that contribute to the current view - * @private - * - */ - _updateTilesInViewport: function(tiles) { - let currentTime = $.now(); - let _this = this; - this._tilesLoading = 0; - this._wasBlending = this._isBlending; - this._isBlending = false; - this.loadingCoverage = {}; - let lowestLevel = tiles.length ? tiles[0].level : 0; - - let drawArea = this.getDrawArea(); - if(!drawArea){ - return; - } - - function updateTile(info){ - let tile = info.tile; - if(tile && tile.loaded){ - let tileIsBlending = _this._blendTile( - tile, - tile.x, - tile.y, - info.level, - info.levelOpacity, - currentTime, - lowestLevel - ); - _this._isBlending = _this._isBlending || tileIsBlending; - _this._needsDraw = _this._needsDraw || tileIsBlending || _this._wasBlending; - } - } - - // Update each tile in the list of tiles. As the tiles are updated, - // the coverage provided is also updated. If a level provides coverage - // as part of this process, discard tiles from lower levels - let level = 0; - for(let i = 0; i < tiles.length; i++){ - let tile = tiles[i]; - updateTile(tile); - if(this._providesCoverage(this.coverage, tile.level)){ - level = Math.max(level, tile.level); - } - } - if(level > 0){ - for( let levelKey in this._tilesToDraw ){ - if( levelKey < level ){ - delete this._tilesToDraw[levelKey]; - } - } - } - - }, - - /** - * Updates the opacity of a tile according to the time it has been on screen - * to perform a fade-in. - * Updates coverage once a tile is fully opaque. - * Returns whether the fade-in has completed. - * @private - * - * @param {OpenSeadragon.Tile} tile - * @param {Number} x - * @param {Number} y - * @param {Number} level - * @param {Number} levelOpacity - * @param {Number} currentTime - * @param {Boolean} lowestLevel - * @returns {Boolean} true if blending did not yet finish - */ - _blendTile: function(tile, x, y, level, levelOpacity, currentTime, lowestLevel ){ - let blendTimeMillis = 1000 * this.blendTime, - deltaTime, - opacity; - - if ( !tile.blendStart ) { - tile.blendStart = currentTime; - } - - deltaTime = currentTime - tile.blendStart; - opacity = blendTimeMillis ? Math.min( 1, deltaTime / ( blendTimeMillis ) ) : 1; - - // if this tile is at the lowest level being drawn, render at opacity=1 - if(level === lowestLevel){ - opacity = 1; - deltaTime = blendTimeMillis; - } - - if ( this.alwaysBlend ) { - opacity *= levelOpacity; - } - tile.opacity = opacity; - - if ( opacity === 1 ) { - this._setCoverage( this.coverage, level, x, y, true ); - this._hasOpaqueTile = true; - } - // return true if the tile is still blending - return deltaTime < blendTimeMillis; - }, - - /** - * Updates all tiles at a given resolution level. - * @private - * @param {Boolean} haveDrawn - * @param {Boolean} drawLevel - * @param {Number} level - * @param {Number} levelOpacity - * @param {Number} levelVisibility - * @param {OpenSeadragon.Rect} drawArea - * @param {Number} currentTime - * @param {OpenSeadragon.Tile[]} best Array of the current best tiles - * @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile - the current "best" tiles to draw, updatedTiles: OpenSeadragon.Tile) - the updated tiles}. - */ - _updateLevel: function(haveDrawn, drawLevel, level, levelOpacity, - levelVisibility, drawArea, currentTime, best) { - - var topLeftBound = drawArea.getBoundingBox().getTopLeft(); - var bottomRightBound = drawArea.getBoundingBox().getBottomRight(); - - if (this.viewer) { - /** - * - Needs documentation - - * - * @event update-level - * @memberof OpenSeadragon.Viewer - * @type {object} - * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. - * @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn. - * @property {Object} havedrawn - * @property {Object} level - * @property {Object} opacity - * @property {Object} visibility - * @property {OpenSeadragon.Rect} drawArea - * @property {Object} topleft deprecated, use drawArea instead - * @property {Object} bottomright deprecated, use drawArea instead - * @property {Object} currenttime - * @property {Object[]} best - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.viewer.raiseEvent('update-level', { - tiledImage: this, - havedrawn: haveDrawn, - level: level, - opacity: levelOpacity, - visibility: levelVisibility, - drawArea: drawArea, - topleft: topLeftBound, - bottomright: bottomRightBound, - currenttime: currentTime, - best: best - }); - } - - this._resetCoverage(this.coverage, level); - this._resetCoverage(this.loadingCoverage, level); - - //OK, a new drawing so do your calculations - var cornerTiles = this._getCornerTiles(level, topLeftBound, bottomRightBound); - var topLeftTile = cornerTiles.topLeft; - var bottomRightTile = cornerTiles.bottomRight; - var numberOfTiles = this.source.getNumTiles(level); - - var viewportCenter = this.viewport.pixelFromPoint(this.viewport.getCenter()); - - if (this.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 (!this.wrapHorizontal) { - bottomRightTile.x = Math.min(bottomRightTile.x, numberOfTiles.x - 1); - } - } - var numTiles = Math.max(0, (bottomRightTile.x - topLeftTile.x) * (bottomRightTile.y - topLeftTile.y)); - var tiles = new Array(numTiles); - var tileIndex = 0; - for (var x = topLeftTile.x; x <= bottomRightTile.x; x++) { - for (var y = topLeftTile.y; y <= bottomRightTile.y; y++) { - - var flippedX; - if (this.getFlip()) { - var xMod = ( numberOfTiles.x + ( x % numberOfTiles.x ) ) % numberOfTiles.x; - flippedX = x + numberOfTiles.x - xMod - xMod - 1; - } else { - flippedX = x; - } - - if (drawArea.intersection(this.getTileBounds(level, flippedX, y)) === null) { - // This tile is outside of the viewport, no need to draw it - continue; - } - - var result = this._updateTile( - haveDrawn, - drawLevel, - flippedX, y, - level, - levelVisibility, - viewportCenter, - numberOfTiles, - currentTime, - best - ); - best = result.bestTiles; - tiles[tileIndex] = result.tile; - tileIndex += 1; - } - } - - return { - bestTiles: best, - updatedTiles: tiles - }; - }, - - /** - * @private - * @param {OpenSeadragon.Tile} tile - * @param {Boolean} overlap - * @param {OpenSeadragon.Viewport} viewport - * @param {OpenSeadragon.Point} viewportCenter - * @param {Number} levelVisibility - */ - _positionTile: function( tile, overlap, viewport, viewportCenter, levelVisibility ){ - var boundsTL = tile.bounds.getTopLeft(); - - boundsTL.x *= this._scaleSpring.current.value; - boundsTL.y *= this._scaleSpring.current.value; - boundsTL.x += this._xSpring.current.value; - boundsTL.y += this._ySpring.current.value; - - var boundsSize = tile.bounds.getSize(); - - boundsSize.x *= this._scaleSpring.current.value; - boundsSize.y *= this._scaleSpring.current.value; - - tile.positionedBounds.x = boundsTL.x; - tile.positionedBounds.y = boundsTL.y; - tile.positionedBounds.width = boundsSize.x; - tile.positionedBounds.height = boundsSize.y; - - var positionC = viewport.pixelFromPointNoRotate(boundsTL, true), - positionT = viewport.pixelFromPointNoRotate(boundsTL, false), - sizeC = viewport.deltaPixelsFromPointsNoRotate(boundsSize, true), - sizeT = viewport.deltaPixelsFromPointsNoRotate(boundsSize, false), - tileCenter = positionT.plus( sizeT.divide( 2 ) ), - tileSquaredDistance = viewportCenter.squaredDistanceTo( tileCenter ); - - if(this.viewer.drawer.minimumOverlapRequired()){ - if ( !overlap ) { - sizeC = sizeC.plus( new $.Point(1, 1)); + // if this tile is at the lowest level being drawn, render at opacity=1 + if(level === lowestLevel){ + opacity = 1; + deltaTime = blendTimeMillis; } - if (tile.isRightMost && this.wrapHorizontal) { - sizeC.x += 0.75; // Otherwise Firefox and Safari show seams + if ( this.alwaysBlend ) { + opacity *= levelOpacity; } + tile.opacity = opacity; - if (tile.isBottomMost && this.wrapVertical) { - sizeC.y += 0.75; // Otherwise Firefox and Safari show seams - } - } - - tile.position = positionC; - tile.size = sizeC; - tile.squaredDistance = tileSquaredDistance; - tile.visibility = levelVisibility; - }, - - /** - * Update a single tile at a particular resolution level. - * @private - * @param {Boolean} haveDrawn - * @param {Boolean} drawLevel - * @param {Number} x - * @param {Number} y - * @param {Number} level - * @param {Number} levelVisibility - * @param {OpenSeadragon.Point} viewportCenter - * @param {Number} numberOfTiles - * @param {Number} currentTime - * @param {OpenSeadragon.Tile} best - The current "best" tile to draw. - * @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile[] - the current best tiles, tile: OpenSeadragon.Tile the current tile} - */ - _updateTile: function( haveDrawn, drawLevel, x, y, level, - levelVisibility, viewportCenter, numberOfTiles, currentTime, best){ - - var tile = this._getTile( - x, y, - level, - currentTime, - numberOfTiles - ), - drawTile = drawLevel; - - if( this.viewer ){ - /** - * - Needs documentation - - * - * @event update-tile - * @memberof OpenSeadragon.Viewer - * @type {object} - * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. - * @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn. - * @property {OpenSeadragon.Tile} tile - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.viewer.raiseEvent( 'update-tile', { - tiledImage: this, - tile: tile - }); - } - - this._setCoverage( this.coverage, level, x, y, false ); - - var loadingCoverage = tile.loaded || tile.loading || this._isCovered(this.loadingCoverage, level, x, y); - this._setCoverage(this.loadingCoverage, level, x, y, loadingCoverage); - - if ( !tile.exists ) { - return { - bestTiles: best, - tile: tile - }; - } - if (tile.loaded && tile.opacity === 1){ - this._setCoverage( this.coverage, level, x, y, true ); - } - if ( drawTile && !haveDrawn ) { - if ( this._isCovered( this.coverage, level, x, y ) ) { + if ( opacity === 1 ) { this._setCoverage( this.coverage, level, x, y, true ); - } else { - haveDrawn = true; + this._hasOpaqueTile = true; } - } + // return true if the tile is still blending + return deltaTime < blendTimeMillis; + }, - if ( !haveDrawn ) { - return { - bestTiles: best, - tile: tile - }; - } + /** + * Updates all tiles at a given resolution level. + * @private + * @param {Number} level + * @param {Number} levelOpacity + * @param {Number} levelVisibility + * @param {OpenSeadragon.Rect} drawArea + * @param {Number} currentTime + * @param {OpenSeadragon.Tile[]} best Array of the current best tiles + * @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile - the current "best" tiles to draw, updatedTiles: OpenSeadragon.Tile) - the updated tiles}. + */ + _updateLevel: function(level, levelOpacity, + levelVisibility, drawArea, currentTime, best) { - this._positionTile( - tile, - this.source.tileOverlap, - this.viewport, - viewportCenter, - levelVisibility - ); + var topLeftBound = drawArea.getBoundingBox().getTopLeft(); + var bottomRightBound = drawArea.getBoundingBox().getBottomRight(); - if (!tile.loaded) { - if (tile.context2D) { - this._setTileLoaded(tile); - } else { - var imageRecord = this._tileCache.getImageRecord(tile.cacheKey); - if (imageRecord) { - this._setTileLoaded(tile, imageRecord.getData()); - } - } - } - - if ( tile.loading ) { - // the tile is already in the download queue - this._tilesLoading++; - } else if (!loadingCoverage) { - best = this._compareTiles( best, tile, this.maxTilesPerFrame ); - } - - return { - bestTiles: best, - tile: tile - }; - }, - - // private - _getCornerTiles: function(level, topLeftBound, bottomRightBound) { - var leftX; - var rightX; - if (this.wrapHorizontal) { - leftX = $.positiveModulo(topLeftBound.x, 1); - rightX = $.positiveModulo(bottomRightBound.x, 1); - } else { - leftX = Math.max(0, topLeftBound.x); - rightX = Math.min(1, bottomRightBound.x); - } - var topY; - var bottomY; - var aspectRatio = 1 / this.source.aspectRatio; - if (this.wrapVertical) { - topY = $.positiveModulo(topLeftBound.y, aspectRatio); - bottomY = $.positiveModulo(bottomRightBound.y, aspectRatio); - } else { - topY = Math.max(0, topLeftBound.y); - bottomY = Math.min(aspectRatio, bottomRightBound.y); - } - - var topLeftTile = this.source.getTileAtPoint(level, new $.Point(leftX, topY)); - var bottomRightTile = this.source.getTileAtPoint(level, new $.Point(rightX, bottomY)); - var numTiles = this.source.getNumTiles(level); - - if (this.wrapHorizontal) { - topLeftTile.x += numTiles.x * Math.floor(topLeftBound.x); - bottomRightTile.x += numTiles.x * Math.floor(bottomRightBound.x); - } - if (this.wrapVertical) { - topLeftTile.y += numTiles.y * Math.floor(topLeftBound.y / aspectRatio); - bottomRightTile.y += numTiles.y * Math.floor(bottomRightBound.y / aspectRatio); - } - - return { - topLeft: topLeftTile, - bottomRight: bottomRightTile, - }; - }, - - /** - * Obtains a tile at the given location. - * @private - * @param {Number} x - * @param {Number} y - * @param {Number} level - * @param {Number} time - * @param {Number} numTiles - * @returns {OpenSeadragon.Tile} - */ - _getTile: function( - x, y, - level, - time, - numTiles - ) { - var xMod, - yMod, - bounds, - sourceBounds, - exists, - urlOrGetter, - post, - ajaxHeaders, - context2D, - tile, - tilesMatrix = this.tilesMatrix, - tileSource = this.source; - - if ( !tilesMatrix[ level ] ) { - tilesMatrix[ level ] = {}; - } - if ( !tilesMatrix[ level ][ x ] ) { - tilesMatrix[ level ][ x ] = {}; - } - - if ( !tilesMatrix[ level ][ x ][ y ] || !tilesMatrix[ level ][ x ][ y ].flipped !== !this.flipped ) { - xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; - yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; - bounds = this.getTileBounds( level, x, y ); - sourceBounds = tileSource.getTileBounds( level, xMod, yMod, true ); - exists = tileSource.tileExists( level, xMod, yMod ); - urlOrGetter = tileSource.getTileUrl( level, xMod, yMod ); - post = tileSource.getTilePostData( level, xMod, yMod ); - - // Headers are only applicable if loadTilesWithAjax is set - if (this.loadTilesWithAjax) { - ajaxHeaders = tileSource.getTileAjaxHeaders( level, xMod, yMod ); - // Combine tile AJAX headers with tiled image AJAX headers (if applicable) - if ($.isPlainObject(this.ajaxHeaders)) { - ajaxHeaders = $.extend({}, this.ajaxHeaders, ajaxHeaders); - } - } else { - ajaxHeaders = null; - } - - context2D = tileSource.getContext2D ? - tileSource.getContext2D(level, xMod, yMod) : undefined; - - tile = new $.Tile( - level, - x, - y, - bounds, - exists, - urlOrGetter, - context2D, - this.loadTilesWithAjax, - ajaxHeaders, - sourceBounds, - post, - tileSource.getTileHashKey(level, xMod, yMod, urlOrGetter, ajaxHeaders, post) - ); - - if (this.getFlip()) { - if (xMod === 0) { - tile.isRightMost = true; - } - } else { - if (xMod === numTiles.x - 1) { - tile.isRightMost = true; - } - } - - if (yMod === numTiles.y - 1) { - tile.isBottomMost = true; - } - - tile.flipped = this.flipped; - - tilesMatrix[ level ][ x ][ y ] = tile; - } - - tile = tilesMatrix[ level ][ x ][ y ]; - tile.lastTouchTime = time; - - return tile; - }, - - /** - * Dispatch a job to the ImageLoader to load the Image for a Tile. - * @private - * @param {OpenSeadragon.Tile} tile - * @param {Number} time - */ - _loadTile: function(tile, time ) { - var _this = this; - tile.loading = true; - this._imageLoader.addJob({ - src: tile.getUrl(), - tile: tile, - source: this.source, - postData: tile.postData, - loadWithAjax: tile.loadWithAjax, - ajaxHeaders: tile.ajaxHeaders, - crossOriginPolicy: this.crossOriginPolicy, - ajaxWithCredentials: this.ajaxWithCredentials, - callback: function( data, errorMsg, tileRequest ){ - _this._onTileLoad( tile, time, data, errorMsg, tileRequest ); - }, - abort: function() { - tile.loading = false; - } - }); - }, - - /** - * Callback fired when a Tile's Image finished downloading. - * @private - * @param {OpenSeadragon.Tile} tile - * @param {Number} time - * @param {*} data image data - * @param {String} errorMsg - * @param {XMLHttpRequest} tileRequest - */ - _onTileLoad: function( tile, time, data, errorMsg, tileRequest ) { - if ( !data ) { - $.console.error( "Tile %s failed to load: %s - error: %s", tile, tile.getUrl(), errorMsg ); - /** - * Triggered when a tile fails to load. - * - * @event tile-load-failed - * @memberof OpenSeadragon.Viewer - * @type {object} - * @property {OpenSeadragon.Tile} tile - The tile that failed to load. - * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image the tile belongs to. - * @property {number} time - The time in milliseconds when the tile load began. - * @property {string} message - The error message. - * @property {XMLHttpRequest} tileRequest - The XMLHttpRequest used to load the tile if available. - */ - this.viewer.raiseEvent("tile-load-failed", { - tile: tile, - tiledImage: this, - time: time, - message: errorMsg, - tileRequest: tileRequest - }); - tile.loading = false; - tile.exists = false; - return; - } else { - tile.exists = true; - } - - if ( time < this.lastResetTime ) { - $.console.warn( "Ignoring tile %s loaded before reset: %s", tile, tile.getUrl() ); - tile.loading = false; - return; - } - - var _this = this, - finish = function() { - var ccc = _this.source; - var cutoff = ccc.getClosestLevel(); - _this._setTileLoaded(tile, data, cutoff, tileRequest); - }; - - - finish(); - }, - - /** - * @private - * @param {OpenSeadragon.Tile} tile - * @param {*} data image data, the data sent to ImageJob.prototype.finish(), by default an Image object - * @param {Number|undefined} cutoff - * @param {XMLHttpRequest|undefined} tileRequest - */ - _setTileLoaded: function(tile, data, cutoff, tileRequest) { - var increment = 0, - eventFinished = false, - _this = this; - - function getCompletionCallback() { - if (eventFinished) { - $.console.error("Event 'tile-loaded' argument getCompletionCallback must be called synchronously. " + - "Its return value should be called asynchronously."); - } - increment++; - return completionCallback; - } - - function completionCallback() { - increment--; - if (increment === 0) { - tile.loading = false; - tile.loaded = true; - tile.hasTransparency = _this.source.hasTransparency( - tile.context2D, tile.getUrl(), tile.ajaxHeaders, tile.postData - ); - if (!tile.context2D) { - _this._tileCache.cacheTile({ - data: data, - tile: tile, - cutoff: cutoff, - tiledImage: _this - }); - } + if (this.viewer) { /** - * Triggered when a tile is loaded and pre-processing is compelete, - * and the tile is ready to draw. + * - Needs documentation - * - * @event tile-ready + * @event update-level * @memberof OpenSeadragon.Viewer * @type {object} - * @property {OpenSeadragon.Tile} tile - The tile which has been loaded. - * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile. - * @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable). + * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. + * @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn. + * @property {Object} havedrawn - deprecated, always true (kept for backwards compatibility) + * @property {Object} level + * @property {Object} opacity + * @property {Object} visibility + * @property {OpenSeadragon.Rect} drawArea + * @property {Object} topleft deprecated, use drawArea instead + * @property {Object} bottomright deprecated, use drawArea instead + * @property {Object} currenttime + * @property {Object[]} best + * @property {?Object} userData - Arbitrary subscriber-defined object. */ - _this.viewer.raiseEvent("tile-ready", { - tile: tile, - tiledImage: _this, - tileRequest: tileRequest + this.viewer.raiseEvent('update-level', { + tiledImage: this, + havedrawn: true, // deprecated, kept for backwards compatibility + level: level, + opacity: levelOpacity, + visibility: levelVisibility, + drawArea: drawArea, + topleft: topLeftBound, + bottomright: bottomRightBound, + currenttime: currentTime, + best: best }); - _this._needsDraw = true; } - } + + this._resetCoverage(this.coverage, level); + this._resetCoverage(this.loadingCoverage, level); + + //OK, a new drawing so do your calculations + var cornerTiles = this._getCornerTiles(level, topLeftBound, bottomRightBound); + var topLeftTile = cornerTiles.topLeft; + var bottomRightTile = cornerTiles.bottomRight; + var numberOfTiles = this.source.getNumTiles(level); + + var viewportCenter = this.viewport.pixelFromPoint(this.viewport.getCenter()); + + if (this.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 (!this.wrapHorizontal) { + bottomRightTile.x = Math.min(bottomRightTile.x, numberOfTiles.x - 1); + } + } + var numTiles = Math.max(0, (bottomRightTile.x - topLeftTile.x) * (bottomRightTile.y - topLeftTile.y)); + var tiles = new Array(numTiles); + var tileIndex = 0; + for (var x = topLeftTile.x; x <= bottomRightTile.x; x++) { + for (var y = topLeftTile.y; y <= bottomRightTile.y; y++) { + + var flippedX; + if (this.getFlip()) { + var xMod = ( numberOfTiles.x + ( x % numberOfTiles.x ) ) % numberOfTiles.x; + flippedX = x + numberOfTiles.x - xMod - xMod - 1; + } else { + flippedX = x; + } + + if (drawArea.intersection(this.getTileBounds(level, flippedX, y)) === null) { + // This tile is outside of the viewport, no need to draw it + continue; + } + + var result = this._updateTile( + flippedX, y, + level, + levelVisibility, + viewportCenter, + numberOfTiles, + currentTime, + best + ); + best = result.bestTiles; + tiles[tileIndex] = result.tile; + tileIndex += 1; + } + } + + return { + bestTiles: best, + updatedTiles: tiles + }; + }, /** - * Triggered when a tile has just been loaded in memory. That means that the - * image has been downloaded and can be modified before being drawn to the canvas. - * - * @event tile-loaded - * @memberof OpenSeadragon.Viewer - * @type {object} - * @property {Image|*} image - The image (data) of the tile. Deprecated. - * @property {*} data image data, the data sent to ImageJob.prototype.finish(), by default an Image object - * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile. - * @property {OpenSeadragon.Tile} tile - The tile which has been loaded. - * @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable). - * @property {function} getCompletionCallback - A function giving a callback to call - * when the asynchronous processing of the image is done. The image will be - * marked as entirely loaded when the callback has been called once for each - * call to getCompletionCallback. + * @private + * @param {OpenSeadragon.Tile} tile + * @param {Boolean} overlap + * @param {OpenSeadragon.Viewport} viewport + * @param {OpenSeadragon.Point} viewportCenter + * @param {Number} levelVisibility */ + _positionTile: function( tile, overlap, viewport, viewportCenter, levelVisibility ){ + var boundsTL = tile.bounds.getTopLeft(); - var fallbackCompletion = getCompletionCallback(); - this.viewer.raiseEvent("tile-loaded", { - tile: tile, - tiledImage: this, - tileRequest: tileRequest, - get image() { - $.console.error("[tile-loaded] event 'image' has been deprecated. Use 'data' property instead."); - return data; - }, - data: data, - getCompletionCallback: getCompletionCallback - }); - eventFinished = true; - // In case the completion callback is never called, we at least force it once. - fallbackCompletion(); - }, + boundsTL.x *= this._scaleSpring.current.value; + boundsTL.y *= this._scaleSpring.current.value; + boundsTL.x += this._xSpring.current.value; + boundsTL.y += this._ySpring.current.value; + var boundsSize = tile.bounds.getSize(); - /** - * Determines the 'best tiles' from the given 'last best' tiles and the - * tile in question. - * @private - * - * @param {OpenSeadragon.Tile[]} previousBest The best tiles so far. - * @param {OpenSeadragon.Tile} tile The new tile to consider. - * @param {Number} maxNTiles The max number of best tiles. - * @returns {OpenSeadragon.Tile[]} The new best tiles. - */ - _compareTiles: function( previousBest, tile, maxNTiles ) { - if ( !previousBest ) { - return [tile]; - } - previousBest.push(tile); - this._sortTiles(previousBest); - if (previousBest.length > maxNTiles) { - previousBest.pop(); - } - return previousBest; - }, + boundsSize.x *= this._scaleSpring.current.value; + boundsSize.y *= this._scaleSpring.current.value; - /** - * Sorts tiles in an array according to distance and visibility. - * @private - * - * @param {OpenSeadragon.Tile[]} tiles The tiles. - */ - _sortTiles: function( tiles ) { - tiles.sort(function (a, b) { - if (a === null) { - return 1; + tile.positionedBounds.x = boundsTL.x; + tile.positionedBounds.y = boundsTL.y; + tile.positionedBounds.width = boundsSize.x; + tile.positionedBounds.height = boundsSize.y; + + var positionC = viewport.pixelFromPointNoRotate(boundsTL, true), + positionT = viewport.pixelFromPointNoRotate(boundsTL, false), + sizeC = viewport.deltaPixelsFromPointsNoRotate(boundsSize, true), + sizeT = viewport.deltaPixelsFromPointsNoRotate(boundsSize, false), + tileCenter = positionT.plus( sizeT.divide( 2 ) ), + tileSquaredDistance = viewportCenter.squaredDistanceTo( tileCenter ); + + if(this.viewer.drawer.minimumOverlapRequired()){ + if ( !overlap ) { + sizeC = sizeC.plus( new $.Point(1, 1)); + } + + if (tile.isRightMost && this.wrapHorizontal) { + sizeC.x += 0.75; // Otherwise Firefox and Safari show seams + } + + if (tile.isBottomMost && this.wrapVertical) { + sizeC.y += 0.75; // Otherwise Firefox and Safari show seams + } } - if (b === null) { - return -1; + + tile.position = positionC; + tile.size = sizeC; + tile.squaredDistance = tileSquaredDistance; + tile.visibility = levelVisibility; + }, + + /** + * Update a single tile at a particular resolution level. + * @private + * @param {Number} x + * @param {Number} y + * @param {Number} level + * @param {Number} levelVisibility + * @param {OpenSeadragon.Point} viewportCenter + * @param {Number} numberOfTiles + * @param {Number} currentTime + * @param {OpenSeadragon.Tile} best - The current "best" tile to draw. + * @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile[] - the current best tiles, tile: OpenSeadragon.Tile the current tile} + */ + _updateTile: function( x, y, level, + levelVisibility, viewportCenter, numberOfTiles, currentTime, best){ + + var tile = this._getTile( + x, y, + level, + currentTime, + numberOfTiles + ); + + if( this.viewer ){ + /** + * - Needs documentation - + * + * @event update-tile + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. + * @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn. + * @property {OpenSeadragon.Tile} tile + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.viewer.raiseEvent( 'update-tile', { + tiledImage: this, + tile: tile + }); } - if (a.visibility === b.visibility) { - // sort by smallest squared distance - return (a.squaredDistance - b.squaredDistance); - } else { - // sort by largest visibility value - return (b.visibility - a.visibility); + + this._setCoverage( this.coverage, level, x, y, false ); + + var loadingCoverage = tile.loaded || tile.loading || this._isCovered(this.loadingCoverage, level, x, y); + this._setCoverage(this.loadingCoverage, level, x, y, loadingCoverage); + + if ( !tile.exists ) { + return { + bestTiles: best, + tile: tile + }; + } + if (tile.loaded && tile.opacity === 1){ + this._setCoverage( this.coverage, level, x, y, true ); } - }); - }, + this._positionTile( + tile, + this.source.tileOverlap, + this.viewport, + viewportCenter, + levelVisibility + ); - /** - * Returns true if the given tile provides coverage to lower-level tiles of - * lower resolution representing the same content. If neither x nor y is - * given, returns true if the entire visible level provides coverage. - * - * Note that out-of-bounds tiles provide coverage in this sense, since - * there's no content that they would need to cover. Tiles at non-existent - * levels that are within the image bounds, however, do not. - * @private - * - * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. - * @param {Number} level - The resolution level of the tile. - * @param {Number} x - The X position of the tile. - * @param {Number} y - The Y position of the tile. - * @returns {Boolean} - */ - _providesCoverage: function( coverage, level, x, y ) { - var rows, - cols, - i, j; - - if ( !coverage[ level ] ) { - return false; - } - - if ( x === undefined || y === undefined ) { - rows = coverage[ level ]; - for ( i in rows ) { - if ( Object.prototype.hasOwnProperty.call( rows, i ) ) { - cols = rows[ i ]; - for ( j in cols ) { - if ( Object.prototype.hasOwnProperty.call( cols, j ) && !cols[ j ] ) { - return false; - } + if (!tile.loaded) { + if (tile.context2D) { + this._setTileLoaded(tile); + } else { + var imageRecord = this._tileCache.getImageRecord(tile.cacheKey); + if (imageRecord) { + this._setTileLoaded(tile, imageRecord.getData()); } } } - return true; - } + if ( tile.loading ) { + // the tile is already in the download queue + this._tilesLoading++; + } else if (!loadingCoverage) { + best = this._compareTiles( best, tile, this.maxTilesPerFrame ); + } - return ( - coverage[ level ][ x] === undefined || - coverage[ level ][ x ][ y ] === undefined || - coverage[ level ][ x ][ y ] === true - ); - }, + return { + bestTiles: best, + tile: tile + }; + }, + + // private + _getCornerTiles: function(level, topLeftBound, bottomRightBound) { + var leftX; + var rightX; + if (this.wrapHorizontal) { + leftX = $.positiveModulo(topLeftBound.x, 1); + rightX = $.positiveModulo(bottomRightBound.x, 1); + } else { + leftX = Math.max(0, topLeftBound.x); + rightX = Math.min(1, bottomRightBound.x); + } + var topY; + var bottomY; + var aspectRatio = 1 / this.source.aspectRatio; + if (this.wrapVertical) { + topY = $.positiveModulo(topLeftBound.y, aspectRatio); + bottomY = $.positiveModulo(bottomRightBound.y, aspectRatio); + } else { + topY = Math.max(0, topLeftBound.y); + bottomY = Math.min(aspectRatio, bottomRightBound.y); + } + + var topLeftTile = this.source.getTileAtPoint(level, new $.Point(leftX, topY)); + var bottomRightTile = this.source.getTileAtPoint(level, new $.Point(rightX, bottomY)); + var numTiles = this.source.getNumTiles(level); + + if (this.wrapHorizontal) { + topLeftTile.x += numTiles.x * Math.floor(topLeftBound.x); + bottomRightTile.x += numTiles.x * Math.floor(bottomRightBound.x); + } + if (this.wrapVertical) { + topLeftTile.y += numTiles.y * Math.floor(topLeftBound.y / aspectRatio); + bottomRightTile.y += numTiles.y * Math.floor(bottomRightBound.y / aspectRatio); + } + + return { + topLeft: topLeftTile, + bottomRight: bottomRightTile, + }; + }, + + /** + * Obtains a tile at the given location. + * @private + * @param {Number} x + * @param {Number} y + * @param {Number} level + * @param {Number} time + * @param {Number} numTiles + * @returns {OpenSeadragon.Tile} + */ + _getTile: function( + x, y, + level, + time, + numTiles + ) { + var xMod, + yMod, + bounds, + sourceBounds, + exists, + urlOrGetter, + post, + ajaxHeaders, + context2D, + tile, + tilesMatrix = this.tilesMatrix, + tileSource = this.source; + + if ( !tilesMatrix[ level ] ) { + tilesMatrix[ level ] = {}; + } + if ( !tilesMatrix[ level ][ x ] ) { + tilesMatrix[ level ][ x ] = {}; + } + + if ( !tilesMatrix[ level ][ x ][ y ] || !tilesMatrix[ level ][ x ][ y ].flipped !== !this.flipped ) { + xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; + yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; + bounds = this.getTileBounds( level, x, y ); + sourceBounds = tileSource.getTileBounds( level, xMod, yMod, true ); + exists = tileSource.tileExists( level, xMod, yMod ); + urlOrGetter = tileSource.getTileUrl( level, xMod, yMod ); + post = tileSource.getTilePostData( level, xMod, yMod ); + + // Headers are only applicable if loadTilesWithAjax is set + if (this.loadTilesWithAjax) { + ajaxHeaders = tileSource.getTileAjaxHeaders( level, xMod, yMod ); + // Combine tile AJAX headers with tiled image AJAX headers (if applicable) + if ($.isPlainObject(this.ajaxHeaders)) { + ajaxHeaders = $.extend({}, this.ajaxHeaders, ajaxHeaders); + } + } else { + ajaxHeaders = null; + } + + context2D = tileSource.getContext2D ? + tileSource.getContext2D(level, xMod, yMod) : undefined; + + tile = new $.Tile( + level, + x, + y, + bounds, + exists, + urlOrGetter, + context2D, + this.loadTilesWithAjax, + ajaxHeaders, + sourceBounds, + post, + tileSource.getTileHashKey(level, xMod, yMod, urlOrGetter, ajaxHeaders, post) + ); + + if (this.getFlip()) { + if (xMod === 0) { + tile.isRightMost = true; + } + } else { + if (xMod === numTiles.x - 1) { + tile.isRightMost = true; + } + } + + if (yMod === numTiles.y - 1) { + tile.isBottomMost = true; + } + + tile.flipped = this.flipped; + + tilesMatrix[ level ][ x ][ y ] = tile; + } + + tile = tilesMatrix[ level ][ x ][ y ]; + tile.lastTouchTime = time; + + return tile; + }, + + /** + * Dispatch a job to the ImageLoader to load the Image for a Tile. + * @private + * @param {OpenSeadragon.Tile} tile + * @param {Number} time + */ + _loadTile: function(tile, time ) { + var _this = this; + tile.loading = true; + this._imageLoader.addJob({ + src: tile.getUrl(), + tile: tile, + source: this.source, + postData: tile.postData, + loadWithAjax: tile.loadWithAjax, + ajaxHeaders: tile.ajaxHeaders, + crossOriginPolicy: this.crossOriginPolicy, + ajaxWithCredentials: this.ajaxWithCredentials, + callback: function( data, errorMsg, tileRequest ){ + _this._onTileLoad( tile, time, data, errorMsg, tileRequest ); + }, + abort: function() { + tile.loading = false; + } + }); + }, + + /** + * Callback fired when a Tile's Image finished downloading. + * @private + * @param {OpenSeadragon.Tile} tile + * @param {Number} time + * @param {*} data image data + * @param {String} errorMsg + * @param {XMLHttpRequest} tileRequest + */ + _onTileLoad: function( tile, time, data, errorMsg, tileRequest ) { + if ( !data ) { + $.console.error( "Tile %s failed to load: %s - error: %s", tile, tile.getUrl(), errorMsg ); + /** + * Triggered when a tile fails to load. + * + * @event tile-load-failed + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Tile} tile - The tile that failed to load. + * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image the tile belongs to. + * @property {number} time - The time in milliseconds when the tile load began. + * @property {string} message - The error message. + * @property {XMLHttpRequest} tileRequest - The XMLHttpRequest used to load the tile if available. + */ + this.viewer.raiseEvent("tile-load-failed", { + tile: tile, + tiledImage: this, + time: time, + message: errorMsg, + tileRequest: tileRequest + }); + tile.loading = false; + tile.exists = false; + return; + } else { + tile.exists = true; + } + + if ( time < this.lastResetTime ) { + $.console.warn( "Ignoring tile %s loaded before reset: %s", tile, tile.getUrl() ); + tile.loading = false; + return; + } + + var _this = this, + finish = function() { + var ccc = _this.source; + var cutoff = ccc.getClosestLevel(); + _this._setTileLoaded(tile, data, cutoff, tileRequest); + }; + + + finish(); + }, + + /** + * @private + * @param {OpenSeadragon.Tile} tile + * @param {*} data image data, the data sent to ImageJob.prototype.finish(), by default an Image object + * @param {Number|undefined} cutoff + * @param {XMLHttpRequest|undefined} tileRequest + */ + _setTileLoaded: function(tile, data, cutoff, tileRequest) { + var increment = 0, + eventFinished = false, + _this = this; + + function getCompletionCallback() { + if (eventFinished) { + $.console.error("Event 'tile-loaded' argument getCompletionCallback must be called synchronously. " + + "Its return value should be called asynchronously."); + } + increment++; + return completionCallback; + } + + function completionCallback() { + increment--; + if (increment === 0) { + tile.loading = false; + tile.loaded = true; + tile.hasTransparency = _this.source.hasTransparency( + tile.context2D, tile.getUrl(), tile.ajaxHeaders, tile.postData + ); + if (!tile.context2D) { + _this._tileCache.cacheTile({ + data: data, + tile: tile, + cutoff: cutoff, + tiledImage: _this + }); + } + /** + * Triggered when a tile is loaded and pre-processing is compelete, + * and the tile is ready to draw. + * + * @event tile-ready + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Tile} tile - The tile which has been loaded. + * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile. + * @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable). + */ + _this.viewer.raiseEvent("tile-ready", { + tile: tile, + tiledImage: _this, + tileRequest: tileRequest + }); + _this._needsDraw = true; + } + } + + /** + * Triggered when a tile has just been loaded in memory. That means that the + * image has been downloaded and can be modified before being drawn to the canvas. + * + * @event tile-loaded + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {Image|*} image - The image (data) of the tile. Deprecated. + * @property {*} data image data, the data sent to ImageJob.prototype.finish(), by default an Image object + * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile. + * @property {OpenSeadragon.Tile} tile - The tile which has been loaded. + * @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable). + * @property {function} getCompletionCallback - A function giving a callback to call + * when the asynchronous processing of the image is done. The image will be + * marked as entirely loaded when the callback has been called once for each + * call to getCompletionCallback. + */ + + var fallbackCompletion = getCompletionCallback(); + this.viewer.raiseEvent("tile-loaded", { + tile: tile, + tiledImage: this, + tileRequest: tileRequest, + get image() { + $.console.error("[tile-loaded] event 'image' has been deprecated. Use 'data' property instead."); + return data; + }, + data: data, + getCompletionCallback: getCompletionCallback + }); + eventFinished = true; + // In case the completion callback is never called, we at least force it once. + fallbackCompletion(); + }, + + + /** + * Determines the 'best tiles' from the given 'last best' tiles and the + * tile in question. + * @private + * + * @param {OpenSeadragon.Tile[]} previousBest The best tiles so far. + * @param {OpenSeadragon.Tile} tile The new tile to consider. + * @param {Number} maxNTiles The max number of best tiles. + * @returns {OpenSeadragon.Tile[]} The new best tiles. + */ + _compareTiles: function( previousBest, tile, maxNTiles ) { + if ( !previousBest ) { + return [tile]; + } + previousBest.push(tile); + this._sortTiles(previousBest); + if (previousBest.length > maxNTiles) { + previousBest.pop(); + } + return previousBest; + }, + + /** + * Sorts tiles in an array according to distance and visibility. + * @private + * + * @param {OpenSeadragon.Tile[]} tiles The tiles. + */ + _sortTiles: function( tiles ) { + tiles.sort(function (a, b) { + if (a === null) { + return 1; + } + if (b === null) { + return -1; + } + if (a.visibility === b.visibility) { + // sort by smallest squared distance + return (a.squaredDistance - b.squaredDistance); + } else { + // sort by largest visibility value + return (b.visibility - a.visibility); + } + }); + }, + + + /** + * Returns true if the given tile provides coverage to lower-level tiles of + * lower resolution representing the same content. If neither x nor y is + * given, returns true if the entire visible level provides coverage. + * + * Note that out-of-bounds tiles provide coverage in this sense, since + * there's no content that they would need to cover. Tiles at non-existent + * levels that are within the image bounds, however, do not. + * @private + * + * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. + * @param {Number} level - The resolution level of the tile. + * @param {Number} x - The X position of the tile. + * @param {Number} y - The Y position of the tile. + * @returns {Boolean} + */ + _providesCoverage: function( coverage, level, x, y ) { + var rows, + cols, + i, j; + + if ( !coverage[ level ] ) { + return false; + } + + if ( x === undefined || y === undefined ) { + rows = coverage[ level ]; + for ( i in rows ) { + if ( Object.prototype.hasOwnProperty.call( rows, i ) ) { + cols = rows[ i ]; + for ( j in cols ) { + if ( Object.prototype.hasOwnProperty.call( cols, j ) && !cols[ j ] ) { + return false; + } + } + } + } + + return true; + } - /** - * Returns true if the given tile is completely covered by higher-level - * tiles of higher resolution representing the same content. If neither x - * nor y is given, returns true if the entire visible level is covered. - * @private - * - * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. - * @param {Number} level - The resolution level of the tile. - * @param {Number} x - The X position of the tile. - * @param {Number} y - The Y position of the tile. - * @returns {Boolean} - */ - _isCovered: function( coverage, level, x, y ) { - if ( x === undefined || y === undefined ) { - return this._providesCoverage( coverage, level + 1 ); - } else { return ( - this._providesCoverage( coverage, level + 1, 2 * x, 2 * y ) && - this._providesCoverage( coverage, level + 1, 2 * x, 2 * y + 1 ) && - this._providesCoverage( coverage, level + 1, 2 * x + 1, 2 * y ) && - this._providesCoverage( coverage, level + 1, 2 * x + 1, 2 * y + 1 ) + coverage[ level ][ x] === undefined || + coverage[ level ][ x ][ y ] === undefined || + coverage[ level ][ x ][ y ] === true ); + }, + + /** + * Returns true if the given tile is completely covered by higher-level + * tiles of higher resolution representing the same content. If neither x + * nor y is given, returns true if the entire visible level is covered. + * @private + * + * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. + * @param {Number} level - The resolution level of the tile. + * @param {Number} x - The X position of the tile. + * @param {Number} y - The Y position of the tile. + * @returns {Boolean} + */ + _isCovered: function( coverage, level, x, y ) { + if ( x === undefined || y === undefined ) { + return this._providesCoverage( coverage, level + 1 ); + } else { + return ( + this._providesCoverage( coverage, level + 1, 2 * x, 2 * y ) && + this._providesCoverage( coverage, level + 1, 2 * x, 2 * y + 1 ) && + this._providesCoverage( coverage, level + 1, 2 * x + 1, 2 * y ) && + this._providesCoverage( coverage, level + 1, 2 * x + 1, 2 * y + 1 ) + ); + } + }, + + /** + * Sets whether the given tile provides coverage or not. + * @private + * + * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. + * @param {Number} level - The resolution level of the tile. + * @param {Number} x - The X position of the tile. + * @param {Number} y - The Y position of the tile. + * @param {Boolean} covers - Whether the tile provides coverage. + */ + _setCoverage: function( coverage, level, x, y, covers ) { + if ( !coverage[ level ] ) { + $.console.warn( + "Setting coverage for a tile before its level's coverage has been reset: %s", + level + ); + return; + } + + if ( !coverage[ level ][ x ] ) { + coverage[ level ][ x ] = {}; + } + + coverage[ level ][ x ][ y ] = covers; + }, + + /** + * Resets coverage information for the given level. This should be called + * after every draw routine. Note that at the beginning of the next draw + * routine, coverage for every visible tile should be explicitly set. + * @private + * + * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. + * @param {Number} level - The resolution level of tiles to completely reset. + */ + _resetCoverage: function( coverage, level ) { + coverage[ level ] = {}; } - }, - - /** - * Sets whether the given tile provides coverage or not. - * @private - * - * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. - * @param {Number} level - The resolution level of the tile. - * @param {Number} x - The X position of the tile. - * @param {Number} y - The Y position of the tile. - * @param {Boolean} covers - Whether the tile provides coverage. - */ - _setCoverage: function( coverage, level, x, y, covers ) { - if ( !coverage[ level ] ) { - $.console.warn( - "Setting coverage for a tile before its level's coverage has been reset: %s", - level - ); - return; - } - - if ( !coverage[ level ][ x ] ) { - coverage[ level ][ x ] = {}; - } - - coverage[ level ][ x ][ y ] = covers; - }, - - /** - * Resets coverage information for the given level. This should be called - * after every draw routine. Note that at the beginning of the next draw - * routine, coverage for every visible tile should be explicitly set. - * @private - * - * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. - * @param {Number} level - The resolution level of tiles to completely reset. - */ - _resetCoverage: function( coverage, level ) { - coverage[ level ] = {}; - } -}); + }); -}( OpenSeadragon )); + }( OpenSeadragon )); From f7c12a716bd968b0f0e4c5c8e66759c81c7b7977 Mon Sep 17 00:00:00 2001 From: Tom Date: Wed, 22 May 2024 18:59:19 -0400 Subject: [PATCH 06/32] undo extra tabs before ach line introduced automatically by copy-and-pasting code --- src/tiledimage.js | 4214 ++++++++++++++++++++++----------------------- 1 file changed, 2107 insertions(+), 2107 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index 6a2d7253..a227a8dd 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -34,2245 +34,2245 @@ (function( $ ){ +/** + * You shouldn't have to create a TiledImage instance directly; get it asynchronously by + * using {@link OpenSeadragon.Viewer#open} or {@link OpenSeadragon.Viewer#addTiledImage} instead. + * @class TiledImage + * @memberof OpenSeadragon + * @extends OpenSeadragon.EventSource + * @classdesc Handles rendering of tiles for an {@link OpenSeadragon.Viewer}. + * A new instance is created for each TileSource opened. + * @param {Object} options - Configuration for this TiledImage. + * @param {OpenSeadragon.TileSource} options.source - The TileSource that defines this TiledImage. + * @param {OpenSeadragon.Viewer} options.viewer - The Viewer that owns this TiledImage. + * @param {OpenSeadragon.TileCache} options.tileCache - The TileCache for this TiledImage to use. + * @param {OpenSeadragon.Drawer} options.drawer - The Drawer for this TiledImage to draw onto. + * @param {OpenSeadragon.ImageLoader} options.imageLoader - The ImageLoader for this TiledImage to use. + * @param {Number} [options.x=0] - Left position, in viewport coordinates. + * @param {Number} [options.y=0] - Top position, in viewport coordinates. + * @param {Number} [options.width=1] - Width, in viewport coordinates. + * @param {Number} [options.height] - Height, in viewport coordinates. + * @param {OpenSeadragon.Rect} [options.fitBounds] The bounds in viewport coordinates + * to fit the image into. If specified, x, y, width and height get ignored. + * @param {OpenSeadragon.Placement} [options.fitBoundsPlacement=OpenSeadragon.Placement.CENTER] + * How to anchor the image in the bounds if options.fitBounds is set. + * @param {OpenSeadragon.Rect} [options.clip] - An area, in image pixels, to clip to + * (portions of the image outside of this area will not be visible). Only works on + * browsers that support the HTML5 canvas. + * @param {Number} [options.springStiffness] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.animationTime] - See {@link OpenSeadragon.Options}. + * @param {Number} [options.minZoomImageRatio] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.wrapHorizontal] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.wrapVertical] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.immediateRender] - See {@link OpenSeadragon.Options}. + * @param {Number} [options.blendTime] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.alwaysBlend] - See {@link OpenSeadragon.Options}. + * @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}. + * @param {Number} [options.smoothTileEdgesMinZoom] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.iOSDevice] - See {@link OpenSeadragon.Options}. + * @param {Number} [options.opacity=1] - Set to draw at proportional opacity. If zero, images will not draw. + * @param {Boolean} [options.preload=false] - Set true to load even when the image is hidden by zero opacity. + * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible + values. + * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. + * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. + * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.ajaxWithCredentials] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.loadTilesWithAjax] + * Whether to load tile data using AJAX requests. + * Defaults to the setting in {@link OpenSeadragon.Options}. + * @param {Object} [options.ajaxHeaders={}] + * A set of headers to include when making tile AJAX requests. + */ +$.TiledImage = function( options ) { + this._initialized = false; /** - * You shouldn't have to create a TiledImage instance directly; get it asynchronously by - * using {@link OpenSeadragon.Viewer#open} or {@link OpenSeadragon.Viewer#addTiledImage} instead. - * @class TiledImage - * @memberof OpenSeadragon - * @extends OpenSeadragon.EventSource - * @classdesc Handles rendering of tiles for an {@link OpenSeadragon.Viewer}. - * A new instance is created for each TileSource opened. - * @param {Object} options - Configuration for this TiledImage. - * @param {OpenSeadragon.TileSource} options.source - The TileSource that defines this TiledImage. - * @param {OpenSeadragon.Viewer} options.viewer - The Viewer that owns this TiledImage. - * @param {OpenSeadragon.TileCache} options.tileCache - The TileCache for this TiledImage to use. - * @param {OpenSeadragon.Drawer} options.drawer - The Drawer for this TiledImage to draw onto. - * @param {OpenSeadragon.ImageLoader} options.imageLoader - The ImageLoader for this TiledImage to use. - * @param {Number} [options.x=0] - Left position, in viewport coordinates. - * @param {Number} [options.y=0] - Top position, in viewport coordinates. - * @param {Number} [options.width=1] - Width, in viewport coordinates. - * @param {Number} [options.height] - Height, in viewport coordinates. - * @param {OpenSeadragon.Rect} [options.fitBounds] The bounds in viewport coordinates - * to fit the image into. If specified, x, y, width and height get ignored. - * @param {OpenSeadragon.Placement} [options.fitBoundsPlacement=OpenSeadragon.Placement.CENTER] - * How to anchor the image in the bounds if options.fitBounds is set. - * @param {OpenSeadragon.Rect} [options.clip] - An area, in image pixels, to clip to - * (portions of the image outside of this area will not be visible). Only works on - * browsers that support the HTML5 canvas. - * @param {Number} [options.springStiffness] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.animationTime] - See {@link OpenSeadragon.Options}. - * @param {Number} [options.minZoomImageRatio] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.wrapHorizontal] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.wrapVertical] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.immediateRender] - See {@link OpenSeadragon.Options}. - * @param {Number} [options.blendTime] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.alwaysBlend] - See {@link OpenSeadragon.Options}. - * @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}. - * @param {Number} [options.smoothTileEdgesMinZoom] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.iOSDevice] - See {@link OpenSeadragon.Options}. - * @param {Number} [options.opacity=1] - Set to draw at proportional opacity. If zero, images will not draw. - * @param {Boolean} [options.preload=false] - Set true to load even when the image is hidden by zero opacity. - * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible - values. - * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. - * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. - * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.ajaxWithCredentials] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.loadTilesWithAjax] - * Whether to load tile data using AJAX requests. - * Defaults to the setting in {@link OpenSeadragon.Options}. - * @param {Object} [options.ajaxHeaders={}] - * A set of headers to include when making tile AJAX requests. + * The {@link OpenSeadragon.TileSource} that defines this TiledImage. + * @member {OpenSeadragon.TileSource} source + * @memberof OpenSeadragon.TiledImage# */ - $.TiledImage = function( options ) { - this._initialized = false; - /** - * The {@link OpenSeadragon.TileSource} that defines this TiledImage. - * @member {OpenSeadragon.TileSource} source - * @memberof OpenSeadragon.TiledImage# - */ - $.console.assert( options.tileCache, "[TiledImage] options.tileCache is required" ); - $.console.assert( options.drawer, "[TiledImage] options.drawer is required" ); - $.console.assert( options.viewer, "[TiledImage] options.viewer is required" ); - $.console.assert( options.imageLoader, "[TiledImage] options.imageLoader is required" ); - $.console.assert( options.source, "[TiledImage] options.source is required" ); - $.console.assert(!options.clip || options.clip instanceof $.Rect, - "[TiledImage] options.clip must be an OpenSeadragon.Rect if present"); + $.console.assert( options.tileCache, "[TiledImage] options.tileCache is required" ); + $.console.assert( options.drawer, "[TiledImage] options.drawer is required" ); + $.console.assert( options.viewer, "[TiledImage] options.viewer is required" ); + $.console.assert( options.imageLoader, "[TiledImage] options.imageLoader is required" ); + $.console.assert( options.source, "[TiledImage] options.source is required" ); + $.console.assert(!options.clip || options.clip instanceof $.Rect, + "[TiledImage] options.clip must be an OpenSeadragon.Rect if present"); - $.EventSource.call( this ); + $.EventSource.call( this ); - this._tileCache = options.tileCache; - delete options.tileCache; + this._tileCache = options.tileCache; + delete options.tileCache; - this._drawer = options.drawer; - delete options.drawer; + this._drawer = options.drawer; + delete options.drawer; - this._imageLoader = options.imageLoader; - delete options.imageLoader; + this._imageLoader = options.imageLoader; + delete options.imageLoader; - if (options.clip instanceof $.Rect) { - this._clip = options.clip.clone(); - } + if (options.clip instanceof $.Rect) { + this._clip = options.clip.clone(); + } - delete options.clip; + delete options.clip; - var x = options.x || 0; - delete options.x; - var y = options.y || 0; - delete options.y; + var x = options.x || 0; + delete options.x; + var y = options.y || 0; + delete options.y; - // Ratio of zoomable image height to width. - this.normHeight = options.source.dimensions.y / options.source.dimensions.x; - this.contentAspectX = options.source.dimensions.x / options.source.dimensions.y; + // Ratio of zoomable image height to width. + this.normHeight = options.source.dimensions.y / options.source.dimensions.x; + this.contentAspectX = options.source.dimensions.x / options.source.dimensions.y; - var scale = 1; - if ( options.width ) { - scale = options.width; - delete options.width; + var scale = 1; + if ( options.width ) { + scale = options.width; + delete options.width; - if ( options.height ) { - $.console.error( "specifying both width and height to a tiledImage is not supported" ); - delete options.height; - } - } else if ( options.height ) { - scale = options.height / this.normHeight; + if ( options.height ) { + $.console.error( "specifying both width and height to a tiledImage is not supported" ); delete options.height; } + } else if ( options.height ) { + scale = options.height / this.normHeight; + delete options.height; + } - var fitBounds = options.fitBounds; - delete options.fitBounds; - var fitBoundsPlacement = options.fitBoundsPlacement || OpenSeadragon.Placement.CENTER; - delete options.fitBoundsPlacement; + var fitBounds = options.fitBounds; + delete options.fitBounds; + var fitBoundsPlacement = options.fitBoundsPlacement || OpenSeadragon.Placement.CENTER; + delete options.fitBoundsPlacement; - var degrees = options.degrees || 0; - delete options.degrees; + var degrees = options.degrees || 0; + delete options.degrees; - var ajaxHeaders = options.ajaxHeaders; - delete options.ajaxHeaders; + var ajaxHeaders = options.ajaxHeaders; + delete options.ajaxHeaders; - $.extend( true, this, { + $.extend( true, this, { - //internal state properties - viewer: null, - tilesMatrix: {}, // A '3d' dictionary [level][x][y] --> Tile. - coverage: {}, // A '3d' dictionary [level][x][y] --> Boolean; shows what areas have been drawn. - loadingCoverage: {}, // A '3d' dictionary [level][x][y] --> Boolean; shows what areas are loaded or are being loaded/blended. - lastDrawn: [], // An unordered list of Tiles drawn last frame. - lastResetTime: 0, // Last time for which the tiledImage was reset. - _needsDraw: true, // Does the tiledImage need to be drawn again? - _needsUpdate: true, // Does the tiledImage need to update the viewport again? - _hasOpaqueTile: false, // Do we have even one fully opaque tile? - _tilesLoading: 0, // The number of pending tile requests. - _tilesToDraw: [], // info about the tiles currently in the viewport, two deep: array[level][tile] - _lastDrawn: [], // array of tiles that were last fetched by the drawer - _isBlending: false, // Are any tiles still being blended? - _wasBlending: false, // Were any tiles blending before the last draw? - _isTainted: false, // Has a Tile been found with tainted data? - //configurable settings - springStiffness: $.DEFAULT_SETTINGS.springStiffness, - animationTime: $.DEFAULT_SETTINGS.animationTime, - minZoomImageRatio: $.DEFAULT_SETTINGS.minZoomImageRatio, - wrapHorizontal: $.DEFAULT_SETTINGS.wrapHorizontal, - wrapVertical: $.DEFAULT_SETTINGS.wrapVertical, - immediateRender: $.DEFAULT_SETTINGS.immediateRender, - blendTime: $.DEFAULT_SETTINGS.blendTime, - alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend, - minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio, - smoothTileEdgesMinZoom: $.DEFAULT_SETTINGS.smoothTileEdgesMinZoom, - iOSDevice: $.DEFAULT_SETTINGS.iOSDevice, - debugMode: $.DEFAULT_SETTINGS.debugMode, - crossOriginPolicy: $.DEFAULT_SETTINGS.crossOriginPolicy, - ajaxWithCredentials: $.DEFAULT_SETTINGS.ajaxWithCredentials, - placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, - opacity: $.DEFAULT_SETTINGS.opacity, - preload: $.DEFAULT_SETTINGS.preload, - compositeOperation: $.DEFAULT_SETTINGS.compositeOperation, - subPixelRoundingForTransparency: $.DEFAULT_SETTINGS.subPixelRoundingForTransparency, - maxTilesPerFrame: $.DEFAULT_SETTINGS.maxTilesPerFrame - }, options ); + //internal state properties + viewer: null, + tilesMatrix: {}, // A '3d' dictionary [level][x][y] --> Tile. + coverage: {}, // A '3d' dictionary [level][x][y] --> Boolean; shows what areas have been drawn. + loadingCoverage: {}, // A '3d' dictionary [level][x][y] --> Boolean; shows what areas are loaded or are being loaded/blended. + lastDrawn: [], // An unordered list of Tiles drawn last frame. + lastResetTime: 0, // Last time for which the tiledImage was reset. + _needsDraw: true, // Does the tiledImage need to be drawn again? + _needsUpdate: true, // Does the tiledImage need to update the viewport again? + _hasOpaqueTile: false, // Do we have even one fully opaque tile? + _tilesLoading: 0, // The number of pending tile requests. + _tilesToDraw: [], // info about the tiles currently in the viewport, two deep: array[level][tile] + _lastDrawn: [], // array of tiles that were last fetched by the drawer + _isBlending: false, // Are any tiles still being blended? + _wasBlending: false, // Were any tiles blending before the last draw? + _isTainted: false, // Has a Tile been found with tainted data? + //configurable settings + springStiffness: $.DEFAULT_SETTINGS.springStiffness, + animationTime: $.DEFAULT_SETTINGS.animationTime, + minZoomImageRatio: $.DEFAULT_SETTINGS.minZoomImageRatio, + wrapHorizontal: $.DEFAULT_SETTINGS.wrapHorizontal, + wrapVertical: $.DEFAULT_SETTINGS.wrapVertical, + immediateRender: $.DEFAULT_SETTINGS.immediateRender, + blendTime: $.DEFAULT_SETTINGS.blendTime, + alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend, + minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio, + smoothTileEdgesMinZoom: $.DEFAULT_SETTINGS.smoothTileEdgesMinZoom, + iOSDevice: $.DEFAULT_SETTINGS.iOSDevice, + debugMode: $.DEFAULT_SETTINGS.debugMode, + crossOriginPolicy: $.DEFAULT_SETTINGS.crossOriginPolicy, + ajaxWithCredentials: $.DEFAULT_SETTINGS.ajaxWithCredentials, + placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, + opacity: $.DEFAULT_SETTINGS.opacity, + preload: $.DEFAULT_SETTINGS.preload, + compositeOperation: $.DEFAULT_SETTINGS.compositeOperation, + subPixelRoundingForTransparency: $.DEFAULT_SETTINGS.subPixelRoundingForTransparency, + maxTilesPerFrame: $.DEFAULT_SETTINGS.maxTilesPerFrame + }, options ); - this._preload = this.preload; - delete this.preload; + this._preload = this.preload; + delete this.preload; - this._fullyLoaded = false; + this._fullyLoaded = false; - this._xSpring = new $.Spring({ - initial: x, - springStiffness: this.springStiffness, - animationTime: this.animationTime - }); + this._xSpring = new $.Spring({ + initial: x, + springStiffness: this.springStiffness, + animationTime: this.animationTime + }); - this._ySpring = new $.Spring({ - initial: y, - springStiffness: this.springStiffness, - animationTime: this.animationTime - }); + this._ySpring = new $.Spring({ + initial: y, + springStiffness: this.springStiffness, + animationTime: this.animationTime + }); - this._scaleSpring = new $.Spring({ - initial: scale, - springStiffness: this.springStiffness, - animationTime: this.animationTime - }); + this._scaleSpring = new $.Spring({ + initial: scale, + springStiffness: this.springStiffness, + animationTime: this.animationTime + }); - this._degreesSpring = new $.Spring({ - initial: degrees, - springStiffness: this.springStiffness, - animationTime: this.animationTime - }); + this._degreesSpring = new $.Spring({ + initial: degrees, + springStiffness: this.springStiffness, + animationTime: this.animationTime + }); - this._updateForScale(); + this._updateForScale(); - if (fitBounds) { - this.fitBounds(fitBounds, fitBoundsPlacement, true); + if (fitBounds) { + this.fitBounds(fitBounds, fitBoundsPlacement, true); + } + + this._ownAjaxHeaders = {}; + this.setAjaxHeaders(ajaxHeaders, false); + this._initialized = true; +}; + +$.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.TiledImage.prototype */{ + /** + * @returns {Boolean} Whether the TiledImage needs to be drawn. + */ + needsDraw: function() { + return this._needsDraw; + }, + + /** + * Mark the tiled image as needing to be (re)drawn + */ + redraw: function() { + this._needsDraw = true; + }, + + /** + * @returns {Boolean} Whether all tiles necessary for this TiledImage to draw at the current view have been loaded. + */ + getFullyLoaded: function() { + return this._fullyLoaded; + }, + + // private + _setFullyLoaded: function(flag) { + if (flag === this._fullyLoaded) { + return; } - this._ownAjaxHeaders = {}; - this.setAjaxHeaders(ajaxHeaders, false); - this._initialized = true; - }; - - $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.TiledImage.prototype */{ - /** - * @returns {Boolean} Whether the TiledImage needs to be drawn. - */ - needsDraw: function() { - return this._needsDraw; - }, + this._fullyLoaded = flag; /** - * Mark the tiled image as needing to be (re)drawn + * Fired when the TiledImage's "fully loaded" flag (whether all tiles necessary for this TiledImage + * to draw at the current view have been loaded) changes. + * + * @event fully-loaded-change + * @memberof OpenSeadragon.TiledImage + * @type {object} + * @property {Boolean} fullyLoaded - The new "fully loaded" value. + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. */ - redraw: function() { + this.raiseEvent('fully-loaded-change', { + fullyLoaded: this._fullyLoaded + }); + }, + + /** + * Clears all tiles and triggers an update on the next call to + * {@link OpenSeadragon.TiledImage#update}. + */ + reset: function() { + this._tileCache.clearTilesFor(this); + this.lastResetTime = $.now(); + this._needsDraw = true; + }, + + /** + * Updates the TiledImage's bounds, animating if needed. Based on the new + * bounds, updates the levels and tiles to be drawn into the viewport. + * @param viewportChanged Whether the viewport changed meaning tiles need to be updated. + * @returns {Boolean} Whether the TiledImage needs to be drawn. + */ + update: function(viewportChanged) { + let xUpdated = this._xSpring.update(); + let yUpdated = this._ySpring.update(); + let scaleUpdated = this._scaleSpring.update(); + let degreesUpdated = this._degreesSpring.update(); + + let updated = (xUpdated || yUpdated || scaleUpdated || degreesUpdated || this._needsUpdate); + + if (updated || viewportChanged || !this._fullyLoaded){ + let fullyLoadedFlag = this._updateLevelsForViewport(); + this._setFullyLoaded(fullyLoadedFlag); + } + + this._needsUpdate = false; + + if (updated) { + this._updateForScale(); + this._raiseBoundsChange(); this._needsDraw = true; - }, + return true; + } - /** - * @returns {Boolean} Whether all tiles necessary for this TiledImage to draw at the current view have been loaded. - */ - getFullyLoaded: function() { - return this._fullyLoaded; - }, + return false; + }, - // private - _setFullyLoaded: function(flag) { - if (flag === this._fullyLoaded) { + /** + * Mark this TiledImage as having been drawn, so that it will only be drawn + * again if something changes about the image. If the image is still blending, + * this will have no effect. + * @returns {Boolean} whether the item still needs to be drawn due to blending + */ + setDrawn: function(){ + this._needsDraw = this._isBlending || this._wasBlending; + return this._needsDraw; + }, + + /** + * Set the internal _isTainted flag for this TiledImage. Lazy loaded - not + * checked each time a Tile is loaded, but can be set if a consumer of the + * tiles (e.g. a Drawer) discovers a Tile to have tainted data so that further + * checks are not needed and alternative rendering strategies can be used. + * @private + */ + setTainted(isTainted){ + this._isTainted = isTainted; + }, + + /** + * @private + * @returns {Boolean} whether the TiledImage has been marked as tainted + */ + isTainted(){ + return this._isTainted; + }, + + /** + * Destroy the TiledImage (unload current loaded tiles). + */ + destroy: function() { + this.reset(); + + if (this.source.destroy) { + this.source.destroy(this.viewer); + } + }, + + /** + * Get this TiledImage's bounds in viewport coordinates. + * @param {Boolean} [current=false] - Pass true for the current location; + * false for target location. + * @returns {OpenSeadragon.Rect} This TiledImage's bounds in viewport coordinates. + */ + getBounds: function(current) { + return this.getBoundsNoRotate(current) + .rotate(this.getRotation(current), this._getRotationPoint(current)); + }, + + /** + * Get this TiledImage's bounds in viewport coordinates without taking + * rotation into account. + * @param {Boolean} [current=false] - Pass true for the current location; + * false for target location. + * @returns {OpenSeadragon.Rect} This TiledImage's bounds in viewport coordinates. + */ + getBoundsNoRotate: function(current) { + return current ? + new $.Rect( + this._xSpring.current.value, + this._ySpring.current.value, + this._worldWidthCurrent, + this._worldHeightCurrent) : + new $.Rect( + this._xSpring.target.value, + this._ySpring.target.value, + this._worldWidthTarget, + this._worldHeightTarget); + }, + + // deprecated + getWorldBounds: function() { + $.console.error('[TiledImage.getWorldBounds] is deprecated; use TiledImage.getBounds instead'); + return this.getBounds(); + }, + + /** + * Get the bounds of the displayed part of the tiled image. + * @param {Boolean} [current=false] Pass true for the current location, + * false for the target location. + * @returns {$.Rect} The clipped bounds in viewport coordinates. + */ + getClippedBounds: function(current) { + var bounds = this.getBoundsNoRotate(current); + if (this._clip) { + var worldWidth = current ? + this._worldWidthCurrent : this._worldWidthTarget; + var ratio = worldWidth / this.source.dimensions.x; + var clip = this._clip.times(ratio); + bounds = new $.Rect( + bounds.x + clip.x, + bounds.y + clip.y, + clip.width, + clip.height); + } + 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); + if (this.getFlip()) { + bounds.x = Math.max(0, 1 - bounds.x - bounds.width); + } + 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. + */ + getContentSize: function() { + return new $.Point(this.source.dimensions.x, this.source.dimensions.y); + }, + + /** + * @returns {OpenSeadragon.Point} The TiledImage's content size, in window coordinates. + */ + getSizeInWindowCoordinates: function() { + var topLeft = this.imageToWindowCoordinates(new $.Point(0, 0)); + var bottomRight = this.imageToWindowCoordinates(this.getContentSize()); + return new $.Point(bottomRight.x - topLeft.x, bottomRight.y - topLeft.y); + }, + + // private + _viewportToImageDelta: function( viewerX, viewerY, current ) { + var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value); + return new $.Point(viewerX * (this.source.dimensions.x / scale), + viewerY * ((this.source.dimensions.y * this.contentAspectX) / scale)); + }, + + /** + * Translates from OpenSeadragon viewer coordinate system to image coordinate system. + * This method can be called either by passing X,Y coordinates or an {@link OpenSeadragon.Point}. + * @param {Number|OpenSeadragon.Point} viewerX - The X coordinate or point in viewport coordinate system. + * @param {Number} [viewerY] - The Y coordinate in viewport coordinate system. + * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. + * @returns {OpenSeadragon.Point} A point representing the coordinates in the image. + */ + viewportToImageCoordinates: function(viewerX, viewerY, current) { + var point; + if (viewerX instanceof $.Point) { + //they passed a point instead of individual components + current = viewerY; + point = viewerX; + } else { + point = new $.Point(viewerX, viewerY); + } + + point = point.rotate(-this.getRotation(current), this._getRotationPoint(current)); + return current ? + this._viewportToImageDelta( + point.x - this._xSpring.current.value, + point.y - this._ySpring.current.value) : + this._viewportToImageDelta( + point.x - this._xSpring.target.value, + point.y - this._ySpring.target.value); + }, + + // private + _imageToViewportDelta: function( imageX, imageY, current ) { + var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value); + return new $.Point((imageX / this.source.dimensions.x) * scale, + (imageY / this.source.dimensions.y / this.contentAspectX) * scale); + }, + + /** + * Translates from image coordinate system to OpenSeadragon viewer coordinate system + * This method can be called either by passing X,Y coordinates or an {@link OpenSeadragon.Point}. + * @param {Number|OpenSeadragon.Point} imageX - The X coordinate or point in image coordinate system. + * @param {Number} [imageY] - The Y coordinate in image coordinate system. + * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. + * @returns {OpenSeadragon.Point} A point representing the coordinates in the viewport. + */ + imageToViewportCoordinates: function(imageX, imageY, current) { + if (imageX instanceof $.Point) { + //they passed a point instead of individual components + current = imageY; + imageY = imageX.y; + imageX = imageX.x; + } + + var point = this._imageToViewportDelta(imageX, imageY, current); + if (current) { + point.x += this._xSpring.current.value; + point.y += this._ySpring.current.value; + } else { + point.x += this._xSpring.target.value; + point.y += this._ySpring.target.value; + } + + return point.rotate(this.getRotation(current), this._getRotationPoint(current)); + }, + + /** + * Translates from a rectangle which describes a portion of the image in + * pixel coordinates to OpenSeadragon viewport rectangle coordinates. + * This method can be called either by passing X,Y,width,height or an {@link OpenSeadragon.Rect}. + * @param {Number|OpenSeadragon.Rect} imageX - The left coordinate or rectangle in image coordinate system. + * @param {Number} [imageY] - The top coordinate in image coordinate system. + * @param {Number} [pixelWidth] - The width in pixel of the rectangle. + * @param {Number} [pixelHeight] - The height in pixel of the rectangle. + * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. + * @returns {OpenSeadragon.Rect} A rect representing the coordinates in the viewport. + */ + imageToViewportRectangle: function(imageX, imageY, pixelWidth, pixelHeight, current) { + var rect = imageX; + if (rect instanceof $.Rect) { + //they passed a rect instead of individual components + current = imageY; + } else { + rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight); + } + + var coordA = this.imageToViewportCoordinates(rect.getTopLeft(), current); + var coordB = this._imageToViewportDelta(rect.width, rect.height, current); + + return new $.Rect( + coordA.x, + coordA.y, + coordB.x, + coordB.y, + rect.degrees + this.getRotation(current) + ); + }, + + /** + * Translates from a rectangle which describes a portion of + * the viewport in point coordinates to image rectangle coordinates. + * This method can be called either by passing X,Y,width,height or an {@link OpenSeadragon.Rect}. + * @param {Number|OpenSeadragon.Rect} viewerX - The left coordinate or rectangle in viewport coordinate system. + * @param {Number} [viewerY] - The top coordinate in viewport coordinate system. + * @param {Number} [pointWidth] - The width in viewport coordinate system. + * @param {Number} [pointHeight] - The height in viewport coordinate system. + * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. + * @returns {OpenSeadragon.Rect} A rect representing the coordinates in the image. + */ + viewportToImageRectangle: function( viewerX, viewerY, pointWidth, pointHeight, current ) { + var rect = viewerX; + if (viewerX instanceof $.Rect) { + //they passed a rect instead of individual components + current = viewerY; + } else { + rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight); + } + + var coordA = this.viewportToImageCoordinates(rect.getTopLeft(), current); + var coordB = this._viewportToImageDelta(rect.width, rect.height, current); + + return new $.Rect( + coordA.x, + coordA.y, + coordB.x, + coordB.y, + rect.degrees - this.getRotation(current) + ); + }, + + /** + * Convert pixel coordinates relative to the viewer element to image + * coordinates. + * @param {OpenSeadragon.Point} pixel + * @returns {OpenSeadragon.Point} + */ + viewerElementToImageCoordinates: function( pixel ) { + var point = this.viewport.pointFromPixel( pixel, true ); + return this.viewportToImageCoordinates( point ); + }, + + /** + * Convert pixel coordinates relative to the image to + * viewer element coordinates. + * @param {OpenSeadragon.Point} pixel + * @returns {OpenSeadragon.Point} + */ + imageToViewerElementCoordinates: function( pixel ) { + var point = this.imageToViewportCoordinates( pixel ); + return this.viewport.pixelFromPoint( point, true ); + }, + + /** + * Convert pixel coordinates relative to the window to image coordinates. + * @param {OpenSeadragon.Point} pixel + * @returns {OpenSeadragon.Point} + */ + windowToImageCoordinates: function( pixel ) { + var viewerCoordinates = pixel.minus( + OpenSeadragon.getElementPosition( this.viewer.element )); + return this.viewerElementToImageCoordinates( viewerCoordinates ); + }, + + /** + * Convert image coordinates to pixel coordinates relative to the window. + * @param {OpenSeadragon.Point} pixel + * @returns {OpenSeadragon.Point} + */ + imageToWindowCoordinates: function( pixel ) { + var viewerCoordinates = this.imageToViewerElementCoordinates( pixel ); + return viewerCoordinates.plus( + OpenSeadragon.getElementPosition( this.viewer.element )); + }, + + // private + // Convert rectangle in viewport coordinates to this tiled image point + // coordinates (x in [0, 1] and y in [0, aspectRatio]) + _viewportToTiledImageRectangle: function(rect) { + var scale = this._scaleSpring.current.value; + rect = rect.rotate(-this.getRotation(true), this._getRotationPoint(true)); + return new $.Rect( + (rect.x - this._xSpring.current.value) / scale, + (rect.y - this._ySpring.current.value) / scale, + rect.width / scale, + rect.height / scale, + rect.degrees); + }, + + /** + * Convert a viewport zoom to an image zoom. + * Image zoom: ratio of the original image size to displayed image size. + * 1 means original image size, 0.5 half size... + * Viewport zoom: ratio of the displayed image's width to viewport's width. + * 1 means identical width, 2 means image's width is twice the viewport's width... + * @function + * @param {Number} viewportZoom The viewport zoom + * @returns {Number} imageZoom The image zoom + */ + viewportToImageZoom: function( viewportZoom ) { + var ratio = this._scaleSpring.current.value * + this.viewport._containerInnerSize.x / this.source.dimensions.x; + return ratio * viewportZoom; + }, + + /** + * Convert an image zoom to a viewport zoom. + * Image zoom: ratio of the original image size to displayed image size. + * 1 means original image size, 0.5 half size... + * Viewport zoom: ratio of the displayed image's width to viewport's width. + * 1 means identical width, 2 means image's width is twice the viewport's width... + * Note: not accurate with multi-image. + * @function + * @param {Number} imageZoom The image zoom + * @returns {Number} viewportZoom The viewport zoom + */ + imageToViewportZoom: function( imageZoom ) { + var ratio = this._scaleSpring.current.value * + this.viewport._containerInnerSize.x / this.source.dimensions.x; + return imageZoom / ratio; + }, + + /** + * Sets the TiledImage's position in the world. + * @param {OpenSeadragon.Point} position - The new position, in viewport coordinates. + * @param {Boolean} [immediately=false] - Whether to animate to the new position or snap immediately. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + setPosition: function(position, immediately) { + var sameTarget = (this._xSpring.target.value === position.x && + this._ySpring.target.value === position.y); + + if (immediately) { + if (sameTarget && this._xSpring.current.value === position.x && + this._ySpring.current.value === position.y) { return; } - this._fullyLoaded = flag; - - /** - * Fired when the TiledImage's "fully loaded" flag (whether all tiles necessary for this TiledImage - * to draw at the current view have been loaded) changes. - * - * @event fully-loaded-change - * @memberof OpenSeadragon.TiledImage - * @type {object} - * @property {Boolean} fullyLoaded - The new "fully loaded" value. - * @property {OpenSeadragon.TiledImage} eventSource - A reference to the TiledImage which raised the event. - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.raiseEvent('fully-loaded-change', { - fullyLoaded: this._fullyLoaded - }); - }, - - /** - * Clears all tiles and triggers an update on the next call to - * {@link OpenSeadragon.TiledImage#update}. - */ - reset: function() { - this._tileCache.clearTilesFor(this); - this.lastResetTime = $.now(); - this._needsDraw = true; - }, - - /** - * Updates the TiledImage's bounds, animating if needed. Based on the new - * bounds, updates the levels and tiles to be drawn into the viewport. - * @param viewportChanged Whether the viewport changed meaning tiles need to be updated. - * @returns {Boolean} Whether the TiledImage needs to be drawn. - */ - update: function(viewportChanged) { - let xUpdated = this._xSpring.update(); - let yUpdated = this._ySpring.update(); - let scaleUpdated = this._scaleSpring.update(); - let degreesUpdated = this._degreesSpring.update(); - - let updated = (xUpdated || yUpdated || scaleUpdated || degreesUpdated || this._needsUpdate); - - if (updated || viewportChanged || !this._fullyLoaded){ - let fullyLoadedFlag = this._updateLevelsForViewport(); - this._setFullyLoaded(fullyLoadedFlag); - } - - this._needsUpdate = false; - - if (updated) { - this._updateForScale(); - this._raiseBoundsChange(); - this._needsDraw = true; - return true; - } - - return false; - }, - - /** - * Mark this TiledImage as having been drawn, so that it will only be drawn - * again if something changes about the image. If the image is still blending, - * this will have no effect. - * @returns {Boolean} whether the item still needs to be drawn due to blending - */ - setDrawn: function(){ - this._needsDraw = this._isBlending || this._wasBlending; - return this._needsDraw; - }, - - /** - * Set the internal _isTainted flag for this TiledImage. Lazy loaded - not - * checked each time a Tile is loaded, but can be set if a consumer of the - * tiles (e.g. a Drawer) discovers a Tile to have tainted data so that further - * checks are not needed and alternative rendering strategies can be used. - * @private - */ - setTainted(isTainted){ - this._isTainted = isTainted; - }, - - /** - * @private - * @returns {Boolean} whether the TiledImage has been marked as tainted - */ - isTainted(){ - return this._isTainted; - }, - - /** - * Destroy the TiledImage (unload current loaded tiles). - */ - destroy: function() { - this.reset(); - - if (this.source.destroy) { - this.source.destroy(this.viewer); - } - }, - - /** - * Get this TiledImage's bounds in viewport coordinates. - * @param {Boolean} [current=false] - Pass true for the current location; - * false for target location. - * @returns {OpenSeadragon.Rect} This TiledImage's bounds in viewport coordinates. - */ - getBounds: function(current) { - return this.getBoundsNoRotate(current) - .rotate(this.getRotation(current), this._getRotationPoint(current)); - }, - - /** - * Get this TiledImage's bounds in viewport coordinates without taking - * rotation into account. - * @param {Boolean} [current=false] - Pass true for the current location; - * false for target location. - * @returns {OpenSeadragon.Rect} This TiledImage's bounds in viewport coordinates. - */ - getBoundsNoRotate: function(current) { - return current ? - new $.Rect( - this._xSpring.current.value, - this._ySpring.current.value, - this._worldWidthCurrent, - this._worldHeightCurrent) : - new $.Rect( - this._xSpring.target.value, - this._ySpring.target.value, - this._worldWidthTarget, - this._worldHeightTarget); - }, - - // deprecated - getWorldBounds: function() { - $.console.error('[TiledImage.getWorldBounds] is deprecated; use TiledImage.getBounds instead'); - return this.getBounds(); - }, - - /** - * Get the bounds of the displayed part of the tiled image. - * @param {Boolean} [current=false] Pass true for the current location, - * false for the target location. - * @returns {$.Rect} The clipped bounds in viewport coordinates. - */ - getClippedBounds: function(current) { - var bounds = this.getBoundsNoRotate(current); - if (this._clip) { - var worldWidth = current ? - this._worldWidthCurrent : this._worldWidthTarget; - var ratio = worldWidth / this.source.dimensions.x; - var clip = this._clip.times(ratio); - bounds = new $.Rect( - bounds.x + clip.x, - bounds.y + clip.y, - clip.width, - clip.height); - } - 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); - if (this.getFlip()) { - bounds.x = Math.max(0, 1 - bounds.x - bounds.width); - } - 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. - */ - getContentSize: function() { - return new $.Point(this.source.dimensions.x, this.source.dimensions.y); - }, - - /** - * @returns {OpenSeadragon.Point} The TiledImage's content size, in window coordinates. - */ - getSizeInWindowCoordinates: function() { - var topLeft = this.imageToWindowCoordinates(new $.Point(0, 0)); - var bottomRight = this.imageToWindowCoordinates(this.getContentSize()); - return new $.Point(bottomRight.x - topLeft.x, bottomRight.y - topLeft.y); - }, - - // private - _viewportToImageDelta: function( viewerX, viewerY, current ) { - var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value); - return new $.Point(viewerX * (this.source.dimensions.x / scale), - viewerY * ((this.source.dimensions.y * this.contentAspectX) / scale)); - }, - - /** - * Translates from OpenSeadragon viewer coordinate system to image coordinate system. - * This method can be called either by passing X,Y coordinates or an {@link OpenSeadragon.Point}. - * @param {Number|OpenSeadragon.Point} viewerX - The X coordinate or point in viewport coordinate system. - * @param {Number} [viewerY] - The Y coordinate in viewport coordinate system. - * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. - * @returns {OpenSeadragon.Point} A point representing the coordinates in the image. - */ - viewportToImageCoordinates: function(viewerX, viewerY, current) { - var point; - if (viewerX instanceof $.Point) { - //they passed a point instead of individual components - current = viewerY; - point = viewerX; - } else { - point = new $.Point(viewerX, viewerY); - } - - point = point.rotate(-this.getRotation(current), this._getRotationPoint(current)); - return current ? - this._viewportToImageDelta( - point.x - this._xSpring.current.value, - point.y - this._ySpring.current.value) : - this._viewportToImageDelta( - point.x - this._xSpring.target.value, - point.y - this._ySpring.target.value); - }, - - // private - _imageToViewportDelta: function( imageX, imageY, current ) { - var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value); - return new $.Point((imageX / this.source.dimensions.x) * scale, - (imageY / this.source.dimensions.y / this.contentAspectX) * scale); - }, - - /** - * Translates from image coordinate system to OpenSeadragon viewer coordinate system - * This method can be called either by passing X,Y coordinates or an {@link OpenSeadragon.Point}. - * @param {Number|OpenSeadragon.Point} imageX - The X coordinate or point in image coordinate system. - * @param {Number} [imageY] - The Y coordinate in image coordinate system. - * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. - * @returns {OpenSeadragon.Point} A point representing the coordinates in the viewport. - */ - imageToViewportCoordinates: function(imageX, imageY, current) { - if (imageX instanceof $.Point) { - //they passed a point instead of individual components - current = imageY; - imageY = imageX.y; - imageX = imageX.x; - } - - var point = this._imageToViewportDelta(imageX, imageY, current); - if (current) { - point.x += this._xSpring.current.value; - point.y += this._ySpring.current.value; - } else { - point.x += this._xSpring.target.value; - point.y += this._ySpring.target.value; - } - - return point.rotate(this.getRotation(current), this._getRotationPoint(current)); - }, - - /** - * Translates from a rectangle which describes a portion of the image in - * pixel coordinates to OpenSeadragon viewport rectangle coordinates. - * This method can be called either by passing X,Y,width,height or an {@link OpenSeadragon.Rect}. - * @param {Number|OpenSeadragon.Rect} imageX - The left coordinate or rectangle in image coordinate system. - * @param {Number} [imageY] - The top coordinate in image coordinate system. - * @param {Number} [pixelWidth] - The width in pixel of the rectangle. - * @param {Number} [pixelHeight] - The height in pixel of the rectangle. - * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. - * @returns {OpenSeadragon.Rect} A rect representing the coordinates in the viewport. - */ - imageToViewportRectangle: function(imageX, imageY, pixelWidth, pixelHeight, current) { - var rect = imageX; - if (rect instanceof $.Rect) { - //they passed a rect instead of individual components - current = imageY; - } else { - rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight); - } - - var coordA = this.imageToViewportCoordinates(rect.getTopLeft(), current); - var coordB = this._imageToViewportDelta(rect.width, rect.height, current); - - return new $.Rect( - coordA.x, - coordA.y, - coordB.x, - coordB.y, - rect.degrees + this.getRotation(current) - ); - }, - - /** - * Translates from a rectangle which describes a portion of - * the viewport in point coordinates to image rectangle coordinates. - * This method can be called either by passing X,Y,width,height or an {@link OpenSeadragon.Rect}. - * @param {Number|OpenSeadragon.Rect} viewerX - The left coordinate or rectangle in viewport coordinate system. - * @param {Number} [viewerY] - The top coordinate in viewport coordinate system. - * @param {Number} [pointWidth] - The width in viewport coordinate system. - * @param {Number} [pointHeight] - The height in viewport coordinate system. - * @param {Boolean} [current=false] - Pass true to use the current location; false for target location. - * @returns {OpenSeadragon.Rect} A rect representing the coordinates in the image. - */ - viewportToImageRectangle: function( viewerX, viewerY, pointWidth, pointHeight, current ) { - var rect = viewerX; - if (viewerX instanceof $.Rect) { - //they passed a rect instead of individual components - current = viewerY; - } else { - rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight); - } - - var coordA = this.viewportToImageCoordinates(rect.getTopLeft(), current); - var coordB = this._viewportToImageDelta(rect.width, rect.height, current); - - return new $.Rect( - coordA.x, - coordA.y, - coordB.x, - coordB.y, - rect.degrees - this.getRotation(current) - ); - }, - - /** - * Convert pixel coordinates relative to the viewer element to image - * coordinates. - * @param {OpenSeadragon.Point} pixel - * @returns {OpenSeadragon.Point} - */ - viewerElementToImageCoordinates: function( pixel ) { - var point = this.viewport.pointFromPixel( pixel, true ); - return this.viewportToImageCoordinates( point ); - }, - - /** - * Convert pixel coordinates relative to the image to - * viewer element coordinates. - * @param {OpenSeadragon.Point} pixel - * @returns {OpenSeadragon.Point} - */ - imageToViewerElementCoordinates: function( pixel ) { - var point = this.imageToViewportCoordinates( pixel ); - return this.viewport.pixelFromPoint( point, true ); - }, - - /** - * Convert pixel coordinates relative to the window to image coordinates. - * @param {OpenSeadragon.Point} pixel - * @returns {OpenSeadragon.Point} - */ - windowToImageCoordinates: function( pixel ) { - var viewerCoordinates = pixel.minus( - OpenSeadragon.getElementPosition( this.viewer.element )); - return this.viewerElementToImageCoordinates( viewerCoordinates ); - }, - - /** - * Convert image coordinates to pixel coordinates relative to the window. - * @param {OpenSeadragon.Point} pixel - * @returns {OpenSeadragon.Point} - */ - imageToWindowCoordinates: function( pixel ) { - var viewerCoordinates = this.imageToViewerElementCoordinates( pixel ); - return viewerCoordinates.plus( - OpenSeadragon.getElementPosition( this.viewer.element )); - }, - - // private - // Convert rectangle in viewport coordinates to this tiled image point - // coordinates (x in [0, 1] and y in [0, aspectRatio]) - _viewportToTiledImageRectangle: function(rect) { - var scale = this._scaleSpring.current.value; - rect = rect.rotate(-this.getRotation(true), this._getRotationPoint(true)); - return new $.Rect( - (rect.x - this._xSpring.current.value) / scale, - (rect.y - this._ySpring.current.value) / scale, - rect.width / scale, - rect.height / scale, - rect.degrees); - }, - - /** - * Convert a viewport zoom to an image zoom. - * Image zoom: ratio of the original image size to displayed image size. - * 1 means original image size, 0.5 half size... - * Viewport zoom: ratio of the displayed image's width to viewport's width. - * 1 means identical width, 2 means image's width is twice the viewport's width... - * @function - * @param {Number} viewportZoom The viewport zoom - * @returns {Number} imageZoom The image zoom - */ - viewportToImageZoom: function( viewportZoom ) { - var ratio = this._scaleSpring.current.value * - this.viewport._containerInnerSize.x / this.source.dimensions.x; - return ratio * viewportZoom; - }, - - /** - * Convert an image zoom to a viewport zoom. - * Image zoom: ratio of the original image size to displayed image size. - * 1 means original image size, 0.5 half size... - * Viewport zoom: ratio of the displayed image's width to viewport's width. - * 1 means identical width, 2 means image's width is twice the viewport's width... - * Note: not accurate with multi-image. - * @function - * @param {Number} imageZoom The image zoom - * @returns {Number} viewportZoom The viewport zoom - */ - imageToViewportZoom: function( imageZoom ) { - var ratio = this._scaleSpring.current.value * - this.viewport._containerInnerSize.x / this.source.dimensions.x; - return imageZoom / ratio; - }, - - /** - * Sets the TiledImage's position in the world. - * @param {OpenSeadragon.Point} position - The new position, in viewport coordinates. - * @param {Boolean} [immediately=false] - Whether to animate to the new position or snap immediately. - * @fires OpenSeadragon.TiledImage.event:bounds-change - */ - setPosition: function(position, immediately) { - var sameTarget = (this._xSpring.target.value === position.x && - this._ySpring.target.value === position.y); - - if (immediately) { - if (sameTarget && this._xSpring.current.value === position.x && - this._ySpring.current.value === position.y) { - return; - } - - this._xSpring.resetTo(position.x); - this._ySpring.resetTo(position.y); - this._needsDraw = true; - this._needsUpdate = true; - } else { - if (sameTarget) { - return; - } - - this._xSpring.springTo(position.x); - this._ySpring.springTo(position.y); - this._needsDraw = true; - this._needsUpdate = true; - } - - if (!sameTarget) { - this._raiseBoundsChange(); - } - }, - - /** - * Sets the TiledImage's width in the world, adjusting the height to match based on aspect ratio. - * @param {Number} width - The new width, in viewport coordinates. - * @param {Boolean} [immediately=false] - Whether to animate to the new size or snap immediately. - * @fires OpenSeadragon.TiledImage.event:bounds-change - */ - setWidth: function(width, immediately) { - this._setScale(width, immediately); - }, - - /** - * Sets the TiledImage's height in the world, adjusting the width to match based on aspect ratio. - * @param {Number} height - The new height, in viewport coordinates. - * @param {Boolean} [immediately=false] - Whether to animate to the new size or snap immediately. - * @fires OpenSeadragon.TiledImage.event:bounds-change - */ - setHeight: function(height, immediately) { - this._setScale(height / this.normHeight, immediately); - }, - - /** - * Sets an array of polygons to crop the TiledImage during draw tiles. - * The render function will use the default non-zero winding rule. - * @param {OpenSeadragon.Point[][]} polygons - represented in an array of point object in image coordinates. - * Example format: [ - * [{x: 197, y:172}, {x: 226, y:172}, {x: 226, y:198}, {x: 197, y:198}], // First polygon - * [{x: 328, y:200}, {x: 330, y:199}, {x: 332, y:201}, {x: 329, y:202}] // Second polygon - * [{x: 321, y:201}, {x: 356, y:205}, {x: 341, y:250}] // Third polygon - * ] - */ - setCroppingPolygons: function( polygons ) { - var isXYObject = function(obj) { - return obj instanceof $.Point || (typeof obj.x === 'number' && typeof obj.y === 'number'); - }; - - var objectToSimpleXYObject = function(objs) { - return objs.map(function(obj) { - try { - if (isXYObject(obj)) { - return { x: obj.x, y: obj.y }; - } else { - throw new Error(); - } - } catch(e) { - throw new Error('A Provided cropping polygon point is not supported'); - } - }); - }; - - try { - if (!$.isArray(polygons)) { - throw new Error('Provided cropping polygon is not an array'); - } - this._croppingPolygons = polygons.map(function(polygon){ - return objectToSimpleXYObject(polygon); - }); - this._needsDraw = true; - } catch (e) { - $.console.error('[TiledImage.setCroppingPolygons] Cropping polygon format not supported'); - $.console.error(e); - this.resetCroppingPolygons(); - } - }, - - /** - * Resets the cropping polygons, thus next render will remove all cropping - * polygon effects. - */ - resetCroppingPolygons: function() { - this._croppingPolygons = null; - this._needsDraw = true; - }, - - /** - * Positions and scales the TiledImage to fit in the specified bounds. - * Note: this method fires OpenSeadragon.TiledImage.event:bounds-change - * twice - * @param {OpenSeadragon.Rect} bounds The bounds to fit the image into. - * @param {OpenSeadragon.Placement} [anchor=OpenSeadragon.Placement.CENTER] - * How to anchor the image in the bounds. - * @param {Boolean} [immediately=false] Whether to animate to the new size - * or snap immediately. - * @fires OpenSeadragon.TiledImage.event:bounds-change - */ - fitBounds: function(bounds, anchor, immediately) { - anchor = anchor || $.Placement.CENTER; - var anchorProperties = $.Placement.properties[anchor]; - var aspectRatio = this.contentAspectX; - var xOffset = 0; - var yOffset = 0; - var displayedWidthRatio = 1; - var displayedHeightRatio = 1; - if (this._clip) { - aspectRatio = this._clip.getAspectRatio(); - displayedWidthRatio = this._clip.width / this.source.dimensions.x; - displayedHeightRatio = this._clip.height / this.source.dimensions.y; - if (bounds.getAspectRatio() > aspectRatio) { - xOffset = this._clip.x / this._clip.height * bounds.height; - yOffset = this._clip.y / this._clip.height * bounds.height; - } else { - xOffset = this._clip.x / this._clip.width * bounds.width; - yOffset = this._clip.y / this._clip.width * bounds.width; - } - } - - if (bounds.getAspectRatio() > aspectRatio) { - // We will have margins on the X axis - var height = bounds.height / displayedHeightRatio; - var marginLeft = 0; - if (anchorProperties.isHorizontallyCentered) { - marginLeft = (bounds.width - bounds.height * aspectRatio) / 2; - } else if (anchorProperties.isRight) { - marginLeft = bounds.width - bounds.height * aspectRatio; - } - this.setPosition( - new $.Point(bounds.x - xOffset + marginLeft, bounds.y - yOffset), - immediately); - this.setHeight(height, immediately); - } else { - // We will have margins on the Y axis - var width = bounds.width / displayedWidthRatio; - var marginTop = 0; - if (anchorProperties.isVerticallyCentered) { - marginTop = (bounds.height - bounds.width / aspectRatio) / 2; - } else if (anchorProperties.isBottom) { - marginTop = bounds.height - bounds.width / aspectRatio; - } - this.setPosition( - new $.Point(bounds.x - xOffset, bounds.y - yOffset + marginTop), - immediately); - this.setWidth(width, immediately); - } - }, - - /** - * @returns {OpenSeadragon.Rect|null} The TiledImage's current clip rectangle, - * in image pixels, or null if none. - */ - getClip: function() { - if (this._clip) { - return this._clip.clone(); - } - - return null; - }, - - /** - * @param {OpenSeadragon.Rect|null} newClip - An area, in image pixels, to clip to - * (portions of the image outside of this area will not be visible). Only works on - * browsers that support the HTML5 canvas. - * @fires OpenSeadragon.TiledImage.event:clip-change - */ - setClip: function(newClip) { - $.console.assert(!newClip || newClip instanceof $.Rect, - "[TiledImage.setClip] newClip must be an OpenSeadragon.Rect or null"); - - if (newClip instanceof $.Rect) { - this._clip = newClip.clone(); - } else { - this._clip = null; - } - - this._needsDraw = true; - /** - * Raised when the TiledImage's clip is changed. - * @event clip-change - * @memberOf OpenSeadragon.TiledImage - * @type {object} - * @property {OpenSeadragon.TiledImage} eventSource - A reference to the - * TiledImage which raised the event. - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.raiseEvent('clip-change'); - }, - - /** - * @returns {Boolean} Whether the TiledImage should be flipped before rendering. - */ - getFlip: function() { - 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; - }, - - get flipped(){ - return this._flipped; - }, - set flipped(flipped){ - let changed = this._flipped !== !!flipped; - this._flipped = !!flipped; - if(changed){ - this.update(true); - this._needsDraw = true; - this._raiseBoundsChange(); - } - }, - - get wrapHorizontal(){ - return this._wrapHorizontal; - }, - set wrapHorizontal(wrap){ - let changed = this._wrapHorizontal !== !!wrap; - this._wrapHorizontal = !!wrap; - if(this._initialized && changed){ - this.update(true); - this._needsDraw = true; - // this._raiseBoundsChange(); - } - }, - - get wrapVertical(){ - return this._wrapVertical; - }, - set wrapVertical(wrap){ - let changed = this._wrapVertical !== !!wrap; - this._wrapVertical = !!wrap; - if(this._initialized && changed){ - this.update(true); - this._needsDraw = true; - // this._raiseBoundsChange(); - } - }, - - get debugMode(){ - return this._debugMode; - }, - set debugMode(debug){ - this._debugMode = !!debug; - this._needsDraw = true; - }, - - /** - * @returns {Number} The TiledImage's current opacity. - */ - getOpacity: function() { - return this.opacity; - }, - - /** - * @param {Number} opacity Opacity the tiled image should be drawn at. - * @fires OpenSeadragon.TiledImage.event:opacity-change - */ - setOpacity: function(opacity) { - this.opacity = opacity; - }, - - get opacity() { - return this._opacity; - }, - - set opacity(opacity) { - if (opacity === this.opacity) { - return; - } - - this._opacity = opacity; - this._needsDraw = true; - /** - * Raised when the TiledImage's opacity is changed. - * @event opacity-change - * @memberOf OpenSeadragon.TiledImage - * @type {object} - * @property {Number} opacity - The new opacity value. - * @property {OpenSeadragon.TiledImage} eventSource - A reference to the - * TiledImage which raised the event. - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.raiseEvent('opacity-change', { - opacity: this.opacity - }); - }, - - /** - * @returns {Boolean} whether the tiledImage can load its tiles even when it has zero opacity. - */ - getPreload: function() { - return this._preload; - }, - - /** - * Set true to load even when hidden. Set false to block loading when hidden. - */ - setPreload: function(preload) { - this._preload = !!preload; - this._needsDraw = true; - }, - - /** - * Get the rotation of this tiled image in degrees. - * @param {Boolean} [current=false] True for current rotation, false for target. - * @returns {Number} the rotation of this tiled image in degrees. - */ - getRotation: function(current) { - return current ? - this._degreesSpring.current.value : - this._degreesSpring.target.value; - }, - - /** - * Set the current rotation of this tiled image in degrees. - * @param {Number} degrees the rotation in degrees. - * @param {Boolean} [immediately=false] Whether to animate to the new angle - * or rotate immediately. - * @fires OpenSeadragon.TiledImage.event:bounds-change - */ - setRotation: function(degrees, immediately) { - if (this._degreesSpring.target.value === degrees && - this._degreesSpring.isAtTargetValue()) { - return; - } - if (immediately) { - this._degreesSpring.resetTo(degrees); - } else { - this._degreesSpring.springTo(degrees); - } + this._xSpring.resetTo(position.x); + this._ySpring.resetTo(position.y); this._needsDraw = true; this._needsUpdate = true; - this._raiseBoundsChange(); - }, - - /** - * Get the region of this tiled image that falls within the viewport. - * @returns {OpenSeadragon.Rect} the region of this tiled image that falls within the viewport. - * Returns false for images with opacity==0 unless preload==true - */ - getDrawArea: function(){ - - if( this._opacity === 0 && !this._preload){ - return false; - } - - var drawArea = this._viewportToTiledImageRectangle( - this.viewport.getBoundsWithMargins(true)); - - if (!this.wrapHorizontal && !this.wrapVertical) { - var tiledImageBounds = this._viewportToTiledImageRectangle( - this.getClippedBounds(true)); - drawArea = drawArea.intersection(tiledImageBounds); - } - - return drawArea; - }, - - /** - * - * @returns {Array} Array of Tiles that make up the current view - */ - getTilesToDraw: function(){ - // start with all the tiles added to this._tilesToDraw during the most recent - // call to this.update. Then update them so the blending and coverage properties - // are updated based on the current time - let tileArray = this._tilesToDraw.flat(); - - // update all tiles, which can change the coverage provided - this._updateTilesInViewport(tileArray); - - // _tilesToDraw might have been updated by the update; refresh it - tileArray = this._tilesToDraw.flat(); - - // mark the tiles as being drawn, so that they won't be discarded from - // the tileCache - tileArray.forEach(tileInfo => { - tileInfo.tile.beingDrawn = true; - }); - this._lastDrawn = tileArray; - return tileArray; - }, - - /** - * Get the point around which this tiled image is rotated - * @private - * @param {Boolean} current True for current rotation point, false for target. - * @returns {OpenSeadragon.Point} - */ - _getRotationPoint: function(current) { - return this.getBoundsNoRotate(current).getCenter(); - }, - - get compositeOperation(){ - return this._compositeOperation; - }, - - set compositeOperation(compositeOperation){ - - if (compositeOperation === this._compositeOperation) { + } else { + if (sameTarget) { return; } - this._compositeOperation = compositeOperation; + + this._xSpring.springTo(position.x); + this._ySpring.springTo(position.y); this._needsDraw = true; - /** - * Raised when the TiledImage's opacity is changed. - * @event composite-operation-change - * @memberOf OpenSeadragon.TiledImage - * @type {object} - * @property {String} compositeOperation - The new compositeOperation value. - * @property {OpenSeadragon.TiledImage} eventSource - A reference to the - * TiledImage which raised the event. - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.raiseEvent('composite-operation-change', { - compositeOperation: this._compositeOperation + this._needsUpdate = true; + } + + if (!sameTarget) { + this._raiseBoundsChange(); + } + }, + + /** + * Sets the TiledImage's width in the world, adjusting the height to match based on aspect ratio. + * @param {Number} width - The new width, in viewport coordinates. + * @param {Boolean} [immediately=false] - Whether to animate to the new size or snap immediately. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + setWidth: function(width, immediately) { + this._setScale(width, immediately); + }, + + /** + * Sets the TiledImage's height in the world, adjusting the width to match based on aspect ratio. + * @param {Number} height - The new height, in viewport coordinates. + * @param {Boolean} [immediately=false] - Whether to animate to the new size or snap immediately. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + setHeight: function(height, immediately) { + this._setScale(height / this.normHeight, immediately); + }, + + /** + * Sets an array of polygons to crop the TiledImage during draw tiles. + * The render function will use the default non-zero winding rule. + * @param {OpenSeadragon.Point[][]} polygons - represented in an array of point object in image coordinates. + * Example format: [ + * [{x: 197, y:172}, {x: 226, y:172}, {x: 226, y:198}, {x: 197, y:198}], // First polygon + * [{x: 328, y:200}, {x: 330, y:199}, {x: 332, y:201}, {x: 329, y:202}] // Second polygon + * [{x: 321, y:201}, {x: 356, y:205}, {x: 341, y:250}] // Third polygon + * ] + */ + setCroppingPolygons: function( polygons ) { + var isXYObject = function(obj) { + return obj instanceof $.Point || (typeof obj.x === 'number' && typeof obj.y === 'number'); + }; + + var objectToSimpleXYObject = function(objs) { + return objs.map(function(obj) { + try { + if (isXYObject(obj)) { + return { x: obj.x, y: obj.y }; + } else { + throw new Error(); + } + } catch(e) { + throw new Error('A Provided cropping polygon point is not supported'); + } }); + }; - }, - - /** - * @returns {String} The TiledImage's current compositeOperation. - */ - getCompositeOperation: function() { - return this._compositeOperation; - }, - - /** - * @param {String} compositeOperation the tiled image should be drawn with this globalCompositeOperation. - * @fires OpenSeadragon.TiledImage.event:composite-operation-change - */ - setCompositeOperation: function(compositeOperation) { - this.compositeOperation = compositeOperation; //invokes setter - }, - - /** - * Update headers to include when making AJAX requests. - * - * Unless `propagate` is set to false (which is likely only useful in rare circumstances), - * the updated headers are propagated to all tiles and queued image loader jobs. - * - * Note that the rules for merging headers still apply, i.e. headers returned by - * {@link OpenSeadragon.TileSource#getTileAjaxHeaders} take precedence over - * the headers here in the tiled image (`TiledImage.ajaxHeaders`). - * - * @function - * @param {Object} ajaxHeaders Updated AJAX headers, which will be merged over any headers specified in {@link OpenSeadragon.Options}. - * @param {Boolean} [propagate=true] Whether to propagate updated headers to existing tiles and queued image loader jobs. - */ - setAjaxHeaders: function(ajaxHeaders, propagate) { - if (ajaxHeaders === null) { - ajaxHeaders = {}; - } - if (!$.isPlainObject(ajaxHeaders)) { - console.error('[TiledImage.setAjaxHeaders] Ignoring invalid headers, must be a plain object'); - return; + try { + if (!$.isArray(polygons)) { + throw new Error('Provided cropping polygon is not an array'); } + this._croppingPolygons = polygons.map(function(polygon){ + return objectToSimpleXYObject(polygon); + }); + this._needsDraw = true; + } catch (e) { + $.console.error('[TiledImage.setCroppingPolygons] Cropping polygon format not supported'); + $.console.error(e); + this.resetCroppingPolygons(); + } + }, - this._ownAjaxHeaders = ajaxHeaders; - this._updateAjaxHeaders(propagate); - }, + /** + * Resets the cropping polygons, thus next render will remove all cropping + * polygon effects. + */ + resetCroppingPolygons: function() { + this._croppingPolygons = null; + this._needsDraw = true; + }, - /** - * Update headers to include when making AJAX requests. - * - * This function has the same effect as calling {@link OpenSeadragon.TiledImage#setAjaxHeaders}, - * except that the headers for this tiled image do not change. This is especially useful - * for propagating updated headers from {@link OpenSeadragon.TileSource#getTileAjaxHeaders} - * to existing tiles. - * - * @private - * @function - * @param {Boolean} [propagate=true] Whether to propagate updated headers to existing tiles and queued image loader jobs. - */ - _updateAjaxHeaders: function(propagate) { - if (propagate === undefined) { - propagate = true; - } - - // merge with viewer's headers - if ($.isPlainObject(this.viewer.ajaxHeaders)) { - this.ajaxHeaders = $.extend({}, this.viewer.ajaxHeaders, this._ownAjaxHeaders); + /** + * Positions and scales the TiledImage to fit in the specified bounds. + * Note: this method fires OpenSeadragon.TiledImage.event:bounds-change + * twice + * @param {OpenSeadragon.Rect} bounds The bounds to fit the image into. + * @param {OpenSeadragon.Placement} [anchor=OpenSeadragon.Placement.CENTER] + * How to anchor the image in the bounds. + * @param {Boolean} [immediately=false] Whether to animate to the new size + * or snap immediately. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + fitBounds: function(bounds, anchor, immediately) { + anchor = anchor || $.Placement.CENTER; + var anchorProperties = $.Placement.properties[anchor]; + var aspectRatio = this.contentAspectX; + var xOffset = 0; + var yOffset = 0; + var displayedWidthRatio = 1; + var displayedHeightRatio = 1; + if (this._clip) { + aspectRatio = this._clip.getAspectRatio(); + displayedWidthRatio = this._clip.width / this.source.dimensions.x; + displayedHeightRatio = this._clip.height / this.source.dimensions.y; + if (bounds.getAspectRatio() > aspectRatio) { + xOffset = this._clip.x / this._clip.height * bounds.height; + yOffset = this._clip.y / this._clip.height * bounds.height; } else { - this.ajaxHeaders = this._ownAjaxHeaders; + xOffset = this._clip.x / this._clip.width * bounds.width; + yOffset = this._clip.y / this._clip.width * bounds.width; } + } - // propagate header updates to all tiles and queued image loader jobs - if (propagate) { - var numTiles, xMod, yMod, tile; + if (bounds.getAspectRatio() > aspectRatio) { + // We will have margins on the X axis + var height = bounds.height / displayedHeightRatio; + var marginLeft = 0; + if (anchorProperties.isHorizontallyCentered) { + marginLeft = (bounds.width - bounds.height * aspectRatio) / 2; + } else if (anchorProperties.isRight) { + marginLeft = bounds.width - bounds.height * aspectRatio; + } + this.setPosition( + new $.Point(bounds.x - xOffset + marginLeft, bounds.y - yOffset), + immediately); + this.setHeight(height, immediately); + } else { + // We will have margins on the Y axis + var width = bounds.width / displayedWidthRatio; + var marginTop = 0; + if (anchorProperties.isVerticallyCentered) { + marginTop = (bounds.height - bounds.width / aspectRatio) / 2; + } else if (anchorProperties.isBottom) { + marginTop = bounds.height - bounds.width / aspectRatio; + } + this.setPosition( + new $.Point(bounds.x - xOffset, bounds.y - yOffset + marginTop), + immediately); + this.setWidth(width, immediately); + } + }, - for (var level in this.tilesMatrix) { - numTiles = this.source.getNumTiles(level); + /** + * @returns {OpenSeadragon.Rect|null} The TiledImage's current clip rectangle, + * in image pixels, or null if none. + */ + getClip: function() { + if (this._clip) { + return this._clip.clone(); + } - for (var x in this.tilesMatrix[level]) { - xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; + return null; + }, - for (var y in this.tilesMatrix[level][x]) { - yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; - tile = this.tilesMatrix[level][x][y]; + /** + * @param {OpenSeadragon.Rect|null} newClip - An area, in image pixels, to clip to + * (portions of the image outside of this area will not be visible). Only works on + * browsers that support the HTML5 canvas. + * @fires OpenSeadragon.TiledImage.event:clip-change + */ + setClip: function(newClip) { + $.console.assert(!newClip || newClip instanceof $.Rect, + "[TiledImage.setClip] newClip must be an OpenSeadragon.Rect or null"); - tile.loadWithAjax = this.loadTilesWithAjax; - if (tile.loadWithAjax) { - var tileAjaxHeaders = this.source.getTileAjaxHeaders( level, xMod, yMod ); - tile.ajaxHeaders = $.extend({}, this.ajaxHeaders, tileAjaxHeaders); - } else { - tile.ajaxHeaders = null; - } + if (newClip instanceof $.Rect) { + this._clip = newClip.clone(); + } else { + this._clip = null; + } + + this._needsDraw = true; + /** + * Raised when the TiledImage's clip is changed. + * @event clip-change + * @memberOf OpenSeadragon.TiledImage + * @type {object} + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the + * TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('clip-change'); + }, + + /** + * @returns {Boolean} Whether the TiledImage should be flipped before rendering. + */ + getFlip: function() { + 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; + }, + + get flipped(){ + return this._flipped; + }, + set flipped(flipped){ + let changed = this._flipped !== !!flipped; + this._flipped = !!flipped; + if(changed){ + this.update(true); + this._needsDraw = true; + this._raiseBoundsChange(); + } + }, + + get wrapHorizontal(){ + return this._wrapHorizontal; + }, + set wrapHorizontal(wrap){ + let changed = this._wrapHorizontal !== !!wrap; + this._wrapHorizontal = !!wrap; + if(this._initialized && changed){ + this.update(true); + this._needsDraw = true; + // this._raiseBoundsChange(); + } + }, + + get wrapVertical(){ + return this._wrapVertical; + }, + set wrapVertical(wrap){ + let changed = this._wrapVertical !== !!wrap; + this._wrapVertical = !!wrap; + if(this._initialized && changed){ + this.update(true); + this._needsDraw = true; + // this._raiseBoundsChange(); + } + }, + + get debugMode(){ + return this._debugMode; + }, + set debugMode(debug){ + this._debugMode = !!debug; + this._needsDraw = true; + }, + + /** + * @returns {Number} The TiledImage's current opacity. + */ + getOpacity: function() { + return this.opacity; + }, + + /** + * @param {Number} opacity Opacity the tiled image should be drawn at. + * @fires OpenSeadragon.TiledImage.event:opacity-change + */ + setOpacity: function(opacity) { + this.opacity = opacity; + }, + + get opacity() { + return this._opacity; + }, + + set opacity(opacity) { + if (opacity === this.opacity) { + return; + } + + this._opacity = opacity; + this._needsDraw = true; + /** + * Raised when the TiledImage's opacity is changed. + * @event opacity-change + * @memberOf OpenSeadragon.TiledImage + * @type {object} + * @property {Number} opacity - The new opacity value. + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the + * TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('opacity-change', { + opacity: this.opacity + }); + }, + + /** + * @returns {Boolean} whether the tiledImage can load its tiles even when it has zero opacity. + */ + getPreload: function() { + return this._preload; + }, + + /** + * Set true to load even when hidden. Set false to block loading when hidden. + */ + setPreload: function(preload) { + this._preload = !!preload; + this._needsDraw = true; + }, + + /** + * Get the rotation of this tiled image in degrees. + * @param {Boolean} [current=false] True for current rotation, false for target. + * @returns {Number} the rotation of this tiled image in degrees. + */ + getRotation: function(current) { + return current ? + this._degreesSpring.current.value : + this._degreesSpring.target.value; + }, + + /** + * Set the current rotation of this tiled image in degrees. + * @param {Number} degrees the rotation in degrees. + * @param {Boolean} [immediately=false] Whether to animate to the new angle + * or rotate immediately. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + setRotation: function(degrees, immediately) { + if (this._degreesSpring.target.value === degrees && + this._degreesSpring.isAtTargetValue()) { + return; + } + if (immediately) { + this._degreesSpring.resetTo(degrees); + } else { + this._degreesSpring.springTo(degrees); + } + this._needsDraw = true; + this._needsUpdate = true; + this._raiseBoundsChange(); + }, + + /** + * Get the region of this tiled image that falls within the viewport. + * @returns {OpenSeadragon.Rect} the region of this tiled image that falls within the viewport. + * Returns false for images with opacity==0 unless preload==true + */ + getDrawArea: function(){ + + if( this._opacity === 0 && !this._preload){ + return false; + } + + var drawArea = this._viewportToTiledImageRectangle( + this.viewport.getBoundsWithMargins(true)); + + if (!this.wrapHorizontal && !this.wrapVertical) { + var tiledImageBounds = this._viewportToTiledImageRectangle( + this.getClippedBounds(true)); + drawArea = drawArea.intersection(tiledImageBounds); + } + + return drawArea; + }, + + /** + * + * @returns {Array} Array of Tiles that make up the current view + */ + getTilesToDraw: function(){ + // start with all the tiles added to this._tilesToDraw during the most recent + // call to this.update. Then update them so the blending and coverage properties + // are updated based on the current time + let tileArray = this._tilesToDraw.flat(); + + // update all tiles, which can change the coverage provided + this._updateTilesInViewport(tileArray); + + // _tilesToDraw might have been updated by the update; refresh it + tileArray = this._tilesToDraw.flat(); + + // mark the tiles as being drawn, so that they won't be discarded from + // the tileCache + tileArray.forEach(tileInfo => { + tileInfo.tile.beingDrawn = true; + }); + this._lastDrawn = tileArray; + return tileArray; + }, + + /** + * Get the point around which this tiled image is rotated + * @private + * @param {Boolean} current True for current rotation point, false for target. + * @returns {OpenSeadragon.Point} + */ + _getRotationPoint: function(current) { + return this.getBoundsNoRotate(current).getCenter(); + }, + + get compositeOperation(){ + return this._compositeOperation; + }, + + set compositeOperation(compositeOperation){ + + if (compositeOperation === this._compositeOperation) { + return; + } + this._compositeOperation = compositeOperation; + this._needsDraw = true; + /** + * Raised when the TiledImage's opacity is changed. + * @event composite-operation-change + * @memberOf OpenSeadragon.TiledImage + * @type {object} + * @property {String} compositeOperation - The new compositeOperation value. + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the + * TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('composite-operation-change', { + compositeOperation: this._compositeOperation + }); + + }, + + /** + * @returns {String} The TiledImage's current compositeOperation. + */ + getCompositeOperation: function() { + return this._compositeOperation; + }, + + /** + * @param {String} compositeOperation the tiled image should be drawn with this globalCompositeOperation. + * @fires OpenSeadragon.TiledImage.event:composite-operation-change + */ + setCompositeOperation: function(compositeOperation) { + this.compositeOperation = compositeOperation; //invokes setter + }, + + /** + * Update headers to include when making AJAX requests. + * + * Unless `propagate` is set to false (which is likely only useful in rare circumstances), + * the updated headers are propagated to all tiles and queued image loader jobs. + * + * Note that the rules for merging headers still apply, i.e. headers returned by + * {@link OpenSeadragon.TileSource#getTileAjaxHeaders} take precedence over + * the headers here in the tiled image (`TiledImage.ajaxHeaders`). + * + * @function + * @param {Object} ajaxHeaders Updated AJAX headers, which will be merged over any headers specified in {@link OpenSeadragon.Options}. + * @param {Boolean} [propagate=true] Whether to propagate updated headers to existing tiles and queued image loader jobs. + */ + setAjaxHeaders: function(ajaxHeaders, propagate) { + if (ajaxHeaders === null) { + ajaxHeaders = {}; + } + if (!$.isPlainObject(ajaxHeaders)) { + console.error('[TiledImage.setAjaxHeaders] Ignoring invalid headers, must be a plain object'); + return; + } + + this._ownAjaxHeaders = ajaxHeaders; + this._updateAjaxHeaders(propagate); + }, + + /** + * Update headers to include when making AJAX requests. + * + * This function has the same effect as calling {@link OpenSeadragon.TiledImage#setAjaxHeaders}, + * except that the headers for this tiled image do not change. This is especially useful + * for propagating updated headers from {@link OpenSeadragon.TileSource#getTileAjaxHeaders} + * to existing tiles. + * + * @private + * @function + * @param {Boolean} [propagate=true] Whether to propagate updated headers to existing tiles and queued image loader jobs. + */ + _updateAjaxHeaders: function(propagate) { + if (propagate === undefined) { + propagate = true; + } + + // merge with viewer's headers + if ($.isPlainObject(this.viewer.ajaxHeaders)) { + this.ajaxHeaders = $.extend({}, this.viewer.ajaxHeaders, this._ownAjaxHeaders); + } else { + this.ajaxHeaders = this._ownAjaxHeaders; + } + + // propagate header updates to all tiles and queued image loader jobs + if (propagate) { + var numTiles, xMod, yMod, tile; + + for (var level in this.tilesMatrix) { + numTiles = this.source.getNumTiles(level); + + for (var x in this.tilesMatrix[level]) { + xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; + + for (var y in this.tilesMatrix[level][x]) { + yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; + tile = this.tilesMatrix[level][x][y]; + + tile.loadWithAjax = this.loadTilesWithAjax; + if (tile.loadWithAjax) { + var tileAjaxHeaders = this.source.getTileAjaxHeaders( level, xMod, yMod ); + tile.ajaxHeaders = $.extend({}, this.ajaxHeaders, tileAjaxHeaders); + } else { + tile.ajaxHeaders = null; } } } - - for (var i = 0; i < this._imageLoader.jobQueue.length; i++) { - var job = this._imageLoader.jobQueue[i]; - job.loadWithAjax = job.tile.loadWithAjax; - job.ajaxHeaders = job.tile.loadWithAjax ? job.tile.ajaxHeaders : null; - } - } - }, - - // private - _setScale: function(scale, immediately) { - var sameTarget = (this._scaleSpring.target.value === scale); - if (immediately) { - if (sameTarget && this._scaleSpring.current.value === scale) { - return; - } - - this._scaleSpring.resetTo(scale); - this._updateForScale(); - this._needsDraw = true; - this._needsUpdate = true; - } else { - if (sameTarget) { - return; - } - - this._scaleSpring.springTo(scale); - this._updateForScale(); - this._needsDraw = true; - this._needsUpdate = true; } - if (!sameTarget) { - this._raiseBoundsChange(); + for (var i = 0; i < this._imageLoader.jobQueue.length; i++) { + var job = this._imageLoader.jobQueue[i]; + job.loadWithAjax = job.tile.loadWithAjax; + job.ajaxHeaders = job.tile.loadWithAjax ? job.tile.ajaxHeaders : null; } - }, + } + }, - // private - _updateForScale: function() { - this._worldWidthTarget = this._scaleSpring.target.value; - this._worldHeightTarget = this.normHeight * this._scaleSpring.target.value; - this._worldWidthCurrent = this._scaleSpring.current.value; - this._worldHeightCurrent = this.normHeight * this._scaleSpring.current.value; - }, - - // private - _raiseBoundsChange: function() { - /** - * Raised when the TiledImage's bounds are changed. - * Note that this event is triggered only when the animation target is changed; - * not for every frame of animation. - * @event bounds-change - * @memberOf OpenSeadragon.TiledImage - * @type {object} - * @property {OpenSeadragon.TiledImage} eventSource - A reference to the - * TiledImage which raised the event. - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.raiseEvent('bounds-change'); - }, - - // private - _isBottomItem: function() { - return this.viewer.world.getItemAt(0) === this; - }, - - // private - _getLevelsInterval: function() { - var lowestLevel = Math.max( - this.source.minLevel, - Math.floor(Math.log(this.minZoomImageRatio) / Math.log(2)) - ); - var currentZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( - this.source.getPixelRatio(0), true).x * - this._scaleSpring.current.value; - var highestLevel = Math.min( - Math.abs(this.source.maxLevel), - Math.abs(Math.floor( - Math.log(currentZeroRatio / this.minPixelRatio) / Math.log(2) - )) - ); - - // Calculations for the interval of levels to draw - // can return invalid intervals; fix that here if necessary - highestLevel = Math.max(highestLevel, this.source.minLevel || 0); - lowestLevel = Math.min(lowestLevel, highestLevel); - return { - lowestLevel: lowestLevel, - highestLevel: highestLevel - }; - }, - - // returns boolean flag of whether the image should be marked as fully loaded - _updateLevelsForViewport: function(){ - var levelsInterval = this._getLevelsInterval(); - var lowestLevel = levelsInterval.lowestLevel; // the lowest level we should draw at our current zoom - var highestLevel = levelsInterval.highestLevel; // the highest level we should draw at our current zoom - var bestTiles = []; - var drawArea = this.getDrawArea(); - var currentTime = $.now(); - - // reset each tile's beingDrawn flag - this._lastDrawn.forEach(tileinfo => { - tileinfo.tile.beingDrawn = false; - }); - // clear the list of tiles to draw - this._tilesToDraw = []; - this._tilesLoading = 0; - this.loadingCoverage = {}; - - if(!drawArea){ - this._needsDraw = false; - return this._fullyLoaded; - } - - // make a list of levels to use for the current zoom level - var levelList = new Array(highestLevel - lowestLevel + 1); - // go from highest to lowest resolution - for(let i = 0, level = highestLevel; level >= lowestLevel; level--, i++){ - levelList[i] = level; - } - - // if a single-tile level is loaded, add that to the end of the list - // as a fallback to use during zooming out, until a lower-res tile is - // loaded - for(let level = highestLevel + 1; level <= this.source.maxLevel; level++){ - var tile = ( - this.tilesMatrix[level] && - this.tilesMatrix[level][0] && - this.tilesMatrix[level][0][0] - ); - if(tile && tile.isBottomMost && tile.isRightMost && tile.loaded){ - levelList.push(level); - break; - } - } - - - // Update any level that will be drawn. - // We are iterating from highest resolution to lowest resolution - // Once a level fully covers the viewport the loop is halted and - // lower-resolution levels are skipped - for (let i = 0; i < levelList.length; i++) { - let level = levelList[i]; - - var currentRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( - this.source.getPixelRatio(level), - true - ).x * this._scaleSpring.current.value; - - var targetRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( - this.source.getPixelRatio(level), - false - ).x * this._scaleSpring.current.value; - - var targetZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( - this.source.getPixelRatio( - Math.max( - this.source.getClosestLevel(), - 0 - ) - ), - false - ).x * this._scaleSpring.current.value; - - var optimalRatio = this.immediateRender ? 1 : targetZeroRatio; - var levelOpacity = Math.min(1, (currentRenderPixelRatio - 0.5) / 0.5); - var levelVisibility = optimalRatio / Math.abs( - optimalRatio - targetRenderPixelRatio - ); - - // Update the level and keep track of 'best' tiles to load - var result = this._updateLevel( - level, - levelOpacity, - levelVisibility, - drawArea, - currentTime, - bestTiles - ); - - bestTiles = result.bestTiles; - var tiles = result.updatedTiles.filter(tile => tile.loaded); - var makeTileInfoObject = (function(level, levelOpacity, currentTime){ - return function(tile){ - return { - tile: tile, - level: level, - levelOpacity: levelOpacity, - currentTime: currentTime - }; - }; - })(level, levelOpacity, currentTime); - - this._tilesToDraw[level] = tiles.map(makeTileInfoObject); - - // Stop the loop if lower-res tiles would all be covered by - // already drawn tiles - if (this._providesCoverage(this.coverage, level)) { - break; - } - } - - - // Load the new 'best' n tiles - if (bestTiles && bestTiles.length > 0) { - bestTiles.forEach(function (tile) { - if (tile && !tile.context2D) { - this._loadTile(tile, currentTime); - } - }, this); - - this._needsDraw = true; - return false; - } else { - return this._tilesLoading === 0; - } - - // Update - - }, - - /** - * Update all tiles that contribute to the current view - * @private - * - */ - _updateTilesInViewport: function(tiles) { - let currentTime = $.now(); - let _this = this; - this._tilesLoading = 0; - this._wasBlending = this._isBlending; - this._isBlending = false; - this.loadingCoverage = {}; - let lowestLevel = tiles.length ? tiles[0].level : 0; - - let drawArea = this.getDrawArea(); - if(!drawArea){ + // private + _setScale: function(scale, immediately) { + var sameTarget = (this._scaleSpring.target.value === scale); + if (immediately) { + if (sameTarget && this._scaleSpring.current.value === scale) { return; } - function updateTile(info){ - let tile = info.tile; - if(tile && tile.loaded){ - let tileIsBlending = _this._blendTile( - tile, - tile.x, - tile.y, - info.level, - info.levelOpacity, - currentTime, - lowestLevel - ); - _this._isBlending = _this._isBlending || tileIsBlending; - _this._needsDraw = _this._needsDraw || tileIsBlending || _this._wasBlending; - } + this._scaleSpring.resetTo(scale); + this._updateForScale(); + this._needsDraw = true; + this._needsUpdate = true; + } else { + if (sameTarget) { + return; } - // Update each tile in the list of tiles. As the tiles are updated, - // the coverage provided is also updated. If a level provides coverage - // as part of this process, discard tiles from lower levels - let level = 0; - for(let i = 0; i < tiles.length; i++){ - let tile = tiles[i]; - updateTile(tile); - if(this._providesCoverage(this.coverage, tile.level)){ - level = Math.max(level, tile.level); - } - } - if(level > 0){ - for( let levelKey in this._tilesToDraw ){ - if( levelKey < level ){ - delete this._tilesToDraw[levelKey]; - } - } - } + this._scaleSpring.springTo(scale); + this._updateForScale(); + this._needsDraw = true; + this._needsUpdate = true; + } - }, + if (!sameTarget) { + this._raiseBoundsChange(); + } + }, + // private + _updateForScale: function() { + this._worldWidthTarget = this._scaleSpring.target.value; + this._worldHeightTarget = this.normHeight * this._scaleSpring.target.value; + this._worldWidthCurrent = this._scaleSpring.current.value; + this._worldHeightCurrent = this.normHeight * this._scaleSpring.current.value; + }, + + // private + _raiseBoundsChange: function() { /** - * Updates the opacity of a tile according to the time it has been on screen - * to perform a fade-in. - * Updates coverage once a tile is fully opaque. - * Returns whether the fade-in has completed. - * @private - * - * @param {OpenSeadragon.Tile} tile - * @param {Number} x - * @param {Number} y - * @param {Number} level - * @param {Number} levelOpacity - * @param {Number} currentTime - * @param {Boolean} lowestLevel - * @returns {Boolean} true if blending did not yet finish + * Raised when the TiledImage's bounds are changed. + * Note that this event is triggered only when the animation target is changed; + * not for every frame of animation. + * @event bounds-change + * @memberOf OpenSeadragon.TiledImage + * @type {object} + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the + * TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. */ - _blendTile: function(tile, x, y, level, levelOpacity, currentTime, lowestLevel ){ - let blendTimeMillis = 1000 * this.blendTime, - deltaTime, - opacity; + this.raiseEvent('bounds-change'); + }, - if ( !tile.blendStart ) { - tile.blendStart = currentTime; + // private + _isBottomItem: function() { + return this.viewer.world.getItemAt(0) === this; + }, + + // private + _getLevelsInterval: function() { + var lowestLevel = Math.max( + this.source.minLevel, + Math.floor(Math.log(this.minZoomImageRatio) / Math.log(2)) + ); + var currentZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( + this.source.getPixelRatio(0), true).x * + this._scaleSpring.current.value; + var highestLevel = Math.min( + Math.abs(this.source.maxLevel), + Math.abs(Math.floor( + Math.log(currentZeroRatio / this.minPixelRatio) / Math.log(2) + )) + ); + + // Calculations for the interval of levels to draw + // can return invalid intervals; fix that here if necessary + highestLevel = Math.max(highestLevel, this.source.minLevel || 0); + lowestLevel = Math.min(lowestLevel, highestLevel); + return { + lowestLevel: lowestLevel, + highestLevel: highestLevel + }; + }, + + // returns boolean flag of whether the image should be marked as fully loaded + _updateLevelsForViewport: function(){ + var levelsInterval = this._getLevelsInterval(); + var lowestLevel = levelsInterval.lowestLevel; // the lowest level we should draw at our current zoom + var highestLevel = levelsInterval.highestLevel; // the highest level we should draw at our current zoom + var bestTiles = []; + var drawArea = this.getDrawArea(); + var currentTime = $.now(); + + // reset each tile's beingDrawn flag + this._lastDrawn.forEach(tileinfo => { + tileinfo.tile.beingDrawn = false; + }); + // clear the list of tiles to draw + this._tilesToDraw = []; + this._tilesLoading = 0; + this.loadingCoverage = {}; + + if(!drawArea){ + this._needsDraw = false; + return this._fullyLoaded; + } + + // make a list of levels to use for the current zoom level + var levelList = new Array(highestLevel - lowestLevel + 1); + // go from highest to lowest resolution + for(let i = 0, level = highestLevel; level >= lowestLevel; level--, i++){ + levelList[i] = level; + } + + // if a single-tile level is loaded, add that to the end of the list + // as a fallback to use during zooming out, until a lower-res tile is + // loaded + for(let level = highestLevel + 1; level <= this.source.maxLevel; level++){ + var tile = ( + this.tilesMatrix[level] && + this.tilesMatrix[level][0] && + this.tilesMatrix[level][0][0] + ); + if(tile && tile.isBottomMost && tile.isRightMost && tile.loaded){ + levelList.push(level); + break; } + } - deltaTime = currentTime - tile.blendStart; - opacity = blendTimeMillis ? Math.min( 1, deltaTime / ( blendTimeMillis ) ) : 1; - // if this tile is at the lowest level being drawn, render at opacity=1 - if(level === lowestLevel){ - opacity = 1; - deltaTime = blendTimeMillis; - } + // Update any level that will be drawn. + // We are iterating from highest resolution to lowest resolution + // Once a level fully covers the viewport the loop is halted and + // lower-resolution levels are skipped + for (let i = 0; i < levelList.length; i++) { + let level = levelList[i]; - if ( this.alwaysBlend ) { - opacity *= levelOpacity; - } - tile.opacity = opacity; + var currentRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( + this.source.getPixelRatio(level), + true + ).x * this._scaleSpring.current.value; - if ( opacity === 1 ) { - this._setCoverage( this.coverage, level, x, y, true ); - this._hasOpaqueTile = true; - } - // return true if the tile is still blending - return deltaTime < blendTimeMillis; - }, + var targetRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( + this.source.getPixelRatio(level), + false + ).x * this._scaleSpring.current.value; - /** - * Updates all tiles at a given resolution level. - * @private - * @param {Number} level - * @param {Number} levelOpacity - * @param {Number} levelVisibility - * @param {OpenSeadragon.Rect} drawArea - * @param {Number} currentTime - * @param {OpenSeadragon.Tile[]} best Array of the current best tiles - * @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile - the current "best" tiles to draw, updatedTiles: OpenSeadragon.Tile) - the updated tiles}. - */ - _updateLevel: function(level, levelOpacity, - levelVisibility, drawArea, currentTime, best) { + var targetZeroRatio = this.viewport.deltaPixelsFromPointsNoRotate( + this.source.getPixelRatio( + Math.max( + this.source.getClosestLevel(), + 0 + ) + ), + false + ).x * this._scaleSpring.current.value; - var topLeftBound = drawArea.getBoundingBox().getTopLeft(); - var bottomRightBound = drawArea.getBoundingBox().getBottomRight(); - - if (this.viewer) { - /** - * - Needs documentation - - * - * @event update-level - * @memberof OpenSeadragon.Viewer - * @type {object} - * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. - * @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn. - * @property {Object} havedrawn - deprecated, always true (kept for backwards compatibility) - * @property {Object} level - * @property {Object} opacity - * @property {Object} visibility - * @property {OpenSeadragon.Rect} drawArea - * @property {Object} topleft deprecated, use drawArea instead - * @property {Object} bottomright deprecated, use drawArea instead - * @property {Object} currenttime - * @property {Object[]} best - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.viewer.raiseEvent('update-level', { - tiledImage: this, - havedrawn: true, // deprecated, kept for backwards compatibility - level: level, - opacity: levelOpacity, - visibility: levelVisibility, - drawArea: drawArea, - topleft: topLeftBound, - bottomright: bottomRightBound, - currenttime: currentTime, - best: best - }); - } - - this._resetCoverage(this.coverage, level); - this._resetCoverage(this.loadingCoverage, level); - - //OK, a new drawing so do your calculations - var cornerTiles = this._getCornerTiles(level, topLeftBound, bottomRightBound); - var topLeftTile = cornerTiles.topLeft; - var bottomRightTile = cornerTiles.bottomRight; - var numberOfTiles = this.source.getNumTiles(level); - - var viewportCenter = this.viewport.pixelFromPoint(this.viewport.getCenter()); - - if (this.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 (!this.wrapHorizontal) { - bottomRightTile.x = Math.min(bottomRightTile.x, numberOfTiles.x - 1); - } - } - var numTiles = Math.max(0, (bottomRightTile.x - topLeftTile.x) * (bottomRightTile.y - topLeftTile.y)); - var tiles = new Array(numTiles); - var tileIndex = 0; - for (var x = topLeftTile.x; x <= bottomRightTile.x; x++) { - for (var y = topLeftTile.y; y <= bottomRightTile.y; y++) { - - var flippedX; - if (this.getFlip()) { - var xMod = ( numberOfTiles.x + ( x % numberOfTiles.x ) ) % numberOfTiles.x; - flippedX = x + numberOfTiles.x - xMod - xMod - 1; - } else { - flippedX = x; - } - - if (drawArea.intersection(this.getTileBounds(level, flippedX, y)) === null) { - // This tile is outside of the viewport, no need to draw it - continue; - } - - var result = this._updateTile( - flippedX, y, - level, - levelVisibility, - viewportCenter, - numberOfTiles, - currentTime, - best - ); - best = result.bestTiles; - tiles[tileIndex] = result.tile; - tileIndex += 1; - } - } - - return { - bestTiles: best, - updatedTiles: tiles - }; - }, - - /** - * @private - * @param {OpenSeadragon.Tile} tile - * @param {Boolean} overlap - * @param {OpenSeadragon.Viewport} viewport - * @param {OpenSeadragon.Point} viewportCenter - * @param {Number} levelVisibility - */ - _positionTile: function( tile, overlap, viewport, viewportCenter, levelVisibility ){ - var boundsTL = tile.bounds.getTopLeft(); - - boundsTL.x *= this._scaleSpring.current.value; - boundsTL.y *= this._scaleSpring.current.value; - boundsTL.x += this._xSpring.current.value; - boundsTL.y += this._ySpring.current.value; - - var boundsSize = tile.bounds.getSize(); - - boundsSize.x *= this._scaleSpring.current.value; - boundsSize.y *= this._scaleSpring.current.value; - - tile.positionedBounds.x = boundsTL.x; - tile.positionedBounds.y = boundsTL.y; - tile.positionedBounds.width = boundsSize.x; - tile.positionedBounds.height = boundsSize.y; - - var positionC = viewport.pixelFromPointNoRotate(boundsTL, true), - positionT = viewport.pixelFromPointNoRotate(boundsTL, false), - sizeC = viewport.deltaPixelsFromPointsNoRotate(boundsSize, true), - sizeT = viewport.deltaPixelsFromPointsNoRotate(boundsSize, false), - tileCenter = positionT.plus( sizeT.divide( 2 ) ), - tileSquaredDistance = viewportCenter.squaredDistanceTo( tileCenter ); - - if(this.viewer.drawer.minimumOverlapRequired()){ - if ( !overlap ) { - sizeC = sizeC.plus( new $.Point(1, 1)); - } - - if (tile.isRightMost && this.wrapHorizontal) { - sizeC.x += 0.75; // Otherwise Firefox and Safari show seams - } - - if (tile.isBottomMost && this.wrapVertical) { - sizeC.y += 0.75; // Otherwise Firefox and Safari show seams - } - } - - tile.position = positionC; - tile.size = sizeC; - tile.squaredDistance = tileSquaredDistance; - tile.visibility = levelVisibility; - }, - - /** - * Update a single tile at a particular resolution level. - * @private - * @param {Number} x - * @param {Number} y - * @param {Number} level - * @param {Number} levelVisibility - * @param {OpenSeadragon.Point} viewportCenter - * @param {Number} numberOfTiles - * @param {Number} currentTime - * @param {OpenSeadragon.Tile} best - The current "best" tile to draw. - * @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile[] - the current best tiles, tile: OpenSeadragon.Tile the current tile} - */ - _updateTile: function( x, y, level, - levelVisibility, viewportCenter, numberOfTiles, currentTime, best){ - - var tile = this._getTile( - x, y, - level, - currentTime, - numberOfTiles - ); - - if( this.viewer ){ - /** - * - Needs documentation - - * - * @event update-tile - * @memberof OpenSeadragon.Viewer - * @type {object} - * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. - * @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn. - * @property {OpenSeadragon.Tile} tile - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.viewer.raiseEvent( 'update-tile', { - tiledImage: this, - tile: tile - }); - } - - this._setCoverage( this.coverage, level, x, y, false ); - - var loadingCoverage = tile.loaded || tile.loading || this._isCovered(this.loadingCoverage, level, x, y); - this._setCoverage(this.loadingCoverage, level, x, y, loadingCoverage); - - if ( !tile.exists ) { - return { - bestTiles: best, - tile: tile - }; - } - if (tile.loaded && tile.opacity === 1){ - this._setCoverage( this.coverage, level, x, y, true ); - } - - this._positionTile( - tile, - this.source.tileOverlap, - this.viewport, - viewportCenter, - levelVisibility + var optimalRatio = this.immediateRender ? 1 : targetZeroRatio; + var levelOpacity = Math.min(1, (currentRenderPixelRatio - 0.5) / 0.5); + var levelVisibility = optimalRatio / Math.abs( + optimalRatio - targetRenderPixelRatio ); - if (!tile.loaded) { - if (tile.context2D) { - this._setTileLoaded(tile); - } else { - var imageRecord = this._tileCache.getImageRecord(tile.cacheKey); - if (imageRecord) { - this._setTileLoaded(tile, imageRecord.getData()); - } + // Update the level and keep track of 'best' tiles to load + var result = this._updateLevel( + level, + levelOpacity, + levelVisibility, + drawArea, + currentTime, + bestTiles + ); + + bestTiles = result.bestTiles; + var tiles = result.updatedTiles.filter(tile => tile.loaded); + var makeTileInfoObject = (function(level, levelOpacity, currentTime){ + return function(tile){ + return { + tile: tile, + level: level, + levelOpacity: levelOpacity, + currentTime: currentTime + }; + }; + })(level, levelOpacity, currentTime); + + this._tilesToDraw[level] = tiles.map(makeTileInfoObject); + + // Stop the loop if lower-res tiles would all be covered by + // already drawn tiles + if (this._providesCoverage(this.coverage, level)) { + break; + } + } + + + // Load the new 'best' n tiles + if (bestTiles && bestTiles.length > 0) { + bestTiles.forEach(function (tile) { + if (tile && !tile.context2D) { + this._loadTile(tile, currentTime); + } + }, this); + + this._needsDraw = true; + return false; + } else { + return this._tilesLoading === 0; + } + + // Update + + }, + + /** + * Update all tiles that contribute to the current view + * @private + * + */ + _updateTilesInViewport: function(tiles) { + let currentTime = $.now(); + let _this = this; + this._tilesLoading = 0; + this._wasBlending = this._isBlending; + this._isBlending = false; + this.loadingCoverage = {}; + let lowestLevel = tiles.length ? tiles[0].level : 0; + + let drawArea = this.getDrawArea(); + if(!drawArea){ + return; + } + + function updateTile(info){ + let tile = info.tile; + if(tile && tile.loaded){ + let tileIsBlending = _this._blendTile( + tile, + tile.x, + tile.y, + info.level, + info.levelOpacity, + currentTime, + lowestLevel + ); + _this._isBlending = _this._isBlending || tileIsBlending; + _this._needsDraw = _this._needsDraw || tileIsBlending || _this._wasBlending; + } + } + + // Update each tile in the list of tiles. As the tiles are updated, + // the coverage provided is also updated. If a level provides coverage + // as part of this process, discard tiles from lower levels + let level = 0; + for(let i = 0; i < tiles.length; i++){ + let tile = tiles[i]; + updateTile(tile); + if(this._providesCoverage(this.coverage, tile.level)){ + level = Math.max(level, tile.level); + } + } + if(level > 0){ + for( let levelKey in this._tilesToDraw ){ + if( levelKey < level ){ + delete this._tilesToDraw[levelKey]; } } + } - if ( tile.loading ) { - // the tile is already in the download queue - this._tilesLoading++; - } else if (!loadingCoverage) { - best = this._compareTiles( best, tile, this.maxTilesPerFrame ); + }, + + /** + * Updates the opacity of a tile according to the time it has been on screen + * to perform a fade-in. + * Updates coverage once a tile is fully opaque. + * Returns whether the fade-in has completed. + * @private + * + * @param {OpenSeadragon.Tile} tile + * @param {Number} x + * @param {Number} y + * @param {Number} level + * @param {Number} levelOpacity + * @param {Number} currentTime + * @param {Boolean} lowestLevel + * @returns {Boolean} true if blending did not yet finish + */ + _blendTile: function(tile, x, y, level, levelOpacity, currentTime, lowestLevel ){ + let blendTimeMillis = 1000 * this.blendTime, + deltaTime, + opacity; + + if ( !tile.blendStart ) { + tile.blendStart = currentTime; + } + + deltaTime = currentTime - tile.blendStart; + opacity = blendTimeMillis ? Math.min( 1, deltaTime / ( blendTimeMillis ) ) : 1; + + // if this tile is at the lowest level being drawn, render at opacity=1 + if(level === lowestLevel){ + opacity = 1; + deltaTime = blendTimeMillis; + } + + if ( this.alwaysBlend ) { + opacity *= levelOpacity; + } + tile.opacity = opacity; + + if ( opacity === 1 ) { + this._setCoverage( this.coverage, level, x, y, true ); + this._hasOpaqueTile = true; + } + // return true if the tile is still blending + return deltaTime < blendTimeMillis; + }, + + /** + * Updates all tiles at a given resolution level. + * @private + * @param {Number} level + * @param {Number} levelOpacity + * @param {Number} levelVisibility + * @param {OpenSeadragon.Rect} drawArea + * @param {Number} currentTime + * @param {OpenSeadragon.Tile[]} best Array of the current best tiles + * @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile - the current "best" tiles to draw, updatedTiles: OpenSeadragon.Tile) - the updated tiles}. + */ + _updateLevel: function(level, levelOpacity, + levelVisibility, drawArea, currentTime, best) { + + var topLeftBound = drawArea.getBoundingBox().getTopLeft(); + var bottomRightBound = drawArea.getBoundingBox().getBottomRight(); + + if (this.viewer) { + /** + * - Needs documentation - + * + * @event update-level + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. + * @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn. + * @property {Object} havedrawn - deprecated, always true (kept for backwards compatibility) + * @property {Object} level + * @property {Object} opacity + * @property {Object} visibility + * @property {OpenSeadragon.Rect} drawArea + * @property {Object} topleft deprecated, use drawArea instead + * @property {Object} bottomright deprecated, use drawArea instead + * @property {Object} currenttime + * @property {Object[]} best + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.viewer.raiseEvent('update-level', { + tiledImage: this, + havedrawn: true, // deprecated, kept for backwards compatibility + level: level, + opacity: levelOpacity, + visibility: levelVisibility, + drawArea: drawArea, + topleft: topLeftBound, + bottomright: bottomRightBound, + currenttime: currentTime, + best: best + }); + } + + this._resetCoverage(this.coverage, level); + this._resetCoverage(this.loadingCoverage, level); + + //OK, a new drawing so do your calculations + var cornerTiles = this._getCornerTiles(level, topLeftBound, bottomRightBound); + var topLeftTile = cornerTiles.topLeft; + var bottomRightTile = cornerTiles.bottomRight; + var numberOfTiles = this.source.getNumTiles(level); + + var viewportCenter = this.viewport.pixelFromPoint(this.viewport.getCenter()); + + if (this.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 (!this.wrapHorizontal) { + bottomRightTile.x = Math.min(bottomRightTile.x, numberOfTiles.x - 1); + } + } + var numTiles = Math.max(0, (bottomRightTile.x - topLeftTile.x) * (bottomRightTile.y - topLeftTile.y)); + var tiles = new Array(numTiles); + var tileIndex = 0; + for (var x = topLeftTile.x; x <= bottomRightTile.x; x++) { + for (var y = topLeftTile.y; y <= bottomRightTile.y; y++) { + + var flippedX; + if (this.getFlip()) { + var xMod = ( numberOfTiles.x + ( x % numberOfTiles.x ) ) % numberOfTiles.x; + flippedX = x + numberOfTiles.x - xMod - xMod - 1; + } else { + flippedX = x; + } + + if (drawArea.intersection(this.getTileBounds(level, flippedX, y)) === null) { + // This tile is outside of the viewport, no need to draw it + continue; + } + + var result = this._updateTile( + flippedX, y, + level, + levelVisibility, + viewportCenter, + numberOfTiles, + currentTime, + best + ); + best = result.bestTiles; + tiles[tileIndex] = result.tile; + tileIndex += 1; + } + } + + return { + bestTiles: best, + updatedTiles: tiles + }; + }, + + /** + * @private + * @param {OpenSeadragon.Tile} tile + * @param {Boolean} overlap + * @param {OpenSeadragon.Viewport} viewport + * @param {OpenSeadragon.Point} viewportCenter + * @param {Number} levelVisibility + */ + _positionTile: function( tile, overlap, viewport, viewportCenter, levelVisibility ){ + var boundsTL = tile.bounds.getTopLeft(); + + boundsTL.x *= this._scaleSpring.current.value; + boundsTL.y *= this._scaleSpring.current.value; + boundsTL.x += this._xSpring.current.value; + boundsTL.y += this._ySpring.current.value; + + var boundsSize = tile.bounds.getSize(); + + boundsSize.x *= this._scaleSpring.current.value; + boundsSize.y *= this._scaleSpring.current.value; + + tile.positionedBounds.x = boundsTL.x; + tile.positionedBounds.y = boundsTL.y; + tile.positionedBounds.width = boundsSize.x; + tile.positionedBounds.height = boundsSize.y; + + var positionC = viewport.pixelFromPointNoRotate(boundsTL, true), + positionT = viewport.pixelFromPointNoRotate(boundsTL, false), + sizeC = viewport.deltaPixelsFromPointsNoRotate(boundsSize, true), + sizeT = viewport.deltaPixelsFromPointsNoRotate(boundsSize, false), + tileCenter = positionT.plus( sizeT.divide( 2 ) ), + tileSquaredDistance = viewportCenter.squaredDistanceTo( tileCenter ); + + if(this.viewer.drawer.minimumOverlapRequired()){ + if ( !overlap ) { + sizeC = sizeC.plus( new $.Point(1, 1)); } + if (tile.isRightMost && this.wrapHorizontal) { + sizeC.x += 0.75; // Otherwise Firefox and Safari show seams + } + + if (tile.isBottomMost && this.wrapVertical) { + sizeC.y += 0.75; // Otherwise Firefox and Safari show seams + } + } + + tile.position = positionC; + tile.size = sizeC; + tile.squaredDistance = tileSquaredDistance; + tile.visibility = levelVisibility; + }, + + /** + * Update a single tile at a particular resolution level. + * @private + * @param {Number} x + * @param {Number} y + * @param {Number} level + * @param {Number} levelVisibility + * @param {OpenSeadragon.Point} viewportCenter + * @param {Number} numberOfTiles + * @param {Number} currentTime + * @param {OpenSeadragon.Tile} best - The current "best" tile to draw. + * @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile[] - the current best tiles, tile: OpenSeadragon.Tile the current tile} + */ + _updateTile: function( x, y, level, + levelVisibility, viewportCenter, numberOfTiles, currentTime, best){ + + var tile = this._getTile( + x, y, + level, + currentTime, + numberOfTiles + ); + + if( this.viewer ){ + /** + * - Needs documentation - + * + * @event update-tile + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. + * @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn. + * @property {OpenSeadragon.Tile} tile + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.viewer.raiseEvent( 'update-tile', { + tiledImage: this, + tile: tile + }); + } + + this._setCoverage( this.coverage, level, x, y, false ); + + var loadingCoverage = tile.loaded || tile.loading || this._isCovered(this.loadingCoverage, level, x, y); + this._setCoverage(this.loadingCoverage, level, x, y, loadingCoverage); + + if ( !tile.exists ) { return { bestTiles: best, tile: tile }; - }, + } + if (tile.loaded && tile.opacity === 1){ + this._setCoverage( this.coverage, level, x, y, true ); + } - // private - _getCornerTiles: function(level, topLeftBound, bottomRightBound) { - var leftX; - var rightX; - if (this.wrapHorizontal) { - leftX = $.positiveModulo(topLeftBound.x, 1); - rightX = $.positiveModulo(bottomRightBound.x, 1); + this._positionTile( + tile, + this.source.tileOverlap, + this.viewport, + viewportCenter, + levelVisibility + ); + + if (!tile.loaded) { + if (tile.context2D) { + this._setTileLoaded(tile); } else { - leftX = Math.max(0, topLeftBound.x); - rightX = Math.min(1, bottomRightBound.x); + var imageRecord = this._tileCache.getImageRecord(tile.cacheKey); + if (imageRecord) { + this._setTileLoaded(tile, imageRecord.getData()); + } } - var topY; - var bottomY; - var aspectRatio = 1 / this.source.aspectRatio; - if (this.wrapVertical) { - topY = $.positiveModulo(topLeftBound.y, aspectRatio); - bottomY = $.positiveModulo(bottomRightBound.y, aspectRatio); + } + + if ( tile.loading ) { + // the tile is already in the download queue + this._tilesLoading++; + } else if (!loadingCoverage) { + best = this._compareTiles( best, tile, this.maxTilesPerFrame ); + } + + return { + bestTiles: best, + tile: tile + }; + }, + + // private + _getCornerTiles: function(level, topLeftBound, bottomRightBound) { + var leftX; + var rightX; + if (this.wrapHorizontal) { + leftX = $.positiveModulo(topLeftBound.x, 1); + rightX = $.positiveModulo(bottomRightBound.x, 1); + } else { + leftX = Math.max(0, topLeftBound.x); + rightX = Math.min(1, bottomRightBound.x); + } + var topY; + var bottomY; + var aspectRatio = 1 / this.source.aspectRatio; + if (this.wrapVertical) { + topY = $.positiveModulo(topLeftBound.y, aspectRatio); + bottomY = $.positiveModulo(bottomRightBound.y, aspectRatio); + } else { + topY = Math.max(0, topLeftBound.y); + bottomY = Math.min(aspectRatio, bottomRightBound.y); + } + + var topLeftTile = this.source.getTileAtPoint(level, new $.Point(leftX, topY)); + var bottomRightTile = this.source.getTileAtPoint(level, new $.Point(rightX, bottomY)); + var numTiles = this.source.getNumTiles(level); + + if (this.wrapHorizontal) { + topLeftTile.x += numTiles.x * Math.floor(topLeftBound.x); + bottomRightTile.x += numTiles.x * Math.floor(bottomRightBound.x); + } + if (this.wrapVertical) { + topLeftTile.y += numTiles.y * Math.floor(topLeftBound.y / aspectRatio); + bottomRightTile.y += numTiles.y * Math.floor(bottomRightBound.y / aspectRatio); + } + + return { + topLeft: topLeftTile, + bottomRight: bottomRightTile, + }; + }, + + /** + * Obtains a tile at the given location. + * @private + * @param {Number} x + * @param {Number} y + * @param {Number} level + * @param {Number} time + * @param {Number} numTiles + * @returns {OpenSeadragon.Tile} + */ + _getTile: function( + x, y, + level, + time, + numTiles + ) { + var xMod, + yMod, + bounds, + sourceBounds, + exists, + urlOrGetter, + post, + ajaxHeaders, + context2D, + tile, + tilesMatrix = this.tilesMatrix, + tileSource = this.source; + + if ( !tilesMatrix[ level ] ) { + tilesMatrix[ level ] = {}; + } + if ( !tilesMatrix[ level ][ x ] ) { + tilesMatrix[ level ][ x ] = {}; + } + + if ( !tilesMatrix[ level ][ x ][ y ] || !tilesMatrix[ level ][ x ][ y ].flipped !== !this.flipped ) { + xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; + yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; + bounds = this.getTileBounds( level, x, y ); + sourceBounds = tileSource.getTileBounds( level, xMod, yMod, true ); + exists = tileSource.tileExists( level, xMod, yMod ); + urlOrGetter = tileSource.getTileUrl( level, xMod, yMod ); + post = tileSource.getTilePostData( level, xMod, yMod ); + + // Headers are only applicable if loadTilesWithAjax is set + if (this.loadTilesWithAjax) { + ajaxHeaders = tileSource.getTileAjaxHeaders( level, xMod, yMod ); + // Combine tile AJAX headers with tiled image AJAX headers (if applicable) + if ($.isPlainObject(this.ajaxHeaders)) { + ajaxHeaders = $.extend({}, this.ajaxHeaders, ajaxHeaders); + } } else { - topY = Math.max(0, topLeftBound.y); - bottomY = Math.min(aspectRatio, bottomRightBound.y); + ajaxHeaders = null; } - var topLeftTile = this.source.getTileAtPoint(level, new $.Point(leftX, topY)); - var bottomRightTile = this.source.getTileAtPoint(level, new $.Point(rightX, bottomY)); - var numTiles = this.source.getNumTiles(level); + context2D = tileSource.getContext2D ? + tileSource.getContext2D(level, xMod, yMod) : undefined; - if (this.wrapHorizontal) { - topLeftTile.x += numTiles.x * Math.floor(topLeftBound.x); - bottomRightTile.x += numTiles.x * Math.floor(bottomRightBound.x); - } - if (this.wrapVertical) { - topLeftTile.y += numTiles.y * Math.floor(topLeftBound.y / aspectRatio); - bottomRightTile.y += numTiles.y * Math.floor(bottomRightBound.y / aspectRatio); - } - - return { - topLeft: topLeftTile, - bottomRight: bottomRightTile, - }; - }, - - /** - * Obtains a tile at the given location. - * @private - * @param {Number} x - * @param {Number} y - * @param {Number} level - * @param {Number} time - * @param {Number} numTiles - * @returns {OpenSeadragon.Tile} - */ - _getTile: function( - x, y, - level, - time, - numTiles - ) { - var xMod, - yMod, + tile = new $.Tile( + level, + x, + y, bounds, - sourceBounds, exists, urlOrGetter, - post, - ajaxHeaders, context2D, - tile, - tilesMatrix = this.tilesMatrix, - tileSource = this.source; + this.loadTilesWithAjax, + ajaxHeaders, + sourceBounds, + post, + tileSource.getTileHashKey(level, xMod, yMod, urlOrGetter, ajaxHeaders, post) + ); - if ( !tilesMatrix[ level ] ) { - tilesMatrix[ level ] = {}; - } - if ( !tilesMatrix[ level ][ x ] ) { - tilesMatrix[ level ][ x ] = {}; - } - - if ( !tilesMatrix[ level ][ x ][ y ] || !tilesMatrix[ level ][ x ][ y ].flipped !== !this.flipped ) { - xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x; - yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y; - bounds = this.getTileBounds( level, x, y ); - sourceBounds = tileSource.getTileBounds( level, xMod, yMod, true ); - exists = tileSource.tileExists( level, xMod, yMod ); - urlOrGetter = tileSource.getTileUrl( level, xMod, yMod ); - post = tileSource.getTilePostData( level, xMod, yMod ); - - // Headers are only applicable if loadTilesWithAjax is set - if (this.loadTilesWithAjax) { - ajaxHeaders = tileSource.getTileAjaxHeaders( level, xMod, yMod ); - // Combine tile AJAX headers with tiled image AJAX headers (if applicable) - if ($.isPlainObject(this.ajaxHeaders)) { - ajaxHeaders = $.extend({}, this.ajaxHeaders, ajaxHeaders); - } - } else { - ajaxHeaders = null; + if (this.getFlip()) { + if (xMod === 0) { + tile.isRightMost = true; } - - context2D = tileSource.getContext2D ? - tileSource.getContext2D(level, xMod, yMod) : undefined; - - tile = new $.Tile( - level, - x, - y, - bounds, - exists, - urlOrGetter, - context2D, - this.loadTilesWithAjax, - ajaxHeaders, - sourceBounds, - post, - tileSource.getTileHashKey(level, xMod, yMod, urlOrGetter, ajaxHeaders, post) - ); - - if (this.getFlip()) { - if (xMod === 0) { - tile.isRightMost = true; - } - } else { - if (xMod === numTiles.x - 1) { - tile.isRightMost = true; - } - } - - if (yMod === numTiles.y - 1) { - tile.isBottomMost = true; - } - - tile.flipped = this.flipped; - - tilesMatrix[ level ][ x ][ y ] = tile; - } - - tile = tilesMatrix[ level ][ x ][ y ]; - tile.lastTouchTime = time; - - return tile; - }, - - /** - * Dispatch a job to the ImageLoader to load the Image for a Tile. - * @private - * @param {OpenSeadragon.Tile} tile - * @param {Number} time - */ - _loadTile: function(tile, time ) { - var _this = this; - tile.loading = true; - this._imageLoader.addJob({ - src: tile.getUrl(), - tile: tile, - source: this.source, - postData: tile.postData, - loadWithAjax: tile.loadWithAjax, - ajaxHeaders: tile.ajaxHeaders, - crossOriginPolicy: this.crossOriginPolicy, - ajaxWithCredentials: this.ajaxWithCredentials, - callback: function( data, errorMsg, tileRequest ){ - _this._onTileLoad( tile, time, data, errorMsg, tileRequest ); - }, - abort: function() { - tile.loading = false; - } - }); - }, - - /** - * Callback fired when a Tile's Image finished downloading. - * @private - * @param {OpenSeadragon.Tile} tile - * @param {Number} time - * @param {*} data image data - * @param {String} errorMsg - * @param {XMLHttpRequest} tileRequest - */ - _onTileLoad: function( tile, time, data, errorMsg, tileRequest ) { - if ( !data ) { - $.console.error( "Tile %s failed to load: %s - error: %s", tile, tile.getUrl(), errorMsg ); - /** - * Triggered when a tile fails to load. - * - * @event tile-load-failed - * @memberof OpenSeadragon.Viewer - * @type {object} - * @property {OpenSeadragon.Tile} tile - The tile that failed to load. - * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image the tile belongs to. - * @property {number} time - The time in milliseconds when the tile load began. - * @property {string} message - The error message. - * @property {XMLHttpRequest} tileRequest - The XMLHttpRequest used to load the tile if available. - */ - this.viewer.raiseEvent("tile-load-failed", { - tile: tile, - tiledImage: this, - time: time, - message: errorMsg, - tileRequest: tileRequest - }); - tile.loading = false; - tile.exists = false; - return; } else { - tile.exists = true; + if (xMod === numTiles.x - 1) { + tile.isRightMost = true; + } } - if ( time < this.lastResetTime ) { - $.console.warn( "Ignoring tile %s loaded before reset: %s", tile, tile.getUrl() ); + if (yMod === numTiles.y - 1) { + tile.isBottomMost = true; + } + + tile.flipped = this.flipped; + + tilesMatrix[ level ][ x ][ y ] = tile; + } + + tile = tilesMatrix[ level ][ x ][ y ]; + tile.lastTouchTime = time; + + return tile; + }, + + /** + * Dispatch a job to the ImageLoader to load the Image for a Tile. + * @private + * @param {OpenSeadragon.Tile} tile + * @param {Number} time + */ + _loadTile: function(tile, time ) { + var _this = this; + tile.loading = true; + this._imageLoader.addJob({ + src: tile.getUrl(), + tile: tile, + source: this.source, + postData: tile.postData, + loadWithAjax: tile.loadWithAjax, + ajaxHeaders: tile.ajaxHeaders, + crossOriginPolicy: this.crossOriginPolicy, + ajaxWithCredentials: this.ajaxWithCredentials, + callback: function( data, errorMsg, tileRequest ){ + _this._onTileLoad( tile, time, data, errorMsg, tileRequest ); + }, + abort: function() { tile.loading = false; - return; - } - - var _this = this, - finish = function() { - var ccc = _this.source; - var cutoff = ccc.getClosestLevel(); - _this._setTileLoaded(tile, data, cutoff, tileRequest); - }; - - - finish(); - }, - - /** - * @private - * @param {OpenSeadragon.Tile} tile - * @param {*} data image data, the data sent to ImageJob.prototype.finish(), by default an Image object - * @param {Number|undefined} cutoff - * @param {XMLHttpRequest|undefined} tileRequest - */ - _setTileLoaded: function(tile, data, cutoff, tileRequest) { - var increment = 0, - eventFinished = false, - _this = this; - - function getCompletionCallback() { - if (eventFinished) { - $.console.error("Event 'tile-loaded' argument getCompletionCallback must be called synchronously. " + - "Its return value should be called asynchronously."); - } - increment++; - return completionCallback; - } - - function completionCallback() { - increment--; - if (increment === 0) { - tile.loading = false; - tile.loaded = true; - tile.hasTransparency = _this.source.hasTransparency( - tile.context2D, tile.getUrl(), tile.ajaxHeaders, tile.postData - ); - if (!tile.context2D) { - _this._tileCache.cacheTile({ - data: data, - tile: tile, - cutoff: cutoff, - tiledImage: _this - }); - } - /** - * Triggered when a tile is loaded and pre-processing is compelete, - * and the tile is ready to draw. - * - * @event tile-ready - * @memberof OpenSeadragon.Viewer - * @type {object} - * @property {OpenSeadragon.Tile} tile - The tile which has been loaded. - * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile. - * @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable). - */ - _this.viewer.raiseEvent("tile-ready", { - tile: tile, - tiledImage: _this, - tileRequest: tileRequest - }); - _this._needsDraw = true; - } } + }); + }, + /** + * Callback fired when a Tile's Image finished downloading. + * @private + * @param {OpenSeadragon.Tile} tile + * @param {Number} time + * @param {*} data image data + * @param {String} errorMsg + * @param {XMLHttpRequest} tileRequest + */ + _onTileLoad: function( tile, time, data, errorMsg, tileRequest ) { + if ( !data ) { + $.console.error( "Tile %s failed to load: %s - error: %s", tile, tile.getUrl(), errorMsg ); /** - * Triggered when a tile has just been loaded in memory. That means that the - * image has been downloaded and can be modified before being drawn to the canvas. + * Triggered when a tile fails to load. * - * @event tile-loaded + * @event tile-load-failed * @memberof OpenSeadragon.Viewer * @type {object} - * @property {Image|*} image - The image (data) of the tile. Deprecated. - * @property {*} data image data, the data sent to ImageJob.prototype.finish(), by default an Image object - * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile. - * @property {OpenSeadragon.Tile} tile - The tile which has been loaded. - * @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable). - * @property {function} getCompletionCallback - A function giving a callback to call - * when the asynchronous processing of the image is done. The image will be - * marked as entirely loaded when the callback has been called once for each - * call to getCompletionCallback. + * @property {OpenSeadragon.Tile} tile - The tile that failed to load. + * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image the tile belongs to. + * @property {number} time - The time in milliseconds when the tile load began. + * @property {string} message - The error message. + * @property {XMLHttpRequest} tileRequest - The XMLHttpRequest used to load the tile if available. */ - - var fallbackCompletion = getCompletionCallback(); - this.viewer.raiseEvent("tile-loaded", { + this.viewer.raiseEvent("tile-load-failed", { tile: tile, tiledImage: this, - tileRequest: tileRequest, - get image() { - $.console.error("[tile-loaded] event 'image' has been deprecated. Use 'data' property instead."); - return data; - }, - data: data, - getCompletionCallback: getCompletionCallback + time: time, + message: errorMsg, + tileRequest: tileRequest }); - eventFinished = true; - // In case the completion callback is never called, we at least force it once. - fallbackCompletion(); - }, + tile.loading = false; + tile.exists = false; + return; + } else { + tile.exists = true; + } + if ( time < this.lastResetTime ) { + $.console.warn( "Ignoring tile %s loaded before reset: %s", tile, tile.getUrl() ); + tile.loading = false; + return; + } + + var _this = this, + finish = function() { + var ccc = _this.source; + var cutoff = ccc.getClosestLevel(); + _this._setTileLoaded(tile, data, cutoff, tileRequest); + }; + + + finish(); + }, + + /** + * @private + * @param {OpenSeadragon.Tile} tile + * @param {*} data image data, the data sent to ImageJob.prototype.finish(), by default an Image object + * @param {Number|undefined} cutoff + * @param {XMLHttpRequest|undefined} tileRequest + */ + _setTileLoaded: function(tile, data, cutoff, tileRequest) { + var increment = 0, + eventFinished = false, + _this = this; + + function getCompletionCallback() { + if (eventFinished) { + $.console.error("Event 'tile-loaded' argument getCompletionCallback must be called synchronously. " + + "Its return value should be called asynchronously."); + } + increment++; + return completionCallback; + } + + function completionCallback() { + increment--; + if (increment === 0) { + tile.loading = false; + tile.loaded = true; + tile.hasTransparency = _this.source.hasTransparency( + tile.context2D, tile.getUrl(), tile.ajaxHeaders, tile.postData + ); + if (!tile.context2D) { + _this._tileCache.cacheTile({ + data: data, + tile: tile, + cutoff: cutoff, + tiledImage: _this + }); + } + /** + * Triggered when a tile is loaded and pre-processing is compelete, + * and the tile is ready to draw. + * + * @event tile-ready + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Tile} tile - The tile which has been loaded. + * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile. + * @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable). + */ + _this.viewer.raiseEvent("tile-ready", { + tile: tile, + tiledImage: _this, + tileRequest: tileRequest + }); + _this._needsDraw = true; + } + } /** - * Determines the 'best tiles' from the given 'last best' tiles and the - * tile in question. - * @private + * Triggered when a tile has just been loaded in memory. That means that the + * image has been downloaded and can be modified before being drawn to the canvas. * - * @param {OpenSeadragon.Tile[]} previousBest The best tiles so far. - * @param {OpenSeadragon.Tile} tile The new tile to consider. - * @param {Number} maxNTiles The max number of best tiles. - * @returns {OpenSeadragon.Tile[]} The new best tiles. + * @event tile-loaded + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {Image|*} image - The image (data) of the tile. Deprecated. + * @property {*} data image data, the data sent to ImageJob.prototype.finish(), by default an Image object + * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile. + * @property {OpenSeadragon.Tile} tile - The tile which has been loaded. + * @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable). + * @property {function} getCompletionCallback - A function giving a callback to call + * when the asynchronous processing of the image is done. The image will be + * marked as entirely loaded when the callback has been called once for each + * call to getCompletionCallback. */ - _compareTiles: function( previousBest, tile, maxNTiles ) { - if ( !previousBest ) { - return [tile]; + + var fallbackCompletion = getCompletionCallback(); + this.viewer.raiseEvent("tile-loaded", { + tile: tile, + tiledImage: this, + tileRequest: tileRequest, + get image() { + $.console.error("[tile-loaded] event 'image' has been deprecated. Use 'data' property instead."); + return data; + }, + data: data, + getCompletionCallback: getCompletionCallback + }); + eventFinished = true; + // In case the completion callback is never called, we at least force it once. + fallbackCompletion(); + }, + + + /** + * Determines the 'best tiles' from the given 'last best' tiles and the + * tile in question. + * @private + * + * @param {OpenSeadragon.Tile[]} previousBest The best tiles so far. + * @param {OpenSeadragon.Tile} tile The new tile to consider. + * @param {Number} maxNTiles The max number of best tiles. + * @returns {OpenSeadragon.Tile[]} The new best tiles. + */ + _compareTiles: function( previousBest, tile, maxNTiles ) { + if ( !previousBest ) { + return [tile]; + } + previousBest.push(tile); + this._sortTiles(previousBest); + if (previousBest.length > maxNTiles) { + previousBest.pop(); + } + return previousBest; + }, + + /** + * Sorts tiles in an array according to distance and visibility. + * @private + * + * @param {OpenSeadragon.Tile[]} tiles The tiles. + */ + _sortTiles: function( tiles ) { + tiles.sort(function (a, b) { + if (a === null) { + return 1; } - previousBest.push(tile); - this._sortTiles(previousBest); - if (previousBest.length > maxNTiles) { - previousBest.pop(); + if (b === null) { + return -1; } - return previousBest; - }, - - /** - * Sorts tiles in an array according to distance and visibility. - * @private - * - * @param {OpenSeadragon.Tile[]} tiles The tiles. - */ - _sortTiles: function( tiles ) { - tiles.sort(function (a, b) { - if (a === null) { - return 1; - } - if (b === null) { - return -1; - } - if (a.visibility === b.visibility) { - // sort by smallest squared distance - return (a.squaredDistance - b.squaredDistance); - } else { - // sort by largest visibility value - return (b.visibility - a.visibility); - } - }); - }, - - - /** - * Returns true if the given tile provides coverage to lower-level tiles of - * lower resolution representing the same content. If neither x nor y is - * given, returns true if the entire visible level provides coverage. - * - * Note that out-of-bounds tiles provide coverage in this sense, since - * there's no content that they would need to cover. Tiles at non-existent - * levels that are within the image bounds, however, do not. - * @private - * - * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. - * @param {Number} level - The resolution level of the tile. - * @param {Number} x - The X position of the tile. - * @param {Number} y - The Y position of the tile. - * @returns {Boolean} - */ - _providesCoverage: function( coverage, level, x, y ) { - var rows, - cols, - i, j; - - if ( !coverage[ level ] ) { - return false; + if (a.visibility === b.visibility) { + // sort by smallest squared distance + return (a.squaredDistance - b.squaredDistance); + } else { + // sort by largest visibility value + return (b.visibility - a.visibility); } + }); + }, - if ( x === undefined || y === undefined ) { - rows = coverage[ level ]; - for ( i in rows ) { - if ( Object.prototype.hasOwnProperty.call( rows, i ) ) { - cols = rows[ i ]; - for ( j in cols ) { - if ( Object.prototype.hasOwnProperty.call( cols, j ) && !cols[ j ] ) { - return false; - } + + /** + * Returns true if the given tile provides coverage to lower-level tiles of + * lower resolution representing the same content. If neither x nor y is + * given, returns true if the entire visible level provides coverage. + * + * Note that out-of-bounds tiles provide coverage in this sense, since + * there's no content that they would need to cover. Tiles at non-existent + * levels that are within the image bounds, however, do not. + * @private + * + * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. + * @param {Number} level - The resolution level of the tile. + * @param {Number} x - The X position of the tile. + * @param {Number} y - The Y position of the tile. + * @returns {Boolean} + */ + _providesCoverage: function( coverage, level, x, y ) { + var rows, + cols, + i, j; + + if ( !coverage[ level ] ) { + return false; + } + + if ( x === undefined || y === undefined ) { + rows = coverage[ level ]; + for ( i in rows ) { + if ( Object.prototype.hasOwnProperty.call( rows, i ) ) { + cols = rows[ i ]; + for ( j in cols ) { + if ( Object.prototype.hasOwnProperty.call( cols, j ) && !cols[ j ] ) { + return false; } } } - - return true; } - return ( - coverage[ level ][ x] === undefined || - coverage[ level ][ x ][ y ] === undefined || - coverage[ level ][ x ][ y ] === true - ); - }, - - /** - * Returns true if the given tile is completely covered by higher-level - * tiles of higher resolution representing the same content. If neither x - * nor y is given, returns true if the entire visible level is covered. - * @private - * - * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. - * @param {Number} level - The resolution level of the tile. - * @param {Number} x - The X position of the tile. - * @param {Number} y - The Y position of the tile. - * @returns {Boolean} - */ - _isCovered: function( coverage, level, x, y ) { - if ( x === undefined || y === undefined ) { - return this._providesCoverage( coverage, level + 1 ); - } else { - return ( - this._providesCoverage( coverage, level + 1, 2 * x, 2 * y ) && - this._providesCoverage( coverage, level + 1, 2 * x, 2 * y + 1 ) && - this._providesCoverage( coverage, level + 1, 2 * x + 1, 2 * y ) && - this._providesCoverage( coverage, level + 1, 2 * x + 1, 2 * y + 1 ) - ); - } - }, - - /** - * Sets whether the given tile provides coverage or not. - * @private - * - * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. - * @param {Number} level - The resolution level of the tile. - * @param {Number} x - The X position of the tile. - * @param {Number} y - The Y position of the tile. - * @param {Boolean} covers - Whether the tile provides coverage. - */ - _setCoverage: function( coverage, level, x, y, covers ) { - if ( !coverage[ level ] ) { - $.console.warn( - "Setting coverage for a tile before its level's coverage has been reset: %s", - level - ); - return; - } - - if ( !coverage[ level ][ x ] ) { - coverage[ level ][ x ] = {}; - } - - coverage[ level ][ x ][ y ] = covers; - }, - - /** - * Resets coverage information for the given level. This should be called - * after every draw routine. Note that at the beginning of the next draw - * routine, coverage for every visible tile should be explicitly set. - * @private - * - * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. - * @param {Number} level - The resolution level of tiles to completely reset. - */ - _resetCoverage: function( coverage, level ) { - coverage[ level ] = {}; + return true; } - }); + + return ( + coverage[ level ][ x] === undefined || + coverage[ level ][ x ][ y ] === undefined || + coverage[ level ][ x ][ y ] === true + ); + }, + + /** + * Returns true if the given tile is completely covered by higher-level + * tiles of higher resolution representing the same content. If neither x + * nor y is given, returns true if the entire visible level is covered. + * @private + * + * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. + * @param {Number} level - The resolution level of the tile. + * @param {Number} x - The X position of the tile. + * @param {Number} y - The Y position of the tile. + * @returns {Boolean} + */ + _isCovered: function( coverage, level, x, y ) { + if ( x === undefined || y === undefined ) { + return this._providesCoverage( coverage, level + 1 ); + } else { + return ( + this._providesCoverage( coverage, level + 1, 2 * x, 2 * y ) && + this._providesCoverage( coverage, level + 1, 2 * x, 2 * y + 1 ) && + this._providesCoverage( coverage, level + 1, 2 * x + 1, 2 * y ) && + this._providesCoverage( coverage, level + 1, 2 * x + 1, 2 * y + 1 ) + ); + } + }, + + /** + * Sets whether the given tile provides coverage or not. + * @private + * + * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. + * @param {Number} level - The resolution level of the tile. + * @param {Number} x - The X position of the tile. + * @param {Number} y - The Y position of the tile. + * @param {Boolean} covers - Whether the tile provides coverage. + */ + _setCoverage: function( coverage, level, x, y, covers ) { + if ( !coverage[ level ] ) { + $.console.warn( + "Setting coverage for a tile before its level's coverage has been reset: %s", + level + ); + return; + } + + if ( !coverage[ level ][ x ] ) { + coverage[ level ][ x ] = {}; + } + + coverage[ level ][ x ][ y ] = covers; + }, + + /** + * Resets coverage information for the given level. This should be called + * after every draw routine. Note that at the beginning of the next draw + * routine, coverage for every visible tile should be explicitly set. + * @private + * + * @param {Object} coverage - A '3d' dictionary [level][x][y] --> Boolean. + * @param {Number} level - The resolution level of tiles to completely reset. + */ + _resetCoverage: function( coverage, level ) { + coverage[ level ] = {}; + } +}); - }( OpenSeadragon )); +}( OpenSeadragon )); From 65d30e7ce114a47f35ce41f45cb1dc5d3c890465 Mon Sep 17 00:00:00 2001 From: Tom Date: Fri, 31 May 2024 16:24:04 -0400 Subject: [PATCH 07/32] add minPixelRatio guard back in; fix tabs and spaces in comments' --- src/tiledimage.js | 35 ++++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index a227a8dd..c1443bf1 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -72,18 +72,18 @@ * @param {Boolean} [options.iOSDevice] - See {@link OpenSeadragon.Options}. * @param {Number} [options.opacity=1] - Set to draw at proportional opacity. If zero, images will not draw. * @param {Boolean} [options.preload=false] - Set true to load even when the image is hidden by zero opacity. - * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible - values. - * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. - * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. - * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.ajaxWithCredentials] - See {@link OpenSeadragon.Options}. - * @param {Boolean} [options.loadTilesWithAjax] - * Whether to load tile data using AJAX requests. - * Defaults to the setting in {@link OpenSeadragon.Options}. - * @param {Object} [options.ajaxHeaders={}] - * A set of headers to include when making tile AJAX requests. - */ + * @param {String} [options.compositeOperation] - How the image is composited onto other images; + * see compositeOperation in {@link OpenSeadragon.Options} for possible values. + * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. + * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. + * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.ajaxWithCredentials] - See {@link OpenSeadragon.Options}. + * @param {Boolean} [options.loadTilesWithAjax] + * Whether to load tile data using AJAX requests. + * Defaults to the setting in {@link OpenSeadragon.Options}. + * @param {Object} [options.ajaxHeaders={}] + * A set of headers to include when making tile AJAX requests. + */ $.TiledImage = function( options ) { this._initialized = false; /** @@ -1081,7 +1081,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag // _tilesToDraw might have been updated by the update; refresh it tileArray = this._tilesToDraw.flat(); - // mark the tiles as being drawn, so that they won't be discarded from + // mark the tiles as being drawn, so that they won't be discarded from // the tileCache tileArray.forEach(tileInfo => { tileInfo.tile.beingDrawn = true; @@ -1359,6 +1359,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag // We are iterating from highest resolution to lowest resolution // Once a level fully covers the viewport the loop is halted and // lower-resolution levels are skipped + let useLevel = false; for (let i = 0; i < levelList.length; i++) { let level = levelList[i]; @@ -1367,6 +1368,14 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag true ).x * this._scaleSpring.current.value; + // make sure we skip levels until currentRenderPixelRatio becomes >= minPixelRatio + // but always use the last level in the list so we draw something + if (i === levelList.length - 1 || currentRenderPixelRatio >= this.minPixelRatio ) { + useLevel = true; + } else if (!useLevel) { + continue; + } + var targetRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( this.source.getPixelRatio(level), false From 834ed6ede5d35d8a06ddcc51d216b3e2453da65a Mon Sep 17 00:00:00 2001 From: eug-L Date: Tue, 4 Jun 2024 15:24:56 +0800 Subject: [PATCH 08/32] fix ajax headers not propagated to navigator --- src/viewer.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/viewer.js b/src/viewer.js index 5431626f..d4e762be 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -515,6 +515,8 @@ $.Viewer = function( options ) { crossOriginPolicy: this.crossOriginPolicy, animationTime: this.animationTime, drawer: this.drawer.getType(), + loadTilesWithAjax: this.loadTilesWithAjax, + ajaxHeaders: this.ajaxHeaders, }); } From feb5e13c3270b7cbf9216c9feb339fe4303747a8 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Tue, 4 Jun 2024 09:29:40 -0700 Subject: [PATCH 09/32] Changelog for #2537 --- changelog.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog.txt b/changelog.txt index fd03a346..525f28e6 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, #2468, #2469, #2472, #2478, #2488, #2492, #2521 @pearcetm, @Aiosa, @thec0keman) +* The viewer now uses WebGL when available (#2310, #2462, #2466, #2468, #2469, #2472, #2478, #2488, #2492, #2521, #2537 @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) From 35d468c4db81013cad396c720f8e44211356f60f Mon Sep 17 00:00:00 2001 From: eug-L Date: Sun, 9 Jun 2024 20:52:37 +0800 Subject: [PATCH 10/32] propagate ajaxWithCredentials to navigator --- src/viewer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/viewer.js b/src/viewer.js index d4e762be..9da4cd9f 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -517,6 +517,7 @@ $.Viewer = function( options ) { drawer: this.drawer.getType(), loadTilesWithAjax: this.loadTilesWithAjax, ajaxHeaders: this.ajaxHeaders, + ajaxWithCredentials: this.ajaxWithCredentials, }); } From fd74ea3dca9a414328312461e6f0f7c312ab9e11 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Mon, 10 Jun 2024 09:27:44 -0700 Subject: [PATCH 11/32] Changelog for #2539 --- changelog.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/changelog.txt b/changelog.txt index 525f28e6..c9afb51d 100644 --- a/changelog.txt +++ b/changelog.txt @@ -22,6 +22,7 @@ OPENSEADRAGON CHANGELOG * Fixed: The navigator wouldn't update its tracking rectangle when the navigator was resized (#2491 @pearcetm) * Fixed: The drawer would improperly crop when the viewport was flipped and a tiled image was rotated (#2511 @pearcetm, @eug-L) * Fixed: Flipped viewport caused image to be flipped again when going fullscreen or resizing (#2518 @pearcetm) +* Fixed: Viewer ajax options (loadTilesWithAjax, ajaxHeaders, and ajaxWithCredentials) weren't being propogated to the navigator. (#2539 @eug-L) 4.1.1: From db0ab104281cdf506e40ef0f0d3c462ebdff39f5 Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Fri, 14 Jun 2024 14:49:42 -0700 Subject: [PATCH 12/32] Added avif to supported image formats (#2439) --- changelog.txt | 1 + src/openseadragon.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/changelog.txt b/changelog.txt index c9afb51d..a5fdeca2 100644 --- a/changelog.txt +++ b/changelog.txt @@ -7,6 +7,7 @@ OPENSEADRAGON CHANGELOG * DEPRECATION: The OpenSeadragon.createCallback function is no longer recommended (#2367 @akansjain) * The viewer now uses WebGL when available (#2310, #2462, #2466, #2468, #2469, #2472, #2478, #2488, #2492, #2521, #2537 @pearcetm, @Aiosa, @thec0keman) * Added webp to supported image formats (#2455 @BeebBenjamin) +* Added avif to supported image formats (#2439 @msalsbery) * 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) * Added getter & setter for Viewport.maxZoomPixelRatio (#2506 @eug-L) diff --git a/src/openseadragon.js b/src/openseadragon.js index 66036afa..249d7725 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -2631,6 +2631,7 @@ function OpenSeadragon( options ){ * Preexisting formats that are not being updated are left unchanged. * By default, the defined formats are * 
{
+         *      avif: true,
          *      bmp:  false,
          *      jpeg: true,
          *      jpg:  true,
@@ -2698,6 +2699,7 @@ function OpenSeadragon( options ){
 
 
     var FILEFORMATS = {
+            avif: true,
             bmp:  false,
             jpeg: true,
             jpg:  true,

From 88d7eb8c600949943f0d54dbe94229cde62057a2 Mon Sep 17 00:00:00 2001
From: Mark Salsbery 
Date: Fri, 14 Jun 2024 14:51:31 -0700
Subject: [PATCH 13/32] Update changelog.txt

---
 changelog.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/changelog.txt b/changelog.txt
index a5fdeca2..2c399a37 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -7,7 +7,7 @@ OPENSEADRAGON CHANGELOG
 * DEPRECATION: The OpenSeadragon.createCallback function is no longer recommended (#2367 @akansjain)
 * The viewer now uses WebGL when available (#2310, #2462, #2466, #2468, #2469, #2472, #2478, #2488, #2492, #2521, #2537 @pearcetm, @Aiosa, @thec0keman)
 * Added webp to supported image formats (#2455 @BeebBenjamin)
-* Added avif to supported image formats (#2439 @msalsbery)
+* Added avif to supported image formats (#2544 @msalsbery)
 * 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)
 * Added getter & setter for Viewport.maxZoomPixelRatio (#2506 @eug-L)

From 44347fb2d00e58402cded849341ff9f732105c83 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen 
Date: Tue, 18 Jun 2024 10:57:55 +0100
Subject: [PATCH 14/32] Fixed: Invert overlay scale and rotate on flip

---
 src/overlay.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/overlay.js b/src/overlay.js
index bc25a051..b942409a 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -259,7 +259,16 @@
 
             var position = positionAndSize.position;
             var size = this.size = positionAndSize.size;
-            var rotate = positionAndSize.rotate;
+            var rotate;
+            var scale = "";
+
+            if (viewport.flipped){
+                rotate = -positionAndSize.rotate;
+                scale = " scaleX(-1)";
+            }
+            else {
+                rotate = positionAndSize.rotate;
+            }
 
             // call the onDraw callback if it exists to allow one to overwrite
             // the drawing/positioning/sizing of the overlay
@@ -282,7 +291,10 @@
                 if (transformOriginProp && transformProp) {
                     if (rotate) {
                         style[transformOriginProp] = this._getTransformOrigin();
-                        style[transformProp] = "rotate(" + rotate + "deg)";
+                        style[transformProp] = "rotate(" + rotate + "deg)" + scale;
+                    } else if (!rotate && viewport.flipped) {
+                        style[transformOriginProp] = this._getTransformOrigin();
+                        style[transformProp] = "scaleX(-1)";
                     } else {
                         style[transformOriginProp] = "";
                         style[transformProp] = "";
@@ -308,12 +320,21 @@
                     var rect = new $.Rect(position.x, position.y, size.x, size.y);
                     var boundingBox = this._getBoundingBox(rect, viewport.getRotation(true));
                     position = boundingBox.getTopLeft();
+                    position = boundingBox.getTopLeft();
+
+                    if (viewport.flipped){
+                        position.x = (viewport.getContainerSize().x - position.x);
+                    }
+
                     size = boundingBox.getSize();
                 } else {
                     rotate = viewport.getRotation(true);
                 }
             }
 
+            if (viewport.flipped) {
+                position.x = (viewport.getContainerSize().x - position.x);
+            }
             return {
                 position: position,
                 size: size,

From 79eecdcc7602aa85efe68aaaa7b67f69f24a315d Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen 
Date: Tue, 18 Jun 2024 11:10:11 +0100
Subject: [PATCH 15/32] Fixed: Remove duplicate line

---
 src/overlay.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/overlay.js b/src/overlay.js
index b942409a..5676769d 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -320,8 +320,7 @@
                     var rect = new $.Rect(position.x, position.y, size.x, size.y);
                     var boundingBox = this._getBoundingBox(rect, viewport.getRotation(true));
                     position = boundingBox.getTopLeft();
-                    position = boundingBox.getTopLeft();
-
+                 
                     if (viewport.flipped){
                         position.x = (viewport.getContainerSize().x - position.x);
                     }

From 263dc85fbd4816266c8042ce624befe91a711b15 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen 
Date: Tue, 18 Jun 2024 11:22:23 +0100
Subject: [PATCH 16/32] Fixed: Remove trailing spaces

---
 src/overlay.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/overlay.js b/src/overlay.js
index 5676769d..c77be16d 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -261,7 +261,7 @@
             var size = this.size = positionAndSize.size;
             var rotate;
             var scale = "";
-
+            
             if (viewport.flipped){
                 rotate = -positionAndSize.rotate;
                 scale = " scaleX(-1)";
@@ -269,7 +269,6 @@
             else {
                 rotate = positionAndSize.rotate;
             }
-
             // call the onDraw callback if it exists to allow one to overwrite
             // the drawing/positioning/sizing of the overlay
             if (this.onDraw) {
@@ -320,11 +319,9 @@
                     var rect = new $.Rect(position.x, position.y, size.x, size.y);
                     var boundingBox = this._getBoundingBox(rect, viewport.getRotation(true));
                     position = boundingBox.getTopLeft();
-                 
                     if (viewport.flipped){
                         position.x = (viewport.getContainerSize().x - position.x);
                     }
-
                     size = boundingBox.getSize();
                 } else {
                     rotate = viewport.getRotation(true);

From 2c6b970f29a758fabbab0db09c6f614133a0cd83 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen 
Date: Tue, 18 Jun 2024 11:28:29 +0100
Subject: [PATCH 17/32] Fixed: Remove trailing space

---
 src/overlay.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/overlay.js b/src/overlay.js
index c77be16d..42c8ec73 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -261,7 +261,6 @@
             var size = this.size = positionAndSize.size;
             var rotate;
             var scale = "";
-            
             if (viewport.flipped){
                 rotate = -positionAndSize.rotate;
                 scale = " scaleX(-1)";

From 3ed100d2180ecc1adf49517cf7aa8abfeaf5e6fe Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 18 Jun 2024 23:24:55 +0000
Subject: [PATCH 18/32] Bump braces from 3.0.2 to 3.0.3

Bumps [braces](https://github.com/micromatch/braces) from 3.0.2 to 3.0.3.
- [Changelog](https://github.com/micromatch/braces/blob/master/CHANGELOG.md)
- [Commits](https://github.com/micromatch/braces/compare/3.0.2...3.0.3)

---
updated-dependencies:
- dependency-name: braces
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] 
---
 package-lock.json | 135 ++++++++++++++++------------------------------
 1 file changed, 47 insertions(+), 88 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f123990b..2be68b58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "openseadragon",
-    "version": "4.1.0",
+    "version": "4.1.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "openseadragon",
-            "version": "4.1.0",
+            "version": "4.1.1",
             "license": "BSD-3-Clause",
             "devDependencies": {
                 "eslint-plugin-compat": "^4.1.2",
@@ -571,6 +571,18 @@
                 "concat-map": "0.0.1"
             }
         },
+        "node_modules/braces": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+            "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+            "dev": true,
+            "dependencies": {
+                "fill-range": "^7.1.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/browserslist": {
             "version": "4.21.5",
             "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
@@ -1735,6 +1747,18 @@
                 "node": "^10.12.0 || >=12.0.0"
             }
         },
+        "node_modules/fill-range": {
+            "version": "7.1.1",
+            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+            "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+            "dev": true,
+            "dependencies": {
+                "to-regex-range": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/finalhandler": {
             "version": "1.1.2",
             "dev": true,
@@ -1767,39 +1791,6 @@
                 "node": ">= 10.13.0"
             }
         },
-        "node_modules/findup-sync/node_modules/braces": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-            "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-            "dev": true,
-            "dependencies": {
-                "fill-range": "^7.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/findup-sync/node_modules/fill-range": {
-            "version": "7.0.1",
-            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-            "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-            "dev": true,
-            "dependencies": {
-                "to-regex-range": "^5.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/findup-sync/node_modules/is-number": {
-            "version": "7.0.0",
-            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-            "dev": true,
-            "engines": {
-                "node": ">=0.12.0"
-            }
-        },
         "node_modules/findup-sync/node_modules/micromatch": {
             "version": "4.0.5",
             "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -1813,18 +1804,6 @@
                 "node": ">=8.6"
             }
         },
-        "node_modules/findup-sync/node_modules/to-regex-range": {
-            "version": "5.0.1",
-            "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-            "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-            "dev": true,
-            "dependencies": {
-                "is-number": "^7.0.0"
-            },
-            "engines": {
-                "node": ">=8.0"
-            }
-        },
         "node_modules/fined": {
             "version": "1.2.0",
             "dev": true,
@@ -3097,6 +3076,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/is-number": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.12.0"
+            }
+        },
         "node_modules/is-number-like": {
             "version": "1.0.8",
             "dev": true,
@@ -3348,28 +3336,6 @@
                 "node": ">=10"
             }
         },
-        "node_modules/liftup/node_modules/braces": {
-            "version": "3.0.2",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "fill-range": "^7.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/liftup/node_modules/fill-range": {
-            "version": "7.0.1",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "to-regex-range": "^5.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/liftup/node_modules/findup-sync": {
             "version": "4.0.0",
             "dev": true,
@@ -3384,14 +3350,6 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/liftup/node_modules/is-number": {
-            "version": "7.0.0",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=0.12.0"
-            }
-        },
         "node_modules/liftup/node_modules/micromatch": {
             "version": "4.0.5",
             "dev": true,
@@ -3404,17 +3362,6 @@
                 "node": ">=8.6"
             }
         },
-        "node_modules/liftup/node_modules/to-regex-range": {
-            "version": "5.0.1",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "is-number": "^7.0.0"
-            },
-            "engines": {
-                "node": ">=8.0"
-            }
-        },
         "node_modules/lines-and-columns": {
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -4765,6 +4712,18 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/to-regex-range": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+            "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "dev": true,
+            "dependencies": {
+                "is-number": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=8.0"
+            }
+        },
         "node_modules/toidentifier": {
             "version": "1.0.1",
             "dev": true,

From 2290e5d08de7e4ebdae74719ba08d12364d7e340 Mon Sep 17 00:00:00 2001
From: Mark Salsbery 
Date: Sun, 23 Jun 2024 16:32:00 -0700
Subject: [PATCH 19/32] More dropped support for IE11

---
 package-lock.json                 | 17 ++++++----
 package.json                      |  2 +-
 src/button.js                     |  7 ----
 src/control.js                    |  6 +---
 src/mousetracker.js               | 26 +++++----------
 src/navigator.js                  |  1 -
 src/openseadragon.js              | 54 +++++++------------------------
 src/referencestrip.js             |  1 -
 test/helpers/legacy.mouse.shim.js |  2 +-
 9 files changed, 33 insertions(+), 83 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f123990b..ac650b70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "openseadragon",
-    "version": "4.1.0",
+    "version": "4.1.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "openseadragon",
-            "version": "4.1.0",
+            "version": "4.1.1",
             "license": "BSD-3-Clause",
             "devDependencies": {
                 "eslint-plugin-compat": "^4.1.2",
@@ -656,9 +656,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001456",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001456.tgz",
-            "integrity": "sha512-XFHJY5dUgmpMV25UqaD4kVq2LsiaU5rS8fb0f17pCoXQiQslzmFgnfOxfvo1bTpTqf7dwG/N/05CnLCnOEKmzA==",
+            "version": "1.0.30001636",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz",
+            "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==",
             "dev": true,
             "funding": [
                 {
@@ -668,8 +668,13 @@
                 {
                     "type": "tidelift",
                     "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
                 }
-            ]
+            ],
+            "license": "CC-BY-4.0"
         },
         "node_modules/chalk": {
             "version": "2.4.2",
diff --git a/package.json b/package.json
index 7654a199..86dbe53b 100644
--- a/package.json
+++ b/package.json
@@ -48,4 +48,4 @@
         "test": "grunt test",
         "prepare": "grunt build"
     }
-}
\ No newline at end of file
+}
diff --git a/src/button.js b/src/button.js
index 34d1f27a..aeb9df92 100644
--- a/src/button.js
+++ b/src/button.js
@@ -167,13 +167,6 @@ $.Button = function( options ) {
         this.imgDown.style.visibility  =
             "hidden";
 
-        if ($.Browser.vendor === $.BROWSERS.FIREFOX && $.Browser.version < 3) {
-            this.imgGroup.style.top =
-            this.imgHover.style.top =
-            this.imgDown.style.top  =
-                "";
-        }
-
         this.element.appendChild( this.imgRest );
         this.element.appendChild( this.imgGroup );
         this.element.appendChild( this.imgHover );
diff --git a/src/control.js b/src/control.js
index 51fe020a..0a8b7ca6 100644
--- a/src/control.js
+++ b/src/control.js
@@ -194,11 +194,7 @@ $.Control.prototype = {
      * @param {Number} opactiy - a value between 1 and 0 inclusively.
      */
     setOpacity: function( opacity ) {
-        if ( this.element[ $.SIGNAL ] && $.Browser.vendor === $.BROWSERS.IE ) {
-            $.setElementOpacity( this.element, opacity, true );
-        } else {
-            $.setElementOpacity( this.wrapper, opacity, true );
-        }
+        $.setElementOpacity( this.wrapper, opacity, true );
     }
 };
 
diff --git a/src/mousetracker.js b/src/mousetracker.js
index 2a0b6a3c..e56cb609 100644
--- a/src/mousetracker.js
+++ b/src/mousetracker.js
@@ -1116,10 +1116,9 @@
     /**
      * Detect available mouse wheel event name.
      */
-    $.MouseTracker.wheelEventName = ( $.Browser.vendor === $.BROWSERS.IE && $.Browser.version > 8 ) ||
-                                                ( 'onwheel' in document.createElement( 'div' ) ) ? 'wheel' : // Modern browsers support 'wheel'
-                                    document.onmousewheel !== undefined ? 'mousewheel' :                     // Webkit and IE support at least 'mousewheel'
-                                    'DOMMouseScroll';                                                        // Assume old Firefox
+    $.MouseTracker.wheelEventName = ( 'onwheel' in document.createElement( 'div' ) ) ? 'wheel' : // Modern browsers support 'wheel'
+                                    document.onmousewheel !== undefined ? 'mousewheel' :         // Webkit (and unsupported IE) support at least 'mousewheel'
+                                    'DOMMouseScroll';                                            // Assume old Firefox (deprecated)
 
     /**
      * Detect browser pointer device event model(s) and build appropriate list of events to subscribe to.
@@ -1132,7 +1131,7 @@
     }
 
     if ( window.PointerEvent ) {
-        // IE11 and other W3C Pointer Event implementations (see http://www.w3.org/TR/pointerevents)
+        // W3C Pointer Event implementations (see http://www.w3.org/TR/pointerevents)
         $.MouseTracker.havePointerEvents = true;
         $.MouseTracker.subscribeEvents.push( "pointerenter", "pointerleave", "pointerover", "pointerout", "pointerdown", "pointerup", "pointermove", "pointercancel" );
         // Pointer events capture support
@@ -1671,7 +1670,6 @@
 
     /**
      * Gets a W3C Pointer Events model compatible pointer type string from a DOM pointer event.
-     * IE10 used a long integer value, but the W3C specification (and IE11+) use a string "mouse", "touch", "pen", etc.
      *
      * Note: Called for both pointer events and legacy mouse events
      *         ($.MouseTracker.havePointerEvents determines which)
@@ -1679,14 +1677,7 @@
      * @inner
      */
     function getPointerType( event ) {
-        if ( $.MouseTracker.havePointerEvents ) {
-            // Note: IE pointer events bug - sends invalid pointerType on lostpointercapture events
-            //    and possibly other events. We rely on sane, valid property values in DOM events, so for
-            //    IE, when the pointerType is missing, we'll default to 'mouse'...should be right most of the time
-            return event.pointerType || (( $.Browser.vendor === $.BROWSERS.IE ) ? 'mouse' : '');
-        } else {
-            return 'mouse';
-        }
+        return $.MouseTracker.havePointerEvents && event.pointerType ? event.pointerType : 'mouse';
     }
 
 
@@ -2554,15 +2545,14 @@
         };
 
         // Most browsers implicitly capture touch pointer events
-        // Note no IE versions have element.hasPointerCapture() so no implicit
-        //    pointer capture possible
+        // Note no IE versions (unsupported) have element.hasPointerCapture() so
+        //    no implicit pointer capture possible
         // var implicitlyCaptured = ($.MouseTracker.havePointerEvents &&
         //                         event.target.hasPointerCapture &&
         //                         $.Browser.vendor !== $.BROWSERS.IE) ?
         //                         event.target.hasPointerCapture(event.pointerId) : false;
         var implicitlyCaptured = $.MouseTracker.havePointerEvents &&
-                                gPoint.type === 'touch' &&
-                                $.Browser.vendor !== $.BROWSERS.IE;
+                                gPoint.type === 'touch';
 
         //$.console.log('pointerdown ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
 
diff --git a/src/navigator.js b/src/navigator.js
index fb95e4b1..3329ed14 100644
--- a/src/navigator.js
+++ b/src/navigator.js
@@ -178,7 +178,6 @@ $.Navigator = function( options ){
         style['float']      = 'left'; //Webkit
 
         style.cssFloat      = 'left'; //Firefox
-        style.styleFloat    = 'left'; //IE
         style.zIndex        = 999999999;
         style.cursor        = 'default';
         style.boxSizing     = 'content-box';
diff --git a/src/openseadragon.js b/src/openseadragon.js
index 66036afa..499ab310 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -2343,43 +2343,18 @@ function OpenSeadragon( options ){
         /**
          * Create an XHR object
          * @private
-         * @param {type} [local] If set to true, the XHR will be file: protocol
-         * compatible if possible (but may raise a warning in the browser).
+         * @param {type} [local] Deprecated. Ignored (IE/ActiveXObject file protocol no longer supported).
          * @returns {XMLHttpRequest}
          */
-        createAjaxRequest: function( local ) {
-            // IE11 does not support window.ActiveXObject so we just try to
-            // create one to see if it is supported.
-            // See: http://msdn.microsoft.com/en-us/library/ie/dn423948%28v=vs.85%29.aspx
-            var supportActiveX;
-            try {
-                /* global ActiveXObject:true */
-                supportActiveX = !!new ActiveXObject( "Microsoft.XMLHTTP" );
-            } catch( e ) {
-                supportActiveX = false;
-            }
-
-            if ( supportActiveX ) {
-                if ( window.XMLHttpRequest ) {
-                    $.createAjaxRequest = function( local ) {
-                        if ( local ) {
-                            return new ActiveXObject( "Microsoft.XMLHTTP" );
-                        }
-                        return new XMLHttpRequest();
-                    };
-                } else {
-                    $.createAjaxRequest = function() {
-                        return new ActiveXObject( "Microsoft.XMLHTTP" );
-                    };
-                }
-            } else if ( window.XMLHttpRequest ) {
+        createAjaxRequest: function() {
+            if ( window.XMLHttpRequest ) {
                 $.createAjaxRequest = function() {
                     return new XMLHttpRequest();
                 };
+                return new XMLHttpRequest();
             } else {
                 throw new Error( "Browser doesn't support XMLHttpRequest." );
             }
-            return $.createAjaxRequest( local );
         },
 
         /**
@@ -2415,7 +2390,7 @@ function OpenSeadragon( options ){
             }
 
             var protocol = $.getUrlProtocol( url );
-            var request = $.createAjaxRequest( protocol === "file:" );
+            var request = $.createAjaxRequest();
 
             if ( !$.isFunction( onSuccess ) ) {
                 throw new Error( "makeAjaxRequest requires a success callback" );
@@ -2584,17 +2559,6 @@ function OpenSeadragon( options ){
                     return xmlDoc;
                 };
 
-            } else if ( window.ActiveXObject ) {
-
-                $.parseXml = function( string ) {
-                    var xmlDoc = null;
-
-                    xmlDoc = new ActiveXObject( "Microsoft.XMLDOM" );
-                    xmlDoc.async = false;
-                    xmlDoc.loadXML( string );
-                    return xmlDoc;
-                };
-
             } else {
                 throw new Error( "Browser doesn't support XML DOM." );
             }
@@ -2719,6 +2683,10 @@ function OpenSeadragon( options ){
         //console.error( 'appVersion: ' + navigator.appVersion );
         //console.error( 'userAgent: ' + navigator.userAgent );
 
+        //TODO navigator.appName is deprecated. Should be 'Netscape' for all browsers
+        //  but could be dropped at any time
+        //  See https://developer.mozilla.org/en-US/docs/Web/API/Navigator/appName
+        //      https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
         switch( navigator.appName ){
             case "Microsoft Internet Explorer":
                 if( !!window.attachEvent &&
@@ -2804,8 +2772,8 @@ function OpenSeadragon( options ){
         //determine if this browser supports element.style.opacity
         $.Browser.opacity = true;
 
-        if ( $.Browser.vendor === $.BROWSERS.IE && $.Browser.version < 11 ) {
-            $.console.error('Internet Explorer versions < 11 are not supported by OpenSeadragon');
+        if ( $.Browser.vendor === $.BROWSERS.IE ) {
+            $.console.error('Internet Explorer is not supported by OpenSeadragon');
         }
     })();
 
diff --git a/src/referencestrip.js b/src/referencestrip.js
index 1f9bb35b..61bad43b 100644
--- a/src/referencestrip.js
+++ b/src/referencestrip.js
@@ -193,7 +193,6 @@ $.ReferenceStrip = function ( options ) {
         element.style.display       = 'inline';
         element.style['float']      = 'left'; //Webkit
         element.style.cssFloat      = 'left'; //Firefox
-        element.style.styleFloat    = 'left'; //IE
         element.style.padding       = '2px';
         $.setElementTouchActionNone( element );
         $.setElementPointerEventsNone( element );
diff --git a/test/helpers/legacy.mouse.shim.js b/test/helpers/legacy.mouse.shim.js
index 19374147..938e8695 100644
--- a/test/helpers/legacy.mouse.shim.js
+++ b/test/helpers/legacy.mouse.shim.js
@@ -1,4 +1,4 @@
-(function($, undefined) {
+(function($) {
 
     /**
      * Plugin to force OpenSeadragon to use the legacy mouse pointer event model

From fc7b942bc2b39173c98c9ed64c76189f289fc838 Mon Sep 17 00:00:00 2001
From: Mark Salsbery 
Date: Sun, 23 Jun 2024 16:35:22 -0700
Subject: [PATCH 20/32] Update changelog.txt

---
 changelog.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/changelog.txt b/changelog.txt
index c9afb51d..07ad1612 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -3,7 +3,7 @@ OPENSEADRAGON CHANGELOG
 
 5.0.0: (in progress...)
 
-* BREAKING CHANGE: Dropped support for IE11 (#2300, #2361 @AndrewADev)
+* BREAKING CHANGE: Dropped support for IE11 (#2300, #2361, #2553 @AndrewADev, @msalsbery)
 * DEPRECATION: The OpenSeadragon.createCallback function is no longer recommended (#2367 @akansjain)
 * The viewer now uses WebGL when available (#2310, #2462, #2466, #2468, #2469, #2472, #2478, #2488, #2492, #2521, #2537 @pearcetm, @Aiosa, @thec0keman)
 * Added webp to supported image formats (#2455 @BeebBenjamin)

From 176fae11e5f4c6f12626331cd24d1b6cfdfc6b5b Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen 
Date: Tue, 9 Jul 2024 14:08:58 +0100
Subject: [PATCH 21/32] Fixed: Add inner div if text and invert x

---
 src/overlay.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/overlay.js b/src/overlay.js
index b5330d58..6d355c7a 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -2,7 +2,7 @@
  * OpenSeadragon - Overlay
  *
  * Copyright (C) 2009 CodePlex Foundation
- * Copyright (C) 2010-2023 OpenSeadragon contributors
+ * Copyright (C) 2010-2024 OpenSeadragon contributors
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
@@ -242,6 +242,9 @@
          */
         drawHTML: function(container, viewport) {
             var element = this.element;
+            var text = document.createElement('div');
+            text.textContent = element.textContent;
+            element.textContent = "";
             if (element.parentNode !== container) {
                 //save the source parent for later if we need it
                 element.prevElementParent = element.parentNode;
@@ -274,6 +277,7 @@
                 this.onDraw(position, size, this.element);
             } else {
                 var style = this.style;
+                var textStyle = text.style;
                 style.left = position.x + "px";
                 style.top = position.y + "px";
                 if (this.width !== null) {
@@ -291,9 +295,11 @@
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)";
                     } else if (!rotate && viewport.flipped) {
+                        textStyle[transformProp] = "scaleX(-1)";
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = scale;
                     } else if (rotate && viewport.flipped){
+                        textStyle[transformProp] = "scaleX(-1)";
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)" + scale;
                     } else {
@@ -302,6 +308,7 @@
                     }
                 }
                 style.display = 'block';
+                element.appendChild(text);
             }
         },
 

From 396fcb33a516e8eca591a713d85fd07306863060 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen 
Date: Thu, 11 Jul 2024 22:08:37 +0100
Subject: [PATCH 22/32] Fixed: Outer div added to element to allow independent
 flipping

An outer div has been added to the internal HTML of the overlay element to allow for independent flipping of the content.  Flipping will invert the `scaleX` value of the transform property for the style of the element.  By setting the value `overlayContentFlipped: true` in the OSD config we can flip the content in the opposite direction to the overlay, but by setting this to false we can flip the content along with the overlay.  This allows for some people who are using images in their overlay to flip the images along with the overlay.
---
 src/openseadragon.js   |  4 ++++
 src/overlay.js         | 29 ++++++++++++-----------------
 src/viewer.js          |  1 +
 test/demo/overlay.html | 16 +++++++++++++++-
 4 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/openseadragon.js b/src/openseadragon.js
index 2cb2ac0d..a907d84c 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -230,6 +230,9 @@
   * @property {Boolean} [flipped=false]
   *     Initial flip state.
   *
+  * @property {Boolean} [overlayContentFlipped=false]
+  *     Initial overlay content flip state.
+  *
   * @property {Number} [minZoomLevel=null]
   *
   * @property {Number} [maxZoomLevel=null]
@@ -1337,6 +1340,7 @@ function OpenSeadragon( options ){
 
             // INITIAL FLIP STATE
             flipped:                    false,
+            overlayContentFlipped:      false,
 
             // APPEARANCE
             opacity:                           1,
diff --git a/src/overlay.js b/src/overlay.js
index 6d355c7a..bed6b4c5 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -129,6 +129,7 @@
         }
 
         this.element = options.element;
+        this.element.innerHTML = "
" + this.element.innerHTML + "
";
         this.style = options.element.style;
         this._init(options);
     };
@@ -242,9 +243,6 @@
          */
         drawHTML: function(container, viewport) {
             var element = this.element;
-            var text = document.createElement('div');
-            text.textContent = element.textContent;
-            element.textContent = "";
             if (element.parentNode !== container) {
                 //save the source parent for later if we need it
                 element.prevElementParent = element.parentNode;
@@ -257,27 +255,23 @@
                 // least one direction when this.checkResize is set to false.
                 this.size = $.getElementSize(element);
             }
-
             var positionAndSize = this._getOverlayPositionAndSize(viewport);
-
             var position = positionAndSize.position;
             var size = this.size = positionAndSize.size;
-            var rotate;
-            var scale = "";
-            if (viewport.flipped){
-                rotate = -positionAndSize.rotate;
-                scale = " scaleX(-1)";
-            }
-            else {
-                rotate = positionAndSize.rotate;
+            var outerScale = "";
+            if (viewport.overlayContentFlipped) {
+                outerScale = viewport.flipped ? " scaleX(-1)" : " scaleX(1)";
             }
+            var rotate = viewport.flipped ? -positionAndSize.rotate : positionAndSize.rotate;
+            var scale = viewport.flipped ? " scaleX(-1)" : "";
             // call the onDraw callback if it exists to allow one to overwrite
             // the drawing/positioning/sizing of the overlay
             if (this.onDraw) {
                 this.onDraw(position, size, this.element);
             } else {
                 var style = this.style;
-                var textStyle = text.style;
+                var outerElement = element.firstChild;
+                var outerStyle = outerElement.style;
                 style.left = position.x + "px";
                 style.top = position.y + "px";
                 if (this.width !== null) {
@@ -292,23 +286,24 @@
                     'transform');
                 if (transformOriginProp && transformProp) {
                     if (rotate && !viewport.flipped) {
+                        outerStyle[transformProp] = "";
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)";
                     } else if (!rotate && viewport.flipped) {
-                        textStyle[transformProp] = "scaleX(-1)";
+                        outerStyle[transformProp] = outerScale;
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = scale;
                     } else if (rotate && viewport.flipped){
-                        textStyle[transformProp] = "scaleX(-1)";
+                        outerStyle[transformProp] = outerScale;
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)" + scale;
                     } else {
+                        outerStyle[transformProp] = "";
                         style[transformOriginProp] = "";
                         style[transformProp] = "";
                     }
                 }
                 style.display = 'block';
-                element.appendChild(text);
             }
         },
 
diff --git a/src/viewer.js b/src/viewer.js
index d82a2d77..b918fab3 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -397,6 +397,7 @@ $.Viewer = function( options ) {
         viewer:                     this,
         degrees:                    this.degrees,
         flipped:                    this.flipped,
+        overlayContentFlipped:      this.overlayContentFlipped,
         navigatorRotate:            this.navigatorRotate,
         homeFillsViewer:            this.homeFillsViewer,
         margins:                    this.viewportMargins,
diff --git a/test/demo/overlay.html b/test/demo/overlay.html
index 527ebef3..bf5e3548 100644
--- a/test/demo/overlay.html
+++ b/test/demo/overlay.html
@@ -26,7 +26,8 @@
             prefixUrl: "../../build/openseadragon/images/",
             tileSources: "../data/testpattern.dzi",
             minZoomImageRatio: 0,
-            maxZoomPixelRatio: 10
+            maxZoomPixelRatio: 10,
+            overlayContentFlipped: true  // change this to true to test overlay content flipping
         });
 
         viewer.addHandler("open", function(event) {
@@ -42,6 +43,19 @@
                 rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
             });
 
+            // test with image of letter B to see that images flip too
+            elt = document.createElement("div");
+            elt.className = "runtime-overlay";
+            elt.style.outline = "1px solid blue";
+            elt.style.height = "100px";
+            elt.innerHTML = "
"
+            viewer.addOverlay({
+                element: elt,
+                location: new OpenSeadragon.Point(0.0, 0.0),
+                width: 0.1,
+                height: 0.1
+            });
+
             elt = document.createElement("div");
             elt.className = "runtime-overlay";
             elt.style.background = "white";

From 2c5d2eb7c6159228a32527d6e9bdbd2876fc50c1 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen 
Date: Fri, 12 Jul 2024 20:36:11 +0100
Subject: [PATCH 23/32] Fixed: More meaning full variable and help text,
 innerStyle not outer

---
 src/openseadragon.js |  8 +++++---
 src/overlay.js       | 12 ++++++------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/openseadragon.js b/src/openseadragon.js
index a907d84c..5207de83 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -230,8 +230,10 @@
   * @property {Boolean} [flipped=false]
   *     Initial flip state.
   *
-  * @property {Boolean} [overlayContentFlipped=false]
-  *     Initial overlay content flip state.
+  * @property {Boolean} [overlayFlipReversal=true]
+  *     When the viewport is flipped (by pressing 'f'), the overlay is flipped using ScaleX.
+  *     Normally, this setting (default true) keeps the overlay's content readable by flipping it back.
+  *     To make the content flip with the overlay, set overlayFlipReversal to false.
   *
   * @property {Number} [minZoomLevel=null]
   *
@@ -1340,7 +1342,7 @@ function OpenSeadragon( options ){
 
             // INITIAL FLIP STATE
             flipped:                    false,
-            overlayContentFlipped:      false,
+            overlayFlipReversal:        true,
 
             // APPEARANCE
             opacity:                           1,
diff --git a/src/overlay.js b/src/overlay.js
index bed6b4c5..f555d6b9 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -270,8 +270,8 @@
                 this.onDraw(position, size, this.element);
             } else {
                 var style = this.style;
-                var outerElement = element.firstChild;
-                var outerStyle = outerElement.style;
+                var innerElement = element.firstChild;
+                var innerStyle = innerElement.style;
                 style.left = position.x + "px";
                 style.top = position.y + "px";
                 if (this.width !== null) {
@@ -286,19 +286,19 @@
                     'transform');
                 if (transformOriginProp && transformProp) {
                     if (rotate && !viewport.flipped) {
-                        outerStyle[transformProp] = "";
+                        innerStyle[transformProp] = "";
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)";
                     } else if (!rotate && viewport.flipped) {
-                        outerStyle[transformProp] = outerScale;
+                        innerStyle[transformProp] = outerScale;
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = scale;
                     } else if (rotate && viewport.flipped){
-                        outerStyle[transformProp] = outerScale;
+                        innerStyle[transformProp] = outerScale;
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)" + scale;
                     } else {
-                        outerStyle[transformProp] = "";
+                        innerStyle[transformProp] = "";
                         style[transformOriginProp] = "";
                         style[transformProp] = "";
                     }

From c1c1d480dd9e61c81cf3960ed166a78faf2325b2 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen 
Date: Tue, 16 Jul 2024 08:38:39 +0100
Subject: [PATCH 24/32] Fixed: Try renaming to something more descriptive

---
 src/openseadragon.js   |  8 ++++----
 src/overlay.js         |  2 +-
 src/viewer.js          | 38 +++++++++++++++++++-------------------
 test/demo/overlay.html |  2 +-
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/openseadragon.js b/src/openseadragon.js
index 5207de83..1510883a 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -230,10 +230,10 @@
   * @property {Boolean} [flipped=false]
   *     Initial flip state.
   *
-  * @property {Boolean} [overlayFlipReversal=true]
+  * @property {Boolean} [overlayPreserveContentDirection=true]
   *     When the viewport is flipped (by pressing 'f'), the overlay is flipped using ScaleX.
   *     Normally, this setting (default true) keeps the overlay's content readable by flipping it back.
-  *     To make the content flip with the overlay, set overlayFlipReversal to false.
+  *     To make the content flip with the overlay, set overlayPreserveContentDirection to false.
   *
   * @property {Number} [minZoomLevel=null]
   *
@@ -1341,8 +1341,8 @@ function OpenSeadragon( options ){
             degrees:                    0,
 
             // INITIAL FLIP STATE
-            flipped:                    false,
-            overlayFlipReversal:        true,
+            flipped:                          false,
+            overlayPreserveContentDirection:  true,
 
             // APPEARANCE
             opacity:                           1,
diff --git a/src/overlay.js b/src/overlay.js
index f555d6b9..7d485d42 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -259,7 +259,7 @@
             var position = positionAndSize.position;
             var size = this.size = positionAndSize.size;
             var outerScale = "";
-            if (viewport.overlayContentFlipped) {
+            if (viewport.overlayPreserveContentDirection) {
                 outerScale = viewport.flipped ? " scaleX(-1)" : " scaleX(1)";
             }
             var rotate = viewport.flipped ? -positionAndSize.rotate : positionAndSize.rotate;
diff --git a/src/viewer.js b/src/viewer.js
index b918fab3..97645294 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -383,25 +383,25 @@ $.Viewer = function( options ) {
 
     // Create the viewport
     this.viewport = new $.Viewport({
-        containerSize:              THIS[ this.hash ].prevContainerSize,
-        springStiffness:            this.springStiffness,
-        animationTime:              this.animationTime,
-        minZoomImageRatio:          this.minZoomImageRatio,
-        maxZoomPixelRatio:          this.maxZoomPixelRatio,
-        visibilityRatio:            this.visibilityRatio,
-        wrapHorizontal:             this.wrapHorizontal,
-        wrapVertical:               this.wrapVertical,
-        defaultZoomLevel:           this.defaultZoomLevel,
-        minZoomLevel:               this.minZoomLevel,
-        maxZoomLevel:               this.maxZoomLevel,
-        viewer:                     this,
-        degrees:                    this.degrees,
-        flipped:                    this.flipped,
-        overlayContentFlipped:      this.overlayContentFlipped,
-        navigatorRotate:            this.navigatorRotate,
-        homeFillsViewer:            this.homeFillsViewer,
-        margins:                    this.viewportMargins,
-        silenceMultiImageWarnings:  this.silenceMultiImageWarnings
+        containerSize:                      THIS[ this.hash ].prevContainerSize,
+        springStiffness:                    this.springStiffness,
+        animationTime:                      this.animationTime,
+        minZoomImageRatio:                  this.minZoomImageRatio,
+        maxZoomPixelRatio:                  this.maxZoomPixelRatio,
+        visibilityRatio:                    this.visibilityRatio,
+        wrapHorizontal:                     this.wrapHorizontal,
+        wrapVertical:                       this.wrapVertical,
+        defaultZoomLevel:                   this.defaultZoomLevel,
+        minZoomLevel:                       this.minZoomLevel,
+        maxZoomLevel:                       this.maxZoomLevel,
+        viewer:                             this,
+        degrees:                            this.degrees,
+        flipped:                            this.flipped,
+        overlayPreserveContentDirection:    this.overlayPreserveContentDirection,
+        navigatorRotate:                    this.navigatorRotate,
+        homeFillsViewer:                    this.homeFillsViewer,
+        margins:                            this.viewportMargins,
+        silenceMultiImageWarnings:          this.silenceMultiImageWarnings
     });
 
     this.viewport._setContentBounds(this.world.getHomeBounds(), this.world.getContentFactor());
diff --git a/test/demo/overlay.html b/test/demo/overlay.html
index bf5e3548..92140f8b 100644
--- a/test/demo/overlay.html
+++ b/test/demo/overlay.html
@@ -27,7 +27,7 @@
             tileSources: "../data/testpattern.dzi",
             minZoomImageRatio: 0,
             maxZoomPixelRatio: 10,
-            overlayContentFlipped: true  // change this to true to test overlay content flipping
+            overlayPreserveContentDirection: true  // change this to true to test overlay content flipping
         });
 
         viewer.addHandler("open", function(event) {

From 74b69d99de8ef3bd677bc5155f7e478746e224ac Mon Sep 17 00:00:00 2001
From: Ian Gilman 
Date: Tue, 16 Jul 2024 09:36:24 -0700
Subject: [PATCH 25/32] Changelog for #2546

---
 changelog.txt          | 2 ++
 test/demo/overlay.html | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/changelog.txt b/changelog.txt
index fdb9d37c..e3083c66 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -11,6 +11,8 @@ OPENSEADRAGON CHANGELOG
 * 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)
 * Added getter & setter for Viewport.maxZoomPixelRatio (#2506 @eug-L)
+* Overlays are now positioned properly when the viewport is flipped (#2546 @BeebBenjamin)
+* Added overlayPreserveContentDirection option to keep overlays readable when viewport is flipped (#2546 @BeebBenjamin)
 * Test improvements (#2382 @AndrewADev)
 * MouseTracker options documentation fixes (#2389 @msalsbery)
 * Improved documentation and error message for Viewport.imageToViewportZoom (#2505 @eug-L)
diff --git a/test/demo/overlay.html b/test/demo/overlay.html
index 790b04d1..3e91a8cb 100644
--- a/test/demo/overlay.html
+++ b/test/demo/overlay.html
@@ -27,7 +27,7 @@
             tileSources: "../data/testpattern.dzi",
             minZoomImageRatio: 0,
             maxZoomPixelRatio: 10,
-            overlayPreserveContentDirection: true  // change this to true to test overlay content flipping
+            overlayPreserveContentDirection: true  // Change this to false to test overlay content flipping
         });
 
         viewer.addHandler("open", function(event) {

From 37ce7cc25671ac1f531793b4bc7e56ee594846d3 Mon Sep 17 00:00:00 2001
From: Tom 
Date: Tue, 16 Jul 2024 14:07:27 -0400
Subject: [PATCH 26/32] add check for missing webgl context in
 WebGLDrawer.isSupported()

---
 src/webgldrawer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webgldrawer.js b/src/webgldrawer.js
index a8167b00..ed1f30ab 100644
--- a/src/webgldrawer.js
+++ b/src/webgldrawer.js
@@ -195,7 +195,7 @@
             let canvasElement = document.createElement( 'canvas' );
             let webglContext = $.isFunction( canvasElement.getContext ) &&
                         canvasElement.getContext( 'webgl' );
-            let ext = webglContext.getExtension('WEBGL_lose_context');
+            let ext = webglContext && webglContext.getExtension('WEBGL_lose_context');
             if(ext){
                 ext.loseContext();
             }

From b87eaf3040747fbb57a75ef18c053be3aa50f661 Mon Sep 17 00:00:00 2001
From: Tom 
Date: Tue, 16 Jul 2024 14:17:29 -0400
Subject: [PATCH 27/32] mark image-unloaded and tile-ready events as private

---
 src/imagetilesource.js | 1 +
 src/tilecache.js       | 1 +
 src/tiledimage.js      | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/imagetilesource.js b/src/imagetilesource.js
index 4ebc7591..ca5ef0e8 100644
--- a/src/imagetilesource.js
+++ b/src/imagetilesource.js
@@ -283,6 +283,7 @@
                         * @memberof OpenSeadragon.Viewer
                         * @type {object}
                         * @property {CanvasRenderingContext2D} context2D - The context that is being unloaded
+                        * @private
                         */
                         viewer.raiseEvent("image-unloaded", {
                             context2D: this.levels[i].context2D
diff --git a/src/tilecache.js b/src/tilecache.js
index f85cb643..103a02af 100644
--- a/src/tilecache.js
+++ b/src/tilecache.js
@@ -270,6 +270,7 @@ $.TileCache.prototype = {
                  * @memberof OpenSeadragon.Viewer
                  * @type {object}
                  * @property {CanvasRenderingContext2D} context2D - The context that is being unloaded
+                 * @private
                  */
                 tiledImage.viewer.raiseEvent("image-unloaded", {
                     context2D: context2D,
diff --git a/src/tiledimage.js b/src/tiledimage.js
index c1562497..76a4f226 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -2076,6 +2076,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
                  * @property {OpenSeadragon.Tile} tile - The tile which has been loaded.
                  * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile.
                  * @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable).
+                 * @private
                  */
                 _this.viewer.raiseEvent("tile-ready", {
                     tile: tile,

From 8f6771ba912d1259e62e87e606226d7db2cd16f0 Mon Sep 17 00:00:00 2001
From: Ian Gilman 
Date: Wed, 17 Jul 2024 09:19:32 -0700
Subject: [PATCH 28/32] Changelog for #2557 and #2558

---
 changelog.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/changelog.txt b/changelog.txt
index e3083c66..d45031e1 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -5,7 +5,7 @@ OPENSEADRAGON CHANGELOG
 
 * BREAKING CHANGE: Dropped support for IE11 (#2300, #2361, #2553 @AndrewADev, @msalsbery)
 * DEPRECATION: The OpenSeadragon.createCallback function is no longer recommended (#2367 @akansjain)
-* The viewer now uses WebGL when available (#2310, #2462, #2466, #2468, #2469, #2472, #2478, #2488, #2492, #2521, #2537 @pearcetm, @Aiosa, @thec0keman)
+* The viewer now uses WebGL when available (#2310, #2462, #2466, #2468, #2469, #2472, #2478, #2488, #2492, #2521, #2537, #2557, #2558 @pearcetm, @Aiosa, @thec0keman)
 * Added webp to supported image formats (#2455 @BeebBenjamin)
 * Added avif to supported image formats (#2544 @msalsbery)
 * Introduced maxTilesPerFrame option to allow loading more tiles simultaneously (#2387 @jetic83)

From 7740accfafa98b6e3f469f19acba0ea57712b7e3 Mon Sep 17 00:00:00 2001
From: Mark Salsbery 
Date: Sun, 4 Aug 2024 15:29:12 -0700
Subject: [PATCH 29/32] Update openseadragon.js

Fix jsdoc comments for OpenSeadragon.getCurrentPixelDensityRatio
---
 src/openseadragon.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/openseadragon.js b/src/openseadragon.js
index ce95b5a5..64595c28 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -1069,8 +1069,9 @@ 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
+     * @function getCurrentPixelDensityRatio
      * @memberof OpenSeadragon
+     * @returns {Number}
      */
     $.getCurrentPixelDensityRatio = function() {
         if ( $.supportsCanvas ) {
@@ -1088,6 +1089,8 @@ 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
      */

From a803e826a3aa5bf44a231738fcbf8c7548fcb117 Mon Sep 17 00:00:00 2001
From: Ian Gilman 
Date: Mon, 5 Aug 2024 09:28:19 -0700
Subject: [PATCH 30/32] Changelog for #2563

---
 changelog.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/changelog.txt b/changelog.txt
index d45031e1..1b0c1b9a 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -17,6 +17,7 @@ OPENSEADRAGON CHANGELOG
 * MouseTracker options documentation fixes (#2389 @msalsbery)
 * Improved documentation and error message for Viewport.imageToViewportZoom (#2505 @eug-L)
 * Fixed documentation typos (#2507 @frameflare)
+* Additional documentation fixes (#2563 @msalsbery)
 * Fixed: Sometimes if the viewport was flipped and the user zoomed in far enough, it would flip back (#2364 @SebDelile)
 * 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)

From f28b7fc1165aa48bde81b781a017d6b59909345b Mon Sep 17 00:00:00 2001
From: Ian Gilman 
Date: Wed, 14 Aug 2024 09:31:15 -0700
Subject: [PATCH 31/32] Version 5.0.0

---
 CITATION.cff  | 4 ++--
 changelog.txt | 2 +-
 package.json  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/CITATION.cff b/CITATION.cff
index bc1e4a8b..4704b183 100644
--- a/CITATION.cff
+++ b/CITATION.cff
@@ -35,5 +35,5 @@ keywords:
   - high-resolution
   - iiif
 license: BSD-3-Clause
-version: 4.1.1
-date-released: 2024-04-01
+version: 5.0.0
+date-released: 2024-08-14
diff --git a/changelog.txt b/changelog.txt
index 1b0c1b9a..270bdfc5 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,7 +1,7 @@
 OPENSEADRAGON CHANGELOG
 =======================
 
-5.0.0: (in progress...)
+5.0.0:
 
 * BREAKING CHANGE: Dropped support for IE11 (#2300, #2361, #2553 @AndrewADev, @msalsbery)
 * DEPRECATION: The OpenSeadragon.createCallback function is no longer recommended (#2367 @akansjain)
diff --git a/package.json b/package.json
index 86dbe53b..728ee569 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "openseadragon",
-    "version": "4.1.1",
+    "version": "5.0.0",
     "description": "Provides a smooth, zoomable user interface for HTML/Javascript.",
     "keywords": [
         "image",

From d97ba581b04037114b644cec47ef6b37dc34d8d0 Mon Sep 17 00:00:00 2001
From: Ian Gilman 
Date: Wed, 14 Aug 2024 09:37:49 -0700
Subject: [PATCH 32/32] Started 5.0.1

---
 changelog.txt | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/changelog.txt b/changelog.txt
index 270bdfc5..08023eaa 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,6 +1,8 @@
 OPENSEADRAGON CHANGELOG
 =======================
 
+5.0.1: (in progress...)
+
 5.0.0:
 
 * BREAKING CHANGE: Dropped support for IE11 (#2300, #2361, #2553 @AndrewADev, @msalsbery)