mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-21 20:56:09 +03:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into pr/2258

Browse Source
This commit is contained in:
Mark Salsbery 2023-07-31 15:25:34 -07:00
commit 98fa5ff5c6
54 changed files with 2292 additions and 6974 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.browserslistrc Normal file
View File

@ -0,0 +1 @@
defaults

8
.eslintrc.json
View File

@ -1,14 +1,16 @@
{
"root": true,
"plugins": ["compat"],
"extends": [
"eslint:recommended"
"eslint:recommended",
"plugin:compat/recommended"
],
"env": {
"es6": false,
"es6": true,
"browser": true
},
"parserOptions": {
"ecmaVersion": 5,
"ecmaVersion": 6,
"sourceType": "script",
"ecmaFeatures": {
"globalReturn": false,

6
.travis.yml
View File

@ -1,6 +1,10 @@
# Specify dist until Travis CI default Runner OS updates to one
# with glibc version required by newer Node versions
# See: https://github.com/nodejs/node/issues/42351#issuecomment-1068424442
dist: jammy
language: node_js
sudo: false
node_js:
- "16.14.2"
- lts/*
before_install:
- npm install -g grunt-cli

5
Gruntfile.js
View File

@ -161,9 +161,12 @@ module.exports = function(grunt) {
normal: {
options: {
urls: [ "http://localhost:8000/test/test.html" ],
timeout: 10000
timeout: 10000,
puppeteer: {
headless: 'new'
}
},
},
coverage: {
options: {
urls: [ "http://localhost:8000/test/coverage.html" ],

2
LICENSE.txt
View File

@ -1,5 +1,5 @@
Copyright (C) 2009 CodePlex Foundation
Copyright (C) 2010-2022 OpenSeadragon contributors
Copyright (C) 2010-2023 OpenSeadragon contributors
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

39
changelog.txt
View File

@ -1,9 +1,42 @@
OPENSEADRAGON CHANGELOG
=======================
3.2.0: (in progress...)
5.0.0: (in progress...)
* NEW BEHAVIOR: Setting the viewport rotation now animates by default (pass false for the new immediately parameter to disable) (#2136 @jonasengelmann)
* BREAKING CHANGE: Dropped support for IE11 (#2300, #2361 @AndrewADev)
* DEPRECATION: The OpenSeadragon.createCallback function is no longer recommended (#2367 @akansjain)
* Fixed: Sometimes if the viewport was flipped and the user zoomed in far enough, it would flip back (#2364 @SebDelile)
* Test improvements (#2382 @AndrewADev)
4.1.0:
* NEW BEHAVIOR: When `navigatorRotate` is false, while the navigator image doesn't rotate, the red outline now does (#2356 @lcl45)
* The viewer no longer emits `canvas-key` events for both keydown and keypress events; canvas-key is now just for keydown, and the new `canvas-key-press` is for keypress (#2270 @hrghauri)
* You can now specify a priority when calling addHandler, to control when your event handler gets called relative to others (#2273 @Aiosa)
* Added tileRetryMax and tileRetryDelay options, so the viewer can retry loading failed tiles (#2238 @Ughuuu @paaddyy, #2334 @Ughuuu @Titan21)
* All of the viewers keyboard handling is now in response to keydown events (it used to be split between keydown and keypress) (#2291 @MohitBansal321)
* Added `canvas-focus` and `canvas-blur` events to Viewer (#2301 @MohitBansal321)
* You can now more easily add custom buttons to the viewer (#2306 @MohitBansal321)
* The fitBounds function now takes zoom constraints into account (#2293 @pearcetm)
* The viewer now has an `after-resize` event what happens after the viewport bounds have been updated, to complement the `resize` event which happens before (#2317 @pearcetm)
* IIIFTileSource now uses resolution level dimensions provided in the info.json "sizes" field for more accurate tile requests (#2337 @ruven)
* Added setAjaxHeaders method to Viewer and TiledImage (#2346 @uschmidt83)
* Improved documentation (#2297 @KevinBritten)
* Fixed: The `tile-loaded` event's completionCallback could be called more than once in some circumstances (#2282 @Aiosa, @pearcetm)
* Fixed: Navigator display rectangle was off if the page had `box-sizing: border-box` (#2276 @ambujsahu81)
* Fixed: Code that required identifying functions would fail for async functions (#2273 @Aiosa)
* Fixed: Reference strip click detection was not accurate for long reference strips (#2280 @damonsson)
* Fixed: Translation problems in some circumstances with cropping polygons enabled (#2316 @pearcetm)
* Fixed: The navigator area rectangle would grow larger when you zoom in very far (#2318 @donotloveshampo)
* Fixed: JSON with embedded XML was being incorrectly identified as XML (#2328 @craigberry)
* Fixed: Touch/pinch rotate was not working properly on some platforms (#2324 @rsimon, @pearcetm)
* Fixed: Navigator rotation didn't honor `immediately` parameter (#2333 @robertjcolley)
* Fixed: The navigator didn't update for its new size in certain circumstances (#2347 @pearcetm)
4.0.0:
* NEW BEHAVIOR: Setting the viewport rotation now animates by default (pass true for the new `immediately` parameter to disable) (#2136 @jonasengelmann)
* NEW BEHAVIOR: The auto resize now takes both width and height into account when scaling the contents proportionally to the viewer (#2256 @pearcetm)
* DEPRECATION: Don't access the viewport's degrees property directly anymore; instead use setRotation and getRotation (#2136 @jonasengelmann)
* New gesture: Double-click and drag to zoom (on by default for touch) (#2225 @HamzaTatheer)
* You can now provide a pivot point when rotating the viewport (#2233 #2253 @pearcetm)
@ -13,8 +46,10 @@ OPENSEADRAGON CHANGELOG
* We now delegate tile fetching and caching to the TileSource, to allow for custom tile formats (#2148 @Aiosa)
* Added support for dynamic URLs from tile sources (#2247 @JohnReagan)
* The viewer now emits before-destroy and destroy events (#2239 @pearcetm)
* Auto resize detection is now more efficient (#2256 @pearcetm)
* Improved documentation (#2211 @shyamkumaryadav)
* Fixed: Cropping tiled images with polygons was broken (#2183 @altert)
* Fixed: Boundary constraints were wrong when the viewport was rotated (#2249 @pearcetm)
* Fixed: IIIF tile sizes would be calculated wrong on rare occasions (#2206 @filak)
* Fixed: Disabling buttons only changed their appearance, but they were still clickable (#2187 @pearcetm)
* Fixed: ImageTileSource produced an error having to do with getTileHashKey (#2190 @Aiosa)

7470
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@ -1,6 +1,6 @@
{
"name": "openseadragon",
"version": "3.1.0",
"version": "4.1.0",
"description": "Provides a smooth, zoomable user interface for HTML/Javascript.",
"keywords": [
"image",
@ -29,19 +29,20 @@
"url": "https://github.com/openseadragon/openseadragon.git"
},
"devDependencies": {
"grunt": "^1.4.1",
"grunt-contrib-clean": "^2.0.0",
"eslint-plugin-compat": "^4.1.2",
"grunt": "^1.6.1",
"grunt-contrib-clean": "^2.0.1",
"grunt-contrib-compress": "^2.0.0",
"grunt-contrib-concat": "^2.0.0",
"grunt-contrib-concat": "^2.1.0",
"grunt-contrib-connect": "^3.0.0",
"grunt-contrib-qunit": "^6.2.0",
"grunt-contrib-qunit": "^7.0.1",
"grunt-contrib-uglify": "^5.0.1",
"grunt-contrib-watch": "^1.1.0",
"grunt-eslint": "^24.0.0",
"grunt-eslint": "^24.0.1",
"grunt-git-describe": "^2.4.4",
"grunt-istanbul": "^0.8.0",
"grunt-text-replace": "^0.4.0",
"qunitjs": "2.4.1"
"qunit": "^2.19.4"
},
"scripts": {
"test": "grunt test",

2
src/button.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Button
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

13
src/buttongroup.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - ButtonGroup
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -112,6 +112,17 @@ $.ButtonGroup = function( options ) {
/** @lends OpenSeadragon.ButtonGroup.prototype */
$.ButtonGroup.prototype = {
/**
* Adds the given button to this button group.
*
* @function
* @param {OpenSeadragon.Button} button
*/
addButton: function( button ){
this.buttons.push(button);
this.element.appendChild(button.element);
},
/**
* TODO: Figure out why this is used on the public API and if a more useful
* api can be created.

2
src/control.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Control
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/controldock.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - ControlDock
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/displayrectangle.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - DisplayRect
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/drawer.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Drawer
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/dzitilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - DziTileSource
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

34
src/eventsource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - EventSource
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -58,7 +58,7 @@ $.EventSource.prototype = {
/**
* Add an event handler to be triggered only once (or a given number of times)
* for a given event.
* for a given event. It is not removable with removeHandler().
* @function
* @param {String} eventName - Name of event to register.
* @param {OpenSeadragon.EventHandler} handler - Function to call when event
@ -67,8 +67,9 @@ $.EventSource.prototype = {
* to the handler.
* @param {Number} [times=1] - The number of times to handle the event
* before removing it.
* @param {Number} [priority=0] - Handler priority. By default, all priorities are 0. Higher number = priority.
*/
addOnceHandler: function(eventName, handler, userData, times) {
addOnceHandler: function(eventName, handler, userData, times, priority) {
var self = this;
times = times || 1;
var count = 0;
@ -77,9 +78,9 @@ $.EventSource.prototype = {
if (count === times) {
self.removeHandler(eventName, onceHandler);
}
handler(event);
return handler(event);
};
this.addHandler(eventName, onceHandler, userData);
this.addHandler(eventName, onceHandler, userData, priority);
},
/**
@ -88,14 +89,22 @@ $.EventSource.prototype = {
* @param {String} eventName - Name of event to register.
* @param {OpenSeadragon.EventHandler} handler - Function to call when event is triggered.
* @param {Object} [userData=null] - Arbitrary object to be passed unchanged to the handler.
* @param {Number} [priority=0] - Handler priority. By default, all priorities are 0. Higher number = priority.
*/
addHandler: function ( eventName, handler, userData ) {
addHandler: function ( eventName, handler, userData, priority ) {
var events = this.events[ eventName ];
if ( !events ) {
this.events[ eventName ] = events = [];
}
if ( handler && $.isFunction( handler ) ) {
events[ events.length ] = { handler: handler, userData: userData || null };
var index = events.length,
event = { handler: handler, userData: userData || null, priority: priority || 0 };
events[ index ] = event;
while ( index > 0 && events[ index - 1 ].priority < events[ index ].priority ) {
events[ index ] = events[ index - 1 ];
events[ index - 1 ] = event;
index--;
}
}
},
@ -156,7 +165,7 @@ $.EventSource.prototype = {
* @function
* @param {String} eventName - Name of event to get handlers for.
*/
getHandler: function ( eventName ) {
getHandler: function ( eventName) {
var events = this.events[ eventName ];
if ( !events || !events.length ) {
return null;
@ -186,15 +195,12 @@ $.EventSource.prototype = {
raiseEvent: function( eventName, eventArgs ) {
//uncomment if you want to get a log of all events
//$.console.log( eventName );
var handler = this.getHandler( eventName );
if ( handler ) {
if ( !eventArgs ) {
eventArgs = {};
}
handler( this, eventArgs );
return handler( this, eventArgs || {} );
}
return undefined;
}
};

10
src/fullscreen.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - full-screen support functions
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -67,10 +67,14 @@
return document.fullscreenElement;
};
fullScreenApi.requestFullScreen = function( element ) {
return element.requestFullscreen();
return element.requestFullscreen().catch(function (msg) {
$.console.error('Fullscreen request failed: ', msg);
});
};
fullScreenApi.exitFullScreen = function() {
document.exitFullscreen();
document.exitFullscreen().catch(function (msg) {
$.console.error('Error while exiting fullscreen: ', msg);
});
};
fullScreenApi.fullScreenEventName = "fullscreenchange";
fullScreenApi.fullScreenErrorEventName = "fullscreenerror";

72
src/iiiftilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - IIIFTileSource
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -141,6 +141,18 @@ $.IIIFTileSource = function( options ){
}
}
// Create an array with our exact resolution sizes if these have been supplied
if( this.sizes ) {
var sizeLength = this.sizes.length;
if ( (sizeLength === options.maxLevel) || (sizeLength === options.maxLevel + 1) ) {
this.levelSizes = this.sizes;
// Need to take into account that the list may or may not include the full resolution size
if( sizeLength === options.maxLevel ) {
this.levelSizes.push( {width: this.width, height: this.height} );
}
}
}
$.TileSource.apply( this, [ options ] );
};
@ -333,7 +345,17 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
}
}
// Use supplied list of scaled resolution sizes if these exist
if( this.levelSizes ) {
var levelSize = this.levelSizes[level];
var x = Math.ceil( levelSize.width / this.getTileWidth(level) ),
y = Math.ceil( levelSize.height / this.getTileHeight(level) );
return new $.Point( x, y );
}
// Otherwise call default TileSource->getNumTiles() function
else {
return $.TileSource.prototype.getNumTiles.call(this, level);
}
},
@ -348,6 +370,34 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
return new $.Point(0, 0);
}
// Use supplied list of scaled resolution sizes if these exist
if( this.levelSizes ) {
var validPoint = point.x >= 0 && point.x <= 1 &&
point.y >= 0 && point.y <= 1 / this.aspectRatio;
$.console.assert(validPoint, "[TileSource.getTileAtPoint] must be called with a valid point.");
var widthScaled = this.levelSizes[level].width;
var pixelX = point.x * widthScaled;
var pixelY = point.y * widthScaled;
var x = Math.floor(pixelX / this.getTileWidth(level));
var y = Math.floor(pixelY / this.getTileHeight(level));
// When point.x == 1 or point.y == 1 / this.aspectRatio we want to
// return the last tile of the row/column
if (point.x >= 1) {
x = this.getNumTiles(level).x - 1;
}
var EPSILON = 1e-15;
if (point.y >= 1 / this.aspectRatio - EPSILON) {
y = this.getNumTiles(level).y - 1;
}
return new $.Point(x, y);
}
// Otherwise call default TileSource->getTileAtPoint() function
return $.TileSource.prototype.getTileAtPoint.call(this, level, point);
},
@ -375,10 +425,9 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
var IIIF_ROTATION = '0',
//## get the scale (level as a decimal)
scale = Math.pow( 0.5, this.maxLevel - level ),
//# image dimensions at this level
levelWidth = Math.round( this.width * scale ),
levelHeight = Math.round( this.height * scale ),
levelWidth,
levelHeight,
//## iiif region
tileWidth,
@ -396,6 +445,17 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
iiifQuality,
uri;
// Use supplied list of scaled resolution sizes if these exist
if( this.levelSizes ) {
levelWidth = this.levelSizes[level].width;
levelHeight = this.levelSizes[level].height;
}
// Otherwise calculate the sizes ourselves
else {
levelWidth = Math.ceil( this.width * scale );
levelHeight = Math.ceil( this.height * scale );
}
tileWidth = this.getTileWidth(level);
tileHeight = this.getTileHeight(level);
iiifTileSizeWidth = Math.round( tileWidth / scale );
@ -426,8 +486,8 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
} else {
iiifRegion = [ iiifTileX, iiifTileY, iiifTileW, iiifTileH ].join( ',' );
}
iiifSizeW = Math.round( iiifTileW * scale );
iiifSizeH = Math.round( iiifTileH * scale );
iiifSizeW = Math.min( tileWidth, levelWidth - (x * tileWidth) );
iiifSizeH = Math.min( tileHeight, levelHeight - (y * tileHeight) );
if ( this.version === 2 && iiifSizeW === this.width ) {
iiifSize = "full";
} else if ( this.version === 3 && iiifSizeW === this.width && iiifSizeH === this.height ) {

27
src/imageloader.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - ImageLoader
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -50,17 +50,19 @@
* @param {Function} [options.callback] - Called once image has been downloaded.
* @param {Function} [options.abort] - Called when this image job is aborted.
* @param {Number} [options.timeout] - The max number of milliseconds that this image job may take to complete.
* @param {Number} [options.tries] - Actual number of the current try.
*/
$.ImageJob = function(options) {
$.extend(true, this, {
timeout: $.DEFAULT_SETTINGS.timeout,
jobId: null
jobId: null,
tries: 0
}, options);
/**
* Data object which will contain downloaded image data.
* @member {Image|*} image data object, by default an Image object (depends on TileSource)
* @member {Image|*} data data object, by default an Image object (depends on TileSource)
* @memberof OpenSeadragon.ImageJob#
*/
this.data = null;
@ -87,6 +89,8 @@ $.ImageJob.prototype = {
* @method
*/
start: function() {
this.tries++;
var self = this;
var selfAbort = this.abort;
@ -138,6 +142,7 @@ $.ImageLoader = function(options) {
jobLimit: $.DEFAULT_SETTINGS.imageLoaderLimit,
timeout: $.DEFAULT_SETTINGS.timeout,
jobQueue: [],
failedTiles: [],
jobsInProgress: 0
}, options);
@ -220,7 +225,8 @@ $.ImageLoader.prototype = {
};
/**
* Cleans up ImageJob once completed.
* Cleans up ImageJob once completed. Restarts job after tileRetryDelay seconds if failed
* but max tileRetryMax times
* @method
* @private
* @param loader - ImageLoader used to start job.
@ -228,6 +234,9 @@ $.ImageLoader.prototype = {
* @param callback - Called once cleanup is finished.
*/
function completeJob(loader, job, callback) {
if (job.errorMsg !== '' && (job.data === null || job.data === undefined) && job.tries < 1 + loader.tileRetryMax) {
loader.failedTiles.push(job);
}
var nextJob;
loader.jobsInProgress--;
@ -238,6 +247,16 @@ function completeJob(loader, job, callback) {
loader.jobsInProgress++;
}
if (loader.tileRetryMax > 0 && loader.jobQueue.length === 0) {
if ((!loader.jobLimit || loader.jobsInProgress < loader.jobLimit) && loader.failedTiles.length > 0) {
nextJob = loader.failedTiles.shift();
setTimeout(function () {
nextJob.start();
}, loader.tileRetryDelay);
loader.jobsInProgress++;
}
}
callback(job.data, job.errorMsg, job.request);
}

2
src/imagetilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - ImageTileSource
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/legacytilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - LegacyTileSource
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/mousetracker.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - MouseTracker
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

29
src/navigator.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Navigator
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -125,7 +125,8 @@ $.Navigator = function( options ){
immediateRender: true,
blendTime: 0,
animationTime: options.animationTime,
autoResize: options.autoResize,
// disable autoResize since resize behavior is implemented differently by the navigator
autoResize: false,
// prevent resizing the navigator from adding unwanted space around the image
minZoomImageRatio: 1.0,
background: options.background,
@ -183,6 +184,7 @@ $.Navigator = function( options ){
style.styleFloat = 'left'; //IE
style.zIndex = 999999999;
style.cursor = 'default';
style.boxSizing = 'content-box';
}( this.displayRegion.style, this.borderWidth ));
$.setElementPointerEventsNone( this.displayRegion );
$.setElementTouchActionNone( this.displayRegion );
@ -222,19 +224,19 @@ $.Navigator = function( options ){
this.displayRegionContainer.appendChild(this.displayRegion);
this.element.getElementsByTagName('div')[0].appendChild(this.displayRegionContainer);
function rotate(degrees) {
function rotate(degrees, immediately) {
_setTransformRotate(_this.displayRegionContainer, degrees);
_setTransformRotate(_this.displayRegion, -degrees);
_this.viewport.setRotation(degrees);
_this.viewport.setRotation(degrees, immediately);
}
if (options.navigatorRotate) {
var degrees = options.viewer.viewport ?
options.viewer.viewport.getRotation() :
options.viewer.degrees || 0;
rotate(degrees);
rotate(degrees, true);
options.viewer.addHandler("rotate", function (args) {
rotate(args.degrees);
rotate(args.degrees, args.immediately);
});
}
@ -322,6 +324,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
this.width = width;
this.element.style.width = typeof (width) === "number" ? (width + 'px') : width;
this._resizeWithViewer = false;
this.updateSize();
},
/**
@ -332,6 +335,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
this.height = height;
this.element.style.height = typeof (height) === "number" ? (height + 'px') : height;
this._resizeWithViewer = false;
this.updateSize();
},
/**
@ -393,15 +397,20 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
bottomright = this.viewport.pixelFromPointNoRotate(bounds.getBottomRight(), false)
.minus( this.totalBorderWidths );
if (!this.navigatorRotate) {
var degrees = viewport.getRotation(true);
_setTransformRotate(this.displayRegion, -degrees);
}
//update style for navigator-box
var style = this.displayRegion.style;
style.display = this.world.getItemCount() ? 'block' : 'none';
style.top = Math.round( topleft.y ) + 'px';
style.left = Math.round( topleft.x ) + 'px';
style.top = topleft.y.toFixed(2) + "px";
style.left = topleft.x.toFixed(2) + "px";
var width = Math.abs( topleft.x - bottomright.x );
var height = Math.abs( topleft.y - bottomright.y );
var width = bottomright.x - topleft.x;
var height = bottomright.y - topleft.y;
// make sure width and height are non-negative so IE doesn't throw
style.width = Math.round( Math.max( width, 0 ) ) + 'px';
style.height = Math.round( Math.max( height, 0 ) ) + 'px';

64
src/openseadragon.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -60,7 +60,7 @@
/*
* Portions of this source file taken from mattsnider.com:
*
* Copyright (c) 2006-2022 Matt Snider
* Copyright (c) 2006-2013 Matt Snider
*
* Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"),
@ -499,6 +499,12 @@
* @property {Number} [timeout=30000]
* The max number of milliseconds that an image job may take to complete.
*
* @property {Number} [tileRetryMax=0]
* The max number of retries when a tile download fails. By default it's 0, so retries are disabled.
*
* @property {Number} [tileRetryDelay=2500]
* Milliseconds to wait after each tile retry if tileRetryMax is set.
*
* @property {Boolean} [useCanvas=true]
* Set to false to not use an HTML canvas element for image rendering even if canvas is supported.
*
@ -563,50 +569,50 @@
* viewing the first image and the 'next' button will wrap to the first
* image when viewing the last image.
*
* @property {String} zoomInButton
* Set the id of the custom 'Zoom in' button to use.
*@property {String|Element} zoomInButton
* Set the id or element of the custom 'Zoom in' button to use.
* This is useful to have a custom button anywhere in the web page.<br>
* To only change the button images, consider using
* {@link OpenSeadragon.Options.navImages}
*
* @property {String} zoomOutButton
* Set the id of the custom 'Zoom out' button to use.
* @property {String|Element} zoomOutButton
* Set the id or element of the custom 'Zoom out' button to use.
* This is useful to have a custom button anywhere in the web page.<br>
* To only change the button images, consider using
* {@link OpenSeadragon.Options.navImages}
*
* @property {String} homeButton
* Set the id of the custom 'Go home' button to use.
* @property {String|Element} homeButton
* Set the id or element of the custom 'Go home' button to use.
* This is useful to have a custom button anywhere in the web page.<br>
* To only change the button images, consider using
* {@link OpenSeadragon.Options.navImages}
*
* @property {String} fullPageButton
* Set the id of the custom 'Toggle full page' button to use.
* @property {String|Element} fullPageButton
* Set the id or element of the custom 'Toggle full page' button to use.
* This is useful to have a custom button anywhere in the web page.<br>
* To only change the button images, consider using
* {@link OpenSeadragon.Options.navImages}
*
* @property {String} rotateLeftButton
* Set the id of the custom 'Rotate left' button to use.
* @property {String|Element} rotateLeftButton
* Set the id or element of the custom 'Rotate left' button to use.
* This is useful to have a custom button anywhere in the web page.<br>
* To only change the button images, consider using
* {@link OpenSeadragon.Options.navImages}
*
* @property {String} rotateRightButton
* Set the id of the custom 'Rotate right' button to use.
* @property {String|Element} rotateRightButton
* Set the id or element of the custom 'Rotate right' button to use.
* This is useful to have a custom button anywhere in the web page.<br>
* To only change the button images, consider using
* {@link OpenSeadragon.Options.navImages}
*
* @property {String} previousButton
* Set the id of the custom 'Previous page' button to use.
* @property {String|Element} previousButton
* Set the id or element of the custom 'Previous page' button to use.
* This is useful to have a custom button anywhere in the web page.<br>
* To only change the button images, consider using
* {@link OpenSeadragon.Options.navImages}
*
* @property {String} nextButton
* Set the id of the custom 'Next page' button to use.
* @property {String|Element} nextButton
* Set the id or element of the custom 'Next page' button to use.
* This is useful to have a custom button anywhere in the web page.<br>
* To only change the button images, consider using
* {@link OpenSeadragon.Options.navImages}
@ -834,6 +840,8 @@ function OpenSeadragon( options ){
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object AsyncFunction]': 'function',
'[object Promise]': 'promise',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regexp',
@ -853,7 +861,6 @@ function OpenSeadragon( options ){
return $.type(obj) === "function";
};
/**
* Taken from jQuery 1.6.1
* @function isArray
@ -1359,6 +1366,8 @@ function OpenSeadragon( options ){
maxImageCacheCount: 200,
timeout: 30000,
useCanvas: true, // Use canvas element for drawing if available
tileRetryMax: 0,
tileRetryDelay: 2500,
//INTERFACE RESOURCE SETTINGS
prefixUrl: "/images/",
@ -2247,25 +2256,12 @@ function OpenSeadragon( options ){
event.stopPropagation();
},
/**
* Similar to OpenSeadragon.delegate, but it does not immediately call
* the method on the object, returning a function which can be called
* repeatedly to delegate the method. It also allows additional arguments
* to be passed during construction which will be added during each
* invocation, and each invocation can add additional arguments as well.
*
* @function
* @param {Object} object
* @param {Function} method
* @param [args] any additional arguments are passed as arguments to the
* created callback
* @returns {Function}
*/
// Deprecated
createCallback: function( object, method ) {
//TODO: This pattern is painful to use and debug. It's much cleaner
// to use pinning plus anonymous functions. Get rid of this
// pattern!
console.error('The createCallback function is deprecated and will be removed in future versions. Please use alternativeFunction instead.');
var initialArgs = [],
i;
for ( i = 2; i < arguments.length; i++ ) {

2
src/osmtilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - OsmTileSource
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/overlay.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Overlay
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/point.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Point
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/profiler.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Profiler
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/rectangle.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Rect
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

5
src/referencestrip.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - ReferenceStrip
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -300,7 +300,8 @@ function onStripClick( event ) {
var page;
if ( 'horizontal' === this.scroll ) {
page = Math.floor(event.position.x / this.panelWidth);
// +4px fix to solve problem with precision on thumbnail selection if there is a lot of them
page = Math.floor(event.position.x / (this.panelWidth + 4));
} else {
page = Math.floor(event.position.y / this.panelHeight);
}

2
src/spring.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Spring
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/strings.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - getString/setString
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

6
src/tile.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Tile
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -44,7 +44,7 @@
* coordinates.
* @param {Boolean} exists Is this tile a part of a sparse image? ( Also has
* this tile failed to load? )
* @param {String|() => String} url The URL of this tile's image or a function that returns a url.
* @param {String|Function} url The URL of this tile's image or a function that returns a url.
* @param {CanvasRenderingContext2D} context2D The context2D of this tile if it
* is provided directly by the tile source.
* @param {Boolean} loadWithAjax Whether this tile image should be loaded with an AJAX request .
@ -98,7 +98,7 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja
* Private property to hold string url or url retriever function.
* Consumers should access via Tile.getUrl()
* @private
* @member {String|() => String} url
* @member {String|Function} url
* @memberof OpenSeadragon.Tile#
*/
this._url = url;

2
src/tilecache.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - TileCache
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

112
src/tiledimage.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - TiledImage
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -147,6 +147,9 @@ $.TiledImage = function( options ) {
var degrees = options.degrees || 0;
delete options.degrees;
var ajaxHeaders = options.ajaxHeaders;
delete options.ajaxHeaders;
$.extend( true, this, {
//internal state properties
@ -238,6 +241,9 @@ $.TiledImage = function( options ) {
tiledImage: _this
}, args));
};
this._ownAjaxHeaders = {};
this.setAjaxHeaders(ajaxHeaders, false);
};
$.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.TiledImage.prototype */{
@ -1003,6 +1009,90 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
});
},
/**
* 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);
@ -1621,6 +1711,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
tile.loading = false;
tile.exists = false;
return;
} else {
tile.exists = true;
}
if ( time < this.lastResetTime ) {
@ -1656,9 +1748,14 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
*/
_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;
}
@ -1690,7 +1787,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @event tile-loaded
* @memberof OpenSeadragon.Viewer
* @type {object}
* @property {Image || *} image - The image (data) of the tile. Deprecated.
* @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.
@ -1700,6 +1797,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* 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,
@ -1711,8 +1810,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
data: data,
getCompletionCallback: getCompletionCallback
});
eventFinished = true;
// In case the completion callback is never called, we at least force it once.
getCompletionCallback()();
fallbackCompletion();
},
/**
@ -1864,7 +1964,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
if (lastDrawn.length > 1 &&
imageZoom > this.smoothTileEdgesMinZoom &&
!this.iOSDevice &&
this.getRotation(true) % 360 === 0 && // TODO: support tile edge smoothing with tiled image rotation.
this.getRotation(true) % 360 === 0 && // TODO: support tile edge smoothing with tiled image rotation (viewport rotation is not a problem).
this._drawer.viewer.viewport.getFlip() === false && // TODO: support tile edge smoothing with viewport flip (tiled image flip is not a problem).
$.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.
@ -1954,6 +2055,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
if (sketchScale) {
clipPoint = clipPoint.times(sketchScale);
}
if (sketchTranslate) {
clipPoint = clipPoint.plus(sketchTranslate);
}
return clipPoint;
});
});

11
src/tilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - TileSource
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -618,7 +618,7 @@ $.TileSource.prototype = {
* @param {Number} level
* @param {Number} x
* @param {Number} y
* @returns {String|() => string} url - A string for the url or a function that returns a url string.
* @returns {String|Function} url - A string for the url or a function that returns a url string.
* @throws {Error}
*/
getTileUrl: function( level, x, y ) {
@ -663,6 +663,11 @@ $.TileSource.prototype = {
* The headers returned here will override headers specified at the Viewer or TiledImage level.
* Specifying a falsy value for a header will clear its existing value set at the Viewer or
* TiledImage level (if any).
*
* Note that the headers of existing tiles don't automatically change when this function
* returns updated headers. To do that, you need to call {@link OpenSeadragon.Viewer#setAjaxHeaders}
* and propagate the changes.
*
* @function
* @param {Number} level
* @param {Number} x
@ -932,7 +937,7 @@ function processResponse( xhr ){
throw new Error( $.getString( "Errors.Status", status, statusText ) );
}
if( responseText.match(/\s*<.*/) ){
if( responseText.match(/^\s*<.*/) ){
try{
data = ( xhr.responseXML && xhr.responseXML.documentElement ) ?
xhr.responseXML :

2
src/tilesourcecollection.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - TileSourceCollection
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

2
src/tmstilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - TmsTileSource
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

290
src/viewer.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Viewer
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -204,6 +204,8 @@ $.Viewer = function( options ) {
prevContainerSize: null,
animating: false,
forceRedraw: false,
needsResize: false,
forceResize: false,
mouseInside: false,
group: null,
// whether we should be continuously zooming
@ -306,7 +308,9 @@ $.Viewer = function( options ) {
nonPrimaryPressHandler: $.delegate( this, onCanvasNonPrimaryPress ),
nonPrimaryReleaseHandler: $.delegate( this, onCanvasNonPrimaryRelease ),
scrollHandler: $.delegate( this, onCanvasScroll ),
pinchHandler: $.delegate( this, onCanvasPinch )
pinchHandler: $.delegate( this, onCanvasPinch ),
focusHandler: $.delegate( this, onCanvasFocus ),
blurHandler: $.delegate( this, onCanvasBlur ),
});
this.outerTracker = new $.MouseTracker({
@ -330,6 +334,17 @@ $.Viewer = function( options ) {
THIS[ this.hash ].prevContainerSize = _getSafeElemSize( this.container );
if(window.ResizeObserver){
this._autoResizePolling = false;
this._resizeObserver = new ResizeObserver(function(){
THIS[_this.hash].needsResize = true;
});
this._resizeObserver.observe(this.container, {});
} else {
this._autoResizePolling = true;
}
// Create the world
this.world = new $.World({
viewer: this
@ -395,7 +410,9 @@ $.Viewer = function( options ) {
// Create the image loader
this.imageLoader = new $.ImageLoader({
jobLimit: this.imageLoaderLimit,
timeout: options.timeout
timeout: options.timeout,
tileRetryMax: this.tileRetryMax,
tileRetryDelay: this.tileRetryDelay
});
// Create the tile cache
@ -788,6 +805,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
//TODO: implement this...
//this.unbindSequenceControls()
//this.unbindStandardControls()
if (this._resizeObserver){
this._resizeObserver.disconnect();
}
if (this.referenceStrip) {
this.referenceStrip.destroy();
@ -948,7 +968,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* Turns debugging mode on or off for this viewer.
*
* @function
* @param {Boolean} true to turn debug on, false to turn debug off.
* @param {Boolean} debugMode true to turn debug on, false to turn debug off.
*/
setDebugMode: function(debugMode){
@ -960,6 +980,63 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
this.forceRedraw();
},
/**
* 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 tiled images, each of which will subsequently
* propagate the changed headers to all their tiles.
* If applicable, the headers of the viewer's navigator and reference strip will also be updated.
*
* Note that the rules for merging headers still apply, i.e. headers returned by
* {@link OpenSeadragon.TileSource#getTileAjaxHeaders} take precedence over
* `TiledImage.ajaxHeaders`, which take precedence over the headers here in the viewer.
*
* @function
* @param {Object} ajaxHeaders Updated AJAX headers.
* @param {Boolean} [propagate=true] Whether to propagate updated headers to tiled images, etc.
*/
setAjaxHeaders: function(ajaxHeaders, propagate) {
if (ajaxHeaders === null) {
ajaxHeaders = {};
}
if (!$.isPlainObject(ajaxHeaders)) {
console.error('[Viewer.setAjaxHeaders] Ignoring invalid headers, must be a plain object');
return;
}
if (propagate === undefined) {
propagate = true;
}
this.ajaxHeaders = ajaxHeaders;
if (propagate) {
for (var i = 0; i < this.world.getItemCount(); i++) {
this.world.getItemAt(i)._updateAjaxHeaders(true);
}
if (this.navigator) {
this.navigator.setAjaxHeaders(this.ajaxHeaders, true);
}
if (this.referenceStrip && this.referenceStrip.miniViewers) {
for (var key in this.referenceStrip.miniViewers) {
this.referenceStrip.miniViewers[key].setAjaxHeaders(this.ajaxHeaders, true);
}
}
}
},
/**
* Adds the given button to this viewer.
*
* @function
* @param {OpenSeadragon.Button} button
*/
addButton: function( button ){
this.buttonGroup.addButton(button);
},
/**
* @function
* @returns {Boolean}
@ -1374,7 +1451,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* A set of headers to include when making tile AJAX requests.
* Note that these headers will be merged over any headers specified in {@link OpenSeadragon.Options}.
* Specifying a falsy value for a header will clear its existing value set at the Viewer level (if any).
* requests.
* @param {Function} [options.success] A function that gets called when the image is
* successfully added. It's passed the event object which contains a single property:
* "item", which is the resulting instance of TiledImage.
@ -1422,10 +1498,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
if (options.loadTilesWithAjax === undefined) {
options.loadTilesWithAjax = this.loadTilesWithAjax;
}
if (options.ajaxHeaders === undefined || options.ajaxHeaders === null) {
options.ajaxHeaders = this.ajaxHeaders;
} else if ($.isPlainObject(options.ajaxHeaders) && $.isPlainObject(this.ajaxHeaders)) {
options.ajaxHeaders = $.extend({}, this.ajaxHeaders, options.ajaxHeaders);
if (!$.isPlainObject(options.ajaxHeaders)) {
options.ajaxHeaders = {};
}
var myQueueItem = {
@ -1682,6 +1756,14 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
return this;
},
/**
* Force the viewer to reset its size to match its container.
*/
forceResize: function() {
THIS[this.hash].needsResize = true;
THIS[this.hash].forceResize = true;
},
/**
* @function
* @returns {OpenSeadragon.Viewer} Chainable.
@ -2733,7 +2815,7 @@ function onCanvasKeyDown( event ) {
if ( !canvasKeyDownEventArgs.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
switch( event.keyCode ){
case 38://up arrow
case 38://up arrow/shift uparrow
if (!canvasKeyDownEventArgs.preventVerticalPan) {
if ( event.shift ) {
this.viewport.zoomBy(1.1);
@ -2744,7 +2826,7 @@ function onCanvasKeyDown( event ) {
}
event.preventDefault = true;
break;
case 40://down arrow
case 40://down arrow/shift downarrow
if (!canvasKeyDownEventArgs.preventVerticalPan) {
if ( event.shift ) {
this.viewport.zoomBy(0.9);
@ -2769,35 +2851,12 @@ function onCanvasKeyDown( event ) {
}
event.preventDefault = true;
break;
default:
//console.log( 'navigator keycode %s', event.keyCode );
event.preventDefault = false;
break;
}
} else {
event.preventDefault = false;
}
}
function onCanvasKeyPress( event ) {
var canvasKeyPressEventArgs = {
originalEvent: event.originalEvent,
preventDefaultAction: false,
preventVerticalPan: event.preventVerticalPan || !this.panVertical,
preventHorizontalPan: event.preventHorizontalPan || !this.panHorizontal
};
// This event is documented in onCanvasKeyDown
this.raiseEvent('canvas-key', canvasKeyPressEventArgs);
if ( !canvasKeyPressEventArgs.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
switch( event.keyCode ){
case 43://=|+
case 61://=|+
case 187://=|+
this.viewport.zoomBy(1.1);
this.viewport.applyConstraints();
event.preventDefault = true;
break;
case 45://-|_
case 189://-|_
this.viewport.zoomBy(0.9);
this.viewport.applyConstraints();
event.preventDefault = true;
@ -2807,9 +2866,8 @@ function onCanvasKeyPress( event ) {
this.viewport.applyConstraints();
event.preventDefault = true;
break;
case 119://w
case 87://W
if (!canvasKeyPressEventArgs.preventVerticalPan) {
case 87://W/w
if (!canvasKeyDownEventArgs.preventVerticalPan) {
if ( event.shift ) {
this.viewport.zoomBy(1.1);
} else {
@ -2819,9 +2877,8 @@ function onCanvasKeyPress( event ) {
}
event.preventDefault = true;
break;
case 115://s
case 83://S
if (!canvasKeyPressEventArgs.preventVerticalPan) {
case 83://S/s
if (!canvasKeyDownEventArgs.preventVerticalPan) {
if ( event.shift ) {
this.viewport.zoomBy(0.9);
} else {
@ -2831,50 +2888,49 @@ function onCanvasKeyPress( event ) {
}
event.preventDefault = true;
break;
case 97://a
if (!canvasKeyPressEventArgs.preventHorizontalPan) {
case 65://a/A
if (!canvasKeyDownEventArgs.preventHorizontalPan) {
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-40, 0)));
this.viewport.applyConstraints();
}
event.preventDefault = true;
break;
case 100://d
if (!canvasKeyPressEventArgs.preventHorizontalPan) {
case 68://d/D
if (!canvasKeyDownEventArgs.preventHorizontalPan) {
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(40, 0)));
this.viewport.applyConstraints();
}
event.preventDefault = true;
break;
case 114: //r - clockwise rotation
if(this.viewport.flipped){
this.viewport.setRotation(this.viewport.getRotation() - this.rotationIncrement);
} else{
this.viewport.setRotation(this.viewport.getRotation() + this.rotationIncrement);
}
this.viewport.applyConstraints();
event.preventDefault = true;
break;
case 82: //R - counterclockwise rotation
case 82: //r - clockwise rotation/R - counterclockwise rotation
if(event.shift){
if(this.viewport.flipped){
this.viewport.setRotation(this.viewport.getRotation() + this.rotationIncrement);
} else{
this.viewport.setRotation(this.viewport.getRotation() - this.rotationIncrement);
}
}else{
if(this.viewport.flipped){
this.viewport.setRotation(this.viewport.getRotation() - this.rotationIncrement);
} else{
this.viewport.setRotation(this.viewport.getRotation() + this.rotationIncrement);
}
}
this.viewport.applyConstraints();
event.preventDefault = true;
break;
case 102: //f
case 70: //f/F
this.viewport.toggleFlip();
event.preventDefault = true;
break;
case 106: //j - previous image source
case 74: //j - previous image source
this.goToPreviousPage();
break;
case 107: //k - next image source
case 75: //k - next image source
this.goToNextPage();
break;
default:
// console.log( 'navigator keycode %s', event.keyCode );
//console.log( 'navigator keycode %s', event.keyCode );
event.preventDefault = false;
break;
}
@ -2883,7 +2939,24 @@ function onCanvasKeyPress( event ) {
}
}
function onCanvasKeyPress( event ) {
var canvasKeyPressEventArgs = {
originalEvent: event.originalEvent,
};
/**
* Raised when a keyboard key is pressed and the focus is on the {@link OpenSeadragon.Viewer#canvas} element.
*
* @event canvas-key-press
* @memberof OpenSeadragon.Viewer
* @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
* @property {Object} originalEvent - The original DOM event.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent('canvas-key-press', canvasKeyPressEventArgs);
}
function onCanvasClick( event ) {
var gestureSettings;
@ -3051,17 +3124,16 @@ function onCanvasDrag( event ) {
this.viewport.centerSpringX.target.value += delta.x;
this.viewport.centerSpringY.target.value += delta.y;
var bounds = this.viewport.getBounds();
var constrainedBounds = this.viewport.getConstrainedBounds();
this.viewport.centerSpringX.target.value -= delta.x;
this.viewport.centerSpringY.target.value -= delta.y;
if (bounds.x !== constrainedBounds.x) {
if (constrainedBounds.xConstrained) {
event.delta.x = 0;
}
if (bounds.y !== constrainedBounds.y) {
if (constrainedBounds.yConstrained) {
event.delta.y = 0;
}
}
@ -3396,11 +3468,49 @@ function onCanvasPinch( event ) {
event.gesturePoints[0].currentPos.x - event.gesturePoints[1].currentPos.x);
var angle2 = Math.atan2(event.gesturePoints[0].lastPos.y - event.gesturePoints[1].lastPos.y,
event.gesturePoints[0].lastPos.x - event.gesturePoints[1].lastPos.x);
this.viewport.setRotation(this.viewport.getRotation() + ((angle1 - angle2) * (180 / Math.PI)));
centerPt = this.viewport.pointFromPixel( event.center, true );
this.viewport.rotateTo(this.viewport.getRotation(true) + ((angle1 - angle2) * (180 / Math.PI)), centerPt, true);
}
}
}
function onCanvasFocus( event ) {
/**
* Raised when the {@link OpenSeadragon.Viewer#canvas} element gets keyboard focus.
*
* @event canvas-focus
* @memberof OpenSeadragon.Viewer
* @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
* @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
* @property {Object} originalEvent - The original DOM event.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent( 'canvas-focus', {
tracker: event.eventSource,
originalEvent: event.originalEvent
});
}
function onCanvasBlur( event ) {
/**
* Raised when the {@link OpenSeadragon.Viewer#canvas} element loses keyboard focus.
*
* @event canvas-blur
* @memberof OpenSeadragon.Viewer
* @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
* @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
* @property {Object} originalEvent - The original DOM event.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent( 'canvas-blur', {
tracker: event.eventSource,
originalEvent: event.originalEvent
});
}
function onCanvasScroll( event ) {
var canvasScrollEventArgs,
gestureSettings,
@ -3550,6 +3660,27 @@ function updateMulti( viewer ) {
}
}
function doViewerResize(viewer, containerSize){
var viewport = viewer.viewport;
var zoom = viewport.getZoom();
var center = viewport.getCenter();
viewport.resize(containerSize, viewer.preserveImageSizeOnResize);
viewport.panTo(center, true);
var resizeRatio;
if (viewer.preserveImageSizeOnResize) {
resizeRatio = THIS[viewer.hash].prevContainerSize.x / containerSize.x;
} else {
var origin = new $.Point(0, 0);
var prevDiag = new $.Point(THIS[viewer.hash].prevContainerSize.x, THIS[viewer.hash].prevContainerSize.y).distanceTo(origin);
var newDiag = new $.Point(containerSize.x, containerSize.y).distanceTo(origin);
resizeRatio = newDiag / prevDiag * THIS[viewer.hash].prevContainerSize.x / containerSize.x;
}
viewport.zoomTo(zoom * resizeRatio, null, true);
THIS[viewer.hash].prevContainerSize = containerSize;
THIS[viewer.hash].forceRedraw = true;
THIS[viewer.hash].needsResize = false;
THIS[viewer.hash].forceResize = false;
}
function updateOnce( viewer ) {
//viewer.profiler.beginUpdate();
@ -3557,29 +3688,22 @@ function updateOnce( viewer ) {
if (viewer._opening || !THIS[viewer.hash]) {
return;
}
if (viewer.autoResize) {
var containerSize = _getSafeElemSize(viewer.container);
if (viewer.autoResize || THIS[viewer.hash].forceResize){
var containerSize;
if(viewer._autoResizePolling){
containerSize = _getSafeElemSize(viewer.container);
var prevContainerSize = THIS[viewer.hash].prevContainerSize;
if (!containerSize.equals(prevContainerSize)) {
var viewport = viewer.viewport;
if (viewer.preserveImageSizeOnResize) {
var resizeRatio = prevContainerSize.x / containerSize.x;
var zoom = viewport.getZoom() * resizeRatio;
var center = viewport.getCenter();
viewport.resize(containerSize, false);
viewport.zoomTo(zoom, null, true);
viewport.panTo(center, true);
} else {
// maintain image position
var oldBounds = viewport.getBounds();
viewport.resize(containerSize, true);
viewport.fitBoundsWithConstraints(oldBounds, true);
}
THIS[viewer.hash].prevContainerSize = containerSize;
THIS[viewer.hash].forceRedraw = true;
THIS[viewer.hash].needsResize = true;
}
}
if(THIS[viewer.hash].needsResize){
doViewerResize(viewer, containerSize || _getSafeElemSize(viewer.container));
}
}
var viewportChange = viewer.viewport.update();
var animated = viewer.world.update() || viewportChange;

156
src/viewport.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Viewport
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@ -483,7 +483,7 @@ $.Viewport.prototype = {
);
newZoomPixel = this._pixelFromPoint(this.zoomPoint, bounds);
deltaZoomPixels = newZoomPixel.minus( oldZoomPixel );
deltaZoomPixels = newZoomPixel.minus( oldZoomPixel ).rotate(-this.getRotation(true));
deltaZoomPoints = deltaZoomPixels.divide( this._containerInnerSize.x * zoom );
return centerTarget.plus( deltaZoomPoints );
@ -515,33 +515,36 @@ $.Viewport.prototype = {
* @returns {OpenSeadragon.Rect} constrained bounds.
*/
_applyBoundaryConstraints: function(bounds) {
var newBounds = new $.Rect(
bounds.x,
bounds.y,
bounds.width,
bounds.height);
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 = this._contentBoundsNoRotate.x + this._contentBoundsNoRotate.width;
var contentRight = cb.x + cb.width;
var horizontalThreshold, leftDx, rightDx;
if (newBounds.width > this._contentBoundsNoRotate.width) {
horizontalThreshold = this.visibilityRatio * this._contentBoundsNoRotate.width;
if (newBounds.width > cb.width) {
horizontalThreshold = this.visibilityRatio * cb.width;
} else {
horizontalThreshold = this.visibilityRatio * newBounds.width;
}
leftDx = this._contentBoundsNoRotate.x - boundsRight + horizontalThreshold;
leftDx = cb.x - boundsRight + horizontalThreshold;
rightDx = contentRight - newBounds.x - horizontalThreshold;
if (horizontalThreshold > this._contentBoundsNoRotate.width) {
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;
}
}
@ -550,28 +553,37 @@ $.Viewport.prototype = {
//do nothing
} else {
var boundsBottom = newBounds.y + newBounds.height;
var contentBottom = this._contentBoundsNoRotate.y + this._contentBoundsNoRotate.height;
var contentBottom = cb.y + cb.height;
var verticalThreshold, topDy, bottomDy;
if (newBounds.height > this._contentBoundsNoRotate.height) {
verticalThreshold = this.visibilityRatio * this._contentBoundsNoRotate.height;
if (newBounds.height > cb.height) {
verticalThreshold = this.visibilityRatio * cb.height;
} else{
verticalThreshold = this.visibilityRatio * newBounds.height;
}
topDy = this._contentBoundsNoRotate.y - boundsBottom + verticalThreshold;
topDy = cb.y - boundsBottom + verticalThreshold;
bottomDy = contentBottom - newBounds.y - verticalThreshold;
if (verticalThreshold > this._contentBoundsNoRotate.height) {
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;
}
}
return newBounds;
var constraintApplied = xConstrained || yConstrained;
var newViewportBounds = constraintApplied ? this.viewerElementToViewportRectangle(newBounds) : bounds.clone();
newViewportBounds.xConstrained = xConstrained;
newViewportBounds.yConstrained = yConstrained;
newViewportBounds.constraintApplied = constraintApplied;
return newViewportBounds;
},
/**
@ -605,7 +617,7 @@ $.Viewport.prototype = {
* @function
* @param {Boolean} [immediately=false]
* @returns {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:constrain
* @fires OpenSeadragon.Viewer.event:constrain if constraints were applied
*/
applyConstraints: function(immediately) {
var actualZoom = this.getZoom();
@ -615,17 +627,13 @@ $.Viewport.prototype = {
this.zoomTo(constrainedZoom, this.zoomPoint, immediately);
}
var bounds = this.getBoundsNoRotate();
var constrainedBounds = this._applyBoundaryConstraints(bounds);
this._raiseConstraintsEvent(immediately);
var constrainedBounds = this.getConstrainedBounds(false);
if (bounds.x !== constrainedBounds.x ||
bounds.y !== constrainedBounds.y ||
immediately) {
this.fitBounds(
constrainedBounds.rotate(-this.getRotation(true)),
immediately);
if(constrainedBounds.constraintApplied){
this.fitBounds(constrainedBounds, immediately);
this._raiseConstraintsEvent(immediately);
}
return this;
},
@ -675,45 +683,53 @@ $.Viewport.prototype = {
newBounds.y = center.y - newBounds.height / 2;
var newZoom = 1.0 / newBounds.width;
if (constraints) {
var newBoundsAspectRatio = newBounds.getAspectRatio();
var newConstrainedZoom = this._applyZoomConstraints(newZoom);
if (newZoom !== newConstrainedZoom) {
newZoom = newConstrainedZoom;
newBounds.width = 1.0 / newZoom;
newBounds.x = center.x - newBounds.width / 2;
newBounds.height = newBounds.width / newBoundsAspectRatio;
newBounds.y = center.y - newBounds.height / 2;
}
newBounds = this._applyBoundaryConstraints(newBounds);
center = newBounds.getCenter();
this._raiseConstraintsEvent(immediately);
}
if (immediately) {
this.panTo(center, true);
return this.zoomTo(newZoom, null, true);
this.zoomTo(newZoom, null, true);
if(constraints){
this.applyConstraints(true);
}
return this;
}
this.panTo(this.getCenter(true), true);
this.zoomTo(this.getZoom(true), null, true);
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, true);
return this.panTo(center, immediately);
this.zoomTo(newZoom, null, true);
this.panTo(center, immediately);
if(constraints){
this.applyConstraints(false);
}
return this;
}
newBounds = newBounds.rotate(-this.getRotation());
var referencePoint = newBounds.getTopLeft().times(newZoom)
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);
return this.zoomTo(newZoom, referencePoint, immediately);
this.zoomTo(newZoom, referencePoint, immediately);
}
return this;
},
/**
@ -787,7 +803,10 @@ $.Viewport.prototype = {
* 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.Viewport} Chainable.
* @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,
@ -1059,7 +1078,10 @@ $.Viewport.prototype = {
if( this.viewer ){
/**
* Raised when the viewer is resized (see {@link OpenSeadragon.Viewport#resize}).
* 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
@ -1075,7 +1097,29 @@ $.Viewport.prototype = {
});
}
return this.fitBounds( newBounds, true );
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

2
src/world.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - World
*
* Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2022 OpenSeadragon contributors
* Copyright (C) 2010-2023 OpenSeadragon contributors
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are

5
test/coverage.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>OpenSeadragon QUnit</title>
<link rel="stylesheet" href="/node_modules/qunitjs/qunit/qunit.css">
<link rel="stylesheet" href="/node_modules/qunit/qunit/qunit.css">
<link rel="stylesheet" href="/test/lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css">
<link rel="stylesheet" href="/test/helpers/test.css">
</head>
@ -15,7 +15,7 @@
var isCoverageTest = true;
</script>
<script src="/node_modules/qunitjs/qunit/qunit.js"></script>
<script src="/node_modules/qunit/qunit/qunit.js"></script>
<script src="/test/lib/jquery-1.9.1.min.js"></script>
<script src="/test/lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js"></script>
<script src="/test/lib/jquery.simulate.js"></script>
@ -65,6 +65,7 @@
<!-- Polyfill must be inserted first because it is testing functions
reassignments which could be done by other test. -->
<script src="/test/modules/polyfills.js"></script>
<script src="/test/modules/event-source.js"></script>
<script src="/test/modules/basic.js"></script>
<script src="/test/modules/strings.js"></script>
<script src="/test/modules/formats.js"></script>

3
test/data/iiif_2_0_tiled/info.json
View File

@ -20,5 +20,6 @@
"gif"
]
}
]
],
"xmp": "<rdf:RDF xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\">\n <rdf:Description rdf:about=\"\"\n xmlns:xmp=\"http://ns.adobe.com/xap/1.0/\"\n xmlns:aux=\"http://ns.adobe.com/exif/1.0/aux/\"\n xmlns:photoshop=\"http://ns.adobe.com/photoshop/1.0/\"\n xmlns:Iptc4xmpCore=\"http://iptc.org/std/Iptc4xmpCore/1.0/xmlns/\"\n xmlns:tiff=\"http://ns.adobe.com/tiff/1.0/\"\n xmlns:exif=\"http://ns.adobe.com/exif/1.0/\"\n xmlns:dc=\"http://purl.org/dc/elements/1.1/\"\n xmp:CreatorTool=\"Capture One 11 Macintosh\"\n xmp:CreateDate=\"2019-08-21T20:54:20\"\n xmp:Rating=\"4\"\n aux:SerialNumber=\"GP001601\"\n aux:ImageNumber=\"30012\"\n aux:Firmware=\"IQ280, Factory Firmware: 8.05.36\"\n photoshop:CaptionWriter=\"\"\n photoshop:Headline=\"\"\n photoshop:City=\"\"\n photoshop:State=\"\"\n photoshop:Country=\"\"\n photoshop:Source=\"\"\n photoshop:Instructions=\"\"\n photoshop:AuthorsPosition=\"\"\n photoshop:TransmissionReference=\"\"\n photoshop:Credit=\"\"\n photoshop:LegacyIPTCDigest=\"B135BFFD6A4CFB049F834A3F370A9AE3\"\n photoshop:DateCreated=\"2019-08-21T20:54:20\"\n Iptc4xmpCore:Location=\"\"\n Iptc4xmpCore:IntellectualGenre=\"\"\n Iptc4xmpCore:CountryCode=\"\"\n tiff:ImageWidth=\"2088\"\n tiff:ImageLength=\"3000\"\n tiff:Compression=\"1\"\n tiff:PhotometricInterpretation=\"2\"\n tiff:Orientation=\"1\"\n tiff:SamplesPerPixel=\"3\"\n tiff:PlanarConfiguration=\"1\"\n tiff:XResolution=\"400/1\"\n tiff:YResolution=\"400/1\"\n tiff:ResolutionUnit=\"2\"\n tiff:Make=\"Phase One\"\n tiff:Model=\"IQ280\"\n tiff:Software=\"Capture One 11 Macintosh\"\n exif:ExifVersion=\"0230\"\n exif:PixelXDimension=\"2088\"\n exif:PixelYDimension=\"3000\"\n exif:ExposureTime=\"1/4\"\n exif:ExposureProgram=\"1\"\n exif:ShutterSpeedValue=\"2/1\"\n exif:MeteringMode=\"1\"\n exif:LightSource=\"255\"\n exif:FocalPlaneXResolution=\"63015385/32768\"\n exif:FocalPlaneYResolution=\"63015385/32768\"\n exif:FocalPlaneResolutionUnit=\"3\"\n exif:FileSource=\"3\"\n exif:SceneType=\"1\"\n exif:WhiteBalance=\"5\"\n exif:ImageUniqueID=\"00E058000075000004019E064100753C\">\n <Iptc4xmpCore:CreatorContactInfo\n Iptc4xmpCore:CiEmailWork=\"digicc@library.illinois.edu\"\n Iptc4xmpCore:CiTelWork=\"+1(217)2442062\"\n Iptc4xmpCore:CiAdrPcode=\"61801\"\n Iptc4xmpCore:CiUrlWork=\"http://www.library.illinois.edu/staff/preservation/digitization/\"\n Iptc4xmpCore:CiAdrExtadr=\"1408 W. Gregory Drive\"\n Iptc4xmpCore:CiAdrCity=\"Urbana\"\n Iptc4xmpCore:CiAdrCtry=\"United States\"\n Iptc4xmpCore:CiAdrRegion=\"Illinois\"/>\n <tiff:BitsPerSample>\n <rdf:Seq>\n <rdf:li>8 8 8</rdf:li>\n </rdf:Seq>\n </tiff:BitsPerSample>\n <exif:ISOSpeedRatings>\n <rdf:Seq>\n <rdf:li>50</rdf:li>\n </rdf:Seq>\n </exif:ISOSpeedRatings>\n <dc:creator>\n <rdf:Seq>\n <rdf:li>University of Illinois Library</rdf:li>\n </rdf:Seq>\n </dc:creator>\n </rdf:Description>\n </rdf:RDF>"
}

2
test/demo/basic.html
View File

@ -25,7 +25,7 @@
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/testpattern.dzi",
showNavigator:true
showNavigator: true
});
</script>
</body>

200
test/demo/fitboundswithconstraints.html
View File

@ -3,110 +3,162 @@
<head>
<title>OpenSeadragon fitBoundsWithConstraints() Demo</title>
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
<style type="text/css">
.openseadragon1 {
width: 800px;
height: 600px;
height: 500px;
border:thin black solid;
margin-right:20px;
}
#highlights li {
cursor: pointer;
#buttons button{
width:10em;
text-align:center;
margin:5px;
}
.layout{
display:grid;
grid-template-columns:auto 1fr;
padding:10px;
}
.method{
border:medium gray solid;
margin:2px;
background-color:rgb(240, 240, 240)
}
.method.selected{
border:medium red solid;
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="layout">
<div id="contentDiv" class="openseadragon1"></div>
<div id="controls">
<div>
Simple demo page to show 'viewport.fitBounds().applyConstraints()' issue.
Simple demo page to show viewport.fitBounds() with and without constraints. The viewer
is set up with visibilityRatio = 1 and constrainDuringPan = true to clearly demonstrate the
constraints.
</div>
<div id="contentDiv" class="openseadragon1"></div>
<div id="highlights"></div>
<h3>Pick a method to use:</h3>
<div>
<div class="method selected" data-value="0">
<pre>viewport.fitBounds(bounds); //Ignores constraints</pre>
</div>
<div class="method" data-value="1">
<pre>viewport.fitBoundsWithConstraints(bounds);</pre>
</div>
<div class="method" data-value="4">
<pre>viewport.fitBoundsWithConstraints(bounds, true); //immediate</pre>
</div>
<div class="method" data-value="2">
<pre>//Initially ignore constraints
viewport.fitBounds(bounds);
//Apply constraints after 1 second delay
setTimeout(() => viewport.applyConstraints(), 1000);</pre>
</div>
</div>
<button id="rotate">Rotate the viewer</button>
<h3>Click to fit overlay bounds:</h3>
<div id="buttons"></div>
<h4>overlay.getBounds(viewer.viewport):</h4>
<pre class="bounds">Pick an overlay above to show the bounds</pre>
</div>
</div>
<select onchange="changeMethod(this.value);">
<option value=0>viewport.fitBoundsWithConstraints(bounds);</option>
<option value=1>viewport.fitBounds(bounds);</option>
<option value=2>viewport.fitBounds(bounds).applyConstraints();</option>
</select>
<input type="button" value="Go home" onclick="goHome()"/>
<script type="text/javascript">
var _viewer;
var viewer;
var _fittingMethod = 0;
var _highlights = [
{"queryPoint":[0.13789887359998443,0.43710575899579285], "radius":0.004479581945070337,"text":"Pipe"},
{"queryPoint":[0.5923298766583593,0.6461653354541856], "radius":0.013175241014912752,"text":"Fuel here"},
{"queryPoint":[0.43920338711232304,0.7483181389302148], "radius":0.09222668710438928, "text":"Wheel"},
{"queryPoint":[0.07341677959486298,0.9028719921872319], "radius":0.08996845561083797, "text":"Nothing special"}
];
var generateUniqueHash = (function() {
var counter = 0;
return function() {
return "openseadragon_" + (counter++);
};
})();
var _viewer = OpenSeadragon({
element: document.getElementById("contentDiv"),
showNavigationControl: false,
viewer = window.viewer = OpenSeadragon({
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
hash: generateUniqueHash(), //this is only needed if you want to instantiate more than one viewer at a time.
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: 'http://cdn.photosynth.net/ps2/19d5cf2b-77ed-439f-ac21-d3046320384c/packet/undistorted/img0043/',
Format: "jpg",
Overlap: 1,
TileSize: 510,
Size: {
Width: 4592,
Height: 3448
}
}
}
});
_viewer.addHandler("open", function() {
var str = "<ul>";
for (var i=0; i<_highlights.length; ++i) {
var highlight = _highlights[i];
str += "<li onclick='gotoHighlight("+i+")'>"+highlight.text+"</li>";
}
str += "</ul>";
document.getElementById("highlights").innerHTML = str;
tileSources: "../data/testpattern.dzi",
minZoomImageRatio: 0,
maxZoomPixelRatio: 10,
visibilityRatio:1,
constrainDuringPan:true,
});
function gotoHighlight(index) {
var highlight = _highlights[index];
viewer.addHandler("open", function(event) {
var elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "green";
elt.style.outline = "3px solid red";
elt.style.opacity = "0.7";
elt.textContent = "Within the image";
viewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.299),
rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
});
var viewport = _viewer.viewport;
var contentSize = viewport.contentSize;
var scaling = 1.0 / viewport.viewportToImageZoom(viewport.getZoom());
var radius = highlight.radius*Math.min(contentSize.x, contentSize.y);/*annotation.accurateRadius*scaling;*/
var center = new OpenSeadragon.Point(contentSize.x*highlight.queryPoint[0], contentSize.y*highlight.queryPoint[1]);
var bounds = viewport.imageToViewportRectangle(new OpenSeadragon.Rect(center.x-radius, center.y-radius, radius*2, radius*2));
elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "white";
elt.style.opacity = "0.5";
elt.style.outline = "5px solid pink";
elt.textContent = "Left edge rectangle";
viewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(-0.4, 0.7, 0.7, 0.15)
});
var elt = document.createElement("div");
elt.className = "runtime-overlay";
elt.style.background = "lightblue";
elt.style.outline = "3px solid purple";
elt.style.opacity = "0.7";
elt.textContent = "Top right square";
viewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(0.9, -0.1, 0.2, 0.2),
rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
});
viewer.currentOverlays.forEach(overlay=>{
var text = $(overlay.element).text();
var div=$('<div>').appendTo('#buttons');
var buttons=$('<button>').text(text).appendTo(div).on('click',()=>{
var bounds = overlay.getBounds(viewer.viewport);
$('.bounds').text(JSON.stringify(bounds,null,2));
var _fittingMethod = parseInt($('.method.selected').data('value'));
if (_fittingMethod === 0) {
viewport.fitBoundsWithConstraints(bounds, false);
viewer.viewport.fitBounds(bounds, false);
}
else if (_fittingMethod === 1) {
viewport.fitBounds(bounds, false);
viewer.viewport.fitBoundsWithConstraints(bounds, false);
}
else if (_fittingMethod === 4) {
viewer.viewport.fitBoundsWithConstraints(bounds, true);
}
else if (_fittingMethod === 2) {
viewport.fitBounds(bounds, false).applyConstraints();
}
viewer.viewport.fitBounds(bounds, false);
setTimeout(()=>viewer.viewport.applyConstraints(), 1000);
}
});
})
function changeMethod(value) {
_fittingMethod = parseInt(value, 10);
}
viewer.viewport.zoomTo(0.5, null, true);
function goHome() {
_viewer.viewport.goHome();
}
});
$('.method').on('click',function(){
$('.method').removeClass('selected');
$(this).addClass('selected');
})
$("#rotate").click(function() {
viewer.viewport.setRotation(viewer.viewport.getRotation() - 22.5);
$("#degrees").text(viewer.viewport.getRotation() + "deg");
});
</script>
</body>

236
test/demo/resizeviewer.html Normal file
View File

@ -0,0 +1,236 @@
<!DOCTYPE html>
<html>
<head>
<title>OpenSeadragon Viewer Resizing Demo</title>
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='../lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js'></script>
<link rel="stylesheet" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css">
<style type="text/css">
.outer-container{
width:800px;
height:600px;
margin-right:20px;
border: medium gray dashed;
background-color:beige;
position:relative;
display:flex;
flex-direction:row;
}
.inner-container{
width:800px;
height:600px;
border: thin black solid;
background-color:paleturquoise;
position:absolute;
left:50%;
top: 50%;
transform: translate(-50%, -50%);
}
.v2-container{
display:flex;
flex-direction:row;
height:400px;
}
.narrow{
width:50px;
background-color:pink;
height:100%;
}
.wide{
width:150px;
background-color:burlywood;
height:100%;
}
.v2-container:not([data-index="1"]) .narrow{
display:none;
}
.v2-container:not([data-index="2"]) .wide{
display:none;
}
#viewer, #viewer2 {
width: 100%;
height: 100%;
}
#buttons button{
width:18em;
text-align:center;
margin:5px;
}
.layout{
display:grid;
grid-template-columns:auto 1fr;
row-gap:10px;
padding:10px;
}
.method{
border:medium gray solid;
margin:2px;
background-color:rgb(240, 240, 240)
}
.method.selected{
border:medium red solid;
background-color: lightgoldenrodyellow;
}
.options{
display:grid;
grid-template-columns: 50% 50%;
row-gap:10px;
}
</style>
</head>
<body>
<div class="layout">
<div class="outer-container">
<div class="inner-container">
<div id="viewer"></div>
</div>
</div>
<div id="controls">
<div>
Simple demo page to show viewer behavior during resizing of the container.
The viewers' container elements are styled with width and height of 100%,
with dimensions set by CSS properties on a parent element.
</div>
<h3>Pick options to test:</h3>
<p>These options apply to both of the demo viewers on the left (top and bottom).</p>
<div class="options">
<div class="method preserve-method selected" data-value="0">
<pre>preserveImageSizeOnResize: false</pre>
</div>
<div class="method preserve-method" data-value="1">
<pre>preserveImageSizeOnResize: true</pre>
</div>
<div class="method auto-method selected" data-value="1">
<pre>autoResize: true</pre>
</div>
<div class="method auto-method" data-value="0">
<pre>autoResize: false</pre>
</div>
</div>
<h3>Click to resize the viewer:</h3>
<div id="buttons">
<div>
<button>Resize width only</button>
</div>
<div>
<button>Resize height only</button>
</div>
<div>
<button>Resize with constant aspect ratio</button>
</div>
<div>
<button>Toggle resizable inner container</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var viewer = window.v1 = OpenSeadragon({
id: "viewer",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/iiif_2_0_sizes/info.json",
minZoomImageRatio: 0,
maxZoomPixelRatio: 10,
visibilityRatio:0.5,
constrainDuringPan:false,
showNavigator: true,
});
updateViewer();
var buttons=$('#buttons button').on('click',function(){
switch($(this).text()){
case 'Resize width only': resizeWidth(this); break;
case 'Resize height only': resizeHeight(this); break;
case 'Resize with constant aspect ratio': resizeBoth(this); break;
case 'Toggle resizable inner container': toggleResizable(this); break;
}
});
function updateViewer(){
viewer.preserveImageSizeOnResize = !!parseInt($('.preserve-method.selected').data('value'));
viewer.autoResize = !!parseInt($('.auto-method.selected').data('value'));
}
$('.preserve-method').on('click',function(){
$('.preserve-method').removeClass('selected');
$(this).addClass('selected');
});
$('.auto-method').on('click',function(){
$('.auto-method').removeClass('selected');
$(this).addClass('selected');
});
$('.method').on('click',updateViewer);
var container = $('.inner-container');
function resizeWidth(b){
if(container.height() !== 600) return;
if(container.width()==800){
container.width(600);
$('#buttons button').prop('disabled', true);
$(b).prop('disabled', false);
} else {
container.width(800);
$('#buttons button').prop('disabled', false);
}
}
function resizeHeight(b){
if(container.width() !== 800) return;
if(container.height()==600){
container.height(450);
$('#buttons button').prop('disabled', true);
$(b).prop('disabled', false);
} else {
container.height(600);
$('#buttons button').prop('disabled', false);
}
}
function resizeBoth(b){
if(container.height()==600){
container.width(600);
container.height(450);
$('#buttons button').prop('disabled', true);
$(b).prop('disabled', false);
} else {
container.width(800);
container.height(600);
$('#buttons button').prop('disabled', false);
}
}
function toggleResizable(b){
if(container.isResizable){
container.isResizable = false;
container.resizable('destroy');
container.width(800);
container.height(600);
$('#buttons button').prop('disabled', false);
} else {
container.isResizable = true;
// container.resizable({containment:"parent", maxWidth: 800, maxHeight: 600,});
container.resizable();
$('#buttons button').prop('disabled', true);
container.width(800);
container.height(600);
$(b).prop('disabled', false);
}
}
</script>
</body>
</html>

34
test/demo/rotating-navigator-region.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>OpenSeadragon Basic Demo</title>
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
<style type="text/css">
.openseadragon1 {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div>
Simple demo page. The navigator region is expected to rotate when the image is rotated.
The default behaviour is to keep the region still as the image below it rotates.
</div>
<div id="contentDiv" class="openseadragon1"></div>
<script type="text/javascript">
var viewer = OpenSeadragon({
// debugMode: true,
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/testpattern.dzi",
showNavigator: true,
navigatorRotate: false
});
viewer.viewport.setRotation(45)
</script>
</body>
</html>

126
test/modules/ajax-tiles.js
View File

@ -245,4 +245,130 @@
tileSource: staticHeaderTileSource
});
});
QUnit.test('Viewer headers can be updated', function(assert) {
var done = assert.async();
var newHeaders = {
'X-Viewer-Header': 'ViewerHeaderValue-Updated',
'X-Viewer-Header2': 'ViewerHeaderValue2'
}
var newHeaders2 = {
Range: 'test',
}
var tileLoaded = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded);
// set new Viewer headers and propagate to TiledImage and Tile
viewer.setAjaxHeaders(newHeaders);
viewer.addHandler('tile-loaded', tileLoaded2);
};
var tileLoaded2 = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded2);
assert.deepEqual(viewer.ajaxHeaders, newHeaders);
assert.deepEqual(evt.tiledImage.ajaxHeaders, newHeaders);
assert.deepEqual(
evt.tile.ajaxHeaders,
OpenSeadragon.extend(
{}, viewer.ajaxHeaders, evt.tiledImage.ajaxHeaders,
{ Range: getTileRangeHeader(evt.tile.level, evt.tile.x, evt.tile.y) }
)
);
// set new Viewer headers and propagate to TiledImage and Tile
viewer.setAjaxHeaders(newHeaders2, true);
viewer.addHandler('tile-loaded', tileLoaded3);
};
var tileLoaded3 = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded3);
assert.deepEqual(viewer.ajaxHeaders, newHeaders2);
assert.deepEqual(evt.tiledImage.ajaxHeaders, newHeaders2);
assert.equal(evt.tile.ajaxHeaders['X-Viewer-Header'], undefined);
assert.equal(evt.tile.ajaxHeaders['X-Viewer-Header2'], undefined);
// 'Range' header entry set per tile and must not be overwritten by Viewer header
assert.equal(evt.tile.ajaxHeaders.Range, getTileRangeHeader(evt.tile.level, evt.tile.x, evt.tile.y));
// set new Viewer headers but do not propagate to TiledImage and Tile
viewer.setAjaxHeaders(newHeaders, false);
viewer.addHandler('tile-loaded', tileLoaded4);
};
var tileLoaded4 = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded4);
assert.deepEqual(viewer.ajaxHeaders, newHeaders);
assert.deepEqual(evt.tiledImage.ajaxHeaders, newHeaders2);
assert.equal(evt.tile.ajaxHeaders['X-Viewer-Header'], undefined);
assert.equal(evt.tile.ajaxHeaders['X-Viewer-Header2'], undefined);
done();
};
viewer.addHandler('tile-loaded', tileLoaded);
viewer.open(customTileSource);
});
QUnit.test('TiledImage headers can be updated', function(assert) {
var done = assert.async();
var tileSourceHeaders = {
'X-Tile-Header': 'TileHeaderValue'
}
var newHeaders = {
'X-TiledImage-Header': 'TiledImageHeaderValue-Updated',
'X-TiledImage-Header2': 'TiledImageHeaderValue2'
}
var newHeaders2 = {
'X-Viewer-Header': 'ViewerHeaderValue-Updated',
'X-Tile-Header': 'TileHeaderValue-Updated'
}
var tileLoaded = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded);
// set new TiledImage headers and propagate to Tile
evt.tiledImage.setAjaxHeaders(newHeaders);
viewer.addHandler('tile-loaded', tileLoaded2);
};
var tileLoaded2 = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded2);
assert.deepEqual(viewer.ajaxHeaders, { 'X-Viewer-Header': 'ViewerHeaderValue' });
assert.deepEqual(evt.tiledImage._ownAjaxHeaders, newHeaders);
assert.deepEqual(evt.tiledImage.ajaxHeaders, OpenSeadragon.extend({}, viewer.ajaxHeaders, newHeaders));
assert.deepEqual(evt.tile.ajaxHeaders, OpenSeadragon.extend({}, viewer.ajaxHeaders, newHeaders, tileSourceHeaders));
// set new TiledImage headers (that overwrite header entries of Viewer and Tile) and propagate to Tile
evt.tiledImage.setAjaxHeaders(newHeaders2, true);
viewer.addHandler('tile-loaded', tileLoaded3);
};
var tileLoaded3 = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded3);
assert.deepEqual(viewer.ajaxHeaders, { 'X-Viewer-Header': 'ViewerHeaderValue' });
assert.deepEqual(evt.tiledImage._ownAjaxHeaders, newHeaders2);
assert.deepEqual(evt.tiledImage.ajaxHeaders, OpenSeadragon.extend({}, viewer.ajaxHeaders, newHeaders2));
assert.deepEqual(evt.tile.ajaxHeaders, OpenSeadragon.extend({}, viewer.ajaxHeaders, newHeaders2, tileSourceHeaders));
// set new TiledImage headers but do not propagate to Tile
evt.tiledImage.setAjaxHeaders(null, false);
viewer.addHandler('tile-loaded', tileLoaded4);
};
var tileLoaded4 = function tileLoaded(evt) {
viewer.removeHandler('tile-loaded', tileLoaded4);
assert.deepEqual(viewer.ajaxHeaders, { 'X-Viewer-Header': 'ViewerHeaderValue' });
assert.deepEqual(evt.tiledImage._ownAjaxHeaders, {});
assert.deepEqual(evt.tiledImage.ajaxHeaders, viewer.ajaxHeaders);
assert.deepEqual(evt.tile.ajaxHeaders, OpenSeadragon.extend({}, viewer.ajaxHeaders, newHeaders2, tileSourceHeaders));
done();
};
viewer.addHandler('tile-loaded', tileLoaded);
viewer.addTiledImage({
ajaxHeaders: {
'X-TiledImage-Header': 'TiledImageHeaderValue'
},
tileSource: OpenSeadragon.extend({}, customTileSource, {
getTileAjaxHeaders: function() {
return tileSourceHeaders;
}
}),
});
});
})();

