{
+ * bmp: false,
+ * jpeg: true,
+ * jpg: true,
+ * png: true,
+ * tif: false,
+ * wdp: false
+ * }
+ * var viewer = new OpenSeadragon.Viewer(options);var viewer = OpenSeadragon(options);rendered is the context with the pre-drawn image.
+ * @param {Number} [scale=1] - Apply a scale to position and size
+ * @param {OpenSeadragon.Point} [translate] - A translation vector
+ * @param {Boolean} [shouldRoundPositionAndSize] - Tells whether to round
+ * position and size of tiles supporting alpha channel in non-transparency
+ * context.
+ * @param {OpenSeadragon.TileSource} source - The source specification of the tile.
+ */
+ drawCanvas: function( context, drawingHandler, scale, translate, shouldRoundPositionAndSize, source) {
+
+ var position = this.position.times($.pixelDensityRatio),
+ size = this.size.times($.pixelDensityRatio),
+ rendered;
+
+ if (!this.context2D && !this.cacheImageRecord) {
+ $.console.warn(
+ '[Tile.drawCanvas] attempting to draw tile %s when it\'s not cached',
+ this.toString());
+ return;
+ }
+
+ rendered = this.getCanvasContext();
+
+ if ( !this.loaded || !rendered ){
+ $.console.warn(
+ "Attempting to draw tile %s when it's not yet loaded.",
+ this.toString()
+ );
+
+ return;
+ }
+
+ context.save();
+ context.globalAlpha = this.opacity;
+
+ if (typeof scale === 'number' && scale !== 1) {
+ // draw tile at a different scale
+ position = position.times(scale);
+ size = size.times(scale);
+ }
+
+ if (translate instanceof $.Point) {
+ // shift tile position slightly
+ position = position.plus(translate);
+ }
+
+ //if we are supposed to be rendering fully opaque rectangle,
+ //ie its done fading or fading is turned off, and if we are drawing
+ //an image with an alpha channel, then the only way
+ //to avoid seeing the tile underneath is to clear the rectangle
+ if (context.globalAlpha === 1 && this.hasTransparency) {
+ if (shouldRoundPositionAndSize) {
+ // Round to the nearest whole pixel so we don't get seams from overlap.
+ position.x = Math.round(position.x);
+ position.y = Math.round(position.y);
+ size.x = Math.round(size.x);
+ size.y = Math.round(size.y);
+ }
+
+ //clearing only the inside of the rectangle occupied
+ //by the png prevents edge flikering
+ context.clearRect(
+ position.x,
+ position.y,
+ size.x,
+ size.y
+ );
+ }
+
+ // This gives the application a chance to make image manipulation
+ // changes as we are rendering the image
+ drawingHandler({context: context, tile: this, rendered: rendered});
+
+ var sourceWidth, sourceHeight;
+ if (this.sourceBounds) {
+ sourceWidth = Math.min(this.sourceBounds.width, rendered.canvas.width);
+ sourceHeight = Math.min(this.sourceBounds.height, rendered.canvas.height);
+ } else {
+ sourceWidth = rendered.canvas.width;
+ sourceHeight = rendered.canvas.height;
+ }
+
+ context.translate(position.x + size.x / 2, 0);
+ if (this.flipped) {
+ context.scale(-1, 1);
+ }
+ context.drawImage(
+ rendered.canvas,
+ 0,
+ 0,
+ sourceWidth,
+ sourceHeight,
+ -size.x / 2,
+ position.y,
+ size.x,
+ size.y
+ );
+
+ context.restore();
+ },
+
+ /**
+ * Get the ratio between current and original size.
+ * @function
+ * @returns {Float}
+ */
+ getScaleForEdgeSmoothing: function() {
+ var context;
+ if (this.cacheImageRecord) {
+ context = this.cacheImageRecord.getRenderedContext();
+ } else if (this.context2D) {
+ context = this.context2D;
+ } else {
+ $.console.warn(
+ '[Tile.drawCanvas] attempting to get tile scale %s when tile\'s not cached',
+ this.toString());
+ return 1;
+ }
+ return context.canvas.width / (this.size.x * $.pixelDensityRatio);
+ },
+
+ /**
+ * Get a translation vector that when applied to the tile position produces integer coordinates.
+ * Needed to avoid swimming and twitching.
+ * @function
+ * @param {Number} [scale=1] - Scale to be applied to position.
+ * @returns {OpenSeadragon.Point}
+ */
+ getTranslationForEdgeSmoothing: function(scale, canvasSize, sketchCanvasSize) {
+ // The translation vector must have positive values, otherwise the image goes a bit off
+ // the sketch canvas to the top and left and we must use negative coordinates to repaint it
+ // to the main canvas. In that case, some browsers throw:
+ // INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value.
+ var x = Math.max(1, Math.ceil((sketchCanvasSize.x - canvasSize.x) / 2));
+ var y = Math.max(1, Math.ceil((sketchCanvasSize.y - canvasSize.y) / 2));
+ return new $.Point(x, y).minus(
+ this.position
+ .times($.pixelDensityRatio)
+ .times(scale || 1)
+ .apply(function(x) {
+ return x % 1;
+ })
+ );
+ },
+
+ /**
+ * Removes tile from its container.
+ * @function
+ */
+ unload: function() {
+ if ( this.imgElement && this.imgElement.parentNode ) {
+ this.imgElement.parentNode.removeChild( this.imgElement );
+ }
+ if ( this.element && this.element.parentNode ) {
+ this.element.parentNode.removeChild( this.element );
+ }
+
+ this.element = null;
+ this.imgElement = null;
+ this.loaded = false;
+ this.loading = false;
+ }
+};
+
+}( OpenSeadragon ));
+
+/*
+ * OpenSeadragon - Overlay
+ *
+ * Copyright (C) 2009 CodePlex Foundation
+ * Copyright (C) 2010-2022 OpenSeadragon contributors
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ * - Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ *
+ * - Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * - Neither the name of CodePlex Foundation nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+ * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function($) {
+
+ /**
+ * An enumeration of positions that an overlay may be assigned relative to
+ * the viewport.
+ * It is identical to OpenSeadragon.Placement but is kept for backward
+ * compatibility.
+ * @member OverlayPlacement
+ * @memberof OpenSeadragon
+ * @see OpenSeadragon.Placement
+ * @static
+ * @readonly
+ * @type {Object}
+ * @property {Number} CENTER
+ * @property {Number} TOP_LEFT
+ * @property {Number} TOP
+ * @property {Number} TOP_RIGHT
+ * @property {Number} RIGHT
+ * @property {Number} BOTTOM_RIGHT
+ * @property {Number} BOTTOM
+ * @property {Number} BOTTOM_LEFT
+ * @property {Number} LEFT
+ */
+ $.OverlayPlacement = $.Placement;
+
+ /**
+ * An enumeration of possible ways to handle overlays rotation
+ * @member OverlayRotationMode
+ * @memberOf OpenSeadragon
+ * @static
+ * @readonly
+ * @property {Number} NO_ROTATION The overlay ignore the viewport rotation.
+ * @property {Number} EXACT The overlay use CSS 3 transforms to rotate with
+ * the viewport. If the overlay contains text, it will get rotated as well.
+ * @property {Number} BOUNDING_BOX The overlay adjusts for rotation by
+ * taking the size of the bounding box of the rotated bounds.
+ * Only valid for overlays with Rect location and scalable in both directions.
+ */
+ $.OverlayRotationMode = $.freezeObject({
+ NO_ROTATION: 1,
+ EXACT: 2,
+ BOUNDING_BOX: 3
+ });
+
+ /**
+ * @class Overlay
+ * @classdesc Provides a way to float an HTML element on top of the viewer element.
+ *
+ * @memberof OpenSeadragon
+ * @param {Object} options
+ * @param {Element} options.element
+ * @param {OpenSeadragon.Point|OpenSeadragon.Rect} options.location - The
+ * location of the overlay on the image. If a {@link OpenSeadragon.Point}
+ * is specified, the overlay will be located at this location with respect
+ * to the placement option. If a {@link OpenSeadragon.Rect} is specified,
+ * the overlay will be placed at this location with the corresponding width
+ * and height and placement TOP_LEFT.
+ * @param {OpenSeadragon.Placement} [options.placement=OpenSeadragon.Placement.TOP_LEFT]
+ * Defines what part of the overlay should be at the specified options.location
+ * @param {OpenSeadragon.Overlay.OnDrawCallback} [options.onDraw]
+ * @param {Boolean} [options.checkResize=true] Set to false to avoid to
+ * check the size of the overlay every time it is drawn in the directions
+ * which are not scaled. It will improve performances but will cause a
+ * misalignment if the overlay size changes.
+ * @param {Number} [options.width] The width of the overlay in viewport
+ * coordinates. If specified, the width of the overlay will be adjusted when
+ * the zoom changes.
+ * @param {Number} [options.height] The height of the overlay in viewport
+ * coordinates. If specified, the height of the overlay will be adjusted when
+ * the zoom changes.
+ * @param {Boolean} [options.rotationMode=OpenSeadragon.OverlayRotationMode.EXACT]
+ * How to handle the rotation of the viewport.
+ */
+ $.Overlay = function(element, location, placement) {
+
+ /**
+ * onDraw callback signature used by {@link OpenSeadragon.Overlay}.
+ *
+ * @callback OnDrawCallback
+ * @memberof OpenSeadragon.Overlay
+ * @param {OpenSeadragon.Point} position
+ * @param {OpenSeadragon.Point} size
+ * @param {Element} element
+ */
+
+ var options;
+ if ($.isPlainObject(element)) {
+ options = element;
+ } else {
+ options = {
+ element: element,
+ location: location,
+ placement: placement
+ };
+ }
+
+ this.element = options.element;
+ this.style = options.element.style;
+ this._init(options);
+ };
+
+ /** @lends OpenSeadragon.Overlay.prototype */
+ $.Overlay.prototype = {
+
+ // private
+ _init: function(options) {
+ this.location = options.location;
+ this.placement = options.placement === undefined ?
+ $.Placement.TOP_LEFT : options.placement;
+ this.onDraw = options.onDraw;
+ this.checkResize = options.checkResize === undefined ?
+ true : options.checkResize;
+
+ // When this.width is not null, the overlay get scaled horizontally
+ this.width = options.width === undefined ? null : options.width;
+
+ // When this.height is not null, the overlay get scaled vertically
+ this.height = options.height === undefined ? null : options.height;
+
+ this.rotationMode = options.rotationMode || $.OverlayRotationMode.EXACT;
+
+ // Having a rect as location is a syntactic sugar
+ if (this.location instanceof $.Rect) {
+ this.width = this.location.width;
+ this.height = this.location.height;
+ this.location = this.location.getTopLeft();
+ this.placement = $.Placement.TOP_LEFT;
+ }
+
+ // Deprecated properties kept for backward compatibility.
+ this.scales = this.width !== null && this.height !== null;
+ this.bounds = new $.Rect(
+ this.location.x, this.location.y, this.width, this.height);
+ this.position = this.location;
+ },
+
+ /**
+ * Internal function to adjust the position of an overlay
+ * depending on it size and placement.
+ * @function
+ * @param {OpenSeadragon.Point} position
+ * @param {OpenSeadragon.Point} size
+ */
+ adjust: function(position, size) {
+ var properties = $.Placement.properties[this.placement];
+ if (!properties) {
+ return;
+ }
+ if (properties.isHorizontallyCentered) {
+ position.x -= size.x / 2;
+ } else if (properties.isRight) {
+ position.x -= size.x;
+ }
+ if (properties.isVerticallyCentered) {
+ position.y -= size.y / 2;
+ } else if (properties.isBottom) {
+ position.y -= size.y;
+ }
+ },
+
+ /**
+ * @function
+ */
+ destroy: function() {
+ var element = this.element;
+ var style = this.style;
+
+ if (element.parentNode) {
+ element.parentNode.removeChild(element);
+ //this should allow us to preserve overlays when required between
+ //pages
+ if (element.prevElementParent) {
+ style.display = 'none';
+ //element.prevElementParent.insertBefore(
+ // element,
+ // element.prevNextSibling
+ //);
+ document.body.appendChild(element);
+ }
+ }
+
+ // clear the onDraw callback
+ this.onDraw = null;
+
+ style.top = "";
+ style.left = "";
+ style.position = "";
+
+ if (this.width !== null) {
+ style.width = "";
+ }
+ if (this.height !== null) {
+ style.height = "";
+ }
+ var transformOriginProp = $.getCssPropertyWithVendorPrefix(
+ 'transformOrigin');
+ var transformProp = $.getCssPropertyWithVendorPrefix(
+ 'transform');
+ if (transformOriginProp && transformProp) {
+ style[transformOriginProp] = "";
+ style[transformProp] = "";
+ }
+ },
+
+ /**
+ * @function
+ * @param {Element} container
+ */
+ drawHTML: function(container, viewport) {
+ var element = this.element;
+ if (element.parentNode !== container) {
+ //save the source parent for later if we need it
+ element.prevElementParent = element.parentNode;
+ element.prevNextSibling = element.nextSibling;
+ container.appendChild(element);
+
+ // have to set position before calculating size, fix #1116
+ this.style.position = "absolute";
+ // this.size is used by overlays which don't get scaled in at
+ // 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 = positionAndSize.rotate;
+
+ // 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;
+ style.left = position.x + "px";
+ style.top = position.y + "px";
+ if (this.width !== null) {
+ style.width = size.x + "px";
+ }
+ if (this.height !== null) {
+ style.height = size.y + "px";
+ }
+ var transformOriginProp = $.getCssPropertyWithVendorPrefix(
+ 'transformOrigin');
+ var transformProp = $.getCssPropertyWithVendorPrefix(
+ 'transform');
+ if (transformOriginProp && transformProp) {
+ if (rotate) {
+ style[transformOriginProp] = this._getTransformOrigin();
+ style[transformProp] = "rotate(" + rotate + "deg)";
+ } else {
+ style[transformOriginProp] = "";
+ style[transformProp] = "";
+ }
+ }
+ style.display = 'block';
+ }
+ },
+
+ // private
+ _getOverlayPositionAndSize: function(viewport) {
+ var position = viewport.pixelFromPoint(this.location, true);
+ var size = this._getSizeInPixels(viewport);
+ this.adjust(position, size);
+
+ var rotate = 0;
+ if (viewport.getRotation(true) &&
+ this.rotationMode !== $.OverlayRotationMode.NO_ROTATION) {
+ // BOUNDING_BOX is only valid if both directions get scaled.
+ // Get replaced by EXACT otherwise.
+ if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX &&
+ this.width !== null && this.height !== null) {
+ var rect = new $.Rect(position.x, position.y, size.x, size.y);
+ var boundingBox = this._getBoundingBox(rect, viewport.getRotation(true));
+ position = boundingBox.getTopLeft();
+ size = boundingBox.getSize();
+ } else {
+ rotate = viewport.getRotation(true);
+ }
+ }
+
+ return {
+ position: position,
+ size: size,
+ rotate: rotate
+ };
+ },
+
+ // private
+ _getSizeInPixels: function(viewport) {
+ var width = this.size.x;
+ var height = this.size.y;
+ if (this.width !== null || this.height !== null) {
+ var scaledSize = viewport.deltaPixelsFromPointsNoRotate(
+ new $.Point(this.width || 0, this.height || 0), true);
+ if (this.width !== null) {
+ width = scaledSize.x;
+ }
+ if (this.height !== null) {
+ height = scaledSize.y;
+ }
+ }
+ if (this.checkResize &&
+ (this.width === null || this.height === null)) {
+ var eltSize = this.size = $.getElementSize(this.element);
+ if (this.width === null) {
+ width = eltSize.x;
+ }
+ if (this.height === null) {
+ height = eltSize.y;
+ }
+ }
+ return new $.Point(width, height);
+ },
+
+ // private
+ _getBoundingBox: function(rect, degrees) {
+ var refPoint = this._getPlacementPoint(rect);
+ return rect.rotate(degrees, refPoint).getBoundingBox();
+ },
+
+ // private
+ _getPlacementPoint: function(rect) {
+ var result = new $.Point(rect.x, rect.y);
+ var properties = $.Placement.properties[this.placement];
+ if (properties) {
+ if (properties.isHorizontallyCentered) {
+ result.x += rect.width / 2;
+ } else if (properties.isRight) {
+ result.x += rect.width;
+ }
+ if (properties.isVerticallyCentered) {
+ result.y += rect.height / 2;
+ } else if (properties.isBottom) {
+ result.y += rect.height;
+ }
+ }
+ return result;
+ },
+
+ // private
+ _getTransformOrigin: function() {
+ var result = "";
+ var properties = $.Placement.properties[this.placement];
+ if (!properties) {
+ return result;
+ }
+ if (properties.isLeft) {
+ result = "left";
+ } else if (properties.isRight) {
+ result = "right";
+ }
+ if (properties.isTop) {
+ result += " top";
+ } else if (properties.isBottom) {
+ result += " bottom";
+ }
+ return result;
+ },
+
+ /**
+ * Changes the overlay settings.
+ * @function
+ * @param {OpenSeadragon.Point|OpenSeadragon.Rect|Object} location
+ * If an object is specified, the options are the same than the constructor
+ * except for the element which can not be changed.
+ * @param {OpenSeadragon.Placement} placement
+ */
+ update: function(location, placement) {
+ var options = $.isPlainObject(location) ? location : {
+ location: location,
+ placement: placement
+ };
+ this._init({
+ location: options.location || this.location,
+ placement: options.placement !== undefined ?
+ options.placement : this.placement,
+ onDraw: options.onDraw || this.onDraw,
+ checkResize: options.checkResize || this.checkResize,
+ width: options.width !== undefined ? options.width : this.width,
+ height: options.height !== undefined ? options.height : this.height,
+ rotationMode: options.rotationMode || this.rotationMode
+ });
+ },
+
+ /**
+ * Returns the current bounds of the overlay in viewport coordinates
+ * @function
+ * @param {OpenSeadragon.Viewport} viewport the viewport
+ * @returns {OpenSeadragon.Rect} overlay bounds
+ */
+ getBounds: function(viewport) {
+ $.console.assert(viewport,
+ 'A viewport must now be passed to Overlay.getBounds.');
+ var width = this.width;
+ var height = this.height;
+ if (width === null || height === null) {
+ var size = viewport.deltaPointsFromPixelsNoRotate(this.size, true);
+ if (width === null) {
+ width = size.x;
+ }
+ if (height === null) {
+ height = size.y;
+ }
+ }
+ var location = this.location.clone();
+ this.adjust(location, new $.Point(width, height));
+ return this._adjustBoundsForRotation(
+ viewport, new $.Rect(location.x, location.y, width, height));
+ },
+
+ // private
+ _adjustBoundsForRotation: function(viewport, bounds) {
+ if (!viewport ||
+ viewport.getRotation(true) === 0 ||
+ this.rotationMode === $.OverlayRotationMode.EXACT) {
+ return bounds;
+ }
+ if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX) {
+ // If overlay not fully scalable, BOUNDING_BOX falls back to EXACT
+ if (this.width === null || this.height === null) {
+ return bounds;
+ }
+ // It is easier to just compute the position and size and
+ // convert to viewport coordinates.
+ var positionAndSize = this._getOverlayPositionAndSize(viewport);
+ return viewport.viewerElementToViewportRectangle(new $.Rect(
+ positionAndSize.position.x,
+ positionAndSize.position.y,
+ positionAndSize.size.x,
+ positionAndSize.size.y));
+ }
+
+ // NO_ROTATION case
+ return bounds.rotate(-viewport.getRotation(true),
+ this._getPlacementPoint(bounds));
+ }
+ };
+
+}(OpenSeadragon));
+
+/*
+ * OpenSeadragon - Drawer
+ *
+ * Copyright (C) 2009 CodePlex Foundation
+ * Copyright (C) 2010-2022 OpenSeadragon contributors
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ * - Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ *
+ * - Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * - Neither the name of CodePlex Foundation nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+ * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function( $ ){
+
+/**
+ * @class Drawer
+ * @memberof OpenSeadragon
+ * @classdesc Handles rendering of tiles for an {@link OpenSeadragon.Viewer}.
+ * @param {Object} options - Options for this Drawer.
+ * @param {OpenSeadragon.Viewer} options.viewer - The Viewer that owns this Drawer.
+ * @param {OpenSeadragon.Viewport} options.viewport - Reference to Viewer viewport.
+ * @param {Element} options.element - Parent element.
+ * @param {Number} [options.debugGridColor] - See debugGridColor in {@link OpenSeadragon.Options} for details.
+ */
+$.Drawer = function( options ) {
+
+ $.console.assert( options.viewer, "[Drawer] options.viewer is required" );
+
+ //backward compatibility for positional args while preferring more
+ //idiomatic javascript options object as the only argument
+ var args = arguments;
+
+ if( !$.isPlainObject( options ) ){
+ options = {
+ source: args[ 0 ], // Reference to Viewer tile source.
+ viewport: args[ 1 ], // Reference to Viewer viewport.
+ element: args[ 2 ] // Parent element.
+ };
+ }
+
+ $.console.assert( options.viewport, "[Drawer] options.viewport is required" );
+ $.console.assert( options.element, "[Drawer] options.element is required" );
+
+ if ( options.source ) {
+ $.console.error( "[Drawer] options.source is no longer accepted; use TiledImage instead" );
+ }
+
+ this.viewer = options.viewer;
+ this.viewport = options.viewport;
+ this.debugGridColor = typeof options.debugGridColor === 'string' ? [options.debugGridColor] : options.debugGridColor || $.DEFAULT_SETTINGS.debugGridColor;
+ if (options.opacity) {
+ $.console.error( "[Drawer] options.opacity is no longer accepted; set the opacity on the TiledImage instead" );
+ }
+
+ this.useCanvas = $.supportsCanvas && ( this.viewer ? this.viewer.useCanvas : true );
+ /**
+ * The parent element of this Drawer instance, passed in when the Drawer was created.
+ * The parent of {@link OpenSeadragon.Drawer#canvas}.
+ * @member {Element} container
+ * @memberof OpenSeadragon.Drawer#
+ */
+ this.container = $.getElement( options.element );
+ /**
+ * A <canvas> element if the browser supports them, otherwise a <div> element.
+ * Child element of {@link OpenSeadragon.Drawer#container}.
+ * @member {Element} canvas
+ * @memberof OpenSeadragon.Drawer#
+ */
+ this.canvas = $.makeNeutralElement( this.useCanvas ? "canvas" : "div" );
+ /**
+ * 2d drawing context for {@link OpenSeadragon.Drawer#canvas} if it's a <canvas> element, otherwise null.
+ * @member {Object} context
+ * @memberof OpenSeadragon.Drawer#
+ */
+ this.context = this.useCanvas ? this.canvas.getContext( "2d" ) : null;
+
+ /**
+ * Sketch canvas used to temporarily draw tiles which cannot be drawn directly
+ * to the main canvas due to opacity. Lazily initialized.
+ */
+ this.sketchCanvas = null;
+ this.sketchContext = null;
+
+ /**
+ * @member {Element} element
+ * @memberof OpenSeadragon.Drawer#
+ * @deprecated Alias for {@link OpenSeadragon.Drawer#container}.
+ */
+ this.element = this.container;
+
+ // We force our container to ltr because our drawing math doesn't work in rtl.
+ // This issue only affects our canvas renderer, but we do it always for consistency.
+ // Note that this means overlays you want to be rtl need to be explicitly set to rtl.
+ this.container.dir = 'ltr';
+
+ // check canvas available width and height, set canvas width and height such that the canvas backing store is set to the proper pixel density
+ if (this.useCanvas) {
+ var viewportSize = this._calculateCanvasSize();
+ this.canvas.width = viewportSize.x;
+ this.canvas.height = viewportSize.y;
+ }
+
+ this.canvas.style.width = "100%";
+ this.canvas.style.height = "100%";
+ this.canvas.style.position = "absolute";
+ $.setElementOpacity( this.canvas, this.opacity, true );
+ // Allow pointer events to pass through the canvas element so implicit
+ // pointer capture works on touch devices
+ $.setElementPointerEventsNone( this.canvas );
+ $.setElementTouchActionNone( this.canvas );
+
+ // explicit left-align
+ this.container.style.textAlign = "left";
+ this.container.appendChild( this.canvas );
+
+ // Image smoothing for canvas rendering (only if canvas is used).
+ // Canvas default is "true", so this will only be changed if user specified "false".
+ this._imageSmoothingEnabled = true;
+};
+
+/** @lends OpenSeadragon.Drawer.prototype */
+$.Drawer.prototype = {
+ // deprecated
+ addOverlay: function( element, location, placement, onDraw ) {
+ $.console.error("drawer.addOverlay is deprecated. Use viewer.addOverlay instead.");
+ this.viewer.addOverlay( element, location, placement, onDraw );
+ return this;
+ },
+
+ // deprecated
+ updateOverlay: function( element, location, placement ) {
+ $.console.error("drawer.updateOverlay is deprecated. Use viewer.updateOverlay instead.");
+ this.viewer.updateOverlay( element, location, placement );
+ return this;
+ },
+
+ // deprecated
+ removeOverlay: function( element ) {
+ $.console.error("drawer.removeOverlay is deprecated. Use viewer.removeOverlay instead.");
+ this.viewer.removeOverlay( element );
+ return this;
+ },
+
+ // deprecated
+ clearOverlays: function() {
+ $.console.error("drawer.clearOverlays is deprecated. Use viewer.clearOverlays instead.");
+ this.viewer.clearOverlays();
+ return this;
+ },
+
+ /**
+ * This function converts the given point from to the drawer coordinate by
+ * multiplying it with the pixel density.
+ * This function does not take rotation into account, thus assuming provided
+ * point is at 0 degree.
+ * @param {OpenSeadragon.Point} point - the pixel point to convert
+ * @returns {OpenSeadragon.Point} Point in drawer coordinate system.
+ */
+ viewportCoordToDrawerCoord: function(point) {
+ var vpPoint = this.viewport.pixelFromPointNoRotate(point, true);
+ return new $.Point(
+ vpPoint.x * $.pixelDensityRatio,
+ vpPoint.y * $.pixelDensityRatio
+ );
+ },
+
+ /**
+ * This function will create multiple polygon paths on the drawing context by provided polygons,
+ * then clip the context to the paths.
+ * @param {OpenSeadragon.Point[][]} polygons - an array of polygons. A polygon is an array of OpenSeadragon.Point
+ * @param {Boolean} useSketch - Whether to use the sketch canvas or not.
+ */
+ clipWithPolygons: function (polygons, useSketch) {
+ if (!this.useCanvas) {
+ return;
+ }
+ var context = this._getContext(useSketch);
+ context.beginPath();
+ polygons.forEach(function (polygon) {
+ polygon.forEach(function (coord, i) {
+ context[i === 0 ? 'moveTo' : 'lineTo'](coord.x, coord.y);
+ });
+ });
+ context.clip();
+ },
+
+ /**
+ * Set the opacity of the drawer.
+ * @param {Number} opacity
+ * @returns {OpenSeadragon.Drawer} Chainable.
+ */
+ setOpacity: function( opacity ) {
+ $.console.error("drawer.setOpacity is deprecated. Use tiledImage.setOpacity instead.");
+ var world = this.viewer.world;
+ for (var i = 0; i < world.getItemCount(); i++) {
+ world.getItemAt( i ).setOpacity( opacity );
+ }
+ return this;
+ },
+
+ /**
+ * Get the opacity of the drawer.
+ * @returns {Number}
+ */
+ getOpacity: function() {
+ $.console.error("drawer.getOpacity is deprecated. Use tiledImage.getOpacity instead.");
+ var world = this.viewer.world;
+ var maxOpacity = 0;
+ for (var i = 0; i < world.getItemCount(); i++) {
+ var opacity = world.getItemAt( i ).getOpacity();
+ if ( opacity > maxOpacity ) {
+ maxOpacity = opacity;
+ }
+ }
+ return maxOpacity;
+ },
+
+ // deprecated
+ needsUpdate: function() {
+ $.console.error( "[Drawer.needsUpdate] this function is deprecated. Use World.needsDraw instead." );
+ return this.viewer.world.needsDraw();
+ },
+
+ // deprecated
+ numTilesLoaded: function() {
+ $.console.error( "[Drawer.numTilesLoaded] this function is deprecated. Use TileCache.numTilesLoaded instead." );
+ return this.viewer.tileCache.numTilesLoaded();
+ },
+
+ // deprecated
+ reset: function() {
+ $.console.error( "[Drawer.reset] this function is deprecated. Use World.resetItems instead." );
+ this.viewer.world.resetItems();
+ return this;
+ },
+
+ // deprecated
+ update: function() {
+ $.console.error( "[Drawer.update] this function is deprecated. Use Drawer.clear and World.draw instead." );
+ this.clear();
+ this.viewer.world.draw();
+ return this;
+ },
+
+ /**
+ * @returns {Boolean} True if rotation is supported.
+ */
+ canRotate: function() {
+ return this.useCanvas;
+ },
+
+ /**
+ * Destroy the drawer (unload current loaded tiles)
+ */
+ destroy: function() {
+ //force unloading of current canvas (1x1 will be gc later, trick not necessarily needed)
+ this.canvas.width = 1;
+ this.canvas.height = 1;
+ this.sketchCanvas = null;
+ this.sketchContext = null;
+ },
+
+ /**
+ * Clears the Drawer so it's ready to draw another frame.
+ */
+ clear: function() {
+ this.canvas.innerHTML = "";
+ if ( this.useCanvas ) {
+ var viewportSize = this._calculateCanvasSize();
+ if( this.canvas.width !== viewportSize.x ||
+ this.canvas.height !== viewportSize.y ) {
+ this.canvas.width = viewportSize.x;
+ this.canvas.height = viewportSize.y;
+ this._updateImageSmoothingEnabled(this.context);
+ if ( this.sketchCanvas !== null ) {
+ var sketchCanvasSize = this._calculateSketchCanvasSize();
+ this.sketchCanvas.width = sketchCanvasSize.x;
+ this.sketchCanvas.height = sketchCanvasSize.y;
+ this._updateImageSmoothingEnabled(this.sketchContext);
+ }
+ }
+ this._clear();
+ }
+ },
+
+ _clear: function (useSketch, bounds) {
+ if (!this.useCanvas) {
+ return;
+ }
+ var context = this._getContext(useSketch);
+ if (bounds) {
+ context.clearRect(bounds.x, bounds.y, bounds.width, bounds.height);
+ } else {
+ var canvas = context.canvas;
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ }
+ },
+
+ /**
+ * Scale from OpenSeadragon viewer rectangle to drawer rectangle
+ * (ignoring rotation)
+ * @param {OpenSeadragon.Rect} rectangle - The rectangle in viewport coordinate system.
+ * @returns {OpenSeadragon.Rect} Rectangle in drawer coordinate system.
+ */
+ viewportToDrawerRectangle: function(rectangle) {
+ var topLeft = this.viewport.pixelFromPointNoRotate(rectangle.getTopLeft(), true);
+ var size = this.viewport.deltaPixelsFromPointsNoRotate(rectangle.getSize(), true);
+
+ return new $.Rect(
+ topLeft.x * $.pixelDensityRatio,
+ topLeft.y * $.pixelDensityRatio,
+ size.x * $.pixelDensityRatio,
+ size.y * $.pixelDensityRatio
+ );
+ },
+
+ /**
+ * Draws the given tile.
+ * @param {OpenSeadragon.Tile} tile - The tile to draw.
+ * @param {Function} drawingHandler - Method for firing the drawing event if using canvas.
+ * drawingHandler({context, tile, rendered})
+ * @param {Boolean} useSketch - Whether to use the sketch canvas or not.
+ * where rendered is the context with the pre-drawn image.
+ * @param {Float} [scale=1] - Apply a scale to tile position and size. Defaults to 1.
+ * @param {OpenSeadragon.Point} [translate] A translation vector to offset tile position
+ * @param {Boolean} [shouldRoundPositionAndSize] - Tells whether to round
+ * position and size of tiles supporting alpha channel in non-transparency
+ * context.
+ * @param {OpenSeadragon.TileSource} source - The source specification of the tile.
+ */
+ drawTile: function( tile, drawingHandler, useSketch, scale, translate, shouldRoundPositionAndSize, source) {
+ $.console.assert(tile, '[Drawer.drawTile] tile is required');
+ $.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required');
+
+ if (this.useCanvas) {
+ var context = this._getContext(useSketch);
+ scale = scale || 1;
+ tile.drawCanvas(context, drawingHandler, scale, translate, shouldRoundPositionAndSize, source);
+ } else {
+ tile.drawHTML( this.canvas );
+ }
+ },
+
+ _getContext: function( useSketch ) {
+ var context = this.context;
+ if ( useSketch ) {
+ if (this.sketchCanvas === null) {
+ this.sketchCanvas = document.createElement( "canvas" );
+ var sketchCanvasSize = this._calculateSketchCanvasSize();
+ this.sketchCanvas.width = sketchCanvasSize.x;
+ this.sketchCanvas.height = sketchCanvasSize.y;
+ this.sketchContext = this.sketchCanvas.getContext( "2d" );
+
+ // If the viewport is not currently rotated, the sketchCanvas
+ // will have the same size as the main canvas. However, if
+ // the viewport get rotated later on, we will need to resize it.
+ if (this.viewport.getRotation() === 0) {
+ var self = this;
+ this.viewer.addHandler('rotate', function resizeSketchCanvas() {
+ if (self.viewport.getRotation() === 0) {
+ return;
+ }
+ self.viewer.removeHandler('rotate', resizeSketchCanvas);
+ var sketchCanvasSize = self._calculateSketchCanvasSize();
+ self.sketchCanvas.width = sketchCanvasSize.x;
+ self.sketchCanvas.height = sketchCanvasSize.y;
+ });
+ }
+ this._updateImageSmoothingEnabled(this.sketchContext);
+ }
+ context = this.sketchContext;
+ }
+ return context;
+ },
+
+ // private
+ saveContext: function( useSketch ) {
+ if (!this.useCanvas) {
+ return;
+ }
+
+ this._getContext( useSketch ).save();
+ },
+
+ // private
+ restoreContext: function( useSketch ) {
+ if (!this.useCanvas) {
+ return;
+ }
+
+ this._getContext( useSketch ).restore();
+ },
+
+ // private
+ setClip: function(rect, useSketch) {
+ if (!this.useCanvas) {
+ return;
+ }
+
+ var context = this._getContext( useSketch );
+ context.beginPath();
+ context.rect(rect.x, rect.y, rect.width, rect.height);
+ context.clip();
+ },
+
+ // private
+ drawRectangle: function(rect, fillStyle, useSketch) {
+ if (!this.useCanvas) {
+ return;
+ }
+
+ var context = this._getContext( useSketch );
+ context.save();
+ context.fillStyle = fillStyle;
+ context.fillRect(rect.x, rect.y, rect.width, rect.height);
+ context.restore();
+ },
+
+ /**
+ * Blends the sketch canvas in the main canvas.
+ * @param {Object} options The options
+ * @param {Float} options.opacity The opacity of the blending.
+ * @param {Float} [options.scale=1] The scale at which tiles were drawn on
+ * the sketch. Default is 1.
+ * Use scale to draw at a lower scale and then enlarge onto the main canvas.
+ * @param {OpenSeadragon.Point} [options.translate] A translation vector
+ * that was used to draw the tiles
+ * @param {String} [options.compositeOperation] - How the image is
+ * composited onto other images; see compositeOperation in
+ * {@link OpenSeadragon.Options} for possible values.
+ * @param {OpenSeadragon.Rect} [options.bounds] The part of the sketch
+ * canvas to blend in the main canvas. If specified, options.scale and
+ * options.translate get ignored.
+ */
+ blendSketch: function(opacity, scale, translate, compositeOperation) {
+ var options = opacity;
+ if (!$.isPlainObject(options)) {
+ options = {
+ opacity: opacity,
+ scale: scale,
+ translate: translate,
+ compositeOperation: compositeOperation
+ };
+ }
+ if (!this.useCanvas || !this.sketchCanvas) {
+ return;
+ }
+ opacity = options.opacity;
+ compositeOperation = options.compositeOperation;
+ var bounds = options.bounds;
+
+ this.context.save();
+ this.context.globalAlpha = opacity;
+ if (compositeOperation) {
+ this.context.globalCompositeOperation = compositeOperation;
+ }
+ if (bounds) {
+ // Internet Explorer, Microsoft Edge, and Safari have problems
+ // when you call context.drawImage with negative x or y
+ // or x + width or y + height greater than the canvas width or height respectively.
+ if (bounds.x < 0) {
+ bounds.width += bounds.x;
+ bounds.x = 0;
+ }
+ if (bounds.x + bounds.width > this.canvas.width) {
+ bounds.width = this.canvas.width - bounds.x;
+ }
+ if (bounds.y < 0) {
+ bounds.height += bounds.y;
+ bounds.y = 0;
+ }
+ if (bounds.y + bounds.height > this.canvas.height) {
+ bounds.height = this.canvas.height - bounds.y;
+ }
+
+ this.context.drawImage(
+ this.sketchCanvas,
+ bounds.x,
+ bounds.y,
+ bounds.width,
+ bounds.height,
+ bounds.x,
+ bounds.y,
+ bounds.width,
+ bounds.height
+ );
+ } else {
+ scale = options.scale || 1;
+ translate = options.translate;
+ var position = translate instanceof $.Point ?
+ translate : new $.Point(0, 0);
+
+ var widthExt = 0;
+ var heightExt = 0;
+ if (translate) {
+ var widthDiff = this.sketchCanvas.width - this.canvas.width;
+ var heightDiff = this.sketchCanvas.height - this.canvas.height;
+ widthExt = Math.round(widthDiff / 2);
+ heightExt = Math.round(heightDiff / 2);
+ }
+ this.context.drawImage(
+ this.sketchCanvas,
+ position.x - widthExt * scale,
+ position.y - heightExt * scale,
+ (this.canvas.width + 2 * widthExt) * scale,
+ (this.canvas.height + 2 * heightExt) * scale,
+ -widthExt,
+ -heightExt,
+ this.canvas.width + 2 * widthExt,
+ this.canvas.height + 2 * heightExt
+ );
+ }
+ this.context.restore();
+ },
+
+ // private
+ drawDebugInfo: function(tile, count, i, tiledImage) {
+ if ( !this.useCanvas ) {
+ return;
+ }
+
+ var colorIndex = this.viewer.world.getIndexOfItem(tiledImage) % this.debugGridColor.length;
+ var context = this.context;
+ context.save();
+ context.lineWidth = 2 * $.pixelDensityRatio;
+ context.font = 'small-caps bold ' + (13 * $.pixelDensityRatio) + 'px arial';
+ context.strokeStyle = this.debugGridColor[colorIndex];
+ context.fillStyle = this.debugGridColor[colorIndex];
+
+ if (this.viewport.getRotation(true) % 360 !== 0 ) {
+ this._offsetForRotation({degrees: this.viewport.getRotation(true)});
+ }
+ if (tiledImage.getRotation(true) % 360 !== 0) {
+ this._offsetForRotation({
+ degrees: tiledImage.getRotation(true),
+ point: tiledImage.viewport.pixelFromPointNoRotate(
+ tiledImage._getRotationPoint(true), true)
+ });
+ }
+ if (tiledImage.viewport.getRotation(true) % 360 === 0 &&
+ tiledImage.getRotation(true) % 360 === 0) {
+ if(tiledImage._drawer.viewer.viewport.getFlip()) {
+ tiledImage._drawer._flip();
+ }
+ }
+
+ context.strokeRect(
+ tile.position.x * $.pixelDensityRatio,
+ tile.position.y * $.pixelDensityRatio,
+ tile.size.x * $.pixelDensityRatio,
+ tile.size.y * $.pixelDensityRatio
+ );
+
+ var tileCenterX = (tile.position.x + (tile.size.x / 2)) * $.pixelDensityRatio;
+ var tileCenterY = (tile.position.y + (tile.size.y / 2)) * $.pixelDensityRatio;
+
+ // Rotate the text the right way around.
+ context.translate( tileCenterX, tileCenterY );
+ context.rotate( Math.PI / 180 * -this.viewport.getRotation(true) );
+ context.translate( -tileCenterX, -tileCenterY );
+
+ if( tile.x === 0 && tile.y === 0 ){
+ context.fillText(
+ "Zoom: " + this.viewport.getZoom(),
+ tile.position.x * $.pixelDensityRatio,
+ (tile.position.y - 30) * $.pixelDensityRatio
+ );
+ context.fillText(
+ "Pan: " + this.viewport.getBounds().toString(),
+ tile.position.x * $.pixelDensityRatio,
+ (tile.position.y - 20) * $.pixelDensityRatio
+ );
+ }
+ context.fillText(
+ "Level: " + tile.level,
+ (tile.position.x + 10) * $.pixelDensityRatio,
+ (tile.position.y + 20) * $.pixelDensityRatio
+ );
+ context.fillText(
+ "Column: " + tile.x,
+ (tile.position.x + 10) * $.pixelDensityRatio,
+ (tile.position.y + 30) * $.pixelDensityRatio
+ );
+ context.fillText(
+ "Row: " + tile.y,
+ (tile.position.x + 10) * $.pixelDensityRatio,
+ (tile.position.y + 40) * $.pixelDensityRatio
+ );
+ context.fillText(
+ "Order: " + i + " of " + count,
+ (tile.position.x + 10) * $.pixelDensityRatio,
+ (tile.position.y + 50) * $.pixelDensityRatio
+ );
+ context.fillText(
+ "Size: " + tile.size.toString(),
+ (tile.position.x + 10) * $.pixelDensityRatio,
+ (tile.position.y + 60) * $.pixelDensityRatio
+ );
+ context.fillText(
+ "Position: " + tile.position.toString(),
+ (tile.position.x + 10) * $.pixelDensityRatio,
+ (tile.position.y + 70) * $.pixelDensityRatio
+ );
+
+ if (this.viewport.getRotation(true) % 360 !== 0 ) {
+ this._restoreRotationChanges();
+ }
+ if (tiledImage.getRotation(true) % 360 !== 0) {
+ this._restoreRotationChanges();
+ }
+
+ if (tiledImage.viewport.getRotation(true) % 360 === 0 &&
+ tiledImage.getRotation(true) % 360 === 0) {
+ if(tiledImage._drawer.viewer.viewport.getFlip()) {
+ tiledImage._drawer._flip();
+ }
+ }
+
+ context.restore();
+ },
+
+ // private
+ debugRect: function(rect) {
+ if ( this.useCanvas ) {
+ var context = this.context;
+ context.save();
+ context.lineWidth = 2 * $.pixelDensityRatio;
+ context.strokeStyle = this.debugGridColor[0];
+ context.fillStyle = this.debugGridColor[0];
+
+ context.strokeRect(
+ rect.x * $.pixelDensityRatio,
+ rect.y * $.pixelDensityRatio,
+ rect.width * $.pixelDensityRatio,
+ rect.height * $.pixelDensityRatio
+ );
+
+ context.restore();
+ }
+ },
+
+ /**
+ * Turns image smoothing on or off for this viewer. Note: Ignored in some (especially older) browsers that do not support this property.
+ *
+ * @function
+ * @param {Boolean} [imageSmoothingEnabled] - Whether or not the image is
+ * drawn smoothly on the canvas; see imageSmoothingEnabled in
+ * {@link OpenSeadragon.Options} for more explanation.
+ */
+ setImageSmoothingEnabled: function(imageSmoothingEnabled){
+ if ( this.useCanvas ) {
+ this._imageSmoothingEnabled = imageSmoothingEnabled;
+ this._updateImageSmoothingEnabled(this.context);
+ this.viewer.forceRedraw();
+ }
+ },
+
+ // private
+ _updateImageSmoothingEnabled: function(context){
+ context.msImageSmoothingEnabled = this._imageSmoothingEnabled;
+ context.imageSmoothingEnabled = this._imageSmoothingEnabled;
+ },
+
+ /**
+ * Get the canvas size
+ * @param {Boolean} sketch If set to true return the size of the sketch canvas
+ * @returns {OpenSeadragon.Point} The size of the canvas
+ */
+ getCanvasSize: function(sketch) {
+ var canvas = this._getContext(sketch).canvas;
+ return new $.Point(canvas.width, canvas.height);
+ },
+
+ getCanvasCenter: function() {
+ return new $.Point(this.canvas.width / 2, this.canvas.height / 2);
+ },
+
+ // private
+ _offsetForRotation: function(options) {
+ var point = options.point ?
+ options.point.times($.pixelDensityRatio) :
+ this.getCanvasCenter();
+
+ var context = this._getContext(options.useSketch);
+ context.save();
+
+ context.translate(point.x, point.y);
+ if(this.viewer.viewport.flipped){
+ context.rotate(Math.PI / 180 * -options.degrees);
+ context.scale(-1, 1);
+ } else{
+ context.rotate(Math.PI / 180 * options.degrees);
+ }
+ context.translate(-point.x, -point.y);
+ },
+
+ // private
+ _flip: function(options) {
+ options = options || {};
+ var point = options.point ?
+ options.point.times($.pixelDensityRatio) :
+ this.getCanvasCenter();
+ var context = this._getContext(options.useSketch);
+
+ context.translate(point.x, 0);
+ context.scale(-1, 1);
+ context.translate(-point.x, 0);
+ },
+
+ // private
+ _restoreRotationChanges: function(useSketch) {
+ var context = this._getContext(useSketch);
+ context.restore();
+ },
+
+ // private
+ _calculateCanvasSize: function() {
+ var pixelDensityRatio = $.pixelDensityRatio;
+ var viewportSize = this.viewport.getContainerSize();
+ return {
+ // canvas width and height are integers
+ x: Math.round(viewportSize.x * pixelDensityRatio),
+ y: Math.round(viewportSize.y * pixelDensityRatio)
+ };
+ },
+
+ // private
+ _calculateSketchCanvasSize: function() {
+ var canvasSize = this._calculateCanvasSize();
+ if (this.viewport.getRotation() === 0) {
+ return canvasSize;
+ }
+ // If the viewport is rotated, we need a larger sketch canvas in order
+ // to support edge smoothing.
+ var sketchCanvasSize = Math.ceil(Math.sqrt(
+ canvasSize.x * canvasSize.x +
+ canvasSize.y * canvasSize.y));
+ return {
+ x: sketchCanvasSize,
+ y: sketchCanvasSize
+ };
+ }
+};
+
+}( OpenSeadragon ));
+
+/*
+ * OpenSeadragon - Viewport
+ *
+ * Copyright (C) 2009 CodePlex Foundation
+ * Copyright (C) 2010-2022 OpenSeadragon contributors
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ * - Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ *
+ * - Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * - Neither the name of CodePlex Foundation nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+ * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function( $ ){
+
+
+/**
+ * @class Viewport
+ * @memberof OpenSeadragon
+ * @classdesc Handles coordinate-related functionality (zoom, pan, rotation, etc.)
+ * for an {@link OpenSeadragon.Viewer}.
+ * @param {Object} options - Options for this Viewport.
+ * @param {Object} [options.margins] - See viewportMargins in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.springStiffness] - See springStiffness in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.animationTime] - See animationTime in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.minZoomImageRatio] - See minZoomImageRatio in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.maxZoomPixelRatio] - See maxZoomPixelRatio in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.visibilityRatio] - See visibilityRatio in {@link OpenSeadragon.Options}.
+ * @param {Boolean} [options.wrapHorizontal] - See wrapHorizontal in {@link OpenSeadragon.Options}.
+ * @param {Boolean} [options.wrapVertical] - See wrapVertical in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.defaultZoomLevel] - See defaultZoomLevel in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.minZoomLevel] - See minZoomLevel in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.maxZoomLevel] - See maxZoomLevel in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.degrees] - See degrees in {@link OpenSeadragon.Options}.
+ * @param {Boolean} [options.homeFillsViewer] - See homeFillsViewer in {@link OpenSeadragon.Options}.
+ * @param {Boolean} [options.silenceMultiImageWarnings] - See silenceMultiImageWarnings in {@link OpenSeadragon.Options}.
+ */
+$.Viewport = function( options ) {
+
+ //backward compatibility for positional args while preferring more
+ //idiomatic javascript options object as the only argument
+ var args = arguments;
+ if (args.length && args[0] instanceof $.Point) {
+ options = {
+ containerSize: args[0],
+ contentSize: args[1],
+ config: args[2]
+ };
+ }
+
+ //options.config and the general config argument are deprecated
+ //in favor of the more direct specification of optional settings
+ //being passed directly on the options object
+ if ( options.config ){
+ $.extend( true, options, options.config );
+ delete options.config;
+ }
+
+ this._margins = $.extend({
+ left: 0,
+ top: 0,
+ right: 0,
+ bottom: 0
+ }, options.margins || {});
+
+ delete options.margins;
+
+ options.initialDegrees = options.degrees;
+ delete options.degrees;
+
+ $.extend( true, this, {
+
+ //required settings
+ containerSize: null,
+ contentSize: null,
+
+ //internal state properties
+ zoomPoint: null,
+ rotationPivot: null,
+ viewer: null,
+
+ //configurable options
+ springStiffness: $.DEFAULT_SETTINGS.springStiffness,
+ animationTime: $.DEFAULT_SETTINGS.animationTime,
+ minZoomImageRatio: $.DEFAULT_SETTINGS.minZoomImageRatio,
+ maxZoomPixelRatio: $.DEFAULT_SETTINGS.maxZoomPixelRatio,
+ visibilityRatio: $.DEFAULT_SETTINGS.visibilityRatio,
+ wrapHorizontal: $.DEFAULT_SETTINGS.wrapHorizontal,
+ wrapVertical: $.DEFAULT_SETTINGS.wrapVertical,
+ defaultZoomLevel: $.DEFAULT_SETTINGS.defaultZoomLevel,
+ minZoomLevel: $.DEFAULT_SETTINGS.minZoomLevel,
+ maxZoomLevel: $.DEFAULT_SETTINGS.maxZoomLevel,
+ initialDegrees: $.DEFAULT_SETTINGS.degrees,
+ flipped: $.DEFAULT_SETTINGS.flipped,
+ homeFillsViewer: $.DEFAULT_SETTINGS.homeFillsViewer,
+ silenceMultiImageWarnings: $.DEFAULT_SETTINGS.silenceMultiImageWarnings
+
+ }, options );
+
+ this._updateContainerInnerSize();
+
+ this.centerSpringX = new $.Spring({
+ initial: 0,
+ springStiffness: this.springStiffness,
+ animationTime: this.animationTime
+ });
+ this.centerSpringY = new $.Spring({
+ initial: 0,
+ springStiffness: this.springStiffness,
+ animationTime: this.animationTime
+ });
+ this.zoomSpring = new $.Spring({
+ exponential: true,
+ initial: 1,
+ springStiffness: this.springStiffness,
+ animationTime: this.animationTime
+ });
+
+ this.degreesSpring = new $.Spring({
+ initial: options.initialDegrees,
+ springStiffness: this.springStiffness,
+ animationTime: this.animationTime
+ });
+
+ this._oldCenterX = this.centerSpringX.current.value;
+ this._oldCenterY = this.centerSpringY.current.value;
+ this._oldZoom = this.zoomSpring.current.value;
+ this._oldDegrees = this.degreesSpring.current.value;
+
+ this._setContentBounds(new $.Rect(0, 0, 1, 1), 1);
+
+ this.goHome(true);
+ this.update();
+};
+
+/** @lends OpenSeadragon.Viewport.prototype */
+$.Viewport.prototype = {
+
+ // deprecated
+ get degrees () {
+ $.console.warn('Accessing [Viewport.degrees] is deprecated. Use viewport.getRotation instead.');
+ return this.getRotation();
+ },
+
+ // deprecated
+ set degrees (degrees) {
+ $.console.warn('Setting [Viewport.degrees] is deprecated. Use viewport.rotateTo, viewport.rotateBy, or viewport.setRotation instead.');
+ this.rotateTo(degrees);
+ },
+
+ /**
+ * Updates the viewport's home bounds and constraints for the given content size.
+ * @function
+ * @param {OpenSeadragon.Point} contentSize - size of the content in content units
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ * @fires OpenSeadragon.Viewer.event:reset-size
+ */
+ resetContentSize: function(contentSize) {
+ $.console.assert(contentSize, "[Viewport.resetContentSize] contentSize is required");
+ $.console.assert(contentSize instanceof $.Point, "[Viewport.resetContentSize] contentSize must be an OpenSeadragon.Point");
+ $.console.assert(contentSize.x > 0, "[Viewport.resetContentSize] contentSize.x must be greater than 0");
+ $.console.assert(contentSize.y > 0, "[Viewport.resetContentSize] contentSize.y must be greater than 0");
+
+ this._setContentBounds(new $.Rect(0, 0, 1, contentSize.y / contentSize.x), contentSize.x);
+ return this;
+ },
+
+ // deprecated
+ setHomeBounds: function(bounds, contentFactor) {
+ $.console.error("[Viewport.setHomeBounds] this function is deprecated; The content bounds should not be set manually.");
+ this._setContentBounds(bounds, contentFactor);
+ },
+
+ // Set the viewport's content bounds
+ // @param {OpenSeadragon.Rect} bounds - the new bounds in viewport coordinates
+ // without rotation
+ // @param {Number} contentFactor - how many content units per viewport unit
+ // @fires OpenSeadragon.Viewer.event:reset-size
+ // @private
+ _setContentBounds: function(bounds, contentFactor) {
+ $.console.assert(bounds, "[Viewport._setContentBounds] bounds is required");
+ $.console.assert(bounds instanceof $.Rect, "[Viewport._setContentBounds] bounds must be an OpenSeadragon.Rect");
+ $.console.assert(bounds.width > 0, "[Viewport._setContentBounds] bounds.width must be greater than 0");
+ $.console.assert(bounds.height > 0, "[Viewport._setContentBounds] bounds.height must be greater than 0");
+
+ this._contentBoundsNoRotate = bounds.clone();
+ this._contentSizeNoRotate = this._contentBoundsNoRotate.getSize().times(
+ contentFactor);
+
+ this._contentBounds = bounds.rotate(this.getRotation()).getBoundingBox();
+ this._contentSize = this._contentBounds.getSize().times(contentFactor);
+ this._contentAspectRatio = this._contentSize.x / this._contentSize.y;
+
+ if (this.viewer) {
+ /**
+ * Raised when the viewer's content size or home bounds are reset
+ * (see {@link OpenSeadragon.Viewport#resetContentSize}).
+ *
+ * @event reset-size
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+ * @property {OpenSeadragon.Point} contentSize
+ * @property {OpenSeadragon.Rect} contentBounds - Content bounds.
+ * @property {OpenSeadragon.Rect} homeBounds - Content bounds.
+ * Deprecated use contentBounds instead.
+ * @property {Number} contentFactor
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.viewer.raiseEvent('reset-size', {
+ contentSize: this._contentSizeNoRotate.clone(),
+ contentFactor: contentFactor,
+ homeBounds: this._contentBoundsNoRotate.clone(),
+ contentBounds: this._contentBounds.clone()
+ });
+ }
+ },
+
+ /**
+ * Returns the home zoom in "viewport zoom" value.
+ * @function
+ * @returns {Number} The home zoom in "viewport zoom".
+ */
+ getHomeZoom: function() {
+ if (this.defaultZoomLevel) {
+ return this.defaultZoomLevel;
+ }
+
+ var aspectFactor = this._contentAspectRatio / this.getAspectRatio();
+ var output;
+ if (this.homeFillsViewer) { // fill the viewer and clip the image
+ output = aspectFactor >= 1 ? aspectFactor : 1;
+ } else {
+ output = aspectFactor >= 1 ? 1 : aspectFactor;
+ }
+
+ return output / this._contentBounds.width;
+ },
+
+ /**
+ * Returns the home bounds in viewport coordinates.
+ * @function
+ * @returns {OpenSeadragon.Rect} The home bounds in vewport coordinates.
+ */
+ getHomeBounds: function() {
+ return this.getHomeBoundsNoRotate().rotate(-this.getRotation());
+ },
+
+ /**
+ * Returns the home bounds in viewport coordinates.
+ * This method ignores the viewport rotation. Use
+ * {@link OpenSeadragon.Viewport#getHomeBounds} to take it into account.
+ * @function
+ * @returns {OpenSeadragon.Rect} The home bounds in vewport coordinates.
+ */
+ getHomeBoundsNoRotate: function() {
+ var center = this._contentBounds.getCenter();
+ var width = 1.0 / this.getHomeZoom();
+ var height = width / this.getAspectRatio();
+
+ return new $.Rect(
+ center.x - (width / 2.0),
+ center.y - (height / 2.0),
+ width,
+ height
+ );
+ },
+
+ /**
+ * @function
+ * @param {Boolean} immediately
+ * @fires OpenSeadragon.Viewer.event:home
+ */
+ goHome: function(immediately) {
+ if (this.viewer) {
+ /**
+ * Raised when the "home" operation occurs (see {@link OpenSeadragon.Viewport#goHome}).
+ *
+ * @event home
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+ * @property {Boolean} immediately
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.viewer.raiseEvent('home', {
+ immediately: immediately
+ });
+ }
+ return this.fitBounds(this.getHomeBounds(), immediately);
+ },
+
+ /**
+ * @function
+ */
+ getMinZoom: function() {
+ var homeZoom = this.getHomeZoom(),
+ zoom = this.minZoomLevel ?
+ this.minZoomLevel :
+ this.minZoomImageRatio * homeZoom;
+
+ return zoom;
+ },
+
+ /**
+ * @function
+ */
+ getMaxZoom: function() {
+ var zoom = this.maxZoomLevel;
+ if (!zoom) {
+ zoom = this._contentSize.x * this.maxZoomPixelRatio / this._containerInnerSize.x;
+ zoom /= this._contentBounds.width;
+ }
+
+ return Math.max( zoom, this.getHomeZoom() );
+ },
+
+ /**
+ * @function
+ */
+ getAspectRatio: function() {
+ return this._containerInnerSize.x / this._containerInnerSize.y;
+ },
+
+ /**
+ * @function
+ * @returns {OpenSeadragon.Point} The size of the container, in screen coordinates.
+ */
+ getContainerSize: function() {
+ return new $.Point(
+ this.containerSize.x,
+ this.containerSize.y
+ );
+ },
+
+ /**
+ * The margins push the "home" region in from the sides by the specified amounts.
+ * @function
+ * @returns {Object} Properties (Numbers, in screen coordinates): left, top, right, bottom.
+ */
+ getMargins: function() {
+ return $.extend({}, this._margins); // Make a copy so we are not returning our original
+ },
+
+ /**
+ * The margins push the "home" region in from the sides by the specified amounts.
+ * @function
+ * @param {Object} margins - Properties (Numbers, in screen coordinates): left, top, right, bottom.
+ */
+ setMargins: function(margins) {
+ $.console.assert($.type(margins) === 'object', '[Viewport.setMargins] margins must be an object');
+
+ this._margins = $.extend({
+ left: 0,
+ top: 0,
+ right: 0,
+ bottom: 0
+ }, margins);
+
+ this._updateContainerInnerSize();
+ if (this.viewer) {
+ this.viewer.forceRedraw();
+ }
+ },
+
+ /**
+ * Returns the bounds of the visible area in viewport coordinates.
+ * @function
+ * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+ * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to, in viewport coordinates.
+ */
+ getBounds: function(current) {
+ return this.getBoundsNoRotate(current).rotate(-this.getRotation(current));
+ },
+
+ /**
+ * Returns the bounds of the visible area in viewport coordinates.
+ * This method ignores the viewport rotation. Use
+ * {@link OpenSeadragon.Viewport#getBounds} to take it into account.
+ * @function
+ * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+ * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to, in viewport coordinates.
+ */
+ getBoundsNoRotate: function(current) {
+ var center = this.getCenter(current);
+ var width = 1.0 / this.getZoom(current);
+ var height = width / this.getAspectRatio();
+
+ return new $.Rect(
+ center.x - (width / 2.0),
+ center.y - (height / 2.0),
+ width,
+ height
+ );
+ },
+
+ /**
+ * @function
+ * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+ * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to,
+ * including the space taken by margins, in viewport coordinates.
+ */
+ getBoundsWithMargins: function(current) {
+ return this.getBoundsNoRotateWithMargins(current).rotate(
+ -this.getRotation(current), this.getCenter(current));
+ },
+
+ /**
+ * @function
+ * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+ * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to,
+ * including the space taken by margins, in viewport coordinates.
+ */
+ getBoundsNoRotateWithMargins: function(current) {
+ var bounds = this.getBoundsNoRotate(current);
+ var factor = this._containerInnerSize.x * this.getZoom(current);
+ bounds.x -= this._margins.left / factor;
+ bounds.y -= this._margins.top / factor;
+ bounds.width += (this._margins.left + this._margins.right) / factor;
+ bounds.height += (this._margins.top + this._margins.bottom) / factor;
+ return bounds;
+ },
+
+ /**
+ * @function
+ * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+ */
+ getCenter: function( current ) {
+ var centerCurrent = new $.Point(
+ this.centerSpringX.current.value,
+ this.centerSpringY.current.value
+ ),
+ centerTarget = new $.Point(
+ this.centerSpringX.target.value,
+ this.centerSpringY.target.value
+ ),
+ oldZoomPixel,
+ zoom,
+ width,
+ height,
+ bounds,
+ newZoomPixel,
+ deltaZoomPixels,
+ deltaZoomPoints;
+
+ if ( current ) {
+ return centerCurrent;
+ } else if ( !this.zoomPoint ) {
+ return centerTarget;
+ }
+
+ oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true);
+
+ zoom = this.getZoom();
+ width = 1.0 / zoom;
+ height = width / this.getAspectRatio();
+ bounds = new $.Rect(
+ centerCurrent.x - width / 2.0,
+ centerCurrent.y - height / 2.0,
+ width,
+ height
+ );
+
+ newZoomPixel = this._pixelFromPoint(this.zoomPoint, bounds);
+ deltaZoomPixels = newZoomPixel.minus( oldZoomPixel ).rotate(-this.getRotation(true));
+ deltaZoomPoints = deltaZoomPixels.divide( this._containerInnerSize.x * zoom );
+
+ return centerTarget.plus( deltaZoomPoints );
+ },
+
+ /**
+ * @function
+ * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+ */
+ getZoom: function( current ) {
+ if ( current ) {
+ return this.zoomSpring.current.value;
+ } else {
+ return this.zoomSpring.target.value;
+ }
+ },
+
+ // private
+ _applyZoomConstraints: function(zoom) {
+ return Math.max(
+ Math.min(zoom, this.getMaxZoom()),
+ this.getMinZoom());
+ },
+
+ /**
+ * @function
+ * @private
+ * @param {OpenSeadragon.Rect} bounds
+ * @returns {OpenSeadragon.Rect} constrained bounds.
+ */
+ _applyBoundaryConstraints: function(bounds) {
+ var newBounds = this.viewportToViewerElementRectangle(bounds).getBoundingBox();
+ var cb = this.viewportToViewerElementRectangle(this._contentBoundsNoRotate).getBoundingBox();
+
+ var xConstrained = false;
+ var yConstrained = false;
+
+ if (this.wrapHorizontal) {
+ //do nothing
+ } else {
+ var boundsRight = newBounds.x + newBounds.width;
+ var contentRight = cb.x + cb.width;
+
+ var horizontalThreshold, leftDx, rightDx;
+ if (newBounds.width > cb.width) {
+ horizontalThreshold = this.visibilityRatio * cb.width;
+ } else {
+ horizontalThreshold = this.visibilityRatio * newBounds.width;
+ }
+
+ leftDx = cb.x - boundsRight + horizontalThreshold;
+ rightDx = contentRight - newBounds.x - horizontalThreshold;
+ if (horizontalThreshold > cb.width) {
+ newBounds.x += (leftDx + rightDx) / 2;
+ xConstrained = true;
+ } else if (rightDx < 0) {
+ newBounds.x += rightDx;
+ xConstrained = true;
+ } else if (leftDx > 0) {
+ newBounds.x += leftDx;
+ xConstrained = true;
+ }
+
+ }
+
+ if (this.wrapVertical) {
+ //do nothing
+ } else {
+ var boundsBottom = newBounds.y + newBounds.height;
+ var contentBottom = cb.y + cb.height;
+
+ var verticalThreshold, topDy, bottomDy;
+ if (newBounds.height > cb.height) {
+ verticalThreshold = this.visibilityRatio * cb.height;
+ } else{
+ verticalThreshold = this.visibilityRatio * newBounds.height;
+ }
+
+ topDy = cb.y - boundsBottom + verticalThreshold;
+ bottomDy = contentBottom - newBounds.y - verticalThreshold;
+ if (verticalThreshold > cb.height) {
+ newBounds.y += (topDy + bottomDy) / 2;
+ yConstrained = true;
+ } else if (bottomDy < 0) {
+ newBounds.y += bottomDy;
+ yConstrained = true;
+ } else if (topDy > 0) {
+ newBounds.y += topDy;
+ yConstrained = true;
+ }
+
+ }
+
+ var constraintApplied = xConstrained || yConstrained;
+ var newViewportBounds = constraintApplied ? this.viewerElementToViewportRectangle(newBounds) : bounds.clone();
+ newViewportBounds.xConstrained = xConstrained;
+ newViewportBounds.yConstrained = yConstrained;
+ newViewportBounds.constraintApplied = constraintApplied;
+
+ return newViewportBounds;
+ },
+
+ /**
+ * @function
+ * @private
+ * @param {Boolean} [immediately=false] - whether the function that triggered this event was
+ * called with the "immediately" flag
+ */
+ _raiseConstraintsEvent: function(immediately) {
+ if (this.viewer) {
+ /**
+ * Raised when the viewport constraints are applied (see {@link OpenSeadragon.Viewport#applyConstraints}).
+ *
+ * @event constrain
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+ * @property {Boolean} immediately - whether the function that triggered this event was
+ * called with the "immediately" flag
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.viewer.raiseEvent( 'constrain', {
+ immediately: immediately
+ });
+ }
+ },
+
+ /**
+ * Enforces the minZoom, maxZoom and visibilityRatio constraints by
+ * zooming and panning to the closest acceptable zoom and location.
+ * @function
+ * @param {Boolean} [immediately=false]
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ * @fires OpenSeadragon.Viewer.event:constrain if constraints were applied
+ */
+ applyConstraints: function(immediately) {
+ var actualZoom = this.getZoom();
+ var constrainedZoom = this._applyZoomConstraints(actualZoom);
+
+ if (actualZoom !== constrainedZoom) {
+ this.zoomTo(constrainedZoom, this.zoomPoint, immediately);
+ }
+
+ var constrainedBounds = this.getConstrainedBounds(false);
+
+ if(constrainedBounds.constraintApplied){
+ this.fitBounds(constrainedBounds, immediately);
+ this._raiseConstraintsEvent(immediately);
+ }
+
+ return this;
+ },
+
+ /**
+ * Equivalent to {@link OpenSeadragon.Viewport#applyConstraints}
+ * @function
+ * @param {Boolean} [immediately=false]
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ * @fires OpenSeadragon.Viewer.event:constrain
+ */
+ ensureVisible: function(immediately) {
+ return this.applyConstraints(immediately);
+ },
+
+ /**
+ * @function
+ * @private
+ * @param {OpenSeadragon.Rect} bounds
+ * @param {Object} options (immediately=false, constraints=false)
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ */
+ _fitBounds: function(bounds, options) {
+ options = options || {};
+ var immediately = options.immediately || false;
+ var constraints = options.constraints || false;
+
+ var aspect = this.getAspectRatio();
+ var center = bounds.getCenter();
+
+ // Compute width and height of bounding box.
+ var newBounds = new $.Rect(
+ bounds.x,
+ bounds.y,
+ bounds.width,
+ bounds.height,
+ bounds.degrees + this.getRotation())
+ .getBoundingBox();
+
+ if (newBounds.getAspectRatio() >= aspect) {
+ newBounds.height = newBounds.width / aspect;
+ } else {
+ newBounds.width = newBounds.height * aspect;
+ }
+
+ // Compute x and y from width, height and center position
+ newBounds.x = center.x - newBounds.width / 2;
+ newBounds.y = center.y - newBounds.height / 2;
+ var newZoom = 1.0 / newBounds.width;
+
+ if (immediately) {
+ this.panTo(center, true);
+ this.zoomTo(newZoom, null, true);
+ if(constraints){
+ this.applyConstraints(true);
+ }
+ return this;
+ }
+
+ var currentCenter = this.getCenter(true);
+ var currentZoom = this.getZoom(true);
+ this.panTo(currentCenter, true);
+ this.zoomTo(currentZoom, null, true);
+
+ var oldBounds = this.getBounds();
+ var oldZoom = this.getZoom();
+
+ if (oldZoom === 0 || Math.abs(newZoom / oldZoom - 1) < 0.00000001) {
+ this.zoomTo(newZoom, null, true);
+ this.panTo(center, immediately);
+ if(constraints){
+ this.applyConstraints(false);
+ }
+ return this;
+ }
+
+ if(constraints){
+ this.panTo(center, false);
+
+ newZoom = this._applyZoomConstraints(newZoom);
+ this.zoomTo(newZoom, null, false);
+
+ var constrainedBounds = this.getConstrainedBounds();
+
+ this.panTo(currentCenter, true);
+ this.zoomTo(currentZoom, null, true);
+
+ this.fitBounds(constrainedBounds);
+ } else {
+ var rotatedNewBounds = newBounds.rotate(-this.getRotation());
+ var referencePoint = rotatedNewBounds.getTopLeft().times(newZoom)
+ .minus(oldBounds.getTopLeft().times(oldZoom))
+ .divide(newZoom - oldZoom);
+
+ this.zoomTo(newZoom, referencePoint, immediately);
+ }
+ return this;
+ },
+
+ /**
+ * Makes the viewport zoom and pan so that the specified bounds take
+ * as much space as possible in the viewport.
+ * Note: this method ignores the constraints (minZoom, maxZoom and
+ * visibilityRatio).
+ * Use {@link OpenSeadragon.Viewport#fitBoundsWithConstraints} to enforce
+ * them.
+ * @function
+ * @param {OpenSeadragon.Rect} bounds
+ * @param {Boolean} [immediately=false]
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ */
+ fitBounds: function(bounds, immediately) {
+ return this._fitBounds(bounds, {
+ immediately: immediately,
+ constraints: false
+ });
+ },
+
+ /**
+ * Makes the viewport zoom and pan so that the specified bounds take
+ * as much space as possible in the viewport while enforcing the constraints
+ * (minZoom, maxZoom and visibilityRatio).
+ * Note: because this method enforces the constraints, part of the
+ * provided bounds may end up outside of the viewport.
+ * Use {@link OpenSeadragon.Viewport#fitBounds} to ignore them.
+ * @function
+ * @param {OpenSeadragon.Rect} bounds
+ * @param {Boolean} [immediately=false]
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ */
+ fitBoundsWithConstraints: function(bounds, immediately) {
+ return this._fitBounds(bounds, {
+ immediately: immediately,
+ constraints: true
+ });
+ },
+
+ /**
+ * Zooms so the image just fills the viewer vertically.
+ * @param {Boolean} immediately
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ */
+ fitVertically: function(immediately) {
+ var box = new $.Rect(
+ this._contentBounds.x + (this._contentBounds.width / 2),
+ this._contentBounds.y,
+ 0,
+ this._contentBounds.height);
+ return this.fitBounds(box, immediately);
+ },
+
+ /**
+ * Zooms so the image just fills the viewer horizontally.
+ * @param {Boolean} immediately
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ */
+ fitHorizontally: function(immediately) {
+ var box = new $.Rect(
+ this._contentBounds.x,
+ this._contentBounds.y + (this._contentBounds.height / 2),
+ this._contentBounds.width,
+ 0);
+ return this.fitBounds(box, immediately);
+ },
+
+
+ /**
+ * Returns bounds taking constraints into account
+ * Added to improve constrained panning
+ * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+ * @returns {OpenSeadragon.Rect} The bounds in viewport coordinates after applying constraints. The returned $.Rect
+ * contains additional properties constraintsApplied, xConstrained and yConstrained.
+ * These flags indicate whether the viewport bounds were modified by the constraints
+ * of the viewer rectangle, and in which dimension(s).
+ */
+ getConstrainedBounds: function(current) {
+ var bounds,
+ constrainedBounds;
+
+ bounds = this.getBounds(current);
+
+ constrainedBounds = this._applyBoundaryConstraints(bounds);
+
+ return constrainedBounds;
+ },
+
+ /**
+ * @function
+ * @param {OpenSeadragon.Point} delta
+ * @param {Boolean} immediately
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ * @fires OpenSeadragon.Viewer.event:pan
+ */
+ panBy: function( delta, immediately ) {
+ var center = new $.Point(
+ this.centerSpringX.target.value,
+ this.centerSpringY.target.value
+ );
+ return this.panTo( center.plus( delta ), immediately );
+ },
+
+ /**
+ * @function
+ * @param {OpenSeadragon.Point} center
+ * @param {Boolean} immediately
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ * @fires OpenSeadragon.Viewer.event:pan
+ */
+ panTo: function( center, immediately ) {
+ if ( immediately ) {
+ this.centerSpringX.resetTo( center.x );
+ this.centerSpringY.resetTo( center.y );
+ } else {
+ this.centerSpringX.springTo( center.x );
+ this.centerSpringY.springTo( center.y );
+ }
+
+ if( this.viewer ){
+ /**
+ * Raised when the viewport is panned (see {@link OpenSeadragon.Viewport#panBy} and {@link OpenSeadragon.Viewport#panTo}).
+ *
+ * @event pan
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+ * @property {OpenSeadragon.Point} center
+ * @property {Boolean} immediately
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.viewer.raiseEvent( 'pan', {
+ center: center,
+ immediately: immediately
+ });
+ }
+
+ return this;
+ },
+
+ /**
+ * @function
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ * @fires OpenSeadragon.Viewer.event:zoom
+ */
+ zoomBy: function(factor, refPoint, immediately) {
+ return this.zoomTo(
+ this.zoomSpring.target.value * factor, refPoint, immediately);
+ },
+
+ /**
+ * Zooms to the specified zoom level
+ * @function
+ * @param {Number} zoom The zoom level to zoom to.
+ * @param {OpenSeadragon.Point} [refPoint] The point which will stay at
+ * the same screen location. Defaults to the viewport center.
+ * @param {Boolean} [immediately=false]
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ * @fires OpenSeadragon.Viewer.event:zoom
+ */
+ zoomTo: function(zoom, refPoint, immediately) {
+ var _this = this;
+
+ this.zoomPoint = refPoint instanceof $.Point &&
+ !isNaN(refPoint.x) &&
+ !isNaN(refPoint.y) ?
+ refPoint :
+ null;
+
+ if (immediately) {
+ this._adjustCenterSpringsForZoomPoint(function() {
+ _this.zoomSpring.resetTo(zoom);
+ });
+ } else {
+ this.zoomSpring.springTo(zoom);
+ }
+
+ if (this.viewer) {
+ /**
+ * Raised when the viewport zoom level changes (see {@link OpenSeadragon.Viewport#zoomBy} and {@link OpenSeadragon.Viewport#zoomTo}).
+ *
+ * @event zoom
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+ * @property {Number} zoom
+ * @property {OpenSeadragon.Point} refPoint
+ * @property {Boolean} immediately
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.viewer.raiseEvent('zoom', {
+ zoom: zoom,
+ refPoint: refPoint,
+ immediately: immediately
+ });
+ }
+
+ return this;
+ },
+
+ /**
+ * Rotates this viewport to the angle specified.
+ * @function
+ * @param {Number} degrees The degrees to set the rotation to.
+ * @param {Boolean} [immediately=false] Whether to animate to the new angle
+ * or rotate immediately.
+ * * @returns {OpenSeadragon.Viewport} Chainable.
+ */
+ setRotation: function(degrees, immediately) {
+ return this.rotateTo(degrees, null, immediately);
+ },
+
+ /**
+ * Gets the current rotation in degrees.
+ * @function
+ * @param {Boolean} [current=false] True for current rotation, false for target.
+ * @returns {Number} The current rotation in degrees.
+ */
+ getRotation: function(current) {
+ return current ?
+ this.degreesSpring.current.value :
+ this.degreesSpring.target.value;
+ },
+
+ /**
+ * Rotates this viewport to the angle specified around a pivot point. Alias for rotateTo.
+ * @function
+ * @param {Number} degrees The degrees to set the rotation to.
+ * @param {OpenSeadragon.Point} [pivot] (Optional) point in viewport coordinates
+ * around which the rotation should be performed. Defaults to the center of the viewport.
+ * @param {Boolean} [immediately=false] Whether to animate to the new angle
+ * or rotate immediately.
+ * * @returns {OpenSeadragon.Viewport} Chainable.
+ */
+ setRotationWithPivot: function(degrees, pivot, immediately) {
+ return this.rotateTo(degrees, pivot, immediately);
+ },
+
+ /**
+ * Rotates this viewport to the angle specified.
+ * @function
+ * @param {Number} degrees The degrees to set the rotation to.
+ * @param {OpenSeadragon.Point} [pivot] (Optional) point in viewport coordinates
+ * around which the rotation should be performed. Defaults to the center of the viewport.
+ * @param {Boolean} [immediately=false] Whether to animate to the new angle
+ * or rotate immediately.
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ */
+ rotateTo: function(degrees, pivot, immediately){
+ if (!this.viewer || !this.viewer.drawer.canRotate()) {
+ return this;
+ }
+
+ if (this.degreesSpring.target.value === degrees &&
+ this.degreesSpring.isAtTargetValue()) {
+ return this;
+ }
+ this.rotationPivot = pivot instanceof $.Point &&
+ !isNaN(pivot.x) &&
+ !isNaN(pivot.y) ?
+ pivot :
+ null;
+ if (immediately) {
+ if(this.rotationPivot){
+ var changeInDegrees = degrees - this._oldDegrees;
+ if(!changeInDegrees){
+ this.rotationPivot = null;
+ return this;
+ }
+ this._rotateAboutPivot(degrees);
+ } else{
+ this.degreesSpring.resetTo(degrees);
+ }
+ } else {
+ var normalizedFrom = $.positiveModulo(this.degreesSpring.current.value, 360);
+ var normalizedTo = $.positiveModulo(degrees, 360);
+ var diff = normalizedTo - normalizedFrom;
+ if (diff > 180) {
+ normalizedTo -= 360;
+ } else if (diff < -180) {
+ normalizedTo += 360;
+ }
+
+ var reverseDiff = normalizedFrom - normalizedTo;
+ this.degreesSpring.resetTo(degrees + reverseDiff);
+ this.degreesSpring.springTo(degrees);
+ }
+
+ this._setContentBounds(
+ this.viewer.world.getHomeBounds(),
+ this.viewer.world.getContentFactor());
+ this.viewer.forceRedraw();
+
+ /**
+ * Raised when rotation has been changed.
+ *
+ * @event rotate
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
+ * @property {Number} degrees - The number of degrees the rotation was set to.
+ * @property {Boolean} immediately - Whether the rotation happened immediately or was animated
+ * @property {OpenSeadragon.Point} pivot - The point in viewport coordinates around which the rotation (if any) happened
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.viewer.raiseEvent('rotate', {degrees: degrees, immediately: !!immediately, pivot: this.rotationPivot || this.getCenter()});
+ return this;
+ },
+
+ /**
+ * Rotates this viewport by the angle specified.
+ * @function
+ * @param {Number} degrees The degrees by which to rotate the viewport.
+ * @param {OpenSeadragon.Point} [pivot] (Optional) point in viewport coordinates
+ * around which the rotation should be performed. Defaults to the center of the viewport.
+ * * @param {Boolean} [immediately=false] Whether to animate to the new angle
+ * or rotate immediately.
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ */
+ rotateBy: function(degrees, pivot, immediately){
+ return this.rotateTo(this.degreesSpring.target.value + degrees, pivot, immediately);
+ },
+
+ /**
+ * @function
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ * @fires OpenSeadragon.Viewer.event:resize
+ */
+ resize: function( newContainerSize, maintain ) {
+ var oldBounds = this.getBoundsNoRotate(),
+ newBounds = oldBounds,
+ widthDeltaFactor;
+
+ this.containerSize.x = newContainerSize.x;
+ this.containerSize.y = newContainerSize.y;
+
+ this._updateContainerInnerSize();
+
+ if ( maintain ) {
+ // TODO: widthDeltaFactor will always be 1; probably not what's intended
+ widthDeltaFactor = newContainerSize.x / this.containerSize.x;
+ newBounds.width = oldBounds.width * widthDeltaFactor;
+ newBounds.height = newBounds.width / this.getAspectRatio();
+ }
+
+ if( this.viewer ){
+ /**
+ * Raised when a viewer resize operation is initiated (see {@link OpenSeadragon.Viewport#resize}).
+ * This event happens before the viewport bounds have been updated.
+ * See also {@link OpenSeadragon.Viewer#after-resize} which reflects
+ * the new viewport bounds following the resize action.
+ *
+ * @event resize
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+ * @property {OpenSeadragon.Point} newContainerSize
+ * @property {Boolean} maintain
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.viewer.raiseEvent( 'resize', {
+ newContainerSize: newContainerSize,
+ maintain: maintain
+ });
+ }
+
+ var output = this.fitBounds( newBounds, true );
+
+ if( this.viewer ){
+ /**
+ * Raised after the viewer is resized (see {@link OpenSeadragon.Viewport#resize}).
+ * See also {@link OpenSeadragon.Viewer#resize} event which happens
+ * before the new bounds have been calculated and applied.
+ *
+ * @event after-resize
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+ * @property {OpenSeadragon.Point} newContainerSize
+ * @property {Boolean} maintain
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.viewer.raiseEvent( 'after-resize', {
+ newContainerSize: newContainerSize,
+ maintain: maintain
+ });
+ }
+
+ return output;
+ },
+
+ // private
+ _updateContainerInnerSize: function() {
+ this._containerInnerSize = new $.Point(
+ Math.max(1, this.containerSize.x - (this._margins.left + this._margins.right)),
+ Math.max(1, this.containerSize.y - (this._margins.top + this._margins.bottom))
+ );
+ },
+
+ /**
+ * Update the zoom, degrees, and center (X and Y) springs.
+ * @function
+ * @returns {Boolean} True if any change has been made, false otherwise.
+ */
+ update: function() {
+ var _this = this;
+ this._adjustCenterSpringsForZoomPoint(function() {
+ _this.zoomSpring.update();
+ });
+ if(this.degreesSpring.isAtTargetValue()){
+ this.rotationPivot = null;
+ }
+ this.centerSpringX.update();
+ this.centerSpringY.update();
+
+ if(this.rotationPivot){
+ this._rotateAboutPivot(true);
+ }
+ else{
+ this.degreesSpring.update();
+ }
+
+
+ var changed = this.centerSpringX.current.value !== this._oldCenterX ||
+ this.centerSpringY.current.value !== this._oldCenterY ||
+ this.zoomSpring.current.value !== this._oldZoom ||
+ this.degreesSpring.current.value !== this._oldDegrees;
+
+
+ this._oldCenterX = this.centerSpringX.current.value;
+ this._oldCenterY = this.centerSpringY.current.value;
+ this._oldZoom = this.zoomSpring.current.value;
+ this._oldDegrees = this.degreesSpring.current.value;
+
+ return changed;
+ },
+
+ // private - pass true to use spring, or a number for degrees for immediate rotation
+ _rotateAboutPivot: function(degreesOrUseSpring){
+ var useSpring = degreesOrUseSpring === true;
+
+ var delta = this.rotationPivot.minus(this.getCenter());
+ this.centerSpringX.shiftBy(delta.x);
+ this.centerSpringY.shiftBy(delta.y);
+
+ if(useSpring){
+ this.degreesSpring.update();
+ } else {
+ this.degreesSpring.resetTo(degreesOrUseSpring);
+ }
+
+ var changeInDegrees = this.degreesSpring.current.value - this._oldDegrees;
+ var rdelta = delta.rotate(changeInDegrees * -1).times(-1);
+ this.centerSpringX.shiftBy(rdelta.x);
+ this.centerSpringY.shiftBy(rdelta.y);
+ },
+
+ // private
+ _adjustCenterSpringsForZoomPoint: function(zoomSpringHandler) {
+ if (this.zoomPoint) {
+ var oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true);
+ zoomSpringHandler();
+ var newZoomPixel = this.pixelFromPoint(this.zoomPoint, true);
+
+ var deltaZoomPixels = newZoomPixel.minus(oldZoomPixel);
+ var deltaZoomPoints = this.deltaPointsFromPixels(
+ deltaZoomPixels, true);
+
+ this.centerSpringX.shiftBy(deltaZoomPoints.x);
+ this.centerSpringY.shiftBy(deltaZoomPoints.y);
+
+ if (this.zoomSpring.isAtTargetValue()) {
+ this.zoomPoint = null;
+ }
+ } else {
+ zoomSpringHandler();
+ }
+ },
+
+ /**
+ * Convert a delta (translation vector) from viewport coordinates to pixels
+ * coordinates. This method does not take rotation into account.
+ * Consider using deltaPixelsFromPoints if you need to account for rotation.
+ * @param {OpenSeadragon.Point} deltaPoints - The translation vector to convert.
+ * @param {Boolean} [current=false] - Pass true for the current location;
+ * defaults to false (target location).
+ * @returns {OpenSeadragon.Point}
+ */
+ deltaPixelsFromPointsNoRotate: function(deltaPoints, current) {
+ return deltaPoints.times(
+ this._containerInnerSize.x * this.getZoom(current)
+ );
+ },
+
+ /**
+ * Convert a delta (translation vector) from viewport coordinates to pixels
+ * coordinates.
+ * @param {OpenSeadragon.Point} deltaPoints - The translation vector to convert.
+ * @param {Boolean} [current=false] - Pass true for the current location;
+ * defaults to false (target location).
+ * @returns {OpenSeadragon.Point}
+ */
+ deltaPixelsFromPoints: function(deltaPoints, current) {
+ return this.deltaPixelsFromPointsNoRotate(
+ deltaPoints.rotate(this.getRotation(current)),
+ current);
+ },
+
+ /**
+ * Convert a delta (translation vector) from pixels coordinates to viewport
+ * coordinates. This method does not take rotation into account.
+ * Consider using deltaPointsFromPixels if you need to account for rotation.
+ * @param {OpenSeadragon.Point} deltaPixels - The translation vector to convert.
+ * @param {Boolean} [current=false] - Pass true for the current location;
+ * defaults to false (target location).
+ * @returns {OpenSeadragon.Point}
+ */
+ deltaPointsFromPixelsNoRotate: function(deltaPixels, current) {
+ return deltaPixels.divide(
+ this._containerInnerSize.x * this.getZoom(current)
+ );
+ },
+
+ /**
+ * Convert a delta (translation vector) from pixels coordinates to viewport
+ * coordinates.
+ * @param {OpenSeadragon.Point} deltaPixels - The translation vector to convert.
+ * @param {Boolean} [current=false] - Pass true for the current location;
+ * defaults to false (target location).
+ * @returns {OpenSeadragon.Point}
+ */
+ deltaPointsFromPixels: function(deltaPixels, current) {
+ return this.deltaPointsFromPixelsNoRotate(deltaPixels, current)
+ .rotate(-this.getRotation(current));
+ },
+
+ /**
+ * Convert viewport coordinates to pixels coordinates.
+ * This method does not take rotation into account.
+ * Consider using pixelFromPoint if you need to account for rotation.
+ * @param {OpenSeadragon.Point} point the viewport coordinates
+ * @param {Boolean} [current=false] - Pass true for the current location;
+ * defaults to false (target location).
+ * @returns {OpenSeadragon.Point}
+ */
+ pixelFromPointNoRotate: function(point, current) {
+ return this._pixelFromPointNoRotate(
+ point, this.getBoundsNoRotate(current));
+ },
+
+ /**
+ * Convert viewport coordinates to pixel coordinates.
+ * @param {OpenSeadragon.Point} point the viewport coordinates
+ * @param {Boolean} [current=false] - Pass true for the current location;
+ * defaults to false (target location).
+ * @returns {OpenSeadragon.Point}
+ */
+ pixelFromPoint: function(point, current) {
+ return this._pixelFromPoint(point, this.getBoundsNoRotate(current));
+ },
+
+ // private
+ _pixelFromPointNoRotate: function(point, bounds) {
+ return point.minus(
+ bounds.getTopLeft()
+ ).times(
+ this._containerInnerSize.x / bounds.width
+ ).plus(
+ new $.Point(this._margins.left, this._margins.top)
+ );
+ },
+
+ // private
+ _pixelFromPoint: function(point, bounds) {
+ return this._pixelFromPointNoRotate(
+ point.rotate(this.getRotation(true), this.getCenter(true)),
+ bounds);
+ },
+
+ /**
+ * Convert pixel coordinates to viewport coordinates.
+ * This method does not take rotation into account.
+ * Consider using pointFromPixel if you need to account for rotation.
+ * @param {OpenSeadragon.Point} pixel Pixel coordinates
+ * @param {Boolean} [current=false] - Pass true for the current location;
+ * defaults to false (target location).
+ * @returns {OpenSeadragon.Point}
+ */
+ pointFromPixelNoRotate: function(pixel, current) {
+ var bounds = this.getBoundsNoRotate(current);
+ return pixel.minus(
+ new $.Point(this._margins.left, this._margins.top)
+ ).divide(
+ this._containerInnerSize.x / bounds.width
+ ).plus(
+ bounds.getTopLeft()
+ );
+ },
+
+ /**
+ * Convert pixel coordinates to viewport coordinates.
+ * @param {OpenSeadragon.Point} pixel Pixel coordinates
+ * @param {Boolean} [current=false] - Pass true for the current location;
+ * defaults to false (target location).
+ * @returns {OpenSeadragon.Point}
+ */
+ pointFromPixel: function(pixel, current) {
+ return this.pointFromPixelNoRotate(pixel, current).rotate(
+ -this.getRotation(current),
+ this.getCenter(current)
+ );
+ },
+
+ // private
+ _viewportToImageDelta: function( viewerX, viewerY ) {
+ var scale = this._contentBoundsNoRotate.width;
+ return new $.Point(
+ viewerX * this._contentSizeNoRotate.x / scale,
+ viewerY * this._contentSizeNoRotate.x / scale);
+ },
+
+ /**
+ * Translates from OpenSeadragon viewer coordinate system to image coordinate system.
+ * This method can be called either by passing X,Y coordinates or an
+ * OpenSeadragon.Point
+ * Note: not accurate with multi-image; use TiledImage.viewportToImageCoordinates instead.
+ * @function
+ * @param {(OpenSeadragon.Point|Number)} viewerX either a point or the X
+ * coordinate in viewport coordinate system.
+ * @param {Number} [viewerY] Y coordinate in viewport coordinate system.
+ * @returns {OpenSeadragon.Point} a point representing the coordinates in the image.
+ */
+ viewportToImageCoordinates: function(viewerX, viewerY) {
+ if (viewerX instanceof $.Point) {
+ //they passed a point instead of individual components
+ return this.viewportToImageCoordinates(viewerX.x, viewerX.y);
+ }
+
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ if (!this.silenceMultiImageWarnings) {
+ $.console.error('[Viewport.viewportToImageCoordinates] is not accurate ' +
+ 'with multi-image; use TiledImage.viewportToImageCoordinates instead.');
+ }
+ } else if (count === 1) {
+ // It is better to use TiledImage.viewportToImageCoordinates
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.viewportToImageCoordinates(viewerX, viewerY, true);
+ }
+ }
+
+ return this._viewportToImageDelta(
+ viewerX - this._contentBoundsNoRotate.x,
+ viewerY - this._contentBoundsNoRotate.y);
+ },
+
+ // private
+ _imageToViewportDelta: function( imageX, imageY ) {
+ var scale = this._contentBoundsNoRotate.width;
+ return new $.Point(
+ imageX / this._contentSizeNoRotate.x * scale,
+ imageY / this._contentSizeNoRotate.x * scale);
+ },
+
+ /**
+ * Translates from image coordinate system to OpenSeadragon viewer coordinate system
+ * This method can be called either by passing X,Y coordinates or an
+ * OpenSeadragon.Point
+ * Note: not accurate with multi-image; use TiledImage.imageToViewportCoordinates instead.
+ * @function
+ * @param {(OpenSeadragon.Point | Number)} imageX the point or the
+ * X coordinate in image coordinate system.
+ * @param {Number} [imageY] Y coordinate in image coordinate system.
+ * @returns {OpenSeadragon.Point} a point representing the coordinates in the viewport.
+ */
+ imageToViewportCoordinates: function(imageX, imageY) {
+ if (imageX instanceof $.Point) {
+ //they passed a point instead of individual components
+ return this.imageToViewportCoordinates(imageX.x, imageX.y);
+ }
+
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ if (!this.silenceMultiImageWarnings) {
+ $.console.error('[Viewport.imageToViewportCoordinates] is not accurate ' +
+ 'with multi-image; use TiledImage.imageToViewportCoordinates instead.');
+ }
+ } else if (count === 1) {
+ // It is better to use TiledImage.viewportToImageCoordinates
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.imageToViewportCoordinates(imageX, imageY, true);
+ }
+ }
+
+ var point = this._imageToViewportDelta(imageX, imageY);
+ point.x += this._contentBoundsNoRotate.x;
+ point.y += this._contentBoundsNoRotate.y;
+ return point;
+ },
+
+ /**
+ * 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
+ * OpenSeadragon.Rect
+ * Note: not accurate with multi-image; use TiledImage.imageToViewportRectangle instead.
+ * @function
+ * @param {(OpenSeadragon.Rect | Number)} imageX the rectangle or the X
+ * coordinate of the top left corner of the rectangle in image coordinate system.
+ * @param {Number} [imageY] the Y coordinate of the top left corner of the rectangle
+ * in image coordinate system.
+ * @param {Number} [pixelWidth] the width in pixel of the rectangle.
+ * @param {Number} [pixelHeight] the height in pixel of the rectangle.
+ * @returns {OpenSeadragon.Rect} This image's bounds in viewport coordinates
+ */
+ imageToViewportRectangle: function(imageX, imageY, pixelWidth, pixelHeight) {
+ var rect = imageX;
+ if (!(rect instanceof $.Rect)) {
+ //they passed individual components instead of a rectangle
+ rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight);
+ }
+
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ if (!this.silenceMultiImageWarnings) {
+ $.console.error('[Viewport.imageToViewportRectangle] is not accurate ' +
+ 'with multi-image; use TiledImage.imageToViewportRectangle instead.');
+ }
+ } else if (count === 1) {
+ // It is better to use TiledImage.imageToViewportRectangle
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.imageToViewportRectangle(
+ imageX, imageY, pixelWidth, pixelHeight, true);
+ }
+ }
+
+ var coordA = this.imageToViewportCoordinates(rect.x, rect.y);
+ var coordB = this._imageToViewportDelta(rect.width, rect.height);
+ return new $.Rect(
+ coordA.x,
+ coordA.y,
+ coordB.x,
+ coordB.y,
+ rect.degrees
+ );
+ },
+
+ /**
+ * 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
+ * OpenSeadragon.Rect
+ * Note: not accurate with multi-image; use TiledImage.viewportToImageRectangle instead.
+ * @function
+ * @param {(OpenSeadragon.Rect | Number)} viewerX either a rectangle or
+ * the X coordinate of the top left corner of the rectangle in viewport
+ * coordinate system.
+ * @param {Number} [viewerY] the Y coordinate of the top left corner of the rectangle
+ * in viewport coordinate system.
+ * @param {Number} [pointWidth] the width of the rectangle in viewport coordinate system.
+ * @param {Number} [pointHeight] the height of the rectangle in viewport coordinate system.
+ */
+ viewportToImageRectangle: function(viewerX, viewerY, pointWidth, pointHeight) {
+ var rect = viewerX;
+ if (!(rect instanceof $.Rect)) {
+ //they passed individual components instead of a rectangle
+ rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight);
+ }
+
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ if (!this.silenceMultiImageWarnings) {
+ $.console.error('[Viewport.viewportToImageRectangle] is not accurate ' +
+ 'with multi-image; use TiledImage.viewportToImageRectangle instead.');
+ }
+ } else if (count === 1) {
+ // It is better to use TiledImage.viewportToImageCoordinates
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.viewportToImageRectangle(
+ viewerX, viewerY, pointWidth, pointHeight, true);
+ }
+ }
+
+ var coordA = this.viewportToImageCoordinates(rect.x, rect.y);
+ var coordB = this._viewportToImageDelta(rect.width, rect.height);
+ return new $.Rect(
+ coordA.x,
+ coordA.y,
+ coordB.x,
+ coordB.y,
+ rect.degrees
+ );
+ },
+
+ /**
+ * Convert pixel coordinates relative to the viewer element to image
+ * coordinates.
+ * Note: not accurate with multi-image.
+ * @param {OpenSeadragon.Point} pixel
+ * @returns {OpenSeadragon.Point}
+ */
+ viewerElementToImageCoordinates: function( pixel ) {
+ var point = this.pointFromPixel( pixel, true );
+ return this.viewportToImageCoordinates( point );
+ },
+
+ /**
+ * Convert pixel coordinates relative to the image to
+ * viewer element coordinates.
+ * Note: not accurate with multi-image.
+ * @param {OpenSeadragon.Point} pixel
+ * @returns {OpenSeadragon.Point}
+ */
+ imageToViewerElementCoordinates: function( pixel ) {
+ var point = this.imageToViewportCoordinates( pixel );
+ return this.pixelFromPoint( point, true );
+ },
+
+ /**
+ * Convert pixel coordinates relative to the window to image coordinates.
+ * Note: not accurate with multi-image.
+ * @param {OpenSeadragon.Point} pixel
+ * @returns {OpenSeadragon.Point}
+ */
+ windowToImageCoordinates: function(pixel) {
+ $.console.assert(this.viewer,
+ "[Viewport.windowToImageCoordinates] the viewport must have a viewer.");
+ var viewerCoordinates = pixel.minus(
+ $.getElementPosition(this.viewer.element));
+ return this.viewerElementToImageCoordinates(viewerCoordinates);
+ },
+
+ /**
+ * Convert image coordinates to pixel coordinates relative to the window.
+ * Note: not accurate with multi-image.
+ * @param {OpenSeadragon.Point} pixel
+ * @returns {OpenSeadragon.Point}
+ */
+ imageToWindowCoordinates: function(pixel) {
+ $.console.assert(this.viewer,
+ "[Viewport.imageToWindowCoordinates] the viewport must have a viewer.");
+ var viewerCoordinates = this.imageToViewerElementCoordinates(pixel);
+ return viewerCoordinates.plus(
+ $.getElementPosition(this.viewer.element));
+ },
+
+ /**
+ * Convert pixel coordinates relative to the viewer element to viewport
+ * coordinates.
+ * @param {OpenSeadragon.Point} pixel
+ * @returns {OpenSeadragon.Point}
+ */
+ viewerElementToViewportCoordinates: function( pixel ) {
+ return this.pointFromPixel( pixel, true );
+ },
+
+ /**
+ * Convert viewport coordinates to pixel coordinates relative to the
+ * viewer element.
+ * @param {OpenSeadragon.Point} point
+ * @returns {OpenSeadragon.Point}
+ */
+ viewportToViewerElementCoordinates: function( point ) {
+ return this.pixelFromPoint( point, true );
+ },
+
+ /**
+ * Convert a rectangle in pixel coordinates relative to the viewer element
+ * to viewport coordinates.
+ * @param {OpenSeadragon.Rect} rectangle the rectangle to convert
+ * @returns {OpenSeadragon.Rect} the converted rectangle
+ */
+ viewerElementToViewportRectangle: function(rectangle) {
+ return $.Rect.fromSummits(
+ this.pointFromPixel(rectangle.getTopLeft(), true),
+ this.pointFromPixel(rectangle.getTopRight(), true),
+ this.pointFromPixel(rectangle.getBottomLeft(), true)
+ );
+ },
+
+ /**
+ * Convert a rectangle in viewport coordinates to pixel coordinates relative
+ * to the viewer element.
+ * @param {OpenSeadragon.Rect} rectangle the rectangle to convert
+ * @returns {OpenSeadragon.Rect} the converted rectangle
+ */
+ viewportToViewerElementRectangle: function(rectangle) {
+ return $.Rect.fromSummits(
+ this.pixelFromPoint(rectangle.getTopLeft(), true),
+ this.pixelFromPoint(rectangle.getTopRight(), true),
+ this.pixelFromPoint(rectangle.getBottomLeft(), true)
+ );
+ },
+
+ /**
+ * Convert pixel coordinates relative to the window to viewport coordinates.
+ * @param {OpenSeadragon.Point} pixel
+ * @returns {OpenSeadragon.Point}
+ */
+ windowToViewportCoordinates: function(pixel) {
+ $.console.assert(this.viewer,
+ "[Viewport.windowToViewportCoordinates] the viewport must have a viewer.");
+ var viewerCoordinates = pixel.minus(
+ $.getElementPosition(this.viewer.element));
+ return this.viewerElementToViewportCoordinates(viewerCoordinates);
+ },
+
+ /**
+ * Convert viewport coordinates to pixel coordinates relative to the window.
+ * @param {OpenSeadragon.Point} point
+ * @returns {OpenSeadragon.Point}
+ */
+ viewportToWindowCoordinates: function(point) {
+ $.console.assert(this.viewer,
+ "[Viewport.viewportToWindowCoordinates] the viewport must have a viewer.");
+ var viewerCoordinates = this.viewportToViewerElementCoordinates(point);
+ return viewerCoordinates.plus(
+ $.getElementPosition(this.viewer.element));
+ },
+
+ /**
+ * 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...
+ * Note: not accurate with multi-image.
+ * @function
+ * @param {Number} viewportZoom The viewport zoom
+ * target zoom.
+ * @returns {Number} imageZoom The image zoom
+ */
+ viewportToImageZoom: function(viewportZoom) {
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ if (!this.silenceMultiImageWarnings) {
+ $.console.error('[Viewport.viewportToImageZoom] is not ' +
+ 'accurate with multi-image.');
+ }
+ } else if (count === 1) {
+ // It is better to use TiledImage.viewportToImageZoom
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.viewportToImageZoom(viewportZoom);
+ }
+ }
+
+ var imageWidth = this._contentSizeNoRotate.x;
+ var containerWidth = this._containerInnerSize.x;
+ var scale = this._contentBoundsNoRotate.width;
+ var viewportToImageZoomRatio = (containerWidth / imageWidth) * scale;
+ return viewportZoom * viewportToImageZoomRatio;
+ },
+
+ /**
+ * 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
+ * target zoom.
+ * @returns {Number} viewportZoom The viewport zoom
+ */
+ imageToViewportZoom: function(imageZoom) {
+ if (this.viewer) {
+ var count = this.viewer.world.getItemCount();
+ if (count > 1) {
+ if (!this.silenceMultiImageWarnings) {
+ $.console.error('[Viewport.imageToViewportZoom] is not accurate ' +
+ 'with multi-image.');
+ }
+ } else if (count === 1) {
+ // It is better to use TiledImage.imageToViewportZoom
+ // because this._contentBoundsNoRotate can not be relied on
+ // with clipping.
+ var item = this.viewer.world.getItemAt(0);
+ return item.imageToViewportZoom(imageZoom);
+ }
+ }
+
+ var imageWidth = this._contentSizeNoRotate.x;
+ var containerWidth = this._containerInnerSize.x;
+ var scale = this._contentBoundsNoRotate.width;
+ var viewportToImageZoomRatio = (imageWidth / containerWidth) / scale;
+ return imageZoom * viewportToImageZoomRatio;
+ },
+
+ /**
+ * Toggles flip state and demands a new drawing on navigator and viewer objects.
+ * @function
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ */
+ toggleFlip: function() {
+ this.setFlip(!this.getFlip());
+ return this;
+ },
+
+ /**
+ * Get flip state stored on viewport.
+ * @function
+ * @returns {Boolean} Flip state.
+ */
+ getFlip: function() {
+ return this.flipped;
+ },
+
+ /**
+ * Sets flip state according to the state input argument.
+ * @function
+ * @param {Boolean} state - Flip state to set.
+ * @returns {OpenSeadragon.Viewport} Chainable.
+ */
+ setFlip: function( state ) {
+ if ( this.flipped === state ) {
+ return this;
+ }
+
+ this.flipped = state;
+ if(this.viewer.navigator){
+ this.viewer.navigator.setFlip(this.getFlip());
+ }
+ this.viewer.forceRedraw();
+
+ /**
+ * Raised when flip state has been changed.
+ *
+ * @event flip
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
+ * @property {Number} flipped - The flip state after this change.
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.viewer.raiseEvent('flip', {flipped: state});
+ return this;
+ }
+
+};
+
+}( OpenSeadragon ));
+
+/*
+ * OpenSeadragon - TiledImage
+ *
+ * Copyright (C) 2009 CodePlex Foundation
+ * Copyright (C) 2010-2022 OpenSeadragon contributors
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ * - Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ *
+ * - Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * - Neither the name of CodePlex Foundation nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+ * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(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 ) {
+ var _this = this;
+ /**
+ * 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.
+ _midDraw: false, // Is the tiledImage currently updating the viewport?
+ _needsDraw: 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.
+ //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
+ }, 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);
+ }
+
+ // We need a callback to give image manipulation a chance to happen
+ this._drawingHandler = function(args) {
+ /**
+ * This event is fired just before the tile is drawn giving the application a chance to alter the image.
+ *
+ * NOTE: This event is only fired when the drawer is using a <canvas>.
+ *
+ * @event tile-drawing
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
+ * @property {OpenSeadragon.Tile} tile - The Tile being drawn.
+ * @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn.
+ * @property {OpenSeadragon.Tile} context - The HTML canvas context being drawn into.
+ * @property {OpenSeadragon.Tile} rendered - The HTML canvas context containing the tile imagery.
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ _this.viewer.raiseEvent('tile-drawing', $.extend({
+ tiledImage: _this
+ }, args));
+ };
+
+ this._ownAjaxHeaders = {};
+ this.setAjaxHeaders(ajaxHeaders, false);
+};
+
+$.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.TiledImage.prototype */{
+ /**
+ * @returns {Boolean} Whether the TiledImage needs to be drawn.
+ */
+ needsDraw: function() {
+ return this._needsDraw;
+ },
+
+ /**
+ * @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.
+ * @returns {Boolean} Whether the TiledImage animated.
+ */
+ update: function() {
+ var xUpdated = this._xSpring.update();
+ var yUpdated = this._ySpring.update();
+ var scaleUpdated = this._scaleSpring.update();
+ var degreesUpdated = this._degreesSpring.update();
+
+ if (xUpdated || yUpdated || scaleUpdated || degreesUpdated) {
+ this._updateForScale();
+ this._needsDraw = true;
+ return true;
+ }
+
+ return false;
+ },
+
+ /**
+ * Draws the TiledImage to its Drawer.
+ */
+ draw: function() {
+ if (this.opacity !== 0 || this._preload) {
+ this._midDraw = true;
+ this._updateViewport();
+ this._midDraw = false;
+ }
+ // Images with opacity 0 should not need to be drawn in future. this._needsDraw = false is set in this._updateViewport() for other images.
+ else {
+ this._needsDraw = false;
+ }
+ },
+
+ /**
+ * Destroy the TiledImage (unload current loaded tiles).
+ */
+ destroy: function() {
+ this.reset();
+
+ if (this.source.destroy) {
+ this.source.destroy();
+ }
+ },
+
+ /**
+ * 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 = 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);
+ 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;
+ } else {
+ if (sameTarget) {
+ return;
+ }
+
+ this._xSpring.springTo(position.x);
+ this._ySpring.springTo(position.y);
+ this._needsDraw = 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);
+ });
+ } catch (e) {
+ $.console.error('[TiledImage.setCroppingPolygons] Cropping polygon format not supported');
+ $.console.error(e);
+ this._croppingPolygons = null;
+ }
+ },
+
+ /**
+ * Resets the cropping polygons, thus next render will remove all cropping
+ * polygon effects.
+ */
+ resetCroppingPolygons: function() {
+ this._croppingPolygons = null;
+ },
+
+ /**
+ * 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;
+ this._needsDraw = true;
+ this._raiseBoundsChange();
+ },
+
+ /**
+ * @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) {
+ 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._raiseBoundsChange();
+ },
+
+ /**
+ * 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();
+ },
+
+ /**
+ * @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) {
+ 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
+ });
+ },
+
+ /**
+ * 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;
+ } else {
+ if (sameTarget) {
+ return;
+ }
+
+ this._scaleSpring.springTo(scale);
+ this._updateForScale();
+ this._needsDraw = 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
+ };
+ },
+
+ /**
+ * @private
+ * @inner
+ * Pretty much every other line in this needs to be documented so it's clear
+ * how each piece of this routine contributes to the drawing process. That's
+ * why there are so many TODO's inside this function.
+ */
+ _updateViewport: function() {
+ this._needsDraw = false;
+ this._tilesLoading = 0;
+ this.loadingCoverage = {};
+
+ // Reset tile's internal drawn state
+ while (this.lastDrawn.length > 0) {
+ var tile = this.lastDrawn.pop();
+ tile.beingDrawn = false;
+ }
+
+ var viewport = this.viewport;
+ var drawArea = this._viewportToTiledImageRectangle(
+ viewport.getBoundsWithMargins(true));
+
+ if (!this.wrapHorizontal && !this.wrapVertical) {
+ var tiledImageBounds = this._viewportToTiledImageRectangle(
+ this.getClippedBounds(true));
+ drawArea = drawArea.intersection(tiledImageBounds);
+ if (drawArea === null) {
+ return;
+ }
+ }
+
+ var levelsInterval = this._getLevelsInterval();
+ var lowestLevel = levelsInterval.lowestLevel;
+ var highestLevel = levelsInterval.highestLevel;
+ var bestTile = null;
+ var haveDrawn = false;
+ var currentTime = $.now();
+
+ // Update any level that will be drawn
+ for (var level = highestLevel; level >= lowestLevel; level--) {
+ var drawLevel = false;
+
+ //Avoid calculations for draw if we have already drawn this
+ var currentRenderPixelRatio = viewport.deltaPixelsFromPointsNoRotate(
+ this.source.getPixelRatio(level),
+ true
+ ).x * this._scaleSpring.current.value;
+
+ if (level === lowestLevel ||
+ (!haveDrawn && currentRenderPixelRatio >= this.minPixelRatio)) {
+ drawLevel = true;
+ haveDrawn = true;
+ } else if (!haveDrawn) {
+ continue;
+ }
+
+ //Perform calculations for draw if we haven't drawn this
+ var targetRenderPixelRatio = viewport.deltaPixelsFromPointsNoRotate(
+ this.source.getPixelRatio(level),
+ false
+ ).x * this._scaleSpring.current.value;
+
+ var targetZeroRatio = 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' tile to load
+ bestTile = this._updateLevel(
+ haveDrawn,
+ drawLevel,
+ level,
+ levelOpacity,
+ levelVisibility,
+ drawArea,
+ currentTime,
+ bestTile
+ );
+
+ // Stop the loop if lower-res tiles would all be covered by
+ // already drawn tiles
+ if (this._providesCoverage(this.coverage, level)) {
+ break;
+ }
+ }
+
+ // Perform the actual drawing
+ this._drawTiles(this.lastDrawn);
+
+ // Load the new 'best' tile
+ if (bestTile && !bestTile.context2D) {
+ this._loadTile(bestTile, currentTime);
+ this._needsDraw = true;
+ this._setFullyLoaded(false);
+ } else {
+ this._setFullyLoaded(this._tilesLoading === 0);
+ }
+ },
+
+ // 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,
+ };
+ },
+
+ /**
+ * 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 - The current "best" tile to draw.
+ */
+ _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);
+ }
+ }
+
+ 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;
+ }
+
+ best = this._updateTile(
+ drawLevel,
+ haveDrawn,
+ flippedX, y,
+ level,
+ levelOpacity,
+ levelVisibility,
+ viewportCenter,
+ numberOfTiles,
+ currentTime,
+ best
+ );
+ }
+ }
+
+ return best;
+ },
+
+ /**
+ * @private
+ * @inner
+ * Update a single tile at a particular resolution level.
+ * @param {Boolean} haveDrawn
+ * @param {Boolean} drawLevel
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} level
+ * @param {Number} levelOpacity
+ * @param {Number} levelVisibility
+ * @param {OpenSeadragon.Point} viewportCenter
+ * @param {Number} numberOfTiles
+ * @param {Number} currentTime
+ * @param {OpenSeadragon.Tile} best - The current "best" tile to draw.
+ */
+ _updateTile: function( haveDrawn, drawLevel, x, y, level, levelOpacity,
+ levelVisibility, viewportCenter, numberOfTiles, currentTime, best){
+
+ var tile = this._getTile(
+ x, y,
+ level,
+ currentTime,
+ numberOfTiles,
+ this._worldWidthCurrent,
+ this._worldHeightCurrent
+ ),
+ 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 best;
+ }
+
+ if ( haveDrawn && !drawTile ) {
+ if ( this._isCovered( this.coverage, level, x, y ) ) {
+ this._setCoverage( this.coverage, level, x, y, true );
+ } else {
+ drawTile = true;
+ }
+ }
+
+ if ( !drawTile ) {
+ return best;
+ }
+
+ this._positionTile(
+ tile,
+ this.source.tileOverlap,
+ this.viewport,
+ viewportCenter,
+ levelVisibility
+ );
+
+ 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.loaded ) {
+ var needsDraw = this._blendTile(
+ tile,
+ x, y,
+ level,
+ levelOpacity,
+ currentTime
+ );
+
+ if ( needsDraw ) {
+ this._needsDraw = true;
+ }
+ } else if ( tile.loading ) {
+ // the tile is already in the download queue
+ this._tilesLoading++;
+ } else if (!loadingCoverage) {
+ best = this._compareTiles( best, tile );
+ }
+
+ return best;
+ },
+
+ /**
+ * @private
+ * @inner
+ * Obtains a tile at the given location.
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} level
+ * @param {Number} time
+ * @param {Number} numTiles
+ * @param {Number} worldWidth
+ * @param {Number} worldHeight
+ * @returns {OpenSeadragon.Tile}
+ */
+ _getTile: function(
+ x, y,
+ level,
+ time,
+ numTiles,
+ worldWidth,
+ worldHeight
+ ) {
+ 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;
+ },
+
+ /**
+ * @private
+ * @inner
+ * Dispatch a job to the ImageLoader to load the Image for a Tile.
+ * @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;
+ }
+ });
+ },
+
+ /**
+ * @private
+ * @inner
+ * Callback fired when a Tile's Image finished downloading.
+ * @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);
+ };
+
+ // Check if we're mid-update; this can happen on IE8 because image load events for
+ // cached images happen immediately there
+ if ( !this._midDraw ) {
+ finish();
+ } else {
+ // Wait until after the update, in case caching unloads any tiles
+ window.setTimeout( finish, 1);
+ }
+ },
+
+ /**
+ * @private
+ * @inner
+ * @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
+ });
+ }
+ _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();
+ },
+
+ /**
+ * @private
+ * @inner
+ * @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;
+
+ 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 ( !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;
+ },
+
+ /**
+ * @private
+ * @inner
+ * 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.
+ *
+ * @param {OpenSeadragon.Tile} tile
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} level
+ * @param {Number} levelOpacity
+ * @param {Number} currentTime
+ * @returns {Boolean}
+ */
+ _blendTile: function( tile, x, y, level, levelOpacity, currentTime ){
+ var 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.alwaysBlend ) {
+ opacity *= levelOpacity;
+ }
+
+ tile.opacity = opacity;
+
+ this.lastDrawn.push( tile );
+
+ if ( opacity === 1 ) {
+ this._setCoverage( this.coverage, level, x, y, true );
+ this._hasOpaqueTile = true;
+ } else if ( deltaTime < blendTimeMillis ) {
+ return true;
+ }
+
+ return false;
+ },
+
+
+ /**
+ * @private
+ * @inner
+ * Determines whether the 'last best' tile for the area is better than the
+ * tile in question.
+ *
+ * @param {OpenSeadragon.Tile} previousBest
+ * @param {OpenSeadragon.Tile} tile
+ * @returns {OpenSeadragon.Tile} The new best tile.
+ */
+ _compareTiles: function( previousBest, tile ) {
+ if ( !previousBest ) {
+ return tile;
+ }
+
+ if ( tile.visibility > previousBest.visibility ) {
+ return tile;
+ } else if ( tile.visibility === previousBest.visibility ) {
+ if ( tile.squaredDistance < previousBest.squaredDistance ) {
+ return tile;
+ }
+ }
+ return previousBest;
+ },
+
+ /**
+ * @private
+ * @inner
+ * Draws a TiledImage.
+ * @param {OpenSeadragon.Tile[]} lastDrawn - An unordered list of Tiles drawn last frame.
+ */
+ _drawTiles: function( lastDrawn ) {
+ if (this.opacity === 0 || (lastDrawn.length === 0 && !this.placeholderFillStyle)) {
+ return;
+ }
+
+ var tile = lastDrawn[0];
+ var useSketch;
+
+ if (tile) {
+ useSketch = this.opacity < 1 ||
+ (this.compositeOperation && this.compositeOperation !== 'source-over') ||
+ (!this._isBottomItem() &&
+ this.source.hasTransparency(tile.context2D, tile.getUrl(), tile.ajaxHeaders, tile.postData));
+ }
+
+ var sketchScale;
+ var sketchTranslate;
+
+ var zoom = this.viewport.getZoom(true);
+ var imageZoom = this.viewportToImageZoom(zoom);
+
+ if (lastDrawn.length > 1 &&
+ imageZoom > this.smoothTileEdgesMinZoom &&
+ !this.iOSDevice &&
+ this.getRotation(true) % 360 === 0 && // TODO: support tile edge smoothing with tiled image rotation.
+ $.supportsCanvas && this.viewer.useCanvas) {
+ // When zoomed in a lot (>100%) the tile edges are visible.
+ // So we have to composite them at ~100% and scale them up together.
+ // Note: Disabled on iOS devices per default as it causes a native crash
+ useSketch = true;
+ sketchScale = tile.getScaleForEdgeSmoothing();
+ sketchTranslate = tile.getTranslationForEdgeSmoothing(sketchScale,
+ this._drawer.getCanvasSize(false),
+ this._drawer.getCanvasSize(true));
+ }
+
+ var bounds;
+ if (useSketch) {
+ if (!sketchScale) {
+ // Except when edge smoothing, we only clean the part of the
+ // sketch canvas we are going to use for performance reasons.
+ bounds = this.viewport.viewportToViewerElementRectangle(
+ this.getClippedBounds(true))
+ .getIntegerBoundingBox();
+
+ if(this._drawer.viewer.viewport.getFlip()) {
+ if (this.viewport.getRotation(true) % 360 !== 0 ||
+ this.getRotation(true) % 360 !== 0) {
+ bounds.x = this._drawer.viewer.container.clientWidth - (bounds.x + bounds.width);
+ }
+ }
+
+ bounds = bounds.times($.pixelDensityRatio);
+ }
+ this._drawer._clear(true, bounds);
+ }
+
+ // When scaling, we must rotate only when blending the sketch canvas to
+ // avoid interpolation
+ if (!sketchScale) {
+ if (this.viewport.getRotation(true) % 360 !== 0) {
+ this._drawer._offsetForRotation({
+ degrees: this.viewport.getRotation(true),
+ useSketch: useSketch
+ });
+ }
+ if (this.getRotation(true) % 360 !== 0) {
+ this._drawer._offsetForRotation({
+ degrees: this.getRotation(true),
+ point: this.viewport.pixelFromPointNoRotate(
+ this._getRotationPoint(true), true),
+ useSketch: useSketch
+ });
+ }
+
+ if (this.viewport.getRotation(true) % 360 === 0 &&
+ this.getRotation(true) % 360 === 0) {
+ if(this._drawer.viewer.viewport.getFlip()) {
+ this._drawer._flip();
+ }
+ }
+ }
+
+ var usedClip = false;
+ if ( this._clip ) {
+ this._drawer.saveContext(useSketch);
+
+ var box = this.imageToViewportRectangle(this._clip, true);
+ box = box.rotate(-this.getRotation(true), this._getRotationPoint(true));
+ var clipRect = this._drawer.viewportToDrawerRectangle(box);
+ if (sketchScale) {
+ clipRect = clipRect.times(sketchScale);
+ }
+ if (sketchTranslate) {
+ clipRect = clipRect.translate(sketchTranslate);
+ }
+ this._drawer.setClip(clipRect, useSketch);
+
+ usedClip = true;
+ }
+
+ if (this._croppingPolygons) {
+ var self = this;
+ this._drawer.saveContext(useSketch);
+ try {
+ var polygons = this._croppingPolygons.map(function (polygon) {
+ return polygon.map(function (coord) {
+ var point = self
+ .imageToViewportCoordinates(coord.x, coord.y, true)
+ .rotate(-self.getRotation(true), self._getRotationPoint(true));
+ var clipPoint = self._drawer.viewportCoordToDrawerCoord(point);
+ if (sketchScale) {
+ clipPoint = clipPoint.times(sketchScale);
+ }
+ if (sketchTranslate) {
+ clipPoint = clipPoint.plus(sketchTranslate);
+ }
+ return clipPoint;
+ });
+ });
+ this._drawer.clipWithPolygons(polygons, useSketch);
+ } catch (e) {
+ $.console.error(e);
+ }
+ usedClip = true;
+ }
+
+ if ( this.placeholderFillStyle && this._hasOpaqueTile === false ) {
+ var placeholderRect = this._drawer.viewportToDrawerRectangle(this.getBounds(true));
+ if (sketchScale) {
+ placeholderRect = placeholderRect.times(sketchScale);
+ }
+ if (sketchTranslate) {
+ placeholderRect = placeholderRect.translate(sketchTranslate);
+ }
+
+ var fillStyle = null;
+ if ( typeof this.placeholderFillStyle === "function" ) {
+ fillStyle = this.placeholderFillStyle(this, this._drawer.context);
+ }
+ else {
+ fillStyle = this.placeholderFillStyle;
+ }
+
+ this._drawer.drawRectangle(placeholderRect, fillStyle, useSketch);
+ }
+
+ var subPixelRoundingRule = determineSubPixelRoundingRule(this.subPixelRoundingForTransparency);
+
+ var shouldRoundPositionAndSize = false;
+
+ if (subPixelRoundingRule === $.SUBPIXEL_ROUNDING_OCCURRENCES.ALWAYS) {
+ shouldRoundPositionAndSize = true;
+ } else if (subPixelRoundingRule === $.SUBPIXEL_ROUNDING_OCCURRENCES.ONLY_AT_REST) {
+ var isAnimating = this.viewer && this.viewer.isAnimating();
+ shouldRoundPositionAndSize = !isAnimating;
+ }
+
+ for (var i = lastDrawn.length - 1; i >= 0; i--) {
+ tile = lastDrawn[ i ];
+ this._drawer.drawTile( tile, this._drawingHandler, useSketch, sketchScale,
+ sketchTranslate, shouldRoundPositionAndSize, this.source );
+ tile.beingDrawn = true;
+
+ if( this.viewer ){
+ /**
+ * - Needs documentation -
+ *
+ * @event tile-drawn
+ * @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( 'tile-drawn', {
+ tiledImage: this,
+ tile: tile
+ });
+ }
+ }
+
+ if ( usedClip ) {
+ this._drawer.restoreContext( useSketch );
+ }
+
+ if (!sketchScale) {
+ if (this.getRotation(true) % 360 !== 0) {
+ this._drawer._restoreRotationChanges(useSketch);
+ }
+ if (this.viewport.getRotation(true) % 360 !== 0) {
+ this._drawer._restoreRotationChanges(useSketch);
+ }
+ }
+
+ if (useSketch) {
+ if (sketchScale) {
+ if (this.viewport.getRotation(true) % 360 !== 0) {
+ this._drawer._offsetForRotation({
+ degrees: this.viewport.getRotation(true),
+ useSketch: false
+ });
+ }
+ if (this.getRotation(true) % 360 !== 0) {
+ this._drawer._offsetForRotation({
+ degrees: this.getRotation(true),
+ point: this.viewport.pixelFromPointNoRotate(
+ this._getRotationPoint(true), true),
+ useSketch: false
+ });
+ }
+ }
+ this._drawer.blendSketch({
+ opacity: this.opacity,
+ scale: sketchScale,
+ translate: sketchTranslate,
+ compositeOperation: this.compositeOperation,
+ bounds: bounds
+ });
+ if (sketchScale) {
+ if (this.getRotation(true) % 360 !== 0) {
+ this._drawer._restoreRotationChanges(false);
+ }
+ if (this.viewport.getRotation(true) % 360 !== 0) {
+ this._drawer._restoreRotationChanges(false);
+ }
+ }
+ }
+
+ if (!sketchScale) {
+ if (this.viewport.getRotation(true) % 360 === 0 &&
+ this.getRotation(true) % 360 === 0) {
+ if(this._drawer.viewer.viewport.getFlip()) {
+ this._drawer._flip();
+ }
+ }
+ }
+
+ this._drawDebugInfo( lastDrawn );
+ },
+
+ /**
+ * @private
+ * @inner
+ * Draws special debug information for a TiledImage if in debug mode.
+ * @param {OpenSeadragon.Tile[]} lastDrawn - An unordered list of Tiles drawn last frame.
+ */
+ _drawDebugInfo: function( lastDrawn ) {
+ if( this.debugMode ) {
+ for ( var i = lastDrawn.length - 1; i >= 0; i-- ) {
+ var tile = lastDrawn[ i ];
+ try {
+ this._drawer.drawDebugInfo(tile, lastDrawn.length, i, this);
+ } catch(e) {
+ $.console.error(e);
+ }
+ }
+ }
+ },
+
+ /**
+ * @private
+ * @inner
+ * 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.
+ *
+ * @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
+ );
+ },
+
+ /**
+ * @private
+ * @inner
+ * 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.
+ *
+ * @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 )
+ );
+ }
+ },
+
+ /**
+ * @private
+ * @inner
+ * Sets whether the given tile provides coverage or not.
+ *
+ * @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;
+ },
+
+ /**
+ * @private
+ * @inner
+ * 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.
+ *
+ * @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 ] = {};
+ }
+});
+
+
+/**
+ * @private
+ * @inner
+ * Defines the value for subpixel rounding to fallback to in case of missing or
+ * invalid value.
+ */
+var DEFAULT_SUBPIXEL_ROUNDING_RULE = $.SUBPIXEL_ROUNDING_OCCURRENCES.NEVER;
+
+/**
+ * @private
+ * @inner
+ * Checks whether the input value is an invalid subpixel rounding enum value.
+ *
+ * @param {SUBPIXEL_ROUNDING_OCCURRENCES} value - The subpixel rounding enum value to check.
+ * @returns {Boolean} Returns true if the input value is none of the expected
+ * {@link SUBPIXEL_ROUNDING_OCCURRENCES.ALWAYS}, {@link SUBPIXEL_ROUNDING_OCCURRENCES.ONLY_AT_REST} or {@link SUBPIXEL_ROUNDING_OCCURRENCES.NEVER} value.
+ */
+function isSubPixelRoundingRuleUnknown(value) {
+ return value !== $.SUBPIXEL_ROUNDING_OCCURRENCES.ALWAYS &&
+ value !== $.SUBPIXEL_ROUNDING_OCCURRENCES.ONLY_AT_REST &&
+ value !== $.SUBPIXEL_ROUNDING_OCCURRENCES.NEVER;
+}
+
+/**
+ * @private
+ * @inner
+ * Ensures the returned value is always a valid subpixel rounding enum value,
+ * defaulting to {@link SUBPIXEL_ROUNDING_OCCURRENCES.NEVER} if input is missing or invalid.
+ *
+ * @param {SUBPIXEL_ROUNDING_OCCURRENCES} value - The subpixel rounding enum value to normalize.
+ * @returns {SUBPIXEL_ROUNDING_OCCURRENCES} Returns a valid subpixel rounding enum value.
+ */
+function normalizeSubPixelRoundingRule(value) {
+ if (isSubPixelRoundingRuleUnknown(value)) {
+ return DEFAULT_SUBPIXEL_ROUNDING_RULE;
+ }
+ return value;
+}
+
+/**
+ * @private
+ * @inner
+ * Ensures the returned value is always a valid subpixel rounding enum value,
+ * defaulting to 'NEVER' if input is missing or invalid.
+ *
+ * @param {Object} subPixelRoundingRules - A subpixel rounding enum values dictionary [{@link BROWSERS}] --> {@link SUBPIXEL_ROUNDING_OCCURRENCES}.
+ * @returns {SUBPIXEL_ROUNDING_OCCURRENCES} Returns the determined subpixel rounding enum value for the
+ * current browser.
+ */
+function determineSubPixelRoundingRule(subPixelRoundingRules) {
+ if (typeof subPixelRoundingRules === 'number') {
+ return normalizeSubPixelRoundingRule(subPixelRoundingRules);
+ }
+
+ if (!subPixelRoundingRules || !$.Browser) {
+ return DEFAULT_SUBPIXEL_ROUNDING_RULE;
+ }
+
+ var subPixelRoundingRule = subPixelRoundingRules[$.Browser.vendor];
+
+ if (isSubPixelRoundingRuleUnknown(subPixelRoundingRule)) {
+ subPixelRoundingRule = subPixelRoundingRules['*'];
+ }
+
+ return normalizeSubPixelRoundingRule(subPixelRoundingRule);
+}
+
+}( OpenSeadragon ));
+
+/*
+ * OpenSeadragon - TileCache
+ *
+ * Copyright (C) 2009 CodePlex Foundation
+ * Copyright (C) 2010-2022 OpenSeadragon contributors
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ * - Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ *
+ * - Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * - Neither the name of CodePlex Foundation nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+ * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function( $ ){
+
+// private class
+var TileRecord = function( options ) {
+ $.console.assert( options, "[TileCache.cacheTile] options is required" );
+ $.console.assert( options.tile, "[TileCache.cacheTile] options.tile is required" );
+ $.console.assert( options.tiledImage, "[TileCache.cacheTile] options.tiledImage is required" );
+ this.tile = options.tile;
+ this.tiledImage = options.tiledImage;
+};
+
+// private class
+var ImageRecord = function(options) {
+ $.console.assert( options, "[ImageRecord] options is required" );
+ $.console.assert( options.data, "[ImageRecord] options.data is required" );
+ this._tiles = [];
+
+ options.create.apply(null, [this, options.data, options.ownerTile]);
+ this._destroyImplementation = options.destroy.bind(null, this);
+ this.getImage = options.getImage.bind(null, this);
+ this.getData = options.getData.bind(null, this);
+ this.getRenderedContext = options.getRenderedContext.bind(null, this);
+};
+
+ImageRecord.prototype = {
+ destroy: function() {
+ this._destroyImplementation();
+ this._tiles = null;
+ },
+
+ addTile: function(tile) {
+ $.console.assert(tile, '[ImageRecord.addTile] tile is required');
+ this._tiles.push(tile);
+ },
+
+ removeTile: function(tile) {
+ for (var i = 0; i < this._tiles.length; i++) {
+ if (this._tiles[i] === tile) {
+ this._tiles.splice(i, 1);
+ return;
+ }
+ }
+
+ $.console.warn('[ImageRecord.removeTile] trying to remove unknown tile', tile);
+ },
+
+ getTileCount: function() {
+ return this._tiles.length;
+ }
+};
+
+/**
+ * @class TileCache
+ * @memberof OpenSeadragon
+ * @classdesc Stores all the tiles displayed in a {@link OpenSeadragon.Viewer}.
+ * You generally won't have to interact with the TileCache directly.
+ * @param {Object} options - Configuration for this TileCache.
+ * @param {Number} [options.maxImageCacheCount] - See maxImageCacheCount in
+ * {@link OpenSeadragon.Options} for details.
+ */
+$.TileCache = function( options ) {
+ options = options || {};
+
+ this._maxImageCacheCount = options.maxImageCacheCount || $.DEFAULT_SETTINGS.maxImageCacheCount;
+ this._tilesLoaded = [];
+ this._imagesLoaded = [];
+ this._imagesLoadedCount = 0;
+};
+
+/** @lends OpenSeadragon.TileCache.prototype */
+$.TileCache.prototype = {
+ /**
+ * @returns {Number} The total number of tiles that have been loaded by
+ * this TileCache.
+ */
+ numTilesLoaded: function() {
+ return this._tilesLoaded.length;
+ },
+
+ /**
+ * Caches the specified tile, removing an old tile if necessary to stay under the
+ * maxImageCacheCount specified on construction. Note that if multiple tiles reference
+ * the same image, there may be more tiles than maxImageCacheCount; the goal is to keep
+ * the number of images below that number. Note, as well, that even the number of images
+ * may temporarily surpass that number, but should eventually come back down to the max specified.
+ * @param {Object} options - Tile info.
+ * @param {OpenSeadragon.Tile} options.tile - The tile to cache.
+ * @param {String} options.tile.cacheKey - The unique key used to identify this tile in the cache.
+ * @param {Image} options.image - The image of the tile to cache.
+ * @param {OpenSeadragon.TiledImage} options.tiledImage - The TiledImage that owns that tile.
+ * @param {Number} [options.cutoff=0] - If adding this tile goes over the cache max count, this
+ * function will release an old tile. The cutoff option specifies a tile level at or below which
+ * tiles will not be released.
+ */
+ cacheTile: function( options ) {
+ $.console.assert( options, "[TileCache.cacheTile] options is required" );
+ $.console.assert( options.tile, "[TileCache.cacheTile] options.tile is required" );
+ $.console.assert( options.tile.cacheKey, "[TileCache.cacheTile] options.tile.cacheKey is required" );
+ $.console.assert( options.tiledImage, "[TileCache.cacheTile] options.tiledImage is required" );
+
+ var cutoff = options.cutoff || 0;
+ var insertionIndex = this._tilesLoaded.length;
+
+ var imageRecord = this._imagesLoaded[options.tile.cacheKey];
+ if (!imageRecord) {
+
+ if (!options.data) {
+ $.console.error("[TileCache.cacheTile] options.image was renamed to options.data. '.image' attribute " +
+ "has been deprecated and will be removed in the future.");
+ options.data = options.image;
+ }
+
+ $.console.assert( options.data, "[TileCache.cacheTile] options.data is required to create an ImageRecord" );
+ imageRecord = this._imagesLoaded[options.tile.cacheKey] = new ImageRecord({
+ data: options.data,
+ ownerTile: options.tile,
+ create: options.tiledImage.source.createTileCache,
+ destroy: options.tiledImage.source.destroyTileCache,
+ getImage: options.tiledImage.source.getTileCacheDataAsImage,
+ getData: options.tiledImage.source.getTileCacheData,
+ getRenderedContext: options.tiledImage.source.getTileCacheDataAsContext2D,
+ });
+
+ this._imagesLoadedCount++;
+ }
+
+ imageRecord.addTile(options.tile);
+ options.tile.cacheImageRecord = imageRecord;
+
+ // Note that just because we're unloading a tile doesn't necessarily mean
+ // we're unloading an image. With repeated calls it should sort itself out, though.
+ if ( this._imagesLoadedCount > this._maxImageCacheCount ) {
+ var worstTile = null;
+ var worstTileIndex = -1;
+ var worstTileRecord = null;
+ var prevTile, worstTime, worstLevel, prevTime, prevLevel, prevTileRecord;
+
+ for ( var i = this._tilesLoaded.length - 1; i >= 0; i-- ) {
+ prevTileRecord = this._tilesLoaded[ i ];
+ prevTile = prevTileRecord.tile;
+
+ if ( prevTile.level <= cutoff || prevTile.beingDrawn ) {
+ continue;
+ } else if ( !worstTile ) {
+ worstTile = prevTile;
+ worstTileIndex = i;
+ worstTileRecord = prevTileRecord;
+ continue;
+ }
+
+ prevTime = prevTile.lastTouchTime;
+ worstTime = worstTile.lastTouchTime;
+ prevLevel = prevTile.level;
+ worstLevel = worstTile.level;
+
+ if ( prevTime < worstTime ||
+ ( prevTime === worstTime && prevLevel > worstLevel ) ) {
+ worstTile = prevTile;
+ worstTileIndex = i;
+ worstTileRecord = prevTileRecord;
+ }
+ }
+
+ if ( worstTile && worstTileIndex >= 0 ) {
+ this._unloadTile(worstTileRecord);
+ insertionIndex = worstTileIndex;
+ }
+ }
+
+ this._tilesLoaded[ insertionIndex ] = new TileRecord({
+ tile: options.tile,
+ tiledImage: options.tiledImage
+ });
+ },
+
+ /**
+ * Clears all tiles associated with the specified tiledImage.
+ * @param {OpenSeadragon.TiledImage} tiledImage
+ */
+ clearTilesFor: function( tiledImage ) {
+ $.console.assert(tiledImage, '[TileCache.clearTilesFor] tiledImage is required');
+ var tileRecord;
+ for ( var i = 0; i < this._tilesLoaded.length; ++i ) {
+ tileRecord = this._tilesLoaded[ i ];
+ if ( tileRecord.tiledImage === tiledImage ) {
+ this._unloadTile(tileRecord);
+ this._tilesLoaded.splice( i, 1 );
+ i--;
+ }
+ }
+ },
+
+ // private
+ getImageRecord: function(cacheKey) {
+ $.console.assert(cacheKey, '[TileCache.getImageRecord] cacheKey is required');
+ return this._imagesLoaded[cacheKey];
+ },
+
+ // private
+ _unloadTile: function(tileRecord) {
+ $.console.assert(tileRecord, '[TileCache._unloadTile] tileRecord is required');
+ var tile = tileRecord.tile;
+ var tiledImage = tileRecord.tiledImage;
+
+ tile.unload();
+ tile.cacheImageRecord = null;
+
+ var imageRecord = this._imagesLoaded[tile.cacheKey];
+ imageRecord.removeTile(tile);
+ if (!imageRecord.getTileCount()) {
+ imageRecord.destroy();
+ delete this._imagesLoaded[tile.cacheKey];
+ this._imagesLoadedCount--;
+ }
+
+ /**
+ * Triggered when a tile has just been unloaded from memory.
+ *
+ * @event tile-unloaded
+ * @memberof OpenSeadragon.Viewer
+ * @type {object}
+ * @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the unloaded tile.
+ * @property {OpenSeadragon.Tile} tile - The tile which has been unloaded.
+ */
+ tiledImage.viewer.raiseEvent("tile-unloaded", {
+ tile: tile,
+ tiledImage: tiledImage
+ });
+ }
+};
+
+}( OpenSeadragon ));
+
+/*
+ * OpenSeadragon - World
+ *
+ * Copyright (C) 2009 CodePlex Foundation
+ * Copyright (C) 2010-2022 OpenSeadragon contributors
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ * - Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ *
+ * - Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * - Neither the name of CodePlex Foundation nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+ * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function( $ ){
+
+/**
+ * @class World
+ * @memberof OpenSeadragon
+ * @extends OpenSeadragon.EventSource
+ * @classdesc Keeps track of all of the tiled images in the scene.
+ * @param {Object} options - World options.
+ * @param {OpenSeadragon.Viewer} options.viewer - The Viewer that owns this World.
+ **/
+$.World = function( options ) {
+ var _this = this;
+
+ $.console.assert( options.viewer, "[World] options.viewer is required" );
+
+ $.EventSource.call( this );
+
+ this.viewer = options.viewer;
+ this._items = [];
+ this._needsDraw = false;
+ this._autoRefigureSizes = true;
+ this._needsSizesFigured = false;
+ this._delegatedFigureSizes = function(event) {
+ if (_this._autoRefigureSizes) {
+ _this._figureSizes();
+ } else {
+ _this._needsSizesFigured = true;
+ }
+ };
+
+ this._figureSizes();
+};
+
+$.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.World.prototype */{
+ /**
+ * Add the specified item.
+ * @param {OpenSeadragon.TiledImage} item - The item to add.
+ * @param {Number} [options.index] - Index for the item. If not specified, goes at the top.
+ * @fires OpenSeadragon.World.event:add-item
+ * @fires OpenSeadragon.World.event:metrics-change
+ */
+ addItem: function( item, options ) {
+ $.console.assert(item, "[World.addItem] item is required");
+ $.console.assert(item instanceof $.TiledImage, "[World.addItem] only TiledImages supported at this time");
+
+ options = options || {};
+ if (options.index !== undefined) {
+ var index = Math.max(0, Math.min(this._items.length, options.index));
+ this._items.splice(index, 0, item);
+ } else {
+ this._items.push( item );
+ }
+
+ if (this._autoRefigureSizes) {
+ this._figureSizes();
+ } else {
+ this._needsSizesFigured = true;
+ }
+
+ this._needsDraw = true;
+
+ item.addHandler('bounds-change', this._delegatedFigureSizes);
+ item.addHandler('clip-change', this._delegatedFigureSizes);
+
+ /**
+ * Raised when an item is added to the World.
+ * @event add-item
+ * @memberOf OpenSeadragon.World
+ * @type {object}
+ * @property {OpenSeadragon.Viewer} eventSource - A reference to the World which raised the event.
+ * @property {OpenSeadragon.TiledImage} item - The item that has been added.
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.raiseEvent( 'add-item', {
+ item: item
+ } );
+ },
+
+ /**
+ * Get the item at the specified index.
+ * @param {Number} index - The item's index.
+ * @returns {OpenSeadragon.TiledImage} The item at the specified index.
+ */
+ getItemAt: function( index ) {
+ $.console.assert(index !== undefined, "[World.getItemAt] index is required");
+ return this._items[ index ];
+ },
+
+ /**
+ * Get the index of the given item or -1 if not present.
+ * @param {OpenSeadragon.TiledImage} item - The item.
+ * @returns {Number} The index of the item or -1 if not present.
+ */
+ getIndexOfItem: function( item ) {
+ $.console.assert(item, "[World.getIndexOfItem] item is required");
+ return $.indexOf( this._items, item );
+ },
+
+ /**
+ * @returns {Number} The number of items used.
+ */
+ getItemCount: function() {
+ return this._items.length;
+ },
+
+ /**
+ * Change the index of a item so that it appears over or under others.
+ * @param {OpenSeadragon.TiledImage} item - The item to move.
+ * @param {Number} index - The new index.
+ * @fires OpenSeadragon.World.event:item-index-change
+ */
+ setItemIndex: function( item, index ) {
+ $.console.assert(item, "[World.setItemIndex] item is required");
+ $.console.assert(index !== undefined, "[World.setItemIndex] index is required");
+
+ var oldIndex = this.getIndexOfItem( item );
+
+ if ( index >= this._items.length ) {
+ throw new Error( "Index bigger than number of layers." );
+ }
+
+ if ( index === oldIndex || oldIndex === -1 ) {
+ return;
+ }
+
+ this._items.splice( oldIndex, 1 );
+ this._items.splice( index, 0, item );
+ this._needsDraw = true;
+
+ /**
+ * Raised when the order of the indexes has been changed.
+ * @event item-index-change
+ * @memberOf OpenSeadragon.World
+ * @type {object}
+ * @property {OpenSeadragon.World} eventSource - A reference to the World which raised the event.
+ * @property {OpenSeadragon.TiledImage} item - The item whose index has
+ * been changed
+ * @property {Number} previousIndex - The previous index of the item
+ * @property {Number} newIndex - The new index of the item
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.raiseEvent( 'item-index-change', {
+ item: item,
+ previousIndex: oldIndex,
+ newIndex: index
+ } );
+ },
+
+ /**
+ * Remove an item.
+ * @param {OpenSeadragon.TiledImage} item - The item to remove.
+ * @fires OpenSeadragon.World.event:remove-item
+ * @fires OpenSeadragon.World.event:metrics-change
+ */
+ removeItem: function( item ) {
+ $.console.assert(item, "[World.removeItem] item is required");
+
+ var index = $.indexOf(this._items, item );
+ if ( index === -1 ) {
+ return;
+ }
+
+ item.removeHandler('bounds-change', this._delegatedFigureSizes);
+ item.removeHandler('clip-change', this._delegatedFigureSizes);
+ item.destroy();
+ this._items.splice( index, 1 );
+ this._figureSizes();
+ this._needsDraw = true;
+ this._raiseRemoveItem(item);
+ },
+
+ /**
+ * Remove all items.
+ * @fires OpenSeadragon.World.event:remove-item
+ * @fires OpenSeadragon.World.event:metrics-change
+ */
+ removeAll: function() {
+ // We need to make sure any pending images are canceled so the world items don't get messed up
+ this.viewer._cancelPendingImages();
+ var item;
+ var i;
+ for (i = 0; i < this._items.length; i++) {
+ item = this._items[i];
+ item.removeHandler('bounds-change', this._delegatedFigureSizes);
+ item.removeHandler('clip-change', this._delegatedFigureSizes);
+ item.destroy();
+ }
+
+ var removedItems = this._items;
+ this._items = [];
+ this._figureSizes();
+ this._needsDraw = true;
+
+ for (i = 0; i < removedItems.length; i++) {
+ item = removedItems[i];
+ this._raiseRemoveItem(item);
+ }
+ },
+
+ /**
+ * Clears all tiles and triggers updates for all items.
+ */
+ resetItems: function() {
+ for ( var i = 0; i < this._items.length; i++ ) {
+ this._items[i].reset();
+ }
+ },
+
+ /**
+ * Updates (i.e. animates bounds of) all items.
+ */
+ update: function() {
+ var animated = false;
+ for ( var i = 0; i < this._items.length; i++ ) {
+ animated = this._items[i].update() || animated;
+ }
+
+ return animated;
+ },
+
+ /**
+ * Draws all items.
+ */
+ draw: function() {
+ for ( var i = 0; i < this._items.length; i++ ) {
+ this._items[i].draw();
+ }
+
+ this._needsDraw = false;
+ },
+
+ /**
+ * @returns {Boolean} true if any items need updating.
+ */
+ needsDraw: function() {
+ for ( var i = 0; i < this._items.length; i++ ) {
+ if ( this._items[i].needsDraw() ) {
+ return true;
+ }
+ }
+ return this._needsDraw;
+ },
+
+ /**
+ * @returns {OpenSeadragon.Rect} The smallest rectangle that encloses all items, in viewport coordinates.
+ */
+ getHomeBounds: function() {
+ return this._homeBounds.clone();
+ },
+
+ /**
+ * To facilitate zoom constraints, we keep track of the pixel density of the
+ * densest item in the World (i.e. the item whose content size to viewport size
+ * ratio is the highest) and save it as this "content factor".
+ * @returns {Number} the number of content units per viewport unit.
+ */
+ getContentFactor: function() {
+ return this._contentFactor;
+ },
+
+ /**
+ * As a performance optimization, setting this flag to false allows the bounds-change event handler
+ * on tiledImages to skip calculations on the world bounds. If a lot of images are going to be positioned in
+ * rapid succession, this is a good idea. When finished, setAutoRefigureSizes should be called with true
+ * or the system may behave oddly.
+ * @param {Boolean} [value] The value to which to set the flag.
+ */
+ setAutoRefigureSizes: function(value) {
+ this._autoRefigureSizes = value;
+ if (value & this._needsSizesFigured) {
+ this._figureSizes();
+ this._needsSizesFigured = false;
+ }
+ },
+
+ /**
+ * Arranges all of the TiledImages with the specified settings.
+ * @param {Object} options - Specifies how to arrange.
+ * @param {Boolean} [options.immediately=false] - Whether to animate to the new arrangement.
+ * @param {String} [options.layout] - See collectionLayout in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.rows] - See collectionRows in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.columns] - See collectionColumns in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.tileSize] - See collectionTileSize in {@link OpenSeadragon.Options}.
+ * @param {Number} [options.tileMargin] - See collectionTileMargin in {@link OpenSeadragon.Options}.
+ * @fires OpenSeadragon.World.event:metrics-change
+ */
+ arrange: function(options) {
+ options = options || {};
+ var immediately = options.immediately || false;
+ var layout = options.layout || $.DEFAULT_SETTINGS.collectionLayout;
+ var rows = options.rows || $.DEFAULT_SETTINGS.collectionRows;
+ var columns = options.columns || $.DEFAULT_SETTINGS.collectionColumns;
+ var tileSize = options.tileSize || $.DEFAULT_SETTINGS.collectionTileSize;
+ var tileMargin = options.tileMargin || $.DEFAULT_SETTINGS.collectionTileMargin;
+ var increment = tileSize + tileMargin;
+ var wrap;
+ if (!options.rows && columns) {
+ wrap = columns;
+ } else {
+ wrap = Math.ceil(this._items.length / rows);
+ }
+ var x = 0;
+ var y = 0;
+ var item, box, width, height, position;
+
+ this.setAutoRefigureSizes(false);
+ for (var i = 0; i < this._items.length; i++) {
+ if (i && (i % wrap) === 0) {
+ if (layout === 'horizontal') {
+ y += increment;
+ x = 0;
+ } else {
+ x += increment;
+ y = 0;
+ }
+ }
+
+ item = this._items[i];
+ box = item.getBounds();
+ if (box.width > box.height) {
+ width = tileSize;
+ } else {
+ width = tileSize * (box.width / box.height);
+ }
+
+ height = width * (box.height / box.width);
+ position = new $.Point(x + ((tileSize - width) / 2),
+ y + ((tileSize - height) / 2));
+
+ item.setPosition(position, immediately);
+ item.setWidth(width, immediately);
+
+ if (layout === 'horizontal') {
+ x += increment;
+ } else {
+ y += increment;
+ }
+ }
+ this.setAutoRefigureSizes(true);
+ },
+
+ // private
+ _figureSizes: function() {
+ var oldHomeBounds = this._homeBounds ? this._homeBounds.clone() : null;
+ var oldContentSize = this._contentSize ? this._contentSize.clone() : null;
+ var oldContentFactor = this._contentFactor || 0;
+
+ if (!this._items.length) {
+ this._homeBounds = new $.Rect(0, 0, 1, 1);
+ this._contentSize = new $.Point(1, 1);
+ this._contentFactor = 1;
+ } else {
+ var item = this._items[0];
+ var bounds = item.getBounds();
+ this._contentFactor = item.getContentSize().x / bounds.width;
+ var clippedBounds = item.getClippedBounds().getBoundingBox();
+ var left = clippedBounds.x;
+ var top = clippedBounds.y;
+ var right = clippedBounds.x + clippedBounds.width;
+ var bottom = clippedBounds.y + clippedBounds.height;
+ for (var i = 1; i < this._items.length; i++) {
+ item = this._items[i];
+ bounds = item.getBounds();
+ this._contentFactor = Math.max(this._contentFactor,
+ item.getContentSize().x / bounds.width);
+ clippedBounds = item.getClippedBounds().getBoundingBox();
+ left = Math.min(left, clippedBounds.x);
+ top = Math.min(top, clippedBounds.y);
+ right = Math.max(right, clippedBounds.x + clippedBounds.width);
+ bottom = Math.max(bottom, clippedBounds.y + clippedBounds.height);
+ }
+
+ this._homeBounds = new $.Rect(left, top, right - left, bottom - top);
+ this._contentSize = new $.Point(
+ this._homeBounds.width * this._contentFactor,
+ this._homeBounds.height * this._contentFactor);
+ }
+
+ if (this._contentFactor !== oldContentFactor ||
+ !this._homeBounds.equals(oldHomeBounds) ||
+ !this._contentSize.equals(oldContentSize)) {
+ /**
+ * Raised when the home bounds or content factor change.
+ * @event metrics-change
+ * @memberOf OpenSeadragon.World
+ * @type {object}
+ * @property {OpenSeadragon.World} eventSource - A reference to the World which raised the event.
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.raiseEvent('metrics-change', {});
+ }
+ },
+
+ // private
+ _raiseRemoveItem: function(item) {
+ /**
+ * Raised when an item is removed.
+ * @event remove-item
+ * @memberOf OpenSeadragon.World
+ * @type {object}
+ * @property {OpenSeadragon.World} eventSource - A reference to the World which raised the event.
+ * @property {OpenSeadragon.TiledImage} item - The item's underlying item.
+ * @property {?Object} userData - Arbitrary subscriber-defined object.
+ */
+ this.raiseEvent( 'remove-item', { item: item } );
+ }
+});
+
+}( OpenSeadragon ));
+
+//# sourceMappingURL=openseadragon.js.map
\ No newline at end of file
diff --git a/siteTheme-Bahn-ng/site/assets/js/openseadragon-4.1.0/openseadragon.js.map b/siteTheme-Bahn-ng/site/assets/js/openseadragon-4.1.0/openseadragon.js.map
new file mode 100644
index 0000000..e69de29
diff --git a/siteTheme-Bahn-ng/site/assets/js/openseadragon-4.1.0/openseadragon.min.js b/siteTheme-Bahn-ng/site/assets/js/openseadragon-4.1.0/openseadragon.min.js
new file mode 100644
index 0000000..e69de29
diff --git a/siteTheme-Bahn-ng/site/assets/js/openseadragon-4.1.0/openseadragon.min.js.map b/siteTheme-Bahn-ng/site/assets/js/openseadragon-4.1.0/openseadragon.min.js.map
new file mode 100644
index 0000000..e69de29
diff --git a/siteTheme-Bahn-ng/site/assets/js/openseadragon.js b/siteTheme-Bahn-ng/site/assets/js/openseadragon.js
new file mode 100644
index 0000000..b51a07f
--- /dev/null
+++ b/siteTheme-Bahn-ng/site/assets/js/openseadragon.js
@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const imageDivs = document.querySelectorAll('.imageblock.zoomable');
+ var i = 1;
+ imageDivs.forEach(imageDiv => {
+
+ const imageUrl = imageDiv.querySelector('div img').getAttribute("src");
+ imageDiv.innerHTML = '';
+
+ OpenSeadragon({
+ id: "openseadragon"+i,
+ prefixUrl: toRoot+'js/openseadragon-4.1.0/images/',
+ tileSources: {
+ type: 'image',
+ url: imageUrl
+ }
+ });
+ console.log(toRoot);
+ i = i+1;
+ });
+});
diff --git a/siteTheme-Bahn-ng/site/groovy/menu.groovy b/siteTheme-Bahn-ng/site/groovy/menu.groovy
index 419f9e8..2cd04dd 100644
--- a/siteTheme-Bahn-ng/site/groovy/menu.groovy
+++ b/siteTheme-Bahn-ng/site/groovy/menu.groovy
@@ -13,7 +13,8 @@ try {
order: page['jbake-order'] as Integer,
filename: page['filename'],
uri: page['uri'],
- children: []
+ children: [],
+ date: page['date']
]
}
}
diff --git a/siteTheme-Bahn-ng/site/templates/footer.gsp b/siteTheme-Bahn-ng/site/templates/footer.gsp
index 472be9d..bb208ee 100644
--- a/siteTheme-Bahn-ng/site/templates/footer.gsp
+++ b/siteTheme-Bahn-ng/site/templates/footer.gsp
@@ -13,27 +13,27 @@