31
test/modules/basic.js
View File

@ -224,32 +224,43 @@
});
QUnit.test('FullScreen', function(assert) {
var done = assert.async();
const done = assert.async();
if (!OpenSeadragon.supportsFullScreen) {
assert.expect(0);
done();
return;
}
viewer.addHandler("open", function () {
viewer.addHandler('open', function () {
assert.ok(!OpenSeadragon.isFullScreen(), 'Started out not fullscreen');
var checkEnteringPreFullScreen = function(event) {
const checkEnteringPreFullScreen = (event) => {
viewer.removeHandler('pre-full-screen', checkEnteringPreFullScreen);
assert.ok(event.fullScreen, 'Switching to fullscreen');
assert.ok(!OpenSeadragon.isFullScreen(), 'Not yet fullscreen');
};
// The fullscreen mode is always denied during tests so we are
// exiting directly.
var checkExitingFullScreen = function(event) {
const checkExitingFullScreen = (event) => {
viewer.removeHandler('full-screen', checkExitingFullScreen);
assert.ok(!event.fullScreen, 'Exiting fullscreen');
assert.ok(!OpenSeadragon.isFullScreen(), 'Disabled fullscreen');
assert.ok(!event.fullScreen, 'Disabling fullscreen');
assert.ok(!OpenSeadragon.isFullScreen(), 'Fullscreen disabled');
done();
}
// The 'new' headless mode allows us to enter fullscreen, so verify
// that we see the correct values returned. We will then close out
// of fullscreen to check the same values when exiting.
const checkAcquiredFullScreen = (event) => {
viewer.removeHandler('full-screen', checkAcquiredFullScreen);
viewer.addHandler('full-screen', checkExitingFullScreen);
assert.ok(event.fullScreen, 'Acquired fullscreen');
assert.ok(OpenSeadragon.isFullScreen(), 'Fullscreen enabled');
viewer.setFullScreen(false);
};
viewer.addHandler("pre-full-screen", checkEnteringPreFullScreen);
viewer.addHandler("full-screen", checkExitingFullScreen);
viewer.addHandler('pre-full-screen', checkEnteringPreFullScreen);
viewer.addHandler('full-screen', checkAcquiredFullScreen);
viewer.setFullScreen(true);
});

85
test/modules/event-source.js Normal file
View File

@ -0,0 +1,85 @@
/* global QUnit, $, TouchUtil, Util, testLog */
(function () {
var context, result=[], eName = "test", eventCounter = 0, finished = false;
function evaluateTest(e) {
if (finished) return;
finished = true;
e.assert.strictEqual(JSON.stringify(result), JSON.stringify(e.expected), e.message);
e.done();
}
function executor(i, ms) {
if (ms === undefined) return function (e) {
eventCounter++;
result.push(i);
if (eventCounter === context.numberOfHandlers(eName)) {
evaluateTest(e);
}
};
return function (e) {
return new Promise(function (resolve) {
setTimeout(function () {
eventCounter++;
result.push(i);
if (eventCounter === context.numberOfHandlers(eName)) {
evaluateTest(e);
}
resolve();
}, ms);
});
}
}
function runTest(e) {
context.raiseEvent(eName, e);
}
QUnit.module( 'EventSource', {
beforeEach: function () {
context = new OpenSeadragon.EventSource();
eventCounter = 0;
result = [];
finished = false;
}
} );
// ----------
QUnit.test('EventSource: no events', function(assert) {
context.addHandler(eName, evaluateTest);
runTest({
assert: assert,
done: assert.async(),
expected: [],
message: 'No handlers registered - arrays should be empty.'
});
});
QUnit.test('EventSource: simple callbacks order', function(assert) {
context.addHandler(eName, executor(1));
context.addHandler(eName, executor(2));
context.addHandler(eName, executor(3));
runTest({
assert: assert,
done: assert.async(),
expected: [1, 2, 3],
message: 'Simple callback order should follow [1,2,3].'
});
});
QUnit.test('EventSource: priority callbacks order', function(assert) {
context.addHandler(eName, executor(1), undefined, 20);
context.addHandler(eName, executor(2), undefined, 124);
context.addHandler(eName, executor(3), undefined, -5);
context.addHandler(eName, executor(4));
context.addHandler(eName, executor(5), undefined, -2);
runTest({
assert: assert,
done: assert.async(),
expected: [2, 1, 4, 5, 3],
message: 'Prioritized callback order should follow [2,1,4,5,3].'
});
});
} )();

10
test/modules/navigator.js
View File

@ -248,14 +248,8 @@
};
var dragNavigatorBackToCenter = function () {
var start = viewer.viewport.getBounds().getTopLeft(),
target = new OpenSeadragon.Point(0.5 - viewer.viewport.getBounds().width / 2,
1 / viewer.source.aspectRatio / 2 - viewer.viewport.getBounds().height / 2),
delta = target.minus(start);
if (viewer.source.aspectRatio < 1) {
delta.y *= viewer.source.aspectRatio;
}
simulateNavigatorDrag(viewer.navigator, delta.x * displayRegionWidth, delta.y * displayRegionHeight);
var delta = viewer.viewport.getHomeBounds().getCenter().minus(viewer.viewport.getCenter()).times(displayRegionWidth);
simulateNavigatorDrag(viewer.navigator, delta.x, delta.y);
};
var resizeElement = function ($element, width, height) {

6
test/modules/tiledimage.js
View File

@ -9,6 +9,7 @@
testLog.reset();
// eslint-disable-next-line new-cap
viewer = OpenSeadragon({
id: 'example',
prefixUrl: '/build/openseadragon/images/',
@ -517,12 +518,17 @@
var image = viewer.world.getItemAt(0);
assert.equal(image.getFullyLoaded(), false, 'not fully loaded at first');
// Zoom out enough that we don't start out with all the tiles loaded.
viewer.viewport.zoomBy(0.5, null, true);
var count = 0;
var fullyLoadedChangeHandler = function(event) {
if (count === 0) {
assert.equal(event.fullyLoaded, true, 'event includes true fullyLoaded property');
assert.equal(image.getFullyLoaded(), true, 'image is fully loaded after event');
// Zoom in enough that it needs to load some new tiles.
viewer.viewport.zoomBy(5, null, true);
} else if (count === 1) {
assert.equal(event.fullyLoaded, false, 'event includes false fullyLoaded property');

4
test/modules/viewport.js
View File

@ -539,7 +539,7 @@
var bounds = viewport.getBounds();
Util.assertRectangleEquals(
assert,
new OpenSeadragon.Rect(1.2071067811865466, 0.20710678118654746, Math.sqrt(2), Math.sqrt(2), 45),
new OpenSeadragon.Rect(1.0, 0.0, Math.sqrt(2), Math.sqrt(2), 45),
bounds,
EPSILON,
"Viewport.applyConstraints with rotation should move viewport.");
@ -564,7 +564,7 @@
var bounds = viewport.getBounds();
Util.assertRectangleEquals(
assert,
new OpenSeadragon.Rect(1.2071067811865466, 0.20710678118654746, Math.sqrt(2), Math.sqrt(2), 45),
new OpenSeadragon.Rect(1.0, 0.0, Math.sqrt(2), Math.sqrt(2), 45),
bounds,
EPSILON,
"Viewport.applyConstraints flipped and with rotation should move viewport.");

7
test/test.html
View File

@ -3,14 +3,14 @@
<head>
<meta charset="utf-8">
<title>OpenSeadragon QUnit</title>
<link rel="stylesheet" href="/node_modules/qunitjs/qunit/qunit.css">
<link rel="stylesheet" href="/node_modules/qunit/qunit/qunit.css">
<link rel="stylesheet" href="/test/lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css">
<link rel="stylesheet" href="/test/helpers/test.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="/node_modules/qunitjs/qunit/qunit.js"></script>
<script src="/node_modules/qunit/qunit/qunit.js"></script>
<script src="/test/lib/jquery-1.9.1.min.js"></script>
<script src="/test/lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js"></script>
<script src="/test/lib/jquery.simulate.js"></script>
@ -22,6 +22,7 @@
<!-- Polyfill must be inserted first because it is testing functions
reassignments which could be done by other test. -->
<script src="/test/modules/polyfills.js"></script>
<script src="/test/modules/event-source.js"></script>
<script src="/test/modules/viewerretrieval.js"></script>
<script src="/test/modules/basic.js"></script>
<script src="/test/modules/strings.js"></script>
@ -50,6 +51,6 @@
<script src="/test/modules/tilesource-dynamic-url.js"></script>
<!--The navigator tests are the slowest (for now; hopefully they can be sped up)
so we put them last. -->
<!-- The navigator tests are failing right now, so we have them disabled for the moment <script src="/test/modules/navigator.js"></script> -->
<script src="/test/modules/navigator.js"></script>
</body>
</html>